/* ==========================================================================
   TEAM STRATEGY — Design System v1
   Align. Execute. Scale.
   --------------------------------------------------------------------------
   Architecture: two-tone. Deep-black bands carry brand + authority moments.
   Bone/white bands carry reading-heavy content. Gold is an accent, never a
   wallpaper. Never set --gold as text on a light surface (1.95:1) — use
   --gold-ink (6.3:1).
   ========================================================================== */


/* ---------- Self-hosted fonts ----------
   Previously fetched from fonts.googleapis.com at runtime. These are the exact
   .woff2 files Google serves for the same families, weights and subsets — not
   re-generated or re-subset — so appearance and metrics are unchanged. The
   unicode-range values are Google's, so the browser still downloads only the
   subsets a page actually needs. Licences and provenance: assets/fonts/LICENSES.txt
   (all three are SIL OFL 1.1; the licence must travel with the files). */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500 900;
  font-display:swap;
  src:url('../fonts/montserrat-500-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500 900;
  font-display:swap;
  src:url('../fonts/montserrat-500-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Fallback metrics ----------
   Arial/Helvetica tuned to IBM Plex Sans' advance widths so the font swap
   does not shift layout. Values measured, not guessed. */
@font-face{
  font-family:'Plex Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:101.6%;   /* measured: Plex Sans advance / Arial advance */
  ascent-override:78%;  /* Plex Sans ascender 780/1000 */
  descent-override:22%; /* Plex Sans descender 220/1000 */
  line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --gold:#D4AF37;
  --gold-2:#B8860B;
  --gold-3:#8B6F3E;
  --gold-lite:#EBD27A;
  --gold-ink:#6F5729;          /* gold-toned TEXT on light surfaces */
  --gold-grad:linear-gradient(135deg,#F6E9B4 0%,#DCC066 16%,#D4AF37 34%,#9C7226 54%,#CDA845 72%,#8B6F3E 100%);
  --gold-grad-soft:linear-gradient(135deg,#E8CE7A 0%,#D4AF37 48%,#9C7226 100%);
  /* Gradient-clipped text on LIGHT surfaces. The soft gradient above measures
     1.44:1 and 1.95:1 at its lighter stops on --paper and must never be used
     for text there. Every stop below clears 3:1 for large text. */
  --gold-grad-ink:linear-gradient(135deg,#8B6F3E 0%,#6F5729 55%,#5A4620 100%);

  /* Dark surfaces */
  --ink-900:#0B0B0B;
  --ink-850:#101012;
  --ink-800:#151517;
  --ink-750:#1B1B1E;
  --ink-700:#212125;
  --ink-600:#2C2C31;

  /* Light surfaces */
  --paper:#F7F6F3;
  --paper-2:#FFFFFF;
  --paper-3:#EFEDE7;

  /* Text */
  --on-dark:#FFFFFF;
  --on-dark-2:#A7A7A7;
  --on-dark-3:#8A8A90;
  --on-light:#121214;
  --on-light-2:#4E4E56;
  --on-light-3:#6B6B74;

  --line-dark:rgba(255,255,255,.09);
  --line-dark-2:rgba(255,255,255,.16);
  --line-light:rgba(18,18,20,.12);
  --line-gold:rgba(212,175,55,.34);

  /* Scale */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;   --s10:8rem;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:22px;
  --maxw:1180px;
  --maxw-narrow:760px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:150ms; --t:240ms; --t-slow:600ms;

  --shadow-lift:0 18px 50px -22px rgba(0,0,0,.55);
  --shadow-gold:0 14px 44px -18px rgba(212,175,55,.42);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding follows the header's measured height (set by site.js), because
   the header wraps and grows taller when text is enlarged. 92px is the
   no-JS fallback for the unwrapped header. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h,92px)}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--on-dark);
  font-family:'IBM Plex Sans','Plex Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:Montserrat,sans-serif;margin:0;line-height:1.05;letter-spacing:-.025em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
/* Focus rings are surface-aware. Gold measures 9:1 on the dark bands but only
   1.95:1 on --paper, and 1:1 on a gold-filled control — both below the 3:1
   required for non-text UI. Light surfaces and gold fills get an ink ring
   (18:1 on paper) instead. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.band--light :focus-visible,
.band--light-2 :focus-visible,
.form-card :focus-visible,
.card--light :focus-visible,
.resp__col :focus-visible,
.aes__item :focus-visible{outline-color:var(--ink-900)}
/* Gold-filled controls: the ring would sit on, or read against, gold. */
.skip:focus-visible{outline-color:var(--on-dark)}   /* ring lands on the dark page */
/* Input focus ring is defined with the form controls further down, after the
   `.input:focus{outline:0}` reset that would otherwise cancel it. */
::selection{background:var(--gold);color:var(--ink-900)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px, 5vw, 40px)}
.narrow{max-width:var(--maxw-narrow)}
.band{padding-block:clamp(72px, 10vw, 128px);position:relative}
.band[id],section[id]{scroll-margin-top:var(--header-h,92px)}
.band--tight{padding-block:clamp(56px, 7vw, 88px)}
/* The showpiece sections get more air than the reading sections, so page
   rhythm comes from deliberate variation rather than one repeated value. */
.band--loose{padding-block:clamp(88px, 12vw, 156px)}
.band--dark{background:var(--ink-900);color:var(--on-dark)}
.band--dark-2{background:var(--ink-850);color:var(--on-dark)}
.band--light{background:var(--paper);color:var(--on-light)}
.band--light-2{background:var(--paper-2);color:var(--on-light)}
.band--light h2,.band--light h3,.band--light-2 h2,.band--light-2 h3{color:var(--on-light)}
.band--hairline-top{border-top:1px solid var(--line-dark)}
.band--light + .band--light-2,.band--light-2 + .band--light{border-top:1px solid var(--line-light)}

/* Subtle gold field, used sparingly on dark bands */
.band--field::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(212,175,55,.10),transparent 62%),
    radial-gradient(80% 50% at 12% 100%,rgba(212,175,55,.05),transparent 70%);
}
.band > .wrap{position:relative;z-index:1}

/* ---------- Type ---------- */
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);flex:none}
.band--light .eyebrow,.band--light-2 .eyebrow{color:var(--gold-ink)}
.band--light .eyebrow::before,.band--light-2 .eyebrow::before{background:var(--gold-ink)}

.display{font-size:clamp(2.5rem, 1.3rem + 4.6vw, 4.75rem);font-weight:800;letter-spacing:-.035em;line-height:.99;text-wrap:balance}
.h2{font-size:clamp(1.95rem, 1.3rem + 2.5vw, 3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;max-inline-size:22ch}
.h2--wide{max-inline-size:30ch}
/* A second, quieter display voice. Used only on the two short "rest stop"
   sections so the page has something below a shout — not a site-wide
   switch to light headings. */
.h2--quiet{font-weight:600;letter-spacing:-.018em;line-height:1.1}
.h3{font-size:clamp(1.15rem, 1.05rem + .45vw, 1.4rem);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.h4{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}

.lead{font-size:clamp(1.09rem, 1.02rem + .4vw, 1.3rem);line-height:1.58;color:var(--on-dark-2);max-inline-size:60ch}
.band--light .lead,.band--light-2 .lead{color:var(--on-light-2)}
.body{color:var(--on-dark-2);max-inline-size:66ch}
.band--light .body,.band--light-2 .body{color:var(--on-light-2)}
.small{font-size:.9rem;line-height:1.6;color:var(--on-dark-3)}
.band--light .small,.band--light-2 .small{color:var(--on-light-3)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

.gold{color:var(--gold)}
.band--light .gold,.band--light-2 .gold{color:var(--gold-ink)}
.gold-grad{background:var(--gold-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.dim{color:var(--on-dark-2)}
.band--light .dim,.band--light-2 .dim{color:var(--on-light-2)}
.strike{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--gold);opacity:.55}

.sec-head{margin-bottom:clamp(40px, 5vw, 64px)}
.sec-head .lead{margin-top:var(--s5)}
/* A second section-header arrangement, so the page isn't one
   heading-over-paragraph stack repeated in every band. Collapses to the normal
   stack once there isn't room for two columns. */
.sec-head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:var(--s5) clamp(32px, 5vw, 72px);align-items:end}
.sec-head--split .lead{margin-top:0;max-inline-size:52ch}
@media (max-width:880px){.sec-head--split{grid-template-columns:1fr;align-items:start}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:52px;padding:0 var(--s6);border-radius:var(--r);
  font-family:Montserrat,sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.btn--primary{background:var(--gold-grad-soft);color:#0B0B0B;box-shadow:var(--shadow-gold)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 52px -16px rgba(212,175,55,.58)}
.btn--ghost{border-color:var(--line-dark-2);color:var(--on-dark);background:transparent}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.06)}
.band--light .btn--ghost,.band--light-2 .btn--ghost{border-color:var(--line-light);color:var(--on-light)}
.band--light .btn--ghost:hover,.band--light-2 .btn--ghost:hover{border-color:var(--gold-ink);color:var(--gold-ink);background:rgba(212,175,55,.08)}
.btn--lg{min-height:60px;padding:0 var(--s7);font-size:.95rem}
.btn--block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:Montserrat,sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;color:var(--gold);
  border-bottom:1px solid var(--line-gold);padding-bottom:3px;
  transition:gap var(--t) var(--ease),border-color var(--t) var(--ease);
}
.band--light .link-arrow,.band--light-2 .link-arrow{color:var(--gold-ink);border-color:rgba(111,87,41,.4)}
.link-arrow:hover{gap:var(--s4);border-color:currentColor}
/* The visible underline stays tight to the text; an invisible pseudo-element
   expands the touch target to >=44px without moving the rule. */
.link-arrow{position:relative}
.link-arrow::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;
  transform:translateY(-50%);height:44px}
.link-arrow svg{width:14px;height:14px;flex:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,11,11,.82);
  /* Safari only dropped the prefix in 18; without it the sticky header
     on Safari 15-17 and iOS 15/16 loses the blur and page content shows
     through the 82% background. */
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);transition:background var(--t),border-color var(--t)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:88px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none;min-height:44px}
/* Brand lockup. Three separate files from the delivery — mark, rule and
   wordmark — each sized independently, plus the tagline set as live text
   beneath the wordmark (never beneath the mark or the whole lockup).

   The delivered vector tagline is 16 of 343 canvas units, which renders at
   2.6px in this bar. It is therefore re-set here in Montserrat at 12px:
   white lettering, gold stops, as delivered. The vector tagline is NOT in
   logo-wordmark.svg, so it is never drawn twice.

   Sizes are measured, not guessed. Wordmark aspect is 4.054:1, so 42px tall
   is 170px wide; "ALIGN. EXECUTE. SCALE." at 12px/.07em measures 171px. The
   tagline therefore sits flush under the wordmark the way it does in the
   delivered artwork. Change one and re-measure the other. */
.brand{--mark-h:72px;--word-h:42px;--tag-size:.75rem;--tag-track:.07em;gap:12px}
.brand__mark{display:block;height:var(--mark-h);width:auto;flex:none}
.brand__divider{display:block;height:calc(var(--mark-h) * .82);width:auto;flex:none}
/* align-items:flex-start is load-bearing: the default `stretch` on a column
   flex sets the child's cross size, which overrode width:auto on the wordmark
   and stretched it to the tagline's width — 24% wider than delivered. */
.brand__name{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:5px}
.brand__wordmark{display:block;height:var(--word-h);width:auto}
.brand__tagline{font-family:Montserrat,sans-serif;font-weight:600;
  font-size:var(--tag-size);letter-spacing:var(--tag-track);
  text-transform:uppercase;color:#fff;line-height:1;white-space:nowrap}
.brand__tagline span{color:var(--gold)}
/* The footer band has room, so the lockup runs larger there. */
.site-footer .brand{--mark-h:84px;--word-h:48px;--tag-size:.8125rem;--tag-track:.09em}

.nav{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
/* :not(.btn) — the drawer's "Analyze My Audience" is an <a class="btn
   btn--primary"> inside .nav, and `.nav a` (0-1-1) outranks `.btn--primary`
   (0-1-0), so it was painting the button's label in the grey link colour:
   1.03:1 on the gold gradient. Invisible on mobile only, because the desktop
   copy of that button lives in .header-cta and this one is display:none. */
.nav a:not(.btn){
  text-decoration:none;font-size:.88rem;font-weight:500;color:var(--on-dark-2);
  padding:6px 2px;position:relative;transition:color var(--t) var(--ease);
}
.nav a:not(.btn):hover{color:#fff}
.nav a[aria-current="page"]:not(.btn){color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.nav > .btn{display:none}
.header-cta{display:flex;align-items:center;gap:var(--s4)}
.header-cta .btn{min-height:44px;padding:0 var(--s5);font-size:.78rem}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-dark-2);border-radius:var(--r-sm);cursor:pointer}
.nav-toggle svg{width:20px;height:20px;color:#fff}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* Narrow desktop. The lockup is deliberately large now, so between the drawer
   breakpoint and ~1180px the row is tight: brand + nav + CTA would exceed the
   line and .site-header__inner would wrap to two rows, dropping the nav under
   the logo. Measured, not predicted. Everything tightens a step here — the
   tagline holds at 12px, which is the one thing that must not shrink. */
@media (max-width:1180px) and (min-width:941px){
  .site-header__inner{gap:var(--s4)}
  .brand{--mark-h:56px;--word-h:40px;--tag-size:.75rem;--tag-track:.04em;gap:10px}
  .nav{gap:var(--s4)}
  .header-cta .btn{padding:0 var(--s4)}
}

@media (max-width:940px){
  .nav-toggle{display:flex}
  .header-cta .btn{display:none}
  .nav{
    position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-850);border-bottom:1px solid var(--line-dark);
    padding:var(--s4) clamp(20px, 5vw, 40px) var(--s6);
    transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),
               visibility 0s linear var(--t);
  }
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto;visibility:visible;
    transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s}
  .nav a:not(.btn){padding:var(--s4) 0;font-size:1.05rem;border-bottom:1px solid var(--line-dark)}
  /* Phone: the full name AND the tagline stay. The mark gives up height
     first — the wordmark barely shrinks, because it is the part that has to
     stay readable. Tagline holds at 12px. */
  .site-header__inner{min-height:76px}
  .brand{--mark-h:56px;--word-h:40px;--tag-size:.75rem;--tag-track:.04em;gap:10px}
  .site-footer .brand{--mark-h:64px;--word-h:42px;--tag-size:.75rem;--tag-track:.05em}
  .nav a[aria-current="page"]::after{display:none}
  .nav > .btn{display:inline-flex;margin-top:var(--s5);min-height:52px;font-size:.85rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(40px, 5vw, 76px) clamp(44px, 5.5vw, 84px);overflow:hidden;background:var(--ink-900)}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(74% 56% at 74% 8%,rgba(212,175,55,.16),transparent 60%),
    radial-gradient(60% 46% at 8% 92%,rgba(212,175,55,.07),transparent 66%);
}
.hero__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(70% 62% at 50% 34%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 34%,#000 10%,transparent 78%);
}
.hero__field{position:absolute;inset:0;pointer-events:none}
.hero__field canvas{display:block;width:100%;height:100%}
.hero__field[hidden]{display:none}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(36px, 4vw, 60px);align-items:center}
@media (max-width:980px){.hero__inner{grid-template-columns:1fr;gap:var(--s7)}}

/* Mobile hero: headline, explanation and CTA are designed as one opening unit;
   the analysis card follows as support rather than sprawling below it. */
@media (max-width:720px){
  .hero{padding-block:var(--s7) var(--s8)}
  .hero .pill{margin-bottom:var(--s5)}
  .hero .display{max-inline-size:none;font-size:clamp(2.3rem, 1.15rem + 5.6vw, 2.85rem);line-height:1.03;letter-spacing:-.032em}
  .hero__sub{margin-top:var(--s5);font-size:1.02rem;line-height:1.55;max-inline-size:38ch}
  .hero__cta{margin-top:var(--s6);gap:var(--s3)}
  .hero__cta .btn{width:100%}
  .hero__note{margin-top:var(--s5)}
  .hero__inner{gap:var(--s6)}
}
/* The hero headline is the one place the page uses weight, not size, to
   separate two ideas: the statement about the visitor is set lighter than
   the statement about us. Both lines stay the same size. */
.hero .display{font-size:clamp(2.4rem, 1rem + 3.4vw, 3.6rem);letter-spacing:-.033em;line-height:1.03}
.hero .display .line-1{font-weight:600;color:var(--on-dark)}
.hero .display span{display:block}
/* Laptop-class viewports are wide but short: 1280x720 and 1440x789 both leave
   less vertical room than a 900px-tall window. Trim the opening unit there so
   the headline, the paragraph, both buttons and the trust note all sit above
   the fold. Sizes stay fluid — no fixed line breaks. */
@media (min-width:1024px) and (max-height:820px){
  .hero{padding-block:clamp(32px, 4.2vw, 60px) clamp(36px, 4.6vw, 66px)}
  .hero .display{font-size:clamp(2.15rem, .88rem + 2.95vw, 3.1rem);line-height:1.04}
  .hero .pill{margin-bottom:var(--s4)}
  .hero__sub{margin-top:var(--s4);font-size:1.03rem;line-height:1.55}
  .hero__cta{margin-top:var(--s5)}
  .hero__cta .btn--lg{min-height:54px}
  .hero__note{margin-top:var(--s4);font-size:.84rem}
}
/* The opposite case: a large, tall window left ~370px of empty space under the
   opening unit. Give the headline and the surrounding air room to grow there. */
@media (min-width:1600px) and (min-height:900px){
  .hero{padding-block:clamp(72px, 5.5vw, 116px) clamp(72px, 5.5vw, 108px)}
  .hero .display{font-size:clamp(3.6rem, 1.15rem + 3.1vw, 4.25rem)}
}
.hero .display .line-2{background:var(--gold-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin-top:var(--s5);max-inline-size:50ch}
.hero__cta{margin-top:clamp(26px, 3vw, 36px)}
.hero__note{margin-top:var(--s4);display:flex;align-items:flex-start;gap:var(--s3);color:var(--on-dark-3);font-size:.86rem;max-inline-size:56ch}
.hero__note svg{width:15px;height:15px;color:var(--gold);flex:none;margin-top:3px}

.pill{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:7px 14px 7px 11px;border:1px solid var(--line-gold);border-radius:999px;
  background:rgba(212,175,55,.06);margin-bottom:var(--s6);
}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.pill span{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lite)}

/* ---------- Cards ---------- */
.card{
  background:var(--ink-800);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:clamp(22px, 2.6vw, 32px);position:relative;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background-color var(--t) var(--ease);
}
.card:hover{border-color:var(--line-dark-2)}
.card--light{background:var(--paper-2);border-color:var(--line-light);box-shadow:0 1px 2px rgba(18,18,20,.04)}
.card--light:hover{border-color:rgba(18,18,20,.2)}
.card--gold{border-color:var(--line-gold);background:linear-gradient(180deg,rgba(212,175,55,.07),rgba(212,175,55,.02))}
.card__icon{width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;border:1px solid var(--line-gold);background:rgba(212,175,55,.08);margin-bottom:var(--s5)}
.card__icon svg{width:19px;height:19px;color:var(--gold)}
.card--light .card__icon{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.45)}
.card--light .card__icon svg{color:var(--gold-ink)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--on-dark-2);font-size:.98rem}
.card--light p{color:var(--on-light-2)}

.grid{display:grid;gap:var(--s5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:920px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Split (two-column feature) ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px, 5vw, 72px);align-items:center}
.split--top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------- The Gap (audience vs income) ---------- */
.gap-chart{display:grid;gap:var(--s5)}
.gap-row{display:grid;grid-template-columns:1fr;gap:10px}
.gap-row__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.gap-row__label{font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.gap-row__meta{font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--on-light-3)}
.gap-track{height:12px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.gap-fill{height:100%;border-radius:999px;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.is-revealed .gap-fill{transform:scaleX(var(--fill,.5))}
@media (prefers-reduced-motion:reduce){.gap-fill{transition:none;transform:scaleX(var(--fill,.5))}}
.gap-fill--up{background:linear-gradient(90deg,#2B2B30,#121214)}
.gap-fill--flat{background:var(--gold-grad-soft)}
.gap-note{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line-light)}

/* ---------- Signal grid (you don't need a million followers) ---------- */
.signal-grid{display:flex;flex-wrap:wrap;gap:10px}
.signal{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;border:1px solid var(--line-dark);
  background:var(--ink-800);font-size:.87rem;color:var(--on-dark-2);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.signal::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.75;flex:none}
.signal:hover{border-color:var(--line-gold);color:#fff;background:rgba(212,175,55,.06)}
.signal--muted{color:var(--on-dark-3);border-style:dashed}
.signal--muted::before{background:var(--on-dark-3);opacity:.6}
.signal--muted:hover{border-color:var(--line-dark-2);color:var(--on-dark-2);background:var(--ink-800)}

/* ---------- Fragment → System visual ---------- */
  /* Wraps rather than clips: at 200% text zoom these two tracked mono
     labels are wider than the card, and .converge hides its overflow. */
  flex-wrap:wrap;padding-bottom:var(--s3);border-bottom:1px solid var(--line-dark);margin-bottom:var(--s4)}
.chip{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.06em;
  padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line-dark);
  background:var(--ink-800);color:var(--on-dark-3);
  /* Not nowrap: at 200% text zoom a long chip outgrew the card, which
     clips its overflow, and the end of the label was cut off. Wrapping
     inside the pill keeps every word readable. */
  max-width:100%;overflow-wrap:break-word;
}
/* The recommended product carries the same name as the first row of the board
   below, so the hero shows a fragment of the same worked example rather than a
   second, unrelated mock. */
/* Names the fictional scenario inside the card, so the example is legible
   without scrolling 9,000px to the opportunity board that explains it. */
  font-size:.86rem;line-height:1.5;color:var(--on-dark-3);
  margin:0 0 var(--s4);
}
/* The proposed next step. Conditional tense on purpose: nothing here has been
   built, and the card must not imply it has. */
  margin-top:var(--s4);padding-top:12px;border-top:1px solid var(--line-gold);
  font-size:.86rem;line-height:1.45;color:var(--on-dark-2);
}
  font-family:Montserrat,sans-serif;font-weight:800;
  font-size:clamp(1.2rem, 1.05rem + .5vw, 1.5rem);letter-spacing:-.02em;line-height:1.14;
  background:var(--gold-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-top:8px;
}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:var(--s5)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;padding-bottom:var(--s5);border-bottom:1px solid var(--line-dark)}
.band--light .step,.band--light-2 .step{border-color:var(--line-light)}
.step:last-child{border-bottom:0;padding-bottom:0}
.step__num{
  counter-increment:step;width:46px;height:46px;border-radius:var(--r-sm);flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-gold);background:rgba(212,175,55,.07);
  font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--gold);
}
.step__num::before{content:"0" counter(step)}
.band--light .step__num{color:var(--gold-ink);background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.42)}
.step h3{margin-bottom:var(--s3)}

/* ---------- Opportunity board ---------- */
.board{border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--ink-850);overflow:hidden}
/* One scenario, stated once at the top, so the three options below read as a
   single worked example rather than three unrelated cards. */
.board__scenario{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s5);align-items:baseline;
  padding:clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px);
  border-bottom:1px solid var(--line-dark);background:var(--ink-800);
}
.board__scenario p{color:var(--on-dark-2);font-size:.95rem;max-inline-size:72ch}
@media (max-width:640px){.board__scenario{grid-template-columns:1fr}}
.board__list{display:grid;gap:1px;background:var(--line-dark)}
.opp{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:start;
  padding:clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px);background:var(--ink-850);
  transition:background-color var(--t) var(--ease);
}
.opp:hover{background-color:var(--ink-800)}
.opp--top{background:linear-gradient(135deg,rgba(212,175,55,.11),rgba(212,175,55,.02)),var(--ink-850);position:relative}
/* The recommendation needs to be findable at a glance without the whole row
   shouting. A gold edge does that more quietly than a full gold card. */
.opp--top::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold-grad-soft)}
.opp--top:hover{background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(212,175,55,.03)),var(--ink-850)}
.opp__kind{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opp--top .opp__kind{color:var(--gold)}
.opp__flag{border:1px solid var(--line-gold);border-radius:999px;padding:2px 8px;color:var(--gold)}
/* The product name is the strongest text in each row. The score is a
   comparison aid, so it is set quiet and small — deliberately not the thing
   the eye lands on first. */
.opp__name{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(1.25rem, 1.1rem + .5vw, 1.55rem);letter-spacing:-.02em;line-height:1.15;color:var(--on-dark);margin-top:9px}
.opp--top .opp__name{background:var(--gold-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.opp__why{font-size:.92rem;color:var(--on-dark-2);margin-top:9px;max-inline-size:64ch}
.opp__score{text-align:right;flex:none;margin:0;padding-top:4px}
.opp__score b{display:block;font-family:'JetBrains Mono',monospace;font-size:1.12rem;font-weight:400;line-height:1;color:var(--on-dark-2);letter-spacing:0}
.opp--top .opp__score b{color:var(--gold)}
.opp__score em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-3);display:block;margin-top:6px}
.opp__flag--hold{border-color:var(--line-dark-2);color:var(--on-dark-2)}
@media (max-width:560px){
  .opp{grid-template-columns:1fr;gap:var(--s3)}
  .opp__score{text-align:left;display:flex;align-items:baseline;gap:8px}
  .opp__score em{margin-top:0}
}

.disclaimer{
  display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5);
  padding:var(--s4);border-radius:var(--r-sm);border:1px dashed var(--line-dark-2);
  color:var(--on-dark-3);font-size:.82rem;line-height:1.55;
}
.disclaimer svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--on-dark-3)}
.disclaimer span{max-inline-size:420px}   /* 13px text: ~72 chars/line */
.band--light .disclaimer,.band--light-2 .disclaimer{border-color:var(--line-light);color:var(--on-light-3)}
.band--light .disclaimer svg,.band--light-2 .disclaimer svg{color:var(--on-light-3)}

/* ---------- Pipeline ---------- */
.pipeline{display:grid;gap:var(--s5)}
.phase{border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--ink-850);overflow:hidden;transition:border-color var(--t) var(--ease)}
.phase:hover{border-color:var(--line-gold)}
.phase__head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;padding:var(--s5) clamp(18px, 2.4vw, 26px);border-bottom:1px solid var(--line-dark)}
.phase__key{font-family:Montserrat,sans-serif;font-weight:900;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;background:var(--gold-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.phase__desc{font-size:.9rem;color:var(--on-dark-2);flex:1 1 260px;min-width:0}
.phase__count{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3);flex:none}
.phase__body{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(18px, 2.4vw, 26px)}
.node{
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line-dark);background:var(--ink-800);font-size:.83rem;color:var(--on-dark-2);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease);
}
.node svg{width:13px;height:13px;color:var(--gold);flex:none;opacity:.8}
.node:hover{border-color:var(--line-gold);color:#fff;transform:translateY(-1px)}

/* Light-band variants. The consolidated Align/Execute/Scale section sits on a
   bone band so the page doesn't run four dark sections together. The gold
   gradient on --phase__key measures 1.44:1 on paper, so it swaps to the ink
   gradient exactly as .aes__key already does. */
.band--light .phase,.band--light-2 .phase{background:var(--paper-2);border-color:var(--line-light)}
.band--light .phase:hover,.band--light-2 .phase:hover{border-color:var(--line-gold)}
.band--light .phase__head,.band--light-2 .phase__head{border-bottom-color:var(--line-light)}
.band--light .phase__key,.band--light-2 .phase__key{background-image:var(--gold-grad-ink)}
.band--light .phase__desc,.band--light-2 .phase__desc{color:var(--on-light-2)}
.band--light .phase__count,.band--light-2 .phase__count{color:var(--on-light-3)}
.band--light .node,.band--light-2 .node{background:var(--paper);border-color:var(--line-light);color:var(--on-light-2)}
.band--light .node svg,.band--light-2 .node svg{color:var(--gold-ink)}
.band--light .node:hover,.band--light-2 .node:hover{border-color:var(--line-gold);color:var(--on-light)}

/* ---------- Two-column responsibilities ---------- */
.resp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:760px){.resp{grid-template-columns:1fr}}
.resp__col{border-radius:var(--r-lg);padding:clamp(24px, 3vw, 34px);border:1px solid var(--line-light);background:var(--paper-2)}
.resp__col--gold{border-color:rgba(212,175,55,.5);background:linear-gradient(180deg,rgba(212,175,55,.09),rgba(212,175,55,.03))}
.resp__col h3{margin-bottom:var(--s5)}
.checklist li{display:flex;gap:var(--s3);align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-light);font-size:.96rem;color:var(--on-light-2)}
.checklist li:first-child{border-top:0;padding-top:0}
.checklist svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--gold-ink)}
.checklist--neutral svg{color:var(--on-light-3)}

/* ---------- Fit lists (who we work with / who we don't) ---------- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:760px){.fit{grid-template-columns:1fr}}
.fit__col{border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(24px, 3vw, 34px);background:var(--ink-800)}
.fit__col--yes{border-color:var(--line-gold);background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(212,175,55,.02))}
.fit__col h3{margin-bottom:var(--s5)}
.fit ul li{display:flex;gap:var(--s3);align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-dark);color:var(--on-dark-2);font-size:.96rem}
.fit ul li:first-child{border-top:0;padding-top:0}
.fit svg{width:15px;height:15px;flex:none;margin-top:4px}
.fit__col--yes svg{color:var(--gold)}
.fit__col--no svg{color:var(--on-dark-3)}

/* Light-band variants. Moving the Fit comparison onto a bone band left the
   dark-surface text colour (#A7A7A7) sitting on --paper at 2.23:1, well under
   AA. Surface, rules and icons all follow the band. */
.band--light .fit__col,.band--light-2 .fit__col{background:var(--paper-2);border-color:var(--line-light)}
.band--light .fit__col--yes,.band--light-2 .fit__col--yes{
  border-color:var(--line-gold);
  background:linear-gradient(180deg,rgba(212,175,55,.11),rgba(212,175,55,.03)),var(--paper-2)}
.band--light .fit ul li,.band--light-2 .fit ul li{color:var(--on-light-2);border-top-color:var(--line-light)}
.band--light .fit__col--yes svg,.band--light-2 .fit__col--yes svg{color:var(--gold-ink)}
.band--light .fit__col--no svg,.band--light-2 .fit__col--no svg{color:var(--on-light-3)}

/* ---------- Stat / number blocks ---------- */
.aes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media (max-width:820px){.aes{grid-template-columns:1fr}}
.aes__item{border-top:2px solid transparent;padding-top:var(--s5);position:relative}
.aes__item::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:var(--line-gold);transform-origin:left center;
  transition:transform 340ms var(--ease);
}
.band--light .aes__key,.band--light-2 .aes__key{background-image:var(--gold-grad-ink)}
.aes__key{font-family:Montserrat,sans-serif;font-weight:900;font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);letter-spacing:-.02em;background:var(--gold-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:var(--s3);display:block}
.aes__item p{color:var(--on-dark-2);font-size:.96rem}
.band--light .aes__item p,.band--light-2 .aes__item p{color:var(--on-light-2)}

/* ---------- Quote / objection cards ---------- */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:760px){.voices{grid-template-columns:1fr}}
.voice{
  border-left:2px solid var(--line-gold);padding:var(--s4) 0 var(--s4) var(--s5);
  font-size:1rem;line-height:1.55;color:var(--on-light-2);font-style:italic;
}
.band--dark .voice,.band--dark-2 .voice{color:var(--on-dark-2)}

/* ---------- Economics ---------- */
.econ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:820px){.econ{grid-template-columns:1fr}}
.econ__cell{background:var(--ink-850);padding:clamp(24px, 3vw, 34px)}
.econ__cell--gold{background:linear-gradient(160deg,rgba(212,175,55,.12),rgba(212,175,55,.03))}
.econ__cell h3{margin-bottom:var(--s3)}
.econ__cell p{color:var(--on-dark-2);font-size:.95rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-light)}
.band--dark .faq,.band--dark-2 .faq{border-color:var(--line-dark)}
.faq__item{border-bottom:1px solid var(--line-light)}
.band--dark .faq__item,.band--dark-2 .faq__item{border-color:var(--line-dark)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:Montserrat,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.35;
  color:var(--on-light);transition:color var(--t) var(--ease);min-height:56px;
}
.band--dark .faq__q,.band--dark-2 .faq__q{color:#fff}
.faq__q:hover{color:var(--gold-ink)}
.band--dark .faq__q:hover,.band--dark-2 .faq__q:hover{color:var(--gold)}
.faq__ico{width:22px;height:22px;flex:none;position:relative;margin-top:3px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--gold-ink);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.band--dark .faq__ico::before,.band--dark .faq__ico::after,.band--dark-2 .faq__ico::before,.band--dark-2 .faq__ico::after{background:var(--gold)}
.faq__ico::before{top:10px;left:2px;width:18px;height:2px}
.faq__ico::after{top:2px;left:10px;width:2px;height:18px}
.faq__q[aria-expanded="true"] .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.faq__a[data-open="true"]{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding-bottom:var(--s5);color:var(--on-light-2);max-inline-size:68ch;font-size:.99rem}
.band--dark .faq__a p,.band--dark-2 .faq__a p{color:var(--on-dark-2)}
.faq__a p + p{padding-top:var(--s4)}
@media (prefers-reduced-motion:reduce){.faq__a{transition:none}}

/* ---------- Proof placeholder ---------- */
.proof{border:1px dashed var(--line-dark-2);border-radius:var(--r-lg);padding:clamp(28px, 4vw, 48px);background:var(--ink-850);text-align:center}
/* .proof is deliberately a dark note card. Inside a light band it would
   otherwise inherit that band's ink text colours and render near-black text on
   a near-black card — the same failure the aside cards had. Restore the
   on-dark scale, and keep a gold focus ring since the ring lands on the card. */
.band--light .proof,.band--light-2 .proof{background:var(--ink-850);border-color:var(--line-dark-2)}
.band--light .proof h2,.band--light .proof h3,
.band--light-2 .proof h2,.band--light-2 .proof h3{color:var(--on-dark)}
.band--light .proof .lead,.band--light .proof .body,.band--light .proof .small,
.band--light-2 .proof .lead,.band--light-2 .proof .body,.band--light-2 .proof .small{color:var(--on-dark-2)}
.band--light .proof a,.band--light-2 .proof a{color:var(--gold)}
.proof :focus-visible{outline-color:var(--gold)}

/* ---------- Founder ----------
   A real person attached to the partnership. Both placements are dark cards so
   the photograph's own dark background meets the surface cleanly rather than
   floating on bone. Every image carries explicit width/height and an
   aspect-ratio box, so nothing reflows when the file arrives. */
.founder{
  border:1px solid var(--line-dark-2);border-radius:var(--r-lg);background:var(--ink-850);
  padding:clamp(22px, 3vw, 38px);
  display:grid;grid-template-columns:minmax(0,clamp(240px, 30vw, 352px)) minmax(0,1fr);
  gap:clamp(22px, 3vw, 44px);align-items:center;text-align:left;
}
.founder__photo{margin:0;flex:none}
.founder__photo img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line-dark-2);background:var(--ink-800);
}
.founder__name{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--s3);
}
.founder h2,.founder h3{color:var(--on-dark)}
.founder p{color:var(--on-dark-2)}
.founder .link-arrow{margin-top:var(--s5);display:inline-flex}
/* Inside a light band the card keeps its own dark scale. */
.band--light .founder h2,.band--light .founder h3,
.band--light-2 .founder h2,.band--light-2 .founder h3{color:var(--on-dark)}
.band--light .founder p,.band--light-2 .founder p{color:var(--on-dark-2)}
.band--light .founder .small,.band--light-2 .founder .small{color:var(--on-dark-3)}
.band--light .founder a,.band--light-2 .founder a{color:var(--gold)}
.founder :focus-visible{outline-color:var(--gold)}
@media (max-width:760px){
  .founder{grid-template-columns:1fr;gap:var(--s5)}
  /* Stacked, the portrait would otherwise run the full column height. Cap it
     and pin the crop to the top so the face stays in frame. */
  .founder__photo img{max-width:320px;aspect-ratio:4/5;object-position:50% 20%}
}

/* Supporting photograph — kept at its own 4:3 ratio at every width, so all
   eight people survive on a phone. Never cropped to portrait. */
.figure-wide{margin:0}
.figure-wide img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  border-radius:var(--r);border:1px solid var(--line-dark-2);background:var(--ink-900);
}
.figure-wide figcaption{
  margin-top:var(--s3);font-size:.88rem;color:var(--on-dark-3);
}
.band--light .figure-wide figcaption,.band--light-2 .figure-wide figcaption{color:var(--on-light-3)}
/* Empty partner/leadership slots removed. When real, permissioned results
   exist they go inside .proof as content — not as placeholder frames. */

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink-900);text-align:center}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 100%,rgba(212,175,55,.18),transparent 62%);
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band .display{margin-inline:auto;max-inline-size:18ch}
.cta-band .lead{margin:var(--s6) auto 0;text-align:center}
.cta-band .btn-row{justify-content:center;margin-top:clamp(32px, 4vw, 44px)}
.cta-band .hero__note{justify-content:center;margin-inline:auto;text-align:left}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-850);border-top:1px solid var(--line-dark);padding-block:var(--s8) var(--s6)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--line-dark)}
@media (max-width:800px){.footer__top{grid-template-columns:1fr;gap:var(--s6)}}
.footer__tag{font-family:Montserrat,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:var(--s5)}
.footer__blurb{margin-top:var(--s4);color:var(--on-dark-3);font-size:.92rem;max-inline-size:40ch}
/* Was `.footer__col h4`. The elements are <h2> now — an <h4> directly under
   the page's <h2> content headings was a 2->4 level skip on every page.
   Appearance is unchanged; only the tag and selector moved. */
.footer__heading{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:var(--s4)}
.footer__col a{display:block;padding:7px 0;text-decoration:none;color:var(--on-dark-2);font-size:.93rem;transition:color var(--t) var(--ease)}
.footer__col a:hover{color:var(--gold)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);justify-content:space-between;align-items:center;padding-top:var(--s5);color:var(--on-dark-3);font-size:.82rem}
.footer__bottom a{color:var(--on-dark-3);text-decoration:none}
.footer__bottom a:hover{color:var(--on-dark)}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--ink-900);padding-block:clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px);border-bottom:1px solid var(--line-dark)}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 78% 0%,rgba(212,175,55,.13),transparent 62%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .display{font-size:clamp(2.2rem, 1.3rem + 3.4vw, 3.7rem);max-inline-size:20ch}
.page-hero .lead{margin-top:var(--s6)}

/* ---------- Form ---------- */
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(36px, 5vw, 64px);align-items:start}
@media (max-width:980px){.form-shell{grid-template-columns:1fr}}
.form-card{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--r-lg);padding:clamp(24px, 3.4vw, 40px)}
.progress{margin-bottom:var(--s6)}
.progress__meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:10px}
.progress__step{font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.progress__name{font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-3)}
.progress__track{height:4px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.progress__fill{height:100%;border-radius:999px;background:var(--gold-grad-soft);width:25%;transition:width var(--t-slow) var(--ease)}
@media (prefers-reduced-motion:reduce){.progress__fill{transition:none}}

.fs{border:0;padding:0;margin:0}
.fs[hidden]{display:none}
.fs__title{margin-bottom:var(--s3)}
.fs__intro{color:var(--on-light-2);font-size:.97rem;margin-bottom:var(--s6);max-inline-size:56ch}
.field{margin-bottom:var(--s5)}
.field > label,.legend{display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--on-light);margin-bottom:8px}
.field .opt{font-weight:500;color:var(--on-light-3);letter-spacing:0;text-transform:none}
.hint{font-size:.85rem;color:var(--on-light-3);margin-bottom:10px;line-height:1.5}

/* Branch notes and the under-13 stop inside the application form. */
.fs__note{
  display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--line-gold);border-radius:var(--r);
  background:rgba(212,175,55,.07);padding:14px 16px;margin-bottom:var(--s5);
  font-size:.92rem;line-height:1.55;color:var(--on-light-2);
}
.fs__note svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--gold-ink)}
.fs__note strong{color:var(--on-light)}
.fs__stop{
  border:1px solid var(--line-light);border-radius:var(--r-lg);
  background:var(--paper);padding:clamp(20px, 3vw, 30px);margin-bottom:var(--s5);
}
.fs__stop .fs__note{margin-bottom:0}
.fs__stop a{color:var(--gold-ink);font-weight:600}
/* A single standalone checkbox reads better with a little separation from the
   question above it than the stacked choice groups do. */
.opt-in{border-top:1px solid var(--line-light);padding-top:var(--s5);margin-top:var(--s6)}
.choice--single{margin-bottom:10px}
.input,.select,.textarea{
  width:100%;min-height:50px;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid rgba(18,18,20,.2);background:var(--paper-2);color:var(--on-light);
  font-size:1rem;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.textarea{min-height:110px;resize:vertical;line-height:1.55}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234E4E56' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(18,18,20,.36)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(212,175,55,.22)}
/* Keyboard focus needs a real ring: the border+glow alone measured under 3:1
   and outline:0 above cancels the global rule. */
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  outline:2px solid var(--ink-900);outline-offset:1px}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 3px rgba(180,35,24,.14)}
.err{display:none;align-items:center;gap:7px;margin-top:7px;color:#B42318;font-size:.85rem}
.err[data-show="true"]{display:flex}
.err svg{width:14px;height:14px;flex:none}

.choices{display:grid;gap:10px}
.choice{
  display:flex;gap:var(--s3);align-items:flex-start;padding:14px 16px;min-height:56px;
  border:1px solid rgba(18,18,20,.18);border-radius:var(--r-sm);cursor:pointer;
  transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.choice:hover{border-color:rgba(18,18,20,.36);background:rgba(212,175,55,.04)}
.choice input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold-2);flex:none;cursor:pointer}
.choice span{font-size:.96rem;line-height:1.45}
.choice em{display:block;font-style:normal;font-size:.85rem;color:var(--on-light-3);margin-top:3px}
.choice:has(input:checked){border-color:var(--gold-2);background:rgba(212,175,55,.08)}
.choice:has(input:focus-visible){outline:2px solid var(--ink-900);outline-offset:2px}   /* white card: gold reads 1.95:1 */

.form-nav{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line-light);flex-wrap:wrap}
.btn--back{background:none;border:0;color:var(--on-light-2);font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;min-height:44px;padding:0 4px;display:inline-flex;align-items:center;gap:8px}
.btn--back:hover{color:var(--on-light)}
.btn--back svg{width:14px;height:14px}
.btn--back[hidden]{visibility:hidden;display:inline-flex!important}   /* keeps the row's space so Continue stays right on desktop */

.aside-card{background:var(--ink-850);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(22px, 2.8vw, 30px);color:var(--on-dark);position:sticky;top:100px}
@media (max-width:980px){.aside-card{position:static}}
.aside-card h2,.aside-card h3,.aside-card h4{color:var(--on-dark)}
.aside-card h3{margin-bottom:var(--s4)}
.aside-card ol{margin:0;padding:0;counter-reset:a;list-style:none}
.aside-card ol li{counter-increment:a;display:flex;gap:var(--s4);padding:13px 0;border-top:1px solid var(--line-dark);font-size:.92rem;color:var(--on-dark-2)}
.aside-card ol li:first-child{border-top:0}
.aside-card ol li::before{content:"0" counter(a);font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--gold);flex:none;padding-top:2px}
.aside-card__note{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line-dark);font-size:.85rem;color:var(--on-dark-3)}

.form-done{display:none;text-align:center;padding:clamp(32px, 5vw, 56px) 0}
.form-done[data-show="true"]{display:block}
.form-done__ico{width:60px;height:60px;border-radius:50%;margin:0 auto var(--s5);display:flex;align-items:center;justify-content:center;border:1px solid var(--gold-2);background:rgba(212,175,55,.12)}
.form-done__ico svg{width:26px;height:26px;color:var(--gold-ink)}
.form-done ol{text-align:left;max-width:440px;margin:var(--s6) auto 0}

/* ---------- Creator Intelligence sequence ----------
   Traces the section's own story: signals enter at the top, travel down the
   spine, and light each stage in turn, arriving at the recommendation.

   TEXT IS NEVER HIDDEN. Only decorative elements animate — the spine and the
   step markers. A visitor who reaches the section before it plays reads the
   complete section; one who arrives while it plays sees the progression. That
   is why no fallback timer is needed: nothing is ever waiting on a trigger to
   become readable. Do not reintroduce opacity/translate on .sec-head or .step. */

.sig .steps{position:relative}

/* The spine: a thread running through the step markers. Decorative only. */
.sig .steps::before{
  content:"";position:absolute;left:23px;top:12px;height:calc(100% - 24px);width:1px;
  background:linear-gradient(180deg,transparent,var(--line-gold) 9%,var(--line-gold) 91%,transparent);
  transform-origin:top center;
  transition:transform 700ms var(--ease) 80ms;
}
/* Opaque base under the tint so the spine reads as passing behind the markers. */
.sig .step__num{
  background:linear-gradient(rgba(212,175,55,.07),rgba(212,175,55,.07)),var(--ink-850);
  transition:transform 460ms var(--ease),border-color 460ms var(--ease),
             color 460ms var(--ease),box-shadow 460ms var(--ease);
}
.sig .step:nth-child(1){--d:220ms}
.sig .step:nth-child(2){--d:400ms}
.sig .step:nth-child(3){--d:580ms}
.sig .step:nth-child(4){--d:760ms}

/* Armed = pre-play. Applied by JS only. The marker digit stays legible
   (#8A8A90 on the marker face measures 5.3:1) — this is emphasis, not hiding. */
.sig[data-armed] .steps::before{transform:scaleY(0)}
.sig[data-armed] .step__num{border-color:var(--line-dark);color:var(--on-dark-3);transform:scale(.94)}

/* Play. Runs once, when the visitor actually arrives. */
.sig[data-armed][data-play] .steps::before{transform:scaleY(1)}
.sig[data-armed][data-play] .step__num{
  border-color:var(--line-gold);color:var(--gold);transform:none;
  transition-delay:var(--d);
}
/* The arrival: the recommendation settles with a little more weight. */
.sig[data-armed][data-play] .step:last-child .step__num{box-shadow:0 0 0 4px rgba(212,175,55,.10)}

/* Mobile: simplified — the spine is simply present, the markers light quickly. */
@media (max-width:760px){
  .sig .step:nth-child(1){--d:60ms}
  .sig .step:nth-child(2){--d:140ms}
  .sig .step:nth-child(3){--d:220ms}
  .sig .step:nth-child(4){--d:300ms}
  .sig[data-armed] .steps::before{transform:none}
  .sig[data-armed][data-play] .step:last-child .step__num{box-shadow:none}
}

/* Reduced motion: the finished state, immediately, even if armed. */
@media (prefers-reduced-motion:reduce){
  .sig[data-armed] .steps::before{transform:scaleY(1)}
  .sig[data-armed] .step__num{border-color:var(--line-gold);color:var(--gold);transform:none}
  .sig .step__num,.sig .steps::before{transition:none}
}

/* The Align/Execute/Scale rule-wipe sequence was removed on 16 Sep 2026: the
   block it animated left the homepage when that section merged into The Build,
   and nothing has referenced [data-aes-seq] since. `.aes` itself is still used
   on the About page and keeps its base styling above; only the sequence went.
   Its reduced-motion companion stays, because .aes__item::before still has a
   transition on it. */
@media (prefers-reduced-motion:reduce){
  .aes__item::before{transition:none}
}

/* ---------- The build: completeness cascade ----------
   Twenty-two chips fill in across the three phases. The point is volume: you
   watch the whole surface get covered. Chip labels stay legible throughout —
   only the chip's border, fill and icon animate. */
[data-build-seq] .node{transition:border-color 380ms var(--ease),background-color 380ms var(--ease)}
[data-build-seq] .node svg{transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
[data-build-seq][data-armed] .node{border-color:rgba(255,255,255,.035);background-color:transparent}
.band--light [data-build-seq][data-armed] .node,
.band--light-2 [data-build-seq][data-armed] .node{border-color:rgba(18,18,20,.05);background-color:transparent}
[data-build-seq][data-armed] .node svg{opacity:0;transform:scale(.6)}
[data-build-seq][data-armed][data-play] .node{
  border-color:var(--line-dark);background-color:var(--ink-800);transition-delay:var(--nd,0ms);
}
.band--light [data-build-seq][data-armed][data-play] .node,
.band--light-2 [data-build-seq][data-armed][data-play] .node{
  border-color:var(--line-light);background-color:var(--paper);transition-delay:var(--nd,0ms);
}
[data-build-seq][data-armed][data-play] .node svg{opacity:.8;transform:none;transition-delay:var(--nd,0ms)}
@media (prefers-reduced-motion:reduce){
  [data-build-seq][data-armed] .node{border-color:var(--line-dark);background-color:var(--ink-800)}
  .band--light [data-build-seq][data-armed] .node,
  .band--light-2 [data-build-seq][data-armed] .node{border-color:var(--line-light);background-color:var(--paper)}
  [data-build-seq][data-armed] .node svg{opacity:.8;transform:none}
  [data-build-seq] .node,[data-build-seq] .node svg{transition:none}
}

/* ---------- Reveal ----------
   Hiding is opt-in and conditional, never the default state of the document.
   `.js` is set synchronously in the head, so no-JS visitors never see a hidden
   element. `.reveal-off` is set by the head watchdog when site.js fails to
   load, is blocked, or throws before arming — so a broken controller cannot
   leave content invisible. Content is readable in every failure mode. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js .reveal.is-revealed{opacity:1;transform:none}
.js.reveal-off .reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   MOBILE & TABLET PASS
   Layout decisions for small screens, not a compressed desktop. Everything
   here is inside a media query — the desktop design is untouched.
   ========================================================================== */

/* ---- Tablet: cap the measure ----
   The ch-based caps are generous because Plex Sans' "0" is narrower than its
   average character, so at ~768px body copy was running 78-88 characters per
   line. Explicit caps below 1024px only. */
@media (max-width:1024px){
  /* px rather than ch: Plex Sans' "0" is much narrower than its average
     character, so a 62ch cap still measured 81 characters per line at 768. */
  .lead{max-inline-size:500px}
  .body,.step p,.card p,.econ__cell p,.resp__col p,.fit__col li,.aes__item p,
  .faq__a p,.voice{max-inline-size:470px}
  .small{max-inline-size:470px}          /* had no cap at all */
  .footer__bottom p{max-inline-size:460px}   /* was running 102 chars per line */
  .aside-card p,.form-done p,.fs__intro,.hint{max-inline-size:470px}

  /* Tablets are touch devices too — these were 39px, under the 44px minimum. */
  .footer__col a{display:flex;align-items:center;min-height:44px;padding:6px 0}
}

/* ---- Phone ---- */
@media (max-width:600px){

  /* Section rhythm: the homepage runs ~27 screens on a phone, so the band
     padding that reads as generous on desktop just adds scrolling here. */
  .band{padding-block:clamp(52px, 9vw, 72px)}
  .band--tight{padding-block:44px}
  .sec-head{margin-bottom:32px}

  /* Creator Intelligence: the 46px marker column plus gap left the paragraph
     250px wide — 30 characters per line, 8 lines for one step. Stack the
     marker above the text so the copy gets the full column. */
  .sig .step{grid-template-columns:1fr;gap:var(--s3);padding-bottom:var(--s5)}
  .sig .step__num{width:36px;height:36px;font-size:.7rem}
  .sig .steps::before{left:18px}
  .sig .step h3{margin-top:2px}

  /* The build: variable-width chips fell to one per row anyway, with a ragged
     right edge. Full-width uniform rows scan like a checklist instead. */
  .phase__body{display:grid;grid-template-columns:1fr;gap:5px;padding:var(--s4)}
  .node{font-size:.82rem;padding:9px 12px;justify-content:flex-start;width:100%}
  .phase__head{padding:var(--s4)}

  /* Form: primary action goes full width and last, so it sits under the thumb
     rather than floating right in a space-between row. */
  .form-nav{flex-direction:column-reverse;align-items:stretch;gap:var(--s3)}
  .form-nav .btn{width:100%}
  .btn--back{justify-content:center;min-height:48px}
  .btn--back[hidden]{display:none!important}
}

/* ---- Short phones ----
   Landscape-ish and small-screen devices (SE, older Android): trim the hero's
   vertical padding so the opening still resolves within a screen. */
@media (max-width:600px) and (max-height:700px){
  .hero{padding-block:var(--s6) var(--s7)}
  .hero .pill{margin-bottom:var(--s4)}
  .hero__sub{margin-top:var(--s4)}
  .hero__cta{margin-top:var(--s5)}
  .page-hero{padding-block:var(--s6) var(--s6)}
}

/* ---------- Mobile application bar ----------
   One button, phone widths only, shown when no other primary CTA is on screen.
   Built by site.js, so it simply never exists without JavaScript — the page
   still has its own CTAs. Hidden state uses visibility, not opacity alone, so
   the link leaves the tab order entirely and cannot be focused behind the
   scenes. No bounce, no glow, no attention animation: a fade, and only when
   motion is allowed. */
.appbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;                       /* phone-only; enabled in the query below */
  padding:10px clamp(16px,4vw,20px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(11,11,11,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-dark-2);
  transform:translateY(100%);visibility:hidden;pointer-events:none;
  transition:transform var(--t) var(--ease),visibility 0s linear var(--t);
}
.appbar[data-show="true"]{
  transform:none;visibility:visible;pointer-events:auto;
  transition:transform var(--t) var(--ease),visibility 0s;
}
.appbar .btn{width:100%;min-height:52px}
/* Narrow phones. The mark gives up height and the gaps tighten so the full
   name AND the tagline survive down to 320px — the tagline is never dropped
   and never falls below 12px. Below this the brand would collide with the
   menu button and .site-header__inner would wrap it onto two rows. */
@media (max-width:389px){
  .site-header__inner{gap:var(--s3)}
  .brand{--mark-h:46px;--word-h:39px;--tag-size:.75rem;--tag-track:.02em;gap:8px}
  .site-footer .brand{--mark-h:52px;--word-h:39px;--tag-track:.02em}
}
/* 320px is the WCAG 1.4.10 reflow width, so it has to hold. Last step:
   tracking goes to zero and the row gap tightens, which buys the ~15px the
   menu button needs. The tagline still reads at 12px. */
@media (max-width:339px){
  .site-header__inner{gap:var(--s2)}
  .brand{--mark-h:40px;--word-h:36px;--tag-track:0;gap:5px}
  .site-footer .brand{--mark-h:48px;--word-h:37px;--tag-track:0}
}

@media (max-width:760px){ .appbar{display:block} }
/* The bar overlays the end of the page, so give the document enough tail room
   that it can never sit on top of the last line of the footer. */
@media (max-width:760px){
  body:has(.appbar){padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .appbar{transition:none}
  .appbar[data-show="true"]{transition:none}
}

/* ---------- Utility ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#0B0B0B;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.rule{height:1px;background:var(--line-dark);border:0;margin:0}
.band--light .rule,.band--light-2 .rule{background:var(--line-light)}

/* ---------- Hero partnership visual ----------
   Replaces the old "example analysis" card. That card read as an analytics
   panel, which put the wrong thing first: the offer is funding, building,
   launching and operating a product, not producing a report. The espresso
   analysis example still lives in full in the Opportunity Board section, so
   nothing was lost by removing it here — this is not a duplicate of it.

   A design hypothesis about clarity, not a tested conversion claim.

   Deliberately NOT a dashboard: three steps, one product preview, one line
   about the deal. Nothing here needs hover, animation or JavaScript to be
   understood — every element is static markup and CSS. */
.offer{margin:0;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  background:var(--ink-850);padding:clamp(14px,1.5vw,20px);overflow:hidden}
.offer__flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.offer__step{text-align:center}
/* The connector is the progression. A thin gold rule with a chevron reads as
   "then" without needing a caption to say so. */
/* padding-top must clear the connector: the rule is 12px and the chevron
   sits 1px under it and is 7px tall, so the art starts below 20px or the
   chevron lands on top of the product cover. */
.offer__step + .offer__step{margin-top:var(--s3);padding-top:var(--s5);position:relative}
.offer__step + .offer__step::before{content:"";position:absolute;top:0;left:50%;
  width:1px;height:var(--s3);background:linear-gradient(180deg,transparent,var(--line-gold))}
.offer__step + .offer__step::after{content:"";position:absolute;top:calc(var(--s3) + 1px);
  left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);opacity:.75}
.offer__art{display:flex;align-items:center;justify-content:center;gap:var(--s4);
  margin-bottom:var(--s2)}
.offer__label{font-family:Montserrat,sans-serif;font-weight:600;font-size:.95rem;
  line-height:1.35;color:var(--on-dark);margin:0}
.offer__sub{font-size:.8rem;color:var(--on-dark-3);margin:5px 0 0;line-height:1.4}

/* 1. inputs */
.offer__orb{width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#F6E9B4,#D4AF37 46%,#8B6F3E);
  box-shadow:0 0 16px -4px rgba(212,175,55,.6)}
.offer__orb--b{background:radial-gradient(circle at 34% 30%,#FFFFFF,#BDBDBD 46%,#6E6E72);
  box-shadow:0 0 16px -6px rgba(255,255,255,.4)}
.offer__op{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--gold)}

/* 2. the product itself — the one thing that should read instantly */
.offer__stack{position:relative;display:block;width:92px;height:116px}
.offer__leaf{position:absolute;inset:6px -8px -6px 8px;border-radius:4px;
  background:var(--ink-700);border:1px solid var(--line-dark);transform:rotate(4deg)}
.offer__cover{position:absolute;inset:0;border-radius:5px;
  background:linear-gradient(155deg,#17171A 0%,#0D0D0F 62%);
  border:1px solid var(--line-gold);padding:13px 12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.9)}
.offer__cover-title{font-family:Montserrat,sans-serif;font-weight:800;font-size:.85rem;
  line-height:1.25;color:var(--on-dark);text-align:left;margin-top:2px}
.offer__cover-rule{width:26px;height:2px;margin-top:auto;background:var(--gold-grad-soft);border-radius:2px}
.offer__tag{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3);margin:0 0 5px}

/* 3. operations */
.offer__art--ops svg{width:24px;height:24px;color:var(--gold);opacity:.85;flex:none}

/* the commercial terms, given the weight they deserve */
.offer__deal{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-dark);
  text-align:center;font-family:Montserrat,sans-serif;font-weight:700;
  font-size:clamp(.95rem,1.25vw,1.08rem);line-height:1.4;color:var(--on-dark)}
.offer__deal span{display:block;background:var(--gold-grad-soft);
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:980px){
  /* Simplified, not cut down: all three steps and the deal line stay. The
     hero text and both CTAs come first in the DOM, so on a phone the visual
     already falls after the headline, paragraph and actions. */
  .offer{padding:var(--s5)}
  .offer__step + .offer__step{margin-top:var(--s3);padding-top:var(--s5)}
  .offer__stack{width:92px;height:118px}
  .offer__label{font-size:.9rem}
}
@media (max-width:380px){
  .offer{padding:var(--s4)}
  .offer__stack{width:82px;height:104px}
  .offer__art{gap:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  /* nothing here animates, but keep the intent explicit */
  .offer,.offer *{transition:none}
}

/* Additional-profile rows on the application form: platform select beside the
   handle/link box, so a handle never has to carry its own domain. */
.profile-row{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
  gap:var(--s3);align-items:center}
.profile-row + .profile-row{margin-top:var(--s3)}
@media (max-width:560px){
  .profile-row{grid-template-columns:1fr;gap:var(--s2)}
}
/* Live preview of the URL we will actually open. */
.resolved{margin:7px 0 0;font-size:.82rem;color:var(--on-dark-3);overflow-wrap:anywhere}
.resolved span{color:var(--gold)}
.band--light .resolved,.band--light-2 .resolved{color:var(--ink-600)}
.band--light .resolved span,.band--light-2 .resolved span{color:var(--gold-ink)}

/* Privacy notice: a long reading page, so the measure is tightened and the
   headings are given air. No new type scale -- it reuses .h2--quiet. */
.legal-date{margin-top:var(--s5);font-family:'JetBrains Mono',monospace;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3)}
.legal{max-inline-size:68ch}
.legal h2{margin-top:var(--s7);margin-bottom:var(--s4)}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:var(--s4);color:var(--ink-700);line-height:1.7}
.legal a{color:var(--gold-ink);text-underline-offset:3px}
.legal-list{margin:var(--s4) 0 0;padding-left:1.15em;color:var(--ink-700);line-height:1.7}
.legal-list li{margin-top:var(--s3)}
.legal-list li::marker{color:var(--gold-ink)}
.legal-contact{line-height:1.8}
/* Privacy line at the foot of the application form. */
.form-privacy{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line-light);
  font-size:.85rem;line-height:1.6;color:var(--ink-600)}
.footer__legal{margin-top:var(--s3)}
.footer__legal a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.footer__legal a:hover{color:#fff}
.legal-h3{margin-top:var(--s6);margin-bottom:var(--s3);font-size:1.02rem}