/* API page. Shared design system (tokens, reset, nav, footer, focus,
   reduced-motion) lives in assets/base.css. Section/card/code patterns below
   reuse the pricing + docs page families so this reads as one site. */

.phero{padding:64px 0 8px;position:relative}
.phero .wrap{max-width:940px}
.tag-soon{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--clay-deep);background:var(--wash-clay);border:1px solid var(--clay-soft);
  border-radius:999px;padding:5px 13px}
.tag-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);
  box-shadow:0 0 0 0 rgba(var(--clay-rgb),.6);animation:soonpulse 2.4s infinite}
@keyframes soonpulse{0%{box-shadow:0 0 0 0 rgba(var(--clay-rgb),.55)}70%{box-shadow:0 0 0 8px rgba(var(--clay-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--clay-rgb),0)}}
@media (prefers-reduced-motion: reduce){.tag-soon::before{animation:none}}
.phero h1{font-family:var(--display);font-weight:780;font-size:clamp(2.5rem,5.4vw,3.9rem);line-height:.99;letter-spacing:-.025em;margin:18px 0 0}
.phero h1 .it{color:var(--clay)}
.phero .sub{font-size:1.22rem;color:var(--ink-soft);max-width:60ch;margin-top:22px;line-height:1.55}
.phero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero-cta .btn{font-size:15.5px;padding:13px 24px;border-radius:999px}

section{padding:70px 0;position:relative}
.band-blue{background:var(--wash-blue)}
.band-sage{background:var(--wash-sage)}
.head{max-width:840px;margin:0 auto;text-align:center}
.head h2{font-family:var(--display);font-weight:740;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.03;letter-spacing:-.022em}
.head h2 .it{color:var(--clay)}
.head .lead{font-size:1.13rem;color:var(--ink-soft);margin:16px auto 0;max-width:58ch;line-height:1.55}

/* what-it-is: two-up */
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:28px}
.card h3{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.015em;margin:0 0 4px}
.card .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep)}
.card p{font-size:15px;color:var(--ink-soft);line-height:1.6;margin:10px 0 0}
.card code{font-family:var(--mono);font-size:12.5px;color:var(--clay-deep);background:var(--wash-clay);padding:1px 6px;border-radius:5px}

/* use cases: index list */
.uses{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;margin-top:40px}
@media(max-width:820px){.uses{grid-template-columns:1fr}}
.use{padding:20px 0;border-top:1px solid var(--edge);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.use .n{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--clay);line-height:1}
.use h3{font-family:var(--display);font-weight:640;font-size:1.12rem;letter-spacing:-.01em;margin:0}
.use p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin:5px 0 0}

/* code sample */
.codewrap{max-width:820px;margin:40px auto 0}
.code{background:var(--kiln);color:#e9e6df;border-radius:var(--r);padding:22px 24px;overflow-x:auto;box-shadow:var(--shadow)}
.code pre{margin:0;font-family:var(--mono);font-size:13.5px;line-height:1.7;white-space:pre}
.code .c{color:#8a8f9e}
.code .k2{color:var(--clay-soft)}
.code .s{color:#a7c1a0}
.code-note{text-align:center;font-size:13.5px;color:var(--ink-faint);margin:14px auto 0;font-family:var(--mono)}

/* safety strip */
.safe{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:820px){.safe{grid-template-columns:1fr}}
.safe .s-item h3{font-family:var(--display);font-weight:660;font-size:1.08rem;margin:0 0 6px}
.safe .s-item p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}
.safe .s-item .ic{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-deep);margin-bottom:8px}

/* roadmap */
.road{max-width:820px;margin:38px auto 0}
.phase{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--edge)}
.phase:first-child{border-top:none}
.phase .ph{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-deep);white-space:nowrap;padding-top:3px}
.phase h3{font-family:var(--display);font-weight:660;font-size:1.14rem;letter-spacing:-.01em;margin:0}
.phase p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:5px 0 0}

/* pricing hint */
.hint{max-width:760px;margin:40px auto 0}
.hint .callout{border-radius:var(--r);padding:22px 26px;font-size:15.5px;line-height:1.62;background:var(--wash-clay);border:1px solid var(--clay-soft)}
.hint .callout strong{color:var(--ink)}
.hint .callout a{color:var(--clay-deep);text-decoration:underline;text-decoration-color:var(--clay-soft);text-underline-offset:2px}

.faq{max-width:780px;margin:6px auto 0}
.faq .q{padding:22px 0;border-bottom:1px solid var(--edge)}
.faq .q:last-child{border-bottom:none}
.faq .q h3{font-family:var(--display);font-weight:640;font-size:1.12rem;margin:0 0 6px;letter-spacing:-.01em}
.faq .q p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.6}
.faq .q code{font-family:var(--mono);font-size:13px;color:var(--clay-deep);background:var(--wash-clay);padding:1px 6px;border-radius:5px}

.closer{text-align:center}
.closer h2{font-family:var(--display);font-weight:760;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.022em;line-height:1.02}
.closer p{font-size:1.12rem;color:var(--ink-soft);max-width:52ch;margin:16px auto 0;line-height:1.55}
.closer .btn{margin-top:26px;font-size:16px;padding:15px 28px;border-radius:999px}
@media(max-width:880px){section{padding:56px 0}.phero{padding:40px 0 4px}}

/* formerly inline (style="" attributes moved here so the page can run under a strict Content-Security-Policy) */
.phero .sub code{font-family:var(--mono);font-size:.92em;color:var(--clay-deep)}
.closer h2 .it{color:var(--clay)}