/* ========================================================================
   AeolusGTM V10 homepage
   V9's lean skeleton + the V7/V8 frontend treatments: dense hero sky,
   celestial seams, flattened section runs, glass cards, foundation slab.
   Extends /v3/assets/css/aeolus.css without redefining its identity.
   ======================================================================== */

:root {
  --v10-muted-light: #6E6D68;
  --v10-muted-dark: rgba(254,254,254,.52);
  --v10-night: #070a12; /* hero + story base — deeper than --bg-dark */
}

body { background: var(--v10-night); }

/* Required brand grain: quiet enough to preserve contrast, fixed to avoid repaints. */
body::before {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

[id] { scroll-margin-top: 112px; }

.site-nav { z-index: 300; }
/* center via inset+auto margins instead of left:50%+transform: a fixed element's
   shrink-to-fit width is computed BEFORE transform, so left:50% halves the space
   it can occupy and flex-crushes the logo on laptop widths */
.site-nav { left: 0; right: 0; transform: none; margin-inline: auto; width: fit-content; }
.site-nav .nav-logo { flex-shrink: 0; }
.nav-burger { color: inherit; }

/* nav hardening: multi-word links must never wrap inside the pill */
.site-nav .nav-links a { white-space: nowrap; }
.site-nav .nav-links li { flex-shrink: 0; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  border-radius: 6px;
}

.site-nav .nav-links a,
.footer-nav-list a { text-underline-offset: 4px; }

/* vertical rhythm (v8's tightened scale) */
main .section { padding-top: clamp(3rem, 4.6vw, 4.8rem); padding-bottom: clamp(3rem, 4.6vw, 4.8rem); }
main .sec-head { margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem); }

/* ------------------------------------------------------------------------
   Hero — dormant sails, draw-in + glow on hover (v7 treatment)
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--v10-night);
  display: flex;
  flex-direction: column;
}

/* layered vast night sky */
.sky-base {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 70% 32%, rgba(55,85,155,.08), transparent 70%),
    radial-gradient(ellipse 35% 30% at 60% 22%, rgba(75,55,135,.06), transparent 65%),
    radial-gradient(ellipse 55% 45% at 76% 52%, rgba(45,75,135,.05), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(0,0,0,.45) 100%),
    var(--v10-night);
}
.sky-base::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(123deg, transparent 34%, rgba(255,255,255,.016) 50%, transparent 66%);
}

/* dense scattered star field */
.sky-stars {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 3% 7%,   rgba(254,254,254,.60), transparent 100%),
    radial-gradient(1px 1px at 7% 24%,       rgba(254,254,254,.32), transparent 100%),
    radial-gradient(1px 1px at 11% 48%,      rgba(254,254,254,.25), transparent 100%),
    radial-gradient(1.2px 1.2px at 5% 68%,   rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 14% 14%,      rgba(195,215,255,.28), transparent 100%),
    radial-gradient(1px 1px at 17% 55%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 21% 35%,      rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1.3px 1.3px at 2% 86%,   rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 24% 78%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 27% 6%,       rgba(195,215,255,.26), transparent 100%),
    radial-gradient(1px 1px at 31% 46%,      rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 22%,  rgba(254,254,254,.42), transparent 100%),
    radial-gradient(1px 1px at 37% 70%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 41% 16%,      rgba(195,215,255,.24), transparent 100%),
    radial-gradient(1.4px 1.4px at 44% 52%,  rgba(254,254,254,.32), transparent 100%),
    radial-gradient(1px 1px at 47% 36%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 51% 84%,      rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1.2px 1.2px at 54% 9%,   rgba(254,254,254,.45), transparent 100%),
    radial-gradient(1px 1px at 57% 60%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 61% 29%,      rgba(195,215,255,.30), transparent 100%),
    radial-gradient(1px 1px at 64% 48%,      rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1.3px 1.3px at 67% 73%,  rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 71% 14%,      rgba(254,254,254,.42), transparent 100%),
    radial-gradient(1px 1px at 74% 40%,      rgba(195,215,255,.26), transparent 100%),
    radial-gradient(1.4px 1.4px at 77% 66%,  rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 81% 24%,      rgba(254,254,254,.28), transparent 100%),
    radial-gradient(1px 1px at 84% 53%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1.2px 1.2px at 87% 80%,  rgba(254,254,254,.32), transparent 100%),
    radial-gradient(1px 1px at 91% 33%,      rgba(195,215,255,.28), transparent 100%),
    radial-gradient(1px 1px at 94% 62%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 97% 11%,      rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 9% 92%,       rgba(254,254,254,.18), transparent 100%),
    radial-gradient(1.2px 1.2px at 39% 91%,  rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 59% 94%,      rgba(254,254,254,.16), transparent 100%),
    radial-gradient(1px 1px at 79% 90%,      rgba(195,215,255,.22), transparent 100%);
}

/* readability scrim behind the headline (lower-left) */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 82% at 17% 64%, rgba(5,8,14,.82), transparent 60%);
}

/* lift the hero's vignetted bottom back to its flat base so it hands off to
   the story section (same #070a12) with no tonal step — one continuous sky */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7,10,18,0), var(--v10-night) 88%);
}

/* constellation: right portion, dormant until the sky is hovered */
.constellation-wrap {
  position: absolute; left: 38%; right: 0; top: 0; bottom: 0;
  z-index: 1; pointer-events: none; opacity: .94; overflow: hidden;
}
.constellation-inner { width: 100%; height: 100%; }
.g-edges { opacity: .78; transition: filter 1.2s ease; }
.hero.lit .g-edges { filter: drop-shadow(0 0 5px rgba(243,208,106,.18)); }
.g-trails { opacity: .26; transition: opacity 1.6s ease; }
.hero.lit .g-trails { opacity: .70; }
.g-sur { opacity: .50; transition: opacity 1.4s ease; }
.hero.lit .g-sur { opacity: 1; }
.g-stars { opacity: .82; transition: opacity 1.4s ease; }
.hero.lit .g-stars { opacity: 1; }

/* invisible hover zone over the sky (clear of nav + copy).
   CRITICAL z-order: content z-2 UNDER zone z-3, so hover reaches the sky. */
.sky-zone { position: absolute; left: 40%; top: 0; right: 0; bottom: 0; z-index: 3; }

/* content */
.hero-content {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column;
  max-width: var(--max); width: 100%; margin: 0 0 0 clamp(1rem, 3.5vw, 4.5rem);
  padding: clamp(6rem, 11vh, 8rem) var(--pad) clamp(6rem, 12vh, 9.5rem);
  box-sizing: border-box;
}
.hero-spacer { flex: 1; min-height: 0.5rem; }
.hero-copy { position: relative; max-width: 640px; animation: heroFade 1s var(--ease-spring) both; }
@keyframes heroFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-category {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--tx-on-dark-label); margin: 0 0 clamp(14px, 1.8vw, 22px);
  display: flex; align-items: center; gap: 12px;
}
.hero-category::before { content: ""; width: 38px; height: 1px; background: var(--gold-bright); opacity: .6; }

.hero h1 { margin: 0; font-family: var(--font-display); color: var(--tx-on-dark); line-height: .94; letter-spacing: -0.02em; font-weight: 300; }
.hero h1 span { display: block; font-size: clamp(34px, 4.6vw, 60px); font-weight: 400; color: var(--tx-on-dark); line-height: 1.0; }
.hero h1 em {
  display: block; font-style: italic; font-weight: 400;
  font-size: clamp(40px, 5.9vw, 82px); color: var(--gold-bright);
  line-height: .94; letter-spacing: -0.015em; margin: .04em 0 0 -.01em;
  text-shadow: 0 0 30px rgba(243,208,106,.22), 0 0 70px rgba(243,208,106,.10);
}
.hero-sub {
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 52ch;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem); line-height: 1.66; color: var(--tx-on-dark-2);
}

.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 2.8vw, 32px); flex-wrap: wrap; }
.hero-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold-bright); color: var(--navy); border: none; border-radius: 12px;
  padding: 13px 26px; font: 600 14px var(--font-body); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 24px rgba(243,208,106,.10);
  transition: box-shadow var(--transition-glass), transform var(--transition-base);
}
.hero-primary .arrow { transition: transform .3s var(--ease-spring); }
.hero-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 15px rgba(243,208,106,.30), 0 0 40px rgba(243,208,106,.12); }
.hero-primary:hover .arrow { transform: translateX(4px); }
.hero-actions .glass-pill-dark { cursor: pointer; padding: .65rem 1.15rem; text-decoration: none; }

/* ------------------------------------------------------------------------
   Story / credibility (v8 panel; classes referenced from inline markup)
   ------------------------------------------------------------------------ */
.logo-slot { display: flex; align-items: center; justify-content: center; height: 46px; width: 100%; }
.client-logo { width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: opacity var(--transition-slow); }
.client-logo:hover { opacity: 1; }
.logo-arkestro { max-height: 30px; } .logo-snapwire { max-height: 30px; } .logo-inturn { max-height: 25px; }
.logo-siemens { max-height: 27px; } .logo-nrl { max-height: 46px; } .logo-fusus { max-height: 44px; }

.acq-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: rgba(243,208,106,.10); border: 1px solid rgba(243,208,106,.24);
  font: 700 9px var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-bright);
}

@media (max-width: 920px) {
  #story .story-grid { grid-template-columns: 1fr !important; }
  #story .story-ledger { max-width: 480px; }
}
@media (max-width: 820px) { #story .story-logos { grid-template-columns: repeat(3,1fr) !important; gap: 32px 20px !important; } }
@media (max-width: 480px) { #story .story-logos { grid-template-columns: repeat(2,1fr) !important; } }

/* ------------------------------------------------------------------------
   Celestial seams (v8) — stars emerging + solar bloom, exact end stops
   ------------------------------------------------------------------------ */
.seam { display: block; width: 100%; pointer-events: none; }
.seam-sunset { height: clamp(105px, 13.5vh, 165px);
  background:
    radial-gradient(1.3px 1.3px at 17% 90%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 85%,      rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 92%,      rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 81%,      rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 77%,      rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 74%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 46% at 50% 44%, rgba(243,208,106,0.14), transparent 60%),
    linear-gradient(to bottom,
      #F3EFE7 0%, #efe6d4 15%, #e6cda0 29%, #cfa066 42%, #9c7a52 53%,
      #5b5550 64%, #2e3550 76%, #16203a 88%, #0a0f1a 100%); }
.seam-sunrise { height: clamp(105px, 13.5vh, 165px);
  background:
    radial-gradient(1.3px 1.3px at 17% 10%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 15%,      rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 8%,       rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 19%,      rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 23%,      rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 26%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 46% at 50% 50%, rgba(243,208,106,0.14), transparent 60%),
    linear-gradient(to bottom,
      #0a0f1a 0%, #16203a 12%, #2e3550 24%, #5b5550 36%, #9c7a52 47%,
      #cfa066 58%, #e6cda0 71%, #efe6d4 85%, #F3EFE7 100%); }

/* ------------------------------------------------------------------------
   The problem — dawn tone-flip, v7 cards, foundation slab, AI beat
   ------------------------------------------------------------------------ */
#problem { --gold-dk: #C89A3A; position: relative; padding-top: clamp(100px, 14vh, 190px); }

/* dawn: the night sky above (Who We Are) breaks into this cream canvas */
#problem .tone-flip {
  position: absolute; left: 0; right: 0; top: 0; height: clamp(190px, 27vh, 330px);
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(1.3px 1.3px at 17% 5%,  rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 8%,      rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 4%,      rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 11%,     rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 13%,     rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 15%,     rgba(254,254,254,.22), transparent 100%),
    radial-gradient(150% 56% at 50% 60%, rgba(243,208,106,0.22), transparent 62%),
    linear-gradient(to bottom,
      #070a12 0%,
      #0b1324 15%,
      #15203a 27%,
      #2a3252 37%,
      #6b5a4e 45%,
      rgba(213,164,74,0.55) 53%,
      rgba(243,208,106,0.42) 60%,
      rgba(248,241,224,0.72) 74%,
      rgba(243,239,231,0) 100%);
}
#problem .pr-inner { position: relative; z-index: 1; }

/* card entrance + hover (v7) */
@keyframes pcFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#problem article.layer-card:hover { transform: translateY(-3px); border-color: rgba(197,145,42,.45); box-shadow: var(--elev-3), 0 10px 30px rgba(197,145,42,.10); }
@media (prefers-reduced-motion: reduce) { #problem article.layer-card { animation: none !important; } }
@media (max-width: 1020px) { #problem .pb-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 540px)  { #problem .pb-grid { grid-template-columns: 1fr !important; } }

/* the flow: stems from the four cards converge on the diagnosis line, then the
   data slab (three real causes per symptom, column-aligned), then down into AI */
#problem .fd-flow { margin-top: 0; }
#problem .fd-stems { display: grid; grid-template-columns: repeat(4,1fr); height: 18px; }
#problem .fd-stems i { justify-self: center; width: 2px; background: rgba(26,25,22,.22); }
#problem .fd-rail { width: 75%; margin: 0 auto; height: 2px; border-radius: 2px; background: rgba(26,25,22,.22); }
#problem .fd-drop { width: 2px; height: 18px; margin: 0 auto; background: rgba(26,25,22,.22); }
#problem .fd-drop.solo { height: 20px; }
#problem .fd-drop.tall { height: clamp(40px, 5vw, 64px); }
#problem .fd-resolve { margin: 14px auto; max-width: 44ch; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.35rem,2.4vw,1.9rem); line-height: 1.3; color: var(--tx); }
#problem .fd-resolve span { font-style: normal; color: var(--gold-dk); }
#problem .fd-slab { border: 1px solid rgba(26,25,22,.16); border-top: 2px solid rgba(26,25,22,.24); background: linear-gradient(to bottom, rgba(26,25,22,.05), rgba(26,25,22,.10)); border-radius: 12px; padding: 13px 16px; }
#problem .fd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 9px; }
#problem .fd-chips .bad { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: rgba(181,67,47,.08); border: 1px solid rgba(181,67,47,.35); color: #B5432F; font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
@media (max-width: 1020px) {
  #problem .fd-flow, #problem .fd-drop { display: none; }
  #problem .fd-resolve { margin-top: 1.4rem; }
  #problem .fd-slab { margin-top: .5rem; }
  #problem .esc { margin-top: 2rem; }
}
@media (max-width: 540px) { #problem .fd-chips { gap: 7px 8px; } #problem .fd-chips .bad { font-size: 8.5px; padding: 4px 8px; } }

/* Now-add-AI escalation beat (v7) */
#problem .esc { margin-top: 0; }
#problem .esc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2px,.5vw,10px); flex-direction: row-reverse; }
#problem .esc-copy { flex: 0 1 460px; min-width: 280px; }
#problem .esc-head { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem,3.5vw,2.8rem); line-height: 1.12; letter-spacing: -.015em; color: var(--tx); max-width: 24ch; }
#problem .esc-head em { font-style: italic; color: var(--gold); }
#problem .esc-sub { margin: 1.2rem 0 0; max-width: 60ch; font: 350 clamp(1rem,1.3vw,1.15rem)/1.6 var(--font-body); color: var(--tx2); }
.br-d { display: inline; }
@media (max-width: 760px) { .br-d { display: none; } }
#problem .esc-illo { flex: 0 1 330px; min-width: 250px; position: relative; max-width: 330px; margin: 0; }
#problem .esc-shadow { position: absolute; left: 50%; top: 90.8%; width: 47.2%; height: 15.3%; transform: translate(-50%,-50%); background: rgba(44,52,65,.09); border-radius: 50%; z-index: 0; pointer-events: none; }
#ais-jenga { position: relative; z-index: 1; display: block; width: 100%; height: auto; transform-origin: 50% 89.8%; will-change: transform; }
#problem .esc-stats { margin-top: clamp(14px,1.8vw,22px); display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: clamp(20px,3vw,36px); max-width: 560px; margin-left: auto; margin-right: auto; }
#problem .esc-stat { text-align: center; }
#problem .esc-num { display: flex; justify-content: center; align-items: baseline; font-family: var(--font-display); font-weight: 600; line-height: .85; letter-spacing: -.02em; color: var(--tx); font-variant-numeric: tabular-nums; }
#problem .esc-num .v { font-size: clamp(3rem,4.6vw,4.2rem); }
#problem .esc-num .pct { font-size: clamp(1.6rem,2.2vw,2.1rem); color: var(--gold); margin-left: 1px; }
#problem .esc-stat p { margin: .85rem auto 0; max-width: 26ch; font: 400 14px/1.5 var(--font-body); color: var(--tx2); }
#problem .esc-src { margin: 1.6rem 0 0; text-align: center; font: 600 9.5px/1.7 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
@media (max-width: 760px) { #problem .esc-row { flex-direction: column-reverse; } #problem .esc-copy, #problem .esc-illo { flex-basis: auto; } #problem .esc-illo { max-width: 320px; } }

/* ------------------------------------------------------------------------
   Diagnostic — alternating walkthrough timeline (v7 dtl treatment)
   ------------------------------------------------------------------------ */
.diag-section { overflow: clip; }

.dtl-head { max-width: 62ch; margin: 0 0 clamp(1.4rem, 2.8vw, 2.2rem); }
.dtl-head .label { display: block; margin-bottom: 1rem; }
.dtl-lede { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65; color: var(--tx-on-dark-2); font-weight: 350; }
.dtl-lede b { color: var(--tx-on-dark); font-weight: 500; }

/* built on the official developer platforms — quiet monochrome badge row */
.dev-badges { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(2.6rem, 4.5vw, 4.5rem); margin: clamp(1.5rem, 2.6vw, 2.2rem) 0 clamp(1rem, 1.8vw, 1.4rem); }
.dev-logo { filter: brightness(0) invert(1); opacity: .6; transition: opacity var(--transition-slow); }
.dev-badges:hover .dev-logo { opacity: .8; }
.dev-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dev-badge .dev-logo { height: 34px; width: auto; }
.dev-badge i { font: 700 12px/1 var(--font-body); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: rgba(254,254,254,.6); }
.dev-sf-badge { display: inline-flex; align-items: center; gap: 12px; }
.dev-sf-cloud { height: 36px; width: auto; }
.dev-sf-text { height: 54px; width: auto; }
@media (max-width: 640px) {
  .dev-badges { gap: 1.4rem 2rem; }
  .dev-badge .dev-logo { height: 26px; }
  .dev-badge i { font-size: 10px; }
  .dev-sf-cloud { height: 28px; }
  .dev-sf-text { height: 42px; }
}

.walkthrough-toggle {
  display: inline-flex; gap: .55rem; align-items: center;
  margin-top: 1rem; padding: .5rem .7rem;
  border: 1px solid rgba(243,208,106,.2); border-radius: 9px;
  background: rgba(255,255,255,.035); color: rgba(254,254,254,.66);
  font: 500 .74rem/1 var(--font-body); cursor: pointer;
}
.walkthrough-toggle:hover,
.walkthrough-toggle[aria-pressed="true"] { border-color: rgba(243,208,106,.42); color: var(--gold-bright); }

.dtl { position: relative; --conn: clamp(26px, 3vw, 52px); list-style: none; margin: clamp(1rem, 2vw, 1.6rem) 0 0; padding: 0; }
.dtl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: linear-gradient(to bottom, transparent 0, var(--bd-dark-gold) 8%, var(--bd-dark-gold) 92%, transparent 100%); }

.dtl-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(1.1rem, 2.2vw, 2rem) 0; }
.dtl-row > .dtl-card { grid-row: 1; grid-column: 1; box-sizing: border-box; padding-right: var(--conn); }
.dtl-row > .dtl-text { grid-row: 1; grid-column: 2; box-sizing: border-box; justify-self: start; padding-left: clamp(1.75rem, 3.5vw, 3.5rem); text-align: left; }
.dtl-row:nth-child(even) > .dtl-card { grid-column: 2; padding-right: 0; padding-left: var(--conn); }
.dtl-row:nth-child(even) > .dtl-text { grid-column: 1; justify-self: end; padding-left: 0; padding-right: clamp(1.75rem, 3.5vw, 3.5rem); text-align: right; }

.dtl-node { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 5px rgba(243,208,106,0.12), 0 0 20px rgba(243,208,106,0.55); z-index: 3; }
.dtl-node::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); height: 1px; width: var(--conn); background: var(--bd-dark-gold); }
.dtl-row:nth-child(odd) .dtl-node::after { right: 50%; }
.dtl-row:nth-child(even) .dtl-node::after { left: 50%; }

.dtl-text { max-width: 24ch; }
.dtl-step { display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; color: var(--gold-bright); opacity: 0.6; margin-bottom: 0.4rem; font-variant-numeric: tabular-nums; }
.dtl-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; color: var(--tx-on-dark); }

/* card — fixed 600x560 iframe scaled to fit; --dtl-s set by JS (ResizeObserver) */
.dtl-card { width: 100%; }
.dtl-scaler { width: 100%; max-width: 540px; aspect-ratio: 600 / 560; position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(243,208,106,0.18); box-shadow: 0 44px 100px -20px rgba(0,0,0,0.78), 0 16px 44px -14px rgba(0,0,0,0.55), 0 0 70px rgba(243,208,106,0.06); }
.dtl-frame { position: absolute; top: 0; left: 0; width: 600px; height: 560px; border: 0; transform-origin: top left; transform: scale(var(--dtl-s, 1)); }

.dtl-close { text-align: center; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--tx-on-dark); max-width: 26ch; margin: clamp(2rem, 3.8vw, 3.2rem) auto 0; }
.dtl-cta { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.dtl-trust { margin: 1.2rem 0 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--tx-on-dark-3); }

/* mobile walkthrough mocks (from v9; shown under 820px in place of iframes) */
.mobile-preview {
  display: none;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(243,208,106,.15);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(25,34,56,.8), rgba(10,15,26,.9));
  box-shadow: 0 26px 65px -28px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--tx-on-dark);
}
.mock-label { display: block; margin-bottom: 1.2rem; color: var(--gold-bright); font-size: .65rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.intake-preview > b,
.market-preview > b { display: block; margin-bottom: 1.2rem; font-family: var(--font-display); font-size: 1.4rem; }
.intake-preview > i { display: block; width: 100%; height: 35px; margin-top: 10px; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.intake-preview > i.short { width: 68%; }
.mock-action { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 8px; background: var(--gold-bright); color: var(--navy); font-size: .75rem; font-weight: 650; }
.connect-preview > div { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 2.6rem 0; }
.connect-preview > div b { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 18px; background: rgba(255,255,255,.07); }
.connect-preview > div i { width: 48px; height: 1px; background: linear-gradient(90deg, var(--gold-bright), rgba(243,208,106,.25)); }
.mock-status { display: block; color: #7EE1A3; text-align: center; font-size: .8rem; }
.findings-preview { grid-template-columns: 110px 1fr; gap: 22px; align-items: center; }
.score-ring { display: grid; place-items: center; align-content: center; width: 110px; height: 110px; border: 8px solid rgba(243,208,106,.32); border-top-color: var(--gold-bright); border-radius: 50%; }
.score-ring strong { font-size: 2.2rem; line-height: 1; }
.score-ring span { color: var(--v10-muted-dark); font-size: .7rem; }
.findings-preview > div:last-child span { display: block; margin: 10px 0 5px; color: var(--v10-muted-dark); font-size: .7rem; }
.findings-preview > div:last-child b { display: block; width: var(--score); height: 6px; border-radius: 999px; background: var(--gold-bright); }
.market-preview > span:not(.mock-label) { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; margin-top: 14px; color: var(--v10-muted-dark); font-size: .76rem; }
.market-preview i { display: block; width: var(--bar); height: 8px; border-radius: 999px; background: var(--gold-bright); }
.walkthrough-paused .dtl-scaler { display: none; }
.walkthrough-paused .mobile-preview { display: block; }
.walkthrough-paused .findings-preview { display: grid; }

/* ------------------------------------------------------------------------
   Results / case study
   ------------------------------------------------------------------------ */
.result-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(243,208,106,.18);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(30,40,64,.5), rgba(11,16,27,.42));
  box-shadow: 0 42px 100px -34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05);
}
.result-context {
  margin: 0 0 .8rem;
  color: var(--gold-bright);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.result-copy > p { max-width: 50ch; margin-top: 1.1rem; color: rgba(254,254,254,.64); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.68; }
.result-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.8rem; }
.result-metrics dt { color: var(--gold-bright); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.result-metrics dd { margin-top: .5rem; color: var(--v10-muted-dark); font-size: .76rem; line-height: 1.4; }
.result-copy blockquote { margin: 1.8rem 0 0; }
.result-copy blockquote p { color: var(--tx-on-dark); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; }
.result-copy blockquote footer { margin-top: .5rem; color: var(--v10-muted-dark); font-size: .74rem; }
.result-chart { padding: clamp(1.1rem, 2vw, 1.6rem); border-radius: 18px; }
.result-chart-head { display: flex; gap: 1rem; justify-content: space-between; color: var(--v10-muted-dark); font-size: .7rem; }
.result-chart-head strong { color: var(--gold-bright); font-size: 1rem; }
.result-chart svg { width: 100%; height: auto; margin-top: .7rem; overflow: visible; }
.result-chart svg text { fill: rgba(254,254,254,.45); font-family: var(--font-body); font-size: 11px; }
.result-chart svg .chart-grid { stroke: rgba(254,254,254,.16); stroke-width: 1; }
.result-chart svg .chart-grid.faint { stroke: rgba(254,254,254,.06); }
.result-path { fill: none; stroke: var(--gold-bright); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(243,208,106,.28)); stroke-dasharray: 660; stroke-dashoffset: 660; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .2s; }
.result-chart.in .result-path { stroke-dashoffset: 0; }
.result-chart circle { fill: var(--gold-bright); opacity: .9; }
.result-chart svg text.chart-final { fill: var(--gold-bright); font-size: 28px; font-weight: 700; }
.result-milestones { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.result-milestones li { color: var(--v10-muted-dark); font-size: .64rem; line-height: 1.35; }
.result-milestones b { display: block; color: var(--gold-bright); }

/* ------------------------------------------------------------------------
   How we work — v7 engagement timeline chrome
   ------------------------------------------------------------------------ */
#how { --eg: clamp(18px, 2vw, 28px); }
.how-head { max-width: 820px; }
.eng-lede { margin: 1.2rem 0 0; max-width: 58ch; font: 350 clamp(1rem,1.15vw,1.12rem)/1.66 var(--font-body); color: var(--tx-on-dark-2); }
.eng-lede b { color: var(--tx-on-dark); font-weight: 500; }
.eng-tl { list-style: none; margin: clamp(2.4rem,4vw,3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: var(--eg); align-items: stretch; }
.eng-stage { position: relative; padding-top: 26px; display: flex; flex-direction: column; }
.eng-stage::before { content: ""; position: absolute; top: 5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(243,208,106,.12), 0 0 14px rgba(243,208,106,.45); }
.eng-stage::after { content: ""; position: absolute; top: 9px; left: 22px; right: calc(-1 * var(--eg)); height: 1px; background: rgba(200,154,58,.28); }
.eng-stage:last-child::after { content: none; }
.eng-when { position: absolute; top: 0; left: 22px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); background: #0a0f1a; padding-right: 10px; z-index: 1; }
.eng-card { flex: 1; display: flex; flex-direction: column; margin-top: 12px; padding: 18px 18px 20px; border-radius: 14px; background: rgba(16,24,44,.42); border: 1px solid rgba(254,254,254,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.eng-stage:last-child .eng-card { background: rgba(200,154,58,.07); border-color: rgba(200,154,58,.30); }
.eng-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem,1.8vw,1.7rem); line-height: 1.1; color: var(--tx-on-dark); }
.eng-what { margin: 10px 0 0; font: 400 14px/1.62 var(--font-body); color: var(--tx-on-dark-2); }
@media (max-width: 980px) {
  .eng-tl { grid-template-columns: 1fr 1fr; row-gap: clamp(1.4rem,3vw,2rem); }
  .eng-stage:nth-child(2)::after { content: none; }
}
@media (max-width: 560px) {
  .eng-tl { grid-template-columns: 1fr; }
  .eng-stage::after { content: none; }
}

/* ------------------------------------------------------------------------
   Research / insights cards (v7 treatment)
   ------------------------------------------------------------------------ */
.ins-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; max-width: 1040px; margin: 0 auto; }
@media (max-width: 820px) { .ins-grid { grid-template-columns: 1fr; } }
.ins-card { display: flex; flex-direction: column; padding: 1.6rem; min-height: 196px; text-decoration: none; }
.ins-card .label { margin-bottom: 0.9rem; }
.ins-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--tx); line-height: 1.2; margin: 0 0 0.6rem; }
.ins-card p { font-size: 0.9rem; line-height: 1.55; color: var(--tx2); flex: 1; margin: 0; }
.ins-card .read { margin-top: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--gold); }
.ins-card .read .arrow { transition: transform .3s var(--ease-spring); display: inline-block; }
.ins-card:hover .read .arrow { transform: translateX(5px); }
@media (max-width: 640px) { .ins-links .sep { display: none; } .ins-links a { display: block; margin: 8px 0; } }

/* ------------------------------------------------------------------------
   FAQ — native <details> styled to the v7 accordion identity
   ------------------------------------------------------------------------ */
.faq-head { max-width: var(--max-article); margin: 0 auto 1.8rem; }
.faq-item > summary { list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-item .faq-a { max-height: none; overflow: visible; }
.faq-item:not([open]) .faq-a { display: none; }
.faq-a-inner { padding-top: .1rem; }

/* ------------------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------------------ */
.final-cta { text-align: center; }
.final-cta-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.cta-trust { display: flex; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.cta-trust span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; color: var(--tx-on-dark-3); }
.cta-trust span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); opacity: 0.6; }

/* mobile menu must be fully opaque: hero copy was bleeding through in v9.
   Opaque night panel -> links must flip to the on-dark palette. */
.mobile-menu { background: #0b101c; }
.mobile-menu a:not(.nav-cta) { color: var(--tx-on-dark); }
.mobile-menu a:not(.nav-cta):hover { color: var(--gold-bright); }

/* ------------------------------------------------------------------------
   Responsive behavior
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .result-panel { grid-template-columns: 1fr; }
  .result-copy { max-width: 720px; }
}

@media (max-width: 920px) {
  .constellation-wrap { left: 4%; opacity: .55; }
  .sky-zone { display: none; }
  .hero-scrim { background: radial-gradient(ellipse 130% 62% at 50% 76%, rgba(5,8,14,.88), transparent 66%); }
  .hero-copy { max-width: 100%; }
  .hero-content { padding-top: clamp(6rem, 15vh, 8rem); }
}

@media (max-width: 820px) {
  .dtl::before, .dtl-node { display: none; }
  .dtl-row { grid-template-columns: 1fr; padding: clamp(1.5rem, 4.5vw, 2.4rem) 0; border-bottom: 1px solid var(--bd-dark); }
  .dtl-row:last-child { border-bottom: none; }
  .dtl-row > .dtl-card, .dtl-row:nth-child(even) > .dtl-card { grid-column: 1; grid-row: 1; padding: 0; margin: 0 auto 1.4rem; }
  .dtl-row > .dtl-text, .dtl-row:nth-child(even) > .dtl-text { grid-column: 1; grid-row: 2; padding: 0; text-align: left; max-width: 100%; justify-self: start; }
  .dtl-scaler { display: none; }
  .mobile-preview { display: block; }
  .findings-preview { display: grid; }
  .walkthrough-toggle { display: none; }
}

@media (max-width: 640px) {
  .hero { min-height: 780px; }
  .hero-sub { font-size: .98rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions a { justify-content: center; width: 100%; text-align: center; }
  .result-panel { padding: 1.3rem; }
  .result-metrics { grid-template-columns: 1fr; }
  .result-chart-head { align-items: flex-start; flex-direction: column; }
  .result-milestones { grid-template-columns: 1fr 1fr; }
  .cta-trust { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; row-gap: .7rem; }
}

@media (max-width: 768px) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal,
  .reveal-scale { opacity: 1 !important; transform: none !important; }
  .glass-card,
  .glass-card-dark,
  .glass-card-dark-strong,
  .site-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav { background: rgba(12,17,28,.94); }
}

@media (prefers-reduced-motion: reduce) {
  .walkthrough-toggle { display: none; }
}

/* ========================================================================
   Mobile declutter (merged from the /mobile preview, approved 2026-07-16)
   .m-only content is mobile-only; .d-only content is hidden on mobile.
   Everything below is scoped to max-width:820px — desktop is untouched.
   ======================================================================== */

.m-only { display: none !important; }

@keyframes wellIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {

  .m-only { display: block !important; }
  .d-only { display: none !important; }

  /* ── global rhythm: shorter page, headers carry the story ─────────────── */
  main .section { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  main .sec-head { margin-bottom: 1.4rem; }
  .seam { height: 90px; }

  /* ── HERO: constellation owns the top half, copy sits low over a scrim ── */
  .hero { min-height: 100svh; }
  .constellation-wrap { left: 0; right: 0; top: 0; bottom: 46%; opacity: .95; }
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(7,10,18,0) 30%,
      rgba(7,10,18,.55) 52%,
      rgba(7,10,18,.96) 74%,
      #070a12 100%);
  }
  .hero-content { margin: 0; padding: 5rem var(--pad) 3rem; justify-content: flex-end; }
  .hero-copy { max-width: 100%; }
  .hero h1 span { font-size: clamp(30px, 8.6vw, 38px); }
  .hero h1 em { font-size: clamp(36px, 10.8vw, 48px); }
  .hero-sub { margin-top: 16px; max-width: 46ch; font-size: .95rem; line-height: 1.6; }
  .hero-actions { margin-top: 20px; flex-direction: column; align-items: stretch; }
  .hero-actions a { justify-content: center; width: 100%; text-align: center; box-sizing: border-box; }

  /* ── STORY: keep proof (ledger + logos), drop the extras ──────────────── */
  #story .layer-panel-dark { padding: 26px 18px 30px !important; }
  #story .story-grid { gap: 28px !important; }
  #story .story-tagline { display: none !important; }
  #story a[data-booking] { display: none !important; } /* hero CTA is one scroll away */
  #story .story-ledger { max-width: none; }
  #story .layer-well-dark { padding: 20px 18px !important; margin-top: 26px !important; }
  #story .story-logos { grid-template-columns: repeat(3, 1fr) !important; gap: 22px 14px !important; }

  /* ── PROBLEM: four tappable punchlines resting on one foundation slab ─── */
  #problem { padding-top: 96px; }
  #problem .pb-grid { gap: 12px; margin-top: 1.6rem; margin-inline: 8px; } /* cards inset so the slab reads wider, like a base */
  #problem .pb-grid article { padding: 16px 18px 18px !important; cursor: pointer; }
  #problem .pb-grid article > div:first-child { margin-bottom: 8px !important; }
  #problem .pb-grid article > div:first-child::after { content: "+"; font: 500 17px/1 var(--font-body); color: var(--gold-dk); }
  #problem .pb-grid article.expanded > div:first-child::after { content: "\2013"; }
  #problem .pb-grid article .layer-well { display: none; }
  #problem .pb-grid article.expanded .layer-well {
    display: block; margin: 2px 0 14px;
    animation: wellIn .28s ease-out both !important;
    animation-duration: .28s !important;
  }
  #problem .pb-grid article p { font-size: 1.22rem; }

  /* the foundation: resolve line + chip slab merge into one plinth the cards drop into */
  #problem .fd-resolve {
    position: relative; margin: 30px 0 0; max-width: none;
    padding: 18px 18px 6px; text-align: center; font-size: 1.18rem;
    background: linear-gradient(to bottom, rgba(26,25,22,.05), rgba(26,25,22,.07));
    border: 1px solid rgba(26,25,22,.16); border-bottom: none;
    border-top: 3px solid rgba(26,25,22,.32);
    border-radius: 14px 14px 0 0;
  }
  #problem .fd-resolve::before { /* drop line from the cards into the foundation */
    content: ""; position: absolute; top: -31px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 28px; background: rgba(26,25,22,.25);
  }
  #problem .fd-slab {
    margin-top: 0; padding: 10px 14px 18px;
    border: 1px solid rgba(26,25,22,.16); border-top: none;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(to bottom, rgba(26,25,22,.07), rgba(26,25,22,.14));
    box-shadow: 0 16px 30px -20px rgba(26,25,22,.4);
  }
  #problem .fd-chips.m-only { display: flex !important; }

  /* AI beat continues the same flow: drop line out of the foundation,
     headline on the centered spine, small jenga robot seated by the text */
  #problem .fd-drop.tall { display: block; width: 2px; height: 30px; margin: 0 auto; background: rgba(26,25,22,.25); }
  #problem .esc { margin-top: 0; }
  #problem .esc-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; column-gap: 16px; row-gap: 12px; align-items: center; }
  #problem .esc-copy { display: contents; }
  #problem .esc-head { grid-column: 1 / -1; margin-top: 10px; font-size: 1.72rem; text-align: center; max-width: none; }
  #problem .esc-sub { grid-column: 1; margin: 0; font-size: .95rem; }
  #problem .esc-illo { display: block; grid-column: 2; max-width: 92px; min-width: 0; margin: 0; flex: none; }
  #problem .esc-stats { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
  #problem .esc-num .v { font-size: 2.7rem; }
  #problem .esc-num .pct { font-size: 1.4rem; }
  #problem .esc-stat p { font-size: 12.5px; }
  #problem .esc-src { margin-top: 1.2rem; }

  /* ── DIAGNOSTIC: purpose-built static timeline (no mock cards) ────────── */
  .dev-badges { gap: 1rem 1.6rem; margin: 1.3rem 0 .9rem; align-items: center; }
  .dev-badge { flex-direction: row; align-items: center; }
  .dev-badge i { display: none; }
  .dev-badge .dev-logo { height: 21px; }
  .dev-sf-badge { gap: 8px; }
  .dev-sf-cloud { height: 23px; }
  .dev-sf-text { height: 33px; }

  .dtl { margin-top: 1.2rem; }
  .dtl::before {
    display: block; content: ""; position: absolute;
    left: 11px; top: 10px; bottom: 10px; transform: none; width: 1px;
    background: linear-gradient(to bottom, var(--bd-dark-gold) 0, var(--bd-dark-gold) 88%, transparent 100%);
  }
  .dtl-row { display: block; position: relative; padding: 1rem 0 1rem 40px; border-bottom: 0; }
  .dtl-row > .dtl-card, .dtl-row:nth-child(even) > .dtl-card { display: none; }
  .mobile-preview { display: none !important; }
  .dtl-node {
    display: block; left: 11px; top: 32px; transform: translateX(-50%);
    width: 9px; height: 9px;
    box-shadow: 0 0 0 4px rgba(243,208,106,.12), 0 0 14px rgba(243,208,106,.5);
  }
  .dtl-node::after { display: none; }
  .dtl-row > .dtl-text, .dtl-row:nth-child(even) > .dtl-text { max-width: 100%; padding: 0; text-align: left; }
  .dtl-step { font-size: .78rem; margin-bottom: .3rem; }
  .dtl-title { font-size: 1.42rem; }
  .dtl-desc { margin: .45rem 0 0; font: 400 .92rem/1.55 var(--font-body); color: var(--tx-on-dark-2); max-width: 42ch; }
  .dtl-close { margin-top: 1.7rem; font-size: 1.4rem; }
  .dtl-cta { margin-top: 1.4rem; }

  /* ── RESULTS: keep the chart, cut the footnotes ───────────────────────── */
  .result-panel { padding: 1.4rem 1.2rem; gap: 1.7rem; }
  .result-metrics { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
  .result-copy blockquote { margin-top: 1.4rem; }
  .result-milestones { display: none; } /* the 21→88 line already tells it */

  /* ── HOW WE WORK ───────────────────────────────────────────────────────── */
  .eng-tl { margin-top: 1.8rem; gap: 14px; }
  .eng-card { margin-top: 10px; padding: 14px 16px 16px; }

  /* ── INSIGHTS: featured report + the hub link; article cards are desktop ─ */
  .ins-grid .ins-card:nth-child(n+2) { display: none; }
  .ins-links { margin-top: 1.4rem !important; }

  /* ── FINAL CTA / FOOTER ────────────────────────────────────────────────── */
  .cta-trust { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; row-gap: .7rem; }
  .footer-grid > div:nth-child(3) { display: none; } /* Research col: /insights covers it */
}