/* Tandm website, design system v3
   ------------------------------------------------------------------------
   Brand inputs: Outfit for display type (Regular), Figtree for text, Azure
   Radiance as the principal colour, Ebony Clay as the neutral, Chateau Green
   for confirmation states only. Every colour below comes from the brand
   palette (Colors.pdf v1.0.0). Buttons and links on light use Azure 800 so
   text clears WCAG AA; Azure 700 carries the brand in graphics.

   Sections
   01 Tokens            08 Statement, split rows, stage
   02 Base              09 Product UI (stylised recreations)
   03 Type              10 Ledger, spec list, steps, questions
   04 Layout            11 Calculator
   05 Utility bar       12 Forms and gated panels
   06 Header, nav       13 Bands, cards, diagram, misc
   07 Buttons, heroes   14 Footer, motion, print
                        15 Polish (finishing pass)
   ------------------------------------------------------------------------ */

/* 01 Tokens ----------------------------------------------------------------- */
:root {
  --azure-50:#EDFAFF; --azure-100:#D6F2FF; --azure-200:#B5EAFF; --azure-300:#83DFFF;
  --azure-400:#48CBFF; --azure-500:#1EADFF; --azure-600:#068FFF; --azure-700:#007BFF;
  --azure-800:#085EC5; --azure-900:#0D519B; --azure-950:#0E315D;
  --ebony-50:#F5F6FA; --ebony-100:#EBEDF3; --ebony-200:#D2D8E5; --ebony-300:#AAB6CF;
  --ebony-400:#7C8FB4; --ebony-500:#5C709B; --ebony-600:#485981; --ebony-700:#3B4869;
  --ebony-800:#343E58; --ebony-900:#2F374B; --ebony-950:#232838;
  --green-50:#F0FDF5; --green-100:#DBFDEB; --green-200:#BAF8D7; --green-300:#84F1B8;
  --green-500:#1FC870; --green-600:#15B261; --green-700:#13824A; --green-800:#15663D;
  --razz-50:#FEF2F3; --razz-500:#EA4969; --razz-700:#B51B46;
  --poppy-50:#FEF8EC; --poppy-200:#FAD38D; --poppy-400:#F59C29; --poppy-700:#AF3B0E;

  --paper:#FFFFFF; --paper-2:var(--ebony-50); --paper-3:var(--ebony-100);
  --night:var(--ebony-950); --night-2:var(--ebony-900); --deep:var(--azure-950);
  --ink:var(--ebony-950); --text:var(--ebony-700); --muted:var(--ebony-500); --faint:var(--ebony-400);
  --rule:var(--ebony-200); --rule-soft:var(--ebony-100);
  --rule-dark:rgba(255,255,255,.12); --rule-dark-2:rgba(255,255,255,.2);
  --on-dark:#FFFFFF; --on-dark-text:var(--ebony-300); --on-dark-muted:var(--ebony-400);
  --action:var(--azure-800); --action-hover:var(--azure-900);
  --signal:var(--azure-700); --signal-dark:var(--azure-300);
  --confirm:var(--green-500); --confirm-ink:var(--green-700);

  --font-display:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-text:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(44px,6.1vw,90px);
  --fs-h1:clamp(40px,5.2vw,74px);
  --fs-h2:clamp(31px,3.4vw,50px);
  --fs-h3:clamp(23px,2vw,30px);
  --fs-h4:21px;
  --fs-lead:clamp(19px,1.5vw,22px);
  --fs-body:17px; --fs-small:14.5px; --fs-label:12px;

  --page:1280px; --gutter:clamp(20px,5vw,64px); --col-gap:clamp(16px,2.2vw,32px);
  --section:clamp(64px,7.4vw,112px); --section-tight:clamp(48px,5.6vw,80px);
  --header:72px; --utility:0px;

  --rad-1:3px; --rad-2:6px; --rad-3:12px; --rad-4:18px; --rad-pill:999px; --rad-btn:8px;
  /* Legacy names kept so pages still on legacy.css follow the new shape */
  --r-xl:18px; --r-lg:12px; --r-md:8px;
  --line:rgba(35,40,56,.12); --line-dark:var(--rule-dark); --white:#fff;

  --shadow-1:0 1px 2px rgba(35,40,56,.06);
  --shadow-2:0 1px 2px rgba(35,40,56,.05),0 14px 34px -18px rgba(35,40,56,.24);
  --shadow-ui:0 1px 1px rgba(14,49,93,.04),0 3px 8px rgba(14,49,93,.05),0 36px 70px -34px rgba(14,49,93,.42);
  --shadow-ui-dark:0 2px 6px rgba(9,12,20,.24),0 44px 90px -40px rgba(9,12,20,.75);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --z-header:100; --z-utility:101; --z-panel:110; --z-skip:200;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.has-utility { --utility:40px; }

/* 02 Base -------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + var(--utility) + 20px); background:var(--night); }
body { margin:0; min-width:320px; background:var(--paper); color:var(--text); font:400 var(--fs-body)/1.65 var(--font-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; }
img,svg,video,canvas { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,blockquote { margin:0; }
ul[class],ol[class] { list-style:none; padding:0; }
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:400; color:var(--ink); text-wrap:balance; }
p,li,dd,figcaption { text-wrap:pretty; }
strong,b { font-weight:600; color:inherit; }
::selection { background:var(--azure-200); color:var(--ink); }
:focus-visible { outline:2px solid var(--azure-600); outline-offset:3px; border-radius:var(--rad-1); }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:12px; z-index:var(--z-skip); padding:10px 16px; border-radius:var(--rad-2); background:#fff; color:var(--ink); font-weight:600; box-shadow:var(--shadow-2); transform:translateY(-160%); transition:transform .2s var(--ease); }
.skip-link:focus { transform:none; }

/* 03 Type -------------------------------------------------------------------- */
.display, .h1, .h2, .h3, .h4 { font-family:var(--font-display); font-weight:400; }
.display { font-size:var(--fs-display); line-height:.98; letter-spacing:-.036em; }
.h1 { font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.032em; }
.h2 { font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.026em; }
.h3 { font-size:var(--fs-h3); line-height:1.16; letter-spacing:-.016em; }
.h4 { font-size:var(--fs-h4); line-height:1.3; letter-spacing:-.008em; }
.lead { font-family:var(--font-display); font-size:var(--fs-lead); line-height:1.42; letter-spacing:-.012em; color:var(--text); }
.small { font-size:var(--fs-small); line-height:1.55; }
.muted { color:var(--muted); }
.tnum { font-variant-numeric:tabular-nums; }
.measure { max-width:64ch; }
.label { display:flex; align-items:baseline; gap:12px; font:600 var(--fs-label)/1.3 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--action); }
.label .n { color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.label .n::after { content:"/"; margin-left:12px; color:var(--rule); }
.prose > * + * { margin-top:1em; }
.prose h2 { margin-top:1.8em; font-size:var(--fs-h3); line-height:1.18; letter-spacing:-.016em; }
.prose h3 { margin-top:1.6em; font-size:var(--fs-h4); }
.prose ul { padding-left:1.15em; }
.prose li + li { margin-top:.4em; }
.prose a, a.inline { color:var(--action); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover, a.inline:hover { text-decoration-thickness:2px; }
.on-dark { color:var(--on-dark-text); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4 { color:var(--on-dark); }
.on-dark .lead { color:var(--ebony-200); }
.on-dark .label { color:var(--signal-dark); }
.on-dark .label .n { color:var(--on-dark-muted); }
.on-dark .label .n::after { color:rgba(255,255,255,.22); }
.on-dark .muted { color:var(--on-dark-muted); }
.on-dark .gate-card .muted, .on-dark .ui .muted { color:var(--muted); }
.on-dark .prose a, .on-dark a.inline { color:var(--azure-300); }

/* 04 Layout ------------------------------------------------------------------ */
.container { width:min(100%,var(--page)); margin-inline:auto; padding-inline:var(--gutter); }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); }
.section { position:relative; padding-block:var(--section); }
.section--tight { padding-block:var(--section-tight); }
.section--tint { background:var(--paper-2); }
.section--night { background:radial-gradient(56% 70% at 90% 0%,rgba(0,123,255,.12),transparent 62%),radial-gradient(48% 62% at 0% 100%,rgba(14,49,93,.55),transparent 72%),var(--night); color:var(--on-dark-text); isolation:isolate; }
.section--deep { background:radial-gradient(60% 80% at 88% 10%,rgba(0,123,255,.22),transparent 62%),var(--deep); color:var(--on-dark-text); isolation:isolate; }
.section--night::before, .section--deep::before, .hero::before, .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background-image:var(--grain); opacity:.05; pointer-events:none; mix-blend-mode:overlay; }
.section + .section--tint, .section--tint + .section:not(.section--night):not(.section--deep) { border-top:1px solid var(--rule-soft); }

.sec-head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:18px; padding-top:20px; border-top:1px solid var(--rule); margin-bottom:clamp(32px,3.8vw,56px); }
.on-dark .sec-head, .sec-head.on-dark { border-top-color:var(--rule-dark-2); }
.sec-head > .label { grid-column:1 / span 3; padding-top:10px; }
.sec-head-main { grid-column:4 / span 8; }
.sec-head-main .lead { margin-top:22px; max-width:58ch; }
.sec-head-main .h2 { max-width:20ch; }
.sec-head--wide .sec-head-main { grid-column:4 / -1; }
.sec-head--wide .sec-head-main .h2 { max-width:24ch; }

/* 05 Utility bar ------------------------------------------------------------- */
.utility { position:fixed; inset:0 0 auto; z-index:var(--z-utility); min-height:40px; padding-block:7px; display:flex; align-items:center; background:var(--deep); color:var(--azure-100); font-size:13.5px; border-bottom:1px solid rgba(131,223,255,.14); }
.utility-inner { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; padding-inline:48px; }
.utility-tag { font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:var(--azure-300); }
.utility a { color:#fff; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4); white-space:nowrap; }
.utility a:hover { text-decoration-color:#fff; }
.utility-close { position:absolute; right:14px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:var(--rad-2); display:grid; place-items:center; color:var(--azure-200); }
.utility-close:hover { background:rgba(255,255,255,.08); color:#fff; }
.utility-close svg { width:14px; height:14px; }
.utility .u-long { display:inline; } .utility .u-short { display:none; }

/* 06 Header and navigation --------------------------------------------------- */
.hdr { position:fixed; left:0; right:0; top:var(--utility); z-index:var(--z-header); height:var(--header); color:var(--ink); background:rgba(255,255,255,.92); border-bottom:1px solid var(--rule); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); transition:background .3s var(--ease),border-color .3s,color .3s; }
.hdr[data-tone="dark"]:not(.is-scrolled) { color:#fff; background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.hdr-inner { height:100%; display:flex; align-items:center; gap:clamp(20px,3vw,40px); }
.hdr-brand { position:relative; flex:0 0 auto; width:108px; height:32px; }
.hdr-brand img { position:absolute; inset:0; width:108px; height:auto; transition:opacity .25s; }
.hdr-brand .logo-light { opacity:0; }
.hdr[data-tone="dark"]:not(.is-scrolled) .hdr-brand .logo-dark { opacity:0; }
.hdr[data-tone="dark"]:not(.is-scrolled) .hdr-brand .logo-light { opacity:1; }
.hdr-nav { display:flex; align-items:center; gap:clamp(18px,2.2vw,30px); margin-left:auto; font-size:14.5px; font-weight:500; }
.hdr-nav > a, .hdr-menu-btn { position:relative; display:inline-flex; align-items:center; gap:6px; height:var(--header); opacity:.8; transition:opacity .2s; }
.hdr-nav > a:hover, .hdr-menu-btn:hover, .hdr-nav > a[aria-current="page"], .hdr-menu.is-current .hdr-menu-btn { opacity:1; }
.hdr-nav > a::after, .hdr-menu-btn::after { content:""; position:absolute; left:0; right:0; bottom:20px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.hdr-nav > a:hover::after, .hdr-nav > a[aria-current="page"]::after, .hdr-menu.is-current .hdr-menu-btn::after { transform:scaleX(1); }
.hdr-menu { position:relative; }
.hdr-menu-btn svg { width:12px; height:12px; transition:transform .2s var(--ease); }
.hdr-menu-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.hdr-menu-panel { position:absolute; left:50%; top:calc(var(--header) - 6px); width:520px; margin-left:-260px; padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#fff; color:var(--ink); border:1px solid var(--rule); border-radius:var(--rad-3); box-shadow:var(--shadow-ui); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s; }
.hdr-menu.is-open .hdr-menu-panel { opacity:1; visibility:visible; transform:none; transition:opacity .2s var(--ease),transform .2s var(--ease); }
.hdr-menu-panel a { display:block; padding:14px 16px; border-radius:var(--rad-2); }
.hdr-menu-panel a:hover { background:var(--paper-2); }
.hdr-menu-panel b { display:block; font:400 17px/1.25 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.hdr-menu-panel span { display:block; margin-top:4px; font-size:13px; line-height:1.45; color:var(--muted); }
.hdr-menu-panel .hdr-menu-all { grid-column:1 / -1; display:flex; justify-content:space-between; margin-top:4px; padding:12px 16px; border-top:1px solid var(--rule-soft); border-radius:0 0 var(--rad-2) var(--rad-2); font-size:14px; font-weight:600; color:var(--action); }
.hdr-cta { flex:0 0 auto; }
.hdr[data-tone="dark"]:not(.is-scrolled) .hdr-cta { background:#fff; color:var(--ink); }
.hdr[data-tone="dark"]:not(.is-scrolled) .hdr-cta:hover { background:var(--azure-50); }
.hdr-burger { display:none; width:44px; height:44px; margin-right:-10px; border-radius:var(--rad-2); place-items:center; }
.hdr-burger span, .hdr-burger span::before, .hdr-burger span::after { display:block; width:20px; height:1.5px; background:currentColor; transition:transform .25s var(--ease),background .2s; }
.hdr-burger span { position:relative; }
.hdr-burger span::before, .hdr-burger span::after { content:""; position:absolute; left:0; }
.hdr-burger span::before { transform:translateY(-6px); } .hdr-burger span::after { transform:translateY(6px); }
.hdr-burger[aria-expanded="true"] span { background:transparent; }
.hdr-burger[aria-expanded="true"] span::before { transform:rotate(45deg); }
.hdr-burger[aria-expanded="true"] span::after { transform:rotate(-45deg); }
.mnav { position:fixed; left:0; right:0; top:calc(var(--utility) + var(--header)); bottom:0; z-index:var(--z-panel); overflow-y:auto; padding:8px var(--gutter) 32px; background:#fff; color:var(--ink); border-top:1px solid var(--rule); }
.mnav a { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--rule-soft); font:400 21px/1.2 var(--font-display); letter-spacing:-.01em; }
.mnav .mnav-sub { padding-left:16px; }
.mnav .mnav-sub a { font:500 16px/1.3 var(--font-text); color:var(--text); padding:13px 0; }
.mnav .mnav-group { padding:20px 0 6px; font:600 11px/1 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.mnav .btn { width:100%; margin-top:24px; }
body.mnav-open { overflow:hidden; }

/* 07 Buttons, links, heroes ---------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 20px; border:1px solid transparent; border-radius:var(--rad-btn); background:var(--action); color:#fff; font:600 15px/1 var(--font-text); letter-spacing:.003em; white-space:nowrap; transition:background .2s var(--ease),color .2s,border-color .2s,transform .12s; }
.btn:hover { background:var(--action-hover); }
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; flex:0 0 auto; transition:transform .2s var(--ease); }
.btn:hover svg { transform:translateX(3px); }
.btn--sm { height:40px; padding:0 16px; font-size:14px; }
.btn--light { background:#fff; color:var(--ink); }
.btn--light:hover { background:var(--azure-50); }
.btn--outline { background:transparent; color:var(--ink); border-color:var(--ebony-300); }
.btn--outline:hover { background:transparent; border-color:var(--ink); }
.btn--outline-dark { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--outline-dark:hover { background:rgba(255,255,255,.06); border-color:#fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.arrow-link { display:inline-flex; align-items:center; gap:8px; color:var(--action); font-weight:600; font-size:15.5px; }
.arrow-link svg { width:16px; height:16px; transition:transform .2s var(--ease); }
.arrow-link:hover svg { transform:translateX(3px); }
.arrow-link span { background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .25s var(--ease); padding-bottom:1px; }
.arrow-link:hover span { background-size:100% 1px; }
.on-dark .arrow-link { color:var(--azure-300); }

/* Home hero */
.hero { position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(52% 64% at 84% 46%,rgba(0,123,255,.2),transparent 64%),radial-gradient(46% 58% at 4% 104%,rgba(14,49,93,.75),transparent 72%),radial-gradient(36% 40% at 34% -6%,rgba(72,203,255,.07),transparent 70%),var(--night); color:var(--on-dark-text); padding:calc(var(--utility) + var(--header) + clamp(56px,7.5vw,112px)) 0 0; }
.hero-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; }
.hero-copy { grid-column:1 / span 7; position:relative; z-index:3; padding-bottom:clamp(48px,6vw,88px); }
.hero h1 { color:#fff; max-width:none; }
.hero h1 .ln { display:block; white-space:nowrap; }
.hero h1 .hl { background:linear-gradient(95deg,#EDFAFF 0%,#B5EAFF 38%,#48CBFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-value { margin-top:30px; max-width:30ch; font:400 clamp(22px,2.1vw,29px)/1.22 var(--font-display); letter-spacing:-.018em; color:var(--azure-200); }
.hero-how { margin-top:16px; max-width:52ch; font-size:clamp(16.5px,1.3vw,18.5px); line-height:1.6; color:var(--ebony-300); }
.hero .actions { margin-top:34px; }
.hero-pilot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:26px; font-size:14.5px; color:var(--ebony-300); }
.hero-pilot b { color:#fff; font-weight:600; }
.hero-pilot .sep { width:3px; height:3px; border-radius:50%; background:var(--ebony-500); }
.hero-pilot a { color:var(--azure-300); font-weight:600; display:inline-flex; gap:6px; align-items:center; }
.hero-pilot a svg { width:14px; height:14px; transition:transform .2s var(--ease); }
.hero-pilot a:hover svg { transform:translateX(3px); }
.hero-visual { grid-column:8 / span 5; position:relative; z-index:2; align-self:center; padding-bottom:clamp(48px,6vw,88px); }
.hero-lines { position:absolute; right:calc(100% - 18px); top:50%; width:min(1400px,120vw); height:760px; transform:translateY(-50%); pointer-events:none; z-index:-1; }
.hero-lines .lf { width:100%; height:100%; }
/* Lit around the point the strands arrive at, in pixels from it, so the field gathers in the
   open space before the record and stays off the headline at every width. */
.hero-lines { -webkit-mask-image:radial-gradient(ellipse 560px 150px at 100% 50%,#000 0%,rgba(0,0,0,.92) 28%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.12) 82%,transparent 100%); mask-image:radial-gradient(ellipse 560px 150px at 100% 50%,#000 0%,rgba(0,0,0,.92) 28%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.12) 82%,transparent 100%); }
.hero-foot { position:relative; z-index:3; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; padding:20px 0 22px; border-top:1px solid var(--rule-dark); font-size:13.5px; color:var(--ebony-400); }
.certs { display:flex; flex-wrap:wrap; gap:8px 22px; }
.certs li { display:inline-flex; align-items:center; gap:8px; }
.certs svg { width:15px; height:15px; color:var(--azure-300); }
.on-light .certs svg, .certs--light svg { color:var(--action); }

/* comet head where lines meet a surface */
.comet { position:absolute; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle,#fff 0 26%,#C8F1FF 40%,#48CBFF 62%,#068FFF 100%); box-shadow:0 0 0 4px rgba(72,203,255,.16),0 0 16px 3px rgba(30,173,255,.7),0 0 56px 16px rgba(0,123,255,.36); }
.comet::before, .comet::after { content:""; position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; border:1px solid rgba(131,223,255,.4); opacity:0; animation:ping 3.8s var(--ease-out) 2.8s infinite; }
.comet::after { animation-delay:4.7s; }
@keyframes ping { 0% { transform:scale(.2); opacity:.85; } 100% { transform:scale(1.45); opacity:0; } }

/* Inner page hero */
.page-hero { position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(48% 70% at 92% 62%,rgba(0,123,255,.16),transparent 66%),radial-gradient(44% 60% at 0% 110%,rgba(14,49,93,.7),transparent 72%),var(--night); color:var(--on-dark-text); padding:calc(var(--utility) + var(--header) + clamp(48px,6.5vw,96px)) 0 clamp(56px,6.5vw,96px); }
.page-hero .lf-bg { position:absolute; inset:0; z-index:-1; opacity:.7; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.35) 45%,#000 85%); mask-image:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.35) 45%,#000 85%); }
.page-hero .lf-bg img, .page-hero .lf-bg svg { width:100%; height:100%; object-fit:cover; object-position:right center; }
.page-hero .crumbs { margin-bottom:28px; }
.page-hero h1 { color:#fff; max-width:18ch; }
.page-hero .standfirst { margin-top:26px; max-width:46ch; font:400 var(--fs-lead)/1.42 var(--font-display); letter-spacing:-.012em; color:var(--ebony-200); }
.page-hero .actions { margin-top:34px; }
.page-hero-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:end; }
.page-hero-grid > .page-hero-copy { grid-column:1 / span 8; }
.page-hero-grid > .page-hero-aside { grid-column:9 / span 4; }
.crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ebony-400); }
.crumbs a:hover { color:#fff; }
.crumbs li + li::before { content:"/"; margin-right:8px; color:var(--ebony-600); }
.facts { display:grid; gap:0; border-top:1px solid var(--rule-dark-2); }
.facts div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule-dark); font-size:14px; }
.facts dt { flex:0 0 auto; color:var(--ebony-400); white-space:nowrap; }
.facts dd { color:#fff; text-align:right; }

/* 08 Statement, split rows, stage ------------------------------------------- */
.statement { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); padding-top:20px; border-top:1px solid var(--rule); }
.statement > .label { grid-column:1 / span 3; padding-top:12px; }
.statement-text { grid-column:4 / span 9; font:400 clamp(26px,2.8vw,42px)/1.18 var(--font-display); letter-spacing:-.022em; color:var(--ink); }
.statement-text .soft { color:var(--ebony-400); }
.on-dark .statement { border-top-color:var(--rule-dark-2); }
.on-dark .statement-text { color:#fff; } .on-dark .statement-text .soft { color:var(--ebony-400); }
.section--deep .statement-text .soft { color:rgba(131,223,255,.72); }

.gap { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); margin-top:clamp(56px,6.4vw,96px); padding-top:20px; border-top:1px solid var(--rule); }
.gap-side { grid-column:1 / span 3; padding-top:12px; }
.gap-note { margin-top:18px; max-width:24ch; font-size:15px; color:var(--muted); }
.gap-main { grid-column:4 / span 9; }
.gap-line { font:400 clamp(24px,2.5vw,38px)/1.2 var(--font-display); letter-spacing:-.02em; color:var(--ebony-400); max-width:30ch; }
.gap-line + .gap-line { margin-top:22px; }
.gap-line--turn { color:var(--ink); }
.gap-def { display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:baseline; margin-top:44px; padding:18px 20px; border-left:2px solid var(--signal); background:var(--paper-2); border-radius:0 var(--rad-2) var(--rad-2) 0; max-width:720px; }
.gap-def dt { font:600 var(--fs-label)/1.4 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--action); }
.gap-def dd { font-size:16px; color:var(--ink); }

.split { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; }
.split-copy { grid-column:1 / span 5; }
.split-media { grid-column:6 / span 7; }
.split--flip .split-copy { grid-column:8 / span 5; grid-row:1; }
.split--flip .split-media { grid-column:1 / span 7; grid-row:1; }
.split-media .stage > .ui { max-width:520px; margin-inline:auto; }
.split + .split { margin-top:clamp(64px,7vw,104px); }
.split-copy .label { margin-bottom:22px; }
.split-copy .h3, .split-copy .h2 { max-width:18ch; }
.split-copy p { margin-top:20px; max-width:46ch; }
.split-copy .note { display:flex; align-items:center; gap:10px; margin-top:24px; font-size:14px; font-weight:600; color:var(--ink); }
.split-copy .note::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--confirm); box-shadow:0 0 0 4px rgba(31,200,112,.16); }
.on-dark .split-copy .note { color:#fff; }
.split-copy .arrow-link { margin-top:26px; }

.stage { position:relative; border-radius:var(--rad-4); background:var(--paper-2); border:1px solid var(--rule-soft); padding:clamp(20px,2.6vw,36px); overflow:hidden; isolation:isolate; }
.stage::before { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(var(--ebony-200) 1px,transparent 1px); background-size:18px 18px; opacity:.55; mask-image:linear-gradient(135deg,#000 0%,transparent 75%); -webkit-mask-image:linear-gradient(135deg,#000 0%,transparent 75%); }
.stage--night { background:var(--night-2); border-color:rgba(255,255,255,.06); }
.stage--night::before { background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); opacity:.5; }
.stage-pair { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); align-items:start; }
.stage-pair > :first-child { grid-column:1 / span 6; grid-row:1; }
.stage-pair > :last-child { grid-column:6 / span 5; grid-row:1; margin-top:clamp(110px,11vw,160px); z-index:2; }
.stage-caption { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:var(--muted); }
.stage-caption span { display:inline-flex; align-items:center; gap:8px; }
.stage-caption span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--signal); }
.stage--night .stage-caption { color:var(--ebony-300); }

/* 09 Product UI: stylised recreations, never screenshots ------------------- */
.ui { position:relative; background:#fff; color:var(--ink); border:1px solid var(--rule); border-radius:var(--rad-3); box-shadow:var(--shadow-ui); font-size:14px; line-height:1.45; overflow:hidden; }
.ui--dark { background:var(--ebony-900); color:#fff; border-color:rgba(255,255,255,.1); box-shadow:var(--shadow-ui-dark); }
.ui-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--rule-soft); font-size:13px; }
.ui--dark .ui-bar { border-bottom-color:rgba(255,255,255,.08); }
.ui-bar b { font-weight:600; }
.ui-mark { width:20px; height:20px; flex:0 0 auto; background:url("tandm-icon.png") center/contain no-repeat; }
.ui-status { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:var(--rad-1); font-size:11.5px; font-weight:600; letter-spacing:.02em; background:var(--paper-2); color:var(--muted); }
.ui-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ui-status--live { background:var(--azure-50); color:var(--azure-800); }
.ui-status--live::before { animation:pulse 1.6s ease-in-out infinite; }
.ui-status--ok { background:var(--green-50); color:var(--green-700); }
.ui--dark .ui-status { background:rgba(255,255,255,.06); color:var(--ebony-300); }
.ui--dark .ui-status--live { background:rgba(0,123,255,.18); color:var(--azure-200); }
.ui--dark .ui-status--ok { background:rgba(31,200,112,.14); color:var(--green-300); }
.ui-body { padding:16px; display:grid; gap:10px; }
.ui-msg { max-width:88%; }
.ui-msg small { display:block; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ui-msg p { padding:10px 13px; border-radius:var(--rad-3); background:var(--paper-2); color:var(--ink); }
.ui-msg--worker { justify-self:end; text-align:left; }
.ui-msg--worker small { text-align:right; }
.ui-msg--worker p { background:var(--azure-800); color:#fff; border-bottom-right-radius:var(--rad-1); }
.ui-msg--tandm p { border-bottom-left-radius:var(--rad-1); }
.ui--dark .ui-msg p { background:rgba(255,255,255,.07); color:#fff; }
.ui--dark .ui-msg--worker p { background:var(--azure-800); }
.ui--dark .ui-msg small { color:var(--ebony-300); }
.ui-lang { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:var(--rad-1); background:rgba(255,255,255,.18); font-size:10.5px; letter-spacing:.06em; }
.ui-input { display:flex; align-items:center; gap:10px; margin:2px 16px 16px; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--rad-2); color:var(--muted); font-size:13px; }
.ui-input i { flex:0 0 auto; width:26px; height:26px; border-radius:var(--rad-2); background:var(--azure-800); margin-left:auto; position:relative; }
.ui-input i { background:var(--azure-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Crect x='7.5' y='3' width='5' height='9' rx='2.5' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M5 9.5a5 5 0 0 0 10 0M10 14.5V17' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.ui--dark .ui-input { border-color:rgba(255,255,255,.12); color:var(--ebony-300); }

.ui-record { padding:6px 16px 14px; }
.ui-record dl { display:grid; }
.ui-record dl > div { display:grid; grid-template-columns:40% 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--rule-soft); }
.ui-record dl > div:last-child { border-bottom:0; }
.ui-record dt { color:var(--muted); font-size:13px; }
.ui-record dd { color:var(--ink); font-weight:500; }
.ui-record dd.is-missing { color:var(--muted); font-weight:400; font-style:normal; }
.ui-record dd.is-missing::before { content:""; display:inline-block; width:48px; height:7px; margin-right:6px; border-radius:2px; background:repeating-linear-gradient(90deg,var(--ebony-200) 0 6px,transparent 6px 9px); vertical-align:middle; }
.ui--dark .ui-record dl > div { border-bottom-color:rgba(255,255,255,.08); }
.ui--dark .ui-record dt { color:var(--ebony-300); } .ui--dark .ui-record dd { color:#fff; } .ui--dark .ui-record dd.is-missing { color:var(--ebony-300); }
.ui-title { padding:14px 16px 4px; font:400 20px/1.2 var(--font-display); letter-spacing:-.012em; color:var(--ink); }
.ui--dark .ui-title { color:#fff; }
.ui-counter { display:flex; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--rule-soft); font-size:12.5px; color:var(--muted); }
.ui-counter .bar { flex:1; height:4px; border-radius:2px; background:var(--rule-soft); overflow:hidden; }
.ui-counter .bar span { display:block; height:100%; width:var(--fill,60%); background:var(--signal); border-radius:2px; transition:width .6s var(--ease); }
.ui-counter b { color:var(--ink); font-variant-numeric:tabular-nums; }
.ui-confirm { margin:4px 16px 16px; padding:12px 14px; display:flex; gap:12px; align-items:flex-start; border-radius:var(--rad-2); background:var(--green-50); border:1px solid var(--green-200); color:var(--green-800); font-size:13px; }
.ui-confirm svg { width:18px; height:18px; flex:0 0 auto; margin-top:1px; color:var(--green-700); }
.ui-confirm b { display:block; color:var(--green-800); font-weight:600; }
.ui-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 16px 16px; }
.ui-actions span { display:grid; place-items:center; height:38px; border-radius:var(--rad-2); font-size:13px; font-weight:600; border:1px solid var(--rule); color:var(--ink); }
.ui-actions .go { background:var(--green-500); border-color:var(--green-500); color:var(--ebony-950); }
.ui-readback { margin:6px 16px 12px; padding:14px; border-radius:var(--rad-2); background:var(--paper-2); font-size:13.5px; color:var(--ink); }
.ui-readback small { display:block; margin-bottom:6px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ui--dark .ui-readback small { color:var(--ebony-300); }
.ui-answer { padding:4px 16px 14px; }
.ui-answer ol { display:grid; gap:8px; margin-top:10px; counter-reset:s; }
.ui-answer li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; }
.ui-answer li::before { counter-increment:s; content:counter(s); flex:0 0 auto; width:20px; height:20px; border-radius:var(--rad-1); display:grid; place-items:center; background:var(--azure-50); color:var(--azure-800); font-size:11px; font-weight:700; }
.ui-source { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin:0 16px 16px; padding:10px 12px; border:1px dashed var(--ebony-300); border-radius:var(--rad-2); font-size:12px; color:var(--muted); }
.ui-source b { color:var(--ink); font-weight:600; }
.ui-source svg { width:16px; height:16px; flex:0 0 auto; color:var(--action); }
.ui-route { padding:6px 16px 16px; display:grid; gap:8px; }
.ui-route span { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--rad-2); font-size:13.5px; color:var(--muted); }
.ui-route span.is-on { border-color:var(--azure-700); background:var(--azure-50); color:var(--azure-900); font-weight:600; }
.ui-route span.is-on::after { content:"Selected"; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ui-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--rad-2); background:rgba(35,40,56,.86); color:#fff; font-size:13px; box-shadow:var(--shadow-ui-dark); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); }
.ui-chip small { color:var(--azure-300); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.ui-qr { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:16px; }
.ui-qr .code { width:96px; height:96px; border-radius:var(--rad-2); background:#fff; border:1px solid var(--rule); padding:8px; }
.ui-qr .code svg { width:100%; height:100%; }
.ui-qr p { font-size:13px; color:var(--muted); }
.ui-qr b { display:block; color:var(--ink); font:400 18px/1.25 var(--font-display); letter-spacing:-.01em; margin-bottom:6px; }

/* Hero record card */
.record-card { position:relative; margin-left:auto; max-width:440px; }
.record-card .ui { border-radius:var(--rad-3); }
.record-card .ui-title { padding-top:18px; }
.record-card .comet { left:-6px; top:50%; margin-top:-6px; z-index:5; }
.record-card > .ui { position:relative; z-index:2; }
.record-quote { position:absolute; left:-64px; top:-74px; z-index:4; max-width:300px; }
.record-card { margin-top:56px; }
.record-quote .ui-chip { display:block; padding:12px 14px; }
.record-quote .ui-chip small { display:block; margin-bottom:5px; }
.record-quote .ui-chip p { font-size:14px; line-height:1.4; }

.toc { display:grid; align-content:end; border-top:1px solid var(--rule-dark-2); }
.toc-title { padding:14px 0 10px; font:600 11.5px/1.2 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--ebony-400); }
.toc a { display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--rule-dark); font-size:15px; color:var(--ebony-200); transition:color .2s,padding .2s var(--ease); }
.toc a span { color:var(--ebony-400); font-variant-numeric:tabular-nums; font-size:13px; padding-top:2px; }
.toc a:hover { color:#fff; padding-left:4px; }
.ui-record .checklist dd { text-align:right; color:var(--green-700); font-weight:600; }
.ui-record .checklist dd.is-flag { color:var(--poppy-700); }
.ui-record .checklist dd.is-flag::before { content:"!"; display:inline-grid; place-items:center; width:16px; height:16px; margin-right:6px; border-radius:50%; background:var(--poppy-50); border:1px solid var(--poppy-200); font-size:11px; }
.lang-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap); }
.lang-strip .ui { box-shadow:var(--shadow-2); }

.person { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:start; }
.person-photo { grid-column:1 / span 3; aspect-ratio:4/5; display:grid; place-items:center; border-radius:var(--rad-3); background:var(--night); color:var(--ebony-400); font:400 44px/1 var(--font-display); letter-spacing:-.02em; }
.person-copy { grid-column:4 / span 7; }
.person-copy h3 { font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.016em; }
.person-role { margin-top:6px; font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--action); }
.person-copy p + p { margin-top:16px; }
.team { margin-top:48px; padding:22px; border:1px dashed var(--rule); border-radius:var(--rad-3); color:var(--muted); }

.specs.specs--compact > div { display:block; padding:16px 0; }
.specs.specs--compact dt { font-size:17px; }
.specs.specs--compact dd { margin-top:6px; font-size:15px; color:var(--muted); }
.numbered { display:grid; gap:14px; margin-top:24px; counter-reset:n; }
.numbered li { position:relative; padding-left:40px; max-width:46ch; }
.numbered li::before { counter-increment:n; content:counter(n,decimal-leading-zero); position:absolute; left:0; top:3px; font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--action); }
.on-dark .numbered li::before { color:var(--azure-300); }
.tiles--4 .tile { grid-column:span 3; }

.fourohfour-said { margin-top:20px; color:var(--ebony-300); }
.fourohfour-said code { padding:2px 6px; border-radius:var(--rad-1); background:rgba(255,255,255,.08); color:#fff; font-size:14px; }
a.tile { transition:border-color .2s,transform .2s var(--ease); }
a.tile:hover { border-color:var(--ebony-300); transform:translateY(-2px); }

/* Style guide only */
.sg-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--col-gap); }
.sg-swatches div { display:grid; gap:6px; }
.sg-swatches span { height:88px; border-radius:var(--rad-3); }
.sg-swatches b { margin-top:6px; color:var(--ink); }
.sg-swatches small { font-size:13px; color:var(--muted); line-height:1.5; }
.sg-type { display:grid; gap:28px; }
.sg-type .display, .sg-type .h1, .sg-type .h2, .sg-type .h3 { color:var(--ink); }
.sg-type small { display:block; margin-bottom:8px; font-size:12px; color:var(--muted); letter-spacing:.04em; }
.sg-dark { margin-top:24px; padding:28px; border-radius:var(--rad-3); background:var(--night); }
@media (max-width:860px) { .sg-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* 10 Ledger, spec lists, steps, questions ----------------------------------- */
.ledger { border-top:1px solid var(--rule); }
.ledger-row { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); padding:34px 0 36px; border-bottom:1px solid var(--rule); }
.ledger-row .n { grid-column:1 / span 1; font:400 15px/1.6 var(--font-text); color:var(--action); font-variant-numeric:tabular-nums; }
.ledger-row h3 { grid-column:2 / span 4; font-size:clamp(23px,2vw,29px); line-height:1.16; letter-spacing:-.016em; }
.ledger-row .ledger-body { grid-column:7 / span 6; }
.ledger-row .ledger-body p + p, .ledger-row .ledger-body .arrow-link { margin-top:14px; }
.on-dark .ledger, .on-dark .ledger-row { border-color:var(--rule-dark); }
.on-dark .ledger-row .n { color:var(--azure-300); }

.specs { border-top:1px solid var(--rule); }
.specs > div { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); padding:22px 0; border-bottom:1px solid var(--rule); }
.specs dt { grid-column:1 / span 4; font:400 19px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.specs dt small { display:block; margin-top:6px; font:500 13px/1.4 var(--font-text); letter-spacing:0; color:var(--muted); }
.specs dd { grid-column:5 / span 8; }
.specs dd p + p { margin-top:10px; }
.specs .unit { display:inline-block; margin-top:10px; padding:3px 8px; border-radius:var(--rad-1); background:var(--paper-2); font-size:12.5px; font-weight:600; color:var(--text); }
.on-dark .specs, .on-dark .specs > div { border-color:var(--rule-dark); }
.on-dark .specs dt { color:#fff; }

.steps { display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); column-gap:var(--col-gap); counter-reset:step; }
.steps li { position:relative; padding-top:28px; border-top:1px solid var(--rule); }
.steps li::before { counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; top:-1px; left:0; padding:8px 0 0; border-top:2px solid var(--signal); width:32px; font-size:12px; font-weight:600; color:var(--action); letter-spacing:.06em; }
.steps h3 { margin-top:16px; font-size:22px; line-height:1.2; letter-spacing:-.012em; }
.steps p { margin-top:12px; font-size:16px; }
.on-dark .steps li { border-top-color:var(--rule-dark-2); }
.on-dark .steps li::before { color:var(--azure-300); border-top-color:var(--azure-400); }

.qa { border-top:1px solid var(--rule); }
.qa-row { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); padding:28px 0 30px; border-bottom:1px solid var(--rule); }
.qa-row h3 { grid-column:1 / span 5; font-size:22px; line-height:1.25; letter-spacing:-.012em; }
.qa-row div { grid-column:7 / span 6; }
.qa-row div p + p { margin-top:10px; }

.tiles { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); }
.tile { grid-column:span 4; display:flex; flex-direction:column; padding:28px 28px 30px; border:1px solid var(--rule); border-radius:var(--rad-3); background:#fff; }
.tile--wide { grid-column:span 6; }
.tile .ico { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--rad-2); background:var(--azure-50); color:var(--azure-800); }
.tile .ico svg { width:20px; height:20px; }
.tile h3 { margin-top:22px; font-size:22px; line-height:1.2; letter-spacing:-.012em; }
.tile p { margin-top:10px; font-size:16px; }
.tile .tile-foot { margin-top:auto; padding-top:20px; font-size:13px; color:var(--muted); }
.on-dark .tile { background:rgba(255,255,255,.03); border-color:var(--rule-dark); }
.on-dark .tile .ico { background:rgba(0,123,255,.16); color:var(--azure-300); }

.table { width:100%; border-collapse:collapse; font-size:15.5px; }
.table th { text-align:left; font:600 12px/1.3 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 16px 12px 0; border-bottom:1px solid var(--ink); }
.table td { padding:16px 16px 16px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.table td:first-child { font:400 18px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--ink); width:32%; }

/* Pending content: visible in comps and on UAT, blocked by the deploy check */
[data-pending] { position:relative; outline:1.5px dashed var(--poppy-400); outline-offset:6px; border-radius:var(--rad-1); }
[data-pending]::after { content:"Pending: " attr(data-pending); position:absolute; right:0; top:-20px; padding:2px 8px; border-radius:var(--rad-1); background:var(--poppy-50); color:var(--poppy-700); font:600 11px/1.4 var(--font-text); letter-spacing:.02em; white-space:nowrap; z-index:5; }

/* 11 Calculator -------------------------------------------------------------- */
.calc { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); border:1px solid var(--rule); border-radius:var(--rad-4); overflow:hidden; background:#fff; box-shadow:var(--shadow-2); }
.calc-in { grid-column:1 / span 6; padding:clamp(24px,3vw,40px); display:grid; gap:26px; align-content:start; }
.calc-out { grid-column:7 / span 6; padding:clamp(24px,3vw,40px); background:var(--night); color:var(--on-dark-text); display:grid; gap:22px; align-content:start; position:relative; isolation:isolate; }
.calc-out::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 100% 0,rgba(0,123,255,.18),transparent 55%); }
.calc label, .calc .calc-q { display:block; font-weight:600; color:var(--ink); font-size:15px; }
.calc-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.calc-top output { font:400 28px/1 var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.calc input[type="number"], .calc select { width:100%; height:48px; margin-top:10px; padding:0 14px; border:1px solid var(--ebony-300); border-radius:var(--rad-2); background:#fff; font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
.calc input[type="number"]:focus, .calc select:focus { outline:none; border-color:var(--azure-700); box-shadow:0 0 0 3px rgba(0,123,255,.18); }
.calc input[type="range"] { width:100%; margin-top:14px; accent-color:var(--azure-700); }
.calc .limits { display:flex; justify-content:space-between; margin-top:4px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.calc .hint { margin-top:8px; font-size:13px; color:var(--muted); }
.calc-annual { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-top:20px; border-top:1px solid var(--rule-soft); }
.calc-annual span { display:block; font-size:13px; color:var(--muted); }
.calc-annual strong { font:400 26px/1.1 var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.calc-mini { height:34px; padding:0 12px; border:1px solid var(--rule); border-radius:var(--rad-2); font-size:13px; font-weight:600; color:var(--action); }
.calc-mini:hover { border-color:var(--action); }
.calc-out-head { display:flex; justify-content:space-between; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ebony-400); }
.calc-line .top { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--ebony-300); }
.calc-line strong { font:400 22px/1 var(--font-display); color:#fff; font-variant-numeric:tabular-nums; }
.calc-line strong small { font:500 13px/1 var(--font-text); color:var(--ebony-400); margin-left:4px; }
.calc-track { height:6px; margin-top:10px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.calc-track span { display:block; height:100%; border-radius:3px; background:var(--ebony-400); transition:width .5s var(--ease); }
.calc-track span.is-with { background:var(--azure-600); }
.calc-big { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid var(--rule-dark); }
.calc-big .v { font:400 clamp(44px,4.6vw,64px)/.95 var(--font-display); color:#fff; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.calc-big .v small { font:500 14px/1 var(--font-text); letter-spacing:0; color:var(--ebony-300); margin-left:8px; }
.calc-big .share { text-align:right; }
.calc-big .share b { display:block; font:400 24px/1 var(--font-display); color:var(--azure-300); font-variant-numeric:tabular-nums; }
.calc-big .share small, .calc-big > div > small { display:block; margin-top:6px; font-size:12px; color:var(--ebony-400); letter-spacing:.02em; }
.calc-out .btn { width:100%; }
.calc-out .fine { font-size:12.5px; color:var(--ebony-400); }
.calc-method { margin-top:24px; max-width:92ch; font-size:14px; line-height:1.6; color:var(--muted); }
.calc-method b { color:var(--ink); }
.calc-reconcile { margin-top:14px; max-width:92ch; padding:14px 16px; border-left:2px solid var(--signal); background:var(--azure-50); font-size:14px; line-height:1.55; color:var(--ink); border-radius:0 var(--rad-2) var(--rad-2) 0; }

/* 12 Forms and gated panels ------------------------------------------------- */
.form { display:grid; gap:18px; }
.form-grid, .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
.field { display:grid; gap:7px; min-width:0; }
.field.full, .field--full { grid-column:1 / -1; }
.field label, .field .q { font-size:13.5px; font-weight:600; color:var(--ink); }
.field input, .field select, .field textarea { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--ebony-300); border-radius:var(--rad-2); background:#fff; color:var(--ink); font-size:16px; transition:border-color .2s,box-shadow .2s; }
.field textarea { min-height:110px; padding:12px 14px; resize:vertical; }
.field select { appearance:none; -webkit-appearance:none; padding-right:40px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%233B4869' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/18px no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--azure-700); box-shadow:0 0 0 3px rgba(0,123,255,.18); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color:var(--razz-700); box-shadow:0 0 0 3px rgba(234,73,105,.14); }
.field-note { font-size:13px; color:var(--razz-700); }
.check-row, .check { display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:13.5px; line-height:1.5; color:var(--text); }
.check-row input, .check input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--azure-800); }
.check-row a, .check a { color:var(--action); text-decoration:underline; text-underline-offset:2px; }
.submit-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:6px; }
.submit-note { font-size:13px; color:var(--muted); }
.form-error { padding:12px 14px; border-radius:var(--rad-2); background:var(--razz-50); border:1px solid #F8C9D1; color:var(--razz-700); font-size:14px; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.gate-card { position:relative; padding:clamp(24px,3vw,36px); border-radius:var(--rad-4); background:#fff; color:var(--text); box-shadow:var(--shadow-ui-dark); overflow:hidden; }
.gate-card { color:var(--text); }
.gate-card h2, .gate-card h3 { color:var(--ink); }
.gate-card h2 { font-size:30px; line-height:1.1; letter-spacing:-.02em; }
.gate-card .gate-sub { margin:8px 0 22px; font-size:15px; color:var(--muted); }
.done { position:absolute; inset:0; z-index:3; padding:clamp(24px,3vw,36px); background:#fff; display:flex; flex-direction:column; transform:translateX(102%); transition:transform .45s var(--ease-out); }
.done.is-open { transform:none; }
.done-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--green-100); color:var(--green-700); }
.done-mark svg { width:24px; height:24px; }
.done h3 { margin-top:20px; font-size:28px; line-height:1.1; letter-spacing:-.02em; }
.done h3:focus { outline:none; }
.done .done-body { margin-top:10px; color:var(--text); }
.done .btn { margin-top:22px; align-self:flex-start; }
.done .fine { margin-top:10px; font-size:13px; color:var(--muted); }
.done-offer { margin-top:auto; padding-top:22px; border-top:1px solid var(--rule-soft); }
.done-offer p { font-size:14.5px; }
.done-offer .actions { margin-top:12px; gap:18px; }

/* 13 Bands, cards, diagram, misc -------------------------------------------- */
.band { position:relative; overflow:hidden; isolation:isolate; }
.band-lines { position:absolute; inset:0; z-index:-1; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.35) 40%,#000 75%); mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.35) 40%,#000 75%); }
.band-lines img { width:100%; height:100%; object-fit:cover; object-position:right center; }

.pilot { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:28px; align-items:end; padding:clamp(32px,4vw,56px); border-radius:var(--rad-4); background:var(--azure-50); border:1px solid var(--azure-100); }
.pilot-copy { grid-column:1 / span 7; }
.pilot-copy .label { margin-bottom:18px; }
.pilot-copy p { margin-top:16px; max-width:52ch; }
.pilot-points { grid-column:8 / span 5; display:grid; gap:0; border-top:1px solid rgba(8,94,197,.18); }
.pilot-points li { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(8,94,197,.18); font-size:15.5px; color:var(--ink); }
.pilot-points svg { width:18px; height:18px; color:var(--action); flex:0 0 auto; }
.pilot-foot { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; border-top:1px solid rgba(8,94,197,.18); }
.pilot-foot .fine { font-size:13.5px; color:var(--muted); }

.report-band { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; }
.report-band-copy { grid-column:1 / span 6; position:relative; z-index:2; }
.report-band-copy .h2 { margin-top:22px; color:#fff; max-width:14ch; }
.report-band-copy p { margin-top:20px; max-width:44ch; color:var(--azure-100); }
.report-band-copy .meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-size:13.5px; color:var(--azure-200); }
.report-band-copy .actions { margin-top:32px; }
.report-band-art { grid-column:8 / span 5; position:relative; height:clamp(320px,34vw,460px); }
.report-band-art img { position:absolute; border-radius:4px; box-shadow:var(--shadow-ui-dark); }
.report-band-art .cover { right:6%; top:0; height:100%; width:auto; transform:rotate(-2.5deg); z-index:2; }
.report-band-art .page { right:-6%; top:8%; height:88%; width:auto; transform:rotate(4deg); opacity:.96; }

.cta-band { text-align:left; }
.cta-band .h2 { max-width:20ch; color:#fff; }
.cta-band p { margin-top:22px; max-width:52ch; color:var(--ebony-300); }
.cta-band .actions { margin-top:34px; }
.cta-band .fine { margin-top:22px; font-size:13.5px; color:var(--ebony-400); }

.articles { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); }
.article-card { grid-column:span 3; display:flex; flex-direction:column; padding-top:20px; border-top:1px solid var(--ink); min-height:260px; }
.article-card:first-child { grid-column:span 6; padding-right:clamp(0px,3vw,48px); }
.article-card .meta { font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--muted); }
.article-card .meta b { color:var(--action); font-weight:600; }
.article-card h3 { margin-top:16px; font-size:clamp(21px,1.7vw,24px); line-height:1.22; letter-spacing:-.012em; }
.article-card:first-child h3 { font-size:clamp(26px,2.4vw,36px); line-height:1.12; letter-spacing:-.02em; }
.article-card p { margin-top:12px; font-size:15.5px; color:var(--muted); }
.article-card .arrow-link { margin-top:auto; padding-top:24px; font-size:14.5px; }
.article-card:hover h3 { color:var(--action); }

.industry-cards { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); }
.industry-card { grid-column:span 6; position:relative; display:flex; flex-direction:column; min-height:300px; padding:32px; border-radius:var(--rad-4); background:var(--night); color:var(--on-dark-text); overflow:hidden; isolation:isolate; transition:transform .3s var(--ease); }
.industry-card:hover { transform:translateY(-3px); }
.industry-card .lf-bg { position:absolute; inset:0; z-index:-1; opacity:.75; }
.industry-card .lf-bg img { width:100%; height:100%; object-fit:cover; object-position:right center; }
.industry-card .label { color:var(--azure-300); }
.industry-card h2, .industry-card h3 { margin-top:auto; padding-top:56px; color:#fff; font-size:clamp(26px,2.4vw,34px); line-height:1.1; letter-spacing:-.02em; max-width:16ch; }
.industry-card p { margin-top:12px; max-width:46ch; font-size:15.5px; }
.industry-card .arrow-link { margin-top:18px; color:var(--azure-300); }

/* How it fits diagram */
.fit { display:grid; grid-template-columns:1fr minmax(180px,.8fr) 1fr; align-items:center; gap:0; padding:clamp(24px,4vw,56px); border:1px solid var(--rule-dark); border-radius:var(--rad-4); background:rgba(255,255,255,.02); position:relative; }
.fit-col { display:grid; gap:12px; position:relative; z-index:2; }
.fit-col h3 { margin-bottom:6px; font:600 11.5px/1.2 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--ebony-400); }
.fit-node { padding:14px 16px; border:1px solid var(--rule-dark-2); border-radius:var(--rad-2); background:var(--night); }
.fit-node b { display:block; color:#fff; font-weight:600; font-size:15px; }
.fit-node span { display:block; margin-top:2px; font-size:13px; color:var(--ebony-400); }
.fit-hub { position:relative; z-index:2; justify-self:center; display:grid; place-items:center; text-align:center; width:min(200px,100%); aspect-ratio:1; border-radius:50%; border:1px solid rgba(131,223,255,.3); background:radial-gradient(circle,rgba(0,123,255,.22),rgba(14,49,93,.4) 60%,transparent 72%); }
.fit-hub img { width:44px; margin:0 auto 10px; }
.fit-hub b { display:block; color:#fff; font:400 18px/1.2 var(--font-display); }
.fit-hub span { display:block; margin-top:4px; font-size:12.5px; color:var(--ebony-300); }
.fit-wires { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.fit { grid-template-columns:1fr 280px 1fr; grid-template-areas:"hin . hout" "in hub out" "cap cap cap"; row-gap:14px; }
.fit-h { font:600 11.5px/1.2 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--ebony-400); }
.fit-h--in { grid-area:hin; } .fit-h--out { grid-area:hout; padding-left:40px; }
.fit-col--in { grid-area:in; } .fit-col--out { grid-area:out; } .fit-hub { grid-area:hub; } .fit-caption { grid-area:cap; }
.fit-col--in { padding-right:40px; }
.fit-col--out { padding-left:40px; }
.fit-col .fit-node { position:relative; }
.fit-col--in .fit-node::after, .fit-col--out .fit-node::before { content:""; position:absolute; top:50%; width:40px; height:1px; background:linear-gradient(90deg,rgba(131,223,255,.15),rgba(131,223,255,.5)); }
.fit-col--in .fit-node::after { left:100%; }
.fit-col--out .fit-node::before { right:100%; background:linear-gradient(90deg,rgba(131,223,255,.5),rgba(131,223,255,.15)); }
.fit-col--in::after, .fit-col--out::before { content:""; position:absolute; top:30px; bottom:30px; width:1px; background:rgba(131,223,255,.45); }
.fit-col--in::after { right:0; } .fit-col--out::before { left:0; }
.fit-hub::before, .fit-hub::after { content:""; position:absolute; top:50%; width:40px; height:1px; background:rgba(131,223,255,.55); }
.fit-hub::before { right:100%; } .fit-hub::after { left:100%; }
.fit-caption { grid-column:1 / -1; margin-top:clamp(24px,3vw,40px); padding-top:18px; border-top:1px solid var(--rule-dark); font-size:14px; color:var(--ebony-300); }

/* Trust quote */
.confirm-panel { padding:clamp(24px,3.4vw,44px); border-radius:var(--rad-4); background:var(--night); color:var(--on-dark-text); box-shadow:var(--shadow-ui-dark); }
.confirm-panel blockquote { font:400 clamp(28px,3vw,42px)/1.1 var(--font-display); letter-spacing:-.024em; color:#fff; }
.confirm-panel blockquote span { color:var(--azure-300); }
.confirm-panel .ui-readback { margin:26px 0 14px; background:rgba(255,255,255,.06); color:#fff; }
.confirm-panel .ui-readback small { color:var(--ebony-300); }
.confirm-panel .ui-actions { margin:0; }
.confirm-panel .ui-actions span { border-color:rgba(255,255,255,.18); color:#fff; }
.confirm-panel .ui-actions .go { color:var(--ebony-950); }
.confirm-panel .state { display:flex; gap:18px; margin-top:16px; font-size:12.5px; color:var(--ebony-400); }
.confirm-panel .state span { display:inline-flex; align-items:center; gap:7px; }
.confirm-panel .state span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green-500); }
.ticks { display:grid; gap:12px; margin-top:28px; }
.ticks li { display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; }
.ticks svg { width:18px; height:18px; margin-top:3px; color:var(--confirm-ink); }
.on-dark .ticks svg { color:var(--green-300); }

/* Architecture strip (security) */
.arch { display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr; align-items:stretch; gap:0; }
.arch-node { padding:22px; border:1px solid var(--rule); border-radius:var(--rad-3); background:#fff; }
.arch-node h3 { font-size:21px; line-height:1.2; letter-spacing:-.01em; }
.arch-node p { margin-top:10px; font-size:14.5px; color:var(--muted); }
.arch-node--core { background:var(--night); border-color:var(--night); color:var(--on-dark-text); }
.arch-node--core h3 { color:#fff; }
.arch-node--core p { color:var(--ebony-300); }
.arch-node ul { margin-top:14px; display:grid; gap:6px; font-size:14px; }
.arch-node li { display:flex; gap:8px; }
.arch-node li::before { content:""; flex:0 0 auto; width:5px; height:5px; margin-top:9px; border-radius:50%; background:var(--signal); }
.arch-node--core li::before { background:var(--azure-300); }
.arch-link { display:grid; place-items:center; width:clamp(36px,4vw,64px); position:relative; }
.arch-link::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ebony-300); }
.arch-link span { position:relative; z-index:1; padding:4px 0; background:var(--paper); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); }

.notice { display:grid; grid-template-columns:20px 1fr; gap:12px; padding:16px 18px; border-radius:var(--rad-2); background:var(--paper-2); border:1px solid var(--rule); font-size:14.5px; }
.notice svg { width:18px; height:18px; color:var(--action); margin-top:2px; }

.figure-stack { position:relative; }
.figure-stack img { border-radius:4px; box-shadow:var(--shadow-ui); }

/* 14 Footer, motion, print --------------------------------------------------- */
.ftr { position:relative; background:var(--night); color:var(--ebony-300); isolation:isolate; overflow:hidden; border-top:1px solid var(--rule-dark); }
.ftr::before { content:""; position:absolute; inset:0; z-index:-1; background-image:var(--grain); opacity:.05; mix-blend-mode:overlay; }
.ftr-top { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:48px; padding:clamp(64px,7vw,96px) 0 56px; }
.ftr-brand { grid-column:1 / span 4; }
.ftr-brand img { width:112px; }
.ftr-descriptor { margin-top:22px; max-width:34ch; font:400 18px/1.4 var(--font-display); letter-spacing:-.008em; color:#fff; }
.ftr-brand .certs { margin-top:26px; display:grid; gap:10px; font-size:13.5px; }
.ftr-cols { grid-column:6 / span 7; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; }
.ftr-col h2 { font:600 11.5px/1.2 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:var(--ebony-400); margin-bottom:16px; }
.ftr-col a { display:block; padding:5px 0; font-size:14.5px; color:var(--ebony-200); transition:color .2s; }
.ftr-col a:hover { color:#fff; }
.ftr-col + .ftr-col.ftr-col--stack { margin-top:0; }
.ftr-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding:22px 0 28px; border-top:1px solid var(--rule-dark); font-size:13px; color:var(--ebony-400); }
.ftr-bottom nav { display:flex; gap:20px; }
.ftr-bottom a:hover { color:#fff; }

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes glow-in { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }

.js .hero .lf :is(.lf-far,.lf-mid,.lf-near,.lf-glow) path { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.4s var(--ease-out) forwards; }
.js .hero .lf .lf-mid path { animation-delay:.15s; }
.js .hero .lf :is(.lf-near,.lf-glow) path { animation-delay:.4s; animation-duration:2.6s; }
.hero .lf .lf-pulse path { stroke-dasharray:.015 .985; stroke-dashoffset:.5; animation-name:travel; animation-timing-function:cubic-bezier(.4,0,.25,1); animation-iteration-count:infinite; animation-fill-mode:both; }
.hero .lf .lf-pulse path.h { stroke-opacity:.16; }
@keyframes travel { 0% { stroke-dashoffset:.5; opacity:0; } 14% { opacity:1; } 88% { opacity:1; } 100% { stroke-dashoffset:-.015; opacity:0; } }
.js .hero .comet { animation:glow-in .8s var(--ease-out) 1.9s both; }
.js .hero-copy > * { animation:rise .8s var(--ease-out) both; }
.js .hero-copy > :nth-child(2) { animation-delay:.08s; } .js .hero-copy > :nth-child(3) { animation-delay:.16s; }
.js .hero-copy > :nth-child(4) { animation-delay:.24s; } .js .hero-copy > :nth-child(5) { animation-delay:.32s; }
.js .record-card { animation:rise .9s var(--ease-out) .5s both; }
.reveals [data-reveal] { opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.reveals [data-reveal].is-in { opacity:1; transform:none; }
.reveals [data-reveal="2"] { transition-delay:.08s; } .reveals [data-reveal="3"] { transition-delay:.16s; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .js .hero .lf path { stroke-dashoffset:0; }
  .lf-pulse { display:none; }
  .reveals [data-reveal] { opacity:1; transform:none; }
}

/* 15 Polish --------------------------------------------------------------------
   A finishing pass over the components above (October 2026): depth and
   detail on the product UI, tactile buttons, hover states on what links,
   softer focus rings, balanced statement type. Overrides only, kept in one
   place so the pass can be read, tuned or taken out on its own. */

/* Type: balance the large lines, hang the opening quote, align figures */
.hero-value, .cta-band .h2, .report-band-copy .h2 { text-wrap:balance; }
/* Long display paragraphs: "pretty" keeps a lone word off the last line at any length */
.statement-text, .gap-line, .page-hero .standfirst, .lead, .split-copy p, .sec-head-main p { text-wrap:pretty; }
.nowrap { white-space:nowrap; }
.confirm-panel blockquote { text-indent:-.42em; text-wrap:balance; }
/* the second sentence on its own line, so a narrow panel never leaves "it." alone */
.confirm-panel blockquote span { display:block; text-indent:0; }
.ui-record dd, .ui-counter, .facts dd, .calc-line strong, .steps li::before, .ledger-row .n { font-variant-numeric:tabular-nums; }

/* Buttons: a little depth, a lift on hover, a press on click */
.btn { transition:background .2s var(--ease),color .2s,border-color .2s,box-shadow .25s var(--ease),transform .2s var(--ease); }
.btn:not(.btn--light):not(.btn--outline):not(.btn--outline-dark) {
  background-image:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(14,49,93,.22),0 10px 20px -12px rgba(8,94,197,.75); }
.btn:not(.btn--light):not(.btn--outline):not(.btn--outline-dark):hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(14,49,93,.22),0 16px 28px -14px rgba(8,94,197,.8); }
.btn--light { box-shadow:0 1px 2px rgba(9,12,20,.28),0 12px 26px -16px rgba(0,0,0,.7); }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.985); transition-duration:.08s; }
.btn--outline-dark { background-color:rgba(255,255,255,.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn--outline-dark:hover { background-color:rgba(255,255,255,.07); }

/* Header: a soft edge once the page moves under it */
.hdr.is-scrolled { box-shadow:0 1px 0 rgba(35,40,56,.04),0 14px 34px -26px rgba(14,49,93,.4); }
.hdr[data-tone="dark"]:not(.is-scrolled) .hdr-cta { background-image:none; box-shadow:0 1px 2px rgba(9,12,20,.28),0 12px 26px -16px rgba(0,0,0,.7); }
.hdr-menu-panel { box-shadow:0 1px 2px rgba(14,49,93,.06),0 24px 60px -24px rgba(14,49,93,.45); }
.hdr-menu-panel a { transition:background .18s var(--ease); }

/* Stages: the dot grid plus a quiet light, so the UI sits in a space */
.stage { border-color:rgba(35,40,56,.07); background:radial-gradient(70% 60% at 72% 24%,rgba(0,123,255,.07),transparent 70%),radial-gradient(60% 50% at 10% 100%,rgba(14,49,93,.05),transparent 70%),var(--paper-2); box-shadow:inset 0 1px 0 #fff; }
.stage--night { background:radial-gradient(70% 60% at 72% 20%,rgba(0,123,255,.16),transparent 70%),var(--night-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

/* Product UI: finer edges and real depth */
.ui { border-color:rgba(35,40,56,.1); box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,var(--shadow-ui); }
.ui--dark { border-color:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-ui-dark); }
.ui-bar { background:linear-gradient(180deg,#fff,#FAFBFD); }
.ui--dark .ui-bar { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)); }
.ui-msg p { border-radius:12px; padding:10px 14px; }
.ui-msg--tandm p { background:#F2F4F8; border:1px solid rgba(35,40,56,.05); border-bottom-left-radius:4px; }
.ui-msg--worker p { background:linear-gradient(180deg,#0A64D0,var(--azure-800)); border-bottom-right-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 1px rgba(14,49,93,.14),0 8px 16px -10px rgba(8,94,197,.6); }
.ui--dark .ui-msg--tandm p { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.05); }
.ui-input { border-color:rgba(35,40,56,.12); background:#fff; box-shadow:0 1px 2px rgba(14,49,93,.04); }
.ui--dark .ui-input { background:rgba(255,255,255,.03); }
.ui-input i { box-shadow:0 4px 10px -4px rgba(8,94,197,.7); }
.ui-status--live::before { box-shadow:0 0 0 3px rgba(0,123,255,.16); }
.ui-counter .bar span { background:linear-gradient(90deg,var(--azure-600),var(--azure-700)); box-shadow:0 0 10px rgba(0,123,255,.35); }
.ui-confirm { background:linear-gradient(180deg,#F5FEF9,var(--green-50)); }
.ui-source { border-style:solid; border-color:var(--rule); background:var(--paper-2); }
.ui--dark .ui-source { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.ui-route span { transition:border-color .2s,background .2s; }
.ui-route span.is-on { box-shadow:0 0 0 3px rgba(0,123,255,.1); }
.ui-actions .go { box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -10px rgba(31,200,112,.8); }
.ui-chip { box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow-ui-dark); }
.lang-strip .ui { box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 1px 2px rgba(35,40,56,.05),0 20px 40px -26px rgba(14,49,93,.35); }

/* Overlapping UI pairs: the front card covers a column of the one behind,
   so the back card's messages stop short of it instead of being cut off. */
@media (min-width:861px) {
  .stage-pair > :first-child .ui-body { padding-right:calc(16px + 15%); }
  .stage-pair > :first-child .ui-input { margin-right:calc(16px + 15%); }
}

/* The homepage record: a glow where the lines arrive */
.record-card::before { content:""; position:absolute; inset:-16% -12% -10% -18%; z-index:0; pointer-events:none; background:radial-gradient(closest-side,rgba(0,123,255,.26),rgba(0,123,255,.06) 60%,transparent); filter:blur(8px); }
.record-card .ui { box-shadow:0 0 0 1px rgba(255,255,255,.14),0 2px 6px rgba(9,12,20,.3),0 40px 80px -36px rgba(0,30,80,.9); }
.confirm-panel { box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-ui-dark); }

/* Cards that link: a lift, a lit edge, the arrow moving with the card */
a.tile { transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease); }
a.tile:hover { border-color:var(--azure-200); box-shadow:0 18px 40px -26px rgba(14,49,93,.4); }
.tile .ico { box-shadow:inset 0 0 0 1px rgba(0,123,255,.08); }
.article-card h3 { transition:color .2s var(--ease); }
.article-card:hover .arrow-link svg { transform:translateX(3px); }
.article-card:hover .arrow-link span { background-size:100% 1px; }
.industry-card { transition:transform .35s var(--ease),box-shadow .35s var(--ease); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.industry-card:hover { box-shadow:inset 0 0 0 1px rgba(131,223,255,.22),0 30px 60px -34px rgba(9,12,20,.8); }
.industry-card .lf-bg { transition:opacity .35s var(--ease); }
.industry-card:hover .lf-bg { opacity:1; }
.industry-card:hover .arrow-link svg { transform:translateX(3px); }

/* Forms: a hover edge and a softer focus ring */
.field input:hover, .field select:hover, .field textarea:hover, .calc input[type="number"]:hover, .calc select:hover { border-color:var(--ebony-400); }
.field input:focus, .field select:focus, .field textarea:focus, .calc input[type="number"]:focus, .calc select:focus { border-color:var(--azure-700); box-shadow:0 0 0 4px rgba(0,123,255,.14); }
.calc { box-shadow:0 1px 2px rgba(35,40,56,.05),0 30px 60px -36px rgba(14,49,93,.4); }
.gate-card { box-shadow:0 0 0 1px rgba(255,255,255,.06),var(--shadow-ui-dark); }
.done-mark { box-shadow:0 0 0 6px rgba(31,200,112,.1); }

/* Pilot block and the architecture strip: the same quiet light */
.pilot { background:radial-gradient(80% 120% at 100% 0,rgba(0,123,255,.08),transparent 60%),var(--azure-50); }
.arch-node { box-shadow:0 1px 2px rgba(35,40,56,.04); }
.arch-node--core { box-shadow:0 24px 48px -28px rgba(9,12,20,.7); }

/* Report, Ask, Route on the homepage: each mode is a lit card with the product
   floating in it. On a tall enough screen the cards stack as they scroll, each
   one settling just below the last; shorter screens get the cards without the
   stacking, so no card is ever held with its foot cut off. */
@media (min-width:1061px) {
  #platform .split { padding:clamp(32px,3.6vw,52px); border-radius:24px; border:1px solid rgba(35,40,56,.07);
    background:radial-gradient(80% 110% at 100% 0,rgba(0,123,255,.07),transparent 62%),linear-gradient(180deg,#fff,#F6F9FE);
    box-shadow:0 1px 2px rgba(14,49,93,.04),0 30px 64px -44px rgba(14,49,93,.34); }
  #platform .split + .split { margin-top:28px; }
  #platform .split .stage { background:transparent; border:0; box-shadow:none; padding:0; overflow:visible; }
  #platform .split .stage::before { display:none; }
}
@media (min-width:1061px) and (min-height:860px) {
  #platform .split { position:sticky; top:calc(var(--utility) + var(--header) + 24px); }
  #platform .split + .split { box-shadow:0 1px 2px rgba(14,49,93,.04),0 -18px 40px -28px rgba(14,49,93,.28),0 30px 64px -44px rgba(14,49,93,.34); }
  #platform #mode-ask { top:calc(var(--utility) + var(--header) + 40px); }
  #platform #mode-route { top:calc(var(--utility) + var(--header) + 56px); }
}

/* Labels without a step number carry a small signal dot */
.label:not(:has(.n))::before { content:""; align-self:flex-start; margin-top:.4em; flex:0 0 auto; width:6px; height:6px; margin-right:-3px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent); }

/* Hero asides (facts, contents) sit on dark glass, so the line field can pass
   behind them without crossing the text */
.page-hero .facts, .page-hero .toc { position:relative; padding:4px 22px; border:1px solid rgba(255,255,255,.09); border-radius:var(--rad-3);
  background:linear-gradient(180deg,rgba(47,55,75,.72),rgba(35,40,56,.66)); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -30px rgba(9,12,20,.8); }
.page-hero .facts div:last-child, .page-hero .toc a:last-child { border-bottom:0; }
.page-hero .toc .toc-title { padding-top:16px; }

/* Page titles a step smaller on small phones, so pairs held together still fit */
@media (max-width:430px) { .h1 { font-size:clamp(32px,9vw,40px); } }
@media (max-width:340px) { .nowrap { white-space:normal; } }

/* Line fields on phones. A narrow, tall hero or band scales the drawing up
   until the bundle at its point runs through the copy. Heroes with a panel
   show the sweep of the field behind the panel's glass instead of the point;
   a hero without one, and the bands, keep only their lighting. The industry
   cards draw the whole field small, along the bottom edge under the copy. */
@media (max-width:767px) {
  .page-hero .lf-bg { top:auto; height:62%; opacity:.85; -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%); mask-image:linear-gradient(180deg,transparent,#000 45%); }
  .page-hero .lf-bg img { object-position:62% 50%; }
  .band-lines { display:none; }
  .industry-card .lf-bg { top:auto; height:150px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%); mask-image:linear-gradient(180deg,transparent,#000 60%); }
}
@media (max-width:767px) {
  .page-hero:not(:has(.facts,.toc)) .lf-bg { display:none; }
}

/* Touch: comfortable targets on phones without changing how anything looks */
@media (max-width:767px) {
  .utility-close { width:40px; height:40px; margin-top:-20px; right:6px; }
  .arrow-link { padding-block:9px; margin-block:-9px; }
  .calc-mini { height:40px; }
  .calc input[type="range"] { height:28px; }
}

/* Responsive ------------------------------------------------------------------ */
@media (max-width:1180px) {
  .hdr-nav { gap:18px; font-size:14px; }
  .ftr-brand { grid-column:1 / -1; }
  .ftr-cols { grid-column:1 / -1; grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:1060px) {
  .tiles--4 .tile { grid-column:span 6; }
  .grid > .prose, .grid > .specs--compact { grid-column:1 / -1 !important; }
  .grid > .specs--compact { margin-top:32px; }
  .hdr-nav, .hdr-cta { display:none; }
  .hdr-burger { display:grid; margin-left:auto; }
  .hero-copy { grid-column:1 / -1; padding-bottom:40px; }
  .hero-visual { grid-column:1 / -1; padding-bottom:56px; }
  .record-card { margin:0 auto 0 0; max-width:520px; }
  .hero-lines { right:auto; left:-60vw; width:140vw; top:46%; }
  .record-quote { left:auto; right:-8px; top:-34px; }
  .split-copy, .split--flip .split-copy { grid-column:1 / -1; grid-row:auto; }
  .split-media, .split--flip .split-media { grid-column:1 / -1; grid-row:auto; margin-top:40px; }
  .report-band-copy { grid-column:1 / -1; }
  .report-band-art { grid-column:1 / -1; margin-top:48px; height:360px; }
  .report-band-art .cover { right:auto; left:8%; }
  .report-band-art .page { right:auto; left:36%; }
  .pilot-copy, .pilot-points { grid-column:1 / -1; }
  .calc-in, .calc-out { grid-column:1 / -1; }
  .page-hero-grid > .page-hero-copy, .page-hero-grid > .page-hero-aside { grid-column:1 / -1; }
  .page-hero-grid > .page-hero-aside { margin-top:40px; }
  .arch { grid-template-columns:1fr; }
  .arch-link { width:auto; height:44px; }
  .arch-link::before { left:50%; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .arch-link span { writing-mode:horizontal-tb; transform:none; padding:0 8px; }
}
@media (max-width:860px) {
  .gap-side, .gap-main { grid-column:1 / -1; }
  .gap-main { margin-top:22px; }
  .gap-def { grid-template-columns:1fr; }
  .fit { grid-template-columns:1fr; }
  .fit-col--in, .fit-col--out { padding:0; }
  .fit-col--in::after, .fit-col--out::before, .fit-col .fit-node::after, .fit-col .fit-node::before, .fit-hub::before, .fit-hub::after { display:none; }
  .fit { grid-template-areas:"hin" "in" "hub" "hout" "out" "cap"; }
  .fit-h--out { padding-left:0; }
  :root { --fs-body:16.5px; }
  .sec-head > .label, .statement > .label { grid-column:1 / -1; padding-top:0; }
  .sec-head-main, .statement-text { grid-column:1 / -1; }
  .statement-text { margin-top:18px; }
  .ledger-row .n { grid-column:1 / -1; }
  .ledger-row h3 { grid-column:1 / -1; margin-top:10px; }
  .ledger-row .ledger-body { grid-column:1 / -1; margin-top:14px; }
  .specs dt, .specs dd, .qa-row h3, .qa-row div { grid-column:1 / -1; }
  .specs dd, .qa-row div { margin-top:10px; }
  .steps { grid-template-columns:1fr; row-gap:36px; }
  .tile, .tile--wide, .tiles--4 .tile { grid-column:1 / -1; }
  .lang-strip { grid-template-columns:1fr; }
  .person-photo { grid-column:1 / span 5; }
  .person-copy { grid-column:1 / -1; margin-top:24px; }
  .article-card, .article-card:first-child { grid-column:1 / -1; min-height:0; padding-right:0; }
  .industry-card { grid-column:1 / -1; }
  .fit { grid-template-columns:1fr; gap:28px; }
  .fit-hub { width:170px; }
  .fit-wires { display:none; }
  .stage-pair { grid-template-columns:1fr; gap:16px; }
  .stage-pair > :first-child, .stage-pair > :last-child { grid-column:1 / -1; grid-row:auto; margin-top:0; }
  .ftr-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .table td:first-child { width:auto; }
}
@media (max-width:620px) {
  .utility .u-long { display:none; } .utility .u-short { display:inline; }
  .utility-inner { justify-content:flex-start; padding-inline:16px 48px; }
  .utility-tag { display:none; }
  .form-grid, .field-grid { grid-template-columns:1fr; }
  .record-quote { position:relative; left:auto; right:auto; top:auto; margin:0 0 12px; max-width:92%; }
  .record-card { margin-top:8px; }
  .hero-foot { flex-direction:column; }
  .report-band-art { height:300px; }
  .report-band-art .cover { left:2%; } .report-band-art .page { left:40%; }
  .btn { height:50px; }
  .actions .btn { flex:1 1 auto; }
}
@media print {
  .hdr, .utility, .mnav, .ftr, .hero-lines { display:none !important; }
  body { color:#000; }
}