/* ==========================================================================
   Direct Data 1 (DD1) — design system
   1. Tokens  2. Base  3. Layout  4. Components  5. Sections
   6. Assessment  7. Pages  8. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: dark;
  /* DD1 brand palette — tune the whole site from these five values */
  --dd1-forest: #03130F;      /* near-black forest background */
  --dd1-surface: #0A221C;     /* elevated surfaces */
  --dd1-emerald: #3FD597;     /* bright mint accent (CTAs, active states) */
  --dd1-text: #EBF2EF;        /* primary off-white text */
  --dd1-text-2: #A2B3AE;      /* secondary gray-green text */

  /* Derived tones (subtle steps between dark surfaces, never dramatic) */
  --dd1-forest-deep: #020C09;   /* footer, portal bar */
  --dd1-forest-raised: #05180F; /* alternate section band */
  --dd1-forest-band: #041A14;   /* lit band behind heroes and the assessment */
  --dd1-surface-top: #0D2822;   /* top of the raised-surface gradient */
  --dd1-surface-low: #08201A;   /* bottom of the raised-surface gradient */
  --dd1-accent-rgb: 63, 213, 151; /* mint as r,g,b for tints: rgba(var(--dd1-accent-rgb), a) */
  --dd1-field: #061A15;         /* form fields inside surfaces */
  --dd1-emerald-hover: #64E3AE;
  --dd1-emerald-text: #4FDA9F;  /* mint for small text: >= 9:1 on forest and surface */
  --dd1-emerald-tint: rgba(63, 213, 151, 0.10);
  --dd1-text-3: #84978F;        /* fine print: >= 5:1 on forest and surface */

  /* ESMAI logo — colours taken from the approved logo; change the lockup only here */
  --brand-logo-text: var(--dd1-emerald);   /* "ESM" matches platform mint */
  --brand-logo-accent: var(--dd1-emerald); /* symbol and "AI" */
  --brand-logo-sub: #A3B3AD;    /* tagline "ENTERPRISE SYSTEMS MONETIZATION AI" under the lockup */
  --brand-tagline-scale: 0.3;   /* tagline size relative to the symbol height (--logo-h) */
  --brand-tagline-tracking: 0.14em;
  --brand-logo-font: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Legacy token names, mapped onto the DD1 palette so every existing
     component (site, landing pages, portal, admin) inherits the brand. */
  --navy-950: var(--dd1-forest-deep);
  --navy-900: var(--dd1-forest-raised);
  --navy-800: var(--dd1-forest);
  --navy-700: var(--dd1-surface);
  --navy-line: rgba(240, 243, 239, 0.10);
  --navy-line-strong: rgba(240, 243, 239, 0.18);

  /* Emerald — two roles: accent detail (labels, rules, icons) and primary CTA */
  --teal-deep: var(--dd1-emerald-text);
  --teal-bright: var(--dd1-emerald);
  --teal-bright-hover: var(--dd1-emerald-hover);

  --slate-700: var(--dd1-text-2);   /* body copy */
  --slate-500: var(--dd1-text-3);   /* muted / fine print */
  --slate-300: var(--dd1-text-2);   /* secondary on dark */

  --paper: var(--dd1-forest);
  --surface: var(--dd1-surface);
  --field: var(--dd1-field);
  --white: var(--dd1-text);         /* text on dark (never a background) */
  --ink: var(--dd1-text);           /* headings and strong text */
  --line: rgba(240, 243, 239, 0.10);
  --line-strong: rgba(240, 243, 239, 0.18);
  --rule: rgba(240, 243, 239, 0.30); /* emphasised section rules */

  /* Status colours, tuned for dark surfaces (all >= 7:1 on forest and surface) */
  --status-good: #8FD4B6;  --status-good-bg: rgba(var(--dd1-accent-rgb), 0.1);
  --status-warn: #E3C77D;  --status-warn-bg: rgba(214, 170, 60, 0.10);  --status-warn-line: rgba(214, 170, 60, 0.32);
  --status-bad: #F0A39B;   --status-bad-bg: rgba(220, 90, 80, 0.10);    --status-bad-line: rgba(220, 90, 80, 0.38);

  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;   /* headlines */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;     /* UI titles, figures */
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — three headline tiers */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.3125rem, 1.15rem + 0.65vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);       /* secondary sections */
  --fs-h1: clamp(2.125rem, 1.45rem + 2.3vw, 3.25rem);      /* major commercial statements */
  --fs-display: clamp(2.5rem, 1.45rem + 3.7vw, 4.625rem);  /* closing */
  --fs-hero: clamp(2.625rem, 1.1rem + 4.7vw, 6.5rem);       /* home + landing hero headline */

  --container: 1520px;                 /* ~1,390px of content on wide screens */
  --gutter: clamp(20px, 4.5vw, 64px);
  --col-gap: clamp(24px, 3vw, 48px);
  --section-y: clamp(80px, 8.5vw, 124px);
  --section-y-compact: clamp(64px, 6.5vw, 92px);
  --radius: 6px;
  --header-h: 72px;
}
/* Partner and admin portals keep their own (unchanged) width */
.app { --container: 1240px; --gutter: clamp(20px, 4vw, 48px); }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  color: var(--slate-700); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); color: var(--ink); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance;
}
/* Editorial serif for headlines and section titles; sans for everything smaller */
h1, h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.1; font-optical-sizing: auto; }
::selection { background: rgba(var(--dd1-accent-rgb), 0.21); color: var(--dd1-text); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--teal-bright); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 16px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* 3. Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--compact { padding: var(--section-y-compact) 0; }
.section--paper { background: var(--paper); }
.section--white { background: var(--dd1-forest-raised); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }

/* 4. Components ------------------------------------------------------------ */
/* Section label: quiet text with a short deep-teal rule */
.label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--teal-deep); }
.label::before { content: ""; width: 24px; height: 1px; background: var(--teal-bright); }
.on-dark .label { color: var(--teal-deep); }
.on-dark .label::before { background: var(--teal-bright); }

.h1 { font-size: var(--fs-h1); letter-spacing: -0.016em; line-height: 1.06; }
.h2 { font-size: var(--fs-h2); }
.lede { font-size: var(--fs-md); line-height: 1.55; color: var(--slate-700); max-width: 34em; }
.statement { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; line-height: 1.38; letter-spacing: -0.005em; color: var(--ink); }
.fineprint { font-size: var(--fs-xs); line-height: 1.55; color: var(--slate-500); }

/* Buttons — bright teal is reserved for the primary CTA */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--teal-bright); color: var(--navy-950); }
.btn--primary:hover { background: var(--teal-bright-hover); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-xs); }

/* Understated secondary action */
.link-quiet {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none;
}
.link-quiet span { border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.link-quiet:hover span { border-bottom-color: currentColor; }
.link-quiet svg { width: 14px; height: 14px; }
.on-dark .link-quiet { color: rgba(240, 243, 239, 0.86); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); color: var(--teal-deep); text-decoration: none; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* Logo — ESMAI lockup (assets/brand/README.md). One markup snippet everywhere; size it with --logo-h
   (the symbol's height). The wordmark is set in Manrope, as in the approved ESMAI logo. */
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; line-height: 0; }
.logo__svg { --logo-h: 30px; display: inline-grid; grid-template-columns: max-content 1fr; align-items: center; justify-items: start;
  column-gap: calc(var(--logo-h) * 0.55); row-gap: max(4px, calc(var(--logo-h) * 0.2));
  color: var(--brand-logo-text); font-family: var(--brand-logo-font); font-weight: 600; line-height: 1; white-space: nowrap; }
.logo__svg--compact { --logo-h: 30px; }
.logo__svg--primary { --logo-h: 40px; }  /* footer */
.brand-logo__mark { display: block; flex: none; height: var(--logo-h); width: auto; color: var(--brand-logo-accent); overflow: visible; }
.brand-logo__word { display: block; font-size: calc(var(--logo-h) * 0.93); letter-spacing: 0.2em; margin-right: -0.2em; }
.brand-logo__full { grid-column: 1 / -1; display: block; height: calc(var(--logo-h) * 1.25); width: auto; }  /* full ESMAI logo image */
.brand-logo__ai { color: var(--brand-logo-accent); }
/* Tagline: "Enterprise Systems Monetization AI", under the whole lockup (symbol and wordmark), starting at the symbol's edge.
   Secondary to the logo: small caps-style type, quiet off-white, "AI" in the logo's mint. Never smaller than 9px. */
.brand-logo__tagline { grid-column: 1 / -1; display: block; font-family: var(--brand-logo-font);
  font-size: max(9px, calc(var(--logo-h) * var(--brand-tagline-scale))); font-weight: 600;
  letter-spacing: var(--brand-tagline-tracking); margin-right: calc(var(--brand-tagline-tracking) * -1);
  text-transform: uppercase; color: var(--brand-logo-sub); }
.brand-logo__tagline .brand-logo__ai { color: var(--brand-logo-accent); }

.dev-note {
  display: inline-block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.5;
  color: var(--status-warn); background: var(--status-warn-bg); border: 1px solid var(--status-warn-line); padding: 8px 12px; border-radius: var(--radius);
}
.dev-note::before { content: "Dev — "; font-weight: 600; }

/* 5. Sections -------------------------------------------------------------- */

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header.is-solid { background: var(--navy-800); border-bottom-color: var(--navy-line); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav__links { display: flex; gap: 20px; }
.site-nav__links a {
  position: relative; padding: 6px 0; font-size: 0.875rem; font-weight: 500; text-decoration: none;
  color: rgba(240, 243, 239, 0.74); transition: color .15s ease;
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--white); }
.site-nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: rgba(240, 243, 239, .6); }
/* Partner Login: a quiet utility link, set apart from the section links and the primary CTA */
.site-nav__login {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0 6px 16px; border-left: 1px solid var(--navy-line-strong);
  font-size: var(--fs-xs); font-weight: 500; text-decoration: none; white-space: nowrap;
  color: rgba(240, 243, 239, 0.74); transition: color .15s ease;
}
.site-nav__login svg { width: 13px; height: 13px; flex: none; }
.site-nav__login:hover { color: var(--white); }
.nav-toggle { display: none; }

/* Hero */
.hero {
  position: relative; padding: calc(var(--header-h) + clamp(56px, 7vw, 100px)) 0 0;
  background: var(--navy-800); color: rgba(240, 243, 239, 0.8); overflow: hidden;
}
.hero .container { position: relative; }
.hero__eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep);
}
.hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--teal-bright); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(28px, 2.6vw, 40px); align-items: start; }
.hero__title { grid-column: 1 / -1; font-size: var(--fs-hero); color: var(--white); letter-spacing: -0.02em; line-height: 1.02; max-width: 15em; text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--teal-bright); }
/* Headline, then copy, then actions — one column stacked on the left */
.hero__copy { grid-column: 1 / span 9; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.55; color: rgba(240, 243, 239, 0.7); max-width: 40em; }
.hero__copy strong { color: var(--white); font-weight: 500; }
.hero__cta { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: clamp(4px, 0.6vw, 12px); }
.hero__actions .btn--primary { min-height: 56px; padding: 0 28px; font-size: var(--fs-base); }
.hero__actions .link-quiet { font-size: var(--fs-base); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero__micro { margin-top: 14px; font-size: var(--fs-xs); color: var(--slate-300); }

/* Hero figure */
.figure { margin: clamp(64px, 7vw, 96px) 0 0; }
.figure__bar {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-top: 1px solid var(--navy-line-strong); border-bottom: 1px solid var(--navy-line);
  font-size: var(--fs-xs); color: var(--slate-300);
}
.figure__bar strong { color: var(--white); font-weight: 600; }
.flow { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; }
.flow__stage { padding: 26px 0 34px; }
.flow__no { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--slate-300); font-variant-numeric: tabular-nums; }
.flow__title { display: block; margin-top: 6px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--white); letter-spacing: -0.015em; white-space: nowrap; }
.flow__list { margin-top: 20px; }
.flow__list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px;
  border-top: 1px solid var(--navy-line); font-size: var(--fs-sm); color: rgba(240, 243, 239, 0.78);
}
.flow__list li:last-child { border-bottom: 1px solid var(--navy-line); }
.flow__tag { font-size: 0.75rem; color: var(--slate-300); white-space: nowrap; }
.flow__tick { width: 7px; height: 7px; border: 1px solid rgba(240, 243, 239, .4); flex: none; }
.flow__list .is-result {
  margin-top: -1px; padding: 0 14px; background: rgba(var(--dd1-accent-rgb), 0.07);
  border-top: 1px solid var(--teal-bright); border-bottom: 1px solid var(--teal-bright) !important;
  color: var(--white); font-weight: 600;
}
.flow__list .is-result .flow__tick { background: var(--teal-bright); border-color: var(--teal-bright); }
.flow__link { position: relative; }
.flow__link::before { content: ""; position: absolute; left: 10px; right: 10px; top: 69px; height: 1px; background: rgba(240, 243, 239, .35); }
.flow__link::after {
  content: ""; position: absolute; right: 10px; top: 65px; width: 8px; height: 8px; margin-top: .5px;
  border-top: 1px solid rgba(240, 243, 239, .55); border-right: 1px solid rgba(240, 243, 239, .55); transform: rotate(45deg);
}

/* Opportunity — wide headline, then body beside the comparison */
.opp__head { max-width: 22ch; }
.opp__grid { margin-top: clamp(40px, 5vw, 60px); align-items: start; }
.opp__text { grid-column: 1 / span 4; }
.opp__text .statement + p { margin-top: 20px; }
.opp__text p + p { margin-top: 14px; }
.contrast { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1.25fr; border: 1px solid var(--line-strong); }
.contrast__col { padding: clamp(22px, 2.6vw, 34px); background: var(--surface); }
.contrast__col + .contrast__col { background: var(--navy-800); color: rgba(240, 243, 239, .82); }
.contrast__kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--slate-500); }
.contrast__col + .contrast__col .contrast__kicker { color: var(--slate-300); }
.contrast__title { margin-top: 6px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; }
.contrast__col + .contrast__col .contrast__title { color: var(--white); }
.contrast__list { margin-top: 18px; }
.contrast__list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.contrast__col + .contrast__col .contrast__list li { border-top-color: var(--navy-line); color: var(--white); }
.now { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.now__label { font-size: var(--fs-xs); font-weight: 600; color: var(--teal-deep); }
.now p:last-child { flex: 1 1 32em; max-width: 64ch; font-size: var(--fs-base); color: var(--ink); }

/* Introduction video — continues the Opportunity section, 16:9 frame */
.video-sec { padding: 0 0 var(--section-y); }
.video { align-items: center; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-strong); }
.video__text { grid-column: 1 / span 4; }
.video__text p:last-child { margin-top: 16px; max-width: 34em; }
.video__frame { grid-column: 6 / span 7; position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line); overflow: hidden; border-radius: var(--radius); }
.video__frame iframe, .video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--white); }
.video__mark { position: absolute; right: -6%; bottom: -18%; width: 52%; height: auto; fill: rgba(240, 243, 239, 0.045); }
.video__play {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border: 1px solid rgba(240, 243, 239, 0.45); border-radius: 50%;
}
.video__play svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--white); }
.video__caption { position: absolute; left: clamp(20px, 3vw, 32px); bottom: clamp(18px, 3vw, 28px); }
.video__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; }
.video__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--slate-300); }
.video__dev { position: absolute; top: 14px; left: 14px; }

/* What may have value — compact index beside a narrow intro column */
.data__grid { align-items: start; }
.data__intro { grid-column: 1 / span 4; }
.data__intro .lede { margin-top: 18px; font-size: var(--fs-base); }
.chain { margin-top: 36px; border-top: 1px solid var(--line-strong); }
.chain__title { padding: 14px 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.chain__step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 9px 0 9px 20px; font-size: var(--fs-sm); }
.chain__step::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.chain__step::after { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--surface); border: 1px solid var(--teal-deep); }
.chain__step:first-child::before { top: 50%; }
.chain__step:last-child::before { bottom: 50%; }
.chain__step:last-child::after { background: var(--teal-deep); }
.chain__k { font-weight: 600; color: var(--ink); }
.chain__v { color: var(--slate-500); }
.cats { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.cat { display: grid; grid-template-columns: 36px minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cat__no { font-size: var(--fs-xs); color: var(--slate-500); font-variant-numeric: tabular-nums; }
.cat__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; line-height: 1.35; }
.cat__sys { font-size: var(--fs-xs); color: var(--slate-500); line-height: 1.5; }
/* Sensitive-information clarification (What May Have Value) */
.handling { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.handling__lead { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
.handling__lead svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal-bright); }
.handling__cols { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.handling__k { font-size: var(--fs-xs); font-weight: 600; color: var(--teal-deep); }
.handling__cols p + p { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.6; color: var(--slate-500); }
/* Privacy reassurance under the hero graphic */
.assure { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; max-width: 880px; }
.assure svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--teal-bright); }
.assure p { font-size: var(--fs-sm); line-height: 1.6; color: rgba(240, 243, 239, .72); }
.assure strong { color: var(--white); font-weight: 600; }
/* Prepared for the approved compensation statement (DD1 Approach); unused until approved */
.aligned { margin-top: clamp(28px, 4vw, 40px); display: flex; gap: 8px 32px; flex-wrap: wrap; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.aligned__k { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink); }
.aligned p:last-child { flex: 1 1 32em; max-width: 68ch; font-size: var(--fs-sm); color: var(--slate-700); }
.data__foot { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }

/* Assessment feature — full navy band, centered header */
.assess { padding: var(--section-y) 0; background: var(--navy-900); color: rgba(240, 243, 239, .8); position: relative; }
.assess .container { position: relative; }
.assess__head { max-width: 880px; margin: 0 auto 48px; text-align: center; }
.assess__head .label { justify-content: center; }
.assess__head h2 { color: var(--white); }
.assess__head p { margin: 18px auto 0; max-width: 40em; color: rgba(240, 243, 239, .74); }

/* Advisory — personal, editorial */
.advisory__top { align-items: end; }
.advisory__head { grid-column: 1 / span 5; }
.advisory__intro { grid-column: 7 / span 6; }
.advisory__intro p + p { margin-top: 16px; }
.promises { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.promise { padding: 26px clamp(20px, 2.5vw, 36px) 0 0; }
.promise + .promise { padding-left: clamp(20px, 2.5vw, 36px); border-left: 1px solid var(--line-strong); }
.promise__no { display: block; font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; line-height: 1; color: var(--dd1-text-3); letter-spacing: -0.01em; }
.promise h3 { margin-top: 20px; font-size: var(--fs-md); letter-spacing: -0.015em; }
.promise p { margin-top: 8px; font-size: var(--fs-sm); max-width: 34ch; }
.advisory__foot { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); }
.advisory__foot p { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; color: var(--ink); letter-spacing: -0.005em; max-width: 38ch; }

/* Process (light) */
.process__head { margin-bottom: 60px; align-items: end; }
.process__head > div { grid-column: 1 / span 6; }
.process__head > p { grid-column: 8 / span 5; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line-strong); }
.step { position: relative; padding-right: clamp(16px, 2vw, 32px); }
.step__node { position: relative; display: block; width: 13px; height: 13px; background: var(--surface); border: 1px solid var(--teal-deep); }
.step:last-child .step__node { background: var(--teal-deep); }
.step__no { display: block; margin-top: 26px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--slate-500); font-weight: 600; }
.step h3 { margin: 6px 0 10px; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; }
.step p { font-size: var(--fs-sm); color: var(--slate-700); }

/* Owner control — compact band */
.control { align-items: start; }
.control__head { grid-column: 1 / span 4; }
.control__head p { margin-top: 16px; font-size: var(--fs-sm); }
.control__list { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 1px solid var(--rule); }
.control__item { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); }
.control__item svg { width: 16px; height: 16px; margin-top: 3px; stroke: var(--teal-deep); fill: none; stroke-width: 1.6; }
.control__item--wide { grid-column: 1 / -1; }

/* Eligibility */
.elig__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: 32px; }
.elig__head > div { flex: 1 1 420px; }
.elig__head p { flex: 0 1 30em; }
.elig__list { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.elig__item { padding: 20px 20px 22px 0; }
.elig__item + .elig__item { padding-left: 20px; border-left: 1px solid var(--line); }
.elig__item svg { width: 18px; height: 18px; stroke: var(--teal-deep); fill: none; stroke-width: 1.6; }
.elig__item strong { display: block; margin-top: 12px; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); line-height: 1.4; }
.elig__item span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--slate-500); line-height: 1.5; }

/* FAQ */
.faq { margin-top: clamp(72px, 8vw, 104px); }
.faq__head { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 19px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-deep); }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .2s ease; }
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon::after { transform: rotate(0deg); }
.faq__answer { padding: 0 48px 22px 0; max-width: 62ch; font-size: var(--fs-base); }
.faq__answer p + p { margin-top: 12px; }

/* Closing */
.closing { padding: clamp(104px, 12vw, 168px) 0; background: var(--navy-800); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.closing .container { position: relative; }
.closing__grid { align-items: end; }
.closing h2 { grid-column: 1 / span 8; font-size: var(--fs-display); color: var(--white); letter-spacing: -0.018em; line-height: 1.03; max-width: 14ch; }
.closing__aside { grid-column: 9 / span 4; }
.closing__aside p { font-size: var(--fs-md); line-height: 1.5; color: rgba(240, 243, 239, 0.82); }
.closing__aside p + p { margin-top: 12px; }
.closing__aside .btn { margin-top: 32px; }
.closing__aside .closing__micro { margin-top: 14px; font-size: var(--fs-xs); color: var(--slate-300); }
.closing__aside .dev-note { margin-top: 20px; font-size: var(--fs-xs); line-height: 1.5; color: var(--status-warn); }

/* Footer */
.site-footer { background: var(--navy-950); color: var(--slate-300); padding: 72px 0 36px; font-size: var(--fs-sm); }
.footer__top { padding-bottom: 56px; border-bottom: 1px solid var(--navy-line); }
.footer__brand { grid-column: 1 / span 5; }
.footer__brand p { margin-top: 18px; }
.footer__col { grid-column: span 2; }
.footer__col:first-of-type { grid-column: 7 / span 2; }
.footer__col h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--white); letter-spacing: 0; margin-bottom: 16px; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { text-decoration: none; color: var(--slate-300); }
.footer__col a:hover { color: var(--white); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; font-size: var(--fs-xs); }
.footer__bottom p { max-width: 72ch; }

/* 6. Assessment component -------------------------------------------------
   Inputs live on one open light surface; results sit directly on the navy
   band with no panel, so the two read as clearly different things. */
.as { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; text-align: left; }
.as-controls { display: flex; flex-direction: column; gap: clamp(30px, 3.2vw, 40px); padding: clamp(28px, 4vw, 52px); background: var(--surface); border-radius: 4px; color: var(--slate-700); }

.as-step__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.as-step__no {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; background: var(--paper);
  font-size: 0.75rem; font-weight: 600; color: var(--slate-500); font-variant-numeric: tabular-nums;
  transform: translateY(-2px);
}
.as-step__label { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; line-height: 1.3; }
.as-step__value { margin-left: auto; padding-left: 12px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--teal-deep); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; }
.as-step__value--sm { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--slate-500); }

/* Select — a single underline, not a box */
.as-select { position: relative; }
.as-select::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.as-select select {
  width: 100%; height: 48px; padding: 0 32px 0 0; appearance: none; -webkit-appearance: none;
  font: inherit; font-size: var(--fs-md); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--line-strong); border-radius: 0; cursor: pointer;
  transition: border-color .2s ease;
}
.as-select select:hover, .as-select select:focus { border-bottom-color: var(--ink); }
.as-select select:focus-visible { outline: none; border-bottom-color: var(--teal-deep); box-shadow: 0 1.5px 0 var(--teal-deep); }

/* Sliders — soft track, deep-teal fill, round thumb */
.as-slider { position: relative; padding: 10px 0 4px; }
.as-range { position: relative; z-index: 1; display: block; width: 100%; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.as-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--teal-deep) var(--fill, 40%), rgba(240, 243, 239, 0.14) var(--fill, 40%)); }
.as-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(240, 243, 239, 0.14); }
.as-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--teal-deep); }
.as-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--teal-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.as-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.as-range:hover::-webkit-slider-thumb, .as-range:active::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(var(--dd1-accent-rgb), 0.07); }
.as-range:focus-visible { outline: none; }
.as-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--dd1-accent-rgb), 0.17); }
.as-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--dd1-accent-rgb), 0.17); }
.as-ticks { position: absolute; left: 12px; right: 12px; top: 39px; display: flex; justify-content: space-between; pointer-events: none; }
.as-ticks span { width: 1px; height: 5px; background: var(--line-strong); }
.as-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-xs); color: var(--slate-500); }

/* Chips — soft fills, no borders; selected = navy with a check */
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip { position: relative; cursor: pointer; }
.as-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.as-chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--slate-700);
  background: rgba(240, 243, 239, 0.06); border-radius: 4px;
  transition: background-color .18s ease, color .18s ease;
}
.as-chip:hover span { background: rgba(240, 243, 239, 0.1); }
.as-chip__check { width: 0; height: 14px; flex: none; opacity: 0; margin-right: -8px; transition: width .18s ease, opacity .18s ease, margin .18s ease; }
.as-chip input:checked + span { background: var(--dd1-emerald-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--teal-bright); }
.as-chip input:checked + span .as-chip__check { width: 14px; opacity: 1; margin-right: 0; color: var(--teal-bright); }
.as-chip input:focus-visible + span { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.as-privacy { font-size: var(--fs-xs); color: var(--slate-500); }

/* Results — open typography on navy, sticky beside the inputs */
.as-results { position: sticky; top: calc(var(--header-h) + 24px); padding-top: 8px; color: rgba(240, 243, 239, .8); }
.as-kicker { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--slate-300); }
.as-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-bright); }
.as-headline { margin-top: 18px; font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; line-height: 1.32; color: var(--white); letter-spacing: -0.018em; }
.as-obs { margin-top: 28px; }
.as-obs li { position: relative; padding: 14px 0 14px 18px; }
.as-obs li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--navy-line-strong); transition: background-color .5s ease; }
.as-obs strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--white); }
.as-obs span { display: block; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.55; color: rgba(240, 243, 239, .74); }
.as-demand { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.6; color: var(--slate-300); transition: color .5s ease; }
/* Illustrative licensing range panel ("Assessment Pending" when the model is disabled) */
.as-value { margin-top: 24px; padding: 20px 22px 18px; border: 1px solid var(--navy-line-strong); border-left: 2px solid var(--teal-bright);
  background: linear-gradient(180deg, rgba(var(--dd1-accent-rgb), 0.06), rgba(var(--dd1-accent-rgb), 0.02)); }
.as-value__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dd1-emerald-text); }
.as-value__figure { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--font-serif); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 400; line-height: 1.15; color: var(--white); letter-spacing: -0.015em; }
.as-value__figure svg { width: 18px; height: 18px; flex: none; color: var(--teal-bright); }
.as-value__figure--range { font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 0 28px rgba(var(--dd1-accent-rgb), 0.21); }
.as-value.is-fresh .as-value__figure { animation: as-fresh .35s ease; }
@media (prefers-reduced-motion: reduce) { .as-value.is-fresh .as-value__figure { animation: none; } }
.as-value__note { margin-top: 10px; font-size: var(--fs-xs); line-height: 1.6; color: var(--slate-300); }
.as-hint { margin-top: 10px; font-size: var(--fs-xs); line-height: 1.5; color: var(--slate-500); }
.as-cta { margin-top: 28px; }
.as-cta .btn { width: 100%; }
.as-cta p { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.55; color: var(--slate-300); }

/* Change feedback */
@keyframes as-fresh { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.as-headline.is-fresh { animation: as-fresh .35s ease; }
.as-obs li.is-fresh::before { background: var(--teal-bright); }
.as-demand.is-fresh { color: var(--white); }
@media (prefers-reduced-motion: reduce) { .as-headline.is-fresh { animation: none; } }

@media (max-width: 1080px) {
  .as { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .as { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .as-results { position: static; padding-top: 0; }
}
@media (max-width: 760px) {
  .handling__cols { grid-template-columns: 1fr; }
  .as-controls { padding: 24px 20px 28px; margin: 0 calc(var(--gutter) * -1 + 8px); }
  .as-step__label { font-size: 1.0625rem; }
  .as-step__value { font-size: 1.125rem; }
  .as-chip span { min-height: 44px; padding: 0 13px; }
  .as-value { padding: 18px 18px 16px; }
}

/* 7. Secondary pages ------------------------------------------------------- */
.page-hero { padding: calc(var(--header-h) + 88px) 0 72px; background: var(--navy-800); color: rgba(240, 243, 239, .8); }
.page-hero h1 { font-size: var(--fs-h1); color: var(--white); max-width: 20ch; }
.page-hero p { margin-top: 20px; max-width: 60ch; font-size: var(--fs-md); }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-lg); margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose ul li { padding-left: 20px; position: relative; }
.prose ul li + li { margin-top: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--teal-deep); }

/* 8. Responsive ------------------------------------------------------------ */
@media (max-width: 1140px) {
  .site-nav { gap: 18px; }
  .site-nav__links { gap: 18px; }
  .site-nav__links a { font-size: var(--fs-xs); }
  .site-nav__login { padding-left: 14px; }
}

@media (max-width: 1080px) {
  .flow { grid-template-columns: 1fr 32px 1fr 32px 1fr; }
  .flow__tag { display: none; }
  .flow__title { font-size: 1.0625rem; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .steps::before { display: none; }
  .step { border-top: 1px solid var(--line-strong); }
  .step__node { margin-top: -7px; }
  .elig__list { grid-template-columns: repeat(3, 1fr); }
  .elig__item:nth-child(4) { padding-left: 0; border-left: 0; }
  .elig__item:nth-child(n+4) { border-top: 1px solid var(--line); }
  .opp__text { grid-column: 1 / -1; max-width: 640px; }
  .contrast { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  :root { --header-h: 64px; }
  .logo__svg--compact { --logo-h: 26px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: var(--white); cursor: pointer; }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s ease, background-color .2s ease; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-open .nav-toggle__bars { background: transparent; }
  .nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px; background: var(--navy-800); border-bottom: 1px solid var(--navy-line);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .nav-open .site-header { background: var(--navy-800); border-bottom-color: var(--navy-line); }
  .site-nav__links { flex-direction: column; gap: 0; }
  .site-nav__links a { padding: 16px 0; border-bottom: 1px solid var(--navy-line); font-size: var(--fs-base); }
  .site-nav__links a[aria-current="page"]::after { display: none; }
  .site-nav__login { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--navy-line); font-size: var(--fs-base); }
  .site-nav .btn { margin-top: 24px; min-height: 48px; font-size: var(--fs-sm); }

  .hero__title, .hero__copy, .hero__cta { grid-column: 1 / -1; }
  .hero__copy { max-width: 640px; }
  .video__text, .video__frame,
  .data__intro, .cats, .advisory__head, .advisory__intro, .control__head, .control__list,
  .faq__head, .faq__list, .closing h2, .closing__aside, .footer__brand,
  .process__head > div, .process__head > p { grid-column: 1 / -1; }
  .video__text, .data__intro, .advisory__intro, .control__head, .closing__aside, .process__head > p { max-width: 600px; }
  .footer__col, .footer__col:first-of-type { grid-column: span 4; }
}

@media (max-width: 760px) {
  .hero__actions { gap: 4px 24px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .figure__bar span:last-child { display: none; }
  .flow { grid-template-columns: 1fr; }
  .flow__stage { padding: 20px 0 6px; }
  .flow__list { margin-top: 10px; }
  .flow__list li { min-height: 40px; }
  .flow__tag { display: inline; }
  .flow__link { height: 26px; }
  .flow__link::before { left: 6px; right: auto; top: 2px; bottom: 2px; width: 1px; height: auto; }
  .flow__link::after { left: 2.5px; right: auto; top: auto; bottom: 2px; transform: rotate(135deg); }
  .flow__stage:last-child { padding-bottom: 32px; }
  .contrast { grid-template-columns: 1fr; }
  .video__play { width: 44px; height: 44px; }
  .video__play svg { width: 20px; height: 20px; }
  .video__caption { left: 16px; right: 16px; bottom: 14px; }
  .video__title { font-size: 1rem; }
  .video__sub { display: none; }
  .video__dev { top: 10px; left: 10px; padding: 5px 8px; }
  .cat { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; padding: 16px 0; }
  .cat__sys { grid-column: 2; }
  .promises { grid-template-columns: 1fr; }
  .promise, .promise + .promise { padding: 22px 0; border-left: 0; }
  .promise + .promise { border-top: 1px solid var(--line-strong); }
  .promise { display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; }
  .promise__no { font-size: 1.75rem; grid-row: span 2; }
  .promise h3 { margin-top: 0; }
  .advisory__foot { padding: 20px; }
  .advisory__foot .btn { flex: 1 1 100%; }
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .steps::before { display: block; left: 6px; right: auto; top: 6px; bottom: 40px; width: 1px; height: auto; }
  .step { border-top: 0; padding: 0 0 30px 40px; }
  .step__node { position: absolute; left: 0; top: 0; margin: 0; }
  .step__no { margin-top: -3px; }
  .control__list { grid-template-columns: 1fr; }
  .elig__list { grid-template-columns: 1fr; border-bottom: 0; }
  .elig__item, .elig__item + .elig__item { display: grid; grid-template-columns: 30px 1fr; padding: 16px 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .elig__item svg { grid-row: span 2; margin-top: 2px; }
  .elig__item strong { margin-top: 0; }
  .faq__answer { padding-right: 0; }
  .closing__aside .btn { width: 100%; }
  .footer__col, .footer__col:first-of-type { grid-column: span 6; }
  .logo__svg--primary { --logo-h: 34px; }
}

/* ==========================================================================
   9. DD1 polish layer — restrained light, depth and glow.
   Everything visual in the "futuristic polish" pass lives here, so it can be
   tuned (or removed) without touching the base system above. No animation
   beyond short hover transitions; no layout changes.
   ========================================================================== */
:root {
  --glow-soft: rgba(var(--dd1-accent-rgb), 0.1);
  --glow-mid: rgba(var(--dd1-accent-rgb), 0.19);
  --glow-strong: rgba(var(--dd1-accent-rgb), 0.3);
  --edge-light: rgba(240, 243, 239, 0.07);    /* top-edge highlight on raised surfaces */
  --hairline-glow: linear-gradient(90deg, transparent, rgba(var(--dd1-accent-rgb), 0.33) 50%, transparent);
  --surface-grad: linear-gradient(180deg, var(--dd1-surface-top) 0%, var(--dd1-surface) 38%, var(--dd1-surface-low) 100%);
}


/* Focus: emerald ring with a soft halo */
:focus-visible { outline-color: var(--teal-bright); box-shadow: 0 0 0 4px var(--glow-soft); }

/* Header: frosted forest bar with an emerald hairline once scrolled */
.site-header.is-solid {
  background: rgba(3, 19, 15, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--hairline-glow); opacity: 0; transition: opacity .25s ease;
}
.site-header.is-solid::after { opacity: .7; }
.site-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--teal-bright); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav__links a:hover::after { transform: scaleX(1); }
.site-nav__links a[aria-current="page"]::after { background: var(--teal-bright); transform: scaleX(1); }

/* Primary buttons: flat mint with dark text; a quiet lift on hover */
.btn--primary {
  background: var(--dd1-emerald); border-color: var(--dd1-emerald); color: var(--dd1-forest-deep);
  box-shadow: 0 6px 20px -12px rgba(var(--dd1-accent-rgb), 0.55);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--primary:hover { background: var(--dd1-emerald-hover); border-color: var(--dd1-emerald-hover); box-shadow: 0 10px 26px -12px rgba(var(--dd1-accent-rgb), 0.6); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.link-quiet:hover, .link-arrow:hover { color: var(--dd1-text); }

/* Hero: atmospheric emerald light and a lit horizon */
.hero {
  background:
    radial-gradient(60% 70% at 82% 6%, rgba(var(--dd1-accent-rgb), 0.14), transparent 68%),
    radial-gradient(32% 30% at 76% 58%, rgba(var(--dd1-accent-rgb), 0.05), transparent 72%),
    radial-gradient(40% 55% at 4% 100%, rgba(var(--dd1-accent-rgb), 0.05), transparent 70%),
    linear-gradient(180deg, var(--dd1-forest) 0%, var(--dd1-forest-band) 58%, var(--dd1-forest) 100%);
}
.figure__bar { border-top-color: transparent; position: relative; }
.figure__bar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(240,243,239,.22), rgba(var(--dd1-accent-rgb), 0.36) 50%, rgba(240,243,239,.22)); }
.flow__list .is-result { background: linear-gradient(90deg, rgba(var(--dd1-accent-rgb), 0.12), rgba(var(--dd1-accent-rgb), 0.05)); box-shadow: 0 0 24px -6px var(--glow-mid); }
.flow__list .is-result .flow__tick { box-shadow: 0 0 8px var(--glow-strong); }

/* Secondary page heroes and closing band share a quieter version of the light */
.page-hero {
  background:
    radial-gradient(55% 80% at 85% 0%, rgba(var(--dd1-accent-rgb), 0.08), transparent 70%),
    linear-gradient(180deg, var(--dd1-forest), var(--dd1-forest-band));
}
.closing {
  background:
    radial-gradient(50% 70% at 12% 100%, rgba(var(--dd1-accent-rgb), 0.08), transparent 70%),
    radial-gradient(35% 50% at 92% 10%, rgba(var(--dd1-accent-rgb), 0.04), transparent 70%),
    var(--dd1-forest);
  border-top-color: transparent;
}
.closing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline-glow); opacity: .5; }

/* Section layers: a touch more separation between alternating bands */
.section--white { background: linear-gradient(180deg, var(--dd1-forest-band) 0%, var(--dd1-forest-raised) 100%); box-shadow: inset 0 1px 0 var(--edge-light); }

/* Raised panels: gentle surface gradient, lit top edge, soft lift */
.contrast { box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.8); }
.contrast__col { background: var(--surface-grad); }
.contrast__col + .contrast__col {
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--dd1-accent-rgb), 0.1), transparent 70%), var(--dd1-forest-band);
  box-shadow: inset 0 1px 0 rgba(var(--dd1-accent-rgb), 0.27);
}
.advisory__foot {
  background: radial-gradient(60% 120% at 100% 50%, rgba(var(--dd1-accent-rgb), 0.06), transparent 70%), var(--surface-grad);
  box-shadow: inset 0 1px 0 var(--edge-light), 0 20px 50px -34px rgba(0, 0, 0, 0.8);
}
.video__frame {
  background: radial-gradient(60% 70% at 50% 45%, rgba(var(--dd1-accent-rgb), 0.08), transparent 70%), var(--surface-grad);
  box-shadow: inset 0 1px 0 var(--edge-light), 0 24px 60px -36px rgba(0, 0, 0, 0.8);
}
.video__play { background: rgba(3, 19, 15, 0.35); box-shadow: 0 0 0 6px rgba(var(--dd1-accent-rgb), 0.04), 0 0 28px -4px var(--glow-mid); transition: box-shadow .2s ease, border-color .2s ease; }
.video__poster:hover .video__play { border-color: rgba(var(--dd1-accent-rgb), 0.7); box-shadow: 0 0 0 6px rgba(var(--dd1-accent-rgb), 0.06), 0 0 36px -2px var(--glow-strong); }
.step:last-child .step__node, .chain__step:last-child::after { box-shadow: 0 0 10px var(--glow-strong); }
.faq summary { transition: color .15s ease; }

/* Assessment band: lit stage behind the results, raised input panel */
.assess {
  background:
    radial-gradient(45% 60% at 80% 55%, rgba(var(--dd1-accent-rgb), 0.07), transparent 70%),
    linear-gradient(180deg, var(--dd1-forest-band), var(--dd1-forest-raised));
  box-shadow: inset 0 1px 0 var(--edge-light);
}
.as-controls {
  background: var(--surface-grad); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge-light), 0 30px 70px -40px rgba(0, 0, 0, 0.85);
}
.as-kicker::before { box-shadow: 0 0 10px var(--glow-strong); }
.as-chip input:checked + span { box-shadow: inset 0 0 0 1px var(--teal-bright), 0 0 16px -4px var(--glow-mid); }
.as-range::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--dd1-accent-rgb), 0.07), 0 0 14px -2px var(--glow-mid); }

/* Footer: emerald hairline at the top edge */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline-glow); opacity: .35; }

@media (max-width: 920px) {
  .site-header::after { display: none; }
  .nav-open .site-header { background: var(--dd1-forest); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav__links a::after { display: none; }
}