/* =============================================================================
   SVLS LABS — theme.css · "Signal Premium" (site-wide rollout, with tweaks)
   A visual skin loaded AFTER site.css and the page stylesheet. Copy, markup
   order and behaviour are untouched; this file only restyles. It keeps the
   Registration Lens brand (ink, vermilion, the mark) and pushes it to a
   premium register: a charcoal hero on every page, elevated cards on soft
   bands, gradient hairlines, a vermilion-to-coral primary action, the data
   trace in the homepage hero and glowing severity pills in the product frame.
   THEME_SPEC.md is the written system; it supersedes BRAND_SPEC 5, 6, 10, 12.

   Contents
   00  Theme tokens (light page, dark page, charcoal contexts)
   01  Type scale and key-word underline
   02  Section anatomy, alternating bands, hairlines
   03  Header, primary nav, dropdowns, Menu sheet
   04  Buttons, links, chips, badge, severity pills
   05  Hero (every page): atmosphere, art layers, copy, figure, proof strip
   06  Card system: hairline grids -> cards, stats, practices, method
   07  Control model, spec table, diagrams, pull-quote
   08  Lists, product feature, workbench
   09  Dark bands and the Value Lens product frame
   10  Credentials, chips, book, slim bands, FAQ, page components
   11  Forms and closing CTA
   12  Footer
   13  Motion
   ============================================================================= */

/* ---------------------------------------------------------------------------
   00  Theme tokens
   --------------------------------------------------------------------------- */
:root {
  --sg-ink:          #0E1116;   /* charcoal: hero, header, dark bands, footer */
  --sg-ink-2:        #141A22;   /* raised charcoal surfaces (cards on charcoal) */
  --sg-ink-3:        #1B222C;
  --sg-coral:        #FF6A50;   /* light accent on charcoal (graphic) */
  --sg-coral-text:   #FF8A74;   /* coral safe for 12px text on charcoal */
  --sg-verm:         #E4432B;   /* vermilion (graphic) */
  --sg-page:         #FFFFFF;   /* white band */
  --sg-band:         #F5F6F8;   /* soft band behind cards */
  --sg-card:         #FFFFFF;
  --sg-card-2:       #F9FAFB;
  --sg-line:         rgba(16, 20, 24, 0.08);
  --sg-line-strong:  rgba(16, 20, 24, 0.14);
  --sg-shadow:       0 1px 2px rgba(16, 20, 24, .04), 0 14px 32px -14px rgba(16, 20, 24, .12);
  --sg-shadow-hover: 0 2px 4px rgba(16, 20, 24, .05), 0 24px 44px -18px rgba(16, 20, 24, .22);
  --sg-radius:       6px;
  --sg-radius-lg:    12px;
  --sg-hairline:     linear-gradient(90deg, var(--sg-line-strong), var(--sg-line) 55%, transparent);
  --sg-gradient:     linear-gradient(90deg, var(--sg-verm), var(--sg-coral));
  /* Primary button: vermilion micro-gradient whose lightest stop (#D53B22) still gives
     white text 4.7:1. Coral energy comes from the glow, not from the fill. */
  --sg-btn:          linear-gradient(135deg, #D53B22 0%, #C8351F 100%);
  --sg-btn-hover:    linear-gradient(135deg, #D53B22 0%, #BA311C 100%);
  --sg-btn-glow:     0 10px 24px -10px rgba(228, 67, 43, .55);
  --sg-btn-glow-hover: 0 18px 32px -12px rgba(255, 106, 80, .65);
  --sg-halo:         0 40px 80px -30px rgba(0, 0, 0, .8), 0 30px 60px -30px rgba(255, 106, 80, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  --sg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Base token adjustments */
  --surface:  var(--sg-band);
  --r-1:      4px;
  --r-2:      8px;
  --shadow-2: 0 24px 64px -24px rgba(16, 20, 24, .35);
  --nav-h:    68px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sg-page: #0B0E13; --sg-band: #10151C; --sg-card: #141923; --sg-card-2: #171D26;
    --sg-line: rgba(255, 255, 255, .08); --sg-line-strong: rgba(255, 255, 255, .14);
    --sg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -14px rgba(0, 0, 0, .5);
    --sg-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 44px -18px rgba(0, 0, 0, .65);
    --surface: var(--sg-band);
    --shadow-2: 0 24px 64px -24px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --sg-page: #0B0E13; --sg-band: #10151C; --sg-card: #141923; --sg-card-2: #171D26;
  --sg-line: rgba(255, 255, 255, .08); --sg-line-strong: rgba(255, 255, 255, .14);
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -14px rgba(0, 0, 0, .5);
  --sg-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 44px -18px rgba(0, 0, 0, .65);
  --surface: var(--sg-band);
  --shadow-2: 0 24px 64px -24px rgba(0, 0, 0, .7);
}

/* Charcoal contexts: every hero, the header, the Menu sheet, every .band-dark (dark bands, the footer,
   the 404 page) share one token set, in light and in dark mode alike. */
.hero, .site-header, .sheet, .band-dark, .nf {
  --bg: var(--sg-ink); --surface: var(--sg-ink-2); --rule: rgba(255, 255, 255, .09); --grid: rgba(255, 255, 255, .04);
  --text: #F5F6F8; --text-muted: #AEB6C2;
  --primary: #F3F4F6; --on-primary: #0B0E13;
  --accent: var(--sg-coral); --accent-text: #FF7A62; --on-accent: #0B0E13;
  --success: #4CC38A; --warn: #E6B05C; --warn-fill: #E6B05C; --on-warn: #0B0E13;
  --accent-hover: #FF8068; --svls-accent: var(--sg-coral);
  --sg-page: var(--sg-ink); --sg-band: #12171F; --sg-card: var(--sg-ink-2); --sg-card-2: #1A212B;
  --sg-line: rgba(255, 255, 255, .08); --sg-line-strong: rgba(255, 255, 255, .14);
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -14px rgba(0, 0, 0, .5);
  --sg-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 44px -18px rgba(0, 0, 0, .65);
  --shadow-2: 0 24px 64px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
body { background: var(--sg-page); }
::selection { background: rgba(255, 106, 80, .35); }

/* ---------------------------------------------------------------------------
   01  Type scale and key-word underline
   --------------------------------------------------------------------------- */
:root {
  --fs-display: clamp(42px, 2.9vw + 30px, 76px);
  --fs-h2:      clamp(30px, 1.5vw + 22px, 44px);
  --fs-h3:      clamp(20px, 0.4vw + 18px, 23px);
  --fs-stat:    clamp(38px, 1.6vw + 28px, 52px);
}
h1, h2, .display, .h1, .h2 { letter-spacing: -0.03em; }
h1, .h1, .display, h1.display { font-weight: 800; line-height: 1.04; }
.display, h1.display { line-height: 1.02; max-width: 16ch; }
h2, .h2 { font-weight: 700; line-height: 1.1; max-width: 26ch; }
h3, .h3 { letter-spacing: -0.015em; }
h4, .h4 { letter-spacing: -0.005em; }
.small, .status, .trust { letter-spacing: 0.002em; }
.eyebrow { font-weight: 600; letter-spacing: .1em; }
.numeral { font-weight: 600; letter-spacing: .08em; }
.lead { max-width: 56ch; }
.stat {
  font-family: var(--font-heading); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
/* Key-word underline: vermilion-to-coral gradient bar, repeats per line if the phrase wraps */
.key {
  text-decoration: none;
  background: var(--sg-gradient) no-repeat 0 100% / 100% 0.07em;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------------------------------------------------------------------------
   02  Section anatomy, alternating bands, hairlines
   --------------------------------------------------------------------------- */
.section { position: relative; }
/* Bands alternate white and soft down every page: the hero is band 1 (charcoal), then soft, white, soft...
   Dark bands keep their own place in the rhythm. A page stylesheet's .band-surface no longer decides. */
main > section.section:nth-of-type(even):not(.band-dark) { background-color: var(--sg-band); }
main > section.section:nth-of-type(odd):not(.band-dark)  { background-color: var(--sg-page); }
.band-surface + .band-surface { border-top: 0; }
.section-mark { position: relative; border-top: 0; padding-top: 22px; gap: 12px; }
.section-mark::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.section-mark .numeral {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 999px;
  font: 600 12px/1 var(--font-mono); letter-spacing: .1em;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.section-head { margin-bottom: var(--s-7); }
.section-head > h2, .section-head > .h2 { margin-top: 28px; }
@media (min-width: 600px) { .section-head > h2, .section-head > .h2 { margin-top: 32px; } }
.hgrid--bottom { border-bottom: 0; }
/* After a charcoal hero the next section keeps its full top padding (site.css shrank it under a white hero) */
.hero--plain + .section { padding-top: var(--s-8); }
@media (min-width: 600px)  { .hero--plain + .section { padding-top: var(--s-9); } }
@media (min-width: 1024px) { .hero--plain + .section { padding-top: 112px; } }
.aside-rule { border-color: var(--sg-line-strong); }

/* ---------------------------------------------------------------------------
   03  Header, primary nav, dropdowns, Menu sheet
   --------------------------------------------------------------------------- */
.site-header {
  color: var(--text);
  background: rgba(14, 17, 22, .84);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
  transition: box-shadow var(--t-base) var(--ease);
}
.site-header.is-scrolled { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 12px 32px -16px rgba(0, 0, 0, .6); }
.site-header__inner { gap: var(--s-6); }
.brand { color: #FFFFFF; }
.site-nav__list { gap: 28px; }
.site-nav__link {
  color: rgba(243, 244, 246, .78); font-weight: 500;
  text-underline-offset: 9px; text-decoration-thickness: 2px;
  transition: color var(--t-fast) var(--ease);
}
.site-nav__link:hover, .site-nav__link[aria-current="page"], .site-nav__link.is-current {
  color: #FFFFFF; text-decoration-color: var(--sg-coral); text-underline-offset: 9px;
}
.site-nav__chevron { opacity: .7; }
.dropdown {
  left: -12px; padding: 8px;
  background: rgba(18, 23, 31, .96); border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.dropdown a { border-radius: 6px; padding: 10px 12px; }
.dropdown a:hover, .dropdown a:focus-visible { background: rgba(255, 255, 255, .06); }
.dropdown a[aria-current="page"] .dropdown__title { text-decoration-color: var(--sg-coral); }
.dropdown__title { color: #FFFFFF; font-weight: 600; }
.dropdown__desc { color: #A9B1BD; }
.theme-toggle { border-radius: 8px; color: rgba(243, 244, 246, .8); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.theme-toggle:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.menu-btn { color: #FFFFFF; height: 44px; padding: 0 12px 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; }
.btn--nav { height: 44px; padding: 0 16px; font-size: 14px; }

.sheet {
  background: var(--sg-ink); color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
}
.sheet__link { color: #FFFFFF; }
.sheet__link[aria-current="page"] { text-decoration-color: var(--sg-coral); }
.sheet__group-label { color: var(--sg-coral-text); }
.sheet__theme .chip { color: #FFFFFF; border-color: rgba(255, 255, 255, .18); background: transparent; box-shadow: none; }
.sheet__theme .chip[aria-pressed="true"] { background: #FFFFFF; color: #0B0E13; border-color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   04  Buttons, links, chips, badge, severity pills
   --------------------------------------------------------------------------- */
.btn {
  border-radius: var(--sg-radius); font-weight: 600; letter-spacing: -0.005em;
  min-height: 44px;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn--primary {
  color: #FFFFFF; border: 0;
  background: var(--sg-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 20, 24, .2), var(--sg-btn-glow);
}
.btn--primary:hover {
  color: #FFFFFF; background: var(--sg-btn-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(16, 20, 24, .2), var(--sg-btn-glow-hover);
}
.btn--primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--sg-btn-glow); }
.btn--secondary {
  color: var(--primary); background: var(--sg-card);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  box-shadow: 0 1px 2px rgba(16, 20, 24, .05);
}
.btn--secondary:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 10px 24px -12px rgba(16, 20, 24, .4); }
.hero .btn--secondary, .nf .btn--secondary, .band-dark .btn--secondary, .site-header .btn--secondary, .sheet .btn--secondary {
  color: #FFFFFF; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .24); box-shadow: none;
}
.hero .btn--secondary:hover, .nf .btn--secondary:hover, .band-dark .btn--secondary:hover, .sheet .btn--secondary:hover {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .42); color: #FFFFFF;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.btn--sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn[aria-disabled="true"]:hover { box-shadow: none; }
.band-dark .btn[aria-disabled="true"]:hover, .hero .btn[aria-disabled="true"]:hover { background: rgba(255, 255, 255, .05); color: #FFFFFF; border-color: rgba(255, 255, 255, .24); }
:focus-visible { outline-offset: 3px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Arrow links: the line-and-point glyph; the point turns coral on dark, vermilion on light */
.arrow-link { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero .arrow-link, .band-dark .arrow-link, .nf .arrow-link { color: var(--sg-coral-text); }
.hero .arrow-link .arrow-link__pt, .band-dark .arrow-link .arrow-link__pt { fill: var(--sg-coral); }
.link, .prose a, .faq__body a, .form__privacy a, .trust a, .cta-links a, .form__failed a { text-underline-offset: 4px; }

.chip {
  height: 34px; padding: 0 14px; border-radius: 999px;
  font-weight: 600; letter-spacing: .06em;
  background: var(--sg-card); border-color: var(--sg-line-strong);
  box-shadow: 0 1px 2px rgba(16, 20, 24, .04);
}
.band-surface .chip { background: var(--sg-card); }
.badge { border-radius: 999px; height: 24px; padding: 0 10px; font-weight: 600; }

/* Severity pills: glowing, with a live point on HIGH. The label text is always present.
   Colours come from the tokens (--accent-text / --warn), so the pills read on light cards, on
   charcoal frames and in whole-page dark mode alike; the glow is built from currentColor. */
.pill { height: 24px; padding: 0 10px 0 9px; font-weight: 600; gap: 6px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 6px currentColor; }
.pill--high, .pill--medium {
  background: color-mix(in srgb, currentColor 6%, transparent); /* 6%: MEDIUM (#9A6412) stays 4.6:1 on white */
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent), 0 0 14px color-mix(in srgb, currentColor 28%, transparent);
}
.pill--high { color: var(--accent-text); }
.pill--high::before { animation: sg-pulse 2.2s ease-in-out infinite; }
.pill--medium { color: var(--warn); }
.frame .pill--high, .band-dark .pill--high, .hero .pill--high { color: var(--sg-coral-text); }
.pill--stat { height: 36px; padding: 0 16px 0 14px; font-size: 15px; }
.status-ok { font-weight: 600; }

/* ---------------------------------------------------------------------------
   05  Hero: every page opens on charcoal. The homepage carries the full art
       (faint mark and data trace); inner pages a shorter band with the faint mark.
   --------------------------------------------------------------------------- */
.hero, .nf {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg); color: var(--text);
}
.hero { padding-block: 40px 48px; }
@media (min-width: 600px)  { .hero { padding-block: 48px 56px; } }
@media (min-width: 1024px) { .hero { padding-block: 56px 72px; } }
.hero--home { padding-block: 44px 56px; }
@media (min-width: 600px)  { .hero--home { padding-block: 56px 64px; } }
@media (min-width: 1024px) { .hero--home { padding-block: 64px 80px; } }
.hero.has-grid, .nf.has-grid { background-image: none; }
.hero::before, .nf::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(900px 560px at 88% -12%, rgba(255, 106, 80, .30), transparent 62%),
    radial-gradient(760px 520px at -6% 108%, rgba(228, 67, 43, .16), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, #11151B 0%, #0E1116 55%, #0B0E13 100%);
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
  background-position: 0 0, 0 0, max(var(--gx), calc(50% - var(--container) / 2 + 32px)) 0, max(var(--gx), calc(50% - var(--container) / 2 + 32px)) 0, 0 0;
}
.hero:not(.hero--home)::before {
  background:
    radial-gradient(760px 420px at 92% -20%, rgba(255, 106, 80, .24), transparent 62%),
    radial-gradient(600px 400px at -6% 120%, rgba(228, 67, 43, .12), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, #11151B 0%, #0E1116 55%, #0B0E13 100%);
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
  background-position: 0 0, 0 0, max(var(--gx), calc(50% - var(--container) / 2 + 32px)) 0, max(var(--gx), calc(50% - var(--container) / 2 + 32px)) 0, 0 0;
}
.hero::after, .nf::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--sg-grain); background-size: 240px 240px;
  opacity: .07; mix-blend-mode: screen;
}
.hero > .container, .nf > .container { position: relative; z-index: 1; }

/* Art layers: the large faint mark geometry and the data trace */
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-art__mark {
  position: absolute; right: -4%; top: -14%;
  width: 720px; height: 720px;
  color: rgba(255, 255, 255, .045);
  --svls-accent: rgba(255, 106, 80, .12);
}
@media (max-width: 1023px) { .hero-art__mark { width: 420px; height: 420px; right: -110px; top: -60px; } }
.hero-art--lite .hero-art__mark { width: 560px; height: 560px; right: -3%; top: -36%; color: rgba(255, 255, 255, .04); --svls-accent: rgba(255, 106, 80, .11); }
@media (max-width: 1023px) { .hero-art--lite .hero-art__mark { width: 340px; height: 340px; right: -90px; top: -70px; } }
.hero-art__trace { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-art__line { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.hero-art__line--faint { stroke: rgba(255, 255, 255, .07); }
.hero-art__node { fill: rgba(255, 255, 255, .35); }
.hero-art__node--hot { fill: var(--sg-coral); filter: drop-shadow(0 0 6px rgba(255, 106, 80, .9)); }
.hero-art__pulse {
  fill: none; stroke: var(--sg-coral); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 150 2400; stroke-dashoffset: 2550;
  filter: drop-shadow(0 0 6px rgba(255, 106, 80, .85));
  animation: sg-trace 7s linear infinite;
}

.hero .section-mark .eyebrow, .nf .section-mark .eyebrow { color: rgba(243, 244, 246, .72); }
.hero__grid { margin-top: 36px; }
.hero:not(.hero--home) .hero__grid { margin-top: 28px; }
.hero__copy h1:not(.display) { max-width: 26ch; }
.hero__copy .lead, .nf .lead { margin-top: 24px; color: #B4BCC8; max-width: 56ch; font-size: clamp(17px, 0.35vw + 15.6px, 20px); }
.hero--home .hero__copy .lead { margin-top: 28px; }
.hero__copy .btn-row { margin-top: 32px; gap: 14px; }
.hero__copy .trust { color: #98A2B0; margin-top: 22px; }
.hero__copy .trust a { color: var(--accent-text); }
.hero__copy .status { color: #AEB6C2; }
.hero .product-lockup { color: #FFFFFF; }
.hero .product-lockup__by { color: #AEB6C2; }
.hero .legal__updated { color: #AEB6C2; }
.hero__sub { color: #FFFFFF; }

/* Figure column: the landscape diagram as a glass card; a product frame or workbench gets a coral halo */
.hero__diagram {
  position: relative; gap: 14px;
  padding: 22px 22px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #E6EAF0;
}
.hero__diagram::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 116, .8), transparent);
}
.hero__diagram svg { color: #E6EAF0; }
.hero__diagram figcaption {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08);
  color: #AEB6C2; letter-spacing: .08em;
}
.hero__diagram figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-coral); box-shadow: 0 0 8px var(--sg-coral); flex: none; }
@media (min-width: 1024px) { .hero__diagram { margin-top: 8px; padding: 22px 22px 16px; } }
.hero__aside { position: relative; }
.hero__aside::before {
  content: ""; position: absolute; inset: 10% -8% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 80, .22), transparent);
}

/* Platform labels on a hairline, then the proof figures in a glass panel (hero only) */
.hero .microlabels { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 0; }
.hero .microlabels > li { color: rgba(243, 244, 246, .66); letter-spacing: .08em; font-weight: 600; padding: 16px 0; }
.hero .microlabels > li + li { border-color: rgba(255, 255, 255, .09); }
@media (min-width: 600px) { .hero .microlabels > li { padding: 18px 24px; } .hero .microlabels > li:first-child { padding-left: 0; } }
@media (min-width: 1024px) { .hero--home .microlabels { margin-top: 64px; } }
.hero .proof-row {
  margin-top: 4px; border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero .proof-row > li { padding: 16px 20px; gap: 8px; }
.hero .proof-row > li + li { border-color: rgba(255, 255, 255, .09); }
.hero .proof-row__num { font: 700 30px/1 var(--font-heading); letter-spacing: -0.03em; color: #FFFFFF; min-width: 64px; }
.hero .proof-row__label { font-size: 13px; line-height: 18px; color: #AEB6C2; }
@media (min-width: 600px) {
  .hero .proof-row > li { padding: 22px 28px; gap: 6px; }
  .hero .proof-row > li:first-child { padding-left: 28px; }
  .hero .proof-row__num { font-size: 34px; }
}

/* 404: the dark page is a hero too */
.nf .nf__mark { color: #FFFFFF; }
.nf h1 { color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   06  Card system: every hairline-grid cell becomes a card (6px radius, 1px
       hairline, soft shadow); the lift is 2px on hover, pointer devices only.
   --------------------------------------------------------------------------- */
.hgrid { gap: 20px; }
.hgrid[class] > :nth-child(n) {
  position: relative;
  padding: 28px;
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius);
  background: var(--sg-card);
  box-shadow: var(--sg-shadow);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (max-width: 599px) { .hgrid[class] > :nth-child(n) { padding: 24px 20px; } }
@media (hover: hover) and (pointer: fine) {
  .hgrid[class] > .practice:hover, .hgrid[class] > .stat-cell:hover, .hgrid[class] > .control:hover, .hgrid[class] > .cred:hover,
  .hgrid[class] > .method-cell:hover, .hgrid[class] > .rule-cell:hover, .hgrid[class] > .shape:hover, .hgrid[class] > .place:hover,
  .tools[class] > li:hover, .nf__links[class] > li:hover, .method__step:hover, .steps[class] > li:hover, .faq:hover {
    transform: translateY(-2px); box-shadow: var(--sg-shadow-hover); border-color: var(--sg-line-strong);
  }
}

/* Stat cells */
.hgrid[class] > .stat-cell:nth-child(n) { padding-top: 34px !important; }
.hgrid[class] > .stat-cell:nth-child(n)::before { top: 20px; left: 28px; width: 10px; height: 10px; border-color: var(--sg-verm); }
.band-dark .hgrid[class] > .stat-cell:nth-child(n)::before { border-color: var(--sg-coral); }
@media (max-width: 599px) { .hgrid[class] > .stat-cell:nth-child(n)::before { left: 20px; } }
.stat-cell__num { margin-top: 10px; }
.stat-cell__label { font-size: 16px; line-height: 24px; font-weight: 600; margin-top: 14px; letter-spacing: -0.01em; }
.stat-cell__ctx { font-size: 14px; margin-top: 8px; }

/* Practice, offer, mode and value cards */
.practice__glyph {
  width: 44px; height: 44px; padding: 10px; box-sizing: border-box;
  border-radius: 10px; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.practice__num { margin-top: 20px; color: var(--accent-text); font-weight: 600; letter-spacing: .1em; }
.practice > .practice__num:first-child { margin-top: 0; }
.practice h3 { margin-top: 6px; font-size: 22px; }
.practice__body { color: var(--text-muted); }
.practice__typical { position: relative; border-top: 0; padding-top: 18px; margin-top: 18px; }
.practice__typical::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.practice__typical .eyebrow { color: var(--accent-text); font-weight: 600; }
.practice .arrow-link { margin-top: 12px; }
.practice .arrow-link + .arrow-link { margin-top: 4px; }

/* Method: four cards with a signal spine, first step lit */
.method { gap: 20px; }
.method__step {
  border-top: 0; padding: 28px; overflow: hidden;
  background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.method__step::before { top: 0; left: 0; width: 100%; height: 3px; border-radius: 0; background: var(--sg-line-strong); }
.method__step:first-child::before { background: var(--sg-gradient); }
.method__step > .numeral {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font: 600 12px/1 var(--font-mono); letter-spacing: .06em;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.method__step h4, .method__step .h4 { margin-top: 18px; font-size: 18px; }
.method__step p { color: var(--text-muted); margin-top: 10px; }
@media (min-width: 600px) { .method__step { padding-right: 28px; } }
.method__after { margin-top: 40px; }
.method__step .method__extra { position: relative; border-top: 0; padding-top: 14px; margin-top: 16px; }
.method__step .method__extra::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.method__extra .eyebrow { color: var(--accent-text); }
p.method__extra { color: var(--text-muted); }
/* Milestone timeline (Value Lens roadmap): compact cards, numerals as pills */
.method--milestones { gap: 12px; }
.method--milestones .method__step { padding: 14px 16px 16px; }
.method--milestones .method__step::before { height: 2px; }
.method--milestones .method__step > .numeral { width: auto; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; }
.method--milestones .milestone { margin-top: 8px; color: var(--text); font-size: 14px; line-height: 20px; }
@media (max-width: 599px) {
  .method--milestones { border-bottom: 0; }
  .method--milestones .method__step { padding: 12px 14px; column-gap: 12px; }
  .method--milestones .milestone { margin-top: 0; padding-top: 3px; }
}

/* ---------------------------------------------------------------------------
   07  Control model, spec table, diagrams, pull-quote
   --------------------------------------------------------------------------- */
.control .mono-title { position: relative; padding-bottom: 12px; margin-bottom: 4px; color: var(--text); }
.control .mono-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.control .mono-title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px; border-radius: 2px; background: linear-gradient(135deg, var(--sg-verm), var(--sg-coral)); }
.control h3 { font-size: 20px; }
.control h3 + .control__body { margin-top: 10px; }
.control__body { color: var(--text); }
.control__prevents .eyebrow { color: var(--accent-text); font-weight: 600; }
.control__line { font-size: 17px; line-height: 1.6; }

.control-diagram, .diagram {
  margin-top: 24px; padding: 28px 32px;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-card); border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow);
}
.diagram { margin-top: 32px; }
.diagram--arch { margin-top: 0; }
@media (max-width: 599px) { .diagram { padding: 20px; } }
.control-grid { margin-top: 32px; }

.spec-table {
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg); overflow: hidden;
  background: var(--sg-card); box-shadow: var(--sg-shadow);
}
.spec-table th, .spec-table td { padding: 14px 16px; border-top: 1px solid var(--sg-line); }
.spec-table thead th { background: var(--sg-band); border-top: 0; padding: 12px 16px; }
.spec-table tbody th { padding-left: 16px; }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover > * { background: var(--sg-card-2); }
@media (max-width: 599px) {
  .spec-table tbody th { padding-bottom: 4px; }
  .spec-table tbody td { padding-top: 0; padding-bottom: 14px; }
}

.pullquote {
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 0; padding: 32px;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-ink); color: #F3F4F6;
  box-shadow: 0 30px 60px -24px rgba(14, 17, 22, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.pullquote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 100% 0%, rgba(255, 106, 80, .28), transparent 65%); }
.pullquote::after { content: ""; position: absolute; left: 32px; top: 0; width: 44px; height: 3px; background: var(--sg-gradient); }
.pullquote h3 { color: #FFFFFF; font-size: 26px; line-height: 1.25; max-width: none; letter-spacing: -0.02em; }
.pullquote .muted { color: #AEB6C2; }
@media (min-width: 1024px) { .control-grid { align-items: start; } .control-grid .pullquote { border-left: 0; padding: 32px; } }
.control-links { margin-top: 40px; }

/* ---------------------------------------------------------------------------
   08  Lists, product feature, workbench
   --------------------------------------------------------------------------- */
.list-points > li::before { background: linear-gradient(135deg, var(--sg-verm), var(--sg-coral)); }
.list-rings > li::before { border-color: var(--text-muted); }
.two-col .mono-title { position: relative; padding-bottom: 12px; }
.two-col .mono-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.two-col ul { margin-top: 18px; }
.list-mono > li { border-color: var(--sg-line-strong); }
.list-mono > li:last-child { border-bottom: 0; }
.list-numbered, .list-numbered > li { border-color: var(--sg-line-strong); }
.list-numbered .numeral { color: var(--accent-text); }

.product-feature {
  position: relative; overflow: hidden;
  margin-top: 40px; padding: 32px 24px;
  border-radius: var(--sg-radius-lg); border: 1px solid var(--sg-line);
  background: var(--sg-card); box-shadow: var(--sg-shadow);
}
@media (min-width: 600px)  { .product-feature { padding: 40px; } }
.product-feature::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--sg-verm), var(--sg-coral) 40%, transparent 85%);
}
.product-lockup__name { font-weight: 700; letter-spacing: -0.02em; }
.product-feature__body { color: var(--text-muted); }

/* Workbench: a charcoal product surface with a coral halo; mono at 14px; the tiles stack on phones */
.workbench {
  --bg: #171C24; --surface: #10141B; --rule: rgba(255, 255, 255, .09);
  --text: #E6EAF0; --text-muted: #AEB6C2;
  color: var(--text);
  background: #10141B; border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px;
  padding: 16px;
  box-shadow: var(--sg-halo);
}
.workbench__bar { position: relative; padding: 11px 12px 11px 30px; font-size: 14px; line-height: 20px; border-radius: 8px; border-color: rgba(255, 255, 255, .10); }
.workbench__bar::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--sg-coral); box-shadow: 0 0 8px var(--sg-coral);
}
.workbench__col .eyebrow { color: var(--sg-coral-text); }
.workbench__col li, .workbench__line { color: #DDE2E9; font-size: 14px; line-height: 20px; }
.workbench__foot { color: #98A2B0; }
.workbench--lg { padding: 20px; }
.workbench--lg .workbench__bar { font-size: 15px; line-height: 24px; padding: 12px 16px 12px 34px; }
.workbench--lg .workbench__bar::before { left: 14px; }
.workbench--lg .workbench__col li, .workbench--lg .workbench__line { font-size: 14px; line-height: 20px; }

/* ---------------------------------------------------------------------------
   09  Dark bands and the Value Lens product frame
   --------------------------------------------------------------------------- */
.section.band-dark { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
.section.band-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(860px 520px at 100% 0%, rgba(255, 106, 80, .18), transparent 62%),
    radial-gradient(640px 420px at -4% 100%, rgba(228, 67, 43, .12), transparent 62%),
    linear-gradient(180deg, #10141A 0%, #0C0F14 100%);
}
.section.band-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--sg-grain); background-size: 240px 240px; opacity: .06; mix-blend-mode: screen;
}
.section.band-dark > .container { position: relative; z-index: 1; }
.band-dark h2, .band-dark .h2 { color: #FFFFFF; }
.band-dark .subcopy { color: #B4BCC8; }
.vl-copy .badge { margin-top: 28px; }
.vl-copy .strap { border-left: 3px solid var(--sg-coral); padding-left: 16px; color: #FFFFFF; }
.vl-copy .status { color: #98A2B0; }
.vl-grid > .col-6[data-reveal] { position: relative; }
.vl-grid > .col-6[data-reveal]::before {
  content: ""; position: absolute; inset: 12% -8% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 80, .22), transparent);
}
.frame {
  --rule: rgba(255, 255, 255, .08); --surface: #10141B; --bg: #171C24;
  --text: #E6EAF0; --text-muted: #AEB6C2;
  position: relative;
  background: #10141B; color: var(--text);
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 14px;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 30px 60px -30px rgba(255, 106, 80, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.frame.band-dark { box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 30px 60px -30px rgba(255, 106, 80, .28), inset 0 1px 0 rgba(255, 255, 255, .08); }
.frame__head {
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  color: #DDE2E9;
}
.frame__head > span:nth-of-type(1) { color: #FFFFFF; font-weight: 600; }
.frame__table { font-size: 14px; line-height: 20px; }
.frame__table th { padding: 11px 10px; color: #98A2B0; background: rgba(0, 0, 0, .18); }
.frame__table td { padding: 11px 10px; }
.frame__table th:first-child, .frame__table td:first-child { padding-left: 18px; }
.frame__table th:last-child, .frame__table td:last-child { padding-right: 18px; }
.frame__table tbody tr:not(.frame__detail):hover td { background: rgba(255, 255, 255, .025); }
.frame__table tr.is-expanded td { background: rgba(255, 106, 80, .06); }
.frame__table .frame__detail td { padding: 0 18px 14px; background: rgba(255, 106, 80, .06); }
.frame__panel { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .08); border-radius: 8px; padding: 16px; }
.frame__block li { font-size: 13px; line-height: 19px; }
.frame__foot { background: rgba(0, 0, 0, .2); color: #98A2B0; }
.frame__actions .btn--sm { border-radius: 6px; font-weight: 500; }
@media (max-width: 699px) {
  .frame__table tr { padding: 12px 18px; }
  .frame__table tr.frame__detail { padding: 0 18px 14px; }
}
@container (max-width: 539px) {
  .frame__table tr { padding: 12px 18px; }
  .frame__table tr.frame__detail { padding: 0 18px 14px; }
}

/* Six steps (Value Lens, dark band) as cards */
.steps { gap: 20px; border-bottom: 0; }
.steps[class] > li:nth-child(n) {
  position: relative; padding: 28px; border: 0; border-left: 0;
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius);
  background: var(--sg-card); box-shadow: var(--sg-shadow);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (max-width: 599px) { .steps[class] > li:nth-child(n) { padding: 24px 20px; } }
.steps .numeral { color: var(--accent-text); }
.steps h3 { margin-top: 12px; }
.steps p { color: var(--text-muted); }
.steps code { color: var(--text); }

/* ---------------------------------------------------------------------------
   10  Credentials, chips, book, slim bands, FAQ, page components
   --------------------------------------------------------------------------- */
.chip-row { position: relative; border-top: 0; padding: 18px 0; }
.chip-row::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.chip-row:last-of-type { border-bottom: 0; }
.chip-row .eyebrow { padding-top: 9px; font-weight: 600; }
.chip-rows { margin-bottom: 40px; }
.cred h3 { font-size: 19px; margin-bottom: 14px; }
.book__cover {
  width: 168px; padding: 16px 14px; border: 0;
  border-left: 5px solid var(--sg-coral); border-radius: 4px 8px 8px 4px;
  background: linear-gradient(160deg, #1D2430 0%, #0E1116 100%);
  color: #FFFFFF; font-size: 16px; line-height: 22px;
  box-shadow: 0 24px 40px -20px rgba(14, 17, 22, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.stack-chips .chip, .team__roles .chip { border-radius: 8px; }

/* Slim bands (partner, lead magnet, cross-link, About's footnote strip): the copy and action sit in one card */
.partner-band, .slim-band, .how-strip { border: 0; }
.partner-band .grid, .slim-band .grid {
  position: relative; overflow: hidden;
  margin-top: 24px; padding: 28px 24px;
  background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow);
}
@media (min-width: 600px) { .partner-band .grid, .slim-band .grid { padding: 36px 40px; } }
.partner-band .grid::before, .slim-band .grid::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sg-verm), var(--sg-coral)); }
.partner-band__body, .slim-band__body { color: var(--text-muted); }
.partner-band__action .mono-note { font-weight: 600; }
.how-strip__figure svg { padding: 20px; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg); background: var(--sg-card); box-shadow: var(--sg-shadow); }

/* FAQ: each question is a card; the plus glyph turns coral when open */
.faq-list { border-bottom: 0; display: grid; gap: 12px; }
.faq {
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius);
  background: var(--sg-card); box-shadow: var(--sg-shadow);
  padding: 0 24px;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (max-width: 599px) { .faq { padding: 0 20px; } }
.faq summary { padding: 18px 0; }
.faq summary:focus-visible { outline-offset: -2px; border-radius: 4px; }
.faq[open] { border-color: var(--sg-line-strong); }
.faq[open] .faq__glyph { color: var(--accent-text); }
.faq__body { padding-bottom: 22px; color: var(--text-muted); }

/* Page components on inner pages */
.tools { gap: 16px; }
.tools[class] > li:nth-child(n) { padding: 20px; }
.tool__name { color: var(--accent-text); }
.tools p { color: var(--text-muted); }
.coverage-scale[class] > li:nth-child(n) { padding: 18px 24px; }
.rule-cell .mono-title { color: var(--accent-text); }
.rule-cell p { color: var(--text-muted); }
.shape h3 { margin-top: 10px; }
.shape__gate { position: relative; border-top: 0; padding-top: 14px; }
.shape__gate::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.shape__gate .eyebrow { color: var(--accent-text); }
.place h3 { margin-top: 10px; }
.story__strip { margin-top: 40px; border-top: 0; border-bottom: 0; gap: 12px; }
.story__strip > li { border: 1px solid var(--sg-line) !important; border-radius: var(--sg-radius); background: var(--sg-card); padding: 14px 18px !important; box-shadow: var(--sg-shadow); }
.legal__section { border-top: 0; position: relative; padding-top: 22px; }
.legal__section::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--sg-hairline); }
.legal__section .numeral { color: var(--accent-text); }
.legal__sections { border-bottom: 0; }
.notice { border: 1px solid var(--sg-line); border-left: 4px solid #B7791F; border-radius: 0 var(--sg-radius-lg) var(--sg-radius-lg) 0; background: var(--sg-card); box-shadow: var(--sg-shadow); padding: 20px 24px; }
.legal-aside__links, .legal-aside__links li { border-color: var(--sg-line-strong); }
.offices, .offices__row { border-color: var(--sg-line-strong); }
.contact__block + .contact__block { border-color: var(--sg-line-strong); }
.nf__links > li { padding: 24px !important; }
.nf__link { color: #FFFFFF; }
.nf__link:hover { text-decoration-color: var(--sg-coral); }
.nf__link .arrow-link__pt { fill: var(--sg-coral); }
.nf__desc { color: #AEB6C2; }

/* ---------------------------------------------------------------------------
   11  Forms and closing CTA
   --------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background-image: radial-gradient(var(--sg-line-strong) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: max(var(--gx), calc(50% - var(--container) / 2)) 0;
}
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: -220px; width: 1000px; max-width: 160vw; height: 560px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 80, .12), transparent);
}
.cta-band > .container { position: relative; }
#beta.has-grid { background-image: radial-gradient(var(--sg-line-strong) 1px, transparent 1.5px); background-size: 28px 28px; background-position: max(var(--gx), calc(50% - var(--container) / 2)) 0; }
.form-title { font-size: 22px; }
.input, .select select, textarea.input {
  border-radius: 8px; border-color: var(--sg-line-strong); background: var(--sg-card);
  box-shadow: inset 0 1px 2px rgba(16, 20, 24, .04);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select select:focus, textarea.input:focus { border-color: var(--sg-verm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-verm) 22%, transparent); }
.input:focus-visible, .select select:focus-visible { outline: none; }
.choice input { accent-color: var(--sg-verm); }
.field.is-invalid .input, .field.is-invalid .select select { border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 16%, transparent); }
.field__error { font-weight: 500; }
.form .btn { margin-top: 4px; }
/* The contact form and the Value Lens beta form sit on light cards */
.contact__form .form, #beta .form {
  padding: 28px 24px; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg);
  background: var(--sg-card); box-shadow: var(--sg-shadow);
}
@media (min-width: 600px) { .contact__form .form, #beta .form { padding: 32px; } }
@media (min-width: 1024px) { .contact__form { padding-right: 0; } }
.form__success {
  border: 1px solid var(--sg-line); border-left: 4px solid var(--success); border-radius: 0 var(--sg-radius-lg) var(--sg-radius-lg) 0;
  background: var(--sg-card); box-shadow: var(--sg-shadow);
}
.form__failed { border: 1px solid var(--sg-line); border-left: 4px solid var(--accent-text); border-radius: 0 var(--sg-radius) var(--sg-radius) 0; background: var(--sg-card); }
.cta-band__after { margin-top: 40px; }
.cta-band__after .trust { font-weight: 500; color: var(--text); }

/* ---------------------------------------------------------------------------
   12  Footer
   --------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; padding: 72px 0 40px; background: var(--bg); }
@media (min-width: 1024px) { .site-footer { padding: 88px 0 44px; } }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sg-verm) 25%, var(--sg-coral) 50%, var(--sg-verm) 75%, transparent);
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(760px 420px at 100% 100%, rgba(255, 106, 80, .12), transparent 65%);
}
.footer-top { gap: 40px; }
.footer__brand { border-top: 0; padding: 0; }
.footer__brand .brand__lockup { height: 44px; }
.footer__strap { font: 600 18px/28px var(--font-heading); letter-spacing: -0.01em; color: #FFFFFF; margin-top: 28px; }
.footer__founded { color: #AEB6C2; }
.footer-nav { border-left: 0; gap: 24px; }
.footer-nav > .footer__col:nth-child(n) { border: 0; padding: 0; }
.footer__col .eyebrow { color: var(--sg-coral-text); font-weight: 600; }
.footer__col ul { margin-top: 14px; }
.footer__col a { color: #D5DAE1; transition: color var(--t-fast) var(--ease); }
.footer__col a:hover { color: #FFFFFF; text-decoration-color: var(--sg-coral); }
@media (min-width: 1024px) { .footer-top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } .footer-nav { gap: 32px; } }
.footer-bottom { border-color: rgba(255, 255, 255, .08); margin-top: 56px; padding-top: 28px; color: #AEB6C2; }
.footer-bottom a { color: #D5DAE1; }
.site-footer .todo { color: #E6B05C; }
.footer__status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 999px;
  background: rgba(255, 255, 255, .03); color: #AEB6C2;
  max-width: 100%;
}
@media (max-width: 599px) { .footer__status { border-radius: 12px; } }
.footer__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E6B05C; box-shadow: 0 0 8px #E6B05C; flex: none; }

/* ---------------------------------------------------------------------------
   13  Motion: the hero trace, the card lift and the glow pulse, nothing else.
       Reduced motion: every animation and transition is already off in
       site.css; the trace shows as a still line and nothing lifts.
   --------------------------------------------------------------------------- */
@keyframes sg-trace { from { stroke-dashoffset: 2550; } to { stroke-dashoffset: 0; } }
@keyframes sg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.75); } }
.reveal { transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  .hero-art__pulse { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .45; }
  .pill--high::before { animation: none; }
  .hgrid[class] > :nth-child(n):hover, .method__step:hover, .steps[class] > li:hover, .faq:hover, .tools[class] > li:hover, .nf__links[class] > li:hover { transform: none; }
}