/*
 * The homepage only. The legal pages keep style.css, which App Review and the
 * Play policy pages have already seen - nothing here can change them.
 *
 * The app's own typeface, served from this site rather than a font CDN: the
 * privacy policy promises no third-party requests, and a page that loads
 * Google Fonts would quietly send every visitor's address to Google.
 */
@font-face {
  font-family: "Jakarta";
  src: url("fonts/PlusJakartaSans_500Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("fonts/PlusJakartaSans_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("fonts/PlusJakartaSans_800ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* The navy, blue and gold of the store artwork; the hero keeps them in dark
   mode too, everything below it follows the system. */
:root {
  --navy: #0f172a;
  --navy-2: #13233f;
  --navy-3: #1e3a8a;
  --gold: #fbbf24;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --green: #047857;
  --bg: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --shadow: 0 30px 80px rgba(15, 23, 42, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #111a2e;
    --ink: #e2e8f0;
    --muted: #a3b1c6;
    --faint: #64748b;
    --line: #1e293b;
    --blue: #60a5fa;
    --blue-soft: rgba(96, 165, 250, 0.12);
    --green: #6ee7b7;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 17px/1.6 "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* height: auto - the tags carry width and height so the layout does not jump
   while images load, and without it CSS widths left the tag height in place. */
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
.em { color: var(--gold); font-style: normal; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(37, 99, 235, 0.35), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
}
.route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; }
.nav-links a:hover { color: #fff; }
.nav-links .nav-cta {
  color: var(--navy);
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
}
@media (max-width: 640px) { .nav-links a:not(.nav-cta) { display: none; } }

.hero-grid {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 40px 0 0;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; padding: 56px 0 0; }
}
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 18px;
}
.hero h1 { font-size: clamp(3rem, 8vw, 5.4rem); line-height: 0.98; letter-spacing: -0.035em; }
.lede {
  margin-top: 22px;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: #cbd5e1;
  max-width: 34rem;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.pills li {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pills li::before { content: "✓ "; color: var(--gold); }

/* The official badges, unaltered, as Apple's and Google's guidelines require
   - served from this site, so showing them contacts neither company. Both at
   a 54px visible height. Google's PNG carries its own clear space, 41px of
   250 on every side: the image is drawn larger and the link clips that
   transparent margin, so the visible badges line up and the clickable area
   is the badge itself. */
.badge-link {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  transition: transform 0.15s ease;
}
.badge-link:hover { transform: translateY(-2px); }
.badge-apple img { height: 54px; width: auto; }
.badge-play { height: 54px; overflow: hidden; }
.badge-play img { height: 80px; width: auto; margin: -13px; }

/* Store buttons. Play shows "coming" until stores.js says it is live; until
   then there is no Google Play badge at all - it must link to a real listing. */
.stores { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 30px; }
.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 190px;
  min-height: 54px;
  padding: 8px 20px;
  border-radius: 14px;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.8; }
.store span { font-size: 1.15rem; font-weight: 800; }
/* Until Play is live: the Google Play badge, greyed out, with a "coming"
   tag, and not a link - there is no listing to open yet. Google's guidelines
   ask for the badge unaltered and only for apps live on Play; showing it
   greyed before launch was a deliberate choice (2026-11-02), and it is gone
   the day playLive turns on. Clipped like .badge-play, so the visible badge
   matches the App Store one. */
.badge-soon { display: none; cursor: default; }
.badge-clip { display: block; height: 54px; overflow: hidden; border-radius: 9px; line-height: 0; }
.badge-clip img { height: 80px; width: auto; margin: -13px; filter: grayscale(1); opacity: 0.45; }
/* A caption under the badge, in the flow: on top it covered "GET IT ON", and
   floated below it sat in the margin above the pills and crowded them. The
   row aligns badge tops, so the caption only adds height below. */
.soon-tag {
  display: block;
  margin-top: 7px;
  text-align: center;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.play-soon .badge-play { display: none; }
.play-soon .badge-soon { display: inline-block; }

/* Wording that changes on Play launch day, with the same switch. */
.when-live { display: none; }
html:not(.play-soon) .when-live { display: inline; }
html:not(.play-soon) .when-soon { display: none; }

/* Three phones, fanned; the itinerary in front. */
/* Set low enough that all three run off the bottom of the hero on purpose,
   like the App Store header banner; level with its edge it looked cut off. */
.hero-phones {
  position: relative;
  height: 540px;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
}
.hero-phones .phone { position: absolute; width: 250px; }
.hero-phones .p-left { left: 0; top: 110px; transform: rotate(-8deg); }
.hero-phones .p-right { right: 0; top: 110px; transform: rotate(8deg); }
.hero-phones .p-center { left: 50%; top: 40px; width: 270px; transform: translateX(-50%); z-index: 2; }
@media (max-width: 560px) {
  .hero-phones { height: 440px; }
  .hero-phones .phone { width: 180px; }
  .hero-phones .p-center { width: 220px; top: 30px; }
  .hero-phones .p-left, .hero-phones .p-right { top: 100px; }
}

.phone {
  padding: 9px;
  border-radius: 40px;
  background: #020617;
  box-shadow: 0 0 0 1.5px #334155, 0 40px 90px rgba(0, 0, 0, 0.45);
}
.phone img { width: 100%; border-radius: 31px; }

/* --------------------------------------------------------------- sections */
section { padding: 96px 0; }
.section-head { max-width: 46rem; margin-bottom: 48px; }
.kicker {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
.section-head p { margin-top: 16px; color: var(--muted); font-size: 1.1rem; }

/* Offline band */
.offline { background: var(--surface); border-block: 1px solid var(--line); }
.moments { display: grid; gap: 16px; }
@media (min-width: 800px) { .moments { grid-template-columns: repeat(3, 1fr); } }
.moment {
  padding: 26px;
  border-radius: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.moment .where {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.moment .where i {
  font-style: normal;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
}
.moment h3 { font-size: 1.35rem; margin-top: 14px; }
.moment p { margin-top: 8px; color: var(--muted); }
.signal {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--green);
}

/* Feature rows */
.feature {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
}
@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 72px; }
  .feature.flip .feature-media { order: 2; }
}
.feature-media { display: flex; justify-content: center; }
.feature-media .phone { width: min(300px, 78vw); box-shadow: 0 0 0 1.5px #1e293b, var(--shadow); }
.feature h3 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.feature p { margin-top: 16px; color: var(--muted); font-size: 1.08rem; max-width: 30rem; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-2px);
}
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  vertical-align: 2px;
}
.tag-now { color: #047857; background: #ecfdf5; }
.tag-next { color: #1d4ed8; background: #eff6ff; }

/* No account */
.code-band {
  color: #fff;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
}
.code-band .kicker { color: #93c5fd; }
.code-band .section-head p { color: #cbd5e1; }
.steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  padding: 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
}
.step h3 { font-size: 1.3rem; margin-top: 16px; }
.step p { margin-top: 8px; color: #cbd5e1; }
/* A code-shaped placeholder, never a real one: a code is a trip's only key. */
.code {
  display: inline-flex;
  gap: 6px;
  margin-top: 14px;
}
.code b {
  width: 26px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold);
}

/* Pricing */
.plans { display: grid; gap: 16px; }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.plan.best { border: 2px solid var(--gold); box-shadow: var(--shadow); }
.plan .badge {
  position: absolute;
  top: -13px;
  left: 30px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
}
.plan h3 { font-size: 1.25rem; }
.price { margin-top: 14px; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; }
.price small { font-size: 0.95rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.plan p { margin-top: 12px; color: var(--muted); }
.plan .ticks { margin-top: 18px; }
.fine { margin-top: 22px; color: var(--muted); font-size: 0.92rem; }
.operator {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--blue-soft);
  color: var(--ink);
}
.operator strong { font-weight: 800; }

/* Privacy */
.privacy { background: var(--surface); border-block: 1px solid var(--line); }
.privacy-grid { display: grid; gap: 16px; }
@media (min-width: 800px) { .privacy-grid { grid-template-columns: repeat(3, 1fr); } }
.privacy-grid div { padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); }
.privacy-grid h3 { font-size: 1.15rem; }
.privacy-grid p { margin-top: 8px; color: var(--muted); }

/* FAQ */
.faq { max-width: 52rem; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 1.12rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 12px; color: var(--muted); }

/* Closing call */
.closing { text-align: center; padding: 110px 0; }
.closing h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
.closing p { margin: 18px auto 0; color: #cbd5e1; max-width: 32rem; font-size: 1.1rem; }
.closing .stores { justify-content: center; }

footer {
  padding: 34px 0 48px;
  color: var(--muted);
  font-size: 0.92rem;
}
.foot { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* Motion: content is visible without JavaScript, and still for anyone who
   has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-phones { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-phones { animation-delay: 0.12s; }
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}