/* ==========================================================================
   Site stylesheet. One file, no build step.
   Brand name lives in assets/site.js (SITE_BRAND). Colors are tokens on :root.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Surfaces and text (light) */
  --paper: #f7f5f0;
  --paper-2: #edeae2;
  --paper-3: #e4e0d6;
  --ink: #1c1f1d;
  --ink-2: #4a4f4c;
  --line: #d3cfc5;
  --line-strong: #a9a59a;

  /* One accent: field green */
  --accent: #1f6f4a;
  --accent-hover: #175a3b;
  --accent-ink: #ffffff;
  --accent-soft: #e2eee7;

  /* Placeholder highlight (things Mark must fill) */
  --ph-bg: #fff4d6;
  --ph-line: #c99a2e;
  --ph-ink: #5b4300;

  /* Type */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-base: 1.0625rem;   /* 17px */
  --lh: 1.6;

  /* Layout */
  --measure: 66ch;
  --wrap: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141715;
    --paper-2: #1b1f1c;
    --paper-3: #232825;
    --ink: #e8e6df;
    --ink-2: #b3b1a8;
    --line: #333935;
    --line-strong: #555c57;

    --accent: #5fc48f;
    --accent-hover: #7bd3a3;
    --accent-ink: #0f1411;
    --accent-soft: #1d2d24;

    --ph-bg: #3a2f10;
    --ph-line: #c99a2e;
    --ph-ink: #ffe7a8;
  }
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
svg { fill: none; }

h1, h2, h3, h4 { margin: 0 0 var(--space-2); line-height: 1.15; font-weight: 600; }
h1, h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p, ul, ol, dl { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
p, li, dd { max-width: var(--measure); }
small, .small { font-size: 0.9rem; }
strong { font-weight: 600; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

code, kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--paper-2); padding: 0.05em 0.35em; border-radius: 3px; overflow-wrap: anywhere; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }

/* ---------- Utilities ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-2); }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.eyebrow {
  display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1);
}
.measure { max-width: var(--measure); }
/* Keyword line inside a slogan h1 (index.html): says what the page is about, in the heading search engines read. */
.h1-kicker {
  display: block; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0; color: var(--ink-2); margin-bottom: var(--space-1);
}

/* Placeholder token for copy Mark must supply */
.ph {
  font-family: var(--font-mono); font-size: 0.85em; background: var(--ph-bg); color: var(--ph-ink);
  border: 1px dashed var(--ph-line); border-radius: 3px; padding: 0.05em 0.4em; white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 0.7rem 1.2rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; line-height: 1.2; border: 1.5px solid transparent;
  cursor: pointer; font-family: inherit; font-size: 1rem;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: relative; z-index: 20;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 4.25rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.wordmark svg { width: 30px; height: 30px; color: var(--accent); }
.wordmark .brand-name { white-space: nowrap; }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.45rem 0.6rem; color: var(--ink); cursor: pointer; font: inherit; font-weight: 600;
  align-items: center; gap: 0.5rem;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.site-nav a {
  display: block; padding: 0.5rem 0.75rem; color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-radius: var(--radius); border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); border-radius: 0; }
.site-nav .nav-cta a { background: var(--accent); color: var(--accent-ink); margin-left: 0.5rem; }
.site-nav .nav-cta a:hover { background: var(--accent-hover); }
.site-nav .nav-cta a[aria-current="page"] { border-bottom-color: transparent; border-radius: var(--radius); }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px -12px rgba(0,0,0,0.25);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; padding: var(--space-2) var(--gutter) var(--space-3); gap: 0; }
  .site-nav a { padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.9rem; }
  .site-nav .nav-cta a { margin: var(--space-2) 0 0; border-bottom: 0; text-align: center; border-radius: var(--radius); }
}

/* ---------- Sections ---------- */
main { display: block; }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-tint { background: var(--paper-2); }
.section-head { margin-bottom: var(--space-4); max-width: 72ch; }
.section-head h2::before {
  content: ""; display: block; width: 2.5rem; height: 3px; background: var(--accent); margin-bottom: var(--space-2);
}
.section-head p { font-size: 1.1rem; color: var(--ink-2); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem); }
.hero-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-5); } }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-bottom: var(--space-3); }

/* Spec sheet block (used in hero and elsewhere) */
.spec {
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper);
  padding: var(--space-3);
}
.spec h2, .spec h3 {
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: var(--space-2); font-weight: 600;
}
.spec ul { list-style: none; margin: 0; padding: 0; }
.spec li {
  display: grid; grid-template-columns: 22px 1fr; gap: 0.7rem; align-items: start;
  padding: 0.65rem 0; border-top: 1px solid var(--line); max-width: none;
}
.spec li:first-child { border-top: 0; padding-top: 0; }
.spec li svg { width: 22px; height: 22px; color: var(--accent); margin-top: 0.1rem; }
.spec li strong { display: block; }
.spec li span { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- Icon list (line icons) ---------- */
.icon-grid { display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .icon-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .icon-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.icon-grid li { max-width: none; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2); align-items: start; }
.icon-grid svg { width: 40px; height: 40px; color: var(--accent); }
.icon-grid h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.icon-grid p { color: var(--ink-2); font-size: 0.97rem; }

/* ---------- Service rows ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc {
  display: grid; gap: var(--space-2) var(--space-4); padding-block: var(--space-4);
  border-top: 1px solid var(--line-strong);
  grid-template-columns: 1fr;
}
.svc:last-child { border-bottom: 1px solid var(--line-strong); }
/* Two columns: number | text, with the fact box under the text. */
@media (min-width: 700px) {
  .svc { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .svc-aside { grid-column: 2; }
}
/* No three-column layout: the list sits in a ~40rem reading column, too narrow for three. */
.svc-num { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; color: var(--accent); }
.svc-body h3 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; }
.svc-body .who { color: var(--ink-2); font-size: 0.97rem; }
.svc-aside dl { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: var(--space-2) var(--space-3); }
.svc-aside dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-top: var(--space-2); }
.svc-aside dt:first-child { margin-top: 0; }
.svc-aside dd { margin: 0.15rem 0 0; }

/* ---------- Definition table (used in services detail) ---------- */
.facts { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: var(--space-3) 0; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts > div { border-top: 3px solid var(--accent); padding-top: var(--space-1); background: var(--paper-2); padding: var(--space-2); border-radius: 0 0 var(--radius) var(--radius); }
.facts h3, .facts h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.4rem; }
.facts ul { margin: 0; padding-left: 1.1rem; }
.facts li { font-size: 0.97rem; }

/* ---------- Two-column prose ---------- */
.cols-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 820px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
.cols-2 > * { min-width: 0; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.timeline li {
  position: relative; padding: 0 0 var(--space-3) 3.25rem; max-width: 70ch; counter-increment: step;
}
.timeline li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; background: var(--paper);
  font-family: var(--font-serif); font-size: 1.1rem;
}
.timeline li::after {
  content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.25rem; bottom: 0; width: 2px; background: var(--line);
}
.timeline li:last-child::after { display: none; }
.timeline h3 { font-size: 1.1rem; margin-bottom: 0.25rem; padding-top: 0.35rem; }
.timeline p { color: var(--ink-2); }
.timeline .when { display: inline-block; font-size: 0.8rem; color: var(--ink-2); font-family: var(--font-mono); margin-left: 0.5rem; }

/* ---------- Fences (never-without-approval list) ---------- */
.fences { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 720px) { .fences { grid-template-columns: 1fr 1fr; } }
.fences li {
  max-width: none; display: grid; grid-template-columns: 28px 1fr; gap: 0.8rem; align-items: start;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: var(--space-2); background: var(--paper);
}
.fences svg { width: 28px; height: 28px; color: var(--accent); }
.fences strong { display: block; }
.fences span { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--space-3);
  background: var(--paper-2); max-width: 76ch;
}
.callout h3 { font-size: 1.05rem; }
.callout.plain { background: transparent; }

/* ---------- Diagram ---------- */
.diagram { margin: var(--space-3) 0; }
.diagram svg { width: 100%; height: auto; color: var(--ink); }
.diagram .d-accent { color: var(--accent); }
.diagram-wide { display: none; }
.diagram-tall { display: block; max-width: 420px; }
@media (min-width: 720px) { .diagram-wide { display: block; } .diagram-tall { display: none; } }
.diagram-caption { font-size: 0.9rem; color: var(--ink-2); max-width: 70ch; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: var(--space-3) 0; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.97rem; }
th, td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
tbody th { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; }

/* ---------- Pricing ---------- */
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .price-list { grid-template-columns: repeat(2, 1fr); } }
.price {
  max-width: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: var(--space-3);
  background: var(--paper); display: flex; flex-direction: column; gap: var(--space-2);
}
.price h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; margin: 0; }
.price .from { font-size: 0.85rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.price .amount { font-size: 1.6rem; font-family: var(--font-serif); }
.price ul { padding-left: 1.1rem; margin: 0; flex: 1; }
.price li { font-size: 0.97rem; margin-bottom: 0.35rem; }
.price .btn { align-self: flex-start; }

/* ---------- Forms ---------- */
form { max-width: 44rem; }
.field { margin-bottom: var(--space-3); }
label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
label .req { color: var(--accent); }
.hint { display: block; font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.4rem; font-weight: 400; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 0.65rem 0.8rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--accent); }
textarea { min-height: 9rem; resize: vertical; }
.field-row { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--paper); padding-block: clamp(2.5rem, 6vw, 4rem); }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: var(--paper-3); }
.cta-band .btn-primary { background: var(--accent); }
.cta-band .btn-secondary { color: var(--paper); border-color: var(--paper-3); }
.cta-band .btn-secondary:hover { border-color: var(--paper); color: var(--paper); }
.cta-band a:not(.btn) { color: var(--paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-band { background: var(--paper-2); color: var(--ink); }
  :root:not([data-theme="light"]) .cta-band h2 { color: var(--ink); }
  :root:not([data-theme="light"]) .cta-band p { color: var(--ink-2); }
  :root:not([data-theme="light"]) .cta-band .btn-secondary { color: var(--ink); border-color: var(--line-strong); }
  :root:not([data-theme="light"]) .cta-band a:not(.btn) { color: var(--accent); }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-4); font-size: 0.93rem; color: var(--ink-2); }
.site-footer .wrap { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer .wrap { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 600; color: var(--ink-2); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.3rem; }
.site-footer a { color: var(--ink); }
.site-footer .wordmark { font-size: 1.15rem; margin-bottom: 0.5rem; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--space-2); font-size: 0.85rem; }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: var(--space-2); }
.page-head .btn-row { margin-top: var(--space-3); }
.cols-2 + p.measure { margin-top: var(--space-3); }

/* ---------- Print ---------- */
@media print {
  :root { --paper: #fff; --ink: #000; --ink-2: #333; --accent: #000; --accent-ink: #fff; }
  .site-header, .site-footer, .nav-toggle, .skip-link, .cta-band, .btn { display: none !important; }
  .site-nav { display: none !important; }
  body { font-size: 11pt; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  .ph { border: 1px dashed #000; background: none; }
}

/* ---------- Top contact bar (phone first) ---------- */
.topbar { background: var(--accent); color: var(--accent-ink); font-size: 0.92rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 1.25rem; padding-block: 0.4rem; }
.topbar a { color: inherit; text-decoration: none; font-weight: 600; }
.topbar a:hover, .topbar a:focus-visible { text-decoration: underline; }
.topbar-phone { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.02rem; letter-spacing: 0.01em; }
.topbar-phone svg { width: 1.05em; height: 1.05em; }
.topbar-hours { opacity: 0.9; }
@media (max-width: 640px) {
  .topbar .wrap { justify-content: center; }
  .topbar-hours, .topbar-mail { display: none; }
}
.hero-call { margin-top: var(--space-2, 0.75rem); color: var(--ink-2); }
.hero-call a { font-weight: 700; white-space: nowrap; }
.call-box { font-size: 1.05rem; }
.call-box a { white-space: nowrap; }

/* ---------- Conversion: start steps, CTA facts, founder, topic buttons, phone quick bar (2026-09-28) ---------- */
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; counter-reset: start; }
@media (min-width: 640px) { .start-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .start-steps { grid-template-columns: repeat(4, 1fr); } }
.start-steps li { counter-increment: start; border-top: 2px solid var(--accent); padding-top: 0.9rem; }
.start-steps li::before { content: counter(start); display: block; font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; color: var(--accent); margin-bottom: 0.4rem; }
.start-steps h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.start-steps p { color: var(--ink-2); font-size: 0.97rem; }
.start-more { margin-top: var(--space-3); }

.cta-facts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.4rem 1.5rem; grid-template-columns: 1fr; max-width: 62rem; }
@media (min-width: 720px) { .cta-facts { grid-template-columns: 1fr 1fr; } }
.cta-facts li { position: relative; padding-left: 1.5rem; color: var(--paper-3); font-size: 0.97rem; max-width: none; }
.cta-facts li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--accent-soft); border-bottom: 2px solid var(--accent-soft); transform: rotate(-45deg); }
.cta-band .cta-facts + .btn-row { margin-top: var(--space-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-facts li { color: var(--ink-2); }
  :root:not([data-theme="light"]) .cta-facts li::before { border-color: var(--accent); }
}

.promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .promise-list { grid-template-columns: 1fr 1fr; } }
.promise-list h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.promise-list p { color: var(--ink-2); }
.promise-list .src { font-size: 0.85rem; color: var(--ink-2); font-family: var(--font-mono); }

.topic-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.6rem; padding: 0; border: 0; }
.topic-picks legend { font-size: 0.9rem; color: var(--ink-2); padding: 0; margin-bottom: 0.3rem; width: 100%; }
.topic-picks button { font: inherit; font-size: 0.92rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; min-height: 2.25rem; }
.topic-picks button:hover { border-color: var(--accent); }
.topic-picks button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }

.quickbar { display: none; }
@media (max-width: 640px) {
  .quickbar { display: flex; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .quickbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; line-height: 1.2; }
  .quickbar .quickbar-call { border: 1.5px solid var(--line-strong); color: var(--ink); }
  .quickbar .quickbar-go { background: var(--accent); border: 1.5px solid var(--accent); color: var(--accent-ink); }
  .quickbar.is-hidden { display: none; }
  body.has-quickbar { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media print { .quickbar { display: none !important; } body.has-quickbar { padding-bottom: 0; } }
.opt { font-weight: 400; font-size: 0.9rem; color: var(--ink-2); }
.topic-picks[hidden] { display: none; }

/* start.html: the contract set under "What protects you, in writing" */
.contracts { margin-top: var(--space-4); }
.contracts h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }

/* ---------- Proof pages (2026-10-01): person block, proof line, figures, sample report ---------- */
/* about.html "Who runs Allodi". The portrait is optional: with no <figure class="person-photo"> the text takes the
   full width, so the block looks finished before the photo exists (README, "Proof pages"). */
.person { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-start; }
.person-photo { flex: 0 0 auto; width: min(100%, 200px); margin: 0; }
.person-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper-2); }
.person-body { flex: 1 1 20rem; min-width: 0; }
.person-name { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.2; margin-bottom: var(--space-1); }
.person-contact { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; color: var(--ink-2); }
.person-contact li { max-width: none; }
.person-contact a { white-space: nowrap; }

/* One modest line under a landing page's hero links: who runs Allodi, and the case study. */
.proof-line { margin-top: var(--space-2); font-size: 0.95rem; color: var(--ink-2); max-width: 60ch; }
.page-head .hero-call + .proof-line { margin-top: var(--space-1); }

/* case-study-corn-belt-aluminum.html: the figures, as a spec sheet of numerals. */
.figures { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: var(--space-3) 0; }
@media (min-width: 640px) { .figures { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures > div { border-top: 3px solid var(--accent); background: var(--paper-2); padding: var(--space-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; flex-direction: column; }
.section-tint .figures > div { background: var(--paper); }
.figures dt { order: 2; font-weight: 600; }
.figures dd { margin: 0; max-width: none; }
.figures .num { order: 1; font-family: var(--font-serif); font-size: 2.25rem; line-height: 1.1; color: var(--accent); }
.figures .note { order: 3; font-size: 0.93rem; color: var(--ink-2); }
.as-of { font-size: 0.95rem; color: var(--ink-2); }

/* sample-scan-report.html: the report tool's output, set as a document inside the page. */
.sample-report { border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper); padding: var(--space-3) clamp(1rem, 3vw, 2rem); }
.sample-report h2 { font-size: 1.6rem; }
.sample-report h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.sample-report h4 { margin-top: var(--space-3); }
.sample-report .table-wrap { margin: var(--space-2) 0 var(--space-3); }
/* The report's tables on a phone: a word, a column header or an amount never breaks inside itself. Only module
   names, which the report sets in <code>, may break anywhere; numeric cells (class "num", added by
   tools/build_sample_report.py) stay on one line. */
.sample-report td, .sample-report th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.sample-report td code { overflow-wrap: anywhere; }
.sample-report td.num { white-space: nowrap; }
/* In the table of modules, the short Type cell beside a module name stays whole ("Third-party"); the name gives way. */
.sample-report tr:has(td:first-child > code) td:nth-child(2) { white-space: nowrap; }
.sample-report td:first-child:has(> code) { width: 48%; }
@media (max-width: 480px) {
  .sample-report table { font-size: 0.85rem; }
  .sample-report th { font-size: 0.7rem; letter-spacing: 0.04em; }
  .sample-report th, .sample-report td { padding: 0.5rem 0.35rem; }
}
.sample-flag { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.15rem 0.5rem; margin-bottom: var(--space-2); }
/* Ad landing pages (2026-10-17): the price example under the upgrade lede, the note under its buttons, and the
   free scan's "On your phone?" box, which shows at the quick bar's phone width only (the scan itself needs a computer). */
.page-head .hero-example { margin-top: var(--space-1); }
.page-head .hero-note { margin-top: var(--space-1); }
.h3-like { font-size: 1.25rem; }
.page-head .phone-note { margin-top: var(--space-2); }
@media (min-width: 641px) { .phone-note { display: none; } }