@layer reset, tokens, base, layout, components, sections, utilities;
    @layer reset {
      *, *::before, *::after { box-sizing: border-box; }
      html { scroll-behavior: smooth; text-size-adjust: 100%; }
      body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
      ul[role="list"], ol[role="list"] { list-style: none; }
      img, picture, svg, video, canvas { display: block; max-width: 100%; }
      input, button, textarea, select { font: inherit; }
      button { cursor: pointer; }
      a { color: inherit; text-decoration: none; }
    }
    @layer tokens {
      :root {
        --color-bg: #f3f0e6; --color-bg-2: #f7f4ea; --color-paper: #fffdf8; --color-paper-2: #f8f4ea;
        --color-ink: #0c0d0d; --color-black: #0b0c0c; --color-muted: #5c5a54; --color-muted-2: #8a8579;
        --color-line: #d8d0c0; --color-line-dark: #1d1d1b; --color-soft: #ebe4d5; --color-soft-2: #e4dccb;
        --color-green: #0c7a4d; --color-green-soft: #dff0e8; --color-blue: #2d5f9f; --color-violet: #5c55a7;
        --color-amber: #916500; --color-amber-soft: #fbf2cf; --color-red: #a2333f;
        --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        --max-width: 1680px; --radius-sm: 14px; --radius-md: 22px; --radius-lg: 34px; --radius-pill: 999px;
        --space-3: 1rem; --space-5: 1.5rem;
        --shadow-soft: 0 14px 36px rgba(33,27,16,.075); --shadow-card: 0 24px 64px rgba(33,27,16,.10); --shadow-strong: 0 36px 110px rgba(33,27,16,.18);
      }
    }
    @layer base {
      html { background: var(--color-bg); }
      body {
        min-height: 100vh; color: var(--color-ink); font-family: var(--font-sans); line-height: 1.5;
        overflow-wrap: break-word;
        -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        background:
          radial-gradient(1200px 700px at 12% -8%, rgba(12,122,77,.14), transparent 58%),
          radial-gradient(900px 600px at 92% 2%, rgba(45,95,159,.12), transparent 58%),
          radial-gradient(760px 520px at 56% 30%, rgba(92,85,167,.055), transparent 68%),
          linear-gradient(180deg, #f7f4ea 0%, #f1ecdf 52%, #f4f1e8 100%);
      }
      body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.36;
        background-image: linear-gradient(rgba(12,13,13,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(12,13,13,.035) 1px, transparent 1px);
        background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 72%); }
      ::selection { background: var(--color-ink); color: var(--color-paper); }
      :focus-visible { outline: 3px solid rgba(12,122,77,.32); outline-offset: 3px; }
      h1, h2, h3 { line-height:.98; letter-spacing:-.065em; font-weight:560; }
      h1 { max-width: 1060px; font-size: clamp(46px, 9vw, 124px); }
      h2 { max-width: 1000px; font-size: clamp(34px, 5vw, 76px); }
      h3 { font-size: 26px; letter-spacing: -.045em; }
      p { color: var(--color-muted); }
      table { width:100%; min-width:920px; border-collapse: collapse; }
      th, td { padding:18px 20px; border-bottom:1px solid rgba(29,29,27,.10); vertical-align:top; text-align:left; font-size:15px; }
      th { color:#756e62; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700; background: linear-gradient(180deg, #eee8da, #e7dfcf); }
      tr:last-child td { border-bottom:0; }
      tr:hover td { background: rgba(255,255,255,.34); }
      td { color: var(--color-muted); }
      td:first-child { color: var(--color-ink); font-weight:700; }
      pre { margin:0; padding:24px; overflow-x:auto; color:#eeeeea; font:13px/1.68 var(--font-mono); }
      label { display:grid; gap:7px; color:var(--color-muted); font-size:13px; font-weight:650; }
      input, select, textarea { width:100%; border:1px solid rgba(29,29,27,.14); border-radius:var(--radius-sm); background:rgba(255,255,255,.68); color:var(--color-ink); padding:12px 13px; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
      input:focus, select:focus, textarea:focus { border-color:rgba(12,122,77,.42); background:var(--color-paper); box-shadow:0 0 0 4px rgba(12,122,77,.10); outline:none; }
      textarea { min-height:120px; resize:vertical; }
    }
    @layer layout {
      .container { width: min(var(--max-width), 90%); margin-inline:auto; }
      .section { padding:96px 0; border-bottom:1px solid rgba(29,29,27,.10); }
      .section--soft { background: radial-gradient(900px 420px at 0% 0%, rgba(12,122,77,.055), transparent 62%), radial-gradient(760px 360px at 100% 0%, rgba(45,95,159,.045), transparent 64%), rgba(255,255,255,.16); }
      /* Stacked section header: kicker → heading → lead paragraph beneath, left-aligned. The old two-column
         (heading left / text floating top-right) read as misaligned because the description lined up with the
         small kicker, not the big h2. Stacking is tidier and consistent across every block. */
      .section-head { max-width:780px; margin-bottom:44px; }
      .section-head > div { display:flex; flex-direction:column; gap:12px; }
      .section-head h2 { font-size:clamp(28px,3.2vw,44px); line-height:1.12; margin:0; }
      .section-head p { max-width:640px; margin:16px 0 0; color:#5b574f; font-size:17px; line-height:1.6; letter-spacing:-.01em; }
      /* full-width refinements: denser use-case grid + code editor kept to a sane width (left-aligned) */
      #use-cases .grid { grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); }
      #quickstart-demo .quickstart-card { max-width:1280px; }
      .grid { display:grid; gap:18px; }
      .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
      .split { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    }
    @layer components {
      .nav { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(29,29,27,.12); background:rgba(247,244,234,.78); box-shadow:0 10px 34px rgba(0,0,0,.035); backdrop-filter:blur(18px); }
      .nav__inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
      .brand { display:inline-flex; align-items:center; gap:12px; white-space:nowrap; font-size:17px; font-weight:700; letter-spacing:-.02em; }
      .beta-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--color-green); background:rgba(12,122,77,.11); border:1px solid rgba(12,122,77,.22); white-space:nowrap; }
      .hero__beta { margin-top:18px; font-size:13px; color:var(--color-muted-2); }
      .hero__beta strong { color:var(--color-green); }
      .hero__proof { margin-top:26px; padding-top:20px; border-top:1px solid rgba(29,29,27,.12); max-width:680px; font-size:14.5px; line-height:1.55; color:var(--color-muted); }
      .hero__proof b { color:var(--color-ink); font-weight:700; }
      .hero__proof a { color:var(--color-green); text-decoration:none; font-weight:650; border-bottom:1px solid rgba(12,122,77,.32); }
      .hero__proof a:hover { border-bottom-color:var(--color-green); }
      .hero__chips { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; max-width:680px; }
      .hero__chips li { display:inline-flex; align-items:baseline; gap:6px; padding:6px 12px; border:1px solid var(--color-line); border-radius:999px; background:var(--color-soft); font-size:12.5px; color:var(--color-muted); }
      .hero__chips b { color:var(--color-green); font-weight:800; font-variant-numeric:tabular-nums; }
      .prob-card { padding:clamp(24px,3vw,40px); }
      .prob-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start; }
      .prob-col__tag { display:inline-block; margin-bottom:13px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--color-muted-2); }
      .prob-col__tag--green { color:var(--color-green); }
      .prob-col p { font-size:16px; line-height:1.65; color:var(--color-muted); }
      .prob-col p + p { margin-top:13px; }
      .prose__punch { font-size:clamp(19px,1.8vw,23px); font-weight:700; color:var(--color-ink); letter-spacing:-.02em; margin:0 0 13px; }
      .prob-proof { color:var(--color-ink); border-top:1px dashed rgba(29,29,27,.16); padding-top:18px; margin-top:26px; font-size:15.5px; line-height:1.62; }
      .about-card { padding:clamp(24px,3vw,42px); }
      .about-card p { margin:0 0 13px; font-size:16px; line-height:1.64; color:var(--color-muted); max-width:860px; }
      .about-card p:last-child { margin-bottom:0; }
      .about-card .prose__punch { color:var(--color-ink); }
      .about-card .prose__proof { color:var(--color-ink); font-size:15px; }
      .about-card .prose__proof:first-of-type { border-top:1px dashed rgba(29,29,27,.16); padding-top:18px; margin-top:20px; }
      .cap-details { position:relative; border:1px solid rgba(29,29,27,.13); border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.30)); box-shadow:var(--shadow-card); }
      .cap-details::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--color-green), rgba(45,95,159,.65)); opacity:.9; }
      .cap-summary { cursor:pointer; padding:18px 22px 18px 26px; font-weight:750; font-size:15.5px; letter-spacing:-.01em; color:var(--color-ink); list-style:none; display:flex; align-items:center; gap:13px; }
      .cap-summary::-webkit-details-marker { display:none; }
      .cap-summary::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--color-green); box-shadow:0 0 0 4px rgba(12,122,77,.13); flex:none; }
      .cap-summary::after { content:"+"; margin-left:auto; width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(29,29,27,.16); border-radius:50%; color:var(--color-muted); font-size:18px; font-weight:400; line-height:1; transition:transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease; }
      .cap-details[open] .cap-summary::after { transform:rotate(135deg); background:var(--color-green); color:var(--color-paper); border-color:transparent; }
      .cap-details .table-box { border:0; border-top:1px solid rgba(29,29,27,.1); border-radius:0; box-shadow:none; background:transparent; }
      .cap-details table { min-width:0; }
      .cap-details thead th { background:transparent; color:var(--color-muted-2); border-bottom:1px solid rgba(29,29,27,.14); padding:14px 22px; }
      .cap-details thead th:last-child { text-align:right; }
      .cap-details tbody td { padding:15px 22px; border-bottom:1px solid rgba(29,29,27,.065); font-size:14.5px; line-height:1.5; transition:background .14s ease; }
      .cap-details tbody tr:hover td { background:rgba(12,122,77,.045); }
      .cap-details tbody td:first-child { color:var(--color-ink); font-weight:700; }
      .cap-details tbody td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; color:var(--color-ink); letter-spacing:-.01em; }
      .cap-details .table-box { border-radius:0; }
      .cap-details tr.cap-group td { background:transparent; border-bottom:0; padding:24px 22px 9px; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--color-green); display:flex; align-items:center; gap:11px; }
      .cap-details tr.cap-group td::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(12,122,77,.32), rgba(29,29,27,.05)); }
      .cap-details tr.cap-group:hover td { background:transparent; }
      .cap-details .cap-note { padding:13px 22px 20px; margin:0; color:var(--color-muted-2); font-size:13px; }
      @media (max-width:820px){ .prob-grid { grid-template-columns:1fr; gap:26px; } }
      .brand__mark { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--color-paper); background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.28), transparent 34%), linear-gradient(135deg, #101111, #2c2c28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.14); font-size:12px; font-weight:800; letter-spacing:-.03em; }
      .nav__links { display:flex; align-items:center; gap:8px; color:var(--color-muted); font-size:14px; white-space:nowrap; }
      .nav__links a:not(.button) { padding:9px 11px; border-radius:var(--radius-pill); white-space:nowrap; transition:background .16s ease, color .16s ease; }
      .nav__links a:not(.button):hover { background:rgba(255,255,255,.58); color:var(--color-ink); }
      .button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; border:1.2px solid var(--color-ink); border-radius:var(--radius-pill); background:transparent; color:var(--color-ink); white-space:nowrap; font-size:14px; font-weight:650; transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
      .button:hover { transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,.09); }
      .button--primary { color:var(--color-paper); background: radial-gradient(circle at 22% 0%, rgba(255,255,255,.18), transparent 42%), linear-gradient(135deg, #0c0d0d, #262620); box-shadow:0 16px 36px rgba(0,0,0,.18); }
      .button--secondary { background:rgba(255,255,255,.38); }
      .button--full { width:100%; }
      .eyebrow, .section-kicker { display:inline-flex; align-items:center; gap:9px; color:#716b5f; text-transform:uppercase; letter-spacing:.09em; font-size:12px; font-weight:700; }
      .eyebrow { margin-bottom:26px; text-transform:none; letter-spacing:0; font-size:15px; }
      .eyebrow::before, .launch-pill::before { content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--color-green); }
      .surface, .card, .panel, .table-box, .quickstart-card, .calc-card, .form-card { border:1px solid rgba(29,29,27,.14); border-radius:var(--radius-md); background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.52)), var(--color-paper); box-shadow:var(--shadow-soft); }
      .card--dark { color:var(--color-paper); border-color:rgba(255,255,255,.13); background: radial-gradient(700px 360px at 16% -12%, rgba(12,122,77,.26), transparent 56%), radial-gradient(600px 340px at 96% 0%, rgba(45,95,159,.22), transparent 58%), linear-gradient(145deg, #0b0c0c, #171713 72%, #222116); box-shadow:var(--shadow-strong); }
      .card { position:relative; min-height:0; padding:24px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
      .card:hover { transform:translateY(-4px); border-color:rgba(29,29,27,.24); box-shadow:var(--shadow-card); }
      .card--compact { min-height:0; }
      /* use-case cards: equal heights per row (stretch) with a comfortable minimum, h3+p evenly spaced */
      #use-cases .grid { align-items:stretch; }
      #use-cases .card { min-height:152px; display:flex; flex-direction:column; gap:9px; }
      #use-cases .card h3 { margin:0; }
      #use-cases .card p { margin:0; }
      .pr-group { margin-top:26px; margin-bottom:2px; font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--color-muted-2); }
      .card--dark p, .card--dark li { color:#cfcfc7; }
      .card__number { margin-bottom:42px; color:#9a9386; font-size:15px; }
      .card p, .card li { margin-top:16px; color:var(--color-muted); line-height:1.6; }
      .card ul { padding-left:18px; }
      .status { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border:1px solid rgba(12,122,77,.18); border-radius:var(--radius-pill); background:rgba(12,122,77,.11); color:var(--color-green); box-shadow: inset 0 1px 0 rgba(255,255,255,.48); font-size:12px; font-weight:700; white-space:nowrap; }
      .status--amber { background:var(--color-amber-soft); border-color:rgba(145,101,0,.22); color:var(--color-amber); }
      .status--muted { background:var(--color-soft); border-color:rgba(29,29,27,.14); color:var(--color-muted); }
      .panel { overflow:hidden; border-color:rgba(29,29,27,.20); box-shadow:var(--shadow-card); }
      .panel__head { padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(29,29,27,.10); }
      .small-label { color:var(--color-muted-2); text-transform:uppercase; letter-spacing:.09em; font-size:12px; font-weight:700; }
      .ranking { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:22px; }
      .rank-row { display:grid; grid-template-columns:198px 1fr 70px; gap:14px; align-items:center; color:var(--color-muted); font-size:14px; }
      .rank-row strong { color:var(--color-ink); font-weight:760; }
      .rank-row__name { display:flex; flex-direction:column; gap:2px; min-width:0; }
      .rank-row__score { text-align:right; color:var(--color-ink); font-weight:760; }
      .rank-row__prog { color:var(--color-muted-2); font-weight:600; font-size:11.5px; white-space:nowrap; }
      .rank-row__pending { text-align:right; color:var(--color-muted-2); font-size:12px; }
      .rank-group { grid-column:1/-1; margin-top:6px; color:var(--color-muted-2); text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:700; }
      .ranking > .rank-group:first-child { margin-top:0; }
      .rank-foot { grid-column:1/-1; margin-top:4px; padding-top:12px; border-top:1px solid rgba(29,29,27,.10); color:var(--color-muted-2); font-size:12px; line-height:1.5; }
      .dom-wrap { grid-column:1/-1; min-width:0; overflow-x:auto; }
      .dom-table { width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:13.5px; }
      .dom-table th, .dom-table td { padding:7px 8px; text-align:right; border-bottom:1px solid rgba(29,29,27,.08); white-space:nowrap; }
      .dom-table th:first-child, .dom-table td:first-child { text-align:left; width:37%; }
      .dom-table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-muted-2); font-weight:700; border-bottom:1px solid rgba(29,29,27,.16); }
      .dom-table tbody td { color:var(--color-muted); font-variant-numeric:tabular-nums; }
      .dom-table tbody td:first-child { color:var(--color-ink); }
      .dom-table .dom-pro { color:var(--color-green); font-weight:800; }
      .dom-table .dom-avg td { border-top:1px solid rgba(29,29,27,.16); border-bottom:0; color:var(--color-ink); font-weight:760; }
      .dom-table .dom-avg td:first-child { color:var(--color-muted-2); text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
      .track { height:12px; overflow:hidden; border-radius:var(--radius-pill); background:var(--color-soft); }
      .bar { height:100%; border-radius:inherit; background:var(--color-muted-2); }
      .bar--pro { background:var(--color-ink); } .bar--green { background:var(--color-green); } .bar--blue { background:var(--color-blue); }
      .bm-controls { display:inline-flex; align-items:center; gap:10px; }
      .bm-select { appearance:none; -webkit-appearance:none; cursor:pointer; border:1px solid rgba(29,29,27,.2); border-radius:8px; padding:6px 28px 6px 11px; font-size:13px; font-weight:650; color:var(--color-ink); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b574f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
      .bm-progress { height:7px; border-radius:999px; background:rgba(29,29,27,.1); overflow:hidden; margin:6px 0 2px; }
      .bm-progress > i { display:block; height:100%; background:var(--color-green); border-radius:999px; }
      .bm-note { font-size:12.5px; color:var(--color-muted-2); margin-top:6px; }
      .bm-src { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-muted-2); }
      .model-card { min-height:100%; padding:28px; display:flex; flex-direction:column; justify-content:space-between; border-radius:var(--radius-md); color:var(--color-paper); background: radial-gradient(700px 360px at 16% -12%, rgba(12,122,77,.26), transparent 56%), radial-gradient(600px 340px at 96% 0%, rgba(45,95,159,.22), transparent 58%), linear-gradient(145deg, #0b0c0c, #171713 72%, #222116); box-shadow:var(--shadow-strong); }
      .model-card p { margin-top:16px; color:#cfcfc7; font-size:17px; }
      .model-card__title { margin-top:16px; font-size:clamp(58px,7vw,96px); line-height:.92; letter-spacing:-.065em; font-weight:560; }
      .mode-list { display:grid; gap:14px; margin-top:34px; }
      .mode-item { display:grid; grid-template-columns:1fr auto; gap:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); }
      .mode-item span { color:#cfcfc7; font-size:14px; } .mode-item strong { color:var(--color-paper); font-weight:650; }
      .mode-price { color:var(--color-paper); font-size:14px; white-space:nowrap; }
      .launch-strip { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:28px; }
      .launch-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(29,29,27,.12); border-radius:var(--radius-pill); background:rgba(255,255,255,.56); color:var(--color-muted); box-shadow:0 8px 22px rgba(0,0,0,.035); font-size:13px; font-weight:600; }
      .metrics { display:grid; grid-template-columns: repeat(4,1fr); overflow:hidden; border:1px solid rgba(29,29,27,.20); border-radius:var(--radius-md); background:var(--color-paper); box-shadow:var(--shadow-card); }
      .metric { min-height:176px; padding:26px; border-right:1px solid rgba(29,29,27,.10); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.32)); }
      .metric:last-child { border-right:0; }
      .metric strong { display:block; margin-bottom:12px; font-size:clamp(38px,5vw,66px); line-height:.95; letter-spacing:-.06em; font-weight:560; background:linear-gradient(135deg, #0b0c0c, #4d493e); -webkit-background-clip:text; background-clip:text; color:transparent; }
      .metric span { color:var(--color-muted); font-size:15px; }
      .table-box { overflow:hidden; }
      .yes { color:var(--color-green); font-weight:800; } .price-em { color:var(--color-ink); font-weight:800; }
      .roadmap-tag { color:var(--color-amber); font-weight:800; }
      .chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
      .chip { display:inline-flex; align-items:center; border-radius:var(--radius-pill); padding:6px 9px; background:var(--color-soft); color:var(--color-muted); font-size:12px; font-weight:700; }
      .chip--win { color:var(--color-green); background:var(--color-green-soft); }
      .case-card { display:flex; flex-direction:column; justify-content:space-between; min-height:360px; }
      .case-list { display:grid; gap:8px; padding:0; margin:20px 0 0; list-style:none; color:var(--color-muted); font-size:14px; }
      .case-list li { padding-top:8px; border-top:1px solid rgba(29,29,27,.10); }
      .case-action { margin-top:24px; }
      .pricing-card, .price-card { min-height:300px; }
      .pricing-card strong, .price-card strong { display:block; margin:20px 0 2px; font-size:44px; line-height:.95; letter-spacing:-.06em; font-weight:560; }
      .unit { color:var(--color-muted-2); font-size:13px; }
      .price-card { min-height:365px; } .price-card strong { font-size:36px; }
      .tiers-toggle { display:inline-flex; gap:4px; padding:4px; border:1px solid rgba(29,29,27,.10); border-radius:var(--radius-pill); background:rgba(29,29,27,.05); margin-bottom:24px; }
      .tier-tg { border:0; background:transparent; color:var(--color-muted); font:inherit; font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:var(--radius-pill); cursor:pointer; }
      .tier-tg.is-active { background:var(--color-paper); color:var(--color-ink); box-shadow:0 8px 18px rgba(0,0,0,.08); }
      .tiers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
      @media (max-width:980px){ .tiers-grid { grid-template-columns:repeat(2,1fr); } }
      @media (max-width:560px){ .tiers-grid { grid-template-columns:1fr; } }
      .tier { position:relative; display:flex; flex-direction:column; border:1px solid rgba(29,29,27,.14); border-radius:var(--radius-md); background:var(--color-paper); padding:24px 22px; box-shadow:var(--shadow-card); }
      .tier--featured { border-color:var(--color-green); box-shadow:0 24px 64px rgba(12,122,77,.16); }
      .tier-tag { position:absolute; top:-11px; left:22px; background:var(--color-green); color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:var(--radius-pill); padding:3px 10px; }
      .tier-name { font-size:15px; font-weight:800; letter-spacing:.02em; }
      .tier-priceRow { display:flex; align-items:baseline; gap:1px; margin-top:12px; }
      .tier-cur { font-size:22px; font-weight:700; } .tier-price { font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; } .tier-price--txt { font-size:26px; letter-spacing:-.02em; }
      .tier-per { font-size:14px; color:var(--color-muted); margin-left:3px; }
      .tier-bill { font-size:12px; color:var(--color-muted-2); margin-top:5px; min-height:16px; }
      .tier-for { font-size:13px; color:var(--color-muted); margin-top:12px; font-weight:600; }
      .tier-feats { list-style:none; padding:0; margin:14px 0 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
      .tier-feats li { font-size:13.5px; color:var(--color-ink); padding-left:22px; position:relative; }
      .tier-feats li::before { content:"✓"; position:absolute; left:0; color:var(--color-green); font-weight:800; }
      .tier .button { width:100%; }
      .tier-note { font-size:13px; color:var(--color-muted); margin:0 0 26px; }
      .quickstart-card, .calc-card, .form-card { overflow:hidden; box-shadow:var(--shadow-strong); }
      .quickstart-head, .calc-head, .form-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; padding:24px 26px; border-bottom:1px solid rgba(29,29,27,.10); background: radial-gradient(580px 280px at 0% 0%, rgba(12,122,77,.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.32)); }
      .quickstart-head p, .calc-head p, .form-head p { max-width:760px; margin-top:10px; font-size:17px; }
      .quickstart-body, .calc-body, .form-body { display:grid; gap:18px; padding:26px; background:rgba(255,255,255,.24); }
      .quickstart-steps { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
      .quickstep { padding:16px; border:1px solid rgba(29,29,27,.10); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.34)), #f1eee4; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
      .quickstep strong { display:block; margin-bottom:8px; } .quickstep span { color:var(--color-muted); font-size:14px; }
      .tabs { display:flex; flex-wrap:wrap; gap:8px; }
      .tabs--code { width:max-content; max-width:100%; padding:4px; border:1px solid rgba(29,29,27,.08); border-radius:var(--radius-pill); background:rgba(29,29,27,.055); }
      .tab-button, .model-toggle { border:1px solid var(--color-line-dark); border-radius:var(--radius-pill); background:transparent; color:var(--color-ink); padding:9px 12px; font-size:13px; font-weight:750; cursor:pointer; }
      .tabs--code .tab-button { border:0; color:var(--color-muted); }
      .tab-button.is-active, .model-toggle.is-active { background:var(--color-ink); color:var(--color-paper); }
      .tabs--code .tab-button.is-active { background:var(--color-paper); color:var(--color-ink); box-shadow:0 8px 18px rgba(0,0,0,.08); }
      .code-panel { display:none; } .code-panel.is-active { display:block; }
      .code-area { width:100%; min-height:420px; resize:vertical; white-space:pre; overflow:auto; tab-size:2; border:1px solid rgba(255,255,255,.10); border-radius:20px; background: radial-gradient(700px 420px at 0% 0%, rgba(45,95,159,.18), transparent 60%), linear-gradient(180deg, #0b0c0c, #151513); color:#efefe7; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-card); font:12.5px/1.55 var(--font-mono); }
      .copy-status { color:var(--color-muted); font-size:13px; }
      .actions { display:flex; flex-wrap:wrap; gap:12px; }
      .calc-grid, .calc-result { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
      .calc-box { padding:16px; border:1px solid rgba(29,29,27,.10); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.34)), #f1eee4; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
      .calc-box strong { display:block; font-size:28px; letter-spacing:-.04em; color:var(--color-ink); }
      .endpoint-list { display:grid; gap:12px; margin-top:28px; }
      .endpoint { display:flex; justify-content:space-between; gap:18px; padding-top:12px; border-top:1px solid rgba(29,29,27,.10); color:var(--color-muted); font-size:14px; }
      .endpoint strong { color:var(--color-ink); }
      .terminal { overflow:hidden; border-radius:var(--radius-md); background:var(--color-black); color:var(--color-paper); }
      .terminal-top { height:46px; display:flex; align-items:center; gap:8px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.14); }
      .dot { width:10px; height:10px; border-radius:50%; background:#6e6e68; }
      .code-key { color:#a8d7ff; } .code-val { color:#d8ccff; } .code-ok { color:#9cf2c6; } .code-muted { color:#898982; }
      .inside-grid { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid rgba(29,29,27,.20); border-radius:var(--radius-md); background:var(--color-paper); }
      .inside-block { min-height:210px; padding:28px; border-right:1px solid rgba(29,29,27,.10); border-bottom:1px solid rgba(29,29,27,.10); }
      .inside-block:nth-child(2n) { border-right:0; }
      .inside-block:nth-last-child(-n + 2) { border-bottom:0; }
      .inside-block p { margin-top:16px; font-size:17px; }
      .note { margin-top:18px; padding:14px 16px; border:1px solid rgba(145,101,0,.22); border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10)), var(--color-amber-soft); color:#6e5100; font-size:13px; }
      /* price calculator */
      .calc { display:grid; gap:20px; }
      .calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
      .calc label { display:grid; gap:8px; font-size:13px; font-weight:650; color:var(--color-muted); }
      .calc select, .calc input { width:100%; padding:13px 14px; border:1px solid rgba(29,29,27,.16); border-radius:14px; background:var(--color-paper); color:var(--color-ink); font:inherit; }
      .calc select:focus, .calc input:focus { outline:none; border-color:rgba(12,122,77,.42); box-shadow:0 0 0 4px rgba(12,122,77,.10); }
      .calc-out { display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid rgba(29,29,27,.12); padding-top:18px; }
      .calc-out__item { display:grid; gap:5px; }
      .calc-out strong { font-size:26px; letter-spacing:-.02em; }
      .calc-total { color:var(--color-green); }
      /* FAQ accordion */
      .faq { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
      @media (max-width:760px){ .faq { grid-template-columns:1fr; } }
      .faq-item { border:1px solid rgba(29,29,27,.14); border-radius:16px; background:var(--color-paper); padding:2px 18px; box-shadow:var(--shadow-soft); }
      .faq-item summary { cursor:pointer; padding:16px 0; font-weight:650; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; }
      .faq-item summary::-webkit-details-marker { display:none; }
      .faq-item summary::after { content:"+"; color:var(--color-muted-2); font-weight:700; }
      .faq-item[open] summary::after { content:"−"; }
      .faq-item p { color:var(--color-muted); margin:0; padding:0 0 16px; line-height:1.62; }
      .faq-item p a { color:var(--color-green); text-decoration:none; border-bottom:1px solid rgba(12,122,77,.32); }
      .faq-item p a:hover { border-bottom-color:var(--color-green); }
      @media (max-width:560px){ .calc-grid, .calc-out { grid-template-columns:1fr; } }
      /* product preview mockup */
      .preview-card { max-width:720px; margin:0 auto; border:1px solid rgba(29,29,27,.16); border-radius:18px; overflow:hidden; background:var(--color-paper); box-shadow:var(--shadow-card); }
      .preview-top { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid rgba(29,29,27,.10); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.3)); }
      .preview-dots { display:inline-flex; gap:6px; } .preview-dots i { width:10px; height:10px; border-radius:50%; background:rgba(29,29,27,.18); }
      .preview-app { font-size:13px; font-weight:650; color:var(--color-muted); letter-spacing:-.01em; }
      .preview-tag { margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--color-green); background:rgba(12,122,77,.11); border:1px solid rgba(12,122,77,.22); border-radius:999px; padding:3px 9px; }
      .preview-body { padding:20px 18px; display:grid; gap:12px; }
      .pv-msg { max-width:88%; padding:13px 15px; border-radius:16px; font-size:14.5px; line-height:1.6; }
      .pv-user { justify-self:end; background:#101111; color:#f3f0e6; border-bottom-right-radius:6px; }
      .pv-asst { justify-self:start; background:rgba(29,29,27,.045); color:var(--color-ink); border-bottom-left-radius:6px; }
      .pv-asst strong { color:var(--color-ink); }
      .pv-foot { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:4px; padding-top:14px; border-top:1px dashed rgba(29,29,27,.16); }
      .pv-foot__item { display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-mono); font-size:12px; }
      .pv-k { color:var(--color-muted-2); } .pv-v { color:var(--color-ink); font-weight:600; } .pv-price { color:var(--color-green); }
      /* preview multimodal carousel */
      .pv-stage { min-height:248px; }
      /* all scenes share ONE grid cell with a FIXED height -> the demo block never grows as text streams;
         a long answer scrolls inside instead of stretching the block. Inactive scenes stay laid out but hidden. */
      .pv-scenes { display:grid; height:380px; }
      .pv-scenes > .pv-scene { grid-area:1 / 1; display:grid; gap:12px; align-content:start; overflow:hidden auto; overscroll-behavior:contain; scrollbar-width:thin; visibility:hidden; opacity:0; pointer-events:none; }
      .pv-scenes > .pv-scene::-webkit-scrollbar { width:6px; } .pv-scenes > .pv-scene::-webkit-scrollbar-thumb { background:rgba(29,29,27,.18); border-radius:3px; }
      .pv-scenes > .pv-scene.is-active { visibility:visible; opacity:1; pointer-events:auto; animation:pvFade .42s ease; }
      @keyframes pvFade { from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }
      .pv-out { justify-self:start; max-width:92%; }
      .pv-foot { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:2px; padding-top:13px; border-top:1px dashed rgba(29,29,27,.16); }
      /* reasoning scene */
      .pv-think { justify-self:start; display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:14px; background:rgba(12,122,77,.07); border:1px solid rgba(12,122,77,.18); font-size:13px; font-weight:650; color:var(--color-green); }
      .pv-think__dots { display:inline-flex; gap:4px; }
      .pv-think__dots i { width:6px; height:6px; border-radius:50%; background:var(--color-green); opacity:.35; animation:pvdot 1.05s infinite ease-in-out; }
      .pv-think__dots i:nth-child(2){ animation-delay:.16s; } .pv-think__dots i:nth-child(3){ animation-delay:.32s; }
      @keyframes pvdot { 0%,65%,100%{ opacity:.3; transform:translateY(0);} 32%{ opacity:1; transform:translateY(-3px);} }
      .pv-line { display:block; }
      /* while streaming, un-shown lines collapse to zero height so the bubble GROWS line by line (no big empty box) */
      .pv-answer.is-stream .pv-line { opacity:0; transform:translateY(7px); max-height:0; overflow:hidden; transition:opacity .34s ease, transform .34s ease, max-height .45s ease; }
      .pv-answer.is-stream .pv-line.is-shown { opacity:1; transform:none; max-height:600px; }
      /* the answer bubble itself is hidden until the first line appears (only the thinking pill shows meanwhile) */
      .pv-answer.is-stream.is-empty { display:none; }
      .pv-caret { display:inline-block; width:7px; height:1.02em; vertical-align:-2px; margin-left:3px; border-radius:1px; background:var(--color-green); animation:pvcaret .8s steps(1) infinite; }
      @keyframes pvcaret { 50%{ opacity:0; } }
      /* files scene */
      .pv-file { display:inline-flex; align-items:center; gap:10px; padding:9px 13px; border-radius:12px; background:rgba(29,29,27,.05); border:1px solid rgba(29,29,27,.1); font-size:13px; font-weight:600; color:var(--color-ink); }
      .pv-file__ic { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:#d63b39; color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.02em; }
      /* image scene */
      .pv-image { width:min(330px,82%); aspect-ratio:16/10; border-radius:14px; position:relative; overflow:hidden; background:linear-gradient(135deg,#cdebdc,#7fc9a8 55%,#0c7a4d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
      .pv-image svg { position:absolute; inset:0; width:100%; height:100%; }
      .pv-image__badge { position:absolute; bottom:8px; right:9px; font-family:var(--font-mono); font-size:10px; color:#fff; background:rgba(0,0,0,.32); padding:2px 7px; border-radius:7px; }
      .pv-image::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%); transform:translateX(-130%); }
      .pv-scene.is-active .pv-image { animation:pvImgIn .65s ease both; }
      .pv-scene.is-active .pv-image::after { animation:pvShine 1.5s ease .35s; }
      @keyframes pvImgIn { from{ opacity:0; transform:scale(.95); filter:blur(7px);} to{ opacity:1; transform:none; filter:blur(0);} }
      @keyframes pvShine { to { transform:translateX(130%);} }
      .pv-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; width:min(360px,92%); justify-self:start; }
      .pv-gallery .pv-image { width:100%; aspect-ratio:1; border-radius:11px; }
      .pv-image--a { background:linear-gradient(135deg,#cdebdc,#7fc9a8 55%,#0c7a4d); }
      .pv-image--b { background:linear-gradient(135deg,#dfe7f5,#9fb6e0 55%,#2d5f9f); }
      .pv-image--c { background:linear-gradient(135deg,#f3e3cf,#e0b88a 55%,#b06a2c); }
      .pv-scene.is-active .pv-gallery .pv-image:nth-child(2) { animation-delay:.12s; }
      .pv-scene.is-active .pv-gallery .pv-image:nth-child(3) { animation-delay:.24s; }
      /* video scene */
      .pv-video { width:min(360px,84%); aspect-ratio:16/9; border-radius:14px; position:relative; overflow:hidden; background:linear-gradient(135deg,#1c2b25,#0c7a4d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
      .pv-video__play { position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; }
      .pv-video__play::after { content:""; border-left:14px solid #0c7a4d; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
      .pv-video__t { position:absolute; top:8px; right:10px; font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,.92); background:rgba(0,0,0,.3); padding:2px 7px; border-radius:7px; }
      .pv-video__bar { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.22); }
      .pv-video__bar i { display:block; height:100%; width:0; background:#fff; }
      .pv-scene.is-active .pv-video__bar i { animation:pvScrub 3.2s linear .4s both; }
      @keyframes pvScrub { to { width:100%; } }
      /* realtime voice scene */
      .pv-call { display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:16px; background:rgba(12,122,77,.06); border:1px solid rgba(12,122,77,.16); }
      .pv-orb { width:44px; height:44px; flex:none; border-radius:50%; background:radial-gradient(circle at 34% 30%, #2fae82, #0c7a4d); }
      .pv-scene.is-active .pv-orb { animation:pvPulse 1.7s ease-in-out infinite; }
      @keyframes pvPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(12,122,77,.35);} 50%{ box-shadow:0 0 0 13px rgba(12,122,77,0);} }
      .pv-call__col { display:grid; gap:7px; }
      .pv-call__live { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:750; color:var(--color-green); font-family:var(--font-mono); }
      .pv-call__live i { width:7px; height:7px; border-radius:50%; background:#d63b39; animation:pvBlink 1.2s steps(1) infinite; }
      @keyframes pvBlink { 50%{ opacity:.2; } }
      .pv-wave { display:inline-flex; align-items:center; gap:3px; height:22px; }
      .pv-wave i { width:3px; height:8px; border-radius:2px; background:var(--color-green); transform:scaleY(.6); }
      .pv-scene.is-active .pv-wave i { animation:pvWave 1s ease-in-out infinite; }
      .pv-wave i:nth-child(2){ animation-delay:.09s; } .pv-wave i:nth-child(3){ animation-delay:.18s; }
      .pv-wave i:nth-child(4){ animation-delay:.27s; } .pv-wave i:nth-child(5){ animation-delay:.36s; }
      .pv-wave i:nth-child(6){ animation-delay:.45s; } .pv-wave i:nth-child(7){ animation-delay:.54s; }
      @keyframes pvWave { 0%,100%{ transform:scaleY(.55);} 50%{ transform:scaleY(2.1);} }
      .pv-cap { font-size:13.5px; line-height:1.5; color:var(--color-ink); }
      /* speech synthesis (TTS) row */
      .pv-tts { display:flex; align-items:center; gap:13px; margin-top:11px; padding:11px 14px; border-radius:14px; background:rgba(29,29,27,.04); border:1px solid rgba(29,29,27,.1); }
      .pv-tts__play { flex:none; width:34px; height:34px; border-radius:50%; border:none; background:var(--color-green); color:#fff; font-size:12px; cursor:pointer; display:grid; place-items:center; }
      .pv-tts__col { display:grid; gap:6px; }
      .pv-tts__label { font-size:11.5px; font-weight:700; color:var(--color-muted); }
      .pv-eq { display:inline-flex; align-items:flex-end; gap:2.5px; height:18px; }
      .pv-eq i { width:3px; height:5px; border-radius:2px; background:var(--color-green); transform-origin:bottom; transform:scaleY(.5); }
      .pv-scene.is-active .pv-eq i { animation:pvEq .9s ease-in-out infinite; }
      .pv-eq i:nth-child(2){animation-delay:.1s} .pv-eq i:nth-child(3){animation-delay:.2s} .pv-eq i:nth-child(4){animation-delay:.3s} .pv-eq i:nth-child(5){animation-delay:.15s} .pv-eq i:nth-child(6){animation-delay:.25s} .pv-eq i:nth-child(7){animation-delay:.35s} .pv-eq i:nth-child(8){animation-delay:.05s} .pv-eq i:nth-child(9){animation-delay:.2s}
      @keyframes pvEq { 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(3);} }
      .pv-tts.is-paused .pv-eq i { animation-play-state:paused; }
      .pv-tts__cap { font-style:italic; color:var(--color-muted); }
      /* clarify scene (interactive question with choices) */
      .pv-choices { display:flex; flex-wrap:wrap; gap:8px; justify-self:start; margin-top:2px; }
      .pv-choice { padding:8px 14px; border-radius:12px; border:1px solid rgba(12,122,77,.28); background:rgba(12,122,77,.06); color:var(--color-green); font-size:13px; font-weight:650; cursor:pointer; transition:background .15s; }
      .pv-choice:hover { background:rgba(12,122,77,.13); }
      /* tabs */
      /* wrap the capability chips + the play/pause control so nothing scrolls off-screen (the play button used
         to sit past the right edge of a hidden-scrollbar row, so it was invisible with no scroll affordance). */
      .pv-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:4px; padding-top:13px; border-top:1px dashed rgba(29,29,27,.16); }
      .pv-tab { flex:none; white-space:nowrap; padding:5px 11px; border-radius:999px; border:1px solid rgba(29,29,27,.14); background:var(--color-paper); color:var(--color-muted); font-size:11.5px; font-weight:650; cursor:pointer; transition:border-color .16s, color .16s; }
      .pv-tab:hover { border-color:rgba(12,122,77,.4); color:var(--color-green); }
      .pv-tab.is-active { background:rgba(12,122,77,.1); border-color:rgba(12,122,77,.3); color:var(--color-green); }
      .pv-pause { margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%; border:1px solid rgba(29,29,27,.14); background:var(--color-paper); color:var(--color-muted); font-size:11px; line-height:1; cursor:pointer; display:grid; place-items:center; }
      .pv-pause:hover { border-color:rgba(12,122,77,.4); color:var(--color-green); }
      .pv-progress { height:2px; border-radius:2px; background:rgba(29,29,27,.09); overflow:hidden; margin-top:4px; }
      .pv-progress > i { display:block; height:100%; width:0; background:var(--color-green); border-radius:2px; }
      /* clarify scene: the model's suggested answer highlights as if picked */
      #pvScene5.is-active .pv-choice:first-child { animation:pvPick .5s ease 1.3s both; }
      @keyframes pvPick { to { background:rgba(12,122,77,.16); border-color:var(--color-green); box-shadow:0 0 0 2px rgba(12,122,77,.16); } }
      @media (prefers-reduced-motion: reduce){
        .pv-think__dots i, .pv-caret, .pv-orb, .pv-wave i, .pv-eq i, .pv-image::after, .pv-video__bar i { animation:none !important; }
        .pv-video__bar i { width:42%; } .pv-wave i, .pv-eq i { transform:scaleY(1.3); }
        .pv-progress, .pv-pause { display:none !important; }
        #pvScene5.is-active .pv-choice:first-child { animation:none !important; background:rgba(12,122,77,.16); border-color:var(--color-green); }
      }
      .media { margin-top:34px; border:1px solid rgba(29,29,27,.16); border-radius:var(--radius-lg); overflow:hidden; background:var(--color-paper); box-shadow:var(--shadow-card); }
      .media img { width:100%; height:clamp(190px, 27vw, 360px); display:block; object-fit:cover; object-position:center; }
      .media--hero { margin-top:42px; }
      .media--hero img { height:clamp(230px, 35vw, 460px); }
      .media figcaption { padding:12px 18px; border-top:1px solid rgba(29,29,27,.10); color:var(--color-muted-2); font-size:12px; letter-spacing:.04em; }
      .modal-overlay { position:fixed; inset:0; z-index:200; display:none; padding:18px; overflow-y:auto; background:rgba(7,8,8,.56); backdrop-filter:blur(14px); }
      .modal-overlay.is-open { display:block; }
      .modal-dialog { width:min(1180px,100%); margin:34px auto; overflow:hidden; border:1px solid var(--color-line-dark); border-radius:24px; background: radial-gradient(720px 360px at 0% 0%, rgba(12,122,77,.08), transparent 60%), var(--color-paper); box-shadow:0 40px 130px rgba(0,0,0,.34); }
      .modal-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:22px 24px; border-bottom:1px solid rgba(29,29,27,.10); }
      .modal-header p { max-width:860px; margin-top:10px; font-size:16px; }
      .modal-close { width:38px; height:38px; border:1px solid var(--color-line-dark); border-radius:50%; background:transparent; color:var(--color-ink); font-size:20px; line-height:1; }
      .modal-body { padding:24px; }
      .tab-panel { display:none; } .tab-panel.is-active { display:block; }
      .prompt-box { margin-top:18px; padding:16px; border:1px solid rgba(29,29,27,.10); border-radius:16px; background:#f1eee4; color:var(--color-muted); font-size:15px; }
      .model-selector { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
      .answer-grid, .verdict-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
      .verdict-grid { grid-template-columns: repeat(3,1fr); }
      .answer-card, .verdict-card { overflow:hidden; border:1px solid rgba(29,29,27,.10); border-radius:16px; background:var(--color-paper); }
      .answer-card--pro { border-color:var(--color-line-dark); box-shadow: inset 0 0 0 2px var(--color-ink); }
      .answer-card__head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid rgba(29,29,27,.10); }
      .answer-model { font-weight:800; letter-spacing:-.02em; }
      .recommended { display:inline-flex; margin-left:8px; padding:4px 7px; border-radius:var(--radius-pill); background:var(--color-green-soft); color:var(--color-green); font-size:11px; font-weight:800; vertical-align:middle; }
      .answer-score { display:inline-flex; padding:5px 8px; border-radius:var(--radius-pill); background:var(--color-soft); color:var(--color-muted); font-size:12px; font-weight:800; white-space:nowrap; }
      .answer-card--pro .answer-score { color:var(--color-green); background:var(--color-green-soft); }
      .answer-content { display:grid; gap:14px; padding:16px; }
      .answer-content p { font-size:15px; }
      .answer-list { display:grid; gap:8px; padding:0; margin:0; list-style:none; color:var(--color-muted); font-size:14px; }
      .answer-list li { padding-top:8px; border-top:1px solid rgba(29,29,27,.10); } .answer-list strong { color:var(--color-ink); }
      .delta-box { padding:18px; border:1px solid var(--color-line-dark); border-radius:16px; background:var(--color-black); color:var(--color-paper); }
      .delta-box p { margin-top:10px; color:#cfcfc7; font-size:15px; }
      .delta-list { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:16px; }
      .delta-item { padding:12px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.08); color:#efefe7; font-size:14px; }
      .verdict-card { padding:16px; }
      .verdict-card--pro { color:var(--color-paper); border-color:var(--color-black); background:var(--color-black); }
      .verdict-card p { margin-top:10px; font-size:15px; } .verdict-card--pro p { color:#cfcfc7; }
      .footer { padding:34px 0 52px; border-top:1px solid rgba(29,29,27,.10); color:var(--color-muted); background: linear-gradient(180deg, rgba(244,241,232,0), rgba(224,216,199,.52)); font-size:14px; }
      .footer-grid { display:grid; grid-template-columns:1.25fr repeat(5,1fr); gap:24px; align-items:start; }
      .footer-brand p { max-width:340px; margin-top:14px; }
      .footer-col h4 { margin:0 0 12px; color:var(--color-muted-2); text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
      .footer-col a, .footer-col span { display:block; margin-top:9px; color:var(--color-muted); font-size:14px; }
      .footer-bottom { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:34px; padding-top:20px; border-top:1px solid rgba(29,29,27,.10); color:var(--color-muted-2); font-size:13px; }
      .nav__menu-btn { display:none; }
      .nav__mobile { display:none; }
      .mobile-cta { display:none; }
    }
    @layer sections {
      .hero { padding:clamp(24px,3.2vw,44px) 0 56px; border-bottom:1px solid rgba(29,29,27,.10); }
      .hero .container { position:relative; z-index:1; width: min(1680px, 90%); }
      .hero__intro { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:clamp(28px,3.6vw,64px); align-items:start; padding:clamp(30px,3.2vw,58px) clamp(28px,3.4vw,60px); border:1px solid rgba(29,29,27,.12); border-radius:36px; background: radial-gradient(circle at 8% 12%, rgba(12,122,77,.15), transparent 42%), radial-gradient(circle at 92% 6%, rgba(45,95,159,.12), transparent 46%), linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-soft); }
      .hero__text { text-align:left; }
      .hero__text > :first-child { margin-top:0; }
      .hero__model { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--color-green); background:rgba(12,122,77,.10); border:1px solid rgba(12,122,77,.22); border-radius:999px; padding:6px 14px; margin-bottom:20px; }
      .hero__intro h1 { margin-top:0; font-size:clamp(34px,3.8vw,58px); line-height:1.04; letter-spacing:-.025em; }
      .hero__lead { max-width:620px; margin:20px 0 0; color:var(--color-muted); font-size:clamp(17px,1.5vw,23px); letter-spacing:-.02em; line-height:1.45; }
      .hero__actions { justify-content:flex-start; }
      .hero__proof { max-width:620px; margin:22px 0 0; text-align:left; }
      .hero__demo { position:relative; margin:0; max-width:none; text-align:left; }
      .hero__demo .preview-card { max-width:none; margin:0; width:100%; }
      .hero__lead strong { color:var(--color-ink); font-weight:650; }
      .hero__ref { font-size:.6em; vertical-align:super; color:var(--color-green); text-decoration:none; font-weight:700; margin-left:1px; }
      .hero__ref:hover { text-decoration:underline; }
      .hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
      .proof-foot { padding:0 22px 22px; }
      .proof-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
      @media (max-width:480px){ .proof-actions .button { flex:1 1 100%; } }
      .hero__grid { display:grid; grid-template-columns:1.08fr .92fr; gap:32px; align-items:stretch; margin-top:40px; }
    }
    @layer utilities {
      .u-mt-0 { margin-top:0 !important; } .u-mt-4 { margin-top:18px !important; }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
      @media (max-width: 1080px) {
        .section-head, .hero__grid, .hero__intro, .split, .inside-grid { grid-template-columns:1fr; }
        .grid--4, .quickstart-steps, .calc-grid, .calc-result, .footer-grid, .metrics { grid-template-columns: repeat(2,1fr); }
        .grid--3, .answer-grid, .verdict-grid { grid-template-columns:1fr; }
        .table-box { overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-box table { min-width:760px; } .table--cards table { min-width:0; }
        .inside-block, .inside-block:nth-child(2n), .inside-block:nth-last-child(-n + 2) { border-right:0; border-bottom:1px solid rgba(29,29,27,.10); }
        .inside-block:last-child { border-bottom:0; }
        .delta-list { grid-template-columns:1fr; } .tabs--code { width:100%; border-radius:18px; }
      }
      @media (max-width: 720px) {
        .container { width: min(100% - 36px, var(--max-width)); }
        .nav { position:sticky; }
        .nav__inner { min-height:64px; position:relative; } .nav__links a:not(.button) { display:none; } .nav__links .button { display:none; }
        .nav__menu-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--color-line-dark); border-radius:12px; background:rgba(255,255,255,.55); color:var(--color-ink); font-size:17px; }
        .nav__mobile { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40; flex-direction:column; gap:2px; padding:10px; border:1px solid var(--color-line-dark); border-radius:16px; background:var(--color-paper); box-shadow:0 24px 60px rgba(0,0,0,.18); }
        .nav__mobile.is-open { display:flex; }
        .nav__mobile a { padding:12px 13px; border-radius:10px; color:var(--color-ink); font-size:15px; }
        .nav__mobile a.button { background:#0c0d0d; color:var(--color-paper); text-align:center; margin-top:4px; }
        .table--cards thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
        .table--cards table, .table--cards tbody, .table--cards tr, .table--cards td { display:block; width:100%; min-width:0; }
        .table--cards tr { border:1px solid var(--color-line-dark); border-radius:14px; padding:6px 4px; margin-bottom:12px; background:rgba(255,255,255,.4); }
        .table--cards td { display:flex; justify-content:space-between; gap:14px; border:0; padding:9px 12px; text-align:right; }
        .table--cards td::before { content:attr(data-label); font-weight:700; color:var(--color-muted-2); text-align:left; text-transform:uppercase; letter-spacing:.04em; font-size:11px; align-self:center; }
        .table--cards td:first-child { font-weight:700; font-size:16px; border-bottom:1px solid rgba(29,29,27,.08); }
        .table--cards td:first-child::before { content:""; }
        h1 { font-size:clamp(27px,7.6vw,76px); } h2 { font-size:clamp(23px,6vw,56px); }
        .hero { padding:28px 0 32px; } .hero__intro { padding:22px 18px 26px; border-radius:24px; }
        .section { padding:62px 0; } .section-head { grid-template-columns:1fr; margin-bottom:30px; } .section-head p, .hero__lead { font-size:18px; }
        .dom-table { min-width:340px; }
        .hero__actions, .actions { flex-direction:column; } .hero__actions .button, .actions .button { width:100%; }
        .launch-strip, .tabs--code { display:grid; grid-template-columns:1fr; } .launch-pill { justify-content:flex-start; } .tab-button { width:100%; }
        .rank-row { grid-template-columns:1fr; gap:7px; padding-bottom:10px; border-bottom:1px solid rgba(29,29,27,.10); }
        .rank-row:last-child { border-bottom:0; } .rank-row__score, .rank-row__pending { text-align:left; }
        .metrics, .grid--4, .quickstart-steps, .calc-grid, .calc-result, .footer-grid { grid-template-columns:1fr; }
        .metric { border-right:0; border-bottom:1px solid rgba(29,29,27,.10); } .metric:last-child { border-bottom:0; }
        .model-card { padding:22px; } .mode-item { grid-template-columns:1fr; gap:8px; }
        .quickstart-head, .quickstart-body, .calc-head, .calc-body, .form-head, .form-body { padding:20px; }
        .code-area { min-height:360px; font-size:11.5px; }
        .modal-overlay { padding:8px; } .modal-dialog { margin:8px auto 70px; border-radius:16px; } .modal-header, .modal-body { padding:18px; }
        .answer-card__head { align-items:flex-start; flex-direction:column; }
        .mobile-cta { min-height:48px; display:flex; align-items:center; justify-content:center; position:fixed; left:12px; right:12px; bottom:12px; z-index:80; border:1px solid rgba(0,0,0,.2); border-radius:var(--radius-pill); color:var(--color-paper); background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 40%), linear-gradient(135deg, #0c0d0d, #24241f); box-shadow:0 16px 40px rgba(0,0,0,.22); font-size:15px; font-weight:700; opacity:0; transform:translateY(120%); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
        .mobile-cta.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
        .footer { padding-bottom:78px; }
      }
    }

    /* ===================== DARK THEME (unlayered -> overrides the @layer rules) ===================== */
    :root[data-theme="dark"] {
      color-scheme: dark; /* native widgets (select dropdown lists, scrollbars) render dark, not white-on-white */
      --color-bg:#141410; --color-bg-2:#1a1a14; --color-paper:#1c1c17; --color-paper-2:#232319;
      --color-ink:#f2efe6; --color-muted:#b8b4a8; --color-muted-2:#928d80;
      --color-line:#3a382f; --color-line-dark:#4b4940; --color-soft:#2b2a22; --color-soft-2:#333126;
      --color-green:#42b78a; --color-green-soft:rgba(66,183,138,.16); --color-blue:#6ea0e0; --color-violet:#9a92e0;
      --color-amber:#d4a642; --color-amber-soft:rgba(184,134,11,.15);
    }
    :root[data-theme="dark"] body {
      background:
        radial-gradient(1200px 700px at 12% -8%, rgba(66,183,138,.10), transparent 58%),
        radial-gradient(900px 600px at 92% 2%, rgba(45,95,159,.10), transparent 58%),
        radial-gradient(760px 520px at 56% 30%, rgba(120,110,220,.06), transparent 68%),
        linear-gradient(180deg,#16150e 0%,#121108 52%,#15140c 100%); }
    :root[data-theme="dark"] body::before { background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); }
    :root[data-theme="dark"] ::selection { background:var(--color-ink); color:#141410; }
    :root[data-theme="dark"] tr:hover td { background:rgba(255,255,255,.04); }
    :root[data-theme="dark"] th { background:linear-gradient(180deg,#26251d,#201f17); color:var(--color-muted-2); }
    :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
    :root[data-theme="dark"] .nav { background:rgba(20,20,15,.82); box-shadow:0 10px 34px rgba(0,0,0,.32); }
    :root[data-theme="dark"] .nav__links a:not(.button):hover { background:rgba(255,255,255,.08); }
    :root[data-theme="dark"] .nav__menu-btn { background:rgba(255,255,255,.06); }
    :root[data-theme="dark"] .button--primary, :root[data-theme="dark"] .nav__mobile a.button, :root[data-theme="dark"] .mobile-cta { background:linear-gradient(135deg,#42b78a,#2c6f57); color:#0b1210; box-shadow:0 14px 30px rgba(66,183,138,.22); }
    /* hairline borders (dark-on-light would vanish) */
    :root[data-theme="dark"] .section, :root[data-theme="dark"] th, :root[data-theme="dark"] td,
    :root[data-theme="dark"] .hero__proof, :root[data-theme="dark"] .prob-proof, :root[data-theme="dark"] .about-card .prose__proof:first-of-type,
    :root[data-theme="dark"] .cap-details, :root[data-theme="dark"] .cap-details .table-box, :root[data-theme="dark"] .cap-details thead th,
    :root[data-theme="dark"] .cap-details tbody td, :root[data-theme="dark"] .cap-summary::after,
    :root[data-theme="dark"] .panel__head, :root[data-theme="dark"] .rank-foot,
    :root[data-theme="dark"] .dom-table th, :root[data-theme="dark"] .dom-table td, :root[data-theme="dark"] .dom-table thead th, :root[data-theme="dark"] .dom-table .dom-avg td,
    :root[data-theme="dark"] .metrics, :root[data-theme="dark"] .metric, :root[data-theme="dark"] .launch-pill, :root[data-theme="dark"] .case-list li,
    :root[data-theme="dark"] .tiers-toggle, :root[data-theme="dark"] .tier, :root[data-theme="dark"] .quickstart-head, :root[data-theme="dark"] .quickstep,
    :root[data-theme="dark"] .tabs--code, :root[data-theme="dark"] .calc-box, :root[data-theme="dark"] .calc-out, :root[data-theme="dark"] .calc select, :root[data-theme="dark"] .calc input,
    :root[data-theme="dark"] .endpoint, :root[data-theme="dark"] .inside-grid, :root[data-theme="dark"] .inside-block,
    :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .preview-card, :root[data-theme="dark"] .preview-top,
    :root[data-theme="dark"] .pv-foot, :root[data-theme="dark"] .pv-file, :root[data-theme="dark"] .pv-tts, :root[data-theme="dark"] .pv-tabs, :root[data-theme="dark"] .pv-tab, :root[data-theme="dark"] .pv-pause,
    :root[data-theme="dark"] .media, :root[data-theme="dark"] .media figcaption, :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .prompt-box,
    :root[data-theme="dark"] .answer-card, :root[data-theme="dark"] .answer-card__head, :root[data-theme="dark"] .answer-list li,
    :root[data-theme="dark"] .footer { border-color:rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.045)); }
    /* main card group: swap the white overlay for a subtle light overlay on dark paper */
    :root[data-theme="dark"] .surface, :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .table-box,
    :root[data-theme="dark"] .quickstart-card, :root[data-theme="dark"] .calc-card, :root[data-theme="dark"] .form-card {
      border-color:rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),var(--color-paper); }
    :root[data-theme="dark"] .card:hover { border-color:rgba(255,255,255,.22); }
    :root[data-theme="dark"] .cap-details { background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); }
    :root[data-theme="dark"] .hero__intro { border-color:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-soft);
      background:radial-gradient(circle at 8% 12%, rgba(66,183,138,.16), transparent 42%), radial-gradient(circle at 92% 6%, rgba(45,95,159,.15), transparent 46%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--color-paper); }
    /* white-overlay one-offs -> subtle dark */
    :root[data-theme="dark"] .section--soft { background:radial-gradient(900px 420px at 0% 0%,rgba(66,183,138,.06),transparent 62%),radial-gradient(760px 360px at 100% 0%,rgba(45,95,159,.05),transparent 64%),rgba(255,255,255,.02); }
    :root[data-theme="dark"] .metric { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); }
    :root[data-theme="dark"] .metric strong { background:linear-gradient(135deg,#f2efe6,#a29e92); -webkit-background-clip:text; background-clip:text; }
    :root[data-theme="dark"] .quickstart-head { background:radial-gradient(580px 280px at 0% 0%,rgba(66,183,138,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); }
    :root[data-theme="dark"] .quickstart-body { background:rgba(255,255,255,.02); }
    :root[data-theme="dark"] .quickstep, :root[data-theme="dark"] .calc-box { background:rgba(255,255,255,.04); }
    :root[data-theme="dark"] .preview-top { background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); }
    :root[data-theme="dark"] .launch-pill, :root[data-theme="dark"] .button--secondary, :root[data-theme="dark"] .tiers-toggle, :root[data-theme="dark"] .tabs--code { background:rgba(255,255,255,.05); }
    :root[data-theme="dark"] .tier-tg.is-active, :root[data-theme="dark"] .tabs--code .tab-button.is-active { background:rgba(255,255,255,.12); }
    :root[data-theme="dark"] .prompt-box { background:rgba(255,255,255,.03); }
    :root[data-theme="dark"] .pv-asst { background:rgba(255,255,255,.05); }
    :root[data-theme="dark"] .pv-file, :root[data-theme="dark"] .pv-tts, :root[data-theme="dark"] .pv-tab, :root[data-theme="dark"] .pv-pause { background:rgba(255,255,255,.04); }
    :root[data-theme="dark"] .status { box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
    /* dark .bm-select: SOLID dark field (translucent read as broken), light chevron (the light-mode SVG stroke
       #5b574f is invisible on dark), visible border; options inherit the solid bg for the popup list. */
    :root[data-theme="dark"] .bm-select { background:#23231c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b8b4a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; color:var(--color-ink); border-color:rgba(255,255,255,.18); }
    :root[data-theme="dark"] .bm-select option { background:#23231c; color:var(--color-ink); }
    :root[data-theme="dark"] .bm-progress, :root[data-theme="dark"] .pv-progress { background:rgba(255,255,255,.1); }
    :root[data-theme="dark"] .preview-dots i { background:rgba(255,255,255,.22); }
    /* dark-surface components: keep the dark bg, force LIGHT text (they used var(--color-paper), now dark) */
    :root[data-theme="dark"] .card--dark, :root[data-theme="dark"] .model-card, :root[data-theme="dark"] .terminal, :root[data-theme="dark"] .verdict-card--pro,
    :root[data-theme="dark"] .delta-box, :root[data-theme="dark"] .brand__mark, :root[data-theme="dark"] .mode-item strong, :root[data-theme="dark"] .mode-price { color:#f2efe6; }
    :root[data-theme="dark"] .cap-details[open] .cap-summary::after { color:#0b0c0d; }
    /* colored text on flipped soft backgrounds */
    :root[data-theme="dark"] .note { background:rgba(184,134,11,.12); color:#e8cf8f; }
    :root[data-theme="dark"] .status--amber { color:#e8cf8f; }
    :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .section-kicker { color:var(--color-muted-2); }
    .theme-toggle { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; border:1px solid var(--color-line); background:transparent; color:var(--color-muted); cursor:pointer; flex:0 0 auto; transition:color .15s, border-color .15s; }
    .theme-toggle:hover { color:var(--color-ink); border-color:var(--color-green); }
    .theme-toggle svg { width:18px; height:18px; }

    /* ===================== API landing redesign: stage 1 (header, hero, trust strip) ===================== */
    :root {
      --api-page-bg:#080a0f;
      --api-surface-1:#0d1119;
      --api-surface-2:#121722;
      --api-text:#f5f7fb;
      --api-text-2:#a6afbf;
      --api-muted:#727d90;
      --api-line:rgba(255,255,255,.09);
      --api-line-strong:rgba(255,255,255,.16);
      --api-accent:#8b8cff;
      --api-blue:#53b7ff;
      --api-success:#5ed8a3;
      --api-radius-card:22px;
      --api-radius-control:12px;
      --api-container:1240px;
    }
    .landing-header {
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(8,10,15,.78);
      box-shadow:none;
      backdrop-filter:blur(22px) saturate(140%);
    }
    .landing-header .nav__inner { min-height:76px; width:min(calc(100% - 40px), var(--api-container)); gap:24px; }
    .landing-header .brand { color:var(--api-text); }
    .landing-header .brand__mark {
      border-radius:10px;
      color:#0a0d13;
      background:linear-gradient(145deg,#f1f4ff 0%,#aeb5ff 42%,#65c0ff 100%);
      box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 12px 32px rgba(83,103,255,.24);
    }
    .landing-header .beta-badge {
      color:#d8dcff;
      border-color:rgba(139,140,255,.32);
      background:rgba(139,140,255,.10);
    }
    .landing-header .nav__links { color:var(--api-text-2); }
    .landing-header .nav__links a:not(.button) {
      color:var(--api-text-2);
      border-radius:10px;
      transition:background .16s ease, color .16s ease;
    }
    .landing-header .nav__links a:not(.button):hover { color:var(--api-text); background:rgba(255,255,255,.07); }
    .landing-header .button--secondary {
      color:var(--api-text);
      border-color:var(--api-line-strong);
      background:rgba(255,255,255,.05);
      box-shadow:none;
    }
    .landing-header .button--secondary:hover { background:rgba(255,255,255,.09); }
    .landing-header .theme-toggle { border-color:var(--api-line); color:var(--api-text-2); background:rgba(255,255,255,.03); }
    .hero--api {
      position:relative;
      overflow:hidden;
      padding:clamp(64px,7vw,112px) 0 70px;
      color:var(--api-text);
      border-bottom:0;
      background:
        radial-gradient(900px 580px at 76% -130px, rgba(112,122,255,.18), transparent 66%),
        radial-gradient(760px 520px at -160px 34%, rgba(83,183,255,.09), transparent 68%),
        linear-gradient(180deg,#080a0f 0%,#0a0d13 74%,#0d1017 100%);
    }
    .hero--api::before {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.24;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:56px 56px;
      mask-image:linear-gradient(to bottom, #000 0%, transparent 82%);
    }
    .hero--api .container { width:min(calc(100% - 40px), var(--api-container)); }
    .hero--api .hero__intro {
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0,.94fr) minmax(460px,1.06fr);
      align-items:center;
      gap:clamp(44px,6vw,82px);
      padding:0;
      border:0;
      border-radius:0;
      background:none;
      box-shadow:none;
    }
    .hero--api .hero__model {
      margin-bottom:22px;
      color:#d7dcff;
      border-color:rgba(139,140,255,.28);
      background:rgba(139,140,255,.09);
    }
    .hero--api h1 {
      max-width:760px;
      margin:0;
      color:var(--api-text);
      font-size:clamp(48px,7vw,90px);
      line-height:1;
      letter-spacing:0;
      font-weight:760;
    }
    .hero--api h1 span { color:#8f99ad; }
    .hero--api .hero__lead {
      max-width:650px;
      margin-top:26px;
      color:var(--api-text-2);
      font-size:clamp(17px,1.7vw,21px);
      line-height:1.62;
      letter-spacing:0;
    }
    .hero--api .hero__actions { margin-top:34px; }
    .hero--api .button {
      min-height:48px;
      border-radius:var(--api-radius-control);
      padding:0 19px;
      letter-spacing:0;
    }
    .hero--api .button--primary {
      color:#0a0d13;
      border-color:transparent;
      background:linear-gradient(135deg,#f7f8ff 0%,#bfc4ff 45%,#72c3ff 100%);
      box-shadow:0 18px 44px rgba(93,112,255,.24);
    }
    .hero--api .button--secondary {
      color:var(--api-text);
      border-color:var(--api-line-strong);
      background:rgba(255,255,255,.04);
      box-shadow:none;
    }
    .hero--api .hero__proof {
      max-width:650px;
      margin-top:26px;
      padding-top:20px;
      color:#8f99ad;
      border-top:1px solid var(--api-line);
    }
    .hero--api .hero__proof b { color:var(--api-text); }
    .hero--api .hero__proof a { color:#d7dcff; border-bottom-color:rgba(215,220,255,.32); }
    .hero--api .hero__chips { margin-top:17px; }
    .hero--api .hero__chips li { color:var(--api-text-2); border-color:var(--api-line); background:rgba(255,255,255,.045); }
    .hero--api .hero__chips b { color:var(--api-success); }
    .hero--api .hero__beta { color:var(--api-muted); }
    .hero--api .hero__beta strong { color:var(--api-success); }
    .hero--api .hero__demo { min-width:0; }
    .api-console {
      overflow:hidden;
      border:1px solid var(--api-line-strong);
      border-radius:28px;
      background:linear-gradient(155deg,rgba(23,29,42,.96),rgba(10,13,19,.98) 58%);
      box-shadow:0 42px 110px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.06);
    }
    .api-console__top {
      min-height:54px;
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 18px;
      border-bottom:1px solid var(--api-line);
      color:var(--api-text-2);
      font-size:12px;
      font-weight:700;
    }
    .api-console__title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .api-console__status {
      margin-left:auto;
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:var(--api-success);
      font-size:11px;
      font-weight:800;
    }
    .api-console__status::before {
      content:"";
      width:6px;
      height:6px;
      border-radius:50%;
      background:currentColor;
      box-shadow:0 0 12px currentColor;
    }
    .api-console__body { display:grid; gap:14px; padding:20px; }
    .api-console__request,
    .api-console__response,
    .api-console__step { border:1px solid var(--api-line); border-radius:15px; background:rgba(255,255,255,.035); }
    .api-console__label {
      padding:11px 13px;
      color:var(--api-muted);
      border-bottom:1px solid var(--api-line);
      font-size:10px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .api-console pre {
      min-height:170px;
      margin:0;
      padding:14px;
      color:#c5ccda;
      font-size:12px;
      line-height:1.65;
      white-space:pre-wrap;
    }
    .api-console .tok-kw { color:var(--api-success); font-weight:800; }
    .api-console__flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .api-console__step { min-height:96px; padding:13px; }
    .api-console__step span { color:#cdd2ff; font-size:10px; font-weight:800; }
    .api-console__step strong { display:block; margin-top:8px; color:var(--api-text); font-size:13px; letter-spacing:0; }
    .api-console__step em { display:block; margin-top:5px; color:var(--api-muted); font-size:11px; font-style:normal; line-height:1.45; }
    .api-console__response p { margin:0; padding:14px; color:#c5ccda; font-size:13px; line-height:1.6; }
    .trust-strip { padding:0 0 76px; color:var(--api-text); background:#0d1017; }
    .trust-strip .container { width:min(calc(100% - 40px), var(--api-container)); }
    .trust-grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      overflow:hidden;
      border:1px solid var(--api-line);
      border-radius:var(--api-radius-card);
      background:rgba(255,255,255,.025);
    }
    .trust-item { min-height:118px; padding:24px; border-right:1px solid var(--api-line); }
    .trust-item:last-child { border-right:0; }
    .trust-kicker { color:var(--api-muted); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .trust-value { margin-top:10px; color:var(--api-text); font-size:17px; font-weight:760; letter-spacing:0; }
    .trust-detail { margin-top:6px; color:var(--api-muted); font-size:12px; line-height:1.48; }
    .trust-detail code { color:#cdd2ff; background:rgba(139,140,255,.11); border-radius:5px; padding:1px 5px; }
    .trust-item--proof .trust-value { color:var(--api-success); }
    @media (max-width:1080px) {
      .hero--api .hero__intro { grid-template-columns:1fr; }
      .hero--api .hero__demo { max-width:760px; }
      .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .trust-item:nth-child(2) { border-right:0; }
      .trust-item:nth-child(-n+2) { border-bottom:1px solid var(--api-line); }
    }
    @media (max-width:720px) {
      .landing-header .nav__inner { min-height:66px; width:min(calc(100% - 28px), var(--api-container)); gap:12px; }
      .landing-header .nav__links { display:none; }
      .landing-header .nav__menu-btn { border-color:var(--api-line); color:var(--api-text); background:rgba(255,255,255,.05); }
      .landing-header .nav__mobile { top:calc(100% + 10px); border-color:var(--api-line); background:#10141d; }
      .landing-header .nav__mobile a { color:var(--api-text); }
      .landing-header .nav__mobile a.button { color:#0a0d13; background:linear-gradient(135deg,#f7f8ff,#8fd0ff); }
      .hero--api { padding:42px 0 48px; }
      .hero--api .container, .trust-strip .container { width:min(100% - 28px, var(--api-container)); }
      .hero--api h1 { font-size:clamp(42px,13vw,58px); }
      .hero--api .hero__lead { font-size:17px; }
      .hero--api .hero__actions { display:grid; grid-template-columns:1fr; }
      .hero--api .hero__actions .button { width:100%; box-sizing:border-box; }
      .api-console { border-radius:20px; }
      .api-console__body { padding:14px; }
      .api-console__flow { grid-template-columns:1fr; }
      .api-console pre { font-size:11px; }
      .trust-grid { grid-template-columns:1fr; }
      .trust-item,
      .trust-item:nth-child(2),
      .trust-item:nth-child(-n+2) { border-right:0; border-bottom:1px solid var(--api-line); }
      .trust-item:last-child { border-bottom:0; }
    }

    /* ===================== API landing redesign: stages 2-5 ===================== */
    html { background:var(--api-page-bg); }
    body {
      color:var(--api-text);
      background:var(--api-page-bg);
    }
    body::before { display:none; }
    main h1, main h2, main h3,
    .footer h2, .footer h3 { letter-spacing:0; }
    main p { color:var(--api-text-2); }
    main code { font-family:var(--font-mono); }
    .landing-header .theme-toggle { display:none !important; }
    .landing-header .lang-switch__btn {
      color:var(--api-text-2);
      border-color:var(--api-line);
      background:rgba(255,255,255,.035);
    }
    .landing-header .lang-switch__menu {
      color:var(--api-text-2);
      border-color:var(--api-line);
      background:#111722;
      box-shadow:0 18px 50px rgba(0,0,0,.38);
    }
    .landing-header .lang-switch__menu a { color:var(--api-text-2); }
    .landing-header .lang-switch__menu a:hover,
    .landing-header .lang-switch__menu li[aria-selected="true"] a { color:var(--api-text); background:rgba(255,255,255,.055); }
    .nav__menu-icon { width:20px; display:grid; gap:4px; }
    .nav__menu-icon i { display:block; height:1px; background:currentColor; }

    :root[data-theme] .hero--api .hero__intro,
    .hero--api .hero__intro {
      padding:0;
      border:0;
      border-radius:0;
      background:none;
      box-shadow:none;
    }
    .hero--api {
      padding:68px 0 58px;
      background:#080a0f;
    }
    .hero--api .hero__intro {
      grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);
      gap:64px;
    }
    .hero--api .hero__model { margin-bottom:18px; border-radius:8px; }
    .hero--api h1 { max-width:680px; font-size:72px; line-height:1.02; }
    .hero--api .hero__lead { margin-top:22px; font-size:19px; line-height:1.58; }
    .hero--api .hero__actions { margin-top:28px; }
    .hero--api .hero__proof { margin-top:23px; padding-top:18px; }
    .hero--api .hero__chips { display:none; }
    .hero--api .hero__beta { margin-top:15px; }
    .hero--api .button,
    .api-section .button,
    .final-cta .button {
      min-height:46px;
      padding:0 18px;
      border-radius:8px;
      letter-spacing:0;
      box-shadow:none;
    }
    .hero--api .button--primary,
    .api-section .button--primary,
    .final-cta .button--primary {
      color:#090c12;
      border-color:#f5f7fb;
      background:#f5f7fb;
    }
    .hero--api .button--primary:hover,
    .api-section .button--primary:hover,
    .final-cta .button--primary:hover { background:#dce2ed; border-color:#dce2ed; }
    .hero--api .button--secondary,
    .api-section .button--secondary,
    .final-cta .button--secondary {
      color:var(--api-text);
      border-color:var(--api-line-strong);
      background:transparent;
    }
    .hero--api .button--secondary:hover,
    .api-section .button--secondary:hover,
    .final-cta .button--secondary:hover { background:rgba(255,255,255,.055); }
    .api-console { border-radius:8px; }
    .api-console__top { min-height:48px; }
    .api-console__body { gap:11px; padding:15px; }
    .api-console__request,
    .api-console__response,
    .api-console__step { border-radius:7px; }
    .api-console pre { min-height:148px; padding:12px; line-height:1.58; }
    .api-console__step { min-height:82px; padding:11px; }
    .api-console__step strong { margin-top:6px; }
    .api-console__step em { margin-top:3px; }
    .api-console__response p { padding:12px; }

    .trust-strip { padding:0 0 64px; border-bottom:1px solid var(--api-line); background:#080a0f; }
    .trust-grid { border-radius:8px; background:#0d1118; }
    .trust-item { min-height:110px; padding:21px 22px; }
    .trust-value { font-size:16px; }

    .api-section {
      padding:96px 0;
      color:var(--api-text);
      border-bottom:1px solid var(--api-line);
      background:#0a0d13;
    }
    .api-section--soft { background:#0d1118; }
    .api-section .container,
    .final-cta .container,
    .api-footer .container { width:min(calc(100% - 40px), var(--api-container)); }
    .api-section .section-head {
      max-width:none;
      display:grid;
      grid-template-columns:minmax(0,.88fr) minmax(360px,1.12fr);
      align-items:end;
      gap:64px;
      margin-bottom:42px;
    }
    .api-section .section-head > div { gap:11px; }
    .api-section .section-kicker,
    .capability-group__label,
    .quickstart-guide__label {
      color:#aeb5ff;
      font-size:10px;
      font-weight:800;
      letter-spacing:.1em;
      text-transform:uppercase;
    }
    .api-section .section-head h2 {
      max-width:690px;
      color:var(--api-text);
      font-size:46px;
      line-height:1.08;
      font-weight:720;
    }
    .api-section .section-head p {
      max-width:620px;
      justify-self:end;
      margin:0;
      color:var(--api-text-2);
      font-size:16px;
      line-height:1.7;
      letter-spacing:0;
    }
    .api-section .section-head code,
    .api-section .trust-detail code { color:#d2d6ff; background:rgba(139,140,255,.1); }

    .api-section .panel {
      border:1px solid var(--api-line);
      border-radius:8px;
      color:var(--api-text);
      background:#10151f;
      box-shadow:0 28px 80px rgba(0,0,0,.24);
    }
    .api-section .panel__head { padding:22px 24px; border-color:var(--api-line); background:#121823; }
    .api-section .panel__head h3 { color:var(--api-text); font-size:20px; }
    .api-section .small-label,
    .api-section .rank-group,
    .api-section .rank-foot,
    .api-section .bm-note { color:var(--api-muted); }
    .api-section .bm-select {
      min-height:40px;
      border:1px solid var(--api-line-strong);
      border-radius:7px;
      color:var(--api-text);
      background-color:#151b27;
    }
    .api-section .bm-select option { color:var(--api-text); background:#151b27; }
    .api-section .status { color:var(--api-success); border-color:rgba(94,216,163,.2); background:rgba(94,216,163,.08); }
    .api-section .ranking { gap:16px; padding:24px; }
    .api-section .rank-row { color:var(--api-text-2); }
    .api-section .rank-row strong,
    .api-section .rank-row__score { color:var(--api-text); }
    .api-section .track { height:9px; background:rgba(255,255,255,.08); }
    .api-section .bar { background:#667084; }
    .api-section .bar--pro { background:var(--api-success); }
    .api-section .dom-table th,
    .api-section .dom-table td,
    .api-section .dom-table thead th,
    .api-section .dom-table .dom-avg td { border-color:var(--api-line); background:transparent; }
    .api-section .dom-table thead th { color:var(--api-muted); }
    .api-section .dom-table tbody td,
    .api-section .dom-table tbody td:first-child { color:var(--api-text-2); }
    .api-section .dom-table .dom-pro { color:var(--api-success); }
    .api-section .dom-table .dom-avg td { color:var(--api-text); }
    .api-section .proof-foot { border-color:var(--api-line); background:#0d121b; }
    .api-section .proof-actions { gap:10px; }

    .quickstart-workspace { display:grid; grid-template-columns:minmax(250px,.58fr) minmax(0,1.42fr); gap:34px; align-items:start; }
    .quickstart-guide { padding-top:4px; }
    .quickstart-guide ol { list-style:none; padding:0; margin:22px 0 0; }
    .quickstart-guide li {
      display:grid;
      grid-template-columns:34px minmax(0,1fr);
      gap:13px;
      padding:18px 0;
      border-top:1px solid var(--api-line);
    }
    .quickstart-guide li > span { color:#aeb5ff; font:700 11px/1.5 var(--font-mono); }
    .quickstart-guide li strong { display:block; color:var(--api-text); font-size:14px; letter-spacing:0; }
    .quickstart-guide li p { margin-top:5px; color:var(--api-muted); font-size:12px; line-height:1.6; }
    .quickstart-guide__link { display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--api-text); font-size:13px; font-weight:700; }
    .quickstart-guide__link span { color:var(--api-success); }
    .api-section .quickstart-card {
      max-width:none;
      border:1px solid var(--api-line);
      border-radius:8px;
      color:var(--api-text);
      background:#0b0f16;
      box-shadow:0 28px 80px rgba(0,0,0,.3);
    }
    .api-section .quickstart-head { padding:20px 22px; border-color:var(--api-line); background:#111722; }
    .api-section .quickstart-head h3 { color:var(--api-text); font-size:19px; }
    .api-section .quickstart-head p { color:var(--api-muted); font-size:14px; }
    .api-section .quickstart-body { gap:15px; padding:20px; background:#0b0f16; }
    .api-section .tabs--code { border-radius:8px; border-color:var(--api-line); background:#111722; }
    .api-section .tabs--code .tab-button { min-height:34px; border-radius:6px; color:var(--api-muted); }
    .api-section .tabs--code .tab-button.is-active { color:var(--api-text); background:#202837; box-shadow:none; }
    .api-section .copy-status { color:var(--api-muted); }
    .api-section .code-area {
      min-height:370px;
      border-radius:7px;
      border-color:var(--api-line);
      color:#d4dae6;
      background:#080b10;
      box-shadow:none;
    }
    .api-section .note { color:#c6b789; border-color:rgba(233,187,115,.18); border-radius:7px; background:rgba(233,187,115,.055); }

    .capability-group + .capability-group { margin-top:54px; }
    .capability-group__label { margin-bottom:16px; }
    .capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .capability-card {
      min-height:190px;
      padding:21px;
      border:1px solid var(--api-line);
      border-radius:8px;
      background:#0f141d;
      transition:border-color .18s ease, background .18s ease, transform .18s ease;
    }
    .capability-card:hover { transform:translateY(-2px); border-color:rgba(174,181,255,.25); background:#121824; }
    .capability-card > span { color:#aeb5ff; font:700 11px/1 var(--font-mono); }
    .capability-card h3 { margin-top:31px; color:var(--api-text); font-size:18px; line-height:1.25; }
    .capability-card p { margin-top:8px; color:var(--api-muted); font-size:13px; line-height:1.62; }
    .pattern-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--api-line); border-bottom:1px solid var(--api-line); }
    .pattern-item { min-height:132px; padding:22px 24px; border-right:1px solid var(--api-line); }
    .pattern-item:last-child { border-right:0; }
    .pattern-item h3 { color:var(--api-text); font-size:16px; }
    .pattern-item p { margin-top:8px; color:var(--api-muted); font-size:12px; line-height:1.6; }

    .api-section .tiers-toggle { border:1px solid var(--api-line); border-radius:8px; background:#111722; }
    .api-section .tier-tg { border-radius:6px; color:var(--api-muted); }
    .api-section .tier-tg.is-active { color:var(--api-text); background:#222a39; box-shadow:none; }
    .api-section .tiers-grid { gap:12px; }
    .api-section .tier,
    .api-section .pricing-card {
      border:1px solid var(--api-line);
      border-radius:8px;
      color:var(--api-text);
      background:#10151f;
      box-shadow:none;
    }
    .api-section .tier { min-height:390px; padding:22px 20px; }
    .api-section .tier--featured { border-color:rgba(174,181,255,.38); background:#131927; }
    .api-section .tier-tag { top:-10px; border-radius:6px; color:#0a0d13; background:#aeb5ff; }
    .api-section .tier-price,
    .api-section .tier-cur,
    .api-section .tier-name,
    .api-section .tier-feats li { color:var(--api-text); }
    .api-section .tier-per,
    .api-section .tier-bill,
    .api-section .tier-for,
    .api-section .tier-note,
    .api-section .unit,
    .api-section .pricing-card p { color:var(--api-muted); }
    .api-section .tier-feats li::before { color:var(--api-success); }
    .api-section .pricing-card { min-height:250px; padding:22px; }
    .api-section .pricing-card h3 { color:var(--api-text); font-size:17px; }
    .api-section .pricing-card strong { color:var(--api-text); font-size:38px; letter-spacing:0; }
    .api-section .pricing-card.card--dark { background:#141a25; }
    .api-section .cap-details { border:1px solid var(--api-line); border-radius:8px; color:var(--api-text); background:#10151f; }
    .api-section .cap-summary { color:var(--api-text); }
    .api-section .cap-details[open] .cap-summary::after { color:#0a0d13; background:var(--api-text); }
    .api-section .table-box { border-color:var(--api-line); border-radius:0; background:#10151f; }
    .api-section .table-box th,
    .api-section .table-box td { border-color:var(--api-line); color:var(--api-text-2); background:transparent; }
    .api-section .table-box th { color:var(--api-muted); }
    .api-section .table-box td:first-child { color:var(--api-text); }

    #faq .section-head { margin-bottom:28px; }
    .api-section .faq { max-width:900px; display:block; margin:0 auto; border-top:1px solid var(--api-line); }
    .api-section .faq-item { padding:0; border:0; border-bottom:1px solid var(--api-line); border-radius:0; background:transparent; box-shadow:none; }
    .api-section .faq-item summary { min-height:74px; padding:19px 0; color:var(--api-text); font-size:16px; }
    .api-section .faq-item summary::after {
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border:1px solid var(--api-line);
      border-radius:50%;
      color:var(--api-text-2);
      background:#10151f;
    }
    .api-section .faq-item p { max-width:780px; padding:0 52px 22px 0; color:var(--api-text-2); }
    .api-section .faq-item p a { color:#cdd2ff; border-color:rgba(205,210,255,.3); }

    .final-cta { padding:78px 0; border-bottom:1px solid var(--api-line); background:#0d1118; }
    .final-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:50px; }
    .final-cta h2 { max-width:670px; color:var(--api-text); font-size:42px; line-height:1.1; font-weight:720; }
    .final-cta p { max-width:660px; margin-top:12px; color:var(--api-text-2); font-size:15px; line-height:1.65; }
    .final-cta__actions { display:flex; flex:0 0 auto; gap:10px; }

    .api-footer { padding:32px 0 26px; color:var(--api-muted); border:0; background:#080a0f; }
    .footer-main { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; padding-bottom:28px; }
    .footer-brand a { color:var(--api-text); font-size:15px; font-weight:760; }
    .footer-brand p { margin-top:7px; color:var(--api-muted); font-size:12px; }
    .footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 20px; color:var(--api-text-2); font-size:12px; }
    .footer-links a:hover,
    .api-footer .footer-bottom a:hover { color:var(--api-text); }
    .api-footer .footer-bottom { display:flex; flex-wrap:wrap; gap:12px 20px; padding-top:22px; border-top:1px solid var(--api-line); color:var(--api-muted); font-size:11px; }
    .api-footer .footer-bottom span:first-child { margin-right:auto; }
    .mobile-cta { border-radius:8px; color:#090c12; background:#f5f7fb; box-shadow:0 18px 50px rgba(0,0,0,.3); }

    @media (max-width:1080px) {
      .hero--api { padding-top:56px; }
      .hero--api .hero__intro { grid-template-columns:1fr; gap:42px; }
      .hero--api .hero__text { max-width:760px; }
      .hero--api h1 { font-size:62px; }
      .hero--api .hero__demo { max-width:820px; }
      .api-section .section-head { grid-template-columns:1fr; gap:18px; }
      .api-section .section-head p { justify-self:start; }
      .quickstart-workspace { grid-template-columns:1fr; }
      .quickstart-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--api-line); }
      .quickstart-guide li { grid-template-columns:30px minmax(0,1fr); padding-right:18px; }
      .capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .final-cta__inner { align-items:flex-start; flex-direction:column; gap:28px; }
    }
    @media (max-width:860px) {
      .landing-header .nav__links { display:none; }
      .landing-header .nav__menu-btn { display:grid; place-items:center; }
      .landing-header .nav__mobile { border-color:var(--api-line); background:#10151f; }
      .landing-header .nav__mobile a { color:var(--api-text); }
    }
    @media (max-width:720px) {
      .hero--api { padding:42px 0 46px; }
      .hero--api h1 { font-size:48px; }
      .hero--api .hero__lead { font-size:16px; }
      .api-console__flow { grid-template-columns:1fr; }
      .trust-strip { padding-bottom:46px; }
      .api-section { padding:72px 0; }
      .api-section .container,
      .final-cta .container,
      .api-footer .container { width:min(calc(100% - 28px), var(--api-container)); }
      .api-section .section-head { margin-bottom:30px; }
      .api-section .section-head h2 { font-size:36px; }
      .api-section .section-head p { font-size:15px; }
      .api-section .panel__head { align-items:flex-start; flex-direction:column; }
      .api-section .bm-controls { width:100%; }
      .api-section .bm-select { flex:1 1 auto; min-width:0; }
      .api-section .ranking { padding:18px 14px; }
      .api-section .rank-row { grid-template-columns:96px minmax(0,1fr) 42px; gap:9px; }
      .api-section .proof-foot { padding:18px 14px; }
      .quickstart-guide ol { grid-template-columns:1fr; border-bottom:0; }
      .quickstart-guide li { padding-right:0; }
      .api-section .quickstart-head,
      .api-section .quickstart-body { padding:16px; }
      .api-section .tabs--code { width:100%; overflow-x:auto; flex-wrap:nowrap; }
      .api-section .tabs--code .tab-button { white-space:nowrap; }
      .api-section .code-area { min-height:340px; font-size:11px; }
      .capability-grid,
      .pattern-grid { grid-template-columns:1fr; }
      .capability-card { min-height:170px; }
      .pattern-item { border-right:0; border-bottom:1px solid var(--api-line); }
      .pattern-item:last-child { border-bottom:0; }
      .api-section .tiers-grid,
      .api-section .grid--3 { grid-template-columns:1fr; }
      .api-section .tier { min-height:0; }
      .api-section .faq-item summary { font-size:15px; }
      .final-cta { padding:62px 0; }
      .final-cta h2 { font-size:34px; }
      .final-cta__actions { width:100%; display:grid; grid-template-columns:1fr; }
      .final-cta__actions .button { width:100%; }
      .footer-main { flex-direction:column; gap:24px; }
      .footer-links { justify-content:flex-start; }
      .api-footer .footer-bottom span:first-child { width:100%; margin-right:0; }
    }
    @media (max-width:420px) {
      .landing-header .brand { gap:8px; font-size:14px; }
      .landing-header .beta-badge { display:none; }
      .hero--api h1 { font-size:42px; }
      .api-console pre { font-size:10px; }
      .api-section .section-head h2 { font-size:32px; }
    }

    /* The shared theme stylesheet predates this redesign and uses :root[data-theme]
       selectors. Section IDs keep the new presentation authoritative in both modes. */
    :root[data-theme] body { background:var(--api-page-bg); }
    :root .landing-header .lang-switch__btn { color:var(--api-text-2); border-color:var(--api-line); background:rgba(255,255,255,.035); }
    :root .landing-header .lang-switch__menu { border-color:var(--api-line); background:#111722; }
    #proof, #use-cases, #faq { color:var(--api-text); border-color:var(--api-line); background:#0a0d13; }
    #quickstart-demo, #pricing { color:var(--api-text); border-color:var(--api-line); background:#0d1118; }
    #model .button--primary,
    #proof .button--primary,
    #quickstart-demo .button--primary,
    #use-cases .button--primary,
    #pricing .button--primary,
    #faq .button--primary,
    :root .final-cta .button--primary {
      color:#090c12;
      border-color:#f5f7fb;
      background:#f5f7fb;
      box-shadow:none;
    }
    #model .button--secondary,
    #proof .button--secondary,
    #quickstart-demo .button--secondary,
    #use-cases .button--secondary,
    #pricing .button--secondary,
    #faq .button--secondary,
    :root .final-cta .button--secondary {
      color:var(--api-text);
      border-color:var(--api-line-strong);
      background:transparent;
      box-shadow:none;
    }
    #proof .panel { border-color:var(--api-line); background:#10151f; box-shadow:0 28px 80px rgba(0,0,0,.24); }
    #proof .proof-summary-grid { display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 16px; }
    #proof .proof-summary-card { min-width:0; padding:18px 20px; border:1px solid var(--api-line); border-radius:8px; background:#10151f; color:var(--api-text); }
    #proof .proof-summary-card span { display:block; margin-bottom:8px; color:var(--api-muted); font-size:11px; font-weight:700; text-transform:uppercase; }
    #proof .proof-summary-card strong { display:block; font-size:22px; line-height:1.2; }
    #proof .proof-summary-card p { margin:8px 0 0; color:var(--api-muted); font-size:13px; line-height:1.5; }
    #proof .panel__head { border-color:var(--api-line); background:#121823; }
    #proof .proof-foot { border-color:var(--api-line); background:#0d121b; }
    #proof .dom-table th,
    #proof .dom-table td,
    #proof .dom-table thead th,
    #proof .dom-table .dom-avg td { border-color:var(--api-line); background:transparent; }
    #quickstart-demo .quickstart-card { border-color:var(--api-line); background:#0b0f16; box-shadow:0 28px 80px rgba(0,0,0,.3); }
    #quickstart-demo .quickstart-head { border-color:var(--api-line); background:#111722; }
    #quickstart-demo .quickstart-body { background:#0b0f16; }
    #quickstart-demo .tabs--code { border-color:var(--api-line); background:#111722; }
    #quickstart-demo .tabs--code .tab-button.is-active { color:var(--api-text); background:#202837; box-shadow:none; }
    #pricing .tiers-toggle { border-color:var(--api-line); background:#111722; }
    #pricing .tier-tg.is-active { color:var(--api-text); background:#222a39; box-shadow:none; }
    #pricing .tier,
    #pricing .pricing-card { border-color:var(--api-line); background:#10151f; box-shadow:none; }
    #pricing .tier--featured { border-color:rgba(174,181,255,.38); background:#131927; }
    #pricing .pricing-card.card--dark { background:#141a25; }
    #pricing .cap-details,
    #pricing .table-box { border-color:var(--api-line); background:#10151f; }
    #faq .faq-item { border-color:var(--api-line); background:transparent; box-shadow:none; }

    @media (max-width:720px) {
      .hero--api { padding:26px 0 28px; }
      .hero--api .hero__intro { gap:22px; }
      .hero--api .hero__model { margin-bottom:14px; }
      .hero--api h1 { font-size:42px; }
      .hero--api .hero__lead { margin-top:18px; line-height:1.5; }
      .hero--api .hero__actions { margin-top:22px; }
      .hero--api .hero__proof,
      .hero--api .hero__beta { display:none; }
      .api-console__flow,
      .api-console__response { display:none; }
      .api-console__body { padding:12px; }
      .api-console pre { min-height:0; max-height:160px; overflow:auto; padding:10px; font-size:10px; line-height:1.48; }
      #proof .proof-summary-grid { grid-template-columns:1fr; }
      #proof .proof-summary-card { padding:16px; }
      #proof .proof-summary-card strong { font-size:19px; }
      #proof .proof-actions .button {
        width:100%;
        height:auto;
        min-height:46px;
        padding:10px 14px;
        white-space:normal;
        text-align:center;
        line-height:1.35;
      }
    }

    /* Keep the shared theme control available on the API landing in both modes. */
    .landing-header .theme-toggle { display:inline-grid !important; }

    /* The redesigned API landing used to force its dark presentation after the shared theme rules.  That
       left data-theme="light" on <html> while the page was still visually dark.  Keep the redesign, but map
       every page-level surface back to a real light palette when the shared cross-domain preference is light. */
    :root[data-theme="light"] {
      color-scheme:light;
      --api-page-bg:#f4f6fa;
      --api-surface-1:#ffffff;
      --api-surface-2:#f6f8fb;
      --api-text:#10141d;
      --api-text-2:#475467;
      --api-muted:#667085;
      --api-line:rgba(16,20,29,.11);
      --api-line-strong:rgba(16,20,29,.20);
      --api-accent:#5d62c7;
      --api-blue:#347fc3;
      --api-success:#178a62;
    }
    :root[data-theme="light"] body { background:var(--api-page-bg); }
    :root[data-theme="light"] .landing-header {
      border-bottom-color:var(--api-line);
      background:rgba(244,246,250,.88);
    }
    :root[data-theme="light"] .landing-header .brand__mark {
      color:#fff;
      background:linear-gradient(145deg,#666bd8 0%,#4f86c6 100%);
      box-shadow:0 0 0 1px rgba(16,20,29,.08) inset,0 10px 26px rgba(52,127,195,.18);
    }
    :root[data-theme="light"] .landing-header .beta-badge {
      color:#4f54b5;
      border-color:rgba(93,98,199,.25);
      background:rgba(93,98,199,.08);
    }
    :root[data-theme="light"] .landing-header .nav__links a:not(.button):hover,
    :root[data-theme="light"] .landing-header .button--secondary:hover,
    :root[data-theme="light"] .hero--api .button--secondary:hover,
    :root[data-theme="light"] .api-section .button--secondary:hover,
    :root[data-theme="light"] .final-cta .button--secondary:hover {
      background:rgba(16,20,29,.055);
    }
    :root[data-theme="light"] .landing-header .button--secondary,
    :root[data-theme="light"] .landing-header .theme-toggle,
    :root[data-theme="light"] .landing-header .lang-switch__btn {
      border-color:var(--api-line);
      background:rgba(255,255,255,.72);
    }
    :root[data-theme="light"] .landing-header .lang-switch__menu,
    :root[data-theme="light"] .landing-header .nav__mobile {
      color:var(--api-text-2);
      border-color:var(--api-line);
      background:#fff;
      box-shadow:0 18px 50px rgba(31,42,58,.16);
    }
    :root[data-theme="light"] .landing-header .lang-switch__menu a:hover,
    :root[data-theme="light"] .landing-header .lang-switch__menu li[aria-selected="true"] a {
      color:var(--api-text);
      background:rgba(16,20,29,.055);
    }
    :root[data-theme="light"] .hero--api {
      color:var(--api-text);
      background:
        radial-gradient(900px 580px at 76% -130px,rgba(102,107,216,.12),transparent 66%),
        radial-gradient(760px 520px at -160px 34%,rgba(52,127,195,.08),transparent 68%),
        var(--api-page-bg);
    }
    :root[data-theme="light"] .hero--api::before {
      opacity:.42;
      background-image:linear-gradient(rgba(16,20,29,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,20,29,.04) 1px,transparent 1px);
    }
    :root[data-theme="light"] .hero--api .hero__model {
      color:#555ab8;
      border-color:rgba(93,98,199,.22);
      background:rgba(93,98,199,.075);
    }
    :root[data-theme="light"] .hero--api h1 span,
    :root[data-theme="light"] .hero--api .hero__proof { color:var(--api-muted); }
    :root[data-theme="light"] .hero--api .hero__proof a,
    :root[data-theme="light"] .api-section .section-head code,
    :root[data-theme="light"] .api-section .trust-detail code,
    :root[data-theme="light"] .api-section .faq-item p a { color:#555ab8; border-color:rgba(85,90,184,.28); }
    :root[data-theme="light"] .hero--api .hero__chips li,
    :root[data-theme="light"] .trust-grid { background:rgba(255,255,255,.72); }
    :root[data-theme="light"] .hero--api .button--primary,
    :root[data-theme="light"] .api-section .button--primary,
    :root[data-theme="light"] .final-cta .button--primary,
    :root[data-theme="light"] #model .button--primary,
    :root[data-theme="light"] #proof .button--primary,
    :root[data-theme="light"] #quickstart-demo .button--primary,
    :root[data-theme="light"] #use-cases .button--primary,
    :root[data-theme="light"] #pricing .button--primary,
    :root[data-theme="light"] #faq .button--primary {
      color:#fff;
      border-color:#10141d;
      background:#10141d;
    }
    :root[data-theme="light"] .hero--api .button--primary:hover,
    :root[data-theme="light"] .api-section .button--primary:hover,
    :root[data-theme="light"] .final-cta .button--primary:hover { color:#fff; border-color:#283142; background:#283142; }
    :root[data-theme="light"] .api-console {
      color:var(--api-text);
      border-color:var(--api-line-strong);
      background:#fff;
      box-shadow:0 28px 76px rgba(31,42,58,.15),inset 0 1px rgba(255,255,255,.8);
    }
    :root[data-theme="light"] .api-console__request,
    :root[data-theme="light"] .api-console__response,
    :root[data-theme="light"] .api-console__step { border-color:var(--api-line); background:var(--api-surface-2); }
    :root[data-theme="light"] .api-console pre,
    :root[data-theme="light"] .api-console__response p { color:#344054; }
    :root[data-theme="light"] .api-console__step span { color:#555ab8; }
    :root[data-theme="light"] .trust-strip { border-color:var(--api-line); background:var(--api-page-bg); }
    :root[data-theme="light"] .trust-detail code { color:#555ab8; background:rgba(93,98,199,.08); }
    :root[data-theme="light"] .api-section,
    :root[data-theme="light"] #proof,
    :root[data-theme="light"] #use-cases,
    :root[data-theme="light"] #faq { color:var(--api-text); border-color:var(--api-line); background:var(--api-page-bg); }
    :root[data-theme="light"] .api-section--soft,
    :root[data-theme="light"] #quickstart-demo,
    :root[data-theme="light"] #pricing,
    :root[data-theme="light"] .final-cta { color:var(--api-text); border-color:var(--api-line); background:#eef1f6; }
    :root[data-theme="light"] .api-section .panel,
    :root[data-theme="light"] #proof .panel,
    :root[data-theme="light"] #proof .proof-summary-card,
    :root[data-theme="light"] .api-section .quickstart-card,
    :root[data-theme="light"] #quickstart-demo .quickstart-card,
    :root[data-theme="light"] .api-section .tier,
    :root[data-theme="light"] .api-section .pricing-card,
    :root[data-theme="light"] #pricing .tier,
    :root[data-theme="light"] #pricing .pricing-card,
    :root[data-theme="light"] .api-section .cap-details,
    :root[data-theme="light"] .api-section .table-box,
    :root[data-theme="light"] #pricing .cap-details,
    :root[data-theme="light"] #pricing .table-box {
      color:var(--api-text);
      border-color:var(--api-line);
      background:#fff;
      box-shadow:0 22px 62px rgba(31,42,58,.10);
    }
    :root[data-theme="light"] .api-section .panel__head,
    :root[data-theme="light"] #proof .panel__head,
    :root[data-theme="light"] .api-section .quickstart-head,
    :root[data-theme="light"] #quickstart-demo .quickstart-head,
    :root[data-theme="light"] .api-section .tabs--code,
    :root[data-theme="light"] #quickstart-demo .tabs--code,
    :root[data-theme="light"] .api-section .tiers-toggle,
    :root[data-theme="light"] #pricing .tiers-toggle {
      border-color:var(--api-line);
      background:var(--api-surface-2);
    }
    :root[data-theme="light"] .api-section .quickstart-body,
    :root[data-theme="light"] #quickstart-demo .quickstart-body,
    :root[data-theme="light"] .api-section .proof-foot,
    :root[data-theme="light"] #proof .proof-foot { border-color:var(--api-line); background:#fff; }
    :root[data-theme="light"] .api-section .tabs--code .tab-button.is-active,
    :root[data-theme="light"] #quickstart-demo .tabs--code .tab-button.is-active,
    :root[data-theme="light"] .api-section .tier-tg.is-active,
    :root[data-theme="light"] #pricing .tier-tg.is-active { color:var(--api-text); background:#e2e7ef; }
    :root[data-theme="light"] .api-section .bm-select,
    :root[data-theme="light"] .api-section .bm-select option { color:var(--api-text); background:#fff; }
    :root[data-theme="light"] .api-section .track { background:rgba(16,20,29,.09); }
    :root[data-theme="light"] .api-section .code-area { color:#253044; border-color:var(--api-line); background:#f8fafc; }
    :root[data-theme="light"] .api-section .note { color:#7a5614; border-color:rgba(156,100,25,.22); background:rgba(156,100,25,.07); }
    :root[data-theme="light"] .quickstart-guide li,
    :root[data-theme="light"] .pattern-grid,
    :root[data-theme="light"] .pattern-item { border-color:var(--api-line); }
    :root[data-theme="light"] .quickstart-guide li > span,
    :root[data-theme="light"] .api-section .section-kicker,
    :root[data-theme="light"] .capability-group__label,
    :root[data-theme="light"] .quickstart-guide__label,
    :root[data-theme="light"] .capability-card > span { color:#555ab8; }
    :root[data-theme="light"] .capability-card { border-color:var(--api-line); background:#fff; }
    :root[data-theme="light"] .capability-card:hover { border-color:rgba(85,90,184,.27); background:#f9faff; }
    :root[data-theme="light"] .api-section .tier--featured,
    :root[data-theme="light"] #pricing .tier--featured { border-color:rgba(85,90,184,.30); background:#f7f7ff; }
    :root[data-theme="light"] .api-section .pricing-card.card--dark,
    :root[data-theme="light"] #pricing .pricing-card.card--dark { background:#f7f7ff; }
    :root[data-theme="light"] .api-section .faq-item summary::after { background:#fff; }
    :root[data-theme="light"] .api-footer { color:var(--api-muted); background:#e8ecf2; }
    :root[data-theme="light"] .mobile-cta { color:#fff; background:#10141d; box-shadow:0 18px 50px rgba(31,42,58,.22); }