/* ============================================================
   The CV Method — landing page layout (page-specific, imported last)
   SPEC v2 §5 (IA) · §7 (hero) · §8 (responsive)

   PHASE 0: poster hero only. No animation, no transitions, no JS.
   The Signal Field canvas and the §6 motion layer arrive in P2/P3.
   ============================================================ */

/* ============================================================
   01 — HERO (self-hosted video background)
   Ported from docs/brand-refresh/hero-prototype/index.html, adapted for the
   live page: this is a min-height:100dvh SCROLL section (not a single-
   viewport overflow:hidden trap) that sits under the site's own sticky nav,
   so `padding-block` clears --nav-h instead of the prototype's own header.
   Layer order: video 0 · tint 1 · vignette scrim 2 · grain 3 · copy 4.
   ============================================================ */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  min-height:100dvh;
  padding-block:calc(var(--nav-h) + var(--space-16)) var(--space-16);
  overflow:hidden;
  background:var(--ink-900);
  scroll-margin-top:var(--nav-h);
}

.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink-900)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* navy→green tint: nudges the warm footage toward the brand palette */
.hero__tint{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:color;
  opacity:.22;
  background:linear-gradient(180deg,var(--ink-800),var(--green));
}
/* vignette scrim: what makes the hero copy AA-legible over live footage */
.hero__vscrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(120% 105% at 50% 38%,transparent 38%,rgba(7,15,36,.55) 100%),
    linear-gradient(180deg,rgba(10,24,54,.5) 0%,rgba(10,24,54,.18) 44%,rgba(7,15,36,.6) 100%);
}
.hero__grain{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:soft-light;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);
  background-size:3px 3px;
}

.hero__inner{
  position:relative;
  z-index:4;
  isolation:isolate;
  color:var(--text-on-ink);
  width:100%;
  text-align:center;
}

/* ---- A2: hero entrance (SPEC §6) ----
   Staggered rise on load, ending on the stats so the eye lands last on the
   proof. Pure CSS, no JS: with `both` fill the elements sit at the `from`
   state until their turn. Under reduced motion motion.css zeroes --dur and
   styles.css zeroes --stagger, so every element paints at its final state
   on frame one. */
@keyframes hero-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.hero__inner > *{
  animation:hero-rise var(--dur) var(--ease-out) both;
  animation-delay:calc(var(--stagger) * var(--hero-i, 0));
}
.hero__inner > .trust-pill{--hero-i:0}
.hero__inner > .hero__title{--hero-i:1}
.hero__inner > .hero__sub{--hero-i:2}
.hero__inner > .cta-row{--hero-i:3}
.hero__inner > .hero__stats{--hero-i:4}

/* ---- trust pill ---- */
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px 7px 12px;
  background:rgba(10,20,44,.55);
  border:1px solid var(--border-dark);
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:var(--fs-sm);
  color:var(--text-on-ink-muted);
  letter-spacing:-.005em;
}
.trust-pill__tick{
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:rgba(46,224,154,.2);
  color:var(--accent);
  font-size:11px;
  font-weight:var(--fw-semibold);
}

/* ---- dot-matrix headline — Handjet scoped here only (SPEC: not the global
   --font-display token; the rest of the site stays Space Grotesk) ---- */
.hero__title{
  margin:var(--space-6) auto 0;
  max-width:16ch;
  font-family:"Handjet","JetBrains Mono",monospace;
  font-weight:500;
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
  font-size:clamp(46px,10.5vw,124px);
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero__title .l1,
.hero__title .l2{display:block}
.hero__title .l1{color:var(--text-on-ink)}
.hero__title .l2{color:var(--accent);text-shadow:0 0 34px rgba(46,224,154,.5)}
.hero__title .dot{color:var(--orchid);text-shadow:0 0 30px rgba(239,132,245,.6)}

.hero__sub{
  max-width:46ch;
  margin:var(--space-6) auto 0;
  font-size:clamp(1.05rem,1vw + .9rem,1.3rem);
  color:rgba(242,247,249,.92);
  text-shadow:0 1px 20px rgba(0,0,0,.5);
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:var(--space-6);
}
.cta-row--center{justify-content:center}

/* ---- 4-stat count-up footer (js/main.js heroStats()) ---- */
.hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,2vw,26px);
  width:100%;
  max-width:940px;
  margin:var(--space-10) auto 0;
}
.hstat{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.hstat__num{
  font-family:"Handjet","JetBrains Mono",monospace;
  font-weight:500;
  color:var(--text-on-ink);
  font-size:clamp(26px,3.4vw,44px);
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 22px rgba(0,0,0,.55);
}
.hstat__num .suf{color:var(--accent)}
.hstat__lab{
  color:var(--text-on-ink-muted);
  font-size:var(--fs-xs);
  letter-spacing:.01em;
  line-height:1.3;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion:reduce){
  /* the point of the video is drift; there is nothing to degrade to — the
     poster (already the video's poster= attribute) shows instead */
  .hero__video{display:none}
}

/* md and below: headline scales down, stats fold to 2×2 */
@media (max-width:767px){
  .hero__title{max-width:none}
}
@media (max-width:720px){
  .hero__title{font-size:clamp(44px,15vw,84px)}
  .hero__stats{grid-template-columns:repeat(2,1fr);row-gap:clamp(14px,3vh,22px);max-width:420px}
}
@media (max-width:479px){
  .cta-row .btn{width:100%}
}

/* ---- diagnostic mount + no-JS door fallback (SPEC §3 HERO) ----
   #diagnostic stays [hidden] until js/diagnostic.js (Task 6B) confirms it
   can run, so this block is a pure mount point here — no layout to fight
   once JS swaps hidden off. The two doors below are the real, always-on
   navigation: plain links, no JS required, always reachable even after
   the diagnostic mounts (SPEC: never display:none the doors). */
.hero__diagnostic{margin-top:var(--space-8)}

.hero__doors{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin-top:var(--space-8);
}
.door{
  display:inline-flex;
  align-items:center;
  min-height:var(--hit-min);
  padding:var(--space-3) var(--space-5);
  border:1px solid var(--border-dark);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  color:var(--text-on-ink-muted);
  font-size:var(--fs-sm);
  transition:border-color var(--dur-base) var(--ease-in-out),
             background-color var(--dur-base) var(--ease-in-out),
             color var(--dur-base) var(--ease-in-out),
             transform var(--dur-fast) var(--ease-out);
}
.door:hover,
.door:focus-visible{
  border-color:var(--accent);
  background:rgba(46,224,154,.08);
  color:var(--text-on-ink);
  transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){
  .door{transition:none;}
  .door:hover,.door:focus-visible{transform:none;}
}
.door__k{
  color:var(--text-on-ink);
  font-weight:var(--fw-semibold,600);
  margin-right:var(--space-1);
}

/* the diagnostic can visually de-emphasize the doors once it mounts, but
   they stay in the DOM and reachable — never display:none (SPEC §3) */
.hero__doors.is-deemphasized{opacity:.6}

@media (max-width:479px){
  .hero__doors{flex-direction:column;align-items:stretch}
}

/* ---- diagnostic question flow (Task 7 — js/diagnostic.js) ----
   Built with createElement + classList only: no inline styles, no
   inline handlers. Steps are toggled with the native [hidden] attribute,
   so there is no JS-driven animation to guard here beyond the option/link
   hover states below, which are explicitly zeroed under reduced motion. */
.diagnostic__flow{margin-top:var(--space-6)}

.diagnostic__step{border:0;margin:0;padding:0}
.diagnostic__step + .diagnostic__step{margin-top:var(--space-6)}

.diagnostic__legend{
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  color:var(--text-on-ink);
  padding:0;
  margin-bottom:var(--space-3);
}
/* legend is a JS focus target between steps (a11y), not a click target */
.diagnostic__legend:focus{outline:none}

.diagnostic__options{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.diagnostic__option{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-height:var(--hit-min);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-dark);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  color:var(--text-on-ink-muted);
  font-size:var(--fs-sm);
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-in-out),
             background-color var(--dur-base) var(--ease-in-out),
             color var(--dur-base) var(--ease-in-out);
}
.diagnostic__option:hover{border-color:var(--accent);color:var(--text-on-ink)}
.diagnostic__option:has(input:checked){
  border-color:var(--accent);
  background:rgba(46,224,154,.08);
  color:var(--text-on-ink);
}
.diagnostic__option:has(input:focus-visible){
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.diagnostic__option input{accent-color:var(--accent);flex:none;width:18px;height:18px}

.diagnostic__result{
  margin-top:var(--space-6);
  padding:var(--space-6);
  border:1px solid var(--border-dark);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  color:var(--text-on-ink);
}
.diagnostic__result:focus{outline:none}
.diagnostic__result-eyebrow{
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--text-on-ink-muted);
}
.diagnostic__result-name{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  color:var(--text-on-ink);
  margin-top:var(--space-2);
}
.diagnostic__result-why{
  margin-top:var(--space-3);
  max-width:46ch;
  color:var(--text-on-ink-muted);
}
.diagnostic__result-marker{
  display:inline-block;
  margin-top:var(--space-4);
  font-size:var(--fs-xs);
  color:var(--accent);
}
.diagnostic__result-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-5);
  margin-top:var(--space-5);
}
.diagnostic__result-link{
  display:inline-flex;
  align-items:center;
  min-height:var(--hit-min);
  padding:var(--space-3) var(--space-5);
  border:1px solid var(--border-dark);
  border-radius:var(--r-md);
  color:var(--text-on-ink);
  font-size:var(--fs-sm);
  transition:border-color var(--dur-base) var(--ease-in-out),
             background-color var(--dur-base) var(--ease-in-out),
             transform var(--dur-fast) var(--ease-out);
}
.diagnostic__result-link:hover,
.diagnostic__result-link:focus-visible{
  border-color:var(--accent);
  background:rgba(46,224,154,.08);
  transform:translateY(-2px);
}
.diagnostic__reset{
  min-height:var(--hit-min);
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:var(--text-on-ink-muted);
  text-decoration:underline;
  cursor:pointer;
}
.diagnostic__reset:hover,
.diagnostic__reset:focus-visible{color:var(--text-on-ink)}

@media (prefers-reduced-motion:reduce){
  .diagnostic__option,
  .diagnostic__result-link{transition:none}
}

/* #start-here is dark again (full-page dark rebuild, 2026-08-23) — the
   light-section override that used to live here is gone, and the
   diagnostic's original dark styling (authored for the dark hero, further
   up this file) applies unchanged: --text-on-ink, translucent white
   borders/fills. See the "DARK REBUILD" block near the end of this file for
   the section's background. */

/* ============================================================
   Reusable dark-section brand imagery — self-hosted frame behind a heavy
   navy scrim (--ink-900) so overlaid copy always clears AA. Cards and
   light/canvas sections never get this treatment — imagery stays in the
   dark sections only. Used by 03 — THE REFRAME and 10 — FINAL CTA.
   ============================================================ */
.section--media{position:relative;isolation:isolate}
.section--media > .section__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.section--media > .section__media img{width:100%;height:100%;object-fit:cover}
.section--media > .section__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,rgba(10,24,54,.85),rgba(10,24,54,.72));
}

/* ============================================================
   03 — THE REFRAME
   ============================================================ */
.reframe__headline{font-size:var(--fs-h1);max-width:20ch}
.reframe__headline .is-emphasis{color:var(--orchid)}
.reframe__body{
  margin-top:var(--space-4);
  font-size:var(--fs-h3);
  max-width:34ch;
  color:rgba(242,247,249,.9);
}

/* ============================================================
   05 — THE TOOLS  (two bands, ten cards, hover lift)
   Spec: docs/superpowers/specs/2026-08-22-cvmethod-ai-strategist-refresh-
   design.md §4. Grid breakpoints per §4.3 — scoped to the tools bands by ID
   so the shared .grid--2/--3 rules used elsewhere on the page are untouched.
   ============================================================ */
.tool-band + .tool-band{margin-top:var(--space-10)}
.tool-band__door{
  margin-bottom:var(--space-6);
  color:var(--text-muted);
}
.tool-band--strategic{
  margin-inline:calc(var(--space-6) * -1);
  padding:var(--space-10) var(--space-6);
  background:var(--canvas-soft);
  border-radius:var(--r-md);
}

.tool-card{
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tool-card:hover,.tool-card:focus-within{
  transform:var(--lift);
  box-shadow:var(--shadow-lg);
}
.tool-card__title{margin:0 0 var(--space-2);font-size:var(--fs-h4)}
.tool-card__body{margin:0;color:var(--text-muted)}
.tool-card__marker{
  margin-top:var(--space-4);
  color:var(--text-muted);
  font-weight:var(--fw-medium);
}
.tool-card__check{color:var(--green)}
.tool-card .chips{margin-top:var(--space-4)}

/* Band B cards read slightly heavier — more padding, larger title — to
   signal the "strategic engagement" weight versus the quick-win band. */
.tool-card--strategic{padding:var(--space-8)}
.tool-card--strategic .tool-card__title{font-size:var(--fs-h3)}

/* ---- Content = the lavender thread ----
   CV request: layer orchid beyond the reframe headline, tied to the content story.
   Reframe gets a subordinate orchid echo on the content clause; the tools grid gets
   its one saturated orchid pop on the Content card (border + glow, not a gradient stop). */
.reframe__body .is-emphasis-soft{color:var(--orchid);font-style:italic}

#tools .tool-card--content{
  border-color:var(--orchid);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(239,132,245,.35), 0 14px 40px rgba(239,132,245,.14);
}
#tools .tool-card--content:hover,
#tools .tool-card--content:focus-within{
  border-color:var(--orchid);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(239,132,245,.5), 0 18px 52px rgba(239,132,245,.2);
}
#tools .tool-card--content .tool-card__check{color:var(--orchid)}
#tools .tool-card--content .chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
#tools .tool-card--content .chip{text-align:center}

@media (prefers-reduced-motion:reduce){
  .tool-card{transition:none}
  .tool-card:hover,.tool-card:focus-within{transform:none}
}

/* Grid breakpoints (spec §4.3) — scoped to the tools section only. */
@media (min-width:1024px){
  #tools-quickwins .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #tools-strategic .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:1023px){
  #tools-quickwins .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tools-strategic .grid{grid-template-columns:1fr}
}
@media (max-width:639px){
  #tools-quickwins .grid,#tools-strategic .grid{grid-template-columns:1fr}
}

/* ============================================================
   06 — WHO IT'S FOR
   ============================================================ */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}
@media (max-width:767px){.fit{grid-template-columns:1fr;gap:var(--space-6)}}
.fit__title{font-size:var(--fs-h3);margin-bottom:6px}
.fit__list{list-style:none;margin-top:12px}
.fit__list li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--border)}
.fit__list li:last-child{border-bottom:none}
/* the glyphs are decorative — the column heading carries the meaning,
   so nothing here is signalled by colour or icon alone (SPEC §8) */
.fit__list--yes li::before{
  content:"\2713";position:absolute;left:0;color:var(--green-ink);font-weight:700;
}
.fit__list--no li::before{
  content:"\2014";position:absolute;left:0;color:var(--text-muted);
}

/* ============================================================
   08 — OUTCOMES
   ============================================================ */
.outcome{
  padding:26px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--canvas-soft);
  text-align:center;
}
.outcome__from{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--text-muted);
  text-decoration:line-through;
}
.outcome__to{
  margin-top:6px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:1.4rem;
  line-height:1.2;
  background-image:var(--grad-signal-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .outcome__to{color:var(--green-ink);-webkit-text-fill-color:var(--green-ink)}
}

/* ============================================================
   09 — PROCESS
   ============================================================ */
.step{
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-card);
}
.step__key{
  display:inline-block;
  padding:4px 8px;
  border-radius:6px;
  background:var(--mint);
  color:var(--ink-900);
  font-family:var(--font-mono);
  font-size:.8rem;
}
.step__title{font-size:1.1rem;margin:12px 0 6px}
.step__body{color:var(--text-muted)}

/* ============================================================
   11 — FINAL CTA
   One gradient moment: a 16%-opacity wash behind a dark scrim, never
   under live body text at full strength (SPEC §2.2).
   ============================================================ */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grad-method);
  opacity:.16;
}
.final__inner{position:relative;z-index:1}
.final__title{font-size:var(--fs-h1);max-width:18ch;margin-inline:auto}
.final__body{max-width:44ch;margin:var(--space-4) auto var(--space-6);color:rgba(242,247,249,.92)}
.final__note{margin-top:var(--space-4);color:var(--text-on-ink-muted)}

/* ---- calendar embed ----
   The height is reserved up front so mounting the iframe costs 0 CLS. The
   slot only ever renders when data-calendar-url is set on <html>; until then
   the mailto/Upwork fallbacks are the whole booking route. */
.booking-embed{
  max-width:800px;
  min-height:var(--booking-embed-h,640px);
  margin:var(--space-10) auto 0;
  border:1px solid var(--border-dark);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-800);
}
.booking-embed[hidden]{display:none}
.booking-embed iframe{display:block;width:100%;height:var(--booking-embed-h,640px);border:0}

/* pre-mount state: a real button, not a spinner — the embed is fetched only
   when someone asks for it (SPEC §10: "loads on interaction/idle") */
.booking-embed__prompt{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-4);
  min-height:var(--booking-embed-h,640px);
  padding:var(--space-6);
  text-align:center;
}
.booking-embed__prompt p{max-width:38ch;color:var(--text-on-ink-muted)}

@media (max-width:767px){
  :root{--booking-embed-h:560px}
}

/* the always-available fallback route beside the embed (SPEC §8) */
.booking-fallback{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  margin-top:var(--space-6);
  color:var(--text-on-ink-muted);
  font-size:var(--fs-sm);
}
/* its own tap target rather than a link buried mid-sentence, so it clears
   --hit-min without inflating the line box (SPEC §2.4) */
.booking-fallback__link{
  display:inline-flex;
  align-items:center;
  min-height:var(--hit-min);
  padding-inline:var(--space-2);
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.booking-fallback__link:hover{color:#fff}

/* ============================================================
   Final CTA — "little life" on the primary button (CV, 8/23).
   styles.css already sets a base .btn--primary transform transition;
   this extends it with box-shadow and a stronger lift, loading last
   so it wins on equal specificity. Respects reduced motion.
   ============================================================ */
.btn--primary{
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  transform:var(--lift);
  box-shadow:var(--shadow-lg);
}
@media (prefers-reduced-motion:reduce){
  .btn--primary{transition:none;}
  .btn--primary:hover,
  .btn--primary:focus-visible{transform:none;}
}

/* ============================================================
   DARK REBUILD — "Deep Field" section theming (2026-08-23)

   Takes the six previously-light sections (#start-here, #tools, #how,
   #outcomes, #fit, #faq) into the same deep-navy world as the video hero,
   reframe and final CTA. Section-scoped by ID throughout — the shared
   design-system tokens (--ink-900, --text-strong, --border, --canvas-soft,
   .section--soft, .grad-text, etc.) are untouched, so every other consumer
   of those tokens (including the already-dark Hero/Reframe/Final CTA) is
   unaffected. New tokens below are additive only.

   Ground + text values are the approved "Deep Field" mock
   (docs/superpowers/plans/2026-08-23-cvmethod-dark-rebuild.md): base
   #0A1836 is already --ink-900; --df-deep/--df-surface/--df-surface-2/
   --df-line/--df-text/--df-muted are new. All pairings AA-verified
   (EAF1F7-on-0A1836 15.4:1, 93a4c6-on-0A1836 7.0:1, 93a4c6-on-12224f/16285c
   6.1–5.6:1, 93a4c6-on-070f24 7.6:1 — every one clears 4.5:1).
   ============================================================ */
:root{
  --df-deep:#070f24;
  --df-surface:#12224f;
  --df-surface-2:#16285c;
  --df-line:rgba(255,255,255,.09);
  --df-line-2:rgba(255,255,255,.14);
  --df-text:#EAF1F7;
  --df-muted:#93a4c6;
  --df-chip-bg:rgba(255,255,255,.04);
  --df-shadow:0 18px 40px rgba(4,9,22,.45);
  --df-shadow-hover:0 26px 60px rgba(4,9,22,.6);
}

/* ---- grounds ----
   background-color set explicitly (not just background-image) so the
   element's OWN computed background-color is dark, not the shorthand's
   default transparent — belt-and-braces on top of the now-dark body. */
#start-here,
#tools,
#how,
#outcomes,
#fit,
#faq{
  background-color:var(--ink-900);
  background-image:
    radial-gradient(80% 55% at 82% 8%, rgba(46,224,154,.07), transparent 60%),
    linear-gradient(180deg, var(--ink-900), var(--df-deep));
  color:var(--df-text);
}

/* selective texture (§B): a soft glow behind exactly two section headers —
   Tools and FAQ — never full-bleed, never animated, no canvas/JS cost */
#tools .section-head,
#faq .section-head{position:relative}
#tools .section-head::before,
#faq .section-head::before{
  content:"";
  position:absolute;
  inset:-48px -12% auto -12%;
  height:280px;
  background:radial-gradient(55% 100% at 28% 0%, rgba(46,224,154,.10), transparent 72%);
  z-index:-1;
  pointer-events:none;
}

/* ---- shared text/eyebrow overrides (every element below has an explicit
   light-canvas color in styles.css/page.css that must flip in these six
   sections; nothing here changes the rule for any other section) ---- */
#start-here .eyebrow,
#tools .eyebrow,
#how .eyebrow,
#outcomes .eyebrow,
#fit .eyebrow,
#faq .eyebrow{color:var(--mint)}

#start-here .section-head p,
#tools .section-head p,
#how .section-head p,
#outcomes .section-head p,
#fit .section-head p,
#faq .section-head p{color:var(--df-muted)}

/* ---- diagnostic→tools handoff ---- */
.browse-all{
  display:inline-flex;
  margin-top:var(--space-6);
  color:var(--df-muted);
  font-size:var(--fs-sm);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--dur-base) var(--ease-in-out);
}
.browse-all:hover,
.browse-all:focus-visible{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .browse-all{transition:none}
}

/* ---- Tools → Deep Field cards ----
   background-color set explicitly alongside background-image on every
   card/panel below — same belt-and-braces reasoning as the section
   grounds above, so no card ever computes to a transparent/white fill. */
#tools .tool-band__door{color:var(--df-muted)}
#tools .tool-band--strategic{
  background-color:var(--df-deep);
  background-image:none;
  border:1px solid var(--df-line);
}
#tools .tool-card{
  background-color:var(--df-surface);
  background-image:linear-gradient(180deg, var(--df-surface-2), var(--df-surface));
  border:1px solid var(--df-line);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, var(--df-shadow);
}
#tools .tool-card:hover,
#tools .tool-card:focus-within{
  border-color:var(--df-line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, var(--df-shadow-hover);
}
#tools .tool-card__body,
#tools .tool-card__marker{color:var(--df-muted)}
#tools .tool-card__check{color:var(--accent)}
#tools .chip{
  border-color:rgba(239,132,245,.45);
  background:rgba(239,132,245,.09);
  color:var(--orchid);
}

/* ---- How it works ---- */
#how .step{
  background-color:var(--df-surface);
  background-image:linear-gradient(180deg, var(--df-surface-2), var(--df-surface));
  border:1px solid var(--df-line);
}
#how .step__body{color:var(--df-muted)}
/* .step__key keeps its mint-pill/ink-900 pairing unchanged — already AA on any ground */

/* ---- Outcomes ---- */
#outcomes .outcome{
  background-color:var(--df-surface);
  background-image:linear-gradient(180deg, var(--df-surface-2), var(--df-surface));
  border:1px solid var(--df-line);
}
#outcomes .outcome__from{color:var(--df-muted)}
/* the light gradient (--grad-signal-ink) reads as near-invisible dark-on-dark
   text; swap to the bright mint→accent pair already proven AA on --ink-900 */
#outcomes .outcome__to{background-image:var(--grad-signal)}

/* ---- Who it's for ---- */
#fit .fit__list li{border-bottom-color:var(--df-line)}
#fit .fit__list--yes li::before{color:var(--accent)}
#fit .fit__list--no li::before{color:var(--df-muted)}

/* ---- FAQ accordion ---- */
#faq .accordion details{border-bottom-color:var(--df-line)}
#faq .accordion summary{color:var(--df-text)}
#faq .accordion summary::after{color:var(--accent)}
#faq .accordion__answer{color:var(--df-muted)}

/* ============================================================
   05B — BUILT ON  band (quiet, mono, competence signal — no client claims,
   no third-party logos). Reuses .section--dark for its flat --ink-900
   ground (matches the How-it-works/Final-CTA flat fills either side of it).
   ============================================================ */
.builton{padding-block:var(--space-6);border-top:1px solid var(--border-dark)}
.tool-band--strategic .tool-band__door{margin-bottom:var(--space-2)}
.tool-band--strategic .tool-band__retainer{margin:0 0 var(--space-6);color:var(--text-on-ink-muted);font-size:.95rem;max-width:56ch}
.builton__label{
  color:var(--accent);
  opacity:.85;
  margin:0 0 var(--space-3);
}
.builton__stack{
  max-width:74ch;
  color:var(--df-muted);
  font-size:var(--fs-sm);
  line-height:1.7;
}