/* ============================================================
   SetCourse — Coming Soon
   Hand-written port of the Candidate A "National Park Editorial"
   landing page. Tokens mirror src/frontend/tailwind.config.js.
   ============================================================ */

/* ────────── Tokens ────────── */
:root {
  --compass:    #1B6B4A;
  --sunrise:    #F59E0B;
  --timber:     #3B2314;
  --sandstone:  #F5F0E8;
  --haze:       #E8E4DC;
  --cloud:      #FFFFFF;
  --charge:     #EAB308;
  --signal:     #EA580C;
  --ink-900:    #140B06;
  --ink-800:    #1F1209;

  --scrim-bottom: rgba(20, 11, 6, 0.75);
  --scrim-top:    rgba(20, 11, 6, 0.65);

  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-brand: 12px;
  --radius-pill: 999px;

  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-elevated: 0 2px 6px rgba(0, 0, 0, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.12);

  --max-w: 1152px;
}

/* ────────── Reset ────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; margin: 0; }

body {
  background: var(--sandstone);
  color: var(--timber);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--timber);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ────────── Layout primitives ────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--compass);
  margin: 0 0 0.75rem 0;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }

.section-title {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.05;
  max-width: 36ch;
}

/* ────────── Buttons ────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 200ms var(--ease-out-soft);
  white-space: nowrap;
}
.btn--lg {
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
}
.btn--sunrise {
  background: var(--sunrise);
  color: var(--timber);
  box-shadow: var(--shadow-card-hover);
}
.btn--sunrise:hover { background: #FCB237; transform: translateY(-1px); }

.btn--glass {
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.03);
}
.btn--glass:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

/* ────────── Mesh gradients (ported verbatim from index.css) ────────── */
.mesh-dawn    { background: radial-gradient(120% 80% at 30% 100%, #F59E0B 0%, #EA580C 35%, #3B2314 75%); }
.mesh-noon    { background: radial-gradient(100% 70% at 50% 0%,   #7FB8A6 0%, #1B6B4A 55%, #0F3D2B 100%); }
.mesh-dusk    { background: radial-gradient(100% 80% at 70% 100%, #EAB308 0%, #EA580C 40%, #3B2314 90%); }
.mesh-sunrise { background: radial-gradient(120% 80% at 40% 90%,  #FCD34D 0%, #F59E0B 30%, #DC2626 70%, #3B2314 100%); }

/* ────────── Film grain (SVG turbulence overlay) ────────── */
.film-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* Bottom scrim under hero copy */
.scrim-bottom {
  background: linear-gradient(to bottom, rgba(20,11,6,0) 0%, var(--scrim-bottom) 100%);
}

/* Top scrim behind the brand — keeps the wordmark legible over bright video frames */
.scrim-top {
  top: 0; bottom: auto;
  height: 28%;
  background: linear-gradient(to bottom, var(--scrim-top) 0%, rgba(20,11,6,0) 100%);
}

/* ────────── HERO ────────── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}

.ambient { position: absolute; inset: 0; overflow: hidden; }
.ambient__mesh,
.ambient__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambient__mesh { animation: drift 24s ease-in-out infinite; }
.ambient__video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--ease-out-soft);
}
.ambient__video.is-active { opacity: 1; }
.ambient__grain { position: absolute; inset: 0; }
.ambient__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66%;
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-12px, -8px, 0); }
}

.nav { position: relative; z-index: 10; }
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.nav__brand img {
  width: 64px; height: 64px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.hero__copy {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 6rem 0 4rem;
}
.hero__inner { max-width: 48rem; }
.display {
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  line-height: 0.95;
  color: #fff;
  margin: 0 0 1.5rem;
}
.display--md {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1;
}
.lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 36rem;
  margin: 0 0 2rem;
}
@media (min-width: 640px) {
  .lede { font-size: 1.25rem; }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__chevron {
  position: relative; z-index: 10;
  display: flex; justify-content: center;
  padding-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  animation: bounce 1.6s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* Reveal animation for hero block */
.reveal { animation: reveal 0.48s var(--ease-out-soft) both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────── HOW IT WORKS — scroll-pinned reveal ────────── */
.howitworks {
  background: var(--sandstone);
  padding: 5rem 0 0;
}
.howitworks__intro { margin-bottom: 3rem; }
.howitworks__intro .eyebrow { color: var(--compass); }

.howitworks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 4rem;
}

.howitworks__media {
  position: relative;
  height: 60vh;
  border-radius: var(--radius-brand);
  overflow: hidden;
  box-shadow: var(--shadow-card-elevated);
  background: var(--haze);
}
.howitworks__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out-soft);
}
.howitworks__figure.is-active { opacity: 1; }
.howitworks__figure img,
.howitworks__figure video,
.howitworks__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.howitworks__figure figcaption {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 11, 6, 0.55);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.howitworks__steps { display: flex; flex-direction: column; gap: 2rem; }
.howitworks__step {
  position: relative;
  padding: 1.5rem 0;
  opacity: 1; /* mobile default — every step is fully readable */
  transition: opacity 400ms var(--ease-out-soft), transform 400ms var(--ease-out-soft);
}
.howitworks__step .eyebrow { color: var(--signal); margin-top: 0.25rem; }
.howitworks__step h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.howitworks__step p { color: rgba(59, 35, 20, 0.85); max-width: 38rem; margin: 0; }
.howitworks__num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--compass);
  margin-bottom: 0.5rem;
  transition: color 400ms var(--ease-out-soft);
}

/* Inline media — visible on mobile only, hidden when the sticky two-column
   layout takes over on desktop. Sits below each step's copy. */
.howitworks__step-media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-brand);
  margin-top: 1.25rem;
  box-shadow: var(--shadow-card-elevated);
}

/* Desktop two-column with sticky media */
@media (min-width: 900px) {
  .howitworks { padding: 6rem 0 4rem; }
  .howitworks__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding-bottom: 6rem;
  }
  .howitworks__media {
    position: sticky;
    top: 12vh;
    height: 76vh;
    align-self: start;
  }
  .howitworks__steps {
    gap: 30vh;
    padding: 12vh 0 30vh;
  }
  .howitworks__step {
    min-height: 50vh;
    opacity: 0.55; /* dim until active — drives the parallax reveal */
  }
  .howitworks__step.is-active { opacity: 1; }
  .howitworks__step:not(.is-active) .howitworks__num { color: rgba(59, 35, 20, 0.5); }

  /* Inline media is desktop-redundant (sticky column shows the same imagery
     plus animated mock cards). Hide the inline copies. */
  .howitworks__step-media { display: none; }
}

/* Mobile — hide the sticky media column entirely; inline media takes over */
@media (max-width: 899px) {
  .howitworks__media { display: none; }
  .howitworks__steps { gap: 1.5rem; padding: 0; }
  .howitworks__step { padding: 1.25rem 0; }
}

/* ────────── FEATURE TILES ────────── */
.features {
  background: var(--sandstone);
  padding: 4rem 0 6rem;
}
.features__intro { max-width: 36rem; margin-bottom: 3rem; }
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .features__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .features__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.card {
  background: var(--cloud);
  border: 1px solid var(--haze);
  border-radius: var(--radius-brand);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms var(--ease-out-soft), transform 300ms var(--ease-out-soft);
}
.card:hover { box-shadow: var(--shadow-card-elevated); transform: translateY(-2px); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out-soft);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--timber);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card__body { padding: 1.5rem; }
.card__body h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.card__body p { color: rgba(59, 35, 20, 0.78); font-size: 0.92rem; margin: 0; line-height: 1.55; }

/* ────────── EMAIL CTA ────────── */
.notify {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 6rem 0;
  isolation: isolate;
}
.notify__bg, .notify__grain {
  position: absolute; inset: 0;
  z-index: -1;
}
/* a11y: dark scrim ensures white text passes contrast across the full
   mesh-sunrise gradient (the bright #FCD34D band would otherwise drop
   placeholder + fineprint below WCAG AA). */
.notify::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 11, 6, 0.05) 0%,
    rgba(20, 11, 6, 0.40) 100%);
  z-index: -1;
  pointer-events: none;
}
.notify__inner { max-width: 38rem; }
.notify .eyebrow { color: rgba(255, 255, 255, 0.85); }
.notify .lede { color: rgba(255, 255, 255, 0.92); margin-bottom: 2rem; }
.notify h2 { color: #fff; margin: 0 0 1rem; }

.notify__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .notify__form { grid-template-columns: 1fr auto; }
  .notify__form .notify__status,
  .notify__form .notify__fineprint { grid-column: 1 / -1; }
}
.notify__form input[type="email"] {
  appearance: none;
  font: inherit;
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 11, 6, 0.32);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  outline: none;
  transition: border-color 200ms, background 200ms;
}
.notify__form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.78); }
.notify__form input[type="email"]:focus {
  border-color: #fff;
  background: rgba(20, 11, 6, 0.45);
}
.notify__form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--timber);
  font-weight: 700;
  box-shadow: var(--shadow-card-elevated);
  transition: transform 200ms var(--ease-out-soft), background 200ms;
}
.notify__form button[type="submit"]:hover:not(:disabled) {
  background: var(--sandstone);
  transform: translateY(-1px);
}
.notify__form button[type="submit"]:disabled { opacity: 0.7; cursor: progress; }

.notify__status {
  margin: 0;
  font-size: 0.92rem;
  min-height: 1.4em;
  color: rgba(255, 255, 255, 0.95);
}
.notify__status.is-error { color: #FFE0DE; }
.notify__fineprint {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.92);
}

.notify__success {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(20, 11, 6, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-brand);
  padding: 1.5rem 1.75rem;
  color: #fff;
}
.notify__success-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--compass);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
  box-shadow: 0 2px 8px rgba(27, 107, 74, 0.4);
}
.notify__success-icon svg { width: 18px; height: 18px; }
.notify__success-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notify__success strong { display: block; font-family: 'Outfit', sans-serif; font-size: 1.25rem; margin-bottom: 0.1rem; }

/* ────────── FOOTER ────────── */
.footer {
  background: var(--sandstone);
  border-top: 1px solid var(--haze);
  padding: 2rem 0;
  font-size: 0.78rem;
  color: rgba(59, 35, 20, 0.72); /* a11y: was 0.55, ~4:1 → 0.72, ~5.6:1 */
}
.footer__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.footer__links { display: flex; gap: 1rem; }
.footer__links a:hover { color: var(--timber); }
@media (min-width: 640px) {
  .footer__row { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ============================================================
   STEP 1 MOCK — Onboarding preferences card
   A self-running 9s loop demonstrating profile setup.
   `--anim-play` is `paused` on inactive figures so off-screen
   animations don't burn CPU; `running` only on the active step.
   ============================================================ */

.howitworks__figure                 { --anim-play: paused; }
.howitworks__figure.is-active       { --anim-play: running; }

.mock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 86%);
  background: var(--cloud);
  border-radius: 14px;
  border: 1px solid rgba(59, 35, 20, 0.06);
  box-shadow:
    0 1px 2px  rgba(0, 0, 0, 0.05),
    0 14px 36px -10px rgba(20, 11, 6, 0.40),
    0 32px 64px -20px rgba(20, 11, 6, 0.45);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--timber);
  overflow: hidden;
  z-index: 2;
}

/* Card chrome — three muted dots + small label */
.mock__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(59, 35, 20, 0.06);
  background: rgba(245, 240, 232, 0.55);
}
.mock__dots { display: inline-flex; gap: 0.32rem; }
.mock__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(59, 35, 20, 0.14);
}
.mock__head-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(59, 35, 20, 0.55);
  margin-left: 0.25rem;
}

/* Body grid */
.mock__body {
  padding: 1rem 1.15rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.mock__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.mock__field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.mock__field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(59, 35, 20, 0.62);
  letter-spacing: 0.02em;
}
.mock__field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mock__field-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--timber);
}
.mock__paw { font-size: 0.85rem; line-height: 1; }

/* ── Vehicle select ── */
.mock__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--sandstone);
  border: 1.5px solid rgba(59, 35, 20, 0.06);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}
.mock__chev { width: 14px; height: 14px; opacity: 0.5; }

/* Pulse the border to compass green when this field "activates" */
.mock__anim-vehicle {
  animation: vehicle-flash 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes vehicle-flash {
  0%, 4%   { border-color: rgba(59, 35, 20, 0.06); box-shadow: none; }
  8%, 14%  { border-color: var(--compass); box-shadow: 0 0 0 3px rgba(27, 107, 74, 0.12); }
  18%, 100%{ border-color: rgba(27, 107, 74, 0.22); box-shadow: none; }
}

/* ── Range slider ── */
.mock__slider {
  position: relative;
  height: 8px;
  background: rgba(59, 35, 20, 0.10);
  border-radius: 999px;
}
.mock__slider-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: linear-gradient(90deg, var(--compass) 0%, #2e8f66 100%);
  border-radius: 999px;
}
.mock__slider-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px; height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  background: var(--cloud);
  border: 2px solid var(--compass);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(20, 11, 6, 0.18);
}
.mock__anim-slider-fill {
  animation: slider-fill 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
.mock__anim-slider-thumb {
  animation: slider-thumb 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes slider-fill {
  0%, 18%  { width: 0%; }
  36%, 90% { width: 78%; }
  96%, 100%{ width: 0%; }
}
@keyframes slider-thumb {
  0%, 18%  { left: 0%;  transform: scale(1); }
  22%      { transform: scale(1.18); }
  36%, 90% { left: 78%; transform: scale(1); }
  96%, 100%{ left: 0%;  transform: scale(1); }
}
.mock__anim-range-value {
  opacity: 0;
  animation: range-value-fade 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes range-value-fade {
  0%, 28%  { opacity: 0; transform: translateY(2px); }
  38%, 92% { opacity: 1; transform: translateY(0); }
  96%, 100%{ opacity: 0; transform: translateY(2px); }
}

/* ── Pet toggle ── */
.mock__toggle {
  position: relative;
  width: 38px; height: 22px;
  background: rgba(59, 35, 20, 0.14);
  border-radius: 999px;
  flex-shrink: 0;
}
.mock__toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--cloud);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20, 11, 6, 0.30);
}
.mock__anim-toggle {
  animation: toggle-bg 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
.mock__anim-toggle-knob {
  animation: toggle-knob 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes toggle-bg {
  0%, 44%  { background: rgba(59, 35, 20, 0.14); }
  50%, 92% { background: var(--compass); }
  96%, 100%{ background: rgba(59, 35, 20, 0.14); }
}
@keyframes toggle-knob {
  0%, 44%  { left: 2px;  }
  50%, 92% { left: 18px; }
  96%, 100%{ left: 2px;  }
}

/* ── Pace chips ── */
.mock__chips {
  position: relative;
  display: flex;
  gap: 0;
  padding: 0.25rem;
  background: var(--sandstone);
  border-radius: 999px;
}
.mock__chip {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.5rem;
  color: rgba(59, 35, 20, 0.55);
  border-radius: 999px;
  transition: color 0.3s var(--ease-out-soft);
}
/* The moving "selected" pill behind the chips */
.mock__chip-pill {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc(33.333% - 0.166rem);
  background: var(--cloud);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(20, 11, 6, 0.14);
  z-index: 0;
}
.mock__anim-chip-pill {
  animation: chip-pill 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes chip-pill {
  0%, 56%  { left: 0.25rem; }
  64%, 92% { left: calc(33.333% + 0.083rem); }
  96%, 100%{ left: 0.25rem; }
}
/* Active chip's text darkens as the pill arrives */
.mock__anim-chip--1 {
  animation: chip1-text 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
.mock__anim-chip--2 {
  animation: chip2-text 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes chip1-text {
  0%, 56%  { color: var(--timber); }
  64%, 100%{ color: rgba(59, 35, 20, 0.55); }
}
@keyframes chip2-text {
  0%, 56%  { color: rgba(59, 35, 20, 0.55); }
  64%, 92% { color: var(--timber); }
  96%, 100%{ color: rgba(59, 35, 20, 0.55); }
}

/* ── Save CTA ── */
.mock__foot {
  padding: 0.5rem 1.15rem 1.15rem;
}
.mock__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--sunrise);
  color: var(--timber);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.30);
  cursor: default;
  pointer-events: none; /* it's a mock */
}
.mock__cta-check {
  width: 16px; height: 16px;
  opacity: 0;
  transform: scale(0.5);
}
.mock__anim-cta {
  animation: cta-press 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
.mock__anim-check {
  animation: cta-check 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes cta-press {
  0%, 72%   { transform: scale(1);    box-shadow: 0 2px 6px  rgba(245, 158, 11, 0.30); }
  76%       { transform: scale(0.97); box-shadow: 0 2px 6px  rgba(245, 158, 11, 0.30); }
  82%, 92%  { transform: scale(1);    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55); }
  96%, 100% { transform: scale(1);    box-shadow: 0 2px 6px  rgba(245, 158, 11, 0.30); }
}
@keyframes cta-check {
  0%, 80%   { opacity: 0; transform: scale(0.5); }
  84%, 92%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.5); }
}

/* Don't crowd the figcaption — push it bottom-left for mock figures */
.howitworks__figure:has(.mock) figcaption {
  top: auto;
  bottom: 1rem;
  left: 1rem;
}

/* Darken the photo backdrop for any figure with a mock card on top, so the
   white card pops. Step 4 has no mock — its video plays at full brightness. */
.howitworks__figure:has(.mock) img,
.howitworks__figure:has(.mock) video {
  filter: brightness(0.55) saturate(0.85);
}

/* ============================================================
   STEP 2 MOCK — Conversation
   User asks → typing indicator → agent reply with three checks.
   ============================================================ */

.mock--chat { width: min(380px, 88%); }

.mock__chat-body {
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat__row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.chat__row--user { justify-content: flex-end; }

.chat__avatar {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--compass);
  color: var(--cloud);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat__bubble {
  max-width: 78%;
  padding: 0.6rem 0.85rem;
  font-size: 0.84rem;
  line-height: 1.45;
  border-radius: 14px;
}
.chat__bubble--user {
  background: var(--timber);
  color: var(--sandstone);
  border-bottom-right-radius: 4px;
}
.chat__bubble--agent {
  background: var(--sandstone);
  color: var(--timber);
  border: 1px solid rgba(59, 35, 20, 0.06);
  border-bottom-left-radius: 4px;
}

/* Stack: typing indicator + bubble share a column. Typing collapses
   (max-height + opacity → 0) just before the bubble fades in. */
.chat__agent-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.75rem;
  background: var(--sandstone);
  border: 1px solid rgba(59, 35, 20, 0.06);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.chat__typing span {
  width: 6px; height: 6px;
  background: rgba(59, 35, 20, 0.45);
  border-radius: 50%;
  animation: typing-dot 1.4s ease-in-out infinite;
  animation-play-state: var(--anim-play);
}
.chat__typing span:nth-child(2) { animation-delay: 0.18s; }
.chat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.chat__intro {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(59, 35, 20, 0.85);
}
.chat__checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.chat__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateX(-6px);
}
.chat__check-icon {
  width: 14px; height: 14px;
  color: var(--compass);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Step 2 timeline (9s) ────────────────────────────────────
   0.0–0.4  idle
   0.6–1.6  user bubble in
   2.0–3.6  typing dots visible
   3.6–4.0  typing collapses
   4.0–4.8  agent bubble fades in
   4.8–5.5  check 1 in
   5.5–6.2  check 2 in
   6.2–6.9  check 3 in
   6.9–7.8  hold
   7.8–8.6  fade out everything
   8.6–9.0  pause → loop
   ──────────────────────────────────────────────────────────── */

.mock__anim-msg-user {
  opacity: 0; transform: translateY(8px);
  animation: msg-user-in 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes msg-user-in {
  0%, 6%   { opacity: 0; transform: translateY(8px); }
  18%, 86% { opacity: 1; transform: translateY(0); }
  96%, 100%{ opacity: 0; transform: translateY(8px); }
}

.mock__anim-typing {
  animation: typing-collapse 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes typing-collapse {
  0%, 20%   { max-height: 0;    opacity: 0; }
  24%, 38%  { max-height: 36px; opacity: 1; }
  42%, 100% { max-height: 0;    opacity: 0; }
}

.mock__anim-agent-bubble {
  opacity: 0; transform: translateY(6px);
  animation: agent-bubble-in 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes agent-bubble-in {
  0%, 42%   { opacity: 0; transform: translateY(6px); }
  50%, 86%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}

.mock__anim-check {
  animation-duration: 9s;
  animation-timing-function: var(--ease-out-soft);
  animation-iteration-count: infinite;
  animation-play-state: var(--anim-play);
}
.mock__anim-check--1 { animation-name: check-in-1; }
.mock__anim-check--2 { animation-name: check-in-2; }
.mock__anim-check--3 { animation-name: check-in-3; }
@keyframes check-in-1 {
  0%, 53%   { opacity: 0; transform: translateX(-6px); }
  60%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-6px); }
}
@keyframes check-in-2 {
  0%, 61%   { opacity: 0; transform: translateX(-6px); }
  68%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-6px); }
}
@keyframes check-in-3 {
  0%, 69%   { opacity: 0; transform: translateX(-6px); }
  76%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-6px); }
}

/* ============================================================
   STEP 3 MOCK — Itinerary
   Hand-drawn SVG route draws itself, pins pop, day rows slide in.
   ============================================================ */

.mock--itinerary { width: min(400px, 88%); }

.mock__head { position: relative; }
.mock__head-stamp {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--compass);
  background: rgba(27, 107, 74, 0.10);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  opacity: 0;
  animation: stamp-in 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes stamp-in {
  0%, 64%   { opacity: 0; transform: scale(0.9); }
  72%, 88%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}

.mock__map-wrap {
  position: relative;
  background: linear-gradient(180deg, #F8F4EC 0%, var(--sandstone) 100%);
  border-bottom: 1px solid rgba(59, 35, 20, 0.06);
  aspect-ratio: 400 / 240;
  overflow: hidden;
}
.mock__map { width: 100%; height: 100%; display: block; }

.mock__topo path {
  fill: none;
  stroke: rgba(59, 35, 20, 0.10);
  stroke-width: 1;
}

/* The route — drawn-in via stroke-dashoffset on a normalized path. */
.mock__route {
  fill: none;
  stroke: var(--compass);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 1px 1px rgba(20, 11, 6, 0.15));
}
.mock__anim-route {
  animation: route-draw 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
@keyframes route-draw {
  0%, 5%    { stroke-dashoffset: 100; }
  35%, 88%  { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 100; }
}

/* Pins — outer halo + inner dot. Animate group via scale around its origin. */
.mock__pin {
  transform-origin: center;
  transform-box: fill-box;
}
.mock__pin-halo {
  fill: var(--compass);
  opacity: 0.18;
}
.mock__pin-dot {
  fill: var(--cloud);
  stroke: var(--compass);
  stroke-width: 2;
}
.mock__pin--end .mock__pin-halo { fill: var(--sunrise); opacity: 0.32; }
.mock__pin--end .mock__pin-dot  { stroke: var(--sunrise); fill: var(--cloud); }

.mock__anim-pin {
  animation-duration: 9s;
  animation-timing-function: var(--ease-out-soft);
  animation-iteration-count: infinite;
  animation-play-state: var(--anim-play);
  opacity: 0;
}
.mock__anim-pin--1 { animation-name: pin-pop-1; }
.mock__anim-pin--2 { animation-name: pin-pop-2; }
.mock__anim-pin--3 { animation-name: pin-pop-3; }
.mock__anim-pin--4 { animation-name: pin-pop-4; }
@keyframes pin-pop-1 {
  0%, 18%   { opacity: 0; transform: translate(60px, 200px) scale(0); }
  24%       { opacity: 1; transform: translate(60px, 200px) scale(1.25); }
  30%, 88%  { opacity: 1; transform: translate(60px, 200px) scale(1); }
  96%, 100% { opacity: 0; transform: translate(60px, 200px) scale(0); }
}
@keyframes pin-pop-2 {
  0%, 24%   { opacity: 0; transform: translate(140px, 158px) scale(0); }
  30%       { opacity: 1; transform: translate(140px, 158px) scale(1.25); }
  36%, 88%  { opacity: 1; transform: translate(140px, 158px) scale(1); }
  96%, 100% { opacity: 0; transform: translate(140px, 158px) scale(0); }
}
@keyframes pin-pop-3 {
  0%, 30%   { opacity: 0; transform: translate(232px, 113px) scale(0); }
  36%       { opacity: 1; transform: translate(232px, 113px) scale(1.25); }
  42%, 88%  { opacity: 1; transform: translate(232px, 113px) scale(1); }
  96%, 100% { opacity: 0; transform: translate(232px, 113px) scale(0); }
}
@keyframes pin-pop-4 {
  0%, 36%   { opacity: 0; transform: translate(340px, 42px) scale(0); }
  42%       { opacity: 1; transform: translate(340px, 42px) scale(1.4); }
  48%, 88%  { opacity: 1; transform: translate(340px, 42px) scale(1); }
  96%, 100% { opacity: 0; transform: translate(340px, 42px) scale(0); }
}

.mock__map-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  fill: rgba(59, 35, 20, 0.65);
  text-anchor: start;
  opacity: 0;
  animation: label-fade 9s var(--ease-out-soft) infinite;
  animation-play-state: var(--anim-play);
}
.mock__map-label--end { text-anchor: end; fill: var(--signal); }
@keyframes label-fade {
  0%, 24%   { opacity: 0; }
  32%, 88%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* Day list — three tight rows, each slides in from the left. */
.mock__days {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mock__day {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(59, 35, 20, 0.06);
  font-size: 0.74rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateX(-10px);
}
.mock__day:last-child { border-bottom: 0; }
.mock__day-num {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--compass);
  font-weight: 700;
  width: 38px;
}
.mock__day-wx {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--sunrise);
}
.mock__day-text {
  color: rgba(59, 35, 20, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.mock__anim-day {
  animation-duration: 9s;
  animation-timing-function: var(--ease-out-soft);
  animation-iteration-count: infinite;
  animation-play-state: var(--anim-play);
}
.mock__anim-day--1 { animation-name: day-in-1; }
.mock__anim-day--2 { animation-name: day-in-2; }
.mock__anim-day--3 { animation-name: day-in-3; }
@keyframes day-in-1 {
  0%, 45%   { opacity: 0; transform: translateX(-10px); }
  52%, 88%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes day-in-2 {
  0%, 53%   { opacity: 0; transform: translateX(-10px); }
  60%, 88%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes day-in-3 {
  0%, 61%   { opacity: 0; transform: translateX(-10px); }
  68%, 88%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-10px); }
}

/* ────────── Accessibility — focus rings + anchor margins ────────── */

/* Anchored CTAs land their target with breathing room above the viewport. */
#how-it-works,
#notify { scroll-margin-top: 4rem; }

/* Sunrise outline reads on both light (sandstone) and dark (hero, notify) backgrounds. */
.btn:focus-visible {
  outline: 3px solid var(--sunrise);
  outline-offset: 2px;
}
.footer__links a:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the notify section the form sits over a sunrise mesh, so a white
   ring reads better than the sunrise one. */
.notify__form input:focus-visible,
.notify__form button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.nav__brand:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ────────── Reduced motion ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ambient__video { display: none; } /* mesh fallback shows through */

  /* Step 1: snap to filled-in state */
  .mock__anim-slider-fill  { width: 78%; }
  .mock__anim-slider-thumb { left: 78%; }
  .mock__anim-toggle       { background: var(--compass); }
  .mock__anim-toggle-knob  { left: 18px; }
  .mock__anim-chip-pill    { left: calc(33.333% + 0.083rem); }
  .mock__anim-range-value  { opacity: 1; }
  .mock__anim-cta          { box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55); }

  /* Step 2: show the resolved conversation */
  .mock__anim-msg-user,
  .mock__anim-agent-bubble,
  .mock__anim-check          { opacity: 1; transform: none; }
  .mock__anim-typing         { display: none; }

  /* Step 3: route fully drawn, pins placed, days listed */
  .mock__anim-route          { stroke-dashoffset: 0; }
  .mock__anim-pin            { opacity: 1; }
  .mock__anim-pin--1         { transform: translate(60px,  200px) scale(1); }
  .mock__anim-pin--2         { transform: translate(140px, 158px) scale(1); }
  .mock__anim-pin--3         { transform: translate(232px, 113px) scale(1); }
  .mock__anim-pin--4         { transform: translate(340px,  42px) scale(1); }
  .mock__map-label,
  .mock__head-stamp,
  .mock__anim-day            { opacity: 1; transform: none; }
}