/* ==========================================================================
   Custom GrowthOS — offer v2 ("the system" long-form)
   Structural clone of the getclients.com/mdw-a anatomy:
   running price/session bar → editorial hero → long essay → pull quote →
   era comparison → five failures → operator → build briefs → calculator →
   for-you / not-for-you → what's inside → deliverables + price → FAQ → close.
   All copy, claims, art and proof are Custom GrowthOS's own.
   ========================================================================== */

@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/inter-tight-400.woff2") format("woff2");
}

:root {
  /* ground */
  --paper:   #fbf8f1;
  --cream:   #f5efe2;
  --grey:    #f1efe9;
  --line:    #ddd6c7;
  --line-2:  #e8e2d5;

  /* ink */
  --ink:     #0a0b12;
  --navy:    #000321;
  --body:    #2f3038;
  --muted:   #5c594f;
  --faint:   #6f6a5d;

  /* brand */
  /* the reference's seat button is orange; every CTA on this page uses it */
  --cta:     #d63a16;
  --cta-hi:  #b8320f;
  /* accent text on paper/grey needs its own, darker tone (5.3:1 / 4.9:1) */
  --cta-ink: #c0330f;

  --blue:    #0b6cf0;
  --blue-hi: #48a6ff;
  --violet:  #a855f7;
  --green:   #1f9d55;
  --red:     #c83320;

  --display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* 814px of text, plus the 22px gutters: the reference's measured measure */
  --col: 858px;
  --col-wide: 1060px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 .45em;
  line-height: 1.08;
  letter-spacing: -.028em;
}

/* emphasis carries meaning, never colour: the reference sets <strong> at 700 in
   the same ink as the paragraph, so the bolded words read as the author leaning
   on a phrase rather than as a link or a label */
p { margin: 0 0 1em; }
strong, b { color: inherit; font-weight: 700; }
::selection { background: var(--navy); color: #fff; }

/* ---------- layout ---------- */
.col {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 22px;
}
.col--wide { max-width: var(--col-wide); }
.col--narrow { max-width: 720px; }

.sec { padding: clamp(60px, 8vw, 100px) 0; }
.sec--paper { background: var(--paper); }
.sec--cream { background: var(--cream); }
.sec--grey  { background: var(--grey); }
.sec--dark  { background: var(--navy); }

/* ---------- top bar ----------
   Measured on the live reference (2026-11-06, 1440 and 390): the date bar is
   `position: static` — 40 px tall at desktop, 55 px at 390 — and it scrolls
   out of view with the page (top 10 → -390 after 400 px of scroll → -5990 at
   6000). The reference has no pinned timer and no pinned CTA; the seat is
   reachable from the inline buttons that repeat down the page. This bar
   therefore scrolls away too, and the hero's own countdown boxes carry the
   timer for the rest of the read. */
.topbar {
  position: static;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.topbar-in {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  text-align: center;
}
.topbar b { color: #fff; font-weight: 600; }
.tb-sep { opacity: .35; }
.tb-date { color: #e7e4da; }
.tb-clock { color: #cfd4e4; white-space: nowrap; }

/* live badge — the reference's pulsing dot, an uppercase label, normal-case date */
.tb-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e7e4da;
  font-size: 12.5px;
  white-space: nowrap;
}
.tb-k {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tb-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-hi); flex: none;
  box-shadow: 0 0 0 0 rgba(72, 166, 255, .6);
  animation: tb-pulse 2s infinite;
}
@keyframes tb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(72, 166, 255, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(72, 166, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(72, 166, 255, 0); }
}

/* countdown digits: fixed width so the bar does not jitter every second */
.clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--blue-hi);
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-block;
}
.clock.is-live { color: #7ee2a8; }
.tb-clock .clock { min-width: 17ch; text-align: left; color: #ff6a45; }

.tb-cta {
  margin-left: 4px;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.tb-cta:hover { background: var(--cream); }
@media (max-width: 780px) {
  .tb-sep { display: none; }
  .topbar-in { padding: 8px 12px; font-size: 11px; gap: 1px 8px; flex-direction: column; }
  .tb-live, .tb-clock { font-size: 11px; }
  .tb-k { font-size: 10px; }
  .tb-clock .clock { min-width: 0; }
}

/* hero seat line: date + countdown, immediately above the buy button */
.hero-seat {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 0 auto 18px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  color: var(--muted);
}
.hero-seat .seat-k {
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint);
}
.hero-seat b { color: var(--navy); font-weight: 600; }
.hero-seat .seat-cd .clock { color: var(--blue); }
.hero-seat .seat-cd .clock.is-live { color: var(--green); }
.hero-seat .seat-sep { opacity: .4; }
@media (max-width: 520px) {
  .hero-seat { font-size: 11.5px; padding: 8px 12px; gap: 4px 8px; }
  .hero-seat .seat-sep, .hero-seat .seat-k { display: none; }
}

/* the date bar scrolls away, so an anchored section only needs a small gap */
section[id] { scroll-margin-top: 16px; }

/* ---------- hero ---------- */
.hero {
  text-align: center;
  padding: clamp(38px, 6vw, 64px) 22px clamp(44px, 6vw, 68px);
  background:
    radial-gradient(120% 70% at 50% 0%, #ffffff 0%, var(--paper) 58%, var(--cream) 100%);
  border-bottom: 1px solid var(--line-2);
}
/* orange uppercase eyebrow, the reference's plain hero label */
.hero-pill {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 auto clamp(16px, 2.4vw, 24px);
  max-width: 640px;
}
.accent { color: var(--cta); }
.hero h1 {
  max-width: 980px;
  margin: 0 auto clamp(18px, 2.4vw, 26px);
  font-size: clamp(33px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.hero-sub {
  max-width: 791px;
  margin: 0 auto clamp(20px, 3vw, 28px);
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: #1d1f2c;
}
.hero-watch {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 0 14px;
}

/* the reference's dd : hh : mm : ss row under the media, before the button */
.hero-count {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 18px auto 22px;
}
.hero-count .hc {
  min-width: 62px;
  padding: 8px 6px 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  text-align: center;
}
.hero-count .hc b {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cta);
  font-variant-numeric: tabular-nums;
}
.hero-count .hc span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 2px;
}
.hero-count i {
  font-style: normal;
  color: #b8b0a1;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.6;
}
@media (max-width: 430px) {
  .hero-count .hc { min-width: 56px; }
  .hero-count .hc b { font-size: 19px; }
}

/* honest video placeholder: keeps the hero media slot, without implying playback */
.hero-video {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  width: min(100%, 1080px);
  height: clamp(560px, 52vw, 700px);
  min-height: 560px;
  margin: 0 auto clamp(22px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid #25283a;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(226, 64, 28, .08), transparent 48%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 255, 255, .018) 22px 23px),
    var(--navy);
  box-shadow: 0 24px 60px rgba(10, 12, 20, .18);
}
.hero-video p {
  margin: 0;
  padding: 0 18px;
  color: #d9dcea;
  font-family: var(--sans);
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
}
.video-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
}
.video-mark span {
  position: relative;
  width: 25px;
  height: 18px;
  border: 2px solid var(--cta);
  border-radius: 3px;
}
.video-mark span::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -8px;
  width: 5px;
  height: 6px;
  border: 1px solid var(--cta);
  border-left: 0;
  border-radius: 0 2px 2px 0;
}
@media (min-width: 701px) and (max-width: 1199px) {
  .hero-video { width: min(100%, 940px); height: 640px; }
}
@media (max-width: 600px) {
  .hero-video {
    width: calc(100% + 44px);
    height: min(620px, 74vh);
    min-height: 250px;
    margin-left: -22px;
    margin-right: -22px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

/* ---------- CTA ----------
   The reference repeats one orange seat button the whole way down. On dark
   grounds it stays orange and only gains a deeper shadow, so the button keeps
   its identity instead of turning into a light-coloured block. */
.sec--dark .cta:not(.cta--sm) {
  display: block; width: fit-content; margin: 26px auto 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
}
.sec--dark .cta:not(.cta--sm):hover { color: #fff; }
.cta {
  display: inline-block;
  max-width: 100%;
  padding: 19px 46px;
  background: var(--cta);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--cta);
  box-shadow: 0 8px 20px rgba(214, 58, 22, .22);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.cta:hover { background: var(--cta-hi); border-color: var(--cta-hi); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(214, 58, 22, .3); }
.cta:active { transform: translateY(0); }
/* the reference's seat button is a fixed 374 × 67 px block at every desktop CTA;
   on handsets it is free to shrink instead of forcing a horizontal scroll */
@media (min-width: 720px) {
  .cta:not(.cta--sm) { min-width: 374px; }
}
.cta--wide { display: block; max-width: 460px; margin: 30px auto 0; text-align: center; }
.cta--block { display: block; width: 100%; text-align: center; margin-top: 18px; }
.cta--light { box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.cta--sm { padding: 12px 18px; font-size: 12px; }

/* the second selector exists so a section-level rule (.close p, .col > p)
   cannot pull the small print back into the serif display face */
.cta-note,
.col > p.cta-note {
  margin: 12px auto 0;
  max-width: 520px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--faint);
  text-align: center;
}
.cta-note--light,
.col > p.cta-note--light { color: #a9b0c4; }

/* Secondary entry point to the 10-slide deck. Deliberately a text link, not a
   button: it must not compete with the $97 seat CTA above it. */

.hero-meta {
  margin: 22px 0 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* ---------- typographic atoms ---------- */
/* measured on the reference: 14px / 500 / 1px tracking, sentence-case line set
   in caps as a label above the headline */
.kicker {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.kicker--light { color: #9aa3b8; }
/* section heads: 34–36px at 600 with −1px tracking, not a 700 display slab */
.h-lg { font-size: clamp(27px, 3.6vw, 36px); margin-bottom: 28px; text-wrap: balance; }
.h-xl { font-size: clamp(30px, 4.2vw, 40px); margin-bottom: 28px; text-align: center; text-wrap: balance; }
.lede { font-family: var(--display); font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: #3a3b44; }
.lede--center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.on-dark { color: #e6e4dc !important; }
/* dark-ground body copy runs at the same 19px/1.65 as the paper sections — the
   reference keeps one body size across grounds and lets contrast do the work */
p.on-dark { font-family: var(--display); font-size: 19px; line-height: 1.65; margin: 0 0 18px; }
.on-dark strong, .on-dark b { color: #fff; }
.sec--dark .h-lg { color: #fff; }

/* ---------- essay ----------
   The serif body rule is deliberately limited to paragraphs with no class, so
   the utility paragraphs (.kicker, .lede, .cta-note, .aside-line, .center-note)
   keep their own type instead of being overridden by a higher-specificity
   descendant selector — that bug painted the dark-section kickers navy-on-navy. */
.essay p, .col > p:not([class]) {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.65;
  color: #1d1e26;
  margin: 0 0 18px;
}
.col > p.first { font-size: 22px; line-height: 1.58; }
/* the reference carries quotes at body size in roman, never italic display —
   a quote is a witness, not a headline */
.pull {
  margin: 32px 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--navy);
  font-family: var(--display);
  font-size: 24px !important;
  line-height: 1.45;
  color: var(--navy);
  font-style: normal;
}
.pull strong { font-style: normal; font-weight: 700; }
.aside-line {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 30px 0 !important;
}

/* ---------- era cards ---------- */
.era-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 34px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.era { padding: 26px 22px; border-right: 1px solid rgba(255, 255, 255, .14); }
.era:last-child { border-right: 0; }
.era-k {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #8f99b3; margin: 0 0 10px;
}
.era h3 { color: #fff; font-size: 20px; margin: 0 0 10px; }
.era-big {
  font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); color: #fff;
  margin: 0 0 10px; letter-spacing: -.01em;
}
.era p:last-child { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: #a8b0c4; margin: 0; }
.era--now { background: rgba(72, 166, 255, .08); }
.era--now .era-big { color: #8fcaff; }
@media (max-width: 780px) {
  .era-grid { grid-template-columns: 1fr; }
  .era { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .era:last-child { border-bottom: 0; }
}
.center-note {
  text-align: center; font-size: 15px !important; color: #b3bac9 !important;
  max-width: 660px; margin: 26px auto 0 !important;
}

/* ---------- five failures ---------- */
.fail-list { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: none; }
.fail-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.fail-list li:last-child { border-bottom: 1px solid var(--line); }
.fail-n {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  color: var(--cta);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 2px;
}
.fail-list h3 { font-size: clamp(20px, 2.3vw, 24px); margin: 0 0 10px; }
.fail-list p { font-family: var(--display); font-size: 18px; line-height: 1.66; color: #2a2b33; margin: 0; }
.fail-close {
  font-family: var(--display) !important;
  font-size: 19px !important;
  text-align: center;
  color: var(--navy) !important;
  margin: 32px 0 0 !important;
}
.fail-close--b { font-style: italic; margin-top: 6px !important; }

/* ---------- operator ---------- */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 26px 0 34px;
}
.stat { text-align: center; padding: 20px 10px; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.stat b {
  display: block; font-family: var(--display); font-size: clamp(34px, 5vw, 48px);
  line-height: 1; color: var(--cta); letter-spacing: -.03em;
}
.stat span {
  display: block; margin-top: 8px; font-family: var(--sans); font-size: 9.5px;
  letter-spacing: .16em; color: var(--muted); line-height: 1.5;
}
@media (max-width: 430px) {
  .stat { padding: 16px 6px; }
  .stat b { font-size: 32px; }
  .stat span { font-size: 8.5px; letter-spacing: .1em; }
}
.op-split { display: grid; grid-template-columns: 1fr 282px; gap: 34px; align-items: start; }
@media (max-width: 900px) { .op-split { grid-template-columns: 1fr; } }
.op-split p { font-family: var(--display); font-size: 18px; line-height: 1.66; color: #2b2c34; }
.op-note {
  font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--muted);
  max-width: 620px; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.op-fig { margin: 0; }
.op-fig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 14px 34px rgba(12, 16, 24, .12); }
.op-fig figcaption { font-family: var(--sans); font-size: 11px; color: var(--faint); margin-top: 8px; line-height: 1.5; }
@media (max-width: 900px) {
  .op-fig { max-width: 320px; margin: 4px auto 0; }
  .op-fig figcaption { text-align: center; }
}

/* ---------- build briefs ---------- */
.brief-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  gap: 18px; margin: 32px 0 24px;
}
.brief { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 3px; padding: 12px; }
/* the artwork carries its own label at the bottom; crop to the panel above it so
   the only caption in the card is the real one below (no duplicated title) */
.brief-media {
  aspect-ratio: 319 / 286; overflow: hidden; border-radius: 2px; background: #0e1118;
}
.brief-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.brief h3 { color: #fff; font-size: 17px; margin: 14px 0 6px; }
.brief p { font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: #9fa8bc; margin: 0 0 4px; }
.disclaimer {
  font-family: var(--sans) !important; font-size: 12.5px !important; line-height: 1.6;
  color: #8f99b3 !important; text-align: center; max-width: 620px; margin: 26px auto 0 !important;
}
@media (max-width: 860px) { .brief-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .brief-grid { grid-template-columns: 1fr; } }

/* ---------- calculator ---------- */
.calc-kicker {
  font-family: var(--sans) !important; font-size: 13px !important; font-weight: 700;
  letter-spacing: .18em; color: var(--muted) !important; text-align: center; margin: 10px 0 28px !important;
}
.calc {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(22px, 3.6vw, 34px); box-shadow: 0 16px 40px rgba(12, 16, 24, .08);
}
.calc-row { display: block; margin-bottom: 24px; }
.calc-row span {
  display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--muted); margin-bottom: 10px;
}
.calc-row output {
  display: block; font-family: var(--display); font-size: 26px; color: var(--navy);
  line-height: 1; margin-bottom: 12px;
}
.calc-row input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--line); border-radius: 2px; outline: none; margin: 0;
}
.calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); cursor: pointer;
}
.calc-row input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--navy);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); cursor: pointer;
}
.calc-row input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; }
.calc-result {
  margin-top: 6px; padding: 24px 20px; text-align: center;
  background: var(--navy); border-radius: 3px;
}
.calc-label {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #98a2ba; margin: 0 0 8px;
}
.calc-big { font-family: var(--display); font-size: clamp(38px, 6vw, 54px); color: #fff; line-height: 1; margin: 0 0 10px; letter-spacing: -.03em; }
.calc-big small { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #b7c0d4; margin-left: 10px; }
.calc-sub { font-size: 13px; line-height: 1.6; color: #aab3c7; margin: 0; }
.calc-fine { font-size: 12px; line-height: 1.6; color: var(--faint); margin: 18px 0 0; }
.calc-fine b { color: var(--navy); }

/* ---------- for you: three audience cards, the reference's PERSON 1–3 ---------- */
/* the reference stacks the three readers in one column — label, a single-line
   claim, then body — instead of boxing them three-across, where 18px copy is
   squeezed into 200px columns */
.persona-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 32px 0 0; text-align: left;
  border-top: 1px solid var(--line);
}
.persona { padding: 24px 0; border-bottom: 1px solid var(--line); }
.persona-k {
  margin: 0 0 6px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cta-ink);
}
.persona h3 { font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0 0 8px; }
.persona p:last-child {
  margin: 0; font-family: var(--display); font-size: 18px; line-height: 1.62; color: #3b3c44;
}

/* the honesty paragraph that follows the three cards */
.notforyou {
  margin: 26px auto 0; max-width: 660px; text-align: center;
  font-family: var(--display); font-size: 15px; line-height: 1.66; color: var(--muted);
}

/* ---------- price: why a seat is only $97 ---------- */
.why97 {
  margin: 30px auto 0; max-width: 640px; padding: 24px 24px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 3px; text-align: left;
}
.why97 h3 {
  font-size: 20px; margin: 0 0 12px;
}
.why97 p {
  margin: 0 0 12px; font-family: var(--display); font-size: 16px; line-height: 1.66; color: #3b3c44;
}
.why97 p:last-child { margin: 0; }

/* ---------- what's inside ---------- */
.agenda { margin-top: 34px; }
.agenda-item {
  display: grid; grid-template-columns: 58px 1fr; gap: 16px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.agenda-item:last-child { border-bottom: 1px solid var(--line); }
.agenda-n {
  font-family: var(--display); font-size: 15px; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 999px; width: 40px; height: 40px;
  display: grid; place-items: center;
}
.agenda-item h3 { font-size: clamp(19px, 2.2vw, 23px); margin: 0 0 8px; }
.agenda-t {
  font-family: var(--sans) !important; font-size: 10.5px !important;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint) !important; margin: 0 0 6px !important;
}
.agenda-item p { font-family: var(--display); font-size: 17px; line-height: 1.62; color: #33343c; margin: 0; }

/* ---------- price ---------- */
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  margin-top: 34px; overflow: hidden; box-shadow: 0 20px 50px rgba(12, 16, 24, .1);
}
.deliverables { list-style: none; margin: 0; padding: 8px 24px 20px; }
.deliverables li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line-2);
}
.deliverables li:last-child { border-bottom: 0; }
.deliverables b { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--navy); }
.deliverables li > span { font-size: 12.5px; color: var(--faint); text-align: right; }
@media (max-width: 520px) {
  .deliverables { padding: 4px 20px 16px; }
  .deliverables li { display: block; padding: 12px 0; }
  .deliverables b { display: block; font-size: 14px; }
  .deliverables li > span { display: block; text-align: left; margin-top: 3px; }
}
.price-foot {
  background: var(--navy); color: #fff; padding: 28px 24px 26px; text-align: center;
}
.price-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #98a2ba; margin: 0 0 10px; }
.price-amount { font-family: var(--display); font-size: clamp(46px, 7vw, 62px); line-height: 1; margin: 0 0 10px; letter-spacing: -.04em; color: #fff; }
.price-amount small { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #b7c0d4; margin-left: 12px; }
.price-note { font-size: 12.5px; color: #aab3c7; margin: 0; }
.price-secure { font-size: 11px; color: #8f99b3; margin: 12px 0 0; }
.price-secure--foot { margin-top: 14px; }

/* seat checkout: PayPal's buttons in the price card, with a plain-form fallback */
.seat-pay { margin: 18px 0 0; }
.pp-buttons { min-height: 50px; }
.pp-buttons:empty { min-height: 0; }
.pp-fallback { margin: 0; }
.pp-fallback button {
  width: 100%; font: inherit; cursor: pointer;
  background: #fff; color: var(--navy); border: 1px solid #fff; border-radius: 4px;
  padding: 15px 18px; font-weight: 700; font-size: 14px; letter-spacing: .04em;
}
.pp-fallback button:hover { background: #f3f1e8; }
.seat-done {
  margin: 18px 0 0; padding: 18px; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px; background: rgba(255, 255, 255, .06); text-align: left;
}
.seat-done-k {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #7ee2a8;
}
.seat-done-b { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #cfd4e4; }
.seat-done-b b { color: #fff; font-weight: 600; }
.seat-done .cta { margin-top: 2px; }
.price-foot .cta { color: #fff; }

.guarantee {
  margin: 26px auto 0; max-width: 620px; text-align: center;
  font-family: var(--display); font-size: 15px; line-height: 1.65; color: #3a3b44;
}
.guarantee b { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.guarantee a { color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { margin-top: 30px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 42px 20px 0;
  font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 22px; font-weight: 400; color: var(--muted);
}
.faq details[open] summary::after { content: "\2212"; color: var(--navy); }
.faq-a { padding: 0 34px 22px 0; }
.faq-a p { font-family: var(--display); font-size: 16px; line-height: 1.7; color: #3a3b44; margin: 0; }
.faq-a a { color: var(--navy); }

/* ---------- close ---------- */
.close { text-align: center; }
.close p { font-family: var(--display); font-size: 17px; max-width: 580px; margin: 0 auto 28px; }
.close .cta { margin-top: 4px; }

/* ---------- footer ---------- */
.footer { background: #06070d; color: #8b93a4; padding: 40px 0 96px; font-size: 12px; }
.footer-in { max-width: var(--col-wide); margin: 0 auto; padding: 0 22px; }
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 20px;
}
.footer-brand { font-family: var(--display); font-size: 16px; color: #fff; text-decoration: none; }
.footer-brand span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #7d8597; margin-top: 4px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: #9aa2b3; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-legal { max-width: 760px; line-height: 1.7; margin: 0 auto 10px; text-align: center; }
.footer-copy, .footer-brand span { color: #7d8597; }

/* No pinned UI anywhere, by measurement: the reference has no fixed or sticky
   bar, timer or CTA through its full scroll (checked at 0 / 5,000 / 15,000 /
   23,000 px); its only fixed element is a decorative background cover. The
   offer is carried by the inline seat CTAs alone, so this page has no sticky
   element at all. */

/* ---------- Business OS additions ---------- */
/* hero: the offer's own guarantee sits under the seat button, in sentence case,
   so the long 30-day promise stays readable instead of becoming an all-caps
   block through .cta-note */
.hero-guarantee {
  max-width: 660px;
  margin: 18px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  color: #4a4b55;
  text-align: center;
}
.hero-sub--body {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.65;
  color: #3a3b44;
  margin: 0 auto clamp(22px, 3vw, 30px);
}

/* five jobs: numbered rows on the dark ground (the fail-list palette is for
   paper sections, so this is its own small list) */
.os-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.os-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.os-n {
  font-family: var(--display);
  font-size: 15px;
  color: #8fcaff;
  border: 1px solid rgba(143, 202, 255, .55);
  border-radius: 999px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
}
.os-list h3 { color: #fff; font-size: 20px; font-weight: 600; margin: 2px 0 6px; }
.os-list p {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.55;
  color: #b3bacb;
}

/* the brand-comparison cards also appear on paper, where the dark-era palette
   would render white headings on cream */
.era-grid--light {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.era-grid--light .era { border-right: 1px solid var(--line); }
.era-grid--light .era:last-child { border-right: 0; }
.era-grid--light .era-k { color: var(--faint); }
.era-grid--light .era h3 { color: var(--navy); }
.era-grid--light .era-big { color: var(--cta-ink); }
.era-grid--light .era p:last-child { color: var(--muted); }
@media (max-width: 780px) {
  .era-grid--light .era { border-right: 0; border-bottom: 1px solid var(--line); }
  .era-grid--light .era:last-child { border-bottom: 0; }
}

/* proof and testimonial placeholders: visibly unfinished, never mistaken for a
   published claim */
/* filled proof lines: a left-ruled quote block, not a dashed empty well */
.proof-slot {
  max-width: 680px;
  margin: 26px auto 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid rgba(255, 255, 255, .35);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  color: #cfd5e2;
  text-align: left;
}
.proof-slot strong { color: #fff; }
.proof-slot--dark {
  border-left-color: var(--line);
  color: #3b3c44;
}
.proof-slot--dark strong { color: var(--navy); }

/* instructor highlights */
.op-list { margin: 10px 0 18px; padding-left: 20px; }
.op-list li {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.66;
  color: #2b2c34;
  margin-bottom: 8px;
}

/* testimonial cards without artwork fill the same grid */
.brief--quote { padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.brief--quote h3 { margin: 0; font-size: 16px; }
.brief-res {
  color: var(--blue-hi) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 !important;
}
.brief--quote p:last-child {
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.66;
  color: #cfd4e4;
  margin: 0;
}

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }


/* ================= pre-built OS: included with every seat =================
   The Growth OS archive (43 files, self-hosted) ships with the seat, and the
   two live hours are what fit it to the buyer's business. Stated in the hero,
   the includes list, the price block, the FAQ and the sticky bar.
   The reserved bottom padding is the bar's measured height plus a small
   margin, measured in headless Chrome at 360-1440px (80.0 above 820px,
   131.3 at 601-820px, up to 151 below 601px). */
.hero-os {
  max-width: 660px;
  margin: 20px auto 0;
  padding: 14px 18px 15px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: #2b2f3a;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(10, 11, 18, .14);
  border-left: 3px solid #e2401c;
  border-radius: 4px;
}
.hero-os b { color: #0a0b12; }

.price-os {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #9aa2b3;
}
.price-os b { color: #fff; }

.osbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(10, 11, 18, .97);
  border-top: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.osbar-in {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.osbar-t {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #f5f3ec;
  font-size: 13.5px;
  line-height: 1.4;
}
.osbar-t b {
  display: block;
  color: #fff;
  font-size: 15px;
  letter-spacing: -.01em;
}
.osbar-s {
  display: block;
  margin-top: 3px;
  color: #a9b0c4;
  font-size: 12.5px;
}
.osbar-cta {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  min-height: 44px;
}
/* the bar is fixed, so the page reserves its measured height + margin */
body { padding-bottom: 92px; }
@media (max-width: 820px) {
  .osbar-in { flex-wrap: wrap; gap: 8px 12px; }
  .osbar-t { flex: 1 1 100%; font-size: 13px; }
  .osbar-t b { font-size: 14px; }
  .osbar-s { font-size: 12px; }
  .osbar-cta { width: 100%; text-align: center; }
  body { padding-bottom: 146px; }
}
@media (max-width: 600px) {
  /* keep the price + CTA, drop the second line: on a 390px phone the full bar
     covered ~19% of the viewport and sat over the hero deck */
  .osbar-s { display: none; }
  .osbar { padding-top: 9px; }
  body { padding-bottom: 104px; }
}
@media (max-width: 430px) {
  .osbar-s { font-size: 11.5px; }
  .osbar-cta { font-size: 13px; }
}

/* ---------- hero media slot: the rebuilt slide deck (2026-11-07) ----------
   The deck sits where the workshop video belongs — real content now, replaced by the recording when
   one exists. The frame follows the deck's 1376x768 slides at desktop and is taller on phones, where
   a 16:9 box would clip slides 5, 7 and 9. Any height change needs the per-slide clip check repeated. */
.hero-deck {
  width: 100%;
  max-width: min(940px, 100%);
  margin: 30px auto 0;
  padding: 0;
}
.hero-deck__frame {
  position: relative;
  aspect-ratio: 940 / 640;
  border-radius: 10px;
  overflow: hidden;
  background: #07080a;
  border: 1px solid rgba(10, 11, 18, .18);
  box-shadow: 0 26px 60px rgba(10, 11, 18, .22);
}
.hero-deck__poster { position: absolute; inset: 0; display: block; }
.hero-deck__poster img { width: 100%; height: 100%; object-fit: cover; }
.hero-deck__frame iframe {
  display: block; position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  /* inert until started: an unstarted deck cannot scroll its own document, so an
     interactive frame would swallow the wheel for the 640px it occupies */
  pointer-events: none;
}
.hero-deck__frame.is-live iframe { pointer-events: auto; opacity: 1; }
.hero-deck__frame.is-live .hero-deck__poster { display: none; }
.hero-deck__start {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  color: #f4f2ec;
  background: rgba(7, 8, 10, .84);
  border: 1px solid rgba(216, 178, 106, .55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.hero-deck__start:hover { background: rgba(7, 8, 10, .94); }
.hero-deck__start:focus-visible { outline: 2px solid #0b6cf0; outline-offset: 3px; }
.hero-deck__play { color: #d8b26a; font-size: 11px; }
.hero-deck__frame.is-live .hero-deck__start { display: none; }
.hero-deck figcaption {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5a6072;
}
.hero-deck figcaption a { color: #0b6cf0; }
.hero-deck figcaption a:focus-visible { outline: 2px solid #0b6cf0; outline-offset: 3px; }
@media (max-width: 760px) {
  .hero-deck { margin-top: 22px; }
  .hero-deck__start { bottom: 60px; padding: 12px 18px; font-size: 13px; }
  .hero-deck__frame { aspect-ratio: 358 / 470; border-radius: 8px; }
  .hero-deck figcaption { font-size: 12.5px; }
}


/* ---------- keyboard access ----------
   A visible skip target and one consistent focus ring. The page is a long read;
   keyboard visitors should not have to tab through every inline CTA to reach it. */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 9999;
  padding: 10px 16px; border-radius: 4px;
  background: var(--navy); color: #fff; font-family: var(--sans);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}