/*
 * Home page only. Tokens come from styles.css (which mirrors the app's
 * theme); nothing here invents a colour. Layout follows Flighty's: a hero,
 * then one sticky phone the feature steps scroll past.
 */

:root {
  /* The phone fits the viewport's height on short laptops. Screens are
     1206×2622, so the screen is 2.174× as tall as it is wide. */
  --phone-w: min(300px, calc((100svh - 140px) / 2.25));
  --bezel: 10px;
  --phone-h: calc(var(--phone-w) * 2.174 + var(--bezel) * 2);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --page: 1180px;
}

.home-page {
  background: var(--background);
}

.wrap-wide {
  max-width: var(--page);
}

/* ---------- nav ----------
 * At the top it's a plain full-width bar. Once the page scrolls, home.js adds
 * .is-scrolled and the same element shrinks into a floating pill, the
 * wordmark folding away to leave the icon (Flighty's header). Without JS it
 * just stays in the flow at the top. */

.nav {
  height: 80px; /* holds the bar's place once it's fixed */
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--xxl);
  width: min(var(--page), 100%);
  height: 80px;
  margin: 0 auto;
  padding: 0 var(--lg);
  border: 1px solid transparent;
  border-radius: 999px;
}
@media (min-width: 480px) {
  .nav-inner {
    padding: 0 var(--xxl);
  }
}
.js .nav-inner {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.js .nav.is-scrolled .nav-inner {
  --pill-w: 540px;
  width: min(var(--pill-w), calc(100% - 32px));
  height: 56px;
  padding: 0 8px 0 10px;
  gap: var(--lg);
  transform: translate(-50%, 12px);
  background: rgb(31 31 31 / 0.82);
  border-color: var(--border);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@media (max-width: 719px) {
  .js .nav.is-scrolled .nav-inner {
    --pill-w: 220px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sm);
  color: var(--content);
  text-decoration: none;
  font-size: 20px;
}
.brand img {
  border-radius: 8px;
}
.brand .display {
  max-width: 5em;
  overflow: hidden;
  white-space: nowrap;
}
.nav.is-scrolled .brand {
  gap: 0;
}
.nav.is-scrolled .brand .display {
  max-width: 0;
  opacity: 0;
}
.nav nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.nav-links {
  display: flex;
  gap: var(--xxl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--content-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--content);
}
.nav-cta {
  margin-left: auto;
  padding: var(--sm) var(--lg);
  border-radius: 999px;
  background: var(--content);
  color: var(--background);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 719px) {
  .nav nav {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-inner {
    transition:
      width 450ms var(--ease),
      height 450ms var(--ease),
      padding 450ms var(--ease),
      gap 450ms var(--ease),
      transform 450ms var(--ease),
      background-color 300ms var(--ease),
      border-color 300ms var(--ease),
      box-shadow 300ms var(--ease);
  }
  .brand,
  .brand .display {
    transition: gap 450ms var(--ease), max-width 450ms var(--ease),
      opacity 250ms var(--ease);
  }
}

/* ---------- hero ---------- */

.hero {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px var(--lg) 72px;
  text-align: center;
}
@media (min-width: 720px) {
  .hero {
    padding-top: 96px;
  }
}
.kicker,
.chapter {
  margin: 0;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  margin: var(--lg) auto 0;
  max-width: 14em;
  font-size: clamp(34px, 6.4vw, 68px);
  line-height: 1.05;
}
.hero-pitch {
  margin: var(--xxl) auto 0;
  max-width: 34em;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--content-secondary);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--md);
  margin-top: 32px;
}
/* The official badges, at 44px tall (the PNGs are 118px, so sharp on retina). */
.stores img {
  display: block;
  height: 44px;
  width: auto;
}
.stores-note,
.closing .stores-note {
  margin: var(--sm) 0 0;
  font-size: 13px;
  color: var(--content-muted);
}

.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--md) 32px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  font-size: 15px;
  color: var(--content-muted);
}
.proof-nr {
  display: flex;
  align-items: center;
  gap: var(--sm);
}
.proof-nr img {
  width: 130px;
  height: auto;
  /* The logo's own navy disappears on this background; reversed to white. */
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.eyebrow {
  font-family: var(--display);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--content-muted);
}

/* ---------- tour ---------- */

.tour {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--lg);
}

/* Narrow first: each step is caption, its own screenshot, then its cards. */
.tour-track {
  display: none;
}
.step {
  padding: 48px 0;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--xxl);
}
.step-copy {
  max-width: 30em;
}
.step h2 {
  margin: var(--md) 0 0;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.12;
}
.step-copy > p:last-child {
  margin: var(--lg) 0 0;
  color: var(--content-secondary);
  font-size: 18px;
}
.step-shot {
  width: min(280px, 76vw);
  border-radius: 36px;
  border: var(--bezel) solid #050505;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 30px 60px rgb(0 0 0 / 0.5);
  background: #050505;
}
.cards {
  display: grid;
  gap: var(--md);
  width: min(360px, 100%);
  text-align: left;
}

/* The phone itself, shared by both pinned layouts. */
.phone {
  width: calc(var(--phone-w) + var(--bezel) * 2);
  height: var(--phone-h);
  margin: 0 auto;
  padding: var(--bezel);
  border-radius: calc(var(--phone-w) * 0.15);
  background: #050505;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.16),
    0 0 0 4px #1b1b1b,
    0 40px 80px rgb(0 0 0 / 0.6),
    0 0 120px rgb(83 157 255 / 0.12);
}
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--phone-w) * 0.13);
  overflow: hidden;
  background: var(--background);
}
.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.screen.is-active {
  opacity: 1;
}

/* Wide: the sticky phone sits in the middle column and steps scroll past. */
@media (min-width: 1000px) {
  .tour-track {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Line the phone up with the first and last steps' centred content. */
    padding: calc(50svh - var(--phone-h) / 2) 0;
  }
  .phone-stage {
    position: sticky;
    top: calc(50svh - var(--phone-h) / 2);
  }

  .step {
    min-height: 100svh;
    grid-template-columns: 1fr calc(var(--phone-w) + 112px) 1fr;
    align-items: center;
    justify-items: stretch;
    text-align: left;
    gap: 0;
    padding: 0;
  }
  .step-shot {
    display: none;
  }
  .step-copy {
    grid-column: 1;
    justify-self: end;
    max-width: 380px;
  }
  .cards {
    grid-column: 3;
    justify-self: start;
    width: 340px;
  }
  /* Offset the cards a little, so they read as floating rather than listed. */
  .cards > :nth-child(2) {
    margin-left: 32px;
  }
}

/* Phone: the phone pins to the top in an opaque band (clear of the floating
   header), and each step's caption scrolls up beneath it, fading in as it
   reaches the line just under the band. home.js reads the band's height to
   place that line. The cards don't fit here, so they're left out. Needs JS,
   and a screen tall enough for a readable phone plus a caption; anything
   shorter keeps the stacked screenshots above. */
@media (max-width: 999px) and (min-height: 600px) {
  .js .tour {
    --phone-w: clamp(150px, calc((100svh - 346px) / 2.174), 240px);
    /* Redeclared: a var() resolves where it's declared, so :root's
       --phone-h would still be sized for the desktop phone. */
    --phone-h: calc(var(--phone-w) * 2.174 + var(--bezel) * 2);
    --stage-top: 92px; /* the header pill ends at 68px; leave a clear gap */
    --stage-h: calc(var(--stage-top) + var(--phone-h) + 16px);
    padding-top: var(--stage-h);
    padding-bottom: 25svh;
  }
  .js .tour-track {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  /* The glow lives on the band, not the phone: a box-shadow would be cut flat
     at the band's bottom edge. `closest-side` fades it out exactly at the
     band's edges, so it meets the fade below with no seam. */
  .js .phone-stage {
    position: sticky;
    top: 0;
    padding: var(--stage-top) 0 16px;
    background:
      radial-gradient(ellipse closest-side at 50% 55%, rgb(83 157 255 / 0.14), transparent),
      var(--background);
  }
  /* Captions fade out as they slide under the band rather than being cut. */
  .js .phone-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40px;
    background: linear-gradient(var(--background), transparent);
  }
  .js .phone {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.16),
      0 0 0 3px #1b1b1b;
  }
  .js .step {
    position: relative;
    z-index: 1;
    min-height: 60svh;
    align-content: start;
    padding: 40px 0 0;
    gap: 0;
  }
  .js .step-shot,
  .js .cards {
    display: none;
  }
  .js .step h2 {
    margin-top: var(--sm);
    font-size: 22px;
  }
  .js .step-copy > p:last-child {
    margin-top: var(--sm);
    font-size: 16px;
  }
  .js .step-copy {
    opacity: 0.25;
  }
  .js .step.is-active .step-copy {
    opacity: 1;
  }
}

/* ---------- the floating cards ---------- */

.notif,
.fact,
.stats {
  border-radius: 20px;
  background: rgb(36 36 36 / 0.88);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.notif {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: var(--md);
  padding: var(--md) var(--lg) var(--md) var(--md);
}
.notif img {
  border-radius: 9px;
}
.notif p {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--content-secondary);
}
.notif .notif-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sm);
  color: var(--content);
}
.notif-head strong {
  font-weight: 600;
}
.notif-head span {
  flex: none;
  font-size: 13px;
  color: var(--content-muted);
}

.fact {
  display: flex;
  align-items: center;
  gap: var(--md);
  padding: var(--md) var(--lg);
}
.fact p {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--content-secondary);
}
.fact .fact-title {
  font-weight: 600;
  color: var(--content);
}
.fact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-surface);
  color: var(--accent);
}
.fact-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fact-times .fact-title {
  margin-bottom: var(--xs);
}
.times {
  font-family: var(--display);
  font-size: 22px !important;
  color: var(--content) !important;
  white-space: nowrap;
}
.times s {
  color: var(--content-muted);
  text-decoration: none;
}
.times strong {
  font-weight: 400;
}
.times .late {
  color: var(--delayed);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  padding: var(--md) var(--lg);
}
.stats p {
  margin: 0;
}
.stat-label {
  font-family: var(--display);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--content-muted);
}
.stat {
  font-size: 22px;
}
.stat.on {
  color: var(--on-time);
}

/* ---------- tour bar ---------- */

.tour-bar {
  position: fixed;
  left: 50%;
  bottom: var(--xl);
  z-index: 10;
  display: flex;
  gap: var(--xs);
  padding: 6px;
  border-radius: 999px;
  background: rgb(20 20 20 / 0.86);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform: translate(-50%, 0);
}
/* Without JS there is nothing to follow along with, so it never shows. */
.no-js .tour-bar {
  display: none;
}
.js .tour-bar:not(.is-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 24px);
}
.tour-tab {
  padding: 10px var(--lg);
  border-radius: 999px;
  color: var(--content-secondary);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.tour-tab:hover {
  color: var(--content);
}
.tour-tab.is-active {
  background: var(--accent);
  color: var(--background);
}
.tour-download {
  color: var(--content);
}
@media (max-width: 999px) {
  .tour-bar {
    display: none;
  }
}

/* ---------- motion ---------- */

/* Cards and copy belong to the step in the middle of the screen. Only with JS
   and only on the wide layout — on a phone they simply sit in the flow. */
@media (min-width: 1000px) {
  .js .step-copy {
    opacity: 0.25;
  }
  .js .step.is-active .step-copy {
    opacity: 1;
  }
  .js .cards > * {
    opacity: 0;
    translate: 0 24px;
  }
  .js .step.is-active .cards > * {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .screen {
    transition: opacity 450ms var(--ease), scale 450ms var(--ease);
    scale: 1.03;
  }
  .screen.is-active {
    scale: 1;
  }
  .step-copy {
    transition: opacity 450ms var(--ease);
  }
  .cards > * {
    transition: opacity 500ms var(--ease), translate 600ms var(--ease);
  }
  .step.is-active .cards > :nth-child(2) {
    transition-delay: 120ms;
  }
  .tour-bar {
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  }
  .tour-tab {
    transition: background-color 250ms var(--ease), color 250ms var(--ease);
  }
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- features ---------- */

.features,
.pricing {
  max-width: var(--page);
  margin: 0 auto;
  padding: 96px var(--lg) 0;
}
.section-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
}
.section-head p {
  margin: var(--lg) 0 0;
  font-size: 18px;
  color: var(--content-secondary);
}

.feature-grid {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: var(--md);
}
@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature-grid li {
  padding: var(--xxl);
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.feature-grid h3 {
  margin: var(--lg) 0 0;
  font-size: 18px;
}
.feature-grid p {
  margin: var(--sm) 0 0;
  color: var(--content-secondary);
}

/* ---------- pricing ---------- */

.plans {
  display: grid;
  gap: var(--md);
  max-width: 760px;
  margin: 48px auto 0;
}
@media (min-width: 640px) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
}
.plan {
  padding: 28px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.plan-pro {
  border-color: var(--accent);
  background: linear-gradient(to bottom, var(--accent-surface), var(--surface) 60%);
}
.plan-name {
  margin: 0;
  font-size: 22px;
}
.plan ul {
  list-style: none;
  margin: var(--xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sm);
}
.plan li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sm);
  color: var(--content-secondary);
}
.plan li::before {
  content: "✓";
  color: var(--on-time);
}
.plan-note {
  margin: var(--xl) 0 0;
  font-size: 15px;
  color: var(--content-muted);
}

/* ---------- closing ---------- */

.closing {
  padding: 120px var(--lg) 96px;
  text-align: center;
  background: radial-gradient(60% 50% at 50% 60%, rgb(83 157 255 / 0.14), transparent 70%);
}
.closing-icon {
  border-radius: 22px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.5);
}
.closing h2 {
  margin: var(--xxl) 0 0;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.05;
}
.closing > p {
  margin: var(--lg) 0 0;
  font-size: 18px;
  color: var(--content-secondary);
}