/* Everett marketing site — spec 0110 § 4.2.
   The one stylesheet. Tokens copied from the design system's
   colors_and_type.css / dimension.css; the inline styles of the five .dc.html
   prototypes become the classes below, one per distinct declaration set.

   This deliberately does NOT load static/css/design.css. The marketing site
   shares no component with the app, and coupling them means a reader-CSS
   change re-renders the home page (§ 4.2).

   Zero third-party requests: the fonts are self-hosted beside this file, which
   is what lets /privacy say "we don't track you across other sites" as a fact
   about the markup rather than a promise.

   Caddy serves /_site/* as immutable for a year, so a change to this file
   ships under a new name (the date), with every page's <link> updated. Edited
   in place, it reaches no one who has visited before. */

/* ---------- Fonts (self-hosted; § 4.2 item 3) ---------- */
/* Two variable files and one static italic. Google serves ONE file per family
   across every weight you ask for -- requesting 400 and 500 separately returns
   the same bytes twice -- so these declare a weight RANGE against one file.
   The italic is the static 400 (25 KB) rather than the variable italic (48 KB):
   the pages use one italic weight, so the axis would be dead payload. */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #fbfaf7;
  --paper-raised: #ffffff;
  --paper-sunken: #f4f2ed;
  --paper-edge: #ebe8e0;

  --ink: #1a1a1a;
  --ink-soft: #3d3a36;
  --ink-muted: #6b6763;
  --ink-faint: #b0adae;
  --ink-ghost: #d9d5ce;

  --highlight: #ffd200;
  --highlight-wash: rgba(255, 210, 0, 0.38);
  --highlight-faint: rgba(255, 210, 0, 0.16);

  --font-serif: "EB Garamond", "Garamond", "Georgia", ui-serif, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-reader: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-image: 1px;
  --radius-sm: 6px;
  --radius-md: 8px;

  --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.04);

  --border-hairline: 1px solid var(--paper-edge);

  --measure: 1180px;
  --measure-read: 760px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink-soft);
  text-decoration-color: var(--ink-ghost);
  text-underline-offset: 3px;
}
a:hover { color: var(--ink); background: var(--highlight-faint); }

img { max-width: 100%; }

/* The highlighter wash, drawn as a hard-edged band. Rule 2's one accent used
   the way rule 2 wants it; the gradient is the mechanism, not the look
   (§ 4.3). */
.mark { background: linear-gradient(to top, var(--highlight-wash) 0 40%, transparent 40%); padding: 0 0.08em; }
.mark-hi { background: linear-gradient(to top, var(--highlight-wash) 0 46%, transparent 46%); }
.mark-flat { background: var(--highlight-wash); }

/* ---------- Ported classes (generated from the design; see § 4.2) ---------- */
.article { max-width: 760px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); }
.b { font-weight: 600; }
.band { border-top: var(--border-hairline); background: var(--paper); }
.btn { text-decoration: none; background: var(--ink); color: var(--paper-raised); padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.btn.btn-lg { text-decoration: none; font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; background: var(--ink); color: var(--paper-raised); padding: 13px 24px; border-radius: var(--radius-sm); }
.btn.btn-lg.btn--2 { text-align: center; }
.btn.btn-sm { text-decoration: none; background: var(--ink); color: var(--paper-raised); padding: 8px 14px; white-space: nowrap; border-radius: var(--radius-sm); font-weight: 600; }
.byline { display: flex; align-items: center; gap: var(--space-4); }
.code { font-family: var(--font-mono); font-size: 0.9em; }
.cols { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-9); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-7) var(--space-8); align-items: start; }
.cta-note { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--ink-muted); text-align: center; }
.cta-stack { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; width: fit-content; }
.cta-stack.cta-stack--1 { margin-top: var(--space-3); }
.cta-stack.cta-stack--2 { margin-top: var(--space-6); }
.cta-stack.cta-stack--3 { margin-top: var(--space-7); }
.figure.figure--1 { margin: 0; }
.figure.figure--2 { margin: var(--space-7) 0 0; }
.flow-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.flow-4.flow-4--1 { margin-top: var(--space-5); }
.flow-4.flow-4--2 { max-width: 62ch; margin-top: var(--space-6); }
.flow-5 { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.flow-7 { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); }
.flow-7-5 { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.foot-blurb { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-muted); margin: var(--space-3) 0 0; max-width: 40ch; }
.foot-brand { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; color: var(--ink); }
.foot-col { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); }
.foot-grid { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6); display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-7); }
.foot-h { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); margin-bottom: var(--space-1); }
.foot-legal { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-2); }
.foot-mail { color: var(--ink-soft); }
.foot-note { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); }
.foot-note-p { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.frame { max-width: 760px; background: var(--paper-sunken); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3); }
.frame.frame-full { background: var(--paper-sunken); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3); }
.frame-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-3); }
.frame-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); }
.frame-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); }
.h-col { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl); color: var(--ink-soft); margin: 0 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: var(--border-hairline); }
.h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--ink-soft); margin: 0; max-width: 24ch; text-wrap: pretty; }
.h1-page { font-family: var(--font-serif); font-weight: 500; color: var(--ink-soft); margin: 0; }
.h1-page.h1-page--1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.12; letter-spacing: var(--tracking-snug); }
.h1-page.h1-page--2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.12; letter-spacing: var(--tracking-snug); text-wrap: pretty; }
.h1-page.h1-page--3 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.1; letter-spacing: var(--tracking-tight); max-width: 24ch; }
.h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: var(--leading-snug); color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.h2.h2--2 { max-width: 30ch; }
.h2.h2-close { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); color: var(--ink-soft); margin: 0; white-space: nowrap; }
.h2.h2-wide { font-family: var(--font-serif); font-weight: 500; line-height: var(--leading-snug); color: var(--ink-soft); }
.h2.h2-wide.h2--1 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 var(--space-7); }
.h2.h2-wide.h2--2 { font-size: clamp(30px, 3.4vw, 42px); margin: 0; }
.h2-rule { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: var(--leading-snug); color: var(--ink-soft); margin: var(--space-8) 0 0; padding-bottom: var(--space-3); border-bottom: var(--border-hairline); }
.h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: var(--leading-snug); color: var(--ink-soft); margin: var(--space-8) 0 0; }
.hero-sub { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: var(--leading-snug); color: var(--ink-muted); margin: var(--space-5) 0 0; max-width: 40ch; text-wrap: pretty; }
/* Grows into the column beside the text and sits centred in it (owner,
   2026-10-28); 280px is its floor, not its size. */
.illus { display: block; flex: 1 1 280px; width: auto; max-width: 440px; height: auto; margin: 0 auto; align-self: center; }
.lede { font-family: var(--font-serif); font-size: clamp(19px, 2vw, 24px); line-height: var(--leading-normal); color: var(--ink); margin: var(--space-6) 0 0; max-width: 60ch; text-wrap: pretty; }
.lede.lede-sm { font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 22px); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.li { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); }
.li-sub { line-height: var(--leading-reader); }
.list { margin: var(--space-4) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-3); }
.list-num { margin: var(--space-5) 0 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: var(--space-4); }
.list-sub { margin: var(--space-3) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.mark { background: linear-gradient(to top, var(--highlight-wash) 0 40%, transparent 40%); padding: 0 0.08em; }
.mark.mark-hi { background: linear-gradient(to top, var(--highlight-wash) 0 46%, transparent 46%); }
.mark-flat { background: var(--highlight-wash); }
.meta { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-4) 0 0; }
.nav { max-width: 1180px; margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); }
.nav-link { text-decoration: none; color: var(--ink-muted); }
.nav-link.is-current { text-decoration: none; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); font-family: var(--font-sans); font-size: var(--text-sm); }
.p { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: 0; }
.p.byline-p { font-family: var(--font-serif); font-size: 20px; line-height: var(--leading-reader); color: var(--ink); margin: 0; }
.p.p-base { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.p.p-base.p-narrow { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); margin: 0; max-width: 54ch; }
.p.p-lg { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.p.p-muted { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink-muted); margin: 0; }
.p.p-signoff { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-8) 0 0; padding-top: var(--space-7); border-top: var(--border-hairline); }
.p.p-t4 { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-4) 0 0; }
.p.p-t5 { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-5) 0 0; }
.p.p-t5.p-measure { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-5) 0 0; }
.p.p-t5.p-measure.p--1 { max-width: 60ch; }
.p.p-t5.p-measure.p--2 { max-width: 64ch; }
.p-flow { max-width: 64ch; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.page { background: var(--paper); color: var(--ink); font-family: var(--font-serif); }
.portrait { display: block; width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: var(--border-hairline); }
.q { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-2); }
.qa { display: flex; flex-direction: column; gap: var(--space-6); }
.shot { display: block; width: 100%; height: auto; border: var(--border-hairline); border-radius: var(--radius-image); }
.shot.shot-raised { display: block; width: 100%; height: auto; border: var(--border-hairline); border-radius: var(--radius-image); background: var(--paper-raised); }
.sign-off { margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border-hairline); display: flex; flex-direction: column; gap: var(--space-5); }
.site-foot { border-top: var(--border-hairline); background: var(--paper-sunken); }
.site-head { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: var(--border-hairline); }
.split { max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6); display: flex; flex-wrap: wrap-reverse; gap: var(--space-7); align-items: flex-end; }
.split-text { flex: 1 1 420px; min-width: 0; }
.step { background: var(--paper-raised); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); }
.step-n { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--ink-faint); margin-bottom: var(--space-3); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.tool { display: flex; flex-direction: column; gap: var(--space-3); }
.tool-h { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--ink); margin: var(--space-2) 0 0; }
.tool-p { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-muted); margin: 0; }
.tool-shot { aspect-ratio: 4 / 3; border: var(--border-hairline); border-radius: var(--radius-image); background: var(--paper-sunken); overflow: hidden; }
.tool-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tools { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-7) var(--space-6); }
.wordmark { text-decoration: none; font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-snug); color: var(--ink); }
.wrap { max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6); }
.wrap.wrap-hero { background: var(--paper); max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); }

/* ---------- The nav: one sticky header, two layouts ----------
   Both layouts are in the markup and CSS chooses. The header must be a direct
   child of .page: `position: sticky` sticks only within its parent, and the
   first port wrapped each layout in its own div, which made it scroll away. */
.nav.nav-narrow { display: none; max-width: none; padding: var(--space-2) var(--space-5); align-items: center; gap: var(--space-3); }
.narrow-start { display: flex; align-items: center; gap: var(--space-2); }
.narrow-end { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); }
.narrow-end .nav-link { white-space: nowrap; padding: 12px 0; }
.menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: var(--border-hairline); background: var(--paper-sunken); color: var(--ink-muted); border-radius: var(--radius-sm); cursor: pointer; }
.menu-btn:hover { background: var(--paper-edge); color: var(--ink); }
.menu-btn svg { transition: transform 120ms ease; }
.site-head:has(.sheet:popover-open) .menu-btn svg { transform: rotate(180deg); }

/* The phone menu: a bottom sheet. A native popover, not the prototype's
   script -- the browser opens it from `popovertarget`, closes it on Escape or a
   tap outside, and sets aria-expanded. Never give .sheet a `display`: the UA's
   `[popover]:not(:popover-open) { display: none }` is what keeps it shut. */
.sheet { inset: auto 0 0; width: auto; max-width: none; height: auto; margin: 0; border: 0; background: var(--paper-raised); color: var(--ink); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4) var(--space-6); font-family: var(--font-sans); font-size: var(--text-md); }
.sheet::backdrop { background: rgba(26, 26, 26, 0.3); }
.sheet-handle { display: block; width: 40px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--paper-edge); margin: 0 auto var(--space-4); cursor: pointer; }
.sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.sheet-link { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); }
.sheet-link:hover, .sheet-link.is-current { color: var(--ink); background: var(--paper-sunken); }
.sheet-link.is-current::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sheet-icon { display: flex; color: var(--ink-muted); }
.sheet-label { flex: 1; }

/* ---------- Responsive: the media query that replaces the prototype's JS ----------
   The design switches headers with a DCLogic resize listener at 720px. § 4.2
   item 4 forbids shipping that, so both variants are in the markup and CSS
   chooses -- the pattern the app's card tabs already use. */
@media (min-width: 720px) {
  .sheet { display: none; }
}
/* The design's phone nav is 12px wider than a 320px screen, which scrolls the
   whole page sideways. Tighten its gutters there only. */
@media (max-width: 359px) {
  .nav.nav-narrow { padding-left: var(--space-4); padding-right: var(--space-4); }
  .narrow-end { gap: var(--space-3); }
}
@media (max-width: 719px) {
  .nav.nav-wide { display: none; }
  .nav.nav-narrow { display: flex; }
  /* Home v2: below 720px the illustration spans the column, above the text. */
  .illus { width: 100%; }
  /* The design's measures are set in `ch`, which is wider than a phone: the
     hero's 24ch at the clamp's 38px floor is ~410px against 326px of content
     box, so "honest and original" ran off the right edge. The prototypes were
     only ever viewed wide. Cap every measure to the column at narrow widths --
     the desktop design is untouched, and the page stops scrolling sideways. */
  /* These override GENERATED rules, some of which are compound selectors like
     `.h2.h2-close` (two classes). A single-class override loses on specificity
     and fails silently -- which is exactly what happened the first time. Match
     the compound form rather than reaching for !important. */
  .h1, .h1-page, .h1-page--1, .h1-page--2, .h1-page--3,
  .h2, .h2.h2-wide, .h2.h2-close, .hero-sub, .lede, .p-flow, .p-flow--1, .p-flow--2,
  .foot-blurb, .p.p-narrow, .p.p-base.p-narrow { max-width: 100%; }
  /* The closing heading is `white-space: nowrap` in the design, which keeps
     "Start with the last thing you read." on one line -- deliberate at desktop
     and fatal on a phone: one unbreakable 52px line is ~600px wide, so the
     DOCUMENT went wider than the viewport and every section on the page was
     clipped, not just this heading. */
  .h2.h2-close { white-space: normal; }
  /* The real cause of horizontal scroll on a phone, found by measuring rather
     than by reading: the footer's tracks are `minmax(240px, 1.4fr)` plus
     `repeat(auto-fit, minmax(140px, 1fr))`, so its MINIMUM is 380px against a
     326px content box and the whole document went to 460px. Every heading
     looked clipped, which sent me hunting for the wrong thing. One column on a
     phone. */
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .wrap, .wrap-tight, .article, .cols, .split { padding-left: var(--space-5); padding-right: var(--space-5); }
  .wrap, .wrap-tight, .article, .split { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}
.mark { background: linear-gradient(to top, var(--highlight-wash) 0 40%, transparent 40%); padding: 0 0.08em; }
.nav-link:hover, .foot-col a:hover, .wordmark:hover { color: var(--ink); background: var(--highlight-faint); }
.btn:hover { opacity: 0.85; color: var(--paper-raised); background: var(--ink); }
.err { max-width: 760px; margin: 0 auto; padding: var(--space-9) var(--space-6); }

/* A short page -- 404, 502 -- would otherwise leave the footer floating in the
   middle of a tall window with dead paper beneath it. Push it to the bottom by
   making the page wrapper a full-height column and letting the content band
   absorb the slack.

   Scoped to `body.short` on purpose. The five content pages are all taller
   than any viewport, so this would do nothing for them while changing `.page`
   to a flex container -- a layout change with no upside is not free.

   `100dvh` after `100vh` so mobile browsers measure the visible viewport
   rather than the one hiding behind the URL bar; the first line is the
   fallback for anything that does not know `dvh`. */
body.short .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.short .band { flex: 1 0 auto; }
body.short .site-foot { flex: none; }

/* ---------- Spec 0129 PR E: /pricing and /support ----------
   Both designs switch state with DCLogic (the pay-period toggle, the browser
   tabs). The site ships no script, so each is a pair of radio inputs this
   stylesheet reads with :has() -- the same trade the phone menu made. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap.wrap-page { max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); }
.h1-page.h1-page--3.h1-measure { max-width: 24ch; }

/* The pay-period toggle */
.plans-bar { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--border-hairline); font-family: var(--font-sans); }
.plans-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-soft); }
.period-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.period { display: flex; gap: 4px; padding: 4px; background: var(--paper-raised); border: var(--border-hairline); border-radius: var(--radius-md); }
.period label { font-size: var(--text-sm); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-soft); }
.period input:checked + label { background: var(--ink); color: var(--paper-raised); font-weight: 600; }
.period input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.period-note { font-size: var(--text-sm); color: var(--ink-muted); }
.pricing:has(#pay-annually:checked) .is-monthly,
.pricing:has(#pay-monthly:checked) .is-annual { display: none; }

/* The plans: one column per plan, rows aligned across columns by subgrid, so
   the wide table and the phone's stacked cards are the same markup. */
.plans { display: grid; grid-template-columns: minmax(130px, 0.9fr) repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); font-family: var(--font-sans); }
.plan, .plan-labels { grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; }
.plan-head, .plan-fact, .plan-cta { padding-right: var(--space-5); }
.plan-head { display: flex; flex-direction: column; padding-top: var(--space-6); padding-bottom: var(--space-5); border-bottom: var(--border-hairline); }
.plan-name { margin: 0; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; color: var(--ink); line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end; }
.plan-desc { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-muted); margin: var(--space-1) 0 0; min-height: 3em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--space-4); }
.price { font-size: var(--text-xl); font-weight: 600; color: var(--ink); }
.per { font-size: var(--text-sm); color: var(--ink-muted); }
.plan-note { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--ink-muted); margin: var(--space-1) 0 0; }
.plan-fact { padding-top: var(--space-5); padding-bottom: var(--space-5); border-bottom: var(--border-hairline); font-size: var(--text-base); color: var(--ink); }
.plan-fact.is-strong .fact-v { font-weight: 600; }
.plan-labels .plan-fact { font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-normal); }
.fact-sub { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--ink-muted); }
.plan .fact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan-cta { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.btn.btn-plan { display: block; text-align: center; padding: 12px 16px; border: 1px solid var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; }
.plans-notes { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-muted); }
.plans-notes p { margin: 0; }
@media (max-width: 959px) {
  .plans { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); }
  .plan-labels { display: none; }
  .plan { display: flex; flex-direction: column; gap: var(--space-4); background: var(--paper-raised); border: 1px solid var(--paper-edge); border-radius: var(--radius-md); padding: var(--space-5); }
  .plan-head, .plan-fact, .plan-cta { padding: 0; }
  .plan-head { border-bottom: 0; }
  .plan-name, .plan-desc { min-height: 0; }
  .plan-price { margin-top: var(--space-3); }
  .plan-fact { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; font-size: var(--text-sm); }
  .plan-head + .plan-fact { border-top: var(--border-hairline); }
  .plan .fact-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: var(--ink-muted); }
  .fact-v { text-align: right; }
}

/* Support: questions that open one at a time */
.faq-intro { max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-7); }
.faq-lede { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-muted); margin: var(--space-4) 0 0; }
.faq { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6) var(--space-9); }
.faq-group { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); padding: var(--space-7) 0; border-top: var(--border-hairline); }
.faq-h { flex: 1 1 200px; max-width: 260px; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl); line-height: 1.25; color: var(--ink-soft); margin: 0; padding-top: var(--space-3); }
.faq-list { flex: 999 1 480px; min-width: 0; border-top: var(--border-hairline); }
.faq-q { border-bottom: var(--border-hairline); scroll-margin-top: 96px; }
.faq-q > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--ink); }
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary:hover { background: var(--highlight-faint); }
.faq-q > summary svg { flex: none; margin-top: 4px; color: var(--ink-muted); transition: transform 120ms ease-out; }
.faq-q[open] > summary svg { transform: rotate(90deg); }
.faq-a { padding: 0 0 var(--space-6) calc(16px + var(--space-3)); display: flex; flex-direction: column; gap: var(--space-4); }
.faq-a p, .faq-a ul, .faq-a ol { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.faq-a ul, .faq-a ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.faq-a .faq-sub { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2); }
.faq-link { align-self: flex-start; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); text-decoration: none; }
.video { aspect-ratio: 16 / 9; background: var(--paper-sunken); border: 1px solid var(--paper-edge); border-radius: var(--radius-image); overflow: hidden; }
.faq-a li .video { margin-top: var(--space-3); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* The browser tabs */
.tabs { max-width: 62ch; display: flex; flex-direction: column; gap: var(--space-4); }
.tablist { display: flex; gap: var(--space-1); border-bottom: var(--border-hairline); }
.tablist label { cursor: pointer; padding: var(--space-2) var(--space-4); margin-bottom: -1px; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); border-bottom: 2px solid transparent; }
.tablist label:hover { background: var(--paper-sunken); }
.tabs input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab-panel { display: none; flex-direction: column; gap: var(--space-4); }
.tabs:has(#tab-chrome:checked) #panel-chrome,
.tabs:has(#tab-firefox:checked) #panel-firefox { display: flex; }
.tabs:has(#tab-chrome:checked) label[for="tab-chrome"],
.tabs:has(#tab-firefox:checked) label[for="tab-firefox"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.btn.btn-store { align-self: flex-start; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; }
@media (max-width: 719px) {
  .wrap.wrap-page, .faq-intro, .faq { padding-left: var(--space-5); padding-right: var(--space-5); }
  .wrap.wrap-page, .faq-intro { padding-top: var(--space-8); }
}
.faq-a { scroll-margin-top: 150px; }

/* ---------- Home v4 (design 2026-10-28) ---------- */
.h1.h1-center { font-size: clamp(30px, 3.6vw, 46px); max-width: none; text-align: center; text-wrap: balance; }
.hero-sub.hero-sub-center { font-size: clamp(17px, 1.8vw, 24px); max-width: none; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; }
.h2.h2-wide.h2--3 { font-size: clamp(28px, 3.2vw, 40px); margin: 0; }
.h2.h2-t8 { margin-top: var(--space-8); max-width: none; }
.section-lede { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-muted); margin: var(--space-3) 0 0; }
.p.p-lg.p-t5, .p.p-free { margin-top: var(--space-5); }
.p.p-free { font-size: var(--text-md); line-height: var(--leading-normal); margin-top: var(--space-4); }
.cta-stack.cta-stack--t5 { margin-top: var(--space-5); }
/* An inline link the page wants followed: the highlighter as its underline. */
.link-hi { color: var(--ink); text-decoration: underline; text-decoration-color: var(--highlight); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link-hi:hover { color: var(--ink); background: var(--highlight-faint); }

/* The raised cards: How it works, and Your thinking stays yours. */
.card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--paper-raised); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); }
.card .step-n { margin-bottom: 0; }
.card-h { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--ink); margin: 0; }
.card-p { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-muted); margin: 0; text-wrap: pretty; }
.steps.steps--t7 { margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Try it: a whole card is the link into a public collection. */
.try-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-7); }
.try { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); align-items: center; background: var(--paper-raised); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); text-decoration: none; color: var(--ink); }
.try:hover { background: var(--paper-raised); border-color: var(--ink-ghost); color: var(--ink); }
.try-text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 420px; min-width: 0; }
.try-kind { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); }
.try-name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: var(--tracking-snug); color: var(--ink); }
.try-by { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); }
.try-desc { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink); margin: var(--space-2) 0 0; max-width: 60ch; text-wrap: pretty; }
.try-cta { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--ink); color: var(--paper-raised); padding: 10px 18px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.try:hover .try-cta { opacity: 0.85; }

/* People using Everett: ruled rows, the name in italic beside its line. */
.people { display: flex; flex-direction: column; margin-top: var(--space-5); border-top: var(--border-hairline); }
.person { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-3) var(--space-7); align-items: baseline; padding: var(--space-6) 0; border-bottom: var(--border-hairline); }
.person:last-child { border-bottom: 0; }
.person-h { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; letter-spacing: var(--tracking-snug); color: var(--ink); margin: 0; }
.person-p { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink); margin: 0; text-wrap: pretty; }