/* Standfast Commerce — site stylesheet.
   Accessibility first: large type, high contrast, visible focus, no horizontal scroll.
   Colours are tokens on :root and are redefined for dark mode. */

:root {
  --bg: #ffffff;
  --bg-alt: #f3f4f6;
  --ink: #111111;
  --ink-soft: #333333;
  --line: #9a9a9a;
  --link: #0b4fa8;
  --link-visited: #5b2a86;
  --accent: #0b4fa8;
  --focus: #ffbf00;
  --warn-bg: #fff4d6;
  --warn-line: #8a5a00;
  --ok-bg: #e6f4ea;
  --ok-line: #1e6b3a;
  --no-bg: #fbe9e7;
  --no-line: #8a1c0f;
  --max: 46rem;
  --gutter: 16px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --bg-alt: #1a1d23;
    --ink: #f4f4f4;
    --ink-soft: #d6d6d6;
    --line: #6b6b6b;
    --link: #8ab4ff;
    --link-visited: #c9a3ff;
    --accent: #8ab4ff;
    --focus: #ffd75e;
    --warn-bg: #3a2c00;
    --warn-line: #ffd75e;
    --ok-bg: #0f2e1a;
    --ok-line: #7fd39a;
    --no-bg: #3b1410;
    --no-line: #ff9d8c;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115;
  --bg-alt: #1a1d23;
  --ink: #f4f4f4;
  --ink-soft: #d6d6d6;
  --line: #6b6b6b;
  --link: #8ab4ff;
  --link-visited: #c9a3ff;
  --accent: #8ab4ff;
  --focus: #ffd75e;
  --warn-bg: #3a2c00;
  --warn-line: #ffd75e;
  --ok-bg: #0f2e1a;
  --ok-line: #7fd39a;
  --no-bg: #3b1410;
  --no-line: #ff9d8c;
}

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

html {
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (max-width: 480px) { html { font-size: 19px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
a { overflow-wrap: anywhere; }

img, svg, video { max-width: 100%; height: auto; }

/* Skip link */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1rem;
  z-index: 100;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
}
.skip:focus { top: var(--gutter); outline: 4px solid var(--focus); }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

/* Links */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.09em; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 0.18em; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 64rem; margin: 0 auto; padding: 0 var(--gutter); }

header.site {
  border-bottom: 2px solid var(--line);
  background: var(--bg);
}
header.site .wrap-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
.brand {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  padding: 0.3rem 0;
}
.brand:visited { color: var(--ink); }
nav.main ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.2rem;
}
nav.main a {
  display: inline-block;
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid transparent;
}
nav.main a:visited { color: var(--ink); }
nav.main a:hover { text-decoration: underline; }
nav.main a[aria-current="page"] {
  border-color: var(--ink);
  font-weight: 700;
}

main { padding: 1.5rem 0 3rem; }
main > * + * { margin-top: 0; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0.5rem 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.75rem 0 0.5rem; }
@media (min-width: 853px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.7rem; }
}
p, li, dd, dt, td, th, label, legend { font-size: 1rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
li { margin: 0 0 0.5rem; }
li > ul, li > ol { margin-top: 0.5rem; }

.lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.small { font-size: 0.9rem; color: var(--ink-soft); }
.proof { font-size: 0.95rem; font-weight: 700; color: var(--accent); margin: -0.35rem 0 1.25rem; }

hr { border: 0; border-top: 2px solid var(--line); margin: 2.5rem 0; }

/* Callouts */
.note, .warn, .ok, .no {
  padding: 1rem 1.1rem;
  border-left: 8px solid var(--line);
  background: var(--bg-alt);
  margin: 1.25rem 0;
  border-radius: 0 6px 6px 0;
}
.note > :last-child, .warn > :last-child, .ok > :last-child, .no > :last-child { margin-bottom: 0; }
.warn { background: var(--warn-bg); border-left-color: var(--warn-line); }
.ok { background: var(--ok-bg); border-left-color: var(--ok-line); }
.no { background: var(--no-bg); border-left-color: var(--no-line); }

blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 8px solid var(--accent);
  background: var(--bg-alt);
  font-size: 1.15rem;
  line-height: 1.5;
}
blockquote p { margin: 0 0 0.5rem; }
blockquote cite { display: block; font-style: normal; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* Buttons */
.button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 0.8rem 1.3rem;
  min-height: 48px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 3px solid var(--ink);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.3;
}
.button:visited { color: var(--bg); }
.button:hover { text-decoration: underline; }
.button.secondary { background: var(--bg); color: var(--ink); }
.button.secondary:visited { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 1.5rem; }

/* Tables: a scrolling region keeps table semantics and stops page-level horizontal scroll */
.table-wrap {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  border: 2px solid var(--line);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: 4px solid var(--focus); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
caption { text-align: left; font-weight: 700; padding: 0.75rem 0.9rem; caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); line-height: 1.45; overflow-wrap: normal; min-width: 8rem; }
caption { overflow-wrap: normal; }
thead th { background: var(--bg-alt); border-top: 0; }
tbody th { font-weight: 700; }
td.num, th.num { text-align: right; white-space: nowrap; }
.scroll-hint { font-size: 0.85rem; color: var(--ink-soft); margin: -0.75rem 0 1.25rem; }
@media (min-width: 700px) { .scroll-hint { display: none; } }

/* Tier cards and definition lists */
.tiers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 853px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier {
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 0.5rem;
  background: var(--bg);
}
.tier h3 { margin-top: 0; }
.price { font-size: 1.6rem; font-weight: 800; margin: 0.25rem 0 0.5rem; letter-spacing: -0.01em; }
.price small { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
dl.facts { margin: 0 0 1rem; }
dl.facts dt { font-weight: 700; margin-top: 0.75rem; }
dl.facts dd { margin: 0.15rem 0 0; }

/* Forms */
form { margin: 1.25rem 0; }
fieldset { border: 2px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem 0.5rem; margin: 0 0 1.5rem; min-width: 0; }
legend { font-weight: 700; padding: 0 0.4rem; }
.field { margin: 0 0 1.1rem; }
label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.hint { display: block; font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.15rem; }
.field-error { display: block; font-weight: 700; font-size: 0.9rem; color: var(--no-line); margin: 0.35rem 0 0; }
input[aria-invalid="true"] { border-color: var(--no-line); }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"],
input[type="file"], select, textarea {
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink-soft);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  min-height: 48px;
}
textarea { min-height: 8rem; resize: vertical; }
.check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.75rem; font-weight: 400; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.2rem 0 0; flex: 0 0 auto; }
/* A checkbox's own .hint always starts its own full-width line rather than fighting the main
   label text for room on the first line — found 28 Sep 2026: with three inline links ahead of it
   (the terms checkbox), the hint span's own content could out-measure the leftover space on that
   first line without flex-wrap alone reliably moving it down, overflowing past 390px. */
.check .hint { flex-basis: 100%; margin-left: 2.2rem; }
[aria-disabled="true"] { opacity: 0.55; }
/* The Turnstile widget's own slot (src/dry-run.js) — empty and takes no space when the site key is
   not configured (the default); a small top margin once the widget itself renders into it. */
#dr-turnstile-slot:not(:empty) { margin: 0 0 1.25rem; }
button[type="submit"] { font: inherit; }
.status { margin-top: 1rem; }
.status:empty { display: none; }

/* The dry-run outcome's "save this before you leave" status-check link (src/dry-run.js's
   appendStatusLink) — a read-only, selectable field plus a Copy button, sized to wrap onto its own
   line at 390px rather than overflow. */
.status-link { margin-top: 1rem; padding: 1rem 1.1rem; border: 2px solid var(--line); border-radius: 8px; background: var(--bg-alt); }
.status-link label { margin-bottom: 0.5rem; }
.copy-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.copy-row input[type="text"] { flex: 1 1 240px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.copy-row .button { flex: 0 0 auto; }
.status-link p.small { margin: 0.6rem 0 0; }

/* Footer */
footer.site {
  border-top: 2px solid var(--line);
  margin-top: 2rem;
  padding: 1.5rem 0 2.5rem;
  background: var(--bg-alt);
}
footer.site ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
footer.site a { color: var(--ink); }
footer.site a:visited { color: var(--ink); }
footer.site address { font-style: normal; margin: 0 0 1rem; }
footer.site p { margin: 0 0 0.75rem; }

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sources { font-size: 0.95rem; }
.sources li { margin-bottom: 0.6rem; }
.toc { border: 2px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem 0.5rem; margin: 1.25rem 0; background: var(--bg-alt); }
.toc h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.toc ol { margin-bottom: 0.5rem; }
kbd, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--bg-alt); padding: 0.05em 0.35em; border-radius: 4px; }
pre { background: var(--bg-alt); padding: 1rem; border-radius: 6px; overflow-x: auto; }

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   CRAFT — the details that make a page read as a product rather than a document.
   Added 26 September 2026 on the owner's "make sure the website looks and feels premium".

   WHAT IS DELIBERATELY NOT TOUCHED, and why. `html { font-size: 20px }` and the high-contrast token
   set are here because the owner is nearly blind; they are the accessibility floor of this site and
   nothing below shrinks type, lightens ink or lowers contrast to look more fashionable. That trade
   would be a bad one anyway: large type with real hierarchy reads as MORE considered, not less — the
   problem with this page was never its size, it was that thirteen sections all had the same weight
   and nothing anchored the eye.

   Everything here is chosen to be unable to break a layout: no new widths, no floats, no grid, no
   positioning, no changes to the box model of anything that already lays out. That restraint is
   deliberate rather than timid — the browser extension is disconnected in this session so the
   390/853/1024 sweep that this project counts as part of "verified" cannot be run, and a layout
   change nobody has seen at phone width is exactly how a regression hid here for hours once before.
   The structural work — section banding, a real pricing table, a hero — is worth doing and is NOT
   done here; it needs that sweep in front of it.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */

/* Sub-pixel rendering. On macOS the default synthesises weight into letterforms and makes a bold
   heading look muddier than the typeface actually is. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Real apostrophes, quotes and ligatures. The copy on this site is written with them. */
  font-variant-ligatures: common-ligatures contextual;
}

/* Headings stop breaking one word onto their last line. `balance` is the single highest-value
   typographic property available to a page like this: an h1 that reads "a flat monthly / fee" looks
   careless in a way nobody can name, and this fixes every heading at every width at once. Unsupported
   browsers ignore it and lose nothing. */
h1, h2, h3, .lead {
  text-wrap: balance;
}
/* Body copy gets `pretty` instead: it leaves line lengths even but does not force short last lines,
   which is right for prose and wrong for headings. */
p, li, dd {
  text-wrap: pretty;
}

/* The display line. Tighter tracking at large sizes is not decoration — letterspacing that is correct
   at 20px is visibly loose at 50px, because tracking should fall as size rises. */
h1 {
  letter-spacing: -0.021em;
  font-weight: 800;
}
@media (min-width: 40rem) {
  h1 { letter-spacing: -0.026em; }
}

/* Section headings earn their separation from the paragraph above rather than from a bigger gap. The
   hairline is the cheapest way to turn thirteen equal sections into thirteen legible ones, and a
   border-top on an element already in flow cannot move anything sideways. */
h2 {
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  /* The first heading after the intro should not get a rule immediately under the buttons. */
}
h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* MONEY. Proportional digits make a rate card look hand-typed: in "$149" and "$299" the 1 occupies
   less width than the 2, so a column of prices will not align and the eye reads it as approximate.
   Tabular figures are what every financial document uses and they cost nothing. */
table, .proof, .price, td, th,
/* the rate card's own prices, whatever element they land in */
b, strong {
  font-variant-numeric: tabular-nums;
}

/* The evidence line under the headline carries the one verifiable claim on the page. It was set at
   0.95rem — smaller than body copy — which is the opposite of the emphasis it deserves. */
.proof {
  font-size: 1rem;
  letter-spacing: 0.002em;
}

/* Buttons. A call to action reads as considered when its label has room around it and its weight is
   unambiguous; these are padding and weight only, so nothing reflows. */
.button {
  font-weight: 700;
  letter-spacing: 0.004em;
  padding: 0.75em 1.25em;
  border-radius: 6px;
  /* A press should be felt. 80ms is below the threshold at which a transition reads as slow. */
  transition: transform 80ms ease-out, background-color 120ms ease-out;
}
.button:active {
  transform: translateY(1px);
}
/* Respect a reader who has asked the system for less movement. */
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:active { transform: none; }
}

/* Links in prose get a thinner, lower underline than the browser's default, which sits on the
   baseline and cuts descenders. This is the detail that most reliably separates a designed page from
   a default one, and it changes no geometry. */
p a, li a, dd a {
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.07em;
}

/* A heading that is also a link should not be underlined twice over. */
h1 a, h2 a, h3 a { text-decoration-thickness: 0.05em; }