/* ============================================================
   ReadytoFly — Sunroom site stylesheet (website wave, t13–t19)
   Consumes /tokens.css variables exclusively. One file, every
   page; per-page overrides live inline only where unique.
   Rules enforced here: never red · one marigold action per
   viewport · dusk focus rings · type never sits on artwork ·
   touch targets >=44px · reduce-motion drops every loop/lift.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: var(--text-web-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--dusk);
  border-radius: 6px;
}
.btn:focus-visible, .pill:focus-visible { border-radius: var(--radius-pill); }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons (13b cursor-land states) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none;
  font: 600 14px/1 var(--font-body);
  min-height: var(--touch-min);
  transition: transform var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease), background var(--dur-web) var(--motion-ease);
}
.btn-marigold {
  background: var(--marigold); color: var(--ink);
  border-radius: var(--radius-pill); padding: 12px 20px;
  box-shadow: 0 6px 16px rgba(242, 169, 59, 0.3);
}
.btn-marigold:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.btn-marigold:active { transform: translateY(0); background: var(--marigold-press); }
.btn-ink {
  background: var(--ink); color: var(--cream);
  border-radius: 14px; padding: 14px 22px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 10px 24px rgba(51, 52, 74, 0.25);
}
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(51, 52, 74, 0.3); }
.btn-ink:active { transform: translateY(0); }
.btn-note { font: 600 13px/1.4 var(--font-body); color: var(--muted); }
.btn-note-link { text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-web); }
.btn-note-link:hover { color: var(--coral-deep); }

/* ---------- 16a Boarding-pill nav ---------- */
.rtf-nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
}
.rtf-nav .nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 22px;
  background: rgba(255, 247, 235, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--sand);
  border-radius: var(--radius-pill);
  padding: 9px 10px 9px 20px;
  box-shadow: var(--shadow-nav);
  transition: padding var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease);
}
.rtf-nav.scrolled .nav-pill { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 18px 44px rgba(51, 52, 74, 0.2); }
/* Header logo anchored bare at the top-left; links + CTA stay centered.
   Scoped to .rtf-nav — the footer reuses .nav-logo in normal flow. */
.nav-logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.rtf-nav .nav-logo {
  position: absolute; left: clamp(16px, 2.2vw, 36px); top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: auto;
}
.logo-img { display: block; height: 24px; width: auto; }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a {
  position: relative; text-decoration: none;
  font: 600 14px/1 var(--font-body); color: var(--body);
  padding: 14px 2px; /* 44px hit area */
}
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ink); }
.nav-cta { font-size: 13.5px; padding: 11px 18px; }
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center; color: var(--ink);
}
@media (max-width: 860px) {
  .rtf-nav { top: 0; padding: 0; }
  .rtf-nav .nav-pill {
    width: 100%; border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
    padding: 8px 12px 8px 18px; gap: 10px; justify-content: flex-start;
  }
  /* logo over the left of the full-width bar; CTA + burger cluster right */
  .rtf-nav .nav-logo { left: 18px; }
  .rtf-nav .nav-pill { justify-content: flex-end; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta { font-size: 12.5px; padding: 10px 14px; }
}

/* 18b Breathing CTA — the page's one persistent marigold action */
@keyframes rtf-breath {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 16px rgba(242, 169, 59, 0.3); }
  50% { transform: translateY(-1.5px); box-shadow: 0 12px 28px rgba(242, 169, 59, 0.44); }
}
.breathing { animation: rtf-breath 4s ease-in-out infinite; }
.breathing:hover { animation: none; transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }

/* 18c Runway underline — nav link hover (taxi dot only where a cursor exists) */
@keyframes rtf-runway { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rtf-taxidot {
  0% { left: -6px; transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { left: calc(100% - 4px); transform: translateY(0); opacity: 1; }
  100% { left: calc(100% + 10px); transform: translateY(-8px); opacity: 0; }
}
.nav-links a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 8px;
  height: 2px; border-radius: 2px; background: var(--marigold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--motion-ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after,
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a::before {
    content: ""; position: absolute; bottom: 6.5px; left: -6px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--coral-deep); opacity: 0;
  }
  .nav-links a:hover::before { animation: rtf-taxidot 480ms 90ms var(--motion-ease); }
}

/* ---------- 16d Mobile bottom-sheet menu ---------- */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(43, 44, 64, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms;
}
.sheet-scrim.open { opacity: 1; visibility: visible; }
.rtf-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--cream); border-radius: 26px 26px 0 0;
  box-shadow: 0 -14px 40px rgba(43, 44, 64, 0.25);
  padding: 10px 22px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); visibility: hidden;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 320ms;
}
.rtf-sheet.open { transform: translateY(0); visibility: visible; }
.rtf-sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: var(--sand-strong); margin: 0 auto 6px; }
.rtf-sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rtf-sheet .sheet-label { font: 700 10px/1 var(--font-body); letter-spacing: 2px; color: var(--label); }
.rtf-sheet .sheet-close {
  width: 44px; height: 44px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--sand); color: var(--muted); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rtf-sheet nav { display: flex; flex-direction: column; }
.rtf-sheet nav a {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  border-bottom: 1px solid var(--sand-tint); text-decoration: none;
  font: 500 18px/1 var(--font-display); color: var(--body-soft);
}
.rtf-sheet nav a:last-of-type { border-bottom: 0; }
.rtf-sheet nav a .dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--sand-strong); flex: none;
}
.rtf-sheet nav a[aria-current="true"] { color: var(--ink); }
.rtf-sheet nav a[aria-current="true"] .dot { border: 0; background: var(--marigold); }
.rtf-sheet .sheet-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; width: 100%; background: var(--ink); border-radius: 14px;
  font: 700 13.5px/1 var(--font-body); color: var(--cream); text-decoration: none;
  margin-top: 12px; box-shadow: 0 10px 24px rgba(51, 52, 74, 0.25);
}
.rtf-sheet .sheet-note { font: 500 11px/1 var(--font-body); color: var(--label-faint); text-align: center; margin-top: 8px; }
body.sheet-locked { overflow: hidden; }

/* ---------- Sections ---------- */
.band { position: relative; padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--hairline); }
.band-white { background: var(--card); }
.section-head { text-align: center; margin-bottom: clamp(24px, 4vw, 44px); }
.section-label {
  display: inline-block; font: 700 11px/1 var(--font-body);
  letter-spacing: var(--tracking-label); color: var(--coral-deep);
  text-transform: uppercase;
}
.section-title { font: var(--text-section); letter-spacing: -0.5px; margin-top: 8px; }
.section-sub { font: 500 15px/1.6 var(--font-body); color: var(--muted); margin-top: 8px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: 92px; }

/* Desktop: the hero owns the first viewport (capped so very tall
   screens don't go cavernous); copy centers, phone keeps its bottom dip. */
@media (min-width: 961px) {
  .hero-inner { min-height: calc(min(92svh, 1000px) - 92px); }
  .hero-phone { align-self: stretch; }
}

/* Wide desktops: let the column breathe and give the mock more presence. */
@media (min-width: 1400px) {
  .container { max-width: 1280px; }
  .hero-inner { gap: 56px; }
  .phone { transform: scale(1.12); transform-origin: bottom center; }
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: 0.5; display: block; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,247,235,0) 80%, rgba(255,247,235,0.85) 96%, #FFF7EB 100%),
    linear-gradient(90deg, rgba(255,247,235,0.96) 34%, rgba(255,247,235,0.45) 62%, rgba(255,247,235,0));
}
.hero-inner { position: relative; display: flex; gap: 40px; align-items: center; padding: clamp(24px, 4vw, 56px) 0 0; }
.hero-copy { max-width: 560px; flex: none; padding-bottom: clamp(32px, 5vw, 64px); }
.proof-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-pill);
  padding: 8px 14px; font: 700 11px/1.3 var(--font-body); letter-spacing: 1px;
  color: var(--coral-deep); margin-bottom: 18px;
}
.hero h1 { font: var(--text-hero); letter-spacing: -1px; color: var(--ink); }
.hero .hero-sub { font: var(--text-hero-sub); color: var(--coral-deep); margin-top: 10px; letter-spacing: -0.3px; }
.hero .hero-body { font: 500 16px/1.65 var(--font-body); color: var(--body); margin-top: 16px; max-width: 460px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* 20a Sky cruise — still plate + CSS sprite, no loop point (replaces 19a).
   The plane crosses in the first 60% of the cycle, exits right, parks
   invisible off-frame. The sky never moves, so there is nothing to snap
   back. One pass per 35s. The dotted contrail was removed 2026-08-18
   (Martin): it read as a stray rule under the nav rather than as sky. */
.sky-cruise { position: absolute; left: 0; right: 0; top: 96px; height: 24px; pointer-events: none; }
@keyframes rtf-cruise-plane {
  0% { left: -60px; opacity: 1; }
  60% { left: calc(100% + 20px); opacity: 1; }
  60.5%, 100% { left: calc(100% + 20px); opacity: 0; }
}
/* The V2 journey-map plane. The old sprite was a flat 112x48 jet; this is the
   chunky 3/4 prop from assets/journey/mk-airplane.png, trimmed to its content
   box, so it is 112x72 and needs vertical centring on the 2.5px trail that
   sits at top:8px inside the 24px .sky-cruise band. */
/* The V2 plane, from design-handoff/v2-design/assets/motion/airplane-bob-d.mp4.
   Frames pulled with AVFoundation, keyed off the video's cream matte to real
   alpha, and snapped to the art's three flat colours, which is what lets a
   60-frame lossless loop cost 43 KB instead of 136. The still is the reduced
   motion fallback, chosen by the media attribute on <source>.
   112x101 where the old jet sprite was 112x48. With the contrail gone the
   plane no longer centres on a 2.5px rule, so it sits lower in the band,
   clear of the nav pill instead of grazing it. */
.cruise-plane { position: absolute; top: 16px; left: -60px; width: 56px; animation: rtf-cruise-plane 35s linear infinite; }
.cruise-plane img { width: 56px; height: auto; display: block; }

/* Hero phone mock (the app lives in the hero) */
.hero-phone { flex: 1; display: flex; justify-content: center; min-width: 0; }
.phone {
  position: relative; width: 300px; height: 520px; flex: none;
  align-self: flex-end; margin-bottom: -56px;
  background: var(--ink); border-radius: 44px; padding: 9px;
  box-shadow: 0 30px 60px rgba(51, 52, 74, 0.28);
}
.phone-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 36px;
  background: var(--cream); padding: 32px 16px 0;
}
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 24px; background: var(--ink); border-radius: 0 0 16px 16px; z-index: 2;
}
.ph-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ph-date { font: 600 9px/1 var(--font-body); letter-spacing: 2px; color: var(--label); }
.ph-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--marigold); display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font-display); color: var(--ink); }
/* The captain stands free at the top right, like the app's Today screen:
   overlapping margins, no disc behind her. height:auto is load-bearing. */
.ph-captain { width: 54px; height: auto; margin: -10px -2px -20px 0; position: relative; z-index: 1; }
.ph-greeting { font: 500 22px/1.1 var(--font-display); letter-spacing: -0.3px; margin-bottom: 8px; }
/* Journey strip, mirroring the app's JourneyStrip: passed marigold, current
   ringed, ahead quiet, and the next checkpoint NAMED, never counted. */
.ph-journey { background: var(--card); border: 1px solid var(--sand); border-radius: 14px; padding: 7px 11px 8px; margin-bottom: 8px; }
.ph-j-head { display: flex; justify-content: space-between; font: 700 7.5px/1 var(--font-body); letter-spacing: 1.4px; color: var(--label); }
.ph-j-map { color: var(--dusk, var(--muted)); letter-spacing: 0.2px; font-weight: 600; }
.ph-j-dots { display: flex; align-items: center; gap: 4px; margin: 7px 0 6px; }
.ph-j-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--sand-strong); background: var(--card); }
.ph-j-dots i.p { background: var(--cream); border-color: var(--marigold); }
.ph-j-dots i.cur { width: 17px; height: 17px; border: 2px solid var(--marigold); }
.ph-j-next { font: 500 9.5px/1 var(--font-body); color: var(--body); }
.ph-card { background: var(--card); border: 1px solid var(--sand); border-radius: 18px; padding: 9px 13px 9px; margin-bottom: 8px; }
.ph-count-row { display: flex; justify-content: space-between; align-items: baseline; }
.ph-count { font: 500 19px/1.05 var(--font-display); }
.ph-dest { font: 700 8px/1 var(--font-body); letter-spacing: 1px; color: var(--coral-deep); }
.ph-track { position: relative; height: 5px; border-radius: 5px; background: var(--track); margin: 9px 0 6px; }
.ph-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 5px; background: var(--marigold); }
.ph-dot {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--marigold); border: 2.5px solid var(--card); transform: translate(-50%, -50%);
}
.ph-meta { display: flex; justify-content: space-between; font: 600 8px/1 var(--font-body); letter-spacing: 1px; color: var(--label); }
/* 18d Taxi progress — fills once when the hero phone scrolls in */
@keyframes rtf-taxifill { from { width: 32%; } to { width: 50%; } }
@keyframes rtf-taxiride { from { left: 32%; } to { left: 50%; } }
@keyframes rtf-taxiping {
  0% { box-shadow: 0 0 0 0 rgba(242, 169, 59, 0.45); }
  100% { box-shadow: 0 0 0 9px rgba(242, 169, 59, 0); }
}
.taxi-go .ph-fill { animation: rtf-taxifill 1.6s var(--motion-ease) both; }
.taxi-go .ph-dot { animation: rtf-taxiride 1.6s var(--motion-ease) both, rtf-taxiping 700ms ease-out 1.6s 1; }
.ph-list-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.ph-list-head b { font: 500 13px/1 var(--font-display); font-weight: 500; }
.ph-list-head span { font: 600 10px/1 var(--font-body); color: var(--coral-deep); }
.ph-task { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--sand); border-radius: 15px; padding: 7px 10px; margin-bottom: 6px; }
.ph-task .ic { width: 32px; height: 32px; border-radius: 11px; background: var(--marigold); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-body); color: var(--ink); flex: none; }
.ph-task .t { flex: 1; min-width: 0; }
.ph-task .t b { display: block; font: 600 11px/1.2 var(--font-body); color: var(--ink); }
.ph-task .t span { display: block; font: 500 9px/1.2 var(--font-body); color: var(--muted); margin-top: 2px; }
.ph-task.active { background: var(--marigold); border-color: var(--marigold); box-shadow: var(--shadow-button); padding: 10px; }
.ph-task.active .ic { background: var(--cream); color: var(--marigold); width: 36px; height: 36px; border-radius: 12px; }
.ph-task.active .t b { font-size: 12px; }
.ph-task.active .t span { color: #5F4E2A; }
.ph-task.active .go { font: 700 10px/1 var(--font-body); color: var(--ink); }
.ph-task.locked { border: 1.5px dashed var(--sand-strong); opacity: 0.65; }
.ph-task.locked .ic { background: var(--dusk-tint); color: var(--dusk); }
.ph-badges { display: flex; justify-content: space-between; margin-top: 2px; }
.ph-badge { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; position: relative; }
.ph-badge img { width: 50px; height: 50px; max-width: none; margin: -11px; display: block; }
.ph-badge.locked { border: 1.5px dashed var(--sand-strong); background: #FFFDF8; }
.ph-badge.locked img { filter: grayscale(1); opacity: 0.32; margin: -12.5px; }

@media (max-width: 960px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-copy { max-width: 560px; padding-bottom: 0; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero .hero-body { margin-left: auto; margin-right: auto; }
  .hero-phone { display: none; }
  .hero-bg img { object-fit: cover; object-position: center bottom; opacity: 0.45; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(255,247,235,0.95) 30%, rgba(255,247,235,0.55) 82%, rgba(255,247,235,0.9)); }
  .hero { padding-top: 76px; }
  .hero-inner { padding-bottom: 34px; }
  .hero h1 { font-size: 33px; letter-spacing: -0.5px; }
  .hero .hero-sub { font-size: 18px; }
  /* tighter measure so the paragraph sets as three even lines, no orphan */
  .hero .hero-body { font-size: 13px; line-height: 1.55; max-width: 330px; text-wrap: pretty; }
  .sky-cruise { top: 72px; }
  /* Narrow screens have no room for the desktop drop: the corridor between
     the nav pill and the 5.0 proof pill measures 37px at 375px wide, and the
     plane stood 36px tall at 40px. Trimmed to 36px wide and nudged so it
     clears the nav by 1px and the pill by 3px. Measured, not eyeballed. */
  .cruise-plane, .cruise-plane img { width: 36px; }
  .cruise-plane { top: -6px; }
}

@media (max-width: 700px) {
  /* Phones: full-viewport hero — copy centered in the free space, phone
     mock peeking at the bottom edge (cropped by the hero's
     overflow:hidden). The two auto margins split any spare height between
     above-the-copy and above-the-phone, so tall screens don't open a void
     under the CTA. svh so the iOS URL bar doesn't leave a gap.
     Tablets (701-960) keep the compact hero. */
  .hero { min-height: 100svh; display: flex; flex-direction: column; }
  .hero-inner { flex: 1; display: flex; padding-bottom: 0; }
  .hero-copy { margin-top: auto; }
  /* The whole phone, not a peek (Martin, 2026-08-19): scale the 520px mock
     to ~66% so it fits the window on tall screens; short screens crop only
     the bottom bezel. transform keeps the inner layout untouched. */
  .hero-phone {
    display: flex; justify-content: center; align-items: flex-start;
    width: 100%; margin-top: auto; padding-top: 18px;
    height: clamp(300px, 48svh, 378px); overflow: hidden; flex: none;
  }
  .hero-phone .phone { align-self: flex-start; margin-bottom: 0; transform: scale(0.66); transform-origin: top center; }
}

/* ---------- 14c/17c How-it-works: spotlight stepper ---------- */
.hiw-band { position: relative; }
.hiw-grid { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: center; max-width: 940px; margin: 0 auto; }
.hiw-steps { display: flex; flex-direction: column; }
.hiw-step {
  display: flex; gap: 11px; padding: 11px 0; background: none; border: 0;
  text-align: left; cursor: pointer; align-items: flex-start;
  font-family: var(--font-body); opacity: 0.55;
  transition: opacity var(--dur-web) var(--motion-ease);
}
.hiw-step .bub {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-body);
  border: 1.5px solid var(--sand-strong); color: var(--label-faint); background: transparent;
  transition: all var(--dur-web) var(--motion-ease);
}
.hiw-step .lbl { font: 600 14px/1.3 var(--font-body); color: var(--muted); padding-top: 4px; transition: color var(--dur-web); }
.hiw-step.done .bub { border: 0; background: var(--marigold); color: var(--ink); }
.hiw-step.done .lbl { color: var(--ink); }
.hiw-step.current { opacity: 1; }
.hiw-step.current .bub { width: 28px; height: 28px; border: 2.5px solid var(--ink); color: var(--ink); background: var(--card); }
.hiw-step.current .lbl { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.hiw-connector { width: 2px; height: 14px; background: var(--sand-strong); margin-left: 12px; flex: none; }
.hiw-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center;
  background: var(--card); border: 1px solid var(--sand); border-radius: 22px; padding: 20px;
  box-shadow: 0 10px 24px rgba(51, 52, 74, 0.06);
}
.hiw-card img { width: 220px; height: 220px; object-fit: cover; border-radius: 18px; display: block; }
.stage-pill {
  display: inline-flex; background: var(--tint-gold); border-radius: var(--radius-pill);
  padding: 6px 11px; font: 700 10px/1.3 var(--font-body); letter-spacing: 1.5px; color: var(--gold-label);
}
.hiw-card h3 { font: var(--text-card-title); margin-top: 10px; }
.hiw-card p { font: 500 14px/1.7 var(--font-body); color: var(--body); margin-top: 8px; }
.hiw-stage { transition: opacity 400ms var(--motion-ease), transform 400ms var(--motion-ease); }
html.js .hiw-stage { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none; }
html.js .hiw-stage.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
html.js .hiw-stagewrap { position: relative; }
html:not(.js) .hiw-stage + .hiw-stage { margin-top: 14px; }
.hiw-dots { display: none; }
.hiw-hint { display: none; font: 500 10px/1 var(--font-body); color: var(--label-faint); text-align: center; margin-top: 12px; }

/* 19b Cloud drift — section band scenery, two puffs max */
.cloud-band { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
@keyframes rtf-cloudA { from { left: -120px; } to { left: 100%; } }
@keyframes rtf-cloudB { from { left: -90px; } to { left: 100%; } }
.cloud { position: absolute; }
.cloud i { position: absolute; background: var(--card); display: block; }
.cloud-a { top: 34px; left: -120px; width: 104px; height: 34px; animation: rtf-cloudA 58s linear infinite; }
.cloud-a i:nth-child(1) { left: 0; bottom: 0; width: 104px; height: 20px; border-radius: 999px; }
.cloud-a i:nth-child(2) { left: 16px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; }
.cloud-a i:nth-child(3) { left: 44px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; margin-bottom: -14px; }
.cloud-b { top: 108px; left: -90px; width: 66px; height: 22px; opacity: 0.6; animation: rtf-cloudB 84s linear infinite; animation-delay: -40s; }
.cloud-b i:nth-child(1) { left: 0; bottom: 0; width: 66px; height: 14px; border-radius: 999px; }
.cloud-b i:nth-child(2) { left: 12px; bottom: 5px; width: 24px; height: 24px; border-radius: 50%; }
.cloud-b i:nth-child(3) { left: 32px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; margin-bottom: -8px; }

/* Staggered per band: different heights, phases (negative delays start
   puffs mid-flight at different x), and scales, so scrolling the page
   never shows the same sky twice. hiw keeps the 19b defaults above. */
#method .cloud-a { top: 64%; animation-delay: -30s; transform: scale(0.92); }
#method .cloud-b { top: 14%; animation-delay: -12s; }
#stories .cloud-a { top: 10%; animation-delay: -45s; transform: scale(0.8); opacity: 0.85; }
#stories .cloud-b { top: 68%; animation-delay: -62s; opacity: 0.5; }
#faq .cloud-a { top: 55%; animation-delay: -14s; transform: scale(1.06); opacity: 0.9; }
#faq .cloud-b { top: 6%; animation-delay: -74s; }

/* --- Clouds on every plain band, 2026-08-14 -----------------------------
   Two things had to change to get them off the tinted bands only.

   1. Colour. .cloud i was hard-coded to --card (white), which is invisible on
      a white band. It is now tone-aware, so a cloud reads on either, and it
      survives a section being flipped between .band and .band-white. That
      matters right now: moving the founder section inverts the parity of every
      band below it.
   2. Stacking. .cloud-band is absolutely positioned and the containers are
      static, so the clouds paint ABOVE the copy. Only #how-it-works was
      guarding against that, with an inline position:relative. The rest were
      getting away with it because their cards happen to be positioned. Made
      explicit here rather than left to luck.
   .final-band is deliberately excluded: it is dark ink with its own artwork.
   -------------------------------------------------------------------------- */
.band-white .cloud i { background: var(--cream); }
.band > .cloud-band { z-index: 0; }
.band > .container { position: relative; z-index: 1; }

/* Each band gets its own sky: different heights, phases and scales, so
   scrolling never shows the same two puffs twice. */
#flight-day .cloud-a { top: 8%;  animation-delay: -52s; transform: scale(0.86); opacity: 0.9; }
#flight-day .cloud-b { top: 72%; animation-delay: -20s; }
#fears .cloud-a      { top: 66%; animation-delay: -8s;  transform: scale(1.1); opacity: 0.8; }
#fears .cloud-b      { top: 12%; animation-delay: -55s; opacity: 0.55; }
#founder .cloud-a    { top: 18%; animation-delay: -36s; transform: scale(0.94); }
#founder .cloud-b    { top: 78%; animation-delay: -68s; opacity: 0.5; }
#comparison .cloud-a { top: 74%; animation-delay: -26s; transform: scale(0.82); opacity: 0.85; }
#comparison .cloud-b { top: 9%;  animation-delay: -47s; }
#experts .cloud-a    { top: 12%; animation-delay: -61s; transform: scale(1.02); opacity: 0.9; }
#experts .cloud-b    { top: 62%; animation-delay: -33s; opacity: 0.55; }

/* Nine drifting bands is a lot of motion for anyone who asked for less. */
@media (prefers-reduced-motion: reduce) {
  .cloud-a, .cloud-b { animation: none !important; }
}

@media (max-width: 860px) {
  .hiw-grid { grid-template-columns: 1fr; gap: 0; }
  .hiw-steps { display: none; }
  .hiw-dots { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .hiw-dots .seg { width: 20px; height: 2px; background: var(--sand-strong); }
  .hiw-dots button {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sand-strong);
    background: transparent; color: var(--label-faint); font: 600 10px/1 var(--font-body);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    padding: 0; position: relative;
  }
  .hiw-dots button::after { content: ""; position: absolute; inset: -11px; } /* 44px target */
  .hiw-dots button.done { border: 0; background: var(--marigold); color: var(--ink); font-weight: 700; }
  .hiw-dots button.current { width: 26px; height: 26px; border: 2.5px solid var(--ink); background: var(--card); color: var(--ink); font: 700 12px/1 var(--font-body); }
  .hiw-card { grid-template-columns: 1fr; padding: 14px; }
  .hiw-card img { width: 100%; height: 230px; object-fit: contain; background: var(--cream); border-radius: 16px; }
  .hiw-hint { display: block; }
  .cloud-band { display: none; }
}

/* ---------- Founder ---------- */
.founder-wrap { display: flex; gap: 32px; align-items: flex-start; max-width: 860px; margin: 0 auto; }
.founder-photo { width: 200px; flex: none; }
.founder-photo img { width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius-hero); border: 1px solid var(--sand); display: block; }
.founder-photo figcaption { font: 600 12px/1 var(--font-body); color: var(--label); margin-top: 10px; text-align: center; }
.founder-quote { font: 500 clamp(22px, 2.4vw, 30px)/1.3 var(--font-display); letter-spacing: -0.3px; }
.founder-body { font: 500 15px/1.75 var(--font-body); color: var(--body); margin-top: 14px; }
.founder-story summary {
  list-style: none; cursor: pointer; display: inline-block;
  font: 600 14px/1 var(--font-body); color: var(--coral-deep);
  margin-top: 14px; padding: 8px 0; /* generous target */
}
.founder-story summary::-webkit-details-marker { display: none; }
.founder-story summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.founder-story[open] summary .more { display: none; }
.founder-story:not([open]) summary .less { display: none; }
.founder-full { font: 500 15px/1.75 var(--font-body); color: var(--body); }
.founder-full h3 { font: 500 20px/1.3 var(--font-display); color: var(--ink); margin: 26px 0 10px; }
.founder-full p { margin: 0 0 14px; }
.founder-full blockquote { border-left: 3px solid var(--marigold); margin: 20px 0; padding: 2px 0 2px 18px; }
.founder-full blockquote p { font: 500 19px/1.4 var(--font-display); color: var(--coral-deep); font-style: normal; margin: 0; }
.founder-sig { font: 500 15px/1 var(--font-display); color: var(--ink); margin-top: 6px; }
@media (max-width: 760px) {
  .founder-wrap { flex-direction: column; align-items: center; text-align: center; }
  .founder-story summary { padding: 12px 0; }
  .founder-photo { width: 148px; }
  .founder-photo img { width: 148px; height: 148px; border-radius: 20px; }
}

/* ---------- Method / program grid ---------- */
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; margin: 0 auto; }
.method-card {
  display: flex; gap: 14px; background: var(--card); border: 1px solid var(--sand);
  border-radius: var(--radius-card); padding: 18px;
  transition: transform var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease);
}
.method-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.method-card img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; }
.method-card b { display: block; font: 600 15.5px/1.35 var(--font-body); color: var(--ink); }
.method-card p { font: 500 13px/1.55 var(--font-body); color: var(--muted); margin-top: 4px; }
@media (max-width: 760px) { .method-grid { grid-template-columns: 1fr; } }

/* Method rebuild, direction A "the grid retuned" (2026-08-19): the card
   chrome above is unchanged; these rules add the full-row countdown lead,
   the plane's contain tile, and the quiet validation-first closing line.
   The copy mapping lives in COMMS-PRIORITIES.md (messages 3, 6, 4, 8, and
   one quiet claim of 7). */
#method .method-lead { grid-column: 1 / -1; align-items: center; gap: 18px; padding: 20px 22px; }
#method .method-lead img { width: 76px; height: 76px; border-radius: 16px; }
#method .method-lead b { font-size: 18px; line-height: 1.3; letter-spacing: -0.2px; }
#method .method-lead p { font-size: 13.5px; max-width: 66ch; }
/* The plane asset is not square: contain it on a cream tile so it sits like
   the other icon tiles, no crop, no distortion. Both axes stay pinned by
   .method-card img, so the height-attribute trap does not apply here. */
#method .ic-contain { object-fit: contain; background: var(--cream); padding: 7px; box-sizing: border-box; }
#method .method-card img { align-self: flex-start; }
#method .method-lead img { align-self: center; }
/* The one place message 7 (validation-first) is claimed rather than shown */
#method .method-close {
  margin: 22px auto 0; max-width: 34em; text-align: center; text-wrap: pretty;
  font: 500 14.5px/1.65 var(--font-body); color: var(--body-soft);
}
@media (max-width: 560px) {
  #method .method-lead { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  #method .method-lead img { width: 64px; height: 64px; align-self: flex-start; }
  #method .method-lead b { font-size: 16.5px; }
  #method .method-lead p { font-size: 13px; max-width: none; }
  #method .method-close { margin-top: 18px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #method .method-card { transition: none; transform: none !important; }
}

/* ---------- Comparison (candid matrix — sand marks, never red) ---------- */
.cmp-grid { display: grid; grid-template-columns: 200px 1fr 1fr 1fr 1.25fr; gap: 8px; max-width: 940px; margin: 0 auto; align-items: stretch; }
.cmp-rows { padding-top: 56px; }
.cmp-rows div { min-height: 42px; display: flex; align-items: center; font: 600 13px/1.3 var(--font-body); color: var(--body-soft); }
.cmp-col { background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius-squircle); padding: 12px 8px; text-align: center; }
.band-white .cmp-col { background: var(--cream); }
.cmp-col .head { min-height: 44px; }
.cmp-col .head b { display: block; font: 600 13px/1.2 var(--font-body); color: var(--body-soft); }
.cmp-col .head span { font: 500 10.5px/1.4 var(--font-body); color: var(--label-faint); }
.cmp-col .mark { min-height: 42px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-body); }
.mark.yes { color: var(--dusk); }
.mark.part { color: var(--sand-deep); }
.mark.no { color: #D8CDB2; font-weight: 600; }
.mark.cost { font: 600 11px/1.2 var(--font-body); color: var(--muted); }
.cmp-col.rtf {
  background: var(--card); border: 2px solid var(--marigold); position: relative;
  box-shadow: 0 12px 30px rgba(242, 169, 59, 0.18);
}
.cmp-col.rtf .flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--marigold); border-radius: var(--radius-pill); padding: 4px 10px;
  font: 700 9px/1 var(--font-body); letter-spacing: 1px; color: var(--ink); white-space: nowrap;
}
.cmp-col.rtf .head { padding-top: 6px; }
.cmp-col.rtf .head b { color: var(--coral-deep); font-weight: 700; }
.cmp-col.rtf .mark.yes { color: var(--coral-deep); font-weight: 800; }
.cmp-col.rtf .mark.cost { color: var(--ink); font-weight: 700; }
.cmp-note { font: 500 12px/1.6 var(--font-body); color: var(--label-faint); text-align: center; margin-top: 16px; max-width: 640px; margin-left: auto; margin-right: auto; }
.cmp-stack { display: none; }
@media (max-width: 860px) {
  .cmp-grid { display: none; }
  .cmp-stack { display: block; max-width: 480px; margin: 0 auto; }
  .cmp-stack .rtf-card {
    border: 2px solid var(--marigold); border-radius: 18px; padding: 14px;
    background: var(--card); box-shadow: 0 10px 24px rgba(242, 169, 59, 0.15);
  }
  .cmp-stack .rtf-card .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .cmp-stack .rtf-card .top b { font: 700 14px/1 var(--font-body); color: var(--coral-deep); }
  .cmp-stack .rtf-card .top span { font: 700 9px/1 var(--font-body); letter-spacing: 0.8px; color: var(--ink); background: var(--marigold); border-radius: var(--radius-pill); padding: 5px 9px; }
  .cmp-stack .rtf-card ul { list-style: none; margin: 0; padding: 0; font: 500 13px/1.9 var(--font-body); color: var(--ink); }
  .cmp-stack .others { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .cmp-stack .others div { background: var(--cream); border: 1px solid var(--sand); border-radius: 14px; padding: 11px 13px; font: 500 12.5px/1.5 var(--font-body); color: var(--muted); }
  .cmp-stack .others b { color: var(--body-soft); }
}

/* ---------- Testimonials (18e star twinkle on the header strip) ---------- */
.stars { display: inline-flex; gap: 4px; font-size: 16px; color: var(--marigold); }
@keyframes rtf-twinkle { 0% { transform: scale(1); } 3.5% { transform: scale(1.24); } 7%, 100% { transform: scale(1); } }
.stars.twinkle span { display: inline-block; animation: rtf-twinkle 5s ease-in-out infinite; }
.stars.twinkle span:nth-child(2) { animation-delay: 0.14s; }
.stars.twinkle span:nth-child(3) { animation-delay: 0.28s; }
.stars.twinkle span:nth-child(4) { animation-delay: 0.42s; }
.stars.twinkle span:nth-child(5) { animation-delay: 0.56s; }
.stories-rating { font: 600 13px/1 var(--font-body); color: var(--muted); margin-top: 6px; }
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; margin: 0 auto; }
.story-card { background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-card); padding: 20px; }
.band-white .story-card { background: var(--cream); }
.story-card blockquote { margin: 0; font: 500 14.5px/1.65 var(--font-body); color: var(--ink); }
.story-card figcaption { font: 600 12px/1.4 var(--font-body); color: var(--label); margin-top: 12px; }
.stories-dots { display: none; }
@media (max-width: 760px) {
  .stories-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding: 4px 24px 8px; margin: 0 -24px;
    scrollbar-width: none;
  }
  .stories-grid::-webkit-scrollbar { display: none; }
  .story-card { flex: 0 0 85%; scroll-snap-align: center; }
  .stories-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
  .stories-dots button { width: 7px; height: 7px; border-radius: 50%; background: #EAE0CB; border: 0; padding: 0; cursor: pointer; position: relative; }
  .stories-dots button::after { content: ""; position: absolute; inset: -14px; }
  .stories-dots button.on { background: var(--marigold); }
}

/* ---------- Advisor ---------- */
.advisor-card {
  display: flex; gap: 26px; align-items: center; max-width: 780px; margin: 0 auto;
  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius-hero); padding: 26px 30px;
}
.advisor-card img {
  width: 132px; height: 132px; object-fit: cover; object-position: top; border-radius: 50%;
  border: 4px solid var(--card); box-shadow: 0 8px 20px rgba(51, 52, 74, 0.12); flex: none;
  background: var(--sand-tint);
}
.advisor-label { font: 700 11px/1 var(--font-body); letter-spacing: 2px; color: var(--label); margin-bottom: 6px; }
.advisor-name { font: 500 22px/1.2 var(--font-display); }
.advisor-cred { font: 600 13px/1.3 var(--font-body); color: var(--coral-deep); margin: 3px 0 9px; }
.advisor-bio { font: 500 13.5px/1.65 var(--font-body); color: var(--body); }
.advisor-sources { font: 500 12px/1.6 var(--font-body); color: var(--label-faint); text-align: center; margin-top: 16px; }
@media (max-width: 700px) {
  .advisor-card { flex-direction: column; text-align: center; padding: 22px 18px; }
  .advisor-card img { width: 96px; height: 96px; }
}

/* ---------- FAQ (design accordion cards; no-JS = first open, all reachable) ---------- */
.faq-grid { display: grid; grid-template-columns: 250px 1fr; gap: 30px; max-width: 880px; margin: 0 auto; }
.faq-intro h2 { font: 500 28px/1.1 var(--font-display); }
.faq-intro p { font: 500 13px/1.6 var(--font-body); color: var(--muted); margin-top: 10px; }
.faq-intro a { color: var(--coral-deep); font-weight: 600; text-decoration: none; }
.faq-intro a:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-card { background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-squircle); }
.faq-card[open] { border: 1.5px solid var(--marigold); }
.faq-card summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 15px 18px; font: 600 14.5px/1.4 var(--font-body); color: var(--body-soft);
  min-height: 48px; border-radius: var(--radius-squircle);
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card[open] summary { color: var(--ink); }
.faq-card summary .tgl { color: var(--label-faint); font: 600 16px/1 var(--font-body); flex: none; }
.faq-card[open] summary .tgl { color: var(--coral-deep); }
.faq-card summary .tgl::before { content: "+"; }
.faq-card[open] summary .tgl::before { content: "\2212"; }
.faq-card .faq-body { padding: 0 18px 15px; font: 500 13.5px/1.65 var(--font-body); color: var(--body); }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Final CTA (ink band, arrivals art — type never on art) ---------- */
.final-band { position: relative; background: var(--ink); overflow: hidden; }
.final-band .art { position: absolute; right: 0; top: 0; height: 100%; width: 44%; object-fit: cover; opacity: 0.5; }
.final-band .veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 45%, rgba(51, 52, 74, 0.55)); }
.final-inner { position: relative; padding: clamp(44px, 6vw, 72px) 0; max-width: 620px; }
.final-inner h2 { font: 500 clamp(26px, 3.4vw, 44px)/1.25 var(--font-display); color: var(--cream); letter-spacing: -0.5px; }
.final-inner h2 .accent { color: var(--gold-soft); }
.final-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.final-band .btn-marigold { border-radius: 14px; padding: 14px 22px; font-weight: 700; box-shadow: 0 10px 24px rgba(242, 169, 59, 0.35); }
.final-note { font: 600 13px/1.4 var(--font-body); color: #B9BCD0; }
@media (max-width: 760px) {
  .final-band .art, .final-band .veil { display: none; }
  .final-inner { max-width: none; text-align: center; }
  .final-actions { justify-content: center; }
}

/* ---------- Footer ---------- */
.rtf-footer { background: var(--ink-deep); padding: 24px 0; }
.rtf-footer .row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rtf-footer .logo-img { height: 18px; filter: invert(1); opacity: 0.92; }
.rtf-footer nav { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 12px/1.6 var(--font-body); color: #8A8DA8; }
.rtf-footer nav a { color: #B9BCD0; text-decoration: none; }
.rtf-footer nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.rtf-footer .fine { font: 500 11px/1.6 var(--font-body); color: #8A8DA8; }
.rtf-footer .fineline { margin-top: 10px; font: 500 11px/1.6 var(--font-body); color: #6F7290; }
@media (max-width: 700px) {
  .rtf-footer .row { flex-direction: column; text-align: center; justify-content: center; }
  .rtf-footer nav { justify-content: center; }
}

/* ============================================================
   Blog + long-form (B1–B4)
   ============================================================ */
.page-pad { padding-top: 108px; }
@media (max-width: 860px) { .page-pad { padding-top: 84px; } }

/* Read progress (kept id from the old pages) */
#progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--marigold); z-index: 9999; transition: width 0.1s linear; }

/* Blog index */
.blog-head .section-label { color: var(--coral-deep); }
.blog-head h1 { font: 500 clamp(28px, 3.6vw, 44px)/1.15 var(--font-display); letter-spacing: -0.5px; margin-top: 8px; }
.blog-head p { font: 500 15px/1.65 var(--font-body); color: var(--body); margin-top: 10px; max-width: 560px; }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.chip {
  background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-pill);
  padding: 10px 16px; font: 600 12.5px/1 var(--font-body); color: var(--body);
  cursor: pointer; min-height: 40px; transition: all var(--dur-web) var(--motion-ease);
}
.chip:hover { border-color: var(--sand-deep); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.blog-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-top: 26px; }
.post-card {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--sand);
  border-radius: var(--radius-card); overflow: hidden; text-decoration: none;
  transition: transform var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.post-card.featured { grid-row: span 2; }
.post-card.featured img { width: 100%; height: 210px; object-fit: cover; display: block; }
.post-card .pad { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.kicker { font: 700 10px/1.3 var(--font-body); letter-spacing: 1.5px; color: var(--coral-deep); text-transform: uppercase; }
.kicker.dusk { color: var(--dusk); }
.kicker.gold { color: var(--gold-label); }
.post-card h2 { font: 500 17px/1.35 var(--font-display); color: var(--ink); margin-top: 7px; }
.post-card.featured h2 { font-size: 21px; line-height: 1.3; }
.post-card p { font: 500 13px/1.6 var(--font-body); color: var(--muted); margin-top: 7px; }
.post-card .meta { font: 600 11px/1 var(--font-body); color: var(--label-faint); margin-top: auto; padding-top: 12px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } .post-card.featured { grid-column: span 2; grid-row: auto; } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } .post-card.featured { grid-column: auto; } }

/* First article element: container padding provides the gap; don't stack
   the element's own top margin on it (was ~96px of cream before the H2) */
.prose > :first-child { margin-top: 0; }

/* Post layout: sticky ToC + measured column */
.post-layout { display: flex; gap: 48px; align-items: flex-start; }
.post-col { width: 100%; max-width: 720px; }
.post-aside { display: none; }
@media (min-width: 1024px) {
  .post-aside { display: block; width: 260px; flex: none; position: sticky; top: 96px; }
}
.toc-card { background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-squircle); padding: 18px 20px; margin-bottom: 14px; }
.toc-card h3 { font: 700 10px/1.3 var(--font-body); letter-spacing: 1.5px; color: var(--label); text-transform: uppercase; margin-bottom: 8px; }
.toc-link {
  display: block; padding: 5px 0 5px 12px; border-left: 2px solid transparent;
  font: 600 12.5px/1.5 var(--font-body); color: var(--muted); text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.toc-link:hover { color: var(--coral-deep); }
.toc-link.active { color: var(--coral-deep); border-left-color: var(--marigold); }
.aside-cta { background: var(--ink); border-radius: var(--radius-card); padding: 20px; }
.aside-cta b { display: block; font: 500 17px/1.35 var(--font-display); font-weight: 500; color: var(--cream); }
.aside-cta p { font: 500 12.5px/1.6 var(--font-body); color: #B9BCD0; margin: 8px 0 14px; }
.aside-cta a {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--marigold); border-radius: var(--radius-pill);
  font: 700 12.5px/1 var(--font-body); color: var(--ink); text-decoration: none;
  transition: transform var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease);
}
.aside-cta a:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }

/* Post header */
.post-head { padding-top: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.crumbs { font: 500 12.5px/1.4 var(--font-body); color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--coral-deep); }
.crumbs .sep { color: var(--sand-deep); margin: 0 6px; }
.crumbs .here { color: var(--ink); font-weight: 600; }
.post-head h1 { font: 500 clamp(26px, 3.4vw, 40px)/1.22 var(--font-display); letter-spacing: -0.5px; max-width: 820px; margin-top: 10px; }
.post-head .dek { font: 500 16px/1.7 var(--font-body); color: var(--body); max-width: 680px; margin-top: 14px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; font: 500 13px/1.4 var(--font-body); color: var(--muted); }
.byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.byline .who { display: flex; align-items: center; gap: 10px; }
.byline .who b { color: var(--ink); font-weight: 600; }
.reviewed {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dusk-tint); border-radius: var(--radius-pill); padding: 6px 12px;
  font: 600 11.5px/1.3 var(--font-body); color: var(--dusk);
}
.byline .when { color: var(--label-faint); }

/* Article typography — 17px/1.85, structure preserved for search & AI answers */
.prose { font: var(--text-article); color: var(--body-deep); }
.prose h2 { font: 500 26px/1.3 var(--font-display); color: var(--ink); letter-spacing: -0.3px; margin: 2.5rem 0 1rem; scroll-margin-top: 96px; }
.prose h3 { font: 500 20px/1.35 var(--font-display); color: var(--ink); margin: 2rem 0 0.75rem; }
.prose p { color: var(--body-deep); line-height: 1.85; margin: 0 0 1.25rem; font-size: 17px; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.prose li { color: var(--body-deep); line-height: 1.8; margin-bottom: 0.4rem; font-size: 16.5px; }
.prose ul li { list-style-type: disc; }
.prose ol li { list-style-type: decimal; }
.prose li::marker { color: var(--sand-deep); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--coral); }
.prose blockquote { border-left: 3px solid var(--marigold); padding: 0.25rem 0 0.25rem 1.5rem; margin: 2rem 0; }
.prose blockquote p { font: 500 20px/1.45 var(--font-display); color: var(--coral-deep); font-style: normal; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 14.5px; }
.prose th {
  background: var(--sand-tint); font: 700 13px/1.4 var(--font-body); color: var(--ink);
  padding: 0.75rem 1rem; text-align: left; border-bottom: 2px solid var(--sand-strong);
}
.prose td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--sand-tint); color: var(--body-deep); vertical-align: top; }
.prose tr:last-child td { border-bottom: none; }
.prose .table-scroll, .prose .overflow-x-auto { overflow-x: auto; }

/* Article components (Sunroom re-skin; hue rules: info = dusk, alarm = deep coral on tint) */
.stat-callout { background: var(--dusk-tint); border-left: 4px solid var(--dusk); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.stat-callout .stat-number { font: 700 30px/1 var(--font-body); color: var(--ink); letter-spacing: -0.5px; }
.stat-callout .stat-label { font: 500 14px/1.6 var(--font-body); color: #4A5578; margin-top: 0.35rem; }
.app-card { background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-squircle); padding: 1.5rem; margin-bottom: 1.5rem; }
.app-card .app-name { font: 500 19px/1.3 var(--font-display); color: var(--ink); margin-bottom: 0.25rem; }
.app-card .app-price { font: 600 13px/1.4 var(--font-body); color: var(--label); margin-bottom: 0.75rem; }
.app-card .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
.app-card .pros-label, .app-card .cons-label { font: 700 11px/1.3 var(--font-body); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.4rem; }
.app-card .pros-label { color: var(--dusk); }
.app-card .cons-label { color: var(--coral-deep); }
.app-card .pros-list, .app-card .cons-list { padding-left: 0 !important; margin: 0 !important; }
.app-card .pros-list li, .app-card .cons-list li { font-size: 14px !important; color: var(--body); list-style-type: none !important; padding-left: 1.25rem; position: relative; margin-bottom: 0.25rem; }
.app-card .pros-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--dusk); font-weight: 700; }
.app-card .cons-list li::before { content: "\2212"; position: absolute; left: 0; color: var(--coral-deep); font-weight: 700; }
@media (max-width: 640px) { .app-card .pros-cons { grid-template-columns: 1fr; } }
.technique-card { background: var(--cream); border: 1.5px solid var(--sand); border-radius: var(--radius-squircle); padding: 1.5rem; margin: 1.5rem 0; }
.technique-card.highlight { border-color: var(--marigold); background: var(--tint-gold); }
.technique-card h3 { margin-top: 0 !important; }
.technique-card .badge {
  display: inline-block; background: var(--coral-tint); color: var(--coral-deep);
  font: 700 10.5px/1.3 var(--font-body); padding: 4px 10px; border-radius: var(--radius-pill);
  margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.technique-card ol { padding-left: 1.25rem; margin: 0; }
.technique-card ol li { font-size: 15px; line-height: 1.7; }
.approach-card { background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius-squircle); padding: 1.5rem; margin-bottom: 1.25rem; }
.approach-card h3 { margin-top: 0 !important; }
.approach-card p { font-size: 15px; margin-bottom: 0.75rem; }

/* Mid-article CTA card (kept markup, Sunroom skin).
   Scoped tightly: `.my-10` is the old CTA class combo; `[class="not-prose"]`
   is the bare template variant. The FAQ container (.space-y-0) and
   .app-card variants must NOT get the flex-card treatment. */
.prose .not-prose.my-10, .prose div[class="not-prose"] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-squircle);
  padding: 18px 20px; margin: 2.25rem 0;
}
.prose .not-prose.my-10 > div:first-child { display: none; } /* old icon bubble */
.prose .not-prose.my-10 > div, .prose div[class="not-prose"] > div { flex: 1 1 260px; }
.prose .not-prose.my-10 p, .prose div[class="not-prose"] p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.prose .not-prose.my-10 p:first-child, .prose div[class="not-prose"] p:first-child { font: 600 15px/1.4 var(--font-body); color: var(--ink); margin-bottom: 4px; }
.prose .not-prose.my-10 a, .prose div[class="not-prose"] > a {
  flex: none; background: var(--marigold); color: var(--ink) !important;
  border-radius: var(--radius-pill); padding: 12px 18px; min-height: 44px;
  display: inline-flex; align-items: center; font: 700 13px/1 var(--font-body);
  text-decoration: none; box-shadow: 0 6px 16px rgba(242, 169, 59, 0.3);
  transition: transform var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease);
}
.prose .not-prose.my-10 a:hover, .prose div[class="not-prose"] > a:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
/* footnote paragraphs reuse .not-prose on a <p> */
.prose p.not-prose { display: block; background: none; border: 0; border-top: 1px solid var(--sand-tint); border-radius: 0; padding: 1.5rem 0 0; margin: 2rem 0 0; font-size: 12.5px; color: var(--label-faint); }

/* In-article FAQ accordions (original markup preserved; collapsed only when JS runs) */
.faq-item { border-bottom: 1px solid var(--sand-tint); }
#article-faq, .prose [id="article-faq"], .prose .not-prose.space-y-0 {
  display: block; padding: 0;
  border: 1px solid var(--sand); border-radius: var(--radius-squircle);
  overflow: hidden; margin: 1.5rem 0 2rem; background: var(--card);
}
.faq-item:last-child { border-bottom: 0; }
.faq-item button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 16px 20px; min-height: 48px;
  font: 600 15px/1.4 var(--font-body); color: var(--ink);
}
.faq-item button:hover span:first-child { color: var(--coral-deep); }
.faq-item button > div { color: var(--label-faint); flex: none; transition: transform 300ms var(--motion-ease), color 300ms; }
.faq-item button > div.rotate-45, .faq-item .rotate-45 { transform: rotate(45deg); color: var(--coral-deep); }
html.js .faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 300ms var(--motion-ease), opacity 300ms var(--motion-ease); }
html.js .faq-answer > div { overflow: hidden; }
html.js .faq-answer.grid-rows-\[1fr\] { grid-template-rows: 1fr; opacity: 1; }
.faq-answer > div > div { padding: 0 20px 16px; font: 500 14px/1.7 var(--font-body); color: var(--body); }

/* Related posts */
.related-band { background: var(--card); border-top: 1px solid var(--hairline); padding: clamp(40px, 6vw, 64px) 0; }
.related-band h2 { font: 500 24px/1.2 var(--font-display); margin-bottom: 22px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related-grid a {
  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius-card);
  padding: 18px; text-decoration: none; display: flex; flex-direction: column;
  transition: transform var(--dur-web) var(--motion-ease), box-shadow var(--dur-web) var(--motion-ease);
}
.related-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.related-grid h3 { font: 500 16px/1.35 var(--font-display); color: var(--ink); margin-top: 8px; }
.related-grid p { font: 500 12.5px/1.6 var(--font-body); color: var(--muted); margin-top: 6px; }
.related-grid .go { font: 600 12.5px/1 var(--font-body); color: var(--coral-deep); margin-top: auto; padding-top: 12px; }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- Legal (B4) ---------- */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 24px 24px 64px; }
.legal-wrap h1 { font: 500 clamp(26px, 3.2vw, 36px)/1.2 var(--font-display); }
.legal-meta { font: 500 12.5px/1.6 var(--font-body); color: var(--label); margin: 8px 0 16px; }
.legal-meta strong, .legal-meta b { color: var(--body-soft); }
.legal-tldr {
  background: var(--dusk-tint); border-radius: 14px; padding: 14px 18px;
  font: 500 13.5px/1.65 var(--font-body); color: #4A5578; margin-bottom: 20px;
}
.legal-tldr b { color: #3C466B; }
.legal-section { margin-bottom: 22px; }
.legal-section h2 { font: 600 17px/1.4 var(--font-body); color: var(--ink); margin-bottom: 6px; scroll-margin-top: 96px; }
.legal-section h3 { font: 600 14.5px/1.4 var(--font-body); color: var(--body-soft); margin: 12px 0 4px; }
.legal-section p, .legal-section li, .legal-intro p { font: 500 14.5px/1.8 var(--font-body); color: var(--body-soft); }
.legal-section p, .legal-intro p { margin-bottom: 10px; }
.legal-intro { margin-bottom: 20px; }
.legal-section ul, .legal-section ol { padding-left: 1.4rem; margin: 0 0 10px; }
.legal-section a, .legal-intro a { color: var(--coral-deep); }
.legal-section strong, .legal-intro strong { color: var(--ink); }
.legal-section table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 14px; }
.legal-section th { background: var(--sand-tint); text-align: left; padding: 8px 12px; font: 700 12px/1.4 var(--font-body); color: var(--ink); border-bottom: 2px solid var(--sand-strong); }
.legal-section td { padding: 8px 12px; border-bottom: 1px solid var(--sand-tint); color: var(--body-soft); vertical-align: top; }
.table-of-contents { background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius-squircle); padding: 16px 20px; margin-bottom: 24px; }
.table-of-contents h2, .table-of-contents h3 { font: 700 11px/1.3 var(--font-body); letter-spacing: 1.5px; color: var(--label); text-transform: uppercase; margin: 0 0 8px; }
.table-of-contents ol { columns: 2; margin: 0; padding-left: 1.2rem; font: 500 13px/1.9 var(--font-body); color: var(--body); }
.table-of-contents a { color: var(--body); text-decoration: none; }
.table-of-contents a:hover { color: var(--coral-deep); }
@media (max-width: 640px) { .table-of-contents ol { columns: 1; } }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .breathing, .stars.twinkle span,
  .cloud-a, .cloud-b,
  .taxi-go .ph-fill, .taxi-go .ph-dot { animation: none !important; }
  .cloud-band { display: none; }
  /* 20a: reduced motion parks the sprite — visible, stationary */
  .cruise-plane { animation: none !important; left: 14%; opacity: 1; }
  .btn:hover, .btn-marigold:hover, .btn-ink:hover, .method-card:hover,
  .post-card:hover, .related-grid a:hover, .aside-cta a:hover,
  .prose .not-prose a:hover { transform: none; }
  .hiw-stage, .rtf-sheet, .sheet-scrim, .nav-links a::after { transition-duration: 1ms; }
  .nav-links a:hover::before { animation: none; }
  .ph-fill { width: 50%; }
}


/* ============================================================
   FLIGHT-DAY COMPANION (rec #3) — added 2026-08-14
   ============================================================ */
/* ============================================================
   FLIGHT-DAY COMPANION, "The Nine Doors" (V2 rec #3)
   Scoped entirely under #flight-day. Paste-ready, self-contained.
   Depends only on tokens.css variables and the .band / .container /
   .section-head / .stage-pill classes already in site.css.

   No device frame and no screenshot. The nine cards below ARE the
   app's picker row, rebuilt in HTML at the anatomy of
   app/(protected)/(premium)/companion/index.tsx: square art tile at a
   quarter radius, 10px padding, 16px card radius, 12px gap, Figtree
   700 title, Figtree 500 subline, and the three real card states
   (ahead / played / now).
   ============================================================ */

#flight-day .fdc-lede { max-width: 40ch; margin-left: auto; margin-right: auto; }
@media (max-width: 719px) { #flight-day .fdc-br { display: none; } }
@media (min-width: 720px) { #flight-day .fdc-lede { max-width: 62ch; } }

/* ---- the ground: the picker's own cream screen ---- */
#flight-day .fdc-panel {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-hero);
  padding: 13px 11px 15px;
}

/* ---- leg label. All that survives of the approved rail: the four leg
        names. The connector graphic is gone, because the cards now carry
        the product's own visual language and a second one beside them is
        the two-lists problem again. ---- */
#flight-day .fdc-leg {
  display: flex; align-items: center; gap: 9px;
  font: 700 10px/1 var(--font-body);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--label); margin: 0 2px 6px;
}
#flight-day .fdc-leg::after {
  content: ""; flex: 1; height: 1px; background: var(--sand); border-radius: 1px;
}
#flight-day .fdc-deck + .fdc-leg { margin-top: 13px; }
#flight-day .fdc-deck { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* the lit card needs room for its glow and its raised pill */
#flight-day .fdc-deck > .is-now { margin-top: 15px; margin-bottom: 6px; }

/* ---- the card ---- */
#flight-day .fdc-door {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  background: var(--card);
  border: 1px solid var(--sand-tint);
  border-radius: 15px;
  padding: 9px;
  box-shadow: 0 2px 6px rgba(51, 52, 74, 0.055);
}
#flight-day .fdc-tile {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  object-fit: cover; display: block; background: var(--sand-tint);
}
#flight-day .fdc-text { min-width: 0; flex: 1; }
#flight-day .fdc-name {
  display: block; font: 700 15px/1.25 var(--font-body);
  letter-spacing: -0.1px; color: var(--ink);
}
#flight-day .fdc-sub {
  display: block; font: 500 12px/1.33 var(--font-body); color: var(--muted); margin-top: 1px;
}

/* state: played. The cream dip carries "behind me" and the dot is the
   app's own proof mark, never a tick. The border stays sand so the panel
   holds exactly one marigold block, and it is the hero. */
#flight-day .fdc-door.is-played {
  background: var(--cream-dip); border-color: var(--sand-strong); box-shadow: none;
}
#flight-day .fdc-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--marigold);
  flex: none; margin-right: 3px;
}

/* state: now. One hero, lit, breaking out of the cream on both sides,
   with the pill raised clear of the card's top edge. */
#flight-day .fdc-door.is-now {
  z-index: 2;
  margin-inline: -21px;
  background: var(--marigold);
  border-color: transparent;
  border-radius: 19px;
  padding: 13px;
  gap: 13px;
  box-shadow: 0 8px 20px rgba(242, 169, 59, 0.35), 0 22px 46px rgba(242, 169, 59, 0.22);
}
#flight-day .fdc-door.is-now .fdc-tile { width: 62px; height: 62px; border-radius: 15px; }
#flight-day .fdc-door.is-now .fdc-name { font-size: 19px; }
#flight-day .fdc-door.is-now .fdc-sub { color: #5F4E2A; font-size: 13px; margin-top: 2px; }
#flight-day .fdc-pill {
  position: absolute; top: -11px; right: 15px;
  font: 700 9px/1 var(--font-body); letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink); background: var(--card);
  padding: 6px 9px; border-radius: var(--radius-pill); white-space: nowrap;
  box-shadow: 0 4px 12px rgba(51, 52, 74, 0.16);
}

/* ---- caption + specs ---- */
#flight-day .fdc-caption {
  font: 500 13px/1.6 var(--font-body); color: var(--muted);
  max-width: 60ch; margin: 16px auto 0; text-align: center;
}
#flight-day .fdc-specs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 12px;
}
@media (max-width: 719px) {
  #flight-day .fdc-specs .stage-pill { font-size: 8.5px; letter-spacing: 1px; padding: 5px 9px; }
}
#flight-day .fdc-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 430px+: the sublines stop wrapping, so a little more room ---- */
@media (min-width: 430px) {
  #flight-day .fdc-panel { padding: 16px 16px 20px; }
  #flight-day .fdc-door { padding: 10px; gap: 12px; border-radius: 16px; }
  #flight-day .fdc-tile { width: 48px; height: 48px; border-radius: 12px; }
  #flight-day .fdc-name { font-size: 15.5px; }
  #flight-day .fdc-sub { font-size: 12.5px; }
  #flight-day .fdc-door.is-now { margin-inline: -24px; }
}

/* ---- 560 to 699px: still one stack, so cap it. A 48px tile beside a
        650px card stops reading as the app's own row. ---- */
@media (min-width: 560px) and (max-width: 699px) {
  #flight-day .fdc-panel { max-width: 560px; margin-inline: auto; }
}

/* ---- 700px+: the cream stays a single phone-wide column, because the
        day is one continuous run and two columns would break it in half.
        The extra width goes to the leg names, which step down the white
        margin OUTSIDE the cream and annotate it. The rail survives as the
        seam between margin and column, not as a drawn graphic. ---- */
@media (min-width: 700px) {
  #flight-day .fdc-panel {
    display: grid;
    grid-template-columns: 148px 452px;
    column-gap: 30px; row-gap: 20px;
    align-items: start;
    width: 630px; margin: 8px auto 12px;
    background: none; border: 0; padding: 0;
  }
  /* the cream column, painted behind the cards only */
  #flight-day .fdc-panel::before {
    content: ""; position: absolute; z-index: 0;
    top: -20px; bottom: -22px; left: 162px; right: -14px;
    background: var(--cream); border: 1px solid var(--hairline);
    border-radius: var(--radius-hero);
  }
  #flight-day .fdc-leg {
    position: relative; z-index: 1;
    justify-content: flex-end; text-align: right;
    margin: 0; padding-top: 18px; line-height: 1.5;
    font-size: 10px; letter-spacing: 1.5px;
  }
  #flight-day .fdc-leg::after { display: none; }
  #flight-day .fdc-deck + .fdc-leg { margin-top: 0; }
  #flight-day .fdc-deck { position: relative; z-index: 1; gap: 9px; }
  #flight-day .fdc-deck > .is-now { margin-top: 16px; margin-bottom: 8px; }
  #flight-day .fdc-door { padding: 11px; border-radius: 17px; gap: 13px; }
  #flight-day .fdc-tile { width: 56px; height: 56px; border-radius: 14px; }
  #flight-day .fdc-name { font-size: 16.5px; }
  #flight-day .fdc-sub { font-size: 13px; margin-top: 2px; }
  /* the hero is the one card that crosses out of the column, both ways */
  #flight-day .fdc-door.is-now {
    margin-left: -20px; margin-right: -26px;
    padding: 15px 17px; border-radius: 21px;
  }
  #flight-day .fdc-door.is-now .fdc-tile { width: 74px; height: 74px; border-radius: 18px; }
  #flight-day .fdc-door.is-now .fdc-name { font-size: 21px; }
  #flight-day .fdc-door.is-now .fdc-sub { font-size: 14px; }
  #flight-day .fdc-pill { right: 20px; font-size: 9.5px; padding: 7px 11px; }
  #flight-day .fdc-caption { font-size: 14px; margin-top: 26px; }
}

/* ---- 980px+: room to slide the whole figure left by half its gutter, so
        the cream column sits on the page's centre line and the leg names
        hang in the margin beside it. ---- */
@media (min-width: 980px) {
  #flight-day .fdc-panel {
    grid-template-columns: 150px 476px; column-gap: 46px;
    width: 672px; transform: translateX(-98px);
  }
  #flight-day .fdc-panel::before { left: 178px; right: -18px; }
  #flight-day .fdc-leg { font-size: 10.5px; letter-spacing: 1.6px; }
  #flight-day .fdc-door.is-now { margin-left: -34px; margin-right: -44px; }
  #flight-day .fdc-caption { font-size: 14.5px; }
}

/* ---- Shortened tail, Martin 2026-08-14 ------------------------------------
   Everything below "Taxi & takeoff" dissolves. The point is made by then, and
   the full section ran long on a phone. Two rules matter here:

   1. This is a MASK, not display:none. All nine doors stay in the DOM and stay
      in the accessibility tree, so a screen reader still hears the whole day.
   2. The three faded doors are In the air, Coming down and Landed, arriving,
      which are the half of the argument that says this runs past landing. That
      claim moves into .fdc-caption in prose so it survives the fade.
   -------------------------------------------------------------------------- */
.fdc-tail {
  position: relative;
  max-height: 92px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 18%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0, #000 18%, transparent 92%);
}
/* The tail's own leg label would surface mid-fade as a stray orphan word. */
.fdc-tail .fdc-leg { display: none; }
.fdc-tail .fdc-deck { margin-top: 0; }

@media (min-width: 760px) {
  .fdc-tail { max-height: 104px; }
}

/* No mask support: show the day in full rather than clip it dead. */
@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .fdc-tail { max-height: none; overflow: visible; }
}


/* The fade wrapper is a grid item once .fdc-panel becomes two columns at
   700px, and auto-placement dropped it into the 148px leg-label column,
   which squeezed "In the air" into a narrow box on the left. The decks it
   replaces live in column 2, so it has to say so explicitly. Below 700px the
   panel is not a grid and the wrapper is an ordinary block, which is why
   mobile was never affected. */
@media (min-width: 700px) {
  .fdc-tail { grid-column: 2; }
}


/* The panel's cream ground is painted by ::before, so masking .fdc-tail alone
   left the box itself ending on a hard edge under the fading card. Same
   gradient, anchored to the box's own bottom rather than a percentage, so it
   holds whatever the panel's height turns out to be. */
.fdc-panel::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 165px), transparent calc(100% - 10px));
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 165px), transparent calc(100% - 10px));
}

/* The two captains, from the app's own art. The webp is the breathing loop the
   app plays; the jpg still is served to anyone who asks for reduced motion,
   via the media attribute on <source>. */
.fdc-voices {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  margin: 4px auto 0; max-width: 560px;
}
.fdc-crew { display: flex; gap: 10px; flex: none; }
.fdc-cap { margin: 0; text-align: center; }
.fdc-cap img {
  display: block; width: 60px; height: 60px;
  border-radius: 50%; background: var(--cream);
}
.fdc-cap figcaption {
  margin-top: 3px;
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--gold-label);
}
.fdc-voiceline {
  margin: 0; flex: 1 1 240px; min-width: 210px;
  text-align: left; color: var(--muted);
  font-size: 15px; line-height: 1.5;
}
@media (max-width: 520px) {
  .fdc-voices { flex-direction: column; gap: 10px; }
  .fdc-voiceline { text-align: center; flex: none; }
}

/* ===== voice picker (chosen 2026-08-14) ===== */
/* ============================================================
   THE VOICE PICKER
   Replaces .fdc-voices and absorbs .fdc-caption. Self-contained: it names
   no class from any other block, and borrows only tokens. The two
   box-sizing lines are not noise, they are what lets the block hold its
   shape if it is ever pasted without site.css.

   NOTE: the three existing #flight-day .fdc-caption rules go dead when
   this lands, because the element is gone. Delete them.
   ============================================================ */

/* Picker lead (2026-08-19, Martin): one big line instead of the small
   paragraph. The 140+ figure is counted, not vibes: audioLibrary.json holds
   72 sessions, each with durations for both voices = 144 playable audios
   (PROOF.md row added same day). Re-count before ever raising the number. */
#flight-day .fdc-pick-lead { text-align: center; max-width: 34em; margin: 26px auto 4px; }
#flight-day .fdc-pick-lead h3 { font: 500 24px/1.2 var(--font-display); letter-spacing: -0.4px; color: var(--ink); margin: 0; }
#flight-day .fdc-pick-lead p { font: 500 14.5px/1.6 var(--font-body); color: var(--muted); margin: 8px 0 0; }
#flight-day .fdc-close {
  max-width: 33em;
  margin: 18px auto 0;
  text-align: center;
  text-wrap: pretty;
  color: var(--muted);
  font: 500 14px/1.62 var(--font-body);
}

/* Two options and a real "or" between them. The "or" is what makes this a
   choice rather than a cast list, so it is text in the flow, never a
   ::before on a divider. */
#flight-day .fdc-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 0;
}
#flight-day .fdc-pick-or {
  flex: none;
  color: var(--muted);
  font: 500 13px/1 var(--font-body);
}

/* Same warm card the doors are built from: cream fill, sand hairline,
   --radius-card. The flex-basis caps the card at the figure's own scale so
   it never balloons into a wide empty box on a tablet, and shrinks instead
   of overflowing at 320. overflow:hidden lets the name plate run full bleed
   into the rounded corners. */
#flight-day .fdc-pick-card {
  box-sizing: border-box;
  flex: 0 1 158px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--radius-card);
  padding: 10px 10px 0;
  overflow: hidden;
}

/* The art is bottom-anchored in its own source frame, so it needs a floor
   or it hangs in the middle of the card. The name plate's top rule IS the
   floor: the figure's base sits flush on it, and the pair reads as someone
   standing, which a circular crop threw away.

   Keep width/height on the <img>. They reserve 65.19 x 98 from the aspect
   ratio before the lazy image lands, so nothing shifts. */
#flight-day .fdc-pick-fig {
  display: block;
  height: 98px;
  width: auto;
  transform-origin: 50% 100%;
}
#flight-day .fdc-pick-meta {
  box-sizing: border-box;
  align-self: stretch;
  margin: 0 -10px;
  padding: 8px 6px 9px;
  border-top: 1px solid var(--sand);
  text-align: center;
}
#flight-day .fdc-pick-name {
  display: block;
  font: 700 15.5px/1.2 var(--font-body);
  letter-spacing: -0.1px;
  color: var(--ink);
}
/* The app's own two labels, from useCompanionIdentity. They are the
   guardrail as much as the tie back to .fdc-leg: whatever the peaked cap
   suggests, the line under it says the thing you are choosing is a voice. */
#flight-day .fdc-pick-role {
  display: block;
  margin-top: 3px;
  font: 700 9px/1 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-label);
}

/* The breathing loop, measured off the app's own 61-frame sequence rather
   than guessed: across 61 frames the base never moves and the silhouette
   rises and settles, 189px to 199px tall in a 200px frame. The still here
   is frame 0 at 193px, so the swell above it is +3.1%. That is a scale
   about the base, which CSS does exactly, for no bytes and with no second
   image to keep in step with the first. Delete this block to stop it. */
@media (prefers-reduced-motion: no-preference) {
  #flight-day .fdc-pick-fig { animation: fdc-breathe 4.6s ease-in-out infinite; }
  #flight-day .fdc-pick-card:last-of-type .fdc-pick-fig { animation-delay: -1.9s; }
}
@keyframes fdc-breathe { 50% { transform: scale(1.03); } }

@media (min-width: 700px) {
  #flight-day .fdc-close { font-size: 15px; margin-top: 26px; }
  #flight-day .fdc-pick { gap: 13px; margin-top: 20px; }
  #flight-day .fdc-pick-card { flex-basis: 178px; padding: 12px 12px 0; }
  #flight-day .fdc-pick-meta { margin: 0 -12px; }
  #flight-day .fdc-pick-fig { height: 110px; }
  #flight-day .fdc-pick-name { font-size: 16.5px; }
  #flight-day .fdc-pick-role { font-size: 9.5px; }
}

/* The breathing loop was pulled on 2026-08-14: at the size these render, 12fps
   read as a stutter rather than a breath, so the stills carry it. If animation
   ever comes back, the <picture> wrapper needs `display: contents` again, or a
   percentage width on the <img> resolves against a zero-width box and the card
   jumps when the bytes land. */


/* ============================================================
   THE FIVE FEARS — rotating voice carousel, 2026-08-16
   Replaced the 2026-08-14 .fdf-grid. Centre card focused, neighbours set back
   so the eye knows where to land and that there is more either side. Card
   anatomy follows #experts so the invented voices and the real advisor read as
   one system. The five cards carry ILLUSTRATED scenes and the advisor's is the
   page's only real face, which is the visual line between the two: the medium
   itself says invented. PROOF.md's composite-voices row keeps it that way (the
   scenes must stay illustration, never photography), with .fv-source and the
   alt text carrying the rest of the disclosure.
   ============================================================ */
#fears .fv-wheel { position: relative; margin-top: 20px; }

/* The fades are the second scroll affordance after the peeking cards. They sit
   above the rail and must not eat clicks. #fears is a .band-white, so these
   must match --card; on the tinted band they were --cream, and using the wrong
   one of the pair draws a visible panel edge down each side. */
#fears .fv-wheel::before,
#fears .fv-wheel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%;
  pointer-events: none; z-index: 2;
}
#fears .fv-wheel::before { left: 0;  background: linear-gradient(to right, var(--card), rgba(255,255,255,0)); }
#fears .fv-wheel::after  { right: 0; background: linear-gradient(to left,  var(--card), rgba(255,255,255,0)); }

#fears .fv-rail {
  list-style: none; margin: 0; display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* half the viewport minus half a card, so the first and last can reach the
     middle. Without this the outer cards can never become the centre one. */
  padding: 6px calc(50% - 155px) 22px;
}
#fears .fv-rail::-webkit-scrollbar { display: none; }
#fears .fv-rail:focus-visible { outline: 2px solid var(--marigold); outline-offset: -4px; border-radius: 10px; }

/* Cream card on a white band, the same way .story-card and .cmp-col do it. */
#fears .fv-card {
  scroll-snap-align: center; flex: 0 0 310px;
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: var(--radius-hero); padding: 10px 10px 22px; text-align: center;
  opacity: .45; transform: scale(.93); transform-origin: 50% 50%;
  transition: opacity .45s var(--motion-ease, ease), transform .45s var(--motion-ease, ease);
}
#fears .fv-card.is-current { opacity: 1; transform: scale(1); box-shadow: var(--shadow-card); }

/* The scene sits inset inside the card. height:auto is load-bearing: the img
   tag carries width/height attributes for layout stability, and without
   height:auto the attribute height wins over aspect-ratio, forcing a tall
   slot that object-fit then crops. That bug shipped in the first mock and
   was caught by measuring the rendered box, not by looking at it. */
#fears .fv-scene {
  width: 100%; height: auto; aspect-ratio: 600/448; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--hairline);
  display: block; margin: 0 0 12px; background: var(--cream);
}
#fears .fv-name { margin: 0; font: 600 21px/1.2 var(--font-display); color: var(--ink); }
#fears .fv-fear { margin: 3px 0 12px; font: 600 13.5px/1.3 var(--font-body); color: var(--coral); }
#fears .fv-story { margin: 0; border: 0; padding: 0 12px; }
#fears .fv-story p {
  margin: 0; text-align: center;
  font: 400 14.5px/1.6 var(--font-body); color: var(--body-soft, var(--muted));
}

#fears .fv-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
#fears .fv-arrow {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hairline);
  background: #fff; color: var(--ink); cursor: pointer;
  transition: background .2s, border-color .2s;
}
#fears .fv-arrow:hover { background: var(--cream); border-color: var(--sand-strong); }
#fears .fv-arrow:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
#fears .fv-dots { display: flex; gap: 7px; align-items: center; }
#fears .fv-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: var(--sand-strong); cursor: pointer;
  transition: background .25s, width .25s, border-radius .25s;
}
#fears .fv-dots button.on { background: var(--marigold); width: 22px; border-radius: 4px; }
#fears .fv-dots button:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }

/* The section's only statement that these people are invented, now that the
   portraits are photographs and no longer say it by themselves. Quiet on
   purpose, but it is the compliance surface. Do not remove it. */
#fears .fv-source {
  margin: 14px auto 0; max-width: 56ch; text-align: center;
  font: 500 11.5px/1.55 var(--font-body); color: var(--label-faint, var(--label));
}
#fears .fv-close {
  margin: 10px auto 0; max-width: 54ch; text-align: center;
  font: 500 13px/1.6 var(--font-body); color: var(--muted);
}

@media (min-width: 760px) {
  #fears .fv-card { flex-basis: 340px; }
  #fears .fv-rail { padding-inline: calc(50% - 170px); }
  #fears .fv-story p { font-size: 15px; }
  #fears .fv-close { font-size: 14px; }
}
/* A carousel that moves itself is a real accessibility problem, not a taste
   one. Under reduced motion the JS never starts the timer, and the card
   transition is dropped so jumping between cards is instant. */
@media (prefers-reduced-motion: reduce) {
  #fears .fv-card { transition: none; }
}