/* =========================================================================
   SolveR by Galileon — site styles
   Single bundle, concatenated in load order:
     1) base + design tokens   (was solver-v2.css)
     2) page sections          (was solver-v2-sections.css)
     3) demo section tokens + 3b) 30s story player (index)
   ========================================================================= */

/* ----- 1) BASE + DESIGN TOKENS ----- */
/* ============================================================
   SolveR — Galileon  ·  v2  (modern AI-SaaS, gold + warm black)
   tokens · base · primitives
   ============================================================ */

/* Inter — self-hosted (subsets: latin, latin-ext). Downloaded from Google Fonts, SIL OFL 1.1. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* warm near-black surfaces — brand grays (#36342f / #4d4c45 / #b1aba5) */
  --bg:        #100f0d;
  --bg-soft:   #1a1815;
  --elev:      #201e1b;
  --card:      #262420;
  --card-2:    #36342f;
  --line:      #4d4c45;
  --line-soft: #36342f; /* intentionally matches --card-2 (hairline borders vs. surface elevation) — keep in sync */

  /* ink — brand white / #eae8e5 / #b1aba5 */
  --text:  #f5f3f0;
  --muted: #b1aba5;
  --faint: #8a857c; /* AA: ≥4.5:1 on --bg and --bg-soft */

  /* gold — brand primary #fbbf4c (+ glow) */
  --gold:        #fbbf4c;
  --gold-bright: #ffd47e;
  --gold-deep:   #c89233;
  --ink-on-gold: #1a1712;
  --glow:        color-mix(in srgb, var(--gold) 8%, transparent);
  --glow-soft:   color-mix(in srgb, var(--gold) 4%, transparent);

  --maxw: 1200px;
  --gut: clamp(24px, 5vw, 72px);
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --pill: 100px;

  /* type scale — sub-headline sizes snap to these steps (headlines use .h-* clamps) */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;

  /* spacing scale — component padding/gap snaps to these steps */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  --sans: 'Inter', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-lg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ambient gold glow blooms fixed behind content */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 78% -6%, color-mix(in srgb, var(--gold) 4%, transparent), transparent 60%),
    radial-gradient(50vw 40vh at 10% 30%, color-mix(in srgb, var(--gold) 2%, transparent), transparent 60%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 200; padding: 10px 18px; border-radius: 100px; background: var(--gold); color: var(--ink-on-gold); font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); }
.skip-link:focus-visible { top: 14px; }
::selection { background: var(--gold); color: var(--ink-on-gold); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); position: relative; z-index: 1; }
.wrap-narrow { max-width: 940px; }
section { position: relative; z-index: 1; }
.section-pad { padding-block: clamp(90px, 15vh, 160px); }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }

.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 30%, transparent); }

.h-xl { font-size: clamp(40px, 6.4vw, 76px); line-height: 0.98; letter-spacing: -0.03em; }
.h-lg { font-size: clamp(30px, 4.4vw, 54px); }
.h-md { font-size: clamp(24px, 3vw, 36px); }

.gold-text { color: var(--gold); }
.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted); line-height: 1.6; }

/* wordmark */
.wordmark { font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em; }
.wordmark .r { color: var(--gold); }


/* ---------- buttons (pill) ---------- */
/* shared pill-button mechanics — radius, hover lift, transition timing.
   Component selectors below only override what is genuinely different
   (fill, padding); don't re-declare radius/transition per component. */
.btn, .uc-chip, .cmt-btn, .sd-playbtn, .sd-endbtn,
.tcarousel-arrow, .sd-pp {
  border-radius: var(--pill);
  transition: transform 0.15s ease-out, box-shadow 0.2s ease,
              background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, opacity 0.2s ease;
}
.uc-chip:hover, .cmt-btn:hover,
.sd-playbtn:hover, .sd-endbtn:hover { transform: translateY(-1px); }

.btn {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base); letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  border: 1px solid var(--gold); background: var(--gold); color: var(--ink-on-gold);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); background: var(--gold-bright); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px color-mix(in srgb, var(--gold) 15%, transparent); }
.btn:active { transform: translateY(0); background: var(--gold-deep); box-shadow: none; transition: none; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: none; background: transparent; transform: translateY(-1px); }
.btn.ghost:active { transform: translateY(0); border-color: var(--gold-deep); color: var(--gold-deep); transition: none; }
.btn.ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn.sm { padding: 12px 24px; font-size: var(--fs-md); min-height: 44px; }

/* ---------- card ---------- */
.card {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  transition: transform 0.2s ease-out, border-color 0.2s ease, box-shadow 0.25s ease;
}
.card.hoverable:hover { transform: translateY(-4px); border-color: var(--gold-deep); box-shadow: 0 12px 32px oklch(0 0 0 / 0.3); }

/* glow media frame */
.frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--elev);
  box-shadow: 0 16px 48px oklch(0 0 0 / 0.3);
}
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05); }

/* placeholder shot inside frame */
.shot-bar { height: 38px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--bg-soft); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.shot-bar i:first-child { background: var(--gold-deep); }
.shot-body {
  display: flex; align-items: center; justify-content: center; position: relative; min-height: 220px;
  background: repeating-linear-gradient(135deg, var(--elev) 0 12px, var(--bg-soft) 12px 24px);
}
.shot-tag {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); border-radius: var(--pill); padding: 9px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .4s; }
.reveal[data-d="6"] { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none !important; }
  .tcarousel-track { transition: none; }
}


/* ----- 2) PAGE SECTIONS ----- */
/* ============================================================
   SolveR v2 — section styles
   ============================================================ */

/* ---------------- NAV (floating pill) ---------------- */
.nav { position: sticky; top: 0; z-index: 60; padding-top: 14px; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 66px; padding: 0 16px 0 26px;
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent); backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft); border-radius: var(--pill);
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled .nav-inner { background: color-mix(in srgb, var(--bg) 92%, transparent); border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.brand { display: flex; align-items: center; }
.brand .brand-logo { height: 48px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { font-family: var(--sans); font-weight: 500; font-size: var(--fs-base); color: var(--muted); transition: color 0.15s ease; border-radius: var(--r-xs); }
.nav-links a:hover { color: var(--text); }
.nav-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nav-links a { position: relative; }
.nav-links a[aria-current="page"], .nav-links a.active { color: var(--gold); }
.nav-links a[aria-current="page"]::after, .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--gold); border-radius: 2px; }
.mmenu a[aria-current="page"], .mmenu a.active { color: var(--gold); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: none; color: var(--text); width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border-radius: var(--r-xs); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nav-toggle span { width: 18px; height: 1.6px; background: currentColor; display: block; }
.mmenu { display: none; flex-direction: column; margin: 10px 12px 0; padding: 8px 18px 16px; background: var(--elev); border: 1px solid var(--line-soft); border-radius: var(--r); }
.mmenu.open { display: flex; }
.mmenu a { font-family: var(--sans); font-size: var(--fs-lg); color: var(--muted); padding: 14px 0; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.mmenu a:last-child { border-bottom: none; }

/* ---------------- HERO (centered) ---------------- */
.hero { padding-top: clamp(48px, 6vh, 72px); padding-bottom: clamp(28px, 4vh, 48px); text-align: center; overflow: clip visible; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { max-width: clamp(300px, 58vw, 780px); margin-inline: auto; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold); }
@media (min-width: 700px) { .hero h1 em { white-space: nowrap; } }
.hero .hero-sub { max-width: 64ch; margin: 20px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); text-wrap: balance; }

/* hero use-case selector */
.uc-chips { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.uc-chip { font-family: var(--sans); font-weight: 500; font-size: var(--fs-base); padding: var(--sp-3) var(--sp-5); border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.uc-chip:hover { border-color: var(--gold); color: var(--text); box-shadow: 0 0 0 1px var(--gold), 0 0 4px color-mix(in srgb, var(--gold) 4%, transparent); }
.uc-chip:active { transform: translateY(0); transition: none; }
.uc-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.uc-chip.is-active { background: transparent; border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 8px color-mix(in srgb, var(--gold) 8%, transparent); }
.uc-foot { text-align: center; font-size: var(--fs-md); color: var(--faint); margin-top: clamp(20px, 3vh, 32px); }
.uc-foot a { color: var(--gold); }
.hr-row .body b { color: var(--gold); font-weight: 600; }


/* hero glow orb behind.
   width is capped to the containing block: at 620px fixed it hung 115px past
   each edge of a 390px phone viewport and made the whole page pan sideways.
   Home hid this because .hero clips; the inner pages (.about-hero) don't. */
.hero-orb { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: min(620px, 100%); height: 420px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 4%, transparent), transparent 68%); filter: blur(8px); }

/* ---------------- FEATURE TRIO ---------------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio .ft { padding: 28px 34px 38px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.trio .ft .ic-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.trio .ft .ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trio .ft .ic svg { width: 21px; height: 21px; }
.trio .ft .ft-num {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
  background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-base); letter-spacing: 0.04em;
}
.trio .ft h3 { font-size: 21px; margin: 0; }
.trio .ft p { color: var(--muted); font-size: var(--fs-base); margin: 0; }
.trio .ft .illustration { width: 100%; display: flex; justify-content: center; margin-top: auto; padding-top: 8px; }
.trio .ft .illustration img { width: 100%; max-width: 280px; height: auto; border-radius: var(--r-sm); }
.trio .ft .illustration svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; overflow: visible; }

/* ---------------- TRUSTED BY MARQUEE ---------------- */
.trusted { padding-block: clamp(40px, 6vh, 70px); border-block: 1px solid var(--line-soft); }
.trusted .tlabel { text-align: center; margin-bottom: 30px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-word { font-family: var(--sans); font-weight: 600; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; transition: color .2s ease; opacity: .75; margin-right: clamp(40px, 6vw, 80px); }
.logo-word:hover { color: var(--gold); opacity: 1; }
.logo-item {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: 28px; margin-right: clamp(48px, 5vw, 64px);
  opacity: 0.6; transition: opacity 0.25s ease;
}
.logo-item:hover { opacity: 1; }
.logo-item svg { height: 100%; width: auto; display: block; }

/* ---------------- BIG ALTERNATING FEATURE ---------------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.feat.rev .feat-media { order: 2; }
.feat + .feat { margin-top: clamp(54px, 8vh, 110px); }
.feat-copy h2 { margin-top: 18px; }
.feat-copy p { color: var(--muted); margin: 20px 0 0; font-size: var(--fs-lg); max-width: 52ch; }
.feat-copy p .q { color: var(--text); }
.feat-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.feat-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: var(--fs-lg); color: var(--muted); }
.feat-list li svg { width: 20px; height: 20px; color: var(--gold); margin-top: 3px; }
.feat-list li b { color: var(--text); font-weight: 600; }

/* measured stat chips inside feature */
.measured { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.mchip { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 14px 20px; flex: 1; min-width: 150px; }
.mchip .mt { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.mchip .mv { font-family: var(--sans); font-weight: 700; font-size: 21px; margin-top: 6px; }
.mchip .mv .from { color: var(--faint); font-weight: 500; }
.mchip .mv .arr { color: var(--gold); }
.mchip .mv b { color: var(--gold); }
.mchip .mx { font-size: var(--fs-sm); color: var(--gold); font-weight: 600; margin-top: 2px; font-family: var(--sans); }

/* knowledge-match scene inside frame */
.km { padding: 26px; display: grid; gap: 12px; }
.km .qline { font-family: var(--sans); font-size: var(--fs-md); color: var(--muted); }
.km .match { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--gold-deep); border-radius: var(--r-sm); padding: 16px 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.km .match .big { font-family: var(--sans); font-weight: 700; font-size: 30px; color: var(--gold); line-height: 1; }
.km .match .big small { display: block; font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 5px; }
.km .match .txt { font-size: var(--fs-md); color: var(--text); }
.km .match .txt .sub { color: var(--faint); font-size: var(--fs-xs); }


/* ---------------- HOW IT WORKS (numbered steps) ---------------- */
.how-head { text-align: center; margin-bottom: clamp(52px, 8vh, 92px); }
.how-head h2 { margin-top: 18px; }
.how-head .lede { max-width: 52ch; margin: 18px auto 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stepc { display: flex; flex-direction: column; padding: clamp(30px, 3vw, 42px); }
.stepc-media { order: -1; margin-bottom: 24px; }
.stepc .num { font-family: var(--sans); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-on-gold); background: var(--gold); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.stepc h3 { font-size: clamp(20px, 2.1vw, 25px); margin-top: 18px; }
.stepc p { color: var(--muted); margin-top: 12px; font-size: var(--fs-base); }
.stepc-media .frame { width: 100%; }

/* ---------------- IMPACT ---------------- */
.band { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }
.impact-card { padding: 0; position: relative; }
.impact-card .eyebrow { margin-bottom: 14px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(36px, 5vh, 56px); }
.metric { border-left: 2px solid var(--gold); padding-left: 18px; }
.metric .mpre { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; display: block; }
.metric .mtop { font-family: var(--sans); font-weight: 700; font-size: clamp(32px, 4vw, 50px); letter-spacing: -0.03em; line-height: 1; color: var(--gold); }
.metric .mhook { color: var(--text); font-weight: 600; font-size: var(--fs-base); margin-top: 12px; display: block; }
.metric .mlbl { color: var(--muted); font-size: var(--fs-md); margin-top: 4px; }

/* ---------------- TESTIMONIALS (carousel) ---------------- */
.proof-head { text-align: center; margin-bottom: clamp(28px, 4vh, 40px); }
.proof-head h2 { margin-top: 14px; }
.tcarousel { position: relative; overflow: hidden; }
.tcarousel-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.tcarousel-track .tcard {
  flex: 0 0 calc((100% - 32px) / 3);
  margin-right: 16px;
}
.tcarousel-track .tcard:last-child { margin-right: 0; }
.tcarousel-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 28px;
}
.tcarousel-arrow {
  width: 40px; height: 40px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tcarousel-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.tcarousel-arrow:active:not(:disabled) { transform: scale(0.95); transition: none; }
.tcarousel-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tcarousel-arrow:disabled { opacity: 0.3; cursor: default; }
.tcarousel-arrow svg { width: 18px; height: 18px; }
.tcarousel-dots { display: flex; gap: 8px; }
.tcarousel-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: var(--line); cursor: pointer; padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tcarousel-dot.is-active { background: var(--gold); transform: scale(1.25); }
.tcard { padding: 28px 24px; display: flex; flex-direction: column; height: 100%; }
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 16px; height: 16px; color: var(--gold); }
.tcard blockquote { margin: 0; font-size: var(--fs-md); color: var(--text); line-height: 1.55; flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.tcard .who .pfp { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 6%, transparent); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--gold); flex: none; }
.tcard .who .pfp svg { width: 18px; height: 18px; }
.tcard .who .nm { font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm); }
.tcard .who .co { font-size: var(--fs-xs); color: var(--faint); margin-top: 1px; }
.tx-note { text-align: center; font-size: var(--fs-xs); color: var(--faint); margin-top: 24px; }

/* ---------------- COMPLIANCE ---------------- */
.comp-card { padding: clamp(38px, 5vw, 60px); }
.comp-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.comp-head h3 { font-size: clamp(20px, 2.2vw, 26px); }
.comp-head p { color: var(--muted); margin: 6px 0 0; font-size: var(--fs-base); }
.comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.comp { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 18px 18px; }
.comp svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.comp .ct { font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }

/* ---------------- FOOTER ---------------- */
footer.foot { border-top: 1px solid var(--line-soft); padding-block: clamp(64px, 9vh, 100px); margin-top: clamp(56px, 8vh, 100px); }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }
.foot-brand { display: flex; align-items: center; }
.foot-brand .brand-logo { height: 40px; width: auto; display: block; }
.foot-tag { color: var(--muted); margin: 18px 0 0; max-width: 40ch; font-size: var(--fs-md); line-height: 1.6; }
.foot-mail { display: inline-block; color: var(--muted); font-size: var(--fs-md); margin-top: 14px; transition: color 0.15s ease; border-radius: var(--r-xs); }
.foot-mail:hover { color: var(--gold); }
.foot-mail:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.foot-h { font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.foot-col a { display: block; color: var(--muted); font-size: var(--fs-md); padding: 8px 0; transition: color 0.15s ease; border-radius: var(--r-xs); }
.foot-col a:hover { color: var(--gold); }
.foot-col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(34px, 4.5vh, 52px); padding-top: 24px; border-top: 1px solid var(--line-soft); font-family: var(--sans); font-size: var(--fs-sm); color: var(--faint); }
.foot-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-legal a { color: var(--faint); transition: color 0.15s ease; border-radius: var(--r-xs); }
.foot-legal a:hover { color: var(--gold); }
.foot-legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------- IN-ACTION SECTION (cinema demo) ---------------- */
#in-action .wrap { text-align: center; }
.inaction-head { max-width: 1060px; margin: 0 auto clamp(28px, 4vh, 40px); text-align: center; }
.inaction-head h2 { margin-top: 16px; }
.inaction-head .lede { margin: 18px auto 0; }

/* ---------------- PROBLEM (stat row) ---------------- */
#problem.section-pad { padding-block: clamp(40px, 6vh, 72px) clamp(56px, 8vh, 90px); }
.problem-head { max-width: 760px; margin: 0 auto; text-align: center; }
/* thread connector: continues the hero core's neural line down into the section,
   docking at the eyebrow's gold dot */
.problem-head::before {
  content: ""; display: block; width: 1px; height: clamp(56px, 9vh, 90px);
  margin: 0 auto 18px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 65%, transparent));
}
.problem-head h2 { margin-top: 16px; }
.problem-head .lede { margin: 18px auto 0; }
.prob-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(36px, 5vh, 56px); }
.prob-stat { padding: 38px 32px; border-top: 2px solid var(--gold); }
.prob-stat .pv { font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4vw, 46px); color: var(--gold); line-height: 1; }
.prob-stat .pv span { font-size: 0.58em; }
.prob-stat .pd { color: var(--muted); font-size: var(--fs-base); margin-top: 14px; }
.prob-stat cite { display: block; font-family: var(--sans); font-style: normal; font-size: var(--fs-2xs); letter-spacing: 0.06em; color: var(--faint); margin-top: 12px; }

/* ---------------- BEFORE / AFTER COMPARISON ---------------- */
.problem-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
  margin-top: clamp(32px, 4vh, 44px);
}

.comparison-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: border-color 0.3s ease;
}

.comparison-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comparison-label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.comparison-side.before {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 6%, transparent), transparent 60%);
}
.comparison-side.before .comparison-label { color: var(--muted); }

.comparison-side.after {
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%);
}
.comparison-side.after .comparison-label { color: var(--gold); }

.comparison-visual { display: flex; }
.comparison-visual svg { display: block; width: 100%; height: auto; }

/* ---- SolveR orb heartbeat (shared by #problem and #how artwork) ---- */
.orb-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; animation: orbPulse 3.4s ease-out infinite; }
.orb-core { transform-box: fill-box; transform-origin: center; animation: coreBeat 3.4s ease-in-out infinite; }
@keyframes orbPulse { 0% { transform: scale(0.5); opacity: 0.5; } 55% { opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes coreBeat { 0%, 26%, 100% { transform: scale(1); } 10% { transform: scale(1.13); } 18% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .orb-pulse, .orb-core { animation: none; }
}

/* ---- inline-SVG text (chips and labels) ---- */
.svg-chip-t { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; fill: var(--muted); }
.svg-chip-gold-t { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; fill: var(--gold-bright); }
.svg-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; fill: var(--gold); }

/* Comparison copy */
.comparison-copy { display: flex; flex-direction: column; gap: 14px; }
.comparison-summary { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--text); margin: 0; }

.pain-list, .benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pain-list li, .benefit-list li {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--muted);
  display: flex;
  gap: 12px;
}
.pain-list li::before,
.benefit-list li::before {
  font-weight: 600;
  flex: 0 0 16px;
  text-align: center;
}
.pain-list li::before { content: "\2717"; color: var(--faint); }
.benefit-list li::before { content: "\2713"; color: var(--gold); }

/* Mobile toggle buttons (hidden on desktop) */
.comparison-mobile-toggle {
  display: none;
  gap: 0;
  border-radius: var(--pill);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}
.cmt-btn {
  flex: 1;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-md);
  padding: 12px 20px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.cmt-btn:hover:not(.is-active) { color: var(--text); }
.cmt-btn:active { transition: none; }
.cmt-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cmt-btn.is-active { background: var(--gold); color: var(--ink-on-gold); }

/* Mobile: stack + toggle */
@media (max-width: 768px) {
  .problem-comparison {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
  }
  .comparison-mobile-toggle {
    display: flex;
    order: -1;
    margin-bottom: 20px;
  }
  /* hide/show sides based on data attribute */
  .problem-comparison[data-view="after"] .comparison-side.before { display: none; }
  .problem-comparison[data-view="after"] .comparison-side.after { display: flex; }
  .problem-comparison:not([data-view="after"]) .comparison-side.after { display: none; }
  .problem-comparison:not([data-view="after"]) .comparison-side.before { display: flex; }
}

/* ---------------- ENTERPRISE (condensed) ---------------- */
.ent-lite { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.ent-lite-copy h2 { margin-top: 14px; font-size: clamp(20px, 2.5vw, 30px); white-space: nowrap; }
.ent-lite-copy p { color: var(--muted); margin: 14px 0 26px; max-width: 46ch; }
.ent-lite-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ent-chip { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); color: var(--text); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--pill); padding: var(--sp-3) var(--sp-4); }
.ent-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------------- ENTERPRISE COMPACT (footer-adjacent strip) ---------------- */

/* ---------------- STEP NUMBERS (How SolveR Works) ---------------- */
.step-num { font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--gold); }
.measured-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mi-chip { font-size: var(--fs-xs); color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--r-xs); padding: var(--sp-2) var(--sp-3); }
.mi-chip b { color: var(--text); font-weight: 600; }
.mi-chip em { font-style: normal; color: var(--gold); font-weight: 600; }

/* ---------------- KNOWLEDGE BASE SECTION (Phase 4) ---------------- */
.kb-section { text-align: center; max-width: 1100px; margin-inline: auto; }
.kb-section .eyebrow { margin-bottom: 16px; }
.kb-section .lede { max-width: 52ch; margin-inline: auto; color: var(--muted); font-size: var(--fs-xl); margin-top: 18px; }
.kb-flow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(36px, 5vh, 56px); flex-wrap: wrap; }
.kb-step { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 22px 26px; flex: 1; min-width: 220px; max-width: 340px; text-align: left; }
.kb-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none; }
.kb-icon svg { width: 20px; height: 20px; }
.kb-text { display: flex; flex-direction: column; gap: 2px; }
.kb-text strong { font-size: var(--fs-md); color: var(--text); font-weight: 600; }
.kb-text span { font-size: var(--fs-sm); color: var(--muted); }
.kb-connector { font-size: 20px; color: var(--gold); font-weight: 700; }

@media (max-width: 768px) {
  .kb-flow { flex-direction: column; }
  .kb-connector { transform: rotate(90deg); }
  .kb-step { max-width: 100%; }
}

/* ---------------- DISCOVERY CTA TRUST (Phase 4) ---------------- */
.cta-trust { color: var(--muted); margin-top: 16px; font-size: var(--fs-lg); max-width: 46ch; }

/* ---------------- HERO CTA + STATS STRIP ---------------- */
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero-stats {
  display: flex; gap: clamp(28px, 5vw, 56px); justify-content: center; flex-wrap: wrap;
  margin-top: clamp(24px, 4vh, 40px); padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.hero-stats .metric { text-align: left; max-width: 260px; }
.hero-trust {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 20px;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft); max-width: 720px; margin-inline: auto;
}
.ht-logos { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 600; font-size: var(--fs-base); color: var(--muted); }
.ht-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); display: inline-block; }
.ht-bar { width: 1px; height: 18px; background: var(--line); }
.ht-proof { font-family: var(--sans); font-size: var(--fs-md); color: var(--muted); }
.ht-proof b { font-family: var(--sans); font-weight: 700; color: var(--gold); }

.ent-link { font-family: var(--sans); font-weight: 600; font-size: var(--fs-md); color: var(--gold); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding-top: 6px; border-radius: var(--r-xs); }
.ent-link:hover { color: var(--gold-bright); }
.ent-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ent-link .arr { transition: transform .2s ease; }
.ent-link:hover .arr { transform: translateX(4px); }
.ent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(30px, 4vh, 44px); }
.ent-col { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 32px 30px; }
.ent-ic { width: 42px; height: 42px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ent-ic svg { width: 22px; height: 22px; }
.ent-col h4 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-xl); }
.ent-col ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ent-col li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: var(--fs-md); color: var(--muted); }
.ent-col li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 7px; }
.ent-standards { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.ent-std-label { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.ent-std { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); color: var(--text); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--pill); padding: var(--sp-2) var(--sp-4); }
.ent-std svg { width: 17px; height: 17px; color: var(--gold); }



/* ---------------- TEAM (about page + landing teaser) ---------------- */
.about-hero { padding-top: clamp(40px, 7vh, 86px); text-align: center; }
.about-hero h1 { max-width: 16ch; margin-inline: auto; }
.about-hero .lede { max-width: 60ch; margin: 22px auto 0; }

.team-section + .team-section { margin-top: clamp(48px, 7vh, 92px); }
.team-section-head { text-align: center; margin-bottom: clamp(28px, 4vh, 48px); }
.team-section-head h2 { margin-top: 14px; }
.team-section-head p { color: var(--muted); margin: 14px auto 0; max-width: 52ch; }

.team-grid { display: grid; gap: 18px; }
.team-grid.lead { grid-template-columns: 1fr 1fr; max-width: 880px; margin-inline: auto; }
/* members/advisors are wrapping flex rows (not grid) so an incomplete last row
   centers instead of left-hanging; flex lines still stretch cards equal-height */
.team-grid.members { display: flex; flex-wrap: wrap; justify-content: center; }
.team-grid.members > .team-card { flex: 0 1 calc((100% - 2 * 18px) / 3); min-width: 0; }

.team-card { padding: 46px 38px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.team-photo { width: 144px; height: 144px; border-radius: 50%; border: 3px solid var(--gold); padding: 6px; box-sizing: border-box; flex: none; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Re-crop wrapper: the img is its own circular clip, so scaling it directly would overflow the 6px gap inside the gold ring */
/* photo-zoom: source is framed tighter than the other team photos, so shrink it
   onto a white field (matches its pure-white backdrop) to give matching headroom */
.team-photo .photo-zoom { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fff; }
.team-photo .photo-zoom img { transform: scale(0.86) translate(-4%, 4%); }
.team-photo.ph { display: flex; align-items: center; justify-content: center; border-style: dashed; border-color: var(--line); color: var(--faint); }
.team-photo.ph svg { width: 52px; height: 52px; }
.team-name { font-family: var(--sans); font-weight: 700; font-size: 23px; margin-top: 22px; }
.team-role { font-family: var(--sans); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-xs); color: var(--gold); margin-top: 9px; }
.team-bio { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin: 16px 0 0; max-width: 40ch; }
/* margin-top:auto pins the links row to the card bottom — grid rows stretch equal-height,
   so LinkedIn sits on the same baseline in every card regardless of bio length */
.team-links { margin-top: auto; padding-top: 18px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.team-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 600; font-size: var(--fs-md); color: var(--gold); }
.team-link:hover { color: var(--gold-bright); }
.team-link svg { width: 16px; height: 16px; }
.team-link.muted { color: var(--muted); }
.team-link.muted:hover { color: var(--gold); }
.team-card.placeholder { border-style: dashed; }
.team-card.placeholder .team-name { color: var(--muted); }
.team-join { text-align: center; margin-top: clamp(40px, 6vh, 72px); }
.team-bio.placeholder-copy { color: var(--faint); font-style: italic; }

/* About — founder video placeholder (skeleton frame until the video is recorded) */
.videoph { max-width: 880px; margin-inline: auto; padding: 0; overflow: hidden; }
.videoph-frame { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 10%, var(--glow-soft), transparent 60%), var(--bg); border-bottom: 1px solid var(--line-soft); }
.videoph-play { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--gold-deep); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); display: flex; align-items: center; justify-content: center; cursor: default; }
.videoph-play svg { width: 34px; height: 34px; margin-left: 4px; }
.videoph-badge { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* About — origin story, founder quote, values */
.origin-text { max-width: 74ch; margin: 0 auto; color: var(--muted); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.75; text-align: center; }
.founder-quote { max-width: 820px; margin: clamp(28px, 4vh, 44px) auto 0; padding: 34px 38px; border-left: 2px solid var(--gold-deep); }
.founder-quote blockquote { margin: 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: var(--text); }
.founder-quote figcaption { margin-top: 16px; font-family: var(--sans); font-size: var(--fs-sm); color: var(--faint); line-height: 1.6; }
.founder-quote figcaption b { color: var(--gold); font-weight: 600; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(32px, 5vh, 56px); }
.value-card { padding: 26px 24px; }
.value-name { font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--gold); }
.value-card p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin: 10px 0 0; }

/* About — advisors & supporters */
.team-grid.advisors { display: flex; flex-wrap: wrap; justify-content: center; }
.team-grid.advisors > .team-card { flex: 0 1 calc((100% - 3 * 18px) / 4); min-width: 0; }
.team-card.advisor { padding: 34px 22px; }
.team-card.advisor .team-photo { width: 100px; height: 100px; }
.team-card.advisor .team-photo.ph svg { width: 40px; height: 40px; }
.team-card.advisor .team-name { font-size: 19px; margin-top: 16px; }
.partner-card { display: flex; align-items: center; gap: 26px; max-width: 820px; margin: clamp(28px, 4vh, 44px) auto 0; padding: 28px 32px; }
/* white chip: the Kovačnica lockup is black-on-white and needs a light surface on our dark theme */
.partner-logo { flex: none; background: #fff; border-radius: var(--r-sm); padding: 10px 16px; display: flex; align-items: center; }
.partner-logo img { display: block; width: 168px; height: auto; }
.partner-name { font-family: var(--sans); font-weight: 700; font-size: 18px; }
.partner-name a { color: var(--text); }
.partner-name a:hover { color: var(--gold); }
.partner-body p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin: 8px 0 0; }

/* landing About teaser */
.about-teaser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.about-teaser-head h2 { margin-top: 14px; }
.about-teaser-head p { color: var(--muted); margin: 12px 0 0; max-width: 46ch; }

/* ---------------- CONTACT PAGE ---------------- */
.contact-page { text-align: center; }
.contact-page .contact-lede { max-width: 52ch; margin: 18px auto 0; color: var(--muted); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; }
.contact-cta { margin: clamp(36px, 5vh, 56px) auto 0; }
.contact-cta .btn { font-size: var(--fs-lg); }
.contact-email { margin-top: 14px; font-size: var(--fs-base); color: var(--muted); }
.contact-info { margin-top: clamp(40px, 6vh, 64px); font-size: var(--fs-md); color: var(--muted); line-height: 1.7; }
.contact-info a { color: var(--gold); }

/* ---------------- RESOURCES / DOWNLOADS ---------------- */
.res-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.res-tag { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--pill); padding: 5px 11px; }
.res-tag.gold { color: var(--ink-on-gold); background: var(--gold); border-color: var(--gold); }
.res-meta { font-family: var(--sans); font-size: var(--fs-xs); color: var(--faint); }
.res-note { text-align: center; font-size: var(--fs-sm); color: var(--faint); margin: clamp(34px, 5vh, 56px) 0 0; }
.res-note + .res-note { margin-top: 12px; }
.res-note a { color: var(--gold); }

/* featured single download */
.res-featured {
  display: grid; grid-template-columns: minmax(0, 0.85fr) 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; max-width: 900px; margin-inline: auto; padding: clamp(28px, 4vw, 48px);
}
.res-spread {
  position: relative; display: block; justify-self: center;
  width: min(320px, 100%); aspect-ratio: 4 / 3;
}
.res-page {
  position: absolute; top: 50%; width: 62%; height: auto; border-radius: 8px;
  border: 1px solid var(--line); box-shadow: 0 16px 38px oklch(0 0 0 / 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.res-page-2 { left: 44%; transform: translateY(-50%) rotate(5deg); z-index: 1; }
.res-page-1 { left: 0;   transform: translateY(-50%) rotate(-3deg); z-index: 2; }
.res-spread:hover .res-page-2 { transform: translateY(-50%) rotate(9deg) translateX(10%); }
.res-spread:hover .res-page-1 { transform: translateY(-50%) rotate(-5deg) translateX(-6%); box-shadow: 0 22px 46px oklch(0 0 0 / 0.55); }
.res-spread:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 10px; }
.res-featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.res-featured-title { font-size: var(--fs-2xl); color: var(--text); margin: 0; }
.res-featured-desc { color: var(--muted); margin: 0; max-width: 46ch; }
.res-featured-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; }
.res-featured-dl svg { width: 18px; height: 18px; }
.res-featured .res-meta { font-size: var(--fs-sm); color: var(--faint); font-family: var(--sans); }

@media (max-width: 760px) {
  .res-featured { grid-template-columns: 1fr; text-align: center; padding-top: clamp(36px, 6vw, 48px); }
  .res-spread { aspect-ratio: 3 / 2; width: min(280px, 82%); }
  .res-featured-body { align-items: center; }
  .res-featured-desc { max-width: none; }
  .res-featured-foot { align-items: center; }
}


/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 940px) {
  .trio { grid-template-columns: 1fr; }
  .feat, .feat.rev { grid-template-columns: 1fr; }
  .feat.rev .feat-media { order: 0; }
  .feat-media { order: -1; }
  .steps { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .tcarousel-track .tcard { flex: 0 0 100%; margin-right: 0; }
  .comp-grid { grid-template-columns: 1fr 1fr; }
  .nav-links, .lang-switch { display: none; }
  .nav-toggle { display: flex; }
  /* rebalance the pill: calmer CTA, more present logo */
  .nav .btn.sm { padding: 10px 18px; font-size: var(--fs-sm); min-height: 40px; }
  .brand .brand-logo { height: 54px; }
  .ent-grid { grid-template-columns: 1fr; }
  .team-grid.members > .team-card, .team-grid.advisors > .team-card { flex-basis: calc((100% - 18px) / 2); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .ent-lite { grid-template-columns: 1fr; }
  .ent-lite-copy h2 { font-size: clamp(24px, 3vw, 36px); white-space: normal; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brandcol { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .metrics { grid-template-columns: 1fr; }
  /* stack hero stats with one shared left edge so the gold bars align */
  .hero-stats { flex-direction: column; align-items: center; gap: 22px; }
  .hero-stats .metric { width: min(100%, 300px); max-width: none; }
  /* longest eyebrow on the site — let it wrap + keep side padding on mobile */
  .trusted .tlabel { padding-inline: 24px; }
  .trusted .eyebrow { white-space: normal; text-align: center; align-items: flex-start; }
  .trusted .eyebrow::before { margin-top: 0.35em; }
}
@media (max-width: 480px) {
  .h-xl { font-size: clamp(32px, 9.5vw, 40px); }
  .hero .hero-sub { font-size: 16px; }
}
@media (max-width: 560px) {
  .comp-grid { grid-template-columns: 1fr; }
  .measured { flex-direction: column; }
  .hero-trust { gap: 10px 14px; }
  .ht-bar { display: none; }
  .team-grid.lead { grid-template-columns: 1fr; }
  .team-grid.lead, .team-grid.members, .team-grid.advisors { max-width: 360px; margin-inline: auto; }
  .team-grid.members > .team-card, .team-grid.advisors > .team-card { flex-basis: 100%; }
  .values-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .partner-card { flex-direction: column; text-align: center; }
  .prob-stats { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
}


/* ----- 3) DEMO SECTION SHARED TOKENS ----- */
/* survivor of the retired v3 vignette: the hero headline accent */
.v3hero h1 em { color: var(--gold); font-style: normal; }
@media (max-width: 760px) {
  .uc-chips { gap: 10px; }
  .uc-chip { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md); min-height: 44px; }
}

/* ----- 3b) SOLVER DEMO PLAYER (index only) -----
   30s chapter-navigable story player (#in-action). One shell holds the
   industry tabs + the player; each industry's story is text-swapped in
   from SD_STORIES (main.js) via [data-fill]. All state is driven by data
   attributes: data-mode on .sd-player (idle|playing|paused|done|static),
   data-chapter on .sd-stage, and .on toggled per [data-cue] element.
   Motion: transform/opacity (+ stroke-dashoffset for SVG draws) only. */

.sd-shell { max-width: 940px; margin: clamp(28px, 4vh, 44px) auto 0; }
.sd-tabs { margin-bottom: 16px; }

.sd-player {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.3);
  overflow: hidden;
}
.sd-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-soft); background: var(--bg-soft); }
.sd-title { font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-phase { font-family: var(--sans); font-weight: 600; font-size: var(--fs-xs); color: var(--gold); margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.sd-phase::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 4px color-mix(in srgb, var(--gold) 15%, transparent); }
.sd-player[data-mode="playing"] .sd-phase::before { animation: sdBlink 1.4s ease-in-out infinite; }
@keyframes sdBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---- stage + scene panels (crossfade by chapter) ---- */
.sd-stage { position: relative; height: clamp(400px, 46vw, 460px); overflow: hidden; }
.sd-scene {
  position: absolute; inset: 0; padding: var(--sp-4) var(--sp-5);
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
}
.sd-scene.past { transform: translateX(-28px); }
.sd-stage[data-chapter="1"] .sd-sc1, .sd-stage[data-chapter="2"] .sd-sc2,
.sd-stage[data-chapter="3"] .sd-sc3, .sd-stage[data-chapter="4"] .sd-sc4,
.sd-stage[data-chapter="5"] .sd-sc5 { opacity: 1; transform: none; }
/* seeks apply state instantly; transitions resume for subsequent cues */
.sd-stage.sd-seek, .sd-stage.sd-seek * { transition: none !important; }

/* ---- chapter 1 · inbox ---- */
.sd-inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: 38% 1fr; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.sd-maillist { border-right: 1px solid var(--line-soft); background: var(--bg-soft); overflow: hidden; }
.sd-mailhead { font-family: var(--sans); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.sd-mail { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); font-family: var(--sans); }
.sd-mail b { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.sd-mail span { display: block; font-size: var(--fs-2xs); color: var(--faint); margin-top: 2px; line-height: 1.35; }
.sd-mailnew { position: relative; background: color-mix(in srgb, var(--gold) 7%, transparent); opacity: 0; transform: translateY(-10px); transition: opacity .45s ease, transform .45s ease; }
.sd-mailnew b { color: var(--text); font-weight: 700; }
.sd-mailnew span { color: var(--muted); }
.sd-mailnew.on { opacity: 1; transform: none; }
.sd-mailflag { position: absolute; top: 9px; right: 10px; width: 15px; height: 15px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); font-style: normal; font-weight: 800; font-size: var(--fs-2xs); display: flex; align-items: center; justify-content: center; }
.sd-mailpane { padding: var(--sp-3) var(--sp-4); font-family: var(--sans); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; overflow: hidden; }
.sd-mailpane.on { opacity: 1; transform: none; }
.sd-mailsubject { font-weight: 700; font-size: var(--fs-sm); color: var(--text); line-height: 1.35; }
.sd-mailmeta { font-size: var(--fs-2xs); color: var(--faint); margin-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.sd-mailbody { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; margin: 10px 0 12px; }
.sd-mailbody b { color: var(--text); }
.sd-attach { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sd-att { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-2); background: var(--elev); opacity: 0; transform: scale(.92); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.sd-att.on { opacity: 1; transform: none; }
.sd-ft { font-style: normal; font-weight: 800; font-size: var(--fs-2xs); letter-spacing: .05em; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-1); }
.sd-toast {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; max-width: 250px;
  background: var(--elev); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); font-family: var(--sans); box-shadow: 0 10px 26px oklch(0 0 0 / 0.4);
  opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.sd-toast.on { opacity: 1; transform: none; }
.sd-toast b { display: block; font-size: var(--fs-xs); color: var(--gold); }
.sd-toast span { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-top: 3px; }
.sd-toastbtn { display: inline-block; font-style: normal; font-weight: 700; font-size: var(--fs-2xs); color: var(--text); margin-top: 8px; opacity: 0; transition: opacity .35s ease; }
.sd-toastbtn.on { opacity: 1; animation: sdGlow 1.1s ease-in-out 2; }
@keyframes sdGlow { 50% { text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 80%, transparent); color: var(--gold); } }
/* idle = living poster: chapter-1 fully visible behind the scrim, email pulses */
.sd-player[data-mode="idle"] .sd-sc1 [data-cue] { opacity: 1; transform: none; }
.sd-player[data-mode="idle"] .sd-mailnew { animation: sdPulse 2.6s ease-in-out infinite; }
@keyframes sdPulse { 50% { background: color-mix(in srgb, var(--gold) 16%, transparent); } }

/* ---- chapter 2 · case view ---- */
.sd-case { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; }
.sd-casecol { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; }
/* fill the stage height: description cards stretch, 5W2H rows share the rest */
.sd-ccard { flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--elev); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--sans); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.sd-ccard.on { opacity: 1; transform: none; }
.sd-ccard h4, .sd-5w2h h4 { font-family: var(--sans); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.sd-5w2h h4[data-cue] { opacity: 0; transition: opacity .4s ease; }
.sd-5w2h h4[data-cue].on { opacity: 1; }
.sd-ccard p { font-size: var(--fs-2xs); color: var(--text); line-height: 1.4; margin: 0; }
.sd-src { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: 6px; }
.sd-src em, .sd-srcchip { font-style: normal; font-size: var(--fs-2xs); font-weight: 600; color: var(--faint); border: 1px solid var(--line-soft); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-2); white-space: nowrap; }
.sd-wgrid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--sp-2); }
.sd-w { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line-soft); background: var(--card); border-radius: var(--r-xs); padding: var(--sp-2) var(--sp-3); font-family: var(--sans); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.sd-w.on { opacity: 1; transform: none; }
.sd-w b { display: block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sd-w span { display: block; font-size: var(--fs-2xs); color: var(--text); margin-top: 1px; line-height: 1.3; }
.sd-isnot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: 8px; }
.sd-is, .sd-not { border-radius: var(--r-xs); padding: var(--sp-2) var(--sp-3); font-family: var(--sans); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.sd-is.on, .sd-not.on { opacity: 1; transform: none; }
.sd-is { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.sd-not { border: 1px solid var(--line); background: var(--bg-soft); }
.sd-is b, .sd-not b { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; }
.sd-is b { color: var(--gold); }
.sd-not b { color: var(--faint); }
.sd-is span, .sd-not span { display: block; font-size: var(--fs-2xs); color: var(--text); margin-top: 2px; line-height: 1.35; }
.sd-not span { color: var(--muted); }
.sd-counter { margin-top: 10px; text-align: center; font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.sd-counter.on { opacity: 1; transform: none; }

/* ---- chapter 3 · ishikawa + 5 whys + root cause ---- */
.sd-c3wrap { position: relative; flex: 1; min-height: 0; }
.sd-fish { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(74%, 520px); transition: left .6s cubic-bezier(.2,.7,.2,1), top .6s ease, width .6s ease; }
.sd-c3wrap.on .sd-fish { left: 25%; top: 36%; width: 46%; }
.sd-fish svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.fb-spine, .fb-line { stroke: var(--muted); fill: none; stroke-linecap: round; }
.fb-spine { stroke-width: 2.2; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset .9s ease .05s; }
.fb-line { stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s ease; }
.sd-fish.on .fb-spine { stroke-dashoffset: 0; }
.sd-fish.on .fb-line { stroke-dashoffset: 0; }
.sd-fish.on .fb-man .fb-line { transition-delay: .5s; }
.sd-fish.on .fb-machine .fb-line { transition-delay: .6s; }
.sd-fish.on .fb-method .fb-line { transition-delay: .7s; }
.sd-fish.on .fb-material .fb-line { transition-delay: .8s; }
.sd-fish.on .fb-meas .fb-line { transition-delay: .9s; }
.sd-fish.on .fb-env .fb-line { transition-delay: 1s; }
.fb-headbox { fill: var(--card-2); stroke: var(--muted); stroke-width: 1.4; }
.fb-headtx { font-size: 10.5px; font-weight: 700; fill: var(--text); }
.fb-label { font-size: 10px; font-weight: 700; fill: var(--muted); opacity: 0; transition: opacity .5s ease .9s; }
.sd-fish.on .fb-label { opacity: 1; }
.fb-cause { font-size: 8.5px; fill: var(--faint); opacity: 0; transition: opacity .4s ease, fill .4s ease; }
.sd-fishtags.on .fb-man .fb-cause { opacity: 1; transition-delay: .05s; }
.sd-fishtags.on .fb-machine .fb-cause { opacity: 1; transition-delay: .25s; }
.sd-fishtags.on .fb-method .fb-cause { opacity: 1; transition-delay: .45s; }
.sd-fishtags.on .fb-material .fb-cause { opacity: 1; transition-delay: .65s; }
.sd-fishtags.on .fb-meas .fb-cause { opacity: 1; transition-delay: .85s; }
.sd-fishtags.on .fb-env .fb-cause { opacity: 1; transition-delay: 1.05s; }
/* the hot branch is stamped .is-hot by main.js per story (videos 1+2: Machine) */
.fb-b { transition: opacity .5s ease; }
.sd-fishhot.on .fb-b:not(.is-hot) { opacity: .28; }
.sd-fishhot.on .is-hot .fb-line { stroke: var(--gold); stroke-width: 2; }
.sd-fishhot.on .is-hot .fb-cause { fill: var(--gold); font-weight: 800; }
.sd-fishhot.on .is-hot .fb-label { fill: var(--gold); }
.sd-whys { position: absolute; right: 0; top: 0; width: 51%; opacity: 0; transform: translateX(22px); transition: opacity .5s ease .15s, transform .5s cubic-bezier(.2,.7,.2,1) .15s; }
.sd-c3wrap.on .sd-whys { opacity: 1; transform: none; }
.sd-whyhead { font-family: var(--sans); font-weight: 700; font-size: var(--fs-2xs); color: var(--gold); margin-bottom: 7px; }
.sd-why { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line-soft); background: var(--elev); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: 5px; font-family: var(--sans); opacity: 0; transform: translateY(9px); transition: opacity .4s ease, transform .4s ease; }
.sd-why.on { opacity: 1; transform: none; }
.sd-why i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-style: normal; font-weight: 700; font-size: var(--fs-2xs); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sd-why span { flex: 1; font-size: var(--fs-2xs); color: var(--faint); line-height: 1.4; }
.sd-why span b { color: var(--text); font-size: var(--fs-2xs); font-weight: 600; }
.sd-ai { flex: none; font-style: normal; font-weight: 800; font-size: var(--fs-2xs); letter-spacing: .06em; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-2); margin-top: 1px; }
.sd-rootcause {
  position: absolute; left: 3%; right: 3%; bottom: 2%; z-index: 2;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--gold); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.45), 0 0 18px color-mix(in srgb, var(--gold) 12%, transparent);
  font-family: var(--sans); opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.sd-rootcause.on { opacity: 1; transform: none; }
.sd-rootcause b { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sd-rootcause p { margin: 4px 0 3px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.35; }
.sd-rootcause p span { font-weight: 600; color: var(--muted); font-size: var(--fs-xs); }
.sd-rootcause i { font-style: normal; font-size: var(--fs-2xs); color: var(--muted); }

/* ---- chapter 4 · actions + KB match ---- */
.sd-sc4 { justify-content: center; }
.sd-c4grid { flex: 0 0 auto; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-3); align-items: center; }
.sd-rcdock { border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: var(--r-sm); padding: 8px 12px; font-family: var(--sans); opacity: 0; transform: translateY(-8px); transition: opacity .45s ease, transform .45s ease; }
.sd-rcdock.on { opacity: 1; transform: none; }
.sd-rcdock b { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sd-rcdock span { display: block; font-size: var(--fs-2xs); color: var(--text); margin-top: 2px; }
.sd-lanehead { font-family: var(--sans); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 12px 0 7px; opacity: 0; transition: opacity .4s ease; }
.sd-lanehead.on { opacity: 1; }
.sd-action { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; border: 1px solid var(--line); background: var(--elev); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: 8px; font-family: var(--sans); opacity: 0; transform: translateX(-16px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.sd-action.on { opacity: 1; transform: none; }
.sd-action > span { flex: 1; min-width: 180px; font-size: var(--fs-2xs); color: var(--text); line-height: 1.4; }
.sd-tag { flex: none; font-style: normal; font-weight: 800; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-2); }
.sd-tag.t-cont { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.sd-tag.t-corr { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.sd-tag.t-prev { color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 14%, transparent); }
.sd-done, .sd-verified { flex: none; font-style: normal; font-weight: 700; font-size: var(--fs-2xs); color: var(--gold); opacity: 0; transform: scale(.85); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.sd-done.on, .sd-verified.on { opacity: 1; transform: none; }
.sd-kbmatch {
  align-self: center; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-family: var(--sans);
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 10%, transparent);
  opacity: 0; transform: translateX(26px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.sd-kbmatch.on { opacity: 1; transform: none; }
.sd-kbbadge { display: inline-block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .04em; color: var(--ink-on-gold); background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: var(--pill); padding: 4px 9px; }
.sd-kbmatch p { margin: 9px 0 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.sd-kbmatch span { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.sd-kbmatch i { display: block; font-style: normal; font-weight: 600; font-size: var(--fs-2xs); color: var(--gold); margin-top: 7px; }

/* ---- chapter 5 · lessons + KB + traceability ---- */
/* content up top so the held final frame leaves room for the end overlay below */
.sd-sc5 { justify-content: center; gap: var(--sp-4); }
.sd-lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.sd-lesson { border: 1px solid var(--line); background: var(--elev); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--sans); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.sd-lesson.on { opacity: 1; transform: none; }
.sd-lesson b { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.sd-lesson.is-neg b { color: var(--muted); }
.sd-lesson span { display: block; font-size: var(--fs-2xs); color: var(--text); margin-top: 3px; line-height: 1.4; }
/* 1fr|auto|1fr grid keeps the vault dead-center; the flycard (invisible after its
   fly-in) sits in the left track so it never pushes the vault off center */
.sd-kbrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-4); opacity: 0; transition: opacity .45s ease; }
.sd-kbrow .sd-flycard { grid-column: 1; justify-self: end; }
.sd-kbrow .sd-vault { grid-column: 2; }
.sd-kbrow.on { opacity: 1; }
.sd-flycard { border: 1px solid var(--gold); border-radius: var(--r-xs); padding: var(--sp-2) var(--sp-3); font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); color: var(--gold); transition: transform .8s cubic-bezier(.5,0,.7,.4), opacity .8s ease; }
.sd-flycard.on { transform: translateX(110px) scale(.35); opacity: 0; }
.sd-vault { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--sans); }
.sd-vault svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.sd-vaulttx b { display: block; font-size: var(--fs-md); color: var(--text); }
.sd-vaulttx b span { color: var(--gold); }
.sd-vaulttx i { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.sd-flycard.on + .sd-vault svg { animation: sdBump .5s cubic-bezier(.2,.7,.2,1) .55s; }
@keyframes sdBump { 50% { transform: scale(1.25); } }
.sd-trace { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.sd-trace.on { opacity: 1; transform: none; }
.sd-tracemap { position: relative; display: flex; justify-content: space-between; width: min(86%, 560px); margin: 0 auto; }
.sd-traceline { position: absolute; left: 5%; right: 5%; top: 13px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.1s ease .15s; }
.sd-trace.on .sd-traceline { transform: scaleX(1); }
.sd-tnode { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-family: var(--sans); font-size: var(--fs-2xs); color: var(--muted); }
.sd-tnode i { width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--gold); background: var(--bg-soft); color: var(--gold); font-style: normal; font-weight: 800; font-size: var(--fs-2xs); display: flex; align-items: center; justify-content: center; }
.sd-tnode i.sd-tn-wide { font-size: 6px; letter-spacing: -.03em; }
.sd-tracestamp { display: block; text-align: center; margin-top: 11px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); color: var(--gold); }

/* ---- idle / end overlays ---- */
.sd-idle {
  position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
  background: oklch(0.135 0.006 68 / 0.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.sd-player[data-mode="idle"] .sd-idle { opacity: 1; pointer-events: auto; }
.sd-playbtn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--ink-on-gold); border: none;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3); cursor: pointer;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.35), 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent);
}
.sd-playbtn:hover { box-shadow: 0 12px 32px oklch(0 0 0 / 0.4), 0 0 0 1px var(--gold); }
.sd-playbtn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.sd-playring { width: 44px; height: 44px; border-radius: 50%; background: oklch(1 0 0 / 0.2); display: flex; align-items: center; justify-content: center; flex: none; }
.sd-playring svg { width: 20px; height: 20px; fill: var(--ink-on-gold); margin-left: 3px; }
.sd-playtx { display: flex; flex-direction: column; text-align: left; line-height: 1.18; font-family: var(--sans); }
.sd-playtx b { font-weight: 700; font-size: var(--fs-md); }
.sd-end {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: var(--sp-3); padding-bottom: 24px;
  background: linear-gradient(180deg, transparent 30%, oklch(0.135 0.006 68 / 0.88) 78%);
  opacity: 0; pointer-events: none; transition: opacity .5s ease .4s;
}
.sd-player[data-mode="done"] .sd-end { opacity: 1; pointer-events: auto; }
.sd-endtitle { font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl); color: var(--text); letter-spacing: -0.01em; }
.sd-endrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.sd-endbtn {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-xs); color: var(--text);
  background: oklch(0.135 0.006 68 / 0.82); border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4); cursor: pointer;
}
.sd-endbtn:hover { border-color: var(--gold); }
.sd-endbtn.is-gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--ink-on-gold); border-color: transparent; font-weight: 700; }
/* ---- chapter break: the self-paced hand-off between chapters ----
   Deliberately a bottom bar and not a full scrim like .sd-idle/.sd-end: the whole
   point of stopping here is that the finished scene stays readable underneath
   while the viewer takes as long as they want before continuing. */
.sd-break {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 34px var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, transparent, oklch(0.135 0.006 68 / 0.9) 62%);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.sd-player[data-mode="break"] .sd-break { opacity: 1; pointer-events: auto; }
.sd-breaklbl { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.sd-breakbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-xs);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--ink-on-gold);
  border: none; padding: var(--sp-2) var(--sp-4); cursor: pointer;
}
.sd-breakbtn b { font-weight: 800; }
.sd-breakbtn svg { width: 15px; height: 15px; }
.sd-breakbtn:hover { box-shadow: 0 8px 20px oklch(0 0 0 / 0.35), 0 0 0 1px var(--gold); }
.sd-breakbtn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* subtle check on the industry chip once its story finished */
.uc-chip.is-done::after { content: " ✓"; color: var(--gold); }

/* ---- controls: play/pause · chapter bar · scrubber ---- */
.sd-controls { display: flex; align-items: stretch; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3); border-top: 1px solid var(--line-soft); background: var(--bg-soft); }
.sd-pp { flex: none; align-self: center; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--elev); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sd-pp:hover { border-color: var(--gold); }
.sd-pp:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sd-pp svg { width: 15px; height: 15px; fill: var(--gold); }
.sd-pp .sd-pp-pause { display: none; }
.sd-player[data-mode="playing"] .sd-pp .sd-pp-play { display: none; }
.sd-player[data-mode="playing"] .sd-pp .sd-pp-pause { display: block; }
.sd-chwrap { flex: 1; min-width: 0; }
.sd-chlabel { display: none; }
.sd-chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.sd-ch { display: block; text-align: left; background: none; border: none; padding: 0; cursor: pointer; min-width: 0; }
.sd-ch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-xs); }
.sd-ch i { display: none; }
/* watched chapters read as revisitable — clicking one jumps straight to its
   finished scene instead of replaying the reveal. Declared before the
   hover/active rule below so an active chapter still wins on equal specificity. */
.sd-ch.is-seen .sd-chtx b { color: color-mix(in srgb, var(--gold) 55%, var(--muted)); }
.sd-chtx b { display: block; font-family: var(--sans); font-weight: 700; font-size: var(--fs-2xs); color: var(--muted); transition: color .16s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-chtx em { display: block; font-style: normal; font-family: var(--sans); font-size: var(--fs-2xs); color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ch:hover .sd-chtx b, .sd-ch.is-active .sd-chtx b { color: var(--gold); }
.sd-scrub {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; margin-top: 10px;
  height: 4px; border-radius: var(--pill); cursor: pointer; background:
  linear-gradient(90deg, var(--gold) calc(var(--sp, 0) * 100%), var(--line) calc(var(--sp, 0) * 100%));
}
.sd-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: none; box-shadow: 0 0 0 3px oklch(0.135 0.006 68 / 0.8); }
.sd-scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: none; box-shadow: 0 0 0 3px oklch(0.135 0.006 68 / 0.8); }
.sd-scrub:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .sd-stage { height: 620px; } /* tallest scene: ch2 case view stacked to one column */
  .sd-scene { padding: var(--sp-3); }
  /* ch1: single column, hide list chrome */
  .sd-inbox { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sd-maillist { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .sd-mailhead { display: none; }
  /* ch2: single column */
  .sd-case { grid-template-columns: 1fr; gap: var(--sp-2); overflow: hidden; }
  /* ch3: ladder takes over after the split */
  .sd-fish { width: 100%; }
  .sd-c3wrap.on .sd-fish { opacity: 0; pointer-events: none; left: 50%; top: 20%; width: 70%; }
  .sd-whys { width: 100%; }
  .sd-rootcause { padding: var(--sp-2) var(--sp-3); }
  .sd-rootcause p { font-size: var(--fs-xs); }
  /* ch4/5 stack */
  .sd-c4grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .sd-kbmatch { align-self: stretch; }
  .sd-lessons { grid-template-columns: 1fr; gap: var(--sp-2); }
  .sd-lesson { padding: var(--sp-2) var(--sp-3); }
  /* no room for the fly-in card next to a centered vault; counter tick + bump remain */
  .sd-flycard { display: none; }
  .sd-tracemap { width: 100%; }
}
@media (max-width: 640px) {
  /* numbered chapter segments + one active label */
  .sd-chtx { display: none; }
  .sd-ch { display: flex; justify-content: center; }
  .sd-ch i { display: flex; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-style: normal; font-weight: 700; font-size: var(--fs-2xs); align-items: center; justify-content: center; transition: border-color .16s ease, color .16s ease; }
  .sd-ch.is-seen i { border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: color-mix(in srgb, var(--gold) 70%, var(--muted)); }
  .sd-ch.is-active i { border-color: var(--gold); color: var(--gold); }
  .sd-chlabel { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); color: var(--gold); margin-bottom: 7px; text-align: center; }
  .sd-controls { padding: var(--sp-2) var(--sp-3) 9px; gap: var(--sp-2); }
  .sd-pp { width: 36px; height: 36px; }
  .sd-title { display: none; } /* dots + phase label carry the bar on small screens */
  /* no room beside the Continue button without colliding with the scene's own
     cards (the ch1 toast sits bottom-right); the button reads fine alone. */
  .sd-breaklbl { display: none; }
  .sd-break { padding-top: 44px; }
  .sd-phase { font-size: var(--fs-2xs); }
}

/* While the 60s story plays, the sticky nav pill would cover the top of the
   stage on phones (the stage is taller than the viewport, so the pill hovers
   over it the whole run). Retract it until the viewer pauses or it ends —
   main.js toggles .sd-immersive on <body>. Desktop fits both, so mobile only. */
@media (max-width: 940px) {
  .nav { transition: transform .28s ease, opacity .28s ease; }
  body.sd-immersive .nav { transform: translateY(-140%); opacity: 0; pointer-events: none; }
}

/* seeks & reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sd-stage *, .sd-stage { transition: none !important; animation: none !important; }
  .sd-pp, .sd-scrub, .sd-idle { display: none; }
  .sd-phase::before { animation: none; }
  .nav { transition: none; }
}

/* ---- discovery CTA (v3): Calendly embed + pitch ---- */
.disc-v3 { position: relative; overflow: hidden; padding: clamp(60px, 10vh, 120px) 0; }
.disc-v3::before {
  content: ""; position: absolute; top: -10%; left: 0; width: 620px; height: 480px; z-index: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 3%, transparent), transparent 62%);
  pointer-events: none;
}
.disc-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.disc-pitch { }
.disc-pitch .eyebrow { display: inline-flex; margin-bottom: 16px; }
.disc-pitch h2 { margin-bottom: 20px; font-size: clamp(28px, 5vw, 40px); line-height: 1.2; }
.disc-pitch h2 em { font-style: normal; color: var(--gold); }
.cta-value {
  font-size: var(--fs-lg); font-weight: 600; color: var(--text);
  margin-bottom: 16px; line-height: 1.5;
}
.cta-trust {
  font-size: var(--fs-lg); color: var(--muted);
  margin-bottom: 28px; line-height: 1.6;
}
.disc-agenda {
  margin-top: 28px;
}
.disc-agenda-label {
  display: inline-flex; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); margin-bottom: 16px;
}
.disc-agenda-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  font-size: var(--fs-base); color: var(--text);
}
.disc-agenda-list li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.disc-agenda-list li:last-child {
  border-bottom: none;
}
.disc-agenda-list .num {
  flex-shrink: 0; font-weight: 700; color: var(--gold); font-size: var(--fs-lg);
}
.disc-agenda-list .txt {
  flex: 1; line-height: 1.4;
}
/* Calendly ignores the dark background_color/text_color URL params on this
   account tier, so the widget stays white: frame it as a deliberate "paper
   card" (dark labeled header, gold-tinted border) instead of a bare iframe. */
.disc-calendly {
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line-soft));
  border-radius: var(--r-lg);
  overflow: hidden; background: #100f0d; /* matches the Calendly embed's background_color param */
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.3);
}
.disc-cal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans); background: var(--card);
}
.disc-cal-title { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.disc-cal-meta { font-size: var(--fs-sm); color: var(--muted); }
/* host booking card (right column of #discovery) */
.host-card {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(28px, 4vh, 40px) clamp(24px, 3vw, 36px);
  font-family: var(--sans);
}
.host-row { display: flex; align-items: center; gap: 16px; }
.host-photo {
  width: 56px; height: 56px; border-radius: 100px; object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--line-soft));
}
.host-id { display: flex; flex-direction: column; gap: 2px; }
.host-name { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.host-role { font-size: var(--fs-sm); color: var(--muted); }
.host-meeting {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-block: 14px; border-block: 1px solid var(--line-soft);
}
.host-meeting-title { font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.host-meeting-meta { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.host-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.host-points li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--fs-md); color: var(--muted);
}
.host-points li::before {
  content: "\2713"; color: var(--gold); font-weight: 700; flex: none; font-size: var(--fs-sm);
}
.host-cta { width: 100%; justify-content: center; }
.disc-cal-note { font-size: var(--fs-sm); color: var(--faint); font-family: var(--sans); text-align: center; }

/* Calendly dialog (iframe src is set on first open — see main.js) */
.cal-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; margin: auto;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line-soft));
  border-radius: var(--r-lg); overflow: hidden;
  background: #100f0d; /* matches the Calendly embed's background_color param */
  color: var(--text); box-shadow: 0 24px 60px oklch(0 0 0 / 0.5);
}
.cal-dialog::backdrop { background: oklch(0 0 0 / 0.6); }
.cal-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans); background: var(--card);
}
.cal-dialog-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 100px; border: 1px solid var(--line-soft);
  background: none; color: var(--muted); cursor: pointer;
}
.cal-dialog-close:hover { color: var(--text); border-color: var(--line); }
.cal-dialog-close svg { width: 16px; height: 16px; }
.disc-cal-body { position: relative; }
.disc-cal-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: var(--sans); font-size: var(--fs-sm);
}
.cal-dialog iframe {
  display: block; border: none; width: 100%; height: min(660px, calc(100vh - 140px));
  position: relative; z-index: 1; /* paints over .disc-cal-loading once Calendly renders */
}

@media (max-width: 1024px) {
  .disc-grid { grid-template-columns: 1fr; gap: clamp(32px, 4vh, 48px); }
  .disc-pitch { order: 1; text-align: center; }
  .disc-pitch h2 { margin-inline: auto; max-width: 20ch; }
  .cta-value { margin-inline: auto; }
  .cta-trust { margin-inline: auto; max-width: 46ch; }
  .disc-agenda { margin-inline: auto; }
  .disc-agenda-list li {
    flex-direction: column; align-items: center; text-align: center;
  }
  .disc-agenda-list .num {
    margin-bottom: 4px;
  }
  .disc-calendly { order: 2; }
}
@media (max-width: 640px) {
  .disc-pitch h2 { font-size: 24px; }
  .cta-value { font-size: var(--fs-base); }
  .cta-trust { font-size: var(--fs-md); }
  .disc-agenda-list { font-size: var(--fs-md); }
  .disc-agenda-list li { padding: 14px 0; gap: 12px; }
  .cal-dialog iframe { height: min(560px, calc(100vh - 120px)); }
}


/* ----- 4) HERO NEURAL FACTORY (index only) -----
   Ambient full-bleed scene behind the hero: line-drawn stations in the side
   margins feed one gold core through curved connectors; gold pulses travel the
   lines continuously; every 12s one station raises a red alert, the core
   "thinks" (ripple) and answers with a gold pulse — sense → think → respond.
   Pure CSS loop. JS (main.js) only pauses it offscreen, rotates data-alert at
   each loop boundary (clocked by the hnMaster animation — load-bearing name),
   and drives cursor parallax via --mx/--my. Static poster without JS / with
   reduced motion. The core sits at the wrapper's center: the .hero-neural
   in-flow band anchors it in the CTA→stats gap regardless of headline wrap. */

.hero-neural {
  position: relative; z-index: -1; /* behind the hero text within .wrap */
  height: 72px; margin-top: clamp(20px, 3vh, 32px);
  pointer-events: none; contain: layout style; /* not paint — scene overflows upward on purpose */
  --mx: 0; --my: 0;
  animation: hnIn 1s ease .25s both; /* CSS-only entrance, works without JS */
}
@keyframes hnIn { from { opacity: 0; } }
.hero-neural.is-paused * { animation-play-state: paused !important; }

/* the two scene variants are absolutely positioned so viewBox (0,0) — the core —
   lands exactly at the wrapper's center; scale() about that point per breakpoint */
.hn { position: absolute; overflow: visible; display: block; }
.hn-d { left: calc(50% - 560px); top: -544px; transform-origin: 560px 580px; }
.hn-m { left: calc(50% - 320px); top: -424px; transform-origin: 320px 460px; display: none; }

/* cursor parallax layers (JS sets --mx/--my in -1..1; core leans a touch more) */
.hn-scene, .hn-corewrap {
  transform: translate(calc(var(--mx) * 4px), calc(var(--my) * 3px));
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.hn-corewrap { transform: translate(calc(var(--mx) * 6px), calc(var(--my) * 4px)); }

/* statics — this is also the reduced-motion / no-JS poster */
.hn-line { stroke: color-mix(in srgb, var(--gold) 10%, transparent); stroke-width: 1.25; }
.hn-st { stroke: color-mix(in srgb, var(--muted) 42%, transparent); stroke-width: 1.4; opacity: .5; }
.hn-st-alert { stroke: var(--text); stroke-width: 1.4; opacity: 0; }
.hn-st-calm { stroke: var(--gold); stroke-width: 1.4; opacity: 0; }
.hn-ring { stroke: var(--gold); stroke-width: 1; opacity: .3; transform-box: fill-box; transform-origin: center; }
.hn-nucleus { fill: var(--gold); transform-box: fill-box; transform-origin: center; }
.hn-ripple { stroke: var(--gold); stroke-width: 1.2; fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hn-flow { fill: var(--gold-bright); opacity: 0; }
.hn-beat-in { fill: var(--text); opacity: 0; }
.hn-beat-out { fill: var(--gold-bright); opacity: 0; }

/* ambient breathing (6s divides the 12s master → whole scene is periodic) */
@keyframes hnBreathe { 0%, 100% { transform: scale(1); opacity: .25; } 50% { transform: scale(1.06); opacity: .45; } }
@keyframes hnBreatheN { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.hn-ring1 { animation: hnBreathe 6s ease-in-out infinite; }
.hn-ring2 { animation: hnBreathe 6s ease-in-out -3s infinite; }
.hn-nucleus { animation: hnBreatheN 6s ease-in-out infinite; }

/* the 12s loop clock + core beat (transform/opacity only — runs everywhere) */
@keyframes hnMaster {
  0%, 30% { transform: scale(.35); opacity: 0; }
  31% { opacity: .5; }
  40%, 100% { transform: scale(2.1); opacity: 0; }
}
.hn-master { animation: hnMaster 12s linear infinite; }

/* station beat: double red blink → hold → heal gold → slow decay */
@keyframes hnStAlert {
  0%, 2% { opacity: 0; }
  3.5% { opacity: .5; }
  5% { opacity: .15; }
  6.5% { opacity: .55; }
  8%, 60% { opacity: .3; }
  72%, 100% { opacity: 0; }
}
@keyframes hnStCalm {
  0%, 58% { opacity: 0; }
  70%, 78% { opacity: .55; }
  96%, 100% { opacity: 0; }
}

/* traveling pulses — composited offset-path travel; browsers without support
   keep the dots hidden (opacity 0) and the story survives on blink + ripple */
@supports (offset-distance: 100%) {
  @keyframes hnFlow {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: .4; }
    88% { opacity: .4; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  @keyframes hnFlowOut {
    0% { offset-distance: 100%; opacity: 0; }
    10% { opacity: .3; }
    88% { opacity: .3; }
    100% { offset-distance: 0%; opacity: 0; }
  }
  @keyframes hnBeatIn {
    0%, 8% { offset-distance: 0%; opacity: 0; animation-timing-function: ease-in-out; }
    10% { opacity: .5; }
    27% { opacity: .5; }
    29%, 100% { offset-distance: 100%; opacity: 0; }
  }
  @keyframes hnBeatOut {
    0%, 40% { offset-distance: 100%; opacity: 0; animation-timing-function: ease-in-out; }
    43% { opacity: .5; }
    59% { opacity: .5; }
    62%, 100% { offset-distance: 0%; opacity: 0; }
  }
  .hn-flow { animation: hnFlow var(--dur, 4s) ease-in-out var(--dl, 0s) infinite; }
  .hn-flow-out { animation-name: hnFlowOut; }
  [data-alert="0"] .hn-beat-in.hn-b0, [data-alert="1"] .hn-beat-in.hn-b1,
  [data-alert="2"] .hn-beat-in.hn-b2, [data-alert="3"] .hn-beat-in.hn-b3,
  [data-alert="4"] .hn-beat-in.hn-b4, [data-alert="5"] .hn-beat-in.hn-b5 { animation: hnBeatIn 12s linear infinite; }
  [data-alert="0"] .hn-beat-out.hn-b0, [data-alert="1"] .hn-beat-out.hn-b1,
  [data-alert="2"] .hn-beat-out.hn-b2, [data-alert="3"] .hn-beat-out.hn-b3,
  [data-alert="4"] .hn-beat-out.hn-b4, [data-alert="5"] .hn-beat-out.hn-b5 { animation: hnBeatOut 12s linear infinite; }
}

/* the alerting station (rotated by JS each loop) */
[data-alert="0"] .hn-s0 .hn-st-alert, [data-alert="1"] .hn-s1 .hn-st-alert,
[data-alert="2"] .hn-s2 .hn-st-alert, [data-alert="3"] .hn-s3 .hn-st-alert,
[data-alert="4"] .hn-s4 .hn-st-alert, [data-alert="5"] .hn-s5 .hn-st-alert { animation: hnStAlert 12s linear infinite; }
[data-alert="0"] .hn-s0 .hn-st-calm, [data-alert="1"] .hn-s1 .hn-st-calm,
[data-alert="2"] .hn-s2 .hn-st-calm, [data-alert="3"] .hn-s3 .hn-st-calm,
[data-alert="4"] .hn-s4 .hn-st-calm, [data-alert="5"] .hn-s5 .hn-st-calm { animation: hnStCalm 12s linear infinite; }
/* mute the gold ambient dot on the alerting line while its beat runs */
[data-alert="0"] .hn-flow.hn-a0, [data-alert="1"] .hn-flow.hn-a1,
[data-alert="2"] .hn-flow.hn-a2, [data-alert="3"] .hn-flow.hn-a3,
[data-alert="4"] .hn-flow.hn-a4, [data-alert="5"] .hn-flow.hn-a5 { visibility: hidden; }

/* responsive: uniform scale about the core point keeps every path connected */
@media (max-width: 1100px) { .hn-d { transform: scale(.82); } }
@media (max-width: 940px)  { .hn-d { display: none; } .hn-m { display: block; transform: scale(1.25); } }
@media (max-width: 820px)  { .hn-m { transform: scale(1.1); } }
@media (max-width: 640px)  { .hn-m { transform: scale(.95); } }
@media (max-width: 560px)  { .hn-m { transform: scale(.78); } }
@media (max-width: 430px)  { .hn-m { transform: scale(.6); } }

@media (prefers-reduced-motion: reduce) {
  .hero-neural, .hero-neural * { animation: none !important; transition: none !important; }
  .hn-flow, .hn-beat-in, .hn-beat-out, .hn-ripple { display: none; }
  .hn-ring { opacity: .35; }
}

/* ============================= FAQ (#faq) ============================= */
.faq-block { margin-top: clamp(90px, 15vh, 160px); } /* matches .section-pad rhythm inside the shared Proof band */
/* That margin only exists to separate the FAQ from the testimonials above it.
   While the testimonials are hidden the FAQ leads the band, and the separator
   lands on top of the band's own padding as ~330px of dead space before the
   heading. Keyed off :first-child so it restores itself with the testimonials. */
.faq-block:first-child { margin-top: 0; }
.faq-head { text-align: center; margin-bottom: clamp(28px, 4vh, 40px); }
.faq-head h2 { margin-top: 14px; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: border-color .2s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-lg); color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { flex: none; display: inline-flex; color: var(--faint); transition: transform .25s ease, color .2s ease; }
.faq-chevron svg { width: 18px; height: 18px; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--gold); }
.faq-item summary:hover .faq-chevron { color: var(--gold); }
.faq-a { padding: 0 22px 20px; margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.7; max-width: 68ch; }

/* ==================== Dashboard (internal /dashboard, mock) ==================== */
/* Single-series charts: gold is the only data hue; all values ride as text tokens
   beside the bars (never inside them), so nothing depends on color alone. */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.kpi-tile {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 20px 22px;
}
.kpi-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.kpi-value { font-size: 34px; font-weight: 700; color: var(--text); margin-top: 8px; line-height: 1.1; }
.kpi-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
.kpi-delta.up { color: var(--gold); font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.dash-grid > * { min-width: 0; } /* let panels shrink below content min-width on narrow screens */
.dash-grid .span-2 { grid-column: 1 / -1; }

.dash-panel {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 22px 24px 18px;
}
.dash-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dash-panel-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: 0; }
.dash-panel-sub { font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 0; }
.dash-badge {
  flex: none;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line-soft); border-radius: var(--pill);
  padding: 4px 12px;
}
.dash-badge.live { color: var(--ink-on-gold); background: var(--gold); border-color: var(--gold); }

.dash-bars { display: flex; flex-direction: column; gap: 12px; }
.dash-bar-row { display: grid; grid-template-columns: 140px 1fr 110px; align-items: center; gap: 12px; }
.dash-bar-label { font-size: var(--fs-sm); color: var(--muted); }
.dash-bar-track { display: block; height: 14px; border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, .05); overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; background: var(--gold); border-radius: 0 4px 4px 0; min-width: 8px; }
.dash-bar-val { font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dash-bar-val small { color: var(--faint); font-size: var(--fs-2xs); }
.dash-group-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 16px 0 10px; }
.dash-group-label:first-of-type { margin-top: 0; }

.dash-table-scroll { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dash-table th {
  text-align: left; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
  padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line-soft);
}
.dash-table td { color: var(--text); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-soft); }
.dash-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.dash-table tr.is-sample td { opacity: .55; }
.dash-tag {
  font-size: var(--fs-2xs); color: var(--faint);
  border: 1px solid var(--line-soft); border-radius: var(--pill);
  padding: 1px 8px; margin-left: 6px;
}
.dash-empty { text-align: center; color: var(--faint); padding: 26px 0 !important; }
.dash-note { font-size: var(--fs-sm); color: var(--faint); margin: 16px 0 0; line-height: 1.6; max-width: 78ch; }
.dash-note code { font-size: var(--fs-2xs); border: 1px solid var(--line-soft); border-radius: var(--r-xs); padding: 1px 5px; }

@media (max-width: 860px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-bar-row { grid-template-columns: 110px 1fr 96px; }
}
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* ==================== CMS (internal /cms, mock) ==================== */
/* Reuses the .dash-* panel/table/badge/note recipes; only editor chrome here. */
.cms-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cms-btn {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft); border-radius: var(--r-xs);
  padding: 8px 16px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.cms-btn:hover:not(:disabled) { border-color: var(--gold); }
.cms-btn.primary { color: var(--ink-on-gold); background: var(--gold); border-color: var(--gold); }
.cms-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.cms-btn:disabled { opacity: .4; cursor: not-allowed; }
.cms-rowbtn {
  font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--muted);
  background: none; border: 1px solid var(--line-soft); border-radius: var(--r-xs);
  padding: 3px 8px; margin: 0 4px 4px 0; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.cms-rowbtn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.cms-rowbtn:disabled { opacity: .35; cursor: not-allowed; }
.cms-actions-cell { white-space: nowrap; }

.cms-form {
  margin-top: 18px; padding: 18px;
  border: 1px solid var(--line-soft); border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .02);
}
.cms-form-title { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.cms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cms-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.cms-field-wide { grid-column: 1 / -1; }
.cms-field input, .cms-field textarea {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft); border-radius: var(--r-xs);
  padding: 8px 12px; resize: vertical;
}
.cms-field input:focus-visible, .cms-field textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.cms-quote-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-flash { font-size: var(--fs-sm); color: var(--gold); }

@media (max-width: 860px) {
  .cms-fields { grid-template-columns: 1fr; }
  .cms-quote-cell { max-width: 200px; }
}

/* squiggle underline accent */
.squiggle { display: block; width: 132px; height: 12px; margin-top: 18px; color: var(--gold); }
.squiggle.center { margin-inline: auto; }

/* ============================================================================
   Locale-specific line-length tuning.
   German (and some Slovenian/Croatian) compounds run longer than the English
   source and overflow a few fixed-size headings/labels tuned for EN. These
   rules are scoped by :lang() (the <html lang> attribute) so they only affect
   the locale that needs them — English layout is untouched. Targets chosen to
   match the same line counts EN already achieves. See the layout tickets.
   ============================================================================ */

/* "The Problem" heading (4→3 lines) + lede (3→2) — give the German more width. */
:lang(de) .problem-head { max-width: 900px; }

/* Enterprise heading — let German wrap to 2 lines instead of nowrap-overflowing. */
:lang(de) .ent-lite-copy h2 { white-space: normal; }

/* "See how SolveR resolves a defect" subtitle (4→3 lines) — the German copy runs
   ~15% longer than EN and the container is capped by .wrap, so nudge the font down
   a touch to bring the three <br>-separated segments back to one line each. */
:lang(de) .inaction-head .lede { font-size: 17px; }

/* Impact stat hooks — fit each German hook on one line. */
:lang(de) .metric .mhook { font-size: 13px; letter-spacing: -0.01em; }