/* ============================================================
   TRYBE — CINEMATIC PORTFOLIO · Sheldon Rodrigues
   near-black #0B0B0D · amber #FF7A18 · green #005d5c
   bone #ECE7DF · button teal #2dd4bf
============================================================ */

:root{
  --bg: #0B0B0D;
  --ink: #ECE7DF;
  --amber: #FF7A18;
  --green: #005d5c;
  --green-bright: #17a29d;
  --btn: #2dd4bf;
  --muted: rgba(236,231,223,.58);
  --line: rgba(236,231,223,.12);
  --card: #101014;
  --nav-h: 85px;         /* MEASURED rendered bar height, not a guess (D-20260814-16) */
  --font-head: 'Poppins', sans-serif;
  --font-sub: 'Playfair Display', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background: var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
/* orphan guard (12 Aug 2026 sweep): no single word alone on a paragraph's last
   line. Progressive enhancement only; headings keep text-wrap:balance. */
p, li{ text-wrap: pretty; }
a{ color: inherit; text-decoration: none; }

/* reveal states — early in the file so :hover rules further down win ties */
/* Reveal-on-scroll is a progressive enhancement (D-20260814-09h). Content is
   VISIBLE by default and only starts hidden while the reveal engine is
   confirmed running, so a missing or broken script can never paint a page
   blank again. That is exactly what emptied /portfolio and /speed-coaching:
   both carry data-reveal elements and neither loads main.js. */
[data-reveal]{ opacity:1; transform:none; }
.js-reveal [data-reveal]{ opacity:0; transform: translateY(42px); }
.js-reveal [data-reveal].revealed{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }

::selection{ background: var(--btn); color:#062a26; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#0B0B0D; }
::-webkit-scrollbar-thumb{ background:#26262c; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--green-bright); }

/* ============ persistent navbar — transparent, text only ============ */
/* ============ NAV STRIP (Sheldon, 14 Aug 2026): edge-to-edge glass band.
   One shared treatment across all five sites; content scrolls underneath and
   must never read through as interleaved text. ============ */
.nav-bar{
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  /* Frosted glass, matching the pricing cards (Sheldon, 14 Aug 2026): the
     cards' white sheen gradient, their blur, their teal hairline and their
     drop shadow, so the bar floats instead of reading as a black band. The
     tint is deliberately light (.30, down from .74) so the bar reads as the
     same glass as the cards. Legibility is NOT bought back with darkness:
     nav labels sit on their own chip and measure 9.12:1 AAA. The lockup ink
     sits directly on the bar and measures 4.60:1 over a pure-white worst
     case, which is AAA at its display size and AA for the 12px role line.
     That is the honest limit of a tint this light; do not fix it by
     darkening the whole bar. (D-20260814-16) */
  background:
    linear-gradient(145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%),
    var(--nav-strip-bg, rgba(11, 11, 13, .14));
  /* Legibility is bought with blur and brightness on the backdrop, not with a
     dark plate over it (D-20260814-16). Heavy blur turns passing text into a
     wash; brightness pulls near-white content down without flattening the
     glass toward black the way the old .74 tint did. */
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(.82);
  backdrop-filter: blur(24px) saturate(1.8) brightness(.82);
  border-bottom: 1px solid rgba(0, 178, 169, .4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.7), 0 10px 20px -5px rgba(0,178,169,.15);
  pointer-events: none;
}
/* anchors land fully below the strip */
html{ scroll-padding-top: var(--nav-h); }
/* the bar drops to min-height 66px under 640px, so the token follows it */
@media (max-width: 640px){ :root{ --nav-h: 67px; } }
.nav-bar a, .nav-bar button{ pointer-events: auto; }
.nav-inner{
  display: grid;
  /* auto 1fr auto: the middle track takes ALL leftover space and the links
     center inside it — equal air between brand-links and links-CTA */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  max-width: none; /* brand hugs the left edge, CTA hugs the right — frees the middle */
  margin: 0 auto;
  padding: 10px 18px;
  min-height: 84px;
}
.nav-brand{ justify-self: start; display:flex; flex-direction:column; line-height:1.1; }
.nav-name{
  font-family: var(--font-head); font-weight: 900;
  font-size: 20px; letter-spacing: .155em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.6);
  white-space: nowrap;
}
.nav-name .stroke-name{
  color: transparent;
  -webkit-text-stroke: 0.6px rgba(236,231,223,.92);
  text-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.nav-role{
  font-family: var(--font-head); font-weight: 400;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin-top: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 3px 10px rgba(0,0,0,.6);
  white-space: nowrap;
}
.nav-links{ justify-self: stretch; display:flex; align-items:center; justify-content: space-evenly; gap: clamp(10px, 2.2vw, 40px); width: 100%; padding: 0 clamp(8px, 3vw, 48px); }
/* ============================================================
   NAV PILLS, ported from the podcast page nav (trybe-unified-site
   src/styles/global.css .nav-links a), 2026-08-12. The two sites do not share
   a stylesheet or a build, so a physically shared file is not possible without
   new build glue; instead the treatment is expressed once here as custom
   properties whose NAMES match the podcast values. If the podcast chips
   change, change these tokens to match, nothing else.
   ============================================================ */
:root{
  --nav-pill-fs: 14.5px;              /* stepped up twice on 14 Aug 2026, Sheldon */
  --nav-pill-pad: 10px 16px;
  --nav-pill-radius: 9px;
  --nav-pill-border: rgba(236,231,223,.16);
  --nav-pill-bg: rgba(11, 11, 13, .62);  /* chip protects the label so the bar stays glass */
  --nav-pill-ink: #fff;
}
.nav-links a{
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--nav-pill-fs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--nav-pill-ink);
  padding: var(--nav-pill-pad); border-radius: var(--nav-pill-radius);
  border: 1px solid var(--nav-pill-border);
  background: var(--nav-pill-bg);
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.nav-links a:hover, .nav-links a:focus-visible{
  color: #06231f; background: var(--btn); border-color: var(--btn);
}
/* items inside an open dropdown menu are list rows, not pills */
.nav-menu a{ border: 0; background: none; padding: 8px 10px; }
.nav-menu a:hover, .nav-menu a:focus-visible{ color: var(--amber); background: rgba(236,231,223,.06); }
.nav-right{ justify-self: end; display:flex; align-items:center; gap: 16px; }
/* mid size below 1760px (10 links + wide brand must share the row);
   full size on wide screens where the edge-to-edge nav has the room.
   .nav-right prefix outranks the base .btn rule that appears later in the file */
.nav-right .btn-nav{ padding: 13px 20px; font-size: 10.5px; white-space: nowrap; }
@media (min-width: 1760px){
  .nav-right .btn-nav{ padding: 17px 34px; font-size: 13px; }
}

/* fixed Trybe logo — bottom right, always visible */
.corner-logo{
  position: fixed; right: 26px; bottom: 40px; z-index: 92;
  display:block;
  transition: transform .35s ease;
}
.corner-logo:hover{ transform: scale(1.07); }
.corner-logo img{
  width: 96px; height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.nav-toggle{
  display:none;
  background:none; border:1px solid rgba(236,231,223,.25); border-radius:8px;
  width:44px; height:40px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); transition: all .3s; }
/* compressed links through the whole sub-1760 range: with the wide brand + CTA,
   full-size links only fit on wide screens */
@media (max-width: 1759px){
  .nav-links{ gap: 16px; }
  .nav-links a{ font-size: 10px; letter-spacing:.12em; }
}
/* below this the row genuinely cannot fit (10 links + wide brand + CTA) — hamburger, never a cut-off button */
@media (max-width: 1120px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-inner{ grid-template-columns: auto 1fr; }
  .nav-right{ grid-column: 2; }
  .nav-bar.nav-open .nav-links{
    display:flex; flex-direction:column; gap: 14px;
    position:absolute; top:100%; left:0; right:0;
    /* glassmorphic panel, not the old black strip */
    background: linear-gradient(160deg, rgba(18,28,42,.93), rgba(9,16,27,.9));
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(0,178,169,.32);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,.6);
    padding: 22px 0 28px;
    text-align:center;
    max-height: 82vh; overflow-y:auto;
  }
  .nav-bar.nav-open .nav-links a{ font-size: 13px; }
  /* groups expand inline in the mobile panel */
  .nav-bar.nav-open .nav-group{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
  .nav-bar.nav-open .nav-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:none; border:0; box-shadow:none; backdrop-filter:none; padding:2px 0 4px; min-width:0;
    display:flex; flex-direction:column; gap:8px;
  }
  .nav-bar.nav-open .nav-menu a{ font-size:11.5px; opacity:.82; }
  .nav-bar.nav-open .nav-caret{ display:inline-block; opacity:.85; transition: transform .25s ease; }

  /* THE DRAWER IS A COLUMN, NOT A ROW. `.nav-links` carries
     `justify-content: space-evenly` for the desktop bar, and nothing reset it
     here, so in a 692px tall panel the four items were pushed to 89, 311, 637
     and 695: scattered down the screen with no relationship to each other.
     Sheldon, 19 Aug 2026: "this spreads out weirdly". */
  .nav-bar.nav-open .nav-links{
    justify-content: flex-start;
    /* AND THE PANEL HAD NO FLOOR. The drawer only ever set a background-IMAGE
       (a gradient at .93). `.nav-bar` carries its own backdrop-filter, which
       makes it a stacking context, and the drawer sits inside it as an
       absolutely positioned child with z-index auto, so the hero copy behind
       showed straight through the lower half of the panel and the chips read
       as floating at random over the page. That is what Sheldon saw twice.
       An opaque background-COLOR under the gradient is the floor; the explicit
       z-index puts the panel above its siblings inside the bar. */
    background-color: #0a121d;
    z-index: 5;
    isolation: isolate;
  }

  /* AND EVERY DROPDOWN LINK WAS UNREACHABLE ON A PHONE.
     `.nav-group.dd-closed .nav-menu` (line ~1881) hides the menu with THREE
     !important declarations. It exists for the desktop hover menu, where
     :focus-within would otherwise pin a menu open after a click. But the class
     is present from page load, and !important beats the drawer rules above, so
     on mobile the inline menus were forced hidden and tapping did nothing:
     measured `dd-closed` still set, visibility hidden, 0 usable links.
     In the drawer the menus are meant to be permanently expanded inline, so
     this re-opens them. It needs !important AND higher specificity (0,4,0
     against 0,2,0) because two !important declarations are settled by
     specificity. Same lesson as the unified site on 17 Aug: a desktop-only
     rule with !important is how a phone loses its navigation. */
  .nav-bar.nav-open .nav-group.dd-closed .nav-menu{
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
}
@media (max-width: 900px){
  .nav-right .btn-nav{ display:none; }
}
@media (max-width: 640px){
  /* The menu button must ALWAYS fit. .nav-name is white-space:nowrap and this
     is the longest lockup on any Trybe site, so on a phone the auto-sized
     brand column grew past the viewport and pushed the hamburger off the
     right edge: measured 9px off at 390 and 39px off at 360, where it was
     barely tappable. Structural fix, not a magic number: the toggle column is
     `auto` (it always gets its 44px), the brand column is minmax(0,1fr) so it
     yields instead of overflowing, and the brand clips rather than shoving. */
  .nav-inner{ grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
  .nav-brand{ min-width: 0; overflow: hidden; }
  .nav-name{ font-size: 13.5px; letter-spacing: .10em; }
  .nav-role{ font-size: 8.5px; letter-spacing: .14em; }
  .nav-inner{ min-height: 66px; }
  .corner-logo img{ width: 64px; }
  .corner-logo{ right: 12px; bottom: 10px; }
}

/* frame HUD (bottom-left, echoes the reference site) */
.frame-hud{
  position:fixed; left:26px; right:26px; bottom:18px; z-index:90;
  pointer-events:none;
}
.frame-num{
  font-family:'Poppins',monospace,sans-serif; font-size:10px; font-weight:500;
  letter-spacing:.35em; color: rgba(236,231,223,.6);
}
.frame-num b{ color: var(--amber); font-weight:600; letter-spacing:.22em; }
.progress-rail{
  margin-top:8px; height:2px; width:100%;
  background: rgba(236,231,223,.08);
}
.progress-bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--amber), var(--btn));
  box-shadow: 0 0 12px rgba(255,122,24,.5);
}

/* film grain removed — clean high-definition image */

/* ============ persistent scroll hint · axis-aligned over the Trybe logo ============ */
.scroll-hint{
  position: fixed;
  right: 74px; /* = corner logo center: 26px offset + 96px/2 */
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 88; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hint-chevs{ position: relative; width: 20px; height: 26px; }
.hint-chev{
  position:absolute; left:50%; width:13px; height:13px;
  border-left:3px solid var(--amber);
  border-top:3px solid var(--amber);
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.75));
}
.hint-chev.c1{ top:12px; animation: chevRise 2.2s ease-in-out infinite; }
.hint-chev.c2{ top:0; animation: chevRise 2.2s ease-in-out .25s infinite; }
.hint-mouse{
  width: 27px; height: 45px;
  border: 2px solid rgba(236,231,223,.85);
  border-radius: 14px;
  position: relative;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.7));
}
.hint-mouse span{
  position:absolute; top:8px; left:50%; width:5px; height:11px; margin-left:-2.5px;
  border-radius:3px; background: var(--amber);
  box-shadow: 0 0 8px rgba(255,122,24,.8);
  animation: cue 1.8s ease-in-out infinite;
}
.hint-hand{
  display: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
  animation: handSwipe 2.4s ease-in-out infinite;
}
.hint-label{
  font-family: var(--font-head);
  font-size: 10px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  margin-right: -0.3em;
}
@keyframes handSwipe{
  0%, 12%{ transform: translateY(6px); opacity:.45; }
  38%{ transform: translateY(-12px); opacity:1; }
  62%{ transform: translateY(-12px); opacity:1; }
  88%, 100%{ transform: translateY(6px); opacity:.45; }
}
@keyframes chevRise{
  0%, 15%{ opacity:0; transform: translateX(-50%) translateY(8px) rotate(45deg); }
  45%{ opacity:1; transform: translateX(-50%) translateY(0) rotate(45deg); }
  75%, 100%{ opacity:0; transform: translateX(-50%) translateY(-8px) rotate(45deg); }
}
@media (max-width: 820px){
  .hint-mouse{ display:none; }
  .hint-hand{ display:block; }
}

/* ============ cinematic scenes ============ */
.scene{ position:relative; height:500vh; background:var(--bg); }
#scene-hero{ height:600vh; }
#scene-podcast{ height:360vh; }
#scene-panels{ height:400vh; }

/* fixed 100vh (not dvh): a dvh box resizes every time the mobile URL bar
   collapses/expands mid-scroll, which reads as jitter. The svh paddings on
   CTAs/words keep everything visible in the smallest viewport state. */
.scene-inner{
  position: sticky; top:0; height:100vh; overflow:hidden;
}
.scene-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transform: translateZ(0);
}
.scene-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(11,11,13,0) 42%, rgba(11,11,13,.55) 100%),
    linear-gradient(180deg, rgba(11,11,13,.45) 0%, rgba(11,11,13,0) 22%, rgba(11,11,13,0) 72%, rgba(11,11,13,.6) 100%);
}
.scene-shade-light{
  background:
    linear-gradient(180deg, rgba(11,11,13,.35) 0%, rgba(11,11,13,0) 25%, rgba(11,11,13,0) 70%, rgba(11,11,13,.5) 100%);
}

/* kinetic display type */
.word-stack{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center; z-index:5;
}
.word-group{
  grid-area: 1/1;
  opacity:0;
  will-change: transform, opacity;
  padding: 0 4vw;
}
.display{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(3.4rem, min(11.5vw, 13vh), 10.5rem);
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  display:flex; flex-direction:column; align-items:center;
}
.display-sm{ font-size: clamp(2.6rem, min(8vw, 11vh), 7.4rem); }
.display .fill{
  color: var(--ink);
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 18px rgba(0,0,0,.65), 0 12px 60px rgba(0,0,0,.5);
}
.display .stroke{
  color: transparent;
  -webkit-text-stroke: 2px rgba(236,231,223,.95);
  text-stroke: 2px rgba(236,231,223,.95);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.85));
}
.scene-caption{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  color: #fff;
  max-width: 640px;
  margin: 26px auto 0;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 20px rgba(0,0,0,.6);
}

/* scenes 1–3: words sit LOW (below the chin), same size and height everywhere */
.hero-words,
#scene-terminal .word-stack,
#scene-panels .word-stack{
  place-items: end center;
  padding-bottom: 27vh;
  padding-bottom: 25svh;
}
.hero-words .display,
#scene-terminal .display,
#scene-terminal .display-sm,
#scene-panels .display,
#scene-panels .display-sm{
  font-size: clamp(2.2rem, 6.5vw, 5.6rem);
}
#scene-panels .scene-caption{
  margin-top: 16px;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
}
.hero-words .display{
  font-size: clamp(2.2rem, 6.5vw, 5.6rem);
}

/* podcast subheadline */
.podcast-sub{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.6;
  color: #fff;
  max-width: 920px;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 22px rgba(0,0,0,.65);
  text-wrap: balance;
}

/* hero constants */
.hero-constant{
  position:absolute; left:0; right:0; bottom:7vh; bottom:7svh; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; padding:0 5vw;
}
.hero-sub{
  font-family: var(--font-head);   /* Poppins — readable over the busy collage, was thin serif */
  font-weight: 600;
  font-style: normal;
  font-size: clamp(.8rem, .92vw, .95rem);
  line-height: 1.45;
  max-width: 62ch; margin-left:auto; margin-right:auto;
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0,0,0,.92), 0 4px 20px rgba(0,0,0,.75);
}
.scroll-cue{
  position:relative;
  width:22px; height:38px; border:1px solid rgba(236,231,223,.55); border-radius:12px;
  margin: 0 auto 2px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:3px; height:8px; margin-left:-1.5px;
  border-radius:2px; background:var(--amber);
  animation: cue 1.8s ease-in-out infinite;
}
.accent-amber{ color: var(--amber); font-style: inherit; }
.vision-text p.accent-amber{ color: var(--amber); } /* outranks .vision-text p */
.hero-sub-strong{
  /* green to match the button beneath it — same treatment as .mirror-cta-sub */
  color: var(--btn);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.65);
}
/* the promise line — same crisp treatment as the eyebrow (Poppins, spaced, shadow)
   but green, on its own line right above the button */
.hero-promise{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(.92rem, 1.4vw, 1.14rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--btn);
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.65);
  margin: 0;
}
@keyframes cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(14px);opacity:0} 100%{opacity:0} }

/* podcast overlay — PODCAST between the neon sign and the bottles,
   subheadline on the clear wooden foreground of the table */
.podcast-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding-bottom: 5vh;
  opacity:0;
}
.podcast-overlay .display-podcast{
  position:absolute;
  top: 46%; left: 0; right: 0;
  transform: translateY(-50%);
}
.podcast-eyebrow{
  font-family: var(--font-sub);
  font-style: normal; font-weight:500;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: #ffb26b;
  text-shadow: 0 0 26px rgba(255,122,24,.55);
}
.display-podcast{ font-size: clamp(3rem, 10vw, 9rem); }

/* closer overlay — chest height, clear of the face */
.closer-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap: 16px; text-align:center; padding: 0 5vw 16vh;
  padding-bottom: 14svh;
  opacity:0;
}
.closer-overlay .display{ font-size: clamp(2.2rem, 6.4vw, 5.4rem); }
.closer-eyebrow{
  font-family: var(--font-head);
  font-weight:700; font-size: 14px;
  letter-spacing:.4em; text-transform:uppercase;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.6);
}
.closer-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* buttons */
.btn{
  display:inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 17px 34px;
  border-radius: 8px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  cursor:pointer; border:0;
}
.btn-teal{
  background: var(--btn);
  color: #06231f;
  box-shadow: 0 8px 26px rgba(45,212,191,.35), 0 3px 10px rgba(0,0,0,.4);
}
.btn-teal:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(45,212,191,.5), 0 5px 14px rgba(0,0,0,.5);
}
.btn-ghost{
  background: rgba(11,11,13,.55);
  color: var(--ink);
  border:1px solid rgba(236,231,223,.35);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{
  transform: translateY(-3px);
  border-color: var(--amber);
  color:#ffd9b8;
  box-shadow: 0 10px 30px rgba(255,122,24,.25);
}
.btn-block{ width:100%; }

/* ============ stats strip — sunrise image, echoing the waitlist ============ */
.stats-strip{
  position:relative; z-index:4;
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: clamp(60px, 9vw, 110px) 5vw;
}
.stats-strip::before{
  content:''; position:absolute; inset:0;
  background: rgba(3,11,20,.28);
  pointer-events:none;
}
.stats-rail{ position:relative; z-index:1; }
.stats-rail{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  max-width: 1640px; margin: 0 auto;
}
.stat{ text-align:center; }
.stat-num{
  display:block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.1vw, 3rem);
  letter-spacing:-.01em;
  color: #fff;
  line-height:1.05;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 20px rgba(0,0,0,.6);
}
.stat-num::after{
  content:'';
  display:block; width:34px; height:2px;
  margin: 14px auto 12px;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255,122,24,.6);
}
.stat-label{
  font-size: 11px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.6);
}

/* ============ legacy zone — replicated from mentorship-community.trybeinc.com ============ */
.legacy-bg{
  position: relative;
  background: #030b14;
  background-image: radial-gradient(ellipse 120% 1400px at 50% 0%, #1F314F 0%, #0B1727 45%, #030b14 100%);
  background-repeat: no-repeat;
  overflow: clip;
}
.legacy-bg .section{ background: transparent; position: relative; z-index: 1; }

/* ambient glowing orbs — pinned to the viewport for the whole zone */
.legacy-orbs{
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
  pointer-events: none; z-index: 0; overflow: visible;
}
.legacy-orbs span{
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(160px);
  /* PERF 2026-07-16: static (was animation blob) — see mentorship note */
  animation: none;
}
.orb-purple{ top:-5%; left:-5%; width:55rem; height:55rem; background:#6E298C; opacity:.35; }
.orb-teal{ top:35%; right:-5%; width:45rem; height:45rem; background:#00B2A9; opacity:.35; animation-delay:-2s; }
.orb-indigo{ bottom:-10%; left:15%; width:50rem; height:50rem; background:#4F46E5; opacity:.25; animation-delay:-4s; }
@keyframes blob{
  0%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(40px,-60px) scale(1.2); }
  66%{ transform: translate(-30px,30px) scale(0.9); }
  100%{ transform: translate(0,0) scale(1); }
}

/* glassmorphic cards — teal default, exactly per the original */
.legacy-bg .card,
.legacy-bg .img-panel,
.legacy-bg .vision-panel,
.legacy-bg .feature-card,
.legacy-bg .backstory-img{
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.legacy-bg .card:hover,
.legacy-bg .img-panel:hover,
.legacy-bg .feature-card:hover,
.legacy-bg .vision-panel:hover,
.legacy-bg .backstory-img:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(0,178,169,0.3);
}
.legacy-bg .vision-panel:hover{
  border-color: rgba(110,41,140,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(110,41,140,0.3);
}
.legacy-bg .img-panel{ padding: .75rem; cursor: pointer; }
.legacy-bg .img-panel img{ border-radius: 1rem; }

/* purple variant — vision panel, track-record banners, docu / social / UX categories
   (portfolio categories after moving coaching out: 1 podcast, 2 promo, 3 docu, 4 explainer, 5 social, 6 remote, 7 UX) */
.legacy-bg .glass-purple,
.legacy-bg .pf-category:nth-of-type(3) .card, .legacy-bg .pf-category:nth-of-type(3) .img-panel,
.legacy-bg .pf-category:nth-of-type(5) .card, .legacy-bg .pf-category:nth-of-type(5) .img-panel,
.legacy-bg .pf-category:nth-of-type(7) .card, .legacy-bg .pf-category:nth-of-type(7) .img-panel{
  border-color: rgba(110,41,140,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(110,41,140,0.15);
}
.legacy-bg .glass-purple:hover,
.legacy-bg .pf-category:nth-of-type(3) .card:hover, .legacy-bg .pf-category:nth-of-type(3) .img-panel:hover,
.legacy-bg .pf-category:nth-of-type(5) .card:hover, .legacy-bg .pf-category:nth-of-type(5) .img-panel:hover,
.legacy-bg .pf-category:nth-of-type(7) .card:hover, .legacy-bg .pf-category:nth-of-type(7) .img-panel:hover{
  border-color: rgba(110,41,140,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(110,41,140,0.3);
}

/* hover: ONLY the container lifts and zooms — imagery stays static inside */
.vision-img{ overflow:hidden; border-radius:14px; }
.legacy-bg .img-panel{ overflow:hidden; }
.embed{ overflow:hidden; }

/* original yellow accents inside the legacy zone */
.legacy-bg blockquote{
  border-left-color: #FBBF24;
  background: rgba(255,255,255,0.05);
}
.legacy-bg .ps-panel{
  background: rgba(11,23,39,0.8);
  border: 1px solid rgba(251,191,36,0.3);
}
.legacy-bg .ps-title{ color: var(--amber); }

/* ============ editorial sections ============ */
.section{
  position:relative; z-index:4;
  background: var(--bg);
  padding: clamp(90px, 12vw, 170px) 0;
  border-top: 1px solid var(--line);
}
.wrap{ max-width: 1280px; margin:0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.wrap.narrow{ max-width: 880px; }

.eyebrow{
  font-family: var(--font-sub);
  font-style: normal; font-weight:500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--amber);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:''; display:inline-block; vertical-align:middle;
  width:44px; height:1px; background:var(--amber); margin-right:14px; opacity:.7;
}
.headline{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.headline em{
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(236,231,223,.85);
}
.headline-center{ text-align:center; }
.headline .nowrap{ white-space: normal; }
@media (min-width: 760px){
  .headline .nowrap{ white-space: nowrap; }
  .headline-vision{ font-size: clamp(2.1rem, 4.6vw, 4rem); }
}
.masterclass-cta{
  margin-top: clamp(18px, 2.4vw, 30px);
  display:flex; flex-direction:column; align-items:center; gap: 26px;
  text-align:center;
}
.masterclass-text{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: rgba(236,231,223,.85);
  max-width: 780px;
  line-height: 1.7;
}
.nxt-block{ margin-top: clamp(56px, 7vw, 90px); }

/* full-bleed quote strip on the sunrise image */
.nxt-strip{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: clamp(56px, 7vw, 90px);
  padding: clamp(70px, 9vw, 130px) clamp(28px, 8vw, 140px);
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top: 1px solid rgba(236,231,223,.12);
  border-bottom: 1px solid rgba(236,231,223,.12);
}
.nxt-story{
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.9;
  color: #fff;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 22px rgba(0,0,0,.6);
  position: relative; z-index: 1;
}
.nxt-story .accent-amber{ text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 22px rgba(0,0,0,.6); }
.q-mark{
  position: absolute;
  font-family: var(--font-sub);
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,.7);
  opacity: .9;
  z-index: 1;
}
.q-open{ top: clamp(14px, 2.4vw, 30px); left: max(16px, calc(50% - 560px)); }
.q-close{ bottom: clamp(0px, 1vw, 10px); right: max(16px, calc(50% - 560px)); }
.nxt-cta{ margin-top: clamp(30px, 4vw, 44px); }
.nxt-story-last{ margin-top: 18px; white-space: nowrap; }
@media (max-width: 720px){ .nxt-story-last{ white-space: normal; } }
.nxt-strip-cta{ text-align: center; margin-top: 30px; position: relative; z-index: 1; }
.masterclass-panel{ margin-top: clamp(28px, 4vw, 44px); margin-bottom: 0; }
.lede{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: rgba(236,231,223,.8);
  max-width: 760px;
  margin: -20px 0 clamp(40px, 5vw, 64px);
}
.lede.center{ margin-left:auto; margin-right:auto; text-align:center; }
.center{ text-align:center; }

/* cards & embeds */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.grid-2.tight{ gap: clamp(16px, 2vw, 24px); }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.span-center{ grid-column: 1 / -1; max-width: 620px; margin: 0 auto; width:100%; }

.card{
  /* glass by default (D-20260814-09i): no text surface is ever a solid
     dark panel, even if it renders outside .legacy-bg */
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,178,169,0.4);
  border-radius: 14px;
  overflow:hidden;
  transition: transform .5s cubic-bezier(.22,.9,.3,1), border-color .5s, box-shadow .5s;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(45,212,191,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 8px 30px rgba(0,93,92,.35);
}
.card figcaption, .card-pad{ padding: 22px 26px; }
.card h3{
  font-family: var(--font-head);
  font-weight:600; font-size: 1.02rem;
  letter-spacing:.02em; color: var(--ink);
}
.card p{ font-size:.9rem; color: var(--muted); margin-top:6px; }
.card-pad h3{ margin: 14px 0 10px; font-size:1.15rem; }
.card-pad{ padding: 34px 30px; }
.value-index{
  font-family: var(--font-sub); font-style: normal;
  font-size: 1rem; color: var(--amber);
}

.embed{
  position:relative; padding-bottom:56.25%; height:0; background:#000;
}
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* vision hero video — spans the full wrap, same width as the cards below it */
.vision-hero{
  max-width: none;
  margin: 0 auto clamp(34px, 4.5vw, 56px);
}

.img-panel{
  border-radius: 14px; overflow:hidden;
  border: 1px solid rgba(0,178,169,0.4);
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-bottom: clamp(20px, 3vw, 36px);
  transition: transform .5s cubic-bezier(.22,.9,.3,1), border-color .5s, box-shadow .5s;
}
/* reserve layout space for lazy panel images — their late load was growing
   the document mid-scroll, forcing a ScrollTrigger recalc that snapped the
   scrubbed scenes backward (the desktop "rewind" glitch). Ratios measured
   from the actual assets; the few non-16:9 panels get exact overrides. */
.img-panel img{ aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; display: block; }
.masterclass-panel img{ aspect-ratio: 1178 / 662; }
.backstory-img img{ aspect-ratio: 975 / 1082; }
.vision-img img{ aspect-ratio: 1299 / 1613; width: 100%; height: auto; object-fit: cover; display: block; }
.img-panel:hover{
  transform: translateY(-4px);
  border-color: rgba(255,122,24,.4);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.grid-2 .img-panel{ margin-bottom:0; }

/* vision */
.vision-panel{
  display:grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px);
  background: linear-gradient(145deg, #101014 0%, #0c1213 100%);
  border:1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(50px, 6vw, 80px);
  position:relative; overflow:hidden;
}
.vision-panel::after{
  content:''; position:absolute; right:-120px; top:-120px;
  width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,93,92,.4), transparent 70%);
  pointer-events:none;
}
.vision-kicker{
  font-family: var(--font-sub); font-style: normal;
  color: var(--amber); font-size:1.05rem; margin-bottom:14px;
}
.vision-text h3{
  font-family: var(--font-head); font-weight:800;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height:1.15; margin-bottom: 20px;
}
.vision-text .accent{ color: var(--btn); }
.vision-text p{ color: rgba(236,231,223,.78); margin-bottom: 22px; font-size:1.05rem; line-height:1.75; }

/* "try & be" quote — logo left, lines right-aligned */
.trybe-quote{
  display:flex; align-items:center; gap: 26px;
  justify-content: space-between;
  padding: 26px 30px;
  margin: 28px 0;
}
.trybe-quote-logo{
  width: 108px; height:auto; flex-shrink:0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.trybe-quote-lines{
  text-align: left;
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 2;
  color: var(--ink);
}
.trybe-quote-lines .q-lead{
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.trybe-quote-lines p{ color: var(--ink) !important; margin: 0 !important; font-size: inherit; }
.trybe-quote{ justify-content: flex-start; }
.trybe-quote-list{
  list-style: disc;
  padding-left: 1.2em;
  margin: 0;
  color: var(--ink);
}
.trybe-quote-list li{ margin: 4px 0; }
@media (max-width: 640px){
  .trybe-quote{ flex-direction: column; align-items: center; gap: 18px; }
  .trybe-quote-lines{ text-align: center; }
  .trybe-quote-list{ display: inline-block; text-align: left; }
}
blockquote{
  border-left: 3px solid var(--amber);
  background: rgba(255,122,24,.06);
  border-radius: 0 12px 12px 0;
  padding: 20px 26px;
  margin: 22px 0;
}
blockquote .q-lead{
  font-family: var(--font-sub); font-style: normal;
  font-size: 1.35rem; color: var(--ink); margin-bottom:8px;
}
blockquote p{ color: rgba(236,231,223,.75); margin:0; }
.vision-img{ align-self:center; }
.vision-img img{ border-radius: 14px; border:1px solid var(--line); }
.values-kicker{
  font-family: var(--font-sub); font-style: normal;
  text-align:center; color: var(--amber);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* backstory */
.backstory-grid{
  display:grid; grid-template-columns: 7fr 5fr;
  gap: clamp(30px, 4vw, 60px);
  align-items:start;
}
.backstory-text p{ color: rgba(236,231,223,.78); margin-bottom:15px; font-size:1.02rem; }
.backstory-img{ position:sticky; top:110px; }
.backstory-img img{ border-radius:16px; border:1px solid var(--line); }
.ps-panel{
  margin-top: 34px;
  background: rgba(0,93,92,.1);
  border: 1px solid rgba(23,162,157,.3);
  border-radius: 16px;
  padding: 28px 30px;
}
.ps-title{
  font-family: var(--font-sub); font-style: normal; font-weight:600;
  font-size: 1.1rem; text-transform: none; letter-spacing: 0;
  color: var(--amber); margin-bottom: 14px;
}
.ps-highlight{
  font-family: var(--font-sub); font-style: normal;
  color: var(--ink) !important; font-size: 1.12rem !important; line-height:1.5;
  margin-bottom: 0 !important;
}

/* testimonials feature */
.feature-card{
  display:grid; grid-template-columns: 3fr 2fr;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid rgba(0,178,169,0.4);
  border-radius:16px; overflow:hidden;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.feature-media .embed{ height:100%; padding-bottom:0; min-height:340px; }
.feature-body{ padding: clamp(26px, 3vw, 44px); display:flex; flex-direction:column; justify-content:center; }
.feature-heads{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.avatar{ width:62px; height:62px; border-radius:50%; object-fit:cover; border:2px solid var(--btn); }
.org-logo{ height:56px; width:auto; background:rgba(236,231,223,.06); padding:8px; border-radius:10px; }
.feature-body h3{ font-weight:800; font-size:1.5rem; }
.feature-role{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color: var(--amber); margin: 6px 0 18px;
}
.feature-quote{
  font-family: var(--font-sub); font-style: normal;
  color: rgba(236,231,223,.85); font-size:1.05rem; line-height:1.6;
}

/* portfolio */
.pf-category{ margin-top: clamp(70px, 9vw, 120px); }
.section .grid-2 + .img-panel,
.section .feature-card + .grid-2{ margin-top: clamp(28px, 4vw, 44px); }
#testimonials .img-panel{ margin-top: clamp(28px,4vw,44px); }
#testimonials .center{ margin-top: 10px; }

/* waitlist — Trybe sunrise background, card vertically centered */
.waitlist{
  position: relative;
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #07100f;
  padding-bottom:0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.waitlist > .wrap.narrow{ margin: auto; width: 100%; }
.waitlist::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(3,11,20,.35) 0%, rgba(3,11,20,.1) 45%, rgba(3,11,20,.55) 100%);
  pointer-events:none;
}
.waitlist > *{ position:relative; z-index:1; }
.waitlist-card{
  background: linear-gradient(160deg, rgba(20,28,34,.26) 0%, rgba(16,24,26,.20) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border:1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  text-align:center;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 8px 26px rgba(0,0,0,.4);
  transition: transform .5s cubic-bezier(.22,.9,.3,1), box-shadow .5s;
}
.waitlist .headline{ font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 18px; }
.waitlist .lede{ font-size: clamp(.98rem, 1.4vw, 1.15rem); margin: 0 0 8px; max-width: none; }
/* top padding must clear the fixed navbar (~84px) so the headline never
   tucks under it; the footer's default margin is trimmed here so the
   card's auto margins have free space to center within the viewport */
.waitlist{ padding-top: clamp(108px, 9vw, 118px); } /* 84px navbar + 24px, mirroring the footer gap */
.waitlist .footer{ margin-top: 24px; }
.waitlist-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(45,212,191,.22);
}
.waitlist-logo{ height:120px; margin: 0 auto 18px; border-radius:14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
@media (max-width: 640px){ .waitlist-logo{ height:96px; } }
.waitlist-form{ max-width: 460px; margin: 18px auto 0; display:flex; flex-direction:column; align-items:center; gap:11px; }
.waitlist-form input{
  width:100%;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(236,231,223,.2);
  border-radius: 10px;
  padding: 13px 18px;
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--ink);
  outline:none;
  transition: border-color .3s, box-shadow .3s;
}
.waitlist-form input::placeholder{ color: rgba(236,231,223,.35); }
.waitlist-form input:focus{
  border-color: var(--btn);
  box-shadow: 0 0 0 3px rgba(45,212,191,.15);
}
.fine{
  font-size:.72rem; color: rgba(236,231,223,.75);
  width: 640px; max-width: 88vw;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  text-wrap: balance;
}
/* CASL express-consent row — checkbox must render unchecked by default */
.consent-row{
  display:flex; align-items:flex-start; gap:10px; justify-content:center;
  width: 640px; max-width: 88vw;
  margin-top: 4px; cursor:pointer; text-align:center;
}
.consent-row input[type="checkbox"]{
  flex:none; width:17px; height:17px; margin-top:1px;
  accent-color: var(--btn); cursor:pointer;
}
.consent-row .fine{ width:auto; max-width:none; margin:0; }
.btn-block{ align-self: stretch; }

/* footer */
.footer{ border-top:1px solid var(--line); margin-top: clamp(70px, 9vw, 110px); padding: 34px 0 96px; }
.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.footer-brand{ display:flex; align-items:center; gap:14px; font-weight:700; letter-spacing:.04em; }
.footer-brand img{ width:76px; height:auto; }
.footer-legal{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(236,231,223,.45);
}
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding: 10px 18px;
  border:1px solid rgba(236,231,223,.18); border-radius:999px;
  transition: all .3s ease;
}
.footer-social a:hover{ background: var(--btn); color:#06231f; border-color:var(--btn); }

/* reveal state rules live near the top of this file */

/* ============ responsive ============ */
@media (max-width: 1080px){
  .stats-rail{ grid-template-columns: repeat(3, 1fr); row-gap:48px; }
  .grid-3{ grid-template-columns: 1fr; }
  .vision-panel, .backstory-grid, .feature-card{ grid-template-columns: 1fr; }
  .backstory-img{ position:static; order:-1; }
  .feature-media .embed{ padding-bottom:56.25%; min-height:0; }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  .stats-rail{ grid-template-columns: repeat(2, 1fr); }
  .chrome-center{ font-size: 9px; letter-spacing:.3em; max-width: 60vw; }
  .chrome-logo img{ width:44px; height:44px; }
  .scene{ height:420vh; }
  .display .stroke{ -webkit-text-stroke-width:1.4px; }
  .scroll-cue{ display:none; }
  .frame-hud{ left:16px; right:16px; }
}

/* ============================================================
   ACCELERATOR PAGE SECTIONS (new for accelerator.trybeinc.com)
============================================================ */

/* contrast + who-for lists */
.vs-title{ font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,231,223,.55); margin-bottom: 16px; }
.vs-title-us{ color: var(--amber); }
.vs-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vs-list li{ padding-left: 26px; position: relative; color: rgba(236,231,223,.82); line-height: 1.55; }
.vs-list li::before{ content: '\2014'; position: absolute; left: 0; color: rgba(236,231,223,.3); }
.vs-list-us li::before{ content: '\2713'; color: var(--btn); font-weight: 700; }
.proof-line{ margin-top: clamp(30px, 4vw, 46px); max-width: 880px; }
.proof-wide{ max-width: none; } /* stretches to the full width of the cards above */
.lede.center{ margin-left: auto; margin-right: auto; text-align: center; }

/* ecosystem ladder */
.ladder-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.tier-card{ display: flex; flex-direction: column; position: relative; }
.tier-card p{ flex: 1 0 auto; }
.tier-price{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.95rem, 2.9vw, 2.6rem); color: #fff; line-height: 1; }
.tier-price small{ font-size: .45em; font-weight: 600; color: rgba(236,231,223,.6); }
.fit-btn{ margin-top: 18px; align-self: flex-start; }
.tier-anchor{ display: block; font-size: .84rem; color: var(--amber); margin-top: 8px; letter-spacing: .04em; }
/* PASTE-09, 11 Sep 2026. Mastermind card: terms under the price, then a
   positioning line and an audience line under the heading. The terms line is
   muted white rather than .tier-anchor amber on purpose, because small amber
   is the contrast pair already open with Sheldon. */
.tier-terms{ display: block; font-size: .84rem; color: rgba(236,231,223,.66); margin-top: 8px; letter-spacing: .04em; }
.tier-kicker{ display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--btn); margin-top: 10px; line-height: 1.35; }
.tier-audience{ display: block; font-size: .95rem; color: rgba(236,231,223,.72); margin-top: 6px; line-height: 1.5; }
.tier-btn{ margin-top: 18px; align-self: flex-start; font-size: 12px; padding: 14px 22px; }
.tier-featured{ grid-column: 1 / -1; border-color: rgba(255,122,24,.5) !important; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 70px rgba(255,122,24,.14); }
.tier-featured .tier-price{ color: var(--amber); }
.tier-star{ position: absolute; top: 22px; right: 26px; color: var(--amber); font-size: 1.5rem; }

/* stack + pricing */
.stack-card{ margin-bottom: clamp(22px, 3vw, 32px); }
.stack-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgba(236,231,223,.12); }
.stack-row span{ color: rgba(236,231,223,.85); line-height: 1.5; }
.stack-row strong{ white-space: nowrap; font-family: 'Poppins', sans-serif; color: #fff; }
.stack-row.stack-total{ border-bottom: none; padding-top: 20px; }
.stack-total span{ font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; }
/* total matches the podcast section's $20,000+ callout: same orange, same scale */
.stack-total strong{ font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--amber); }
.kickstart-card{ text-align: center; margin-bottom: clamp(22px, 3vw, 32px); }
.kickstart-card h3{ font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 10px; color: var(--amber); }
/* The needs analysis is the gate every engagement passes through, so its card
   now argues like the featured accelerator card rather than sitting as three
   grey paragraphs (Sheldon, 4 Sep: "right now this text looks very boring").
   Two columns of ticked lines on desktop, one on a phone. The card itself
   stays centre aligned; the checklist left aligns, because a list only reads
   as a list when its items share a left edge. */
.kickstart-lede{ max-width: 74ch; margin-inline: auto; }
.kickstart-list{
  text-align: left; margin: clamp(18px, 2.4vw, 26px) auto 0; max-width: 1000px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px clamp(24px, 3vw, 44px);
}
.kickstart-list li{ font-size: .98rem; }
.price-card{ text-align: center; display: flex; flex-direction: column; }
/* Flag F (ruled 2026-08-12): the three plan headings align. Founder carries a
   badge above its heading; the other two reserve the same height so the h3
   baselines match instead of staggering. */
.price-grid .price-card > h3:first-child{ margin-top: var(--price-badge-slot, 61px); }
.price-card p:last-child{ flex: 1 0 auto; }
.price-num{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.8rem); color: #fff; margin: 6px 0 2px; line-height: 1; }
.price-num small{ font-size: .4em; font-weight: 600; color: rgba(236,231,223,.6); }
.price-note{ font-size: .85rem; letter-spacing: .06em; margin-bottom: 14px; color: rgba(236,231,223,.65); }
.price-featured{ border-color: rgba(255,122,24,.5) !important; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 70px rgba(255,122,24,.14); }

/* retreat */
.retreat-video{ max-width: 980px; margin: 0 auto clamp(30px, 4vw, 48px); }
.retreat-cols .card h3{ font-size: 1.2rem; margin-bottom: 14px; }
.retreat-price{ font-size: 1.15rem; color: rgba(236,231,223,.7); margin-bottom: 2px; }
.retreat-price s{ opacity: .75; }
.retreat-free{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.retreat-quote{ font-family: 'Playfair Display', serif; font-style: normal; color: rgba(236,231,223,.75); margin-top: 16px; }


/* Card banner images sit flush to the card edges, clipped by its radius, at a
   fixed height so a row of cards matches whatever the source aspect is
   (D-20260814-04 Job 4). No inset, no padded box. */
.card > img:first-child, .card-media > img, .card-banner{
  display: block; width: 100%; height: clamp(150px, 17vw, 220px);
  object-fit: cover; margin: 0;
}
.card-media{ margin: 0; }

/* Full width strip bands (D-20260814-09 Jobs 8d and 8f). Same background as
   the stats strip so the page rhythm is unchanged, but the band carries real
   copy instead of repeating numbers the visitor already saw. */
.strip-band{
  background: linear-gradient(180deg, rgba(110,41,140,.22) 0%, rgba(45,212,191,.10) 100%);
  border-top: 1px solid rgba(236,231,223,.10);
  border-bottom: 1px solid rgba(236,231,223,.10);
  padding: clamp(34px, 5vw, 62px) 0;
  text-align: center;
}
.strip-band-copy{
  max-width: 940px; margin: 0 auto;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.6;
  color: rgba(236,231,223,.9);
}
/* the orphan stretch class is retired with the line it existed to stretch */
.proof-wide{ max-width: none; }

.vision-origin{ margin-top: clamp(30px, 4vw, 48px); }
.vision-origin-cap{ padding: 20px 26px 24px; }
.vision-origin-cap h3{ margin-bottom: 6px; }

/* faq */
.faq-list{ display: flex; flex-direction: column; gap: 14px; }
/* FAQ rows are glass like every other text surface (D-20260814-09i). Solid
   dark panels are not a Trybe design element: any surface carrying text uses
   the card treatment, on every page of every site, with no exceptions. */
.faq-item{
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,178,169,0.4);
  border-radius: 14px; padding: 4px 24px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: border-color .3s, box-shadow .3s;
}
.faq-item[open]{
  border-color: rgba(0,178,169,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(0,178,169,0.3);
}
.faq-item summary{ cursor: pointer; font-weight: 600; font-size: 1.02rem; padding: 16px 0; list-style: none; position: relative; padding-right: 34px; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--amber); font-size: 1.4rem; font-weight: 400; transition: transform .25s; }
.faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.faq-item p{ padding: 0 0 18px; color: rgba(236,231,223,.78); line-height: 1.6; }

/* closer second line */
.closer-welcome{ margin-top: 10px; }

/* tablet: ladder to 2-up */
@media (max-width: 1080px){ .ladder-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ============ accelerator v2 (Sheldon feedback round) ============ */
/* wider scene captions so short captions sit on two clean lines, no orphans */
.scene-caption{ max-width: 780px; text-wrap: pretty; }
.caption-wide{ max-width: 1020px; }
/* hero: eyebrow + stronger legibility over the white tee */
/* matches .closer-eyebrow exactly so the sequence opens and closes consistently */
.hero-eyebrow{
  font-family: var(--font-head); font-size: 14px;
  font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #ffffff;
  margin-bottom: 18px; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.6);
}
.display .fill{ text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 8px 24px rgba(0,0,0,.7), 0 16px 70px rgba(0,0,0,.55); }
.display .stroke{ filter: drop-shadow(0 3px 7px rgba(0,0,0,.95)) drop-shadow(0 10px 30px rgba(0,0,0,.65)); }
.hero-sub, .closer-sub{ text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 6px 24px rgba(0,0,0,.75); }
.closer-sub{
  /* Sheldon, 12 Aug brief 2.4: green, full caps, in the same font as the
     closer eyebrow. The Playfair treatment was not readable over the video. */
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(.95rem, 1.6vw, 1.3rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--btn); margin-top: 0; /* uniform flex gap = symmetric spacing */
}

/* stats kicker */
.stats-kicker{
  text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(.72rem, 1vw, .9rem); letter-spacing: .24em; text-transform: uppercase;
  color: rgba(236,231,223,.65); padding: clamp(38px, 5vw, 58px) 20px 0;
  margin: 0 0 clamp(20px, 3vw, 34px);
}

/* tier bullet lists */
.tier-list{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1 0 auto; }
.tier-list li{ padding-left: 22px; position: relative; color: rgba(236,231,223,.82); line-height: 1.5; font-size: 1.04rem; }
.tier-list li::before{ content: '\2713'; position: absolute; left: 0; color: var(--btn); font-weight: 700; }
.tier-list li strong{ color: #fff; }
/* The three accelerator price cards now carry the same check bullets as the
   ecosystem cards (Sheldon, 4 Sep: the $40,000 card read thin beside the other
   two, and all three should match). The card itself is centre aligned, but a
   checklist only reads as a list when its items share a left edge, so the list
   left aligns while the heading, price and note above it stay centred. */
.price-card .tier-list{ text-align: left; margin-top: 16px; }
.tier-card p{ flex: initial; }
/* TWO COLUMN BULLET LISTS, and why these are NOT a grid (Sheldon, 12 Sep).
   A two column grid locks items into ROWS, so one tall bullet leaves a hole
   beside it in the other column. He circled exactly that hole: "never leave
   gaps between the bullet points. That looks very odd. That's a design
   problem." CSS multi-column flows the items continuously instead, so the
   columns fill top to bottom and the hole cannot form, whatever the copy
   length. break-inside keeps a single bullet from splitting across columns.
   Standing rule: any two column bullet list on this estate uses columns, not
   grid-template-columns. */
.tier-featured .tier-list-cols,
.kickstart-card .tier-list-cols{
  display: block;
  columns: 2;
  column-gap: 26px;
}
.tier-featured .tier-list-cols li,
.kickstart-card .tier-list-cols li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 10px;
}

/* pricing: all green outlines, big GREEN numbers (green invites, orange halts) */
.price-card{ border-color: rgba(45,212,191,.45) !important; }
.price-featured{ box-shadow: none; }
/* Sized so the longest string (USD $20,000 /mo) fits inside the card on one
   line — at 3.6rem the "/mo" was being clipped on Builder and Empire. */
.price-num{
  font-size: clamp(1.95rem, 3.1vw, 2.75rem) !important;
  color: var(--btn) !important;
  white-space: nowrap;
}
.price-note{ font-size: 1.05rem; color: rgba(236,231,223,.85); }
.price-kicker{
  text-align: center;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: rgba(236,231,223,.85);
  max-width: 720px;
  margin: 0 auto clamp(22px, 3vw, 32px);
}
.price-kicker strong{ color: var(--btn); font-weight: 700; }
.price-badge{
  align-self: center;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #06231e;
  background: var(--btn);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 16px;
}
.price-card .price-was{
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(236,231,223,.75);
  margin-bottom: 2px;
}
.price-was s{
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,122,24,.9);
}
/* 12 Sep 2026. The 70% pill used to sit above the heading as a .price-badge, and
   it was the only one of the three plan cards that had one, so it pushed that
   card's heading, price and bullets down and the three cards stopped lining up.
   It now sits inline beside the struck list rate, where the discount is actually
   about. Inline means it adds no vertical box, so the three card tops agree. */
.price-off{
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #06231e;
  background: var(--btn);
  border-radius: 999px;
  padding: 4px 11px;
  margin-left: 8px;
  vertical-align: middle;
}
/* "We show up for you!" is its own sentence and gets its own line. Inside the
   kicker paragraph it wrapped mid-sentence and orphaned "We" onto the line above. */
.apply-showup{ margin-top: 10px; }
/* The application form repeated inline under the pricing ladder. */
.waitlist-inline{ margin-top: clamp(28px, 3.4vw, 44px); text-align: center; }
.waitlist-inline .headline{ font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 16px; }
.price-card .price-save{
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--btn);
  margin: 8px 0 10px;
}
.kickstart-card{ margin-top: clamp(24px, 3.2vw, 36px); }
.kickstart-card h3{ color: var(--btn); }
.tier-featured{ border-color: rgba(45,212,191,.55) !important; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 70px rgba(45,212,191,.14); }
.tier-featured .tier-price{ color: var(--btn); }
.tier-star{ color: var(--btn); }
.tier-featured .tier-price, .tier-featured h3{ text-align: center; padding-left: 36px; padding-right: 36px; }

/* retreat: full-width video + big deal card */
.retreat-video{ max-width: none; }
.deal-card{
  display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
  margin: clamp(24px, 3vw, 40px) 0;
}
/* The price block is a PRICE, not a sentence. It was carrying the whole line
   "Early-Stage Startup founders: USD $7,500" inside .deal-free, which is 3rem
   type sized for the single word FREE, in a flex item set to never shrink. The
   result was that the price column ate the card and squeezed .deal-copy to a
   ~90px ribbon wrapping every two words (Sheldon, 4 Sep). Now the label, the
   number and the discount are three separate lines at three sensible sizes,
   the column is capped, and the copy is given the remaining width explicitly
   rather than whatever is left over. */
.deal-price{ flex: 0 1 auto; text-align: center; max-width: 320px; }
.deal-retail{ display: block; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: rgba(236,231,223,.7); margin-bottom: 6px; }
.deal-retail s{ opacity: .8; }
.deal-for{
  display: block; font-size: clamp(.92rem, 1.35vw, 1.05rem); line-height: 1.35;
  color: rgba(236,231,223,.85); margin-bottom: 4px;
}
.deal-free{
  display: block; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.1;
}
.deal-save{
  display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 999px;
  background: rgba(45,212,191,.14); border: 1px solid rgba(45,212,191,.45);
  color: var(--btn); font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
/* Without a basis the copy column is the only thing that can give, so it gives
   all of it. This makes the split deliberate. */
.deal-copy{ flex: 1 1 0; min-width: 0; }
.deal-copy p{ margin: 0 0 10px; color: rgba(236,231,223,.85); line-height: 1.6; }
.sub-headline{
  text-align: center; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700;
  margin: clamp(30px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); color: #fff;
}

/* paradise banner — full-bleed strip, viewport edge to viewport edge
   (the light scrim keeps the sunset alive; text relies on drop shadows) */
/* A true full width band, flush to the top edge of its section, meeting the
   section above it (D-20260814-09 Job 9). It used to live inside .wrap, so it
   inherited the section's top padding as a gap above while the eyebrow below
   got none: a full-bleed band trapped in a padded text column. */
.retreat-section{ padding-top: 0; }
.retreat-section > .wrap{ padding-top: clamp(40px, 5vw, 72px); }
.paradise-banner{
  margin-top: 0;
  width: 100%;
  overflow: hidden; position: relative;
  background: url("../img/luxury-resort.jpg") center / cover no-repeat, #0a2a28;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.paradise-banner::before{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,20,22,.5) 0%, rgba(4,20,22,.16) 38%, rgba(4,20,22,.16) 62%, rgba(4,20,22,.55) 100%);
}
.paradise-inner{
  position: relative; text-align: center;
  max-width: 860px; margin: 0 auto;
  padding: clamp(64px, 9vw, 140px) clamp(24px, 5vw, 60px);
}
.paradise-kicker{
  font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #FBBF24; font-size: clamp(.75rem, 1vw, .9rem); margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.55);
}
.paradise-title{
  font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 800; color: #fff; margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 36px rgba(0,0,0,.55);
}
.paradise-sub{
  color: rgba(255,255,255,.92); max-width: 560px; margin: 0 auto 24px; line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 20px rgba(0,0,0,.5);
}

/* $20K value callout */
.value-callout{
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px); margin-top: clamp(24px, 3vw, 40px);
}
.callout-copy{ flex: 1 1 auto; max-width: 620px; min-width: 0; }
.callout-copy p{ margin: 0 0 8px; color: rgba(236,231,223,.85); font-size: 1.02rem; line-height: 1.6; }
/* studio stills fill the once-empty left side; 16:9 reserved so lazy loads never shift the page */
.callout-media{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.callout-media img{
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid var(--line);
}
.callout-caption{
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--btn) !important;
  margin-bottom: 12px !important;
}
.callout-big{
  font-family: 'Poppins', sans-serif; font-weight: 800; text-align: right;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1;
}
.callout-big span{ display: block; font-size: .32em; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; color: rgba(236,231,223,.8); }
.callout-big .callout-included{
  font-size: .2em; letter-spacing: .14em; margin-top: 12px;
  color: rgba(236,231,223,.7); max-width: 36ch; margin-left: auto; line-height: 1.7;
}

/* podcast thumbnail between the three flywheel cards and the value callout
   (exact 2:1 ratio reserved — lazy images must never grow the document mid-scroll) */
.podcast-thumb{ margin-top: clamp(28px, 4vw, 44px); margin-bottom: 0; }
.podcast-thumb img{ aspect-ratio: 1920 / 960; }

/* apply + fit extras */
.apply-kicker{
  font-size: .95rem; line-height: 1.65; color: rgba(236,231,223,.8);
  max-width: 620px; margin: 0 auto 18px; text-align: center;
}
.apply-kicker strong{ color: var(--amber); }
.fit-note{ margin-top: 18px; color: rgba(236,231,223,.65); font-style: italic; line-height: 1.6; }
/* same measure as the "Applications only…" proof line above it (.fine sets width:640px — undo it) */
.disclaimer-line{ width: auto; max-width: 880px; margin: 18px auto 0; text-align: center; opacity: .8; }
.disclaimer-line strong{ color: var(--btn); }
/* spans the full footer width: Trybe logo's left edge to the YouTube button's right edge */
.footer-disclaimer{
  margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(236,231,223,.1);
  font-size: .68rem; line-height: 1.7; color: rgba(236,231,223,.45);
  text-align: justify;
}

/* ============ phone scene typography & CTA clearance ============
   (kept at the end of the file so these always win the cascade) */
.nxt-lede{
  margin: clamp(34px, 4.5vw, 56px) 0 clamp(28px, 3.5vw, 44px);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
}
.nxt-image{ margin-top: clamp(28px, 4vw, 44px); }
.m-br{ display: none; }
@media (max-width: 640px){
  .m-br{ display: block; }
  .scroll-hint{ right: 44px; } /* = mobile logo center: 12px + 64px/2 */
  .hero-constant{ bottom: 28svh; gap: 12px; }
  .hero-sub{ font-size: .98rem; line-height: 1.5; }
  .hero-constant .btn, .closer-actions .btn{ padding: 13px 22px; font-size: 10.5px; }
  /* phones: the vertical hero clip centers Sheldon, so the words live in the
     black space ABOVE his head instead of on his face */
  .hero-words{ place-items: start center; padding-top: 11svh; padding-bottom: 0; }
  .d-br{ display: none; } /* desktop-only line break: on phones the bold line flows next to "business." */
  #scene-terminal .word-stack{ padding-bottom: 33svh; }
  #scene-panels .word-stack{ padding-bottom: 20svh; } /* HUMANIZING block sits on the chest, not the face */
  .closer-overlay{ padding-bottom: 20svh; gap: 12px; }
  .closer-eyebrow{ font-size: 11px; letter-spacing: .28em; padding: 0 6vw; }
  .podcast-overlay{ padding-bottom: 28svh; } /* sub sits just below their hands on the table */
  .podcast-overlay .display-podcast{ top: 45%; font-size: 2.5rem; } /* smaller so it clears the faces */
  .podcast-sub{ font-size: .95rem; padding: 0 6vw; line-height: 1.6; }

  /* gamified progress message fits the phone width */
  .frame-num{ font-size: 9px; }
  .frame-num b{ letter-spacing: .16em; }
  .scene-caption{ font-size: .92rem; padding: 0 4vw; margin-top: 14px; }

  /* stat labels: keep every label exactly two lines at phone width */
  .stat-label{ font-size: 9.5px; letter-spacing: .16em; }

  /* nav role visible again on phones, auto-fit width via JS */
  .nav-role{ display: block !important; font-size: 8.5px; margin-top: 3px; }

  /* corner logo floats above the progress rail */
  .corner-logo{ bottom: 36px !important; }

  /* footer: centered stack, bigger logo */
  .footer-row{ flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .footer-brand img{ width: 68px; }
  .footer-social{ justify-content: center; }

  /* fine print flows naturally into balanced lines, no orphan */
  .fine br{ display: none; }

  /* accelerator page phone layout */
  .ladder-grid{ grid-template-columns: 1fr; }
  .stack-row{ flex-direction: column; gap: 4px; align-items: flex-start; }
  .stack-row strong{ color: var(--amber); }
  .stack-row.stack-total{ flex-direction: row; align-items: baseline; justify-content: space-between; }
  .tier-btn{ align-self: stretch; text-align: center; }
  .tier-featured .tier-list-cols,
  .kickstart-card .tier-list-cols{ columns: 1; }
  .kickstart-list{ grid-template-columns: 1fr; }
  .deal-card{ flex-direction: column; text-align: center; }
  .deal-price{ max-width: none; }
  .value-callout{ flex-direction: column; }
  .callout-big{ text-align: center; }
  .callout-big .callout-included{ margin-left: auto; margin-right: auto; }
  .hero-eyebrow{ font-size: 11px; letter-spacing: .28em; padding: 0 6vw; }
  .closer-sub{ padding: 0 6vw; }
  .apply-kicker{ font-size: .88rem; }
}

/* ============================================================
   MIRROR CAROUSEL — founder personas (ported verbatim from
   mentorship-community so the two sites stay pixel-identical)
   Two counter-scrolling marquee rows below the hero. Built to be
   lifted wholesale onto the accelerator site: nothing here depends
   on .legacy-bg.
============================================================ */
.mirror{
  --mp: clamp(200px, 17vw, 240px);          /* photo edge = card height */
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 76px);
  /* same treatment as .stats-strip so the two read as one family */
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: clip;
  text-align: center;
}
/* matches .stats-strip::before — knocks the sunrise back so the glass cards read */
.mirror::before{
  content:''; position:absolute; inset:0;
  background: rgba(3,11,20,.28);
  pointer-events:none;
}
.mirror > *{ position: relative; z-index: 1; }
.mirror-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Inherits .display in the markup: Poppins 900, uppercase, .fill = solid white,
   .stroke = outlined. Only the size is overridden — .display's own clamp tops out at
   10.5rem, which is hero scale and far too big for a row label. */
.mirror-label{
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.02;
  margin: 0 0 14px;
}
/* .display stacks its spans in a centred flex column; keep them on one line here
   so the label reads as a single phrase rather than a two-line hero headline. */
.mirror-label.display{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .32em; }
.mirror-label + .mirror-row{ margin-bottom: clamp(8px, 2vw, 22px); }

.mirror-row{
  /* overflow:hidden is what clips the marquee horizontally — but it clips
     VERTICALLY too, which decapitated cards on hover (translateY(-8px) + scale(1.02)
     + an 80px teal glow all push past the box). Cannot use overflow-x:hidden with
     overflow-y:visible — per spec that computes overflow-y to auto and adds a
     scrollbar. So: pad the row out to give the lift somewhere to go, then pull the
     layout back with an equal negative margin so vertical rhythm is unchanged. */
  padding: 30px 0;
  margin: -30px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mirror-track{
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Gap lives on the card as margin-right, NOT as flex `gap`. With flex gap the
   duplicated half is one gap wider than the original, so translateX(-50%)
   lands slightly off and the loop visibly jumps. Margin folds the gap into
   the card's own width, which keeps -50% exact. */
.mirror-card{ margin-right: clamp(14px, 1.4vw, 22px); }

.mirror-row[data-dir="rtl"] .mirror-track{ animation: mirror-rtl 40s linear infinite; }
.mirror-row[data-dir="ltr"] .mirror-track{ animation: mirror-ltr 60s linear infinite; }
@keyframes mirror-rtl{ from{ transform: translate3d(0,0,0); }        to{ transform: translate3d(-50%,0,0); } }
@keyframes mirror-ltr{ from{ transform: translate3d(-50%,0,0); }     to{ transform: translate3d(0,0,0); } }
.mirror-row:hover .mirror-track,
.mirror-row:focus-within .mirror-track{ animation-play-state: paused; }

/* Card anatomy: square photo bleeding to the left/top/bottom edges, text beside it.
   padding:0 + overflow:hidden is what lets the photo meet the card's rounded corner
   with no inset frame and no dead space under it. */
.mirror-card{
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  width: clamp(520px, 43vw, 640px);
  height: var(--mp);
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.mirror-card:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.75);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(45,212,191,.22);
}
.mirror-photo{
  flex: 0 0 auto;
  width: var(--mp);
  height: var(--mp);
  object-fit: cover;
  border-radius: 0;      /* the card's overflow:hidden rounds the outer corners */
  display: block;
}
.mirror-body{
  display:flex; flex-direction:column; justify-content:center;
  gap: 10px; min-width: 0;
  padding: 18px 22px;
}
.mirror-problem{
  font-family: var(--font-sub);
  font-style: normal;          /* never Playfair italic */
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.mirror-answer{
  font-size: clamp(.8rem, .92vw, .87rem);
  line-height: 1.45;
  color: rgba(236,231,223,.72);
  margin: 0;
}
.mirror-cta{
  margin: clamp(30px, 4vw, 44px) auto 6px;
  /* 720px forced a wrap in the middle of "Leave with your next move"; this fits
     the whole sentence on one line at desktop widths */
  max-width: 1120px;
  padding: 0 22px;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}
/* inline-block makes the phrase wrap as ONE unit when the viewport is too narrow
   to hold the full sentence — it drops whole to the next line instead of snapping
   after "Leave with". Deliberately not white-space:nowrap, which would overflow
   a phone rather than wrap. */
.mirror-keep{ display: inline-block; }
.mirror-cta-sub{
  margin: 0 auto 22px;
  padding: 0 22px;
  /* identical clamp to .mirror-cta — the two lines must read as one block, the
     same way .hero-sub-strong matches .hero-sub and only changes weight */
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
  color: var(--btn);
}

/* Marquee is ambient decoration, not content delivery. With reduced motion the
   rows stop dead and become a normal horizontal scroll the user drives. */
@media (prefers-reduced-motion: reduce){
  .mirror-row[data-dir="rtl"] .mirror-track,
  .mirror-row[data-dir="ltr"] .mirror-track{ animation: none; transform: none; }
  .mirror-row{
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .mirror-card:hover{ transform: none; }
}

@media (max-width: 640px){
  .mirror{ padding: 44px 0 40px; }
  /* A square photo cannot hold this much text at phone widths, so the card grows
     and the photo stretches to match it — still edge-to-edge, still no dead space. */
  .mirror-card{
    width: 90vw; max-width: 380px;
    height: auto; min-height: 160px;
  }
  .mirror-photo{ width: 132px; height: auto; align-self: stretch; }
  .mirror-body{ padding: 14px 16px; gap: 7px; }
  .mirror-problem{ font-size: .92rem; }
  .mirror-answer{ font-size: .74rem; line-height: 1.4; }
  /* fewer cards on screen means the same duration reads as much faster; slow both rows down */
  .mirror-row[data-dir="rtl"] .mirror-track{ animation-duration: 58s; }
  .mirror-row[data-dir="ltr"] .mirror-track{ animation-duration: 86s; }
}


/* Accelerator-only: one label spans BOTH rows, so adjacent rows need explicit spacing.
   .mirror-row carries margin:-30px 0 to cancel its hover-headroom padding; left alone,
   two stacked rows would collapse into each other. */
.mirror-row + .mirror-row{ margin-top: 0; }

/* Accelerator runs a 5/5 split; the ported durations were tuned for the mentorship
   site's 4/6 split. Left as-is, row 1 (5 cards in 40s) outruns row 2 (5 cards in 60s)
   by 27px/s and the rows visibly desync.
   The mentorship site holds BOTH rows at 0.1 cards/sec = ~64px/s (4/40s and 6/60s).
   5 cards at that rate = 50s. Phone: mentorship is 0.069 cards/sec (4/58s, 6/86s) -> 72s.
   If the card count per row ever changes, recompute — do not copy these numbers blindly. */
.mirror-row[data-dir="rtl"] .mirror-track,
.mirror-row[data-dir="ltr"] .mirror-track{ animation-duration: 50s; }
@media (max-width: 640px){
  .mirror-row[data-dir="rtl"] .mirror-track,
  .mirror-row[data-dir="ltr"] .mirror-track{ animation-duration: 72s; }
}

/* ============================================================
   HERO SCRIM + CAROUSEL CTA SPACING (2026-07-15)
============================================================ */

/* The base .scene-shade is transparent from 22%->72%, which is exactly where the hero
   headline sits — over the busiest part of the collage. Deepen the lower band (where ALL
   the hero text lives) while leaving the 20-40% zone clear so the face is not flattened. */
#scene-hero .scene-shade{
  background:
    radial-gradient(ellipse at center, rgba(11,11,13,0) 42%, rgba(11,11,13,.55) 100%),
    linear-gradient(180deg,
      rgba(11,11,13,.55) 0%,
      rgba(11,11,13,.12) 18%,
      rgba(11,11,13,0)   34%,
      rgba(11,11,13,.30) 50%,
      rgba(11,11,13,.58) 68%,
      rgba(11,11,13,.78) 86%,
      rgba(11,11,13,.88) 100%);
}

/* The accelerator carousel has no .mirror-cta line above its button, so nothing supplies
   the clearance that .mirror-row's -30px bottom margin eats — the button collided with
   the cards. This restores it. */
.mirror-row + .mirror-cta-sub{ margin-top: clamp(62px, 6vw, 84px); }

/* ============================================================
   VLITE — click-to-load Vimeo facade (2026-07-16)
   42 concurrent Vimeo iframes were throttling each other ("Sorry,
   we are having a little trouble"). Each embed is now a local
   thumbnail + play button; the real iframe loads only on click,
   so zero players init until the user asks. Also much faster.
============================================================ */
.embed .vlite,
.embed .vlite-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlite{
  display:block; cursor:pointer; padding:0; margin:0;
  background-color:#000; background-size:cover; background-position:center;
  background-repeat:no-repeat;
  transition: filter .3s ease;
}
.vlite::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
  transition: background .3s ease;
}
.vlite:hover{ filter: brightness(1.06); }
.vlite:hover::after{ background: radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, rgba(0,0,0,.3) 100%); }
.vlite-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(54px,7vw,74px); height:clamp(54px,7vw,74px); border-radius:50%;
  background: rgba(45,212,191,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(45,212,191,.18);
  transition: transform .25s cubic-bezier(.22,.9,.3,1), background .25s ease;
  z-index:1;
}
.vlite-play::before{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:12px 0 12px 20px;
  border-color: transparent transparent transparent #04211f;
}
.vlite:hover .vlite-play{ transform:translate(-50%,-50%) scale(1.12); background: rgba(45,212,191,1); }
.vlite:focus-visible{ outline:3px solid var(--btn); outline-offset:3px; }

/* ============================================================
   HEIGHT-AWARE HERO RESPONSIVENESS (2026-07-16)
   A 16" laptop (wide but short) was blowing the headline up by width
   and cramming/overlapping the badge, sub and button; the video also
   cropped Sheldon's head at the top. Fixes: headline is capped by vh
   (see .display clamp above), the hero video is anchored higher, and
   the whole hero cluster tightens at two height breakpoints.
   Guarded by min-width:641px so phone portrait rules are unaffected.
============================================================ */
/* ============================================================
   HERO GEOMETRY (12 Sep 2026): the text is anchored to the VIDEO, not the viewport
   ============================================================
   Prince screen-shared this on a laptop and every hero line sat on Sheldon's
   face. The cause was not a colour or a font size, it was arithmetic.

   The video is 1920x1080 under object-fit:cover, so its rendered height is
       Rh = 1080 * max(vw/1920, vh/1080) = max(100svh, 56.25vw)
   and a feature at vertical fraction f of the SOURCE frame lands at
       y = f*Rh - (Rh - 100svh) * P          (P = object-position Y, 0..1)

   Differentiate that: dy/dP = -(Rh - 100svh), which is <= 0. So RAISING P moves
   his face UP the screen and LOWERING P moves it DOWN. On a wide, short laptop
   Rh > vh, and the old CSS stepped P DOWN exactly there, 24% -> 20% -> 17%,
   which drove his face down into the text. The breakpoints were not merely
   imprecise, they pushed in the wrong direction. That is why it got worse on
   smaller screens and why no amount of retuning the numbers ever fixed it.

   P is now ONE constant, and the text band is derived from the geometry above
   rather than from per-breakpoint svh guesses (RULE 8). Everything here is
   inside min-width:641px, so phone portrait keeps its own tuned hero (RULE 9).
============================================================ */
@media (min-width: 641px){
  #scene-hero{
    --hero-op: .24;                              /* must match object-position below */
    --hero-rh: max(100svh, 56.25vw);             /* rendered video height under cover */
    /* Where his face stops and clean chest begins, as a fraction of the source
       frame. DERIVED, not chosen: on a 1920x1080 screen the old rules put the
       text top at ~0.52 of the frame, and that is the one configuration Sheldon
       confirms reads correctly ("the text is right where my chest area is"). */
    --hero-safe: .52;
    /* That safe line, in viewport pixels from the top. */
    --hero-face-raw: calc(var(--hero-safe) * var(--hero-rh) - (var(--hero-rh) - 100svh) * var(--hero-op));
    /* Past roughly 2.4:1 the cover crop is so deep that his chest line falls
       below the space the sub/promise/button already need, and no text position
       can satisfy both. There the guard is capped so the column still fits on
       screen and nothing overlaps, which is the next best outcome. */
    --hero-face: min(var(--hero-face-raw), 62svh);
    /* Room kept for the sub + promise + button cluster underneath. */
    --hero-cluster: 25svh;
    /* What is left for the headline. Never negative. */
    --hero-band: max(9svh, calc(100svh - var(--hero-face) - var(--hero-cluster)));
  }
  /* ONE value at every landscape size. Stepping it is what caused the bug. */
  #scene-hero .scene-video{ object-position: center 24%; }
}

@media (min-width: 641px) and (max-height: 900px){
  /* padding-bottom and object-position deliberately NOT set here any more: the
     geometry block above handles both at every height, continuously. */
  .hero-eyebrow{ font-size: 13px; margin-bottom: 12px; }
  .hero-badge{ margin-top: 12px; padding: 6px 14px; }
  .hero-sub{ font-size: clamp(.9rem, 1.25vw, 1.08rem); }
  .hero-constant{ bottom: 5vh; bottom: 5svh; gap: 13px; }
}
@media (min-width: 641px) and (max-height: 760px){
  .hero-eyebrow{ font-size: 11.5px; letter-spacing:.3em; margin-bottom: 8px; }
  .hero-badge{ margin-top: 8px; padding: 5px 12px; font-size:.72rem; }
  .hero-sub{ font-size: .86rem; line-height: 1.45; }
  .hero-sub br{ display:none; }
  .hero-constant{ bottom: 3.5vh; bottom: 3.5svh; gap: 9px; }
  .hero-constant .btn{ padding: 12px 26px; font-size:.82rem; }
}

/* ============================================================
   HERO LAYOUT — headline off the face (2026-07-16)
   The centered headline sat on Sheldon's face on short laptops. Anchor
   the hero word-stack to the lower third (over the clean grey chest),
   deepen the scrim through the whole text zone, and tighten the bottom
   cluster so pitch line + promise + button read clearly above the fold.
============================================================ */
@media (min-width: 641px){  /* DESKTOP ONLY — mobile portrait keeps its own tuned hero layout */
/* Reserving the face zone as padding makes the overlap structurally impossible
   rather than merely unlikely: the browser guarantees the box, so there is no
   viewport height between breakpoints where it can fail (RULE 8). */
#scene-hero .word-stack{ place-items: end center; }
#scene-hero .hero-badge{ margin-top: 12px; }
#scene-hero .hero-constant{ bottom: 2.5vh; bottom: 2.5svh; gap: 9px; }
}
#scene-hero .scene-shade{
  background:
    linear-gradient(180deg,
      rgba(3,7,12,.60) 0%,
      rgba(3,7,12,.10) 16%,
      rgba(3,7,12,0)   30%,
      rgba(3,7,12,.42) 46%,
      rgba(3,7,12,.68) 62%,
      rgba(3,7,12,.82) 80%,
      rgba(3,7,12,.90) 100%);
}
@media (min-width: 641px) and (max-height: 900px){
  .hero-promise{ font-size: .96rem; letter-spacing:.1em; }
}
@media (min-width: 641px) and (max-height: 760px){
  /* headline size and stack position now come from --hero-band above */
  .hero-sub{ font-size: .96rem; line-height: 1.4; }
  .hero-promise{ font-size: .86rem; }
  #scene-hero .hero-constant{ bottom: 3vh; bottom: 3svh; gap: 9px; }
}

/* ============================================================
   GROUPED DROPDOWN NAV — glassmorphic (2026-07-16)
============================================================ */
.nav-group{ position: relative; display:inline-flex; align-items:center; }
.nav-top{ display:inline-flex !important; align-items:center; gap:7px; }
.nav-caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.65; transition: transform .25s ease;
}
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret{ transform: rotate(180deg); opacity:1; }
.nav-menu{
  position:absolute; top:100%; left:50%; transform: translateX(-50%) translateY(10px);
  min-width: 210px; padding: 9px;
  background: linear-gradient(145deg, rgba(18,28,42,.92), rgba(9,16,27,.88));
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border:1px solid rgba(0,178,169,.42); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,178,169,.1);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(6px);
}
/* JS sets .dd-closed the moment an item is chosen (or Escape, outside click,
   or scrolling on). It must beat BOTH open selectors above, which is why it is
   !important: without it, :focus-within keeps the menu pinned open over the
   content after a selection, because the clicked link keeps focus. */
.nav-group.dd-closed .nav-menu{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
.nav-group.dd-closed .nav-caret{ transform: none !important; }
/* invisible bridge so the menu doesn't drop when the cursor crosses the gap */
.nav-menu::before{ content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-menu a{
  padding: 10px 15px; border-radius: 9px; white-space: nowrap; text-align:left;
}
.nav-menu a:hover{ background: rgba(0,178,169,.16); color: var(--btn); }

/* ============================================================
   HERO HEIGHT OVERRIDES — MUST be last (source-order beats the base
   #scene-hero .word-stack rule at equal specificity; a matching media
   query does NOT add specificity, so earlier copies were overridden).
============================================================ */
@media (min-width: 641px) and (max-height: 900px){
  #scene-hero .word-stack{ padding-bottom: 26svh; }
  #scene-hero .display{ font-size: clamp(2.6rem, min(10.5vw, 11vh), 8rem); }
}
@media (min-width: 641px) and (max-height: 760px){
  #scene-hero .word-stack{ padding-bottom: 26svh; }
  #scene-hero .display{ font-size: clamp(2.2rem, min(9vw, 10.5vh), 6rem); }
}

/* ============================================================
   HERO — FLOW LAYOUT (2026-07-16) — the permanent overlap fix.
   The headline (word-stack) and the sub/promise/button (hero-constant)
   were two independently-positioned ABSOLUTE layers. Between breakpoints
   they could collide (magic-number padding is unreliable). Here the hero
   puts BOTH in a single bottom-anchored flex COLUMN in normal flow, so
   they can never overlap at ANY viewport height — the browser guarantees
   it. The video + shade stay absolute (inset:0) and full-bleed.
   This block is intentionally LAST so it wins source-order over every
   earlier #scene-hero position hack (a matching @media adds NO specificity).
============================================================ */
@media (min-width: 641px){  /* DESKTOP ONLY — never touch mobile portrait */
#scene-hero .scene-inner{
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  padding: 0 5vw clamp(24px, 5svh, 60px);
}
#scene-hero .scene-video,
#scene-hero .scene-shade{ position: absolute; inset: 0; }   /* stay full-bleed, out of flow */
#scene-hero .word-stack{
  position: static; inset: auto; width: 100%;
  place-items: center;            /* box is now content-sized; groups still stack in grid cell 1/1 */
  padding: 0; margin: 0;
}
#scene-hero .hero-constant{
  position: static; inset: auto; left: auto; right: auto; bottom: auto;
  width: 100%; margin-top: clamp(14px, 2.4vh, 34px); gap: 10px;
}
/* headline still capped by viewport height so the whole flow column fits ~100vh
   (if ever too tall it pushes UP harmlessly — it can no longer overlap the sub) */
#scene-hero .display{ font-size: clamp(1.9rem, min(11vw, 13vh), 5.6rem); }
#scene-hero .display-sm{ font-size: clamp(1.7rem, min(7vw, 8.5vh), 4.7rem); }
}  /* end desktop-only flow block */
@media (min-width: 641px) and (max-height: 820px){
  #scene-hero .display{ font-size: clamp(1.9rem, min(11vw, 13vh), 5.6rem); }
}
@media (min-width: 641px) and (max-height: 680px){
  #scene-hero .display{ font-size: clamp(1.7rem, min(10vw, 12vh), 5rem); }
}

/* ============================================================
   HERO FACE GUARD, MUST BE LAST (12 Sep 2026)
   ============================================================
   The hero is already one bottom-anchored flex column (the 2026-07-16 flow
   fix), so the headline can never overlap the sub/promise/button. What it
   could still do was ride UP onto Sheldon's face on a short laptop, which is
   what Prince saw on the screen share.

   The column is anchored to the BOTTOM of .scene-inner, so the way to keep it
   off his face is to give that flex box a top padding equal to the face line,
   and then cap the headline so the column always fits in what is left. Both
   numbers come from the video geometry in the --hero-* block above, so they
   move continuously with the viewport instead of stepping at breakpoints.

   padding-top alone is not enough: with justify-content:flex-end an over-tall
   column overflows upward THROUGH the padding. Capping the type by
   --hero-band is what makes it hold, so the two rules below are a pair. Do not
   keep one without the other.
============================================================ */
@media (min-width: 641px){
  #scene-hero .scene-inner{ padding-top: var(--hero-face); }
  #scene-hero .display{    font-size: clamp(1.5rem, min(11vw, calc(var(--hero-band) * .30)), 5.6rem); }
  #scene-hero .display-sm{ font-size: clamp(1.4rem, min(7vw,  calc(var(--hero-band) * .26)), 4.7rem); }
}

/* ============================================================
   LIGHTBOX - "See If You Qualify" pop-out (2026-07-16)
   Additive. Mirrors the mentorship lightbox; teal-themed. The #apply
   section at the page bottom stays as a no-JS fallback.
============================================================ */
.lbox{ position: fixed; inset: 0; z-index: 95; /* modal: deliberately above the nav strip */ display: grid; place-items: center; padding: 20px; }
.lbox[hidden]{ display: none; }
.lbox-dim{ position:absolute; inset:0; background: rgba(3,11,20,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lbFade .3s ease both; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lbox-card{
  position:relative; width: min(100%, 600px); max-height: 90vh; overflow-y:auto;
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,178,169,0.5); border-radius: 1.25rem;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,.85), 0 15px 30px -5px rgba(0,178,169,.28);
  padding: clamp(26px, 4vw, 40px); text-align:center;
  animation: lbIn .45s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes lbIn{ from{ opacity:0; transform: translateY(18px) scale(.97);} to{ opacity:1; transform:none;} }
.lbox-x{
  position:absolute; top:6px; right:6px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:none; border:0; color: rgba(236,231,223,.6); font-size:24px; line-height:1; cursor:pointer; transition: all .25s;
}
.lbox-x:hover{ color: var(--btn); background: rgba(255,255,255,.06); }
.lbox-eyebrow{ font-family: var(--font-head); font-weight:700; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color: var(--btn); margin:0 0 12px; }
.lbox-h{
  font-family: var(--font-head); font-weight:900; text-transform:uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height:1.04; letter-spacing:-.02em;
  color: var(--ink); margin: 4px 0 10px;
}
.lbox-sub{ font-family: var(--font-sub); font-style: normal; font-size: 1rem; color: rgba(236,231,223,.8); margin: 0 0 20px; }
.lbox-card .waitlist-form{ margin-top: 0; }
.lbox-card .consent-row{ width:100%; max-width:100%; justify-content:flex-start; text-align:left; }
.lbox-card .consent-row .fine{ flex:1 1 auto; min-width:0; }
.lbox-refer{ margin-top: 6px; text-align:center; }
.lbox-refer-label{ font-weight:600; color: var(--ink); margin: 0 0 10px; font-size:.98rem; }
.ref-linkrow{ display:flex; gap:8px; align-items:stretch; }
.ref-linkrow input{ flex:1 1 auto; min-width:0; padding:12px 14px; border-radius:10px; border:1px solid rgba(236,231,223,.18); background: rgba(0,0,0,.35); color: var(--ink); font-size:.86rem; }
.ref-linkrow .btn{ white-space:nowrap; }
.lbox-refer-note{ font-size:.82rem; color: rgba(236,231,223,.6); margin: 12px 0 0; }
body.lbox-open{ overflow: hidden; }
@media (max-width: 640px){
  .lbox{ padding: 12px; }
  .lbox-card{ width:100%; max-height:88vh; padding: 34px 18px 20px; }
  .lbox-h{ font-size: 1.35rem; }
  .lbox-card .consent-row .fine{ font-size:.68rem; line-height:1.45; }
  .ref-linkrow{ flex-wrap:wrap; }
}

/* ============================================================
   JOIN BONUSES — three free bonuses shown on the waitlist forms
   (lightbox #lboxForm and bottom #apply). 2026-07-17
============================================================ */
.join-bonus-head{ font-family: var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; color: var(--ink); margin: 2px 0 12px; text-align:center; }
.join-bonus{ list-style:none; margin:0 auto 20px; padding:0; text-align:left; display:grid; gap:10px; max-width: 430px; }
.join-bonus li{ position:relative; padding-left: 28px; font-size:.92rem; line-height:1.34; color: rgba(236,231,223,.9); }
.join-bonus li::before{ content:"\2713"; position:absolute; left:2px; top:0; color: var(--btn); font-weight:800; }
.join-bonus b{ font-weight:600; color: var(--ink); }
.join-bonus .jb-free{ font-weight:800; white-space:nowrap; }
.join-bonus .join-bonus-v{ display:inline-block; font-weight:700; white-space:nowrap; }
@media (max-width: 640px){
  .join-bonus{ max-width: 100%; gap:9px; }
  .join-bonus li{ font-size:.86rem; padding-left: 24px; }
  .join-bonus-head{ font-size:.74rem; }
}

/* Small "USD" currency label shown before price figures (accelerator). 2026-07-17 */
.usd{ font-size: .5em; font-weight: 700; letter-spacing: .04em; opacity: .55; vertical-align: .38em; margin-right: .12em; }

/* ============================================================
   TAP TARGETS — WCAG 2.5.8 minimum 44x44 (added 2026-08-06)
   Appended at the very end on purpose: these must win the cascade
   over the base rules earlier in the file, and a matching @media
   query adds no specificity, so source order is what carries it.
   Visual size is left alone wherever growing it would break the
   layout; the hit area is expanded instead.
============================================================ */

/* Nav links: 20.8px tall -> 44px. Padding grows the hit box, not the type. */
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; }

/* Dropdown items: 38.4px -> 44px. */
.nav-menu a{ display:flex; align-items:center; min-height:44px; }

/* Hamburger: 40px tall -> 44px. */
.nav-toggle{ height:44px; min-width:44px; }

/* Every button, including the four Join Waitlist tier buttons and both
   hero CTAs, which measured 42.8px tall. */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.tier-btn{ min-height:44px; }

/* CASL consent checkboxes: the control stays visually small so the form
   still reads as a form, but the touch target is expanded to 44x44 with a
   centred pseudo-element. Both #caslConsent and #lboxConsent inherit this. */
.consent-row input[type="checkbox"]{ position:relative; width:24px; height:24px; margin-top:0; }
.consent-row input[type="checkbox"]::before{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.consent-row{ align-items:flex-start; }

/* Journey and fit card banners (16 Aug 2026): the Higgsfield card images land
   flush to the card edges inside padded cards. The negative margins cancel
   .card-pad's 34px 30px so the image bleeds to the border radius. */
.card-pad > .card-banner:first-child{
  margin: -34px -30px 22px;
  width: calc(100% + 60px);
  border-radius: 14px 14px 0 0;
}


/* Phones: STACK the mirror card, photo over text (17 Aug 2026). `--mp` floors
   at 200px, so a 340px card spent 200 on the photo and 40 on padding and left
   the copy about 122px on this site, roughly six characters a line. Stacking
   gives the copy the full card width. The card peeks past the viewport edge on
   purpose so the row still reads as scrollable. Appended at the END so it wins
   the cascade; a matching @media query adds no specificity. Measured. */
@media (max-width: 560px){
  .mirror-card{
    width: min(80vw, 320px);
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .mirror-photo, .mirror-av{
    width: 100%; height: 168px;
    object-position: center 22%;
  }
  .mirror-av{ height: 96px; }
  .mirror-body{ padding: 14px 16px 18px; }
}


/* Nav type matched to the mentorship community site (Sheldon, 17 Aug 2026).
   Measured at 1680: mentorship 11.5px/.1em/7px 10px, this site 10px/.12em/10px 16px.
   Appended at the END so it wins the cascade over the base rule earlier in the
   file; a matching @media query adds no specificity. The <=1480 step-down is
   copied from the reference too, so the two bars shrink together. */
.nav-links a{ font-size: 11.5px; letter-spacing: .1em; padding: 7px 10px; }
.nav-right .btn-nav{ padding: 13px 20px; font-size: 10.5px; }
@media (max-width: 1480px){
  .nav-links a{ font-size: 10px; letter-spacing: .07em; padding: 6px 8px; }
}

/* ============================================================
   ACCELERATOR ROUND, 19 Aug 2026 (Sheldon, live review)
   ============================================================ */

/* 1. THE CARD IMAGES LEFT A 62px GAP DOWN THEIR RIGHT SIDE.
   Sheldon: "I don't know where this code has come from why it is cutting the
   images like that. It should be the size of the container on the top. Never
   should there be any gaps."
   Same defect fixed on the mentorship site on 17 Aug and never ported here.
   `.card-pad > .card-banner:first-child` already asks for
   `width: calc(100% + 60px)` so the image bleeds through the card's 30px side
   padding, and the negative margins WERE applying, but the width was not: the
   global `img{ max-width: 100% }` reset clamps it straight back to the content
   box. Measured: card 574px, image 512px, exactly 574 - 60 - 2.
   A negative margin cannot widen an element whose max-width is holding it. */
.card-pad > .card-banner:first-child{ max-width: none; }

/* 2. AND THEY WERE TOO SHORT TO READ THE PEOPLE IN THEM.
   Sheldon: "increase the height of the image so that you can see more of the
   people, right now the height of the image is very narrow." The banners were
   clamp(150px, 17vw, 220px), so a 1200x675 source was cropped to roughly a
   2.6:1 letterbox and faces sat outside it. Now 200 to 300px, which on a 574px
   card is about 1.9:1 and keeps heads and torsos in frame. */
.card > img:first-child, .card-media > img, .card-banner{
  height: clamp(200px, 21vw, 300px);
}

/* 3. THE OPERATOR AND PARTNER BAND TAKES THE STATS STRIP BACKGROUND.
   Sheldon: "this strip banner was supposed to be the same green background
   banner that we use for the stats strip banner." Same image, same fallback,
   same veil, so the two bands read as one device. */
.strip-band{
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.strip-band::before{
  content:''; position:absolute; inset:0;
  background: rgba(3,11,20,.28);
  pointer-events:none;
}
.strip-band-copy{ position: relative; z-index: 2; }

/* 4. ONE DISCLAIMER BLOCK, EDGE TO EDGE ACROSS THE THREE PRICING CARDS.
   Sheldon: "separately it should all be one block of text and potentially this
   text should be going across from edge to edge with the three containers that
   we have for the pricing like a disclaimer." It was two centred paragraphs at
   a narrow measure, plus the attributable-revenue definition orphaned in a
   different section entirely. Now one justified-left block spanning the same
   width as .price-grid. */
.disclaimer-block{
  /* `.fine` sets `width: 640px`, not a max-width, so `max-width: none` alone
     left this at 640 inside an 1184 grid. Width has to be overridden too. */
  width: 100%; max-width: none;
  margin: clamp(22px, 3vw, 34px) auto 0;
  text-align: left;
  line-height: 1.65;
  text-wrap: initial;   /* balance on a long block leaves ragged short lines */
}

/* 5. THE FULL STRATEGY HEADLINE SAT TOO FAR FROM ITS SUB.
   Sheldon: "reduce the spacing between here's the whole playbook free no gate
   no catch and the humanizing brand strategy." Measured 50px at 1440. */
/* `.lede` carries `margin-top: -20px`, so the gap a reader sees is this
   margin MINUS 20. At clamp(14,1.6vw,22) that left a 2px gap, far too tight.
   46px here lands a measured 26px gap, down from the original 50px. */
#strategy .headline{ margin-bottom: clamp(30px, 3.2vw, 46px); }

/* The trailing "See If You Qualify" on /portfolio/ and /speed-coaching/ sat in
   a bare <p class="center"> with the reset's zero margin, so it butted against
   the last card in the grid above it with no clearance at all. Sheldon, 19 Aug
   2026: "this button on the portfolio page is way too close to the last card",
   and the same on speed coaching. */
.cta-after-grid{ margin-top: clamp(30px, 5vw, 58px); }

/* Featured ecosystem card, phones: the centred title keeps text-align but drops the 36px side
   padding, which cost a wrapped line at 390 and two at 320 (RULE -2). Centred glyphs already clear
   the corner star without it. Lives here because RULE 3 puts phone overrides in the final block. */
@media (max-width: 640px){
  .tier-featured .tier-price, .tier-featured h3{ padding-left: 0; padding-right: 0; }
  /* The star is absolute at top 22px. With the title centred and full width on a phone its
     first line reaches the star's column and the glyph sat on the "12". Pushing the card's
     content down clears the star without narrowing the title, so no line is added. */
  .tier-featured{ padding-top: 64px; }
}

/* ============================================================
   BRAND TRUST STRIP (Sheldon, 6 Sep 2026; resized 6 Sep after review)
   One moving strip of the brands that trusted him, directly under the hero on
   every page. Monochrome white on purpose: eleven corporate palettes side by
   side fight the page, one colour reads as a single statement.

   BACKGROUND IS TRANSPARENT ON PURPOSE. It used to carry rgba(11,11,13,.42),
   which read as a separate darker band cutting across the page. The strip is
   meant to sit IN the site's own purple-to-green field, not on top of it, so
   the only thing it paints is the two hairlines.

   TRAVEL IS LEFT TO RIGHT (Sheldon's call). That means the track starts shifted
   -50% and animates back to 0. The direction is in the keyframes rather than
   `animation-direction: reverse` so the start position is explicit and the loop
   seam stays where the -50% maths puts it.

   The gap lives on the logo as margin-right and NOT as flex `gap`. Same trap the
   mirror carousel documents: with flex gap the duplicated half is one gap wider
   than the original, so translateX(-50%) lands slightly off and the loop visibly
   jumps every cycle. Margin folds the gap into the item's own width.

   The label is --ink, not the --amber every other eyebrow uses, because amber at
   small sizes measures 4.4:1 against the 4.5:1 small text owes. That ruling is
   still open (QUESTIONS 6 and 8).
============================================================ */
.brand-strip{
  position: relative; z-index: 1;
  padding: clamp(30px, 4.2vw, 48px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.brand-strip-label{
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(.7rem, 1.15vw, .88rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .85;
  padding: 0 5vw;
}
.brand-strip-row{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.brand-strip-track{
  display: flex; align-items: center; width: max-content;
  animation: brand-marquee 54s linear infinite;
  will-change: transform;
}
.brand-strip-row:hover .brand-strip-track,
.brand-strip-row:focus-within .brand-strip-track{ animation-play-state: paused; }
.brand-logo{
  flex: 0 0 auto;
  height: clamp(30px, 3.4vw, 44px);
  width: auto; max-width: 210px;
  object-fit: contain;
  margin-right: clamp(44px, 5.4vw, 84px);
  opacity: .82;
}
@keyframes brand-marquee{
  from{ transform: translate3d(-50%, 0, 0); }
  to  { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .brand-strip-track{ animation: none; transform: none; }
  .brand-strip-row{ overflow-x: auto; }
}

/* Optical sizing. Normalising every mark to one HEIGHT is what a naive logo
   wall does, and it is wrong: a wide wordmark at the same cap height as a round
   emblem carries far more visual mass. Sized by aspect tier instead, so the
   marks read as equals. Starbucks, Google, CIBC and CMA are compact emblems and
   take the largest size; Loblaws is a long wordmark and takes the smallest. */
.brand-logo[data-brand="google"],
.brand-logo[data-brand="cibc"],
.brand-logo[data-brand="starbucks"],
.brand-logo[data-brand="cma"]{ height: clamp(38px, 4.3vw, 56px); }
.brand-logo[data-brand="rbc"],
.brand-logo[data-brand="hsbc"]{ height: clamp(27px, 3vw, 39px); }
.brand-logo[data-brand="loblaws"]{ height: clamp(21px, 2.4vw, 31px); }

@media (max-width: 640px){
  .brand-strip{ padding: 24px 0; }
  .brand-strip-label{ font-size: .64rem; letter-spacing: .18em; margin-bottom: 15px; }
  .brand-logo{ height: 27px; margin-right: 38px; max-width: 150px; }
  .brand-logo[data-brand="google"],
  .brand-logo[data-brand="cibc"],
  .brand-logo[data-brand="starbucks"],
  .brand-logo[data-brand="cma"]{ height: 34px; }
  .brand-logo[data-brand="rbc"],
  .brand-logo[data-brand="hsbc"]{ height: 24px; }
  .brand-logo[data-brand="loblaws"]{ height: 19px; }
}


/* ============================================================
   CARD BANNERS ARE 16:9, NOT A FIXED HEIGHT (Sheldon, 12 Sep 2026)
   MUST BE LAST so it wins over every earlier height rule.
   ------------------------------------------------------------
   "Why have you made these images kind of long, as if it's a vertical
   rectangle? They should be normal 16:9 ratio... this way the photographs
   keep getting cut, so you can't see the whole image."

   The history explains the bug. On 19 Aug the banner height was RAISED to
   clamp(200px, 21vw, 300px) because on a 574px two-across card the 1200x675
   source was letterboxed and faces fell outside the crop. That was right for
   a two-across row. The ladder is FOUR across, so the card is about 280px
   wide, and the same 200 to 300px height turns a 16:9 source into a portrait
   box and crops most of the picture away.

   A fixed height can only ever be correct at one card width. An aspect ratio
   is correct at every width: the banner is always the full 16:9 frame, so
   nothing is cut, and a wide card still gets a tall image because the height
   follows the width. height:auto is explicit because an aspect-ratio box with
   an inherited height silently loses the ratio.
============================================================ */
.card > img:first-child,
.card-media > img,
.card-banner{
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* ============================================================
   THE $10K CARD: SUBHEAD WIDTH AND BREATHING ROOM (Sheldon, 12 Sep 2026)
   MUST BE LAST so it wins over the earlier .kickstart rules.
   ============================================================
   Three measured defects, all in one card.

   1. "Why is there so much space on the side here, on both sides? Why don't
      you just make that two lines below the main headline, like a subhead?"
      .kickstart-lede was max-width:74ch, about 620px inside an 1184px card,
      so it sat in a narrow ribbon with ~280px of dead margin each side. It is
      the promise of the whole offer and it should read as a subhead, so it now
      spans the card at subhead size on about two lines.

   2. "There's no spacing between the bullet points and the last line."
      Measured: 6px. The closing lines were touching the list. The list now
      carries real separation beneath it.

   3. The gap under the non dilutive bullet. Measured: column one ended 65px
      above column two, because eleven items split 6/5 and the tall bullets
      landed unevenly. A twelfth bullet squares the split. Worst gap BETWEEN
      bullets was already only 10px, the uniform margin, so the hole he circled
      was the ragged bottom of column one, not spacing between items.
============================================================ */
.kickstart-card .kickstart-lede{
  max-width: none;
  margin: 0 0 clamp(26px, 3.2vw, 40px);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.6;
  color: rgba(236,231,223,.9);
}
.kickstart-card .kickstart-list{
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.kickstart-card .kickstart-list li{
  line-height: 1.62;
  margin-bottom: 14px;
}
.kickstart-card .kickstart-line{
  margin-top: 0;
  margin-bottom: 10px;
}

/* The measured two column split for the $10K list. Two independent lists in a
   grid, so neither row locks against the other and neither can leave a hole. */
.kickstart-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  text-align: left;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.kickstart-cols .kickstart-col{ margin: 0; columns: auto; display: block; }
@media (max-width: 900px){
  .kickstart-cols{ grid-template-columns: 1fr; gap: 0; }
}


/* ============================================================
   TIER CARD FOLD (Sheldon, 12 Sep 2026)
   "Instead of all the bullet points being visible, make sure that you have a
   dropdown section... so that they see the pricing, and if they want to read
   more, it drops down. Right now, it's taking up too much space."
   Native <details>, the same device the FAQ and the release page terms use, so
   it works with no JavaScript and the text still ships in the page for search
   engines and for anyone who prints it.
============================================================ */
.tier-fold{ margin-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.tier-fold summary{
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0 12px;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--btn);
  min-height: 44px;               /* touch target, same as every other control */
}
.tier-fold summary::-webkit-details-marker{ display: none; }
.tier-fold summary::after{
  content: ''; margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.tier-fold[open] summary::after{ transform: rotate(225deg) translate(-2px, -2px); }
.tier-fold summary:focus-visible{ outline: 3px solid var(--btn); outline-offset: 3px; border-radius: 6px; }
.tier-fold[open] summary{ border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
.tier-fold .tier-list{ margin-top: 0; }

/* FROM FOUNDER TO FUNDABLE CEO (22 Sep 2026). RULE -2: the section headline is two short
   sentences and must hold one line each where the column allows and never more than three
   lines anywhere down to 320. Derived, not chosen: the longer line is 16 characters of
   uppercase Poppins 900 (about .66em a character), so at a 280px column (320 viewport) it
   needs 26px or less and at a 350px column (390) 33px or less. Base .headline floors at
   36.8px, which fragments both lines. Scoped here, at the end, so it wins the cascade. */
@media (max-width: 640px){
  #fundable .headline{ font-size: clamp(1.5rem, 7.2vw, 2.3rem); }
}

/* ============================================================
   EXPLORE MORE (Sheldon, 25 Sep 2026: "Make sure we have the 'Explore More'
   drop-down button on both those pages so that if people want to check out
   other parts of the Trybe website, they can.") Four columns: the ecosystem
   sites, then the same For Founders / For Talent / Company groups as the www
   nav. Anchored to its trigger's right edge so it opens inward.
============================================================ */
.nav-menu.nav-menu-wide{
  left: auto; right: 0; transform: translateY(10px);
  display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 20px; padding: 18px 18px 14px;
}
.nav-group:hover .nav-menu.nav-menu-wide, .nav-group:focus-within .nav-menu.nav-menu-wide{ transform: translateY(6px); }
.nav-col{ display: flex; flex-direction: column; gap: 2px; }
.nav-col-head{ font-family: var(--font-sub); color: var(--amber); font-size: .82rem; letter-spacing: .06em; margin: 0 0 6px; padding: 0 15px; }
.nav-links .nav-menu-wide a{ text-transform: none; font-weight: 500; font-size: .86rem; letter-spacing: .01em; padding: 10px 15px; border: 0; background: none; }
.nav-links .nav-menu-wide a:hover, .nav-links .nav-menu-wide a:focus-visible{ background: rgba(0,178,169,.16); color: var(--btn); }
@media (max-width: 1120px){
  .nav-bar.nav-open .nav-menu.nav-menu-wide{
    position: static; transform: none; display: flex; flex-direction: column; gap: 6px;
    padding: 2px 0 4px; min-width: 0; background: none; border: 0; box-shadow: none;
  }
  .nav-bar.nav-open .nav-col{ align-items: center; gap: 4px; margin-top: 6px; }
  .nav-bar.nav-open .nav-col-head{ text-align: center; padding: 0; margin: 4px 0 2px; }
  .nav-bar.nav-open .nav-links .nav-menu-wide a{ font-size: 11.5px; opacity: .82; padding: 10px 16px; }
}