/* Shared look for the article pages: same dark palette and fonts as the app. */
:root {
  color-scheme: dark;
  --bg: #1c2a30;
  --fg: #e8eff1;
  --muted: #a3b4b9;
  --line: #3a4c53;
  --field: #26363d;
  --wind: #7cc0d8;
  --cig: 240, 160, 98;
  --joint: 120, 208, 132;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --zone: var(--joint);
}
body.cig { --zone: var(--cig); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--font-body); }
main { max-width: 680px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(48px + env(safe-area-inset-bottom, 0px)); }
nav.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9rem; }
nav.top .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--fg); text-decoration: none; }
nav.top .brand img { width: 32px; height: 32px; border-radius: 8px; }
h1, h2 { font-family: var(--font-display); line-height: 1.2; text-wrap: balance; }
h1 { font-size: 2rem; letter-spacing: -0.01em; margin: 1.2em 0 0.4em; }
h2 { font-size: 1.5rem; margin: 2.2em 0 0.6em; padding-top: 0.9em; border-top: 1px solid var(--line); color: rgb(var(--zone)); }
a { color: rgb(var(--zone)); }
.lede { font-size: 1.1rem; }
.answer { border: 1px solid rgb(var(--zone)); border-radius: 14px; padding: 14px 16px; background: var(--field); margin: 1.2em 0; }
.answer p { margin: 0; }
.answer b { color: rgb(var(--zone)); }
.cta { display: inline-block; text-align: center; margin: 0.6em 0; padding: 12px 18px; border-radius: 999px; background: rgb(var(--zone)); color: #13201f; font-weight: 700; text-decoration: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 400; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
td.num { font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.note { color: var(--muted); font-size: 0.92rem; }
ul, ol { padding-left: 1.3em; }
li { margin: 0.3em 0; }
footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
footer ul { list-style: none; padding: 0; }
/* Map preview right under the answer: the whole card opens the app. */
.mapcard { display: block; position: relative; margin: 1.2em 0 1.6em; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); color: rgb(var(--zone)); text-decoration: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.mapart { display: block; width: 100%; height: auto; }
.mapcard-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; background: rgb(var(--zone)); color: #13201f; text-align: center; }
.mapcard-cta b { font-family: var(--font-display); font-size: 1.25rem; }
.mapcard-cta b::after { content: " →"; }
.mapcard:hover .mapcard-cta, .mapcard:focus-visible .mapcard-cta { filter: brightness(1.08); }
/* Small button pinned to the bottom of the screen once the map card is out of view. */
.sticky-cta { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 11px 20px; border-radius: 999px; background: rgb(var(--zone)); color: #13201f; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.sticky-cta[hidden] { display: none; }
/* Common questions: each question a small heading over its short answer. */
.faq h3 { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3; margin: 1.3em 0 0.3em; }
.faq p { margin: 0; }