/* ==========================================================================
   Pip's Big Future — version one
   Built 2026-09-22 as the reference implementation for the Webflow build.

   CONTRAST NOTE, IMPORTANT AND DELIBERATE
   The signature orange #FF6500 measures 2.78:1 against the warm cream ground.
   That fails WCAG 1.4.3 for body text AND for large text (which needs 3:1), so
   orange is never used as text anywhere in this stylesheet. It is used as fill
   only, and text placed ON orange is obsidian (6.2:1, passes). Sky blue and
   sunflower are treated the same way. This keeps the brand palette exactly as
   specified while staying accessible. See docs/WEBFLOW-BUILD.md.
   ========================================================================== */

:root {
  --obsidian:  #171717;
  --orange:    #FF6500;
  --cream:     #FFF8EE;
  --sand:      #EFE4D5;
  --sky:       #4DB6E2;
  --sunflower: #F7C843;

  /* derived, for text that must pass contrast */
  --muted:      #5A524A;              /* 7.2:1 on cream */
  --muted-ink:  rgba(255,248,238,.74);/* on obsidian */
  --line:       rgba(23,23,23,.10);
  --line-ink:   rgba(255,248,238,.16);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --r-card: 32px;
  --r-lg:   44px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(23,23,23,.05);
  --shadow:    0 14px 34px -14px rgba(23,23,23,.18), 0 3px 10px rgba(23,23,23,.05);
  --shadow-lg: 0 34px 70px -28px rgba(23,23,23,.28), 0 6px 18px rgba(23,23,23,.06);

  --display: 'Fredoka', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
  --text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--obsidian);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--obsidian);
  outline-offset: 3px;
  border-radius: 6px;
}
.sec--ink :focus-visible, .footer :focus-visible,
.video :focus-visible { outline-color: var(--cream); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--obsidian); color: var(--cream);
  padding: .85rem 1.4rem; border-radius: 0 0 var(--r-pill) 0; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
}
h1.display { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2.display { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3.display { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.display em { font-style: normal; }

h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1.28rem; margin: 1.8rem 0 .5rem; }
h4 { font-size: 1.12rem; margin: .1rem 0 .4rem; }

p { margin: 0 0 1.1rem; }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--muted); max-width: 40ch; }
.sec__lede { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.sec--ink .lede, .sec--ink .sec__lede, .sec--ink p { color: var(--muted-ink); }

.eyebrow {
  font-family: var(--text);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .9rem;
}
.sec--ink .eyebrow { color: var(--muted-ink); }

.center { text-align: center; }
.fineprint { font-size: .86rem; color: var(--muted); text-align: center; margin-top: 1.6rem; }

.link { color: var(--obsidian); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px; text-decoration-color: var(--orange); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding: .95rem 1.7rem; border-radius: var(--r-pill);
  border: 2px solid transparent; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  will-change: transform;
}
/* orange fill + obsidian label = 6.2:1 */
.btn--primary { background: var(--orange); color: var(--obsidian); box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--primary:active { transform: translateY(0) scale(.985); }

.btn--ghost { background: transparent; color: var(--obsidian); border-color: var(--obsidian); }
.btn--ghost:hover { background: var(--obsidian); color: var(--cream); transform: translateY(-2px); }

.btn--onink { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--onink:hover { background: var(--cream); color: var(--obsidian); transform: translateY(-2px); }

.btn--sm { padding: .62rem 1.15rem; font-size: .9rem; background: var(--obsidian); color: var(--cream); }
.btn--sm:hover { transform: translateY(-2px); }
.btn--full { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.7rem 0 1.4rem; }

/* ---------- announcement + nav ---------- */
.announce {
  background: var(--obsidian); color: var(--cream);
  text-align: center; font-size: .86rem;
}
.announce p { margin: 0; padding: .6rem var(--gutter); }
.announce a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,248,238,.88);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; gap: 1.4rem; padding-block: .7rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark { width: 30px; height: auto; }
.brand__name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--muted); }
.nav__links a:hover { color: var(--obsidian); }

.burger { display: none; background: none; border: 0; padding: .5rem; }
.burger span { display: block; width: 22px; height: 2px; background: var(--obsidian); border-radius: 2px; }
.burger span + span { margin-top: 6px; }

.drawer { position: fixed; inset: 0; z-index: 60; background: var(--cream);
  padding: 5rem var(--gutter) 2rem; }
.drawer[hidden] { display: none; }
.drawer nav { display: flex; flex-direction: column; gap: .4rem; }
.drawer nav a { font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  text-decoration: none; padding: .6rem 0; }
.drawer nav .btn { margin-top: 1rem; font-size: 1rem; }
.drawer__close { position: absolute; top: 1.1rem; right: var(--gutter);
  background: none; border: 0; font-size: 2.2rem; line-height: 1; }

/* ---------- hero ---------- */
/* The hero art is a generated scene that already carries cream space on its left,
   so the copy sits in that space rather than over the character. */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__scene { position: absolute; inset: 0; z-index: 1; }
.hero__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 38%; }
.hero__scene::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(95deg, var(--cream) 0%, rgba(255,248,238,.94) 32%, rgba(255,248,238,.55) 47%, rgba(255,248,238,0) 62%);
}
.hero__inner { position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center;
  min-height: clamp(520px, 66vh, 720px); padding-block: clamp(2.5rem, 5vw, 4rem); }
.hero__copy { grid-column: 1; }
.refrain { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--muted); margin: 0; }
.refrain em { font-style: normal; color: var(--obsidian); font-weight: 600; }

/* ---------- sections ---------- */
.sec { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.sec--sand { background: var(--sand); }
.sec--ink { background: var(--obsidian); color: var(--cream); }
.sec__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.sub-head { font-family: var(--display); font-size: 1.35rem; text-align: center; margin: 3.5rem 0 1.5rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.two--flip .two__media { order: 2; }
.two__media { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.two__media img { width: min(100%, 330px); }


/* tap-to-swap Pip */
.pip-swap { background: none; border: 0; padding: 0; border-radius: var(--r-lg);
  transition: transform .3s var(--ease); }
.pip-swap:hover { transform: translateY(-6px); }
.pip-swap:active { transform: scale(.98); }
.pip-swap img { width: min(100%, 330px); filter: drop-shadow(0 24px 34px rgba(23,23,23,.14)); }
.pip-swap img.is-swapping { animation: pop .42s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(.94) rotate(-2deg); } 100% { transform: scale(1); } }
.hint { font-size: .85rem; color: var(--muted); margin: 0; }
.sec--sand .hint { color: #6B6155; }

/* ---------- video facade ---------- */
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--obsidian) radial-gradient(ellipse at 50% 120%, rgba(255,101,0,.35), transparent 60%);
  box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { background: none; border: 0; display: grid; justify-items: center; gap: .9rem; color: var(--cream); }
.video__icon { width: 68px; height: 68px; border-radius: 50%; background: var(--orange);
  display: grid; place-items: center; box-shadow: 0 16px 40px -10px rgba(0,0,0,.5);
  transition: transform .3s var(--ease); }
.video__icon::after { content: ""; border-left: 26px solid var(--obsidian);
  border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 7px; }
.video__play:hover .video__icon { transform: scale(1.07); }
.video__label { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.video__note { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center;
  color: rgba(255,248,238,.66); font-size: .8rem; margin: 0; }

/* real poster frame, served locally so nothing reaches YouTube until play */
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: .5; }
.video__play { position: relative; z-index: 2; }
.video__label { text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.video__note { z-index: 2; }

/* more episodes */
.eps { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.ep a { display: block; text-decoration: none; background: var(--cream);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ep a:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.ep img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ep__title { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  padding: 1rem 1.2rem .2rem; }
.ep__meta { display: block; font-size: .84rem; color: var(--muted); padding: 0 1.2rem 1.2rem; }

/* ---------- cards ---------- */
.cards { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--cream); border-radius: var(--r-card); padding: 2rem 1.7rem;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sec--sand .card { background: var(--cream); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card h3 { margin: 1rem 0 .45rem; font-size: 1.22rem; }
.card p { color: var(--muted); font-size: .96rem; margin: 0; }

.card__icon { display: block; width: 58px; height: 58px; border-radius: 18px; position: relative;
  transition: transform .35s var(--ease); }
.card:hover .card__icon { transform: rotate(-6deg) scale(1.06); }
.card__icon--pattern  { background: var(--sky); }
.card__icon--question { background: var(--sunflower); }
.card__icon--direction{ background: var(--orange); }
.card__icon--create   { background: var(--sunflower); }
.card__icon--mistake  { background: var(--sky); }
.card__icon--choose   { background: var(--orange); }
.card__icon::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; border-radius: 6px; background: var(--obsidian); }
.card__icon--pattern::after  { border-radius: 50%; box-shadow: 16px 0 0 -3px var(--obsidian), -16px 0 0 -3px var(--obsidian); width: 14px; height: 14px; }
.card__icon--question::after { width: 0; height: 0; border-radius: 0;
  background: none; border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-bottom: 19px solid var(--obsidian); }
.card__icon--direction::after{ width: 26px; height: 6px; border-radius: 3px; }
.card__icon--create::after   { border-radius: 50%; }
.card__icon--mistake::after  { width: 24px; height: 6px; border-radius: 3px; transform: rotate(-22deg); }
.card__icon--choose::after   { width: 20px; height: 20px; border-radius: 4px; transform: rotate(45deg); }

/* in-development titles: a scene, not a jacket — the cover art is not final */
.card--dev { padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.card--dev__scene { display: block; background: var(--sand); overflow: hidden; }
.card--dev__scene img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .7s var(--ease); }
.card--dev:hover .card--dev__scene img { transform: scale(1.035); }
.card--dev__body { padding: clamp(1.3rem, 2.4vw, 1.8rem); }
.card--dev__body h3 { margin: 0 0 .45rem; }
.card--dev__body p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- books ---------- */
.book { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.book__cover { position: relative; }
.book__cover img { border-radius: 20px; box-shadow: var(--shadow-lg); }

.flag { position: absolute; top: 14px; left: 14px; background: var(--orange); color: var(--obsidian);
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  padding: .4rem .9rem; border-radius: var(--r-pill); }
.flag--quiet { position: static; display: inline-block; background: var(--sand); margin-bottom: .4rem; }
.book__copy .sub { font-size: .6em; color: var(--muted); font-weight: 500; }

/* ---------- forms ---------- */
.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.field input {
  width: 100%; font-family: var(--text); font-size: 1rem; color: var(--obsidian);
  background: var(--cream); border: 2px solid var(--line); border-radius: 16px;
  padding: .85rem 1.05rem; transition: border-color .2s, box-shadow .2s;
}
.sec--sand .field input { background: #fff; }
.field input:focus { outline: none; border-color: var(--obsidian); box-shadow: 0 0 0 4px rgba(255,101,0,.22); }
.consent-note { font-size: .84rem; color: var(--muted); margin: .8rem 0 0; line-height: 1.55; }
.consent-note a { color: var(--obsidian); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

.form-ok { margin-top: .9rem; padding: .85rem 1.1rem; border-radius: 16px;
  background: rgba(255,101,0,.12); border: 2px solid rgba(255,101,0,.4); font-size: .93rem; }

.meta { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .4rem;
  font-size: .92rem; color: var(--muted); }
.sheet { border-radius: 18px; box-shadow: var(--shadow); width: min(100%, 320px); }

/* ---------- grown-ups ---------- */
.facts { margin: 1.6rem 0 0; display: grid; gap: 1.2rem; }
.facts dt { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin-bottom: .25rem; }
.facts dd { margin: 0; color: var(--muted-ink); font-size: .97rem; }

/* ---------- signup ---------- */
.signup__box { background: var(--sand); border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.6rem); text-align: center; max-width: 54rem; margin-inline: auto; }
.signup__box .sec__lede, .signup__box p { margin-inline: auto; max-width: 44ch; }
.signup__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem;
  align-items: end; margin-top: 1.6rem; text-align: left; }
.signup__form .field { margin: 0; }
.signup__form .btn { height: 52px; }
.signup__box .consent-note { max-width: 46ch; margin-inline: auto; text-align: center; }

/* ---------- footer ---------- */
.footer { background: var(--obsidian); color: var(--cream); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
.footer__inner { display: grid; gap: 1.8rem; }
.footer__brand { display: grid; justify-items: start; gap: .3rem; }
.footer__brand img { width: 40px; }
.footer__brand .display { font-size: 1.4rem; }
.footer__refrain { color: var(--muted-ink); font-size: .95rem; margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__links a { text-decoration: none; color: var(--muted-ink); font-size: .92rem; font-weight: 600; }
.footer__links a:hover { color: var(--cream); }
.footer__social { display: flex; gap: .7rem; }
.footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-ink); color: var(--cream); transition: background .2s, transform .2s; }
.footer__social a:hover { background: rgba(255,248,238,.1); transform: translateY(-2px); }
.footer__legal { border-top: 1px solid var(--line-ink); padding-top: 1.5rem; margin: 0;
  font-size: .86rem; color: var(--muted-ink); }
.footer__legal a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.footer__disclaimer { font-size: .82rem; color: var(--muted-ink); max-width: 62ch; margin: 0; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav .btn--sm { display: none; }
  .burger { display: block; margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy .lede, .hero__copy .actions { margin-inline: auto; }
  .hero__copy .actions { justify-content: center; }
  .hero__pip { order: -1; }
  .pip-stage { width: min(72%, 300px); }
  .two, .book { grid-template-columns: 1fr; }
  .two--flip .two__media { order: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .signup__form { grid-template-columns: 1fr; }
  .shape { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards, .cards--2 { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .footer__brand { justify-items: center; text-align: center; }
  .footer__inner { justify-items: center; text-align: center; }
  .footer__links { justify-content: center; }
  .footer__disclaimer { text-align: center; }
}

/* ==========================================================================
   REDUCED MOTION — required, not optional. The audience is adults holding
   infants, and the brand rule is "avoid constant motion".
   Everything ambient stops. Everything revealed is simply present.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-float], .shape { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card:hover, .pip-swap:hover, .footer__social a:hover { transform: none !important; }
  .card:hover .card__icon, .video__play:hover .video__icon { transform: none !important; }
}

/* ---------- the book stack ----------
   Board books lying on each other, offset far enough that the covers behind
   stay readable. Each layer is real artwork: until books two and three are
   imported the stack is three copies of Hello, Pip! rather than a fake jacket. */
.book-fan { position: relative; width: 100%; max-width: 430px; margin-inline: auto;
  aspect-ratio: 1 / 1.12; --fan: 1; }
.book-fan__slab, .book-fan__cover { position: absolute; left: 0; top: 0; width: 80%;
  aspect-ratio: 1 / 1;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.book-fan__slab img, .book-fan__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 16px; box-shadow: none; }

/* the layers behind are knocked back with light, not with a grey veil, so their
   artwork still reads */
.book-fan__slab { filter: brightness(.9) contrast(.96); }
.book-fan__slab--3 { filter: brightness(.82) contrast(.94); }
.book-fan__slab--2 { transform: translate3d(calc(13% * var(--fan)), calc(9% * var(--fan)), 0) rotate(calc(2.4deg * var(--fan)));
  box-shadow: 0 1px 2px rgba(23,23,23,.1), 0 16px 26px -18px rgba(23,23,23,.4); }
.book-fan__slab--3 { transform: translate3d(calc(25% * var(--fan)), calc(18% * var(--fan)), 0) rotate(calc(4.8deg * var(--fan)));
  box-shadow: 0 1px 2px rgba(23,23,23,.1), 0 14px 22px -18px rgba(23,23,23,.36); }
.book-fan__cover { z-index: 2; transform: rotate(calc(-1.6deg * var(--fan)));
  box-shadow: 0 2px 4px rgba(23,23,23,.14), 0 30px 48px -26px rgba(23,23,23,.5); }

.book-fan .flag { z-index: 4; top: auto; bottom: 26%; left: 5%; }
.book-fan:hover { --fan: 1.14; }

/* the stack squares up as the section arrives, then settles into the offset */
.book-fan.reveal { --fan: .12; }
.book-fan.reveal.is-in { --fan: 1; }
.book-fan.reveal .book-fan__slab--2 { transition-delay: .12s; }
.book-fan.reveal .book-fan__slab--3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .book-fan__slab, .book-fan__cover { transition: none; }
  .book-fan:hover { --fan: 1; }
}

/* ---------- the episode reel ----------
   One player, one frame. The side rail swaps the feature and plays it in place,
   so a visitor never meets three giant play buttons at once and never leaves
   the page. No YouTube request is made until something is clicked. */
.reel { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }

.video--feature { box-shadow: 0 2px 6px rgba(23,23,23,.08), 0 36px 60px -30px rgba(23,23,23,.45); }
.video--feature .video__poster { transition: transform .8s var(--ease), filter .5s var(--ease); }
.video--feature:hover .video__poster { transform: scale(1.02); }
.video--feature::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(23,23,23,.4), rgba(23,23,23,.05) 46%, transparent);
  transition: opacity .5s var(--ease); }
.video--feature:hover::after { opacity: .72; }

.reel__caption { padding: 1.2rem .2rem 0; }
.reel__flag { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .45rem; }
.reel__caption h3 { margin: 0 0 .4rem; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.18; }
.reel__caption p { margin: 0; color: var(--muted); max-width: 52ch; font-size: .96rem; }

.reel__side { display: grid; gap: .7rem; align-content: start; }
.reel__side-head { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .1rem; }
.reel__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.reel__list li { margin: 0; padding: 0; }
.reel__list li::before { content: none; }

.reel__item { display: grid; grid-template-columns: 116px 1fr; gap: .9rem; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 14px; padding: .5rem;
  transition: background .3s var(--ease), transform .3s var(--ease); }
.reel__item:hover, .reel__item:focus-visible { background: rgba(23,23,23,.045); transform: translateX(2px); }
.reel__item.is-current { background: rgba(23,23,23,.055); position: relative; }
.reel__item.is-current::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 3px; background: var(--orange); }

.reel__thumb { position: relative; display: block; border-radius: 9px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--sand); }
.reel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__mini { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(23,23,23,.26); opacity: 0; transition: opacity .3s var(--ease); }
.reel__mini::after { content: ""; border-left: 11px solid var(--cream);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.reel__item:hover .reel__mini, .reel__item:focus-visible .reel__mini { opacity: 1; }

.reel__meta { display: grid; gap: .18rem; min-width: 0; }
.reel__num { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); }
.reel__title { font-family: var(--display); font-weight: 600; font-size: .97rem; line-height: 1.24;
  color: var(--obsidian); }

.reel__side .btn { margin-top: .3rem; font-size: .9rem; padding: .78rem 1rem; }

@media (max-width: 900px) {
  .reel { grid-template-columns: 1fr; }
  .reel__item { grid-template-columns: 132px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .video--feature:hover .video__poster { transform: none; }
  .reel__item:hover, .reel__item:focus-visible { transform: none; }
}

/* ---------- Meet Pip: a scroll stage ----------
   Pip holds in a sticky frame while the four traits travel past him. Whichever
   trait crosses the middle of the screen sets his pose, so the section reads as
   one continuous move rather than four separate hover states. */
.meet { --meet: 0; }                      /* 0 to 1 scroll progress, set in JS */
.meet__grid { display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }

.meet__stage { position: sticky; top: clamp(84px, 10vh, 124px); }

/* the panel fills the column: a warm lit stage with the cover spark marks on it */
.meet__frame {
  position: relative; width: 100%; height: min(66vh, 540px);
  border-radius: var(--r-card); overflow: hidden;
  /* the stage runs off the left edge of the page rather than floating in it */
  --bleed: max(0px, calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  margin-left: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed));
  border-radius: 0 var(--r-card) var(--r-card) 0;
  display: grid; align-items: end; justify-items: center;
  background: radial-gradient(118% 88% at 50% 16%, #FFF7EB 0%, #FAE6CD 48%, #F0D2AE 100%);
  box-shadow: inset 0 -40px 60px -40px rgba(120,78,36,.35);
}
/* the light Pip stands in */
.meet__frame::before { content: ""; position: absolute; left: 50%; top: 4%;
  width: 78%; aspect-ratio: 1 / 1.35; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.85), rgba(255,255,255,0) 66%); }
/* and the shadow that sets him on the floor */
.meet__frame::after { content: ""; position: absolute; left: 50%; bottom: 7%;
  width: 46%; height: 30px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(96,62,28,.3), rgba(96,62,28,0) 70%);
  filter: blur(6px); }

.meet__sparks { position: absolute; inset: 0; pointer-events: none; }
.spark { position: absolute; left: var(--x); top: var(--y);
  width: var(--w); height: var(--h); border-radius: 999px;
  transform: rotate(var(--r)) translate3d(0, calc(var(--d) * var(--meet) * 1px), 0);
  opacity: calc(.28 + .62 * var(--meet));
  transition: opacity .4s linear; }
.spark--orange { background: #F2762E; }
.spark--yellow { background: #F6B93B; }

.pip-face-stack { position: relative; width: min(72%, 330px); aspect-ratio: 1 / 1.34; z-index: 1;
  margin-bottom: 4%;
  transform: translate3d(0, calc(-16px * var(--meet)), 0); }
.pip-face {
  position: absolute; inset: 0; margin: auto; max-height: 100%; width: auto;
  object-fit: contain; opacity: 0; transform: translateY(14px) scale(.965);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  filter: drop-shadow(0 26px 30px rgba(96,62,28,.28));
}
.pip-face.is-on { opacity: 1; transform: none; }

.meet__intro { margin-bottom: clamp(1.1rem, 2.6vw, 1.8rem); }
.meet__intro .lede { max-width: 46ch; }

/* the trait list is the scroll track: each step gets real travel */
.traits { list-style: none; padding: 0; margin: 0; position: relative;
  padding-left: clamp(1.4rem, 2.4vw, 2rem); }
.traits::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem;
  width: 2px; border-radius: 2px; background: rgba(23,23,23,.1); }
.traits::after { content: ""; position: absolute; left: 0; top: .6rem; width: 2px; border-radius: 2px;
  height: calc((100% - 1.2rem) * var(--meet)); background: var(--orange);
  transition: height .25s linear; }
.trait-step { margin: 0; padding: 0; min-height: clamp(76px, 14vh, 126px);
  display: flex; align-items: center; }
.trait-step::before { content: none; }
.trait {
  display: flex; align-items: flex-start; gap: .85rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 16px; padding: .72rem .95rem;
  color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.12rem);
  opacity: .42; transform: translateX(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              background .5s var(--ease), box-shadow .5s var(--ease);
}
.trait strong { color: var(--obsidian); font-weight: 700; }
.trait:hover, .trait:focus-visible { opacity: .8; }
.trait.is-active { opacity: 1; transform: none; background: #fff;
  box-shadow: 0 1px 2px rgba(23,23,23,.05), 0 18px 34px -20px rgba(23,23,23,.3); }
.trait__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line);
  flex: 0 0 auto; margin-top: .5em; position: relative;
  transition: background .4s var(--ease), transform .4s var(--ease); }
.trait.is-active .trait__dot { background: var(--orange); transform: scale(1.3); }
.trait.is-active .trait__dot::after { content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--orange); opacity: .28; }

@media (max-width: 860px) {
  .meet__grid { grid-template-columns: 1fr; }
  .meet__stage { position: sticky; top: 68px; z-index: 1; }
  .meet__frame { height: min(48vh, 380px); --bleed: var(--gutter);
    border-radius: 0 var(--r-card) var(--r-card) 0; }
  .pip-face-stack { width: min(52%, 220px); }
  .trait-step { min-height: clamp(70px, 13vh, 110px); }
}

/* ---------- activities ----------
   The sheets are the product, so they are shown whole on real paper rather than
   cropped to fill a column. Quieter card, one obvious action, generous air. */
.act-grid { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }

.act-card {
  background: var(--cream); border-radius: var(--r-card); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  box-shadow: 0 1px 2px rgba(23,23,23,.05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.act-card:hover { transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(23,23,23,.06), 0 26px 46px -22px rgba(23,23,23,.26); }

/* the printable, shown whole, sitting on the page like a sheet on a desk */
.act-card__thumb {
  background: var(--sand); display: grid; place-items: center;
  padding: clamp(1rem, 2vw, 1.6rem);
}
.act-card__thumb img {
  width: 100%; height: auto; display: block;
  background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(23,23,23,.12), 0 12px 24px -12px rgba(23,23,23,.3);
  transition: transform .4s var(--ease);
}
.act-card:hover .act-card__thumb img { transform: translateY(-3px) scale(1.012); }

.act-card__body { padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.4vw, 1.9rem); align-self: center; }
.act-card__ep { font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.act-card__body h3 { margin: 0 0 .5rem; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.15; }
.act-card__body p { font-size: .95rem; color: var(--muted); margin-bottom: 1.2rem; max-width: 34ch; }

/* one quiet action per card; six orange pills in a grid was the loud bit */
.act-card .btn {
  background: transparent; color: var(--obsidian);
  border: 2px solid rgba(23,23,23,.18); box-shadow: none;
  padding: .7rem 1.3rem; font-size: .92rem;
}
.act-card .btn::after { content: ""; width: 14px; height: 14px; margin-left: .1rem;
  background: currentColor; flex: 0 0 auto;
  -webkit-mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 19h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 19h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .3s var(--ease); }
.act-card .btn:hover { background: var(--obsidian); color: var(--cream); border-color: var(--obsidian); transform: none; }
.act-card .btn:hover::after { transform: translateY(2px); }
.act-card__meta { font-size: .78rem; color: var(--muted); margin: .8rem 0 0; letter-spacing: .01em; }

/* ---------- home teaser: the printables as actual paper ----------
   The sheet is the product, so it is shown whole on a real page inside a card.
   Nothing is cropped: the grown-up prompt at the foot of each sheet is part of
   what makes them worth downloading. */
.act-grid--mini { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.act-card--mini { list-style: none; }
.act-card--mini::before { content: none; }
.act-card--mini a { display: grid; grid-template-rows: 1fr auto; height: 100%;
  text-decoration: none; text-align: left; background: var(--sand);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(23,23,23,.05);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.act-card--mini a:hover, .act-card--mini a:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(23,23,23,.06), 0 30px 50px -24px rgba(23,23,23,.32); }

.sheet-frame { display: grid; place-items: center; padding: clamp(1rem, 2.2vw, 1.7rem); }
.sheet-frame__paper {
  display: block; position: relative; background: #fff; border-radius: 4px;
  width: 100%; overflow: hidden;
  box-shadow: 0 1px 2px rgba(23,23,23,.12), 0 14px 26px -14px rgba(23,23,23,.32);
  transform: rotate(-1.1deg);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.act-card--mini a:hover .sheet-frame__paper,
.act-card--mini a:focus-visible .sheet-frame__paper {
  transform: rotate(0deg) translateY(-3px) scale(1.012);
  box-shadow: 0 1px 2px rgba(23,23,23,.14), 0 22px 38px -18px rgba(23,23,23,.4);
}
.sheet-frame__paper img { width: 100%; height: auto; display: block; }

.act-card__body { padding: 0 clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.5rem); }
.act-card__title { display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(.98rem, 1.4vw, 1.08rem); letter-spacing: -.01em; color: var(--obsidian); }
.act-card--mini .act-card__meta { display: block; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: .32rem 0 0; }

.note { background: var(--cream); border-radius: var(--r-card); padding: 1.8rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.note h3 { margin-top: 0; }
.note ul { margin: 0; padding-left: 1.2rem; }
.note li { margin-bottom: .5rem; color: var(--muted); }
.note strong { color: var(--obsidian); }

/* ---------- episodes ---------- */
.ep-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.ep-full { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; }
.ep-full__body h2 { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin: 0 0 .6rem; letter-spacing: -.01em; }
.ep-full__body p { color: var(--muted); }

/* ---------- the words matter ---------- */
.swap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; max-width: 52rem; margin-inline: auto; }
.swap-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center;
  background: var(--cream); border-radius: var(--r-card); padding: 1.2rem 1.4rem; }
.swap-no { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; }
.swap-yes { font-weight: 600; }

@media (max-width: 960px) {
  .act-grid, .act-grid--mini { grid-template-columns: 1fr; }
  .ep-full { grid-template-columns: 1fr; }
  .act-grid--mini { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .act-card { grid-template-columns: 1fr; }
  .act-card__thumb { border-right: 0; border-bottom: 1px solid var(--line); max-height: 260px; }
  .act-grid--mini { grid-template-columns: 1fr; }
  .swap-list li { grid-template-columns: 1fr; gap: .4rem; }
  
}

@media (prefers-reduced-motion: reduce) {
  .pip-face { transition: opacity .001ms !important; }
  .meet { --meet: 0 !important; }
  .trait-step { min-height: 0; }
  .trait { opacity: 1; transform: none; }
  .trait, .trait__dot { transition: none !important; }
  .trait:hover, .trait:focus-visible { transform: none !important; }
  .act-card:hover { transform: none !important; }
}

/* ---------- hero video ----------
   A looping background runs longer than five seconds, so WCAG 2.2.2 wants a way
   to stop it. The control is always there, and reduced motion never starts it. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 38%; opacity: 0;
  transition: opacity .8s var(--ease); z-index: 1; }
.hero__video.is-playing { opacity: 1; }
.hero__still { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 38%; z-index: 0; }
.hero__motion {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(23,23,23,.62); color: var(--cream); border: 0;
  border-radius: var(--r-pill); padding: .45rem .9rem .45rem .75rem;
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  backdrop-filter: blur(6px); opacity: .75; transition: opacity .2s, background .2s;
}
.hero__motion:hover, .hero__motion:focus-visible { opacity: 1; background: rgba(23,23,23,.8); }
.hero__motion-icon { width: 12px; height: 12px; position: relative; }
.hero__motion-icon::before, .hero__motion-icon::after {
  content: ""; position: absolute; top: 0; width: 4px; height: 12px;
  background: currentColor; border-radius: 1px; }
.hero__motion-icon::before { left: 0; }
.hero__motion-icon::after { right: 0; }
.hero__motion[aria-pressed="true"] .hero__motion-icon::before {
  left: 1px; width: 0; height: 0; border-left: 10px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; background: none; border-radius: 0; }
.hero__motion[aria-pressed="true"] .hero__motion-icon::after { display: none; }
.hero--no-video .hero__motion { display: none; }

@media (max-width: 960px) {
  .hero__video, .hero__still { object-position: 74% 40%; }
  .hero__motion { right: .7rem; bottom: .7rem; font-size: .74rem; }
}
/* Reduced motion never AUTOPLAYS (pip.js sets wanted = !reduce), but a deliberate
   press on the Play control must still work, so no !important lock here. */
@media (prefers-reduced-motion: reduce) {
  .hero__video:not(.is-playing) { opacity: 0; }
}

/* ---------- inner-page header with art ---------- */
.page-head--art { position: relative; overflow: hidden; padding-block: 0; text-align: left; }
.page-head__bg { position: absolute; inset: 0; z-index: 0; }
.page-head__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.page-head__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--cream) 0%, rgba(255,248,238,.92) 38%, rgba(255,248,238,.5) 58%, rgba(255,248,238,.18) 78%); }
.page-head__inner { position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center; min-height: clamp(380px, 46vh, 520px);
  padding-block: clamp(2.2rem, 5vw, 3.5rem); }
.page-head__copy { max-width: 34rem; }
.page-head--art h1.display { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .7rem; }
.page-head--art .sec__lede { margin-inline: 0; max-width: 40ch; }
.page-head__cta { margin: 1.5rem 0 0; }
.page-head__pip { display: flex; justify-content: center; align-items: flex-end; }
.page-head__pip img { width: min(100%, 280px); height: auto;
  filter: drop-shadow(0 28px 38px rgba(23,23,23,.18)); }

@media (max-width: 860px) {
  .page-head--art { text-align: center; }
  .page-head__bg img { object-position: 70% center; }
  .page-head__bg::after { background: linear-gradient(to bottom, rgba(255,248,238,.82) 0%, rgba(255,248,238,.62) 55%, var(--cream) 100%); }
  .page-head__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 2rem 1rem; }
  .page-head__copy { max-width: none; margin-inline: auto; }
  .page-head--art .sec__lede { margin-inline: auto; }
  .page-head__pip { order: -1; }
  .page-head__pip img { width: min(52%, 200px); }
}

/* ==========================================================================
   INTERACTION LAYER — added 2026-09-23
   Principle unchanged: motion is a RESPONSE. Everything here is triggered by
   scrolling, pointing, tapping or pressing. Nothing loops on its own, and the
   reduced-motion block at the end of this file switches all of it off.
   ========================================================================== */

/* ---------- scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0%; background: var(--orange);
  border-radius: 0 3px 3px 0; transition: width .12s linear; }

/* ---------- buttons: shine sweep + press ripple ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); opacity: 0; z-index: -1;
}
.btn--primary:hover::before { animation: shine .75s var(--ease) forwards; }
@keyframes shine { 0% { left: -70%; opacity: 1; } 100% { left: 125%; opacity: 0; } }
.btn .ripple {
  position: absolute; border-radius: 50%; transform: scale(0); z-index: -1;
  background: rgba(23,23,23,.22); animation: ripple .6s var(--ease) forwards; pointer-events: none;
}
.btn--ghost .ripple, .btn--sm .ripple { background: rgba(255,248,238,.3); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- hero Pip follows the pointer, very slightly ---------- */
.pip-stage {
  --tiltX: 0deg; --tiltY: 0deg; --lift: 0px;
  transition: transform .5s var(--ease);
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateY(var(--lift));
}
.pip-stage.is-tracking { transition: transform .18s ease-out; }
[data-float] { animation: none; }               /* the float is now JS-driven with the tilt */
.pip-stage.is-idle { animation: float 7s var(--ease) infinite; }

/* ---------- curriculum cards: try it at home ---------- */
.card { display: flex; flex-direction: column; }
.card__more { overflow: hidden; }
.card__more[hidden] { display: none; }
.card__more { margin-top: 1rem; margin-bottom: 1rem; }
.card .card__more-label, .card .card__more-body { background: #FFE4CC;
  border-left: 4px solid var(--orange); }
.card .card__more-label { font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #8A4415; margin: 0;
  padding: .85rem 1.05rem .25rem; border-radius: 14px 14px 0 0; }
.card .card__more-body { font-size: .95rem; color: var(--obsidian); margin: 0;
  padding: .25rem 1.05rem .95rem; border-radius: 0 0 14px 14px; line-height: 1.55; }
.card__toggle {
  margin-top: auto; background: #FFEFE0; border: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  padding: .55rem 1rem .55rem .85rem;
  font-family: var(--display); font-weight: 600; font-size: .9rem; color: #8A4415;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.card__toggle:hover, .card__toggle:focus-visible { background: var(--orange); color: var(--obsidian); }
.card__toggle:hover .card__toggle-icon, .card__toggle:focus-visible .card__toggle-icon { background: var(--obsidian); }
.card__toggle:hover .card__toggle-icon::before, .card__toggle:hover .card__toggle-icon::after { background: var(--orange); }
.card__toggle-text { text-decoration: none; }
.card__toggle-icon { width: 18px; height: 18px; border-radius: 50%; background: var(--orange);
  position: relative; flex: 0 0 auto; transition: transform .35s var(--ease); }
.card__toggle-icon::before, .card__toggle-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--obsidian); border-radius: 2px; }
.card__toggle-icon::before { width: 10px; height: 2px; }
.card__toggle-icon::after  { width: 2px; height: 10px; transition: transform .35s var(--ease); }
.card__toggle[aria-expanded="true"] .card__toggle-icon { transform: rotate(180deg); }
.card__toggle[aria-expanded="true"] .card__toggle-icon::after { transform: scaleY(0); }
.card__more.is-opening { animation: slideDown .38s var(--ease); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- waitlist modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 4.5rem 1.2rem 1.2rem; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(23,23,23,.55);
  backdrop-filter: blur(3px); animation: fadeIn .3s var(--ease); }
.modal__panel {
  position: relative; z-index: 2; width: min(100%, 27rem);
  background: var(--cream); border-radius: var(--r-lg); padding: 3.4rem 2rem 1.8rem;
  box-shadow: var(--shadow-lg); text-align: center;
  animation: popIn .45s var(--ease);
  overflow: visible;                 /* Pip leans out of the panel; clipping him was the bug */
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
.modal__pip { margin: -5.2rem auto .4rem; width: 138px; }
.modal__pip img { width: 100%; filter: drop-shadow(0 16px 22px rgba(23,23,23,.2)); }
.modal__panel h2.display { font-size: clamp(1.6rem, 5vw, 2.1rem); margin-bottom: .6rem; }
.modal__panel p { font-size: .97rem; color: var(--muted); }
.modal__form { margin-top: 1.2rem; text-align: left; }
.modal__close { position: absolute; top: .7rem; right: 1rem; background: none; border: 0;
  font-size: 1.9rem; line-height: 1; color: var(--muted); }
.modal__close:hover { color: var(--obsidian); }
.modal__later { display: block; margin: .9rem auto 0; background: none; border: 0;
  font-size: .86rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.modal__later:hover { color: var(--obsidian); }
.modal__panel .consent-note { text-align: center; }

/* ---------- staggered reveals ---------- */
.cards .reveal:nth-child(1), .eps .reveal:nth-child(1) { transition-delay: 0ms; }
.cards .reveal:nth-child(2), .eps .reveal:nth-child(2) { transition-delay: 70ms; }
.cards .reveal:nth-child(3) { transition-delay: 140ms; }
.cards .reveal:nth-child(4) { transition-delay: 210ms; }
.cards .reveal:nth-child(5) { transition-delay: 280ms; }
.cards .reveal:nth-child(6) { transition-delay: 350ms; }

/* ---------- the tapped-Pip pop, a touch bouncier ---------- */
.pip-swap img.is-swapping { animation: popSwap .5s var(--ease); }
@keyframes popSwap {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(.92) rotate(-3deg); }
  70% { transform: scale(1.04) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (max-width: 620px) {
  .modal { padding-top: 3.8rem; }
  .modal__panel { padding: 2.8rem 1.3rem 1.5rem; }
  .modal__pip { width: 112px; margin-top: -4.4rem; }
}

/* ---------- reduced motion, extended for everything above ---------- */
@media (prefers-reduced-motion: reduce) {
  .progress span { transition: none !important; }
  .btn--primary:hover::before { animation: none !important; }
  .btn .ripple { display: none !important; }
  .pip-stage, .pip-stage.is-tracking { transform: none !important; transition: none !important; }
  .pip-stage.is-idle { animation: none !important; }
  .modal__backdrop, .modal__panel { animation: none !important; }
  .card__more.is-opening { animation: none !important; }
  .card__toggle-icon, .card__toggle-icon::after { transition: none !important; }
  .pip-swap img.is-swapping { animation: none !important; }
  .cards .reveal, .eps .reveal { transition-delay: 0ms !important; }
}