/* =====================================================================
   Wild Herb Academy — homepage design system
   ---------------------------------------------------------------------
   THE one stylesheet for our bespoke sections (per CLAUDE.md).
   - Design tokens live on :root below. Values marked "(setting)" are
     overridden at runtime by the Wild Herb Header section's "Page Style"
     settings (see sections/wha_header.liquid), so they are editable from
     the Kajabi sidebar.
   - Per-section tunables (sizes, offsets) arrive as CSS custom properties
     set inline on each section's root element from its own settings.
   - Every class is prefixed `wha-` so nothing collides with Encore's
     core.css / styles.css (which also define .btn, .section, h1..h6, etc).
   - Fonts (@font-face) and the paper texture URL are emitted by
     wha_header.liquid because they need Liquid's asset_url filter.
   ===================================================================== */

:root {
  /* v7 palette (Nov 4 call): April's navy for header/hero/dark bands, sage + peach accents,
     warm cream instead of pure white, charcoal (not blue) text. */
  --wha-bg: #F8F3EC;            /* (setting) page background: warm cream */
  --wha-header-bg: #1F2B47;     /* (setting) header: April's navy */
  --wha-header-ink: #FBF7F1;    /* text/icons on the navy header */
  --wha-bg-panel: #EFE7DB;      /* alternate band: deeper cream */
  --wha-bg-frame: #FFFDF9;      /* cards */
  --wha-bg-dark: #1F2B47;       /* (setting) dark bands = navy */
  --wha-ink: #26282C;           /* (setting) main text: charcoal */
  --wha-ink-soft: #55575A;
  --wha-ink-faint: #8C8A84;
  --wha-line: #E2D9CB;
  --wha-accent: #EE9F78;        /* (setting) peach: buttons, highlights */
  --wha-accent-strong: #B9653F; /* peach dark enough for small text on cream */
  --wha-accent-on: #1F2B47;     /* text on peach buttons */
  --wha-peach-soft: #FBE4D6;
  --wha-sage: #A9B99B;          /* (setting) */
  --wha-sage-soft: #E3EADB;
  --wha-sage-deep: #5D7352;
  --wha-green: #5D7352;
  --wha-navy: #1F2B47;
  --wha-forest: #3E5A36;
  --wha-on-dark: #FBF7F1;       /* text on intentionally-dark surfaces; never flips */
  --wha-shadow: 0 1px 2px rgba(31,43,71,0.06), 0 18px 40px -22px rgba(31,43,71,0.28);
  --wha-glow: linear-gradient(115deg, #C98A2E, #B5651D, #6B6B3A, #7E5712, #9C5B3C, #C98A2E);
  --wha-drawer-glow: linear-gradient(135deg, #1F2B47, #2A3A5E, #33476B, #1F2B47);
  --wha-font-body: 'Futura Std', 'Futura', 'Century Gothic', sans-serif;
  --wha-font-display: 'Futura Std', 'Futura', 'Century Gothic', sans-serif;  /* bold titles (weight 700) */
  --wha-font-note: 'IM Fell English', Georgia, serif;   /* field-guide captions only (Identify/Find/Make) */
  --wha-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wha-paper-opacity: 0.35;    /* (setting) */
  --wha-gutter: clamp(20px, 4vw, 48px);
  --wha-section-pad: clamp(64px, 8vw, 112px);
  --wha-h2: clamp(28px, 3.4vw, 44px);
  --wha-body: clamp(16px, 1.2vw, 18px);
}

@keyframes whaGlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .wha-page *, .wha-page *::before { animation: none !important; transition: none !important; }
}

/* ---------- page shell ---------- */
html:has(.wha-header):not(:has(#encore-theme)) { background-color: var(--wha-bg); }
html body.wha-body,
body:has(.wha-header):not(#encore-theme) {
  margin: 0;
  background-color: var(--wha-bg);
  color: var(--wha-ink);
  font-family: var(--wha-font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
.wha-paper {
  position: absolute; inset: 0;
  background-repeat: repeat; background-size: 900px auto;
  mix-blend-mode: multiply; opacity: var(--wha-paper-opacity);
  pointer-events: none; z-index: 5;
}
.wha-page, .wha-page * { box-sizing: border-box; }
.wha-page a { color: inherit; }
.wha-page img, .wha-page svg { max-width: 100%; display: block; }
.wha-page button { font-family: inherit; }
.wha-page a:focus-visible, .wha-page button:focus-visible { outline: 2px solid var(--wha-accent); outline-offset: 3px; }
/* neutralise Encore heading/paragraph defaults inside our sections */
.wha-page h1, .wha-page h2, .wha-page h3, .wha-page p { margin: 0; letter-spacing: normal; text-transform: none; }
.wha-page h1, .wha-page h2, .wha-page h3 { color: inherit; font-weight: 600; }

.wha-wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--wha-gutter); padding-right: var(--wha-gutter); }
.wha-section { padding-top: var(--wha-section-pad); padding-bottom: var(--wha-section-pad); position: relative; }
.wha-section--flush-top { padding-top: 0; }
.wha-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wha-accent-strong); margin-bottom: 14px; }
.wha-head { max-width: 640px; margin-bottom: 44px; }
.wha-head h2 { font-family: var(--wha-font-display); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; margin: 0 0 14px; text-wrap: balance; }
.wha-head p { font-size: 16px; line-height: 1.6; color: var(--wha-ink-soft); max-width: 56ch; }
.wha-band--dark  { background: var(--wha-bg-dark); color: var(--wha-on-dark); }
.wha-band--panel { background: var(--wha-bg-panel); }

/* ---------- buttons ---------- */
.wha-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wha-accent); color: var(--wha-accent-on) !important;
  font-family: var(--wha-font-body); font-weight: 600; font-size: 14px; line-height: 1.2;
  padding: 1em 1.7em; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
}
.wha-btn--lg { font-size: 15px; padding: 1.2em 2.1em; }
.wha-btn--glow { background: var(--wha-glow); background-size: 300% 300%; animation: whaGlow 14s ease-in-out infinite; }
.wha-btn .wha-arrow-text { display: inline-block; transition: transform .35s var(--wha-ease); }
.wha-btn .wha-arrow-icon {
  display: inline-block; width: 0; margin-left: 0; opacity: 0; overflow: hidden; transform: translateX(-4px);
  transition: width .35s var(--wha-ease), margin-left .35s var(--wha-ease), opacity .2s ease, transform .35s var(--wha-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wha-btn:hover .wha-arrow-text { transform: translateX(-3px); }
  .wha-btn:hover .wha-arrow-icon { width: 18px; margin-left: 8px; opacity: 1; transform: translateX(0); transition-delay: 0s, 0s, .08s, 0s; }
}
.wha-btn-outline {
  display: inline-flex; align-items: center;
  font-family: var(--wha-font-body); font-size: 14px; font-weight: 900; letter-spacing: 0.03em;
  background: none; border: 1.5px solid var(--wha-ink); border-radius: 999px; color: var(--wha-ink) !important;
  padding: 10px 20px; cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.wha-note { font-size: 13px; color: var(--wha-ink-faint); }

/* =====================================================================
   HEADER (wha_header)
   ===================================================================== */
.wha-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--wha-header-bg); }
.wha-masthead {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px clamp(20px, 5vw, 48px) 14px;
  min-height: 84px; /* header height as approved; the tight logo SVGs no longer pad it out */
}
.wha-header__left { display: flex; align-items: center; gap: 22px; justify-self: start; }
.wha-header__right { display: flex; align-items: center; gap: 22px; justify-self: end; }
.wha-header__brand { justify-self: center; min-width: 0; }
.wha-hamburger {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: none; border: none; cursor: pointer; padding: 0;
}
.wha-hamburger span { display: block; width: 23px; height: 2px; border-radius: 2px; background: var(--wha-ink); transition: background .28s ease; }
@media (hover: hover) and (pointer: fine) { .wha-hamburger:hover span { background: var(--wha-green); } }
.wha-logo { height: var(--wha-logo-h, 54px); display: block; }
.wha-logo svg, .wha-logo img { height: 100%; width: auto; display: block; }
.wha-svg--wordmark { fill: var(--wha-ink); aspect-ratio: 8.4975; }
.wha-svg--stacked { fill: var(--wha-ink); aspect-ratio: 1.9472; }
.wha-logo--stacked svg, .wha-logo--stacked img { height: 100%; width: auto; display: block; } /* SVG has no intrinsic width; without this flex/grid crush it */
.wha-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wha-header .wha-logo--inline, .wha-header .wha-logo--stacked { display: none; }

/* header CTA scroll-reveal: collapsed grid column animates open */
.wha-cta-reveal { display: grid; grid-template-columns: 0fr; min-width: 0; transition: grid-template-columns 1.3s var(--wha-ease); }
.wha-cta-reveal.is-shown { grid-template-columns: 1fr; }
.wha-cta-reveal__inner { overflow: hidden; min-width: 0; }
.wha-cta-reveal .wha-btn {
  opacity: 0; transform: scale(0.9); font-weight: 500;
  font-size: var(--wha-hcta-size, 14px);
  transition: opacity .9s ease, transform 1s var(--wha-ease);
}
.wha-cta-reveal.is-shown .wha-btn { opacity: 1; transform: scale(1); transition-delay: .55s; }

/* ---------- mobile masthead: one fixed midline, crossfades only ----------
   Everything (burger, logo slot, CTA) is centred on one fixed-height bar row that never moves,
   so the burger is static. Scrolling past the hero CTA toggles .is-scrolled on the header
   (wha.js, with hysteresis so it can't flicker at the threshold). The bar's bottom edge eases
   from rest height to scrolled height; the two logos crossfade in the same grid cell; the CTA
   fades/slides in absolutely positioned so it never pushes layout. All transitions are
   opacity/transform/height, which reverse smoothly mid-flight when scrolling back up. */
@media (max-width: 680px) {
  .wha-header .wha-masthead {
    display: block; position: relative; overflow: hidden;
    height: var(--wha-bar-h, 87px); padding: 0 20px;
  }
  /* bar height is constant in both states so burger, logos and CTA share one true centre line
     (shrinking the bar left the scrolled state top-heavy unless the burger moved) */
  .wha-header .wha-header__left { height: var(--wha-bar-h, 87px); min-width: 0; gap: 14px; }
  .wha-header__brand { display: none; }
  .wha-header .wha-header__left > a { display: grid; align-items: center; min-width: 0; }
  .wha-header .wha-logo--inline, .wha-header .wha-logo--stacked { display: block; grid-area: 1 / 1; justify-self: start; }
  .wha-header .wha-logo--inline {
    height: var(--wha-logo-h-mobile, 57px); max-width: calc(100vw - 96px);
    transition: opacity .3s ease .2s, transform .45s var(--wha-ease) .2s; /* comes back only after stacked is gone */
  }
  .wha-header .wha-logo--inline svg { max-width: 100%; }
  .wha-header .wha-logo--stacked {
    /* as big as the setting allows (default 44px) but never closer than ~16px to the CTA:
       room = viewport - side padding (40) - burger+gap (56) - CTA (~154) - gap (16); stacked logo is 1.9472:1 */
    height: clamp(26px, calc((100vw - 266px) / 1.9472), var(--wha-logo-stacked-h, 44px)); width: auto;
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; /* leaves fast */
  }
  /* sequential handoff (never both visible): outgoing logo fades in .18s, incoming starts at .2s */
  .wha-header.is-scrolled .wha-logo--inline { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .wha-header.is-scrolled .wha-logo--stacked { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity .3s ease .2s, transform .45s var(--wha-ease) .2s; }

  .wha-header .wha-header__right { position: absolute; top: 0; right: 20px; height: var(--wha-bar-h, 87px); }
  .wha-header__right .wha-btn-outline { display: none; }
  .wha-header .wha-cta-reveal, .wha-header .wha-cta-reveal.is-shown { display: block; }
  .wha-header .wha-cta-reveal__inner { overflow: visible; }
  .wha-header .wha-cta-reveal .wha-btn {
    font-size: var(--wha-hcta-size-mobile, 11.9px);
    opacity: 0; transform: translateX(14px); pointer-events: none;
    transition: opacity .25s ease, transform .45s var(--wha-ease); transition-delay: 0s;
  }
  .wha-header.is-scrolled .wha-cta-reveal .wha-btn { opacity: 1; transform: translateX(0); pointer-events: auto; transition-delay: .2s; }
  .wha-cta-reveal .wha-btn .wha-arrow-icon { display: none; }
}

/* ---------- drawer ---------- */
.wha-scrim { position: fixed; inset: 0; background: rgba(20,19,15,0.45); z-index: 50; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.wha-scrim.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .7s ease, visibility 0s; }
/* iOS Safari treats fixed elements touching the bottom edge as a bottom bar and paints a solid strip under
   the URL pill. The closed drawer/scrim are fully visibility:hidden (after their exit animation) so the page
   can run edge-to-edge behind the pill (with viewport-fit=cover in global_head). */
.wha-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(380px, 88vw); z-index: 51;
  background: var(--wha-drawer-glow); background-size: 400% 400%; animation: whaGlow 22s ease-in-out infinite;
  color: var(--wha-on-dark); box-shadow: var(--wha-shadow);
  transform: translateX(-100%); transition: transform .75s var(--wha-ease);
  display: flex; flex-direction: column; padding: 22px 26px 26px; overflow-y: auto;
  font-family: var(--wha-font-body);
}
.wha-drawer:not(.is-open) { visibility: hidden; transition: transform .75s var(--wha-ease), visibility 0s linear .75s; }
.wha-drawer.is-open { transform: translateX(0); visibility: visible; }
.wha-drawer__top { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 28px; }
.wha-drawer__close { background: none; border: none; width: 28px; height: 28px; cursor: pointer; position: relative; padding: 0; }
.wha-drawer__close::before, .wha-drawer__close::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: var(--wha-on-dark); }
.wha-drawer__close::before { transform: rotate(45deg); }
.wha-drawer__close::after  { transform: rotate(-45deg); }
.wha-drawer nav { display: flex; flex-direction: column; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(253,252,249,0.14); }
.wha-drawer nav:first-of-type { border-top: none; padding-top: 0; }
.wha-drawer nav a {
  font-size: 15px; font-weight: 600; text-decoration: none; color: var(--wha-on-dark) !important;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s var(--wha-ease);
  transition-delay: calc(.22s + var(--i, 0) * .08s);
}
.wha-drawer nav.wha-drawer__secondary a { font-size: 13.5px; font-weight: 400; }
.wha-drawer.is-open nav a { opacity: .92; transform: translateX(0); }
.wha-drawer.is-open nav.wha-drawer__secondary a { opacity: .72; }
.wha-drawer:not(.is-open) nav a { transition-delay: 0s; }
.wha-drawer__socials { display: flex; gap: 10px; padding: 18px 0; border-top: 1px solid rgba(253,252,249,0.14); flex-wrap: wrap; }
.wha-drawer__socials a { width: 51px; height: 51px; border-radius: 50%; border: 1px solid rgba(253,252,249,0.3); display: flex; align-items: center; justify-content: center; flex: none; transition: border-color .2s ease, background .2s ease; }
.wha-drawer__socials a:hover { border-color: rgba(253,252,249,0.6); background: rgba(253,252,249,0.06); }
.wha-drawer__socials svg { width: 22px; height: 22px; fill: var(--wha-on-dark); color: var(--wha-on-dark); }
@media (max-width: 360px) {
  .wha-drawer__socials { gap: 6px; }
  .wha-drawer__socials a { width: 40px; height: 40px; }
  .wha-drawer__socials svg { width: 17px; height: 17px; }
}
@media (max-width: 680px) {
  /* full-screen menu on mobile; still slides in from the left */
  .wha-drawer { width: 100vw; box-shadow: none; padding: 22px 24px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .wha-drawer nav a { font-size: 20px; }
  .wha-drawer nav.wha-drawer__secondary a { font-size: 15px; }
  .wha-drawer nav { gap: 18px; }
}
html.wha-lock, html.wha-lock body { overflow: hidden; }
.wha-drawer__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.wha-drawer__login {
  display: block; text-align: center; color: var(--wha-on-dark) !important; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid rgba(253,252,249,0.35); border-radius: 999px; padding: 13.5px; text-decoration: none !important;
}


/* =====================================================================
   LETTERING + SHARED FIELD-GUIDE PIECES
   Hand-lettered headlines are inline SVG snippets (wha_svg_letter_*) filled with
   currentColor; .wha-lettering--live is the same headline as live text.
   ===================================================================== */
.wha-full { width: 100%; }  /* full-bleed: edge photos run off the page like a field-guide spread */
.wha-lettering { display: block; color: var(--wha-letter-a, var(--wha-navy)); }
.wha-lettering svg { width: 100%; height: auto; display: block; overflow: visible; }
.wha-lettering--live { font-family: var(--wha-font-display); font-weight: 600; line-height: 1.05; font-size: clamp(30px, 5.6vw, 84px); text-wrap: balance; }
.wha-fell { font-family: var(--wha-font-note); }

/* scroll motion (assets/wha.js): reveal = fade/rise once; drift = gentle parallax via the
   independent `translate` property so it never fights the `rotate` tilt or the reveal transform */
.wha-js [data-wha-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--wha-ease), transform 1.1s var(--wha-ease); }
.wha-js [data-wha-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wha-js [data-wha-reveal] { opacity: 1; transform: none; } }

/* =====================================================================
   FIELD GUIDE -- Version B (wha_fg_belief, wha_fg_teacher): scrapbook pieces
   ===================================================================== */
.wha-fg { position: relative; overflow-x: clip; }
.wha-fg__meta { display: flex; justify-content: space-between; gap: 20px; margin: 0 4vw; padding: 14px 0; border-top: 1px solid var(--wha-ink); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wha-ink); }
.wha-snap, .wha-sheet, .wha-stamp { margin: 0; position: relative; rotate: var(--wha-tilt, 0deg); }
.wha-sheet .wha-specimen__lines, .wha-sheet .wha-specimen__dot, .wha-sheet .wha-specimen__label { z-index: 1; }
.wha-snap img, .wha-sheet img { width: 100%; height: auto; display: block; }
.wha-snap > img, .wha-sheet > img { box-shadow: 0 1px 2px rgba(32,30,23,.08), 0 22px 44px -22px rgba(32,30,23,.45); }
.wha-snap--polaroid { background: #fff; padding: 10px 10px 0; box-shadow: 0 1px 2px rgba(32,30,23,.1), 0 24px 46px -22px rgba(32,30,23,.45); }
.wha-snap--polaroid > img { box-shadow: none; aspect-ratio: 1; object-fit: cover; }
.wha-snap figcaption, .wha-sheet figcaption:not(.wha-label-card) { font-family: var(--wha-font-note); font-style: italic; font-size: 16px; line-height: 1.25; color: var(--wha-ink); text-align: center; padding: 10px 4px 14px; }
.wha-snap:not(.wha-snap--polaroid) figcaption { text-align: left; padding: 10px 0 0; font-size: 15px; }
/* masking tape: translucent paper strip with torn ends */
.wha-tape { position: absolute; z-index: 2; top: -13px; left: 50%; width: 104px; height: 28px; translate: -50% 0; rotate: -4deg;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 70%, rgba(255,255,255,0)), rgba(226,214,178,.78);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 4%, 97% 30%, 100% 55%, 96% 78%, 100% 100%, 6% 94%, 0 100%, 3% 70%, 0 45%, 4% 25%);
  box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.wha-tape--tl { top: 2px; left: -18px; translate: 0 0; rotate: -38deg; }
.wha-tape--br { top: auto; bottom: 4px; left: auto; right: -20px; translate: 0 0; rotate: -38deg; }
/* hand-drawn underline under bold words */
.wha-scribble strong { font-weight: 700; color: var(--wha-ink); padding-bottom: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 3, 60 10, 96 6 S 160 3, 198 7 M 8 10.5 C 50 7, 120 11, 190 9' fill='none' stroke='%2303470F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 11px no-repeat; }
.wha-page .wha-margin-note { font-family: var(--wha-font-note); font-style: italic; font-size: clamp(18px, 1.6vw, 23px); color: var(--wha-green); rotate: -2deg; margin: 18px 0 0 -1vw; }
/* specimen collection label card */
.wha-label-card { z-index: 3; position: absolute; right: -9%; bottom: -8%; width: min(270px, 64%); background: #FFFDF6; border: 1px solid #D9D2BC; padding: 14px 16px 15px; rotate: 3deg; box-shadow: 0 16px 30px -18px rgba(32,30,23,.5);
  font-family: var(--wha-font-note); color: var(--wha-ink); display: grid; gap: 3px; background-image: repeating-linear-gradient(transparent 0 23px, rgba(5,22,132,.09) 23px 24px); background-position: 0 10px; }
.wha-label-card__no { font-family: var(--wha-font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--wha-navy); border-bottom: 1px solid var(--wha-ink); padding-bottom: 6px; margin-bottom: 4px; }
.wha-label-card__latin { font-size: 19px; line-height: 1.1; }
.wha-label-card__common { font-size: 15px; }
.wha-label-card__notes { font-style: italic; font-size: 13.5px; color: var(--wha-ink-soft); line-height: 1.35; margin-top: 4px; }
/* postage stamp with perforated edge */
.wha-stamp { width: clamp(110px, 11vw, 160px); padding: 9px; background: #fff; rotate: -7deg; filter: drop-shadow(0 10px 16px rgba(32,30,23,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at center, transparent 3.2px, #000 3.8px) -6px -6px / 12px 12px round;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at center, transparent 3.2px, #000 3.8px) -6px -6px / 12px 12px round; }
.wha-stamp img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; display: block; }




/* =====================================================================
   PROMO BAND (wha_promo)
   ===================================================================== */
.wha-promo { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
.wha-promo h2 { font-family: var(--wha-font-display); font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; margin: 0 0 14px; color: var(--wha-on-dark); text-wrap: balance; }
.wha-promo__body { font-size: 15.5px; line-height: 1.65; color: rgba(253,252,249,0.72); max-width: 52ch; margin: 0 0 24px !important; }
.wha-stats { display: flex; gap: 28px; margin-top: 8px; flex-wrap: wrap; }
.wha-stat b { display: block; font-family: var(--wha-font-display); font-weight: 600; font-size: 24px; color: var(--wha-on-dark); }
.wha-stat span { font-size: 12px; color: rgba(253,252,249,0.6); }
.wha-promo__panel { background: rgba(253,252,249,0.06); border: 1px solid rgba(253,252,249,0.16); border-radius: 2px; padding: 28px; text-align: center; }
.wha-promo__panel .wha-btn { width: 100%; margin-bottom: 12px; }
.wha-promo__panel small { color: rgba(253,252,249,0.55); font-size: 12px; display: block; line-height: 1.5; }
@media (max-width: 760px) { .wha-promo { grid-template-columns: 1fr; } }

/* =====================================================================
   POSTER ROW (wha_library)
   ===================================================================== */
.wha-posters { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--wha-gutter)); padding-left: var(--wha-gutter); padding-right: var(--wha-gutter); }
.wha-posters::-webkit-scrollbar { height: 6px; }
.wha-posters::-webkit-scrollbar-thumb { background: var(--wha-line); border-radius: 4px; }
.wha-poster { flex: 0 0 var(--wha-poster-w, 200px); aspect-ratio: 3/4; border-radius: 3px; position: relative; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--wha-line); background-size: cover; background-position: center 35%; }
.wha-poster__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 12px; background: linear-gradient(to top, rgba(20,19,15,0.72), transparent); }
.wha-poster__label b { display: block; color: #fff; font-family: var(--wha-font-display); font-weight: 600; font-size: 17px; }
.wha-poster__label span { color: rgba(255,255,255,0.78); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.wha-teachers-line { margin-top: 28px; font-size: 14px; color: var(--wha-ink-soft); }

/* =====================================================================
   BENEFITS (wha_benefits)
   ===================================================================== */
.wha-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wha-line); border: 1px solid var(--wha-line); }
.wha-benefit { background: var(--wha-bg-frame); padding: 28px 26px; }
.wha-benefit b { display: block; font-family: var(--wha-font-display); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.wha-benefit p { font-size: 14.5px; line-height: 1.6; color: var(--wha-ink-soft); }
@media (max-width: 860px) { .wha-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wha-benefits { grid-template-columns: 1fr; } }

/* =====================================================================
   TESTIMONIALS (wha_testimonials)
   ===================================================================== */
.wha-proof { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: stretch; }
.wha-quote { background: var(--wha-bg-panel); border: 1px solid var(--wha-line); border-radius: 2px; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.wha-quote q { font-family: var(--wha-font-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.45; display: block; margin: 0 0 14px; quotes: none; }
.wha-quote cite { font-style: normal; font-size: 13px; color: var(--wha-ink-faint); }
.wha-video { position: relative; border-radius: 2px; overflow: hidden; border: 1px solid var(--wha-line); background: var(--wha-bg-dark) center/cover; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.wha-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wha-play { width: 62px; height: 62px; border-radius: 50%; background: rgba(253,252,249,0.14); border: 1.5px solid rgba(253,252,249,0.5); display: flex; align-items: center; justify-content: center; }
.wha-play::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--wha-on-dark); margin-left: 4px; }
.wha-video__caption { position: absolute; left: 14px; bottom: 12px; font-size: 11.5px; color: rgba(253,252,249,0.65); }
@media (max-width: 720px) { .wha-proof { grid-template-columns: 1fr; } }

/* =====================================================================
   BOTANICAL PLATE (wha_plate)
   ===================================================================== */
.wha-plate { text-align: center; padding: 8px 0 48px; }
.wha-plate img { width: var(--wha-plate-w, 150px); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 8px 20px rgba(20,19,15,0.15)); }
.wha-plate span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wha-ink-faint); font-style: italic; }

/* =====================================================================
   BOOK (wha_book)
   ===================================================================== */
.wha-book { display: grid; grid-template-columns: 0.5fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: center; }
.wha-book__cover { aspect-ratio: 2/3; background: var(--wha-bg-frame); border: 1px solid var(--wha-line); display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center; }
.wha-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.wha-book__cover span { font-family: var(--wha-font-display); font-style: italic; font-weight: 500; font-size: 15px; color: var(--wha-ink-soft); line-height: 1.4; }
.wha-book__cover--image { padding: 0; border: none; background: none; box-shadow: var(--wha-shadow); }
.wha-book h3 { font-family: var(--wha-font-display); font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 10px; text-wrap: balance; }
.wha-book__body { font-size: 15px; line-height: 1.6; color: var(--wha-ink-soft); margin: 0 0 18px !important; max-width: 52ch; }
.wha-book .wha-eyebrow { margin-bottom: 10px; }
@media (max-width: 640px) { .wha-book { grid-template-columns: 1fr; } .wha-book__cover { max-width: 160px; margin: 0 auto; } }

/* =====================================================================
   NEWSLETTER (wha_newsletter) — styles Kajabi's own form markup
   ===================================================================== */
.wha-newsletter { text-align: center; }
.wha-newsletter h2 { font-family: var(--wha-font-display); font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; }
.wha-newsletter__body { color: var(--wha-ink-soft); font-size: 15px; margin: 0 0 26px !important; }
.wha-newsform form, .wha-newsform--static { display: flex; max-width: 460px; margin: 0 auto; border: 1px solid var(--wha-line); border-radius: 999px; overflow: hidden; background: var(--wha-bg-frame); }
.wha-newsform .form-group { flex: 1; margin: 0; min-width: 0; }
.wha-newsform .form-group label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wha-newsform input[type=email], .wha-newsform input[type=text], .wha-newsform .form-control {
  width: 100%; border: none !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 14px 18px; height: auto; font-size: 14px; color: var(--wha-ink); font-family: var(--wha-font-body);
}
.wha-newsform input:focus { outline: none; }
.wha-newsform button { border: none; background: var(--wha-accent); color: var(--wha-accent-on); font-weight: 600; font-size: 13.5px; padding: 0 22px; cursor: pointer; font-family: var(--wha-font-body); white-space: nowrap; }
.wha-newsform--stacked form { flex-direction: column; border-radius: 18px; padding: 10px; gap: 6px; max-width: 420px; }
.wha-newsform--stacked .form-group { border-bottom: 1px solid var(--wha-line); }
.wha-newsform--stacked .form-group:last-of-type { border-bottom: none; }
.wha-newsform--stacked button { border-radius: 999px; padding: 14px 22px; margin-top: 4px; }
.wha-editor-note { margin-top: 12px; font-size: 12px; color: var(--wha-ink-faint); font-style: italic; }

/* =====================================================================
   CLOSING CTA (wha_closing)
   ===================================================================== */
.wha-closing { text-align: center; }
.wha-closing .wha-eyebrow { color: var(--wha-accent); }
.wha-closing h2 { font-family: var(--wha-font-display); font-size: clamp(28px, 4vw, 42px); line-height: 1.12; margin: 0 auto 18px; max-width: 18ch; text-wrap: balance; color: var(--wha-on-dark); }
.wha-closing__sub { color: rgba(253,252,249,0.68); font-size: 16px; max-width: 52ch; margin: 0 auto 32px !important; line-height: 1.6; }
.wha-closing__list { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 36px; }
.wha-closing__list div { font-size: 13px; color: rgba(253,252,249,0.78); display: flex; align-items: center; gap: 8px; }
.wha-closing__list div::before { content: "\2713"; color: var(--wha-accent); font-weight: 700; }
.wha-closing .wha-note { color: rgba(253,252,249,0.55); margin-top: 14px; }

/* =====================================================================
   v7 (2026-11-04 call): clean, centred, bold. Navy header + hero, cream
   page, sage & peach accents, Futura bold titles / regular body. The
   field-guide scrapbook pieces above (.wha-snap, .wha-tape ...) are now
   used only in the offer section (Method) and Plant Kits.
   ===================================================================== */
.wha-page { font-size: var(--wha-body); line-height: 1.65; }
.wha-page h1, .wha-page h2, .wha-page h3 { font-weight: 700; }
.wha-title { font-family: var(--wha-font-display); font-weight: 700; font-size: var(--wha-h2); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; color: var(--wha-ink); }
.wha-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--wha-accent-strong); margin-bottom: 16px; }
.wha-center-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); }
.wha-page .wha-lede { margin: 18px auto 0; max-width: 62ch; color: var(--wha-ink-soft); font-size: var(--wha-body); line-height: 1.7; }
.wha-rich p { font-size: var(--wha-body); line-height: 1.7; }
.wha-page .wha-rich p + p { margin-top: 1em; }
.wha-rich strong { font-weight: 700; background: linear-gradient(transparent 58%, var(--wha-peach-soft) 58%); padding: 0 2px; }
.wha-band--panel { background: var(--wha-bg-panel); }
.wha-band--dark { background: var(--wha-bg-dark); }
.wha-js [data-wha-reveal] { transition-delay: calc(var(--d, 0) * 90ms); }

/* buttons: peach with navy text everywhere (one consistent call to action) */
.wha-btn { background: var(--wha-accent); color: var(--wha-accent-on) !important; font-weight: 700; letter-spacing: .01em; transition: background .25s ease, transform .25s var(--wha-ease), box-shadow .25s ease; box-shadow: 0 8px 22px -12px rgba(31,43,71,.45); }
.wha-btn--lg { font-size: 16px; padding: 1.1em 2.1em; }
.wha-btn--glow { background: var(--wha-accent); animation: none; }
@media (hover: hover) and (pointer: fine) { .wha-btn:hover { background: #F3B392; transform: translateY(-1px); } }
.wha-btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--wha-navy); color: var(--wha-navy) !important; }
@media (hover: hover) and (pointer: fine) { .wha-btn--ghost:hover { background: var(--wha-navy); color: var(--wha-on-dark) !important; } }

/* ---------- header on navy ---------- */
.wha-header { color: var(--wha-header-ink); }
.wha-header .wha-hamburger span { background: var(--wha-header-ink); }
@media (hover: hover) and (pointer: fine) { .wha-header .wha-hamburger:hover span { background: var(--wha-accent); } }
.wha-header .wha-btn-outline { border-color: rgba(251,247,241,.5); color: var(--wha-header-ink) !important; font-weight: 600; }
.wha-header .wha-svg--wordmark, .wha-header .wha-svg--stacked { fill: var(--wha-header-ink); }
.wha-header .wha-logo img { image-rendering: auto; }

/* ---------- HERO ---------- */
.wha-hero { background: var(--wha-navy); color: var(--wha-on-dark); padding: calc(84px + clamp(32px, 5vw, 72px)) 0 clamp(56px, 7vw, 96px); overflow-x: clip; }
.wha-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.wha-page .wha-hero__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wha-accent); margin-bottom: 20px; }
.wha-page .wha-hero__title { font-family: var(--wha-font-display); font-weight: 700; font-size: clamp(36px, 4.3vw, 58px); line-height: 1.06; letter-spacing: -0.018em; color: var(--wha-on-dark); text-wrap: balance; }
.wha-page .wha-hero__sub { margin-top: 24px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: rgba(251,247,241,.82); max-width: 34em; }
.wha-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 34px; }
.wha-hero__actions .wha-note { color: rgba(251,247,241,.62); font-size: 14px; }
.wha-hero__photo { margin: 0; justify-self: center; width: min(100%, 470px); position: relative; }
.wha-hero__arch { display: block; position: relative; z-index: 1; border-radius: 999px 999px 20px 20px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.wha-hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% var(--wha-photo-y, 30%); display: block; }
.wha-hero__photo figcaption { margin-top: 14px; text-align: center; font-size: 13px; letter-spacing: .04em; color: rgba(251,247,241,.6); }
.wha-hero__name { display: block; font-size: 22px; font-weight: 600; letter-spacing: .02em; color: var(--wha-cream, #FBF7F1); }
.wha-hero__role { display: block; margin-top: 4px; }
@media (max-width: 680px) { .wha-hero__name { font-size: 19px; } }

/* ---------- BELIEF: you feel at home in nature ---------- */
.wha-home { text-align: center; }
.wha-home__title { font-size: clamp(32px, 4.2vw, 56px); }
.wha-home__photos { display: grid; grid-template-columns: repeat(var(--wha-cols, 3), minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin: clamp(36px, 4.5vw, 60px) 0 clamp(40px, 5vw, 64px); }
.wha-home__photo { margin: 0; }
/* v7.85: title under the photos, reading straight into the paragraph */
.wha-home--title-below .wha-home__photos { margin: 0 0 clamp(34px, 4vw, 54px); }
.wha-home--title-below .wha-home__title { margin-bottom: clamp(18px, 2vw, 26px); }
.wha-home__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.wha-home__tension { max-width: 680px; margin: 0 auto; }
.wha-home__tension p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.65; }
.wha-page .wha-home__difference { max-width: 640px; margin: 34px auto 0; font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--wha-sage-deep); }
.wha-home__difference::before { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--wha-sage); margin: 0 auto 30px; }

/* ---------- FOUNDER ---------- */
.wha-founder__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.wha-founder__photo { margin: 0; }
.wha-founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.wha-founder__bio { margin-top: 22px; }
.wha-creds { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.wha-creds li { border-top: 2px solid var(--wha-sage); padding-top: 18px; }
.wha-creds b { display: block; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; line-height: 1.2; }
.wha-creds span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--wha-ink-soft); }
.wha-founder__promise { text-align: center; margin-top: clamp(56px, 7vw, 96px); }
.wha-founder__promise h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; text-wrap: balance; }
.wha-founder__nos ul { list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; max-width: 900px; }
.wha-founder__nos li { background: var(--wha-bg-frame); border: 1px solid var(--wha-line); border-radius: 999px; padding: 10px 18px 10px 14px; font-size: 15.5px; display: flex; align-items: center; gap: 10px; }
.wha-founder__nos li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--wha-sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%235D7352' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.wha-page .wha-founder__goal { max-width: 34em; margin: 34px auto 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.5; }

/* ---------- METHOD (offer): the field-guide section ---------- */
.wha-method {
  background-color: #F3ECDF;
  background-image: linear-gradient(rgba(93,115,82,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(93,115,82,.07) 1px, transparent 1px);
  background-size: 28px 28px; overflow-x: clip;
}
.wha-step { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(56px, 8vw, 120px); }
.wha-step--flip .wha-step__text { order: 2; }
.wha-step__no { display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .14em; padding-bottom: 4px; color: var(--wha-accent-strong); border-bottom: 1px solid currentColor; margin-bottom: 14px; }
.wha-step h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1.1; margin-bottom: 18px; }
.wha-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 10px 0 20px; }
.wha-collage .wha-snap figcaption { font-family: var(--wha-font-note); font-style: italic; font-size: 15px; }
.wha-collage__a { grid-column: 1 / 9; grid-row: 1; z-index: 1; }
.wha-collage__b { grid-column: 7 / 13; grid-row: 1; margin-top: 34%; z-index: 2; }
.wha-collage__c { grid-column: 2 / 7; grid-row: 2; margin-top: -7%; z-index: 3; }
.wha-step--flip .wha-collage__a { grid-column: 5 / 13; }
.wha-step--flip .wha-collage__b { grid-column: 1 / 7; }
.wha-step--flip .wha-collage__c { grid-column: 7 / 12; }
.wha-collage img { max-height: 520px; object-fit: cover; }


/* ---------- GUIDEBOOK FAN ---------- */
.wha-guide { overflow-x: clip; }
.wha-page .wha-guide__sub { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--wha-sage-deep); }
.wha-fan { --pw: clamp(118px, 16vw, 236px); --step: 7deg; position: relative; height: calc(var(--pw) * 1.294 + 40px); margin: 10px auto calc(var(--pw) * .42); max-width: 1200px; }
.wha-fan__page {
  position: absolute; left: 50%; bottom: 10px; width: var(--pw); padding: 0; border: none; background: #fff; cursor: zoom-in;
  aspect-ratio: 1545 / 1999; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 34px -18px rgba(31,43,71,.5);
  transform-origin: 50% 170%; translate: -50% 0; z-index: calc(var(--n) - var(--i));
  rotate: calc((var(--i) - (var(--n) - 1) / 2) * var(--step));
  transition: translate .45s var(--wha-ease), rotate .6s var(--wha-ease), box-shadow .3s ease;
}
.wha-fan__page img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .wha-fan__page:hover { translate: -50% -34px; z-index: 30; box-shadow: 0 30px 50px -20px rgba(31,43,71,.6); }
}
.wha-fan__page:focus-visible { translate: -50% -34px; z-index: 30; outline: 3px solid var(--wha-accent); }
.wha-js .wha-fan:not(.is-open) .wha-fan__page { rotate: 0deg; }
.wha-page .wha-guide__hint { text-align: center; margin-top: 18px; font-size: 14px; color: var(--wha-ink-faint); }
.wha-viewer { position: fixed; inset: 0; z-index: 70; background: rgba(20,27,45,.94); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 24px; }
.wha-viewer[hidden] { display: none; }
.wha-viewer__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wha-viewer__stage img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #fff; }
.wha-viewer__stage figcaption { color: rgba(251,247,241,.7); font-size: 14px; }
.wha-viewer__nav { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(251,247,241,.4); background: none; color: var(--wha-on-dark); font-size: 22px; cursor: pointer; }
.wha-viewer__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; }
.wha-viewer__close::before, .wha-viewer__close::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--wha-on-dark); rotate: 45deg; }
.wha-viewer__close::after { rotate: -45deg; }

/* ---------- PLANT KITS ---------- */
.wha-kits__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.wha-kits__art { position: relative; padding: 0 12% 18% 0; }
.wha-kits__sheet { width: 82%; position: relative; z-index: 2; }
.wha-kits__sheet2 { position: absolute; right: 0; bottom: 0; width: 56%; z-index: 1; }
.wha-page .wha-kits__intro { margin-top: 18px; font-weight: 700; }
.wha-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.wha-checks li { position: relative; padding-left: 36px; line-height: 1.5; }
.wha-checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; background: var(--wha-sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%235D7352' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.wha-kits__note { margin-top: 26px; padding-left: 18px; border-left: 3px solid var(--wha-accent); color: var(--wha-ink-soft); }

/* ---------- BONUSES (wha_benefits) ---------- */
.wha-bonus .wha-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; background: none; border: none; }
.wha-bonus .wha-benefit { background: var(--wha-bg-frame); border: 1px solid var(--wha-line); border-radius: 18px; padding: 28px 26px; }
.wha-bonus .wha-benefit b { display: block; font-family: var(--wha-font-display); font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.wha-bonus .wha-benefit p { font-size: 15.5px; line-height: 1.6; color: var(--wha-ink-soft); }
.wha-tag { display: inline-block; margin-bottom: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wha-sage-deep); background: var(--wha-sage-soft); border-radius: 999px; padding: 5px 11px; }

/* ---------- PRICING ---------- */
.wha-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 880px; margin: 0 auto; align-items: stretch; }
.wha-plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--wha-bg-frame); border: 1px solid var(--wha-line); border-radius: 22px; padding: 40px 32px 30px; }
.wha-plan--featured { background: var(--wha-navy); border-color: var(--wha-navy); color: var(--wha-on-dark); box-shadow: 0 30px 60px -30px rgba(31,43,71,.7); }
.wha-plan__badge { position: absolute; top: -14px; left: 50%; translate: -50% 0; white-space: nowrap; background: var(--wha-sage-soft); color: var(--wha-sage-deep); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 6px 14px; }
.wha-plan--featured .wha-plan__badge { background: var(--wha-accent); color: var(--wha-navy); }
.wha-plan__name { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.wha-plan__price { margin: 10px 0 4px; } .wha-plan__price b { font-size: clamp(46px, 5vw, 60px); font-weight: 700; line-height: 1; } .wha-plan__price span { font-size: 17px; opacity: .7; margin-left: 4px; }
.wha-page .wha-plan__detail { margin: 10px 0 24px; font-size: 15.5px; line-height: 1.55; opacity: .85; max-width: 26em; flex: 1; }
.wha-plan .wha-btn { width: 100%; }
.wha-plan--featured .wha-btn--ghost { box-shadow: inset 0 0 0 2px var(--wha-on-dark); color: var(--wha-on-dark) !important; }
.wha-plan__small { margin-top: 12px; font-size: 13px; opacity: .7; }
.wha-included { max-width: 880px; margin: clamp(40px, 5vw, 60px) auto 0; }
.wha-included h3 { text-align: center; font-size: 18px; margin-bottom: 8px; }
.wha-checks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; font-size: 16px; }

/* older lower sections, re-centred for v7 */
.wha-head { margin-left: auto; margin-right: auto; text-align: center; }
.wha-head h2 { font-weight: 700; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .wha-bonus .wha-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .wha-hero { padding-top: calc(87px + 28px); }
  .wha-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .wha-page .wha-hero__title { font-size: clamp(34px, 9.6vw, 42px); }
  .wha-page .wha-hero__eyebrow { font-size: 11.5px; margin-bottom: 14px; }
  .wha-hero__actions { align-items: stretch; text-align: center; }
  .wha-hero__photo { width: 82%; }
  .wha-home__photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: calc(-1 * var(--wha-gutter)); margin-right: calc(-1 * var(--wha-gutter)); padding: 0 var(--wha-gutter); scrollbar-width: none; }
  .wha-home__photos::-webkit-scrollbar { display: none; }
  .wha-home__photo { flex: 0 0 74%; scroll-snap-align: center; }
  .wha-home__photos { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }  /* v7.61: never scrolls vertically inside itself */
  .wha-founder__grid { grid-template-columns: 1fr; }
  .wha-founder__photo { width: 86%; margin: 0 auto; }
  .wha-creds { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .wha-founder__nos li { font-size: 14.5px; text-align: left; }
  .wha-step, .wha-step--flip { grid-template-columns: 1fr; gap: 26px; }
  .wha-step--flip .wha-step__text { order: 0; }
  .wha-collage .wha-snap figcaption { font-size: 13px; }
  .wha-fan { --step: 4.6deg; }
  .wha-viewer { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 60px 14px 20px; }
  .wha-viewer__stage { grid-column: 1 / -1; grid-row: 1; }
  .wha-viewer__stage img { max-height: calc(100vh - 170px); }
  .wha-viewer__nav--prev { grid-row: 2; justify-self: end; } .wha-viewer__nav--next { grid-row: 2; justify-self: start; }
  .wha-kits__grid { grid-template-columns: 1fr; }
  .wha-kits__art { width: 90%; }
  .wha-bonus .wha-benefits { grid-template-columns: 1fr; }
  .wha-plans { grid-template-columns: 1fr; gap: 30px; }
  .wha-checks--cols { grid-template-columns: 1fr; }
}
.wha-fan__page { transition: translate .45s var(--wha-ease), rotate .9s var(--wha-ease) calc(var(--i) * 45ms), box-shadow .3s ease; }

/* ---------- HERO, alternate: full-bleed photo, copy on the right (layout = full) ---------- */
.wha-hero--full { position: relative; isolation: isolate; min-height: min(100svh, 940px); display: flex; align-items: center; padding: calc(84px + 40px) 0 72px; background: var(--wha-navy); }
.wha-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; z-index: -2; }
.wha-hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(14,22,38,var(--wha-shade, .55)) 0%, rgba(14,22,38,calc(var(--wha-shade, .55) * .75)) 32%, rgba(14,22,38,0) 62%),
    linear-gradient(180deg, rgba(14,22,38,.35) 0%, rgba(14,22,38,0) 22%); }
.wha-hero--full .wha-hero__inner { width: 100%; max-width: 1360px; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.wha-hero--full .wha-hero__copy { grid-column: 2; text-shadow: 0 1px 18px rgba(10,16,30,.35); }
.wha-hero--full .wha-hero__sub { color: rgba(251,247,241,.92); }
.wha-hero--full .wha-hero__actions .wha-note { color: rgba(251,247,241,.82); }

/* morphing peach button (cta_glow): slow shift through peach tones + soft halo; header CTA follows */
.wha-hero--glow .wha-hero__actions .wha-btn,
body:has(.wha-hero--glow) .wha-header .wha-cta-reveal .wha-btn {
  background: linear-gradient(115deg, #EE9F78, #F7C6A3, #E7835B, #F2AE8A, #FAD3B8, #EE9F78);
  background-size: 300% 300%; animation: whaGlow 12s ease-in-out infinite;
}
.wha-hero--glow .wha-hero__actions .wha-btn { position: relative; isolation: isolate; }
.wha-hero--glow .wha-hero__actions .wha-btn::before {
  content: ""; position: absolute; inset: -30px -44px; z-index: -1; border-radius: 999px;
  background: inherit; background-size: inherit; filter: blur(16px); opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: whaGlow 12s ease-in-out infinite; pointer-events: none;
}

@media (max-width: 680px) {
  /* phones: photo on top (April's face clear of the copy), fading into navy behind the text */
  .wha-hero--full { display: block; min-height: 0; padding: calc(var(--wha-bar-h, 87px) + min(38svh, 100vw * .82)) 0 44px; }
  .wha-hero__bg { height: calc(var(--wha-bar-h, 87px) + min(52svh, 100vw * 1.1)); bottom: auto; object-position: var(--wha-bg-x-mobile, 22%) 30%; }
  .wha-hero__shade { height: calc(var(--wha-bar-h, 87px) + min(52svh, 100vw * 1.1)); bottom: auto;
    background: linear-gradient(180deg, rgba(14,22,38,0) 55%, rgba(31,43,71,.75) 80%, var(--wha-navy) 100%); }
  .wha-hero--full .wha-hero__inner { grid-template-columns: 1fr; }
  .wha-hero--full .wha-hero__copy { grid-column: 1; }
}

/* ---------- HERO embellishments (embellish = on): soft glows, offset arch line, botanical
   sprigs, a slowly turning badge, a peach brush underline, proof points ---------- */
.wha-hero--fancy:not(.wha-hero--full) {
  background:
    radial-gradient(55% 65% at 76% 46%, rgba(238,159,120,.17), rgba(238,159,120,0) 62%),
    radial-gradient(38% 50% at 6% 100%, rgba(169,185,155,.16), rgba(169,185,155,0) 70%),
    var(--wha-navy);
}
.wha-hero--fancy .wha-hero__photo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; translate: 20px -20px; border: 1.5px solid rgba(238,159,120,.75); border-radius: 999px 999px 20px 20px; pointer-events: none; }
.wha-hero__sprig { position: absolute; z-index: 2; pointer-events: none; color: var(--wha-sage); }
.wha-hero__sprig svg { width: 100%; height: auto; overflow: visible; }
.wha-hero__sprig--a { width: 30%; left: -16%; bottom: -6%; rotate: -10deg; }
.wha-hero__sprig--b { width: 24%; right: -13%; top: 13%; rotate: 168deg; color: var(--wha-accent); }
.wha-badge { position: absolute; z-index: 3; width: 29%; left: -12%; top: 34%; overflow: visible; }
.wha-badge__disc { fill: var(--wha-navy); stroke: var(--wha-accent); stroke-width: 1.5; }
.wha-badge__ring { transform-box: view-box; transform-origin: 60px 60px; animation: whaSpin 40s linear infinite; }
.wha-badge text { fill: var(--wha-on-dark); font-family: var(--wha-font-body); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; }
.wha-badge__leaf { fill: none; stroke: var(--wha-accent); stroke-width: 2; stroke-linecap: round; }
@keyframes whaSpin { to { rotate: 360deg; } }
.wha-hl { white-space: nowrap; padding-bottom: .06em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 6 130 5 200 8C240 10 270 11 296 7' fill='none' stroke='%23EE9F78' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .3em no-repeat; }
.wha-hero__proof { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: rgba(251,247,241,.72); }
.wha-hero__proof li { display: flex; align-items: center; gap: 9px; }
.wha-hero__proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wha-sage); }
/* entrance: arch rises in, sprigs draw themselves, badge pops */
.wha-hero--fancy .wha-hero__arch { animation: whaRise 1.2s var(--wha-ease) both; }
.wha-hero--fancy .wha-hero__photo::before { animation: whaFade 1.4s ease .35s both; }
.wha-sprig__stem { stroke-dasharray: 1; animation: whaDraw 2.2s var(--wha-ease) .5s both; }
.wha-sprig__leaves use, .wha-sprig__buds { animation: whaFade 1s ease 1.3s both; }
.wha-badge { animation: whaPop .9s var(--wha-ease) 1s both; }
@keyframes whaRise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes whaFade { from { opacity: 0; } }
@keyframes whaDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes whaPop { from { opacity: 0; scale: .6; } }
@media (prefers-reduced-motion: reduce) { .wha-badge__ring, .wha-hero--fancy .wha-hero__arch, .wha-sprig__stem, .wha-badge { animation: none !important; } }

@media (max-width: 680px) {
  .wha-hero__proof { justify-content: center; font-size: 12.5px; gap: 6px 16px; }
  .wha-hero--fancy .wha-hero__photo::before { translate: 12px -12px; }
  .wha-hero--fancy:not(.wha-hero--full) .wha-hero__photo { margin-bottom: 8px; }
  /* phones, "Photo first": smaller arch on top, everything centred under it */
  .wha-hero--m-photo:not(.wha-hero--full) { padding-top: calc(var(--wha-bar-h, 87px) + 26px); }
  .wha-hero--m-photo:not(.wha-hero--full) .wha-hero__inner { gap: 22px; }
  .wha-hero--m-photo:not(.wha-hero--full) .wha-hero__photo { order: -1; width: 52%; }
  .wha-hero--m-photo .wha-hero__eyebrow { display: none; }
  .wha-page.wha-hero--m-photo .wha-hero__sub { font-size: 16px; margin-top: 16px; }
  .wha-hero--m-photo .wha-hero__actions { margin-top: 24px; }
  .wha-hero--m-photo:not(.wha-hero--full) .wha-hero__copy { text-align: center; }
  .wha-hero--m-photo:not(.wha-hero--full) .wha-hero__sub { margin-left: auto; margin-right: auto; }
  .wha-hero--m-photo:not(.wha-hero--full) .wha-hero__photo figcaption { display: none; }
  .wha-hero--m-photo .wha-badge { width: 36%; left: -18%; top: 58%; }
}

/* ---------- HERO detail style "shapes": layered flat arches, a peach sun, sparkles, scalloped sticker ---------- */
.wha-hero--style-shapes:not(.wha-hero--full) {  /* soft peach + sage glows (dot grid tried and dropped, v7.7) */
  background: radial-gradient(55% 65% at 76% 46%, rgba(238,159,120,.17), rgba(238,159,120,0) 62%), radial-gradient(38% 50% at 6% 100%, rgba(169,185,155,.16), rgba(169,185,155,0) 70%), var(--wha-navy); }
.wha-hero--style-shapes .wha-hero__photo::before { display: none; }
.wha-hero--style-shapes .wha-hero__arch { box-shadow: 0 30px 50px -30px rgba(0,0,0,.55); }
.wha-hero__shape { position: absolute; pointer-events: none; }
.wha-hero__shape--sage, .wha-hero__shape--peach { left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px 20px 20px; }
.wha-hero__shape--sage { background: var(--wha-sage); translate: -26px 26px; z-index: 0; animation: whaSlideA 1.2s var(--wha-ease) .2s both; }
.wha-hero__shape--peach { background: var(--wha-accent); translate: 26px -26px; z-index: 0; opacity: .95; animation: whaSlideB 1.2s var(--wha-ease) .35s both; }
@keyframes whaSlideA { from { translate: 0 0; opacity: 0; } }
@keyframes whaSlideB { from { translate: 0 0; opacity: 0; } }
.wha-sparkle { position: absolute; z-index: 3; fill: var(--wha-on-dark); pointer-events: none; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-sparkle--1 { width: 34px; left: -16%; top: 14%; }
.wha-sparkle--2 { width: 18px; left: -7%; top: 6%; animation-delay: 1.2s; fill: var(--wha-accent); }
.wha-sparkle--3 { width: 24px; right: calc(-9% - 20px); bottom: 22%; animation-delay: 2.1s; fill: var(--wha-sage); }
@keyframes whaTwinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .55; opacity: .55; } }
.wha-sticker { position: absolute; z-index: 4; width: 35%; left: -16%; bottom: 8%; aspect-ratio: 1; display: grid; place-items: center; rotate: -12deg; animation: whaPop .9s var(--wha-ease) 1s both, whaBob 5s ease-in-out 2s infinite; }
.wha-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--wha-accent); filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.wha-sticker span { position: relative; width: 74%; text-align: center; font-weight: 700; font-size: clamp(11px, 1vw, 14.5px); line-height: 1.15; color: var(--wha-navy); }
@keyframes whaBob { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .wha-sparkle, .wha-sticker, .wha-hero__shape { animation: none !important; } }
@media (max-width: 680px) {
  .wha-hero__shape--sage { translate: -14px 14px; } .wha-hero__shape--peach { translate: 14px -14px; }
  .wha-sticker { width: 46%; left: -27%; bottom: 3%; } .wha-sticker span { font-size: 10.5px; }
  .wha-sparkle--1 { width: 24px; left: -26%; }
}
.wha-hero--style-shapes .wha-hero__photo figcaption { margin-top: 46px; }

/* header CTA reveal: blur in/out, and never show a half-clipped pill.
   Showing: the column opens first, the button sharpens in from a blur once there's room.
   Hiding: the button blurs/fades out quickly, and only THEN does the column close,
   so a fast scroll back up can't catch the pill being cut off. */
.wha-cta-reveal__inner { overflow: clip; overflow-clip-margin: 24px; }
.wha-cta-reveal .wha-btn { filter: blur(10px); transition: opacity .9s ease, transform 1s var(--wha-ease), filter .9s ease; }
.wha-cta-reveal.is-shown .wha-btn { filter: blur(0); }
.wha-cta-reveal:not(.is-shown) { transition: grid-template-columns 1s var(--wha-ease) .32s; }
.wha-cta-reveal:not(.is-shown) .wha-btn { transition: opacity .3s ease, transform .35s ease, filter .3s ease; transition-delay: 0s; }
@media (max-width: 680px) {
  .wha-header .wha-cta-reveal .wha-btn { filter: blur(8px); transition: opacity .25s ease, transform .45s var(--wha-ease), filter .3s ease; }
  .wha-header.is-scrolled .wha-cta-reveal .wha-btn { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .wha-cta-reveal .wha-btn { filter: none !important; } }
/* Shapes style: highlighted headline words in peach with a cream brush underline */
.wha-hero--style-shapes .wha-hl { color: var(--wha-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 6 130 5 200 8C240 10 270 11 296 7' fill='none' stroke='%23FBF7F1' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* "Start My Free Trial" buttons (hero, header, drawer, featured plan): a very subtle undulating glow.
   Colour drifts only between neighbouring peaches (no darker/whiter tones) and a soft peach halo breathes. */
.wha-hero__actions .wha-btn,
.wha-header .wha-cta-reveal .wha-btn,
.wha-drawer__bottom .wha-btn,
.wha-plan--featured .wha-btn:not(.wha-btn--ghost) {
  background: linear-gradient(115deg, #EE9F78, #F1A985, #EC9772, #F0A580, #EE9F78);
  background-size: 300% 300%;
  animation: whaGlow 9s ease-in-out infinite, whaHalo 4.5s ease-in-out infinite;
}
@keyframes whaHalo {
  0%, 100% { box-shadow: 0 8px 22px -12px rgba(31,43,71,.45), 0 0 0 0 rgba(238,159,120,0); }
  50%      { box-shadow: 0 8px 22px -12px rgba(31,43,71,.45), 0 0 22px 2px rgba(238,159,120,.32); }
}
@media (prefers-reduced-motion: reduce) {
  .wha-hero__actions .wha-btn, .wha-header .wha-cta-reveal .wha-btn, .wha-drawer__bottom .wha-btn, .wha-plan--featured .wha-btn { animation: none !important; }
}
@media (max-width: 680px) {
  /* phones: hero button 25% narrower (same text size), centred; subtitle +1px with more breathing room */
  .wha-hero__actions { align-items: center; }
  .wha-hero__actions .wha-btn { width: 75%; }
  .wha-page.wha-hero--m-photo .wha-hero__sub { font-size: 17px; margin-top: 20px; padding: 0 14px; }
}
@media (max-width: 680px) { .wha-hero__actions .wha-note { font-size: 12px; } }  /* phones: small print 2px smaller (14 -> 12) */
@media (max-width: 680px) {
  .wha-sparkle--3 { right: calc(-9% - 30px); }   /* phones: bottom-right sparkle 10px further out */
  /* phones, original logo: the logo stays put when the header CTA slides in (no crossfade to a
     second copy, which read as the logo reloading). The swash logo keeps its stacked swap. */
  .wha-header:not(.wha-header--swash) .wha-logo--stacked { display: none; }
  .wha-header:not(.wha-header--swash).is-scrolled .wha-logo--inline { opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .wha-header:not(.wha-header--swash) .wha-logo--inline { max-width: calc(100vw - 96px - 170px); transition: none; }
  .wha-header:not(.wha-header--swash) .wha-logo--inline img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: left center; }
}
@media (max-width: 680px) {
  /* phones: header CTA just blurs + fades in place (no slide from the right) */
  .wha-header .wha-cta-reveal .wha-btn, .wha-header.is-scrolled .wha-cta-reveal .wha-btn { transform: none; }
}

/* ---------- v7.9: belief underlines + the hero's Shapes language carried subtly down the page ---------- */
:root {
  --wha-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23EE9F78' d='M20 0C21 13 27 19 40 20C27 21 21 27 20 40C19 27 13 21 0 20C13 19 19 13 20 0Z'/%3E%3C/svg%3E");
  --wha-spark-sage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23A9B99B' d='M20 0C21 13 27 19 40 20C27 21 21 27 20 40C19 27 13 21 0 20C13 19 19 13 20 0Z'/%3E%3C/svg%3E");
}
/* belief: "misidentification" / "overwhelm" get the hero's peach brush underline */
.wha-home__tension strong { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 6 130 5 200 8C240 10 270 11 296 7' fill='none' stroke='%23EE9F78' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .42em no-repeat; padding: 0 1px .12em; }
/* belief title: a pair of small sparkles */
.wha-home__title { position: relative; display: inline-block; }
.wha-home__title::before, .wha-home__title::after { content: ""; position: absolute; background: var(--wha-spark) center / contain no-repeat; pointer-events: none; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-home__title::before { width: 22px; height: 22px; right: -34px; top: -10px; }
.wha-home__title::after { width: 13px; height: 13px; right: -14px; top: -22px; background-image: var(--wha-spark-sage); animation-delay: 1.4s; }
/* founder: April's photo becomes an arch with the hero's sage + peach arches layered behind */
.wha-founder__photo { position: relative; isolation: isolate; padding: 0 22px 22px 0; }
.wha-founder__photo img { border-radius: 999px 999px 18px 18px; aspect-ratio: 4 / 5; object-position: 50% 30%; }
.wha-founder__photo::before, .wha-founder__photo::after { content: ""; position: absolute; z-index: -1; border-radius: 999px 999px 18px 18px; }
.wha-founder__photo::before { inset: 22px 0 0 22px; background: var(--wha-sage); opacity: .55; }
.wha-founder__photo::after { width: 26px; height: 26px; left: -14px; top: 18%; z-index: 1; border-radius: 0; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out .8s infinite; }
/* kits: a soft peach arch behind the printable sheets */
.wha-kits__art { isolation: isolate; }
.wha-kits__art::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 18%; top: 6%; bottom: 4%; border-radius: 999px 999px 18px 18px; background: var(--wha-peach-soft); }
/* guidebook + bonuses + pricing headings: one small sparkle beside the title */
.wha-guide .wha-title, .wha-bonus .wha-title, .wha-pricing .wha-title { position: relative; display: inline-block; }
.wha-guide .wha-title::after, .wha-bonus .wha-title::after, .wha-pricing .wha-title::after { content: ""; position: absolute; width: 18px; height: 18px; right: -28px; top: -8px; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-bonus .wha-title::after { background-image: var(--wha-spark-sage); }
/* pricing: the annual "2 months free" badge borrows the hero's scalloped sticker */
.wha-plan:not(.wha-plan--featured) .wha-plan__badge { top: -26px; left: auto; right: -14px; translate: none; width: 96px; height: 96px; padding: 0 14px; display: grid; place-items: center; text-align: center; line-height: 1.15; font-size: 12px; letter-spacing: .04em; white-space: normal; rotate: 10deg; border-radius: 0; color: var(--wha-navy); background: var(--wha-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M112.0 60Q120.8 72.1 108.0 79.9Q111.6 94.4 96.8 96.8Q94.4 111.6 79.9 108.0Q72.1 120.8 60.0 112.0Q47.9 120.8 40.1 108.0Q25.6 111.6 23.2 96.8Q8.4 94.4 12.0 79.9Q-0.8 72.1 8.0 60.0Q-0.8 47.9 12.0 40.1Q8.4 25.6 23.2 23.2Q25.6 8.4 40.1 12.0Q47.9 -0.8 60.0 8.0Q72.1 -0.8 79.9 12.0Q94.4 8.4 96.8 23.2Q111.6 25.6 108.0 40.1Q120.8 47.9 112.0 60.0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M112.0 60Q120.8 72.1 108.0 79.9Q111.6 94.4 96.8 96.8Q94.4 111.6 79.9 108.0Q72.1 120.8 60.0 112.0Q47.9 120.8 40.1 108.0Q25.6 111.6 23.2 96.8Q8.4 94.4 12.0 79.9Q-0.8 72.1 8.0 60.0Q-0.8 47.9 12.0 40.1Q8.4 25.6 23.2 23.2Q25.6 8.4 40.1 12.0Q47.9 -0.8 60.0 8.0Q72.1 -0.8 79.9 12.0Q94.4 8.4 96.8 23.2Q111.6 25.6 108.0 40.1Q120.8 47.9 112.0 60.0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .wha-home__title::before, .wha-home__title::after, .wha-founder__photo::after, .wha-guide .wha-title::after, .wha-bonus .wha-title::after, .wha-pricing .wha-title::after { animation: none; } }
@media (max-width: 680px) {
  .wha-home__title::before { right: -26px; width: 18px; height: 18px; }
  .wha-founder__photo { padding: 0 14px 14px 0; } .wha-founder__photo::before { inset: 14px 0 0 14px; }
}

/* ---------- v7.10 founder: pull quote + "fun, simple, doable" promise card in the hero's Shapes language ---------- */
.wha-pullquote { margin: clamp(64px, 8vw, 110px) auto 0; text-align: center; max-width: 920px; position: relative; }
.wha-pullquote blockquote { margin: 0; font-family: var(--wha-font-display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; color: var(--wha-ink); }
.wha-pullquote blockquote::before { content: "\201C"; display: block; font-size: 2.6em; line-height: .6; color: var(--wha-accent); margin-bottom: .1em; }
.wha-pullquote .wha-hl { color: var(--wha-accent-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 6 130 5 200 8C240 10 270 11 296 7' fill='none' stroke='%23EE9F78' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); white-space: normal; }
.wha-pullquote figcaption { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wha-ink-soft); }
.wha-pullquote figcaption::before { content: "\2014\00a0"; }

.wha-promise { position: relative; isolation: isolate; margin: clamp(64px, 8vw, 110px) auto 0; max-width: 980px; padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px); text-align: center; background: var(--wha-navy); color: var(--wha-on-dark); border-radius: 32px;
  background-image: radial-gradient(60% 80% at 85% 0%, rgba(238,159,120,.18), rgba(238,159,120,0) 60%), radial-gradient(50% 70% at 0% 100%, rgba(169,185,155,.18), rgba(169,185,155,0) 70%); }
.wha-promise { box-shadow: -18px 18px 0 var(--wha-sage), 18px -18px 0 var(--wha-accent); }  /* the hero's layered arches, as offset shapes */
.wha-page .wha-promise h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: var(--wha-on-dark); text-wrap: balance; }
.wha-promise .wha-founder__nos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; max-width: 760px; margin: 30px auto 0; text-align: left; }
.wha-promise .wha-founder__nos li { background: none; border: none; border-radius: 0; padding: 0 0 0 40px; position: relative; font-size: 16.5px; line-height: 1.45; color: rgba(251,247,241,.9); display: block; }
.wha-promise .wha-founder__nos li::before { content: ""; position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wha-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%231F2B47' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.wha-page .wha-promise .wha-founder__goal { margin: 34px auto 0; max-width: 32em; color: var(--wha-accent); font-size: clamp(18px, 1.6vw, 22px); }
.wha-promise__spark { position: absolute; z-index: 2; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-promise__spark--a { width: 30px; height: 30px; left: -40px; top: 26%; }
.wha-promise__spark--b { width: 18px; height: 18px; right: -34px; bottom: 22%; background-image: var(--wha-spark-sage); animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .wha-promise__spark { animation: none; } }
@media (max-width: 680px) {
  .wha-promise { border-radius: 24px; margin-left: 10px; margin-right: 10px; }
  .wha-promise { box-shadow: -10px 10px 0 var(--wha-sage), 10px -10px 0 var(--wha-accent); }
  .wha-promise .wha-founder__nos ul { grid-template-columns: 1fr; gap: 14px; }
  .wha-promise .wha-founder__nos li { font-size: 15.5px; }
  .wha-promise__spark--a { left: -14px; top: -22px; width: 22px; height: 22px; } .wha-promise__spark--b { right: -12px; bottom: -24px; }
}
.wha-founder { overflow-x: clip; }
.wha-pullquote blockquote::before { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 3em; line-height: .5; margin-bottom: .05em; }
.wha-home, .wha-guide, .wha-bonus, .wha-pricing { overflow-x: clip; }  /* title sparkles may poke past narrow screens */


/* ---------- WELCOME MAP v7.11: compact wheel of the year ---------- */
.wha-map2 { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); overflow-x: clip; }
.wha-map2__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1040px; }
.wha-page .wha-map2__body { margin-top: 14px; color: var(--wha-ink-soft); }
.wha-map2__steps ol { list-style: none; counter-reset: step; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.wha-map2__steps li { counter-increment: step; position: relative; padding-left: 44px; line-height: 1.5; font-size: 16px; }
.wha-map2__steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--wha-navy); color: var(--wha-on-dark); }
.wha-map2__steps li:nth-child(2)::before { background: var(--wha-accent); color: var(--wha-navy); }
.wha-map2__steps li:nth-child(3)::before { background: var(--wha-sage); color: var(--wha-navy); }
.wha-map2__steps strong { font-weight: 700; }
.wha-map2__art { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.wha-map2__art::before { content: ""; position: absolute; width: 30px; height: 30px; right: -6px; top: 4px; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-wheel { --size: min(380px, 82vw); position: relative; width: var(--size); height: var(--size); }
.wha-wheel__ring { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, var(--wha-bg) 0 2deg, transparent 2deg 30deg), conic-gradient(var(--stops));
  -webkit-mask: radial-gradient(circle, transparent 53%, #000 53.5%); mask: radial-gradient(circle, transparent 53%, #000 53.5%);
  box-shadow: 0 20px 40px -24px rgba(31,43,71,.35); }
.wha-wheel__month {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 30px; margin: -15px 0 0 -23px; padding: 0; border: none; border-radius: 999px; background: none; cursor: pointer;
  font: 700 12.5px/1 var(--wha-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--wha-navy);
  transform: rotate(calc(var(--i) * 30deg + 15deg)) translateY(calc(var(--size) * -.384)) rotate(calc(-1 * (var(--i) * 30deg + 15deg)));
  transition: background .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .wha-wheel__month:hover { background: rgba(255,253,249,.7); } }
.wha-wheel__month[aria-pressed="true"] { background: var(--wha-navy); color: var(--wha-on-dark); }
.wha-wheel__center { position: absolute; inset: 24%; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--wha-navy); color: var(--wha-on-dark); padding: 10px;
  background-image: radial-gradient(70% 70% at 70% 20%, rgba(238,159,120,.22), rgba(238,159,120,0) 70%); }
.wha-wheel__default b { display: block; font-size: calc(var(--size) * .2); line-height: 1; font-weight: 700; color: var(--wha-accent); }
.wha-wheel__default span { display: block; margin: 6px auto 0; max-width: 11em; font-size: 13px; line-height: 1.3; opacity: .85; }
.wha-wheel__detail[hidden] { display: none; }
.wha-wheel__detail em { display: block; font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wha-accent); margin-bottom: 6px; }
.wha-wheel__detail ul { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.35; }
.wha-page .wha-map2__hint { font-size: 13.5px; color: var(--wha-ink-faint); }
@media (prefers-reduced-motion: reduce) { .wha-map2__art::before { animation: none; } }
@media (max-width: 760px) {
  .wha-map2__grid { grid-template-columns: 1fr; }
  .wha-map2__copy { text-align: center; }
  .wha-map2__steps ol { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
  .wha-wheel__month { width: 40px; font-size: 11px; margin-left: -20px; }
  .wha-wheel__detail ul { font-size: 12px; }
}
.wha-map2__portal { max-width: 380px; text-align: center; margin-top: 6px; }
.wha-page .wha-map2__portal h3 { font-size: 18px; line-height: 1.25; }
.wha-page .wha-map2__portal p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--wha-ink-soft); }
.wha-wheel__default b { font-size: calc(var(--size) * .17); }
/* book cover: real cover with the hero's offset sage + peach shapes behind it */
.wha-book__cover--image { aspect-ratio: auto; box-shadow: -14px 14px 0 var(--wha-sage), 14px -14px 0 var(--wha-accent), 0 30px 50px -24px rgba(31,43,71,.4); border-radius: 6px; overflow: hidden; }
.wha-book__cover--image img { height: auto; display: block; }
.wha-book { overflow-x: clip; padding: 14px; }
.wha-book { max-width: 860px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
@media (max-width: 640px) { .wha-book { grid-template-columns: 1fr; text-align: center; } .wha-book__cover--image { max-width: 220px; margin: 0 auto 10px; } .wha-book__body { margin-left: auto !important; margin-right: auto !important; } }

/* ---------- "Every membership includes" (v7.18): a field-notes card in the Shapes language ---------- */
.wha-included { position: relative; background: var(--wha-bg-frame); border-radius: 26px; padding: clamp(30px, 4vw, 48px) clamp(22px, 5vw, 60px) clamp(26px, 3.5vw, 40px);
  box-shadow: -14px 14px 0 var(--wha-sage-soft), 0 24px 50px -30px rgba(31,43,71,.35); }
.wha-included::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(93,115,82,.35); border-radius: 18px; pointer-events: none; }
.wha-page .wha-included h3 { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(20px, 2vw, 26px); margin-bottom: 18px; }
.wha-included__spark { width: 16px; height: 16px; flex: none; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-included__spark + .wha-included__spark, h3 .wha-included__spark:last-child { background-image: var(--wha-spark-sage); animation-delay: 1.6s; }
.wha-included .wha-checks--cols { gap: 0 44px; margin: 0; }
.wha-included .wha-checks li { padding: 15px 0 15px 34px; border-bottom: 1px dashed var(--wha-line); line-height: 1.4; font-size: 16.5px; }
.wha-included .wha-checks li:nth-last-child(-n+2) { border-bottom: none; }
.wha-included .wha-checks li::before { width: 18px; height: 18px; top: 50%; translate: 0 -50%; border-radius: 0; background: var(--wha-spark) center / contain no-repeat; }
.wha-included .wha-checks li:nth-child(4n+2)::before, .wha-included .wha-checks li:nth-child(4n+3)::before { background-image: var(--wha-spark-sage); }
.wha-included em { font-style: italic; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .wha-included__spark { animation: none; } }
@media (max-width: 680px) {
  .wha-included { box-shadow: -8px 8px 0 var(--wha-sage-soft), 0 24px 50px -30px rgba(31,43,71,.35); }
  .wha-included .wha-checks li { font-size: 15.5px; padding: 13px 0 13px 32px; }
  .wha-included .wha-checks li:nth-last-child(2) { border-bottom: 1px dashed var(--wha-line); }
  .wha-included .wha-checks li:nth-child(odd)::before { background-image: var(--wha-spark); } .wha-included .wha-checks li:nth-child(even)::before { background-image: var(--wha-spark-sage); }
}
.wha-included { max-width: 1010px; }
.wha-included .wha-checks--cols { gap: 0 40px; }
.wha-included .wha-checks li { display: flex; align-items: center; min-height: 58px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; }
@media (max-width: 680px) { .wha-included .wha-checks li { min-height: 0; padding-top: 13px; padding-bottom: 13px; font-size: 15.5px; } }
/* v7.19: no box -- the list sits on the section background so the plan cards stay the stars */
.wha-included, .wha-included { background: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.wha-included::before { display: none; }
.wha-included__title { padding-bottom: .18em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 6 130 5 200 8C240 10 270 11 296 7' fill='none' stroke='%23EE9F78' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .3em no-repeat; }
.wha-included .wha-checks li { border-bottom-color: rgba(38,40,44,.14); }
@media (max-width: 680px) { .wha-included { box-shadow: none; padding-left: 4px; padding-right: 4px; } }
/* centre the two columns as a block (columns hug their text, gap between them) */
.wha-included .wha-checks--cols { grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 64px; }
@media (max-width: 860px) { .wha-included .wha-checks--cols { grid-template-columns: minmax(0, max-content); } }
@media (max-width: 860px) { .wha-included .wha-checks li:nth-last-child(2) { border-bottom: 1px dashed rgba(38,40,44,.14); } }

/* =====================================================================
   v7.21 METHOD features: botanical specimen with numbered callouts (Identify)
   and an animated range map (Find). IM Fell for the hand-labelled field-guide bits.
   ===================================================================== */
.wha-specimen2 { position: relative; padding: 2% 14% 6% 6%; }
.wha-specimen2__fig { position: relative; margin: 0; counter-reset: callout; }
.wha-specimen2__fig img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(31,43,71,.14)); }
.wha-specimen2__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wha-specimen2__lines line { stroke: var(--wha-ink); stroke-width: 1; opacity: .55; }
.wha-specimen2__dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--wha-accent); box-shadow: 0 0 0 2px rgba(255,253,249,.8); }
.wha-specimen2__label { position: absolute; width: max-content; max-width: 170px; font-family: var(--wha-font-note); font-style: italic; font-size: 15px; line-height: 1.2; color: var(--wha-ink); translate: 6px -50%; }
.wha-specimen2__label b { font-weight: 400; font-style: normal; text-decoration: underline; text-decoration-color: var(--wha-accent); text-underline-offset: 3px; }
.wha-specimen2__label--left { translate: calc(-100% - 6px) -50%; text-align: right; }
.wha-specimen2__card { position: absolute; left: -2%; right: auto; bottom: 0; rotate: -3deg; }
.wha-specimen2__key { display: none; }
.wha-step--specimen .wha-step__text { align-self: center; }

.wha-mapcard { background: transparent; }
.wha-mapcard__paper { position: relative; background: #FBF7EE; padding: 14px 14px 10px; box-shadow: 0 1px 2px rgba(32,30,23,.08), 0 22px 44px -22px rgba(32,30,23,.45);
  background-image: linear-gradient(rgba(93,115,82,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(93,115,82,.06) 1px, transparent 1px); background-size: 18px 18px; }
.wha-range { width: 100%; height: auto; display: block; overflow: visible; }
.wha-range__glow { fill: var(--wha-accent); opacity: .5; }
.wha-range__stipple { opacity: .28; }
.wha-range__lines { stroke: var(--wha-ink); stroke-opacity: .32; stroke-width: 1; stroke-linejoin: round; pointer-events: none; }
.wha-range__edge { fill: none; stroke: var(--wha-accent-strong); stroke-width: 1.6; stroke-dasharray: 1.2 1.6; opacity: .8; }
.wha-range__dot { fill: var(--wha-navy); stroke: #FBF7EE; stroke-width: 2; }
.wha-range__ripple { fill: none; stroke: var(--wha-navy); stroke-width: 1.5; opacity: 0; }
.wha-range__pin text { font-family: var(--wha-font-note); font-style: italic; font-size: 19px; fill: var(--wha-ink); }
.wha-mapcard__legend { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-family: var(--wha-font-note); font-style: italic; font-size: 14px; color: var(--wha-ink-soft); }
.wha-mapcard__legend i { width: 22px; height: 12px; border-radius: 6px; background: rgba(238,159,120,.6); outline: 1px dashed var(--wha-accent-strong); outline-offset: 1px; }
/* animation (runs once the card scrolls in, then breathes) */
.wha-js .wha-mapcard:not(.is-in) .wha-range__glow { opacity: 0; transform: scale(.92); }
.wha-range__glow { transform-box: fill-box; transform-origin: center; transition: opacity 1.6s ease .3s, transform 2s var(--wha-ease) .3s; }
.wha-mapcard.is-in .wha-range__glow, html:not(.wha-js) .wha-range__glow { animation: whaBreathe 5s ease-in-out 2.2s infinite; }
@keyframes whaBreathe { 0%, 100% { opacity: .5; } 50% { opacity: .78; } }
.wha-js .wha-mapcard:not(.is-in) .wha-range__edge { stroke-dashoffset: 100; }
.wha-range__edge { animation: whaMarch 30s linear infinite; }
@keyframes whaMarch { to { stroke-dashoffset: -100; } }
.wha-range__ripple { transform-box: fill-box; transform-origin: center; animation: whaRipple 3s ease-out infinite; }
.wha-range__ripple--2 { animation-delay: 1.5s; }
@keyframes whaRipple { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 4.2; } }
@media (prefers-reduced-motion: reduce) { .wha-range__glow, .wha-range__edge, .wha-range__ripple { animation: none !important; } }

@media (max-width: 680px) {
  .wha-specimen2 { padding: 0 6% 10px; }
  .wha-specimen2__label, .wha-specimen2__lines { display: none; }
  .wha-specimen2__card { position: relative; right: auto; bottom: auto; margin: -30px 0 0 auto; width: 70%; }
  .wha-specimen2__key { display: block; list-style: none; counter-reset: key; margin: 22px 0 0; padding: 0; font-family: var(--wha-font-note); font-style: italic; font-size: 16px; line-height: 1.3; }
  .wha-specimen2__dot { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; display: grid; place-items: center; color: var(--wha-navy); font: 700 9px/1 var(--wha-font-body); counter-increment: callout; }
  .wha-specimen2__dot::before { content: counter(callout); }
  .wha-specimen2__key li { counter-increment: key; position: relative; padding-left: 24px; margin-top: 10px; }
  .wha-specimen2__key li::before { content: counter(key); position: absolute; left: 0; top: 1px; width: 15px; height: 15px; border-radius: 50%; background: var(--wha-accent); color: var(--wha-navy); display: grid; place-items: center; font: 700 9px/1 var(--wha-font-body); font-style: normal; }
  .wha-specimen2__key b { font-weight: 400; font-style: normal; }
  .wha-range__pin text { font-size: 24px; }
}
/* Find it: the map is the star; the two photos tuck under its lower corners */
.wha-step--map .wha-collage__a, .wha-step--map.wha-step--flip .wha-collage__a { grid-column: 1 / 13; grid-row: 1; z-index: 1; }
.wha-step--map .wha-collage__b, .wha-step--map.wha-step--flip .wha-collage__b { grid-column: 1 / 5; grid-row: 2; margin-top: -9%; z-index: 2; }
.wha-step--map .wha-collage__c, .wha-step--map.wha-step--flip .wha-collage__c { grid-column: 8 / 12; grid-row: 2; margin-top: -4%; z-index: 2; }
.wha-step--map .wha-collage { grid-template-rows: auto auto; }
.wha-range__glow { opacity: .62; } @keyframes whaBreathe { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
.wha-range__stipple { opacity: .34; }
.wha-range__pin text { font-size: 22px; }
@media (max-width: 680px) {
  .wha-page .wha-specimen2__lines { display: none; }
  .wha-step--map .wha-collage__b, .wha-step--map.wha-step--flip .wha-collage__b { margin-top: 6%; }
  .wha-step--map .wha-collage__c, .wha-step--map.wha-step--flip .wha-collage__c { margin-top: 10%; }
}
/* v7.23 method lede: Identify / Find / Make Medicine get a small peach brush underline, inline */
.wha-method__term { white-space: nowrap; padding-bottom: .1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 6 130 5 200 8C240 10 270 11 296 7' fill='none' stroke='%23EE9F78' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .3em no-repeat; color: var(--wha-ink); }
/* v7.25 phones: a little extra breathing room either side of the text blocks
   (the 20px page gutter stays for photos and cards; text gets +10px each side) */
@media (max-width: 680px) {
  .wha-page .wha-step__text, .wha-page .wha-founder__copy, .wha-page .wha-map2__copy, .wha-page .wha-kits__copy,
  .wha-page .wha-book__body, .wha-page .wha-promo__body, .wha-page .wha-newsletter__body,
  .wha-page .wha-home__tension, .wha-page .wha-home__difference, .wha-page .wha-center-head, .wha-page .wha-specimen2__key { padding-left: 10px; padding-right: 10px; }
}
/* v7.26 Welcome Map: each month is its whole wedge of the ring (tap anywhere on the colour),
   the short name sits inside it. Wedge = clip-path sector from the centre (CSS sin/cos);
   the navy centre sits on top so the hole stays the centre's. */
.wha-wheel__month { inset: 0; left: 0; top: 0; width: auto; height: auto; margin: 0; border-radius: 50%; transform: none; background: transparent;
  --a0: calc(var(--i) * 30deg + .6deg); --a1: calc(var(--i) * 30deg + 29.4deg); --am: calc(var(--i) * 30deg + 15deg);
  clip-path: polygon(50% 50%,
    calc(50% + 75% * sin(var(--a0))) calc(50% - 75% * cos(var(--a0))),
    calc(50% + 75% * sin(var(--am))) calc(50% - 75% * cos(var(--am))),
    calc(50% + 75% * sin(var(--a1))) calc(50% - 75% * cos(var(--a1))));
  -webkit-mask: radial-gradient(circle closest-side, transparent 53%, #000 53.5%); mask: radial-gradient(circle closest-side, transparent 53%, #000 53.5%); }
.wha-wheel__month span { position: absolute; left: 50%; top: 50%; width: 46px; height: 30px; margin: -15px 0 0 -23px; display: grid; place-items: center;
  transform: rotate(var(--am)) translateY(calc(var(--size) * -.384)) rotate(calc(-1 * var(--am))); }
@media (hover: hover) and (pointer: fine) { .wha-wheel__month:hover { background: rgba(255,253,249,.45); } }
.wha-wheel__month[aria-pressed="true"] { background: rgba(31,43,71,.88); color: var(--wha-on-dark); }
.wha-wheel__month:focus-visible { outline: none; background: rgba(255,253,249,.55); }
.wha-wheel__center { z-index: 2; }
@media (max-width: 760px) { .wha-wheel__month { width: auto; margin: 0; } .wha-wheel__month span { width: 40px; margin-left: -20px; } }

/* v7.26 field guide: nothing overlaps. Pictures sit side by side / stacked with clear gaps
   (tape and the slight tilt stay). */
.wha-method .wha-collage { column-gap: 28px; row-gap: 30px; }
.wha-method .wha-collage__a, .wha-method .wha-step--flip .wha-collage__a { grid-column: 1 / 13; grid-row: 1; margin: 0; }
.wha-method .wha-collage__b, .wha-method .wha-step--flip .wha-collage__b { grid-column: 1 / 7; grid-row: 2; margin: 0; align-self: center; }
.wha-method .wha-collage__c, .wha-method .wha-step--flip .wha-collage__c { grid-column: 7 / 13; grid-row: 2; margin: 0; align-self: center; }
.wha-method .wha-step--collage .wha-collage__a img { aspect-ratio: 1 / 1; max-height: none; object-position: 50% 30%; }
.wha-method .wha-step--map .wha-collage__b, .wha-method .wha-step--map .wha-collage__c { margin-top: 0; }
.wha-specimen2__card, .wha-page .wha-specimen2__card { position: relative; left: auto; right: auto; bottom: auto; margin: 26px 0 0 4%; width: max-content; max-width: 80%; }
/* Identify it: the Bidens plate as a small taped print with the text (desktop: under the
   paragraph; phones: tucked to the right of the heading, text wraps around it) */
.wha-step__plate { margin: 0; }
.wha-step__plate img { width: 100%; height: auto; display: block; }
.wha-step__plate figcaption { font-family: var(--wha-font-note); font-style: italic; font-size: 14px; }
.wha-step__plates { display: flex; align-items: flex-start; gap: 28px; }
@media (min-width: 681px) {
  .wha-step--specimen .wha-step__text { display: flex; flex-direction: column; align-items: flex-start; }
  .wha-step--specimen .wha-step__text > .wha-rich { align-self: stretch; }
  .wha-step__plates { order: 5; margin-top: 30px; width: 100%; }
  .wha-step__plate { width: min(200px, 46%); }
}
@media (max-width: 680px) {
  .wha-method .wha-collage { column-gap: 16px; row-gap: 20px; }
  .wha-step__plates { float: right; width: 27%; flex-direction: column; gap: 24px; margin: 4px 0 12px 16px; }
  .wha-step__plate { width: 100%; }
  .wha-step__plate figcaption { font-size: 11px; }
  .wha-page .wha-specimen2__card { margin: 20px 0 0 auto; }
}
/* v7.33 desktop hover: peach CTA buttons shift to a slightly golden peach (filter, so it
   eases with the existing transitions and never touches the header button's blur/fade). */
@media (hover: hover) and (pointer: fine) {
  .wha-btn:not(.wha-btn--ghost):hover, .wha-btn:not(.wha-btn--ghost):focus-visible { filter: hue-rotate(13deg) saturate(1.12) brightness(1.03); }
  .wha-page .wha-btn:not(.wha-btn--ghost):not(.wha-cta-reveal .wha-btn) { transition-property: transform, background-color, color, box-shadow, filter; transition-duration: .35s; }
}
/* eyebrows: one line of space above the title (a p-margin reset was zeroing it) */
.wha-page .wha-eyebrow { margin-bottom: 16px; }
/* v7.29 field guide: every picture in a white polaroid frame; the plates keep their full
   (uncropped) proportions, the map card's paper sits inside the white frame. */
.wha-step__plate.wha-snap--polaroid > img { aspect-ratio: auto; object-fit: contain; }
.wha-step__plate.wha-snap--polaroid { padding: 8px 8px 0; }
.wha-step__plate.wha-snap--polaroid figcaption { padding: 7px 2px 9px; }
.wha-mapcard.wha-snap--polaroid { background: #fff; }
.wha-mapcard.wha-snap--polaroid .wha-mapcard__paper { box-shadow: none; }
.wha-mapcard.wha-snap--polaroid { padding-bottom: 12px; }
.wha-method .wha-collage .wha-snap--polaroid figcaption { text-align: center; }
/* v7.31 Plant Kits: the kit pieces cascade diagonally, bottom-left to top-right, like cards
   dealt up a slope (no tape, no arch, no click-to-open). They start stacked and deal out
   when scrolled in; desktop hover lifts a card. */
.wha-kits__art { padding: 0; }
.wha-kits__art::before { content: none; }
.wha-kfan { --cw: 40%; --rise: 50%; position: relative; aspect-ratio: 1 / 1.1; margin: 0 auto; max-width: 580px; }
.wha-kfan__card { position: absolute; width: var(--cw); background: #fff; padding: 6px;
  box-shadow: 0 1px 2px rgba(32,30,23,.1), 0 18px 34px -18px rgba(32,30,23,.5);
  --t: calc(var(--i) / (var(--n) - 1));
  left: calc((100% - var(--cw)) * var(--t)); bottom: calc(var(--rise) * var(--t));
  rotate: calc(-7deg + 12deg * var(--t)); transform-origin: 50% 100%;
  transition: left 1s var(--wha-ease) calc(var(--i) * 60ms), bottom 1s var(--wha-ease) calc(var(--i) * 60ms), rotate 1s var(--wha-ease) calc(var(--i) * 60ms), translate .35s var(--wha-ease), box-shadow .3s ease; }
.wha-kfan__card img { display: block; width: 100%; height: auto; }
.wha-kfan__card--wide { width: calc(var(--cw) * 1.35); left: calc((100% - var(--cw) * 1.35) * var(--t)); }
.wha-js .wha-kfan:not(.is-in) .wha-kfan__card { left: 0; bottom: 0; rotate: -7deg; }
.wha-js .wha-kfan[data-wha-reveal] { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .wha-kfan__card:hover { translate: 0 -16px; z-index: 9; box-shadow: 0 30px 50px -20px rgba(31,43,71,.55); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .wha-kfan__card { transition: none; } }
@media (max-width: 680px) {
  .wha-kits__art { width: 100%; }
  .wha-kfan { --cw: 40%; --rise: 52%; aspect-ratio: 1 / 1.12; width: 88%; margin-left: 2%; }
  .wha-kits { overflow-x: clip; }
}
/* v7.34 Bonuses: light sage band + the hero's shapes language */
.wha-bonus { background: #EDF1E7; isolation: isolate; overflow: clip; }
.wha-bonus__deco { position: absolute; z-index: -1; pointer-events: none; }
.wha-bonus__deco--arch { width: clamp(220px, 26vw, 380px); aspect-ratio: 3 / 4; left: -6%; top: 14%; border-radius: 999px 999px 0 0; border: 2px solid rgba(93,115,82,.22); box-shadow: 22px -22px 0 0 rgba(169,185,155,.28); }
.wha-bonus__deco--sun { width: clamp(200px, 22vw, 320px); aspect-ratio: 1; right: -5%; bottom: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(238,159,120,.34), rgba(238,159,120,0) 68%); }
.wha-bonus__spark { position: absolute; z-index: -1; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out infinite; pointer-events: none; }
.wha-bonus__spark--1 { width: 22px; height: 22px; left: 12%; top: 16%; }
.wha-bonus__spark--2 { width: 14px; height: 14px; right: 14%; top: 24%; background-image: var(--wha-spark-sage); animation-delay: 1.2s; }
.wha-bonus__spark--3 { width: 18px; height: 18px; right: 8%; bottom: 18%; animation-delay: 2.1s; }
/* v7.38 Bonuses, calmer: an editorial list with small scalloped number seals */
.wha-bonus__deco--arch { display: none; }
.wha-bonus .wha-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; margin-top: 48px; }
.wha-bonus .wha-benefit { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; text-align: left;
  padding: 26px 0; background: none; border: none; border-top: 1px solid rgba(93,115,82,.22); border-radius: 0; box-shadow: none; }
.wha-benefit__seal { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }
.wha-page .wha-benefit__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--wha-accent); }
.wha-bonus .wha-benefit:nth-child(even) .wha-benefit__seal svg { fill: var(--wha-sage); }
.wha-benefit__seal i { position: relative; font-style: normal; font-family: var(--wha-font-display); font-weight: 700; font-size: 13px; color: var(--wha-navy); }
.wha-bonus .wha-benefit b { display: inline; font-size: 18px; margin: 0; }
.wha-benefit__tag { display: inline-block; vertical-align: 2px; margin-left: 6px; background: var(--wha-peach-soft); color: var(--wha-accent-strong); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.wha-bonus .wha-benefit p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--wha-ink-soft); }
@media (max-width: 860px) { .wha-bonus .wha-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .wha-bonus .wha-benefits { grid-template-columns: 1fr; margin-top: 36px; }
  .wha-bonus .wha-benefit { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 22px 10px; }
  .wha-benefit__seal { width: 40px; height: 40px; }
}
/* pricing: the "14 days free" badge picks up the same golden shift as its button on hover */
@media (hover: hover) and (pointer: fine) {
  .wha-plan__badge { transition: filter .35s var(--wha-ease); }
  .wha-plan:has(.wha-btn:hover) .wha-plan__badge, .wha-plan__badge:hover { filter: hue-rotate(13deg) saturate(1.12) brightness(1.03); }
}
/* v7.35 Backyard Pharmacy: free live-stream class with a countdown */
.wha-live .wha-promo { grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); }
.wha-page .wha-live__eyebrow { color: var(--wha-accent); }
.wha-live__tagline { font-family: var(--wha-font-body); font-style: normal; font-weight: 500; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.35; color: var(--wha-accent); margin: 0 0 18px !important; max-width: 34ch; }
.wha-live .wha-promo__body { max-width: 56ch; }
.wha-live .wha-promo__body p + p { margin-top: 12px; }
.wha-live__panel { position: relative; border-radius: 18px; padding: 34px 28px 26px; }
.wha-live__badge { position: absolute; top: -15px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--wha-accent); color: var(--wha-navy); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.wha-live__badge i { width: 8px; height: 8px; border-radius: 50%; background: #C8352B; box-shadow: 0 0 0 0 rgba(200,53,43,.6); animation: whaLivePulse 1.8s ease-out infinite; }
@keyframes whaLivePulse { 0% { box-shadow: 0 0 0 0 rgba(200,53,43,.55); } 100% { box-shadow: 0 0 0 9px rgba(200,53,43,0); } }
.wha-page .wha-live__label { margin: 0 0 14px; font-size: 13px; letter-spacing: .04em; color: rgba(253,252,249,.75); }
.wha-live__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wha-live__tile { background: rgba(253,252,249,.07); border: 1px solid rgba(253,252,249,.14); border-radius: 12px; padding: 12px 4px 10px; }
.wha-live__tile b { display: block; font-family: var(--wha-font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 36px); line-height: 1; color: var(--wha-on-dark); font-variant-numeric: tabular-nums; }
.wha-live__tile small { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wha-accent); }
.wha-page .wha-live__date { margin: 14px 0 20px; font-family: var(--wha-font-note); font-style: italic; font-size: 17px; color: var(--wha-on-dark); }
.wha-page .wha-live__none { margin: 6px 0 20px; color: rgba(253,252,249,.8); }
.wha-live__count[hidden], .wha-live__none[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wha-live__badge i { animation: none; } }
@media (max-width: 760px) { .wha-live .wha-promo { grid-template-columns: 1fr; gap: 44px; } }
/* v7.39 specimen label card tucks up over the bottom of the magnolia */
.wha-page .wha-specimen2__card { margin-top: -54px; z-index: 2; }
@media (max-width: 680px) { .wha-page .wha-specimen2__card { margin-top: -30px; } }
/* bonus seals turn with the scroll (assets/wha.js sets --wha-spin on the section) */
.wha-bonus .wha-benefit .wha-benefit__seal svg { rotate: var(--wha-spin, 0deg); will-change: rotate; }
.wha-bonus .wha-benefit:nth-child(even) .wha-benefit__seal svg { rotate: calc(var(--wha-spin, 0deg) * -1); }
/* v7.42 newsletter field: text + placeholder dead centre whatever markup Kajabi's form_input adds
   (Kajabi/Encore give .form-group a bottom margin and .form-control a fixed height/line-height). */
.wha-newsform form, .wha-newsform--static { align-items: stretch; }
.wha-newsform .form-group { display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; }
.wha-newsform .form-group > * { margin: 0 !important; }
.wha-newsform input[type=email], .wha-newsform input[type=text], .wha-newsform .form-control {
  display: block; height: 52px !important; min-height: 0 !important; margin: 0 !important; padding: 0 18px !important;
  line-height: 52px !important; text-align: center; vertical-align: middle; box-sizing: border-box; }
.wha-newsform input::placeholder { text-align: center; line-height: normal; color: var(--wha-ink-faint); opacity: 1; }
.wha-newsform--stacked .form-control, .wha-newsform--stacked input[type=email], .wha-newsform--stacked input[type=text] { height: 48px !important; line-height: 48px !important; }

/* ---------- v7.44: the menu bar on the older (not yet redesigned) pages ----------
   layouts/theme.liquid now renders wha_header too; its body is #encore-theme. The page shell
   (cream background, body font, paper texture) stays homepage-only so those pages look as they
   did, and the page starts below the fixed bar instead of under it. */
#encore-theme .wha-paper { display: none; }
#encore-theme { padding-top: 84px; }
@media (max-width: 680px) { #encore-theme { padding-top: var(--wha-bar-h, 87px); } }

/* ===== v7.48 Pricing: stacked plan cards (annual first), crossed-out compare price, checklist in every card ===== */
.wha-plans--stack { grid-template-columns: 1fr; gap: 34px; max-width: 1000px; }
.wha-plans--stack .wha-plan { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: 0 clamp(32px, 4vw, 56px); text-align: left; padding: 44px clamp(32px, 4vw, 52px) 38px; }
.wha-plan__main { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wha-plans--stack .wha-page .wha-plan__detail, .wha-plans--stack .wha-plan__detail { flex: none; margin: 10px 0 22px; }
.wha-plans--stack .wha-plan--featured .wha-plan__badge { left: calc(clamp(32px, 4vw, 52px) + 170px); }
.wha-plan__price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 4px; }
.wha-plan__was { margin-right: 10px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; opacity: .55; text-decoration: line-through; text-decoration-color: var(--wha-accent); text-decoration-thickness: 3px; }
/* v7.52: strike line tilted 5deg counterclockwise, grey (same as the number), 3px */
.wha-plan__was { position: relative; text-decoration: none; }
.wha-plan__was::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 3px; margin-top: -1.5px; background: currentColor; border-radius: 2px; rotate: -5deg; }
.wha-plan--featured .wha-plan__was { opacity: .6; }
.wha-plan__incl { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 1px dashed rgba(38,40,44,.18); padding-left: clamp(32px, 4vw, 56px); }
.wha-plan--featured .wha-plan__incl { border-left-color: rgba(251,247,241,.22); }
.wha-page .wha-plan__incl-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.wha-plan__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.wha-plan__checks li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px dashed rgba(38,40,44,.13); font-size: 15px; line-height: 1.4; }
.wha-plan--featured .wha-plan__checks li { border-bottom-color: rgba(251,247,241,.16); }
.wha-plan__checks li:nth-last-child(-n+2) { border-bottom: none; }
.wha-plan__checks li::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 15px; height: 15px; background: var(--wha-spark) center / contain no-repeat; }
.wha-plan__checks li:nth-child(4n+2)::before, .wha-plan__checks li:nth-child(4n+3)::before { background-image: var(--wha-spark-sage); }
.wha-plan__checks em { font-style: italic; }
@media (max-width: 960px) {
  .wha-plans--stack .wha-plan { grid-template-columns: 1fr; padding: 40px 26px 30px; }
  .wha-plans--stack .wha-plan--featured .wha-plan__badge { left: 50%; }
  .wha-plan__incl { border-left: none; padding-left: 0; margin-top: 28px; padding-top: 22px; border-top: 1px dashed rgba(38,40,44,.18); }
  .wha-plan--featured .wha-plan__incl { border-top-color: rgba(251,247,241,.22); }
  .wha-page .wha-plan__incl-title { text-align: center; }
}
@media (max-width: 620px) {
  .wha-plan__checks { grid-template-columns: 1fr; }
  .wha-plan__checks li:nth-last-child(2) { border-bottom: 1px dashed rgba(38,40,44,.13); }
  .wha-plan--featured .wha-plan__checks li:nth-last-child(2) { border-bottom-color: rgba(251,247,241,.16); }
}

/* ===== v7.52 Founder: April at 17 (replaces the promise box) ===== */
.wha-founder__young { width: min(100%, 440px); margin: clamp(64px, 8vw, 110px) auto 0; }
.wha-founder__young > img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.wha-snap.wha-founder__young figcaption { text-align: center; padding: 16px 0 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--wha-ink-soft); }
@media (max-width: 680px) { .wha-founder__young { width: 84%; } }

/* ===== v7.54 CTA band (sections/wha_cta.liquid) ===== */
.wha-page.wha-cta { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(56px, 7vw, 92px); }
.wha-cta--panel { background: var(--wha-bg-panel); }
.wha-cta--navy { background: var(--wha-navy); color: var(--wha-on-dark); }
.wha-cta__inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.wha-page .wha-cta__title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; text-wrap: balance; margin: 0; }
.wha-cta--navy .wha-cta__title { color: var(--wha-on-dark); }
.wha-page .wha-cta__sub { margin: 14px 0 0; max-width: 34em; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.55; opacity: .85; text-wrap: pretty; }
.wha-cta__inner .wha-btn { margin-top: 28px; }
.wha-page .wha-cta__note { margin: 14px 0 0; font-size: 13px; opacity: .65; }
.wha-cta__spark { position: absolute; background: var(--wha-spark) center / contain no-repeat; animation: whaTwinkle 3.6s ease-in-out infinite; }
.wha-cta__spark--a { width: 24px; height: 24px; left: -8px; top: 4px; }
.wha-cta__spark--b { width: 16px; height: 16px; right: 0; bottom: 30%; background-image: var(--wha-spark-sage); animation-delay: 1.6s; }
@media (max-width: 680px) { .wha-cta__spark--a { left: 4px; top: -18px; } .wha-cta__spark--b { right: 4px; bottom: -14px; } }
@media (prefers-reduced-motion: reduce) { .wha-cta__spark { animation: none; } }

/* ===== v7.55 Checkout drawer (sections/wha_checkout.liquid + initCheckout in wha.js) ===== */
.wha-checkout { scroll-margin-top: 84px; padding-top: clamp(24px, 4vw, 48px); }
.wha-checkout[hidden] { display: none; }
.wha-checkout__card { position: relative; max-width: 620px; margin: 0 auto; background: #FFFDF9; border: 1px solid var(--wha-line); border-radius: 26px; padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 44px) 26px; text-align: center; box-shadow: -14px 14px 0 var(--wha-sage-soft), 0 30px 60px -34px rgba(31,43,71,.45);
  opacity: 0; translate: 0 18px; transition: opacity .5s ease, translate .6s var(--wha-ease); }
.wha-checkout.is-open .wha-checkout__card { opacity: 1; translate: 0 0; }
.wha-page .wha-checkout__title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0; }
.wha-checkout__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--wha-ink); }
.wha-checkout__close::before, .wha-checkout__close::after { content: ""; position: absolute; left: 11px; right: 11px; top: 19px; height: 2px; background: currentColor; border-radius: 2px; rotate: 45deg; }
.wha-checkout__close::after { rotate: -45deg; }
.wha-checkout__close:hover { background: rgba(38,40,44,.06); }
.wha-checkout__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 24px 0 0; padding: 6px; background: var(--wha-bg-panel); border-radius: 18px; }
.wha-checkout__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 0; border-radius: 13px; background: transparent; color: var(--wha-ink); font: inherit; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.wha-checkout__tab b { font-size: 15.5px; font-weight: 700; }
.wha-checkout__tab span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.wha-checkout__tab.is-active { background: var(--wha-navy); color: var(--wha-on-dark); box-shadow: 0 10px 22px -14px rgba(31,43,71,.8); }
.wha-checkout__tab.is-active span { color: var(--wha-accent); opacity: 1; }
.wha-page .wha-checkout__note { margin: 14px 0 0; font-size: 15px; opacity: .8; }
.wha-checkout__frame { margin-top: 22px; }
.wha-checkout__iframe { display: block; width: 100%; height: 640px; border: 0; background: transparent; opacity: 0; transition: opacity .35s ease; }
.wha-checkout__iframe.is-ready, .wha-checkout__iframe.is-xorigin { opacity: 1; }
.wha-checkout__iframe.is-xorigin { height: 900px; }
.wha-checkout__frame { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23EE9F78' d='M20 0C21 13 27 19 40 20C27 21 21 27 20 40C19 27 13 21 0 20C13 19 19 13 20 0Z'/%3E%3C/svg%3E") 50% 80px / 28px no-repeat; }
.wha-checkout__placeholder { padding: 48px 20px; border: 1px dashed rgba(38,40,44,.25); border-radius: 16px; font-size: 15px; opacity: .8; background: var(--wha-bg); }
.wha-checkout__fallback { margin: 18px 0 0; font-size: 13px; opacity: .7; }
.wha-checkout__fallback a { color: inherit; text-decoration: underline; }
@media (max-width: 680px) { .wha-checkout { scroll-margin-top: var(--wha-bar-h, 87px); } .wha-checkout__card { box-shadow: -8px 8px 0 var(--wha-sage-soft); } .wha-checkout__tab b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .wha-checkout__card { transition: none; } }
.wha-checkout__frame:has(.wha-checkout__placeholder) { background: none; }
.wha-checkout__frame:has(.is-ready), .wha-checkout__frame:has(.is-xorigin) { background: none; }
/* v7.57 compact checkout drawer: fits one screen on a laptop (title, tabs, note, form, fallback) */
.wha-checkout { padding-top: 14px; padding-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: 84px; }
.wha-checkout__card { padding: 26px clamp(18px, 3.5vw, 36px) 16px; max-width: 600px; }
.wha-page .wha-checkout__title { font-size: clamp(22px, 2.4vw, 28px); }
.wha-checkout__card .wha-eyebrow { margin-bottom: 4px; }
.wha-checkout__switch { margin-top: 16px; padding: 5px; border-radius: 16px; }
.wha-checkout__tab { padding: 8px 6px; }
.wha-checkout__tab b { font-size: 15px; } .wha-checkout__tab span { font-size: 11.5px; }
.wha-page .wha-checkout__note { margin-top: 10px; font-size: 13.5px; }
.wha-checkout__frame { margin-top: 14px; }
.wha-checkout__fallback { margin-top: 8px; font-size: 12px; }
.wha-checkout__close { top: 10px; right: 10px; }
/* v7.58: a hidden plan's iframe must stay hidden (the display rule above beat the [hidden] attribute,
   so reopening on the other plan showed both forms); loading bar while the checkout loads */
.wha-checkout__iframe[hidden] { display: none !important; }
.wha-checkout__iframe:not(.is-ready):not(.is-xorigin) { height: 0 !important; }
.wha-checkout__frame { background: none !important; }
.wha-checkout__loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 46px 10px 40px; }
.wha-checkout__loading[hidden] { display: none; }
.wha-checkout__bar { position: relative; width: min(260px, 70%); height: 6px; border-radius: 99px; background: var(--wha-bg-panel); overflow: hidden; }
.wha-checkout__bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--wha-sage), var(--wha-accent)); animation: whaLoadBar 1.25s ease-in-out infinite; }
@keyframes whaLoadBar { 0% { left: -40%; } 100% { left: 100%; } }
.wha-checkout__loading-text { font-size: 14px; letter-spacing: .02em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .wha-checkout__bar i { animation: none; left: 0; width: 100%; opacity: .6; } }
@media (max-width: 680px) { .wha-checkout { scroll-margin-top: var(--wha-bar-h, 87px); } }  /* v7.59: the v7.57 compact rule had reset phones to the desktop 84px */

/* =====================================================================
   v7.62 Proof Wall ("Proof of transformation"): a busy mood board of member
   stories, clips, photos, Instagram posts and quotes in two rows that drift
   right-to-left (wha.js initProof moves .wha-pwall__track with a transform,
   clones the cards once for a seamless loop; hover pauses, drag/swipe works).
   --ph = card height unit for the row (shrinks on tablets/phones).
   ===================================================================== */
.wha-pwall { --ph: 372px; --pgap: 44px; overflow: hidden; }
.wha-pwall--panel { background: var(--wha-bg-panel); }
.wha-pwall--navy { background: var(--wha-navy); color: var(--wha-on-dark); }
.wha-pwall--navy .wha-title, .wha-pwall--navy .wha-pwall__sub, .wha-pwall--navy .wha-pwall__note { color: var(--wha-on-dark); }
.wha-pwall--navy .wha-eyebrow { color: var(--wha-accent); }
.wha-pwall__head { text-align: center; max-width: 760px; margin: 0 auto clamp(18px, 3vw, 34px); }
.wha-pwall__head .wha-title { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 46px); }
.wha-pwall__sub { margin: 0 auto; max-width: 52ch; font-size: var(--wha-body); line-height: 1.6; color: var(--wha-ink-soft); }
.wha-pwall__board { display: grid; gap: 0; }
.wha-pwall__row { position: relative; overflow: hidden; padding: 34px 0 30px; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.wha-pwall__row.is-dragging { cursor: grabbing; }
.wha-pwall__row--bottom { margin-top: -20px; }
.wha-pwall__track { display: flex; align-items: center; gap: var(--pgap); width: max-content; padding: 0 var(--pgap); will-change: transform; }
.wha-pwall__row--bottom .wha-pwall__track { padding-left: calc(var(--pgap) + 140px); }
.wha-pwall__track img { -webkit-user-drag: none; user-select: none; }
.wha-pwall__foot { text-align: center; margin-top: clamp(26px, 3.5vw, 44px); }
.wha-pwall__note { margin: 14px 0 0; font-size: 13px; color: var(--wha-ink-faint); }

/* every card: a slight tilt + vertical jostle, cycling so the board looks hand-pinned (v7.63: calmer, no tape) */
.wha-pc { position: relative; flex: none; margin: 0; rotate: var(--wha-tilt, 0deg); translate: 0 var(--wha-jy, 0);
  transition: rotate .5s var(--wha-ease), scale .5s var(--wha-ease); z-index: 1; }
.wha-pc:nth-child(6n+1) { --wha-tilt: -1.4deg; --wha-jy: -6px; }
.wha-pc:nth-child(6n+2) { --wha-tilt: 1deg;    --wha-jy: 8px; }
.wha-pc:nth-child(6n+3) { --wha-tilt: -.6deg;  --wha-jy: -2px; }
.wha-pc:nth-child(6n+4) { --wha-tilt: 1.5deg;  --wha-jy: 6px; }
.wha-pc:nth-child(6n+5) { --wha-tilt: -1deg;   --wha-jy: -8px; }
.wha-pc:nth-child(6n)   { --wha-tilt: .7deg;   --wha-jy: 4px; }
@media (hover: hover) and (pointer: fine) {
  .wha-pc:hover { rotate: 0deg; scale: 1.035; z-index: 4; }
}
.wha-pc img { display: block; }

/* sticker labels */
.wha-pc__tag { position: absolute; z-index: 3; top: -12px; left: -10px; rotate: -6deg; padding: 6px 11px 5px; border-radius: 99px;
  font-family: var(--wha-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(31,43,71,.55); }
.wha-pc__tag--learn { background: var(--wha-sage-soft); color: var(--wha-sage-deep); border: 1px solid var(--wha-sage); }
.wha-pc__tag--make  { background: var(--wha-peach-soft); color: var(--wha-accent-strong); border: 1px solid var(--wha-accent); }
.wha-pc__tag--teach { background: var(--wha-navy); color: var(--wha-on-dark); border: 1px solid var(--wha-navy); }
.wha-pc:nth-child(odd) .wha-pc__tag { left: auto; right: -10px; rotate: 5deg; }

/* Instagram screenshots */
.wha-pc--post img { height: calc(var(--ph) * .98); width: auto; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(31,43,71,.1), 0 24px 44px -22px rgba(31,43,71,.5); }

/* videos (silent loops + stories) */
.wha-pc__frame { position: relative; display: block; height: calc(var(--ph) * .9); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
  background: var(--wha-navy); border: 5px solid #fff; padding: 0; box-shadow: 0 1px 2px rgba(31,43,71,.1), 0 24px 44px -22px rgba(31,43,71,.5); }
.wha-pc__frame img, .wha-pc__frame video, .wha-pc__frame .wha-pc__wistia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wha-pc__frame .wha-pc__wistia { opacity: 0; transition: opacity .6s ease; }
.wha-pc__frame .wha-pc__wistia.is-playing { opacity: 1; }
.wha-pc--clip figcaption, .wha-pc--photo figcaption { font-family: var(--wha-font-note); font-style: italic; font-size: 17px; line-height: 1.2; color: var(--wha-ink);
  text-align: center; padding-top: 10px; max-width: calc(var(--ph) * .9 * 9 / 16 + 30px); margin: 0 auto; }
.wha-pwall--navy .wha-pc--clip figcaption, .wha-pwall--navy .wha-pc--story figcaption { color: var(--wha-on-dark); }
.wha-pc--story .wha-pc__frame { cursor: pointer; height: var(--ph); }
.wha-pc--story .wha-pc__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,43,71,0) 45%, rgba(31,43,71,.65)); }
.wha-pc__play { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px; border-radius: 50%;
  background: var(--wha-accent); box-shadow: 0 0 0 10px rgba(238,159,120,.28); transition: scale .35s var(--wha-ease), box-shadow .35s var(--wha-ease); }
.wha-pc__play::after { content: ""; position: absolute; left: 30px; top: 23px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--wha-navy); }
.wha-pc--story .wha-pc__frame:hover .wha-pc__play, .wha-pc--story .wha-pc__frame:focus-visible .wha-pc__play { scale: 1.08; box-shadow: 0 0 0 16px rgba(238,159,120,.22); }
.wha-pc__sound { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; text-align: center; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.wha-pc--story figcaption { text-align: center; padding-top: 10px; display: grid; gap: 2px; }
.wha-pc--story figcaption b { font-size: 15px; font-weight: 700; }
.wha-pc--story figcaption span { font-family: var(--wha-font-note); font-style: italic; font-size: 17px; }

/* polaroid photos */
.wha-pc--photo { background: #fff; padding: 10px 10px 4px; box-shadow: 0 1px 2px rgba(31,43,71,.1), 0 24px 44px -22px rgba(31,43,71,.5); }
.wha-pc--photo img { height: calc(var(--ph) * .62); width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.wha-pc--photo figcaption { padding: 10px 4px 10px; max-width: calc(var(--ph) * .62 * 3 / 4); }

/* written testimonials: lined index card (like the field-guide label card), optional photo beside it */
.wha-pc--quote { display: flex; align-items: stretch; }
.wha-pc__card { width: calc(var(--ph) * .72); background: #FFFDF6; border: 1px solid #D9D2BC; padding: 22px 22px 18px;
  box-shadow: 0 1px 2px rgba(31,43,71,.08), 0 22px 40px -22px rgba(31,43,71,.45);
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(5,22,132,.08) 23px 24px); background-position: 0 14px;
  display: flex; flex-direction: column; gap: 10px; color: var(--wha-ink); }
.wha-pc__headline { margin: 0; font-family: var(--wha-font-display); font-weight: 700; font-size: 19px; line-height: 1.22; color: var(--wha-navy); text-wrap: balance; }
.wha-pc__headline::before { content: "\201C"; color: var(--wha-accent); }
.wha-pc__headline::after { content: "\201D"; color: var(--wha-accent); }
.wha-pc--quote blockquote { margin: 0; font-family: var(--wha-font-note); font-size: 15.5px; line-height: 1.42; white-space: pre-line; }
.wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { font-size: 18px; line-height: 1.38; }
.wha-pc--quote figcaption { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--wha-ink); font-family: var(--wha-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--wha-navy); }
.wha-pc--with-photo .wha-pc__card { width: calc(var(--ph) * .8); }
.wha-pc__face { width: calc(var(--ph) * .5); height: auto; align-self: center; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid #fff;
  margin-right: -18px; rotate: -3deg; position: relative; z-index: 2; box-shadow: 0 18px 34px -20px rgba(31,43,71,.6); }

/* the pop-up player for video testimonials (built by wha.js) */
.wha-player { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(20,26,42,.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.wha-player.is-open { opacity: 1; }
.wha-player[hidden] { display: none; }
.wha-player__box { position: relative; height: min(86vh, 900px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.wha-player__box video, .wha-player__box .wha-pc__wistia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wha-player__close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.92); }
.wha-player__close::before, .wha-player__close::after { content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: var(--wha-navy); rotate: 45deg; }
.wha-player__close::after { rotate: -45deg; }
html.wha-lock-player { overflow: hidden; }

@media (max-width: 980px) { .wha-pwall { --ph: 330px; --pgap: 36px; } }
@media (max-width: 680px) {
  .wha-pwall { --ph: 268px; --pgap: 28px; }
  .wha-pwall__row { padding: 26px 0 22px; -webkit-mask-image: none; mask-image: none; }
  .wha-pwall__row--bottom .wha-pwall__track { padding-left: calc(var(--pgap) + 70px); }
  .wha-pc__card { padding: 16px 16px 14px; gap: 8px; }
  .wha-pc__headline { font-size: 15.5px; }
  .wha-pc--quote blockquote { font-size: 12.5px; line-height: 1.38; }
  .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { font-size: 14.5px; }
  /* long testimonials would fill the phone screen: trim to a few lines (the pull quote carries it) */
  .wha-pc--quote blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
  .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { -webkit-line-clamp: 9; }
  .wha-pc--with-photo .wha-pc__card { width: calc(var(--ph) * 1.02); }
  .wha-pc__face { border-width: 6px; }
  .wha-pc--clip figcaption, .wha-pc--photo figcaption, .wha-pc--story figcaption span { font-size: 15px; }
  .wha-pc__play { width: 58px; height: 58px; } .wha-pc__play::after { left: 23px; top: 17px; border-width: 12px 0 12px 18px; }
  .wha-pc__tag { font-size: 9.5px; padding: 5px 9px 4px; }
  .wha-player { padding: 0; }
  .wha-player__box { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
}

/* v7.64: one-row layout (default): all cards in a single drifting row, slightly overlapping */
.wha-pwall--one .wha-pwall__track { gap: 0; }
.wha-pwall--one .wha-pc + .wha-pc { margin-left: 20px; }   /* v7.67: back to the original 20px spacing, no overlap */
/* stickers centred on the card's top edge so the overlapping neighbours never cover them */
.wha-pwall--one .wha-pc__tag, .wha-pwall--one .wha-pc:nth-child(odd) .wha-pc__tag { left: 50%; right: auto; translate: -50% 0; }
.wha-pwall--one .wha-pc:nth-child(odd) { z-index: 2; }
@media (hover: hover) and (pointer: fine) { .wha-pwall--one .wha-pc:hover { z-index: 5; } }
@media (max-width: 680px) { .wha-pwall--one .wha-pc + .wha-pc { margin-left: 16px; } }
/* v7.65: one row, more scattered: cards sit up to 30px above/below the centre line (7-step cycle, so the
   pattern doesn't line up with the 6-step tilt cycle), and the row gets room for it. Phones use ~2/3. */
.wha-pwall--one { --wha-scat: 1; }
.wha-pwall--one .wha-pwall__row { padding: 56px 0 50px; }
.wha-pwall--one .wha-pc:nth-child(7n+1) { --wha-jy: calc(-26px * var(--wha-scat)); }
.wha-pwall--one .wha-pc:nth-child(7n+2) { --wha-jy: calc(18px * var(--wha-scat)); }
.wha-pwall--one .wha-pc:nth-child(7n+3) { --wha-jy: calc(-8px * var(--wha-scat)); }
.wha-pwall--one .wha-pc:nth-child(7n+4) { --wha-jy: calc(30px * var(--wha-scat)); }
.wha-pwall--one .wha-pc:nth-child(7n+5) { --wha-jy: calc(-30px * var(--wha-scat)); }
.wha-pwall--one .wha-pc:nth-child(7n+6) { --wha-jy: calc(10px * var(--wha-scat)); }
.wha-pwall--one .wha-pc:nth-child(7n)   { --wha-jy: calc(-14px * var(--wha-scat)); }
@media (max-width: 680px) { .wha-pwall--one { --wha-scat: .66; } .wha-pwall--one .wha-pwall__row { padding: 40px 0 34px; } }
/* v7.67: one-row cards get the original (v7.62) livelier tilts back */
.wha-pwall--one .wha-pc:nth-child(6n+1) { --wha-tilt: -2.4deg; }
.wha-pwall--one .wha-pc:nth-child(6n+2) { --wha-tilt: 1.8deg; }
.wha-pwall--one .wha-pc:nth-child(6n+3) { --wha-tilt: -1deg; }
.wha-pwall--one .wha-pc:nth-child(6n+4) { --wha-tilt: 2.6deg; }
.wha-pwall--one .wha-pc:nth-child(6n+5) { --wha-tilt: -1.8deg; }
.wha-pwall--one .wha-pc:nth-child(6n)   { --wha-tilt: 1.2deg; }

/* =====================================================================
   v7.68 Proof Wall, "Wall of columns" layout (default): wha.js initWall
   deals the cards into 5/4/3/2 columns that drift up/down in alternating
   directions inside a framed window that fades out top and bottom.
   ===================================================================== */
.wha-pwall--wall .wha-pwall__board { max-width: 1560px; margin: 0 auto; padding: 0 var(--wha-gutter); }
.wha-pwall__row.is-wall { --cols: 5; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 24px; align-items: start;
  height: min(86vh, 900px); padding: 0; cursor: default; touch-action: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.is-wall > .wha-pwall__track { display: none; }
.wha-pwall__col { position: relative; min-width: 0; }
.wha-pwall__colin { position: relative; display: flex; flex-direction: column; gap: 34px; padding: 22px 4px; will-change: transform; }
.is-wall .wha-pc { translate: none; width: 100%; }
.is-wall .wha-pc:nth-child(4n+1) { --wha-tilt: -1.6deg; }
.is-wall .wha-pc:nth-child(4n+2) { --wha-tilt: 1.2deg; }
.is-wall .wha-pc:nth-child(4n+3) { --wha-tilt: -.7deg; }
.is-wall .wha-pc:nth-child(4n)   { --wha-tilt: 1.8deg; }
.is-wall .wha-pc__tag, .is-wall .wha-pc:nth-child(odd) .wha-pc__tag { left: 50%; right: auto; translate: -50% 0; }
/* cards size to the column width instead of the row height */
.is-wall .wha-pc--post img { width: 100%; height: auto; }
.is-wall .wha-pc__frame, .is-wall .wha-pc--story .wha-pc__frame { width: 100%; height: auto; aspect-ratio: 9 / 16; }
.is-wall .wha-pc--photo img { width: 100%; height: auto; }
.is-wall .wha-pc--clip figcaption, .is-wall .wha-pc--photo figcaption { max-width: none; }
.is-wall .wha-pc--quote { flex-direction: column; }
.is-wall .wha-pc__card, .is-wall .wha-pc--with-photo .wha-pc__card { width: 100%; padding: 20px 18px 16px; }
.is-wall .wha-pc--with-photo .wha-pc__card { padding-top: 30px; }
.is-wall .wha-pc__face { width: 72%; margin: 0 0 -20px 4%; align-self: flex-start; }
.is-wall .wha-pc__headline { font-size: 17px; }
.is-wall .wha-pc--quote blockquote { font-size: 14.5px; line-height: 1.4; }
.is-wall .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { font-size: 16px; }
@media (max-width: 680px) {
  .wha-pwall--wall .wha-pwall__board { padding: 0 12px; }
  .wha-pwall__row.is-wall { gap: 0 14px; height: min(80vh, 700px); }
  .wha-pwall__colin { gap: 26px; padding: 18px 2px; }
  .is-wall .wha-pc__card, .is-wall .wha-pc--with-photo .wha-pc__card { padding: 14px 12px 12px; }
  .is-wall .wha-pc--with-photo .wha-pc__card { padding-top: 24px; }
  .is-wall .wha-pc__headline { font-size: 14px; }
  .is-wall .wha-pc--quote blockquote { font-size: 12.5px; }
  .is-wall .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { font-size: 13.5px; }
  .is-wall .wha-pc__tag { font-size: 8.5px; padding: 4px 8px 3px; letter-spacing: .1em; }
  .is-wall .wha-pc__play { width: 50px; height: 50px; } .is-wall .wha-pc__play::after { left: 20px; top: 15px; border-width: 10px 0 10px 16px; }
  .is-wall .wha-pc__sound { font-size: 9.5px; bottom: 12px; }
  .is-wall .wha-pc--clip figcaption, .is-wall .wha-pc--photo figcaption, .is-wall .wha-pc--story figcaption span { font-size: 14px; }
}
/* v7.69: the sentence under the heading was pinned left by a .wha-page p margin reset; centre it.
   Wall window 30% shorter on desktop (86vh/900px -> 60vh/630px). */
.wha-pwall .wha-pwall__sub { margin-left: auto; margin-right: auto; text-wrap: balance; }
.wha-pwall__row.is-wall { height: min(60vh, 630px); }
@media (max-width: 680px) { .wha-pwall__row.is-wall { height: min(80vh, 700px); } }

/* =====================================================================
   v7.70 Proof Wall, "Pinboard collage" layout: wha.js initPin positions
   every card absolutely (left/top/width/tilt/z-index) on a still board;
   cards float at their own rate on scroll (motion() drift). Trimmed to a
   cap with a fade + "see more" button when the board is tall.
   ===================================================================== */
.wha-pwall--pin .wha-pwall__board { max-width: 1480px; margin: 0 auto; padding: 0 var(--wha-gutter); }
.wha-pwall__row.is-pin { padding: 10px 0 0; overflow: hidden; cursor: default; touch-action: auto; -webkit-mask-image: none; mask-image: none; }
.is-pin .wha-pwall__track { position: relative; display: block; width: auto; padding: 0; gap: 0; transition: height .6s var(--wha-ease); will-change: auto; }
.is-pin .wha-pc { position: absolute; translate: none; }
.is-pin.is-trimmed { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .is-pin.is-mouse .wha-pc:hover { z-index: 30 !important; scale: 1.05; rotate: 0deg; }
  /* v7.81: no lift while the pointer is still and the page scrolls under it */
  .is-pin:not(.is-mouse) .wha-pc:hover { rotate: var(--wha-tilt, 0deg); scale: 1; }
  .is-pin:not(.is-mouse) .wha-pc--story .wha-pc__frame:hover .wha-pc__play { scale: 1; box-shadow: 0 0 0 10px rgba(238,159,120,.28); }
}
.is-pin .wha-pc__tag, .is-pin .wha-pc:nth-child(odd) .wha-pc__tag { left: 50%; right: auto; translate: -50% 0; }
.is-pin .wha-pc--post img { width: 100%; height: auto; }
.is-pin .wha-pc__frame, .is-pin .wha-pc--story .wha-pc__frame { width: 100%; height: auto; aspect-ratio: 9 / 16; }
.is-pin .wha-pc--photo img { width: 100%; height: auto; }
.is-pin .wha-pc--clip figcaption, .is-pin .wha-pc--photo figcaption { max-width: none; }
.is-pin .wha-pc--quote { flex-direction: column; }
.is-pin .wha-pc__card, .is-pin .wha-pc--with-photo .wha-pc__card { width: 100%; padding: 18px 16px 14px; }
.is-pin .wha-pc--with-photo .wha-pc__card { padding-top: 28px; }
.is-pin .wha-pc__face { width: 70%; margin: 0 0 -20px 6%; align-self: flex-start; }
.is-pin .wha-pc__headline { font-size: 16.5px; }
.is-pin .wha-pc--quote blockquote { font-size: 14px; line-height: 1.4; }
.is-pin .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { font-size: 15.5px; }
.wha-pwall__more { display: block; margin: 18px auto 0; }
.wha-pwall__more[hidden] { display: none; }
@media (max-width: 680px) {
  .wha-pwall--pin .wha-pwall__board { padding: 0 10px; }
  .is-pin .wha-pc__card, .is-pin .wha-pc--with-photo .wha-pc__card { padding: 13px 11px 11px; }
  .is-pin .wha-pc--with-photo .wha-pc__card { padding-top: 22px; }
  .is-pin .wha-pc__headline { font-size: 13.5px; }
  .is-pin .wha-pc--quote blockquote { font-size: 12px; }
  .is-pin .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { font-size: 13px; }
  .is-pin .wha-pc__tag { font-size: 8.5px; padding: 4px 8px 3px; letter-spacing: .1em; }
  .is-pin .wha-pc__play { width: 50px; height: 50px; } .is-pin .wha-pc__play::after { left: 20px; top: 15px; border-width: 10px 0 10px 16px; }
  .is-pin .wha-pc__sound { font-size: 9.5px; bottom: 12px; }
  .is-pin .wha-pc--clip figcaption, .is-pin .wha-pc--photo figcaption, .is-pin .wha-pc--story figcaption span { font-size: 14px; }
}

/* =====================================================================
   v7.77 Guest Teachers: pinned polaroid portraits with the class title in
   bold and "with <name>" in the field-guide italic. 4 across, 2 on phones.
   ===================================================================== */
.wha-guests--panel { background: var(--wha-bg-panel); }
.wha-guests--navy { background: var(--wha-navy); color: var(--wha-on-dark); }
.wha-guests--navy .wha-title, .wha-guests--navy .wha-guests__sub, .wha-guests--navy .wha-guests__note { color: var(--wha-on-dark); }
.wha-guests--navy .wha-eyebrow { color: var(--wha-accent); }
.wha-guests__head { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 4vw, 52px); }
.wha-guests__head .wha-title { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 44px); }
.wha-guests .wha-guests__sub { margin: 0 auto; max-width: 54ch; font-size: var(--wha-body); line-height: 1.6; color: var(--wha-ink-soft); text-wrap: balance; }
.wha-guests__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); align-items: start; }
.wha-guest { --wha-tilt: -2deg; transition-delay: calc(var(--d, 0) * 90ms); }
.wha-guest:nth-child(4n+2) { --wha-tilt: 1.6deg; margin-top: 22px; }
.wha-guest:nth-child(4n+3) { --wha-tilt: -1deg; margin-top: 6px; }
.wha-guest:nth-child(4n)   { --wha-tilt: 2.2deg; margin-top: 28px; }
.wha-guest__card { position: relative; margin: 0; background: #fff; padding: 10px 10px 4px; rotate: var(--wha-tilt);
  box-shadow: 0 1px 2px rgba(31,43,71,.1), 0 24px 46px -22px rgba(31,43,71,.5); transition: rotate .5s var(--wha-ease), scale .5s var(--wha-ease); }
@media (hover: hover) and (pointer: fine) { .wha-guest__card:hover { rotate: 0deg; scale: 1.03; } }
.wha-guest__card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.wha-guest__card figcaption { display: grid; gap: 4px; text-align: center; padding: 14px 6px 14px; }
.wha-guest__class { font-family: var(--wha-font-display); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.25; color: var(--wha-navy); text-wrap: balance; }
.wha-guest__name { font-family: var(--wha-font-note); font-style: italic; font-size: 16px; color: var(--wha-ink-soft); }
.wha-guest__tag { position: absolute; z-index: 2; top: -12px; left: 50%; translate: -50% 0; rotate: -4deg; padding: 6px 11px 5px; border-radius: 99px; white-space: nowrap;
  background: var(--wha-peach-soft); color: var(--wha-accent-strong); border: 1px solid var(--wha-accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 14px -8px rgba(31,43,71,.55); }
.wha-guests__note { text-align: center; margin: clamp(26px, 3vw, 40px) 0 0; font-family: var(--wha-font-note); font-style: italic; font-size: 18px; color: var(--wha-green); }
@media (max-width: 860px) { .wha-guests__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } .wha-guest:nth-child(n) { margin-top: 0; } .wha-guest:nth-child(even) { margin-top: 18px; } }
@media (max-width: 680px) { .wha-guest__card { padding: 7px 7px 2px; } .wha-guest__card figcaption { padding: 10px 2px 10px; } .wha-guest__class { font-size: 14px; } .wha-guest__name { font-size: 14px; } .wha-guest__tag { font-size: 8.5px; padding: 4px 8px 3px; } }

/* v7.82 pinboard on phones: trimmed quotes say "Tap to read" and open in a reader card; a tapped
   photo/post lifts above its neighbours. Desktop is unchanged (the hint is hidden there). */
.wha-pc__readmore { display: none; }
.wha-pc.is-raised { z-index: 40 !important; rotate: 0deg; scale: 1.03; }
@media (max-width: 680px) {
  .is-pin .wha-pc--quote blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
  .is-pin .wha-pc--quote:not(:has(.wha-pc__headline)) blockquote { -webkit-line-clamp: 7; }
  .is-pin .wha-pc--quote { cursor: pointer; }
  .is-pin .wha-pc:not(.is-clamped) .wha-pc__readmore { display: none; }
  .is-pin .wha-pc--quote:not(.is-clamped) { cursor: default; }
  .is-pin .wha-pc.is-clamped .wha-pc__readmore { display: inline-block; align-self: flex-start; margin-top: 2px; font-family: var(--wha-font-body); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wha-accent-strong); }
  .is-pin .wha-pc__readmore::after { content: " \2192"; }
}
.wha-reader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(20,26,42,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.wha-reader.is-open { opacity: 1; }
.wha-reader[hidden] { display: none; }
.wha-reader__box { position: relative; width: min(460px, 100%); max-height: 86vh; overflow: auto; background: #FFFDF6; border: 1px solid #D9D2BC; padding: 26px 22px 22px;
  background-image: repeating-linear-gradient(transparent 0 25px, rgba(5,22,132,.08) 25px 26px); background-position: 0 14px; color: var(--wha-ink);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); display: grid; gap: 12px; }
.wha-reader__box .wha-player__close { top: 8px; right: 8px; width: 38px; height: 38px; background: var(--wha-bg-panel); }
.wha-reader__box .wha-player__close::before, .wha-reader__box .wha-player__close::after { left: 11px; right: 11px; }
.wha-reader__face { width: 62%; aspect-ratio: 4 / 5; object-fit: cover; border: 7px solid #fff; rotate: -2deg; box-shadow: 0 16px 30px -18px rgba(31,43,71,.6); margin: 6px 0 4px; }
.wha-reader .wha-pc__headline { font-size: 19px; margin: 0; padding-right: 30px; }
.wha-reader blockquote { margin: 0; font-family: var(--wha-font-note); font-size: 17px; line-height: 1.48; white-space: pre-line; }
.wha-reader .wha-reader__name { margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--wha-ink); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--wha-navy); }

/* v7.87: signed-in members: My Library button + avatar account menu (no sign-up button) */
.wha-account { position: relative; }
.wha-account > summary { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.wha-account > summary::-webkit-details-marker { display: none; }
.wha-account__avatar { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(251,247,241,.55); }
.wha-account > summary:hover .wha-account__avatar, .wha-account[open] .wha-account__avatar { border-color: var(--wha-accent); }
.wha-account__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; background: #FBF7F1; border-radius: 14px; box-shadow: 0 14px 36px rgba(20,28,48,.22); padding: 8px; display: flex; flex-direction: column; z-index: 60; }
.wha-account__menu a { display: block; padding: 10px 14px; border-radius: 9px; color: var(--wha-ink) !important; font-size: 14.5px; font-weight: 500; text-decoration: none !important; }
.wha-account__menu a:hover { background: rgba(31,43,71,.07); }
/* v7.88: drawer bottom for members: gold My Library pill, then white outline Settings / Log out pills */
.wha-drawer__pill a {
  display: block; text-align: center; color: #FBF7F1 !important; font-size: 15px; font-weight: 600;
  border: 1.5px solid rgba(251,247,241,.8); border-radius: 999px; padding: 1.05em 2.1em; text-decoration: none !important;
  transition: background .2s ease;
}
.wha-drawer__pill a:hover { background: rgba(251,247,241,.1); }
/* v7.92: drawer labels in Title Case as typed (the menu names are now "Events", "Podcast"...); the
   v7.88 all-caps rule is gone, and nothing forces capitals any more */
@media (max-width: 760px) { .wha-account__avatar { width: 32px; height: 32px; } }

/* =====================================================================
   v7.89 VIDEO REEL: navy band of looping lesson clips drifting right to left
   ===================================================================== */
.wha-reel { background: var(--wha-bg-dark); color: var(--wha-on-dark); overflow: hidden; }
.wha-reel__head { text-align: center; max-width: 760px; margin: 0 auto clamp(30px, 4vw, 48px); }
.wha-reel .wha-title { color: var(--wha-on-dark); }
.wha-reel .wha-eyebrow { color: var(--wha-accent); }
.wha-reel__sub { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.65; color: rgba(251,247,241,.82); margin: 16px auto 0; max-width: 640px; }
.wha-reel__viewport { overflow: hidden; }
.wha-reel__track { display: flex; width: max-content; animation: whaReel var(--wha-reel-dur, 60s) linear infinite; will-change: transform; }
.wha-reel__set { display: flex; gap: clamp(14px, 1.6vw, 24px); padding: 0 calc(clamp(14px, 1.6vw, 24px) / 2); margin: 0; list-style: none; }
@keyframes whaReel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wha-reel__item { position: relative; flex: 0 0 auto; width: clamp(260px, 30vw, 440px); margin: 0; padding: 6px 0 26px; }
.wha-reel__frame { isolation: isolate; position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #2A3858; box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }
.wha-reel__frame img, .wha-reel__frame video, .wha-reel__frame .wha-pc__wistia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wha-reel__frame .wha-pc__wistia { opacity: 0; transition: opacity .5s ease; }
.wha-reel__frame .wha-pc__wistia.is-playing { opacity: 1; }
/* v7.93: silent clips (reel + proof wall) ignore taps/clicks, so they can't be paused; the label sits above the video */
.wha-reel__frame .wha-pc__wistia, .wha-reel__frame video, [data-wha-clip] .wha-pc__wistia, [data-wha-clip] video { pointer-events: none; }
.wha-reel__cap { z-index: 3; will-change: transform; -webkit-backface-visibility: hidden; }   /* own layer: phones paint video above un-layered siblings */
/* v7.91: caption = a small white label, slightly angled, overlapping the bottom-left of the video */
.wha-reel__cap { position: absolute; left: 16px; bottom: 6px; z-index: 2; margin: 0; padding: 6px 13px 7px; background: #FFFDF8; color: #1A1A1A; border-radius: 3px;
  font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); transform: rotate(-2.5deg); transform-origin: left center; }
.wha-reel__item:nth-child(3n+2) .wha-reel__cap { transform: rotate(2deg); left: 22px; }
.wha-reel__item:nth-child(3n) .wha-reel__cap { transform: rotate(-1deg); left: 12px; }
.wha-reel__note { text-align: center; margin: clamp(26px, 3vw, 40px) auto 0; font-size: 15px; color: rgba(251,247,241,.7); }
@media (max-width: 760px) { .wha-reel__item { width: 74vw; } .wha-reel__cap { font-size: 15px; left: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .wha-reel__track { animation: none; }
  .wha-reel__viewport { overflow-x: auto; scrollbar-width: none; }
  .wha-reel__set[data-wha-clone] { display: none; }
}