/* skystaapp.com, the dark sheet: the home page and every /spots/** page. The
   app's own palette (SkystaTheme.swift) on a night ground, with the app's
   serif for anything that speaks. spots.css, loaded after this, holds what
   only the spots pages need; pages.css holds the reading pages (the legal
   documents, support, press, the share landing, verified, 404). */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4.woff2") format("woff2"),
       url("/fonts/SourceSerif4.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: dark;       /* the page is dark only; UA parts (scrollbars, autofill) follow */
  --night: #0B1226;         /* the page ground */
  --night-2: #0E1B32;       /* SkystaTheme.inkPrimary, cards, and every other band */
  --night-3: #151C3E;       /* raised */
  --night-deep: #070C1A;    /* below the ground: the footer, where the page ends */
  --line: rgba(255, 252, 247, 0.10);
  --line-2: rgba(255, 252, 247, 0.18);
  --ink-on-sky: #FFFCF7;
  --text: #FFFCF7;
  --text-2: rgba(255, 252, 247, 0.74);
  --text-3: rgba(255, 252, 247, 0.55);
  --paper: #FFFCF7;
  --cream: #FFF7EF;
  --sand: #D8CEC3;
  --ink: #0E1B32;
  --ink2: #545E72;
  --ink3: #666E7E;
  --coral: #FF6C65;
  --coral-warm: #FF8E63;
  --coral-deep: #C5413D;
  --gold: #EBA835;
  --gold-soft: #FFD7C2;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* ONE VERTICAL RHYTHM, and no section invents a number of its own. Every
     band on every page is --band above and below what it holds. Inside a band
     the opening is always the same four steps: the gold eyebrow, --gap-eyebrow,
     the headline, --gap-lede, one line of lede, --gap-thing, then the thing
     itself. A quiet line under the thing sits --gap-note below it. --band
     shrinks on a phone at the foot of this file and every page follows. */
  --band: 96px;
  --gap-eyebrow: 12px;
  --gap-lede: 14px;
  --gap-thing: 34px;
  --gap-note: 30px;
  --measure: 68ch;     /* the widest a line of reading gets, here and on the reading pages */

  /* THE TYPE SCALE, stepping down from the hero. One size means one job, so a
     card's title is the same size on the board, in the promises and in the
     press kit. Nothing but a headline is set in the serif. */
  --t-hero: clamp(38px, 5.4vw, 60px);   /* the hero's one line, and nothing else */
  --t-page: clamp(34px, 5vw, 54px);     /* a page's own title: /spots/**, the legal pages, 404 */
  --t-sec: clamp(30px, 4vw, 42px);      /* a section's headline */
  --t-sub: clamp(23px, 2.2vw, 26px);    /* a card's title, a document's section */
  --t-card: 19px;                       /* a headline inside a card or a row */
  --t-eyebrow: 12px;                    /* the gold eyebrow over a headline */
  --t-micro: 11px;                      /* the small capital label over a number */
  --ls-eyebrow: 2.2px;
  --ls-micro: 1.6px;

  /* CORNERS. Cards, panels, maps and lists take --r-card; the things you type
     in and press take --r-input; a pill is a pill; and the corners that stand
     for a phone (the app's screenshots, the hero's console, the phone mock)
     take --r-device, because they are a device and not a card. */
  --r-card: 22px;
  --r-input: 14px;
  --r-pill: 999px;
  --r-device: 30px;
  --radius: var(--r-card);   /* the older name, still read by spots.css and pages.css */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.35), 0 26px 62px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; margin: 0; }
/* The hidden attribute wins over any display a class sets. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* Anchor jumps and the why panel land below the sticky header, not under it. */
section[id] { scroll-margin-top: 66px; }
/* Without JavaScript the empty map, list and city grid would be bare boxes; the <noscript> line speaks instead. */
.no-js .board-tools, .no-js .board, .no-js .board-status, .no-js .spots-tools, .no-js .spots-grid { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  background: var(--night);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
::selection { background: var(--coral); color: var(--ink-on-sky); }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ONE FOCUS STYLE, everywhere: the gold ring, three pixels out. It never
   touches an element's own corners, so a focused pill stays a pill; a plain
   link, which has no corners of its own, gets a soft six. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
a:not([class]):focus-visible, summary:focus-visible { border-radius: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------ header */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 18, 38, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
header.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.wordmark {
  font-family: var(--serif); font-weight: 650; font-size: 23px;
  color: var(--text); text-decoration: none; letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  border-radius: 10px;   /* so the one focus ring has corners to follow here too */
}
.wordmark img { width: 30px; height: 30px; border-radius: 8px; }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a {
  color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
}
.top-nav a:hover { color: var(--text); background: rgba(255, 252, 247, 0.06); }
/* THE ONE BUTTON FAMILY. A pill is the round one (.pill here, .btn on the
   spots pages, .locate, .fullscreen, .segment, .chips); a plate is the square
   one (.go, .sheet-act, .hero-primary, .store-chip). Coral fills the one
   action a screen is really asking for and nothing else. */
.pill {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--coral); color: var(--ink-on-sky); text-decoration: none; font-weight: 700; font-size: 14.5px;
  padding: 10px 18px; border-radius: var(--r-pill); white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.pill:hover { background: #FF7B74; transform: translateY(-1px); }

/* -------------------------------------------------------------- hero */
/* The visitor's own sky, drawn the way the app's Home draws it. The canvas
   is the sky (js/sky.js: gradients, stars, the real sun and moon); the DOM is
   the words and the console. The section runs up under the sticky header so
   the sky shows through the header's glass, and the console at the foot is
   laid out in every state (hidden, not removed) so the horizon, which is the
   plate's top edge, never jumps when the reading arrives. */
:root { --header-h: 66px; }
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0;
  margin-top: calc(-1 * var(--header-h));
  min-height: min(92vh, 960px);
  background: var(--night);
  color: var(--ink-on-sky);
  display: flex; flex-direction: column;
}
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* THE FIRST PAGE TURN. Whatever colour the sky ends on, the last stretch of it
   sinks into the page's own night, so the section under it meets a ground it
   already knows instead of a cut. It sits over the canvas and under the words
   (the canvas and this are both z-index 0; .hero-body is 1). */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 18, 38, 0) 0%, rgba(11, 18, 38, 0.34) 52%, var(--night) 100%);
}
.hero-body {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 20px; min-height: inherit;
}
/* The top row: the chip naming the place on the left and, while the hero
   shows a place the visitor picked, the way back on the right. A failure of
   the way back is one line under them. */
.hero-top {
  width: 100%; max-width: 560px;
  padding-top: calc(var(--header-h) + 20px);
  min-height: calc(var(--header-h) + 20px + 33px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px;
}
.hero-chip, .hero-back {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 8px 13px; border-radius: 999px;
  font: 600 12.5px/1.2 var(--sans); color: var(--ink-on-sky);
  background: rgba(14, 27, 50, 0.32);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 0 0 0.5px rgba(255, 252, 247, 0.20);
}
.hero[data-tone="night"] .hero-chip, .hero[data-tone="night"] .hero-back { background: rgba(7, 12, 26, 0.32); }
.hero-chip { min-width: 0; }
.hero-chip svg { width: 11px; height: 11px; flex: none; }
.hero-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Viewing", before a place the visitor picked: lighter, so the name stays the loud part. */
.hero-chip-cue { flex: none; font-weight: 500; opacity: 0.8; }
/* The way back wears the chip's dress on a button, with a hit area a thumb can find. */
.hero-back { position: relative; flex: none; border: 0; cursor: pointer; white-space: nowrap; transition: background 0.18s ease; }
.hero-back::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
.hero-back:hover { background: rgba(14, 27, 50, 0.52); }
.hero[data-tone="night"] .hero-back:hover { background: rgba(7, 12, 26, 0.52); }
.hero-back:disabled { cursor: progress; opacity: 0.85; }
.hero-note { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--ink-on-sky); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.55); }
.hero-mast {
  width: 100%; max-width: 560px; padding-top: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-cold, .hero-live { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* The eyebrow on the sky is the section eyebrow in its bright dress: gold
   turns to gold-soft over a picture, which is the one rule for it. */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 var(--t-eyebrow)/1.3 var(--sans); letter-spacing: var(--ls-eyebrow);
  color: var(--gold-soft);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.55);
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 4px rgba(235, 168, 53, 0.8); visibility: hidden; flex: none; }
.hero-eyebrow.tone-live { color: var(--gold); }
.hero-eyebrow.tone-live .dot:not(.ghost) { visibility: visible; }
.hero-eyebrow.tone-night { color: #A9A1D6; }
.hero-h1 {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: var(--t-hero); line-height: 1.06; margin-top: var(--gap-eyebrow);
  text-wrap: balance; max-width: 560px;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.40), 0 0 4px rgba(0, 0, 0, 0.35);
}
.hero-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-primary {
  background: var(--paper); color: var(--ink); border: 0; border-radius: var(--r-input);
  padding: 14px 30px; min-height: 50px; font-weight: 700; font-size: 16.5px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.hero-primary:hover { transform: translateY(-1px); }
.hero-primary:disabled { cursor: progress; opacity: 0.85; transform: none; }
/* The quiet link and the privacy line sit low on the cold sky, where by day
   the scrim is clear and the sky is pale, so they get the full ink and the
   eyebrow's two shadows rather than a tint. */
.hero-quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 10px;
  color: var(--ink-on-sky); font-weight: 600; font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 252, 247, 0.5);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.55);
}
.hero-quiet:hover { color: var(--ink-on-sky); text-decoration-color: currentColor; }
.hero-fail {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: 19px; line-height: 1.3; max-width: 34ch;
  text-shadow: 0 2px 11px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.45);
}
.hero-privacy { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--ink-on-sky); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.55); }
.hero-time {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  padding-top: 6px; white-space: nowrap;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.40);
}
.hero-time .digits {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: 92px; line-height: 1; font-variant-numeric: tabular-nums;
}
.hero-time .meridiem { font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600; font-size: 21px; letter-spacing: 0.5px; }
.hero-time .ghost { visibility: hidden; }
.hero-verdict {
  margin-top: 10px; max-width: 300px;
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: 21px; line-height: 1.25; text-wrap: balance;
  text-shadow: 0 2px 11px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.45);
}
.hero-why {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; padding: 0 8px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: rgba(255, 252, 247, 0.86);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 252, 247, 0.4);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero-why:hover { color: var(--ink-on-sky); text-decoration-color: currentColor; }
.hero-nowindow {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: 22px; line-height: 1.3; max-width: 320px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* the console: the app's paper plate over a glass deck, with the anchors where the tabs would be */
.hero-console { margin-top: auto; width: 100%; max-width: 560px; padding-top: 28px; margin-bottom: 18px; }
.hero-shell {
  border-radius: var(--r-device); overflow: hidden;
  background: rgba(14, 27, 50, 0.38);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(255, 252, 247, 0.16);
}
.hero-plate {
  display: flex; align-items: stretch; width: 100%; min-height: 91px;
  background: var(--paper); color: var(--ink); border: 0; border-radius: var(--r-device) var(--r-device) 0 0;
  padding: 0 7px; cursor: pointer; text-align: left; font: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(216, 206, 195, 0.85);
}
.hero-plate:focus-visible { outline-offset: -4px; }
.score-cell { width: 100px; flex: none; display: grid; place-items: center; position: relative; }
.ring-canvas { width: 56px; height: 56px; display: block; }
.score-num {
  position: absolute; font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: 29px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink);
}
.plate-divider { width: 1px; flex: none; margin: 10px 0; background: rgba(216, 206, 195, 0.9); }
.action-cell { flex: 1; min-width: 0; padding: 12px 6px 12px 29px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.action-title {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: 19px; line-height: 1.2; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.action-second { font: 500 11.5px/1.3 var(--sans); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-plate .chev { align-self: center; padding-right: 16px; color: var(--coral-deep); font-weight: 700; font-size: 20px; line-height: 1; }
.hero-deck { height: 62px; display: flex; align-items: center; justify-content: space-around; gap: 6px; padding: 0 18px; }
.hero-deck div { text-align: center; min-width: 0; }
.hero-deck b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: rgba(255, 252, 247, 0.74); white-space: nowrap; }
.hero-deck span { display: block; margin-top: 2px; font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-deck div.next span { color: var(--gold-soft); }

/* the states */
.hero:not([data-mode="live"]) .hero-live { display: none; }
.hero[data-mode="live"] .hero-cold { display: none; }
.hero:not([data-mode="live"]) .hero-console, .hero-console.is-off { visibility: hidden; }
.hero[data-mode="failed"] .hero-primary { display: none; }
.hero:not([data-mode="failed"]) .hero-fail { display: none; }
.hero[data-mode="live"] .hero-live, .hero[data-mode="live"] .hero-console { animation: rise 0.5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* compact: under 720px tall, the app's smaller sizes */
.hero--compact .hero-top { padding-top: calc(var(--header-h) + 8px); min-height: calc(var(--header-h) + 8px + 33px); }
.hero--compact .hero-mast { padding-top: 10px; }
.hero--compact .hero-time .digits { font-size: 72px; }
.hero--compact .hero-time .meridiem { font-size: 17px; }
.hero--compact .hero-verdict { font-size: 19px; margin-top: 6px; }
.hero--compact .hero-plate { min-height: 83px; }
.hero--compact .score-cell { width: 92px; }
.hero--compact .ring-canvas { width: 50px; height: 50px; }
.hero--compact .score-num { font-size: 26px; }
.hero--compact .action-title { font-size: 18px; }
.hero--compact .action-second { font-size: 11px; }

/* the plate: the app's console, the Sky Score cell */
.plate {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); color: var(--ink);
  border-radius: 20px; padding: 12px 18px 12px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.4);
}
.ring { position: relative; width: 64px; height: 64px; flex: none; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: rgba(14, 27, 50, 0.12); stroke-width: 4.5; }
/* The arc's stroke is a gradient each SVG carries in its own <defs> and names in
   its stroke attribute, so a ring never depends on a gradient elsewhere on the page. */
.ring .arc {
  fill: none; stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 175.93; stroke-dashoffset: 175.93;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ring .num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 27px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plate-say { display: grid; gap: 2px; min-width: 0; }
.plate-say .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink2);
}
.plate-say .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.plate-say .verdict { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--ink); }

/* ---------------------------------------------------------- sections */
/* EVERY SECTION HAS THE SAME ANATOMY: the gold eyebrow, the headline, one
   line of lede, then the thing itself. Nothing sets its own padding. */
section { padding: var(--band) 0; }
.sec-head { max-width: 62ch; }
/* The one variation: a head that carries a way out on its right (the spots
   section's "Browse all"). The words underneath keep the same measure. */
.sec-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.sec-head--row > div { max-width: 62ch; }
.pill--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.pill--ghost:hover { background: rgba(255, 252, 247, 0.06); }
/* The eyebrow over a section's headline: gold on a ground, gold-soft over a
   picture or a gradient, where gold would go quiet. Nothing else is gold. */
.kicker {
  display: block; font-size: var(--t-eyebrow); font-weight: 800; letter-spacing: var(--ls-eyebrow); line-height: 1.4;
  text-transform: uppercase; color: var(--gold);
}
h2 {
  font-family: var(--serif); font-weight: 640;
  font-size: var(--t-sec); line-height: 1.12;
  margin: var(--gap-eyebrow) 0 var(--gap-lede); text-wrap: balance;
}
.lede { color: var(--text-2); font-size: 17.5px; max-width: 62ch; }
.lede a, .closer a { color: var(--gold); font-weight: 600; text-decoration: none; }
.lede a:hover, .closer a:hover { text-decoration: underline; }
/* The first thing a section holds, always the same distance under its lede. */
.search, .spots-bar, .app-shots, .promises, .faq-list { margin-top: var(--gap-thing); }
/* The quiet line a section signs off with, always the same distance under it. */
.score-honest, .closer, .spots-door, .map-note { margin-top: var(--gap-note); }

/* ------------------------------------------------------- the page turns */
/* THE PAGE ALTERNATES TWO GROUNDS AND NEVER TWICE IN A ROW: the night, which
   is the page's own, and one shade up, which is a panel laid on it. Hero,
   panel, night, panel, night, panel, night, footer. A reader always knows a
   page has turned, and a hairline draws every seam exactly once. The panel
   also catches a little light along its top edge, the way a fresh page does.
   The last two names are the spots pages' own panels, so a page turn looks the
   same whichever page of the site a reader happens to be on. */
.score, .app, .faq, .spots-by, .spot-score {
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.030) 0%, rgba(255, 252, 247, 0) 190px),
    var(--night-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------- the arrival */
/* Each section rises a few pixels into place the first time it is reached,
   once and never again, and nothing above the fold moves at all. js/reveal.js
   hands out these classes, so a reader with no JavaScript is handed the whole
   page at full opacity; under prefers-reduced-motion the script hands out
   nothing, and the block at the foot of this file is the second lock. */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal-on { transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
/* The spots panel fades and never moves: its map goes full screen out of a
   fixed box, and a transform on the panel would change what "fixed" is
   measured from. Nothing that holds the map is ever given a transform. */
.reveal--fade { transform: none; }
/* A row of cards arrives left to right, a beat apart. */
.app-shots > .reveal:nth-child(2), .promises > .reveal:nth-child(2) { transition-delay: 80ms; }
.app-shots > .reveal:nth-child(3), .promises > .reveal:nth-child(3) { transition-delay: 160ms; }
.promises > .reveal:nth-child(4) { transition-delay: 240ms; }

/* --------------------------------------------------------- the score */
.search { max-width: 760px; position: relative; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--night); border: 1px solid var(--line-2); border-radius: var(--r-card);
  padding: 6px 6px 6px 18px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.search-box:focus-within { border-color: rgba(255, 252, 247, 0.4); box-shadow: 0 0 0 4px rgba(235, 168, 53, 0.14); }
.search-box .mag { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.search-box input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text);
  font: inherit; font-size: 17px; padding: 12px 0; outline: none;
}
.search-box input::placeholder { color: var(--text-3); }
.go {
  background: var(--coral); color: var(--ink-on-sky); border: 0; border-radius: var(--r-input);
  padding: 12px 20px; font-weight: 700; cursor: pointer; min-height: 46px;
}
.go:hover { background: #FF7B74; }
.suggest {
  list-style: none; padding: 6px; margin: 8px 0 0;
  position: absolute; left: 0; right: 0; z-index: 5;
  background: var(--night); border: 1px solid var(--line-2); border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.suggest li {
  padding: 11px 14px; border-radius: 11px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px;
}
.suggest li:hover, .suggest li[aria-selected="true"] { background: rgba(255, 252, 247, 0.07); }
.suggest .where { color: var(--text-3); font-size: 14px; white-space: nowrap; }
.search-or { display: flex; align-items: center; gap: 14px; margin-top: 16px; color: var(--text-3); font-size: 14px; }
.locate {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; min-height: 44px;
}
.locate svg { width: 18px; height: 18px; }
.locate:hover { border-color: rgba(255, 252, 247, 0.4); background: rgba(255, 252, 247, 0.04); }
.search-status { margin-top: 12px; font-size: 14px; color: var(--text-3); min-height: 1.4em; }
.search-status.err { color: var(--gold-soft); }

/* ----------------------------------------------------- the board */
/* Twelve cities at once, each tile under that city's own sky. js/board.js
   draws one still frame per tile through a single offscreen renderer, so the
   grid costs a dozen draws a minute and not a dozen animation loops. Clicking
   a tile opens the whole reading in place, spanning the grid under that
   tile's own row, which is why .sheet is a grid item and not a popup. */
.board-tools { margin-top: var(--gap-thing); display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.segment { display: inline-flex; background: var(--night); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.segment button {
  background: transparent; border: 0; border-radius: var(--r-pill); padding: 10px 24px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--text-2); min-height: 44px;
  transition: background 0.18s ease, color 0.18s ease;
}
.segment button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.segment button:hover[aria-pressed="false"] { color: var(--text); }
.board-order { color: var(--text-3); font-size: 14.5px; }
.board-status { margin-top: 12px; min-height: 1.4em; font-size: 14px; color: var(--text-3); }

.board { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; scroll-margin-top: 84px; }
.tile {
  position: relative; width: 100%; min-height: 236px; padding: 16px 18px 14px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  background: var(--night-3); color: var(--ink-on-sky); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; cursor: pointer; font: inherit; text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tile:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lift); }
.tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tile.is-open { border-color: var(--gold); }
/* The city's own sky, and one wash under the words so a bright noon tile still
   reads. MEASURED, not judged by eye: the brightest thing this renderer draws
   is the white horizon of a midday sky, and cream on white needs the wash to
   carry about 0.6 of itself before the words clear 4.5 to 1. That is why the
   band under the foot is as deep as it is, and why the clear middle is a thin
   one. A text-shadow softens the edge for the eye but counts for nothing. */
.tile-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 18, 38, 0.58) 0%,
    rgba(11, 18, 38, 0.5) 26%,
    rgba(11, 18, 38, 0.14) 36%,
    rgba(11, 18, 38, 0.14) 44%,
    rgba(11, 18, 38, 0.74) 56%,
    rgba(11, 18, 38, 0.85) 100%);
}
.tile-head, .tile-foot, .tile-cue { position: relative; }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tile-names { display: grid; min-width: 0; }
.tile-name { font-family: var(--serif); font-weight: 640; font-size: var(--t-sub); line-height: 1.15; text-shadow: 0 1px 14px rgba(11, 18, 38, 0.5); }
.tile-where { font-size: 13px; color: rgba(255, 252, 247, 0.92); margin-top: 2px; text-shadow: 0 1px 12px rgba(11, 18, 38, 0.5); }
.tile-clock {
  flex: none; font-family: var(--serif); font-size: 17px; font-variant-numeric: tabular-nums;
  color: rgba(255, 252, 247, 0.92); text-shadow: 0 1px 12px rgba(11, 18, 38, 0.5);
}
.tile-foot { grid-row: 2; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.tile-line { display: grid; gap: 1px; min-width: 0; }
.tile-when { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.2; text-shadow: 0 1px 14px rgba(11, 18, 38, 0.55); }
.tile-soon { font-size: 13px; color: rgba(255, 252, 247, 0.92); }
.tile-verdict { font-size: 14px; color: var(--gold-soft); margin-top: 4px; }
.tile.is-quiet .tile-when { font-size: 16px; font-weight: 500; }
.tile.is-quiet .tile-verdict { color: rgba(255, 252, 247, 0.8); }
.tile-plate { flex: none; }
.tile .ring { display: block; width: 58px; height: 58px; }
.tile .ring svg { width: 58px; height: 58px; }
.tile .ring .track { stroke: rgba(255, 252, 247, 0.26); }
.tile .ring .arc { transition: none; }
.tile .ring .num { color: var(--ink-on-sky); font-size: 24px; text-shadow: 0 1px 12px rgba(11, 18, 38, 0.6); }
.tile-cue {
  grid-row: 3; font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: rgba(255, 252, 247, 0.6); transition: color 0.18s ease;
}
.tile:hover .tile-cue, .tile:focus-visible .tile-cue, .tile.is-open .tile-cue { color: var(--gold); }

/* The sheet: the whole reading, in place, across the grid under the row. */
.sheet {
  grid-column: 1 / -1; background: var(--night); border: 1px solid var(--line-2);
  border-radius: var(--r-card); animation: sheetIn 0.22s ease both;
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sheet-in { padding: 24px 26px 26px; display: grid; gap: 18px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sheet-head h3 { font-family: var(--serif); font-weight: 640; font-size: var(--t-sub); line-height: 1.15; }
.sheet-sub { color: var(--text-3); font-size: 14px; margin-top: 2px; }
.sheet-close {
  flex: none; background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 9px 18px; color: var(--text-2); cursor: pointer; font: inherit; font-weight: 600; min-height: 42px;
}
.sheet-close:hover { border-color: rgba(255, 252, 247, 0.4); color: var(--text); }
.sheet-anchors {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0;
}
.sheet-anchors div { min-width: 88px; }
.sheet-anchors b { display: block; font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--text-3); }
.sheet-anchors span { display: block; font-family: var(--serif); font-size: 19px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sheet-anchors .next b { color: var(--gold); }
.sheet-anchors .next span { color: var(--gold-soft); }
.sheet-why .why h3 { font-size: var(--t-card); }
.sheet-why .caption { font-size: 19px; }
.sheet-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sheet-act {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--coral); color: var(--ink-on-sky); border: 0; border-radius: var(--r-input);
  padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; min-height: 46px;
  justify-content: center; text-decoration: none;
}
.sheet-act:hover { background: #FF7B74; }
.sheet-act--link { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.sheet-act--link:hover { background: rgba(255, 252, 247, 0.05); border-color: rgba(255, 252, 247, 0.4); }
.sheet-act-sub { font-weight: 500; font-size: 12.5px; color: var(--text-3); }
.sheet-note { flex: 1 1 220px; color: var(--text-3); font-size: 13px; }
.sheet .empty { padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-card); color: var(--text-2); font-family: var(--serif); font-size: 18px; }

@media (min-width: 700px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1200px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* the reading: the app's home screen, then why. A spot page draws both
   halves into #reading. The home page draws neither here: its hero is the
   real sky and the reasons live in the board's own sheet. */
.reading { margin-top: 44px; scroll-margin-top: 84px; }
.reading-grid { display: grid; grid-template-columns: 390px 1fr; gap: 36px; align-items: start; }
.phone {
  position: relative; border-radius: var(--r-device); overflow: hidden; min-height: 620px;
  display: flex; flex-direction: column; color: var(--ink-on-sky);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #3D4470 0%, #6C5C86 38%, #BA8B8D 68%, #EAB79A 100%);
}
.phone.morning { background: linear-gradient(180deg, #39406B 0%, #8A7A9E 45%, #EBA98E 78%, #F7D3AE 100%); }
.phone.night { background: linear-gradient(180deg, #0B1026 0%, #151C3E 55%, #252D55 100%); }
.phone .sun-glow {
  position: absolute; right: -60px; bottom: 34px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFF3D9 0%, #FFD9A0 30%, rgba(255, 190, 120, 0.4) 60%, rgba(255, 180, 110, 0) 72%);
  filter: blur(3px); pointer-events: none;
}
.phone-top { padding: 22px 22px 0; display: flex; justify-content: space-between; align-items: center; position: relative; }
.place-chip {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px;
  background: rgba(14, 27, 50, 0.4); border: 1px solid rgba(255, 252, 247, 0.16);
  padding: 8px 14px 8px 10px; border-radius: 999px; backdrop-filter: blur(8px);
  max-width: 100%;
}
.place-chip svg { width: 16px; height: 16px; flex: none; }
.place-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-mast { text-align: center; padding: 34px 22px 0; position: relative; }
.phone .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 800; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--gold);
}
.phone .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.big-time { font-family: var(--serif); font-weight: 500; font-size: 92px; line-height: 1; margin-top: 12px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.big-time small { font-size: 28px; font-weight: 500; margin-left: 6px; }
.verdict-line { font-family: var(--serif); font-weight: 600; font-size: 26px; margin-top: 14px; line-height: 1.2; text-wrap: balance; }
.phases { display: flex; justify-content: space-around; gap: 6px; padding: 26px 18px 0; position: relative; }
.phases div { text-align: center; min-width: 0; }
.phases b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 252, 247, 0.74); }
.phases span { display: block; font-family: var(--serif); font-size: 17px; font-weight: 500; margin-top: 3px; font-variant-numeric: tabular-nums; }
.phases div.next span { color: var(--gold-soft); }
.console { margin-top: auto; padding: 24px 14px 14px; position: relative; }
.console .plate { padding-right: 20px; }
.console .plate-say .eyebrow { font-size: 10px; }
.console .plate-say .verdict { font-size: 17px; }
.console .plate .below { font-size: 13px; color: var(--ink2); margin-top: 2px; }

.why h3 { font-family: var(--serif); font-weight: 640; font-size: var(--t-sub); }
.why-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.toggle { display: inline-flex; background: var(--night); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.toggle button {
  background: transparent; border: 0; border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-2);
  min-height: 44px;
}
.toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.caption { margin-top: 16px; font-family: var(--serif); font-size: 21px; line-height: 1.35; }
.factors { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.factors li {
  display: flex; align-items: center; gap: 12px;
  background: var(--night); border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px 14px;
}
.factors .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 252, 247, 0.06); flex: none; }
.factors .ic svg { width: 18px; height: 18px; }
.factors .lab { flex: 1; font-weight: 600; }
.factors .det { font-variant-numeric: tabular-nums; color: var(--text-2); }
.factors li.lift .ic { color: var(--gold); }
.factors li.drag .ic { color: var(--coral); }
.factors li.drag .det { color: var(--coral); font-weight: 700; }
.factors li.lift .det { color: var(--gold); font-weight: 700; }
.why .note { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.why .meta { margin-top: 18px; font-size: 13px; color: var(--text-3); line-height: 1.7; }
.why .meta a { color: var(--text-2); }
.why .limiter { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.reading .empty {
  padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r-card); color: var(--text-2); font-family: var(--serif); font-size: 19px;
}
.score-honest { font-size: 14px; color: var(--text-3); max-width: var(--measure); }

@media (min-width: 1200px) {
  .reading { margin-top: 0; }
  .reading-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; }
  .reading-grid .phone { width: 100%; max-width: 390px; }
  .reading-grid .why { width: 100%; }
  /* A spot page's waiting sentence keeps the card's footprint, quietly outlined. */
  .reading .empty {
    display: grid; place-items: center; text-align: center; text-wrap: balance;
    width: 100%; max-width: 390px; min-height: 520px; margin: 0 auto; padding: 28px 36px;
    border-radius: var(--r-device); line-height: 1.4;
  }
}

/* --------------------------------------------------------- the spots */
/* The panel: toolbar, chips, status, then the map beside the list. In full
   screen (spots.css) the same panel covers the page. */
.spots-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spots-bar input {
  flex: 1 1 240px; min-width: 0; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent; color: var(--text); font: inherit; font-size: 15px;
}
.spots-bar input::placeholder { color: var(--text-3); }
.spots-bar input:focus { border-color: rgba(255, 252, 247, 0.4); outline: none; box-shadow: 0 0 0 4px rgba(235, 168, 53, 0.14); }
.spots-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fullscreen, .spots-close {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; min-height: 44px;
}
.locate:hover, .fullscreen:hover, .spots-close:hover { border-color: rgba(255, 252, 247, 0.4); background: rgba(255, 252, 247, 0.04); }
.spots-close { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.spots-tools { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.near-status { margin-top: 10px; font-size: 14px; color: var(--text-3); min-height: 1.4em; }
.near-status button { font: inherit; font-size: 14px; font-weight: 600; color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.spot-side { min-width: 0; }
.spot-more { margin-top: 12px; font-size: 14px; color: var(--text-3); }
.spot-more a { color: var(--gold); font-weight: 600; text-decoration: none; }
.spot-more a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 14px;
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-2); min-height: 44px;
}
.chips button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* A kind with nothing in the chosen state (or the other way round) stays in place, dimmed, so the row never jumps. */
.chips button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.spots-sum { margin-left: auto; color: var(--text-3); font-size: 14px; }
.spots-grid { margin-top: 16px; display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 20px; align-items: stretch; }
.map {
  height: 460px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #0B1226;
  box-shadow: var(--shadow);
  /* Its own stacking context, so the map libraries' z-indexes (Leaflet's panes 400, controls 1000) stay inside the box and under the sticky header. */
  position: relative; z-index: 0; isolation: isolate;
}
.map--off { height: auto; }
.map--off p { padding: 24px 20px; color: var(--text-2); }
/* Keyboard on the map: the canvas takes focus for the arrows and +/-, and the box shows it. */
.map:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
/* The vector map (MapLibre): popups, controls and the credit line in the site's
   own dress. spotmap.js inserts the vendor sheet BEFORE this one, so these win
   at equal specificity however late the file arrives. */
.maplibregl-map { font: inherit; }
.maplibregl-canvas:focus-visible { outline: none; }
.maplibregl-popup-content { background: var(--paper); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 16px; font: inherit; line-height: 1.5; min-width: 220px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--paper); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--paper); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--paper); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--paper); }
.maplibregl-popup-close-button { color: var(--ink3); font-size: 20px; line-height: 1; padding: 6px 10px; border-radius: 0 var(--r-card) 0 10px; }
.maplibregl-popup-close-button:hover { background: rgba(14, 27, 50, 0.06); }
/* MapLibre's own sheet is injected when the engine mounts, so it lands AFTER
   this file and wins at equal specificity: the attribution strip drew as a
   pale white bar across the bottom of a navy map. The container class raises
   ours above it without touching the vendored file. */
.map .maplibregl-ctrl-attrib,
.map .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(11, 18, 38, 0.78); color: var(--text-3); font-size: 11px; }
.map .maplibregl-ctrl-attrib a { color: var(--text-2); }
.map .maplibregl-ctrl-attrib-button { filter: invert(1) brightness(1.7); }
.maplibregl-ctrl-group { background: var(--night-2); border: 1px solid var(--line-2); box-shadow: none; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
/* The zoom glyphs ship as dark SVGs; on the night ground they read inverted. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.7); }
.maplibregl-cooperative-gesture-screen { background: rgba(11, 18, 38, 0.72); color: var(--text); font: inherit; font-size: 15px; }
/* The raster fallback (Leaflet with OpenStreetMap's bright tiles), only under .map--raster.
   Night tiles from day tiles: invert, turn the hue back, then calm it down.
   The result reads as a navy map with pale roads, which is the app's palette. */
.map--raster .leaflet-container { font: inherit; background: #0B1226; }
.map--raster .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(0.82) contrast(0.92) saturate(0.35); }
.map--raster .leaflet-control-attribution { background: rgba(11, 18, 38, 0.7); color: var(--text-3); font-size: 11px; }
.map--raster .leaflet-control-attribution a { color: var(--text-2); }
.map--raster .leaflet-bar { border: 1px solid var(--line-2); box-shadow: none; }
.map--raster .leaflet-bar a { background: var(--night-2); color: var(--text); border-bottom-color: var(--line); }
.map--raster .leaflet-popup-content-wrapper { background: var(--paper); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow); }
.map--raster .leaflet-popup-tip { background: var(--paper); }
.map--raster .leaflet-popup-content { margin: 14px 16px; font: inherit; line-height: 1.5; min-width: 220px; }
.map--raster .leaflet-popup-close-button { color: var(--ink3); }
.pin { width: 26px; height: 34px; }
.pin svg { width: 26px; height: 34px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45)); transition: transform 0.15s ease; transform-origin: 50% 100%; }
.pin:hover svg, .pin.active svg { transform: scale(1.15); }
.pin.here { width: 22px; height: 22px; }
.pin.here span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); border: 3px solid var(--paper); box-shadow: 0 0 0 6px rgba(255, 108, 101, 0.28); }
.pop h3 { font-family: var(--serif); font-weight: 640; font-size: var(--t-card); line-height: 1.2; }
.pop .sub { color: var(--ink2); font-size: 13.5px; margin-top: 2px; }
.pop p { margin-top: 8px; font-size: 14px; }
.pop .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pop .acts a, .pop .acts button {
  font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  border-radius: var(--r-pill); padding: 8px 12px; border: 1px solid var(--sand); color: var(--ink); background: transparent;
}
.pop .acts .primary { background: var(--coral); color: var(--ink-on-sky); border-color: var(--coral); }
.spot-list {
  list-style: none; padding: 0; margin: 0; height: 460px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--night-2);
}
.spot-list li { border-bottom: 1px solid var(--line); }
.spot-list button {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--text);
}
.spot-list button:hover, .spot-list li.active button { background: rgba(255, 252, 247, 0.05); }
/* On the /spots/ pages a row is a link to the spot page; same shape, same look. */
.spot-list a {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--text); text-decoration: none;
}
.spot-list a:hover, .spot-list li.active a { background: rgba(255, 252, 247, 0.05); }
.spot-list .txt { min-width: 0; flex: 1; }
.thumb { width: 52px; height: 52px; border-radius: var(--r-input); flex: none; background: linear-gradient(180deg, #3D4470 0%, #6C5C86 40%, #BA8B8D 70%, #EAB79A 100%); }
.thumb.morning { background: linear-gradient(180deg, #39406B 0%, #8A7A9E 45%, #EBA98E 78%, #F7D3AE 100%); }
.thumb.both { background: linear-gradient(180deg, #57628F 0%, #A87F92 40%, #EE9A6B 75%, #F6C48E 100%); }
.spot-list .name { font-family: var(--serif); font-weight: 620; font-size: var(--t-card); line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spot-list .line { color: var(--text-2); font-size: 14px; margin-top: 3px; }
.new { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; background: var(--coral-deep); color: var(--ink-on-sky); padding: 2px 7px; border-radius: var(--r-pill); font-family: var(--sans); }
.spot-list .chev { margin-left: auto; color: var(--text-3); }
.spot-list .none { padding: 24px 16px; color: var(--text-2); }
.map-note { font-size: 14px; color: var(--text-3); max-width: var(--measure); }

/* ---------------------------------------------------------- the app */
/* Three phones across the page's own measure, one column each. They are sized
   from the viewport's height, so a short display gets smaller phones rather
   than a section that will not fit; past 280px they stop growing. The section
   opens and is spaced like every other one. */
.app-shots {
  --shot-w: clamp(180px, 23vh, 280px);
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: 24px 28px;
}
.app-shot { text-align: center; }
/* `height: auto` IS LOAD-BEARING. The screenshots carry width="690" height="1500"
   so a cold visit reserves the slot; nothing but an author `height` beats that
   height hint, and without it a 280px column draws the phone at 280x1500. */
.app-shot img {
  display: block; width: var(--shot-w); max-width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--r-device); box-shadow: var(--shadow); border: 1px solid var(--line);
}
.app-shot h3 { font-family: var(--serif); font-weight: 640; font-size: var(--t-card); line-height: 1.25; margin-top: 16px; text-wrap: balance; }
.app-shot p { margin-top: 4px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; text-wrap: balance; }
.app-get { margin-top: var(--gap-note); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.app-promise { font-size: 14.5px; font-weight: 600; color: var(--text-2); }

/* -------------------------------------------------------------- quiet */
.promises { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.promises li { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; box-shadow: var(--shadow); }
.promises h3 { font-family: var(--serif); font-weight: 640; font-size: var(--t-sub); line-height: 1.2; }
.promises p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.closer { color: var(--text-2); }

/* ---------------------------------------------------------------- faq */
.faq-list { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--serif); font-weight: 620; font-size: var(--t-card);
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--text-3); font-size: 22px; flex: none; }
/* A minus sign, never a dash: the voice rule holds for glyphs too. */
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 20px; color: var(--text-2); max-width: 66ch; }

/* --------------------------------------------------------------- dock */
/* The closing band: one card the colour of the light the page is about, on the
   page's own night. Its eyebrow is gold-soft, the dress gold wears over a
   picture or a gradient; every other rule in it is the shared one. */
.dock {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center;
  background: linear-gradient(135deg, #3D4470 0%, #6C5C86 45%, #BA8B8D 80%, #EAB79A 100%);
  border-radius: var(--r-card); padding: 44px; box-shadow: var(--shadow);
}
.dock .kicker { color: var(--gold-soft); }
/* The store chip (here and in #app): the app's paper on the night, the quiet
   line at 0.62 of ink. A span until launch day, so no hover lift. */
.store-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink);
  border: 1px solid transparent; padding: 14px 28px; border-radius: var(--r-input);
  text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.store-chip[aria-disabled="true"] { cursor: default; }
.store-chip .apple { line-height: 0; }
.store-chip .apple svg { width: 19px; height: 19px; fill: currentColor; }
.store-chip small { display: block; font-size: 11px; font-weight: 700; text-align: left; letter-spacing: 0.6px; opacity: 0.62; }
.dock p { color: rgba(255, 252, 247, 0.88); font-size: 17.5px; max-width: 40ch; }
.dock-act { display: grid; gap: 18px; justify-items: start; }
.dock-promises { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; color: rgba(255, 252, 247, 0.85); }
.dock-promises li::before { content: "\2713"; margin-right: 6px; color: var(--gold-soft); }

/* ------------------------------------------------------------- footer */
/* THE PAGE ENDS HERE RATHER THAN STOPPING: the ground drops one shade below
   the night, so the last band reads as the floor and not as another section;
   the band itself is as tall as any other; and the colophon sits under its own
   hairline, which gives the last line something to stand on. */
footer {
  background: var(--night-deep); border-top: 1px solid var(--line);
  padding: var(--band) 0 calc(var(--band) - 28px);
  color: var(--text-2); font-size: 14.5px;
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px 32px; }
.foot-brand .wordmark { font-size: 26px; }
.foot-brand p { margin-top: 14px; max-width: 30ch; }
/* The last line of the site, on its own rule, the full width of the page. */
.foot-end { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.foot-colophon { color: var(--text-3); font-size: 13px; }
.foot-colophon a { color: var(--text-2); }
footer nav { display: grid; gap: 8px; align-content: start; }
footer nav h3 { font-size: var(--t-eyebrow); font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
footer nav a { color: var(--text-2); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
footer nav a:hover { color: var(--text); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .reading-grid { grid-template-columns: 1fr; }
  .phone { max-width: 420px; margin: 0 auto; }
  .spots-grid { grid-template-columns: 1fr; }
  .map { height: 400px; }
  .spot-list { height: 400px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .dock { grid-template-columns: 1fr; padding: 32px; }
}
/* The header row needs about 760px for the wordmark, five links and the pill; below that the links go. */
@media (max-width: 800px) {
  .top-nav { display: none; }
  .pill { margin-left: auto; }
}
/* Phones: the three screens in one row that scrolls sideways and snaps, each
   about 70vw, bleeding to the page's edges; the chip and its line under it. */
@media (max-width: 799px) {
  .app-shots {
    --shot-w: 70vw;
    /* flex-start, not the row's centre: a centred flex row that overflows
       spills to BOTH sides, and the left half can never be scrolled to. */
    display: flex; justify-content: flex-start; gap: 16px; align-items: start;
    margin: var(--gap-thing) -24px 0; padding: 6px 24px 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .app-shots::-webkit-scrollbar { display: none; }
  .app-shot { flex: none; width: var(--shot-w); scroll-snap-align: start; text-align: left; }
  .app-shot img { margin: 0; }
}
@media (max-width: 640px) {
  /* The whole rhythm steps down at once, here and on every other page. */
  :root { --band: 68px; --gap-thing: 28px; --gap-note: 26px; }
  .wrap { padding: 0 18px; }
  /* A head that carries a way out stacks here, so the button starts on the
     same left edge as the eyebrow rather than floating off to the right. */
  .sec-head--row { display: block; }
  .sec-head--row .pill--ghost { margin-top: 18px; }
  .hero { min-height: 100svh; }
  .hero-body { padding: 0 20px; }
  .hero-console { margin-left: 4px; margin-right: 4px; width: calc(100% - 8px); margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  .hero-h1 { font-size: clamp(34px, 10vw, 44px); }
  /* The rule slot (invisible on the web) gives way so a verdict fits on one line beside the ring. */
  .action-cell { padding-left: 16px; }
  .action-title { font-size: 18px; }
  .tile { min-height: 220px; padding: 14px 16px 12px; }
  .sheet-in { padding: 20px 18px 22px; }
  .promises { grid-template-columns: 1fr; }
  .big-time { font-size: 76px; }
  .phone { min-height: 560px; }
  .search-box { padding-left: 14px; }
  .go { padding: 12px 14px; }
  .foot-grid { grid-template-columns: 1fr; }
  .app-shots { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scroll-padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live, .hero-console { animation: none !important; }
  .ring .arc, .pill, .store-chip, .tile, .hero-primary { transition: none; }
  .sheet { animation: none; }
  /* js/reveal.js hands out no classes here at all; this is the second lock, so
     that a page that somehow carries them still shows everything, still. */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}