/* =============================================================================
   nqd.css · NexQloud Drawback design system · palette E, Royal Indigo
   -----------------------------------------------------------------------------
   One stylesheet. Built from three inputs, in this order of authority:
   1. Mark's locked design rules: v3.3 site lock, sections 2.5 and 2.6.
   2. The 07_Rebrand palette E mockup: deck gradient, aurora wash, glass,
      cards, header, buttons and eyebrows.
   3. palette-e.css: the palette E token values, baked into :root below.
   v3.3 and 07_Rebrand share 26 class names with different rules; nothing here
   is concatenated from either file. Every color is a token (alpha masks and
   print use plain black and white).

   Contents
     0  Tokens ............ palette E, type, space, shape, motion; light and dark scopes
     1  Foundations ....... reset, base type, focus, skip link, layout, grid
     2  Grounds ........... deck, hero, light ground, aurora wash, arcs, strands
     3  Navigation ........ header, mega-menus, drawer, breadcrumb
     4  Actions ........... buttons, text links, segmented control, switch
     5  Text and labels ... eyebrow, headlines, lede, pills, badges, dated badge,
                            callouts, proves/limits, footnotes, disclosure marker
     6  Content blocks .... stats, cards, glass, steps, who does what, tables,
                            accordion, tabs, answer sequence
     7  Hero and routing .. hero product card, router band
     8  Money ............. estimator, pricing tiers, fees at your size, custom lane
     9  Partners .......... track cards, application form, what happens next
    10  Forms ............. label, input, select, textarea, choices, help, error
    11  Media ............. placeholder, browser frame, document card, document
                            visual, receipt, industry tiles, video slot, flow diagram
    12  Closing band
    13  Footer and sources
    14  Utilities
    15  Motion, forced colors, print

   Breakpoints: 1240 (footer), 1180 (header squeeze), 1100, 980 (one column;
   links fold into the menu), 768, 640 (phones), 480, 374.
   No sideways scroll from 320 to 1920px.
   ========================================================================== */


/* =============================================================================
   0  TOKENS
   ========================================================================== */
:root{
  color-scheme:light;

  /* Palette E accents (07_Rebrand, :root[data-palette="e"]) */
  --vital-ink:#3c45d4;    /* accent text, links, eyebrows, focus on light. 7.01:1 on #fff */
  --vital-from:#5a96f7;   /* focus ring on the deck, line art. Never text on light (2.94:1) */
  --vital-tint:#b7befb;   /* accent text on the deck only. Never on light (1.78:1) */
  --tint-soft:#e9ebff;    /* icon discs, hover fills, highlighted rows */
  --tint-mid:#dde0fe;     /* stronger fill. Use ink text on it, not muted (4.70:1) */
  --grad-vital:linear-gradient(135deg,#3881e3 0%,#6537d2 100%);   /* decoration only: dots, rules, bars */
  --grad-vital-x:linear-gradient(90deg,#3881e3 0%,#6537d2 100%);  /* meters and bars */
  --grad-num:linear-gradient(90deg,#3881e3 0%,#6537d2 100%);      /* big-number text only, 32px and up */

  /* Neutrals (07_Rebrand block shared by palettes A to E) */
  --ink:#171717;
  --paper:#fff;
  --muted:#626262;        /* secondary text. 6.10:1 on #fff, 5.84:1 on #fafafa */
  --faint:#888888;        /* borders only, never text (3.54:1) */
  --line:#e6e6e6;         /* card borders, rules */
  --field-line:#cdcdcd;   /* decorative tracks and connectors only (1.59:1) */
  --control-line:#888888; /* input, select, segmented and secondary-button borders (3.54:1) */
  --aurora-base:#fafafa;  /* the page ground */

  /* Status. Warn marks invalid fields and the "Rough estimate" dot; success marks a sent form. */
  --warn:#c56c00;  --warn-bg:#fcefd7;
  --success-fg:#267800; --success-bg:#eff7eb;
  /* Mode and status tones (pass 4): the palette's two gradient ends and its warn color, at text strength and as fills.
     --sealed-ink is the gradient's violet end (#6537d2). --standard-ink and --warn-ink darken the blue end and warn
     until 12px text passes AA on its fill (5.88:1 and 7.02:1). */
  --sealed-ink:#6537d2;   --sealed-tint:#efe8fd;
  --standard-ink:#1a58ad; --standard-tint:#e3eefc;
  --warn-ink:#7a4300;

  /* Grounds */
  --deck:linear-gradient(97deg,#1b1e24 0%,#0e1017 34%,#131830 62%,#1c2666 86%,#213086 100%);
  --deck-bloom:radial-gradient(118% 190% at 104% 48%,rgba(56,129,227,.22),rgba(101,55,210,.17) 40%,transparent 74%);
  --aurora-wash:
    radial-gradient(80% 55% at 12% 0%,rgba(56,129,227,.095),transparent 58%),
    radial-gradient(65% 50% at 96% 20%,rgba(101,55,210,.065),transparent 58%),
    radial-gradient(70% 45% at 30% 62%,rgba(56,129,227,.075),transparent 62%),
    radial-gradient(60% 45% at 88% 72%,rgba(101,55,210,.055),transparent 62%);
  --grad-ink:linear-gradient(135deg,#2f2f2f 0%,#171717 100%);   /* primary button on light */

  /* Glass and elevation */
  --ink-glass:rgba(14,15,22,.68);        /* header over the deck */
  --glass-bg:rgba(255,255,255,.94);      /* header over light, light glass panel */
  --glass-blur:blur(30px) saturate(1.4);
  --glass-border:1px solid rgba(255,255,255,.9);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.04),0 18px 42px -22px rgba(0,0,0,.28);
  --elev-1:0 2px 4px 0 rgba(0,0,0,.04);
  --elev-2:0 4px 12px 0 rgba(0,0,0,.04),0 1px 2px 0 rgba(0,0,0,.04);

  /* On the deck */
  --on-deck:#fff;
  --on-deck-2:rgba(255,255,255,.8);
  --on-deck-line:rgba(255,255,255,.18);
  --on-deck-fill:rgba(255,255,255,.08);

  /* Line art as RGB triplets: the arcs read them here, nqd.js reads the strand colors */
  --arc-a:56,129,227;     /* #3881e3 */
  --arc-b:101,55,210;     /* #6537d2 */
  --strand-a:183,190,251; /* --vital-tint */
  --strand-b:90,150,247;  /* --vital-from */

  /* Type: Lexend for text, IBM Plex Mono for labels, eyebrows, citations and table numbers */
  --font-sans:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --t-fine:11px; --t-meta:12px; --t-label:13px; --t-body:15px; --t-read:16px;
  --t-lead:18.75px; --t-h3:18.75px; --t-3:23.44px; --t-4:29.3px; --t-5:36.62px;
  --t-h1:clamp(34px,2.6vw + 14px,52px);
  --t-h2:clamp(29.3px,1.6vw + 14px,36.62px);
  --t-big:52px;
  --tracking-wide:.04em;

  /* Space: 8pt steps */
  --sp-05:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px;
  --sp-6:48px; --sp-8:64px; --sp-10:80px; --sp-12:96px;
  --gutter:clamp(16px,4vw,40px);
  --maxw:1200px;
  --nav-h:64px;
  --section-y:clamp(64px,6.5vw,104px);
  --hero-top:clamp(48px,6vw,96px);
  --hero-bottom:clamp(64px,8vw,112px);
  --overlap:96px;
  --anchor-offset:calc(var(--nav-h) + 16px);   /* in-page jumps and sticky panels land below the header */

  /* Shape and motion */
  --r-ctl:6px; --r-card:16px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* Scope tokens. Components read these, never the raw colors, so one class works
   on both grounds. Light is the default; .deck and .on-dark switch to the dark
   values; white surfaces inside the deck (cards, panels, forms) switch back. */
:root,.on-light,
.card,.glass,.form-card,.menu-panel,.receipt,.doc,.frame,.accordion,.table-wrap,.ph,
.callout,.proves,.product-win,.product-plain,.product-float,.router,.seg,.mock-win{
  --text:var(--ink);
  --text-2:var(--muted);
  --accent:var(--vital-ink);
  --rule:var(--line);
  --focus:var(--vital-ink);
  --hover-fill:var(--tint-soft);
  --btn-bg:var(--grad-ink);   --btn-fg:var(--paper);    --btn-glow:var(--paper);
  --btn2-bg:var(--paper);     --btn2-fg:var(--ink);     --btn2-line:var(--control-line); --btn2-glow:var(--vital-from);
}
.deck,.on-dark,.glass-dark,.site-header{
  --text:var(--on-deck);
  --text-2:var(--on-deck-2);
  --accent:var(--vital-tint);
  --rule:var(--on-deck-line);
  --focus:var(--vital-from);
  --hover-fill:var(--on-deck-fill);
  --btn-bg:var(--paper);      --btn-fg:var(--ink);      --btn-glow:var(--vital-from);
  --btn2-bg:transparent;      --btn2-fg:var(--on-deck); --btn2-line:rgba(255,255,255,.44); --btn2-glow:var(--paper);
}
.on-dark,.on-light{color:var(--text)}
.site-header.is-light,.site-header.is-open{
  --text:var(--ink);
  --text-2:var(--muted);
  --accent:var(--vital-ink);
  --rule:var(--line);
  --focus:var(--vital-ink);
  --hover-fill:var(--tint-soft);
  --btn-bg:var(--grad-ink);   --btn-fg:var(--paper);    --btn-glow:var(--paper);
  --btn2-bg:var(--paper);     --btn2-fg:var(--ink);     --btn2-line:var(--control-line); --btn2-glow:var(--vital-from);
}


/* =============================================================================
   1  FOUNDATIONS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--aurora-base);scroll-padding-top:var(--anchor-offset)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.menu-lock{overflow:hidden}
/* body has no background of its own, so the fixed aurora layer (section 2) shows through */
body{margin:0;min-width:320px;color:var(--text);font:400 var(--t-body)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset,legend,blockquote{margin:0}
h1,h2,h3,h4{font-weight:500;text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:600}
a{color:inherit}
img,video,canvas{max-width:100%}
img{height:auto}
svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{min-width:0;padding:0;border:0}
legend{padding:0}
table{border-collapse:collapse}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--vital-from) 30%,var(--paper));color:var(--ink)}

/* Focus: a 2px ring in the scope's focus color, --vital-ink on light, --vital-from on the deck */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
main:focus{outline:none}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}

/* Line icons from the sprite (src/partials/icons.svg) */
.i{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Skip link: the first focusable element on every page */
.skip{position:absolute;left:var(--sp-2);top:var(--sp-2);z-index:100;padding:12px 16px;border-radius:var(--r-ctl);background:var(--paper);color:var(--ink);box-shadow:var(--glass-shadow);font-weight:500;text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none;outline-color:var(--vital-ink)}

/* Layout: one container, 1200px of content, gutters clamp(16px, 4vw, 40px) */
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.section{position:relative;padding-block:var(--section-y)}
.section > .wrap{position:relative;z-index:1}
.section-head{max-width:780px;min-width:0;margin-bottom:var(--sp-6)}
.section-head.is-wide{max-width:none}
.section-cta{margin-top:var(--sp-5)}
.stack > * + *{margin-top:var(--stack,var(--sp-2))}

/* Grid utilities. Every multi-column grid becomes one column at 980px.
   minmax(0,1fr), never 1fr: a wide child can't push a phone sideways. */
.grid{display:grid;gap:var(--gap,var(--sp-3));min-width:0}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-4) var(--sp-8)}
.split-even{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-8)}
.align-center{align-items:center}
.align-start{align-items:start}
.align-end{align-items:end}
@media (max-width:980px){
  .cols-2,.cols-3,.cols-4,.split,.split-even{grid-template-columns:minmax(0,1fr)}
}

/* Long-form text (guides, legal) */
.prose{max-width:720px;font-size:var(--t-read);line-height:1.7;color:var(--text)}
.prose > * + *{margin-top:var(--sp-2)}
.prose h2{margin-top:var(--sp-6);font-size:var(--t-3);line-height:1.25;letter-spacing:-.014em}
.prose h3{margin-top:var(--sp-4);font-size:var(--t-h3);line-height:1.3}
.prose h4{margin-top:var(--sp-3);font-size:var(--t-read);line-height:1.35}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:6px}
.prose li::marker{color:var(--text-2)}
.prose a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.24em}


/* =============================================================================
   2  GROUNDS
   Dark only at the two ends of a page: the hero and the closing band, on the
   deck gradient. Between them, one continuous pale ground: the aurora wash on
   #fafafa. No seams: the wash is one fixed layer and nothing between the two
   decks paints a background of its own.
   ========================================================================== */

/* The aurora wash: painted once at window size, behind everything. It never tiles. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--aurora-wash)}

/* The deck: palette E gradient plus its bloom. Holds the hero and the closing band. */
.deck{position:relative;isolation:isolate;overflow:hidden;background:var(--deck);color:var(--text)}
.deck::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--deck-bloom)}

/* Hero: slides under the sticky header, so the header's dark glass sits on the deck */
.hero{margin-top:calc(-1 * (var(--nav-h) + env(safe-area-inset-top,0px)));padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--hero-top));padding-bottom:var(--hero-bottom)}
.hero.has-overlap{padding-bottom:calc(var(--hero-bottom) + var(--overlap))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--sp-6);align-items:center}
.hero-copy{min-width:0}
.hero .h1{max-width:13.5em}
.hero .lede{max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5)}
.hero-link{margin-top:var(--sp-1)}
.hero-note{margin-top:var(--sp-3);font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.hero-aside{min-width:0;justify-self:end;width:100%;max-width:540px}
.hero-calm .hero-copy{max-width:800px}            /* text-only hero: the H1 band without art */
.hero-foot{display:flex;justify-content:flex-end;margin-top:var(--sp-3)}

/* The light ground between the two decks */
.light{position:relative}
.overlap{position:relative;z-index:2;margin-top:calc(-1 * var(--overlap))}

/* Arcs: faint, still curves on the light ground (build.py writes the SVG). The
   mask fades them out at the section's top and bottom, so no curve ends on a seam. */
.arcs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.arcs svg{position:absolute;inset:0;width:100%;height:100%}
.arcs path{fill:none;stroke-width:.9;vector-effect:non-scaling-stroke}
.arcs .p1{stroke:rgba(var(--arc-a),.16)}
.arcs .p2{stroke:rgba(var(--arc-b),.12)}

/* Strands: slow canvas lines on the deck (drawn by nqd.js, colors from --strand-a/-b,
   the edge fade drawn in the canvas: a CSS mask on a moving layer costs every frame).
   No moving dots. Paused off screen, paused by default for reduced motion. */
.strands{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}

/* The visible pause control for the strands: [data-motion] on a .motion-btn */
.motion-btn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:32px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:transparent;color:var(--text-2);font:500 var(--t-meta)/1 var(--font-mono);letter-spacing:var(--tracking-wide);cursor:pointer}
.motion-btn:hover{color:var(--text);background:var(--hover-fill)}
.motion-btn .i{width:14px;height:14px}
.motion-btn .i-play,.motion-btn.is-paused .i-pause{display:none}
.motion-btn.is-paused .i-play{display:block}

@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-aside{justify-self:start;max-width:600px}
}
@media (max-width:768px){
  :root{--overlap:64px}
}
@media (max-width:640px){
  .arcs{display:none}
  .hero .lede{font-size:17px}
}
@media (max-width:479px){
  .hero-actions .btn{width:100%}
}


/* =============================================================================
   3  NAVIGATION
   Header: sticky, 64px, glass. Dark over the deck, white over the light ground
   (nqd.js toggles .is-light). One CTA, plus Log in. Menus open on click, Enter
   and Space, never on hover alone; Esc closes. They fold into a drawer at 980px.
   ========================================================================== */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--nav-h);color:var(--text)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--ink-glass);box-shadow:inset 0 -1px 0 var(--on-deck-line);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.site-header.is-light::before,.site-header.is-open::before{background:var(--glass-bg);box-shadow:inset 0 -1px 0 var(--line),var(--elev-1)}
.header-inner{display:flex;align-items:center;gap:var(--sp-3);height:100%}

/* Lockup: the NexQloud wordmark exactly as supplied, then the product name in type.
   The wordmark's letters are currentColor: white over the deck, ink once the header turns light. */
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-height:44px;color:inherit;text-decoration:none;white-space:nowrap;border-radius:var(--r-ctl)}
.nq-word{display:block;width:122px;height:24px}
.brand-product{padding-left:12px;border-left:1px solid var(--rule);font:500 17px/20px var(--font-sans);letter-spacing:-.01em}

.site-nav{display:flex;align-items:center;margin-left:auto}
.nav-menus{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--text-2);font:400 var(--t-body)/1 var(--font-sans);white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav-btn:hover,.nav-btn[aria-expanded="true"]{color:var(--text);background:var(--hover-fill)}
.nav-btn.is-current,.nav-btn[aria-current="page"]{color:var(--text)}
.nav-btn.is-current::after,.nav-btn[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:var(--r-pill);background:var(--accent)}
button.nav-btn.is-current::after{right:30px}
.nav-chev{width:14px;height:14px;transition:transform .2s var(--ease)}
.nav-btn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-item-login{margin-left:9px}
.nav-item-login::before{content:"";position:absolute;left:-6px;top:50%;width:1px;height:20px;margin-top:-10px;background:var(--rule)}
.nav-cta-wrap{display:flex;flex:none}
.site-header.cta-quiet:not(.is-light) .nav-cta{background:transparent;color:var(--text);border-color:currentColor;box-shadow:none}   /* the hero's own primary stays the one filled button */
.site-header.cta-quiet:not(.is-light) .nav-cta::after{display:none}
.site-header.cta-quiet.starts-light .nav-cta{background:transparent;color:var(--ink);border-color:var(--control-line);box-shadow:none}   /* a light page (no deck hero) whose card holds the filled button; on a deck page the header button fills again once the hero scrolls away */
.site-header.cta-quiet.starts-light .nav-cta::after{display:none}
.nav-cta{min-height:40px;padding-inline:var(--sp-2);font-size:14px;white-space:nowrap}
.menu-toggle{display:none}

/* Mega-menu panels: white paper under the header. nqd.js sets --nudge so a panel
   never runs past the window's edge; translate is separate from the opening animation. */
.menu-panel{position:absolute;top:calc(100% + 10px);left:-6px;z-index:60;width:360px;max-width:calc(100vw - 24px);padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--text);box-shadow:var(--glass-shadow);translate:var(--nudge,0px) 0;animation:menu-in .16s var(--ease)}
.nav-item.is-end .menu-panel{left:auto;right:-6px}
.menu-panel.is-wide{width:600px}
.menu-panel.is-industries{width:640px}
.menu-panel.is-narrow{width:300px}
.menu-list{display:grid;gap:2px}
.menu-list.two{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column}
.menu-link{display:block;min-height:44px;padding:10px 12px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none}
.menu-link:hover{background:var(--aurora-base)}
.menu-link:hover .menu-label,.menu-link[aria-current="page"] .menu-label{color:var(--vital-ink)}
.menu-label{display:flex;align-items:center;gap:6px;font-weight:500;line-height:1.35}
.menu-label .i{width:16px;height:16px}
.menu-desc{display:block;margin-top:2px;font-size:var(--t-label);line-height:1.45;color:var(--muted)}
.menu-scope{padding:12px 12px 8px;font-size:var(--t-body);line-height:1.5;color:var(--muted)}
.menu-lead{margin-bottom:4px;padding-bottom:12px;border-bottom:1px solid var(--line);border-radius:var(--r-ctl) var(--r-ctl) 0 0}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Desktop squeeze between 981 and 1180px */
@media (min-width:981px) and (max-width:1180px){
  .header-inner{gap:var(--sp-2)}
  .nav-btn{gap:4px;padding-inline:7px;font-size:14px}
  .nav-btn.is-current::after{left:7px;right:7px}
  button.nav-btn.is-current::after{right:25px}
  .nav-item-login{margin-left:7px}
  .brand-product{font-size:16px}
  .nav-cta{padding-inline:12px}
}
@media (min-width:981px) and (max-width:1060px){
  .cta-tail{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* Drawer under 980px: the same menus become accordion groups; the CTA stays in the bar */
@media (max-width:980px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);flex:none;min-height:44px;min-width:44px;padding:0 12px 0 10px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:transparent;color:inherit;font:500 var(--t-label)/1 var(--font-mono);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer}
  .site-header.is-light .menu-toggle,.site-header.is-open .menu-toggle{border-color:var(--control-line)}
  .menu-toggle .i{width:20px;height:20px}
  .menu-toggle[aria-expanded="true"] .i-menu,.menu-toggle[aria-expanded="false"] .i-close{display:none}
  .header-inner{gap:var(--sp-1)}
  .nav-cta-wrap{margin-left:auto}
  .site-nav{display:none;position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;z-index:49;flex-direction:column;align-items:stretch;margin:0;padding:var(--sp-1) max(var(--gutter),env(safe-area-inset-right,0px)) calc(var(--sp-4) + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
  .site-header.is-open .site-nav{display:flex;animation:drawer-in .24s var(--ease)}
  .nav-menus{flex-direction:column;align-items:stretch;gap:0}
  .nav-item + .nav-item{border-top:1px solid var(--line)}
  .nav-item-login{margin-left:0}
  .nav-item-login::before{display:none}
  .site-header.is-open .nav-btn{width:100%;justify-content:space-between;min-height:60px;padding:0 2px;border-radius:0;background:none;color:var(--ink);font-size:var(--t-lead)}
  .site-header.is-open .nav-btn::after{display:none}
  .nav-btn .nav-chev{width:20px;height:20px;color:var(--muted)}
  .menu-panel,.nav-item.is-end .menu-panel,.menu-panel.is-wide,.menu-panel.is-industries,.menu-panel.is-narrow{position:static;width:auto;max-width:none;padding:0 0 var(--sp-2);border:0;border-radius:0;background:none;box-shadow:none;translate:none;animation:none}
  .menu-list.two{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .menu-link{padding:10px 8px}
  .menu-scope{padding:4px 8px 8px}
}
@keyframes drawer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .menu-toggle{padding:0}
  .menu-toggle .toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* Phones: the bar keeps the wordmark, the one CTA and the menu button */
@media (max-width:480px){
  .site-header .brand-product{display:none}
}
@media (max-width:374px){
  .cta-tail{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* "Apply to partner" reads "Apply" */
  .header-inner{gap:6px}
  .nav-cta{padding-inline:9px;font-size:13px}
}

/* Breadcrumb: Home › Section › Page, in a nav landmark labeled "Breadcrumb" */
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.breadcrumb li{display:inline-flex;align-items:center}
.breadcrumb li + li::before{content:"\203A";content:"\203A" / "";margin:0 8px;color:var(--text-2)}
.breadcrumb a{display:inline-block;padding-block:3px;color:var(--text-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.breadcrumb a:hover{color:var(--text);text-decoration-color:currentColor}
.breadcrumb [aria-current="page"]{color:var(--text)}
.breadcrumb + .eyebrow{margin-top:var(--sp-4)}


/* =============================================================================
   4  ACTIONS
   Buttons: 6px rectangles, 48px tall (40px in the header). Never pills.
   No colored gradient behind white text: white on the E gradient is 3.88:1.
   Light ground: charcoal primary, white secondary with a gray border.
   Deck: white primary; the second action is a text link with an arrow, or an
   outline .btn-secondary where the copy calls for a second button.
   ========================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:48px;padding:0 var(--sp-3);border:1px solid transparent;border-radius:var(--r-ctl);font:500 var(--t-body)/1.2 var(--font-sans);letter-spacing:-.005em;text-align:center;text-decoration:none;max-width:100%;text-wrap:balance;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.btn:hover::after{opacity:.1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--elev-1)}
.btn-primary::after{background:var(--btn-glow)}
.btn-secondary{background:var(--btn2-bg);color:var(--btn2-fg);border-color:var(--btn2-line)}
.btn-secondary::after{background:var(--btn2-glow)}
.btn-sm{min-height:40px;padding-inline:var(--sp-2);font-size:14px}
.btn-block{display:flex;width:100%}
.btn .i{width:18px;height:18px}
.btn[aria-disabled="true"],.btn:disabled{cursor:not-allowed;opacity:.55}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4)}

/* Text links. .link-arrow is the "text link with an arrow"; the arrow moves 3px on hover. */
.link{color:var(--accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.link:hover{text-decoration-color:currentColor}
/* inline-block, so a wrapped link keeps its arrow after the last word */
.link-arrow{display:inline-block;min-height:44px;padding-block:11px;line-height:1.45}
.link-arrow .i{display:inline-block;width:16px;height:16px;margin-left:6px;vertical-align:-3px;transition:transform .2s var(--ease)}
.link-arrow:hover .i{transform:translateX(3px)}
/* a button that reads as a link ("Use the averages again", "Show the math") */
.btn-text{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;color:var(--accent);font:500 var(--t-label)/1.4 var(--font-sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);cursor:pointer}
.btn-text:hover{text-decoration-color:currentColor}

/* Segmented control: a radio group, so arrow keys move between options.
   With [data-seg="name"], nqd.js shows the matching [data-seg-panel="name:value"].
   With [data-modes] around it, it swaps every [data-std]/[data-sealed] figure. */
.seg{display:flex;gap:4px;padding:4px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:var(--aurora-base);color:var(--ink)}
.seg-opt{position:relative;flex:1 1 0;min-width:0}
.seg-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg-opt span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:var(--r-ctl);line-height:1.25;color:var(--ink);text-align:center;white-space:nowrap;pointer-events:none;transition:background-color .15s var(--ease),color .15s var(--ease)}
.seg-opt input:hover + span{background:var(--tint-soft)}
.seg-opt input:checked + span{background:var(--ink);color:var(--paper)}
.seg-opt input:focus-visible + span{outline:2px solid var(--vital-ink);outline-offset:2px}
.seg-num .seg-opt span{font-family:var(--font-mono);font-weight:500}
.seg.is-inline{display:inline-flex}
.seg-sm{padding:3px;gap:3px}
.seg-sm .seg-opt span{min-height:32px;padding:4px 10px;font-size:14px}
/* many options: they wrap instead of squeezing (the CAPE answer, "Type your amount") */
.seg-wrap{flex-wrap:wrap}
.seg-wrap .seg-opt{flex:1 1 auto}
@media (max-width:640px){
  .seg-opt span{min-height:44px}
  .seg-sm .seg-opt span{min-height:36px}
  .seg-wrap .seg-opt{flex-basis:calc(50% - 4px)}
}

/* Switch: a checkbox with role="switch" */
.switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.switch input{position:absolute;width:1px;height:1px;opacity:0}
.switch-track{position:relative;flex:none;width:44px;height:26px;border:1px solid var(--control-line);border-radius:var(--r-pill);background:var(--paper);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease),background-color .2s var(--ease)}
.switch input:checked + .switch-track{border-color:var(--ink);background:var(--ink)}
.switch input:checked + .switch-track::after{transform:translateX(18px);background:var(--paper)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--focus);outline-offset:2px}
.switch-label{font-weight:500;color:var(--text)}


/* =============================================================================
   5  TEXT AND LABELS
   Lexend 400, 500 and 600 for text. IBM Plex Mono for labels, eyebrows,
   citations and table numbers. Body 15px on a 1.6 line height.
   ========================================================================== */
.eyebrow{display:flex;align-items:center;gap:10px;font:500 var(--t-label)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";flex:none;width:10px;height:10px;border:2px solid currentColor;border-radius:var(--r-pill)}

.h1{font:500 var(--t-h1)/1.06 var(--font-sans);letter-spacing:-.03em;color:var(--text);text-wrap:balance}
.h2{font:500 var(--t-h2)/1.12 var(--font-sans);letter-spacing:-.022em;color:var(--text);text-wrap:balance}
.h3{font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text)}
.h4{font:500 var(--t-read)/1.35 var(--font-sans);color:var(--text)}
.eyebrow + .h1{margin-top:var(--sp-3)}
.eyebrow + .h2,.eyebrow + .h3{margin-top:var(--sp-2)}
.lede{font:400 var(--t-lead)/1.55 var(--font-sans);color:var(--text-2);max-width:40em}
.h1 + .lede,.h2 + .lede{margin-top:var(--sp-3)}
.accent{color:var(--accent)}
.body-2{color:var(--text-2)}
.caption{font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.fine{font-size:var(--t-meta);line-height:1.55;color:var(--text-2)}
.label-mono{font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--text-2)}
.kicker{font:500 var(--t-meta)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}

/* Pills: mono tags with a gradient dot (programs, features). Not interactive. */
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--aurora-base);font:500 var(--t-label)/1 var(--font-mono);color:var(--text)}
.pill::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--r-pill);background:var(--grad-vital)}
.deck .pill,.on-dark .pill{background:var(--on-deck-fill)}

/* Badges: small status labels. No green checks, no alarm colors. */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;max-width:100%;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.badge .i{width:12px;height:12px;stroke-width:2}
/* "Rough estimate": ink on --warn-bg with a --warn dot (--warn as text is 3.35:1, too low) */
.badge-est{border-color:color-mix(in srgb,var(--warn) 30%,var(--warn-bg));background:var(--warn-bg);color:var(--ink)}
.badge-est::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--r-pill);background:var(--warn)}
/* sample data: product screens, receipts, documents */
.badge-demo{border-style:dashed;border-color:var(--control-line);color:var(--ink)}
.deck .badge,.on-dark .badge{border-color:var(--on-deck-line);background:var(--on-deck-fill);color:var(--on-deck)}

/* Mode badges. Sealed leads (decision 15, October 5, 2026): it comes first in every pair, and Standard follows as the lower-cost option
   ("save 2 points"). Neither label may look selected; only a real control in sign-up S3 starts selected. Never "Most popular". */
.mode{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--paper);font:500 var(--t-meta)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.mode::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid var(--accent);border-radius:50%}
/* both modes carry the same marker: neither label may look selected */
.mode-plus,.mode-save{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--text-2)}
/* plain gloss under a mode label (pass 3; Standard per decision 22): "No cloud operator or engineer can read it." · "May use outside AI. Staff access logged."; compact in tables */
.mode-gloss{display:block;margin-top:6px;font:400 var(--t-label)/1.4 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--text-2);white-space:normal}
.table .mode-gloss,.est-modes .mode-gloss{font-size:var(--t-meta);line-height:1.35}
.deck .mode,.on-dark .mode{background:var(--on-deck-fill)}

/* "Recommended" tag: only when the visitor's own answer earns it (sign-up S3, question arm), never on a page */
.tag-rec{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--tint-soft);font:500 var(--t-fine)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--vital-ink);white-space:nowrap}
.tag-rec .i{width:12px;height:12px;stroke-width:2.2}

/* Dated badge: "Updated October 5, 2026" on guides and data pages. Neutral gray, never a countdown. */
.dated{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:28px;padding:3px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);font:500 var(--t-meta)/1.35 var(--font-mono);color:var(--text-2)}
.dated .i{width:14px;height:14px}
.dated time{color:var(--text)}

/* Proof bar: four short statements, small caps, each a link to its proof */
.proof-bar{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4)}
.proof-bar a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text);text-decoration:none}
.proof-bar a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--grad-vital)}
.proof-bar a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.24em}

/* Callouts: note (the default), caution, plain (honest limits, never folded on phones) */
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-2);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--vital-ink);border-radius:var(--r-card);background:var(--paper);color:var(--text)}
.callout > .i{width:22px;height:22px;margin-top:1px;color:var(--vital-ink)}
.callout-title{font:500 var(--t-label)/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vital-ink)}
.callout-body{margin-top:4px;font-size:var(--t-read);line-height:1.6;color:var(--ink)}
.callout-body > * + *{margin-top:var(--sp-1)}
.callout-caution{border-left-color:var(--warn);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 22%,var(--warn-bg))}
.callout-caution .callout-title{color:var(--ink)}
.callout-plain{grid-template-columns:minmax(0,1fr);border-left-width:1px}
.callout-plain .callout-title{color:var(--ink)}
.callout ol{counter-reset:lim;display:grid;gap:10px;margin-top:var(--sp-2)}
.callout ol > li{position:relative;padding-left:32px;counter-increment:lim}
.callout ol > li::before{content:counter(lim);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font:500 var(--t-fine)/1 var(--font-mono);color:var(--muted)}
@media (max-width:640px){
  .callout{grid-template-columns:minmax(0,1fr);padding:var(--sp-3)}
}

/* What this proves, and its limits: two plain columns, no warning colors */
.proves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden}
.proves-col{min-width:0;padding:var(--sp-3) var(--sp-4)}
.proves-col + .proves-col{border-left:1px solid var(--line);background:var(--aurora-base)}
.proves-h{font:500 var(--t-label)/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.proves ul{display:grid;gap:12px;margin-top:var(--sp-2)}
.proves li{position:relative;padding-left:28px;color:var(--ink)}
.proves li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--vital-ink);border-bottom:2px solid var(--vital-ink);transform:rotate(-45deg)}
.proves-col + .proves-col li::before{top:.7em;width:12px;height:0;border-left:0;border-bottom:2px solid var(--muted);transform:none}
@media (max-width:768px){
  .proves{grid-template-columns:minmax(0,1fr)}
  .proves-col + .proves-col{border-left:0;border-top:1px solid var(--line)}
}

/* Footnote markers. [n] links to the folded Sources (build.py numbers them);
   * links to its footnote; † links to the licensing disclosure in the footer. */
.fn-sup{font-size:max(11px,.62em);line-height:0;vertical-align:super;font-family:var(--font-mono);font-weight:500;letter-spacing:0;margin-left:1px}
.fn{padding:0 1px;border-radius:2px;color:var(--accent);text-decoration:none}
.fn:hover{text-decoration:underline;text-underline-offset:2px}
.h1 .fn-sup,.h2 .fn-sup{font-size:max(11px,.34em);vertical-align:.9em}
/* two-beat headline (decision 18): the outcome, then the second value, each on its own line; the second beat in the accent */
.h1 .beat{display:block}
.h1 .beat + .beat{color:var(--vital-ink)}
.deck .h1 .beat + .beat{color:var(--vital-tint)}
.ast{padding:0 1px;color:var(--accent);font:500 .8em/1 var(--font-mono);vertical-align:.45em;text-decoration:none}
.ast:hover{text-decoration:underline;text-underline-offset:2px}
.fn-disc{display:inline-block;min-width:14px;padding:0 2px;border-radius:2px;color:var(--accent);font:500 .8em/1 var(--font-mono);text-align:center;text-decoration:none;vertical-align:.45em}
.fn-disc:hover{text-decoration:underline;text-underline-offset:2px}
/* inline markers are exempt from the 24px target rule (WCAG 2.5.8, inline), but get a 24px hit area anyway */
.fn,.ast,.fn-disc{position:relative}
.fn::after,.ast::after,.fn-disc::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}
.footnote{max-width:62em;font-size:var(--t-meta);line-height:1.6;color:var(--text-2)}
.footnote:target{background:var(--tint-soft);outline:6px solid var(--tint-soft);border-radius:2px}

/* To-be-confirmed values ({Legal entity}, {number}): build.py wraps them; --release refuses them */
.tbc{padding:1px 5px;border-radius:4px;background:var(--tint-mid);box-shadow:inset 0 -1px 0 var(--vital-ink);font:500 .88em/1.5 var(--font-mono);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}


/* =============================================================================
   6  CONTENT BLOCKS
   White cards only where they hold data: 16px radius, 1px border, glass shadow.
   Prose and features sit on the pale ground with a top rule.
   ========================================================================== */

/* Big numbers: Lexend 600 at 52px, gradient text (38px at 640px, 32px at 374px).
   inline-block, so the gradient spans the figure, not the column. Large text: 3:1 needed,
   the lightest stop measures 3.77:1 on white and 3.61:1 on #fafafa. */
.big-num{display:inline-block;font:600 var(--t-big)/1.05 var(--font-sans);letter-spacing:-.03em;color:var(--vital-ink);white-space:nowrap;padding-bottom:4px;font-variant-numeric:tabular-nums}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .big-num{background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.big-num small{font-size:.4em;font-weight:500;letter-spacing:-.01em;color:var(--vital-ink);-webkit-text-fill-color:var(--vital-ink)}
.big-num .ast{font-size:.4em;font-weight:500;vertical-align:1.05em;margin-left:2px;color:var(--vital-ink);-webkit-text-fill-color:var(--vital-ink)}
.deck .big-num,.on-dark .big-num{background:none;color:var(--on-deck);-webkit-text-fill-color:var(--on-deck)}
.deck .big-num small,.deck .big-num .ast,.on-dark .big-num small{color:var(--vital-tint);-webkit-text-fill-color:var(--vital-tint)}
@media (max-width:640px){ .big-num{font-size:38px} }
@media (max-width:374px){ .big-num{font-size:32px} }

/* Stat row: the big-number band. Each stat shows its source and date (.stat-src). */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:var(--sp-1) 0}
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{min-width:0;padding:28px 32px 26px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:0}
.stat-label{margin-top:10px;color:var(--text-2)}
.stat-src{margin-top:8px;font:400 var(--t-meta)/1.5 var(--font-mono);color:var(--text-2)}
.card.stats{padding:var(--sp-1) 0}
@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats > .stat:nth-child(odd){border-left:0}
  .stats > .stat:nth-child(n+3){border-top:1px solid var(--rule)}
  .stats-3{grid-template-columns:minmax(0,1fr)}
  .stats-3 > .stat{border-left:0}
  .stats-3 > .stat + .stat{border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  .stat{padding:20px 18px}
  .stat-label{font-size:14px}
}
@media (max-width:420px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .stats > .stat{border-left:0}
  .stats > .stat + .stat{border-top:1px solid var(--rule)}
}

/* Cards: the data card. White, 16px, 1px border, --glass-shadow. */
.card{min-width:0;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--text);box-shadow:var(--glass-shadow)}
.card-lg{padding:var(--sp-5)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.card-title{font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text)}
:where(.card) p{color:var(--text-2)}
.card-title + p{margin-top:var(--sp-1)}
.card-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-pill);background:var(--tint-soft);color:var(--vital-ink)}
.card-ic .i{width:22px;height:22px}
.deck .card-ic,.on-dark .card-ic{background:var(--on-deck-fill);color:var(--vital-tint)}

/* Key-value rows: label left, mono figure right (result lines, fee lines) */
.kv{border-top:1px solid var(--rule)}
.kv > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);padding:12px 0;border-bottom:1px solid var(--rule)}
.kv dt{min-width:0;color:var(--text-2)}
.kv dd{flex:none;text-align:right;font:500 var(--t-body)/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text)}
.kv dd small{display:block;font:400 var(--t-meta)/1.4 var(--font-mono);color:var(--text-2)}
.kv .is-key dt{font-weight:500;color:var(--text)}
.kv .is-key dd{font-size:20px;color:var(--accent)}

/* Link card: the title link stretches over the whole card */
.card-link{position:relative;display:flex;flex-direction:column;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card-link:hover{border-color:color-mix(in srgb,var(--vital-ink) 45%,var(--line))}
.card-link .card-title a{color:inherit;text-decoration:none}
.card-link .card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.card-link .card-title a:focus-visible{outline:none}
.card-link .card-title a:focus-visible::after{outline:2px solid var(--focus);outline-offset:2px}
.card-link:hover .card-title{color:var(--vital-ink)}
.card-go{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--sp-2);font:500 var(--t-label)/1.3 var(--font-mono);color:var(--vital-ink)}
.card-go .i{width:16px;height:16px;transition:transform .2s var(--ease)}
.card-link:hover .card-go .i{transform:translateX(3px)}

/* Feature: an open card on the pale ground. Prose, not data, so no white fill. */
.feature{min-width:0;padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.feature .card-ic{margin-bottom:var(--sp-2)}
.feature h3{font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em}
.feature p{margin-top:var(--sp-1);color:var(--text-2)}
.feature .link-arrow{margin-top:4px}

/* Glass panels: light glass on the pale ground, dark glass on the deck */
.glass{border:var(--glass-border);border-radius:var(--r-card);background:var(--glass-bg);color:var(--text);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.glass-dark{border:1px solid var(--on-deck-line);border-radius:var(--r-card);background:rgba(255,255,255,.06);color:var(--text);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.glass-pad{padding:var(--sp-5)}

/* Check list: icon disc plus a short fact */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
.checks li{display:flex;align-items:center;gap:var(--sp-2);min-width:0;font-size:var(--t-read);line-height:1.45;color:var(--text)}
.checks .card-ic{width:44px;height:44px}
@media (max-width:640px){ .checks{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)} }

/* Never list: what we never ask for. Neutral circles, no alarm icons. */
.never{display:grid;gap:10px}
.never li{display:flex;align-items:flex-start;gap:12px;color:var(--text)}
.never-x{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;border:1px solid var(--rule);border-radius:50%}
.never-x .i{width:12px;height:12px;stroke-width:2;color:var(--text-2)}

/* Steps: a numbered sequence, horizontal on desktop, vertical at 980px */
.steps{--n:4;--gap:var(--sp-4);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--sp-3) var(--gap)}
.steps-3{--n:3}
.steps-5{--n:5}
.step{position:relative;min-width:0}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--vital-ink);border-radius:var(--r-pill);background:var(--paper);font:500 var(--t-label)/1 var(--font-mono);color:var(--vital-ink)}
.step:not(:last-child)::before{content:"";position:absolute;top:18px;left:44px;right:calc(8px - var(--gap));height:1px;background:var(--field-line)}
.step h3{margin-top:var(--sp-2);font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em}
.step p{margin-top:var(--sp-1);color:var(--text-2)}
.step-time{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-1);padding:3px 10px;border:1px solid var(--rule);border-radius:var(--r-pill);font:500 var(--t-meta)/1.4 var(--font-mono);color:var(--text-2)}
.step-time .i{width:14px;height:14px}
.deck .step-n{background:transparent;border-color:var(--vital-tint);color:var(--vital-tint)}
@media (max-width:980px){
  .steps,.steps-3,.steps-5{--n:1}
  .step{padding-left:52px}
  .step-n{position:absolute;left:0;top:0}
  .step h3{margin-top:6px}
  .step:not(:last-child)::before{top:44px;left:18px;right:auto;bottom:calc(8px - var(--sp-3));width:1px;height:auto}
}

/* Who does what: three roles, equal weight. The agent drafts, your licensed broker
   reviews and files, you approve. Close with the one-line "What we are not". */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
.role{position:relative;display:flex;flex-direction:column;min-width:0;padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.role-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1);flex-wrap:wrap}
.role-who{margin-top:var(--sp-2)}
.role h3{margin-top:4px;font:500 var(--t-3)/1.2 var(--font-sans);letter-spacing:-.015em;color:var(--text)}
.role-list{display:grid;gap:8px;margin-top:var(--sp-2)}
.role-list li{position:relative;padding-left:18px;color:var(--text-2)}
.role-list li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:1.5px;background:var(--accent)}
.role .step-time{align-self:flex-start;margin-top:var(--sp-2)}
.roles-not{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:var(--sp-5);padding:var(--sp-2) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--text)}
.roles-not b{font:500 var(--t-label)/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.roles-not .link{white-space:nowrap}
@media (max-width:980px){
  .roles{grid-template-columns:minmax(0,1fr)}
}

/* Tables: comparison and data. Numbers in mono, right-aligned, tabular.
   .table-wrap scrolls on its own at narrow widths with a sticky first column
   and a "Swipe to compare" hint. .table-stack turns each row into a card on
   phones instead (give its parts explicit table roles and .cell-label spans). */
.table-wrap{position:relative;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--glass-shadow)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-body);line-height:1.45;color:var(--ink)}
.table caption{caption-side:top;padding:18px 20px 4px;text-align:left;font:500 var(--t-meta)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table th,.table td{padding:14px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.table thead th{border-top:0;padding-top:16px;font:500 var(--t-meta)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);vertical-align:bottom}
.table tbody th{font-weight:500;color:var(--ink)}
.table td{color:var(--ink)}
.table .n{text-align:right;font-family:var(--font-mono);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.table thead .n{text-align:right;font-size:var(--t-meta);white-space:normal}
.table .sub{display:block;margin-top:2px;font-size:var(--t-label);font-weight:400;color:var(--muted)}
.table tr.is-total > *{background:var(--tint-soft);font-weight:500}
.table tr.is-total .n{color:var(--vital-ink)}
.table-compare{min-width:560px}
.table-compare tbody th{width:30%}
.table-compare thead th:not(:first-child){color:var(--ink)}
.table-wide{min-width:760px}
.table th:first-child,.table td:first-child{position:sticky;left:0;z-index:1;background:var(--paper)}
.table tr.is-total > :first-child{background:var(--tint-soft)}
.table-note{margin-top:12px;font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.cell-label{display:none}
.swipe{display:none}
/* small table inside a card (an illustration) */
.table-mini caption{padding:0 0 8px}
.table-mini th,.table-mini td{padding:10px 0}
.table-mini th:first-child,.table-mini td:first-child{position:static}
.table-mini .n{padding-left:16px}
@media (max-width:640px){
  .table th,.table td{padding:12px 14px}
  .table-compare th:first-child,.table-compare td:first-child,.table-wide th:first-child,.table-wide td:first-child{box-shadow:inset -1px 0 0 var(--line)}
  .table caption{padding:14px 14px 4px}
  .table-mini th,.table-mini td{padding:9px 0;font-size:14px}
  .table-mini .n{padding-left:10px;font-size:13px}
  .swipe{display:flex;align-items:center;gap:6px;margin-bottom:10px;font:500 var(--t-fine)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
  .swipe .i{width:14px;height:14px}
  /* stacked: one card per row */
  .table-stack{min-width:0}
  .table-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .table-stack,.table-stack caption,.table-stack tbody,.table-stack tr,.table-stack th,.table-stack td{display:block;width:auto}
  .table-stack tbody tr{padding:var(--sp-2) 14px}
  .table-stack tbody tr + tr{border-top:1px solid var(--line)}
  .table-stack th,.table-stack td{position:static;padding:0;border-top:0;background:none}
  .table-stack tbody th{font-size:var(--t-read)}
  .table-stack td{margin-top:10px}
  .table-stack td.n{text-align:left}
  .table-stack tbody th{width:auto}                  /* a stacked compare table: the row header spans the card */
  .table-stack .cell-label{display:block;margin-bottom:2px;font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* Accordion: native details and summary. FAQ pages render answers open. */
.accordion{padding:var(--sp-1) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--text);box-shadow:var(--glass-shadow)}
.acc-item + .acc-item{border-top:1px solid var(--line)}
.acc-item > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:64px;padding:var(--sp-2) 0;border-radius:var(--r-ctl);cursor:pointer;list-style:none}
.acc-item > summary::-webkit-details-marker{display:none}
.acc-item > summary:focus-visible{outline-offset:4px}
.acc-q{font:500 var(--t-h3)/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.acc-item > summary:hover .acc-q{color:var(--vital-ink)}
.acc-a{max-width:62ch;padding:0 var(--sp-5) var(--sp-3) 0;color:var(--muted)}
.acc-a > * + *{margin-top:var(--sp-1)}
.chev{width:20px;height:20px;color:var(--muted);transition:transform .25s var(--ease)}
details[open] > summary .chev{transform:rotate(180deg)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-4) var(--sp-8);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + var(--sp-4))}
@media (max-width:980px){
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
}
@media (max-width:640px){
  .accordion{padding:0 var(--sp-2)}
  .acc-a{padding-right:0}
}

/* Tabs: WAI-ARIA tabs (nqd.js). Arrows, Home and End move; the list scrolls on its own if it must. */
.tab-list{display:flex;gap:var(--sp-3);overflow-x:auto;border-bottom:1px solid var(--rule);scrollbar-width:thin}
.tab{position:relative;flex:none;min-height:48px;padding:0 2px;border:0;background:none;color:var(--text-2);font:500 var(--t-body)/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
.tab:focus-visible{outline-offset:-2px}
.tab-panel{padding-top:var(--sp-3)}
/* .tabs: every panel shares one grid cell, so the block keeps the tallest height and the page
   below does not jump when the tab changes. Hidden panels stay invisible and out of the tab order. */
.tabs{display:grid}
.tabs > .tab-panel{grid-area:2 / 1}
.tabs > .tab-panel[hidden]{display:block;visibility:hidden}
.tab-panel:focus-visible{outline-offset:4px}
@media (max-width:640px){
  .tab-list{gap:var(--sp-2)}
  .tab{font-size:14px}
}

/* Answer sequence (security center, Why Sealed): a question as the heading, a short
   answer per mode at equal width, then "Proof" links. An index of questions on the left. */
.answers{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-4) var(--sp-8);align-items:start}
.answers-index{position:sticky;top:calc(var(--anchor-offset) + var(--sp-2))}
.answers-index ol{margin-top:var(--sp-2);border-left:1px solid var(--rule)}
.answers-index a{display:flex;gap:10px;min-height:32px;padding:6px 0 6px var(--sp-2);margin-left:-1px;border-left:2px solid transparent;font-size:var(--t-label);line-height:1.45;color:var(--text-2);text-decoration:none}
.answers-index a:hover{color:var(--text);border-left-color:var(--rule)}
.answers-index a span{font-family:var(--font-mono);color:var(--accent)}
.answer{min-width:0;padding-block:var(--sp-4);border-top:1px solid var(--rule)}
.answer:first-child{padding-top:0;border-top:0}
.answer-q{display:flex;gap:12px;font:500 var(--t-3)/1.25 var(--font-sans);letter-spacing:-.014em;color:var(--text)}
.answer-n{flex:none;padding-top:.3em;font:500 var(--t-label)/1 var(--font-mono);color:var(--accent)}
.answer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
.answer-a{min-width:0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);color:var(--ink)}
.answer-a .mode{margin-bottom:10px}
.answer-one{margin-top:var(--sp-2);max-width:62ch;font-size:var(--t-read);line-height:1.65;color:var(--text)}
.answer-proof{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--sp-3);margin-top:var(--sp-2)}
.answer-proof .kicker{margin-right:2px}
.answer-proof .link-arrow{min-height:40px;padding-block:8px}
@media (max-width:980px){
  .answers{grid-template-columns:minmax(0,1fr)}
  .answers-index{position:static}
}
@media (max-width:640px){
  .answer-cols{grid-template-columns:minmax(0,1fr)}
}


/* =============================================================================
   7  HERO AND ROUTING
   ========================================================================== */

/* Hero product card: a cropped app window and a floating mode card, built in HTML
   from the demonstration file. Labeled "Sample data" beside the figures. The
   Sealed | Standard control swaps the fee and the to-you lines ([data-modes]); nothing starts selected on a page. */
.product{min-width:0;margin:0}
.product-stage{position:relative;padding-bottom:var(--sp-6)}   /* the window and the floating mode card; the caption sits below it */
.product-win{position:relative;overflow:hidden;border:var(--glass-border);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:var(--glass-shadow),0 30px 70px -40px rgba(0,0,0,.6)}
.pw-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--aurora-base)}
.pw-dots{display:flex;gap:6px}
.pw-dots i{width:9px;height:9px;border-radius:50%;background:var(--field-line)}
.pw-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--t-meta)/1 var(--font-mono);color:var(--muted)}
.chip-sample{display:inline-flex;align-items:center;flex:none;min-height:22px;padding:0 8px;border:1px dashed var(--control-line);border-radius:4px;background:var(--paper);font:500 var(--t-fine)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pw-body{padding:18px 20px 0}
.pw-org{font:500 var(--t-read)/1.35 var(--font-sans);color:var(--ink)}
.pw-org small{font-size:var(--t-label);font-weight:400;color:var(--muted)}
.pw-meta{margin-top:2px;font:400 var(--t-meta)/1.5 var(--font-mono);color:var(--muted)}
.pw-lines{margin-top:14px;border-top:1px solid var(--line)}
.pw-lines > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pw-lines dt{min-width:0;font-size:14px;line-height:1.4;color:var(--muted)}
.pw-lines dd{flex:none;font:500 14px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.pw-lines .is-out dd{color:var(--muted)}
.pw-lines .is-key{margin:0 -8px;padding-inline:8px;border-radius:var(--r-ctl);border-bottom-color:transparent;background:var(--tint-soft)}
.pw-lines .is-key dt{font-weight:500;color:var(--ink)}
.pw-lines .is-key dd{font-size:16px;color:var(--vital-ink)}
.pw-sub{display:flex;justify-content:space-between;gap:8px;margin-top:16px;font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pw-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--vital-ink);border-radius:var(--r-ctl);font:400 var(--t-meta)/1.45 var(--font-mono);color:var(--muted)}
.pw-line b{font-weight:500;color:var(--ink)}
.pw-line .amt{grid-row:1 / span 2;grid-column:2;align-self:center;font:500 14px/1 var(--font-mono);color:var(--ink)}
/* the crop: more rows below, drawn as bars (decorative), fading into the window's edge */
.pw-more{display:grid;gap:8px;height:84px;margin-top:8px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent);mask-image:linear-gradient(180deg,#000 10%,transparent)}
.pw-more i{display:block;height:40px;border:1px solid var(--line);border-radius:var(--r-ctl);background:linear-gradient(90deg,var(--aurora-base) 0 55%,transparent 55%) no-repeat 12px 12px / 60% 6px,linear-gradient(90deg,var(--line) 0 100%) no-repeat 12px 24px / 38% 5px}
/* Plain variant for an illustration: a white data card with no window bar, no dots and no
   "Sample data" chip, labeled "Illustration. Your entries decide." An illustration is never
   styled as a product screen (the home hero at launch, until the consumer sample exists). */
.product-plain{padding:20px 22px 88px;border:var(--glass-border);border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--glass-shadow),0 30px 70px -40px rgba(0,0,0,.6)}
.product-plain .kicker{color:var(--muted)}
.product-plain .pw-org{margin-top:var(--sp-1)}
.product-float{position:absolute;left:-32px;bottom:0;z-index:2;width:min(300px,78%);padding:14px 16px 12px;border:var(--glass-border);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:var(--glass-shadow),0 24px 50px -24px rgba(0,0,0,.55)}
.product-float .label{margin-bottom:8px}
.pf-note{display:flex;align-items:center;gap:8px;margin-top:10px;font:400 var(--t-meta)/1.4 var(--font-mono);color:var(--muted)}
.pf-note::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--grad-vital)}
.product-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-3);font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.product-cap > span{min-width:0;max-width:30em}
@media (max-width:1100px){
  .product-float{left:-16px}
}
@media (max-width:980px){
  .product-stage{padding-bottom:0}
  .product-plain{padding-bottom:48px}
  .product-float{position:relative;left:auto;bottom:auto;width:auto;margin:-28px 12px 0}
}
@media (max-width:480px){
  .pw-body{padding:14px 14px 0}
  .pw-lines dt{font-size:13px}
  .product-float{margin-inline:6px}
  .product-cap{flex-direction:column;gap:var(--sp-1)}
}

/* Router band: two doors, "I import" and "I advise importers", in one white card
   that crosses the hero's lower edge (put it in a section.overlap). */
.router{padding:var(--sp-4) var(--sp-5) var(--sp-5);border:var(--glass-border);border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--glass-shadow)}
.router-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.doors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-3)}
.door{min-width:0}
.door-label{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line);font:500 var(--t-meta)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.door-label .i{width:16px;height:16px;color:var(--vital-ink)}
.door-routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.door-import .door-routes{grid-template-columns:minmax(0,1fr)}
.route{position:relative;min-width:0}
.route > .i{color:var(--vital-ink)}
.route-title{margin-top:12px;font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.route-link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--field-line)}
.route-link::after{content:"";position:absolute;inset:-6px}
.route-link:hover{color:var(--vital-ink);text-decoration-color:currentColor}
.route-link:focus-visible{outline:none}
.route-link:focus-visible::after{outline:2px solid var(--focus);outline-offset:0;border-radius:var(--r-ctl)}
.route p{margin-top:var(--sp-1);color:var(--muted)}
.route .link{position:relative;z-index:1}
.door-foot{margin-top:var(--sp-1)}
@media (max-width:1180px){
  .doors{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .door-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .router{padding:var(--sp-3)}
  .doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .door-routes{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .route + .route{padding-top:var(--sp-2);border-top:1px solid var(--line)}
}


/* =============================================================================
   8  MONEY
   Fees are published. Both modes side by side, Sealed first (decision 15), equal weight,
   nothing pre-selected on a page. Standard is shown as "2 points less" (decision 16).
   ========================================================================== */

/* Estimator that shows its math: inputs on one side, itemized results on the
   other, assumptions visible, "How this is calculated" folded under the card.
   "An estimate, not a guarantee." Runs in the browser; no email gate. */
.est{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-3) var(--sp-4);align-items:start}
.est-in{padding:var(--sp-4)}
.est-in > .field + .field,.est-in > fieldset + .field,.est-in > .field + fieldset,.est-in > fieldset + fieldset{margin-top:var(--sp-4)}
.est-out{position:sticky;top:calc(var(--anchor-offset) + var(--sp-1));padding:var(--sp-4)}
.est-flags{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font:500 var(--t-meta)/1.4 var(--font-mono);color:var(--muted)}
.est-flags span{display:inline-flex;align-items:center;gap:6px}
.est-flags .i{width:14px;height:14px;color:var(--vital-ink)}
.est-total{margin-top:var(--sp-3)}
.est-total .big-num{margin-top:4px}
.est-modes{width:100%;margin-top:var(--sp-2);border-collapse:collapse}
.est-modes th,.est-modes td{padding:10px 0;border-top:1px solid var(--line);text-align:left;vertical-align:baseline}
.est-modes thead th{padding-top:0;border-top:0;font:500 var(--t-meta)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.est-modes thead .mode{font-size:var(--t-fine)}
.est-modes tbody th{padding-right:12px;font-weight:400;font-size:14px;line-height:1.4;color:var(--muted)}
.est-modes td{padding-left:12px;font:500 var(--t-body)/1.3 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right}
.est-modes td small{display:block;margin-top:2px;font:400 var(--t-meta)/1.3 var(--font-mono);color:var(--muted)}
.est-modes .is-key th{font-weight:500;color:var(--ink)}
.est-modes .is-key td{font-size:18px;color:var(--vital-ink)}
.est-later{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.est-later b{flex:none;font:500 var(--t-body)/1.3 var(--font-mono);color:var(--ink)}
.est-note{display:flex;gap:10px;margin-top:var(--sp-2);font-size:var(--t-label);line-height:1.55;color:var(--muted)}
.est-note .i{width:16px;height:16px;margin-top:2px;color:var(--muted)}
.est-assume{margin-top:var(--sp-2);padding:12px 14px;border-radius:var(--r-ctl);background:var(--aurora-base)}
.est-assume ul{display:grid;gap:4px;margin-top:6px}
.est-assume li{position:relative;padding-left:14px;font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.est-assume li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.est-cape{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line)}
.est-cape p{margin-top:4px;font-size:var(--t-label);line-height:1.55;color:var(--ink)}
.est-act{margin-top:var(--sp-3)}
.est-act .fine{margin-top:var(--sp-1);text-align:center}
.est-math{margin-top:var(--sp-2);border-top:1px solid var(--line)}
.est-math > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:48px;cursor:pointer;list-style:none;font:500 var(--t-body)/1.3 var(--font-sans);color:var(--ink)}
.est-math > summary::-webkit-details-marker{display:none}
.est-math > summary:hover{color:var(--vital-ink)}
.est-math-body{padding-bottom:var(--sp-1)}
.est-math-body > p{margin-top:var(--sp-1);font-size:var(--t-label);line-height:1.6;color:var(--muted)}
.est-math-body b{font-weight:500;color:var(--ink)}
/* the tape: exact arithmetic in mono, one line per figure */
.tape{display:grid;gap:6px;margin:var(--sp-1) 0 var(--sp-2);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--aurora-base)}
.tape div{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.tape dt{font:500 var(--t-fine)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tape dd{font:400 var(--t-meta)/1.5 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
/* inputs */
.range{--p:50%;display:block;width:100%;height:32px;margin:6px 0 0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.range::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:linear-gradient(to right,var(--vital-ink) var(--p),var(--field-line) var(--p))}
.range::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--field-line)}
.range::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--vital-ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border:2px solid var(--vital-ink);border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--elev-2)}
.range::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--vital-ink);border-radius:var(--r-pill);background:var(--paper)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--vital-ink)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--vital-ink)}
.range-ends{display:flex;justify-content:space-between;font:400 var(--t-meta)/1.4 var(--font-mono);color:var(--muted)}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.field-val{font:500 var(--t-read)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.picks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.pick{min-height:32px;padding:0 12px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:var(--paper);font:500 var(--t-label)/1 var(--font-mono);color:var(--ink);cursor:pointer}
.pick:hover{background:var(--tint-soft)}
.pick[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.rate-state{margin-top:8px;font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.rate-state b{font-weight:500;color:var(--ink)}
/* the running total pinned to the bottom on tablets and phones (T11 section 6) */
.est-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:12px;padding:10px max(var(--gutter),env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));background:var(--ink);color:var(--paper);box-shadow:0 -8px 24px -12px rgba(0,0,0,.4)}
.est-bar p{flex:1;min-width:0;font:500 var(--t-label)/1.45 var(--font-mono);font-variant-numeric:tabular-nums}
.est-bar .btn{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-glow:var(--vital-from);--focus:var(--vital-from);flex:none}
.est-bar :focus-visible{outline-color:var(--vital-from)}
@media (max-width:980px){
  .est{grid-template-columns:minmax(0,1fr)}
  .est-out{position:static}
  .est-bar.is-on{display:flex}
}
@media (max-width:640px){
  .est-in,.est-out{padding:var(--sp-3)}
}

/* Pricing tiers: two equal cards, Sealed first, Standard "2 points less" (decisions 15 and 16). No "Most popular". */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);align-items:stretch}
.tier{display:flex;flex-direction:column;padding:var(--sp-5)}
.tier-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.tier-title{margin-top:var(--sp-3);font:500 var(--t-3)/1.2 var(--font-sans);letter-spacing:-.015em;color:var(--text)}
.tier-line{margin-top:var(--sp-1)}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:var(--sp-3)}
.tier-unit{color:var(--text-2)}
.tier-rates{margin-top:var(--sp-3);border-top:1px solid var(--rule)}
.tier-rates div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);padding:12px 0;border-bottom:1px solid var(--rule)}
.tier-rates dt{color:var(--text-2)}
.tier-rates dd{font:500 var(--t-body)/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text)}
.tier-example{margin-top:var(--sp-2);font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.tier-when{margin-top:var(--sp-3);padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--aurora-base);font-size:var(--t-body);line-height:1.55}
.card .tier-when{color:var(--ink)}
.tier-when b{font-weight:500}
.tier-cta{margin-top:auto;padding-top:var(--sp-4)}
@media (max-width:980px){ .tiers{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .tier{padding:var(--sp-3)} }

/* Fees at your size: pick $250K, $1M, $5M or type an amount; both fees update
   live, Sealed first. "Show the math" opens the tier lines ([data-fees]). */
.fees{padding:var(--sp-4)}
.fees-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16em);gap:var(--sp-2) var(--sp-3);align-items:end}
.fees-say{margin-top:var(--sp-3);font-size:var(--t-read);line-height:1.6;color:var(--ink)}
.fees-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-3)}
.fees-col{min-width:0;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--aurora-base)}
.fees-col .big-num{margin-top:var(--sp-2)}
.fees-col .kv{margin-top:var(--sp-2)}
.fees-math{margin-top:var(--sp-2)}
.fees-math > summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;list-style:none;font:500 var(--t-label)/1.4 var(--font-sans);color:var(--vital-ink);text-decoration:underline;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.fees-math > summary::-webkit-details-marker{display:none}
.fees-math[open] > summary .chev{transform:rotate(180deg)}
.fees-math .chev{width:16px;height:16px;color:var(--vital-ink)}
@media (max-width:768px){
  .fees-pick,.fees-out{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){ .fees{padding:var(--sp-3)} }

/* Custom lane (Stripe pattern): beside the published tiers, the levers that are
   set per engagement. Names levers only from the published price book. */
.lane{display:flex;flex-direction:column;padding:var(--sp-4);border-style:dashed;border-color:var(--control-line);box-shadow:none}
.lane-levers{display:grid;gap:12px;margin-top:var(--sp-3)}
.lane-levers li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink)}
.lane-levers .i{width:20px;height:20px;margin-top:2px;color:var(--vital-ink)}
.lane-levers b{display:block;font-weight:500}
.lane-levers span{color:var(--muted)}
.lane .btn-row{margin-top:auto;padding-top:var(--sp-4)}


/* =============================================================================
   9  PARTNERS
   ========================================================================== */

/* Track cards: one per partner path. The title link covers the card (.card-link). */
.tracks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.track{padding:var(--sp-3)}
.track-k{margin-bottom:var(--sp-1)}
.track dl{display:grid;gap:10px;margin-top:var(--sp-2)}
.track dt{font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.track dd{margin-top:2px;font-size:14px;line-height:1.5;color:var(--ink)}
@media (max-width:1100px){ .tracks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .tracks{grid-template-columns:minmax(0,1fr)} }

/* Application form with "What happens next" beside it */
.apply{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-3) var(--sp-5);align-items:start}
.form-step{display:grid;gap:8px}
.form-step-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.form-step-bar i{height:4px;border-radius:var(--r-pill);background:var(--field-line)}
.form-step-bar i.is-done{background:var(--vital-ink)}
.next-steps{position:sticky;top:calc(var(--anchor-offset) + var(--sp-1));padding:var(--sp-4);border:1px solid var(--rule);border-radius:var(--r-card)}
.next-list{display:grid;gap:var(--sp-2);margin-top:var(--sp-3);counter-reset:next}
.next-list li{position:relative;padding-left:40px;color:var(--text);counter-increment:next}
.next-list li::before{content:counter(next);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--accent);border-radius:50%;font:500 var(--t-meta)/1 var(--font-mono);color:var(--accent)}
.next-list span{display:block;font-size:var(--t-label);color:var(--text-2)}
.next-who{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--rule);font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
.next-who b{display:block;font-weight:500;color:var(--text)}
@media (max-width:980px){
  .apply{grid-template-columns:minmax(0,1fr)}
  .next-steps{position:static}
}
@media (max-width:640px){ .next-steps{padding:var(--sp-3)} }


/* =============================================================================
   10  FORMS
   Label above the field, 48px inputs, help text under the label, errors beside
   the field in words. No form asks for an ACE login or bank details.
   ========================================================================== */
.form{display:grid;gap:var(--sp-3)}
.form-card{min-width:0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--text);box-shadow:var(--glass-shadow)}
.field{display:grid;align-content:start;gap:var(--sp-1);min-width:0}
.label{display:block;font:500 var(--t-label)/1.4 var(--font-mono);color:var(--ink)}
.label .opt{font-weight:400;color:var(--muted)}
.help{font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.input{display:block;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:var(--paper);color:var(--ink);font:400 16px/1.2 var(--font-sans);transition:border-color .2s var(--ease)}
.input::placeholder{color:var(--muted);opacity:1}
.input:hover{border-color:var(--muted)}
.input:focus-visible{outline:2px solid var(--vital-ink);outline-offset:1px;border-color:var(--vital-ink)}
.input[aria-invalid="true"],.affix:has(input[aria-invalid="true"]),fieldset[aria-invalid="true"] .seg,fieldset[aria-invalid="true"] .choice-list{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.textarea{min-height:140px;padding:12px 14px;line-height:1.5;resize:vertical}
.select-wrap{position:relative}
.select{padding-right:44px;-webkit-appearance:none;appearance:none;cursor:pointer}
.select:invalid{color:var(--muted)}
.select option{color:var(--ink)}
.select-wrap > .i{position:absolute;top:50%;right:14px;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
/* money and percent fields: a mono value with its unit beside it */
.affix{display:flex;align-items:center;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:var(--paper);transition:border-color .2s var(--ease)}
.affix:hover{border-color:var(--muted)}
.affix:focus-within{outline:2px solid var(--vital-ink);outline-offset:1px;border-color:var(--vital-ink)}
.affix > span{font:500 16px/1 var(--font-mono);color:var(--muted)}
.affix input{flex:1;min-width:0;height:46px;padding:0 0 0 6px;border:0;outline:0;background:transparent;font:500 16px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.affix input::placeholder{font-family:var(--font-sans);font-weight:400;color:var(--muted);opacity:1}
.affix input + span{padding-left:6px}
/* checkboxes and radios with a 24px box (WCAG 2.2 target size) */
.choice{display:flex;align-items:flex-start;gap:12px;min-height:32px;padding:4px 0;cursor:pointer;color:var(--ink);line-height:1.45}
.choice input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--ink);cursor:pointer}
.choice input:focus-visible{outline:2px solid var(--vital-ink);outline-offset:2px}
.choice-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;gap:0 var(--sp-2);max-height:220px;overflow-y:auto;padding:8px 14px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:var(--paper)}   /* max-content rows: a grid that scrolls would otherwise keep a wrapped label to one line's height */
.choice-list .is-all{grid-column:1 / -1;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:500}
.field-error{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-label);line-height:1.45;color:var(--ink)}
.field-error .i{width:16px;height:16px;margin-top:1px}
.field-error a{color:var(--vital-ink)}
.form-note{font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.form-status{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--aurora-base);font-size:var(--t-label);line-height:1.5;color:var(--ink)}
.form-status.is-sent{border-color:color-mix(in srgb,var(--success-fg) 35%,transparent);background:var(--success-bg)}   /* a sent form: ink text, never green text */
.form-notice{padding:12px 14px;border-radius:var(--r-ctl);background:var(--tint-soft);font-size:var(--t-label);line-height:1.5;color:var(--ink)}
.fields-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (max-width:640px){
  .fields-2{grid-template-columns:minmax(0,1fr)}
  .choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-card{padding:var(--sp-3)}
}


/* =============================================================================
   11  MEDIA
   No stock photos, no photos of people, no AI-generated images, no invented or
   redrawn logos. Product screens, receipts and documents are built in HTML from
   the demonstration file and labeled beside the image.
   ========================================================================== */

/* Image placeholder (R12 section 4). A fixed-ratio box with a visible label that
   names the final asset; data-placeholder="true", data-slot and the final alt
   text (aria-label with role="img", or aria-hidden for decorative art) are set
   from day one. build.py --release fails while one remains. */
.ph{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:var(--ph-r,16 / 10);overflow:hidden;container-type:inline-size;border:1px dashed var(--control-line);border-radius:var(--r-ctl);background:repeating-linear-gradient(135deg,var(--tint-soft) 0 10px,var(--paper) 10px 20px);color:var(--ink);text-align:center}
.ph-16x10{--ph-r:16 / 10}  .ph-16x9{--ph-r:16 / 9}  .ph-2x1{--ph-r:2 / 1}  .ph-3x1{--ph-r:3 / 1}
.ph-4x3{--ph-r:4 / 3}     .ph-3x4{--ph-r:3 / 4}   .ph-17x22{--ph-r:17 / 22}
.ph-1x1{--ph-r:1 / 1}     .ph-4x5{--ph-r:4 / 5}   .ph-191x100{--ph-r:1.91 / 1}
@media (max-width:640px){ .ph-m-4x5{--ph-r:4 / 5} .ph-m-3x4{--ph-r:3 / 4} }
.ph-body{display:grid;justify-items:center;gap:4px;max-width:min(92%,34em);padding:12px 14px;border-radius:var(--r-ctl);background:rgba(255,255,255,.94)}
.ph-body .i{width:26px;height:26px;margin-bottom:2px;color:var(--vital-ink)}
.ph-id{font:500 var(--t-meta)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--ink)}
.ph-label{font:500 var(--t-meta)/1.45 var(--font-sans);color:var(--ink)}
.ph-spec{font:400 var(--t-fine)/1.5 var(--font-mono);color:var(--muted)}
.ph[aria-label]::after,.ph[aria-hidden="true"]::after{position:absolute;left:10px;right:10px;bottom:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:4px 8px;border-radius:4px;background:rgba(255,255,255,.94);font:400 var(--t-fine)/1.45 var(--font-mono);color:var(--muted);text-align:left}
.ph[aria-label]::after{content:"Alt: " attr(aria-label)}
.ph[aria-hidden="true"]::after{content:"Alt: empty (decorative)"}
@container (max-width:380px){
  .ph[aria-label]::after,.ph[aria-hidden="true"]::after{display:none}
  .ph-spec{display:none}
}
@container (max-width:220px){
  .ph-label{display:none}
  .ph-body{padding:8px 10px}
  .ph-body .i{width:20px;height:20px}
  .ph-id{font-size:var(--t-fine);letter-spacing:0}
}

/* Shared caption for media: what it shows, then the sample label */
.media-cap{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-top:12px;font:400 var(--t-meta)/1.5 var(--font-mono);color:var(--text-2)}

/* Browser frame for product screens */
.frame{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--glass-shadow)}
.frame-bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--aurora-base)}
.frame-dots{display:flex;gap:6px}
.frame-dots i{width:9px;height:9px;border-radius:50%;background:var(--field-line)}
.frame-url{flex:1;min-width:0;max-width:420px;margin-inline:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:24px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);font:400 var(--t-fine)/22px var(--font-mono);color:var(--muted);text-align:center}
.frame-view > .ph,.frame-view > img{display:block;width:100%;border:0;border-radius:0}

/* Document card: a downloadable sample. Thumbnail, file type, size, sample chip, action. */
.doc-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
/* The thumbnail shows the top of page 1: a fixed-height window, so the slot keeps its own ratio and nothing shifts when the image arrives. */
.doc-thumb{height:200px;overflow:hidden;padding:var(--sp-3) var(--sp-3) 0;border-bottom:1px solid var(--line);background:var(--aurora-base)}
.doc-thumb > .ph,.doc-thumb > img{display:block;width:100%;border-bottom:0;border-radius:var(--r-ctl) var(--r-ctl) 0 0;box-shadow:var(--elev-2)}
.doc-thumb > .ph{align-items:start;padding-top:var(--sp-3)}
.doc-meta{display:flex;flex-direction:column;flex:1;padding:var(--sp-3)}
.doc-file{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font:500 var(--t-meta)/1.4 var(--font-mono);color:var(--muted)}
.doc-meta .badge{align-self:flex-start;margin-top:var(--sp-2)}
.doc-meta .card-title{font-size:var(--t-read)}
.doc-meta > p{margin-top:var(--sp-1);font-size:14px}
.doc-act{margin-top:auto;padding-top:var(--sp-2)}

/* Document visual: a synthetic document, built in HTML (a CBP 7501 crop and the like).
   Watermarked "SAMPLE. FICTIONAL DATA." in the image and in the caption. */
.doc{position:relative;z-index:0;min-width:0}
.doc-sheet{position:relative;overflow:hidden;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);box-shadow:var(--elev-2);font:400 12px/1.45 var(--font-mono);color:var(--ink)}
.doc-sheet::before{content:"";position:absolute;inset:8px -8px -8px 8px;z-index:-1;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--aurora-base)}
.doc-wm{position:absolute;left:50%;top:50%;z-index:0;transform:translate(-50%,-50%) rotate(-18deg);font:500 22px/1 var(--font-mono);letter-spacing:.14em;color:rgba(60,69,212,.10);white-space:nowrap;pointer-events:none}
.doc-hd,.doc-grid,.doc-row,.doc-ft{position:relative;z-index:1}
.doc-hd{display:flex;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.doc-hd b{font-weight:500;letter-spacing:.04em}
.doc-hd .r{flex:none;text-align:right}
.doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.doc-grid div{min-width:0;padding:6px 8px;border-top:1px solid var(--line);border-right:1px solid var(--line);overflow-wrap:anywhere}
.doc-grid div:nth-child(3n){border-right:0}
.doc-grid i{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.doc-row{display:grid;grid-template-columns:34px minmax(0,1fr) 52px 92px;gap:6px;padding:6px 4px;border-bottom:1px solid var(--line);align-items:center}
.doc-row > :last-child{text-align:right}
.doc-row.is-head{font-size:11px;color:var(--muted)}
.doc-row.is-hl{background:var(--tint-soft);box-shadow:inset 2px 0 0 var(--vital-ink)}
.doc-ft{display:flex;justify-content:space-between;gap:8px;padding-top:8px}
@media (max-width:640px){
  .doc-sheet{padding:12px;font-size:10.5px}
  .doc-grid i,.doc-row.is-head{font-size:9.5px}
  .doc-row{grid-template-columns:26px minmax(0,1fr) 38px 74px;gap:4px}
  .doc-wm{font-size:16px}
}

/* Receipt card for the Sealed receipt: two neutral bands, "AMD hardware" and
   "Our code". Never red and green, never a badge or seal shape. */
.receipt{min-width:0;overflow:hidden;border:var(--glass-border);border-radius:var(--r-card);background:var(--paper);color:var(--text);box-shadow:var(--glass-shadow)}
.receipt-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:20px 24px}
.receipt-hd > .i{width:28px;height:28px;color:var(--ink)}
.receipt-title{font:500 var(--t-body)/1.3 var(--font-sans);color:var(--ink)}
.receipt-id{display:block;margin-top:3px;font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.receipt-band{padding:16px 24px 18px;border-top:1px solid var(--line)}
.receipt-band.is-hw{background:color-mix(in srgb,var(--ink) 3.5%,var(--paper))}
.receipt-band-h{display:flex;align-items:center;gap:8px;font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.receipt-band-h::before{content:"";flex:none;width:8px;height:8px;border:1.5px solid currentColor;border-radius:2px}
.receipt-band.is-hw .receipt-band-h::before{background:currentColor}
.receipt-band-sub{margin-top:4px;font-size:var(--t-meta);line-height:1.5;color:var(--muted)}
.receipt-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:12px}
.receipt-fields dt{font:500 var(--t-fine)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.receipt-fields dd{margin-top:4px;font:500 var(--t-label)/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.receipt-ft{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--line);font:400 var(--t-meta)/1.4 var(--font-mono);color:var(--muted)}
@media (max-width:480px){
  .receipt-hd{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .receipt-hd .badge{grid-column:1 / -1;justify-self:start}
  .receipt-band,.receipt-ft{padding-inline:16px}
  .receipt-fields{grid-template-columns:minmax(0,1fr)}
}

/* Industry tiles: a link with a slot for 1:1 line art (decorative, empty alt).
   Menu order, equal weight; aerospace and defense sits among its peers. */
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.tile-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-card);background:transparent;color:var(--ink);text-decoration:none;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.tile:hover{background:var(--paper);box-shadow:var(--glass-shadow)}
.tile-art{display:block;width:96px;margin-bottom:var(--sp-1)}
.tile-art .ph{border-radius:var(--r-ctl)}
.tile-title{font:500 var(--t-read)/1.35 var(--font-sans);letter-spacing:-.005em}
.tile:hover .tile-title{color:var(--vital-ink)}
.tile-line{font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.tile-all{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;border-style:dashed}
.tile-all .i{width:18px;height:18px;color:var(--vital-ink)}
@media (max-width:980px){
  .tile-grid,.tile-grid.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:359px){
  .tile-grid,.tile-grid.is-3{grid-template-columns:minmax(0,1fr)}
}

/* Video slot: a poster, a play button named with title, length and captions, a
   captions note and a transcript link. Nothing loads until play; never autoplay. */
.video{min-width:0}
.video-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--glass-shadow)}
.video-stage > .ph,.video-stage > img{display:block;width:100%;border:0;border-radius:0}
.video-stage > .ph::after{display:none}   /* the poster is decorative: the play button carries the name */
.video-frame{display:block;width:100%;aspect-ratio:16 / 9;border:0}
.video-play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:var(--r-ctl);background:var(--ink);color:var(--paper);font:500 var(--t-body)/1 var(--font-sans);box-shadow:var(--glass-shadow);cursor:pointer;transition:background-color .2s var(--ease)}
.video-play:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper))}
.video-play .i{width:20px;height:20px;fill:currentColor}
.video-play:focus-visible{outline:2px solid var(--vital-ink);outline-offset:3px}
.video-len{font:500 var(--t-meta)/1 var(--font-mono);color:rgba(255,255,255,.8)}
.video-cap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2px 16px;margin-top:10px;font:400 var(--t-meta)/1.5 var(--font-mono);color:var(--text-2)}
.video-cap .link{font-family:var(--font-sans);font-size:var(--t-label)}
.video-status:empty{display:none}

/* Flow diagram: a static, inline SVG data-flow diagram in palette E tokens.
   Wide layout above 720px of container, a vertical one below. Meaningful strokes
   are 3:1 or better. The long description sits in the figcaption. */
.flow-dg{container-type:inline-size;min-width:0}
.flow-dg svg{display:block;width:100%;height:auto;overflow:visible}
.flow-dg .dg-v{display:none;max-width:420px;margin-inline:auto}
@container (max-width:720px){ .flow-dg .dg-h{display:none} .flow-dg .dg-v{display:block} }
.dg-node{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.dg-node.is-on{fill:var(--tint-soft);stroke:var(--vital-ink)}
.dg-bound{fill:color-mix(in srgb,var(--tint-soft) 70%,transparent);stroke:var(--vital-ink);stroke-width:2;stroke-dasharray:10 5}
.dg-line{fill:none;stroke:var(--vital-ink);stroke-width:1.5}
.dg-arrow{fill:var(--vital-ink)}
.dg-ic{fill:none;stroke:var(--vital-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-l{font:500 15px/1 var(--font-sans);fill:var(--ink)}
.dg-m{font:500 11px/1 var(--font-mono);letter-spacing:.08em;fill:var(--muted)}
.dg-g{font:600 15px/1 var(--font-mono);letter-spacing:.06em;fill:var(--ink)}
.dg-c{text-anchor:middle}
.dg-desc{margin-top:var(--sp-2)}
.dg-desc > summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;list-style:none;font:500 var(--t-label)/1.4 var(--font-sans);color:var(--accent)}
.dg-desc > summary::-webkit-details-marker{display:none}
.dg-desc .chev{width:16px;height:16px;color:var(--accent)}
.dg-desc ol{display:grid;gap:6px;margin-top:4px;padding-left:1.4em;list-style:decimal;font-size:var(--t-label);line-height:1.55;color:var(--text-2)}


/* =============================================================================
   12  CLOSING BAND
   The second deck: a start checklist ("What you need") and three exits, one per
   job: start a claim, run the estimate, partner with us.
   ========================================================================== */
.cta-band{position:relative;isolation:isolate;padding-block:var(--section-y)}
.close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-5) var(--sp-8);align-items:start}
.need{padding:var(--sp-4)}
.need-list{display:grid;gap:10px;margin-top:var(--sp-2)}
.need-list li{display:flex;align-items:flex-start;gap:12px;color:var(--text)}
.need-list .i{width:18px;height:18px;margin-top:2px;color:var(--vital-tint);stroke-width:2}
.need .fine{margin-top:var(--sp-2)}
.exits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid var(--rule);counter-reset:exit}
.exit{display:flex;flex-direction:column;min-width:0;counter-increment:exit}
.exit::before{content:"0" counter(exit);font:500 var(--t-meta)/1 var(--font-mono);letter-spacing:.08em;color:var(--accent)}
.exit h3{margin-top:12px;font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text)}
.exit p{margin-top:var(--sp-1);color:var(--text-2)}
.exit .btn,.exit .link-arrow{align-self:flex-start;margin-top:auto}
.exit > :last-child{margin-top:var(--sp-2)}
.close-grid + .exits .exit > p + *{margin-top:var(--sp-2)}
@media (max-width:980px){
  .close-grid{grid-template-columns:minmax(0,1fr)}
  .exits{grid-template-columns:minmax(0,1fr);margin-top:var(--sp-6)}
  .exit + .exit{padding-top:var(--sp-3);border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  .need{padding:var(--sp-3)}
}


/* =============================================================================
   13  FOOTER AND SOURCES
   Light footer: brand line, six link columns from footer.json (three across
   on tablets, two on phones, every link visible), the Licensing block, the
   folded Sources list, legal links, the company line. Text only, no logos.
   ========================================================================== */
.site-footer{padding-block:var(--sp-8) var(--sp-5);border-top:1px solid var(--line);background:var(--aurora-base);color:var(--ink)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--sp-3) var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid var(--line)}
.foot-brand{min-width:0}
.foot-brand .brand-product{border-left-color:var(--line)}
.foot-line{margin-top:var(--sp-2);color:var(--muted)}
.foot-say{margin-top:4px;font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.foot-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-5) var(--sp-3);padding-top:var(--sp-6)}
.foot-col{min-width:0}
.foot-h{font:500 var(--t-meta)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.foot-links{display:grid;grid-auto-rows:minmax(32px,auto);row-gap:2px;margin-top:var(--sp-2)}
.foot-links li{display:flex;align-items:center;min-width:0}
.foot-links a{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding-inline:6px;margin-inline:-6px;border-radius:var(--r-ctl);font-size:14px;line-height:1.35;color:var(--ink);text-decoration:none}
.foot-links a:hover{color:var(--vital-ink);text-decoration:underline;text-underline-offset:.24em}
.foot-links a[aria-current="page"]{color:var(--vital-ink)}
.foot-links .i,.foot-legal .i{width:14px;height:14px}
/* Licensing: who files, named, under its own heading. The hero's † marker lands here. */
.foot-notes{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--t-label);line-height:1.6;color:var(--muted)}
.foot-licensing{min-width:0;border-radius:var(--r-ctl)}
.foot-licensing:target{background:var(--tint-soft);outline:8px solid var(--tint-soft)}
.foot-licensing > * + *,.foot-more > * + *{margin-top:var(--sp-1)}
.foot-licensing .foot-h{margin-bottom:var(--sp-1)}
.foot-notes b{font-weight:500;color:var(--ink)}
.foot-notes .link{font-weight:500}
.sources{margin-top:var(--sp-4);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.src{padding-block:var(--sp-1)}
.src > summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--sp-2);min-height:56px;border-radius:var(--r-ctl);cursor:pointer;list-style:none}
.src > summary::-webkit-details-marker{display:none}
.src > summary:focus-visible{outline-offset:4px}
.src-title{display:flex;align-items:center;gap:10px;font:500 var(--t-label)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.src-title .i{width:18px;height:18px;color:var(--vital-ink)}
.src > summary:hover .src-title{color:var(--vital-ink)}
.src-when{font:400 var(--t-label)/1.3 var(--font-mono);color:var(--muted)}
.src > summary .chev{margin-left:auto}
.src-intro{max-width:62em;margin:var(--sp-1) 0 var(--sp-2);font-size:var(--t-label);line-height:1.55;color:var(--muted)}
.src-list{display:grid;gap:4px;max-width:980px;margin:0 0 var(--sp-3)}
.src-list li{display:grid;grid-template-columns:40px minmax(0,1fr) 32px;gap:0 var(--sp-1);align-items:baseline;padding:6px 0;border-radius:var(--r-ctl);font-size:var(--t-label);line-height:1.6;color:var(--muted)}
.src-list li:target{background:var(--tint-soft)}
.src-n{font:500 var(--t-label)/1.6 var(--font-mono);color:var(--vital-ink);text-align:center}
.src-list p{min-width:0;overflow-wrap:anywhere}
.src-list .link{font-weight:400}
.src-back{display:inline-grid;place-items:center;align-self:start;width:28px;height:28px;border-radius:var(--r-ctl);color:var(--vital-ink)}
.src-back .i{width:16px;height:16px}
.src-back:hover{background:var(--tint-mid)}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:0 var(--sp-3);margin-top:var(--sp-3)}
.foot-legal a,.foot-legal button{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;font-size:var(--t-label);color:var(--ink);text-decoration:none;cursor:pointer}
.foot-legal a:hover,.foot-legal button:hover{color:var(--vital-ink);text-decoration:underline;text-underline-offset:.24em}
.foot-bottom{display:grid;gap:4px;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:var(--t-label);line-height:1.6;color:var(--muted)}
.foot-bottom .foot-copy{color:var(--ink)}
@media (max-width:1240px){
  .foot-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .foot-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-2);padding-top:var(--sp-4)}
  .foot-h{white-space:normal}
  .foot-links a{min-height:40px}
  .src-list li{grid-template-columns:32px minmax(0,1fr) 28px}
}


/* =============================================================================
   13b  PASS 4 · SIMPLE UX (Mark, October 5, 2026: /nexqloud-simple-ux)
   One job per section, least copy, detail on request. Color comes from tones on
   pills, icon discs and mock product windows, never from body text.
   ========================================================================== */

/* Tones. Color carries meaning or it is not used (Mark, October 5, 2026: "each color earns its place;
   otherwise stay within palette"). Every tone comes from palette E:
     indigo  the brand accent (vital-ink): icon discs, the current step, the agent
     violet  Sealed (the gradient's violet end)        blue   Standard (the gradient's blue end)
     green   money back, done, matched (success)       amber  sample data, needs a look (warn)
     gray    neutral: file types, line types, what comes next
   Text passes AA on its own fill (4.89:1 or more) and on white. Dots and icons pass 3:1 on white.
   -d values are for pills on the deck (11:1 or more on the deck). */
.tone-indigo{--tone-bg:var(--tint-soft);--tone-fg:var(--vital-ink);--tone-dot:var(--vital-ink);--tone-fg-d:var(--vital-tint)}
.tone-violet{--tone-bg:var(--sealed-tint);--tone-fg:var(--sealed-ink);--tone-dot:var(--sealed-ink);--tone-fg-d:var(--vital-tint)}
.tone-green {--tone-bg:var(--success-bg);--tone-fg:var(--success-fg);--tone-dot:var(--success-fg);--tone-fg-d:var(--on-deck)}
.tone-amber {--tone-bg:var(--warn-bg);--tone-fg:var(--warn-ink);--tone-dot:var(--warn);--tone-fg-d:var(--on-deck)}
.tone-blue  {--tone-bg:var(--standard-tint);--tone-fg:var(--standard-ink);--tone-dot:var(--standard-ink);--tone-fg-d:var(--on-deck)}
.tone-gray  {--tone-bg:var(--line);--tone-fg:var(--muted);--tone-dot:var(--faint);--tone-fg-d:var(--on-deck-2)}

/* Tag: the small pill for statuses, mock screens and table cells */
.tag{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--tone-bg,var(--line));color:var(--tone-fg,var(--muted));font:500 12px/1 var(--font-sans);letter-spacing:0;white-space:nowrap}
.tag .i{width:12px;height:12px;stroke-width:2.2}
.tag.has-dot::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--tone-dot,var(--faint))}

/* Pill with a tone: the larger label (audiences, the hero eyebrow) */
.pill[class*="tone-"]{border-color:transparent;background:var(--tone-bg);color:var(--tone-fg);font-family:var(--font-sans);letter-spacing:0}
.pill[class*="tone-"]::before{background:var(--tone-dot)}
.deck .pill[class*="tone-"],.on-dark .pill[class*="tone-"]{background:var(--on-deck-fill);box-shadow:inset 0 0 0 1px var(--on-deck-line);color:var(--tone-fg-d)}
.deck .pill[class*="tone-"]::before,.on-dark .pill[class*="tone-"]::before{background:var(--tone-fg-d)}

/* Eyebrow: a tinted pill over every section head (Mark: every section has one) */
.eyebrow{display:flex;width:fit-content;max-width:100%;min-height:28px;gap:8px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--tint-soft);font:500 var(--t-label)/1.2 var(--font-mono);letter-spacing:.08em;color:var(--vital-ink)}
.eyebrow::before{width:7px;height:7px;border:0;background:var(--grad-vital)}
.deck .eyebrow,.on-dark .eyebrow{background:var(--on-deck-fill);box-shadow:inset 0 0 0 1px var(--on-deck-line);color:var(--vital-tint)}
.deck .eyebrow::before,.on-dark .eyebrow::before{background:var(--vital-tint)}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head.is-center .eyebrow{margin-inline:auto}
.section-head .lede{margin-top:var(--sp-2)}

/* Mode chips: each mode has its own tint and the same hollow marker, so neither looks selected */
.mode{--tone-bg:var(--standard-tint);--tone-fg:var(--standard-ink);border-color:transparent;background:var(--tone-bg);color:var(--tone-fg)}
.mode-sealed{--tone-bg:var(--sealed-tint);--tone-fg:var(--sealed-ink)}
.mode::before{border-color:currentColor}
.mode .mode-save,.mode .mode-plus{color:inherit;opacity:1}
.deck .mode,.on-dark .mode{background:var(--on-deck-fill);box-shadow:inset 0 0 0 1px var(--on-deck-line);color:var(--on-deck)}
.deck .mode-sealed,.on-dark .mode-sealed{color:var(--vital-tint)}

/* Trust row under the hero buttons: three proof points, no links */
.trust{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:var(--sp-4)}
.trust li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px 0 10px;border-radius:var(--r-pill);background:var(--on-deck-fill);box-shadow:inset 0 0 0 1px var(--on-deck-line);font:500 var(--t-label)/1.2 var(--font-sans);color:var(--on-deck);white-space:nowrap}
.trust .i{width:16px;height:16px;stroke-width:2;color:var(--vital-tint)}
.trust .fn-disc{margin-left:-4px;color:var(--vital-tint)}

/* Mock product window: a sample screen in HTML, labeled as sample data, with a glow behind it */
.mock{position:relative;min-width:0;margin:0}
.mock::before{content:"";position:absolute;inset:-4% -12% -6%;z-index:0;border-radius:64px;background:radial-gradient(58% 58% at 50% 45%,rgba(var(--arc-b),.85),rgba(var(--arc-a),.45) 50%,transparent 78%);filter:blur(40px);pointer-events:none}
.mock-win{position:relative;z-index:1;overflow:hidden;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(var(--strand-a),.55),0 0 64px -8px rgba(var(--arc-b),.5),0 42px 90px -34px rgba(14,16,23,.85)}
.light .mock-win,.mock.on-light .mock-win{box-shadow:0 0 0 1px var(--line),0 0 56px -12px rgba(var(--arc-b),.3),0 30px 60px -36px rgba(14,16,23,.3)}
.light .mock::before,.mock.on-light::before{opacity:.45}
.mock-bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px 0 14px;border-bottom:1px solid var(--line);background:var(--aurora-base)}
.mock-dots{display:flex;gap:6px}
.mock-dots i{width:10px;height:10px;border-radius:50%;background:var(--field-line)}
.mock-title{flex:1;min-width:0;overflow:hidden;font:500 12px/1 var(--font-mono);color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.mock-body{padding:16px 18px 18px}
.mock-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px}
.mock-org{font:500 15px/1.3 var(--font-sans);color:var(--ink)}
.mock-org small{display:block;margin-top:2px;font:400 12px/1.3 var(--font-sans);color:var(--muted)}
.mock-tags{display:flex;flex-wrap:wrap;gap:6px}
.mock-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.mock-kpis > div{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--aurora-base)}
.mock-kpis dt{font:500 11px/1.25 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mock-kpis dd{margin-top:6px;font:600 19px/1.1 var(--font-sans);letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mock-kpis .is-key{border-color:var(--success-bg);background:var(--success-bg)}
.mock-kpis .is-key dt,.mock-kpis .is-key dd{color:var(--success-fg)}
.mock-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px}
.mock-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font:500 11px/1.2 var(--font-sans);color:var(--muted);text-align:center}
.mock-steps li::before{content:"";position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--field-line)}
.mock-steps li::after{content:"";position:absolute;top:8px;left:calc(50% + 12px);right:calc(-50% + 12px);height:2px;border-radius:2px;background:var(--line)}
.mock-steps li:last-child::after{display:none}
.mock-steps .is-done{color:var(--success-fg)}
.mock-steps .is-done::before{background:var(--success-fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:none}
.mock-steps .is-done::after{background:var(--success-fg)}
.mock-steps .is-now{color:var(--vital-ink)}
.mock-steps .is-now::before{box-shadow:inset 0 0 0 5px var(--vital-ink)}
.mock-lines{display:grid;gap:8px;margin-top:16px}
.mock-lines li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px 9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:1.3;color:var(--ink)}
.ml-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-amt{font:500 13px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.mock-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-3);font-size:var(--t-label);line-height:1.5;color:var(--text-2)}
@media (min-width:981px) and (max-width:1240px){
  .mock-lines li{grid-template-columns:auto minmax(0,1fr) auto}
  .mock-lines li > .tag:last-child{display:none}
}
@media (max-width:520px){
  .mock-body{padding:14px 12px 14px}
  .mock-kpis{gap:6px}
  .mock-kpis > div{padding:8px 9px}
  .mock-kpis dd{font-size:17px}
  .mock-kpis dt,.mock-steps li,.fm-ext{font-size:12px}
  .mock-lines li{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .mock-lines li > .tag:last-child{display:none}
}

/* Number band: four big numbers on one card, each said once on the page */
.numband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:var(--sp-1) 0}
.numband li{min-width:0;padding:24px 28px 22px;border-left:1px solid var(--line)}
.numband li:first-child{border-left:0}
.numband .big-num{font-size:44px}
.numband .nb-cap{margin-top:6px;max-width:17em;font-size:var(--t-body);line-height:1.45;color:var(--muted)}
@media (max-width:1100px){.numband .big-num{font-size:40px}}
@media (max-width:890px){
  .numband{grid-template-columns:minmax(0,1fr)}
  .numband li{border-left:0}
  .numband li + li{border-top:1px solid var(--line)}
}
@media (max-width:420px){.numband li{padding:18px 16px}.numband .big-num{font-size:34px}}

/* Icon disc in a tone */
.ic-disc{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--tint-soft);color:var(--vital-ink)}
.ic-disc .i{width:22px;height:22px}

/* Audience cards: four equal cards, icon, one line, one link (title one line, text at most two) */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.who-card{gap:var(--sp-1);padding:var(--sp-3)}
.who-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1)}
.who-card .card-title{margin-top:var(--sp-1)}
.who-card p{color:var(--muted)}
.who-card .card-go{margin-top:auto;padding-top:var(--sp-2)}
@media (max-width:1240px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.who{grid-template-columns:minmax(0,1fr)}}
@media (min-width:621px) and (max-width:860px){.who-card p{max-width:17em}}

/* Step flow: four numbered steps, each over a small sample screen */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.flow-step{display:flex;flex-direction:column;min-width:0}
.flow-mock{display:flex;flex-direction:column;justify-content:center;gap:8px;height:212px;padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--paper) 0%,var(--aurora-base) 100%);box-shadow:var(--glass-shadow)}
.flow-head{display:flex;align-items:center;gap:12px;margin-top:var(--sp-3)}
.flow-head .step-n{position:relative;left:auto;top:auto;flex:none}
.flow-step h3{font:500 var(--t-h3)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.flow-step > p{margin-top:var(--sp-1);color:var(--muted)}
.fm-file{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:500 12px/1.2 var(--font-mono);color:var(--ink);white-space:nowrap}
.fm-file span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fm-ext{display:grid;place-items:center;flex:none;width:34px;height:20px;border-radius:5px;background:var(--tone-bg,var(--line));color:var(--tone-fg,var(--muted));font:600 10px/1 var(--font-mono);letter-spacing:.02em}
.fm-pair{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:6px}
.fm-pair .i{width:14px;height:14px;color:var(--muted)}
.fm-cell{min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:500 12px/1.25 var(--font-sans);color:var(--ink);text-align:center}
.fm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;line-height:1.3;color:var(--muted)}
.fm-amt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px;border-radius:10px;background:var(--success-bg);font-size:13px;color:var(--success-fg)}
.fm-amt b{font:600 22px/1 var(--font-sans);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.fm-tags{display:flex;flex-wrap:wrap;gap:6px}
.flow-mock{position:relative}
@media (min-width:1241px){.flow-step:not(:last-child) .flow-mock::after{content:"";position:absolute;top:50%;right:calc(-1 * var(--sp-3) - 1px);width:calc(var(--sp-3) + 2px);height:2px;background:var(--field-line)}}
@media (max-width:1240px){.flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-5)}}
@media (min-width:561px) and (max-width:860px){.flow-step > p{max-width:19em}}
@media (max-width:560px){
  .flow{row-gap:var(--sp-6)}
  .flow-head,.flow-step > p{order:-1}
  .flow-head{margin-top:0}
  .flow-mock{height:auto;min-height:0;margin-top:var(--sp-2)}
}
@media (max-width:560px){.flow{grid-template-columns:minmax(0,1fr)}}

/* Industry tiles: an icon disc in its own tone, so eight tiles scan at a glance. Two columns, so every name and line stays on one line. */
.tile-grid.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.tile.ind .tile-title,.tile.ind .tile-line{white-space:nowrap}}   /* two columns only where "Electronics and contract manufacturing" fits (it ran past its tile at 901 to 975px) */
@media (max-width:999px){.tile-grid.is-2{grid-template-columns:minmax(0,1fr)}}
.tile.ind{flex-direction:row;align-items:flex-start;gap:14px;padding:18px;border-color:var(--line);background:var(--paper);box-shadow:var(--elev-2)}
.tile.ind .ic-disc{width:42px;height:42px;border-radius:11px}
.ind-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.tile.ind{align-items:center}
.ind-go{flex:none;width:18px;height:18px;margin-left:auto;color:var(--vital-ink);transition:transform .2s var(--ease)}
.tile.ind:hover .ind-go{transform:translateX(3px)}
.tile-all.ind-all{margin-top:var(--sp-2);background:var(--paper)}

/* Comparison table: row labels heavier, the Sealed column tinted, alternate rows shaded */
.cmp{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--glass-shadow)}
.cmp-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:var(--t-body);line-height:1.45;color:var(--ink)}
.cmp-table thead td{width:28%}
.cmp-table th,.cmp-table td{padding:16px 22px;text-align:left;vertical-align:top}
.cmp-table thead th,.cmp-table thead td{padding-top:20px;padding-bottom:16px;vertical-align:bottom;border-bottom:1px solid var(--line)}
.cmp-table thead td{font:500 var(--t-meta)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp-table tbody tr:nth-child(even) > *{background:color-mix(in srgb,var(--line) 40%,var(--paper))}
.cmp-table tbody th{width:28%;font:600 var(--t-body)/1.4 var(--font-sans);color:var(--ink)}
.cmp-table .is-pick{background:rgba(var(--arc-b),.045)}
.cmp-table tbody tr:nth-child(even) > .is-pick{background:rgba(var(--arc-b),.08)}
.cmp-table thead .is-pick{box-shadow:inset 0 3px 0 var(--sealed-ink)}
.cmp-gloss{display:block;margin-top:8px;font:400 var(--t-label)/1.4 var(--font-sans);color:var(--muted)}
.cmp-v{display:flex;align-items:flex-start;gap:10px}
.cmp-v .i{flex:none;width:18px;height:18px;margin-top:2px;stroke-width:2.2}
.cmp-v.is-yes .i{color:var(--sealed-ink)}
.cmp-v.is-same .i{color:var(--ink)}
.cmp-v.is-note::before{content:"";flex:none;width:8px;height:8px;margin:7px 5px 0;border-radius:50%;background:var(--faint)}
.cmp-table tfoot td{padding:18px 22px 22px;border-top:1px solid var(--line)}
.cmp-table tfoot .btn{min-width:180px}
@media (max-width:360px){
  .cmp-table tfoot .btn{font-size:13px;padding-inline:6px}
  .mock-lines li{grid-template-columns:minmax(0,1fr) auto}
  .mock-lines li > .tag:first-child{display:none}
  .est-split .mode{gap:6px;padding:0 7px;letter-spacing:.03em}
  .est-split th{white-space:nowrap}
}
@media (max-width:760px){
  .cmp-table,.cmp-table thead,.cmp-table tbody,.cmp-table tfoot{display:block}
  .cmp-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp-table thead td,.cmp-table tfoot td:first-child{display:none}
  .cmp-table th,.cmp-table td{padding:12px 14px;font-size:14px}
  .cmp-table thead th{padding-top:16px}
  .cmp-table tbody th{grid-column:1 / -1;width:auto;padding-bottom:2px;font-size:var(--t-label);background:transparent!important}
  .cmp-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--line) 40%,var(--paper))}
  .cmp-table tbody tr > td{padding-top:6px}
  .cmp-table tfoot td{padding:14px}
  .cmp-table tfoot .btn{min-width:0;width:100%;padding-inline:8px;white-space:nowrap}
  .cmp-table thead td{width:auto}
}

/* A row that opens: label, chevron; the detail stays open across re-renders */
.row-open{margin-top:var(--sp-2);border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.row-open > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:52px;padding:0 18px;border-radius:12px;font:500 var(--t-body)/1.3 var(--font-sans);color:var(--ink);cursor:pointer;list-style:none}
.row-open > summary::-webkit-details-marker{display:none}
.row-open > summary .chev{width:18px;height:18px;transition:transform .2s var(--ease)}
.row-open[open] > summary .chev{transform:rotate(180deg)}
.row-open > summary:hover{color:var(--vital-ink)}
.row-open-body{display:grid;gap:var(--sp-2);padding:0 18px 18px;font-size:var(--t-body);line-height:1.55;color:var(--muted)}
.row-open-body b{font-weight:500;color:var(--ink)}

/* Estimator on Home: the two cards share a height; the result leads with one big number */
.est.is-even{align-items:stretch}
.est.is-even .est-out{position:static;display:flex;flex-direction:column}
.est-big{margin-top:6px}
.est-split{width:100%;margin-top:var(--sp-3);border-collapse:collapse}
.est-split th,.est-split td{padding:12px 0;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.est-split thead th{padding-top:0;border-top:0;text-align:right}
.est-split thead td{border-top:0}
.est-split tbody th{font-size:var(--t-body);font-weight:400;color:var(--muted)}
.est-split td{padding-left:12px;font:500 var(--t-read)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.est-split .is-key th{font-weight:500;color:var(--ink)}
.est-split .is-key td{font-size:19px;color:var(--ink)}
.est-out .est-act{margin-top:auto;padding-top:var(--sp-4)}
.est-out .est-act .link-arrow{margin-top:4px}

/* Price cards: the published rates in large type, Sealed first */
.price{display:flex;flex-direction:column;padding:var(--sp-4)}
.price-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.price-gloss{flex-basis:100%;margin-top:4px;font-size:var(--t-label);line-height:1.45;color:var(--muted)}
.price-rows{margin-top:var(--sp-3);border-top:1px solid var(--line)}
.price-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.price-rows dt{font-size:var(--t-body);color:var(--ink)}
.price-rows dd{font:600 32px/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:640px){.price{padding:var(--sp-3)}.price-rows dd{font-size:26px}}

/* Partner band: one line of outcome, one button */
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-3) var(--sp-6);padding:var(--sp-5);border-radius:20px;background:linear-gradient(120deg,var(--paper) 0%,var(--tint-soft) 100%);box-shadow:inset 0 0 0 1px var(--tint-mid)}
.band .h2{max-width:20em}
.band-act{display:grid;justify-items:start;gap:10px}
.band-act .fine{max-width:16em}
@media (max-width:860px){.band{grid-template-columns:minmax(0,1fr);padding:var(--sp-4) var(--sp-3)}}

/* Header menus on desktop: every entry is one label line and one description line */
.menu-link{display:flex;align-items:flex-start;gap:12px}
.menu-link > .i{flex:none;width:20px;height:20px;margin-top:1px;color:var(--vital-ink)}
.menu-text{display:block;min-width:0}
.menu-lead .menu-label .i{display:none}
@media (min-width:981px){
  .site-nav .menu-label,.site-nav .menu-desc{white-space:nowrap}
  .site-nav .menu-panel{width:max-content;min-width:300px}
  .site-nav .menu-list.two{grid-template-columns:repeat(2,max-content);column-gap:4px}
}

/* Footer: links on one line each; notices, sources and the address open on request */
.foot-nav{grid-template-columns:repeat(5,max-content);justify-content:space-between;gap:var(--sp-5) var(--sp-4)}
.foot-links a{white-space:nowrap}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:var(--t-label);color:var(--muted)}
.foot-base ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-3)}
.foot-base a,.foot-base button{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;font-size:var(--t-label);color:var(--ink);text-decoration:none;cursor:pointer}
.foot-base a:hover,.foot-base button:hover{color:var(--vital-ink);text-decoration:underline;text-underline-offset:.24em}
.foot-fold > summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;border-radius:var(--r-ctl);font-size:var(--t-label);color:var(--ink);cursor:pointer;list-style:none}
.foot-fold > summary::-webkit-details-marker{display:none}
.foot-fold > summary .chev{width:16px;height:16px;transition:transform .2s var(--ease)}
.foot-fold[open] > summary .chev{transform:rotate(180deg)}
.foot-fold > summary:hover{color:var(--vital-ink)}
.foot-fold-body{margin-top:var(--sp-3)}
.foot-fold-body .foot-notes{margin-top:0}
@media (max-width:1140px){.foot-nav{grid-template-columns:repeat(3,max-content);justify-content:start;column-gap:var(--sp-8)}}
@media (max-width:800px){.foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-3)}.foot-links a{white-space:normal}}


/* =============================================================================
   14  UTILITIES
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.measure{max-width:40em}
.center{text-align:center}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}


/* =============================================================================
   15  MOTION, FORCED COLORS, PRINT
   Easing everywhere: cubic-bezier(.16,1,.3,1). Arcs are still. Strands pause by
   default for reduced motion (nqd.js); everything else stops transitioning.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .big-num,.big-num small,.big-num .ast{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
  .btn,.seg,.tab[aria-selected="true"],.pick[aria-pressed="true"]{border:1px solid ButtonText}
  .seg-opt input:checked + span{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .eyebrow::before,.pill::before,.proof-bar a::before,.pf-note::before{forced-color-adjust:none;background:CanvasText}
}
@media print{
  body::before,.strands,.motion-btn,.arcs,.site-nav,.menu-toggle,.nav-cta-wrap,.skip,.est-bar{display:none!important}
  .site-header{position:static}
  .deck{background:#fff!important;color:#000}
  .deck *{color:#000!important}
  .card,.glass,.table-wrap,.product-win,.product-float{box-shadow:none}
}

/* 40. Launch site: the waitlist card (/start/, /login/, /demo/). The form, then its done state in the same card: joined, welcome back or not sent. */
.wl-card .card-title{font-size:var(--t-3);line-height:1.2}
.wl-card .wl-sub{margin-top:6px;font-size:var(--t-label);line-height:1.5;color:var(--muted)}
.wl-card .form{margin-top:var(--sp-3)}
.wl-card .form-note + .form-note{margin-top:calc(4px - var(--sp-3))}
.wl-done{display:grid;justify-items:start;gap:var(--sp-2)}
.wl-done:focus{outline:none}
.wl-done .ic-disc{background:var(--success-bg);color:var(--success-fg)}
.wl-ic{display:grid;place-items:center}
.wl-ic[hidden]{display:none}
.wl-done[data-state="fail"] .ic-disc{background:var(--warn-bg);color:var(--warn-ink)}
.wl-done .btn-block{margin-top:var(--sp-1)}
.wl-done p{font-size:var(--t-read);line-height:1.55;color:var(--text)}
/* 41. Launch: a sent form (nqd.js 11) keeps only its thank-you line */
form[data-send].is-sent > :not([data-sent]){display:none}

/* 42. Hero sample runs (.mock[data-run], nqd.js 8b), launch: the card replays the agent's check while the strands play. It rests in its
   finished state; nothing in it waits on the animation. .mock-tall gives an industry card Home's height; .mock-say is its status line. */
.mock-tall .mock-body{display:flex;flex-direction:column;min-height:346px;padding:20px 20px 18px}
.mock-tall .mock-lines{margin-top:18px}
.mock-tall .mock-lines li{padding-block:12px}
.mock-tall .mock-steps{margin-top:18px}
.mock-say{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font:500 12px/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--success-fg)}
.mock-dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor}
.mock.is-running .mock-say{color:var(--vital-ink)}
.mock.is-running .mock-dot{animation:mock-pulse 1.1s var(--ease) infinite}
.mock-lines li{position:relative;overflow:hidden}
.mock-lines li > .tag:last-child{transition:opacity .35s var(--ease),transform .35s var(--ease),filter .35s var(--ease)}
.mock.is-running .mock-lines li.is-wait > .tag:last-child{opacity:.22;filter:grayscale(1);transform:scale(.92)}
.mock-lines li::after{content:"";position:absolute;inset:0;transform:translateX(-102%);background:linear-gradient(90deg,transparent 0%,rgba(var(--arc-b),.16) 70%,transparent 100%);pointer-events:none}
.mock-lines li.is-scan{border-color:color-mix(in srgb,var(--vital-ink) 35%,var(--line))}
.mock-lines li.is-scan::after{animation:mock-scan .75s var(--ease) forwards}
.mock-lines li.is-hit > .tag:last-child{animation:mock-pop .6s var(--ease)}
.mock-steps li::before,.mock-steps li::after,.mock-steps li{transition:color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
@keyframes mock-scan{to{transform:translateX(102%)}}
@keyframes mock-pop{0%{transform:scale(.86);box-shadow:0 0 0 0 color-mix(in srgb,var(--tone-dot,var(--success-fg)) 45%,transparent)}55%{transform:scale(1.07)}100%{transform:scale(1);box-shadow:0 0 0 7px transparent}}
@keyframes mock-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@media (max-width:980px){.mock-tall .mock-body{min-height:0}}

/* 43. Rich data table (.table-rich), launch: Home's comparison-table treatment for a data table. Row labels carry the weight, even rows
   are shaded, the answer column (.is-ans) is tinted under an accent bar, results are tone tags with a note beneath, rates read bold and
   tariff codes in mono. Phones keep .table-stack's one card per row, with the answer right under the row label. */
.table-wrap.is-rich{overflow:hidden}
.table-rich{table-layout:fixed}
.table-rich caption{padding:18px 22px 10px;color:var(--vital-ink)}
.table-rich th,.table-rich td{padding:16px 22px}
.table-rich thead th{padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.table-rich thead th:first-child{width:25%}
.table-rich thead th.is-ans{width:27%}
.table-rich tbody th{font:600 var(--t-body)/1.4 var(--font-sans);color:var(--ink)}
.table-rich tbody tr:nth-child(even) > *{background:color-mix(in srgb,var(--line) 40%,var(--paper))}
.table-rich .is-ans{background:color-mix(in srgb,var(--tint-soft) 40%,var(--paper))}
.table-rich tbody tr:nth-child(even) > .is-ans{background:color-mix(in srgb,var(--tint-soft) 75%,var(--paper))}
.table-rich thead th.is-ans{box-shadow:inset 0 3px 0 var(--vital-ink);color:var(--vital-ink)}
.table-rich td{color:var(--text)}
.table-rich td b{font-weight:600;color:var(--ink)}
.table-rich .code{font:400 12.5px/1.4 var(--font-mono);letter-spacing:.01em;color:var(--muted);white-space:nowrap}
.table-rich .sub{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em}
.table-rich .is-ans > b{display:block;font-weight:500}
.st{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.st .tag{min-height:26px;padding:0 10px;font-size:13px}
.st .tag .i{width:13px;height:13px}
.st-note{display:block;margin-top:7px;font-size:var(--t-label);line-height:1.45;color:var(--text-2)}
.st-note a{color:var(--vital-ink)}
@media (max-width:640px){
  .table-rich{table-layout:auto}
  .table-rich caption{padding:14px 14px 6px}
  .table-rich th,.table-rich td{padding:0}
  .table-rich tbody tr{padding:16px 14px}
  .table-rich tbody tr{display:flex;flex-direction:column}
  .table-rich tbody tr > *{background:transparent!important}
  .table-rich tbody tr:nth-child(even){background:color-mix(in srgb,var(--line) 40%,var(--paper))}
  .table-rich tbody th{order:0}
  .table-rich tbody .is-ans{order:1;margin-top:8px}
  .table-rich tbody td:not(.is-ans){order:2}
  .table-rich .is-ans > .cell-label{display:none}
  .table-rich tbody .is-ans > b{color:var(--vital-ink)}
}

/* 44. The example's result: the Sealed column carries Home's tint and accent bar (launch) */
.est-split .is-pick{padding-right:12px;background:rgba(var(--arc-b),.045)}
.est-split thead .is-pick{padding-top:8px;box-shadow:inset 0 3px 0 var(--sealed-ink)}
.est-split .is-key .is-pick{background:rgba(var(--arc-b),.08)}

/* 45. Worked examples (.t09-ill), launch: the step table takes the duty table's hierarchy. Amounts in mono ink, a light zebra, the row the
   example builds to (.is-key) tinted under an accent rule with its amount in bold accent, and statuses as the duty table's tone tags.
   The mode table sits clear of the fee picker below it. */
.t09-ill .card .table-mini:not(.table-stack){width:calc(100% + 24px);margin-inline:-12px}
.t09-ill .card .table-mini:not(.table-stack) caption{padding:0 12px 8px}
.t09-ill .table-mini:not(.table-stack) :is(th,td):first-child{padding-left:12px}
.t09-ill .table-mini:not(.table-stack) :is(th,td):last-child{padding-right:12px}
.t09-ill .table-mini tbody tr:nth-child(even) > *{background:color-mix(in srgb,var(--line) 32%,var(--paper))}
.t09-ill .table-mini tbody tr.is-key > *{background:color-mix(in srgb,var(--tint-soft) 70%,var(--paper));box-shadow:inset 0 2px 0 var(--vital-ink)}
.t09-ill .table-mini tr.is-key th{font-weight:600}
.t09-ill .table-mini tr.is-key td.n{font-weight:600;color:var(--vital-ink)}
.t09-ill .table-mini .tag{min-height:22px;padding:0 8px;font-size:12px;vertical-align:1px}
.t09-ill .table-mini .tag .i{width:12px;height:12px}
.t09-ill .table-mini .sub .tag{margin-right:2px}
.t09-sec .cmp + .t09-fees{margin-top:var(--sp-3)}

/* 46. Build pack (Mark, October 7, 2026): the approved home page review build, carried to every page. Depth gradients, the brand pill,
   the demo gate, the Get started band with image B (the "dark room", after apexhealthiq.com), the hero image layer for pages other than
   Home (.pg-bleed), footer C and header lockup D. Lifted from home-review.html; the review's option switcher is gone, since each section here
   holds one image. Home's own hero image geometry (the extra-long fade) is Home's page CSS. The strands and their pause control are gone:
   the image settles once, and nothing moves under reduced motion. */

/* 46a. depth: every solid button and icon fill takes a slight top-to-bottom gradient and a hairline top highlight, held to a few
   percent of lightness so it reads as material, not colour */
body{background:var(--aurora-base)}
:root{--grad-ink:linear-gradient(180deg,#36373d 0%,#1b1b1f 55%,#141416 100%)}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--elev-1)}
.deck .btn-primary,.on-dark .btn-primary{
  background:linear-gradient(180deg,#ffffff 0%,#f3f4fd 60%,#e8eafa 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(60,69,212,.10),0 10px 24px -14px rgba(0,0,0,.7)}
.btn-ink{background:var(--grad-ink);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.2),0 10px 24px -14px rgba(0,0,0,.8)}
.btn-ink::after{background:var(--paper)}
.seg-opt input:checked + span{background:var(--grad-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ic-disc,.card-ic{background:linear-gradient(160deg,#f3f4ff 0%,#e9ebff 50%,#dcdffd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(60,69,212,.08)}
.step-n{background:linear-gradient(180deg,#ffffff 0%,#eef0ff 100%);box-shadow:inset 0 1px 0 #fff,0 4px 10px -6px rgba(60,69,212,.35)}
.mock-steps .is-done::before{background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E"),linear-gradient(180deg,#348a0a,#1f6400);
  background-size:11px 11px,100% 100%;background-position:center;background-repeat:no-repeat}
.mock-steps .is-now::before{background:linear-gradient(180deg,#fff,#eef0ff)}
.range::-webkit-slider-thumb{background:linear-gradient(180deg,#fff,#eef0ff)}

/* 46b. the product name: a glass pill, "AI Drawback" (the footer); frost over the deck, a pale chip on light */
.brand-pill{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:var(--r-pill);
  font:500 13px/1 var(--font-sans);letter-spacing:.005em;white-space:nowrap;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -10px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
.site-header.is-light .brand-pill,.site-header.is-open .brand-pill,.site-footer .brand-pill,.foot-brand .brand-pill{color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(233,235,255,.75));
  box-shadow:inset 0 0 0 1px rgba(60,69,212,.16),inset 0 1px 0 #fff,0 6px 16px -12px rgba(23,23,23,.35)}
@media (max-width:480px){.site-header .brand-pill{display:none}}

/* 46c. the speed claim's asterisk, and the band's quiet "start" link */
.h1 .ast{font-size:.42em;vertical-align:1.15em;margin-left:2px;color:var(--vital-tint)}
.deck .ast{color:var(--vital-tint)}
.gs-start{margin-top:-4px;color:var(--vital-tint)}
.gs-start:hover{color:#fff}

/* 46d. the demo gate: one screen, two fields, one action */
.gate{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:20px;color:#fff;overflow:auto;
  background:linear-gradient(180deg,rgba(28,32,52,.92),rgba(14,16,23,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 40px 90px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
.gate::backdrop{background:rgba(9,11,17,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gate[open]{animation:gate-in .28s var(--ease)}
@keyframes gate-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.gate-form{position:relative;padding:32px 32px 28px}
.gate-step{display:flex;flex-direction:column;gap:16px}
.gate-step[hidden]{display:none}
.gate .gs-eyebrow{margin:0}
.gate-h{font:500 26px/1.15 var(--font-sans);letter-spacing:-.02em;color:#fff;outline:none}
.gate-p{color:rgba(255,255,255,.82);font-size:var(--t-body);line-height:1.55}
.gate-field{display:flex;flex-direction:column;gap:6px}
.gate-field label{font:500 var(--t-label)/1.3 var(--font-sans);color:#fff}
.gate-field input{height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-ctl);
  background:rgba(255,255,255,.06);color:#fff;font:400 16px/1.2 var(--font-sans)}
.gate-field input:hover{border-color:rgba(255,255,255,.45)}
.gate-field input:focus-visible{outline:2px solid var(--vital-from);outline-offset:1px;border-color:transparent}
.gate-field input[aria-invalid="true"]{border-color:#ffb36b}
.gate-err{min-height:0;font-size:var(--t-meta);line-height:1.4;color:#ffc58f}
.gate-err:empty{display:none}
.gate-go{margin-top:4px}
.gate-go[aria-busy="true"]{opacity:.7;cursor:progress}
.gate-fine{font-size:var(--t-meta);line-height:1.55;color:rgba(255,255,255,.72)}
.gate-call{align-self:center;color:var(--vital-tint);font-size:var(--t-label)}
.gate-call:hover{color:#fff}
.gate-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.8);cursor:pointer}
.gate-x:hover{background:rgba(255,255,255,.1);color:#fff}
.gate-x:focus-visible{outline:2px solid var(--vital-from);outline-offset:2px}
.gate-x .i{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.gate[open]{animation:none}}

/* 46e. Get started, the dark room (image B). The frame runs full bleed under a vertical scrim in the deck's own dark: heavy at the top,
   where the heading sits, lighter through the cards, heavy again at the foot. The three steps are translucent glass; the buttons are the only
   opaque, fully lit objects in the band, so the eye has one place to go. A page sets the frame's focal point with --op. */
.gs-band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(72px,8vw,112px);background:#0e1017;color:var(--on-deck)}
.gs-bleed{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gs-bleed img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--op,50% 50%);
  filter:saturate(1.1) brightness(.98)}
.gs-band[data-v="data-landscape"]{--op:50% 34%}
.gs-bleed::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(14,16,23,.86) 0%,rgba(14,16,23,.62) 30%,rgba(14,16,23,.5) 52%,rgba(14,16,23,.66) 74%,rgba(14,16,23,.94) 100%),
    linear-gradient(97deg,rgba(14,16,23,.35) 0%,rgba(14,16,23,0) 45%,rgba(33,48,134,.18) 100%)}
.gs-band .wrap{position:relative}
.gs-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 var(--t-meta)/1 var(--font-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--vital-tint)}
.gs-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--vital-tint)}
.gs-band .h2{color:#fff}
.gs-band .lede{margin-top:var(--sp-2);color:rgba(255,255,255,.84)}
.gs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:40px 0 0;padding:0;list-style:none}
.gs-card{display:flex;flex-direction:column;min-width:0;padding:26px 26px 22px;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 64px -30px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease)}
.gs-card:hover{border-color:rgba(183,190,251,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 34px 76px -28px rgba(0,0,0,.85)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gs-card{background:rgba(22,26,42,.9)}}
.gs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.gs-n{display:grid;place-items:center;min-width:34px;height:30px;padding:0 10px;border-radius:9px;
  background:linear-gradient(180deg,rgba(183,190,251,.22),rgba(183,190,251,.08)),rgba(14,16,23,.62);box-shadow:inset 0 0 0 1px rgba(183,190,251,.36);
  font:600 var(--t-label)/1 var(--font-mono);letter-spacing:.06em;color:var(--vital-tint)}
.gs-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:linear-gradient(180deg,rgba(183,190,251,.2),rgba(183,190,251,.07));
  box-shadow:inset 0 0 0 1px rgba(183,190,251,.24),inset 0 1px 0 rgba(255,255,255,.14);color:var(--vital-tint)}
.gs-ic .i{width:19px;height:19px}
.gs-t{margin:0 0 9px;font:600 19px/1.32 var(--font-sans);letter-spacing:-.014em;color:#fff;text-wrap:balance}
.gs-p{margin:0;font-size:var(--t-label);line-height:1.65;color:rgba(255,255,255,.8)}
.gs-f{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:auto;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16)}
.gs-p + .gs-f{margin-top:20px}
.gs-k{flex:none;font:500 var(--t-fine)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.gs-v{font:500 var(--t-label)/1.3 var(--font-mono);letter-spacing:.02em;color:var(--vital-tint);text-align:right}
.gs-cta{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:52px;text-align:center}
.gs-cta p{max-width:62ch;font:500 var(--t-label)/1.7 var(--font-sans);color:rgba(255,255,255,.86)}
.gs-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gs-act .btn{min-width:220px}
@media (max-width:900px){.gs-steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.gs-act{width:100%}.gs-act .btn{width:100%;min-width:0}}
@media print{.gs-bleed{display:none!important}}

/* 46f. image A on any hero but Home's: the frame sits on the right two thirds, transparent behind the copy column, fully opaque by the
   middle of the page, and dissolves into the next section at the foot. It settles once; a page sets its focal point with --op. */
.pg-bleed{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pg-bleed img{position:absolute;top:0;right:0;width:min(70%,1700px);height:100%;max-width:none;object-fit:cover;object-position:var(--op,50% 50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,rgba(0,0,0,.55) 46%,#000 64%),linear-gradient(180deg,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,rgba(0,0,0,.55) 46%,#000 64%),linear-gradient(180deg,#000 70%,transparent 100%);
  mask-composite:intersect;animation:pg-settle 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes pg-settle{from{transform:scale(1.05)}to{transform:none}}
@media (max-width:900px){.pg-bleed img{width:100%;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 70%,transparent 100%)}}
@media (prefers-reduced-motion:reduce){.pg-bleed img{animation:none}}
@media print{.pg-bleed{display:none!important}}

/* 46g. footer C: dark, after the apexhealthiq.com footer. One glass plate holds the compliance badges and the closing bar; the ghosted
   NexQloud emblem sits on the right at 10% white, frosted where the plate covers it and crisp where it runs past the edge (Mark, 7 Oct) */
html{background:#0e1017}
.site-footer.ft-dark{position:relative;isolation:isolate;overflow:hidden;border-top:0;
  padding-block:clamp(64px,6vw,88px) 40px;background:var(--deck-bloom),var(--deck);color:#fff}
.ft-dark > .wrap{position:relative;z-index:1}
.ft-dark .brand{color:#fff}
.site-footer.ft-dark .brand-pill{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -10px rgba(0,0,0,.6)}
.ft-dark .foot-top{border-bottom-color:rgba(255,255,255,.10)}
.ft-dark .foot-line,.ft-dark .foot-say{color:rgba(255,255,255,.66)}
.ft-dark .foot-h,.ft-label{font:600 15px/20px var(--font-sans);letter-spacing:-.005em;text-transform:none;color:#fff;white-space:normal}
.ft-dark .foot-links{margin-top:var(--sp-2)}
.ft-dark .foot-links a{font-size:14px;color:rgba(255,255,255,.68)}
.ft-dark .foot-links a:hover,.ft-dark .foot-links a[aria-current="page"]{color:#fff}
.ft-dark a:focus-visible,.ft-dark button:focus-visible,.ft-dark summary:focus-visible{outline:2px solid var(--vital-tint);outline-offset:3px}
.ft-comp{margin-top:var(--sp-6);padding:34px 0;border-top:1px solid rgba(255,255,255,.10)}
.ft-label{margin:0 0 16px}
.ft-badges{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.ft-badges li{display:flex;align-items:center;gap:13px;padding:14px 22px 14px 14px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.cb-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;color:var(--vital-tint);
  background:linear-gradient(180deg,rgba(183,190,251,.2),rgba(183,190,251,.07));
  box-shadow:inset 0 0 0 1px rgba(183,190,251,.24),inset 0 1px 0 rgba(255,255,255,.14)}
.cb-ic svg{width:19px;height:19px}
.cb-t b{display:block;font:600 15px/1.25 var(--font-sans);color:#fff}
.cb-t i{display:block;font:400 var(--t-meta)/1.5 var(--font-mono);font-style:normal;letter-spacing:.03em;color:rgba(255,255,255,.66)}
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10)}
.ft-rights,.ft-note,.ft-by > span{margin:0;font:400 13px/1.6 var(--font-sans);color:rgba(255,255,255,.62)}
.ft-rights{font-weight:500;color:rgba(255,255,255,.86)}
.ft-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:0;padding:0;list-style:none}
.ft-links a,.ft-links button{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;
  font:400 13px/1 var(--font-sans);color:rgba(255,255,255,.68);text-decoration:none;cursor:pointer;border-radius:4px}
.ft-links a:hover,.ft-links button:hover{color:#fff;text-decoration:underline;text-underline-offset:.24em}
.ft-by{margin:0 0 0 auto;display:inline-flex;align-items:center;gap:10px}
.ft-by .nqm{display:block;height:19px;width:auto}
.ft-dark .foot-fold{margin-top:var(--sp-2)}
.ft-dark .foot-fold > summary{font-size:13px;color:rgba(255,255,255,.68)}
.ft-dark .foot-fold > summary:hover{color:#fff}
.ft-dark .foot-notes{border-top-color:rgba(255,255,255,.10);color:rgba(255,255,255,.7)}
.ft-dark .foot-notes b{color:#fff}
.ft-dark .foot-notes .link,.ft-dark .src-list .link,.ft-dark .foot-licensing .link{color:var(--vital-tint)}
.ft-dark .foot-licensing:target{background:rgba(183,190,251,.10);outline-color:rgba(183,190,251,.10)}
.ft-dark .src-title{color:#fff}
.ft-dark .src > summary:hover .src-title{color:var(--vital-tint)}
.ft-dark .src-title .i,.ft-dark .src-n,.ft-dark .src-back{color:var(--vital-tint)}
.ft-dark .src-when,.ft-dark .src-intro{color:rgba(255,255,255,.66)}
.ft-dark .src-list li{color:rgba(255,255,255,.72)}
.ft-dark .src-list li:target{background:rgba(183,190,251,.10)}
.ft-dark .src-back:hover{background:rgba(255,255,255,.08)}
.ft-dark .foot-legal a,.ft-dark .foot-legal button{color:rgba(255,255,255,.8)}
.ft-dark .foot-legal a:hover{color:#fff}
.ft-dark .foot-bottom{border-top-color:rgba(255,255,255,.10);color:rgba(255,255,255,.66)}
.ft-dark .foot-bottom .foot-copy{color:#fff}
.ft-ghosts{position:absolute;inset:0;z-index:0;pointer-events:none;color:#fff}
.ft-ghost{position:absolute;display:none;width:auto;max-width:none}
.ft-dark[data-ft="c"] .ft-ghost-emblem{display:block;height:min(640px,58vw);right:max(-4%,calc((100% - var(--maxw)) / 2 - 220px));left:auto;top:auto;bottom:-170px;transform:none;opacity:.1}
.ft-dark[data-ft="c"] .ft-plate{margin-top:var(--sp-6);padding:6px 32px 26px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 70px -36px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.ft-dark[data-ft="c"] .ft-comp{margin-top:0;border-top:0;padding-bottom:28px}
.ft-dark[data-ft="c"] .ft-badges li{background:rgba(255,255,255,.05)}
@media (max-width:760px){
  .ft-by{margin-left:0;width:100%}
  .ft-bar{gap:6px 20px}
  .ft-dark[data-ft="c"] .ft-plate{padding:2px 18px 20px}
  .ft-dark[data-ft="c"] .ft-ghost-emblem{height:360px;right:-28%;left:auto;bottom:-90px;top:auto}
}
@media (max-width:480px){.ft-badges li{flex:1 1 100%}}
@media print{.ft-ghosts{display:none}}

/* 46h. header lockup "D, fitted" (Mark, 7 Oct 2026): "AI Drawback" fitted to the NexQloud wordmark. Lexend 400 matches the mark's
   stem-to-x-height ratio (.208 against .21); at 13.4px the capitals equal the wordmark's x-height (9.4px) and share its baseline (the last
   .25px is a transform, since text offsets snap to whole pixels). The 1px rule runs from the ascender line to the baseline, about 10px of
   space from ink to rule on each side. The descriptor is hidden at 480px and below. */
.site-header .brand-d{display:block;position:relative;flex:none;height:24px;margin-left:-4px;padding-left:10.6px;
  color:rgba(255,255,255,.7)}
.site-header .brand-d::before{content:"";position:absolute;left:0;top:0;width:1px;height:13.5px;transform:translateY(3.25px);background:rgba(255,255,255,.26)}
.site-header .brand-d > span{display:block;position:relative;top:-.33px;transform:translateY(-.25px);font:400 13.4px/24px var(--font-sans);letter-spacing:.012em;white-space:nowrap}
.site-header.is-light .brand-d,.site-header.is-open .brand-d{color:var(--muted)}
.site-header.is-light .brand-d::before,.site-header.is-open .brand-d::before{background:var(--line)}
@media (max-width:480px){.site-header .brand-d{display:none}}


/* 47. Long-form pages close with Home's three sections after the Get started band (build pack 4.11): IEEPA refunds, For partners and
   Top questions, laid out as on Home. The page note carries the byline or legal line the old closing band held. */
.t01-cape{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3) var(--sp-8);align-items:start}
.t01-cape .section-head{margin-bottom:0}
.t01-cape-body > * + *{margin-top:var(--sp-2)}
@media (max-width:980px){.t01-cape{grid-template-columns:minmax(0,1fr)}}
.page-note{padding-bottom:var(--sp-6);font-size:var(--t-meta);line-height:1.55;color:var(--muted)}
.page-note p{margin:0;max-width:72ch;font:inherit;color:inherit}
.page-note p + p{margin-top:6px}
.page-note a{color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* 48. Header D at the narrowest phones (QA, October 7, 2026): logo, Run the demo and the menu fit 320px with no sideways scroll. */
@media (max-width: 359px) {
  .site-header .nav-cta { padding-inline: 10px; font-size: 13px; }
  .site-header .header-inner { gap: 4px; }
}

/* 49. Review fixes (Mark, October 7, 2026).
   a. A white card inside a dark hero (the demo, waitlist and login cards) takes the light-ground primary button: ink, white text.
      Before, it inherited the deck's white button and vanished on the white card. */
.deck .form-card .btn-primary,.on-dark .form-card .btn-primary,.deck .wl-card .btn-primary{
  --btn-fg:#fff;--btn-glow:var(--paper);--focus:var(--vital-ink);
  background:var(--grad-ink);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -14px rgba(0,0,0,.6)}
.deck .form-card .btn-primary:hover,.deck .wl-card .btn-primary:hover{background:linear-gradient(180deg,#2b2c40 0%,#1d1f4a 55%,#232a8c 100%)}
/* b. The Sealed receipt earns color: an indigo header, the hardware band on the soft tint, indigo field names, a tinted signature line.
      Contrast: white on #2a31a8 is 9.9:1; #3c45d4 on #e9ebff is 6.0:1; ink on the tints well above 12:1. No padlocks or shields. */
.receipt{border-color:color-mix(in srgb,var(--vital-ink) 22%,var(--line))}
.receipt-hd{background:linear-gradient(120deg,#20267f 0%,#2a31a8 55%,#4a2fa3 100%);color:#fff}
.receipt-hd > .i,.receipt-title{color:#fff}
.receipt-id{color:#c9cdfb}
.receipt-band.is-hw{background:var(--tint-soft)}
.receipt-band-h{color:var(--vital-ink)}
.receipt-band.is-hw .receipt-band-h::before{background:var(--vital-ink);border-color:var(--vital-ink)}
.receipt-band:not(.is-hw){background:linear-gradient(180deg,#fbfbff,#fff)}
.receipt-fields dt,.receipt-fields dt a{color:var(--vital-ink)}
.receipt-ft{background:var(--tint-mid);border-top-color:color-mix(in srgb,var(--vital-ink) 18%,var(--line));color:var(--ink)}
.receipt-ft .link{color:var(--vital-ink)}

/* 50. The demo gate is a light form (Mark, October 7, 2026): white card, ink text, the site's light field and button styles.
   The page behind still dims. Contrast: ink on white 17:1; muted 6.1:1; error text #b3261e 6.5:1. */
.gate.gate-light{background:var(--paper);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(9,11,17,.55),0 0 0 1px rgba(60,69,212,.06)}
.gate-light .gs-eyebrow{color:var(--vital-ink)}
.gate-light .gs-eyebrow::before{background:var(--vital-ink)}
.gate-light .gate-h{color:var(--ink)}
.gate-light .gate-p{color:var(--text)}
.gate-light .gate-field label{color:var(--ink)}
.gate-light .gate-field input{background:var(--paper);color:var(--ink);border:1px solid var(--field-line)}
.gate-light .gate-field input:hover{border-color:var(--faint)}
.gate-light .gate-field input:focus-visible{outline:2px solid var(--vital-ink);outline-offset:1px;border-color:transparent}
.gate-light .gate-field input[aria-invalid="true"]{border-color:#b3261e}
.gate-light .gate-err{color:#b3261e}
.gate-light .gate-fine{color:var(--muted)}
.gate-light .gate-call{color:var(--vital-ink)}
.gate-light .gate-call:hover{color:var(--ink)}
.gate-light .gate-x{background:transparent;color:var(--muted)}
.gate-light .gate-x:hover{background:var(--tint-soft);color:var(--ink)}
.gate-light .gate-x:focus-visible{outline-color:var(--vital-ink)}
.gate-light .btn-primary{--btn-fg:#fff;--btn-glow:var(--paper);background:var(--grad-ink);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -14px rgba(0,0,0,.6)}