/*
  TOPA funnel system styles -- shared by every /free/<id>/ and /watch/<id>/ page.
  Every value below is copied from the REAL /mentorship/ page's own <style> block (read directly,
  not guessed): its --bg is #11161c (a near-black charcoal), not #28374a -- that hex is actually
  the HOME page's ink/text color, confirmed by reading both pages' source. Re-verify against
  mentorship/index.html's :root block before changing any of these if the Mentorship page's
  own palette ever changes; don't invent new values here.

  Fonts: same @font-face trick mentorship/index.html uses -- 'Dollar' borrows Inter's single-bar
  "$" glyph over Playfair Display's double-bar one, scoped via unicode-range so it only ever
  affects that one character. Font FILES are not duplicated here; both pages already reference
  them via the absolute path /mentorship/assets/fonts/ (same reuse pattern the home page's own
  Playfair migration used), so there's only ever one copy of each on disk.
*/
@font-face{font-family:'Playfair Display';src:url('/mentorship/assets/fonts/playfair-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/mentorship/assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Dollar';src:url('/mentorship/assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0024;}

:root{
  --tf-bg:#11161c;              /* Mentorship page's real --bg */
  --tf-bg-deep:#090d11;         /* Mentorship's --bg-deep, used for hero-style sections */
  --tf-bg-light:#18202a;        /* Mentorship's --bg-light -- used for its own highlights/stats band */
  --tf-surface:#1a2129;         /* Mentorship's --surface */
  --tf-surface-2:#242c36;       /* Mentorship's --surface-2 -- its most-elevated tone */
  --tf-text:#f4f0e7;            /* Mentorship's --cream -- the page's actual body text color, not pure white */
  --tf-muted:#d3c7ad;           /* Mentorship's --sand -- its real secondary/label/hint text color */
  --tf-faint:rgba(211,199,173,.55);
  --tf-req:rgba(224,195,139,.6);
  --tf-line:rgba(244,240,231,.14);
  --tf-line-strong:rgba(244,240,231,.26);
  --tf-field-bg:#1a2129;        /* Mentorship's --surface */
  --tf-field-border:var(--tf-line-strong);
  --tf-focus:#e0c38b;           /* Mentorship's --accent (champagne gold) */
  --tf-error:#ff9b8f;
  --tf-accent-ink:#17130a;      /* Mentorship's --accent-ink -- text color ON the gold button */
  --tf-radius:6px;              /* Mentorship's own .btn border-radius */
  --tf-serif:'Dollar','Playfair Display',Georgia,'Times New Roman',serif;
  --tf-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --tf-ease:cubic-bezier(.16,1,.3,1);
  --tf-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.7), 0 8px 18px -10px rgba(0,0,0,.5);

  /* Watch-page section backgrounds: just two tones, alternating, so the page reads as separate
     zones without turning into a rainbow of navies. --tf-z-dark is the body's own base colour;
     --tf-z-dim is one step up from it. */
  --tf-z-dark:#0a0f16;
  --tf-z-dim:#141f2e;
}

/* ---------- Page shell (both /free/ and /watch/ pages) ---------- */
*{box-sizing:border-box;}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;}
body.funnel-page,body.watch-page{
  margin:0;background:var(--tf-bg);color:var(--tf-text);
  font-family:var(--tf-sans);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.watch-page{background:var(--tf-z-dark);}
.funnel-page img,.watch-page img{max-width:100%;display:block;}
.funnel-page h1,.watch-page h1{font-family:var(--tf-serif);font-weight:400;color:#fff;margin:0;letter-spacing:-.02em;line-height:1.12;font-size:clamp(1.75rem,6vw,2.5rem);text-wrap:balance;}

/* ---------- Header (sticky on both pages -- stays put while scrolling) ----------
   Landing page: logomark far-left, wordmark text far-right, nothing clickable (still "no
   outbound links" on that page, per its own spec) -- just a trust mark, not navigation.
   Watch page: logomark+wordmark combined on the LEFT as one brand lockup (standard site
   convention, e.g. mastermind/home's own nav), with nav links + a CTA button on the right,
   collapsing into a hamburger + slide-down menu on mobile -- same mechanics as the site's
   existing .nav-hamburger/.mobile-menu pattern (assets/styles.css), recolored for this
   page's dark/gold palette instead of that pattern's brown theme. */
.funnel-nav,.watch-nav{position:sticky;top:0;z-index:50;background:var(--tf-bg-deep);border-bottom:.5px solid var(--tf-line);}
.funnel-nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:720px;margin:0 auto;padding:14px 20px;}
.funnel-nav-in img{height:28px;width:auto;display:block;}
/* The real logo's own wordmark graphic (cropped out of mentorship/assets/logo-full-white.png,
   see assets/funnel/academy-wordmark.png) -- not approximated with plain styled text, per
   explicit request. Native aspect ratio ~3.4:1 (two stacked lines: "THE ONE PERCENT" / "ACADEMY"). */
.funnel-nav-word{height:20px;width:auto;display:block;}

.watch-nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:960px;margin:0 auto;padding:12px 20px;}
.watch-brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:6px 0;margin:-6px 0;}
/* Sized off the real Mentorship page's own .brand img (width:36px, native ~36x40 -> ~40px tall)
   -- was 26px, read as too small next to the Register Now button. */
.watch-brand img{height:36px;width:auto;display:block;}
.watch-brand .funnel-nav-word{height:24px;}
.watch-brand:focus-visible{outline:2px solid var(--tf-focus);outline-offset:4px;border-radius:4px;}
/* Nav links/hamburger/mobile menu removed per explicit request -- the header is now just the
   brand lockup (left) and the single Register Now CTA (right), at every width, no mobile menu
   needed since there's nothing left to put in one. */
.watch-nav-cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:var(--tf-radius);background:var(--tf-focus);color:var(--tf-accent-ink);font:700 .75rem/1 var(--tf-sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;}
@media (max-width:760px){
  /* The wordmark graphic is two stacked lines -- keep it legibly larger still on a phone. */
  .watch-nav-in{padding:10px 16px;}
  .watch-brand{gap:10px;}
  .watch-brand img{height:40px;}
  .watch-brand .funnel-nav-word{height:26px;}
  .funnel-nav-in{padding:12px 16px;}
  .watch-nav-cta{padding:9px 14px;font-size:.6875rem;}
}

/* Landing page: no nav, mobile-first stack -- image, headline, first form field all land
   above the fold on a phone (the layout order below IS the visual order, no reordering tricks). */
main.funnel-page{max-width:520px;margin:0 auto;padding:20px 20px 48px;display:flex;flex-direction:column;gap:22px;}
.funnel-hero{margin:0;border-radius:12px;overflow:hidden;border:.5px solid var(--tf-line-strong);box-shadow:var(--tf-shadow);background:var(--tf-bg-deep);}
.funnel-hero img{width:100%;height:auto;}
.funnel-intro{display:flex;flex-direction:column;gap:10px;text-align:center;}
.funnel-step{font-family:var(--tf-sans);font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tf-focus);}
.funnel-subhead{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--tf-muted);}
.funnel-footer{max-width:520px;margin:28px auto 0;padding:0 20px;text-align:center;font-size:.8125rem;color:var(--tf-faint);}
.funnel-footer a{color:var(--tf-faint);text-decoration:underline;display:inline-block;padding:13px 8px;}
.funnel-footer a:focus-visible{outline:2px solid var(--tf-focus);outline-offset:2px;}

/* Watch page */
main.watch-page{max-width:720px;margin:0 auto;padding:28px 20px 48px;display:flex;flex-direction:column;gap:18px;text-align:center;}
@media (max-width:560px){main.watch-page{padding:20px 16px 36px;gap:14px;}.watch-player{border-radius:10px;}}
.watch-subhead{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--tf-muted);max-width:40em;margin:0 auto;}
.watch-subhead-1{font-size:1.3125rem;font-family:var(--tf-serif);color:var(--tf-text);}
.watch-subhead-2{margin-top:-6px;}
.watch-player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:.5px solid var(--tf-line-strong);box-shadow:var(--tf-shadow);background:var(--tf-bg-deep);}
.watch-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.watch-chapters{text-align:left;margin:0 auto;max-width:40em;font-size:.9375rem;color:var(--tf-muted);}
.watch-next{font-size:.9375rem;color:var(--tf-muted);}
.watch-next a{color:var(--tf-text);text-decoration:underline;text-underline-offset:2px;}
.watch-next a:focus-visible{outline:2px solid var(--tf-focus);outline-offset:2px;}
.watch-footer{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px;padding-top:20px;border-top:1px solid var(--tf-line);font-size:.8125rem;}
.watch-footer a{color:var(--tf-faint);text-decoration:underline;}

/* Compliance footer -- risk disclaimer + legal document links, matching the free-page funnel
   footer's quiet styling. Sits on the page's own base background (not a new alternating zone). */
.watch-legal{max-width:720px;margin:0 auto;padding:32px 20px 40px;text-align:center;}
.watch-legal-disclaimer{margin:0 0 18px;font-size:.8125rem;line-height:1.6;color:var(--tf-faint);}
.watch-legal .watch-footer a{padding:13px 8px;display:inline-block;}
.watch-legal .watch-footer a:focus-visible{outline:2px solid var(--tf-focus);outline-offset:2px;}
.watch-legal .c{margin-top:10px;font-size:.75rem;color:var(--tf-faint);}

/* Sections: every section's heading uses the SAME large .watch-sec-head treatment (kicker + big
   serif h2) -- ported from the Mentorship page's .sec-head, not the small 1.25rem headings these
   used before. */
.watch-zone .watch-section{border:0;margin:0;padding:0;text-align:center;}
.watch-btn-group{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.watch-btn-group .watch-cta{width:100%;padding-left:16px;padding-right:16px;font-size:.8125rem;}
@media (max-width:480px){.watch-btn-group-4{grid-template-columns:1fr;}.watch-btn-group .watch-cta{min-height:54px;}}
@media (max-width:360px){.watch-btn-group .watch-cta{font-size:.75rem;letter-spacing:.1em;padding-left:12px;padding-right:12px;}}

.watch-footer a:focus-visible{outline:2px solid var(--tf-focus);outline-offset:2px;}

/* ---------- Shared CTA button -- exact copy of Mentorship's own .btn ---------- */
.tf-button,.watch-cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 38px;min-height:56px;border-radius:var(--tf-radius);border:.5px solid var(--tf-focus);cursor:pointer;
  background:var(--tf-focus);color:var(--tf-accent-ink);text-decoration:none;
  font:700 .9375rem/1 var(--tf-sans);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:none;transition:transform .35s var(--tf-ease);overflow:hidden;
}
.tf-button::after,.watch-cta::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .3s var(--tf-ease);}
.tf-button > *,.watch-cta{position:relative;z-index:1;}
@media (hover:hover){
  .tf-button:hover,.watch-cta:hover{transform:translateY(-2px);}
  .tf-button:hover::after,.watch-cta:hover::after{opacity:.16;}
}
.tf-button:active,.watch-cta:active{transform:translateY(0) scale(.99);}
.tf-button:focus-visible,.watch-cta:focus-visible,.tf-link:focus-visible{outline:3px solid #fff;outline-offset:4px;}
.tf-button:disabled{opacity:.6;cursor:progress;}
.tf-button,.watch-cta,.watch-nav-cta{-webkit-tap-highlight-color:transparent;}
.watch-cta{width:auto;}

/* ---------- Section background shading -- full-bleed bands, each its own navy (tokens above). Zones
   are direct children of <body>, so a plain block already spans the viewport: no 100vw/negative-margin
   trick (that adds a horizontal scrollbar on desktop and can on some mobile browsers). ---------- */
.watch-zone{padding:clamp(48px,7vw,88px) clamp(16px,4vw,24px);}
.watch-zone-in{max-width:720px;margin:0 auto;}
/* Matches the real .stats-band's own (slightly tighter) vertical rhythm exactly. */
.watch-zone-stats{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px);}
/* Matches the real .bio's own max-width -- was capped at the generic 720px, which made the
   portrait (and the whole section) read noticeably smaller than the real page's. */
.watch-zone-about .watch-zone-in{max-width:960px;}
/* Alternating dim/dark -- same two tones used everywhere, in sequence down the page. */
.watch-zone-stats{background:var(--tf-z-dim);}
.watch-zone-cases{background:var(--tf-z-dark);}
.watch-zone-about{background:var(--tf-z-dim);}
.watch-zone-offer{background:var(--tf-z-dark);}
.watch-zone-consult{background:var(--tf-z-dim);}
.watch-zone-follow{background:var(--tf-z-dark);}

/* ---------- Highlights -- matches the real Mentorship page's own .stats-band/.band-title/.stats/
   .stat/.stat-num/.stat-label exactly (read straight from mentorship/index.html): a plain centered
   heading (not the big kicker+serif .watch-sec-head treatment used by every other section -- the
   real page deliberately keeps this one simpler/quieter), and noticeably bigger numbers. One
   deliberate difference, kept from an earlier explicit request: the real page collapses to a 2x2
   grid under 980px, but this stays 4-across at every width, so the clamp() floor below is tuned
   to still fit 4 columns on a 320px phone (verified) rather than reusing the real page's fixed
   sizes, which assume the 2-column phone layout. */
.watch-band-title{text-align:center;font-family:var(--tf-serif);font-weight:400;color:#fff;font-size:clamp(1.625rem,3vw,2.375rem);max-width:20em;margin:0 auto clamp(26px,3.5vw,44px);}
.watch-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.watch-stat{padding:clamp(10px,3vw,36px) 4px;text-align:center;min-width:0;}
.watch-stat-num{font-family:var(--tf-serif);font-size:clamp(1.5rem,6.3vw,3.625rem);font-weight:400;letter-spacing:-.02em;line-height:1;color:#fff;white-space:nowrap;font-feature-settings:"lnum" 1;}
.watch-stat-num .plus{color:var(--tf-focus);}
.watch-stat-label{margin-top:clamp(6px,1.5vw,18px);font-size:clamp(.6875rem,1.9vw,1rem);line-height:1.35;color:var(--tf-muted);}

/* ---------- Case studies -- exact port of the Mentorship page's own testimonial carousel
   (.sec-head, .tst-scroller, .tst-card, .tst-title, .tst-sum, .tst-shots-wrap/.tst-shots,
   .tst-dots/.tst-dot, .tst-shot-arrow, .tst-nav, .lb), read straight from mentorship/index.html's
   <style>. Only the variable names change (--tf-* equivalents of its --surface/--cream/--accent
   etc). The one thing that keeps every screenshot frame on the SAME horizontal line across cards
   is margin-top:auto on .tst-shots-wrap plus the JS in watch/<id>/index.html that sets every
   .tst-sum to the height of the tallest one (the same equalize() the real page uses). ---------- */
.watch-zone-wide .watch-zone-in{max-width:1120px;}
.watch-kicker{display:block;font-family:var(--tf-sans);font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tf-focus);margin-bottom:18px;}
.watch-sec-head{text-align:center;margin-bottom:clamp(28px,5vw,48px);}
.watch-sec-head h2.long{max-width:26ch;}
.watch-sec-head h2{font-family:var(--tf-serif);font-weight:400;color:#fff;font-size:clamp(2.125rem,5.2vw,3.25rem);line-height:1.1;letter-spacing:-.02em;max-width:20ch;margin:0 auto;text-wrap:balance;}
.watch-sec-head p{margin:18px auto 0;max-width:40em;font-size:1.1875rem;color:var(--tf-text);}
@media (max-width:560px){.watch-sec-head{margin-bottom:28px;}.watch-sec-head p{font-size:1.0625rem;margin-top:14px;}.watch-kicker{margin-bottom:14px;}}

.tst-scroller{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:none;align-items:stretch;}
.tst-scroller::-webkit-scrollbar{display:none;}
.tst-card{flex:0 0 320px;width:320px;scroll-snap-align:start;background:var(--tf-surface);border:.5px solid var(--tf-line-strong);border-radius:8px;padding:24px 22px;display:flex;flex-direction:column;text-align:left;box-shadow:var(--tf-shadow);}
.tst-title{font-family:var(--tf-serif);font-size:1.5rem;font-weight:400;color:#fff;margin:0 0 12px;line-height:1.2;}
.tst-sum{font-size:1.0625rem;line-height:1.6;color:var(--tf-text);margin:0 0 18px;}
.tst-sum p{margin:0;}
.tst-sum p + p{margin-top:12px;}
.tst-sum b{color:var(--tf-focus);font-weight:700;}
.tst-label{display:block;color:var(--tf-focus);font-weight:700;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;}
.tst-shots-wrap{position:relative;margin-top:auto;}
.tst-shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:9/16;width:100%;background:var(--tf-text);border:.5px solid var(--tf-line-strong);border-radius:4px;scrollbar-width:none;}
.tst-shots::-webkit-scrollbar{display:none;}
.tst-shots img{flex:0 0 100%;width:100%;height:100%;max-width:none;object-fit:contain;scroll-snap-align:center;cursor:zoom-in;display:block;}
.tst-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;padding:6px 10px;margin:0 auto;width:fit-content;background:rgba(9,13,17,.78);border-radius:20px;}
.tst-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);border:none;padding:0;cursor:pointer;transition:transform .2s ease,opacity .2s ease;}
.tst-dot.active{background:var(--tf-focus);transform:scale(1.35);}
.tst-shot-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:rgba(9,13,17,.82);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s ease;z-index:2;}
.tst-shot-arrow:hover{transform:translateY(-50%) scale(1.08);}
.tst-shot-arrow:focus-visible{outline:.5px solid var(--tf-focus);outline-offset:2px;}
.tst-scroller,.tst-shots{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.tst-dot{position:relative;}
.tst-dot::before{content:"";position:absolute;inset:-7px;}
@media (pointer:coarse){.tst-shot-arrow{width:42px;height:42px;}}
.tst-shot-prev{left:8px;}
.tst-shot-next{right:8px;}
.tst-nav{display:flex;justify-content:center;gap:12px;margin-top:10px;}
.tst-nav button{width:46px;height:46px;border-radius:50%;border:.5px solid var(--tf-line-strong);background:transparent;color:var(--tf-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s var(--tf-ease);}
.tst-nav button:hover{transform:scale(1.07);border-color:var(--tf-focus);}
.tst-nav button:focus-visible{outline:3px solid var(--tf-focus);outline-offset:3px;}
@media (max-width:760px){.tst-sum{font-size:1rem;margin-bottom:14px;}}
@media (max-width:560px){.tst-card{flex-basis:84vw;width:84vw;}}

/* Lightbox (click any screenshot to enlarge) */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:56px 16px 24px;background:rgba(6,9,12,.96);}
.lb.open{display:flex;}
.lb img{max-width:min(94vw,640px);max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);object-fit:contain;border-radius:8px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);background:#fff;}
.lb .cap{color:#fff;font-family:var(--tf-serif);font-size:1.5rem;}
.lb-close{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:.5px solid var(--tf-line-strong);background:var(--tf-surface);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s var(--tf-ease);}
.lb-close:hover{transform:scale(1.06);}
.lb-close svg{width:20px;height:20px;}
.lb[hidden]{display:none;}

/* ---------- About the Mentor -- same 2-column grid as the real Mentorship page's .bio,
   collapsing to a stacked, generously-sized portrait on mobile (was 140px -- far too small
   next to this much text; now matches the real page's own 380px mobile max-width). ---------- */
.watch-mentor{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,4vw,40px);align-items:center;text-align:left;}
/* margin:0 resets <figure>'s own default UA margin (1em 40px) -- unnoticed on desktop (the
   figure has no explicit width there, just stretches to its track), but on the phone breakpoint
   below, giving it an explicit width while that default 40px-each-side margin was still active
   inflated its grid-track contribution to width+80px, which overflowed the whole page. */
.watch-mentor-portrait{margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:.5px solid var(--tf-line-strong);box-shadow:var(--tf-shadow);}
.watch-mentor-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.watch-mentor-text p{margin:0 0 14px;font-size:.9375rem;line-height:1.7;color:var(--tf-muted);}
.watch-mentor-text p:last-child{margin-bottom:0;}
.watch-mentor-text .sig{font-family:var(--tf-serif);color:#fff;font-style:normal;font-size:1.0625rem;}
@media (max-width:620px){
  /* justify-self on just the portrait (not justify-items on the whole grid) keeps the text
     column stretched to fill its track -- justify-items:center would switch EVERY item,
     including the text, to content-based sizing instead. */
  .watch-mentor{grid-template-columns:1fr;text-align:center;}
  .watch-mentor-portrait{width:min(320px,80vw);justify-self:center;}
  .watch-mentor-text{text-align:left;}
}

/* ---------- Offer ---------- */
.watch-btn-group-1{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
.watch-btn-group-1 .watch-cta{width:100%;}

/* ---------- Offer cards -- each plan's offer is different (10% vs 15% + a bonus), so each gets
   its own card instead of a shared sentence + generic buttons: a badge states the discount up
   front, a line spells out exactly what's included, and the button is the only action. The
   Transformation card is lifted slightly (gold border + glow) since its offer has an extra
   component (the bonus) that needs to read as more valuable, not just differently priced. ---------- */
.watch-offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto;align-items:stretch;}
.watch-offer-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 22px;border-radius:12px;background:var(--tf-surface);border:.5px solid var(--tf-line-strong);box-shadow:var(--tf-shadow);}
.watch-offer-card-featured{background:var(--tf-surface-2);border-color:var(--tf-focus);box-shadow:var(--tf-shadow),0 0 0 1px rgba(224,195,139,.25);}
.watch-offer-badge{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--tf-focus);color:var(--tf-accent-ink);font:800 .8125rem/1 var(--tf-sans);letter-spacing:.06em;}
.watch-offer-card h3{font-family:var(--tf-serif);font-weight:400;font-size:1.5rem;color:#fff;margin:4px 0 0;}
.watch-offer-desc{margin:0;font-size:.9375rem;line-height:1.55;color:var(--tf-muted);}
.watch-offer-desc strong{color:#fff;font-weight:600;}
.watch-offer-bonus{margin:6px 0 0;font-size:.8125rem;font-weight:700;color:var(--tf-focus);line-height:1.4;}
.watch-offer-note{display:block;margin-top:5px;font-weight:600;font-size:.75rem;color:var(--tf-muted);}
/* margin-top:auto pins the button to the card's bottom edge regardless of how much copy sits
   above it, so both cards' buttons land on the same line even though the Transformation card
   has one extra line (the bonus) -- the grid's align-items:stretch already keeps both cards the
   same overall height; this just anchors the button within that shared height. */
.watch-offer-card .watch-cta{width:100%;margin-top:auto;}
@media (max-width:620px){.watch-offer-grid{grid-template-columns:1fr;max-width:420px;}}

/* ---------- Form (rendered into #topa-form by funnel-form.js) ---------- */
.tf-form,.tf-returning{
  display:flex;flex-direction:column;gap:14px;color:var(--tf-text);font-family:var(--tf-sans);
}
/* funnel-form.js toggles visibility via the `hidden` attribute (form.hidden = true/false), not a
   class -- without this, the `display:flex` above (an author-stylesheet class rule) beats the
   browser's own [hidden]{display:none} default at equal specificity, so both the form and the
   returning-lead panel render stacked on top of each other instead of one replacing the other.
   Confirmed and fixed the identical bug on the mentorship page's VSL poster (2026-10-12). */
.tf-form[hidden],.tf-returning[hidden]{display:none;}
.tf-field{display:flex;flex-direction:column;gap:6px;}
.tf-label{font-size:14px;color:var(--tf-muted);}
.tf-req{color:var(--tf-req);margin-left:3px;}
.tf-form input,.tf-form select{
  width:100%;min-height:46px;padding:0 14px;font:inherit;font-size:16px; /* 16px stops iOS zoom */
  color:var(--tf-text);background:var(--tf-field-bg);
  border:1px solid var(--tf-field-border);border-radius:var(--tf-radius);
}
/* Explicit color AND background (not just color) -- html{color-scheme:dark} makes browsers
   render the native dropdown panel dark by default, so dark text here (an old #111 value,
   presumably written assuming a white native panel) was nearly invisible against it. Setting
   both removes the ambiguity regardless of what color-scheme the browser would otherwise pick. */
.tf-form select option{color:var(--tf-text);background:var(--tf-field-bg);}
.tf-form input::placeholder{color:var(--tf-faint);}
.tf-form input:focus,.tf-form select:focus{outline:none;border-color:var(--tf-focus);}
.tf-phone{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:8px;}
.tf-questions{display:flex;flex-direction:column;gap:14px;}
.tf-hint{margin:0;font-size:13px;color:var(--tf-faint);}
.tf-error{margin:0;font-size:13px;color:var(--tf-error);}
.tf-error:empty{display:none;}
.tf-note{margin:0;text-align:center;font-size:13px;color:var(--tf-muted);}
.tf-consent{margin:0;font-size:11.5px;line-height:1.5;color:var(--tf-faint);}
.tf-returning-title{margin:0;font-size:20px;font-weight:600;color:#fff;font-family:var(--tf-sans);}
.tf-link{background:none;border:0;padding:0;color:var(--tf-muted);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px;align-self:center;}
/* "Did you mean john@gmail.com?" prompt under the email field (funnel-form.js). */
.tf-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:13px;line-height:1.5;color:var(--tf-muted);}
.tf-suggest[hidden]{display:none;}
.tf-suggest-yes{min-height:36px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;color:var(--tf-focus);background:rgba(224,195,139,.08);border:1px solid rgba(224,195,139,.45);border-radius:var(--tf-radius);cursor:pointer;word-break:break-all;}
.tf-suggest-yes:hover{background:rgba(224,195,139,.16);}
.tf-suggest-yes:active{transform:translateY(1px);}
.tf-suggest-yes:focus-visible,.tf-suggest .tf-link:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.tf-suggest .tf-link{align-self:center;min-height:36px;}
.tf-turnstile:empty{display:none;}

@media (max-width:420px){
  main.funnel-page,main.watch-page{padding-left:16px;padding-right:16px;}
}