/* Live City landing. */
:root{color-scheme:dark;--bg:#09141d;--panel:#101e29;--panel-deep:#0c1822;--line:#243746;--line-soft:#1a2b38;--ink:#e8eef2;--soft:#c3d3de;--muted:#8da4b4;
  --mint:#7ef0c8;--people:#70cff2;--vehicles:#edb97f;--alert:#ff7a6b;--amber:#f1c27d;--radius:16px;
  --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--site-header-h,64px) + 12px)}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 640px at 82% -6%,rgba(26,66,84,.5),transparent 64%),radial-gradient(900px 600px at -10% 18%,rgba(18,40,54,.45),transparent 60%),var(--bg)}
a{color:var(--mint);text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.number,.counter-value,.stats dd,.area-value{font-variant-numeric:tabular-nums}
.home{max-width:1240px;margin:0 auto;padding:8px 24px 80px}
.eyebrow{margin:0 0 10px;color:var(--mint);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.section-head{margin:0 0 22px}
.section-head h2{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:650}
.section-note{max-width:62ch;margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.section-foot,.panel-foot{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.panel{position:relative;padding:24px;border:1px solid #1d3040;border-radius:var(--radius);background:linear-gradient(180deg,rgba(18,34,46,.92),rgba(13,25,34,.92))}
.panel h3{margin:0 0 14px;font-size:15px;line-height:1.3;font-weight:650;letter-spacing:-.005em;color:var(--ink)}
.panel-message{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.fade{transition:opacity .22s ease}
.fade.out{opacity:0;transition-duration:.14s}
.number.changed{animation:value-flash 1.4s ease-out 1}
@keyframes value-flash{0%{text-shadow:0 0 16px currentColor;filter:brightness(1.4)}100%{text-shadow:0 0 0 transparent;filter:none}}
.button:active{transform:translateY(1px)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "map" "counters" "actions" "notes";gap:12px;padding:16px 0 12px}
.hero-copy{grid-area:copy}.pulse-map{grid-area:map}.counters-block{grid-area:counters}.map-notes{grid-area:notes}.hero-actions{grid-area:actions}
.hero-status{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px}
.hero-status .data-note{flex-basis:100%}
.hero h1{margin:12px 0 6px;font-size:clamp(28px,4.4vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:650}
.title-accent{display:block;color:var(--mint)}
.hero-sub{margin:0;color:var(--soft);font-size:15px;line-height:1.55}
.sub-long{display:none}
.hero-trust{margin:10px 0 0;color:var(--soft);font-size:14px;line-height:1.45}
.hero-demo-callout{margin:14px 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid #33505f;border-radius:999px;background:rgba(12,26,35,.6);
  color:var(--ink);font-size:15px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s}
.button:hover{border-color:var(--mint);color:var(--mint)}
.button.primary{border-color:var(--mint);background:var(--mint);color:#062419}
.button.primary:hover{background:#a8f7dc;color:#062419}
.hero-alert{position:relative;display:grid;gap:2px;min-height:44px;padding:9px 14px 9px 30px;border:1px solid rgba(255,122,107,.45);border-left:3px solid var(--alert);border-radius:12px;
  background:rgba(255,122,107,.07);color:var(--ink);font-size:14px;line-height:1.35;text-decoration:none}
.hero-alert:hover{border-color:var(--alert)}
.hero-alert::before{content:'';position:absolute;left:12px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--alert)}
.hero-alert[data-ping]::before{animation:alert-ping .9s cubic-bezier(.2,.7,.3,1) 1}
@keyframes alert-ping{0%{box-shadow:0 0 0 0 rgba(255,122,107,.7)}100%{box-shadow:0 0 0 10px rgba(255,122,107,0)}}
.hero-alert-line{font-weight:600}
.hero-alert-review{color:var(--soft);font-size:13px}
/* The alert line arrives after first paint and moves nothing: after the counters in the one-column hero, beside the
   chip in the two-column hero, whose status row holds its two lines from the start. */
.hero-alert-below{margin-top:12px}
@media(max-width:959px){.hero-status .hero-alert{display:none}}

/* Map */
.pulse-map{position:relative;margin:0}
.map-frame{position:relative;height:208px;overflow:hidden;border:1px solid #1b2e3c;border-radius:18px;
  background:radial-gradient(120% 90% at 60% 40%,#0d1d28,#08121a 75%)}
.pulse-map-svg{display:block;width:100%;height:100%}
.map-land path{fill:#0f1e29;stroke:#22394a;stroke-width:1;vector-effect:non-scaling-stroke;fill-rule:evenodd;stroke-linejoin:round}
.map-land path[data-live-neighborhood],.map-crosswalk path[data-live-neighborhood]{cursor:pointer;pointer-events:all}
.map-land path[data-live-neighborhood]:hover,.map-land path[data-live-neighborhood]:focus-visible,.map-crosswalk path[data-live-neighborhood]:hover,.map-crosswalk path[data-live-neighborhood]:focus-visible{stroke:#9ce5ff;stroke-width:2.5;outline:none}
.map-overlays,.map-ripples,.map-nodes,.map-labels{pointer-events:none}
.map-crosswalk path{fill:none;stroke:none}
.map-overlays path{vector-effect:non-scaling-stroke;fill-rule:evenodd;stroke-linejoin:round}
.area-published{fill:rgba(112,207,242,.10);stroke:rgba(112,207,242,.55);stroke-width:1;transition:fill .25s ease,stroke .25s ease}
.pulse-map[data-target=vehicles] .area-published{fill:rgba(237,185,127,.10);stroke:rgba(237,185,127,.55)}
.area-withheld{fill:url(#map-hatch);stroke:#2a4153;stroke-width:1}
.hatch-line{stroke:#5b7f94;stroke-width:2.2}
.node-core{fill:var(--people);stroke:#071119;vector-effect:non-scaling-stroke;stroke-width:1.5;transition:fill .25s ease}
.pulse-map[data-target=vehicles] .node-core{fill:var(--vehicles)}
.node.tick .node-core{animation:node-tick .6s ease-out 1;transform-box:fill-box;transform-origin:center}
@keyframes node-tick{40%{transform:scale(1.22)}}
.node-label{fill:#e2ecf2;font-family:var(--font);font-weight:600;paint-order:stroke;stroke:#08121a;stroke-linejoin:round}
.node-label-value{fill:var(--muted);font-weight:500}
.ripple{fill:none;stroke:var(--mint);vector-effect:non-scaling-stroke;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ripple 6s ease-out infinite}
@keyframes ripple{0%{opacity:.55;transform:scale(1)}60%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
.pulse-inset{position:absolute;left:10px;bottom:10px;width:58px;height:58px;padding:4px;border:1px solid #1f3343;border-radius:10px;background:rgba(7,16,23,.82)}
.inset-land{fill:#1a3141;stroke:none}
.inset-crop{fill:none;stroke:var(--mint);stroke-width:1.5;vector-effect:non-scaling-stroke}
.map-status{position:absolute;left:50%;top:50%;margin:0;padding:8px 14px;border:1px solid #23404a;border-radius:999px;background:rgba(9,20,29,.88);color:var(--soft);
  font-size:14px;line-height:1.3;white-space:nowrap;transform:translate(-50%,-50%)}
.map-caption{display:flex;align-items:center;gap:12px;margin:10px 0 0}
.map-caption-text{flex:1;min-width:0;color:var(--muted);font-size:13px;line-height:1.4}
.segmented{flex:none;display:inline-flex;padding:2px;border:1px solid #23394a;border-radius:999px;background:rgba(9,20,29,.7)}
.segmented button{min-height:44px;min-width:44px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;
  transition:color .2s,background-color .2s}
.segmented button:not([aria-pressed=true]):hover{color:var(--ink);background:rgba(255,255,255,.04)}
.segmented button[aria-pressed=true]{background:#183041;color:var(--ink)}
.segmented button[data-map-target=people][aria-pressed=true]{box-shadow:inset 0 -2px 0 var(--people)}
.segmented button[data-map-target=vehicles][aria-pressed=true]{box-shadow:inset 0 -2px 0 var(--vehicles)}
.map-notes{color:var(--muted);font-size:13px;line-height:1.55}
.map-notes p{margin:0 0 8px}
.map-source{color:#8da4b4}
.legend-keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 4px!important}
.key{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.key::before{content:"";flex:none;width:12px;height:12px;border-radius:50%}
.key-value::before{background:var(--people);box-shadow:0 0 0 1.5px #071119}
.hero:has(.pulse-map[data-target=vehicles]) .key-value::before{background:var(--vehicles)}
.key-size::before{background:#627d8f;box-shadow:0 0 0 1.5px #071119}
.key-hatch::before{border-radius:3px;background:repeating-linear-gradient(45deg,#5b7f94 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px #2a4153}
.key-ring::before{background:none;box-shadow:inset 0 0 0 1.5px var(--mint)}
.map-help>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--soft);font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.map-help>summary::-webkit-details-marker{display:none}
.map-help>summary::after{content:'Show ▾';content:'Show ▾'/'';color:var(--mint);font-size:13px}
.map-help[open]>summary::after{content:'Hide ▴';content:'Hide ▴'/''}
.map-help>p:last-child{margin-bottom:12px}

/* Counters */
.counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.counter{min-width:0;margin:0;padding:11px 13px 10px;border:1px solid #1d3040;border-radius:14px;background:rgba(14,28,38,.78)}
.counter dt{margin:0;color:var(--soft);font-size:13px;font-weight:600;line-height:1.3}
.counter-value{display:flex;align-items:baseline;gap:6px;margin:4px 0 2px;line-height:1}
.counter-value .number{font-size:30px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.counter[data-counter=people] .number{color:var(--people)}
.counter[data-counter=vehicles] .number{color:var(--vehicles)}
.counter[data-counter=ai] .number{color:var(--mint)}
.counter-unit{color:var(--muted);font-size:13px;font-weight:500}
.counter-note{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
.counter[data-state=unavailable] .number,.counter[data-state=loading] .number,.counter[data-state=starting] .number{color:var(--muted)}
.ai-beat{flex:none;align-self:center;width:6px;height:6px;border-radius:50%;background:var(--mint)}
.counter:not([data-state=ready]) .ai-beat{display:none}
.ai-beat.ping{animation:beat-ping .9s cubic-bezier(.2,.7,.3,1) 1}
@keyframes beat-ping{0%{box-shadow:0 0 0 0 rgba(126,240,200,.7)}100%{box-shadow:0 0 0 7px rgba(126,240,200,0)}}
.counters-asof{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.counters-asof time.changed{animation:time-flash 1.4s ease-out 1}
@keyframes time-flash{0%{color:var(--mint)}100%{color:inherit}}

/* Data that is not live dims its numbers and the map's nodes; coverage outlines and hatching keep 3:1 on the land. */
.number:not(.fade),.ai-beat,.map-nodes,.node-label-value{transition:opacity .6s ease,filter .6s ease}
.home:is([data-freshness=delayed],[data-freshness=old],[data-freshness=partial],[data-freshness=last-visit]) .counter[data-state=ready] :is(.number:not(.out),.ai-beat){opacity:.62}
.home:is([data-freshness=delayed],[data-freshness=old],[data-freshness=partial],[data-freshness=last-visit]) .map-nodes{opacity:.6;filter:saturate(.4)}
.home:is([data-freshness=delayed],[data-freshness=old],[data-freshness=partial],[data-freshness=last-visit]) .node-label-value{opacity:.8}

/* What's new: the newest entries from /updates, each linking to it */
.whats-new{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:28px;padding:14px 18px 4px;border:1px solid #1d3040;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,34,46,.72),rgba(13,25,34,.72))}
.whats-new h2{margin:0;color:var(--mint);font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1.5;text-transform:uppercase}
.whats-new-list{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.whats-new-list li{border-top:1px solid #1b2d3b}
.whats-new-list a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:10px 0;color:var(--ink);text-decoration:none}
.whats-new-list a:hover span{color:var(--mint);text-decoration:underline}
.whats-new-list time{flex:none;min-width:3.4em;color:var(--muted);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.whats-new-list span{font-size:15px;font-weight:600;line-height:1.4}
.whats-new-all{display:inline-flex;align-items:center;justify-self:start;gap:6px;min-height:44px;font-size:14px;font-weight:600;text-decoration:none}
.whats-new-all:hover{text-decoration:underline}

/* Two world models: live numbers from /api/public/models, a rule in each model's hue (the hues of /ai), and a link to /ai */
.models{--vjepa:#3c88f5;--cosmos:#c94fae;margin-top:28px;padding:20px 20px 16px;border:1px solid #1d3040;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,34,46,.92),rgba(13,25,34,.92))}
.models .eyebrow{margin:0 0 6px}
.models h2{margin:0;font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:650}
.models-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:16px 0 0}
.model-half{min-width:0;padding:14px 0 0;border-top:3px solid var(--cosmos)}
.model-half[data-model=vjepa]{border-top-color:var(--vjepa)}
.model-half p{margin:0}
.model-kicker{color:var(--soft);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}
.model-line{margin-top:4px!important;color:var(--soft);font-size:15px;line-height:1.5}
.model-number{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:8px!important}
.model-number .number{min-width:1ch;font-size:34px;font-weight:650;line-height:1.1;letter-spacing:-.02em}
.model-number .number[data-empty]{color:var(--muted)}
/* The unit always takes its own line, so a number arriving never moves it */
.model-unit{flex-basis:100%;color:var(--muted);font-size:14px}
.model-micro{min-height:40px;margin-top:4px!important;color:var(--muted);font-size:13px;line-height:1.5}
.models-link{margin-top:14px}
@media(max-width:359px){.models-link{white-space:normal;text-align:center}}
.models[data-freshness=delayed] .number,.models[data-freshness=old] .number{opacity:.62}

/* AI activity */
.ai{margin-top:64px}
.ai-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.stats{display:grid;gap:0;margin:0}
.stats div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #1b2d3b}
.stats div:first-child{border-top:0;padding-top:0}
.stats dt{color:var(--soft);font-size:14px;line-height:1.4}
.stats dd{margin:0;color:var(--mint);font-size:22px;font-weight:650;white-space:nowrap}
.stats dd small{margin-left:4px;color:var(--muted);font-size:13px;font-weight:500}
.stats dd.none{color:var(--muted)}
.funnel-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin:0 0 16px;padding:0;list-style:none}
.funnel-steps li{margin:0}
.funnel-steps strong{display:block;font-size:26px;line-height:1.1;font-weight:650;font-variant-numeric:tabular-nums}
.funnel-steps span{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.35}
.funnel-steps li[data-step=confirmed] strong{color:var(--alert)}
.funnel-steps li[data-state=unavailable] strong{color:var(--muted)}
.funnel-steps li[data-state=ready]:is([data-step=rejected],[data-step=expired],[data-step=confirmed]) span::before,.funnel-open::before{content:"";display:inline-block;
  width:10px;height:10px;margin:0 6px 0 0;border-radius:3px;vertical-align:-1px}
.funnel-steps li[data-step=rejected] span::before{background:#8aa5b6}
.funnel-steps li[data-step=expired] span::before{background:#6b8597}
.funnel-steps li[data-step=confirmed] span::before{background:var(--alert)}
.funnel-open::before{box-shadow:inset 0 0 0 1px #c3d3de}
.funnel-bar{display:flex;gap:2px;height:10px;margin:0 0 6px}
.funnel-bar span{display:block;height:100%;border-radius:3px}
.funnel-bar .rejected{background:#8aa5b6}.funnel-bar .expired{background:#6b8597}.funnel-bar .confirmed{background:var(--alert)}
.funnel-bar .open{background:transparent;box-shadow:inset 0 0 0 1px #c3d3de}
.funnel-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:76px;margin:14px 0 4px}
.funnel-day{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.funnel-day-count{color:var(--muted);font-size:12px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
.funnel-day-bar{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:3px 3px 0 0;background:#6b8597}
.funnel-day-confirmed{flex:none;background:var(--alert)}
.funnel-day-labels{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;color:var(--muted);font-size:12px;text-align:center}
.funnel-day-note{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.funnel-open{white-space:nowrap}
.funnel-table{margin:18px 0 0;overflow-x:auto}
.funnel-kinds{width:100%;margin:0;border-collapse:collapse;color:var(--soft);font-size:14px;line-height:1.35;font-variant-numeric:tabular-nums}
.funnel-kinds th,.funnel-kinds td{padding:8px 0 8px 12px;border-bottom:1px solid #1b2d3b;font-weight:500;text-align:right}
.funnel-kinds thead th{color:var(--muted);font-size:12px;font-weight:600;vertical-align:bottom}
.funnel-kinds tbody :is(th,td){vertical-align:top}
.funnel-kinds :is(th,td):first-child{padding-left:0;text-align:left}
.funnel-kinds tbody th{color:var(--ink)}
.funnel-kinds :is(.zero,.funnel-none){color:var(--muted)}
.alerts-status{margin:-6px 0 12px;color:var(--muted);font-size:14px}
.landing-alerts[data-alert-state=active] .alerts-status,.alerts[data-alert-state=active] .alerts-status{color:var(--alert)}
.alert-list{display:grid;gap:10px}
.landing-alert-card{display:grid;gap:3px;padding:12px 14px;border:1px solid rgba(255,122,107,.35);border-left:3px solid var(--alert);border-radius:12px;background:rgba(255,122,107,.07);
  color:var(--ink);text-decoration:none}
a.landing-alert-card:hover{border-color:var(--alert)}
.landing-alert-card strong{font-size:16px;font-weight:650}
.landing-alert-place{color:var(--soft);font-size:14px}
.landing-alert-review{color:var(--muted);font-size:13px;line-height:1.4}
.landing-alert-action{color:var(--alert);font-size:13px;font-weight:600}
.insight{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid #1b2d3b}
.insight:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.insight h4{margin:0 0 4px;font-size:15px;line-height:1.35;font-weight:650}
.insight p{margin:0;color:var(--soft);font-size:14px;line-height:1.5}
.insight small{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.tag{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid #2c4556;border-radius:999px;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}

/* Neighborhoods */
.areas{margin-top:64px}
.area-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid #1d3040}
.area-placeholder{padding:18px 6px;border-bottom:1px solid #1d3040;color:var(--muted);font-size:15px}
.area-card{position:relative;display:grid;gap:12px;padding:16px 6px;border-bottom:1px solid #1d3040;transition:background-color .2s}
.area-card:hover,.area-card:focus-within{background:rgba(255,255,255,.03)}
.area-card h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;font-size:17px;line-height:1.25;font-weight:650}
.area-card h3 a{color:var(--ink);text-decoration:none}
.area-card .stretched::after{content:"";position:absolute;inset:0}
.area-card h3 a:focus-visible{outline:none}
.area-card:focus-within{outline:2px solid var(--mint);outline-offset:-2px}
.area-go{position:relative;left:0;color:var(--muted);white-space:nowrap;transition:color .16s ease,left .16s ease}
.area-card:is(:hover,:focus-within) .area-go{color:var(--mint);left:2px}
.area-cameras{flex:none;color:var(--muted);font-size:13px;font-weight:500}
.area-rows{display:grid;gap:10px;margin:0}
.area-row{display:grid;grid-template-columns:4.6em auto minmax(0,1fr);align-items:center;gap:6px 12px;font-size:13px}
.area-row dt{color:var(--soft);font-size:13px;font-weight:600}
.area-row dd{margin:0}
.area-value{font-size:22px;font-weight:650;line-height:1;white-space:nowrap}
.area-value small{margin-left:5px;color:var(--muted);font-size:12px;font-weight:500}
.area-row[data-target=people] .area-value{color:var(--people)}
.area-row[data-target=vehicles] .area-value{color:var(--vehicles)}
.area-spark{display:block;width:100%;height:28px;overflow:visible}
.area-spark path{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.area-spark .spark-end{stroke-width:5;stroke-linecap:round}
.area-row[data-target=people] .area-spark path{stroke:var(--people)}
.area-row[data-target=vehicles] .area-spark path{stroke:var(--vehicles)}
.areas-extra{max-width:72ch;margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.55}

/* How it works */
.how{margin-top:72px;padding:32px 24px;border:1px solid #1d3040;border-radius:22px;background:linear-gradient(160deg,rgba(17,35,46,.85),rgba(9,20,29,.6))}
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0 0 24px;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;margin:0;padding:0 0 0 44px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border:1px solid #2c5a52;border-radius:50%;
  color:var(--mint);font-size:14px;font-weight:700}
.steps h3{margin:3px 0 6px;font-size:17px;font-weight:650}
.steps p{margin:0;color:var(--soft);font-size:15px;line-height:1.6}
.privacy-copy{max-width:78ch;margin:0;padding:16px 18px;border-left:2px solid var(--mint);border-radius:0 12px 12px 0;background:rgba(126,240,200,.05);color:var(--soft);font-size:15px;line-height:1.65}
.how-links{display:flex;flex-wrap:wrap;gap:4px 8px;margin:16px 0 0}
.how-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px 0 0;font-weight:600;text-decoration:none}
.how-links a:hover{text-decoration:underline}

@media(min-width:640px){
  .home{padding:16px 28px 88px}
  .counters{gap:12px}
  .multiples{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-grid :is(.funnel,.insights){grid-column:1/-1}
  .funnel-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .map-frame{height:auto;aspect-ratio:1.38}
  .area-row{grid-template-columns:4.6em auto minmax(0,1fr) auto}
}
@media(min-width:960px){
  .hero-copy{display:contents}
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"status status" "title title" "lede map" "actions map" "counters map" "counters notes";column-gap:44px;row-gap:20px;align-items:start;padding-top:36px}
  .hero-status{grid-area:status;display:grid;grid-template-columns:auto minmax(0,1fr);min-height:59px}
  .hero-status .hero-alert{justify-self:start}
  .hero-status .data-note{grid-column:1/-1}
  .hero .hero-alert-below{display:none}
  .hero h1{grid-area:title;margin:0;font-size:clamp(40px,3.9vw,56px);text-wrap:balance}
  .hero .title-accent{display:inline}
  .hero-lede{grid-area:lede}
  .hero-sub{font-size:17px;line-height:1.6}
  .sub-short{display:none}.sub-long{display:inline}
  .map-frame{aspect-ratio:1.3}
  .pulse-inset{width:74px;height:74px;left:14px;bottom:14px}
  .report .report-targets{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .hero-actions .button{min-height:46px;padding:0 16px;font-size:15px}
  .ai-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .ai-grid .alerts{grid-column:span 5}
  .ai-grid .ai-stats{grid-column:span 7}
  .ai-stats .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ai-stats .stats div{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:4px;padding:0 20px;border-top:0;border-left:1px solid #1b2d3b}
  .ai-stats .stats div:first-child{padding-left:0;border-left:0}
  .ai-stats .stats dd{font-size:30px}
  .ai-grid .funnel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:36px;align-items:start}
  .funnel>:is(h3,.funnel-steps,.panel-message,.panel-foot){grid-column:1/-1}
  .funnel-chart{grid-column:1}
  .funnel .funnel-table{grid-column:2;margin-top:0}
  .ai-grid .insights{display:flex;flex-wrap:wrap;column-gap:28px}
  .insights>:is(h3,.panel-message,.panel-foot){flex-basis:100%}
  .insights .insight{position:relative;flex:1 1 260px;margin:0;border-bottom:0;padding-bottom:0}
  .insights .insight+.insight::before{content:"";position:absolute;top:0;bottom:0;left:-14px;border-left:1px solid #1b2d3b}
  .area-card{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);align-items:center;column-gap:32px;padding:14px 12px}
  .area-card h3{flex-direction:column;align-items:flex-start;gap:2px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .how{padding:40px}
  .whats-new{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px;padding:6px 24px}
  .models{padding:22px 24px 18px}
  .models-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .whats-new-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .whats-new-list li{border-top:0}
  .whats-new-list a{flex-direction:column;gap:0;padding:10px 0}
  .counter-value .number{font-size:34px}
  .counter{padding:16px 18px 14px}
}
/* Side by side once a departure pill fits beside each value */
@media(min-width:1200px){.area-rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}}
@media(max-width:639px){
  /* At 390×664 the first counter row stays on the first screen */
  .home{padding-top:2px}
  .hero{gap:10px;padding-top:12px}
  .hero h1{margin-top:10px}
  .hero-trust{font-size:13px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions .primary{grid-column:1/-1}
  .map-caption{flex-wrap:wrap;row-gap:6px;margin-top:8px}
  .map-caption-text{flex-basis:100%;font-size:12px;line-height:1.35}
  .key{white-space:normal}
  .counter{padding:9px 12px 8px}
  .counter-value{margin:3px 0 1px}
  .counter-value .number{font-size:28px}
  .funnel-kinds{font-size:13px}
  .funnel-kinds th,.funnel-kinds td{padding-left:4px}
  .funnel-kinds thead th{font-weight:500;letter-spacing:-.01em}
  .area-card{padding:14px 6px;gap:8px}
  .area-row{grid-template-columns:4.6em auto minmax(0,1fr)}
  .area-trend,.spark-note{display:none}
}
@media(max-width:380px){.counter-value .number{font-size:26px}.counter{padding:9px 10px 8px}}
@media(prefers-reduced-motion:reduce){
  .ripple{animation:none;opacity:.35;transform:scale(1.8)}
  .fade,.number:not(.fade),.ai-beat,.map-nodes,.node-label-value,.node-core,.area-published,.button,.segmented button,.area-card,.area-go{transition:none}
  .ai-beat.ping,.node.tick .node-core,.hero-alert[data-ping]::before{animation:none}
  .button:active{transform:none}
  .area-card:is(:hover,:focus-within) .area-go{left:0}
}