:root {
  --paper:#fcfcfa;
  --white:#fff;
  --ink:#15171b;
  --muted:#5c6270;
  --line:#dddeda;
  --blue:#2743e3;
  --blue-soft:#eef0ff;
  --green:#176b53;
  --green-soft:#eaf5ef;
  --amber:#855b16;
  --amber-soft:#faf2df;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:95px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,figure {
  margin:0;
}

a {
  color:inherit;
  text-decoration:none;
}

a,summary {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px;
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
}

h1 {
  font-size:clamp(48px,5.5vw,76px);
  letter-spacing:-.045em;
}

h2 {
  font-size:clamp(30px,3.3vw,44px);
  letter-spacing:-.035em;
}

h3 {
  font-size:21px;
  letter-spacing:-.02em;
}

em {
  font-style:normal;
  color:var(--blue);
}

.wrap {
  width:min(1180px,100%);
  margin:auto;
  padding:0 32px;
}

.skip {
  position:absolute;
  left:20px;
  top:-80px;
  z-index:100;
  background:var(--white);
  padding:12px;
}

.skip:focus {
  top:12px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(252,252,250,.97);
  border-bottom:1px solid var(--line);
}

.nav {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo {
  display:flex;
  gap:11px;
  align-items:center;
  font-family:var(--display);
  font-size:24px;
  font-weight:700;
  letter-spacing:-.04em;
}

.nav nav {
  display:flex;
  gap:27px;
  align-items:center;
  font-size:14px;
}

.nav a:not(.button):hover,footer a:hover {
  color:var(--blue);
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:48px;
  padding:12px 20px;
  background:var(--blue);
  color:var(--white);
  font-size:14px;
  font-weight:600;
  border:1px solid var(--blue);
  border-radius:5px;
  line-height:1.4;
  transition:background .15s;
}

.button:hover {
  background:#1d33ba;
}

.button.small {
  min-height:40px;
  padding:9px 16px;
}

.button.outline {
  background:transparent;
  color:var(--ink);
  border-color:#aeb1bb;
}

.button.outline:hover {
  background:var(--blue-soft);
}

.text-link {
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  gap:16px;
  align-items:center;
  padding:10px 0;
  line-height:1.5;
}

.text-link:hover {
  color:var(--blue);
}

.eyebrow {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  line-height:1.6;
  margin-bottom:20px;
}

.signal {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--blue);
  margin-right:7px;
  border-radius:50%;
}

.hero {
  padding:76px 0 0;
  overflow:hidden;
}

.hero-grid {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  gap:65px;
  align-items:center;
}

.hero .lede {
  margin-top:26px;
  max-width:480px;
  font-size:17px;
}

.lede {
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-width:490px;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 22px;
  margin-top:30px;
}

.fine {
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.hero-copy>.fine {
  margin-top:13px;
}

.client-line {
  margin-top:36px;
  color:var(--muted);
  font-size:12px;
}

.client-line p {
  margin:5px 0;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
}

.client-line>span:last-child {
  font-size:11px;
}

.brief-demo {
  border:1px solid #c7cad5;
  border-radius:9px;
  background:var(--white);
  box-shadow:0 18px 55px -26px #202c7560;
  position:relative;
}

.brief-demo:before {
  content:"";
  position:absolute;
  inset:-20px -22px;
  background:linear-gradient(145deg,#edf0ff,#f3f4f1);
  border-radius:14px;
  z-index:-1;
  transform:rotate(2deg);
}

.brief-demo figcaption {
  border-bottom:1px solid var(--line);
  padding:13px 23px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
}

.demo-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
}

.example-label {
  margin-left:auto;
  font-family:var(--mono);
  font-size:10px;
}

.demo-title {
  padding:25px 24px 22px;
}

.demo-title .eyebrow {
  font-size:9px;
  margin-bottom:10px;
}

.handle {
  text-transform:none;
  letter-spacing:0;
}

.demo-title h2 {
  font-size:29px;
  letter-spacing:-.025em;
}

.demo-title>p:last-child {
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}

.demo-section {
  margin:0 23px;
  border-top:1px solid var(--line);
  padding:18px 0;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}

.section-heading h3 {
  font-size:15px;
}

.badge {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:10px;
  line-height:1.6;
  font-weight:600;
  padding:3px 7px;
  border-radius:4px;
  font-family:var(--body);
  letter-spacing:0;
}

.current {
  color:var(--green);
  background:var(--green-soft);
}

.check {
  color:var(--amber);
  background:var(--amber-soft);
}

.neutral {
  color:var(--muted);
  background:#f0f1f3;
}

.demo-section>p {
  font-size:13px;
}

.attribution {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:10px;
}

.dependency {
  font-size:11px;
  line-height:1.6;
  background:var(--amber-soft);
  color:#785318;
  padding:9px 11px;
  margin-top:12px;
  border-radius:4px;
}

.dependency>span {
  margin-right:5px;
}

.demo-proposal {
  margin:0 23px 18px;
  background:var(--blue-soft);
  border:1px solid #d8defe;
  border-radius:5px;
}

.demo-proposal summary {
  padding:12px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:600;
  list-style:none;
}

.demo-proposal summary::-webkit-details-marker {
  display:none;
}

.demo-proposal small {
  display:block;
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  padding-left:14px;
}

.proposal-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--blue);
  border-radius:50%;
  margin-right:7px;
}

.expand {
  color:var(--blue);
  font-size:20px;
  font-weight:400;
}

.demo-proposal[open] .expand {
  transform:rotate(45deg);
}

.proposal-body {
  padding:0 12px 14px;
  font-size:12px;
}

.proposal-body p+p {
  margin-top:8px;
}

.demo-footer {
  border-top:1px solid var(--line);
  padding:12px 23px;
  font-size:10px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
}

.benefit-strip {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:25px 0;
  margin-top:68px;
  font-size:12px;
  color:var(--muted);
}

.benefit-strip span:before {
  content:"↗";
  color:var(--blue);
  margin-right:12px;
}

.section {
  padding:85px 0;
  border-top:1px solid var(--line);
}

.section-intro {
  display:flex;
  justify-content:space-between;
  gap:45px;
  align-items:end;
}

.section-intro>.lede {
  max-width:420px;
}

.section-intro .eyebrow {
  margin-bottom:16px;
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:45px;
}

.feature-grid article {
  padding:0 27px;
  border-left:1px solid var(--line);
}

.feature-grid article:first-child {
  padding-left:0;
  border:0;
}

.feature-grid article:last-child {
  padding-right:0;
}

.step-number {
  font-family:var(--mono);
  color:var(--blue);
  font-size:10px;
  letter-spacing:.08em;
}

.feature-grid h3 {
  margin:15px 0 14px;
}

.feature-grid p {
  font-size:14px;
  color:var(--muted);
}

.mini-example {
  background:#f1f2ef;
  border-radius:5px;
  padding:14px;
  margin-top:22px;
  font-size:11px;
  color:var(--muted);
}

.mini-example>span:first-child {
  color:var(--ink);
  font-weight:600;
}

.mini-example hr {
  border:0;
  border-top:1px solid var(--line);
  margin:10px 0;
}

.workflow-section {
  background:#f1f3f9;
}

.workflow-grid,.workspace-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.workflow-grid .lede,.workspace-grid .lede {
  margin-top:22px;
}

.prompt-example {
  margin-top:28px;
  font-size:15px;
  padding-left:19px;
  border-left:3px solid var(--blue);
  line-height:1.9;
}

.prompt-example strong {
  font-family:var(--mono);
  color:var(--blue);
  font-size:13px;
}

.workflow {
  list-style:none;
  padding:0;
  margin:0;
}

.workflow li {
  display:flex;
  gap:22px;
  padding:25px 0;
  border-top:1px solid #d8dce7;
}

.workflow li:first-child {
  border:0;
  padding-top:0;
}

.workflow li:last-child {
  padding-bottom:0;
}

.workflow-number {
  flex-shrink:0;
  display:grid;
  place-items:center;
  border:1px solid #b6bed7;
  background:var(--paper);
  width:33px;
  height:33px;
  border-radius:50%;
  font-family:var(--mono);
  font-size:12px;
  color:var(--blue);
}

.workflow h3 {
  font-size:21px;
}

.workflow p {
  font-size:14px;
  color:var(--muted);
  margin-top:9px;
}

.workspace-grid .text-link {
  margin-top:20px;
}

.roles-panel {
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--white);
}

.roles-header {
  background:#f4f5f2;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 24px;
  gap:12px;
}

.roles-header .eyebrow {
  font-size:9px;
  color:var(--muted);
  margin:0;
}

.role {
  margin:0 24px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.role:last-child {
  border:0;
}

.role h3 {
  font-size:17px;
  display:flex;
  align-items:center;
  gap:10px;
}

.role p {
  color:var(--muted);
  font-size:13px;
  margin-top:9px;
}

.pricing-section {
  background:#f5f5f2;
}

.plans {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
  margin-top:40px;
  align-items:stretch;
}

.plan {
  padding:28px 25px;
  background:var(--paper);
  border:1px solid #d2d5da;
  border-radius:7px;
  display:flex;
  flex-direction:column;
}

.plan .eyebrow {
  margin-bottom:12px;
}

.plan h3 {
  font-size:20px;
  margin-bottom:23px;
}

.price {
  font-family:var(--display);
  font-size:41px;
  letter-spacing:-.04em;
  line-height:1.2;
}

.price span {
  font-family:var(--body);
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
}

.annual {
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
  min-height:35px;
}

.plan ul {
  padding:0;
  list-style:none;
  margin:20px 0 25px;
  flex:1;
}

.plan li {
  border-top:1px solid var(--line);
  padding:10px 0;
  font-size:13px;
  line-height:1.55;
}

.plan .button {
  width:100%;
}

.plan .fine {
  margin-top:12px;
  text-align:center;
}

.plan.featured {
  background:#f0f2ff;
  border:1px solid var(--blue);
}

.pricing-note {
  font-size:11px;
  color:var(--muted);
  margin-top:20px;
}

.data-promise {
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:22px;
  display:flex;
  gap:20px;
  align-items:baseline;
  font-size:13px;
  color:var(--muted);
}

.data-promise>span {
  color:var(--green);
  font-size:22px;
}

.data-promise strong {
  color:var(--ink);
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:90px;
}

.faq-grid>.text-link,.faq-grid>div>.text-link {
  margin-top:25px;
}

.faq details {
  border-bottom:1px solid var(--line);
}

.faq details:first-child {
  border-top:1px solid var(--line);
}

.faq summary {
  padding:20px 30px 20px 0;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  list-style:none;
  position:relative;
  line-height:1.5;
}

.faq summary::-webkit-details-marker {
  display:none;
}

.faq summary:after {
  content:"+";
  position:absolute;
  right:0;
  top:20px;
  color:var(--blue);
  font-weight:400;
  font-size:20px;
}

.faq details[open] summary:after {
  content:"−";
}

.faq details p {
  padding:0 20px 22px 0;
  font-size:14px;
  color:var(--muted);
}

.closing {
  text-align:center;
  background:var(--blue);
  color:white;
  padding:75px 0;
}

.closing .eyebrow {
  color:#cfd6ff;
}

.closing h2 {
  font-size:clamp(36px,4.5vw,56px);
}

.closing em {
  color:#cbd3ff;
}

.closing p:not(.eyebrow) {
  margin:22px 0 28px;
  color:#e1e5ff;
}

.closing .button {
  background:var(--paper);
  color:var(--blue);
}

.closing .button:hover {
  background:#e9ecff;
}

footer {
  padding:35px 0;
}

.footer-row {
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.footer-row .logo {
  font-size:20px;
}

.footer-row p,.footer-row small {
  font-size:11px;
  color:var(--muted);
}

.footer-row nav {
  display:flex;
  gap:24px;
  font-size:12px;
  margin-left:auto;
}

.footer-row small {
  width:100%;
  border-top:1px solid var(--line);
  padding-top:18px;
}

@media(min-width:1400px) {
  .hero {
    padding-top:90px;
  }
}

@media(max-width:1000px) {
  .hero-grid {
    gap:38px;
  }
  .hero {
    padding-top:55px;
  }
  .wide-break {
    display:none;
  }
  .hero h1 {
    font-size:58px;
  }
  .section-intro>.lede {
    max-width:350px;
  }
  .workflow-grid,.workspace-grid,.faq-grid {
    gap:45px;
  }
  .plan {
    padding:24px 19px;
  }
  .plans {
    gap:12px;
  }
  .price span {
    display:block;
    margin-top:6px;
  }
  .hero .actions {
    gap:8px;
  }
}

@media(max-width:760px) {
  .wrap {
    padding:0 23px;
  }
  .nav {
    height:66px;
  }
  .nav nav {
    gap:18px;
  }
  .desktop-link {
    display:none;
  }
  .logo {
    font-size:22px;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:45px;
  }
  .hero {
    padding-top:42px;
  }
  .hero h1 {
    font-size:clamp(48px,9vw,68px);
  }
  .hero .lede {
    max-width:540px;
  }
  .hero-copy .eyebrow {
    font-size:10px;
  }
  .hero .actions {
    gap:12px 22px;
  }
  .client-line {
    margin-top:25px;
  }
  .brief-demo {
    max-width:540px;
    width:100%;
    margin:auto;
  }
  .brief-demo:before {
    inset:-12px;
  }
  .benefit-strip {
    margin-top:42px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
    padding:24px 0;
    font-size:11px;
  }
  .benefit-strip span:before {
    margin-right:8px;
  }
  .section {
    padding:56px 0;
  }
  .section-intro {
    display:block;
  }
  .section-intro>.lede {
    max-width:100%;
    margin-top:22px;
  }
  .section-intro>.text-link {
    margin-top:18px;
  }
  .feature-grid {
    grid-template-columns:1fr;
    margin-top:32px;
    gap:25px;
  }
  .feature-grid article,.feature-grid article:first-child,.feature-grid article:last-child {
    border:0;
    border-top:1px solid var(--line);
    padding:24px 0 0;
  }
  .feature-grid h3 {
    margin-top:12px;
  }
  .mini-example {
    margin-top:16px;
  }
  .workflow-grid,.workspace-grid,.faq-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .workflow li {
    gap:16px;
  }
  .plans {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:25px;
  }
  .plan {
    padding:26px;
  }
  .price span {
    display:inline;
  }
  .annual {
    min-height:0;
  }
  .plan ul {
    margin:20px 0;
  }
  .roles-header {
    padding:15px 19px;
  }
  .role {
    margin:0 19px;
  }
  .data-promise {
    gap:12px;
  }
  .faq-grid {
    gap:22px;
  }
  .closing {
    padding:58px 0;
  }
  .footer-row {
    gap:16px;
  }
  .footer-row p {
    width:calc(100% - 110px);
  }
  .footer-row nav {
    width:100%;
    margin:0;
    gap:25px;
  }
  .footer-row small {
    margin-top:5px;
  }
  .demo-title h2 {
    font-size:28px;
  }
}

@media(max-width:370px) {
  .wrap {
    padding:0 18px;
  }
  .nav nav {
    gap:12px;
  }
  .nav nav>a {
    font-size:12px;
  }
  .nav .button {
    padding:8px 11px;
  }
  .hero .button {
    width:100%;
  }
  .section-heading {
    gap:8px;
  }
  .section-heading h3 {
    font-size:14px;
  }
  .demo-section {
    margin:0 17px;
  }
  .demo-proposal {
    margin-left:17px;
    margin-right:17px;
  }
  .demo-title {
    padding:22px 17px;
  }
  .demo-title h2 {
    font-size:25px;
  }
  .roles-header {
    flex-wrap:wrap;
  }
  .benefit-strip {
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .button {
    transition:none;
  }
}