/* Inner Realm — Nourished From Within landing page.
   Loaded only by /nourished-from-within/, after site.css, so the rest of the site pays
   nothing for it. Every value resolves to a design token; nothing new is invented here
   except the composition. The one deliberate departure from the site's editorial restraint
   is the email mockup — it is a picture of a product, so it is allowed to look like one. */

/* ---------- hero ---------- */
/* Height comes from the content, not the viewport: there are cards in here, and a fixed
   vh would either crop them or strand them. Not overflow:hidden — the cards hang out of
   the bottom, and the photo is inset to the section box so it never spills. */
.jhero{position:relative;z-index:2;padding:calc(var(--nav-height) + var(--space-2xl)) var(--gutter) var(--space-2xl)}
.jhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jhero__veil{position:absolute;inset:0;background:none}
.jhero .wrap{position:relative}
/* min-height keeps the hero at 741px on desktop (509 + the section's padding); the phones
   overhang the bottom, so they don't set the height themselves */
.jhero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);align-items:center;min-height:509px}
/* scoped to the copy column only: the feature cards are bone surfaces sitting inside this
   section, and a blanket `.jhero p` rule would paint its body text bone-on-bone */
.jhero__col h1,.jhero__col p{color:var(--text-body)}
/* opaque bone chip so the CTA reads the same over sky, dress, or rock */
.btn--bone{background:var(--bone-100);color:var(--ink-900);border-color:var(--line-strong)}
.btn--bone:hover{background:var(--ink-900);color:var(--bone-100);border-color:var(--ink-900)}
.jhero__name{font:var(--weight-regular) var(--size-heading)/1.1 var(--font-display);
  letter-spacing:var(--tracking-display);text-transform:uppercase;margin:var(--space-sm) 0 0}
.jhero__claim{font:var(--weight-light) var(--size-display-lg)/var(--leading-display) var(--font-serif);
  margin:var(--space-md) 0 0;max-width:14ch}
.jhero__sub{font:italic var(--weight-light) var(--size-body)/1.5 var(--font-serif);
  color:var(--text-muted);margin:var(--space-sm) 0 0}
.jhero__lede{font:var(--type-quote);color:var(--text-body);max-width:40ch;margin:var(--space-lg) 0 var(--space-xl)}
.jhero__cta{display:flex;flex-direction:column;gap:var(--space-sm);align-items:flex-start}

/* ---------- the three layers, as feature cards ----------
   Hero only. A first impression of how much each morning holds rather than something to
   read closely: the layer, its promise, and one real element from the emails at small scale.
   The cards overlap in a zig-zag: top and bottom slots step right (clear of Em in the
   photograph), the middle slot steps left and sits in front. data-slot sets the position,
   so journey.js can swap a clicked card into the middle and animate the move. The stack
   hangs --overhang past the bottom of the hero; the section below pads for it. The players
   and rows inside are pictures, so they ignore the pointer and the click lands on the card. */
.jhero,.jhero+.section{--overhang:clamp(96px,11vw,160px)}
/* the hero's own bottom padding already absorbs part of the overhang */
.jhero+.section{padding-top:calc(var(--section-y) + var(--overhang) - var(--space-2xl))}

/* a warmer ground than raised/page, for the section that needs to read apart from its neighbours */
.section--sand{background:var(--bone-300)}

.feats{--tuck:clamp(56px,6vw,84px);position:relative;display:flex;flex-direction:column;
  margin-bottom:calc(var(--overhang) * -1)}
.feat{position:relative;display:grid;grid-template-columns:26% 1fr;
  background:var(--bone-100);border:var(--border-hairline);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-image);overflow:hidden}
/* the middle slot is the front; the bottom card sits over the top one */
.feat[data-slot="1"]{order:1;z-index:1;margin:0 0 0 var(--space-xl)}
.feat[data-slot="2"]{order:2;z-index:3;margin:calc(var(--tuck) * -1) var(--space-xl) 0 0;box-shadow:var(--shadow-lift)}
.feat[data-slot="3"]{order:3;z-index:2;margin:calc(var(--tuck) * -1) 0 0 var(--space-xl)}
.js .feat:not([data-slot="2"]){cursor:pointer}
.feat:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
.feat *{pointer-events:none}
/* placeholder photograph — a warm wash per layer, darkening as the layers go deeper */
.feat__img{position:relative;min-height:100%;background:linear-gradient(160deg,var(--bone-300),var(--clay-500))}
.feat--rise .feat__img{background:linear-gradient(160deg,var(--bone-400),var(--ochre-500))}
.feat--threshold .feat__img{background:linear-gradient(160deg,var(--ink-500),var(--ink-900))}
.feat__img span{position:absolute;left:10px;bottom:9px;font:var(--weight-regular) .5625rem/1 var(--font-utility);
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-100);opacity:.7}
.feat__body{padding:14px 18px;min-width:0}
.feat .feat__kicker{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);margin:0;max-width:none;
  font:var(--weight-regular) .625rem/1 var(--font-utility);letter-spacing:.24em;text-transform:uppercase;color:var(--clay-500)}
.feat__chip{flex:0 0 auto;padding:5px 9px;border:var(--border-hairline);border-radius:var(--radius-pill);
  letter-spacing:.12em;color:var(--text-muted)}
.feat__name{margin:6px 0 0;font:var(--weight-light) 1.3125rem/1.15 var(--font-serif);color:var(--text-display)}
.feat .feat__line{margin:3px 0 0;max-width:none;font:var(--weight-light) .9375rem/1.4 var(--font-serif);color:var(--text-body)}
.feat .player{margin-top:10px;padding:6px 10px}
.feat .player__name{font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat .player__len{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat .player__play,.feat .player__icon{width:28px;height:28px}
.feat .wave{height:22px}
/* the three playlist marks, overlapped into one cluster */
.feat__discs{flex:0 0 auto;display:flex}
.feat__discs .player__icon{box-shadow:0 0 0 2px var(--bone-200)}
.feat__discs .player__icon+.player__icon{margin-left:-9px}
.feat .feat__prompt{margin:6px 0 0;padding:7px 12px;background:var(--ink-900);max-width:none;
  font:italic var(--weight-light) .9375rem/1.35 var(--font-serif);color:var(--bone-200);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat__prompt b{margin-right:8px;font:normal var(--weight-regular) .5625rem/1 var(--font-utility);
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay-500)}
.feat__tags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0;padding:0;list-style:none}
.feat__tags li{padding:5px 8px;border-radius:var(--radius-pill);background:var(--bone-300);
  font:var(--weight-regular) .5625rem/1 var(--font-utility);letter-spacing:.06em;text-transform:uppercase;color:var(--text-body)}
.feat .mailrow{margin-top:10px;padding:6px 10px}
.feat .mailrow__text b{font-size:.9375rem}
.feat .mailrow+.mailrow{margin-top:6px}
/* each card lands a beat after the one above it */
.js .feats.reveal .feat{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .feats.reveal.is-in .feat{opacity:1;transform:none}
.js .feats.reveal.is-in .feat:nth-child(2){transition-delay:.15s}
.js .feats.reveal.is-in .feat:nth-child(3){transition-delay:.3s}

/* ---------- the email ----------
   Built out of markup rather than a screenshot: it stays sharp at every density, it can
   scroll, and it can be corrected in a text editor when the real emails change. Everything
   in it — masthead, photograph, the Root / Rise / Threshold row, the ink prompt blocks, the
   three playlists, the note from Em — is the real day one email at card scale.
   Used by the walkthrough (--open): the whole thing inside a scrolling frame. The feature
   cards in the hero borrow its player and link rows. */
.mail{position:relative;background:var(--bone-100);border:var(--border-hairline);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-image);overflow:hidden;width:100%}
.mail--open{max-width:none}

/* the inbox row — sender, subject, the six o'clock arrival */
.mail__inbox{display:flex;align-items:center;gap:var(--space-sm);padding:11px var(--space-md);
  background:var(--bone-200);border-bottom:var(--border-hairline)}
.mail__avatar{flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-pill);
  background:var(--ink-900);color:var(--bone-200);display:flex;align-items:center;justify-content:center;
  font:var(--weight-regular) .5625rem/1 var(--font-display);letter-spacing:.1em}
.mail__meta{flex:1 1 auto;min-width:0}
.mail__from{display:block;font:var(--weight-regular) var(--size-micro)/1.2 var(--font-utility);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.mail__subject{display:block;margin-top:3px;font:var(--weight-light) var(--size-body-sm)/1.25 var(--font-serif);
  color:var(--text-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail__time{flex:0 0 auto;align-self:flex-start;font:var(--weight-regular) var(--size-micro)/1.2 var(--font-utility);
  letter-spacing:.06em;color:var(--ink-300)}

/* the masthead */
.mail__mast{background:var(--ink-900);padding:24px var(--space-md) 20px;text-align:center}
.mail__mast-logo{display:block;width:124px;height:auto;margin:0 auto}
/* max-width:none so the global paragraph measure doesn't leave these left-parked in the mast */
.mail__mast-series,.mail__mast-day{margin:14px 0 0;max-width:none;font:var(--weight-regular) .625rem/1 var(--font-utility);
  letter-spacing:.26em;text-transform:uppercase;color:var(--clay-500)}
.mail__mast-day{margin-top:8px;color:var(--bone-200)}
/* Root · Rise · Threshold, as the real email sets it: serif name over a tracked micro label */
.mail__trio{display:flex;justify-content:center;gap:var(--space-lg);margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(244,239,230,.14)}
.mail__trio span{display:flex;flex-direction:column;align-items:center;gap:6px;
  font:var(--weight-light) 1rem/1.1 var(--font-serif);color:var(--bone-200)}
.mail__trio span i{font:var(--weight-regular) .5625rem/1 var(--font-utility);font-style:normal;
  text-transform:uppercase;letter-spacing:.18em;color:var(--clay-500);white-space:nowrap}
.mail__trio--paper{margin-top:0;padding-top:0;border-top:0}
.mail__trio--paper span{color:var(--text-display)}

.mail__band{height:200px;background-size:cover;background-position:center 42%;background-color:var(--ink-900)}

/* the body — sections ruled off the way the email rules them: an ink line before each
   practice, a hairline before the softer closing sections */
.mail__body{padding:0 var(--space-md) var(--space-lg)}
.mail__section{padding-top:var(--space-lg);margin-top:var(--space-lg);border-top:1px solid var(--ink-900)}
.mail__section:first-child{margin-top:0;border-top:0}
.mail__section--soft{border-top-color:var(--line-hairline)}
.mail__label{margin:0 0 var(--space-sm);font:var(--weight-regular) .625rem/1.3 var(--font-utility);
  letter-spacing:.26em;text-transform:uppercase;color:var(--clay-500)}
.mail__h{margin:0;font:var(--weight-light) 1.75rem/1.15 var(--font-serif);letter-spacing:.01em;color:var(--text-display)}
.mail__sub{margin:4px 0 0;font:italic var(--weight-light) var(--size-body-sm)/1.4 var(--font-serif);color:var(--ink-500)}
.mail__lede{margin:0;font:italic var(--weight-light) var(--size-body-sm)/1.7 var(--font-serif);color:var(--text-body);max-width:none}
.mail__lede+.mail__lede{margin-top:.8em}
.mail__copy{margin:var(--space-sm) 0 0;font:var(--weight-light) var(--size-body-sm)/1.7 var(--font-serif);color:var(--text-body);max-width:none}
.mail__sig{margin:var(--space-sm) 0 0;font:italic var(--weight-light) var(--size-body-sm)/1.4 var(--font-serif);color:var(--ink-500)}
.mail__photo{margin:0 0 var(--space-md);aspect-ratio:16/9;overflow:hidden;background:var(--bone-300)}
.mail__photo img{width:100%;height:100%;object-fit:cover}

/* audio and playlist rows */
.player{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-md) 0 0;
  padding:12px 16px;background:var(--bone-200);border:1px solid var(--bone-400);border-radius:var(--radius-sm)}
.player+.player{margin-top:var(--space-xs)}
.player__play{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-pill);
  background:var(--ink-900);display:flex;align-items:center;justify-content:center}
.player__play::after{content:"";border-left:9px solid var(--bone-200);
  border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.player__icon{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-pill)}
/* the Tidal mark ships dark-on-light; flipped so all three sit as ink discs like the play button */
.player__icon--invert{filter:invert(1)}
/* the email's single playlist box: play mark, name, then the three platforms side by side */
.player__platforms{flex:0 0 auto;display:flex;gap:10px}
.player__platforms .player__icon{width:26px;height:26px}
.player__meta{flex:1 1 auto;min-width:0}
.player__name{display:block;font:var(--weight-light) var(--size-body-sm)/1.2 var(--font-serif);color:var(--text-display)}
.player__len{display:block;margin-top:3px;font:var(--weight-regular) var(--size-micro)/1.2 var(--font-utility);
  letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}
/* the waveform is decorative — heights are set inline so the shape can be tuned by eye */
.wave{flex:0 0 auto;display:flex;align-items:center;gap:2px;height:26px}
.wave i{width:2px;background:var(--ink-300);border-radius:var(--radius-pill)}
.wave i:nth-child(-n+7){background:var(--ochre-500)}

/* the prompts — a solid ink block, as in the email; that contrast is the point */
.mail__prompts{margin:var(--space-sm) 0 0;padding:var(--space-md) var(--space-md) 16px;background:var(--ink-900)}
.mail__prompts ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.mail__prompts li{position:relative;padding-left:1.1em;
  font:italic var(--weight-light) var(--size-body-sm)/1.5 var(--font-serif);color:var(--bone-200)}
.mail__prompts li::before{content:"•";position:absolute;left:0;color:var(--clay-500)}

/* a link row standing in for a book or a conversation */
.mailrow{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);
  padding:12px 16px;border:1px solid var(--bone-400);border-radius:var(--radius-sm)}
.mailrow+.mailrow{margin-top:var(--space-xs)}
.mailrow__glyph{flex:0 0 auto;width:22px;text-align:center;font:var(--weight-light) 1.1rem/1 var(--font-serif);color:var(--ochre-500)}
.mailrow__text{flex:1 1 auto;min-width:0}
.mailrow__text b{display:block;font:var(--weight-light) var(--size-body-sm)/1.3 var(--font-serif);color:var(--text-display)}
.mailrow__text span{display:block;margin-top:3px;font:var(--weight-regular) var(--size-micro)/1.2 var(--font-utility);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* the email's own footer, so the scroll ends where a real one would */
.mail__foot{background:var(--ink-900);padding:var(--space-lg) var(--space-md);text-align:center}
.mail__foot img{width:96px;height:auto;margin:0 auto var(--space-md);opacity:.9}
.mail__foot p{margin:0;font:var(--weight-regular) .625rem/1.7 var(--font-utility);letter-spacing:.08em;color:var(--clay-500)}

/* --open: the whole email in a frame that scrolls. The inbox row stays put above it. */
.mail__scroll{height:clamp(480px,72vh,700px);overflow-y:auto;overscroll-behavior-y:contain;
  scrollbar-width:thin;scrollbar-color:var(--bone-500) transparent}
.mail__scroll:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-2px}

/* The card is a bone surface dropped inside sections painted for dark text — the hero and
   the ink walkthrough. Their blanket `p` rules outrank a lone component class and would set
   the card's copy bone-on-bone. Re-asserting the card's palette once, from inside the card,
   is cheaper than fighting it at every call site; the ink blocks inside then restate theirs. */
.mail p{color:var(--text-body)}
.mail .mail__subject,.mail .mail__h{color:var(--text-display)}
.mail .mail__from{color:var(--text-muted)}
.mail .mail__sub,.mail .mail__sig{color:var(--ink-500)}
.mail .mail__time{color:var(--ink-300)}
.mail .mail__label,.mail .mail__mast-series,.mail .mail__foot p{color:var(--clay-500)}
.mail .mail__mast-day{color:var(--bone-200)}

/* ---------- section buttons over the open email ---------- */
.layers{display:flex;gap:var(--space-2xs);margin-bottom:var(--space-md);flex-wrap:wrap}
.layers__tab{background:transparent;border:1px solid var(--line-hairline);border-radius:var(--radius-sm);
  padding:9px 18px;cursor:pointer;color:var(--text-muted);
  font:var(--weight-regular) var(--size-micro)/1 var(--font-utility);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out)}
.layers__tab:hover{color:var(--text-display);border-color:var(--line-strong)}
.layers__tab[aria-current="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--bone-200)}
.section--ink .layers__tab{color:var(--text-on-dark-muted);border-color:var(--line-on-dark)}
.section--ink .layers__tab:hover{color:var(--text-on-dark);border-color:var(--bone-500)}
.section--ink .layers__tab[aria-current="true"]{background:var(--bone-200);border-color:var(--bone-200);color:var(--ink-900)}
/* without JS the buttons can't scroll anything, and the frame scrolls on its own anyway */
.layers{display:none}
.js .layers{display:flex}

/* ---------- the five mornings strip ----------
   A measured span, not a row of buttons: one rule across the top, a tick dropped under it
   for each morning, and the numeral / label / layer marks stacked beneath. No card border
   or fill — nothing here is interactive and it should not look as though it is. */
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm);margin:0;
  padding:var(--space-lg) 0 0;list-style:none;border-top:var(--border-hairline)}
.days li{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-xs);text-align:center}
.days li::before{content:"";position:absolute;left:50%;top:calc(var(--space-lg) * -1);
  width:1px;height:var(--space-lg);background:var(--line-strong)}
.days__n{font:var(--weight-regular) 1.5rem/1 var(--font-display);letter-spacing:var(--tracking-display);
  color:var(--text-display)}
.days__label{font:var(--size-micro)/1.3 var(--font-utility);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--text-muted)}
/* three marks = the three layers every morning carries */
.days__pips{display:flex;gap:4px;margin-top:var(--space-2xs)}
.days__pips i{width:16px;height:2px;background:var(--bone-400)}
.days__key{font:var(--type-label);letter-spacing:normal;text-transform:none;
  color:var(--text-muted);margin:0;max-width:var(--measure)}

/* ---------- the three layers ---------- */
.bands{border-top:var(--border-hairline)}
.band{border-bottom:var(--border-hairline);padding:var(--space-xl) 0;
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-lg);align-items:start}
/* the depth rail: one mark for The Root, three for The Threshold — the eye reads the
   descent before it reads a word of it */
.band__rail{display:flex;flex-direction:column;gap:5px;padding-top:10px}
.band__rail i{width:22px;height:1px;background:var(--line-strong)}
.band__rail i:nth-child(n+2){opacity:.4}
.band__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm)}
.band__name{font:var(--weight-light) var(--size-heading)/1.15 var(--font-serif);color:var(--text-display)}
.band__chip{font:var(--size-micro)/1 var(--font-utility);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--text-muted);border:var(--border-hairline);border-radius:var(--radius-pill);padding:6px 12px}
.band__tag{font:italic var(--weight-light) var(--size-body-sm)/1.4 var(--font-serif);color:var(--text-muted)}
.band p{margin:0;max-width:var(--measure)}
.band__list{margin:var(--space-md) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.band__list li{font:var(--size-micro)/1 var(--font-utility);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-body);background:var(--bone-300);border-radius:var(--radius-pill);padding:7px 14px}

/* ---------- who this is for ---------- */
.ticks{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md) var(--space-xl)}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-sm);align-items:start;
  font:var(--weight-light) var(--size-body)/var(--leading-body) var(--font-serif);color:var(--text-body)}
.ticks li::before{content:"~";font:var(--weight-light) 1.25rem/1.6 var(--font-serif);color:var(--ochre-500)}

/* ---------- the sign-up ---------- */
.begin{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-lg)}
.begin .field{width:100%}
.begin__q{margin:0;font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--text-on-dark-muted)}
.choices{display:flex;flex-direction:column;gap:var(--space-xs);border:0;margin:0;padding:0}
.choices legend{padding:0;margin:0 0 var(--space-sm)}
.choice{display:grid;grid-template-columns:auto 1fr;gap:var(--space-sm);align-items:start;cursor:pointer;
  padding:var(--space-md);border:1px solid var(--line-on-dark);border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.choice:hover{border-color:var(--bone-500)}
.choice:has(input:checked){border-color:var(--bone-200);background:rgba(244,239,230,.06)}
/* the input is off-screen rather than display:none so it keeps focus and the screen reader */
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice__mark{width:15px;height:15px;margin-top:5px;border:1px solid var(--line-on-dark);
  border-radius:var(--radius-pill);position:relative}
.choice input:checked+.choice__mark{border-color:var(--bone-200)}
.choice input:checked+.choice__mark::after{content:"";position:absolute;inset:3px;
  border-radius:var(--radius-pill);background:var(--bone-200)}
.choice input:focus-visible+.choice__mark{outline:1px solid var(--focus-ring);outline-offset:3px}
/* multi-select steps: a square mark reads as "more than one" against the round radios */
.choice--check .choice__mark,
.choice--check input:checked+.choice__mark::after{border-radius:2px}
.choice__title{display:block;font:var(--weight-light) var(--size-body-sm)/1.3 var(--font-serif);color:var(--text-on-dark)}
.choice__note{display:block;margin-top:3px;font:var(--size-micro)/1.4 var(--font-utility);
  letter-spacing:.04em;color:var(--text-on-dark-muted)}
.begin__submit{align-self:stretch}
.begin__fine{margin:0;text-align:center;font:var(--type-label);letter-spacing:normal;color:var(--text-on-dark-muted)}
.begin__done{text-align:center;display:flex;flex-direction:column;gap:var(--space-md);align-items:center}
/* an author `display` outranks the UA sheet's [hidden] rule, so both halves of the swap have
   to restate it — otherwise the confirmation sits under the form from the moment the page
   loads, and the form stays put once it has been sent */
.begin[hidden],.begin__done[hidden]{display:none}
.begin__done h2{color:var(--text-on-dark)}
.begin__done p{color:var(--text-on-dark-muted);margin:0}
.begin__done:focus-visible{outline:1px solid var(--focus-ring);outline-offset:6px}
.consent a{color:var(--text-on-dark);text-decoration:underline;text-underline-offset:2px}

/* ---------- the sign-up, one question at a time ----------
   journey.js shows a single [data-step] and swaps them. Without JS the noscript style in
   the page reveals every step and the form reads top to bottom. */
.wizard__intro{margin:0;text-align:center;font:var(--type-label);letter-spacing:normal;
  text-transform:none;color:var(--text-on-dark-muted)}
/* "Select all that apply" under a multi-select question's legend. The legend carries a
   space-md bottom margin; pull the hint up under it and let the flex gap space the options. */
.wizard__hint{margin:calc(-1 * var(--space-md) + var(--space-xs)) 0 0;font:var(--type-label);
  letter-spacing:normal;text-transform:none;color:var(--text-on-dark-muted)}
.wizard__progress{height:2px;border-radius:2px;background:var(--line-on-dark);overflow:hidden}
.wizard__progress > span{display:block;height:100%;width:25%;background:var(--bone-200);
  transition:width .4s var(--ease-out)}
.wizard__count{margin:0;font:var(--type-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--text-on-dark-muted)}

.wizard__step{border:0;margin:0;padding:0;min-inline-size:0;display:flex;flex-direction:column;
  gap:var(--space-xs);animation:wizStep .32s var(--ease-out)}
/* .btn / fieldset display rules outrank the UA [hidden] rule on their own — restate it so
   journey.js can hide a step or a control just by toggling the attribute */
.wizard__step[hidden],
.wizard [data-back][hidden],
.wizard [data-next][hidden],
.wizard [data-submit][hidden]{display:none}
.wizard__q{display:block;float:none;margin:0 0 var(--space-md);padding:0;
  font:var(--weight-light) var(--size-heading)/1.15 var(--font-serif);color:var(--text-on-dark)}
@keyframes wizStep{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wizard__turnstile{min-height:65px;margin-top:var(--space-xs)}

.wizard__error{margin:0;padding-left:var(--space-sm);border-left:2px solid var(--ochre-400);
  font:var(--type-label);letter-spacing:normal;text-transform:none;color:var(--text-on-dark)}

.wizard__nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-md)}
.wizard__back{margin-right:auto;background:none;border:0;padding:var(--space-xs) 0;cursor:pointer;
  font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--text-on-dark-muted);transition:color var(--dur-fast) var(--ease-out)}
.wizard__back:hover{color:var(--text-on-dark)}
.wizard__back:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
/* last step: the primary action carries its full weight, Back tucks beneath it */
.wizard[data-final] .wizard__nav{flex-direction:column-reverse;align-items:stretch}
.wizard[data-final] .wizard__back{margin:0;text-align:left}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* the photo runs a full phone screen tall as its own row, with the copy pinned to the
     bottom of it (over the rocks/shoreline, well clear of Em's face) instead of the top;
     the mail card follows as a second row on the plain page background below */
  .jhero__grid{grid-template-columns:1fr;grid-template-rows:100vh auto;gap:var(--space-2xl);min-height:0}
  /* bottom padding keeps the CTA off the section line and lifts the lede clear of the rocks */
  .jhero__col{align-self:end;padding-bottom:var(--space-xl)}
  .jhero{padding-top:0;background:var(--surface-page)}
  .jhero>img,.jhero__veil{position:absolute;top:0;left:0;right:0;bottom:auto;height:100vh;min-height:520px;width:100%}
  /* the cards follow the photo on the plain page: full width, no stagger, no overhang */
  .jhero,.jhero+.section{--overhang:0px}
  /* no overhang to absorb on mobile, so the next section gets its full top padding back */
  .jhero+.section{padding-top:var(--section-y)}
  .feats{gap:var(--space-sm)}
  .feat[data-slot]{order:0;margin:0;z-index:auto}
  .js .feat:not([data-slot="2"]){cursor:auto}
  .ticks{grid-template-columns:1fr}
  .days{gap:var(--space-2xs)}
  .days__label{display:none}
  .days__n{font-size:1.25rem}
}
@media (max-width:620px){
  .band{grid-template-columns:1fr;gap:var(--space-sm)}
  .band__rail{flex-direction:row;padding-top:0}
  .band__rail i{width:14px}
  .jhero__claim{max-width:none}
  .feat{grid-template-columns:1fr}
  .feat__img{min-height:120px}
  /* the waveform is pure decoration, and it is the first thing to go when the player row
     gets tight — wrapped onto its own line it stretches into blobs and reads as a bug */
  .wave{display:none}
}

/* anchored jumps must clear the fixed nav */
#begin,#journey,#inside,#questions{scroll-margin-top:calc(var(--nav-height) + var(--space-md))}

@media (prefers-reduced-motion:reduce){
  .wizard__step{animation:none}
  .wizard__progress > span{transition:none}
}