/* Body type. Quicksand, self-hosted, 2026-09-05 (owner: never the visitor's own
   default again, and the page font must be rounded like the wordmark). Every
   page previously fell back to whatever the visitor's machine supplied - Segoe
   UI on Windows, SF Pro on macOS, Roboto on Android - so no two people saw the
   same page.

   It is the SAME family as the wordmark on purpose. Nunito was tried first and
   rejected on sight: two rounded faces that are nearly the same read as a
   mistake rather than as a pairing. Either match exactly or contrast hard.

   Served from our own origin, so font-src 'self' already covers it: no CSP
   change and no third-party request. Subset to Latin plus the punctuation
   these pages use, which is why each weight is ~8 KB rather than ~125 KB.

   Quicksand is SIL Open Font License 1.1, so fonts/OFL.txt must stay beside
   it. */
@font-face {
  font-family: "Quicksand LYR";
  src: url("/fonts/quicksand-medium-lyr.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand LYR";
  src: url("/fonts/quicksand-semibold-lyr.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand LYR";
  src: url("/fonts/quicksand-bold-lyr.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Handwriting. Caveat, 2026-09-29, for the handwriting inside the approved
   illustrations and nothing else (illustration style guide, section 2). The
   family name is plain "Caveat" because that is what the drawings ask for.
   One variable file, Latin only, as the design tool delivered it; a browser
   downloads it only when something on the page uses it. SIL Open Font
   License 1.1, so fonts/OFL-Caveat.txt must stay beside it. */
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* Landing page layout and type. Colours come from tokens.css, which is linked
   first. Self-contained on purpose: no external fonts, scripts, or trackers.
   Extracted from an inline <style> block 2026-08-22 so that style-src 'self'
   admits it — an inline block would need 'unsafe-inline' (infra-docs doc 036). */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Quicksand LYR", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  width: min(42rem, 92%);
  margin: 0 auto;
  /* 18svh until 2026-09-18, when that air sat ABOVE the mark; the mark is in
     the header now, so less is needed below it. */
  padding: 10svh 0 4rem;
}

/* The wordmark is the only thing on these pages that is not the system font
   stack. It set no family at all until 2026-09-05, so the logo rendered in
   Segoe UI on Windows, SF Pro on macOS and Roboto on Android, and no visitor
   had ever seen the same mark as any other. Quicksand Bold was chosen
   2026-09-02 (infra-docs ROADMAP, the logo item).

   Served from our own origin, so the existing font-src 'self' covers it with
   no CSP change and no third-party request. The files are the variable font
   pinned to weights 500, 600 and 700 and subset to full Latin.

   Quicksand is SIL Open Font License 1.1, which requires the licence to travel
   with the font, so fonts/OFL.txt sits beside them and must not be deleted.

   ⛔ THIS READ "cut down to the ten letters of the wordmark, which is why it is
   1.6 KB rather than 120 KB. It can render nothing else." UNTIL 2026-09-17, AND
   IT HAD BEEN FALSE SINCE 2026-09-05, when the whole site became Quicksand and
   all three files were re-cut. verbatimlog/CLAUDE.md corrected its own copy on
   2026-09-16 and the sweep reached neither this file nor the portal's. Measured
   here with fontTools: 108 characters each, 8,156 / 8,460 / 8,596 bytes.
   ⭐ "It can render nothing else" was a FALSE CONSTRAINT and it is the sentence
   that mattered: it is why nobody set the printed template in our own typeface
   (infra-docs pipeline doc 108).

   ⛔ LOCKED (owner): the size below is W1 in 06_pipeline/locked-settings.tsv,
   and the pre-commit hook REFUSES a commit that moves it unless that register
   moves in the same commit. It must equal the portal's W4. This comment exists
   because a session editing CSS reads the CSS and not ROADMAP.md.
   1.35rem since 2026-09-18 (owner, at the wordmark sitting; 1.05rem before).
   The 2.5rem gap under the mark (W2) went the same day: the mark now sits in
   the page header (.sitehead below), not above the headline. */
.wordmark {
  font-family: "Quicksand LYR", ui-sans-serif, system-ui, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* The mark became a link here 2026-09-17, closing the landing-site half of the
   wordmark item. The portal's has been one since 2026-09-15; these six pages
   were the remaining place it did nothing (owner: "I think they all need to go
   somewhere"). It points at `/`, which is a real destination from every page
   including index.html itself.

   inline-block keeps the click target and the focus ring the size of the
   letters. It held the 2.5rem gap under the mark until 2026-09-18, when the
   mark moved into the header and the gap went.

   ⛔ NO HOVER UNDERLINE (owner, 2026-09-17). The pointer cursor is the
   affordance; a blue line under the logo makes it read as body text. The
   portal's stylesheet carries the same rule and the same reasoning.

   ⛔ LOCKED (owner): inline-block is W3 in 06_pipeline/locked-settings.tsv. */
a.wordmark {
  display: inline-block;
}

a.wordmark:hover {
  text-decoration: none;
}

a.wordmark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* THE HEADER, and the mark is its ANCHOR (owner, 2026-09-18): same spot, same
   size on every page of BOTH sites, "clicking from the landing page to any of
   the app pages"; only the links beside it change. One width everywhere,
   whatever the page's own column: min(48rem, 92vw), centred. The portal's
   styles.css carries the identical .sitehead rule. ⛔ LOCKED: W5 here, W6
   there, and they must stay equal or the mark jumps between the two sites.
   The markup lives ONCE, in landing-page/partials/site-header.html, stamped
   into all six pages by landing-page/sync-header.py. */
.sitehead {
  width: min(48rem, 92vw);
  margin: 0 auto;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 22px;
}

.headnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* 12px, matching the portal's .nav (2026-09-18 evening). */
  gap: 6px 12px;
  font-size: 0.9rem;
}

.headnav a {
  white-space: nowrap;
}

h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.lede {
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 36rem;
  margin-bottom: 3rem;
}

/* Matches the portal's link treatment so the two sites read as one product. */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* Document pages: /terms and /privacy. The 18svh top padding above is a
   landing-page device, sized to drop the headline into the middle of an empty
   screen. A document is read from the top, so it starts near it. Everything
   else (measure, type scale, link colour, footer) is deliberately shared, so
   the documents read as the same product rather than as pasted-in legalese. */
.doc {
  padding-top: 6svh;
}

/* Long documents: How It Works, the FAQ, and the deletion page, added
   2026-09-04. Everything above this was sized for a headline and three lines;
   these are read start to finish, so they need a heading rhythm and list
   styling that a landing page never needed. Same measure, same type scale, same
   link colour, so they stay one product rather than a separate section. */
.doc h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 0.9rem;
}

.doc h3 {
  font-size: 1.05rem;
  margin: 1.6rem 0 0.35rem;
}

.doc p { margin-bottom: 1.1rem; }

.doc ul { margin: 0 0 1.1rem 1.15rem; }

.doc li { margin-bottom: 0.45rem; }

/* The three steps. Numbered by the list, so the number is not repeated in the
   heading text. */
.doc ol.steps {
  list-style: decimal;
  margin: 0 0 1.1rem 1.15rem;
}

.doc ol.steps > li { margin-bottom: 1.1rem; }

.doc ol.steps strong { display: block; }

/* FAQ. A question is not a section heading: fifteen h2s would read as fifteen
   chapters, and the answer belongs tight under its question. */
.faq .q {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.faq .a {
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.waitlist {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}

.waitlist p {
  font-weight: 600;
}

.waitlist .sub {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95rem;
}

/* The three post-launch actions, shipped 2026-09-06 with the signups setting.
   Chosen as variant G from a seven-variant sitting rendered off this page.
   `.second` is a deliberate middle step between the button and the quiet sub
   line: full text colour and a touch more weight, so "how it works" reads as
   the second invitation rather than as the same footnote as "sign in". */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 700;
}

.second {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.cta + .second {
  margin-top: 0.15rem;
}

/* Site navigation, in the footer on every page. Added 2026-09-05: until then
   /how-it-works, /faq, /terms, /privacy and /deleting-your-data were live and
   correct and REACHABLE ONLY BY TYPING THE ADDRESS. The landing page carried
   exactly one link, "Sign in". Nothing decided that; the pages shipped one at a
   time and nobody went back to link them.

   The page you are on shows as plain text rather than a link to itself, which
   is why the markup has both <a> and <span>. */
.sitenav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-bottom: 1.25rem;
  /* Set here rather than on `footer` so the copyright line keeps its small
     0.85rem (owner, 2026-09-06). This is the site's ONLY navigation, so it is
     not really footer text and did not read as a menu at 0.85rem.
     1.2rem was tried the same day and the owner called it too big; 1rem is
     his number. It sits just under the body's 1.05rem, which is the right
     place for a menu that should be findable without competing. */
  font-size: 1rem;
}

.sitenav a {
  color: var(--accent);
}

.sitenav span[aria-current] {
  color: var(--muted);
}

footer {
  width: min(42rem, 92%);
  margin: 0 auto;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}

/* The sample photo's thumbnail beside its download button (owner, 2026-09-17:
   "an image of the image"). A separate 29 KB file, never the 3.2 MB photo
   scaled down in the browser. Side by side where there is room; flex-wrap
   stacks it above the button on a phone. Tapping it opens the full photo. */
.sample-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-bottom: 1.1rem;
}

.sample-download img {
  display: block;
  width: 200px;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
}

/* ── THE LANDING PAGE (index.html only), 2026-10-02 ──────────────────────────
   Landing sitting v4, approved for the build (infra-docs brand/
   landing-page-sittings/). Everything here is scoped to body.landing, so the
   other five pages are untouched.

   ⛔ ITS OWN HEADER, WIDER THAN THE LOCKED ONE. .sitehead (W5, 48rem) holds the
   mark in one spot on every other page and on the portal. The owner ruled the
   landing page may differ (2026-10-02: "The logo can jump ... we can widen
   only the landing page"), so .landhead is not .sitehead and W5 is unchanged.

   ⛔ NO SCRIPT: the phone menu is <details>, which opens without JavaScript.
   Below 1080px the jump links fold into it; above, they sit in the row.
   Colours only through the variables in tokens.css (locked register). */
body.landing { display: block; }

.landhead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.landrow {
  width: min(72rem, 92%);
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 22px;
}

.landrow .wordmark { margin-right: auto; }

.jumpnav { display: flex; gap: 20px; font-weight: 600; font-size: 0.95rem; }
.jumpnav a { color: var(--text); white-space: nowrap; }
.jumpnav a:hover { color: var(--accent); text-decoration: none; }
.landrow .signin { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }

.btn-small {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  white-space: nowrap;
}

.landing .btn:hover { text-decoration: none; filter: brightness(1.05); }

.menu { display: none; }

.menu summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--field);
}

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

/* Anchored to the header (sticky, so it is the containing block), never to
   the button: when the row wraps, a menu hung off the button ran off the
   left edge (2026-10-02 test). */
.menu nav {
  position: absolute;
  right: 4%;
  top: calc(100% + 6px);
  width: min(18rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 6px 16px;
}

.menu nav a {
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.menu nav a:last-child { border-bottom: 0; }
.menu nav a:last-child { color: var(--accent); }

/* ⛔ THE HEADER RAN OFF THE OWNER'S PHONE (2026-10-02, his screenshots):
   Menu cut off and the whole page scrolling sideways. The test had passed at
   "phone width", but headless Edge lays out no narrower than 484px and a
   phone can be about 384, where the mark, the button and Menu do not fit.
   Breakpoints are in em, so a larger default text size folds sooner too.
   The mark keeps its locked size (W1).
   Narrowest: the header button moves into the Menu; the one under the
   heading stays. flex-wrap is the backstop: never a sideways scroll. */
.landrow { flex-wrap: wrap; }
.menu-cta { display: none; }

@media (max-width: 67.5em) {
  .jumpnav, .landrow .signin { display: none; }
  .menu { display: block; }
  .landrow { gap: 10px; }
}

@media (max-width: 30em) {
  .landrow .btn-small { display: none; }
  .menu nav .menu-cta { display: block; color: var(--accent); }
}

.landmain {
  width: min(72rem, 92%);
  margin: 0 auto;
  padding: 0 0 2rem;
}

.landmain section { padding-top: 4.5rem; scroll-margin-top: 80px; }

.hero { padding-top: 3rem; }
.hero-text { max-width: 46rem; margin-bottom: 1.5rem; }
.landing h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); line-height: 1.12; margin-bottom: 0.3rem; }
.landing .lede { margin-bottom: 1.6rem; max-width: 40rem; }
.landing .btn { padding: 0.8rem 1.6rem; border-radius: 12px; font-size: 1.05rem; }
.landing .btn-small { padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.95rem; }

/* His line, in the handwriting face (owner, site-map.md open point 3). */
.caveat {
  font-family: "Caveat", cursive;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 1rem;
}

.heropic img, .panels img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 18px;
}

.landing h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.landing .sub { color: var(--muted); margin-bottom: 1.6rem; max-width: 40rem; }

.card {
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px;
}

.card h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.card p { color: var(--muted); }

.steps3, .qas, .panels { display: grid; gap: 16px; }
.steps3 { grid-template-columns: repeat(3, 1fr); }
.qas, .panels { grid-template-columns: repeat(2, 1fr); }

.num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* The real portal pages, in a phone frame. */
.devices { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }

.device img {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
  border: 10px solid var(--text);
  border-radius: 36px;
}

@media (prefers-color-scheme: dark) {
  .device img { border-color: var(--rule); }
}

.about { max-width: 46rem; }
.about p { color: var(--text); margin-bottom: 0.9rem; }
.about p:last-child { margin-bottom: 0; }

.more { margin-top: 1.2rem; font-weight: 600; }

.final { text-align: center; padding: 5rem 0 2rem; }
.landing .final h2 { margin-bottom: 1.2rem; }

.landing footer { width: min(72rem, 92%); }

@media (max-width: 47.5em) {
  .steps3, .qas, .panels { grid-template-columns: 1fr; }
}