/* ═══════════════════════════════════════════════════════════════
   THE GROWTH ARCHIVE
   Warm ivory · editorial serif · one restrained accent.
   Layout architecture follows the client reference; the surface
   follows the brand brief.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Shared with the coming-soon page on `main`, so the two read as one
     brand. The ivory is also matched to the mascot clip's baked-in
     background — change one, change the other, or the cover shows a box. */
  --ivory:      #F8F0E7;
  --ivory-deep: #EFE6D9;
  --card:       #FCF7F0;
  --ink:        #14110F;
  --ink-soft:   #3B3530;
  --muted:      #7C756B;

  /* Lifted off the mascot's antenna and boot glow. --violet is the light
     decorative tone for washes and tints; --accent is the deep one that
     has to survive as small text (6.3 : 1 on ivory, where --violet is
     only 3.4 : 1 and would fail on links and captions). */
  --violet:      #8B6FE8;
  --violet-soft: rgba(167, 139, 250, 0.13);
  --violet-lift: rgba(167, 139, 250, 0.22);
  --accent:      #5B32DF;

  /* Terracotta, demoted to validation only — an error shouldn't wear the
     brand colour, and it shouldn't be mistaken for one either. */
  --warn:       #9C3D26;

  --rule:       rgba(20, 17, 15, 0.12);
  --rule-soft:  rgba(20, 17, 15, 0.06);

  /* Instrument Serif is the closest free stand-in for Canela / Editorial
     New — high contrast, confident, magazine rather than wedding-invite.
     Cormorant Garamond read too delicate at display sizes. */
  --serif: "Canela", "Editorial New", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Neue Haas Grotesk", "Suisse Int'l", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Paper. Two fixes over the old texture, which was effectively invisible:
     alpha is forced to 1 (feTurbulence's random alpha was cancelling the
     multiply), and the transfer stretches contrast around a near-white mean
     so the grain reads without greying the ivory. Measured: mean 237,
     SD 22 — about 7.5 levels of speckle at the opacities used below. */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.38'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.38'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.38'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");

  /* Fluid rhythm — tightened from the first pass, which read too airy. */
  --pad:      clamp(1.25rem, 5vw, 6.5rem);
  --sec:      clamp(2.5rem, 6vh, 4.5rem);
  --max:      82rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: cubic-bezier(0.65, 0, 0.35, 1);
  /* Gentle in and out — for hovers, where --ease starts too sharply. */
  --glide: cubic-bezier(0.32, 0.72, 0.25, 1);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: clamp(14px, 2vw, 30px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: clamp(5rem, 12vh, 7rem);
}

body {
  margin: 0;
  padding: clamp(0px, 0.9vw, 13px);
  background: var(--ivory-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.06rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

html.is-locked, html.is-locked body { overflow: hidden; height: 100%; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: var(--ink); color: var(--ivory); }

:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; top: -100px; z-index: 100;
  transform: translateX(-50%);
  padding: 0.75rem 1.4rem;
  background: var(--ink); color: var(--ivory);
  border-radius: 999px; font-size: 0.8rem;
  transition: top 0.3s var(--ease);
}
.skip:focus { top: 1rem; }

/* ── Paper grain ────────────────────────────────────────────── */
/* Sits above the page but below the nav and the cover, each of which
   carries its own grain so the texture travels with them. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.17;
  mix-blend-mode: multiply;
  background-image: var(--paper);
}


/* ═══════════════════ SCREEN 1 — THE COVER ═══════════════════ */

.cover { display: none; }

.js .cover {
  display: block;
  position: fixed;
  inset: clamp(0px, 0.9vw, 13px);
  z-index: 50;
  perspective: 2400px;
  perspective-origin: 30% 50%;
}

.cover.is-leaving { pointer-events: none; }

/* The sheet. Hinged on its left edge and swung away like a page,
   which is why the whole cover needed a child to rotate. */
.cover__page {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* Vertical padding tracks viewport height, not width — on a 720p laptop
     the width-based padding alone pushed ENTER off the bottom. */
  padding: clamp(1.25rem, 4.5vh, 4rem) var(--pad);
  background: var(--ivory);
  border-radius: var(--r-lg);
  transform-origin: left center;
  /* Deliberately not preserve-3d: the grain child uses mix-blend-mode,
     which forces flattening anyway and can fight the rotation. */
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 1.65s cubic-bezier(0.62, 0.02, 0.34, 1),
              opacity 0.5s linear 1.15s;
}

.cover.is-leaving .cover__page {
  transform: rotateY(-118deg);
  opacity: 0;
}

/* Paper grain, carried on the sheet so it turns with it. */
.cover__page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background-image: var(--paper);
  opacity: 0.19;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Shading that deepens toward the hinge as the sheet lifts — the one
   thing that makes the turn read as paper rather than a flat rotation. */
.cover__page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(20, 17, 15, 0.46) 0%,
    rgba(20, 17, 15, 0.16) 26%,
    rgba(20, 17, 15, 0.02) 58%,
    rgba(255, 255, 255, 0.16) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.5, 1);
}

.cover.is-leaving .cover__page::after { opacity: 1; }

.cover__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 60rem);
  text-align: center;
}

/* The wordmark itself, not a substitute typeface. */
/* Margins here and on .cover__gate are deliberately tighter than the type
   would otherwise want: the mascot now sits between the lines and the gate,
   and the whole cover still has to fit one screen with nothing scrollable. */
.cover__title {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.1rem, 3.4vh, 2.75rem);
}

/* The mark is capped by height as well as width. The whole cover has to
   sit in one screen — nothing on it is reachable by scrolling. */
.cover__title img {
  width: min(clamp(252px, 52vw, 610px), 40vh);
  height: auto;
}

.js .cover__title img {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.4rem) scale(1.04);
  animation: markIn 1.6s var(--ease) 0.15s forwards;
}

@keyframes markIn {
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
}

.cover__lines {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2.2vh, 2.1rem);
}

.cover__line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

.cover__line--key { font-style: normal; color: var(--ink); letter-spacing: 0.02em; }

/* ── Mascot on the cover ───────────────────────────────────────
   Sized in vh as well as vw for the same reason as the wordmark: on a
   short laptop screen a vw-only size pushes ENTER off the bottom. */
.cover__bot {
  position: relative;
  width: min(clamp(118px, 12vw, 172px), 19vh);
  margin: clamp(0.6rem, 2vh, 1.35rem) auto clamp(0.5rem, 1.6vh, 1.1rem);

  /* The clip's cream background is baked in and matched to --ivory, but
     video compositing applies a slightly different colour transform than
     the source pixels, so a faint square survives the match. Feathering
     the border dissolves it. Bands are sized off the mascot's real bounds
     in frame — it reaches 5% from the top and 6.7% from the bottom, so Y
     stays tight or the antenna and boots get clipped.

     The mask lives on the wrapper, not the video, so the grain layer
     below is feathered by exactly the same falloff. */
  --fadeY: 3.5%;
  --fadeX: 9%;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fadeY), #000 calc(100% - var(--fadeY)), transparent 100%),
    linear-gradient(to right,  transparent 0, #000 var(--fadeX), #000 calc(100% - var(--fadeX)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fadeY), #000 calc(100% - var(--fadeY)), transparent 100%),
    linear-gradient(to right,  transparent 0, #000 var(--fadeX), #000 calc(100% - var(--fadeX)), transparent 100%);
          mask-composite: intersect;
}

.cover__vid {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: transparent;
}

/* The cover sheet carries its own grain and the video would otherwise
   escape it, leaving the mascot a shade cleaner than the paper around
   him. The mask on the wrapper makes this a stacking context, so the
   multiply blends against the clip rather than the page. */
.cover__bot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--paper);
  opacity: 0.19;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cover__gate { margin-top: clamp(0.85rem, 2.6vh, 2.4rem); }

/* Squashed windows: tighten the type rather than let ENTER slip off. The
   threshold used to be 600px, which was fine before the mascot took a
   slice of the column. Measured after: the untightened cover overflows
   below roughly 770px of viewport, so the cutover sits above that. */
@media (max-height: 780px) {
  .cover__line { font-size: clamp(0.92rem, 3.1vh, 1.45rem); }
  .cover__title { margin-bottom: clamp(0.7rem, 2.4vh, 1.5rem); }
  .cover__gate { margin-top: clamp(0.7rem, 2.2vh, 1.5rem); }
  .cover__title img { width: min(clamp(210px, 52vw, 610px), 40vh); }
  .cover__bot { width: min(clamp(72px, 11vw, 158px), 15vh); margin-block: 0.5rem 0.35rem; }
}

.cover__granted {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(0.85rem, 2.2vh, 1.35rem);
}

.js [data-step] {
  opacity: 0;
  transform: translateY(1rem);
  animation: riseIn 1.4s var(--ease) forwards;
}
/* Must stay at or above the specificity of `.js [data-step]` above,
   or the shorthand there resets these delays to zero. */
.js [data-step="1"] { animation-delay: 0.80s; }
.js [data-step="2"] { animation-delay: 2.00s; }
.js [data-step="3"] { animation-delay: 3.00s; }
.js [data-step="4"] { animation-delay: 3.70s; }
.js [data-step="5"] { animation-delay: 4.30s; }

@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }

/* Still text, not a button — but it should catch the eye. */
.enter {
  position: relative;
  display: inline-block;
  padding: 0.72rem 1.6rem 0.78rem;
  font-size: clamp(0.84rem, 1.35vw, 0.98rem);
  font-weight: 400;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 999px;
  isolation: isolate;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='6.5' fill='none' stroke='%2314110F' stroke-width='1'/%3E%3Ccircle cx='13' cy='13' r='1.4' fill='%2314110F'/%3E%3C/svg%3E") 13 13, pointer;
  transition: color 0.45s var(--ease);
}

/* Soft highlight wash that breathes, so the eye lands here. */
.enter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--violet-soft);
  transition: background 0.45s var(--ease), transform 0.45s var(--ease);
}

/* Starts once the gate has finished arriving — see [data-step="5"]. */
.js .enter::before { animation: enterBreathe 3.4s ease-in-out 5.2s infinite; }

@keyframes enterBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.985); }
  50%      { opacity: 1;    transform: scale(1); }
}

.enter__rule {
  position: absolute;
  left: 1.6rem; bottom: 0.5rem;
  width: calc(100% - 3.2rem); height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}

.enter:hover, .enter:focus-visible { color: var(--accent); }
.enter:hover::before, .enter:focus-visible::before {
  background: var(--violet-lift);
  animation-play-state: paused;
}
.enter:hover .enter__rule, .enter:focus-visible .enter__rule { transform: scaleX(1); }


/* ═══════════════════ NAV ═══════════════════ */

.nav {
  position: fixed;
  top: clamp(0.6rem, 1.6vw, 1.35rem);
  left: 50%;
  z-index: 40;
  width: min(calc(100% - 2 * clamp(0.75rem, 3vw, 2.5rem)), var(--max));
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: 0.5rem 0.5rem 0.5rem clamp(1rem, 2vw, 1.6rem);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: rgba(248, 240, 231, 0.80);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(20, 17, 15, 0.03), 0 8px 28px -14px rgba(20, 17, 15, 0.16);
  opacity: 0;
  transform: translate(-50%, -1.2rem);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.nav.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* logo.png is the supplied lockup, trimmed to the ink and made
   transparent so it sits on any ground. */
.brandmark { flex: none; display: block; }
.brandmark img { width: 100%; height: auto; }

.nav__mark { width: clamp(46px, 4.6vw, 56px); }

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin-inline: auto;
}

.nav__links a {
  position: relative;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -0.3rem;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { flex: none; }

.nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.6rem 0.35rem 0.6rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s var(--glide);
}
.nav__cart:hover { color: var(--accent); }

.nav__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0;
}
.nav__count[hidden] { display: none; }

.nav__toggle {
  display: none;
  flex: none;
  margin-left: auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute; left: 50%; width: 15px; height: 1px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateX(-50%) translateY(-3px) rotate(-45deg); }

.drawer {
  position: fixed;
  z-index: 39;
  top: clamp(3.6rem, 8vw, 4.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 1.5rem), 26rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -24px rgba(20, 17, 15, 0.3);
}
.drawer[hidden] { display: none; }

.drawer a {
  padding: 0.85rem 0.25rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer a:last-child { border: 0; }

.drawer__cta {
  margin-top: 0.75rem;
  padding: 0.9rem 1.25rem !important;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}


/* ═══════════════════ SHARED ═══════════════════ */

.js .site { opacity: 0; transition: opacity 1.2s var(--slow) 0.3s; }
.js .site.is-open { opacity: 1; }

.shell {
  background: var(--ivory);
  border-radius: var(--r-lg);
  overflow: clip;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: translateY(0); }

.eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(0.8rem, 1.8vh, 1.3rem);
}

.head { max-width: var(--max); margin: 0 auto clamp(1.85rem, 4.2vh, 3rem); }
.head--center { text-align: center; }
.head--center .eyebrow { text-indent: 0; }

.head h2, .s4__left h2, .faq__head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.head__sub {
  max-width: 44ch;
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  color: var(--muted);
}
.head--center .head__sub { margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}

.btn--solid { background: var(--ink); color: var(--ivory); }
.btn--solid:hover { background: #2A2420; transform: translateY(-1px); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.68rem; letter-spacing: 0.12em; }
.btn--lg { padding: 1.05rem 2rem; font-size: 0.8rem; }

.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.link-cta {
  position: relative;
  align-self: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding-bottom: 0.25rem;
}
.link-cta span { position: relative; }
.link-cta span::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.35s var(--ease);
}
.link-cta:hover { color: var(--ink); }
.link-cta:hover span::after { opacity: 1; }


/* ═══════════════════ HERO ═══════════════════ */

/* No nav over the hero, so it needs far less top clearance. */
.hero { padding: clamp(4.5rem, 11vh, 7rem) 0 var(--sec); }

/* Without JS the slides stack and both stay readable; `is-live` is what
   turns the stack into a track, and only JS ever sets it. */
.hero__viewport { overflow: hidden; }

.hero__track.is-live {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform 0.85s var(--glide);
}

/* Slides share a grid row, so the viewport is as tall as the tallest one
   and nothing jumps as they change. */
.hero__slide { min-width: 0; }

.hero__track.is-live .hero__slide {
  opacity: 0.25;
  transition: opacity 0.7s var(--ease);
}
.hero__track.is-live .hero__slide.is-on { opacity: 1; }

.hero__one,
.hero__two {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.hero__one {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 5.5vw, 4.5rem);
}

/* ── Carousel controls ─────────────────────────────────────── */
.hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  max-width: var(--max);
  margin: clamp(1.5rem, 3.5vh, 2.25rem) auto 0;
  padding-inline: var(--pad);
}
.hero__nav[hidden] { display: none; }

.hero__arrow {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.35s var(--glide), color 0.35s var(--glide),
              background 0.35s var(--glide);
}
.hero__arrow:hover { border-color: var(--ink); color: var(--ink); background: var(--violet-soft); }

.hero__dots { display: flex; align-items: center; gap: 0.55rem; }

/* The hit area is the button; the dot is the 7px mark inside it, which
   keeps the target finger-sized without a row of fat circles. */
.hero__dot {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
}
.hero__dot::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(20, 17, 15, 0.22);
  transition: background 0.35s var(--glide), width 0.35s var(--glide);
}
.hero__dot:hover::before { background: rgba(20, 17, 15, 0.4); }
.hero__dot.is-on::before { width: 18px; background: var(--accent); }

.hero__head {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7.5vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: 0.004em;
  margin-bottom: clamp(1.5rem, 3.4vh, 2.2rem);
}

.hero__head .word { display: block; }
.js .hero__head .word[data-reveal] { transform: translateY(0.45em); }
.hero__head .word--em { font-style: italic; color: var(--accent); }

.hero__lede {
  max-width: 40ch;
  font-size: clamp(1rem, 0.5vw + 0.92rem, 1.16rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3.4vh, 2.1rem);
}

/* The real covers, fanned like books laid out on a table. Portrait A-series
   art (1 : 1.414), so the cards match that ratio exactly — no cropping. */
.hero__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
}

.vol {
  position: absolute;
  top: 50%;
  width: 46%;
  aspect-ratio: 1 / 1.414;
  border-radius: 5px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(20, 17, 15, 0.06),
              0 26px 52px -30px rgba(20, 17, 15, 0.5);
  transition: transform 0.9s var(--glide), box-shadow 0.9s var(--glide);
}

.vol img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vol--3 { left: 0;   transform: translateY(-52%) rotate(-6.5deg); z-index: 1; }
.vol--2 { left: 27%; transform: translateY(-50%) rotate(-1deg);   z-index: 2; }
.vol--1 { left: 54%; transform: translateY(-46%) rotate(5deg);    z-index: 3; }

.hero__stack:hover .vol--3 { transform: translateY(-54%) rotate(-9deg) translateX(-3%); }
.hero__stack:hover .vol--2 { transform: translateY(-51%) rotate(-1deg); }
.hero__stack:hover .vol--1 { transform: translateY(-44%) rotate(7.5deg) translateX(3%); }

/* Only two are released, so the fan is re-centred rather than left with
   a hole where the third volume used to sit. */
.hero__stack--two .vol { width: 50%; }
.hero__stack--two .vol--2 { left: 8%;  transform: translateY(-52%) rotate(-5.5deg); }
.hero__stack--two .vol--1 { left: 42%; transform: translateY(-46%) rotate(4.5deg); }
.hero__stack--two:hover .vol--2 { transform: translateY(-54%) rotate(-8deg) translateX(-3%); }
.hero__stack--two:hover .vol--1 { transform: translateY(-44%) rotate(7deg) translateX(3%); }

.hero__stack:hover .vol { box-shadow: 0 2px 4px rgba(20, 17, 15, 0.06),
                                      0 32px 60px -30px rgba(20, 17, 15, 0.55); }

/* Free marker on the Scorecard */
.vol__flag {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  padding: 0.24em 0.7em 0.3em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}


/* ── Slide 2 — the offers ──────────────────────────────────── */
.hero__two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* The launch offer. Mirrors slide 1's two columns so the eye doesn't have
   to re-learn the layout when the slide changes. */
.deal {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.deal__copy { min-width: 0; }

.deal__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.34rem 0.95rem;
  margin-bottom: clamp(0.9rem, 2.2vh, 1.35rem);
  border-radius: 999px;
  background: rgba(139, 111, 232, 0.16);
  border: 1px solid rgba(139, 111, 232, 0.32);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.deal__dot {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(91, 50, 223, 0.7);
}
.js .deal__dot { animation: dealPulse 2s ease-in-out infinite; }

@keyframes dealPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.25); opacity: 1; }
}

.deal__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0.004em;
  margin-bottom: clamp(0.9rem, 2.2vh, 1.35rem);
}
.deal__title span { display: block; font-style: italic; color: var(--accent); }

.deal__line {
  max-width: 42ch;
  font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.08rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.deal__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.85rem;
  margin: clamp(1.15rem, 2.8vh, 1.75rem) 0 clamp(1.25rem, 3vh, 1.85rem);
}

.deal__was {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.deal__now {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1;
  color: var(--accent);
}

.deal__terms {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.deal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

.deal__art {
  position: relative;
  display: block;
  justify-self: center;
  width: min(100%, 20rem);
  border-radius: 6px;
  transform: rotate(2.5deg);
  transition: transform 0.9s var(--glide), box-shadow 0.9s var(--glide);
  box-shadow: 0 2px 4px rgba(20, 17, 15, 0.06),
              0 30px 58px -32px rgba(20, 17, 15, 0.5);
}
.deal__art img { border-radius: inherit; }
.deal__art:hover { transform: rotate(0deg) translateY(-4px); }

/* The price again, on the artwork — the covers are the thing people look
   at, and this is the number the slide exists to communicate. */
.deal__sticker {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 7vw, 4.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px -6px rgba(91, 50, 223, 0.6);
}


/* ═══════════════════ TRUST STRIP ═══════════════════ */

.strip {
  border-block: 1px solid var(--rule-soft);
  background:
    radial-gradient(circle, rgba(20,17,15,0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--card);
}

/* Always three across. `auto-fit` used to break this to one column per
   row on a phone, which turned a glance-able strip into three screens
   of scrolling. The type shrinks instead. */
.strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.85rem, 4.5vh, 3rem) var(--pad);
  gap: clamp(0.75rem, 3vw, 2.5rem);
}

.stat dt {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.65rem;
}

.stat dd {
  margin: 0;
  max-width: 30ch;
  font-size: 0.88rem;
  color: var(--muted);
  text-wrap: pretty;
}


/* ═══════════════════ FORM PRIMITIVES ═══════════════════
   Shared by the Scorecard gate here and by the checkout in shop.css.
   They live in style.css because the home page doesn't load shop.css. */

.field { display: grid; gap: 0.4rem; }

.field label,
.choice legend {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--ivory);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s var(--glide);
}
.field input:focus { border-color: var(--ink); }
/* --warn, not --accent: the accent is the brand violet, and a violet
   error field is indistinguishable from a focused one. */
.field input[aria-invalid="true"] { border-color: var(--warn); }

.field__err { font-size: 0.72rem; color: var(--warn); min-height: 1em; }

.prefixed { position: relative; display: flex; align-items: center; }
.prefixed__at { position: absolute; left: 1rem; color: var(--muted); pointer-events: none; }
.prefixed input { padding-left: 2.05rem; }

.choice { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.choice__opts { display: flex; gap: 0.6rem; }

.choice__opts label {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--ivory);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s var(--glide), background 0.3s var(--glide),
              color 0.3s var(--glide);
}
.choice__opts input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice__opts label:hover { border-color: var(--muted); }
.choice__opts input:checked + span { color: var(--ivory); }
.choice__opts label:has(input:checked) { background: var(--ink); border-color: var(--ink); }
.choice__opts label:has(input:focus-visible) { outline: 1.5px solid var(--accent); outline-offset: 2px; }


/* ═══════════════════ THE SCORECARD GATE ═══════════════════ */

.sc {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec) var(--pad);
}

.sc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--violet-soft), transparent 62%),
    var(--card);
}

.sc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.34rem 0.9rem;
  margin-bottom: clamp(0.75rem, 2vh, 1.15rem);
  border-radius: 999px;
  background: rgba(139, 111, 232, 0.16);
  border: 1px solid rgba(139, 111, 232, 0.32);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Echo of the mascot's antenna light, same as the coming-soon page. */
.sc__eyebrow::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  text-indent: 0;
  box-shadow: 0 0 8px rgba(91, 50, 223, 0.7);
}

.sc__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  margin-bottom: clamp(0.85rem, 2vh, 1.25rem);
  text-wrap: balance;
}

.sc__desc {
  max-width: 46ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.sc__facts {
  margin-top: clamp(1.1rem, 2.6vh, 1.6rem);
  display: grid;
  gap: 0.5rem;
}
.sc__facts li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.sc__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent);
}

.sc__panel { min-width: 0; }
.sc__open { width: 100%; justify-content: center; }
.sc__open[hidden] { display: none; }

.sc__gate[hidden] { display: none; }
.js .sc__gate:not([hidden]) { animation: gateIn 0.7s var(--ease); }
@keyframes gateIn { from { opacity: 0; transform: translateY(-0.6rem); } }

.sc__form { display: grid; gap: clamp(0.85rem, 2vh, 1.15rem); }
.sc__form[hidden] { display: none; }

.sc__intro {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  text-align: center;
}

/* The field, prefixed-input and choice styles are shared with the shop
   pages; see shop.css. Only the two blocks below are specific to this. */
.sc__submit { width: 100%; justify-content: center; margin-top: 0.35rem; }
.sc__submit[disabled] { cursor: default; opacity: 0.55; }

.sc__fine {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.sc__done { text-align: center; }
.sc__done[hidden] { display: none; }

.sc__doneHead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  margin-bottom: 0.5rem;
}
.sc__doneSub { font-size: 0.88rem; color: var(--muted); }
.sc__doneSub a { border-bottom: 1px solid currentColor; }
.sc__doneSub a:hover { color: var(--accent); }


/* ═══════════════════ SECTION 2 ═══════════════════ */

.s2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec) var(--pad);
}

.s2__head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  line-height: 1.1;
}
.s2__head h2 span { display: block; }
.s2__head h2 .em { font-style: italic; color: var(--accent); }

.s2__body p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-bottom: 0.55rem;
}

.s2__turn {
  margin-top: clamp(1.4rem, 3.2vh, 2rem);
  padding-top: clamp(1.2rem, 2.8vh, 1.75rem);
  border-top: 1px solid var(--rule);
}
.s2__turn p { max-width: 42ch; }
.s2__goal { color: var(--ink) !important; font-style: italic; }

/* ── Editorial figures ──────────────────────────────────────────
   Line diagrams rather than stock photography: they carry the brand's
   ink-on-ivory language and stay crisp at any size. */
.fig {
  grid-column: 1 / -1;
  margin: clamp(2rem, 5vh, 3.25rem) 0 0;
  padding-top: clamp(1.5rem, 3.5vh, 2.25rem);
  border-top: 1px solid var(--rule-soft);
  color: var(--ink);
}

.fig svg { width: 100%; height: auto; display: block; }

.fig__label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  fill: var(--muted);
}

.fig figcaption {
  margin-top: clamp(0.9rem, 2vh, 1.35rem);
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 56ch;
}

/* Step diagrams */
.step__fig {
  display: block;
  width: clamp(42px, 4.2vw, 52px);
  margin-bottom: clamp(0.9rem, 2vh, 1.35rem);
  color: var(--accent);
}
.step__fig svg { width: 100%; height: auto; }


/* ═══════════════════ SECTION 3 — SHELF ═══════════════════ */

.s3 { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad); }

.shelf { border-top: 1px solid var(--rule); }

.row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.75rem clamp(4.5rem, 7vw, 6.5rem) minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(0.85rem, 2.2vw, 2rem);
  padding: clamp(1.25rem, 2.8vh, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
}

/* Cover thumbnail — same A-series ratio as the artwork. */
.row__cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border-radius: 3px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 17, 15, 0.07),
              0 12px 24px -18px rgba(20, 17, 15, 0.45);
  transition: transform 0.85s var(--glide), box-shadow 0.85s var(--glide);
}

.row__cover img { width: 100%; height: 100%; object-fit: cover; }

.row:hover .row__cover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 1px 2px rgba(20, 17, 15, 0.07),
              0 18px 30px -18px rgba(20, 17, 15, 0.5);
}

/* Placeholder for the two products whose covers haven't been supplied. */
.row__cover--pending {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  box-shadow: none;
}

.row__coverName {
  font-family: var(--serif);
  font-size: clamp(0.56rem, 0.85vw, 0.7rem);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

/* Hover moves the contents, never the box — animating padding reflowed
   every line of text and made the whole row snap. */
.row__no,
.row__main,
.row__act {
  transition: transform 0.85s var(--glide), color 0.6s var(--glide);
}

.row:hover .row__no,   .row:focus-visible .row__no   { transform: translateX(5px); }
.row:hover .row__main, .row:focus-visible .row__main { transform: translateX(9px); }
.row:hover .row__act,  .row:focus-visible .row__act  { transform: translateX(4px); }

/* Soft wash behind the row. */
.row::after {
  content: "";
  position: absolute;
  inset: 0.35rem -1.1rem;
  z-index: -1;
  border-radius: 10px;
  background: rgba(20, 17, 15, 0.022);
  opacity: 0;
  transition: opacity 0.75s var(--glide);
}
.row:hover::after, .row:focus-visible::after { opacity: 1; }

.row::before {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: rgba(20, 17, 15, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--glide);
}
.row:hover::before, .row:focus-visible::before { transform: scaleX(1); }

.row:hover .row__desc { color: var(--ink-soft); }
.row:hover .row__no { color: var(--accent); }

.row__no {
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding-top: 0.5rem;
}

.row__title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

.tag {
  display: inline-block;
  vertical-align: 0.28em;
  margin-left: 0.65rem;
  padding: 0.2em 0.72em 0.26em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag--free { color: var(--accent); }

.row__desc {
  display: block;
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  transition: color 0.6s var(--glide);
}

.row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.row__facts span {
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.row__act {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.row__arrow { transition: transform 0.85s var(--glide); }
.row:hover .row__arrow { transform: translateX(5px); }


/* ═══════════════════ SECTION 4 — APPROACH ═══════════════════ */

.s4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec) var(--pad);
}

.s4__left { position: sticky; top: clamp(6rem, 14vh, 8rem); align-self: start; }

.s4__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  color: var(--muted);
  margin-top: 0.9rem;
}

.s4__note {
  max-width: 34ch;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  font-size: 0.92rem;
  color: var(--muted);
}

.s4__right {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vh, 2.75rem);
}

.creed__head {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.creed__list li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.6;
}

.mark { flex: none; width: 1.05em; font-family: var(--sans); font-size: 0.6em; }

.creed__list--no li { color: var(--muted); }
.creed__list--no .mark { color: rgba(20, 17, 15, 0.26); }
.creed__list--yes .mark { color: var(--accent); }


/* ═══════════════════ HOW IT WORKS ═══════════════════ */

.how {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec) var(--pad);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.step {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--card);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 45px -32px rgba(20, 17, 15, 0.45);
}

.step__no {
  display: block;
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: clamp(0.8rem, 1.8vh, 1.15rem);
}

.step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

.step p { color: var(--muted); font-size: 0.92rem; }


/* ═══════════════════ SECTION 5 — QUOTE ═══════════════════ */

.s5 {
  display: grid;
  place-items: center;
  min-height: min(72vh, 32rem);
  padding: var(--sec) var(--pad);
  background: var(--ink);
  color: var(--ivory);
}

.s5__quote {
  max-width: 24ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 6.2vw, 5rem);
  line-height: 1.14;
  text-wrap: balance;
}
.s5__quote span { display: block; }
.s5__quote .em { font-style: italic; color: rgba(248, 246, 242, 0.62); transition-delay: 0.2s; }


/* ═══════════════════ CTA BANNER ═══════════════════ */

.banner { padding: var(--sec) var(--pad); }

.banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle, rgba(20,17,15,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--card);
}

.banner__text { max-width: 46ch; }

.banner__text h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.14;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}

.banner__text p { color: var(--muted); font-size: 0.95rem; }


/* ═══════════════════ FAQ ═══════════════════ */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec) var(--pad);
}

.faq__head { position: sticky; top: clamp(6rem, 14vh, 8rem); align-self: start; }
.faq__note { margin-top: 1.25rem; max-width: 30ch; color: var(--muted); font-size: 0.92rem; }

.faq__list { border-top: 1px solid var(--rule); }

.qa { border-bottom: 1px solid var(--rule); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.15rem, 2.5vh, 1.6rem) 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }

.qa__sign {
  position: relative;
  flex: none;
  width: 13px; height: 13px;
}
.qa__sign::before, .qa__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.qa__sign::before { width: 13px; height: 1px; }
.qa__sign::after  { width: 1px; height: 13px; }
.qa[open] .qa__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.qa__body {
  padding-bottom: clamp(1.15rem, 2.5vh, 1.6rem);
  max-width: 58ch;
}
.qa__body p { color: var(--muted); font-size: 0.93rem; }

.qa[open] .qa__body { animation: qaOpen 0.5s var(--ease); }
@keyframes qaOpen { from { opacity: 0; transform: translateY(-0.4rem); } }


/* ═══════════════════ SECTION 6 — BEGIN ═══════════════════ */

.s6 { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad); }

.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.6rem, 3.6vh, 2.5rem);
}

.path { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }

.path__q { max-width: 22ch; font-size: 0.88rem; color: var(--muted); }
.path__arrow { color: var(--accent); transition: transform 0.5s var(--ease); }

.path__a {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.22;
  padding-bottom: 0.25rem;
}
.path__a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.path:hover .path__arrow { transform: translateY(0.35rem); }
.path:hover .path__a::after, .path:focus-visible .path__a::after { transform: scaleX(1); }


/* ═══════════════════ SUBSCRIBE ═══════════════════ */

.sub { padding: 0 var(--pad) var(--sec); }

.sub__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 4rem);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--ivory);
}

.sub__text h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 2.85rem);
  line-height: 1.12;
  margin-bottom: 0.8rem;
  text-wrap: balance;
}
.sub__text p { color: rgba(248, 246, 242, 0.6); font-size: 0.93rem; max-width: 42ch; }

.sub__form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.sub__input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.9rem 1.35rem;
  border: 1px solid rgba(248, 246, 242, 0.22);
  border-radius: 999px;
  color: var(--ivory);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.35s var(--ease);
}
.sub__input::placeholder { color: rgba(248, 246, 242, 0.42); }
.sub__input:focus { border-color: rgba(248, 246, 242, 0.7); }

.sub__form .btn--solid {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
}
.sub__form .btn--solid:hover { background: #fff; }

.sub__msg {
  flex-basis: 100%;
  min-height: 1.1rem;
  padding-left: 1.35rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(248, 246, 242, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.sub__msg.is-shown { opacity: 1; }


/* ═══════════════════ FOOTER ═══════════════════ */

.foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vh, 3.25rem) var(--pad) clamp(2rem, 4.5vh, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}

.foot__brand .brandmark {
  width: clamp(112px, 12vw, 142px);
  margin-bottom: 1.6rem;
}
.foot__brand p { max-width: 34ch; font-size: 0.88rem; color: var(--muted); }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.foot__cols > div { display: flex; flex-direction: column; gap: 0.6rem; }

.foot__cols h3 {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.foot__cols a {
  font-size: 0.86rem;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.foot__cols a:hover { color: var(--accent); }

.foot__base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
  padding-top: clamp(1.15rem, 2.4vh, 1.6rem);
  border-top: 1px solid var(--rule-soft);
  font-size: 0.75rem;
  color: var(--muted);
}


/* ═══════════════════ RESPONSIVE ═══════════════════ */

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__cta { margin-inline-start: auto; }
}

@media (max-width: 940px) {
  /* Stacked, the covers used to fall to the bottom of a 1070px hero —
     roughly 250px below the fold on a phone, so the three products never
     appeared on the first screen. `display: contents` dissolves the text
     column into the hero grid, which lets the stack be ordered between
     the headline and the lede without touching the source order (and so
     without changing what a screen reader hears first). Row gap goes to
     zero because the individual elements already carry their own
     margins; the grid gap would apply between all six. */
  .hero { padding-top: clamp(2.75rem, 6.5vh, 5rem); }

  .hero__one {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .hero__col { display: contents; }

  .hero__one .eyebrow { order: 1; }
  .hero__head         { order: 2; margin-bottom: clamp(1.15rem, 2.8vh, 1.75rem); }
  .hero__stack        { order: 3; }
  .hero__lede         { order: 4; max-width: none; }
  .hero__actions      { order: 5; }

  .sc__inner { grid-template-columns: 1fr; }

  /* Artwork above the copy, same as slide 1's covers — the number and the
     button both need to stay above the fold. */
  .deal {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vh, 2.5rem);
  }
  .deal__copy { order: 2; }
  .deal__art  { order: 1; width: min(100%, 13rem); }
  .deal__line { max-width: none; }

  /* Sized to leave room for the lede and buttons underneath rather than
     to fill the column — the point is that all three are seen at once. */
  .hero__stack {
    max-width: min(100%, 26rem);
    margin: 0 auto clamp(1.35rem, 3.4vh, 2rem);
    aspect-ratio: 1 / 0.86;
  }
  .vol { width: 50%; }
  .vol--2 { left: 25%; }
  .vol--1 { left: 50%; }

  .s2, .s4, .faq { grid-template-columns: 1fr; }
  .s4__left, .faq__head { position: static; }

  .row { grid-template-columns: 2.25rem clamp(3.75rem, 14vw, 5rem) minmax(0, 1fr); }
  .row__act { grid-column: 3; padding-top: 0.9rem; }
  /* Narrow rows leave little room beside the cover — let chips wrap
     rather than push past the edge. */
  .row__facts span { white-space: normal; }

  .foot { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* Cover on its own line, heading beneath it — side-by-side leaves the
     title too narrow once the thumbnail takes its share. */
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.85rem, 2.5vw, 1.1rem);
  }
  .row__no {
    position: absolute;
    top: clamp(1.25rem, 2.8vh, 1.9rem);
    right: 0;
    padding-top: 0;
  }
  .row__cover { width: clamp(104px, 36vw, 140px); }
  .row__act { grid-column: 1; padding-top: 0.35rem; }
  .row__title { padding-right: 2.5rem; }

  .nav__cta { display: none; }
  .nav__cart { margin-inline-start: auto; }
  .cover__title { margin-bottom: clamp(1.1rem, 3.4vh, 2.25rem); }
  /* Sized so the covers clear the fold *and* leave the CTA within reach
     of it on a 6.1" phone — measured, not guessed. */
  .hero__stack { max-width: min(100%, 17.5rem); aspect-ratio: 1 / 0.92; }
  .vol { width: 54%; }
  .vol--3 { transform: translateY(-52%) rotate(-5deg); }
  .vol--2 { left: 23%; }
  .vol--1 { left: 46%; transform: translateY(-47%) rotate(4deg); }
  .banner__inner, .sub__inner { text-align: left; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .link-cta { width: 100%; text-align: center; }
  .sub__form .btn { width: auto; }

  /* Three across at 320px means the labels have to give. The numbers
     stay legible; the descriptions become captions. */
  .strip__grid { gap: 0.6rem; }
  .stat dt { font-size: clamp(1.4rem, 7vw, 2.1rem); margin-bottom: 0.4rem; }
  .stat dd { font-size: 0.68rem; line-height: 1.35; }

  .deal__actions .link-cta { width: 100%; text-align: center; }
}


/* ═══════════════════ REDUCED MOTION ═══════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .cover__title img,
  .js [data-step] { opacity: 1; clip-path: none; transform: none; animation: none; }

  /* No page turn — just clear the sheet away. */
  .cover.is-leaving .cover__page { transform: none; opacity: 0; }

  .js [data-reveal],
  .js .hero__head .word { opacity: 1; transform: none; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}