/* ==========================================================================
   WNN Properties — brand layer for the VSL funnel
   Load AFTER wnn-v2.css. Overrides the token layer only; every component in
   wnn-v2.css re-themes through it.

   Palette is the same one the masterclass funnel already runs, so the two
   funnels are visibly the same company. It is the Refactoring UI "Blue Grey"
   ramp plus a vivid yellow, which is where #102A43 and #F0B429 both come from.

   CONTRAST, computed, not eyeballed:
     gold  #F0B429 on navy   #102A43 ....  7.85:1  PASS AAA-large / AA
     gold  #F0B429 on navy-deep #0A1C2E ..  9.25:1  PASS AAA-large
     brown #8D2B0B on gold   #F0B429 ....  4.54:1  PASS AA  <- the CTA pairing
     white #FFFFFF on gold   #F0B429 ....  1.86:1  FAIL. Never do this.
     white #FFFFFF on navy   #102A43 .... 14.64:1  PASS AAA
     pale  #D9E2EC on navy   #102A43 .... 11.18:1  PASS AAA  <- body copy on dark
     slate #486581 on white  #FFFFFF ....  6.08:1  PASS AA   <- muted body copy
     steel #2680C2 on navy   #102A43 ....  3.45:1  UI and large text only

   Note the CTA pairing sits at 4.54:1, which clears AA for normal text with
   almost nothing spare. It is the established WNN button and is left alone on
   purpose, but do not shrink CTA labels below 16px or lighten that brown.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300..900&display=swap');

:root {
  /* ---------- signature ------------------------------------------------ */
  --gold:         #F0B429;
  --gold-hover:   #FCE588;
  --on-gold:      #8D2B0B;   /* the masterclass funnel's own CTA foreground */

  /* ---------- the navy ramp -------------------------------------------- */
  --navy:         #102A43;
  --navy-deep:    #0A1C2E;
  --navy-panel:   #1C3D5C;
  --steel:        #2680C2;
  --steel-pale:   #D9E2EC;   /* body text on dark, 11.18:1 */
  --sand:         #BCCCDC;   /* secondary text on dark, 8.93:1 */
  --slate:        #486581;   /* muted body text on light, 6.08:1 */

  /* Back-compat aliases. The component layers were written against the IOH
     token names; re-pointing them here re-themes every page without touching
     the shared files, and keeps one source of truth for the palette. */
  --amber:        var(--gold);
  --amber-hover:  var(--gold-hover);
  --on-amber:     var(--on-gold);
  --bark:         var(--navy);
  --bark-deep:    var(--navy-deep);
  --clay:         var(--steel);
  --bronze:       #8D2B0B;

  /* ---------- neutrals --------------------------------------------------- */
  --ink-solid:     #102A43;
  --wash:          #F0F4F8;
  --wash-2:        #F8FAFC;
  --hairline:      rgba(16,42,67,.16);
  --hairline-soft: rgba(16,42,67,.08);

  /* =======================================================================
     Remap the wnn-v2 tokens. Everything downstream re-themes for free.
     ======================================================================= */
  --brand:          var(--gold);
  --brand-hover:    var(--gold-hover);
  --brand-bright:   var(--gold);
  --brand-deep:     var(--navy);
  --brand-magenta:  var(--navy);

  --ink:            var(--navy-deep);
  --plum:           var(--navy);
  --plum-2:         var(--steel);

  --surface:        #ffffff;
  --surface-2:      var(--wash);
  --surface-3:      var(--wash-2);
  --line:           var(--hairline-soft);

  --text:           var(--ink-solid);
  --text-muted:     var(--slate);
  --text-on-dark:   #ffffff;
  --text-on-dark-2: var(--steel-pale);

  --ok:             #0A6C4A;
  --warn:           #8D2B0B;
  --danger:         #A3262B;

  /* ---------- type ------------------------------------------------------ */
  /* Source Sans is what the masterclass funnel runs, so the two funnels read
     as one company. Source Sans 3 is the maintained release of it. */
  --f-body:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --f-display: 'Source Sans 3', 'Source Sans Pro', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --t-xs:   12px;
  --t-sm:   14px;
  --t-md:   16px;
  --t-lg:   20px;
  --t-xl:   28px;
  --t-2xl:  40px;
  --t-hero: clamp(34px, 5vw, 57px);

  /* ---------- shape ----------------------------------------------------- */
  /* Squarer than the IOH build. WNN is a numbers business and the masterclass
     pages already run tighter radii; 48px pills would read as a wellness app. */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   16px;
  --r-full: 999px;

  --e-1: 0 1px 2px rgba(16,42,67,.06);
  --e-2: 0 2px 8px rgba(16,42,67,.09);
  --e-3: 0 12px 40px rgba(16,42,67,.16);

  --glass-dark-edge:  rgba(255,255,255,.18);
}

/* =========================================================================
   Structural overrides — rules that assumed white-on-brand.
   ========================================================================= */
.btn {
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 800;
  border-radius: var(--r-sm);
  box-shadow: none;
  border: 2px solid transparent;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.btn:hover  { background: var(--gold-hover); color: var(--on-gold); box-shadow: var(--e-2); }
.btn small  { color: var(--on-gold); opacity: .78; text-transform: none; }

/* A CTA is not a body link. Dark-context anchor rules outrank .btn at equal
   specificity, so without this the label renders gold on gold and only
   appears on hover. This exact bug has now cost time on two builds. */
a.btn, .sec-dark a.btn, .glass-dark a.btn, footer.site a.btn,
.marquee-wrap a.btn, .conf-bar a.btn, .sticky-bar a.btn { color: var(--on-gold); }

.btn-ghost {
  background: transparent; color: var(--ink-solid);
  border: 1px solid var(--hairline);
  font-weight: 700;
}
.btn-ghost:hover { background: var(--ink-solid); color: #fff; border-color: var(--ink-solid); }
.sec-dark .btn-ghost, .glass-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.30); }
.sec-dark a.btn-ghost, .glass-dark a.btn-ghost { color: #fff; }
.sec-dark .btn-ghost:hover, .glass-dark .btn-ghost:hover {
  background: var(--gold); color: var(--on-gold); border-color: var(--gold);
}
.sec-dark a.btn-ghost:hover, .glass-dark a.btn-ghost:hover { color: var(--on-gold); }

/* ==========================================================================
   SECTION BANDS
   The page is a sequence of full-bleed bands rather than one background with
   cards on it: white -> pale blue -> navy. That alternation is what makes a
   long sales page feel like it moves.
   ========================================================================== */
.sec-dark {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(240,180,41,.16), transparent 62%),
    linear-gradient(180deg, var(--navy-panel) 0%, var(--navy-deep) 100%);
}
.sec-dark .eyebrow, .glass-dark .eyebrow, .chrome .eyebrow { color: var(--gold); }
.eyebrow { color: var(--navy); letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }

/* ==========================================================================
   DISPLAY TYPE — bold, direct response.
   ========================================================================== */
.display {
  font-family: var(--f-display);
  font-style: normal; font-weight: 800;
  text-transform: none; letter-spacing: -.025em; line-height: 1.0;
  background: none; -webkit-background-clip: initial; background-clip: initial;
}
.display-bar { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; }
h1.hero  { font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
h1.hero em { color: var(--gold); font-style: normal; font-weight: 800; }
h2.title { font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
h3.sub   { font-weight: 700; letter-spacing: -.01em; }
h1,h2,h3,h4 { font-weight: 700; }

.tone { color: var(--bronze); font-weight: inherit; }
.sec-dark .tone { color: var(--gold); }

.panel .head, .card-head { background: var(--navy); color: #fff; }
.panel .head h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.015em; }

.card { border-radius: var(--r-md); border: 1px solid var(--hairline-soft); box-shadow: var(--e-1); }
.offer { border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--e-2); }
.offer .price { font-family: var(--f-display); font-weight: 800; letter-spacing: -.03em; }
.offer .save  { background: var(--gold); color: var(--on-gold); font-weight: 800; }

.step .n { background: var(--gold); color: var(--on-gold); font-family: var(--f-display); font-weight: 800; }
.benefit .ic { background: var(--wash); color: var(--navy); }
.appt .av { background: var(--gold); color: var(--on-gold); }

.pf-problem { background: #FBEFEF; border-left-color: var(--danger); }
.pf-fix     { background: var(--wash); border-left-color: var(--ok); }
.list-ok li .icon { color: var(--ok); }

.sticky-bar { color: var(--ink-solid); border-top: 1px solid rgba(255,255,255,.85); }
.sticky-bar .price { color: var(--ink-solid); }
.countdown .n { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; }

.marquee-wrap { background: var(--navy); }
.marquee .dot { color: var(--gold); }
footer.site { background: var(--navy-deep); }
.progress i.on { background: var(--gold); }

/* body links: gold on white is 1.86:1, so generic anchors wear navy on light */
a { color: var(--navy); }
.sec-dark a, .glass-dark a, footer.site a, .marquee-wrap a, .conf-bar a { color: var(--gold); }

.field input, .field select { border-radius: var(--r-sm); border-color: var(--hairline); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--navy); }
:focus-visible { outline-color: var(--gold); }

/* =========================================================================
   WNN-specific components
   ========================================================================= */

/* the logo lockup
   Real artwork now (was a text placeholder). It's a fixed-color raster —
   dark grey wordmark, teal/grey mark — built for a light surface, and its
   own wordmark measures 1.73:1 against --navy, well under readable. Rather
   than invent a second dark-mode asset, every instance sits in a white chip
   so the logo's own colours always have the light background they need,
   on both the dark pages and the light hero. */
.wnn-logo { display:inline-flex; align-items:center; justify-content:center;
            text-decoration:none; background:#fff; border-radius:12px;
            padding:9px 20px; box-shadow:0 2px 14px rgba(10,28,46,.16); }
.wnn-logo img { height:38px; width:auto; display:block; }

/* highlight + underline, the direct-response marks */
.hl { background: var(--gold); color: var(--on-gold); padding: 0 .18em; border-radius: 3px;
      box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.u  { font-style: normal; text-decoration: underline; text-decoration-color: var(--gold);
      text-decoration-thickness: .13em; text-underline-offset: .14em; text-decoration-skip-ink: none; }

/* the "what this is not" honesty block, which this market specifically checks for */
.plain { border:1px solid var(--hairline); border-left:4px solid var(--gold);
         border-radius:var(--r-sm); padding:var(--s-4) var(--s-5); background:var(--wash-2); }

/* the side-by-side money comparison, which is this funnel's whole mechanism */
.money { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); margin:var(--s-6) 0; }
.money-col { border-radius:var(--r-md); padding:var(--s-5); text-align:center; border:1px solid var(--line); }
.money-here { background:#FBEFEF; border-color:rgba(163,38,43,.24); }
.money-there { background:var(--wash); border-color:rgba(10,108,74,.24); }
.money-col .lbl { font-size:var(--t-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
                  color:var(--text-muted); margin:0 0 var(--s-2); }
.money-col .fig { font-family:var(--f-display); font-size:clamp(30px,5.4vw,46px); font-weight:800;
                  letter-spacing:-.03em; line-height:1; margin:0; }
.money-here .fig { color:var(--danger); }
.money-there .fig { color:var(--ok); }
.money-col .per { font-size:var(--t-sm); color:var(--text-muted); margin:var(--s-2) 0 0; }
@media (max-width:600px){ .money { grid-template-columns:1fr; gap:var(--s-3); } }

/* ==========================================================================
   MOBILE CRO
   Most of this traffic is someone on a phone on a break at work. Everything
   below is about the two things that move mobile conversion: the CTA is
   always reachable and always tappable, and nothing overflows the viewport.
   ========================================================================== */
@media (max-width: 768px) {
  /* Full-width CTAs on mobile, per the standing CRO rule on this account. */
  .btn { min-height: 56px; font-size: var(--t-md); padding: var(--s-3) var(--s-5); width: 100%; }
  .sticky-bar .btn { width: auto; min-height: 48px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }
  .btn small { font-size: 11px; }
  .faq summary { min-height: 44px; align-items: center; }

  h1.hero { font-size: clamp(27px, 7.4vw, 36px); line-height: 1.14; letter-spacing: -.02em; }
  h2.title { font-size: clamp(22px, 5.6vw, 30px); }
  .lede { font-size: var(--t-md); }

  body { overflow-x: hidden; }
  .fig-table, .ledger, .compare, .prep-table { display: block; overflow-x: auto; white-space: nowrap; }

  .sec { padding: var(--s-6) 0; }
  .card { padding: var(--s-4); }
  .proof-strip { flex-direction: column; gap: var(--s-2); align-items: flex-start; }
}

@media (max-width: 420px) {
  h1.hero { font-size: clamp(24px, 7.2vw, 30px); }
  .btn { font-size: var(--t-sm); }
}

/* forced-colors + reduced-transparency inherit from wnn-v2.css */