/* ===========================================================================
   MUSTARD SEED — THE PUBLIC SITE                                    site.css
   ===========================================================================

   ONE FILE FOR ALL THREE PAGES. index.html, look.html and included.html each
   used to carry their own copy of the same colors and controls, which is the
   same mistake the app made before ms.css — three copies drift, and the day
   one of them is touched the site stops looking like one thing.

   WHY THIS IS NOT public/ms.css
   -----------------------------
   It wants to be. But the teaser is served by its own router off the site/
   folder, decided by host name (runmustardseed.com gets the teaser,
   app.runmustardseed.com gets the app), and that router cannot see public/.
   Asking for /ms.css on the teaser host returns index.html, not a stylesheet.

   So the TOKENS BELOW ARE A MIRROR OF ms.css AND MUST BE KEPT IN STEP. If a
   color or a radius moves there, it moves here. Nothing else is copied —
   the app's rail, tables and fields have no business on a marketing page.

   ═══════════════════════════════════════════════════════════════════════════
   ⭐⭐ SEP 18, 2026 — THE PAGE IS LIGHT AND THE SCREENS ON IT ARE DARK
   ═══════════════════════════════════════════════════════════════════════════

   Two changes landed together, and the second one is the interesting one.

   1. ms.css v2. The brand moved from a hot orange (#f26a21) to mustard, the
      surfaces and lines are solid instead of translucent white film, the radii
      grew, and the app gained a real light mode. Every token below is v2's,
      re-mirrored.

   2. John, Sep 18: *"I think the page should move to a light page. Very few
      marketing pages are dark."* He is right, and the reason is not fashion:
      a stranger reads a marketing page once, in daylight, often on a phone,
      and a dark page asks them to adjust to it before they have decided they
      care. The app is different — a teammate lives in it for nine hours.

   ⭐⭐ SO THE PAGE TAKES THE LIGHT PALETTE AND THE MOCK SCREENS KEEP THE DARK
   ONE. That is not a compromise, it is the point. The screens on look.html are
   pictures of the app, the app opens dark, and a dark screen sitting on a
   light page is how every piece of software on earth shows itself off — it
   reads as a THING rather than as more page. On the old dark site the screens
   blended into the background and a visitor could not tell where the writing
   stopped and the product started.

   ⚠ HOW: `:root` carries the light values, and `.shot`, `.hp` and `.phone` —
   the three mock wrappers — re-declare the dark ones on themselves. Nothing
   inside a mock is rewritten. That is the same trick as ms.css §1b: do not
   edit 250 rules, re-point the names they already use.

   ⚠⚠ THE TYPEFACE IS THE SYSTEM ONE, ON PURPOSE. ms.css names `Archivo`, but
   NOT ONE of the 96 app pages loads it — 85 of them load no web font at all —
   so every screen in the real app renders in system-ui, and always has (v1
   named IBM Plex Sans and did not load that either). This site used to load
   IBM Plex Sans from Google, which meant the site and the app were in
   different type before a single color was considered. Matching the app is
   worth more than matching the stylesheet's wish. **If Archivo is ever loaded
   properly in the app, change it here the same day.**
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── mirrored from public/ms.css, LIGHT mode ───────────────────────────── */
  /* ⚠ The names are v1's because three pages and 250 mock rules already use
        them. ms.css §1b keeps the same names alive for the same reason. */
  --sf-0: #F5F7F9;   /* the page */
  --sf-1: #FFFFFF;   /* a panel */
  --sf-2: #FFFFFF;   /* a card */
  --sf-3: #FAFBFC;   /* a well, an input */
  --sf-4: #EFF2F5;   /* hover */
  --sf-5: #E8ECF0;

  --ink-1: #121820;
  --ink-2: #384250;
  --ink-3: #5C6773;
  --ink-4: #7B858F;
  --ink-5: #9AA3AD;

  /* ⚠ SOLID, NOT A TRANSLUCENT WHITE FILM. v1's lines were
     rgba(255,255,255,.07), which is invisible on a white page — it is one of
     the reasons the app's light mode never really worked before v2. */
  --line-1: #E3E8ED;
  --line-2: #D3DAE1;
  --line-3: #C4CCD5;

  /* ⚠ THE BRAND IS DARK IN LIGHT MODE AND THAT IS DELIBERATE. Mustard on
     white is unreadable as text and as a button fill; #8A5A00 is the same hue
     carried down until white sits on it at 7:1. The bright mustard stays in
     the dark mocks below, where it belongs. */
  --brand:      #8A5A00;
  --brand-hi:   #6B4500;
  --brand-soft: #7A5008;
  --brand-ink:  #FFFFFF;
  --brand-wash: #FDF6E7;
  --brand-line: #EDDCB4;
  --brand-ring: rgba(138,90,0,.16);

  --good: #0F7048;  --good-wash: #E9F5EF;  --good-line: #BFE0D0;
  --warn: #C08400;  --warn-wash: #FDF6E7;  --warn-line: #EDDCB4;
  --bad:  #A32015;  --bad-wash:  #FDF1EF;  --bad-line:  #F2CCC6;

  /* ⚠ THE AMBER SAFE AS A DOT IS NOT SAFE AS TEXT. --warn is what a dot or a
     bar is painted; --warn-text is what a word beside it is. On a light page
     #C08400 on #FDF6E7 is 2.98:1 and #7A5008 is 6.55:1. */
  --warn-text: #7A5008;
  --good-text: #0D6342;
  --bad-text:  #8E1C12;

  --hover: #EFF2F5;

  /* v2's radii. The app's cards are 16px now and its controls 11px. */
  --r-sm: 9px; --r-md: 11px; --r-lg: 16px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16,24,40,.05);
  --shadow-2: 0 1px 2px rgba(16,24,40,.05), 0 10px 26px -20px rgba(16,24,40,.35);
  --shadow-3: 0 12px 30px -10px rgba(16,24,40,.22);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The mock screens on look.html were written against the old names. Aliased
     rather than renamed, because a find-and-replace across 900 lines of
     hand-drawn mock is a way to break one of them silently. */
  --ok: var(--good);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⭐⭐ THE MOCK SCREENS ARE DARK, BECAUSE THE APP IS
   ═══════════════════════════════════════════════════════════════════════════
   `.shot` wraps six of the eight screens, `.hp` is the home page in the app's
   own shell, and `.phone` is the handset around the client report. Inside any
   of them the token names mean what they mean in the APP, so every rule
   look.html already had keeps working and simply resolves dark.

   ⛔ DO NOT ADD A PAGE-LEVEL RULE THAT PAINTS INSIDE A MOCK. A marketing page
   deciding what a button in a screenshot looks like is how the pictures stop
   telling the truth about the product.

   ⚠ .rep and .dvi are NOT in this list on purpose — the client report and the
   tech tablet carry their own palettes in look.html, because in the real app
   they carry their own too: the report is light for a client reading it in a
   car park, and the tablet is dark for a bay. */
.shot, .hp, .phone {
  /* ⛔⛔ THIS `color` LINE IS LOAD-BEARING AND IT IS NOT OBVIOUS WHY.
     Re-declaring a custom property on a wrapper only changes what `var()`
     resolves to for rules that MATCH something inside it. `body { color:
     var(--ink-1) }` was already resolved, on the body, against the LIGHT
     value — and color INHERITS. So every element in a mock that does not set
     its own color (a stat's big number, a card heading, a row title) came out
     #121820 on #0B0E12: near-black text on a near-black screen.
     The first render of this page had six pieces of text that were simply not
     there. Setting the color ON the wrapper makes it re-resolve with the dark
     value and inherit down from here instead. */
  color: var(--ink-1);

  --sf-0: #0B0E12;
  --sf-1: #141920;
  --sf-2: #141920;
  --sf-3: #10151B;
  --sf-4: #1B222B;
  --sf-5: #1A2028;

  --ink-1: #E9EDF2;
  --ink-2: #E9EDF2;
  --ink-3: #939DAA;
  --ink-4: #6E7884;
  --ink-5: #59626D;

  --line-1: #1E2630;
  --line-2: #2A333F;
  --line-3: #36414F;

  --brand:      #F0A81E;
  --brand-hi:   #F2BE52;
  --brand-soft: #F2BE52;
  --brand-ink:  #0B0E12;
  --brand-wash: #2A2008;
  --brand-line: #4A3A10;
  --brand-ring: rgba(240,168,30,.18);

  --good: #4FC095;  --good-wash: #0E2119;  --good-line: #1B4435;
  --warn: #F2BE52;  --warn-wash: #221A09;  --warn-line: #453612;
  --bad:  #D8524A;  --bad-wash:  #221110;  --bad-line:  #4A2320;

  --good-text: #8FD9B8;
  --warn-text: #F2BE52;
  --bad-text:  #EE8C82;

  --hover: #1A2028;

  /* ⛔⛔ AND --ok HAS TO BE RESTATED HERE, WHICH IS NOT OBVIOUS EITHER.
     `:root` says `--ok: var(--good)`. A custom property's value is computed
     WHERE IT IS DECLARED, so --ok became #0F7048 up at :root — the light
     green — and then inherited that finished color down into the mocks.
     Redefining --good below it changes nothing, because --ok was never a
     reference after the first substitution.
     Measured: every `+13.0%` on the income statement and every `Booked ✓` on
     the callbacks screen was the light-mode green on a near-black card, at
     2.88:1. Restating it here makes it recompute against THIS block's --good.
     ⚠ The same trap waits for any other alias added to :root. */
  --ok: var(--good);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sf-0); color: var(--ink-1);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-wash); }

/* ⚠ THE GLOW MUST NEVER BE ABLE TO WIDEN THE PAGE (the phone pass, Sep 6).
   It is 900px wide and centred with a transform, so on a 390px phone its box
   reaches 255px past the right edge. Nothing scrolls today only because
   `position: fixed` takes it out of flow — which is a fact about the layout,
   not a promise, and one `position: absolute` typed by somebody later turns a
   decoration into a sideways scrollbar on every page of the site.
   `max-width: 100vw` costs nothing and makes it impossible.
   ⚠ Sep 18: on a light page a glow has to be far weaker than on a black one —
   the same opacity that read as a soft halo on #0d0f12 reads as a stain on
   #F5F7F9. It is now a mustard breath at .10 rather than an orange one at .15. */
.glow {
  position: fixed; top: -320px; left: 50%; transform: translateX(-50%);
  width: 900px; max-width: 100vw; height: 640px;
  background: radial-gradient(closest-side, rgba(240,168,30,.10), transparent 70%);
  pointer-events: none; z-index: 0;
}
.wrap { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 22px; }
.wrap.wide { max-width: 920px; }

/* ── the mark ──────────────────────────────────────────────────────────────
   ONE DEFINITION, IMPORTED — the same rule as the app. Nothing draws the
   dinosaur inline any more; every page masks site/ms-mark.svg and tints it
   with currentColor, so the animal is redrawn once and changes everywhere.
   (Until Aug 26 the site still carried the OLD sauropod as an inline path,
   months after the app had moved to the T-rex. That is what an inline copy
   always eventually does.)

   THE URL IS RELATIVE, AND HAS TO BE. These pages are served twice: at the
   root of runmustardseed.com, and at /teaser on the app host so the site can
   be looked at without touching DNS. On the app host everything outside
   /teaser is behind the sign-in wall, so an absolute '/ms-mark.svg' comes back
   401 and the mark disappears. A url() in a stylesheet resolves against the
   STYLESHEET, so 'ms-mark.svg' is right in both places. Same for every href
   on these three pages. */
.ms-mark {
  display: inline-block; flex: none; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: url('ms-mark.svg') center / contain no-repeat;
          mask: url('ms-mark.svg') center / contain no-repeat;
}

header { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 0; gap: 12px; flex-wrap: wrap; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--ink-1); text-decoration: none; }
.mark .g { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--brand); display: grid; place-items: center; color: var(--brand-ink); font-size: 20px; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase;
  color: var(--brand-soft); border: 1px solid var(--brand-line); background: var(--brand-wash);
  border-radius: var(--r-pill); padding: 5px 11px;
}

.hero { padding: 70px 0 8px; }
h1 { font-size: 42px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 18px; font-weight: 700; max-width: 14ch; }
h1 em { font-style: normal; color: var(--brand); }
.lead  { font-size: 17px; color: var(--ink-2); margin: 0 0 10px; max-width: 600px; text-wrap: pretty; }
.lead2 { font-size: 15px; color: var(--ink-3); margin: 0; max-width: 600px; text-wrap: pretty; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; padding: 32px 0 0; }
.btn {
  appearance: none; font: inherit; font-size: 13.5px; font-weight: 500;
  border-radius: var(--r-md); padding: 0 18px; height: 40px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-1); border: 1px solid var(--line-2); color: var(--ink-1);
  transition: background .12s, border-color .12s;
}
/* ⚠ A WHITE FILM DOES NOTHING ON A WHITE PAGE. This was rgba(255,255,255,.05),
   which on the dark site was a visible lift and here is nothing at all — a
   button with no hover reads as a button that is not working. */
.btn:hover { background: var(--hover); border-color: var(--line-3); }
.btn.p { background: var(--brand); border-color: transparent; color: var(--brand-ink); font-weight: 600; }
.btn.p:hover { background: var(--brand-hi); border-color: transparent; }
.btn.s { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn.s:hover { background: var(--hover); color: var(--ink-1); }

section { padding: 74px 0 0; }
h2 { font-size: 26px; letter-spacing: -.025em; margin: 0 0 10px; font-weight: 700; }
.say { margin: 0 0 26px; color: var(--ink-3); font-size: 15.5px; max-width: 640px; text-wrap: pretty; }

/* ══ THE ORIGIN STORY AND THE OLD BILL ════════════════════════════════
   `.story` is several short paragraphs in a row, so it needs tighter spacing than
   `.say`, which is written to stand alone under a heading.

   ⭐ `.bill` IS DRAWN AS AN INVOICE, and that is the whole idea: the reader is a
   shop owner, an itemised list with a rule above the total is the most familiar
   object in his working life, and it says "this is a real bill somebody paid"
   without a word of copy doing it.

   ⚠ IT IS NOT A `<table>`. This file's own header says the app's tables have no
   business on a marketing page, and a table would also have to be made to behave
   on a phone. Rows of flex do the same job and stack on their own. */
.story { max-width: 640px; margin: 0 0 26px; }
.story p { margin: 0 0 14px; color: var(--ink-3); font-size: 15.5px; line-height: 1.6;
  text-wrap: pretty; }
.story p:last-child { margin-bottom: 0; }
.story strong { color: var(--ink-1); font-weight: 600; }

.bill { max-width: 460px; margin: 0 0 30px; background: var(--sf-2);
  border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: 8px 18px 16px;
  box-shadow: var(--shadow-1); }
.bill-r, .bill-t { display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  font-size: 14.5px; border-bottom: 1px solid var(--line-1); }
.bill-r:last-of-type { border-bottom: 0; }
.bill-r span { flex: 1; color: var(--ink-2); }
.bill-r b { font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--ink-3); white-space: nowrap; }
/* ⚠ THE FIGURE IS MONO, THE WORDS BESIDE IT ARE NOT. Monospacing is what makes a
   column of prices line up; run "a shop" through it too and the letters sit so far
   apart the phrase reads as three separate words. */
.bill-r b i { font-family: var(--font); font-style: normal; font-size: 12.5px;
  color: var(--ink-4); margin-left: 5px; }
/* The total gets the heavier rule above it that a real invoice has. */
.bill-t { border-top: 2px solid var(--line-2); border-bottom: 0; margin-top: 4px;
  padding-top: 14px; }
.bill-t span { flex: 1; font-weight: 600; color: var(--ink-1); }
/* ⚠ THE TOTAL IS NOT MONO. At 18px bold the monospace comma gets a full character
   cell of its own and "$5,995" reads as "$5 , 995". `tabular-nums` lines the digits
   up just as well without doing that to the punctuation. */
.bill-t b { font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 700; color: var(--ink-1); letter-spacing: -.02em;
  white-space: nowrap; }
.bill-y { font-size: 12.5px; color: var(--ink-4); margin-top: 10px; line-height: 1.5; }

@media (max-width: 560px) {
  /* ⚠ On a phone the label and the figure stop sharing a line: "Communication and
     training" against "$625" left about nine characters for the label and it wrapped
     to three lines against a single figure. Stacked, each row reads in one go. */
  .bill { max-width: none; }
  .bill-r, .bill-t { display: block; }
  .bill-r b, .bill-t b { display: block; margin-top: 3px; }
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: var(--sf-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: 20px 18px; box-shadow: var(--shadow-1); }
.card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.card .n { display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--brand); margin-bottom: 12px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid.one { grid-template-columns: 1fr; }
.item { display: flex; gap: 11px; align-items: flex-start; background: var(--sf-2); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 13px 15px; }
.item .tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--good-wash); border: 1px solid var(--good-line); color: var(--good);
  display: grid; place-items: center; font-size: 10px; margin-top: 2px;
}
.item .tick.q { background: var(--brand-wash); border-color: var(--brand-line); color: var(--brand-soft); font-weight: 600; }
.item b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.item span { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.callout {
  margin-top: 16px; background: var(--sf-1); border: 1px solid var(--line-1);
  border-left: 2px solid var(--brand); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 20px 22px;
}
.callout h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.callout ul { margin: 0; padding-left: 18px; color: var(--ink-3); font-size: 13.5px; }
.callout li { margin-bottom: 5px; }
.callout p { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* ── the steps. Used by "How this actually goes" — numbered, because it is a
      sequence and a bulleted list would not say that. ─────────────────────── */
.steps { display: grid; gap: 10px; counter-reset: s; }
.step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  background: var(--sf-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: 16px 18px;
}
.step::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-wash); border: 1px solid var(--brand-line); color: var(--brand-soft);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  display: grid; place-items: center;
}
.step b { display: block; font-size: 14px; font-weight: 600; margin: 4px 0 4px; }
.step span { display: block; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; text-wrap: pretty; }

.quote { margin: 74px 0 0; padding: 22px 24px; border-left: 2px solid var(--brand); background: var(--sf-1); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.quote p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.quote span { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-4); }

footer {
  margin-top: 74px; padding: 26px 0 40px; border-top: 1px solid var(--line-1);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  color: var(--ink-4); font-size: 12px;
}
footer a { color: var(--ink-3); text-decoration: none; }
footer a:hover { color: var(--ink-1); }

/* ── the contact panel ─────────────────────────────────────────────────── */
/* ⚠ The veil stays a DARK scrim even on a light page. A pale scrim over a pale
   page does not say "the thing behind this is waiting" — it just looks like
   the page faded. */
.veil { position: fixed; inset: 0; background: rgba(16,24,40,.45); backdrop-filter: blur(3px); z-index: 40; display: none; place-items: center; padding: 20px; overflow: auto; }
.veil.on { display: grid; }
.panel { width: 100%; max-width: 430px; background: var(--sf-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: 24px 24px 20px; box-shadow: var(--shadow-3); }
.panel h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; }
.panel .sub { margin: 0 0 20px; font-size: 13px; color: var(--ink-3); }
.row { margin-bottom: 13px; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px; }
label span { color: var(--ink-4); font-weight: 400; }
input, textarea, select {
  width: 100%; background: var(--sf-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  color: var(--ink-1); font: inherit; font-size: 13.5px; padding: 9px 11px;
}
input, select { height: 38px; }
textarea { min-height: 78px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); background: var(--sf-1); }
/* The bot trap. NAMED CAREFULLY: this used to be `.hp`, and the moment three
   pages started sharing one stylesheet that collided with look.html's `.hp` —
   its home-page mock — and collapsed a 891px screenshot to two pixels of
   border. Caught in the browser, Aug 26. A short class name is fine inside one
   file and a landmine across four. */
.botfield { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.acts { display: flex; gap: 10px; margin-top: 18px; }
.acts .btn { flex: 1; }
.note { margin-top: 14px; font-size: 11.5px; color: var(--ink-4); text-align: center; }
.msg { display: none; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 500; }
.msg.bad { display: block; background: var(--bad-wash); border: 1px solid var(--bad-line); color: var(--bad-text); }
.done { text-align: center; padding: 14px 0 6px; }
.done .tick { width: 46px; height: 46px; border-radius: 50%; background: var(--good-wash); border: 1px solid var(--good-line); color: var(--good); display: grid; place-items: center; margin: 0 auto 16px; font-size: 22px; }
.done h2 { margin-bottom: 8px; }

/* ⚠ ONE BREAKPOINT ACROSS THE SITE (the phone pass, Sep 6). This said 720,
   look.html said 800 and included.html said 760 — so between 720 and 800 the
   three pages disagreed about whether they were on a phone, and a visitor
   turning a tablet sideways got one page stacked and the next one not. */
@media (max-width: 760px) {
  h1 { font-size: 30px; max-width: none; }
  h2 { font-size: 22px; }
  .cards, .grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 0; }
  section { padding: 56px 0 0; }
  .row.two { grid-template-columns: 1fr; }
  .step { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px 15px; }
  .step::before { width: 26px; height: 26px; font-size: 12px; }
  /* A thumb needs a target. Every button on the site is already 40px; this
     keeps it that way if one is ever put inside a tight row. */
  .btn { min-height: 44px; }
  input, select { height: 44px; font-size: 16px; }
  textarea { font-size: 16px; }

  /* ⭐ THE FOOTER LINKS WERE 14 PIXELS TALL. Measured, not guessed: every
     footer link on all three pages had a 14px hit area, which is a third of
     what a thumb needs and about a fifth of what a thumb HAS. They are the
     only way between the three pages on a phone, so the one navigation the
     site has was the one thing on it you could not reliably press.
     Padding, not a bigger font — the type size is right, the target was not.
     `margin: -10px` keeps the row looking exactly as it did while the target
     grows outward past the text. */
  footer { flex-wrap: wrap; gap: 4px 14px; }
  footer a { display: inline-block; padding: 12px 4px; margin: -12px 0; }

  /* Same reason: the wordmark is a link home and it was 28px. */
  .mark { padding: 8px 0; margin: -8px 0; }
}