/* ───────── Design system: type scale + button tokens ─────────
   Single source of truth for text styles and CTA buttons. Rendered and documented at /design-system/.
   New UI uses these tokens (var(--fs-*), var(--btn-*)) or the .t-* classes instead of one-off font sizes.
   Breakpoints follow the site: 1068px (tablet) and 810px (mobile). */

/* colours, fonts, layout (measured from the live site at 1440px) */
:root {
  --ink: #0d0d0d;
  --black: #000;
  --gold: #ffefcf;
  --cream: #fefaf7;
  --cream-2: #fffaf8;
  --beige: #f8eee4;
  --tan: #e3cfba;
  --brown: #af7946;
  --muted: #86868b;
  --footer: #141414;
  --yellow-1: #fab429;
  --yellow-2: #e5a524;
  --font: Inter, "Inter Placeholder", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: Caveat, cursive;
  --container: 1170px;
  --shadow-card: 0 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.18), 0 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.16), 0 10px 10px -3.75px rgba(0, 0, 0, 0.06); /* every card: plans, comparison table, notes, video cards */
  --shadow-float: var(--shadow-card), 0 8px 24px -8px rgba(0, 0, 0, 0.12); /* things that float above the page: dropdowns, popovers */
  --nav-h: 61px;
}

/* motion */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: .18s; --dur: .32s; --dur-slow: .9s; }

/* type and buttons */
:root {
  /* type scale: size steps down at 1068px and 810px where noted */
  --fs-display: 72px;  /* hero h1           72 → 64 → 40 */
  --fs-h1: 56px;       /* section heading   56 → 48 → 32 */
  --fs-h2: 40px;       /* sub-section, plan 40 → 40 → 32 */
  --fs-h3: 32px;       /* block heading     32 */
  --fs-h4: 24px;       /* card heading      24 */
  --fs-lead: 28px;     /* subhead           28 → 24 → 19 */
  --fs-body-lg: 17px;  /* card / long-form body */
  --fs-body: 16px;     /* default body */
  --fs-sm: 14px;       /* UI text, nav, buttons */
  --fs-xs: 12px;       /* eyebrow, captions, meta */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* buttons: every CTA shares one text style */
  --btn-fs: var(--fs-sm);
  --btn-fw: var(--fw-medium);
  --btn-h: 37px;       /* one size for every button */
  --btn-radius: 100px;
}
@media (max-width: 1068px) { :root { --fs-display: 64px; --fs-h1: 48px; --fs-lead: 24px; } }
@media (max-width: 810px) { :root { --fs-display: 40px; --fs-h1: 32px; --fs-h2: 32px; --fs-lead: 19px; } }

/* text styles */
.t-display { font-size: var(--fs-display); line-height: 1.05; font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.07; font-weight: var(--fw-bold); letter-spacing: -0.005em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: var(--fw-bold); }
.t-h3 { font-size: var(--fs-h3); line-height: 1.12; font-weight: var(--fw-bold); }
.t-h4 { font-size: var(--fs-h4); line-height: 1.17; font-weight: var(--fw-semibold); }
.t-lead { font-size: var(--fs-lead); line-height: 1.2; font-weight: var(--fw-regular); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: 1.47; }
.t-body { font-size: var(--fs-body); line-height: 1.4; }
.t-sm { font-size: var(--fs-sm); line-height: 1.4; }
/* eyebrows inherit the surface's text colour: black on light, white on dark. Never the brand orange, brown or gold. */
.t-eyebrow, .eyebrow { color: inherit; }
.t-eyebrow { font-size: var(--fs-xs); line-height: 1; font-weight: var(--fw-medium); letter-spacing: 0.5px; text-transform: uppercase; }
.t-caption { font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); }
.t-muted { color: var(--muted); }
/* ───────── Design system: buttons ─────────
   Three styles, one size. Tokens in system.css; rendered and documented at /design-system/.
   Primary    .btn-call   yellow pill, the same everywhere               → <AuditCta />
   Secondary  .btn-sec    translucent pill on dark, no fill on light   → <JimCta />, <SubscribeCta />, or raw with an <img> or .btn-ico leading
   "Light" is any .on-light ancestor; .light-wrap, .card and .plan count too. */

.btn-call, .btn-sec {
  display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h); padding: 0 16px;
  border-radius: var(--btn-radius); font-size: var(--btn-fs); font-weight: var(--btn-fw); line-height: 1; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.btn-call:hover, .btn-sec:hover { transform: translateY(-2px); text-decoration: none; }
.btn-call:active, .btn-sec:active { transform: translateY(0) scale(.97); transition-duration: var(--dur-fast); }
/* a leading avatar or icon sits closer to the edge */
.btn-call:has(> img), .btn-sec:has(> img) { padding-left: 8px; }
.btn-call img, .btn-sec img { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; flex: none; }
.btn-sec .btn-ico { flex: none; }

/* primary */
.btn-call { color: #fff; background: linear-gradient(var(--yellow-1) 0%, var(--yellow-2) 100%); }
.btn-call:hover { filter: brightness(1.05); }
.audit-btn { padding: 0 14px 0 12px; }
.vid-ico { width: 20px; height: 20px; flex: none; color: #fff; }
.vid-ico .rec { fill: #fff; animation: recBlink 1.4s ease-in-out infinite; }
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.audit-btn .lbl-short { display: none; }
@media (max-width: 810px) { .audit-btn .lbl-full { display: none; } .audit-btn .lbl-short { display: inline; } }

/* secondary */
.btn-sec { color: #fff; background: rgba(255,255,255,.12); } /* no border, on any surface */
.btn-sec:hover { background: rgba(255,255,255,.2); }
/* icon buttons: the icon on its own, no container, same colour as the label */
.btn-sec .btn-ico { display: grid; place-items: center; width: 16px; height: 16px; }
.btn-sec .btn-ico svg { width: 16px; height: 16px; fill: currentColor; }
:is(.on-light, .light-wrap, .card, .plan) .btn-sec { color: #000; background: transparent; box-shadow: none; }
:is(.on-light, .light-wrap, .card, .plan) .btn-sec:hover { background: rgba(0,0,0,.05); }
/* dark cards inside a light section */
.audit .btn-sec, .roi .btn-sec, .cmp3 .hi .btn-sec { color: #fff; background: rgba(255,255,255,.12); }

/* wrappers */
.cta-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-audit { position: relative; display: inline-block; }
/* Love At First Try — site styles. Tokens live in system.css, buttons in buttons.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow { font-size: 12px; line-height: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }

/* ───────── Nav ───────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--nav-h); color: #fff;
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background: rgba(12, 12, 12, 0.6); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.35s ease, color 0.35s ease; }
.nav-main { height: 61px; }
.nav-inner { max-width: var(--container); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; }
.nav-logo { display: block; width: 102px; height: 27px; }
.nav-logo img { width: 100%; height: 100%; transition: filter 0.35s; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; line-height: 16.8px; white-space: nowrap; }
.nav-links > a, .nav-dd-btn { color: rgba(255, 255, 255, 0.62); transition: color 0.2s; }
.nav-links > a:hover, .nav-links > a.active, .nav-dd:hover .nav-dd-btn, .nav-dd.open .nav-dd-btn { color: #fff; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.menu-only { display: none; }
.nav-burger { display: none; width: 24px; height: 24px; position: relative; }
.nav-burger span { position: absolute; left: 2px; right: 2px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s, top 0.25s; }
.nav-burger span:nth-child(1) { top: 8px; } .nav-burger span:nth-child(2) { top: 15px; }
.nav.open .nav-burger span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { top: 11px; transform: rotate(-45deg); }

.nav.light { color: #000; background: rgba(254, 250, 247, 0.78); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
.nav.light .nav-links > a, .nav.light .nav-dd-btn { color: #404040; }
.nav.light .nav-links > a:hover, .nav.light .nav-dd:hover .nav-dd-btn, .nav.light .nav-dd.open .nav-dd-btn { color: #000; }
.nav.light .nav-links > a[aria-current="page"] { color: #8c8c8c; }
.nav.light .nav-burger span { background: #000; }

/* ───────── Hero ───────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: radial-gradient(50% 50%, #404040 0%, #100e0e 100%); text-align: center; overflow: hidden; }
.hero-inner { padding: max(150px, calc(50vh - 190px)) 16px 160px; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: 48px; line-height: 57.6px; font-weight: 700; letter-spacing: -0.7px; margin-top: 16px; max-width: 920px; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); animation: wordIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
.hero h1 .g { color: var(--gold); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
.fade-up { opacity: 0; transform: translateY(14px); animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.hero-sub { margin-top: 28px; max-width: 650px; font-size: 20px; line-height: 28px; letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.86); }
.avatars { display: flex; justify-content: center; gap: 16px; margin-top: 28px; }
.avatars img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); background: #333; }
.usps { display: grid; grid-template-columns: repeat(3, 227px); gap: 16px; margin-top: 40px; }
.usp { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 16px; line-height: 22.4px; color: #fff; }
.usp svg { width: 24px; height: 24px; color: #cfcfcf; fill: currentColor; }
.hero-cta { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); animation-name: fadeUpC; width: max-content; max-width: calc(100% - 32px); }
@keyframes fadeUpC { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.chev { position: absolute; left: 50%; bottom: 24px; width: 24px; height: 24px; margin-left: -12px; color: #fff; opacity: 0.8; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ───────── Our work ───────── */
.work { min-height: 900px; display: flex; align-items: center; justify-content: center; background: var(--ink); padding: 120px 16px; }
.work-inner { width: 618px; max-width: 100%; }
.work h2 { font-size: 37px; line-height: 44.4px; font-weight: 700; letter-spacing: -0.7px; margin-top: 12px; }
.work p:not(.eyebrow) { margin-top: 11px; font-size: 20px; line-height: 28px; letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.92); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ───────── Stages (sticky before/after) ───────── */
.stage { position: relative; height: 1789px; background: var(--ink); }
.stage.tall { height: 1450px; }
.pin { position: sticky; top: 0; padding-top: 148px; }
.stage-head { width: 900px; max-width: calc(100% - 32px); margin: 0 auto 32px; }
.stage-head .kicker { font-size: 14px; line-height: 19.6px; font-weight: 600; letter-spacing: 0.42px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.stage-head h2 { font-size: 32px; line-height: 41.6px; font-weight: 700; letter-spacing: -0.5px; color: var(--muted); }
.stage-head h2 b { color: #fff; font-weight: 700; }
.win { position: relative; width: 1100px; max-width: calc(100% - 32px); margin: 0 auto; border-radius: 12px; overflow: hidden; background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
.win-bar { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: linear-gradient(#212121 0%, #141414 100%); }
.win-bar i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.win-bar i:nth-child(1) { background: #ff5f57; } .win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-body { position: relative; aspect-ratio: 2916 / 1984; background: #fff; }
.win-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win-body .after { opacity: 0; will-change: opacity; }
.pill { position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%); height: 30px; padding: 0 16px; display: grid; place-items: center; border-radius: 100px; background: #000; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.1px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); pointer-events: none; }
.win-body.video { aspect-ratio: auto; background: #dbe9f3; }
.win-body.video video { position: static; height: auto; width: 100%; display: block; }
.vid-state { position: absolute; z-index: 3; right: 14px; bottom: 14px; height: 30px; padding: 0 14px; border-radius: 100px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; font-weight: 500; display: grid; place-items: center; backdrop-filter: blur(6px); }

/* ───────── Light sections ───────── */
.light-wrap { background: var(--cream); color: #000; position: relative; }
.founder { padding: 148px 16px 112px; text-align: center; }
.founder h2 { font-size: 37px; line-height: 44.4px; font-weight: 700; letter-spacing: -0.7px; color: #111; max-width: 480px; margin: 0 auto; }
.card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); }
.note { width: 615px; max-width: 100%; margin: 64px auto 0; padding: 16px; text-align: left; }
.note .av { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.note .lead { margin-top: 16px; font-size: 20px; line-height: 28px; font-weight: 700; color: #111; }
.note .lead span { color: #545454; display: block; }
.note p.b { font-size: 16px; line-height: 22.4px; color: #000; margin-top: 16px; }
.note .sig { margin-top: 20px; font-family: var(--hand); font-size: 24px; line-height: 28.8px; color: #000; }
.note .lead + p.b { margin-top: 20px; }

.marquees { background: var(--cream-2); padding: 0; overflow: hidden; position: relative; }
.marquees .row { display: flex; width: max-content; gap: 16px; padding: 0 8px 16px 8px; animation: marq var(--dur, 70s) linear infinite; }
.marquees .row.rev { animation-direction: reverse; padding-bottom: 0; }
.marquees .row:hover { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(calc(-50% - 8px)); } }
.tile { position: relative; flex: none; width: 286px; height: 150px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(195, 147, 111, 0.15); display: grid; place-items: center; overflow: hidden; }
.tile .logo { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 4px; border-radius: 8px; background: #fff; }
.tile .logo img { height: 32px; width: auto; object-fit: contain; }
.tile .logo img.rnd { border-radius: 8px; }
.tile .hov { position: absolute; inset: 0; padding: 22px 24px; background: var(--footer); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; text-align: left; }
.tile .hov strong { font-size: 16px; line-height: 22.4px; font-weight: 400; }
.tile .hov span { display: none; } /* hover shows the one-line result only; the description is too much copy */
.tile .hov strong { text-align: center; }
.tile:hover .hov { opacity: 1; transform: none; }
.marquees.pad-top { padding-top: 24px; }

.team-sec { background: var(--cream); padding: 132px 16px 124px; text-align: center; }
/* the Rive artboard leaves ~a third of the canvas empty under the heart; the negative margin pulls the title up to it */
.mascot { width: 280px; height: 284px; margin: 0 auto -76px; }
@media (max-width: 810px) { .mascot { width: 200px; height: 203px; margin-bottom: -54px; } }
.team-sec h2 { font-size: 32px; line-height: 41.6px; font-weight: 700; letter-spacing: -0.5px; color: #000; }
.team-sec .sub { max-width: 700px; margin: 16px auto 0; font-size: 19px; line-height: 26.6px; letter-spacing: -0.38px; color: #2e2e2e; }
.teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 1024px; max-width: 100%; margin: 48px auto 0; text-align: left; }
.team { background: #fff; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.team-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; }
.team-head h3 { font-size: 16px; line-height: 22.4px; font-weight: 700; color: #000; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 1111px; font-size: 12px; line-height: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; background: rgba(40, 202, 66, 0.2); color: #1b6124; }
.badge.full { background: rgba(168, 168, 168, 0.2); color: #7a7a7a; }
.members { padding: 0 16px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.member { display: flex; gap: 10px; align-items: flex-start; }
.member img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: #eee; }
.member b { display: block; font-size: 16px; line-height: 22.4px; font-weight: 400; color: #000; }
.member small { display: block; font-size: 14px; line-height: 19.6px; color: #666; }
.team-foot { padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.team-foot small { font-size: 14px; line-height: 19.6px; color: #666; }
.team-foot img { height: 28px; width: auto; object-fit: contain; align-self: flex-start; }
.proof { width: 1024px; max-width: 100%; margin: 16px auto 0; padding: 16px 0; background: #fff; border-radius: 12px; display: grid; grid-template-columns: repeat(3, 277px); justify-content: center; gap: 10px; }
.proof div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; line-height: 19.6px; color: #000; text-align: center; padding: 0 8px; }
.proof svg { width: 20px; height: 20px; fill: #000; }
.team-sec .cta-row { margin-top: 24px; }

.fact { width: 666px; max-width: 100%; margin: 72px auto 0; padding: 20px 24px 28px; text-align: left; border-radius: 10px; }
.fact .av { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.fact .k { margin-top: 12px; font-size: 24px; line-height: 33.6px; font-weight: 600; letter-spacing: -0.24px; color: #4d4d4d; }
.fact .t { font-size: 24px; line-height: 33.6px; font-weight: 600; letter-spacing: -0.24px; color: #000; }
.fact p { font-size: 20px; line-height: 28px; letter-spacing: -0.2px; color: #000; }
.fact .gap { margin-top: 20px; }
.fact .s { margin-top: 22px; font-weight: 600; }

/* ───────── Comparison ───────── */
.compare { width: 1024px; max-width: 100%; margin: 72px auto 0; border: 2px solid var(--tan); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); background: #fff; text-align: left; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.cmp-head > div { height: 107px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 20px; line-height: 28px; font-weight: 700; background: var(--beige); color: #000; }
.cmp-head > div:last-child { background: #fff; border-radius: 4px 0 0 0; }
.cmp-head svg { width: 72px; height: 19px; fill: #000; }
.cmp-logo { height: 19px; width: auto; filter: invert(1); }
/* 2px tan dividers either side of the middle column */
.cmp-head > :nth-child(2), .cmp-row > :nth-child(3) { border-inline: 2px solid var(--tan); }
.cmp-cat { grid-column: 1 / -1; background: var(--tan); padding: 14px 16px 12px; min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cmp-cat small { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: #6b5640; }
.cmp-cat h3 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.2px; color: #000; }
.cmp-cell { min-height: 105px; padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 22.4px; background: var(--beige); color: var(--brown); }
.cmp-cell:last-child { background: #fff; color: #000; }
.cmp-cell svg { width: 20px; height: 20px; flex: none; }
.cmp-cell.no svg { color: var(--brown); }
.cmp-cell:last-child svg { color: #d4a24c; }

/* ───────── Podcast embed card ───────── */
.pod-card { width: 1024px; max-width: 100%; margin: 72px auto 0; padding: 16px; text-align: left; border-radius: 12px; box-shadow: var(--shadow-card); background: #fff; }
.pod-card .eyebrow { font-size: 10px; line-height: 12px; letter-spacing: 0.6px; padding: 8px 0 0 0; }
.pod-card h3 { margin: 10px 0 16px; font-size: 24px; line-height: 31px; font-weight: 600; letter-spacing: -0.24px; color: #000; }
.yt { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 8px; background: #000; cursor: pointer; }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt .play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; transition: transform 0.2s; }
.yt:hover .play { transform: scale(1.08); }
.pod-card + .cta-row { margin-top: 40px; }
.light-end { padding: 0 16px 112px; }

/* ───────── Podcast + footer ───────── */
.podcast { background: #000; padding: 96px 16px; }
.pod-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 362px 362px; gap: 20px; align-items: start; }
.pod-inner > * { min-width: 0; } /* the press marquee is max-content wide; let grid columns shrink below it */
.pod-copy h2 { margin-top: 14px; font-size: 24px; line-height: 31px; font-weight: 600; letter-spacing: -0.24px; }
.pod-copy p { margin-top: 12px; font-size: 14px; line-height: 19.6px; color: rgba(255, 255, 255, 0.72); max-width: 290px; }
.pod-copy .btn-sec { margin-top: 24px; }
/* press logos: slow marquee with faded edges, same treatment as the podcast logo strip */
.press { margin-top: 36px; width: 100%; max-width: 420px; 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); }
.press .row { display: flex; align-items: center; width: max-content; animation: pressScroll 30s linear infinite; }
.press-set { display: flex; align-items: center; gap: 24px; padding-right: 24px; } /* two identical sets; -50% loops seamlessly */
.press img { height: 40px; width: auto; opacity: 0.95; flex: none; }
@keyframes pressScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press .row { animation: none; } }
.ep { display: block; }
.ep .img { border-radius: 12px; overflow: hidden; aspect-ratio: 362 / 190; background: #222; }
.ep img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.ep:hover img { transform: scale(1.04); }
.ep p { margin-top: 12px; font-size: 14px; line-height: 19.6px; color: rgba(255, 255, 255, 0.86); }

/* Footer: type and spacing match the production (Framer) footer measured at 1440px / 375px. */
.footer { background: var(--footer); color: #fff; }
.foot-main { border-bottom: 1px solid #262626; }
.foot-inner { max-width: 1200px; margin: 0 auto; }
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 48px 16px 72px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-brand .logo { width: auto; height: 32px; }
.foot-brand p { margin: 0; max-width: 300px; font-size: 14px; line-height: 19.6px; color: #fff; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px; }
.foot-col h4 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; }
.foot-col .links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.foot-col a { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 19.6px; color: #fff; }
.foot-col a:hover { text-decoration: underline; }
.foot-col a.dim { color: #c2c2c2; }
.foot-col svg { width: 18px; height: 18px; fill: #fff; flex: none; }
.foot-bot { max-width: 1202px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; font-size: 14px; line-height: 19.6px; color: #fff; border-top: 1px solid #171717; }

/* ───────── Responsive ───────── */
@media (max-width: 1240px) {
  .pod-inner { grid-template-columns: 1fr 1fr; }
  .pod-copy { grid-column: 1 / -1; }
  .stage { height: 1500px; }
}
@media (max-width: 1060px) {
  .teams { grid-template-columns: 1fr; width: 420px; }
  .proof { grid-template-columns: 1fr; width: 420px; }
}
@media (max-width: 1060px) {
  .nav-inner { grid-template-columns: auto 1fr; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; background: rgba(13, 13, 13, 0.96); white-space: normal; }
  .nav.open .nav-links { display: flex; }
  .nav.open.light .nav-links { background: rgba(254, 250, 247, 0.97); }
  .nav-links a { padding: 12px 0; font-size: 16px; }
  .nav-burger { display: block; }
  .menu-only { display: block !important; color: #fff !important; font-weight: 600; }
  .nav.light .menu-only { color: #000 !important; }
}
@media (max-width: 810px) {
  :root { --nav-h: 56px; }
  .nav-main { height: 56px; }
  .nav-right { gap: 8px; }
  .nav-right > :not(.nav-burger):not(.cta-sub) { display: none; } /* phones: menu button only; podcast nav keeps Subscribe */
  .nav-logo { width: 84px; height: 22px; }
  .nav-inner { padding: 0 12px; }
  .hero h1 { font-size: 32px; line-height: 38.4px; }
  .hero-sub { font-size: 16px; line-height: 22px; }
  .usps { grid-template-columns: 1fr; max-width: 260px; }
  .hero-inner { padding-bottom: 230px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn-call, .hero-cta .btn-sec, .hero-cta .cta-audit { width: 100%; justify-content: center; }
  .work { min-height: 700px; }
  .work h2, .founder h2 { font-size: 30px; line-height: 36px; }
  .stage { height: 1250px; }
  .stage.tall { height: 1000px; }
  .stage-head h2 { font-size: 22px; line-height: 29px; }
  .pill { top: 8px; height: 26px; font-size: 12px; }
  .team-sec h2 { font-size: 26px; line-height: 34px; }
  .teams, .proof { width: 100%; }
  .cmp-head > div { font-size: 13px; line-height: 17px; height: auto; min-height: 80px; padding: 10px; }
  .cmp-cell { font-size: 12px; line-height: 16px; padding: 10px; }
  .cmp-cat h3 { font-size: 15px; line-height: 20px; }
  .pod-card h3 { font-size: 18px; line-height: 24px; }
  .pod-inner { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 48px 16px 32px; }
  .foot-brand p, .foot-col a, .foot-bot { font-size: 13px; line-height: 18.2px; }
  .foot-col h4 { font-size: 18px; line-height: 25.2px; letter-spacing: -0.18px; }
  .foot-bot { padding: 16px; }
  .fact .k, .fact .t { font-size: 20px; line-height: 28px; }
  .fact p { font-size: 17px; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero h1 .w, .fade-up, .reveal { opacity: 1; transform: none; filter: none; }
}

/* mobile top-bar overflow guard */

/* ───────── Podcast pages ───────── */

/* ───────── /onboarding positioning test ───────── */
.ob .hero h1 { max-width: 980px; }
.ob .hero-sub strong { color: var(--gold); font-weight: 600; }
.ob .hero-cta { padding-right: 22px; }
.ob-problem { position: relative; height: 240vh; background: var(--ink); }
.ob-problem .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.reveal-inner { width: 760px; max-width: 100%; }
.reveal-inner .eyebrow { color: rgba(255,255,255,.55); }
.reveal-inner h2 { margin-top: 12px; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.8px; }
.reveal-inner p.rv { margin-top: 22px; font-size: 24px; line-height: 34px; letter-spacing: -0.3px; font-weight: 500; }
.reveal-inner p.rv b { font-weight: 600; }
.wd { --t: 0; color: rgb(calc(70 + 185 * var(--t)), calc(70 + 185 * var(--t)), calc(74 + 181 * var(--t))); transition: color .15s linear; }
.reveal-inner h2 .wd { color: rgb(calc(70 + 185 * var(--t)), calc(70 + 169 * var(--t)), calc(74 + 133 * var(--t))); }
.reveal-inner b .wd { color: rgb(calc(70 + 185 * var(--t)), calc(70 + 169 * var(--t)), calc(74 + 133 * var(--t))); }
@media (max-width: 810px) { .ob-problem { height: 200vh; } .reveal-inner h2 { font-size: 30px; line-height: 37px; } .reveal-inner p.rv { font-size: 18px; line-height: 27px; } }
@media (prefers-reduced-motion: reduce) { .wd { --t: 1 !important; } }
.ob-calc { background: #000; padding: 120px 16px; }
.ob-calc-inner { max-width: 760px; margin: 0 auto; }
.ob-calc h2 { margin-top: 12px; font-size: 32px; line-height: 41.6px; font-weight: 700; letter-spacing: -0.5px; }
.calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.calc label:nth-child(4), .calc label:nth-child(5) { grid-column: span 1; }
.calc label:nth-child(4) { grid-column: 1 / 3; }
.calc label { display: flex; flex-direction: column; gap: 8px; position: relative; font-size: 13px; color: rgba(255,255,255,.7); }
.calc label > span { display: inline-flex; align-items: center; gap: 7px; }
.calc label > span svg { width: 16px; height: 16px; color: var(--yellow-1); flex: none; }
.calc select { height: 52px; padding: 0 40px 0 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; color: #fff; font: inherit; font-size: 16px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.calc select:invalid, .calc select:has(option[value='']:checked) { color: rgba(255,255,255,.45); font-weight: 500; }
.calc select option { color: #000; }
.calc select:focus { outline: none; border-color: var(--yellow-1); }
.calc input::placeholder { color: rgba(255,255,255,.35); font-weight: 500; }
.calc input[type=number] { -moz-appearance: textfield; } .calc input::-webkit-outer-spin-button, .calc input::-webkit-inner-spin-button { -webkit-appearance: none; }
.roi-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.12); margin-bottom: 14px; }
.roi-head h3 span { color: var(--gold); font-weight: 600; }
.calc-hint { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.5); }
.calc-result { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .6s var(--ease-out); }
.calc-result.show { opacity: 1; transform: none; }
.calc-result.show .calc-out > div { animation: calcPop .6s var(--ease-spring) both; }
.calc-result.show .calc-out > div:nth-child(2) { animation-delay: .08s; } .calc-result.show .calc-out > div:nth-child(3) { animation-delay: .16s; }
@keyframes calcPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.calc input { height: 52px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.calc input:focus { outline: none; border-color: var(--yellow-1); }
.calc label b { position: absolute; right: 16px; bottom: 15px; color: rgba(255,255,255,.5); font-weight: 500; }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.calc-out > div { padding: 24px; border-radius: 12px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 6px; }
.calc-out small { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.calc-out strong { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.8px; color: var(--gold); }
.calc-out span { font-size: 14px; color: rgba(255,255,255,.7); }
.calc-note { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.5); }
.ob-how h2 { max-width: 640px; }
.steps { list-style: none; padding: 0; margin: 56px auto 0; max-width: 820px; display: grid; gap: 16px; text-align: left; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 8px 16px; padding: 24px 28px 24px 20px; align-items: start; }
.steps .n { grid-row: 1 / span 2; font-size: 28px; font-weight: 700; letter-spacing: -0.8px; color: var(--tan); line-height: 1; padding-top: 2px; }
.steps h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: #000; }
.steps p { font-size: 16px; line-height: 24px; color: #333; }
.ob-quote { padding: 0 16px 112px; background: var(--cream); }
.ob-quote figure { max-width: 820px; margin: 0 auto; padding: 36px 40px; border-radius: 16px; }
.ob-quote blockquote { margin: 0; }
.ob-quote blockquote p { font-size: 22px; line-height: 32px; font-weight: 500; letter-spacing: -0.3px; color: #111; }
.ob-quote blockquote p + p { margin-top: 18px; }
.ob-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.ob-quote .hidden-av { display: none; }
.ob-quote figcaption strong { display: block; font-size: 16px; color: #000; }
.ob-quote figcaption span { font-size: 14px; color: #666; }
.ob-fit, .ob-cmp { padding-top: 0; }
.fit-grid, .cmp3 { display: grid; gap: 16px; max-width: 1024px; margin: 40px auto 0; text-align: left; }
.fit-grid { grid-template-columns: 1fr 1fr; }
.cmp3 { grid-template-columns: repeat(3, 1fr); }
.fit, .cmp3 .card { padding: 24px 28px; border-radius: 12px; box-shadow: none; }
.fit ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.fit li { position: relative; padding-left: 28px; font-size: 16px; line-height: 24px; color: #111; }
.fit li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(40,202,66,.2); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; background: #1b6124; }
.fit.no li::before { background: var(--brown); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cmp3 h3 { margin-top: 10px; font-size: 18px; line-height: 24px; font-weight: 700; color: #000; }
.cmp3 p { margin-top: 10px; font-size: 15px; line-height: 22px; color: #444; }
.cmp3 .card.hi { background: var(--footer); color: #fff; }
.cmp3 .card.hi h3 { color: #fff; } .cmp3 .card.hi p { color: rgba(255,255,255,.78); }
.cmp3 .card.hi img { filter: none !important; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1024px; margin: 40px auto 0; text-align: left; }
.plan, .card.plan { padding: 28px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-card); } /* same soft shadow and 12px radius on both plans (.card.plan outranks the 24px .card radius in home-vibe) */
.plan h3 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.5px; color: #000; }
.plan .price { margin-top: 6px; font-size: 22px; line-height: 30px; font-weight: 400; color: #000; }
.plan .price span { color: #555; }
/* buttons sit above the list, as on the pricing page */
.plan .plan-ctas { justify-content: flex-start; margin: 14px 0 6px; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; font-size: 16px; line-height: 24px; color: #333; flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 10px; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #4fbf8e; fill: none; stroke: currentColor; stroke-width: 2.4; }
.plan li b { color: #000; font-weight: 600; }
.plan-faces { display: flex; margin-top: 8px; }
.plan-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin-right: -6px; box-shadow: 0 0 0 2px #fff; }
.guarantee { display: flex; gap: 16px; align-items: flex-start; max-width: 820px; margin: 16px auto 0; padding: 24px 28px; border-radius: 12px; text-align: left; background: var(--beige); box-shadow: none; }
.guarantee svg { width: 28px; height: 28px; flex: none; fill: #d4a24c; }
.guarantee.satisfaction { margin-top: 12px; }
.guarantee.satisfaction svg { fill: none; color: #2e8b57; }
.guarantee strong { display: block; font-size: 16px; color: #000; }
.guarantee p { margin-top: 4px; font-size: 15px; line-height: 22px; color: #333; }
.side-note { max-width: 640px; margin: 28px auto 0; font-size: 14px; line-height: 20px; color: #777; }
.teardown h3 { max-width: 760px; }
.teardown .td-sub { font-size: 16px; line-height: 24px; color: #444; max-width: 640px; }
.teardown .cta-row { justify-content: flex-start; }
.ob-faq { padding: 96px 16px; }
.faq-inner { max-width: 760px; margin: 0 auto; }
.ob-faq details { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; }
.ob-faq details:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.ob-faq .eyebrow { margin-bottom: 20px; }
.ob-faq summary { cursor: pointer; list-style: none; font-size: 18px; line-height: 26px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.ob-faq summary::-webkit-details-marker { display: none; }
.ob-faq summary::after { content: '+'; color: rgba(255,255,255,.5); font-weight: 400; }
.ob-faq details[open] summary::after { content: '–'; }
.ob-faq details p { margin-top: 10px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.75); max-width: 680px; }
@media (max-width: 810px) {
  .calc, .calc-out, .fit-grid, .cmp3, .plans { grid-template-columns: 1fr; }
  .ob-calc h2 { font-size: 26px; line-height: 34px; }
  .calc-out strong { font-size: 30px; }
  .steps li { grid-template-columns: 1fr; } .steps .n { grid-row: auto; }
  .ob-quote figure { padding: 24px; } .ob-quote blockquote p { font-size: 18px; line-height: 27px; }
}

/* ───────── /onboarding playbook + work ───────── */
.ob-pb { padding-top: 0; }
.ob-pb .sub { max-width: 760px; }
.pb-mindset { max-width: 820px; margin: 40px auto 0; padding: 24px 28px; border-radius: 12px; background: var(--footer); color: #fff; box-shadow: none; text-align: left; }
.pb-mindset .q { margin-top: 10px; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.3px; }
.pb { list-style: none; padding: 0; margin: 16px auto 0; max-width: 820px; display: grid; gap: 16px; text-align: left; }
.pb-item { padding: 28px; border-radius: 12px; box-shadow: none; }
.pb-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pb-head .n { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--brown); background: var(--beige); padding: 4px 10px; border-radius: 100px; }
.pb-head h3 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.3px; color: #000; }
.pb-item > p { margin-top: 12px; font-size: 16px; line-height: 24px; color: #333; }
.pb-item > p strong { color: #000; }
.flows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.flows > div { padding: 14px 16px; border-radius: 10px; background: var(--cream); display: flex; flex-direction: column; gap: 4px; }
.flows > div.hi { background: var(--beige); box-shadow: inset 0 0 0 1px var(--tan); }
.flows b { font-size: 15px; color: #000; }
.flows span { font-size: 14px; line-height: 20px; color: #444; }
.deliv { list-style: none; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid #eee; display: grid; gap: 8px; }
.deliv::before { content: 'You get'; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #888; }
.deliv li { position: relative; padding-left: 24px; font-size: 15px; line-height: 22px; color: #111; }
.deliv li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #1b6124; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ob-work { padding-top: 0; }
.ob-work .sub { max-width: 760px; }
.ba { max-width: 1024px; margin: 40px auto 0; }
.ba .win { max-width: 100%; width: 100%; box-shadow: var(--shadow-float); }
.ba .after { transition: opacity .5s ease; }
.ba.show-after .after { opacity: 1; }
.ba-toggle { display: inline-flex; margin-top: 16px; padding: 4px; border-radius: 100px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ba-toggle button { height: 36px; padding: 0 18px; border-radius: 100px; font-size: 14px; font-weight: 600; color: #666; }
.ba-toggle button[aria-selected="true"] { background: #000; color: #fff; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1024px; margin: 32px auto 0; text-align: left; }
.work-grid figure { margin: 0; padding: 12px; border-radius: 12px; box-shadow: none; }
.win.small { width: 100%; max-width: 100%; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.win.small .win-bar { height: 26px; padding: 0 10px; gap: 5px; } .win.small .win-bar i { width: 8px; height: 8px; }
.win.small .win-body img { position: static; }
.win.small .win-body.video { aspect-ratio: 1476 / 936; }
.work-grid figcaption { padding: 14px 6px 4px; display: flex; flex-direction: column; gap: 4px; }
.work-grid b { font-size: 15px; color: #000; }
.work-grid span { font-size: 13px; line-height: 19px; color: #555; }
@media (max-width: 810px) { .flows, .work-grid { grid-template-columns: 1fr; } .pb-item { padding: 20px; } .pb-mindset .q { font-size: 18px; line-height: 26px; } }

/* ───────── free audit card ───────── */
.audit { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; max-width: 1024px; margin: 16px auto 0; padding: 32px; border-radius: 16px; text-align: left; background: var(--footer); color: #fff; box-shadow: 0 0 0 2px var(--yellow-1), var(--shadow-float); }
.audit h3 { margin-top: 12px; font-size: 26px; line-height: 33px; font-weight: 700; letter-spacing: -0.4px; }
.audit h3 em { color: var(--gold); font-style: italic; }
.audit .lede { margin-top: 14px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.78); }
.audit .deliv { border-top-color: rgba(255,255,255,.12); }
.audit .deliv::before { color: rgba(255,255,255,.5); }
.audit .deliv li { color: #fff; }
.audit .deliv li::before { background: var(--yellow-1); }
.audit .cta-row { justify-content: flex-start; margin-top: 24px; }
.audit-video { display: flex; flex-direction: column; gap: 16px; }
.tella { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.tella iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tella-poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, #3a3a3a 0%, #121212 100%); }
.tella-poster .play { width: 68px; height: 48px; transition: transform .2s; }
.tella:hover .play { transform: scale(1.08); }
.tella-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 100px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.tella-cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.75); padding: 0 16px; }
.audit-quote { margin: 0; padding: 16px 18px; border-radius: 10px; background: rgba(255,255,255,.06); }
.audit-quote p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,.85); }
.audit-quote footer { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--gold); }
@media (max-width: 810px) { .audit { grid-template-columns: 1fr; padding: 20px; } .audit h3 { font-size: 22px; line-height: 29px; } }

/* ───────── ROI card in pricing ───────── */
.roi { max-width: 820px; margin: 16px auto 0; padding: 32px; border-radius: 16px; text-align: left; background: #000; color: #fff; box-shadow: none; }
.roi-head { max-width: 720px; }
.roi-head h3 { margin-top: 12px; font-size: 28px; line-height: 35px; font-weight: 700; letter-spacing: -0.5px; }
.roi-head p:not(.eyebrow) { margin-top: 12px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.75); }
.roi .calc input { font-size: 18px; }
.roi-verdict { margin-top: 16px; padding: 16px 18px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.85); border-left: 3px solid rgba(255,255,255,.2); }
.roi-verdict.ok { border-left-color: var(--yellow-1); color: #fff; }
.roi .calc-note { color: rgba(255,255,255,.45); }
@media (max-width: 810px) { .roi { padding: 20px; } .roi-head h3 { font-size: 22px; line-height: 29px; } .calc, .calc-out { grid-template-columns: 1fr; } .calc label:nth-child(4) { grid-column: auto; } }


/* ───────── POV (editorial, from Jim) ───────── */
.pov { background: var(--ink); color: #fff; padding: 120px 16px; }
.pov-inner { max-width: 680px; margin: 0 auto; }
.pov .eyebrow { color: rgba(255,255,255,.55); }
.pov h2 { margin-top: 14px; font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -0.8px; }
.pov h2 em { font-style: italic; color: var(--yellow-1); }
.pov-kicker { margin-top: 10px; font-size: 22px; line-height: 30px; color: rgba(255,255,255,.6); }
.pov-body { margin-top: 36px; }
.pov-body p { font-size: 20px; line-height: 32px; color: rgba(255,255,255,.82); }
.pov-body p + p { margin-top: 20px; }
.pov-body p b { color: #fff; font-weight: 600; }
.pov-ask { display: flex; align-items: flex-start; gap: 14px; margin-top: 40px; padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pov-ask img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.pov-ask p { font-size: 17px; line-height: 26px; color: rgba(255,255,255,.8); }
.pov-ask p b { color: #fff; font-weight: 600; }
.pov-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--yellow-1); }
.pov-link span { transition: transform .2s; } .pov-link:hover span { transform: translateX(3px); }
@media (max-width: 810px) { .pov { padding: 80px 16px; } .pov h2 { font-size: 30px; } .pov-kicker { font-size: 19px; line-height: 26px; } .pov-body p { font-size: 18px; line-height: 28px; } }

/* ───────── solution (after the problem) ───────── */
.solution { background: var(--ink); color: #fff; padding: 120px 16px 110px; }
.solution-inner { max-width: 1024px; margin: 0 auto; }
.solution-head { max-width: 760px; }
.solution .eyebrow { color: rgba(255,255,255,.55); }
.solution h2 { margin-top: 14px; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.8px; }
.solution h2 em { font-style: normal; color: var(--yellow-1); }
.solution-pitch { margin-top: 22px; font-size: 22px; line-height: 33px; letter-spacing: -0.2px; color: rgba(255,255,255,.8); }
.solution-pitch b { color: #fff; font-weight: 600; }
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.sol-card { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sol-card .n { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--gold); }
.sol-card h3 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.4px; }
.sol-card > p { font-size: 16px; line-height: 25px; color: rgba(255,255,255,.72); }
.sol-card blockquote { margin: auto 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.sol-card blockquote p { font-size: 17px; line-height: 26px; font-weight: 500; color: rgba(255,255,255,.88); }
.sol-card blockquote p b { color: var(--gold); font-weight: 600; }
.sol-card footer { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.6); }
.sol-card .av { width: 28px; height: 28px; border-radius: 50%; position: relative; display: grid; place-items: center; background: #2a2a2a; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.7); overflow: hidden; flex: none; }
.sol-card .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .sol-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; } }
@media (max-width: 810px) { .solution { padding: 80px 16px 72px; } .solution h2 { font-size: 30px; } .solution-pitch { font-size: 18px; line-height: 28px; } .sol-card { padding: 22px 20px; } }

/* solution: team faces, proof row, translucent testimonial */
.team-row { margin-top: 56px; text-align: center; }
.faces { display: flex; justify-content: center; padding-top: 8px; }
.face { position: relative; width: 68px; height: 68px; margin: 0 -8px; border-radius: 50%; outline: none; cursor: default; z-index: 1; transition: transform .4s var(--ease-spring), margin .4s var(--ease-spring); }
.face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #333; box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px rgba(255,255,255,.22); transition: box-shadow .25s; }
.face:hover, .face:focus-visible { transform: translateY(-10px) scale(1.18); margin: 0 10px; z-index: 3; }
.face:hover img, .face:focus-visible img { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--yellow-1); }
.face-tag { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); white-space: nowrap; padding: 8px 12px; border-radius: 10px; background: #fff; color: #000; font-size: 12px; line-height: 16px; opacity: 0; pointer-events: none; box-shadow: var(--shadow-float); transition: opacity .2s var(--ease-out), transform .3s var(--ease-spring); }
.face-tag b { display: block; font-size: 14px; font-weight: 700; }
.face:hover .face-tag, .face:focus-visible .face-tag { opacity: 1; transform: translate(-50%, 0); }
.team-cap { margin-top: 20px; font-size: 17px; line-height: 26px; color: rgba(255,255,255,.72); }
.team-cap b { color: #fff; font-weight: 600; }
.sol-usps { margin: 36px auto 0; justify-content: center; }
.sol-testi { display: grid; grid-template-columns: 340px 1fr; gap: 36px; margin-top: 56px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); text-align: left; color: #fff; }
.sol-testi .testi-photo { aspect-ratio: 4 / 5; }
.sol-quote { margin: 0; padding: 6px 12px 6px 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.testi-note { font-family: var(--hand); font-size: 32px; line-height: 1.1; color: var(--yellow-1); transform: rotate(-1.5deg); transform-origin: left; margin-bottom: 10px; }
.sol-quote p:not(.testi-note) { font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.2px; color: rgba(255,255,255,.88); }
.sol-quote mark { background: linear-gradient(transparent 60%, rgba(250,180,41,.4) 60%); color: #fff; padding: 0 2px; }
.sol-quote footer { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.sol-quote footer b { font-size: 15px; color: #fff; }
.sol-quote footer span { font-size: 13px; color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .sol-testi { grid-template-columns: 1fr; gap: 20px; padding: 16px; } .sol-testi .testi-photo { max-width: 400px; } .sol-quote { padding: 4px 4px 10px; } .sol-quote p:not(.testi-note) { font-size: 17px; line-height: 26px; } .testi-note { font-size: 27px; } }
@media (max-width: 810px) { .team-row { margin-top: 40px; } .face { width: 56px; height: 56px; } .face-tag { white-space: normal; width: 170px; text-align: center; } .team-cap { font-size: 15px; line-height: 23px; } .sol-usps { margin-top: 28px; } }

/* Kyle's value cards, moved into the light playbook section */
.light-wrap .sol-grid { max-width: 1100px; margin: 48px auto 0; }
.light-wrap .sol-card { background: #fff; box-shadow: 0 1px 3px rgba(195,147,111,.15); color: #000; }
.light-wrap .sol-card .n { color: var(--brown); }
.light-wrap .sol-card h3 { color: #000; }
.light-wrap .sol-card > p { color: #444; }
.light-wrap .sol-card blockquote { border-top-color: rgba(0,0,0,.08); }
.light-wrap .sol-card blockquote p { color: #1a1a1a; }
.light-wrap .sol-card blockquote p b { color: #000; background: linear-gradient(transparent 58%, rgba(250,180,41,.4) 58%); }
.light-wrap .sol-card footer { color: #666; }

/* ───────── symptoms (scrollytelling) ───────── */
.symptoms { position: relative; height: 320vh; background: var(--ink); }
.symptoms .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 80px 16px 40px; }
.symptoms-inner { width: 900px; max-width: 100%; }
.symptoms h2 { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.8px; text-align: left; }
.symptoms h2 u { text-decoration-color: var(--yellow-1); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.symptoms h2 .wd { color: rgb(calc(70 + 185 * var(--t)), calc(70 + 185 * var(--t)), calc(74 + 181 * var(--t))); }
.symptoms h2 u .wd { color: rgb(calc(70 + 185 * var(--t)), calc(70 + 169 * var(--t)), calc(74 + 133 * var(--t))); }
.symptom-stack { display: grid; gap: 12px; margin-top: 44px; max-width: 760px; margin-left: auto; margin-right: auto; }
.symptom { --t: 0; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 28px)) scale(calc(0.97 + 0.03 * var(--t))); will-change: opacity, transform; }
.symptom .emoji { font-size: 36px; line-height: 1; text-align: center; transform: scale(calc(0.6 + 0.4 * var(--t))); transition: transform .2s; }
.symptom p { font-size: 18px; line-height: 27px; color: rgba(255,255,255,.72); text-align: left; }
.symptom b { color: #fff; font-weight: 600; background: linear-gradient(transparent 55%, rgba(250,180,41,.25) 55%); }
.symptom.on { box-shadow: inset 0 0 0 1px rgba(250,180,41,.35); }
@media (max-width: 810px) {
  .symptoms { height: 300vh; }
  .symptoms .pin { padding-top: 70px; }
  .symptoms h2 { font-size: 26px; line-height: 33px; }
  .symptom-stack { margin-top: 24px; gap: 10px; }
  .symptom { grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; }
  .symptom .emoji { font-size: 26px; }
  .symptom p { font-size: 15px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .symptom { --t: 1 !important; } }

/* ───────── big testimonial ───────── */
.testi { background: linear-gradient(180deg, var(--ink) 0%, #000 100%); padding: 40px 16px 120px; text-align: center; }
.testi-inner { max-width: 1024px; margin: 0 auto; }
.testi h2 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.8px; color: var(--gold); }
.testi-card { display: grid; grid-template-columns: 420px 1fr; gap: 40px; margin-top: 40px; padding: 28px; border-radius: 20px; background: #fff; color: #000; text-align: left; box-shadow: var(--shadow-card); }
.testi-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #3a2f1a 0%, #0d0d0d 100%); }
.testi-img { position: absolute; inset: 0; display: grid; place-items: center; }
.testi-img img { width: 100%; height: 100%; object-fit: cover; }
.testi-img span { font-size: 96px; font-weight: 700; letter-spacing: -3px; color: rgba(255,255,255,.12); }
.spark { position: absolute; width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 2px 0 #000); }
.spark path { stroke: #000; stroke-width: 1.4; stroke-linejoin: round; }
.spark.s1 { top: 8%; left: 10%; } .spark.s2 { top: 32%; right: 9%; width: 28px; height: 28px; } .spark.s3 { bottom: 20%; left: 6%; width: 24px; height: 24px; }
.testi-tag { position: absolute; left: 16px; bottom: 16px; padding: 10px 16px; border-radius: 10px; background: #000; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.testi-tag b { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.testi-tag span { font-size: 13px; color: rgba(255,255,255,.75); }
.testi-quote { margin: 0; padding: 8px 16px 8px 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.qmark { width: 40px; height: 30px; fill: var(--yellow-1); margin-bottom: 4px; }
.testi-quote p { font-size: 22px; line-height: 32px; font-weight: 600; letter-spacing: -0.3px; color: #111; }
.testi-quote mark { background: linear-gradient(transparent 8%, rgba(250,180,41,.35) 8%, rgba(250,180,41,.35) 92%, transparent 92%); color: inherit; padding: 0 2px; }
.testi-quote footer { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.testi-quote footer b { font-size: 16px; color: #444; }
.testi-quote footer span { font-size: 13px; color: #777; }
@media (max-width: 900px) { .testi-card { grid-template-columns: 1fr; padding: 16px; gap: 20px; } .testi h2 { font-size: 28px; line-height: 35px; } .testi-quote { padding: 8px 4px 12px; } .testi-quote p { font-size: 18px; line-height: 27px; } .testi-photo { max-width: 420px; } }

/* ───────── services dropdown ───────── */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 500; padding: 8px 0; }
.nav-dd-btn svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-dd:hover .nav-dd-btn svg, .nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: 100%; left: 0; transform: translate(0, 6px); min-width: 300px; padding: 8px; border-radius: 14px; background: #fff; color: #000; box-shadow: var(--shadow-float), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 60; }
.nav-dd-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }
.nav-dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: #000; }
.nav-dd-menu a:hover { background: var(--cream); }
.nav-dd-menu b { font-size: 14px; font-weight: 600; }
.nav-dd-menu span { font-size: 12px; color: #666; }
@media (max-width: 1060px) {
  /* mobile menu: "Services" is a small section header; its links sit at the same level as the other items */
  .nav-dd { display: flex; flex-direction: column; }
  .nav-dd-btn { padding: 16px 0 4px; font-size: var(--fs-xs); line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,.4); pointer-events: none; }
  .nav.light .nav-dd-btn { color: #8c8c8c; }
  .nav .nav-dd-menu { position: static; transform: none; filter: none; transition: none; opacity: 1; visibility: visible; min-width: 0; padding: 0; background: transparent; box-shadow: none; color: inherit; }
  .nav-dd-menu a { padding: 12px 0; border-radius: 0; color: rgba(255,255,255,.62); }
  .nav.light .nav-dd-menu a { color: #404040; }
  .nav .nav-dd-menu a:hover { background: transparent; transform: none; }
  .nav-dd-menu b { font-size: 16px; font-weight: 500; }
  .nav-dd-menu span { display: none; }
  .nav-dd-btn svg { display: none; }
}

/* ───────── audit CTA popover (parked) ───────── */
.audit-pop { position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, 6px); width: 360px; max-width: calc(100vw - 24px); padding: 10px; border-radius: 16px; background: #fff; color: #000; box-shadow: var(--shadow-float), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .32s; z-index: 70; text-align: left; }
.cta-audit.up .audit-pop { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, -6px); }
.cta-audit.left .audit-pop { left: auto; right: 0; transform: translate(0, 6px); }
.cta-audit.left.up .audit-pop { transform: translate(0, -6px); }
.cta-audit:hover .audit-pop, .cta-audit:focus-within .audit-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .12s, .12s, 0s; }
.cta-audit.left:hover .audit-pop, .cta-audit.left:focus-within .audit-pop { transform: translate(0, 0); }
.audit-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }
.cta-audit.up .audit-pop::before { top: auto; bottom: -14px; }
.pop-screen { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0d0d0d url('/assets/img/b2-before.png') top center / cover; }
.pop-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); }
.pop-video, .pop-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pop-example { cursor: pointer; }
.pop-playbtn { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px 6px 8px; border-radius: 100px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 1px rgba(255,255,255,.18); transition: transform .2s var(--ease-spring), background .2s; }
.pop-playbtn svg { width: 14px; height: 14px; }
.pop-example:hover .pop-playbtn { transform: translateX(-50%) scale(1.04); background: #e62117; }
.q-note { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.6); }
.pop-rec { position: absolute; z-index: 3; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 100px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 600; backdrop-filter: blur(4px); }
.pop-rec img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.pop-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: recBlink 1.2s ease-in-out infinite; }
.pop-cursor { position: absolute; z-index: 3; width: 18px; height: 18px; left: 20%; top: 30%; animation: popCursor 6s ease-in-out infinite; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pop-cursor svg { width: 100%; height: 100%; }
@keyframes popCursor { 0% { left: 20%; top: 30%; } 25% { left: 62%; top: 22%; } 45% { left: 62%; top: 22%; } 60% { left: 40%; top: 58%; } 80% { left: 40%; top: 58%; } 100% { left: 20%; top: 30%; } }
.pop-note { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border-radius: 8px; background: #fff; color: #000; font-size: 11px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; animation: popNote 6s ease-in-out infinite; }
.pop-note b { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow-1); color: #000; font-size: 10px; }
.pop-note.n1 { left: 10px; bottom: 10px; animation-delay: 0s; }
.pop-note.n2 { right: 10px; top: 36px; animation-delay: 1.5s; }
.pop-note.n3 { left: 24%; top: 62%; animation-delay: 3.6s; }
@keyframes popNote { 0%, 12% { opacity: 0; transform: translateY(6px); } 20%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(6px); } }
.pop-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px 6px; }
.pop-body > b { font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: -0.2px; }
.pop-body > span:not(.pop-pills) { font-size: 13px; line-height: 19px; color: #444; }
.pop-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pop-pills em { font-style: normal; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 100px; background: var(--beige); color: #5a4630; }
@media (hover: none), (max-width: 810px) { .audit-pop { display: none; } }

/* ───────── Hero v2 (video + hype placeholder) ───────── */
.hero-v2 { min-height: auto; padding-bottom: 0; overflow: visible; }
.hero-v2 .hero-inner { padding: 170px 16px 96px; max-width: 1100px; }
.hero-v2 h1 { max-width: 980px; }
.hero-v2 .hero-cta2 { margin-top: 32px; }
.hero-v2 .usps { margin-top: 36px; }
.hero-v2 .chev { display: none; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-bgvid { display: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .28; }
.blob.b1 { width: 60vw; height: 60vw; left: -15vw; top: -20vw; background: #5a5a5a; animation: blobA 18s ease-in-out infinite alternate; }
.blob.b2 { width: 50vw; height: 50vw; right: -15vw; top: 10vh; background: #3b3b3b; animation: blobB 22s ease-in-out infinite alternate; }
.blob.b3 { width: 40vw; height: 40vw; left: 30vw; bottom: -20vw; background: #4a4a4a; animation: blobA 26s ease-in-out infinite alternate-reverse; }
@keyframes blobA { to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes blobB { to { transform: translate(-10vw, 8vh) scale(.9); } }
.grain { position: absolute; inset: -50%; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-1%,3%); } 100% { transform: translate(3%,-1%); } }
.hero-v2 .hero-inner { position: relative; z-index: 1; }
.hype { width: 1100px; max-width: 100%; margin: 64px auto 0; }
.hype-win { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 100px -20px rgba(0,0,0,.8), 0 0 120px -30px rgba(255,255,255,.12); }
.hype-body { aspect-ratio: 16 / 9; background: #0a0a0a; }
.hype-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hype-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 45%, #2a2a2a 0%, #0a0a0a 100%); opacity: 0; transition: opacity .3s; }
.hype-body.no-video .hype-ph { opacity: 1; }
.hype-ph .play { width: 96px; height: 68px; opacity: .9; }
.hype-ph-tag { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 600; letter-spacing: .3px; color: #fff; }
.hype-ph-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.55); }
.hype-ph-cap code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,.8); }
@media (max-width: 810px) { .hero-v2 .hero-inner { padding: 120px 16px 64px; } .hype { margin-top: 40px; } .hype-ph .play { width: 64px; height: 45px; } .hype-ph-cap { font-size: 11px; padding: 0 12px; } }

/* ───────── WOW variant (html.hero-wow) ───────── */
.hero-wow .hero-v2 { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: #050505; }
.hero-wow .hero-bgvid { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-wow .hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%), linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 30%, transparent 70%, #0d0d0d 100%); }
.hero-wow .blob { opacity: .45; filter: blur(110px); }
.hero-wow .blob.b1 { background: #6e6e6e; } .hero-wow .blob.b2 { background: #444; } .hero-wow .blob.b3 { background: #fff; opacity: .1; }
.hero-wow .grain { opacity: .1; }
.hero-wow .hero-v2 .hero-inner { padding: 140px 16px 80px; max-width: 1240px; }
.hero-wow .hero-v2 h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.0; letter-spacing: -0.035em; max-width: none; }
.hero-wow .hero-v2 h1 .g { background: linear-gradient(90deg, #ffefcf 0%, #fab429 40%, #ffefcf 70%, #fab429 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wordIn 0.7s cubic-bezier(0.22,1,0.36,1) forwards, shimmer 6s linear infinite; animation-delay: calc(var(--i) * 70ms + 150ms), 0s; }
@keyframes shimmer { to { background-position: -300% 0; } }
.hero-wow .hero-v2 .hero-sub { font-size: 22px; line-height: 32px; max-width: 760px; margin-top: 32px; }
.hero-wow .hero-v2 .hero-cta2 { margin-top: 36px; }
.hero-wow .hero-v2 .usps { margin-top: 40px; }
.hero-wow .hype { margin-top: 72px; width: min(1240px, 100%); }
.hero-wow .hype-win { transform: perspective(1600px) rotateX(6deg); transform-origin: 50% 0; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 140px -30px rgba(0,0,0,.9), 0 0 200px -40px rgba(255,255,255,.18); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.hero-wow .hype:hover .hype-win { transform: perspective(1600px) rotateX(0deg); }
.hero-wow .hero-v2 .chev { display: block; }
@media (max-width: 810px) { .hero-wow .hero-v2 h1 { font-size: 40px; line-height: 1.05; } .hero-wow .hero-v2 .hero-sub { font-size: 18px; line-height: 27px; } .hero-wow .hype-win { transform: none; } }

/* ───────── tweaks panel ───────── */
.tweaks { position: fixed; z-index: 90; left: 16px; bottom: 16px; padding: 12px 14px; border-radius: 12px; background: #111; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1); font-size: 13px; display: flex; flex-direction: column; gap: 8px; max-width: 260px; }
.tweaks b { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); }
.tweaks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tweaks small { font-size: 11px; color: rgba(255,255,255,.55); line-height: 16px; }
.tweaks code { color: rgba(255,255,255,.85); }

/* nav CTA appears after the hero */
.nav.has-hero .nav-right .cta-audit { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.nav.has-hero.cta-on .nav-right .cta-audit { opacity: 1; transform: none; pointer-events: auto; }

/* ───────── classic problem section (tweak) ───────── */
.symptoms-static { display: none; background: var(--ink); padding: 140px 16px 100px; text-align: center; }
.problem-static .symptoms { display: none; }
.problem-static .symptoms-static { display: block; }
.symptoms-static-inner { max-width: 1024px; margin: 0 auto; }
.symptoms-static .eyebrow { color: rgba(255,255,255,.55); }
.symptoms-static h2 { margin: 14px auto 0; max-width: 760px; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.8px; }
.symptoms-static h2 u { text-decoration-color: var(--yellow-1); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.symptom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.symptom-s { padding: 40px 28px 36px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.symptom-s .emoji { font-size: 40px; line-height: 1; }
.symptom-s p { font-size: 17px; line-height: 26px; color: rgba(255,255,255,.72); }
.symptom-s b { color: #fff; font-weight: 600; background: linear-gradient(transparent 55%, rgba(250,180,41,.25) 55%); }
@media (max-width: 810px) { .symptoms-static { padding-top: 96px; } .symptoms-static h2 { font-size: 28px; line-height: 35px; } .symptom-grid { grid-template-columns: 1fr; } .symptom-s { padding: 28px 20px; } }

.how-sub { max-width: 600px; margin: 16px auto 0; font-size: 19px; line-height: 27px; letter-spacing: -0.3px; color: #2e2e2e; }
.ob-price .eyebrow { margin-bottom: 12px; }
.ob-price .sub b { color: #000; font-weight: 600; }

/* ───────── what we'll fix, step by step ───────── */
.fix { padding: 148px 16px 96px; background: var(--cream); }
.fix-head { max-width: 760px; margin: 0 auto; text-align: center; }
.fix-head h2 { margin-top: 12px; font-size: 37px; line-height: 44.4px; font-weight: 700; letter-spacing: -0.7px; color: #111; }
.fix-found, .fix-hand { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; max-width: 900px; margin: 56px auto 0; padding: 24px 28px; border-radius: 14px; background: var(--beige); }
.fix-found .n, .fix-hand .n { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--brown); padding-top: 4px; }
.fix-found b, .fix-hand b { display: block; font-size: 18px; line-height: 24px; color: #000; }
.fix-found p, .fix-hand p { margin-top: 6px; font-size: 15px; line-height: 22px; color: #4a4036; }
.fix-list { list-style: none; padding: 0; margin: 40px auto 0; max-width: 1100px; display: grid; gap: 24px; }
.fix-step { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 36px; border-radius: 20px; background: #fff; box-shadow: 0 1px 3px rgba(195,147,111,.15); }
.fix-step:nth-child(even) .fix-copy { order: 2; }
.fix-copy .n { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--brown); background: var(--beige); padding: 4px 10px; border-radius: 100px; }
.fix-copy h3 { margin-top: 14px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.4px; color: #000; }
.fix-copy > p { margin-top: 12px; font-size: 16px; line-height: 24px; color: #333; }
.fix-copy .deliv { margin-top: 16px; padding-top: 14px; }
.fix-media { display: flex; flex-direction: column; gap: 12px; }
.fix-media .win.small { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 50px -25px rgba(0,0,0,.35); }
.fix-media .ba { margin: 0; }
.fix-media .ba-toggle { margin-top: 10px; }
.proof-pill { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--tan); }
.proof-pill img { height: 22px; width: auto; max-width: 110px; object-fit: contain; flex: none; }
.proof-pill img.hid { display: none; }
.proof-pill span { font-size: 13px; line-height: 18px; color: #5a4630; }
.proof-pill span b { color: #000; font-weight: 600; }
.proof-pill.quote span { display: block; font-style: italic; }
.proof-pill.quote span b { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--brown); }
.stat-card { padding: 28px; border-radius: 14px; background: var(--footer); color: #fff; display: flex; flex-direction: column; gap: 8px; }
.stat-card b { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -1px; color: var(--gold); }
.stat-card span { font-size: 15px; line-height: 22px; color: rgba(255,255,255,.85); }
.stat-card small { font-size: 12px; color: rgba(255,255,255,.5); }
.mail-card { padding: 22px 24px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 50px -25px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 8px; }
.mail-top { display: flex; justify-content: space-between; font-size: 12px; color: #888; }
.mail-card b { font-size: 16px; color: #000; }
.mail-card p { font-size: 14px; line-height: 21px; color: #444; }
.mail-card em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--brown); }
.process { background: var(--ink); color: #fff; padding: 120px 16px; text-align: center; }
.process-inner { max-width: 1100px; margin: 0 auto; }
.process h2 { margin-top: 12px; font-size: 37px; line-height: 44.4px; font-weight: 700; letter-spacing: -0.7px; }
.process .how-sub { color: rgba(255,255,255,.72); }
.process-win { width: 1100px; max-width: 100%; margin: 48px auto 0; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 100px -20px rgba(0,0,0,.8); }
.process .hype-video { position: static; width: 100%; height: auto; }
.process .hype-body { aspect-ratio: 16 / 9; }
.process .hype-ph { opacity: 0; } .process .hype-body.no-video .hype-ph { opacity: 1; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1100px; margin: 24px auto 0; }
.process-steps > div { padding: 18px 16px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: flex; align-items: center; gap: 12px; text-align: left; }
.process-steps b { font-size: 14px; color: var(--gold); }
.process-steps span { font-size: 14px; line-height: 20px; color: rgba(255,255,255,.85); }
@media (max-width: 900px) {
  .fix { padding-top: 100px; }
  .fix-head h2 { font-size: 30px; line-height: 36px; }
  .fix-found, .fix-hand { grid-template-columns: 1fr; gap: 8px; }
  .fix-step { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .fix-step:nth-child(even) .fix-copy { order: 0; }
  .fix-copy h3 { font-size: 22px; line-height: 28px; }
  .process { padding: 80px 16px; } .process h2 { font-size: 28px; line-height: 34px; }
  .process-steps { grid-template-columns: 1fr 1fr; }
}

/* ───────── playbook cards (visual-first) ───────── */
.fix-group { display: flex; align-items: baseline; gap: 14px; max-width: 1100px; margin: 64px auto 20px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.3px; color: #000; }
.fix-group span { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--brown); background: var(--beige); padding: 4px 10px; border-radius: 100px; }
.fix .pb-mindset { margin-top: 48px; }
.fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1100px; margin: 0 auto; }
.fix-card { padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(195,147,111,.15); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.fix-card.hi { box-shadow: 0 0 0 2px var(--yellow-1), 0 10px 30px -15px rgba(0,0,0,.2); }
.fix-card h3 { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.3px; color: #000; margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.fix-card h3 .n { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--brown); background: var(--beige); padding: 3px 8px; border-radius: 100px; }
.fix-card > p { font-size: 15px; line-height: 22px; color: #444; }
.fix-card .proof-pill { margin-top: auto; }
.fix-card .win.small { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 50px -25px rgba(0,0,0,.35); }
.fix-card .ba { margin: 0; }
.fix-card .ba-toggle { margin-top: 10px; }
.fix-card .mail-card { box-shadow: 0 0 0 1px rgba(0,0,0,.06); background: var(--cream); }
/* CSS visuals */
.viz { border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--tan); padding: 20px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; justify-content: center; font-size: 13px; color: #333; }
.viz .f-note { margin-top: 4px; font-size: 12px; color: #8a7a68; }
.doc .doc-h { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--brown); }
.doc .doc-l { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.doc .doc-l b { font-weight: 600; color: #000; }
.doc .doc-l i { display: block; height: 10px; border-radius: 6px; background: var(--tan); width: 90%; }
.doc .doc-l.hi i { background: linear-gradient(90deg, var(--yellow-1), var(--yellow-2)); }
.funnel { position: relative; }
.fbar { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--tan); width: var(--w); min-width: 150px; color: #000; }
.fbar.hi { background: var(--footer); color: #fff; }
.fbar b { font-weight: 700; }
.funnel .tag { position: absolute; right: 20px; bottom: 20px; padding: 4px 10px; border-radius: 100px; background: var(--yellow-1); color: #1a1200; font-size: 11px; font-weight: 700; }
.form .f-q { font-weight: 600; color: #000; }
.f-opts, .m-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.f-opts span, .m-opts span { padding: 6px 12px; border-radius: 100px; background: #fff; box-shadow: inset 0 0 0 1px var(--tan); }
.f-opts span.on, .m-opts span.on { background: var(--footer); color: #fff; box-shadow: none; }
.check .c-h { font-weight: 700; color: #000; font-size: 14px; margin-bottom: 4px; }
.check .c-i { position: relative; padding: 8px 12px 8px 34px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--tan); }
.check .c-i::before { content: ''; position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tan); }
.check .c-i.done { color: #8a7a68; text-decoration: line-through; }
.check .c-i.done::before { background: #1b6124; box-shadow: none; }
.check .c-i.cur { box-shadow: inset 0 0 0 2px var(--yellow-1); font-weight: 600; color: #000; }
.migrate .m-row { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #000; }
.migrate .src, .migrate .dst { padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--tan); }
.migrate .dst { background: #e7f5ea; color: #1b6124; box-shadow: none; }
.migrate .arrow { flex: 1; height: 2px; background: var(--tan); position: relative; }
.migrate .arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--tan); }
.actions .a-i { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--tan); }
.actions .a-i b { color: #000; font-weight: 600; }
.actions .a-i span { color: var(--brown); font-weight: 600; font-size: 12px; }
.actions .a-i.hi { box-shadow: inset 0 0 0 2px var(--yellow-1); }
.personas { flex-direction: row; gap: 12px; }
.personas .p-i { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--tan); }
.personas img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.personas b { color: #000; } .personas span { font-size: 12px; color: #666; }
.cadence .cd { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
.cadence .cd b { color: #000; font-weight: 600; }
.cadence .cd span { font-size: 12px; color: #8a7a68; order: 3; }
.cadence .cd i { display: flex; gap: 4px; order: 2; }
.cadence .cd i::before { content: ''; display: block; height: 10px; width: calc(var(--n) * 14px); background: repeating-linear-gradient(90deg, var(--yellow-1) 0 10px, transparent 10px 14px); border-radius: 2px; }
@media (max-width: 900px) { .fix-grid { grid-template-columns: 1fr; } .fix-group { font-size: 18px; line-height: 24px; flex-wrap: wrap; } .personas { flex-direction: column; } }

.symptoms .sym-eye { margin-bottom: 14px; text-align: center; color: rgba(255,255,255,.6); }

/* ───────── client logo marquee on homepage ───────── */
.clients { background: var(--cream-2); padding: 72px 0 0; text-align: center; }
.clients-eye { padding: 0 16px 28px; color: #6b6560; }
.clients .marquees { padding-bottom: 8px; }


/* portaled popover: fixed, above everything, driven by .show */
.audit-pop.portal { position: fixed; left: 0; top: 0; z-index: 9999; transform: translate(0, 6px); }
.audit-pop.portal.up { transform: translate(0, -6px); }
.morph-card.portal.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0); }
.cta-audit:hover .audit-pop.portal:not(.show), .cta-audit:focus-within .audit-pop.portal:not(.show) { opacity: 0; visibility: hidden; }
.audit-pop.portal::before { display: none; }

.tweaks .tw-note { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.tweaks .tw-note summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--yellow-1); }
.tweaks .tw-note p { margin-top: 6px; font-size: 11px; line-height: 16px; color: rgba(255,255,255,.75); }
.tweaks .tw-note b { color: #fff; }

/* ───────── value chat (scrollytelling) ───────── */
.chat { position: relative; height: 320vh; background: #000; color: #fff; }
.chat .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 80px 16px 40px; }
.chat-inner { width: 760px; max-width: 100%; text-align: center; }
.chat-eye { color: rgba(255,255,255,.6); margin-bottom: 12px; }
.chat h2 { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.8px; }
.chat h2 .wd { color: rgb(calc(70 + 185 * var(--t)), calc(70 + 185 * var(--t)), calc(74 + 181 * var(--t))); }
.thread { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.msg { --t: 0; display: flex; align-items: flex-end; gap: 10px; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 24px)) scale(calc(0.96 + 0.04 * var(--t))); transform-origin: left bottom; will-change: opacity, transform; }
.msg.me { flex-direction: row-reverse; transform-origin: right bottom; }
.msg img, .msg .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.msg .av { position: relative; display: grid; place-items: center; background: #2a2a2a; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); overflow: hidden; }
.msg .av img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bubble { max-width: 560px; padding: 14px 18px; border-radius: 20px; background: #1c1c1e; }
.msg.them .bubble { border-bottom-left-radius: 6px; }
.msg.me .bubble { background: linear-gradient(135deg, var(--yellow-1), var(--yellow-2)); color: #1a1200; border-bottom-right-radius: 6px; }
.bubble p { font-size: 18px; line-height: 27px; }
.bubble p b { font-weight: 600; color: var(--gold); }
.msg.me .bubble p b { color: #1a1200; }
.bubble small { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.5); }
.msg.me .bubble small { color: rgba(26,18,0,.6); }
.msg.on .bubble { animation: bubblePop .5s var(--ease-spring) both; }
@keyframes bubblePop { from { transform: scale(.97); } to { transform: scale(1); } }
@media (max-width: 810px) {
  .chat { height: 300vh; }
  .chat .pin { padding-top: 70px; }
  .chat h2 { font-size: 26px; line-height: 33px; }
  .thread { margin-top: 24px; gap: 10px; }
  .bubble { padding: 12px 14px; } .bubble p { font-size: 15px; line-height: 22px; }
  .msg img, .msg .av { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .msg { --t: 1 !important; } }

/* symptoms: cards swap in place */
.symptoms-inner { text-align: left; }
.symptom-stage { position: relative; margin-top: 40px; min-height: 220px; }
.symptom-stage .symptom.msg { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-end; gap: 14px; padding: 0; background: none; box-shadow: none; border-radius: 0; max-width: 820px; transform-origin: left bottom; }
.symptom-stage .symptom .av { width: 48px; height: 48px; font-size: 14px; }
.symptom-stage .symptom .bubble { max-width: none; padding: 22px 28px; border-radius: 26px; border-bottom-left-radius: 8px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.symptom-stage .symptom .bubble p { font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -0.5px; color: #fff; }
.symptom-stage .symptom .bubble p b { color: var(--gold); background: none; font-weight: 700; }
.symptom-stage .symptom .bubble small { margin-top: 12px; font-size: 13px; }
@media (max-width: 1068px) { .symptom-stage .symptom .bubble p { font-size: 28px; } }
@media (max-width: 810px) { .symptom-stage { margin-top: 24px; min-height: 260px; } .symptom-stage .symptom .av { width: 32px; height: 32px; } .symptom-stage .symptom .bubble { padding: 14px 16px; border-radius: 18px; } .symptom-stage .symptom .bubble p { font-size: 20px; } }

.fade-step { --t: 1; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * -16px)); will-change: opacity, transform; }
.chat-inner { width: 900px; }
.chat-sub { margin-top: 14px; font-size: 20px; color: rgba(255,255,255,.6); }
.value-stage { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; }
.chat .pin { position: sticky; }
.big-quote { --t: 0; position: absolute; left: 0; right: 0; margin: 0 auto; max-width: 980px; padding: 0 16px; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 28px)) scale(calc(0.96 + 0.04 * var(--t))); will-change: opacity, transform; text-align: center; }
.big-quote p { font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.8px; color: #fff; }
.big-quote p b { color: var(--gold); font-weight: 700; }
.big-quote footer { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.65); }
.big-quote .av { width: 32px; height: 32px; border-radius: 50%; position: relative; display: grid; place-items: center; background: #2a2a2a; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); overflow: hidden; }
.big-quote .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 810px) { .big-quote p { font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; } .big-quote footer { margin-top: 18px; font-size: 13px; } .chat-sub { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .big-quote { position: static; --t: 1 !important; margin-bottom: 32px; } .value-stage { position: static; transform: none; } }

/* ───────── hero video scroll-expand ───────── */
.hype-pin { position: relative; height: 240vh; margin-top: 48px; }
.hype-pin .hype { position: sticky; top: 0; height: 100vh; height: 100svh; margin: 0; width: 100%; max-width: none; display: flex; align-items: center; justify-content: center; }
.hype-pin .hype-win { --w: min(1100px, calc(100vw - 32px)); --h: auto; --r: 18px; --bar: 1; width: var(--w); height: var(--h); max-width: none; border-radius: var(--r); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.hype-pin .hype-win .win-bar { flex: none; opacity: var(--bar); height: calc(46px * var(--bar)); overflow: hidden; transition: none; }
.hype-pin .hype-body { flex: 1; aspect-ratio: auto; min-height: 0; position: relative; }
.hype-pin .hype-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hype-pin.expanding [data-tilt] { transform: none !important; }
.hero-wow .hype-pin .hype-win { transform: none; }
.hype-ui { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.hype-pin.full .hype-ui { opacity: 1; transform: none; pointer-events: auto; }
.hype-sound { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 100px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; font-weight: 600; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.hype-sound svg { width: 20px; height: 20px; }
.hype-sound[aria-pressed="true"] .mute { display: none; }
.hype-sound[aria-pressed="false"] .wave { display: none; }
.hype-sound[aria-pressed="false"] { animation: soundNudge 1.6s var(--ease-in-out) infinite; }
@keyframes soundNudge { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 0 rgba(250,180,41,.5); } 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 10px rgba(250,180,41,0); } }
.hype-continue { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 18px; border-radius: 100px; background: linear-gradient(var(--yellow-1), var(--yellow-2)); color: #fff; font-size: 14px; font-weight: 600; }
.hype-continue svg { width: 18px; height: 18px; animation: bob 2.2s ease-in-out infinite; }
.hero-v2 .chev { display: none; }
@media (max-width: 810px) { .hype-pin { height: 200vh; margin-top: 24px; } .hype-ui { padding: 16px; } .hype-sound span { display: none; } .hype-sound { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .hype-pin { height: auto; } .hype-pin .hype { position: static; height: auto; } .hype-pin .hype-win { --w: min(1100px, calc(100vw - 32px)); --h: auto; } .hype-pin .hype-body { aspect-ratio: 16/9; } }

/* ───────── YouTube cover + big play + modal ───────── */
.yt-cover { position: absolute; inset: 0; overflow: hidden; background: #000; }
.yt-cover iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.big-play { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 20px 60px -20px rgba(0,0,0,.6); transition: transform .35s var(--ease-spring), background .25s var(--ease-out); }
.big-play svg { width: 40px; height: 40px; margin-left: 4px; }
.big-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.22); }
.big-play:active { transform: translate(-50%, -50%) scale(.96); }
.big-play::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); animation: playRing 2.4s var(--ease-out) infinite; }
@keyframes playRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.yt-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .25s var(--ease-out); backdrop-filter: blur(10px); }
.yt-modal.open { opacity: 1; }
.yt-modal[hidden] { display: none; }
.yt-frame { width: min(1400px, 96vw); aspect-ratio: 16 / 9; max-height: 90vh; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 60px 140px -40px rgba(0,0,0,.9); transform: scale(.96); transition: transform .35s var(--ease-spring); }
.yt-modal.open .yt-frame { transform: scale(1); }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px); transition: background .2s, transform .3s var(--ease-spring); }
.yt-close svg { width: 22px; height: 22px; } .yt-close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }

/* ───────── Cinema hero (html.hero-cinema) ───────── */
.hero-cin, .cin-more-sec { display: none; }
.hero-cinema .hero-v2 { display: none; }
.hero-cinema .hero-cin { display: block; position: relative; height: 220vh; background: #000; color: #fff; --p: 0; }
.cin-stage { position: sticky; top: var(--twbar); height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.hero-cinema .cin-more-sec { display: block; }
.cin-bg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.cin-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc(1 - var(--p) * 1.8); transform: scale(calc(1 + var(--p) * .06)); }
.hero-cin.no-film .cin-bg { background: radial-gradient(60% 70% at 50% 45%, #404040 0%, #100e0e 100%); }
.hero-cin .cin-shade { opacity: calc(1 - var(--p) * 1.15); }
.hero-cin .cin-copy { opacity: calc(1 - var(--p) * 2.2); transform: translateY(calc(var(--p) * 60px)); filter: blur(calc(var(--p) * 12px)); pointer-events: none; }
.hero-cin.active .cin-copy { visibility: hidden; }
.hero-cin .cin-play { opacity: calc(1 - var(--p) * 2.2); transform: translate(-50%, -50%) scale(calc(1 - var(--p) * .4)); }
.hero-cin.active .cin-play { visibility: hidden; }
.cin-ui { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.hero-cin.active .cin-ui { opacity: 1; transform: none; pointer-events: auto; }
.hero-cin .yt-cover iframe { pointer-events: none; }
.hero-cin.active .cin-copy, .hero-cin.active .cin-play { transition: none; }
.cin-copy, .cin-play { will-change: opacity, transform; }
.cin-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.9) 78%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.cin-play { top: 44%; }
.cin-play span { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.cin-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 max(24px, calc((100vw - 1240px) / 2)) 64px; }
.cin-copy .eyebrow { font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cin-copy h1 { margin-top: 18px; max-width: none; font-size: clamp(34px, 4.7vw, 72px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; text-align: left; white-space: nowrap; }
.cin-copy h1 em { font-style: normal; color: var(--gold); display: block; }
.cin-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cin-more svg { width: 18px; height: 18px; animation: bob 2.2s ease-in-out infinite; }
.cin-more-sec { background: var(--ink); color: #fff; padding: 96px 16px 100px; text-align: center; }
.cin-more-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
/* Client logo grid under the hero film: white monochrome logos */
.hero-logos { width: 100%; max-width: 1170px; margin: 0 auto; --cell: 112px; --cols: 4; --line: rgba(255,255,255,.09); }
.hero-logos-eye { color: rgba(255,255,255,.55); margin-bottom: 28px; }
.hero-logos-frame { padding: 0 32px; }
/* hairline grid that stops at its edges: the grid draws the top and left rules, each cell its right and bottom */
.hero-logos-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: var(--cell); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hero-logo { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; text-decoration: none; outline: none; }
.hl-panel { position: absolute; inset: 0; background: #fff; opacity: 0; transform: scale(.94); transition: opacity .22s var(--ease-out), transform .32s var(--ease-spring); }
.hl-logo { position: relative; display: grid; place-items: center; height: 28px; transition: transform .32s var(--ease-spring); }
.hl-logo img { grid-area: 1 / 1; height: 26px; width: auto; max-width: 140px; object-fit: contain; transition: opacity .2s var(--ease-out); }
.hl-logo .mono { filter: brightness(0) invert(1); opacity: .6; }
.hl-logo .color { opacity: 0; }
.hl-desc { position: absolute; left: 14px; right: 14px; bottom: 14px; font-size: 12px; line-height: 16px; color: #3a3a3a; opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease-out) .06s, transform .32s var(--ease-spring) .06s; }
.hero-logo:hover .hl-panel, .hero-logo:focus .hl-panel { opacity: 1; transform: none; }
.hero-logo:hover .hl-logo, .hero-logo:focus .hl-logo { transform: translateY(-14px); }
.hero-logo:hover .mono, .hero-logo:focus .mono { opacity: 0; }
.hero-logo:hover .color, .hero-logo:focus .color { opacity: 1; }
.hero-logo:hover .hl-desc, .hero-logo:focus .hl-desc { opacity: 1; transform: none; }
@media (max-width: 760px) { .hero-logos { --cell: 96px; --cols: 2; } .hero-logos-frame { padding-left: 12px; padding-right: 12px; } .hl-logo img { height: 22px; max-width: 110px; } .hl-desc { font-size: 11px; line-height: 15px; left: 10px; right: 10px; bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .hl-panel, .hl-logo, .hl-desc { transition: none; } }
.cin-more-inner .hero-sub { margin-top: 88px; }
.cin-more-inner .cta-row { margin-top: 72px; }
.hero-cinema .nav.has-hero .nav-right .cta-audit { opacity: 1; transform: none; pointer-events: auto; filter: none; }
.hero-cinema .nav { opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), background .35s ease, color .35s ease; }
.hero-cinema.cin-done .nav { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 810px) {
  .cin-copy { padding: 0 20px 48px; } .cin-copy h1 { font-size: 34px; white-space: normal; }
  .hero-cinema .hero-cin { height: 190vh; } .cin-ui { padding: 16px; } .cin-ui .hype-sound span { display: none; }
  .cin-play { top: 40%; width: 76px; height: 76px; } .cin-play svg { width: 32px; height: 32px; }
  .big-play { width: 72px; height: 72px; } .big-play svg { width: 30px; height: 30px; }
  .cin-more-sec { padding: 64px 16px 64px; } .cin-more-inner .hero-sub { margin-top: 64px; }
  .yt-close { top: 12px; right: 12px; }
}

.pop-mission { display: block; margin-top: 2px; padding: 10px 12px; border-radius: 10px; background: var(--beige); font-size: 12px; line-height: 18px; color: #5a4630; font-weight: 500; }

/* ───────── tweaks toolbar (top, outside the page) ───────── */
:root { --twbar: 0px; }
html.tweaks-on { --twbar: 44px; }
html.tweaks-on .nav { position: sticky; top: 0; margin-bottom: calc(-1 * var(--nav-h)); }
.symptoms .pin, .chat .pin, .ob-problem .pin, .hype-pin .hype, .stage .pin { top: var(--twbar); }
.twbar { position: relative; z-index: 1001; min-height: 44px; background: #111; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.35); font-size: 12px; transition: transform .25s var(--ease-out); }
.twbar-in { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 8px 16px; white-space: nowrap; }
.twbar b { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); }
.twbar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: rgba(255,255,255,.85); }
.twbar input { accent-color: var(--yellow-1); }
.twbar a { color: var(--gold); }
.twbar small { color: rgba(255,255,255,.45); font-size: 11px; }
.twbar code { color: rgba(255,255,255,.75); font-size: 11px; }
.twbar .tw-note { position: relative; }
.twbar .tw-note summary { cursor: pointer; color: var(--yellow-1); font-weight: 600; list-style: none; }
.twbar .tw-note summary::-webkit-details-marker { display: none; }
.twbar .tw-note p { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 360px; padding: 12px 14px; border-radius: 10px; background: #1c1c1e; color: rgba(255,255,255,.85); font-size: 12px; line-height: 17px; white-space: normal; box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
.twbar .tw-note p b { color: #fff; font-size: 12px; letter-spacing: 0; text-transform: none; }
.tweaks { display: none; }
@media (max-width: 810px) { .twbar-in { gap: 8px 12px; } .twbar small { display: none; } }

/* modal: skip + sound */
.yt-skip { position: absolute; top: 20px; right: 84px; height: 44px; padding: 0 14px 0 18px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: #fff; font-size: 14px; font-weight: 600; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .2s, transform .3s var(--ease-spring); }
.yt-skip svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.yt-skip:hover { background: rgba(255,255,255,.22); transform: translateX(2px); }
.yt-sound { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); height: 48px; padding: 0 20px 0 14px; border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(var(--yellow-1), var(--yellow-2)); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); animation: soundNudge 1.6s var(--ease-in-out) infinite; }
.yt-sound svg { width: 22px; height: 22px; }
.yt-sound[aria-pressed="true"] { animation: none; background: rgba(255,255,255,.14); }
.yt-sound[aria-pressed="true"] svg path:last-child { display: none; }
@media (max-width: 810px) { .yt-skip { right: 68px; top: 12px; height: 40px; font-size: 13px; } .yt-sound { bottom: 16px; } }

/* ───────── audit CTA morph (button → card) ───────── */
.morph-card.portal { --r: 24px; position: fixed; z-index: 9999; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 10px; border-radius: var(--r); background: linear-gradient(var(--yellow-1), var(--yellow-2)); color: #000; box-shadow: var(--shadow-float), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; transform: none !important; filter: none !important; text-decoration: none;
  transition: width .38s var(--ease-out), height .38s var(--ease-out), border-radius .38s var(--ease-out), background .22s var(--ease-out), box-shadow .22s var(--ease-out), opacity .12s var(--ease-out), visibility 0s linear .12s; }
.morph-card.portal.show { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.morph-card.portal.grown { --r: 16px; background: #fff; }
/* audit card: at pill size it is invisible and sits on the (still visible) button, so the button itself appears to grow */
.audit-pop.portal { background: transparent; box-shadow: none; }
.audit-pop.portal.grown { background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px rgba(0,0,0,.06); }
.jim-card.portal { background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), var(--shadow-float); }
.jim-card.portal.grown { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.morph-card.portal > * { opacity: 0; transition: opacity .2s var(--ease-out); }
.morph-card.portal.grown > * { opacity: 1; transition-delay: .1s; }
.morph-card.portal.up { transform-origin: bottom left; }
.morph-card.portal::before { display: none; }
[data-morph].morphed .morph-btn { opacity: 0; }
[data-morph].morphed .audit-btn { opacity: 1; } /* audit: the button stays put under the (initially transparent) growing card */
.audit-btn { transition: opacity .15s var(--ease-out), transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); }
.pop-go { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px -8px -6px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(var(--yellow-1), var(--yellow-2)); color: #fff; font-size: 15px; font-weight: 600; }
.pop-go .vid-ico { width: 20px; height: 20px; }
.pop-go .arr { transition: transform .25s var(--ease-spring); }
.audit-pop:hover .pop-go .arr { transform: translateX(4px); }
.audit-pop:hover .pop-go { filter: brightness(1.05); }
.pop-body { cursor: pointer; }
@media (hover: none), (max-width: 810px) { .morph-card.portal { display: none; } }

/* ───────── Jim card ───────── */
.btn-sec.morph-btn { transition: opacity .15s var(--ease-out), background .2s, transform .2s; }
.jim-card { display: block; color: #000; text-decoration: none; }
.jim-video { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #111; }
.jim-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jim-ph { position: absolute; inset: 0; display: none; place-items: center; background: radial-gradient(60% 70% at 50% 40%, #3a3a3a 0%, #121212 100%); }
.jim-video.no-video .jim-ph { display: grid; }
.jim-ph img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.jim-ph em { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; color: rgba(255,255,255,.55); padding: 0 12px; }
.jim-ph code { color: rgba(255,255,255,.8); font-family: ui-monospace, Menlo, monospace; }
.jim-tag { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 100px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.jim-sound { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; flex: none; transition: transform .3s var(--ease-spring), background .2s; }
.jim-sound svg { width: 18px; height: 18px; }
.jim-sound:hover { transform: scale(1.08); background: rgba(0,0,0,.8); }
.jim-sound[aria-pressed="true"] .mute { display: none; } .jim-sound[aria-pressed="false"] .wave { display: none; }
.jim-sound[aria-pressed="false"] { box-shadow: 0 0 0 1.5px var(--yellow-1); }
.jim-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px 6px; }
.jim-body > b { font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: -0.2px; }
.jim-body > span:not(.pop-go) { font-size: 13px; line-height: 19px; color: #444; }
.jim-go { margin-top: 8px; background: rgba(0,0,0,.06); color: #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.jim-card:hover .jim-go { background: rgba(0,0,0,.1); filter: none; }

/* jim card player bar */
.jim-video { cursor: pointer; }
.jim-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); cursor: default; }
.jim-play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; flex: none; transition: transform .3s var(--ease-spring); }
.jim-play:hover { transform: scale(1.08); }
.jim-play svg { width: 16px; height: 16px; }
.jim-play[aria-pressed="true"] .ic-play { display: none; } .jim-play[aria-pressed="false"] .ic-pause { display: none; }
.jim-time { font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); flex: none; min-width: 28px; text-align: center; }
.jim-time em { font-style: normal; }
.jim-scrub { position: relative; flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.jim-scrub::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.jim-prog { position: absolute; left: 0; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--yellow-1), var(--yellow-2)); width: 0; }
.jim-knob { position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transform: scale(.8); transition: transform .2s var(--ease-spring); }
.jim-scrub:hover .jim-knob, .jim-scrub:focus-visible .jim-knob { transform: scale(1.1); }
.jim-scrub:focus-visible { outline: none; } .jim-scrub:focus-visible::before { box-shadow: 0 0 0 2px rgba(250,180,41,.5); }

/* ───────── cinema player window (uncropped) ───────── */
.cin-window { position: absolute; z-index: 5; left: 50%; top: 50%; width: calc(100vw - 48px); max-width: calc((100vh - 48px - 56px) * 16 / 9); transform: translate(-50%, -50%) translateY(calc((1 - var(--p)) * 110vh)); pointer-events: none; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 140px -30px rgba(0,0,0,.9); will-change: transform, opacity; }
.hero-cin.active .cin-window { pointer-events: auto; }
.cin-screen { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 48px - 56px); background: #000; display: grid; place-items: center; cursor: pointer; }
.cin-film { width: 100%; height: 100%; object-fit: contain; display: block; }
.cin-ph { position: absolute; inset: 0; display: none; place-items: center; background: radial-gradient(60% 70% at 50% 45%, #2a2a2a 0%, #0a0a0a 100%); }
.hero-cin.no-film .cin-ph { display: grid; }
.cin-ph .play { width: 80px; height: 56px; }
.vbar { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px; background: #0d0d0d; color: #fff; }
.v-play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; flex: none; transition: transform .3s var(--ease-spring); }
.v-play:hover { transform: scale(1.08); } .v-play svg { width: 18px; height: 18px; }
.v-play[aria-pressed="true"] .ic-play { display: none; } .v-play[aria-pressed="false"] .ic-pause { display: none; }
.v-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); min-width: 34px; text-align: center; } .v-time em { font-style: normal; }
.v-scrub { position: relative; flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.v-scrub::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.v-prog { position: absolute; left: 0; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--yellow-1), var(--yellow-2)); width: 0; }
.v-knob { position: absolute; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transform: scale(.8); transition: transform .2s var(--ease-spring); }
.v-scrub:hover .v-knob, .v-scrub:focus-visible .v-knob { transform: scale(1.1); } .v-scrub:focus-visible { outline: none; }
.v-sound, .v-full { height: 34px; padding: 0 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600; flex: none; transition: background .2s; }
.v-sound:hover, .v-full:hover { background: rgba(255,255,255,.2); }
.v-sound svg, .v-full svg { width: 18px; height: 18px; }
.v-sound[aria-pressed="true"] .mute { display: none; } .v-sound[aria-pressed="false"] .wave { display: none; }
.v-sound[aria-pressed="false"] { box-shadow: 0 0 0 1.5px var(--yellow-1); }
.v-full { padding: 0 10px; }
.cin-ui { justify-content: flex-end; background: none; }
@media (max-width: 810px) { .cin-window { width: calc(100vw - 24px); max-width: calc((100vh - 24px - 56px) * 16 / 9); border-radius: 12px; } .vbar { padding: 8px 10px; gap: 8px; } .v-sound span { display: none; } .v-time { min-width: 30px; } }

/* volume slider (both player bars) */
.v-vol { position: relative; width: 72px; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; flex: none; margin-left: -4px; }
.v-vol::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.v-vol-fill { position: absolute; left: 0; height: 4px; border-radius: 2px; background: #fff; width: 0; }
.v-vol-knob { position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transform: scale(.8); transition: transform .2s var(--ease-spring); }
.v-vol:hover .v-vol-knob, .v-vol:focus-visible .v-vol-knob { transform: scale(1.1); } .v-vol:focus-visible { outline: none; }
.jim-bar .v-vol { width: 56px; }
@media (max-width: 810px) { .v-vol { width: 52px; } .jim-bar .v-vol { display: none; } }

/* ───────── Solution on the light wrap (homepage): the dark section's colours flipped; /home-new/ keeps the dark one ───────── */
.light-wrap .solution { background: transparent; color: #000; padding-bottom: 40px; } /* the logo ticker follows right under the plans */
.light-wrap .solution-head { max-width: 760px; margin: 0 auto; text-align: center; }
.light-wrap .solution-head .eyebrow { color: #000; }
.light-wrap .plan .eyebrow { color: #000; } /* .solution .eyebrow would paint them white */
.light-wrap .solution h2 em { color: var(--brown); }
.light-wrap .solution-pitch { color: #333; }
.light-wrap .solution-pitch b { color: #000; }
.light-wrap .face { width: 45px; height: 45px; margin: 0 -6px; } /* two thirds of the dark layout's 68px */
.light-wrap .face img { box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px rgba(0,0,0,.12); }
.light-wrap .face:hover img, .light-wrap .face:focus-visible img { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--yellow-1); }
.light-wrap .face-tag { background: #000; color: #fff; }
.light-wrap .team-row { margin-top: 24px; } /* faces sit right under the intro */
.light-wrap .sol-usps .usp { color: #000; text-align: center; }
.light-wrap .sol-usps .usp svg { color: rgba(0,0,0,.45); }
.light-wrap .sol-testi { background: #fff; box-shadow: var(--shadow-card); }
.light-wrap .testi-note { color: var(--brown); }
.light-wrap .sol-quote p:not(.testi-note) { color: #1a1a1a; }
.light-wrap .sol-quote mark { color: #000; }
.light-wrap .sol-quote footer b { color: #000; }
.light-wrap .sol-quote footer span { color: #666; }
/* plans inside the solution section, logo ticker right after */
.sol-pricing { margin-top: 64px; text-align: center; }
.light-wrap .solution + .clients { padding-top: 32px; padding-bottom: 72px; }
.light-wrap .clients-eye { color: #000; } /* home-vibe paints it white for the dark layout */
@media (max-width: 810px) { .light-wrap .face { width: 37px; height: 37px; } .light-wrap .solution { padding-bottom: 28px; } .sol-pricing { margin-top: 48px; } .light-wrap .solution + .clients { padding-bottom: 48px; } }
/* ───────── Motion layer (transitions.dev-inspired) ─────────
   Tokens, hover/press feel, blur-rise reveals, staggered grids,
   origin-aware menus, sliding segmented control, number pop-in, 3D tilt. */

/* reveal: rise + soft blur, children stagger */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); will-change: opacity, transform, filter; }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.stagger > * { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.stagger.in > * { opacity: 1; transform: none; filter: blur(0); }
.stagger.in > .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* cards: lift + shadow bloom */
.fix-card, .plan, .cmp3 .card, .fit, .symptom-s, .tile, .ep .img, .team { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.fix-card:hover, .cmp3 .card:hover, .fit:hover, .symptom-s:hover { transform: translateY(-4px); box-shadow: 0 1px 3px rgba(195,147,111,.15), 0 24px 48px -24px rgba(0,0,0,.25); }
.plan:hover { transform: translateY(-4px); } /* pricing cards: only the lift, nothing else changes */
.proof-pill { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.fix-card:hover .proof-pill { transform: translateX(3px); }
.tile .hov { filter: blur(6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), filter .3s var(--ease-out); }
.tile:hover .hov { filter: blur(0); }

/* origin-aware dropdown: scale + blur from the label */
.nav-dd-menu { transform-origin: top left; transform: translate(0, 4px) scale(.96); filter: blur(6px); transition: opacity .22s var(--ease-out), transform .28s var(--ease-spring), filter .22s var(--ease-out), visibility 0s linear .3s; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu { transform: translate(0, 0) scale(1); filter: blur(0); transition-delay: 0s, 0s, 0s, 0s; }
.nav-dd-menu a { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-dd-menu a:hover { transform: translateX(2px); }

/* tooltip: delayed in, travels, instant out */

/* nav CTA appears with blur */
.nav.has-hero .nav-right .cta-audit { filter: blur(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-spring), filter .35s var(--ease-out); }
.nav.has-hero.cta-on .nav-right .cta-audit { filter: blur(0); }

/* segmented control: pill indicator slides */
.ba-toggle { position: relative; isolation: isolate; }
.ba-toggle::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 100px; background: #000; transform: translateX(calc(var(--x, 0) * 100%)); transition: transform .35s var(--ease-spring); }
.ba-toggle button { background: transparent !important; transition: color .2s var(--ease-out); }
.ba-toggle button[aria-selected="true"] { background: transparent !important; }

/* number pop-in: digits rise with blur and stagger */
.num-pop { display: inline-block; }
.num-pop .ch { display: inline-block; animation: numIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes numIn { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* avatar group: distance-falloff lift */
.avatars img { transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out); }
.avatars img:hover { transform: translateY(-8px) scale(1.12); z-index: 2; position: relative; }
.avatars img:hover + img, .avatars img:has(+ img:hover) { transform: translateY(-4px) scale(1.04); }

/* 3D tilt surfaces */
[data-tilt] { transform-style: preserve-3d; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); will-change: transform; }
[data-tilt].tilting { transition: transform .08s linear; }
[data-tilt] .glare { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.18), transparent 70%); opacity: 0; transition: opacity .4s var(--ease-out); }
[data-tilt]:hover .glare { opacity: 1; }

/* hero gold phrase: masked shimmer sweep */
.hero-v2 h1 .g { background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 42%, #fff8e6 50%, var(--gold) 58%, var(--gold) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wordIn .7s var(--ease-out) forwards, shimmerOnce 2.2s var(--ease-in-out) 1.6s 1; }
.hero-v2 h1 .g.w { animation-delay: calc(var(--i) * 70ms + 150ms), 1.6s; }
@keyframes shimmerOnce { from { background-position: 120% 0; } to { background-position: -140% 0; } }

/* mascot idle */
.mascot { animation: mascotIdle 5s var(--ease-in-out) infinite; transform-origin: 50% 100%; }
@keyframes mascotIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }

/* symptom / stat emoji pop */
.symptom.on .emoji { animation: emojiPop .5s var(--ease-spring) both; }
@keyframes emojiPop { from { transform: scale(.6) rotate(-8deg); } to { transform: scale(1) rotate(0); } }

/* calc inputs focus */
.calc input { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.calc input:focus { box-shadow: 0 0 0 4px rgba(250,180,41,.22); transform: translateY(-1px); }
.roi-verdict { transition: background .3s var(--ease-out), border-color .3s var(--ease-out); }

/* win bars: lights glow on hover */
.win-bar i { transition: filter .3s var(--ease-out); }
.win:hover .win-bar i { filter: brightness(1.25) saturate(1.2); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .num-pop .ch { animation: none; }
  [data-tilt] { transform: none !important; }
  .hero-v2 h1 .g { animation: none; color: var(--gold); background: none; }
  .mascot { animation: none; }
}
/* ───────── Light theme (tweak: html.theme-light) ─────────
   Palette from brand guidelines: pale yellow #FEEAAE hero, cream #F7F3EE, sand #EFE6D8,
   slate #3B3B3B / charcoal #222, orange #CD8800, gold gradient, teal/blue/purple/mint accents. */
.theme-light {
  --ink: #222222; --cream: #F7F3EE; --cream-2: #FBF8F3; --beige: #F1E8DA; --tan: #E0D2BC; --brown: #CD8800;
  --gold: #CD8800; --muted: #6f6a63; --footer: #222222; --pale: #FEEAAE; --slate: #3B3B3B;
  --teal-1: #9ADCE6; --teal-2: #1AA8C0; --blue-1: #7FD2F2; --blue-2: #2D9FD9; --purple-1: #E3B6F5; --purple-2: #B96AE0; --mint-1: #A8E8CC; --mint-2: #4FBF8E;
}
.theme-light body { background: var(--cream); color: var(--ink); }

/* nav */
.theme-light .nav { color: var(--ink); background: rgba(254,234,174,.78); }
.theme-light .nav .nav-logo img { filter: invert(1); }
.theme-light .nav-links > a, .theme-light .nav-dd-btn { color: #5a554c; }
.theme-light .nav-links > a:hover, .theme-light .nav-dd:hover .nav-dd-btn, .theme-light .nav-dd.open .nav-dd-btn { color: var(--ink); }
.theme-light .nav-burger span { background: var(--ink); }
.theme-light .nav.light { background: rgba(247,243,238,.82); }
.theme-light .nav-links { background: transparent; }
@media (max-width: 1060px) { .theme-light .nav-links { background: rgba(254,234,174,.97); } .theme-light .menu-only { color: var(--ink) !important; } .theme-light .nav-dd-btn { color: #5a554c; } .theme-light .nav-dd-menu a { color: #5a554c; } }

/* hero: pale yellow + dotted grid */
.theme-light .hero-v2 { background: var(--pale); color: var(--ink); }
.theme-light .hero-bg { background-image: radial-gradient(rgba(34,34,34,.14) 1px, transparent 1.2px); background-size: 22px 22px; }
.theme-light .hero-bg .blob, .theme-light .hero-bg .grain, .theme-light .hero-bgvid { display: none; }
.theme-light .hero-v2 h1 { color: var(--ink); }
.theme-light .hero-v2 h1 .g { background: linear-gradient(100deg, #CD8800 0%, #CD8800 42%, #e8a62a 50%, #CD8800 58%, #CD8800 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-light .hero-sub { color: #4a4538; }
.theme-light .hero-sub strong { color: #CD8800; }
.theme-light .usp { color: var(--ink); } .theme-light .usp svg { color: #CD8800; }
.theme-light .avatars img { box-shadow: 0 0 0 2px var(--pale), 0 0 0 3px rgba(34,34,34,.25); }
.theme-light .hype-win { box-shadow: 0 0 0 1px rgba(34,34,34,.08), 0 40px 100px -30px rgba(34,34,34,.35); }
.theme-light .btn-sec { color: var(--ink); background: rgba(34,34,34,.08); }
.theme-light .btn-sec:hover { background: rgba(34,34,34,.14); }

/* problem: slate band, like the "Core Building Blocks" section */
.theme-light .ob-problem { background: var(--slate); }
.theme-light .reveal-inner .eyebrow { color: rgba(255,255,255,.6); }
.theme-light .reveal-inner h2 .wd, .theme-light .reveal-inner b .wd { color: rgb(calc(120 + 134 * var(--t)), calc(120 + 110 * var(--t)), calc(120 + 54 * var(--t))); }
.theme-light .reveal-inner p .wd { color: rgb(calc(120 + 135 * var(--t)), calc(120 + 135 * var(--t)), calc(120 + 135 * var(--t))); }

/* symptoms: cream, dark text */
.theme-light .symptoms, .theme-light .symptoms-static { background: var(--cream); color: var(--ink); }
.theme-light .symptoms h2 .wd { color: rgb(calc(205 - 171 * var(--t)), calc(195 - 161 * var(--t)), calc(180 - 146 * var(--t))); }
.theme-light .symptoms h2 u .wd { color: rgb(calc(205 - 0 * var(--t)), calc(195 - 59 * var(--t)), calc(180 - 180 * var(--t))); }
.theme-light .symptom, .theme-light .symptom-s { background: #fff; box-shadow: 0 1px 3px rgba(120,90,40,.12), inset 0 0 0 1px var(--tan); }
.theme-light .symptom p, .theme-light .symptom-s p { color: #4a4538; }
.theme-light .symptom b, .theme-light .symptom-s b { color: var(--ink); background: linear-gradient(transparent 55%, rgba(254,234,174,.9) 55%); }
.theme-light .symptom.on { box-shadow: inset 0 0 0 2px #CD8800; }

/* testimonial: cream with gold headline */
.theme-light .testi { background: linear-gradient(180deg, var(--cream) 0%, var(--beige) 100%); color: var(--ink); }
.theme-light .testi h2 { color: #CD8800; }
.theme-light .testi-card { box-shadow: 0 1px 3px rgba(120,90,40,.12), 0 30px 60px -40px rgba(34,34,34,.3); }
.theme-light .testi-photo { background: linear-gradient(160deg, var(--purple-1) 0%, var(--purple-2) 100%); }
.theme-light .testi-quote mark { background: linear-gradient(transparent 8%, rgba(254,234,174,1) 8%, rgba(254,234,174,1) 92%, transparent 92%); }

/* logos + chat */
.theme-light .clients { background: var(--cream-2); }
.theme-light .chat { background: var(--slate); }
.theme-light .bubble { background: #4a4a4a; }

/* playbook: white cards on cream, colored viz accents */
.theme-light .light-wrap, .theme-light .fix { background: var(--cream); }
.theme-light .pb-mindset { background: var(--ink); }
.theme-light .fix-card.hi { box-shadow: 0 0 0 2px #CD8800, 0 10px 30px -15px rgba(34,34,34,.2); }
.theme-light .fix-card .viz.doc { background: linear-gradient(160deg, #fff 0%, var(--beige) 100%); }
.theme-light .fix-card .viz.funnel .fbar.hi { background: linear-gradient(90deg, var(--teal-2), var(--blue-2)); }
.theme-light .fix-card .viz.check .c-i.done::before { background: var(--mint-2); }
.theme-light .fix-card .viz.personas .p-i { background: linear-gradient(160deg, #fff 0%, #f3ecff 100%); }
.theme-light .fix-card .viz.actions .a-i.hi { box-shadow: inset 0 0 0 2px var(--purple-2); }
.theme-light .fix-card .viz.cadence .cd i::before { background: repeating-linear-gradient(90deg, var(--teal-2) 0 10px, transparent 10px 14px); }
.theme-light .stat-card { background: linear-gradient(160deg, var(--teal-1), var(--teal-2)); color: var(--ink); }
.theme-light .stat-card b { color: var(--ink); }

/* process + pricing */
.theme-light .process { background: var(--slate); }
.theme-light .roi { background: var(--ink); }
.theme-light .audit { background: var(--ink); }
.theme-light .plan.hi { box-shadow: 0 0 0 2px #CD8800, 0 10px 30px -10px rgba(34,34,34,.15); }
.theme-light .guarantee { background: var(--pale); }
.theme-light .guarantee svg { fill: #CD8800; }

/* faq + footer stay dark (untouched by request), but slate instead of pure black for cohesion */
.theme-light .ob-faq { background: var(--slate); }
.theme-light .footer { background: var(--ink); }

/* tweaks panel label */
.theme-light .tweaks { background: var(--ink); }