/* ============================================================
   base.css — myfinancialgo2.com Design System v8
   Two-theme: Hub (Retirement Planning) | Tranche (Short-term)
   Last updated: 2026-08-09
   v8: §8 NAV rewritten as ONE unified nav for all pages (Glow Menu
       treatment + dropdowns). Replaces the previous two nav systems
       (JS burger / CSS checkbox). Nav CSS now lives ONLY here —
       pages must not carry inline nav rules. Punchlist #1, #2, #3.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. GOOGLE FONTS IMPORT
   ──────────────────────────────────────────────────────────── */
/* Fonts loaded per-page via <link> — no @import here */


/* ────────────────────────────────────────────────────────────
   2. SHARED TOKENS  (colour-agnostic)
   ──────────────────────────────────────────────────────────── */
:root {
  /* Ink */
  --ink:         #1c2027;   /* body text */
  --ink-60:      #555b65;   /* secondary / muted text */
  --dark-btn:    #0d0d0d;   /* dark glow button background */

  /* Typography */
  --serif:  'Gloock', Georgia, serif;
  --sans:   'Figtree', system-ui, sans-serif;
  --hand:   'Caveat', cursive;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Transitions */
  --transition: 0.2s ease;

  /* ── Layout */
  --container-width: 1100px;
  --nav-height: 68px;

  /* ── Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* ── Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  /* ── Line heights */
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ── Border radii (shorthand names) */
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-xl:   24px;
  --r-pill: var(--radius-pill);

  /* ── Animation */
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Ink variants */
  --ink-2: #555b65;   /* secondary text  — alias for --ink-60 */
  --ink-3: #7c8494;   /* tertiary / muted text */

  /* ── Surfaces */
  --white:          #ffffff;
  --gray-12:        #1a1d23;   /* dark footer background */
  --line:           rgba(28,32,39,0.1); /* border / divider */
}


/* ────────────────────────────────────────────────────────────
   3. HUB THEME TOKENS  (Retirement Planning — teal / cream)
   ──────────────────────────────────────────────────────────── */
.hub-page {
  /* Backgrounds */
  --bg:           #f4f3ef;   /* page cream */
  --teal-lt:      #edf0f1;   /* light teal surface / tag bg */
  --surface-cool: #edf0f1;   /* cool off-white surface */
  --surface-mauve:#f2edf1;   /* mauve-tinted surface */
  --tag-teal-bg:  #edf0f1;
  --tag-rose-bg:  #f2edf1;

  /* Accent — teal */
  --accent:       #309397;   /* primary teal */
  --accent-dk:    #1d7477;   /* dark teal — headings, icons */
  --accent-text:  #1d5f62;   /* teal text on light surfaces */
  --accent-glow:  #4fc3c7;   /* glow / shine highlight */
  --nav-accent-rgb: 48,147,151;   /* nav hover/active tint (v8) */
  --nav-glow-rgb:   79,195,199;   /* nav active halo (v8)      */

  /* Secondary — rose */
  --secondary:    #9e5a56;   /* rose accent */
  --secondary-lt: #f2edf1;   /* mauve/rose surface */
  --secondary-tag:#f2edf1;   /* rose tag background */
  --secondary-text:#6e3533;  /* rose text */

  /* Tertiary — land/property */
  --land:         #7b5f77;   /* muted mauve — property layer */

  /* Neumorphic shadows (calibrated to --bg #f4f3ef) */
  --shadow-dk:    #d4d3cf;
  --shadow-lt:    #ffffff;
  --neu-raised:   5px 5px 14px #d4d3cf, -5px -5px 14px #ffffff;
  --neu-inset:    inset 4px 4px 10px #d4d3cf, inset -4px -4px 10px #ffffff;
  --neu-sm:       3px 3px 8px #d4d3cf, -3px -3px 8px #ffffff;

  /* Tag shadows (calibrated to teal-lt #dff0f0) */
  --neu-teal-tag: 3px 3px 8px #bdd8d8, -3px -3px 8px #f6ffff, inset 0 1px 0 rgba(255,255,255,.8);

  /* Tag shadows (calibrated to rose-tag #f4e8e7) */
  --neu-rose-tag: 3px 3px 8px #d9cac8, -3px -3px 8px #ffffff, inset 0 1px 0 rgba(255,255,255,.8);

  /* Glow shadow for dark button */
  --dark-btn-glow:
    0 0 0 1px rgba(48,147,151,.3),
    0 0 12px 2px rgba(48,147,151,.45),
    0 0 28px 4px rgba(48,147,151,.2),
    inset 0 1px 0 rgba(255,255,255,.06);

  /* Gradient — primary button */
  --btn-gradient: linear-gradient(135deg, #309397 0%, #4fc3c7 100%);
  --btn-glow:     0 4px 18px rgba(48,147,151,.45);

  /* ── Extended neumorphic shadows */
  --neu-hover: 8px 8px 20px #c8c7c3, -8px -8px 20px #ffffff;
  --neu-flat:  2px 2px 6px #d4d3cf,  -2px -2px 6px #ffffff;

  /* ── Surface variants */
  --surface-sunken: #e8e7e3;   /* slightly recessed cream */
}


/* ────────────────────────────────────────────────────────────
   4. TRANCHE THEME TOKENS  (Short-term — gold / teal bg)
   ──────────────────────────────────────────────────────────── */
.tranche-page {
  /* Backgrounds */
  --bg:           #edf0f1;   /* cool off-white */
  --gold-lt:      #f7ecd1;   /* light gold surface / tag bg */

  /* Accent — gold */
  --accent:       #C9A052;   /* primary gold */
  --accent-dk:    #a67c30;   /* dark gold — headings, icons */
  --accent-text:  #7a5a18;   /* gold text on light surfaces */
  --accent-glow:  #e8be70;   /* glow / shine highlight */
  --nav-accent-rgb: 201,160,82;   /* nav hover/active tint (v8) */
  --nav-glow-rgb:   232,190,112;  /* nav active halo (v8)       */

  /* Secondary — copper */
  --secondary:    #C4956A;   /* warm copper accent */
  --secondary-lt: #fdf5ee;   /* very light copper surface */
  --secondary-tag:#f5e6d5;   /* copper tag background */
  --secondary-text:#6b3d20;  /* copper text */

  /* Tertiary — slate */
  --slate:        #7C8494;   /* supplementary cool grey */

  /* Neumorphic shadows (calibrated to --bg #edf0f1) */
  --shadow-dk:    #cfd3d4;
  --shadow-lt:    #ffffff;
  --neu-raised:   5px 5px 14px #cfd3d4, -5px -5px 14px #ffffff;
  --neu-inset:    inset 4px 4px 10px #cfd3d4, inset -4px -4px 10px #ffffff;
  --neu-sm:       3px 3px 8px #cfd3d4, -3px -3px 8px #ffffff;

  /* Tag shadows (calibrated to gold-lt #f7ecd1) */
  --neu-gold-tag: 3px 3px 8px #d6c5a8, -3px -3px 8px #ffffff, inset 0 1px 0 rgba(255,255,255,.8);

  /* Tag shadows (calibrated to copper-tag #f5e6d5) */
  --neu-copper-tag: 3px 3px 8px #d4c4b0, -3px -3px 8px #ffffff, inset 0 1px 0 rgba(255,255,255,.8);

  /* Glow shadow for dark button */
  --dark-btn-glow:
    0 0 0 1px rgba(201,160,82,.3),
    0 0 12px 2px rgba(201,160,82,.45),
    0 0 28px 4px rgba(201,160,82,.2),
    inset 0 1px 0 rgba(255,255,255,.06);

  /* Gradient — primary button */
  --btn-gradient: linear-gradient(135deg, #C9A052 0%, #e8be70 100%);
  --btn-glow:     0 4px 18px rgba(201,160,82,.45);
}


/* ────────────────────────────────────────────────────────────
   5. BASE / RESET
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


/* ────────────────────────────────────────────────────────────
   6. BACKGROUND TREATMENT
   Pattern JPEG sits under a coloured wash.
   Nav and heading sections use solid colour (no pattern bleed).
   ──────────────────────────────────────────────────────────── */
.page-bg {
  /* Hub: supply --pattern-url: url('bg-wave.jpeg')  */
  /* Tranche: supply --pattern-url: url('bg-hex.jpeg') */
  background:
    linear-gradient(rgba(244,243,239,.88), rgba(244,243,239,.88)),
    var(--pattern-url, none) center / cover;
}

.hub-page .page-bg {
  background:
    linear-gradient(rgba(244,243,239,.88), rgba(244,243,239,.88)),
    url('bg-wave.jpeg') center / cover;
}

.tranche-page .page-bg {
  background:
    linear-gradient(rgba(237,240,241,.88), rgba(237,240,241,.88)),
    url('bg-hex.jpeg') center / cover;
}

/* Solid sections — no pattern shows through */
.section-solid {
  background: var(--bg);
}


/* ────────────────────────────────────────────────────────────
   7. TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */

/* Display headings — Gloock serif */
h1, h2, h3,
.heading-serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--accent-dk, var(--ink));
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Body — Figtree */
p, li, label, input, select, textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
}

.text-secondary {
  color: var(--ink-60);
}

/* Handwriting accent — Caveat only */
.handwriting {
  font-family: var(--hand);
  font-size: 1.5rem;       /* 24px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
}


/* ────────────────────────────────────────────────────────────
   8. NAV
   ──────────────────────────────────────────────────────────── */
/* ONE nav for every page (v8). Do NOT add inline nav CSS to a page —
   drifting copies are what made the bar jump between pages (#1).
   Desktop >=1025px: horizontal bar + hover/focus dropdowns.
   Mobile  <=1024px: burger + expandable lists, no hover effects.  */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);   /* solid — no pattern */
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.site-nav .nav-wrap {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  width: 100%;
  min-height: var(--nav-height);
  padding: 0 clamp(16px, 3vw, 40px);
}

.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav .brand img {
  width: auto;
  height: calc(var(--nav-height) * 0.85);
  max-height: calc(var(--nav-height) * 0.85);
  object-fit: contain;
}

/* ---- menu container ---- */
.site-nav .nav-menu { display: flex; align-items: center; }

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.site-nav .nav-links li { position: relative; }

.site-nav .nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-60);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition),
              box-shadow var(--transition);
}

.site-nav .nav-links a:hover {
  color: var(--accent-dk, var(--accent));
  background: rgba(var(--nav-accent-rgb, 48,147,151), .08);
}

/* Glow Menu — soft halo on the current section */
.site-nav .nav-links a.active {
  color: var(--accent-dk, var(--accent));
  background: rgba(var(--nav-accent-rgb, 48,147,151), .10);
  box-shadow:
    inset 0 0 0 1px rgba(var(--nav-accent-rgb, 48,147,151), .20),
    0 6px 18px -8px rgba(var(--nav-accent-rgb, 48,147,151), .75),
    0 0 22px -6px rgba(var(--nav-glow-rgb, 79,195,199), .55);
}

.site-nav .nav-links a:focus-visible,
.site-nav .sub-toggle:focus-visible,
.site-nav .nav-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- dropdown trigger (separate from the real hub link) ---- */
.site-nav .sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-60);
  cursor: pointer;
  transition: transform var(--transition), color var(--transition);
}
.site-nav .sub-toggle svg { width: 12px; height: 12px; }
.site-nav .has-sub:hover > .sub-toggle,
.site-nav .has-sub.open > .sub-toggle { color: var(--accent); }
.site-nav .has-sub.open > .sub-toggle { transform: rotate(180deg); }

/* ---- dropdown panel (rounded, floating) ---- */
.site-nav .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 10;
  min-width: 262px;
  padding: 8px;
  list-style: none;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  box-shadow:
    0 20px 44px -14px rgba(15,40,42,.30),
    0 0 0 1px rgba(var(--nav-accent-rgb, 48,147,151), .06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
}
/* invisible bridge so the pointer can cross the 12px gap */
.site-nav .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
/* NB: focus-within is scoped to the PANEL, not the whole <li>. If it sat on the
   <li>, the toggle button keeping focus after Escape would hold the panel open
   and Escape would appear to do nothing. */
.site-nav .has-sub:hover > .sub-menu,
.site-nav .sub-menu:focus-within,
.site-nav .has-sub.open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Escape wins over hover until the pointer leaves and comes back. */
.site-nav .nav-links li.has-sub.esc-closed > .sub-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.site-nav .sub-menu a {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .95rem;
  white-space: normal;
}

/* ---- burger (hidden on desktop) ---- */
.site-nav .nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: var(--bg);
}
.site-nav .nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* CTA lives in the bar on desktop, inside the menu on mobile */
.site-nav .nav-cta-mob { display: none; }

/* ---- MOBILE / TABLET: burger + expandable lists (no hover, no float) ---- */
@media (max-width: 1024px) {
  .site-nav .nav-wrap { flex-wrap: wrap; }
  .site-nav .nav-burger { display: inline-flex; }
  .site-nav .nav-cta    { display: none; }
  .site-nav .nav-cta-mob { display: block; margin-top: 14px; }

  .site-nav .nav-menu {
    display: none;
    order: 3;
    flex-basis: 100%;
    padding: 4px 0 16px;
  }
  .site-nav.open .nav-menu { display: block; }

  .site-nav .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav .nav-links > li { border-top: 1px solid rgba(0,0,0,.08); }
  .site-nav .nav-links > li > a {
    flex: 1;
    padding: 14px 8px;
    border-radius: 10px;
    font-size: 1.1rem;
  }
  /* row = link + disclosure button side by side */
  .site-nav .has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-nav .sub-toggle {
    width: 44px;
    height: 44px;
    margin-left: 0;
    border-radius: 10px;
  }
  .site-nav .sub-toggle svg { width: 14px; height: 14px; }

  /* dropdown becomes an in-flow expandable list */
  .site-nav .sub-menu {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    margin: 0 0 6px;
    padding: 0 0 6px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav .sub-menu::before { display: none; }
  .site-nav .has-sub:hover > .sub-menu,
  .site-nav .has-sub:focus-within > .sub-menu { display: none; }
  .site-nav .has-sub.open > .sub-menu { display: block; }
  .site-nav .sub-menu a { padding: 12px 10px; font-size: 1rem; }

  /* the active glow is too heavy on a stacked list */
  .site-nav .nav-links a.active {
    box-shadow: inset 0 0 0 1px rgba(var(--nav-accent-rgb, 48,147,151), .20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-links a,
  .site-nav .sub-toggle,
  .site-nav .sub-menu { transition: none; }
}


/* ────────────────────────────────────────────────────────────
   9. TAGS  (3D raised neumorphic pills)
   Each colour variant has its shadow calibrated to its own bg.
   ──────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

/* Hub — teal tag */
.hub-page .tag-teal {
  background: var(--tag-teal-bg);
  color: #1d5f62;
  box-shadow: var(--neu-teal-tag);
  border-color: rgba(48,147,151,.12);
}

/* Hub — rose tag */
.hub-page .tag-rose {
  background: var(--tag-rose-bg);
  color: #6e3533;
  box-shadow: var(--neu-rose-tag);
  border-color: rgba(158,90,86,.12);
}

/* Hub — land/mauve tag */
.hub-page .tag-land {
  background: #ede6ec;
  color: #4e3b4b;
  box-shadow: 3px 3px 8px #cfc8ce, -3px -3px 8px #ffffff, inset 0 1px 0 rgba(255,255,255,.8);
  border-color: rgba(123,95,119,.12);
}

/* Tranche — gold tag */
.tranche-page .tag-gold {
  background: #f7ecd1;
  color: #7a5a18;
  box-shadow: var(--neu-gold-tag);
  border-color: rgba(201,160,82,.12);
}

/* Tranche — copper tag */
.tranche-page .tag-copper {
  background: #f5e6d5;
  color: #6b3d20;
  box-shadow: var(--neu-copper-tag);
  border-color: rgba(196,149,106,.12);
}

/* Tranche — slate tag */
.tranche-page .tag-slate {
  background: #e8eaed;
  color: #4a5260;
  box-shadow: 3px 3px 8px #c8cdd0, -3px -3px 8px #ffffff, inset 0 1px 0 rgba(255,255,255,.8);
  border-color: rgba(124,132,148,.12);
}


/* ────────────────────────────────────────────────────────────
   10. CARDS  (neumorphic raised surface)
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--neu-raised);
}

.card-inset {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--neu-inset);
}

/* Coloured accent card (uses teal-lt / gold-lt surface) */
.hub-page .card-accent {
  background: var(--teal-lt);
  box-shadow: 5px 5px 14px #bdd8d8, -5px -5px 14px #f6ffff;
}

.tranche-page .card-accent {
  background: var(--gold-lt);
  box-shadow: 5px 5px 14px #d6c5a8, -5px -5px 14px #ffffff;
}




/* Hub surface utilities */
.hub-page .card-cool,
.hub-page .surface-cool {
  background: var(--surface-cool);
}

.hub-page .card-mauve,
.hub-page .surface-mauve {
  background: var(--surface-mauve);
}

.hub-page .icon-cool {
  background: var(--surface-cool);
  color: var(--accent);
}

.hub-page .icon-mauve {
  background: var(--surface-mauve);
  color: var(--secondary);
}

/* ────────────────────────────────────────────────────────────
   11. CALLOUT  (highlighted info block)
   ──────────────────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--teal-lt);
  padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  color: var(--ink);
}

.callout strong {
  color: var(--accent-dk, var(--accent));
}

.callout-rose {
  border-left-color: var(--secondary);
  background: var(--secondary-lt);
}

.callout-rose strong {
  color: var(--secondary-text, var(--secondary));
}


/* ────────────────────────────────────────────────────────────
   12. SIDEBAR CARD  (3D raised, coloured background)
   ──────────────────────────────────────────────────────────── */
.sidebar-card {
  border-radius: var(--radius-md);
  padding: 20px;
}

.hub-page .sidebar-card {
  background: var(--teal-lt);
  box-shadow: 5px 5px 14px #bdd8d8, -5px -5px 14px #f6ffff;
  border: 1px solid rgba(48,147,151,.12);
}

.hub-page .sidebar-card .sidebar-heading {
  font-family: var(--serif);
  color: var(--accent-dk);
}

.tranche-page .sidebar-card {
  background: var(--gold-lt);
  box-shadow: 5px 5px 14px #d6c5a8, -5px -5px 14px #ffffff;
  border: 1px solid rgba(201,160,82,.12);
}

.tranche-page .sidebar-card .sidebar-heading {
  font-family: var(--serif);
  color: var(--accent-dk);
}


/* ────────────────────────────────────────────────────────────
   13. BUTTONS  (three variants — beratberkay/button-1 system)
   ──────────────────────────────────────────────────────────── */

/* Shared base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}

/* ── Variant A: Gradient Primary (pill shape) */
.btn-primary {
  border-radius: var(--radius-pill);
  background: var(--btn-gradient);
  color: #ffffff;
  box-shadow: var(--btn-glow);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--btn-glow), 0 8px 24px rgba(0,0,0,.12);
}

/* ── Variant B: Ghost (transparent + accent border) */
.btn-ghost {
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn-ghost:hover {
  background: var(--accent);
  color: #ffffff;
}

/* ── Variant C: Dark Glow (black bg + coloured ring glow) */
.btn-dark {
  border-radius: var(--radius-pill);
  background: var(--dark-btn);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--dark-btn-glow);
  position: relative;
}

.btn-dark:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Animated pulse dot (prepend inside .btn-dark) */
.glow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 6px 2px var(--accent-glow);
  animation: glow-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px 2px var(--accent-glow); }
  50%       { opacity: 0.5; box-shadow: 0 0 3px 1px var(--accent-glow); }
}


/* ────────────────────────────────────────────────────────────
   14. SHINE BORDER  (animated conic-gradient border)
   Usage: <div class="shine-border"><div class="shine-inner">…</div></div>
   ──────────────────────────────────────────────────────────── */
@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.shine-border {
  --shine-color: var(--accent-glow, #4fc3c7);
  position: relative;
  border-radius: var(--radius-md);
  padding: 2px;
  background: conic-gradient(from var(--a), transparent 75%, var(--shine-color) 90%, transparent 100%);
  animation: shine-rotate 3s linear infinite;
}

.shine-inner {
  background: var(--bg);
  border-radius: calc(var(--radius-md) - 2px);
  height: 100%;
  width: 100%;
}

@keyframes shine-rotate {
  to { --a: 360deg; }
}


/* ────────────────────────────────────────────────────────────
   15. SECTION HEADING BLOCK
   Solid background separating nav from patterned content.
   ──────────────────────────────────────────────────────────── */
.section-heading {
  background: var(--bg);   /* solid — pattern does not show */
  padding: 40px 24px 32px;
  text-align: center;
}

.section-heading .eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-heading h1,
.section-heading h2 {
  margin-bottom: 12px;
}

.section-heading .subtitle {
  font-size: 1.05rem;
  color: var(--ink-60);
  max-width: 560px;
  margin: 0 auto;
}


/* ────────────────────────────────────────────────────────────
   16. UTILITY CLASSES
   ──────────────────────────────────────────────────────────── */

/* Layout */
.container      { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.grid-2         { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.gap-8          { gap: 8px; }
.gap-16         { gap: 16px; }
.gap-24         { gap: 24px; }

/* Spacing */
.section        { padding: 64px 24px; }
.section-sm     { padding: 40px 24px; }
.mt-8           { margin-top: 8px; }
.mt-16          { margin-top: 16px; }
.mt-24          { margin-top: 24px; }
.mt-40          { margin-top: 40px; }
.mb-8           { margin-bottom: 8px; }
.mb-16          { margin-bottom: 16px; }
.mb-24          { margin-bottom: 24px; }

/* Text */
.text-center    { text-align: center; }
.text-accent    { color: var(--accent); }
.text-accent-dk { color: var(--accent-dk); }
.text-muted     { color: var(--ink-60); }
.text-sm        { font-size: 0.875rem; }
.text-xs        { font-size: 0.78rem; }
.font-serif     { font-family: var(--serif); }
.font-sans      { font-family: var(--sans); }
.font-hand      { font-family: var(--hand); }
.weight-medium  { font-weight: 500; }
.weight-semibold{ font-weight: 600; }
.weight-bold    { font-weight: 700; }

/* Neu shadows */
.raised         { box-shadow: var(--neu-raised); }
.raised-sm      { box-shadow: var(--neu-sm); }
.inset          { box-shadow: var(--neu-inset); }

/* Display */
.hidden         { display: none; }


/* ────────────────────────────────────────────────────────────
   17. RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .section    { padding: 48px 16px; }
  .section-sm { padding: 32px 16px; }
  .container  { padding: 0 16px; }
}

.ft-disc,
.ft-pdpa {
  font-size: 13px;
}

/* Visible caveat / disclaimer text (shared) */
.rate-caveat {
  font-size: 13px;
  color: var(--ink-60, #55606b);
  font-style: italic;
  line-height: 1.6;
  margin: var(--space-3, 12px) 0;
}


/* ============================================================
   18. SHARED PAGE COMPONENTS — extracted 2026-07 (v7)
   Canonical source: cpf-srs.html (site design benchmark).
   Only the SAFE subset of shared burger-page components is here: components
   where every page either doesn't use them or carries a complete (superset)
   inline copy, so moving them into base.css cannot change any page. base.css
   is linked BEFORE each page's inline <style>, so a page keeping its own copy
   still overrides at equal specificity.
   NOT extracted (would change a page — see MORNING-REVIEW.md):
   - The larger burger components (.hp-btn/.hp-btn-i buttons, .burger/.nav-mob
     nav, .site-nav .nav-wrap, .page-cta, .ft-top, breadcrumb-inner children):
     the burger pages have DRIFTED and several carry partial inline copies, so
     a canonical rule here would leak its extra properties onto them.
   - The shared .site-nav/.nav-links rules (collide with the checkbox nav in
     section 8 and would restyle the product pages).
   - Bare .breadcrumb and .ft-disc/.ft-pdpa (leak onto product pages).
   - .cta-quiet (no canonical exists in cpf-srs).
   ============================================================ */

@property --ba {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

@keyframes btn-spin { to { --ba: 360deg; } }

.breadcrumb-inner {
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);

  }

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

  }

footer {
    background: var(--gray-12);
    padding: 64px 0 36px;

  }

.ft-links {
    display: flex; gap: 20px;
  }

.ft-pdpa a {
    color: rgba(255,255,255,.42);
    text-decoration: underline;
    text-underline-offset: 2px;

  }

.ft-copy {
    font-size: .775rem; color: rgba(255,255,255,.26);
  }

.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;

  }

.fade-in.in {
    opacity: 1; transform: translateY(0);
  }

.ft-policy {
    margin-top: var(--space-4);

  }

@media (prefers-reduced-motion: reduce) {
  .fade-in {
      opacity: 1; transform: none; transition: none;
    }
}


/* ============================================================
   END OF BASE.CSS
   ============================================================ */