/* The landing page. The other pages use style.css; both carry the app's "Trail blaze" tokens (app/src/theme.ts, docs/redesign-trail-blaze.md). */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-latin-700-normal.woff2) format("woff2"); }

:root {
  /* Accents: the same in both themes, as in the app. */
  --spruce: #12302A; --blaze: #FFC93C; --blaze-dark: #D9A100; --moss: #2E9B5F; --deep: #1B5E4B; --deep-edge: #0F3D31;
  /* Neutrals: light. */
  --fog: #F2F5EF; --fog-dark: #E4EADF; --paper: #FFFFFF; --hair: #CBD6C8; --ink: #12302A; --ink-soft: #4D655B; --link: #1F7A47;
  --contours: url(/contours-light.svg);
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --rail: 52px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fog: #0E1F1A; --fog-dark: #1E3A32; --paper: #16302A; --hair: #264239; --ink: #EAF2EC; --ink-soft: #B5C6BC; --link: #6FD49A; --contours: url(/contours-dark.svg); }
}
@media (min-width: 53.75em) { :root { --rail: 120px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fog); color: var(--ink); font: 1.125rem/1.6 var(--body); font-size-adjust: from-font; }

/* Pages cross-fade into each other where the browser can (a progressive enhancement; others just navigate). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* Skip link: hidden until a keyboard user tabs to it. */
.skip { position: absolute; left: 12px; top: -100px; z-index: 10; background: var(--blaze); color: var(--spruce); font-weight: 700; padding: 10px 16px; border-radius: 12px; }
.skip:focus-visible { top: 12px; }
main:focus { outline: none; }

a { color: var(--link); }
:focus-visible { outline: 3px solid var(--blaze); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---- hero: the app's welcome screen (spruce, contour lines, Walker waving); the one yellow thing is the status badge ---- */
.hero { background: var(--spruce) url(/contours-spruce.svg) right top / min(1100px, 140%) auto no-repeat; color: #EAF2EC; padding-bottom: 72px; overflow: hidden; }
.hero a { color: #EAF2EC; }
.bar { display: flex; align-items: center; gap: 12px; padding: 24px 0 0; }
.bar img { width: 44px; height: 44px; border-radius: 12px; }
.bar .name { font: 700 1.375rem/1 var(--logo); text-decoration: none; }
.bar nav { margin-left: auto; display: flex; gap: 20px; font-size: 1rem; }
.bar nav a { text-decoration: none; font-weight: 700; padding: 4px 0; border-bottom: 3px solid transparent; }
.bar nav a:hover { border-bottom-color: var(--blaze); }
.hero-grid { display: grid; gap: 48px; padding-top: 40px; align-items: center; }
@media (min-width: 53.75em) { .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding-top: 56px; } }
h1 { font-size: clamp(3rem, 0.5rem + 10.5vw, 5.9rem); line-height: 0.95; letter-spacing: -0.035em; }
h1 span { display: block; }
.lead { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.35rem); max-width: 30em; margin: 28px 0 24px; color: #B5C6BC; }
.status { display: inline-flex; align-items: center; gap: 10px; background: var(--blaze); color: var(--spruce); font-weight: 700; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 1rem; }
.status i { width: 12px; height: 12px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 4px rgba(46, 155, 95, 0.25); }
.hero-art { position: relative; justify-self: center; padding: 8px 0 0 64px; }
.hero-art .walker { position: absolute; left: -12px; bottom: -8px; width: 112px; z-index: 2; }
@media (min-width: 53.75em) { .hero-art { padding-left: 0; } .hero-art .walker { left: -150px; bottom: -14px; width: 168px; } }

/* ---- phones: real screenshots of the app (light or dark, following the page), in a plain spruce frame ---- */
.phone { width: 250px; flex: none; background: #0A1612; border-radius: 40px; padding: 8px; box-shadow: 0 0 0 1.5px var(--hair), 0 18px 40px -18px rgba(18, 48, 42, 0.45); }
.phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.hero .phone { box-shadow: 0 0 0 1.5px #1E4A3E, 0 24px 48px -20px rgba(0, 0, 0, 0.6); }

/* ---- the walk: a trail down the left, one stop per feature, Walker walking it as you scroll ---- */
main { background: var(--contours) right top / min(1100px, 140%) auto no-repeat; }
.stops { position: relative; padding: 24px 0 0; }
.walker-track { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: var(--rail); pointer-events: none; }
.walker-stick { position: sticky; top: 38vh; display: flex; justify-content: center; }
.walker-stick svg { width: calc(var(--rail) - 8px); max-width: 84px; overflow: visible; }
.stop { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); padding: 56px 0; }
.rail { position: relative; }
.rail::before { content: ""; position: absolute; left: 50%; top: -56px; bottom: -56px; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(to bottom, var(--hair) 0 10px, transparent 10px 22px); }
.stop:first-child .rail::before { top: 0; }
.stops-last .stop .rail::before { top: -24px; bottom: 56px; }
/* The trail's waymark: the app's blaze, a small upright rounded yellow mark. */
.rail::after { content: ""; position: absolute; left: 50%; top: 10px; width: 14px; height: 30px; margin-left: -7px; border-radius: 6px; background: var(--blaze); box-shadow: 0 0 0 5px var(--fog); z-index: 1; }
.stop-body { display: grid; gap: 36px; align-items: center; min-width: 0; }
@media (min-width: 53.75em) { .stop-body { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; } .stop:nth-of-type(even) .stop-body { grid-template-columns: auto minmax(0, 1fr); } .stop:nth-of-type(even) .stop-body > .phone { order: -1; } }
.stop h2, .collect h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 3.6rem); line-height: 1; margin-bottom: 14px; }
.stop p { max-width: 31em; color: var(--ink-soft); }
.stop strong { color: var(--ink); }
.stop .copy { min-width: 0; }
.stop .phone { justify-self: center; }
/* The phones are 250px wide; on the narrowest screens (under 350px) they shrink a little so nothing scrolls sideways. */
@media (max-width: 21.875em) { .stop .phone { zoom: 0.9; } }

/* ---- collect: the app's deep green card, full width ---- */
.collect { background: var(--deep); color: #fff; padding: 72px 0; }
.collect .wrap { display: grid; gap: 40px; justify-items: start; }
@media (min-width: 53.75em) { .collect .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; } }
.collect .phone { justify-self: center; box-shadow: 0 0 0 1.5px var(--deep-edge), 0 24px 48px -20px rgba(0, 0, 0, 0.5); }
.collect p { max-width: 30em; color: #D4E8DE; }

/* ---- what stays private, and the contact band ---- */
.private { background: var(--spruce); color: #EAF2EC; padding: 72px 0 40px; border-top: 1.5px solid var(--hair); }
.private h2 { font-size: clamp(2rem, 1rem + 4vw, 3.2rem); line-height: 1.05; max-width: 14em; margin-bottom: 36px; }
.facts { display: grid; gap: 28px; margin-bottom: 56px; }
@media (min-width: 53.75em) { .facts { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.facts h3 { font-size: 1.375rem; margin-bottom: 8px; color: var(--blaze); }
.facts p { color: #B5C6BC; margin: 0; }
.private a { color: var(--blaze); }
.contact { border-top: 1.5px solid #1E4A3E; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 1rem; color: #B5C6BC; }
.contact a { color: #EAF2EC; }

/* ---- Walker: a short hello in the hero, then still; legs move only while the page scrolls ---- */
.walker-stick svg .leg { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .walker { animation: bob 2.4s ease-in-out 2; }
  @keyframes bob { 50% { transform: translateY(-6px); } }
  @supports (animation-timeline: scroll()) {
    .walker-stick svg .leg { animation: stride 1s linear infinite alternate; animation-timeline: scroll(root block); animation-iteration-count: 44; }
    .walker-stick svg .leg.l { transform-origin: 168px 370px; }
    .walker-stick svg .leg.r { transform-origin: 232px 370px; animation-direction: alternate-reverse; }
    .walker-stick svg { animation: rock 1s ease-in-out infinite alternate; animation-timeline: scroll(root block); animation-iteration-count: 44; }
    @keyframes stride { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
    @keyframes rock { from { transform: translateY(0); } to { transform: translateY(-4px); } }
  }
}