/* Minimal, system-font stylesheet. No external assets, no web fonts, no
   trackers. Works in light and via prefers-color-scheme.
   NOTE (2026-08-10): the site is no longer strictly JS-free -- calculator
   pages carry a small inline progressive-enhancement script. There is still
   no external or third-party JS, and every calculator renders its numbers as
   static tables that work with scripting off. Do not "restore" a no-JS claim
   here; state the property accurately instead. */
:root {
  --fg: #1a1a1a; --bg: #fff; --muted: #555; --line: #ddd;
  --accent: #0a5; --accent-contrast: #fff;
  --placeholder-bg: #fff8e1;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8e8e8; --bg: #111; --muted: #aaa; --line: #333;
          --accent: #4d8; --accent-contrast: #111; --placeholder-bg: #2a2410; }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  font: 100%/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 72ch; margin: 0 auto; padding: 0 1rem 2rem;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; border: 1px solid var(--line); }
.site-header { display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--line); }
.site-home { font-weight: 600; text-decoration: none; color: var(--fg); }
.site-header nav a { margin-left: 1rem; color: var(--fg); }
main { padding: 1.5rem 0; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.5em; }
a { color: var(--accent); }
.tags { font-size: .85em; color: var(--muted); }
.tag { display: inline-block; margin-right: .4em; padding: .1em .5em;
  background: var(--line); border-radius: 3px; }
.hub-list, .landing-list { list-style: none; padding: 0; }
.hub-list li, .landing-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.hub-list p, .landing-list p { margin: .2rem 0; color: var(--muted); }

/* Lead form */
.lead-form { max-width: 38em; margin: 2rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.lead-form h2 { margin-top: 0; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.field input, .field select { width: 100%; padding: .5rem; font: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg); }
.field-checkbox { display: flex; gap: .5rem; align-items: flex-start; }
.field-checkbox input { width: auto; margin-top: .3rem; }
.lead-form button { padding: .6rem 1.2rem; font: inherit; font-weight: 600;
  background: var(--accent); color: var(--accent-contrast); border: 0; border-radius: 4px; cursor: pointer; }
.lead-form button:hover { filter: brightness(1.1); }
.form-foot { font-size: .85em; color: var(--muted); }

/* Disclosure block. Sits ABOVE the form so the consumer reads it before
   they tick the consent checkbox. */
.disclosure { background: var(--placeholder-bg); border-left: 4px solid var(--accent);
  padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 4px; }
.disclosure-text { white-space: pre-line; }
.disclosure-meta { font-size: .85em; color: var(--muted); }
.disclosure code, .buyer-list code { font-family: ui-monospace, monospace; }
.buyer-list { margin: .5rem 0; padding-left: 1.2rem; }

.placeholder-note { font-size: .8em; color: var(--muted); font-style: italic;
  background: var(--placeholder-bg); padding: .5rem .75rem; border-radius: 4px; }

.site-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .85em; color: var(--muted); }
.site-footer .legal { max-width: 60ch; }

/* Calculator (progressive enhancement) */
.calculator {
  border: 1px solid var(--line); border-radius: 6px;
  padding: 1.25rem; margin: 2rem 0;
  background: var(--placeholder-bg);
}
.calculator h2 { margin-top: 0; }
.calculator h3 { margin-top: 1.25em; font-size: 1.05em; }
.calc-form { margin: 1.25rem 0; }
.calc-field { margin-bottom: 1rem; }
.calc-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.calc-field input, .calc-field select {
  width: 100%; max-width: 28em; padding: .5rem; font: inherit;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--fg);
}
.calc-result {
  font-size: 1.3em; font-weight: 600; padding: .75rem;
  border: 2px solid var(--accent); border-radius: 4px;
  background: var(--bg); margin: 1rem 0;
}
.calc-result-range { font-size: .7em; font-weight: 400; color: var(--muted); margin: .25rem 0 0; }
.calc-noscript { font-size: .9em; color: var(--muted); font-style: italic; margin: .5rem 0; }
.calc-sources { font-size: .85em; color: var(--muted); padding-left: 1.2rem; }
.calc-sources li { margin-bottom: .3rem; }
.calc-formula { font-size: .95em; }
.calc-table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .92em; }
.calc-table th, .calc-table td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--line); }
.calc-table thead th { font-weight: 600; background: var(--line); }
@media (max-width: 40em) {
  .calc-table { font-size: .85em; }
  .calc-table th, .calc-table td { padding: .35rem .4rem; }
}