/*
  Chase visual polish pass (T-029).

  Scope: typography, spacing, hierarchy, one restrained accent colour.
  Not a redesign — every template's HTML structure/classes are unchanged;
  this file only restyles what was previously an inline <style> block in
  base.html.

  Design direction ("modernized ledger"): warm-neutral background, ink-navy
  text, a display serif with real character for headers, a clean humanist
  sans for body copy, and tabular numerals everywhere a dollar amount or
  day-count appears so numbers line up like a real ledger when stacked.
  The one accent colour (muted amber/gold) is reserved for at-risk dollar
  amounts and tone-tier labels only — it is not used decoratively anywhere
  else (buttons, links, borders stay ink-navy or neutral).
*/

:root {
  --bg: #F6F5F2;              /* warm light gray, not stark white / not AI-cliché cream */
  --ink: #1C2430;             /* ink-navy body text */
  --ink-soft: #4B5563;        /* muted secondary text, still navy-leaning */
  --card-bg: #FFFEFB;         /* barely-warm white, sits just above the page bg */
  --border: #E3DFD4;          /* warm neutral border/divider */
  --accent: #B8862E;          /* muted amber/gold — at-risk $ and tier labels ONLY */
  --accent-bg: #FBF1DF;       /* pale wash of the accent, for tier badge fill */
  --danger: #9C4A3F;          /* separate semantic colour for withdrawal/safety notices — not the accent */
  --danger-bg: #FBEEEC;
  --success: #3F6B4F;
  --focus-ring: #1C2430;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  /* T-029 signature idea: every digit in the app lines up like a ledger,
     including dollar amounts and day-counts. Applying this at the root
     covers every number on the page without hunting down each one — it
     only changes how digit glyphs render, so ordinary prose is unaffected. */
  font-variant-numeric: tabular-nums;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1 {
  font-size: 1.9rem;
  margin: 1.75rem 0 0.5rem;
}

h2 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.6rem;
}

p { margin: 0.6rem 0; }

.muted {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* --- Navigation ---------------------------------------------------- */

nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

nav a:first-child {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

nav a:hover { text-decoration: underline; }

/* --- Cards ----------------------------------------------------------- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 1px 2px rgba(28, 36, 48, 0.04);
}

.row-pending { border-left: 4px solid var(--ink); }
.chase-row-copied { opacity: 0.6; border-left: 4px solid var(--success); }
.chase-row-withdrawn { border-left: 4px solid var(--danger); background: var(--danger-bg); }
.row-skipped { opacity: 0.6; border-left: 4px solid #A0AEC0; }

/* --- The one accent: at-risk money + tone-tier labels ---------------- */

.at-risk-amount {
  color: var(--accent);
  font-weight: 700;
}

.tier-badge {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(184, 134, 46, 0.3);
}

.reason {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.5rem 0 0.9rem;
}

/* Safety / status messaging — kept visually distinct from the money accent
   on purpose (a different hue signals "pay attention," not "here's money
   owed"). Applies both to withdrawn rows and to a still-PENDING row that
   was partially recomputed (T-031). */
.chase-row-status:not(:empty) { margin-top: 0.5rem; }
.settlement-notice {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(156, 74, 63, 0.25);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  margin: 0.5rem 0 0.9rem;
}

/* --- Forms & buttons --------------------------------------------------- */

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.9rem 0 0.3rem;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
}

legend {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.4rem;
}

textarea, input[type=text], input[type=email], input[type=number] {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

textarea:disabled, input:disabled { background: #F3F2EE; color: var(--ink-soft); }

button, input[type=submit] {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 7px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  margin-right: 0.4rem;
  margin-top: 0.4rem;
}

button:hover, input[type=submit]:hover { background: #10161F; border-color: #10161F; }
button:disabled { background: #D8D5CB; border-color: #D8D5CB; color: #8A8578; cursor: default; }

.secondary, .chase-copy-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.secondary:hover { background: #F1EFE8; }

.chase-copy-btn {
  background: var(--ink);
  color: #fff;
}

/* Visible keyboard focus states everywhere, restyled buttons included —
   never rely on the browser default once border/background are custom. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Landing page (marketing, anonymous+real-mode only) ----------------
   Extends the existing ledger identity rather than inventing a new one:
   no new colours, no new font families. The one deliberate visual risk is
   the hero side-by-side mockup, which reuses the existing .row-pending /
   .row-skipped border treatment already meaningful elsewhere in the app
   (solid ink border = needs action/attention; muted grey = ignored/inert)
   so the same visual grammar carries the same meaning here: the QuickBooks
   reminder is the "ignored" side, Chase's draft is the "needs a look" side. */

.landing-hero { padding: 0.5rem 0 0.25rem; }
.landing-hero h1 { font-size: 1.6rem; margin-top: 0.5rem; }
.hero-kicker {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-top: -0.2rem;
}
.hero-subhead { font-size: 1.05rem; max-width: 640px; }

.hero-cta { margin: 1.1rem 0 0.25rem; }
.hero-cta button { font-size: 1rem; padding: 0.7rem 1.35rem; }

.hero-mockup {
  display: flex;
  gap: 1.25rem;
  margin: 1.75rem 0 0.6rem;
  align-items: stretch;
}
.mockup-card { flex: 1 1 0; margin-bottom: 0; display: flex; flex-direction: column; }
.mockup-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.mockup-email-subject { font-weight: 600; margin-bottom: 0.4rem; }
.mockup-email-body { font-size: 0.92rem; color: var(--ink); margin-bottom: 0.6rem; }
/* Skeleton/redacted lines stand in for the Chase draft's actual wording,
   which the approved copy only describes (see landing.html's own
   comment) — an honest "this is a mockup" cue, not fabricated text. */
.redacted-line {
  height: 0.6em;
  background: var(--border);
  border-radius: 3px;
  margin: 0.4rem 0;
}
.mockup-badge { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin-top: auto; }
.mockup-callouts { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.mockup-callouts li {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0.2rem 0.3rem 0 0;
}
.hero-caption { font-style: italic; color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.4rem; }

.landing-section { margin: 2.25rem 0; }
.problem-section p { font-size: 1.02rem; max-width: 680px; }

.steps-list { list-style: none; padding: 0; margin: 0.75rem 0; }
.steps-list li { display: flex; gap: 0.9rem; margin: 0 0 1.1rem; align-items: baseline; }
.step-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
  flex: 0 0 auto;
  width: 1.75rem;
}

/* Ledger-style comparison table: aligned columns, restrained rules — the
   same tabular precision language as the rest of the app, not a generic
   bootstrap-striped table. */
.comparison-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; }
.comparison-table th, .comparison-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.92rem;
}
.comparison-table th { font-family: var(--font-display); font-weight: 600; border-bottom: 2px solid var(--ink); }
.comparison-table td:first-child, .comparison-table th:first-child { font-weight: 600; width: 20%; }

.pricing-card { max-width: 420px; }
.pricing-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; margin: 0.15rem 0; }
.pricing-amount .pricing-period { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }

.non-goals-list { padding-left: 1.1rem; }
.non-goals-list li { margin-bottom: 0.6rem; }

.cta-section { text-align: center; padding: 1.75rem 1.5rem; }
.cta-section .hero-cta { margin-top: 0.75rem; justify-content: center; }

/* =========================================================================
   T-061/D-020 — Tier 1 design pass, extending the landing identity
   ---------------------------------------------------------------------
   Same tokens as landing.css (verbatim: --bg, --ink, --accent, Fraunces/
   Inter, tabular numerals — all already declared above from T-029). What
   changes here is density and rhythm, not palette or type: these are
   authenticated, task-focused screens a returning customer uses for ten
   minutes on a Monday, not a first-impression marketing moment. No heroes,
   no alternating colour bands, no scroll motion — that register stays on
   landing.html only. Every existing class/id below this comment is
   UNTOUCHED; everything here is additive.
   ========================================================================= */

/* --- App shell: nav, wordmark, account name, footer --------------------- */

.app-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.app-wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-account-name {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  border-left: 1px solid var(--border);
}

/* Pushes "Sign out" (and anything after it) to the far right, keeping the
   wordmark/account-name/demo-link cluster left-aligned — a calmer, more
   conventional app-shell layout than everything crammed left in a row. */
.app-nav-spacer { flex: 1 1 auto; }

.secondary-link {
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
}

.app-shell { min-height: 0; }

.app-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* --- Digest: rank / amount / days hierarchy, reason as the card's hero --- */

.row-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

/* The rank number gets its own visual weight — this is a RANKED list, and
   "why am I looking at #2 before #7" is the whole product's premise, so the
   position in the list has to read at a glance, not just live inside a
   run-on sentence. */
.row-rank {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-pending .row-rank { background: var(--ink); border-color: var(--ink); color: #fff; }

.row-head-main { flex: 1 1 auto; min-width: 0; }

.row-headline {
  font-size: 1.05rem;
  line-height: 1.4;
}

.row-days {
  font-weight: 700;
  color: var(--ink);
}

/* The reason line is the product's differentiator (SPEC.md: judgement, not
   a timer) — it now reads as the hero of the card: larger, display-serif,
   set off with an accent rule, not squeezed in as an italic footnote under
   the header. `.reason` itself (frozen, load-bearing) is untouched; this
   only adds presentation on top of it. */
.row-reason {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  margin: 0.75rem 0 1rem;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 3px solid var(--accent);
}

.row-reason-label {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

/* Copy is the unmistakable primary action on a pending row: the group is
   visually separated from the demo-only controls below it, and Copy keeps
   its existing dark-ink treatment (frozen .chase-copy-btn) while Skip stays
   visually secondary. */
.row-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.9rem; }
.row-actions .chase-copy-btn { font-size: 0.95rem; padding: 0.65rem 1.4rem; }

/* Demo-only controls (gated on {% if demo_mode %} in digest.html) get a
   visually distinct, deliberately lower-key treatment so they never
   compete with Copy/Skip even in DEMO_MODE, where they DO render. */
.row-actions-demo {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.row-actions-demo .secondary { font-size: 0.78rem; opacity: 0.75; }

/* --- Paywall (billing_required.html): an upsell moment, not an error ---- */

.paywall {
  max-width: 560px;
  margin: 1.5rem auto 0;
  text-align: center;
}

.paywall-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.paywall-h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.9rem;
}

.paywall-lede {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.paywall-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 8px 24px rgba(28, 36, 48, 0.06);
}

.paywall-price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.paywall-price-period { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }

.paywall-cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: var(--ink);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.paywall-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(28, 36, 48, 0.18); }
.paywall-cta-secondary {
  background: transparent;
  color: var(--ink) !important;
  border-color: var(--border);
}
.paywall-cta-secondary:hover { background: #F1EFE8; }

/* --- Payment moment (billing/checkout_success.html + checkout_cancelled.html)
   `.moment-shell` / `.moment-icon` / `.moment-h1` are additive aliases (T-062)
   reused by other short "here's what just happened" confirmation screens
   (chase/disconnected.html, authn/check_email.html) that aren't about money
   but want the exact same visual grammar — same direction, no second
   language, per D-020. The original .payment-moment* selectors are
   untouched, just extended to also match the alias class. */

.payment-moment, .moment-shell {
  max-width: 480px;
  margin: 1.5rem auto 0;
  text-align: center;
  padding: 1.5rem;
}

.payment-moment-icon, .moment-icon {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.75rem;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 auto 1rem;
}

.payment-moment-h1, .moment-h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

/* =========================================================================
   T-062/D-020 — Tier 2 design pass (settings, leave-Chase, auth, home)
   ---------------------------------------------------------------------
   Same tokens/direction as Tier 1 above: no new colours, no new fonts, no
   heroes or motion. This block only adds hierarchy to five templates that
   were functionally complete but visually flat. Nothing here renames a
   frozen class; `.payment-moment*` above gained additive aliases instead
   of a second copy of the same rules.
   ========================================================================= */

/* --- Weighty consequence pages (cancel_confirm.html): real consequences
   (billing stops, data deleted in N days) read with calm weight — a wider,
   left-aligned shell (not the centered `.moment-shell` above) because a
   consequence list needs to stay scannable, not centered like a short
   one-line confirmation. Deliberately NOT using the .danger/.settlement-
   notice colour here: that hue means "an invoice needs attention"
   elsewhere in the app, and reusing it for an expected, calm action the
   owner chose would say the wrong thing. */
.weighty-shell { max-width: 620px; margin: 1.5rem auto 0; }
.weighty-shell h1 { font-size: 1.6rem; }
.weighty-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.consequence-list { list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.consequence-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.consequence-item:last-child { border-bottom: none; }
.consequence-item strong { color: var(--ink); }

/* --- Account settings (settings.html): five blocks, real hierarchy ------ */
.settings-header { margin: 1.5rem 0 0.25rem; }
.settings-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}
.settings-intro { margin-top: 0; }
.settings-block h2 { margin-top: 0; }
.settings-footnote { font-size: 0.85rem; margin-top: 0.4rem; }

.retention-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.5rem 0 0.25rem;
}
/* Class specificity beats the plain `label` element rule above, so a
   retention radio row doesn't inherit the stacked-block form-field look. */
.retention-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  font-size: 0.92rem;
  margin: 0;
}
.retention-custom-input { width: 4.5rem; display: inline-block; margin-left: 0.3rem; }

.billing-summary { margin: 0.75rem 0 0; }
.billing-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.billing-summary-row:last-child { border-bottom: none; }
.billing-summary-row dt { margin: 0; font-weight: 600; color: var(--ink-soft); font-size: 0.88rem; }
.billing-summary-row dd { margin: 0; text-align: right; }

.settings-leaving-link { font-weight: 600; color: var(--ink); }
.settings-leaving-link:hover { text-decoration: underline; }

/* --- Auth flow (login / check-email / signing-in) — simple, trustworthy,
   narrow. Often a new customer's first screen after the landing page, so
   it gets the LEAST visual noise anywhere in the authenticated app. */
.auth-shell { max-width: 440px; margin: 1.5rem auto 0; }
.auth-shell h1 { text-align: center; }
.auth-lede { text-align: center; margin: 0 0 1.25rem; }
.auth-card { text-align: left; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-back { text-align: center; margin-top: 1.25rem; }

/* --- Home, signed-in state: one business, one login (SPEC.md) means this
   is realistically a single welcome card, not a generic list UI. */
.welcome-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 0 0 0.25rem;
}
.welcome-business-name { margin: 0 0 0.35rem; }
.welcome-cta { margin-top: 1rem; }
.empty-state { text-align: center; padding: 1.5rem; }

/* =========================================================================
   Undo skip / Refresh now / status filter tabs (digest.html)
   ---------------------------------------------------------------------
   Same tokens as everything above: no new colours, no new fonts. Flash
   messages reuse the existing settlement-notice/success/accent hues rather
   than inventing a fourth semantic colour; filter tabs reuse the tier-badge
   pill shape (border-radius/padding) but in neutral ink tones, since
   --accent stays reserved for at-risk money and tier labels only.
   ========================================================================= */

.digest-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.digest-toolbar form { margin: 0; }
.refresh-wait-message { font-style: italic; }

.flash-message {
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  margin: 0.6rem 0;
  border: 1px solid var(--border);
}
.flash-message-success { background: #EEF4EF; color: var(--success); border-color: rgba(63, 107, 79, 0.25); }
.flash-message-warning { background: var(--accent-bg); color: var(--accent); border-color: rgba(184, 134, 46, 0.3); }
.flash-message-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(156, 74, 63, 0.25); }

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1.1rem;
}
.filter-tab {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card-bg);
  border: 1px solid var(--border);
  text-decoration: none;
}
.filter-tab:hover { background: #F1EFE8; }
.filter-tab-active,
.filter-tab-active:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.row-undo-btn { font-size: 0.85rem; }

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 600px) {
  body { padding: 0 0.9rem 2.5rem; font-size: 15px; }
  h1 { font-size: 1.5rem; }
  .card { padding: 1rem; }
  nav { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  button, input[type=submit] {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  .chase-copy-btn, .secondary { width: auto; } /* row action buttons stay inline, not full-width, so Copy/Skip/mark-paid don't stack awkwardly */

  /* Landing page: the hero side-by-side is the one place this page takes a
     real visual risk, and it must stack cleanly rather than squeeze two
     cards into ~340px each. */
  .hero-mockup { flex-direction: column; }
  .comparison-table th, .comparison-table td { font-size: 0.85rem; padding: 0.5rem 0.4rem; }
  .comparison-table td:first-child, .comparison-table th:first-child { width: auto; }

  .app-account-name { border-left: none; padding-left: 0; }
  .row-head { gap: 0.6rem; }
  .row-rank { width: 1.75rem; height: 1.75rem; font-size: 0.85rem; }
  .paywall-card { padding: 1.25rem 1rem; }

  /* T-062: narrow shells need less top margin on small screens, and a
     two-column billing summary row is cramped under ~360px. */
  .weighty-shell, .auth-shell { margin-top: 1rem; }
  .billing-summary-row { flex-direction: column; gap: 0.15rem; }
  .retention-options { gap: 0.5rem; }
}

/* Legal pages (privacy policy, terms of service) — long-form prose, reuses
   the same tokens/fonts as everywhere else, no new colours. */
.legal-doc {
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.6;
}
.legal-doc h1 { margin-bottom: 0.25rem; }
.legal-doc h2 { margin-top: 2rem; margin-bottom: 0.5rem; }
.legal-doc p, .legal-doc ul { margin-bottom: 1rem; }
.legal-doc ul { padding-left: 1.25rem; }
.legal-doc li { margin-bottom: 0.5rem; }