/* Ground Truth design system. Light mode only.
   1. Silver fog for the story (hero and closing); white and soft grey surfaces for everything else.
   2. Headlines are two-tone: the first line greyed, the second line heavy. One statement per section.
   3. Geist for everything readable, Geist Mono for labels, numbers, times and ids. No third font.
   4. Colour is spent only on station state (green / amber / red / grey), always with a shape and a word.
   5. Hairlines, not boxes. The product sits in a window frame. Motion is CSS only and stops for reduced motion.
   Visual reference: neatlogs.com (the fog hero, two-tone headlines, mono labels, window frame); no assets reused. */

:root {
  --bg: #f3f3f4;        /* page */
  --surface: #ffffff;   /* cards, window */
  --surface-2: #fafafa; /* inset panels */
  --surface-3: #f0f0f1; /* hover */
  --line: #e6e6e8; --line-2: #d6d6d9;
  --ink: #08090a; --ink-2: #4f5156; --ink-3: #686a70; /* 4.9:1 on the page, 5.4:1 on white: readable small text */
  --live: #1f9d5c;

  /* station state (dataviz reference status palette); icon + word always */
  --ok: #0ca30c;     --ok-ink: #0a6b0a;    --ok-tint: rgba(12, 163, 12, 0.09);   --ok-line: rgba(12, 163, 12, 0.28);
  --watch: #f2a60c;  --watch-ink: #7a4f00; --watch-tint: rgba(250, 178, 25, 0.14); --watch-line: rgba(242, 166, 12, 0.4);
  --flag: #d03b3b;   --flag-ink: #a32626;  --flag-tint: rgba(208, 59, 59, 0.08);  --flag-line: rgba(208, 59, 59, 0.3);
  --nodata: #a3a4a9; --nodata-ink: #5d5f64; --nodata-tint: rgba(139, 141, 147, 0.12);

  --series-28d: #b4b5ba;
  --series-7d: #08090a;
  --band: rgba(242, 166, 12, 0.10);

  --shadow: 0 1px 2px rgba(8, 9, 10, .04), 0 12px 32px -16px rgba(8, 9, 10, .18);
  --shadow-lg: 0 2px 6px rgba(8, 9, 10, .04), 0 40px 80px -40px rgba(8, 9, 10, .28);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r: 18px; --r-sm: 12px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the weather line under the hero lede: context for city-wide changes, from data/weather.json */
.hero .cityair { font-size: 15px; color: var(--ink); margin: 6px 0 0; max-width: 64ch; justify-self: center; text-align: center; line-height: 1.5; }
.std.short { color: var(--watch-ink); }
.cigs .who { display: block; margin-top: 4px; color: var(--ink-2); }
.hero .weather { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.hero .weather::before { content: "\2191"; display: inline-block; margin-right: 6px; transform: rotate(var(--wind, 0deg)); transition: transform .6s var(--ease); }
.hero .feednote { font-family: var(--mono); font-size: 13px; color: var(--watch-ink); margin: 2px 0 0; max-width: 70ch; justify-self: center; text-align: center; }
.hero .feednote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.hero .fires { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 2px 0 0; }
.hero .fires::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d8721f; margin-right: 8px; vertical-align: 1px; }
.advice .smoke { display: block; margin-top: 8px; color: var(--ink-2); }

/* the month strip in a station panel (data/history.json): one cell per day, shape and colour per answer */
.hist { margin: 14px 0 4px; }
.hist h3 { font-size: 15px; margin: 0 0 6px; }
.hist .csub { margin: 0 0 8px; }
.hstrip { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; }
.hstrip i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--nodata-tint); border: 1px dashed var(--nodata); box-sizing: border-box; }
.hstrip i.ok { background: var(--ok); border: 0; }
.hstrip i.watch { background: var(--watch); border: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.hstrip i.flag { background: var(--flag); border: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }
.hstrip i.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.fixlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fixlist li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; box-shadow: var(--shadow); }
.fixlist .hstrip, .fixlist .fix-why { grid-column: 1 / -1; }
.fix-rank { font: 500 13px var(--mono); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink); }
.fix-name { font: 600 16px var(--sans); color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; letter-spacing: -.01em; }
.fix-name:hover { text-decoration: underline; }
.fix-why { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.fix-why b { color: var(--flag-ink); font-weight: 600; }
.hours { margin: 14px 0 4px; }
.hours h3 { font-size: 15px; margin: 0 0 6px; }
.hours .csub { margin: 0 0 8px; }
.hbars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 64px; }
.hbars i { display: block; background: var(--nodata); border-radius: 2px 2px 0 0; }
.hbars i.best { background: var(--ok); }
.hours .hdates { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--ink-3); margin-top: 4px; }
.hours .hsum { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; }
.report { margin: 14px 0 0; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); }
.report h3 { font-size: 15px; margin: 0 0 6px; }
.report p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.search .kind { font: 11.5px var(--mono); color: var(--ink-3); margin-left: 6px; }
.hist .feed-mini { display: inline-block; margin-top: 6px; font: 12px var(--mono); color: var(--ink-2); }
.hist .hsum { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }
.hist .hdates { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
/* since yesterday, under the live map's intro */
.sec .changes { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.7; }
.sec .changes button { font: inherit; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 9px; margin: 0 4px 2px 0; cursor: pointer; display: inline-block; max-width: 100%; text-align: left; }
.sec .changes button:hover { background: var(--surface-3); }
.sec .changes .arrow { color: var(--ink-3); }
@media (max-width: 600px) { .sec .changes { font-size: 12px; } }
.sec .changes button .ico { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }

/* "find the monitor near me": the hero asks the browser for a position, once, on a click */
.hero .near-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.hero .near-line { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.hero .near-line b { color: var(--ink); font-weight: 500; }

/* the copy box: the link or the embed code in a textarea when the clipboard is not allowed */
.copybox { margin: 8px 0 4px; } .copybox .label { display: block; margin-bottom: 4px; }
.copybox textarea { width: 100%; font: 12px/1.4 var(--mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; resize: vertical; }

/* the month, city-wide, under the proof */
.month { margin-top: 28px; }
.month-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.month-head h3 { margin: 0 0 4px; font-size: 17px; }
.feed-link { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; text-decoration: none; }
.feed-link:hover { background: var(--surface-3); }
.feed-link::before { content: "◉ "; color: #d8721f; }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1500; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 75%, transparent); border-bottom: 1px solid transparent; }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
.wordmark { font: 500 22px/1 var(--mono); letter-spacing: -.03em; text-decoration: none; color: var(--ink); }
.wordmark b { font-weight: 500; color: var(--ink-3); }
.nav nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav nav a { white-space: nowrap; text-decoration: none; color: var(--ink-2); font-size: 14.5px; padding: 6px 12px; border-radius: 999px; }
.nav nav a:hover { color: var(--ink); background: rgba(8, 9, 10, .05); }
.lang-toggle { font: 500 12px/1 var(--sans); color: var(--ink-2); padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); cursor: pointer; white-space: nowrap; transition: background .15s; }
.lang-toggle:hover { background: rgba(8,9,10,.07); color: var(--ink); }
/* Hindi: Geist for the Latin letters and digits, Noto Sans Devanagari for the rest, in body text and mono labels alike */
html[lang="hi"] { --sans: "Geist", "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", "Noto Sans Devanagari", ui-monospace, monospace; }
.fresh { font: 12px var(--mono); color: var(--ink-2); padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); white-space: nowrap; }
.fresh.stale { border-color: var(--watch-line); background: var(--watch-tint); color: var(--watch-ink); }
.pulse { font: 12px var(--mono); padding: 6px 12px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.pulse::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.pulse.on { color: var(--ok-ink); background: var(--ok-tint); border-color: var(--ok-line); }
.pulse.on::before { background: var(--live); box-shadow: 0 0 0 3px rgba(31, 157, 92, .18); animation: beat 2s ease-in-out infinite; }
.pulse.off { color: var(--ink-2); background: var(--surface); border-color: var(--line-2); }
.pulse.off::before { background: var(--nodata); }
@keyframes beat { 50% { box-shadow: 0 0 0 6px rgba(31, 157, 92, 0); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; border-radius: 16px; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .18s var(--ease), background .18s, border-color .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn .arr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 13px var(--mono); }
.btn.dark { background: #18191b; color: #f5f5f2; box-shadow: 0 2px 8px rgba(17, 18, 20, .1), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn.dark .arr { background: rgba(255, 255, 255, .12); }
.btn.outline { background: rgba(255, 255, 255, .5); color: var(--ink); border-color: var(--ink); border-radius: 999px; }
.btn.outline .arr { background: rgba(8, 9, 10, .07); }

/* ---------- hero (fog) ---------- */
.hero { position: relative; isolation: isolate; min-height: min(92vh, 860px); display: grid; align-content: start; padding-top: clamp(56px, 11vh, 120px); padding-bottom: 150px; /* room for the example card pulled up into it */ overflow: hidden; background: linear-gradient(180deg, #f6f6f7 0%, #ececee 55%, #dcdcdf 100%); }
.hero .scene { position: absolute; inset: auto 0 0 0; height: 62%; z-index: -1; pointer-events: none; }
.scene svg { width: 100%; height: 100%; display: block; }
.hero .copy { text-align: center; display: grid; justify-items: center; gap: 22px; }
.hero h1 { margin: 0; font-weight: 600; letter-spacing: -.045em; line-height: .98; font-size: clamp(36px, 5.6vw, 78px); max-width: 21ch; text-wrap: balance; }
.hero h1 .dim { display: block; color: #7f8187; font-weight: 500; font-size: .74em; letter-spacing: -.04em; margin-bottom: 6px; }
.hero .lede { margin: 0; font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ink-2); max-width: 54ch; }
.hero .cta { display: flex; flex-direction: column; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 6px; width: 100%; }

.search { position: relative; width: min(560px, 100%); }
.search input { width: 100%; height: 58px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 18px; padding: 0 18px 0 48px; font: 15px var(--mono); box-shadow: 0 0 0 5px rgba(8, 9, 10, .05), var(--shadow); }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(8, 9, 10, .08), var(--shadow); }
.search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink); }
.tour-link { font-size: 14.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; padding: 6px 8px; border-radius: 8px; }
.tour-link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.search ul { position: absolute; z-index: 1600; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); max-height: 320px; overflow: auto; }
.search li { padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.search li[aria-selected="true"], .search li:hover { background: var(--surface-3); }

/* example card, overlapping the bottom of the hero */
.example { position: relative; z-index: 2; margin: -110px auto 0; width: min(560px, calc(100% - 32px)); background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .95); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.example .label { grid-column: 1 / -1; }
.example .todo { grid-column: 1 / -1; margin: 0; }
.example h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; font-weight: 600; }
.example .nums { font: 500 15px var(--mono); color: var(--ink-2); grid-column: 1 / -1; }
.example .nums b { color: var(--ink); font-weight: 600; }
.example button { grid-column: 1 / -1; justify-self: start; margin-top: 6px; height: 40px; border-radius: 12px; font-size: 14px; }

.proofbar { position: relative; z-index: 1; padding: 34px 0 40px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proofbar .label { text-align: center; display: block; margin-bottom: 18px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { text-align: center; padding: 6px 12px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 500 clamp(28px, 3.4vw, 40px)/1.05 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); font-size: 13.5px; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 9vw, 112px) 0; }
.sec.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.h2 { margin: 0 0 14px; font-weight: 600; letter-spacing: -.04em; line-height: 1.02; font-size: clamp(30px, 4vw, 52px); }
.h2, .h2 .dim { text-wrap: balance; }
.h2 .dim { display: block; color: #7f8187; font-weight: 500; } /* 3.5:1, above the 3:1 large text needs */
.sub { color: var(--ink-2); max-width: 56ch; margin: 0; font-size: 16.5px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 36px; }
.sec-head .sub { max-width: 46ch; }
.sec-head.wide { grid-template-columns: 1fr; }
.sec-head.wide .h2 { max-width: 24ch; }

/* product window */
.window { border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); overflow: hidden; }
.chrome { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.chrome .url { flex: 1; text-align: center; font: 12px var(--mono); color: var(--ink-3); }
.chrome .live { font: 12px var(--mono); color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.chrome .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(31, 157, 92, .15); }
.app { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 640px; }
.mapcol { position: relative; border-right: 1px solid var(--line); display: grid; grid-template-rows: 1fr auto; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .count { font-family: var(--mono); color: var(--ink-3); }

.panel { padding: 24px; max-height: 760px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.panel h2 { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; margin: 6px 0 12px; }
.panel .label { display: block; }
.now { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 18px 0 8px; }
.now div { background: var(--surface-2); padding: 14px 16px; }
.now b { display: block; font: 500 30px/1.1 var(--mono); letter-spacing: -.04em; margin-top: 4px; }
.now b small, .now small { color: var(--ink-3); font: 12px var(--sans); letter-spacing: 0; }
.std { color: var(--ink-3); font-size: 12.5px; margin: 0 0 4px; }
.last { font: 12.5px var(--mono); color: var(--ink-2); margin: 10px 0 2px; }
.last.off { color: var(--nodata-ink); font-weight: 600; }
.aqi { margin: 14px 0 0; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); }
.aqi b { display: block; font-size: 22px; letter-spacing: -.02em; font-weight: 600; margin: 2px 0; }
.aqi p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.aqi .cigs { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13.5px; }
.aqi .cigs a { color: var(--ink-3); white-space: nowrap; }
.cig-row { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; align-items: center; }
.cig-row svg { width: 24px; height: 8px; }
.cig-row i { font: 12px var(--mono); font-style: normal; color: var(--ink-3); }
.advice { margin: 12px 0 20px; padding: 13px 15px; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.5; border: 1px solid; }
.advice b { font-weight: 600; }
.advice.ok { background: var(--ok-tint); border-color: var(--ok-line); color: #12401a; }
.advice.watch { background: var(--watch-tint); border-color: var(--watch-line); color: #4d3300; }
.advice.flag { background: var(--flag-tint); border-color: var(--flag-line); color: #5c1414; }
.advice.nodata { background: var(--nodata-tint); border-color: var(--line-2); color: var(--ink-2); }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font: 500 12px var(--mono); white-space: nowrap; }
.pill .ico { width: 12px; height: 12px; flex: none; }
.pill.ok { background: var(--ok-tint); color: var(--ok-ink); }
.pill.watch { background: var(--watch-tint); color: var(--watch-ink); }
.pill.flag { background: var(--flag-tint); color: var(--flag-ink); }
.pill.nodata { background: var(--nodata-tint); color: var(--nodata-ink); }

.checks { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.check { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; transition: border-color .25s, box-shadow .25s; }
.check h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.check .q { color: var(--ink-3); font-size: 12.5px; }
.check .pill { align-self: start; }
.check p { margin: 4px 0 0; grid-column: 1 / -1; color: var(--ink-2); font-size: 13.5px; }
.check .param { font: 500 11px var(--mono); color: var(--ink-2); background: var(--surface-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.check p.micro, .advice .micro { font-size: 12.5px; color: var(--ink-3); }
.advice .micro { display: block; margin-top: 8px; color: inherit; opacity: .8; }
.todo { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.todo.ok { color: var(--ok-ink); } .todo.watch { color: var(--watch-ink); } .todo.flag { color: var(--flag-ink); } .todo.nodata { color: var(--nodata-ink); }
.raised { margin: 4px 0 0; font: 12px var(--mono); color: var(--ink-3); }
.raised b { color: var(--ink-2); font-weight: 500; }
.check.spot { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(8, 9, 10, .06); }

.chartbox { border-top: 1px solid var(--line); padding-top: 18px; }
.chartbox h3 { font-size: 14.5px; margin: 0 0 2px; font-weight: 600; }
.chartbox .csub { color: var(--ink-3); font-size: 13px; margin: 0 0 10px; }
.chartbox select { font: 13px var(--sans); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.chartwrap { position: relative; height: 240px; }
.chartlegend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; flex-wrap: wrap; align-items: center; }
.chartlegend i { display: inline-block; width: 18px; height: 2px; vertical-align: 4px; margin-right: 6px; }
.chartlegend i.band { height: 10px; vertical-align: 0; background: var(--band); border: 1px solid var(--watch-line); }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
table.data th, table.data td { text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--line); font-family: var(--mono); color: var(--ink-2); }
table.data th:first-child, table.data td:first-child { text-align: left; }
.nbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nbs .label { width: 100%; }
.nbs button { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 9px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.nbs button:hover { border-color: var(--ink-2); }
.nbs .ico { width: 11px; height: 11px; }

.empty { display: grid; place-items: center; align-content: center; text-align: center; gap: 10px; min-height: 420px; color: var(--ink-3); }
.empty h2 { color: var(--ink); margin: 0; font-size: 20px; }
.skel { display: inline-block; min-width: 2ch; background: linear-gradient(90deg, var(--line), #f7f7f8, var(--line)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 8px; color: transparent; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* three checks */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.trio article { background: var(--surface); padding: 28px 26px 30px; display: grid; gap: 10px; align-content: start; }
.trio .num { font: 12px var(--mono); color: var(--ink-3); }
.trio h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.trio p { margin: 0; color: var(--ink-2); font-size: 15px; }
.trio .glyph { height: 92px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 8px; }

/* proof: big number + terminal */
.proof { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.bignum { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(160deg, #ffffff, #f1f1f3); padding: 30px; display: grid; align-content: space-between; gap: 24px; box-shadow: var(--shadow); }
.bignum b { font: 500 clamp(64px, 9vw, 120px)/.9 var(--mono); letter-spacing: -.06em; }
.bignum p { margin: 0; color: var(--ink-2); }
.term { border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.term pre { margin: 0; padding: 18px 20px; font: 12.5px/1.65 var(--mono); color: var(--ink-2); overflow: auto; max-height: 360px; white-space: pre-wrap; }
.term .ok { color: var(--ok-ink); } .term .dim { color: var(--ink-3); }

/* architecture grid */
.arch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.arch div { background: var(--surface); padding: 16px 18px; display: grid; gap: 3px; }
.arch b { font-weight: 600; font-size: 15px; }
.arch span { color: var(--ink-3); font-size: 13px; }
.flow { font: 13px var(--mono); color: var(--ink-2); margin: 18px 0 0; overflow-x: auto; white-space: nowrap; padding-bottom: 6px; }

.limits { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line); border-left: 2px solid var(--ink-3); border-radius: var(--r-sm); color: var(--ink-2); background: var(--surface-2); }
.limits strong { color: var(--ink); font-weight: 600; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 2px; }
.faq summary { cursor: pointer; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 12px 0 0; color: var(--ink-2); max-width: 70ch; }

/* closing fog + footer */
.closing { position: relative; isolation: isolate; text-align: center; padding: clamp(80px, 11vw, 140px) 0 0; background: linear-gradient(180deg, var(--bg) 0%, #ececee 55%, #dcdcdf 100%); overflow: hidden; border-top: 1px solid var(--line); }
.closing h2 { margin: 0 auto 14px; font-size: clamp(32px, 5vw, 64px); letter-spacing: -.045em; line-height: 1; font-weight: 600; max-width: 18ch; }
.closing h2 .dim { display: block; color: #7f8187; font-weight: 500; }
.closing p { color: var(--ink-2); margin: 0 auto 26px; }
.closing .scene { height: 260px; margin-top: 40px; }
footer { background: #dcdcdf; color: var(--ink-2); font-size: 13.5px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; padding-top: 40px; padding-bottom: 48px; }
footer .big { font: 500 clamp(40px, 7vw, 88px)/.9 var(--mono); letter-spacing: -.06em; color: var(--ink); margin: 0 0 10px; }
footer h2 { font: 500 12px var(--mono); color: var(--ink-2); margin: 6px 0 10px; letter-spacing: .04em; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ---------- story: the 10-second explainer ---------- */
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head.center .h2 { max-width: 22ch; text-wrap: balance; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { position: relative; display: grid; gap: 10px; align-content: start; }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -24px; top: 92px; font: 20px var(--mono); color: var(--ink-3); }
.step-art { height: 210px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; padding: 18px; overflow: hidden; }
.step-n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 12px var(--mono); color: var(--ink-2); background: var(--surface); margin-top: 6px; }
.step h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; font-weight: 600; }
.step p { margin: 0; color: var(--ink-2); max-width: 38ch; }
.reading { display: grid; justify-items: center; gap: 6px; text-align: center; }
.reading .big { font: 500 64px/1 var(--mono); letter-spacing: -.05em; }
.reading .unit { font: 12px var(--mono); color: var(--ink-3); }
.reading .who { font-size: 13px; color: var(--ink-2); }
.nbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; width: 100%; }
.nb { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; display: grid; gap: 1px; min-width: 0; }
.nb b { font: 500 20px/1.1 var(--mono); letter-spacing: -.03em; }
.nb span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbmid { grid-column: 1 / -1; text-align: center; font: 12.5px var(--mono); color: var(--ink-2); margin-top: 2px; }
.nbmid b { color: var(--ink); }
.verdict { display: grid; justify-items: center; gap: 12px; text-align: center; }
.verdict .use { font-size: 15px; color: var(--ink-2); }
.verdict .use b { display: block; font: 500 44px/1.05 var(--mono); letter-spacing: -.05em; color: var(--ink); }

/* ---------- meanings ---------- */
.meanings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.meaning { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 12px; align-content: start; }
.meaning .head { display: flex; align-items: center; gap: 12px; }
.meaning .head .ico { width: 30px; height: 30px; }
.meaning h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; font-weight: 600; }
.meaning dl { margin: 0; display: grid; gap: 8px; }
.meaning dt { font: 12px var(--mono); color: var(--ink-3); }
.meaning dd { margin: 0; color: var(--ink-2); font-size: 15px; }
.meaning .now-count { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.meaning .now-count b { font: 500 30px/1 var(--mono); letter-spacing: -.04em; }
.meaning .now-count span { color: var(--ink-3); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; color: var(--ink); }
.chips button:hover { border-color: var(--ink-2); background: var(--surface-3); }
.footnote { margin: 16px 0 0; color: var(--ink-3); font-size: 13.5px; }

/* ---------- three checks with examples ---------- */
.checks3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.c3 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 22px; display: grid; gap: 10px; align-content: start; }
.c3-art { height: 160px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 6px; display: grid; place-items: center; overflow: hidden; }
.c3-art svg { width: 100%; height: 100%; display: block; }
.c3 h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; font-weight: 600; }
.c3 p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.c3 .c3-case { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.c3 .c3-case button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.person { padding: 4px 4px 0; display: grid; gap: 10px; align-content: start; }
.person svg { width: 44px; height: 44px; color: var(--ink-2); }
.person h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; font-weight: 600; }
.person p { margin: 0; color: var(--ink-2); }

/* ---------- proof ---------- */
.proof2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.proof2 .sub + .sub { margin-top: 14px; }
.proof2 .h2 { font-size: clamp(28px, 3.4vw, 46px); }
.sub.small { font-size: 14.5px; color: var(--ink-3); }
.sub a { color: var(--ink); }
.ticks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.ticks i { aspect-ratio: 1; border-radius: 9px; background: var(--ok-tint); border: 1px solid var(--ok-line); display: grid; place-items: center; animation: pop .5s var(--ease) both; }
.ticks i svg { width: 55%; height: 55%; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- AWS pipeline ---------- */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; position: relative; }
.pipe li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 16px 18px; display: grid; gap: 4px; align-content: start; box-shadow: var(--shadow); }
.pipe li:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font: 18px var(--mono); color: var(--ink-3); }
.pipe li:last-child { background: var(--ink); color: #f5f5f2; border-color: var(--ink); }
.pipe li:last-child span { color: #b9bbc0; }
.pipe .pipe-k { font: 11.5px var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.pipe b { font-weight: 600; font-size: 15.5px; }
.pipe span { color: var(--ink-2); font-size: 13.5px; }
.aws-ops { margin: 28px 0 0; max-width: 72ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.aws-ops b { color: var(--ink); font-weight: 600; }

/* 3D map */
.mapcol { overflow: hidden; }
#map { min-height: 560px; background: #e8e7e4; }
.mapcol::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; background: linear-gradient(180deg, rgba(233, 232, 229, .9), rgba(233, 232, 229, 0)); z-index: 1; }
.enter3d { position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink); background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); font-weight: 500; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.enter3d:hover { background: #fff; }
/* map or list: one frame, the two buttons float at its top left (the list view's own markup had no styles) */
.map-toolbar { display: contents; } /* #map and #list-view stay the column's first row, so the map fills it again */
#map[hidden] { display: none !important; }
.map-view-btns { position: absolute; left: 16px; top: 16px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.map-view-btns .enter3d { position: static; }
.list-toggle { height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); font: 500 14px var(--sans); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
.list-toggle:hover, .list-toggle[aria-pressed="true"] { background: #fff; border-color: var(--ink); }
.window.immersive .list-toggle { display: none; }
.mapcol.listing::after { display: none; }
#list-view { margin-top: 72px; max-height: 688px; overflow: auto; border-top: 1px solid var(--line); }
.monitor-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.monitor-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); border-bottom: 1px solid var(--line-2); text-align: left; padding: 0; }
.sort-btn { display: block; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; font: 500 12px var(--mono); letter-spacing: .02em; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.sort-btn small { font-size: 11px; }
.sort-btn:hover, th[aria-sort="ascending"] .sort-btn, th[aria-sort="descending"] .sort-btn { color: var(--ink); }
.monitor-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.monitor-table td.mono { font-variant-numeric: tabular-nums; }
.monitor-table tbody tr:hover { background: var(--surface-2); }
.list-open { padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--ink); text-align: left; cursor: pointer; }
.list-open:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the panel's copy-link button, in the site's pill style */
.meta:has(.share-btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.share-btn { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 500 12.5px var(--sans); color: var(--ink-2); cursor: pointer; vertical-align: middle; }
.share-btn:hover { color: var(--ink); border-color: var(--ink); }
/* the panel title takes focus when a monitor is opened (for screen readers); no box drawn around it */
.panel h2:focus { outline: none; }
.enter3d span { font-family: var(--mono); }
.exit3d { white-space: nowrap; margin-left: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 500 13px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.exit3d:hover { border-color: var(--ink); }
.legend { position: relative; z-index: 3; background: var(--surface); }
#map { position: relative; cursor: grab; }
#map:active { cursor: grabbing; }
#map canvas { display: block; width: 100%; height: 100%; }
.gt3d-markers { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.gt-marker { position: absolute; left: 0; top: 0; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; will-change: transform; }
.gt-marker svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); transition: transform .15s var(--ease); }
.gt-marker:hover svg, .gt-marker:focus-visible svg { transform: scale(1.25); }
.gt-marker.sel svg { transform: scale(1.6); }
.gt-marker.sel { z-index: 5; }
#map.flat { display: grid; place-items: center; align-content: center; gap: 8px; padding: 16px; cursor: default; }
.flatmap { position: relative; width: min(100%, 560px); }
.flatmap svg { display: block; width: 100%; height: auto; }
.flatmap path { fill: #f1f1ee; stroke: #d2d2ce; stroke-width: .0015; stroke-linejoin: round; }
.flatmap .gt-marker { transform: translate(-50%, -50%); }
.flatnote { margin: 0; font: 12px var(--mono); color: var(--ink-3); }
.gt-marker.ncr svg { opacity: .85; }
.gt-marker::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font: 500 12px/1.3 var(--sans); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s; }
.gt-marker:hover::after, .gt-marker:focus-visible::after, .gt-marker.sel::after { opacity: 1; }

/* full-screen 3D */
html.lock, html.lock body { overflow: hidden; }
.window.immersive { position: fixed; inset: 0; z-index: 3000; border-radius: 0; border: 0; box-shadow: none; display: grid; grid-template-rows: auto 1fr; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.window.immersive .app { position: relative; min-height: 0; grid-template-columns: 1fr; }
.window.immersive .mapcol { border: 0; }
.window.immersive #map { min-height: 0; height: 100%; }
.window.immersive .mapcol::after { height: 160px; }
.window.immersive .mapcol::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 90% at 50% 60%, rgba(236, 235, 232, 0) 55%, rgba(236, 235, 232, .65) 100%); }
.window.immersive .legend { position: absolute; left: 16px; bottom: 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-width: min(560px, calc(100% - 32px)); }
.window.immersive .panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(420px, calc(100% - 32px)); max-height: none; z-index: 4; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }

/* demo tour caption */
.tour { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4000; max-width: min(780px, calc(100vw - 32px)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); color: var(--ink); padding: 14px 20px; border-radius: 16px; border: 1px solid var(--line-2); font-size: 18px; line-height: 1.4; box-shadow: var(--shadow-lg); }
.tour .label { display: block; margin-bottom: 2px; }

/* motion */
.rise { animation: rise .8s var(--ease) both; }
.rise:nth-child(2) { animation-delay: .08s; } .rise:nth-child(3) { animation-delay: .16s; } .rise:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.drift { animation: drift 38s linear infinite alternate; }
.drift.slow { animation-duration: 60s; }
@keyframes drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* responsive */
@media (max-width: 1020px) {
  .app { grid-template-columns: 1fr; }
  .mapcol { border-right: 0; border-bottom: 1px solid var(--line); }
  #map { min-height: 420px; }
  .window.immersive .panel { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; height: 46%; }
  .window.immersive .legend { display: none; }
  .panel { max-height: none; }
  .trio, .proof, .proof2, .checks3, .people { grid-template-columns: 1fr; }
  .meanings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse { display: none; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -32px; }
  .pipe { grid-template-columns: 1fr; gap: 26px; }
  .pipe li:not(:last-child)::after { content: "↓"; right: auto; left: 24px; top: auto; bottom: -24px; transform: none; }
  .arch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* on a phone the exit sits just above the bottom sheet, where a thumb reaches */
  .window.immersive .exit3d { position: fixed; z-index: 6; right: 12px; bottom: calc(46% + 24px); height: 44px; padding: 0 16px; box-shadow: var(--shadow); }
  .meanings { grid-template-columns: 1fr; }
  .nav nav a { display: none; }
  .fresh { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .stat:nth-child(3) { border-left: 0; }
  .hero { min-height: 760px; }
  .panel { padding: 18px; }
  .now b { font-size: 24px; }
  .chrome .url { display: none; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
  footer .wrap > div:first-child { grid-column: 1 / -1; }
}

/* ── mobile bottom sheet (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* map fills the screen height above the sheet */
  .window .app { display: block; position: relative; }
  .window .mapcol { border-bottom: 0; }
  #map { min-height: 52svh; height: 52svh; }

  /* panel becomes a bottom sheet */
  .window .panel {
    position: relative;
    max-height: 44svh;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    border-radius: var(--r) var(--r) 0 0;
    padding: 12px 16px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.07);
  }
  /* drag handle hint */
  .window .panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
    margin: 0 auto 10px;
  }

  /* immersive 3D: sheet slides to 40% height */
  .window.immersive .panel {
    position: absolute;
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 40svh;
    border-radius: var(--r) var(--r) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }
  /* the exit sits just above this shorter sheet */
  .window.immersive .exit3d { bottom: calc(40svh + 12px); }

  /* prevent nav overflow */
  .nav .wrap { gap: 8px; }
  .now b { font-size: 20px; }
}

/* ---------- why: the problem and our answer ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.why-card { border-radius: var(--r); padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.why-card.problem { background: var(--surface-3); border: 1px solid var(--line-2); }
.why-card.answer { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.why-card h3 { margin: 0; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.15; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.why-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.why-list li { padding-left: 18px; position: relative; color: var(--ink-2); max-width: 60ch; }
.why-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--ink-3); }
.why-list b, .why-checks b { color: var(--ink); font-weight: 600; }
.why-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.why-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-2); }
.why-n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 12px var(--mono); color: var(--ink-2); background: var(--surface-2); }
.why-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.why-punch { margin: 4px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2); font-weight: 500; color: var(--ink); }
.morning { margin: 28px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px clamp(18px, 3vw, 30px); }
.morning figcaption { display: block; margin-bottom: 16px; }
.morning ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.morning li { display: grid; gap: 6px; align-content: start; position: relative; min-width: 0; }
.morning li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 0; font: 14px var(--mono); color: var(--ink-3); }
.morning .t { font: 500 13px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.morning p { margin: 0; color: var(--ink-2); font-size: 15px; }
.morning p b { color: var(--ink); }
.morning .pill { vertical-align: middle; }
@media (max-width: 1020px) {
  .why-grid { grid-template-columns: 1fr; }
  .morning ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .morning li:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) { .morning ol { grid-template-columns: 1fr; } }

/* ---------- every monitor, by area ---------- */
.roster { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px clamp(16px, 2.4vw, 26px) 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.roster-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.roster-head h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; font-weight: 600; }
.roster-search { position: relative; width: 340px; max-width: 100%; }
.roster-search input { width: 100%; height: 40px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 12px 0 36px; font: 13px var(--mono); background: var(--surface-2); color: var(--ink); }
.roster-search input:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.roster-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 12.5px var(--mono); color: var(--ink-2); cursor: pointer; }
.filters button:hover { border-color: var(--ink-3); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters .count, .area h4 .count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filters button[aria-pressed="true"] .count { color: rgba(255, 255, 255, .6); }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 24px; }
.area { display: grid; gap: 8px; align-content: start; min-width: 0; }
.area h4 { margin: 0; font: 500 12px var(--mono); letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.area .chips button { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- formulas and how the checks combine ---------- */
.spec { border-top: 1px solid var(--line); padding-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.spec summary { cursor: pointer; font: 500 12.5px var(--mono); color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.spec summary::-webkit-details-marker { display: none; }
.spec summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); font-size: 12px; }
.spec[open] summary::before { content: "−"; }
.spec ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.spec p { margin: 10px 0 0; font-size: 13.5px; }
.spec b { color: var(--ink); font-weight: 600; }
.spec .spec-why { color: var(--ink-3); font-size: 12.5px; }
.combine { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px clamp(18px, 2.6vw, 28px); display: grid; gap: 10px; }
.combine h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; font-weight: 600; }
.combine p { margin: 0; color: var(--ink-2); max-width: 90ch; }
.combine b { color: var(--ink); }

/* ---------- the October 2025 illustration ---------- */
.spray-stage { position: relative; height: clamp(360px, 46vw, 560px); background: #e8e7e4; overflow: hidden; transition: opacity .4s; }
.spray-stage canvas { display: block; width: 100%; height: 100%; }
.spray-stage.blink { opacity: .35; }
.spray-stage.nogl { height: auto; min-height: 120px; }
.sp-tag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; padding: 8px 12px 9px; margin-top: -10px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; will-change: transform; }
.sp-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: translateX(-50%) rotate(45deg); }
.sp-tag .who { font: 11px var(--mono); color: var(--ink-3); letter-spacing: .03em; }
.sp-tag b { font: 500 26px/1.05 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); transition: color .3s; }
.sp-tag small { font: 10.5px var(--mono); color: var(--ink-3); }
.sp-tag.me.low b { color: #2f6fa8; }
.sp-flag { margin-top: 5px; }
.spray-stage.nogl .sp-tag { display: none; }
@media (max-width: 600px) { .sp-tag { padding: 6px 9px 7px; } .sp-tag .who { font-size: 10px; } .sp-tag b { font-size: 21px; } }
.sp-toggle { margin-left: auto; font: 12px var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.sp-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.sp-caption { margin: 0; flex: 1 1 320px; min-width: 0; font-size: 15px; color: var(--ink-2); min-height: 2.9em; }
.sp-caption b { color: var(--ink); font-weight: 600; }
.sp-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.sp-steps button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); font: 12px var(--mono); color: var(--ink-3); cursor: pointer; }
.sp-steps button.done { color: var(--ink-2); background: var(--surface-3); }
.sp-steps button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.spray .footnote { max-width: 90ch; }

/* open data */
.data-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 32px; }
.data-fields { max-width: 860px; overflow-x: auto; }
table.field-table td { text-align: left; font-family: var(--sans); font-size: 14px; padding: 8px 10px; }
table.field-table td:first-child { font-family: var(--mono); white-space: nowrap; color: var(--ink); }
table.field-table th { text-align: left; padding: 8px 10px; }
@media (max-width: 600px) { table.field-table td, table.field-table th { padding: 7px 6px; } }
.data-licence { max-width: 72ch; color: var(--ink-2); font-size: 14.5px; margin-top: 24px; }

/* the nav also carries the language button: drop the Live pill, then the text links, before anything overflows */
@media (max-width: 1300px) { .pulse { display: none; } }
@media (max-width: 900px) { .nav nav a { display: none; } }

/* the method: a card on the home page, and method.html */
.method-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.method-teaser > div { max-width: 720px; }
.method-intro { padding-top: clamp(48px, 8vh, 96px); padding-bottom: 8px; }
.method-intro .sub { max-width: 70ch; margin-top: 16px; }
.method-back { margin: 20px 0 0; font-size: 14.5px; }
.method-back a { color: var(--ink-2); text-underline-offset: 4px; }
.nav nav a[aria-current="page"] { color: var(--ink); background: rgba(8, 9, 10, .06); }
.val-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.val-card { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 22px 24px; }
.val-card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.val-table td, .val-table th { font-size: 13.5px; padding: 8px 6px; }
.val-table td:first-child { font-family: var(--sans); color: var(--ink); }
.val-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) { .val-grid { grid-template-columns: 1fr; } }