/* Home page. The live city map is the hero and the one loud element; everything after it is a quiet left-aligned column
   on the app's own charcoal, with the map reappearing as evidence (three frames of one walk, a phone, a city list). */

/* hero */
.hero{position:relative;height:min(860px,max(640px,92vh));overflow:hidden;background:#111}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hero .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.85) 0,rgba(17,17,17,0) 150px),linear-gradient(90deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.78) 34%,rgba(17,17,17,0) 62%),
             linear-gradient(0deg,rgba(23,21,21,1) 0%,rgba(23,21,21,0) 22%)}
.hero .copy{position:absolute;left:0;right:0;bottom:clamp(48px,9vh,96px);z-index:2;pointer-events:none}
.hero .copy .inner{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero h1{font-size:var(--s-h1);line-height:1.02;letter-spacing:-.025em;max-width:min(11.5em,50vw)}
.hero .lead{font-size:var(--s-lead);line-height:1.5;color:#dcd9d9;max-width:min(30em,44vw)}
.hero .stores{pointer-events:auto}
.hint{position:absolute;z-index:2;right:max(16px,env(safe-area-inset-right,0px));bottom:24px;font-size:13px;color:var(--haze);display:flex;align-items:center;gap:8px;pointer-events:none}
.hint i{width:10px;height:10px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 4px rgba(226,69,231,.25)}
.tally{position:absolute;z-index:2;top:calc(96px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:10px;background:rgba(23,21,21,.82);border:1px solid var(--kerb);border-radius:999px;padding:9px 16px 9px 12px;
  font:600 15px/1 var(--f-text);font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}
.tally b{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--gold)}
@media (max-width:760px){
  .hero{height:auto;display:flex;flex-direction:column}
  .hero canvas{position:relative;height:62vh;min-height:420px}
  .hero .scrim{background:linear-gradient(0deg,rgba(23,21,21,1) 0%,rgba(23,21,21,0) 30%);height:62vh;min-height:420px}
  .hero .copy{position:relative;bottom:auto;margin-top:-56px;padding-bottom:40px}
  .hero h1,.hero .lead{max-width:none}
  .hint{top:calc(146px + env(safe-area-inset-top,0px));bottom:auto}
}
@media (max-width:760px) and (max-height:520px){.hero canvas,.hero .scrim{height:420px}}

/* sections */
.section{padding-block:clamp(72px,10vw,128px)}
.section.tight{padding-top:0}
.section .head{display:flex;flex-direction:column;gap:16px;max-width:40em;margin-bottom:clamp(36px,5vw,56px)}
.section h2{font-size:var(--s-h2);line-height:1.08;letter-spacing:-.02em}
.section .head p{font-size:var(--s-lead);line-height:1.5;color:var(--haze)}

/* walk in three frames (a real sequence) */
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.frame{display:flex;flex-direction:column;gap:16px;min-width:0}
.frame canvas{width:100%;aspect-ratio:4/5;max-width:100%;border-radius:18px;display:block;background:#111}
.frame .n{font:700 15px/1 var(--f-display);color:var(--magenta)}
.frame h3{font-size:22px;line-height:1.2}
.frame p{color:var(--haze);font-size:16px;max-width:24em}
@media (max-width:760px){.frames{grid-template-columns:1fr}.frame canvas{aspect-ratio:5/4}}

/* districts + phone */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.phone{position:relative;width:min(330px,100%);aspect-ratio:330/690;margin-inline:auto;border-radius:52px;padding:11px;
  background:linear-gradient(150deg,#3b3838,#121111 45%,#2a2727);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1.5px #4a4646 inset}
.phone .screen{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#111}
.phone canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.phone .island{position:absolute;top:12px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:16px;background:#000;z-index:2}
.sheet{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;background:rgba(35,32,32,.96);border-radius:26px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px}
.sheet .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.sheet .name{font:700 17px/1.2 var(--f-display)}
.sheet .pct{font:700 17px/1 var(--f-display);color:var(--gold)}
.bar{height:8px;border-radius:99px;background:#393939;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--gold)}
.sheet .sub{font-size:13px;color:var(--haze);display:flex;justify-content:space-between;gap:8px}
.sheet .today{color:var(--magenta);font-weight:600}
.feats{display:flex;flex-direction:column;gap:clamp(28px,4vw,40px)}
.feat{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.feat svg{width:44px;height:44px}
.feat h3{font-size:var(--s-h3);line-height:1.15;margin-bottom:6px;letter-spacing:-.01em}
.feat p{color:var(--haze);max-width:30em}

/* cities */
.cities{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:0;list-style:none;font:500 clamp(24px,3.3vw,40px)/1.3 var(--f-text);letter-spacing:-.015em;color:#7d7878}
.cities .lit{color:var(--chalk)}
.citynote{margin-top:28px;color:var(--haze);max-width:40em}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--kerb);max-width:820px}
.faq details{border-bottom:1px solid var(--kerb)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font:600 20px/1.35 var(--f-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:12px;height:12px;border-right:2px solid var(--haze);border-bottom:2px solid var(--haze);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq details p{padding:0 0 24px;color:var(--haze);max-width:40em}

/* final */
.final{position:relative;overflow:hidden;border-top:1px solid #262323}
.final .inner{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.final h2{font-size:var(--s-h1);line-height:1.02;letter-spacing:-.025em;max-width:10em}

@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}