/* ============================================================================
   Home page only. Depends on shared/base.css.
   ============================================================================ */

/* ---- hero --------------------------------------------------------------
   The hero is the product demo: a city under fog that clears where the
   pointer goes and stays clear. Two stacked canvases, drawn by shared/fog.js. */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
        min-height: clamp(540px, 82vh, 840px); display: flex; flex-direction: column; justify-content: center; }
.hero-stage { position: absolute; inset: 0; z-index: 0; background: #0A0C0F; }
.hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* keeps the headline readable over whatever the walker has uncovered */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(14,16,19,.92) 0%, rgba(14,16,19,.74) 38%, rgba(14,16,19,.06) 66%, rgba(14,16,19,.28) 100%),
    linear-gradient(0deg, rgba(14,16,19,.8) 0%, transparent 30%);
}
.hero-inner { position: relative; z-index: 2; padding: 92px 0 44px; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-copy { max-width: 780px; }
.hero h1 { margin: 20px 0 22px; }
.hero h1 .cleared { color: var(--trail); }
.hero-sub { color: var(--ink2); font-size: clamp(16.5px, 1.5vw, 19.5px); max-width: 46ch; margin-bottom: 34px; }
.hero-sub b { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-cta .btn { min-width: 238px; }
.hero-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink3); }
.hero-note b { color: var(--ink2); font-weight: 500; }

/* the hint sits on the canvas, so it has to say something true on touch too */
.hero-hint {
  position: absolute; right: var(--gut); bottom: 26px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); display: flex; align-items: center; gap: 9px;
}
.hero-hint::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--trail); box-shadow: 0 0 0 4px rgba(88,220,234,.16);
}

/* ---- readout strip: the app's own stat pill, as a page element ---------- */
.readout { border-top: 1px solid var(--line); background: var(--raise); }
.readout .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.readout .wrap > div { padding: 22px 0; }
.readout .wrap > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.readout .n { font-family: var(--mono); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px);
  color: var(--ink); letter-spacing: -.02em; text-shadow: 0 0 22px rgba(168,196,224,.28); }
.readout .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); margin-top: 7px; }

/* ---- steps: a numbered sequence on rules, not three floating cards ------ */
.steps { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 58px 1fr; gap: 30px; align-items: baseline;
        padding: 28px 0; border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--ink3); letter-spacing: .1em; padding-top: 4px; }
.step-t h3 { margin-bottom: 9px; }
.step-t p { color: var(--ink2); font-size: 15.5px; max-width: 52ch; }
.step-t p b { color: var(--ink); font-weight: 500; }
/* whole screens, not slices: a portrait phone shot cropped wide is mostly fog */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 820px; }
.screens figure { margin: 0; }
.screens img { width: 100%; border-radius: 12px; border: 1px solid var(--line2); background: var(--raise); }
.screens figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); margin-top: 14px; }

/* the wizard clip: a motion piece sitting with the three screens, at phone width */
.wanderclip { margin: 40px auto 0; max-width: 280px; }
.wanderclip video { width: 100%; border-radius: 12px; border: 1px solid var(--line2); background: var(--raise); display: block; }
.wanderclip figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); margin-top: 14px; text-align: center; }

/* ---- the anti-feature list --------------------------------------------- */
.nots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.nots > div { padding: 24px 0; border-top: 1px solid var(--line); }
.nots h3 { margin-bottom: 7px; }
.nots p { color: var(--ink2); font-size: 15px; }

/* ---- cities: chips in a grid, the shape the app's own collection screen uses.
       The raw city screenshots went to mush at thumbnail size and read as stock
       cartography once lifted, so the proof here is typographic. ------------- */
.citychips { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 7px; }
.citychips a {
  display: block; padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink2); text-decoration: none; font-size: 15px; letter-spacing: -.005em;
  transition: border-color .15s, color .15s, background .15s;
}
.citychips a:hover { border-color: var(--line2); color: var(--ink); background: var(--raise); }
.citychips span {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink3); margin-top: 4px;
}
.wall-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 14.5px; color: var(--trail); text-decoration: none; }
.wall-more:hover { color: var(--ink); }

/* ---- faq --------------------------------------------------------------- */
.faq { max-width: 780px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: 20px; padding: 20px 0;
  font-family: var(--display); font-weight: 500; font-size: 17.5px; letter-spacing: -.015em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink3); flex: none; font-size: 16px; }
.faq details[open] summary::after { content: "–"; color: var(--trail); }
.faq details p { color: var(--ink2); font-size: 15.5px; padding: 0 0 22px; max-width: 68ch; }
.faq details p b { color: var(--ink); font-weight: 500; }

/* ---- closer ------------------------------------------------------------
   Fog banking up under the last line. The page opens in it, so it closes in it. */
.closer { position: relative; overflow: hidden; border-top: 1px solid var(--line);
          padding: 122px 0 104px; text-align: center; }
.closer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 72% at 50% 106%, rgba(128,157,200,.38) 0%, rgba(80,101,138,.17) 48%, transparent 76%),
    radial-gradient(50% 46% at 17% 100%, rgba(150,178,216,.19), transparent 70%),
    radial-gradient(56% 50% at 85% 96%, rgba(100,128,170,.17), transparent 72%),
    radial-gradient(70% 44% at 50% 0%, rgba(88,220,234,.045), transparent 68%);
}
.closer .wrap { position: relative; z-index: 1; }
.closer h2 { font-size: clamp(32px, 5.2vw, 62px); margin-bottom: 36px; }
.closer .hero-cta { justify-content: center; margin-bottom: 0; }
.closer .hero-note { display: block; margin-top: 20px; }

/* ---- read-on links ----------------------------------------------------- */
.readon { display: flex; flex-wrap: wrap; gap: 8px; }
.readon a {
  font-size: 14px; color: var(--ink2); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; transition: .15s;
}
.readon a:hover { border-color: var(--line2); color: var(--ink); background: var(--raise); }

@media (max-width: 900px) {
  /* The copy fills the width at this width, so it cannot sit on top of the map:
     the stage becomes a band under it instead, and the walk gets that band to
     itself. Readable copy beats a full-bleed backdrop. */
  .hero { justify-content: flex-start; min-height: 0; }
  .hero-stage, .hero-scrim { top: auto; height: 330px; }
  .hero-scrim {
    background: linear-gradient(180deg, var(--ground) 0%, rgba(14,16,19,.62) 22%,
                rgba(14,16,19,.06) 56%, rgba(14,16,19,.55) 100%);
  }
  .hero-inner { padding: 30px 0 356px; }


  .step { grid-template-columns: 34px 1fr; gap: 18px; }
  .screens { gap: 16px; }
  .readout .wrap { grid-template-columns: repeat(2, 1fr); }
  .readout .wrap > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .readout .wrap > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .nots { grid-template-columns: 1fr; gap: 0; }
  .closer { padding: 92px 0 84px; }
}
/* the pointer hint is a lie on a touch screen */
@media (hover: none), (pointer: coarse) { .hero-hint { display: none; } }

@media (max-width: 620px) {
  .hero h1 { margin: 16px 0 18px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-hint { left: var(--gut); right: auto; bottom: 20px; }
  .readout .wrap > div { padding: 16px 0; }
  .readout .wrap > div + div { padding-left: 16px; }
  .citychips { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 5px; }
  .screens { gap: 10px; }
  .screens figcaption { font-size: 9px; letter-spacing: .08em; margin-top: 9px; }
  .closer { padding: 78px 0 70px; }
}