/* ---- Fonts (CLS fix, 10 Nov 1:40 PM): Google Fonts files (OFL, see assets/fonts/*-OFL.txt) served from this site
   and preloaded in <head>. font-display: optional = the web font is used only if it arrives in the first ~100 ms
   (it is preloaded, so it normally does); otherwise the page keeps the metric-matched fallback for that view, so
   text never swaps mid-page and nothing shifts. Fallbacks are sized to the web fonts (size-adjust + ascent/descent
   overrides measured in Chromium: Inter Tight is ~84% of Arial's width; ascent .97, descent .24). */
@font-face { font-family: 'Inter Tight'; src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: optional; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; src: url(/assets/fonts/instrument-serif-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: optional; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: optional; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'); size-adjust: 84%; ascent-override: 115%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Georgia'), local('Liberation Serif'); size-adjust: 82%; ascent-override: 121%; descent-override: 38%; line-gap-override: 0%; }

/* =====================================================================
   V2.1 (10 Nov 2026) — bold black-and-white base, glass panes, slate accent used sparingly.
   Loaded LAST (after site.css, v2.css, content-v2.css, tool CSS).
   Design tokens below are the contract for other components (e.g. the V2.1 bottom nav):
   use the custom properties, never hard-coded colours.
   site/tests/v21.test.mjs reads the CONTRAST block from this :root and checks WCAG ratios.
   ===================================================================== */
:root {
  /* ---- ink & paper (base) */
  --ink: #0B0B0C;          /* primary text, primary buttons, dark bands */
  --ink-2: #3A3C41;        /* secondary text */
  --ink-3: #44474D;        /* tertiary text, fine print */
  --paper: #FFFFFF;        /* page background */
  --paper-2: #F3F3F1;      /* quiet panel */
  --line: rgba(11, 11, 12, .12);
  --line-strong: rgba(11, 11, 12, .28);
  --on-dark: #FFFFFF;      /* text on --ink */
  --on-dark-2: #C4C6CB;    /* secondary text on --ink */
  --on-dark-3: #9EA1A8;    /* fine print on --ink */
  --c-placeholder: #666666; /* input/textarea placeholder text (5.7:1 on white) */

  /* ---- colour palette: slate anchor + three tints (lilac, mint, peach). Base stays black & white. */
  --c-accent: #355C8A;          /* slate anchor */
  --c-accent-ink: #2A4A70;      /* slate for text/hover fills (white on it 9.0:1) */
  --c-accent-lilac: #B7A6F2;    /* tints: backgrounds, glows, highlights only — never text colour */
  --c-accent-mint: #9FDCC0;
  --c-accent-peach: #F6C39E;
  --c-accent-sky: #A9C4E8;
  --c-accent-lilac-ink: #42329A; /* text-safe tint partners (≥ 4.5:1 on white and on the tints) */
  --c-accent-mint-ink: #1F6049;
  --c-accent-peach-ink: #8A4316;
  --accent: var(--c-accent);
  --accent-ink: var(--c-accent-ink);
  --c-highlight: linear-gradient(transparent 58%, rgba(183, 166, 242, .65) 58%, rgba(183, 166, 242, .65) 92%, transparent 92%);
  --c-text-gradient: linear-gradient(100deg, #0B0B0C 0%, #2A4A70 45%, #42329A 100%); /* darkest stop-to-stop ≥ 4.5:1 on white */

  /* ---- glows behind the glass (soft coloured blurs) */
  --glow-lilac: rgba(183, 166, 242, .85);
  --glow-mint: rgba(159, 220, 192, .85);
  --glow-peach: rgba(246, 195, 158, .85);
  --glow-slate: rgba(53, 92, 138, .55);
  --glow-blur: 60px;

  /* ---- abstract washes behind glass (pastel, never behind text without a pane) */
  --wash-rose: #F8D2BB;   /* peach */
  --wash-sage: #C2E8D6;   /* mint */
  --wash-sky: #C3D5EE;    /* slate tint */
  --wash-lilac: #D6CCF8;  /* lilac */
  --wash-sand: #F6E4CF;
  --wash-darkest: #C3D5EE; /* darkest wash colour: used for contrast checks */

  /* ---- motion tokens (simple; the motion layer may override) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .5s;

  /* ---- glass panes */
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .74);
  --glass-solid: #F7F7F6;              /* opaque fallback (no backdrop-filter / reduced transparency) */
  --glass-border: rgba(255, 255, 255, .75);
  --glass-edge: rgba(11, 11, 12, .10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --glass-shadow: 0 1px 1px rgba(11, 11, 12, .04), 0 28px 56px -32px rgba(11, 11, 12, .38);
  --glass-blur: 18px;
  --glass-saturate: 160%;
  --glass-dark-bg: rgba(16, 17, 20, .62);   /* smoked glass: keeps light text AA over the coloured glows */
  --glass-dark-solid: #1D1E21;
  --glass-dark-border: rgba(255, 255, 255, .16);

  /* ---- pastel tints for industry glass cards (medium opacity over the wash) */
  --tint-rose: rgba(248, 210, 187, .62);   /* peach */
  --tint-sage: rgba(194, 232, 214, .62);   /* mint */
  --tint-sky: rgba(195, 213, 238, .62);    /* slate tint */
  --tint-lilac: rgba(214, 204, 248, .62);  /* lilac */

  /* ---- type */
  --font-display: 'Inter Tight', 'Inter Tight Fallback', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', 'Instrument Serif Fallback', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-text: 'Inter Tight', 'Inter Tight Fallback', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --track-tight: -.045em;
  --track-display: -.035em;

  /* ---- shape */
  --r-pill: 999px; --r-1: 12px; --r-2: 18px; --r-3: 28px;
  --nav-pill-space: 0px; /* the bottom nav sets this so content and footer are never covered */
}

/* ------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }
body.v2 { background: var(--paper); color: var(--ink); font-family: var(--font-text); padding-bottom: var(--nav-pill-space); }
.v2 h1, .v2 h2, .v2 h3, .v2 .display { font-family: var(--font-display); color: var(--ink); letter-spacing: var(--track-display); }
.v2 h1 em, .v2 h2 em, .v2 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.v2 p, .v2 li { color: inherit; }
.v2 :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.v2 a { text-underline-offset: 3px; }
.v2 .lead, .v2-page-sub, .v2-hero-sub, .v2-head-lead, .v2 .cv2-body, .v2 .v2-body { color: var(--ink-2); }
.v2-kicker, .v2 .cv2-kicker, .v2 .eyebrow { font-family: var(--font-text); color: var(--ink); background: none; padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.v2-kicker::before, .v2 .cv2-kicker::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); margin-right: 10px; vertical-align: 1px; }
.v2-fine, .v2 .cv2-fine, .v2 .fine { color: var(--ink-3); }
.v2-link, .v2 .link-arrow { color: var(--ink); font-weight: 700; }
.v2-link:hover, .v2 .link-arrow:hover { color: var(--c-accent-ink); }

/* ------------------------------------------------------------- glass */
.glass,
.v2-chooser, .v2-why li, .v2-ind a, .tool-cards a, .picker-summary, .picker-svc,
.check-loading, .check-state, .check-result, .check-covers li,
.v2-mini-list a, .v2 .cv2-card, .v2 .cv2-pkg, .v2 .cv2-ind a, .v2 .cv2-svc-list a, .v2 .cv2-steps li, .v2 .cv2-note, .v2 .cv2-claims,
.v2-answer, .v2-steps li, .v21-glass, .v2 .faq, .v2 .service-card, .v2 .industry-tile, .v2 .post-card, .v2 .fact-card, .v2 .cv2-art-cta, .v2 .cv2-answer {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
  border-radius: var(--r-2);
}
.glass-dark, .v21-statement .v21-fact, .v2-cta .v21-glass-dark {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-dark-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Fallbacks: opaque panes when blur is unsupported or the visitor asks for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .v2-chooser, .v2-why li, .v2-ind a, .tool-cards a, .picker-summary, .picker-svc, .check-loading, .check-state, .check-result, .check-covers li,
  .v2-mini-list a, .v2 .cv2-card, .v2 .cv2-pkg, .v2 .cv2-ind a, .v2 .cv2-svc-list a, .v2 .cv2-steps li, .v2 .cv2-note, .v2 .cv2-claims,
  .v2-answer, .v2-steps li, .v21-glass, .v2 .faq, .v2 .service-card, .v2 .industry-tile, .v2 .post-card, .v2 .fact-card, .v2 .cv2-art-cta, .v2 .cv2-answer { background: var(--glass-solid); }
  .glass-dark, .v21-statement .v21-fact, .v2-cta .v21-glass-dark { background: var(--glass-dark-solid); }
  .v2 .site-header { background: var(--paper) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .v2-chooser, .v2-why li, .v2-ind a, .tool-cards a, .picker-summary, .picker-svc, .check-loading, .check-state, .check-result, .check-covers li,
  .v2-mini-list a, .v2 .cv2-card, .v2 .cv2-pkg, .v2 .cv2-ind a, .v2 .cv2-svc-list a, .v2 .cv2-steps li, .v2 .cv2-note, .v2 .cv2-claims,
  .v2-answer, .v2-steps li, .v21-glass, .v2 .faq, .v2 .service-card, .v2 .industry-tile, .v2 .post-card, .v2 .fact-card, .v2 .cv2-art-cta, .v2 .cv2-answer {
    background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-dark, .v21-statement .v21-fact, .v2-cta .v21-glass-dark { background: var(--glass-dark-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .v2 .site-header { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ------------------------------------------------------------- abstract wash (the "view" behind the glass) */
.v21-wash, .v2-panel-band, .v2 .cv2-panel, .v2 .band-cream, .v2 .band-soft {
  position: relative; isolation: isolate; background-color: var(--paper-2);
  background-image:
    radial-gradient(38% 55% at 8% 18%, var(--wash-rose) 0%, transparent 70%),
    radial-gradient(34% 50% at 92% 12%, var(--wash-sky) 0%, transparent 72%),
    radial-gradient(40% 60% at 70% 92%, var(--wash-lilac) 0%, transparent 70%),
    radial-gradient(36% 52% at 22% 96%, var(--wash-sage) 0%, transparent 70%);
}
.v21-wash-alt { background-image:
    radial-gradient(42% 60% at 90% 30%, var(--wash-sage) 0%, transparent 70%),
    radial-gradient(36% 56% at 10% 70%, var(--wash-sky) 0%, transparent 72%),
    radial-gradient(30% 46% at 50% 0%, var(--wash-sand) 0%, transparent 70%); }

/* ------------------------------------------------------------- buttons: ink primary, accent only on hover */
.btn-v2 { font-family: var(--font-text); font-weight: 700; letter-spacing: -.01em; min-height: 52px; }
.btn-v2-primary { background: var(--ink); color: var(--on-dark); }
.btn-v2-primary:hover { background: var(--c-accent-ink); color: var(--on-dark); }
.btn-v2-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-v2-ghost:hover { background: var(--ink); color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-v2-light { background: var(--paper); color: var(--ink); }
.btn-v2-light:hover { background: var(--paper-2); color: var(--ink); }
.btn-v2-onDark { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn-v2-onDark:hover { background: var(--paper); color: var(--ink); }
.v2 .btn-primary, .v2 .btn-lime { --bg: var(--ink); --fg: var(--on-dark); --fill: var(--c-accent-ink); --fg-hover: var(--on-dark); --icon-bg: rgba(255,255,255,.16); }
.v2 .btn-ghost { --fg: var(--ink); --fill: var(--ink); --fg-hover: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--ink); }
.v21-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.v21-textlink .i-arrow { width: 17px; height: 17px; }
.v21-textlink:hover { color: var(--c-accent-ink); }

/* ------------------------------------------------------------- header: minimal brand mark, glass bar */
.v2 .site-header, .v2 .site-header.is-scrolled { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line); }
.wordmark-text { font-family: var(--font-display); font-weight: 900; letter-spacing: -.05em; }
.wordmark-w1 .wordmark-text { color: var(--ink); }
.wordmark-w1 .amp, .v2 .site-header .wordmark-w1 .amp { color: var(--c-accent) !important; }
.v2 .nav a { color: var(--ink-2); font-family: var(--font-text); }
.v2 .nav a:hover, .v2 .nav a[aria-current="page"] { color: var(--ink); background: rgba(11,11,12,.06); }
.v2 .menu-toggle { background: rgba(11,11,12,.06); }

/* ------------------------------------------------------------- shared heads */
.v2-section { padding-block: clamp(72px, 9vw, 136px); }
.v2-head h2, .v2 .cv2-h2, .v2 .section-head h2 { font-size: clamp(36px, 5vw, 72px); line-height: .98; letter-spacing: var(--track-tight); font-weight: 800; max-width: 16ch; }
.v2-head-split > div { max-width: 760px; }
.v2-head { max-width: 900px; }

/* ------------------------------------------------------------- HOME hero */
.v21-hero { position: relative; padding: clamp(24px, 3.4vw, 56px) 0 clamp(56px, 7vw, 104px); overflow: hidden; background: var(--paper); }
.v21-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.v21-hero h1 { font-size: clamp(52px, min(6.4vw, 11.5vh), 112px); line-height: .9; letter-spacing: -.055em; font-weight: 900; margin: 0 0 clamp(22px, 2.4vw, 34px); text-wrap: balance; }
.v21-hero h1 em { font-weight: 400; letter-spacing: -.03em; }
.v21-hero-sub { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: var(--ink-2); max-width: 36ch; margin: 0 0 32px; font-weight: 500; }
.v21-hero-sub strong { color: var(--ink); font-weight: 700; }
.v21-hero .v2-actions { align-items: center; gap: 14px; }
.v21-hero-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; color: var(--ink-3); font-size: 15px; }
.v21-window { position: relative; border-radius: var(--r-3); padding: clamp(14px, 2vw, 22px); min-height: 100%; isolation: isolate; overflow: hidden;
  background: conic-gradient(from 210deg at 65% 40%, var(--wash-sky), var(--wash-lilac), var(--wash-rose), var(--wash-sand), var(--wash-sage), var(--wash-sky)); }
.v21-window::before { content: ''; position: absolute; inset: -20%; z-index: -1; background:
  radial-gradient(30% 30% at 20% 25%, rgba(53,92,138,.55), transparent 70%),
  radial-gradient(26% 26% at 85% 75%, rgba(11,11,12,.35), transparent 70%),
  radial-gradient(35% 35% at 70% 15%, rgba(255,255,255,.8), transparent 70%); filter: blur(10px); }
.v21-window svg.v21-orbits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; }
.v21-window .v2-chooser { position: relative; background: var(--glass-bg-strong); box-shadow: var(--glass-highlight), var(--glass-shadow); border-radius: var(--r-2); }
.v21-window .tool-option, .v21-window .tool-fallback a { background: rgba(255,255,255,.7); }
.v21-window .tool-option:hover { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* statement band */
.v21-statement { background: var(--ink); color: var(--on-dark); padding-block: clamp(72px, 10vw, 150px); position: relative; overflow: hidden; isolation: isolate; }
.v21-statement::before { content: ''; position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -18vw; top: -22vw; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(53,92,138,.55), rgba(53,92,138,0) 62%); filter: blur(20px); }
.v21-statement .v2-kicker { color: var(--on-dark); }
.v2 .v21-statement-line { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 7.6vw, 120px); line-height: .92; letter-spacing: -.055em; margin: 0; color: var(--on-dark); max-width: 14ch; }
.v21-statement-line em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--on-dark-2); margin-top: .12em; }
.v21-facts { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v21-fact { border-radius: var(--r-2); padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 6px; }
.v21-fact strong { font-family: var(--font-display); font-size: clamp(64px, 8vw, 128px); line-height: .85; font-weight: 900; letter-spacing: -.06em; color: var(--on-dark); }
.v21-fact span { color: var(--on-dark-2); font-size: 16px; max-width: 22ch; }
.v21-facts-note { margin: 22px 0 0; color: var(--on-dark-2); font-size: 15.5px; max-width: 70ch; }

/* why cards */
.v2-why { gap: 18px; }
.v2-why li { padding: clamp(24px, 2.6vw, 34px); }
.v2-why-n, .v2-svc-n, .v2-chooser-n, .picker-n, .v2 .cv2-num { color: var(--ink); font-family: var(--font-display); }
.v2-why h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
.v2-why p { color: var(--ink-2); }

/* industries: pastel glass tints, NO coloured strips */
.v2-industries { gap: 16px; }
.v2-ind a { position: relative; color: var(--ink); border-radius: var(--r-2); }
.v2-ind-rose a { background: var(--tint-rose); } .v2-ind-sage a { background: var(--tint-sage); }
.v2-ind-slate a { background: var(--tint-sky); } .v2-ind-violet a { background: var(--tint-lilac); }
.v2-ind-body { padding: clamp(22px, 2.4vw, 30px); gap: 12px; }
.v2-ind-name { font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.v2-ind-text { color: var(--ink-2); }
.v2-ind .v2-tag { background: rgba(255,255,255,.7); color: var(--ink); }
.v2-ind a:hover { transform: translateY(-4px); }
.v2-ind-band, .cv2-band { display: none !important; }

/* services editorial list */
.v2-services { border-top: 2px solid var(--ink); gap: 0 56px; }
.v2-services li { border-bottom: 1px solid var(--line-strong); }
.v2-services a { padding: 26px 4px; grid-template-columns: 64px 1fr auto; }
.v2-svc-n { font-size: 15px; font-weight: 800; }
.v2-svc-t strong { font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -.035em; }
.v2-svc-t span { color: var(--ink-2); }
.v2-svc-go { color: var(--ink); }
.v2-services a:hover strong { color: var(--c-accent-ink); }

/* big numbered "how we work" */
.v21-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.v21-steps li { padding: 28px 24px 8px 0; display: grid; align-content: start; gap: 10px; }
.v21-steps li + li { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.v21-step-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(80px, 10vw, 168px); line-height: .8; letter-spacing: -.07em; color: var(--ink); }
.v21-steps li:nth-child(even) .v21-step-n { color: var(--ink-3); }
.v21-steps h3 { font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -.03em; margin: 12px 0 0; }
.v21-steps p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* editorial pull line */
.v21-pull { padding-block: clamp(72px, 9vw, 140px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v21-pull figure { margin: 0; display: grid; gap: 22px; }
.v21-pull blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 6.4vw, 104px); line-height: 1; letter-spacing: -.025em; color: var(--ink); max-width: 18ch; text-wrap: balance; }
.v21-pull blockquote p::before { content: '“'; color: var(--c-accent); }
.v21-pull blockquote p::after { content: '”'; color: var(--c-accent); }
.v21-pull figcaption { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* tools section (secondary): checker pane + cards */
.v21-tools-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; }
.v21-check-pane { border-radius: var(--r-3); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.v21-check-pane h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -.045em; margin: 0; }
.v21-check-pane p { margin: 0; color: var(--ink-2); }
.v2-check-row { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.v2-check-row:focus-within { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px rgba(53,92,138,.25); }
.v2-check-row .btn-v2-light { background: var(--ink); color: var(--on-dark); }
.v2-check-row .btn-v2-light:hover { background: var(--c-accent-ink); }
.v21-tools-grid .tool-cards { grid-template-columns: 1fr 1fr; }
.tool-cards a { color: var(--ink); }
.tool-cards strong { font-family: var(--font-display); letter-spacing: -.035em; font-size: 22px; }
.tool-cards span:not(.v2-tag):not(.v2-link) { color: var(--ink-2); }
.v2-tag { background: rgba(11,11,12,.07); color: var(--ink); }
.v2-tag-quiet { background: rgba(11,11,12,.07); color: var(--ink); }

/* closing CTA: black band */
.v2-cta { background: var(--ink); color: var(--on-dark); border-top: 0; padding-block: clamp(80px, 10vw, 160px); position: relative; overflow: hidden; isolation: isolate; }
.v2-cta::before { content: ''; position: absolute; z-index: -1; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(53,92,138,.45), transparent 70%); filter: blur(30px); }
.v2-cta .v2-kicker { color: var(--on-dark); }
.v2 .v2-cta h2 { color: var(--on-dark); font-size: clamp(44px, 7vw, 112px); line-height: .92; letter-spacing: -.055em; font-weight: 900; max-width: 15ch; }
.v2-cta h2 em { color: var(--on-dark-2); }
.v2-cta-text { color: var(--on-dark-2); font-size: 19px; }
.v2-cta .btn-v2-primary { background: var(--paper); color: var(--ink); }
.v2-cta .btn-v2-primary:hover { background: var(--paper-2); color: var(--ink); }
.v2-cta .btn-v2-ghost { color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); background: transparent; }
.v2-cta .btn-v2-ghost:hover { background: var(--paper); color: var(--ink); }
.v2-cta .v21-cta-tool { margin: 26px 0 0; color: var(--on-dark-2); font-size: 15px; }
.v2-cta .v21-cta-tool a { color: var(--on-dark); font-weight: 700; }

/* footer */
.v2-footer .footer-body { background: var(--ink); }
.v2-footer .foot-brand p { color: var(--on-dark-2); }
.v2-footer .foot-col h2, .v2-footer .footer-legal { color: var(--on-dark-3); }
.v2-footer .foot-col a, .v2-footer .footer-legal a, .v2-footer .to-top { color: var(--on-dark); }
.v2-footer .foot-mail { color: var(--on-dark); }
.signup-dark .signup-note, .signup-dark .signup-row input::placeholder { color: var(--on-dark-3); }
.v21-footer-mark { font-family: var(--font-display); font-weight: 900; letter-spacing: -.065em; font-size: clamp(64px, 15vw, 248px); line-height: .8; color: var(--on-dark); margin: clamp(32px, 4vw, 56px) 0 0; white-space: nowrap; overflow: hidden; }
.v21-footer-mark .amp { color: var(--c-accent-lilac); }

/* ------------------------------------------------------------- inner pages */
.v2-page-hero, .v2 .page-hero, .v2 .cv2-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 96px) 0 clamp(44px, 6vw, 88px); }
.v2-page-hero h1, .v2 .page-hero h1, .v2 .cv2-hero h1, .v2 .page-hero .display { font-size: clamp(44px, 6.6vw, 104px); line-height: .92; letter-spacing: -.055em; font-weight: 900; max-width: 15ch; text-wrap: balance; }
.v2 .cv2-industry .cv2-hero h1 { max-width: 18ch; }
.v2-page-sub, .v2 .page-hero .lead, .v2 .cv2-hero .lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); }
.v2 .crumbs ol, .v2 .crumbs a { color: var(--ink-3); }
.v2 .cv2-tags li, .v2 .cv2-tags-acc li, .v2 .cv2-tags-acc li:first-child { background: rgba(11,11,12,.06); border: 0; color: var(--ink); }
.v2 .cv2-tags-acc li:first-child { background: var(--ink); color: var(--on-dark); }
.v2 .cv2-month { background: rgba(11,11,12,.07); color: var(--ink); border-left: 0; box-shadow: none; padding-left: 10px; }
.v2 .cv2-ind-tag { background: rgba(255,255,255,.8); color: var(--ink); }
.v2 .cv2-ind.cv2-acc-rose a { background: var(--tint-rose); } .v2 .cv2-ind.cv2-acc-sage a { background: var(--tint-sage); }
.v2 .cv2-ind.cv2-acc-slate a { background: var(--tint-sky); } .v2 .cv2-ind.cv2-acc-violet a { background: var(--tint-lilac); }
.v2 .cv2-steps li { border-top: 0; border-radius: var(--r-2); }
.v2 .cv2-claims { border-left: 1px solid var(--glass-border); }
.v2 .cv2-check, .v2 .cv2-num { color: var(--ink); }
.v2 .cv2-pkg-own { border-style: dashed; border-color: var(--ink); }
.v2 .cv2-pkg-own .link-arrow { color: var(--ink); }
.v2 .cv2-promise { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.015em; }
.v2 .cv2-promise-k { font-family: var(--font-text); font-style: normal; color: var(--ink-2); }
.v2-answer, .v2 .cv2-answer { border-left: 1px solid var(--glass-border); }
.v2-numbered li::before { background: var(--ink); color: var(--on-dark); }
.v2 .cv2-prose a, .v2 .cv2-sources a { color: var(--c-accent-ink); }
.v2 .industry-tile, .v2 .service-card { color: var(--ink); }
.v2 .industry-tile .industry-dot { display: none; }
.v2 .industry-rose.industry-tile { background: var(--tint-rose); } .v2 .industry-sage.industry-tile { background: var(--tint-sage); }
.v2 .industry-slate.industry-tile { background: var(--tint-sky); } .v2 .industry-violet.industry-tile { background: var(--tint-lilac); }
.v2 .industry-tile::before, .v2 .industry-tile::after { display: none !important; }

/* tools */
.tool-progress span, .check-bar span, .check-steps li.is-done::before, .picker-head input:checked + .picker-check, .picker-opts input:checked + span { background: var(--ink); border-color: var(--ink); }
.check-form { background: var(--ink); }
.picker-svc.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--glass-bg-strong); }
.gantt-f { background: var(--ink); } .gantt-b { background: var(--c-accent); } .gantt-c { background: #6E7F95; }
.k-f::before { background: var(--ink); } .k-b::before { background: var(--c-accent); } .k-c::before { background: #6E7F95; }
.tool-option-ind { padding-top: 16px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .v21-steps { grid-template-columns: repeat(2, 1fr); }
  .v21-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .v21-hero-grid, .v21-tools-grid { grid-template-columns: 1fr; }
  .v21-facts { grid-template-columns: 1fr; }
  .v21-tools-grid .tool-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .v21-steps { grid-template-columns: 1fr; }
  .v21-steps li, .v21-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .v21-steps li:first-child { border-top: 0; }
  .v21-hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .v21-hero .v2-actions .btn-v2 { flex: 1 1 100%; }
  .v2-services a { grid-template-columns: 40px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-ind a, .tool-cards a, .btn-v2 { transition: none !important; transform: none !important; }
}

/* ================================================================ COLOUR PASS (12:55) */
/* glows behind glass: every wash section and the hero window get soft coloured blurs */
.v21-glow { position: relative; isolation: isolate; }
.v21-glow::after, .v2-panel-band::after, .v2 .cv2-panel::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 10% 15%;
  background: radial-gradient(40% 50% at 25% 40%, var(--glow-lilac), transparent 70%), radial-gradient(35% 45% at 75% 60%, var(--glow-mint), transparent 70%), radial-gradient(30% 40% at 55% 20%, var(--glow-peach), transparent 70%);
  filter: blur(var(--glow-blur)); opacity: .55; }
/* typography accents (sparingly) */
.v21-mark { background: var(--c-highlight); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v21-grad { background: var(--c-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .v21-grad { color: var(--c-accent-ink); -webkit-text-fill-color: currentColor; background: none; } }
@media (forced-colors: active) { .v21-grad { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }
/* section transitions: a thin tri-colour seam between sections */
.v21-seam { height: 4px; border: 0; margin: 0; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-lilac), var(--c-accent-mint), var(--c-accent-peach)); }
/* colour-shifting hovers (token-based) */
.btn-v2, .v2-link, .v21-textlink, .tool-cards a, .v2-ind a, .v2-why li, .v2-mini-list a, .v2 .cv2-ind a, .v2 .cv2-svc-list a, .v2-services a, .v2 .nav a {
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.btn-v2-primary:hover { background: var(--c-accent); color: var(--on-dark); box-shadow: 0 10px 30px -10px var(--glow-slate); }
.btn-v2-ghost:hover { background: var(--c-accent-lilac); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.v2-cta .btn-v2-primary:hover { background: var(--c-accent-mint); color: var(--ink); }
.v2-cta .btn-v2-ghost:hover { background: var(--c-accent-peach); color: var(--ink); box-shadow: none; }
.v2-link:hover, .v2 .link-arrow:hover, .v21-textlink:hover { color: var(--c-accent-lilac-ink); }
.tool-cards li:nth-child(4n+1) a:hover { background: var(--tint-lilac); }
.tool-cards li:nth-child(4n+2) a:hover { background: var(--tint-sage); }
.tool-cards li:nth-child(4n+3) a:hover { background: var(--tint-rose); }
.tool-cards li:nth-child(4n+4) a:hover { background: var(--tint-sky); }
.v2-why li:nth-child(1) { background: linear-gradient(160deg, var(--tint-lilac), var(--glass-bg) 60%); }
.v2-why li:nth-child(2) { background: linear-gradient(160deg, var(--tint-sage), var(--glass-bg) 60%); }
.v2-why li:nth-child(3) { background: linear-gradient(160deg, var(--tint-rose), var(--glass-bg) 60%); }
.v2-ind a:hover { box-shadow: var(--glass-highlight), 0 0 0 1.5px var(--ink), 0 30px 60px -30px var(--glow-slate); }
.v2-services li:nth-child(4n+1) a:hover { background: linear-gradient(90deg, var(--tint-lilac), transparent); }
.v2-services li:nth-child(4n+2) a:hover { background: linear-gradient(90deg, var(--tint-sage), transparent); }
.v2-services li:nth-child(4n+3) a:hover { background: linear-gradient(90deg, var(--tint-rose), transparent); }
.v2-services li:nth-child(4n+4) a:hover { background: linear-gradient(90deg, var(--tint-sky), transparent); }
.v2-mini-list a:hover, .v2 .cv2-svc-list a:hover { background: var(--tint-lilac); border-color: var(--glass-border); }
.v21-steps li:nth-child(1) .v21-step-n { color: var(--ink); }
.v21-steps li:nth-child(3) .v21-step-n { background: var(--c-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v21-statement::after { content: ''; position: absolute; z-index: -1; width: 40vw; height: 40vw; left: -12vw; bottom: -18vw; border-radius: 50%; background: radial-gradient(circle, rgba(183,166,242,.35), transparent 65%); filter: blur(30px); }
.v21-fact:nth-child(1) { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 var(--c-accent-lilac); }
.v21-fact:nth-child(2) { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 var(--c-accent-mint); }
.v21-fact:nth-child(3) { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 var(--c-accent-peach); }
.v21-pull { position: relative; isolation: isolate; overflow: hidden; }
.v21-pull::before { content: ''; position: absolute; z-index: -1; right: -10%; top: 10%; width: 50%; height: 80%; background: radial-gradient(closest-side, var(--glow-peach), transparent), radial-gradient(closest-side at 30% 70%, var(--glow-lilac), transparent); filter: blur(var(--glow-blur)); opacity: .5; }
@media (prefers-reduced-transparency: reduce) { .v21-glow::after, .v2-panel-band::after, .v2 .cv2-panel::after, .v21-pull::before { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .btn-v2, .v2-link, .tool-cards a, .v2-ind a, .v2-why li, .v2-mini-list a, .v2-services a { transition: none !important; } }
/* chooser industry options: pastel tints, no strips */
.tool-option.v2-ind-rose { background: var(--tint-rose); } .tool-option.v2-ind-sage { background: var(--tint-sage); }
.tool-option.v2-ind-slate { background: var(--tint-sky); } .tool-option.v2-ind-violet { background: var(--tint-lilac); }
.tool-option-ind { padding-top: 16px; }
/* eval fixes (V21-E 12:58) */
.v21-check-pane label { color: var(--ink); }
.v2 .tq-nav button:disabled, .v2 .tq-email button:disabled { opacity: 1; background: var(--paper-2); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* V2.1 bottom pill nav (V21-N) tuned to the V2.1 tokens */
html:root { --nv-ease: var(--ease-out); --nv-dur: var(--dur-4); --nv-spacer-bg: var(--ink); --nv-ink: var(--ink); --nv-ink-2: var(--ink-2); --nv-accent: var(--c-accent); }
.v2 .contact-hero h1, .v2 .contact-hero .display { font-size: clamp(40px, 4.4vw, 68px); max-width: 13ch; }
.v2 .service-card .blob, .v2 .service-card svg:not(.i-arrow) { display: none; }
/* quiz + plan tools and legacy process steps: glass over a wash, no top strips */
.v2 .tq-card, .v2 .tq-rubric, .v2 .tq-month, .v2 .process-step {
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border); border-top-width: 1px; border-top-color: var(--glass-border);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--glass-shadow); border-radius: var(--r-2); }
.v2 .tq-month:nth-child(3n+1) { background: var(--tint-lilac); } .v2 .tq-month:nth-child(3n+2) { background: var(--tint-sage); } .v2 .tq-month:nth-child(3n+3) { background: var(--tint-rose); }
.v2 .v2-section:has(.tq-card), .v2 .section.process { position: relative; isolation: isolate; background-color: var(--paper-2);
  background-image: radial-gradient(38% 55% at 8% 18%, var(--wash-rose) 0%, transparent 70%), radial-gradient(34% 50% at 92% 12%, var(--wash-sky) 0%, transparent 72%), radial-gradient(40% 60% at 70% 92%, var(--wash-lilac) 0%, transparent 70%); }
.v2 .process-step:hover { transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .v2 .tq-card, .v2 .tq-rubric, .v2 .tq-month, .v2 .process-step { background: var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce) { .v2 .tq-card, .v2 .tq-rubric, .v2 .tq-month, .v2 .process-step { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.v2 [class^="tq-"] .v2-kicker, .v2 .tq-step-label, .v2 .tq-area { color: var(--ink); }
.v2 .tq-count, .v2 .tq-pts, .v2 .tq-link { color: var(--ink); }
.v2 .tq-pts { background: rgba(255,255,255,.8); }
.v2 .tq-score { background: var(--c-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .v2 .tq-score { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }
/* colour: inner-page heroes get a soft glow on the right (industry pages use their own tint) */
.v2-page-hero, .v2 .page-hero, .v2 .cv2-hero { position: relative; isolation: isolate; overflow: hidden; --hero-glow-a: var(--glow-lilac); --hero-glow-b: var(--glow-mint); --hero-glow-c: var(--glow-peach); }
.v2-page-hero::before, .v2 .page-hero::before, .v2 .cv2-hero::before { content: ''; position: absolute; z-index: -1; pointer-events: none; right: -6%; top: 0; width: 55%; height: 100%;
  background: radial-gradient(40% 40% at 40% 45%, var(--hero-glow-a), transparent 70%), radial-gradient(35% 35% at 70% 65%, var(--hero-glow-b), transparent 70%), radial-gradient(30% 30% at 75% 25%, var(--hero-glow-c), transparent 70%);
  filter: blur(var(--glow-blur)); opacity: .55; }
.v2 .cv2-acc-rose .cv2-hero { --hero-glow-a: var(--glow-peach); --hero-glow-b: var(--wash-rose); --hero-glow-c: var(--glow-lilac); }
.v2 .cv2-acc-sage .cv2-hero { --hero-glow-a: var(--glow-mint); --hero-glow-b: var(--wash-sage); --hero-glow-c: var(--wash-sky); }
.v2 .cv2-acc-slate .cv2-hero { --hero-glow-a: var(--wash-sky); --hero-glow-b: var(--glow-lilac); --hero-glow-c: var(--glow-mint); }
.v2 .cv2-acc-violet .cv2-hero { --hero-glow-a: var(--glow-lilac); --hero-glow-b: var(--wash-lilac); --hero-glow-c: var(--wash-sky); }
@media (prefers-reduced-transparency: reduce) { .v2-page-hero::before, .v2 .page-hero::before, .v2 .cv2-hero::before { opacity: .3; } }
@media (max-width: 700px) { .v2-page-hero::before, .v2 .page-hero::before, .v2 .cv2-hero::before { width: 90%; right: -40%; opacity: .4; } }
.v2 .nv-masthead .amp, .v2 .wordmark-w1 .amp { color: var(--c-accent) !important; }
@media (max-width: 900px) { .v21-facts { grid-template-columns: repeat(3, 1fr); gap: 10px; } .v21-fact { padding: 16px 14px; } .v21-fact strong { font-size: clamp(48px, 13vw, 80px); } .v21-fact span { font-size: 13.5px; } }
/* placeholders: AA on white inputs site-wide (contact + tool forms); dark sign-up keeps --on-dark-3 */
.v2 input::placeholder, .v2 textarea::placeholder { color: var(--c-placeholder); opacity: 1; }
.v2 .signup-dark .signup-row input::placeholder { color: var(--on-dark-3); opacity: 1; }
/* ---- CLS fix: reserve big display blocks (line counts at each width, in em of their own size) */
.v21-hero h1 { min-height: 3.6em; }                        /* 4 lines × .9 */
.v2 .v21-statement-line { min-height: 3.68em; }            /* 4 lines × .92 */
@media (max-width: 600px) { .v21-hero h1 { min-height: 3.6em; } .v2 .v21-statement-line { min-height: 4.6em; } }
.v21-step-n { display: block; height: .8em; }              /* one line, fixed */
.v21-footer-mark { height: .8em; }
/* ---- CLS fix: nav pill keeps its width when the script swaps the no-JS links for the menu buttons (chevron space reserved) */
@media (min-width: 721px) { .nv-top-link::after { content: ''; flex: none; width: 14px; height: 14px; } }
/* ---- Hover contrast fix (V21-E eval iii, 1:49 PM): legacy .btn buttons use --bg/--fg at rest and --fill/--fg-hover on
   hover/focus. Older industry-page rules (body[class*="industry-"] .btn-ghost { --fill:#F4F3F1 }) out-ranked the V2.1
   values and left white hover text on a near-white fill. These win everywhere (0,2,2) and every pair is AA (tested). */
html body.v2 .btn, html body.v2 .btn-primary, html body.v2 .btn-lime, html body.v2 .btn-peach { --bg: var(--ink); --fg: var(--on-dark); --fill: var(--c-accent); --fg-hover: var(--on-dark); }
html body.v2 .btn-ghost { --bg: transparent; --fg: var(--ink); --fill: var(--c-accent-lilac); --fg-hover: var(--ink); }
html body.v2 .btn-ghost-light { --bg: transparent; --fg: var(--on-dark); --fill: var(--paper); --fg-hover: var(--ink); }
html body.v2 .btn:focus-visible { color: var(--fg-hover); }
html body.v2 .btn:focus-visible .btn-fill { transform: translate(-50%, -50%) scale(1); }
/* ---- Tint blur (V21-E eval 2, 2:32 PM): every pastel-tinted card/button is frosted glass, i.e. pastel tint +
   medium opacity + backdrop blur. Most tinted cards are already in the glass list above; these were not. */
.tool-option, .v2-services a, .nv-tile {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
/* Solid fallbacks: the same pastel, composited onto an opaque base (no see-through without blur). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tool-option { background-color: var(--glass-solid); }
  .tool-option.v2-ind-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  .tool-option.v2-ind-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  .tool-option.v2-ind-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  .tool-option.v2-ind-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
  .nv-tile { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.1)), linear-gradient(var(--nv-tint), var(--nv-tint)), var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .tool-option, .v2-services a, .nv-tile { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tool-option { background-color: var(--glass-solid); }
  .tool-option.v2-ind-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  .tool-option.v2-ind-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  .tool-option.v2-ind-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  .tool-option.v2-ind-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
  .nv-tile { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.1)), linear-gradient(var(--nv-tint), var(--nv-tint)), var(--glass-solid); }
}
/* Opaque fallbacks that out-rank the tint rules (and the nav stylesheet, which loads after this file). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.v2 .v2-ind-rose a, html body.v2 .cv2-ind.cv2-acc-rose a, html body.v2 .industry-rose.industry-tile, html body.v2 .tool-option.v2-ind-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  html body.v2 .v2-ind-sage a, html body.v2 .cv2-ind.cv2-acc-sage a, html body.v2 .industry-sage.industry-tile, html body.v2 .tool-option.v2-ind-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  html body.v2 .v2-ind-slate a, html body.v2 .cv2-ind.cv2-acc-slate a, html body.v2 .industry-slate.industry-tile, html body.v2 .tool-option.v2-ind-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  html body.v2 .v2-ind-violet a, html body.v2 .cv2-ind.cv2-acc-violet a, html body.v2 .industry-violet.industry-tile, html body.v2 .tool-option.v2-ind-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
  html body.v2 .v21-window .tool-option:not([class*="v2-ind-"]), html body.v2 .tool-option:not([class*="v2-ind-"]) { background: var(--glass-solid); }
  html body.v2 .nv .nv-tile { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.1)), linear-gradient(var(--nv-tint), var(--nv-tint)), var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html body.v2 .v2-ind-rose a, html body.v2 .cv2-ind.cv2-acc-rose a, html body.v2 .industry-rose.industry-tile, html body.v2 .tool-option.v2-ind-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  html body.v2 .v2-ind-sage a, html body.v2 .cv2-ind.cv2-acc-sage a, html body.v2 .industry-sage.industry-tile, html body.v2 .tool-option.v2-ind-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  html body.v2 .v2-ind-slate a, html body.v2 .cv2-ind.cv2-acc-slate a, html body.v2 .industry-slate.industry-tile, html body.v2 .tool-option.v2-ind-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  html body.v2 .v2-ind-violet a, html body.v2 .cv2-ind.cv2-acc-violet a, html body.v2 .industry-violet.industry-tile, html body.v2 .tool-option.v2-ind-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
  html body.v2 .v21-window .tool-option:not([class*="v2-ind-"]), html body.v2 .tool-option:not([class*="v2-ind-"]) { background: var(--glass-solid); }
  html body.v2 .nv .nv-tile { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.1)), linear-gradient(var(--nv-tint), var(--nv-tint)), var(--glass-solid); }
  html body.v2 .nv .nv-tile, html body.v2 .tool-option { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ================================================================ OVERVIEW PAGES (2:55 PM): services, industries,
   about, how we work, work — the home page's display type, design moments and glass, on every overview page. */
.v21-over-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); padding: clamp(28px, 4vw, 64px) 0 clamp(56px, 7vw, 104px); }
.v21-over-hero::before { content: ''; position: absolute; z-index: -1; pointer-events: none; right: -6%; top: 0; width: 55%; height: 100%;
  background: radial-gradient(40% 40% at 40% 45%, var(--glow-lilac), transparent 70%), radial-gradient(35% 35% at 70% 65%, var(--glow-mint), transparent 70%), radial-gradient(30% 30% at 75% 25%, var(--glow-peach), transparent 70%);
  filter: blur(var(--glow-blur)); opacity: .5; }
.v21-over-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.v21-over-grid:not(:has(.v21-over-art)) { grid-template-columns: minmax(0, 1fr); }
.v21-over-hero h1 { font-family: var(--font-display); font-size: clamp(48px, min(7.2vw, 12vh), 120px); line-height: .9; letter-spacing: -.055em; font-weight: 900; margin: 0 0 clamp(20px, 2.2vw, 30px); max-width: 14ch; text-wrap: balance; min-height: 1.8em; }
.v21-over-hero h1 em { font-weight: 400; letter-spacing: -.03em; }
.v21-over-sub { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--ink-2); max-width: 46ch; margin: 0 0 30px; font-weight: 500; }
.v21-over-hero .v2-actions { gap: 14px; }
.v21-art-window { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-3); overflow: hidden; isolation: isolate;
  background: conic-gradient(from 210deg at 60% 40%, var(--wash-sky), var(--wash-lilac), var(--wash-rose), var(--wash-sand), var(--wash-sage), var(--wash-sky)); }
.v21-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.v21-art-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; border-radius: var(--r-1); font-weight: 700; color: var(--ink);
  background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); }

/* services: editorial index */
.v21-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.v21-index li { border-bottom: 1px solid var(--line-strong); }
.v21-index a { display: grid; grid-template-columns: clamp(64px, 9vw, 140px) 1fr auto; gap: 8px 24px; align-items: center; padding: clamp(18px, 2.2vw, 28px) 6px; color: var(--ink); text-decoration: none;
  transition: background-color var(--dur) var(--ease-out); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
.v21-index-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 6vw, 96px); line-height: .85; letter-spacing: -.06em; color: var(--ink); }
.v21-index li:nth-child(even) .v21-index-n { color: var(--ink-3); }
.v21-index-t { display: grid; gap: 6px; }
.v21-index-t strong { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 44px); line-height: 1; letter-spacing: -.045em; font-weight: 800; }
.v21-index-t span { color: var(--ink-2); font-size: 16.5px; max-width: 56ch; }
.v21-index-go { display: inline-flex; color: var(--ink); } .v21-index-go .i-arrow { width: 26px; height: 26px; transition: transform var(--dur) var(--ease-out); }
.v21-index li:nth-child(4n+1) a:hover { background: var(--tint-lilac); } .v21-index li:nth-child(4n+2) a:hover { background: var(--tint-sage); }
.v21-index li:nth-child(4n+3) a:hover { background: var(--tint-rose); } .v21-index li:nth-child(4n+4) a:hover { background: var(--tint-sky); }
.v21-index a:hover .v21-index-go .i-arrow { transform: translateX(4px); }

/* statement band variants */
.v2 .v21-statement-md { font-size: clamp(38px, 5.6vw, 88px); max-width: 18ch; }
.v21-fact strong.v21-fact-t { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.v21-dark-links .v21-fact { padding: 0; }
.v21-dark-links .v21-fact a { display: grid; gap: 8px; height: 100%; padding: clamp(20px, 2.4vw, 32px); color: var(--on-dark); text-decoration: none; border-radius: inherit; }
.v21-dark-links .v21-fact a:hover .v21-fact-t, .v21-dark-links .v21-fact a:focus-visible .v21-fact-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* industries: pastel glass windows */
.v21-windows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v21-window-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px clamp(20px, 2vw, 26px); border-radius: var(--r-3); color: var(--ink);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
.v21-window-card.v21-tint-rose { background: var(--tint-rose); } .v21-window-card.v21-tint-sage { background: var(--tint-sage); }
.v21-window-card.v21-tint-slate { background: var(--tint-sky); } .v21-window-card.v21-tint-violet { background: var(--tint-lilac); }
.v21-window-card > :not(.v21-window-art) { margin-left: 8px; margin-right: 8px; }
.v21-window-art { position: relative; aspect-ratio: 5 / 3; border-radius: calc(var(--r-3) - 8px); overflow: hidden; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px var(--glass-border); }
.v21-window-n { position: absolute; left: 14px; bottom: 6px; font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -.06em; color: var(--ink); }
.v21-window-card .v2-tag { margin: 4px 8px 0; background: rgba(255,255,255,.75); }
.v21-window-name { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -.05em; font-weight: 800; }
.v21-window-name a { color: var(--ink); text-decoration: none; }
.v21-window-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.v21-window-text { margin: 0; color: var(--ink-2); flex: 1; }
.v21-window-links { margin: 6px 8px 0; display: grid; gap: 10px; }

/* shared two-column + note + empty state */
.v21-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px 64px; align-items: start; }
.v21-note { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-2); }
.v21-note p { margin: 0 0 12px; color: var(--ink); font-size: 17px; line-height: 1.6; } .v21-note p:last-child { margin-bottom: 0; }
.v21-empty { display: grid; grid-template-columns: minmax(160px, .5fr) 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(20px, 3vw, 40px); border-radius: var(--r-3); }
.v21-empty-art { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: conic-gradient(from 120deg, var(--wash-sky), var(--wash-lilac), var(--wash-rose), var(--wash-sage), var(--wash-sky)); }
.v21-empty h2 { font-size: clamp(32px, 4vw, 60px); line-height: .98; letter-spacing: -.05em; margin: 0 0 12px; }
.v21-empty p { color: var(--ink-2); margin: 0; max-width: 54ch; }

@media (max-width: 1080px) { .v21-windows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .v21-over-grid, .v21-two, .v21-empty { grid-template-columns: minmax(0, 1fr); }
  .v21-over-art { max-width: 420px; }
  .v21-art-window { aspect-ratio: 16 / 9; }
  .v21-empty-art { max-width: 200px; }
}
@media (max-width: 600px) {
  .v21-windows { grid-template-columns: minmax(0, 1fr); }
  .v21-over-hero h1 { font-size: clamp(44px, 12.5vw, 64px); }
  .v21-over-hero .v2-actions .btn-v2 { flex: 1 1 100%; }
  .v21-index a { grid-template-columns: 52px 1fr auto; gap: 6px 12px; }
}
/* tinted windows: opaque fallbacks (same pattern as the other tinted glass) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.v2 .v21-window-card.v21-tint-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  html body.v2 .v21-window-card.v21-tint-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  html body.v2 .v21-window-card.v21-tint-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  html body.v2 .v21-window-card.v21-tint-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
  .v21-art-caption { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html body.v2 .v21-window-card.v21-tint-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  html body.v2 .v21-window-card.v21-tint-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  html body.v2 .v21-window-card.v21-tint-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  html body.v2 .v21-window-card.v21-tint-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
  .v21-window-card, .v21-index a, .v21-art-caption { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .v21-art-caption { background: var(--glass-solid); }
  .v21-over-hero::before { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) { .v21-index a, .v21-index-go .i-arrow { transition: none !important; } }
/* overview pages: statement headlines are 2 lines on desktop, so reserve 2 (not the home page's 4) */
.v2.v21-overview .v21-statement-line { min-height: 1.84em; }
.v2.v21-overview .v21-statement-line.v21-statement-md { min-height: 1.84em; }
@media (max-width: 600px) { .v2.v21-overview .v21-statement-line { min-height: 0; } }
@media (max-width: 900px) { .v2.v21-overview .v21-facts { grid-template-columns: minmax(0, 1fr); } .v2.v21-overview .v21-fact { padding: 18px 20px; } }
/* ---- Overview hover contrast (V21-E 3:08 PM): the motion layer's pointer-follow glow lightens a pane under the
   cursor, so hovered text must not rely on the resting background.
   Dark tiles: the description goes from --on-dark-2 to --on-dark while the tile is hovered or focused.
   Light tinted windows / glass notes: links stay ink on hover (underline thickens), never the lilac-ink hover colour. */
.v21-fact:hover span, .v21-fact:focus-within span, .v21-dark-links .v21-fact a:hover span, .v21-dark-links .v21-fact a:focus-visible span { color: var(--on-dark); }
.v21-window-card a:hover, .v21-window-card a:focus-visible, .v21-note a:hover, .v21-note a:focus-visible, .v21-glass a:hover, .v21-glass a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ================================================================ MOBILE / TABLET POLISH (4:22 PM) */
/* Typography: no one-word last lines in big headings; nicer paragraph rag. */
.v2 h1, .v2 h2, .v2 h3, .v2 .display, .v2 .v21-statement-line, .v2 .v21-index-t strong { text-wrap: balance; }
.v2 p, .v2 li { text-wrap: pretty; }
/* Tap targets: footer "Back to top" was 40px tall; hover joins the V2.1 palette (was legacy lime). */
.v2 .to-top { min-height: 44px; padding: 10px 18px; }
.v2 .v2-footer .to-top:hover, .v2 .v2-footer .to-top:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: none; }
/* Programmatic focus targets (tool results, headings, main) don't draw a page-wide ring; real controls keep theirs. */
.v2 [tabindex="-1"]:focus, .v2 [tabindex="-1"]:focus-visible { outline: none; }
/* Nav panels also respect the notch / status bar. */
html body.v2 .nv .nv-panel { max-height: calc(100dvh - var(--nv-bottom) - 24px - env(safe-area-inset-top, 0px)); }
@supports not (height: 100dvh) { html body.v2 .nv .nv-panel { max-height: calc(100vh - var(--nv-bottom) - 24px - env(safe-area-inset-top, 0px)); } }
/* Focused fields scroll clear of the bottom nav (and above the on-screen keyboard where the browser allows). */
.v2 input, .v2 textarea, .v2 select, .v2 button, .v2 .btn, .v2 .btn-v2 { scroll-margin-bottom: calc(var(--nv-space, 136px) + 16px); scroll-margin-top: 24px; }
/* Build your own: phone plan bar in V2.1 ink (was the V2 slate-900), above the nav. */
@media (max-width: 900px) { .v2 .picker-mini:not([hidden]) { background: var(--ink); color: var(--on-dark); border-radius: var(--r-2); box-shadow: 0 18px 40px -16px rgba(11,11,12,.55); } }
@media (max-width: 600px) {
  /* Glass: lighter blur on small screens (cheaper to paint; contrast tests assume no blur at all). */
  :root { --glass-blur: 12px; }
  /* Tool and inner-page heroes are compact on phones so the tool starts on the first screen. */
  .v2 .v2-page-hero { padding: 20px 0 28px; }
  .v2 .v2-page-hero h1 { font-size: clamp(38px, 11vw, 52px); margin-bottom: 12px; }
  .v2 .v2-page-sub { font-size: 17.5px; margin-bottom: 18px; }
  .v2 .v2-tight { padding-block: 28px 48px; }
  .v2 .crumbs { margin-bottom: 14px; }
  /* Kicker lines wrap cleanly instead of stranding a separator. */
  .v2-kicker { letter-spacing: .1em; }
}
@media (max-width: 360px) { .v21-hero h1, .v21-over-hero h1 { font-size: 40px; } .v2 .v21-statement-line { font-size: 38px; } }
/* Website check on phones: the result grid item could not shrink below a long unbreakable string (URL / source name),
   which widened the page to 392px at 360. Let grid items shrink and long words wrap. */
.v2 .fwc > *, .v2 .check-out, .v2 .check-result, .v2 .check-gate > *, .v2 .gate-form, .v2 .findings, .v2 .finding { min-width: 0; }
.v2 .check-result, .v2 .check-state, .v2 .check-loading { overflow-wrap: anywhere; }
.v2 .check-sources li { flex-wrap: wrap; }
.v2 .finding-value { overflow-wrap: anywhere; }
/* Very narrow phones: long button labels wrap instead of widening the page. */
@media (max-width: 420px) { .v2 .btn-v2, .v2 .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* ================================================================ TAP TARGETS ≥ 44×44 (V21-E M2, 4:50 PM) */
/* Inline text links (breadcrumbs, consent "Privacy & cookies", the closing band's tool link): a larger hit box from
   padding. Inline vertical padding does not move the line; horizontal padding is cancelled by a negative margin, so
   layout and CLS are unchanged. */
.v2 .crumbs a, .v2 .check-line a, .v2 .check-option a, .v2 .v21-cta-tool a { display: inline; padding: 14px 6px; margin: 0 -6px; }
.v2 .crumbs li { padding-block: 0; }
/* Inline-block text buttons ("Start the quiz again", "Print this plan"): padding + equal negative margin keeps layout. */
.v2 .tq-link { display: inline-block; padding: 9px 8px; margin: -9px -8px; min-height: 44px; min-width: 44px; line-height: 26px; }
/* Block controls get a real 44px minimum. */
.v2 .tool-back { min-height: 44px; min-width: 44px; padding: 0 12px; margin-left: -12px; display: inline-flex; align-items: center; }
.v2 .picker-opts span { display: inline-flex; align-items: center; min-height: 44px; }
.v2 .picker-rules summary, .v2 .tq-rubric summary, .v2 .check-limits summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; }
.v2 .check-line, .v2 .check-option { min-height: 44px; align-items: center; }
.v2 .check-line input { margin-top: 0; }
/* ================================================================ STICKY PLAN BAR vs FOOTER (V21-E M5) */
/* While the phone/tablet plan bar is showing (≤ 900px), the bottom spacer grows by the bar's height + gap, so at the
   end of the page the last footer link sits above both the bar and the nav pill. */
@media (max-width: 900px) {
  /* 88px = a two-line bar (≈ 76px at 320px) + 12px gap; the bar is never height-capped, so nothing clips. */
  html body.v2:has(.picker-mini:not([hidden])) .nv-spacer { height: calc(var(--nv-space) + 88px); }
}

/* ================================================================ EFFECTIVE HIT AREAS (V21-E 5:10 PM)
   Measured as "what is under the 4 edges of a 44×44 box" (elementFromPoint), so expansions must not be covered by a
   later sibling or overlap a neighbour's area. site/tests/hit-areas.probe.mjs checks every page. */
/* Breadcrumbs: inline-block hit box with equal negative margins (no layout change), ≥ 44 wide even for short words,
   and painted above the kicker/heading that follows. */
.v2 .crumbs a { display: inline-block; position: relative; z-index: 2; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 13px 8px; margin: -13px -8px; text-align: center; line-height: 18px; }
.v2 .crumbs ol { position: relative; z-index: 2; }
/* Inline links in consent rows and the closing band: also painted above their neighbours. */
.v2 .check-line a, .v2 .check-option a, .v2 .v21-cta-tool a { position: relative; z-index: 2; }
/* Quiz/plan text buttons: a real 44px box with a gap, so a neighbouring button's area never overlaps it. */
.v2 .tq-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; margin: 8px -8px 0; line-height: 1.3; }
/* Standalone arrow links ("See how we work →", "All questions →", "Get a 90-day starter plan →"): 44px hit box, layout kept. */
.v2 .v2-link, .v2 .link-arrow { position: relative; z-index: 1; min-height: 44px; min-width: 44px; padding-block: 8.5px; margin-block: -8.5px; box-sizing: border-box; }
.v2 .link-arrow { display: inline-flex; align-items: center; }
/* Industry window names (link inside the H3). */
.v21-window-name a { display: inline-block; padding-block: 8px; margin-block: -8px; position: relative; z-index: 1; }
/* Legal "On this page" contents links: block rows. */
.v2 .legal-toc ol { gap: 0; }
.v2 .legal-toc a { display: flex; align-items: center; min-height: 44px; }
/* Footer link lists on touch screens and narrow windows: full 44px rows (no gaps to fall into); the brand and email too. */
@media (max-width: 1024px), (pointer: coarse) {
  .v2 .v2-footer .foot-col li + li { margin-top: 0; }
  .v2 .v2-footer .foot-col a { display: flex; align-items: center; min-height: 44px; background: none; padding: 0; }
  .v2 .v2-footer .footer-legal ul { gap: 4px 14px; flex-wrap: wrap; }
  .v2 .v2-footer .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; background: none; padding: 0; }
  .v2 .v2-footer .foot-mail, .v2 .v2-footer .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .v2 .v2-footer .foot-mail { margin-top: 4px; }
  .v2 .v2-footer .foot-col a:hover, .v2 .v2-footer .footer-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
/* Short consent links stay on one line, so their hit box is one rectangle (a wrapped inline link leaves gaps). */
.v2 .check-line a, .v2 .check-option a { white-space: nowrap; }
.v2 .v21-cta-tool a { white-space: nowrap; }
/* Nav top row on phones: a label can never spill into the neighbouring button's area (the bold current
   "Industries" overflowed its 1/4 cell at 320px and covered the edge of "Services"). */
@media (max-width: 720px) { html body.v2 .nv .nv-top { overflow: hidden; } }
@media (max-width: 360px) { html body.v2 .nv .nv-item.is-current .nv-top { font-weight: 700; letter-spacing: -.03em; } }
/* Industry window links (V21-E 6d50832): two standalone links stacked as real 44px rows with a 4px gap. No padding
   expansion here, so the first link's area can't sit over the second one. */
.v2 .v21-window-links { display: grid; gap: 4px; }
.v2 .v21-window-links a, .v2 .v21-window-links a.v2-link { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; margin: 0; position: static; z-index: auto; }

/* ================================================================ DETAIL PAGES (11 Nov): services + industries.
   New components follow Jesús's rules: no colour on only one side of an element, no small coloured status dots;
   state is shown with fill, blur or text. */
.v21-art-num { position: absolute; left: 22px; top: 14px; font-family: var(--font-display); font-weight: 900; font-size: clamp(96px, 12vw, 200px); line-height: .85; letter-spacing: -.07em; color: var(--ink); }
.v21-art-rose { background: conic-gradient(from 200deg at 60% 40%, var(--wash-rose), var(--wash-sand), var(--wash-lilac), var(--wash-rose)); }
.v21-art-sage { background: conic-gradient(from 200deg at 60% 40%, var(--wash-sage), var(--wash-sky), var(--wash-sand), var(--wash-sage)); }
.v21-art-slate { background: conic-gradient(from 200deg at 60% 40%, var(--wash-sky), var(--wash-lilac), var(--wash-sage), var(--wash-sky)); }
.v21-art-violet { background: conic-gradient(from 200deg at 60% 40%, var(--wash-lilac), var(--wash-rose), var(--wash-sky), var(--wash-lilac)); }
.v21-detail-hero .v21-over-sub { max-width: 52ch; }
.v21-detail-hero h1 { max-width: 16ch; }
/* tag row (rounded rectangles, the first filled ink) */
.v21-tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.v21-tags li { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; background: rgba(11,11,12,.06); color: var(--ink); }
.v21-tags li:first-child { background: var(--ink); color: var(--on-dark); }
/* "It's for you if" glass list */
.v21-fit { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-2); }
.v21-fit-k { margin: 0 0 14px; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.v21-fit ul, .v21-pkgs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v21-fit li, .v21-pkgs ul li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-size: 17px; line-height: 1.45; }
.v21-fit-check { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--on-dark); }
.v21-fit-check svg { width: 16px; height: 16px; }
/* scope chips: rounded rectangles, full border */
.v21-scope { list-style: none; margin: 22px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v21-scope li { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.7); font-size: 14.5px; font-weight: 600; color: var(--ink); }
/* three-step sequence */
.v21-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* industry: first 90 days as three big glass months (tint fills the whole card) */
.v21-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 2px solid var(--ink); padding-top: 20px; }
.v21-month { position: relative; display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-2); color: var(--ink);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--glass-shadow); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
.v21-month-rose { background: linear-gradient(170deg, var(--tint-rose), var(--glass-bg) 70%); } .v21-month-sage { background: linear-gradient(170deg, var(--tint-sage), var(--glass-bg) 70%); }
.v21-month-slate { background: linear-gradient(170deg, var(--tint-sky), var(--glass-bg) 70%); } .v21-month-violet { background: linear-gradient(170deg, var(--tint-lilac), var(--glass-bg) 70%); }
.v21-month-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 6vw, 96px); line-height: .85; letter-spacing: -.06em; color: var(--ink); }
.v21-month-k { margin: 6px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.v21-month h3 { margin: 0; font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -.03em; }
.v21-month p:last-child { margin: 0; color: var(--ink-2); }
/* careful-with-claims note: glass, full border, ink text */
.v21-claims { margin-top: 24px; display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: 12px 40px; align-items: start; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-2); border: 1.5px solid var(--ink); }
.v21-claims .v2-kicker { margin: 0 0 6px; }
.v21-claims-k { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -.04em; }
.v21-claims-text { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--ink); }
/* packages: glass cards (cv2-pkg is in the glass list); Build your own is fully tinted */
.v21-pkgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v2 .v21-pkgs .cv2-pkg { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.v2 .v21-pkgs .cv2-pkg h3 { margin: 0; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.035em; }
.v2 .v21-pkgs .cv2-pkg > p { margin: 0; color: var(--ink-2); }
.v2 .v21-pkgs .cv2-pkg-own { border: 1.5px dashed var(--ink); }
.v2 .v21-pkg-own.v21-tint-rose { background: var(--tint-rose); } .v2 .v21-pkg-own.v21-tint-sage { background: var(--tint-sage); }
.v2 .v21-pkg-own.v21-tint-slate { background: var(--tint-sky); } .v2 .v21-pkg-own.v21-tint-violet { background: var(--tint-lilac); }
.v2 .v21-pkg-own .v2-link { margin-top: auto; }
@media (max-width: 1080px) { .v21-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .v21-months, .v21-steps-3 { grid-template-columns: minmax(0, 1fr); } .v21-claims { grid-template-columns: minmax(0, 1fr); } .v21-steps-3 li, .v21-steps-3 li + li { padding-left: 0; border-left: 0; } }
@media (max-width: 600px) { .v21-pkgs { grid-template-columns: minmax(0, 1fr); } .v21-art-num { font-size: 88px; } }
/* fallbacks for the new tinted glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.v2 .v21-month { background-color: var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html body.v2 .v21-month { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-rose { background: linear-gradient(var(--tint-rose), var(--tint-rose)), var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-sage { background: linear-gradient(var(--tint-sage), var(--tint-sage)), var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-slate { background: linear-gradient(var(--tint-sky), var(--tint-sky)), var(--glass-solid); }
  html body.v2 .v21-pkg-own.v21-tint-violet { background: linear-gradient(var(--tint-lilac), var(--tint-lilac)), var(--glass-solid); }
}

/* ================================================================ ARTICLES (11 Nov). Markup and class names are
   unchanged (B's CMS overlay renders the same template); everything here keys off .cv2-article and its children.
   Bold display only in the header and the pull line; the body is a calm, readable long-form measure. */
.v2 .cv2-article .cv2-hero { padding: clamp(28px, 4vw, 64px) 0 clamp(36px, 4.5vw, 64px); }
.v2 .cv2-article .cv2-hero .display { font-size: clamp(38px, 5.2vw, 80px); line-height: .96; letter-spacing: -.05em; max-width: 20ch; min-height: 1.92em; }
.v2 .cv2-article .byline { margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.v2 .cv2-article .cv2-art-section { padding-top: clamp(28px, 3vw, 48px); }
.v2 .cv2-art-wrap > * { max-width: 720px; }
/* pull line: the short answer, big serif, in glass with a full border */
.v2 .cv2-article .cv2-answer { margin: 0 0 clamp(36px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border-radius: var(--r-2); border: 1.5px solid var(--ink); }
.v2 .cv2-article .cv2-answer .cv2-kicker { margin: 0 0 12px; }
.v2 .cv2-article .cv2-answer p:last-child { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
/* body: 19px / 1.7 at ~66ch, ink text, plain ink markers */
.v2 .cv2-prose { max-width: 66ch; }
.v2 .cv2-prose p, .v2 .cv2-prose li { font-size: 19px; line-height: 1.7; color: var(--ink); }
.v2 .cv2-prose h2 { font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; margin: 1.8em 0 .55em; }
.v2 .cv2-prose h3 { font-size: clamp(21px, 1.8vw, 24px); letter-spacing: -.025em; margin: 1.5em 0 .4em; }
.v2 .cv2-prose ul li::before { width: 12px; height: 2px; top: .85em; left: 2px; border-radius: 0; background: var(--ink); }
.v2 .cv2-prose .art-checklist li::before { display: none; }
.v2 .cv2-prose .art-box { border: 2px solid var(--ink); border-radius: 5px; }
.v2 .cv2-prose a, .v2 .cv2-sources a { color: var(--ink); text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.v2 .cv2-prose a:hover, .v2 .cv2-sources a:hover { color: var(--c-accent-ink); }
/* the one CTA: a dark glass card with a glow (full-colour fill, no side stripes) */
.v2 .cv2-article .cv2-art-cta { position: relative; isolation: isolate; overflow: hidden; margin: clamp(44px, 5vw, 64px) 0 clamp(36px, 4vw, 48px); padding: clamp(24px, 3vw, 40px); border-radius: var(--r-3); background: var(--ink); border: 1px solid var(--ink); color: var(--on-dark); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--glass-shadow); }
.v2 .cv2-article .cv2-art-cta::before { content: ''; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, var(--glow-slate), transparent), radial-gradient(closest-side at 30% 70%, rgba(183,166,242,.35), transparent); filter: blur(30px); pointer-events: none; }
.v2 .cv2-article .cv2-art-cta h2 { color: var(--on-dark); font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.045em; margin: 0 0 12px; }
.v2 .cv2-article .cv2-art-cta p { color: var(--on-dark-2); font-size: 17px; }
.v2 .cv2-article .cv2-art-cta .cv2-fine, .v2 .cv2-article .cv2-art-cta .cv2-fine a { color: var(--on-dark-2); }
.v2 .cv2-article .cv2-art-cta .cv2-fine a { color: var(--on-dark); text-decoration: underline; }
html body.v2 .cv2-art-cta .btn, html body.v2 .cv2-art-cta .btn-primary { --bg: var(--paper); --fg: var(--ink); --fill: var(--c-accent-mint); --fg-hover: var(--ink); }
/* sources and sign-up: quiet glass panels */
.v2 .cv2-article .cv2-sources { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-2); background: var(--glass-bg); border: 1px solid var(--line); }
.v2 .cv2-article .cv2-sources h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 10px; }
.v2 .cv2-article .cv2-sources ol { color: var(--ink-2); font-size: 15px; overflow-wrap: anywhere; }
.v2 .cv2-article .cv2-art-signup { margin-top: 28px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-2); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .v2 .cv2-article .cv2-art-signup, .v2 .cv2-article .cv2-sources { background: var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce) { .v2 .cv2-article .cv2-art-signup { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); } .v2 .cv2-article .cv2-sources { background: var(--glass-solid); } }
/* a soft glow behind the article header (the page's only colour moment besides the CTA) */
.v2 .cv2-article .cv2-hero { position: relative; isolation: isolate; overflow: hidden; }
@media (max-width: 600px) { .v2 .cv2-article .cv2-hero .display { font-size: clamp(34px, 9.5vw, 44px); min-height: 0; } .v2 .cv2-prose p, .v2 .cv2-prose li { font-size: 18px; } }
.v2 .cv2-article .cv2-art-cta .cv2-fine { margin-top: 14px; }

/* ================================================================ SAAS GUARANTEE / ONE-SIDED COLOUR (11 Nov, V21-E 6/D5)
   The guarantee pull line is never hidden behind a scroll reveal (its hook was removed in the markup; this is a guard).
   On detail pages, the two coloured one-sided accents become neutral ink: the motion layer's draw-in rule along the top
   of the numbered lists, and the tri-colour seam above the closing band. */
.v21-pull blockquote { opacity: 1; }
html body.v2.v21-detail [data-motion-rule]::before, html body.v2.v21-detail [data-motion-rule="light"]::before { background: var(--ink); }
html body.v2.v21-detail .v21-seam { background: var(--ink); }

/* ================================================================ SITE-WIDE SINGLE-SIDE COLOUR RULE (11 Nov)
   No coloured accent on only one side of an element, anywhere (home, overview, tools, contact, FAQ, legal, nav panels,
   footer, detail pages). Neutral ink hairlines are fine; colour is shown as a full border or a fill. */
/* 1. Motion layer's draw-in section rule: neutral everywhere (ink on light, white on dark bands); the draw-in stays. */
html body.v2 [data-motion-rule]::before { background: var(--ink); }
html body.v2 [data-motion-rule="light"]::before, html body.v2 .v21-statement [data-motion-rule]::before, html body.v2 .v2-cta [data-motion-rule]::before { background: var(--on-dark); }
/* 2. The strip above the closing band: neutral ink, not multi-colour. */
html body.v2 .v21-seam { background: var(--ink); }
/* 3. Dark fact tiles (home / About / How we work / Services): a full tinted border instead of a coloured bottom edge. */
html body.v2 .v21-fact:nth-child(1) { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); border-color: rgba(183,166,242,.55); }
html body.v2 .v21-fact:nth-child(2) { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); border-color: rgba(159,220,192,.55); }
html body.v2 .v21-fact:nth-child(3) { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); border-color: rgba(246,195,158,.55); }
/* 4. Website check states and the "first fix" box: full borders (state colour kept, all the way round). */
html body.v2 .check-state { border: 1.5px solid #C2A04A; }
html body.v2 .check-state.check-error { border-color: #9B2C2C; }
html body.v2 .check-first { border: 1.5px solid var(--ink); }
/* 5. 90-day plan claims note: full border. */
html body.v2 .tq-claims { border: 1.5px solid var(--ink); }
/* 6. Nav panel current link: ink underline (was the slate accent). */
html body.v2 .nv-link[aria-current] .nv-link-title { text-decoration-color: var(--ink); }
/* ---- No small coloured status dots (Jesús's rule; V21-E D4, 11 Nov): show state with fill, blur or text. */
/* Kicker labels stand on their own (letter-spacing + weight); the blue 8px circle is gone. */
html body.v2 .v2-kicker::before, html body.v2 .cv2-kicker::before { content: none; display: none; }
/* Nav current section: a filled ink-tint item with a full underline under the label, instead of a 5px blue dot. */
html body.v2 .nv-item.is-current .nv-top::after { content: none; display: none; }
html body.v2 .nv-item.is-current .nv-top { background: rgba(11, 11, 12, .08); }
html body.v2 .nv-item.is-current .nv-top-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--ink); }
/* Website-check progress: the active step ring is ink (was a slate ring). */
html body.v2 .check-steps li.is-active::before { border-color: var(--ink); border-right-color: transparent; }
/* Native radios/checkboxes draw their checked mark in ink (was the slate accent). */
html body.v2 input[type="radio"], html body.v2 input[type="checkbox"] { accent-color: var(--ink); }
/* Contact "next steps" numbers: neutral ink outline instead of coloured blobs. */
html body.v2 .ns-num { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 50%; }
/* Quiz / plan save status in its failure state: a full border (was a slate left bar). */
html body.v2 .tq-status[data-state="off"] { border: 1.5px solid var(--ink); }

/* ================================================================ STANDOUT POLISH (Wed 11 Nov) */
/* ---- One focus ring everywhere: 3px outline all the way round (never one-sided, never a dot), offset from the
   element, the element's own shape kept. Slate-ink on light surfaces, lilac on dark bands; both ≥ 3:1 (tested). */
:root { --focus-ring: var(--c-accent-ink); --focus-ring-dark: var(--c-accent-lilac); --focus-width: 3px; --focus-offset: 3px; }
.v21-statement, .v2-cta, .v2-footer, .check-form, .cv2-art-cta, .v21-dark-links { --focus-ring: var(--focus-ring-dark); }
html body.v2 :focus-visible, html body.v2 .nv :focus-visible, html body.v2 .nv-brand:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
html body.v2 input:focus-visible, html body.v2 textarea:focus-visible, html body.v2 select:focus-visible,
html body.v2 .send-form input:focus, html body.v2 .gate-form input:focus, html body.v2 .gate-form select:focus, html body.v2 .field input:focus, html body.v2 .field textarea:focus, html body.v2 .field select:focus, html body.v2 .tq-field input:focus-visible, html body.v2 .signup-row input:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; box-shadow: none; }
html body.v2 .v2-check-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--line-strong); outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
html body.v2 .v2-check-row input:focus-visible { outline: none; }
/* hidden-input controls draw the ring on their visible part */
html body.v2 .picker-opts input:focus-visible + span, html body.v2 .picker-head input:focus-visible + .picker-check, html body.v2 .chip-option input:focus-visible + span,
html body.v2 .tq-opt:has(input:focus-visible), html body.v2 .tq-chip:has(input:focus-visible), html body.v2 .check-option:has(input:focus-visible) .box { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
html body.v2 [tabindex="-1"]:focus, html body.v2 [tabindex="-1"]:focus-visible { outline: none; }
/* ---- 404 */
.v21-404 h1 { max-width: 12ch; }
.v21-404 .v21-art-num { font-size: clamp(110px, 13vw, 210px); }
.v21-404-links { margin-top: clamp(28px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); max-width: 560px; }

/* ---- Type + spacing rhythm (one modular scale, ratio ≈ 1.125 from a 12.5px label; display sizes stay fluid). */
:root {
  --fs-label: 12.5px;   /* kickers, tags, numbers, uppercase labels */
  --fs-small: 14px;     /* fine print, captions, crumbs, notes */
  --fs-ui: 16px;        /* buttons, card text, lists, form text */
  --fs-body: 18px;      /* paragraphs and leads in sections */
  --fs-lead: 20px;      /* closing-band and hero lines (min) */
  --fs-lead-l: 22.5px;  /* large lead lines */
  --fs-h3: 25.5px;      /* card / step headings (max) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-section: clamp(72px, 9vw, 136px); --sp-head: clamp(32px, 4vw, 52px); --sp-card: clamp(22px, 2.6vw, 32px); --sp-gap: 16px;
}
/* label */
html body.v2 :is(.v2-tag, .v2-kicker, .cv2-kicker, .tool-step-label, .v2-why-n, .v21-month-k, .v21-fit-k, .v21-tags li, .finding-state, .tq-count, .tq-pts, figcaption, .v21-pull figcaption, .picker-n, .v2-svc-n, .gantt-scale, .gantt-key, .cv2-promise-k, .v2-tag-quiet) { font-size: var(--fs-label); }
/* small */
html body.v2 :is(.v2-fine, .cv2-fine, .fine, .signup-note, .crumbs ol, .crumbs a, .to-top, .check-covers span, .check-sources, .picker-scope ul, .picker-opt, .picker-opts span, .picker-flag, .tq-fine, .gantt-name, .footer-legal, .footer-legal a, .v21-cta-tool, .send-status, .gate-status, .form-status, .cv2-sources ol, .contact-alt, .byline) { font-size: var(--fs-small); }
/* ui */
html body.v2 :is(.btn-v2, .btn, .v2-link, .link-arrow, .v21-textlink, .v2-ind-text, .v2-why p, .v21-steps p, .v21-month p:last-child, .tool-cards span:not(.v2-tag):not(.v2-link), .v21-index-t span, .v2-services .v2-svc-t span, .tool-option span:not(.v2-ind-band), .tool-option strong, .v2-chooser-t span, .v2-mini-list span, .v2-mini-list strong, .cv2-pkg > p, .v21-pkgs ul li, .v21-fit li, .check-covers strong, .picker-head strong, .picker-scope > li, .v21-facts-note, .v21-fact span, .foot-col a, .foot-brand p, .foot-mail, .signup-title, .tq-opt, .tq-field label, .send-form label, .gate-form label, .check-line, .check-option, .field label, .chip-option span, .faq-a p, .next-steps li) { font-size: var(--fs-ui); }
/* body */
html body.v2 :is(.v2-head-lead, .v21-claims-text, .v21-note p, .v2-body, .cv2-body, .v2-numbered span, .faq-item summary, .legal-body p, .legal-body li, main .prose:not(.cv2-prose) p, main .prose:not(.cv2-prose) li, .tq-card p, .check-state p, .check-first, .finding-fix, .empty-work p, .v21-empty p, .v21-window-text) { font-size: var(--fs-body); }
/* leads */
html body.v2 :is(.v2-cta-text, .v21-hero-sub, .v21-over-sub, .v2-page-sub) { font-size: clamp(var(--fs-body), 1.6vw, var(--fs-lead-l)); }
html body.v2 :is(.page-hero .lead, .contact-hero .lead, .narrow-hero .lead) { font-size: clamp(var(--fs-body), 1.6vw, var(--fs-lead-l)); }
/* h3 */
html body.v2 :is(.v2-why h3, .v21-steps h3, .v21-month h3, .cv2-pkg h3, .v21-pkgs .cv2-pkg h3, .tool-cards strong, .v2-svc-t strong, .cv2-prose h3, .check-gate h3, .send-form h3, .tq-email h2, .v2-faq-group h2) { font-size: clamp(var(--fs-lead), 1.8vw, var(--fs-h3)); }
html body.v2 .cv2-sources h2 { font-size: var(--fs-lead); }
/* spacing rhythm */
html body.v2 .v2-section { padding-block: var(--sp-section); }
html body.v2 .v2-head { margin-bottom: var(--sp-head); }
html body.v2 :is(.v2-why, .v2-industries, .v21-windows, .v21-pkgs, .v21-months, .tool-cards, .v21-tools-grid, .v21-facts) { gap: var(--sp-gap); }
html body.v2 :is(.v2-why li, .v21-month, .v21-fit, .v21-note, .v21-pkgs .cv2-pkg, .tool-cards a) { padding: var(--sp-card); }
/* rhythm: remaining outliers mapped onto the scale */
html body.v2 :is(.foot-col h2, .v2-footer .foot-col h2) { font-size: var(--fs-label); }
html body.v2 :is(.v21-scope li, .v2 .cv2-article .byline, .cv2-article .cv2-sources ol, .cv2-article .cv2-sources li) { font-size: var(--fs-small); }
html body.v2 .cv2-article .byline { font-size: var(--fs-small); }
html body.v2 :is(.legal-toc a, .legal-toc ol) { font-size: var(--fs-ui); }
html body.v2 :is(.fact-card p, .fact-card dt, .fact-card dd, .fact-card li, .facts p, .facts li) { font-size: var(--fs-ui); }
html body.v2 :is(.v2-answer p:last-child, .v2 .cv2-answer p:last-child) { font-size: clamp(var(--fs-body), 1.6vw, var(--fs-lead)); }
html body.v2 .v2 .cv2-article .cv2-answer p:last-child, html body.v2 .cv2-article .cv2-answer p:last-child { font-size: clamp(var(--fs-lead-l), 2.5vw, 34px); }
html body.v2 :is(.tool-q, .tq-q, .v2-h3, h2.h3, .cv2-art-cta h2) { font-size: clamp(var(--fs-lead), 2vw, var(--fs-h3)); }
html body.v2 .v2 .cv2-article .cv2-art-cta h2, html body.v2 .cv2-article .cv2-art-cta h2 { font-size: clamp(var(--fs-h3), 3.4vw, 46px); }
html body.v2 .v21-claims-k { font-size: clamp(var(--fs-h3), 2.6vw, 36px); }
html body.v2 .v21-fact strong.v21-fact-t { font-size: clamp(var(--fs-lead-l), 2.2vw, 32px); }
html body.v2 :is(.legal-body h2, .legal-section h2, main .narrow-hero ~ * h2.h3) { font-size: clamp(var(--fs-h3), 2.4vw, 34px); }
html body.v2 .cv2-article .cv2-art-cta .cv2-fine { font-size: var(--fs-small); }
/* long-form articles: 18px on phones, 20px on wider screens (both on the scale) */
html body.v2 :is(.cv2-prose p, .cv2-prose li) { font-size: var(--fs-body); }
@media (min-width: 900px) { html body.v2 :is(.cv2-prose p, .cv2-prose li) { font-size: var(--fs-lead); } }
html body.v2 :is(.legal-toc > p, .v2-swatches code, .v2-swatches span, .field legend, .v21-hero-aside span) { font-size: var(--fs-small); }
html body.v2 :is(.tq-rubric p, .tq-rubric li, .tq-rubric strong, .tq-chip span, .v2-bullets li, .post-card .post-title, .post-card .post-excerpt, .post-card strong, .post-card span, .v21-check-pane p, .v2-check-form label, .cv2-article .cv2-art-cta p) { font-size: var(--fs-ui); }
html body.v2 .post-card .post-title { font-size: var(--fs-body); }
html body.v2 .v21-index-t strong { font-size: clamp(var(--fs-lead-l), 2.8vw, 44px); }
html body.v2 .prose h2 { font-size: clamp(var(--fs-h3), 2.4vw, 34px); }
html body.v2 :is(.picker-rules summary, .picker-rules li, .picker-rules p, .picker-empty p, .cv2-svc-list span) { font-size: var(--fs-ui); }
html body.v2 .cv2-svc-list strong { font-size: var(--fs-body); }
/* ---- Copy-link status */
.v21-copy-status { margin: 10px 0 0; min-height: 1.4em; font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
/* ---- Print: tool results (quiz score, 90-day plan, Build your own summary) print as clean black-and-white pages.
   Only the result prints: no nav, footer, glows, closing band, forms or buttons. Bars keep a solid fill. */
@media print {
  @page { margin: 16mm 14mm; }
  html body.v2 { background: #fff !important; color: #000 !important; padding: 0 !important; }
  html body.v2 :is(.nv, .nv-spacer, .nv-masthead, .site-header, .v2-footer, .site-footer, .v2-cta, .v21-seam, .crumbs, .skip,
    .v2-actions, .picker-actions, .picker-mini, .send-form, .tq-email, [data-tool-email], .tq-noprint, .v21-copy-status, .picker-form,
    .picker-rules, .tq-quiz, .tq-plan-form, .tq-side, .v2-section.v2-panel-band, .check-gate, .v2-page-sub, .tool-back) { display: none !important; }
  html body.v2 *, html body.v2 *::before, html body.v2 *::after {
    background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important;
    animation: none !important; transition: none !important; opacity: 1 !important; translate: none !important; transform: none !important; }
  html body.v2 :is(.v21-over-hero, .v2-page-hero, .v2-section, .v2-tight)::before, html body.v2 .v21-glow::after { display: none !important; }
  html body.v2 :is(.v2-page-hero, .v2-section, .v2-tight) { padding: 0 0 8mm !important; border: 0 !important; }
  html body.v2 .v2-page-hero h1 { font-size: 26pt !important; line-height: 1.05 !important; margin: 0 0 4mm !important; max-width: none !important; }
  html body.v2 :is(.tq-card, .tq-result, .tq-plan, .tq-month, .picker-summary, .check-result, .cv2-pkg, .tq-claims) { border: 1px solid #000 !important; border-radius: 4px !important; break-inside: avoid; }
  html body.v2 .picker { display: block !important; }
  html body.v2 .tq-months { grid-template-columns: 1fr !important; gap: 4mm !important; }
  html body.v2 :is(.gantt-bar, .tq-area-bar span) { print-color-adjust: exact; -webkit-print-color-adjust: exact; background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  html body.v2 .gantt-b { background: #555 !important; } html body.v2 .gantt-c { background: #999 !important; }
  html body.v2 .gantt-track, html body.v2 .tq-area-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; border: 1px solid #000 !important; }
  html body.v2 a { text-decoration: none !important; }
}
@media print {
  html body.v2 .tq-card:has([data-tool-email]), html body.v2 .tq-card:has(.tq-email) { display: none !important; }
  html body.v2 .gantt-key span::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; border: 1px solid #000 !important; }
  html body.v2 .k-f::before { background: #000 !important; } html body.v2 .k-b::before { background: #555 !important; } html body.v2 .k-c::before { background: #999 !important; }
}

/* ================================================================ POLISH EVAL FIXES (V21-E on 4cff4c4) */
/* P3: everything on the 7-step scale. Base size = --fs-ui (the old 17px base leaked into the skip link, visually-hidden
   labels and the nav buttons, which use `font: inherit`). The nav is mapped explicitly, at a specificity that wins. */
html body.v2 { font-size: var(--fs-ui); }
html body.v2 :is(.skip, .sr-only) { font-size: var(--fs-ui); }
html body.v2 .nv :is(.nv-top, .nv-top-btn, .nv-top-link, .nv-top-label) { font-size: var(--fs-ui); }
html body.v2 .nv :is(.nv-cta, .nv-back, .nv-link-title) { font-size: var(--fs-ui); }
html body.v2 .nv :is(.nv-context, .nv-panel-index, .nv-link-text, .nv-tile-text) { font-size: var(--fs-small); }
html body.v2 .nv :is(.nv-panel-title, .nv-tile-kicker) { font-size: var(--fs-label); }
html body.v2 .nv .nv-tile-title { font-size: var(--fs-lead-l); }
@media (max-width: 720px) {
  html body.v2 .nv :is(.nv-top, .nv-top-btn, .nv-top-link, .nv-top-label) { font-size: var(--fs-small); }
  html body.v2 .nv .nv-context { font-size: var(--fs-small); }
  html body.v2 .nv .nv-tile-title { font-size: var(--fs-lead); }
}
html body.v2 .tq-area-pts { font-size: var(--fs-ui); }
html body.v2 .review-status { font-size: var(--fs-small); }
/* P5: the plan bar is a dark pill floating over light page content, so its ring sits on the page, not on the bar.
   A slate-ink ring with a white gap reads against the page (≥ 9:1) and against the gap, whatever is behind. */
html body.v2 .picker-mini { --focus-ring: var(--c-accent-ink); }
html body.v2 .picker-mini:focus-visible { outline: var(--focus-width) solid var(--c-accent-ink); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--paper), 0 18px 40px -16px rgba(11,11,12,.55); }
/* P4: print — chart bars keep readable labels: phase 1 solid black with white text, phase 2 white with a black
   border and black text, phase 3 light grey with black text (all ≥ 4.5:1). Specific enough to beat the generic
   "bars are solid black" print rule above. */
@media print {
  html body.v2 .gantt-track .gantt-bar, html body.v2 .gantt-track .gantt-bar * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html body.v2 .gantt-track .gantt-bar.gantt-f { background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  html body.v2 .gantt-track .gantt-bar.gantt-b { background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000 !important; box-shadow: inset 0 0 0 1.5px #000 !important; }
  html body.v2 .gantt-track .gantt-bar.gantt-c { background: #D9D9D9 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; }
  html body.v2 .gantt-track .gantt-bar.gantt-f * { color: #fff !important; -webkit-text-fill-color: #fff !important; background: transparent !important; }
  html body.v2 .gantt-track .gantt-bar:is(.gantt-b, .gantt-c) * { color: #000 !important; -webkit-text-fill-color: #000 !important; background: transparent !important; }
  html body.v2 .gantt-key .k-f::before { background: #000 !important; } html body.v2 .gantt-key .k-b::before { background: #fff !important; } html body.v2 .gantt-key .k-c::before { background: #D9D9D9 !important; }
}
html body.v2 .review-table { font-size: var(--fs-ui); }
html body.v2 .review-table thead th { font-size: var(--fs-label); }
html body.v2 .review-table td:last-child { font-size: var(--fs-small); }
/* Nav items: the pill clips anything outside it, so their ring sits 1px off the item (1 + 3px fits in the pill's
   5px padding) and is never cut at the pill's edge. */
html body.v2 .nv .nv-pill :focus-visible { outline-offset: 1px; }
/* Keyboard focus never lands under the fixed bottom bars: the page scrolls focused elements clear of the nav pill
   (and of the Build-your-own plan bar while it shows), so the whole control and its ring stay visible. */
html:has(body.v2) { scroll-padding-bottom: calc(var(--nv-space, 136px) + 12px); scroll-padding-top: 16px; }
@media (max-width: 900px) { html:has(body.v2 .picker-mini:not([hidden])) { scroll-padding-bottom: calc(var(--nv-space, 136px) + 100px); } }
/* A consent link's tall hit box (and its focus ring) never reaches the submit button below it. */
html body.v2 :is(.send-form, .gate-form, .tq-email) :is(.check-line, .tq-consent) + :is(button, .btn-v2, p + button) { margin-top: 10px; }
html body.v2 .send-form .check-line ~ button, html body.v2 .gate-form .check-line ~ button { margin-top: 10px; }
/* Website-check "Check it" sits inside the white input row (on the dark form): its own ring is slate-ink on that white
   row; the row's ring stays lilac on the dark form. */
html body.v2 .check-form .v2-check-row button { --focus-ring: var(--c-accent-ink); }

/* ================================================================ EVAL ROUND 3 */
/* P3: script-generated tool results on the scale (the big quiz score numeral and the picker total above 25.5px are
   fluid display type, which the scale allows). */
html body.v2 .tool-back { font-size: var(--fs-small); }
html body.v2 .picker-total { font-size: clamp(var(--fs-lead-l), 2.2vw, 30px); }
html body.v2 .gantt-track .gantt-bar, html body.v2 .gantt-track .gantt-bar span { font-size: var(--fs-label); }
html body.v2 :is(.picker-mini, .picker-mini span, .picker-mini strong) { font-size: var(--fs-ui); }
html body.v2 .tq-of { font-size: var(--fs-lead-l); }
html body.v2 :is(.tq-area-name, .tq-consent label, .gate-alt p, .gate-col p) { font-size: var(--fs-ui); }
html body.v2 .check-out h2 { font-size: clamp(var(--fs-h3), 2.6vw, 34px); }
html body.v2 :is(.check-limits, .check-limits summary, .check-limits li) { font-size: var(--fs-small); }
/* 1. Contrast: the third timeline phase is a deeper slate so its white label is AA (was #6E7F95, 4.09:1). */
:root { --gantt-c: #56657A; }
html body.v2 .gantt-c { background: var(--gantt-c); }
html body.v2 .k-c::before { background: var(--gantt-c); }
/* 3. Focus: dark-band link tiles clip their content (the motion glow sets overflow: clip on the tile), so the link's
   ring sits just inside the tile: no clipping, no layout shift. Lilac on the dark tile. */
html body.v2 .v21-dark-links .v21-fact > a:focus-visible { outline-offset: -5px; }