/*
 * LittleHop landing page. DESIGN.md v3 tokens (source: src/ui/theme.ts).
 * Mobile-first, one column; wider layouts from 720px and 960px. No gradients, no third-party assets.
 */

/* Fonts: the same Quicksand/Nunito files the app bundles, copied into ./fonts by `npm run landing:fonts`.
   local() is tried first; the rounded platform sans takes over if neither is available. */
@font-face { font-family: 'LH Quicksand'; font-weight: 700; font-display: swap;
  src: local('Quicksand Bold'), local('Quicksand-Bold'), url('./fonts/Quicksand_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'LH Nunito'; font-weight: 500; font-display: swap;
  src: local('Nunito Medium'), local('Nunito-Medium'), url('./fonts/Nunito_500Medium.ttf') format('truetype'); }
@font-face { font-family: 'LH Nunito'; font-weight: 700; font-display: swap;
  src: local('Nunito Bold'), local('Nunito-Bold'), url('./fonts/Nunito_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'LH Nunito'; font-weight: 800; font-display: swap;
  src: local('Nunito ExtraBold'), local('Nunito-ExtraBold'), url('./fonts/Nunito_800ExtraBold.ttf') format('truetype'); }

:root {
  --paper: #F5F3F9;
  --panel: #EFECF6;
  --card: #FFFFFF;
  --line: #E6E2EF;
  --line-soft: #EFECF5;
  --ink: #1A1A3A;
  --muted: #67668A;
  --accent: #5B7BE0;
  --accent-deep: #3E5BC6;
  --accent-tint: #ECF0FD;
  --accent-line: #C9D4F6;
  --nap: #EFEBFA;
  --nap-ink: #5A5891;
  --mint: #23835F;
  --mint-tint: #E4F4EC;
  --amber: #A56F0C;
  --amber-tint: #FCF3DD;
  --coral: #C24B47;
  --coral-tint: #FBE9E8;

  --shadow: 0 6px 24px rgba(62, 53, 107, 0.07);
  --shadow-soft: 0 2px 8px rgba(62, 53, 107, 0.05);
  --r-card: 16px;
  --r-inner: 12px;

  --sans: 'LH Nunito', ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --display: 'LH Quicksand', ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.6 var(--sans);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 8.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 5.8vw, 2.35rem); }
h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.accent { color: var(--accent-deep); }

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

/* Focus: always visible for keyboard users. */
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 10;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Header / footer */
.site-header { padding-block: 18px; }
.header-row, .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font: 700 1.3rem/1 var(--display); letter-spacing: -0.02em; }
.wordmark-accent { color: var(--accent); }
.wordmark-small { font-size: 1.05rem; }

/* Shared labels, pills and tags */
.eyebrow, .section-label, .plan-label {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.eyebrow { color: var(--accent-deep); margin-bottom: 14px; }
.section-label { margin-bottom: 10px; }
.pill {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-deep); font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.pill-muted { background: var(--panel); color: var(--muted); }
.tag {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 800;
  line-height: 1.6; white-space: nowrap; vertical-align: 1px;
}
/* Tag text is a shade deeper than the semantic token so small labels keep ≥4.5:1 on their tint. */
.tag-must { background: var(--coral-tint); color: #A0332F; }
.tag-love { background: var(--amber-tint); color: #7C5205; }
.tag-opt { background: var(--panel); color: var(--muted); }

/* CTA: one action, full pill, 52px tall (≥44px tap target). */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: var(--accent-deep); color: #fff; box-shadow: var(--shadow-soft);
  font: 800 1.05rem/1 var(--sans); text-decoration: none;
  transition: background-color 180ms ease-out, transform 180ms ease-out;
}
.cta:hover { background: #3450B4; }
.cta:active { transform: translateY(1px); }

/* 1. Hero */
.hero { display: grid; gap: 36px; padding-top: 20px; padding-bottom: 56px; }
.lede { margin-top: 18px; font-size: 1.08rem; color: var(--muted); max-width: 36em; }
.cta-block { margin-top: 28px; display: grid; gap: 12px; justify-items: start; }
.cta-block .cta { width: 100%; }
.cta-note { font-size: 0.95rem; color: var(--muted); max-width: 30em; }

/* Illustrative plan card: echoes the app's timeline (rail, ringed markers, nap band). */
.plan-card {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 18px 16px 16px; align-self: start;
}
.plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.plan-list { position: relative; }
.row { position: relative; display: grid; grid-template-columns: 44px 18px 1fr; align-items: start; column-gap: 8px; }
.row + .row { margin-top: 10px; }
.plan-list::before { /* rail */
  content: ''; position: absolute; left: 60px; top: 12px; bottom: 16px; width: 2px; background: var(--line);
}
.time { font-size: 0.8rem; font-weight: 800; color: var(--muted); padding-top: 10px; font-variant-numeric: tabular-nums; }
.marker {
  position: relative; z-index: 1; margin-top: 13px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--accent); justify-self: center;
}
.marker-none { visibility: hidden; }
.marker-nap { border-color: var(--nap-ink); }
.marker-skip { border-color: var(--line); border-style: dashed; }
.stop, .nap, .skip { display: grid; gap: 3px; border-radius: var(--r-inner); padding: 9px 12px; min-width: 0; }
.stop { border: 1px solid var(--line); background: var(--card); }
.stop-title, .nap-title, .skip-title { font-weight: 800; font-size: 0.95rem; line-height: 1.35; }
.stop-meta, .nap-meta, .skip-meta { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.stop-meta .tag { margin-right: 4px; }
.row-stop:first-child .stop { border-style: dashed; }
.travel { font-size: 0.82rem; color: var(--muted); padding: 2px 0 2px 2px; line-height: 1.45; }
.nap { background: var(--nap); color: var(--nap-ink); padding-block: 16px; }
.nap .nap-meta { color: var(--nap-ink); }
.skip { border: 1px dashed var(--line); background: var(--paper); }
.skip-title { color: var(--muted); }
.plan-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.plan-caption { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }

/* Bands */
.band { position: relative; padding-block: 56px; background: var(--card); border-block: 1px solid var(--line); }
.band-panel { background: var(--panel); border-color: transparent; }
.split { display: grid; gap: 18px; }
.prose { display: grid; gap: 14px; color: var(--muted); font-size: 1.05rem; max-width: 34em; }
.hops { width: min(320px, 70%); margin: 36px auto 0; overflow: visible; }
.hops path { fill: none; stroke: var(--accent-line); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.hops circle { fill: var(--accent-line); }
.hops .hops-end { fill: var(--accent); }

/* 3. How it works: numbered stops on a rail, not a card grid. */
.how { padding-block: 64px; }
.steps { margin-top: 32px; display: grid; gap: 0; counter-reset: none; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding-bottom: 30px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.step:last-child::before { display: none; }
.step-num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--accent); color: var(--accent-deep);
  font: 700 1.15rem/1 var(--display);
}
.step-body { padding-top: 8px; }
.step-body h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.step-body p { color: var(--muted); max-width: 36em; }

/* 4. Boundaries: visible, never collapsed. */
.bounds { margin-top: 28px; display: grid; gap: 10px; }
.bounds li {
  display: grid; gap: 8px; background: var(--card); border-radius: var(--r-inner); padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.bound-key {
  justify-self: start; padding: 3px 12px; border-radius: 999px; background: var(--nap); color: var(--nap-ink);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.bounds p { color: var(--ink); }

/* 5. Fit */
.fit { display: grid; gap: 20px; padding-block: 64px; }
.fit-yes p { margin-top: 14px; font-size: 1.08rem; color: var(--muted); max-width: 32em; }
.fit-no { border-left: 3px solid var(--line); padding: 4px 0 4px 18px; }
.fit-no h3 { margin-bottom: 8px; }
.fit-no p { color: var(--muted); }

/* 6. FAQ */
.faq { padding-bottom: 64px; }
.faq-list { margin-top: 24px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 4px 20px; }
.faq-item { padding-block: 18px; }
.faq-item + .faq-item { border-top: 1px solid var(--line-soft); }
.faq-item dt { font-weight: 800; font-size: 1.02rem; line-height: 1.4; }
.faq-item dd { margin-top: 6px; color: var(--muted); }

/* 6. Pricing */
.pricing { padding-bottom: 64px; }
.plans { margin-top: 24px; display: grid; gap: 12px; }
.plan { display: grid; gap: 8px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.plan-best { border: 2px solid var(--accent); }
.plan-badge {
  justify-self: start; padding: 3px 12px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-deep);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.plan h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.plan-price { font: 700 1.6rem/1.2 var(--display); color: var(--ink); }
.plan-period { font: 700 0.95rem var(--sans); color: var(--muted); }
.plan p:not(.plan-price) { color: var(--muted); }
.pricing-note { margin-top: 16px; color: var(--muted); max-width: 46em; }
.pricing-note a, .legal a { color: var(--accent-deep); font-weight: 700; }

/* 8. Close */
.close { padding-bottom: 72px; }
.close-card {
  display: grid; gap: 16px; justify-items: start; background: var(--accent-tint);
  border: 1px solid var(--accent-line); border-radius: var(--r-card); padding: 32px 22px;
}
.close-card p { color: var(--muted); font-size: 1.05rem; max-width: 34em; }
.close-card .cta { width: 100%; margin-top: 6px; }

.site-footer { border-top: 1px solid var(--line); padding-block: 24px 36px; }
.footer-row { flex-wrap: wrap; }
.footer-note { font-size: 0.88rem; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; margin-top: 10px; }
.footer-links a { color: var(--muted); font-size: 0.9rem; font-weight: 700; padding-block: 10px; }
.footer-links a:hover { color: var(--accent-deep); }

/* Legal pages */
.legal { padding-block: 40px 64px; max-width: 46em; }
.legal h1 { font-family: var(--display); font-size: 2rem; line-height: 1.15; margin-bottom: 6px; }
.legal h2 { font-family: var(--display); font-size: 1.2rem; margin-top: 28px; margin-bottom: 8px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; }
.legal .updated { font-size: 0.9rem; }

/* ≥720px: roomier gutters, inline CTAs, side-by-side split sections. */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  .cta-block .cta, .close-card .cta { width: auto; }
  .split { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .bounds { grid-template-columns: 1fr 1fr; }
  .bounds li:last-child { grid-column: 1 / -1; }
  .fit { grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
  .faq-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 8px 32px; }
  .faq-item + .faq-item { border-top: 0; }
  .faq-item { border-top: 1px solid var(--line-soft); }
  .faq-item:nth-child(-n+2) { border-top: 0; }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .close-card { padding: 48px; justify-items: center; text-align: center; }
  .close-card p { margin-inline: auto; }
}

/* ≥960px: hero text beside the example day. */
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding-top: 40px; padding-bottom: 88px; }
  .plan-card { padding: 22px 20px 18px; transform: rotate(0.6deg); }
  .how { display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: 64px; }
  .how .section-label, .how h2 { grid-column: 1; }
  .how .steps { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .band, .how, .fit { padding-block: 88px; }
}