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

/* The HTML `hidden` attribute maps to `display: none` in the UA
   stylesheet — but any rule like `.foo { display: flex }` ties on
   specificity and wins via source order, silently breaking
   element.hidden = true. !important here pins the standard behavior
   so callers can rely on `hidden` actually hiding things, regardless
   of whatever display value the element's own class sets.
   (See e.g. demo-see-plans-cta on dashboard.html, which had been
   visible to every logged-in user — not just demo — because of
   exactly this collision.) */
[hidden] { display: none !important; }

html {
  scroll-padding-top: var(--header-h, 63px);
  /* Match the body background so iOS rubber-band overscroll at the top
     or bottom of the page reveals the theme-correct color instead of
     the default white. Without this, scrolling past the footer on a
     phone exposes a bright strip on an otherwise dark page. */
  background: var(--bg);
  /* Disable pull-to-refresh and scroll chaining on mobile. Without this,
     reaching the bottom of a page (e.g. /dashboard) and continuing the
     downward drag registers as Chrome-Android's pull-to-refresh gesture,
     which reloads the route and snaps scroll back to top — users can't
     rest their view at the bottom. `contain` keeps the native rubber-band
     bounce but stops both the refresh-on-overscroll and any chaining into
     a parent scroll container. Applied on both html + body because engines
     disagree about which is the scroll root. */
  overscroll-behavior-y: contain;
}

/* ── Global Custom Select ── */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 40px 12px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  min-height: 44px;
}

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

select:hover {
  border-color: var(--text-3);
}

select option {
  padding: 8px 14px;
  font-size: 0.88rem;
  background: var(--surface);
  color: var(--text);
}

/* ── Global Custom Input ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="month"],
input[type="tel"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="month"]:focus,
input[type="tel"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* Remove number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

button, a.btn-primary, a.nav-cta, .plan-cta, .auth-btn, .btn-manage {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

button:focus, button:focus-visible,
a:focus, a:focus-visible {
  outline: none !important;
  box-shadow: none;
}

:root {
  /* ── Light theme (default) ── */
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #ffffff;           /* raised cards — same as surface in light, distinct in dark */
  --surface-alt: #f8fafc;         /* alternating strips, info panels */
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #9ca3af;
  /* Brand palette — original Tailwind green-500 (#22c55e).
     --brand-rgb is the space-separated form so rgb(var(--brand-rgb) / α)
     can produce alpha tints without re-declaring the color. Swap --accent
     here to evolve the whole brand in one place. */
  --brand-rgb: 34 197 94;
  --accent: #22c55e;
  --accent-hover: #16a34a;
  --accent-light: #dcfce7;
  --accent-tag: #15803d;
  --accent-soft: #f0fdf4;         /* accent-tinted surface (Stripe-style) */
  --accent-glow: rgba(34, 197, 94, 0.25);
  /* --accent-text kept as an alias of --accent for now so any rule still
     referencing it renders correctly. Keeps the hook available if we want
     to split brand and text-green again later. */
  --accent-text: var(--accent);
  --danger: #ef4444;
  --danger-light: #fee2e2;
  /* Caution / warning palette anchored on #FFCF00.
     --warning-text is a darkened variant so body-copy disclaimers clear
     WCAG AA on white; --warning-light is a subtle surface tint for
     callouts. Note: Maximizer's "premium gold" styling intentionally
     lives on its own amber values elsewhere — it's not a caution. */
  --warning-rgb: 255 207 0;
  --warning: #FFCF00;
  --warning-light: #FFF9D6;
  --warning-text: #6B5600;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --overlay: rgba(0, 0, 0, 0.4);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-w: 1120px;
  --radius: 14px;
  --radius-sm: 10px;

  color-scheme: light;
}

/* ── Dark theme ── */
/* Palette anchored on the navy used in the ActiveCred logo card-art.
   The credit-card illustration inverts to white-on-dark in dark mode
   (see .cc-card overrides later). Fonts shift to a white/green split
   where it makes sense. */
:root[data-theme="dark"] {
  --bg: #1e293b;                  /* navy = the logo's card color */
  --surface: #0f172a;             /* slightly darker for cards so they read as raised */
  --surface-2: #1e293b;
  --surface-alt: #172033;         /* info strips */
  --text: #f1f5f9;                /* off-white — easier on eyes than pure white */
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --accent: #22c55e;              /* green stays — it's the brand */
  --accent-hover: #4ade80;
  --accent-light: rgba(34, 197, 94, 0.18);
  --accent-tag: #86efac;
  --accent-soft: rgba(34, 197, 94, 0.1);
  --accent-glow: rgba(34, 197, 94, 0.35);
  --accent-text: var(--accent);
  --danger: #f87171;
  --danger-light: rgba(239, 68, 68, 0.15);
  --warning: #FFCF00;
  --warning-light: rgba(255, 207, 0, 0.15);
  --warning-text: #FFE04D;
  --border: #334155;
  --border-light: #1e293b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

/* scroll-behavior: smooth removed — handled via JS to prevent race conditions */

/* ── A11y utilities ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Mirror the html rule — Blink treats <body> as the scroll root,
     WebKit treats <html> as the scroll root, so we need both to reliably
     kill pull-to-refresh across Chrome Android and Safari iOS. */
  overscroll-behavior-y: contain;
}

/* ── Header ── */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(249, 250, 251, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.logo-mark { width: 32px; height: 32px; }

.logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* "Cred" in the ActiveCred wordmark — uses --accent-text so it's legible
   on white surfaces. --accent itself is too bright as body copy. */
.logo-accent { color: var(--accent-text); }

/* ── Nav Tabs ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-tab {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.nav-tab:hover {
  color: var(--text);
  background: var(--border-light);
}

.nav-tab.active {
  color: var(--text);
  font-weight: 600;
  background: var(--border-light);
}

.nav-cta {
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  padding: 10px 20px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-cta:hover { background: var(--accent-hover); }

.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-login {
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.nav-login:hover {
  background: var(--border-light);
}

/* Authenticated nav links — clean text style like Linear/Vercel */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-auth-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-3);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-auth-link:hover {
  color: var(--text);
  background: var(--border-light);
}

.nav-auth-link.active {
  color: var(--text);
  font-weight: 600;
}

.nav-auth-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-tab.disabled {
  color: var(--text-3);
  cursor: default;
  pointer-events: none;
}

.nav-cta-disabled {
  background: var(--border);
  color: var(--text-3);
  cursor: default;
  pointer-events: none;
}

.btn-primary.btn-disabled {
  background: var(--border);
  color: var(--text-3);
  cursor: default;
  pointer-events: none;
}

/* ── Hero ── */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 100svh;
}

.hero-copy {
  max-width: 500px;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 32px;
  color: var(--text);
}

.text-accent { color: var(--accent-text); }

.hero-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 24px;
}

.hero-sub-lead {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: 10px;
}

.hero-amount {
  font-weight: 800;
  color: var(--text);
}

.hero-descriptor {
  font-family: monospace;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--text-2);
  background: var(--border-light);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.hero-explainer {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-3);
  margin-top: 28px;
}

.hero-hit {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.hero-hit:last-of-type {
  margin-bottom: 28px;
}

.inline-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-light);
  color: var(--accent-tag);
  font-weight: 600;
  padding: 2px 8px 2px 6px;
  border-radius: 100px;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  vertical-align: baseline;
  margin: 0 1px;
}

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 8px;
}

.btn-primary:focus,
.btn-primary:focus-visible {
  outline: none !important;
  box-shadow: none;
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.97); box-shadow: none; }

/* ── Status Dot ── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--accent-glow);
  animation: pulse 3s ease-in-out infinite;
}

.dot-off {
  background: var(--danger);
}

.dot-off::after {
  background: rgba(239, 68, 68, 0.15);
  animation: none;
}

/* Slack "away" grey pill */
.inline-status-away {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e5e7eb;
  color: #9ca3af;
  font-weight: inherit;
  padding: 2px 12px 2px 10px;
  border-radius: 100px;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  vertical-align: baseline;
}

.dot-away {
  background: #9ca3af;
}

.dot-away::after {
  animation: none;
  opacity: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.8); opacity: 0; }
}

/* ── Calculator Widget ── */
.hero-calc {
  display: flex;
  align-items: flex-start;
  padding-top: 12px;
}

.calc-widget {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.03);
}

.calc-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calc-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

/* ── Tier Selector ── */
.tier-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.tier-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}

.tier-btn:hover {
  border-color: var(--accent);
}

.tier-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
}

.tier-cards {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.tier-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tier-btn.active .tier-cards { color: var(--accent-tag); }
.tier-btn.active .tier-label { color: var(--accent-tag); }

/* ── Result ── */
.calc-tier-name {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  margin-bottom: 6px;
}

.calc-price-hero {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
}

.calc-dollar {
  font-size: 1.3rem;
  font-weight: 700;
  position: relative;
  top: -0.55em;
}

.calc-amount {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.calc-period {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 3px;
}

.calc-covers {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 14px;
  line-height: 1.5;
}

.calc-covers strong {
  color: var(--text);
}

.text-accent {
  color: var(--accent-text);
}

/* ── Billing Toggle ── */
.billing-toggle {
  display: flex;
  gap: 8px;
}

.billing-btn {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.billing-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.billing-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-tag);
  font-weight: 600;
}

.billing-btn.active .discount-badge {
  background: var(--accent);
  color: #fff;
}

.discount-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-light);
  color: var(--accent-tag);
  letter-spacing: 0.01em;
}

/* ── Micro-charge note ── */
.calc-micro {
  font-size: 0.8rem;
  color: var(--text-3);
  text-align: center;
}

/* ── Pricing Section ── */
.pricing-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  align-items: center;

}

.pricing-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 28px;
  width: 100%;
  text-align: center;
}

.pricing-section h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.pricing-subtitle {
  color: var(--text-2);
  font-size: 0.95rem;
  margin-bottom: 28px;
}

/* ── Billing Switch ── */
.billing-switch {
  display: inline-flex;
  gap: 4px;
  background: var(--border-light);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 36px;
}

.billing-opt {
  padding: 8px 20px;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.billing-opt.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Plan Grid ── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.plan-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.plan-card:hover {
  border-color: var(--text-3);
}

.plan-card.popular {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(34, 197, 94, 0.08);
}

.plan-card.selected:not(.popular) {
  border-color: var(--text);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.plan-card.popular.selected {
  box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(34, 197, 94, 0.15);
}

/* Tier progression — Starter + Builder lean into cool slate / soft
   green tints so they pick up the same hover + selected highlight
   treatment Scaler and Maximizer already had. Previously both sat
   flat with a gray border and the carousel's dimmed state made them
   look unresponsive to tap. */
.plan-card.plan-tier-1:not(.popular) {
  /* Starter — cool slate; entry-level */
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
}
.plan-card.plan-tier-1:not(.popular):hover,
.plan-card.plan-tier-1:not(.popular).selected {
  border-color: #64748b;
  box-shadow: 0 0 0 1px #94a3b8, 0 8px 30px rgba(100, 116, 139, 0.12);
}
.plan-card.plan-tier-2:not(.popular) {
  /* Builder — faint green tint leading toward Optimizer */
  background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
  border-color: #bbf7d0;
}
.plan-card.plan-tier-2:not(.popular):hover,
.plan-card.plan-tier-2:not(.popular).selected {
  border-color: #4ade80;
  box-shadow: 0 0 0 1px #86efac, 0 8px 30px rgba(34, 197, 94, 0.10);
}
/* Optimizer (.popular) keeps existing treatment */
.plan-card.plan-tier-4:not(.popular) {
  /* Scaler — richer green accent with gradient */
  background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
  border-color: #86efac;
}
.plan-card.plan-tier-4:not(.popular):hover,
.plan-card.plan-tier-4:not(.popular).selected {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px #4ade80, 0 8px 30px rgba(34, 197, 94, 0.15);
}
.plan-card.plan-tier-5:not(.popular) {
  /* Maximizer — premium amber */
  background: linear-gradient(180deg, #fffbeb 0%, #fff 60%);
  border-color: #fcd34d;
  box-shadow: 0 0 0 1px #fcd34d, 0 8px 30px rgba(245, 158, 11, 0.08);
}
.plan-card.plan-tier-5:not(.popular):hover,
.plan-card.plan-tier-5:not(.popular).selected {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px #f59e0b, 0 10px 40px rgba(245, 158, 11, 0.18);
}
.plan-card.plan-tier-5 .plan-name {
  color: #b45309;
}

.plan-premium-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 12px 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}

/* The base .plan-cta rules below (at line ~993) come later in the cascade
   and were previously resetting background/border on Maximizer, leaving
   the button gray-bordered instead of gold. Doubling up the class
   selector (.plan-cta.plan-cta-premium) bumps specificity above the
   base so the gradient + borderless shape stick in every state. */
.plan-cta.plan-cta-premium {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25);
}
.plan-cta.plan-cta-premium:hover {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.plan-popular-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.plan-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 12px;
}

.plan-card.popular .plan-name {
  color: var(--accent-tag);
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 6px;
}

.plan-dollar {
  font-size: 1.1rem;
  font-weight: 700;
  position: relative;
  top: -0.5em;
}

.plan-amount {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-period {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 2px;
}

.plan-desc {
  font-size: 0.85rem;
  color: var(--text-3);
  margin-bottom: 20px;
}

.plan-cta {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.plan-cta:hover {
  border-color: var(--accent);
  color: var(--accent-tag);
}

.plan-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.plan-cta-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.plan-cta-current {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
  cursor: default;
}

.plan-current {
  border-color: #22c55e;
  background: #fafffe;
}

.plan-cta:disabled {
  opacity: 0.6;
  cursor: wait;
}

.plan-micro {
  font-size: 0.8rem;
  color: var(--text-3);
}

/* ── Pricing Page ── */
.pricing-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pricing-header {
  text-align: center;
  max-width: 540px;
  margin-bottom: 36px;
}

.pricing-header h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.pricing-header p {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.6;
}

.pricing-widget {
  width: 100%;
  max-width: 520px;
}

/* ── Pulse reach (static FICO infographic) ──
   Moved off the dashboard because the content was static educational
   material with no user-specific data — it belongs on the marketing
   side. Layout: an inset card with a stacked bar of FICO factors, a
   tiny legend, and a single-line caveat note. */
.pulse-reach-section {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 72px 28px;
}
.pulse-reach-inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
.pulse-reach-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  margin-bottom: 10px;
}
.pulse-reach-section h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.2;
}
.pulse-reach-intro {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 32px;
}
.pulse-reach-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.pulse-reach-bar {
  display: flex;
  /* 2px gap + surface-colored bar background renders a thin theme-aware
     divider between every segment. Without it, adjacent same-impact
     segments (e.g. Payment History + Utilization + Credit Age all on
     strong brand green) merge into one block and the 35/30/15/10/10
     split is visually lost. */
  gap: 2px;
  width: 100%;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--surface);
}
.pulse-reach-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 6px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
}
.pulse-reach-seg > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse-reach-pct {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
/* 5-tier gradient keyed to effective Pulse impact (FICO weight ×
   how directly Pulse defends the factor). Darker = larger share
   of the total 90% reach, so 35%, 30%, 15% read as distinct
   even though Pulse helps each the same way. */
.pulse-reach-seg-t1 { background: #14532d; color: #fff; }      /* emerald-900 — largest direct share */
.pulse-reach-seg-t2 { background: #15803d; color: #fff; }      /* emerald-700 */
.pulse-reach-seg-t3 { background: #22c55e; color: #fff; }      /* green-500, brand */
.pulse-reach-seg-t4 { background: #bbf7d0; color: #14532d; }   /* green-200 — partial */
.pulse-reach-seg-t5 { background: #e2e8f0; color: #475569; }   /* slate-200 — unaffected */
:root[data-theme="dark"] .pulse-reach-seg-t5 { background: #334155; color: #94a3b8; }

.pulse-reach-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 16px;
}
.pulse-reach-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pulse-reach-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
/* Legend dots show three reference points along the 5-tier bar
   gradient: darkest green (largest direct share), lightest green
   (partial effect), gray (unaffected). */
.pulse-reach-legend-direct     { background: #14532d; }
.pulse-reach-legend-partial    { background: #bbf7d0; }
.pulse-reach-legend-unaffected { background: #e2e8f0; }
:root[data-theme="dark"] .pulse-reach-legend-unaffected { background: #475569; }

.pulse-reach-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .pulse-reach-section { padding: 56px 20px; }
  .pulse-reach-section h2 { font-size: 1.4rem; }
  .pulse-reach-bar { height: auto; flex-direction: column; }
  .pulse-reach-seg { padding: 10px 14px; justify-content: space-between; flex-direction: row; text-align: left; }
  .pulse-reach-seg > span { display: flex; align-items: baseline; gap: 10px; white-space: normal; width: 100%; justify-content: space-between; }
  .pulse-reach-pct { margin-top: 0; }
}

/* ── Why Section ── */
.why-section {

  border-top: 1px solid var(--border);
  background: var(--bg);
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.why-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 28px;
  width: 100%;
}

.why-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  text-align: center;
}

.why-intro {
  text-align: center;
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.why-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  margin-bottom: 16px;
}

.why-icon svg { width: 20px; height: 20px; }

.why-icon-accent {
  background: var(--accent-light);
  color: var(--accent-tag);
}

.why-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.why-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Strategy Section ── */
.strategy-section {

  border-top: 1px solid var(--border);
  background: var(--surface);
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.strategy-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 28px;
  width: 100%;
}

.strategy-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  text-align: center;
}

.strategy-intro {
  text-align: center;
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.strategy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.strategy-card {
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.strategy-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.strategy-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.strategy-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── How Section ── */
.how-section {

  background: var(--surface);
  border-top: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.how-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.how-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-2);
}

.step-icon svg { width: 20px; height: 20px; }

.step-icon-accent {
  background: var(--accent-light);
  color: var(--accent-tag);
}

.step-text h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.step-text p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* ── Card Stack Visual ── */
.how-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-stack {
  position: relative;
  width: 390px;
  height: 360px;
  /* The stack is a tap-fidget target, not readable content — disable
     text selection so rapid taps don't start highlighting "Active"/etc.
     tap-highlight-color kills the iOS Safari blue flash on tap too. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cc-card {
  position: absolute;
  width: 340px;
  height: 200px;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-1 {
  background: linear-gradient(135deg, #1e293b, #334155);
  top: 0; left: 26px; z-index: 3;
  transform: rotate(-3deg);
}

.cc-2 {
  background: linear-gradient(135deg, #1e3a5f, #475569);
  top: 46px; left: 52px; z-index: 2;
  transform: rotate(2deg);
}

.cc-3 {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  top: 92px; left: 13px; z-index: 1;
  transform: rotate(-1deg);
}

.cc-stripe {
  height: 20px;
  margin: -18px -18px 0;
  border-radius: 12px 12px 0 0;
  background: rgba(255,255,255,0.06);
}

.cc-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  justify-content: flex-end;
  /* Extra breathing room between the bottom decorative line and the
     Active / Inactive status pill beneath it, so the pill doesn't read
     as butted against the card details. */
  padding-bottom: 12px;
}

.cc-line {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  width: 65%;
}

.cc-line.short { width: 35%; }

.cc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  align-self: flex-start;
}

/* Light mode (card face = dark navy): light text on darker tinted pill */
.cc-status.active { color: #86efac; background: rgba(34, 197, 94, 0.18); }
.cc-status.off    { color: #fca5a5; background: rgba(239, 68, 68, 0.18); }

.cc-inactive { opacity: 0.65; }

/* No hover-driven movement on the card stack — all motion comes from
   taps/clicks via the JS fidget in index.html. The earlier hover
   transform was being ignored after the first tap anyway (the JS
   inline-zeros the transition) and on desktop it just read as
   unprompted jitter. Keeping the cards still until the user actually
   interacts is calmer and matches touch behavior. */

/* ── Legal Pages ── */
.legal-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 100px 28px 80px;
}

.legal-page h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.legal-updated {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-bottom: 40px;
}

.legal-page section {
  margin-bottom: 32px;
}

.legal-page h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.legal-page h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 18px 0 8px;
  color: var(--text);
}

.legal-page p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 10px;
}

.legal-page ul {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

.legal-page li {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
  padding: 4px 0 4px 18px;
  position: relative;
}

.legal-page li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}

.legal-page a {
  color: var(--accent-tag);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page a:hover {
  color: var(--accent-text);
}

/* ── Cookie Table ── */
.cookie-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 12px 0 20px;
  font-size: 0.8rem;
}

.cookie-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 0.8fr;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-2);
}

.cookie-row:last-child { border-bottom: none; }

.cookie-header {
  background: var(--border-light);
  font-weight: 600;
  color: var(--text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Scroll Reveal Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Bottom CTA ── */
.bottom-cta {
  background: #111827;
  padding: 72px 28px;
}

.bottom-cta-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.bottom-cta-inner h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  color: #fff;
}

.bottom-cta-inner p {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 28px;
}

.bottom-cta-inner .btn-primary {
  padding: 14px 48px;
  font-size: 0.95rem;
  display: inline-block;
}

@media (max-width: 560px) {

  .cookie-table .cookie-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Auth Pages ── */
.auth-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 28px 40px;
}

.auth-card {
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.auth-sub {
  font-size: 0.92rem;
  color: var(--text-2);
  margin-bottom: 28px;
  line-height: 1.5;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form input {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s;
}

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

.auth-success {
  padding: 20px 0;
}

.auth-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--accent);
}

.auth-success-icon svg { width: 48px; height: 48px; }

.auth-success h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-success p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
}

.auth-error {
  background: var(--danger-light);
  color: #b91c1c;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

.auth-note {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: 16px;
}

.success-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
}

.success-check svg { width: 56px; height: 56px; }

/* ── Dashboard ── */
.dash-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 28px 60px;
}

.dash-loading {
  text-align: center;
  padding: 120px 0;
  color: var(--text-3);
  font-size: 0.95rem;
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 16px;
}

.dash-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.dash-subtitle {
  font-size: 0.82rem;
  color: var(--text-2);
  margin-bottom: 10px;
  max-width: 540px;
}

.dash-plan {
  font-size: 0.88rem;
  color: var(--text-2);
}

.dash-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-outline {
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.btn-outline:focus,
.btn-outline:focus-visible {
  outline: none !important;
  box-shadow: none;
}

.btn-outline:hover {
  border-color: var(--text-3);
  background: var(--bg);
}

/* ── Card Usage Bar ── */
.card-usage {
  margin-bottom: 24px;
}

.card-usage-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-2);
  margin-bottom: 8px;
  font-weight: 500;
}

.card-usage-upgrade a {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
}

.card-usage-upgrade a:hover {
  text-decoration: underline;
}

.card-usage-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.card-usage-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 0;
}

.card-usage-fill.usage-warn {
  background: var(--warning);
}

.card-usage-fill.usage-full {
  background: var(--danger);
}

/* ── Card List ── */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
  min-height: 110px;
}

.dash-card:hover {
  border-color: var(--text-3);
}

/* Top row: card info + status badge */
.dash-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}

.dash-card-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.dash-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}

.dash-card-icon svg { width: 20px; height: 20px; }

.dash-card-name {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.dash-card-nickname {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}

.dash-card-nickname:hover {
  border-bottom-color: var(--text-3);
}

.dash-nick-input {
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
  width: 200px;
  box-shadow: 0 0 0 3px rgba(34, 197, 94,0.1);
}

.dash-card-number {
  font-size: 0.75rem;
  color: var(--text-3);
}

.dash-card-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-active {
  color: #15803d;
  background: #f0fdf4;
}

/* Bottom row: fields + remove */
.dash-card-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px 16px;
  padding-left: 74px; /* align with text (icon 40px + gap 14px + padding 20px) */
}

.dash-card-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-card-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-card-field-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
}

.dash-card-select {
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}

.dash-card-select:focus {
  border-color: var(--accent);
}

.dash-card-remove {
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
}

.dash-card-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Empty State ── */
.dash-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
}

.dash-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--text-3);
}

.dash-empty-icon svg { width: 48px; height: 48px; }

.dash-empty h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.dash-empty p {
  font-size: 0.88rem;
  color: var(--text-2);
  margin-bottom: 20px;
}

/* ── Modal ── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.modal-content {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.modal-content h2 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.modal-sub {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 24px;
  line-height: 1.5;
}

.stripe-element {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}

.stripe-element.StripeElement--focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.charge-day-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 20px;
}

.label-optional {
  font-weight: 400;
  color: var(--text-3);
}

.settings-input {
  display: block;
  margin-top: 6px;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  outline: none;
  box-sizing: border-box;
}

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

.charge-day-label select {
  display: block;
  margin-top: 6px;
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Activity Select (inherits from global select) ── */
.activity-select {
  padding: 8px 32px 8px 12px;
}

/* ── Nav Tab Active ── */
.nav-tab-active {
  color: var(--accent-text) !important;
  font-weight: 600;
}

/* ── Settings Page ── */
.settings-section {
  margin-bottom: 32px;
}

.settings-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Plan overview card */
.settings-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.settings-plan-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-plan-name {
  font-size: 1rem;
  font-weight: 700;
}

.settings-plan-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 3px 10px;
  border-radius: 20px;
}

.settings-plan-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: none;
}

.settings-plan-stat {
  padding: 20px 24px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.settings-plan-stat:last-child {
  border-right: none;
}

.settings-plan-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.settings-plan-stat-label {
  font-size: 0.75rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Settings rows */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-label {
  font-size: 0.85rem;
  color: var(--text-2);
}

.settings-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.settings-value a {
  color: var(--accent-text);
  text-decoration: none;
}

.settings-value a:hover {
  text-decoration: underline;
}

/* ── Responsive Dashboard ── */
@media (max-width: 640px) {
  .dash-header {
    flex-direction: column;
  }

  .dash-actions {
    width: 100%;
  }

  .dash-actions .btn-outline,
  .dash-actions .btn-primary {
    flex: 1;
  }

  .dash-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .dash-card-bottom {
    padding-left: 20px;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left .logo-text {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}

.footer-left p {
  font-size: 0.75rem;
  color: var(--text-3);
}

.footer-right, .footer-links {
  display: flex;
  gap: 20px;
}

.footer-disclaimer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px 28px 40px;
  border-top: 1px solid #334155;
}

.footer-disclaimer p {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.6;
}

.footer-inner > span {
  font-size: 0.82rem;
  color: var(--text-2);
}

.footer-right a, .footer-links a {
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-right a:hover, .footer-links a:hover { color: var(--text); }

/* ── Responsive ── */
/* ── Hamburger Menu ── */
.nav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.nav-hamburger:hover { color: var(--text); background: var(--border-light); }

/* Full-page mobile menu (Wise-style takeover). The overlay covers the
   whole viewport with the current theme's page background, so it reads
   as a dedicated navigation surface rather than a drawer floating over
   the underlying page. Fade + slide-up entrance on .open. */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* Any scroll gesture inside the menu stays inside the menu — won't
     chain to the body underneath once we reach the top/bottom. Paired
     with the body:has() rule below for a complete scroll lock. */
  overscroll-behavior: contain;
}

/* Lock the page behind the full-page menu. The :has() parent selector
   is supported in Chrome 105+ / Safari 15.4+ / Firefox 121+; in older
   browsers the lock gracefully degrades to the prior behavior (page
   could scroll behind the invisible overlay). overscroll-behavior on
   .mobile-menu itself prevents scroll-chaining on those older engines
   as a secondary safety net. */
body:has(.mobile-menu.open) {
  overflow: hidden;
}

.mobile-menu.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  box-shadow: none;
  padding: max(16px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Close button sits as an absolute control in the top-right so the
   nav list underneath isn't pushed down by an align-self: flex-end. */
.mobile-menu-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: 12px;
  width: 44px; height: 44px;
  border: none; background: transparent; color: var(--text);
  border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 0.15s;
}

.mobile-menu-close:hover,
.mobile-menu-close:active { background: var(--border-light); }

/* Spacer so the first link doesn't render under the close X. */
.mobile-menu-panel::before {
  content: '';
  display: block;
  height: 32px;
  flex-shrink: 0;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: color 0.15s;
}

.mobile-menu-link:hover,
.mobile-menu-link:active { color: var(--accent); }

/* Chevron — pure-CSS right-pointing arrow tip. Uses currentColor so
   it shifts with the link color on hover without an inline SVG. */
.mobile-menu-link::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.4;
  flex-shrink: 0;
  margin-right: 6px;
  transition: opacity 0.15s, transform 0.15s;
}

.mobile-menu-link:hover::after,
.mobile-menu-link:active::after {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger { display: flex; flex-shrink: 0; }
  .nav-login { display: none; }
  .nav-cta-group { margin-left: auto; gap: 10px; }
  /* Authenticated/demo nav (Pulse [+ Settings + Log Out] icon group)
     also pushes to the right so it sits next to the burger instead of
     getting marooned in the center by <nav>'s justify-content:
     space-between distribution. */
  .nav-auth { margin-left: auto; }

  /* Authenticated nav: icon-only on mobile */
  .nav-auth-link {
    padding: 8px;
    gap: 0;
    font-size: 0;
  }
  .nav-auth-link svg {
    width: 18px;
    height: 18px;
  }

  .how-section,
  .why-section,
  .strategy-section,
  .pricing-section {
    min-height: 100svh;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 64px;
    min-height: 100svh;
    padding-bottom: 16px;
    justify-content: center;
  }

  .hero-visual { order: -1; padding: 8px 0 12px; }
  .hero-visual .card-stack { width: 230px; height: 200px; }
  .hero-visual .cc-card { width: 208px; height: 125px; font-size: 0.82em; }

  .pricing-inner { padding: 40px 20px; }

  .hero-copy {
    padding-top: 0;
    max-width: 100%;
    text-align: center;
  }

  .hero h1 + .hero-sub { margin-top: 20px; }
  .hero-sub { margin-bottom: 20px; }
  .hero-sub-lead { margin-bottom: 8px; }

  .tier-selector {
    grid-template-columns: repeat(3, 1fr);
  }

  .plan-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 16px 4px 20px;
    margin: 0 -20px;
    padding-left: calc(50vw - 130px);
    padding-right: calc(50vw - 130px);
    scrollbar-width: none;
  }

  .plan-grid::-webkit-scrollbar { display: none; }

  .plan-grid .plan-card {
    flex: 0 0 260px;
    scroll-snap-align: center;
    transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.2s, box-shadow 0.2s;
  }

  .plan-grid .plan-card.selected {
    transform: scale(1.03);
  }

  .plan-grid .plan-card.dimmed {
    opacity: 0.55;
    transform: scale(0.96);
  }

  /* Mobile carousel overrides: lock every tier's accent through the
     dimmed + selected states on the horizontal swipe. Without these,
     base rules could drop Starter/Builder/Scaler/Maximizer back to a
     flat gray while the user swipes through them. */
  .plan-grid .plan-card.plan-tier-1:not(.popular),
  .plan-grid .plan-card.plan-tier-1:not(.popular).dimmed {
    border-color: #cbd5e1;
  }
  .plan-grid .plan-card.plan-tier-1:not(.popular).selected {
    border-color: #64748b;
    box-shadow: 0 0 0 1px #94a3b8, 0 8px 30px rgba(100, 116, 139, 0.12);
  }
  .plan-grid .plan-card.plan-tier-2:not(.popular),
  .plan-grid .plan-card.plan-tier-2:not(.popular).dimmed {
    border-color: #bbf7d0;
  }
  .plan-grid .plan-card.plan-tier-2:not(.popular).selected {
    border-color: #4ade80;
    box-shadow: 0 0 0 1px #86efac, 0 8px 30px rgba(34, 197, 94, 0.10);
  }
  .plan-grid .plan-card.plan-tier-4:not(.popular),
  .plan-grid .plan-card.plan-tier-4:not(.popular).dimmed {
    border-color: #86efac;
  }
  .plan-grid .plan-card.plan-tier-4:not(.popular).selected {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px #4ade80, 0 8px 30px rgba(34, 197, 94, 0.15);
  }
  .plan-grid .plan-card.plan-tier-5:not(.popular),
  .plan-grid .plan-card.plan-tier-5:not(.popular).dimmed {
    border-color: #fcd34d;
    box-shadow: 0 0 0 1px #fcd34d, 0 8px 30px rgba(245, 158, 11, 0.08);
  }
  .plan-grid .plan-card.plan-tier-5:not(.popular).selected {
    border-color: #f59e0b;
    box-shadow: 0 0 0 1px #f59e0b, 0 10px 40px rgba(245, 158, 11, 0.18);
  }

  .why-grid,
  .strategy-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .how-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .how-visual { order: -1; }

  .card-stack { width: 220px; height: 190px; }
  .cc-card { width: 195px; height: 117px; font-size: 0.8em; }

  .pricing-page { min-height: auto; padding-top: 80px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 1.85rem; margin-bottom: 6px; }
  .btn-primary { width: 100%; text-align: center; margin-top: 4px; }
  .hero-sub { font-size: 0.88rem; margin-bottom: 12px; }
  .hero-descriptor { display: block; width: fit-content; margin: 6px auto 0; }

  .calc-widget { padding: 22px 16px; }
  .calc-amount { font-size: 2.4rem; }

  .tier-selector {
    grid-template-columns: repeat(3, 1fr);
  }

  .plan-grid {
    padding-left: calc(50vw - 120px);
    padding-right: calc(50vw - 120px);
  }

  .plan-grid .plan-card {
    flex: 0 0 240px;
  }

  .billing-toggle {
    flex-direction: column;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Theme toggle (injected by theme-init.js into nav + burger)
   ═══════════════════════════════════════════════════════════════════ */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
  margin-right: 4px;
}
.theme-btn:hover { color: var(--text); border-color: var(--text-3); background: var(--border-light); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.theme-btn-icon-dark { display: none; }
:root[data-theme="dark"] .theme-btn-icon-light { display: none; }
:root[data-theme="dark"] .theme-btn-icon-dark { display: inline-flex; }

/* Sits below the main nav links at the bottom of the burger panel.
   Flows naturally rather than using margin-top: auto, which pushed the
   row off-screen on shorter phones where the menu + button exceeded
   panel height. The panel is now scrollable, but in practice the row
   is compact enough to sit right after the last link without clipping. */
.theme-btn-mobile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* margin-top: auto pushes the toggle to the bottom of the flex
     column, so it sits as a persistent control below the nav list
     regardless of how tall the link stack is. */
  margin-top: auto;
  padding: 16px 4px 4px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-light);
  width: auto;
  align-self: stretch;
  justify-content: space-between;
  flex-shrink: 0;
  text-align: left;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color 0.15s;
  white-space: nowrap;
}
.theme-btn-mobile:hover,
.theme-btn-mobile:active { color: var(--text-2); }
.theme-btn-mobile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
}

/* When the burger menu is open, pin the theme toggle to the bottom-right
   as a compact pill — mirrors the cookie-preferences link (.cc-footer-link)
   that lives at bottom-left, so both controls stay visible simultaneously
   without scrolling the nav column. z-index matches .cc-footer-link (9998)
   so they share the same stacking tier above the menu background. */
.mobile-menu.open .theme-btn-mobile {
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  right: max(16px, env(safe-area-inset-right));
  z-index: 9998;
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-self: auto;
  font-size: 0.7rem;
  color: var(--text-3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  gap: 6px;
}
.mobile-menu.open .theme-btn-mobile-icon,
.mobile-menu.open .theme-btn-mobile-icon svg {
  width: 12px;
  height: 12px;
}

/* Mobile: desktop nav button is redundant with the burger row.
   !important wins against .nav-cta-group's flex layout that would
   otherwise still lay the button out. */
@media (max-width: 768px) {
  .theme-btn { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile: prevent auto-zoom on input focus
   ═══════════════════════════════════════════════════════════════════
   iOS Safari zooms into any form control with a computed font-size < 16px
   on focus. The user then has to pinch-out to recover. Forcing 16px on
   mobile keeps the page at 1x when tapping password/email/etc. fields.
   Applied with !important so it wins against any inline style="font-size:..."
   that individual components may declare. */
@media (max-width: 768px) {
  input,
  select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="month"],
  input[type="tel"],
  input[type="search"],
  input[type="url"] {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark theme overrides
   ═══════════════════════════════════════════════════════════════════
   Variables at :root[data-theme="dark"] handle the bulk of the work
   automatically for any rule using var(--bg), var(--surface), etc.
   The overrides below target components that set hardcoded colors
   directly (inline <style> blocks in dashboard.html / settings.html /
   landing page sections) and need explicit dark-mode versions. */

:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Header + nav */
:root[data-theme="dark"] header,
:root[data-theme="dark"] nav,
:root[data-theme="dark"] .nav-auth {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border-color: var(--border);
}
:root[data-theme="dark"] .nav-tab { color: var(--text-2); }
:root[data-theme="dark"] .nav-tab:hover { color: var(--text); }
:root[data-theme="dark"] .nav-tab.active {
  color: var(--text);
  background: var(--surface);
}
:root[data-theme="dark"] .nav-auth-link { color: var(--text-2); }
:root[data-theme="dark"] .nav-auth-link.active,
:root[data-theme="dark"] .nav-auth-link:hover { color: var(--accent); }
:root[data-theme="dark"] .logo-text { color: var(--text); }
:root[data-theme="dark"] .nav-login { color: var(--text); }
:root[data-theme="dark"] .nav-cta,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .demo-btn { color: #052e16; }

/* Cards and surfaces throughout the site */
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .fico-card,
:root[data-theme="dark"] .dc,
:root[data-theme="dark"] .s-card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .pulse-strip,
:root[data-theme="dark"] .demo-card,
:root[data-theme="dark"] .how-card,
:root[data-theme="dark"] .why-card,
:root[data-theme="dark"] .strategy-card,
:root[data-theme="dark"] .auth-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* .checkout-card is a transparent 540px column wrapper — it has no
   border, no padding, no radius. Painting it with --surface (#0f172a)
   in dark mode drew a rectangular darker "island" across the page
   with a visible sharp edge next to the step indicator; the Stripe
   iframe and statement-note inside carry their own surface treatment. */
:root[data-theme="dark"] .plan-card.popular {
  background: rgba(34, 197, 94, 0.06);
}
:root[data-theme="dark"] .plan-card.plan-tier-5:not(.popular),
:root[data-theme="dark"] .plan-grid .plan-card.plan-tier-5:not(.popular) {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, var(--surface) 60%);
}
:root[data-theme="dark"] .plan-card.plan-tier-4:not(.popular),
:root[data-theme="dark"] .plan-grid .plan-card.plan-tier-4:not(.popular) {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, var(--surface) 100%);
}

/* Text tokens in inline-styled contexts */
:root[data-theme="dark"] .dash-subtitle,
:root[data-theme="dark"] .hero-sub,
:root[data-theme="dark"] .hero-sub-lead,
:root[data-theme="dark"] .fico-card-sub,
:root[data-theme="dark"] .s-row-label,
:root[data-theme="dark"] .charge-card,
:root[data-theme="dark"] .dc-meta { color: var(--text-2); }

:root[data-theme="dark"] .fico-card-label,
:root[data-theme="dark"] .dc-next,
:root[data-theme="dark"] .panel-hint { color: var(--text-3); }

:root[data-theme="dark"] .fico-card-value,
:root[data-theme="dark"] .dc-nickname,
:root[data-theme="dark"] .s-row-value,
:root[data-theme="dark"] .panel-title,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4 { color: var(--text); }

/* Divider lines between sections */
:root[data-theme="dark"] .s-row,
:root[data-theme="dark"] .settings-collapse,
:root[data-theme="dark"] .panel-footer,
:root[data-theme="dark"] .dc { border-color: var(--border); }

/* Info strips / section backgrounds */
:root[data-theme="dark"] .pulse-strip,
:root[data-theme="dark"] .fico-bar { background: var(--surface); }
:root[data-theme="dark"] .fico-bar-segment[style*="cbd5e1"] { background: #334155 !important; }

/* Form inputs inside inline-styled blocks */
:root[data-theme="dark"] .settings-input,
:root[data-theme="dark"] .sec-input,
:root[data-theme="dark"] .email-edit-input,
:root[data-theme="dark"] .panel-input,
:root[data-theme="dark"] .demo-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .settings-input::placeholder,
:root[data-theme="dark"] .sec-input::placeholder,
:root[data-theme="dark"] .email-edit-input::placeholder,
:root[data-theme="dark"] .panel-input::placeholder,
:root[data-theme="dark"] .demo-input::placeholder { color: var(--text-3); }

/* Settings row icon containers — the light green bg becomes a subtle
   translucent tint so icons still pop against the dark surface. */
:root[data-theme="dark"] .s-row-icon,
:root[data-theme="dark"] .settings-collapse-icon { background: rgba(34, 197, 94, 0.14); }
:root[data-theme="dark"] .s-row-icon-danger { background: rgba(239, 68, 68, 0.14); color: var(--danger); }

/* Settings badges */
:root[data-theme="dark"] .settings-collapse-badge { background: rgba(148, 163, 184, 0.12); color: var(--text-2); }
:root[data-theme="dark"] .settings-collapse-badge-active { background: rgba(34, 197, 94, 0.18); color: var(--accent-tag); }

/* Nav logo mark also inverts. The card face was #1e293b — identical
   to the dark-mode body background — which left the logo reading as
   a ghosted outline (stroke only) against the bg. Invert to match the
   hero card treatment so the logo reads as a white card on dark bg,
   visually consistent with the signature design. Uses attribute
   selectors to avoid touching the inline SVG in 30+ HTML files. */
:root[data-theme="dark"] .logo-mark rect[fill="#1e293b"] { fill: #f1f5f9; }
:root[data-theme="dark"] .logo-mark rect[stroke="#334155"] { stroke: #cbd5e1; }
:root[data-theme="dark"] .logo-mark rect[fill="#334155"] { fill: #cbd5e1; }
:root[data-theme="dark"] .logo-mark rect[fill="#475569"] { fill: #94a3b8; }
/* Green pulse dot stays green — that's the brand accent. */

/* Hero credit-card illustration inverts: the logo's dark navy card
   becomes a bright white card in dark mode, with green accents. This
   is the signature visual flip the user asked for. */
:root[data-theme="dark"] .cc-card {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] .cc-card .cc-logo,
:root[data-theme="dark"] .cc-card .cc-chip { color: #0f172a; }
:root[data-theme="dark"] .cc-card .cc-dot { background: var(--accent); }

/* The detail bars and top stripe use semi-transparent white by default
   (readable against the dark-navy card face in light mode). On the
   inverted white card face in dark mode, white-on-white disappears.
   Swap to solid light-grey tones that read clearly on the inverted
   card without looking harsh — same visual role, just calibrated for
   the flipped surface. The darker alpha values tried earlier (0.08,
   0.14) were too subtle to register. */
:root[data-theme="dark"] .cc-card .cc-stripe { background: #e2e8f0; }
:root[data-theme="dark"] .cc-card .cc-line { background: #cbd5e1; }

/* Dark mode inverts the card face to white — swap pill+text colors to
   darker shades for contrast. Same visual design principle (soft tinted
   pill around the status label), just different hues suited to the
   inverted surface. */
:root[data-theme="dark"] .cc-card .cc-status.active {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
}
:root[data-theme="dark"] .cc-card .cc-status.off {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.12);
}
:root[data-theme="dark"] .cc-card .cc-status.active .cc-dot { background: #16a34a; }
:root[data-theme="dark"] .cc-card .cc-status.off .cc-dot { background: #dc2626; }

/* Empty state + pending/paused indicators */
:root[data-theme="dark"] .dash-empty { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .card-paused-pill { background: rgb(var(--warning-rgb) / 0.22); color: var(--warning-text); }

/* Cookie banner (inline CSS injected by cookie-consent.js) overrides */
:root[data-theme="dark"] .cc-banner { background: var(--surface); border-top-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .cc-banner-text { color: var(--text-2); }
:root[data-theme="dark"] .cc-panel { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .cc-panel-header { border-bottom-color: var(--border); }
:root[data-theme="dark"] .cc-panel-header h2 { color: var(--text); }
:root[data-theme="dark"] .cc-btn-manage { background: var(--surface); color: var(--text-2); border-color: var(--border); }
:root[data-theme="dark"] .cc-btn-accept.cc-btn-essential { background: var(--surface); color: var(--text-2); border-color: var(--border); }
:root[data-theme="dark"] .cc-category-title { color: var(--text); }
:root[data-theme="dark"] .cc-category-desc { color: var(--text-2); }
:root[data-theme="dark"] .cc-toggle-label { color: var(--text-2); }
:root[data-theme="dark"] .cc-toggle-track { background: #334155; }
:root[data-theme="dark"] .cc-table th { color: var(--text-3); border-bottom-color: var(--border); }
:root[data-theme="dark"] .cc-table td { color: var(--text-2); border-bottom-color: var(--border-light); }
:root[data-theme="dark"] .cc-table td:first-child { color: var(--text); }
:root[data-theme="dark"] .cc-footer-link { background: var(--surface); border-color: var(--border); color: var(--text-3); }
:root[data-theme="dark"] .cc-panel-close { background: var(--border-light); color: var(--text-2); }

/* Footer */
:root[data-theme="dark"] footer { background: var(--surface); color: var(--text-2); }
:root[data-theme="dark"] .footer-disclaimer { border-top-color: var(--border); }
:root[data-theme="dark"] .footer-disclaimer p { color: var(--text-3); }

/* Buttons */
:root[data-theme="dark"] .sec-btn-outline { background: transparent; color: var(--text-2); border-color: var(--border); }
:root[data-theme="dark"] .sec-btn-outline:hover { border-color: var(--accent); color: var(--accent); background: rgba(34, 197, 94, 0.08); }
:root[data-theme="dark"] .panel-delete { color: var(--text-3); border-color: var(--border); }
:root[data-theme="dark"] .panel-delete:hover { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: var(--danger); }

/* Blog CTA tile — swap the light-surface palette for dark-surface, keep
   the green accent. Gradients on the tier chips already render fine on
   dark so they don't need overrides. */
:root[data-theme="dark"] .dash-blog-cta { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .dash-blog-cta:hover { background: rgba(34, 197, 94, 0.08); border-color: var(--accent); }
:root[data-theme="dark"] .dash-blog-cta-icon { background: var(--bg); border-color: var(--border); }
:root[data-theme="dark"] .dash-blog-cta-title { color: var(--text-1); }
:root[data-theme="dark"] .dash-blog-cta-desc { color: var(--text-2); }

/* Blog posts — every post inlines the same .article-* styles with
   hardcoded light-mode colors (#374151 body text, #111827 strong,
   #94a3b8 meta, #f8fafc CTA surface, #e2e8f0 CTA border). That made
   the body copy unreadable on the dark navy background. Remapping
   here via the shared tokens means a single override fixes all 17
   posts without editing each file. */
:root[data-theme="dark"] .article-body p,
:root[data-theme="dark"] .article-body ul,
:root[data-theme="dark"] .article-body ol { color: var(--text-2); }
:root[data-theme="dark"] .article-body li { color: inherit; }
:root[data-theme="dark"] .article-body strong { color: var(--text); }
:root[data-theme="dark"] .article-body h2 { color: var(--text); }
:root[data-theme="dark"] .article-back { color: var(--text-3); }
:root[data-theme="dark"] .article-back:hover { color: var(--text); }
:root[data-theme="dark"] .article-meta { color: var(--text-3); }
:root[data-theme="dark"] .article-cta { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .article-cta p { color: var(--text-2); }
:root[data-theme="dark"] .article-disclaimer { color: var(--text-3); border-top-color: var(--border) !important; }

/* Break the "Read our full disclaimer →" link onto its own line with a
   clear gap from the preceding sentence. The link is inline in every
   blog post's .article-disclaimer paragraph; this rule gives it room
   to breathe without editing each of the 17 post files. */
.article-disclaimer a { display: block; margin-top: 10px; }

/* TL;DR card — shown after the article intro. Gives the reader the
   one-sentence answer + a primary CTA before they need to commit to
   reading the rest. Drives conversion for the high-intent searcher who
   already knows what they need. */
.article-tldr {
  margin: 24px 0 32px;
  padding: 20px 22px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.article-tldr-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}
.article-tldr p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px 0;
}
.article-tldr p:last-child { margin-bottom: 0; }
.article-tldr-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
}
.article-tldr-cta:hover { background: var(--accent-hover); }
.article-tldr-link {
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
  margin-left: 12px;
  border-bottom: 1px dotted var(--text-3);
}
.article-tldr-link:hover { color: var(--text); }
:root[data-theme="dark"] .article-tldr { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .article-tldr p { color: var(--text); }

/* Mid-content CTA card — inserted ~30-40% scroll, after the first major
   solution section. Catches readers who've decided they want the
   solution but won't scroll all the way to the bottom. */
.article-cta-mid {
  margin: 36px 0;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--surface-alt), var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.article-cta-mid-text { flex: 1; min-width: 220px; }
.article-cta-mid-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 4px;
}
.article-cta-mid-text span {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.5;
}
.article-cta-mid-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.article-cta-mid-btn:hover { background: var(--accent-hover); }
:root[data-theme="dark"] .article-cta-mid {
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
  border-color: var(--border);
}

/* Scrollbars — visible on dark */
:root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }