/* ---------------------------------------------------------------------------
   POLYA — polya.app, the whole site's stylesheet

   Shared by index.html, pricing.html, privacy-policy.html and support.html.
   It used to live inside index.html; it was lifted out on 2026-09-08 when the
   site became four pages, so there is one place to change a colour.

   WHERE THE LOOK COMES FROM. Every colour, the display face, and the line-
   marking grammar below are lifted from the iOS app itself, not invented here:

     colours  ios/Polya/Theme.swift   (polyaBG, polyaAccent, polyaGood, polyaBad…)
     display  Caprasimo, the exact TTF the app bundles, self-hosted in assets/
     body     the system face, because that is SF on an iPhone — what the app
              actually renders in. No webfont for body text: one font request
              for the whole page.

   So the palette is a real, documented brand decision (brand/README.md,
   2026-08-25), not a default reached for because nothing was specified.
   Nothing here is cream + serif + sage, and nothing is indigo + gradient.

   STRUCTURE. Deliberately not hero-plus-three-feature-cards. The page is an
   argument in five moves: the claim (he watches you work, at any hour), the
   ledger against a human tutor, one real check shown end to end, what he
   refuses to do, and the price. The evidence section alternates sides so the
   eye tracks down a spine rather than scanning a grid of equal boxes.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Caprasimo";
  src: url("Caprasimo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Straight from Theme.swift — same hex values the app compiles. */
  --ink:            #14120E;   /* polyaBG      */
  --ink-deep:       #0E0C09;   /* polyaCard2   */
  --surface:        #1E1B16;   /* polyaCard    */
  --surface-raised: #2A251E;   /* polyaRaised  */
  --rule:           #3A332A;   /* polyaLine    */
  --rule-faint:     #2B2620;   /* polyaLineSubtle */

  --text:           #F4ECDD;   /* polyaText    */
  --text-dim:       #C0B6A5;   /* polyaDim     */
  --text-faint:     #A19786;   /* polyaFaint   */

  --accent:         #F6A06B;   /* polyaAccent  */
  --accent-pale:    #FFC6A5;   /* polyaAccentPale */
  --accent-fill:    #402310;   /* polyaAccentFill */
  --on-accent:      #14120E;   /* polyaOnAccent */

  --good:           #A8D69A;   /* polyaGood — "this line is right" */
  --good-fill:      #1C2718;
  --bad:            #EF8F80;   /* polyaBad  — "this line is wrong" */
  --bad-fill:       #2B1815;

  --measure: 34rem;            /* body copy never gets wider than this */
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The surfaces the browser draws, not us. Left at their defaults these are the
   cheapest tell that nobody looked at the details. */
::selection      { background: rgba(246,160,107,.28); color: var(--text); }
::-moz-selection { background: rgba(246,160,107,.28); color: var(--text); }
:root { scrollbar-color: var(--rule) var(--ink); accent-color: var(--accent); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #4a4136; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-pale); }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-family: Caprasimo, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }

.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;
}

/* --- masthead ------------------------------------------------------------ */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem 0 0;
}
.mark { display: flex; align-items: center; gap: .6rem; }
.mark img { width: 34px; height: 34px; display: block; }
.mark span {
  font-family: Caprasimo, Georgia, serif;
  font-size: 1.3rem; letter-spacing: -0.01em;
}
.masthead a.jump {
  font-size: .9rem; color: var(--text-dim); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.masthead a.jump:hover { color: var(--accent); border-color: var(--accent); }

/* --- the claim ----------------------------------------------------------- */

.claim {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.claim h1 {
  font-size: clamp(2.35rem, 5.3vw, 4.05rem);
  line-height: 1.05;
  margin-bottom: .7rem;
}
/* The words the whole page turns on. Colour, not a gradient, not a highlighter
   box. The accent, not the red: red is reserved for a wrong line, and the word
   in the headline is the promise rather than the mistake. */
.claim h1 em { font-style: normal; color: var(--accent); }

/* Medium subheader: sits between the headline and the body copy, so it needs a
   size clearly under the h1 and clearly over the lede, and full-brightness text
   so it reads as a second line of the claim, not as the start of the paragraph. */
.claim .subhead {
  font-size: clamp(1.2rem, 2.15vw, 1.6rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
  max-width: var(--measure);
  margin: 0 0 1.15rem;
}

.claim .lede {
  color: var(--text-dim);
  max-width: var(--measure);
  margin: 0 0 2rem;
  font-size: 1.13rem;
}


/* --- the sign-up form ---------------------------------------------------- */

.signup {
  display: flex; flex-wrap: wrap; gap: .6rem;
  max-width: 30rem;
}
.signup input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  caret-color: var(--accent);
  background: var(--ink-deep);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.signup input[type="email"]::placeholder { color: var(--text-faint); }
.signup input[type="email"]:hover { border-color: #4a4136; }
.signup input[type="email"]:focus { border-color: var(--accent); outline: none; }
/* Only scold after they have tried to submit, never while they are typing. */
.signup.tried input:invalid { border-color: var(--bad); }

.signup button {
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  padding: .85rem 1.4rem;
  cursor: pointer;
  transition: background-color .15s ease, transform .08s ease;
}
.signup button:hover { background: var(--accent-pale); }
.signup button:active { transform: translateY(1px); }
.signup button[disabled] { background: var(--surface-raised); color: var(--text-faint); cursor: default; }

.signup-note {
  color: var(--text-faint);
  font-size: .9rem;
  max-width: 30rem;
  margin: .95rem 0 0;
}
.signup-error { color: var(--bad); font-size: .9rem; margin: .8rem 0 0; }

.signup-done {
  border: 1px solid var(--good);
  background: var(--good-fill);
  color: var(--text);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  max-width: 30rem;
  margin: 0;
}
.signup-done strong { color: var(--good); font-weight: 600; }

/* --- phone screenshots --------------------------------------------------- */

/* No fake bezel. The screenshot is the whole device screen already, so the only
   thing added is the corner radius iOS actually draws (62pt on a 402x874pt
   screen = 15.4% of the width, 7.1% of the height) and a real shadow with an
   offset, rather than a coloured halo. */
.phone {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15.4% / 7.1%;
  border: 1px solid var(--rule-faint);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}
.claim .phone-slot { max-width: 21rem; justify-self: center; }

/* --- the ledger: what a live tutor costs, either way --------------------- */

/* Deliberately a two-column ledger sharing one set of row labels, not two
   pricing cards facing off. The row label sits in the middle on desktop so the
   eye reads across a single line — "booking: days ahead / none" — instead of
   comparing two lists it has to hold in its head. */
.ledger {
  margin-top: 2.2rem;
  border: 1px solid var(--rule-faint);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-deep);
  max-width: 46rem;
}
.ledger-head, .ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 1rem;
  padding: .85rem 1.25rem;
}
.ledger-head {
  background: var(--surface);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ledger-head .them, .ledger-row .them { text-align: right; }
.ledger-head .him  { color: var(--accent); }
.ledger-row + .ledger-row, .ledger-head + .ledger-row {
  border-top: 1px solid var(--rule-faint);
}
.ledger-row .what {
  text-align: center;
  font-size: .82rem;
  color: var(--text-faint);
}
.ledger-row .them { color: var(--text-faint); }
.ledger-row .him  { color: var(--text); font-weight: 600; }

/* --- the walkthrough ----------------------------------------------------- */

.section-lead {
  border-top: 1px solid var(--rule-faint);
  padding-top: 2.6rem;
}
.section-lead h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .9rem; }
.section-lead p { color: var(--text-dim); max-width: var(--measure); margin: 0; }

.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.beat + .beat { border-top: 1px solid var(--rule-faint); }
/* Alternate which side the phone sits on, so the page has a spine instead of
   a column of identical rows. */
.beat.flip .beat-figure { order: -1; }
.beat-figure { max-width: 20rem; justify-self: center; width: 100%; }
.beat h3 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-bottom: .8rem; }
.beat p { color: var(--text-dim); max-width: var(--measure); margin: 0 0 1rem; }
.beat p:last-child { margin-bottom: 0; }
.aside {
  color: var(--text-faint);
  font-size: .93rem;
  border-left: 1px solid var(--rule);
  padding-left: 1rem;
  margin-top: 1.4rem;
}

/* --- the line strip: Polya's marking grammar, rebuilt in HTML ------------- */

/* This is the app's line-by-line view, reproduced with the real transcription
   and the real verdicts from the check shown above it. Same colours, same
   monospace, same coloured rule down the left of each line. */
.marking {
  background: var(--ink-deep);
  border: 1px solid var(--rule-faint);
  border-radius: 18px;
  padding: 1.4rem 1.25rem;
  margin: 2.2rem 0 0;
  overflow-x: auto;
  max-width: 48rem;   /* the longest transcribed line, plus air — not the full page width */
}
.marking-head {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .82rem; color: var(--text-faint);
  margin-bottom: 1.1rem;
}
.marking ol { list-style: none; margin: 0; padding: 0; }
.marking li {
  display: grid;
  grid-template-columns: 1.6rem 3px minmax(0, 1fr);
  gap: 0 .85rem;
  align-items: start;
  /* Roomier than it looks it needs to be: a line with a stacked fraction or a
     root in it is two lines tall, and at .34rem consecutive rows touched. */
  padding: .5rem 0;
}
.marking .n {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--text-faint);
  text-align: right;
  padding-top: .18rem;
}
.marking .bar { border-radius: 2px; align-self: stretch; background: var(--rule); }
.marking li.ok    .bar { background: var(--good); }
.marking li.error .bar { background: var(--bad); }
.marking .src {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.marking li.label .src { color: var(--text-faint); }
/* A line written across the page as several short expressions becomes several
   rows here, the same way it does in the app. */
.marking .src + .src { grid-column: 3; margin-top: .35rem; }
.marking .note {
  grid-column: 3;
  color: var(--bad);
  font-size: .89rem;
  line-height: 1.5;
  margin-top: .45rem;
}

/* --- the maths, formatted ------------------------------------------------ */

/* These rules are the app's own (tutorapp web/app.html), brought over so the
   evidence strip above shows the maths the way the product actually draws it.
   It used to print the model's raw output — "u_B = 1/(2 mu_0) B^2" — which is
   the exact thing Polya exists to stop you having to read. The markup is
   generated by build-marking.py through the real formatter, so there is no
   second implementation here to drift. */

.marking sub, .marking sup {
  font-size: .72em; line-height: 0; position: relative; vertical-align: baseline;
}
.marking sup { top: -.5em; }
.marking sub { bottom: -.28em; }

/* A stacked fraction: the bar is the top border of the denominator, so it is
   always exactly as wide as the wider half. inline-flex makes the whole stack
   behave like one tall character sitting in the line. */
.marking .frac {
  display: inline-flex; flex-direction: column; text-align: center;
  vertical-align: middle; line-height: 1.18; margin: 0 .12em;
}
.marking .frac-n { padding: 0 .35em .06em; }
.marking .frac-d { padding: .06em .35em 0; border-top: 1.2px solid currentColor; }
.marking .frac .frac { font-size: .86em; margin: 0 .22em; }
.marking .frac-n, .marking .frac-d { white-space: nowrap; }

/* A square root, drawn as a real radical rather than "√( … )". The bar is as
   wide as what it covers; .tall scales the tick up when a stacked fraction is
   underneath it, because a 1em glyph cannot reach the top of a two-line box. */
.marking .rad {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  margin: 0 .1em;
}
.marking .rad-sign {
  display: flex; align-items: flex-end; line-height: .9; padding-right: .04em;
}
.marking .rad-body {
  display: inline-flex; align-items: center;
  border-top: 1.4px solid currentColor;
  padding: .16em .3em 0 .12em;
  /* pre: a flex container drops the whitespace between its anonymous text
     items, which turned "ε₀ μ₀" into "ε₀μ₀". */
  white-space: pre;
}
.marking .rad.tall .rad-sign { font-size: 1.9em; align-items: center; line-height: 1; }
.marking .rad .rad { font-size: .94em; }

/* The page's single authored motion moment: the flagged line arrives a beat
   after the ones around it, once, when it first scrolls into view. Everything
   is visible by default, so a failure to run leaves the page correct. */
.marking li.error .src,
.marking li.error .note,
.marking li.error .bar { transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.marking.armed li.error .src,
.marking.armed li.error .note { opacity: 0; transform: translateY(6px); }
.marking.armed li.error .bar  { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .marking.armed li.error .src,
  .marking.armed li.error .note,
  .marking.armed li.error .bar { opacity: 1; transform: none; }
}

/* --- refusals ------------------------------------------------------------ */

/* Heading and its lede on the left, the list itself on the right: a text-only
   section otherwise leaves the whole right half of a desktop window empty. */
.split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.split > :first-child p { margin-bottom: 0; }

.refusals { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.refusals li {
  padding: .95rem 0;
  border-top: 1px solid var(--rule-faint);
  color: var(--text-dim);
}
.refusals li:last-child { border-bottom: 1px solid var(--rule-faint); }
.refusals b { color: var(--text); font-weight: 600; }

/* --- price --------------------------------------------------------------- */

.plans { display: grid; gap: 1px; background: var(--rule-faint); border-radius: 18px;
         overflow: hidden; margin-top: 2.2rem; grid-template-columns: repeat(2, 1fr); }
.plan { background: var(--surface); padding: 1.5rem 1.35rem; }
.plan.feature { background: var(--surface-raised); }
.plan h3 { font-size: 1.35rem; margin-bottom: .15rem; }
.plan .price { color: var(--accent); font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem; }
.plan .price small { color: var(--text-faint); font-weight: 400; font-size: .85rem; }
/* The list price, struck through. Dimmed rather than coloured, so the eye
   lands on the price actually being charged and reads the old one second. */
.plan .price s {
  color: var(--text-faint);
  font-weight: 400;
  text-decoration-thickness: 1px;
  margin-right: .35rem;
}
.plan .sale {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-fill);
  border-radius: 99px;
  padding: .2rem .55rem;
  margin-bottom: .5rem;
}
.plan ul { list-style: none; margin: 0; padding: 0; color: var(--text-dim); font-size: .94rem; }
.plan li { padding: .3rem 0 .3rem 1.1rem; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rule);
}
.plan.feature li::before { background: var(--accent); }
.price-note { color: var(--text-faint); font-size: .9rem; max-width: var(--measure); margin: 1.4rem 0 0; }

/* --- close + footer ------------------------------------------------------ */

.close { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
         border-top: 1px solid var(--rule-faint); }
.close h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 1rem; }
.close p { color: var(--text-dim); max-width: var(--measure); margin: 0 0 1.9rem; }

footer {
  border-top: 1px solid var(--rule-faint);
  padding: 2rem 0 3.5rem;
  color: var(--text-faint);
  font-size: .9rem;
}
.footer-byline {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
}
footer nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer a { color: var(--text-faint); }
footer a:hover { color: var(--accent); }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .claim, .beat, .split { grid-template-columns: 1fr; }
  .claim { padding-top: 2.75rem; }
  .claim .phone-slot { max-width: 17rem; justify-self: start; order: 2; }
  .beat.flip .beat-figure { order: 0; }
  .beat-figure { max-width: 16rem; justify-self: start; }
  .plans { grid-template-columns: 1fr; }

  /* No room to read across three columns on a phone: put the row label on top
     and the two values under it, still one row per fact. */
  .ledger-head { display: none; }
  .ledger-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .15rem 1rem;
  }
  .ledger-row .what { grid-column: 1 / -1; text-align: left; }
  .ledger-row .them { text-align: left; }
  .ledger-row .them::before { content: "tutor: "; }
  .ledger-row .him::before  { content: "Polya: "; color: var(--text-faint); font-weight: 400; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .marking { padding: 1.1rem .9rem; }
  .marking li { grid-template-columns: 1.3rem 3px minmax(0, 1fr); gap: 0 .6rem; }
  .marking .src { font-size: .8rem; }
}

/* =========================================================================
   ADDED 2026-09-08 — the site became four pages
   ========================================================================= */

/* --- the tab bar in the masthead ----------------------------------------- */

/* Four plain words, not buttons or pills. The only thing that marks the page
   you are on is the accent colour and a solid rule underneath it, which is the
   same visual grammar the rest of the page already uses for "this one matters"
   (the accent word in the headline, the accent side of the ledger). */
.masthead .mark {
  color: inherit;
  text-decoration: none;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.tabs a {
  font-size: .95rem;
  color: var(--text-dim);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tabs a:hover { color: var(--text); border-bottom-color: var(--rule); }

/* aria-current is the attribute a screen reader announces as "current page",
   so styling off it means the highlight and the announcement can never
   disagree — there is only one thing to set on each page. */
.tabs a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- prose pages: privacy policy, support -------------------------------- */

/* These two were plain white documents with their own stylesheet. They are the
   same site, so they get the same paper. Kept to one narrow column and left
   alone otherwise — a policy is for reading, not for looking at. */
.doc {
  max-width: 44rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
}
.doc h1 {
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  margin-bottom: .35rem;
}
.doc h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-faint);
}
.doc h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.doc p, .doc li { color: var(--text-dim); }
.doc p { margin: 0 0 1rem; }
.doc ul, .doc ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.doc li { margin: .4rem 0; }
.doc strong, .doc b { color: var(--text); font-weight: 600; }
.doc .meta {
  color: var(--text-faint);
  font-size: .93rem;
  margin: 0 0 2rem;
}

/* One shared box for the privacy summary and the support contact panel. */
.doc .callout {
  background: var(--ink-deep);
  border: 1px solid var(--rule-faint);
  border-radius: 16px;
  padding: 1.2rem 1.35rem;
  margin: 0 0 1.6rem;
}
.doc .callout p:last-child { margin-bottom: 0; }
.doc .callout a { font-weight: 600; }

.doc table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0 1.6rem;
  font-size: .95rem;
}
.doc th, .doc td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--rule-faint);
  vertical-align: top;
  color: var(--text-dim);
}
.doc th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Without a hint the browser gives all three columns equal-ish width, and the
   two short ones ("What", "When") wrap into towers next to a wide third. */
.doc thead th:nth-child(1) { width: 21%; }
.doc thead th:nth-child(2) { width: 17%; }

.doc code {
  background: var(--surface);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}

/* On a phone a three-column table of prose is unreadable. Each row becomes a
   small stacked block with its column name printed above each cell, taken from
   the data-label attribute in the markup. */
@media (max-width: 700px) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
  .doc thead { display: none; }
  .doc tr {
    border: 1px solid var(--rule-faint);
    border-radius: 14px;
    padding: .4rem .2rem;
    margin-bottom: 1rem;
  }
  .doc td { border-bottom: 0; padding: .5rem .8rem; }
  .doc td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: .2rem;
  }
}

/* --- pricing page -------------------------------------------------------- */

.page-lead {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.page-lead h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  margin-bottom: .8rem;
}
.page-lead p {
  color: var(--text-dim);
  max-width: var(--measure);
  margin: 0 0 1rem;
}

/* The pricing page's plan cards are the same component as the home page's
   were, so they need no new rules — only room to breathe on their own page. */
.plans.standalone { margin-top: 2.6rem; max-width: 46rem; }

/* A quiet two-column list of "what a credit actually buys" facts. */
/* Two columns, fixed — auto-fit made a third one appear on a wide window and
   left the fourth fact stranded alone on a second row. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.9rem 2.6rem;
  margin-top: 2.4rem;
  max-width: 46rem;
}
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }
.facts h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.facts p { color: var(--text-dim); font-size: .96rem; margin: 0; }

/* --- narrow screens: the tab bar drops to its own line ------------------- */

@media (max-width: 820px) {
  .masthead { flex-wrap: wrap; row-gap: .9rem; }
  /* order 3 puts the tabs after the waitlist link in flex order, so they wrap
     onto a second full-width row while the logo and the link keep row one. */
  .masthead .tabs {
    order: 3;
    flex-basis: 100%;
    gap: 1.15rem;
    padding-top: .2rem;
  }
}
@media (max-width: 420px) {
  .masthead a.jump { display: none; }   /* the form is a thumb-flick away anyway */
  .tabs a { font-size: .9rem; }
}