/* =========================================================================
   OverAI landing page
   Tokens mirror `desing/OverAI Design System/colors_and_type.css`.
   Marketing surfaces widen two product rules on purpose (approved 2026-08-06):
     - heading weight goes to 600/700 (product UI keeps 400)
     - the banner gradient is reused as a hero/CTA surface
   Everything else (palette, radii, Poppins, no emoji, no exclamation marks,
   severity colors paired with a label) follows the product design system.
   ========================================================================= */

/* ---------- Poppins (subset of the brand TTFs, converted to woff2) ------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/Poppins-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/Poppins-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/Poppins-Bold.woff2') format('woff2'); }

/* =========================================================================
   Tokens
   ========================================================================= */
:root {
  color-scheme: light;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Indigo ramp, straight from the product theme */
  --blue-0: #e1e8ff; --blue-1: #cdd8ff; --blue-2: #b3c4ff; --blue-3: #94acff;
  --blue-4: #708fff; --blue-5: #4d6dff; --blue-6: #2e51e5; --blue-7: #1e40af;
  --blue-8: #18348f; --blue-9: #132b75;

  --light-2: #f4f4f7; --light-3: #f0f0f4; --light-4: #ebebf0; --light-5: #e4e4eb;
  --gray-0: #dbdde8; --gray-2: #bfc3d7; --gray-3: #aaafc9; --gray-5: #67709f;
  --gray-6: #565f89; --gray-8: #3e4463; --gray-9: #353a54;
  --dark-5: #1c1c28; --dark-7: #14141d; --dark-8: #111118; --dark-9: #0f0f15;

  --red-5: #ff3b3b; --orange-5: #e57a00; --yellow-5: #ffc32f; --teal-5: #00b7c4;

  /* Semantic roles */
  --bg:            #ffffff;
  --bg-alt:        var(--light-2);
  --bg-sunk:       var(--light-3);
  --surface:       #ffffff;
  --surface-2:     var(--light-2);
  --fg:            var(--gray-9);
  --fg-body:       var(--gray-8);
  /* gray-5 (#67709f) measures 4.20:1 on the sunk footer surface, so muted
     body copy sits one step darker at gray-6. */
  --fg-muted:      var(--gray-6);
  --fg-inverse:    #ffffff;
  --border:        var(--gray-0);
  --border-strong: var(--gray-2);
  --accent:        var(--blue-5);
  --accent-hover:  var(--blue-6);
  /* --accent as *text* on white is 4.25:1. Anything rendered as small copy
     (numerals, role labels, inline icons, links) uses --accent-text instead. */
  --accent-text:   var(--blue-6);
  --accent-quiet:  var(--blue-0);
  --deep:          var(--blue-9);
  /* Affirmative mark on the capability list. Green reads as "yes" where the
     indigo accent would read as a link. Darkened to clear 4.5:1 on --surface. */
  --ok:            #0a7a58;

  /* Filled buttons get their own ramp step. The product primary --blue-5 on
     white text measures 4.25:1, just under the WCAG AA 4.5 floor for 15px
     labels, so the CTA drops one shade deeper. Links and icons keep --accent. */
  --btn-bg:       var(--blue-6);
  --btn-bg-hover: var(--blue-7);
  --btn-fg:       #ffffff;
  --gradient:      linear-gradient(135deg, #132b75 0%, #18348f 100%);

  --shadow-sm: 0 1px 3px rgba(28,28,40,.06), 0 1px 2px rgba(28,28,40,.04);
  --shadow-md: 0 4px 12px rgba(28,28,40,.08), 0 1px 2px rgba(28,28,40,.04);
  --shadow-lg: 0 12px 28px rgba(28,28,40,.12), 0 4px 8px rgba(28,28,40,.06);
  --shadow-xl: 0 32px 64px rgba(19,43,117,.18), 0 8px 20px rgba(19,43,117,.10);
  /* Near-solid on purpose. At .35 alpha the ring measured 1.6:1 against the
     page background, under the 3:1 WCAG 1.4.11 asks of a focus indicator. */
  --focus:     0 0 0 3px rgba(46,81,229,.9);

  /* Shape lock: buttons 8, cards 16, pills 999. No other radii on the page. */
  --r-btn: 8px;
  --r-card: 16px;
  --r-pill: 999px;

  --page: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { color-scheme: dark; }
}
:root[data-theme='dark'] { color-scheme: dark; }

/* Dark palette. Hierarchy parity with light: the accent still pops, the
   indigo stays recognisably indigo rather than washing out to grey. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:            var(--dark-8);
    --bg-alt:        var(--dark-7);
    --bg-sunk:       var(--dark-9);
    --surface:       var(--dark-5);
    --surface-2:     #191924;
    --fg:            #f2f3f9;
    --fg-body:       #c8cbdd;
    --fg-muted:      #9095b4;
    --border:        #2a2a3c;
    --border-strong: #3a3a52;
    --accent:        var(--blue-4);
    --accent-hover:  var(--blue-3);
    --accent-quiet:  #1d2450;
    --accent-text:   var(--blue-4);
    --ok:            #3ddc97;
    /* On dark the filled CTA brightens and takes near-black text: 6.3:1,
       versus 2.98:1 for white-on-blue-4. */
    --btn-bg:        var(--blue-4);
    --btn-bg-hover:  var(--blue-3);
    --btn-fg:        var(--dark-9);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 28px rgba(0,0,0,.5);
    --shadow-xl: 0 32px 64px rgba(0,0,0,.6);
    --focus:     0 0 0 3px rgba(148,172,255,.92);
  }
}
:root[data-theme='dark'] {
  --bg:            var(--dark-8);
  --bg-alt:        var(--dark-7);
  --bg-sunk:       var(--dark-9);
  --surface:       var(--dark-5);
  --surface-2:     #191924;
  --fg:            #f2f3f9;
  --fg-body:       #c8cbdd;
  --fg-muted:      #9095b4;
  --border:        #2a2a3c;
  --border-strong: #3a3a52;
  --accent:        var(--blue-4);
  --accent-hover:  var(--blue-3);
  --accent-quiet:  #1d2450;
  --accent-text:   var(--blue-4);
  --ok:            #3ddc97;
  --btn-bg:        var(--blue-4);
  --btn-bg-hover:  var(--blue-3);
  --btn-fg:        var(--dark-9);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.5);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.6);
  --focus:     0 0 0 3px rgba(148,172,255,.92);
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--fg); margin: 0; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.1;  font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.18; font-weight: 600; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0; }
a  { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, button, summary, [tabindex]):focus-visible {
  /* A transparent outline rather than `outline: none`. box-shadow is dropped
     in forced-colors mode, so `none` would leave those users with no focus
     indicator at all; a real outline gets substituted by the system colour. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus);
  border-radius: var(--r-btn);
}

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.lede { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--fg-muted); max-width: 62ch; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 50px; padding-inline: 24px;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font: inherit; font-size: .9375rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease-out, border-color .15s ease-out,
              color .15s ease-out, transform .1s ease-out, box-shadow .15s ease-out;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); color: var(--fg); border-color: var(--fg-muted); }
/* On the indigo gradient the primary flips to solid white for contrast. */
.btn--onDeep { background: #fff; color: var(--blue-9); }
.btn--onDeep:hover { background: var(--blue-0); color: var(--blue-9); }
.btn--outlineDeep { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--outlineDeep:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--sm { height: 40px; padding-inline: 16px; font-size: .875rem; }

/* =========================================================================
   Header
   ========================================================================= */
.hdr {
  position: sticky; top: 0; z-index: 50;
  height: 72px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
.hdr[data-stuck='true'] { border-bottom-color: var(--border); }
.hdr__in { display: flex; align-items: center; gap: 32px; width: 100%; }
.hdr__brand { display: flex; align-items: center; flex: none; }
/* Wordmark: sized by height so the 3.33 aspect stays honest. Slightly shorter
   than the old square mark because a wordmark reads wider at the same height. */
.hdr__brand img { height: 26px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: 28px; margin-inline: auto; }
.hdr__nav a { color: var(--fg-muted); font-size: .9375rem; font-weight: 400; transition: color .15s ease-out; }
.hdr__nav a:hover { color: var(--fg); }
.hdr__act { display: flex; align-items: center; gap: 10px; flex: none; }

.iconbtn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: transparent; color: var(--fg-muted); cursor: pointer;
  transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out;
}
.iconbtn:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface-2); }
.iconbtn .fa-moon { display: none; }
:root[data-theme='dark'] .iconbtn .fa-moon { display: inline; }
:root[data-theme='dark'] .iconbtn .fa-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .iconbtn .fa-moon { display: inline; }
  :root:not([data-theme='light']) .iconbtn .fa-sun  { display: none; }
}

.navtoggle { display: none; }

@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .navtoggle { display: inline-flex; }
  .hdr__act .btn--ghost { display: none; }
}
@media (max-width: 560px) {
  .hdr__act .btn--primary { display: none; }
}

/* Mobile menu */
.mnav {
  position: fixed; inset: 72px 0 auto 0; z-index: 49;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 12px var(--gutter) 24px;
  display: none; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-lg);
}
.mnav[data-open='true'] { display: flex; }
/* :not(.btn) so the CTA keeps its own colour and padding. Plain `.mnav a`
   is more specific than `.btn--primary`, so it was repainting the button
   with body text colour on the accent fill. */
.mnav a:not(.btn) { padding: 12px 4px; color: var(--fg); font-size: 1rem; border-bottom: 1px solid var(--border); }
.mnav a:not(.btn):last-of-type { border-bottom: 0; }
.mnav .btn { margin-top: 12px; }

/* =========================================================================
   Hero (asymmetric split)
   ========================================================================= */
/* Horizontal clip only: the screen bleeds right and must not open a
   scrollbar, but the detection card hangs below the frame on purpose. */
.hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(72px, 7vw, 96px); overflow-x: clip; overflow-y: visible; }
.hero__grid {
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1000px) {
  /* The copy column carries a 6-word headline that has to hold 2 lines, so it
     takes the wider share. The screen still reads large because it bleeds
     past the container on the right. */
  .hero__grid { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding-inline: 12px; margin-bottom: 22px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .78125rem; font-weight: 500; color: var(--fg-muted);
}
.hero__eyebrow i { color: var(--accent-text); font-size: .75rem; }
/* Sized so the headline holds 2 lines from 1000px up. Turkish runs long, so
   this sits below the global h1 ceiling rather than at it. */
.hero h1 { margin-bottom: 20px; font-size: clamp(2.1rem, 3.5vw, 3.05rem); }
.hero h1 em { font-style: normal; color: var(--accent-text); }
/* The four capabilities spell OVER. Lead letters take the accent so the
   acronym lands without a sentence explaining it. */
.hero__over {
  margin-bottom: 16px; font-size: clamp(.8125rem, 1.1vw, .9375rem);
  font-weight: 500; color: var(--fg-muted); letter-spacing: .01em;
}
.hero__over b { color: var(--accent-text); font-weight: 700; }

.hero__sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--fg-body);
  max-width: 38ch; margin-bottom: 32px;
  padding-left: 16px; border-left: 2px solid var(--accent);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__shot {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.hero__shot img { width: 100%; height: auto; }
/* The bleed lives on .hero__visual (see the motion block) so the floating
   detection card can sit outside the frame's rounded clip. */

/* Product screenshots are captured from the light-mode UI kit. On the dark
   page they are framed and pulled back slightly so a white panel does not
   glare next to near-black surfaces. */
.hero__shot img, .guided__shot img, .dash__shot img { transition: filter .2s ease-out; }
:root[data-theme='dark'] .hero__shot img,
:root[data-theme='dark'] .guided__shot img,
:root[data-theme='dark'] .dash__shot img { filter: brightness(.86) contrast(1.03); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero__shot img,
  :root:not([data-theme='light']) .guided__shot img,
  :root:not([data-theme='light']) .dash__shot img { filter: brightness(.86) contrast(1.03); }
}

/* =========================================================================
   Framework strip
   ========================================================================= */
.frameworks { border-block: 1px solid var(--border); background: var(--bg-alt); }
.frameworks__in { padding-block: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.frameworks__label { font-size: .8125rem; color: var(--fg-muted); flex: none; }
.frameworks__list { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.frameworks__list li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--fg);
}
.frameworks__list i { color: var(--fg-muted); font-size: .875rem; }

/* =========================================================================
   Shared section head
   ========================================================================= */
.problem__head, .ground__head, .diff__head, .inds__head,
.does__head, .layer__head, .isosec__head, .causal__head, .domains__head, .dist__head {
  max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px);
}
.problem__head h2, .ground__head h2, .diff__head h2, .inds__head h2,
.does__head h2, .layer__head h2, .isosec__head h2, .causal__head h2,
.domains__head h2, .dist__head h2 { margin-bottom: 14px; }

/* =========================================================================
   Quad: the page's one card grid. Four across by default, three when the
   section asks for it. Used by problem, regulation, risk types, difference
   and industries so those sections cannot drift apart visually.
   ========================================================================= */
.quad { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .quad--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quad__item {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); padding: 26px 24px 28px;
}
.quad__item > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: var(--r-btn);
  background: var(--accent-quiet); color: var(--accent-text);
  font-size: .9375rem;
}
.quad__item h3 { margin-bottom: 8px; }
.quad__item p { font-size: .9375rem; color: var(--fg-muted); }

/* Deep variant for the industries row: same shape, indigo surface. */
.quad__item--deep {
  background: var(--gradient); border-color: transparent;
  position: relative; overflow: hidden;
}
.quad__item--deep h3 { color: #fff; }
.quad__item--deep p { color: rgba(255,255,255,.78); }
.quad__item--deep > i { background: rgba(255,255,255,.14); color: #fff; }

.problem { background: var(--bg); }

/* =========================================================================
   Flow (numbered rail)
   ========================================================================= */
.flow { background: var(--bg-alt); }
.flow__head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.flow__head h2 { margin-bottom: 14px; }
.flow__rail { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 720px)  { .flow__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flow__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Seven steps into a four-column rail: the last one spans two so the second
   row fills exactly, and the Health Score gets the emphasis it earns. */
@media (min-width: 1040px) {
  .flow__rail--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow__rail--7 .flow__step--end { grid-column: span 2; }
}
.flow__step--end { background: var(--gradient); }
.flow__step--end:hover { background: var(--gradient); }
.flow__step--end h3 { color: #fff; }
.flow__step--end p { color: rgba(255,255,255,.80); }
.flow__step--end .flow__step__n { color: rgba(255,255,255,.72); }
.flow__step--end .flow__step__meta { color: rgba(255,255,255,.65); }
.flow__step--end:hover .flow__step__n { color: #fff; }
.flow__step { background: var(--surface); padding: 28px 26px 30px; position: relative; }
.flow__step__n {
  font-family: var(--mono); font-size: .75rem; font-weight: 500; color: var(--accent-text);
  display: block; margin-bottom: 14px;
}
.flow__step h3 { margin-bottom: 8px; }
.flow__step p { font-size: .9375rem; color: var(--fg-muted); }
.flow__step__meta { margin-top: 14px; font-family: var(--mono); font-size: .75rem; color: var(--fg-muted); }
.flow__note {
  margin-top: 24px; display: flex; gap: 12px; align-items: flex-start;
  font-size: .9375rem; color: var(--fg-muted);
}
.flow__note i { color: var(--accent-text); margin-top: 4px; }

/* =========================================================================
   Grounding statistics (bento)
   ========================================================================= */
.ground { background: var(--bg-alt); }
.bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bento--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cell {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.cell p { font-size: .9375rem; color: var(--fg-muted); }
.cell__stat {
  font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1;
  color: var(--accent-text); letter-spacing: -.03em;
}
/* Two of the four "statistics" are names, not numbers, so they take a
   smaller size than the counted figures rather than shouting alongside them. */
.cell__stat--word { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.cell__unit { font-size: .8125rem; color: var(--fg); font-weight: 500; }

.ground__sub {
  margin-top: clamp(44px, 5vw, 64px); margin-bottom: 20px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}


/* =========================================================================
   Score points list
   The Score section itself went with the deck v3 rewrite; this list is the
   part that survived, now shared by the dashboard and guided sections.
   ========================================================================= */
.score__points { margin-top: 26px; display: grid; gap: 16px; }
.score__points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: .9375rem; color: var(--fg-muted); }
.score__points i { color: var(--accent-text); margin-top: 5px; font-size: .875rem; }
.score__points strong { color: var(--fg); font-weight: 500; }

/* =========================================================================
   Guided implementation + enterprise dashboard (mirrored splits)
   ========================================================================= */
.guided { background: var(--bg-alt); }
.dash { background: var(--bg); }
.guided__grid, .dash__grid {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 1000px) {
  .guided__grid { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
  .dash__grid   { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
}
.guided h2, .dash h2 { margin-bottom: 16px; }

/* =========================================================================
   Product shot kit
   Three sections show a real product screen. Each one gets the same two
   devices so they read as one system, but the CONTENT of the second device
   is different every time and matches what that section claims:
     guided → the readiness checklist filling, one slot at a time
     score  → the four board columns, with Done lighting last and alone
     dash   → the table being read row by row, and the portfolio counted
   Numbers are taken from the screenshot each HUD sits on. Nothing invented.

   height:auto is load-bearing, not tidiness. The markup carries width/height
   attributes for aspect-ratio, and those land as presentational pixel values:
   without this the image renders 1125px tall, distorted, and sits so far down
   the page that lazy loading never fires.
   ========================================================================= */
.shot { position: relative; }
.shot__frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.guided__shot img, .dash__shot img { width: 100%; height: auto; display: block; }

/* One slow pass, same language as the hero: linear, wide, soft. */
.shot__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(77,109,255,.00) 32%,
    rgba(77,109,255,.12) 44%,
    rgba(77,109,255,.22) 49%,
    rgba(255,255,255,.32) 50%,
    rgba(77,109,255,.22) 51%,
    rgba(77,109,255,.12) 56%,
    rgba(77,109,255,.00) 68%,
    transparent 100%);
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}
.shot.is-in .shot__scan { animation: scanPass 2.6s linear .25s 1 forwards; }

/* Dashboard only: a reading band that snaps down the six table rows.
   Positioned as a share of the frame, so it holds at any width. */
.shot__rows {
  position: absolute; left: 3.5%; right: 3.5%; top: 0; z-index: 3;
  height: 7.4%; pointer-events: none; opacity: 0;
  border-left: 2px solid var(--blue-5);
  background: linear-gradient(90deg, rgba(77,109,255,.20), rgba(77,109,255,.04));
}
.shot.is-in .shot__rows {
  animation: rowStep 2.3s steps(6, jump-none) .75s forwards,
             rowFade 2.3s linear .75s forwards;
}
@keyframes rowStep {
  from { transform: translate3d(0, 540%, 0); }
  to   { transform: translate3d(0, 1190%, 0); }
}
@keyframes rowFade { 0% { opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }

/* The read-out strip. Hangs off the bottom edge like the hero card so it
   reads as a layer over the product, not a caption under a picture. */
.shot__hud {
  position: absolute; z-index: 4;
  left: clamp(12px, 3vw, 26px); bottom: -24px;
  max-width: calc(100% - 2 * clamp(12px, 3vw, 26px));
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px;
  padding: 10px 14px;
  border-radius: var(--r-card); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
}
.shot.is-in .shot__hud { animation: heroIn var(--dur-m) var(--ease) 1.45s forwards; }
/* The stepping rows stay off below 860px — they travel across the frame and at
   this size that is noise. The HUD strip comes back: like the hero card it is a
   read-out OF the shot behind it, and hiding it was what made the lower sections
   look static on a phone. It only shrinks; it is a 46px strip on desktop, so it
   never threatens to cover the screenshot the way the hero card can. */
@media (max-width: 860px) { .shot__rows { display: none; } }

.hud__pulse {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--teal-5); flex: none;
  animation: pulse 2.4s ease-out 2.6s infinite;
}
.hud__label { font-size: .75rem; font-weight: 500; color: var(--fg-muted); }
.hud__val { font-size: .78125rem; color: var(--fg-muted); }
.hud__val b {
  font-size: .9375rem; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Seven slots, filling left to right. */
.hud__dots { display: flex; gap: 4px; }
.hud__dots li {
  width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--border-strong);
  transform: scale(.7); opacity: .5;
  animation: dotFill .45s var(--ease) forwards;
}
.hud__dots li:nth-child(1) { animation-delay: 1.70s; }
.hud__dots li:nth-child(2) { animation-delay: 1.86s; }
.hud__dots li:nth-child(3) { animation-delay: 2.02s; }
.hud__dots li:nth-child(4) { animation-delay: 2.18s; }
.hud__dots li:nth-child(5) { animation-delay: 2.34s; }
.hud__dots li:nth-child(6) { animation-delay: 2.50s; }
.hud__dots li:nth-child(7) { animation-delay: 2.66s; }
@keyframes dotFill { to { background: var(--accent); transform: none; opacity: 1; } }

/* Board columns. Done arrives last, in the affirmative colour, because it is
   the only column the Health Score reacts to. */
.hud__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.hud__pills li {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding-inline: 9px; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-muted);
  opacity: 0; transform: translate3d(0, 5px, 0);
  animation: chipIn .45s var(--ease) forwards;
}
.hud__pills li b { color: var(--fg); font-weight: 600; }
.hud__pills li:nth-child(1) { animation-delay: 1.70s; }
.hud__pills li:nth-child(2) { animation-delay: 1.86s; }
.hud__pills li:nth-child(3) { animation-delay: 2.02s; }
.hud__pills li:nth-child(4) { animation-delay: 2.34s; }
.hud__pills li.is-done {
  border-color: var(--ok); color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.hud__pills li.is-done b { color: var(--ok); }
.hud__pills li.is-done i { font-size: .625rem; }

/* Small-screen scaling for the shot HUD, mirroring what the hero card does:
   narrower gaps, smaller type, less hang, so the strip sits on the shot's lower
   edge instead of spanning it. */
@media (max-width: 860px) {
  .shot__hud   { bottom: -16px; gap: 6px 8px; padding: 7px 10px; }
  .hud__label  { font-size: .65rem; }
  .hud__dots   { gap: 3px; }
}
@media (max-width: 480px) {
  .shot__hud   { left: 8px; bottom: -12px; gap: 4px 6px; padding: 5px 7px;
                 max-width: calc(100% - 16px); }
  .hud__label  { font-size: .5rem; }
  .hud__dots li  { width: 5px; height: 5px; }
  .hud__pills li { font-size: .48rem; padding: 1px 5px; }
}

/* =========================================================================
   Difference: cards plus the capability list
   ========================================================================= */
.diff { background: var(--bg); }
.diff__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) {
  .diff__grid { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); align-items: start; }
}
.diff__cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .diff__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quad__item--wide { grid-column: 1 / -1; }

.caps {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
.caps__hd {
  background: var(--deep); color: #fff; padding: 16px 22px;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.caps__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 22px; border-top: 1px solid var(--border);
  font-size: .9375rem; color: var(--fg-body);
}
.caps__list li:first-child { border-top: 0; }
.caps__list i { color: var(--ok); flex: none; }

/* =========================================================================
   Industries
   ========================================================================= */
.inds { background: var(--bg-alt); }
.inds__note { margin-top: 20px; font-size: .8125rem; color: var(--fg-muted); font-style: italic; }

/* =========================================================================
   Closing CTA
   ========================================================================= */
.cta { padding-block: var(--section-y); background: var(--bg); }
.cta__box {
  background: var(--gradient); border-radius: var(--r-card);
  padding: clamp(44px, 6vw, 76px) clamp(28px, 5vw, 64px);
  text-align: center; position: relative; overflow: hidden;
}
.cta__box h2 { color: #fff; margin-bottom: 14px; }
.cta__box p { color: rgba(255,255,255,.78); max-width: 52ch; margin-inline: auto; margin-bottom: 30px; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =========================================================================
   Footer
   ========================================================================= */
.ftr { background: var(--bg-sunk); border-top: 1px solid var(--border); padding-block: 56px 32px; }
.ftr__grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
.ftr__brand img { height: 30px; width: auto; margin-bottom: 16px; }
.ftr__brand p { font-size: .875rem; color: var(--fg-muted); max-width: 38ch; }
.ftr h3 { margin-bottom: 14px; font-size: .8125rem; line-height: 1.4; color: var(--fg-muted); font-weight: 500; letter-spacing: 0; }
.ftr li { margin-bottom: 10px; }
.ftr li a { color: var(--fg-body); font-size: .9375rem; }
.ftr li a:hover { color: var(--accent-text); }
.ftr__base {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .8125rem; color: var(--fg-muted);
}

/* Light logo swaps to the white mark on dark backgrounds */
.logo-dark { display: none; }
:root[data-theme='dark'] .logo-light { display: none; }
:root[data-theme='dark'] .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-light { display: none; }
  :root:not([data-theme='light']) .logo-dark  { display: block; }
}

/* =========================================================================
   MOTION SYSTEM
   Three rules hold this together:
     1. One easing curve. Everything decelerates on the same cubic-bezier,
        so separate elements read as one system rather than six libraries.
     2. Motion is entrance only. Nothing loops in the reader's peripheral
        vision except two ambient surfaces that never cross 8% opacity.
     3. Nothing moves further than 28px or scales past 4%. The effect comes
        from timing and stagger, not amplitude.
   Discrete reveals run on IntersectionObserver. The continuous effects
   (progress bar, parallax) need a frame loop, so they share ONE passive
   rAF-batched scroll listener - never one listener per effect.
   ========================================================================= */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-s: .55s;
  --dur-m: .85s;
  --dur-l: 1.15s;
}

/* -------------------------------------------------------------------------
   Scroll reveal. --d is the stagger delay, written by JS per sibling index.
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(5px);
  transition:
    opacity var(--dur-m) var(--ease) var(--d, 0ms),
    transform var(--dur-m) var(--ease) var(--d, 0ms),
    filter var(--dur-m) var(--ease) var(--d, 0ms);
}
[data-reveal='scale'] { transform: translate3d(0, 26px, 0) scale(.965); }
[data-reveal='left']  { transform: translate3d(-26px, 0, 0); }
[data-reveal='right'] { transform: translate3d(26px, 0, 0); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Wipe: the image is already opaque and in place, it is uncovered top to
   bottom instead of faded in. Reads as film rather than as a web fade.

   The clip goes on the IMAGE, never on the observed element. A clip-path on
   the observed element drives its own intersectionRatio to 0, so the 0.15
   threshold can never be crossed, the class is never added, and the clip
   never opens: the hidden state prevents the reveal that would unhide it.
   Measured, not theorised: ratio 0 clipped versus 1 unclipped. */
[data-reveal='wipe'] { opacity: 1; transform: none; filter: none; }
[data-reveal='wipe'] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-l) var(--ease) var(--d, 0ms);
}
[data-reveal='wipe'].is-in img { clip-path: inset(0 0 0 0); }

/* Draw: a rail that extends from its left edge. The element itself stays
   put; only its inner fill scales, so nothing reflows. */
[data-reveal='draw'] { opacity: 1; transform: none; filter: none; }
[data-reveal='draw'] > i {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.4s var(--ease) var(--d, 0ms);
}
[data-reveal='draw'].is-in > i { transform: scaleX(1); }

/* -------------------------------------------------------------------------
   Hero entrance. Pure CSS with staggered delays so the first paint is
   choreographed even if the script never parses.
   ------------------------------------------------------------------------- */
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes heroShotIn {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.hero__eyebrow, .hero__sub, .hero__cta, .hero__visual { opacity: 0; }
.hero__eyebrow { animation: heroIn var(--dur-m) var(--ease) .05s forwards; }
.hero__sub     { animation: heroIn var(--dur-m) var(--ease) .40s forwards; }
.hero__cta     { animation: heroIn var(--dur-m) var(--ease) .52s forwards; }
.hero__visual  { animation: heroShotIn var(--dur-l) var(--ease) .30s forwards; }

/* Word mask reveal: each word rides up out of its own clipped box. The
   padding/margin pair gives Turkish descenders (ç, ş, ğ, y) room so the
   clip never shaves a tail.
   Two triggers: --now fires on load (hero, always above the fold), .is-lit
   is switched on by the observer for headings further down. */
.words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.words .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 105%, 0);
}
.words--now .w > i,
.words.is-lit .w > i {
  animation: wordIn var(--dur-l) var(--ease) forwards;
  animation-delay: calc(var(--base, 0s) + var(--i, 0) * .07s);
}
.words--now { --base: .14s; }
@keyframes wordIn { to { transform: none; } }

/* Opacity-only entrance used under prefers-reduced-motion. Deliberately has no
   transform: it is the fallback for people who asked the OS to stop things
   moving, so it may fade but must never travel. */
@keyframes softIn { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------------------
   Hero ambient field. Two indigo pools drifting under the copy - the only
   looping motion above the fold, and it never exceeds 7% opacity.
   ------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }
.hero__glow {
  /* Bounded on all four sides: hero clips horizontally only, so an
     unbounded pool would spill into the framework strip below. */
  position: absolute; inset: -14% -10% -6% -10%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 46% at 18% 32%, rgba(77,109,255,.16), transparent 70%),
    radial-gradient(38% 42% at 78% 18%, rgba(19,43,117,.13), transparent 72%);
  animation: glowDrift 22s var(--ease) infinite alternate;
}
@keyframes glowDrift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -3%, 0) scale(1.09); }
}
:root[data-theme='dark'] .hero__glow { opacity: .85; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero__glow { opacity: .85; }
}

/* -------------------------------------------------------------------------
   Hero visual: framed product screen + the scan pass + the detection card.
   The card is what makes the page say "this finds AI risks" before anyone
   reads a word, so its numbers mirror the screenshot it sits on.
   ------------------------------------------------------------------------- */
.hero__visual { position: relative; }
@media (min-width: 1000px) {
  .hero__visual { margin-right: calc(-1 * clamp(24px, 8vw, 120px)); }
}

/* The exit lives on an inner wrapper, not on .hero__visual itself: that
   element owns the entrance animation, and a `forwards` fill would keep
   overriding any transform written here. */
.hero__inner {
  transform: translate3d(0, calc(var(--exit, 0) * -24px), 0)
             scale(calc(1 - var(--exit, 0) * .05));
  opacity: calc(1 - var(--exit, 0) * .5);
  will-change: transform, opacity;
}

/* A single light pass down the screen. Deliberately slow and linear: this is
   the beat that says "something is being examined", and an eased sweep reads
   as a glint instead. The band is wide and soft so nothing strobes. */
.hero__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(77,109,255,.00) 30%,
    rgba(77,109,255,.10) 42%,
    rgba(77,109,255,.20) 49%,
    rgba(255,255,255,.34) 50%,
    rgba(77,109,255,.20) 51%,
    rgba(77,109,255,.10) 58%,
    rgba(77,109,255,.00) 70%,
    transparent 100%);
  transform: translate3d(0, -100%, 0);
  animation: scanPass 3.1s linear .85s 1 forwards;
}
@keyframes scanPass {
  from { transform: translate3d(0, -100%, 0); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translate3d(0, 100%, 0); opacity: 0; }
}

.hero__detect {
  position: absolute; z-index: 3;
  /* Hangs low on purpose: the risk rows are the most legible part of the
     screen behind it, so the card sits under them rather than across them. */
  left: clamp(14px, 3vw, 26px); bottom: -44px;
  /* Wide enough to hold "Critical 3 / High 2 / Medium 1" on one line. The
     English labels are longer than the Turkish ones this was first sized for,
     and a wrapped second row makes the card tall enough to bury the risk list. */
  width: min(300px, 78%);
  padding: 13px 15px 15px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  /* Lands while the scan is still travelling, so the read-out reads as a
     result of the pass rather than a separate card that happened to appear. */
  animation: heroIn var(--dur-m) var(--ease) 2.55s forwards;
}


.detect__head {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 500; color: var(--fg-muted);
  margin-bottom: 11px;
}
.detect__pulse {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--teal-5); flex: none;
  box-shadow: 0 0 0 0 rgba(0,183,196,.5);
  animation: pulse 2.4s ease-out 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,183,196,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(0,183,196,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,183,196,0); }
}

.detect__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.detect__chips li {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding-inline: 8px; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-body);
  opacity: 0; transform: translate3d(0, 6px, 0) scale(.9);
  animation: chipIn .5s var(--ease) forwards;
}
.detect__chips li:nth-child(1) { animation-delay: 2.78s; }
.detect__chips li:nth-child(2) { animation-delay: 2.92s; }
.detect__chips li:nth-child(3) { animation-delay: 3.06s; }
.detect__chips i { font-size: .5rem; }
.detect__chips .c { color: var(--red-5); }
.detect__chips .h { color: var(--orange-5); }
.detect__chips .m { color: var(--yellow-5); }
@keyframes chipIn { to { opacity: 1; transform: none; } }

.detect__score {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .75rem; color: var(--fg-muted); margin-bottom: 7px;
}
.detect__score b {
  font-size: 1.0625rem; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.detect__bar {
  /* Block, not the span default: an inline box ignores height and the card
     grows a dead strip under the score. */
  display: block;
  height: 5px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.detect__bar > i {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-5), var(--teal-5));
  animation: barFill 1.6s var(--ease) 3.16s forwards;
}

/* The card overlaps the shot at every size, the way it does on desktop — it is
   the read-out of the screen behind it, so detaching it into the flow breaks the
   relationship it exists to show. Below 860px it only gets smaller: narrower,
   tighter padding, less hang, so it still lands over the shot's lower edge
   instead of burying the risk rows or falling outside the frame. It used to be
   `display: none` here, which is why the entrance read as "no popup on mobile". */
@media (max-width: 860px) {
  .hero__detect {
    left: 10px;
    bottom: -18px;
    width: min(268px, 84%);
    padding: 10px 12px 12px;
  }
  .detect__head   { font-size: .68rem; margin-bottom: 8px; }
  .detect__chips  { gap: 4px; margin-bottom: 9px; }
  .detect__chips li { font-size: .62rem; padding: 2px 7px; }
  .detect__score  { font-size: .95rem; }
}

/* Phones proper. The card is a read-out OF the screen behind it, so it has to
   stay clearly smaller than that screen or it stops reading as an overlay and
   starts reading as a replacement — at 232px it covered 66% of the shot's width
   and 71% of its height. Everything shrinks together so the three chips stay on
   one line: a wrapped second row is what made the card tall enough to swallow
   the shot in the first place. */
@media (max-width: 480px) {
  .hero__detect {
    left: 8px;
    bottom: -12px;
    width: min(198px, 64%);
    padding: 8px 9px 9px;
  }
  .detect__head   { font-size: .55rem; margin-bottom: 6px; gap: 6px; }
  .detect__chips  { gap: 3px; margin-bottom: 7px; }
  .detect__chips li { font-size: .5rem; padding: 2px 5px; gap: 3px; }
  .detect__chips i { font-size: .4rem; }
  .detect__score  { font-size: .78rem; }
  .detect__bar    { height: 3px; }
}
@keyframes barFill { to { width: 77%; } }

/* -------------------------------------------------------------------------
   Header: reading-progress hairline + active-section nav underline
   ------------------------------------------------------------------------- */
.hdr__prog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  pointer-events: none; overflow: hidden;
}
.hdr__prog > i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue-5), var(--teal-5));
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
}
.hdr { position: sticky; }

.hdr__nav a { position: relative; padding-block: 6px; }
.hdr__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--accent-text); border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease);
}
.hdr__nav a:hover::after,
.hdr__nav a[data-active='true']::after { transform: scaleX(1); }
.hdr__nav a[data-active='true'] { color: var(--fg); }

/* -------------------------------------------------------------------------
   Surface response. Cards lift on hover; the lift is 3px, never more.
   ------------------------------------------------------------------------- */
.cell, .flow__step, .quad__item {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              background-color .3s var(--ease), border-color .3s var(--ease);
}
.cell:hover, .quad__item:hover, .flow__step:hover {
  transform: translate3d(0, -3px, 0);
}
.cell:hover, .quad__item:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
/* :not() rather than a later override. Step 07 carries the gradient and white
   text; a same-specificity `.flow__step:hover` declared further down was
   winning and repainting it --surface-2, leaving white text on a near-white
   card. Excluding it here removes the ordering trap instead of dodging it. */
.flow__step:not(.flow__step--end):hover { background: var(--surface-2); }
/* The deep cards keep their gradient on hover; only the lift applies. */
.quad__item--deep:hover { border-color: transparent; }

/* The step number gets its own beat, just after the card lands. */
.flow__step__n {
  display: inline-block;
  transition: transform .6s var(--ease) .12s, color .3s var(--ease);
}
[data-reveal] .flow__step__n { transform: translate3d(0, 8px, 0); }
[data-reveal].is-in .flow__step__n { transform: none; }
.flow__step:not(.flow__step--end):hover .flow__step__n { color: var(--accent-hover); }

/* Filled buttons pick up a light sweep on hover. */
.btn--primary, .btn--onDeep { position: relative; overflow: hidden; }
.btn--primary::after, .btn--onDeep::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translate3d(-110%, 0, 0);
  transition: transform .7s var(--ease);
}
.btn--primary:hover::after, .btn--onDeep:hover::after { transform: translate3d(110%, 0, 0); }
.btn--onDeep::after { background: linear-gradient(105deg, transparent 38%, rgba(19,43,117,.14) 50%, transparent 62%); }

/* -------------------------------------------------------------------------
   Counters. Tabular figures keep the box from twitching as digits change.
   ------------------------------------------------------------------------- */
.cell__stat { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   Flow rail progress: fills across the six steps as the section is read.
   ------------------------------------------------------------------------- */
.flow__prog {
  height: 2px; border-radius: var(--r-pill);
  background: var(--border); overflow: hidden; margin-bottom: 18px;
}
.flow__prog > i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue-5), var(--teal-5));
  transform: scaleX(var(--fp, 0)); transform-origin: 0 50%;
  transition: transform .15s linear;
}

/* -------------------------------------------------------------------------
   Parallax. JS writes --par; the 1.06 scale hides the edge the offset opens.
   ------------------------------------------------------------------------- */
.guided__shot img, .dash__shot img {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.06);
  will-change: transform;
}

/* -------------------------------------------------------------------------
   FAQ. interpolate-size is progressive: where it is unsupported the panel
   still opens, just without the height tween.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Deep surfaces get a slow sheen so the indigo does not read as flat ink.
   ------------------------------------------------------------------------- */
/* Only the closing CTA sheens. The other indigo surfaces on the page (the
   industries row, the final flow step, the comply strip) stay still: four
   cards breathing in one row would break the "entrance only" rule. */
.cta__box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 74% at 22% 12%, rgba(255,255,255,.13), transparent 66%);
  animation: sheen 16s var(--ease) infinite alternate;
}
@keyframes sheen {
  from { transform: translate3d(-4%, 0, 0); opacity: .75; }
  to   { transform: translate3d(6%, 4%, 0); opacity: 1; }
}
.cta__box > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Reduced motion. Everything above collapses to its end state - the page
   loses the choreography and keeps every pixel of the content.
   ------------------------------------------------------------------------- */
/* prefers-reduced-motion no longer disables the entrance choreography — see the
   note in index.html for why. Smooth scrolling is still turned off under the
   preference: that one hijacks a gesture the visitor made themselves, which is a
   different thing from an animation they are watching. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* If the script never runs the page must still be whole. */
.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }
.no-js [data-reveal='wipe'] img { clip-path: none; }
.no-js [data-reveal='draw'] > i { transform: none; }
.no-js .shot__hud { opacity: 1; }
.no-js .hud__dots li { background: var(--accent); transform: none; opacity: 1; }
.no-js .hud__pills li { opacity: 1; transform: none; }
.no-js .hero__inner { transform: none; opacity: 1; }
.no-js .guided__shot img, .no-js .dash__shot img { transform: none; }

/* =========================================================================
   DECK v3 SECTIONS
   Nine sections carrying the framework layers of the product deck. They lean
   on the existing .quad grid wherever the deck shows four or six cards, so
   the page gains content without gaining new visual vocabulary.
   ========================================================================= */

/* ---- Section backgrounds. The page alternates strictly top to bottom;
        adding nine sections shifted everything below them by one step. ---- */
.does    { background: var(--bg); }
.mit     { background: var(--bg-alt); }
.isosec  { background: var(--bg); }
.causal  { background: var(--bg-alt); }
.domains { background: var(--bg); }
.cset    { background: var(--bg-alt); }
.nist    { background: var(--bg); }
.dist    { background: var(--bg-alt); }
.aiid    { background: var(--bg); }

/* ---- Small caps eyebrow shared by the layer sections ---- */
.layer__k, .does__k {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 10px;
}
.does__k { margin-bottom: 18px; }
.does__note {
  margin-top: 22px; font-size: .8125rem; color: var(--fg-muted); font-style: italic;
}

/* ---- ISO standards: three columns that collapse to stacked blocks ---- */
.iso { display: grid; gap: 8px; }
.iso__hd { display: none; }
@media (min-width: 940px) {
  .iso__hd {
    display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 44fr) minmax(0, 34fr);
    gap: 24px; padding: 0 22px 4px;
  }
  .iso__hd span {
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--fg-muted);
  }
}
.iso > li:not(.iso__hd) {
  display: grid; gap: 12px 24px; grid-template-columns: minmax(0, 1fr);
  padding: 22px; border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--surface);
  transition: transform .45s var(--ease), border-color .3s var(--ease), box-shadow .45s var(--ease);
}
@media (min-width: 940px) {
  .iso > li:not(.iso__hd) {
    grid-template-columns: minmax(0, 22fr) minmax(0, 44fr) minmax(0, 34fr); align-items: center;
  }
}
.iso > li:not(.iso__hd):hover {
  transform: translate3d(0, -3px, 0);
  border-color: var(--border-strong); box-shadow: var(--shadow-md);
}
.iso__std { font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.iso__scope { font-size: .9375rem; color: var(--fg-muted); }
.iso__axis { font-size: .9375rem; color: var(--fg-muted); }
.iso__axis strong {
  display: block; color: var(--accent-text); font-weight: 600; margin-bottom: 2px;
}

/* ---- Causal taxonomy: three factors, three values each ---- */
.causal__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .causal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.causal__col {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); padding: 26px 24px 28px;
}
.causal__k {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px;
}
.causal__q { font-size: .875rem; font-style: italic; color: var(--fg-muted); margin-bottom: 20px; }
.causal__list { margin: 0; }
.causal__list dt {
  font-weight: 600; color: var(--fg); font-size: 1rem; letter-spacing: -.01em;
  padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border);
}
.causal__list dt:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.causal__list dd { margin: 4px 0 0; font-size: .9375rem; color: var(--fg-muted); }

/* ---- Domain taxonomy: 4 + 3, the second row centred under the first ---- */
.domains__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .domains__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.dom {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); padding: 24px 22px 26px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.dom:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
@media (min-width: 1040px) {
  .dom { grid-column: span 3; }
  /* The last three centre themselves rather than hanging left. */
  .dom:nth-child(5) { grid-column: 2 / span 3; }
  .dom:nth-child(6) { grid-column: 5 / span 3; }
  .dom:nth-child(7) { grid-column: 8 / span 3; }
}
.dom__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--accent-quiet); color: var(--accent-text);
  font-weight: 600; font-size: .9375rem; margin-right: 10px;
}
.dom__sub { font-size: .72rem; font-weight: 600; color: var(--accent-text); letter-spacing: .02em; }
.dom h3 { margin: 16px 0 8px; }
.dom p { font-size: .9375rem; color: var(--fg-muted); }

/* ---- Mitigation distribution: a table that carries its own bar chart ----
   The bar is a row background rather than a separate column, so the number,
   the share and the length are read in one pass. */
.dist__list { display: grid; gap: 6px; }
.dist__hd { display: none; }
@media (min-width: 720px) {
  .dist__hd {
    display: grid; grid-template-columns: minmax(0, 1fr) 72px 84px;
    gap: 16px; padding: 0 20px 4px;
  }
  .dist__hd span {
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--fg-muted);
  }
  .dist__hd span:not(:first-child) { text-align: right; }
}
.dist__list > li:not(.dist__hd) {
  position: relative; overflow: hidden;
  display: grid; gap: 4px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px 20px; border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--surface);
}
@media (min-width: 720px) {
  .dist__list > li:not(.dist__hd) {
    grid-template-columns: minmax(0, 1fr) 72px 84px; align-items: center;
  }
}
.dist__name {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9375rem; color: var(--fg); font-weight: 500;
}
.dist__n { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.dist__pct { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .dist__n, .dist__pct { text-align: right; } }
.dist__dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: none; }
.dist__dot--a { background: #0a7a58; }
.dist__dot--b { background: var(--blue-5); }
.dist__dot--c { background: var(--orange-5); }
.dist__dot--d { background: var(--blue-3); }
.dist__dot--e { background: #8b7cd8; }

/* The bar sits under the row content and grows on reveal. */
.dist__bar {
  grid-column: 1 / -1; display: block; height: 4px; margin-top: 6px;
  border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden;
}
.dist__bar > i {
  display: block; height: 100%; width: var(--pct, 0%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-5), var(--teal-5));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease) var(--d, 0ms);
}
.dist__list > li.is-in .dist__bar > i { transform: scaleX(1); }
.dist__total {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
}
.dist__total .dist__name { font-weight: 600; }

/* ---- AIID roadmap callout ---- */
.aiid__road {
  margin-top: 20px; padding: 18px 22px; border-radius: var(--r-card);
  border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  font-size: .875rem; color: var(--fg-body);
}
.aiid__road__k {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ok); flex: none;
}

/* No prefers-reduced-motion override here on purpose. The page stopped
   switching its choreography off for that preference on 2026-08-09 (see the
   note above `var reduce = false` in index.html); adding one back for these
   sections alone would make their bars snap full while everything around
   them still animates. */
.no-js .dist__bar > i { transform: scaleX(1); }

/* Deck p13's own result callout, sitting under the seven steps. Affirmative
   colour rather than the neutral note below it, because it is the conclusion
   of the flow and not a footnote to it. */
.flow__result {
  margin-top: 24px; padding: 18px 22px; border-radius: var(--r-card);
  border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .9375rem; color: var(--fg-body);
}
.flow__result i { color: var(--ok); margin-top: 4px; flex: none; }
.flow__result strong { color: var(--fg); font-weight: 600; }

/* =========================================================================
   Guided section: the conversation plays itself
   The screenshot already contains the whole exchange. Rather than faking
   chat bubbles in DOM, the real messages are uncovered one at a time: a
   blurred veil covers the chat column and its top edge steps down through
   the measured bottom of each bubble. Nothing is invented and nothing has
   to be kept in sync with the asset except these six percentages.

   Measured against conversation.webp (1800x1125):
     chat column   x 23%  ->  72.8%
     message ends  y 42.9 · 51.4 · 62.0 · 74.9 · 83.6 · 94.0
   ========================================================================= */
/* Always on, including phones: the text is unreadable at 390px but the motion
   still reads as messages arriving, which is the point. Master's pattern for
   the read-out cards is the same (scale down, do not hide) - only .shot__rows
   is dropped on small screens. */
.chat__veil {
  position: absolute; z-index: 3; pointer-events: none;
  /* Bounds sampled from conversation.webp, not eyeballed: the chat column
     runs x 21% -> 74.8% and the input box starts at y 95.7%, so the curtain
     stops above it and the field stays visible the whole time. */
  left: 21%; right: 25.2%; bottom: 4.3%; top: 42.9%;
  /* Opaque, matched to the screenshot's own chat background. A blur was the
     first attempt and read as a smudge; messages should simply not be there
     yet. The dark value is the same pixel measured AFTER the image filter. */
  background: rgb(245, 244, 247);
}
:root[data-theme='dark'] .chat__veil { background: rgb(213, 212, 215); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .chat__veil { background: rgb(213, 212, 215); }
}
.shot.is-in .chat__veil { animation: chatReveal 5.4s .5s both; }

/* Three dots waiting where the next message will land. */
.chat__type {
  display: flex; position: absolute; z-index: 4; pointer-events: none;
  gap: 4px; align-items: center;
  padding: 6px 9px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  /* No upward offset: `top` puts it just below the curtain edge, which is the
     empty space where the next message is about to land. Pulling it up made it
     sit on top of the message that had just arrived. */
  top: 42.9%; left: 26%; opacity: 0;
}
.chat__type i {
  width: 5px; height: 5px; border-radius: var(--r-pill);
  background: var(--fg-muted);
  animation: typeBounce 1.1s ease-in-out infinite;
}
.chat__type i:nth-child(2) { animation-delay: .15s; }
.chat__type i:nth-child(3) { animation-delay: .3s; }
.shot.is-in .chat__type { animation: chatType 5.4s .5s both; }

/* Phone: the pill would otherwise cover two messages at once. */
@media (max-width: 860px) {
  .chat__type { gap: 3px; padding: 4px 6px; }
  .chat__type i { width: 3px; height: 3px; }
}

/* Each step holds, then jumps: a message arriving, not a curtain sliding.
   Percentages are the measured bottom of each bubble in conversation.webp. */
@keyframes chatReveal {
  0%,  13% { top: 42.9%; }
  14%, 29% { top: 51.4%; }
  30%, 46% { top: 62.0%; }
  47%, 63% { top: 74.9%; }
  64%, 79% { top: 83.6%; }
  80%, 92% { top: 94.0%; }
  93%,100% { top: 95.7%; }
}

/* Rides the same edge and swaps sides, because the agent writes on the left
   and the person answers on the right. */
@keyframes chatType {
  0%       { top: 42.9%; left: 26%; opacity: 0; }
  4%,  12% { top: 42.9%; left: 26%; opacity: 1; }
  14%, 28% { top: 51.4%; left: 62%; opacity: 1; }
  30%, 45% { top: 62.0%; left: 26%; opacity: 1; }
  47%, 62% { top: 74.9%; left: 62%; opacity: 1; }
  64%, 78% { top: 83.6%; left: 26%; opacity: 1; }
  80%, 90% { top: 94.0%; left: 26%; opacity: 1; }
  93%,100% { top: 95.7%; left: 26%; opacity: 0; }
}
@keyframes typeBounce {
  0%, 60%, 100% { transform: none; opacity: .55; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* The checklist fills in step with the conversation rather than ahead of it:
   one slot per message, which is what the section claims happens. */
.guided__shot .hud__dots li:nth-child(1) { animation-delay: 1.30s; }
.guided__shot .hud__dots li:nth-child(2) { animation-delay: 2.10s; }
.guided__shot .hud__dots li:nth-child(3) { animation-delay: 2.90s; }
.guided__shot .hud__dots li:nth-child(4) { animation-delay: 3.70s; }
.guided__shot .hud__dots li:nth-child(5) { animation-delay: 4.40s; }
.guided__shot .hud__dots li:nth-child(6) { animation-delay: 5.05s; }
.guided__shot .hud__dots li:nth-child(7) { animation-delay: 5.60s; }

.no-js .chat__veil, .no-js .chat__type { display: none; }