/* assets/app.css: the console and the public pages, one system. A light enterprise console: white canvas, cool slate
   neutrals, one blue accent (the accent product.json declares) for actions, links, the active rail item and the primary
   chart series, and reserved status colours (green, amber, red) that never decorate. The face is self-hosted from
   assets/ so a console page makes no third-party request. Tokens in :root, the console defaults next, the identity
   layer at the end overriding them by order.
   Widths: the rail shows from 1000 px, the bottom tab bar below it; dialogs become full-height sheets under 640 px. */
@font-face{font-family:"Inter Tight";font-weight:300 700;font-style:normal;font-display:swap;src:url("/assets/inter-tight.woff2") format("woff2")}
:root{--primary:#215db0;--primary-pressed:#184a90;--primary-soft:rgba(33,93,176,.1);--accent:#215db0;--accent-soft:rgba(33,93,176,.1);--on-primary:#fff;--ink:#111418;--ink-soft:#404854;--ink-muted:#5f6b7c;--ink-faint:#8f99a8;--ink-low:#8f99a8;--canvas:#fff;--page:#f6f7f9;--canvas-soft:#f6f7f9;--surface:#f6f7f9;--surface-2:#edeff2;--surface-elevated:#fff;--field:#fff;--paper:#fff;--paper-soft:#f6f7f9;--paper-ink:#111418;--hairline:#dce0e5;--hairline-strong:#c5cbd3;--rule:#8f99a8;--ghost:#edeff2;--ghost-strong:#dce0e5;--ring:0 0 0 1px rgba(17,20,24,.08),0 1px 2px rgba(17,20,24,.04);--good:#067647;--good-soft:#ecfdf3;--warn:#b54708;--warn-soft:#fffaeb;--bad:#b42318;--bad-soft:#fef3f2;--bad-faint:#fef3f2;--info:#175cd3;--info-soft:#eff8ff;--support-success:#24a148;--support-warning:#f1c21b;--support-error:#da1e28;
--r-sm:4px;--r-md:6px;--r-lg:8px;--r-full:9999px;--s-xs:4px;--s-sm:8px;--s-md:16px;--s-lg:24px;--s-xl:30px;--s-xxl:40px;--gutter:48px;--rail:264px;--wrap:1040px;
--track:0;--track-head:-.01em;--track-num:0;--track-big:-1px;
--font:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-sans:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;--font-display:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--font);letter-spacing:var(--track);min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--primary)}
h1,h2,h3{font-weight:500;line-height:1.2;margin:0 0 var(--s-sm);letter-spacing:var(--track-head)}
h1{font-size:28px}h2{font-size:20px}h3{font-size:16px}
p{margin:0 0 var(--s-md)}
p.lead{color:var(--ink-muted);font-size:16px;max-width:60ch}
code,kbd,pre,.mono{font-family:var(--mono);font-size:13px}
code{background:var(--canvas-soft);padding:1px 5px;border-radius:4px}
pre{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-md);overflow-x:auto;margin:0 0 var(--s-md);line-height:1.45;white-space:pre}
pre code{background:none;padding:0}
hr{border:0;border-top:1px solid var(--hairline);margin:var(--s-xl) 0}
img,svg{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
.src{color:var(--ink-muted);font-size:12.5px}
.dash{color:var(--ink-faint)}
.bad{color:var(--bad)}.good{color:var(--good)}.muted{color:var(--ink-muted)}
.sr{position:absolute;left:-9999px}
/* buttons */
/* The brand's action control: mono, uppercase, 11px, squared to 6px. Nav and brand links stay sans. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 var(--s-lg);border-radius:var(--r-sm);border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--track)}
.btn:hover{background:#292524;color:#fff}
.btn.sm{min-height:32px;padding:0 var(--s-md);font-size:10px}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-secondary:hover{background:var(--canvas-soft);color:var(--ink);border-color:var(--ink)}
/* The brand's primary action is the near-black, not the accent: the accent belongs to links, the active rail
   item and chart fills, and a filled accent button would outrank the page's own headings. */
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{background:#292524;color:#fff}
.btn-danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn-danger:hover{background:var(--bad);color:#fff}
.btn[disabled],.btn[aria-busy=true]{opacity:.5;cursor:default;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-sm);align-items:center}
/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:var(--r-full);border:1px solid var(--good);color:var(--good);font-size:12.5px;line-height:1.4;white-space:nowrap}
.badge.off{border-color:var(--rule);color:var(--ink-muted)}
.badge.warn{border-color:var(--warn);color:var(--warn)}
.badge.bad{border-color:var(--bad);color:var(--bad)}
.badge.kind{border-color:var(--ink);color:var(--ink)}
.unread{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:var(--r-full);background:var(--primary);color:#fff;font-size:11px;line-height:18px;text-align:center;font-style:normal}
/* public frame */
body.pub{display:flex;flex-direction:column}
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding:var(--s-md) var(--gutter);border-bottom:1px solid var(--hairline)}
.pub-top nav{display:flex;gap:var(--s-md);font-size:14px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;font-size:16px;letter-spacing:var(--track-head)}
.brand .mark{display:block;width:auto;height:36px;flex:none}
.brand:hover{color:var(--ink)}
.pub-main{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--s-xxl) var(--gutter)}
.pub-foot{padding:var(--s-lg) var(--gutter);border-top:1px solid var(--hairline)}
.foot-line{margin:0;color:var(--ink-muted);font-size:13px;max-width:none}
.center{max-width:440px;margin:0 auto;padding:var(--s-xl) 0}
.center h1{font-size:24px}
/* app frame */
body.app{display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:var(--s-md);height:56px;padding:0 var(--gutter);border-bottom:1px solid var(--hairline);position:sticky;top:0;background:var(--canvas);z-index:5}
.topbar .who{margin-left:auto;color:var(--ink-muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .signout{margin:0}
.frame{display:flex;flex:1;min-height:0}
.rail{display:none;width:var(--rail);flex:none;border-right:1px solid var(--hairline);padding:var(--s-lg) var(--s-md);position:sticky;top:56px;height:calc(100vh - 56px);flex-direction:column;justify-content:space-between}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-item{display:flex;align-items:center;gap:var(--s-sm);padding:9px var(--s-md);border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.rail-item svg,.tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail-item:hover{background:var(--canvas-soft);color:var(--ink)}
.rail-item.on{background:var(--primary-soft);color:var(--ink)}
.rail-foot{display:flex;flex-direction:column;gap:var(--s-sm);padding:0 var(--s-md);font-size:12.5px;color:var(--ink-muted)}
.rail-status{display:flex;flex-direction:column;gap:2px}
.rail-status b{font-weight:400;color:var(--ink)}
.rail-status b.bad{color:var(--bad)}
.rail-cap{text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--ink-faint)}
.rail-doc{align-self:flex-start}
.main{flex:1;min-width:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:var(--s-xl) var(--gutter) 96px}
.wrap-wide{max-width:1520px}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;border-top:1px solid var(--hairline);background:var(--canvas);padding:6px 0 max(6px,env(safe-area-inset-bottom));z-index:5}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;font-size:11px;text-decoration:none;color:var(--ink-muted);border-radius:var(--r-md)}
.tabs a.on{color:var(--ink);background:var(--primary-soft)}
@media(min-width:1000px){.rail{display:flex}.tabs{display:none}.wrap{padding-bottom:var(--s-xxl)}}
#toasts{position:fixed;right:var(--s-md);top:64px;display:flex;flex-direction:column;gap:6px;z-index:20;max-width:min(420px,calc(100vw - 28px))}
.toast{background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-md);font-size:14px}
.toast.bad{background:var(--bad)}
/* page pieces */
.page-head{display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-xl);align-items:flex-start;justify-content:space-between;margin-bottom:var(--s-xl)}
.page-head h1{margin-bottom:4px}
.page-head .lead{margin:0}
.crumb{margin:0 0 4px;font-size:13px;color:var(--ink-muted)}
.page-actions{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
.card{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-lg);margin-bottom:var(--s-lg);background:var(--canvas)}
.card>h2,.card>h3{margin-top:0}
.card.soft{background:var(--canvas-soft);border-color:transparent}
.card.accent{border-color:var(--primary)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-md);margin-bottom:var(--s-lg)}
.cards .card{margin:0}
.row{display:flex;flex-wrap:wrap;gap:var(--s-sm);align-items:center}
.row.between{justify-content:space-between}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-md);margin-bottom:var(--s-lg)}
.stat{border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-md)}
.stat .n{display:block;font-family:var(--mono);font-size:24px;line-height:1.1;letter-spacing:var(--track-num);font-variant-numeric:tabular-nums}
.stat .l{display:block;color:var(--ink-muted);font-family:var(--mono);font-size:10px;text-transform:uppercase;margin-top:6px}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px var(--s-lg);font-size:14px;margin-bottom:var(--s-md)}
.kv>div:nth-child(odd){color:var(--ink-muted)}
.kv .cell{min-width:0;overflow-wrap:anywhere}
.dt{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-md);margin-bottom:var(--s-lg)}
.dt table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.dt th,.dt td{text-align:left;padding:9px var(--s-md);border-bottom:1px solid var(--hairline);vertical-align:top}
.dt th{font-weight:400;color:var(--ink-muted);font-size:12.5px;white-space:nowrap}
.dt tr:last-child td{border-bottom:0}
.dt .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt .foot{padding:var(--s-sm) var(--s-md);color:var(--ink-muted);font-size:12.5px;border-top:1px solid var(--hairline)}
.empty{border:1px dashed var(--rule);border-radius:var(--r-md);padding:var(--s-xl);text-align:center;color:var(--ink-muted);margin-bottom:var(--s-lg)}
.empty p{margin-bottom:var(--s-sm)}
.notice{border:1px solid var(--hairline);border-left:3px solid var(--primary);border-radius:var(--r-md);padding:var(--s-sm) var(--s-md);margin-bottom:var(--s-lg)}
.notice p{margin:0}
.notice.warn{border-left-color:var(--warn)}
.notice.bad{border-left-color:var(--bad)}
.events{list-style:none;margin:0;padding:0}
.events li{display:flex;justify-content:space-between;gap:var(--s-md);padding:8px 0;border-bottom:1px solid var(--hairline);font-size:14px}
.events li:last-child{border-bottom:0}
.events li span:last-child{color:var(--ink-muted);white-space:nowrap;font-size:13px}
.snip{position:relative;margin-bottom:var(--s-md)}
.snip pre{margin:0;padding-right:84px}
.snip .btn{position:absolute;top:8px;right:8px}
.qbar{margin-bottom:var(--s-sm)}
.qbar .t{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:4px}
.qbar .bar{display:block;width:100%;height:6px;border-radius:var(--r-full);overflow:hidden}
.qbar .bar .track{fill:var(--canvas-soft)}
.qbar .bar .val{fill:var(--good)}
.qbar.mid .bar .val{fill:var(--warn)}
.qbar.lo .bar .val{fill:var(--bad)}
.charts{display:flex;flex-wrap:wrap;gap:var(--s-lg);margin-bottom:var(--s-lg)}
.chart{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13.5px;min-width:120px}
.ring{width:120px;height:120px}
.ring .track{stroke:var(--canvas-soft)}
.ring .val{stroke:var(--good);stroke-linecap:round}
.ring.mid .val{stroke:var(--warn)}
.ring.lo .val{stroke:var(--bad)}
.ring text{font-family:var(--mono);font-size:22px;letter-spacing:var(--track-num);fill:var(--ink)}
.spark{width:240px;height:56px}
.spark path{fill:none;stroke:var(--ink);stroke-width:1.5}
.spark .fill{fill:var(--primary-soft);stroke:none}
/* forms */
/* Team analytics: the figures use scoped gateway records, UTC days and named units. */
/* Series colours: ink and greys, the language of the product cards on the front page. Ink carries the primary
   series (charged tokens, the allowance ring, member bars, the trend line, sparklines); provider shares step down
   through the grey ramp (ink, gray 1, gray 4, light gray 1) and are always labelled with their value and share, so
   identity never rests on hue. Reserved tokens are gray 5 on a light track; estimated charges are gray 3, between
   measured ink and reserved grey; an allowance that is over turns Carbon red 60, an alert, not a data colour. The
   token names stay as the renderers reference them: purple = slot 1, teal = slot 2, blue = slot 3, cyan = slot 4,
   amber = estimated. */
:root{--chart-purple:#111418;--chart-teal:#5f6b7c;--chart-blue:#abb3bf;--chart-cyan:#d3d8de;--chart-amber:#8f99a8;--chart-over:#da1e28;--chart-pending:#c5cbd3;--chart-track:#edeff2;--chart-soft:rgba(17,20,24,.06)}
.daily-summary{display:flex;flex-wrap:wrap;gap:var(--s-lg) 48px;margin:0 0 var(--s-xl);padding:4px 0 var(--s-lg);border-bottom:1px solid var(--hairline)}
.daily-summary div{display:flex;flex-direction:column;gap:5px;min-width:125px}
.daily-summary dt{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--ink-muted)}
.daily-summary dd{font-family:var(--mono);font-size:23px;line-height:1.25;font-weight:500;margin:0;letter-spacing:var(--track-num);font-variant-numeric:tabular-nums}
.endpoint-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:var(--s-md) 0;margin-bottom:var(--s-md);font-size:13px}
.endpoint-strip .mono{overflow-wrap:anywhere;min-width:0}
.policy-details{margin:0 0 var(--s-xl);font-size:13px}.policy-details>summary{cursor:pointer;margin-bottom:var(--s-sm)}.policy-details>.kv{margin-top:var(--s-md)}
.analytics{border:1px solid var(--hairline);border-radius:var(--r-lg);margin-bottom:var(--s-xl);overflow:hidden}
.analytics-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}
.analytics-grid>figure,.analytics-grid>section{min-width:0;margin:0;padding:var(--s-xl)}
.analytics-grid>:nth-child(2){border-left:1px solid var(--hairline)}
.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-md);margin-bottom:var(--s-lg)}
.chart-heading h2{font-size:18px;margin-bottom:6px}.chart-heading p{color:var(--ink-muted);font-size:12.5px;margin:0}
.chart-total{font-size:12.5px;color:var(--ink-muted);white-space:nowrap}
.activity-chart{display:block;width:100%;height:auto;max-height:280px;overflow:visible;margin:var(--s-md) 0 8px}
.chart-gridline{stroke:var(--hairline);stroke-width:1;stroke-dasharray:3 4}
.chart-axis{fill:var(--ink-muted);font-family:var(--font);font-size:11px;font-variant-numeric:tabular-nums}
.chart-charged{fill:var(--chart-purple);color:var(--chart-purple)}
.chart-pending{fill:var(--chart-pending);color:var(--chart-pending)}
.chart-estimated{fill:var(--chart-amber);color:var(--chart-amber)}
.chart-over{fill:var(--chart-over);color:var(--chart-over)}
.chart-track{fill:var(--chart-track)}
.chart-area{fill:var(--chart-soft)}.chart-line{fill:none;stroke:var(--chart-purple);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-point{fill:var(--chart-purple);stroke:var(--canvas);stroke-width:2}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--ink-muted);margin-top:10px}
.chart-legend-item{display:inline-flex;align-items:center;gap:7px}.chart-legend-item strong{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.chart-swatch{display:inline-block;width:9px;height:9px;flex:none;border-radius:2px;background:currentColor}
.chart-data{margin-top:var(--s-lg);font-size:12.5px;color:var(--ink-muted)}.chart-data summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:fit-content}
.chart-data .dt{margin-top:var(--s-md);color:var(--ink)}
.chart-empty,.chart-note{color:var(--ink-muted);font-size:12.5px;line-height:1.55;margin:0;max-width:70ch}
.chart-empty{padding:var(--s-lg) 0}
.allowance-visual{display:flex;align-items:center;justify-content:center;gap:var(--s-md);margin:6px 0 var(--s-md)}
.allowance-ring{width:160px;height:160px;flex-shrink:0}
.chart-ring-track,.chart-ring-value,.chart-ring-reserved{fill:none;stroke-width:11}
.chart-ring-track{stroke:var(--chart-track)}.chart-ring-value{stroke:var(--chart-purple)}.chart-ring-value.chart-over{stroke:var(--chart-over)}.chart-ring-reserved{stroke:var(--chart-pending)}
.ring-number{font:500 25px var(--font);fill:var(--ink);letter-spacing:-.6px}.ring-label{font:12px var(--font);fill:var(--ink-muted)}
.allowance-values{margin:0;display:flex;flex-direction:column;gap:12px;font-variant-numeric:tabular-nums}.allowance-values dt{font-size:12px;color:var(--ink-muted)}.allowance-values dd{font-size:14px;font-weight:500;margin:2px 0 0}
.provider-visual{display:flex;justify-content:center}.provider-donut{display:block;width:150px;height:150px;margin:-8px 0 12px}
.provider-track,.provider-segment{fill:none;stroke-width:19}.provider-track{stroke:var(--chart-track)}
.category-0{stroke:var(--chart-purple);color:var(--chart-purple)}.category-1{stroke:var(--chart-teal);color:var(--chart-teal)}.category-2{stroke:var(--chart-blue);color:var(--chart-blue)}.category-3{stroke:var(--chart-cyan);color:var(--chart-cyan)}.category-4{stroke:var(--chart-pending);color:var(--chart-pending)}
.provider-legend{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.provider-legend li{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.provider-legend li>span:first-child{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}.provider-legend strong{font-weight:500}.provider-percent{color:var(--ink-muted);text-align:right}
.accounting-panel{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:var(--s-xl);border-top:1px solid var(--hairline);padding:var(--s-lg) var(--s-xl)}
.accounting-panel h3{font-size:14px;margin-bottom:4px}.accounting-bar{display:block;width:100%;height:8px;border-radius:4px;overflow:hidden}
.member-bars{list-style:none;padding:0;margin:0 0 var(--s-md);display:flex;flex-direction:column;gap:17px}
.member-bar-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:13px;line-height:1.4}.member-bar-heading>span{overflow-wrap:anywhere;min-width:0}.member-bar-heading strong{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}.member-bar-heading small{font-size:11px;color:var(--ink-muted);font-weight:400}
.member-bar{display:block;width:100%;height:7px}.allowance-cell{display:flex;flex-direction:column;gap:6px;min-width:170px;max-width:240px;font-variant-numeric:tabular-nums;font-size:13px}.allowance-cell small{font-size:11px;color:var(--ink-muted)}
@media(max-width:1200px) and (min-width:1000px){.analytics-grid{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr)}.allowance-visual{gap:6px}.allowance-ring{width:136px;height:136px}}
@media(max-width:720px){.analytics-grid{grid-template-columns:minmax(0,1fr)}.analytics-grid>:nth-child(2){border-left:0;border-top:1px solid var(--hairline)}.analytics-grid>figure,.analytics-grid>section{padding:var(--s-lg)}.accounting-panel{grid-template-columns:minmax(0,1fr);gap:var(--s-md);padding:var(--s-lg)}.daily-summary{gap:var(--s-lg) var(--s-xl)}.daily-summary div{flex:1 1 40%;min-width:0}.daily-summary dd{font-size:21px}.chart-heading{gap:8px}.chart-total{font-size:11px}.provider-visual{justify-content:flex-start}.provider-donut{margin-left:auto;margin-right:auto}.provider-legend{font-size:13px}.activity-chart{margin-top:0}.member-bar-heading{font-size:12px}}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-md)}
.field label,.field .lab{font-size:13.5px;color:var(--ink-muted)}
.field input[type=text],.field input[type=password],.field input[type=email],.field input[type=number],.field input[type=url],.field select,.field textarea{width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--canvas);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:88px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--ink-muted)}
.field.inline{margin:0}
.field.grow{flex:1;min-width:200px}
.gap{height:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:var(--s-md)}
.check input{margin-top:4px;width:16px;height:16px;flex:none}
.err{color:var(--bad);font-size:13.5px;margin:0 0 var(--s-md);min-height:1em}
.err:empty{display:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-sm);justify-content:flex-end;margin-top:var(--s-lg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--rule);border-radius:var(--r-full);font-size:13.5px;cursor:pointer;background:var(--canvas)}
.chip input{margin:0}
.chip.on{border-color:var(--ink);background:var(--primary-soft)}
/* dialogs */
dialog{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-xl);width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--canvas);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog h2{margin-top:0}
dialog .stage[hidden]{display:none}
@media(max-width:640px){dialog{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;border:0;border-radius:0;padding:var(--s-lg) var(--s-md)}}
.usercode{font-family:var(--mono);font-size:30px;letter-spacing:.14em;text-align:center;padding:var(--s-md);border:1px dashed var(--rule);border-radius:var(--r-md);margin:var(--s-sm) 0;user-select:all}
.qr{display:flex;justify-content:center;margin:var(--s-md) 0}
.qr svg{width:168px;height:168px}
.once{font-family:var(--mono);font-size:14px;word-break:break-all;border:1px solid var(--primary);background:var(--primary-soft);border-radius:var(--r-md);padding:var(--s-md);margin:var(--s-sm) 0;user-select:all}
.wait{display:flex;align-items:center;gap:8px;color:var(--ink-muted);font-size:13.5px}
.wait::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--primary);border-top-color:transparent;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wait::before{animation:none}}
/* home */
.hero{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-xxl);margin-bottom:var(--s-xl);display:grid;grid-template-columns:1fr;gap:var(--s-lg)}
.hero h1{font-size:26px;margin:0}
.hero .lead{margin:0}
@media(min-width:760px){.hero{grid-template-columns:1.4fr 1fr;align-items:center}}
.lanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-md);margin-bottom:var(--s-lg)}
.lane{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-lg);display:flex;flex-direction:column;gap:var(--s-sm)}
.lane h3{margin:0}
.lane p{margin:0;color:var(--ink-muted);font-size:14px;flex:1}
.acct{display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-lg);align-items:center;justify-content:space-between}
.acct .name{text-decoration:none;font-size:16px}
.acct .meta{display:flex;flex-wrap:wrap;gap:var(--s-sm);align-items:center;font-size:13.5px;color:var(--ink-muted)}
/* docs */
.docs{display:grid;grid-template-columns:1fr;gap:var(--s-xl)}
.docs-nav{display:flex;flex-wrap:wrap;gap:6px var(--s-md);font-size:14px}
.docs-nav a.on{color:var(--primary)}
.prose{max-width:72ch}
.prose h1{font-size:28px}.prose h2{font-size:22px;margin-top:var(--s-xxl)}.prose h3{margin-top:var(--s-xl)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:4px}
.prose table{border-collapse:collapse;font-size:14px;margin-bottom:var(--s-md);display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--hairline);padding:6px 10px;text-align:left;vertical-align:top}
.prose blockquote{margin:0 0 var(--s-md);padding:var(--s-sm) var(--s-md);border-left:3px solid var(--rule);color:var(--ink-muted)}
.prose .not-run{font-size:12.5px;color:var(--ink-muted);margin:-8px 0 var(--s-md)}
@media(min-width:900px){.docs{grid-template-columns:200px 1fr}.docs-nav{flex-direction:column;position:sticky;top:var(--s-xl);align-self:start}}

@media(max-width:720px){.activity-chart .chart-axis{font-size:24px}.activity-chart .chart-axis-optional{display:none}}

/* ==================================================================================================
   Identity layer. The console speaks the language of the product cards on the front page: a mono uppercase eyebrow
   with a square marker, a plain sans title with muted meta on the right, hairline rows, ink bars on grey tracks,
   mono figures right-aligned, black mono tags. Cool greys for structure, blue for links only, ink for the primary
   action and for data, red only for alerts. White canvas, the site's own header and lockup, a soft grey rail whose
   active item lifts as a white chip, hairline panels at 8px. Rules here override the console defaults above by order.
   ================================================================================================== */
body{font:400 15px/1.5 var(--font);letter-spacing:0}
body.app{font-size:14px;line-height:1.45;background:var(--canvas);--r-sm:6px;--r-md:8px;--r-lg:8px}
a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(33,93,176,.35);text-underline-offset:3px}
a:hover{color:var(--primary-pressed);text-decoration-color:var(--primary-pressed)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
h1,h2,h3{font-family:var(--font);font-weight:600;text-transform:none;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:24px;letter-spacing:-.02em}h2{font-size:18px}h3{font-size:15px}
h1 em,h2 em,h3 em{font-style:normal;color:var(--primary)}
.lead{color:var(--ink-muted);line-height:1.5;font-size:14px}
.src,.hint,.foot-line,.chart-note,.chart-empty,.chart-total,.chart-heading p{color:var(--ink-muted)}
code,kbd,pre,.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:0}
code{background:var(--surface);border:1px solid var(--hairline);border-radius:4px;padding:1px 6px;color:var(--ink)}
pre{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:16px 18px;color:var(--ink);font-size:12.5px;line-height:1.6}
pre code{border:0;background:none;color:inherit}
/* controls: 36px, sentence case, weight 500; the primary action is the accent, the secondary a bordered white
   button, the destructive one red only on hover */
.btn{min-height:36px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;gap:8px;box-shadow:0 1px 1px rgba(17,20,24,.05)}
.btn:hover{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.btn.sm{min-height:30px;padding:0 10px;font-size:12.5px;letter-spacing:0}
.btn-secondary{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong)}
.btn-secondary:hover{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:500}
.btn-primary:hover{background:var(--primary-pressed);border-color:var(--primary-pressed);color:var(--on-primary)}
body.app .btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
body.app .btn-primary:hover{background:#2a2f37;border-color:#2a2f37;color:#fff}
.btn-danger{background:var(--canvas);color:var(--bad);border-color:var(--hairline-strong)}
.btn-danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.badge{border-radius:3px;padding:5px 8px 4px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;background:var(--ink);border:1px solid var(--ink);color:#fff}
.badge.done,.badge.info,.badge.kind{background:transparent;border-color:var(--hairline-strong);color:var(--ink)}.badge.off{background:transparent;border-color:var(--hairline-strong);color:var(--ink-muted)}.badge.warn{background:transparent;border-color:var(--warn);color:var(--warn)}.badge.bad{background:var(--support-error);border-color:var(--support-error);color:#fff}
.unread{border-radius:9999px;background:var(--primary);color:var(--on-primary);font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:0;font-style:normal}
.toast{background:var(--ink);color:#fff;border:0;border-radius:var(--r-md);font-size:13.5px;padding:10px 14px;box-shadow:0 8px 24px rgba(15,23,42,.18)}
.toast.bad{background:var(--bad)}
/* fields */
.field label,.field .lab{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.field label .src{font-weight:400;text-transform:none;letter-spacing:0;font-size:12px}
.field input[type=text],.field input[type=password],.field input[type=email],.field input[type=number],.field input[type=url],.field select,.field textarea{background:var(--field);color:var(--ink);border:1px solid var(--hairline-strong);border-radius:var(--r-md);min-height:38px;padding:8px 12px;font-family:var(--font);font-size:14px;letter-spacing:0;box-shadow:0 1px 2px rgba(17,20,24,.04)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 3px var(--primary-soft)}
.field select option{background:var(--field);color:var(--ink)}
.field .hint,.err{font-size:12px}
.check{color:var(--ink);font-size:14px}
.check input,.field input[type=checkbox]{accent-color:var(--primary)}
.chip{border-color:var(--hairline-strong);border-radius:var(--r-md);background:var(--canvas);font-size:13px}
.chip.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.actions{margin-top:var(--s-lg);margin-bottom:var(--s-xxl)}
.wrap>h2,.wrap>form+h2{margin-top:var(--s-xxl)}
.wrap>details{border-top:1px solid var(--hairline)}
.wrap>details:last-of-type{border-bottom:1px solid var(--hairline)}
.wrap>details>summary{padding:14px 0;font-family:var(--font);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.wrap>details[open]>summary{border-bottom:1px solid var(--hairline);margin-bottom:var(--s-lg)}
.wrap>details>form,.wrap>details>p{padding-bottom:var(--s-lg)}
/* the signed-in shell: the site's own white header with the lockup, a soft grey rail whose active item lifts as a
   white chip, and the page on white */
.topbar{height:56px;gap:12px;border-bottom:1px solid var(--hairline);background:var(--canvas);color:var(--ink)}
.topbar .brand .mark{height:30px}
.topbar .who{font-family:var(--font);font-size:13px;color:var(--ink-muted)}
.brand{font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none}
.brand .mark{display:block;width:auto;height:32px}
.rail{border-right:1px solid var(--hairline);background:var(--surface);top:56px;height:calc(100vh - 56px);padding:16px 12px}
.rail-nav{gap:2px}
.rail-item{position:relative;border-radius:var(--r-md);padding:8px 12px;font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-soft);border-left:0}
.rail-item svg,.tabs svg{width:16px;height:16px;stroke-width:1.75}
.rail-item svg{color:var(--ink-muted)}
.rail-item:hover{background:var(--surface-2);color:var(--ink)}
.rail-item.on{background:var(--canvas);color:var(--ink);font-weight:600;border-left:0;box-shadow:var(--ring)}
.rail-item.on::before{content:none}
.rail-item.on svg{color:var(--ink)}
.rail-foot{padding:0 12px;font-family:var(--font);font-size:12.5px;color:var(--ink-muted)}
.rail-status b{color:var(--ink-soft);font-weight:500}
.rail-cap{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.rail-doc{font-family:var(--font);font-size:12.5px;letter-spacing:0;text-transform:none;text-decoration:none;color:var(--ink-muted)}
.tabs{border-top:1px solid var(--hairline)}
.tabs a{border-radius:var(--r-md);font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.tabs a.on{background:transparent;color:var(--primary)}
/* surfaces: hairline panels at 12px, tinted table heads, KPI tiles with sparklines */
.card,.stat,.dt,.empty,.hero,.lane,.trend-panel,.allowance-panel,.chart{border-radius:var(--r-lg)}
.card{padding:20px;border:0;box-shadow:var(--ring);background:var(--canvas)}
.card.soft{background:var(--surface-2);box-shadow:none}
.card.accent{border-color:var(--primary)}
.empty{border:1px dashed var(--hairline-strong);border-style:dashed;color:var(--ink-muted);padding:32px;background:var(--canvas)}
.notice{border:0;border-left:3px solid var(--primary);box-shadow:var(--ring);background:var(--canvas);border-radius:var(--r-md);font-size:13.5px}
.notice.warn{border-left-color:var(--support-warning);background:var(--warn-soft)}.notice.bad{border-left-color:var(--support-error);background:var(--bad-faint)}
.stat{padding:16px;border:0;box-shadow:var(--ring);background:var(--canvas)}
.stat .n{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.stat .l,.daily-summary dt,.kv>div:nth-child(odd){font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.daily-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px;padding:0;border-bottom:0}
.daily-summary div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "v s";align-items:end;gap:2px 12px;min-width:0;padding:16px 18px;border:0;box-shadow:var(--ring);border-radius:var(--r-lg);background:var(--canvas)}
.daily-summary dt{grid-area:l;align-self:start}
.kpi-spark{grid-area:s;width:96px;height:32px;display:block;overflow:visible}
@media(max-width:720px){.daily-summary{grid-template-columns:1fr}.daily-summary dd{font-size:24px}}
.kpi-spark .area{fill:var(--chart-soft)}.kpi-spark .line{fill:none;stroke:var(--chart-purple);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}.kpi-spark .dot{fill:var(--chart-purple);stroke:var(--canvas);stroke-width:1.5}
.daily-summary dd{grid-area:v;font-family:var(--mono);font-size:24px;letter-spacing:-.01em;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;margin:6px 0 0}
.allowance-values dd,.chart-legend-item strong,.provider-legend strong,.provider-percent,.member-bar-heading strong,.allowance-cell>span:first-child,.dt td.num{font-family:var(--mono);font-size:12.5px;font-weight:500}
.ring-number{font-family:var(--mono);font-weight:500}
.member-bar{height:5px}
.allowance-cell svg{height:5px}
.kv{gap:8px var(--s-lg);font-size:13.5px}
.kv>div:nth-child(odd){padding-top:1px;font-weight:400}
.dt{border:0;box-shadow:var(--ring);border-radius:var(--r-lg);background:var(--canvas)}
.dt th{background:var(--surface);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:10px 14px;border-bottom:1px solid var(--hairline)}
.dt td{font-family:var(--font);font-size:13.5px;letter-spacing:0;color:var(--ink);padding:10px 14px;font-variant-numeric:tabular-nums}
.dt tbody tr:hover td{background:var(--surface)}
.dt td a{color:var(--primary)}
.dt .foot{font-family:var(--font);font-size:12px;color:var(--ink-muted);background:var(--surface)}
.events li{font-size:13.5px;color:var(--ink)}
.events li span:last-child{font-family:var(--font);font-size:12px;color:var(--ink-muted)}
dialog{background:var(--surface-elevated);border:1px solid var(--hairline);border-radius:var(--r-lg);color:var(--ink);padding:24px;box-shadow:0 24px 64px rgba(15,23,42,.22)}
dialog::backdrop{background:rgba(15,23,42,.45)}
.once{background:var(--primary-soft);border:1px solid rgba(33,93,176,.4);color:var(--ink);font-family:var(--mono);font-size:13px;border-radius:var(--r-md)}
.page-head{padding-bottom:0;border-bottom:0;margin-bottom:24px}
.page-head h1{font-size:24px;letter-spacing:-.02em;font-weight:600}
.page-head .lead{font-size:14px;max-width:64ch}
.crumb,.page-head .crumb{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.crumb::before{content:"";width:8px;height:8px;background:var(--ink);flex:none}
.chart-heading>div{display:flex;flex-direction:column-reverse;gap:6px}
.chart-heading h2{font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--ink);line-height:1.3;margin:0}
.chart-heading p{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.chart-heading p::before{content:"";width:8px;height:8px;background:var(--ink);flex:none}
.chart-total{font-family:var(--mono);font-size:11px;color:var(--ink-muted)}
.chart-axis{font-family:var(--font);font-size:11px;fill:var(--ink-muted)}
.chart-legend{font-family:var(--font);font-size:12px;letter-spacing:0}
.chart-swatch{border-radius:2px}.qbar .bar{border-radius:9999px}
.ring-number{font-weight:600}
.analytics{border:0;box-shadow:var(--ring);border-radius:var(--r-lg);background:var(--canvas)}
.analytics-grid>figure,.analytics-grid>section{padding:20px 24px}
.endpoint-strip{border:0;box-shadow:var(--ring);border-radius:var(--r-lg);background:var(--canvas);padding:12px 16px;gap:8px 20px;font-size:13px}
.endpoint-strip .muted{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.endpoint-strip .mono{color:var(--ink)}
.policy-details>summary{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
details>summary{cursor:pointer}
.hero{padding:28px;gap:24px;border:0;box-shadow:var(--ring);background:var(--canvas)}
.hero h1{font-size:24px}
.lane{border:0;box-shadow:var(--ring);background:var(--canvas)}
.lane h3{font-size:15px}
/* the public frame: wordmark left, quiet links centre, one accent action right */
body.pub{background:var(--canvas)}
.pub-top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:60px;padding:0 var(--gutter);border-bottom:1px solid var(--hairline);background:var(--canvas)}
.pub-top nav{justify-self:center;display:flex;gap:28px}
.pub-top nav a{font-family:var(--font);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-muted);text-decoration:none;white-space:nowrap}
.pub-top nav a:hover,.pub-top nav a.on{color:var(--ink)}
.pub-cta{justify-self:end}
.pub-cta .btn{border-radius:var(--r-md);font-weight:500}
.pub-main{max-width:1440px;padding:64px var(--gutter) 96px}
.pub-foot{padding:var(--s-lg) var(--gutter);border-top:1px solid var(--hairline);background:var(--canvas)}
.pub-foot .foot-line{font-family:var(--font);font-size:13px;letter-spacing:0;color:var(--ink-muted)}
.center{max-width:440px;margin:0 auto;padding:28px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);position:static;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.center::before,.center::after{content:none}
.center h1{font-size:24px;margin-bottom:var(--s-sm)}
.center .lead{margin-bottom:var(--s-lg);font-size:14px}
.center .actions{justify-content:stretch;margin-bottom:0}.center .actions .btn{flex:1;min-height:40px}
.center hr{border:0;border-top:1px solid var(--hairline);margin:var(--s-xl) 0}
.center h2{font-size:16px}
.center p.src{font-family:var(--font);font-size:12px;color:var(--ink-muted)}
.docs{gap:var(--s-xxl)}
.docs-nav{padding-bottom:var(--s-lg);border-bottom:1px solid var(--hairline)}
.docs-nav a{font-family:var(--font);font-size:13.5px;letter-spacing:0;text-transform:none;text-decoration:none;color:var(--ink-muted)}
.docs-nav a:hover,.docs-nav a.on{color:var(--primary)}
.prose{max-width:72ch;font-family:var(--font);font-size:15.5px;letter-spacing:0;background:transparent;padding:0}
.prose h1{font-size:clamp(28px,3.4vw,34px);font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-bottom:var(--s-lg)}
.prose h2{font-size:22px;margin-top:var(--s-xxl)}.prose h3{font-size:17px;font-weight:600}
.prose p,.prose li{color:var(--ink-soft)}
.prose a{color:var(--primary);text-decoration-color:rgba(33,93,176,.35)}
.prose table{border:1px solid var(--hairline);border-radius:var(--r-lg);border-collapse:separate;border-spacing:0;overflow:hidden;font-size:14px;background:var(--canvas)}
.prose th{background:var(--surface);font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-muted);border:0;border-bottom:1px solid var(--hairline);padding:9px 14px}
.prose td{border:0;border-bottom:1px solid var(--hairline);padding:10px 14px;color:var(--ink-soft)}
.prose tr:last-child td{border-bottom:0}
.prose blockquote{border-left-color:var(--primary);color:var(--ink-soft)}
.prose .not-run{font-family:var(--font);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.prose .src{font-family:var(--font);font-size:12px;color:var(--ink-muted)}
.prose code{color:var(--ink)}
.prose pre{border-radius:var(--r-lg);background:var(--surface)}
@media(max-width:760px){:root{--gutter:20px}.pub-top{grid-template-columns:1fr auto}.pub-top nav{display:none}.pub-main{padding:40px 20px 64px}.center{padding:20px}.page-head h1{font-size:22px}}

/* ==================================================================================================
   The front page (pages/landing.js). The rhythm of a product page on a black canvas: a hero with the key-card
   deck, a stat row, feature cards, a window-chrome request panel, the gradient band and a pull quote, tabular
   routing, provider tiles, a light interlude for allowances and terms, status cards, three ways to run, the
   source panel, then the white glyph band above the footer.
   ================================================================================================== */
body.land-page .pub-main{padding:0;max-width:none}
body.land-page .pub-foot{padding:0;border-top:0}
.land{display:block;min-width:0}
.land section{max-width:1440px;margin:0 auto;padding:96px var(--gutter);min-width:0}
.land .eyebrow{font-family:var(--font);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);margin:0 0 10px}
.land h2{font-size:clamp(28px,3.2vw,40px);font-weight:400;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;max-width:24ch}
.land h2 em{font-style:normal;color:var(--primary)}
.land .sub{font-size:16px;color:var(--ink-muted);max-width:640px;margin:0 0 40px;line-height:1.5}
.pipe-hero{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;padding:96px var(--gutter) 80px}
.pipe-hero h1{font-size:clamp(40px,5.6vw,80px);font-weight:400;line-height:1.05;letter-spacing:-1.3px;margin:0 0 28px;max-width:14ch}
.pipe-hero h1 em{font-style:normal;color:var(--primary)}
.pipe-hero .lead{font-size:19px;color:var(--ink-muted);max-width:560px;margin:0 0 36px;line-height:1.5}
.pipe-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.pipe-hero .btn{min-height:48px;padding:0 27px;font-size:16px;font-weight:600;border-radius:8px;border-width:2px}
.pipe-hero .btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.pipe-hero .btn-secondary:hover{background:var(--ghost);border-color:var(--ink);color:var(--ink)}
.deck{position:relative;padding-top:26px;max-width:520px;width:100%;margin:0 auto;min-width:0}
.deck .back{position:absolute;left:14px;right:14px;top:13px;height:48px;border:1px solid var(--hairline);border-radius:16px}
.deck .back.two{left:28px;right:28px;top:0}
.offer{position:relative;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:16px;padding:24px}
.offer .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;font-size:14px}
.offer .pill{background:var(--ghost);border-radius:9999px;padding:4px 12px;font-size:12px;white-space:nowrap}
.offer .fig{display:flex;align-items:baseline;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.offer .fig b{font-weight:400;font-size:44px;line-height:1;letter-spacing:-.02em}
.offer .fig span{color:var(--ink-muted);font-size:16px}
.offer .bar{height:4px;background:var(--ghost);border-radius:9999px;margin-bottom:12px;overflow:hidden}
.offer .bar i{display:block;height:4px;width:61%;background:var(--ink);border-radius:9999px}
.offer .meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-muted)}
.offer .list{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.offer .list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.offer .list li span:last-child{color:var(--ink-muted);text-align:right}
.offer .note{margin:14px 0 0;font-size:11px;color:var(--ink-muted)}
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;max-width:1440px;margin:0 auto;padding:56px var(--gutter);border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong)}
.stat-lockup .n{display:block;font-size:clamp(48px,5.5vw,80px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.stat-lockup .n sup{font-size:.4em;vertical-align:super;margin-left:2px}
.stat-lockup .c{display:block;font-size:12px;color:var(--ink-muted);margin-top:8px}
.feat-grid{display:grid;grid-template-columns:1fr;gap:20px}
.feat{background:var(--surface);border:1px solid var(--hairline-strong);border-radius:12px;padding:24px;min-width:0}
.feat .idx{display:block;font-size:12px;color:var(--ink-muted);margin-bottom:28px}
.feat h3{font-size:19px;font-weight:600;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.feat p{margin:0;color:var(--ink-muted);font-size:14px;line-height:1.5}
.split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;min-width:0}
.split .sub{margin-bottom:24px}
.win{background:var(--surface);border:1px solid var(--hairline-strong);border-radius:16px;overflow:hidden;min-width:0}
.win .bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.win .bar i{width:10px;height:10px;border-radius:9999px;background:var(--ghost-strong)}
.win .bar span{margin-left:auto;font-size:12px;color:var(--ink-muted);font-family:var(--mono)}
.win pre{border:0;border-radius:0;background:transparent;margin:0;padding:20px;font-size:12.5px;line-height:1.65;color:var(--ink);overflow-x:auto}
.win pre b{font-weight:400;color:var(--primary)}
.gradient-band{height:160px;background:linear-gradient(100deg,#215db0 0%,#184a90 55%,#111418 100%)}
.quote{max-width:1440px;margin:0 auto;padding:96px var(--gutter);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.quote blockquote{margin:0;font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.02em;max-width:26ch}
.quote cite{display:block;font-style:normal;font-size:13px;color:var(--ink-muted);margin-top:16px}
.tbl{border:1px solid var(--hairline-strong);border-radius:16px;overflow:hidden;overflow-x:auto;min-width:0}
.tbl table{width:100%;min-width:680px;border-collapse:collapse}
.tbl th{background:var(--field);text-align:left;padding:12px 16px;font-size:12px;font-weight:400;color:var(--ink-muted);border-bottom:1px solid var(--hairline);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--hairline);font-size:15px;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .acc{color:var(--primary)}
.tbl .cap{padding:12px 16px;font-size:12px;color:var(--ink-muted);border-top:1px solid var(--hairline)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{border:1px solid var(--hairline-strong);border-radius:16px;padding:20px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.tile .name{font-size:15px}
.tile .cap{font-size:12px;color:var(--ink-muted)}
.interlude{background:var(--canvas-soft);color:var(--ink)}
.interlude .eyebrow{color:var(--ink-muted)}
.interlude h2{color:var(--paper-ink)}
.interlude .sub{color:var(--ink-soft)}
.interlude .pcard{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px;min-width:0}
.interlude .pcard h3{font-size:19px;font-weight:600;margin:0 0 12px;color:var(--paper-ink);letter-spacing:-.01em}
.interlude .pcard p{color:var(--ink-soft);font-size:15px;line-height:1.5;margin:0 0 16px}
.interlude .prow{display:grid;grid-template-columns:1fr;gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:15px;color:var(--paper-ink)}
.interlude .prow:last-child{border-bottom:0}
.interlude .prow .k{font-size:12px;color:var(--ink-muted)}
.interlude .badge-ink{display:inline-block;border-radius:9999px;background:var(--paper-ink);color:#fff;font-size:12px;padding:5px 12px}
.tiers{display:grid;grid-template-columns:1fr;gap:12px}
.tier{border:1px solid var(--hairline-strong);border-radius:16px;padding:24px;background:var(--canvas);display:flex;flex-direction:column;gap:20px;min-width:0}
.tier .idx{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);display:flex;justify-content:space-between;gap:12px}
.tier .price{font-size:clamp(40px,5vw,50px);line-height:1;letter-spacing:-.02em}
.tier p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.5}
.tier ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.tier li{padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;display:flex;gap:10px;align-items:flex-start}
.tier li::before{content:"";width:6px;height:6px;border-radius:9999px;background:var(--primary);flex:none;margin-top:7px}
.tier .btn{margin-top:auto;justify-content:center;border-radius:8px;min-height:44px}
.tier.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier.featured .idx{color:rgba(255,255,255,.55)}
.tier.featured p{color:rgba(255,255,255,.72)}
.tier.featured ul,.tier.featured li{border-color:rgba(255,255,255,.16)}
.tier.featured .btn{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.tier.featured .btn:hover{background:var(--primary-pressed);border-color:var(--primary-pressed)}
.status-grid{display:grid;grid-template-columns:1fr;gap:20px}
.status-card{border:1px solid var(--hairline-strong);border-radius:16px;padding:24px;background:var(--surface);min-width:0}
.status-card h3{font-size:19px;font-weight:600;margin:0 0 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.status-card h3 .pill{font-size:12px;font-weight:400;background:var(--ghost);border-radius:9999px;padding:4px 12px}
.status-card h3 .pill.live{background:var(--primary);color:var(--on-primary)}
.status-card ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.status-card li{padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;display:grid;grid-template-columns:1fr;gap:2px 12px}
.status-card li b{font-weight:500}
.status-card li span{color:var(--ink-muted)}
.glyphs{display:flex;gap:6px;padding:24px var(--gutter);overflow:hidden;border-top:1px solid var(--hairline-strong)}
.glyphs i{flex:none;width:28px;height:48px;background:var(--ink)}
.glyphs i.a{border-radius:0 24px 0 0}.glyphs i.b{border-radius:0 0 0 24px}.glyphs i.c{border-radius:24px 0 0 0}.glyphs i.d{border-radius:0 0 24px 0}
.pipe-foot{max-width:1440px;margin:0 auto;padding:40px var(--gutter) 32px;display:grid;grid-template-columns:1fr;gap:32px}
.pipe-foot .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pipe-foot h4{font-size:14px;font-weight:400;margin:0 0 12px;color:var(--ink)}
.pipe-foot a{display:block;font-size:13px;color:var(--ink-muted);text-decoration:none;padding:5px 0}
.pipe-foot a:hover{color:var(--ink)}
.pipe-foot .meta{grid-column:1/-1;font-size:13px;color:var(--ink-muted);border-top:1px solid var(--hairline);padding-top:20px}
@media(min-width:760px){.pipe-hero{grid-template-columns:1.05fr .95fr;gap:64px}.stats-row{grid-template-columns:repeat(4,1fr)}.feat-grid{grid-template-columns:repeat(3,1fr)}.split{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:repeat(4,1fr)}.tiers{grid-template-columns:repeat(3,1fr)}.status-grid{grid-template-columns:1fr 1fr}.quote{grid-template-columns:1fr auto}.pipe-foot .cols{grid-template-columns:repeat(4,1fr)}.interlude .prow{grid-template-columns:150px 1fr}.status-card li{grid-template-columns:130px 1fr}}
@media(max-width:760px){.land section{padding:56px var(--gutter)}.pipe-hero{padding:48px var(--gutter) 40px}.pipe-hero h1{font-size:38px;letter-spacing:-1px}.pipe-hero .lead{font-size:16px}.stats-row{padding:40px var(--gutter)}.quote{padding:56px var(--gutter)}.gradient-band{height:96px}}
/* photography and product media, the way the reference uses them: rounded tiles with the caption outside the image,
   oversized feature media at 40px, a works-with row in place of a logo row, two actions in the nav */
.pub-cta{display:flex;align-items:center;gap:20px}
.pub-signin{font-size:13px;color:var(--ink);text-decoration:none}
.pub-signin:hover{color:var(--ink-muted)}
.photo{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--hairline-strong);background:var(--surface);object-fit:cover}
.photo.r32{aspect-ratio:3/2}.photo.r43{aspect-ratio:4/3}.photo.r34{aspect-ratio:3/4}
.feature-image{display:block;width:100%;height:auto;border-radius:40px;border:1px solid var(--hairline-strong);background:var(--surface)}
.works{max-width:1440px;margin:0 auto;padding:0 var(--gutter) 64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.works .lbl{font-size:12px;color:var(--ink-muted);flex:0 0 100%}
.works span{font-size:15px;color:var(--ink-muted)}
.media-grid{display:grid;grid-template-columns:1fr;gap:24px}
.media-card{min-width:0}
.media-card .cap{margin-top:12px}
.media-card .cap b{display:block;font-weight:500;font-size:15px;margin-bottom:2px}
.media-card .cap span{font-size:13px;color:var(--ink-muted);line-height:1.5}
.product-block{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.product-block h2{margin-bottom:12px}
.product-block .sub{margin-bottom:24px}
.stat-split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.stat-split .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;margin:0}
.stat-split .stat-lockup .n{font-size:clamp(40px,4.4vw,64px)}
.dev-split{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.land h3.kicker{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);margin:0 0 10px}
.interlude .photo{border-color:var(--paper-soft)}
.interlude .media-card .cap b{color:var(--paper-ink)}
.interlude .media-card .cap span{color:var(--ink-muted)}
@media(min-width:760px){.media-grid{grid-template-columns:repeat(3,1fr)}.product-block{grid-template-columns:1fr 1fr;gap:64px}.stat-split{grid-template-columns:.8fr 1.2fr;gap:64px}.dev-split{grid-template-columns:1fr 1fr}.works span{font-size:17px}}
@media(max-width:760px){.pub-cta{gap:12px}.pub-signin{display:none}}
/* the hero, after the reference: centred, a pill badge, a two-line headline with the second line muted, one pill
   action with a check line beneath, then the product shot in the middle with a floating detail card and light
   streaks behind it */
.pub-cta .btn{border-radius:var(--r-md);background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500;padding:0 14px}
.pub-cta .btn:hover{background:var(--primary-pressed);border-color:var(--primary-pressed);color:#fff}
.pub-cta .btn::after{content:"›";margin-left:6px;font-size:16px;line-height:1}
.pub-signin{color:var(--ink-muted)}.pub-signin:hover{color:var(--ink)}
.hero2{max-width:1440px;margin:0 auto;padding:40px var(--gutter) 0;text-align:center;overflow:clip}
.hero2-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--hairline-strong);border-radius:9999px;font-size:13px;color:var(--ink);text-decoration:none;background:var(--canvas)}
.hero2-badge i{width:1px;height:14px;background:var(--rule)}
.hero2-badge b{font-weight:500;color:var(--primary)}
.hero2 h1{font-size:clamp(30px,3.6vw,50px);font-weight:400;line-height:1.1;letter-spacing:-.025em;margin:18px auto 14px;max-width:32ch}
.hero2 h1 .l2{display:block;color:var(--ink-muted);font-weight:400}
.hero2 .lead{font-size:16px;color:var(--ink-muted);max-width:66ch;margin:0 auto 22px;line-height:1.55}
.hero2-cta{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 26px;border-radius:var(--r-lg);background:var(--primary);color:#fff;font-size:15px;font-weight:500;text-decoration:none;box-shadow:0 12px 30px rgba(33,93,176,.25),0 1px 3px rgba(15,23,42,.12)}
.hero2-cta:hover{background:var(--primary-pressed);color:#fff}
.hero2-cta svg{width:14px;height:14px}
.hero2-micro{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--ink-muted)}
.hero2-micro svg{width:15px;height:15px;color:var(--ink)}
.hero2-stage{position:relative;max-width:1180px;margin:20px auto 0;padding:40px 0 96px}
/* the lanes: the box reaches past the stage and is masked to nothing on all four sides, so the light fades into the
   page instead of ending in a straight clip line at the stage edges or at the section edge on a wide screen */
.streaks{position:absolute;top:-80px;bottom:-40px;left:0;right:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 180px),transparent),linear-gradient(to right,transparent,#000 180px,#000 calc(100% - 180px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 180px),transparent),linear-gradient(to right,transparent,#000 180px,#000 calc(100% - 180px),transparent);mask-composite:intersect}
.streaks i{position:absolute;left:-52vw;width:52vw;height:58px;margin-top:-29px;border-radius:9999px;filter:blur(24px) saturate(1.05);opacity:.6;will-change:transform;animation:laneR 7s linear infinite}
.streaks i::after{content:"";position:absolute;inset:28% 5%;border-radius:9999px;background:inherit}
.streaks i::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:6px;margin-top:-3px;border-radius:9999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 30%,#fff 50%,rgba(255,255,255,.95) 70%,transparent)}
.streaks .s1{top:22%;background:linear-gradient(90deg,transparent,#0ea5e9 22%,#215db0 78%,transparent);animation-duration:7s;animation-delay:-1.5s}
.streaks .s2{top:34%;background:linear-gradient(90deg,transparent,#6366f1 22%,#38bdf8 78%,transparent);animation-name:laneL;animation-duration:9s;animation-delay:-4s}
.streaks .s3{top:46%;background:linear-gradient(90deg,transparent,#215db0 22%,#818cf8 78%,transparent);animation-duration:6.5s;animation-delay:-2.5s}
.streaks .s4{top:56%;background:linear-gradient(90deg,transparent,#22d3ee 22%,#0ea5e9 78%,transparent);animation-name:laneL;animation-duration:8s;animation-delay:-5.5s}
.streaks .s5{top:66%;background:linear-gradient(90deg,transparent,#818cf8 22%,#215db0 78%,transparent);animation-duration:7.5s;animation-delay:-3s}
.streaks .s6{top:78%;background:linear-gradient(90deg,transparent,#38bdf8 22%,#6366f1 78%,transparent);animation-name:laneL;animation-duration:10s;animation-delay:-7s}
.streaks .s7{top:92%;height:64px;width:64vw;left:-64vw;background:linear-gradient(90deg,transparent,#215db0 12%,#6366f1 50%,#22d3ee 88%,transparent);animation-duration:12s;animation-delay:-6s}
.streaks .s8{top:6%;background:linear-gradient(90deg,transparent,#0ea5e9 22%,#818cf8 78%,transparent);animation-name:laneL;animation-duration:6s;animation-delay:-1s}
@keyframes laneR{from{transform:translateX(0)}to{transform:translateX(152vw)}}
@keyframes laneL{from{transform:translateX(152vw)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.streaks i{animation:none;transform:translateX(76vw)}.streaks .s2,.streaks .s4,.streaks .s6,.streaks .s8{transform:translateX(44vw)}}
.hero2-shot{position:relative;max-width:880px;margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid var(--hairline);background:var(--canvas);box-shadow:0 40px 90px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06)}
.hero2-shot img{display:block;width:100%;height:auto}
.hero2-card{position:absolute;right:3%;top:40%;width:256px;text-align:left;background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;padding:18px;box-shadow:0 30px 70px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06)}
.hero2-card .k{font-size:11px;color:var(--ink-muted);margin:0 0 6px}
.hero2-card .n{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}
.hero2-card .u{font-size:12px;color:var(--ink-muted);margin:2px 0 12px}
.hero2-card .track{position:relative;height:4px;border-radius:9999px;background:var(--hairline);margin:0 0 16px}
.hero2-card .track i{position:absolute;left:0;top:0;height:4px;width:61%;border-radius:9999px;background:var(--ink)}
.hero2-card .track b{position:absolute;left:61%;top:-5px;width:14px;height:14px;border-radius:9999px;background:var(--canvas);border:2px solid var(--ink);transform:translateX(-50%)}
.hero2-card .rows{display:grid;gap:6px;margin:0 0 14px;font-size:11.5px}
.hero2-card .rows div{display:flex;justify-content:space-between;gap:8px}
.hero2-card .rows span:last-child{color:var(--ink);font-weight:500}
.hero2-card .rows span:first-child{color:var(--ink-muted)}
.hero2-card .rows .sep{border-top:1px solid var(--hairline);padding-top:8px;margin-top:4px}
.hero2-card .go{display:block;text-align:center;height:36px;line-height:36px;border-radius:var(--r-md);background:var(--primary);color:#fff;font-size:12.5px;font-weight:500;text-decoration:none}
.hero2-card .note{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:10.5px;color:var(--ink-muted)}
.hero2-card .note i{width:5px;height:5px;border-radius:9999px;background:var(--primary)}
@media(max-width:900px){.hero2-card{position:relative;right:auto;top:auto;width:auto;max-width:420px;margin:20px auto 0}.hero2-stage{padding-bottom:40px}.hero2{padding-top:32px}}
/* who it is for, after the reference's feature deck: a header row with a pill action on the right, then three
   scenes, each an abstract render in one of the brand's hues (warm, magenta, violet: the gradient band read left to
   right) with the product's own chips and panels laid over it, then a title with accent words, the sentence and a
   soft link. The overlays are real text in real type; the render only carries colour and light. */
.who-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.who-head h2{margin:0;max-width:34ch}
.who-head h2 .l2{display:block;color:var(--ink-muted);font-weight:400}
.pill-link{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 16px;border:1px solid var(--hairline-strong);border-radius:9999px;background:var(--canvas);font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}
.pill-link::after{content:"›";font-size:16px;line-height:1}
.pill-link:hover{border-color:var(--ink)}
.who-grid{display:grid;grid-template-columns:1fr;gap:40px 24px}
.who{display:flex;flex-direction:column;min-width:0}
.scene{position:relative;aspect-ratio:5/6;max-height:520px;border-radius:12px;overflow:hidden;background:var(--surface);isolation:isolate;font-family:var(--mono)}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scene code{background:none;border:0;border-radius:0;padding:0;font-size:inherit;color:inherit}
.scene .glints i{position:absolute;width:4px;height:4px;border-radius:9999px;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.75);opacity:0;animation:glint 10s linear infinite}
.scene .glints i:nth-child(1){left:12%;top:78%;animation-delay:-1s}
.scene .glints i:nth-child(2){left:28%;top:88%;animation-delay:-4s;animation-duration:12s}
.scene .glints i:nth-child(3){left:44%;top:70%;animation-delay:-7s}
.scene .glints i:nth-child(4){left:58%;top:92%;animation-delay:-2.5s;animation-duration:9s}
.scene .glints i:nth-child(5){left:70%;top:64%;animation-delay:-5.5s;animation-duration:13s}
.scene .glints i:nth-child(6){left:84%;top:82%;animation-delay:-8s}
.scene .glints i:nth-child(7){left:92%;top:58%;animation-delay:-3.5s;animation-duration:11s}
@keyframes glint{0%{transform:translateY(0);opacity:0}15%{opacity:.9}70%{opacity:.5}100%{transform:translateY(-140px);opacity:0}}
.scene .tag{position:absolute;padding:6px 8px;border-radius:3px;background:var(--ink);color:#fff;font-size:10px;line-height:1;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.scene .lg{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 8px;border-radius:6px;background:rgba(255,255,255,.94);border:1px solid rgba(10,10,11,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font);font-size:12px;line-height:1;font-weight:500;color:var(--ink);white-space:nowrap;animation:floaty 7s ease-in-out infinite alternate}
.scene .lg .mark-svg{width:15px;height:15px;display:block;fill:currentColor}
.scene .p1{left:10%;top:13%}
.scene .p2{right:12%;top:22%;animation-delay:-2s}
.scene .p3{left:34%;top:32%;animation-delay:-4s}
.scene .p4{right:20%;top:44%;animation-delay:-1s}
.scene .p5{left:12%;top:53%;animation-delay:-3s}
.scene .p6{right:10%;top:64%;animation-delay:-5s}
.scene .p7{left:36%;top:73%;animation-delay:-2.5s}
.scene .h1{right:16px;top:66px;animation:none}
.scene .h2{left:16px;top:44%;animation-delay:-3s}
.scene .h3{right:16px;top:56%;animation-delay:-1.5s}
@keyframes floaty{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.scene .panel{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 16px 16px;border-radius:6px;background:#fff;border:1px solid rgba(10,10,11,.1);font-family:var(--font)}
.scene .panel .k{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.scene .panel .k::before{content:"";width:8px;height:8px;background:var(--ink)}
.scene .panel h4{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.scene .panel h4 span{font-size:11px;font-weight:400;color:var(--ink-muted);white-space:nowrap}
.scene .row{display:grid;grid-template-columns:minmax(0,1fr) 56px 66px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--hairline);font-size:12px}
.scene .row .n{display:flex;flex-direction:column;gap:2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .row .n code{align-self:flex-start;font-size:10px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene .row .bar{height:4px;border-radius:2px;background:var(--hairline);overflow:hidden}
.scene .row .bar i{display:block;height:100%;background:var(--ink);transform-origin:left;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
.scene .row .v{font-family:var(--mono);font-size:11px;line-height:1.2;text-align:right}
.scene .row .v small{display:block;margin-top:2px;font-size:9.5px;color:var(--ink-muted)}
.scene .w69{width:69%}.scene .w61{width:61%}.scene .w37{width:37%}.scene .w20{width:20%}
@keyframes grow{from{transform:scaleX(0)}}
.scene .panel .tag{position:static;display:inline-block;margin-top:12px;animation:none}
.scene .ask{position:absolute;left:16px;right:16px;top:16px;display:flex;align-items:center;padding:12px 14px;border-radius:6px;background:#fff;border:1px solid rgba(10,10,11,.1);font-size:12px;line-height:1;color:var(--ink);white-space:nowrap;overflow:hidden}
.scene .caret{display:inline-block;width:1px;height:13px;margin-left:3px;background:var(--ink);animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.scene .term{position:absolute;left:16px;right:16px;bottom:16px;margin:0;padding:14px 16px;border:0;border-radius:6px;background:#0a0a0b;color:#d9d9d9;font-size:11px;line-height:1.7;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere}
.scene .term .p{color:#7a7a7a}
.scene .term b{font-weight:400;color:var(--primary)}
.who h3{margin:20px 0 10px;font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.who h3 em{font-style:normal;color:var(--primary)}
.who p{flex:1;margin:0 0 16px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.who-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 14px;border-radius:6px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none}
.who-link::after{content:"→";font-size:14px;line-height:1}
.who-link:hover{background:var(--ghost-strong);color:var(--ink)}
@media(min-width:760px){.who-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.who-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}.scene{aspect-ratio:auto;height:400px}.scene .row{grid-template-columns:minmax(0,1fr) 40px 60px;gap:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.scene .glints i{animation:none;opacity:.6}.scene .lg,.scene .caret,.scene .row .bar i{animation:none}}
/* the hero carousel: a row of tabs above the console shot, one slide and one detail card per console page; slides
   cross-fade inside a box that keeps the shot's aspect, so the page never jumps between them */
.hero2-tabs{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.hero2-tabs button{height:34px;padding:0 14px;border-radius:9999px;border:1px solid rgba(17,20,24,.42);background:#fff;color:var(--ink);font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero2-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.hero2-tabs button.on,.hero2-tabs button.on:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hero2-tabs button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hero2-shot{aspect-ratio:1760/1222}
.hero2-shot .track{display:flex;height:100%;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hero2-shot .slide{position:relative;flex:0 0 100%;height:100%;margin:0}
.hero2-shot .slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.hero2-card{transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.hero2-card.enter-right{transform:translateX(160px);opacity:0;transition:none}
.hero2-card.enter-left{transform:translateX(-160px);opacity:0;transition:none}
.hero2-card.leave-left{transform:translateX(-160px);opacity:0}
.hero2-card.leave-right{transform:translateX(160px);opacity:0}
.hero2-stage.instant .track,.hero2-stage.instant .hero2-card{transition:none}
@media(prefers-reduced-motion:reduce){.hero2-shot .track,.hero2-card{transition:none}}
/* scroll-driven on a tall desktop viewport: the stage sticks below the header while the page scrolls, and passing
   the middle of each step triggers the same eased slide the tabs use, the detail card travelling further than the
   shot. The section clips with overflow:clip rather than hidden so the sticky stage works inside it. */
.hero2-scroller{position:relative}
@media(min-width:901px) and (min-height:820px){
.hero2-scroller.sticky .hero2-stage{position:sticky;top:72px;margin-top:0;padding:24px 0 48px}
.hero2-scroller.sticky .hero2-shot{max-width:min(880px,calc((100vh - 250px) * 1.44))}
.hero2-scroller.sticky .hero2-card{will-change:transform,opacity}
}
/* the hero, after the reference's composition: copy on the left, the river on the right, bleeding to the edge. Ten
   small labelled sources at the bottom left, each shedding a stream that joins one current, which thickens as it
   climbs to the mass at the top right under the one tag that matters. The points are drawn; the labels are text. */
.hero2-top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px 32px;align-items:center;text-align:left;max-width:1440px;margin:0 auto;padding:0}
.hero2-copy{min-width:0;padding:24px 0 40px}
.hero2-copy h1{font-size:clamp(34px,3.6vw,48px);margin:18px 0 14px;max-width:none}
.hero2-copy h1 .l2{font-size:.78em}
.hero2-copy .lead{margin:0 0 22px;max-width:46ch}
.hero2-copy .hero2-micro{justify-content:flex-start}
.hero2-swarm{position:relative;height:640px;min-width:0;margin-right:calc(-1 * var(--gutter))}
.hero2-swarm canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.swarm-tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}
.swarm-tag b,.swarm-tag.team,.swarm-tag.hub{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:5px 7px 4px;border-radius:3px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.swarm-tag.team{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(17,20,24,.14)}
.swarm-tag.hub{background:#2f56d6;color:#fff}
.swarm-tile{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(17,20,24,.1),0 6px 16px rgba(17,20,24,.08)}
.swarm-tile .mark-svg{width:20px;height:20px;fill:currentColor;display:block}
.swarm-tag[data-node="claude"] .swarm-tile{color:#d97757}
.swarm-tag[data-node="deepseek"] .swarm-tile{color:#4d6bfe}
.swarm-tag[data-node="vllm"] .swarm-tile{color:#1d4ed8}
@media(max-width:900px){.hero2-top{grid-template-columns:1fr;text-align:center;gap:0}.hero2-copy{padding:24px 0 8px}.hero2-copy h1{margin:18px auto 14px}.hero2-copy .lead{margin:0 auto 22px}.hero2-copy .hero2-micro{justify-content:center}.hero2-swarm{height:440px;margin:0 calc(-1 * var(--gutter)) 0 0}.swarm-tag b,.swarm-tag.team,.swarm-tag.hub{font-size:9.5px}.swarm-tile{width:30px;height:30px;border-radius:8px}.swarm-tile .mark-svg{width:16px;height:16px}}