/* ============================================================================
   TURNKEY — site.css
   No @import. No network font. No external URL of any kind.
   The :root block below is mirrored verbatim in /TOKENS.css (shared contract).
   ========================================================================== */

/* ============================================================================
   TURNKEY — DEFINITIVE DESIGN TOKENS  (v2, "BUILT")
   ----------------------------------------------------------------------------
   Authoritative palette for turnkey.industries. This exact :root block is
   mirrored verbatim at the top of /css/site.css. Any page with its own inline
   <style> (book/, stacks/*, 404) MUST paste this block and use only these
   custom properties. Zero hardcoded hexes anywhere else.

   Brand position: competent, plain-spoken, built, durable, quietly premium.
   A well-made tool, not an app. LOW CHROMA IS THE RULE.
   Exactly ONE accent (amber/gold). There is no second yellow.
   ========================================================================== */
:root {
  /* --- Canvas: warm bone / cream. The best thing in the old system. Kept. --- */
  --bg:            #f3f0ea;  /* page canvas                                   */
  --bg-warm:       #eae5da;  /* recessed panels, guarantee blocks             */
  --bg-deep:       #ded7c8;  /* deepest sand: dividers, inert chart track     */
  --surface:       #fbfaf7;  /* raised cards (replaces pure #fff)             */
  --surface-2:     #f7f5f0;  /* secondary raised surface / input fills        */

  /* --- Ink: near-black type + structure ------------------------------------ */
  --ink:           #0f0f0f;  /* primary type, borders, primary button fill    */
  --ink-soft:      #55524b;  /* secondary type. 7.0:1 on --bg. AA everywhere. */
  --mute:          #55524b;  /* alias, legacy references                      */
  --black:         #141414;  /* solid black-tile fill                         */
  --line:          #cdc6b8;  /* hairline rules on canvas                      */
  --line-strong:   #a9a294;  /* connector hairlines, axis lines               */

  /* --- THE accent. Amber/gold. The only accent in the system. -------------- */
  --accent:        #c08416;  /* THE amber. Nav pill, rail dot, emphasis.      */
  --accent-light:  #e0ab4e;  /* top of an amber gradient / hover lift         */
  --accent-deep:   #8d5c07;  /* amber italic text on cream: 4.6:1. AA.        */
  --accent-tint:   #f6e6c4;  /* faintest amber wash, chart tracks             */
  /* Legacy aliases -> the SAME amber. No second yellow exists. */
  --yellow:        #c08416;
  --yellow-light:  #e0ab4e;
  --yellow-deep:   #8d5c07;

  /* --- Support tone A: desaturated moss/olive (was candy mint) ------------- */
  --moss:          #9aa478;
  --moss-light:    #c3c9ab;
  --moss-deep:     #616b45;
  --mint:          #9aa478;  /* legacy alias -> moss */
  --mint-light:    #c3c9ab;
  --mint-deep:     #616b45;

  /* --- Support tone B: warm clay / terracotta (was lavender) --------------- */
  --clay:          #b98263;
  --clay-light:    #ddb79e;
  --clay-deep:     #8a5638;
  --purple:        #b98263;  /* legacy alias -> clay */
  --purple-light:  #ddb79e;
  --purple-deep:   #8a5638;

  /* --- Support tone C: deep slate / graphite ------------------------------- */
  --slate:         #3c4442;
  --slate-light:   #6d7472;
  --slate-deep:    #232928;

  /* --- Data-viz ramp. A chart is branding: same set, nothing new. ---------- */
  --viz-1:         #c08416;  /* accent amber   — the reclaimed / Turnkey side */
  --viz-2:         #3c4442;  /* graphite       — the cost / today side        */
  --viz-3:         #9aa478;  /* moss           — third series                 */
  --viz-4:         #b98263;  /* clay           — fourth series                */
  --viz-track:     #ded7c8;  /* inert bar track                              */
  --viz-axis:      #a9a294;  /* axis + gridline                              */

  /* --- Feedback ------------------------------------------------------------ */
  --danger:        #8f2f22;
  --ok:            #616b45;

  /* --- Typography: 100% system stacks. NO network font requests. ----------- */
  --display: "Inter", "Inter var", "Helvetica Neue", Helvetica, "Segoe UI",
             Roboto, Arial, system-ui, sans-serif;
  --sans:    "Inter", "Helvetica Neue", Helvetica, "Segoe UI",
             Roboto, Arial, system-ui, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", "Courier New", monospace;

  /* --- Geometry: one radius scale, one button height, one container -------- */
  --r-sm:  8px;
  --r-md:  12px;   /* THE button radius. All buttons. No exceptions.          */
  --r-lg:  18px;
  --r-xl:  24px;   /* cards                                                   */
  --btn-h: 46px;   /* THE button height. Primary and secondary are identical. */
  --btn-h-sm: 40px;/* nav-scale button height                                 */
  --gutter: 40px;  /* THE shared container gutter: nav and panel content      */
  --maxw:  1160px; /* THE shared container measure                            */
  --navh:  76px;
  --footh: 24px;
  --railw: 74px;
  --rail-gutter: 22px;
}

/* The ONE horizontal inset used by nav and every panel. Defect 5. */
:root { --edge: calc(var(--railw) + var(--rail-gutter)); }

/* ---------------------------------------------------------------- base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Single-page scroll: the page must be free to grow past the viewport.
   height:100% + body.decked{overflow:hidden} were the deck's scroll lock. */
html { height: auto; scroll-behavior: smooth; }
body { min-height: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
body.decked { overflow-x: hidden; overflow-y: auto; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.075;
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: multiply;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------- grainient bg ------- */
/* WebGL animated background. Sits under everything, never takes a click.
   The gradient below is the no-WebGL / reduced-motion fallback and must
   look deliberate on its own. */
.grainient {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 58%),
    radial-gradient(circle at 6% 88%, color-mix(in srgb, var(--clay) 14%, transparent) 0%, transparent 58%),
    radial-gradient(circle at 34% 46%, color-mix(in srgb, var(--moss) 12%, transparent) 0%, transparent 60%),
    var(--bg);
}
.grainient canvas { display: block; width: 100%; height: 100%; }

/* Ambient wash — derived from tokens, no literal colours. Low chroma. */
.ambient-1, .aurora .a {
  position: fixed; top: 8%; right: -12%; width: 620px; height: 620px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 62%);
  border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
}
.ambient-2, .aurora .b {
  position: fixed; bottom: -12%; left: -6%; width: 520px; height: 520px;
  background: radial-gradient(circle, color-mix(in srgb, var(--clay) 14%, transparent) 0%, transparent 62%);
  border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0;
}
.aurora .c {
  position: fixed; top: 42%; left: 28%; width: 400px; height: 400px;
  background: radial-gradient(circle, color-mix(in srgb, var(--moss) 13%, transparent) 0%, transparent 62%);
  border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0;
}

.page { position: relative; z-index: 2; }

/* ----------------------------------------------------------------- nav ---- */
/* Defect 5: nav and panel content share ONE container + ONE inset. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  height: var(--navh);
  padding: 0 var(--edge);
  background: transparent;
}
.nav-in {
  width: min(var(--maxw), 100%);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.logo span, .logo-cube { display: inline-flex; }
.logo-cube { width: 30px; height: 30px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-links a, .nav-links button {
  background: none; border: 0; color: var(--ink-soft);
  font: 500 14px/1 var(--sans); cursor: pointer; text-decoration: none; padding: 0;
}
.nav-links a:hover, .nav-links button:hover { color: var(--ink); }
.nav-toggle {
  display: none; background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--r-md);
  height: var(--btn-h-sm); min-width: var(--btn-h-sm); padding: 0 12px;
  font-size: 16px; line-height: 1; cursor: pointer;
}

/* ================================ BUTTON SYSTEM =============================
   Defect 1 + 9. ONE height, ONE radius, ONE padding rhythm.
   Only the FILL differs.
     .cta-btn / .btn-solid / .btn-orange  -> PRIMARY: solid ink, amber arrow.
     .btn                                 -> SECONDARY: outlined, same box.
   The nav CTA uses the same primary treatment at the small height.
   ========================================================================== */
.btn, .cta-btn, .btn-solid, .btn-orange, .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 22px;
  font: 600 14px/1 var(--sans);
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  border: 1.5px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* SECONDARY */
.btn {
  color: var(--ink);
  background: transparent;
}
.btn:hover { background: var(--ink); color: var(--bg); }

/* PRIMARY — the single primary treatment, used sitewide for "Book a call". */
.cta-btn, .btn-solid, .btn-orange, .btn.btn-solid {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.cta-btn:hover, .btn-solid:hover, .btn-orange:hover, .btn.btn-solid:hover {
  color: var(--bg);
  background: var(--slate-deep);
  border-color: var(--slate-deep);
}
.cta-arrow {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--ink); flex: 0 0 auto;
}
/* Primary sitting ON an amber surface (featured tier) keeps the same box. */
.tier.featured .btn-solid, .tier.featured .cta-btn { border-color: var(--ink); }

/* Nav-scale primary: same radius, same fill, smaller height only. */
.nav-links .btn-orange, .nav-links .cta-btn {
  height: var(--btn-h-sm);
  padding: 0 18px;
  font-size: 13.5px;
}
.ask .btn-orange { height: var(--btn-h); }

.ask {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px;
}
/* Defect 4: microcopy under the CTAs — bigger, darker, real breathing room. */
.ask + .tiny.muted, .ask + .tiny { margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- deck ---- */
/* ==========================================================================
   SINGLE-PAGE SCROLL (James, 2026-08-22)
   Was: a horizontal deck of fixed, absolutely-positioned full-screen panels
   with only one visible at a time, plus a JS auto-shrink (--fit) that scaled
   content DOWN whenever it overflowed. That is why everything felt cramped:
   the layout was fighting to squeeze each section into exactly one viewport.

   Now: sections are ordinary blocks in normal document flow. They stack and
   the page scrolls. Content sets its own height, nothing is scaled down.
   ========================================================================== */
.deck { position: relative; z-index: 2; width: 100%; }

.panel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Comfortable rhythm, not a forced viewport. min-height gives each section
     presence without trapping content that needs more room. */
  min-height: min(100svh, 900px);
  padding: clamp(72px, 9vh, 128px) var(--edge);
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; filter: none; overflow: visible;
}
/* First section clears the fixed nav. */
.panel:first-of-type { padding-top: calc(var(--navh) + clamp(28px, 5vh, 64px)); }
.panel:last-of-type  { padding-bottom: clamp(96px, 12vh, 160px); }

/* Hairline between sections so the eye knows one idea ended and another began. */
.panel + .panel { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }

/* --fit is retired; never scale content down on a scrolling page. */
.inner { width: min(var(--maxw), 100%); margin-inline: auto; transform: none; }

/* Gentle reveal as each block enters. Not a page-load animation — it fires on
   scroll and each section animates once. */
.panel .st { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .panel .st {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .panel.seen .st { opacity: 1; transform: none; }
  .panel.seen .st:nth-child(2) { transition-delay: .07s; }
  .panel.seen .st:nth-child(3) { transition-delay: .14s; }
  .panel.seen .st:nth-child(4) { transition-delay: .21s; }
}

/* ---------------------------------------------------------------- rail ---- */
/* Defect 16: real gutter, and the tooltip is positioned off the BUTTON with a
   guaranteed clearance so it can never collide with the rail capsule. */
.rail {
  position: fixed; right: var(--rail-gutter); top: 50%; transform: translateY(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 9px; border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1.5px solid var(--line);
  backdrop-filter: blur(6px);
}
.rail button { position: relative; display: block; width: 24px; height: 22px; background: none; border: none; cursor: pointer; }
.rail button::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
  transition: height .3s ease, background .3s ease, border-radius .3s ease;
}
.rail button:hover::before { background: var(--ink-soft); }
.rail button[aria-current="true"]::before {
  background: var(--accent); height: 16px; border-radius: 100px;
}
.rail button span {
  position: absolute; right: calc(100% + 18px); top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--mono); color: var(--bg); background: var(--ink); padding: 6px 10px; border-radius: var(--r-sm);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.rail button:hover span, .rail button:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }

/* --------------------------------------------------------------- type ---- */
.eyebrow, .section-eyebrow { display: none; }

/* Defect 3: the struck-through "BUILD AI" was read as a rendering bug.
   Replaced with a clean, machined eyebrow. */
/* The eyebrow and the H1 are ONE typographic gesture: "Build AI" struck out,
   "Built AI." standing. They must therefore be the SAME size, same family,
   same weight, same tracking — only the colour and the strike differ.
   Any size mismatch destroys the whole idea. Keep these in lockstep. */
.eyebrow-hero {
  /* Flush-left with the H1: the amber mark hangs in the left margin instead of
     pushing the word right. A 40px indent here reads as a broken indent. */
  position: relative;
  display: flex; align-items: center; gap: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.2vw, 78px);
  letter-spacing: -0.038em;
  line-height: 0.94;
  text-transform: none;
  color: var(--ink-soft);
  margin: 0 0 2px;
}
/* The strikethrough through "Build AI" already carries the whole idea; the
   extra hanging dash only broke the flush-left edge with the H1. Hidden, not
   deleted, so the markup stays stable. */
.eyebrow-mark { display: none; }
/* Deliberate device, not a rendering bug: amber strike through the old way. */
.eyebrow-hero .struck {
  /* The native line-through on this display face renders low — it clipped the
     bowls of "u/i/d" and read as an underline rather than a strike. Draw the
     rule ourselves and pin it to the optical midpoint of the x-height. */
  text-decoration: none;
  position: relative;
  font-weight: 800;
  color: var(--ink-soft);
  opacity: .45;
}
.eyebrow-hero .struck::after {
  content: "";
  position: absolute;
  left: -0.012em; right: -0.012em;   /* a hair of overshoot = deliberate */
  top: 45%;                           /* optical centre, not the baseline */
  height: 0.055em;
  background: var(--accent);
  border-radius: 2px;
  opacity: 2.1;                       /* counters the .45 on the parent */
  pointer-events: none;
}

.hero-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: center; }
.hero-built, h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 6.2vw, 78px); letter-spacing: -0.038em; line-height: 0.94; margin: 0 0 16px;
}
.it { font-style: italic; color: var(--accent-deep); font-weight: 800; }
/* Defect 2: kill the phantom space before a terminal full stop. */
.stop { margin-left: -0.055em; letter-spacing: 0; font-style: normal; }
.hero-tag {
  font-size: clamp(17px, 1.85vw, 22px); font-weight: 600;
  max-width: 34ch; line-height: 1.38; margin: 0 0 18px;
  font-family: var(--display); letter-spacing: -0.018em; color: var(--ink);
}
/* Emphasis inside the tag line: this is the claim doing the selling —
   already built, and every department. Amber italic, same as the H1's "Built". */
.hero-tag .em { font-style: italic; font-weight: 700; color: var(--accent-deep); }
.hero-tag-2 { color: var(--ink-soft); font-weight: 500; margin-bottom: 16px; }
.hero-built { margin-bottom: 14px; }

/* Hero subtext — the plan's exact two-beat copy (1.3). ~60ch measure. */
.hero-sub {
  font-size: clamp(15px, 1.32vw, 17px);
  line-height: 1.6; color: var(--ink);
  max-width: 52ch; margin: 0 0 10px;
}
.hero-sub-2 { color: var(--ink-soft); margin-bottom: 22px; }

/* ------------------------------------------------- credibility strip ----
   Facts about how we operate. NO stock faces, NO unverifiable claims:
   plan 3.2 says stock photos read "template, small, next" to this buyer,
   and 6.4 forbids fake anything. Replace only with named, permissioned
   clients. */
.proof {
  list-style: none; margin: 26px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  /* True 3-up. flex-wrap orphaned the third item onto its own row and left a
     dead cell; a fixed 3-col grid keeps one shared top baseline. */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: start;
  max-width: 620px;   /* divider must not overhang the content column */
}
.proof-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proof-fig {
  font-family: var(--display); font-weight: 800;
  font-size: 15.5px; letter-spacing: -0.02em; color: var(--ink);
  line-height: 1.15;
}
.proof-lab { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); text-wrap: balance; }
.proof-note { margin: 14px 0 0; max-width: 620px; font-size: 12.5px; color: var(--ink-soft); }

.lede, .hero-desc { font-size: clamp(15px, 1.35vw, 17px); color: var(--ink-soft); max-width: 42ch; margin-bottom: 10px; }
.trust-split .lede { max-width: 52ch; margin-bottom: 10px; }
.muted { color: var(--ink-soft); }
.tiny { font-size: 13.5px; }

h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.1vw, 52px); letter-spacing: -0.038em; line-height: 1.04; margin-bottom: 14px;
}
h3 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }

/* -------------------------------------------------------- constellation --- */
.hero-right { display: flex; align-items: center; justify-content: center; }
/* Box ratio MUST equal the SVG viewBox ratio (600/660) or the letterboxed
   SVG stops lining up with the percentage-positioned tiles. */
.constellation { position: relative; width: 500px; max-width: 100%; aspect-ratio: 600 / 660; }
.constellation-inner { position: relative; width: 100%; height: 100%; }
.constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Defect 8: hairlines were nearly invisible on cream. Darkened + thickened. */
.constellation-lines path {
  fill: none; stroke: var(--ink); stroke-opacity: 0.9; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.5s ease forwards;
}
.constellation-lines path:nth-child(odd) { animation-delay: 0.15s; }
.constellation-lines path:nth-child(even) { animation-delay: 0.35s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Constellation geometry.
   The SVG viewBox is 600x660. Tiles are positioned as PERCENTAGES of the same
   box so tiles and connector lines stay locked together at every width.
   Each tile is centred on its node via translate(-50%,-50%) — so the numbers
   below are node centres in the 600x660 space, not top-left corners. */
.tile {
  position: absolute; z-index: 2;
  left: calc(var(--x) / 600 * 100%);
  top: calc(var(--y) / 660 * 100%);
  transform: translate(-50%, -50%);
  animation: tile-float var(--dur, 5s) ease-in-out infinite var(--delay, 0s);
}
.tile-inner {
  width: 100%; height: 100%; border-radius: 29%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.tile-icon { width: 50%; height: 50%; display: flex; }
.tile-icon svg { width: 100%; height: 100%; }
/* Sizes per the reference: hub only ~10% bigger than standard (primary, not
   dominant); circles under half a tile so they read as punctuation.
   Sized in % of the 500px box so they scale with the container. */
/* Solved geometry (2026-08-22): sizes + node centres are computed together so
   NO two tiles overlap and the cluster fits the 600x660 box with a real gutter.
   Tile widths are % of the 500px container -> viewBox units: 20.3% = 122u.
   If you change a size here you MUST re-solve the centres below, or corners
   start colliding again. */
.tile.size-main { width: 20.3%; aspect-ratio: 135 / 115; }   /* standard 122u */
.tile.size-big  { width: 22.3%; aspect-ratio: 150 / 128; }   /* hub      134u */
.tile.size-pill { width:  9.3%; aspect-ratio: 1; }           /* circle    56u */
.tile.size-pill .tile-inner { border-radius: 50%; }

.tile.mint .tile-inner, .tile.ice .tile-inner {
  background: linear-gradient(165deg, var(--moss-light), var(--moss) 60%, var(--moss-deep));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.10);
}
.tile.yellow .tile-inner, .tile.azure .tile-inner {
  background: linear-gradient(165deg, var(--accent-light), var(--accent) 60%, var(--accent-deep));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.42), inset 0 -3px 0 rgba(0,0,0,0.12), 0 10px 20px rgba(0,0,0,0.12);
}
.tile.purple .tile-inner, .tile.aqua .tile-inner {
  background: linear-gradient(165deg, var(--clay-light), var(--clay) 60%, var(--clay-deep));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.42), inset 0 -3px 0 rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.11);
}
.tile.black .tile-inner, .tile.navy .tile-inner {
  background: linear-gradient(165deg, var(--slate), var(--black) 60%, var(--slate-deep));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.14), 0 10px 20px rgba(0,0,0,0.24);
  color: var(--bg);
}

/* Node centres in the 600x660 viewBox — these MUST match the SVG path
   endpoints in the markup. Change a number here, change the matching path.

   Geometry copied from the CodePen reference:
     - mirrored quincunx, perfectly symmetric about the x=300 axis
     - FIXED row pitch (~132u) so the eye locks to a repeating baseline
     - alternate rows offset by half a tile so no vertical "aisles" open up
     - size decreases toward the perimeter: hub > standard > circles
     - gaps stay ~25% of a tile so the group reads as ONE mass, not 11 objects
   Rows:  1: 100   2: 232   3: 364   4: 496   5: 620                        */

/* row 1 — single circle on the axis */
.tile-lock   { --x: 300; --y:  64; --dur: 4s;   --float: -6px;  }
.tile-expand { --x: 160; --y: 190; --dur: 5.5s; --delay: .4s;  --float: -6px; }
.tile-chart  { --x: 440; --y: 190; --dur: 5s;   --delay: .8s;  --float: -5px;  }
.tile-cloud  { --x: 154; --y: 316; --dur: 6s;   --delay: 1.2s; --float: -7px; }
.tile-db     { --x: 300; --y: 316; --dur: 4.5s; --delay: .2s;  --float: -7px;  }
.tile-thumb  { --x: 446; --y: 316; --dur: 5.5s; --delay: .6s;  --float: -6px; }
.tile-cursor { --x: 123; --y: 442; --dur: 4s;   --delay: 1s;   --float: -5px;  }
.tile-person { --x: 230; --y: 442; --dur: 5s;   --delay: .3s;  --float: -6px;  }
.tile-globe  { --x: 370; --y: 442; --dur: 5.5s; --delay: .7s;  --float: -7px; }
/* Defect 7: was a SECOND thumbs-up. Now the distinct "hours back" clock node. */
.tile-clock  { --x: 477; --y: 442; --dur: 4.5s; --delay: .5s;  --float: -7px;  }
.tile-hex    { --x: 300; --y: 568; --dur: 6s;   --delay: .9s;  --float: -6px; }
.tile-hex .tile-inner { opacity: .55; }

/* Float must PRESERVE the -50%/-50% centring, or every tile jumps on load. */
@keyframes tile-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% + var(--float, -8px))); }
}
/* Defect 6: the orphaned four-point sparkle is gone from the markup.
   This rule stays only to guarantee it can never reappear. */
.sparkle { display: none !important; }

/* --------------------------------------------------------------- cards ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 96px var(--edge) 64px; }
.section { padding: 48px 0 8px; }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--surface); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.045);
  border: 1.5px solid var(--line);
}
.stat { padding: 20px 18px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--display); font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.04em; }
.stat span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

.grid4, .grid5, .grid3, .steps { display: grid; gap: 14px; margin-top: 8px; }
.grid4 { grid-template-columns: repeat(4, 1fr); }
.grid5 { grid-template-columns: repeat(5, 1fr); }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.steps { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  border-radius: var(--r-xl);
  padding: 22px 20px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
}
/* Defect 17: one consistent card treatment across the function + step grids.
   Differentiation comes from the numbered eyebrow, not from competing colours. */
.card.c-flat::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: -1.5px;
  height: 3px; background: var(--accent); border-radius: 0 0 3px 3px;
}
.card.c-mint {
  background: linear-gradient(165deg, var(--moss-light), var(--moss));
  border-color: var(--moss-deep);
}
.card.c-yellow {
  background: linear-gradient(165deg, var(--accent-light), var(--accent));
  border-color: var(--accent-deep);
}
.card.c-purple {
  background: linear-gradient(165deg, var(--clay-light), var(--clay));
  border-color: var(--clay-deep);
}
.card.c-mint p, .card.c-yellow p, .card.c-purple p { color: var(--ink); }
.gold-block {
  background: linear-gradient(165deg, var(--slate) 0%, var(--slate-deep) 60%, var(--black) 100%);
  color: var(--bg);
  border-radius: var(--r-xl);
  padding: 32px 30px;
  border: 1.5px solid var(--slate-deep);
  text-align: left;
}
.gold-block .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 12px; display: block; }
.gold-block h3 { color: var(--accent-light); font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; letter-spacing: -0.03em; }
.gold-block p { color: color-mix(in srgb, var(--bg) 82%, transparent); font-size: 15.5px; max-width: 46ch; }
.gold-block p + p { margin-top: 10px; }
.trust-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; }
.card b.k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; color: var(--accent-deep); }
.card p { font-size: 13.5px; color: var(--ink-soft); }
.card h3 + p { margin-top: 6px; }

.tier { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.tier.featured {
  background: linear-gradient(165deg, var(--accent-light), var(--accent));
  border-color: var(--accent-deep);
}
.tier.featured p, .tier.featured .card b.k, .tier.featured b.k { color: var(--ink); }
.tier.featured .stack-list li { border-bottom-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.total { border-top: 1.5px solid var(--ink); padding-top: 8px; font-size: 13px; }
.price { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.035em; margin-top: auto; padding-top: 6px; }
.price small { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: 0.72; }
.tier .btn, .tier .btn-solid { margin-top: 12px; width: 100%; }
.stack-list { list-style: none; font-size: 13px; }
.stack-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.badge {
  display: inline-block; background: var(--ink); color: var(--accent-light);
  border-radius: 999px; padding: 5px 11px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; width: fit-content;
  margin-bottom: 4px;
}
.guarantee {
  background: var(--bg-warm); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; font-size: 14px; color: var(--ink-soft); margin-top: 16px;
}
.guarantee b { color: var(--ink); }

.faq { text-align: left; width: min(760px, 100%); }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--display); letter-spacing: -0.015em; padding: 12px 0; }
.faq summary::marker { color: var(--accent); }
.faq p { color: var(--ink-soft); padding-bottom: 12px; font-size: 14.5px; }

/* --------------------------------------------------------------- forms ---- */
form {
  display: grid; gap: 0; text-align: left; width: min(720px, 100%);
  background: var(--surface); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  border: 1.5px solid var(--line);
}
label { display: grid; gap: 6px; padding: 12px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
input, select {
  font: 500 16px var(--sans); border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  padding: 0 12px; height: var(--btn-h); color: var(--ink); background: var(--surface-2);
}
input::placeholder { color: var(--line-strong); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; }
form .actions { padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.thanks {
  padding: 16px 18px; background: var(--bg-warm); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); font-size: 14.5px; margin-top: 4px;
}

.tool-group { background: var(--surface); border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden; border: 1.5px solid var(--line); }
.tool-group h4 { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.chip { height: var(--btn-h-sm); background: transparent; color: var(--ink); font-size: 13px; padding: 0 14px; }
.chip.on { background: var(--accent); border-color: var(--accent-deep); }
.builder-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 18px; }
.live { position: sticky; top: 96px; }

footer.site { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--edge); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-soft); font-size: 13px; }
footer.site a { color: var(--ink); }

/* --------------------------------------------------------- data visuals --- */
/* Defects 10, 11, 14, 15: ONE measure, ONE right boundary, one vertical rhythm.
   The card is capped so the chart fills it instead of leaving dead white space,
   and the SVG viewBox is authored to the EXACT extent of its content so the
   plot's right edge, the axis, the legend and the note all stop on the same
   vertical line as the card's content box. */
.viz {
  background: var(--surface); border-radius: var(--r-xl);
  padding: 18px 22px 20px; margin-top: 16px;
  border: 1.5px solid var(--line);
  box-shadow: 0 8px 20px rgba(0,0,0,0.045);
  text-align: left;
  width: min(860px, 100%);
  margin-right: auto;
}
.viz.viz-flat {
  box-shadow: none; background: transparent; border: 0;
  padding: 10px 0 0; width: min(900px, 100%);
}
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Defect 12: the eyebrow is real markup ABOVE the title, not text inside the SVG. */
.viz-eyebrow {
  font: 600 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 7px;
}
.viz-title { font-size: 16px; margin-bottom: 14px; letter-spacing: -0.02em; }
.viz-label { font: 600 13px var(--sans); fill: var(--ink); }
.viz-val { font: 700 13px var(--display); fill: var(--ink); letter-spacing: -0.01em; }
.viz-val.on-dark { fill: var(--bg); }
.viz-sub { font: 600 10px var(--mono); letter-spacing: 0.16em; fill: var(--ink-soft); }
.viz-node { font: 700 13px var(--display); fill: var(--ink); }
.viz-cap { font: 600 10px var(--mono); letter-spacing: 0.16em; fill: var(--ink-soft); }
.viz-axis { stroke: var(--viz-axis); stroke-width: 1.5; }
.viz-grid { stroke: var(--viz-axis); stroke-width: 1; stroke-opacity: .55; }
.viz-guide { stroke: var(--ink); stroke-width: 1.5; stroke-opacity: .38; stroke-dasharray: 4 4; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font: 500 12px var(--sans); color: var(--ink-soft); }
.viz-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
/* Defect 15: the note wraps at the CARD boundary, not an arbitrary ch measure. */
.viz-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font: 500 11.5px/1.5 var(--sans); color: var(--ink-soft); max-width: 100%;
}

/* ==================================================== COMPACT DATA CARDS ===
   Round 3: the big full-width charts are gone. These are small, dense
   instrument-panel tiles — 2-3 across, equal height, one visual language.
   Colours come only from the --viz-* tokens. ============================== */
.dcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
  align-items: stretch;
  text-align: left;
}
.dcards.dcards-2 { grid-template-columns: repeat(2, 1fr); }
.dcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px 14px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}
.dcard-k {
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.dcard-viz { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 104px; max-height: 150px; }
.dcard-viz svg { display: block; width: 100%; height: auto; max-height: 150px; overflow: visible; }
.dcard-lab { font: 700 13.5px var(--display); letter-spacing: -0.015em; }
.dcard-cap {
  font: 500 10.5px/1.45 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: auto;
}
.dcard-key {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  border-top: 1px solid var(--line); padding-top: 8px; margin-top: auto;
  font: 500 11px var(--sans); color: var(--ink-soft);
}
.dcard-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
/* shared SVG text scale inside the tiles */
.dlab { font: 600 9px var(--mono); letter-spacing: 0.14em; fill: var(--ink-soft); }
.dval { font: 700 11.5px var(--display); fill: var(--ink); letter-spacing: -0.01em; }
.dval.on-dark { fill: var(--bg); }
.dsub { font: 600 8.5px var(--mono); letter-spacing: 0.16em; fill: var(--ink-soft); }
.dnum { font: 800 26px var(--display); fill: var(--ink); letter-spacing: -0.04em; }
/* ring / donut */
.ring-track { fill: none; stroke: var(--viz-track); stroke-width: 13; }
.ring-fill {
  fill: none; stroke-width: 13; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  stroke-dasharray: 289; stroke-dashoffset: 289;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1) .1s;
}
.panel.on .ring-fill.g-ring { stroke-dashoffset: 173; } /* 24 of 60 = 40% */

.g-grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.panel.on .g-grow { transform: scaleX(1); }
.panel.on .g-grow.d2 { transition-delay: .16s; }
.panel.on .g-grow.d3 { transition-delay: .32s; }
.sys-node { opacity: 0; transform: translateY(8px); transform-box: fill-box; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.panel.on .sys-node { opacity: 1; transform: none; }
.panel.on .sys-node.d2 { transition-delay: .1s; }
.panel.on .sys-node.d3 { transition-delay: .2s; }
.panel.on .sys-node.d4 { transition-delay: .3s; }
.panel.on .sys-node.d5 { transition-delay: .4s; }
.sys-link { opacity: 0; transition: opacity .6s ease .35s; }
.panel.on .sys-link { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .g-grow, .sys-node, .sys-link { transform: none; opacity: 1; transition: none; }
  .ring-fill, .panel.on .ring-fill.g-ring { transition: none; stroke-dashoffset: 173; }
  .tile, .constellation-lines path { animation: none; stroke-dashoffset: 0; }
  .tile { transform: translate(-50%, -50%); }
  .panel { transition-duration: .01ms; }
}

/* ---------------------------------------------------- waitlist capture ---- */
.wait { margin-top: 26px; text-align: left; width: min(560px, 100%); }
.wait-kicker { font: 600 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
form.wait-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  width: 100%; padding: 10px; border-radius: var(--r-lg); overflow: visible;
}
form.wait-form label {
  border-bottom: 0; padding: 0 0 0 6px; font-size: 10px;
}
form.wait-form input[type="email"] { flex: 1 1 220px; min-width: 0; }
form.wait-form .btn-solid { flex: 0 0 auto; }
.form-error { margin-top: 8px; font-size: 13px; color: var(--danger); }

/* ======================================================= REVIEWS (panel 3) ==
   PLACEHOLDER CONTENT LIVES HERE. Layout is final: swapping the bracketed
   text for real quotes needs no CSS change. ============================== */
.reviews {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 18px; text-align: left; align-items: stretch;
}
.review {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 16px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}
.review-top { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-warm);
  border: 1.5px dashed var(--line-strong);
  font: 600 11px var(--mono); color: var(--ink-soft);
}
.review-name { font: 700 14.5px var(--display); letter-spacing: -0.015em; }
.review-biz { font: 500 12px var(--sans); color: var(--ink-soft); }
.stars { display: flex; align-items: center; gap: 9px; }
.stars svg { width: 88px; height: auto; display: block; }
.stars-note { font: 600 9.5px var(--mono); letter-spacing: 0.16em; color: var(--ink-soft); }
.review-quote { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin-top: auto; }

/* ------------------------------------------------- close-panel reversals -- */
.reversals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; text-align: left; }
.rev {
  border-left: 2.5px solid var(--accent); padding: 2px 0 2px 12px;
  display: grid; gap: 3px;
}
.rev b { font: 700 13.5px var(--display); letter-spacing: -0.015em; }
.rev span { font-size: 13.5px; color: var(--ink-soft); }

/* ------------------------------------------------------------- tablet ---- */
@media (max-width: 1100px) {
  :root { --edge: 32px; --maxw: 900px; }
  .rail { right: 12px; }
}

@media (max-width: 980px) {
  :root { --edge: 22px; --navh: 66px; }
  .hero-split, .grid4, .grid5, .grid3, .steps, .stats, .form-row, .builder-grid, .trust-split { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; position: absolute;
    top: calc(var(--navh) - 4px); left: var(--edge); right: var(--edge);
    background: var(--bg); border: 1.5px solid var(--ink); border-radius: var(--r-lg);
    padding: 14px; gap: 14px; text-align: left;
  }
  .nav-links.open .btn-orange { width: 100%; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* Rail moves to the bottom; the panel reserves room for it. */
  .rail {
    flex-direction: row; top: auto; bottom: 14px; right: 50%;
    transform: translateX(50%); padding: 9px 12px;
  }
  .rail button span { display: none; }
  .panel { padding: calc(var(--navh) + 12px) var(--edge) 72px; }
  /* No height / no scale: aspect-ratio drives the box so tiles stay on nodes. */
  .constellation { width: 100%; max-width: 420px; margin: 0 auto; }
  .hero-right { margin-top: 8px; }
  .viz, .viz.viz-flat { width: 100%; }
  .dcards, .dcards.dcards-2, .reviews, .reversals { grid-template-columns: 1fr; }
  .dcard-viz { min-height: 0; }
}

/* ------------------------------------------------- phone (390px target) --- */
@media (max-width: 560px) {
  :root { --edge: 16px; --btn-h: 48px; --btn-h-sm: 42px; }
  body { font-size: 15.5px; }
  .hero-built, h1 { font-size: clamp(34px, 10.4vw, 46px); }
  h2 { font-size: clamp(26px, 8.2vw, 36px); }
  .hero-tag { max-width: none; font-size: 17px; }
  .lede, .trust-split .lede { max-width: none; }
  .ask { gap: 10px; }
  /* Defect 1 holds on mobile: both buttons are the same box, full width. */
  .ask .btn, .ask .cta-btn, .ask .btn-solid, .ask .btn-orange { width: 100%; }
  .constellation { max-width: 320px; }
  .viz { padding: 16px 14px 18px; }
  .viz-legend { gap: 6px 14px; font-size: 11.5px; }
  .viz-note { font-size: 11px; }
  .card { padding: 18px 16px; border-radius: var(--r-lg); }
  .card.c-flat::before { left: 16px; right: 16px; }
  .gold-block { padding: 24px 20px; border-radius: var(--r-lg); }
  .faq summary { font-size: 15px; }
  form.wait-form { flex-direction: column; align-items: stretch; }
  form.wait-form .btn-solid { width: 100%; }
  .rail { gap: 2px; padding: 8px 10px; }
  .rail button { width: 20px; }
}


/* ============================================================================
   HOME REBUILD — SECTIONS ADDED IN v18
   ----------------------------------------------------------------------------
   Everything below styles the rebuilt home page: the problem section, the
   handoff diagram (VISUAL 2), the coordination cost calculator (VISUAL 1 —
   the centerpiece), the 90-day timeline (VISUAL 5), and the supporting
   sections that carry them.

   Three laws are enforced here and must survive every future edit:
     1. TOKENS ONLY. Not one literal colour below this line.
     2. AMBER DISCIPLINE. --accent / --accent-deep appear ONLY on the "after"
        state (the Turnkey line, the Turnkey nodes, the ONGOING milestone),
        on the crossover marker, and on primary buttons. Everywhere else the
        "today / doing nothing" state is grey: --viz-2, --slate-light,
        --ink-soft, --line-strong. Amber in six places is amber in zero.
     3. NOTHING ANIMATES ON LOAD. The only motion permitted here is a hover
        state and the calculator recalculating. No reveals, no parallax.

   Contrast, measured against the cream/amber grainient canvas (--bg), not
   against white:
        --ink        16.9:1     --ink-soft   6.9:1     --viz-2      8.8:1
        --accent-deep 5.0:1     --slate-light 4.2:1    --danger     7.1:1
   --accent itself is 2.8:1, so it is used for FILLS of large marks only,
   never for text and never for a hairline. Amber text and amber strokes use
   --accent-deep.
   ========================================================================== */

/* ------------------------------------------------------------ utility ---- */
/* Visually hidden, still announced. Used by the calculator's live region. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================ PANEL 1 =====
   THE PROBLEM — plan 1.4
   Body copy sits on a 65–70ch measure at 1.6 line-height, per Part IV.
   ========================================================================== */
.prob { margin-top: 18px; max-width: 68ch; }

.prob-list { list-style: none; margin: 0; padding: 0; }
.prob-list li {
  position: relative;
  padding: 11px 0 11px 26px;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.prob-list li:first-child { border-top: 1px solid var(--line); }
/* A machined dash, not a bullet. Grey: this is the "today" state. */
.prob-list li::before {
  content: "";
  position: absolute; left: 0; top: calc(0.8em + 11px);
  width: 12px; height: 1.5px;
  background: var(--line-strong);
}
.prob-note {
  margin-top: 16px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* The line that lands the section. Typographic weight only — no amber. */
.prob-punch {
  margin-top: 26px;
  max-width: 52ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 2.05vw, 24px);
  line-height: 1.34;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* ==================================================== VISUAL 2 — HANDOFF ==
   Two flows stacked. TODAY is grey, cramped, and stalls in four places.
   WITH TURNKEY is one amber line with enormous air around it.
   THE WHITESPACE IS THE ARGUMENT — do not put anything in it.
   ========================================================================== */
.handoff {
  margin: 30px 0 0;
  /* Wide viewBox (900x250). On narrow screens the figure scrolls sideways
     rather than crushing the labels into mush. See the mobile block. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.handoff svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Section heads inside the SVG.
   NOTE: the markup gives both heads the same class and no modifier, so the
   "after" head is selected positionally. The markup is final; if it ever
   changes, add a real .hf-head-after class rather than reordering. */
.hf-head {
  font: 600 11px var(--mono);
  letter-spacing: 0.22em;
  fill: var(--ink-soft);
}
/* The SECOND head is "WITH TURNKEY" — the after state, so it earns amber. */
.hf-head ~ .hf-head { fill: var(--accent-deep); font-weight: 700; }

/* --- today: thin grey wire, seven nodes -------------------------------- */
.hf-wire { stroke: var(--line-strong); stroke-width: 1.25; }
.hf-node circle {
  fill: var(--slate-light);
  stroke: var(--bg);
  stroke-width: 1.5;
}
.hf-node text {
  font: 500 12px var(--sans);
  fill: var(--ink-soft);
  text-anchor: middle;
}
/* The four places it stalls. Muted brick, never bright — this is a
   diagnosis, not an alarm. */
.hf-stall circle { fill: var(--danger); }
.hf-stall text { fill: var(--ink); font-weight: 600; }

/* --- with turnkey: one amber line, two nodes, nothing else ------------- */
.hf-wire-after {
  stroke: var(--accent-deep);
  stroke-width: 3;
  stroke-linecap: round;
}
.hf-node-after circle {
  fill: var(--accent);
  stroke: var(--accent-deep);
  stroke-width: 1.5;
}
.hf-node-after text { fill: var(--ink); font-weight: 700; }

/* --- the counts ------------------------------------------------------- */
.hf-metric {
  font: 600 11px var(--mono);
  letter-spacing: 0.12em;
  fill: var(--ink-soft);
}
.hf-metric-after { fill: var(--accent-deep); font-weight: 700; }

/* The best sentence on the site. It gets room.
   The <figcaption> is a child of the scroll container, so it is pinned with
   sticky-left: when the wide SVG is scrolled sideways on a phone, the caption
   stays put instead of sliding off the screen with it. */
.handoff figcaption {
  position: sticky;
  left: 0;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 54ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ================================================= VISUAL 1 — CALCULATOR ==
   THE CENTREPIECE. Three sliders on the left, one enormous number on the
   right. The number is the anchor every price on this site is judged
   against, so it is the largest type anywhere in the build.
   ========================================================================== */
.lede-punch {
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: -0.032em;
  color: var(--ink);
  max-width: none;
}

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 26px 44px;
  align-items: center;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1.5px solid var(--line);
}

/* --- inputs ------------------------------------------------------------ */
.calc-inputs { display: grid; gap: 18px; min-width: 0; }
.calc-field { display: grid; gap: 6px; min-width: 0; }

/* The global form `label` rule is mono/uppercase/boxed — wrong here.
   These labels are sentences, so they are set as sentences. */
.calc-field label {
  display: block;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  max-width: 60ch;
}

.calc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.calc-row output {
  flex: 0 0 auto;
  min-width: 4.4ch;
  text-align: right;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calc-foot {
  margin-top: 2px;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- the sliders -------------------------------------------------------
   44px tall hit area with a 6px visible track inside it, so the touch
   target passes on a phone without the control looking like a toy.
   Both vendor prefixes are written out in full: -webkit- and -moz- do not
   share a selector, and a rule with an unknown pseudo-element in the list
   is dropped entirely by the browser. Keep them separate.            ----- */
.calc-row input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 44px;              /* touch target, not the visual track height */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: pan-y;       /* let a vertical swipe still move the deck */
}
.calc-row input[type="range"]:focus { outline: none; }
.calc-row input[type="range"]:focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* webkit / blink */
.calc-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--viz-track);
  border: 1px solid var(--line);
}
.calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* The global `* { box-sizing }` does NOT reach pseudo-elements, so state it
     here or the centring maths below silently drifts by the border width. */
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  /* Track box is 6px + 2x1px border = 8px. (8 - 26) / 2 = -9px. */
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--ink) 28%, transparent);
  transition: background .15s ease, transform .15s ease;
}
.calc-row input[type="range"]:hover::-webkit-slider-thumb { background: var(--slate-deep); }
.calc-row input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.06); }

/* firefox */
.calc-row input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--viz-track);
  border: 1px solid var(--line);
}
.calc-row input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
}
.calc-row input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--ink) 28%, transparent);
  transition: background .15s ease;
}
.calc-row input[type="range"]:hover::-moz-range-thumb { background: var(--slate-deep); }
.calc-row input[type="range"]::-moz-focus-outer { border: 0; }

/* --- the number --------------------------------------------------------
   THE LARGEST TYPE ON THE SITE. The h1 tops out at 78px; this does not.
   It is the anchor the whole page is built around.                  ----- */
.calc-output { min-width: 0; }
.calc-big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(58px, 9.4vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  margin: 0;
  /* the digits change; the box must not jump when they do */
  font-feature-settings: "tnum" 1;
}
.calc-unit {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 20px);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.calc-working {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.calc-five {
  margin-top: 10px;
  max-width: 52ch;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  color: var(--ink);
}
.calc-five strong { font-weight: 800; letter-spacing: -0.02em; }

/* --- chart block -------------------------------------------------------
   Chart on the left, the honest small print and the ask stacked on the
   right, so the whole tool stays inside one panel height.            ----- */
.calc-chartwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "chart recovery"
    "chart verdict"
    "chart honesty"
    "chart cta";
  grid-template-rows: auto auto auto 1fr;
  gap: 12px 40px;
  align-items: start;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1.5px solid var(--line);
}
.calc-recovery {
  grid-area: recovery;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.calc-chart {
  grid-area: chart;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  align-self: center;
}
.calc-verdict { grid-area: verdict; }
.calc-tierline {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 40ch;
}
.calc-tierline strong { font-weight: 800; }
.calc-tierline #calc-payback { color: var(--ink-soft); font-weight: 500; }
.calc-toosmall {
  margin-top: 8px;
  max-width: 48ch;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* Never let the layout rules resurrect a hidden element. */
.calc-toosmall[hidden] { display: none; }
.calc-honesty {
  grid-area: honesty;
  max-width: 58ch;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.calc-cta {
  grid-area: cta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.calc-cta p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
}

/* --- the two-line cumulative chart (markup generated by js/calc.js) -----
   Line A "Doing nothing": grey, straight, relentless.
   Line B "With Turnkey": amber, starts higher, crosses, keeps widening.
   Line B carries the residual 40% forever — that is what makes the
   crossover believable, and it is drawn, not implied.                ----- */
.cx-grid {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-opacity: 0.5;
}
.cx-ylab,
.cx-xlab {
  font: 600 10px var(--mono);
  letter-spacing: 0.06em;
  fill: var(--ink-soft);
}
.cx-xunit { letter-spacing: 0.16em; }

/* The crossover. One of the three places amber is allowed. */
.cx-cross {
  stroke: var(--accent-deep);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.cx-crosslab {
  font: 700 10.5px var(--mono);
  letter-spacing: 0.11em;
  fill: var(--accent-deep);
}

.cx-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cx-nothing { stroke: var(--viz-2); stroke-opacity: 0.62; }
.cx-turnkey { stroke: var(--accent-deep); stroke-width: 3; }

.cx-endlab {
  font: 700 11.5px var(--display);
  letter-spacing: -0.015em;
}
.cx-endlab-a { fill: var(--ink-soft); }
.cx-endlab-b { fill: var(--accent-deep); }

/* ============================================================ PANEL 3 =====
   WHAT CHANGES — plan 1.6
   Six statements, not six cards. A hairline above each is enough structure.
   ========================================================================== */
.changes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 34px;
  margin-top: 22px;
}
.change { border-top: 1.5px solid var(--line); padding-top: 13px; }
.change h3 {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.change p {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* ============================================================ PANEL 4 =====
   HOW IT WORKS — plan 1.7
   ========================================================================== */
.steps-n {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  margin-top: 20px;
  padding: 0;
}
.steps-n li { min-width: 0; }
.steps-n h3 {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.stepn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  font: 700 11.5px/1 var(--mono);
  letter-spacing: 0;
  color: var(--ink);
  transform: translateY(3px);
}
.steps-n p {
  margin-top: 7px;
  padding-left: 36px;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ================================================== VISUAL 5 — TIMELINE ===
   Bounded. It has an end date. The only amber is ONGOING — the after state.
   ========================================================================== */
.tl {
  margin: 28px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tl svg { display: block; width: 100%; height: auto; overflow: visible; }

.tl-wire { stroke: var(--line-strong); stroke-width: 1.5; }
.tl-pt circle {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2.5;
}
.tl-pt-on circle { fill: var(--accent); stroke: var(--accent-deep); }

.tl-when {
  font: 600 10px var(--mono);
  letter-spacing: 0.2em;
  fill: var(--ink-soft);
}
.tl-pt-on .tl-when { fill: var(--accent-deep); font-weight: 700; }
.tl-what {
  font: 700 13.5px var(--display);
  letter-spacing: -0.02em;
  fill: var(--ink);
}
.tl-sub {
  font: 500 11.5px var(--sans);
  fill: var(--ink-soft);
}
.tl-promise {
  position: sticky;
  left: 0;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 1.9vw, 22px);
  letter-spacing: -0.028em;
  line-height: 1.35;
  color: var(--ink);
}

/* ============================================================ PANEL 5 =====
   THREE WAYS IN — plan 1.8. A price list, not three competing cards.
   ========================================================================== */
.tiers { margin-top: 20px; border-top: 1.5px solid var(--line); }
.tierrow {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px 34px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1.5px solid var(--line);
}
.tierrow-l { min-width: 0; }
.tierrow-l h3 {
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: -0.028em;
  color: var(--ink);
}
.tierrow-l p {
  margin-top: 5px;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tierrow-r { min-width: 0; text-align: right; }
.tierprice {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tiperm {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* An inline link that behaves like a link and moves only on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.link-arrow span { transition: transform .15s ease; }
.link-arrow:hover { text-decoration-color: var(--ink); }
.link-arrow:hover span { transform: translateX(3px); }

/* ============================================================ PANEL 6 =====
   WHO THIS IS FOR — plan 1.9. Two columns, and the second one is honest.
   ========================================================================== */
.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: 20px;
}
.fit-col { min-width: 0; }
.fit-col h3 {
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--line);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li {
  position: relative;
  padding: 9px 0 9px 27px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--line);
}
/* Markers are drawn, not typed, so a screen reader never reads "check". */
.fit-yes li { color: var(--ink); }
.fit-yes li::before {
  content: "";
  position: absolute; left: 2px; top: calc(0.62em + 9px);
  width: 10px; height: 5px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.fit-no li { color: var(--ink-soft); }
.fit-no li::before {
  content: "";
  position: absolute; left: 2px; top: calc(0.85em + 9px);
  width: 12px; height: 2px;
  background: var(--line-strong);
}

/* ============================================================ PANEL 7 =====
   GUARANTEES — plan 1.10 — and the results note, 1.11.
   Recessed blocks, matching the existing .guarantee treatment.
   ========================================================================== */
.gtees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
  align-items: stretch;
}
.gtee {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-warm);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 18px 20px;
}
.gtee h3 {
  font-size: 16px;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.gtee p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}
.results-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1.5px solid var(--line);
  max-width: 66ch;
}
.results-note h3 { font-size: 16px; letter-spacing: -0.02em; }
.results-note p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.results-note .link-arrow { margin-top: 4px; }

/* ============================================================ PANEL 8 =====
   THE CLOSE + FOOTER — plan 1.12
   ========================================================================== */
.close-st { max-width: 54ch; }
.close-st .lede { max-width: 48ch; }
.close-st .lede + .lede { margin-top: 8px; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 40px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.foot-l p { margin: 0; }
.foot-l a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.foot-l a:hover { text-decoration-color: var(--ink); }
.foot-brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 4px !important;
}
.foot-r {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: flex-start;
}
.foot-r a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}
.foot-r a:hover { color: var(--ink); }

/* ------------------------------------------------------------- tablet ---- */
@media (max-width: 980px) {
  /* Calculator goes single column: sliders first, then the number. It stays
     the biggest thing on the screen. */
  .calc {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .calc-chartwrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "recovery"
      "chart"
      "verdict"
      "honesty"
      "cta";
    grid-template-rows: none;
    gap: 14px;
  }
  .changes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-n { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .gtees { grid-template-columns: minmax(0, 1fr); }
  .fit { gap: 20px 32px; }
  /* Wide viewBoxes: scroll them rather than shrink the labels to noise. */
  .handoff svg { min-width: 760px; }
  .tl svg { min-width: 700px; }
}

/* ------------------------------------------------- phone (390px target) --- */
@media (max-width: 560px) {
  .prob, .prob-note, .prob-punch, .calc-working, .calc-five,
  .calc-recovery, .calc-honesty, .results-note, .change p, .steps-n p {
    max-width: none;
  }
  .prob-list li { font-size: 15.5px; }

  /* One-handed: full-width sliders, output on its own line under the label
     so the thumb has the whole width to travel. */
  .calc { margin-top: 18px; padding-top: 18px; }
  .calc-row { gap: 12px; }
  .calc-row input[type="range"] { height: 46px; }
  .calc-row output { font-size: 17px; min-width: 4ch; }

  /* Still the largest type on the site, on a 360px screen. */
  .calc-big { font-size: clamp(46px, 15.5vw, 68px); letter-spacing: -0.05em; }
  .calc-unit { font-size: 15px; }
  .calc-cta { flex-direction: column; align-items: stretch; }
  .calc-cta p { max-width: none; }
  .calc-cta .cta-btn { width: 100%; }

  .changes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fit { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* Rows become stacked blocks: price under the name, left aligned. */
  .tierrow { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 15px 0; }
  .tierrow-r { text-align: left; }

  .foot { flex-direction: column; gap: 18px; margin-top: 34px; }
  .foot-r { flex-direction: column; gap: 8px; }

  /* Keep the diagrams legible: bigger SVG type, and the figure scrolls. */
  .handoff svg { min-width: 720px; }
  .tl svg { min-width: 660px; }
  .hf-node text { font-size: 13px; }
  .hf-head, .hf-metric { font-size: 12px; }
  .tl-what { font-size: 15px; }
  .tl-sub { font-size: 13px; }
  .tl-when { font-size: 11px; }
  /* Chart drops to the essentials at phone width, per Visual 1's mobile
     spec: two y labels and the crossover marker carry the meaning. */
  .cx-ylab, .cx-xlab { font-size: 13px; }
  .cx-crosslab { font-size: 12.5px; }
  .cx-endlab { font-size: 14px; }
}

/* ------------------------------------------------ reduced motion ---------- */
/* Nothing here animates on load in the first place. This kills the two
   hover transitions as well, for anyone who has asked for stillness. */
@media (prefers-reduced-motion: reduce) {
  .link-arrow span,
  .calc-row input[type="range"]::-webkit-slider-thumb,
  .calc-row input[type="range"]::-moz-range-thumb {
    transition: none;
  }
  .link-arrow:hover span { transform: none; }
  .calc-row input[type="range"]:active::-webkit-slider-thumb { transform: none; }
}

/* Handoff group wrappers. The TODAY row is deliberately dense and grey; the
   WITH TURNKEY row is amber with air around it. The whitespace IS the argument
   (plan, Visual 2) — do not fill it. */
.hf-today { opacity: .92; }
.hf-after { opacity: 1; }

/* ---------------------------------------------- social proof (restored) ---
   Stock avatars + rating, at James's direction; he is making the claim true.
   Sits above the how-we-work facts. */
.proof-social { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.proof-faces { display: flex; align-items: center; }
.proof-social .proof-face {
  width: 40px !important; height: 40px !important;
  min-width: 40px; min-height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent);
  margin-left: -13px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.proof-social .proof-faces .proof-face:first-child { margin-left: 0; }
.proof-social .proof-face:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ink) 26%, transparent);
  position: relative; z-index: 2;
}
.proof-text { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.proof-stars { display: flex; gap: 2px; align-items: center; line-height: 0; }
/* A generic `svg { width:100% }` elsewhere in this file blows these up to the
   full column width (measured 341x341 each, which inflated the hero to 3355px
   and broke the whole layout). Pin them hard. */
.proof-social .proof-stars > svg {
  width: 14px !important; height: 14px !important;
  min-width: 14px; min-height: 14px; flex: 0 0 14px;
  fill: var(--accent); display: block;
}
.proof-line { margin: 0; font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.proof-lead { font-weight: 500; }
.proof-line strong { font-weight: 700; color: var(--ink); }
.proof { margin-top: 18px !important; }

/* Lead clause of the hero tag — the diagnosis, before the promise. */
.hero-tag-lead { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .proof-face { transition: none; } }

/* ------------------------------------------------- hero fit correction ---
   The panel deck auto-scales .inner (--fit) to fit the viewport. When the hero
   grew, --fit fell to 0.62 and the layout still overflowed, dumping content to
   the bottom of the screen. Fix the CAUSE: keep the hero short enough to fit.
   Anything that needs more room belongs in the panel below, not the hero. */
.hero-built, .panel.on h1 { margin-bottom: 8px; }
.eyebrow-hero { margin-bottom: 0; line-height: .92; }
.hero-tag { margin: 0 0 12px; font-size: clamp(16px, 1.55vw, 19px); max-width: 38ch; }
.hero-sub { margin: 0 0 16px; font-size: clamp(14px, 1.15vw, 15.5px); max-width: 50ch; }
.ask { margin-bottom: 10px; }
.ask + .tiny.muted, .ask + .tiny { margin-top: 10px; }
.proof-social { margin-top: 16px; }
.proof-note { margin: 10px 0 0; font-size: 12px; }
.hero-split { gap: 24px; align-items: center; }
.constellation { width: 440px; }

@media (max-width: 1100px) { .constellation { width: 380px; } }

/* --------------------------------------------------- hero word highlight ---
   James, 2026-08-22: "Built" stays HIGHLIGHTED but NOT italic. Same amber as
   .it, upright. Do not reintroduce font-style: italic here. */
.hero-built .hl {
  font-style: normal;
  color: var(--accent-deep);
  font-weight: 800;
}

/* Connector lines restored 2026-08-22 (they vanished when the cluster was
   re-spaced). Endpoints are computed from the SOLVED tile geometry, so if a
   tile moves the paths must be regenerated or they will detach. */
.constellation-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.constellation-lines path {
  fill: none;
  stroke: var(--line-strong, var(--line));
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .85;
}

/* ============================================================================
   HORMOZI REBALANCE — 2026-08-21
   James: "way too much info, but it's all narrow... design it like Alex
   Hormozi, super simple, one idea per page, formatted well, cohesive and
   balanced."

   Rules enforced below:
     - ONE shared panel head (.phead / .phead-row): h2 left, one short lede
       right, one hairline under. Same on every panel = cohesion.
     - ONE shared body grid (.row3 / .row4) that spans the FULL measure, so
       nothing is a narrow centre column any more.
     - ONE vertical rhythm scale: --rhy.
   Tokens only. No new colours.
   ========================================================================== */
:root { --rhy: 30px; }

/* ---- the shared panel head ---------------------------------------------- */
.phead {
  padding-bottom: 16px;
  margin-bottom: var(--rhy);
  border-bottom: 1.5px solid var(--line);
}
.phead h2 { margin-bottom: 0; }
.phead-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px 48px;
  align-items: end;
}
.lede-wide {
  max-width: 38ch;
  margin: 0 0 4px;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---- the shared full-width body grids ----------------------------------- */
.row3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
  width: 100%;
  margin-top: 0;
}
.row4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 34px;
  width: 100%;
  margin-top: 0;
}

/* The rule number. Machined, amber, small — the only decoration allowed. */
.bp-n {
  display: block;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  margin-bottom: 10px;
}

/* ---- PANEL 1: three big statements across the full width ---------------- */
.bigpoints .bp {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}
.bigpoints .bp p {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.95vw, 25px);
  line-height: 1.26;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.handoff { margin-top: var(--rhy); }
.handoff figcaption {
  margin-top: 16px;
  padding-top: 14px;
  max-width: 60ch;
  font-size: clamp(15px, 1.55vw, 19px);
}

/* ---- PANEL 2: sliders | number | chart, all three across the width ------ */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.72fr) minmax(0, 1.25fr);
  gap: 24px 40px;
  align-items: center;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.calc-inputs { gap: 14px; }
.calc-field label { font-size: 12.5px; line-height: 1.35; }
.calc-foot { font-size: 11px; line-height: 1.4; margin-top: 2px; }
.calc-big { font-size: clamp(40px, 4.6vw, 68px); margin: 0; }
.calc-unit { margin-top: 2px; }
.calc-chart {
  grid-area: auto;
  align-self: center;
  width: 100%;
  height: auto;
}
.calc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  margin-top: var(--rhy);
  padding-top: 18px;
  border-top: 1.5px solid var(--line);
}
.calc-bar .calc-tierline { max-width: 56ch; margin: 0; }
.calc-honesty {
  grid-area: auto;
  margin-top: 12px;
  max-width: none;
  font-size: 11.5px;
}
.calc-toosmall { margin-top: 12px; }

/* ---- PANEL 3: three statements, no supporting paragraphs ---------------- */
.changes { gap: 30px 40px; }
.changes .change {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}
.changes .change h3 {
  font-size: clamp(19px, 2.05vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}
.punch {
  margin-top: var(--rhy);
  padding-top: 20px;
  border-top: 1.5px solid var(--line);
  max-width: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.032em;
  color: var(--ink);
}

/* ---- PANEL 4: four steps across, then the timeline ---------------------- */
.steps-n {
  list-style: none;
  padding: 0;
}
.steps-n li {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}
.steps-n li .stepn {
  display: inline-flex;
  margin-bottom: 10px;
  transform: none;
}
.steps-n li h3 {
  display: block;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.24;
  letter-spacing: -0.026em;
}
.steps-n li p {
  margin-top: 7px;
  padding-left: 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.5;
}
.tl { margin-top: var(--rhy); }
.tl-promise { margin-top: 14px; padding-top: 14px; }

/* ---- PANEL 5: three price cards across the width ------------------------ */
.tiers { border-top: 0; }
.tiercard {
  display: flex;
  flex-direction: column;
  background: var(--bg-warm);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 22px 24px;
}
.tiercard-lead {
  background: var(--surface);
  border-color: var(--ink);
}
.tiercard h3 {
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.028em;
  line-height: 1.2;
}
.tierwho {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.tiercard .tierprice {
  margin-top: auto;
  padding-top: 20px;
  font-size: clamp(22px, 2.3vw, 31px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.tiercard .tiperm { margin-top: 5px; font-size: 12.5px; line-height: 1.45; }
.tiers-foot { margin-top: 4px; }

/* ---- PANEL 6: the two columns actually fill the width ------------------- */
.fit { gap: 26px 56px; margin-top: 0; }
.fit-col h3 { font-size: clamp(16px, 1.6vw, 20px); padding-bottom: 12px; }
.fit-list li { max-width: none; font-size: clamp(14.5px, 1.35vw, 17px); padding: 11px 0 11px 28px; }

/* ---- PANEL 7: three guarantees, then one honest line -------------------- */
.gtees { gap: 20px; margin-top: 0; align-items: stretch; }
.gtee { padding: 22px 22px 24px; border-radius: var(--r-xl); }
.gtee h3 { font-size: clamp(16px, 1.55vw, 20px); line-height: 1.24; }
.gtee p { max-width: none; font-size: 13.5px; }
.gfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 30px;
  margin-top: var(--rhy);
  padding-top: 18px;
  border-top: 1.5px solid var(--line);
}
.gfoot p { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.gfoot .link-arrow { margin-top: 0; }

/* ---- PANEL 8: the close ------------------------------------------------- */
.close-st { max-width: 60ch; }
.close-st .lede { max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px); }
.foot { margin-top: 56px; }

/* ---- responsive: the wide rows fold, the rhythm holds ------------------- */
@media (max-width: 1080px) {
  .calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 32px;
  }
  .calc-chart { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --rhy: 22px; }
  .phead-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-chart { grid-column: auto; }
}
@media (max-width: 720px) {
  .row3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .row4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .calc-bar { flex-direction: column; align-items: stretch; }
  .calc-bar .cta-btn { width: 100%; }
  .gfoot { flex-direction: column; align-items: flex-start; }
}

/* ====================================================================
   WIDTH CORRECTION — James, 2026-08-22: "it's all narrow, it's not wide,
   it's not good info for this carousel format."
   The deck was pinned to --maxw 1160px on a 1920px screen: content used
   53% of the canvas and the hero text column was only ~400px, wrapping
   the tagline into 3 ragged lines. Widen the container and let the
   columns actually breathe. Panels are one-screen, so width is free
   real estate — using it REDUCES height, which protects --fit.
   ==================================================================== */
:root { --maxw: 1500px; }

@media (min-width: 1400px) {
  .inner { width: min(1500px, 92vw); }
  /* Text column gets real measure; visual column grows to counterweight it. */
  .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
  .hero-tag   { max-width: 22ch; }
  .hero-sub   { max-width: 46ch; }
  .constellation { width: min(560px, 100%); }
}

@media (min-width: 1800px) {
  .inner { width: min(1620px, 90vw); }
  .constellation { width: min(600px, 100%); }
}

/* ONE container for nav AND panels. They were on different widths (nav 1500,
   panels 1620), so the logo and the headline started at different x and every
   edge disagreed. Same rule for both = every edge lines up. */
.nav-in { width: min(var(--maxw), 100%); margin-inline: auto; }
@media (min-width: 1400px) { .nav-in { width: min(1500px, 92vw); } }
@media (min-width: 1800px) { .nav-in { width: min(1620px, 90vw); } }
nav, .nav { padding-inline: 0 !important; }

/* Below the hero: stop single-column stacks from running as narrow ribbons. */
@media (min-width: 1400px) {
  .panel .lede, .panel .st > p { max-width: 68ch; }
}

/* ==========================================================================
   SCROLL-PAGE FIXES (2026-08-22)
   Two regressions appeared once the fixed-panel deck became a normal page.
   ========================================================================== */

/* 1. The nav is fixed but was transparent, so section content scrolled
      UNDER it and collided with the logo (the calculator verdict line was
      rendering on top of the wordmark). Give it its own opaque surface. */
.nav {
  /* Fully opaque. At 88% the page text scrolling behind it ghosted through
     and read as if it were overlapping the logo. */
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* 2. (There is only ONE nav CTA in the markup; the apparent 'duplicate' in a
      screenshot was the footer's Book link scrolled up behind the fixed nav.
      Fixed by giving .nav an opaque surface above — no markup change needed.) */

/* 3. Anchored jumps must clear the fixed nav instead of hiding under it. */
.panel { scroll-margin-top: calc(var(--navh) + 12px); }

/* 4. The rail is decorative on a scrolling page; keep it from crowding the
      right edge and hide it where there isn't room. */
@media (max-width: 1280px) { .rail { display: none; } }

/* ==========================================================================
   ONE VIEW — James, 2026-08-22: "one no-scroll page, as in just the original
   view when you open the page. No carousel, no scrolling."
   The entire pitch + the three tiers + one button, inside 100svh. Nothing
   below the fold, because there is no below the fold.
   Everything scales off one clamp so it fits 1280x720 laptops through 4K.
   ========================================================================== */
html, body { height: 100%; overflow: hidden; }   /* no scroll, by design */

.oneview {
  position: relative; z-index: 2;
  height: 100svh;
  padding: calc(var(--navh) + clamp(6px, 1.4vh, 22px)) var(--edge) clamp(12px, 2.2vh, 30px);
  display: flex; align-items: center; justify-content: center;
}
.ov-in {
  width: min(var(--maxw), 100%);
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: clamp(8px, 1.6vh, 24px);
}

/* --- top: the pitch, exactly as approved, beside the CodePen cluster --- */
.ov-top {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 64px);
  align-items: center;
}
.ov-top > .st { min-width: 0; }
.ov-top .hero-right {
  min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* The cluster is the hero visual: give it every pixel of height available. */
.ov-top .constellation { width: auto; height: min(100%, 54vh); aspect-ratio: 600/660; }

/* Type scales to the viewport HEIGHT so it can never push past one screen. */
.oneview .eyebrow-hero,
.oneview .hero-built { font-size: clamp(30px, 5.6vh, 68px); line-height: 1.02; }
.oneview .hero-built { margin-bottom: clamp(6px, 1.2vh, 14px); }
.oneview .hero-tag  { font-size: clamp(14px, 2.05vh, 20px); margin-bottom: clamp(8px, 1.5vh, 18px); max-width: 26ch; }
.oneview .ask       { margin-bottom: clamp(6px, 1.1vh, 12px); }
.oneview .proof-social { margin-top: clamp(8px, 1.5vh, 18px); }

/* --- bottom: the three tiers + the one button --- */
.ov-bottom {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding-top: clamp(10px, 1.8vh, 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vw, 48px);
  align-items: center;
}
.ov-tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 34px);
}
.ovt { min-width: 0; }
.ovt-name {
  margin: 0 0 2px; font-family: var(--display); font-weight: 800;
  font-size: clamp(12.5px, 1.75vh, 16px); line-height: 1.15; letter-spacing: -0.01em;
}
.ovt-what { margin: 0 0 clamp(4px, .8vh, 9px); font-size: clamp(11px, 1.45vh, 13px); color: var(--ink-soft); }
.ovt-price {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(15px, 2.4vh, 23px); line-height: 1.1;
  color: var(--accent-deep); letter-spacing: -0.02em;
}
.ovt-unit { font-family: var(--sans); font-weight: 600; font-size: .52em; color: var(--ink-soft); letter-spacing: 0; }
.ovt-mo { margin: 2px 0 0; font-size: clamp(10.5px, 1.4vh, 12.5px); color: var(--ink-soft); }

.ov-close { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(5px, .9vh, 10px); }
.ov-cta { white-space: nowrap; }
.ov-fine { margin: 0; font-size: clamp(9.5px, 1.25vh, 11.5px); color: var(--ink-soft); max-width: 34ch; text-align: right; line-height: 1.4; }

/* Short/laptop screens: shave the visual first, never the words. */
/* Progressive tightening so the bottom band never clips on short screens. */
@media (max-height: 900px) {
  .ov-top .constellation { height: min(100%, 48vh); }
  .oneview .hero-tag { font-size: clamp(13px, 1.85vh, 17px); }
}
@media (max-height: 780px) {
  .ov-top .constellation { height: min(100%, 43vh); }
  .oneview .proof-social { margin-top: 6px; }
  .oneview .eyebrow-hero, .oneview .hero-built { font-size: clamp(26px, 4.8vh, 48px); }
  .ov-fine { display: none; }   /* the guarantees repeat on /book/ */
}

/* Narrow: stack, and allow scrolling ONLY here — a phone cannot show this
   much at once, and an unreachable button is worse than a scrollbar. */
@media (max-width: 900px) {
  html, body { overflow-y: auto; }
  .oneview { height: auto; min-height: 100svh; }
  .ov-in { height: auto; gap: 28px; }
  .ov-top { grid-template-columns: 1fr; gap: 22px; }
  .ov-top .hero-right { order: -1; }
  .ov-top .constellation { height: auto; width: min(360px, 78vw); }
  .ov-bottom { grid-template-columns: 1fr; gap: 20px; }
  .ov-tiers { grid-template-columns: 1fr; gap: 16px; }
  .ov-close { align-items: stretch; text-align: left; }
  .ov-fine { text-align: left; max-width: none; }
  .ov-cta { justify-content: center; }
}

/* ------------------------------------------------ hero copy (James, 2026-08-22)
   Exact wording supplied by James. Three beats:
     1. the problem + the reassurance  ("behind on AI" / "we've got you covered")
     2. the offer                      (already built / AI workforce / every dept)
     3. the speed                      ("Ready in 48 hours.")
   Beat 3 is the differentiator against 6-month consulting builds, so it gets
   its own line and amber weight rather than being buried in the paragraph. */
.hero-tag-covered { display: block; color: var(--ink); font-weight: 700; }
.oneview .hero-tag-2 {
  margin-top: clamp(5px, .9vh, 11px);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 34ch;
}
.hero-ready {
  margin: clamp(7px, 1.3vh, 15px) 0 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.018em;
  font-size: clamp(15px, 2.25vh, 23px);
  color: var(--accent-deep);
  line-height: 1.1;
}

/* ------------------------------------------- hero balance fixes (2026-08-22)
   1. The copy column ended ~x615 while the cluster began ~x1190 on a 1920
      frame: ~570px of dead canvas. The text read as pinned to the left edge
      instead of composed against the graphic. Give the measure real width and
      close the gap.
   2. "Ready in 48 hours." was the same size AND weight as the subhead, so the
      two bold lines read as peers. It is the differentiator against a
      six-month consulting build, so it becomes a distinct kicker: smaller,
      tracked out, uppercase, with a rule — reads as a stamp, not a sentence. */
@media (min-width: 1100px) {
  .ov-top { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 40px); }
  .oneview .hero-tag   { max-width: 30ch; }
  .oneview .hero-tag-2 { max-width: 44ch; }   /* kills the 3-line widow */
}

.hero-ready {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans);
  font-size: clamp(10.5px, 1.42vh, 13px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.hero-ready::before {
  content: ""; width: clamp(16px, 2vw, 30px); height: 2px;
  background: var(--accent); border-radius: 2px; flex: none;
}

/* The rejected line should not carry the same weight as the answer. */
.oneview .eyebrow-hero { font-size: clamp(24px, 4.5vh, 55px); }