/* ============================================================================
   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);
  /* a finger rubbing sideways wipes the fog (fog.js); a vertical swipe still scrolls */
  touch-action: pan-y pinch-zoom;
        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; }
/* Left, and staying left. Every .sec-head below the hero is centred, so this
   looks like the one block nobody got round to. It is deliberate: the copy is
   held to the left half so the right half stays clear for the fog canvas to
   clear behind it. Centring this covers the animation. */
.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 ------ */
/* Centred as a column. The rows used to run the full 1132px while the prose
   inside them stopped at 52ch, so the rules pointed at empty space on the right
   and the section did not agree with the centred heading above it. Capping the
   column near the text's own measure and centring it makes the rules end where
   the writing does. */
.steps { border-top: 1px solid var(--line); max-width: 860px; margin: 0 auto; }
.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.
   The grid fills the wrap rather than stopping short of it. An 820px cap left a
   third of the row empty while the heading above ran the full width, which read
   as the phones being shoved into a corner. */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.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 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 --------------------------------------------------------------- */
/* Centred for the same reason as .steps: a left-aligned 780px column under a
   centred heading left 500px of dead air on a wide desktop. */
.faq { max-width: 780px; margin: 0 auto; }
.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; }
  /* the map band belongs to the finger: no panning inside it, so a rub wipes
     instead of dragging the page; the copy above still scrolls normally */
  .hero-stage, .hero-scrim { touch-action: none; }
  .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; }
}

/* send-yourself-the-link block, under the closing CTA */
.sendlink { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.sendlink h3 { margin-bottom: 6px; }
.sendlink p { color: var(--ink2); font-size: 15px; margin-bottom: 14px; }
.sendlink-row { display: flex; flex-wrap: wrap; gap: 10px; }