/* ============================================================
   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 dotted trail draws behind it and fades. The
   sky never moves, so there is nothing to snap back. One pass per 35s. */
.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; }
}
@keyframes rtf-cruise-trail {
  0% { width: 0; opacity: 1; }
  60% { width: calc(100% + 36px); opacity: 1; }
  70% { opacity: 0; }
  99.9% { width: calc(100% + 36px); opacity: 0; }
  100% { width: 0; opacity: 0; }
}
.cruise-trail { position: absolute; left: -16px; top: 8px; height: 0; width: 0; border-top: 2.5px dotted rgba(90, 95, 120, 0.5); animation: rtf-cruise-trail 35s linear infinite; }
.cruise-plane { position: absolute; top: 0; left: -60px; width: 44px; animation: rtf-cruise-plane 35s linear infinite; }
.cruise-plane img { width: 44px; 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: 40px 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); }
.ph-greeting { font: 500 22px/1.1 var(--font-display); letter-spacing: -0.3px; margin-bottom: 10px; }
.ph-card { background: var(--card); border: 1px solid var(--sand); border-radius: 18px; padding: 10px 13px 11px; margin-bottom: 10px; }
.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: 8px 10px; margin-bottom: 7px; }
.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; }
  .cruise-plane, .cruise-plane img { width: 36px; }
}

@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; }
  .hero-phone {
    display: flex; justify-content: center; align-items: flex-start;
    width: 100%; margin-top: auto; padding-top: 30px;
    height: clamp(200px, 40svh, 380px); overflow: hidden; flex: none;
  }
  .hero-phone .phone { align-self: flex-start; margin-bottom: 0; }
}

/* ---------- 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; }

@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; } }

/* ---------- 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, no trail */
  .cruise-plane { animation: none !important; left: 14%; opacity: 1; }
  .cruise-trail { animation: none !important; width: 0; opacity: 0; }
  .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%; }
}