/* ═══════════════════════════════════════════════════════════════════
   FG · the language every product page is written in.

   Lifted verbatim out of /products/voice-api, which is where it was
   settled: the home page's tokens, token for token — flat dark field
   with two radial washes, ONE 1080px column, headings at 700, and one
   card (a hairline over a 2% white fill at radius 16) used for every
   step, every number and every closing card. §11: nothing here moves
   by itself.

   It lives in its own file because there are three product pages now,
   and the four legal pages already taught this codebase what happens
   when a stylesheet is pasted rather than linked — four copies that
   drifted. What is NOT here is anything a single page owns: the live
   orb and the SSE strip belong to the Voice API page and stay in it.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   FG · Voice API — the product page, set in the language of the home
   page (DESIGN-SYSTEM.md §11, taken from the personal-demo page
   /p/<slug>): flat dark field with two radial washes, ONE 1080px
   column, headings at 700, and one card — a hairline border over a 2%
   white fill at radius 16 — used for every step, every number, the
   spec list and the closing cards.

   This page used to be the last one still speaking the old language,
   and it showed: a 1760px rail against the home page's 1080 (600px
   wider at 1920), a 92px display headline at weight 500 against 54 at
   700, pill buttons against the 13px rectangle, 130px of air between
   sections against 74, and a WebGL particle field behind all of it.
   Two pages from two different sites. Everything below is the home
   page's, token for token.

   Deliberately gone with the language: the particle field (three.js,
   ~132KB, the video fallback, the data-field attributes the shader
   read), the scrim and vignette over it, the custom cursor, the
   scroll-reveal engine, the hero headline split into letters, the
   voice-wave equaliser under the hero and the animated bars beside
   every section heading. §11: nothing on this page moves by itself.

   What still moves, and why it stays: the orb in the hero card and the
   SSE strip in the code panel are the product being demonstrated, not
   decoration — one is the live conversation with fg-voice-1, the other
   is what "each delta is a finished sentence" looks like.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0A0B0F;
  --bg-2:#070810;
  --ink:#EAEEF7;
  /* §2.1 — the floor is .66/.56 on this background, and this page reads it
     rather than inventing its own greys. */
  --muted:rgba(234,238,247,.66);
  --faint:rgba(234,238,247,.56);
  --blue-1:#8BB4FF;
  --blue-2:#3A6BFF;
  --blue-deep:#2E4780;
  --blue-pale:#CEDFFE;
  --accent:#3A6BFF;
  --line:rgba(139,180,255,.14);
  --line-2:rgba(234,238,247,.10);
  --card:rgba(255,255,255,.02);
  --sans:"Instrument Sans","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-btn:cubic-bezier(.2,.8,.2,1);
  /* One column, one gap between blocks — the home page's, to the pixel. */
  --wrap:1080px;
  --pad:clamp(18px,3vw,32px);
  --block:clamp(56px,7vw,74px);
  /* What is beyond the top and bottom of the page when a phone is pulled past
     them (chrome.css §2.1a). Measured on this page: the first row of pixels is
     #10162A, the last #0E111B — the top is lit by the accent wash, the bottom
     darkened by the footer. One flat colour cannot be both; this is the middle
     of the two, and it is 3× closer to each of them than flat --bg was. */
  --edge:#0F1424;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:2px solid var(--blue-1);outline-offset:2px}
/* --edge, not --bg: html's colour is never seen ON the page (the body's wash
   covers every pixel of it), only in the gap a pull opens above and below. */
html{scroll-behavior:smooth;background:var(--edge)}
/* The two washes are the page's whole background, stated as a fraction of the
   document rather than in pixels — this page is five screens tall and a fixed
   620px wash on it is a smear at the top over flat black (§11.0). */
body{
  background:
    radial-gradient(1100px 30% at 78% -6%, rgba(58,107,255,.20), transparent 60%),
    radial-gradient(900px 32% at 0% 100%, rgba(46,71,128,.18), transparent 60%),
    var(--bg);
  color:var(--ink);
  font:400 16px/1.5 var(--sans);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:14px;top:14px;z-index:200;transform:translateY(-160%);
  padding:11px 18px;border-radius:999px;background:var(--bg);border:1px solid var(--line);
  font:500 14px/1 var(--sans);color:var(--ink);transition:transform .2s var(--ease)}
.skip:focus{transform:none}

/* ── The column ──
   1080px and --pad of air at the edges. The site rail (max 1760/1320) is what
   this page used to sit in; the footer is pulled onto this measure below so the
   page keeps one vertical line from the first eyebrow to the last legal link. */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);width:100%}
main{position:relative;z-index:2}
.block{margin-top:var(--block)}

/* ── Type (§3, sized as the home page sizes it) ── */
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
h1{font-weight:700}
h2{font-size:clamp(21px,2.5vw,28px);letter-spacing:-.02em;font-weight:700;margin-bottom:22px}
.grad{background:linear-gradient(120deg,var(--blue-pale),var(--blue-2) 60%,var(--blue-1));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* One head per block: eyebrow, heading, and the sentence that says what the
   block is for. The heading and that sentence used to sit side by side in a
   space-between row 1616px wide; here they stack in the column, and the
   sentence is set at the home page's answer size. */
.head{margin-bottom:22px}
.head h2{margin-bottom:0}
.lead-sm{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:76ch}

/* ── Buttons (§5.1) ──
   The site's shared .btn is a 999px pill (chrome.css §5); the home page's is a
   13px rounded rectangle with a lit primary. Overridden here, for this document
   only, exactly as the home page overrides it. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:auto;padding:13px 20px;border-radius:13px;border:1px solid transparent;
  font:600 15px/1.2 var(--sans);letter-spacing:-.004em;white-space:nowrap;cursor:pointer;
  transition:transform .12s var(--ease-btn),box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn-lg{height:auto;font-size:16.5px;padding:16px 30px;border-radius:15px}
.btn-sm{height:auto;padding:10px 15px;font-size:14px;border-radius:11px}
.btn-primary{background:linear-gradient(180deg,#4B79FF,var(--accent));color:#fff;border-color:transparent;
  box-shadow:0 10px 34px -12px rgba(58,107,255,.8)}
.btn-primary:hover{box-shadow:0 16px 44px -12px rgba(58,107,255,.9)}
.btn-primary::after{display:none}   /* the pill's sheen has no place on this shape */
.btn-ghost,.btn-line{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover,.btn-line:hover{background:rgba(255,255,255,.05);border-color:rgba(58,107,255,.45)}
.btn:hover{transform:none}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}
.btn:hover svg.arw{transform:translateX(3px)}

/* ═══ HERO ═══ */
/* svh, not vh: with the URL bar out on a phone, 100vh is taller than the screen
   and the line under the buttons falls below the fold. */
.hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,4vw,48px);
  align-items:center;min-height:min(86svh,660px);padding:clamp(118px,13vw,150px) 0 clamp(24px,3vw,40px)}
.hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.05;letter-spacing:-.028em;max-width:16ch;
  overflow-wrap:break-word}
.hero .sub{margin-top:18px;font-size:clamp(15px,1.7vw,19px);line-height:1.55;color:var(--muted);max-width:42ch}
.hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hint{margin-top:16px;font-size:13px;line-height:1.55;color:var(--faint);max-width:46ch;
  display:flex;align-items:flex-start;gap:9px}
.hint::before{content:"";width:7px;height:7px;margin-top:.42em;border-radius:999px;flex:none;
  background:#7fd99b;box-shadow:0 0 10px rgba(127,217,155,.8)}

/* ── The right-hand slot: the live demo ──
   The home page fills it with a flat conversation card; here it is the same
   card at the same radius, holding the one thing this page can show that a
   sentence cannot — fg-voice-1 answering out loud. What went with the old
   language: the blur, the 120px shadow and the entrance animation. */

/* The sphere is the demo, so it takes the press as well as the button under
   it — one control for one thing. */








/* Before a conversation starts there is no caption, and the slot held 44px of
   nothing between the status line and the button (§13.8's :empty rule). */



/* ── Block 01 · the loop ──
   Three endpoints as the home page's three steps: same card, same 30×30 number
   plaque, same three-column grid. The endpoint each step names sits under its
   title in mono, where the home page's step has nothing. */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:20px}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;background:rgba(58,107,255,.15);color:var(--accent);font-weight:700;font-size:14px;
  margin-bottom:13px}
.s-t{font-weight:600;font-size:15.5px;margin-bottom:6px}

.s-d{font-size:13.5px;line-height:1.55;color:var(--muted)}
.s-d code{font:400 .92em/1 var(--mono);color:var(--blue-pale)}

/* ── The code, in the column rather than beside it ──
   The samples used to share the row with the steps, which left them 547px at
   1080 and 350px on a phone with `white-space:pre`. Full measure now, under the
   steps, wrapped the way §13.8 requires — the panel is the home page's install
   panel with a tab row above it. */






/* A code sample that runs past the panel used to be cut off with nothing to say
   so: `white-space:pre` plus a scroll container nobody can see means the SDK
   sample lost its right-hand third and the curl sample lost its URL on a phone.
   It wraps instead — §13.8's rule, pre-wrap + overflow-wrap, not word-break.
   The sample's own leading spaces are still preserved, so an indented line stays
   indented and only the overlong ones fold. */


/* .mini-term carries the same spans, so it is named alongside the big panel or
   its comment and its string render in body colour. */




@keyframes blink{50%{opacity:0}}
/* Copy, on both panels — the home page's install-panel button, moved to the
   corner because these panels have no header row to hold it. The source is the
   <pre> (or .code-body) inside the same panel, so the panel's top padding is cut
   to clear the button rather than the first line of code. */



/* What a sentence-at-a-time stream looks like, in the card the rest of the page
   is made of. */





@keyframes tokIn{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}

/* ── Block 02 · numbers ──
   The home page's evidence strip, unchanged: same card, same 700 number, same
   accent unit, same footnote under it. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stat{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:20px}
.stat b{display:block;font-size:clamp(26px,3vw,34px);line-height:1;font-weight:700;letter-spacing:-.03em}
.stat b i{font-style:normal;font-size:.42em;letter-spacing:-.01em;color:var(--accent);
  margin-left:4px;vertical-align:.42em}
.stat span{display:block;margin-top:12px;font-size:14px;font-weight:600}
.stat em{display:block;margin-top:6px;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--muted)}
.note{margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--faint);max-width:82ch}

/* ── The specification, as one card of rows ──
   Two columns of definitions inside a single card, so ten facts read as one
   block instead of ten panels. Below 820 they become one column, like every
   other grid on the page. */
.spec-grid{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 36px;
  border:1px solid var(--line);background:var(--card);border-radius:16px;padding:2px 20px}
.spec{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:17px 0;
  border-top:1px solid var(--line-2)}
.spec:nth-child(1),.spec:nth-child(2){border-top:none}
.spec dt{font:600 14.5px/1.45 var(--sans)}
.spec dd{color:var(--muted);font-size:14px;line-height:1.55}
.spec dd code{font:400 12.5px/1.5 var(--mono);color:var(--blue-pale);overflow-wrap:anywhere}

/* ── Block 03 · start ── */
.start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cta-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);
  border-radius:16px;padding:24px 22px}
/* The highlighted card is the tariff card's highlight (§6.2), not a second
   gradient: accent border, 7% accent fill. */
.cta-card.hot{border-color:rgba(58,107,255,.45);background:rgba(58,107,255,.07)}
.cta-card h3{font:700 18px/1.3 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.cta-card ul{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:11px}
.cta-card li{display:flex;gap:11px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cta-card li::before{content:"";width:14px;height:1px;background:var(--accent);margin-top:10px;flex:none}
.cta-card li>span{min-width:0}
.cta-card li b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}

.cta-foot{margin-top:auto;padding-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-fine{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--faint)}

/* ── The site footer, on this page's field ── */
/* The measure is not set here any more: it is the site's, in chrome.css, so
   that /docs, /chat and the 404 begin their footer on the same vertical as
   this one. What stays is this page's background, which the shared footer
   paints for the pages that still have a particle field behind them. */
footer.content{margin-top:var(--block);padding:44px 0 96px;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ── Breakpoints ──
   One fold, at 820px, exactly where the home page folds: the hero becomes a
   single column with the card under the promise, and every grid becomes one
   column. The page used to fold in four places — 960, 900, 820, 760, 560, 480 —
   which is why no two blocks changed shape at the same width. */
@media(max-width:980px){
  .steps{gap:12px}
  .stats{gap:12px}
}
@media(max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);gap:30px;min-height:0;padding-top:clamp(104px,22vw,124px)}
  .hero h1{max-width:none}
  .hero .sub{max-width:56ch}
  .steps,.stats,.start{grid-template-columns:minmax(0,1fr)}
  .spec-grid{grid-template-columns:minmax(0,1fr)}
  .spec:nth-child(2){border-top:1px solid var(--line-2)}
}
@media(max-width:480px){
  .spec{grid-template-columns:minmax(0,1fr);gap:6px;padding:15px 0}
}
@media(max-width:420px){
  .hero-cta .btn{width:100%}
  .step,.stat,.cta-card,.portal{padding:16px}
  .spec-grid{padding:2px 16px}
  .term,.mini-term{padding:40px 16px 16px}
  .sse{padding:14px 16px}
  .cta-foot .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  html{scroll-behavior:auto}
}