/*
 * passport-map.com. Atlas v1.1 "Beacon Teal", the app's design system
 * (src/constants/theme.ts). The Network and category colours are generated
 * from theme.ts by build.ts and injected below; everything here is the brand's
 * own tokens, restated for the web.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #F1F3F1;
  --surface: #FFFFFF;
  --element: #E9ECEF;
  --separator: #E4E7EC;
  --hairline: rgba(60, 60, 67, 0.14);
  --text: #1A1F2E;
  --text-2: #5C6470;
  --accent: #0E7C86;
  --accent-strong: #0A5B63;
  --accent-soft: rgba(14, 124, 134, 0.12);
  --on-accent: #FFFFFF;
  --home: #007AFF;
  --ok: #34C759;
  --excluded-fill: #CED4DA;
  --excluded-ring: #868E96;
  --dim: #CBD1D8;
  --grat: rgba(26, 31, 46, 0.07);
  --glass: rgba(255, 255, 255, 0.84);
  --glass-border: rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.08);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 18px 40px -18px rgba(16, 24, 40, 0.28);
  --ramp: linear-gradient(135deg, #1A1F2E 0%, #0A5B63 55%, #0E7C86 100%);
  --glow: rgba(79, 211, 222, 0.28);
  --wash:
    radial-gradient(125% 60% at 50% -8%, rgba(14, 124, 134, 0.16), transparent 58%),
    radial-gradient(85% 45% at 4% 24%, rgba(14, 124, 134, 0.06), transparent 60%);

  /* The Beacon's inks, inside out: three rings, then the dot. */
  --b1: #3E9CA5;
  --b2: #8FC1C6;
  --b3: #CBE2E4;
  --b4: #0E7C86;
  --pulse: #0E7C86;
  --pulse-opacity: 0.28;

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r-card: 16px;
  --r-hero: 24px;
  --r-glass: 22px;
  --header-h: 64px;
  --gutter: 20px;
  interpolate-size: allow-keywords;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07090D;
    --surface: #141821;
    --element: #1A1F2E;
    --separator: #2E3340;
    --hairline: rgba(255, 255, 255, 0.1);
    --text: #FFFFFF;
    --text-2: #A9AEB8;
    --accent: #4FD3DE;
    --accent-strong: #7CE5EF;
    --accent-soft: rgba(79, 211, 222, 0.16);
    --on-accent: #07090D;
    --home: #0A84FF;
    --ok: #30D158;
    --excluded-fill: #434A56;
    --excluded-ring: #6B7280;
    --dim: #262C38;
    --grat: rgba(255, 255, 255, 0.06);
    --glass: rgba(20, 24, 33, 0.78);
    --glass-border: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 16px -8px rgba(0, 0, 0, 0.7);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 48px -20px rgba(0, 0, 0, 0.9);
    --wash: linear-gradient(180deg, #0B2B31 0%, #081C21 38%, rgba(7, 9, 13, 0) 100%);
    --b1: #FFFFFF;
    --b2: rgba(255, 255, 255, 0.62);
    --b3: rgba(255, 255, 255, 0.32);
    --b4: #FFFFFF;
    --pulse: #4FD3DE;
    --pulse-opacity: 0.34;
  }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
b, strong { font-weight: 650; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }
/* Without this, any rule that sets `display` (the search's clear button, its result) beats the attribute. */
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 520px) { :root { --gutter: 16px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: 12px; z-index: 100; padding: 10px 14px;
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow);
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

.icon { width: 1em; height: 1em; flex: none; }

.eyebrow {
  margin: 0 0 12px; color: var(--accent);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.h1, .h2, .hero-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04;
}
.h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); margin-bottom: 16px; }
.h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: 18px; max-width: 22ch; }
.section-lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 60ch; }
.muted { color: var(--text-2); }

/* ------------------------------------------------------------------ bits */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--on-accent);
  font: 600 16px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.btn:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn:active { transform: scale(0.98); }
.btn .icon { font-size: 18px; }
.btn-small { padding: 9px 16px; font-size: 15px; }
.btn-light { background: #FFFFFF; color: #0A5B63; }
.btn-light:hover { background: #E6F6F7; color: #0A5B63; }
.btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }

/* A Network pill: the app's `networkBadgeColors`, as CSS. */
.pill {
  --n: var(--accent);
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font: 700 11px/1.5 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  background: color-mix(in srgb, var(--n) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--n) 35%, transparent);
  color: color-mix(in srgb, var(--n) 70%, #000);
}
.pill.n-aza { color: color-mix(in srgb, var(--n) 60%, #000); }
@media (prefers-color-scheme: dark) {
  .pill, .pill.n-aza {
    background: color-mix(in srgb, var(--n) 18%, transparent);
    border-color: color-mix(in srgb, color-mix(in srgb, var(--n) 50%, #fff) 55%, transparent);
    color: color-mix(in srgb, var(--n) 50%, #fff);
  }
}

.pro-tag {
  display: inline-block; vertical-align: 0.35em; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: 700 11px/1.5 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
}

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { margin-top: 4px; color: var(--accent); font-size: 16px; }

/* ------------------------------------------------------------------ Beacon */

.beacon .b1 { stroke: var(--b1); }
.beacon .b2 { stroke: var(--b2); }
.beacon .b3 { stroke: var(--b3); }
.beacon .b4 { stroke: var(--b4); }
.beacon .pulse, .map-home .pulse, .rd-pulse {
  fill: var(--pulse); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: beacon-pulse 2.6s infinite;
}
/* The app's idle loop: out from the dot in 70% of 2.6s, easing out, then quiet. */
@keyframes beacon-pulse {
  0% { transform: scale(0.17); opacity: var(--pulse-opacity); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
  70% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .beacon .pulse, .map-home .pulse, .rd-pulse { animation: none; }
}

/* ------------------------------------------------------------------ header */

/* Android's app banner, in the shape of Apple's Smart App Banner. In the
   page's flow above the sticky header, so it scrolls away and the header
   stays. */
.app-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 8px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.app-banner[hidden] { display: none; }
.app-banner-close {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-2); cursor: pointer;
}
.app-banner-close .icon { width: 16px; height: 16px; }
.app-banner-icon { width: 48px; height: 48px; flex: none; border-radius: 11px; }
.app-banner-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.app-banner-text b { font-size: 15px; }
.app-banner-text span { font-size: 13px; color: var(--text-2); }
.app-banner-get { flex: none; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
/* The frosted glass, on a layer of its own behind the header's content. With
   the blur on the header itself, the logo's endless pulse redrew the blurred
   layer every frame, and text scrolling under it flashed between blurred and
   not (Bill, 2026-10-05). The pulse also pauses while the page scrolls
   (.scrolling, main.js). */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
.site-header.scrolling .beacon .pulse { animation-play-state: paused; }
.site-header.scrolled { border-bottom-color: var(--hairline); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand .beacon { width: 30px; height: 30px; }
.wordmark { font: 700 23px/1 var(--font-display); letter-spacing: -0.02em; }
.wordmark span { font-weight: 400; color: var(--accent); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 8px 12px; border-radius: 999px; color: var(--text-2);
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.nav a:hover { color: var(--text); background: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--text); background: var(--accent-soft); }

/*
 * The phone's menu (Bill, 2026-11-06: with list pages to reach, the footer
 * was the only way round on a phone). A popover, so the browser opens it,
 * closes it on a tap outside or Escape, and tells assistive tech it is
 * expanded, with no script; main.js only places it under the header and
 * closes it when a link on the same page is chosen.
 */
.menu-btn { display: none; }
.menu-btn .icon:last-child { display: none; }
.site-header:has(.site-menu:popover-open) .menu-btn .icon:first-child { display: none; }
.site-header:has(.site-menu:popover-open) .menu-btn .icon:last-child { display: block; }
.site-menu {
  /* Height spelled out: Safari stretched the popover's own `fit-content` to the bottom of the screen. */
  position: fixed; inset: auto; top: calc(var(--header-h) + 6px); right: var(--gutter); bottom: auto; margin: 0;
  width: min(300px, calc(100vw - 2 * var(--gutter))); height: auto; max-height: calc(100dvh - var(--header-h) - 24px);
  overflow: auto; padding: 8px;
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  background: var(--glass); color: var(--text); box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  opacity: 0; transform: translateY(-6px) scale(0.97); transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
.site-menu:popover-open { display: grid; align-content: start; gap: 2px; opacity: 1; transform: none; }
@starting-style { .site-menu:popover-open { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.site-menu a {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
  color: var(--text); text-decoration: none; font-size: 17px; font-weight: 600;
}
.site-menu a:hover, .site-menu a:focus-visible { background: var(--accent-soft); color: var(--text); }
.site-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.site-menu a .icon:first-child { font-size: 22px; color: var(--accent); }
.site-menu a .icon:last-child { margin-left: auto; font-size: 14px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .site-menu { transition: none; } }

@media (max-width: 820px) {
  .nav { display: none; }
  .header-inner { gap: 10px; }
  .header-inner .btn { margin-left: auto; }
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--text);
    font-size: 19px; cursor: pointer;
  }
  .menu-btn .icon { width: 1em; height: 1em; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; background: var(--wash); overflow: clip; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: 32px;
  min-height: min(760px, calc(100svh - var(--header-h)));
  padding-block: 56px 72px;
}
.hero-copy { container-type: inline-size; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
  color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip-new {
  padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* 10.4cqi fits the longest rotating phrase ("children's museums") on one line. */
.hero-title { font-size: min(4.2rem, 10.4cqi); margin-bottom: 22px; }
.hero-line, .rotator { display: block; }
/*
 * The rotating words sit on their own line, so a change of width never
 * reflows the sentence. The words overlap in one grid cell while one slides
 * out and the next slides in.
 */
.rotator {
  display: inline-grid; position: relative; overflow: clip; isolation: isolate;
  /* Room for Bricolage's ascenders and descenders, which overflow a 1.04 line box. */
  padding-block: 0.1em 0.14em; margin-block: -0.1em -0.14em;
  color: var(--accent); white-space: nowrap;
  transition: width 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rotator::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.2em; height: 0.2em;
  background: var(--accent-soft); border-radius: 0.1em; z-index: -1;
}
.rotator-word {
  grid-area: 1 / 1; display: inline-block;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
}
.rotator-word.enter { transform: translateY(105%); opacity: 0; }
.rotator-word.leave { transform: translateY(-105%); opacity: 0; }
.lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); color: var(--text-2); max-width: 36em; margin-bottom: 28px; }
.fine { margin: 14px 0 0; color: var(--text-2); font-size: 14px; }

.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store { display: inline-block; position: relative; border-radius: 10px; }
.store img { height: 48px; width: auto; }
@media (prefers-color-scheme: dark) {
  .store.apple img { outline: 1px solid #A6A6A6; outline-offset: -1px; border-radius: 9px; }
}
.store.soon img { filter: grayscale(1); opacity: 0.5; }
.soon-tag {
  position: absolute; top: -11px; right: -22px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}

/* The stage: three phones and the Beacon behind them. */
.hero-stage { position: relative; height: 640px; }
.hero-glow { position: absolute; inset: 50% auto auto 50%; width: 860px; height: 860px; translate: -50% -50%; pointer-events: none; }
.hero-glow .beacon { width: 100%; height: 100%; opacity: 0.55; }
.hero-glow .beacon :is(.b1, .b2, .b3) { stroke-width: 6; }

.phone {
  position: relative; width: 290px; aspect-ratio: 640 / 1391;
  padding: 9px; border-radius: 48px;
  background: linear-gradient(150deg, #3A404C, #0D1015 40%, #1D222B);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
    0 40px 70px -30px rgba(8, 15, 30, 0.55),
    0 16px 30px -16px rgba(8, 15, 30, 0.35);
}
.screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: #000; }
.screen img { width: 100%; height: 100%; object-fit: cover; }
/* The Dynamic Island, where it sits on an iPhone 17 Pro. */
.screen::after {
  content: ''; position: absolute; top: 1.3%; left: 50%; translate: -50% 0;
  width: 31%; height: 4.2%; border-radius: 999px; background: #000;
}
.hero-stage .phone { position: absolute; left: 50%; top: 50%; }
.phone-main { z-index: 3; translate: -50% -50%; animation: rise 0.9s 0.15s both cubic-bezier(0.2, 0.7, 0.2, 1); }
.phone-back { z-index: 1; width: 250px; }
.phone-left { translate: -118% -46%; rotate: -8deg; animation: rise-left 1s 0.3s both cubic-bezier(0.2, 0.7, 0.2, 1); }
.phone-right { translate: 18% -46%; rotate: 8deg; animation: rise-right 1s 0.3s both cubic-bezier(0.2, 0.7, 0.2, 1); }
.phone-back .screen img { filter: saturate(0.9); }
@keyframes rise { from { opacity: 0; translate: -50% -42%; } }
@keyframes rise-left { from { opacity: 0; translate: -80% -40%; rotate: -2deg; } }
@keyframes rise-right { from { opacity: 0; translate: -20% -40%; rotate: 2deg; } }

.float {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 18px; max-width: 320px;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.3;
}
.float-text { display: grid; min-width: 0; }
.float-text b { font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.float-sub { color: var(--text-2); font-size: 13px; }
.float-pills { display: flex; gap: 4px; }
.float-place { left: -2%; top: 16%; animation: float-in 0.8s 0.9s both, bob 6s 1.7s ease-in-out infinite alternate; }
.float-place > * { transition: opacity 0.3s; }
.float-place.swap > * { opacity: 0; }
.float-access { right: -4%; bottom: 13%; animation: float-in 0.8s 1.1s both, bob 7s 1.9s ease-in-out infinite alternate-reverse; }
.float .ok { color: var(--ok); font-size: 26px; display: flex; }
@keyframes float-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes bob { to { transform: translateY(-8px); } }

/* A category pin, as the map draws it: fill is the kind of place. */
.pin {
  --k: var(--accent);
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--k); color: #FFFFFF; font-size: 18px;
  box-shadow: 0 0 0 2.5px #FFFFFF, 0 4px 10px -4px rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}
.pin.k-zooAquarium { color: #1A1F2E; }

/* Two columns but a narrow stage: smaller phones, so the left one stays off the copy. */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero-stage .phone-main { width: 250px; }
  .hero-stage .phone-back { width: 205px; }
  .phone-left { translate: -104% -44%; }
  .phone-right { translate: 4% -44%; }
  .float-place { left: 0; }
  .float-access { right: 0; }
}
@media (max-width: 960px) {
  /* Stacked, the phones sit right under the badges: the gap keeps their tops off the fine print (Bill, 2026-10-19). */
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 40px 24px; gap: 40px; }
  .hero-copy { text-align: center; }
  .hero-copy .lede { margin-inline: auto; margin-bottom: 32px; }
  .hero-copy .fine { margin-top: 18px; }
  .hero-copy .stores { justify-content: center; }
  .hero-stage { height: 560px; }
  .hero-glow { width: 640px; height: 640px; }
  .phone-left { translate: -112% -44%; }
  .phone-right { translate: 12% -44%; }
  .float-place { left: 4%; top: 10%; }
  .float-access { right: 2%; bottom: 8%; }
}
@media (max-width: 560px) {
  .hero-stage { height: 520px; }
  .phone-main { width: 240px; }
  .phone-back { width: 200px; }
  .phone-left { translate: -96% -42%; }
  .phone-right { translate: -4% -42%; }
  .float { font-size: 13px; max-width: 250px; }
  .float-place { left: 0; top: 8%; }
  .float-access { right: 0; bottom: 6%; }
  .float-pills { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-main, .phone-left, .phone-right, .float-place, .float-access { animation: none; }
}

/* ------------------------------------------------------------------ stats */

.stats { border-block: 1px solid var(--hairline); background: var(--surface); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { display: grid; gap: 2px; padding: 28px 20px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--hairline); }
.stat b { font: 700 clamp(2rem, 4vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-2); font-size: 15px; }
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}

/* ------------------------------------------------------------------ sections */

.section { padding-block: clamp(72px, 10vw, 128px); }
.section + .section { padding-top: 0; }
.stats + .section { padding-top: clamp(72px, 10vw, 128px); }

.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step {
  position: relative; padding: 28px; border-radius: var(--r-hero);
  background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--hairline);
}
.step-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px;
  border-radius: 16px; background: var(--accent-soft); color: var(--accent); font-size: 30px;
}
.step h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 22px/1.2 var(--font-display); letter-spacing: -0.01em; }
.step-n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 700 14px/1 var(--font-body);
}
.step p { margin: 0; color: var(--text-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ networks */

.networks { background: linear-gradient(180deg, transparent, var(--surface) 22%, var(--surface) 78%, transparent); }
.explorer {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px; align-items: start; margin-top: 40px;
}
.map-card {
  position: sticky; top: calc(var(--header-h) + 20px); margin: 0;
  padding: 20px; border-radius: var(--r-hero);
  background: var(--bg); border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.map-frame { position: relative; }
.dotmap { width: 100%; height: auto; overflow: visible; }
.dotmap .grat { fill: none; stroke: var(--grat); stroke-width: 1; }
/* Alaska and Hawaii, in boxes of their own over the Pacific corner. */
.dotmap .inset { fill: var(--bg); stroke: var(--hairline); stroke-width: 1.5; }
.map-inset {
  position: absolute; margin: -5px 0 0 4px; translate: 0 -100%; pointer-events: none;
  font: 700 10px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.dots circle { fill: var(--k); opacity: 0.88; transition: fill 0.4s ease, opacity 0.4s ease; }
.map-home .pulse { transform-box: fill-box; }
.map-home .core { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.map-status {
  position: absolute; left: 4px; top: 0; margin: 0; padding: 6px 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 600;
}
.map-status-one { display: none; }
.explorer[data-net]:not([data-net=""]) .map-status-all { display: none; }
.explorer[data-net]:not([data-net=""]) .map-status-one { display: inline; }
figcaption { margin-top: 14px; display: grid; gap: 10px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.swatch {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--k); color: #FFFFFF; font-size: 11px;
}
.k-zooAquarium .swatch, .swatch.k-zooAquarium { color: #1A1F2E; }
.map-note { color: var(--text-2); font-size: 13px; }
.map-beyond { margin: 0; display: flex; gap: 8px; font-size: 14px; color: var(--text-2); }
.map-beyond .icon { font-size: 18px; margin-top: 1px; }
.map-list { display: inline-flex; align-items: center; gap: 7px; justify-self: start; font-size: 15px; font-weight: 600; text-decoration: none; }
.map-list:hover span { text-decoration: underline; text-underline-offset: 3px; }
.map-list .icon { font-size: 16px; }
.beyond-short { display: none; }

.explorer-side { display: grid; gap: 16px; align-content: start; }
.nets { display: grid; gap: 12px; }

/* "Where are you a member?": a place's Networks, lit up on the map. */
.explorer[data-net="mine"] .dots circle:not(.hit) { fill: var(--dim); opacity: 0.28; }
.explorer[data-net="mine"] .dots circle.hit { opacity: 1; }
.map-home { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.map-home.away { opacity: 0; transition: opacity 0.3s; }
.net-tags { display: inline-flex; align-items: center; gap: 6px; }
.net-yours {
  display: none; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 700 10px/1.5 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.net.held .net-yours { display: inline-block; }

.finder {
  position: relative; padding: 18px; border-radius: var(--r-hero);
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: var(--shadow-sm);
}
.finder-label { display: block; margin-bottom: 12px; font: 700 21px/1.2 var(--font-display); letter-spacing: -0.01em; }
.finder-box { position: relative; display: flex; align-items: center; }
.finder-box > .icon { position: absolute; left: 15px; font-size: 18px; color: var(--text-2); pointer-events: none; }
.finder input {
  width: 100%; padding: 13px 46px 13px 43px; border-radius: 999px;
  border: 1.5px solid var(--hairline); background: var(--bg); color: var(--text);
  font: 16px/1.2 var(--font-body); -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.finder input::placeholder { color: var(--text-2); }
.finder input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.finder input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.finder-clear {
  position: absolute; right: 6px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 16px; cursor: pointer;
}
.finder-clear:hover { background: var(--accent-soft); color: var(--text); }
.finder-list {
  position: absolute; left: 18px; right: 18px; z-index: 20; list-style: none; margin: 6px 0 0; padding: 6px;
  max-height: 348px; overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow);
}
.finder-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.finder-list li[aria-selected="true"] { background: var(--accent-soft); }
@media (hover: hover) { .finder-list li:hover { background: var(--accent-soft); } }
.opt-text { display: grid; min-width: 0; }
.opt-text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-text span { font-size: 13px; color: var(--text-2); }
.finder-kinds .swatch { flex: none; }
/* A place's own logo, on the white plate the app uses: logos are drawn for light backgrounds. */
.logo {
  position: relative; display: grid; place-items: center; flex: none; overflow: hidden;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--k); color: #FFFFFF; font-size: 17px;
}
.logo.k-zooAquarium { color: #1A1F2E; }
.logo img {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  padding: 8%; object-fit: contain; border-radius: inherit;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26, 31, 46, 0.1);
}
.finder-result { display: grid; gap: 12px; margin-top: 16px; }
.finder-place { display: flex; align-items: center; gap: 12px; }
.finder-place .logo { width: 48px; height: 48px; border-radius: 10px; font-size: 22px; }
.finder-place b { display: block; font-weight: 650; line-height: 1.3; }
.finder-place span { color: var(--text-2); font-size: 14px; }
.finder-member { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); font-size: 15px; }
.finder-headline { margin: 0; font: 700 23px/1.2 var(--font-display); letter-spacing: -0.01em; }
.finder-headline b { color: var(--accent); font-variant-numeric: tabular-nums; }
.finder-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--text-2); }
.finder-kinds li { display: inline-flex; align-items: center; gap: 6px; }
.finder-result .btn { justify-self: start; }
.finder-result .stores { margin-top: 2px; }
.finder-empty { margin: 0; color: var(--text-2); font-size: 15px; }
.net {
  --n: var(--accent);
  display: grid; gap: 4px; width: 100%; padding: 16px 18px; text-align: left; cursor: pointer;
  border-radius: var(--r-card); border: 1.5px solid var(--hairline);
  background: var(--surface); color: var(--text); font: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, background-color 0.25s, transform 0.25s;
}
.net:hover { border-color: color-mix(in srgb, var(--n) 45%, transparent); transform: translateY(-1px); }
.net.active, .net[aria-pressed="true"] {
  border-color: var(--n);
  background: color-mix(in srgb, var(--n) 7%, var(--surface));
}
.net-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.net-count { font: 700 20px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.net-count::after { content: ' places'; font: 500 13px var(--font-body); color: var(--text-2); }
.net-name { font-weight: 650; font-size: 15px; }
.net-pitch { color: var(--text-2); font-size: 15px; }
.net-rule { font-size: 13px; color: var(--text-2); display: flex; gap: 6px; }
.net-rule::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--n); }
.net-edition { font-size: 12px; color: var(--text-2); opacity: 0.8; }

@media (max-width: 1000px) {
  .explorer { grid-template-columns: 1fr; }
  /* The search comes before the map on a phone, so the keyboard never sits over the map. */
  .explorer-side { display: contents; }
  .finder { order: -1; }
  .map-card { top: calc(var(--header-h) + 8px); z-index: 5; padding: 14px; }
  .map-note { display: none; }
  /* The card stays on screen here, so the line under the map keeps to one row. */
  .beyond-long { display: none; }
  .beyond-short { display: inline; }
  .nets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nets { grid-template-columns: 1fr; }
  .legend { font-size: 12px; gap: 4px 10px; }
  .map-status { font-size: 12px; padding: 4px 10px; }
  .map-beyond { font-size: 12px; gap: 6px; }
  .map-beyond .icon { font-size: 15px; margin-top: 0; }
  .map-inset { margin: -3px 0 0 2px; font-size: 8px; letter-spacing: 0.05em; }
  .map-list { font-size: 13px; }
}

/* ------------------------------------------------------------------ rules */

.rules-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.rules-diagram { position: relative; max-width: 460px; margin-inline: auto; }
.rules-diagram > svg { width: 100%; height: auto; overflow: visible; }
.rd-ring { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.rd-limit { fill: color-mix(in srgb, var(--excluded-fill) 22%, transparent); stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 5 7; }
.rd-pulse { animation-duration: 3.2s; }
.rd-out circle { fill: var(--c-scienceCenter); stroke: #FFFFFF; stroke-width: 2.5; }
.rd-in circle { fill: var(--excluded-fill); stroke: var(--excluded-ring); stroke-width: 2; }
.rd-home circle { fill: var(--home); stroke: #FFFFFF; stroke-width: 3; }
.rd-home path { fill: #FFFFFF; }
.rd-label { fill: var(--text); font: 600 14px var(--font-body); }
.rd-miles { fill: var(--text-2); font: 700 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.callout {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600;
}
.callout .icon { font-size: 18px; }
.callout-out { right: 0; top: 8%; }
.callout-out .icon { color: var(--ok); }
.callout-in { left: 20%; bottom: 29%; color: var(--text-2); }
.rule-list { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.rule-list li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.rule-pills { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
@media (max-width: 900px) {
  .rules-grid { grid-template-columns: 1fr; gap: 32px; }
  .rules-art { order: 2; }
}
@media (max-width: 520px) {
  .rule-list li { grid-template-columns: 1fr; gap: 6px; }
}

/* ------------------------------------------------------------------ tour */

.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  margin-top: 72px;
}
.feature-flip .feature-copy { order: 2; }
.feature-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 15px; background: var(--accent-soft); color: var(--accent); font-size: 28px;
}
.feature h3 { font: 700 clamp(1.5rem, 2.8vw, 2rem)/1.12 var(--font-display); letter-spacing: -0.02em; margin-bottom: 14px; }
.feature-copy > p { color: var(--text-2); font-size: 17px; max-width: 34em; margin-bottom: 20px; }
.feature-art { position: relative; display: grid; place-items: center; padding-block: 24px; }
.feature-art::before {
  content: ''; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 40px;
  background: radial-gradient(circle at 50% 45%, var(--accent-soft), transparent 70%);
}
.feature-pair { display: flex; justify-content: center; gap: 0; }
.feature-pair .phone { width: 260px; }
.feature-pair .phone-offset { margin-left: -40px; margin-top: 90px; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .feature-flip .feature-copy { order: 0; }
  .feature-art .phone { width: 260px; }
  .feature-pair .phone { width: 210px; }
  .feature-pair .phone-offset { margin-left: -28px; margin-top: 60px; }
}
@media (max-width: 420px) {
  .feature-pair .phone { width: 180px; }
}

.minis { list-style: none; margin: 88px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.minis li {
  display: grid; gap: 4px; padding: 20px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--hairline);
}
.minis .icon { font-size: 26px; color: var(--accent); margin-bottom: 8px; }
.minis b { font-weight: 650; }
.minis span { color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .minis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .minis { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ pricing */

.pricing .wrap { display: grid; justify-items: center; text-align: center; }
.pricing .h2 { max-width: none; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 20px; margin-top: 40px; text-align: left; }
.plan {
  padding: 32px; border-radius: var(--r-hero);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.plan h3 { font: 700 22px/1.2 var(--font-display); margin-bottom: 8px; }
.price { margin: 0 0 6px; color: var(--text-2); }
.price b { font: 700 44px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.plan-sub { color: var(--text-2); margin-bottom: 22px; min-height: 3em; }
.plan-pro {
  position: relative; overflow: hidden; color: #FFFFFF; border: 0;
  background: var(--ramp); box-shadow: var(--shadow);
}
.plan-pro::before {
  content: ''; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--glow), transparent 65%); pointer-events: none;
}
.plan-pro .price, .plan-pro .plan-sub { color: rgba(255, 255, 255, 0.78); }
.plan-pro .price b { color: #FFFFFF; }
.plan-pro .ticks .icon { color: #7CE5EF; }
.plans-note { margin-top: 20px; color: var(--text-2); font-size: 14px; max-width: 62ch; text-align: center; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan-sub { min-height: 0; } }

/* ------------------------------------------------------------------ museums band */

.band {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center;
  padding: clamp(32px, 5vw, 56px); border-radius: 32px;
  background: var(--ramp); color: #FFFFFF; box-shadow: var(--shadow);
}
.band .eyebrow { color: #7CE5EF; }
.band .h2 { color: #FFFFFF; }
.band p { color: rgba(255, 255, 255, 0.82); font-size: 17px; max-width: 40em; margin-bottom: 26px; }
.band-art { position: relative; height: 100%; min-height: 220px; }
.band-art .beacon { position: absolute; width: 420px; height: 420px; right: -60px; top: 50%; translate: 0 -50%; }
.band-art .beacon :is(.b1, .b2, .b3, .b4) { stroke: #FFFFFF; }
.band-art .beacon :is(.b1, .b2, .b3) { stroke-width: 6; }
.band-art .beacon .b2 { stroke-opacity: 0.62; }
.band-art .beacon .b3 { stroke-opacity: 0.32; }
.band-art .beacon .pulse { fill: #4FD3DE; }
@media (max-width: 760px) {
  .band { grid-template-columns: 1fr; }
  .band-art { position: absolute; inset: 0; opacity: 0.25; pointer-events: none; }
}

/* ------------------------------------------------------------------ FAQ */

.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline);
  transition: border-color 0.2s;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; font-weight: 600; font-size: 17px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  rotate: 45deg; translate: 0 -3px; transition: rotate 0.25s, translate 0.25s;
}
.faq-item[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq-item::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
.faq-item[open]::details-content { height: auto; }
.faq-a { padding: 0 20px 18px; color: var(--text-2); }
.faq-a p:last-child { margin-bottom: 0; }
.editions { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; }
.editions li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editions b { color: var(--text); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; gap: 16px; } }

/* ------------------------------------------------------------------ CTA */

.cta-inner { display: grid; justify-items: center; text-align: center; }
.cta-icon { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 24px; box-shadow: var(--shadow); }
.cta .h2 { max-width: 18ch; }
.cta .section-lede { margin-bottom: 28px; }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--hairline); background: var(--surface); padding-block: 56px 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin: 14px 0 0; color: var(--text-2); }
.footer-links { display: grid; align-content: start; gap: 8px; }
.footer-links h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.footer-links a { color: var(--text); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer-fine { margin-top: 40px; color: var(--text-2); font-size: 13px; }
.footer-fine::before { content: ''; display: block; height: 1px; margin-bottom: 24px; background: var(--hairline); }
.footer-fine p { max-width: 90ch; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ inner pages */

.page-hero { background: var(--wash); padding-block: clamp(56px, 8vw, 96px) 24px; }
.support .support-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.support { padding-top: 24px; }
.contact-card {
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: 28px; border-radius: var(--r-hero); background: var(--surface);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.contact-card h2 { font: 700 24px/1.2 var(--font-display); margin-bottom: 10px; }
.contact-card .muted { font-size: 15px; }
@media (max-width: 860px) { .support .support-grid { grid-template-columns: 1fr; } .contact-card { position: static; } }

.notfound { text-align: center; min-height: 60vh; display: grid; align-items: center; }
.notfound-mark { width: 120px; height: 120px; margin: 0 auto 28px; }
.notfound-mark .beacon { width: 100%; height: 100%; }
.notfound .section-lede { margin-inline: auto; }
.notfound-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* /download: a phone is sent on to its store (main.js), so this is mostly
   seen on a computer, and by a phone whose store could not be told. */
.download { text-align: center; min-height: 60vh; padding-bottom: clamp(56px, 8vw, 96px); }
.download-mark { width: 88px; height: 88px; margin: 0 auto 24px; }
.download-mark .beacon { width: 100%; height: 100%; }
.download .section-lede { margin-inline: auto; margin-bottom: 28px; }
.download .stores { justify-content: center; }
.download-qr { display: grid; justify-items: center; gap: 12px; max-width: 300px; margin: 40px auto 0; }
/* Dark on white in both schemes, with a quiet zone of four modules. */
.download-qr img { box-sizing: content-box; width: 148px; height: 148px; padding: 16px; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 16px; }
.download-qr figcaption { font-size: 15px; color: var(--text-2); }
.download-more { margin-top: 28px; }
/* A phone or tablet is already the device to install on. */
@media (hover: none) { .download-qr { display: none; } }

/* ------------------------------------------------------------------ legal */

.legal { background: var(--wash); background-size: 100% 520px; background-repeat: no-repeat; padding-block: 48px 96px; }
.legal-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: 14px; }
.toc summary {
  list-style: none; margin: 0 0 10px; cursor: pointer;
  font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.toc summary::-webkit-details-marker { display: none; }
.toc:not([open]) summary { margin: 0; }
.toc:not([open]) summary::after { content: ' +'; }
.toc ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; color: var(--text-2); }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.prose { max-width: 72ch; }
.prose h1 { font: 700 clamp(2.3rem, 5vw, 3.3rem)/1.05 var(--font-display); letter-spacing: -0.02em; margin-bottom: 10px; }
.prose h2 { font: 700 22px/1.25 var(--font-display); letter-spacing: -0.01em; margin: 44px 0 12px; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.prose ul { padding-left: 22px; margin: 0 0 1em; display: grid; gap: 8px; }
.updated { color: var(--text-2); margin-bottom: 28px; }
.draft {
  display: inline-block; margin-bottom: 24px; padding: 8px 14px; border-radius: 10px;
  background: color-mix(in srgb, #B7791F 14%, transparent); border: 1px solid color-mix(in srgb, #B7791F 45%, transparent);
  color: color-mix(in srgb, #B7791F 75%, var(--text)); font-weight: 600; font-size: 14px;
}
.summary {
  margin: 0 0 28px; padding: 24px 26px; border-radius: var(--r-hero);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.summary h2 { margin-top: 0; }
.summary ul { margin: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 12px; border-radius: var(--r-card); border: 1px solid var(--hairline); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
caption { text-align: left; padding: 14px 16px 6px; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
th, td { padding: 11px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
tbody th { font-weight: 600; width: 34%; }
td { color: var(--text-2); }
@media (max-width: 900px) {
  /* minmax(0, ...) and not a bare 1fr, which cannot shrink below its content:
     the table's 560px min-width (it scrolls inside .table-wrap) otherwise
     widened the whole column and the page scrolled sideways on a phone. */
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; padding: 18px 20px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline); }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

/* ------------------------------------------------------------------ directory */
/* The network and state pages (site/directory.ts). */

.dir-hero { padding-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs-sep { color: var(--text-2); opacity: 0.5; }
.dir-title { font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 24ch; }
.dir-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dir-facts li {
  padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline);
  font-size: 14px; color: var(--text-2);
}
.dir-facts b { color: var(--text); font-variant-numeric: tabular-nums; }

.section.dir-top { padding-block: 32px 0; }
.section.dir-list { padding-top: clamp(56px, 7vw, 88px); }
.dir-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dir-map {
  margin: 0; padding: 20px; border-radius: var(--r-hero);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.dir-main { display: grid; gap: 16px; min-width: 0; }
.dir-side-sticky { position: sticky; top: calc(var(--header-h) + 20px); }
/* A cropped map's lines run on past its edge; the card cuts them off. */
.dirmap { overflow: hidden; }
.dirmap .grat { vector-effect: non-scaling-stroke; }
.dirmap .land {
  fill: none; stroke: color-mix(in srgb, var(--text-2) 34%, transparent); stroke-width: 1;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.dirmap .land-here {
  fill: color-mix(in srgb, var(--accent) 7%, transparent);
  stroke: color-mix(in srgb, var(--accent) 75%, transparent); stroke-width: 1.5;
}
.dirmap .dim { stroke: color-mix(in srgb, var(--text-2) 30%, var(--surface)); }
/* Filtered out: the dot fades, and the dim layer under it still shows the place. */
.dirmap .lit-n, .dirmap .lit-k { transition: opacity 0.35s ease; }
.dirmap .off { opacity: 0; }
.dirmap .lit-n { stroke: var(--n); }
.dirmap .lit-k { stroke: var(--k); }
.legend .dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--text-2) 30%, var(--surface)); }
.legend .dot-n { background: var(--n); }
.legend .dot-k { background: var(--k); }

.dir-side { display: grid; gap: 16px; }
.dir-card {
  padding: 22px 24px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.dir-card h2 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 10px; }
.dir-card > p { color: var(--text-2); }
.dir-rules { margin: 0 0 1em; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 15px; }
.dir-source { margin: 0; font-size: 13px; color: var(--text-2); }
.dir-cta { position: relative; overflow: hidden; background: var(--ramp); border: 0; color: #FFFFFF; }
.dir-cta h2 { color: #FFFFFF; }
.dir-cta > p { color: rgba(255, 255, 255, 0.82); }
.dir-cta a { color: #7CE5EF; }
.dir-cta a:hover { color: #FFFFFF; }
.dir-cta .stores { margin-bottom: 14px; }
.dir-cta .store img { height: 44px; }
.dir-cta-more { margin: 0; font-size: 15px; }

.by-net { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.by-net a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-inline: -10px; border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.by-net a:hover { background: var(--accent-soft); color: var(--text); }
.by-net .pill { min-width: 52px; justify-content: center; }
.by-net-name { flex: 1; min-width: 0; font-size: 15px; }
.by-net b { font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.filters a {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text); text-decoration: none; font-weight: 650; font-size: 14px;
  transition: background-color 0.2s, border-color 0.2s;
}
.filters a:hover { border-color: var(--accent); color: var(--text); }
.filters a span { color: var(--text-2); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.filters a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filters a[aria-current="true"] span { color: var(--on-accent); opacity: 0.8; }
.filter-status { margin: 12px 0 0; font-size: 15px; color: var(--text-2); }
.filter-menu { display: none; position: relative; max-width: 420px; }
.filter-menu select {
  width: 100%; padding: 12px 44px 12px 16px; border-radius: 12px; border: 1.5px solid var(--hairline);
  background: var(--surface); color: var(--text); font: 600 16px/1.3 var(--font-body);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.filter-menu select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.filter-menu .icon { position: absolute; right: 16px; top: 50%; translate: 0 -50%; color: var(--text-2); pointer-events: none; }
.filter-all {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.filter-all:hover { color: var(--accent-strong); }
.filter-results > .places { margin-top: 12px; }
/* A filter change: out, swap, in (main.js). What is on screen rises row by row. */
.filter-results { transition: opacity 0.15s ease, translate 0.15s ease; }
.filter-results.leaving { opacity: 0; translate: 0 6px; }
.filter-results.entering .stagger {
  animation: row-in 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .filter-results { transition: none; }
  .filter-results.entering .stagger { animation: none; }
}

.area { margin-top: 40px; }
.area-title { font: 700 26px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 4px; }
.area-title a { color: inherit; text-decoration: none; }
.area-title a:hover { color: var(--accent); }
.dir-list .area-title + .state-grid { margin-top: 12px; }
.group { margin-top: 28px; }
.group h3 {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
  font: 700 19px/1.3 var(--font-display); letter-spacing: -0.01em;
}
.group h3 a { color: var(--text); text-decoration: none; }
.group h3 a:hover { color: var(--accent); }
.group-count { font: 500 14px var(--font-body); color: var(--text-2); font-variant-numeric: tabular-nums; }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 28px; }
.place { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.place-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; border-radius: 10px; }
a.place-link:hover { color: var(--accent); }
a.place-link:hover .place-text b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nowrap { white-space: nowrap; }
.place-text .ext { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 4px; vertical-align: -0.05em; color: var(--text-2); }
a.place-link:hover .ext { color: var(--accent); }
.place .logo { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
.place-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.place-text b { font-weight: 600; }
.place-text > span { font-size: 14px; color: var(--text-2); }
.place-closed {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px;
  background: var(--element); color: var(--text); font-size: 12px; font-weight: 600;
}
.place-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 45%; }

.net-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.net-card {
  --n: var(--accent);
  display: grid; align-content: start; gap: 4px; height: 100%; padding: 18px 20px;
  border-radius: var(--r-card); border: 1.5px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; transition: border-color 0.25s, transform 0.25s;
}
.net-card:hover { color: var(--text); border-color: color-mix(in srgb, var(--n) 55%, transparent); transform: translateY(-1px); }

.state-grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.state-grid a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--text); text-decoration: none; font-weight: 600;
}
.state-grid a:hover { border-color: var(--accent); color: var(--text); }
.state-grid b { font-weight: 500; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dir-also { margin-top: 28px; }
.nets-more { margin: 0; font-size: 15px; color: var(--text-2); }

@media (max-width: 900px) {
  .dir-grid { grid-template-columns: 1fr; }
  .dir-side-sticky { position: static; }
}
@media (max-width: 640px) {
  .dir-map { padding: 12px; }
  .dir-card { padding: 18px; }
  .places { grid-template-columns: 1fr; }
  .place-pills { max-width: 40%; }
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-cards { grid-template-columns: 1fr; }
  .filters { display: none; }
  .filter-menu { display: block; }
}

/* ------------------------------------------------------------------ page transitions */
/*
 * Between pages (Bill, 2026-11-06, once the network and state pages gave
 * the site somewhere to go): the browser's cross-document view transition,
 * no script. The page drifts up as it fades out, and the next rises in a
 * beat later. The header is its own layer, so it holds still instead of
 * moving with the page under it.
 *
 * A first version, a 0.26s dissolve with a 10px rise, was too quiet to
 * notice (Bill): on a fast load, two pages with the same header and
 * background read as a plain switch. Browsers without it (Firefox, older
 * Safari) change page as before, and so does anyone who asks for less
 * motion.
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 0.2s cubic-bezier(0.4, 0, 1, 1) both vt-out; }
  ::view-transition-new(root) { animation: 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both vt-in; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px); } }

/* ------------------------------------------------------------------ reveal */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Generated from theme.ts by build.ts. Last, so a Network class beats `.pill` and `.net`. */
:root{--n-astc:#E03131;--n-ahs:#E64980;--n-time_travelers:#A47C48;--n-aza:#FD7E14;--n-narm:#1E3A8A;--n-roam:#339AF0;--n-acm:#BE4BDB;--n-anca:#74B816;--n-sarmp:#F59F00;--n-marp:#7048E8;--n-wr:#12B886;--n-mrmp:#A61E4D;--n-pow:#22B8CF;--c-museum:#4C6EF5;--c-garden:#2F9E44;--c-scienceCenter:#E03131;--c-zooAquarium:#F5B400;}@media (prefers-color-scheme:dark){:root{--n-astc:#EB7979;--n-ahs:#EB6D99;--n-time_travelers:#B29063;--n-aza:#FD7E14;--n-narm:#8E9CC4;--n-roam:#339AF0;--n-acm:#CE78E4;--n-anca:#74B816;--n-sarmp:#F59F00;--n-marp:#A288F0;--n-wr:#12B886;--n-mrmp:#CE839D;--n-pow:#22B8CF;}}.n-narm{--n:var(--n-narm)}.n-roam{--n:var(--n-roam)}.n-time_travelers{--n:var(--n-time_travelers)}.n-ahs{--n:var(--n-ahs)}.n-astc{--n:var(--n-astc)}.n-acm{--n:var(--n-acm)}.n-anca{--n:var(--n-anca)}.n-aza{--n:var(--n-aza)}.n-sarmp{--n:var(--n-sarmp)}.n-marp{--n:var(--n-marp)}.n-mrmp{--n:var(--n-mrmp)}.n-wr{--n:var(--n-wr)}.n-pow{--n:var(--n-pow)}.dots .cm,.k-museum{--k:var(--c-museum)}.dots .cg,.k-garden{--k:var(--c-garden)}.dots .cs,.k-scienceCenter{--k:var(--c-scienceCenter)}.dots .cz,.k-zooAquarium{--k:var(--c-zooAquarium)}.explorer[data-net="narm"] .dots circle:not(.nnar){fill:var(--dim);opacity:.28}.explorer[data-net="narm"] .dots circle.nnar{fill:var(--n-narm);opacity:1}.explorer[data-net="roam"] .dots circle:not(.nroa){fill:var(--dim);opacity:.28}.explorer[data-net="roam"] .dots circle.nroa{fill:var(--n-roam);opacity:1}.explorer[data-net="time_travelers"] .dots circle:not(.ntim){fill:var(--dim);opacity:.28}.explorer[data-net="time_travelers"] .dots circle.ntim{fill:var(--n-time_travelers);opacity:1}.explorer[data-net="ahs"] .dots circle:not(.nahs){fill:var(--dim);opacity:.28}.explorer[data-net="ahs"] .dots circle.nahs{fill:var(--n-ahs);opacity:1}.explorer[data-net="astc"] .dots circle:not(.nast){fill:var(--dim);opacity:.28}.explorer[data-net="astc"] .dots circle.nast{fill:var(--n-astc);opacity:1}.explorer[data-net="acm"] .dots circle:not(.nacm){fill:var(--dim);opacity:.28}.explorer[data-net="acm"] .dots circle.nacm{fill:var(--n-acm);opacity:1}.explorer[data-net="anca"] .dots circle:not(.nanc){fill:var(--dim);opacity:.28}.explorer[data-net="anca"] .dots circle.nanc{fill:var(--n-anca);opacity:1}.explorer[data-net="aza"] .dots circle:not(.naza){fill:var(--dim);opacity:.28}.explorer[data-net="aza"] .dots circle.naza{fill:var(--n-aza);opacity:1}.explorer[data-net="sarmp"] .dots circle:not(.nsar){fill:var(--dim);opacity:.28}.explorer[data-net="sarmp"] .dots circle.nsar{fill:var(--n-sarmp);opacity:1}.explorer[data-net="marp"] .dots circle:not(.nmar){fill:var(--dim);opacity:.28}.explorer[data-net="marp"] .dots circle.nmar{fill:var(--n-marp);opacity:1}.explorer[data-net="mrmp"] .dots circle:not(.nmrm){fill:var(--dim);opacity:.28}.explorer[data-net="mrmp"] .dots circle.nmrm{fill:var(--n-mrmp);opacity:1}.explorer[data-net="wr"] .dots circle:not(.nwr){fill:var(--dim);opacity:.28}.explorer[data-net="wr"] .dots circle.nwr{fill:var(--n-wr);opacity:1}.explorer[data-net="pow"] .dots circle:not(.npow){fill:var(--dim);opacity:.28}.explorer[data-net="pow"] .dots circle.npow{fill:var(--n-pow);opacity:1}.map-inset-0{left:0.00%;top:77.42%}.map-inset-1{left:16.37%;top:84.01%}