/* Flock Camera — site styles
   White ground, black type, hairlines instead of cards. Amber is the one
   accent and is kept for the "Get the app" action. Dark panels are reserved for
   app promotion, so they read as the ad, not as page chrome.
     ink   #141414   amber #FFB11F   line #E6E6E4   soft #F7F7F6
   Red is reserved for Flock Safety-branded cameras. Never use it as an accent. */

/* Geist, self-hosted: one variable file (400-700), Latin subset, 29 KB.
   Self-hosting skips a render-blocking third-party stylesheet and a second
   connection. The file name is fixed and /assets is cached immutable, so a new
   version of the font must ship under a new name. Licence: fonts/OFL.txt. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #141414;
  --text: #141414;
  --text-2: #4a4a4a;
  --mute: #6b6b6b;
  --line: #e6e6e4;
  --soft: #f7f7f6;
  --chip: #f3f3f2;
  --paper: #ffffff;
  --amber: #ffb11f;
  --amber-ink: #8a5a00;
  --flock-red: #e5484d;
  --dark: #141414;
  --dark-2: #2a2a2a;
  --dark-text: #f2f2f2;
  --dark-mute: #b5b5b5;

  --wrap: 1180px;
  --wrap-text: 720px;
  --radius: 12px;
  --radius-lg: 20px;

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.84rem;
  --step-0: 1rem;
  --step-1: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.2vw, 2.35rem);
  --step-4: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --step-5: clamp(2.4rem, 1.6rem + 3.4vw, 3.9rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; font-weight: 600; }
p { margin: 0 0 1em; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-text { width: min(100% - 2.5rem, var(--wrap-text)); margin-inline: auto; }
.wrap-md { width: min(100% - 2.5rem, 1040px); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--soft { background: var(--soft); }
.rule { border-top: 1px solid var(--line); }

.lede { font-size: var(--step-1); color: var(--text-2); max-width: 40em; }
.muted { color: var(--mute); }
.label {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 0.6rem;
}
.link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 0.75rem 1.25rem; font-weight: 600; z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 500;
}
@media (min-width: 721px) {
  .site-header { position: sticky; top: 0; }
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 0.6rem; flex: none;
  font-weight: 600; letter-spacing: -0.015em; text-decoration: none;
  font-size: 1rem; color: var(--text);
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }

.site-search {
  flex: 1 1 auto; min-width: 0; max-width: 420px;
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  height: 40px; padding: 0 0.85rem;
  background: var(--chip); border-radius: 8px; color: var(--mute);
}
.site-search svg { flex: none; }
.site-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 0.9rem; color: var(--text);
}
.site-search input::placeholder { color: var(--mute); }
.site-search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.site-search input:focus-visible { outline: none; }

.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 700;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); overflow: hidden;
}
.search-results a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.9rem; text-decoration: none; font-size: 0.92rem;
  color: var(--text); border-top: 1px solid var(--line);
}
.search-results a:first-child { border-top: 0; }
.search-results a:hover, .search-results a:focus { background: var(--soft); outline: none; }
.search-results small { color: var(--mute); font-size: 0.82rem; white-space: nowrap; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; flex: none; }
.site-nav a {
  color: var(--text-2); text-decoration: none;
  font-size: 0.94rem; font-weight: 500; white-space: nowrap;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current] { color: var(--text); font-weight: 600; }

.get-app { position: relative; flex: none; }
.get-app__short { display: none; }
.get-app__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 700;
  width: 304px; padding: 1.15rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.get-app__panel[hidden] { display: none; }
.get-app__scan { display: flex; gap: 1rem; align-items: center; }
.get-app__scan img { width: 112px; height: 112px; flex: none; image-rendering: pixelated; }
.get-app__scan b { display: block; font-size: 0.95rem; line-height: 1.3; margin-bottom: 0.25rem; }
.get-app__scan span { font-size: 0.84rem; color: var(--mute); line-height: 1.45; display: block; }
.get-app__alt {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.9rem;
  font-size: 0.84rem; color: var(--mute);
}

/* Narrow desktop and tablet: the long label is what overflows first. */
@media (max-width: 1023px) {
  .get-app__long { display: none; }
  .get-app__short { display: inline; }
  .site-header__inner { gap: 1.1rem; }
  .site-nav { gap: 1.1rem; }
}

/* Phone: name, search icon, Get app and the menu button on one row. Search
   and the page links move into the menu. */
.icon-btn {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--text); cursor: pointer;
}
.icon-btn:hover { background: var(--chip); }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }
.site-menu { display: none; }

@media (max-width: 720px) {
  .site-header__inner { gap: 0.25rem; min-height: 60px; padding-right: 0.5rem; }
  .brand { margin-right: auto; }
  .brand img { width: 30px; height: 30px; }
  .site-header__inner > .site-search, .site-nav { display: none; }
  .icon-btn { display: inline-flex; }
  .get-app { margin: 0 0.15rem; }
  .get-app__panel { display: none !important; }
  .site-menu:not([hidden]) {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 60px); overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
    padding: 1rem 0 1.5rem;
  }
  .site-search--menu { max-width: none; height: 46px; }
  .site-search--menu input { font-size: 1rem; }
  .site-menu__links { margin-top: 0.5rem; }
  .site-menu__links a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 0.2rem; border-bottom: 1px solid var(--line);
    font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--text); text-decoration: none;
  }
  .site-menu__links a span { color: var(--mute); font-weight: 400; }
  .site-menu__app {
    display: flex; gap: 0.9rem; align-items: center;
    margin-top: 1.4rem; padding: 1rem; background: var(--soft); border-radius: var(--radius);
  }
  .site-menu__app img { border-radius: 12px; flex: none; }
  .site-menu__app p { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--mute); }
  .site-menu__app b { display: block; font-size: 0.95rem; color: var(--text); }
  .site-menu .appstore { display: inline-block; margin-top: 0.85rem; }
  .menu-open .sticky-cta { display: none; }
}
@media (max-width: 359px) {
  .brand__name { display: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; height: 44px; padding: 0 1.2rem;
  border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.95rem; text-decoration: none;
  white-space: nowrap; flex: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn--sm { height: 40px; padding: 0 1rem; font-size: 0.9rem; }
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: #ffbe45; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2b2b2b; }
.btn--outline { border-color: var(--line); color: var(--text); background: var(--paper); }
.btn--outline:hover { border-color: #c9c9c6; }

/* App Store badge — Apple's own artwork, used unmodified. Apple's marketing
   guidelines allow uniform scaling only, so nothing here may recolour, crop or
   re-round the SVG. Minimum badge height is 40px. */
.appstore {
  display: inline-block; line-height: 0; flex: none;
  border-radius: 9px; text-decoration: none;
  transition: opacity 0.15s ease;
}
.appstore img { display: block; height: 48px; width: auto; }
.appstore:hover { opacity: 0.85; }
.appstore--sm img { height: 40px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }

/* QR to the App Store listing. Only useful when the visitor is not already on
   a phone, so it disappears at phone widths. */
.qr { display: flex; align-items: center; gap: 0.9rem; }
.qr img {
  width: 84px; height: 84px; flex: none; border-radius: 6px;
  image-rendering: pixelated; background: #fff;
}
.qr span { font-size: 0.8rem; line-height: 1.35; max-width: 8em; }
.qr--lg img { width: 128px; height: 128px; border: 1px solid var(--line); border-radius: 10px; }
.qr--lg span { font-size: 0.9rem; max-width: 12em; color: var(--text-2); }
@media (max-width: 720px) { .qr { display: none; } }

/* ---------------------------------------------------------------- phone */
/* An iPhone drawn around a raw screenshot. Everything scales from --w, so a
   size is one variable. */
.phone {
  --w: 300px;
  position: relative; flex: none; width: var(--w);
  padding: calc(var(--w) * 0.036);
  border-radius: calc(var(--w) * 0.165);
  background: linear-gradient(145deg, #45454a, #1c1c1e 38%, #2e2e31 70%, #1a1a1c);
  box-shadow: 0 0 0 1px #0b0b0c, inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 30px 60px -24px rgba(0, 0, 0, 0.35);
}
/* Side buttons: action and volume on the left, power on the right. */
.phone::before, .phone::after {
  content: ""; position: absolute; width: 3px; background: #2a2a2d;
}
.phone::before {
  left: -3px; top: 27%; height: 15%; border-radius: 2px 0 0 2px;
  box-shadow: 0 calc(var(--w) * -0.2) 0 -0.5px #2a2a2d;
}
.phone::after { right: -3px; top: 29%; height: 13%; border-radius: 0 2px 2px 0; }
.phone__screen {
  position: relative; overflow: hidden; background: #000;
  border-radius: calc(var(--w) * 0.13);
}
.phone__screen img { display: block; width: 100%; height: auto; }
.phone__island {
  position: absolute; left: 50%; top: 1.6%; transform: translateX(-50%);
  width: 32%; height: 3.6%; border-radius: 999px; background: #000;
}
.phone--rec .phone__island { width: 41%; top: 1.3%; height: 4.2%; }
.phone--md { --w: 220px; }
.phone--sm { --w: 190px; }
.phone--panel { --w: 210px; }

/* ---------------------------------------------------------------- home */
.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 3.5rem; align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero h1 { font-size: var(--step-5); margin-bottom: 1.3rem; }
.hero__sub { font-size: var(--step-1); color: var(--text-2); max-width: 30em; margin-bottom: 2rem; }
.hero__meta { margin: 1.75rem 0 0; font-size: 0.82rem; color: var(--mute); }
.hero__phone { display: flex; justify-content: center; }
.dot-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--text-2); margin-bottom: 1.25rem;
}
.dot-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}
@media (max-width: 720px) {
  .hero { gap: 2.5rem; }
  .hero__phone .phone { --w: 240px; }
}

.stat-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-strip__grid > div { padding: 1.9rem 1.5rem; border-left: 1px solid var(--line); }
.stat-strip__grid > div:first-child { padding-left: 0; border-left: 0; }
.stat-strip strong {
  display: block; font-size: var(--step-3); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.15;
}
.stat-strip span { font-size: 0.875rem; color: var(--mute); }
@media (max-width: 720px) {
  .stat-strip__grid > div { padding: 1.25rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .stat-strip__grid > div:first-child { border-top: 0; }
}

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 3rem; margin-top: 3rem;
}
.features .phone { margin-bottom: 1.75rem; }
.features h3 { margin-bottom: 0.35rem; }
.features p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.section-head h2 { margin: 0; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 4rem; }

.final-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
}
.final-cta h2 { margin-bottom: 0.4rem; }
.final-cta p { color: var(--text-2); margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------- lists */
/* Hairline rows: a name and a number. Used for states, towns, brands. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem;
}
.rows li > span:last-child, .rows .num { color: var(--mute); white-space: nowrap; }
.rows a { text-decoration: none; }
.rows a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rows--grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  column-gap: 2.25rem;
}
.rows--top li:first-child { border-top: 1px solid var(--line); }

/* Guides index: topic chips, then one section per topic. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 36px; padding: 0 0.9rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.9rem; color: var(--text); text-decoration: none; white-space: nowrap;
}
.chip span { color: var(--mute); }
.chip:hover { border-color: var(--ink); }
.topic {
  display: grid; grid-template-columns: 15rem 1fr; gap: 3rem;
  padding: 2.5rem 0; border-top: 1px solid var(--ink); scroll-margin-top: 80px;
}
.topic:first-child { padding-top: 0.5rem; border-top: 0; }
.topic__head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.topic__head p { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--mute); }
.topic__list { list-style: none; margin: 0; padding: 0; }
.topic__list li + li { border-top: 1px solid var(--line); }
.topic__list a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem;
  padding: 1rem 0; text-decoration: none; color: var(--text);
}
.topic__list li:first-child a { padding-top: 0; }
.topic__list b { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.topic__list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.topic__list span { grid-column: 1; font-size: 0.92rem; color: var(--text-2); line-height: 1.5; }
.topic__list small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--mute); font-size: 0.82rem; }
.page-body > .app-panel { margin-top: 2.5rem; }
@media (max-width: 720px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -1.25rem; margin-right: -1.25rem; padding: 0 1.25rem; scrollbar-width: none; }
  .topic { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .topic__list small { display: none; }
}

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-top: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 1px solid var(--line); }
.link-list a { display: block; padding: 0.85rem 0; text-decoration: none; }
.link-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-list small { display: block; color: var(--mute); font-size: 0.875rem; margin-top: 0.15rem; }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 0.9rem 2rem 0.9rem 0;
  font-weight: 500; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.faq__body { padding-bottom: 1rem; max-width: 65ch; }
.faq__body p { color: var(--text-2); font-size: 0.95rem; margin: 0; }
.faq__body a { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------- app panel */
/* The dark app ad: copy and actions on the left, a phone rising from the
   bottom edge on the right. Used at the end of guides and on state and town
   pages. */
.app-panel {
  background: var(--dark); color: var(--dark-text);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: 2.5rem 3rem 2.5rem 2.75rem;
  display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap;
}
.app-panel__copy { flex: 1 1 320px; }
.app-panel h2 {
  color: #fff; font-size: var(--step-3); margin-bottom: 0.6rem; max-width: 18em;
}
.app-panel p { color: var(--dark-mute); margin-bottom: 1.5rem; max-width: 34em; }
.app-panel .qr span { color: #9a9a9a; }
/* The whole phone, not a crop: the app's alerts and camera cards sit at the
   bottom of the screen, which a crop from the top would cut off. */
.app-panel__phone { flex: none; margin-inline: auto; }
.app-panel__phone .phone { --w: 210px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.app-panel--compact .app-panel__phone .phone { --w: 190px; }
@media (max-width: 720px) {
  .app-panel { padding: 2rem 1.5rem; gap: 2rem; }
  .app-panel__phone .phone, .app-panel--compact .app-panel__phone .phone { --w: 200px; }
}

/* ---------------------------------------------------------------- page head */
.page-head { padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem; }
.page-head h1 { margin-bottom: 0.75rem; }
.page-head .lede { margin: 0; }
.page-head .lede strong { color: var(--text); }

.breadcrumbs { font-size: 0.84rem; color: var(--mute); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--mute); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs span { margin: 0 0.35rem; }

.note { font-size: 0.84rem; color: var(--mute); margin: 0.75rem 0 0; }
.h-sm { font-size: var(--step-2); margin-bottom: 0.9rem; }
.page-body { padding-bottom: clamp(3.5rem, 7vw, 5rem); }

details.more summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.92rem; padding: 0.5rem 0; list-style: none;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; color: var(--mute); }
details.more[open] summary::after { content: "–"; }
details.more .rows { margin-top: 0.5rem; }

.block { margin-top: clamp(3rem, 6vw, 4rem); }
.block h2 { font-size: var(--step-2); margin-bottom: 0.9rem; }

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data th, table.data td {
  text-align: left; padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
table.data th { font-size: 0.8rem; font-weight: 500; color: var(--mute); }
table.data td.num, table.data th.num { text-align: right; padding-right: 0; padding-left: 0.75rem; }
table.data td.num { color: var(--text-2); }
table.data a { text-decoration: none; font-weight: 500; }
table.data a:hover { text-decoration: underline; text-underline-offset: 3px; }
.table-wide { min-width: 520px; }

/* ---------------------------------------------------------------- maps */
.map-shell {
  position: relative; z-index: 0; isolation: isolate;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
/* Leaflet sets z-index up to 1000 on its own panes and controls, which would
   otherwise paint over the sticky header. `isolation: isolate` traps all of
   that inside a stacking context of its own, so the map can never escape its
   own box no matter what Leaflet does internally. */
#map { width: 100%; height: min(64vh, 520px); background: #eef0f0; position: relative; z-index: 0; }
.leaflet-container { font: inherit; }
.legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center;
  font-size: 0.84rem; color: var(--mute); margin-top: 0.75rem;
}
.legend b { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--text); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--flock { background: var(--flock-red); }
.dot--other { background: var(--amber); }

/* /map: panel on the left, map filling the rest of the viewport. On a phone
   the heading comes first, then the map, then the lists. */
.map-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  grid-template-areas: "intro stage" "list stage" "app stage";
  grid-template-rows: auto auto 1fr;
  min-height: calc(100vh - 65px);
}
.map-intro { grid-area: intro; padding: 1.75rem 1.5rem 0; border-right: 1px solid var(--line); }
.map-list { grid-area: list; padding: 1.5rem 1.5rem 0; border-right: 1px solid var(--line); }
.map-app { grid-area: app; padding: 1.5rem; border-right: 1px solid var(--line); display: flex; align-items: flex-end; }
.map-stage { grid-area: stage; position: relative; z-index: 0; isolation: isolate; min-height: 560px; }
.map-stage #map { position: absolute; inset: 0; height: auto; }
.map-intro h1 { font-size: 1.9rem; letter-spacing: -0.035em; margin-bottom: 0.5rem; }
.map-intro p { font-size: 0.9rem; color: var(--text-2); margin-bottom: 1.25rem; }
.mini-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.mini-stats div { background: var(--paper); padding: 0.75rem; }
.mini-stats strong { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.mini-stats span { font-size: 0.75rem; color: var(--mute); }
.map-list .rows li { font-size: 0.875rem; padding: 0.55rem 0; }
.map-overlay {
  position: absolute; z-index: 800; background: var(--paper);
  border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  font-size: 0.8rem;
}
.map-overlay--legend { left: 12px; bottom: 28px; padding: 0.45rem 0.75rem; display: flex; gap: 0.9rem; }
.map-overlay--legend b { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.map-overlay--status { left: 56px; top: 12px; padding: 0.4rem 0.75rem; color: var(--text-2); max-width: calc(100% - 200px); }
.map-overlay--locate { right: 12px; top: 12px; height: 38px; padding: 0 0.85rem; border: 1px solid var(--line); font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.map-overlay--locate[hidden] { display: none; }
@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "stage" "list" "app";
    grid-template-rows: none; min-height: 0;
  }
  .map-intro, .map-list, .map-app { border-right: 0; padding-inline: 1.25rem; }
  .map-intro { padding-bottom: 1.25rem; }
  .map-stage { min-height: 0; height: 68vh; }
  .map-overlay--status { max-width: calc(100% - 200px); }
}

/* The small dark app card in the /map sidebar. */
.dark-card {
  background: var(--dark); color: var(--dark-text); border-radius: var(--radius);
  padding: 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; width: 100%;
}
.dark-card b { color: #fff; font-size: 1rem; line-height: 1.3; }
.dark-card p { margin: 0; font-size: 0.84rem; color: var(--dark-mute); }
.dark-card .qr img { width: 76px; height: 76px; }
.dark-card .qr { gap: 0.85rem; }
.dark-card__actions { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: #9a9a9a; }

/* ---------------------------------------------------------------- guides */
.article-layout {
  display: grid; gap: 0 4.5rem; align-items: start;
  grid-template-columns: 240px minmax(0, 720px);
  grid-template-areas: "side head" "side body";
  justify-content: center;
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(3.5rem, 7vw, 5rem);
}
.article-head { grid-area: head; }
.article-side { grid-area: side; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2rem; padding-top: 0.5rem; }
.article-body { grid-area: body; min-width: 0; }
.article-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); margin-bottom: 0.6rem; }
.article-meta { font-size: 0.84rem; color: var(--mute); margin-bottom: 1.75rem; }

.answer-box { background: var(--soft); border-radius: var(--radius); padding: 1.35rem 1.5rem; }
.answer-box p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--text); }

.toc summary {
  list-style: none; cursor: pointer; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.toc a { font-size: 0.875rem; color: var(--text-2); text-decoration: none; line-height: 1.4; display: block; }
.toc a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.side-app {
  display: flex; flex-direction: column; gap: 0.85rem;
  border-top: 1px solid var(--line); padding-top: 1.75rem; text-decoration: none;
}
.side-app b { font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.side-app__text span { display: block; font-size: 0.875rem; color: var(--text-2); line-height: 1.55; margin-top: 0.35rem; }
.side-app__get { display: none; }
.side-app__badge img { height: 40px; width: auto; }
.side-app:hover b { text-decoration: underline; text-underline-offset: 3px; }

.prose { font-size: 1.06rem; line-height: 1.7; color: #2a2a2a; }
.prose h2 { font-size: var(--step-2); margin: 2.75rem 0 0.85rem; color: var(--text); scroll-margin-top: 88px; }
.prose h3 { margin: 2rem 0 0.6rem; color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--text); }
.prose blockquote {
  margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--amber);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table.data { font-size: 0.92rem; }

/* Blocks the guide content itself can use (content/guides/*.html). */
.inline-cta {
  margin: 2.25rem 0; padding: 1.15rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.inline-cta h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.inline-cta p { margin: 0; font-size: 0.98rem; color: var(--text-2); }
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--paper); padding: 1rem 1.1rem; }
.stat strong { display: block; font-size: var(--step-2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.stat span { font-size: 0.84rem; color: var(--mute); line-height: 1.4; display: block; }
.prose .faq { margin-top: 1rem; }

.lookup {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; margin: 2.25rem 0;
}
.lookup label { display: block; font-weight: 600; margin-bottom: 0.75rem; color: var(--text); }
.lookup__row { display: flex; gap: 0.5rem; flex-wrap: wrap; position: relative; }
.lookup input {
  flex: 1 1 200px; min-width: 0; height: 44px; padding: 0 0.9rem;
  border: 1px solid #d4d4d1; border-radius: 8px; font: inherit; font-size: 0.95rem;
}
.lookup input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.lookup .search-results { top: calc(100% + 6px); }

.article-end { margin-top: 3.5rem; }
.article-end .note { margin-top: 1.5rem; }
.related { margin-top: 3rem; }
.related h2 { font-size: var(--step-2); margin-bottom: 1rem; }

@media (max-width: 1023px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "side" "body";
    width: min(100% - 2.5rem, var(--wrap-text));
  }
  .article-side { position: static; gap: 1rem; padding: 1rem 0 0.5rem; }
  .toc { border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; }
  .toc summary { display: flex; justify-content: space-between; color: var(--text); font-size: 0.75rem; }
  .toc summary::after { content: "Show"; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mute); font-size: 0.84rem; }
  .toc[open] summary::after { content: "Hide"; }
  /* The tall sidebar ad becomes a one-line card. */
  .side-app {
    flex-direction: row; align-items: center; gap: 0.9rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.75rem 0.9rem 0;
  }
  .side-app .phone {
    --w: 64px; height: 84px; overflow: hidden; align-self: flex-end;
    border-radius: 12px 12px 0 0; padding: 3px 3px 0;
  }
  .side-app .phone { box-shadow: none; }
  .side-app .phone::before, .side-app .phone::after, .side-app .phone__island { display: none; }
  .side-app .phone__screen { border-radius: 9px 9px 0 0; }
  .side-app__text { flex: 1; min-width: 0; padding-bottom: 0.75rem; }
  .side-app b { font-size: 0.92rem; }
  .side-app__text span { font-size: 0.82rem; margin-top: 0.1rem; }
  .side-app__badge { display: none; }
  .side-app__get { display: inline-flex; margin-bottom: 0.75rem; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--soft); border-top: 1px solid var(--line);
  color: var(--text-2); padding: clamp(2.75rem, 5vw, 4rem) 0 2rem; font-size: 0.9rem;
}
.footer__h { font-size: 0.8rem; font-weight: 600; color: var(--text); margin: 0 0 0.8rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr repeat(3, 1fr); }
.footer__brand p { max-width: 30ch; margin: 0.9rem 0 1.25rem; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
.footer__legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: 0.82rem; line-height: 1.7; color: var(--mute);
}
.footer__legal p { margin-bottom: 0.6rem; max-width: 80em; }

/* ---------------------------------------------------------------- sticky bar */
/* Phone only. A floating dark bar with one action. */
.sticky-cta {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 600;
  background: var(--dark); color: #fff; border-radius: 16px;
  padding: 0.7rem 0.75rem 0.7rem 0.85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  display: none; align-items: center; gap: 0.75rem;
}
.sticky-cta img { width: 36px; height: 36px; border-radius: 8px; flex: none; }
.sticky-cta div { flex: 1; min-width: 0; line-height: 1.3; }
.sticky-cta b {
  display: block; font-size: 0.86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-cta small { color: #aaa; font-size: 0.78rem; }
.sticky-cta .btn { height: 36px; padding: 0 1rem; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  .sticky-cta--deferred { transform: translateY(calc(100% + 30px)); transition: transform 0.25s ease; }
  .sticky-cta--deferred.is-visible { transform: none; }
  body { padding-bottom: 88px; }
}