/* The Acceptance Reset Method — site v2 shared system.
   Brand: cream #FCF5DD · deep green #31553F · sage #8A9B85 · pop #51B788.
   Fraunces (display) + Poppins (body). Motion vocabulary = calm, slow, settling
   ("let the wave pass") — see MOTION-UX-FINDINGS.md. */
:root{
  /* PALETTE A "Deep Forest" (Zak-chosen 2026-07-13) — richer/bolder brand, crisp emerald.
     --accent is the per-page theme hook; each guide overrides it (defaults to brand pop). */
  --cream:#FBF3D7; --cream-soft:#F5ECCF; --cream-deep:#EEE4C4;
  --green:#234A34; --green-deep:#163024; --night:#0A1611;
  --sage:#7E9384; --pop:#10B981; --pop2:#46D9A0;
  --ink:#14271C; --ink-soft:rgba(20,39,28,.74);
  --accent:#10B981; --accent2:#46D9A0; --radius:22px;
  /* the single calm ease — steep-but-gentle settle, never linear/bouncy */
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--cream);color:var(--ink);font-family:Poppins,sans-serif;font-size:16.5px;line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:Fraunces,serif;color:var(--green);letter-spacing:-.018em;font-optical-sizing:auto}
h1,h2{font-weight:900}
h3{font-weight:800}
.g-cta .price,.fact b,.nav-word,.footer-brand{letter-spacing:-.02em}
a{color:var(--green)}
em{font-style:italic}
section{position:relative}
.wrap{width:min(1120px,calc(100% - 44px));margin:0 auto}
.wrap-tight{width:min(760px,calc(100% - 44px));margin:0 auto}

/* grain — the film layer */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* glass */
.glass{background:rgba(252,245,221,.62);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(49,85,63,.14);border-radius:var(--radius);box-shadow:0 14px 44px rgba(49,85,63,.10)}

/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90;width:min(1140px,calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-mark{width:30px;height:30px}
.nav-word{font-family:Fraunces,serif;font-weight:700;font-size:17px;color:var(--green)}

/* header links — the middle of the glass pill was empty until now */
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{position:relative;font-family:Poppins,sans-serif;font-weight:600;font-size:14px;
  color:var(--ink-soft);text-decoration:none;padding:6px 0;white-space:nowrap;
  transition:color .25s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pop),var(--pop2));transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--green)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.is-here{color:var(--green)}
.nav-links a.is-here::after{transform:scaleX(1)}

.nav-end{display:flex;align-items:center;gap:10px}

/* burger — desktop-hidden, the only nav affordance under 900px */
.nav-burger{display:none;width:42px;height:42px;padding:0;border:0;border-radius:12px;cursor:pointer;
  background:rgba(35,74,52,.07);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--green);
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the mobile sheet */
html.nav-locked,html.nav-locked body{overflow:hidden}
/* ⚠️ THE [hidden] RULE IS LOAD-BEARING — DO NOT REMOVE.
   `.nav-sheet{display:flex}` is a class selector, so it BEATS the browser's built-in
   `[hidden]{display:none}`. Without this line the closed sheet still renders: a full-screen,
   invisible (opacity:0), pointer-events:auto overlay at z-index 80 sitting on top of every
   page — swallowing every click in the page body and firing the menu links underneath it.
   It shipped live and broke the download buttons AND the Starter Stack CTAs sitewide.
   The :not(.is-open) guard covers the 350ms fade-out, when [hidden] is not yet re-applied. */
.nav-sheet[hidden]{display:none}
.nav-sheet:not(.is-open){pointer-events:none}
.nav-sheet.is-open{pointer-events:auto}
.nav-sheet{position:fixed;inset:0;z-index:80;background:var(--cream);overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s var(--ease)}
.nav-sheet.is-open{opacity:1}
.nav-sheet-in{width:min(520px,calc(100% - 44px));padding:104px 0 48px}
.nav-sheet-links{display:flex;flex-direction:column}
.nav-sheet-links a{font-family:Fraunces,serif;font-weight:700;font-size:clamp(26px,7vw,34px);
  color:var(--green);text-decoration:none;padding:15px 0;
  border-bottom:1px solid rgba(35,74,52,.12);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.nav-sheet-links a.is-here{color:var(--pop)}
.nav-sheet.is-open .nav-sheet-links a{opacity:1;transform:none}
.nav-sheet.is-open .nav-sheet-links a:nth-child(1){transition-delay:.05s}
.nav-sheet.is-open .nav-sheet-links a:nth-child(2){transition-delay:.10s}
.nav-sheet.is-open .nav-sheet-links a:nth-child(3){transition-delay:.15s}
.nav-sheet.is-open .nav-sheet-links a:nth-child(4){transition-delay:.20s}
.nav-sheet.is-open .nav-sheet-links a:nth-child(5){transition-delay:.25s}
.nav-sheet.is-open .nav-sheet-links a:nth-child(6){transition-delay:.30s}
/* ---- FREE dropdown in the header (no JS: hover + :focus-within) ---- */
.nav-dd{position:relative}
.nav-dd-trigger{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,.10);
  border:0;cursor:pointer;font-family:Poppins,sans-serif;font-weight:700;font-size:14px;
  color:var(--pop-ink,#047857);padding:7px 13px;border-radius:99px;
  box-shadow:inset 0 0 0 1.5px rgba(4,120,87,.34);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
.nav-dd-trigger svg{transition:transform .25s var(--ease)}
.nav-dd:hover .nav-dd-trigger,.nav-dd:focus-within .nav-dd-trigger{background:rgba(16,185,129,.18);
  box-shadow:inset 0 0 0 1.5px rgba(4,120,87,.6)}
.nav-dd:hover .nav-dd-trigger svg,.nav-dd:focus-within .nav-dd-trigger svg{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:300px;background:#fff;border-radius:16px;padding:12px;
  box-shadow:0 24px 60px -18px rgba(20,39,28,.4),0 0 0 1px rgba(35,74,52,.08);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav-dd-panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;
  pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dd-head{display:block;font-family:Poppins,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sage);padding:6px 10px 9px}
.nav-dd-item{display:block;padding:10px 10px;border-radius:11px;text-decoration:none;
  transition:background .2s var(--ease)}
.nav-dd-item:hover{background:rgba(16,185,129,.09)}
.nav-dd-item::after{display:none}
.nav-dd-name{display:block;font-family:Fraunces,serif;font-weight:700;font-size:15.5px;color:var(--green)}
.nav-dd-meta{display:block;font-family:Poppins,sans-serif;font-size:11.5px;color:var(--sage);margin-top:2px}
/* mobile sheet — the three doors, listed explicitly */
.nav-sheet-freewrap{margin-top:22px;padding-top:18px;border-top:1px solid rgba(35,74,52,.14)}
.nav-sheet-freehead{display:block;font-family:Poppins,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:8px}
.nav-sheet-free{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:Fraunces,serif;font-weight:700;font-size:clamp(19px,5vw,23px);color:var(--green);
  text-decoration:none;padding:11px 0;border-bottom:1px solid rgba(35,74,52,.10)}
.nav-sheet-free em{font-family:Poppins,sans-serif;font-style:normal;font-size:11.5px;
  font-weight:600;color:var(--sage);white-space:nowrap}
.nav-sheet-cta{display:block;margin-top:28px;opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease) .35s,transform .45s var(--ease) .35s}
.nav-sheet.is-open .nav-sheet-cta{opacity:1;transform:none}

/* 1080px, not 900 — measured 2026-07-17 after adding Terms/Privacy (4→6 nav items): the pill row
   collides with the CTA button starting ~960px (zero gap measured via getBoundingClientRect at
   1010px = 22px, at 960px = overlap). 1080px keeps real margin at the switch point rather than
   the old 900px cutoff, which was sized for 4 items and never re-measured for 6. */
@media(max-width:1080px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media(max-width:560px){
  .nav-word{font-size:14px}
  /* keep the money CTA on mobile — just make it earn its width */
  .nav-cta{padding:8px 12px;font-size:12px;border-radius:10px}
  .nav-end{gap:8px}
}
@media(max-width:400px){.nav-word{display:none}}  /* butterfly still carries the brand */

@media(prefers-reduced-motion:reduce){
  .nav-links a::after,.nav-burger span,.nav-sheet,
  .nav-sheet-links a,.nav-sheet-cta{transition:none}
}

/* buttons — high-contrast CTAs, NO ghost buttons (research: outline-only buttons go unclicked) */
.btn{display:inline-block;font-weight:700;font-size:15.5px;text-decoration:none;border-radius:14px;
  padding:14px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease);text-align:center;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:11px}
/* Gumroad's overlay widget (2026-08-08) appends an empty <span class="logo-full"> inside
   every buy link it processes. Their stylesheet only paints it inside a.gumroad-button —
   a class we never use — so today it is invisible. Belt and braces, so a change on their
   side can never drop a Gumroad logo into our CTA. */
.btn .logo-full{display:none}
/* ---- CTA HIERARCHY (2026-07-27, Zak): paid leads and GLOWS, free is deliberately quiet.
   Rank, loudest first:  .btn-buy  >  .btn-tier  >  .btn-soft  >  .btn-free  ---- */
/* primary money CTA — glowing green + a slow living pulse */
.btn-buy{background:linear-gradient(135deg,var(--pop),var(--pop2));color:#08130D;font-weight:800;
  box-shadow:0 0 0 1px rgba(38,120,86,.34),0 10px 26px rgba(81,183,136,.55),
             0 0 34px rgba(111,214,160,.62),0 0 70px rgba(81,183,136,.34);
  animation:btnpulse 3.4s var(--ease) infinite}
.btn-buy:hover{box-shadow:0 0 0 1px rgba(38,120,86,.44),0 16px 40px rgba(81,183,136,.7),
             0 0 48px rgba(111,214,160,.85),0 0 100px rgba(81,183,136,.48);animation:none}
@keyframes btnpulse{
  0%,100%{box-shadow:0 0 0 1px rgba(38,120,86,.34),0 10px 26px rgba(81,183,136,.55),
                     0 0 34px rgba(111,214,160,.62),0 0 70px rgba(81,183,136,.34)}
  50%    {box-shadow:0 0 0 1px rgba(38,120,86,.42),0 12px 32px rgba(81,183,136,.66),
                     0 0 46px rgba(111,214,160,.85),0 0 94px rgba(81,183,136,.5)}
}
/* the other paid tiers — solid, lit, clearly clickable, but quieter than the $47 */
.btn-tier{background:#fff;color:var(--green);font-weight:800;
  box-shadow:inset 0 0 0 1.6px rgba(38,120,86,.42),0 8px 24px rgba(35,74,52,.16),
             0 0 26px rgba(81,183,136,.28)}
.btn-tier:hover{box-shadow:inset 0 0 0 1.6px rgba(38,120,86,.66),0 12px 32px rgba(35,74,52,.22),
             0 0 40px rgba(81,183,136,.45)}
/* secondary — TINTED FILL, not a ghost outline (still subordinate to primary) */
.btn-soft{background:rgba(49,85,63,.10);color:var(--green);
  box-shadow:inset 0 0 0 1.4px rgba(49,85,63,.24),0 6px 18px rgba(35,74,52,.10)}
.btn-soft:hover{background:rgba(49,85,63,.16);
  box-shadow:inset 0 0 0 1.4px rgba(49,85,63,.4),0 10px 26px rgba(35,74,52,.16)}
/* free CTA — DELIBERATELY SUBTLE. No glow, no fill: the free guides should be findable,
   not competing with the paid ladder. (Was a white glowing button until 2026-07-27.) */
.btn-free{background:transparent;color:var(--green);font-weight:700;
  box-shadow:inset 0 0 0 1.3px rgba(49,85,63,.30)}
.btn-free:hover{background:rgba(49,85,63,.07);
  box-shadow:inset 0 0 0 1.3px rgba(49,85,63,.5)}
.btn-onnight{background:rgba(252,245,221,.14);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(252,245,221,.35)}
.btn-onnight:hover{background:rgba(252,245,221,.22)}

/* pills / eyebrows */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--sage);text-transform:uppercase}
.pill{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 55%,var(--ink));background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  padding:7px 15px;border-radius:99px}

/* ======================= GUIDE PAGE ======================= */

/* HERO */
.g-hero{background:linear-gradient(180deg,#FDF8E7 0%,var(--cream) 60%,var(--cream-deep) 100%);
  padding:132px 0 74px;overflow:hidden}
.g-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
@media(max-width:900px){.g-hero-grid{grid-template-columns:1fr;gap:30px;text-align:center}}
.g-hero h1{font-size:clamp(40px,6vw,72px);line-height:1.02;margin:18px 0 16px}
.g-hero .branded{font-family:Fraunces,serif;font-style:italic;color:var(--sage);font-size:clamp(17px,2.3vw,21px);margin-bottom:18px;display:block}
.g-hero .lede{font-size:17.5px;color:var(--ink-soft);max-width:540px;margin-bottom:30px}
@media(max-width:900px){.g-hero .lede{margin-inline:auto}}
.g-hero-ctas{display:flex;gap:13px;flex-wrap:wrap}
@media(max-width:900px){.g-hero-ctas{justify-content:center}}
.g-hero-proof{margin-top:22px;font-size:13.5px;color:var(--sage)}
.g-hero-proof b{color:var(--green)}
.g-hero-art{position:relative;display:flex;justify-content:center}
.g-hero-art img{width:min(360px,80%);filter:drop-shadow(0 34px 60px rgba(49,85,63,.34))}
.g-hero-art::after{content:"";position:absolute;inset:auto 8% -6% 8%;height:40px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(49,85,63,.18),transparent 70%);z-index:-1}

/* generic section rhythm */
.g-sec{padding:78px 0}
.g-sec h2{font-size:clamp(29px,4.3vw,46px);line-height:1.08;margin-bottom:14px}
.g-sec .sub{color:var(--ink-soft);max-width:620px;margin-bottom:34px}
.g-eyebrow-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}

/* HERO cinematic waves (parallax depth) */
.g-hero{position:relative}
.g-hero-waves{position:absolute;inset:auto 0 -2px 0;height:46vh;z-index:0;pointer-events:none;opacity:.9}
.g-hero-waves .hw{position:absolute;bottom:0;left:-10%;width:120%;height:100%}
.g-hero-waves .hw1 path{fill:var(--sage);opacity:.20}
.g-hero-waves .hw2 path{fill:var(--green);opacity:.14}
.g-hero-waves .hw3 path{fill:var(--pop);opacity:.12}
.g-hero-grid,.g-hero .g-hero-art{position:relative;z-index:2}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:24px;height:40px;
  border:2px solid rgba(49,85,63,.28);border-radius:13px}
.scroll-cue span{position:absolute;top:7px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:3px;
  background:var(--accent);animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(13px);opacity:.2}}

/* split-text: words rise out of a mask */
.split .word{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.02;padding-bottom:.06em}
.split .word-i{display:inline-block}

/* NIGHT — descent into 3am. Base = static readable dark card; .cinema = pinned stage
   where the beats CROSSFADE in place under a clock sweeping to 3:07 (no collision). */
.g-night{position:relative;background:var(--night);color:var(--cream)}
.night-stage{position:relative;overflow:hidden;padding:66px 22px;text-align:center}
.cinema .night-stage{height:100vh;padding:0}
.night-sky{position:absolute;inset:0;background:radial-gradient(140% 100% at 50% 4%,color-mix(in srgb,var(--accent) 16%,var(--night)) 0%,var(--night) 55%,#040706 100%)}
.night-stars{position:absolute;inset:0;opacity:.8;background-image:
  radial-gradient(1.6px 1.6px at 18% 24%,rgba(252,245,221,.7) 50%,transparent 51%),
  radial-gradient(1.1px 1.1px at 68% 16%,rgba(252,245,221,.55) 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 42% 58%,rgba(252,245,221,.45) 50%,transparent 51%),
  radial-gradient(1px 1px at 83% 46%,rgba(252,245,221,.5) 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 12% 72%,rgba(252,245,221,.4) 50%,transparent 51%),
  radial-gradient(1.1px 1.1px at 90% 78%,rgba(252,245,221,.45) 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 55% 32%,rgba(252,245,221,.4) 50%,transparent 51%)}
.cinema .night-stars{opacity:0}
.night-vignette{position:absolute;inset:0;box-shadow:inset 0 0 200px 70px rgba(0,0,0,.5);pointer-events:none}
.night-motif{position:relative;margin:0 auto 30px;width:120px;height:120px;opacity:1;z-index:2;color:var(--accent2)}
.cinema .night-motif{position:absolute;top:12vh;left:50%;transform:translateX(-50%);margin:0;opacity:0}
.night-eyebrow{position:relative;z-index:2;display:block;color:var(--sage);margin-bottom:24px}
.cinema .night-eyebrow{position:absolute;top:30vh;left:0;right:0;margin:0}
.night-beats{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cinema .night-beats{position:absolute;top:34vh;left:50%;transform:translateX(-50%);width:min(660px,88vw);height:56vh}
.night-beat{font-family:Fraunces,serif;font-weight:700;color:var(--cream);font-size:clamp(21px,2.9vw,31px);
  line-height:1.42;letter-spacing:-.01em;margin:0 auto 22px}
.cinema .night-beat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;opacity:0}
.night-beat strong{color:var(--accent2);font-weight:700}
.night-beat em{color:var(--sage)}

/* FREE LAYER — the genuinely-useful card, with the wave that "passes" on scroll */
.g-free{background:var(--green);color:var(--cream);position:relative;overflow:hidden}
.g-free-waves{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.free-wave{position:absolute;left:-10%;width:120%;height:60%}
.free-wave.fw1{bottom:0}.free-wave.fw1 path{fill:var(--accent);opacity:.16}
.free-wave.fw2{bottom:-6%}.free-wave.fw2 path{fill:var(--accent2);opacity:.12}
.g-free .wrap-tight{position:relative;z-index:2}
.g-free h2{color:var(--cream)}
.g-free .sub{color:rgba(252,245,221,.8)}
.g-free-card{background:rgba(252,245,221,.07);border:1px solid rgba(252,245,221,.18);border-radius:var(--radius);
  padding:34px 34px 30px}
.g-free .reframe p{color:rgba(252,245,221,.9);font-size:16.5px;margin-bottom:16px;max-width:660px}
.g-free .reframe strong{color:#fff}
.g-steps{list-style:none;counter-reset:s;margin-top:8px}
.g-steps li{position:relative;padding:16px 0 16px 52px;border-top:1px solid rgba(252,245,221,.14)}
.g-steps li:first-child{border-top:0}
.g-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:15px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:Fraunces,serif;font-weight:700;
  background:var(--accent);color:#08130D;font-size:15px}
.g-steps li b{color:#fff}
.g-free-foot{margin-top:26px;font-size:15px;color:rgba(252,245,221,.72);max-width:680px}
.g-free-foot strong{color:var(--accent2)}

/* WHAT'S INSIDE — self-truing facts + real crops */
.g-inside{background:var(--cream-deep)}
.g-inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:900px){.g-inside-grid{grid-template-columns:1fr;gap:30px}}
.facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.fact{background:#fff;border:1px solid rgba(49,85,63,.1);border-radius:16px;padding:18px 20px}
.fact b{display:block;font-family:Fraunces,serif;font-weight:900;font-size:30px;color:var(--accent);line-height:1}
.fact span{font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.g-inside ul.plain{list-style:none;margin:6px 0 26px}
.g-inside ul.plain li{padding:8px 0 8px 26px;position:relative;font-size:15.5px;border-bottom:1px dashed rgba(49,85,63,.14)}
.g-inside ul.plain li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
/* ⛔ 2026-08-16 — .g-crops img had NO width rule. An <img loading="lazy"> that has not loaded
   has no intrinsic size, so with width:auto it laid out at 0x0; a 0x0 box never intersects the
   viewport, so the lazy load never fired, so it stayed 0x0. A deadlock. On desktop the section
   sits high enough that the images load anyway; on mobile this whole strip collapsed to 16px
   and a phone visitor saw NOTHING on the one guide page that is in the sitemap.
   width:100% + height:auto + an aspect-ratio give every cell a real box before the bytes land.
   Three columns also starved each cell to ~107px on a phone, which is 2.9 CSS px of body type
   against a floor of 8 — two columns is what build_guide_shots.py now crops against. */
.g-crops{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.g-crops img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  object-position:top;border-radius:12px;box-shadow:0 16px 34px rgba(49,85,63,.2);
  border:1px solid rgba(49,85,63,.08)}
.g-crops img:first-child{grid-column:span 2;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* WHO IT'S FOR */
.g-who{background:var(--cream)}
.g-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}
@media(max-width:760px){.g-who-grid{grid-template-columns:1fr}}
.g-who-col{padding:28px}
.g-who-col h3{font-size:19px;margin-bottom:14px}
.g-who-col ul{list-style:none}
.g-who-col li{padding:9px 0 9px 28px;position:relative;font-size:15.5px;border-bottom:1px dashed rgba(49,85,63,.13)}
.g-who-col li:last-child{border-bottom:0}
.g-who-col.yes li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.g-who-col.no li::before{content:"–";position:absolute;left:2px;color:var(--sage);font-weight:700}
.g-who-col.no{background:rgba(138,155,133,.1);border:1px solid rgba(138,155,133,.2)}
.overlap-note{font-size:14.5px;color:var(--ink-soft);background:color-mix(in srgb,var(--accent) 10%,transparent);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:16px 20px}
.overlap-note a{font-weight:600}

/* FAQ — accordion micro-interaction */
.g-faq{background:var(--cream-deep)}
.faq-item{border-bottom:1px solid rgba(49,85,63,.14)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:Fraunces,serif;font-weight:700;font-size:18px;color:var(--green);line-height:1.35}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;
  color:var(--accent);transition:transform .3s var(--ease)}
.faq-item.open .faq-q::after{content:"–";transform:translateY(-50%) rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 10px 24px 0;color:var(--ink-soft);font-size:15.5px;line-height:1.66}

/* CTA BLOCK — single focus, earned */
.g-cta{background:linear-gradient(160deg,var(--green) 0%,var(--green-deep) 100%);color:var(--cream);text-align:center}
.g-cta h2{color:var(--cream);font-size:clamp(28px,4vw,44px);margin-bottom:10px}
.g-cta .price{font-family:Fraunces,serif;font-weight:900;font-size:46px;color:var(--accent2);margin:14px 0 4px;
  text-shadow:0 0 34px color-mix(in srgb,var(--accent2) 55%,transparent)}
.g-cta .price .was{font-size:18px;color:rgba(252,245,221,.5);font-weight:400;margin-left:10px}
.g-cta .guarantee{font-size:14px;color:rgba(252,245,221,.72);margin-top:18px}
.g-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.g-cta .ladder{margin-top:30px;font-size:14.5px;color:rgba(252,245,221,.72)}
.g-cta .ladder a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* COMPLIANCE RAIL */
.g-rail{background:var(--night);color:rgba(252,245,221,.66);padding:44px 0}
.g-rail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
@media(max-width:760px){.g-rail-grid{grid-template-columns:1fr}}
.g-rail h4{font-family:Fraunces,serif;color:var(--cream);font-size:15px;margin-bottom:7px}
.g-rail p{font-size:13px;line-height:1.55}

/* FOOTER */
.footer{background:var(--night);color:rgba(252,245,221,.72);text-align:center;padding:56px 22px 46px;
  border-top:1px solid rgba(252,245,221,.08)}
.footer-brand{font-family:Fraunces,serif;font-weight:700;color:var(--cream);font-size:19px;margin-bottom:20px;
  display:inline-flex;align-items:center;gap:10px}
.footer-brand img{width:26px;height:26px}
.footer-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.footer-links a{color:var(--cream);text-decoration:none;font-size:14px;border-bottom:1px solid rgba(252,245,221,.22);padding-bottom:2px}
.footer-line{font-size:12.5px;max-width:600px;margin:0 auto 8px;color:rgba(252,245,221,.48)}
.footer-copy{font-size:12px;color:rgba(252,245,221,.38)}

/* ======================= MOTION ======================= */
/* GSAP (.cinema) drives all reveals from a VISIBLE resting state — so if JS/GSAP
   fails or reduced-motion is on, everything is simply visible (no stuck-hidden). */
.split .word-i,.g-hero-art img{will-change:transform}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.faq-a,.scroll-cue span{animation:none;transition:none}
  .btn-buy{animation:none}
}


/* ---- signature-scene MOTIFS (per guide) — accent-coloured, each with its own micro-motion ---- */
.night-motif .mo{stroke:var(--accent2);fill:none}
.night-motif .mo-f{fill:var(--accent2);stroke:none}
.night-motif .mo-ring{stroke:var(--accent2)}
@media (prefers-reduced-motion:no-preference){
  .cinema .motif-magnifier .mo-pulse{transform-box:fill-box;transform-origin:center;animation:mo-pulse 2.6s var(--ease) infinite}
  .cinema .motif-gauge .mo-needle{transform-box:fill-box;transform-origin:64px 92px;animation:mo-needle 4s var(--ease) infinite}
  .cinema .motif-suncool .mo-rays{transform-box:fill-box;transform-origin:center;animation:mo-breathe 3.4s var(--ease) infinite}
  .cinema .motif-suncool .mo-orb{transform-box:fill-box;transform-origin:center;animation:mo-orb 3.4s var(--ease) infinite}
  .cinema .motif-spotlight .r1{animation:mo-fade 2.8s var(--ease) infinite}
  .cinema .motif-spotlight .r2{animation:mo-fade 2.8s var(--ease) .5s infinite}
  .cinema .motif-spotlight .r3{animation:mo-fade 2.8s var(--ease) 1s infinite}
  .cinema .motif-road .mo-dashes line{animation:mo-road 1.6s linear infinite}
  .cinema .motif-road .mo-dashes line:nth-child(2){animation-delay:.5s}
  .cinema .motif-road .mo-dashes line:nth-child(3){animation-delay:1s}
  .cinema .motif-phoneheart .mo-beat{transform-box:fill-box;transform-origin:center;animation:mo-beat 1.9s var(--ease) infinite}
  /* crest (Panic First Aid) — the wave draws, peaks, and resolves back to the line */
  .cinema .motif-crest .mo-crest{stroke-dasharray:100;animation:mo-crest 4.2s var(--ease) infinite}
  .cinema .motif-crest .mo-crestdot{transform-box:fill-box;transform-origin:center;animation:mo-crestdot 4.2s var(--ease) infinite}
  /* mappins (The Panic Map) — five places, lit one at a time */
  .cinema .motif-mappins .pin{transform-box:fill-box;transform-origin:center bottom;animation:mo-pin 4.5s var(--ease) infinite}
  .cinema .motif-mappins .pin2{animation-delay:.5s}
  .cinema .motif-mappins .pin3{animation-delay:1s}
  .cinema .motif-mappins .pin4{animation-delay:1.5s}
  .cinema .motif-mappins .pin5{animation-delay:2s}
}
@keyframes mo-pulse{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes mo-needle{0%,100%{transform:rotate(-38deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-6deg)}88%{transform:rotate(0)}}
@keyframes mo-breathe{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mo-orb{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes mo-fade{0%,100%{opacity:.25}50%{opacity:.85}}
@keyframes mo-road{0%{opacity:0;transform:translateY(-14px)}20%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@keyframes mo-beat{0%,100%{opacity:.5;transform:scale(.96)}18%{opacity:1;transform:scale(1.12)}32%{transform:scale(.98)}}
@keyframes mo-crest{0%{stroke-dashoffset:100;opacity:.35}45%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}}
@keyframes mo-crestdot{0%,28%{opacity:0;transform:scale(.6)}46%{opacity:1;transform:scale(1.15)}62%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.9)}}
@keyframes mo-pin{0%,72%,100%{opacity:.3;transform:translateY(2px) scale(.94)}10%{opacity:1;transform:translateY(0) scale(1.06)}28%{opacity:.95;transform:translateY(0) scale(1)}}

/* ======================= HOME + SHARED PAGE SECTIONS ======================= */
/* HOME hero — the cinematic brand opening */
.home-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#FDF8E7 0%,var(--cream) 52%,var(--cream-deep) 100%);overflow:hidden;padding:120px 22px 90px}
.home-hero-inner{position:relative;z-index:2;max-width:920px}
.home-hero .pill{margin-bottom:22px}
.home-hero h1{font-size:clamp(37px,5.5vw,66px);line-height:1.04;margin-bottom:20px}
.home-hero h1 em{display:block;font-size:.55em;font-weight:700;font-style:italic;color:var(--pop);margin-top:.34em;line-height:1.08}
.home-hero .hero-sub{font-size:clamp(16px,2vw,20px);color:var(--ink-soft);max-width:640px;margin:0 auto 32px}
.home-hero .hero-sub b{color:var(--green)}
.home-hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* buttons that carry a second line (price + what you get) */
.btn small{display:block;font-weight:400;font-size:12.3px;opacity:.9;margin-top:3px;line-height:1.35}
.btn-lead{font-size:18px;padding:18px 40px;border-radius:16px}
.btn-lead small{font-size:12.8px}
/* the three secondary paid tiers, side by side under the lead CTA */
.hero-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;
  max-width:820px;margin:14px auto 0}
.hero-tiers .btn{padding:13px 16px;font-size:14.5px;border-radius:13px}
.hero-tiers .btn small{font-size:11.4px}
.hero-free{display:inline-block;margin-top:16px}
@media(max-width:820px){
  .hero-tiers{grid-template-columns:1fr;max-width:420px}
  .btn-lead{font-size:16.5px;padding:16px 26px;width:100%;max-width:420px}
}
.home-hero-waves{position:absolute;inset:auto 0 -2px 0;height:56vh;z-index:1;pointer-events:none}
.home-hero-waves .hw{position:absolute;bottom:0;left:-10%;width:120%;height:100%}
.home-hero-waves .hw1 path{fill:var(--sage);opacity:.22}.home-hero-waves .hw2 path{fill:var(--green);opacity:.16}
.home-hero-waves .hw3 path{fill:var(--pop);opacity:.13}

/* QUALIFIER — "which moment are you in?" */
.qual{background:var(--cream);padding:96px 0}
.qual .head{text-align:center;max-width:760px;margin:0 auto 46px}
.qual h2{font-size:clamp(28px,4.4vw,48px);margin-bottom:14px}
.qual .sub{color:var(--ink-soft);font-size:17px}
.q-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.q-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.q-grid{grid-template-columns:1fr}}
.q-tile{--qa:var(--pop);display:flex;flex-direction:column;gap:12px;text-decoration:none;padding:24px 22px;border-radius:18px;
  background:#fff;border:1px solid rgba(49,85,63,.1);box-shadow:0 10px 30px rgba(49,85,63,.07);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.q-tile:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(49,85,63,.15);border-color:color-mix(in srgb,var(--qa) 40%,transparent)}
.q-tile .q-ic{width:44px;height:44px}
.q-tile .q-ic svg{width:44px;height:44px;color:var(--qa)}
.q-tile .q-mo{font-family:Fraunces,serif;font-weight:800;font-size:18px;color:var(--green);line-height:1.22}
.q-tile .q-go{margin-top:auto;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:color-mix(in srgb,var(--qa) 60%,var(--ink))}
.q-tile.all{background:linear-gradient(155deg,var(--green),var(--green-deep));border-color:transparent}
.q-tile.all .q-mo{color:var(--cream)}.q-tile.all .q-go{color:var(--pop2)}.q-tile.all .q-ic svg{color:var(--pop2)}

/* THE TURN — coping vs recovery */
.turn{background:var(--cream-deep);padding:100px 0;text-align:center}
.turn h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:14px}
.turn .marker{position:relative;white-space:nowrap}
.turn .marker::after{content:"";position:absolute;left:-2%;right:-2%;bottom:8%;height:32%;
  background:color-mix(in srgb,var(--pop) 45%,transparent);z-index:-1;border-radius:5px}
.turn .sub{color:var(--ink-soft);max-width:640px;margin:0 auto 46px;font-size:17px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left;max-width:900px;margin:0 auto}
@media(max-width:780px){.compare{grid-template-columns:1fr}}
.compare .card{padding:30px}
.compare .card h3{font-size:20px;margin-bottom:16px}
.compare .card ul{list-style:none}
.compare .card li{padding:9px 0;border-bottom:1px dashed rgba(49,85,63,.14);font-size:15.5px}
.compare .card li:last-child{border:0}
.compare .card-pop{background:linear-gradient(160deg,color-mix(in srgb,var(--pop) 16%,transparent),rgba(252,245,221,.6));
  border-color:color-mix(in srgb,var(--pop) 40%,transparent)}

/* HOME method block */
.home-method{background:var(--cream);padding:104px 0 92px}
.home-method h2{font-size:clamp(30px,4vw,48px);margin:8px 0 6px}
.home-method .tagline{font-family:Fraunces,serif;font-style:italic;color:var(--sage);font-size:19px;margin-bottom:22px}
.home-method .badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
@media(max-width:900px){.home-method .badges{justify-content:center}}
.home-method .badge{padding:14px 20px;text-align:center;min-width:98px}
.home-method .badge b{display:block;font-family:Fraunces,serif;font-size:28px;font-weight:900;color:var(--pop);line-height:1}
.home-method .badge span{font-size:12px;color:var(--ink-soft)}
.home-method .price-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@media(max-width:900px){.home-method .price-row{justify-content:center}}
.home-method .guarantee{font-size:13.5px;color:var(--ink-soft)}
.home-method .tagline{max-width:640px;margin:6px auto 0}

/* ---- the method orbit -----------------------------------------------------
   The $47 method cover sits fixed in the centre; the 5 bonus covers circle it
   in 3D. nav.js positions each bonus on an ellipse from a spin angle (auto-
   rotates, drag/swipe to spin). Cards are billboarded (always face you) and
   scale/dim by depth, so it reads as an orbit without any backface trouble. */
.orbit-stage{position:relative;height:clamp(470px,58vw,610px);margin:26px auto 30px;
  max-width:1120px;perspective:1300px;touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none}
.orbit-stage.is-grab{cursor:grabbing}
.orbit-center{position:absolute;top:50%;left:50%;width:clamp(206px,23vw,280px);cursor:pointer;
  transform:translate(-50%,-50%);z-index:50;text-decoration:none;
  animation:orbitFloat 6s ease-in-out infinite}
/* cutout books float with a soft drop-shadow (no card, no scene) */
.orbit-center img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 40px rgba(20,39,28,.42))}
.orbit-center-cta{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  white-space:nowrap;background:var(--green);color:var(--cream);font-size:13px;font-weight:700;
  padding:7px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(20,39,28,.28)}
@keyframes orbitFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 10px))}}

/* No preserve-3d: items are billboarded, so the orbit depth comes from scale +
   opacity + z-index (which preserve-3d would otherwise override). */
.orbit-ring{position:absolute;inset:0}
.orb{position:absolute;top:50%;left:50%}       /* nav.js sets transform/opacity/z-index */
.orb-book{width:clamp(116px,13vw,158px)}
.orb-book img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 26px rgba(20,39,28,.34))}
/* feature chips — the "revolving, popping bold" text pills */
.orb-chip{display:flex;align-items:center;justify-content:center}
.orb-chip span{display:inline-block;white-space:nowrap;text-align:center;max-width:190px;white-space:normal;
  font-family:Fraunces,serif;font-weight:900;font-size:15px;line-height:1.12;letter-spacing:-.01em;
  color:var(--green);background:rgba(252,245,221,.92);border:1px solid rgba(16,185,129,.34);
  border-radius:14px;padding:10px 15px;box-shadow:0 12px 26px rgba(20,39,28,.18)}

/* ---- the bonus shelf (Section B) reuses the .kit-gallery / .kit-card mechanic */
.bonus-shelf{background:linear-gradient(180deg,var(--cream),var(--cream-deep));
  padding:88px 0 96px;text-align:center;overflow:hidden}
.bonus-shelf h2{font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.bonus-shelf .sub{color:var(--ink-soft);max-width:640px;margin:0 auto 8px}
.bonus-shelf .eyebrow{display:block;margin-bottom:8px}

@media(prefers-reduced-motion:reduce){
  .orbit-center{animation:none}
}
@media(max-width:560px){
  /* everything smaller + the stage clips edge items so a rotating cover/chip
     never spills past the viewport */
  .orbit-stage{height:clamp(430px,116vw,540px);overflow:hidden}
  .orbit-center{width:clamp(148px,42vw,280px)}
  .orb-book{width:clamp(82px,23vw,158px)}
  .orb-chip span{font-size:12px;max-width:124px;padding:7px 11px;border-radius:12px}
  .orbit-center-cta{font-size:12px;padding:6px 13px}
}

/* PROOF strip + composite stories */
.proof{background:var(--green);color:var(--cream);padding:100px 0;text-align:center}
.proof h2{color:var(--cream);font-size:clamp(28px,4vw,44px);margin-bottom:10px}
.proof .sub{color:rgba(252,245,221,.72);max-width:620px;margin:0 auto 44px}
.proof-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:820px;margin:0 auto 52px}
@media(max-width:680px){.proof-nums{grid-template-columns:repeat(2,1fr)}}
.proof-num b{display:block;font-family:Fraunces,serif;font-weight:900;font-size:clamp(30px,4vw,44px);color:var(--pop2)}
.proof-num span{font-size:13px;color:rgba(252,245,221,.7);letter-spacing:.02em}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;max-width:1000px;margin:0 auto}
@media(max-width:820px){.stories{grid-template-columns:1fr}}
.story{background:rgba(252,245,221,.07);border:1px solid rgba(252,245,221,.16);border-radius:18px;padding:26px}
.story p{color:rgba(252,245,221,.9);font-size:15px;line-height:1.6;margin-bottom:14px}
.story .who{font-size:12.5px;color:var(--pop2);font-weight:600}
.proof .note{font-size:12px;color:rgba(252,245,221,.5);margin-top:26px;max-width:620px;margin-inline:auto}

/* HOME free wave */
.home-free{background:var(--cream-deep);padding:100px 0}
.home-free-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media(max-width:880px){.home-free-grid{grid-template-columns:1fr;text-align:center}}
.home-free .free-chip,.capture .free-chip{display:inline-block;background:var(--pop);color:#08130D;font-weight:700;font-size:12px;
  letter-spacing:.12em;padding:6px 15px;border-radius:99px;margin-bottom:14px}
.home-free h2{font-size:clamp(28px,4vw,46px);margin-bottom:14px}
.home-free p{color:var(--ink-soft);max-width:480px;margin-bottom:24px}
@media(max-width:880px){.home-free p{margin-inline:auto}}
.home-free-art img{width:100%;border-radius:var(--radius);box-shadow:0 26px 60px rgba(49,85,63,.24)}
/* ---- the three free doors, one block (2026-07-27) ---- */
.home-free .free-lede{color:var(--ink-soft);max-width:620px;margin:0 auto 6px}
.free-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.free-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;
  overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 14px 34px -20px rgba(49,85,63,.5),inset 0 0 0 1px rgba(49,85,63,.08);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.free-card:hover{transform:translateY(-7px);box-shadow:0 30px 58px -24px rgba(49,85,63,.5),
  inset 0 0 0 1px rgba(49,85,63,.14)}
.free-tag{position:absolute;top:12px;left:12px;z-index:3;font-family:Poppins,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.95);color:var(--green-deep,#163024);
  box-shadow:0 6px 16px -8px rgba(10,22,17,.6)}
.free-card-art{aspect-ratio:1/1;overflow:hidden;background:var(--cream-soft,#F5ECCF)}
.free-card-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.free-card:hover .free-card-art img{transform:scale(1.06)}
.free-card-body{display:flex;flex-direction:column;gap:7px;padding:18px 18px 20px;flex:1}
.free-card-body h3{font-size:1.12rem;line-height:1.24;margin:0}
.free-card-body p{color:var(--ink-soft);font-size:13.8px;margin:0}
.free-pages{font-family:Poppins,sans-serif;font-size:11.5px;color:var(--sage);margin-top:-2px}
.free-card-cta{margin-top:auto;align-self:flex-start}
@media(max-width:880px){
  .free-grid{grid-template-columns:1fr 1fr;gap:14px}
  .free-card-body{padding:14px 14px 16px}
  .free-card-body h3{font-size:1rem}
  .free-card-body p{font-size:12.6px}
}
@media(max-width:560px){.free-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}}

/* LIBRARY strip */
.library{background:var(--cream);padding:96px 0 104px;text-align:center}
.library h2{font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.library .sub{color:var(--ink-soft);max-width:620px;margin:0 auto 40px}
.library .sub .kit-hint{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--sage);
  letter-spacing:.01em}

/* ---- the 3D kit gallery ---------------------------------------------------
   A scroll-snap shelf of the real photographed covers. A card pops forward on
   hover (desktop) or when it's the centred card while you swipe (mobile — the
   .is-focus class is set by nav.js via IntersectionObserver). The full-bleed
   scroller lives OUTSIDE .wrap so covers can run edge to edge. */
.kit-gallery{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  perspective:1600px;padding:40px max(24px,calc((100% - 1120px)/2)) 54px;
  margin-bottom:40px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.kit-gallery::-webkit-scrollbar{display:none}

.kit-card{flex:0 0 clamp(210px,23vw,266px);scroll-snap-align:center;position:relative;
  text-decoration:none;border-radius:18px;transform-style:preserve-3d;
  transform:scale(.9) translateZ(0);opacity:.62;filter:saturate(.92);
  transition:transform .5s var(--ease),opacity .5s var(--ease),filter .5s var(--ease)}
.kit-photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 18px 40px rgba(20,39,28,.20);background:var(--cream-deep)}
.kit-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* accent glow under the raised card */
.kit-card::after{content:"";position:absolute;inset:auto 8% -14px 8%;height:40px;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--kit-accent) 55%,transparent),transparent 70%);
  filter:blur(14px);opacity:0;transform:translateZ(-40px);transition:opacity .5s var(--ease)}

/* the pop-up caption — hidden until the card is raised */
.kit-pop{position:absolute;left:12px;right:12px;bottom:12px;padding:13px 15px;border-radius:14px;
  background:rgba(252,245,221,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(20,39,28,.22);text-align:left;
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.kit-moment{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sage);margin-bottom:2px}
.kit-name{display:block;font-family:Fraunces,serif;font-weight:900;font-size:16px;color:var(--green);
  line-height:1.12;letter-spacing:-.01em}
.kit-open{display:block;margin-top:7px;font-size:12.5px;font-weight:700;color:var(--pop)}

/* RAISED state — desktop hover OR mobile centred card */
.kit-card:hover,.kit-card:focus-visible,.kit-card.is-focus{
  transform:scale(1) translateY(-10px) rotateX(3deg);opacity:1;filter:saturate(1);z-index:2}
.kit-card:hover .kit-photo,.kit-card.is-focus .kit-photo{box-shadow:0 34px 60px rgba(20,39,28,.32)}
.kit-card:hover::after,.kit-card.is-focus::after{opacity:.7}
.kit-card:hover .kit-pop,.kit-card:focus-visible .kit-pop,.kit-card.is-focus .kit-pop{
  opacity:1;transform:translateY(0)}

@media(hover:hover){.kit-card.is-focus:not(:hover){/* on desktop, hover wins over scroll-focus */}}
@media(max-width:640px){
  .kit-gallery{gap:18px;padding:30px 22px 44px}
  .kit-card{flex-basis:78vw;max-width:300px}
}
@media(prefers-reduced-motion:reduce){
  .kit-card{transition:opacity .3s linear;transform:none;opacity:1}
  .kit-card:hover,.kit-card.is-focus{transform:none}
  .kit-pop{transition:opacity .3s linear}
}

/* HOME trust */
.home-trust{background:var(--cream-deep);padding:90px 0}
.home-trust .proof-line{text-align:center;font-family:Fraunces,serif;font-weight:700;font-size:clamp(20px,2.8vw,28px);
  color:var(--green);margin-bottom:40px}
.home-trust .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto;text-align:left}
@media(max-width:820px){.home-trust .cards{grid-template-columns:1fr}}
.home-trust .card{padding:26px}
.home-trust .card h3{font-size:18px;margin-bottom:10px}
.home-trust .card p{font-size:14.5px;color:var(--ink-soft)}

/* simple content pages (method/start-free/about) */
.page-hero{position:relative;background:linear-gradient(180deg,#FDF8E7,var(--cream-deep));padding:128px 0 74px;overflow:hidden}
.page-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:24px;text-align:center;place-items:center}
.page-hero.has-art .page-hero-grid{grid-template-columns:1.1fr .9fr;text-align:left;place-items:center}
@media(max-width:900px){.page-hero.has-art .page-hero-grid{grid-template-columns:1fr;text-align:center}}
.page-hero h1{font-size:clamp(36px,5.6vw,64px);line-height:1.04;max-width:900px;margin:14px 0 16px}
.page-hero .lede{color:var(--ink-soft);font-size:18px;max-width:620px;margin:0 auto}
.page-hero.has-art .lede{margin:0 0 8px}
.page-hero-ctas{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.page-hero.has-art .page-hero-ctas{justify-content:flex-start}
@media(max-width:900px){.page-hero.has-art .page-hero-ctas{justify-content:center}}
.page-hero-art img{width:min(320px,82%);margin:0 auto;filter:drop-shadow(0 30px 60px rgba(49,85,63,.32))}
.page-body{padding:72px 0}
.page-body .prose{max-width:720px;margin:0 auto}
.page-body .prose h2{font-size:clamp(24px,3.4vw,34px);margin:36px 0 14px}
.page-body .prose p{font-size:17px;line-height:1.7;color:#2a4536;margin-bottom:18px}
.page-body .prose strong{color:var(--green)}
.page-body .prose h3{font-size:19px;margin:26px 0 8px;color:var(--green)}
.page-body .prose ul{margin:0 0 18px;padding-left:22px}
.page-body .prose li{font-size:17px;line-height:1.7;color:#2a4536;margin-bottom:8px}
.page-body .prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.page-body .prose a:hover{color:var(--pop)}
.page-body .prose .legal-meta{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:26px}
.footer-legal{margin-top:8px;font-size:13.5px;opacity:.82}

/* ===== HOME v2: keyword depth + 3D motion ===== */
.home-hero .hero-meta{margin-top:16px;font-size:12.5px;letter-spacing:.04em;color:var(--sage);font-weight:600}
.intro-strip{background:var(--cream);padding:64px 0 8px}
.intro-strip p{font-size:clamp(17px,2.2vw,21px);line-height:1.6;color:#33513f;text-align:center}
.intro-strip strong{color:var(--green)}

/* 3D tilt — JS sets --rx/--ry on pointer move */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);transform-style:preserve-3d;will-change:transform}

/* HOW IT WORKS */
.how{background:var(--cream);padding:92px 0}
.how .head{text-align:center;max-width:680px;margin:0 auto 44px}
.how .head h2{font-size:clamp(28px,4.2vw,44px);margin-top:8px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.how-grid{grid-template-columns:1fr}}
.how-step{position:relative;background:#fff;border:1px solid rgba(49,85,63,.1);border-radius:20px;padding:34px 28px 28px;
  box-shadow:0 12px 32px rgba(49,85,63,.08)}
.how-step:hover{box-shadow:0 22px 48px rgba(49,85,63,.16)}
.how-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  font-family:Fraunces,serif;font-weight:900;font-size:20px;color:#08130D;
  background:linear-gradient(135deg,var(--pop),var(--pop2));margin-bottom:16px}
.how-step h3{font-size:20px;margin-bottom:10px}
.how-step p{font-size:15px;color:var(--ink-soft);line-height:1.6}

/* SHOWCASE row: bundle + B2B */
.showcase-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
@media(max-width:780px){.showcase-row{grid-template-columns:1fr}}
.showcase-card{text-decoration:none;display:block;border-radius:20px;padding:34px 32px;position:relative;overflow:hidden;
  box-shadow:0 16px 40px rgba(49,85,63,.14)}
.showcase-card.bundle{background:linear-gradient(150deg,var(--green),var(--green-deep));color:var(--cream)}
.showcase-card.b2b{background:linear-gradient(150deg,#22323f,#141d24);color:var(--cream)}
.showcase-card .sc-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 13px;border-radius:99px;margin-bottom:14px;background:rgba(252,245,221,.14);color:var(--pop2)}
.showcase-card.b2b .sc-tag{color:#8FB8D6}
.showcase-card h3{color:var(--cream);font-size:clamp(22px,2.8vw,28px);margin-bottom:10px}
.showcase-card p{color:rgba(252,245,221,.82);font-size:15px;line-height:1.55;margin-bottom:18px;max-width:440px}
.showcase-card .sc-cta{font-weight:700;font-size:15px;color:#fff}
.showcase-card.bundle .sc-cta{color:var(--pop2)}.showcase-card.b2b .sc-cta{color:#8FB8D6}

/* library card title with price */
.library .eyebrow{display:block;text-align:center;margin-bottom:8px}

/* HOME FAQ */
.home-faq{background:var(--cream-deep);padding:88px 0}
.home-faq .head{text-align:center;margin-bottom:34px}
.home-faq .head h2{font-size:clamp(28px,4vw,42px);margin-top:8px}
.home-faq .faq-item{border-bottom:1px solid rgba(49,85,63,.14)}
.home-faq .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:Fraunces,serif;font-weight:800;font-size:18px;color:var(--green);line-height:1.35;letter-spacing:-.01em}
.home-faq .faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--pop);transition:transform .3s var(--ease)}
.home-faq .faq-item.open .faq-q::after{content:"–"}
.home-faq .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.home-faq .faq-a p{padding:0 10px 22px 0;color:var(--ink-soft);font-size:15.5px;line-height:1.66}
@media (prefers-reduced-motion:reduce){.tilt{transition:none}}

/* ---------------------------------------------------------------- THE DOOR (capture) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;width:0!important}
.capture{padding:16px 0 96px}
.capture-card{max-width:720px;margin:0 auto;text-align:center;background:#fff;
  border-radius:var(--radius);padding:46px 38px 40px;
  box-shadow:0 30px 80px rgba(20,39,28,.13),0 0 0 1px rgba(49,85,63,.08)}
.capture-card h2{font-size:clamp(28px,4vw,40px);margin:16px 0 12px;font-weight:900}
.capture-lede{color:var(--ink-soft);font-size:16px;line-height:1.62;max-width:52ch;margin:0 auto 26px}
.capture-form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto}
.capture-form input{width:100%;padding:15px 18px;font-family:Poppins,sans-serif;font-size:16px;
  color:var(--ink);background:var(--cream);border:0;border-radius:14px;
  box-shadow:inset 0 0 0 1.5px rgba(49,85,63,.16);transition:box-shadow .25s var(--ease)}
.capture-form input::placeholder{color:rgba(20,39,28,.45)}
.capture-form input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--pop),0 0 0 4px rgba(16,185,129,.14)}
.capture-form input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #C2503A}
.capture-form .btn{width:100%;padding:16px 20px;font-size:16.5px;cursor:pointer;border:0}
.capture-form .btn[disabled]{opacity:.62;cursor:default;transform:none}
.capture-msg{min-height:22px;margin:14px 0 0;font-size:14.5px;font-weight:600;color:#C2503A}
.capture-msg.ok{color:var(--green)}
.capture-fine{margin:18px auto 0;max-width:46ch;font-size:13px;line-height:1.55;color:rgba(20,39,28,.55)}
@media(max-width:640px){.capture-card{padding:34px 22px 30px;border-radius:18px}}

/* ---- thank-you page offer -------------------------------------------------
   The highest-intent moment in the funnel. Priced into the $7–27 impulse
   window on purpose: a reader who arrived 30 seconds ago is cold, and the
   Starter Stack's own Gumroad checkout carries the $47 upsell. The $47 itself
   is pitched later, by email, once they're warm. */
.ty-offer-wrap{padding:0 0 96px}
.ty-offer{max-width:760px;margin:0 auto;padding:44px 40px;text-align:center}
.ty-offer h2{font-family:Fraunces,serif;font-weight:900;letter-spacing:-.018em;
  font-size:clamp(27px,3.6vw,38px);color:var(--green);margin:18px 0 12px;line-height:1.12}
.ty-offer-lede{color:var(--ink-soft);font-size:17px;line-height:1.6;margin:0 auto 22px;max-width:52ch}
.ty-offer-list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;
  justify-content:center;gap:8px}
.ty-offer-list li{background:rgba(35,74,52,.06);border:1px solid rgba(35,74,52,.10);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--green)}
.ty-offer-cta{font-size:17px;padding:16px 30px}
.ty-offer .guarantee{margin-top:14px}
.ty-offer-foot{margin-top:22px;padding-top:20px;border-top:1px solid rgba(35,74,52,.10);
  color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.ty-offer-foot a{color:var(--green);font-weight:600}
@media(max-width:560px){
  .ty-offer{padding:34px 22px}
  .ty-offer-cta{width:100%;font-size:15.5px;padding:15px 18px}
}

/* ---- the thank-you offer: a mini landing page ------------------------------
   Hook + first button sit in the download's line of sight (nobody scrolls a
   thank-you page). Ad copy, features and the second button are for whoever reads.

   The image carries an explicit aspect-ratio + object-fit so it can NEVER stretch,
   even if a browser is running this markup against a stale stylesheet — which is
   exactly how the blown-out card reached Zak's phone. (The real fix is the content
   hash on the css URL; this is the belt to that pair of braces.) */
.ty-next{text-align:left;margin:20px auto 0;max-width:620px;padding:20px;
  background:linear-gradient(180deg,rgba(16,185,129,.10),rgba(16,185,129,.045));
  border:1px solid rgba(16,185,129,.28);border-left:3px solid var(--pop);
  border-radius:20px}

.ty-next-hook{text-align:center;margin-bottom:14px}
.ty-next-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:6px}
.ty-next-h{font-family:Fraunces,serif;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(28px,4.6vw,38px);color:var(--green);line-height:1.08;margin:0 0 8px}
.ty-next-sub{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0 auto;max-width:44ch}
.ty-next-sub b{color:var(--green)}

.ty-next-cta{display:block;width:100%;text-align:center;font-size:16px;padding:15px 18px}

.ty-next-mid{display:flex;gap:16px;align-items:flex-start;margin:18px 0 0}
.ty-next-art{position:relative;flex:0 0 190px;display:block;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 22px rgba(35,74,52,.16);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ty-next-art img{width:100%;height:auto;display:block;aspect-ratio:860/788;object-fit:cover}
.ty-next-badge{position:absolute;left:8px;bottom:8px;background:var(--green);color:var(--cream);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.18)}

.ty-next-copy{min-width:0;flex:1}
.ty-next-copy p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 10px}
.ty-next-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.ty-next-feats li{position:relative;padding-left:20px;font-size:13px;line-height:1.45;
  color:var(--ink-soft)}
.ty-next-feats li::before{content:"✓";position:absolute;left:0;top:0;color:var(--pop);
  font-weight:800;font-size:13px}
.ty-next-feats em{font-style:italic;color:var(--green)}

.ty-next-math{margin:16px 0 14px;padding:12px 14px;border-radius:12px;
  background:rgba(35,74,52,.05);border:1px solid rgba(35,74,52,.09);
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);text-align:center}
.ty-next-math b{color:var(--green);font-weight:700}

.ty-next-note{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-soft);text-align:center}
/* Struck list price inside the CTA. Only ever rendered when a REAL discount code is
   applied to the link — see gum_code()/TOOLKIT_* in build_site.py. Never decorative:
   a struck price with no genuine code behind it is fictitious pricing (16 CFR 233.1). */
.ty-next-was{opacity:.62;font-weight:600;text-decoration-thickness:1.5px;margin-right:2px}
.cta-was{opacity:.62;font-weight:600;text-decoration-thickness:1.5px;margin:0 3px}
/* ---- "make it a steal" (2026-07-27b) — the discount has to READ, instantly ---- */
/* % badge riding on the CTA. Ships display:none; countdown.js reveals it only once
   the reader's window is proven, so it can never sit on a full-price button. */
.cta-badge{display:inline-block;margin-right:9px;padding:3px 9px;border-radius:99px;
  background:#08130D;color:#6FD6A0;font-family:Poppins,sans-serif;font-weight:800;
  font-size:12px;letter-spacing:.06em;vertical-align:2px}
.cta-now{font-weight:900}
/* the whole offer card lifts when the window is live */
.ty-next.oto-open{box-shadow:0 0 0 2px rgba(81,183,136,.55),0 28px 70px -30px rgba(49,85,63,.6),
  0 0 60px rgba(111,214,160,.32)}
.ty-next.oto-open .ty-next-cta{animation:btnpulse 3.2s var(--ease) infinite}
/* the headline discount line */
.ty-clock-label b{font-family:Poppins,sans-serif;font-weight:800;letter-spacing:.04em}
.ty-clock.is-live .ty-clock-label b{color:var(--green-deep,#163024)}
.ty-clock-auto{display:block;margin-top:7px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.ty-clock-auto::before{content:"✓ ";color:var(--pop);font-weight:800}
@media (prefers-reduced-motion: reduce){.ty-next.oto-open .ty-next-cta{animation:none}}
/* ---- the launch-window countdown (countdown.js) ---- */
/* ⚠️ HIDDEN BY DEFAULT (fixed 2026-07-27). The block's own docstring promises a JS-off
   reader "a normal full-price offer with no dead ticker and no unkeepable promise" — but
   only .ty-clock-digits was hidden, so the label still announced "20% off" while the
   button rendered the FULL price and an UNCODED link. That is a promise/destination
   mismatch in exactly the state the safety-flip exists to protect. The whole clock now
   appears only once countdown.js has proven the reader's window (is-live / is-ended). */
.ty-clock{display:none}
.ty-clock.is-live,.ty-clock.is-ended,.ty-clock.is-standing{display:block}
/* THE STANDING STATE (2026-07-29). A reader whose window we can't prove — second device,
   cleared localStorage, no `t` stamp. They get the real standing discount on the button,
   but NOT the "your window has closed" line: they never had a window, and narrating a
   discount history they didn't live is a fabricated claim. Purely factual label only. */
.ty-clock-standing{display:none;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pop-ink)}
.ty-clock.is-standing .ty-clock-standing{display:block}
.ty-clock.is-standing .ty-clock-label,
.ty-clock.is-standing .ty-clock-digits{display:none}
.ty-clock{margin:0 0 14px;padding:11px 14px;border-radius:12px;text-align:center;
  background:var(--panel);border:1px solid var(--hair)}
.ty-clock-label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pop-ink)}
/* Digits hidden until countdown.js proves it's live — a JS-off visitor sees only the
   honest text label, never a frozen ticker. is-live reveals; is-ended states the truth. */
.ty-clock-digits{display:none;margin-top:6px}
.ty-clock.is-live .ty-clock-digits{display:block}
.ty-clock-live b{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:22px;
  color:var(--green);font-variant-numeric:tabular-nums}
.ty-clock-live i{font-style:normal;font-size:12px;color:var(--ink-soft);margin:0 6px 0 1px}
.ty-clock-note{display:inline-block;margin-left:6px;font-size:12px;color:var(--ink-soft)}
.ty-clock-ended{display:none;font-size:13px;font-weight:600;color:var(--ink-soft)}
.ty-clock.is-ended .ty-clock-live{display:none}
.ty-clock.is-ended .ty-clock-ended{display:inline}
/* ⚠️ .ty-clock-digits is display:none by default and was only un-hidden for .is-live,
   which meant the ENDED message never rendered — the label still announced the launch
   % while the button had already stepped down to the smaller one. Show the digits box
   for .is-ended too, and drop the now-contradictory launch label. */
.ty-clock.is-ended .ty-clock-digits{display:block}
.ty-clock.is-ended .ty-clock-label{display:none}
/* stepped-down state: still a real offer, visibly calmer than the launch window */
.ty-next.oto-stepped{box-shadow:0 0 0 1.5px rgba(81,183,136,.34),0 20px 52px -30px rgba(49,85,63,.5)}
/* THE INBOX NOTE (2026-07-29, Zak). The "check your spam folder" line already existed, but
   it sat below the fold under the offer block — and the comment two functions up already
   says nobody scrolls a thank-you page. So it was invisible to the people who need it.
   It now sits directly under the download button, in the download's line of sight.
   Deliberately calm, not an alert: this is an anxiety product, and a red warning box on
   the thank-you page would be the wrong first impression. Zak's call 2026-07-29: keep the
   download button AND run this nudge, rather than gating the PDF behind the inbox. */
/* 2026-07-29b (Zak): the note now sits ABOVE the download buttons and is ONE line, because
   the long version pushed the upsell below the fold. Tighter box, smaller type — it is a
   utility line, not a section. */
.ty-inbox{margin:16px 0 0;padding:9px 13px;border-radius:10px;font-size:13.5px;line-height:1.5;
  color:var(--ink-soft);background:var(--cream-soft);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);max-width:600px}
.page-hero.has-art .ty-inbox{margin-inline:0}
.ty-inbox b{color:var(--ink)}
@media(max-width:900px){.ty-inbox{margin-inline:auto;text-align:left}}
@media(max-width:560px){.ty-inbox{font-size:13.5px;padding:10px 12px}}
.ty-next.oto-stepped .cta-badge{background:#1d3a2b;color:#9BE3C0}
.ty-clock.is-ended{background:rgba(35,74,52,.06)}
.ty-clock.is-ended .ty-clock-ended{font-weight:700;color:var(--green)}
@media (prefers-reduced-motion:reduce){
  /* the seconds digit is the only "motion"; keep the clock but it simply updates text */
  .ty-clock-live b{transition:none}
}
/* The overlap disclosure — tells the reader when an offer's contents are already
   included in a product they may buy instead. Muted but deliberately NOT fine print. */
.ty-next-overlap{margin:0 0 14px;padding:11px 13px;border-radius:12px;
  background:var(--hair);font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.ty-next-overlap a{color:var(--green);font-weight:600}
/* ---- THE SECOND OFFER inside the math/overlap paragraph (2026-07-27c) ----
   Zak: "make the text and link text more prominent". These two paragraphs stopped
   being fine print and became the bigger offer (the $47 method at 37%), so they get
   a real card, a real heading and a real lit link — while staying visually below the
   primary CTA so the page still has one obvious first action. */
.ty-next-overlap,.ty-next-math{background:#fff;border:1px solid rgba(35,74,52,.14);
  font-size:14px;line-height:1.6;color:var(--ink);text-align:left;
  box-shadow:0 10px 26px -18px rgba(49,85,63,.45)}
.ty-next-overlap{margin:16px 0 14px;padding:16px 18px}
.ty-next-math{padding:16px 18px}
.ty-offer2-h{display:block;margin-bottom:6px;font-family:Poppins,sans-serif;
  font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--green)}
.ty-offer2-cta{display:block;margin-top:13px;text-align:center}
.ty-offer2-link{display:inline-block;padding:13px 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--pop),var(--pop2));color:#08130D;
  font-family:Poppins,sans-serif;font-weight:800;font-size:15px;text-decoration:none;
  box-shadow:0 8px 22px rgba(81,183,136,.5),0 0 26px rgba(111,214,160,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ty-offer2-link:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(81,183,136,.62),0 0 40px rgba(111,214,160,.6)}
.ty-offer2-link s{opacity:.55;font-weight:600;margin-right:2px}
.ty-offer2-link b{font-weight:900}
.ty-offer2-link em{font-style:normal;font-weight:700;font-size:12.5px;opacity:.8}
.ty-offer2-note{display:block;margin-top:9px;font-size:12px;line-height:1.5;
  color:var(--ink-soft)}
/* two routes side by side (Panic Map): equal weight, distinct jobs */
.ty-offer2-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.ty-offer2-two .ty-offer2-link{display:block;text-align:center;padding:14px 14px}
.ty-offer2-link small{display:block;margin-top:4px;font-weight:600;font-size:11.5px;
  opacity:.78;letter-spacing:.01em}
.ty-offer2-alt{background:#fff;color:var(--green);
  box-shadow:inset 0 0 0 1.6px rgba(38,120,86,.45),0 8px 22px rgba(35,74,52,.14),
             0 0 24px rgba(81,183,136,.22)}
.ty-offer2-alt:hover{box-shadow:inset 0 0 0 1.6px rgba(38,120,86,.7),
             0 12px 30px rgba(35,74,52,.2),0 0 36px rgba(81,183,136,.36)}
.ty-offer2-alt s{opacity:.5}
@media(max-width:640px){.ty-offer2-two{grid-template-columns:1fr}}
@media(max-width:640px){
  .ty-next-overlap,.ty-next-math{font-size:13.2px;padding:14px 14px}
  .ty-offer2-link{font-size:14px;padding:12px 16px;width:100%}
}

@media(max-width:640px){
  .ty-next{padding:16px;margin-top:16px;border-radius:16px}
  .ty-next-h{font-size:26px}
  .ty-next-sub{font-size:13.5px}
  .ty-next-cta{font-size:15px;padding:13px 14px}
  /* books go full width here — this is BELOW the first button, so it costs no fold */
  .ty-next-mid{flex-direction:column;gap:12px;margin-top:14px}
  .ty-next-art{flex:none;width:100%}
  .ty-next-math{font-size:13px}
}

/* Short phones (iPhone SE): the download AND the offer CTA must both clear the fold.
   Measured — with default spacing the CTA lands below it on a 667px screen, which is
   the exact bug we were fixing. The space reclaimed here is decorative; the CTA is not.
   Scoped to .ty-thanks so no other page's hero is touched. */
@media(max-width:640px){
  .ty-thanks .page-hero{padding-top:92px}
  .ty-thanks .page-hero h1{margin-top:8px;margin-bottom:10px}
  .ty-thanks .page-hero .lede{font-size:15.5px}
  .ty-thanks .page-hero-ctas{margin-top:14px}
}

/* ---- BONUS SHELF CARDS = BOOK CUTOUTS (2026-07-16) ------------------------
   The orbit proved the cutouts read better than the scene photos (Zak: the scenes
   "look off, remove the bg"). Same treatment here: the book floats on a soft brand
   field with its OWN drop-shadow, instead of a photo of a book on someone's table.
   NOTE: drop-shadow (not box-shadow) — box-shadow would draw the shadow on the
   image RECTANGLE, which is the exact "mockups with background" bug from before. */
.kit-card--cut .kit-photo{
  background:radial-gradient(118% 96% at 50% 10%, #fffaea 0%, var(--cream-deep) 60%, #e9dfba 100%);
  box-shadow:inset 0 0 0 1px rgba(35,74,52,.07), 0 16px 36px rgba(20,39,28,.16)}
.kit-card--cut .kit-photo img{
  width:100%;height:100%;object-fit:contain;padding:15px 16px 18px;
  filter:drop-shadow(0 14px 18px rgba(20,39,28,.28));
  transition:transform .5s var(--ease),filter .5s var(--ease)}
/* the book itself lifts a touch when the card is raised */
.kit-card--cut:hover .kit-photo img,
.kit-card--cut.is-focus .kit-photo img{
  transform:translateY(-5px) scale(1.035);
  filter:drop-shadow(0 22px 26px rgba(20,39,28,.34))}
.kit-card--cut:hover .kit-photo,
.kit-card--cut.is-focus .kit-photo{box-shadow:inset 0 0 0 1px rgba(35,74,52,.07), 0 30px 54px rgba(20,39,28,.28)}
/* caption sits on a cream field here, so lift its opacity for contrast */
.kit-card--cut .kit-pop{background:rgba(252,245,221,.95)}
@media(prefers-reduced-motion:reduce){
  .kit-card--cut:hover .kit-photo img,.kit-card--cut.is-focus .kit-photo img{transform:none}
}

/* =========================================================================
   /METHOD/ — the $47 money page (2026-07-16). Section prefix .m- / scene .mp-.
   FALLBACK CONTRACT: base rules show EVERYTHING (no-JS/reduced-motion = a full
   readable sales letter). Only `.cinema` rules may hide or absolutize content.
   ========================================================================= */
.m-hero .page-hero-copy{max-width:640px}
.m-hero h1 em{font-style:normal;color:var(--pop);display:block}
.m-stars{display:flex;align-items:center;gap:10px;margin:18px 0 2px}
.m-stars .stars{color:#F0A62E;font-size:19px;letter-spacing:2px;text-shadow:0 1px 0 rgba(20,39,28,.12)}
.m-proofline{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.m-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.m-chip{font-size:12px;font-weight:700;color:var(--green);background:rgba(35,74,52,.07);
  border:1px solid rgba(35,74,52,.14);border-radius:999px;padding:6px 12px;white-space:nowrap}
.m-glow{box-shadow:0 10px 30px rgba(16,185,129,.42),0 0 0 1px rgba(16,185,129,.25),
  0 0 44px rgba(16,185,129,.30)}
.m-glow:hover{box-shadow:0 16px 44px rgba(16,185,129,.55),0 0 0 1px rgba(16,185,129,.3),
  0 0 60px rgba(16,185,129,.36)}
.m-hero-art{display:flex;align-items:center;justify-content:center;position:relative}
.m-hero-art::before{content:"";position:absolute;inset:6% 10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(16,185,129,.16),rgba(16,185,129,0) 72%)}
.m-hero-art img{width:min(74%,340px);height:auto;position:relative;
  filter:drop-shadow(0 26px 34px rgba(20,39,28,.34))}

/* ---- shared section grammar ---- */
.m-sec{padding:84px 0}
.m-sec .wrap{max-width:1120px}
.m-sec h2{font-family:Fraunces,serif;font-weight:900;letter-spacing:-.018em;line-height:1.06;
  font-size:clamp(27px,3.8vw,44px);color:var(--green);margin:10px 0 18px}
.m-sec h2 em{font-style:normal;color:var(--pop)}
.m-lede{max-width:640px;color:var(--ink-soft);font-size:17px;line-height:1.65;margin-bottom:34px}
.m-lede b{color:var(--ink)}
.m-note{max-width:620px;color:var(--ink-soft);font-size:14px;line-height:1.6;margin-top:22px}
.m-turn{max-width:660px;font-family:Fraunces,serif;font-weight:700;font-size:clamp(19px,2.4vw,25px);
  line-height:1.35;color:var(--green);margin:40px auto 0;text-align:center}
.m-cta-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:40px}
.m-cta-sub{font-size:13.5px;font-weight:600;color:var(--ink-soft)}

/* ---- the tried-everything grid ---- */
.m-loop{background:linear-gradient(180deg,var(--cream),var(--cream-soft))}
.m-tried-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.m-tried{background:#fff9;border:1px solid rgba(35,74,52,.10);border-radius:16px;padding:22px;
  position:relative;box-shadow:0 10px 26px rgba(20,39,28,.07)}
.m-tried-x{position:absolute;top:16px;right:18px;font-weight:800;color:#B4543B;opacity:.75}
.m-tried h3{font-family:Fraunces,serif;font-weight:700;font-size:18px;color:var(--green);margin-bottom:8px}
.m-tried p{font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* ---- the two-paths scene (base = static + fully visible) ---- */
.m-paths{background:linear-gradient(180deg,var(--cream-soft),var(--cream))}
.mp-stage{padding:84px 0}
.mp-wrap{max-width:1000px}
.mp-svg{width:100%;height:auto;display:block;margin:26px 0 10px}
.mp-svg path{fill:none;stroke-linecap:round}
.mpw-base{stroke:rgba(35,74,52,.18);stroke-width:2}
.mpw-main{stroke:var(--green);stroke-width:4.5}
.mpw-fight{stroke:#B4543B;stroke-width:4;stroke-dasharray:7 9;opacity:.85}
.mpw-allow path{stroke:var(--pop);stroke-width:4.5}
.mp-beats{display:grid;gap:14px;margin-top:8px}
.mp-beat{background:#fff9;border:1px solid rgba(35,74,52,.10);border-radius:16px;padding:18px 20px;
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:720px}
.mp-beat b{color:var(--ink)}
.mp-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;border-radius:999px;
  padding:4px 11px;margin:0 8px 8px 0}
.mp-x{background:rgba(180,84,59,.12);color:#8F3E2B}
.mp-c{background:rgba(16,185,129,.14);color:var(--green)}
/* cinema: the stage pins, beats stack + crossfade in place */
.cinema .mp-stage{min-height:100vh;display:flex;align-items:center;padding:0}
.cinema .mp-stage>.wrap{width:100%}
.cinema .mp-beats{position:relative;min-height:190px}
.cinema .mp-beat{position:absolute;inset:0 auto auto 0;width:100%}

/* ---- research bars / dashboard bars ---- */
.m-bars{display:grid;gap:26px;margin-top:38px;max-width:760px}
.mbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:9px}
.mbar-top span{font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.45}
.mbar-top b{font-family:Fraunces,serif;font-weight:900;font-size:clamp(20px,2.6vw,27px);color:var(--green);white-space:nowrap}
.mbar-track{height:14px;border-radius:999px;background:rgba(35,74,52,.10);overflow:hidden}
.mbar-fill{display:block;height:100%;width:calc(var(--w)*100%);border-radius:999px;
  background:linear-gradient(90deg,var(--pop),var(--pop2));transform-origin:left center}
.mbar-dim .mbar-fill{background:linear-gradient(90deg,rgba(126,147,132,.75),rgba(126,147,132,.45))}

/* ---- what's inside: table + real pages ---- */
.m-inside-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px;
  align-items:start;margin-top:34px}
.tablewrap{overflow-x:auto}
.m-table{width:100%;border-collapse:collapse;min-width:520px}
.m-table th{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);text-align:left;padding:0 14px 10px}
.m-table td{padding:18px 14px;border-top:1px solid rgba(35,74,52,.12);vertical-align:top}
.mt-num{font-family:Fraunces,serif;font-weight:900;font-size:24px;color:var(--pop);width:52px}
.mt-name b{display:block;font-family:Fraunces,serif;font-weight:700;font-size:17.5px;color:var(--green);margin-bottom:5px}
.mt-name span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.mt-pp{font-family:Fraunces,serif;font-weight:900;font-size:22px;color:var(--green);text-align:right;white-space:nowrap}
.mt-pp i{display:block;font-style:normal;font-family:Poppins,sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.mt-ws td{background:rgba(16,185,129,.06)}
.m-inside-art{display:grid;gap:0;position:relative;padding-top:8px}
.mia{border-radius:14px;overflow:hidden;box-shadow:0 20px 44px rgba(20,39,28,.22);background:#fff;
  border:1px solid rgba(35,74,52,.10)}
.mia img{width:100%;height:auto;display:block}
.mia figcaption{font-size:12px;font-weight:600;color:var(--ink-soft);padding:10px 14px;background:#fffdf4}
.mia-1{transform:rotate(-2.2deg);z-index:2;width:88%}
.mia-2{transform:rotate(2.4deg) translateY(-34px);margin-left:auto;width:88%;z-index:1}

/* ---- the example dashboard ---- */
.m-dash{background:linear-gradient(180deg,var(--cream),var(--cream-soft))}
.m-dashcard{max-width:760px;background:#fffdf6;border:1px solid rgba(35,74,52,.12);border-radius:20px;
  box-shadow:0 26px 60px rgba(20,39,28,.16);overflow:hidden}
.m-dash-ribbon{background:var(--green);color:var(--cream);font-size:11px;font-weight:700;
  letter-spacing:.14em;padding:10px 18px;text-align:center}
.m-dash-rows{padding:10px 26px 24px}
.mdr{display:grid;grid-template-columns:190px 1fr auto;gap:16px;align-items:center;
  padding:16px 0;border-top:1px solid rgba(35,74,52,.09)}
.mdr:first-child{border-top:0}
.mdr-label{font-size:13.5px;font-weight:700;color:var(--ink)}
.mdr-fig{font-family:Fraunces,serif;font-weight:900;font-size:17px;color:var(--green);white-space:nowrap}
.mdr-duo{display:flex;gap:10px;flex-wrap:wrap}
.mdr-duo i{font-style:normal;font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 12px}
.mdr-a{background:rgba(180,84,59,.12);color:#8F3E2B}
.mdr-b{background:rgba(16,185,129,.16);color:var(--green)}
.mdr-chips{display:flex;gap:8px;flex-wrap:wrap}
.mdr-chips i{font-style:normal;font-size:12px;font-weight:600;color:var(--green);
  background:rgba(35,74,52,.07);border:1px solid rgba(35,74,52,.13);border-radius:999px;padding:4px 10px}
.mdr-zero{font-family:Fraunces,serif;font-weight:900;font-size:34px;color:var(--pop);line-height:1}

/* ---- before / after ---- */
.m-ba{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.m-ba-col{border-radius:18px;padding:28px;border:1px solid rgba(35,74,52,.10)}
.m-ba-col h3{font-family:Fraunces,serif;font-weight:900;font-size:21px;margin-bottom:16px}
.m-ba-col ul{list-style:none;display:grid;gap:12px}
.m-ba-col li{font-size:14.5px;line-height:1.55;padding-left:26px;position:relative}
.m-ba-before{background:#fff8f2}
.m-ba-before h3{color:#8F3E2B}
.m-ba-before li{color:var(--ink-soft)}
.m-ba-before li::before{content:"✕";position:absolute;left:0;color:#B4543B;font-weight:800}
.m-ba-after{background:rgba(16,185,129,.07)}
.m-ba-after h3{color:var(--green)}
.m-ba-after li{color:var(--ink)}
.m-ba-after li::before{content:"✓";position:absolute;left:0;color:var(--pop);font-weight:800}

/* ---- bonuses ---- */
.m-bonuses{background:linear-gradient(180deg,var(--cream-soft),var(--cream))}
.m-bonus-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px}
.m-bonus{background:radial-gradient(120% 90% at 50% 8%,#fffaea 0%,var(--cream-deep) 92%);
  border:1px solid rgba(35,74,52,.10);border-radius:16px;padding:18px 14px;text-align:center}
.m-bonus img{width:76%;height:auto;margin:2px auto 12px;display:block;
  filter:drop-shadow(0 12px 14px rgba(20,39,28,.26))}
.m-bonus h3{font-family:Fraunces,serif;font-weight:700;font-size:14.5px;color:var(--green);
  line-height:1.25;margin-bottom:7px}
.m-bonus p{font-size:12px;line-height:1.5;color:var(--ink-soft);margin-bottom:10px}
.m-bonus-chip{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);background:rgba(16,185,129,.14);border-radius:999px;padding:4px 10px}

/* ---- honest math ---- */
.m-math-rows{max-width:680px;display:grid;gap:0;margin-top:30px}
.mmr{display:flex;align-items:baseline;gap:14px;padding:16px 4px;border-top:1px solid rgba(35,74,52,.11)}
.mmr:first-child{border-top:0}
.mmr span{font-size:15px;font-weight:600;color:var(--ink-soft)}
.mmr i{flex:1;border-bottom:2px dotted rgba(35,74,52,.22);transform:translateY(-4px)}
.mmr b{font-family:Fraunces,serif;font-weight:900;font-size:20px;color:var(--ink-soft);white-space:nowrap}
.mmr-us span,.mmr-us b{color:var(--green)}
.mmr-us b{font-size:26px;color:var(--pop)}

/* ---- guarantee ---- */
.m-gcard{display:flex;gap:30px;align-items:center;max-width:860px;margin:0 auto;
  background:#fffdf6;border:1px solid rgba(35,74,52,.12);border-radius:22px;padding:38px;
  box-shadow:0 26px 60px rgba(20,39,28,.14)}
.m-gseal{flex:0 0 108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Fraunces,serif;font-weight:900;font-size:40px;color:var(--cream);
  background:radial-gradient(circle at 32% 28%,#2f6a49,var(--green-deep));
  box-shadow:0 14px 30px rgba(22,48,36,.4),inset 0 0 0 5px rgba(251,243,215,.22);position:relative}
.m-gseal::after{content:"DAY MONEY-BACK";position:absolute;bottom:16px;font-family:Poppins,sans-serif;
  font-size:7.5px;font-weight:700;letter-spacing:.14em}
.m-gbody h2{margin:0 0 12px;font-size:clamp(22px,3vw,30px)}
.m-gbody p{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.m-gbody b{color:var(--green)}

/* ---- final band ---- */
.m-final{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--green-deep),var(--night));
  padding:110px 0 120px;text-align:center}
.m-final .wrap{position:relative;z-index:2;max-width:820px}
.m-final h2{font-family:Fraunces,serif;font-weight:900;letter-spacing:-.018em;line-height:1.1;
  font-size:clamp(28px,4.4vw,50px);color:var(--cream);margin-bottom:18px}
.m-final h2 em{font-style:normal;color:var(--pop2)}
.m-final .m-stars{justify-content:center}
.m-final .m-proofline{color:rgba(251,243,215,.75)}
.m-final .home-hero-waves{position:absolute;inset:auto 0 0 0;opacity:.16}
.m-compliance{margin-top:34px;font-size:12px;line-height:1.6;color:rgba(251,243,215,.55);max-width:560px;
  margin-left:auto;margin-right:auto}
.m-final .btn-soft{background:rgba(251,243,215,.1);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(251,243,215,.28)}
.m-final .btn-soft:hover{background:rgba(251,243,215,.16)}

/* ---- responsive ---- */
@media(max-width:960px){
  .m-tried-grid{grid-template-columns:repeat(2,1fr)}
  .m-bonus-grid{grid-template-columns:repeat(3,1fr)}
  .m-inside-grid{grid-template-columns:1fr}
  .m-inside-art{grid-template-columns:1fr 1fr;gap:18px;max-width:560px}
  .mia-2{transform:rotate(2.4deg);margin-left:0}
}
@media(max-width:640px){
  .m-sec{padding:64px 0}
  .m-tried-grid{grid-template-columns:1fr}
  .m-ba{grid-template-columns:1fr}
  .m-bonus-grid{grid-template-columns:repeat(2,1fr)}
  .m-bonus:last-child{grid-column:1/-1;max-width:62%;margin:0 auto}
  .mdr{grid-template-columns:1fr;gap:8px}
  .mdr-fig{justify-self:start}
  .m-gcard{flex-direction:column;text-align:center;padding:30px 22px}
  .m-inside-art{grid-template-columns:1fr}
  .mia-1,.mia-2{width:100%;transform:none}
  .cinema .mp-beats{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  .m-hero-art img{transform:none}
}

/* =========================================================================
   /FOR-PRACTITIONERS/ (2026-07-16) — elegant B2B: card orbit + licence seal.
   Reuses the /method/ .m- grammar for tables, math, guarantee, FAQ, final.
   ========================================================================= */
.b2b-hero-art{display:flex;align-items:center;justify-content:center}
.b2b-seal{position:relative;width:min(72%,300px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at 34% 28%,#fffae8 0%,var(--cream-soft) 58%,var(--cream-deep) 100%);
  box-shadow:0 24px 54px rgba(20,39,28,.16),inset 0 0 0 1px rgba(35,74,52,.10);text-align:center}
.b2b-seal b{font-family:Fraunces,serif;font-weight:900;font-size:clamp(30px,3.4vw,40px);color:var(--green)}
.b2b-seal span{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage);line-height:1.5}
.b2b-seal-ring{position:absolute;inset:-14px;border-radius:50%;
  border:2px dashed rgba(16,185,129,.45);animation:b2bspin 28s linear infinite}
@keyframes b2bspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.b2b-seal-ring{animation:none}}

/* the card orbit — same stage mechanics as home's, tuned for photo cards */
.b2b-stage{position:relative;height:560px;margin:14px auto 8px;max-width:1180px;
  overflow:hidden;cursor:grab}
.b2b-stage.is-grab{cursor:grabbing}
.b2b-stage .orbit-ring{position:absolute;inset:0}
/* the seal rides ABOVE the ring (z 100) and slightly high (44%), so the front card
   emerges fully below it instead of colliding — the ring reads as revolving around
   a fixed medallion. */
.b2b-center{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:100;
  width:190px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;text-align:center;
  background:radial-gradient(circle at 34% 28%,#2f6a49,var(--green-deep));
  box-shadow:0 22px 48px rgba(22,48,36,.42),inset 0 0 0 5px rgba(251,243,215,.18)}
.b2c-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--pop2)}
.b2b-center b{font-family:Fraunces,serif;font-weight:900;font-size:44px;color:var(--cream);line-height:1}
.b2c-sub{font-size:11px;font-weight:700;color:rgba(251,243,215,.78)}
.b2b-orb{position:absolute;left:50%;top:47%;width:clamp(112px,12vw,152px);will-change:transform}
.b2b-orb img{width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:0 16px 34px rgba(20,39,28,.28);border:1px solid rgba(35,74,52,.10)}
.b2b-orb span{display:block;margin-top:8px;text-align:center;font-size:11.5px;font-weight:700;
  color:var(--green);background:rgba(252,245,221,.9);border-radius:999px;padding:4px 10px;
  box-shadow:0 6px 16px rgba(20,39,28,.14)}
@media(max-width:640px){.b2b-stage{height:470px}.b2b-center{width:144px}.b2b-center b{font-size:32px}}

/* measured table refinements */
.b2b-table .bt-name a{font-family:Fraunces,serif;font-weight:700;font-size:16.5px;
  color:var(--green);text-decoration:none}
.b2b-table .bt-name a:hover{color:var(--pop)}
.b2b-table .bt-name span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-style:italic}
.b2b-table .bt-n{font-family:Fraunces,serif;font-weight:900;font-size:19px;color:var(--green);
  text-align:center;white-space:nowrap}
.b2b-table th:not(:first-child){text-align:center}

/* =========================================================================
   /GUIDES/ hub grid (2026-07-16) — the old grid was UNSTYLED raw CG cutouts at
   natural size ("make the images a little smaller" — they were enormous).
   ========================================================================= */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:6px auto 34px}
.hub-card{display:flex;flex-direction:column;text-decoration:none;border-radius:16px;overflow:hidden;
  background:#fffdf6;border:1px solid rgba(35,74,52,.10);box-shadow:0 12px 30px rgba(20,39,28,.10);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.hub-card:hover{box-shadow:0 26px 52px rgba(20,39,28,.20)}
.hub-photo{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--cream-deep)}
.hub-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;
  transition:transform .5s var(--ease)}
.hub-card:hover .hub-photo img{transform:scale(1.045)}
.hub-body{display:flex;flex-direction:column;gap:5px;padding:16px 18px 18px;text-align:left}
.hub-moment{font-size:12px;font-style:italic;color:var(--ink-soft);line-height:1.4}
.hub-name{font-family:Fraunces,serif;font-weight:900;font-size:18px;color:var(--green);
  letter-spacing:-.01em;line-height:1.15}
.hub-facts{font-size:12px;font-weight:600;color:var(--sage)}
.hub-open{margin-top:5px;font-size:13px;font-weight:700;color:var(--pop)}
.hub-or{text-align:center;color:var(--ink-soft);font-weight:600;margin:8px 0 16px}
.hub-ladder{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto}
.hub-ladder-card{display:flex;flex-direction:column;gap:3px;text-decoration:none;border-radius:16px;
  padding:20px 22px;background:rgba(35,74,52,.06);border:1px solid rgba(35,74,52,.13)}
.hub-ladder-card b{font-family:Fraunces,serif;font-weight:900;font-size:17.5px;color:var(--green)}
.hub-ladder-card span{font-size:13px;color:var(--ink-soft)}
.hub-ladder-card i{font-style:normal;font-weight:800;color:var(--pop);margin-top:4px}
.hub-ladder-main{background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.28)}
@media(max-width:900px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hub-grid{grid-template-columns:1fr}.hub-ladder{grid-template-columns:1fr}
  .hub-photo{aspect-ratio:5/4}}
/* the b2b ethics card borrows the seal but is NOT the money-back seal */
.m-gseal--plain::after{content:none}

/* =========================================================================
   CROSS-LINK BLOCK (2026-07-17) — internal-linking SEO. Sits above the
   footer on every real content page. Plain card grid, no motion dependency
   beyond the shared .tilt/.reveal (already no-JS-safe via base CSS states).
   ========================================================================= */
.xl-sec{padding:56px 0 64px;border-top:1px solid rgba(35,74,52,.10)}
.xl-sec .eyebrow{display:block;margin-bottom:16px;text-align:center}
.xl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;max-width:1080px;margin:0 auto}
.xl-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;border-radius:14px;
  padding:20px 20px 18px;background:rgba(35,74,52,.05);border:1px solid rgba(35,74,52,.11);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.xl-card:hover{background:rgba(16,185,129,.08);box-shadow:0 14px 30px rgba(20,39,28,.12)}
.xl-card b{font-family:Fraunces,serif;font-weight:800;font-size:16px;color:var(--green);letter-spacing:-.005em}
.xl-card span{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.xl-card i{font-style:normal;font-size:12px;font-weight:700;color:var(--pop);margin-top:2px}
@media(max-width:560px){.xl-grid{grid-template-columns:1fr}}

/* ═══ SUPPORT CHAT (2026-07-27e) ═══════════════════════════════════════════════════
   Quiet by design: a corner button that never auto-opens and never pops a bubble.
   On an anxiety site, an unsolicited widget grabbing at the reader is the wrong move. */
.ch-btn{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex;align-items:center;
  gap:9px;padding:12px 18px;border:0;border-radius:99px;cursor:pointer;
  font-family:Poppins,sans-serif;font-weight:700;font-size:14.5px;
  background:linear-gradient(135deg,var(--pop),var(--pop2));color:#08130D;
  box-shadow:0 10px 26px rgba(81,183,136,.45),0 0 30px rgba(111,214,160,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ch-btn:hover{transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(81,183,136,.6),0 0 44px rgba(111,214,160,.55)}
.ch-btn svg{flex:none}
body.ch-open .ch-btn{transform:scale(.9);opacity:.55}

.ch-panel{position:fixed;right:18px;bottom:82px;z-index:121;width:min(380px,calc(100vw - 36px));
  height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:20px;
  box-shadow:0 30px 80px -24px rgba(20,39,28,.55),0 0 0 1px rgba(35,74,52,.1);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
body.ch-open .ch-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}

.ch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:var(--panel,#234A34);color:#FBF3D7}
.ch-head b{display:block;font-family:Fraunces,serif;font-size:16px}
.ch-head span{display:block;font-size:11.5px;opacity:.72;margin-top:1px}
.ch-head-btns{display:flex;align-items:center;gap:10px;flex-shrink:0}
.ch-x{background:none;border:0;color:#FBF3D7;font-size:26px;line-height:1;cursor:pointer;
  padding:0 2px;opacity:.75}
.ch-x:hover{opacity:1}
/* "Start over" — returns to the suggested questions. Deliberately a readable word rather
   than a ↺ glyph: an anxious reader shouldn't have to guess what an icon does. */
.ch-restart{background:none;border:1px solid rgba(251,243,215,.42);color:#FBF3D7;
  font:inherit;font-size:11.5px;line-height:1;cursor:pointer;padding:6px 9px;
  border-radius:999px;opacity:.85;white-space:nowrap}
.ch-restart:hover{opacity:1;border-color:rgba(251,243,215,.8)}

.ch-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--cream-soft,#F5ECCF)}
.ch-msg{max-width:88%;padding:11px 13px;border-radius:14px;font-size:14px;line-height:1.55}
.ch-msg p{margin:0 0 8px}.ch-msg p:last-child{margin:0}
.ch-assistant{align-self:flex-start;background:#fff;color:var(--ink);
  box-shadow:0 4px 14px -8px rgba(49,85,63,.4)}
.ch-user{align-self:flex-end;background:var(--green,#234A34);color:#FBF3D7}
.ch-crisis{background:#FFF6E9;box-shadow:inset 0 0 0 1.5px #E5A83C}

.ch-typing{display:flex;gap:4px;align-items:center}
.ch-typing span{width:6px;height:6px;border-radius:50%;background:var(--sage);
  animation:chdot 1.1s infinite}
.ch-typing span:nth-child(2){animation-delay:.15s}
.ch-typing span:nth-child(3){animation-delay:.3s}
@keyframes chdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ch-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;background:var(--cream-soft,#F5ECCF)}
.ch-chip{border:0;cursor:pointer;padding:7px 12px;border-radius:99px;
  background:rgba(35,74,52,.09);color:var(--green);font-family:Poppins,sans-serif;
  font-size:12.5px;font-weight:600}
.ch-chip:hover{background:rgba(35,74,52,.16)}

.ch-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(35,74,52,.12);background:#fff}
.ch-in{flex:1;min-width:0;border:1px solid rgba(35,74,52,.22);border-radius:11px;
  padding:11px 13px;font-family:Poppins,sans-serif;font-size:14px;color:var(--ink)}
.ch-in:focus{outline:none;border-color:var(--pop);box-shadow:0 0 0 3px rgba(81,183,136,.2)}
.ch-send{flex:none;width:42px;border:0;border-radius:11px;cursor:pointer;color:#08130D;
  background:linear-gradient(135deg,var(--pop),var(--pop2))}

.ch-hand{display:flex;flex-direction:column;gap:7px;padding:13px;border-radius:14px;
  background:#fff;box-shadow:inset 0 0 0 1.5px rgba(81,183,136,.5)}
.ch-hand b{font-family:Fraunces,serif;font-size:14.5px;color:var(--green)}
.ch-hand input{border:1px solid rgba(35,74,52,.22);border-radius:9px;padding:9px 11px;
  font-family:Poppins,sans-serif;font-size:13.5px}
.ch-hand button{border:0;border-radius:9px;padding:10px;cursor:pointer;font-weight:700;
  font-family:Poppins,sans-serif;font-size:13.5px;color:#08130D;
  background:linear-gradient(135deg,var(--pop),var(--pop2))}
.ch-hand button[disabled]{opacity:.6;cursor:default}
.ch-hand-note{font-size:11.5px;color:var(--ink-soft)}

.ch-foot{margin:0;padding:9px 14px 12px;font-size:11px;line-height:1.45;
  color:var(--ink-soft);background:#fff;text-align:center}

@media(max-width:520px){
  .ch-btn{right:12px;bottom:12px;padding:11px 15px;font-size:13.5px}
  .ch-btn span{display:none}
  .ch-panel{right:10px;left:10px;bottom:72px;width:auto;height:min(70vh,520px)}
}
@media (prefers-reduced-motion: reduce){
  .ch-btn,.ch-panel{transition:none}.ch-typing span{animation:none}
}

/* ── /my-pin/ — THE PIN PICKER (2026-07-31) ─────────────────────────────────────
   Five places, five destinations. Uses only variables that EXIST on this site
   (--cream-soft / --ink / --green / --sage) — a previous block used --panel and
   --hair, which don't exist here, and rendered as a transparent box. */
.pin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin:30px 0 6px}
.pin-card{background:var(--cream-soft);border:1px solid rgba(49,85,63,.14);border-radius:var(--radius);
  padding:22px 20px 20px;display:flex;flex-direction:column;gap:9px}
.pin-card h3{font-size:1.19rem;line-height:1.25}
.pin-card .pin-line{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:0}
.pin-card .pin-kit{font-size:.95rem;margin:2px 0 0;color:var(--ink)}
.pin-card .pin-kit s{opacity:.55;margin-right:2px}
.pin-card .pin-note{display:block;font-size:.83rem;color:var(--sage);margin-top:3px}
.pin-card .btn{margin-top:auto;align-self:flex-start}
@media(max-width:520px){.pin-grid{grid-template-columns:1fr}.pin-card .btn{align-self:stretch;text-align:center}}

/* ══════════════════════════════════════════════════════════════════════════
   /night-alarm/ — the $7 ADVERTORIAL (rebuilt 2026-08-04)
   Extends the m-* system from the $47 method page. One ask, no capture form.
   Mobile-first: this page takes ~7x the traffic on phones and converts ~22%
   worse there, so every rule below is written for the phone and relaxed up.
   ══════════════════════════════════════════════════════════════════════════ */

/* the trust line that follows every CTA */
.na-trust{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-top:14px;max-width:56ch}
.page-hero-copy .na-trust{margin-top:16px}
.na-trust-dark{color:rgba(252,245,221,.72);margin:16px auto 0;max-width:38ch}

/* HERO — the CTA has to clear the fold on a 1280x720 laptop, which is where this was
   measured failing: the h1 ran to 64px, its bottom landed at y=713 and the button sat at
   y=870, 150px below the fold. Smaller display type here than on the $47 page, on purpose.
   ⚠️ height:auto is load-bearing. The reset has `img{max-width:100%}` and no height rule,
   so the HTML height attribute wins and the art renders 320x1125 instead of 320x400. */
.na-hero .page-hero-art img{border-radius:18px;height:auto;
  /* 2026-08-04: the hero is now the whole-box composite (book + cards + worksheets +
     audio + notion), which needs more presence than the lone book shot did. Still
     capped so the CTA clears a 1280x720 fold. */
  width:min(400px,92%);max-height:min(62vh,560px);object-fit:contain}
.na-hero h1{font-size:clamp(31px,4.2vw,50px);margin:12px 0 14px}
.na-hero .lede{max-width:52ch}
@media(max-width:860px){
  .na-hero .page-hero-art{margin-top:26px}
  .na-hero .page-hero-art img{max-width:300px;max-height:none;margin:0 auto}
}

/* the three-beat mechanism strip — rises / crests / falls */
.na-beats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.na-beat{background:#fff9;border:1px solid rgba(35,74,52,.10);border-radius:16px;padding:18px 18px 20px}
.na-beat b{display:block;font-family:Fraunces,serif;font-weight:800;font-size:1.12rem;color:var(--green);
  letter-spacing:-.015em;margin-bottom:5px}
.na-beat span{display:block;font-size:14px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:700px){.na-beats{grid-template-columns:1fr;gap:10px}}

/* what $7 gets you */
.na-gets{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.na-get{background:#fff9;border:1px solid rgba(35,74,52,.10);border-radius:18px;padding:24px}
.na-get b{display:block;font-family:Fraunces,serif;font-weight:800;font-size:1.2rem;color:var(--green);
  letter-spacing:-.015em}
.na-get i{display:block;font-style:normal;font-weight:600;font-size:13.5px;color:var(--pop);
  margin:3px 0 10px;letter-spacing:.01em}
.na-get p{font-size:15px;line-height:1.62;color:var(--ink-soft)}
@media(max-width:760px){.na-gets{grid-template-columns:1fr}}

/* real inside pages */
.na-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.na-page{margin:0;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 14px 40px rgba(35,74,52,.13);border:1px solid rgba(35,74,52,.09)}
.na-page img{width:100%;height:auto}
.na-pagenote{text-align:center;font-size:13px;color:var(--sage);margin-top:14px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}
@media(max-width:700px){
  /* three portrait pages side by side are unreadable on a phone — scroll them instead */
  .na-pages{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .na-page{scroll-snap-align:center}
}

.na-obj .faq-list{margin-top:30px}
.na-honest .m-lede{max-width:62ch}
.na-final-lede{color:rgba(252,245,221,.8);font-size:1.02rem;margin-top:14px}

/* ── the sticky buy bar. Phone-first; it is the single cheapest conversion lever we
      have evidence for. Hidden until the hero CTA leaves, hidden again at the final CTA. */
.na-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(252,245,221,.94);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid rgba(49,85,63,.16);box-shadow:0 -8px 30px rgba(35,74,52,.12);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
.na-sticky[hidden]{display:none}
.na-sticky-in{width:min(1120px,100%);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.na-sticky-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.na-sticky-txt b{font-family:Fraunces,serif;font-weight:800;font-size:1rem;color:var(--green);
  letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-sticky-txt i{font-style:normal;font-size:12.5px;color:var(--ink-soft)}
.na-sticky-btn{flex:0 0 auto;padding:12px 20px;font-size:14.5px}
@media(prefers-reduced-motion:reduce){.na-sticky{transition:none}}

/* The sticky buy bar and the support-chat bubble both live bottom-right and both are
   position:fixed, so they collided — MEASURED on the deployed page at 375px: the bubble
   sat at x311–363 over a button ending at x361, clipping "— $7" off the CTA. The bar sets
   .na-bar-on on <body>, and everything bottom-right lifts above it. (Class toggle rather
   than :has() so this does not depend on selector support.) */
body.na-bar-on .ch-btn{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.na-bar-on .ch-panel{bottom:calc(148px + env(safe-area-inset-bottom,0px))}
/* belt and braces: never let the CTA run under where the bubble would be */
.na-bar-on .na-sticky-in{padding-right:4px}
@media(max-width:420px){
  .na-sticky-txt i{display:none}          /* one line of text on a small phone, not two */
  .na-sticky-btn{padding:12px 16px}
}

/* the provenance proof line — the only proof this product can honestly carry
   (0 sales, 0 reviews; ratings and testimonials are off-limits under 16 CFR 465) */
.na-proof{display:block;font-weight:700;color:var(--green);font-size:14px;margin-bottom:4px;
  letter-spacing:.005em}
.na-trust-dark .na-proof{color:var(--pop2)}

/* ⛔ THE 867px DEAD BAND (found 2026-08-04 by measuring, Zak: "big empty space before footer").
   .m-final's decorative wave svg must be ABSOLUTE. The $47 page positions it via
   `.m-final .home-hero-waves`; /night-alarm/ uses .final-waves, which had no positioning
   rule, so an 867px-tall element sat in normal flow and pushed the footer down.
   Measured: section 1404px tall around 307px of content. */
.m-final .final-waves{position:absolute;inset:auto 0 0 0;opacity:.16;pointer-events:none}

/* BIGGER — Zak: "make the hero image and features bigger so it is seen clearly" */
.na-hero .page-hero-art img{width:min(520px,100%);max-height:min(74vh,700px)}
@media(max-width:860px){
  .na-hero .page-hero-art img{max-width:none;width:100%;max-height:none}
}
/* the what-you-get cards: larger type, more air, so the offer reads at a glance */
.na-get{padding:30px 30px 32px}
.na-get b{font-size:1.42rem}
.na-get i{font-size:15px;margin:5px 0 12px}
.na-get p{font-size:16.5px;line-height:1.6}
/* the real inside pages: bigger, and 2-up on desktop so each page is legible */
.na-pages{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.na-page{border-radius:16px;box-shadow:0 20px 54px rgba(35,74,52,.17)}
@media(min-width:1100px){ .na-pages{gap:28px} }
@media(max-width:700px){ .na-pages{grid-template-columns:repeat(3,82%);gap:14px} }
/* the three mechanism beats */
.na-beat{padding:24px 24px 26px}
.na-beat b{font-size:1.3rem}
.na-beat span{font-size:15.5px}

/* "How you get it" — the delivery step strip. The canonical digital-product page order
   (hero → problem → what you get → HOW IT WORKS → benefits → proof → price → FAQ → close)
   had this slot and our page skipped it, so "what actually arrives, and when" went
   unanswered right at the point of decision. Guidance: keep delivery to 3–5 steps. */
.na-how{margin-top:44px;background:#fff9;border:1px solid rgba(35,74,52,.11);
  border-radius:22px;padding:30px 34px 32px}
.na-how-h{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage);margin-bottom:18px}
.na-how-steps{list-style:none;counter-reset:s;display:grid;
  grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0}
.na-how-steps li{counter-increment:s;position:relative;padding-left:50px}
.na-how-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;
  width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--cream);
  font-family:Fraunces,serif;font-weight:900;font-size:18px;
  display:flex;align-items:center;justify-content:center}
.na-how-steps b{display:block;font-family:Fraunces,serif;font-weight:800;font-size:1.12rem;
  color:var(--green);letter-spacing:-.012em;line-height:1.2;margin-bottom:5px}
.na-how-steps span{display:block;font-size:15px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:820px){.na-how-steps{grid-template-columns:1fr;gap:20px}
  .na-how{padding:26px 24px 28px}}

/* The pinned night scene on /night-alarm/ — same machinery the guide pages use
   (.g-night > .night-stage > .night-beat), so guide.js pins and scrubs it with no new JS.
   Without .cinema (JS off / prefers-reduced-motion) the base .night-* rules render it as a
   normal readable stacked section: the fallback is legible, never blank. */
.na-hero + .g-night{margin-top:0}
/* the offer hero gets the guide-page parallax treatment too */
.na-hero .page-hero-art{will-change:transform}

/* ── /night-alarm/ night scene — its OWN classes on purpose.
   Reusing .g-night/.night-stage/.night-beat pulled in guide.js's pinned ScrollTrigger,
   which computed start:-1500 on this page (49 ScrollTriggers here vs a handful on a guide
   page) — the whole scrub finished in the first screen and the beats froze at opacity 0.
   Unpinned is the right trade: the same look, none of the trigger math. Beats animate via
   the ordinary .reveal path, which degrades to fully-visible with JS off. */
.na-night{position:relative;overflow:hidden;background:linear-gradient(180deg,#0d1a14,#0a1611 62%,#122019)}
.na-night-stage{position:relative;padding:110px 22px 118px;text-align:center;min-height:auto}
.na-night-sky{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 70% at 50% 0%, rgba(70,217,160,.11) 0%, rgba(10,22,17,0) 62%)}
.na-night-stars{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.6px 1.6px at 12% 22%, rgba(252,245,221,.75), transparent),
    radial-gradient(1.4px 1.4px at 78% 16%, rgba(252,245,221,.6), transparent),
    radial-gradient(1.8px 1.8px at 62% 40%, rgba(252,245,221,.5), transparent),
    radial-gradient(1.3px 1.3px at 28% 58%, rgba(252,245,221,.45), transparent),
    radial-gradient(1.5px 1.5px at 88% 66%, rgba(252,245,221,.5), transparent),
    radial-gradient(1.2px 1.2px at 40% 82%, rgba(252,245,221,.4), transparent)}
.na-night-clock{width:96px;height:96px;margin:0 auto 26px;display:block;position:relative;z-index:2;
  animation:naClock 9s ease-in-out infinite}
@keyframes naClock{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.na-night-eyebrow{position:relative;z-index:2;color:var(--pop2);display:block;margin-bottom:26px}
.na-night-beats{position:relative;z-index:2;max-width:660px;margin:0 auto;display:grid;gap:30px}
.na-night-beat{font-family:Fraunces,serif;font-weight:700;color:var(--cream);
  font-size:clamp(20px,2.7vw,29px);line-height:1.3;letter-spacing:-.014em;margin:0}
.na-night-beat em{font-style:normal;color:var(--pop2)}
.na-night-beat + .na-night-beat{padding-top:30px;border-top:1px solid rgba(252,245,221,.13)}
@media(prefers-reduced-motion:reduce){.na-night-clock{animation:none}}
@media(max-width:700px){.na-night-stage{padding:80px 20px 86px}.na-night-beats{gap:24px}
  .na-night-beat + .na-night-beat{padding-top:24px}}

/* ── /night-alarm/ price reframe + guarantee (2026-08-05) ───────────────────────
   Evidence: heldhonest.com (Rachel Morrison, 274 active ads) gives BOTH of these
   their own H2 — "$39.95. About 11¢ a day for a year." and "If it doesn't feel
   different, you don't pay." Calm does the same reframe ($79.99/yr -> $6.67/mo).
   We owned the per-night line already and were not using it on the paid-traffic page. */
.na-pernight{display:block;margin-top:11px;font-size:.86rem;letter-spacing:.01em;
  color:var(--sage,#8A9B85);font-weight:500}
.na-guarantee{max-width:36rem;margin:26px auto 0;padding:18px 22px;text-align:center;
  border:1px solid rgba(35,74,52,.18);border-radius:16px;background:rgba(255,255,255,.55)}
.na-guarantee b{display:block;font-family:Fraunces,serif;font-weight:900;
  font-size:clamp(1.06rem,2.3vw,1.32rem);line-height:1.25;color:var(--green,#234A34)}
.na-guarantee span{display:block;margin-top:7px;font-size:.9rem;color:#3b5145;opacity:.9}
@media(max-width:640px){.na-guarantee{margin-top:20px;padding:16px 18px}}

/* ---- GUMROAD CHECKOUT OVERLAY (2026-08-08) --------------------------------------------
   Our own modal (see assets/js/gumcheckout.js for why Gumroad's widget was replaced): the
   reader clicks buy and the PAYMENT FORM opens over the page. Everything outside the frame
   is ours — the frame's contents are cross-origin and cannot be styled at all, which is the
   honest limit of "on brand" here. Hidden until .is-open, so a JS failure shows nothing
   rather than a dead black sheet. */
.gco-back{position:fixed;inset:0;z-index:9000;display:none;overflow-y:auto;
  padding:clamp(10px,3vw,34px);background:rgba(10,22,17,.88);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);backdrop-filter:blur(9px) saturate(1.1)}
.gco-back.is-open{display:block}
.gco-frame{display:block;width:min(1120px,100%);margin:0 auto;height:min(88vh,1000px);
  border:0;border-radius:20px;background:var(--cream,#FBF3D7);opacity:0;
  transition:opacity .45s var(--ease,ease);
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(252,245,221,.14)}
.gco-back.is-ready .gco-frame{opacity:1}
.gco-close{position:fixed;top:14px;right:14px;z-index:2;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:999px;background:var(--green,#234A34);color:var(--cream,#FBF3D7);
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.gco-close:hover{background:#2c5c41}
.gco-close:focus-visible{outline:3px solid var(--pop2,#46D9A0);outline-offset:2px}
/* the wait between the click and the first paint of the form */
.gco-spin{position:fixed;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border-radius:50%;border:3px solid rgba(252,245,221,.28);
  border-top-color:var(--pop2,#46D9A0);animation:gcospin .9s linear infinite}
.gco-back.is-ready .gco-spin{display:none}
@keyframes gcospin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .gco-spin{animation-duration:2.4s}
  .gco-frame{transition:none}
}
@media(max-width:640px){
  .gco-back{padding:0}
  .gco-frame{height:100vh;height:100dvh;border-radius:0}
  .gco-close{top:10px;right:10px}
}