/* ── Variables ── */
:root {
  /* ── Backgrounds ── */
  --bg:              #050505;                      /* OLED black — page background */
  --surface:         #0a0a0a;                      /* Deep container */
  --glass:           rgba(255, 255, 255, 0.04);    /* Glass panel fill */
  --glass-input:     rgba(255, 255, 255, 0.05);    /* Input field fill */

  /* ── Borders & Dividers ── */
  --border:          rgba(255, 255, 255, 0.08);    /* Panel borders, input borders */
  --border-strong:   rgba(255, 255, 255, 0.12);    /* Stronger border where needed */
  --divider:         rgba(255, 255, 255, 0.06);    /* Breakdown row hairline dividers */
  --shine:           rgba(255, 255, 255, 0.06);    /* Inset top-edge shine on panels */

  /* ── Text ── */
  --ink:             #f0ede8;    /* Primary text — hero numbers, values */
  --secondary:       #8a8a8a;   /* Secondary text — labels, sublines */
  --muted:           #555555;   /* Muted — field labels, chart axes */

  /* ── Accent — Teal ── */
  --accent:              #4fd9a0;
  --accent-ghost:        rgba(79, 217, 160, 0.4);   /* Ghost button border */
  --accent-hover:        rgba(79, 217, 160, 0.08);  /* Ghost button hover fill */
  --accent-focus-border: rgba(79, 217, 160, 0.5);   /* Input focus border */
  --accent-focus-glow:   rgba(79, 217, 160, 0.08);  /* Input focus box-shadow */
  --glow-low:            rgba(79, 217, 160, 0.08);  /* Results panel glow (rest) */
  --glow-high:           rgba(79, 217, 160, 0.13);  /* Results panel glow (peak) */

  /* ── Warning — Amber ── */
  --warning:         #D97B4F;

  /* ── Chart Colors ── */
  --chart-principal: #4fd9a0;   /* Principal & Interest — teal */
  --chart-interest:  #555555;   /* Interest (bar chart only) — dark muted */
  --chart-fees:      #8a8a8a;   /* Taxes & Fees — gray */
  --chart-insurance: #B8A898;   /* Home Insurance (donut) — warm taupe */
  --chart-hoa:       #444444;   /* HOA (donut) — near-black gray */
  --chart-pmi:       #D97B4F;   /* PMI segment / annotation — amber */
  --chart-gridline:  rgba(255, 255, 255, 0.05);
  --chart-tick:      #555555;

  /* Slider unfilled track color */
  --track-unfilled:  rgba(255, 255, 255, 0.12);

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 16px;

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --transition:  150ms var(--ease-out);

  /* ── Spacing (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;

  /* ── Typography ── */
  --font-mono:  'DM Mono', 'Courier New', monospace;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-serif: 'DM Sans', system-ui, sans-serif;  /* legacy alias — maps to sans */
}

/* Tell the browser to render native UI (select dropdowns, scrollbars,
   date pickers) using whatever color scheme matches the active theme. */
html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ────────────────────────────────────────────────────────────────
   LIGHT THEME — overrides every color token defined in :root.
   High-contrast slate + vibrant orange accent:
     #EAEFEF page bg, #FFFFFF panel, #BFC9D1 borders, #25343F text, #FF9B51 accent.
   Radial glow on the results panel is fully suppressed in light mode.
   ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Backgrounds */
  --bg:              #EAEFEF;                /* page bg — palette lightest */
  --surface:         #FFFFFF;                /* white panel pops above gray page */
  --glass:           #FFFFFF;
  --glass-input:     #EAEFEF;                /* inputs match page bg, pop out of panel */

  /* Borders & Dividers */
  --border:          #BFC9D1;                /* palette mid slate — solid */
  --border-strong:   rgba(37, 52, 63, 0.22);
  --divider:         rgba(37, 52, 63, 0.10);
  --shine:           rgba(255, 255, 255, 0.9);

  /* Text */
  --ink:             #25343F;     /* palette dark slate */
  --secondary:       #4a5560;     /* derived medium slate */
  --muted:           #6b7a86;     /* derived (BFC9D1 too light for text contrast) */

  /* Accent — palette vibrant orange */
  --accent:              #FF9B51;
  --accent-ghost:        rgba(255, 155, 81, 0.5);
  --accent-hover:        rgba(255, 155, 81, 0.10);
  --accent-focus-border: rgba(255, 155, 81, 0.7);
  --accent-focus-glow:   rgba(255, 155, 81, 0.18);
  --glow-low:            transparent;          /* glow fully suppressed */
  --glow-high:           transparent;

  /* Warning — deeper rust so it's distinguishable from the orange accent */
  --warning:         #C8512F;

  /* Chart colors */
  --chart-principal: #FF9B51;     /* palette orange */
  --chart-interest:  #25343F;     /* palette dark slate */
  --chart-fees:      #BFC9D1;     /* palette mid slate */
  --chart-insurance: #FFD4B0;     /* light peach (orange family for cohesion) */
  --chart-hoa:       #E2E8F0;     /* very light cool gray */
  --chart-pmi:       #C8512F;     /* deeper warning rust */
  --chart-gridline:  rgba(37, 52, 63, 0.06);
  --chart-tick:      #6b7a86;

  /* Slider unfilled track */
  --track-unfilled:  #BFC9D1;
}

/* Suppress the radial glow pseudo-element entirely in light theme */
html[data-theme="light"] .results-panel::before,
html[data-theme="light"] .results-panel.glow-active::before {
  display: none;
}

/* Light-theme variants of the SVG chevron icons used by:
   - .field-select (state dropdown legacy)
   - .custom-select__trigger (current state dropdown)
   - .num-step--up / --down (number input steppers)
   Stroke color #4a5862 = the secondary slate from the light theme. */
html[data-theme="light"] .field-select,
html[data-theme="light"] .custom-select__trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a86' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-theme="light"] .num-step--up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 4L4 1L7 4' stroke='%236b7a86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="light"] .num-step--down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%236b7a86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  padding: 0 var(--sp-6) var(--sp-8);
}

/* ────────────────────────────────────────────────────────────────
   SITE HEADER — page-level, sits above the calculator container.
   Sticky at the top with a soft fade transitioning into the content
   below (inspired by land-book.com). Glass-blur background follows
   the active theme.
   ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Slight transparency + backdrop-blur creates the soft "glass" effect
     so content scrolls subtly behind the header. */
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4);
  gap: var(--sp-6);
}

/* Soft fade removed — was visually pulling the calculator card up into a
   washed-out tone. The header's backdrop-blur already provides separation. */

/* Brand: small house icon + name */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: opacity 150ms var(--ease-out);
}
.site-header__brand:hover { opacity: 0.85; }

.site-header__logo {
  color: var(--accent);
  flex-shrink: 0;
}

/* Pill-shaped nav links inspired by land-book */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--secondary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
  white-space: nowrap;
}

.site-header__nav-link:hover {
  color: var(--ink);
  background: var(--accent-hover);
}

.site-header__nav-link--active {
  color: var(--ink);
  background: var(--accent-hover);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;   /* always pin to the right, even when the brand is absent */
}

/* Primary CTA — pill button in the accent color */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: opacity 150ms var(--ease-out), transform 100ms var(--ease-out);
}
.site-header__cta:hover  { opacity: 0.88; }
.site-header__cta:active { transform: translateY(1px); }

/* (Calc/compare container top margins are set in their main rules below) */

/* ── Typography base ── */
.font-serif { font-family: var(--font-sans); }  /* legacy alias — no longer used in HTML */
.font-mono  { font-family: var(--font-mono); }

.text-hero {
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.text-display-lg {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.text-display-md {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

.text-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.text-muted {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}

/* ── App container ── */
#app {
  width: 100%;
}

/* ── Single-mode container ── */
.calc-container {
  max-width: 960px;
  margin: 96px auto 0;   /* top margin keeps it well below the site header */
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--shine);
  overflow: hidden;
  animation: fadeUp 300ms var(--ease-out) both;
}

/* ── Top bar ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

.topbar__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Topbar right-side action buttons (theme toggle + compare) */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Theme toggle — circular icon button. Shows sun in dark mode, moon in light. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--accent-ghost);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: background 150ms var(--ease-out), transform 0.1s var(--ease-out);
}

.theme-toggle:hover {
  background: var(--accent-hover);
}

.theme-toggle:active {
  transform: translateY(-1px);
}

.theme-toggle__sun,
.theme-toggle__moon {
  display: block;
}

/* Default theme is dark — show sun (offer to switch to light) */
.theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: block; }

.compare-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-ghost);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: background 0.15s var(--ease-out), transform 0.1s var(--ease-out);
}

.compare-btn:active {
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .compare-btn:hover {
    background: var(--accent-hover);
  }
}

/* ── Two-column body ── */
.calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.input-panel {
  padding: var(--sp-6);
  border-right: 1px solid var(--border);
  animation: fadeUp 300ms var(--ease-out) 100ms both;
  background: transparent;
}

.results-panel {
  padding: var(--sp-6);
  background: transparent;
  position: relative;
  overflow: hidden;
  animation: fadeUp 300ms var(--ease-out) 100ms both;
}

/* Radial mesh glow — teal orb in top-right corner */
.results-panel::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--glow-low) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
  z-index: 0;
}

/* Ensure results content sits above the glow pseudo-element */
.results-panel > * {
  position: relative;
  z-index: 1;
}

/* ── Chart section ── */
.chart-section {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--divider);
  animation: fadeUp 400ms var(--ease-out) 700ms both;
}

.chart-section__label {
  margin-bottom: var(--sp-3);
}

/* Chart.js requires a position:relative wrapper with a fixed height to prevent runaway growth */
.chart-wrap {
  position: relative;
  height: 180px;
  width: 100%;
}

#cycle-chart {
  width: 100% !important;
  height: 100% !important;
}

/* ── Field groups ── */
.field-group {
  margin-bottom: var(--sp-5);
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}

.field-input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--glass-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  outline: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  appearance: none;
}

.field-input:focus {
  border-color: var(--accent-focus-border);
  box-shadow: 0 0 0 3px var(--accent-focus-glow);
}

/* Teal outline on hover (not on focus — focus has its own glow).
   Background is explicitly locked to the same fill so native browser/OS
   hover highlights on <select> can't paint over it. */
.field-input:hover:not(:focus) {
  border-color: var(--accent-focus-border);
  background-color: var(--glass-input);
}

/* <select> elements get an extra background lock on hover because some
   browsers paint a system highlight color over the field on hover. */
.field-select:hover {
  background-color: var(--glass-input);
}

.field-input--short {
  width: auto;
  min-width: 100px;
}

.field-input--readonly {
  background: rgba(255, 255, 255, 0.02);
  color: var(--secondary);
  font-size: 14px;
  cursor: default;
  pointer-events: none;
}

/* State pulse animation class — added/removed by JS */
.field-input--pulse {
  animation: statePulse 0.4s ease;
}

.field-select {
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* When the custom dropdown is open, lift its parent field container above
   sibling stacking contexts so the popup menu can paint over them. */
.field-group.has-open-dropdown,
.compare-field.has-open-dropdown {
  position: relative;
  z-index: 100;
}

/* ── Custom select (used to fully replace native <select> dropdowns) ── */
/* The native <select> is hidden but kept in DOM as the value source so all
   existing code that reads .value still works. The visible UI is built from
   custom elements that we have full styling control over. */
.custom-select {
  position: relative;
  display: block;
}

/* Native <select> hidden under the trigger — still focusable for forms but
   not visible. We point all interaction at the custom trigger button. */
.custom-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Trigger button — identical styling to a regular field-input so it looks
   continuous with the rest of the form. */
.custom-select__trigger {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background-color: var(--glass-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 28px 10px 14px;
  outline: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.custom-select__trigger:hover {
  border-color: var(--accent-focus-border);
}

.custom-select.is-open .custom-select__trigger,
.custom-select__trigger:focus-visible {
  border-color: var(--accent-focus-border);
  box-shadow: 0 0 0 3px var(--accent-focus-glow);
}

/* Popup menu — positioned absolutely below the trigger */
.custom-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  max-height: 280px;
  overflow-y: auto;
}

/* Lighter shadow under the popup in light theme — the heavy dark-theme
   shadow looks too smudgy on a white background. */
html[data-theme="light"] .custom-select__menu {
  box-shadow: 0 8px 24px rgba(37, 52, 63, 0.15);
}

.custom-select__menu[hidden] {
  display: none;
}

/* Each option — text-only, no fill on hover/selection. A 2px teal left bar
   acts as the "outline" indicator on the active row, no background change. */
.custom-select__option {
  padding: 8px 14px 8px 12px;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: color 80ms var(--ease-out), border-color 80ms var(--ease-out);
}

.custom-select__option.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

.custom-select__option.is-selected {
  color: var(--accent);
  font-weight: 500;
}

.custom-select__option.is-selected.is-active {
  border-left-color: var(--accent);
}

/* ── Number inputs (interest rate, loan term) ── */
/* Hide the native browser spinner buttons (they have a white background that
   breaks the dark theme). Custom up/down step buttons are layered on top via
   the .num-input-wrap structure (see below). */
.field-input[type="number"]::-webkit-outer-spin-button,
.field-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.field-input[type="number"] {
  -moz-appearance: textfield; /* Firefox: hide spinner */
}

/* Wrapper that holds a number input + two clickable step buttons on the right */
.num-input-wrap {
  position: relative;
  display: inline-block;
}

.num-input-wrap .field-input {
  padding-right: 28px;
}

/* Up/down step buttons — sit on the right side of the input, each ~half height */
.num-step {
  position: absolute;
  right: 4px;
  width: 20px;
  height: 14px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  opacity: 0.7;
  transition: opacity 120ms var(--ease-out), transform 80ms var(--ease-out);
  outline: none;
}

.num-step:hover {
  opacity: 1;
}

.num-step:active {
  transform: translateY(1px);
}

.num-step:focus-visible {
  opacity: 1;
  outline: 1px solid var(--accent-focus-border);
  outline-offset: 1px;
  border-radius: 2px;
}

.num-step--up {
  top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 4L4 1L7 4' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.num-step--down {
  bottom: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--sp-1);
}

/* ── Rate field ── */
.rate-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.rate-source {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Down payment ── */
.down-payment-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.slider-wrap {
  flex: 1;
  position: relative;
}

/* Slider track */
/* --pct is a unitless 0-100 number representing normalized position (min=3, max=50) */
.down-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) calc(var(--pct) * 1%),
    var(--track-unfilled) calc(var(--pct) * 1%),
    var(--track-unfilled) 100%
  );
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: box-shadow 150ms var(--ease-out);
}

/* Slider gains a soft teal shadow underneath when being dragged */
.down-slider:active {
  box-shadow: 0 0 12px rgba(79, 217, 160, 0.2);
}

/* Slider thumb — WebKit */
.down-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

/* Scale effect on thumb via parent :active — more reliable cross-browser */
.down-slider:active::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(79, 217, 160, 0.2);
}

/* Slider thumb — Firefox */
.down-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: grab;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

.down-slider:active::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(79, 217, 160, 0.2);
}

/* slider-pct-label is superseded by .down-pct-display — kept for safety */
.slider-pct-label {
  display: none;
}

/* ── PMI callout (amber, shown below 20%) ── */
.pmi-callout {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  background: rgba(217, 123, 79, 0.08);
  border: 1px solid rgba(217, 123, 79, 0.3);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  max-height: 80px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 250ms ease-out,
              transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              margin 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(0);
}

.pmi-callout.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transform: translateY(-12px);
}

.pmi-callout__icon {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.4;
}

.pmi-callout__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--warning);
  font-family: var(--font-sans);
}

.pmi-callout__note {
  font-size: 11px;
  color: rgba(217, 123, 79, 0.7);
  font-family: var(--font-sans);
}

/* ── No PMI tag (green, shown at or above 20%) ── */
.no-pmi-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  font-family: var(--font-sans);
  max-height: 30px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 200ms ease-out,
              opacity 200ms ease-out,
              transform 200ms ease-out;
  transform: translateY(0);
}

.no-pmi-tag.hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
}

.no-pmi-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Results panel ── */
.results-hero {
  margin-bottom: var(--sp-5);
}

.results-subline {
  font-size: 12px;
  color: var(--secondary);
  margin-top: var(--sp-1);
}

/* ── Donut chart ── */
.donut-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

#donut-chart {
  width: 140px !important;
  height: 140px !important;
}

/* ── Breakdown line items ── */
.breakdown {
  margin-bottom: 0;
}

.breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  animation: fadeUp 0.24s var(--ease-out) both;
  transition: background 150ms var(--ease-out);
}

/* First visible row needs no top border */
.breakdown__row:first-child {
  border-top: none;
}

.breakdown__row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.breakdown__row:nth-child(1) { animation-delay: 400ms; }
.breakdown__row:nth-child(2) { animation-delay: 460ms; }
.breakdown__row:nth-child(3) { animation-delay: 520ms; }
.breakdown__row:nth-child(4) { animation-delay: 580ms; }
.breakdown__row:nth-child(5) { animation-delay: 640ms; }

/* Field rows cascade in during opening sequence */
@keyframes fieldRowEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.input-panel .field-group {
  animation: fieldRowEnter 280ms var(--ease-out) both;
}
.input-panel .field-group:nth-child(1) { animation-delay: 150ms; }
.input-panel .field-group:nth-child(2) { animation-delay: 190ms; }
.input-panel .field-group:nth-child(3) { animation-delay: 230ms; }
.input-panel .field-group:nth-child(4) { animation-delay: 270ms; }
.input-panel .field-group:nth-child(5) { animation-delay: 310ms; }
.input-panel .field-group:nth-child(6) { animation-delay: 350ms; }
.input-panel .field-group:nth-child(7) { animation-delay: 390ms; }
.input-panel .field-group:nth-child(8) { animation-delay: 430ms; }
.input-panel .field-group:nth-child(9) { animation-delay: 470ms; }

.breakdown__row--pmi {
  max-height: 50px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.breakdown__row--pmi.hidden {
  max-height: 0;
  opacity: 0;
  padding: 0;
  border: none;
}

/* PMI row dot pulses amber when the row first appears */
@keyframes pmiDotPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.breakdown__row--pmi:not(.hidden) .breakdown__dot {
  animation: pmiDotPulse 600ms var(--ease-out) 200ms;
}

.breakdown__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--secondary);
}

.breakdown__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.breakdown__note {
  font-size: 10px;
  color: var(--muted);
  margin-left: var(--sp-1);
}

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

/* ── Lifetime totals ── */
.lifetime-totals {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}

.lifetime-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--secondary);
  margin-bottom: var(--sp-1);
}

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

/* legacy alias for old .font-serif class on lifetime rows */
.lifetime-totals__row .font-serif {
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-mono);
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes statePulse {
  0%   { background: var(--glass-input); }
  50%  { background: rgba(255, 255, 255, 0.10); }
  100% { background: var(--glass-input); }
}

/* Slow ambient glow pulse on results panel ::before pseudo-element */
@keyframes glowPulse {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 1.0; }
}

/* Hero number lands with a subtle scale pulse */
@keyframes heroPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.hero-pulse {
  animation: heroPulse 600ms var(--ease-out) both;
  transform-origin: left center;
}

/* Brighten radial glow briefly when user activity detected */
@keyframes glowBoost {
  0%   { opacity: 0.8; }
  20%  { opacity: 1.15; }
  100% { opacity: 0.8; }
}

.results-panel.glow-active::before {
  animation: glowBoost 800ms var(--ease-out), glowPulse 4s ease-in-out infinite 800ms;
}

/* Compare column slide-in */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Responsive — mobile (< 768px) ── */
@media (max-width: 768px) {
  body {
    padding: var(--sp-4) var(--sp-3);
  }

  .calc-body {
    grid-template-columns: 1fr;
  }

  .input-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .compare-btn {
    display: none;
  }

  .text-hero {
    font-size: 48px;
  }

  .chart-wrap {
    height: 140px;
  }
}

/* ── Compare mode ── */
.compare-container {
  margin: 96px auto 0;           /* match single-mode top spacing below header */
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--shine);
  min-height: 1138px;            /* match single-mode container height */
  display: flex;                  /* let .compare-cols flex-grow to fill */
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.22s var(--ease-out) both;
}

.compare-container[hidden] {
  display: none;
}

.compare-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

/* Column grid — JS sets data-cols="2" or data-cols="3" */
.compare-cols {
  display: grid;
  flex: 1;                /* take all remaining vertical space below the topbar */
}

.compare-container[data-cols="2"] {
  max-width: 960px;
}

.compare-container[data-cols="2"] .compare-cols {
  grid-template-columns: 1fr 1fr;
}

/* Adding a 3rd column grows the container — A and B keep their width (~480px) */
.compare-container[data-cols="3"] {
  max-width: 1440px;
}

.compare-container[data-cols="3"] .compare-cols {
  grid-template-columns: 1fr 1fr 1fr;
}

.home-col {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Results section grows; stacks children vertically so the chart can fill remaining space */
.home-col__results {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Per-column mini bar chart — sits below lifetime totals, flex-grows to fill column */
.col-chart-wrap {
  flex: 1;
  min-height: 90px;
  position: relative;
}

.col-cycle-chart {
  width: 100% !important;
  height: 100% !important;
}

/* Left-aligned label above each column's mini chart, preceded by a divider
   line separating the lifetime totals from the chart section. */
.col-chart-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-top: 1px solid var(--border);
  text-align: left;
}

/* Home A: fade up gently */
.home-col[data-col-id="A"] {
  animation: fadeUp 0.26s var(--ease-out) 0.05s both;
}

/* Home B: slides in from the right, delayed so A settles first */
.home-col[data-col-id="B"] {
  animation: slideInRight 0.32s var(--ease-out) 0.2s both;
}

/* Home C: quick slide when added later */
.home-col[data-col-id="C"] {
  animation: slideInRight 0.24s var(--ease-out) both;
}

.home-col:last-child {
  border-right: none;
}

.home-col__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  min-height: 40px;          /* equal height with/without close button */
}

.home-col__title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-col__close {
  font-size: 18px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s var(--ease-out), transform 0.1s var(--ease-out);
}

.home-col__close:active {
  transform: scale(0.9);
}

@media (hover: hover) and (pointer: fine) {
  .home-col__close:hover {
    color: var(--ink);
  }
}

.home-col__inputs {
  padding: var(--sp-4);
}

.home-col__results {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--divider);
  padding: var(--sp-4);
}

.compare-field {
  margin-bottom: var(--sp-3);
}

.compare-field:last-child {
  margin-bottom: 0;
}

.compare-field .field-label {
  margin-bottom: 2px;
}

.compare-field .field-input {
  font-size: 13px;
  padding: var(--sp-1) var(--sp-2);
}

.compare-pmi-callout {
  font-size: 10px;
  color: var(--warning);
  margin-top: 2px;
  font-family: var(--font-sans);
}

.compare-no-pmi {
  font-size: 10px;
  color: var(--accent);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
}

.compare-no-pmi__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.compare-hero {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 2px;
}

/* Unified hero size — adding a 3rd column doesn't shrink the existing ones */
.compare-hero { font-size: 28px; }

.compare-subline {
  font-size: 10px;
  color: var(--secondary);
  margin-bottom: var(--sp-3);
}

.compare-breakdown__row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: var(--sp-1);
  color: var(--secondary);
}

.compare-breakdown__lbl {
  color: var(--secondary);
}

.compare-breakdown__val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.compare-lifetime {
  /* Above-the-line spacing = HOA's margin-bottom (4px) + this margin-top (8px) = 12px.
     Below-the-line spacing = padding-top (12px). Equal on both sides. */
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.compare-lifetime__row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--secondary);
  margin-bottom: 2px;
}

.compare-lifetime__val {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 11px;
}

/* ── Compare mode entry / exit transitions ── */

/* --- Slide out to the right (used when removing a column) --- */
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(36px); }
}

.home-col.is-exiting {
  animation: slideOutRight 0.22s var(--ease-out) both;
  pointer-events: none;
}

/* --- Single-mode element exit (entering compare) --- */

/* Chart section fades out and drifts down */
.chart-section.is-exiting {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
  pointer-events: none;
}

/* Slider fades out */
.slider-wrap.is-exiting {
  opacity: 0;
  transition: opacity 0.18s var(--ease-out);
  pointer-events: none;
}

/* Results panel slides down and fades out */
.results-panel.is-exiting {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.24s var(--ease-out) 0.08s, transform 0.24s var(--ease-out) 0.08s;
  pointer-events: none;
}

/* --- Single-mode element re-entry (exiting compare) --- */

@keyframes resultsSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Results panel animates back up from below */
.results-panel.is-entering {
  animation: resultsSlideUp 0.26s var(--ease-out) 0.06s both;
}

/* Chart section fades back in */
.chart-section.is-entering {
  animation: fadeUp 0.26s var(--ease-out) 0.18s both;
}

/* Slider fades back in */
.slider-wrap.is-entering {
  animation: fadeIn 0.2s var(--ease-out) 0.08s both;
}

/* ── Single-mode down payment pct display ── */
.down-pct-display {
  flex-shrink: 0;
  min-width: 46px;
  text-align: center;
  color: var(--accent);
  font-size: 12px;
  font-family: var(--font-mono);
  background: rgba(79, 217, 160, 0.06);
  border: 1px solid rgba(79, 217, 160, 0.2);
  border-radius: 6px; /* intentional — tighter than --radius-md for badge pill */
  padding: 5px 6px;
  white-space: nowrap;
}

/* ── Compare down-payment dollar + pct wrap ── */

.compare-down-wrap {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.col-down-pct-display {
  flex-shrink: 0;
  min-width: 46px;
  text-align: center;
  color: var(--accent);
  font-size: 12px;
  font-family: var(--font-mono);
  background: rgba(79, 217, 160, 0.06);
  border: 1px solid rgba(79, 217, 160, 0.2);
  border-radius: 6px; /* intentional — tighter than --radius-md for badge pill */
  padding: 5px 6px;
  white-space: nowrap;
}

/* ── Reduced motion: replace all transform-based animation with simple opacity fades ── */
@media (prefers-reduced-motion: reduce) {
  /* Opening sequence — kill stagger, simple fade only */
  .calc-container,
  .input-panel,
  .results-panel,
  .chart-section,
  .compare-container,
  .breakdown__row,
  .input-panel .field-group,
  .home-col[data-col-id="A"],
  .home-col[data-col-id="B"],
  .home-col[data-col-id="C"] {
    animation: fadeIn 150ms ease both;
    animation-delay: 0ms !important;
  }

  /* Disable hero pulse and glow animations */
  .hero-pulse {
    animation: none;
  }

  .results-panel::before {
    animation: none !important;
    opacity: 0.8;
  }

  .results-panel.glow-active::before {
    animation: none !important;
    opacity: 0.8;
  }

  /* PMI row dot pulse off */
  .breakdown__row--pmi:not(.hidden) .breakdown__dot {
    animation: none;
  }

  /* Compare-mode entry / exit transitions — simple fade only */
  .home-col.is-exiting {
    animation: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .chart-section.is-exiting,
  .slider-wrap.is-exiting,
  .results-panel.is-exiting {
    transform: none !important;
    transition: opacity 0.15s ease !important;
  }

  .results-panel.is-entering,
  .chart-section.is-entering,
  .slider-wrap.is-entering {
    animation: fadeIn 0.15s ease both;
    animation-delay: 0ms !important;
  }

  /* Disable button/control press transforms */
  .compare-btn,
  .home-col__close {
    transition: none;
  }

  .compare-btn:active,
  .home-col__close:active {
    transform: none;
  }

  /* Slider thumb scale on active — off */
  .down-slider:active::-webkit-slider-thumb,
  .down-slider:active::-moz-range-thumb {
    transform: none;
    box-shadow: none;
  }

  /* Slider drag shadow off */
  .down-slider:active {
    box-shadow: none;
  }

  /* PMI callout bounce → simple fade */
  .pmi-callout {
    transition: opacity 150ms ease, max-height 150ms ease, margin 150ms ease !important;
    transform: none !important;
  }

  .pmi-callout.hidden {
    transform: none !important;
  }

  .no-pmi-tag {
    transition: opacity 150ms ease, max-height 150ms ease !important;
    transform: none !important;
  }

  .no-pmi-tag.hidden {
    transform: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   ABOUT PAGE — .about-page body class
   Centered editorial column, max-width 560px.
   All colors via CSS variables — inherits dark/light theme.
   ──────────────────────────────────────────────────────────────── */
.about-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  padding: 0; /* .about-content owns its own padding */
}

.about-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.about-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.about-heading {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.about-body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}

.about-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.about-facts {
  display: flex;
}

.about-fact {
  flex: 1;
}

.about-fact:not(:last-child) {
  border-right: 1px solid var(--border);
  padding-right: 20px;
  margin-right: 20px;
}

.about-fact__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.about-fact__value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  .about-facts {
    flex-direction: column;
    gap: 20px;
  }
  .about-fact:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 20px;
  }
}

/* ────────────────────────────────────────────────────────────────
   SITE FOOTER
   Full-width footer on every page. Visually recessive —
   small type, muted color, no heavy background.
   ──────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 48px;
  padding: 24px 20px 32px;
  text-align: center;
}

.site-footer__disclaimer {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--secondary);
  line-height: 1.6;
  margin: 0 auto 12px;
  max-width: 480px;
}

.site-footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 12px;
}

.site-footer__nav a {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--secondary);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--ink);
}

.site-footer__nav span[aria-hidden] {
  font-size: 11px;
  color: var(--secondary);
  opacity: 0.4;
}

.site-footer__copy {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--secondary);
  opacity: 0.6;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   LEGAL PAGES — .legal-page body class
   Centered editorial column, max-width 640px.
   All colors via CSS custom properties — inherits dark/light theme.
   ──────────────────────────────────────────────────────────────── */
.legal-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  padding: 0; /* .legal-content owns its own padding */
}

.legal-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px 48px;
}

.legal-content h1 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}

.legal-content h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary);
  margin: 28px 0 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-content p {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  margin: 0 0 12px;
}

.legal-content a {
  color: var(--accent);
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}

.legal-updated {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--secondary);
  margin: -16px 0 32px;
}