:root {
  --bg: #07090d;            /* near-black */
  --bg-glow-1: #0a2030;     /* deep navy wash */
  --bg-glow-2: #0a2a2e;     /* deep teal wash */
  --panel: #10151c;         /* slate-black panel */
  --panel-2: #161d27;       /* display surface */
  --text: #e8edf3;
  --muted: #8b97a8;
  --accent: #14b8a6;        /* teal: equals */
  --accent-text: #04211d;
  --accent-2: #3b82f6;      /* blue: mode active */
  --accent-3: #2dd4bf;      /* teal-400: RPN on */
  --accent-grad: linear-gradient(135deg, #2dd4bf 0%, #0ea5e9 100%);
  --brand-grad: linear-gradient(90deg, #1e40af 0%, #0ea5e9 50%, #14b8a6 100%);
  /* Equals button — indigo / blue */
  --eq-grad: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  --eq-text: #ffffff;
  --eq-glow: rgba(99, 102, 241, 0.5);
  --key: #1b232e;
  --key-hover: #232d3b;
  --key-active: #2e3a4a;
  --op: #182634;
  --op-hover: #213245;
  --op-text: #5eead4;
  --fn: #161e29;
  --fn-text: #94a3b8;
  --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 40px rgba(0,0,0,0.55);
  --radius: 14px;
  --gap: 10px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef2f6;
    --bg-glow-1: #dbeafe;
    --bg-glow-2: #ccfbf1;
    --panel: #ffffff;
    --panel-2: #f4f7fb;
    --text: #0f172a;
    --muted: #64748b;
    --accent: #0d9488;
    --accent-text: #ecfdf5;
    --accent-2: #2563eb;
    --accent-3: #0e7490;
    --accent-grad: linear-gradient(135deg, #14b8a6 0%, #0284c7 100%);
    --brand-grad: linear-gradient(90deg, #1e40af 0%, #0284c7 50%, #0d9488 100%);
    /* Equals button — indigo / blue (slightly deeper in light mode for contrast) */
    --eq-grad: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    --eq-text: #ffffff;
    --eq-glow: rgba(79, 70, 229, 0.4);
    --key: #f1f5f9;
    --key-hover: #e2e8f0;
    --key-active: #cbd5e1;
    --op: #e0f2fe;
    --op-hover: #bae6fd;
    --op-text: #0e7490;
    --fn: #e2e8f0;
    --fn-text: #475569;
    --shadow: 0 1px 0 rgba(0,0,0,0.03) inset, 0 12px 32px rgba(15,23,42,0.10);
  }
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(80% 50% at 15% 0%, var(--bg-glow-1) 0%, transparent 60%),
    radial-gradient(70% 50% at 100% 100%, var(--bg-glow-2) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html { height: 100%; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Pages without a content article keep the calculator vertically centered. */
body:not(:has(article.page-info)) {
  justify-content: center;
}
.app {
  width: min(420px, 100vw);
  height: 100dvh;
  max-height: 880px;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.6vh, 16px);
  gap: clamp(6px, 1.2vh, 12px);
}
.ad-slot {
  width: 100%;
  background: transparent;
  text-align: center;
  overflow: hidden;
}
.ad-slot[hidden] { display: none; }
.ad-slot.ad-top { min-height: 0; }
.ad-slot.ad-bottom { min-height: 0; }
.calc {
  flex: 1 1 0;
  min-height: 0;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.calc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-grad);
  z-index: 1;
}
.display {
  padding: clamp(10px, 2.2vh, 22px) clamp(14px, 3vw, 22px) clamp(8px, 1.4vh, 14px);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 0;
  gap: 4px;
}
.display .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 18px;
}
.display .meta .mode-pill {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.display .meta .rpn-badge {
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 50%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}
/* Horizontal one-line RPN stack: T 6 | Z 2 | Y 4
   Always present in the flex layout (even when empty) so toggling RPN
   doesn't reshape the calculator. Single line so it stays the same
   height as the user pushes more values onto the stack. */
.stack {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-height: 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}
.stack .stack-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stack .stack-item .label {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent-3) 85%, var(--muted));
  text-transform: uppercase;
}
.stack .stack-item .val {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}
.stack .stack-sep {
  color: var(--muted);
  opacity: 0.4;
  flex: 0 0 auto;
}
.display .history {
  color: var(--muted);
  font-size: 14px;
  min-height: 18px;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}
.display .history > .h-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: plaintext;
}
.display .value {
  color: var(--text);
  font-size: clamp(28px, 6.5vh, 56px);
  font-weight: 300;
  text-align: right;
  line-height: 1.05;
  /* Reserve the max height up front so font-size shrinking via fitDisplay()
     doesn't change the .display element's overall height. */
  min-height: clamp(30px, 6.85vh, 59px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  margin-top: auto;
  padding-top: 4px;
}
.display .value::-webkit-scrollbar { display: none; }

/* ---------- Non-keypad mode panels (Graphing, Financial) ---------- */
.mode-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.4vh, 14px);
  gap: clamp(6px, 1vh, 10px);
  color: var(--text);
}
.mode-panel[hidden] { display: none; }
/* Graphing uses a slim header (mode pill only — no value/history/stack). */
.display.graph-display {
  padding: clamp(8px, 1.6vh, 14px) clamp(14px, 3vw, 22px);
  min-height: 0;
}

/* ---------- Graphing ---------- */
.graph-panel { gap: clamp(3px, 0.6vh, 6px); padding: clamp(5px, 0.8vh, 8px); }
.graph-panel .row { display: flex; align-items: center; gap: 6px; }
.graph-panel .fn-input {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--accent-3) 25%, transparent);
  border-radius: 7px;
  padding: 0 7px;
  height: clamp(26px, 3vh, 30px);
  transition: border-color 120ms;
}
.graph-panel .fn-input[hidden] { display: none; }
.graph-panel .fn-input:focus-within {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
.graph-panel .fn-input .swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 6px;
  flex: 0 0 auto;
}
.graph-panel .fn-input .prefix {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  margin-right: 4px;
}
.graph-panel .fn-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  min-width: 0;
  padding: 0;
}
.graph-panel .fn-input input::placeholder { color: var(--muted); opacity: 0.7; }
.graph-panel .fn-input button.fn-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
}
.graph-panel .fn-input button.fn-toggle:hover { background: var(--key-hover); color: var(--text); }
.graph-panel .fn-input.disabled { opacity: 0.55; }
.graph-panel .fn-input .err {
  color: #f87171;
  font-size: 11px;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.graph-panel .controls { display: flex; gap: 5px; align-items: center; }
.graph-panel .controls button {
  appearance: none;
  border: 0;
  background: var(--key);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 100ms;
}
.graph-panel .controls button:hover { background: var(--key-hover); }
.graph-panel .controls .spacer { flex: 1; }
.graph-panel .trace {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-height: 14px;
  line-height: 14px;
  text-align: right;
}
.graph-panel .trace .x { color: var(--accent-3); }
.graph-panel .trace .y { color: var(--accent-2); }
.graph-panel .canvas-wrap {
  flex: 1 1 0;
  min-height: 0;
  background: var(--panel-2);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  touch-action: none;
}
.graph-panel canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.graph-panel canvas.dragging { cursor: grabbing; }

/* ---------- Financial ---------- */
.finance-panel { gap: clamp(8px, 1.4vh, 12px); overflow-y: auto; }
.finance-panel h3 {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.finance-panel .tvm {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px 10px;
  align-items: center;
}
.finance-panel .tvm label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.finance-panel .tvm input {
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: 0;
  min-width: 0;
  width: 100%;
  transition: border-color 120ms;
}
.finance-panel .tvm input:focus {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
.finance-panel .tvm input.solved {
  color: var(--accent-3);
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 8%, var(--panel-2));
}
.finance-panel .tvm button.solve-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent-3) 35%, transparent);
  background: transparent;
  color: var(--accent-3);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background-color 120ms;
}
.finance-panel .tvm button.solve-btn:hover { background: color-mix(in srgb, var(--accent-3) 14%, transparent); }
.finance-panel .options { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.finance-panel .options label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.finance-panel .options select {
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}
.finance-panel .actions { display: flex; gap: 8px; }
.finance-panel .actions button {
  appearance: none;
  border: 0;
  background: var(--key);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 100ms;
}
.finance-panel .actions button:hover { background: var(--key-hover); }
.finance-panel .summary {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 12%, transparent);
}
.finance-panel .summary strong { color: var(--text); font-weight: 600; }
.finance-panel .summary .err { color: #f87171; }

/* ---------- Keypad ---------- */
.pad {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(4px, 0.9vh, 10px);
  padding: clamp(4px, 0.9vh, 10px);
  touch-action: manipulation;
}
.pad[hidden] { display: none; }
button.key {
  appearance: none;
  border: 0;
  border-radius: clamp(8px, 1.4vh, 14px);
  background: var(--key);
  color: var(--text);
  font-size: clamp(15px, 2.6vh, 22px);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color 80ms ease, transform 60ms ease, box-shadow 80ms ease;
  font-variant-numeric: tabular-nums;
  min-height: 0;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.25);
}
button.key:hover {
  background: var(--key-hover);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 12px rgba(0,0,0,0.35),
    0 0 0 1px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
button.key:active, button.key.pressed { background: var(--key-active); transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); }
button.key.fn { background: var(--fn); color: var(--fn-text); font-size: clamp(13px, 2.1vh, 18px); }
button.key.fn:hover {
  background: var(--key-hover);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 12px rgba(0,0,0,0.35),
    0 0 0 1px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
button.key.clear-key { font-size: clamp(12px, 1.85vh, 15px); letter-spacing: 0.01em; }
button.key.op {
  background: var(--op);
  color: var(--op-text);
  font-size: clamp(18px, 3vh, 26px);
  font-weight: 600;
}
button.key.op:hover {
  background: var(--op-hover);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 6px 16px rgba(0,0,0,0.4),
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
button.key.op:active, button.key.op.pressed { background: color-mix(in srgb, var(--accent) 35%, var(--op)); color: var(--text); }
button.key.eq {
  background: var(--eq-grad);
  color: var(--eq-text);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px var(--eq-glow);
  transition: filter 120ms ease, box-shadow 160ms ease, transform 120ms ease;
}
button.key.eq:hover {
  filter: brightness(1.15) saturate(1.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 0 0 2px color-mix(in srgb, var(--eq-glow) 70%, transparent),
    0 10px 28px var(--eq-glow);
  transform: translateY(-1px);
}
button.key.eq:active, button.key.eq.pressed {
  filter: brightness(0.95);
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 10px var(--eq-glow);
}
button.key.wide { grid-column: span 2; }

/* Scientific pad: 3 rows of sci functions stacked above the basic 5 rows. */
.pad.sci { grid-template-columns: repeat(4, 1fr); }
button.key.sci {
  background: var(--fn);
  color: var(--accent-3);
  font-size: clamp(11px, 1.85vh, 16px);
  font-weight: 500;
}
button.key.sci:hover {
  background: var(--key-hover);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 12px rgba(0,0,0,0.35),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
button.key.sci.alt { color: color-mix(in srgb, var(--accent-2) 75%, var(--text)); }
.display .meta .trig-mode {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 40%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  margin-right: 6px;
}
.display .meta .trig-mode:hover { background: color-mix(in srgb, var(--accent-3) 10%, transparent); }
.display .meta .meta-right { display: flex; align-items: center; gap: 4px; }
.display .meta .rpn-toggle {
  appearance: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: color 120ms, border-color 120ms, background-color 120ms, box-shadow 120ms;
}
.display .meta .rpn-toggle:hover { color: var(--text); border-color: var(--accent-3); }
.display .meta .rpn-toggle.on {
  color: var(--accent-3);
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 12%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-3) 35%, transparent);
}

/* ---------- Mode/page nav ---------- */
.modes {
  display: flex;
  gap: 6px;
  background: var(--panel);
  padding: 6px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.modes::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-grad);
  opacity: 0.5;
}
.modes a, .modes button {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 9px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  letter-spacing: .015em;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modes a:hover, .modes button:hover {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--text);
}
.modes a.active, .modes button.active {
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent) inset;
}
.modes .rpn-toggle {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .08em;
}
.modes .rpn-toggle.on {
  color: var(--accent-3);
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 12%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-3) 35%, transparent);
}

/* ---------- Static content pages (Contact / About / Privacy / Terms) ---------- */
.content-page { overflow: hidden; }
.display.content-display {
  padding: clamp(8px, 1.6vh, 14px) clamp(14px, 3vw, 22px);
  min-height: 0;
}
.content-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 2.4vh, 22px) clamp(16px, 4vw, 26px) clamp(18px, 3vh, 28px);
  color: var(--text);
  line-height: 1.55;
}
.content-body h1 {
  font-size: clamp(20px, 3.4vh, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
}
.content-body h2 {
  font-size: clamp(15px, 2.4vh, 18px);
  font-weight: 600;
  margin: 18px 0 6px 0;
  color: var(--text);
}
.content-body p {
  font-size: 14px;
  margin: 8px 0;
  color: var(--muted);
}
.content-body p.lede {
  font-size: 15px;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  margin: 0 0 14px 0;
}
.content-body p.effective {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px 0;
  opacity: 0.75;
}
.content-body strong { color: var(--text); font-weight: 600; }
.content-body ul {
  font-size: 14px;
  color: var(--muted);
  padding-left: 20px;
  margin: 8px 0;
}
.content-body ul li { margin: 4px 0; }

/* ── Article reading experience (only on article pages) ─────────────
   Long-form articles get a slightly lighter reading panel and a
   one-notch-larger body font than the short Contact/About/Terms pages,
   because they're denser and need more breathing room. */
body[data-page="article"] .calc.content-page {
  background: color-mix(in srgb, var(--panel) 80%, #2a3544);
}
body[data-page="article"] .display.content-display {
  background: color-mix(in srgb, var(--panel-2) 80%, #2a3544);
}
body[data-page="article"] .content-body { font-size: 15px; line-height: 1.62; }
body[data-page="article"] .content-body p        { font-size: 15px; }
body[data-page="article"] .content-body p.lede   { font-size: 16px; }
body[data-page="article"] .content-body ul       { font-size: 15px; }
body[data-page="article"] .content-body h1 { font-size: clamp(22px, 3.6vh, 28px); }
body[data-page="article"] .content-body h2 { font-size: clamp(16px, 2.5vh, 19px); }
body[data-page="article"] .content-body p.effective { font-size: 13px; }

@media (prefers-color-scheme: light) {
  body[data-page="article"] .calc.content-page {
    background: color-mix(in srgb, var(--panel) 92%, #0f172a);
  }
  body[data-page="article"] .display.content-display {
    background: color-mix(in srgb, var(--panel-2) 90%, #0f172a);
  }
}

/* ── Amortization chart in articles ──────────────────────────────── */
.amort-chart {
  margin: 20px 0;
}
.amort-chart svg {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.amort-chart figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* ── Product cards (used on the Amazon-calculators article) ───────── */
.content-body .product-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
  margin: 28px 0;
  padding: 20px;
  background: color-mix(in srgb, var(--panel-2) 85%, transparent);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
  position: relative;
}
.content-body .product-card .product-rank {
  position: absolute;
  top: -10px; left: 16px;
  padding: 3px 10px;
  background: var(--accent-grad);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.content-body .product-card .product-image {
  background: #ffffff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.content-body .product-card .product-image img {
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.content-body .product-card .product-body h2 {
  margin: 0 0 8px 0 !important;
}
.content-body .product-card .product-body p { margin: 8px 0; }
.content-body .product-card .product-price {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 14px 0 !important;
  font-size: 16px;
}
.content-body .product-card .product-price strong {
  font-size: 18px;
  color: var(--accent-3);
}
.content-body .product-card .buy-btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--eq-grad);
  color: var(--eq-text);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px var(--eq-glow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.content-body .product-card .buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--eq-glow);
  text-decoration: none;
}
.content-body .product-card .buy-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
@media (max-width: 620px) {
  .content-body .product-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .content-body .product-card .product-image {
    max-width: 260px;
    margin: 0 auto;
    min-height: 0;
  }
}

/* Comparison table at the top of shopping articles */
.content-body .calc-comparison {
  margin: 16px 0 28px 0;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
}
.content-body .calc-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.content-body .calc-comparison th,
.content-body .calc-comparison td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 12%, transparent);
}
.content-body .calc-comparison th {
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.content-body .calc-comparison tbody tr:last-child td { border-bottom: 0; }
.content-body .calc-comparison tbody tr:hover {
  background: color-mix(in srgb, var(--accent-3) 6%, transparent);
}

/* Affiliate disclosure notice */
.content-body p.disclosure {
  font-size: 13px !important;
  color: var(--muted);
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent-3) 8%, transparent);
  border-left: 3px solid var(--accent-3);
  border-radius: 4px;
  margin: 12px 0 24px 0;
}

/* ── Articles hub page ────────────────────────────────────────────── */
.content-body .hub-hero {
  margin: 8px 0 24px 0;
  padding: 20px 22px 22px;
  border-radius: 14px;
  background:
    radial-gradient(80% 120% at 15% 0%, color-mix(in srgb, var(--accent-3) 10%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 92%, var(--accent-3)) 0%, var(--panel-2) 100%);
  border: 1px solid color-mix(in srgb, var(--muted) 16%, transparent);
}
.content-body .hub-hero h1 { margin: 0 0 8px 0; font-size: clamp(22px, 3.6vh, 28px); }
.content-body .hub-hero p { margin: 0; color: color-mix(in srgb, var(--text) 75%, var(--muted)); font-size: 15px; }
.content-body .hub-hero .hero-meta {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.content-body .hub-hero .hero-meta span::before { content: "◆"; color: var(--accent-3); margin-right: 6px; }

.content-body .section-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 24px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 16%, transparent);
}
.content-body .section-heading h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.content-body .section-heading .count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.content-body .article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 0 0 8px 0;
  list-style: none;
}
@media (min-width: 720px) {
  .content-body .article-grid { grid-template-columns: repeat(2, 1fr); }
}
.content-body .article-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: 12px;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 160ms ease, background 140ms ease;
}
.content-body .article-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-3) 35%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-3) 12%, transparent);
  background: color-mix(in srgb, var(--panel-2) 95%, var(--accent-3));
}
.content-body .article-card .pill {
  align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-3) 18%, transparent);
  color: var(--accent-3);
}
.content-body .article-card .pill.pill-fin   { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #fbbf24; }
.content-body .article-card .pill.pill-sci   { background: color-mix(in srgb, #a78bfa 20%, transparent); color: #c4b5fd; }
.content-body .article-card .pill.pill-graph { background: color-mix(in srgb, #22d3ee 20%, transparent); color: #67e8f9; }
.content-body .article-card .pill.pill-basic { background: color-mix(in srgb, #14b8a6 20%, transparent); color: #5eead4; }
.content-body .article-card .pill.pill-heritage { background: color-mix(in srgb, #f43f5e 20%, transparent); color: #fda4af; }
.content-body .article-card h3 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.content-body .article-card h3 a { color: inherit; text-decoration: none; }
.content-body .article-card h3 a:hover { color: var(--accent-3); }
.content-body .article-card p.excerpt {
  margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.content-body .article-card .meta {
  display: flex; gap: 14px; align-items: center;
  margin-top: 4px;
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.content-body .article-card .meta .dot { color: color-mix(in srgb, var(--muted) 50%, transparent); }

/* Coming-soon roadmap items */
.content-body .roadmap {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 720px) {
  .content-body .roadmap { grid-template-columns: repeat(2, 1fr); }
}
.content-body .roadmap li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--muted) 22%, transparent);
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}
.content-body .roadmap li::before {
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;
  background: color-mix(in srgb, var(--accent-3) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 15%, transparent);
}
.content-body .roadmap li.cat-fin::before   { background: #fbbf24; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 20%, transparent); }
.content-body .roadmap li.cat-sci::before   { background: #c4b5fd; box-shadow: 0 0 0 3px color-mix(in srgb, #a78bfa 20%, transparent); }
.content-body .roadmap li.cat-graph::before { background: #67e8f9; box-shadow: 0 0 0 3px color-mix(in srgb, #22d3ee 20%, transparent); }
.content-body .roadmap li.cat-basic::before { background: #5eead4; box-shadow: 0 0 0 3px color-mix(in srgb, #14b8a6 20%, transparent); }
.content-body .roadmap li.cat-fin      .cat { color: #fbbf24; }
.content-body .roadmap li.cat-sci      .cat { color: #c4b5fd; }
.content-body .roadmap li.cat-graph    .cat { color: #67e8f9; }
.content-body .roadmap li.cat-basic    .cat { color: #5eead4; }
.content-body .roadmap li.cat-heritage .cat { color: #fda4af; }
.content-body .roadmap li.cat-heritage::before { background: #fda4af; box-shadow: 0 0 0 3px color-mix(in srgb, #f43f5e 20%, transparent); }
.content-body .roadmap li .title { color: var(--text); font-weight: 500; }
.content-body .roadmap li .cat {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-right: 6px;
}

/* Featured article (full width, larger treatment — used when there's
   only one card in a "Latest" section). */
.content-body .article-card.featured {
  grid-column: 1 / -1;
  padding: 22px 24px;
  gap: 10px;
  background:
    radial-gradient(70% 100% at 100% 0%, color-mix(in srgb, var(--accent-3) 7%, transparent) 0%, transparent 55%),
    color-mix(in srgb, var(--panel-2) 85%, transparent);
}
.content-body .article-card.featured h3 { font-size: 20px; line-height: 1.25; }
.content-body .article-card.featured p.excerpt { font-size: 14px; }
.content-body .article-card.featured blockquote {
  margin: 10px 0 0 0;
  padding: 10px 14px;
  border-left: 3px solid color-mix(in srgb, var(--accent-3) 60%, transparent);
  color: color-mix(in srgb, var(--text) 75%, var(--muted));
  font-size: 13px;
  font-style: italic;
  background: color-mix(in srgb, var(--accent-3) 5%, transparent);
  border-radius: 0 6px 6px 0;
}
.content-body .article-card.featured .read-more {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-3);
}
.content-body .article-card.featured:hover .read-more { text-decoration: underline; }

/* Roadmap 3-column on wide screens — 6 items fit 2 rows clean */
@media (min-width: 960px) {
  .content-body .roadmap { grid-template-columns: repeat(3, 1fr); }
}

/* Suggest-a-topic card — fills empty grid slots with a branded CTA */
.content-body .article-card.suggest {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent-3) 38%, transparent);
  gap: 6px;
}
.content-body .article-card.suggest:hover {
  background: color-mix(in srgb, var(--accent-3) 6%, transparent);
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent-3) 55%, transparent);
  transform: translateY(-2px);
}
.content-body .article-card.suggest .pill {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-3) 35%, transparent);
  color: var(--accent-3);
}
.content-body .article-card.suggest h3 { font-size: 15px; }
.content-body .article-card.suggest p.excerpt { font-size: 13px; }
.content-body .article-card.suggest .read-more {
  margin-top: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-3);
}

.content-body a { color: var(--accent-3); text-decoration: none; }
.content-body a:hover { text-decoration: underline; }

/* Breadcrumbs, muted text, and article listing (used on /articles/ hub
   and the individual article pages). */
.content-body p.crumbs {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 10px 0;
  opacity: 0.8;
}
.content-body p.muted { opacity: 0.65; font-style: italic; }
.content-body ul.article-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px 0;
}
.content-body ul.article-list li {
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
  margin: 0;
}
.content-body ul.article-list li:last-child { border-bottom: 0; }
.content-body ul.article-list li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.content-body ul.article-list li a:hover { color: var(--accent-3); text-decoration: none; }
.content-body ul.article-list li p {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* "Related reading" block at the bottom of page-info articles.
   Appears on calculator pages that have linked long-form articles. */
.related-reading {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
}
.related-reading h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.related-reading ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-reading ul li { margin: 6px 0; }
.related-reading ul li a {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}
.related-reading ul li a:hover { color: var(--accent-3); text-decoration: underline; }
.related-reading ul li::before {
  content: "→ ";
  color: var(--accent-3);
  font-weight: 600;
  margin-right: 2px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 14px;
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-form .field-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  /* 16px to prevent iOS auto-zoom on focus */
  font-size: 16px;
  line-height: 1.4;
  outline: 0;
  width: 100%;
  transition: border-color 120ms, box-shadow 120ms;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
.contact-form.invalid input:invalid,
.contact-form.invalid textarea:invalid {
  border-color: #f87171;
}
.contact-send {
  appearance: none;
  border: 0;
  background: var(--accent-grad);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 4px;
  min-height: 46px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: filter 120ms, transform 60ms;
}
.contact-send:hover { filter: brightness(1.06); }
.contact-send:active { filter: brightness(0.95); transform: translateY(1px); }
.contact-send:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-3) 60%, transparent);
  outline-offset: 2px;
}
.contact-form-status {
  font-size: 13px;
  margin: 4px 0 0;
  min-height: 18px;
  color: var(--muted);
}
.contact-form-status.err { color: #f87171; }
.contact-form-status.ok { color: var(--accent-3); }
.contact-form-status.pending { color: var(--muted); }
.contact-alt {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}
.contact-alt a { color: var(--accent-3); text-decoration: none; }
.contact-alt a:hover { text-decoration: underline; }

/* ---------- Site footer (legal/about links) ---------- */
.site-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 4px;
  transition: color 120ms;
}
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer a[aria-current="page"] { color: var(--text); }
.site-footer a:focus-visible,
.site-footer .how-to-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-3) 60%, transparent);
  outline-offset: 1px;
}
.site-footer .how-to-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: color 120ms;
}
.site-footer .how-to-btn:hover { color: var(--text); text-decoration: underline; }

/* ---------- Per-page info article (under the calculator) ---------- */
.page-info {
  width: min(420px, 100vw);
  padding: clamp(14px, 2.4vh, 22px) clamp(14px, 4vw, 24px) clamp(20px, 4vh, 32px);
  color: var(--text);
  line-height: 1.55;
  flex: 0 0 auto;
}
.page-info h1 {
  font-size: clamp(20px, 3.2vh, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.page-info h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--text);
}
.page-info p, .page-info ul, .page-info ol {
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0;
}
.page-info ul, .page-info ol { padding-left: 20px; }
.page-info li { margin: 4px 0; }
.page-info p.lede {
  font-size: 14.5px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  margin: 0 0 14px;
}
.page-info strong { color: var(--text); font-weight: 600; }
.page-info a { color: var(--accent-3); text-decoration: none; }
.page-info a:hover { text-decoration: underline; }
.page-info code {
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--accent-3);
}
.page-info details {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: 12px;
  margin: 8px 0;
  overflow: hidden;
  transition: border-color 120ms;
}
.page-info details[open] {
  border-color: color-mix(in srgb, var(--accent-3) 30%, transparent);
}
.page-info summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.page-info summary::-webkit-details-marker { display: none; }
.page-info summary::after {
  content: "+";
  color: var(--accent-3);
  font-size: 18px;
  font-weight: 400;
  margin-left: 12px;
  line-height: 1;
}
.page-info details[open] > summary::after { content: "−"; }
.page-info .details-body {
  padding: 0 14px 12px;
}
.page-info .details-body > :first-child { margin-top: 0; }
.page-info .details-body > :last-child { margin-bottom: 0; }

/* Close (×) button for the mobile info sheet — injected by JS, hidden on desktop. */
.page-info .info-close {
  appearance: none;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: max(env(safe-area-inset-top), 10px);
  right: clamp(10px, 3vw, 18px);
  display: none;
  align-items: center;
  justify-content: center;
  transition: color 120ms, border-color 120ms, background-color 120ms;
}
.page-info .info-close:hover { color: var(--text); border-color: var(--accent-3); }
.page-info .info-close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-3) 60%, transparent);
  outline-offset: 2px;
}

/* ---------- Responsive tail ---------- */
@media (max-width: 340px) {
  .modes a, .modes button { font-size: 12px; padding: 8px 4px; }
  .modes .rpn-toggle { padding: 8px 10px; }
}
@media (max-height: 560px) {
  .modes { padding: 4px; }
  .modes a, .modes button { padding: 7px 5px; font-size: 12px; }
}
/* Mobile: when JS has wired up the "How to" sheet, take .page-info out of
   the page flow so the calculator alone fills the viewport (no scroll-away).
   The article is then revealed as a full-screen sheet via .info-open. */
@media (max-width: 919px) {
  body.info-modal > article.page-info {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    z-index: 50;
    background:
      radial-gradient(80% 50% at 15% 0%, var(--bg-glow-1) 0%, transparent 60%),
      radial-gradient(70% 50% at 100% 100%, var(--bg-glow-2) 0%, transparent 60%),
      var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(env(safe-area-inset-top), 14px) clamp(14px, 4vw, 24px) clamp(20px, 4vh, 32px);
    transform: translateY(100%);
    transition: transform 220ms ease;
    pointer-events: none;
  }
  body.info-modal.info-open > article.page-info {
    transform: translateY(0);
    pointer-events: auto;
  }
  body.info-modal > article.page-info .info-close { display: inline-flex; }
  body.info-modal > article.page-info h1 {
    /* Make room for the close button in the top-right. */
    padding-right: 48px;
  }
  /* Lock background scroll while the sheet is open. */
  body.info-open { overflow: hidden; }
}

/* Desktop (≥920px): on pages that have an info article, lay the
   calculator and the article out side-by-side. The calculator is sticky
   so it stays visible as the article scrolls. Static pages (no article)
   keep the column layout with vertical centering. The "How to" footer
   button is hidden — the article is already in view. */
@media (min-width: 920px) {
  body:has(article.page-info) {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(20px, 3vw, 40px);
  }
  body:has(article.page-info) > .app {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
  }
  body:has(article.page-info) > .page-info {
    flex: 0 0 auto;
  }
  .site-footer .how-to-btn { display: none !important; }

  /* Static content pages (About / Privacy / Terms / Contact): drop the
     calculator panel chrome so the body text reads like the per-page info
     article alone — same column width, plain background, no display header. */
  body:not(:has(article.page-info)) {
    justify-content: flex-start;
  }
  body:not(:has(article.page-info)) > .app {
    width: min(720px, 100vw);
    height: auto;
    max-height: none;
  }
  body:not(:has(article.page-info)) .calc.content-page {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    flex: 0 0 auto;
  }
  /* On article pages, restore a lighter reading card (the Contact/About
     pages are short and fine flowing on the body gradient, but articles
     are long-form and need a defined surface for comfortable reading). */
  body[data-page="article"]:not(:has(article.page-info)) .calc.content-page {
    background: color-mix(in srgb, var(--panel) 55%, #2a3544);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
    overflow: hidden;
  }
  @media (prefers-color-scheme: light) {
    body[data-page="article"]:not(:has(article.page-info)) .calc.content-page {
      background: color-mix(in srgb, var(--panel) 95%, #0f172a);
      box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.06) inset;
    }
  }
  body:not(:has(article.page-info)) .calc.content-page::before { display: none; }
  body:not(:has(article.page-info)) .display.content-display { display: none; }
  body:not(:has(article.page-info)) .content-body {
    flex: 0 0 auto;
    overflow: visible;
    padding: clamp(14px, 2.4vh, 22px) clamp(14px, 4vw, 24px) clamp(20px, 4vh, 32px);
  }

  /* Desktop only: deepen the page background so the calculator panel
     stands out more against it. Phone view (below 920px) is untouched. */
  :root { --bg: #02040a; }
  @media (prefers-color-scheme: light) {
    :root { --bg: #d8dfe8; }
  }
}
/* Touch devices: bump <input> font-size to 16px so mobile browsers
   (iOS Safari, Chrome on iOS, Android Chrome) don't auto-zoom on focus.
   Auto-zoom widens the page past the viewport and doesn't always reverse
   when the keyboard retracts. */
@media (hover: none) and (pointer: coarse) {
  .graph-panel .fn-input input,
  .finance-panel .tvm input {
    font-size: 16px;
  }
}

/* ---------- Financial (HP-12C-inspired) ---------- */
.fin-display .meta .fin-when {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 40%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  background: transparent;
}
.fin-regs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  margin: 4px 0 2px;
}
.fin-regs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 2px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border: 1px solid transparent;
  transition: background-color 120ms, border-color 120ms;
}
.fin-regs span b {
  font-weight: 700;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .1em;
}
.fin-regs span i {
  font-style: normal;
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fin-regs span.set {
  background: color-mix(in srgb, var(--accent-3) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-3) 35%, transparent);
}
.fin-regs span.set b { color: var(--accent-3); }
.fin-regs span.solved {
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 50%, transparent);
}
.fin-regs span.solved b { color: var(--accent-2); }
.fin-regs span.flash { animation: fin-flash 320ms ease-out; }
@keyframes fin-flash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.fin-msg {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  /* Reserve two lines so the height doesn't jump when the message
     transitions between long startup copy and short status updates. */
  min-height: calc(11px * 1.35 * 2);
  margin-top: 2px;
}
.fin-msg b { color: var(--text); font-weight: 600; }
.fin-msg.err { color: #f87171; }
.fin-msg.ok { color: var(--accent-3); }

.fin-options {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 clamp(4px, 0.9vh, 10px);
  flex: 0 0 auto;
}
.fin-options label {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .05em;
}
.fin-options select {
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.fin-options .opt-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color 100ms, color 100ms, border-color 100ms;
}
.fin-options .opt-btn:hover { background: var(--key-hover); color: var(--text); }
.fin-options #tvm-WHEN-btn[aria-pressed="true"] {
  color: var(--accent-3);
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 10%, transparent);
}

/* 5-column pad for the financial calculator */
.pad.fin-pad { grid-template-columns: repeat(5, 1fr); }

/* TVM keys: gold/teal accent to look like dedicated function keys */
button.key.tvm {
  background: color-mix(in srgb, var(--accent-3) 18%, var(--fn));
  color: var(--accent-3);
  font-weight: 700;
  font-size: clamp(13px, 2.1vh, 17px);
  letter-spacing: .03em;
  border: 1px solid color-mix(in srgb, var(--accent-3) 35%, transparent);
  text-transform: uppercase;
}
button.key.tvm:hover {
  background: color-mix(in srgb, var(--accent-3) 28%, var(--fn));
  color: var(--text);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 6px 16px rgba(0,0,0,0.4),
    0 0 0 1px color-mix(in srgb, var(--accent-3) 40%, transparent);
}
button.key.tvm.target {
  background: color-mix(in srgb, var(--accent-2) 32%, var(--fn));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 35%, transparent);
}

/* ── Article hero images ──────────────────────────────────────────── */
.content-body .article-hero {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 10px auto 6px auto;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.content-body .image-caption {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 16px 0;
}
.content-body .image-caption a {
  color: color-mix(in srgb, var(--accent-3) 75%, var(--muted));
}
.content-body .image-caption a:hover { text-decoration: underline; }



/* ==========================================================================
 *  Matrix Calculator additions
 *  All values use existing CSS variables — no new colours introduced.
 *  ========================================================================== */

/* ── Display area ──────────────────────────────────────────────────────────── */

.matrix-display {
  padding: clamp(10px, 1.8vh, 18px) clamp(14px, 3vw, 22px) clamp(8px, 1.2vh, 12px);
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

/* Row of defined-matrix tiles across the top of the display */
.matrix-tiles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
  align-items: flex-start;
}

/* Expression line */
.matrix-expr-area {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(12px, 1.9vh, 15px);
  color: var(--muted);
  text-align: right;
  min-height: 18px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
  scrollbar-width: none;
}
.matrix-expr-area::-webkit-scrollbar { display: none; }

/* Result area */
.matrix-result-area {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 2px;
  scrollbar-width: none;
}
.matrix-result-area::-webkit-scrollbar { display: none; }
.matrix-result-area.error .scalar-result,
.matrix-result-area.error .matrix-bracket-wrap { color: #f87171; }

/* Scalar result value */
.scalar-result {
  font-size: clamp(26px, 5.2vh, 44px);
  font-weight: 300;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
}

/* ── Matrix tile buttons (defined-matrix chips in the display) ─────────────── */

.matrix-tile {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent-3) 28%, transparent);
  background: color-mix(in srgb, var(--accent-3) 8%, var(--panel-2));
  border-radius: 10px;
  padding: 5px 8px 6px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.matrix-tile:hover {
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 14%, var(--panel-2));
}
.matrix-tile.active {
  border-color: var(--accent-3);
  background: color-mix(in srgb, var(--accent-3) 16%, var(--panel-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-3) 28%, transparent);
}
.matrix-tile .tile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-3);
  line-height: 1;
}
.matrix-tile .tile-dims {
  font-size: 10px;
  color: var(--muted);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Matrix bracket renderer ──────────────────────────────────────────────── */

.matrix-bracket-wrap {
  display: inline-grid;
  position: relative;
  column-gap: clamp(6px, 1vw, 12px);
  row-gap: clamp(2px, 0.4vh, 5px);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(12px, 2vh, 16px);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  /* Horizontal padding creates space for the bracket pseudo-elements */
  padding: 6px 14px;
  margin: 2px 4px;
}
.matrix-bracket-wrap::before,
.matrix-bracket-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent);
  pointer-events: none;
}
.matrix-bracket-wrap::before {
  left: 2px;
  border-right: none;
  border-radius: 3px 0 0 3px;
}
.matrix-bracket-wrap::after {
  right: 2px;
  border-left: none;
  border-radius: 0 3px 3px 0;
}

/* Individual matrix cell within a rendered bracket */
.matrix-bracket-wrap .mc {
  display: block;
  text-align: right;
  min-width: 2ch;
  padding: 1px 3px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 80ms;
}
.matrix-bracket-wrap .mc.focused {
  background: color-mix(in srgb, var(--accent-3) 22%, transparent);
  outline: 1px solid var(--accent-3);
}

/* Mini bracket used inside tile chips — smaller font, tighter spacing */
.matrix-bracket-wrap.mini {
  font-size: clamp(9px, 1.4vh, 11px);
  column-gap: 4px;
  row-gap: 1px;
  padding: 3px 9px;
  margin: 0;
}
.matrix-bracket-wrap.mini::before,
.matrix-bracket-wrap.mini::after {
  width: 5px;
  border-width: 1.5px;
}
.matrix-bracket-wrap.mini .mc {
  padding: 0 2px;
  min-width: 1.5ch;
}

/* ── Matrix editor panel ──────────────────────────────────────────────────── */

.matrix-editor {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(6px, 1vh, 10px) clamp(10px, 2vw, 16px);
  background: color-mix(in srgb, var(--panel-2) 80%, var(--panel));
  border-top: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.matrix-editor[hidden] { display: none; }

.matrix-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.matrix-editor-resize {
  display: flex;
  gap: 12px;
  align-items: center;
}
.matrix-editor-resize label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.matrix-editor-resize button {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  background: var(--key);
  color: var(--text);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 80ms;
}
.matrix-editor-resize button:hover  { background: var(--key-hover); }
.matrix-editor-resize button:active { background: var(--key-active); }
.matrix-editor-resize span {
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
  text-align: center;
  color: var(--text);
}

/* Grid of cell inputs */
.matrix-grid {
  display: grid;
  gap: clamp(4px, 0.7vh, 7px);
  /* grid-template-columns set dynamically by JS */
}
.matrix-grid input {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 7px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 16px prevents iOS Safari from auto-zooming on focus */
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  -webkit-appearance: none;
  appearance: none;
}
.matrix-grid input:focus {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
.matrix-grid input::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.matrix-toolbar {
  display: flex;
  gap: clamp(4px, 0.7vw, 8px);
  padding: 0 clamp(4px, 0.8vh, 8px) clamp(2px, 0.4vh, 4px);
  align-items: center;
  flex: 0 0 auto;
}
.matrix-toolbar .key {
  flex: 1;
  font-size: clamp(11px, 1.7vh, 13px);
  padding: 0 4px;
  min-height: clamp(28px, 4vh, 36px);
}
#btn-new-matrix {
background: var(--accent-2);
color: #fff;
font-weight: 700;
flex: 1.6;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 12px color-mix(in srgb, var(--accent-2) 35%, transparent);
}
#btn-new-matrix:hover  { filter: brightness(1.1);  background: var(--accent-2); transform: translateY(-1px); }
#btn-new-matrix:active { filter: brightness(0.95); transform: translateY(0); }
#btn-undo:disabled,
#btn-redo:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* ── Matrix keypad layout ─────────────────────────────────────────────────── */

.matrix-pad {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vh, 7px);
  padding: clamp(4px, 0.8vh, 8px);
}

/* Row 1: A – H name buttons, 8 equal columns */
.matrix-pad-names {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(3px, 0.6vh, 7px);
  flex: 0 0 auto;
}

/* Row 2: operation buttons — 7 equal columns */
.matrix-pad-ops {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(3px, 0.6vh, 7px);
  flex: 0 0 auto;
}

/* Numpad: 6 columns to fit digits + ops + arrows + enter */
.matrix-numpad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(4px, 0.8vh, 9px);
  flex: 1 1 0;
  min-height: 0;
}

/* Name keys: italic to echo mathematical convention */
.matrix-name-key {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(14px, 2.3vh, 19px) !important;
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 22%, transparent);
}
.matrix-name-key:hover {
  border-color: var(--accent-3);
  color: var(--text);
}
/* Highlight name keys for matrices that are currently defined */
.matrix-name-key.defined {
  background: color-mix(in srgb, var(--accent-3) 12%, var(--fn));
  border-color: color-mix(in srgb, var(--accent-3) 35%, transparent);
}

/* Operation keys reuse .sci styles — just override font-size for longer labels */
.matrix-pad-ops .key {
  font-size: clamp(10px, 1.6vh, 13px);
  font-style: italic;
  letter-spacing: 0.01em;
}
.matrix-pad-ops .key[data-op="rref"],
.matrix-pad-ops .key[data-op="det"],
.matrix-pad-ops .key[data-op="trace"] {
  font-style: normal;
  font-size: clamp(9px, 1.5vh, 12px);
  letter-spacing: 0.02em;
}

/* Empty spacer cell used to preserve grid alignment */
.matrix-numpad > span { display: block; }

/* ── Responsive tweaks ────────────────────────────────────────────────────── */

/* Narrow phones: collapse name-key row to 4 columns over 2 rows */
@media (max-width: 340px) {
  .matrix-pad-names { grid-template-columns: repeat(4, 1fr); }
  .matrix-pad-ops   { grid-template-columns: repeat(4, 1fr); }
}

/* Very short screens: tighten gaps so everything still fits */
@media (max-height: 600px) {
  .matrix-pad  { gap: 3px; padding: 4px; }
  .matrix-pad-names,
  .matrix-pad-ops,
  .matrix-numpad { gap: 3px; }
  .matrix-editor { padding: 5px 10px; gap: 5px; }
  .matrix-grid input { padding: 3px 5px; font-size: 14px; }
}




/* ============================================================================
   Mortgage calculator (mortgage.html)
   Reuses --eq-grad / --accent / --accent-2 / --accent-3 design tokens; no new
   colors introduced. Form inputs sit inside the .calc panel like the financial
   page, then a collapsible "full breakdown" reveals PITI, chart, and amort.
   ========================================================================= */

/* Mortgage panel scrolls (mouse wheel on desktop, touch on phone), but the
   scrollbar UI is hidden — looks cleaner, behavior identical. */
.mort-calc {
  overflow: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge / IE */
  -webkit-overflow-scrolling: touch;
}
.mort-calc::-webkit-scrollbar { display: none; }

/* Display: payment focus area */
.mort-display { padding-bottom: clamp(10px, 1.6vh, 16px); }
.mort-result { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.mort-result-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.value.mort-pi {
  font-size: clamp(28px, 5.6vh, 44px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
}
.mort-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.mort-sub span { display: inline-flex; flex-direction: column; gap: 1px; }
.mort-sub b {
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted);
}
.mort-sub i {
  font-style: normal;
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.mort-when {
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 50%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}

/* Form body */
.mort-form {
  padding: clamp(10px, 1.8vh, 18px) clamp(14px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  overflow: visible;
}
.mort-field { display: flex; flex-direction: column; gap: 6px; }
.mort-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.mort-row-2 > .mort-field { min-width: 0; }
.mort-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
}
.mort-input-wrap {
  display: flex;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 10px;
  padding: 0 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mort-input-wrap[hidden] { display: none; }
.mort-prefix[hidden], .mort-suffix[hidden] { display: none; }
.mort-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent);
}
.mort-input-wrap input {
  flex: 1 1 auto;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: 10px 4px;
  font-family: inherit;
  min-width: 0;
}
.mort-input-wrap input::-webkit-outer-spin-button,
.mort-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mort-prefix, .mort-suffix {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}
.mort-hint {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* $ / % toggle */
.mort-toggle {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 8px;
  padding: 2px;
}
.mort-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .04em;
}
.mort-toggle-btn.active {
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent) inset;
}

/* Term buttons */
.mort-term {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mort-term-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .02em;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.mort-term-btn:hover {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--text);
}
.mort-term-btn.active {
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent) inset;
}

/* (Calculate button removed — calculator auto-updates on input.) */

/* (.mort-toggle-details removed — breakdown panel is always visible.) */

/* Detail panel: PITI / chart / amort */
.mort-details {
  border-top: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  padding: clamp(10px, 1.8vh, 18px) clamp(14px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mort-details[hidden] { display: none; }
#mort-pmi-row[hidden] { display: none; }
.mort-details h3 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mort-piti { display: flex; flex-direction: column; gap: 6px; }
.mort-piti-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--muted) 18%, transparent);
}
.mort-piti-row:last-child { border-bottom: 0; }
.mort-piti-row > span:first-child { color: var(--muted); }
.mort-piti-row > span:last-child { color: var(--text); }
.mort-piti-input { align-items: stretch; flex-wrap: wrap; }
.mort-piti-input > span:last-child {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 90px;
}
.mort-piti-input label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
}
.mort-mini-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 8px;
  padding: 0 8px;
  max-width: 130px;
}
.mort-mini-wrap input {
  width: 70px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 6px 2px;
  font-family: inherit;
  text-align: right;
}
.mort-piti-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
  border-bottom: 0 !important;
  font-size: 16px;
  font-weight: 700;
}
.mort-piti-total > span:first-child { color: var(--text) !important; }

/* Chart */
.mort-chart-wrap { display: flex; flex-direction: column; gap: 6px; }
.mort-chart-stage {
  position: relative;
  width: 100%;
  height: 280px;
}
.mort-chart {
  display: block;
  width: 100%;
  height: 100%;
  background: #e2e8f0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.mort-chart-axes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #000000;
}
.mort-chart-axes .mca-y, .mort-chart-axes .mca-x, .mort-chart-axes .mca-top {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
}
/* SVG viewBox padL=44 of W=600 -> 7.333% from left for labels' right edge */
.mort-chart-axes .mca-y {
  right: calc(100% - 7.333%);
  transform: translate(-6px, -50%);
  text-align: right;
}
.mort-chart-axes .mca-x {
  transform: translate(-50%, 0);
  /* SVG viewBox H=220, padB=26, gives x-labels at y = 220-8 = 212 -> 96.4% from top.
     Using top: 96.4% places the BASELINE of text near that level; CSS line-height: 1 keeps it tight. */
  top: 95%;
}
/* Final-year tick (e.g. 30y) is anchored at the right edge of the chart;
   right-align it so the label sits INSIDE the chart instead of overhanging. */
.mort-chart-axes .mca-x.mca-x-last {
  transform: translate(-100%, 0);
}
.mort-chart-axes .mca-top {
  /* Sit just inside the top of the Interest band, aligned to the left edge of the data area
     (SVG padL=44 of W=600 -> 7.33%; padT=12 of H=220 -> 5.45%, +~3% to drop below the line). */
  left: 7.5%;
  top: 8.5%;
  padding: 2px 2px 2px 5px;
  font-weight: 700;
}

/* Phones: the chart is too narrow for y-labels to fit in the 7.333% left gutter
   (which is only ~25px on a 340px-wide chart). Anchor labels' LEFT edge a few px
   inside the chart so the full "$X,XXX" stays visible, and shift the data area
   visual edge slightly. */
@media (max-width: 600px) {
  .mort-chart-axes .mca-y {
    right: auto;
    left: 4px;
    transform: translateY(-50%);
    text-align: left;
  }
}
.mort-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}
.mort-legend { display: inline-flex; align-items: center; gap: 6px; }
.mort-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.mort-legend-p i { background: var(--accent-3); }
.mort-legend-i i { background: #6366f1; } /* matches --eq-grad start */
.mort-legend-f i { background: rgba(248,250,252,0.95); border: 1px solid rgba(15,23,42,0.55); }

/* Amortization */
.mort-amort summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  padding: 8px 0;
  list-style: none;
}
.mort-amort summary::-webkit-details-marker { display: none; }
.mort-amort summary::after {
  content: " ▾";
  color: var(--accent-3);
  font-size: 11px;
}
.mort-amort[open] summary::after { content: " ▴"; }
.mort-amort-body { padding-top: 6px; }
.mort-amort-scroll {
  max-height: 360px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: 8px;
}
.mort-amort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 380px;
}
.mort-amort-table th,
.mort-amort-table td {
  padding: 6px 2px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 10%, transparent);
}
.mort-amort-table th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10px;
  z-index: 1;
}
.mort-amort-table th:first-child,
.mort-amort-table td:first-child { text-align: center; color: var(--muted); }
.mort-amort-table th:nth-child(2),
.mort-amort-table td:nth-child(2) { text-align: left; }

/* Affiliate CTA card (Compare today's mortgage rates) ---------------------- */
.affiliate-cta[hidden] { display: none; }
.affiliate-cta {
  margin: 18px clamp(14px, 3vw, 22px) 4px;
  display: block;
}
.affiliate-cta .aff-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 14%, transparent) 0%, color-mix(in srgb, var(--accent-3) 10%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.affiliate-cta .aff-headline {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}
.affiliate-cta .aff-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.affiliate-cta .aff-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 11px 18px;
  background: var(--accent-2);
  color: #07090d;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 120ms ease-out, transform 120ms ease-out;
}
.affiliate-cta .aff-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.affiliate-cta .aff-btn:active { transform: translateY(0); }
.affiliate-cta .aff-btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(0.4) brightness(0.85);
  opacity: 0.85;
}
.affiliate-cta[data-state="placeholder"] .aff-btn::after {
  content: " (coming soon)";
  font-weight: 500;
  opacity: 0.7;
}
.affiliate-cta .aff-disclosure {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.affiliate-cta .aff-disclosure a { color: var(--muted); text-decoration: underline; }

/* Mortgage page never modal-collapses page-info on phones — keep both visible
   stacked, matching financial.html behavior. */
@media (max-width: 740px) {
  body[data-page="mortgage"] .app { width: 100%; max-width: 480px; }
  .mort-amort-table { min-width: 460px; font-size: 11px; }
  .mort-amort-table th, .mort-amort-table td { padding: 5px 2px; }

  /* When a numeric input is focused on a phone, the OS keypad shrinks the
     viewport and would normally cover the live results panel
     (Monthly P&I / Total Interest / Payoff). Pin .mort-display to the top of
     whatever viewport is left so users can see the result update as they type.
     :has() is used so the sticky-on-focus only activates while the form has
     focus — no wasted real-estate when the user is just reading the page. */
  body[data-page="mortgage"] section.calc.mort-calc:has(.mort-form :focus) .mort-display,
  body[data-page="mortgage"] section.calc.mort-calc:has(.mort-piti :focus) .mort-display {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel);
    box-shadow: 0 6px 14px -8px rgba(0,0,0,0.45);
  }
}

/* ==========================================================================
   Cookie consent banner (consent.js)
   --------------------------------------------------------------------------
   Slides up from the bottom on first visit. Defaults to denied for ad
   personalization. Footer link "Cookies" can re-open it via window.openConsentBanner().
   ========================================================================== */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #0d1117;
  color: #e6edf3;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 240ms ease;
  font-size: 13.5px;
  line-height: 1.5;
  /* While hidden (before .is-visible is added, or after it's removed on
     dismiss), the banner is translated 100% offscreen but still has its
     original layout box. Without this, the offscreen element still
     intercepts clicks on the page elements above it (e.g. the contact
     form's Send button on contact.html), making the form appear dead.
     Re-enable pointer events only when the banner is actually visible. */
  pointer-events: none;
}
.consent-banner.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.consent-banner__inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
}
.consent-banner__text {
  flex: 1 1 320px;
  min-width: 240px;
  color: #e6edf3;
}
.consent-banner__text a {
  color: #79c0ff;
  text-decoration: underline;
}
.consent-banner__buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.consent-btn {
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.consent-btn--primary {
  background: #30363d;
  color: #f0f6fc;
  border-color: #484f58;
}
.consent-btn--primary:hover {
  background: #484f58;
  border-color: #6e7681;
}
.consent-btn--secondary {
  background: #30363d;
  color: #f0f6fc;
  border-color: #484f58;
}
.consent-btn--secondary:hover {
  background: #484f58;
  border-color: #6e7681;
}

@media (max-width: 540px) {
  .consent-banner { font-size: 12.5px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .consent-banner__inner { gap: 10px; }
  .consent-banner__buttons { width: 100%; justify-content: flex-end; }
}

/* Footer "Cookies" button — style as a plain link to match siblings */
.site-footer .footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.site-footer .footer-link-btn:hover { text-decoration: underline; }