:root {
  /* Real brand palette (see docx_report.py / demo.html for the same
     values) -- deep maroon accent, pixel-sampled from the live Carrd site. */
  --accent: #74140C;
  --accent-bg: #EEE3E2;
  --muted: #6B6E6C;
  --border: #E4D9D6;
  --text: #1A1A1A;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Calibri, sans-serif;
  margin: 0;
  background: #FAFBFA;
  color: var(--text);
}
.topbar {
  background: var(--accent);
  color: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.brand { font-size: 1.3em; font-weight: 700; }
.tagline { font-weight: 400; font-size: 0.6em; opacity: 0.85; margin-left: 10px; }
.demo-badge {
  background: #FFF3CD; color: #664D03; padding: 4px 10px; border-radius: 4px; font-size: 0.85em;
}
.wrap { max-width: 820px; margin: 24px auto 100px; padding: 0 16px; }
.card {
  background: white; border: 1px solid var(--border); border-radius: 8px;
  padding: 20px 24px; margin-bottom: 20px;
}
.card h2 { margin-top: 0; color: var(--accent); font-size: 1.1em; }
.hint { color: var(--muted); font-size: 0.9em; margin-top: -6px; }
/* A hint that follows a field grid (e.g. the plan/tier note under "Client
   to audit") needs breathing room BELOW the grid, not the negative
   margin-top .hint uses to hug a heading above it -- that negative margin
   was pulling this specific hint paragraph up into the last input row's
   bottom edge, reading as an overlap. Higher specificity than plain .hint
   so it wins without touching the heading-hugging case elsewhere. */
.grid + .hint { margin-top: 10px; margin-bottom: 4px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; font-size: 0.85em; color: var(--muted); gap: 4px; }
label.full { grid-column: 1 / -1; margin-top: 12px; }
input, textarea {
  font-family: inherit; font-size: 0.95em; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
button[type="submit"], .btn {
  background: var(--accent); color: white; border: none; padding: 12px 24px;
  border-radius: 6px; font-size: 1em; cursor: pointer; text-decoration: none; display: inline-block;
}
button[type="submit"]:hover, .btn:hover { opacity: 0.9; }
.hidden { display: none !important; }
.loading-panel { text-align: center; color: var(--muted); padding: 20px; }
.loading-title { font-size: 1.05em; color: var(--text); margin: 0 0 16px; }
.loading-callout {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 18px 22px;
  max-width: 540px;
  margin: 0 auto 14px;
}
.loading-callout-text {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.45;
  margin: 0;
}
#loading-elapsed { font-size: 0.85em; max-width: 480px; margin: 6px auto 0; }
.error-banner {
  background: #FDECEA; color: #611A15; border: 1px solid #F5C6C0;
  border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.92em;
}
.result .downloads { display: flex; gap: 12px; margin-top: 10px; }
.upgrade-panel {
  background: var(--accent-bg); border-radius: 8px; padding: 18px 20px; margin-top: 18px;
}
.upgrade-panel h3 { margin: 0 0 8px; color: var(--accent); font-size: 1em; }
.upgrade-panel .grid { grid-template-columns: 1fr; margin-top: 10px; margin-bottom: 12px; }
.upgrade-panel .error-banner, .upgrade-panel .hint { margin-top: 10px; margin-bottom: 0; }
.license-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #F2F2F1; border-top: 1px solid var(--border);
  padding: 8px 16px; font-size: 0.72em; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
}
.licensed-to { font-weight: 600; }
.version { opacity: 0.7; }
.link-btn {
  background: none; border: none; color: var(--accent); text-decoration: underline;
  cursor: pointer; font-size: 1em; padding: 0;
}
#license-modal { border: 1px solid var(--border); border-radius: 8px; max-width: 640px; }
#license-modal pre { white-space: pre-wrap; font-family: inherit; font-size: 0.85em; }

/* Portfolio dashboard (roadmap item 4) */
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.stat-box { flex: 1; min-width: 160px; background: var(--accent-bg); border-radius: 8px; padding: 16px 18px; }
.stat-box .num { font-size: 1.6em; font-weight: 700; color: var(--accent); }
.stat-box .label { font-size: 0.82em; color: var(--muted); margin-top: 4px; }
table.audit-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
table.audit-table th, table.audit-table td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
table.audit-table th { color: var(--muted); font-weight: 600; font-size: 0.85em; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }
.approx-note { color: var(--muted); font-size: 0.8em; margin-top: -4px; }

/* "Copy & paste your statements" stack-dump callout (single-field audit
   intake) -- modeled on .loading-callout so it reads as a native part of
   the design rather than a bolted-on box. */
.stack-dump-callout {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0 10px;
}
.stack-dump-callout strong {
  display: block;
  color: var(--accent);
  font-size: 1.02em;
  margin-bottom: 4px;
}
.stack-dump-callout .hint {
  margin-top: 0;
}

/* Guardian Wizard cross-sell (checkout-time upsell shown alongside a
   completed audit's results). Deliberately visually DISTINCT from the
   accent-colored "Upgrade to the Full Audit Report" panel above it --
   Guardian is a separate, ongoing add-on decision, not another rung of
   the same one-time-report upgrade ladder, so it gets its own quieter
   sage-green framing (matching the "Real Proof"/value-prop callout boxes
   already used in the Volume 3 pitch deck) and its own two-card layout
   modeled on the "Choose Your Plan" pricing cards, rather than reusing
   .upgrade-panel's styling and reading as "yet another upgrade tier." */
.guardian-panel {
  background: #F0F1EA;
  border: 1px solid #D8DBC9;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 20px;
}
.guardian-panel h3 { margin-top: 0; color: var(--accent); font-size: 1.05em; }
.guardian-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 600px) { .guardian-cards { grid-template-columns: 1fr; } }
.guardian-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The "step down from full accent" tan/caramel highlight -- same palette
   choice as the Savings Snapshot report's rank-#2 billboard panel
   (docx_report.py's SECONDARY_ACCENT_BG), reused here so a customer sees
   one consistent color language for "the recommended middle option"
   across the report and the site. */
.guardian-card-featured {
  border: 2px solid #C08552;
  background: #FBF3EA;
}
.guardian-card-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--muted);
}
.guardian-card-price {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--accent);
}
.guardian-card-period {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--muted);
}
.guardian-card-features {
  margin: 4px 0 6px;
  padding-left: 18px;
  font-size: 0.85em;
  color: var(--text);
}
.guardian-card-features li { margin-bottom: 4px; }
.guardian-card .btn { align-self: flex-start; padding: 8px 16px; font-size: 0.9em; }
.guardian-fineprint { margin-top: 4px; margin-bottom: 0; }