/* ============================================================
   THE SCHOOL OF THRIVE — Landing Page
   Brand: THRIVE Brand Guidelines v1.0 (2026)
   Type:  Work Sans (self-hosted, subset)

   MOBILE FIRST. Every base rule below describes the phone.
   Breakpoints scale *up* from there:
     48em / 768px   — large phone landscape, small tablet
     64em / 1024px  — tablet landscape, small laptop
     90em / 1440px  — desktop
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:"Work Sans";src:url("../fonts/WorkSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/WorkSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/WorkSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/WorkSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/WorkSans-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/WorkSans-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ============================================================
   TOKENS — mobile values
   ============================================================ */
:root{
  /* Primary */
  --gold:#FFBE44;
  --ink:#252321;          /* Black Chestnut Oak */
  --chalk:#FAF9F7;        /* White Chalk */
  /* Derived darks — same hue family as Black Chestnut Oak */
  --ink-deep:#161513;
  --ink-soft:#2E2B28;
  /* Secondary accents */
  --magenta:#EA338B;
  --blue:#1E49FE;
  --purple:#B33DF0;
  --orange:#F86550;
  /* Series (badge system) */
  --s-m:#FFC945; --s-s:#1E49FE; --s-f:#FF008D; --s-c:#C218FF; --s-live:#FF6530;

  --chalk-60:rgba(250,249,247,.60);
  --chalk-40:rgba(250,249,247,.40);
  --chalk-14:rgba(250,249,247,.14);
  --ink-60:rgba(37,35,33,.60);
  --ink-14:rgba(37,35,33,.14);
  --gold-30:rgba(255,190,68,.30);

  /* --- Spacing rhythm. These are the numbers that make the page
         feel unhurried on a phone; each breakpoint opens them further. --- */
  --gutter:1.75rem;       /* 28px page edge */
  --sec-y:6.5rem;         /* 104px section top/bottom */
  --stack-lg:3.25rem;     /* headline → next block */
  --stack-md:2rem;        /* within a block */
  --stack-sm:1.25rem;     /* between sibling lines */
  --eyebrow-gap:2.75rem;  /* eyebrow → headline */

  /* --- Dark grounds. Flat ink reads as one slab over a 9500px page, so every
         section gets its own gradient: a different anchor corner, a different
         hue, and a vertical ramp so the eye has somewhere to travel. The
         alphas are tiny on purpose — this is depth, not colour, and none of
         it may cost the body copy any contrast. Sections carrying an aurora
         or bloom sit these underneath it. --- */
  --ground-prov:
    radial-gradient(96% 60% at 6% 2%, rgba(255,190,68,.075), transparent 58%),
    radial-gradient(86% 56% at 97% 98%, rgba(30,73,254,.055), transparent 62%),
    linear-gradient(176deg, #171614 0%, #1c1a18 54%, #141311 100%);
  --ground-courses:
    radial-gradient(90% 58% at 94% 0%, rgba(179,61,240,.085), transparent 60%),
    radial-gradient(80% 52% at 4% 92%, rgba(255,190,68,.05), transparent 62%),
    linear-gradient(184deg, #141311 0%, #1a1816 48%, #151412 100%);
  /* The one section with no ambient layer of its own, so its ground works
     harder — and it stays the page's lighter band, as it was flat. */
  --ground-ce:
    radial-gradient(78% 70% at 0% 12%, rgba(255,190,68,.055), transparent 58%),
    radial-gradient(74% 64% at 100% 96%, rgba(248,101,80,.045), transparent 60%),
    linear-gradient(178deg, #201e1c 0%, #262321 46%, #1d1b19 100%);
  --ground-movement:
    radial-gradient(92% 58% at 50% 0%, rgba(234,51,139,.07), transparent 62%),
    linear-gradient(180deg, #141311 0%, #1b1917 50%, #141311 100%);
  --ground-join:
    radial-gradient(100% 64% at 50% 104%, rgba(255,190,68,.055), transparent 60%),
    linear-gradient(180deg, #141311 0%, #191715 62%, #1d1a17 100%);
  --ground-hero:
    radial-gradient(80% 60% at 18% 8%, rgba(255,190,68,.06), transparent 60%),
    linear-gradient(180deg, #171614 0%, #141311 70%);
  --ground-base: linear-gradient(180deg, #161513 0%, #191715 50%, #151412 100%);

  --wrap:min(1240px, 100% - (var(--gutter) * 2));
  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* Headline metrics — looser on a phone so stacked lines can breathe,
     tightened back up on wide screens where the type gets huge. */
  --head-lh:1.0;
  --head-ls:-.028em;
}

@media (min-width:48em){
  :root{
    --gutter:3rem; --sec-y:8.5rem;
    --stack-lg:4rem; --stack-md:2.5rem; --stack-sm:1.5rem; --eyebrow-gap:3rem;
    --head-lh:.95; --head-ls:-.032em;
  }
}
@media (min-width:64em){
  :root{
    --gutter:4.5rem; --sec-y:10rem;
    --stack-lg:4.75rem; --stack-md:3rem; --eyebrow-gap:3.25rem;
    --head-lh:.92; --head-ls:-.035em;
  }
}
@media (min-width:90em){
  :root{ --gutter:7rem; --sec-y:11rem; --stack-lg:5.5rem; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],.school-block[id]{scroll-margin-top:5rem}
body{margin:0;background:var(--ground-base);background-attachment:fixed;color:var(--chalk);
  font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

.wrap{width:var(--wrap);margin-inline:auto}
.gold{color:var(--gold)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink);
  padding:.75rem 1.25rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}

/* ---------- Shared type ---------- */
.eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--eyebrow-gap)
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--gold-30);max-width:9rem}
.eyebrow--ink{color:var(--ink)}
.eyebrow--ink::after{background:var(--ink-14)}
@media (min-width:48em){
  .eyebrow{font-size:.72rem;letter-spacing:.3em;gap:1.25rem}
  .eyebrow::after{max-width:14rem}
}

/* Every oversized headline shares these metrics. */
.hero__head,.prov__head,.courses__head,
.ce__head,.movement__head,.join__head{
  font-weight:800;line-height:var(--head-lh);letter-spacing:var(--head-ls);
  text-transform:uppercase
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2rem;min-height:3.25rem;border:1px solid transparent;border-radius:999px;
  font-weight:700;font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--lg{padding:1.2rem 2.25rem;font-size:.86rem}
.btn--full{width:100%}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--gold),var(--orange) 55%,var(--magenta));
  opacity:0;transition:opacity .4s var(--ease)}
.btn--ghost{border-color:var(--chalk-14);color:var(--chalk);background:transparent}
.btn:active{transform:translateY(0)}
@media (hover:hover){
  .btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(255,190,68,.55)}
  .btn--gold:hover::before{opacity:1}
  .btn--ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
}
@media (min-width:48em){
  .btn--lg{padding:1.15rem 2.5rem;font-size:.92rem}
  .btn{font-size:.86rem;letter-spacing:.16em}
}

/* ---------- Ambient layers ---------- */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.055;z-index:2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.bloom{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:1;opacity:.5}
.bloom--gold{width:70vw;height:70vw;background:radial-gradient(circle,rgba(255,190,68,.42),transparent 68%);
  top:-20vw;left:-18vw;animation:drift 26s var(--ease) infinite alternate}
.bloom--mag{width:64vw;height:64vw;background:radial-gradient(circle,rgba(234,51,139,.34),transparent 68%);
  bottom:-22vw;right:-16vw;animation:drift 32s var(--ease) infinite alternate-reverse}
.bloom--purple{width:80vw;height:80vw;background:radial-gradient(circle,rgba(179,61,240,.24),transparent 70%);
  top:8%;right:-28vw;animation:drift 34s var(--ease) infinite alternate}
.bloom--low{opacity:.32;top:auto;bottom:-34vw;left:50%;transform:translateX(-50%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.18)}}
@media (min-width:64em){
  .bloom--gold{width:46vw;height:46vw;top:-14vw;left:-10vw}
  .bloom--mag{width:40vw;height:40vw;bottom:-16vw;right:-8vw}
  .bloom--purple{width:52vw;height:52vw;right:-18vw}
  .bloom--low{bottom:-24vw}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1rem;
  padding:.9rem var(--gutter);
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(22,21,19,.82);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--gold-30);padding-block:.65rem;
}
.nav__logo img{width:104px;height:auto}
.nav__links{display:none}
.nav__cta{margin-left:auto;padding:.7rem 1.15rem;min-height:0;font-size:.66rem;letter-spacing:.12em}
@media (min-width:48em){
  .nav__logo img{width:132px}
  .nav__cta{padding:.72rem 1.4rem;font-size:.72rem;letter-spacing:.16em}
}
@media (min-width:64em){
  .nav{gap:2rem}
  .nav__logo img{width:clamp(132px,13vw,158px)}
  .nav__links{display:flex;gap:2rem;margin-left:auto;
    font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
  .nav__links a{color:var(--chalk-60);position:relative;padding-block:.25rem;transition:color .3s}
  .nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
  .nav__links a:hover{color:var(--chalk)}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav__cta{margin-left:0}
}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--ground-hero);overflow:hidden;
  padding-block:6rem 3.5rem}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* --- Background film -------------------------------------------------
   Self-hosted <video>, so object-fit does the covering directly — no
   viewport-unit arithmetic needed. Crossfades in over the canvas once
   the film is actually playing. */
.hero__video{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease)}
.hero__video.is-ready{opacity:1}
.hero__video video{position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:cover;filter:saturate(.72) contrast(1.06)}

/* Layer order above the film. */
.hero .bloom{z-index:2}
.hero .grain{z-index:4}
.hero__vignette{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(22,21,19,.72) 100%),
    linear-gradient(to top, var(--ink-deep) 2%, rgba(22,21,19,.35) 38%, transparent 70%)}
/* Footage is far brighter than the canvas, so the type needs a flat scrim
   underneath the vignette — added only once the film is actually up. */
.hero.has-video .hero__vignette{
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 26%, rgba(22,21,19,.80) 100%),
    linear-gradient(to top, var(--ink-deep) 2%, rgba(22,21,19,.45) 40%, rgba(22,21,19,.18) 72%),
    linear-gradient(rgba(22,21,19,.52), rgba(22,21,19,.52))}
.hero__inner{position:relative;z-index:6;width:var(--wrap)}

/* Kicker — the lead-in line above the headline. Sentence case against the
   all-caps headline, with a short gold rule borrowed from the section
   eyebrows so it reads as part of the same system. */
.hero__kicker{display:flex;align-items:center;gap:.85rem;
  font-size:clamp(.95rem,3.4vw,1.18rem);font-weight:600;line-height:1.4;
  color:var(--chalk-60);margin-bottom:1.15rem}
.hero__kicker::before{content:"";flex:none;width:1.9rem;height:1px;background:var(--gold)}

.hero__head{font-size:clamp(2.15rem,9vw,5.4rem);margin-bottom:1.9rem}
.hero__head .line{display:block}
/* The gradient must own its own text run: splitting this line into word spans
   would leave background-clip:text painting nothing. */
.hero__head .line--grad > i{
  background:linear-gradient(102deg,var(--gold) 4%,var(--orange) 48%,var(--magenta) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero__copy{display:grid;gap:1.1rem;max-width:34rem}
.hero__lead{font-size:1.08rem;font-weight:600;color:var(--chalk);line-height:1.45}
.hero__sub{font-size:.98rem;color:var(--chalk);font-weight:300;line-height:1.6;max-width:56ch}
.hero__actions{display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;margin-top:2.1rem}
.hero__micro{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-40);
  font-weight:600;line-height:1.9}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.scrollcue{display:none}

@media (min-width:48em){
  .hero{align-items:flex-end;padding-block:8rem 4.5rem}
  .hero__kicker{gap:1.1rem;font-size:clamp(1.02rem,1.3vw,1.24rem);
    margin-bottom:clamp(1rem,2.2vh,1.5rem)}
  .hero__kicker::before{width:2.6rem}
  .hero__head{font-size:clamp(2.7rem,min(6.4vw,8.2vh),5.4rem);
    margin-bottom:clamp(1.5rem,3.4vh,2.3rem)}
  .hero__lead{font-size:clamp(1.08rem,1.35vw,1.28rem)}
  .hero__sub{font-size:clamp(.98rem,1.05vw,1.06rem)}
  .hero__actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
    margin-top:clamp(1.75rem,4vh,2.6rem)}
  .hero__micro{font-size:.8rem;letter-spacing:.13em;line-height:1.6}
  .scrollcue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:7;
    display:flex;flex-direction:column;align-items:center;gap:.7rem}
  .scrollcue__line{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);
    position:relative;overflow:hidden}
  .scrollcue__line::after{content:"";position:absolute;inset:0;background:var(--gold);
    animation:cue 2.2s var(--ease) infinite}
  .scrollcue__txt{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--chalk-40)}
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   2 · PROVOCATION
   ============================================================ */
.prov{background:var(--ground-prov);position:relative;overflow:hidden}

/* Split background. The light block owns the top of the section and stops at
   the video's midpoint; the dark half runs from there to the end. The video
   is a direct child of the light block, so its percentage width and margin
   both resolve against the full section width — which keeps the maths exact:
   an 80%-wide 16:9 frame is 45% of that width tall, so half of it is 22.5%. */
.prov__light{position:relative;z-index:4;background:var(--chalk);color:var(--ink);
  padding-top:var(--sec-y);
  /* flow-root, not overflow:hidden — we need a block formatting context so the
     video's negative bottom margin shortens this block instead of collapsing
     out of it, but without clipping the half that overhangs. */
  display:flow-root}
.prov__light .videoframe{width:80%;margin-inline:auto;margin-bottom:-22.5%}
.prov__light .videoframe__btn{box-shadow:0 34px 80px -34px rgba(37,35,33,.55)}

.prov__dark{position:relative;z-index:3;border-top:1px solid var(--gold);
  padding-top:calc(22.5% + var(--stack-lg));padding-bottom:var(--sec-y)}

/* Reversed out for the light ground. Gold on White Chalk is far too low
   contrast for a headline, so the accent line takes magenta instead. */
.prov__head{color:var(--ink)}
.prov__accent{color:var(--magenta)}
.prov__head{font-size:clamp(1.95rem,8.4vw,5.6rem);margin-bottom:var(--stack-lg)}
.prov__head .line{display:block}
/* The shift. Centred under the video and held to the film's own measure, so
   the two read as one column. The three "changes" that used to be a stacked
   cascade are the opening sentences of the paragraph now — the block says
   more than it did and costs about a third of the height. */
.shift{text-align:center}
/* Outlined, and a step smaller than the payoff. This line only sets up the
   argument — "You must keep evolving." is the one that has to land — so the
   heading is drawn as a stroke and the payoff keeps the solid gradient fill.
   Tracking opens slightly against --head-ls: outlined caps carry more weight
   per letter and close up their own counters at tight settings. */
.shift__head{font-size:clamp(1.2rem,4.8vw,2.3rem);font-weight:800;
  line-height:var(--head-lh);letter-spacing:calc(var(--head-ls) + .014em);
  text-transform:uppercase;margin-bottom:var(--stack-md);color:var(--chalk-40)}
/* Same guard as .ghost — a flat low-contrast fill wherever stroke is missing,
   so the line never disappears. Unlike background-clip:text, text-stroke is
   inherited, so it survives the word-by-word split this heading gets. */
@supports (-webkit-text-stroke:1px #000){
  .shift__head{color:transparent;-webkit-text-stroke:1.5px rgba(250,249,247,.5)}
}
/* Centred prose needs a tighter measure than ragged-left: much past ~62ch
   the eye loses the start of the next line. */
.shift__body{font-size:clamp(1.02rem,1.55vw,1.22rem);font-weight:300;
  line-height:1.75;color:var(--chalk-60);max-width:62ch;margin-inline:auto}
/* --- Video embed -----------------------------------------------------
   Facade pattern: a self-hosted poster stands in until someone clicks, so
   the page never loads a YouTube player just to have it sit idle. --- */
.videoframe{width:min(820px,100%);margin-bottom:var(--stack-lg)}
.videoframe__btn{
  display:block;width:100%;padding:0;position:relative;overflow:hidden;
  aspect-ratio:16/9;cursor:pointer;border:1px solid var(--gold-30);
  border-radius:16px;background:var(--ink-deep);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease)}
.videoframe__btn img{width:100%;height:100%;object-fit:cover;opacity:.88;
  transition:transform .8s var(--ease), opacity .4s var(--ease)}

.videoframe__play{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(58px,9vw,86px);aspect-ratio:1;border-radius:50%;
  background:var(--gold);display:grid;place-items:center;
  box-shadow:0 14px 44px -10px rgba(255,190,68,.6);
  transition:transform .4s var(--ease)}
.videoframe__play::after{content:"";width:0;height:0;
  margin-left:clamp(4px,.6vw,6px);
  border-left:clamp(16px,2.4vw,23px) solid var(--ink);
  border-top:clamp(10px,1.5vw,14px) solid transparent;
  border-bottom:clamp(10px,1.5vw,14px) solid transparent}

.videoframe__label{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:.35rem;text-align:left;
  padding:clamp(2.4rem,6vw,3.2rem) clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.5rem);
  color:var(--chalk);
  font-weight:700;letter-spacing:-.01em;line-height:1.3;
  font-size:clamp(.92rem,1.5vw,1.1rem);
  background:linear-gradient(to top,
    rgba(22,21,19,.97) 0%, rgba(22,21,19,.9) 40%, rgba(22,21,19,.4) 78%, transparent 100%)}
.videoframe__eyebrow{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:600}

/* At 80% of a wide viewport the poster's own title card is fully legible, so
   the overlay label is redundant and collides with the offer text burned into
   the artwork. It earns its place on small screens, where that text is not
   readable. The button's aria-label carries the title either way. */
@media (min-width:64em){
  .videoframe__label{display:none}
}

.videoframe__player{display:block;width:100%;aspect-ratio:16/9;background:#000;
  border:1px solid var(--gold-30);border-radius:16px}

@media (hover:hover){
  .videoframe__btn:hover{border-color:var(--gold);transform:translateY(-3px);
    box-shadow:0 28px 64px -26px rgba(0,0,0,.9)}
  .videoframe__btn:hover img{transform:scale(1.04);opacity:1}
  .videoframe__btn:hover .videoframe__play{transform:scale(1.08)}
}

.shift__pay{font-weight:800;text-transform:uppercase;line-height:1;
  letter-spacing:var(--head-ls);font-size:clamp(1.75rem,6.6vw,3.6rem);
  margin-top:var(--stack-lg)}
.shift__pay > i{
  background:linear-gradient(96deg,var(--gold) 6%,var(--orange) 50%,var(--magenta) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media (min-width:64em){
  .shift__head{font-size:clamp(1.65rem,3.3vw,2.5rem);-webkit-text-stroke-width:2px}
}

/* ============================================================
   INTRODUCE THE SCHOOL  (merged into section 2, on dark)
   ============================================================ */
/* This block has to land the single fact the page was missing — that this is
   a school. So it names itself three times before it argues anything: the
   eyebrow, the headline, the first four words of the lead. */
.school-block{margin-top:calc(var(--sec-y) * .85);position:relative}
.school__head{font-size:clamp(1.95rem,8.4vw,5.6rem);font-weight:800;
  line-height:var(--head-lh);letter-spacing:var(--head-ls);text-transform:uppercase;
  margin-bottom:var(--stack-md)}
.school__head .line{display:block}
.school__lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--chalk-60);
  font-weight:300;max-width:52ch}

/* --- The three cards. The old triad and the old four-point "why it's
       different" list were making the same three claims in sequence; folding
       them together turns ~1600px of stacked statements into one row.
       "Real" stays outlined so the repetition reads as a set and the payload
       word lands solid — the one device worth keeping from the triad. --- */
.school__cards{display:grid;gap:.85rem;margin-top:var(--stack-lg)}
.scard{position:relative;padding:1.6rem 1.4rem 1.75rem;
  border:1px solid var(--chalk-14);border-radius:14px;
  background:rgba(250,249,247,.028);
  transition:border-color .45s var(--ease), background .45s var(--ease),
             transform .45s var(--ease)}
/* Accent bar tucked over the top-left corner radius; escalates through the
   same gold -> magenta run as the ticks above it. */
.scard::before{content:"";position:absolute;left:-1px;top:-1px;
  width:3.25rem;height:2px;border-radius:2px 0 0 0;background:var(--gold)}
.scard:nth-child(2)::before{background:var(--orange)}
.scard:nth-child(3)::before{background:var(--magenta)}

.scard__num{display:block;font-size:.72rem;font-weight:600;letter-spacing:.26em;
  color:var(--chalk-40);margin-bottom:1.5rem}
.scard__title{font-size:clamp(1.55rem,5.6vw,2.1rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;text-transform:uppercase;color:var(--chalk)}
/* "Real" gets its own line in every card. Card 3 would wrap to two lines
   anyway, and matching the other two keeps the copy on one baseline. */
.scard__title .ghost{display:block}
.scard__copy{font-size:1rem;font-weight:300;color:var(--chalk-60);
  margin-top:.85rem;line-height:1.6}
.ghost{color:var(--chalk-14)}
@supports (-webkit-text-stroke:1px #000){
  .ghost{color:transparent;-webkit-text-stroke:1.5px rgba(250,249,247,.34)}
}

@media (hover:hover){
  .scard:hover{border-color:var(--gold-30);background:rgba(250,249,247,.05);
    transform:translateY(-3px)}
}

/* Gold rule closing into an arrowhead — the same momentum mark
   built into the "E" of the School of THRIVE logo. */
.arrowrule{display:flex;align-items:center;margin-top:var(--stack-md)}
.arrowrule__line{flex:1;height:1px;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--magenta));
  transition:transform 1.3s var(--ease-out)}
.arrowrule__tip{width:0;height:0;flex:none;
  border-left:10px solid var(--magenta);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  transition:opacity .6s var(--ease) .95s}
.arrowrule.is-in .arrowrule__line{transform:scaleX(1)}
.arrowrule.is-in .arrowrule__tip{opacity:1}

@media (min-width:48em){
  .school__cards{grid-template-columns:repeat(3,1fr);gap:1rem}
  .scard{padding:1.8rem 1.6rem 2rem}
  .scard__title{font-size:clamp(1.35rem,3vw,1.75rem)}
  .arrowrule{margin-top:var(--stack-lg)}
}
@media (min-width:64em){
  .school__cards{gap:1.25rem}
  .scard{padding:2.1rem 2rem 2.4rem}
  .scard__num{margin-bottom:2.75rem}
  .scard__title{font-size:clamp(1.6rem,2.3vw,2.15rem)}
  .scard__copy{font-size:clamp(1rem,1.2vw,1.1rem)}
  .ghost{-webkit-text-stroke-width:2px}
}

/* ============================================================
   SECTION CTA  (school block, CE section)
   ============================================================ */
/* A button with a quiet line of support next to it. Full-width and stacked
   on a phone — the same shape .courses__bottom takes — then side by side
   from 48em, where the note fits on the button's baseline. */
.seccta{display:flex;flex-direction:column;align-items:stretch;gap:1.1rem;
  margin-top:var(--stack-lg)}
.seccta__note{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chalk-40);font-weight:600;line-height:1.5}
@media (min-width:48em){
  .seccta{flex-direction:row;align-items:center;gap:1.75rem}
  .seccta .btn{align-self:flex-start;flex:none}
  .seccta__note{font-size:.78rem}
}

/* ============================================================
   3 · COURSE TEASER
   ============================================================ */
.courses{background:var(--ground-courses);position:relative;overflow:hidden;
  padding-block:var(--sec-y);border-top:1px solid var(--gold)}
.courses__top,.courses__bottom{position:relative;z-index:4}
.courses__head{font-size:clamp(2.1rem,8.8vw,6.2rem);margin-bottom:var(--stack-md)}
.courses__tags{display:flex;flex-wrap:wrap;gap:.65rem 1.35rem;
  font-size:1.05rem;font-weight:600;letter-spacing:-.015em;color:var(--chalk-40)}
.courses__tags li:nth-child(1){color:var(--s-f)}
.courses__tags li:nth-child(2){color:var(--s-m)}
.courses__tags li:nth-child(3){color:var(--s-s)}
.courses__tags li:nth-child(4){color:var(--s-c)}
.courses__tags li:nth-child(5){color:var(--chalk-60)}
.courses__tags li:nth-child(6){color:var(--s-live)}

.marquee{position:relative;z-index:4;margin-block:var(--stack-lg);
  display:flex;flex-direction:column;gap:1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{overflow:hidden}
.marquee__track{display:flex;align-items:flex-start;gap:1.5rem;width:max-content;
  animation:slide 46s linear infinite;will-change:transform}
.marquee__row--rev .marquee__track{animation-direction:reverse;animation-duration:56s}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.badge{position:relative;flex:none;width:9rem;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  padding:.5rem;border-radius:14px;opacity:.92;
  transition:opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease)}
/* Trimming gave each badge a slightly different aspect ratio; a fixed box
   keeps every crest the same height so the labels share a baseline. */
.badge img{width:100%;aspect-ratio:1.067;object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
.badge__meta{text-align:center}
.badge__code{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--chalk)}
.badge__tag{display:none;font-size:.62rem;letter-spacing:.06em;color:var(--chalk-40);
  text-transform:uppercase;line-height:1.4;margin-top:.3rem}
.badge::after{content:"";position:absolute;left:50%;top:38%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--series,var(--gold)) 0%,transparent 66%);
  opacity:0;filter:blur(26px);z-index:-1;transition:opacity .5s var(--ease)}

.courses__kicker{font-size:clamp(1.45rem,6vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.courses__bottom{display:flex;flex-direction:column;align-items:stretch;gap:2.25rem}

@media (min-width:48em){
  .courses__tags{gap:.5rem 1.8rem;font-size:clamp(1.1rem,2.1vw,1.55rem)}
  .marquee{gap:clamp(.75rem,2vh,1.5rem)}
  .marquee__track{gap:clamp(1rem,2.5vw,2.2rem);animation-duration:68s}
  .marquee__row--rev .marquee__track{animation-duration:84s}
  .badge{width:clamp(140px,15vw,196px);opacity:.8;filter:saturate(.88)}
  .badge__tag{display:block}
  .courses__bottom{flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:2rem}
  .courses__bottom .btn{align-self:auto}
}
@media (hover:hover) and (min-width:48em){
  .badge__meta{opacity:0;transform:translateY(6px);
    transition:opacity .4s var(--ease), transform .4s var(--ease)}
  .marquee:hover .marquee__track{animation-play-state:paused}
  .badge:hover,.badge:focus-visible{opacity:1;filter:saturate(1.15) brightness(1.06);transform:translateY(-10px)}
  .badge:hover .badge__meta,.badge:focus-visible .badge__meta{opacity:1;transform:none}
  .badge:hover::after,.badge:focus-visible::after{opacity:.42}
}

/* ============================================================
   6 · CE VALUE
   ============================================================ */
.ce{background:var(--ground-ce);padding-block:var(--sec-y);position:relative;overflow:hidden}
.ce__head{font-size:clamp(1.8rem,7.4vw,4.6rem);margin-bottom:var(--stack-lg);max-width:18ch}
.ce__head .line{display:block}
.ce__meter{display:flex;flex-direction:column;gap:1.6rem;margin-bottom:var(--stack-md)}
.ce__ticks{display:flex;gap:.35rem;width:min(640px,100%)}
.ce__tick{flex:1;min-width:0;height:2.8rem;border-radius:999px;background:var(--chalk-14);
  transform-origin:bottom;
  transition:transform .6s var(--ease-out), background .6s var(--ease-out)}
.ce__tick.is-lit{transform:scaleY(1);background:linear-gradient(var(--gold),var(--orange))}
.ce__count{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
#ceNum{font-size:clamp(2.8rem,11vw,5.2rem);font-weight:800;letter-spacing:-.04em;color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums}
.ce__unit{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-40);font-weight:600}
/* Matches .ce__unit so the figure reads as one line — OVER · 120 · CE CREDITS
   AND COUNTING — with the gold number as the only thing that carries weight. */
.ce__over{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-40);font-weight:600}
.ce__copy{font-size:1.05rem;color:var(--chalk-60);max-width:58ch;font-weight:300}
@media (min-width:48em){
  .ce__ticks{gap:.5rem}
  .ce__tick{height:3.4rem}
  .ce__unit,.ce__over{font-size:.78rem;letter-spacing:.22em}
  .ce__copy{font-size:clamp(1.05rem,1.55vw,1.28rem)}
}

/* ============================================================
   7 · COMMUNITY / MOVEMENT
   ============================================================ */
.movement{position:relative;overflow:hidden;background:var(--ground-movement);
  padding-block:calc(var(--sec-y) * 1.15);text-align:center}
/* Shared ambient gradient — used by the community section and the
   provocation section. Sits at z-0 inside any position:relative,
   overflow-clipped section. */
.aurora{position:absolute;inset:-30%;z-index:0;opacity:.42;filter:blur(80px);
  background:
    radial-gradient(38% 42% at 22% 34%, rgba(234,51,139,.55), transparent 62%),
    radial-gradient(34% 40% at 74% 30%, rgba(30,73,254,.45), transparent 62%),
    radial-gradient(42% 46% at 52% 76%, rgba(255,190,68,.42), transparent 64%),
    radial-gradient(30% 34% at 84% 70%, rgba(179,61,240,.4), transparent 64%);
  animation:aurora 30s var(--ease) infinite alternate;
  /* Two of these on the page now, each an 80px-blurred layer. Only run
     the one the viewer can actually see. JS adds .is-live on entry. */
  animation-play-state:paused}
.aurora.is-live{animation-play-state:running}
@keyframes aurora{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.16)}}
.movement .wrap{position:relative;z-index:4}
.movement__pre{font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-40);margin-bottom:var(--stack-md)}
.movement__head{font-size:clamp(2.1rem,8.4vw,6rem);margin-bottom:var(--stack-md);text-wrap:balance}
.movement__head .line{display:block}
.movement__copy{font-size:1.05rem;color:var(--chalk-60);max-width:56ch;
  margin:0 auto var(--stack-lg);font-weight:300}

/* --- The two portraits, between the copy and the CTA. Full measure and
       duotoned: the supplied shots are lit on a bright grey seamless, which
       on this near-black ground read as two pale boxes at any size. Rather
       than fight that, the greys are driven out entirely — greyscale first,
       then the page's own gold-to-magenta run blended back over the top, and
       the base dissolved into the section so the subjects emerge from the
       dark rather than sitting on a card. --- */
/* align-items:start, not the default stretch: a stretched grid item takes
   any height difference out of the frame itself, and with overflow:hidden
   that silently crops one portrait shorter than the other. */
.faces{display:grid;grid-template-columns:repeat(2,1fr);align-items:start;
  gap:clamp(.6rem,2vw,1.4rem);margin:0 auto var(--stack-lg)}
/* isolate: the blend below must compose against this frame only — without it
   it reaches back through to the aurora layer behind the section. */
.face{position:relative;margin:0;overflow:hidden;border-radius:18px;
  isolation:isolate}
/* 4:5 rather than the source's 2:3 — the extra crop pulls in on the faces,
   which carry a lot of headroom. Biased upward to stay off the heads. */
.face img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 16%;filter:grayscale(.55) contrast(1.06) brightness(.96)}
/* A warm tint, not a duotone. Partial greyscale and a light multiply carry
   just enough of the page's gold-to-magenta run to stop the bright studio
   seamless reading as a white box, while leaving skin tones natural and the
   black clothing actually black. Pushed harder this becomes a poster effect;
   soft-light at any useful strength turns both jackets maroon. */
.face::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(152deg,var(--gold) 4%,var(--orange) 46%,var(--magenta) 96%);
  mix-blend-mode:multiply;opacity:.34}
/* Just enough shading to soften the frame's lower edge — the caption gets
   its contrast from its own shadow rather than from a scrim, so this can
   stay almost clear and leave the clothing and the duotone intact. */
.face::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(22,21,19,.52) 0%,rgba(22,21,19,.16) 8%,
    transparent 20%)}
/* --- Rollover quick cuts. The stack sits between the still and the tint
       (z-index 0, under ::before's 1) so every cut picks up the same duotone
       and scrim as the base frame and nothing changes but the photograph.
       No transition anywhere in here: the whole point is a hard cut. --- */
.face__cuts{position:absolute;inset:0;z-index:0}
.face__cuts img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;opacity:0;
  /* Matches the still's grade exactly, or the cut would read as a colour
     shift rather than a change of frame. */
  filter:grayscale(.55) contrast(1.06) brightness(.96)}
.face__cuts img.is-on{opacity:1}
/* The cuts are decorative motion, so they stop where the rest of the page's
   motion stops. The JS bails out too; this is the belt to its braces. */
@media (prefers-reduced-motion:reduce){
  .face__cuts{display:none}
}

.face__name{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 1rem 1.15rem;text-align:center;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chalk);
  /* Carries its own legibility so the scrim above can stay light. Two
     shadows: a tight one for edge definition on mid tones, a wide soft one
     for the rare light patch behind it. */
  text-shadow:0 1px 2px rgba(22,21,19,.9), 0 2px 14px rgba(22,21,19,.75)}

@media (min-width:48em){
  .faces{gap:clamp(1rem,2.2vw,1.75rem)}
  .face__name{font-size:.82rem;letter-spacing:.2em;padding-bottom:1.6rem}
}
@media (min-width:64em){
  .face__name{font-size:.9rem;padding-bottom:2rem}
}

.movement .btn{width:100%}
@media (min-width:48em){
  .movement__pre{font-size:clamp(.95rem,1.8vw,1.3rem);letter-spacing:.18em}
  .movement__copy{font-size:clamp(1.05rem,1.6vw,1.3rem)}
  .movement .btn{width:auto}
}

/* ============================================================
   8 · FINAL CTA
   ============================================================ */
.join{position:relative;overflow:hidden;background:var(--ground-join);
  min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--sec-y) * .95);border-top:1px solid var(--gold-30)}
.join__inner{position:relative;z-index:4;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.join__logo{width:min(280px,86%);margin-bottom:var(--stack-lg)}
.join__head{font-size:clamp(2rem,8.4vw,5.6rem);margin-bottom:1rem}
.join__sub{font-size:1.05rem;color:var(--chalk-60);font-weight:300;margin-bottom:var(--stack-lg)}

/* --- Enrollment countdown ------------------------------------------- */
/* Four fixed columns rather than flex: the seconds cell changes width every
   tick, and with auto sizing the whole row would jitter sideways. */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);
  gap:.5rem;width:min(520px,100%);margin-bottom:var(--stack-md)}
.cd__unit{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1rem .35rem 1.05rem;border:1px solid var(--chalk-14);border-radius:12px;
  background:rgba(250,249,247,.03)}
.cd__num{font-size:clamp(1.5rem,7vw,2.5rem);font-weight:800;line-height:1;
  letter-spacing:-.035em;color:var(--gold);
  /* Tabular figures stop the digits shuffling as the numbers change. */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cd__lbl{font-size:.58rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-40)}
/* Past the date JS stops the ticker; drop the row to a quiet state so a
   stale "00 00 00 00" isn't shouting in gold. */
.countdown.is-open .cd__num{color:var(--chalk-40)}
/* No JS means no ticker, and a row of "--" helps nobody. */
html:not(.js) .countdown{display:none}

.join__narrative{font-size:.98rem;font-weight:300;line-height:1.7;
  color:var(--chalk-60);max-width:54ch;margin-bottom:var(--stack-lg)}
.join__narrative strong{color:var(--chalk);font-weight:600}

@media (min-width:48em){
  .countdown{gap:.75rem;margin-bottom:var(--stack-lg)}
  .cd__unit{padding:1.35rem .5rem 1.4rem;gap:.65rem}
  .cd__lbl{font-size:.64rem;letter-spacing:.2em}
  .join__narrative{font-size:clamp(1rem,1.4vw,1.12rem)}
}

/* --- Kajabi form -------------------------------------------------------
   The embed writes its own stylesheet into the <body>, so it cascades after
   this file and wins at equal specificity. Every rule below is scoped to the
   #kajabi-form / #kajabi-form-modal ids to outweigh it — do not "simplify"
   these to class selectors, they will stop applying. --- */
.formwrap{width:min(720px,100%);text-align:left}
.formwrap__fallback{font-size:.85rem;color:var(--chalk-40);font-weight:300}

#kajabi-form, #kajabi-form-modal{font-family:inherit;color:var(--chalk)}
/* The section already carries the headline; Kajabi's own title and empty
   subtitle would repeat it. */
#kajabi-form .kajabi-form__title, #kajabi-form-modal .kajabi-form__title,
#kajabi-form .kajabi-form__subtitle, #kajabi-form-modal .kajabi-form__subtitle{display:none}
#kajabi-form fieldset, #kajabi-form-modal fieldset{
  border:0;margin:0;padding:0;min-width:0;
  display:grid;grid-template-columns:1fr;gap:1.9rem}

/* One field: label above a hairline rule, matching the rest of the site. */
#kajabi-form .kajabi-form__form-item, #kajabi-form-modal .kajabi-form__form-item{
  display:flex;flex-direction:column;gap:.6rem;margin:0}
/* Kajabi has #kajabi-form .kajabi-form__form-item label (1,1,1), so the class
   alone (1,1,0) loses. Repeat their class and keep ours on the element. */
#kajabi-form .kajabi-form__form-item label.kjb-label,
#kajabi-form-modal .kajabi-form__form-item label.kjb-label{
  display:block;margin:0;cursor:default;
  font-family:inherit;font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-40)}
/* Specificity is the whole game here. Kajabi ships
     #kajabi-form .kajabi-form__form-item input         (1,1,1)
     #kajabi-form .kajabi-form__form-item input:hover   (1,2,1)
     #kajabi-form .kajabi-form__form-item input:focus   (1,2,1)
   and their sheet loads after this one, so anything equal or lighter loses.
   Each rule below repeats their class and adds [type=...] to land one step
   above. Drop that attribute selector and the fields snap back to Kajabi
   grey — which is exactly what happened on the first attempt. */
#kajabi-form .kajabi-form__form-item input[type="text"],
#kajabi-form .kajabi-form__form-item input[type="email"],
#kajabi-form-modal .kajabi-form__form-item input[type="text"],
#kajabi-form-modal .kajabi-form__form-item input[type="email"]{
  width:100%;background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--chalk-14);
  margin:0;padding:.85rem 0;color:var(--chalk);
  font-family:inherit;font-size:1.05rem;line-height:1.4;
  box-shadow:none;transition:border-color .35s var(--ease)}
#kajabi-form .kajabi-form__form-item input[type="text"]:hover,
#kajabi-form .kajabi-form__form-item input[type="email"]:hover,
#kajabi-form-modal .kajabi-form__form-item input[type="text"]:hover,
#kajabi-form-modal .kajabi-form__form-item input[type="email"]:hover{
  background:transparent;border-bottom-color:var(--chalk-40)}
#kajabi-form .kajabi-form__form-item input[type="text"]:focus,
#kajabi-form .kajabi-form__form-item input[type="email"]:focus,
#kajabi-form-modal .kajabi-form__form-item input[type="text"]:focus,
#kajabi-form-modal .kajabi-form__form-item input[type="email"]:focus{
  outline:none;background:transparent;
  border-bottom-color:var(--gold);box-shadow:none}
/* Chrome repaints autofilled fields white over everything above. */
#kajabi-form .kajabi-form__form-item input:-webkit-autofill,
#kajabi-form-modal .kajabi-form__form-item input:-webkit-autofill{
  -webkit-text-fill-color:var(--chalk);
  -webkit-box-shadow:0 0 0 100px var(--ink-deep) inset;
  caret-color:var(--chalk)}

#kajabi-form .parsley-errors-list, #kajabi-form-modal .parsley-errors-list{
  list-style:none;margin:.4rem 0 0;padding:0;
  font-size:.7rem;letter-spacing:.04em;color:var(--magenta)}
#kajabi-form .kajabi-form__form-item input.parsley-error,
#kajabi-form-modal .kajabi-form__form-item input.parsley-error{
  border-bottom-color:var(--magenta)}

/* The submit button, restyled to .btn.btn--gold.btn--lg.btn--full. */
#kajabi-form button[type="submit"], #kajabi-form-modal button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;margin-top:.6rem;
  padding:1.2rem 2.25rem;min-height:3.25rem;
  border:1px solid transparent;border-radius:999px;
  background:var(--gold);color:var(--ink);
  font-family:inherit;font-size:.86rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
@media (hover:hover){
  #kajabi-form button[type="submit"]:hover, #kajabi-form-modal button[type="submit"]:hover{
    transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(255,190,68,.55)}
}
#kajabi-form button[type="submit"]:active,
#kajabi-form-modal button[type="submit"]:active{transform:translateY(0)}
#kajabi-form button[type="submit"]:focus-visible,
#kajabi-form-modal button[type="submit"]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.form__note{margin-top:1.5rem;font-size:.82rem;color:var(--chalk-40);text-align:center;font-weight:300}

@media (min-width:48em){
  .join__logo{width:clamp(280px,40vw,600px)}
  .join__sub{font-size:clamp(1.05rem,1.7vw,1.35rem)}
  #kajabi-form fieldset{grid-template-columns:repeat(2,1fr);gap:1.5rem 1.75rem}
  /* the submit spans both columns */
  #kajabi-form button[type="submit"]{grid-column:1 / -1}
}

/* ============================================================
   THANK YOU PAGE  (thank-you.html)
   ============================================================ */
/* Borrows the final CTA's construction — centred stack on the gold ground —
   so arriving here reads as the same place, one step further on. */
.ty{position:relative;overflow:hidden;background:var(--ground-join);
  min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--sec-y) * .9) var(--sec-y);
  border-top:1px solid var(--gold-30)}
.ty__inner{position:relative;z-index:4;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.ty__logo{width:min(260px,74%);margin-bottom:var(--stack-md)}
/* The shared .eyebrow is a flex row with a trailing rule, which reads as
   lopsided when everything around it is centred. */
.ty__eyebrow{justify-content:center;margin-bottom:var(--stack-md)}
.ty__eyebrow::after{content:"";flex:none;width:2.5rem}
.ty__head{font-size:clamp(2.6rem,12vw,7rem);font-weight:800;
  line-height:var(--head-lh);letter-spacing:var(--head-ls);
  text-transform:uppercase;margin-bottom:.75rem}
.ty__sub{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  margin-bottom:var(--stack-md);
  background:linear-gradient(96deg,var(--gold) 6%,var(--orange) 50%,var(--magenta) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ty__copy{font-size:1.02rem;font-weight:300;line-height:1.7;color:var(--chalk-60);
  max-width:52ch;margin-bottom:var(--stack-md)}
.ty .countdown{margin-bottom:1rem}
/* Last element on the page now — nothing below it to space away from. */
.ty__until{font-size:.8rem;letter-spacing:.06em;color:var(--chalk-40);
  font-weight:300;margin-bottom:0}
.ty__until strong{color:var(--chalk-60);font-weight:600}
/* Sits between the copy and the countdown: the practical instruction is worth
   more than the clock, so it reads before it. */
.ty__note{font-size:.8rem;font-weight:300;line-height:1.6;
  color:var(--chalk-40);max-width:46ch;margin-bottom:var(--stack-lg)}

@media (min-width:48em){
  .ty__logo{width:clamp(260px,34vw,420px)}
  .ty__copy{font-size:clamp(1.02rem,1.5vw,1.22rem)}
  .ty__until{font-size:.84rem}
}

/* ---------- Footer ---------- */
/* ============================================================
   SOCIAL LINKS — shared by the header and the footer
   ============================================================ */
/* The sprite itself must stay in the layout to be referenceable: display:none
   on the <svg> stops <use> resolving in several browsers, so it is collapsed
   to nothing instead. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.social{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
/* 44px is the tap target, not the visual size — the circle only appears on
   hover, so the icons stay small while staying easy to hit on a phone. */
.social__link{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:var(--chalk-40);
  transition:color .3s var(--ease), background-color .3s var(--ease)}
.social__link:hover,.social__link:focus-visible{color:var(--ink);background-color:var(--gold)}
.social__icon{width:18px;height:18px;display:block;fill:currentColor}

/* Hidden until the nav has room for it. Below 64em the bar is only the logo
   and the join button, and three more targets there crowd the one link the
   page is actually asking you to press. The footer set carries these widths. */
.nav__social{display:none}
@media (min-width:64em){
  .nav__social{display:flex}
}

/* Pulls the row back level with the text beside it — the 44px targets are
   taller than the 0.7rem caption line they sit next to. */
.foot__social{margin-inline:-.65rem}

.foot{background:linear-gradient(180deg,#1d1a17 0%,#141311 100%);
  border-top:1px solid var(--chalk-14);padding-block:2.75rem}
.foot__inner{display:flex;flex-direction:column;gap:.6rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-40)}
.foot__parent{color:var(--gold)}
@media (min-width:48em){
  /* align-items:center, not the default stretch: the 44px social targets are
     taller than the caption lines either side of them, so without it the
     icons hang below the text they are meant to sit level with. */
  .foot__inner{flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:space-between;
    align-items:center;font-size:.72rem}
}

/* ============================================================
   FIRST-VISIT SIGNUP MODAL
   ============================================================ */
/* A <dialog> carries UA styles worth clearing: auto margins, a border, a
   white ground and its own padding box. */
.modal{
  margin:auto;padding:clamp(1.4rem,4.5vw,2.75rem);border:1px solid var(--gold-30);
  border-radius:20px;color:var(--chalk);
  background:
    radial-gradient(84% 52% at 6% 0%, rgba(255,190,68,.09), transparent 58%),
    linear-gradient(168deg, #2f2c29 0%, #262320 52%, #201e1b 100%);
  width:min(560px,calc(100% - 2.5rem));max-height:calc(100dvh - 2.5rem);
  /* Four fields is a tall modal on a short phone, so it scrolls rather than
     spilling out of the viewport. */
  position:relative;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.modal::backdrop{background:rgba(12,11,10,.78);backdrop-filter:blur(6px)}

/* showModal() makes the page inert but does not stop it scrolling behind. */
html:has(dialog[open]){overflow:hidden}

.modal__x{position:absolute;top:.6rem;right:.6rem;width:2.5rem;height:2.5rem;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--chalk-40);font-size:1.6rem;line-height:1;
  cursor:pointer;transition:color .3s var(--ease), background .3s var(--ease)}
.modal__x:hover{color:var(--chalk);background:rgba(250,249,247,.07)}
.modal__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.modal__logo{display:block;width:min(150px,44%);height:auto;margin-bottom:.9rem}
.modal__eyebrow{font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.modal__head{font-size:clamp(1.6rem,6vw,2.1rem);font-weight:800;line-height:1.05;
  letter-spacing:-.032em;text-transform:uppercase;margin-bottom:.7rem}
/* It only holds focus so the dialog opens somewhere sensible; it is not
   interactive, so it should not draw a focus ring. */
.modal__head:focus{outline:none}
.modal__copy{font-size:.92rem;font-weight:300;line-height:1.6;
  color:var(--chalk-60);margin-bottom:1.3rem}

/* Inside the modal every row is compressed — tighter label gaps, shallower
   inputs — because four fields at section rhythm push the submit button off a
   phone screen, and a CTA you have to scroll to find is a CTA that loses. */
.modal .formwrap{width:100%}
.modal #kajabi-form-modal fieldset{gap:.9rem;margin-bottom:1.15rem}
.modal #kajabi-form-modal .kajabi-form__form-item{gap:.4rem}
.modal #kajabi-form-modal input[type="text"],
.modal #kajabi-form-modal input[type="email"]{padding:.6rem 0}
@media (min-width:34em){
  .modal #kajabi-form-modal fieldset{grid-template-columns:repeat(2,1fr);gap:1.1rem 1.4rem}
  .modal #kajabi-form-modal button[type="submit"]{grid-column:1 / -1}
}
.modal .form__note{margin-top:.9rem;font-size:.74rem}

/* Four fields plus a logo and a headline is taller than a phone screen, and
   the modal scrolls rather than spilling. So the CTA sticks to the bottom of
   the scrollport instead of waiting below the fold — the spread shadow paints
   a band of the modal's own ground behind it so copy scrolls under cleanly. */
.modal #kajabi-form-modal button[type="submit"]{position:sticky;bottom:0;z-index:2;
  box-shadow:0 0 0 .7rem var(--ink-soft), 0 -16px 22px -14px rgba(22,21,19,.95)}



.modal__later{display:block;width:100%;margin-top:.75rem;padding:.55rem;
  border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--chalk-40);transition:color .3s var(--ease)}
.modal__later:hover{color:var(--chalk-60)}
.modal__later:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Entrance. Both the panel and the backdrop animate, so the page dims with
   the card rather than snapping dark a frame early. */
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:modalIn .45s var(--ease-out)}
  .modal[open]::backdrop{animation:backdropIn .45s var(--ease-out)}
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes backdropIn{from{opacity:0}}

/* ============================================================
   REVEAL / MOTION UTILITIES
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* --- Hidden-until-revealed states. Gated on .js (set inline in <head>)
       so that if the script never runs, the page still renders complete
       rather than blank. --- */
.js .hero__kicker{opacity:0;animation:riseIn .8s var(--ease-out) .1s forwards}
.js .hero__copy{opacity:0;animation:riseIn .9s var(--ease-out) .75s forwards}
.js .hero__actions{opacity:0;animation:riseIn .9s var(--ease-out) .95s forwards}
.js .scrollcue{opacity:0;animation:riseIn .8s var(--ease-out) 1.3s forwards}
.js .riseline > i{transform:translateY(105%)}
.js .arrowrule__line{transform:scaleX(0)}
.js .arrowrule__tip{opacity:0}
.js .ce__tick{transform:scaleY(.28)}

/* whole-line rise — for text that carries a gradient fill */
.riseline{display:block;overflow:hidden;padding-bottom:.04em}
.riseline > i{display:block;font-style:normal;
  transition:transform .95s var(--ease-out) .1s}
.riseline.is-in > i{transform:none}

/* word-by-word */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w > i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .85s var(--ease-out)}
[data-words].is-in .w > i{transform:none}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal,.hero__kicker,.hero__copy,.hero__actions,.scrollcue{opacity:1!important;transform:none!important;
    clip-path:none!important}
  .w > i,.riseline > i{transform:none!important}
  .arrowrule__line{transform:scaleX(1)!important}
  .arrowrule__tip{opacity:1!important}
  .marquee__track{animation:none!important;transform:none!important}
  .marquee{overflow-x:auto}
  .ce__tick{transform:scaleY(1)!important}
  .badge__meta{opacity:1!important;transform:none!important}
}