/* ==========================================================================
   Finance Pulse — design system + layout
   Organized: reset → tokens → base → layout → components → utilities
   ========================================================================== */

/* ---------- Reset (minimal, modern) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Give in-page anchor targets some breathing room above the viewport
 * edge so the header doesn't crowd them. */
#newsletter, #footer, #main { scroll-margin-top: 24px; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
img, picture { max-width: 100%; display: block; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- Design tokens ---------- */
:root {
  /* Color — Fintech Lab (indigo primary + lime accent on pure white) */
  --c-brand:      #4F46E5;  /* primary: buttons, links, CTAs */
  --c-brand-dark: #3730A3;  /* hover / pressed */
  --c-accent:     #C7F230;  /* electric lime: badges, "new", highlights */
  --c-ink:        #1E1B3A;  /* headings + body text (deep indigo-black) */
  --c-text:       #2A2750;
  --c-muted:      #5C5A77;  /* muted indigo-gray */
  --c-soft:       #F5F5F9;  /* very subtle indigo tint — alt bands */
  --c-border:     #E5E7EB;  /* cool neutral border (Tailwind gray-200) */
  --c-bg:         #FFFFFF;  /* pure white page background */
  --c-card:       #FFFFFF;  /* white cards (rely on border for separation) */
  --c-success:    #16A34A;  /* semantic (pros) — kept */
  --c-danger:     #B91C1C;  /* semantic (cons/errors) — kept */
  --c-link-external: #B45309; /* external text links */
  --c-link-external-hover: #92400E;

  /* Typography */
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-head: "Manrope", var(--f-body);

  /* Spacing scale (8-pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px; --s-9: 96px;

  /* Radii + shadows */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;
  --sh-1: 0 1px 2px rgba(11,19,32,.06), 0 4px 16px rgba(11,19,32,.06);
  --sh-2: 0 4px 12px rgba(11,19,32,.08), 0 16px 32px rgba(11,19,32,.08);

  /* Layout */
  --w-content: 720px;
  --w-wide:    1160px;
  --w-wide-toc: 1420px;
}

/* Pillar accent swap — Fintech Lab keeps one indigo brand across every
 * category, with lime accent doing all the per-section flavor. */
body.cat-investing,
body.cat-budgeting,
body.cat-credit-cards,
body.cat-retirement      { --c-brand: #4F46E5; --c-brand-dark: #3730A3; }

/* ---------- Dark mode (Fintech Lab) ---------- */
[data-theme="dark"] {
  --c-bg:         #0F0D1F;  /* deep indigo-black */
  --c-card:       #1A1735;  /* slightly lighter card surface */
  --c-text:       #E8E6F5;
  --c-ink:        #F0EFFF;  /* off-white with cool tint */
  --c-muted:      #9C9AB6;
  --c-soft:       #1A1735;
  --c-border:     #2E2B4D;
  --c-brand:      #818CF8;  /* lighter indigo: stays vivid on dark */
  --c-brand-dark: #A5B0FF;  /* hover */
  --c-accent:     #C7F230;  /* lime stays the same: pops on both modes */
  --c-link-external: #FB923C;
  --c-link-external-hover: #FDBA74;
}

/* Text-link convention across public content.
 * Internal links use the brand blue. External web links use orange.
 * Classed links are excluded so buttons, cards, navigation, and CTAs keep
 * their component-specific colors.
 */
.fp-main :is(p, li, dd, blockquote) a:not([class]) {
  color: var(--c-brand);
  text-decoration-color: currentColor;
}
.fp-main :is(p, li, dd, blockquote) a[href^="http://"]:not([href*="getfinancepulse.com"]):not([class]),
.fp-main :is(p, li, dd, blockquote) a[href^="https://"]:not([href*="getfinancepulse.com"]):not([class]) {
  color: var(--c-link-external);
}
.fp-main :is(p, li, dd, blockquote) a[href^="http://"]:not([href*="getfinancepulse.com"]):not([class]):hover,
.fp-main :is(p, li, dd, blockquote) a[href^="https://"]:not([href*="getfinancepulse.com"]):not([class]):hover {
  color: var(--c-link-external-hover);
}
/* Brand is a lighter indigo in dark mode, so elements using it as a
   BACKGROUND with white text need dark text instead (avoids text == background). */
[data-theme="dark"] .fp-btn--primary,
[data-theme="dark"] .fp-btn--primary:hover,
[data-theme="dark"] .fp-pill,
[data-theme="dark"] .fp-carousel__cat,
[data-theme="dark"] .fp-logo__icon,
[data-theme="dark"] .pagination .current,
[data-theme="dark"] .fp-share__btn:hover,
[data-theme="dark"] .fp-share__copy--success,
[data-theme="dark"] .fp-helpful__btn:hover,
[data-theme="dark"] .fp-helpful__btn.is-voted,
[data-theme="dark"] #commentform #submit,
[data-theme="dark"] #commentform #submit:hover {
  color: #0F0D1F;
}
[data-theme="dark"] a:hover { color: var(--c-brand-dark); }
[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }
[data-theme="dark"] .fp-card,
[data-theme="dark"] .fp-cat-tile,
[data-theme="dark"] .fp-calc-tile,
[data-theme="dark"] .fp-res-tile,
[data-theme="dark"] .fp-restabs__tab,
[data-theme="dark"] .fp-restabs__panel,
[data-theme="dark"] .fp-sidebar .widget,
[data-theme="dark"] .fp-cookie-banner,
[data-theme="dark"] .fp-sticky-cta { background: var(--c-card); color: var(--c-text); }
[data-theme="dark"] .fp-related-calc,
[data-theme="dark"] .fp-calc-page__example { background: #1c1c1f; border-color: #2e2e33; }
[data-theme="dark"] .fp-disclosure--callout { background: #2a2114; color: #e8dcc0; border-left-color: #b08a4a; }
[data-theme="dark"] .fp-restabs__tab--active { background: #ededf0; color: #111113; border-color: #ededf0; }
[data-theme="dark"] .fp-trust { background: var(--c-soft); }
[data-theme="dark"] .fp-header { background: rgba(17, 17, 19, 0.85); border-bottom-color: var(--c-border); }
[data-theme="dark"] img { opacity: 0.92; }
[data-theme="dark"] .fp-progress-bar { background: rgba(255, 255, 255, 0.05); }
html { transition: background-color 0.3s, color 0.3s; }
body { transition: background-color 0.3s, color 0.3s; }

/* ---------- "Was this helpful?" poll ---------- */
.fp-helpful {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--c-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.fp-helpful__heading {
  margin: 0 0 var(--s-3);
  font-size: 17px;
  color: var(--c-text);
}
.fp-helpful__buttons {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}
.fp-helpful__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  transition: all 0.15s;
  font-family: inherit;
}
.fp-helpful__btn:hover {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.fp-helpful__btn.is-voted {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  cursor: default;
}
.fp-helpful__btn.is-voted:hover { transform: none; }
.fp-helpful__count {
  font-size: 12px;
  opacity: 0.8;
  margin-left: 2px;
}
.fp-helpful__count:empty { display: none; }
.fp-helpful__thanks {
  margin: var(--s-3) 0 0;
  color: var(--c-brand-dark);
  font-weight: 600;
  font-size: 14px;
}
[data-theme="dark"] .fp-helpful__btn { background: var(--c-card); }

/* ---------- Featured image hover zoom (single posts/reviews) ---------- */
.fp-article__hero {
  cursor: zoom-in;
  position: relative;
}
.fp-article__hero img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.fp-article__hero:hover img { transform: scale(1.04); }

/* ---------- Lightbox (full-screen image overlay) ---------- */
.fp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
  padding: var(--s-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.fp-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.fp-lightbox__img {
  max-width: 95vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s;
  transform: scale(0.96);
}
.fp-lightbox.is-open .fp-lightbox__img { transform: scale(1); }
.fp-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.fp-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

/* ---------- Scroll fade-in animation ---------- */
.fp-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.fp-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fp-fade-in { opacity: 1; transform: none; transition: none; }
}

/* Theme toggle button (in header) */
.fp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  cursor: pointer;
  margin-left: var(--s-2);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s;
}
.fp-theme-toggle:hover {
  background: var(--c-soft);
  border-color: var(--c-brand);
  color: var(--c-brand);
  transform: scale(1.05);
}
.fp-theme-toggle__sun { display: none; }
[data-theme="dark"] .fp-theme-toggle__moon { display: none; }
[data-theme="dark"] .fp-theme-toggle__sun { display: block; }

/* ---------- Base ---------- */
body {
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  line-height: 1.2;
  color: var(--c-ink);
}

h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

p { margin: 0 0 var(--s-4); }

a { color: var(--c-brand-dark); }
a:hover { color: var(--c-brand); }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Accessibility ---------- */
.fp-skip {
  position: absolute; left: -9999px;
  padding: 10px 14px; background: var(--c-ink); color: #fff;
  z-index: 999;
}
.fp-skip:focus {
  left: 16px; top: 16px;
}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* ---------- Layout primitives ---------- */
.fp-container {
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
@media (min-width: 1200px) {
  .fp-layout--has-toc.fp-container { max-width: var(--w-wide-toc); }
}

.fp-main {
  min-height: 60vh;
  padding: var(--s-5) 0 var(--s-8);
}

.fp-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .fp-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
/* 3-column layout when TOC is present (single posts/reviews) */
@media (min-width: 1200px) {
  .fp-layout--has-toc { grid-template-columns: 220px minmax(0, 1fr) 300px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .fp-layout--has-toc { grid-template-columns: 200px minmax(0, 1fr); }
  .fp-layout--has-toc .fp-sidebar { grid-column: 1 / -1; }
}

/* ---------- Disclosure bar ---------- */
.fp-disclosure-bar {
  background: var(--c-soft);
  border-bottom: 1px solid var(--c-border);
  padding: var(--s-2) var(--s-4);
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
}

/* ---------- Header ---------- */
.fp-header {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 50;
}
/* Centered "magazine" header: logo + tagline centered, toggle left, actions right */
.fp-header__top {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: var(--s-5) var(--s-4) var(--s-4);
}
.fp-header__brand { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fp-header__tagline { color: var(--c-muted); font-size: 12.5px; }
.fp-header__actions {
  position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: var(--s-3);
}

.fp-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.fp-logo__icon {
  width: 38px; height: 38px; background: var(--c-brand); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fp-logo__icon svg { width: 24px; height: 24px; }
.fp-logo__text {
  font-family: var(--f-head); font-size: 26px; font-weight: 700;
  color: var(--c-ink); }
/* "Pulse" in the wordmark picks up the brand indigo so the site name
 * itself carries the logo color even when no Customizer logo is set. */
.fp-logo__text strong { color: var(--c-brand); font-weight: 800; }

/* Custom logo (uploaded via WP Customizer > Site Identity) — scales to a
 * fixed pixel height, width is auto. Replaces the inline-SVG fallback. */
.fp-logo--custom { display: inline-flex; align-items: center; }
.fp-logo__img    { display: block; height: 42px; width: auto; max-width: 220px; }
@media (max-width: 600px) {
  .fp-logo__img { height: 36px; }
}

/* Nav row — centered, full-width with a divider */
.fp-nav { border-top: 1px solid var(--c-border); }
.fp-nav__list {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px; list-style: none; margin: 0; padding: 10px var(--s-4);
}
.fp-nav__list a {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--c-ink); font-weight: 600; font-size: 14.5px;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.fp-nav__list a:hover { background: var(--c-soft); color: var(--c-brand); }
.fp-nav__list .current-menu-item > a,
.fp-nav__list .current-menu-parent > a,
.fp-nav__list .current_page_item > a {
  background: rgba(79,70,229,0.08); color: var(--c-brand); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--c-accent);
}
/* Caret on items that open a dropdown */
.fp-nav__list .menu-item-has-children > a::after {
  content: ""; width: 6px; height: 6px; margin-left: 8px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}

/* Dropdown sub-menu */
.fp-nav__list > li { position: relative; }
.fp-nav__list .sub-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px;
  box-shadow: var(--sh-2); padding: 6px; min-width: 220px;
  list-style: none; margin: 12px 0 0; z-index: 100;
}
/* hover bridge so the menu doesn't close in the gap */
.fp-nav__list > li:hover > .sub-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.fp-nav__list > li:hover > .sub-menu { display: block; }
.fp-nav__list .sub-menu li { margin: 0; }
.fp-nav__list .sub-menu a {
  display: block; padding: 9px 14px; font-weight: 500; font-size: 14.5px;
  border-radius: 9px; white-space: nowrap; text-align: left; color: var(--c-ink);
}
.fp-nav__list .sub-menu a:hover { background: var(--c-soft); }

/* ─────────────────────────────────────────────────────────────────────
 * Mega menu (Power-Nav, Option 1)
 *
 * Adds a wide hover/click panel under "Calculators" and "Topics". Each
 * panel = 3 columns (category list / top picks / featured article on
 * indigo). Newsletter CTA pill pins to the right side of the nav row.
 * Visible state is driven by aria-expanded on the trigger button so
 * keyboard + click + hover all share one source of truth.
 * ───────────────────────────────────────────────────────────────── */

/* Mega nav must be the positioned ancestor so the full-width panel can
 * span the whole nav row instead of escaping to <body>. */
.fp-nav--mega { position: relative; }

/* Center the whole nav row including the Newsletter CTA. The CTA is
 * already visually distinct (lime pill), so it doesn't need to anchor
 * right separately. */
.fp-nav--mega .fp-nav__list {
  justify-content: center;
  gap: 4px;
}
.fp-nav--mega .fp-nav__item--cta { margin-left: 8px; }

/* Trigger button (looks like a nav link, behaves like a disclosure btn) */
.fp-nav__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit;
  color: var(--c-ink); font-weight: 600; font-size: 14.5px;
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.fp-nav__trigger:hover { background: var(--c-soft); color: var(--c-brand); }
.fp-nav__trigger[aria-expanded="true"] {
  background: rgba(79, 70, 229, 0.08);
  color: var(--c-brand);
  box-shadow: inset 0 -3px 0 var(--c-accent);
}
.fp-nav__chev {
  width: 14px; height: 14px; opacity: 0.7;
  transition: transform .18s ease;
}
.fp-nav__trigger[aria-expanded="true"] .fp-nav__chev { transform: rotate(180deg); }

/* Plain direct nav links (Reviews, Free resources) */
.fp-nav__link {
  display: inline-flex; align-items: center;
  text-decoration: none;
  color: var(--c-ink); font-weight: 600; font-size: 14.5px;
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.fp-nav__link:hover { background: var(--c-soft); color: var(--c-brand); }

/* Lime Newsletter CTA pill */
.fp-nav__newsletter {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  background: var(--c-accent); color: #1E1B3A;
  font-family: var(--f-head);
  font-weight: 800; font-size: 13px;
  padding: 8px 16px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(199, 242, 48, 0.30);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.fp-nav__newsletter:hover {
  background: #B0DA1E;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(199, 242, 48, 0.40);
  color: #1E1B3A;
}
.fp-nav__newsletter svg { width: 14px; height: 14px; }

/* Mega panel — full-width below the nav row.
 * Higher specificity than the legacy `.fp-nav__list > li { position:relative }`
 * rule so the panel anchors to .fp-nav--mega, not to the <li>. */
.fp-nav--mega .fp-nav__list > .fp-nav__item--mega { position: static; }
.fp-mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 18px 38px rgba(30, 27, 58, 0.10);
  z-index: 200;
}
.fp-mega[hidden] { display: none; }

.fp-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: var(--s-6);
  padding: var(--s-5) var(--s-4);
}

.fp-mega__col { min-width: 0; }
.fp-mega__label {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}

.fp-mega__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.fp-mega__list > li > a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-ink);
  font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s;
}
.fp-mega__list > li > a:hover {
  background: rgba(79, 70, 229, 0.06);
  color: var(--c-brand);
}
.fp-mega__list em {
  font-style: normal;
  color: var(--c-muted);
  font-size: 11.5px; font-weight: 500;
}
.fp-mega__list--plain > li > a { font-weight: 500; }
.fp-mega__list-more > a {
  margin-top: 4px;
  font-size: 12.5px; font-weight: 800;
  color: var(--c-brand) !important;
  padding: 8px 12px !important;
}
.fp-mega__list-more > a:hover {
  background: transparent !important;
  color: var(--c-brand-dark) !important;
}

/* Featured article card (indigo bg + lime CTA) — the affiliate-grade
 * money slot inside the dropdown */
.fp-mega__feat {
  background: var(--c-brand);
  border-radius: 14px;
  padding: var(--s-4);
  color: #fff;
  display: flex; flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.fp-mega__feat::before {
  content: "";
  position: absolute; top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(199, 242, 48, 0.20), transparent 65%);
  pointer-events: none;
}
.fp-mega__feat-eyebrow {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 8px;
  position: relative;
}
.fp-mega__feat-title {
  font-family: var(--f-head);
  font-size: 17px; font-weight: 800;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 8px;
  position: relative;
}
.fp-mega__feat-desc {
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
  flex: 1;
  position: relative;
}
/* Higher specificity (.fp-mega + cta + a) so the outer .fp-nav__list a
 * color rule can't drag this back to dark ink. */
.fp-mega a.fp-mega__feat-cta {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  color: #fff;
  font-family: var(--f-head);
  font-size: 13.5px; font-weight: 800;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  position: relative;
  transition: background .15s, border-color .15s, color .15s, gap .15s;
}
.fp-mega a.fp-mega__feat-cta:hover {
  gap: 10px;
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #1E1B3A;
}

/* ─── Featured hero + side rail (calc + topics megas). The bare
 *   .fp-mega-feat-hero would inherit the parent .fp-nav__list a
 *   pill (border-radius: 999px) and render as an oval, so every
 *   selector below uses the .fp-mega prefix to beat that
 *   specificity. ─── */
.fp-mega__inner--calc,
.fp-mega__inner--topic {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.fp-mega a.fp-mega-feat-hero,
.fp-mega-feat-hero {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;
  background: var(--c-brand);
  color: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  white-space: normal;
  transition: transform .15s, box-shadow .15s;
}
.fp-mega-feat-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: -1;
}
.fp-mega-feat-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(79, 70, 229, 0.40);
}
.fp-mega-feat-hero__eye {
  font-family: var(--f-head);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 8px;
}
.fp-mega-feat-hero__name {
  font-family: var(--f-head);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
  white-space: normal;
}
.fp-mega-feat-hero__sc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.fp-mega-feat-hero__excerpt {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0 0 14px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-mega-feat-hero__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(199, 242, 48, 0.12);
  border: 1px solid rgba(199, 242, 48, 0.30);
  padding: 4px 10px;
  border-radius: 999px;
  width: max-content;
  margin: 0 0 16px;
}
.fp-mega-feat-hero__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.fp-mega-feat-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fp-mega-feat-hero__res {
  font-family: var(--f-head);
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fp-mega-feat-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}
.fp-mega-feat-hero__stat {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}
.fp-mega-feat-hero__stat-lbl {
  font-family: var(--f-head);
  font-size: 9px; font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 6px;
}
.fp-mega-feat-hero__stat-val {
  font-family: var(--f-head);
  font-size: 18px; font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#newsletter { scroll-margin-top: 96px; }

.fp-mega-feat-hero__chart {
  position: relative;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 84px;
  margin: 2px 0 18px;
}
.fp-mega-feat-hero__chart svg {
  position: absolute;
  inset: 0 0 16px;
  width: 100%;
  height: calc(100% - 16px);
}
.fp-mega-feat-hero__chart-cap {
  position: absolute;
  left: 0; bottom: 0;
  font-family: var(--f-head);
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.fp-mega a.fp-mega-feat-hero__cta,
.fp-mega-feat-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  color: var(--c-ink);
  background: var(--c-accent);
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: gap .15s;
}
.fp-mega-feat-hero:hover .fp-mega-feat-hero__cta { gap: 10px; }

/* Side rail */
.fp-mega-feat-side {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}
.fp-mega-feat-side__block { min-width: 0; }

/* Category 2-col pill grid */
.fp-mega-feat-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.fp-mega a.fp-mega-feat-cat,
.fp-mega-feat-cat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(79, 70, 229, 0.06);
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s, color .12s;
  min-width: 0;
}
.fp-mega a.fp-mega-feat-cat:hover {
  background: rgba(79, 70, 229, 0.14);
}
.fp-mega-feat-cat__name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-mega-feat-cat__n {
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  color: var(--c-muted);
  font-weight: 500;
  flex-shrink: 0;
}

/* Top picks compact list */
.fp-mega-feat-list {
  list-style: none; padding: 0; margin: 0;
}
.fp-mega .fp-mega-feat-list > li > a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 7px 4px;
  border-radius: 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  transition: color .12s, padding .12s;
}
.fp-mega-feat-list > li:last-child > a { border-bottom: 0; }
.fp-mega-feat-list > li > a:hover {
  color: var(--c-brand);
  padding-left: 8px;
}
.fp-mega-feat-list__arr {
  color: var(--c-brand);
  font-weight: 800;
}

/* See-all footer link */
.fp-mega a.fp-mega-feat-see {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  color: var(--c-brand);
  text-decoration: none;
  transition: color .12s;
}
.fp-mega a.fp-mega-feat-see:hover {
  color: var(--c-ink);
}

@media (max-width: 900px) {
  .fp-mega__inner--calc { grid-template-columns: 1fr; }
  .fp-mega-feat-hero__res { font-size: 30px; }
}

.fp-search input {
  border: 1px solid var(--c-border); border-radius: 999px; padding: 7px 14px;
  width: 150px; background: var(--c-soft); color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.fp-search input:focus {
  outline: none; border-color: var(--c-brand);
  background: #fff; box-shadow: 0 0 0 3px rgba(79,70,229,0.18);
}

.fp-nav-toggle {
  position: absolute; left: var(--s-4); top: var(--s-4);
  display: none; background: none; border: 0; cursor: pointer; padding: 8px; width: 40px; height: 40px;
}
.fp-nav-toggle__bar {
  display: block; width: 22px; height: 2px; background: var(--c-ink); margin: 4px auto;
  transition: transform .2s ease;
}

@media (max-width: 820px) {
  .fp-header__top { padding: var(--s-4) var(--s-4) var(--s-3); }
  .fp-header__actions .fp-search { display: none; }
  .fp-nav-toggle { display: block; }
  .fp-nav { max-height: 0; overflow: hidden; transition: max-height .3s ease; border-top: 0; }
  .fp-nav[data-open="true"] { max-height: 85vh; overflow-y: auto; border-top: 1px solid var(--c-border); }
  .fp-nav__list { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; }
  .fp-nav__list a {
    width: 100%; justify-content: flex-start;
    padding: 12px 16px; border-radius: 10px; font-size: 16px;
  }
  .fp-nav__list a:hover { background: var(--c-soft); }
  /* Current page: subtle highlight (not a heavy black bar) */
  .fp-nav__list .current-menu-item > a,
  .fp-nav__list .current-menu-parent > a,
  .fp-nav__list .current_page_item > a {
    background: var(--c-soft); color: var(--c-ink);
    font-weight: 800; box-shadow: inset 3px 0 0 var(--c-ink);
  }
  .fp-nav__list .menu-item-has-children > a::after { margin-left: auto; }
  /* Submenu opens inline (indented), not as a floating dropdown */
  .fp-nav__list .sub-menu {
    position: static; transform: none; display: block;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 4px 14px; margin: 0; min-width: 0;
  }
  .fp-nav__list .sub-menu a { font-size: 14.5px; color: var(--c-muted); }

  /* Mega menu on mobile: triggers become accordions, panels stack
   * inline as indented blocks instead of full-width absolute panels. */
  .fp-nav--mega .fp-nav__list { gap: 2px; }
  .fp-nav--mega .fp-nav__item--cta { margin-left: 0; margin-top: 10px; }
  .fp-nav__trigger,
  .fp-nav__link {
    width: 100%; justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px; font-size: 16px;
  }
  .fp-nav__trigger[aria-expanded="true"] {
    box-shadow: inset 3px 0 0 var(--c-brand);
  }
  .fp-nav__newsletter {
    width: 100%; justify-content: center;
    padding: 14px 16px;
    font-size: 14.5px;
  }
  .fp-mega {
    position: static;
    box-shadow: none; border: 0;
    background: rgba(79, 70, 229, 0.04);
    border-radius: 10px;
    margin: 4px 0;
  }
  .fp-mega__inner {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-3);
  }
  .fp-mega__feat { padding: var(--s-3); border-radius: 10px; }
  .fp-mega__feat-title { font-size: 16px; }
}

/* ---------- Tools / Resources Grid ---------- */
.fp-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0 0 var(--s-6);
}
.fp-tools-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
}
.fp-tools-grid a:hover {
  border-color: var(--c-brand);
  box-shadow: 0 2px 8px rgba(30,27,58,.10);
}
.fp-tools-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.fp-tools-icon--green  { background: #e6f5ef; }
.fp-tools-icon--blue   { background: #e8f1fb; }
.fp-tools-icon--orange { background: #fef3e2; }
.fp-tools-icon--red    { background: #fde8e8; }
.fp-tools-icon--purple { background: #f0edfe; }
.fp-tools-label strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}
.fp-tools-label span {
  display: block;
  font-size: 13px;
  color: var(--c-mute);
}
.fp-tools-section {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-border);
}
.fp-tools-section h2 { margin-top: 0; }
.fp-back-top {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 14px;
  color: var(--c-mute);
  text-decoration: none;
}
.fp-back-top:hover { color: var(--c-brand); }

@media (max-width: 600px) {
  .fp-tools-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.fp-hero {
  background: #4F46E5;
  color: #fff;
  padding: var(--s-8) 0;
  text-align: center;
}
.fp-hero__title {
  color: #fff;
  font-size: clamp(32px, 5vw, 56px);
  max-width: 20ch; margin: 0 auto var(--s-4);
}
.fp-hero__subtitle {
  color: rgba(255,255,255,.9);
  font-size: 19px;
  max-width: 55ch; margin: 0 auto var(--s-5);
}
.fp-hero__cta {
  display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
}
.fp-hero__stats {
  list-style: none; padding: 0;
  margin: var(--s-7) auto 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.fp-hero__stats li {
  display: flex; flex-direction: column;
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-md);
  backdrop-filter: blur(4px);
}
.fp-hero__stats strong {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.fp-hero__stats span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .fp-hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sections ---------- */
.fp-section { padding: var(--s-8) 0; }
.fp-section--alt { background: var(--c-soft); }
.fp-section__header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-5);
}
.fp-section__header h2 { margin: 0; position: relative; padding-bottom: 14px; }
/* Lime accent underline under every section h2 — gives the indigo brand
 * a regular electric punch without changing copy or layout. */
.fp-section__header h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 4px; background: var(--c-accent); border-radius: 2px;
}
.fp-section__header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-6);
}
.fp-section__header--center h2::after { left: 50%; transform: translateX(-50%); }
.fp-section__lead {
  color: var(--c-muted);
  font-size: 17px;
  margin: var(--s-2) 0 0;
  max-width: 60ch;
}
.fp-section__footer {
  display: flex; justify-content: center;
  margin-top: var(--s-6);
}
.fp-link {
  color: var(--c-brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.fp-link:hover { text-decoration: underline; }

/* ---------- Category tiles (homepage) ---------- */
/* 5 tiles: 5-col on wide desktop, 3+2 centered on standard, 2+2+1 on tablet, 1 col on mobile */
.fp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  max-width: 1280px;
  margin: 0 auto;
}
.fp-cat-tile {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.fp-cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--c-brand);
}
.fp-cat-tile__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-soft);
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}
.fp-cat-tile__icon svg { width: 26px; height: 26px; }
.fp-cat-tile h3 {
  margin: 0 0 var(--s-2);
  font-size: 19px;
}
.fp-cat-tile p {
  margin: 0 0 var(--s-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
  flex: 1;
}
.fp-cat-tile__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-brand);
  margin-top: auto;
}
.fp-cat-tile:hover .fp-cat-tile__cta { color: var(--c-brand-dark); }
@media (max-width: 900px) {
  .fp-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .fp-cat-grid { grid-template-columns: 1fr; }
}

/* Category icons — uniform neutral gray chips */
.fp-cat-tile--investing  .fp-cat-tile__icon,
.fp-cat-tile--credit     .fp-cat-tile__icon,
.fp-cat-tile--saving     .fp-cat-tile__icon,
.fp-cat-tile--retirement .fp-cat-tile__icon,
.fp-cat-tile--budgeting  .fp-cat-tile__icon { background: var(--c-brand); color: #fff; }
[data-theme="dark"] .fp-cat-tile__icon { background: #232326; color: #ededf0; }

/* ---------- News carousel (peek-style: center slide + side peeks) ---------- */
.fp-carousel {
  --slide-width: 70%;
  --slide-gap: 16px;
  position: relative;
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.fp-carousel__viewport {
  position: relative;
  overflow: hidden;
}
.fp-carousel__track {
  display: flex;
  gap: var(--slide-gap);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.fp-carousel__slide {
  flex: 0 0 var(--slide-width);
  min-width: 0;
  position: relative;
  aspect-ratio: 16/9;
  background: var(--c-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: opacity 0.4s, transform 0.4s;
  opacity: 0.45;
  transform: scale(0.96);
}
.fp-carousel__slide--active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.fp-carousel__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  position: relative;
}
.fp-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fp-carousel__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-7) var(--s-5) var(--s-5);
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.fp-carousel__cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--c-brand);
  border-radius: 4px;
  margin-bottom: var(--s-2);
}
.fp-carousel__title {
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 var(--s-2);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.fp-carousel__byline {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.fp-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--c-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background 0.15s, transform 0.15s;
  z-index: 3;
  color: var(--c-text);
}
.fp-carousel__btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.fp-carousel__btn svg { width: 22px; height: 22px; }
.fp-carousel__btn--prev { left: -8px; }
.fp-carousel__btn--next { right: -8px; }

.fp-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s-4);
  flex-wrap: wrap;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--s-3);
}
.fp-carousel__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--c-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s, width 0.3s;
}
.fp-carousel__dot:hover { background: var(--c-muted); }
.fp-carousel__dot--active {
  background: var(--c-brand);
  width: 28px;
  border-radius: 5px;
}

@media (max-width: 900px) {
  .fp-carousel { --slide-width: 80%; }
}
@media (max-width: 640px) {
  .fp-carousel { --slide-width: 88%; --slide-gap: 12px; padding: 0 var(--s-2); }
  .fp-carousel__overlay { padding: var(--s-5) var(--s-3) var(--s-3); }
  .fp-carousel__btn { width: 36px; height: 36px; }
  .fp-carousel__btn--prev { left: -4px; }
  .fp-carousel__btn--next { right: -4px; }
  .fp-carousel__byline { font-size: 12px; }
}

/* ---------- Calculator tiles (homepage preview) ---------- */
.fp-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.fp-calc-tile {
  display: flex; flex-direction: column;
  padding: var(--s-4);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.fp-calc-tile:hover {
  transform: translateY(-2px);
  border-color: var(--c-brand);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.18);
  background: rgba(79, 70, 229, 0.03);
}
.fp-calc-tile__num {
  font-size: 28px;
  margin-bottom: var(--s-2);
  line-height: 1;
}
.fp-calc-tile strong {
  font-size: 15px;
  margin-bottom: 4px;
}
.fp-calc-tile__desc {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .fp-calc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fp-calc-grid { grid-template-columns: 1fr; }
}

/* ---------- Section eyebrow (small uppercase brand label above H2) ---------- */
.fp-section__eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;   text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 8px;
}

/* ---------- Calculator result-preview cards (homepage Free
 *   calculators band). Massive result number is the visual anchor:
 *   small uppercase calc name -> mono-feel scenario -> huge ink
 *   result number -> hairline divider -> CTA at the bottom. No
 *   icons, no head wrapper. ---------- */
.fp-calc-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.fp-calc-result {
  position: relative;
  display: flex; flex-direction: column;
  padding: 20px 20px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fp-calc-result:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.40);
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.30);
}
.fp-calc-result__name {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 6px;
}
.fp-calc-result__scenario {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.5;
}
.fp-calc-result__number {
  margin: 0 0 16px;
  font-family: var(--f-head);
  font-size: clamp(28px, 3.4vw, 34px);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fp-calc-result__number small {
  font-family: var(--f-head);
  font-size: 0.45em;
  font-weight: 600;
  color: var(--c-muted);
}
.fp-calc-result__cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  color: var(--c-brand);
  transition: color .12s;
}
.fp-calc-result:hover .fp-calc-result__cta { color: var(--c-ink); }

/* "New" badge — sits top-right corner of card */
.fp-calc-result__badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--c-accent); color: var(--c-ink);
  font-family: var(--f-head);
  font-size: 9px; font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}

/* Responsive: 2 cols at tablet, 1 col at mobile */
@media (max-width: 900px) {
  .fp-calc-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fp-calc-result-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---------- Free Resources: featured hero + quick list ---------- */
.fp-res-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-4);
}

/* ── Featured big card (left) ── */
.fp-res-feat {
  background: var(--c-brand);
  color: #fff;
  border-radius: 14px;
  padding: 26px 26px 24px;
  text-decoration: none;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.fp-res-feat:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(79, 70, 229, 0.30);
}
.fp-res-feat__pill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  background: var(--c-accent);
  color: #1E1B3A;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;   text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.fp-res-feat__pill svg { width: 13px; height: 13px; }

/* Mini-sheet mockup inside the featured card */
.fp-res-sheet {
  background: #fff;
  border-radius: 8px;
  margin: 16px 0;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}
.fp-res-sheet__head {
  background: var(--c-accent);
  color: #1E1B3A;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;   padding: 8px 12px;
}
.fp-res-sheet__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  font-size: 12.5px;
  border-top: 1px solid #E5E7EB;
  color: #5C5A77;
}
.fp-res-sheet__row > span {
  padding: 6px 12px;
  border-right: 1px solid #E5E7EB;
}
.fp-res-sheet__row > span:last-child { border-right: 0; }
.fp-res-sheet__row--head > span {
  background: #F5F5F9;
  color: #1E1B3A;
  font-weight: 700;
}
.fp-res-sheet__row--accent > span {
  background: rgba(199, 242, 48, 0.22);
  color: var(--c-brand);
  font-weight: 800;
}

.fp-res-feat__title {
  font-family: var(--f-head);
  font-size: 22px; font-weight: 800;
  color: #fff;
  margin: 8px 0 6px;
  line-height: 1.2;
}
.fp-res-feat__desc {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
.fp-res-feat__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 20px;
  background: var(--c-accent);
  color: #1E1B3A;
  border-radius: 10px;
  font-size: 14px; font-weight: 800;
  transition: background .15s, transform .15s;
}
.fp-res-feat__cta svg { width: 14px; height: 14px; transition: transform .15s; }
.fp-res-feat:hover .fp-res-feat__cta { background: #B0DA1E; }
.fp-res-feat:hover .fp-res-feat__cta svg { transform: translateX(3px); }

/* ── Quick list (right column) ── */
.fp-res-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.fp-res-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  flex: 1;
  min-height: 64px;
}
.fp-res-row:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.40);
  box-shadow: 0 6px 14px -4px rgba(79, 70, 229, 0.18);
}
.fp-res-row__body {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
  gap: 4px;
}
.fp-res-row__body strong {
  font-family: var(--f-head);
  font-size: 15px; font-weight: 800;
  color: var(--c-ink);
  line-height: 1.25;
}
.fp-res-row__body em {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500;
  color: var(--c-muted);
  font-style: normal;
}
.fp-res-row__kind {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 9px; font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.4;
}
.fp-res-row__kind--sheet { background: rgba(79, 70, 229, 0.10); color: var(--c-brand); }
.fp-res-row__kind--doc   { background: rgba(199, 242, 48, 0.32); color: var(--c-ink); }
.fp-res-row__arrow {
  width: 16px; height: 16px;
  color: var(--c-brand);
  flex-shrink: 0;
  transition: transform .15s;
}
.fp-res-row:hover .fp-res-row__arrow { transform: translateX(3px); }

/* Responsive */
@media (max-width: 900px) {
  .fp-res-hero { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fp-res-feat { padding: 20px; }
  .fp-res-feat__title { font-size: 19px; }
  .fp-res-sheet__row { font-size: 11.5px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Top-Rated Reviews — Dark Glass Cards (Option 6)
 * Full-bleed dark gradient band that interrupts the white homepage rhythm.
 * Cards are translucent glass surfaces sitting on the gradient. Lime CTAs
 * glow against the dark backdrop. Premium fintech-app feel.
 * ────────────────────────────────────────────────────────────────────── */
.fp-rev-section {
  position: relative;
  padding: var(--s-8) 0;
  margin: var(--s-7) 0;
  background:
    radial-gradient(circle at 90% 105%, rgba(199, 242, 48, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 12% -10%, rgba(129, 140, 248, 0.45) 0%, transparent 55%),
    var(--c-brand);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.fp-rev-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}

.fp-rev-section__head {
  text-align: center;
  margin-bottom: var(--s-6);
}
.fp-rev-section__eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;   text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.fp-rev-section__title {
  font-family: var(--f-head);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.fp-rev-section__lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.70);
  margin: 12px auto 0;
  max-width: 56ch;
  line-height: 1.55;
}
.fp-rev-section__acc {
  display: inline-block;
  width: 48px; height: 4px;
  background: var(--c-accent);
  border-radius: 2px;
  margin-top: 14px;
  box-shadow: 0 0 18px rgba(199, 242, 48, 0.45);
}

/* ── 3-column glass grid ── */
.fp-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.fp-rev-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.fp-rev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 242, 48, 0.55);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(30, 27, 58, 0.30);
}

/* Top-pick variant: lime border + soft outer glow */
.fp-rev-card--top {
  border-color: rgba(199, 242, 48, 0.55);
  box-shadow: 0 0 0 1px rgba(199, 242, 48, 0.35), 0 24px 50px rgba(199, 242, 48, 0.10);
}
.fp-rev-card__ribbon {
  position: absolute; top: 14px; right: 14px;
  background: var(--c-accent);
  color: #1E1B3A;
  font-size: 10.5px; font-weight: 800;   text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  z-index: 2;
}

/* Hero image / brand block at the top of each card. When the review has a
 * featured image we treat it as a 16/9 hero (object-fit cover). With no
 * thumbnail, the gradient indigo background shows through with a centered
 * brand wordmark. */
.fp-rev-card__logo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1E1B3A 0%, #4F46E5 100%);
  overflow: hidden;
}
.fp-rev-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Subtle bottom gradient over the image so the eyebrow/title underneath the
 * card sit on a calm anchor instead of fighting with photo highlights. */
.fp-rev-card__logo::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(15, 13, 36, 0.55), transparent);
  pointer-events: none;
}
.fp-rev-card__brand {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head);
  font-size: 18px; font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 0 18px;
}

/* Card body padding wrapper */
.fp-rev-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }

.fp-rev-card__eyebrow {
  font-size: 11px; font-weight: 800;   color: var(--c-accent);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.fp-rev-card__title {
  font-family: var(--f-head);
  font-size: 17px; font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 10px;
}

.fp-rev-card__rating {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.fp-rev-card__stars {
  color: var(--c-accent);
  font-size: 14px;
}
.fp-rev-card__rating strong { color: #fff; font-size: 13px; font-weight: 800; }
.fp-rev-card__rating-out { color: rgba(255,255,255,0.55); font-size: 11.5px; }

/* Stats row, top + bottom separators only */
.fp-rev-card__stats {
  list-style: none; padding: 10px 0; margin: 0 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  display: flex; flex-direction: column; gap: 3px;
}
.fp-rev-card__stats li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
.fp-rev-card__stats strong { color: #fff; font-weight: 700; }

/* Primary lime CTA — has its own glow on the dark surface */
.fp-rev-card__cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--c-accent);
  color: #1E1B3A;
  border-radius: 10px;
  font-family: var(--f-head);
  font-size: 13px; font-weight: 800;
  text-decoration: none;
  margin-top: auto;
  box-shadow: 0 0 24px rgba(199, 242, 48, 0.25), 0 6px 18px rgba(199, 242, 48, 0.18);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.fp-rev-card__cta svg { width: 14px; height: 14px; }
.fp-rev-card__cta:hover {
  background: #B0DA1E;
  box-shadow: 0 0 30px rgba(199, 242, 48, 0.40), 0 8px 22px rgba(199, 242, 48, 0.26);
  transform: translateY(-1px);
}

/* Secondary text link */
.fp-rev-card__link {
  display: block; text-align: center;
  margin-top: 10px;
  font-size: 12px; font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color .15s;
}
.fp-rev-card__link:hover { color: var(--c-accent); }

/* See-all bottom CTA */
.fp-rev-section__footer {
  text-align: center;
  margin-top: var(--s-6);
}
.fp-rev-section__see-all {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.fp-rev-section__see-all:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #1E1B3A;
}

/* Responsive */
@media (max-width: 900px) {
  .fp-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-rev-card--top { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .fp-rev-grid { grid-template-columns: 1fr; }
  .fp-rev-card--top { grid-column: auto; }
  .fp-rev-card__logo { min-height: 90px; padding: 24px 18px; }
}

/* ---------- More resources tabs (NerdWallet style) ---------- */
.fp-restabs {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-5);
  align-items: start;
}
.fp-restabs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fp-restabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--c-text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fp-restabs__tab:hover {
  border-color: var(--c-brand);
  background: var(--c-soft);
}
.fp-restabs__arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
  color: var(--c-brand);
  font-weight: 700;
}
.fp-restabs__tab--active {
  background: #ECFDF5;
  border-color: var(--c-brand);
  color: var(--c-brand-dark);
  font-weight: 700;
}
.fp-restabs__tab--active .fp-restabs__arrow {
  opacity: 1;
  transform: translateX(0);
}

.fp-restabs__panels {
  position: relative;
}
.fp-restabs__panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.fp-restabs__panel[hidden] { display: none; }

.fp-restabs__feature {
  display: grid;
  gap: var(--s-4);
}
.fp-restabs__img {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--c-soft);
}
.fp-restabs__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.fp-restabs__img:hover img { transform: scale(1.03); }

.fp-restabs__title {
  margin: 0 0 var(--s-2);
  font-size: 22px;
  line-height: 1.3;
}
.fp-restabs__title a {
  color: var(--c-text);
  text-decoration: none;
}
.fp-restabs__title a:hover { color: var(--c-brand); }
.fp-restabs__excerpt {
  margin: 0 0 var(--s-4);
  color: var(--c-muted);
  line-height: 1.55;
}
.fp-restabs__cta {
  font-size: 13px !important;
  padding: 12px 24px !important;
}

.fp-restabs__links {
  list-style: none;
  padding: var(--s-4) 0 0;
  margin: var(--s-4) 0 0;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fp-restabs__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-brand-dark);
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.fp-restabs__links a:hover {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}
.fp-restabs__links span {
  font-size: 14px;
  opacity: 0.7;
}

@media (max-width: 760px) {
  .fp-restabs { grid-template-columns: 1fr; }
  .fp-restabs__list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s-2);
    margin: 0 calc(-1 * var(--s-3));
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }
  .fp-restabs__tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .fp-restabs__arrow { display: none; }
}

/* ---------- Free resources tiles ---------- */
.fp-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.fp-res-tile {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  transition: transform 0.2s, box-shadow 0.2s;
}
.fp-res-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.fp-res-tile__icon {
  font-size: 32px;
  margin-bottom: var(--s-3);
  line-height: 1;
}
.fp-res-tile strong {
  font-size: 17px;
  margin-bottom: var(--s-2);
}
.fp-res-tile__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
}
@media (max-width: 900px) {
  .fp-res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .fp-res-grid { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.fp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.fp-btn:hover { transform: translateY(-1px); }

.fp-btn--primary { background: var(--c-brand); color: #fff; }
.fp-btn--primary:hover { background: var(--c-brand-dark); color: #fff; }

/* Accent button always sits on a dark/indigo surface (hero, newsletter)
 * → bright lime, near-black text for maximum punch. */
.fp-btn--accent { background: var(--c-accent); color: #1E1B3A; }
.fp-btn--accent:hover { background: #B0DA1E; color: #000; }

.fp-btn--ghost { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); color: #fff; }
.fp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.25); color: #fff; }

/* ---------- Card grid ---------- */
.fp-card-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Blog post card (template-parts/content.php) — same aesthetic as
 * the homepage cards: white surface, indigo eyebrow, bold title that
 * shifts to indigo on hover, italic excerpt, muted meta, soft indigo
 * shadow on hover lift. Used on /blog/, category, tag, search, etc. */
.fp-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.fp-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.12);
}
.fp-card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--c-soft); }
.fp-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-card__body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.fp-card__cat {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  text-decoration: none;
  margin-bottom: 6px;
}
.fp-card__title {
  margin: 0 0 8px;
  font-family: var(--f-head);
  font-size: 17px; font-weight: 800;
  line-height: 1.3;
}
.fp-card__title a { text-decoration: none; color: var(--c-ink); transition: color .15s; }
.fp-card:hover .fp-card__title a { color: var(--c-brand); }
.fp-card__excerpt {
  font-size: 13px;
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.55;
  margin-bottom: var(--s-3);
  flex: 1;
}
.fp-card__meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-muted);
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.fp-card__actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-3); gap: var(--s-2); flex-wrap: wrap; }
.fp-card--review .fp-rating { font-weight: 700; color: var(--c-accent); }

/* ---------- Article ---------- */
.fp-article { min-width: 0; }
.fp-article__header { margin: var(--s-5) 0; min-width: 0; }
.fp-article__title { margin: 0 0 var(--s-3); overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.fp-article__meta {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--c-muted); font-size: 14px;
  flex-wrap: wrap;
}
.fp-article__meta img { border-radius: 50%; width: 32px; height: 32px; }
.fp-article__meta .fp-meta-credentials { font-weight: 600; color: var(--c-brand-dark); }
.fp-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-muted);
}
.fp-views svg { flex-shrink: 0; }
.fp-article__meta .fp-meta-updated strong { color: var(--c-text); }
.fp-article__meta .fp-meta-original { font-size: 12px; opacity: 0.75; }
.fp-article__meta .fp-meta-published strong { color: var(--c-text); }
.fp-article__hero { margin: var(--s-5) 0; border-radius: var(--r-md); overflow: hidden; }

.fp-article__content {
  overflow-wrap: break-word;
  counter-reset: h2-counter;
}
.fp-article__content img,
.fp-article__content video,
.fp-article__content iframe,
.fp-article__content embed { max-width: 100%; height: auto; }
.fp-article__content > * + * { margin-top: var(--s-4); }

/* Heading numbering (H2 only) */
.fp-article__content h2 {
  counter-increment: h2-counter;
  margin-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-brand);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fp-article__content h2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-article__content h2::before {
  content: counter(h2-counter) ".";
  font-weight: 800;
}

.fp-article__content h3 {
  margin-top: var(--s-6);
}

.fp-article__content h4 {
  margin-top: var(--s-4);
}
.fp-article__content ul, .fp-article__content ol { padding-left: 1.25em; }
.fp-article__content blockquote {
  position: relative;
  border-left: 5px solid var(--c-brand);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  background: var(--c-soft);
  margin: var(--s-5) 0;
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-ink);
}
.fp-article__content blockquote::before {
  content: "";
  position: absolute; left: -5px; top: -8px;
  width: 28px; height: 4px;
  background: var(--c-accent);
  border-radius: 2px;
}
.fp-article__content img { border-radius: var(--r-md); }

/* WordPress and Gutenberg image alignment. */
.fp-article__content img.aligncenter,
.fp-article__content figure.aligncenter,
.fp-article__content .wp-block-image.aligncenter,
.fp-article__content .wp-block-image .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.fp-article__content figure.aligncenter > img,
.fp-article__content .wp-block-image.aligncenter img,
.fp-article__content .wp-block-image .aligncenter img {
  margin-left: auto;
  margin-right: auto;
}
.fp-article__content figure.aligncenter figcaption,
.fp-article__content .wp-block-image.aligncenter figcaption,
.fp-article__content .wp-block-image .aligncenter figcaption {
  text-align: center;
}
.fp-article__content pre {
  background: var(--c-ink); color: #F1F5F4;
  padding: var(--s-4); border-radius: var(--r-md);
  overflow-x: auto; font-size: 14px;
}
.fp-article__content code {
  background: var(--c-soft); padding: 2px 6px; border-radius: 4px;
  font-size: 0.93em;
}

/* ---------- Review template ---------- */
.fp-review__header {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-5); align-items: center;
  padding: var(--s-5);
  background: var(--c-soft);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
}
.fp-review__identity { display: flex; gap: var(--s-4); align-items: center; }
.fp-review__logo { max-width: 120px; height: auto; }
.fp-review__title { margin: 0; font-size: 26px; }
.fp-review__brand { color: var(--c-muted); font-weight: 500; }
.fp-rating--lg { font-size: 18px; font-weight: 700; color: var(--c-accent); margin-top: var(--s-2); }

.fp-review__bottom {
  padding: var(--s-4);
  border-left: 4px solid var(--c-brand);
  background: var(--c-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--s-5);
}

.fp-review__quick-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.fp-review__quick-facts span { display: block; font-size: 12px; color: var(--c-muted); text-transform: uppercase; }
.fp-review__quick-facts strong { font-size: 18px; font-family: var(--f-head); }

.fp-review__proscons {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-5) 0;
}
@media (max-width: 640px) { .fp-review__proscons { grid-template-columns: 1fr; } }

.fp-list { margin: 0; padding-left: 1.2em; }
.fp-list--pros li::marker { color: var(--c-success); }
.fp-list--cons li::marker { color: var(--c-danger); }

/* ---------- Pill / rating ---------- */
.fp-pill {
  display: inline-block;
  background: var(--c-brand); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase;   padding: 3px 10px; border-radius: 999px;
  margin-left: var(--s-2); vertical-align: middle;
}
/* Lime pill — for "New", "Free", "Hot" style flags. Always pairs with
 * dark text for AA contrast. */
.fp-pill--accent { background: var(--c-accent); color: #1E1B3A; font-weight: 800; }
.fp-pill--ghost  { background: rgba(79,70,229,0.10); color: var(--c-brand); }
.fp-rating { color: var(--c-brand); font-weight: 700; }

/* ---------- Content tables (inside articles) — brand-indigo head
 *   row + white text, white body cells with hairline rows, soft
 *   indigo hover. ---------- */
.fp-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
}
.fp-article__content table thead {
  background: var(--c-brand);
}
.fp-article__content table th,
.fp-article__content table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.fp-article__content table th {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 0;
}
.fp-article__content table tbody tr:last-child td {
  border-bottom: none;
}
.fp-article__content table tbody tr:hover {
  background: rgba(79, 70, 229, 0.04);
}
@media (max-width: 640px) {
  .fp-article__content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Comparison table ---------- */
.fp-comparison__title { margin: var(--s-6) 0 var(--s-3); }
.fp-comparison__wrap { overflow-x: auto; }
.fp-comparison {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 15px;
}
.fp-comparison th, .fp-comparison td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.fp-comparison th {
  background: var(--c-soft);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--c-muted);
}
.fp-comparison tr:last-child td { border-bottom: 0; }

/* ---------- Review card embed ---------- */
.fp-review-card {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--s-5);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  margin: var(--s-5) 0;
}
.fp-review-card__logo img { max-width: 120px; height: auto; }
.fp-review-card__body h3 { margin: 0 0 var(--s-2); }
.fp-review-card__bottom { color: var(--c-muted); margin: var(--s-2) 0; }
.fp-review-card__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-3); }
@media (max-width: 720px) {
  .fp-review-card { grid-template-columns: 1fr; }
  .fp-review-card__proscons { grid-template-columns: 1fr; }
}

/* ---------- Newsletter ---------- */
.fp-newsletter {
  background: #4F46E5;
  color: #fff;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  max-width: 680px; margin: 0 auto;
  text-align: center;
}
.fp-newsletter h3 { color: #fff; margin-bottom: var(--s-2); }
.fp-newsletter form {
  display: flex; gap: var(--s-2);
  margin-top: var(--s-4); flex-wrap: wrap;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.fp-newsletter input[type="email"] {
  flex: 1 1 220px;
  padding: 12px 14px;
  border: 0; border-radius: var(--r-md);
  font-size: 15px;
}

/* ---------- Cookie consent banner ---------- */
.fp-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9100;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--s-4);
  animation: fp-cookie-slide-up 0.3s ease-out;
}
.fp-cookie-banner[hidden] { display: none; }
.fp-cookie-banner__text {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
}
.fp-cookie-banner__text a { color: var(--c-brand); text-decoration: underline; }
.fp-cookie-banner__buttons {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.fp-cookie-banner__buttons .fp-btn {
  padding: 8px 18px !important;
  font-size: 13px !important;
}
@media (max-width: 480px) {
  .fp-cookie-banner__buttons { justify-content: stretch; }
  .fp-cookie-banner__buttons .fp-btn { flex: 1; }
}
@keyframes fp-cookie-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Sticky mobile CTA bar (bottom of viewport on phones) ---------- */
.fp-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: #fff;
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 10px 12px env(safe-area-inset-bottom, 12px);
  animation: fp-cta-slide-up 0.25s ease-out;
}
.fp-sticky-cta[hidden] { display: none; }
.fp-sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fp-sticky-cta__label {
  flex: 1;
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-text);
  min-width: 0;
}
.fp-sticky-cta__label strong {
  display: block;
  font-size: 15px;
}
.fp-sticky-cta__btn {
  flex-shrink: 0;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
@media (max-width: 719px) {
  .fp-sticky-cta:not([hidden]) { display: block; }
  /* Push footer up so sticky bar doesn't cover it */
  body.has-sticky-cta { padding-bottom: 70px; }
}
@keyframes fp-cta-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---------- Reading progress bar ---------- */
.fp-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.fp-progress-bar__fill {
  height: 100%;
  width: 0;
  background: var(--c-brand);
  transition: width 0.05s linear;
}

/* ---------- FAQ accordion ---------- */
.fp-faq {
  margin: var(--s-6) 0;
  border-top: 1px solid var(--c-border);
}
.fp-faq__item {
  border-bottom: 1px solid var(--c-border);
}
.fp-faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  position: relative;
  padding-right: 32px;
}
.fp-faq__q::-webkit-details-marker { display: none; }
.fp-faq__q::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--c-muted);
  transition: transform 0.2s;
}
details[open] > .fp-faq__q::after {
  content: "−";
}
.fp-faq__q:hover { color: var(--c-brand); }
.fp-faq__a {
  padding: 0 0 var(--s-4);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.6;
}
.fp-faq__a > p:first-child { margin-top: 0; }
.fp-faq__a > p:last-child  { margin-bottom: 0; }

/* ---------- FTC disclosure inline ---------- */
.fp-disclosure {
  font-size: 13px;
  color: var(--c-muted);
  border-left: 3px solid var(--c-border);
  padding: var(--s-2) var(--s-4);
  background: var(--c-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: var(--s-5) 0;
}
.fp-disclosure--callout {
  background: #FFFBEB;
  border-left-color: var(--c-accent);
  color: #7C2D12;
}

/* ---------- Related calculator suggestion (auto inserted in single posts) ---------- */
.fp-related-calc {
  margin: var(--s-7) 0 var(--s-6);
  padding: var(--s-5);
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDFA 100%);
  border: 1px solid #A7F3D0;
  border-radius: var(--r-md);
  position: relative;
}
.fp-related-calc__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-brand-dark);
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #A7F3D0;
  margin-bottom: var(--s-3);
}
.fp-related-calc__body {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  margin-bottom: var(--s-4);
}
.fp-related-calc__icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}
.fp-related-calc__title {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--c-text);
}
.fp-related-calc__desc {
  margin: 0;
  color: var(--c-muted);
  line-height: 1.5;
  font-size: 15px;
}
.fp-related-calc__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* ---------- Why trust us box (at end of every blog post / review) ---------- */
/* "Why trust Finance Pulse" box — brand-indigo accents replace the
 * old dark-ink ones so it lines up with the rest of the Fintech Lab
 * surfaces (newsletter band, calc result panel, etc). */
.fp-trust {
  margin: var(--s-7) 0 var(--s-5);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fp-trust::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-brand) 0%, var(--c-accent) 100%);
  z-index: 1;
}
.fp-trust__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.fp-trust__badge {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--c-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.25);
}
.fp-trust__badge svg { width: 24px; height: 24px; }
.fp-trust__eyebrow {
  display: block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 4px;
}
.fp-trust__heading {
  margin: 0;
  font-family: var(--f-head);
  font-size: 20px; font-weight: 800;   color: var(--c-ink);
}
.fp-trust__list {
  list-style: none; padding: 0; margin: 0 0 var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.fp-trust__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--c-text);
}
.fp-trust__check {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.10);
  color: var(--c-brand);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.fp-trust__check svg { width: 13px; height: 13px; }
.fp-trust__list li:hover .fp-trust__check {
  background: var(--c-accent);
  color: #1E1B3A;
  transform: scale(1.06);
}
.fp-trust__list strong { color: var(--c-ink); font-weight: 800; }
.fp-trust__footer {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-muted);
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
}
.fp-trust__footer a {
  color: var(--c-brand);
  text-decoration: none;
  font-weight: 700;
  transition: color .15s;
}
.fp-trust__footer a:hover { color: var(--c-brand-dark); text-decoration: underline; }

/* ---------- Author card ---------- */
.fp-author-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-4); align-items: start;
  padding: var(--s-5);
  background: var(--c-soft);
  border-radius: var(--r-md);
  margin-top: var(--s-7);
}
.fp-author-card__avatar img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; }
.fp-author-card__name { margin: 0 0 var(--s-1); font-size: 17px; }
.fp-author-card__credentials { font-weight: 600; color: var(--c-brand-dark); }
.fp-author-card__title { margin: 0 0 var(--s-2); font-size: 13px; color: var(--c-muted); }
.fp-author-card__bio { margin: 0 0 var(--s-2); font-size: 14px; }
.fp-author-card__socials { margin: 0; font-size: 13px; display: flex; gap: var(--s-3); flex-wrap: wrap; }
.fp-author-card__socials a { color: var(--c-brand); text-decoration: none; }
.fp-author-card__socials a:hover { text-decoration: underline; }

/* ---------- Author archive page (author.php) — 20_02 redesign
 *   Brand-indigo hero card + lattice + lime accent strip, meta strip
 *   with years experience + expertise pills, then the post grid.
 * ---------- */
.fp-author { padding: 0 0 var(--s-7); }
.fp-author .fp-breadcrumb { margin: var(--s-4) 0 var(--s-3); }

.fp-author-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--c-brand);
  color: #fff;
  border-radius: 16px;
  padding: var(--s-7) var(--s-6);
  margin: 0 0 var(--s-4);
  overflow: hidden;
  isolation: isolate;
}
.fp-author-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-author-hero__avatar { margin: 0 0 22px; }
.fp-author-hero__avatar img,
.fp-author-hero__img {
  width: 144px !important;
  height: 144px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 4px solid var(--c-accent);
  background: #fff;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.30);
}
.fp-author-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 64ch;
  width: 100%;
}
.fp-author-hero__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 8px;
}
.fp-author-hero__name {
  font-family: var(--f-head);
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px;
}
.fp-author-hero__credentials {
  font-size: 0.55em;
  font-weight: 800;
  color: var(--c-accent);
  vertical-align: middle;
}
.fp-author-hero__bio {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin: 0 0 20px;
}
.fp-author-hero__bio p { margin: 0 0 10px; }
.fp-author-hero__bio p:last-child { margin: 0; }
.fp-author-hero__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.fp-author-hero__socials a {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.fp-author-hero__socials a:hover {
  background: var(--c-accent);
  color: var(--c-ink);
  border-color: var(--c-accent);
}

.fp-author-meta {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  margin: 0 0 var(--s-6);
}
.fp-author-meta__cell {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px 22px;
}
.fp-author-meta__cell--stat { display: flex; flex-direction: column; justify-content: center; }
.fp-author-meta__n {
  font-family: var(--f-head);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 800;
  color: var(--c-brand);
  line-height: 1;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.fp-author-meta__l {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0;
}
.fp-author-meta__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 10px;
}
.fp-author-meta__pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fp-author-meta__pills li {
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  color: var(--c-brand);
  background: rgba(79, 70, 229, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
}

.fp-author-posts__head { margin: 0 0 var(--s-4); }
.fp-author-posts__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 4px;
}
.fp-author-posts__title {
  font-family: var(--f-head);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 720px) {
  .fp-author-hero { padding: var(--s-6) var(--s-5); }
  .fp-author-hero__avatar img,
  .fp-author-hero__img { width: 120px !important; height: 120px !important; }
  .fp-author-meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fp-author-card { grid-template-columns: 1fr; text-align: center; }
  .fp-author-card__socials { justify-content: center; }
}

/* ---------- Breadcrumbs ---------- */
.fp-breadcrumb { font-size: 13px; color: var(--c-muted); margin-top: var(--s-4); }
.fp-breadcrumb ol { display: flex; gap: var(--s-2); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.fp-breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-muted); }
.fp-breadcrumb a { color: var(--c-muted); text-decoration: none; }
.fp-breadcrumb a:hover { color: var(--c-brand-dark); }

/* ---------- Archive header ---------- */
.fp-archive-header, .fp-page-header {
  margin: var(--s-5) 0 var(--s-6);
}
.fp-page-title { margin-bottom: var(--s-2); }

/* ---------- Sidebar ---------- */
.fp-sidebar { min-width: 0; }
.fp-sidebar img { max-width: 100%; height: auto; }
.fp-sidebar .widget {
  margin-bottom: var(--s-5);
  padding: var(--s-3);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.fp-sidebar .widget-title {
  margin-top: 0;
  margin-bottom: var(--s-3);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-sidebar ul, .fp-sidebar ol { list-style: none; padding: 0; margin: 0; }
.fp-sidebar li + li { margin-top: var(--s-2); }

/* Trending posts widget */
.fp-widget-trending__list { counter-reset: trending; }
.fp-widget-trending__item {
  display: flex;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.fp-widget-trending__item:last-child { border-bottom: 0; }
.fp-widget-trending__rank {
  font-size: 24px;
  font-weight: 800;
  color: var(--c-brand);
  line-height: 1;
  min-width: 24px;
  text-align: center;
}
.fp-widget-trending__body { flex: 1; min-width: 0; }
.fp-widget-trending__title {
  display: block;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 4px;
}
.fp-widget-trending__title:hover { color: var(--c-brand); }
.fp-widget-trending__meta {
  font-size: 12px;
  color: var(--c-muted);
}

/* Top reviews widget */
.fp-widget-reviews__list li { margin: 0 !important; }
.fp-widget-reviews__item + .fp-widget-reviews__item {
  border-top: 1px solid var(--c-border);
}
.fp-widget-reviews__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  text-decoration: none;
  color: var(--c-text);
  font-size: 14px;
}
.fp-widget-reviews__link:hover { color: var(--c-brand); }
.fp-widget-reviews__link strong { font-weight: 600; }
.fp-widget-reviews__rating {
  flex-shrink: 0;
  color: var(--c-brand-dark);
  font-weight: 700;
  font-size: 13px;
}
.fp-widget-reviews__more {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand);
  text-decoration: none;
}
.fp-widget-reviews__more:hover { text-decoration: underline; }

/* Categories widget */
.fp-widget-categories__list li { margin: 0 !important; }
.fp-widget-categories__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.fp-widget-categories__list a:hover {
  background: var(--c-soft);
  color: var(--c-ink);
  padding-left: 14px;
}
.fp-widget-categories__count {
  background: var(--c-soft);
  color: var(--c-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.fp-widget-categories__list a:hover .fp-widget-categories__count {
  background: var(--c-ink);
  color: var(--c-bg);
}

/* Safety net: hide WordPress' default Recent Posts / Recent Comments widgets
   (also unregistered in inc/setup.php). */
.fp-sidebar .widget_recent_entries,
.fp-sidebar .widget_recent_comments { display: none; }

/* ---------- Table of Contents (left column) ---------- */
.fp-toc {
  display: none; /* hidden on mobile */
}
@media (min-width: 960px) {
  .fp-toc {
    display: block;
  }
  .fp-toc__inner {
    /* The sticky header (.fp-header top + nav rows) measures roughly
     * 150px on desktop. The TOC sticks below it with a small gap so
     * the first item is never clipped while the user scrolls.
     * Dark brand-indigo surface with lattice texture to match the
     * rest of the brand family (calchero, ed-process, ed-contact). */
    position: relative;
    position: sticky;
    top: 160px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 18px 16px;
    background: var(--c-brand);
    border-radius: 12px;
    color: #fff;
    isolation: isolate;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    background-color: var(--c-brand);
  }
  /* Light scrollbar to read on dark indigo. */
  .fp-toc__inner::-webkit-scrollbar { width: 6px; }
  .fp-toc__inner::-webkit-scrollbar-track { background: transparent; }
  .fp-toc__inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); border-radius: 3px; }
  .fp-toc__inner::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.40); }
  /* When the WP admin bar is showing it pushes the viewport down by
   * 32px, so the sticky offset has to push down too. */
  .admin-bar .fp-toc__inner {
    top: 192px;
    max-height: calc(100vh - 212px);
  }
}
.fp-toc__title {
  margin: 0 0 12px;
  padding: 0 0 10px;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.fp-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fp-toc__item + .fp-toc__item { margin-top: 2px; }
.fp-toc__item--sub { padding-left: var(--s-3); }
.fp-toc__link {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color .12s, border-color .12s, background .12s;
}
.fp-toc__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border-left-color: rgba(255, 255, 255, 0.50);
}
.fp-toc__link--active {
  color: var(--c-accent);
  background: rgba(199, 242, 48, 0.12);
  border-left-color: var(--c-accent);
  font-weight: 800;
}

/* ---------- Pagination ---------- */
.navigation.pagination { margin: var(--s-7) 0; }
.pagination .page-numbers {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  margin: 0 2px; text-decoration: none; color: var(--c-ink);
}
.pagination .current { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

/* ---------- Footer ---------- */
.fp-footer {
  background: #4F46E5; color: #fff;
  padding: 0 0 var(--s-5);
  margin-top: var(--s-8);
  border-top: 4px solid var(--c-accent);
  font-size: 14.5px;
  line-height: 1.55;
}
.fp-footer a {
  color: #fff;
  text-decoration: none;
  transition: color .15s;
}
.fp-footer a:hover { color: var(--c-accent); }

/* ───── Hero band: large newsletter capture (Option 1 layout).
 *   No bg overlay or border-bottom: the band sits on the same indigo
 *   surface as the rest of the footer so the whole footer reads as a
 *   single block. ───── */
.fp-footer__hero {
  padding: var(--s-7) 0;
  margin-bottom: var(--s-7);
}
.fp-footer__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.fp-footer__hero-title {
  font-family: var(--f-head);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 8px;
}
.fp-footer__hero-lead {
  font-size: 15px;
  opacity: 0.88;
  margin: 0;
  line-height: 1.55;
  max-width: 46ch;
}
.fp-footer__hero-form { width: 100%; }
.fp-footer__hero-form form,
.fp-footer__nl-form {
  display: flex; gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}
.fp-footer__hero-form input[type="email"],
.fp-footer__nl-form input[type="email"] {
  flex: 1;
  padding: 13px 16px;
  border: 1.5px solid rgba(255,255,255,0.30);
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.fp-footer__hero-form input[type="email"]::placeholder,
.fp-footer__nl-form input[type="email"]::placeholder { color: rgba(255,255,255,0.60); }
.fp-footer__hero-form input[type="email"]:focus,
.fp-footer__nl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(255,255,255,0.18);
}
.fp-footer__hero-form button,
.fp-footer__nl-form button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--c-accent);
  color: #1E1B3A;
  border: none;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.fp-footer__hero-form button:hover,
.fp-footer__nl-form button:hover { background: #B0DA1E; transform: translateY(-1px); }
.fp-footer__hero-form button svg,
.fp-footer__nl-form button svg { width: 14px; height: 14px; }

/* ───── Top band (compact brand + nav columns) ───── */
.fp-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(auto, 1.8fr);
  gap: var(--s-7);
  margin-bottom: var(--s-6);
}

/* Brand block (compact: wordmark + socials only) */
.fp-footer__logo {
  display: inline-block;
  font-family: var(--f-head); font-size: 26px; font-weight: 700;
  color: #fff !important; line-height: 1;
  margin-bottom: var(--s-3);
}
.fp-footer__logo strong { color: var(--c-accent); font-weight: 800; }
.fp-footer__mission {
  margin: 0 0 var(--s-4);
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.92;
  max-width: 38ch;
}
.fp-footer__socials {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.fp-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #fff !important;
  transition: background .15s, color .15s, transform .15s;
}
.fp-footer__socials a:hover {
  background: var(--c-accent);
  color: #1E1B3A !important;
  transform: translateY(-2px);
}
.fp-footer__socials svg { width: 18px; height: 18px; }

/* Nav columns: 3 columns, auto-flow on smaller widths */
.fp-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.fp-footer__col-title {
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;   text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--s-3);
}
.fp-footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fp-footer__col li a {
  font-size: 14.5px;
  opacity: 0.92;
}
.fp-footer__col li a:hover { opacity: 1; }

/* Divider between top and bottom band */
.fp-footer__divider {
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: 0 auto var(--s-4);
}

/* Bottom band: copy | legal | back-to-top */
.fp-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) 0 var(--s-4);
}
.fp-footer__copy {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}
.fp-footer__legal-list {
  display: flex; gap: var(--s-4); list-style: none; padding: 0; margin: 0;
  font-size: 13px;
}
.fp-footer__legal-list a { opacity: 0.85; }
.fp-footer__legal-list a:hover { opacity: 1; }
.fp-footer__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.fp-footer__back:hover {
  background: var(--c-accent);
  color: #1E1B3A !important;
  border-color: var(--c-accent);
}
.fp-footer__back svg { width: 14px; height: 14px; }

/* Legal block — disclaimers below everything */
.fp-footer__legal-block {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.fp-footer__disclaimer {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.80;
}
.fp-footer__disclaimer strong { opacity: 1; font-weight: 700; }
.fp-footer__disclaimer a {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.45);
}
.fp-footer__disclaimer a:hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}

/* Tablet: hero stacks vertically, brand stacks above nav cols, 3 cols stay */
@media (max-width: 900px) {
  .fp-footer__hero-inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .fp-footer__hero-form form,
  .fp-footer__nl-form { margin-left: 0; max-width: none; }
  .fp-footer__top { grid-template-columns: 1fr; gap: var(--s-6); }
  .fp-footer__nav { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: nav becomes 2 cols, then 1 col on very small screens. Hero form
 * stacks vertically so button isn't cramped beside the input. */
@media (max-width: 600px) {
  .fp-footer__hero-form form,
  .fp-footer__nl-form { flex-direction: column; }
  .fp-footer__hero-form button,
  .fp-footer__nl-form button { width: 100%; justify-content: center; }
  .fp-footer__nav { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .fp-footer__bottom { justify-content: flex-start; }
  .fp-footer__back { margin-left: auto; }
}
@media (max-width: 420px) {
  .fp-footer__nav { grid-template-columns: 1fr; }
}

/* "Read the full guide" deep link from /calculators/ to landing pages */
.fp-tools-deep-link {
  margin: var(--s-3) 0 var(--s-2) !important;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDFA 100%);
  border-left: 3px solid var(--c-brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px;
}
.fp-tools-deep-link a {
  color: var(--c-brand-dark) !important;
  font-weight: 600;
  text-decoration: none;
}
.fp-tools-deep-link a:hover { text-decoration: underline; }

/* ---------- Calculator landing page ---------- */
.fp-calc-page {
  padding: var(--s-5) 0 var(--s-8);
}
.fp-calc-page__header {
  text-align: center;
  max-width: 720px;
  margin: var(--s-5) auto var(--s-6);
}
.fp-calc-page__title {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 var(--s-3);
}
.fp-calc-page__lead {
  font-size: 18px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}
.fp-calc-page__widget {
  max-width: 720px;
  margin: 0 auto var(--s-7);
}
.fp-calc-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-6);
  align-items: start;
}
.fp-calc-page__content h2 {
  margin-top: var(--s-7);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}
.fp-calc-page__content h2:first-child { margin-top: 0; }
.fp-calc-page__content code {
  background: var(--c-soft);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.95em;
  color: var(--c-brand-dark);
}
.fp-calc-page__example {
  margin: var(--s-5) 0;
  padding: var(--s-5);
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDFA 100%);
  border-left: 4px solid var(--c-brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.fp-calc-page__example h3 {
  margin: 0 0 var(--s-3);
  color: var(--c-brand-dark);
  font-size: 17px;
}
@media (max-width: 900px) {
  .fp-calc-page__layout { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.fp-404 { padding: var(--s-8) 0; }
.fp-404__hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-8);
}
.fp-404__code {
  font-size: clamp(80px, 18vw, 180px);
  font-weight: 800;
  line-height: 0.85;
  margin: 0 0 var(--s-3);
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fp-404__title {
  font-size: clamp(24px, 4vw, 36px);
  margin: 0 0 var(--s-3);
}
.fp-404__lead {
  font-size: 17px;
  color: var(--c-muted);
  margin-bottom: var(--s-5);
}
.fp-404__search {
  display: flex;
  gap: var(--s-2);
  max-width: 520px;
  margin: 0 auto var(--s-4);
}
.fp-404__search input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 15px;
}
.fp-404__search input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}
.fp-404__back {
  font-size: 14px;
  color: var(--c-muted);
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.fp-404__back a {
  color: var(--c-brand-dark);
  text-decoration: none;
  font-weight: 500;
}
.fp-404__back a:hover { text-decoration: underline; }

.fp-404__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  max-width: 880px;
  margin: 0 auto;
}
.fp-404__col {
  background: var(--c-soft);
  padding: var(--s-5);
  border-radius: var(--r-md);
}
.fp-404__col h2 {
  font-size: 18px;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}
.fp-404__list, .fp-404__categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fp-404__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
}
.fp-404__list li:last-child { border-bottom: 0; }
.fp-404__list a {
  color: var(--c-text);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
}
.fp-404__list a:hover { color: var(--c-brand); }
.fp-404__list span {
  color: var(--c-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.fp-404__categories li {
  border-bottom: 1px solid var(--c-border);
}
.fp-404__categories li:last-child { border-bottom: 0; }
.fp-404__categories a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 0;
  text-decoration: none;
  color: var(--c-text);
}
.fp-404__categories a:hover strong { color: var(--c-brand); }
.fp-404__categories strong { font-weight: 600; }
.fp-404__categories span { color: var(--c-muted); font-size: 12px; }

@media (max-width: 600px) {
  .fp-404__columns { grid-template-columns: 1fr; }
  .fp-404__search { flex-direction: column; }
}

/* ---------- Newsletter ---------- */
.fp-newsletter {
  background: var(--c-brand);
  color: #fff;
  padding: var(--s-6);
  border-radius: var(--r-md);
  margin: var(--s-7) auto;
  max-width: 900px;
  text-align: center;
}
.fp-newsletter h3 { color: #fff; margin: 0 0 var(--s-2); font-size: 20px; }
.fp-newsletter p { margin: 0 0 var(--s-4); opacity: 0.9; font-size: 15px; }
.fp-newsletter form {
  display: flex; gap: var(--s-2);
  max-width: 440px; margin: 0 auto;
}
.fp-newsletter input[type="email"] {
  flex: 1; padding: 12px 16px; border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--r-sm); background: rgba(255,255,255,0.15);
  color: #fff; font-size: 15px;
}
.fp-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,0.6); }
.fp-newsletter input[type="email"]:focus {
  outline: none; border-color: #fff; background: rgba(255,255,255,0.25);
}
.fp-newsletter .fp-btn--accent { flex-shrink: 0; padding: 12px 24px; font-weight: 700; }
/* Sidebar variant */
.fp-newsletter--sidebar {
  margin: 0 0 var(--s-5); padding: var(--s-4);
  background: var(--c-brand); text-align: left;
}
.fp-newsletter--sidebar h3 { font-size: 16px; }
.fp-newsletter--sidebar p { font-size: 13px; }
.fp-newsletter--sidebar form { flex-direction: column; }
.fp-newsletter--sidebar .fp-btn--accent { width: 100%; text-align: center; }
@media (max-width: 959px) {
  .fp-newsletter form { flex-direction: column; }
}

/* ---------- Related Posts ---------- */
.fp-related { margin: var(--s-7) 0; }
.fp-related__title {
  font-size: 20px; margin: 0 0 var(--s-4);
}
.fp-related__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) {
  .fp-related__grid { grid-template-columns: 1fr; }
}
.fp-related__card {
  text-decoration: none; color: var(--c-ink);
  border-radius: var(--r-md); overflow: hidden;
  background: var(--c-soft); transition: transform 0.15s, box-shadow 0.15s;
}
.fp-related__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.fp-related__thumb { aspect-ratio: 16/9; overflow: hidden; }
.fp-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-related__card-title {
  padding: var(--s-3); font-size: 15px; line-height: 1.4; margin: 0;
}

/* ---------- Social Share ---------- */
.fp-share {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-5) 0; padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.fp-share__label {
  font-size: 13px; font-weight: 600; color: var(--c-muted);
  margin-right: var(--s-1);
}
.fp-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 999px;
  background: var(--c-soft); color: var(--c-text);
  border: none; cursor: pointer; text-decoration: none;
  font-size: 13px; font-weight: 500; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.fp-share__btn:hover { background: var(--c-brand); color: #fff; }
.fp-share__copy { font-family: inherit; }
.fp-share__copy--success { background: var(--c-brand); color: #fff; }
@media (max-width: 480px) {
  .fp-share__btn { font-size: 12px; padding: 5px 10px; }
}

/* ---------- Reading Progress Bar ---------- */
.fp-progress {
  position: fixed; top: 0; left: 0;
  width: 0; height: 3px; z-index: 9999;
  background: var(--c-brand);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ---------- Utilities ---------- */
.fp-flex { display: flex; gap: var(--s-3); }
.fp-mt-5 { margin-top: var(--s-5); }
.fp-text-muted { color: var(--c-muted); }
/* ==========================================================================
   Finance Pulse — Patch: Newsletter fix + Comment form
   Append this to the bottom of style.css
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   FIX 1 · Newsletter sidebar — specificity bug
   Root cause: .fp-sidebar .widget (specificity 0,2,0) overrides
               .fp-newsletter--sidebar (specificity 0,1,0),
               resetting background to --c-soft while color stays #fff.
   Solution:   Raise specificity to match or beat .fp-sidebar .widget
   ──────────────────────────────────────────────────────────────────────────*/
.fp-sidebar .widget.fp-newsletter--sidebar,
.fp-sidebar .fp-newsletter--sidebar {
  background: #4F46E5;
  color: #fff;
}

/* Also lock sub-elements so nothing bleeds through */
.fp-sidebar .fp-newsletter--sidebar h3,
.fp-sidebar .fp-newsletter--sidebar p {
  color: #fff;
}

.fp-sidebar .fp-newsletter--sidebar .fp-btn--accent {
  background: #ffffff;
  color: #1E1B3A;
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX 2 · Comment form — full restyle using existing design tokens
   ──────────────────────────────────────────────────────────────────────────*/

/* Wrapper */
#comments {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 2px solid var(--c-border);
  max-width: var(--w-content);
}

/* "N Comments" heading */
.comments-title {
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 var(--s-5);
}

/* ── Comment list ── */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-7);
}
.comment-list .comment {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-border);
}
.comment-list .comment-author img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.comment-list .comment-meta {
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.comment-list .comment-body p {
  font-size: 15px;
  color: var(--c-ink);
  line-height: 1.65;
  margin: 0;
}
.comment-list .reply a {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand-dark);
  text-decoration: none;
  margin-top: var(--s-2);
  display: inline-block;
}
.comment-list .reply a:hover { text-decoration: underline; }

/* ── "Leave a Reply" heading ── */
#reply-title {
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 var(--s-2);
}
#reply-title small a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-muted);
  margin-left: var(--s-3);
}

/* Logged-in notice */
.comment-notes,
.logged-in-as {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0 0 var(--s-5);
}
.comment-notes a,
.logged-in-as a {
  color: var(--c-brand-dark);
}

/* ── Form layout ── */
#commentform {
  display: grid;
  gap: var(--s-4);
}

/* Per-field stacking on mobile + base spacing for label/input pairs */
.comment-form-author,
.comment-form-email {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 560px) {
  .comment-form-author,
  .comment-form-email { display: contents; }

  #commentform {
    grid-template-areas:
      "notes   notes"
      "comment comment"
      "author  email"
      "cookies cookies"
      "submit  submit";
    grid-template-columns: 1fr 1fr;
  }
  .comment-notes                { grid-area: notes; }
  .comment-form-comment         { grid-area: comment; }
  .comment-form-author          { grid-area: author; display: flex; flex-direction: column; gap: 6px; }
  .comment-form-email           { grid-area: email;  display: flex; flex-direction: column; gap: 6px; }
  .comment-form-cookies-consent { grid-area: cookies; }
  .form-submit                  { grid-area: submit; }
}

/* Labels */
#commentform label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Inputs + textarea — match existing fp-search / form style */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-soft);
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  resize: vertical;
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 27, 58, 0.10);
}

#commentform textarea {
  min-height: 140px;
}

/* Cookie checkbox */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--c-brand);
  flex-shrink: 0;
}
.comment-form-cookies-consent label {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: var(--c-muted);
  line-height: 1.5;
}

/* ── Submit button — reuse .fp-btn--primary style ── */
.form-submit { margin: 0; }
#commentform #submit {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 24px;
  background: var(--c-brand);
  color: #fff;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(30, 27, 58, 0.18);
  transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
}
#commentform #submit:hover {
  background: var(--c-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30, 27, 58, 0.26);
}
#commentform #submit:active {
  transform: translateY(0);
}

/* ====================================================================
   Homepage — "Let's grow your money" editorial band + Popular Guides
   Self-contained, scoped under .fp-grow (warm cream + black, agency style)
   ==================================================================== */
.fp-grow {
  background: #F4F1EC;
  padding: 64px 0;
}
.fp-grow__lead {
  display: grid;
  grid-template-columns: 0.85fr 1.1fr 1.25fr;
  gap: 28px;
  margin-bottom: 56px;
}
.fp-grow__cover h4,
.fp-grow__feat h4 {
  font-size: 12px; text-transform: uppercase;
  color: #6E6A63; font-weight: 700; margin: 0 0 16px;
}
.fp-grow__cover ul { list-style: none; margin: 0; padding: 0; }
.fp-grow__cover li { padding: 8px 0; }
.fp-grow__cover a {
  font-size: 18px; font-weight: 600; color: #1E1B3A; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; transition: transform .18s;
}
.fp-grow__cover a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #4F46E5; opacity: .35; transition: .18s; flex: none;
}
.fp-grow__cover a:hover { transform: translateX(4px); }
.fp-grow__cover a:hover::before { opacity: 1; }

.fp-grow__feat h2 {
  font-family: var(--f-head);
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; font-weight: 800;
  color: #1E1B3A; margin: 0 0 14px;
}
.fp-grow__feat p { color: #6E6A63; font-size: 15.5px; margin: 0 0 22px; max-width: 42ch; }

.fp-grow__pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #4F46E5; color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14.5px; padding: 13px 24px; border-radius: 999px;
  transition: .18s;
}
.fp-grow__pill:hover { background: #2A2825; transform: translateY(-2px); color: #fff; }
.fp-grow__pill--light { background: #fff; color: #1E1B3A; }
.fp-grow__pill--light:hover { background: #f2f2f2; color: #1E1B3A; }

.fp-grow__cta {
  background: #4F46E5; border-radius: 20px; padding: 38px 36px; color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; min-height: 260px;
}
.fp-grow__cta::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}
.fp-grow__cta h3 {
  color: #fff; /* override the global "h1–h4 = ink" rule on this dark card */
  font-family: var(--f-head); font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1;
  font-weight: 800; margin: 0 0 12px; position: relative;
}
.fp-grow__cta p { color: rgba(255,255,255,.7); font-size: 14.5px; margin: 0 0 24px; max-width: 34ch; position: relative; }
.fp-grow__cta .fp-grow__pill { align-self: flex-start; position: relative; }

.fp-grow__form { display: flex; gap: 10px; position: relative; flex-wrap: wrap; }
.fp-grow__form input {
  flex: 1; min-width: 160px; padding: 13px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10);
  color: #fff; font-size: 15px;
}
.fp-grow__form input::placeholder { color: rgba(255,255,255,.55); }
.fp-grow__form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.18); }
.fp-grow__form button {
  background: #fff; color: #1E1B3A; border: 0; font-weight: 700; font-size: 14.5px;
  padding: 13px 22px; border-radius: 999px; cursor: pointer; transition: .18s;
}
.fp-grow__form button:hover { background: #f0f0f0; }

.fp-grow__rowhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.fp-grow__rowtitle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fp-grow__rowtitle h2 {
  font-family: var(--f-head); font-size: clamp(24px, 3vw, 34px); font-weight: 800;
  color: #1E1B3A; margin: 0;
}
.fp-grow__badge {
  background: #EDE8E0; color: #1E1B3A; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; border: 1px solid #E2DCD2;
}
.fp-grow__viewall {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #E2DCD2; color: #1E1B3A; text-decoration: none;
  font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 999px; transition: .18s;
}
.fp-grow__viewall:hover { background: #4F46E5; color: #fff; }

.fp-grow__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.fp-grow__card {
  background: #fff; border: 1px solid #E2DCD2; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: .2s;
}
.fp-grow__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(30,27,58,.10); }
.fp-grow__card-img {
  display: block; aspect-ratio: 16 / 9; margin: 10px; border-radius: 12px;
  background: #EDE8E0 center / cover no-repeat;
}
.fp-grow__card-body { padding: 4px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.fp-grow__card-cat { font-size: 11px; text-transform: uppercase; color: #6E6A63; font-weight: 700; margin-bottom: 6px; }
.fp-grow__card-title { font-size: 16px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.fp-grow__card-title a { color: #1E1B3A; text-decoration: none; }
.fp-grow__card-title a:hover { text-decoration: underline; }
.fp-grow__card-desc { font-size: 13px; color: #6E6A63; flex: 1; margin: 0 0 14px; }
.fp-grow__card-foot { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6E6A63; }
.fp-grow__chip {
  display: inline-flex; align-items: center; gap: 5px; background: #F4F1EC;
  border: 1px solid #E2DCD2; padding: 5px 11px; border-radius: 999px; font-weight: 600; color: #2A2825;
}

@media (max-width: 1000px) {
  .fp-grow__lead { grid-template-columns: 1fr 1fr; }
  .fp-grow__cta { grid-column: 1 / -1; }
  .fp-grow__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .fp-grow__lead { grid-template-columns: 1fr; }
  .fp-grow__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .fp-grow__cards { grid-template-columns: 1fr; }
}

/* Dark mode: flip the cream band to a dark surface */
[data-theme="dark"] .fp-grow { background: #0b1020; }
[data-theme="dark"] .fp-grow__cover a,
[data-theme="dark"] .fp-grow__feat h2,
[data-theme="dark"] .fp-grow__rowtitle h2,
[data-theme="dark"] .fp-grow__card-title a { color: #f1f5f9; }
[data-theme="dark"] .fp-grow__cover a::before { background: #f1f5f9; }
[data-theme="dark"] .fp-grow__feat p,
[data-theme="dark"] .fp-grow__card-desc,
[data-theme="dark"] .fp-grow__card-cat,
[data-theme="dark"] .fp-grow__card-foot { color: #94a3b8; }
[data-theme="dark"] .fp-grow__card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .fp-grow__badge,
[data-theme="dark"] .fp-grow__viewall { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .fp-grow__viewall:hover { background: #f1f5f9; color: #0b1020; }
[data-theme="dark"] .fp-grow__chip { background: #0b1020; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .fp-grow__pill { background: #f1f5f9; color: #0b1020; }
[data-theme="dark"] .fp-grow__pill:hover { background: #fff; color: #0b1020; }

/* ====================================================================
   Magazine homepage layout (.fp-mag) — uses theme tokens so it adapts
   to dark mode automatically. Badges + newsletter box are fixed dark.
   ==================================================================== */
.fp-mag { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.fp-mag__main {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 28px;
}

/* Featured post — white card with full-bleed 16:9 hero, indigo
 * eyebrow, big title (shifts to indigo on hover), italic editor
 * note + " — Author" byline, light meta. Same aesthetic as the
 * Editor's Picks card, scaled up. */
.fp-mag-feat {
  display: block; text-decoration: none; color: inherit;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.fp-mag-feat:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.14);
}
.fp-mag-feat__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-soft); }
.fp-mag-feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.fp-mag-feat:hover .fp-mag-feat__media img { transform: scale(1.03); }
.fp-mag-badge { position: absolute; top: 16px; left: 16px; background: var(--c-accent); color: #1E1B3A; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; }
.fp-mag-feat__cat {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 22px 24px 6px;
}
.fp-mag-feat__title {
  font-family: var(--f-head);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18; font-weight: 800;
  margin: 0 24px 10px;
  color: var(--c-ink);
  transition: color .15s;
}
.fp-mag-feat:hover .fp-mag-feat__title { color: var(--c-brand); text-decoration: none; }
.fp-mag-feat__exc {
  font-size: 14.5px;
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 24px 10px;
  max-width: 62ch;
}
.fp-mag-feat__byline { font-style: normal; font-weight: 700; color: var(--c-ink); }
.fp-mag-feat__meta {
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  margin: 0 24px 22px;
}

.fp-mag-rule { height: 1px; background: var(--c-border); margin: 22px 0; border: 0; }

/* Horizontal post — side-by-side layout. Thumb stays locked at 16/9
 * (no distortion) but the column is widened to 280px so the image
 * is tall enough (~158px) to read balanced next to the title +
 * excerpt + meta stack. */
.fp-mag-hpost {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: center;
  text-decoration: none; color: inherit;
}
.fp-mag-hpost__media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-soft);
  aspect-ratio: 16 / 9;
}
.fp-mag-hpost__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-mag-hpost__cat {
  font-family: var(--f-head);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 6px;
}
.fp-mag-hpost__title {
  font-family: var(--f-head);
  font-size: 19px; line-height: 1.25; font-weight: 800;
  margin: 0 0 8px;
  color: var(--c-ink);
  transition: color .15s;
}
.fp-mag-hpost:hover .fp-mag-hpost__title { color: var(--c-brand); text-decoration: none; }
.fp-mag-hpost__exc {
  font-size: 13px;
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 0 6px;
}
.fp-mag-hpost__byline { font-style: normal; font-weight: 700; color: var(--c-ink); }
.fp-mag-hpost__meta {
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 500;
  margin: 0;
}

/* Section header */
.fp-mag-sec { display: flex; align-items: center; justify-content: space-between; margin: 34px 0 18px; }
.fp-mag-sec h2 { font-family: var(--f-head); font-size: 22px; font-weight: 800; margin: 0; color: var(--c-ink); }
.fp-mag-sec a { font-size: 13px; font-weight: 600; color: var(--c-muted); text-decoration: none; }
.fp-mag-sec a:hover { color: var(--c-ink); }

/* Card grid (Latest Guides + similar) — white card with full-bleed
 * 16:9 hero, indigo eyebrow, bold title (indigo on hover), italic
 * editor note + " — Author" byline, meta. Same aesthetic as the
 * featured + edpicks cards. */
.fp-mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fp-mag-card {
  text-decoration: none; color: inherit; display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.fp-mag-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.12);
}
.fp-mag-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-soft); }
.fp-mag-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-mag-card__cat {
  font-family: var(--f-head);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 14px 16px 4px;
}
.fp-mag-card__title {
  font-family: var(--f-head);
  font-size: 16px; line-height: 1.3; font-weight: 800;
  margin: 0 16px 8px;
  color: var(--c-ink);
  transition: color .15s;
}
.fp-mag-card:hover .fp-mag-card__title { color: var(--c-brand); text-decoration: none; }
.fp-mag-card__exc {
  font-size: 12.5px;
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 16px 8px;
}
.fp-mag-card__byline { font-style: normal; font-weight: 700; color: var(--c-ink); }
.fp-mag-card__meta {
  color: var(--c-muted);
  font-size: 11.5px;
  font-weight: 500;
  margin: 0 16px 16px;
}
.fp-mag-card__rating { color: var(--c-ink); font-weight: 800; }

/* Sidebar */
.fp-mag__aside > section { margin-bottom: 34px; }
.fp-mag-news { background: #4F46E5; border-radius: 14px; padding: 22px; color: #fff; }
.fp-mag-news h4 { font-family: var(--f-head); font-size: 17px; font-weight: 800; margin: 0 0 8px; color: #fff; }
.fp-mag-news p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0 0 14px; }
.fp-mag-news form { display: flex; gap: 8px; }
.fp-mag-news input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 14px; }
.fp-mag-news input::placeholder { color: rgba(255,255,255,.55); }
.fp-mag-news button { background: #fff; color: #1E1B3A; border: 0; font-weight: 700; padding: 11px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.fp-mag-news__link { display: inline-block; background: #fff; color: #1E1B3A; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 999px; text-decoration: none; }

.fp-mag-ahead { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--c-ink); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--c-ink); }

.fp-mag-top { counter-reset: t; display: flex; flex-direction: column; gap: 14px; }
.fp-mag-top a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.fp-mag-top a::before { counter-increment: t; content: counter(t); font-family: var(--f-head); font-weight: 800; font-size: 22px; color: var(--c-border); }
.fp-mag-top h5 { font-family: var(--f-head); font-size: 14px; line-height: 1.3; font-weight: 600; margin: 0; color: var(--c-ink); }
.fp-mag-top a:hover h5 { text-decoration: underline; }

.fp-mag-plist { display: flex; flex-direction: column; gap: 16px; }
.fp-mag-plist a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.fp-mag-plist__media { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--c-soft); }
.fp-mag-plist__media img { width: 100%; height: 100%; object-fit: cover; }
.fp-mag-plist__cat { color: var(--c-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.fp-mag-plist__title { font-family: var(--f-head); font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--c-ink); }
.fp-mag-plist a:hover .fp-mag-plist__title { text-decoration: underline; }

.fp-mag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-mag-chips a { border: 1px solid var(--c-border); background: var(--c-card); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--c-ink); text-decoration: none; }
.fp-mag-chips a:hover { background: var(--c-ink); color: var(--c-card); border-color: var(--c-ink); }

@media (max-width: 900px) {
  .fp-mag { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .fp-mag-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .fp-mag-grid { grid-template-columns: 1fr; }
  .fp-mag-hpost { grid-template-columns: 1fr; }
}

/* ====================================================================
   Homepage — "Where do you want to start?" goal cards
   Clean editorial cards: numbered tag + bold name + count + desc + arrow.
   ==================================================================== */
.fp-goals__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.fp-goal {
  display: block;
  padding: 26px 26px 28px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fp-goal:hover {
  transform: translateY(-3px);
  border-color: var(--c-ink);
  box-shadow: 0 14px 30px rgba(0,0,0,.07);
}
.fp-goal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.fp-goal__num {
  font-family: var(--f-head); font-weight: 800;
  font-size: 12px;   color: var(--c-muted);
  background: var(--c-soft); padding: 6px 11px; border-radius: 999px;
}
.fp-goal__arrow {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-soft); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.fp-goal__arrow svg { width: 15px; height: 15px; }
.fp-goal:hover .fp-goal__arrow { background: var(--c-ink); color: var(--c-bg); transform: translate(2px, -2px); }
.fp-goal__title {
  font-family: var(--f-head); font-size: 26px; font-weight: 800;
  line-height: 1.15;   margin: 0 0 6px; color: var(--c-ink);
}
.fp-goal:hover .fp-goal__title { text-decoration: underline; }
.fp-goal__meta {
  font-size: 11px; font-weight: 700;   text-transform: uppercase; color: var(--c-muted);
  margin: 0 0 14px;
}
.fp-goal__desc {
  font-size: 14px; line-height: 1.55; color: var(--c-muted); margin: 0;
}

@media (max-width: 540px) {
  .fp-goal { padding: 22px; }
  .fp-goal__title { font-size: 22px; }
  .fp-goal__top { margin-bottom: 20px; }
}

/* ====================================================================
   Homepage hero slider (.fp-hslider) — filmstrip style, most-viewed posts
   ==================================================================== */
.fp-section--hero { padding-top: var(--s-5); padding-bottom: var(--s-6); }
.fp-hslider { display: flex; align-items: stretch; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 46px rgba(0,0,0,.16); }
.fp-hslider__data { display: none; }

/* Main panel is exactly 16:9 so the featured image shows in full (no crop) */
.fp-hslider__main { flex: 0 0 62%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #4F46E5; color: #fff; }
.fp-hslider__main::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,0) 70%),
              linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 42%);
  transition: opacity .4s ease;
}
.fp-hslider__main:hover::after { opacity: .65; }
.fp-hslider__mainlink { position: absolute; inset: 0; z-index: 2; }

/* Image layer (so it can zoom on hover without bleeding past the panel) */
.fp-hslider__img { position: absolute; inset: 0; z-index: 0; background: #4F46E5 center / cover no-repeat; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.fp-hslider__main:hover .fp-hslider__img,
.fp-hslider__prev:hover .fp-hslider__img { transform: scale(1.07); }
.fp-hslider__top { position: absolute; top: 22px; left: 26px; right: 26px; z-index: 3; pointer-events: none; }
.fp-hslider__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.9); }
.fp-hslider__arrows { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 14px; }
.fp-hslider__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s; }
.fp-hslider__arrow:hover { background: rgba(255,255,255,.22); }
.fp-hslider__arrow svg { width: 16px; height: 16px; }
.fp-hslider__cap { position: absolute; left: 26px; right: 26px; bottom: 60px; z-index: 3; pointer-events: none; }
.fp-hslider__title { font-family: var(--f-head); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.02; margin: 0; color: #fff; }
.fp-hslider__count { position: absolute; left: 26px; bottom: 22px; z-index: 3; pointer-events: none; font-family: var(--f-head); font-weight: 700; font-size: 14px; color: #fff; }
.fp-hslider__count b { font-size: 24px; }
.fp-hslider__count span { color: rgba(255,255,255,.6); }
.fp-hslider__progress { position: absolute; left: 92px; right: 26px; bottom: 31px; z-index: 3; height: 2px; background: rgba(255,255,255,.25); }
.fp-hslider__progress span { display: block; height: 100%; background: #fff; transition: width .4s ease; }

.fp-hslider__prev { flex: 1; position: relative; background: #4F46E5 center / cover no-repeat; color: #fff; overflow: hidden; text-decoration: none; }
.fp-hslider__prev::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,18,20,.06), rgba(18,18,20,.28)); transition: background .3s ease; }
.fp-hslider__prev:hover::after { background: linear-gradient(180deg, rgba(18,18,20,.32), rgba(18,18,20,.84)); }
/* Preview text reveals only on hover — clean image by default */
.fp-hslider__plabel, .fp-hslider__read { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.fp-hslider__prev:hover .fp-hslider__plabel,
.fp-hslider__prev:hover .fp-hslider__read { opacity: 1; transform: translateY(0); }
.fp-hslider__plabel { position: absolute; top: 22px; left: 20px; right: 20px; z-index: 2; }
.fp-hslider__pcat { font-size: 12px; color: rgba(255,255,255,.72); margin-bottom: 8px; }
.fp-hslider__ptitle { font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.18; color: #fff; }
.fp-hslider__read { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; font-weight: 700; text-transform: uppercase; color: #fff; }
.fp-hslider__read svg { width: 13px; height: 13px; }

@media (max-width: 820px) {
  .fp-hslider__prev { display: none; }
  .fp-hslider__main { flex: 1; }
}

/* ====================================================================
   Category archive — hero band + featured + topics
   ==================================================================== */
.fp-cathero { background: #4F46E5; color: #fff; padding: var(--s-7) 0 var(--s-6); margin-bottom: var(--s-7); }
.fp-cathero .fp-breadcrumb,
.fp-cathero .fp-breadcrumb * { color: rgba(255,255,255,.6); }
.fp-cathero .fp-breadcrumb a:hover { color: #fff; }
.fp-cathero__title { font-family: var(--f-head); font-size: clamp(30px, 5vw, 50px); font-weight: 800; margin: 12px 0 10px; color: #fff; }
.fp-cathero__desc { color: rgba(255,255,255,.75); max-width: 62ch; font-size: 16px; line-height: 1.6; }
.fp-cathero__desc p { margin: 0; }
.fp-cathero__meta { margin-top: 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Stacked featured (image on top, text below) so the title never gets
   cramped next to the image in the narrower content column. */
.fp-catfeat { display: block; margin-bottom: var(--s-6); text-decoration: none; color: inherit; }
.fp-catfeat__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-soft); margin-bottom: var(--s-4); }
.fp-catfeat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fp-catfeat:hover .fp-catfeat__media img { transform: scale(1.03); }
.fp-catfeat__tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 6px 11px; border-radius: 6px; }
.fp-catfeat__title { font-family: var(--f-head); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.2; margin: 0 0 10px; color: var(--c-ink); }
.fp-catfeat:hover .fp-catfeat__title { color: var(--c-brand-dark); }
.fp-catfeat__exc { color: var(--c-muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; max-width: 70ch; }
.fp-catfeat__meta { color: var(--c-muted); font-size: 13px; }

.fp-mag-chips--center { justify-content: center; }

/* Self-hosted subscribe form status message (forms sit on dark bands) */
.fp-subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-subscribe-msg { width: 100%; font-size: 13px; margin: 6px 0 0; }
.fp-subscribe-msg:empty { display: none; }
.fp-subscribe-msg.is-ok { color: #fff; font-weight: 600; }
.fp-subscribe-msg.is-err { color: #fca5a5; }

/* ---------- Sidebar: Recent posts (themed, with thumbnails) ---------- */
/* ─────────────────────────────────────────────────────────────────
 * Indigo brand surfaces — shared lattice texture
 *
 * Subtle 32px white grid pattern (5% alpha) layered behind any flat
 * indigo brand surface. Reuses the same pattern that ships on the
 * Trending Topics hero and the dark glass reviews section, so every
 * brand block reads as part of one family. Each surface gets
 * position: relative + isolation: isolate + overflow: hidden so the
 * pseudo doesn't bleed past rounded corners.
 * ─────────────────────────────────────────────────────────────── */
.fp-newsletter,
.fp-calchero,
.fp-cathero,
.fp-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fp-newsletter::before,
.fp-calchero::before,
.fp-cathero::before,
.fp-footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}

/* ─────────────────────────────────────────────────────────────────
 * Archive "Tools for this topic" — result-preview calc cards
 *
 * Same pattern as homepage Free Calculators (Option 3): card with
 * calc name + italic scenario + big indigo dollar result + Run-yours
 * CTA. No emoji icons. 3-col grid, responsive.
 * ─────────────────────────────────────────────────────────────── */
.fp-arc-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.fp-arc-tools__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fp-arc-tools__card:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.16);
}
.fp-arc-tools__name {
  font-family: var(--f-head);
  font-size: 15px; font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 6px;
}
.fp-arc-tools__scenario {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.5;
}
.fp-arc-tools__number {
  margin: 0 0 14px;
  font-family: var(--f-head);
  font-size: 30px; font-weight: 800;
  color: var(--c-brand);
  line-height: 1;
}
.fp-arc-tools__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-size: 13px; font-weight: 800;
  color: var(--c-brand);
}
.fp-arc-tools__cta svg { width: 13px; height: 13px; transition: transform .15s; }
.fp-arc-tools__card:hover .fp-arc-tools__cta svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .fp-arc-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fp-arc-tools__grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .fp-arc-tools__number { font-size: 26px; }
}

/* ─────────────────────────────────────────────────────────────────
 * Trending Topics hero band — top of the homepage
 *
 * Full-width indigo gradient with a lime corner glow and faint grid
 * lattice. Centered "Where do you want to start?" prompt followed
 * by 8 large category pills. First (highest article count) pill is
 * the lime "hot" treatment with a glow shadow.
 * ─────────────────────────────────────────────────────────────── */
.fp-trending {
  position: relative;
  padding: var(--s-7) 0;
  background:
    radial-gradient(circle at 88% -20%, rgba(199, 242, 48, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, #4F46E5 0%, #3730A3 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.fp-trending::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}

.fp-trending__head {
  text-align: center;
  margin-bottom: var(--s-5);
}
.fp-trending__eyebrow {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.fp-trending__title {
  font-family: var(--f-head);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
}
.fp-trending__lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
  line-height: 1.55;
  margin: 0 auto;
}

/* Forced 4-column grid so 8 pills always render as a balanced 4 + 4
 * instead of wrapping unevenly (e.g. 5 + 3 or 7 + 1) depending on
 * the longest topic name. */
.fp-trending__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 960px;
  margin: 0 auto;
}
.fp-trending__chip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  background: #fff;
  color: var(--c-brand);
  border-radius: 999px;
  font-family: var(--f-head);
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.fp-trending__chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
  color: var(--c-brand-dark);
}
.fp-trending__chip-icon { font-size: 16px; line-height: 1; }
.fp-trending__chip-name { white-space: nowrap; }
.fp-trending__chip-count {
  background: rgba(79, 70, 229, 0.12);
  color: var(--c-brand);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* "Hot" — top-count category gets the lime treatment with glow */
.fp-trending__chip--hot {
  background: var(--c-accent);
  color: #1E1B3A;
  box-shadow: 0 8px 22px rgba(199, 242, 48, 0.32);
}
.fp-trending__chip--hot:hover {
  background: #B0DA1E;
  color: #1E1B3A;
  box-shadow: 0 10px 26px rgba(199, 242, 48, 0.45);
}
.fp-trending__chip--hot .fp-trending__chip-count {
  background: #1E1B3A;
  color: var(--c-accent);
}

@media (max-width: 900px) {
  .fp-trending__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fp-trending { padding: var(--s-6) 0; }
  .fp-trending__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-trending__chip { padding: 9px 14px; font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────
 * Editor's Picks (homepage sidebar)
 *
 * Vertical stack of 3 wide cards. Each card: 16:9 hero thumbnail at
 * top with a lime "01/02/03" ribbon tucked under the top edge,
 * indigo category eyebrow, bold ink title, italic editor note pulled
 * from the excerpt, and a date + reading-time meta line.
 * ─────────────────────────────────────────────────────────────── */
.fp-edpicks { margin-bottom: var(--s-6); }
.fp-edpicks__head { margin-bottom: var(--s-4); }
.fp-edpicks__eyebrow {
  display: block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 6px;
}
.fp-edpicks__title {
  font-family: var(--f-head);
  font-size: 21px; font-weight: 800;
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0;
  position: relative;
  padding-bottom: 12px;
}
.fp-edpicks__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 36px; height: 3px;
  background: var(--c-accent);
  border-radius: 2px;
}

.fp-edpicks__list {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.fp-edpicks__card {
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.fp-edpicks__card:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.12);
}

/* 16:9 hero with the lime rank ribbon hanging from the top */
.fp-edpicks__media {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--c-soft);
  overflow: hidden;
}
.fp-edpicks__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.fp-edpicks__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.fp-edpicks__cat {
  font-family: var(--f-head);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
}
.fp-edpicks__card-title {
  font-family: var(--f-head);
  font-size: 16px; font-weight: 800;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0;
  transition: color .15s;
}
.fp-edpicks__card:hover .fp-edpicks__card-title {
  color: var(--c-brand);
}
.fp-edpicks__note {
  font-size: 12.5px;
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}
.fp-edpicks__byline {
  font-style: normal;
  font-weight: 700;
  color: var(--c-ink);
}
.fp-edpicks__meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-muted);
  margin: 0;
}

/* Recent posts widget — text-only cards with category eyebrow, bold
 * title, date + reading time. 3px left accent bar swaps gray -> lime
 * on hover with a soft indigo tint behind the whole row. */
.fp-widget-recent__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.fp-widget-recent__item { margin: 0; }
.fp-widget-recent__link {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 14px 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-ink);
  position: relative;
  transition: background .15s;
}
.fp-widget-recent__link::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--c-border);
  border-radius: 2px;
  transition: background .15s, top .15s, bottom .15s;
}
.fp-widget-recent__link:hover {
  background: rgba(79, 70, 229, 0.04);
}
.fp-widget-recent__link:hover::before {
  background: var(--c-accent);
  top: 8px; bottom: 8px;
}
.fp-widget-recent__cat {
  font-family: var(--f-head);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
}
.fp-widget-recent__title {
  font-family: var(--f-head);
  font-size: 14px; font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
  text-decoration: none;
  display: block;
  transition: color .15s;
}
.fp-widget-recent__link:hover .fp-widget-recent__title {
  color: var(--c-brand);
}
.fp-widget-recent__meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-muted);
}

/* ---------- Sidebar: Editor's top pick — brand-indigo head bar
 *   (eyebrow + lime rating chip), 16:9 media, white body with bold
 *   ink name and a lime CTA pill. ---------- */
.fp-toppick { padding: 0 !important; background: transparent !important; border: 0 !important; }
.fp-toppick > .widget-title { display: none; }
.fp-toppick__card {
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fp-toppick__card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.40);
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.30);
}
.fp-toppick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--c-brand);
  color: #fff;
}
.fp-toppick__eye {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.fp-toppick__rating {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-accent);
  background: rgba(255, 255, 255, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.fp-toppick__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--c-soft);
  overflow: hidden;
}
.fp-toppick__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fp-toppick__body { padding: 14px 16px 16px; }
.fp-toppick__name {
  display: block;
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.25;
  margin: 0 0 12px;
  transition: color .12s;
}
.fp-toppick__card:hover .fp-toppick__name { color: var(--c-brand); }
.fp-toppick__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-accent);
  color: var(--c-ink);
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 999px;
  transition: transform .12s, box-shadow .12s;
}
.fp-toppick__card:hover .fp-toppick__cta {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(199, 242, 48, 0.55);
}

/* ---------- Sidebar: Author mini-card — indigo eyebrow + lime-
 *   ringed avatar + ink name/title + indigo "View profile" link. */
.fp-authormini {
  padding: 18px 18px 16px !important;
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
}
.fp-authormini > .widget-title { display: none; }
.fp-authormini__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 12px;
}
.fp-authormini__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--c-border);
}
.fp-authormini__avatar { display: block; flex-shrink: 0; }
.fp-authormini__img,
.fp-authormini__avatar img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: block;
  border: 3px solid var(--c-accent);
  background: #fff;
  object-fit: cover;
}
.fp-authormini__info { min-width: 0; }
.fp-authormini__name {
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
  text-decoration: none;
  display: block;
  line-height: 1.2;
  margin: 0 0 4px;
  transition: color .12s;
}
.fp-authormini__name:hover { color: var(--c-brand); }
.fp-authormini__title {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.4;
}
.fp-authormini__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-brand);
  text-decoration: none;
  transition: color .12s;
}
.fp-authormini__link:hover { color: var(--c-ink); }

/* ---------- Sidebar: Related calculator ---------- */
.fp-relcalc__tile { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-ink); padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--r-md); transition: border-color .15s ease, background .15s ease; }
.fp-relcalc__tile:hover { border-color: var(--c-ink); background: var(--c-soft); }
.fp-relcalc__icon { font-size: 22px; line-height: 1; }
.fp-relcalc__name { font-weight: 700; font-size: 14px; flex: 1; }
.fp-relcalc__arrow { color: var(--c-muted); font-weight: 700; }

/* ---------- Sidebar: Mini compound-interest calculator widget.
 *   Replaces the static "Browse by topic" category list with an
 *   interactive 1-slider mini calc: drag amount, instant lime
 *   result on indigo. Links to the full /calculators/ page.
 *   ---------- */
.fp-mini-calc {
  padding: 18px 18px 16px !important;
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
}
.fp-mini-calc > .widget-title { display: none; }
.fp-mini-calc__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 6px;
}
.fp-mini-calc__h {
  font-family: var(--f-head);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.35;
  margin: 0 0 14px;
}
.fp-mini-calc__slider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--c-muted);
  margin: 0 0 14px;
}
.fp-mini-calc__slider-sym {
  font-family: var(--f-head);
  font-weight: 800;
  color: var(--c-brand);
  font-size: 13px;
}
.fp-mini-calc__slider input[type="range"] {
  flex: 1;
  height: 4px;
  background: rgba(79, 70, 229, 0.18);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.fp-mini-calc__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-brand);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.40);
  cursor: pointer;
}
.fp-mini-calc__slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-brand);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.40);
  cursor: pointer;
}
.fp-mini-calc__slider-val {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 64px;
  text-align: right;
}
.fp-mini-calc__slider-val small {
  font-weight: 500;
  color: var(--c-muted);
  font-size: 10px;
}
.fp-mini-calc__result {
  position: relative;
  background: var(--c-brand);
  color: #fff;
  border-radius: 10px;
  padding: 14px 14px 13px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.fp-mini-calc__result::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: -1;
}
.fp-mini-calc__result-lbl {
  font-family: var(--f-head);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 4px;
}
.fp-mini-calc__result-n {
  font-family: var(--f-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--c-accent);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.fp-mini-calc__cta {
  display: inline-block;
  margin-top: 12px;
  width: 100%;
  text-align: center;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-brand);
  text-decoration: none;
  padding: 8px 0 0;
  transition: color .12s;
}
.fp-mini-calc__cta:hover { color: var(--c-ink); }

/* ---------- Sidebar: Money calendar widget — upcoming US financial
 *   deadlines with countdown chips. Urgent (≤30 days for tax /
 *   ≤14 days for enrollment) goes lime; rest goes indigo tint.
 *   ---------- */
.fp-cal {
  padding: 18px 18px 16px !important;
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
}
.fp-cal > .widget-title { display: none; }
.fp-cal__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 6px;
}
.fp-cal__h {
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 14px;
}
.fp-cal__list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.fp-cal__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--c-border);
}
.fp-cal__row:last-child { border-bottom: 0; }
.fp-cal__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s, transform .12s;
}
.fp-cal__link:hover {
  background: rgba(79, 70, 229, 0.08);
  transform: translateX(2px);
}
.fp-cal__link:hover .fp-cal__name { color: var(--c-brand); font-weight: 600; }
.fp-cal__row > .fp-cal__name-wrap,
.fp-cal__row > .fp-cal__days {
  padding: 10px 0;
}
.fp-cal__row > .fp-cal__name-wrap { margin-right: auto; flex: 1; }
.fp-cal__name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fp-cal__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.35;
  transition: color .15s;
  word-break: break-word;
}
.fp-cal__date {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 400;
  line-height: 1.3;
}
.fp-cal__days {
  flex-shrink: 0;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  background: var(--c-brand);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.fp-cal__days--urgent {
  background: var(--c-brand);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.fp-cal__foot {
  font-size: 10.5px;
  color: var(--c-muted);
  margin: 0;
  text-align: center;
  font-style: italic;
}

/* ====================================================================
   Contact page (page-contact.php) — Minimal Form-First (20_02)
   ==================================================================== */
/* Brand-indigo hero banner with lattice texture, matching .fp-calchero
 * and .fp-cathero so the Contact page reads as part of the brand surface
 * family. Centered layout: breadcrumb -> eyebrow chip -> H1 -> lead ->
 * 3-stat row -> "jump to form" cue. */
.fp-ct-hero {
  position: relative;
  background: #4F46E5;
  color: #fff;
  padding: var(--s-7) 0 var(--s-7);
  margin-bottom: var(--s-7);
  overflow: hidden;
  isolation: isolate;
}
.fp-ct-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-ct-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--c-accent);
  z-index: -1;
}
.fp-ct-hero__inner { text-align: center; }
.fp-ct-hero .fp-breadcrumb { justify-content: center; margin-bottom: 18px; }
.fp-ct-hero .fp-breadcrumb,
.fp-ct-hero .fp-breadcrumb * { color: rgba(255, 255, 255, 0.6); }
.fp-ct-hero .fp-breadcrumb a:hover { color: #fff; }
.fp-ct-hero__eyebrow {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(199, 242, 48, 0.12);
  border: 1px solid rgba(199, 242, 48, 0.30);
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.fp-ct-hero__title {
  font-family: var(--f-head);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.05;
}
.fp-ct-hero__lead {
  font-size: clamp(15px, 1.6vw, 17px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 64ch;
  line-height: 1.6;
  margin: 0 auto var(--s-5);
}

/* Three-stat row: big lime number + 2-line label under it. */
.fp-ct-hero__stats {
  list-style: none;
  margin: 0 auto var(--s-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 720px;
}
.fp-ct-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.fp-ct-hero__stat-num {
  font-family: var(--f-head);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fp-ct-hero__stat-lbl {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
  text-align: center;
}

/* "Jump to form" pill — soft outline on indigo, lime hover. */
.fp-ct-hero__jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-size: 13px; font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 12px 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.fp-ct-hero__jump:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
  transform: translateY(-1px);
}
.fp-ct-hero__jump svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .fp-ct-hero { padding: var(--s-6) 0; }
  .fp-ct-hero__stats { grid-template-columns: 1fr; gap: 10px; max-width: 360px; }
  .fp-ct-hero__stat { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 16px; }
  .fp-ct-hero__stat-lbl { text-align: left; }
}

/* 2-col body */
.fp-ct {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* ── Form column ── */
.fp-ct__main {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: var(--s-5);
}
.fp-ct__error {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.30);
  color: var(--c-danger);
  font-size: 13.5px; font-weight: 600;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 0 var(--s-3);
}

.fp-ct__form { display: flex; flex-direction: column; gap: var(--s-3); }
.fp-ct__honeypot { position: absolute; left: -9999px; opacity: 0; }
.fp-ct__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.fp-ct__field { display: flex; flex-direction: column; }
.fp-ct__label {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.fp-ct__field input,
.fp-ct__field select,
.fp-ct__field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--c-ink);
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--f-body);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.fp-ct__field input:hover,
.fp-ct__field select:hover,
.fp-ct__field textarea:hover {
  border-color: rgba(79, 70, 229, 0.40);
}
.fp-ct__field input:focus,
.fp-ct__field select:focus,
.fp-ct__field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}
.fp-ct__field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}
.fp-ct__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 38px;
}

.fp-ct__send {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  margin-top: 4px;
  align-self: flex-start;
  padding: 13px 24px;
  background: var(--c-accent);
  color: #1E1B3A;
  font-family: var(--f-head);
  font-size: 14px; font-weight: 800;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(199, 242, 48, 0.30);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.fp-ct__send:hover {
  background: #B0DA1E;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(199, 242, 48, 0.40);
}
.fp-ct__send svg { width: 14px; height: 14px; }
.fp-ct__privacy {
  font-size: 11.5px;
  color: var(--c-muted);
  margin: 4px 0 0;
}
.fp-ct__privacy a { color: var(--c-brand); font-weight: 700; text-decoration: none; }
.fp-ct__privacy a:hover { text-decoration: underline; }

/* ── Success state ── */
.fp-ct__success {
  text-align: center;
  padding: var(--s-5) var(--s-4);
}
.fp-ct__success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--c-accent);
  color: #1E1B3A;
  border-radius: 50%;
  margin: 0 auto var(--s-3);
  box-shadow: 0 8px 24px rgba(199, 242, 48, 0.35);
}
.fp-ct__success-icon svg { width: 26px; height: 26px; }
.fp-ct__success h2 {
  font-family: var(--f-head);
  font-size: 22px; font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.fp-ct__success p {
  font-size: 15px;
  color: var(--c-muted);
  margin: 0 auto;
  max-width: 44ch;
  line-height: 1.6;
}
.fp-ct__success a { color: var(--c-brand); font-weight: 700; text-decoration: none; }
.fp-ct__success a:hover { text-decoration: underline; }

/* ── Sidebar ── */
.fp-ct__side {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.fp-ct__panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: var(--s-4);
}
.fp-ct__panel-eye {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 8px;
}
.fp-ct__panel-mail {
  display: block;
  font-family: var(--f-head);
  font-size: 15px; font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 4px;
  word-break: break-all;
}
.fp-ct__panel-mail strong { color: var(--c-brand); font-weight: 800; }
.fp-ct__panel-mail:hover { color: var(--c-brand); }
.fp-ct__panel-meta {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0 0 14px;
}
.fp-ct__panel-sub {
  font-size: 12.5px;
  color: var(--c-muted);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  line-height: 1.5;
}
.fp-ct__panel-sub strong { color: var(--c-ink); font-weight: 700; }
.fp-ct__panel-sub a { color: var(--c-brand); font-weight: 700; text-decoration: none; }
.fp-ct__panel-sub a:hover { text-decoration: underline; }

.fp-ct__socials {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.fp-ct__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c-brand);
  transition: background .15s, color .15s, transform .15s;
}
.fp-ct__socials a:hover {
  background: var(--c-brand);
  color: #fff;
  transform: translateY(-2px);
}
.fp-ct__socials svg { width: 16px; height: 16px; }

/* Newsletter CTA panel — indigo brand */
.fp-ct__panel--cta {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fp-ct__panel--cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none; z-index: -1;
}
.fp-ct__cta-eye {
  font-family: var(--f-head);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 6px;
}
.fp-ct__cta-title {
  font-family: var(--f-head);
  font-size: 19px; font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}
.fp-ct__cta-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 14px;
  line-height: 1.5;
}
.fp-ct__cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-accent);
  color: #1E1B3A;
  font-family: var(--f-head);
  font-size: 13px; font-weight: 800;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.fp-ct__cta-btn:hover {
  background: #B0DA1E;
  color: #1E1B3A;
  transform: translateY(-1px);
}

.fp-ct__note {
  font-size: 12px;
  color: var(--c-muted);
  font-style: italic;
  line-height: 1.55;
  margin: 0;
  padding: 0 8px;
}
.fp-ct__note a { color: var(--c-brand); font-weight: 700; text-decoration: none; }
.fp-ct__note a:hover { text-decoration: underline; }

/* ── FAQ accordion ── */
.fp-ct-faq__list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
}
.fp-ct-faq__item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.fp-ct-faq__item[open] {
  border-color: var(--c-brand);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.10);
}
.fp-ct-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--f-head);
  font-size: 15px; font-weight: 800;
  color: var(--c-ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
}
.fp-ct-faq__item summary::-webkit-details-marker { display: none; }
.fp-ct-faq__item summary::after {
  content: "+";
  font-family: var(--f-head);
  font-size: 24px; font-weight: 400;
  color: var(--c-brand);
  line-height: 1; width: 22px; text-align: center;
  transition: transform .15s, content .15s;
  flex-shrink: 0;
}
.fp-ct-faq__item[open] summary::after {
  content: "−";
}
.fp-ct-faq__item summary:hover { color: var(--c-brand); }
.fp-ct-faq__item p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  color: var(--c-muted);
  line-height: 1.6;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .fp-ct { grid-template-columns: 1fr; gap: var(--s-4); }
  .fp-ct__main { padding: var(--s-4); }
  .fp-ct__row { grid-template-columns: 1fr; }
}

/* ====================================================================
   About page (page-about.php) — Bento Modular (20_02 redesign).
   Asymmetric 7-cell grid on a 6-col rail. Mixes indigo hero, dark
   "who writes" tile, lime contact tile, and several white cells so
   the page reads more as a brand landing than a long prose page.
   ==================================================================== */
.fp-about { padding: var(--s-5) 0 var(--s-6); }
.fp-about__inner { max-width: 1080px; }
.fp-about .fp-breadcrumb { margin-bottom: var(--s-4); }

.fp-about__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
}

/* Shared cell base. */
.fp-about__cell {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 22px 24px;
}
.fp-about__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 10px;
}
.fp-about__h2 {
  font-family: var(--f-head);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.25;
  margin: 0 0 10px;
}
.fp-about__p {
  font-size: 14px;
  color: #4B4B57;
  line-height: 1.65;
  margin: 0 0 10px;
}
.fp-about__p:last-child { margin-bottom: 0; }
.fp-about__p a {
  color: var(--c-brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.fp-about__p a:hover { text-decoration-thickness: 2px; }

/* ── Hero (row 1, span 6): brand indigo + lattice + lime accent. ── */
.fp-about__cell--hero {
  grid-column: span 6;
  position: relative;
  background: var(--c-brand);
  color: #fff;
  border: 0;
  padding: 36px 38px;
  overflow: hidden;
  isolation: isolate;
}
.fp-about__cell--hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-about__cell--hero::after {
  content: "";
  position: absolute; left: 0; top: 28px; bottom: 28px;
  width: 4px;
  background: var(--c-accent);
  border-radius: 0 4px 4px 0;
  z-index: -1;
}
.fp-about__cell--hero .fp-about__eye { color: var(--c-accent); margin-bottom: 12px; }
.fp-about__title {
  font-family: var(--f-head);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 14px;
}
.fp-about__lead {
  font-size: clamp(15px, 1.6vw, 17px);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}

/* ── Mission (row 2, span 4): white card. ── */
.fp-about__cell--mission { grid-column: span 4; }

/* ── Bio (row 2, span 2): brand-indigo trust block + lattice. ── */
.fp-about__cell--bio {
  grid-column: span 2;
  position: relative;
  background: var(--c-brand);
  color: #fff;
  border: 0;
  overflow: hidden;
  isolation: isolate;
}
.fp-about__cell--bio::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-about__cell--bio .fp-about__eye { color: var(--c-accent); }
.fp-about__bio-p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 14px;
}
.fp-about__bio-foot {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fp-about__bio-foot a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ── Pillars (row 3, span 3): 4 indigo pills. ── */
.fp-about__cell--pillars { grid-column: span 3; }
.fp-about__pills {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.fp-about__pills li {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-brand);
  background: rgba(79, 70, 229, 0.08);
  padding: 8px 12px;
  border-radius: 6px;
}
.fp-about__pillars-foot {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Principles (row 3, span 3): plain white card + hairline list. ── */
.fp-about__cell--principles { grid-column: span 3; }
.fp-about__principles {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fp-about__principles li {
  font-size: 13px;
  color: #4B4B57;
  line-height: 1.55;
  padding: 8px 0;
  border-bottom: 1px solid #F0F0F2;
}
.fp-about__principles li:last-child { border-bottom: 0; }
.fp-about__principles li strong {
  display: inline;
  font-family: var(--f-head);
  font-weight: 800;
  color: var(--c-ink);
  margin-right: 4px;
}

/* ── Money (row 4, span 4): soft indigo tint. ── */
.fp-about__cell--money {
  grid-column: span 4;
  background: #EEF0FE;
  border-color: rgba(79, 70, 229, 0.18);
}

/* ── Contact (row 4, span 2): lime CTA tile. ── */
.fp-about__cell--contact {
  grid-column: span 2;
  background: var(--c-accent);
  border: 0;
  justify-content: space-between;
}
.fp-about__cell--contact .fp-about__eye { color: var(--c-brand); }
.fp-about__contact-mail {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 800;
  color: var(--c-ink);
  text-decoration: none;
  margin: 4px 0 14px;
  line-height: 1.25;
  word-break: break-word;
}
.fp-about__contact-mail strong { font-weight: 800; }
.fp-about__contact-mail:hover { color: var(--c-brand); }
.fp-about__contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--c-ink);
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  width: max-content;
  transition: transform .12s, background .12s;
}
.fp-about__cell--contact .fp-about__contact-cta:hover {
  transform: translateY(-1px);
  background: var(--c-brand);
}

/* ── Closing line under the grid. ── */
.fp-about__closing {
  font-family: var(--f-head);
  font-size: clamp(15px, 1.6vw, 17px);
  font-style: italic;
  color: var(--c-muted);
  text-align: center;
  margin: var(--s-5) 0 0;
}

/* ── Responsive collapse: at <=900px the bento stacks into a single
 *    column so cards can hold their content comfortably. ── */
@media (max-width: 900px) {
  .fp-about__grid { grid-template-columns: 1fr; gap: 10px; }
  .fp-about__cell,
  .fp-about__cell--hero,
  .fp-about__cell--mission,
  .fp-about__cell--bio,
  .fp-about__cell--pillars,
  .fp-about__cell--principles,
  .fp-about__cell--money,
  .fp-about__cell--contact { grid-column: span 1; }
  .fp-about__cell--hero { padding: 28px 24px; }
}

/* ====================================================================
   Editorial Standards (page-editorial-standards.php) — 20_02.
   Public editorial-policy page. Uses .fp-calchero for the hero and
   adds .fp-ed-* components for 4 promise cards, 8 source cards,
   6 numbered process steps, prose section, and a final CTA card.
   ==================================================================== */

/* 4 promise cards: small bento at the top of the page. */
.fp-ed-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.fp-ed-promise {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 22px 22px 20px;
}
.fp-ed-promise__n {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-brand);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.fp-ed-promise__h {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.3;
  margin: 0 0 8px;
}
.fp-ed-promise__p {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
}

/* 8 source cards: clean white cards with an indigo chip-style label
 * on top (Option A pick — no border-left lines, full hairline). */
.fp-ed-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.fp-ed-source {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px 20px;
}
.fp-ed-source__h {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--c-brand);
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0 0 12px;
}
.fp-ed-source__p {
  font-size: 13px;
  color: #4B4B57;
  line-height: 1.6;
  margin: 0;
}

/* 6 numbered process steps inside one unified brand-indigo surface
 * with lattice texture (Option 1 pick — treats the pipeline as a
 * single block, not 6 separate cards). */
.fp-ed-process {
  position: relative;
  background: var(--c-brand);
  color: #fff;
  border-radius: 16px;
  padding: 36px 40px 38px;
  overflow: hidden;
  isolation: isolate;
}
.fp-ed-process::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-ed-process__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.fp-ed-process__title {
  font-family: var(--f-head);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 14px;
}
.fp-ed-process__rule {
  width: 36px;
  height: 3px;
  background: var(--c-accent);
  border-radius: 2px;
  margin: 0 0 18px;
}
.fp-ed-process__lead {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 70ch;
}
.fp-ed-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 36px;
}
.fp-ed-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.fp-ed-step__n {
  font-family: var(--f-head);
  font-size: 30px;
  font-weight: 800;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fp-ed-step__h {
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.3;
}
.fp-ed-step__p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}

/* Two trust blocks - Conflicts wall + Updates stamps (Option B).
 * Each block: dark ink head + content body + muted foot prose. */
.fp-ed-trust {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
}
.fp-ed-trust--mt { margin-top: var(--s-5); }
.fp-ed-trust__head {
  position: relative;
  background: var(--c-brand);
  color: #fff;
  padding: 20px 24px;
  overflow: hidden;
  isolation: isolate;
}
.fp-ed-trust__head::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-ed-trust__head--lime {
  background: var(--c-accent);
  color: var(--c-brand);
}
.fp-ed-trust__head--lime::before { display: none; }
.fp-ed-trust__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 6px;
}
.fp-ed-trust__head--lime .fp-ed-trust__eye { color: var(--c-brand); }
.fp-ed-trust__title {
  font-family: var(--f-head);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}
.fp-ed-trust__head--lime .fp-ed-trust__title { color: var(--c-brand); }
.fp-ed-trust__foot {
  padding: 16px 24px 20px;
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
  border-top: 1px solid var(--c-border);
}
.fp-ed-trust__foot a {
  color: var(--c-brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.fp-ed-trust__foot a:hover { text-decoration-thickness: 2px; }

/* Conflicts: editorial-wall money-flow diagram - 2 tracks with a
 * striped diagonal divider strip in the middle. */
.fp-ed-wall {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 0;
}
.fp-ed-wall__track { padding: 22px 22px 24px; }
.fp-ed-wall__track--money { background: rgba(199, 242, 48, 0.14); }
.fp-ed-wall__track--editor { background: rgba(79, 70, 229, 0.06); }
.fp-ed-wall__lbl {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 14px;
}
.fp-ed-wall__node {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.fp-ed-wall__node:last-child { margin-bottom: 0; }
.fp-ed-wall__node-h {
  font-family: var(--f-head);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 4px;
  line-height: 1.4;
}
.fp-ed-wall__node-p {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}
.fp-ed-wall__divider {
  background: repeating-linear-gradient(45deg, var(--c-brand), var(--c-brand) 6px, #fff 6px, #fff 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-ed-wall__divider-lbl {
  background: var(--c-accent);
  color: var(--c-brand);
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 10px 5px;
  border-radius: 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Updates: 3 commitment stamps - indigo-outlined cards with a lime
 * check badge bursting from the top-right corner. */
.fp-ed-stamps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 24px 24px;
}
.fp-ed-stamp {
  position: relative;
  background: #fff;
  border: 2px solid var(--c-brand);
  border-radius: 12px;
  padding: 22px 14px 18px;
  text-align: center;
}
.fp-ed-stamp::after {
  content: "\2713";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-brand);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
}
.fp-ed-stamp__h {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 10px;
}
.fp-ed-stamp__n {
  font-family: var(--f-head);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  color: var(--c-ink);
  margin: 0;
  line-height: 1.1;
}

@media (max-width: 720px) {
  .fp-ed-wall { grid-template-columns: 1fr; }
  .fp-ed-wall__divider { display: none; }
  .fp-ed-stamps { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
}

/* Final contact CTA card: split copy + buttons on indigo + lattice. */
.fp-ed-contact {
  position: relative;
  background: var(--c-brand);
  color: #fff;
  border-radius: 14px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.fp-ed-contact::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-ed-contact__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.fp-ed-contact__h {
  font-family: var(--f-head);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 10px;
}
.fp-ed-contact__p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
}
.fp-ed-contact__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.fp-ed-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: transform .12s, background .12s, color .12s;
}
.fp-ed-contact__btn--primary {
  background: var(--c-accent);
  color: var(--c-ink);
}
.fp-ed-contact__btn--primary:hover {
  transform: translateY(-1px);
  background: #fff;
}
.fp-ed-contact__btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
}
.fp-ed-contact__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 720px) {
  .fp-ed-contact { grid-template-columns: 1fr; padding: 24px 22px; }
  .fp-ed-process { padding: 26px 22px 28px; }
  .fp-ed-steps { grid-template-columns: 1fr; gap: 20px; }
  .fp-ed-step { grid-template-columns: 44px 1fr; gap: 12px; }
  .fp-ed-step__n { font-size: 24px; }
}

/* ====================================================================
   Free Resources (page-free-resources.php) — Featured Marquee +
   Browse Tiles (20_02 redesign). Each group leads with an indigo
   Editor's-pick hero card and follows with compact tiles. No icons.
   ==================================================================== */

/* Compress vertical rhythm: 21 resources + 3 group sections gets long
 * with fp-section's default --s-8 padding, so the variant trims it. */
.fp-fr-section { padding: var(--s-6) 0; }

/* ── Group header strip ── */
.fp-fr-grp {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.fp-fr-grp__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 4px;
}
.fp-fr-grp__title {
  font-family: var(--f-head);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  color: var(--c-ink);
  margin: 0;
  line-height: 1.15;
}
.fp-fr-grp__count {
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-bottom: 4px;
  white-space: nowrap;
}

/* ── Editor's-pick marquee card ──
 * Brand-indigo surface with the shared 32px lattice texture, a lime
 * accent strip on the left edge, white type, and a lime CTA pill. */
.fp-fr-hero {
  position: relative;
  display: block;
  background: var(--c-brand);
  color: #fff;
  border-radius: 14px;
  padding: var(--s-5) calc(var(--s-5) + 6px);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s, box-shadow .15s;
}
.fp-fr-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.fp-fr-hero::after {
  content: "";
  position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 4px;
  background: var(--c-accent);
  border-radius: 0 4px 4px 0;
  z-index: -1;
}
.fp-fr-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(79, 70, 229, 0.45);
}
.fp-fr-hero__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 8px;
}
.fp-fr-hero__title {
  font-family: var(--f-head);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.15;
}
.fp-fr-hero__desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  max-width: 70ch;
  margin: 0 0 16px;
}
.fp-fr-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  background: var(--c-accent);
  color: var(--c-ink);
  padding: 10px 18px;
  border-radius: 999px;
  transition: transform .12s, box-shadow .12s;
}
.fp-fr-hero:hover .fp-fr-hero__btn {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(199, 242, 48, 0.55);
}

/* ── "Also in this collection" sub-strip ── */
.fp-fr-sub {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: var(--s-4) 0 var(--s-3);
}

/* ── Browse tiles grid ──
 * auto-fit 220-min columns so wide screens fit 4 across (~1080px
 * container = 4 col, ~720px = 3 col, ~520px = 2 col). 12-tile group
 * goes from 4 rows to 3, knocking ~170px off the page height. */
.fp-fr-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.fp-fr-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 16px 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fp-fr-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.40);
  box-shadow: 0 10px 24px -10px rgba(30, 27, 58, 0.18);
}
.fp-fr-tile__chip {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 9px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  background: rgba(79, 70, 229, 0.08);
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 8px;
  width: max-content;
}
.fp-fr-tile--soon .fp-fr-tile__chip { color: var(--c-muted); background: rgba(0, 0, 0, 0.05); }
.fp-fr-tile--guide .fp-fr-tile__chip { color: var(--c-ink); background: var(--c-accent); }
.fp-fr-tile__title {
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.3;
  margin: 0 0 6px;
}
.fp-fr-tile:hover .fp-fr-tile__title { color: var(--c-brand); }
.fp-fr-tile__desc {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0 0 10px;
  flex-grow: 1;
}
.fp-fr-tile__cta {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  color: var(--c-brand);
  margin-top: auto;
}

@media (max-width: 560px) {
  .fp-fr-grp { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fp-fr-grp__count { padding-bottom: 0; }
}

/* ====================================================================
   Calculators landing — Web-App shell (Pattern A)
   ==================================================================== */

/* ── Compact hero (smaller than the old fp-calchero) ── */
.fp-cwa-hero {
  background: #4F46E5;
  color: #fff;
  padding: var(--s-6) 0 var(--s-5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fp-cwa-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none; z-index: -1;
}
.fp-cwa-hero .fp-breadcrumb,
.fp-cwa-hero .fp-breadcrumb * { color: rgba(255,255,255,.6); }
.fp-cwa-hero .fp-breadcrumb a:hover { color: #fff; }
.fp-cwa-hero__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-top: 14px;
}
.fp-cwa-hero__eyebrow {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 6px;
}
.fp-cwa-hero__title {
  font-family: var(--f-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;   line-height: 1.1; margin: 0 0 10px; color: #fff;
}
.fp-cwa-hero__desc {
  color: rgba(255,255,255,.82);
  max-width: 60ch; font-size: 15.5px; line-height: 1.55;
  margin: 0;
}
.fp-cwa-hero__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-cwa-hero__pill {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.fp-cwa-hero__pill strong { font-weight: 800; margin-right: 4px; }

/* ── Main shell: sidebar + canvas ── */
.fp-cwa { padding: var(--s-6) 0 var(--s-8); }
.fp-cwa__shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

/* ── Mobile toggle (hidden ≥901px) ── */
.fp-cwa__mobile-toggle {
  display: none;
  align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  font-family: var(--f-head);
  font-size: 14px; font-weight: 700;
  padding: 10px 16px; border-radius: 999px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.fp-cwa__mobile-toggle svg { width: 16px; height: 16px; }

/* ── Sidebar ── */
.fp-cwa__nav {
  position: sticky; top: 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.fp-cwa__nav::-webkit-scrollbar { width: 6px; }
.fp-cwa__nav::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

.fp-cwa__search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--c-soft);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.fp-cwa__search:focus-within {
  border-color: var(--c-brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.fp-cwa__search svg { width: 14px; height: 14px; color: var(--c-muted); flex-shrink: 0; }
.fp-cwa__search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  font: inherit; font-size: 13px; color: var(--c-ink);
}
.fp-cwa__search input::placeholder { color: var(--c-muted); }
.fp-cwa__kbd {
  display: inline-flex; align-items: center;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; font-weight: 700;
  color: var(--c-muted);
}

/* Groups are visually distinct from the links inside them: dark
 * indigo title on a soft tint background, with a hairline divider
 * separating each group. Calc links are indented with a left bar
 * to clearly read as children of the title above. */
.fp-cwa__group {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}
.fp-cwa__group:last-of-type { border-bottom: none; padding-bottom: 0; }

.fp-cwa__group-title {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: var(--c-brand);
  border: 0; cursor: pointer;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 800;
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: background .15s, box-shadow .15s;
}
.fp-cwa__group-title:hover {
  background: var(--c-brand-dark);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.30);
}
.fp-cwa__group-title > span:first-child {
  flex: 1; min-width: 0;
  line-height: 1.25;
}
.fp-cwa__group-count {
  background: var(--c-accent);
  color: #1E1B3A;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
  border: 0;
}
.fp-cwa__group-chev {
  width: 14px; height: 14px;
  color: var(--c-accent);
  transition: transform .15s;
  flex-shrink: 0;
}
.fp-cwa__group[aria-expanded="false"] .fp-cwa__group-chev { transform: rotate(-90deg); }
.fp-cwa__group[aria-expanded="false"] .fp-cwa__group-list { display: none; }

.fp-cwa__group-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 1px;
  border-left: 2px solid var(--c-soft);
  margin-left: 12px;
  padding-left: 4px;
}
.fp-cwa__group-list li { margin: 0; }
.fp-cwa__link {
  display: block;
  padding: 7px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background .12s, color .12s;
  line-height: 1.35;
  position: relative;
}
.fp-cwa__link:hover {
  background: rgba(79, 70, 229, 0.06);
  color: var(--c-brand);
}
.fp-cwa__link.is-active {
  background: var(--c-accent);
  color: #1E1B3A;
  font-weight: 800;
}
.fp-cwa__group-list:has(.fp-cwa__link.is-active) {
  border-left-color: var(--c-accent);
}
.fp-cwa__group-list:has(.fp-cwa__link:hover) {
  border-left-color: rgba(79, 70, 229, 0.30);
}
.fp-cwa__nav-empty {
  font-size: 12.5px; color: var(--c-muted);
  text-align: center;
  padding: 14px 8px;
  margin: 0;
}

/* ── Canvas ── */
.fp-cwa__canvas { min-width: 0; }

.fp-cwa-calc {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: var(--s-5);
  animation: fp-cwa-fade .2s ease;
}
@keyframes fp-cwa-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fp-cwa-calc__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.fp-cwa-calc__eyebrow {
  display: block;
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 6px;
}
.fp-cwa-calc__title {
  font-family: var(--f-head);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0 0 6px;
}
.fp-cwa-calc__desc {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}
.fp-cwa-calc__share {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  font-family: var(--f-head);
  font-size: 12px; font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.fp-cwa-calc__share:hover {
  background: var(--c-soft);
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.fp-cwa-calc__share svg { width: 13px; height: 13px; }

.fp-cwa-calc__body { margin-bottom: var(--s-3); }

.fp-cwa-calc__foot {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.fp-cwa-calc__guide {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 800;
  color: var(--c-brand);
  text-decoration: none;
  align-self: flex-start;
  transition: gap .15s;
}
.fp-cwa-calc__guide:hover { gap: 9px; }
.fp-cwa-calc__guide svg { width: 14px; height: 14px; }
/* Related guides — reuses the unified .fp-card post-box style
 * (template-parts/content.php) for full visual consistency with the
 * /blog/ archive cards. Only published-post URLs render; broken
 * links are filtered out in PHP so every card has a thumbnail. */
.fp-cwa-calc__related { margin: 0; }
.fp-cwa-calc__related-title {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}
/* Force a 2-column grid inside the narrow web-app canvas, falling
 * back to a single column on tight mobile widths. */
.fp-cwa-calc__related-grid.fp-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 700px) {
  .fp-cwa-calc__related-grid.fp-card-grid { grid-template-columns: 1fr; }
}

/* ── Quick switcher modal (Cmd+K) ── */
.fp-cwa-switcher {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.fp-cwa-switcher[hidden] { display: none; }
.fp-cwa-switcher__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 13, 36, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fp-cwa-switcher__modal {
  position: relative;
  width: 90%; max-width: 540px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 13, 36, 0.35);
  overflow: hidden;
  animation: fp-cwa-fade .15s ease;
}
.fp-cwa-switcher__input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
}
.fp-cwa-switcher__input svg { width: 16px; height: 16px; color: var(--c-muted); }
.fp-cwa-switcher__input input {
  flex: 1;
  background: transparent; border: 0; outline: none;
  font: inherit; font-size: 15px; color: var(--c-ink);
}
.fp-cwa-switcher__input input::placeholder { color: var(--c-muted); }

.fp-cwa-switcher__results {
  list-style: none; margin: 0; padding: 6px;
  max-height: 320px; overflow-y: auto;
}
.fp-cwa-switcher__results li { margin: 0; }
.fp-cwa-switcher__results a {
  display: block;
  padding: 9px 12px;
  font-family: var(--f-head);
  font-size: 13.5px; font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 8px;
}
.fp-cwa-switcher__results a.is-focus,
.fp-cwa-switcher__results a:hover {
  background: rgba(79,70,229,0.10);
  color: var(--c-brand);
}
.fp-cwa-switcher__empty {
  padding: 22px; text-align: center;
  font-size: 13px; color: var(--c-muted);
  margin: 0;
}
.fp-cwa-switcher__foot {
  display: flex; gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  font-size: 11px; color: var(--c-muted);
  background: var(--c-soft);
}
.fp-cwa-switcher__foot kbd {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  margin-right: 2px;
}

/* ── Mobile (≤900px): sidebar collapses to drawer ── */
@media (max-width: 900px) {
  .fp-cwa__shell { grid-template-columns: 1fr; }
  .fp-cwa__mobile-toggle { display: inline-flex; margin-bottom: 12px; }
  .fp-cwa__nav {
    position: static;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;
    transition: max-height .25s, padding .25s, border-color .25s;
  }
  .fp-cwa__nav[data-open="true"] {
    max-height: 70vh; overflow-y: auto;
    padding: 14px;
    border-color: var(--c-border);
    margin-bottom: 16px;
  }
  .fp-cwa-calc { padding: var(--s-4); }
  .fp-cwa-calc__head { flex-direction: column; align-items: flex-start; }
  .fp-cwa-hero__row { flex-direction: column; align-items: flex-start; }
}

/* ====================================================================
   Calculators landing — legacy (kept for back-compat if any page-calculators
   markup still references the old classes)
   ==================================================================== */
.fp-calchero { background: #4F46E5; color: #fff; padding: var(--s-7) 0 var(--s-6); margin-bottom: var(--s-7); }
.fp-calchero .fp-breadcrumb,
.fp-calchero .fp-breadcrumb *,
.fp-calchero .fp-breadcrumbs,
.fp-calchero .fp-breadcrumbs * { color: rgba(255,255,255,.6); }
.fp-calchero .fp-breadcrumb a:hover,
.fp-calchero .fp-breadcrumbs a:hover { color: #fff; }
.fp-calchero__title { font-family: var(--f-head); font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin: 14px 0 14px; color: #fff; }
.fp-calchero__desc { color: rgba(255,255,255,.78); max-width: 68ch; font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.fp-calchero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-calchero__meta span {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
}
.fp-calchero__meta strong { color: #fff; font-weight: 800; margin-right: 4px; }

/* Grouped tile index */
.fp-calc-index { display: flex; flex-direction: column; gap: var(--s-7); }
.fp-calc-group__title {
  font-family: var(--f-head); font-size: 13px; font-weight: 800;
  text-transform: uppercase; color: var(--c-muted);
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: baseline; gap: 8px;
}
.fp-calc-group__count { color: var(--c-border); font-weight: 700; }
.fp-calc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.fp-calc-tile {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fp-calc-tile:hover {
  transform: translateY(-2px);
  border-color: var(--c-ink);
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}
.fp-calc-tile__icon {
  width: 44px; height: 44px;
  background: var(--c-soft); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.fp-calc-tile__body strong {
  display: block; font-family: var(--f-head); font-size: 15px; font-weight: 700;
  color: var(--c-ink); margin-bottom: 3px;
}
.fp-calc-tile__desc { display: block; font-size: 13px; color: var(--c-muted); line-height: 1.4; }
.fp-calc-tile__arrow { font-size: 18px; color: var(--c-muted); transition: transform .2s ease, color .2s ease; }
.fp-calc-tile:hover .fp-calc-tile__arrow { color: var(--c-ink); transform: translateX(4px); }

/* Individual calculator section */
.fp-calc-section { padding: var(--s-7) 0; border-top: 1px solid var(--c-border); }
.fp-calc-section__head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-bottom: var(--s-5); }
.fp-calc-section__num {
  font-family: var(--f-head); font-weight: 800; font-size: 30px;
  color: var(--c-border); line-height: 1; padding-top: 4px;
}
.fp-calc-section__eyebrow {
  display: block; font-size: 11px; font-weight: 800;   text-transform: uppercase; color: var(--c-brand); margin-bottom: 6px;
}
.fp-calc-section__title { font-family: var(--f-head); font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin: 0; color: var(--c-ink); line-height: 1.18; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-calc-section__icon { font-size: 0.85em; }
.fp-calc-section__guide { margin-top: var(--s-3); font-size: 14.5px; font-weight: 600; }
.fp-calc-section__guide a { color: var(--c-ink); text-decoration: none; }
.fp-calc-section__guide a:hover { text-decoration: underline; }
.fp-calc-section__related { font-size: 14px; color: var(--c-muted); margin-top: var(--s-2); }
.fp-calc-section__related span { font-weight: 700; color: var(--c-ink); }
.fp-calc-section__related a { color: var(--c-ink); text-decoration: none; font-weight: 600; }
.fp-calc-section__related a:hover { text-decoration: underline; }
.fp-calc-section__top { display: inline-block; margin-top: var(--s-4); font-size: 13px; color: var(--c-muted); text-decoration: none; font-weight: 600; }
.fp-calc-section__top:hover { color: var(--c-ink); }

@media (max-width: 600px) {
  .fp-calc-tile { grid-template-columns: 40px 1fr auto; padding: 12px 14px; }
  .fp-calc-tile__icon { width: 40px; height: 40px; font-size: 20px; }
  .fp-calc-section__num { font-size: 24px; }
}

/* ====================================================================
   Homepage big featured hero — admin-picked article (split card)
   Image left (full 16:9, no overlay) + text panel right.
   ==================================================================== */
.fp-bighero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
}
.fp-bighero__media {
  display: block; aspect-ratio: 16 / 9;
  background: var(--c-soft); overflow: hidden;
}
.fp-bighero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.fp-bighero__media:hover img { transform: scale(1.02); }
.fp-bighero__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-6) var(--s-6);
}
.fp-bighero__cat {
  display: inline-block; align-self: flex-start;
  background: var(--c-soft); color: var(--c-ink);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.fp-bighero__title {
  font-family: var(--f-head); font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1; font-weight: 800;   margin: 0 0 14px; color: var(--c-ink);
}
.fp-bighero__title a { color: inherit; text-decoration: none; }
.fp-bighero__title a:hover { text-decoration: underline; }
.fp-bighero__exc {
  font-size: 16px; line-height: 1.6; color: var(--c-muted);
  margin: 0 0 16px; max-width: 56ch;
}
.fp-bighero__meta {
  font-size: 13px; color: var(--c-muted); margin-bottom: 22px;
}
.fp-bighero__cta {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  background: var(--c-ink); color: var(--c-bg);
  font-size: 14.5px; font-weight: 700;
  padding: 12px 24px; border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.fp-bighero__cta:hover { background: var(--c-brand-dark); transform: translateY(-2px); }

@media (max-width: 880px) {
  .fp-bighero { grid-template-columns: 1fr; }
  .fp-bighero__body { padding: var(--s-5); }
}

/* ====================================================================
   Reading-list bookmarks (localStorage) — Save button on articles,
   toast feedback, and the /reading-list/ page renderer.
   ==================================================================== */

/* ── Save button: small heart pill inside .fp-article__meta ── */
.fp-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-muted);
  cursor: pointer;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.fp-save:hover {
  color: var(--c-brand);
  border-color: rgba(79, 70, 229, 0.40);
  background: rgba(79, 70, 229, 0.04);
}
.fp-save:active { transform: scale(0.96); }
.fp-save__icon { width: 14px; height: 14px; flex-shrink: 0; }
.fp-save.is-saved {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
}
.fp-save.is-saved .fp-save__icon {
  fill: var(--c-brand);
  stroke: var(--c-brand);
}

/* ── Toast notifications ── */
.fp-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.fp-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--c-ink);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
  max-width: 360px;
}
.fp-toast--show { opacity: 1; transform: translateY(0); }
.fp-toast__msg { font-family: var(--f-head); font-weight: 600; }
.fp-toast__link {
  font-family: var(--f-head);
  font-weight: 800;
  color: var(--c-accent);
  text-decoration: none;
  white-space: nowrap;
}
.fp-toast__link:hover { text-decoration: underline; }

/* ── /reading-list/ page ── */
.fp-reading { padding: var(--s-4) 0 var(--s-7); max-width: 880px; }
.fp-reading .fp-breadcrumb { margin: var(--s-3) 0 var(--s-4); }
.fp-reading__hero { margin: 0 0 var(--s-5); }
.fp-reading__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 8px;
}
.fp-reading__title {
  font-family: var(--f-head);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.1;
  margin: 0 0 12px;
}
.fp-reading__lead {
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.fp-reading-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(79, 70, 229, 0.04);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: 10px;
  margin: 0 0 14px;
}
.fp-reading-list__count {
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  margin: 0;
}
.fp-reading-list__count strong { font-weight: 800; color: var(--c-brand); }
.fp-reading-list__clear {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.fp-reading-list__clear:hover { color: #B91C1C; background: rgba(185, 28, 28, 0.06); }

.fp-reading-list__items { display: grid; gap: 12px; }
.fp-reading-list__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  align-items: start;
  transition: border-color .12s, box-shadow .12s;
}
.fp-reading-list__item:hover {
  border-color: rgba(79, 70, 229, 0.30);
  box-shadow: 0 6px 18px -8px rgba(79, 70, 229, 0.20);
}
.fp-reading-list__thumb { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; }
.fp-reading-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-reading-list__body { display: flex; flex-direction: column; min-width: 0; }
.fp-reading-list__cat {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  background: rgba(79, 70, 229, 0.10);
  padding: 3px 9px;
  border-radius: 4px;
  width: max-content;
  margin: 0 0 8px;
}
.fp-reading-list__title {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.3;
  margin: 0 0 8px;
}
.fp-reading-list__title a { color: inherit; text-decoration: none; }
.fp-reading-list__title a:hover { color: var(--c-brand); }
.fp-reading-list__excerpt {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 0 12px;
}
.fp-reading-list__remove {
  align-self: flex-start;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  transition: color .12s;
}
.fp-reading-list__remove:hover { color: #B91C1C; }

.fp-reading-list__empty {
  padding: var(--s-6) var(--s-5);
  background: rgba(79, 70, 229, 0.04);
  border: 1px dashed rgba(79, 70, 229, 0.25);
  border-radius: 12px;
  text-align: center;
}
.fp-reading-list__empty-h {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.fp-reading-list__empty-p {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 auto 16px;
  max-width: 50ch;
}
.fp-reading-list__empty-cta {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--c-brand);
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .12s;
}
.fp-reading-list__empty-cta:hover { transform: translateY(-1px); }

@media (max-width: 640px) {
  .fp-reading-list__item { grid-template-columns: 1fr; }
  .fp-toast-host { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  .fp-toast { max-width: none; }
}

/* ====================================================================
   Glossary tooltips — inline marker on jargon terms in article body,
   ink popup card on hover/focus/click. Definitions sourced from
   inc/glossary.php + window.FP_GLOSSARY + assets/js/glossary.js.
   ==================================================================== */
.fp-glossary {
  position: relative;
  color: var(--c-brand);
  border-bottom: 1.5px dotted var(--c-brand);
  cursor: help;
  font-weight: inherit;
  transition: color .12s, border-color .12s, background .12s;
}
.fp-glossary:hover,
.fp-glossary:focus-visible {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
  background: rgba(199, 242, 48, 0.22);
  outline: none;
  border-radius: 2px;
}

.fp-glossary-pop {
  position: absolute;
  z-index: 9999;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: var(--c-brand);
  color: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 36px -10px rgba(79, 70, 229, 0.45);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  --fp-arrow-left: 50%;
}
.fp-glossary-pop.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fp-glossary-pop::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: var(--fp-arrow-left);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--c-brand);
}
.fp-glossary-pop--below::after {
  top: -7px;
  bottom: auto;
  border-top: 0;
  border-bottom: 7px solid var(--c-brand);
}
.fp-glossary-pop__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 9px; font-weight: 800;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 6px;
}
.fp-glossary-pop__full {
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}
.fp-glossary-pop__desc {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px;
}
.fp-glossary-pop__desc:last-child { margin-bottom: 0; }
.fp-glossary-pop__link {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  color: var(--c-accent);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  width: 100%;
  text-decoration: none;
}
.fp-glossary-pop__link:hover { text-decoration: underline; }

/* Glossary tooltips: nothing to show on print. */
@media print {
  .fp-glossary { color: inherit !important; border-bottom: 0 !important; background: transparent !important; }
  .fp-glossary-pop { display: none !important; }
}

/* ====================================================================
   Exit-intent popup (single-post promo). Centered modal overlay with
   thumbnail + title + lime CTA. JS arms after 4s, fires when mouse
   moves toward the browser tab. Once per session. Desktop only.
   ==================================================================== */
.fp-popup {
  position: fixed; inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.fp-popup.is-open { opacity: 1; pointer-events: auto; }
.fp-popup[hidden] { display: none !important; }
.fp-popup__overlay {
  position: absolute; inset: 0;
  background: rgba(30, 27, 58, 0.55);
  backdrop-filter: blur(2px);
}
.fp-popup__card {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 24px;
  text-align: center;
  box-shadow: 0 24px 60px -10px rgba(30, 27, 58, 0.40);
  transform: scale(0.96);
  transition: transform .22s;
}
.fp-popup.is-open .fp-popup__card { transform: scale(1); }
.fp-popup__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--c-muted);
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  transition: background .12s, color .12s;
}
.fp-popup__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--c-ink); }
.fp-popup__eye {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 12px;
}
.fp-popup__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(79, 70, 229, 0.06);
  margin: 0 0 14px;
}
.fp-popup__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fp-popup__title {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.3;
  margin: 0 0 8px;
}
.fp-popup__title a { color: inherit; text-decoration: none; }
.fp-popup__title a:hover { color: var(--c-brand); }
.fp-popup__sub {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 0 16px;
}
.fp-popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--c-ink);
  background: var(--c-accent);
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.fp-popup__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(199, 242, 48, 0.55);
}

/* ====================================================================
   Print stylesheet — strip site chrome (nav, footer, sidebar, share,
   helpful poll, related, newsletter, cookie banner, admin bar, etc.)
   so a guide prints cleanly. Reveals external link URLs after the
   link text so paper readers can still find sources.
   ==================================================================== */
@media print {

  /* Hide all non-content chrome. */
  .fp-skip,
  .fp-header,
  .fp-nav,
  .fp-nav-toggle,
  .fp-mega,
  .fp-search,
  .fp-theme-toggle,
  .fp-back-top,
  .fp-toc,
  .fp-share-buttons,
  .fp-share,
  .fp-save,
  .fp-popup,
  .fp-helpful-poll,
  .fp-helpful,
  .fp-related,
  .fp-relcalc,
  .fp-newsletter,
  .fp-footer,
  .fp-footer__hero,
  .fp-cookie-banner,
  .fp-trust,
  .fp-trending,
  .fp-bighero,
  .fp-section--alt .fp-card-grid,
  .fp-comments,
  .fp-author-card,
  .fp-pagination,
  .fp-mag-aside,
  #wpadminbar,
  #comments,
  iframe,
  video,
  .fp-poll,
  .fp-newsletter-inline {
    display: none !important;
  }

  /* Drop sidebar/TOC grid, full-bleed article. */
  .fp-layout,
  .fp-layout--has-toc,
  .fp-container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 11pt !important;
    line-height: 1.55 !important;
  }

  .fp-article {
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .fp-article__title,
  h1 { font-size: 22pt !important; color: #000 !important; margin: 0 0 0.4em !important; line-height: 1.15 !important; }
  h2 { font-size: 16pt !important; color: #000 !important; margin: 1.4em 0 0.4em !important; line-height: 1.2 !important; }
  h3 { font-size: 13pt !important; color: #000 !important; margin: 1.2em 0 0.3em !important; }
  h4 { font-size: 11pt !important; color: #000 !important; }

  .fp-article__meta,
  .fp-article time {
    color: #555 !important;
    font-size: 9.5pt !important;
  }

  .fp-article__content p,
  .fp-article__content li {
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.65 !important;
  }
  .fp-article__content a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  .fp-article__content blockquote {
    border-left: 3px solid #888 !important;
    background: transparent !important;
    color: #222 !important;
    padding: 0 0 0 14px !important;
    margin: 1em 0 !important;
    font-style: italic;
  }
  .fp-article__content table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .fp-article__content table th,
  .fp-article__content table td {
    border: 1px solid #888 !important;
    padding: 6px 10px !important;
    color: #000 !important;
  }

  /* Reveal external link URLs after the link so paper readers can
   * still find the source. Skip internal anchors and on-site links
   * (would just be long noise). */
  .fp-article__content a[href^="http"]:not([href*="getfinancepulse.com"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* Page break hygiene. */
  img, table, figure, blockquote, pre,
  .fp-callout, .fp-pros-cons { page-break-inside: avoid !important; }
  h1, h2, h3, h4 { page-break-after: avoid !important; }
  p, li { orphans: 3; widows: 3; }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Source URL footer printed at the end of every article. */
  .fp-article::after {
    content: "Source: Finance Pulse · getfinancepulse.com";
    display: block;
    margin: 2.5em 0 0;
    padding-top: 0.8em;
    border-top: 1px solid #888;
    font-size: 9pt;
    color: #555;
    font-family: Arial, sans-serif;
  }
}

/* ---------- Gated resources modal ---------- */
.fp-gated-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.fp-gated-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-gated-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.fp-gated-modal__content {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.fp-gated-modal__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  background: none;
  border: none;
  font-size: 28px;
  color: var(--c-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-gated-modal__close:hover {
  color: var(--c-text);
}
.fp-gated-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.fp-gated-form h3 {
  margin: 0;
  font-size: 20px;
  color: var(--c-text);
}
.fp-gated-form input[type="email"],
.fp-gated-form input[type="text"] {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.fp-gated-form input[type="email"]:focus,
.fp-gated-form input[type="text"]:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.fp-gated-form label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  cursor: pointer;
  color: var(--c-text);
}
.fp-gated-form input[type="checkbox"] {
  cursor: pointer;
}
.fp-gated-msg {
  margin: 0;
  font-size: 13px;
  color: var(--c-text);
}
.fp-gated-msg.is-err {
  color: #dc2626;
}
.fp-gated-msg.is-ok {
  color: var(--c-brand);
}

/* ---------- Single resource page (/resources/{slug}/) ---------- */
.fp-resource-single {
  max-width: 760px;
}
.fp-resource-single__cta {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--c-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-align: center;
}
.fp-btn--lg {
  font-size: 16px;
  padding: 14px 28px;
}
.fp-resource-single__note {
  margin: var(--s-2) 0 0;
  font-size: 13px;
  color: var(--c-muted);
}
.fp-resource-single__back {
  margin-top: var(--s-5);
  font-size: 14px;
}
.fp-gate-inline__title {
  margin: 0 0 var(--s-2);
  font-size: 22px;
}
.fp-gate-inline {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 420px;
  margin: var(--s-4) auto 0;
  text-align: left;
}
.fp-gate-inline input[type="email"] {
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 15px;
}
.fp-gate-inline input[type="email"]:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.fp-gate-inline__opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--c-muted);
  cursor: pointer;
}
.fp-gate-inline button[type="submit"] {
  align-self: center;
}
.fp-gate-inline__msg {
  margin: 0;
  font-size: 13px;
}
.fp-gate-inline__msg.is-err {
  color: #dc2626;
}
.fp-gate-inline.is-done {
  align-items: center;
  text-align: center;
}
.fp-gate-inline__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45), 0 0 0 4px rgba(199, 242, 48, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fp-gate-inline__link::after {
  content: "\2192";
  font-size: 18px;
  transition: transform 0.15s ease;
}
.fp-gate-inline__link:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.55), 0 0 0 5px rgba(199, 242, 48, 0.85);
}
.fp-gate-inline__link:hover::after {
  transform: translateX(4px);
}
.fp-free {
  background: var(--c-accent, #C7F230);
  color: #111;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 5px;
}