/* SentryScreen site — one hand-written stylesheet, no build step.
   Mobile-first; checked at 320 / 390 / 768 / 1000 / 1440 px, in the paper
   room and the night room, keyboard only, and at 200% text size.

   The look is the hand-inked cartoon of the v2 marketing animations
   (DESIGN.md): a paper room by day and a lamp-lit night room, headings in one
   self-hosted hand-lettered face (Shantell Sans, /fonts/, OFL), body text in
   the system sans. The reading page (privacy) uses the calm legal variant: the same paper and ink, no drawings.

   The two rooms: the paper room is the default; the night room applies when
   the reader chose it (theme.js sets <html data-theme="dark">) or when the
   system is dark and the reader did not choose the paper room. Every colour
   is a token in the generated "theme" region below (design/theme.mjs and
   design/palette.mjs, written by design/build-hero.mjs), so no rule needs its
   own dark variant.

   DESIGN.md (repository root, not published) is the source of every token:
   colour, type scale, spacing, radii, motion and breakpoints. Every value in
   this file is one of those tokens, except the drawings (the hero room, the
   figures and the demo desks), which DESIGN.md exempts as illustration, and
   the few drawn-object sizes DESIGN.md lists under "Fixed sizes outside the
   scale" (the mark, the menu glyph, the ink edges).

   _headers sets default-src 'none', so there is no inline style anywhere and
   no style attribute on any element; everything visual is in this file. */

/* One hand-lettered face for headings, self-hosted (SIL OFL 1.1, the license
   is /fonts/OFL.txt). _headers admits it with font-src 'self'. */
@font-face {
  font-family: "Shantell Sans";
  src: url("/fonts/shantell-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- the local tokens every component reads (DESIGN.md "Surfaces");
     the cover surface below redefines them. Declared on :root with the
     colours they read, so the night room's colours flow into them. ---- */
  --btn-ink: var(--ink);
  --btn-border: var(--control-border);
  --link: var(--accent);
  --focus-ring: var(--focus);
  --surface: var(--paper);

  /* ---- type ---- */
  --display: "Shantell Sans", "Chalkboard SE", "Comic Sans MS", cursive;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.15rem;
  --fs-h3: 1.2rem;
  --fs-h2-sm: clamp(1.5rem, 2.6vw, 1.9rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h1-page: clamp(1.9rem, 3vw + 1rem, 3rem);
  /* The lettering is wide: the hero h1 sets in three or four lines. */
  --fs-h1-letter: clamp(2.1rem, 2.2vw + 1rem, 3.2rem);
  --fs-glyph: 1.5rem; /* step numbers and the disclosure "+" */

  /* ---- spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --section-pad: clamp(4rem, 8vw, 7rem);
  --gutter: 1.25rem;

  /* ---- radii: the hand-cut corners of inked things, and plain ones ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-ink: 14px 18px 12px 20px / 18px 12px 20px 14px;
  --r-ink-sm: 10px 14px 9px 12px / 12px 9px 14px 10px;

  /* ---- the ink edge: inked controls and panels ---- */
  --edge: 3px;
  --lift: 3px 4px 0 var(--btn-shadow);
  --lift-hover: 4px 5px 0 var(--btn-shadow);
  --lift-press: 1px 1px 0 var(--btn-shadow);
  --lift-panel: 5px 6px 0 var(--btn-shadow);

  /* ---- motion ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- layout ---- */
  --measure: 36rem;
  --measure-legal: 40rem;
  --wrap: 76rem;
  --tap-min: 44px;
  --control-h: 3rem; /* 48 px: buttons and inputs */
  --header-h: 4.25rem;
}

/* theme:start */
/* Generated by design/build-hero.mjs from design/theme.mjs (interface tokens)
   and design/palette.mjs (the drawing palette, DESIGN.md "Drawings"). Do not
   edit by hand. The paper room is the default; the night room applies when
   the reader chose it (theme.js sets data-theme="dark") or when the system is
   dark and the reader did not choose the paper room. */
:root {
  color-scheme: light;
  --wall: #f0e2c4;
  --paper: #f6ecd5;
  --paper-2: #ecdcbb;
  --slip: #fbf5e6;
  --slip-ink: #2b1d16;
  --ink: #2b1d16;
  --ink-2: #4a3326;
  --muted: #6b5140;
  --line: rgba(43, 29, 22, 0.2);
  --line-strong: rgba(43, 29, 22, 0.45);
  --control-border: #2b1d16;
  --accent: #8e3b22;
  --accent-hover: #6f2c18;
  --accent-soft: #f1dcb4;
  --focus: #2458c6;
  --danger: #a3311e;
  --ok: #3d6b30;
  --star: rgba(74, 51, 38, 0.22);
  --vignette: rgba(60, 30, 10, 0.14);
  --grain-blend: multiply;
  --grain-opacity: 0.45;
  --btn-shadow: #2b1d16;
  --btn-tint: rgba(43, 29, 22, 0.06);
  --btn-tint-active: rgba(43, 29, 22, 0.11);
  --primary-bg: #d6a53a;
  --primary-hover: #e3b44d;
  --primary-ink: #2b1d16;
  --cover: #2b1d16;
  --cover-ink: #f6ecd5;
  --cover-muted: rgba(246, 236, 213, 0.72);
  --cover-line: rgba(246, 236, 213, 0.16);
  --cover-border: rgba(246, 236, 213, 0.5);
  --cover-focus: #86b0ff;
  --plan-best-border: #2b1d16;
  --ink-line: #2b1d16;
  --c-navy: #262a3b;
  --c-navy-light: #353b54;
  --c-navy-deep: #1b1e2b;
  --c-glow: #fff7dc;
  --c-ink: #2b1d16;
  --c-shield: #5f9a4c;
  --c-mustard: #d6a53a;
  --c-mustard-dark: #b0842a;
  --c-teal: #7f9c94;
  --c-teal-dark: #66827b;
  --c-teal-deep: #4d6660;
  --c-beacon-on: #ffd24d;
  --c-maroon: #81302b;
  --c-terracotta: #c0603f;
  --c-sage: #95a67d;
  --c-green: #566f48;
  --c-green-deep: #40573a;
  --c-cream: #f6ecd5;
  --c-cocoa: #6b3f26;
  --c-cheek: rgba(214, 110, 90, 0.75);
  --c-steam: rgba(43, 29, 22, 0.45);
  --c-skin: #e3955a;
  --c-purple: #6c4f82;
  --c-hair: #5a3a28;
  --c-halo: #ffe7a8;
  --c-halo-green: #9fdc8a;
  --c-beacon: #ffcf4a;
  --c-wood: #a0663a;
  --c-wood-dark: #7a4a28;
  --c-wood-light: #b57a48;
  --c-bezel: #d9cdb4;
  --c-screen: #fbf5e6;
  --c-bar: #ddcfb2;
  --c-tile: #cdbd9c;
  --c-tile-2: #b9cdbf;
  --c-cover: #1d1714;
  --c-cover-ink: #f3e6cc;
  --c-sky: #b9cdbf;
  --c-cloud: #fbf5e6;
  --c-sun: #d6a53a;
  --c-night-sky: #2c3552;
  --c-moon: #f3e6c0;
  --c-rug: #eee4cf;
  --c-rug-shade: #ddd0b5;
  --c-pot: #c0603f;
  --c-pot-rim: #d9782f;
  --c-shade: #c0603f;
  --c-shade-in: #e9a15d;
  --c-seat: #d6a53a;
  --c-frame: #b57a48;
  --c-shadow: rgba(43, 29, 22, 0.16);
  --c-light: rgba(255, 214, 140, 0);
  --c-room-wall: #ead6ae;
  --c-maroon-dark: #5f221f;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wall: #2a1f18;
  --paper: #1f1712;
  --paper-2: #261c16;
  --slip: #e9dcc0;
  --ink: #f3e6cc;
  --ink-2: #dccbaa;
  --muted: #b8a384;
  --line: rgba(243, 230, 204, 0.16);
  --line-strong: rgba(243, 230, 204, 0.35);
  --control-border: #cdb994;
  --accent: #e9b949;
  --accent-hover: #f3cb6a;
  --accent-soft: #3a2b1c;
  --focus: #86b0ff;
  --danger: #ff9d8a;
  --ok: #8fd69a;
  --star: rgba(255, 222, 160, 0.14);
  --vignette: rgba(0, 0, 0, 0.4);
  --grain-blend: soft-light;
  --grain-opacity: 0.5;
  --btn-shadow: rgba(0, 0, 0, 0.55);
  --btn-tint: rgba(243, 230, 204, 0.08);
  --btn-tint-active: rgba(243, 230, 204, 0.14);
  --primary-bg: #e2ae45;
  --primary-hover: #efbf5c;
  --cover: #140d09;
  --plan-best-border: rgba(233, 185, 73, 0.55);
  --ink-line: #140d09;
  --c-navy: #232639;
  --c-navy-light: #30354b;
  --c-mustard: #c9973a;
  --c-mustard-dark: #9f7527;
  --c-teal: #6f8981;
  --c-teal-dark: #58716a;
  --c-maroon: #74302a;
  --c-terracotta: #ad5638;
  --c-sage: #83926c;
  --c-green: #4c6340;
  --c-cream: #e6d6b4;
  --c-steam: rgba(246, 236, 213, 0.55);
  --c-skin: #d08650;
  --c-purple: #5f4673;
  --c-hair: #4a3022;
  --c-halo: #ffd98a;
  --c-wood: #7d5030;
  --c-wood-dark: #5c3820;
  --c-wood-light: #8d5c36;
  --c-bezel: #a89b83;
  --c-screen: #f7eed8;
  --c-bar: #d6c6a6;
  --c-tile: #c2b08d;
  --c-rug: #b9ac93;
  --c-rug-shade: #a79a81;
  --c-pot: #9c4e33;
  --c-pot-rim: #b5642a;
  --c-shade: #d9783f;
  --c-shade-in: #ffd28a;
  --c-seat: #b5893a;
  --c-frame: #8d5c36;
  --c-shadow: rgba(0, 0, 0, 0.3);
  --c-light: rgba(255, 205, 128, 0.42);
  --c-room-wall: #34261c;
  --c-maroon-dark: #4a1a17;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wall: #2a1f18;
    --paper: #1f1712;
    --paper-2: #261c16;
    --slip: #e9dcc0;
    --ink: #f3e6cc;
    --ink-2: #dccbaa;
    --muted: #b8a384;
    --line: rgba(243, 230, 204, 0.16);
    --line-strong: rgba(243, 230, 204, 0.35);
    --control-border: #cdb994;
    --accent: #e9b949;
    --accent-hover: #f3cb6a;
    --accent-soft: #3a2b1c;
    --focus: #86b0ff;
    --danger: #ff9d8a;
    --ok: #8fd69a;
    --star: rgba(255, 222, 160, 0.14);
    --vignette: rgba(0, 0, 0, 0.4);
    --grain-blend: soft-light;
    --grain-opacity: 0.5;
    --btn-shadow: rgba(0, 0, 0, 0.55);
    --btn-tint: rgba(243, 230, 204, 0.08);
    --btn-tint-active: rgba(243, 230, 204, 0.14);
    --primary-bg: #e2ae45;
    --primary-hover: #efbf5c;
    --cover: #140d09;
    --plan-best-border: rgba(233, 185, 73, 0.55);
    --ink-line: #140d09;
    --c-navy: #232639;
    --c-navy-light: #30354b;
    --c-mustard: #c9973a;
    --c-mustard-dark: #9f7527;
    --c-teal: #6f8981;
    --c-teal-dark: #58716a;
    --c-maroon: #74302a;
    --c-terracotta: #ad5638;
    --c-sage: #83926c;
    --c-green: #4c6340;
    --c-cream: #e6d6b4;
    --c-steam: rgba(246, 236, 213, 0.55);
    --c-skin: #d08650;
    --c-purple: #5f4673;
    --c-hair: #4a3022;
    --c-halo: #ffd98a;
    --c-wood: #7d5030;
    --c-wood-dark: #5c3820;
    --c-wood-light: #8d5c36;
    --c-bezel: #a89b83;
    --c-screen: #f7eed8;
    --c-bar: #d6c6a6;
    --c-tile: #c2b08d;
    --c-rug: #b9ac93;
    --c-rug-shade: #a79a81;
    --c-pot: #9c4e33;
    --c-pot-rim: #b5642a;
    --c-shade: #d9783f;
    --c-shade-in: #ffd28a;
    --c-seat: #b5893a;
    --c-frame: #8d5c36;
    --c-shadow: rgba(0, 0, 0, 0.3);
    --c-light: rgba(255, 205, 128, 0.42);
    --c-room-wall: #34261c;
    --c-maroon-dark: #4a1a17;
  }
}

.ink-art .s { stroke: var(--ink-line); stroke-linecap: round; stroke-linejoin: round; }
.ink-art .nf { fill: none; }
.ink-art .k-navy { fill: var(--c-navy); }
.ink-art .k-navy-light { fill: var(--c-navy-light); }
.ink-art .k-navy-deep { fill: var(--c-navy-deep); }
.ink-art .k-glow { fill: var(--c-glow); }
.ink-art .k-ink { fill: var(--c-ink); }
.ink-art .k-shield { fill: var(--c-shield); }
.ink-art .k-mustard { fill: var(--c-mustard); }
.ink-art .k-mustard-dark { fill: var(--c-mustard-dark); }
.ink-art .k-teal { fill: var(--c-teal); }
.ink-art .k-teal-dark { fill: var(--c-teal-dark); }
.ink-art .k-teal-deep { fill: var(--c-teal-deep); }
.ink-art .k-beacon-on { fill: var(--c-beacon-on); }
.ink-art .k-maroon { fill: var(--c-maroon); }
.ink-art .k-terracotta { fill: var(--c-terracotta); }
.ink-art .k-sage { fill: var(--c-sage); }
.ink-art .k-green { fill: var(--c-green); }
.ink-art .k-green-deep { fill: var(--c-green-deep); }
.ink-art .k-cream { fill: var(--c-cream); }
.ink-art .k-cocoa { fill: var(--c-cocoa); }
.ink-art .k-cheek { fill: var(--c-cheek); }
.ink-art .k-steam { fill: var(--c-steam); }
.ink-art .k-skin { fill: var(--c-skin); }
.ink-art .k-purple { fill: var(--c-purple); }
.ink-art .k-hair { fill: var(--c-hair); }
.ink-art .k-wood { fill: var(--c-wood); }
.ink-art .k-wood-dark { fill: var(--c-wood-dark); }
.ink-art .k-wood-light { fill: var(--c-wood-light); }
.ink-art .k-bezel { fill: var(--c-bezel); }
.ink-art .k-screen { fill: var(--c-screen); }
.ink-art .k-bar { fill: var(--c-bar); }
.ink-art .k-tile { fill: var(--c-tile); }
.ink-art .k-tile-2 { fill: var(--c-tile-2); }
.ink-art .k-cover { fill: var(--c-cover); }
.ink-art .k-cover-ink { fill: var(--c-cover-ink); }
.ink-art .k-sky { fill: var(--c-sky); }
.ink-art .k-cloud { fill: var(--c-cloud); }
.ink-art .k-sun { fill: var(--c-sun); }
.ink-art .k-night-sky { fill: var(--c-night-sky); }
.ink-art .k-moon { fill: var(--c-moon); }
.ink-art .k-rug { fill: var(--c-rug); }
.ink-art .k-rug-shade { fill: var(--c-rug-shade); }
.ink-art .k-pot { fill: var(--c-pot); }
.ink-art .k-pot-rim { fill: var(--c-pot-rim); }
.ink-art .k-shade { fill: var(--c-shade); }
.ink-art .k-shade-in { fill: var(--c-shade-in); }
.ink-art .k-seat { fill: var(--c-seat); }
.ink-art .k-frame { fill: var(--c-frame); }
.ink-art .k-shadow { fill: var(--c-shadow); }
.ink-art .k-light { fill: var(--c-light); }
.ink-art .k-room-wall { fill: var(--c-room-wall); }
.ink-art .l-glow { stroke: var(--c-glow); }
.ink-art .l-ink { stroke: var(--c-ink); }
.ink-art .l-terracotta { stroke: var(--c-terracotta); }
.ink-art .l-maroon { stroke: var(--c-maroon); }
.ink-art .l-mustard { stroke: var(--c-mustard); }
.ink-art .l-mustard-dark { stroke: var(--c-mustard-dark); }
.ink-art .l-green { stroke: var(--c-green); }
.ink-art .l-green-deep { stroke: var(--c-green-deep); }
.ink-art .l-navy-deep { stroke: var(--c-navy-deep); }
.ink-art .l-teal-deep { stroke: var(--c-teal-deep); }
.ink-art .l-steam { stroke: var(--c-steam); }
.ink-art .l-maroon-dark { stroke: var(--c-maroon-dark); }
.ink-art .l-rug-shade { stroke: var(--c-rug-shade); }
.ink-art .l-wood-dark { stroke: var(--c-wood-dark); }
.ink-art .l-ink { stroke: var(--ink-line); }
.ink-art .mark-line { stroke: var(--ink); }
.ink-art .st-halo { stop-color: var(--c-halo); }
.ink-art .st-halo-green { stop-color: var(--c-halo-green); }
.ink-art .st-beacon { stop-color: var(--c-beacon); }
.ink-art .st-light { stop-color: var(--c-light); }
.ink-art .halo { opacity: 0.35; }
.ink-art .halo-strong { opacity: 0.75; }
.ink-art .night-only { display: none; }
:root[data-theme="dark"] .ink-art .halo { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ink-art .halo { opacity: 1; }
}
:root[data-theme="dark"] .ink-art .day-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ink-art .day-only { display: none; }
}
:root[data-theme="dark"] .ink-art .night-only { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ink-art .night-only { display: inline; }
}
/* theme:end */

/* The cover (the footer and the first download card): the dark slab of the product's
   own cover, in both rooms. It sets the local tokens, so a button, link or
   focus ring on it needs no per-context rule, and --ink, so the mark's
   outline turns cream on it. */
.site-footer,
.plan-best {
  --ink: var(--cover-ink);
  --btn-ink: var(--cover-ink);
  --btn-border: var(--cover-border);
  --btn-shadow: rgba(0, 0, 0, 0.45);
  --link: var(--cover-ink);
  --focus-ring: var(--cover-focus);
  --surface: var(--cover);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* In-page links land below the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

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

/* rem, not px, so the reader's own text size scales the page. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  :root {
    --fs-body: 1.125rem;
    --gutter: 2.5rem;
  }
}

main {
  flex: 1 0 auto;
}

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

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-2);
  text-wrap: balance;
  /* At 200% text on a 320 px phone a long word would otherwise push the
     page sideways. */
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip {
  position: absolute;
  left: -9999px;
}

/* Focused, it floats over the sticky header instead of reflowing under it. */
.skip:focus {
  position: fixed;
  top: var(--space-3);
  left: var(--gutter);
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  border: var(--edge) solid var(--btn-shadow);
  border-radius: var(--r-ink-sm);
  background: var(--slip);
  color: var(--slip-ink);
}

/* A link on its own line, after a sentence rather than inside it: a 44 px
   target. */
.link-tap {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--tap-min);
}

.eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

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

/* Shown only when theme.js ran (it adds .has-js to <html>): controls that do
   nothing without script. */
html:not(.has-js) .needs-js {
  display: none !important;
}

.has-js .no-js-only {
  display: none !important;
}

/* ---------- the mark: Lantern's face (design/build-figures.mjs) ---------- */

.mark {
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
}

/* ---------- header: sticky, on the wall ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: var(--edge) solid var(--btn-shadow);
  background: var(--wall);
}

.site-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-5);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}

.nav-list a:not(.btn):hover,
.nav-list a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* The header's links show from 900 px; under it they sit behind a Menu
   disclosure (no script: a native <details>, so it opens with a tap, Enter
   or Space). The two lists carry the same links. */
.nav-menu {
  display: none;
}

@media (max-width: 899.98px) {
  .nav-bar {
    display: none;
  }

  .nav-menu {
    display: block;
  }
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: var(--edge) solid var(--btn-shadow);
  border-radius: var(--r-ink-sm);
  background: var(--slip);
  color: var(--slip-ink);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  box-shadow: 2px 3px 0 var(--btn-shadow);
  transition: background-color var(--dur-fast) var(--ease);
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

/* Three bars; the open state presses the button in. */
.nav-menu summary::before {
  content: "";
  width: 16px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}

.nav-menu[open] summary {
  transform: translate(1px, 2px);
  box-shadow: var(--lift-press);
}

.nav-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: var(--gutter);
  right: var(--gutter);
  z-index: 10;
  max-height: calc(100vh - var(--header-h) - var(--space-5));
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border: var(--edge) solid var(--control-border);
  border-radius: var(--r-ink-sm);
  background: var(--paper);
  box-shadow: var(--lift-panel);
}

.nav-menu[open] .nav-panel {
  animation: reveal var(--dur) var(--ease);
}

.nav-panel .nav-list {
  flex-direction: column;
  align-items: stretch;
}

.nav-panel .nav-list li + li {
  border-top: 1px solid var(--line);
}

.nav-panel .nav-list a:not(.btn) {
  display: flex;
  width: 100%;
  min-height: var(--control-h);
  color: var(--ink);
}

.nav-panel .btn {
  width: 100%;
  margin: var(--space-3) 0 var(--space-1);
}

/* ---------- the room switch (theme.js) ----------
   A real button, "Dark mode", pressed in the night room. In the header bar
   it is the moon alone (the name stays for screen readers); in the Menu it
   is a row with its name and a switch. Hidden without script. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  border: var(--edge) solid transparent;
  border-radius: var(--r-ink-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--btn-shadow);
  background: var(--btn-tint);
}

.theme-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle[aria-pressed="true"] .theme-icon {
  fill: var(--c-mustard);
}

.theme-toggle-row {
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-h);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}

.theme-toggle-row:hover {
  border-color: var(--line);
}

.theme-toggle-row .theme-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

/* The switch: a pill with a knob, the knob right and mustard when on. */
.theme-switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border: 2px solid var(--btn-shadow);
  border-radius: var(--r-pill);
  background: var(--slip);
}

.theme-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.5rem - 8px);
  height: calc(1.5rem - 8px);
  border-radius: 50%;
  background: var(--slip-ink);
  transition: transform var(--dur) var(--ease);
}

.theme-toggle[aria-pressed="true"] .theme-switch {
  background: var(--primary-bg);
}

.theme-toggle[aria-pressed="true"] .theme-switch::after {
  transform: translateX(1.25rem);
}

/* ---------- buttons (DESIGN.md "Buttons") ----------
   Inked paper: a 3 px ink edge on a hand-cut corner and a hard offset shadow
   that the button presses into. The primary is mustard and lettered. */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h); /* every control is at least 44 px tall (SITE.md) */
  max-width: 100%;
  padding: var(--space-3) var(--space-5);
  /* The edge is --btn-border (ink by day, light at night: 3:1 or more
     against the page, WCAG 1.4.11); the shadow is --btn-shadow. */
  border: var(--edge) solid var(--btn-border);
  border-radius: var(--r-ink);
  background: transparent;
  color: var(--btn-ink);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lift);
  transition:
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:hover {
  background: var(--btn-tint);
  text-decoration: none;
  transform: translate(-1px, -1px);
  box-shadow: var(--lift-hover);
}

.btn:active {
  background: var(--btn-tint-active);
  transform: translate(2px, 3px);
  box-shadow: var(--lift-press);
}

.btn-primary {
  border-color: var(--btn-shadow);
  background: var(--primary-bg);
  color: var(--primary-ink);
  font-family: var(--display);
  font-size: var(--fs-lead);
  letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn-primary:active {
  background: var(--primary-hover);
}

/* The recommended choice inside a group (the first download card) and a page's own
   action next to the header's Download Now: an ink fill, never the mustard,
   so it does not compete with the page's one primary. */
.btn-strong {
  background: var(--btn-ink);
  color: var(--surface);
}

.btn-strong:hover,
.btn-strong:active {
  background: var(--btn-ink);
  color: var(--surface);
}

/* The header's Download Now: the primary, one size down. */
.btn-sm {
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-base);
}

/* The hero's Download Now: one size up. */
.btn-lg {
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-7);
  font-size: var(--fs-h3);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: transparent;
}

.btn-primary:disabled:hover,
.btn-primary[aria-disabled="true"]:hover {
  background: var(--primary-bg);
}

/* ---------- the hero: the paper room (DESIGN.md "Hero") ----------
   The wall (the copy and the room), then the assurances on paper. The room
   is one inline drawing (design/build-hero.mjs) that brings the floor and
   everything on it. Under 900 px it sits in an inked frame under the copy,
   the frame's background its wallpaper. From 900 px there is no frame: the
   copy and the room share one wall, and the drawn floor runs the full width
   of the window under both (DESIGN.md "Hero"). */

.hero {
  position: relative;
  isolation: isolate;
  color: var(--ink);
}

.hero-wall {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, var(--vignette)),
    var(--wall);
}

/* Paper grain over the wall, under the copy. */
.hero-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/art/grain.svg") 0 0 / 220px 220px repeat;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

.hero-copy {
  max-width: 36rem;
}

.hero h1 {
  font-size: var(--fs-h1-letter);
  line-height: 1.1;
}

/* The one hand-drawn underline: a brush stroke (one mask) in mustard. */
.swash {
  position: relative;
  white-space: nowrap;
}

.swash::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -0.08em;
  bottom: -0.02em;
  height: 0.3em;
  background: var(--c-mustard);
  -webkit-mask: url("/art/swash.svg") center / 100% 100% no-repeat;
  mask: url("/art/swash.svg") center / 100% 100% no-repeat;
}

.hero .lede {
  max-width: 32rem;
  margin-top: var(--space-5);
}

/* The call to action: Download and Source, and one line under them. */
.hero-cta {
  margin-top: var(--space-6);
}

.cta-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

/* The framed room. Phones: the frame runs edge to edge and is cropped from
   the left (the drawing's preserveAspectRatio is xMaxYMax slice), so Lantern
   stays about 110 px tall at 390 px. From 620 px it is the whole room, 3:2,
   in an inked frame with a hand-cut corner. */
.hero-scene {
  position: relative;
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-block: var(--edge) solid var(--ink-line);
  background: var(--c-room-wall);
}

@media (min-width: 620px) {
  .hero-scene {
    margin-inline: 0;
    aspect-ratio: 3 / 2;
    border: var(--edge) solid var(--ink-line);
    border-radius: var(--r-ink);
    box-shadow: var(--lift-panel);
  }
}

/* The wallpaper's sparkles (one mask, painted in --star), behind the
   drawing; the paper grain over it. */
.hero-scene::before,
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-scene::before {
  background: var(--star);
  -webkit-mask: url("/art/stars.svg") 0 0 / 148px 148px repeat;
  mask: url("/art/stars.svg") 0 0 / 148px 148px repeat;
}

.hero-scene::after {
  z-index: 1;
  background: url("/art/grain.svg") 0 0 / 220px 220px repeat;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
}

.scene-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* From 900 px: one scene. The sparkle wallpaper and the grain cover the
   whole wall, the copy stands on the left and the room on the right, running
   on to the window's right edge (up to 60rem wide), and the drawing's floor
   spills out of it (overflow visible) under the copy, from edge to edge; the
   wall clips it. The grain lies over the drawing and under the copy. */
@media (min-width: 900px) {
  .hero-wall {
    overflow: clip;
  }

  .hero-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--star);
    -webkit-mask: url("/art/stars.svg") 0 0 / 148px 148px repeat;
    mask: url("/art/stars.svg") 0 0 / 148px 148px repeat;
  }

  .hero-wall::after {
    z-index: 1;
  }

  /* Two rows: the copy, then an empty cell as tall as the floor, so the
     copy always ends above it. The room spans both and stands on the
     wall's bottom edge. */
  .hero-grid {
    z-index: auto;
    /* 38rem: the h1 keeps three lines up to its largest size (1920 px). */
    grid-template-columns: minmax(0, 38rem) minmax(0, 60rem);
    grid-template-rows: 1fr auto;
    gap: var(--space-6) var(--space-8);
    max-width: none;
    padding-top: var(--space-8);
    padding-right: 0;
    padding-bottom: 0;
    padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  }

  /* The floor is the drawing's bottom 120 of 600 units: 2/15 of its width. */
  .hero-grid::after {
    content: "";
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 15 / 2;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    grid-row: 1;
    align-self: center;
    max-width: none;
  }

  .hero-scene {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin: 0;
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .hero-scene::before,
  .hero-scene::after {
    content: none;
  }

  .scene-art {
    position: static;
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: visible;
  }
}

.hero-foot {
  border-top: var(--edge) solid var(--ink-line);
  background: var(--paper);
}

.assurances {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-7);
  margin: 0;
  padding: var(--space-7) 0 var(--space-6);
  list-style: none;
}

@media (min-width: 760px) {
  .assurances {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* h2 by position in the outline (the hero has the page's h1), styled as an
   h3 so the levels read in order. */
.assurances h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--body);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}

.assurances p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- the drawings (DESIGN.md "Drawings") ----------
   Colour classes, the glows and the night-only layers come from the
   generated theme region above. */

.ink-art .t-cover {
  fill: var(--c-cover-ink);
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
}

/* A standing Lantern on an interior page: at least 120 px tall. */
.figure {
  display: block;
  width: 100%;
  height: auto;
}

/* The Detector's motion (hero.js adds .is-animated unless the reader asks
   for reduced motion): it bobs, blinks, waves now and then, and its lines
   boil — three drawings of it cycling at 6 a second, the v2 animations'
   technique. The first drawing is the still frame. */
.det-boil > g + g {
  visibility: hidden;
}

.det-marks {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scene.is-animated .det {
    animation: det-bob 3.2s ease-in-out infinite;
  }
  .hero-scene.is-animated .det-boil > g {
    animation: det-boil 0.5s infinite;
  }
  .hero-scene.is-animated .det-boil > g:nth-child(2) {
    animation-delay: -0.3333s;
  }
  .hero-scene.is-animated .det-boil > g:nth-child(3) {
    animation-delay: -0.1667s;
  }
  .hero-scene.is-animated .det-eyes {
    animation: det-blink 5.2s infinite;
  }
  .hero-scene.is-animated .det-arm {
    animation: det-wave 9s ease-in-out infinite;
  }
  .hero-scene.is-animated .det-marks {
    animation: det-marks 9s infinite;
  }
  .hero-scene.is-animated .room-leaves {
    animation: room-leaves 6s ease-in-out infinite;
  }
  .hero-scene.is-animated .room-light {
    animation: room-light 4s ease-in-out infinite alternate;
  }
  .hero-scene.is-paused *,
  .hero-scene.is-offscreen * {
    animation-play-state: paused !important;
  }
}

@keyframes det-boil {
  0%, 33.3% { visibility: visible; }
  33.4%, 100% { visibility: hidden; }
}

@keyframes det-bob {
  50% { transform: translateY(-3px); }
}

@keyframes det-blink {
  0%, 93%, 100% { transform: none; }
  95% { transform: scaleY(0.1); }
}

/* Hanging arm → raised (−120°), three waves, and down again. */
@keyframes det-wave {
  0%, 52%, 86%, 100% { transform: none; }
  60%, 72% { transform: rotate(-122deg); }
  64%, 76% { transform: rotate(-102deg); }
  68%, 80% { transform: rotate(-128deg); }
}

@keyframes det-marks {
  0%, 60%, 82%, 100% { opacity: 0; }
  62%, 80% { opacity: 1; }
}

@keyframes room-leaves {
  50% { transform: rotate(1.6deg); }
}

@keyframes room-light {
  to { opacity: 0.82; }
}

.room-leaves {
  transform-origin: 46px 545px;
}

/* The pause control: an inked paper slip in the room's top-right corner,
   shown by hero.js only while there is motion to pause (WCAG 2.2.2). */
.motion-toggle {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: var(--edge) solid var(--btn-shadow);
  border-radius: var(--r-ink-sm);
  background: var(--slip);
  color: var(--slip-ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 3px 0 var(--btn-shadow);
}

.motion-toggle[hidden] {
  display: none;
}

/* From 900 px the whole wall is the scene, and the control sits in its
   top-right corner (the grid's; .hero-scene is not positioned there), level
   with the top of the copy and clear of the drawing at every width. */
@media (min-width: 900px) {
  .motion-toggle {
    top: var(--space-8);
    right: var(--gutter);
  }
}

/* Narrow: the icon alone (the name stays for screen readers). */
@media (max-width: 619.98px) {
  .motion-toggle {
    justify-content: center;
    padding: 0;
  }
  .motion-toggle .motion-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.motion-toggle:active {
  transform: translate(1px, 2px);
  box-shadow: var(--lift-press);
}

/* Two bars; a triangle once paused (the button then plays). */
.motion-icon {
  width: 10px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 3px 100% no-repeat;
}

.hero-scene.is-paused .motion-icon {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

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

.section {
  padding: var(--section-pad) 0;
}

.band {
  background: var(--paper-2);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
  }
}

.rail h2 {
  margin-bottom: var(--space-3);
}

.rail .sub {
  margin: 0;
  color: var(--muted);
}

.split-body > :first-child {
  margin-top: 0;
}

.head {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}

.head .sub {
  margin: 0;
  color: var(--muted);
}

/* ---------- what it does: four looping desktops ----------
   Pure CSS (the site's CSP admits no inline script). Each desk is a generic
   Mac: menu bar, one or two windows, a dock. The "picture" is a plain warm
   block, never content (CLAUDE.md: captures come from synthetic fixtures
   only). The cover is the product's own slab and label. Every loop is 12 s
   so the four never sync into a blink. Sizes are container-relative
   (cqw) so the type inside the chat scales with the panel. Inside a desk
   every colour and size is illustration (DESIGN.md), not a token. */

.demos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-5);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

/* A rule between concepts: every one when stacked, the second row on wide. */
.demos li + li {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

@media (min-width: 760px) {
  .demos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demos li + li {
    padding-top: 0;
    border-top: 0;
  }

  .demos li:nth-child(n + 3) {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
  }
}

.demos h3 {
  margin: 0 0 var(--space-4);
  text-align: center;
}

.demos p {
  margin: var(--space-4) 0 0;
  color: var(--ink-2);
}

/* The loops run only while on screen (demos.js adds .js to <html> and
   .is-live to a desk in view). Without the script they simply run. Leaving
   the viewport resets a loop, so it restarts from the top on return. */
.js .demo:not(.is-live) * {
  animation: none !important;
}

.demo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: var(--edge) solid var(--ink-line);
  border-radius: var(--r-ink);
  box-shadow: var(--lift-panel);
  background: radial-gradient(120% 90% at 30% 10%, #2c3340, #141820);
  container-type: inline-size;
  user-select: none;
}

.demo-menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 7%;
  display: flex;
  align-items: center;
  gap: 6%;
  padding: 0 3%;
  background: rgba(255, 255, 255, 0.14);
}

.demo-menubar i {
  display: block;
  height: 34%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.75);
}

.demo-menubar i:nth-child(2) { width: 8%; background: #fff; }
.demo-menubar i:nth-child(3) { width: 5%; }
.demo-menubar i:nth-child(4) { width: 6%; }
.demo-menubar i:nth-child(5) { width: 5%; }

/* The apple: one path in index.html (#demo-apple), sized like the menu
   bar's glyph on a real Mac, about 60% of the bar's height and centred in
   it. The old CSS disc-and-leaf read as a circle with a notch, and its leaf
   was clipped by the top of the desk. */
.demo-sprite {
  position: absolute;
}

.demo-apple {
  flex: none;
  width: 2.1cqw;
  height: 2.5cqw;
  margin-right: -1%;
  fill: #fff;
}

/* The clock at the far right, dimmer than the menus. */
.demo-menubar .demo-clock {
  width: 6%;
  margin-left: -3.5%;
  background: rgba(255, 255, 255, 0.6);
}

/* The SentryScreen menu bar item: the mark, lit protected green. */
.demo-status {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 22%;
  border: 0.32cqw solid #fff;
  box-sizing: border-box;
  background: #30d158;
  box-shadow: 0 0 0.6cqw rgba(48, 209, 88, 0.6);
}

/* The dock floats above windows, as on a Mac, and is sized by its icons
   (cqw), so the icons sit inside the shelf at every width; with a fixed
   height and flex icons they were taller than the shelf. */
.demo-dock {
  position: absolute;
  z-index: 2;
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8cqw;
  padding: 0.65cqw 0.9cqw;
  border-radius: 1.7cqw;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.demo-dock i {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 22%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45));
}

.demo-dock i:nth-child(2) { background: linear-gradient(160deg, #6aa8ff, #2f6fe0); }
.demo-dock i:nth-child(4) { background: linear-gradient(160deg, #ffd36a, #e0a02f); }
.demo-dock i:nth-child(6) { background: linear-gradient(160deg, #7ee38a, #2fa54a); }

.demo-win {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.demo-titlebar {
  height: 9%;
  display: flex;
  align-items: center;
  gap: 1.5%;
  padding: 0 2.5%;
  background: #e9e9ec;
}

.demo-titlebar b {
  width: 2.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}

.demo-titlebar b + b { background: #febc2e; }
.demo-titlebar b + b + b { background: #28c840; }

.demo-titlebar i {
  flex: 1;
  max-width: 60%;
  height: 40%;
  margin-left: 4%;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
}

.demo-view {
  position: absolute;
  inset: 9% 0 0 0;
  overflow: hidden;
}

.demo-page {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 5% 7%;
}

.demo-bar {
  height: 1.4cqw;
  margin: 0 0 2.6%;
  border-radius: 2px;
  background: #d9dadd;
}

.demo-bar.h { height: 2.4cqw; width: 55%; margin-bottom: 4%; background: #b5b8bf; }
.demo-bar.s { width: 80%; }
.demo-bar.m { width: 92%; }

.demo-tile {
  margin: 0 0 4%;
  border-radius: 5px;
  background: #c9ccd2;
}

.demo-tile.wide { width: 100%; aspect-ratio: 16 / 7; }

.demo-row {
  display: flex;
  gap: 4%;
  margin: 0 0 4%;
}

.demo-row .demo-tile { flex: 1; aspect-ratio: 1; margin: 0; }

.demo-tile.flag,
.demo-bubble.img {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #c79a78, #a8775a);
}

.demo-cover,
.demo-curtain {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0f12;
  color: #e7e4dc;
  font-family: var(--body);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  transform-origin: top center;
  opacity: 0;
}

.demo-curtain {
  z-index: 2;
  font-size: 3.4cqw;
}

.demo-cover::after,
.demo-curtain::after {
  content: "Content blocked";
}

/* Every cover goes on in one step, fully opaque, the way the app's does:
   a cover that faded in let the picture show through it for a quarter of a
   second, against the promise that nothing shows through. The picture is
   on screen, uncovered, for about 0.2-0.3 s first (the time to notice it).

   A: scroll, cover lands, the page keeps scrolling with the cover on it,
   then scrolls back to the top so the loop joins without a jump. */
.demo-a .demo-win { left: 9%; top: 12%; width: 72%; height: 72%; }
.demo-a .demo-page { animation: demo-a-scroll 12s ease-in-out infinite; }
.demo-a .demo-cover { animation: demo-a-cover 12s infinite; }

@keyframes demo-a-scroll {
  /* Measured 2026-09-08 at 620 px wide: page 1109 px, view 210 px, picture at
     483 px. -40% centres the picture; -62% has scrolled it off the top.
     The picture's top edge enters the view at about 23% of the loop. */
  0%, 12% { transform: translateY(0); }
  32%, 48% { transform: translateY(-40%); }
  66%, 80% { transform: translateY(-62%); }
  96%, 100% { transform: translateY(0); }
}

@keyframes demo-a-cover {
  0%, 25% { opacity: 0; }
  25.2%, 100% { opacity: 1; }
}

/* B: the picture loads into a grey placeholder, the cover lands, then the
   pointer drags the window by its title bar and the cover rides along. The
   window ends where it started and the cover lifts only after the picture
   has gone back to grey, so the loop joins without a jump and the picture
   is never shown uncovered except the moment it arrives. */
.demo-b .demo-win { left: 6%; top: 12%; width: 58%; height: 64%; animation: demo-b-drag 12s ease-in-out infinite; }
/* The resting state (off screen, animations off) is the loop's first frame:
   the placeholder, not the picture. */
.demo-b .demo-tile.flag { box-shadow: inset 0 0 0 100cqw #c9ccd2; animation: demo-b-load 12s infinite; }
.demo-b .demo-cover { animation: demo-b-cover 12s infinite; }
.demo-b .demo-cursor { left: 46%; top: 3.5%; animation: demo-b-cursor 12s ease-in-out infinite; }

@keyframes demo-b-drag {
  0%, 24% { transform: translate(0, 0); }
  42%, 50% { transform: translate(52%, 8%); }
  66% { transform: translate(20%, 24%); }
  82%, 100% { transform: translate(0, 0); }
}

/* The placeholder is an inset shadow painted over the picture. */
@keyframes demo-b-load {
  0%, 6% { box-shadow: inset 0 0 0 100cqw #c9ccd2; }
  7.5%, 92% { box-shadow: inset 0 0 0 100cqw rgba(201, 204, 210, 0); }
  93.5%, 100% { box-shadow: inset 0 0 0 100cqw #c9ccd2; }
}

@keyframes demo-b-cover {
  0%, 9% { opacity: 0; }
  9.2%, 95% { opacity: 1; }
  95.2%, 100% { opacity: 0; }
}

/* The pointer comes up from the page onto the title bar, presses, holds
   through the drag (it rides with the window), releases and leaves. */
@keyframes demo-b-cursor {
  0%, 14% { opacity: 0; transform: translate(60%, 260%); }
  17% { opacity: 1; }
  21% { opacity: 1; transform: none; }
  23%, 82% { opacity: 1; transform: scale(0.85); }
  84% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translate(40%, 160%); }
}

/* C: a chat. Messages arrive in turn; the picture is covered as it lands. */
.demo-c .demo-win.browser { left: 4%; top: 12%; width: 50%; height: 70%; }
/* The chat window stops short of the dock, and its title bar is tall
   enough to hold the avatar and the name bar under it (the name bar used to
   hang into the thread, under the first message). */
.demo-c .demo-win.chat { left: 52%; top: 9%; width: 44%; height: 76%; background: #f3f4f7; }
.demo-c .chat .demo-titlebar { position: relative; height: 18%; align-items: flex-start; padding-top: 1.6cqw; background: #e3e4e8; }
.demo-c .chat .demo-view { inset: 18% 0 0 0; }

/* iMessage chrome: the contact's avatar top centre, the composer at the foot. */
.demo-avatar {
  position: absolute;
  left: 50%;
  top: 1cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(160deg, #b8bcc4, #8f949c);
}

.demo-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 7cqw;
  height: 1cqw;
  margin-top: 0.6cqw;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.16);
}

.demo-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.6cqw 3cqw;
  background: #f3f4f7;
}

.demo-composer .plus,
.demo-composer .emoji {
  flex: none;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: #d6d9df;
  position: relative;
}

.demo-composer .plus::before,
.demo-composer .plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 55%;
  height: 12%;
  transform: translate(-50%, -50%);
  background: #6b7079;
}

.demo-composer .plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.demo-composer .emoji {
  position: absolute;
  right: 4.4cqw;
  background: none;
  border: 0.35cqw solid #9a9fa8;
  box-sizing: border-box;
}

.demo-composer .emoji::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 22%;
  height: 34%;
  border: 0.3cqw solid #9a9fa8;
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-sizing: border-box;
}

.demo-composer .demo-field {
  flex: 1;
  height: 4.2cqw;
  border-radius: 2.1cqw;
  border: 0.3cqw solid #cfd3da;
  background: #fff;
  box-sizing: border-box;
}

.demo-thread {
  position: absolute;
  inset: 0 0 8cqw 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2.5%;
  padding: 3% 5% 2%;
}

/* One line each at every width (nowrap): at 390 px the first message
   wrapped to two lines and pushed the thread up under the title bar. */
.demo-bubble {
  flex-shrink: 0;
  max-width: 82%;
  padding: 1.4cqw 2.4cqw;
  border-radius: 2.4cqw;
  background: #dfe2e8;
  color: #1a1c20;
  font-family: var(--body);
  font-size: 2.1cqw;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(30%) scale(0.9);
  transform-origin: bottom left;
}

.demo-bubble.me {
  align-self: flex-end;
  background: #2f6fe0;
  color: #fff;
  transform-origin: bottom right;
}

.demo-bubble.img .demo-cover {
  font-size: 1.5cqw;
}

.demo-bubble.img {
  width: 35%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: 2.4cqw;
}

.demo-c .m1 { animation: demo-c-m1 12s infinite; }
.demo-c .m2 { animation: demo-c-m2 12s infinite; }
.demo-c .m3 { animation: demo-c-m3 12s infinite; }
.demo-c .m4 { animation: demo-c-m4 12s infinite; }
.demo-c .demo-cover { animation: demo-c-cover 12s infinite; }

/* One clock for the whole thread, so every bubble clears together at the
   end of the loop and the next loop starts on an empty thread. */
@keyframes demo-c-m1 {
  0%, 6% { opacity: 0; transform: translateY(30%) scale(0.9); }
  9%, 88% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

@keyframes demo-c-m2 {
  0%, 20% { opacity: 0; transform: translateY(30%) scale(0.9); }
  23%, 88% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

@keyframes demo-c-m3 {
  0%, 30% { opacity: 0; transform: translateY(30%) scale(0.9); }
  33%, 88% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

@keyframes demo-c-m4 {
  0%, 52% { opacity: 0; transform: translateY(30%) scale(0.9); }
  55%, 88% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

@keyframes demo-c-cover {
  0%, 33% { opacity: 0; }
  33.2%, 100% { opacity: 1; }
}

/* D: a region cover that stays up long enough becomes a whole-window cover
   (below the title bar, so the window can still be closed). The loop ends
   with the pointer closing the window. */
/* At rest (off screen) the window is closed, as at the loop's start. */
.demo-d .demo-win { left: 9%; top: 12%; width: 72%; height: 72%; opacity: 0; animation: demo-d-win 12s infinite; }
.demo-d .demo-cover { animation: demo-d-cover 12s infinite; }
.demo-d .demo-curtain {
  /* Below the title bar; 1 px past the window's clipped edges so no sliver
     of the page shows at the rounded bottom corners. */
  inset: 9% -1px -1px -1px;
  transform-origin: top center;
  animation: demo-d-curtain 12s infinite;
}

/* The Mac's arrow: black with a white rim, so it reads on a light title bar
   and on a black cover alike. The shadow sits on the box because clip-path
   would clip a shadow drawn on the arrow itself (it did: the old white-only
   arrow had no visible edge on a title bar). */
.demo-cursor {
  position: absolute;
  z-index: 3;
  width: 3.2cqw;
  height: 4.4cqw;
  filter: drop-shadow(0 0.15cqw 0.3cqw rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform-origin: 0 0;
}

.demo-cursor::before,
.demo-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 0, 0 82%, 26% 66%, 44% 100%, 58% 94%, 40% 60%, 68% 60%);
}

.demo-cursor::after {
  inset: 11% 22% 8% 9%;
  background: #111;
}

.demo-d .demo-cursor { left: 70%; top: 78%; animation: demo-d-cursor 12s infinite; }

@keyframes demo-d-win {
  0% { opacity: 0; transform: scale(0.98); }
  3%, 91% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: scale(0.96); }
}

@keyframes demo-d-cover {
  0%, 5% { opacity: 0; }
  5.2%, 100% { opacity: 1; }
}

@keyframes demo-d-curtain {
  0%, 38% { opacity: 0; transform: translateY(-4%) scaleY(0.96); }
  40% { opacity: 1; transform: translateY(1%) scaleY(1.02); }
  42%, 100% { opacity: 1; transform: none; }
}

/* The red close button: the window is at left 9% / top 12%, 72% square;
   the button starts 2.5% of its width in and is 2.6% of its width across
   (10.8-12.7% of the desk), centred in a title bar 9% of its height tall
   (15.2% down). The tip lands at 11.5% / 14.9%, on the button, not on its
   left edge as before. */
@keyframes demo-d-cursor {
  0%, 72% { opacity: 0; left: 70%; top: 78%; transform: none; }
  76% { opacity: 1; left: 70%; top: 78%; }
  86%, 89% { opacity: 1; left: 11.5%; top: 14.9%; transform: none; }
  90% { transform: scale(0.85); }
  91%, 96% { opacity: 1; left: 11.5%; top: 14.9%; transform: none; }
  100% { opacity: 0; left: 11.5%; top: 14.9%; }
}

@media (prefers-reduced-motion: reduce) {
  .demo *,
  .demo *::after {
    animation: none !important;
  }
  .demo-cover { opacity: 1; }
  .demo-a .demo-page { transform: translateY(-40%); }
  .demo-bubble { opacity: 1; transform: none; }
  .demo-d .demo-curtain { opacity: 1; }
  .demo-d .demo-win { opacity: 1; }
}

/* After two cycles on screen demos.js marks a desk .is-done: its loop stops
   on the same covered frame the reduced-motion rule shows (WCAG 2.2.2: moving
   content does not run forever). */
.demo.is-done *,
.demo.is-done *::after {
  animation: none !important;
}
.demo.is-done .demo-cover { opacity: 1; }
.demo-a.is-done .demo-page { transform: translateY(-40%); }
.demo.is-done .demo-bubble { opacity: 1; transform: none; }
.demo-d.is-done .demo-curtain { opacity: 1; }
.demo-d.is-done .demo-win { opacity: 1; }

/* ---------- why we built it ---------- */

.why-list,
.included {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.why-list li,
.included li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  color: var(--ink-2);
}

/* List markers are grey: the accent is kept for eyebrows, links and the
   primary button (DESIGN.md "Colour"). */
.why-list li::before,
.included li::before {
  content: "";
  position: absolute;
  left: var(--space-1);
  top: 1.05em;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--r-xs);
  background: var(--muted);
}

.why-subhead {
  margin: var(--space-6) 0 var(--space-2);
}

/* ---------- disclosures: setup steps and questions ----------
   One marker for both: a "+" that turns 45° when open. The whole summary
   row is the tap target (at least 44 px); the opened text fades in. */

.steps summary,
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-4) var(--space-7) var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

.steps summary::-webkit-details-marker,
.faq summary::-webkit-details-marker {
  display: none;
}

.steps summary::after,
.faq summary::after {
  content: "+";
  position: absolute;
  right: var(--space-1);
  top: 50%;
  margin-top: -0.5em;
  font-family: var(--display);
  font-size: var(--fs-glyph);
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur-fast) var(--ease);
}

.steps details[open] > summary::after,
.faq details[open] > summary::after {
  transform: rotate(45deg);
}

.steps summary:hover,
.faq summary:hover,
.steps summary:hover h3 {
  color: var(--link);
}

.steps summary:hover::after,
.faq summary:hover::after {
  color: var(--link);
}

.steps details[open] > p,
.faq details[open] > p {
  animation: reveal var(--dur) var(--ease);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ---------- setup: a real sequence, so it is numbered ---------- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: 0 0 0 var(--space-8);
  border-top: 1px solid var(--line);
  counter-increment: step;
}

.steps li:last-child {
  border-bottom: 1px solid var(--line);
}

/* The step number: one style on the site, the server's pages and the
   emails (DESIGN.md "Step numbers"). 1.75rem is 28 px at the default text
   size and grows with it. */
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--space-4);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  font-family: var(--display);
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--ink-2);
}

.steps h3 {
  margin: 0;
}

.steps p {
  margin: 0 0 var(--space-4);
  color: var(--ink-2);
}

/* The same numbered list with every step shown (Support, "How to check a
   Mac"): a parent follows it top to bottom, so nothing is folded away. The
   heading row is as tall as the number, so the two line up. */
.steps-open li {
  padding-top: var(--space-4);
}

.steps-open h3 {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  margin-bottom: var(--space-2);
}

/* ---------- honest limits ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-2 li {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.grid-2 p {
  margin: 0;
  color: var(--ink-2);
}

/* ---------- download: two cards ---------- */

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 620px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A plan is an inked card: the paper slip of the buttons, one size up. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--edge) solid var(--control-border);
  border-radius: var(--r-ink);
  background: var(--paper);
  box-shadow: var(--lift-panel);
}

.plan h3 {
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-note {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-base);
  color: var(--muted);
}

.plan .btn {
  margin-top: auto;
}

.plan-best {
  border-color: var(--plan-best-border);
  background: var(--cover);
  color: var(--cover-ink);
}

.plan-best h3,
.plan-best .plan-note {
  color: var(--cover-muted);
}

.included {
  margin: var(--space-6) 0 0;
}

/* ---------- questions ---------- */

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  font-weight: 700;
  line-height: 1.35;
}

.faq p {
  margin: 0 0 var(--space-5);
  color: var(--ink-2);
}

/* ---------- footer: the cover slab ---------- */

.site-footer {
  margin-top: auto;
  padding: var(--space-8) 0 var(--space-7);
  border-top: var(--edge) solid var(--ink-line);
  background: var(--cover);
  color: var(--cover-ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
  }
}

.site-footer .wordmark {
  color: var(--cover-ink);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--cover-ink);
  font-weight: 600;
}

.company {
  margin: 0;
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.6;
  color: var(--cover-muted);
}

.company span {
  display: block;
}

/* ---------- interior pages: support, 404 ----------
   A short wall at the top, as the home page's hero: the page's h1 on the
   wall with the sparkle wallpaper, Lantern beside it where the page has him. */

.page-head {
  position: relative;
  border-bottom: var(--edge) solid var(--ink-line);
  background: var(--wall);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--star);
  -webkit-mask: url("/art/stars.svg") 0 0 / 148px 148px repeat;
  mask: url("/art/stars.svg") 0 0 / 148px 148px repeat;
}

.page-head .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--space-5);
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
}

.page-head h1 {
  font-size: var(--fs-h1-page);
}

.page-head .lede {
  margin-bottom: 0;
}

/* Lantern stands on the head's bottom line. */
.page-figure {
  width: 11rem;
  justify-self: start;
  margin-bottom: calc(-1 * var(--space-7) - var(--edge));
}

@media (min-width: 620px) {
  .page-head .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-figure {
    width: 15rem;
  }
}

/* The 404's one way out. */
.page-head .btn-row {
  margin-top: var(--space-5);
}

/* Support: help, then two cards. */
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .support-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-9);
  }
}

.support-grid h2 {
  font-size: var(--fs-h2-sm);
}

.cards {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--space-5);
  border: var(--edge) solid var(--control-border);
  border-radius: var(--r-ink);
  background: var(--paper);
  box-shadow: var(--lift-panel);
}

.card h3 {
  margin-bottom: var(--space-2);
  font-family: var(--display);
}

.card p {
  margin: 0 0 var(--space-4);
  color: var(--ink-2);
}

.card .btn {
  width: 100%;
}

/* The support address: assembled by support.js after "Show email address",
   spelled out without script. Plain text, no mailto (2026-09-27). */
.email-reveal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.email-address {
  font-weight: 700;
  font-size: var(--fs-lead);
  user-select: all;
}

/* ---------- the reading page: privacy ----
   The calm legal variant: the same paper and ink, a lettered h1 and nothing
   else drawn; sans h2 over a rule, a 40rem measure and open leading. */

.prose {
  padding: clamp(var(--space-8), 6vw, var(--space-9)) 0 var(--section-pad);
}

.prose .wrap {
  max-width: 48rem;
}

.prose h1 {
  font-size: var(--fs-h1-page);
  margin-bottom: var(--space-4);
}

.prose h2 {
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--line-strong);
  font-family: var(--body);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.prose h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-base);
}

.prose p,
.prose li,
.prose dd {
  line-height: 1.7;
}

.prose p,
.prose ul,
.prose ol,
.prose .lede,
.prose .callout,
.prose .retention,
.prose address {
  max-width: var(--measure-legal);
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose .lede {
  margin-bottom: var(--space-6);
}

.prose a {
  overflow-wrap: anywhere;
}

.prose address {
  font-style: normal;
}

.prose .inventory {
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  counter-reset: field;
}

.prose .inventory li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  counter-increment: field;
}

.prose .inventory li::before {
  content: counter(field, decimal-leading-zero);
  color: var(--muted);
}

.prose .inventory li:last-child {
  border-bottom: 1px solid var(--line);
}

.meta {
  margin-top: calc(-1 * var(--space-2));
  font-size: var(--fs-sm);
  color: var(--muted);
}

.callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-soft);
}

.callout p:last-child {
  margin-bottom: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose tr:last-child td {
  border-bottom: 1px solid var(--line);
}

/* Inline code on a reading page: the system mono,
   allowed to break anywhere so a 60-character path never scrolls a phone. */
.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.retention {
  margin: var(--space-4) 0 var(--space-5);
}

.retention dt {
  margin-top: var(--space-4);
  font-weight: 700;
}

.retention dt:first-of-type {
  margin-top: 0;
}

.retention dd {
  margin: var(--space-1) 0 0;
  color: var(--ink-2);
}

.companies dd + dd {
  margin-top: var(--space-2);
}

/* ---------- reduced motion: every interface transition off (DESIGN.md
   "Motion"); the demo desks and the hero have their own rules above ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav-menu summary,
  .steps summary,
  .faq summary,
  .steps summary::after,
  .faq summary::after,
  .theme-switch::after {
    transition: none;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }

  .nav-menu[open] .nav-panel,
  .steps details[open] > p,
  .faq details[open] > p {
    animation: none;
  }
}

/* The 404's list of pages. */
.page-list {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
}

.page-list li {
  margin-bottom: var(--space-2);
}

.support-write {
  margin-top: var(--space-8);
}

/* Support: "How to check a Mac". */
.check-mac {
  max-width: var(--measure-legal);
}

.check-mac h2 {
  font-size: var(--fs-h2-sm);
}