/* Foundation tokens — see DESIGN.md sections 2 and 3. */
:root {
  --obsidian: #0B0F14;
  --graphite: #121820;
  --slate: #19222C;
  --steel: #28333F;
  --white-smoke: #F4F7F9;
  --cool-gray: #AAB5C0;
  --ash: #74818E;
  --amber-400: #F4A340;
  --amber-500: #E88B24;

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Visible to screen readers only. A base utility, not a dashboard one — the
   blog loads main.css without dashboard.css, and a label styled nowhere is a
   label rendered in full. */
.sr-only {
  clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--cool-gray);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.site-header {
  border-bottom: 1px solid var(--steel);
  padding: 20px 0;
}

.wordmark {
  color: var(--white-smoke);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark span { color: var(--amber-400); }

.shell {
  margin: 0 auto;
  max-width: 760px;
  padding: 72px 32px 96px;
}

h1 {
  color: var(--white-smoke);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 24px;
}

.lede { font-size: 19px; margin: 0 0 32px; }

.status {
  border-left: 2px solid var(--amber-400);
  color: var(--ash);
  font-size: 15px;
  margin: 0;
  padding-left: 16px;
}

.status a { color: var(--amber-400); }
.status a:hover { color: var(--amber-500); }

.site-footer {
  border-top: 1px solid var(--steel);
  color: var(--ash);
  font-size: 14px;
  padding: 24px 0;
}

.site-footer p { margin: 0; }

/* ── Forms and auth surfaces ─────────────────────────────────────────────── */

.shell.narrow { max-width: 440px; }

.form { display: flex; flex-direction: column; gap: 6px; margin: 0 0 28px; }

.form label {
  color: var(--white-smoke);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 14px;
  text-transform: uppercase;
}

.form input {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 8px;
  color: var(--white-smoke);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
}

.form input:focus {
  border-color: var(--amber-400);
  outline: 2px solid rgba(244, 163, 64, 0.25);
  outline-offset: 1px;
}

.form .hint { color: var(--ash); font-size: 13px; margin: 2px 0 0; }

.btn-primary,
.btn-secondary {
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  margin-top: 22px;
  padding: 13px 20px;
}

/* Dark text on amber: the accent is light enough that white text on it fails
   contrast. See DESIGN.md section 13. */
.btn-primary {
  background: var(--amber-400);
  border: none;
  color: var(--obsidian);
}

.btn-primary:hover { background: var(--amber-500); }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--steel);
  color: var(--white-smoke);
}

.btn-secondary:hover { border-color: var(--amber-400); color: var(--amber-400); }

.alert {
  border-left: 2px solid;
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  margin: 0 0 20px;
  padding: 12px 16px;
}

.alert-error { background: rgba(198, 62, 62, 0.1); border-color: #C63E3E; color: #F0B4B4; }
.alert-ok { background: rgba(58, 158, 106, 0.1); border-color: #3A9E6A; color: #A9DCC2; }

/* ── Admin and CMS surfaces ──────────────────────────────────────────────── */

.shell.wide { max-width: 1040px; }
.shell.full-width { max-width: none; }

.admin-head {
  align-items: center;
  border-bottom: 1px solid var(--steel);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
}

.admin-head h1 { font-size: 30px; margin: 0; }
.admin-head .btn-primary, .admin-head .btn-secondary { margin-top: 0; text-decoration: none; }

.admin-table { border-collapse: collapse; font-size: 15px; width: 100%; }
.admin-table th {
  border-bottom: 1px solid var(--steel);
  color: var(--ash);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  text-transform: uppercase;
}
.admin-table td { border-bottom: 1px solid var(--graphite); padding: 14px 12px; vertical-align: middle; }
.admin-table a { color: var(--white-smoke); }
.admin-table a:hover { color: var(--amber-400); }
.admin-table .muted { color: var(--ash); font-size: 13px; }

.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.pill {
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  text-transform: uppercase;
}
.pill-published { background: rgba(58, 158, 106, 0.16); color: #6FCB9B; }
.pill-draft { background: rgba(116, 129, 142, 0.16); color: var(--ash); }

.row-actions { align-items: center; display: flex; gap: 14px; }
.row-actions form { margin: 0; }
.row-actions a { color: var(--ash); font-size: 14px; }

.link-danger {
  background: none;
  border: none;
  color: #C97A7A;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 0;
}
.link-danger:hover { color: #E09595; text-decoration: underline; }

.field-group {
  border: 1px solid var(--steel);
  border-radius: 10px;
  margin: 26px 0 0;
  padding: 4px 20px 22px;
}
.field-group legend {
  color: var(--amber-400);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 8px;
  text-transform: uppercase;
}

.form textarea {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 8px;
  color: var(--white-smoke);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  resize: vertical;
}
.form textarea:focus, .form select:focus {
  border-color: var(--amber-400);
  outline: 2px solid rgba(244, 163, 64, 0.25);
  outline-offset: 1px;
}
.form select {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 8px;
  color: var(--white-smoke);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
}

.mode-toggle { display: flex; gap: 22px; margin: 14px 0 10px; }
.mode-toggle label, .check { align-items: center; color: var(--cool-gray); display: flex; font-size: 15px; gap: 8px; }
.check { margin-top: 12px; }

.editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.editor-toolbar button {
  background: var(--slate);
  border: 1px solid var(--steel);
  border-radius: 6px;
  color: var(--cool-gray);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 11px;
}
.editor-toolbar button:hover { border-color: var(--amber-400); color: var(--amber-400); }

.inline-fields { display: flex; gap: 20px; }
.inline-fields > div { flex: 1; }

.faq-row {
  border-left: 2px solid var(--steel);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  padding-left: 14px;
}
.faq-row .link-danger { align-self: flex-start; }

.cms-content { color: var(--cool-gray); font-size: 17px; line-height: 1.75; }
.cms-content h2 { color: var(--white-smoke); font-size: 28px; margin: 40px 0 14px; }
.cms-content h3 { color: var(--white-smoke); font-size: 21px; margin: 32px 0 10px; }
.cms-content a { color: var(--amber-400); }
.cms-content ul { padding-left: 22px; }

.faqs { border-top: 1px solid var(--steel); margin-top: 56px; padding-top: 32px; }
.faqs h2 { color: var(--white-smoke); font-size: 26px; margin: 0 0 18px; }
.faq { border-bottom: 1px solid var(--graphite); padding: 14px 0; }
.faq summary { color: var(--white-smoke); cursor: pointer; font-weight: 600; }
.faq p { margin: 12px 0 0; }

.shell.narrow-wide { max-width: 620px; }

.admin-table.compact td { padding: 8px 8px; }
.admin-table.compact input[type="text"],
.admin-table.compact input[type="number"],
.admin-table.compact select {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 6px;
  color: var(--white-smoke);
  font-family: inherit;
  font-size: 14px;
  padding: 7px 9px;
  width: 100%;
}
.admin-table.compact .tiny { width: 70px; }
.admin-table.compact input[type="checkbox"] { transform: scale(1.2); }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }

.code-block {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 8px;
  color: var(--ash);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  margin: 8px 0 0;
  overflow-x: auto;
  padding: 14px 16px;
}
.lede-sm { color: var(--cool-gray); font-size: 16px; margin: 10px 0; }
.lede-sm a, .hint a { color: var(--amber-400); }
.pill-button { border: none; cursor: pointer; font-family: inherit; }
.admin-table.compact form { margin: 0; }

/* ── Public site chrome ──────────────────────────────────────────────────── */

.header-inner {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.logo { display: block; max-height: 30px; width: auto; }

.site-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--cool-gray); font-size: 15px; font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--white-smoke); }

.site-nav li { position: relative; }
.site-nav .submenu {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  gap: 0;
  left: 0;
  min-width: 180px;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  z-index: 20;
}
.site-nav li:hover > .submenu, .site-nav li:focus-within > .submenu { display: flex; }
.site-nav .submenu li { display: block; }
.site-nav .submenu a { display: block; padding: 8px 16px; }

.header-actions { align-items: center; display: flex; gap: 16px; }
.header-actions a { color: var(--cool-gray); font-size: 15px; text-decoration: none; }
.header-actions a:hover { color: var(--amber-400); }
.header-actions form { margin: 0; }

.link-plain {
  background: none; border: none; color: var(--cool-gray);
  cursor: pointer; font-family: inherit; font-size: 15px; padding: 0;
}
.link-plain:hover { color: var(--amber-400); }

.footer-columns {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 32px;
}
.footer-column h3 {
  color: var(--white-smoke); font-size: 13px; letter-spacing: 0.06em;
  margin: 0 0 12px; text-transform: uppercase;
}
.footer-column ul { list-style: none; margin: 0; padding: 0; }
.footer-column li { margin-bottom: 8px; }
.footer-column a { color: var(--ash); font-size: 15px; text-decoration: none; }
.footer-column a:hover { color: var(--amber-400); }

.footer-base {
  align-items: center; border-top: 1px solid var(--graphite); display: flex;
  flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding-top: 20px;
}
.footer-nav { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: var(--ash); text-decoration: none; }
.footer-nav a:hover { color: var(--amber-400); }

/* ── Blog ────────────────────────────────────────────────────────────────── */

.post-list { list-style: none; margin: 40px 0 0; padding: 0; }
.post-card { border-bottom: 1px solid var(--graphite); padding: 28px 0; }
.post-card h2 { font-size: 24px; margin: 8px 0 10px; }
.post-card h2 a { color: var(--white-smoke); text-decoration: none; }
.post-card h2 a:hover { color: var(--amber-400); }

.post-category {
  color: var(--amber-400); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase;
}
.post-excerpt { margin: 0 0 10px; }
.post-meta { color: var(--ash); font-size: 14px; margin: 0; }

.pagination {
  align-items: center; display: flex; gap: 20px;
  justify-content: center; margin-top: 40px;
}
.pagination a { color: var(--amber-400); text-decoration: none; }
.pagination .muted { color: var(--ash); font-size: 14px; }

.breadcrumbs { color: var(--ash); font-size: 14px; margin-bottom: 24px; }
.breadcrumbs a { color: var(--ash); text-decoration: none; }
.breadcrumbs a:hover { color: var(--amber-400); }

.post-hero { border-radius: 12px; margin: 24px 0 8px; width: 100%; }

.author-card {
  align-items: flex-start; border: 1px solid var(--steel); border-radius: 12px;
  display: flex; gap: 16px; margin-top: 48px; padding: 20px;
}
.author-card img { border-radius: 50%; height: 52px; object-fit: cover; width: 52px; }
.author-name { color: var(--white-smoke); font-weight: 700; margin: 0 0 4px; }
.author-bio { color: var(--ash); font-size: 15px; margin: 0; }

.site-list { list-style: none; margin: 24px 0; padding: 0; }
.site-row {
  align-items: center; border: 1px solid var(--steel); border-radius: 10px;
  display: flex; gap: 16px; justify-content: space-between; margin-bottom: 12px; padding: 16px 18px;
}
.site-url { color: var(--white-smoke); font-weight: 600; margin: 0 0 6px; }
.site-state { margin: 0; }
.site-row form { margin: 0; }
button[disabled] { cursor: not-allowed; opacity: 0.5; }

/* ── Audit report ────────────────────────────────────────────────────────── */

.report-site {
  color: var(--ash); font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px; margin: 0 0 6px;
}

.score-panel {
  align-items: center; border: 1px solid var(--steel); border-left-width: 3px;
  border-radius: 12px; display: flex; gap: 28px; margin: 28px 0; padding: 26px 28px;
}
.score-low { border-left-color: #3A9E6A; }
.score-medium { border-left-color: var(--amber-400); }
.score-high { border-left-color: #E88B24; }
.score-critical { border-left-color: #C63E3E; }

.score-figure { align-items: baseline; display: flex; gap: 2px; }
.score-number {
  color: var(--white-smoke); font-size: 64px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.score-out { color: var(--ash); font-size: 18px; }
.score-detail { flex: 1; }
.score-severity {
  color: var(--amber-400); font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; margin: 0 0 8px; text-transform: uppercase;
}
.score-copy { color: var(--cool-gray); margin: 0; }
.score-note { color: var(--ash); font-size: 14px; margin: 12px 0 0; }
.score-note a { color: var(--amber-400); }

.headline-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 28px 0; }
.stat {
  background: var(--graphite); border: 1px solid var(--steel); border-radius: 10px;
  flex: 1; min-width: 150px; padding: 18px 20px;
}
.stat-number {
  color: var(--white-smoke); font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 4px;
}
.stat-label { color: var(--ash); font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }

.gate {
  background: var(--graphite); border: 1px solid var(--amber-400);
  border-radius: 12px; margin: 36px 0; padding: 28px;
}
.gate h2 { color: var(--white-smoke); font-size: 22px; margin: 0 0 10px; }
.gate p { margin: 0 0 16px; }
.gate-form { margin-bottom: 0; }

.breakdown { margin: 44px 0; }
.breakdown h2 { color: var(--white-smoke); font-size: 24px; margin: 0 0 16px; }

.report-table { border-collapse: collapse; width: 100%; }
.report-table th {
  border-bottom: 1px solid var(--steel); color: var(--ash); font-size: 12px;
  letter-spacing: 0.06em; padding: 10px 12px; text-align: left; text-transform: uppercase;
}
.report-table th.num, .report-table td.num { text-align: right; }
.report-table td { border-bottom: 1px solid var(--graphite); padding: 16px 12px; vertical-align: top; }
.report-table td.num {
  color: var(--white-smoke); font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 17px; white-space: nowrap;
}
.type-label { color: var(--white-smoke); display: block; font-weight: 600; margin-bottom: 4px; }
.type-why { color: var(--ash); display: block; font-size: 14px; line-height: 1.5; }

.gsc-facts { color: var(--cool-gray); line-height: 1.8; padding-left: 20px; }
.gsc-facts strong { color: var(--white-smoke); }

.cta-panel {
  border: 1px solid var(--steel); border-radius: 12px; margin: 44px 0; padding: 28px;
}
.cta-panel h2 { color: var(--white-smoke); font-size: 24px; margin: 0 0 12px; }
.cta-panel .btn-primary { display: inline-block; text-decoration: none; }

.tier-panel {
  border: 1px solid var(--steel); border-left: 3px solid var(--amber-400);
  border-radius: 12px; margin: 28px 0; padding: 24px 28px;
}
.tier-label {
  color: var(--amber-400); font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; margin: 0 0 6px; text-transform: uppercase;
}
.tier-range { color: var(--ash); margin: 0 0 10px; }
.tier-price {
  color: var(--white-smoke); font-size: 46px; font-weight: 800;
  letter-spacing: -0.03em; margin: 0;
}

.optional {
  color: var(--ash); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; margin-left: 6px;
}
.alert strong { color: var(--white-smoke); }

.cred-none { color: var(--ash); }
.cred-awaiting { color: var(--amber-400); }
.cred-received { color: #6FCB9B; }
.cred-complete { color: #E88B24; font-weight: 600; }
.cred-deleted { color: var(--ash); }
.cred-table th {
  border-bottom: 1px solid var(--graphite); color: var(--ash);
  padding: 10px 12px; text-align: left; white-space: nowrap; width: 160px;
}

.alert-entry {
  border-left: 2px solid var(--amber-400); margin: 20px 0;
  padding: 4px 0 4px 16px;
}
.alert-date { color: var(--white-smoke); font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.alert-entry .report-table td { padding: 8px 12px; }
.delta-up { color: #E09595; }
.delta-down { color: #6FCB9B; }

.billing-card {
  align-items: flex-start; border: 1px solid var(--steel); border-radius: 10px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  margin-bottom: 14px; padding: 18px 20px;
}
.billing-title { color: var(--white-smoke); font-weight: 600; margin: 0 0 6px; }
.billing-meta { color: var(--ash); font-size: 14px; margin: 0; }
.billing-actions { align-items: center; display: flex; gap: 16px; }
.billing-actions .btn-secondary { margin-top: 0; text-decoration: none; }
.billing-actions .link-danger { text-decoration: none; }

.danger-zone { border-color: rgba(198, 62, 62, 0.45); }
.danger-zone legend { color: #C97A7A; }
.form input[disabled] { color: var(--ash); cursor: not-allowed; }
.site-state .muted { color: var(--ash); font-size: 13px; margin-left: 8px; }

/* ── Error and empty states (DESIGN.md 44, 45) ───────────────────────────── */

.state-block {
  border: 1px solid var(--steel);
  border-left: 3px solid var(--steel);
  border-radius: 10px;
  margin: 24px 0;
  padding: 22px 24px;
}
.state-block.state-problem { border-left-color: #C63E3E; }
.state-block.state-healthy { border-left-color: #3A9E6A; }
.state-block.state-waiting { border-left-color: var(--amber-400); }

.state-title { color: var(--white-smoke); font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.state-body { color: var(--cool-gray); margin: 0 0 14px; }
.state-body:last-child { margin-bottom: 0; }
.state-detail {
  background: var(--graphite); border-radius: 6px; color: var(--ash);
  display: inline-block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; padding: 4px 8px;
}
.state-actions-title {
  color: var(--white-smoke); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; margin: 16px 0 8px; text-transform: uppercase;
}
.state-actions { color: var(--cool-gray); line-height: 1.8; margin: 0; padding-left: 20px; }
.state-actions a { color: var(--amber-400); }

/* ── Responsive system (DESIGN.md 46) ────────────────────────────────────── */

/* Tables are the one thing that cannot reflow: a breakdown with five numeric
   columns has to stay a table to be readable, so it scrolls inside its own
   container rather than forcing the whole page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1024px) {
  .shell { padding-left: 32px; padding-right: 32px; }
  .header-inner { gap: 20px; }
  .site-nav ul { gap: 18px; }
}

@media (max-width: 760px) {
  .shell { padding: 44px 24px 64px; }
  .site-header { padding: 16px 24px; }

  .header-inner { align-items: flex-start; flex-direction: column; gap: 12px; }
  .site-nav ul { flex-wrap: wrap; gap: 16px; }
  .site-nav .submenu { border: none; padding: 4px 0 4px 12px; position: static; }
  .site-nav li:hover > .submenu, .site-nav li:focus-within > .submenu { display: none; }
  .header-actions { flex-wrap: wrap; }

  h1 { font-size: clamp(28px, 8vw, 38px); }
  .lede { font-size: 17px; }
  body { font-size: 16px; }

  .score-panel { flex-direction: column; gap: 16px; }
  .score-number { font-size: 48px; }

  .headline-stats { gap: 12px; }
  .stat { min-width: 100%; }

  .inline-fields { flex-direction: column; gap: 0; }
  .field-group { padding: 4px 16px 18px; }

  .billing-card, .site-row { flex-direction: column; align-items: flex-start; }
  .billing-actions { flex-wrap: wrap; }

  .admin-table, .report-table { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-table td, .report-table td { white-space: normal; }
  .type-why { display: none; }

  .footer-base { flex-direction: column; align-items: flex-start; }
  .footer-columns { gap: 24px; }
}

@media (max-width: 420px) {
  .shell { padding-left: 20px; padding-right: 20px; }
  .site-header { padding: 14px 20px; }
  .tier-price { font-size: 36px; }
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Marketing pages — homepage, how it works, pricing.
   Authored as CMS content, so these classes are the vocabulary that content
   is written against. Spacing follows the DESIGN.md 47 scale throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Side margins follow DESIGN.md 46: 20-24px on mobile, 24-32 on tablet,
   32-48 on desktop. The max-width is the content width, not the viewport. */
.page-wrap,
.header-inner,
.footer-columns,
.footer-base { margin-left: auto; margin-right: auto; max-width: 1296px; padding-left: 20px; padding-right: 20px; }
@media (min-width: 600px)  { .page-wrap, .header-inner, .footer-columns, .footer-base { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1100px) { .page-wrap, .header-inner, .footer-columns, .footer-base { padding-left: 48px; padding-right: 48px; } }
.section { padding: 80px 0; }
.section-tight { padding: 48px 0; }
.section + .section { border-top: 1px solid var(--graphite); }
.section-head { margin: 0 auto 48px; max-width: 720px; text-align: center; }
.section-head h2 { margin-top: 0; }
.section-lede { color: var(--cool-gray); font-size: 18px; margin: 16px 0 0; }

.eyebrow {
  color: var(--amber-400);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 24px;
  text-transform: uppercase;
}

/* ── Hero (DESIGN.md 34) ─────────────────────────────────────────────────── */

.hero { padding: 96px 0 80px; }
.hero-grid { align-items: center; display: grid; gap: 64px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

.hero h1 {
  color: var(--white-smoke);
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 24px;
}
.hero-sub { color: var(--cool-gray); font-size: 19px; line-height: 1.65; margin: 0 0 32px; max-width: 56ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.hero-note { color: var(--ash); font-size: 14px; margin: 0; }

.btn-lg {
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 32px;
  text-decoration: none;
}
/* Dark text on amber — the accent is too light for white. DESIGN.md 13. */
.btn-lg.is-primary { background: var(--amber-400); border: 1px solid var(--amber-400); color: var(--obsidian); }
.btn-lg.is-primary:hover { background: var(--amber-500); border-color: var(--amber-500); }
.btn-lg.is-secondary { background: transparent; border: 1px solid var(--steel); color: var(--white-smoke); }
.btn-lg.is-secondary:hover { border-color: var(--amber-400); color: var(--amber-400); }

/* The report preview from DESIGN.md 34 — shows the product's actual output
   rather than a stock illustration of a laptop. */
.report-preview {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 14px;
  overflow: hidden;
}
.report-preview-head {
  align-items: center;
  border-bottom: 1px solid var(--steel);
  color: var(--ash);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.12em;
  padding: 16px 24px;
  text-transform: uppercase;
}
.report-preview-body { padding: 24px; }
.preview-total {
  color: var(--white-smoke);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 4px;
}
.preview-total-label { color: var(--ash); font-size: 13px; margin: 0 0 24px; }

.preview-row { display: grid; gap: 12px; grid-template-columns: 96px 1fr 64px; align-items: center; margin-bottom: 12px; }
.preview-row-label { color: var(--cool-gray); font-size: 13px; }
.preview-bar { background: var(--slate); border-radius: 999px; height: 8px; overflow: hidden; }
.preview-bar span { background: var(--amber-400); border-radius: 999px; display: block; height: 100%; }
.preview-bar.is-quiet span { background: var(--steel); }
.preview-row-value {
  color: var(--white-smoke);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  text-align: right;
}
.preview-foot {
  border-top: 1px solid var(--steel);
  color: var(--ash);
  font-size: 12px;
  margin-top: 24px;
  padding-top: 16px;
}
.preview-severity { color: #E09595; font-weight: 700; }

/* ── Leak motif (DESIGN.md 25) ───────────────────────────────────────────── */

.leak {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 14px;
  margin: 32px 0;
  padding: 32px;
}
.leak-svg { display: block; height: auto; max-width: 100%; width: 100%; }
.leak-caption { color: var(--ash); font-size: 14px; margin: 24px 0 0; text-align: center; }

/* ── Three-column explainers ─────────────────────────────────────────────── */

.col-3 { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .col-3 { grid-template-columns: repeat(3, 1fr); } }

.explainer {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 14px;
  padding: 32px 24px;
}
.explainer-icon {
  align-items: center;
  background: rgba(244, 163, 64, 0.1);
  border-radius: 10px;
  color: var(--amber-400);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 24px;
  width: 44px;
}
.explainer-icon svg { height: 22px; width: 22px; }
.explainer h3 { color: var(--white-smoke); font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.explainer p { color: var(--cool-gray); margin: 0; }

/* ── Stat tiles ──────────────────────────────────────────────────────────── */

.stat-tiles { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .stat-tiles { grid-template-columns: repeat(3, 1fr); } }

.stat-tile {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-left: 3px solid var(--amber-400);
  border-radius: 12px;
  padding: 32px 24px;
}
.stat-tile-value {
  color: var(--white-smoke);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 12px;
}
.stat-tile-label { color: var(--cool-gray); font-size: 15px; margin: 0; }
.honest-note {
  border-left: 2px solid var(--steel);
  color: var(--ash);
  font-size: 15px;
  margin: 32px auto 0;
  max-width: 640px;
  padding-left: 16px;
}

/* ── Numbered steps ──────────────────────────────────────────────────────── */

.steps { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 14px;
  padding: 32px 24px;
  position: relative;
}
.step-number {
  align-items: center;
  border: 1px solid var(--amber-400);
  border-radius: 999px;
  color: var(--amber-400);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  margin-bottom: 24px;
  width: 32px;
}
.step h3 { color: var(--white-smoke); font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.step p { color: var(--cool-gray); margin: 0; }

/* ── Audit progress stages (DESIGN.md 36) ────────────────────────────────── */

.stages { list-style: none; margin: 32px auto; max-width: 640px; padding: 0; }
.stages li {
  border-left: 1px solid var(--steel);
  color: var(--cool-gray);
  margin: 0;
  padding: 0 0 32px 32px;
  position: relative;
}
.stages li:last-child { border-left-color: transparent; padding-bottom: 0; }
.stages li::before {
  background: var(--obsidian);
  border: 2px solid var(--amber-400);
  border-radius: 999px;
  content: "";
  height: 11px;
  left: -6px;
  position: absolute;
  top: 6px;
  width: 11px;
}
.stages strong { color: var(--white-smoke); display: block; font-size: 17px; margin-bottom: 4px; }
.stages span { font-size: 15px; }

/* ── Pricing (DESIGN.md 27) ──────────────────────────────────────────────────
   Three psychological stages, three visual treatments. Identical cards with
   different numbers would flatten diagnosis, intervention and prevention into
   one undifferentiated choice. */

.plans { align-items: start; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 920px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
}
.plan-name { color: var(--white-smoke); font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.plan-promise {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 24px;
  text-transform: uppercase;
}
.plan-price {
  color: var(--white-smoke);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 4px;
}
.plan-price small { color: var(--ash); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.plan-price-note { color: var(--ash); font-size: 13px; margin: 0 0 24px; }
.plan-list { list-style: none; margin: 0 0 32px; padding: 0; }
.plan-list li {
  color: var(--cool-gray);
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 0 8px 24px;
  position: relative;
}
.plan-list li::before {
  content: "";
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  height: 5px;
  left: 2px;
  position: absolute;
  top: 13px;
  transform: rotate(-45deg);
  width: 9px;
}
.plan-cta { margin-top: auto; }
.plan-cta .btn-lg { justify-content: center; width: 100%; }

/* Diagnosis — neutral surface, amber accent. */
.plan-audit .plan-promise { color: var(--amber-400); }
.plan-audit .plan-list li::before { color: var(--ash); }

/* Intervention — the strongest emphasis on the page. */
.plan-fix {
  background: linear-gradient(180deg, rgba(244, 163, 64, 0.07), transparent 240px), var(--graphite);
  border-color: var(--amber-400);
  box-shadow: 0 0 0 1px rgba(244, 163, 64, 0.18);
}
.plan-fix .plan-promise { color: var(--amber-400); }
.plan-fix .plan-list li::before { color: var(--amber-400); }

/* Prevention — green-supported. */
.plan-monitor { border-color: rgba(58, 158, 106, 0.5); }
.plan-monitor .plan-promise { color: #6FCB9B; }
.plan-monitor .plan-price { color: #6FCB9B; }
.plan-monitor .plan-list li::before { color: #6FCB9B; }
.plan-monitor .btn-lg.is-primary { background: #3A9E6A; border-color: #3A9E6A; color: #061A11; }
.plan-monitor .btn-lg.is-primary:hover { background: #45B47A; border-color: #45B47A; }

.tier-table { border-collapse: collapse; margin: 0 auto 24px; max-width: 640px; width: 100%; }
.tier-table td {
  border-bottom: 1px solid var(--graphite);
  color: var(--cool-gray);
  font-size: 14px;
  padding: 10px 0;
}
.tier-table td:last-child {
  color: var(--white-smoke);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.tier-table tr:last-child td { border-bottom: none; }

.pricing-aside {
  border: 1px solid var(--steel);
  border-radius: 12px;
  color: var(--cool-gray);
  margin: 32px auto 0;
  max-width: 720px;
  padding: 24px;
  text-align: center;
}
.pricing-aside strong { color: var(--white-smoke); }

/* ── Recovery timeline ───────────────────────────────────────────────────── */

.phases { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 860px) { .phases { grid-template-columns: repeat(4, 1fr); } }

.phase {
  background: var(--graphite);
  border: 1px solid var(--steel);
  border-radius: 12px;
  padding: 24px;
}
.phase-when {
  color: var(--amber-400);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.phase-what { color: var(--cool-gray); font-size: 15px; margin: 0; }
.phase-slow .phase-when { color: #E09595; }

/* ── Closing call to action ──────────────────────────────────────────────── */

.closer {
  border: 1px solid var(--steel);
  border-radius: 16px;
  margin: 0 auto;
  max-width: 720px;
  padding: 48px 32px;
  text-align: center;
}
.closer h2 { margin-top: 0; }
.section .closer { margin-top: 48px; }
.col-3 + p { margin-top: 32px; }
.closer .hero-actions { justify-content: center; }
.closer .hero-note { margin-top: 16px; }

@media (max-width: 760px) {
  .section { padding: 48px 0; }
  .hero { padding: 48px 0; }
  .hero-grid { gap: 40px; }
  .section-head { margin-bottom: 32px; }
  .btn-lg { justify-content: center; width: 100%; }
  .leak { padding: 20px; }
  .closer { padding: 32px 20px; }
}

/* ── Marketing pages inside the CMS shell ────────────────────────────────────
   A full-width CMS page owns its own horizontal rhythm: every section inside
   it carries a .page-wrap, so the shell must not add a second gutter. The
   .cms-content resets below exist because the generic prose rules (set for
   ordinary CMS pages) are more specific than a bare class on a <ul>. */

.shell.full-width { max-width: none; padding: 0; }
.shell.full-width > .faqs {
  margin: 0 auto;
  max-width: 820px;
  padding: 40px 20px 96px;
}
@media (min-width: 600px) { .shell.full-width > .faqs { padding: 40px 32px 96px; } }
.cms-content .plan-list,
.cms-content .stages { padding-left: 0; }
/* Body prose inside a 1200px marketing section still needs a readable
   measure — the container is wide so the cards can breathe, not the text. */
.shell.full-width .page-wrap > p { margin-left: auto; margin-right: auto; max-width: 760px; }
.cms-content .hero h1,
.cms-content .closer h2 { margin-top: 0; }
.section .closer { margin-top: 48px; }
.col-3 + p { margin-top: 32px; }

/* ── Leak motif animation (DESIGN.md 25) ─────────────────────────────────────
   Amber particles are crawl attention. They run down every branch, including
   the four that lead nowhere — which is the whole point of the diagram. */

.leak-particle {
  animation: leak-flow 3.2s linear infinite;
  transform-box: fill-box;
}
.leak-particle-1 { animation-delay: 0s; }
.leak-particle-2 { animation-delay: 0.6s; }
.leak-particle-3 { animation-delay: 1.2s; }
.leak-particle-4 { animation-delay: 1.8s; }
.leak-particle-5 { animation-delay: 2.4s; }

@keyframes leak-flow {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(360px); }
}

@media (prefers-reduced-motion: reduce) {
  .leak-particle { animation: none; opacity: 0.85; }
}

/* ── Header actions (DESIGN.md 13, 14) ───────────────────────────────────────
   Signed out the header sells; signed in it gets out of the way and points at
   the dashboard, which owns the app sections. */

.header-link { color: var(--cool-gray); font-size: 14px; font-weight: 600; text-decoration: none; }
.header-link:hover { color: var(--white-smoke); }

.btn-header {
  align-items: center; border: 1px solid var(--steel); border-radius: 9px;
  color: var(--white-smoke); display: inline-flex; font-size: 14px; font-weight: 600;
  height: 38px; justify-content: center; line-height: 1; padding: 0 16px;
  text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.btn-header:hover { background: var(--slate); border-color: var(--cool-gray); }
.btn-header.is-primary {
  background: var(--amber-400); border-color: var(--amber-400); color: var(--obsidian); font-weight: 700;
}
.btn-header.is-primary:hover { background: var(--amber-500); border-color: var(--amber-500); }

.header-user { position: relative; }
.header-user summary {
  align-items: center; cursor: pointer; display: flex; gap: 8px; list-style: none;
}
.header-user summary::-webkit-details-marker { display: none; }
.header-user summary svg { color: var(--ash); height: 16px; width: 16px; }
.header-user-name { color: var(--white-smoke); font-size: 14px; font-weight: 600; }

.header-avatar {
  align-items: center; background: var(--steel); border-radius: 50%; color: var(--white-smoke);
  display: flex; flex: none; font-size: 12px; font-weight: 700; height: 32px;
  justify-content: center; overflow: hidden; width: 32px;
}
.header-avatar img { height: 100%; object-fit: cover; width: 100%; }

.header-menu {
  background: var(--slate); border: 1px solid var(--steel); border-radius: 10px;
  min-width: 176px; padding: 6px; position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
}
.header-menu a, .header-menu button {
  background: none; border: 0; border-radius: 7px; color: var(--cool-gray); cursor: pointer;
  display: block; font: inherit; font-size: 14px; padding: 9px 12px; text-align: left;
  text-decoration: none; width: 100%;
}
.header-menu a:hover, .header-menu button:hover { background: var(--steel); color: var(--white-smoke); }
.header-menu form { margin: 0; }

@media (max-width: 760px) {
  .header-user-name { display: none; }
}

/* A second, quieter line under the hero CTAs: the first says what you get,
   this one says what it costs. Same slot, lower emphasis. */
.hero-note.is-secondary { color: var(--ash); font-size: 13px; margin-top: 6px; }

/* ── Google sign-in ──────────────────────────────────────────────────────── */

.google-form { margin: 0 0 20px; }

.btn-google {
  align-items: center;
  background: var(--slate);
  border: 1px solid var(--steel);
  border-radius: 10px;
  color: var(--white-smoke);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  transition: background 0.12s ease, border-color 0.12s ease;
  width: 100%;
}
.btn-google:hover { background: var(--steel); border-color: var(--cool-gray); }
.btn-google:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 2px; }
.btn-google svg { flex: none; height: 18px; width: 18px; }

/* "or" rule between the Google button and the email form. */
.auth-divider {
  align-items: center;
  color: var(--ash);
  display: flex;
  font-size: 13px;
  gap: 14px;
  margin: 0 0 20px;
}
.auth-divider::before, .auth-divider::after {
  background: var(--steel); content: ""; flex: 1; height: 1px;
}

/* ── Maintenance (DESIGN.md 2, 7, 13) ─────────────────────────────────────────
   One centred column on Obsidian, with the only amber on the page carrying the
   wordmark and the pulse. Nothing here is interactive, so nothing is styled to
   look as though it is. */

.maintenance-body {
  align-items: center;
  background: var(--obsidian);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 24px;
}

.maintenance {
  max-width: 520px;
  text-align: center;
  width: 100%;
}

.maintenance-mark {
  color: var(--white-smoke);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 40px;
}
.maintenance-mark span { color: var(--amber-400); }

/* A slow amber pulse: the one sign the page is alive rather than broken. */
.maintenance-pulse {
  animation: maintenance-breathe 2.6s ease-in-out infinite;
  background: var(--amber-400);
  border-radius: 999px;
  display: block;
  height: 8px;
  margin: 0 auto 32px;
  width: 8px;
}
@keyframes maintenance-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 163, 64, 0.45); opacity: 1; }
  50%      { box-shadow: 0 0 0 10px rgba(244, 163, 64, 0); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .maintenance-pulse { animation: none; }
}

.maintenance h1 {
  color: var(--white-smoke);
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.maintenance-sub {
  color: var(--cool-gray);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 42ch;
}

.maintenance-note {
  border-top: 1px solid var(--steel);
  color: var(--ash);
  font-size: 14px;
  margin: 32px auto 0;
  max-width: 42ch;
  padding-top: 24px;
}

/* Maintenance reminder, shown to admins only. Amber rather than red: the site
   is in a state someone chose, not one that is going wrong. */
.maintenance-flag {
  background: rgba(244, 163, 64, 0.12);
  border: 1px solid rgba(244, 163, 64, 0.45);
  border-radius: 10px;
  color: var(--white-smoke);
  font-size: 14px;
  margin: 0 0 20px;
  padding: 12px 16px;
}
.maintenance-flag strong { color: var(--amber-400); }
.maintenance-flag a { color: var(--amber-400); margin-left: 4px; }

/* The control is a button because it performs an action. Styled as inline text
   so the banner still reads as one sentence. */
.maintenance-flag-form { display: inline; margin: 0; }
.maintenance-flag-form button {
  background: none;
  border: 0;
  color: var(--amber-400);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  margin-left: 4px;
  padding: 0;
  text-decoration: underline;
}
.maintenance-flag-form button:hover { color: var(--white-smoke); }
.maintenance-flag.is-bar { border-radius: 0; border-width: 0 0 1px; margin: 0; text-align: center; }