/* =========================================================================
   Paid to Film - "Studio Night"
   -------------------------------------------------------------------------
   Loaded only by v2.html. Nothing here touches the v1 page.
   CONFIG BLOCK - every tunable value lives in :root below.
   Prices / program name / DM keyword live in CONFIG at the top of v2.js.
   ========================================================================= */

:root{
  /* ---- Colour ----------------------------------------------------------- */
  --void:       #0B0710;
  --panel:      #150E1D;
  --panel-hi:   #1F1529;
  --lilac:      #E5ABFF;
  --lilac-hot:  #F5DEFF;
  --violet:     #7C3FAE;
  --plum:       #3D1A5B;
  --cream:      #F7F2FA;
  --dim:        #A093AC;
  --line:       rgba(229,171,255,0.14);
  --glow:       rgba(229,171,255,0.30);

  /* Light-section tokens (AA-safe counterparts of --dim / --lilac) */
  --dim-light:   #5C5266;
  --lilac-ink:   #7E2FA8;
  --line-light:  rgba(11,7,16,0.10);

  /* ---- Type ------------------------------------------------------------- */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand:    "Caveat", ui-rounded, "Bradley Hand", cursive;

  /* The hero column is capped by --shell (1240px), so the headline must stop
     growing at roughly the same point. A 116px ceiling kept scaling with the
     viewport long after the column had stopped, which shredded the line breaks
     on large monitors. */
  --fs-h1:   clamp(34px, 4.2vw, 62px);
  --fs-h2:   clamp(32px, 4.5vw, 68px);
  --fs-h3:   clamp(20px, 1.4vw, 26px);
  --fs-body: clamp(17px, 0.6vw + 15px, 18px);
  --fs-lead: clamp(18px, 1vw + 15px, 22px);
  --fs-mono: 11px;
  --lh:      1.6;
  --track:   -0.03em;

  /* ---- Layout ----------------------------------------------------------- */
  --shell:   1240px;
  --pad:     clamp(22px, 4vw, 56px);
  --sec-y:   clamp(88px, 11vw, 176px);
  --r:       18px;
  --navh:    68px;

  /* ---- Surfaces --------------------------------------------------------- */
  --glass:      rgba(255,255,255,0.03);
  --glass-hi:   rgba(255,255,255,0.055);
  --inset-top:  inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow:     0 24px 60px rgba(0,0,0,0.45);

  /* ---- Motion ----------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur:      0.9s;
  --grain-op: 0.05;
}

@media (min-width: 900px){ :root{ --navh: 84px; } }

/* =========================================================================
   BASE
   ========================================================================= */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--void); color:var(--cream);
  font-family:var(--body); font-size:var(--fs-body); line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  /* `clip`, not `hidden` - `hidden` turns body into a scroll container, which
     breaks Lenis and detaches position:fixed chrome from the viewport. */
  overflow-x:clip;
}

/* Lenis base styles (the library ships these in lenis.css; inlined here so the
   page has no second stylesheet to fetch). */
html.lenis, html.lenis body{ height:auto; }
html.lenis-smooth{ scroll-behavior:auto !important; }
html.lenis-stopped{ overflow:hidden; }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
svg{ max-width:100%; }
.sprite{ position:absolute; width:0; height:0; }
.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

:where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--lilac); outline-offset:3px; border-radius:6px; }
.light :where(a,button):focus-visible{ outline-color:var(--lilac-ink); }

.vh{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--lilac); color:var(--void); padding:12px 18px; text-decoration:none; }
.skip:focus{ left:0; }

h1,h2,h3,.tier-price,.mon-num{
  font-family:var(--display); font-weight:700;
  letter-spacing:var(--track); line-height:1.02;
  font-variation-settings:"wdth" 100, "opsz" 48;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); line-height:1.04; text-wrap:balance; }
h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.2; }

.mono{
  font-family:var(--mono); font-size:var(--fs-mono); font-weight:400;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--lilac);
}
.light .mono{ color:var(--lilac-ink); }
.seclabel{ display:block; margin-bottom:clamp(20px,2.6vw,34px); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.shell-narrow{ max-width:860px; }

.light{ background:var(--cream); color:var(--void); }
.light h2,.light h3{ color:var(--void); }

/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:16px 28px; border-radius:999px; border:1px solid transparent;
  font-family:var(--body); font-weight:700; font-size:15px; letter-spacing:-0.01em;
  text-decoration:none; cursor:pointer; isolation:isolate;
  transition:transform .3s var(--ease), background-color .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease);
}
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-lg{ padding:19px 38px; font-size:16px; }
.btn-block{ width:100%; }
/* Dark text on lilac - never white on flat #E5ABFF. */
.btn-fill{ background:var(--lilac); color:var(--void); }
.btn-fill::after{
  content:""; position:absolute; inset:-30%; z-index:-1; border-radius:inherit;
  background:radial-gradient(closest-side, var(--glow), transparent 70%);
  opacity:0; transform:scale(.7); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.btn-fill:hover{ background:var(--lilac-hot); transform:translateY(-2px); }
.btn-fill:hover::after{ opacity:1; transform:scale(1); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--cream); }
.btn-ghost:hover{ background:var(--panel-hi); border-color:var(--lilac); transform:translateY(-2px); }
.light .btn-ghost{ border-color:var(--line-light); color:var(--void); }
.light .btn-ghost:hover{ background:rgba(126,47,168,.07); border-color:var(--lilac-ink); }

/* =========================================================================
   SHOT PLACEHOLDERS
   ========================================================================= */

.shot{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:20px; text-align:center; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line);
  background-color:var(--panel);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(229,171,255,.20), transparent 62%),
    linear-gradient(160deg, rgba(124,63,174,.30), rgba(21,14,29,1));
  box-shadow:var(--inset-top);
}
.shot::after{
  content:""; position:absolute; inset:10px; border:1px dashed rgba(229,171,255,.22);
  border-radius:calc(var(--r) - 8px); pointer-events:none;
}
.shot-ic{ width:28px; height:28px; fill:none; stroke:var(--lilac); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.shot figcaption{ max-width:34ch; line-height:1.5; color:var(--lilac); }
.light .shot figcaption{ color:var(--lilac); }
.shot-45{ aspect-ratio:4/5; }
.shot-34{ aspect-ratio:3/4; }
.shot-11{ aspect-ratio:1/1; }
.shot-169{ aspect-ratio:16/9; }
.shot-916{ aspect-ratio:9/16; }

/* A .shot holding a real image, rather than a shot-list placeholder. */
.shot.has-img{ padding:0; }
.shot.has-img::after{ display:none; }
.shot.has-img img{
  width:100%; height:100%; object-fit:cover;
  border-radius:inherit; display:block;
}

/* =========================================================================
   PAGE FURNITURE - grain, cursor, progress, nav, overlay
   ========================================================================= */

.grain{
  position:fixed; inset:-120px; z-index:200; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1s steps(8) infinite;   /* 8fps - real grain jitters */
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 12.5%{transform:translate(-6%,-4%)} 25%{transform:translate(4%,-7%)}
  37.5%{transform:translate(-8%,3%)} 50%{transform:translate(7%,6%)} 62.5%{transform:translate(-3%,8%)}
  75%{transform:translate(6%,-3%)} 87.5%{transform:translate(-7%,-6%)} 100%{transform:translate(0,0)}
}

.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side, rgba(229,171,255,.20), transparent 70%);
  mix-blend-mode:screen; transition:opacity .5s linear;
  will-change:transform;
}
.cursor-glow.is-on{ opacity:1; }
@media (hover:none){ .cursor-glow{ display:none; } }

.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:250; background:rgba(229,171,255,.10); }
.progress span{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--lilac); will-change:transform; }

.nav{
  position:fixed; inset:0 0 auto 0; z-index:150; height:var(--navh);
  display:flex; align-items:center; background:transparent; border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(21,14,29,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mark{
  display:inline-flex; align-items:center; margin:0;
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-0.04em;
  text-decoration:none; font-variation-settings:"wdth" 90;
}
/* Height-led so the two-line lockup keeps its ratio; width follows. */
.mark img{ display:block; height:46px; width:auto; }
@media (max-width:899px){ .mark img{ height:34px; } }
/* The section links collapse into the overlay menu below 900px, but the primary
   action stays in the header - a sales page should never hide its CTA behind a
   hamburger. Desktop output is unchanged. */
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2vw,32px); }
.nav-links a{ text-decoration:none; font-size:15px; color:var(--dim); transition:color .25s var(--ease); }
.nav-links a:hover{ color:var(--cream); }
.nav-links .btn-fill{ color:var(--void); }
.nav-links a:not(.btn){ display:none; }
@media (min-width:900px){
  .nav-links a:not(.btn){ display:inline; }
  .burger{ display:none !important; }
}

.burger{ display:flex; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; padding:0 10px; background:none; border:0; cursor:pointer; }
.burger span{ display:block; height:1.5px; background:var(--cream); border-radius:2px; transition:transform .35s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.overlay{ position:fixed; inset:0; z-index:149; background:var(--void); opacity:0; transition:opacity .35s var(--ease); }
.overlay[hidden]{ display:none; }
.overlay.is-open{ opacity:1; }
.overlay-in{ height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px; padding:var(--navh) var(--pad) var(--pad); }
.overlay-in a{
  font-family:var(--display); font-weight:700; font-size:clamp(30px,9vw,52px); letter-spacing:var(--track);
  text-decoration:none; padding:10px 0; opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i,0) * 60ms);
}
.overlay-in .btn{ font-family:var(--body); font-size:15px; padding:16px 28px; margin-top:22px; color:var(--void); }
.overlay.is-open a{ opacity:1; transform:none; }

/* =========================================================================
   6.2 HERO · cinematic full-viewport
   ========================================================================= */

.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--navh) + 36px) 0 84px; overflow:hidden; isolation:isolate;
}
.bar{ position:absolute; left:0; right:0; height:clamp(10px,2.2vh,22px); background:var(--void); z-index:3; }
.bar-t{ top:0; } .bar-b{ bottom:0; }
.hero-glow{
  position:absolute; z-index:-1; width:min(92vw,1000px); aspect-ratio:1;
  right:-10%; top:46%; transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(229,171,255,.34), rgba(124,63,174,.16) 45%, transparent 72%);
  filter:blur(20px); animation:pulse 6s ease-in-out infinite alternate;
}
@keyframes pulse{ from{ opacity:.72; transform:translateY(-50%) scale(.97);} to{ opacity:1; transform:translateY(-50%) scale(1.05);} }

.hero-grid{ display:grid; gap:clamp(36px,5vw,64px); align-items:center; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:clamp(36px,4vw,56px); } }
@media (min-width:1100px){ .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:clamp(48px,5vw,80px); } }
/* The spec's portrait-over-headline overlap, only where the column can spare it. */
@media (min-width:1360px){ .hero-media{ margin-left:-44px; } }

.hero-copy{ position:relative; z-index:2; }
.hero-eyebrow{ display:block; margin-bottom:18px; }
.hero-h1{ font-variation-settings:"wdth" 96,"opsz" 96; }
/* Each line is a complete clause, so balance the halves rather than letting a
   single trailing word drop - three orphans in a row otherwise. */
.hero-h1 .sline{ display:block; overflow:hidden; padding-bottom:.06em; text-wrap:balance; }
.hero-h1 em{ font-style:normal; color:var(--lilac); }
/* The accent is now the whole third line, so it wraps like any other line. */
.hero-h1 .char{ display:inline-block; will-change:transform; }
.hero-sub{ margin-top:20px; font-size:var(--fs-lead); color:var(--dim); max-width:36ch; text-wrap:pretty; }
.hero-pts{ margin-top:24px; display:grid; gap:10px; }
.hero-pts li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--dim); }
.hero-pts .ic{ width:1.1em; height:1.1em; color:var(--lilac); margin-top:.25em; stroke-width:2.2; }
.hero-cta{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-micro{ display:block; margin-top:18px; color:var(--dim); }

.hero-media{ position:relative; }


.hero-media .shot{ box-shadow:var(--shadow); }
@media (max-width:899px){ .hero-media{ max-width:320px; } }

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:3; color:var(--dim); transition:opacity .4s linear;
}

/* =========================================================================
   6.3 PROOF TICKER · infinite marquee band
   ========================================================================= */

.ticker{
  position:relative; overflow:hidden; background:var(--panel);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:22px;
}
/* The shift is set by JS to exactly one half of the duplicated track, so the
   loop restarts on an identical frame - no gap, no jump. */
.ticker-track{ display:flex; width:max-content; animation:tick 45s linear infinite; --tick-shift:-50%; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tick{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(var(--tick-shift),0,0);} }
.ticker-set{ display:flex; align-items:center; flex:none; }
.ticker-set b{
  font-family:var(--mono); font-weight:400; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); white-space:nowrap;
}
.ticker-set i{
  display:block; width:7px; height:7px; margin:0 clamp(20px,3vw,42px); flex:none;
  background:var(--lilac); transform:rotate(45deg);
}
@media (max-width:700px){ .ticker-track{ animation-duration:26s; } }

/* =========================================================================
   6.4 THE PROBLEM · full-bleed statement + floating fragments
   ========================================================================= */

.problem{
  /* The floating fragments are placed as a percentage of the section height,
     so the section needs a floor - otherwise a short window squeezes them
     into the statement. */
  position:relative; min-height:max(92svh, 940px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:var(--sec-y) var(--pad); overflow:hidden;
}
/* Tabular figures so the digits do not jostle while the number counts, plus the
   lilac so the count-up reads as deliberate rather than a flat line of text. */
.problem-h .pct{
  font-variant-numeric:tabular-nums;
  background-image:linear-gradient(180deg, var(--lilac-hot), var(--lilac));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .problem-h .pct{ color:var(--lilac); }
}
.problem-h{
  position:relative; z-index:2; max-width:18ch;
  font-size:clamp(34px,6.2vw,88px);
}
.problem .seclabel{ position:relative; z-index:2; }
.frags{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.frag{
  position:absolute; max-width:min(30ch,62vw); padding:16px 20px;
  border-radius:14px; border:1px solid var(--line);
  background:var(--glass); box-shadow:var(--inset-top);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  font-size:14px; line-height:1.5; color:var(--dim); text-align:left;
}
.f1{ left:3%;  top:16%;  transform:rotate(-2deg);   opacity:.9; }
.f2{ right:5%; top:24%;  transform:rotate(1.6deg);  opacity:.75; scale:.9; }
.f3{ left:8%;  bottom:20%; transform:rotate(1.2deg); opacity:.85; }
.f4{ right:7%; bottom:15%; transform:rotate(-1.4deg); opacity:.8; scale:.95; }
.f5{ left:44%; top:7%;    transform:rotate(-.8deg);  opacity:.6; scale:.85; }
.frags-mobile{ display:none; }
@media (max-width:900px){
  .problem{ min-height:0; text-align:left; align-items:flex-start; }
  .problem-h{ max-width:none; }
  .frags{ display:none; }
  .frags-mobile{ display:grid; gap:12px; margin-top:40px; width:100%; }
  .frags-mobile li{
    padding:16px 18px; border-radius:14px; border:1px solid var(--line);
    background:var(--glass); box-shadow:var(--inset-top);
    font-size:14px; line-height:1.5; color:var(--dim);
  }
}

/* =========================================================================
   6.5 FOUNDER · asymmetric editorial split · LIGHT
   ========================================================================= */

.founder{ padding-block:var(--sec-y); overflow:hidden; }
.founder-grid{ display:grid; gap:clamp(32px,4vw,56px); align-items:start; }
@media (min-width:900px){
  .founder-grid{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); }
  /* Deliberately off-grid: portrait breaks the container, text overlaps it.
     Centred against the copy - top-aligning it left a 321px void beside the
     lower third of the text, which read as a mistake rather than a device.
     The bleed is measured from the viewport edge and capped, so the portrait
     never crops itself off-screen on narrow desktops and never balloons on
     very wide ones. */
  .founder-media{
    /* Distance from the viewport edge to the shell's content edge, capped so
       the portrait never crops itself off-screen or balloons on wide monitors. */
    --bleed:min(140px, max(0px, (100vw - var(--shell)) / 2 + var(--pad) - 16px));
    align-self:center;
    margin-left:calc(-1 * var(--bleed));
    /* 15% off the rendered width, taken from the right so the left bleed holds.
       The percentage resolves against the grid area, so adding the bleed back
       gives the true rendered width to trim from. */
    margin-right:calc(0.15 * (100% + var(--bleed)));
  }
  /* No negative margin: it used to pull the copy back over the portrait and
     left only a 16px gutter between image and text. */
  .founder-copy{ padding-top:64px; position:relative; z-index:2; }
}
.mask{ position:relative; overflow:hidden; border-radius:var(--r); }
.mask .shot{ border-radius:0; will-change:transform; }

/* The window takes the photo's exact aspect and the picture fills it, so
   nothing is cropped. This costs the parallax: the photo's ratio (0.755) is
   already within half a percent of the window's, so any vertical overshoot to
   give the travel room is paid for by a cover-crop off the sides - at the old
   122% that was 18.6% of the width, which cut through the payment cards at
   both edges. Full image wins over the drift. */
/* Needed at every width: the Memoji is positioned against this box, and the
   only other .founder-media rule lives inside the desktop media query. */
.founder-media{ position:relative; }
.founder-media .mask{ aspect-ratio:758/1108; }

/* Her own Memoji, perched on the corner of the photo. Decorative - empty alt
   and aria-hidden, since the story beside it already says all of this. */
.memoji{
  position:absolute; z-index:3; pointer-events:none;
  width:auto; filter:drop-shadow(0 14px 30px rgba(11,7,16,.34));
}
.memoji-up{
  top:-6%; left:2%; height:clamp(84px,10vw,148px);
  transform:rotate(-9deg);
}
.js .memoji-up{ animation:memojiBob 4.6s ease-in-out infinite; }
@keyframes memojiBob{
  0%,100%{ transform:rotate(-9deg) translateY(0); }
  50%    { transform:rotate(-6deg) translateY(-9px); }
}
@media (max-width:899px){ .memoji-up{ top:-4%; left:2%; height:74px; } }


.portrait-fig{
  position:absolute; inset:0; margin:0;
}
.portrait-fig img{ display:block; width:100%; height:100%; object-fit:cover; }
.founder-copy h2{ max-width:15ch; margin-bottom:26px; }
.founder .prose p{ max-width:52ch; color:var(--dim-light); }
.founder .prose p + p{ margin-top:1.05em; }

/* Marker-pen highlight on the line the whole story turns on. The swipe is
   painted with a scaled pseudo-element so it can draw itself on entry. */
.hl-line{ position:relative; }
.hl{
  position:relative; display:inline;
  background-image:linear-gradient(104deg,
    rgba(229,171,255,.92) 0%, rgba(224,150,255,.99) 38%, rgba(203,140,255,.9) 100%);
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:0% .82em;               /* drawn in by .is-marked */
  padding:.06em .16em;
  border-radius:.22em;
  color:var(--void); font-weight:600;
  transition:background-size .85s cubic-bezier(.22,.7,.25,1);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hl-line.is-marked .hl{ background-size:100% .82em; }
/* No JS / reduced motion: the highlight is simply already there. */
html:not(.js) .hl{ background-size:100% .82em; }


.pull{ position:relative; margin-top:34px; padding-left:26px; }
.pull::before{
  content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--lilac-ink); transform-origin:top; transform:scaleY(0);
}
.pull p{
  font-family:var(--display); font-weight:600; letter-spacing:-0.025em;
  font-size:clamp(20px,2vw,30px); line-height:1.22; max-width:24ch;
}
.creds{ display:block; margin-top:34px; padding-top:20px; border-top:1px solid var(--line-light); }

/* =========================================================================
   6.6 WHAT CHANGES · headline, split proof/payoff, CTA
   ========================================================================= */

.changes{ position:relative; padding-block:var(--sec-y) clamp(48px,5.5vw,88px); overflow:hidden; isolation:isolate; }
.changes-glow{
  position:absolute; z-index:-1; left:50%; top:38%; translate:-50% -50%;
  width:min(130vw,1280px); aspect-ratio:1.5/1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(229,171,255,.13), rgba(124,63,174,.08) 46%, transparent 72%);
}
.changes-label{ text-align:center; }

.changes-h{
  margin-inline:auto; max-width:26ch; text-align:center;
  font-size:clamp(28px,3.4vw,54px); line-height:1.12; letter-spacing:-.034em;
  color:var(--cream); text-wrap:balance;
}
/* First word underscored, the way the reference does it. */
.changes-h em{
  font-style:normal; position:relative; white-space:nowrap;
  background-image:linear-gradient(100deg, var(--lilac-hot), var(--lilac) 60%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.changes-h em::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--lilac-hot), var(--lilac) 55%, var(--violet));
  opacity:.85;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .changes-h em{ color:var(--lilac); } }

.changes-grid{
  display:grid; gap:clamp(36px,4.5vw,72px); align-items:center;
  margin-top:clamp(40px,5vw,72px);
}
@media (min-width:900px){
  .changes-grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
}

/* ---- Left: the body of work -------------------------------------------- */

.changes-visual{ position:relative; justify-self:center; width:min(100%,430px); }
.reelgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,12px);
  padding:clamp(12px,1.4vw,18px);
  border-radius:calc(var(--r) + 4px);
  border:1px solid rgba(229,171,255,.18);
  background:linear-gradient(168deg, rgba(31,21,41,.9), rgba(13,9,19,.94));
  box-shadow:var(--inset-top), 0 34px 78px rgba(0,0,0,.5);
}
.reel{
  /* 4:5, the way a profile grid actually crops reels - 9:16 made the block
     nearly twice the height of the column beside it. */
  position:relative; aspect-ratio:4/5; border-radius:9px;
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(115% 110% at 30% 14%, hsl(var(--a) 95% 72% / .4), transparent 64%),
    linear-gradient(160deg, hsl(var(--a) 60% 34% / .62), rgba(12,8,18,.95));
  box-shadow:inset 0 0 0 1px hsl(var(--a) 90% 78% / .2);
}
.reel svg{ width:24%; height:24%; fill:hsl(var(--a) 100% 88% / .92); }

/* Below the grid, right-aligned to it - flanking it wedged the note into the
   column gap, where it overlapped both the grid and the copy. */
.annot-work{
  top:calc(100% + 8px); bottom:auto; right:6px; width:7em;
  transform:rotate(-4deg); text-align:right;
}
@media (max-width:1080px){ .annot-work{ display:none; } }

/* ---- Right: the payoff -------------------------------------------------- */

.changes-lead{
  font-size:clamp(17px,1.35vw,21px); line-height:1.5; color:var(--cream);
  font-weight:600; max-width:46ch; text-wrap:pretty;
}
.changes-list{
  list-style:none; margin:clamp(22px,2.4vw,32px) 0 0; padding:0;
  display:grid; gap:clamp(14px,1.5vw,20px);
}
.changes-list li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:13px; align-items:start;
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.55; color:var(--dim); text-wrap:pretty;
}
.changes-list .ic{
  width:22px; height:22px; margin-top:.12em; flex:none;
  color:var(--lilac);
  padding:4px; border-radius:50%;
  background:rgba(229,171,255,.12); box-shadow:inset 0 0 0 1px rgba(229,171,255,.3);
}
.changes-close{
  margin-top:clamp(22px,2.4vw,32px); max-width:36ch;
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,1.6vw,27px); line-height:1.26; letter-spacing:-.026em;
  color:var(--cream); text-wrap:balance;
}

/* The sales proof closes the section as a split: the claim and the numbers on
   the left, the receipt on the right. Ruled off so it reads as its own beat.
   Left-aligned deliberately - the headline above is centred, and a centred
   stack here left both sides of a 1240px section empty. */
/* The rule and the breathing room now live in .changes-link above, so the
   band itself just holds its own top margin. */
.proof-band{
  margin-top:clamp(44px,5vw,80px);
  display:grid; gap:clamp(32px,4vw,64px); align-items:center; text-align:left;
}

/* Splits the divider so the arrow reads as a join, not an ornament. */
.changes-link{
  display:flex; align-items:center; gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(66px,7.5vw,124px);
}
.changes-rule{ flex:1 1 auto; height:1px; background:var(--line); }
.changes-arrow{
  /* Explicit height: an inline <svg> with height:auto collapses to 0 rather
     than resolving its aspect from the viewBox. Ratio tracks 34:52. */
  flex:none;
  width:clamp(24px,2.2vw,32px);
  height:clamp(37px,3.4vw,49px);
  color:var(--lilac); opacity:.5;
}
@media (prefers-reduced-motion: no-preference){
  .changes-arrow{ animation:linkBob 3.4s ease-in-out infinite; }
}
@keyframes linkBob{
  0%,100%{ transform:translateY(-2px); opacity:.42; }
  50%    { transform:translateY(3px);  opacity:.62; }
}
@media (min-width:900px){
  .proof-band{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); }
}
.proof-copy{ display:grid; justify-items:start; min-width:0; }

.proof-lead{
  max-width:17ch;
  font-family:var(--display); font-weight:800;
  font-size:clamp(27px,3vw,50px); line-height:1.08; letter-spacing:-.036em;
  color:var(--cream); text-wrap:balance;
}
.proof-lead em{
  font-style:normal;
  background-image:linear-gradient(110deg, var(--lilac-hot), var(--lilac) 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .proof-lead em{ color:var(--lilac); } }

/* The qualifier that makes the number mean something. */
.proof-sub{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(16px,1.8vw,24px);
  padding:9px 16px; border-radius:999px;
  font-size:11.5px; letter-spacing:.11em; color:var(--lilac-hot);
  border:1px solid rgba(229,171,255,.42); background:rgba(229,171,255,.11);
}
.proof-sub .ic{ width:1.2em; height:1.2em; flex:none; }

.proof-band .mon-num{
  margin-top:clamp(26px,3vw,44px);
  font-size:clamp(62px,8.6vw,140px);
}
.proof-band .mon-lead{ margin-top:clamp(10px,1.1vw,16px); max-width:20ch; }
.proof-band .changes-cta{ margin-top:clamp(28px,3vw,44px); text-align:left; }

/* No justify-self:center here - that makes the grid item shrink-to-fit, and the
   device's width:min(100%,...) then has nothing to resolve against and collapses.
   Stretch the column and centre the device inside it instead. */
.proof-visual{ position:relative; }
.proof-visual .mon-device{ width:min(100%,300px); margin-inline:auto; }

.changes-cta{ margin-top:clamp(40px,5vw,68px); text-align:center; }

/* =========================================================================
   6.6b THE METHOD · name it, prove it, then show what is inside it
   ========================================================================= */

.method{
  position:relative; padding-block:clamp(64px,7vw,116px);
  overflow:hidden; isolation:isolate; text-align:center;
  background:linear-gradient(180deg, var(--panel-hi), var(--panel) 42%, #0F0A17);
  border-block:1px solid rgba(229,171,255,.12);
}
.method-glow{
  position:absolute; z-index:-1; left:50%; top:0; translate:-50% -34%;
  width:min(120vw,1180px); aspect-ratio:1.6/1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,63,174,.34), rgba(229,171,255,.08) 52%, transparent 74%);
}
.method-label{ text-align:center; }

/* ---- Marginalia: two tilted stills in the outer gutters ---------------- */

/* The tiles bleed off the page edge on purpose; the notes must not. Each note
   is offset inward from its tile so it always lands inside the viewport, and
   sits below the tile where the centred column has no content to collide with. */
.mstill{
  position:absolute; z-index:1; display:block; pointer-events:none;
  width:clamp(112px,10.5vw,168px);
}
.mstill-tile{
  display:grid; place-items:center;
  width:100%; aspect-ratio:4/5; border-radius:14px;
  background:
    radial-gradient(120% 110% at 30% 14%, rgba(229,171,255,.34), transparent 62%),
    linear-gradient(160deg, rgba(124,63,174,.6), rgba(12,8,18,.96));
  box-shadow:inset 0 0 0 1px rgba(229,171,255,.24), 0 26px 60px rgba(0,0,0,.55);
}
.mstill-tile svg{ width:24%; height:24%; fill:rgba(245,222,255,.9); }
.mstill-note{ position:absolute; top:calc(100% + 12px); width:10em; }
.mstill-l{ left:-36px; top:13%; transform:rotate(-7deg); }
.mstill-l .mstill-note{ left:46px; text-align:left; }
.mstill-r{ right:-36px; top:7%; transform:rotate(6deg); }
.mstill-r .mstill-note{ right:46px; text-align:right; }
/* They live outside the shell; below this there is no outside. */
@media (max-width:1180px){ .mstill{ display:none; } }

/* ---- The claim --------------------------------------------------------- */

.method-body{
  margin-inline:auto; max-width:20ch;
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px,3.2vw,52px); line-height:1.1; letter-spacing:-.035em;
  color:var(--cream); text-wrap:balance;
}
/* The four outcomes are the point of the sentence, so they carry the colour. */
.method-body em{
  font-style:normal;
  background-image:linear-gradient(110deg, var(--lilac-hot), var(--lilac) 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .method-body em{ color:var(--lilac); } }

.method-cue{ margin-top:clamp(20px,2.2vw,30px); color:var(--lilac); font-size:10px; letter-spacing:.2em; }

.method-plaque{
  position:relative; isolation:isolate; overflow:hidden;
  margin:clamp(16px,1.8vw,24px) auto 0; width:100%; max-width:720px;
  display:grid; place-items:center;
  padding:clamp(30px,3.6vw,54px) clamp(18px,2vw,30px);
  border-radius:calc(var(--r) + 4px);
  border:1px solid rgba(229,171,255,.3);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(124,63,174,.4), transparent 62%),
    linear-gradient(168deg, rgba(43,29,58,.96), rgba(18,12,26,.97));
  box-shadow:var(--inset-top), 0 40px 90px rgba(0,0,0,.55);
}
.plaque-glow{
  position:absolute; z-index:-1; inset:-40% -10% auto -10%; height:180%;
  background:radial-gradient(closest-side, rgba(229,171,255,.32), transparent 70%);
  opacity:0; pointer-events:none;
}
.method-name{
  font-size:clamp(24px,3.1vw,48px); line-height:1.04; letter-spacing:-.042em;
  font-variation-settings:"wdth" 96;
  background-image:linear-gradient(120deg, #fff, var(--lilac-hot) 38%, var(--lilac) 70%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-wrap:balance;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .method-name{ color:var(--lilac); } }
.method-name .tm{ font-size:.4em; vertical-align:super; letter-spacing:0; }

/* ---- What it actually produced ----------------------------------------- */

.mstats{
  list-style:none; margin:clamp(34px,3.8vw,58px) 0 0; padding:0;
  display:grid; gap:clamp(16px,2vw,30px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  text-align:left;
}
@media (min-width:820px){ .mstats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mstats li{ display:flex; align-items:flex-start; gap:11px; min-width:0; }
.mstats .ic{ width:21px; height:21px; flex:none; margin-top:2px; color:var(--lilac); }
.mstats span{ display:grid; gap:3px; min-width:0; }
.mstats b{ font-size:15.5px; font-weight:700; color:var(--cream); letter-spacing:-.005em; }
.mstats .mono{ font-size:11.5px; letter-spacing:.05em; color:var(--dim); text-transform:none; }

/* The thread that hands off from the method to its contents. */
.method-bridge{
  position:relative; margin-top:clamp(48px,5.5vw,88px); padding-top:clamp(44px,5vw,76px);
  color:var(--dim); font-size:10px; letter-spacing:.2em;
}
.method-bridge::before{
  content:""; position:absolute; left:50%; top:0; translate:-50% 0;
  width:1px; height:clamp(30px,3.4vw,52px);
  background:linear-gradient(180deg, transparent, rgba(229,171,255,.55));
}

.learn-h{
  margin-top:clamp(14px,1.6vw,22px); margin-inline:auto; max-width:20ch;
  font-family:var(--display); font-weight:800;
  font-size:clamp(27px,3.2vw,52px); line-height:1.1; letter-spacing:-.035em;
  color:var(--cream); text-wrap:balance;
}
.learn-h em{
  font-style:normal;
  background-image:linear-gradient(110deg, var(--lilac-hot), var(--lilac) 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .learn-h em{ color:var(--lilac); } }

/* ---- The eight cards ---------------------------------------------------- */

.lcards{
  list-style:none; margin:clamp(34px,4vw,58px) 0 0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px); text-align:left;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){ .lcards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.lcard{
  display:grid; gap:clamp(12px,1.3vw,16px); align-content:start;
  padding:clamp(12px,1.2vw,16px);
  border-radius:var(--r); border:1px solid hsl(var(--a) 80% 72% / .2);
  background:
    radial-gradient(120% 120% at 50% 0%, hsl(var(--a) 70% 40% / .16), transparent 60%),
    rgba(21,14,29,.8);
  box-shadow:var(--inset-top);
}
/* A designed tile, not a photograph. Each card owns a hue, stepping across the
   set so the grid reads as a spectrum rather than eight unrelated colours. */
.lcard-thumb{
  position:relative; display:grid; place-items:center;
  aspect-ratio:4/3; border-radius:calc(var(--r) - 6px); overflow:hidden;
  background:
    radial-gradient(118% 112% at 28% 12%, hsl(var(--a) 96% 74% / .42), transparent 64%),
    linear-gradient(158deg, hsl(var(--a) 62% 34% / .62), rgba(12,8,18,.94));
  box-shadow:inset 0 0 0 1px hsl(var(--a) 92% 80% / .24);
}
.lcard-ic{
  width:34%; height:34%; fill:none; stroke:hsl(var(--a) 100% 86%);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 4px 16px hsl(var(--a) 100% 70% / .5));
}
.lcard-n{
  position:absolute; top:8px; left:10px;
  font-size:10px; color:hsl(var(--a) 100% 86%); opacity:.72;
}
.lcard-t{
  font-size:clamp(14px,1vw,16px); line-height:1.35; font-weight:600;
  color:var(--cream); text-wrap:pretty;
}

.method-cta{ margin-top:clamp(38px,4.4vw,64px); }

/* =========================================================================
   07 INSIDE PAID TO FILM · the course, what is in it, and the price
   ========================================================================= */

.course{
  position:relative; padding-block:var(--sec-y); overflow:hidden; isolation:isolate;
  text-align:center;
}
.course-glow{
  position:absolute; z-index:-1; left:50%; top:30%; translate:-50% -50%;
  width:min(130vw,1260px); aspect-ratio:1.5/1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(229,171,255,.13), rgba(124,63,174,.08) 46%, transparent 72%);
}
.course-label{ text-align:center; }

.course-h{
  /* Wide enough to hold "The Paid-to-Film Method" on one line at desktop
     sizes - the tighter measure was breaking it after the second hyphen. */
  margin-inline:auto; max-width:25ch;
  font-size:clamp(30px,4vw,66px); line-height:1.04; letter-spacing:-.042em;
  font-variation-settings:"wdth" 96;
  color:var(--cream); text-wrap:balance;
}
.course-h em{
  font-style:normal;
  background-image:linear-gradient(110deg, var(--lilac-hot), var(--lilac) 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .course-h em{ color:var(--lilac); } }
.course-h .tm{ font-size:.32em; vertical-align:super; letter-spacing:0; color:var(--lilac); }

.course-lead{
  margin:clamp(18px,2vw,28px) auto 0; max-width:62ch;
  font-size:clamp(15px,1.15vw,18px); line-height:1.62; color:var(--dim); text-wrap:pretty;
}

/* Marginalia flanking the mockup. */
/* Anchored to the mockup box, not the page gutter, so the note reads as a
   label ON the laptop rather than page marginalia. A soft shadow keeps the
   hand legible where it crosses a lit screen. */
.cstill-note{
  position:absolute; z-index:2; width:7em; opacity:.92;
  text-shadow:0 2px 10px rgba(8,5,14,.95), 0 0 22px rgba(8,5,14,.8);
}
.cstill-r{ right:4%;  top:5%;  transform:rotate(7deg);  text-align:right; }
@media (max-width:1100px){
  .cstill-r{ right:2%; top:3%; }
}
@media (max-width:820px){ .cstill-note{ display:none; } }

/* ---- What is in it ------------------------------------------------------ */

/* Matched to the mockup's width so the three blocks step down cleanly:
   mockup 980 -> features 980 -> pricing 880. */
.cfeats{
  list-style:none; margin:clamp(40px,4.6vw,72px) auto 0; padding:0;
  width:100%; max-width:min(100%, 980px);
  display:grid; gap:clamp(18px,2.2vw,32px); text-align:left;
}
@media (min-width:820px){ .cfeats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.6vw,40px); } }
.cfeat{ display:flex; align-items:flex-start; gap:clamp(14px,1.5vw,20px); min-width:0; }
.cfeat-thumb{
  flex:none; display:grid; place-items:center;
  width:clamp(66px,6vw,86px); aspect-ratio:4/3;
  border-radius:calc(var(--r) - 6px); overflow:hidden;
  background:
    radial-gradient(118% 112% at 28% 12%, hsl(var(--a) 96% 74% / .42), transparent 64%),
    linear-gradient(158deg, hsl(var(--a) 62% 34% / .62), rgba(12,8,18,.94));
  box-shadow:inset 0 0 0 1px hsl(var(--a) 92% 80% / .24);
}
.cfeat-ic{
  width:40%; height:40%; fill:none; stroke:hsl(var(--a) 100% 86%);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 4px 14px hsl(var(--a) 100% 70% / .5));
}
.cfeat-t{
  display:block; min-width:0;
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.5; color:var(--dim); text-wrap:pretty;
}
.cfeat-t b{ display:block; margin-bottom:4px; font-weight:700; color:var(--cream); font-size:1.06em; }

/* Held narrower than the shell so it reads as an object on the page rather
   than a full-bleed slab. Swap the inner markup for a real laptop render and
   the frame keeps these proportions. */
.kit-stage-method{
  position:relative;            /* positioning context for the two hand notes */
  margin:clamp(40px,4.6vw,72px) auto 0;
  width:100%; max-width:min(100%, 980px);
  /* .course centres its copy; the mockup is a UI and must not inherit that. */
  text-align:left;
}



.mon-num{
  font-size:clamp(62px, 8vw, 124px);
  line-height:.84; letter-spacing:-.055em;
  font-variation-settings:"wdth" 100,"opsz" 96;
  background-image:linear-gradient(176deg, var(--lilac-hot), var(--lilac) 44%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 18px 50px rgba(229,171,255,.16));
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){ .mon-num{ color:var(--lilac); } }

/* The bottom margin has to out-reach the device's upward drift (30px). */
.mon-lead{
  margin-top:clamp(14px,1.4vw,20px); margin-bottom:0;
  font-size:clamp(17px,1.3vw,22px); line-height:1.34;
  color:var(--cream); max-width:24ch; text-wrap:balance;
}

/* ---- The device ------------------------------------------------------- */

.mon-device{
  position:relative; justify-self:center;
  width:min(100%, 318px);
  transform:rotate(-4deg);          /* static resting angle; GSAP drives it otherwise */
  will-change:transform;
}
.device{
  position:relative; padding:9px; border-radius:46px;
  /* thin lit edge, then the dark body */
  background:
    linear-gradient(155deg, rgba(245,222,255,.55), rgba(124,63,174,.34) 34%, rgba(18,12,26,1) 68%);
  box-shadow:
    0 42px 90px rgba(0,0,0,.62),
    0 8px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.device-screen{
  border-radius:38px; overflow:hidden; background:#000;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9);
}
.device-screen img{ display:block; width:100%; height:auto; }
.device-glow{
  position:absolute; z-index:-1; inset:-16% -24%;
  background:radial-gradient(closest-side, rgba(229,171,255,.28), rgba(124,63,174,.13) 48%, transparent 72%);
  pointer-events:none;
}

/* ---- Editorial annotations -------------------------------------------- */

.annot{
  position:absolute; font-family:var(--hand); font-weight:500;
  font-size:clamp(18px,1.4vw,23px); line-height:1.14;
  color:var(--lilac); opacity:.8; pointer-events:none;
  /* Two to three hand-written words per line - the <br> does the breaking. */
  text-wrap:balance;
}
/* Both sit in the gutter to the right of the phone. They used to flank it,
   but the device now shares a column with the 1,500+ stat and has no side
   margin left - flanking put one over the phone and one over the lead line. */
/* The device is centred in the payoff panel, so the notes flank it again - 
   one either side, in the panel's own margin rather than the page gutter. */
/* Both notes stack to the right of the device: the copy column occupies the
   space to its left, so flanking it would run the lower note into the text. */
.annot-a{ top:1%;   left:calc(100% + 18px); width:8.4em; transform:rotate(-6deg); }
.annot-b{ bottom:9%; left:calc(100% + 4px);  width:8.4em; transform:rotate(5deg); }
.annot-arrow{
  position:absolute; top:13%; left:calc(100% + 6px); width:58px; height:38px;
  color:var(--lilac); opacity:.5; transform:rotate(196deg); pointer-events:none;
}
/* They are marginalia - below this width there is no margin to put them in. */
/* Below this the panel is too narrow to hold the device and both notes. */
@media (max-width:1080px){ .annot, .annot-arrow{ display:none; } }

/* The course-mockup notes are the exception: they sit ON the artwork rather
   than in a margin, so they survive past the marginalia breakpoint. Declared
   after the rule above so it does not hide them. */
@media (max-width:1080px){ .cstill-note{ display:block; } }
@media (max-width:820px){  .cstill-note{ display:none; } }

/* =========================================================================
   6.8 THE 12 WEEKS · scrub timeline
   ========================================================================= */

.weeks{ padding-block:clamp(40px,4.6vw,76px) var(--sec-y); }
.tl{ position:relative; }
.tl-rail{ position:relative; height:2px; background:rgba(229,171,255,.16); border-radius:2px; }
.tl-fill{ display:block; height:100%; width:0; background:var(--lilac); border-radius:2px; box-shadow:0 0 18px var(--glow); }
/* Spaced by week count so FILM visibly owns a third of the bar. */
.tl-marks{ display:grid; grid-template-columns:2fr 4fr 3fr 3fr; margin-top:-6px; }
.tl-mark{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-right:12px; }
.tl-dot{
  width:11px; height:11px; border-radius:50%; background:var(--panel);
  border:2px solid rgba(229,171,255,.35); transform:translateY(-2px);
  transition:background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.tl-mark b{ font-weight:400; color:var(--dim); transition:color .35s var(--ease); }
.tl-wk{ color:var(--dim); }
.tl-mark.is-on .tl-dot{ background:var(--lilac); border-color:var(--lilac); box-shadow:0 0 0 6px rgba(229,171,255,.14), 0 0 22px var(--glow); transform:translateY(-2px) scale(1.25); }
.tl-mark.is-on b{ color:var(--lilac); }

.tl-panes{ position:relative; margin-top:clamp(40px,5vw,64px); min-height:320px; }
.tl-pane{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease);
  padding:clamp(26px,3vw,40px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--glass); box-shadow:var(--inset-top);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.tl-pane.is-on{ opacity:1; visibility:visible; }
.tl-pane h3 .mono{ font-size:12px; opacity:.8; }
.tl-promise{ margin-top:12px; color:var(--lilac); font-size:var(--fs-lead); max-width:40ch; }
.tl-pane ul{ margin-top:24px; display:grid; gap:11px; }
.tl-pane li{ position:relative; padding-left:22px; color:var(--dim); font-size:15px; }
.tl-pane li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--lilac); }
@media (min-width:760px){ .tl-pane ul{ grid-template-columns:repeat(2,1fr); gap:12px 28px; } }

@media (max-width:900px){
  /* Mobile fallback: vertical timeline, all panes open, no scrub. */
  .tl-rail{ display:none; }
  .tl-marks{ display:none; }
  .tl-panes{ min-height:0; display:grid; gap:14px; margin-top:0; }
  .tl-pane{ position:static; opacity:1; visibility:visible; }
}

/* Signature-module badge + module payoff line */
.tl-badge{
  display:inline-block; margin-top:8px; padding:4px 9px;
  border-radius:999px; border:1px solid rgba(229,171,255,.34);
  background:rgba(229,171,255,.10); color:var(--lilac);
  font-size:9.5px; letter-spacing:.12em; line-height:1.2;
}
/* The marker row is hidden below 900px, so the badge rides with the pane there. */
.tl-badge-pane{ display:none; margin:10px 0 0; }
@media (max-width:900px){ .tl-badge-pane{ display:inline-block; } }
.tl-payoff{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--lilac); font-size:15px; line-height:1.5; max-width:52ch;
}
.tl-payoff .ic{ width:1.05em; height:1.05em; margin-top:.28em; flex:none; }

/* =========================================================================
   NEW · STUDENT RESULTS · snap carousel
   ========================================================================= */

/* Tighter at the top: the change of ground already separates this from the
   section above, so a full section's padding on both sides read as a hole. */
.res{ position:relative; padding-block:clamp(52px,6vw,92px) var(--sec-y); }

.res-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.res-head h2{ margin-top:10px; max-width:24ch; }

.res-nav{ display:flex; gap:10px; flex:none; }
.res-btn{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  color:var(--cream); background:var(--glass); border:1px solid var(--line);
  cursor:pointer; transition:background .22s ease, border-color .22s ease, opacity .22s ease;
}
.res-btn .ic{ width:19px; height:19px; }
.res-btn[data-res="prev"] .ic{ transform:rotate(180deg); }
.res-btn:hover:not(:disabled){ background:var(--glass-hi); border-color:rgba(229,171,255,.4); }
.res-btn:disabled{ opacity:.32; cursor:default; }

/* Full-bleed rail so the next card is always cut by the viewport edge - that
   overhang is what tells the reader there is more to the right. */
.res-rail{
  margin-top:clamp(30px,3.4vw,46px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Must match the track's inline padding. Without it the mandatory snap
     immediately scrolls the gutter away on load and card 01 sits flush to
     the viewport edge instead of under the headline. */
  scroll-padding-inline:max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.res-rail::-webkit-scrollbar{ display:none; }
.res-rail:focus-visible{ outline:2px solid var(--lilac); outline-offset:-2px; }

.res-track{
  list-style:none; margin:0;
  /* Left gutter has to line up with .shell's content edge, not the viewport,
     or the first card sits left of the headline above it. Uses vw, not %:
     inside a max-content track a percentage padding resolves against zero. */
  padding-block:4px;
  padding-inline:max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
  display:flex; gap:clamp(14px,1.6vw,22px);
  width:max-content; max-width:none;
}

.res-card{
  scroll-snap-align:start; flex:0 0 clamp(232px,25vw,306px);
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(14px,1.4vw,18px);
  border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(168deg, rgba(31,21,41,.9), rgba(15,10,21,.94));
  box-shadow:var(--inset-top);
}
.res-slot{ font-size:10px; letter-spacing:.14em; color:var(--lilac); opacity:.75; }

/* The placeholder frame reuses the page's existing dashed-slot idiom. */
.res-frame{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; padding:18px; text-align:center;
  border-radius:calc(var(--r) - 6px); border:1px solid var(--line);
  background-color:var(--panel);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(229,171,255,.18), transparent 62%),
    linear-gradient(160deg, rgba(124,63,174,.26), rgba(21,14,29,1));
}
.res-frame::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px dashed rgba(229,171,255,.22); border-radius:calc(var(--r) - 14px);
}
.res-frame .mono{ font-size:10px; letter-spacing:.08em; color:var(--dim); line-height:1.4; }
.res-frame-img{ padding:0; border-style:solid; }
.res-frame-img::after{ display:none; }
.res-frame-img img{ display:block; width:100%; height:100%; object-fit:cover; }

.res-hint{ font-size:10px; letter-spacing:.08em; color:var(--dim); opacity:.7; line-height:1.45; }

/* Filled-card type, ready for real content. */
.res-quote{
  margin:0; font-size:15px; line-height:1.5; color:var(--cream); text-wrap:pretty;
}
.res-quote::before{ content:"\201C"; }
.res-quote::after{ content:"\201D"; }
.res-who{ display:grid; gap:3px; margin-top:auto; }
.res-who b{ font-size:14px; font-weight:600; color:var(--cream); }
.res-who .mono{ font-size:10px; letter-spacing:.08em; color:var(--dim); }

.res-note{
  margin-top:clamp(20px,2.2vw,28px);
  font-size:10px; letter-spacing:.1em; color:var(--dim); opacity:.62;
}
.res-dots{ display:flex; gap:7px; margin-top:14px; }
.res-dot{
  width:7px; height:7px; border-radius:50%; padding:0; border:0; cursor:pointer;
  background:rgba(229,171,255,.24); transition:background .25s ease, width .25s ease;
}
.res-dot.is-on{ width:22px; border-radius:999px; background:var(--lilac); }

/* ---- Light ground ------------------------------------------------------
   The section sits on cream, so everything tuned for the dark page needs its
   counterpart here: ink instead of cream, --dim-light instead of --dim, and
   --lilac-ink for the accents that were --lilac. */

.res.light .res-btn{
  color:var(--void); background:rgba(11,7,16,.04); border-color:var(--line-light);
}
.res.light .res-btn:hover:not(:disabled){
  background:rgba(126,47,168,.09); border-color:var(--lilac-ink);
}
.res.light .res-rail:focus-visible{ outline-color:var(--lilac-ink); }

.res.light .res-card{
  border-color:var(--line-light);
  background:linear-gradient(168deg, rgba(255,255,255,.9), rgba(244,238,250,.96));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px rgba(11,7,16,.07);
}
.res.light .res-slot{ color:var(--lilac-ink); opacity:.85; }

.res.light .res-frame{
  border-color:var(--line-light);
  background-color:#EFE6F7;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(126,47,168,.14), transparent 62%),
    linear-gradient(160deg, rgba(126,47,168,.1), rgba(244,238,250,1));
}
.res.light .res-frame::after{ border-color:rgba(126,47,168,.26); }
.res.light .res-frame .mono{ color:var(--dim-light); }
.res.light .shot-ic{ stroke:var(--lilac-ink); }

.res.light .res-hint{ color:var(--dim-light); opacity:.85; }
.res.light .res-quote{ color:var(--void); }
.res.light .res-who b{ color:var(--void); }
.res.light .res-who .mono{ color:var(--dim-light); }
.res.light .res-note{ color:var(--dim-light); opacity:.8; }

.res.light .res-dot{ background:rgba(126,47,168,.22); }
.res.light .res-dot.is-on{ background:var(--lilac-ink); }

@media (max-width:700px){
  .res-head{ align-items:flex-start; }
  .res-nav{ display:none; }            /* swipe is the control on touch */
  .res-card{ flex-basis:min(78vw,290px); }
  .res-note{ margin-top:18px; }
}

/* =========================================================================
   THE COURSE MOCKUP · lives in the method band
   ========================================================================= */


/* ---- Stage ------------------------------------------------------------- */

.kit-stage{
  position:relative; margin-top:clamp(40px,5vw,68px);
  padding-bottom:clamp(0px,4vw,54px);
}

/* ---- The window -------------------------------------------------------- */

.kit-win{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid rgba(229,171,255,.16);
  background:linear-gradient(168deg, rgba(31,21,41,.96), rgba(15,10,21,.98));
  box-shadow:0 50px 110px rgba(0,0,0,.62), 0 10px 30px rgba(0,0,0,.44), var(--inset-top);
  will-change:transform;
}
.kit-bar{
  display:flex; align-items:center; gap:14px;
  padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.kit-dots{ display:flex; gap:6px; flex:none; }
.kit-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.kit-title{ color:var(--dim); font-size:11px; letter-spacing:.08em; }

.kit-body{ display:grid; grid-template-columns:minmax(0,224px) minmax(0,1fr); }
@media (max-width:820px){ .kit-body{ grid-template-columns:1fr; } .kit-side{ display:none; } }

/* sidebar */
.kit-side{
  padding:clamp(16px,1.6vw,22px);
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.22);
}
.kit-side-h{ color:var(--dim); font-size:10px; letter-spacing:.14em; opacity:.75; }
.kit-side-h2{ margin-top:22px; }
.kit-mods{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px; }
.kit-mods li{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline;
  column-gap:9px; padding:9px 10px; border-radius:9px;
  border:1px solid transparent; color:var(--dim); font-size:13px;
}
.kit-mods b{ font-weight:600; }
.kit-n{ font-size:10px; opacity:.6; }
.kit-wk{ grid-column:2; font-size:10px; opacity:.6; letter-spacing:.06em; }
.kit-mods li.is-done{ color:var(--dim); }
.kit-mods li.is-done .kit-n::after{ content:" ✓"; color:var(--lilac); opacity:.8; }
.kit-mods li.is-on{
  color:var(--cream); border-color:rgba(229,171,255,.32);
  background:linear-gradient(140deg, rgba(124,63,174,.3), rgba(229,171,255,.06));
}
.kit-bon{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.kit-bon li{
  position:relative; padding-left:15px; color:var(--dim); font-size:12.5px; line-height:1.35;
}
.kit-bon li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:5px; height:5px; border-radius:50%; background:var(--lilac); opacity:.55;
}

/* main pane */
.kit-main{ padding:clamp(18px,2vw,28px); min-width:0; }
.kit-player{
  /* Explicit height, not aspect-ratio: at full shell width a true 16/9 runs
     ~475px tall and buries the lesson copy. Capping the height of an
     aspect-ratio box would shrink its width to match, so it is set directly
     and the player stays full-bleed across the pane. */
  position:relative; height:clamp(178px,19vw,268px);
  border-radius:11px; overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(229,171,255,.16), transparent 62%),
    linear-gradient(158deg, rgba(61,26,91,.9), rgba(11,7,16,.98));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.kit-play{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  color:var(--void); background:var(--lilac);
  box-shadow:0 10px 30px rgba(229,171,255,.34);
}
.kit-play svg{ width:26px; height:26px; margin-left:2px; }
.kit-play-sm{ width:44px; height:44px; }
.kit-play-sm svg{ width:20px; height:20px; }
.kit-badge{
  position:absolute; top:12px; left:12px;
  padding:5px 9px; border-radius:999px; font-size:9.5px; letter-spacing:.12em;
  color:var(--lilac); border:1px solid rgba(229,171,255,.3); background:rgba(11,7,16,.62);
}
.kit-scrub{
  position:absolute; left:12px; right:12px; bottom:12px; height:3px; border-radius:999px;
  background:rgba(255,255,255,.14);
}
.kit-scrub i{
  display:block; width:38%; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--lilac-hot), var(--lilac));
}
.kit-eyebrow{ margin-top:clamp(16px,1.6vw,22px); color:var(--lilac); font-size:10px; letter-spacing:.14em; }
.kit-lesson{
  margin-top:8px; font-size:clamp(18px,1.5vw,24px); line-height:1.24;
  letter-spacing:-.02em; color:var(--cream); text-wrap:balance;
}
.kit-up{ list-style:none; margin:clamp(14px,1.4vw,20px) 0 0; padding:0; display:grid; gap:9px; }
.kit-up li{
  position:relative; padding-left:20px; color:var(--dim); font-size:14px; line-height:1.4;
}
.kit-up li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:1px; background:var(--lilac); opacity:.6;
}

/* ---- Floating phone + template chip ------------------------------------ */

.kit-phone{
  position:absolute; z-index:2; right:-8px; bottom:-4%;
  width:min(30%, 208px); transform:rotate(4deg); will-change:transform;
}
/* The monument's frame metrics are tuned for a 318px phone - rescale them. */
.kit-phone .device{ padding:6px; border-radius:34px; }
.kit-phone .device-screen{ border-radius:28px; }
.kit-screen{
  position:relative; aspect-ratio:9/19.5; display:grid; place-items:center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(229,171,255,.2), transparent 60%),
    linear-gradient(168deg, rgba(61,26,91,.94), rgba(11,7,16,.99));
}
.kit-pbadge{
  position:absolute; top:14px; left:0; right:0; text-align:center;
  font-size:9px; letter-spacing:.14em; color:var(--lilac); opacity:.85;
}
.kit-pmeta{
  position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-size:9px; letter-spacing:.08em; color:var(--dim);
}
.kit-chip{
  position:absolute; z-index:3; left:-10px;
  bottom:calc(clamp(0px,4vw,54px) - 26px);
  display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:13px;
  border:1px solid rgba(229,171,255,.24);
  background:linear-gradient(150deg, rgba(31,21,41,.96), rgba(15,10,21,.96));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 22px 50px rgba(0,0,0,.55), var(--inset-top);
  will-change:transform;
}
.kit-chip-ic{
  display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:8px;
  font-family:var(--display); font-weight:700; font-size:16px;
  color:var(--void); background:var(--lilac-hot);
}
.kit-chip-t{ display:grid; gap:2px; }
.kit-chip-t b{ font-size:13px; color:var(--cream); font-weight:600; }
.kit-chip-t .mono{ font-size:9.5px; letter-spacing:.06em; color:var(--dim); }

@media (max-width:900px){
  .kit-phone{ width:min(34%,168px); right:-4px; bottom:-6%; }
  .kit-chip{ left:-4px; bottom:calc(clamp(0px,4vw,54px) - 22px); padding:10px 12px; }
  .kit-chip-t b{ font-size:12px; }
}
/* Below this the stage has no margin to float things into - the window stands
   on its own and the phone/chip would only cover the content they annotate. */
@media (max-width:700px){
  .kit-phone, .kit-chip{ display:none; }
  .kit-stage{ padding-bottom:0; }
}

/* =========================================================================
   NEW · RISK-FREE GUARANTEE · client-supplied copy
   ========================================================================= */

.guar{ position:relative; padding-block:clamp(64px,8vw,120px); }
.guar-label{ text-align:center; margin-bottom:clamp(18px,2vw,26px); }
.guar-panel{
  position:relative; display:grid; justify-items:center; text-align:center;
  gap:clamp(14px,1.5vw,20px);
  padding:clamp(34px,4.4vw,60px) clamp(22px,3.4vw,54px);
  border-radius:var(--r); border:1px solid rgba(229,171,255,.26);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124,63,174,.24), transparent 64%),
    linear-gradient(170deg, rgba(31,21,41,.9), rgba(15,10,21,.94));
  box-shadow:var(--inset-top), var(--shadow);
}
/* ---- The stamp seal ---------------------------------------------------- */

.guar-seal{
  display:block; width:clamp(92px,9vw,124px); aspect-ratio:1;
  margin-bottom:clamp(4px,.6vw,10px);
  filter:drop-shadow(0 10px 30px rgba(229,171,255,.22));
}
.guar-seal svg{ display:block; width:100%; height:100%; overflow:visible; }

.seal-o{ fill:none; stroke:var(--lilac); stroke-opacity:.42; stroke-width:1.1; }
.seal-dash{ stroke-dasharray:2 5; stroke-linecap:round; stroke-opacity:.55; }
.seal-star{ fill:var(--lilac); fill-opacity:.75; }

.seal-arc{
  /* Sized so 20 characters clear the top half-arc with room before the
     3 and 9 o'clock markers. */
  font-family:var(--mono); font-size:7.2px; letter-spacing:.18em;
  fill:var(--lilac); fill-opacity:.9; text-anchor:middle;
}
.seal-n{
  font-family:var(--display); font-weight:800; font-size:31px;
  letter-spacing:-.045em; text-anchor:middle; fill:url(#sealFill);
}
.seal-d{
  font-family:var(--mono); font-size:7.4px; letter-spacing:.3em;
  text-anchor:middle; fill:var(--lilac); fill-opacity:.78;
}

/* The ring turns; the "30 DAYS" core stays put and stays readable. */
.js .seal-ring{ transform-origin:60px 60px; animation:sealSpin 42s linear infinite; }
@keyframes sealSpin{ to{ transform:rotate(360deg); } }
.guar h2{ max-width:20ch; }
.guar-body{
  max-width:56ch; color:var(--dim);
  font-size:var(--fs-body); line-height:1.62; text-wrap:pretty;
}
.guar-body em{ color:var(--cream); font-style:italic; }

/* The four actions, as steps rather than one run-on ellipsis chain. */
.guar-steps{
  list-style:none; margin:clamp(6px,.8vw,10px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px;
}
.guar-steps li{
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(229,171,255,.2); background:rgba(229,171,255,.05);
  color:var(--cream); font-size:14px; line-height:1.2;
}
.guar-close{
  margin-top:clamp(8px,1vw,14px); max-width:54ch;
  font-size:clamp(17px,1.2vw,20px); line-height:1.55;
  color:var(--dim); text-wrap:pretty;
}
.guar-close strong{
  color:var(--cream); font-weight:700;
  background-image:linear-gradient(180deg, transparent 62%, rgba(229,171,255,.24) 62%);
}

/* =========================================================================
   NEW · TOP 10 REWARDS · ranked podium, then a compact list
   ========================================================================= */

.rewards{ padding-block:var(--sec-y); }
.rewards h2{ max-width:16ch; }
.rewards-sub{ margin-top:14px; max-width:56ch; }

.podium{ display:grid; gap:14px; margin-top:clamp(36px,4vw,56px); }
@media (min-width:820px){
  .podium{ grid-template-columns:repeat(3,1fr); align-items:end; gap:18px; }
  /* Podium order: 1st tallest and centre-stage, flanked by 2nd and 3rd. */
  .pod-1{ order:2; } .pod-2{ order:1; } .pod-3{ order:3; }
  .pod-1{ padding-block:clamp(34px,3.4vw,46px); }
}
.pod{
  position:relative; display:grid; justify-items:center; gap:10px; text-align:center;
  padding:26px 22px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--glass);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--inset-top);
  transition:transform var(--dur,.3s) var(--ease), border-color .3s var(--ease);
}
.pod:hover{ transform:translateY(-3px); border-color:rgba(229,171,255,.34); }
.pod-1{
  border-color:rgba(229,171,255,.42);
  background:linear-gradient(168deg, rgba(124,63,174,.24), rgba(21,14,29,.86));
}
.pod-1::after{
  content:""; position:absolute; z-index:-1; left:10%; right:10%; bottom:-22px; height:70px;
  background:radial-gradient(closest-side, var(--glow), transparent 72%); filter:blur(12px);
}
.pod-medal{ font-size:30px; line-height:1; }
.pod-rank{ color:var(--lilac); }
.pod p{ font-size:16px; line-height:1.4; color:var(--cream); max-width:24ch; }

.rwd-list{ display:grid; gap:0; margin-top:clamp(22px,2.6vw,32px); }
.rwd{
  display:flex; align-items:baseline; gap:18px;
  padding:15px 4px; border-top:1px solid var(--line);
}
.rwd:last-child{ border-bottom:1px solid var(--line); }
.rwd-rank{ flex:none; width:34px; color:var(--lilac); }
.rwd p{ font-size:15.5px; color:var(--dim); }
.rewards-foot{
  display:block; margin-top:clamp(24px,3vw,36px);
  color:var(--dim); text-transform:none; letter-spacing:.01em;
  font-size:12.5px; line-height:1.55; max-width:70ch;
}

/* =========================================================================
   6.9 WHAT YOU GET · stacked card scale
   ========================================================================= */

.stackwrap{ padding-block:var(--sec-y); }
.stackwrap h2{ max-width:15ch; margin-bottom:clamp(40px,5vw,64px); }
.stack{ position:relative; max-width:760px; margin-inline:auto; padding-inline:var(--pad); }
/* Each card carries its own hue in --a, stepping 232 -> 332 across the eight,
   so the set reads as one deliberate spectrum rather than eight random colours.
   Everything else (lightness, saturation, alpha) is held constant. */
.scard{
  display:grid; gap:clamp(16px,2vw,28px); align-items:center;
  padding:clamp(20px,2.2vw,28px); border-radius:var(--r);
  border:1px solid hsl(var(--a) 80% 72% / .2);
  background:
    radial-gradient(120% 180% at 0% 50%, hsl(var(--a) 70% 40% / .16), transparent 58%),
    rgba(21,14,29,.86);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--inset-top), var(--shadow);
  will-change:transform;
}
@media (min-width:640px){
  .scard{ grid-template-columns:clamp(132px,15vw,176px) minmax(0,1fr); }
}
.scard + .scard{ margin-top:18px; }

/* The thumbnail: a lit tile in the card's hue with the bonus's own glyph. */
.scard-thumb{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:4/3; border-radius:calc(var(--r) - 5px);
  display:grid; place-items:center;
  background:
    radial-gradient(115% 115% at 28% 12%, hsl(var(--a) 96% 74% / .42), transparent 64%),
    linear-gradient(158deg, hsl(var(--a) 62% 34% / .62), rgba(12,8,18,.94));
  box-shadow:inset 0 0 0 1px hsl(var(--a) 92% 80% / .24);
}
/* faint grid, so the tile has texture instead of being a flat wash */
.thumb-mesh{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(hsl(var(--a) 90% 82% / .12) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--a) 90% 82% / .12) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(80% 80% at 70% 80%, #000, transparent 72%);
  mask-image:radial-gradient(80% 80% at 70% 80%, #000, transparent 72%);
}
.thumb-ic{
  width:42%; height:42%;
  fill:none; stroke:hsl(var(--a) 100% 86%); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 4px 16px hsl(var(--a) 100% 70% / .5));
}
.scard-n{
  position:absolute; top:9px; left:11px;
  color:hsl(var(--a) 100% 86%); opacity:.72; font-size:10px;
}

.scard-body{ min-width:0; }
.scard h3{ margin-bottom:8px; text-wrap:balance; }
.scard-body p{ color:var(--dim); font-size:15px; line-height:1.5; max-width:44ch; text-wrap:pretty; }
@media (max-width:900px){
  /* Mobile fallback: plain grid, no stacking. */
  .stack{ display:grid; gap:12px; }
  .scard{ position:static !important; transform:none !important; margin-top:0; }
  .scard + .scard{ margin-top:0; }
}
@media (max-width:639px){
  /* Thumb sits above the copy and stays a band, not a big square. */
  .scard-thumb{ aspect-ratio:16/7; }
  .thumb-ic{ width:auto; height:52%; }
}
@media (min-width:600px) and (max-width:900px){ .stack{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   6.10 THE ONE REVIEW · full-bleed typographic quote · LIGHT
   (markup currently commented out in v2.html - styles kept ready)
   ========================================================================= */

.review{ padding-block:var(--sec-y); min-height:80svh; display:flex; align-items:center; }
.review-q p{
  font-family:var(--display); font-weight:700; letter-spacing:var(--track);
  font-size:clamp(30px,5.4vw,76px); line-height:1.06; text-wrap:balance;
}
.review-q .word{ display:inline-block; }
.review-attr{ display:block; margin-top:36px; }

/* =========================================================================
   6.11 OBJECTIONS · split-pin
   ========================================================================= */

.obj{ padding-block:var(--sec-y); }
.obj-grid{ display:grid; gap:clamp(32px,4vw,64px); align-items:start; }
@media (min-width:900px){ .obj-grid{ grid-template-columns:minmax(0,42fr) minmax(0,58fr); } }
.obj-stand h2{ max-width:12ch; }
.obj-list{ display:grid; gap:clamp(28px,3vw,44px); }
.obj-item{ transition:opacity .5s var(--ease); }
.obj-q{
  font-family:var(--display); font-weight:700; font-size:clamp(21px,2.2vw,30px);
  letter-spacing:var(--track); color:var(--cream);
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.obj-q::before{ content:"✗"; color:var(--dim); margin-right:12px; opacity:.5; }
.obj-a{ color:var(--dim); max-width:46ch; }

/* =========================================================================
   6.12 PRICING · dimensional tier panels
   ========================================================================= */

/* The tiers live inside the method band now, directly under the mockup. */
/* Narrower again than the mockup, so the section tapers toward the price. */
.tiers-wrap{
  margin:clamp(48px,5.5vw,88px) auto 0;
  width:100%; max-width:min(100%, 880px);
  text-align:left;
}
.tiers{ display:grid; gap:20px; align-items:start; }
@media (min-width:860px){ .tiers{ grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,32px); align-items:center; } }
.tier{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(28px,3.2vw,44px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--glass);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--inset-top);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.tier:hover{ transform:translateY(-4px); border-color:rgba(229,171,255,.42); background:var(--glass-hi); }
.tier-hi{
  background:linear-gradient(168deg, rgba(124,63,174,.26), rgba(21,14,29,.86));
  border-color:rgba(229,171,255,.32);
}
@media (min-width:860px){ .tier-hi{ padding-block:clamp(38px,4.2vw,60px); transform:scale(1.045); } .tier-hi:hover{ transform:scale(1.045) translateY(-4px); } }
.tier-hi::after{
  content:""; position:absolute; z-index:-1; left:8%; right:8%; bottom:-26px; height:80px;
  background:radial-gradient(closest-side, var(--glow), transparent 72%); filter:blur(12px);
}
.tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--lilac); color:var(--void);
  padding:5px 14px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap;
}
.tier-name{ display:block; }
.tier-price{ font-size:clamp(52px,6vw,72px); line-height:1; letter-spacing:-0.045em; }
.tier-pos{ color:var(--dim); font-size:15px; }
.tier-list{ display:grid; gap:11px; margin:8px 0 22px; }
.tier-list li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--dim); }
.tier-list .ic{ width:1.05em; height:1.05em; color:var(--lilac); margin-top:.28em; stroke-width:2.2; }
.tier .btn{ margin-top:auto; }
.tiers-note{ display:block; margin-top:28px; text-align:center; color:var(--dim); letter-spacing:.1em; }

/* =========================================================================
   6.13 FAQ · minimal rules accordion · LIGHT
   ========================================================================= */

.faq{ padding-block:var(--sec-y); }
.faq h2{ margin-bottom:clamp(36px,4vw,56px); }
.fq{ border-top:1px solid var(--line-light); }
.fq:last-child{ border-bottom:1px solid var(--line-light); }
.fq h3{ margin:0; font-size:inherit; font-family:var(--body); font-weight:400; }
.fq-b{
  width:100%; display:flex; align-items:baseline; gap:18px;
  padding:26px 4px; background:none; border:0; text-align:left; cursor:pointer;
  transition:color .25s var(--ease);
}
.fq-b:hover{ color:var(--lilac-ink); }
.fq-n{ flex:none; }
.fq-t{ flex:1; font-family:var(--display); font-weight:600; font-size:clamp(17px,1.5vw,22px); letter-spacing:-0.02em; line-height:1.3; }
.fq-i{ width:19px; height:19px; color:var(--lilac-ink); flex:none; align-self:center; transition:transform .38s var(--ease); }
.fq-b[aria-expanded="true"] .fq-i{ transform:rotate(45deg); }
.fq-p{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease); }
.fq-p.is-open{ grid-template-rows:1fr; }
.fq-p > div{ overflow:hidden; }
.fq-p p{ padding:0 48px 28px 47px; color:var(--dim-light); max-width:62ch; }
@media (max-width:600px){ .fq-p p{ padding-left:4px; padding-right:8px; } }

/* =========================================================================
   6.14 FINAL CTA · full-bleed glow
   ========================================================================= */

.final{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding-block:clamp(100px,13vw,190px) clamp(88px,11vw,150px);
}
.final-glow{
  position:absolute; z-index:-2; left:50%; bottom:-58%; transform:translateX(-50%) translateY(18%);
  width:min(160vw,1500px); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(229,171,255,.36), rgba(124,63,174,.18) 46%, transparent 72%);
}
.final-shot{
  position:absolute; z-index:-1; left:50%; bottom:0; transform:translateX(-50%);
  width:min(92vw,860px); opacity:.22;
  -webkit-mask-image:linear-gradient(#000 10%, transparent 82%);
  mask-image:linear-gradient(#000 10%, transparent 82%);
}
.final-in{ display:grid; gap:22px; justify-items:center; }
.final-h{ max-width:14ch; }
.final-h .fline{ display:block; overflow:hidden; padding-bottom:.04em; }
.final-body{ max-width:50ch; color:var(--dim); font-size:var(--fs-lead); text-wrap:pretty; }
.final-micro{ display:block; color:var(--dim); }

/* =========================================================================
   6.16 FOOTER
   ========================================================================= */

.foot{ background:var(--panel); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,72px) 30px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.foot .mark{ font-size:20px; }
.mark-foot img{ height:52px; }
@media (max-width:700px){ .mark-foot img{ height:42px; } }
.foot-tag{ margin-top:8px; }
.foot-social{ display:flex; gap:8px; }
.foot-social a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); transition:background-color .3s var(--ease), color .3s var(--ease);
}
.foot-social a:hover{ background:var(--lilac); color:var(--void); }
.foot-social .ic{ width:19px; height:19px; }
.foot-legal{ margin-top:clamp(36px,4vw,56px); padding-top:24px; border-top:1px solid var(--line); display:grid; gap:12px; }
.foot-disc{ max-width:80ch; font-size:13px; line-height:1.6; color:var(--dim); }

/* =========================================================================
   REDUCED MOTION - kills every pin, parallax, horizontal scroll and counter.
   The page must still read top to bottom.
   ========================================================================= */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain{ animation:none !important; }
  .cursor-glow{ display:none !important; }
  .hero-glow{ animation:none !important; }
  .ticker-track{ animation:none !important; transform:none !important; }
  .ticker{ overflow-x:auto; }
  .btn:hover,.tier:hover{ transform:none !important; }
  .tier-hi{ transform:none !important; }
  .frags{ display:none !important; }
  .frags-mobile{ display:grid !important; gap:12px; margin-top:40px; width:100%; }
  .frags-mobile li{ padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--glass); font-size:14px; color:var(--dim); }
  .problem{ min-height:0 !important; text-align:left; align-items:flex-start; }
  /* Timeline: everything visible at once */
  .tl-rail,.tl-marks{ display:none !important; }
  .tl-panes{ min-height:0 !important; display:grid; gap:14px; }
  .tl-pane{ position:static !important; opacity:1 !important; visibility:visible !important; }
  /* Stack: plain list */
  .stack{ display:grid; gap:12px; }
  .scard{ position:static !important; transform:none !important; margin-top:0 !important; }
  .obj-item{ opacity:1 !important; }
  .pull::before{ transform:scaleY(1) !important; }
  .mask .shot{ transform:none !important; }
  .memoji-up{ animation:none !important; }
  .hl{ background-size:100% .82em !important; }
  .seal-ring{ animation:none !important; }
  .kit-win, .kit-chip{ transform:none !important; opacity:1 !important; }
  .kit-phone{ transform:rotate(4deg) !important; opacity:1 !important; }
  .plaque-glow{ opacity:1 !important; }
  .mon-device{ transform:rotate(-4deg) !important; opacity:1 !important; }
  .device{ transform:none !important; opacity:1 !important; }
  .device-glow{ opacity:.85 !important; }
  .annot{ opacity:.8 !important; }
  .annot-arrow{ opacity:.5 !important; }
  .hero-h1 .char{ transform:none !important; opacity:1 !important; }
  .scroll-cue{ display:none; }
}

/* =========================================================================
   MOTION HOOKS - classes and desktop-only layout the GSAP timeline needs
   ========================================================================= */

.hero-h1 .word{ display:inline-block; white-space:nowrap; }
.hero-h1 .char{ display:inline-block; }

/* Section entry: hidden only when JS is present and motion is allowed. */
html.js .reveal{ opacity:0; }
html.js.no-motion .reveal{ opacity:1; }

.obj-item.is-past{ opacity:.3; }

@media (min-width:901px){
  /* Stacked card scale - sticky is the substrate, GSAP does the scaling. */
  .stack .scard{ position:sticky; }
  .stack .scard:nth-child(1){ top:calc(var(--navh) + 48px); }
  .stack .scard:nth-child(2){ top:calc(var(--navh) + 60px); }
  .stack .scard:nth-child(3){ top:calc(var(--navh) + 72px); }
  .stack .scard:nth-child(4){ top:calc(var(--navh) + 84px); }
  .stack .scard:nth-child(5){ top:calc(var(--navh) + 96px); }
  .stack .scard:nth-child(6){ top:calc(var(--navh) + 108px); }
  .scard + .scard{ margin-top:26px; }
  .stack{ padding-bottom:24vh; }
}
@media (prefers-reduced-motion: reduce){
  .stack .scard{ position:static !important; }
  .stack{ padding-bottom:0 !important; }
}

/* Pull-quote rule draws down when the quote enters view. */
.pull.is-drawn::before{ transform:scaleY(1); transition:transform .9s var(--ease); }
html:not(.js) .pull::before,
html.no-motion .pull::before{ transform:scaleY(1); }


/* =========================================================================
   MOBILE  (<= 700px)
   -------------------------------------------------------------------------
   ~90% of traffic arrives from Instagram, so the phone is the primary
   conversion surface. Everything below tunes the small end only - desktop
   rules are untouched. Sizes here are chosen for the phone, not scaled down
   from the desktop scale.
   ========================================================================= */

@media (max-width:700px){
  :root{
    --sec-y:64px;          /* was 88 - desktop rhythm reads as dead space here */
    --fs-mono:11.5px;
  }

  /* --- Type: mobile leading. Desktop runs 1.02–1.04, which is far too tight
         once a heading wraps to three or four lines on a phone. --- */
  h2{ line-height:1.14; }
  h3{ line-height:1.28; }
  .hero-h1{ font-size:36px; line-height:1.1; }   /* 5 lines -> 4, one per clause */
  .problem-h{ font-size:31px; line-height:1.16; }
  .seclabel{ margin-bottom:14px; }
  .sec-head{ margin-bottom:26px; gap:10px; }

  /* --- Nav: group the action and the menu together on the right --- */
  .nav-in{ gap:10px; }
  .nav-links{ margin-left:auto; }
  .nav-links .btn{ padding:10px 18px; font-size:13.5px; }
  .burger{ width:40px; margin-right:-10px; }

  /* --- Hero: the CTA must clear the fold without the page feeling packed --- */
  .hero{ padding-top:calc(var(--navh) + 24px); padding-bottom:44px; }
  .hero-eyebrow{ font-size:12px; margin-bottom:14px; }
  .hero-grid{ gap:26px; }
  .hero-sub{ margin-top:16px; line-height:1.45; max-width:none; }
  .hero-pts{ margin-top:20px; gap:10px; }
  .hero-pts li{ text-wrap:pretty; }   /* no single-word last lines */
  .hero-cta{ margin-top:24px; gap:10px; }
  .hero-micro{ margin-top:14px; }
  .hero-media{ max-width:none; }   /* full-column hero image reads deliberate;
                                      the fold is unaffected, it only adds scroll */
  .scroll-cue{ display:none; }   /* the peeking portrait already says "scroll" */

  /* --- CTAs: one consistent, comfortably tappable shape throughout --- */
  .btn{ padding:16px 22px; font-size:15px; }
  .btn-lg{ padding:18px 24px; }

  /* --- Founder --- */
  .founder-grid{ gap:24px; }
  .founder-copy h2{ margin-bottom:16px; }
  .founder .prose p + p{ margin-top:.9em; }
  .pull{ margin-top:24px; padding-left:20px; }
  .pull p{ font-size:19px; line-height:1.3; }
  .creds{ margin-top:24px; padding-top:16px; }

  /* --- What changes / the method: measures collapse to the column --- */
  .changes-h, .changes-lead, .changes-close{ max-width:none; }
  .changes-grid{ gap:32px; }
  .changes-visual{ width:min(100%,340px); }
  .method-body, .mon-lead{ max-width:none; }
  .method-plaque{ padding:28px 18px; }
  .mon-lead{ margin-top:14px; margin-bottom:26px; }
  .mon-device{ width:min(100%, 316px); margin-inline:auto; }
  .device{ padding:8px; border-radius:42px; }
  .device-screen{ border-radius:35px; }


  /* --- The method: everything collapses to the column --- */
  .method-body, .learn-h{ max-width:none; }
  .mstats{ gap:14px 12px; }
  .lcards{ gap:10px; }
  .lcard{ padding:10px; }
  .lcard-t{ font-size:14px; }

  /* --- Curriculum --- */
  .tl-panes{ gap:12px; }
  .tl-pane{ padding:22px 20px; }
  .tl-pane h3{ font-size:21px; }
  .tl-pane ul{ margin-top:16px; gap:10px; }

  /* --- Resource cards --- */
  .stackwrap h2{ margin-bottom:26px; }
  .stack{ gap:10px; }
  .scard{ padding:22px 20px; }
  .scard-n{ margin-bottom:10px; }

  /* --- Objections --- */
  .obj-grid{ gap:24px; }
  .obj-list{ gap:22px; }
  .obj-q{ font-size:20px; padding-bottom:10px; margin-bottom:10px; }

  /* --- Pricing --- */
  .tiers-wrap{ margin-top:36px; }
  .tiers{ gap:14px; }
  .tag{ font-size:11px; padding:6px 15px; }   /* 10px badge was under the floor */
  .tier{ padding:26px 20px; gap:12px; }
  .tier-list{ gap:10px; margin:6px 0 18px; }
  /* A full sentence in tracked uppercase mono is a one-line label on desktop but
     three cramped lines on a phone. Keep the mono voice, drop the shouting. */
  .tiers-note{
    margin-top:20px; text-transform:none;
    letter-spacing:.01em; font-size:12.5px; line-height:1.55;
  }

  /* --- FAQ --- */
  .faq h2{ margin-bottom:22px; }
  .fq-b{ padding:20px 2px; gap:14px; }
  .fq-t{ font-size:16.5px; }
  .fq-p p{ padding-bottom:22px; }

  /* --- Final CTA: full-width button, clearly separated --- */
  .final{ padding-block:76px 68px; }
  .final-in{ gap:18px; }
  .final-in > p{ width:100%; }
  .final .btn{ width:100%; }

  /* --- Footer --- */
  .foot{ padding-block:40px 26px; }
  .foot-legal{ margin-top:28px; }

  /* --- Perf: keep the grain texture, drop the 8fps full-screen repaint, and
         stop promoting ~70 reveal targets to their own layers. --- */
  .grain{ animation:none; opacity:.045; }
  .reveal{ will-change:auto; }


  /* The ch-based headline caps are desktop measures - at phone widths they are
     narrower than the column itself and force ragged breaks. */
  .founder-copy h2,
  .stackwrap h2,
  .obj-stand h2,
  .faq h2,
  .final-h{ max-width:none; }
}

@media (max-width:430px){
  /* Below this the two hero actions stop fitting side by side; full-width
     buttons are the better tap target anyway. */
  .hero-cta .btn{ flex:1 1 100%; }
}

/* New sections: hold their end state when motion is reduced */
@media (prefers-reduced-motion: reduce){
  .pod{ transform:none !important; }
}

/* New sections on mobile */
@media (max-width:700px){
  .tl-payoff{ margin-top:18px; padding-top:15px; font-size:14.5px; }
  .tl-badge{ font-size:11px; letter-spacing:.08em; padding:4px 8px; margin-top:6px; }
  .rewards h2, .rewards-sub{ max-width:none; }
  .podium{ gap:10px; margin-top:28px; }
  .pod{ padding:20px 18px; gap:8px; }
  .pod-medal{ font-size:26px; }
  .pod p{ font-size:15.5px; max-width:none; }
  .rwd{ padding:13px 2px; gap:14px; }
  .rwd-rank{ width:30px; }
  .rewards-foot{ margin-top:22px; }
}

/* ===== 6.16 SOCIAL-PROOF TOAST =========================================
   Bottom-left card, one at a time. Data comes from CONFIG.proof.events - 
   real first name + real purchase timestamp. The "x ago" string is computed
   from that timestamp, never authored, so it can't drift out of truth. */
.proof{
  position:fixed; z-index:80; left:clamp(12px,2vw,28px); bottom:clamp(12px,2vw,28px);
  width:min(360px,calc(100vw - 24px)); pointer-events:none;
}
.proof[hidden]{ display:none !important; }
.proof.is-top{ bottom:auto; top:calc(var(--nav-h,72px) + clamp(12px,1.6vw,20px)); }

.proof-card{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:14px; padding:14px 16px;
  border-radius:16px; border:1px solid rgba(229,171,255,.20);
  background:linear-gradient(180deg, rgba(30,20,42,.94), rgba(18,12,26,.94));
  box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  pointer-events:auto;
  opacity:0; translate:0 14px; transition:opacity .5s var(--ease), translate .5s var(--ease);
}
.proof-card.is-in{ opacity:1; translate:0 0; }

/* Live pip, top-left of the card */
.proof-pip{
  position:absolute; left:12px; top:12px; width:6px; height:6px; border-radius:50%;
  background:var(--lilac); box-shadow:0 0 10px var(--glow);
}
@media (prefers-reduced-motion: no-preference){
  .proof-pip{ animation:proof-pulse 2.4s ease-in-out infinite; }
}
@keyframes proof-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* Monogram disc - deliberately not a photograph. */
.proof-av{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:17px; color:var(--void);
  background:linear-gradient(145deg, hsl(var(--a,286) 78% 84%), hsl(var(--a,286) 62% 68%));
  border:1px solid rgba(255,255,255,.14);
}
.proof-body{ min-width:0; }
.proof-name{
  display:flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:700; font-size:15px; line-height:1.2; color:var(--paper);
}
.proof-tick{ width:13px; height:13px; flex:none; color:var(--lilac); }
.proof-act{
  margin-top:2px; font-size:13.5px; line-height:1.35; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proof-act b{ color:var(--paper); font-weight:600; }
.proof-when{ margin-top:3px; font-size:12px; letter-spacing:.01em; color:var(--dim); opacity:.85; text-transform:none; }

.proof-x{
  align-self:start; width:24px; height:24px; flex:none; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--dim);
  font-size:15px; line-height:1; cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease);
}
.proof-x:hover{ color:var(--paper); background:rgba(255,255,255,.07); }
.proof-x:focus-visible{ outline:2px solid var(--lilac); outline-offset:2px; }

@media (max-width:700px){
  .proof{ left:10px; right:10px; bottom:10px; width:auto; }
  .proof-card{ padding:12px 14px; gap:11px; border-radius:14px; }
  .proof-av{ width:38px; height:38px; font-size:15px; }
  .proof-name{ font-size:14px; }
  .proof-act{ font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){
  .proof-card{ translate:0 0; transition:opacity .3s linear; }
}

/* Course mockup is now a single supplied product shot (was a CSS-built window).
   The phone and Notion chip live inside the artwork, so .kit-win / .kit-phone /
   .kit-chip and their children are no longer rendered - see note in v2.html. */
.kit-shot{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 34px 64px rgba(0,0,0,.6));
}
@media (prefers-reduced-motion: reduce){ .kit-shot{ filter:none; } }

/* --- Reel covers + Instagram-style view count -------------------------
   .reel keeps its gradient as the fallback; a loaded cover paints over it,
   so a missing file degrades to the original placeholder instead of a gap. */
.reel-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; border-radius:inherit;
}
.reel-ph{ width:24%; height:24%; fill:hsl(var(--a) 100% 88% / .92); }
.reel:has(.reel-img) .reel-ph{ display:none; }

/* scrim so the count stays legible over a bright cover */
.reel-views{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:5px;
  padding:16px 8px 7px;
  font-size:11.5px; font-weight:600; color:#fff; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  border-radius:0 0 inherit inherit;
  pointer-events:none;
}
.reel-views svg{ width:11px; height:11px; flex:none; fill:#fff; }

@media (max-width:700px){
  .reel-views{ font-size:10px; padding:13px 6px 5px; gap:4px; }
  .reel-views svg{ width:9px; height:9px; }
}

/* --- Glow behind the course mockup ------------------------------------
   Sits under the artwork and breathes slowly, so the devices read as lit
   rather than pasted on. Separate from .course-glow, which lights the whole
   section from much higher up. */
.kit-glow{
  position:absolute; z-index:0; left:50%; top:50%;
  width:92%; aspect-ratio:1.7/1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    radial-gradient(46% 54% at 50% 50%, hsl(286 92% 64% / .34), transparent 70%),
    radial-gradient(36% 42% at 24% 64%, hsl(262 90% 62% / .26), transparent 72%),
    radial-gradient(32% 38% at 78% 34%, hsl(304 88% 66% / .22), transparent 74%);
  filter:blur(46px);
  will-change:transform, opacity;
}
.kit-shot{ position:relative; z-index:1; }
.kit-stage-method .cstill-note{ z-index:3; }

@media (prefers-reduced-motion: no-preference){
  .kit-glow{ animation:kitGlow 11s ease-in-out infinite; }
}
@keyframes kitGlow{
  0%,100%{ opacity:.72; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.06); }
}
@media (max-width:700px){ .kit-glow{ width:104%; filter:blur(34px); } }

/* "See what's inside" lands here. Lenis applies its own -navh offset; this
   covers the no-Lenis path (reduced motion / touch) where the browser's
   native scrollIntoView honours scroll-margin instead. */
#inside{ scroll-margin-top:calc(var(--navh) + 18px); }

/* The right still holds supplied artwork that already carries its own neon
   frame and a baked-in tilt - so no tile chrome and no extra rotation, or the
   two tilts compound. Sized larger than the abstract tile it replaced. */
.mstill-art{
  width:clamp(160px,17vw,260px);
  transform:none;
}
.mstill-art img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.55));
}
/* The artwork is wider than the tile it replaced, so it needs less negative
   offset or her face gets clipped by the section's overflow. */
.mstill-l.mstill-art{ left:-14px; }
/* The results card set carries small text, so it runs larger than the left
   still - and sits flush to the edge rather than bleeding past it, or the
   Brand Video card gets cut off by the section's overflow. */
.mstill-r.mstill-art{ right:0; width:clamp(200px,22vw,330px); }

/* --- Result cards holding real media --------------------------------
   Narrower on desktop so four 9:16 cards fit in one row without the
   section dominating the page. */
@media (min-width:900px){
  .res-card{ flex:0 0 clamp(200px,19vw,258px); }
}
.res-frame-img,
.res-frame-video{ padding:0; gap:0; background-image:none; }
.res-frame-img img,
.res-frame-video video{
  width:100%; height:100%; object-fit:cover;
  border-radius:inherit; display:block;
}
/* the native player needs to letterbox rather than crop its own controls */
.res-frame-video video{ object-fit:contain; background:#000; }

/* --- Custom play affordance on result videos -------------------------
   The frame rests with no native chrome; the button hands over to the
   browser's own controls on first click. */
.res-frame-video{ position:relative; }
.res-frame-video::after{           /* scrim so the button reads over any frame */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,5,14,.28), rgba(8,5,14,.52));
  border-radius:inherit;
  transition:opacity .28s var(--ease);
}
.res-frame-video.is-playing::after{ opacity:0; }

.res-play{
  position:absolute; inset:0; margin:auto; z-index:2;
  width:clamp(52px,20%,66px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(244,241,248,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 10px rgba(229,171,255,.12);
  transition:transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.res-play svg{ width:42%; height:42%; fill:var(--void); margin-left:8%; }
.res-play:hover{
  background:#fff; transform:scale(1.06);
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 0 14px rgba(229,171,255,.18);
}
.res-play:focus-visible{ outline:2px solid var(--lilac); outline-offset:4px; }
@media (prefers-reduced-motion: reduce){
  .res-play, .res-frame-video::after{ transition:none; }
  .res-play:hover{ transform:none; }
}

/* --- Bonus value tag -------------------------------------------------
   The figure is what the bonus is worth on its own; "Included" carries the
   point that none of it is charged for. Deliberately not a struck-through
   price, which would imply these were previously sold at that figure. */
.scard-value{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px;
}
.scard-worth{
  font-size:12px; letter-spacing:.04em;
  color:hsl(var(--a) 100% 86%); opacity:.85;
}
.scard-free{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  color:var(--cream);
  background:hsl(var(--a) 70% 60% / .16);
  border:1px solid hsl(var(--a) 90% 78% / .28);
}
@media (max-width:700px){
  .scard-value{ margin-top:10px; }
}

/* Eyebrow over the course-sales claim. Uses the page's existing mono label
   treatment, a little quieter than a section label since it sits inside one. */
.proof-eyebrow{
  margin-bottom:clamp(10px,1.1vw,16px);
  color:var(--lilac); opacity:.75;
}

/* =========================================================================
   MOBILE HERO ORDER
   -------------------------------------------------------------------------
   Phone only. Scoped entirely to max-width:899px - the two-column desktop
   hero starts at 900px, so nothing above that breakpoint is touched.

   The media is a sibling of .hero-copy, so it cannot be moved between the
   subhead and the buttons by ordering alone. display:contents promotes the
   copy's children into the hero grid for this breakpoint only, letting all
   six items be ordered together. .hero-glow sits at z-index:-1, so losing
   .hero-copy's stacking context here changes nothing.

   Grid gap goes to 0 because the elements already carry their own margins;
   leaving it on would double every gap once they become grid items.
   ========================================================================= */
@media (max-width:899px){
  .hero-copy{ display:contents; }
  .hero-grid{ gap:0; }

  .hero-pts{ display:none; }          /* the media does this job on phone */

  .hero-eyebrow{ order:1; }
  .hero-h1    { order:2; }
  .hero-sub   { order:3; }
  .hero-media { order:4; margin-top:clamp(18px,4vw,24px); }
  .hero-cta   { order:5; }
  .hero-micro { order:6; }

  /* Centred column on phone/tablet: a single narrow measure reads better
     centred than ragged-left, and it puts the CTA on the optical centre. */
  .hero-eyebrow,
  .hero-h1,
  .hero-sub,
  .hero-micro { text-align:center; }
  .hero-sub   { margin-inline:auto; }
  .hero-cta   { justify-content:center; }

  /* Headline up, subhead down - the subhead was competing with it at the
     shared lead size. */
  .hero-h1 { font-size:clamp(38px, 9.2vw, 58px); }
  .hero-sub{ font-size:clamp(15px, 4vw, 17px); max-width:30ch; }

  /* 16:9 placeholder, full column width - the client's hero video is
     landscape, so the box matches what will sit in it. Replaces the 4:5
     crop, which at full width was 414px tall and pushed the CTA to the fold. */
  .hero-media .shot{
    aspect-ratio:16/9; height:auto; width:100%; margin-inline:auto;
  }
}

/* =========================================================================
   MOBILE / TABLET - course-sales band
   Phone and tablet only (max-width:899px). Desktop untouched.

   Same approach as the hero: .proof-visual is a sibling of .proof-copy, so
   the phone cannot sit between the stat and the button by ordering alone.
   display:contents promotes the copy's children into the band's grid here.

   NOTE the existing warning above .proof-visual - justify-self:center makes
   it shrink-to-fit, and .mon-device's width:min(100%,…) then resolves against
   nothing and collapses. The column stays stretched; the device is narrowed
   by its own width and centred with margin-inline.
   ========================================================================= */
@media (max-width:899px){
  .proof-copy{ display:contents; }
  .proof-band{ gap:0; text-align:center; }

  .proof-eyebrow{ order:1; }
  .proof-lead   { order:2; margin-inline:auto; }
  .proof-sub    { order:3; justify-self:center; }  /* pill: shrink-to-fit is right */
  .mon-num      { order:4; }
  .mon-lead     { order:5; margin-inline:auto; }
  .proof-visual { order:6; margin-top:clamp(22px,5vw,32px); }
  .changes-cta  { order:7; }

  .proof-band .changes-cta{ text-align:center; }
  .proof-visual .mon-device{ width:min(100%, 210px); }
}

/* =========================================================================
   TESTIMONIALS GRID  (.res - replaces the results carousel)
   -------------------------------------------------------------------------
   Desktop: video | 2×2 text | video. The two video cards are pinned to the
   outer columns (rv--a / rv--b) and set the row height through their 9:16
   frame; text cards flow into the middle columns and stretch to match.
   Tablet/phone: the two videos share the first row, text cards stack.
   ========================================================================= */
.res-grid{
  list-style:none; margin:clamp(28px,3.4vw,44px) 0 0; padding:0;
  display:grid; gap:clamp(12px,1.3vw,18px);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:900px){
  .res-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1fr);
    grid-auto-flow:row dense;
  }
  .rv{ display:flex; min-height:clamp(440px, 38vw, 560px); }
  .rv-frame{ aspect-ratio:auto; height:auto; flex:1; }
  .rv--a{ grid-column:1; grid-row:1 / span 2; }
  .rv--b{ grid-column:4; grid-row:1 / span 2; }
  .rv:not(.rv--a):not(.rv--b){ grid-row:span 2; }
}

/* ---- video card ---- */
.rv{ min-width:0; }
/* Width always comes from the column. On phone/tablet the 9:16 ratio then
   sets the height; on desktop the card spans two grid rows and fills them - 
   combining a definite height WITH the ratio makes the ratio compute the
   width instead, and the frame overflows into the next column. */
.rv-frame{
  position:relative; width:100%;
  aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--r); background:#120c1a;
  box-shadow:0 18px 40px rgba(11,7,16,.16);
}
.rv-frame video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:#000;
}
.rv-frame.is-playing video{ object-fit:contain; }
.rv-empty{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px;
  padding:18px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(229,171,255,.22), transparent 62%),
    linear-gradient(160deg, rgba(124,63,174,.55), #140d1d);
}
.rv-empty .shot-ic{ width:30px; height:30px; color:var(--lilac); opacity:.8; }
.rv-empty .mono{ font-size:10px; letter-spacing:.1em; color:rgba(244,241,248,.7); }

.rv-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:40px clamp(12px,1.2vw,16px) clamp(12px,1.2vw,16px);
  background:linear-gradient(to top, rgba(8,5,14,.86), rgba(8,5,14,.5) 55%, transparent);
  color:#fff; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.rv-frame.is-playing .rv-meta{ opacity:0; }
.rv-quote{ font-size:14px; line-height:1.45; margin-bottom:12px; }
.rv-who, .rt-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.rv-id, .rt-id{ display:grid; gap:1px; min-width:0; }
.rv-id b, .rt-id b{ font-size:14px; font-weight:700; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-id span{ font-size:12px; color:rgba(244,241,248,.72); }
.rv-av, .rt-av{
  width:34px; height:34px; flex:none; border-radius:50%; object-fit:cover;
}
.rv-av{ border:1.5px solid rgba(255,255,255,.7); }
.rv-av--init, .rt-av--init{
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:13px;
}
.rv-av--init{ background:rgba(229,171,255,.9); color:var(--void); }
/* the shared play button sits above the meta scrim */
.rv .res-play{ z-index:2; }

/* ---- text card ---- */
.rt{
  display:flex; flex-direction:column; gap:14px; min-width:0;
  padding:clamp(16px,1.6vw,22px);
  border-radius:var(--r);
  background:#fff; border:1px solid var(--line-light);
  box-shadow:0 1px 0 rgba(11,7,16,.03);
}
.rt-stars{ display:flex; gap:3px; color:var(--lilac-ink); }
.rt-stars svg{ width:15px; height:15px; fill:currentColor; }
.rt-quote{
  margin:0; font-size:15px; line-height:1.55; color:var(--void); text-wrap:pretty;
}
.rt-quote--empty{ font-size:10px; letter-spacing:.1em; color:var(--dim-light); }
.rt-who{ margin-top:auto; padding-top:4px; }
.rt-id b{ color:var(--void); }
.rt-id span{ font-size:12px; color:var(--dim-light); }
.rt-av--init{ background:#efe7f5; color:var(--lilac-ink); }
.rt.is-empty{ background:transparent; border-style:dashed; justify-content:center; }
.rt.is-empty .rt-who{ display:none; }

/* ---- tablet / phone ---- */
@media (max-width:899px){
  .rv--a, .rv--b{ grid-row:auto; }
  .rt{ grid-column:1 / -1; order:1; }  /* both videos side by side first, then the text cards */
  .rt.is-empty{ min-height:96px; }
  .rv-quote{ display:none; }          /* too small to read over a half-width video */
  .rv-meta{ padding:30px 10px 10px; }
  .rv-id b{ font-size:12.5px; }
  .rv-id span{ font-size:11px; }
  .rv-av{ width:28px; height:28px; }
}
@media (min-width:560px) and (max-width:899px){
  .rt{ grid-column:auto; }            /* two text cards per row on tablets */
}
@media (prefers-reduced-motion: reduce){ .rv-meta{ transition:none; } }

/* ---- phone: two videos + two text cards, the rest behind "See more" ---- */
.res-more-wrap{ display:none; }
@media (max-width:559px){
  /* Which two text cards show before "See more" is otherwise just DOM order,
     i.e. the admin's order, which is set for the desktop grid. On a phone the
     client wants Ruth in the second slot and Memzopatt last, so Ruth is
     exempt from the fold and Memzopatt is folded away. Keyed by id: remove
     either card in the admin and the generic rule still shows a sensible
     first two. Phone only - the desktop grid is untouched. */
  .res-grid:not(.is-open) .rt ~ .rt ~ .rt:not([data-id="t-ruth"]){ display:none; }
  .res-grid:not(.is-open) .rt[data-id="t-memzopatt"]{ display:none; }
  .rt[data-id="t-ruth"]{ order:2; }
  .rt[data-id="t-lucianna"]{ order:3; }
  .rt[data-id="t-memzopatt"]{ order:4; }
  .res-grid.is-open .rt ~ .rt ~ .rt, .res-grid.is-open .rt[data-id="t-memzopatt"]{ animation:res-in .45s ease-out both; }
  .res-more-wrap{ display:flex; justify-content:center; margin:20px 0 0; }
  .res-more-wrap[hidden]{ display:none; }
  .res-more{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:999px;
    border:1px solid rgba(20,12,30,.18); background:#fff; color:var(--void);
    font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  }
  .res-more::after{
    content:""; width:7px; height:7px; margin-top:-4px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
  }
  .res-more:focus-visible{ outline:2px solid var(--lilac-ink); outline-offset:3px; }
}
@keyframes res-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .res-grid.is-open .rt ~ .rt ~ .rt{ animation:none; } }
.res-grid .rt[tabindex="-1"]:focus{ outline:none; box-shadow:none; }

/* ---- phone: proof headline matches the problem headline; hero breathes before the ticker ---- */
@media (max-width:700px){
  .proof-lead{ font-size:31px; line-height:1.16; }
  .hero{ padding-bottom:76px; }
  /* Five quotes is a long scroll on a phone - the first three make the point. */
  .frags-mobile li:nth-child(n+4){ display:none; }
}

/* =========================================================================
   SCROLL PERFORMANCE
   -------------------------------------------------------------------------
   Everywhere: elements moved by scrubbed ScrollTriggers get their own layer,
   so their filters (the mockup's 64px drop-shadow, the glows' blur) are
   rasterised once instead of on every scroll frame.
   Phones / touch: backdrop blur is recomputed each frame for every glass
   card on screen and the full-viewport grain is blended over the whole page
   each frame. Over these near-solid dark backgrounds the blur is not
   visible, so it is dropped; the 5% grain is imperceptible on a phone.
   ========================================================================= */
.kit-shot, .frag, .final-glow, .hero-glow{ will-change:transform; }

@media (max-width:900px), (hover:none) and (pointer:coarse){
  .frag, .tl-pane, .pod, .scard, .tier, .proof-card, .kit-chip{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav.is-stuck{
    background:rgba(21,14,29,.92);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .grain{ display:none; animation:none; }
}

/* ---- phone: three course points, not four ---- */
@media (max-width:700px){
  .cfeats .cfeat:first-child{ display:none; }
  .cfeats{ margin-top:76px; }          /* the mockup drifts down up to 46px while scrolling */
}