/* AiO landing page.
 *
 * Brand tokens are the app's own: the launcher already ships #F5B93B and the
 * wordmark's scooter is forest green. Nothing here is shared with the staff
 * panel; this is the public face.
 */

:root {
  --forest: #1e3524;
  --green: #3e6b3a;
  --amber: #f5b93b;
  --cream: #f7f3e8;
  --ink: #14120d;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; }
.h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; }
.h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1.1; }
.h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; }
.h2--dark { color: var(--ink); }

.eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber);
}
.eyebrow--dark { color: #8a6a12; }

.muted { color: rgba(247, 243, 232, 0.72); }
.muted-dark { color: rgba(20, 18, 13, 0.7); }
.lead { font-size: 1.08rem; margin-top: 1.4rem; max-width: 38rem; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: 900px; }
.sec { padding: clamp(4rem, 9vw, 7rem) 0; }
.sec--cream { background: var(--cream); color: var(--ink); }
.sec--green { background: var(--green); }
.sec--forest { background: var(--forest); }

/* ---------- nav ---------- */

.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
}
.nav__brand { display: flex; align-items: center; gap: 0.65rem; }
.nav__mascot { width: 2.2rem; height: 2.2rem; border-radius: 999px; object-fit: cover; }
.nav__wordmark { height: 1.5rem; width: auto; }
.nav__links { display: none; gap: 1.75rem; margin-left: auto; font-size: 0.92rem; color: rgba(247,243,232,0.72); }
.nav__links a:hover { color: var(--cream); }
.nav__signin {
  margin-left: auto; font-size: 0.92rem; font-weight: 600;
  color: rgba(247,243,232,0.82); padding: 0.6rem 0.25rem; white-space: nowrap;
}
.nav__signin:hover { color: var(--cream); }
.nav .cta-app { margin-left: 0.9rem; }
@media (min-width: 880px) {
  .nav__links { display: flex; }
  .nav__signin { margin-left: 1.75rem; }
}

/* ---------- CTA 1: the amber capsule the mascot rides ---------- */

.cta-app {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem 0.6rem 1.2rem; border-radius: 999px;
  background: var(--amber); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 10px 24px -14px rgba(20,18,13,0.8);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease;
}
.cta-app__mascot { width: 1.8rem; height: 1.8rem; border-radius: 999px; object-fit: cover;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
.cta-app:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 18px 30px -16px rgba(20,18,13,0.85); }
.cta-app:hover .cta-app__mascot { transform: translateX(3px) rotate(6deg); }
.cta-app:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.cta-app--lg { margin-top: 2rem; font-size: 1.05rem; padding: 0.75rem 0.8rem 0.75rem 1.5rem; }

/* ---------- CTA 2: the outline that floods green ---------- */

.cta-partner {
  position: relative; display: inline-flex; align-items: center; overflow: hidden;
  margin-top: 2rem; padding: 0.65rem 1.3rem;
  border: 1px solid rgba(247,243,232,0.55); border-radius: 2px;
  font-weight: 600; font-size: 0.95rem;
}
.cta-partner__fill { position: absolute; inset: 0; background: var(--green);
  transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(.4,0,.2,1); }
.cta-partner__label { position: relative; }
.cta-partner:hover .cta-partner__fill, .cta-partner:focus-visible .cta-partner__fill { transform: scaleX(1); }
.cta-partner:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- CTA 3: the rule that draws itself ---------- */

.cta-driver {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 2rem; padding: 0.6rem 0 0.7rem; font-weight: 600; font-size: 0.95rem;
  min-height: 44px;
}
.cta-driver__arrow { transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
.cta-driver__rule { position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left center;
  transition: transform 320ms cubic-bezier(.4,0,.2,1); }
.cta-driver:hover .cta-driver__rule, .cta-driver:focus-visible .cta-driver__rule { transform: scaleX(1); }
.cta-driver:hover .cta-driver__arrow { transform: translateX(5px); }

/* ---------- the journey ---------- */

/* The section is tall; the stage inside it sticks. The extra height IS the
   scrub distance, so a 15s film reads slowly rather than racing past. */
/* svh, not vh: on a phone 100vh means the viewport with the browser chrome
   hidden, so a stage that aligns its copy to the bottom puts the headline under
   the address bar on first paint. svh is the smallest (chrome-visible) viewport,
   which is the one that is actually on screen. vh stays as the fallback. */
.journey { position: relative; height: 420vh; height: 420svh; }
.journey--static { height: auto; }

.journey__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.journey--static .journey__stage { position: relative; height: auto; min-height: 80vh; }

.journey__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 420ms ease;
}
/* Revealed only once a real frame has painted; until then the poster shows. */
.journey__video.is-ready { opacity: 1; }

.journey__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,53,36,0.94) 0%, rgba(30,53,36,0.55) 38%, rgba(30,53,36,0.15) 70%);
}

.journey__copy { position: relative; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem); max-width: 46rem; }
.journey__title { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; margin-top: 0.8rem; }
.journey__body { margin-top: 1.3rem; max-width: 32rem; color: rgba(247,243,232,0.78); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.chips li { padding: 0.3rem 0.8rem; border: 1px solid rgba(247,243,232,0.35);
  border-radius: 999px; font-size: 0.78rem; color: rgba(247,243,232,0.8); }

.journey__hint { position: absolute; right: clamp(1.5rem,5vw,4rem); bottom: 2.2rem;
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,243,232,0.6); }
.journey__hint-rule { width: 2.5rem; height: 1px; background: rgba(247,243,232,0.5); }

/* ---------- services ---------- */

.services { display: grid; gap: 3rem; margin-top: 3rem; }
@media (min-width: 800px) { .services { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.service__index { font-family: var(--display); font-size: 0.8rem; font-weight: 700; color: #8a6a12; }
.service__wordmark { margin-top: 0.4rem; font-family: var(--display); font-size: 0.9rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.service__title { font-size: 1.55rem; line-height: 1.15; margin: 0.6rem 0 0.9rem; }
.proof { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.proof li { padding: 0.28rem 0.7rem; border: 1px solid rgba(20,18,13,0.16);
  border-radius: 999px; font-size: 0.78rem; color: rgba(20,18,13,0.66); }

/* ---------- steps ---------- */

.steps { display: grid; gap: 2.5rem; margin-top: 3.5rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 1.4rem; }
.step__rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(247,243,232,0.28); }
.step__number { font-family: var(--display); font-size: 2.1rem; font-weight: 800; color: var(--amber); line-height: 1; }
.step h3 { margin-top: 0.8rem; font-size: 1.1rem; font-weight: 600; }
.step p { margin-top: 0.5rem; }

/* ---------- the round-trip argument ---------- */

.split { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 0.9fr; } }

.stats { display: grid; grid-template-columns: 1fr; gap: 1.3rem 2rem; margin-top: 2.5rem; max-width: 32rem; }
@media (min-width: 420px) { .stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } }
.stats dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(20,18,13,0.5); }
.stats dd { margin-top: 0.2rem; font-family: var(--display); font-size: 1.02rem; font-weight: 600; }

.plate { margin: 0; padding: 2.5rem; border-radius: 28px; text-align: center;
  background: radial-gradient(circle at 50% 38%, var(--amber), #e0a52c 72%); }
.plate__img { width: 100%; max-width: 290px; margin: 0 auto; border-radius: 24px;
  animation: rise 900ms cubic-bezier(.2,.7,.3,1) both; }
.plate__caption { margin-top: 1.4rem; font-size: 0.85rem; color: rgba(20,18,13,0.62); }

@keyframes rise { from { transform: translateY(14px) scale(.98); } to { transform: none; } }

/* ---------- partners ---------- */

.partners { display: grid; gap: 2rem; }
@media (min-width: 880px) { .partners { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.partner-card { padding: 2rem; border: 1px solid rgba(247,243,232,0.16);
  border-radius: 20px; background: rgba(247,243,232,0.03); }
.partner-card .h3 { margin: 0.9rem 0 1.1rem; }
.ticks { margin-top: 1.6rem; display: grid; gap: 0.7rem; color: rgba(247,243,232,0.72); }
.ticks li { position: relative; padding-left: 1.5rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.6em;
  width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--amber); }

/* ---------- closer ---------- */

.closer { position: relative; overflow: hidden; text-align: center; }
.closer__mascot { position: absolute; top: -2rem; right: -3rem; width: 17rem; opacity: 0.18; pointer-events: none; }
.closer__inner { position: relative; max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; }
.closer .lead { margin-left: auto; margin-right: auto; }
.closer__note { margin-top: 1.2rem; font-size: 0.82rem; color: rgba(247,243,232,0.5); }

/* ---------- footer ---------- */

.footer { background: var(--ink); color: rgba(247,243,232,0.6); padding: 3.5rem 0 2.5rem; font-size: 0.9rem; }
.footer__row { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 700px) { .footer__row { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.footer__mark { height: 2.1rem; width: auto; opacity: 0.9; margin-bottom: 1rem; }
.footer__row p { max-width: 24rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.footer__links a:hover { color: var(--cream); }
.footer__legal { max-width: 1120px; margin: 2.5rem auto 0; padding: 0 1.5rem;
  font-size: 0.75rem; color: rgba(247,243,232,0.38); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}