/* Peekaboo marketing site: the After Dark look (approved 2026-11-10).
   The system is written down in design/AFTER-DARK-SYSTEM.md: tokens, type, every component and four page skeletons.
   Order of this file: 1 tokens, 2 base and element defaults, 3 type, 4 small parts, 5 header, 6 camera view and message
   card, 7 heroes, 8 sections of the home page, 9 parts for inner pages, 10 early list, 11 footer, 13 small screens,
   14 reduced motion, then 13b (reference, legal and guide pages) and 13a (audience, compare and cameras pages), which
   come last so they win. There is no 12: it held the old pages' classes until the last page was rebuilt (2026-11-10).
   Colour is used for status marks only. Photos come from /assets/photos/ and carry an "Example photo" label. */

/* ---------- 1. Tokens ---------- */

:root {
  --bg: #080b10;
  --bg-2: #0e131a;
  --bg-3: #161c26;
  --line: rgba(226, 233, 243, .12);
  --line-2: rgba(226, 233, 243, .22);
  --text: #f2f5f9;
  --text-2: #b4bdca;
  --text-3: #8f99a8;
  --amber: #f3b34c;
  --green: #84d4a6;

  --paper: #f2eee6;
  --paper-card: #fffdf9;
  --paper-line: rgba(18, 22, 29, .14);
  --ink: #12161d;
  --ink-2: #454d5a;
  --ink-3: #5f6672;

  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gut: 40px;
  --wrap: 1200px;
  --band: clamp(64px, 6.8vw, 86px);
  --head: 78px;
  --r-view: 12px;
  --r-card: 20px;
}

/* ---------- 2. Base and element defaults ---------- */

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

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(242, 245, 249, .45); }
a:hover { text-decoration-color: currentColor; }
b, strong { font-weight: 600; }
i, em { font-style: italic; }
small { font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
button, input, select, textarea { font: inherit; color: inherit; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 24px; }

code, kbd, samp, pre {
  font-family: var(--mono);
  font-size: .88em;
}
code {
  padding: .1em .38em;
  border-radius: 5px;
  background: var(--bg-3);
  color: var(--text);
  overflow-wrap: anywhere;
}
pre {
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #05070a;
  color: var(--text);
  line-height: 1.55;
  overflow-x: auto;
}
pre code { padding: 0; background: none; overflow-wrap: normal; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}
th, td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { font-weight: 600; color: var(--text); }
td { color: var(--text-2); }
thead th { font-size: 14.5px; color: var(--text-3); border-bottom-color: var(--line-2); }
caption { text-align: left; padding-bottom: 10px; color: var(--text-3); font-size: 14.5px; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: calc(820px + var(--gut) * 2); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 30;
  padding: 12px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- 3. Type ---------- */

h1, h2, h3, h4, .h-quiet {
  font-family: var(--display);
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  font-size: clamp(44px, 7vw, 90px);
  line-height: .93;
  letter-spacing: -.032em;
  font-weight: 640;
  font-variation-settings: "wdth" 86;
}

h2 {
  font-size: clamp(36px, 4.7vw, 62px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 620;
  font-variation-settings: "wdth" 88;
}

/* A section title that should not shout: "One plain line per camera." */
.h-quiet {
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 560;
  font-variation-settings: "wdth" 92;
}

/* A second-level headline inside a page section, between h2 and h3. */
.h-mid {
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 600;
  font-variation-settings: "wdth" 88;
}

h3 {
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 580;
  font-variation-settings: "wdth" 92;
}

h4 {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-weight: 580;
  font-variation-settings: "wdth" 94;
}

.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 31em;
  text-wrap: pretty;
}

/* Fine print. */
.small {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.small a { color: var(--text-2); }

/* A small label over a block: "Peekaboo reads it back", "You get". */
.label, .kicker {
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 10px;
}

.caption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-3);
}

/* A sentence someone would say to Peekaboo. Always a quoted routine, never a product message. */
.said {
  font: 520 20.5px/1.22 var(--display);
  font-variation-settings: "wdth" 92;
  letter-spacing: -.012em;
  color: var(--text);
  text-wrap: balance;
}

/* A product message quoted in running text. */
.quote {
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

.crumb {
  margin-bottom: 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
}
.crumb a { color: inherit; }

/* Running text: paragraphs and lists with room between them. */
.prose > * + * { margin-top: 1em; }
.prose { color: var(--text-2); max-width: 40em; text-wrap: pretty; }
.prose b, .prose strong { color: var(--text); }
.prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: 1.6em; }
.prose ul, .prose ol, .fine ul:not([class]), .qa ul:not([class]) { padding-left: 1.15em; }
.prose ul, .fine ul:not([class]), .qa ul:not([class]) { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li, .fine ul:not([class]) li + li, .qa ul:not([class]) li + li { margin-top: .45em; }
.prose li::marker, .fine li::marker, .qa li::marker { color: var(--text-3); }

/* ---------- 4. Small parts ---------- */

/* Brand mark: a dot peeking over an edge. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 620 22px/1 var(--display);
  font-variation-settings: "wdth" 90;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}
.mark {
  flex: none;
  width: 22px;
  height: 20px;
  background:
    radial-gradient(circle at 50% 100%, currentColor 0 8.3px, transparent 9px) 50% 0 / 22px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 22px 3.5px no-repeat;
}
/* The same mark as an app icon, in a message card. */
.mark--app {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 100%, #0b0e13 0 4.5px, transparent 5px) 50% 4.5px / 12px 6px no-repeat,
    linear-gradient(#0b0e13, #0b0e13) 50% 13.4px / 12px 2.2px no-repeat,
    var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--text);
  color: #0a0d12;
  font: 600 16.5px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: #fff; }
.btn:disabled { opacity: .6; cursor: default; }
.btn--ghost, .btn--line {
  background: rgba(8, 11, 16, .35);
  color: var(--text);
  border-color: rgba(242, 245, 249, .38);
}
.btn--ghost:hover, .btn--line:hover { background: rgba(242, 245, 249, .1); border-color: rgba(242, 245, 249, .7); }
.btn--small { min-height: 42px; padding: 0 20px; font-size: 15px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

/* A text link that leads somewhere: "Try your own sentence →". */
.go {
  display: inline-block;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(242, 245, 249, .45);
}
.go::after { content: " \2192"; }
.go:hover { text-decoration-color: currentColor; }

/* Status marks. Colour is used only here: green seen, amber needs a look, hollow amber not seen, dotted couldn't confirm. */
.dot {
  flex: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
}
.dot--seen { background: var(--green); }
.dot--look { background: var(--amber); }
.dot--notseen { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
.dot--unsure { background: transparent; border: 2px dotted var(--text-2); }
.dot--off { background: transparent; box-shadow: inset 0 0 0 2px var(--text-3); }
.dot--big { width: 16px; height: 16px; }
.dot--big.dot--notseen { box-shadow: inset 0 0 0 3px var(--amber); }
.dot--big.dot--unsure { border-width: 3px; }

/* A plain callout. */
.notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}
.notice b { color: var(--text); }

/* ---------- 5. Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
}
/* Over a photo hero (home, audience pages). */
.site-header--over {
  position: absolute;
  inset: 0 0 auto 0;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: var(--head);
}
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 30px; }
.site-nav a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  opacity: .86;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.nav-toggle { display: none; }

/* ---------- 6. Camera view and message card ---------- */

/* Camera view: a real photo with a camera name and a time on it, and an "Example photo" label. */
.view {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-view);
  background: #05070a;
  isolation: isolate;
  aspect-ratio: 3 / 2;
}
.view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 6, 9, .66) 0, rgba(4, 6, 9, 0) 30%, rgba(4, 6, 9, 0) 64%, rgba(4, 6, 9, .7) 100%);
}
/* A daylight photo: pulled down so it sits on the dark page and the labels stay readable. */
.view--day img { filter: brightness(.84) saturate(.88) contrast(1.04); }
.view--day::after {
  background: linear-gradient(to bottom, rgba(4, 6, 9, .78) 0, rgba(4, 6, 9, .1) 36%, rgba(4, 6, 9, 0) 60%, rgba(4, 6, 9, .74) 100%);
}
/* A very bright photo (white walls, snow). */
.view--bright img { filter: brightness(.62) saturate(.8) contrast(1.08); }
.view--bright::after {
  background: linear-gradient(to bottom, rgba(4, 6, 9, .8) 0, rgba(4, 6, 9, .12) 38%, rgba(4, 6, 9, .05) 60%, rgba(4, 6, 9, .78) 100%);
}
/* A camera that has gone offline. */
.view--offline img { filter: grayscale(1) brightness(.42) contrast(.9); }
.view--wide { aspect-ratio: 16 / 10; }
.view--tall { aspect-ratio: 4 / 5; }
.view--square { aspect-ratio: 1; }

/* The camera's name and the time, set in mono on the picture. */
.osd {
  position: absolute;
  z-index: 2;
  inset: 13px 15px auto 15px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.osd time { white-space: nowrap; }

/* "Example photo": on every photo. */
.eg {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 12px;
  left: 15px;
  text-align: right;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Message card: what a phone shows. Flat on a band; --glass over a photo; --quiet for the one that follows. */
.notif {
  padding: 15px 17px 16px;
  border-radius: var(--r-card);
  background: var(--bg-3);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text);
  text-align: left;
}
.notif--glass {
  background: rgba(24, 30, 39, .74);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.notif--quiet {
  background: transparent;
  border-color: var(--line);
}
.notif + .notif { margin-top: 10px; }
.notif-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-2);
}
.notif-top b { color: var(--text); }
.notif-place::before { content: "\00B7\00a0"; }
.notif--quiet .notif-place::before { content: none; }
.notif-top time {
  margin-left: auto;
  font: 400 12.5px/1 var(--mono);
  letter-spacing: .02em;
  color: var(--text-2);
  white-space: nowrap;
}
.notif-title {
  margin-top: 11px;
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--text);
}
.notif-title--dot { display: flex; align-items: baseline; gap: 9px; }
.notif-title--dot .dot { transform: translateY(-1px); }
.notif-body {
  margin-top: 3px;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--text);
}
.notif-cov {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  font-size: 14.5px;
  color: var(--text-2);
}
.notif--quiet .notif-title { margin-top: 9px; font-size: 15.5px; }
.notif--quiet .notif-body { margin-top: 9px; font-size: 15.5px; color: var(--text-2); }
.notif--quiet .notif-title + .notif-body { margin-top: 2px; }
.notif-actions { display: flex; gap: 8px; margin-top: 13px; }
/* A button as the phone draws it. A picture of a button: it does nothing here. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.ui-btn--primary { background: var(--text); border-color: var(--text); color: #0a0d12; }

/* "You say": the sentence in a bubble, above the message it leads to. */
.said-card {
  margin: 0 0 10px;
  padding: 14px 17px 16px;
  border-radius: var(--r-card);
  background: rgba(9, 12, 17, .6);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.said-by {
  display: block;
  margin-bottom: 7px;
  font: 600 14px/1.2 var(--sans);
  letter-spacing: 0;
  color: var(--text-2);
}

/* ---------- 7. Heroes ---------- */

/* Photo hero: the photo fills the right side and fades into the page; the copy sits at the bottom left. */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 65%;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 42%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36%);
  mask-image: linear-gradient(to right, transparent 0, #000 36%);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 11, 16, .72) 0, rgba(8, 11, 16, 0) 22%),
    linear-gradient(to top, var(--bg) 0, rgba(8, 11, 16, 0) 30%);
}
/* A daylight photo in the hero: pulled down, with a deeper shade under the menu. */
.hero-photo--day img { filter: brightness(.7) saturate(.85); }
.hero-photo--day::after {
  background:
    linear-gradient(to bottom, rgba(8, 11, 16, .88) 0, rgba(8, 11, 16, 0) 28%),
    linear-gradient(to top, var(--bg) 0, rgba(8, 11, 16, 0) 30%);
}
.hero-osd {
  inset: 98px auto auto 25%;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
}
.hero-photo .eg { right: var(--gut); bottom: 22px; left: auto; }

.hero-in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 112px;
  padding-bottom: 46px;
}
.hero-copy { max-width: 660px; }
.hero-copy .lead { margin-top: 24px; max-width: 26em; color: #c5ccd7; }
.hero--page h1 { font-size: clamp(42px, 5.6vw, 74px); line-height: .95; }
.for {
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-2);
}
/* The line that says where things stand: "Peekaboo isn't open yet, and nothing can be bought." */
.status {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--text-2);
}
.hero-note {
  flex: none;
  width: 376px;
  margin-bottom: 4px;
}
.hero-note figcaption {
  margin: 12px 6px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Page hero: a page without a full photo behind its headline. Text left, an optional camera view and card right. */
.page-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5.4vw, 72px); }
.page-hero h1 { font-size: clamp(42px, 5.6vw, 74px); line-height: .95; max-width: 13em; }
.page-hero .lead { margin-top: 22px; }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.page-hero-side { position: relative; }
/* The card covers the bottom of the picture, so its "Example photo" label sits under the camera's name. */
.page-hero-side .view .eg { top: 38px; bottom: auto; text-align: left; }
.page-hero-side .view { aspect-ratio: 4 / 3.3; }
/* A message card laid over the bottom of the camera view beside the headline. */
.page-hero-side .notif { position: relative; margin: -92px 14px 0; z-index: 3; }
.page-hero-side .caption { margin-left: 14px; }

/* ---------- 8. Sections of the home page ---------- */

.band { padding: var(--band) 0; }
.band--alt { background: var(--bg-2); }
.band--tight { padding: clamp(44px, 4.6vw, 60px) 0; }
.sec-head { margin-bottom: clamp(32px, 3.8vw, 48px); }
.sec-head .lead { margin-top: 20px; }
.sec-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 48px;
  flex-wrap: wrap;
}
.sec-head--row .lead { margin-top: 0; max-width: 24em; }

/* Camera wall: four views in a row, one plain line under each. */
.wall { padding: 22px 0 clamp(52px, 4.6vw, 58px); }
.wall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.wall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.wall-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wall-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wall-cam .view { aspect-ratio: 4 / 3; }
.wall-cam .said { margin-top: 16px; font-size: clamp(19px, 1.7vw, 22px); }
.wall-cam .rkind { margin-top: 10px; }
.cam-line {
  display: flex;
  gap: 11px;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--text-2);
  padding-right: 8px;
}
.cam-line b { color: var(--text); }
.cam-line .dot { margin-top: 6px; }
.wall-foot { margin-top: 26px; }

/* Say it in a sentence: three sentences on the left, one open at a time; its photo, read back and messages on the right. */
.say-h { font: inherit; letter-spacing: 0; font-variation-settings: normal; }
.say-btn {
  display: block;
  width: 100%;
  padding: 24px 0 26px 22px;
  border: 0;
  border-left: 2px solid rgba(226, 233, 243, .16);
  background: none;
  color: var(--text-3);
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.say-btn:hover { color: var(--text-2); }
.say-btn[aria-expanded="true"] { color: var(--text); border-left-color: var(--text); }
.say-kind {
  display: block;
  font: 600 14.5px/1.2 var(--sans);
  color: var(--text-3);
}
.say-btn[aria-expanded="true"] .say-kind { color: var(--text-2); }
.say-text {
  display: block;
  margin-top: 9px;
  font: 540 clamp(22px, 2.15vw, 28px)/1.16 var(--display);
  font-variation-settings: "wdth" 90;
  letter-spacing: -.018em;
  text-wrap: balance;
}
html:not(.js) .say-btn { color: var(--text); border-left-color: var(--text); cursor: default; }
html:not(.js) .say-panel { max-width: 820px; }
.say-panel { padding: 8px 0 44px; }
.say-panel[hidden] { display: none; }
.say-out {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px;
  margin-top: 28px;
}
/* What Peekaboo reads back, in its own words. */
.back {
  font-size: 18.5px;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}
.say-try {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 0 0 24px;
}
@media (min-width: 940px) {
  .js .say-panel .view--wide { aspect-ratio: 2 / 1; }
  .js .say-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 76px;
    align-items: start;
  }
  .js .say-h { grid-column: 1; }
  .js .say-h:nth-of-type(1) { grid-row: 1; }
  .js .say-h:nth-of-type(2) { grid-row: 2; }
  .js .say-h:nth-of-type(3) { grid-row: 3; }
  .js .say-try { grid-column: 1; grid-row: 4; }
  .js .say-panel { grid-column: 2; grid-row: 1 / span 5; padding: 0; }
}
.js .say-panel:not([hidden]) { animation: rise .32s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* The light band. One per page at most: it is the contrast, not the default. */
.paper {
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.paper :focus-visible { outline-color: var(--ink); }
.paper a { text-decoration-color: rgba(18, 22, 29, .4); }
.paper .lead, .paper .prose { color: var(--ink-2); }
.paper .prose b, .paper .prose h3 { color: var(--ink); }
.paper .small, .paper .label, .paper .kicker, .paper .caption, .paper .crumb { color: var(--ink-3); }
.paper .small a { color: var(--ink-2); }
.paper .go { color: var(--ink); text-decoration-color: rgba(18, 22, 29, .4); }
.paper .said { color: var(--ink); }
.paper .btn { background: var(--ink); color: var(--paper-card); }
.paper .btn:hover { background: #000; }
.paper th { color: var(--ink); }
.paper td { color: var(--ink-2); }
.paper th, .paper td { border-bottom-color: var(--paper-line); }
.paper thead th { color: var(--ink-3); border-bottom-color: rgba(18, 22, 29, .3); }
.paper .dot--unsure { border-color: var(--ink-3); }
.paper .dot--notseen { box-shadow: inset 0 0 0 2px #a86400; }
.paper .dot--look { background: #c98416; }
.paper .dot--seen { background: #2f8f5d; }
.paper .notice { background: var(--paper-card); border-color: var(--paper-line); color: var(--ink-2); }
.paper .notice b { color: var(--ink); }

.parent-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
}
.parent-visual { position: relative; padding-bottom: 52px; }
.view--paper { width: 68%; aspect-ratio: 3 / 4.05; border-radius: 14px; }
.view--paper img { object-position: 0% 50%; }
.view--paper::after {
  background: linear-gradient(to bottom, rgba(4, 6, 9, 0) 70%, rgba(4, 6, 9, .55) 100%);
}
.view--paper .eg { text-align: left; }

/* The page a parent reads first, as a card. */
.page-card {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(316px, 57%);
  padding: 20px 22px 18px;
  border-radius: 18px;
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(52, 38, 14, .28), 0 2px 6px rgba(52, 38, 14, .1);
}
.page-card--wide { position: static; width: auto; max-width: 520px; }
.page-title {
  font: 620 20px/1.15 var(--display);
  font-variation-settings: "wdth" 92;
  letter-spacing: -.015em;
}
.page-meta {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.page-card dl { margin-top: 12px; }
.page-card dl div {
  padding: 11px 0;
  border-top: 1px solid var(--paper-line);
}
.page-card dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.page-card dd {
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.42;
}
.page-card figcaption {
  padding-top: 11px;
  border-top: 1px solid var(--paper-line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

.parent-copy .lead { margin-top: 22px; }

/* Points: a short list of headed statements with a rule over each. */
.points { margin-top: 34px; }
.points > li {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.points > li:last-child { padding-bottom: 0; }
.points p {
  margin-top: 8px;
  color: var(--text-2);
  max-width: 33em;
  text-wrap: pretty;
}
.paper .points > li { border-top-color: var(--paper-line); }
.paper .points p { color: var(--ink-2); }
.points--cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
.points--cols > li:last-child { padding-bottom: 20px; }

/* The three honest answers: a photo with the state's name on it, what it means, and a quoted line. */
.states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.states--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.state-card .view { aspect-ratio: 3 / 2; }
.state-card .view::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--amber);
}
.state-card--unsure .view::before { background: var(--text-3); }
.state-card--seen .view::before { background: var(--green); }
.state-name {
  position: absolute;
  z-index: 2;
  left: 17px;
  bottom: 19px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(25px, 2.5vw, 32px);
  line-height: 1;
  letter-spacing: -.022em;
  font-weight: 620;
  font-variation-settings: "wdth" 88;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.state-card .eg { left: auto; bottom: 20px; }
.state-what {
  margin-top: 18px;
  font-size: 16px;
  color: var(--text-2);
  text-wrap: pretty;
}
.state-card .quote { margin-top: 12px; }
.state-card .small { margin-top: 10px; }

/* Who it's for: photo tiles with the words on the photo. */
.who-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 20px;
  height: 580px;
}
.who-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #05070a;
  isolation: isolate;
}
.who-tile--lead { grid-row: 1 / span 2; }
.who-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.who-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 7, 10, .96) 0, rgba(5, 7, 10, .88) 46%, rgba(5, 7, 10, .55) 70%, rgba(5, 7, 10, .12) 100%);
}
.who-text {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 24px;
}
.who-text h3 { font-size: 27px; }
.who-tile--lead .who-text { left: 36px; right: 36px; top: 34px; bottom: auto; }
.who-tile--lead::after {
  background: linear-gradient(to bottom, rgba(5, 7, 10, .94) 0, rgba(5, 7, 10, .82) 34%, rgba(5, 7, 10, 0) 56%, rgba(5, 7, 10, 0) 84%, rgba(5, 7, 10, .45) 100%);
}
.who-tile--lead img { object-position: 50% 100%; }
.who-tile--lead .who-text h3 {
  font-size: clamp(32px, 3.4vw, 44px);
  letter-spacing: -.025em;
  font-variation-settings: "wdth" 88;
}
.who-text p {
  margin-top: 8px;
  max-width: 27em;
  color: #d3d9e2;
  text-wrap: pretty;
}
.who-text .said {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
}
.who-text .go { margin-top: 14px; font-size: 16px; }
.who-tile .eg { top: 14px; bottom: auto; }
/* Side by side, the two short tiles are nearly filled by their words: the photo stays as a strip of light along the
   top, and the words sit on a scrim dark enough for a busy picture (brick, a lit window). */
@media (min-width: 940px) {
  .who-tile:not(.who-tile--lead)::after {
    background: linear-gradient(to top, rgba(5, 7, 10, .97) 0, rgba(5, 7, 10, .93) 60%, rgba(5, 7, 10, .8) 78%, rgba(5, 7, 10, .3) 100%);
  }
}

/* What it never does: four short sentences set very large. */
.never .h-quiet { color: var(--text-2); }
.nevers {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .3em;
  margin-top: 18px;
  font: 640 clamp(40px, 6.3vw, 82px)/.98 var(--display);
  font-variation-settings: "wdth" 84;
  letter-spacing: -.035em;
}
.never-note {
  margin-top: 26px;
  max-width: 44em;
  color: var(--text-2);
  text-wrap: pretty;
}
.never-note + .go { margin-top: 18px; }

/* Planned prices: a name, a very large price, one or two lines. */
.price-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: clamp(32px, 3.8vw, 48px);
}
.price {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.price dt {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.price-amt {
  margin-top: 16px;
  font: 620 clamp(52px, 6.4vw, 86px)/.95 var(--display);
  font-variation-settings: "wdth" 84;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.price-amt small {
  font: 500 17px/1 var(--sans);
  letter-spacing: 0;
  color: var(--text-2);
}
.price-note {
  margin-top: 16px;
  max-width: 19em;
  color: var(--text-2);
  font-size: 16.5px;
  text-wrap: pretty;
}
.price-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 32px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--text-2);
}
.price-foot .go { font-size: 16px; }

/* ---------- 9. Parts for inner pages ---------- */

/* Two columns: words and a visual. --even for two equal halves, --rev to put the visual first on wide screens. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5.6vw, 84px);
  align-items: start;
}
.cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cols--center { align-items: center; }
.cols > * > h2 + .lead, .cols > * > h2 + .prose { margin-top: 22px; }
.cols > * > .lead + .prose, .cols > * > .prose + .go, .cols > * > .lead + .go { margin-top: 20px; }

/* A numbered step: the number sits small above its headline. */
.h-num {
  display: block;
  margin-bottom: 14px;
  font: 500 13px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--text-3);
}
.h-num::before { content: "STEP "; }
.step + .step { border-top: 1px solid var(--line); }
.step-more { margin-top: clamp(28px, 3.4vw, 44px); }

/* A panel: a quiet box for a worked example. */
.panel {
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-2);
}
.band--alt .panel { background: var(--bg-3); }
.panel > .label:first-child { margin-bottom: 8px; }
.panel .back { margin-top: 0; }
.panel .said + .label { margin-top: 20px; }
.panel .small { margin-top: 14px; }
.panel-title {
  font: 600 20px/1.2 var(--display);
  font-variation-settings: "wdth" 92;
  letter-spacing: -.012em;
}
.panel-meta { margin-top: 4px; font-size: 14.5px; color: var(--text-3); }

/* Folds: the detail behind a step, closed until asked for. */
.fine {
  border-top: 1px solid var(--line);
}
.fine:last-of-type { border-bottom: 1px solid var(--line); }
.fine > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  list-style: none;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}
.fine > summary::-webkit-details-marker { display: none; }
.fine > summary::after {
  content: "+";
  flex: none;
  font: 400 24px/1 var(--mono);
  color: var(--text-3);
}
.fine[open] > summary::after { content: "\2212"; }
.fine > summary:hover::after { color: var(--text); }
.fine > :not(summary) { max-width: 46em; color: var(--text-2); }
.fine > :not(summary) + :not(summary) { margin-top: .9em; }
.fine > :last-child:not(summary) { margin-bottom: 26px; }
.fine b { color: var(--text); }
.fines { max-width: 860px; }

/* Questions and answers. */
.qa > details {
  border-top: 1px solid var(--line);
}
.qa > details:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  list-style: none;
  font: 580 20px/1.2 var(--display);
  font-variation-settings: "wdth" 92;
  letter-spacing: -.012em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  flex: none;
  font: 400 24px/1 var(--mono);
  color: var(--text-3);
}
.qa details[open] > summary::after { content: "\2212"; }
.qa details > div { padding-bottom: 24px; max-width: 44em; color: var(--text-2); }
.qa details > div > * + * { margin-top: .9em; }
.qa b { color: var(--text); }
.paper .qa > details, .paper .fine { border-color: var(--paper-line); }
.paper .qa summary::after, .paper .fine > summary::after { color: var(--ink-3); }
.paper .qa details > div, .paper .fine > :not(summary) { color: var(--ink-2); }
.paper .qa b, .paper .fine b, .paper .fine > summary { color: var(--ink); }

/* Routine rows: a sentence, what kind it is and which camera, and what it would send. */
.rlist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3.4vw, 48px);
}
.rlist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rlist--1 { grid-template-columns: minmax(0, 1fr); }
.rrow, .rlist > li {
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
}
.rrow .said, .rlist > li > .said { font-size: clamp(20px, 1.9vw, 24px); }
.rkind {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}
.rkind b {
  display: block;
  margin-bottom: 2px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rhear {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text);
}
.rhear-label {
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-3);
}

/* A list of what each kind would send, or any list of labelled lines. */
.lines > li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.lines > li b {
  display: block;
  margin-bottom: 3px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Chain: what happened, in order, with a time on each line. */
.chain > li {
  display: grid;
  grid-template-columns: 16px 82px minmax(0, 1fr);
  gap: 0 12px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}
.chain > li:first-child { border-top: 0; padding-top: 4px; }
.chain .dot { transform: translateY(-1px); }
.chain time {
  font: 400 13px/1.3 var(--mono);
  letter-spacing: .02em;
  color: var(--text-2);
  white-space: nowrap;
}
.chain b { color: var(--text); }

/* A week as a list: one line a day. */
.week > li {
  display: grid;
  grid-template-columns: 44px 16px minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--text-2);
}
.week > li:first-child { border-top: 0; }
.week-day {
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.week b { color: var(--text); font-weight: 600; }
.practice-state { font-weight: 600; }
.practice-sum {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  color: var(--text-2);
}
.practice-sum b { color: var(--text); }

/* Plans. .plans--lead: the main plans as columns with a photo, a very large price and a short list.
   .plans--more: the rest as rows. */
.plans--lead {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan-view { aspect-ratio: 16 / 10; margin-bottom: 20px; }
.plan-kicker {
  position: absolute;
  z-index: 2;
  left: 15px;
  bottom: 12px;
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.plan-view .eg { left: auto; }
.plan-name {
  font: 600 18px/1.2 var(--sans);
  letter-spacing: 0;
  font-variation-settings: normal;
  color: var(--text);
}
.plan-name a { text-decoration: none; }
.plan-name a:hover { text-decoration: underline; }
.plan-price {
  margin-top: 14px;
  font: 620 clamp(46px, 5vw, 68px)/.95 var(--display);
  font-variation-settings: "wdth" 84;
  letter-spacing: -.035em;
  color: var(--text);
}
.plan-price small {
  display: block;
  margin-top: 10px;
  font: 500 15px/1.35 var(--sans);
  letter-spacing: 0;
  color: var(--text-2);
}
.plan-for { margin-top: 14px; color: var(--text); font-weight: 500; }
.plan-adds { margin-top: 16px; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
.plan-adds .base { margin-bottom: 4px; font-weight: 600; color: var(--text-3); font-size: 14.5px; }
.plan-adds ul > li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.plan-adds .fine { margin-top: 0; }
.plan-adds .fine > summary { min-height: 48px; font-size: 15.5px; }
.plan-adds .fine ul { margin-top: -4px; }
.plan-adds .fine > :last-child:not(summary) { margin-bottom: 14px; }
.plan-adds > .small { margin-top: 14px; }
.plan-eg { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--text-3); }
.plan-cta { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 16px; }
.plans--lead .plan-adds { margin-bottom: 4px; }

.plans--more > .plan {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: 8px 32px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.plans--more > .plan:last-child { border-bottom: 1px solid var(--line); }
.plans--more .plan-head { display: contents; }
.plans--more .plan-name, .plans--more h2 {
  font: 600 clamp(26px, 2.6vw, 34px)/1.05 var(--display);
  font-variation-settings: "wdth" 88;
  letter-spacing: -.022em;
}
.plans--more .plan-price { margin-top: 0; font-size: clamp(30px, 3vw, 40px); }
.plans--more .plan-price small { margin-top: 6px; }
.plans--more .plan-adds { margin-top: 0; font-size: 16px; }
.plans--more .plan-adds ul > li { padding: 0 0 12px; border-top: 0; }
.plans--more .plan-adds .fine ul > li { padding: 0 0 10px; }
.plans--more .plan-adds .fine > :not(summary) { margin-top: 10px; }

/* One plan in a box, on an audience page. */
.planbox {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 24px clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--bg-2);
}
.band--alt .planbox { background: var(--bg-3); }
.planbox .plan-name { font-size: 18px; }
.planbox .plan-price { font-size: clamp(52px, 6vw, 80px); }
.planbox .plan-adds { margin-top: 0; }
.planbox .actions { margin-top: 0; flex-direction: column; align-items: flex-start; }

/* A comparison table. Wrap it in .table-wrap so a wide one scrolls inside itself, never the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 0; }
.table th[scope="col"], .versus th[scope="col"] { white-space: nowrap; }
.table td, .table th, .versus td, .versus th { padding-right: 24px; }
.versus { margin-top: 6px; font-size: 15.5px; }
.table--compare th[scope="row"] { width: 28%; }
.table--compare td { min-width: 150px; }
.table .yes, .table .no { display: inline-flex; align-items: baseline; gap: 8px; }

/* A price list with dotted leaders. */
.receipt > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
}
.receipt .lead-dots { flex: 1; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-4px); }

/* Long prose and legal pages: a short title column and the text beside it. */
.defs { border-bottom: 1px solid var(--line); }
.def {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px clamp(32px, 5vw, 76px);
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--line);
}
.def-term {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 600;
  font-variation-settings: "wdth" 88;
}
.def-body { color: var(--text-2); max-width: 44em; text-wrap: pretty; }
.def-body > * + * { margin-top: 1em; }
.def-body b { color: var(--text); }
.def-body ul:not([class]) { padding-left: 1.15em; list-style: disc; }
.def-body ol:not([class]) { padding-left: 1.3em; list-style: decimal; }
.def-body li + li { margin-top: .45em; }
.def-body h3 { color: var(--text); font-size: 20px; margin-top: 1.5em; }
/* The list of sections at the top of a long page. */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 28px;
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.toc a:hover { border-color: var(--text); }

/* A step-by-step guide: numbered steps with a mono number, text, and code or a photo. */
.guide { counter-reset: guide; }
.guide > li {
  counter-increment: guide;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 20px;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--line);
}
.guide > li::before {
  content: counter(guide, decimal-leading-zero);
  font: 500 15px/1.9 var(--mono);
  letter-spacing: .06em;
  color: var(--text-3);
}
.guide > li > * { grid-column: 2; }
.guide > li > * + * { margin-top: 14px; }
.guide > li > h3 + p, .guide > li > h2 + p { margin-top: 10px; }
.guide p, .guide li li { color: var(--text-2); max-width: 44em; }
.guide b { color: var(--text); }
.guide ul:not([class]) { padding-left: 1.15em; list-style: disc; }
.guide pre { max-width: 100%; }

/* Photo credits. */
.credits-list > li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0 24px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.credits-list .view { aspect-ratio: 3 / 2; border-radius: 8px; }
.credits-list .view::after { content: none; }
.credits-list p { color: var(--text-2); }
.credits-list b { color: var(--text); }

/* Spacing helpers the old pages use; fine for one-off gaps in new pages too. */
.mt-16 { margin-top: 16px; }
.mt-28 { margin-top: 28px; }
.mt-48 { margin-top: 48px; }

/* Gaps between the direct children of a band's wrap. The audience and reference pages lean on these. */
.page-hero .small, .band .wrap > .small { margin-top: 14px; }
.band .wrap > h2 + p, .band .wrap > h2 + .prose { margin-top: 18px; }
.band .wrap > .prose, .band .wrap > p:not([class]) { color: var(--text-2); max-width: 44em; }
.band .wrap > * + .rlist, .band .wrap > * + .defs, .band .wrap > * + .table, .band .wrap > * + .notice, .band .wrap > * + .planbox, .band .wrap > * + .fine { margin-top: 28px; }
.band .wrap > .fine + .fine { margin-top: 0; }

/* ---------- 10. Early list ---------- */

.early {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.early-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 72%;
  z-index: -1;
}
.early-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 62%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%);
  mask-image: linear-gradient(to right, transparent 0, #000 34%);
}
.early-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0, rgba(8, 11, 16, 0) 24%, rgba(8, 11, 16, 0) 72%, var(--bg) 100%);
}
.early-photo .eg { right: var(--gut); bottom: 30px; }
.early-in { padding-block: 70px; }
.early-in .lead { margin-top: 22px; max-width: 25em; color: #d0d6df; }
.early-in .lead a { color: var(--text); }
.early-in > .small { margin-top: 10px; max-width: 36em; color: #b9c1cd; }
.early-in > .small a { color: var(--text); }

.wl-form { margin-top: 34px; max-width: 540px; }
.wl-form label, .wl-form legend {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.wl-row { display: flex; gap: 10px; }
.input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid rgba(242, 245, 249, .45);
  border-radius: 999px;
  background: rgba(8, 11, 16, .72);
  color: var(--text);
  font: 400 17px/1 var(--sans);
}
.input::placeholder { color: #98a2b0; opacity: 1; }
.input:focus-visible { outline-offset: 2px; border-radius: 999px; }
.wl-more { margin-top: 14px; }
.wl-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(242, 245, 249, .45);
  text-underline-offset: 4px;
  list-style: none;
}
.wl-more > summary::-webkit-details-marker { display: none; }
.wl-more > summary::after { content: "+"; margin-left: 8px; font: 400 18px/1 var(--mono); color: var(--text-2); }
.wl-more[open] > summary::after { content: "\2212"; }
.wl-form fieldset { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.wl-more[open] { padding-bottom: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
/* A checkbox drawn as a chip. */
.check { position: relative; display: inline-flex; margin: 0 !important; }
.check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(242, 245, 249, .4);
  border-radius: 999px;
  background: rgba(8, 11, 16, .6);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.check input:checked + span { background: var(--text); border-color: var(--text); color: #0a0d12; }
.check input:checked + span::before { content: "\2713\00a0"; }
.check input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
/* The honeypot: a field people never see and never tab to. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-submit { margin-top: 18px; }
.form-status {
  min-height: 24px;
  margin-top: 12px;
  font-size: 15px;
  color: var(--text);
}
.form-status:empty { min-height: 0; margin-top: 0; }
.form-status.is-error { padding: 12px 16px; border: 1px solid var(--amber); border-radius: 12px; background: rgba(8, 11, 16, .8); }
.nojs-note { margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.wl-ready .nojs-note { display: none; }
.wl-done {
  margin-top: 34px;
  max-width: 540px;
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: rgba(14, 19, 26, .86);
}
.wl-done p:first-child {
  font: 600 22px/1.2 var(--display);
  font-variation-settings: "wdth" 92;
}
.wl-done p + p { margin-top: 8px; color: var(--text-2); }

/* ---------- 11. Footer ---------- */

.site-footer { padding: 44px 0 48px; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(40px, 7vw, 104px);
}
.footer-brand p {
  margin-top: 14px;
  max-width: 22em;
  color: var(--text-2);
  font-size: 15.5px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}
.footer-col h2 {
  margin-bottom: 10px;
  font: 600 14.5px/1.3 var(--sans);
  letter-spacing: 0;
  font-variation-settings: normal;
  color: var(--text-3);
}
.footer-col li + li { margin-top: 2px; }
.footer-col a {
  display: inline-block;
  padding: 4px 0;
  font-size: 15.5px;
  color: var(--text);
  text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-legal {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 8px clamp(40px, 7vw, 104px);
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.footer-legal a { color: var(--text-2); }
.footer-legal > div > p + p { margin-top: 6px; }

/* A notice the script adds at the top of a page (after an account is deleted). */
main > .notice { margin: 16px auto; max-width: 720px; }

/* The app pages that wear the site's header and footer (/try and /tools/routine). */
.app-main { min-height: 50vh; }

/* More parts for inner pages: small pieces the four rebuilt pages needed. */
/* The notice after an account is deleted lands on the home page, whose header lies over the photo. */
.site-header--over + main > .notice { position: relative; z-index: 5; margin-top: calc(var(--head) + 8px); margin-bottom: -8px; }
.parent-copy > .go { margin-top: 28px; }
.states-foot { margin-top: clamp(28px, 3.4vw, 40px); max-width: 52em; }
@media (max-width: 939px) { .parent-copy > .go { order: 5; } }

/* A light band's panel, and parts used inside folds on the how it works page. */
.paper .panel { background: var(--paper-card); border-color: var(--paper-line); box-shadow: 0 30px 70px rgba(52, 38, 14, .16), 0 2px 6px rgba(52, 38, 14, .06); }
.paper .back { color: var(--ink); }
.paper .h-num { color: var(--ink-3); }
.fold-view { max-width: 420px; }
.lookcheck {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px;
  align-items: start;
}
.lookcheck .view { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .lookcheck { grid-template-columns: minmax(0, 1fr); } }
.plans-join { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(36px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--line); }
.plans-join .small { color: var(--text-2); }
.qa .versus { display: block; overflow-x: auto; }
.paper .receipt { color: var(--ink); }
.plan-view .eg { top: 10px; bottom: auto; }
/* Three statements side by side, each led by a status mark (the family page's three mornings). */
.mornings h3 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; }
.mornings h3 .dot { flex: none; transform: translateY(1px); }
.mornings .quote { margin-top: 12px; color: var(--text); }
.counts { margin-top: clamp(36px, 4.4vw, 56px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.counts .wall-grid { margin-top: 0; }
.counts .prose h3 { margin-top: 0; }
.hero-note .notif + .notif { margin-top: 10px; }
.hero--page .crumb { margin-bottom: 16px; }
.cols > * > .points { margin-top: 28px; }
.cols > * > .h-mid + .prose, .cols > * > .h-mid + .lead { margin-top: 18px; }
.cols > * > .h-mid + .go, .cols > * > .prose + .go { margin-top: 20px; }
.panel .chain { margin-top: 14px; }

/* ---------- 13. Small screens ---------- */

/* Four plan columns need about 280px each. Under 1240px the plans go two by two. */
@media (max-width: 1239px) {
  .plans--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
}

@media (max-width: 1100px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .wall-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-note { width: 340px; }
  .planbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planbox .actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

@media (max-width: 939px) {
  :root { --gut: 28px; --head: 72px; }

  .header-inner { gap: 10px; }
  .header-cta { margin-left: auto; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(242, 245, 249, .38);
    border-radius: 999px;
    background: rgba(8, 11, 16, .35);
    font-size: 0;
    cursor: pointer;
  }
  .nav-toggle-bars { display: grid; gap: 4px; }
  .nav-toggle-bars i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); }
  .site-nav {
    display: none;
    position: absolute;
    top: calc(var(--head) - 6px);
    right: var(--gut);
    left: var(--gut);
    margin: 0;
    padding: 8px 20px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: var(--bg-3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { display: block; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: flex; align-items: center; min-height: 52px; font-size: 17px; opacity: 1; }
  /* Without the script the menu can't open, so its links show under the bar. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-block: 14px; }
  html:not(.js) .site-nav { display: block; position: static; order: 4; width: 100%; padding: 0 16px; box-shadow: none; }
  html:not(.js) .site-header--over { position: relative; }

  .hero { display: block; min-height: 0; }
  .hero-photo { inset: 0 0 auto 0; width: 100%; height: 420px; }
  .hero-photo img {
    object-position: 34% 46%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-photo::after {
    background:
      linear-gradient(to bottom, rgba(8, 11, 16, .78) 0, rgba(8, 11, 16, 0) 30%),
      linear-gradient(to top, var(--bg) 0, rgba(8, 11, 16, .5) 30%, rgba(8, 11, 16, 0) 60%);
  }
  .hero-osd { inset: 86px auto auto var(--gut); }
  .hero-photo .eg { right: var(--gut); bottom: auto; top: 88px; }
  .hero-in {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 30px;
    padding-top: 262px;
    padding-bottom: 20px;
  }
  .hero-note { width: auto; max-width: 440px; margin: 0; }
  .hero-copy { max-width: none; }
  /* An audience page's note can be two or three cards tall, which would push its headline off a phone's first
     screen. There the headline comes first and the note follows it. The home page keeps its one card on top. */
  .hero--page .hero-in { flex-direction: column; padding-top: 236px; }

  .page-hero-grid, .cols, .cols--even, .cols--wide, .say-out, .parent-grid, .footer-grid, .def { grid-template-columns: minmax(0, 1fr); }
  .page-hero-side { max-width: 560px; }
  .states, .states--2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .state-card { max-width: 560px; }
  .nevers { display: block; }
  .price-foot { margin-top: 36px; }
  .price-list { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .points--cols { grid-template-columns: minmax(0, 1fr); }
  .rlist, .rlist--2 { grid-template-columns: minmax(0, 1fr); }
  .wall-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wall-grid--3 .wall-cam { max-width: 560px; }
  .plans--more > .plan { grid-template-columns: minmax(0, 1fr) auto; }
  .plans--more .plan-adds { grid-column: 1 / -1; }
  .early-photo { width: 100%; }
  .early-photo img { object-position: 30% 62%; -webkit-mask-image: none; mask-image: none; }
  .early-photo::after {
    background:
      linear-gradient(to right, rgba(8, 11, 16, .9) 0, rgba(8, 11, 16, .72) 100%),
      linear-gradient(to bottom, var(--bg) 0, rgba(8, 11, 16, 0) 24%, rgba(8, 11, 16, 0) 72%, var(--bg) 100%);
  }
  .footer-legal { grid-template-columns: minmax(0, 1fr); }
  .parent-grid { gap: 0; }
  .parent-copy { display: contents; }
  .parent-copy h2 { order: 1; }
  .parent-copy .lead { order: 2; }
  .parent-visual { order: 3; max-width: 560px; margin-top: 40px; }
  .points { order: 4; }
  .who-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .who-tile, .who-tile--lead { grid-row: auto; min-height: 400px; }
  .who-tile--lead { min-height: 480px; }
  .say-btn { padding-block: 20px 22px; }
  .say-panel { padding: 4px 0 36px; }
  .say-try { padding-left: 0; }
  /* A table too wide for the screen scrolls inside its wrapper. One with data-label cells stacks instead. */
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; }
  .table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .table--stack th, .table--stack td { padding: 3px 0; border: 0; }
  .table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); font-weight: 600; }
}

@media (max-width: 560px) {
  :root { --gut: 20px; }
  body { font-size: 16.5px; }

  .brand { font-size: 21px; min-height: 44px; }
  .btn--small { min-height: 44px; padding: 0 16px; font-size: 14.5px; }

  .hero-photo { height: 310px; }
  .hero-photo img { object-position: 30% 40%; }
  .hero-in { padding-top: 206px; gap: 22px; padding-bottom: 14px; }
  .hero-photo .eg { top: 178px; }
  .hero .said-card { display: none; }
  .hero-note figcaption { margin-top: 9px; }
  h1 { letter-spacing: -.03em; }
  .hero-copy .lead { margin-top: 18px; }
  .for { font-size: 16px; }
  .actions { margin-top: 22px; gap: 10px 16px; }
  .hero .actions .btn, .page-hero .actions .btn { flex: 1 1 0; min-height: 52px; padding: 0 10px; font-size: 15.5px; white-space: nowrap; }
  .status { margin-top: 14px; }
  .notif { padding: 13px 15px 14px; border-radius: 18px; }
  .notif-title, .notif-body { font-size: 15.5px; }

  .wall { padding-top: 26px; }
  .wall-grid { gap: 24px 12px; }
  .cam-line { font-size: 14.5px; gap: 8px; padding-right: 0; }
  .osd { inset: 10px 11px auto 11px; font-size: 10.5px; letter-spacing: .05em; }
  .hero-osd { inset: 82px auto auto var(--gut); font-size: 11.5px; }
  .eg { right: 11px; left: 11px; bottom: 9px; font-size: 11.5px; }

  .say-text { font-size: 21px; }
  .say-btn { padding-left: 16px; }
  .say-out { gap: 26px; margin-top: 22px; }
  .back { font-size: 17.5px; }

  .parent-visual { padding-bottom: 0; }
  .view--paper { width: 100%; aspect-ratio: 4 / 4.1; }
  .view--paper .eg { bottom: 76px; }
  .view--paper::after { background: linear-gradient(to bottom, rgba(4, 6, 9, 0) 52%, rgba(4, 6, 9, .62) 100%); }
  .parent-visual { margin-top: 32px; }
  .parent-visual .page-card { position: relative; width: auto; margin: -64px 12px 0; }
  .points { margin-top: 32px; }

  /* On a phone the state's name needs the whole width, so "Example photo" moves up under the camera's name. */
  .state-card .eg { top: 42px; bottom: auto; }

  .who-text { left: 20px; right: 20px; bottom: 20px; }
  .who-tile--lead .who-text { left: 20px; right: 20px; top: 22px; }
  .who-tile { min-height: 400px; }
  .who-tile--lead { min-height: 520px; }
  /* The lead tile's words run longer on a phone, so its shade reaches further down the photo. */
  .who-tile--lead::after {
    background: linear-gradient(to bottom, rgba(5, 7, 10, .95) 0, rgba(5, 7, 10, .88) 50%, rgba(5, 7, 10, 0) 70%, rgba(5, 7, 10, 0) 86%, rgba(5, 7, 10, .45) 100%);
  }
  .counts .wall-grid { grid-template-columns: minmax(0, 1fr); }

  .page-hero-side .notif { margin: -70px 10px 0; }
  .page-hero-side .caption { margin-left: 10px; }
  .panel { padding: 18px 18px 20px; }
  .chain > li { grid-template-columns: 14px minmax(0, 1fr); }
  .chain > li > :last-child { grid-column: 2; margin-top: 2px; }
  .plans--lead { grid-template-columns: minmax(0, 1fr); }
  .planbox { grid-template-columns: minmax(0, 1fr); }
  .planbox .actions { grid-column: auto; }
  .guide > li { grid-template-columns: minmax(0, 1fr); }
  .guide > li::before { line-height: 1.2; margin-bottom: 8px; }
  .guide > li > * { grid-column: 1; }
  .credits-list > li { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .early { min-height: 0; }
  .early-in { padding-block: 72px; }
  .wl-row { flex-direction: column; }

  /* Finger-sized targets: 44px or more. */
  .go { padding-block: 10px; }
  /* A plan's name is a link: its touch area is 44px without moving anything. */
  .plan-name a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; }
  .footer-col li + li { margin-top: 0; }
  .footer-legal a { display: inline-block; padding-block: 12px; }
  .crumb a { display: inline-block; padding-block: 12px; }
}

/* Very narrow phones (320px): the header keeps the mark, the menu and nothing else. */
@media (max-width: 379px) {
  .header-cta { display: none; }
  .nav-toggle { margin-left: auto; }
  .hero .actions .btn, .page-hero .actions .btn { flex-basis: 100%; }
  .price-amt { font-size: 48px; }
  .who-text h3 { font-size: 24px; }
  /* A camera's name never breaks in two: where the name and the time don't fit side by side, the time goes under it. */
  .osd { flex-wrap: wrap; row-gap: 3px; }
  .osd > * { white-space: nowrap; }
  /* A message's top line: the place stays whole. If the line is too long, the time drops under it, at the right. */
  .notif-top { flex-wrap: wrap; gap: 4px 6px; }
  .notif-place { white-space: nowrap; }
}

/* ---------- 14. Reduced motion ---------- */

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

/* 13b. Reference, legal and guide pages */

/* A notice under a page's headline keeps to a reading width. A long one holds its paragraphs in one <div>. */
.page-hero .notice { max-width: 46em; }
.notice > div > p + p { margin-top: .7em; }

/* The contents list under a headline: finger-sized on a phone. */
@media (max-width: 560px) {
  .toc a { min-height: 44px; }
}

/* A long legal page: on a wide screen a section's title stays in view beside its text. */
@media (min-width: 940px) {
  .defs--read .def-term { position: sticky; top: 24px; align-self: start; }
}

/* A second message card under the first, beside a page's headline. */
.page-hero-side .notif + .notif { margin-top: 10px; }

/* Code inside a fold is as wide as its column and scrolls inside itself. A whole file gets a window of its own. */
.fine > pre { max-width: none; }
.fines--code { max-width: none; }
.pre-long { max-height: min(72vh, 640px); overflow: auto; }

/* Labelled lines that hold running text or a code block (the guide's options, the API's basics). */
.lines--text > li { color: var(--text-2); }
.lines > li > pre { margin-top: 14px; }

/* What follows a run of guide steps in the same band: more steps, options, a table. */
.guide-more { margin-top: clamp(40px, 5vw, 64px); }

/* In a table: an example value, and a second name under a row's first. */
.table .ex { font: 400 13.5px/1.5 var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.table .opt { display: block; margin-top: 4px; font-weight: 400; color: var(--text-3); }
@media (min-width: 940px) {
  .table th[scope="row"] code { white-space: nowrap; }
}

/* A one-line notice that is only as wide as its words. */
.notice--fit { display: inline-flex; }

/* 13a. Audience, compare and cameras pages */
/* A camera wall inside a column sits level with what is beside it. */
.cols .wall-grid { margin-top: 0; }
/* A status dot in front of a row's label on a light card (the morning brief on /for/away). */
.page-card dt .dot { margin-right: 7px; }
/* On a phone, two views in a column stack, so each camera's name and time fit on its picture. */
@media (max-width: 560px) {
  .cols .wall-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
/* A stacked table (under 940px) gives every cell the whole width. */
@media (max-width: 939px) {
  .table--stack th[scope="row"] { width: auto; }
  .table--stack td { min-width: 0; }
}