/* World Without Web website. Night watch colors from docs/BRAND.md. Dark only, no scripts.
   Redesigned November 12, 2026: one column width, one type scale, thin lines, and pictures of the real app in a
   plain frame. The home page runs hero, why, Wilson, the library, maps, radio, tools, a comparison, the price,
   the old-laptop pitch, questions and a closing photo. Amber is kept for buttons, links and the warning, and it
   only ever sits on dark. Photo credits are in /credits.html.
   The shop (shop/) copies this file at deploy and uses its colors, .wrap, .btn, .top and the base type, and the
   policy pages use the rules near the bottom, so keep those names. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  --ink: #0E1418;
  --ink-2: #131B20;
  --slate: #3A4750;
  --line: #26323A;
  --fog: #D7DEE2;
  --fog-dim: #A6AFB5;
  --amber: #FFB000;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --max: 1160px;
  --gutter: 24px;
  --r: 8px;
  color-scheme: dark;
}

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

html { background: var(--ink); scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fog);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  font-stretch: 100%;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--amber); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

p { margin: 0 0 1em; }

h1, h2, h3 { color: #fff; text-wrap: balance; }
h2 {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 2.4vw + 0.8rem, 2.6rem);
  font-stretch: 108%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--amber); color: var(--ink); padding: 8px 14px; font-weight: 600;
  z-index: 10;
}
.skip:focus { left: 8px; }

.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: var(--r);
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  text-decoration: none;
}
.btn:hover { background: #FFC640; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.top .logo img { height: 28px; width: auto; }
.top nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.top nav a { color: var(--fog); text-decoration: none; font-weight: 500; font-size: 0.94rem; white-space: nowrap; }
.top nav a:hover { color: #fff; text-decoration: underline; }
.top nav .cart a { color: var(--amber); font-weight: 700; }
.top nav ul { align-items: center; }
.top nav .order a { padding: 8px 18px; font-size: 0.94rem; font-weight: 700; color: var(--ink); }
.top nav .order a:hover { color: var(--ink); text-decoration: none; }


.lede { max-width: 620px; font-size: 1.2rem; line-height: 1.55; color: var(--fog); margin-bottom: 28px; }
.note { margin: 20px 0 0; font-size: 0.92rem; color: var(--fog-dim); }

/* Hero: the blackout skyline, with the words on its dark left side. The photo is drawn wider than the screen and
   pinned left, which moves the one lit building clear of the words. It fades into the page at the bottom, where
   the picture of the app sits half over it. */
.hero {
  position: relative;
  min-height: clamp(600px, 86vh, 820px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #06090B;
  overflow: hidden;
}
.hero picture { position: absolute; inset: 0; }
.hero-img { position: absolute; top: 0; left: 16%; width: 124%; max-width: none; height: 100%; object-fit: cover; object-position: 0 30%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(14, 20, 24, 0.86) 22%, rgba(14, 20, 24, 0) 58%),
    linear-gradient(to right, #06090B 0%, #06090B 16%, rgba(6, 9, 11, 0.78) 40%, rgba(6, 9, 11, 0) 70%);
}
.hero-copy { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 150px; }
.hero h1 {
  max-width: 13.5em;
  margin: 0 0 22px;
  font-size: clamp(2.2rem, 3.6vw + 0.9rem, 3.9rem);
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; }
.cta-price { color: var(--fog); }
.cta-price b { margin-right: 4px; font-size: 1.5rem; font-weight: 800; color: #fff; }
.cta-alt { max-width: 620px; margin: 18px 0 0; color: var(--fog); }
.cta-alt b { color: #fff; }
.status { max-width: 620px; margin: 14px 0 0; font-size: 0.95rem; color: var(--fog-dim); }
.status a { color: var(--fog); }

/* Pictures and recordings of the real app, in a thin frame. Shown no wider than their own pixels. */
.frame { margin: 0; }
.frame img, .frame video {
  width: 100%; height: auto;
  border: 1px solid var(--slate);
  border-radius: 10px;
  background: var(--ink-2);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}
.frame video { aspect-ratio: 16 / 10; }
.frame figcaption { margin-top: 8px; font-size: 0.75rem; color: var(--fog-dim); }
.hero-shot { position: relative; z-index: 2; margin-top: -118px; }
.hero-shot .frame { max-width: 1006px; margin: 0 auto; }
/* What comes with it, in one sentence, with the numbers lit. */
.tally { max-width: 860px; margin: 56px auto 0; text-align: center; font-size: clamp(1.2rem, 1vw + 0.9rem, 1.5rem); line-height: 1.5; color: var(--fog); text-wrap: balance; }
.tally b { color: #fff; font-weight: 800; }

/* Sections share one rhythm: the same padding, a thin line between them, words in a column you can read. */
.sec { padding: 112px 0; border-top: 1px solid var(--line); }
.sec.first { border-top: 0; padding-top: 96px; }
.sec p { color: var(--fog-dim); }
.sec .lead { font-size: 1.15rem; color: var(--fog); }
.head { max-width: 760px; margin-bottom: 48px; }
.head p:last-child { margin-bottom: 0; }

/* Words beside a picture. .cols is words then picture; .cols.pic-first is picture then words. */
.cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: center; }
.cols.pic-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cols.top-align { align-items: start; }
.cols + .cols, .cols + .frame, .frame + .cols { margin-top: 72px; }
.words > :last-child { margin-bottom: 0; }
.words > h3:first-child { margin-bottom: 12px; font-size: 1.45rem; font-stretch: 108%; font-weight: 800; }

/* Lists with a thin line between the rows. */
.rules { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rules li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--fog-dim); }
.rules b, .rules strong { color: #fff; font-weight: 700; }
.rules.two-up { columns: 2; column-gap: 56px; border-top: 0; margin-top: 0; }
.rules.two-up li { break-inside: avoid; border-bottom: 0; border-top: 1px solid var(--line); color: var(--fog); }
.cols + .rules.two-up, .rules.two-up + .frame { margin-top: 56px; }

/* Numbered steps, plain. */
.steps { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--line); color: var(--fog-dim); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 13px; font-weight: 800; font-size: 1.1rem; color: var(--amber); }
.steps strong { color: #fff; font-weight: 700; }

/* A two-column table of facts: the name on the left, what it does on the right. */
.spec { width: 100%; margin: 0; border-collapse: collapse; border-top: 1px solid var(--line); }
.spec th, .spec td { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec th { width: 240px; padding-right: 24px; font-weight: 700; color: #fff; }
.spec td { color: var(--fog-dim); }
.spec.narrow th { width: 150px; }

/* What it's for: one big photo and two smaller ones, each with its place and year. */
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: clamp(380px, 38vw, 500px);
}
.mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--ink-2); }
.mosaic .m1 { grid-row: 1 / 3; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .m3 img { object-position: 50% 30%; }
.mosaic figcaption {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(14, 20, 24, 0.82);
  font-size: 0.78rem;
  color: var(--fog);
}
/* A photo's caption shows only while the pointer is on the photo. A phone has no pointer and never shows it.
   Every photo is credited on the credits page. */
.mosaic figcaption, .photo figcaption { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.mosaic figure:hover figcaption, .photo:hover figcaption { opacity: 1; }
@media (hover: none) {
  .mosaic figcaption, .photo figcaption { display: none; }
}

/* Who it's for: four photos that are links to a page each, two wide and two narrow, staggered. */
.doors { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.door {
  position: relative; grid-column: span 5;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 27vw, 390px); padding: 28px 30px;
  border-radius: var(--r); overflow: hidden;
  background: var(--ink-2); color: var(--fog); text-decoration: none;
}
.door:nth-child(4n + 1), .door:nth-child(4n) { grid-column: span 7; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.74); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 20, 24, 0.97) 0%, rgba(14, 20, 24, 0.72) 36%, rgba(14, 20, 24, 0) 78%); }
.door h3, .door p { position: relative; z-index: 1; }
.door h3 { margin-bottom: 8px; font-size: 1.45rem; font-stretch: 108%; font-weight: 800; }
.door p { max-width: 31em; margin: 0; color: var(--fog); }
.door .go { margin-top: 12px; font-weight: 700; color: var(--amber); }
.door:hover img { filter: brightness(0.9); }
.door:hover .go { text-decoration: underline; }

/* Four more pictures of the app, two across. */
.shots { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; margin: 72px 0 0; padding: 0; }
.shots .frame img { aspect-ratio: 9 / 5; object-fit: cover; object-position: 0 0; }
.shots h3 { margin: 20px 0 6px; }
.shots p { margin: 0; }
.also { margin-top: 88px; }
.also h3 { margin-bottom: 20px; font-size: 1.45rem; font-stretch: 108%; font-weight: 800; }

/* The comparison. Our column is the lit one. On a phone each row turns into a short block. */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; line-height: 1.45; }
.cmp th, .cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { vertical-align: bottom; padding-top: 20px; padding-bottom: 18px; font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: #fff; }
.cmp thead th small { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 400; color: var(--fog-dim); }
.cmp tbody th { width: 20%; padding-left: 0; font-weight: 600; color: var(--fog); }
.cmp td { width: 20%; color: var(--fog-dim); }
.cmp td b { font-weight: 700; color: var(--fog); }
.cmp .us { background: var(--ink-2); border-left: 1px solid var(--slate); border-right: 1px solid var(--slate); color: #fff; }
.cmp td.us b { color: #fff; }
.cmp thead .us { border-top: 3px solid var(--amber); border-radius: 10px 10px 0 0; font-size: 1.2rem; }
.cmp tbody tr:last-child .us { border-bottom: 1px solid var(--slate); border-radius: 0 0 10px 10px; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td:not(.us) { border-bottom: 0; }
.cmp-note { max-width: 760px; margin-top: 28px; }
.cmp-cta { margin-top: 40px; }
.cmp-cta .cta-price { max-width: 560px; }

/* The price: what it costs and the Order button on the left, what you get on the right. */
.buy {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center;
  padding: 44px 48px;
  border: 1px solid var(--slate);
  border-radius: 14px;
  background: var(--ink-2);
}
.buy h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--fog); }
.buy .amt { margin: 6px 0 2px; font-size: 3.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.buy .amt small { margin-left: 10px; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; color: var(--fog-dim); }
.buy .sub { margin: 0 0 24px; }
.buy .btn { display: block; text-align: center; font-size: 1.12rem; padding: 17px 28px; }
.buy .fine { margin: 14px 0 0; font-size: 0.92rem; }
.buy .rules { margin-top: 0; }
.buy .rules li { color: var(--fog); }
/* The second download, with no AI: a slimmer row under the first, with its own Order button. */
.buy-alt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px 44px; align-items: center;
  margin-top: 16px; padding: 30px 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.buy-alt h3 { margin: 0 0 6px; }
.buy-alt p { margin: 0; }
.buy-alt .amt { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; white-space: nowrap; }
.buy-alt .amt small { margin-left: 8px; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--fog-dim); }
.buy-alt .btn { white-space: nowrap; }
.buy-alt.lit { border-color: var(--slate); background: var(--ink-2); }
.buy-note { max-width: 760px; }
.buy-more { margin-top: 72px; }
.refund { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--line); }
.refund h3 { font-size: 1.45rem; font-stretch: 108%; font-weight: 800; line-height: 1.2; }

/* The old-laptop photo, and the plain warning before anyone installs Linux. */
.photo { position: relative; margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; border-radius: var(--r); }
.photo.wide img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
.photo figcaption {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(14, 20, 24, 0.82);
  font-size: 0.78rem;
  color: var(--fog);
}
.warn { margin: 28px 0 24px; padding: 20px 24px; border: 1px solid var(--amber); border-radius: var(--r); background: #1A1508; }
.warn p { margin: 0; color: var(--fog); }
.warn .warn-title { margin-bottom: 6px; font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: #fff; }

/* Questions: all open, two columns. */
.qa { columns: 2; column-gap: 72px; }
.qa > div { break-inside: avoid; padding: 22px 0 8px; border-top: 1px solid var(--line); }
.qa h3 { font-size: 1.12rem; }

/* Closing band. */
.last {
  position: relative;
  min-height: clamp(420px, 44vw, 560px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #000;
  overflow: hidden;
}
.last > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(0.55) contrast(1.1); }
.last::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 20, 24, 0.92) 0%, rgba(14, 20, 24, 0) 70%); }
.last-copy { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 44px; }
.last h2 { font-size: clamp(2.1rem, 3.6vw + 0.9rem, 3.6rem); font-stretch: 110%; letter-spacing: -0.015em; line-height: 1.05; }
.last-copy p { max-width: 600px; font-size: 1.15rem; margin-bottom: 26px; }
.last-copy .cta { max-width: none; margin-bottom: 0; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 44px 0 56px; color: var(--fog-dim); font-size: 0.88rem; }
.foot .row { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.foot .brand { display: flex; align-items: center; gap: 12px; color: var(--fog); font-weight: 600; }
.foot .brand img { width: 88px; height: auto; }
.foot .fine { max-width: 820px; }
.foot .fine p { margin-bottom: 8px; }
.foot-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 20px; padding: 0; }
.foot-links a { color: var(--fog); }
.foot-links a:hover { color: var(--amber); }

/* Photo credits page */
.credits { padding: 72px 0 104px; }
.credits h1 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 2.8rem); font-stretch: 110%; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.credits > .wrap > p { max-width: 760px; color: var(--fog-dim); }
.credit-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.credit-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.credit-list img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.credit-list p { margin: 0; color: var(--fog-dim); font-size: 0.92rem; }
.credit-list strong { color: var(--fog); }
.credits h2 { margin: 56px 0 12px; font-size: 1.5rem; line-height: 1.2; }
.source-list { list-style: none; max-width: 760px; margin: 24px 0 32px; padding: 0; border-top: 1px solid var(--line); }
.source-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.source-list p { margin: 0; color: var(--fog-dim); font-size: 0.92rem; }
.source-list strong { color: var(--fog); }
.source-list a { overflow-wrap: anywhere; }

/* 404 */
.lost { padding: 88px 0 112px; }
.lost h1 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 2.8rem); font-stretch: 110%; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.lost p { max-width: 640px; color: var(--fog-dim); margin-bottom: 26px; }

/* Policy pages (/terms, /refunds, /warranty, /shipping, /privacy, /safety): a photo band, then the page with the
   list of policies beside it. */
.band {
  position: relative;
  min-height: clamp(300px, 30vw, 420px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #000;
  overflow: hidden;
}
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(0.5) contrast(1.1); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 20, 24, 0.94) 0%, rgba(14, 20, 24, 0) 70%); }
.band-terms > img { object-position: 50% 35%; }
.band-refunds > img { object-position: 50% 30%; }
.band-warranty > img { object-position: 50% 55%; }
.band-shipping > img { object-position: 50% 60%; }
.band-privacy > img { object-position: 55% 50%; }
.band-copy { position: relative; z-index: 1; width: 100%; padding-top: 110px; padding-bottom: 28px; }
.band h1 {
  max-width: 900px;
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 3.6vw + 0.9rem, 3.6rem);
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.band .lede { margin-bottom: 0; }
/* A page for one kind of buyer (/preppers, /missions, /schools, /responders): a taller, lighter photo band that
   carries the Order button, then the same sections the home page uses. */
.band.aud { min-height: clamp(480px, 46vw, 640px); }
.band.aud > img { filter: brightness(0.7) contrast(1.05); }
/* The hill town sits low and dark in its photo, so it gets more light and the lower part of the frame. */
.band.aud-missions > img { filter: brightness(0.95) contrast(1.05); object-position: 50% 82%; }
.door-mission img { object-position: 50% 78%; filter: brightness(0.9); }
.band.aud::after {
  background:
    linear-gradient(to top, rgba(14, 20, 24, 0.97) 0%, rgba(14, 20, 24, 0.55) 40%, rgba(14, 20, 24, 0) 76%),
    linear-gradient(to right, rgba(6, 9, 11, 0.84) 0%, rgba(6, 9, 11, 0.4) 45%, rgba(6, 9, 11, 0) 72%);
}
.band.aud h1 { max-width: 14em; }
.band.aud .lede { max-width: 640px; margin-bottom: 28px; }
.band.aud .band-copy { padding-bottom: 44px; }
.aud + .sec { border-top: 0; padding-top: 88px; }
.sec .team { max-width: 760px; margin: 28px 0 0; color: var(--fog); }
.team + .buy-note { margin-top: 12px; }
.policy { padding: 64px 0 104px; }
.policy > .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 72px; align-items: start; }
.policy-nav { position: sticky; top: 96px; }
.policy-nav ul { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); }
.policy-nav li { border-bottom: 1px solid var(--line); }
.policy-nav a { display: block; padding: 10px 0; color: var(--fog); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.policy-nav a:hover { color: #fff; text-decoration: underline; }
.policy-nav a[aria-current="page"] { color: var(--amber); font-weight: 700; }
.policy-nav p { font-size: 0.88rem; color: var(--fog-dim); }
.doc { max-width: 760px; font-size: 1.05rem; }
.doc .updated { margin-bottom: 28px; font-size: 0.9rem; color: var(--fog-dim); }
.doc h2 {
  margin: 48px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
}
.doc .updated + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3 { margin: 30px 0 8px; font-size: 1.15rem; line-height: 1.3; }
.doc strong { color: #fff; }
.doc ul, .doc ol { margin: 0 0 1em; padding-left: 1.3em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--amber); }
.doc li ul { margin-top: 8px; }
.doc .table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.doc table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font-size: 0.95rem; }
.doc th, .doc td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc thead th { font-size: 0.85rem; font-weight: 600; color: var(--fog-dim); }
.doc tbody th { font-weight: 600; color: var(--fog); }
.doc td { color: var(--fog-dim); }

/* The header drops its section links before it runs out of room. */
@media (max-width: 1220px) {
  .top nav .long { display: none; }
}
@media (max-width: 960px) {
  .top nav .wide { display: none; }
}

@media (max-width: 960px) {
  .sec { padding: 80px 0; }
  .sec.first { padding-top: 72px; }
  .head { margin-bottom: 36px; }
  .cols, .cols.pic-first, .cols.even { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Stacked, the words come before the picture. */
  .cols.pic-first > .words { order: -1; }
  .cols + .cols, .cols + .frame, .frame + .cols { margin-top: 56px; }
  .mosaic { height: clamp(300px, 56vw, 460px); }
  .photo img { aspect-ratio: 3 / 2; }
  .buy { grid-template-columns: minmax(0, 1fr); padding: 32px 28px; }
  .buy-alt { grid-template-columns: minmax(0, 1fr) auto; padding: 28px; }
  .buy-alt > div { grid-column: 1 / 3; }
  .buy-more, .refund { margin-top: 56px; }
  .door, .door:nth-child(4n + 1), .door:nth-child(4n) { grid-column: span 6; min-height: 320px; padding: 24px; }
  .also { margin-top: 64px; }
  .policy { padding: 36px 0 72px; }
  .policy > .wrap { grid-template-columns: minmax(0, 1fr); }
  .policy-nav { position: static; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .policy-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; border-top: 0; }
  .policy-nav li { border-bottom: 0; }
  .policy-nav a { padding: 4px 0; }
  .policy-nav p { display: none; }
}

/* The comparison on a tablet or phone: no column heads; each row is its question, then the four answers. */
@media (max-width: 860px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp, .cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 20px 0 14px; border-top: 1px solid var(--line); }
  .cmp tbody th { padding: 0 0 8px; border: 0; font-size: 1.12rem; font-weight: 700; color: #fff; }
  .cmp td, .cmp td.us { position: relative; padding: 5px 0 5px 9.5rem; border: 0; border-radius: 0; background: none; }
  .cmp tbody tr:last-child .us { border: 0; border-radius: 0; }
  .cmp td::before { content: attr(data-k); position: absolute; left: 0; top: 7px; font-size: 0.86rem; color: var(--fog-dim); }
  .cmp td.us::before { font-weight: 700; color: var(--amber); }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  /* The skyline sits in a band at the top and the words start under it. */
  .hero { min-height: 0; display: block; }
  .hero picture { bottom: auto; height: 400px; }
  .hero-img { left: 0; width: 100%; object-position: 62% 0; }
  .hero::after { bottom: auto; height: 400px; background: linear-gradient(to top, var(--ink) 0%, rgba(14, 20, 24, 0.55) 34%, rgba(14, 20, 24, 0) 62%); }
  .hero-copy { padding-top: 262px; padding-bottom: 96px; }
  .hero-shot { margin-top: -56px; }
  .lede { font-size: 1.08rem; }
  .mosaic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  .mosaic .m1 { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 3 / 2; }
  .mosaic .m2, .mosaic .m3 { aspect-ratio: 1; }
  .rules.two-up, .qa { columns: 1; }
  .door, .door:nth-child(4n + 1), .door:nth-child(4n) { grid-column: 1 / -1; min-height: 280px; }
  .band.aud { min-height: 0; }
  .band.aud .band-copy { padding-top: 200px; }
  .shots { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 56px; }
  .spec th, .spec.narrow th { display: block; width: auto; padding: 14px 0 0; border-bottom: 0; }
  .spec td { display: block; padding: 2px 0 14px; }
}

@media (max-width: 560px) {
  .top .wrap { height: 56px; }
  .top .logo img { height: 24px; }
  .top nav ul { gap: 18px; }
  .sec { padding: 64px 0; }
  .sec.first { padding-top: 56px; }
  .cta .btn { width: 100%; text-align: center; }
  .shots .frame img { aspect-ratio: auto; object-fit: contain; }
  .buy { padding: 26px 20px; }
  .buy-alt { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .buy-alt > div { grid-column: auto; }
  .buy-alt .btn { text-align: center; }
  .tally { margin-top: 40px; text-align: left; }
  .buy .amt { font-size: 3rem; }
  .credit-list li { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .credit-list img { width: 84px; }
  .doc { font-size: 1.02rem; }
  .doc th, .doc td { padding-right: 10px; }
}

/* My account (the shop's sign-in for updates) shows where the header has room for it; updates are downloaded on a
   computer anyway. */
@media (max-width: 640px) {
  .top nav .account { display: none; }
}

/* Room for the logo, Cart and Order on a phone. */
@media (max-width: 480px) {
  .top nav .mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}