/* ============================================================
BevGenie — design system
Brand Kit V5.1 palette: navy-900 base, teal-500 accent,
amber-400 for actions and title highlights, slate-600 body,
surface-mint cards
============================================================ */
/* ---------- 0. FONTS ----------
Carlito, the metric-compatible web substitute for Calibri, self-hosted
(SIL OFL, see assets/fonts/OFL.txt). It used to come from Google Fonts,
which put two extra origins (fonts.googleapis.com for the CSS, then
fonts.gstatic.com for the files) in front of every page's text. Calibri is
still tried first in --sans, so a machine that has it (any Windows PC)
downloads no font at all. Not preloaded on purpose; see build-chrome.py. */
@font-face{font-family:"Carlito";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/carlito-400.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/carlito-700.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/carlito-400-italic.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/carlito-700-italic.woff2") format("woff2")}
/* Size-matched fallbacks, so the swap to Carlito does not move text. A phone
has no Calibri and paints in its system font until Carlito arrives; with
unadjusted Roboto or Arial that swap shifted /team by CLS 0.19. size-adjust
is Carlito's advance width over the fallback's on a sample paragraph, and the
overrides are Carlito's ascent/descent/line gap (1536/512/452 of 2048)
divided by it. Arial covers iOS and macOS; Android has no Arial and falls
through to the Roboto pair. Measured with Pillow against Calibri, which
Carlito is metric-compatible with. */
@font-face{font-family:"Carlito Fallback";font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:89.35%;ascent-override:83.94%;descent-override:27.98%;line-gap-override:24.7%}
@font-face{font-family:"Carlito Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:85.68%;ascent-override:87.54%;descent-override:29.18%;line-gap-override:25.76%}
@font-face{font-family:"Carlito Fallback Android";font-weight:400;src:local("Roboto"),local("Roboto-Regular");size-adjust:90.97%;ascent-override:82.45%;descent-override:27.48%;line-gap-override:24.26%}
@font-face{font-family:"Carlito Fallback Android";font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:91.29%;ascent-override:82.16%;descent-override:27.39%;line-gap-override:24.18%}
/* ---------- 1. TOKENS ---------- */
:root{
/* Brand Kit V5.1, confirmed palette (sampled from the Intro deck).
Roles, per the kit:
navy-900 primary: dark panels, header/footer, primary buttons
teal-500 accent: headlines, the mark, icons, links. Not a base fill.
amber-400 accent, sparingly. Never a base colour.
slate-600 body text on light backgrounds
surface-mint feature / comparison card background
Colour roles. The kit's 60-30-10 split was retired on 2026-09-30 in
favour of more amber:
light surfaces: paper, white cards, surface-mint bands. Light bands
alternate paper / mint and never sit two of a kind in a row.
navy-900: the header, the page hero, ONE dark band mid-page at most,
the footer, headings on light surfaces.
amber-400: every primary button (navy text, 6.2:1); the one title
highlight per page, which lives in the page H1 only (.grad-text,
always on a navy hero; no other heading carries a highlight and no
title uses a teal gradient); the underline on .link-arrow; the
current-page rule in the header;
live/status signals, and the ConsumerIQ core in the platform
diagrams (tools/build-images.py).
teal-500: eyebrows, links, icons, rules, glows, tags. */
--navy-900:#12384A;
--teal-500:#0E8C87;
--amber-400:#F4A928;
--slate-600:#44546A;
--surface-mint:#ECF7F6;
/* core */
--ink:#12384A;
--ink-soft:#44546A;
/* navy surfaces: base, deeper (footer, closing bands), lifted */
--bottle:#12384A;
--bottle-2:#0C2A38;
--bottle-3:#184A5E;
--paper:#F8FBFB;
--paper-2:#ECF7F6;
--paper-3:#DCEFED;
--amber:#F4A928;
--amber-lt:#F8C366;
--amber-deep:#C98410;
--teal:#0E8C87;
/* teal-500 is 3.0:1 on navy; this tint is the accent on dark surfaces (6.1:1) */
--teal-lt:#5FC6BF;
--teal-dp:#0A5F5C;
/* body / secondary text: slate-600 and a lighter step, AA on paper and mint */
--mist:#5D6C7F;
--mist-2:#44546A;
/* accent text variants for small type on light surfaces. teal-500 itself is
4.1:1 on white, fine for icons and large headings but not for 11px labels. */
--amber-text:#8A5A06;
--teal-text:#0A7470;
--on-dark:#EAF2F4;
--on-dark-dim:#A9BCC6;
--line:rgba(18,56,74,.14);
--line-2:rgba(18,56,74,.075);
--line-dark:rgba(234,242,244,.16);
--line-dark-2:rgba(234,242,244,.085);
/* gradients */
--g-warm:linear-gradient(118deg,#F8C366 0%,#F4A928 46%,#D98E12 100%);
/* amber pill on navy: a flatter ramp, so the rounded cap stays solid. See .btn-primary. */
--g-warm-btn:linear-gradient(118deg,#F6B444 0%,#F4A928 52%,#E89C1A 100%);
--g-teal:linear-gradient(140deg,#3FB8B1 0%,#0E8C87 55%,#0A6A66 100%);
--g-navy:linear-gradient(140deg,#1C4E63 0%,#12384A 60%,#0C2A38 100%);
--g-spirit:linear-gradient(145deg,#0E8C87 0%,#16475C 52%,#0A2431 100%);
--g-dusk:linear-gradient(135deg,#0A2431 0%,#12384A 46%,#0E8C87 130%);
/* teal only: a teal-to-amber ramp muddies to olive at the midpoint */
--g-text-dark:linear-gradient(100deg,#B5EDE8 0%,#7FD6CF 45%,#4FB8B1 100%);
/* title highlight on navy: amber only, for the same reason */
--g-text-amber:linear-gradient(100deg,#FFD88A 0%,#F8C366 42%,#F4A928 100%);
--g-text-light:linear-gradient(100deg,#0E8C87 0%,#12384A 62%);
--g-line:linear-gradient(90deg,rgba(95,198,191,0),rgba(95,198,191,.6) 30%,rgba(95,198,191,.6) 70%,rgba(95,198,191,0));
--g-hairline:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
--g-glass:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 42%,rgba(255,255,255,0));
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
/* shape + shadow */
--r-xs:4px; --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
--sh-sm:0 1px 2px rgba(18,56,74,.05),0 4px 14px -8px rgba(18,56,74,.16);
--sh:0 2px 4px rgba(18,56,74,.04),0 18px 40px -24px rgba(18,56,74,.3);
--sh-lg:0 30px 70px -34px rgba(8,30,40,.5);
--sh-dark:0 30px 80px -40px rgba(0,0,0,.85);
/* metrics */
--maxw:1180px;
--maxw-wide:1340px;
--maxw-read:720px;
--pad:clamp(20px,5vw,64px);
--nav-h:74px;
/* type. Brand Kit V5.1: Calibri for headlines and body. Calibri cannot be
web-embedded, so Carlito (metric-compatible, loaded from Google Fonts) is
the substitute; a visitor who has Calibri installed gets Calibri itself.
One family, two weights (400, 700). --serif is kept as the heading alias
and --label is the tracked uppercase tier (eyebrows, meta, tags); both are
the same face. Only real code keeps a monospace. */
--sans:Calibri,"Carlito","Carlito Fallback","Carlito Fallback Android","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
--serif:var(--sans);
--label:var(--sans);
--code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
font-family:var(--sans);
background:var(--paper);
color:var(--ink);
font-size:17px;
line-height:1.58;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* Long unbreakable tokens — email addresses, URLs, trademarks — must wrap
rather than get clipped out of their card at narrow widths. break-word only
kicks in when the word genuinely cannot fit, so normal copy is untouched. */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,td,th,label,summary,blockquote,figcaption,cite,address{overflow-wrap:break-word}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{max-width:100%;display:block}
/* A class-level `display` (.callout{display:flex}) outranks the UA [hidden]
rule, which was leaving the "form not connected" notes on screen from load. */
[hidden]{display:none!important}
ul,ol{list-style:none}
::selection{background:rgba(14,140,135,.22);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
/* teal-500 is too dark to read as a ring on navy; use the light tint there */
.hero :focus-visible,.page-hero :focus-visible,.on-dark :focus-visible,.on-dark-2 :focus-visible,
.cta-dark :focus-visible,.panel-dark :focus-visible,.cta-banner :focus-visible,.auth-brand :focus-visible,
footer.site :focus-visible,.foot-slim :focus-visible{outline-color:var(--teal-lt)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--pad)}
.wrap-read{max-width:var(--maxw-read);margin-inline:auto;padding-inline:var(--pad)}
/* overflow-x:clip (not hidden) contains the ambient glows without creating a
scroll container — position:sticky inside these sections keeps working. */
section{padding-block:clamp(72px,9.5vw,130px);position:relative;overflow-x:clip}
section.tight{padding-block:clamp(52px,6.5vw,84px)}
.on-dark{background:var(--bottle);color:var(--on-dark)}
.on-dark-2{background:var(--bottle-2);color:var(--on-dark)}
.on-paper-2{background:var(--paper-2)}
.rel{position:relative;z-index:1}
.hr{height:1px;background:var(--g-hairline);border:0}
.on-dark .hr{background:linear-gradient(90deg,transparent,var(--line-dark) 12%,var(--line-dark) 88%,transparent)}
.hr-glow{height:1px;border:0;background:var(--g-line)}
/* ambient glows: teal only. Amber is kept for the primary action on navy and
for live/status signals, so it never appears as decoration. */
.glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(0px);z-index:0}
.glow-teal{background:radial-gradient(closest-side,rgba(14,140,135,.2),transparent 72%)}
.grain::after{
content:"";position:absolute;inset:0;background-image:var(--noise);
opacity:.28;mix-blend-mode:overlay;pointer-events:none;z-index:0;
}
/* ---------- 4. TYPE ---------- */
.eyebrow{
font-family:var(--label);font-size:13px;letter-spacing:.17em;text-transform:uppercase;
color:var(--teal-text);display:inline-flex;align-items:center;gap:.7em;font-weight:700;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;display:inline-block;opacity:.7}
.eyebrow.no-rule::before{display:none}
.on-dark .eyebrow,.on-dark-2 .eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--teal-lt)}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;line-height:1.1}
/* Balance heading lines so a title never strands one short word on a line of
its own. Browsers without support fall back to normal wrapping. */
h1,h2,h3{text-wrap:balance}
/* Chrome does not balance the lines after a forced
, so on a phone a
designed two-line title ("Decision intelligence
for ...") left one word
hanging. Below 640px drop the break and let balance set the whole title. */
@media(max-width:640px){:is(h1,h2) br{display:none}}
.display{font-weight:700;font-size:clamp(44px,8.4vw,104px);line-height:1;letter-spacing:-.02em}
.h1{font-weight:700;font-size:clamp(38px,6.2vw,74px);line-height:1.02;letter-spacing:-.018em}
.h2{font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-.012em}
.h3{font-size:clamp(23px,2.6vw,32px);line-height:1.1}
.h4{font-size:clamp(19px,1.9vw,22px);line-height:1.18}
.h5{font-size:17px;line-height:1.25}
.italic-accent{font-style:italic;font-weight:600;color:var(--teal)}
.hero .italic-accent,.page-hero .italic-accent,.on-dark .italic-accent,.pullquote .italic-accent,.panel-dark .italic-accent{color:var(--teal-lt)}
/* The single title highlight: yellow, in the page H1 only (see the colour
roles at the top). There is deliberately no light-surface variant. */
.grad-text{background:var(--g-text-amber);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.55vw,20px);color:var(--mist-2);line-height:1.55;max-width:58ch}
.on-dark .lead,.on-dark-2 .lead,.hero .lead,.page-hero .lead{color:var(--on-dark-dim)}
.small{font-size:14.5px;color:var(--mist)}
.on-dark .small,.page-hero .small{color:var(--on-dark-dim)}
.mono{font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.kicker{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text)}
.on-dark .kicker,.page-hero .kicker{color:var(--teal-lt)}
/* Section headers. The reset at the top of this file zeroes every margin, so a
block of eyebrow + heading + paragraph has NO vertical rhythm of its own --
it renders flush unless a rule here gives it one. .split-head is the same
construct as .sec-head inside a two-column .split, so it takes the same
rhythm; when it did not, its and its .lead sat at a 0px gap on eleven
pages. Any new heading-block class belongs in these two selector lists. */
/* A section head spans three quarters of the row. At 66ch it was about half,
which left an empty right half above full-width cards. The lead inside it
drops its own 58ch cap so the paragraph fills the head rather than a
narrower column within it. Full width once the layout stacks. */
.sec-head{max-width:75%}
.sec-head .lead{max-width:none}
@media(max-width:980px){.sec-head{max-width:none}}
.sec-head .h2,.sec-head h2,.split-head .h2,.split-head h2{margin-top:20px}
.sec-head p,.split-head p{margin-top:20px}
/* Backstop for a heading block that carries no wrapper class at all (a bare
.reveal div, for instance). Zero-specificity :where() on the heading keeps
this below .hero .lead and .page-hero .lead, which set their own values. */
:where(h1,h2,h3,h4) + .lead{margin-top:20px}
.on-dark .sec-head p,.on-dark-2 .sec-head p,.page-hero .sec-head p,.cta-dark .sec-head p{color:var(--on-dark-dim)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lead{margin-inline:auto}
.sec-head.center .eyebrow::before{display:none}
/* ---------- 5. ICONS ---------- */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-12{width:12px;height:12px;stroke-width:2}
.ic-14{width:14px;height:14px;stroke-width:1.9}
.ic-16{width:16px;height:16px;stroke-width:1.8}
.ic-18{width:18px;height:18px;stroke-width:1.7}
.ic-24{width:24px;height:24px;stroke-width:1.5}
.ic-28{width:28px;height:28px;stroke-width:1.4}
.ic-32{width:32px;height:32px;stroke-width:1.25}
.ibox{
width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;
background:var(--surface-mint);
color:var(--teal-text);border:1px solid rgba(14,140,135,.2);
}
.on-dark .ibox,.on-dark-2 .ibox{
background:rgba(95,198,191,.1);
border-color:rgba(95,198,191,.24);color:var(--teal-lt);
}
.ibox-sm{width:38px;height:38px;border-radius:10px}
.ibox-solid{background:var(--g-teal);border-color:transparent;color:#fff}
/* ---------- 6. BUTTONS ---------- */
.btn{
font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.005em;
display:inline-flex;align-items:center;justify-content:center;gap:.55em;
padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
line-height:1;cursor:pointer;white-space:nowrap;
transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s,color .2s,border-color .2s,box-shadow .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ic{transition:transform .2s}
.btn:hover .ic-arrow{transform:translateX(3px)}
.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-lg{padding:17px 32px;font-size:16px}
.btn-block{width:100%}
/* Primary action: amber-400 with navy text (6.2:1) on every surface, navy
or light. On paper and white cards the pill carries a deeper amber edge
and a warm shadow so it does not wash out. .btn-amber is the old name,
kept as an alias. */
.btn-primary,.btn-amber{background:var(--g-warm-btn);color:var(--navy-900);border-color:rgba(201,132,16,.4);box-shadow:0 4px 12px -6px rgba(152,98,8,.6)}
.btn-primary:hover,.btn-amber:hover{background:var(--g-warm-btn);filter:brightness(1.05);box-shadow:0 8px 18px -7px rgba(152,98,8,.65)}
/* on navy the edge is unnecessary and the shadow goes neutral */
:is(.hero,.page-hero,.on-dark,.on-dark-2,.cta-dark,.panel-dark,.cta-banner,.pullquote,.auth-brand,.nav) :is(.btn-primary,.btn-amber){
border-color:transparent;box-shadow:0 4px 12px -6px rgba(0,0,0,.45)}
:is(.hero,.page-hero,.on-dark,.on-dark-2,.cta-dark,.panel-dark,.cta-banner,.pullquote,.auth-brand,.nav) :is(.btn-primary,.btn-amber):hover{
box-shadow:0 8px 18px -7px rgba(0,0,0,.5)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--bottle-2)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.on-dark .btn-ghost,.on-dark-2 .btn-ghost,.hero .btn-ghost,.page-hero .btn-ghost{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.04)}
.on-dark .btn-ghost:hover,.on-dark-2 .btn-ghost:hover,.hero .btn-ghost:hover,.page-hero .btn-ghost:hover{background:var(--on-dark);color:var(--bottle);border-color:var(--on-dark)}
.btn-outline-ink{border-color:var(--ink);color:var(--ink)}
.btn-outline-ink:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:13px}
.btn-row.center{justify-content:center}
/* white-space:nowrap plus 32px of padding makes a long label wider than a
320px phone. Below 420px let the label wrap and tighten the padding. */
@media(max-width:420px){
.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2}
.btn-lg{padding:15px 22px;font-size:15.5px}
}
/* Secondary text CTA. Bold navy text on a 2px amber underline, with an arrow
that travels on hover while the underline tightens and turns teal. It reads
as a link at a glance without dressing up as a second button. The
underline is a text-decoration, so it sits under the words only, never
under the arrow, and follows the text if it wraps. */
.link-arrow{
display:inline-flex;align-items:center;gap:10px;max-width:100%;
font-weight:700;font-size:15.5px;line-height:1.45;letter-spacing:-.005em;color:var(--navy-900);
text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:7px;
transition:color .2s,text-decoration-color .2s,text-underline-offset .2s;
}
.link-arrow .ic-arrow{width:17px;height:17px;flex:none;stroke-width:2;color:var(--amber-deep);transition:transform .25s cubic-bezier(.2,.7,.3,1),color .2s}
.link-arrow:hover{color:var(--teal-text);text-decoration-color:var(--teal);text-underline-offset:4px}
.link-arrow:hover .ic-arrow{transform:translateX(5px);color:var(--teal)}
:is(.on-dark,.on-dark-2,.page-hero,.hero,.cta-dark,.panel-dark,.cta-banner) .link-arrow{color:#fff}
:is(.on-dark,.on-dark-2,.page-hero,.hero,.cta-dark,.panel-dark,.cta-banner) .link-arrow .ic-arrow{color:var(--amber)}
:is(.on-dark,.on-dark-2,.page-hero,.hero,.cta-dark,.panel-dark,.cta-banner) .link-arrow:hover{color:var(--teal-lt);text-decoration-color:var(--teal-lt)}
:is(.on-dark,.on-dark-2,.page-hero,.hero,.cta-dark,.panel-dark,.cta-banner) .link-arrow:hover .ic-arrow{color:var(--teal-lt)}
/* A labelled row of related links, in place of a sentence with bare links */
.related{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px}
.related-label{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--mist)}
/* ---------- 7. NAV ---------- */
/* The header is navy-900, the landing hero's base, so it reads as one piece
with the hero beneath it. Links are white and the logo is the white one;
the dropdown panels stay white cards with navy text. */
header.nav{
position:sticky;top:0;z-index:80;
background:rgba(18,56,74,.97);
backdrop-filter:saturate(150%) blur(14px);
-webkit-backdrop-filter:saturate(150%) blur(14px);
border-bottom:1px solid var(--line-dark-2);
color:#fff;
transition:border-color .25s,background .25s,box-shadow .25s;
}
header.nav.stuck{border-bottom-color:var(--line-dark);box-shadow:0 10px 30px -22px rgba(4,16,22,.9)}
/* Header over the hero. Every page opens on a navy hero, and a
solid bar on top of it left a visible seam where the hero's gradient began.
So on those pages the header overlaps the hero (the negative margin, with
the hero's top padding grown to match) and stays transparent while the hero
is under it. The blur is off in that state too: blurring the hero's grain
texture left a smooth band that showed where the bar was. site.js adds .past-hero once the hero has scrolled clear, and from
there the bar is one navy glass tint for the rest of the page: it lets the
band behind it through slightly rather than recolouring per section. */
body:has(main > :is(.hero,.page-hero):first-child) header.nav{margin-bottom:calc(-1 * var(--nav-h) - 1px)}
main > .hero:first-child .hero-inner{padding-top:calc(clamp(66px,10vw,132px) + var(--nav-h))}
main > .page-hero:first-child{padding-top:calc(clamp(58px,7.5vw,104px) + var(--nav-h))}
header.nav{transition:border-color .35s,background-color .35s,box-shadow .35s}
header.nav.past-hero{background:rgba(18,56,74,.9)}
body:has(main > :is(.hero,.page-hero):first-child) header.nav:not(.past-hero):not(:has(.nav-links.open)){
background:rgba(18,56,74,0);border-bottom-color:transparent;box-shadow:none;
-webkit-backdrop-filter:none;backdrop-filter:none}
header.nav>.nav-inner :focus-visible{outline-color:var(--teal-lt)}
.nav-inner{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.03em;flex:none}
.logo-mark{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
background:var(--g-spirit);color:var(--teal-lt);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -10px rgba(8,30,40,.9);
}
.logo-mark .ic{width:19px;height:19px;stroke-width:1.5}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--g-teal);display:inline-block;transform:translateY(-1px)}
.on-dark-nav .logo,footer .logo{color:var(--on-dark)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links>a,.nav-trigger{
font-size:15px;font-weight:500;color:#fff;padding:9px 13px;border-radius:var(--r-sm);
display:inline-flex;align-items:center;gap:5px;position:relative;transition:color .2s,background .2s;
}
.nav-links>a:hover,.nav-trigger:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-links>a.current,.nav-item.current>.nav-trigger{color:#fff;font-weight:700}
.nav-links>a.current::after{
content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--amber);
}
.nav .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.04)}
.nav .btn-ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.nav-actions{display:flex;align-items:center;gap:9px;margin-left:14px;flex:none}
/* The ghost button carries a 16px icon and the primary one is text-only, so they
resolved to 40.7px and 38.5px — two pills of different heights side by side.
min-height, not height: below 980px these go full-width in the drawer with
larger padding and must still be free to grow. */
.nav-actions .btn{min-height:41px}
.nav-item{position:relative}
.nav-trigger .ic{transition:transform .22s;opacity:.8}
.nav-item.open>.nav-trigger .ic{transform:rotate(180deg)}
.nav-menu{
position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-8px);
min-width:248px;max-width:min(320px,calc(100vw - 2 * var(--pad)));padding:10px;border-radius:var(--r);
background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(150%);
color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-lg);
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:90;
}
.nav-item.open>.nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-menu a{
display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;transition:background .18s;
}
.nav-menu a:hover{background:var(--surface-mint)}
.nav-menu .mi-ic{color:var(--teal-text);display:flex;flex:none}
.nav-menu .mi-t{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.nav-menu .menu-head{
font-family:var(--label);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);
padding:8px 12px 6px;
}
.nav-toggle{display:none;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.3);color:#fff;align-items:center;justify-content:center;margin-left:auto}
.nav-toggle .ic-x{display:none}
.nav-toggle[aria-expanded="true"] .ic-menu{display:none}
.nav-toggle[aria-expanded="true"] .ic-x{display:block}
/* ---------- 8. HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--bottle);color:var(--on-dark)}
.hero::before{
content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(75% 60% at 88% 6%,rgba(14,140,135,.42),transparent 62%),
radial-gradient(60% 55% at 6% 92%,rgba(95,198,191,.10),transparent 66%),
linear-gradient(155deg,#1A4B60 0%,#12384A 46%,#0A2431 100%);
}
.hero-inner{position:relative;z-index:2;padding-block:clamp(66px,10vw,132px) clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin-top:24px;max-width:18ch;font-size:clamp(36px,4.6vw,62px)}
.hero .lead{margin-top:26px;max-width:50ch}
.hero .btn-row{margin-top:36px}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-family:var(--label);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-dim)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note .ic{color:var(--teal-lt)}
/* page hero (interior) */
.page-hero{position:relative;overflow:hidden;background:var(--bottle);color:var(--on-dark);padding-block:clamp(58px,7.5vw,104px) clamp(50px,6.5vw,88px)}
.page-hero::before{
content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(62% 78% at 92% 0%,rgba(14,140,135,.36),transparent 64%),
radial-gradient(52% 70% at 0% 100%,rgba(95,198,191,.08),transparent 68%),
linear-gradient(150deg,#184660 0%,#12384A 52%,#0A2431 100%);
}
.page-hero>*{position:relative;z-index:2}
.page-hero h1{margin-top:20px;max-width:25ch}
/* A two-column interior hero gives the title half the width, so it takes the
landing hero's size instead; at full size "Intelligence Platform." broke
onto a third line. */
.page-hero .hero-grid h1{font-size:clamp(36px,4.6vw,62px)}
.page-hero .lead{margin-top:22px}
/* The interior-page hero's button row had no default margin, so on any page
whose author forgot to hand-apply .mt-32 the buttons sat flush against the
lead paragraph -- /product, the three solution pages, and /platform, whose
markup carried an .mt-36 class that does not exist in the utility scale.
:where() keeps this rule at .btn-row's own specificity and the .mt-* block
is declared later in this file, so a page that spells out a real utility
still wins (verified: adding .mt-40 yields 40px). */
:where(.page-hero) .btn-row{margin-top:32px}
.page-hero.center{text-align:center}
.page-hero.center h1,.page-hero.center .lead{margin-inline:auto}
.page-hero.center .eyebrow::before{display:none}
.page-hero.center .crumbs{justify-content:center}
.crumbs{display:flex;align-items:center;gap:9px;font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim)}
.crumbs a:hover{color:var(--teal-lt)}
.crumbs .ic{opacity:.5}
/* ---------- 9. GENIE WIDGET ---------- */
.genie{
position:relative;border-radius:var(--r);overflow:hidden;
background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.012));
border:1px solid var(--line-dark);box-shadow:var(--sh-dark);
backdrop-filter:blur(6px);
}
.genie::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.genie-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line-dark-2);background:rgba(0,0,0,.16)}
.genie-bar .k{width:8px;height:8px;border-radius:50%;background:var(--on-dark-dim);opacity:.32}
.genie-bar .k.live{background:var(--amber);opacity:1;animation:pulse 2s infinite;box-shadow:0 0 0 3px rgba(244,169,40,.16)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.genie-bar .lbl{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim);margin-left:auto;display:inline-flex;align-items:center;gap:7px}
.genie-bar .lbl .ic{color:var(--teal-lt)}
.genie-body{padding:22px 22px 26px;min-height:206px}
.genie-q{font-family:var(--label);font-size:clamp(13px,1.5vw,14.5px);color:var(--on-dark);line-height:1.5}
.genie-q .caret{color:var(--amber);margin-right:.45em}
.genie-a{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.2vw,26px);line-height:1.3;margin-top:16px;color:#fff;letter-spacing:-.015em;min-height:1.3em}
.genie-a .metric{background:var(--g-text-dark);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.genie-src{font-family:var(--label);font-size:12px;line-height:16px;color:var(--on-dark-dim);margin-top:14px;opacity:0;transition:opacity .4s ease}
.genie-src.in{opacity:1}
.genie-foot{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 20px}
.genie-chip{font-family:var(--label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-dim);border:1px solid var(--line-dark-2);border-radius:var(--r-pill);padding:6px 11px;background:rgba(255,255,255,.03)}
.cursor{display:inline-block;width:.5ch;height:1.02em;background:var(--amber);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* ---------- 10. MARQUEE ---------- */
.proof{border-top:1px solid var(--line-dark-2);border-bottom:1px solid var(--line-dark-2);background:rgba(0,0,0,.28);color:var(--on-dark-dim);overflow:hidden;position:relative;z-index:2}
.proof::before,.proof::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none}
.proof::before{left:0;background:linear-gradient(90deg,#081E29,transparent)}
.proof::after{right:0;background:linear-gradient(270deg,#081E29,transparent)}
.proof-track{display:flex;width:max-content;white-space:nowrap;padding:15px 0;font-family:var(--label);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;animation:scroll 40s linear infinite}
.proof-track>span{display:inline-flex;align-items:center;gap:44px;padding-right:44px}
.proof-track b{font-weight:400;display:inline-flex;align-items:center;gap:11px}
.proof-track b::before{content:"";width:5px;height:5px;background:var(--teal-lt);border-radius:50%;flex:none}
@keyframes scroll{to{transform:translateX(-50%)}}
/* ---------- 11. SPLIT (sticky head) ---------- */
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,6vw,88px);align-items:start}
.split-head{position:sticky;top:calc(var(--nav-h) + 44px)}
.split-aside{position:sticky;top:calc(var(--nav-h) + 32px)}
/* ---------- 12. NUMBERED ROWS ---------- */
.rows{border-top:1px solid var(--line)}
.on-dark .rows,.on-dark-2 .rows{border-color:var(--line-dark)}
.row-item{
display:grid;grid-template-columns:52px minmax(0,1fr);gap:24px;
padding:34px 0;border-bottom:1px solid var(--line);position:relative;transition:.25s;
}
.on-dark .row-item{border-color:var(--line-dark)}
.row-item::before{content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;border-radius:var(--r);background:linear-gradient(100deg,rgba(14,140,135,.06),rgba(95,198,191,.03));opacity:0;transition:opacity .3s;pointer-events:none}
.row-item:hover::before{opacity:1}
.row-num{font-family:var(--label);font-size:13px;letter-spacing:.06em;color:var(--teal-text);padding-top:7px}
.on-dark .row-num{color:var(--teal-lt)}
.row-item h3{margin-bottom:0}
.row-prob{color:var(--mist);margin-top:11px;font-size:16px;max-width:52ch}
.on-dark .row-prob{color:var(--on-dark-dim)}
/* The BevGenie answer under each problem: a white card lifted off the band by a
hairline and a soft shadow, with a teal rule fading out along the top edge
(the .qcard hover bar, held still). Replaced a mint fill with a 2px left
stripe on 2026-10-11. */
.row-sol{
margin-top:22px;padding:18px 22px 20px;border-radius:var(--r);position:relative;overflow:hidden;
background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-sm);
transition:border-color .26s,box-shadow .26s;
}
.row-sol::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--teal) 0%,rgba(95,198,191,.55) 36%,rgba(95,198,191,0) 80%);pointer-events:none}
.row-item:hover .row-sol{border-color:rgba(14,140,135,.26);box-shadow:var(--sh)}
.row-sol .tag{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.row-sol .tag .ic{width:22px;height:22px;padding:5px;border-radius:7px;background:var(--g-teal);color:#fff;box-shadow:0 4px 10px -4px rgba(14,140,135,.6)}
.row-sol p{font-size:16px;line-height:1.55;color:var(--ink);max-width:56ch}
.on-dark .row-sol{background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:var(--line-dark-2);box-shadow:none}
.on-dark .row-sol .tag{color:var(--teal-lt)}
.on-dark .row-sol p{color:var(--on-dark)}
/* ---------- 13. LAYER CARDS ---------- */
/* Cards sit on one baseline and share a row height, so the three columns read
as a single band rather than a staircase. */
.stagger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:stretch}
/* Cards are light by default and switch to the glass look only inside a dark
section. They used to be dark-only, so a grid dropped into a light section
rendered pale text on a near-white card; scoping the dark look to its
container means a card is readable wherever it is placed. */
.gcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:#fff;box-shadow:var(--sh-sm);padding:32px 28px 34px;overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.3,1),background .28s,box-shadow .28s}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .gcard{background:rgba(255,255,255,.032);box-shadow:none}
.gcard::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(150deg,rgba(14,140,135,.42),rgba(95,198,191,.24) 46%,rgba(234,242,244,.06) 88%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
.gcard::after{content:"";position:absolute;left:0;right:0;top:0;height:180px;background:radial-gradient(120% 100% at 50% 0%,rgba(95,198,191,.1),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--sh)}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .gcard:hover{background:rgba(255,255,255,.055);box-shadow:none}
.gcard:hover::after{opacity:1}
.gcard .lnum{font-family:var(--label);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-text);display:block}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .gcard .lnum{color:var(--teal-lt)}
.gcard h3{margin:18px 0 12px}
/* flex:1 lets the paragraphs absorb the height difference, so the feature
lists (and their divider rules) line up across all three cards. */
.gcard>p{color:var(--mist-2);font-size:15.5px;flex:1}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .gcard>p{color:var(--on-dark-dim)}
.feat-list{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .feat-list{border-top-color:var(--line-dark-2)}
.feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--mist-2);font-family:var(--label);letter-spacing:.005em;line-height:1.45}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .feat-list li{color:#C3D3DA}
.feat-list .ic{color:var(--teal-text);margin-top:3px}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .feat-list .ic{color:var(--teal-lt)}
/* light variant */
.lcard{display:block;position:relative;border-radius:var(--r);background:#fff;border:1px solid var(--line);padding:30px 28px 32px;transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s;box-shadow:var(--sh-sm)}
.lcard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgba(14,140,135,.42)}
.lcard h3,.lcard h4,.lcard .h3,.lcard .h4{margin:18px 0 10px}
.lcard p{font-size:15.5px;color:var(--mist-2)}
/* ---------- 14. BENTO ----------
Uniform cells only. The mixed half / third / full spans left a lone cell
on its own row with empty space beside it, so every bento is now an even
grid: six cells as 3 x 2, four as 2 x 2 (.cols-2). No cell is recoloured
to stand out; the old .accent variant is gone. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.bento.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bcell{
position:relative;border-radius:var(--r);padding:26px 26px 28px;overflow:hidden;
background:#fff;box-shadow:var(--sh-sm);
border:1px solid var(--line);transition:border-color .28s,transform .28s,background .28s,box-shadow .28s;
min-height:172px;display:flex;flex-direction:column;
}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .bcell{background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:var(--line-dark-2);box-shadow:none}
.bcell:hover{border-color:rgba(95,198,191,.4);transform:translateY(-4px);box-shadow:var(--sh)}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .bcell:hover{border-color:rgba(95,198,191,.38);background:linear-gradient(158deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:none}
.bcell .src{font-family:var(--label);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-text);display:flex;align-items:center;gap:8px}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .bcell .src{color:var(--teal-lt)}
.bcell h4,.bcell .h4{margin:14px 0 11px;color:var(--ink);font-size:19px}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) :is(.bcell h4,.bcell .h4){color:#fff}
.bcell p{font-size:14.5px;color:var(--mist-2);line-height:1.5}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .bcell p{color:var(--on-dark-dim)}
.bcell .b-ic{position:absolute;right:20px;bottom:18px;color:rgba(18,56,74,.07);pointer-events:none;transition:color .3s,transform .3s}
.bcell:hover .b-ic{color:rgba(95,198,191,.28);transform:translateY(-3px)}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .bcell .b-ic{color:rgba(234,242,244,.1)}
:is(.on-dark,.on-dark-2,.hero,.page-hero,.cta-dark,.panel-dark) .bcell:hover .b-ic{color:rgba(95,198,191,.24)}
/* ---------- 15. ROLE TABS ---------- */
.role-tabs{display:flex;flex-wrap:wrap;gap:9px}
.role-tab{
font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:var(--r-pill);
border:1.5px solid var(--line);color:var(--mist-2);background:rgba(255,255,255,.5);transition:.22s;
display:inline-flex;align-items:center;gap:8px;
}
.role-tab:hover{border-color:var(--ink);color:var(--ink)}
.role-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.role-tab[aria-selected="true"] .ic{color:var(--teal-lt)}
.role-panel{margin-top:36px}
/* The grid lives on .role-group, not .role-panel: all four groups ship in the
HTML so crawlers see every question, and only the selected one is shown. */
.role-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.role-group[hidden]{display:none}
.qcard{
position:relative;border-radius:var(--r);padding:28px 26px 24px;background:#fff;border:1px solid var(--line);
transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s;box-shadow:var(--sh-sm);
display:flex;flex-direction:column;overflow:hidden;
}
.qcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--g-teal);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.qcard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgba(14,140,135,.35)}
.qcard:hover::before{transform:scaleX(1)}
.qcard .qmark{font-family:var(--serif);font-size:44px;line-height:.5;color:var(--teal);font-style:italic;font-weight:700;height:22px}
.qcard p{font-family:var(--serif);font-size:19.5px;line-height:1.26;margin-top:16px;letter-spacing:-.015em;flex:1}
.qcard .ans{font-family:var(--label);font-size:13px;color:var(--mist);margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.qcard .ans .ic{color:var(--teal-text)}
/* ---------- 16. STAT BAND ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-dark-2);border-radius:var(--r);overflow:hidden;border:1px solid var(--line-dark-2)}
.stat{background:var(--bottle);padding:28px 24px}
.stat .v{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.03em;background:var(--g-text-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim);margin-top:12px;line-height:1.5}
.stats.light{background:var(--line);border-color:var(--line)}
.stats.light .stat{background:var(--paper)}
.stats.light .v{background:var(--g-text-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats.light .l{color:var(--mist)}
/* ---------- 17. FLOW / PIPELINE ---------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:fl}
.flow-step{position:relative;padding:26px 22px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.flow-step::after{
content:"";position:absolute;right:-14px;top:50%;width:14px;height:1px;background:var(--line);z-index:1;
}
.flow-step:last-child::after{display:none}
.flow-step .fnum{font-family:var(--label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-text)}
.flow-step h4,.flow-step .h4{margin:14px 0 11px;font-size:19px}
.flow-step p{font-size:14.5px;color:var(--mist-2);line-height:1.5}
/* ---------- 18. TIMELINE / CHECKLIST ---------- */
.tline{position:relative;padding-left:34px}
.tline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--teal),rgba(95,198,191,.45),transparent)}
.tline-item{position:relative;padding-bottom:30px}
.tline-item:last-child{padding-bottom:0}
.tline-item::before{content:"";position:absolute;left:-30px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(14,140,135,.14)}
.tline-item h4,.tline-item .h4{margin-bottom:11px}
.tline-item p{font-size:15.5px;color:var(--mist-2)}
.on-dark .tline-item p{color:var(--on-dark-dim)}
.checks{display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.5}
.checks .ic{color:var(--teal-text);margin-top:3px}
.on-dark .checks .ic,.page-hero .checks .ic{color:var(--teal-lt)}
.checks-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 32px}
/* ---------- 19. ACCORDION ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;
padding:24px 4px;font-family:var(--serif);font-weight:600;font-size:clamp(17.5px,1.9vw,21px);line-height:1.3;
letter-spacing:-.015em;transition:color .2s;
}
.acc-q:hover{color:var(--teal-text)}
.acc-ic{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:.28s;color:var(--mist-2)}
.acc-item.open .acc-ic{background:var(--g-teal);border-color:transparent;color:#fff;transform:rotate(180deg)}
.acc-a{overflow:hidden;max-height:0;transition:max-height .36s cubic-bezier(.3,.8,.4,1)}
.acc-a-inner{padding:0 60px 26px 4px;color:var(--mist-2);font-size:16px;line-height:1.62}
.acc-a-inner p+p{margin-top:12px}
.acc-a-inner ul{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.acc-a-inner ul li{padding-left:18px;position:relative}
.acc-a-inner ul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
/* ---------- 20. TABLE ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-sm)}
table.tbl{width:100%;border-collapse:collapse;min-width:600px;font-size:15px}
/* Below ~480px a 600px table means a lot of dragging — tighten it so a phone
shows most of a row at once. .tbl-wrap still scrolls the remainder. */
@media(max-width:480px){
table.tbl{min-width:440px;font-size:14px}
table.tbl th{padding:13px 14px}
table.tbl td{padding:14px}
}
table.tbl th{
text-align:left;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--mist);font-weight:700;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
table.tbl td{padding:17px 20px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-soft);line-height:1.5}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td:first-child{font-weight:600;color:var(--ink)}
table.tbl tbody tr:hover{background:rgba(236,247,246,.6)}
/* ---------- 21. CHIPS / FILTERS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--mist-2);
background:rgba(255,255,255,.6);transition:.2s;display:inline-flex;align-items:center;gap:7px;
}
a.chip:hover,button.chip:hover{border-color:var(--ink);color:var(--ink)}
/* filter chips are the tap target on the blog archive — keep them thumb-sized */
@media(max-width:720px){button.chip{min-height:38px;padding-block:0}}
.chip[aria-pressed="true"],.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip-amber{background:rgba(244,169,40,.16);border-color:rgba(244,169,40,.36);color:var(--amber-text)}
.chip-teal{background:rgba(14,140,135,.13);border-color:rgba(14,140,135,.3);color:var(--teal-text)}
.on-dark .chip,.page-hero .chip{border-color:var(--line-dark);color:var(--on-dark-dim);background:rgba(255,255,255,.04)}
/* ---------- 22. FORMS ---------- */
.form{display:grid;gap:18px}
/* Wrapping flex rather than a 2-col grid: these forms sit in panels whose
width tracks the page column, not the viewport, so a media query can't tell
when a field gets too narrow to type an email into. Below a ~418px panel the
pair stacks on its own. */
.form-row{display:flex;flex-wrap:wrap;gap:18px}
.form-row>*{flex:1 1 200px;min-width:0}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-soft)}
.field .req{color:var(--teal-text)}
.field input,.field select,.field textarea{
font-family:var(--sans);font-size:15.5px;color:var(--ink);
padding:13px 15px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
transition:border-color .2s,box-shadow .2s;width:100%;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,140,135,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#95A3B2}
.field-check{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--mist-2);line-height:1.5}
.field-check input{width:17px;height:17px;margin-top:2px;accent-color:var(--teal);flex:none}
.form-note{font-size:12.5px;color:var(--mist);line-height:1.5}
.form-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,40px);box-shadow:var(--sh)}
/* A form panel with no heading block of its own (the e-book download): the
copy column beside it carries the title, so the card narrows to the fields
and sits against the column's outer edge. */
.form-panel-compact{max-width:500px;margin-left:auto}
@media(max-width:980px){.form-panel-compact{max-width:none;margin-left:0}}
/* ---------- 23. TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.tcard{position:relative;border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:26px 24px 24px;box-shadow:var(--sh-sm);transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s;overflow:hidden}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgba(14,140,135,.36)}
.avatar{
width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.03em;color:#fff;
background:var(--g-navy);box-shadow:0 10px 24px -14px rgba(18,56,74,.8);
}
.tcard:nth-child(3n+2) .avatar{background:var(--g-teal);color:#fff}
.tcard:nth-child(3n) .avatar{background:var(--surface-mint);color:var(--navy-900);box-shadow:inset 0 0 0 1px rgba(14,140,135,.22)}
.tcard h4{margin:18px 0 4px;font-size:19px}
.tcard .role{font-family:var(--label);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-text)}
.tcard .bio{font-size:14.5px;color:var(--mist-2);margin-top:12px;line-height:1.55}
.tcard .tlink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;color:var(--mist);transition:.2s}
.tcard .tlink:hover{color:var(--teal-text)}
/* ---------- 24. QUOTE / CALLOUT ---------- */
.pullquote{
position:relative;padding:clamp(30px,4vw,52px) clamp(26px,4vw,56px);border-radius:var(--r-lg);overflow:hidden;
background:var(--g-dusk);color:var(--on-dark);box-shadow:var(--sh-lg);
}
.pullquote::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 88% 8%,rgba(95,198,191,.24),transparent 62%)}
.pullquote>*{position:relative;z-index:1}
.pullquote blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.9vw,34px);line-height:1.24;letter-spacing:-.02em}
.pullquote cite{display:flex;align-items:center;gap:12px;margin-top:26px;font-style:normal;font-family:var(--label);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim)}
.callout{
display:flex;gap:16px;padding:22px 24px;border-radius:var(--r);
background:var(--surface-mint);
border:1px solid rgba(14,140,135,.2);
}
.callout .ic{color:var(--teal-text);margin-top:2px}
.callout h5{font-size:16px;margin-bottom:9px;color:var(--ink)}
.callout p{font-size:14.5px;color:var(--mist-2);line-height:1.55}
/* The callout keeps its mint background in every section, so its text stays
dark in every section too. Pale text here read as pale on pale. */
/* ---------- 25. BLOG ---------- */
.post-feature{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3.4vw,48px);
border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
}
.post-art{position:relative;min-height:300px;overflow:hidden;background:var(--g-spirit)}
.post-art::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 78% 14%,rgba(95,198,191,.34),transparent 62%)}
.post-art .art-mark{position:absolute;inset:0;display:grid;place-items:center;color:rgba(234,242,244,.16)}
.post-art .art-tag{position:absolute;left:22px;top:22px;z-index:2;background:#fff;border-color:#fff}
.post-feature .pf-body{padding:clamp(26px,3vw,44px) clamp(24px,3vw,44px) clamp(26px,3vw,44px) 0;display:flex;flex-direction:column;justify-content:center}
.post-feature h3{margin:16px 0 14px;font-size:clamp(24px,2.8vw,34px);line-height:1.1}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.pcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(14,140,135,.34)}
.pcard-art{height:152px;position:relative;overflow:hidden;background:var(--g-spirit);display:grid;place-items:center;color:rgba(234,242,244,.2)}
.pcard-art::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 76% 12%,rgba(95,198,191,.3),transparent 64%)}
.pcard:nth-child(3n+2) .pcard-art::before{background:radial-gradient(80% 80% at 24% 84%,rgba(95,198,191,.34),transparent 64%)}
.pcard:nth-child(3n) .pcard-art::before{background:radial-gradient(90% 90% at 50% 100%,rgba(95,198,191,.22),transparent 68%)}
.pcard-art .ic{position:relative;z-index:1}
.pcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard h4{margin:14px 0 10px;font-size:20px;line-height:1.2}
.pcard p{font-size:14.5px;color:var(--mist-2);flex:1}
.pmeta{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);font-family:var(--label);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mist)}
.pmeta span{display:inline-flex;align-items:center;gap:6px}
/* article prose */
.prose{font-size:17.5px;line-height:1.72;color:var(--ink-soft)}
.prose>*+*{margin-top:22px}
.prose h2{font-size:clamp(25px,3vw,34px);margin-top:52px;letter-spacing:-.02em;color:var(--ink)}
.prose h3{font-size:clamp(20px,2.2vw,25px);margin-top:38px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--teal-text);border-bottom:1px solid rgba(10,116,112,.4)}
.prose a:hover{border-color:var(--teal-text)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:11px;padding-left:4px}
.prose ul li,.prose ol li{position:relative;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.prose ol{counter-reset:pl}
.prose ol li{counter-increment:pl}
.prose ol li::before{content:counter(pl);position:absolute;left:0;top:0;font-family:var(--label);font-size:13px;color:var(--teal-text);font-weight:700}
.prose blockquote{border-left:2px solid var(--teal);padding:4px 0 4px 24px;font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);line-height:1.36;letter-spacing:-.015em;color:var(--ink)}
.prose figure{margin-block:36px}
.prose hr{height:1px;border:0;background:var(--g-hairline);margin-block:44px}
.prose code{font-family:var(--code);font-size:.86em;background:var(--paper-2);padding:2px 6px;border-radius:5px}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:980px){.article-grid{grid-template-columns:minmax(0,1fr)}}
.byline{display:flex;align-items:center;gap:14px;padding:20px 0;border-block:1px solid var(--line)}
.byline .avatar{width:44px;height:44px;border-radius:12px;font-size:15px}
.byline .bn{font-weight:600;font-size:15px;line-height:1.3}
.byline .bm{font-family:var(--label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-top:3px}
/* The date is one token — never let it break across lines ("July 2," / "2026").
It moves to the next line whole instead. */
.byline .bm time{white-space:nowrap}
.byline .bshare{margin-left:auto;display:flex;gap:8px}
.byline .bshare a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--mist-2);transition:.2s}
.byline .bshare a:hover{border-color:var(--teal-text);color:var(--teal-text)}
.byline .bn a:hover{color:var(--teal-text)}
/* About-the-author card at the foot of every post. Written by build-seo.py from
the /team bios, so the two never disagree. */
.author-card{display:flex;gap:20px;align-items:flex-start;margin-top:clamp(40px,5vw,56px);padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2)}
.author-card .avatar{width:72px;height:72px;border-radius:14px;flex:none;object-fit:cover}
.author-card .ak{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text)}
.author-card .an{font-weight:700;font-size:20px;line-height:1.25;margin-top:6px}
.author-card .an a:hover{color:var(--teal-text)}
.author-card .ar{font-size:14px;color:var(--mist);margin-top:2px}
.author-card .ab{font-size:15.5px;line-height:1.6;color:var(--mist-2);margin-top:12px}
.author-card .bio-link{margin-top:14px}
@media (max-width:560px){.author-card{flex-direction:column}}
.toc{position:sticky;top:calc(var(--nav-h) + 32px);border-left:1px solid var(--line);padding-left:22px}
.toc h5{font-family:var(--label);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--mist);margin-bottom:14px;font-weight:700}
.toc a{display:block;font-size:14px;padding:6px 0;color:var(--mist-2);transition:.2s;line-height:1.45}
.toc a:hover{color:var(--teal-text);transform:translateX(3px)}
/* ---------- 26. GLOSSARY ---------- */
.alpha{display:flex;flex-wrap:wrap;gap:5px}
.alpha a{
width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);
font-family:var(--label);font-size:13px;font-weight:700;color:var(--mist-2);transition:.2s;background:rgba(255,255,255,.5);
}
.alpha a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.alpha a.off{opacity:.32;pointer-events:none}
.gloss-group{margin-top:52px}
.gloss-letter{
font-family:var(--serif);font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.04em;
color:var(--navy-900);
padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px;
}
.gloss-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(24px,3vw,48px)}
.gterm{padding:22px 0;border-bottom:1px solid var(--line-2)}
.gterm h4{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gterm p{font-size:15px;color:var(--mist-2);line-height:1.58}
.gterm .gtag{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);border:1px solid rgba(14,140,135,.26);background:rgba(14,140,135,.09);border-radius:var(--r-pill);padding:3px 9px;font-weight:700}
/* ---------- 27. EBOOK ---------- */
.ebook-cover{
position:relative;aspect-ratio:3/4;border-radius:6px 16px 16px 6px;overflow:hidden;
background:var(--g-spirit);box-shadow:var(--sh-lg),-6px 0 0 rgba(0,0,0,.24);
padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;color:var(--on-dark);
transform:rotate(-2.2deg);transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.ebook-cover:hover{transform:rotate(0deg) translateY(-6px)}
.ebook-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 84% 10%,rgba(95,198,191,.34),transparent 62%)}
.ebook-cover::after{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(0,0,0,.34),transparent)}
.ebook-cover>*{position:relative;z-index:1}
.ebook-cover .eyebrow{color:#8FDCD5}
.ebook-cover h3{font-size:clamp(26px,3vw,38px);line-height:1.02;letter-spacing:-.028em;font-weight:700}
.chapter{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.chapter .cnum{font-family:var(--label);font-size:12px;letter-spacing:.14em;color:var(--teal-text);padding-top:5px;flex:none;width:34px}
.chapter h4{font-size:18.5px;margin-bottom:9px}
.chapter p{font-size:14.5px;color:var(--mist-2)}
/* ---------- 28. SUBNAV ---------- */
.subnav{position:sticky;top:var(--nav-h);z-index:60;background:rgba(248,251,251,.9);backdrop-filter:blur(12px) saturate(150%);border-bottom:1px solid var(--line-2)}
.subnav-inner{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-block:11px;scrollbar-width:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{
font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:var(--r-pill);color:var(--mist-2);
white-space:nowrap;transition:.2s;display:inline-flex;align-items:center;gap:7px;
}
.subnav a:hover{background:rgba(18,56,74,.05);color:var(--ink)}
.subnav a.current{background:var(--ink);color:var(--paper)}
/* ---------- 29. CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--surface-mint);color:var(--ink);text-align:center;border-top:1px solid rgba(14,140,135,.12)}
.cta-band::before{
content:"";position:absolute;inset:0;
background:radial-gradient(60% 90% at 12% 0%,rgba(14,140,135,.16),transparent 60%),
radial-gradient(70% 100% at 92% 100%,rgba(14,140,135,.08),transparent 62%);
}
.cta-band>*{position:relative;z-index:1}
/* 24ch: wide enough that "Start reading the market." holds one line, so a
two-sentence title with a
between them sets as exactly two lines. */
.cta-band h2{font-weight:700;font-size:clamp(34px,6.4vw,78px);line-height:1.02;letter-spacing:-.03em;max-width:24ch;margin-inline:auto}
.cta-band p{font-size:clamp(16px,1.6vw,19px);margin:24px auto 0;max-width:50ch;color:var(--slate-600)}
.cta-band .btn-row{margin-top:36px}
.cta-band .cta-foot{margin-top:28px;font-family:var(--label);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center}
.cta-dark{position:relative;overflow:hidden;background:var(--bottle-2);color:var(--on-dark)}
.cta-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(56% 90% at 84% 8%,rgba(14,140,135,.34),transparent 62%),radial-gradient(48% 80% at 6% 100%,rgba(95,198,191,.08),transparent 66%)}
.cta-dark>*{position:relative;z-index:1}
/* ---------- 29b. WHAT IS (home) ----------
The definition sits left at reading width; the next-step links sit right in
a white panel, so the band carries weight on both sides instead of a
paragraph and a trailing row of chips hugging the left edge. */
.whatis{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.whatis .sec-head{max-width:none}
.jump-panel{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px);box-shadow:var(--sh)}
.jump-panel .jp-head{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--mist);padding:6px 10px 4px}
.jump-panel .jp-head:not(:first-child){margin-top:10px;padding-top:16px;border-top:1px solid var(--line-2)}
.jump-panel a{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;transition:background .2s}
.jump-panel a:hover{background:var(--surface-mint)}
.jump-panel .jp-t{flex:1;font-weight:700;font-size:16px;color:var(--navy-900);line-height:1.3}
.jump-panel .jp-tag{font-family:var(--label);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text);background:rgba(244,169,40,.16);border-radius:var(--r-pill);padding:3px 8px;margin-left:6px;vertical-align:2px}
.jump-panel .jp-go{color:var(--teal-text);transition:transform .2s}
.jump-panel a:hover .jp-go{transform:translateX(3px)}
@media(max-width:980px){.whatis{grid-template-columns:minmax(0,1fr)}}
/* ---------- 30. FOOTER ---------- */
footer.site{background:var(--bottle-2);color:var(--on-dark-dim);padding-block:clamp(56px,7vw,84px) 34px;position:relative;overflow:hidden}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--g-line)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:clamp(24px,2.6vw,40px);padding-bottom:44px;border-bottom:1px solid var(--line-dark-2)}
.foot-brand .logo{color:var(--on-dark);margin-bottom:16px}
.foot-brand p{max-width:34ch;font-size:14.5px;line-height:1.6}
.foot-social{display:flex;gap:9px;margin-top:22px}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-dark-2);display:grid;place-items:center;color:var(--on-dark-dim);transition:.22s}
.foot-social a:hover{border-color:var(--teal-lt);color:var(--teal-lt);transform:translateY(-2px)}
.foot-col h5{font-family:var(--label);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-lt);margin-bottom:15px;font-weight:700}
.foot-col a{display:block;padding:6px 0;font-size:14.5px;color:var(--on-dark);transition:color .2s,transform .2s}
.foot-col a:hover{color:var(--teal-lt);transform:translateX(3px)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-family:var(--label);font-size:12.5px;letter-spacing:.08em;color:var(--on-dark-dim)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-bot a:hover{color:var(--teal-lt)}
:is(.foot-bot,.foot-slim) .tm{font-size:.62em;letter-spacing:.04em;margin-left:1px;vertical-align:super;line-height:0}
/* Six columns stop working well before the nav does — by 1200px the link
columns are down to ~130px. Give the brand its own row and let the five
link columns share the full width, still on one row. */
@media(max-width:1200px){
.foot-top{grid-template-columns:repeat(5,minmax(0,1fr))}
.foot-brand{grid-column:1/-1}
.foot-brand p{max-width:52ch}
}
/* ---------- 30b. EDITORIAL ROWS + MOCK PANELS ---------- */
.edit-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:center}
.edit-row+.edit-row{margin-top:clamp(56px,7vw,104px)}
.edit-row:nth-child(even) .edit-media{order:-1}
.edit-copy .h3{margin:16px 0 14px}
.mockp{
position:relative;border-radius:var(--r-lg);overflow:hidden;padding:26px;
background:linear-gradient(160deg,#184A5E,#0A2431);color:var(--on-dark);box-shadow:var(--sh-lg);
border:1px solid var(--line-dark-2);
}
.mockp::before{content:"";position:absolute;inset:0;background:radial-gradient(66% 70% at 84% 6%,rgba(95,198,191,.26),transparent 62%)}
.mockp.cool::before{background:radial-gradient(66% 70% at 12% 92%,rgba(95,198,191,.3),transparent 64%)}
.mockp>*{position:relative;z-index:1}
.mock-bar{display:flex;align-items:center;gap:7px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line-dark-2)}
.mock-bar .k{width:7px;height:7px;border-radius:50%;background:rgba(234,242,244,.24)}
.mock-bar .k.on{background:var(--amber)}
.mock-bar .t{margin-left:auto;font-family:var(--label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim)}
.mock-q{font-family:var(--label);font-size:13px;color:var(--on-dark-dim);line-height:1.6}
.mock-q b{color:var(--teal-lt);font-weight:400}
.mock-a{font-family:var(--serif);font-size:clamp(18px,2vw,23px);line-height:1.3;letter-spacing:-.015em;color:#fff;margin-top:14px}
.mock-a em{font-style:normal;background:var(--g-text-dark);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.mock-rows{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.mock-line{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--line-dark-2);font-family:var(--label);font-size:12.5px;letter-spacing:.04em;color:var(--on-dark)}
.mock-line .v{margin-left:auto;color:var(--teal-lt);font-weight:700}
.mock-line .v.dn{color:#F29A84}
.mock-line .ic{color:var(--teal-lt)}
.mock-bars{margin-top:20px;display:flex;align-items:flex-end;gap:8px;height:104px}
.mock-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,rgba(95,198,191,.55),rgba(95,198,191,.12));display:block}
.mock-bars i.hi{background:var(--g-warm)}
/* light bento variant */
.bento.light .bcell{background:#fff;border-color:var(--line);box-shadow:var(--sh-sm)}
.bento.light .bcell:hover{background:#fff;border-color:rgba(95,198,191,.4);box-shadow:var(--sh)}
.bento.light .bcell .src{color:var(--teal-text)}
.bento.light .bcell h4{color:var(--ink)}
.bento.light .bcell p{color:var(--mist-2)}
.bento.light .bcell .b-ic{color:rgba(18,56,74,.07)}
.bento.light .bcell:hover .b-ic{color:rgba(95,198,191,.28)}
/* logo / source strip */
.srcstrip{display:flex;flex-wrap:wrap;gap:10px}
.srcstrip span{
display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:var(--r-pill);
border:1px solid var(--line);background:rgba(255,255,255,.6);
font-family:var(--label);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mist-2);
}
.srcstrip .ic{color:var(--teal-text)}
.on-dark .srcstrip span,.on-dark-2 .srcstrip span{border-color:var(--line-dark-2);background:rgba(255,255,255,.04);color:var(--on-dark-dim)}
.on-dark .srcstrip .ic{color:var(--teal-lt)}
/* two-tone panel */
.panel{border-radius:var(--r-lg);padding:clamp(28px,3.6vw,48px);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.panel-dark{border-radius:var(--r-lg);padding:clamp(28px,3.6vw,48px);position:relative;overflow:hidden;background:var(--g-dusk);color:var(--on-dark);box-shadow:var(--sh-lg)}
.panel-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(56% 78% at 88% 6%,rgba(95,198,191,.22),transparent 62%)}
.panel-dark>*{position:relative;z-index:1}
/* definition/spec list */
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 28px;align-items:baseline}
.dl dt{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text);white-space:nowrap;padding-top:3px}
.dl dd{font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.on-dark .dl dt{color:var(--teal-lt)}
.on-dark .dl dd{color:var(--on-dark-dim)}
/* pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:8px}
.pager a,.pager span{min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:600;color:var(--mist-2);transition:.2s;background:rgba(255,255,255,.6)}
.pager a:hover{border-color:var(--ink);color:var(--ink)}
.pager .on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager .off{opacity:.4}
@media(max-width:980px){
.edit-row{grid-template-columns:minmax(0,1fr);gap:28px}
.edit-row:nth-child(even) .edit-media{order:0}
.dl{grid-template-columns:minmax(0,1fr);gap:4px 0}
.dl dd{margin-bottom:14px}
}
/* ---------- AUTH ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:calc(100vh - var(--nav-h))}
.auth-brand{position:relative;overflow:hidden;background:var(--bottle);color:var(--on-dark);padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between}
.auth-brand::before{content:"";position:absolute;inset:0;background:radial-gradient(66% 62% at 88% 4%,rgba(14,140,135,.4),transparent 62%),radial-gradient(56% 60% at 4% 96%,rgba(95,198,191,.09),transparent 66%),linear-gradient(150deg,#184660,#12384A 52%,#0A2431)}
.auth-brand>*{position:relative;z-index:1}
.auth-brand .eyebrow,.auth-brand .kicker{color:var(--teal-lt)}
.auth-brand .lead,.auth-brand .small{color:var(--on-dark-dim)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:clamp(36px,5vw,72px) var(--pad);background:var(--paper)}
.auth-form-inner{width:100%;max-width:404px}
.auth-divider{display:flex;align-items:center;gap:14px;margin-block:22px;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-sso{width:100%;justify-content:center;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600}
.btn-sso:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.foot-slim{background:var(--bottle-2);color:var(--on-dark-dim);padding-block:20px;font-family:var(--label);font-size:12.5px;letter-spacing:.06em}
.foot-slim .wrap-wide{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-slim nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-slim a:hover{color:var(--teal-lt)}
@media(max-width:900px){
.auth{grid-template-columns:minmax(0,1fr);min-height:0}
.auth-brand{display:none}
}
/* oversized numerals */
.big-num{
font-family:var(--serif);font-weight:700;font-size:clamp(40px,4.6vw,58px);line-height:.85;letter-spacing:-.05em;
background:var(--g-text-light);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;
}
.on-dark .big-num,.panel-dark .big-num,.cta-dark .big-num{background:var(--g-text-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.commit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:560px){.commit{grid-template-columns:minmax(0,1fr);gap:12px}}
/* dark CTA bands behave like dark sections */
.cta-dark .eyebrow{color:var(--teal-lt)}
.cta-dark .lead,.cta-dark .small{color:var(--on-dark-dim)}
.cta-dark .checks .ic{color:var(--teal-lt)}
.cta-dark .btn-ghost{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.04)}
.cta-dark .btn-ghost:hover{background:var(--on-dark);color:var(--bottle);border-color:var(--on-dark)}
.cta-dark .hr{background:linear-gradient(90deg,transparent,var(--line-dark) 12%,var(--line-dark) 88%,transparent)}
/* forms on dark surfaces */
.on-dark .field label,.on-dark-2 .field label,.cta-dark .field label,.panel-dark .field label,.hero .field label{color:var(--on-dark)}
.on-dark .form-note,.on-dark-2 .form-note,.cta-dark .form-note,.panel-dark .form-note{color:var(--on-dark-dim)}
.on-dark .field-check,.cta-dark .field-check,.panel-dark .field-check{color:var(--on-dark-dim)}
/* a white form panel always keeps light-surface text, wherever it sits */
.form-panel .field label{color:var(--ink-soft)}
.form-panel .form-note{color:var(--mist)}
.form-panel .field-check{color:var(--mist-2)}
.form-panel .small{color:var(--mist)}
.form-panel .callout p{color:var(--mist-2)}
/* dark panels dropped inside light sections inherit dark treatment */
.panel-dark .eyebrow,.pullquote .eyebrow{color:var(--teal-lt)}
.panel-dark .lead,.pullquote .lead{color:var(--on-dark-dim)}
.panel-dark .small{color:var(--on-dark-dim)}
.panel-dark .checks .ic,.panel-dark .tline-item .ic{color:var(--teal-lt)}
.panel-dark .checks li strong{color:#fff}
.panel-dark .dl dt{color:var(--teal-lt)}
.panel-dark .dl dd{color:var(--on-dark-dim)}
.panel-dark .hr{background:linear-gradient(90deg,transparent,var(--line-dark) 12%,var(--line-dark) 88%,transparent)}
.panel-dark .btn-ghost{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.04)}
.panel-dark .btn-ghost:hover{background:var(--on-dark);color:var(--bottle);border-color:var(--on-dark)}
.panel-dark .callout{border-color:rgba(95,198,191,.28)}
/* ============================================================
30c. BRAND LOGO LOCKUP
============================================================ */
.logo-img{height:40px;width:auto;display:block}
.logo-img-sm{height:34px}
footer .logo-img{height:42px}
/* ============================================================
30d. MEDIA — covers, card art, figures
============================================================ */
.media{position:relative;overflow:hidden;background:var(--bottle-2)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.ratio-16-9{aspect-ratio:16/9}
.ratio-3-2{aspect-ratio:3/2}
.ratio-4-3{aspect-ratio:4/3}
.ratio-1-1{aspect-ratio:1/1}
/* article cover under a dark page hero
The cover section is transparent: the image sits on the page surface and
reads as its own element, rather than being inset into a dark band carried
down from the hero. The band's two supports are gone with it — the
`background:var(--bottle)` that continued the hero colour, and the dark
top/bottom scrim on .cover-inner that only existed to blend the image edges
into that colour (on the light surface it just dimmed the photo).
`height:auto` is load-bearing: the ![]()
carries width/height attributes for
CLS, and that height presentational hint beats `aspect-ratio` unless height
is explicitly released. Without it the cover renders at its full intrinsic
height (~1067px) instead of the 5:2 band. */
.cover{position:relative}
/* Beats section.tight's padding-block on source order (equal specificity).
Top: the image used to open flush against the hero, which was invisible while
the two shared one dark background but reads as a collision now that the hero
ends in a hard edge. This is the gap, and it has to live here — the sections
carried an inline `padding-top:0` that no stylesheet could override.
Bottom: 0, because the following section's padding-top is already the gap
down to the byline. Matching the two gives the cover equal air above and
below. */
section.cover{padding-block:clamp(40px,5vw,64px) 0}
.cover-inner{position:relative;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.cover-inner img{width:100%;height:auto;display:block;aspect-ratio:5/2;object-fit:cover}
@media(max-width:720px){.cover-inner img{aspect-ratio:16/9}}
.prose figure{margin-block:40px}
.prose figure img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);display:block;background:#fff}
.prose figcaption{margin-top:12px;font-size:13px;color:var(--mist);line-height:1.5;font-family:var(--label);letter-spacing:.03em}
/* photo card art replaces the old gradient placeholder */
.pcard-art{height:auto;aspect-ratio:16/10;display:block;background:var(--bottle-2)}
.pcard-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard-art img{transform:scale(1.045)}
.pcard-art::before{display:none}
.post-art{min-height:0}
.post-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-art::before{z-index:1;background:linear-gradient(120deg,rgba(10,36,49,.62),rgba(10,36,49,.12) 62%)}
.post-art .art-tag{z-index:2}
/* ============================================================
30e. IN-ARTICLE CTA BANNER
============================================================ */
.cta-banner{
position:relative;overflow:hidden;border-radius:var(--r-lg);margin-block:clamp(40px,5vw,64px);
padding:clamp(28px,3.6vw,44px);background:var(--g-dusk);color:var(--on-dark);box-shadow:var(--sh-lg);
/* Flex, not grid: this banner sits inside the article column, whose width
has nothing to do with the viewport, so a media query can't tell when the
buttons stop fitting. Wrapping on a 380px basis lets the copy keep its
width and drops the buttons underneath instead. */
display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);align-items:center;justify-content:space-between;
}
.cta-banner>*:first-child{flex:1 1 380px;min-width:0}
.cta-banner>.btn-row{flex:0 1 auto}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 84% at 90% 4%,rgba(14,140,135,.36),transparent 62%),radial-gradient(46% 70% at 2% 100%,rgba(95,198,191,.1),transparent 66%)}
.cta-banner::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.cta-banner>*{position:relative;z-index:1}
.cta-banner .eyebrow{color:var(--teal-lt)}
.cta-banner h3{font-size:clamp(21px,2.5vw,30px);line-height:1.14;margin-top:14px;max-width:22ch}
.cta-banner p{color:var(--on-dark-dim);font-size:15.5px;margin-top:12px;max-width:52ch}
.cta-banner .btn-ghost{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.05)}
.cta-banner .btn-ghost:hover{background:var(--on-dark);color:var(--bottle);border-color:var(--on-dark)}
@media(max-width:820px){.cta-banner>.btn-row{flex:1 1 100%}.cta-banner .btn{width:100%}}
/* ============================================================
30f. PLATFORM SCROLL-SYNC (sticky diagram + stepped copy)
============================================================ */
.pscroll{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,80px);align-items:start}
.pscroll-media{
position:sticky;top:calc(var(--nav-h) + 44px);border-radius:var(--r-lg);overflow:hidden;
aspect-ratio:1200/972;background:
radial-gradient(64% 60% at 80% 8%,rgba(14,140,135,.12),transparent 64%),
radial-gradient(56% 56% at 10% 94%,rgba(95,198,191,.14),transparent 66%),
linear-gradient(160deg,#FFFFFF,#ECF7F6);
border:1px solid var(--line);box-shadow:var(--sh);
}
.pscroll-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(14px,2.4vw,34px);
opacity:0;transform:scale(.975);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
.pscroll-media img.on{opacity:1;transform:none}
.pscroll-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(18,56,74,.08);z-index:2}
.pscroll-progress i{display:block;height:100%;width:33.333%;background:var(--g-teal);transition:transform .5s cubic-bezier(.2,.7,.3,1);transform:translateX(0)}
.pstep{padding-block:clamp(34px,7vh,72px);min-height:64vh;display:flex;flex-direction:column;justify-content:center;opacity:.42;transition:opacity .45s ease}
.pstep:first-child{padding-top:0}
.pstep:last-child{padding-bottom:0}
.pstep.on{opacity:1}
.pstep-num{display:inline-flex;align-items:center;gap:11px;font-family:var(--label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-text);font-weight:700}
.pstep-num::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7}
.pstep h3{font-size:clamp(26px,3.4vw,42px);line-height:1.05;letter-spacing:-.025em;margin:18px 0 16px}
.pstep p{font-size:clamp(16px,1.6vw,18.5px);color:var(--mist-2);line-height:1.6;max-width:48ch}
.pstep .chips{margin-top:24px}
@media(max-width:980px){
.pscroll{grid-template-columns:minmax(0,1fr);gap:0}
.pscroll-media{top:calc(var(--nav-h) + 6px);aspect-ratio:5/4;max-height:40vh;margin-bottom:22px;z-index:3}
.pstep{min-height:0;padding-block:26px;opacity:1}
.pstep:first-child{padding-top:6px}
}
/* ============================================================
30g. COMMERCIAL INTELLIGENCE LEXICON
============================================================ */
.lex-domain{scroll-margin-top:calc(var(--nav-h) + 90px)}
.lex-domain+.lex-domain{margin-top:clamp(56px,7vw,96px)}
.lex-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;padding-bottom:26px;border-bottom:1px solid var(--line)}
.lex-rom{
font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:.82;letter-spacing:-.04em;
color:var(--navy-900);
}
.lex-head h2{font-size:clamp(23px,2.7vw,33px);line-height:1.1}
.lex-head .sub{font-family:var(--serif);font-style:italic;font-size:clamp(15.5px,1.6vw,18px);color:var(--mist);margin-top:9px;line-height:1.4}
.lex-term{padding:30px 0;border-bottom:1px solid var(--line-2)}
.lex-term:last-child{border-bottom:0}
.lex-term h3{font-size:clamp(20px,2.2vw,26px);line-height:1.14;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lex-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,2.6vw,40px);margin-top:18px}
.lex-def dt,.lex-imp dt{font-family:var(--label);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.lex-def dt{color:var(--teal-text)}
.lex-imp dt{color:var(--ink)}
.lex-def dd,.lex-imp dd{font-size:15.5px;line-height:1.6;color:var(--mist-2)}
.lex-imp{padding-left:22px;border-left:2px solid var(--teal)}
.lex-imp dd strong{color:var(--ink);font-weight:600}
@media(max-width:820px){
.lex-body{grid-template-columns:minmax(0,1fr);gap:20px}
.lex-imp{padding-left:18px}
.lex-head{grid-template-columns:minmax(0,1fr);gap:8px}
}
/* ============================================================
30h. LEADERSHIP BIOS
============================================================ */
.bio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.bio{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;display:flex;flex-direction:column}
.bio:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgba(14,140,135,.4)}
.bio-photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.bio-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bio:hover .bio-photo img{transform:scale(1.04)}
.bio-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(10,36,49,.42));pointer-events:none}
.bio-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.bio-body h3{font-size:22px;line-height:1.12}
.bio-role{font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);margin-top:8px;font-weight:700}
.bio-body p{font-size:15px;color:var(--mist-2);line-height:1.6;margin-top:16px;flex:1}
.bio-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;font-weight:600;color:var(--teal-text);transition:gap .2s,color .2s}
.bio-link:hover{gap:11px;color:var(--teal-dp)}
/* Three bios per row, then one centred column of the same card width. No
two-column step: three cards in two columns either leaves a hole or
stretches the last card to double width. */
@media(max-width:900px){.bio-grid{grid-template-columns:minmax(0,440px);justify-content:center}}
/* ---------- 31. MOTION ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .72s cubic-bezier(.22,.7,.3,1),transform .72s cubic-bezier(.22,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
/* ---------- 32. SPACING UTILITIES ---------- */
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-48{margin-top:48px}
.mt-56{margin-top:56px}.mt-64{margin-top:64px}.mt-72{margin-top:72px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.2vw,28px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
/* Card rows that must never leave a gap at the end of the last row. A grid
with 5 cards in 3 columns, or 3 cards in 2 at tablet width, left a hole
beside the last one; as a wrapping flex row the cards in a short last row
grow to share its full width. The basis subtracts more than the widest gap
so three always fit per row. The per-width counts live in the 980px and
720px blocks below. */
.fill-row{display:flex;flex-wrap:wrap}
.fill-row>*{flex:1 1 calc(33.333% - 30px);min-width:0}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.flex-between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.center{text-align:center}
/* ---------- 33. RESPONSIVE ---------- */
/* The nav collapses to the drawer earlier than the content reflows. With six
top-level items the desktop bar overflows the viewport below ~1120px, and
a horizontal scrollbar on every page is worse than an early hamburger. The
content breakpoints stay at 980px, so these two are deliberately separate;
keep the JS isDesktop() query in sync with the number here. */
@media(max-width:1120px){
.logo-img{height:34px}
:root{--nav-h:68px}
.nav-toggle{display:flex}
/* header.nav carries backdrop-filter, which makes it a containing block for
its own fixed-position descendants — so this drawer's offsets resolve
against the 68px-tall bar, not the viewport. `bottom:0` therefore collapsed
it to ~0 and overflow-y:auto hid the rest of a 474px menu behind a 57px
window. Size it in viewport units instead, which ignore the containing
block. Keep the vh line as the fallback for dvh. */
.nav-links{
position:fixed;top:var(--nav-h);left:0;right:0;overflow-y:auto;
height:calc(100vh - var(--nav-h));
height:calc(100dvh - var(--nav-h));
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
background:var(--navy-900);flex-direction:column;align-items:stretch;gap:0;margin:0;
padding:16px var(--pad) 40px;border-top:1px solid var(--line-dark-2);
transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .26s,transform .26s,visibility .26s;
}
.nav-links.open{transform:none;opacity:1;visibility:visible}
/* The divider belongs to the whole item, not the trigger, so an open
item's sub-links sit inside its own lines rather than below the rule. */
.nav-links>a,.nav-item{border-bottom:1px solid var(--line-dark-2)}
.nav-links>a,.nav-trigger{width:100%;padding:15px 2px;border-radius:0;font-size:17px;justify-content:space-between}
.nav-links>a:hover,.nav-trigger:hover{background:transparent}
.nav-links>a.current::after{display:none}
.nav-item{width:100%}
.nav-menu{
position:static;transform:none;min-width:0;width:100%;opacity:1;visibility:visible;pointer-events:auto;
box-shadow:none;border:0;border-radius:0;background:transparent;backdrop-filter:none;padding:0 0 12px;
display:none;
}
.nav-item.open>.nav-menu{display:block;transform:none}
/* Sub-links: plain indented text on the navy drawer. No boxes, no icons. */
.nav-menu a{padding:9px 2px 9px 16px;border-radius:0;background:transparent}
.nav-menu a:hover{background:transparent}
.nav-menu .mi-t{color:var(--on-dark-dim);font-size:15.5px;font-weight:500;transition:color .2s}
.nav-menu a:hover .mi-t{color:#fff}
.nav-menu .mi-ic{display:none}
.nav-menu .menu-head{display:none}
.nav-actions{margin:22px 0 0;flex-direction:column;align-items:stretch;width:100%;gap:10px}
.nav-actions .btn{width:100%;padding:14px 22px;font-size:15.5px}
}
@media(max-width:1080px){
.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-step:nth-child(2)::after{display:none}
}
@media(max-width:980px){
.hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
.split{grid-template-columns:minmax(0,1fr);gap:36px}
.split-head,.split-aside,.toc{position:static}
.toc{display:none}
.stagger{grid-template-columns:minmax(0,1fr)}
.fill-row>*{flex-basis:calc(50% - 30px)}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.post-feature{grid-template-columns:minmax(0,1fr)}
.post-feature .pf-body{padding:clamp(24px,4vw,36px)}
.post-art{min-height:200px}
.gloss-list{grid-template-columns:minmax(0,1fr)}
/* five link columns as 3 + 2, so no column is left on a row of its own */
.foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
body{font-size:16.5px}
.team-grid,.grid-2,.grid-4,.checks-2{grid-template-columns:minmax(0,1fr)}
.fill-row>*{flex-basis:100%}
.form-row>*{flex-basis:100%}
.bento,.bento.cols-2{grid-template-columns:minmax(0,1fr)}
.flow{grid-template-columns:minmax(0,1fr)}
.flow-step::after{display:none}
.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row-item{grid-template-columns:minmax(0,1fr);gap:10px}
.row-num{padding-top:0}
.row-sol{margin-top:18px;padding:16px 18px 18px}
.acc-a-inner{padding-right:8px}
.foot-top{grid-template-columns:minmax(0,1fr);gap:32px}
.genie-body{padding:18px 16px 22px;min-height:0}
.hero .btn-row .btn,.cta-band .btn-row .btn{width:100%}
.ebook-cover{transform:none}
}
/* 560px, not a ladder step: it is where the byline's role + date stop fitting on
one line. Measured at 314px of content against 265px of room at 480px. Break
them onto their own lines here, before the natural wrap would leave the
separator dangling at the end of the first line. */
@media(max-width:560px){
.byline .bm .bsep{display:none}
.byline .bm time{display:block}
}
/* Article titles only. .h1's clamp bottoms out at 38px below ~613px, so a long
headline was still set at 38px on a 320px phone and ran 335px tall. Keep the
ramp going down instead. Scoped to .article-title so the shorter marketing h1s
on the other page heroes are untouched. */
@media(max-width:620px){
.article-title{font-size:clamp(27px,6.2vw,38px)}
}
@media(max-width:420px){
.stats{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ============================================================
34. WHITE-SURFACE GUARD
A card or panel with an opaque light background can be placed inside a dark
section (a form panel in a dark hero, a table in a dark band). These rules
stop it inheriting light-on-light text. Declared last so they win on order.
============================================================ */
.form-panel,.lcard,.pcard,.qcard,.bio,.flow-step,.tbl-wrap,.acc{color:var(--ink)}
.form-panel .eyebrow,.form-panel .kicker,.lcard .eyebrow,.lcard .kicker,
.pcard .eyebrow,.pcard .kicker,.bio .eyebrow,.bio .kicker,
.flow-step .eyebrow,.flow-step .kicker,.tbl-wrap .eyebrow,.tbl-wrap .kicker,
.acc .eyebrow,.acc .kicker{color:var(--teal-text)}
.form-panel .lead,.lcard .lead,.pcard .lead,.bio .lead,.acc .lead{color:var(--mist-2)}
.form-panel .small,.lcard .small,.pcard .small,.bio .small,.tbl-wrap .small,.acc .small{color:var(--mist)}
.form-panel .link-arrow,.lcard .link-arrow,.pcard .link-arrow,.bio .link-arrow,.acc .link-arrow{color:var(--navy-900)}
:is(.form-panel,.lcard,.pcard,.bio,.acc) .link-arrow .ic-arrow{color:var(--amber-deep)}
.form-panel .checks .ic,.lcard .checks .ic,.acc .checks .ic{color:var(--teal-text)}
.form-panel .chip,.lcard .chip,.pcard .chip,.bio .chip,.tbl-wrap .chip{
border-color:var(--line);color:var(--mist-2);background:rgba(255,255,255,.6)}
.form-panel .chip-amber,.lcard .chip-amber,.pcard .chip-amber,.tbl-wrap .chip-amber{
background:rgba(244,169,40,.16);border-color:rgba(244,169,40,.36);color:var(--amber-text)}
.form-panel .chip-teal,.lcard .chip-teal,.pcard .chip-teal,.tbl-wrap .chip-teal{
background:rgba(14,140,135,.13);border-color:rgba(14,140,135,.3);color:var(--teal-text)}
/* ---------- 34. LIVE FORM STATES ---------- */
/* Error red, dark enough for small type on the paper surfaces. */
:root{
--danger:#A32B1C;
--danger-lt:#F2A79A;
--danger-line:rgba(163,43,28,.4);
--danger-bg:rgba(163,43,28,.07);
}
/* .form is a grid, so the swappable body needs to carry the same gap or the
fields collapse together once they are wrapped. */
.form>[data-role="body"]{display:grid;gap:18px}
/* Honeypot. Deliberately not display:none — plenty of bots skip hidden
inputs, but almost all of them fill an off-screen one. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
/* Invalid field */
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
border-color:var(--danger-line);background:var(--danger-bg);
}
.field.is-invalid input:focus,.field.is-invalid select:focus,.field.is-invalid textarea:focus{
border-color:var(--danger);box-shadow:0 0 0 4px rgba(163,43,28,.13);
}
/* "(optional)" sits inside the label, so it must read quieter than it */
.field .opt{font-weight:500;letter-spacing:0;color:var(--mist)}
.on-dark .field .opt,.cta-dark .field .opt,.panel-dark .field .opt{color:var(--on-dark-dim)}
.form-panel .field .opt{color:var(--mist)}
.field-msg{font-size:12.5px;line-height:1.45;font-weight:500;color:var(--danger)}
.on-dark .field-msg,.on-dark-2 .field-msg,.cta-dark .field-msg,.panel-dark .field-msg{color:var(--danger-lt)}
.form-panel .field-msg{color:var(--danger)}
/* Submit button while the request is in flight */
.btn[aria-busy="true"]{opacity:.72;cursor:progress}
.btn:disabled{opacity:.62;cursor:not-allowed}
.btn[aria-busy="true"]:hover,.btn:disabled:hover{transform:none;box-shadow:none;filter:none}
/* Error banner — the .callout shape, recoloured */
.form-error{
display:flex;gap:14px;padding:18px 20px;border-radius:var(--r);
background:var(--danger-bg);border:1px solid var(--danger-line);
}
.form-error .ic{color:var(--danger);margin-top:2px;flex:none}
.form-error p{font-size:14px;line-height:1.55;color:var(--danger)}
.on-dark .form-error p,.cta-dark .form-error p,.panel-dark .form-error p{color:var(--danger-lt)}
.on-dark .form-error .ic,.cta-dark .form-error .ic,.panel-dark .form-error .ic{color:var(--danger-lt)}
/* Success panel, shown in place of the form body */
.form-done{text-align:center;padding:6px 0 2px}
.form-done .ibox{margin:0 auto}
.form-done h4{margin-top:18px;font-size:21px}
.form-done p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--mist-2)}
.form-panel .form-done p{color:var(--mist-2)}
.on-dark .form-done p,.cta-dark .form-done p,.panel-dark .form-done p{color:var(--on-dark-dim)}
.form-done .btn{margin-top:22px}
.form-done .form-note{margin-top:16px}
/* Gated download: the lock note disappears once the form succeeds */
[data-gate].is-unlocked .gate-locked{display:none}