/* ============================================================
   BEGINNERS v3 — section-storytelling pass (loads AFTER beginners-v2.css)

   Brief (Dan, 2026-06-09): the homepage carries the brand quirks
   (layered hero, dark editorial "moment", faint pi monogram motifs);
   the inner pages don't. Each section should be DESIGNED to tell
   that section's story — not stacked boxes.

   What this file does, per section:
   1. HERO        — home-parity: layered media (work + the making of it,
                    inset), warm radial glow behind the copy.
   2. HOOK        — home-parity dark "moment": forest radial ground,
                    editorial two-column, faint pi monogram.
   3. PREP        — the 5-box grid becomes an ink-line MANIFEST:
                    "the moment you book" → 5 portal items → "day one".
                    The section IS the bridge between booking and arriving.
   4. DAYS        — day 04 gets a quiet italic tag ("the day most
                    academies don't give") so the differentiator reads.
   5. METHOD      — principles return to calm editorial list (cards
                    available via Tweaks).
   6. CAN'T DRAW  — pi monogram ground + a hand-drawn underline that
                    draws itself in (the "if you can follow a line" story).
   Tweaks panel lets you flip each decision live.
   ============================================================ */

/* mobile: decorative bleed (pi motifs / footer mark) must never create
   horizontal pan — body{overflow-x:hidden} alone doesn't stop the viewport */
html { overflow-x: hidden; overflow-x: clip; }

/* ============================================================
   TYPE PASS (2026-06-10): reading-copy floors raised site-wide.
   Body/lead/answer text was 14–15.5px (app-UI scale); marketing
   prose now sits 15.5–18px. Labels/eyebrows/captions stay small.
   ============================================================ */
.v3 .how__sub { font-size: clamp(16.5px, 1.2vw, 18px); }
.v3 .hook2__lead { font-size: clamp(16.5px, 1.2vw, 18px); }
.v3 .day__desc { font-size: clamp(16px, 1.2vw, 18px); }
.v3 .craft__note span { font-size: 15.5px; }
.v3 .method2__intro { font-size: 16.5px; }
.v3 .principle__desc { font-size: clamp(16px, 1.15vw, 17.5px); }
.v3 .results__lead { font-size: clamp(16.5px, 1.2vw, 18px); }
.v3 .results__wins li { font-size: 16.5px; }
.v3 .invest__reassure { font-size: 15.5px; }
.v3 .faq2__a p { font-size: 16.5px; }
.v3 .closex__sub { font-size: clamp(16px, 1.25vw, 18.5px); }
.v3 .module__d { font-size: 15.5px; }
.v3 .vcard li { font-size: 15.5px; }
.v3 .pricepanel__incl li { font-size: 15.5px; }
.v3 .manifest__body span { font-size: clamp(15px, 1.1vw, 16.5px); }
.v3 .prep__grid span { font-size: 15px; }

/* ============================================================
   HEADER CLEARANCE + DRAWER SCALE (2026-06-10)
   ============================================================ */
/* desktop heroes: the eyebrow was hugging the fixed nav when the hero
   shares the header's ground — give the page a proper top margin of air */
@media (min-width: 901px) {
  .v3 .phero__copy { padding-top: clamp(160px, 19vh, 215px); }
  .v3 .cdhero { padding-top: clamp(160px, 19vh, 215px); }
}
/* desktop nav: match the hero body-text scale (was 14px) */
.v3 .nav__link { font-size: clamp(16px, 1.15vw, 17.5px); }

/* mobile drawer: calmer menu scale (27px faux-bold serif shouted) */
.nav-drawer__links a { font-size: 21px; -webkit-text-stroke: 0.4px currentColor; }
.nav-drawer__sub a { font-size: 16px !important; }

/* ---------- 1. HERO: layered media + warm glow (ported from home) ---------- */
.v3 .phero { background: radial-gradient(72% 64% at 24% 38%, rgba(255,255,253,.62) 0%, rgba(255,255,253,0) 62%), var(--cream); }
.v3 .phero__media { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
.v3 .phero__frame { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background: var(--cream-deep); box-shadow: 0 40px 80px -52px rgba(55,37,26,.42); }
.v3 .phero__inset { position: absolute; left: clamp(-86px, -6vw, -44px); bottom: clamp(30px, 6vh, 66px); width: clamp(150px, 17vw, 246px); aspect-ratio: 4 / 5; margin: 0; border-radius: 4px; overflow: hidden; border: 6px solid var(--cream); box-shadow: 0 32px 60px -32px rgba(55,37,26,.5); z-index: 4; }
.v3 .phero__inset img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.v3 .phero__cap { left: auto; right: clamp(18px, 2vw, 30px); }
@media (max-width: 900px) {
  .v3 .phero__inset { left: clamp(14px, 4vw, 22px); bottom: 16px; width: clamp(116px, 33vw, 150px); border-width: 5px; }
}

/* ---------- 2. HOOK: the dark editorial "moment" (ported from home) ---------- */
/* layout (applies to both grounds) */
.hook2__grid { max-width: 1180px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 96px); align-items: center; text-align: left; }
.hook2__body-col { max-width: 48ch; }
.hook2__lead { font-family: var(--sans); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.72; color: var(--text-muted); margin: 0; }
.hook2__pull { font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2.3vw, 33px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 24ch; }
.hook2 { position: relative; }
.hook2__wrap { position: relative; z-index: 1; }
@media (max-width: 820px) { .hook2__grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 28px); } .hook2__body-col { max-width: none; } }

/* dark ground (default — the page's early "moment", mirrors home) */
/* solid background-color matters: main.js samples it to flip the sticky CTA
   pill to cream over dark sections — gradients alone report transparent */
.hook2--dark { background-color: #354135; background-image: radial-gradient(115% 90% at 25% 18%, #3e4c3e 0%, #354135 52%, #2c372c 100%); padding-block: clamp(96px, 14vh, 175px); }
.hook2--dark .hook2__eyebrow { color: var(--sage-soft); }
.hook2--dark .hook2__title { color: var(--cream); }
.hook2--dark .hook2__title em { color: var(--sage-soft); }
.hook2--dark .hook2__lead { color: var(--on-dark-muted); }
.hook2--dark .hook2__pull { color: var(--cream); }
/* light ground keeps the dark pi-mark visible */
.hook2:not(.hook2--dark) .pimotif--dark { background-image: url(assets/img/pi-mark.png); opacity: .06; }

/* ---------- 3. PREP: ink-line manifest (replaces the 5-box grid) ---------- */
.prep__wrap { max-width: 1240px; }
.prep__grid2 { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.prep--thread .prep__aside { position: sticky; top: 120px; }
/* cards variant: the cards column is the shorter side - it sticks while the
   aside (text + portal window) scrolls. align-self stops the grid stretching
   the item to full row height, which would defeat sticky. */
@media (min-width: 861px) { .prep--cards .manifest { position: sticky; top: 110px; align-self: start; } }
.prep__aside .prep__lead { margin-bottom: clamp(18px, 2vw, 26px); }
.prep__note { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; color: var(--sage-ink); margin: 0; max-width: 26ch; -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; }

/* the manifest: a fine line drawn from "you book" to "day one" */
.manifest { position: relative; list-style: none; margin: 0; padding: 6px 0 6px clamp(28px, 3vw, 44px); }
.manifest__thread { position: absolute; left: 5px; top: 16px; bottom: 16px; width: 1px; background: var(--line-strong); transform: scaleY(0); transform-origin: top; transition: transform 1.9s var(--ease) .15s; }
.prep.is-in .manifest__thread { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .manifest__thread { transform: none; transition: none; } }

.manifest__cap { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.manifest__node { position: absolute; left: calc(-1 * clamp(28px, 3vw, 44px) + 1px); top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--cream); border: 1px solid var(--sage); }
.manifest__cap--end .manifest__node { background: var(--sage); }
.manifest__cap-label { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-ink); white-space: nowrap; }
.manifest__cap--start { padding-top: 0; }
.manifest__cap--end { padding-bottom: 0; }

.manifest__item { display: grid; grid-template-columns: clamp(40px, 4vw, 58px) 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: baseline; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line); }
.manifest__item:last-of-type { border-bottom: none; }
.manifest__n { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); line-height: 1; color: var(--sage); }
.manifest__body b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 1.8vw, 27px); line-height: 1.15; color: var(--ink); margin-bottom: 7px; -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; }
.manifest__body span { display: block; font-family: var(--sans); font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.58; color: var(--text-muted); max-width: 48ch; }

@media (max-width: 860px) {
  .prep__grid2 { grid-template-columns: 1fr; gap: 34px; }
  .prep__aside { position: static; }
}

/* cards variant (Tweaks: the original 5-box grid, for comparison) */
.prep--cards .manifest { padding-left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.5vw, 20px); }
.prep--cards .manifest__thread, .prep--cards .manifest__cap { display: none; }
.prep--cards .manifest__item { grid-template-columns: 1fr; gap: 0; background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2vw, 26px); box-shadow: 0 18px 40px -34px rgba(55, 37, 26, 0.30); }
.prep--cards .manifest__n { display: none; }
.prep--cards .manifest__body b { font-size: clamp(17px, 1.3vw, 20px); }
@media (max-width: 860px) { .prep--cards .manifest { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .prep--cards .manifest { grid-template-columns: 1fr; } }

/* ---------- 4. DAYS: quiet emphasis on the fourth day ---------- */
.day__tag { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: 0; text-transform: none; color: var(--sage-soft); margin-top: 12px; line-height: 1.3; max-width: 16ch; }

/* ---------- 5. METHOD: calm editorial list (default; cards via Tweaks) ---------- */
/* principles are <details>: always open on desktop (editorial spread),
   tap-to-expand dropdowns on mobile so the section reads condensed */
.principle { --ncol: clamp(40px, 4.4vw, 66px); display: block; }
.principle__head { display: grid; grid-template-columns: var(--ncol) 1fr auto; align-items: baseline; list-style: none; cursor: pointer; }
.principle__head::-webkit-details-marker { display: none; }
.principle__head:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.principle__title { margin: 0; }
.principle__desc { margin: 13px 0 0 var(--ncol); }
.principle__icon { position: relative; width: 15px; height: 15px; align-self: center; flex: none; }
.principle__icon::before, .principle__icon::after { content: ""; position: absolute; background: var(--sage-ink); transition: transform 0.3s var(--ease); }
.principle__icon::before { top: 7px; left: 0; width: 15px; height: 1.4px; }
.principle__icon::after { left: 7px; top: 0; width: 1.4px; height: 15px; }
.principle[open] .principle__icon::after { transform: scaleY(0); }
@media (min-width: 861px) {
  .principle__head { pointer-events: none; cursor: default; }
  .principle__icon { display: none; }
}
@media (max-width: 860px) {
  .principle { --ncol: 34px; }
  .principle__desc { margin-left: 0; }
}
.method2--editorial .method2__list { display: block; }
.method2--editorial .principle { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: clamp(22px, 3vw, 52px) 0; border-top: 1px solid var(--line); display: block; transform: none; }
.method2--editorial .principle:first-child { border-top: none; padding-top: 0; }
.method2--editorial .principle:last-child { padding-bottom: 0; }
.method2--editorial.method2 .principle.reveal { transform: translateY(26px); }
.method2--editorial.method2 .principle.reveal.is-in { transform: none; }
@media (max-width: 860px) { .method2--editorial .principle { grid-template-columns: 1fr; } }

/* ---------- 6. CAN'T DRAW: monogram ground + a line you can follow ---------- */
/* The prospect's question, made legible: eyebrow names it as the question
   she's asked most, the quote itself moves from Miltona script (pretty but
   hard work) to the site's italic serif with the faux-bold stroke. */
.cantdraw__eyebrow { font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 20px; }
.cantdraw__q { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.06; color: var(--sage-ink); margin: 0 0 18px; -webkit-text-stroke: 0.55px currentColor; paint-order: stroke fill; }
/* the answer sits under the question — slightly smaller, full ink, so it reads
   as the firm reply rather than out-shouting the question */
.v3 .cantdraw__title { font-size: clamp(24px, 2.9vw, 39px); max-width: 24ch; }
.cantdraw { position: relative; }
.cantdraw__wrap { position: relative; z-index: 1; }
.cantdraw__line { display: block; width: clamp(140px, 16vw, 220px); height: 14px; margin: 18px auto 0; color: var(--sage); }
.cantdraw__line path { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.cantdraw.is-in .cantdraw__line path { animation: pi-draw 1.6s var(--ease) .35s forwards; }
@keyframes pi-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cantdraw__line path { stroke-dashoffset: 0; animation: none; } }

/* ---------- 7. THE INVESTMENT: one focal object, three voices ---------- */
/* "A lot going on, all the same flat style" → give the conversion moment
   hierarchy by TONE: the purchase module becomes the section's single dark
   focal object (forest, like home's Studio Success card); the graduate
   quote becomes a true pull-quote; the bonus stack gets its own quiet
   paper ledger. Cream ground · white ledger · forest object. */
.pricepanel--dark { position: relative; overflow: hidden; background-color: #354135; background-image: radial-gradient(120% 140% at 80% 8%, #3e4c3e 0%, #354135 55%, #2b352b 100%); box-shadow: 0 46px 90px -44px rgba(42, 51, 42, 0.6); }
/* the purchase object stays in view while the pitch scrolls past it */
.v3 .invest__wrap { align-items: start; }
.v3 .pricepanel { position: sticky; top: clamp(96px, 12vh, 120px); }
@media (max-width: 860px) { .v3 .pricepanel { position: static; } }
.pricepanel--dark > * { position: relative; z-index: 1; }
.pricepanel--dark .pimotif { position: absolute; z-index: 0; width: 280px; height: 280px; top: auto; left: auto; right: -80px; bottom: -80px; opacity: .10; }
.pricepanel--dark .pricepanel__label { color: var(--sage-soft); }
.pricepanel--dark .pricepanel__price { color: var(--cream); }
.pricepanel--dark .pricepanel__price .vat { color: var(--on-dark-muted); }
.pricepanel--dark .pricepanel__terms { color: var(--on-dark-muted); }
.pricepanel--dark .payopt { background: rgba(255, 255, 253, 0.06); border-color: var(--line-dark); }
.pricepanel--dark .payopt__k { color: var(--cream); }
.pricepanel--dark .payopt__v { color: var(--on-dark-muted); }
.pricepanel--dark .pricepanel__incl li { color: var(--on-dark); }
.pricepanel--dark .pricepanel__incl .tick { stroke: var(--sage-soft); }
.pricepanel--dark .pricepanel__cta { background: var(--cream); color: var(--ink); }
.pricepanel--dark .pricepanel__cta:hover { background: var(--white); }
.pricepanel--dark .pricepanel__proof { border-top-color: var(--line-dark); color: var(--on-dark-muted); }
.pricepanel--dark .pricepanel__proof .stars { color: var(--cream); }
.pricepanel--dark .accredit { color: var(--on-dark-muted); }
.pricepanel--dark .accredit svg { stroke: var(--sage-soft); }
.pricepanel--dark .accredit b { color: var(--cream); }

/* graduate quote → editorial pull-quote (her words, not another paragraph) */
.v3 .invest__quote { border-top: none; position: relative; padding: 0; max-width: 40ch; margin-top: clamp(30px, 3.4vw, 46px); }
.v3 .invest__quote p { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.35; -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; }
.v3 .invest__quote cite { display: inline-flex; align-items: center; gap: 10px; }
.v3 .invest__quote cite::before { content: ""; width: 26px; height: 1px; background: var(--sage); }

/* bonus stack → its own quiet paper ledger */
.v3 .invest__bonus { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: clamp(22px, 2.4vw, 32px); margin-top: clamp(26px, 3vw, 38px); box-shadow: 0 18px 40px -34px rgba(55, 37, 26, 0.25); }
.v3 .invest__bonus-foot { -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; }

/* ---------- shared v3 component: the portal window (drag-drop screenshots) ---------- */
.portalwin { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: 0 32px 64px -38px rgba(55, 37, 26, 0.35); overflow: hidden; }
.portalwin__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--cream); }
.portalwin__bar i { width: 10px; height: 10px; border-radius: 50%; }
.portalwin__bar i:nth-of-type(1) { background: #DE8377; }
.portalwin__bar i:nth-of-type(2) { background: #DEBC7A; }
.portalwin__bar i:nth-of-type(3) { background: #9CBE92; }
.portalwin__bar b { margin-left: 8px; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-ink); white-space: nowrap; }
/* chrome-style address pill (use on the big cinema frame) */
.portalwin__url { flex: 1; max-width: 440px; margin-left: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-family: var(--sans); font-weight: 500 !important; font-size: 11.5px !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--text-muted) !important; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.portalwin image-slot { display: block; width: 100%; aspect-ratio: 16 / 10; }
.portalwin__cap { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 11px 14px; border-top: 1px solid var(--line); }
.portalwin__cap svg { width: 13px; height: 13px; color: var(--sage-ink); flex: none; }
.portalwin--mini { max-width: 380px; margin-top: clamp(22px, 2.4vw, 32px); }
@media (max-width: 760px) { .portalwin--mini { margin-left: auto; margin-right: auto; } }

/* craft captions: wrap as whole phrases at every width (bites on laptops too) */
.craft__cap { flex-wrap: wrap; row-gap: 2px; }
.craft__cap b, .craft__cap span { white-space: nowrap; }

/* training hub: spec values hold one line (avoids "4 / days" splits) */
.v3 .tcard__spec .v { white-space: nowrap; }

/* ---------- FAQ: faint monogram (home parity) ---------- */
.faq2 { position: relative; }
.faq2__wrap { position: relative; z-index: 1; }

/* closing: solid colour under the gradient+photo so the sticky CTA pill
   flips to cream here too (same sampling fix as the dark hook) */
.v3 .closex { background-color: #2A332A; }

/* ============================================================
   MOBILE PASS (v3 sections) — matches the home page's mobile
   rhythm: centred marketing copy, stacked columns, wrap-safe rows.
   ============================================================ */
@media (max-width: 860px) {
  /* four-days: lead row wraps so the day-4 tag drops to its own line */
  .day__lead { flex-wrap: wrap; }
  .day__tag { flex-basis: 100%; margin-top: 4px; max-width: none; }
  /* "DAY ONE" never breaks mid-label next to the big numeral */
  .day__label { white-space: nowrap; }
  /* chips wrap as whole pills, never mid-text */
  .day__points li { white-space: nowrap; }
  /* investment: re-order for mobile hierarchy — pitch → price → proof → bonuses */
  .invest__copy { display: contents; }
  .invest__eyebrow { order: 1; }
  .invest__title { order: 2; }
  .invest__lead { order: 3; }
  .invest__reassure { order: 4; margin-bottom: 6px; }
  .v3 .pricepanel { order: 5; }
  .v3 .invest__bonus { order: 6; }
  .v3 .invest__quote { order: 7; margin-top: clamp(28px, 6vw, 40px); }
}
@media (max-width: 760px) {
  /* the editorial trace-frame keeps the border on mobile, pulled tight to the
     section edge so the text column stays clear inside it */
  .pi-frame { inset: 18px 12px; }
  /* flex eyebrows need justify, not text-align, to centre */
  .prep__eyebrow, .craft__eyebrow { justify-content: center; }
  /* craft head centres on mobile (home parity) */
  .craft__head { text-align: center; }
  .craft__note { margin-left: auto; margin-right: auto; }
  .craft__title { margin-left: auto; margin-right: auto; }
  /* heroes centre on mobile, matching every other centred section head */
  .phero__copy, .cdhero__copy { text-align: center; }
  .phero__eyebrow, .cdhero__eyebrow { justify-content: center; }
  .phero__sub, .cdhero__sub { margin-left: auto; margin-right: auto; }
  .cdhero__cta { justify-content: center; }
  .cdhero__proof { justify-content: center; }
  /* hero: CTA button and quiet link stack instead of squeezing */
  .phero__cta { flex-direction: column; align-items: center; gap: 16px; }
  .phero__cta .link-quiet { white-space: nowrap; }
  /* the quiet call-out centres like home's mobile hook */
  .hook2__grid, .hook2__head-col, .hook2__body-col { text-align: center; }
  .hook2__body-col, .hook2__pull { margin-left: auto; margin-right: auto; }
  /* before-you-arrive: intro centres, the manifest stays a left-read list */
  .prep__aside { text-align: center; }
  .prep__aside .prep__lead, .prep__note { margin-left: auto; margin-right: auto; }
  /* cards variant: centre card content to match the centred section head */
  .prep--cards .manifest__item { text-align: center; }
  .prep--cards .manifest__body span { margin-left: auto; margin-right: auto; }
  /* method + investment heads centre like every other section head */
  .method2__aside { text-align: center; }
  .invest__eyebrow, .invest__title, .invest__lead, .invest__reassure { text-align: center; }
  /* graduate quote: keep the cite on one line beside its rule */
  .invest__quote { margin-left: auto; margin-right: auto; }
  .invest__quote cite { white-space: nowrap; }
  /* results outcome list: centred block, left-read items (dots stay attached) */
  .results__wins { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
  /* footer legal: wrap between phrases, not inside them */
  .footer__legal span { white-space: nowrap; }
}
@media (max-width: 359px) {
  /* very small screens: let the tight labels wrap again */
  .manifest__cap-label { white-space: normal; }
  .day__points li { white-space: normal; }
}

/* ===== Google-review screenshot cards (real reviews from her GBP / old site, 2026-06-12) =====
   Visual proof = the actual screenshot; crawlable layer = the full review text in alt. */
.gshot { break-inside: avoid; background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: clamp(14px, 1.4vw, 20px); margin: 0 0 clamp(16px, 2vw, 24px); box-shadow: 0 22px 48px -36px rgba(55, 37, 26, 0.26); }
.gshot img { display: block; width: 100%; height: auto; border-radius: 2px; }
.gshot figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-ink); }
.invest__copy .gshot { max-width: 440px; margin-top: clamp(30px, 3.4vw, 46px); margin-bottom: 0; }
/* wall variant: a visible serif pull-line above the meta row - the crawlable, scannable layer */
/* sans, not the display serif: at this size Emilea reads poorly (same lesson as the bonus titles) */
.gshot__pull { display: block; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.4; letter-spacing: 0.005em; text-transform: none; color: var(--ink); margin: 14px 2px 8px; }
.gshot figcaption:has(.gshot__pull) { display: block; margin-top: 0; }
.gshot__meta { display: flex; align-items: baseline; gap: 10px; }


/* ====== Last-option lead form (Kajabi embed 2149349732, brand-skinned) ====== */
.pi-leadform { background: var(--cream); color: var(--ink); padding: clamp(72px,12vh,140px) 0; text-align: center; overflow: clip; }
.pi-leadform__wrap { max-width: 600px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px); }
.pi-leadform__eyebrow { display:inline-flex; align-items:center; gap:14px; font-family:var(--sans); font-size:clamp(11px,.85vw,13px); font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--sage-ink); margin:0 0 22px; }
.pi-leadform__eyebrow .rule { width:40px; height:1px; background:var(--sage); }
.pi-leadform__title { font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.2vw,50px); line-height:1.07; letter-spacing:-.015em; color:var(--ink); margin:0 0 18px; }
.pi-leadform__title em { font-style:italic; color:var(--sage-ink); }
.pi-leadform__sub { font-family:var(--sans); font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--ink-soft); margin:0 auto 36px; max-width:46ch; }
.pi-leadform__embed { max-width:430px; margin:0 auto; text-align:left; }
/* skin the Kajabi-injected markup to brand (its CSS is injected mid-body, so win on specificity + !important) */
.pi-leadform__embed .kajabi-form__title,
.pi-leadform__embed .kajabi-form__subtitle { display:none !important; } /* our own copy sits above */
.pi-leadform__embed .kajabi-form, .pi-leadform__embed .kajabi-form * { font-family:var(--sans) !important; }
.pi-leadform__embed fieldset { border:0; margin:0; padding:0; }
.pi-leadform__embed .kajabi-form__form-item { margin:0 0 10px; }
.pi-leadform__embed .kajabi-form__form-item input {
  width:100% !important; box-sizing:border-box;
  background:var(--white) !important; border:1px solid var(--line) !important; border-radius:2px !important;
  padding:13px 15px !important; font-size:15px !important; color:var(--ink) !important; }
.pi-leadform__embed .kajabi-form__form-item input::placeholder { color:var(--ink-soft); opacity:.75; }
.pi-leadform__embed .kajabi-form__form-item input:focus { outline:none; border-color:var(--sage) !important; }
.pi-leadform__embed .kajabi-form__btn {
  width:100%; background:var(--forest) !important; color:var(--white) !important; border:none !important;
  border-radius:2px !important; padding:14px 22px !important; margin-top:4px; cursor:pointer;
  font-size:14px !important; font-weight:600 !important; letter-spacing:.04em; transition:background .35s var(--ease); }
.pi-leadform__embed .kajabi-form__btn:hover { background:var(--ink) !important; }