/* design-v2.css — Axiocairn site design tokens and component skins, V2 (design seat, 2026-10-22).
   Not linked by default. To apply, add <link rel="stylesheet" href="/design-v2.css"> after every other stylesheet.
   Palette: canvas #f6ead7 and rust #af5205 from stripe_brand/brand.css (sampled from the Waffle watercolour),
   ink and the five accents from COPY_HOME §21. Contrast checked light and dark; see DESIGN_SYSTEM_V2.md §2. */

/* ---------- 1 Tokens: warm paper light ---------- */
:root{
  /* surfaces */
  --canvas:#f6ead7;        /* page */
  --paper:#fdf8ef;         /* cards, header, inputs */
  --stone:#eadcc3;         /* recommended plan, quote, table head */
  --ink:#2a2523;           /* text; also primary button fill */
  --muted:#5c524a;         /* secondary text, 6.40 on canvas */
  /* brand */
  --rust:#af5205;          /* fills, borders, focus ring, avatar ring. NOT for text (4.38 on canvas) */
  --rust-text:#8f4304;     /* text-size rust, 5.94 on canvas */
  --rust-press:#7a3903;    /* primary-rust hover/active */
  --moss:#4d7a5e;          /* fill: step numbers, "fit" column tint source */
  --moss-text:#3f6a4f;     /* text moss, 5.22 on canvas */
  --slate:#3f5c78;         /* info text + links */
  --amber:#8a5a12;         /* neutral status text (not on stone) */
  --brick:#9e3a31;         /* risk boundary text, errors */
  /* lines */
  --line:#d9c9ad;          /* decorative dividers only */
  --control-line:#7a6a5a;  /* inputs, secondary button, focus-adjacent: >=3:1 on paper/canvas */
  /* tints */
  --wash-moss:#e3ecde;     /* "fit" column */
  --wash-slate:#e4ebf2;    /* code / copy blocks */
  --on-rust:#ffffff;       /* text on --rust fill, 5.21 */
  --on-moss:#ffffff;       /* text on --moss disc, 4.93 */
  --on-ink:#f6ead7;        /* text on --ink fill, 12.74 */
  --shadow:0 1px 0 rgb(42 37 35/.06),0 8px 24px -12px rgb(42 37 35/.25);
  --avatar:url(/waffle-avatar.png);
  color-scheme:light;

  /* type */
  --font-display:'Songti TC','Noto Serif TC',Georgia,'Times New Roman',serif;
  --font-body:'PingFang TC','Noto Sans TC',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-num:ui-monospace,'SF Mono',Menlo,monospace;   /* numbers and copy blocks only, never labels */
  --fs-0:.875rem;  /* 14 small print, min for any text */
  --fs-1:1rem;     /* 16 body on phones */
  --fs-2:1.125rem; /* 18 lead / body desktop */
  --fs-3:clamp(1.125rem,1rem + .6vw,1.375rem); /* 22 h3 */
  --fs-4:clamp(1.625rem,1.2rem + 1.8vw,2rem);    /* 26–32 h2 */
  --fs-5:clamp(2rem,1.4rem + 2.8vw,3.25rem);     /* 32–52 h1 */
  --lh-body:1.7; --lh-cjk:1.85; --lh-head:1.2;

  /* space (4-based) */
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;
  --section-y:var(--s-8);
  --gutter:1.25rem;
  --content:72rem;        /* 1152 */
  --measure-en:75ch;
  --measure-zh:40em;      /* CJK: 40 full-width characters */
  --touch:44px;

  /* radius */
  --r-s:.375rem;--r-m:.75rem;--r-l:1.25rem;--r-pill:999px;

  /* motion */
  --t-fast:120ms;--t-base:180ms;--ease:cubic-bezier(.2,.7,.2,1);

  /* ---- aliases so the existing stylesheets pick up v2 values ---- */
  /* site.css */ --wash:var(--stone);--brand:var(--rust-text);
  /* shared-tokens.css (static pages) */ --bg:var(--canvas);--sf:var(--paper);--mu:var(--muted);--ln:var(--line);--ln2:var(--control-line);--ac:var(--rust-text);--ac2:var(--slate);--f:var(--font-body);--content-width:1152px;
  /* design-func.css / design-data.css */ --surface:var(--paper);--text:var(--ink);--accent:var(--rust);--space-4:var(--s-4);
  /* theme-cairn.css names */ --paper-c:var(--canvas);--ink-c:var(--ink);--mu-c:var(--muted);--line-c:var(--line);--hover:var(--rust-press);--panel:var(--ink);--panel-tx:var(--on-ink);--panel-mu:#d9cbb4;
}

/* ---------- 1b B terminal default; explicit light retains A warm paper ---------- */
:root:not([data-theme=light]){
  --canvas:#121010;--paper:#231e1c;--stone:#2e2724;--ink:#f3ead9;--muted:#c4b5a3;
  --rust:#e08a4a;--rust-text:#e08a4a;--rust-press:#f0a46c;
  --moss:#7fb08f;--moss-text:#8dbb9b;--slate:#9bbad8;--amber:#e8a850;--brick:#ee7a6c;
  --line:#3a312c;--control-line:#8c7d6d;
  --wash-moss:#26302a;--wash-slate:#242c34;
  --on-rust:#1e1a18;--on-ink:#1e1a18;--on-moss:#1e1a18;
  --shadow:0 1px 0 rgb(0 0 0/.3),0 8px 24px -12px rgb(0 0 0/.6);
  --avatar:url(/waffle-avatar-dark.png);
  --panel:#1b1716;--panel-tx:var(--ink);--panel-mu:var(--muted);
  color-scheme:dark;
}

/* ---------- 2 Base ---------- */
*,*::before,*::after{box-sizing:border-box;min-width:0;flex-shrink:1}
body{overflow-wrap:anywhere}
:where(.card,.plan){container-type:inline-size}
@container(max-width:20rem){
  :where(.card,.plan) .price{font-size:clamp(1.5rem,10cqi,2.5rem)}
  :where(.card,.plan) .actions{flex-direction:column;align-items:stretch}
}
[data-scroll]{overflow-x:auto}

html{scroll-padding-top:5rem}
body{background:var(--canvas);color:var(--ink);font:var(--fs-1)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased}
@media(min-width:768px){body{font-size:var(--fs-2)}}
:lang(zh),:lang(zh-Hant),:lang(zh-Hans){line-height:var(--lh-cjk);line-break:strict;word-break:normal;overflow-wrap:anywhere;text-autospace:normal}
p,li,dd,td,th,figcaption{max-inline-size:var(--measure-en)}
:lang(zh) p,:lang(zh) li,:lang(zh) dd,p:lang(zh),li:lang(zh){max-inline-size:var(--measure-zh)}
p,li,dd,td,.lead,.lede,.note{ text-wrap:pretty }
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-head);letter-spacing:-.01em;text-wrap:balance;margin:0 0 var(--s-4)}
h1{font-size:var(--fs-5);max-inline-size:18ch}h2{font-size:var(--fs-4);max-inline-size:24ch}h3{font-size:var(--fs-3);font-family:var(--font-body);font-weight:600}
h1:lang(zh),h2:lang(zh){max-inline-size:14em}
p{margin:0 0 var(--s-4)}
a{color:var(--slate);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
.num,.price,td.num,[data-num]{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.small,.zh,figcaption,caption{font-size:var(--fs-0)}
/* template chrome we retire: tracked all-caps eyebrows and mono labels become plain sentence-case kickers */
.eyebrow,.label,.number{font:600 var(--fs-0)/1.5 var(--font-body);letter-spacing:0;text-transform:none;color:var(--rust-text);margin-bottom:var(--s-3)}
.eyebrow::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.5em;border-radius:50%;background:var(--rust);vertical-align:-.02em}
.wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
@media(min-width:768px){.wrap{padding-inline:var(--s-6)}}
section{padding-block:var(--section-y);border-bottom:1px solid var(--line)}
@media(max-width:767px){:root{--section-y:var(--s-7)}}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:var(--r-s)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- 3 Header / nav ---------- */
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{min-height:4rem;display:flex;align-items:center;gap:var(--s-4);padding-block:var(--s-2)}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);min-height:var(--touch);font:600 1.25rem/1 var(--font-display);letter-spacing:0;text-decoration:none;color:var(--ink)}
.brand b{display:none}
.brand::before{content:""/"";flex:none;width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid var(--rust);background:var(--avatar) center/cover no-repeat}
nav a{font-size:var(--fs-0);font-weight:500;color:var(--ink);text-decoration:none;padding:var(--s-2) var(--s-3);border-radius:var(--r-s)}
nav a:hover{background:var(--stone)}
nav [aria-current=page]{box-shadow:inset 0 -2px 0 var(--rust);font-weight:600}
/* language dropdown: structure from design-func.css; v2 only skins it */
.language-menu summary{list-style:none;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--touch);padding:var(--s-2) var(--s-3);border:1px solid var(--control-line);border-radius:var(--r-pill);font-size:var(--fs-0);cursor:pointer}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.15em)}
.language-menu[open] summary::after{transform:rotate(225deg) translateY(-.1em)}
.language-menu[open]>:not(summary){position:absolute;right:0;top:calc(100% + .25rem);min-width:11rem;padding:var(--s-2);background:var(--paper);border:1px solid var(--control-line);border-radius:var(--r-m);box-shadow:var(--shadow)}
.language-menu[open] a{display:flex;min-height:var(--touch);align-items:center;padding:var(--s-2) var(--s-3);border-radius:var(--r-s);text-decoration:none;color:var(--ink)}
.language-menu[open] a:hover,.language-menu[open] a[aria-current]{background:var(--stone)}
.preview{background:var(--stone);color:var(--muted);font-size:var(--fs-0);border:0}

/* ---------- 4 Buttons ---------- */
button,.button,a.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:3rem;padding:0 var(--s-5);border:1px solid var(--control-line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font:600 var(--fs-1)/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast)}
button:hover,.button:hover{background:var(--stone)}
button:active,.button:active{transform:translateY(1px)}
.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.primary:hover{background:var(--rust);color:var(--on-rust);border-color:var(--rust)}
.button-rust{background:var(--rust);color:var(--on-rust);border-color:var(--rust)}
.button-rust:hover{background:var(--rust-press)}
.button-quiet{border-color:transparent;background:transparent;color:var(--slate);text-decoration:underline;text-underline-offset:.2em}
button[disabled],.button[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block:var(--s-5)}

/* ---------- 5 Cards, step cards, hero ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5);min-width:0}
.card p{color:var(--muted)}.card>:last-child{margin-bottom:0}
.card.is-link:hover{border-color:var(--control-line);box-shadow:var(--shadow)}
.grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:767px){.grid{grid-template-columns:minmax(0,1fr)}}
.steps-v2{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4)}
@media(min-width:768px){.steps-v2{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps-v2>li{counter-increment:step;position:relative;padding:var(--s-5) var(--s-5) var(--s-5) 4.25rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);margin:0}
.steps-v2>li::before{content:counter(step);position:absolute;left:var(--s-5);top:var(--s-5);width:2rem;height:2rem;border-radius:50%;background:var(--moss);color:var(--on-moss);font:600 1rem/2rem var(--font-num);text-align:center}
.hero{display:grid;gap:var(--s-6);align-items:center;padding-top:var(--s-7);border:0}
@media(min-width:1024px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.hero .lead{font-size:var(--fs-2);color:var(--muted)}
.art{margin:0;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--stone)}
.art img{display:block;width:100%;height:auto;border-radius:0}
.art figcaption{padding:var(--s-3) var(--s-4);font:var(--fs-0)/1.5 var(--font-body);letter-spacing:0;color:var(--muted)}
/* signature: cairn (stacked stones) as plan level / progress mark; 1–3 stones, no text inside */
.cairn{display:inline-flex;flex-direction:column-reverse;align-items:center;gap:2px;vertical-align:middle}
.cairn i{display:block;height:.5rem;border-radius:50%;background:var(--rust)}
.cairn i:nth-child(1){width:1.6rem}.cairn i:nth-child(2){width:1.2rem}.cairn i:nth-child(3){width:.8rem;background:var(--moss)}
.note,.risk{background:var(--stone);border:0;border-left:4px solid var(--rust);border-radius:var(--r-m);padding:var(--s-5)}
.risk h2{font-size:var(--fs-3)}

/* ---------- 6 Plan cards + billing toggle ---------- */
.plans-v2{display:grid;gap:var(--s-4);align-items:stretch}
@media(min-width:768px){.plans-v2{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5);display:grid;gap:var(--s-3)}
.plan.featured{background:var(--stone);border-color:var(--rust);box-shadow:inset 0 3px 0 var(--rust)}
.plan .price{font:600 2.5rem/1 var(--font-num);margin:var(--s-2) 0}
.plan .price small{font:var(--fs-0)/1 var(--font-body);color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.plan li{padding-left:1.4em;position:relative;color:var(--ink)}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;border-radius:50%;background:var(--moss)}
.plan .button{margin-top:var(--s-3)}
/* billing period: two radios, labels are the control; the chosen label is ink-filled */
.billing{display:inline-flex;padding:.25rem;background:var(--stone);border-radius:var(--r-pill);gap:.25rem}
.billing input{position:absolute;opacity:0;width:1px;height:1px}
.billing label{min-height:2.5rem;padding:0 var(--s-4);display:inline-flex;align-items:center;border-radius:var(--r-pill);cursor:pointer;font-size:var(--fs-0);font-weight:600}
.billing input:checked+label{background:var(--ink);color:var(--on-ink)}
.billing input:focus-visible+label{outline:3px solid var(--rust);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.billing label{transition:background var(--t-fast)}}

/* ---------- 7 Comparison table ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;font-size:var(--fs-0)}
th,td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);text-align:start;vertical-align:top;overflow-wrap:anywhere}
thead th{background:var(--stone);font-weight:600}
tbody tr:last-child td{border-bottom:0}
.compare td:nth-child(n+2){font-variant-numeric:tabular-nums}
.compare .yes::before{content:"✓ "/"";color:var(--moss-text)}.compare .no{color:var(--muted)}
@media(max-width:767px){
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare,.compare tbody,.compare tr,.compare td{display:block}
  .compare tr{border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:var(--s-3);background:var(--paper)}
  .compare td{border:0;padding:var(--s-2) var(--s-4)}
  .compare td[data-col]::before{content:attr(data-col) " ";color:var(--muted)}
  .compare td:first-child{font-weight:600;background:var(--stone)}
}

/* ---------- 8 FAQ (details/summary) ---------- */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--touch);padding:var(--s-4) 0;font-weight:600;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"/"";flex:none;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--control-line);display:grid;place-items:center;font:400 1.25rem/1 var(--font-num)}
details[open] summary::after{content:"–"/"";background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
details>:not(summary){padding-bottom:var(--s-4);color:var(--muted)}
@media(prefers-reduced-motion:no-preference){details[open]>:not(summary){animation:v2-open var(--t-base) var(--ease)}}
@keyframes v2-open{from{opacity:0;transform:translateY(-.25rem)}}

/* ---------- 9 Report sample cards (horizontal rail; structure from design-func.css .sample-cards and site .card-rail) ---------- */
.sample-cards,.card-rail{gap:var(--s-4);padding:var(--s-1) var(--s-1) var(--s-4);scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--control-line) transparent}
.sample-cards>.card,.card-rail>.card{scroll-snap-align:start;border-top:4px solid var(--slate)}
.card-rail>.card[data-kind=premarket],.sample-cards>.card[data-kind=premarket]{border-top-color:var(--amber)}
.card-rail>.card[data-kind=close],.sample-cards>.card[data-kind=close]{border-top-color:var(--rust)}
.card-rail>.card[data-kind=house],.sample-cards>.card[data-kind=house]{border-top-color:var(--ink)}
.card-rail>.card[data-kind=stock],.sample-cards>.card[data-kind=stock]{border-top-color:var(--moss)}
.card-rail dt,.sample-cards dt{font-size:var(--fs-0);color:var(--muted)}
.card-rail dd,.sample-cards dd{margin:0 0 var(--s-2)}
.card-rail time,.sample-cards time{font-family:var(--font-num);font-size:var(--fs-0)}
@media(prefers-reduced-motion:reduce){.sample-cards,.card-rail{scroll-snap-type:none}}

/* ---------- 10 Archive: stats + filters + list (structure from design-data.css) ---------- */
.archive-stats{gap:var(--s-4)}
.archive-stats article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4) var(--s-5)}
.archive-stats h2{font:500 var(--fs-0)/1.5 var(--font-body);color:var(--muted);margin:0}
.archive-stats p{font:600 1.75rem/1.2 var(--font-num);font-variant-numeric:tabular-nums;margin:var(--s-1) 0 0;color:var(--ink)}
.archive-filters{gap:var(--s-3) var(--s-4);padding:var(--s-4);background:var(--stone);border-radius:var(--r-m)}
.archive-filters label{font-size:var(--fs-0);font-weight:600}
.archive-filters input,.archive-filters select{min-height:var(--touch);padding:0 var(--s-3);border:1px solid var(--control-line);border-radius:var(--r-s);background:var(--paper);color:var(--ink);font:inherit}
.archive-list li{max-inline-size:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);align-items:baseline;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.archive-list time{font-family:var(--font-num);font-size:var(--fs-0);color:var(--muted)}
.archive-list a{color:var(--ink);font-weight:600}

/* ---------- 11 Delay-records table card ---------- */
.delay-table-wrap{overflow:visible;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-2)}
.delay-table{border:0;border-radius:0}
.delay-table th,.delay-table td{padding:var(--s-3)}
.delay-table td:first-child{font-family:var(--font-num);white-space:normal}
.delay-table small{color:var(--muted);font-size:var(--fs-0)}
.promo-band.design-delay{border-radius:var(--r-l)}
.design-delay .delay-explanation{font-size:var(--fs-0)}

/* ---------- 12 Status, inputs, code ---------- */
.status-ok{color:var(--moss-text)}.status-warn{color:var(--amber)}.status-risk{color:var(--brick)}.status-info{color:var(--slate)}
.status-ok::before,.status-warn::before,.status-risk::before{content:"● ";font-size:.7em;vertical-align:.1em}
input,select,textarea{border:1px solid var(--control-line);border-radius:var(--r-s);background:var(--paper);color:var(--ink);padding:var(--s-3);font:inherit}
pre,code,kbd{font-family:var(--font-num)}
pre{background:var(--wash-slate);color:var(--ink);padding:var(--s-4);border-radius:var(--r-m);overflow-x:auto;font-size:.9375rem;line-height:1.6}
.demo{background:var(--panel);color:var(--panel-tx);border-radius:var(--r-l);border:0}
.demo p{color:var(--panel-tx)}.demo .label,.demo .zh,.demo dt{color:var(--panel-mu)}
.demo select{color:var(--ink)}.demo article{border-color:color-mix(in srgb,var(--panel-tx) 30%,transparent)}.demo :focus-visible{outline-color:var(--panel-mu)}

/* ---------- 13 Footer ---------- */
footer{padding-block:var(--s-7) var(--s-6);color:var(--muted);font-size:var(--fs-0);border-top:1px solid var(--line)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-bottom:var(--s-5)}
.footer-links a{color:var(--ink);text-decoration:none;min-height:var(--touch);display:inline-flex;align-items:center}
.footer-links a:hover{text-decoration:underline}
footer .risk{margin-top:var(--s-5)}

/* Shared containment: wrap content rather than clipping or introducing a rail. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;line-break:strict;overflow-wrap:anywhere}
:where(main,section,article,aside,nav,header,footer,div,figure,details,fieldset,ul,ol,li,dl,dd,dt,a,button,label,summary,span){min-width:0}
:where(img,svg,video,iframe,input,select,textarea){max-width:100%}
button,.button,.btn,a,summary,.badge,.label,.nowrap,.status-ok,.status-warn{white-space:normal;overflow-wrap:anywhere}
:where(button,.button,.btn){height:auto;max-width:100%;padding-block:.7rem;line-height:1.4;text-align:center}
:where(pre,code){white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
pre{overflow-x:visible}
.table-scroll,.sample-cards,.card-rail,.rail{overflow:visible;max-width:100%;scroll-snap-type:none}
.table-scroll table{min-width:0;table-layout:fixed}
.table-scroll :where(th,td,p,a){overflow-wrap:anywhere;word-break:normal}
.sample-cards,.card-rail,.rail{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--s-4)}
:where(.sample-cards,.card-rail)>.card{flex:initial;max-width:100%}
.sample-cards>.card{display:flex;flex-direction:column;align-items:stretch}
.sample-cards>.card>:is(h3,p){width:100%;white-space:normal;overflow-wrap:normal;word-break:normal}
.v2-client-section code{display:block;max-width:100%;white-space:nowrap;overflow-x:auto;word-break:normal}
.billing-switch{max-width:100%;flex-wrap:wrap}
.billing-switch label{flex-wrap:wrap}
.brand{white-space:normal;flex-shrink:1;line-height:1.2}
header .nav{flex-wrap:nowrap}
header .nav-menu,header .header-language{padding:0;border:0}
header .nav-menu>summary::after,header .header-language>summary::after{display:none}
header .nav-menu nav{flex-wrap:wrap}
@media(min-width:1101px){
  header .nav-menu>nav{padding-bottom:0}
  header .primary{padding:6px 10px}
}
header .header-language>summary{font-size:var(--fs-0)}
header .nav-account{color:var(--ink);text-decoration:none}
header .header-language[open]>a{position:relative;color:var(--ink);max-width:100%}
.language-menu[open]>a{position:relative;right:auto;top:auto;min-width:0;box-shadow:none}
@media(max-width:1100px){
  header .nav{display:grid;grid-template-columns:minmax(0,1fr) auto 4rem}
  header .nav-menu nav{flex-direction:column;align-items:stretch;overflow-y:auto}
  header .nav-menu nav a{flex-shrink:1;white-space:normal}
  header .brand{font-size:clamp(1rem,5vw,1.25rem);gap:.5rem}
  header .brand::before{width:1.8rem;height:1.8rem}
  header .primary{max-width:100%;white-space:nowrap}
}
@media(max-width:760px){.hero,.demo{grid-template-columns:minmax(0,1fr)}}
/* All plan cards share rows; featured treatment never changes dimensions. */
:where(.plan-grid,.plans-v2,.plans){align-items:stretch;grid-auto-rows:1fr}
.plan-grid>.card,.plans-v2>.plan,.plans>.plan{display:flex;flex-direction:column;gap:.75rem;margin:0}
.plan-grid>.card>:where(h2,h3,p,dl),.plan :where(h2,h3,p,ul){margin-block:0}
.plan-grid>.card>dl,.plan>ul,.plan-copy{flex:1}
.plan-grid>.card>:where(a,button):last-child,.plan>:where(a,button):last-child{margin-top:auto}
.plan-grid>.card.featured{border-width:1px;border-color:var(--rust);box-shadow:inset 0 3px 0 var(--rust)}
.plan-grid p[data-price-interval]{font:600 clamp(1.4rem,2.4vw,2rem)/1.4 var(--font-num)}
@supports(grid-template-rows:subgrid){
  @media(min-width:768px){
    .plan-grid{grid-auto-rows:auto}
    /* Size containment prevents the nested subgrid from sharing content heights. */
    .plan-grid>.card{container-type:normal;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 13}
    .plan-grid>.card>:is(h2,h3){grid-row:1}
    .plan-grid>.card>p:not([data-price-interval]):not(.v2-plan-value){grid-row:3}
    .plan-grid>.card>.v2-plan-value{grid-row:2}
    .plan-grid>.card>.v2-plan-actions{grid-row:13}
    .plan-grid>.card>[data-price-interval]{grid-row:4}
    .plan-grid>.card>dl{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:5/span 8}
    .plan-grid>.card>:where(a,button){grid-row:13}
  }
}
/* B report surface and A illustration system, scoped to the redesign. */
.design-home{--grid:rgb(243 234 217/.045);--glow:rgb(224 138 74/.16)}
[data-theme=light] .design-home{--grid:rgb(42 37 35/.05);--glow:rgb(175 82 5/.1)}
.design-home .hero{display:block;background:radial-gradient(60% 50% at 75% 20%,var(--glow),transparent 70%),linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/32px 100%}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.sec-head p,.design-home .lead{color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--control-line);border-radius:var(--r-pill);padding:.7rem 1.4rem;color:var(--ink);background:var(--paper);font-weight:600;text-decoration:none}
.btn.primary{background:var(--rust);border-color:var(--rust);color:var(--on-rust)}
.btn.primary:hover{background:var(--rust-press)}
.ai{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.ai-label{color:var(--muted);margin-bottom:.75rem}
.ai-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;max-width:34rem}
.ai-btn{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-height:52px;padding:.5rem .875rem;border-radius:.875rem;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.4}
.ai-btn:hover{border-color:var(--rust)}
.ai-dot,.ico{display:grid;place-items:center;flex-shrink:0;width:2rem;height:2rem;border-radius:.5rem;background:var(--stone);color:var(--rust)}
.ai-state{font-weight:400;color:var(--amber);font-size:var(--fs-0);width:100%}
.term{background:var(--panel);color:var(--panel-tx);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);container-type:inline-size}
.term-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.625rem .875rem;border-bottom:1px solid var(--line);color:var(--muted)}
.term-bar i{width:.625rem;height:.625rem;border-radius:50%;background:var(--line)}
.badge{padding:.125rem .625rem;border:1px solid var(--amber);border-radius:var(--r-pill);color:var(--amber);font-size:var(--fs-0)}
.term-body{padding:1.125rem;display:grid;gap:1rem}
.chart{grid-column:1/-1;background:var(--canvas);border:1px solid var(--line);border-radius:.75rem;padding:.75rem}
.chart svg{display:block;width:100%;height:auto}
.chart .px{fill:none;stroke:var(--ink);stroke-width:2}
.chart .risk{fill:none;stroke:var(--brick);stroke-dasharray:6 5;stroke-width:1.5}
.chart .band{fill:var(--moss);opacity:.12}
.fields{margin:0;display:grid;gap:.625rem}
.fields>div{padding:.625rem .75rem;border-radius:.625rem;background:var(--paper);border:1px solid var(--line)}
.fields dt{color:var(--muted)}.fields dd{margin:0;font-weight:600}
.tk-head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline}
.tk-head b{font:600 1.75rem/1.3 var(--font-num)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;color:var(--muted)}
.hero-art{display:block;width:100%;height:auto;border-radius:1rem;margin-top:1.5rem}
.status-grid,.caps,.fit{display:grid;gap:1rem}
.st{list-style:none;padding:0;margin:0}
.st li{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.75rem 0;border-top:1px solid var(--line)}
.st-name{font-weight:600}.st-exp,.st-act{color:var(--muted)}
.design-home ol.steps{display:grid;gap:1rem;counter-reset:step;list-style:none;padding:0}
.design-home ol.steps>li{counter-increment:step;background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:1.5rem;margin:0}
.design-home ol.steps>li::before{content:"0" counter(step);display:block;margin-bottom:.5rem;color:var(--rust);font-family:var(--font-num)}
.rcard,.cap{background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.rcard{border-top:4px solid var(--rust)}
.r-kind{font-weight:600;font-size:1.25rem}.r-desc,.r-count,.cap p{color:var(--muted)}
.r-count{margin-top:auto;white-space:normal;font-size:var(--fs-0)}
.waffle{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1rem}
.waffle .av{width:96px;height:96px;flex-shrink:0;border-radius:50%;background:var(--avatar) center/cover;box-shadow:0 0 0 3px var(--rust)}
.waffle p{flex:1 1 16rem}
.fit .yes h3{color:var(--moss-text)}.fit .no h3{color:var(--brick)}
@container(max-width:340px){.term-body{padding:.75rem}.term-bar{font-size:var(--fs-0)}.fields{grid-template-columns:minmax(0,1fr)}}
@media(min-width:768px){.caps,.fit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.status-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.design-home ol.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

.design-home .waffle>img{width:min(100%,220px);height:auto;flex:0 1 220px;border-radius:1rem}
.design-home .waffle>div{flex:1 1 16rem}

.v2-plan-recommended{border:1px solid var(--rust);box-shadow:inset 0 3px 0 var(--rust)}
.v2-plan-actions{margin-top:auto;display:flex;flex-direction:column;gap:.75rem}
.v2-plan-actions>.button{width:100%;margin-top:0}

/* Page surfaces retain the account visibility and report-loading contracts. */
.v2-page{padding-block:var(--s-6)}
.v2-page>.v2-section{padding-block:var(--s-7)}
.v2-page-heading h1{max-inline-size:24ch}
.v2-sample-surface{background:var(--panel);color:var(--panel-tx);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5)}
.v2-report-desk{max-width:var(--content);margin-inline:auto}
.v2-report-desk>.v2-desk-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5);margin-block:var(--s-4)}
.v2-desk-panel dl{margin:0;display:grid;gap:var(--s-2)}
.v2-desk-panel dt{color:var(--muted)}
.v2-desk-panel dd{margin:0 0 var(--s-3)}
@media(max-width:767px){.ai-row{grid-template-columns:minmax(0,1fr)}}

/* Cairn section markers from the final B composition. */
.design-home .sec-head h2{display:flex;align-items:flex-end;gap:.75rem}
.design-home .sec-head h2::before{content:"";flex:0 0 22px;width:22px;height:26px;background:radial-gradient(ellipse 50% 22% at 50% 88%,var(--rust) 98%,transparent),radial-gradient(ellipse 38% 18% at 50% 56%,var(--moss) 98%,transparent),radial-gradient(ellipse 26% 15% at 50% 26%,var(--slate) 98%,transparent)}

.report-tape{background:var(--panel);border-bottom:1px solid var(--line);padding-block:var(--s-3);font-size:var(--fs-0)}
.report-tape .st{display:grid;gap:var(--s-3)}
.report-tape .st li{padding-block:var(--s-2);gap:var(--s-2)}
@media(min-width:1024px){.report-tape .st{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Dark report panels keep their own palette when the page switches to warm paper. */
:where(.report-tape,.term,.v2-sample-surface){
  --canvas:#121010;--paper:#231e1c;--stone:#2e2724;--ink:#f3ead9;--muted:#c4b5a3;
  --rust:#e08a4a;--rust-text:#e08a4a;--moss:#7fb08f;--slate:#9bbad8;--amber:#e8a850;--brick:#ee7a6c;
  --line:#3a312c;--panel:#1b1716;--panel-tx:#f3ead9;--panel-mu:#c4b5a3;
  --on-rust:#1e1a18;--on-ink:#1e1a18;
  color:var(--ink);color-scheme:dark;
}
:where(.report-tape,.term,.v2-sample-surface) :where(p,li,h1,h2,h3){color:var(--ink)}
:where(.report-tape,.term,.v2-sample-surface) :where(.small,.lead,.term-bar,.term-note,.st-exp,.st-act){color:var(--muted)}
:where(.report-tape,.term,.v2-sample-surface) a:not(.button):not(.btn){color:var(--slate)}
/* Stack the complete fields; no clipping or horizontal scrolling on phones. */
@media(max-width:600px){
  :is(.table-scroll,.delay-table-wrap) table{display:block;width:100%;min-width:0;table-layout:auto}
  :is(.table-scroll,.delay-table-wrap) :is(caption,thead,tbody){display:block;width:100%}
  :is(.table-scroll,.delay-table-wrap) tr{display:grid;grid-template-columns:minmax(0,1fr);width:100%;border:1px solid var(--line);border-radius:var(--r-m);margin-block:var(--s-3);padding:var(--s-2)}
  :is(.table-scroll,.delay-table-wrap) :is(th,td){display:block;width:auto;max-inline-size:none;padding:var(--s-3);white-space:normal;overflow-wrap:anywhere;word-break:normal;text-align:start}
  :is(.table-scroll,.delay-table-wrap) td[data-label]::before{content:attr(data-label);display:block;color:var(--muted);font-weight:600;margin-bottom:var(--s-1)}
}

/* Final composition: agent connections lead, art stays decorative. */
.design-home .ai{margin:1.5rem 0;padding:1.125rem;border:1px solid var(--rust);border-radius:var(--r-l);background:var(--paper)}
.design-home .ai-label{color:var(--ink);font-weight:600;font-size:1.25rem}
.cap-icon{display:block;width:56px;height:56px}
.video-block{display:grid;gap:var(--s-5);align-items:center}
.video-frame{position:relative;aspect-ratio:16/9;border:1px dashed var(--control-line);border-radius:var(--r-l);background:var(--paper);display:grid;place-items:center}
.video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.35}
.video-frame span{position:relative;padding:.375rem .875rem;background:var(--paper);color:var(--ink);border:1px solid var(--amber);border-radius:var(--r-pill)}
@media(min-width:768px){.video-block{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.design-home .caps>.cap:last-child{grid-column:1/-1}}

.sample-thumb{display:block;width:100%;height:auto;border-radius:var(--r-m)}

/* V3 minimum typography; keep longer prose free to wrap on narrow screens. */
:is(.tag,.label,.badge,.nowrap,.nb,.num,[data-num],button,.button,.btn){white-space:nowrap;overflow-wrap:normal}
:is(button,.button,.btn){padding-inline:clamp(.5rem,2vw,1.5rem)}
/* Long page titles use the available column before wrapping. */
@media(min-width:1024px){
  :is(.v2-page-heading,.page-head) h1{max-inline-size:none;font-size:clamp(1.5rem,2.5vw,2.25rem)}
  .design-home .hero h1{max-inline-size:none;font-size:clamp(1.5rem,2.3vw,2rem)}
  .sec-head h2{max-inline-size:none;font-size:clamp(1.375rem,2vw,2rem)}
}
:root{--up:#1e754a;--down:#c0392b}
:root:not([data-theme=light]),:where(.report-tape,.term,.v2-sample-surface){--up:#8dbb9b;--down:#ee7a6c}
.up{color:var(--up)}.dn,.down{color:var(--down)}

.keep-together{display:inline-block;white-space:nowrap;max-inline-size:100%}
.hero-grid>figure{margin:0;max-width:100%}
.hero-grid figcaption.badge{white-space:normal;overflow-wrap:anywhere;max-inline-size:100%}
@media(min-width:1024px){[data-history-coverage]>h2{max-inline-size:none}}

[data-theme=light] .design-home .term .badge{color:var(--amber)}

#prompts :is(summary,p){text-wrap:pretty}

/* Delay disclosures are sentences, not short labels. */
p.tag{white-space:normal}
