/* ============================================================
   removethetank.com — design system
   Ported from the Claude Design handoff (design_handoff_removethetank).
   Tokens, type and spacing are final per that spec; recreated here as
   real classes rather than inline styles so every page shares them and
   the strict CSP stays intact.

   Rules from the handoff that are enforced here:
   - Sentence case everywhere. No ALL CAPS, including the wordmark.
   - Blue is for actions only. Red is the mark, price figures and the
     live estimate number only. Red never on a button; blue never on a
     price.
   - Text is centred. Exception, agreed with the client: running body
     prose and data tables inside long-form pages (guides, states,
     services, relief, situations) stay left-aligned for readability —
     see .prose below. Headers, cards and forms are centred everywhere.
   - 44px minimum touch targets. Small mono type clears 4.5:1.
   - Never put overflow-x:hidden on an ancestor of .site-header — it
     silently breaks position:sticky.
   ============================================================ */

:root {
  /* Colour */
  --surface:      #FAFBFC;
  --ink:          #0F1B2E;
  --ink-2:        #33465F;
  --muted:        #5A6B84;
  --blue:         #14428F;
  --blue-hover:   #1B57BE;
  --red:          #D33A20;
  --card:         #F1F5FA;
  --card-border:  rgba(15, 27, 46, .09);
  --hairline:     rgba(15, 27, 46, .12);
  --band:         rgba(255, 255, 255, .34);
  --panel:        rgba(255, 255, 255, .78);
  --field-border: rgba(15, 27, 46, .18);

  /* Legacy aliases so older component classes keep resolving */
  --paper: var(--surface);
  --signal: var(--red);
  --signal-ink: #FFFFFF;
  --hazard: #F3C000;
  --hazard-ink: #0F1B2E;
  --rule: var(--hairline);
  --zebra: var(--card);

  /* Type */
  --font-display: Archivo, sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Shadows */
  --shadow-btn: 0 10px 26px rgba(20, 66, 143, .24);
  --shadow-card: 0 1px 3px rgba(15, 27, 46, .05);
  --shadow-card-hover: 0 20px 40px rgba(20, 66, 143, .15);
  --shadow-band: 0 24px 60px rgba(20, 66, 143, .09);
  --shadow-panel: 0 24px 52px rgba(20, 66, 143, .13), 0 2px 6px rgba(15, 27, 46, .07);

  --content-max: 1520px;
  --pad-x: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Two faint wave lines over the base surface, fixed and cover-sized. */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271600%27%20height=%271200%27%3E%3Cg%20fill=%27none%27%20stroke=%27%231A4A96%27%20stroke-width=%271.4%27%3E%3Cpath%20d=%27M-40%20250%20C%20260%20120%20560%20380%20880%20250%20S%201400%20120%201660%20250%27%20stroke-opacity=%270.17%27/%3E%3Cpath%20d=%27M-40%20288%20C%20260%20158%20560%20418%20880%20288%20S%201400%20158%201660%20288%27%20stroke-opacity=%270.08%27/%3E%3Cpath%20d=%27M-40%20870%20C%20300%20730%20600%201020%20900%20870%20S%201420%20710%201660%20850%27%20stroke-opacity=%270.15%27/%3E%3Cpath%20d=%27M-40%20908%20C%20300%20768%20600%201058%20900%20908%20S%201420%20748%201660%20888%27%20stroke-opacity=%270.07%27/%3E%3C/g%3E%3C/svg%3E") 50% 50% / cover no-repeat fixed,
    var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* 2.2% multiply grain over everything, non-interactive. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .022;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.8%27%20numOctaves=%274%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
}

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

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0 auto 20px;
  text-wrap: balance;
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.03;
  max-width: 20ch;
  margin-bottom: 28px;
}

h1 .accent, h2 .accent { color: var(--red); }

h2 {
  font-weight: 700;
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0 auto 16px;
  max-width: 22ch;
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 34px auto 12px;
}

h4 {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.012em;
  margin: 26px auto 10px;
}

p, ul, ol { margin: 0 auto 16px; }
ul, ol { padding-left: 20px; text-align: left; display: inline-block; }
li { margin-bottom: 7px; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

strong { font-weight: 600; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 12px;
  letter-spacing: 0;
  text-transform: none;
}

.lede {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 auto 22px;
  text-wrap: pretty;
}

.answer-line {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 auto 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  text-wrap: pretty;
}

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.muted { color: var(--muted); }

.small {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
  margin: 0 auto 16px;
}

.note-rule {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  max-width: 52ch;
  margin: 0 auto 44px;
}

hr, .section-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 48px auto;
  max-width: 100%;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 249, 251, .94);
  border-bottom: 1px solid var(--hairline);
}

.site-header .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px var(--pad-x) 14px;
}

/* Wordmark: "Remove the" then an outlined tank with "Tank" inside it. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -.015em;
  text-decoration: none;
}

.wordmark:hover { color: var(--ink); text-decoration: none; }

.wordmark-tank {
  position: relative;
  display: inline-block;
  transform: translateY(-6px);
}

.wordmark-tank svg { display: block; overflow: visible; }

.wordmark-tank span {
  position: absolute;
  left: 0;
  right: 26px;
  top: 33px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 2px;
  text-indent: 2px;
  color: var(--red);
  text-align: center;
  pointer-events: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 26px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.site-nav a {
  color: var(--muted);
  padding: 8px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); }

.site-nav .nav-cta {
  background: var(--blue);
  color: #FFFFFF;
  padding: 11px 20px;
  border-radius: 3px;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(20, 66, 143, .26);
}

.site-nav .nav-cta:hover { background: var(--blue-hover); color: #FFFFFF; }

/* ---------- Layout ---------- */
main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

.hero { padding: 112px 0 88px; }

/* Sections after the hero are panels ("bands"). */
section {
  margin: 56px 0 0;
  padding: 44px var(--pad-x) 60px;
  background: var(--band);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--shadow-band);
}

section.hero, section.plain {
  margin: 0;
  padding: 112px 0 88px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

section.plain { padding: 40px 0 0; }

.narrow { max-width: 900px; margin: 0 auto; }

/* Long-form pages: keep running prose readable. The page header block
   (eyebrow, h1, answer-line) stays centred per the design; only the
   running text and tables below it go left. */
.prose { text-align: left; max-width: 74ch; margin: 0 auto; }
.prose > .eyebrow, .prose > h1, .prose > .answer-line, .prose > .lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.prose p, .prose ul, .prose ol { margin-left: 0; margin-right: 0; }
.prose ul, .prose ol { display: block; }
.prose h2, .prose h3, .prose h4 { margin-left: 0; margin-right: 0; max-width: none; }
.prose .small { margin-left: 0; margin-right: 0; }
.prose table { text-align: left; }

/* Wider content column for the data-heavy pages (cost, how-it-works, states).
   Those pages carry tables and panels that look starved in the 74ch reading
   column while the desktop leaves big empty margins on both sides. `.wide`
   gives the boxes the room the page already has; running text and lists keep
   a readable measure, so only the tables and panels grow — not the prose. */
.prose.wide { max-width: 960px; }
/* The centred header block and the short intro lines stay readable; body copy,
   lists, tables and panels fill the wider column, so nothing sits in a
   half-empty box. */
.prose.wide > .answer-line,
.prose.wide > .lede {
  max-width: 66ch;
  margin-left: auto;
  margin-right: auto;
}
/* Index lists and stat rows carry their own narrower caps; let them use the
   wider column too, and keep the three stats on one row. */
.prose.wide .index-list p { max-width: none; }
.prose.wide .stat-row { max-width: none; }
.prose.wide .stat-cell { flex-basis: 240px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding: 26px 0 0;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "·"; margin-right: 8px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }

/* ---------- Cards ---------- */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 0 auto;
}

.card {
  flex: 1 1 330px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}

.card-price {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--red);
  margin: 0 0 9px;
}

.card-desc {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 11px;
  text-wrap: pretty;
}

.card-link {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ---------- Buttons ---------- */
.cta, button.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  background: var(--blue);
  color: #FFFFFF;
  border: 0;
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  text-decoration: none;
}

.cta:hover, button.cta:hover { background: var(--blue-hover); color: #FFFFFF; text-decoration: none; }

.cta-block { width: 100%; min-height: 54px; margin-top: 22px; }

.cta-secondary, button.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--field-border);
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}

.cta-secondary:hover, button.cta-secondary:hover {
  background: rgba(20, 66, 143, .06);
  color: var(--blue-hover);
  text-decoration: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 28px auto 0;
}

/* ---------- Panels & forms ---------- */
.panel {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--shadow-panel);
  padding: 34px 30px 30px;
}

.panel-lg { max-width: 900px; padding: 46px 44px 40px; }

.panel-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0 auto 26px;
}

.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -.018em;
  margin: 0 auto 8px;
}

.step-sub {
  font-size: 16.5px;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 34px;
}

form { margin: 0; }

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  text-align: center;
}

.field-row-lg { gap: 18px; }

.field {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.field-narrow { flex: 1 1 150px; }
.field-wide { flex: 1 1 230px; }

.field > span, label > span, .field-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], select, textarea {
  width: 100%;
  height: 54px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--field-border);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 0 12px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  text-align-last: center;
  font-size: 14px;
}

textarea {
  height: auto;
  min-height: 110px;
  padding: 14px 12px;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}

legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--ink);
  padding: 0;
  margin: 0 auto 18px;
  display: block;
  width: 100%;
  text-align: center;
}

.check-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 16px auto;
  max-width: 62ch;
  text-align: left;
}

.check-row input[type="checkbox"], .check-row input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 3px;
  accent-color: var(--blue);
  flex-shrink: 0;
}

.check-row label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.radio-group { margin: 8px auto 16px; max-width: 62ch; }

/* Inline field + button pair (email capture) */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}

.inline-form input { flex: 1 1 260px; }
.inline-form .cta { flex: 1 1 200px; min-height: 54px; padding: 0 20px; }

/* ---------- Progress ---------- */
.progress-wrap { max-width: 900px; margin: 0 auto 30px; }

.progress-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

.progress-track {
  height: 2px;
  background: rgba(20, 66, 143, .14);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Figures (the estimate number) ---------- */
.figure-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}

.result-figure, .figure-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.025em;
  color: var(--red);
  margin: 0 auto 12px;
  line-height: 1.1;
}

.result-tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -.02em;
  margin: 0 auto 14px;
}

.tier-lower { color: var(--ink); }
.tier-moderate { color: var(--ink-2); }
.tier-higher { color: var(--red); }

/* ---------- Stats ---------- */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 40px;
  margin: 72px auto 0;
  max-width: 1200px;
}

.stat-cell { flex: 1 1 300px; padding: 24px 20px; }

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -.03em;
  margin: 0 0 10px;
  color: var(--ink);
}

.stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; margin: 0 auto 24px; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 18px auto 24px;
  font-size: 16px;
  text-align: left;
}

caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding: 0 0 10px;
  text-align: center;
}

th, td { padding: 11px 14px; vertical-align: top; }

th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
  text-align: left;
}

tbody tr { border-bottom: 1px solid var(--card-border); }
tbody tr:nth-child(even) { background: var(--card); }
tbody tr:last-child { border-bottom: 0; }

td.num, th.num {
  font-family: var(--font-mono);
  font-size: 15px;
  white-space: nowrap;
}

td.num { color: var(--red); }

/* Label/value rows (itemised breakdown) */
.breakdown {
  list-style: none;
  padding: 0;
  margin: 18px auto;
  max-width: 620px;
  display: block;
  text-align: left;
}

.breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border);
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-2);
}

.breakdown li:last-child { border-bottom: 0; }

.breakdown .amt {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--red);
  white-space: nowrap;
}

.driver-list { list-style: none; padding: 0; margin: 18px auto; max-width: 620px; display: block; text-align: left; }
.driver-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--card-border);
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-2);
}
.driver-list li:last-child { border-bottom: 0; }
.driver-list .amt { font-family: var(--font-mono); font-size: 14px; color: var(--red); white-space: nowrap; }

/* ---------- Callouts ---------- */
.callout {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 26px auto;
  max-width: 760px;
  text-align: center;
}

.callout .label, .warning .label, .gate-panel .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}

.callout p:last-child, .warning p:last-child, .gate-panel p:last-child { margin-bottom: 0; }

.warning {
  background: rgba(211, 58, 32, .05);
  border: 1px solid rgba(211, 58, 32, .22);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 26px auto;
  max-width: 760px;
  text-align: center;
}

.warning .label { color: var(--red); }

.prose .callout, .prose .warning, .prose .gate-panel { text-align: left; margin-left: 0; }
.prose .callout .label, .prose .warning .label { text-align: left; }

/* ---------- Result panels ---------- */
.result-panel {
  max-width: 900px;
  margin: 26px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.result-header {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}

.result-body { margin: 0 auto; }

.result-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  max-width: 34ch;
  margin: 0 auto 14px;
}

.result-body h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin: 26px auto 10px;
}

/* ---------- Gate ---------- */
.gate-panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 30px 32px;
  margin: 26px auto;
  max-width: 760px;
  text-align: center;
}

/* ---------- Index lists ---------- */
.index-list {
  list-style: none;
  padding: 0;
  margin: 26px auto;
  max-width: 900px;
  display: block;
  text-align: center;
}

.index-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--card-border);
  margin: 0;
}

.index-list li:last-child { border-bottom: 0; }

.index-list h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.012em;
  margin: 0 auto 6px;
}

.index-list p { margin: 0 auto; color: var(--muted); font-size: 15.5px; line-height: 1.5; max-width: 68ch; }

.prose .index-list, .prose .index-list p, .prose .index-list h3 { text-align: left; margin-left: 0; }

/* Directory */
.dir-list { list-style: none; padding: 0; margin: 24px auto; max-width: 860px; display: block; }
.dir-list li { padding: 16px 0; border-bottom: 1px solid var(--card-border); margin: 0; }
.dir-list li:last-child { border-bottom: 0; }
.dir-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.dir-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin: 5px auto 0; line-height: 1.6; }

/* Tools grid (legacy class, restyled as cards) */
.tool-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 26px auto; }
.tool-cell {
  flex: 1 1 330px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tool-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tool-cell h3 { font-size: 19px; font-weight: 600; margin: 0 auto 8px; letter-spacing: -.012em; }
.tool-cell p { margin: 0 auto 11px; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.tool-cell .mono-link { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Checklists ---------- */
.checklist {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 26px 30px;
  margin: 26px auto;
  max-width: 860px;
  text-align: left;
}

.checklist ol, .checklist ul { list-style: none; padding: 0; margin: 0; display: block; }

.checklist li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--card-border);
  margin: 0;
  font-size: 16px;
}

.checklist li:last-child { border-bottom: 0; }

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  background: #FFFFFF;
}

/* ---------- Figures / maps / diagrams ---------- */
figure {
  margin: 28px auto;
  padding: 20px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  max-width: 900px;
}

figure img, figure svg { margin: 0 auto; }

figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 14px;
  text-align: center;
}

.map-embed { max-width: 860px; }

/* ---------- 3D scene ---------- */
.scene-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  margin: 0 auto;
}

.scene-cards {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.stage-card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
  padding: 20px 22px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .18s ease;
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid rgba(15, 27, 46, .1);
  font: inherit;
}

.stage-card .stage-on {
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  border: 1.5px solid var(--blue);
  background: rgba(20, 66, 143, .07);
  box-shadow: 0 18px 38px rgba(20, 66, 143, .18);
  pointer-events: none;
}

.stage-card .stage-title {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.012em;
  margin-bottom: 8px;
  color: var(--ink);
}

.stage-card .stage-desc {
  position: relative;
  display: block;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
}

.scene-stage {
  flex: 2 1 520px;
  min-height: min(70vh, 520px);
  border-radius: 8px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(15, 27, 46, .08);
  overflow: hidden;
}
/* When JS shows the static diagram instead of the 3D (phones, or a GPU too
   slow for it), the panel shrinks to the diagram rather than holding a tall,
   empty canvas box. */
.scene-stage.scene-static { min-height: 0; align-self: start; }

tank-scene { width: 100%; height: 100%; display: block; }

.scene-fallback { padding: 20px; }

/* ---------- Inline CTA band ---------- */
.cta-band {
  margin: 48px auto 0;
  max-width: 960px;
  padding: 34px 36px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

.cta-band p:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.015em;
  max-width: 44ch;
  margin: 0 auto 22px;
  color: var(--ink);
}

.cta-band .small { margin: 20px auto 0; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--hairline);
  background: rgba(20, 66, 143, .045);
}

.site-footer .wrap { max-width: 1000px; padding: 76px var(--pad-x) 88px; }

.site-footer p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto 18px;
  text-wrap: pretty;
}

.site-footer p strong { color: var(--ink); font-weight: 600; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-top: 28px;
}

.footer-links a { color: var(--muted); padding: 8px 2px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--ink); text-decoration: none; }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--blue);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 3px;
  z-index: 70;
}

.skip-link:focus { left: 12px; top: 12px; }

@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .hero { padding: 72px 0 56px; }
  section { padding: 34px 20px 44px; }
  .panel { padding: 26px 20px 24px; }
  .panel-lg { padding: 30px 20px 26px; }
  .site-footer .wrap { padding: 56px 20px 64px; }
}


/* ---------- Interactive anatomy (anatomy.html) ---------- */
.anatomy-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; margin: 26px auto; }
.anatomy-main { flex: 2 1 520px; }
.anatomy-side { flex: 1 1 300px; }

.anatomy-stage {
  border: 1px solid var(--card-border);
  border-radius: 8px 8px 0 0;
  background: #FFFFFF;
  padding: 14px;
}

.anatomy-stage svg { width: 100%; height: auto; display: block; }

.anatomy-controls {
  border: 1px solid var(--card-border);
  border-top: 0;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: flex-end;
  justify-content: center;
  background: rgba(255, 255, 255, .5);
}

.control-group { display: flex; flex-direction: column; gap: 8px; align-items: center; }

.control-group > span, .control-group > label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.seg { display: flex; border: 1px solid var(--field-border); border-radius: 3px; overflow: hidden; }

.seg button {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: #FFFFFF;
  color: var(--ink-2);
  border: 0;
  border-left: 1px solid var(--field-border);
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}

.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--blue); color: #FFFFFF; }
.seg button:hover:not([aria-pressed="true"]) { background: var(--card); }

input[type="range"] { width: 180px; height: 44px; accent-color: var(--blue); background: transparent; border: 0; padding: 0; }

.anatomy-readout {
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid var(--card-border);
  border-top: 0;
  padding: 12px 16px;
  background: var(--card);
  color: var(--ink-2);
  line-height: 1.6;
}

.anatomy-readout:last-of-type { border-radius: 0 0 8px 8px; }

.anatomy-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 12px auto 0;
}

#anatomy-root .flow-only, #anatomy-root .fail-only { display: none; }
#anatomy-root[data-view="flow"] .flow-only { display: inline; }
#anatomy-root[data-view="fail"] .fail-only { display: inline; }
#anatomy-root[data-view="fail"] .fail-only.block { display: block; }

.svg-sky { fill: #FFFFFF; }
.svg-soil { fill: #EFE9DF; }
.svg-grade { stroke: var(--ink); stroke-width: 3; }
.svg-struct { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2; }
.svg-solid { fill: var(--ink); }
.svg-pipe { fill: var(--ink); }
.svg-line { stroke: var(--ink); stroke-width: 3; fill: none; }
.svg-hair { stroke: var(--ink-2); stroke-width: 1; fill: none; }
.svg-mono { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }
#dim-length { stroke: #FFFFFF; stroke-width: 4; paint-order: stroke; }
.svg-mono-muted { font-family: var(--font-mono); font-size: 12px; fill: var(--muted); }
.svg-mono-paper { font-family: var(--font-mono); font-size: 13px; fill: #FFFFFF; }
.svg-signal { fill: var(--red); }
.svg-hazard { fill: var(--hazard); stroke: var(--ink); stroke-width: 1; }
.svg-stain { fill: var(--red); opacity: .2; stroke: var(--red); stroke-width: 1; stroke-dasharray: 5 4; }
.svg-corrosion { fill: var(--red); }
.svg-oil { fill: var(--ink-2); opacity: .4; }
.svg-flow { stroke: var(--blue); stroke-width: 4; fill: none; stroke-dasharray: 10 8; animation: flow-dash 1.2s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -18; } }

.hotspot { cursor: pointer; }
.hotspot circle { fill: var(--blue); stroke: #FFFFFF; stroke-width: 1.5; }
.hotspot text {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  fill: #FFFFFF;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.hotspot:hover circle, .hotspot:focus-visible circle { fill: var(--ink); }
.hotspot[aria-pressed="true"] circle { fill: var(--red); }
.hotspot[aria-pressed="true"] text { fill: #FFFFFF; }

.part-legend { list-style: none; padding: 0; margin: 0; display: block; text-align: left; }
.part-legend li { margin: 0; }

.part-legend button {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15.5px;
  background: transparent;
  color: var(--ink-2);
  border: 0;
  border-bottom: 1px solid var(--card-border);
  padding: 13px 6px;
  min-height: 44px;
  cursor: pointer;
}

.part-legend button:hover { background: var(--card); }
.part-legend button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; }
.part-legend .idx { font-family: var(--font-mono); color: var(--red); }

/* ---------- Gate title ---------- */
.gate-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 auto 10px;
}

/* ============================================================
   Print / PDF
   The guide PDF gate calls window.print(), so this is the actual
   document readers walk away with. Strip the chrome, keep the
   substance, print the URL behind every link so a paper copy is
   still verifiable, and never break a table across pages.
   ============================================================ */
@media print {
  @page { margin: 18mm 16mm; }

  body {
    background: #FFFFFF !important;
    color: #000000;
    font-size: 11pt;
    line-height: 1.5;
    text-align: left;
  }

  .grain, .site-header, .site-nav, .breadcrumb, .skip-link,
  .cta, .cta-secondary, .cta-row, .cta-band,
  .gate-panel, #pdf-gate, #pdf-status, #pdf-download,
  .anatomy-controls, .seg, tank-scene, .scene-cards,
  .part-legend, .index-list, .card-grid, .tool-grid {
    display: none !important;
  }

  main { max-width: none; padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .prose { max-width: none; }

  section {
    margin: 0 0 18pt;
    padding: 0;
    background: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    break-inside: auto;
  }

  h1 {
    font-size: 22pt;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 8pt;
    max-width: none;
  }

  h2 {
    font-size: 14pt;
    text-align: left;
    margin: 16pt 0 6pt;
    max-width: none;
    break-after: avoid;
  }

  h3, h4 { font-size: 12pt; margin: 12pt 0 4pt; break-after: avoid; }

  p, ul, ol, li { max-width: none; margin-left: 0; margin-right: 0; }
  ul, ol { display: block; }

  .eyebrow, .lede, .answer-line, .small, figcaption, caption {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .eyebrow { color: #555555; font-size: 9pt; }

  .answer-line {
    font-family: var(--font-body);
    font-size: 12pt;
    font-weight: 600;
    border: 0;
    border-left: 3pt solid #000000;
    padding: 2pt 0 2pt 10pt;
    margin-bottom: 14pt;
  }

  a { color: #000000; text-decoration: underline; }
  /* Show the destination so a printed copy stays checkable. */
  .prose a[href^="http"]::after,
  section a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    word-break: break-all;
  }

  table {
    break-inside: avoid;
    font-size: 10pt;
    width: 100%;
    border-collapse: collapse;
  }

  th, td { border-bottom: 0.5pt solid #999999; padding: 5pt 6pt; }
  th { background: none !important; color: #000000; border-bottom: 1pt solid #000000; }
  tbody tr:nth-child(even) { background: #F4F4F4 !important; }
  td.num { color: #000000; }

  .callout, .warning, .checklist {
    break-inside: avoid;
    background: none !important;
    border: 0.5pt solid #666666;
    border-radius: 0;
    padding: 8pt 10pt;
    margin: 12pt 0;
    text-align: left;
    max-width: none;
  }

  .warning { border-left: 3pt solid #000000; }
  .callout .label, .warning .label { color: #000000; font-size: 9pt; }

  .checklist li::before { border-color: #000000; }

  figure { border: 0.5pt solid #999999; padding: 8pt; break-inside: avoid; }

  .stat-row { border: 0; margin: 12pt 0; }
  .stat-cell { border: 0 !important; padding: 0 12pt 0 0; }
  .stat-num { font-size: 14pt; color: #000000; }

  .site-footer {
    margin-top: 20pt;
    padding: 10pt 0 0;
    border-top: 0.5pt solid #999999;
    background: none !important;
    break-inside: avoid;
  }

  .site-footer .wrap { padding: 0; }
  .site-footer p { font-size: 8.5pt; text-align: left; }
  .footer-links { display: none !important; }

  /* Provenance line, so a loose printout can be traced back. */
  main::after {
    content: "removethetank.com — informational estimates, not quotes. Verify current requirements with your municipality and state agency.";
    display: block;
    margin-top: 14pt;
    padding-top: 6pt;
    border-top: 0.5pt solid #999999;
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #444444;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}