/* -------------- GLOBAL -------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@700&display=swap');

:root {
 --primary-blue: #003E78;     /* myEcon Royal Blue */
 --brand-blue: var(--primary-blue); /* legacy alias */
  --menu-bg: #FAF9F7;          /* Warm Beige (used for mobile nav) */
  --light-blue: #F4F8FC;       /* Former menu background, still usable */
  --text-body: #444444;        /* Optional: default body text */
  --text-light: #888888;       /* Optional: lighter gray text */
  --white: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: #ffffff;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

/* -------------- HEADER -------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: env(safe-area-inset-top) 1rem 1rem 1rem;
  background: white;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.scrolled {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.logo {
  height: 78px !important;
  max-height: 78px !important;
  width: auto !important;
}

/* -------------- MENU BUTTON -------------- */
.hamburger {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  z-index: 1100;
  padding: 8px;
  border-radius: 6px;
  background-color: transparent;
}

.hamburger span {
  height: 3px;
  width: 24px;
  background: var(--primary-blue);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Morph to "X" */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------- MOBILE MENU -------------- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: var(--menu-bg);
  padding-top: calc(env(safe-area-inset-top) + 80px);
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.mobile-menu.show {
  left: 0;
}

body.no-scroll {
  overflow: hidden;
}

.mobile-menu a {
  color: var(--primary-blue);
  font-weight: 700;
}

/* -------------- SEARCH -------------- */
.search-icon {
  font-size: 20px;
  color: var(--primary-blue);
  cursor: pointer;
  z-index: 1100;
}

.search-bar-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  padding: 0.75rem 1rem;
  display: none;
  border-top: 1px solid #e5e5e5;
}

.search-bar-container input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: var(--font-body);
}

.search-bar {
  display: none;
  padding: 16px;
  background-color: var(--menu-bg); /* Was #f7fafd */
  border-bottom: 1px solid #dbe3ea;
}

.search-bar input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}
.search-bar.top {
  display: block;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  box-sizing: border-box;
  position: static; /* IMPORTANT — remove absolute positioning */
  z-index: auto;     /* reset stacking */
  top: auto;
  left: auto;
}
.search-bar.top input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.search-bar,
.search-bar.top {
  transition: all 0.3s ease;
}
.search-bar {
  z-index: 999;
}
#topSearchBar {
  opacity: 0;
  transition: opacity 0.3s ease 0.3s; /* delay matches menu slide */
}

.mobile-menu.show #topSearchBar {
  opacity: 1;
}
.menu-section.top-search-wrapper {
  padding: 1rem;
  margin-bottom: 0.25rem; /* or even 0.25rem */
}
.menu-section.top-search-wrapper {
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: transparent;
}

#topSearchBar.search-bar.top {
  background: transparent;
  padding: 0; /* optional to reduce spacing */
}

/* -------------- LOGIN LINK -------------- */
.login {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--primary-blue);
  font-weight: 500;
  gap: 6px;
}

/* -------------- SPACING -------------- */
header > .left-section,
header > .right-section {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.left-section {
  gap: 1rem;
}

.right-section {
  gap: 1rem;
}
#mobileMenu {
  background-color: #FAF9F7 !important;
}

#searchBar {
  background-color: #FAF9F7 !important;
}
/* Consistent height & surface */
:root{
  --hdr-h: 64px;               /* tweak: 60–72 */
  --hdr-h-scrolled: 58px;
  --hdr-shadow: 0 2px 10px rgba(0,0,0,.06);
  --hdr-hairline: 0 1px 0 rgba(0,0,0,.06) inset;
}

header{
  height: var(--hdr-h);
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; /* snug around notch */
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--hdr-hairline);
  background: rgba(255,255,255,.78); /* airy, not opaque */
}

@supports not (backdrop-filter: blur(1px)){
  header{ background:#fff; }
}
/* ============ HERO (drop-in replacement) ============ */

/* Big beige section behind everything */
.hero-wrap{
  background: var(--menu-bg);
  padding: 0 0 80px;           /* space so the card can overlap */
}

/* Image band */
.hero-slider{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;        /* clean horizontal strip */
  max-height: 360px;           /* guard on very tall screens */
  overflow: visible;           /* allow card to hang down */
}

/* Slides fade */
.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.hero-slide.active{
  opacity: 1;
  pointer-events: auto;
}

/* White card that overlaps the image a bit */
.hero-text-box{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -14%;                /* overlap amount into beige area */
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  z-index: 2;
}

/* Headline — centered and in brand blue */
.hero-text-box h1{
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 5.6vw, 26px);
  line-height: 1.3;
  color: var(--primary-blue);
  margin: 0;
  text-align: center;          /* <-- centered */
}
/* Hero card tweaks */
.hero-text-box{
  border-radius: 16px;                     /* was 14px */
  padding: 22px 18px;                      /* a hair more breathing room */
  border: 1px solid rgba(0,0,0,.06);       /* hairline stroke */
  box-shadow: 0 10px 28px rgba(0,0,0,.12); /* slightly deeper, still soft */
}
/* Headline emphasis */
.hero-text-box h1{
  font-weight: 800;                /* crisper bold */
  letter-spacing: -0.015em;        /* modern tracking */
  text-shadow: 0 1px 0 rgba(255,255,255,.35); /* gentle lift */
}

/* Dots under the card (inside beige area) */
.hero-dots{
  position: relative !important; /* neutralize any old absolute rules */
  top: auto !important;
  left: auto !important;
  transform: none !important;

  margin: 56px auto 0;          /* space below the overlapped card */
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 1;
}

.hero-dots .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ffffff;          /* plain white */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
  transition: transform .2s ease, background .2s ease;
}

.hero-dots .dot.active{
  background: var(--primary-blue); /* selected */
  box-shadow: none;
  transform: scale(1.1);
}

/* Tiny phones: reduce overlap a touch */
@media (max-width: 360px){
  .hero-text-box{ bottom: -10%; }
}
/* Hide hero dots entirely */
.hero-dots {
  display: none !important;
}
/* Contrast overlay (no HTML change) */
.hero-slider::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.00) 35%, rgba(0,0,0,.10) 100%);
  mix-blend-mode: multiply;
}
/* ensure the card can show decorations outside its box */
.hero-text-box{ overflow: visible; }

/* ===== Impact Stats (mobile-first) ===== */
.impact{
  background:#fff;
  padding:56px 20px;                 /* mobile spacing */
}
.impact__inner{ max-width:1200px; margin:0 auto; }

.impact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;    /* 2-up on mobile */
  gap:28px 20px;
  align-items:start;
  justify-items:center;
}

.impact__stat{ text-align:center; }

.impact__num{
  font-family: 'Poppins', var(--font-heading, system-ui), sans-serif;
  font-weight:900;
  font-size: clamp(4rem, 9.5vw, 7rem);  /* 2.5–4rem */
  line-height:1;
  color: var(--primary-blue, #003E78);
  transform: scale(.8);
  opacity: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease-out;
  will-change: transform, opacity;
}

.impact__label{
  margin-top:12px;
  font-family: 'Poppins', var(--font-body, system-ui), sans-serif;
  font-weight:600;
  font-size: clamp(1rem, 4vw, 1.75rem);
  line-height:1.35;
  color:#0A0A0A;                     /* dark ink; adjust if needed */
  max-width:22ch;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .45s ease-out .2s, transform .45s ease-out .2s;
}

/* When section is in view, pop numbers + fade labels */
.impact.in-view .impact__num{
  transform: scale(1);
  opacity: 1;
}
.impact.in-view .impact__label{
  opacity: 1;
  transform: translateY(0);
}

.impact__note{
  margin:40px 0 0;
  text-align:center;
  font-family: 'Poppins', var(--font-body, system-ui), sans-serif;
  font-weight:500;
  font-size: clamp(0.70rem, 2.5vw, 1rem);
  letter-spacing:.2px;
  color: var(--ink);
}

/* Tablet: still 2-up but roomier */
@media (min-width: 640px){
  .impact{ padding:54px 24px; }
  .impact__grid{ gap:36px 28px; }
}

/* Desktop: 4-up */
@media (min-width: 980px){
  .impact{ padding:80px 32px; }
  .impact__grid{ grid-template-columns: repeat(4,1fr); gap:40px 32px; }
}

/* ===== White interstitial (full-bleed) ===== */
.make-happen{
  /* full-bleed white regardless of parent bg/padding */
  background:#fff;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  /* vertical rhythm between sections */
  padding: 18px 0;               /* control the white band height */
}

.make-happen__inner{
  /* match your page container feel */
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;               /* safe side padding for mobile */
}

.make-happen__line{
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;               /* readable, not shouty */
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  line-height: 1.45;
  color: var(--primary-blue, #003E78);
  text-align: center;
  margin: 0;
}

/* Optional: a hairline divider above/below if you want more separation
.make-happen{ box-shadow: 0 1px 0 rgba(0,0,0,.06) inset, 0 -1px 0 rgba(0,0,0,.06) inset; }
*/
/* =========================
   Embedded Vimeo — Video block (gap-proof)
   ========================= */

/* the sentence under the stats */
.impact__note{
  margin: 32px 0 0;   /* restore comfortable space above the note */
}

/* ---- Section shell ------------------------------------------------- */
/* Keep the section out of flow until JS mounts it */
#promoVideo{ display:none; }

/* When mounted, use block flow (no grid), zero top spacing, and
   explicitly *break margin collapse* via a 1px transparent border. */
#promoVideo.is-mounted{
  display:block;
  margin:0 !important;
  padding:0 !important;
  border-top:1px solid transparent; /* stops collapsing in Safari/iOS */
}

/* Also kill any accidental sibling gap from the note → section hand-off */
.impact__note + #promoVideo{
  margin-top:0 !important;
}

/* Inner flex wrapper centers the “device” without adding vertical space */
#promoVideo .video-inner{
  display:flex;
  justify-content:center;
  padding:0 14px 24px;      /* normal space *below* video only */
}

/* ---- iPad-like frame ----------------------------------------------- */
#promoVideo .video-frame{
  position:relative;
  width:100%;
  max-width:720px;          /* a bit narrower than before */
  aspect-ratio:16/9;
  background:#fff;          /* bezel */
  border:2px solid #cfd4da; /* thin metallic edge */
  border-radius:26px;       /* softer, modern iPad corners */
  overflow:hidden;

  /* pop-in state */
  transform:scale(.92);
  opacity:0;
  transition:
    transform 480ms cubic-bezier(.2,.8,.2,1),
    opacity   360ms ease-out;

  /* bottom-weighted shadow (stronger) */
  box-shadow:
    0 26px 40px rgba(0,0,0,.22),
    0  2px  6px rgba(0,0,0,.06);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}

/* tiny “camera” dot for the iPad vibe */
#promoVideo .video-frame::before{
  content:"";
  position:absolute;
  top:8px; left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#9aa3ad;
  opacity:.78;
  z-index:3;
}

/* Reveal */
#promoVideo .video-frame.show{
  transform:scale(1);
  opacity:1;
}

/* Smaller on small phones so it’s not edge-to-edge */
@media (max-width:480px){
  #promoVideo .video-frame{
    max-width: 92vw;
    border-radius:24px;
  }
}

/* Optional hover lift (desktop) */
@media (hover:hover) and (pointer:fine){
  #promoVideo .video-frame.show:hover{
    transform:scale(1.01);
    box-shadow: 0 22px 48px rgba(0,0,0,.26);
  }
}

/* Fill the frame */
#promoVideo .video-embed,
#promoVideo .video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Play overlay (only if autoplay=false) */
#promoVideo .video-overlay{
  position:absolute;
  inset:0;
  margin:auto;
  width:84px; height:84px;
  display:grid; place-items:center;
  background:transparent;
  border:0; cursor:pointer; z-index:2;
  transition:transform .25s ease, opacity .25s ease;
}
#promoVideo .video-overlay:hover{ transform:scale(1.05); }
#promoVideo .video-overlay[hidden]{ opacity:0; pointer-events:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #promoVideo .video-frame{ transition:none; transform:none; opacity:1; }
}
/* Keep your .video-section / .video-frame / .video-embed rules as-is */

/* Existing Unmute pill (you already have this) */
.unmute-pill{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  z-index:3; padding:6px 10px; border-radius:14px; border:0;
  background:rgba(255,255,255,.92); color:#003E78;
  font:600 14px/1 Inter, system-ui, sans-serif;
  box-shadow:0 2px 6px rgba(0,0,0,.12); cursor:pointer;
}

/* Play/Pause controls container */
.video-ctrls {
  position: absolute;
  left: 16px;           /* slight inset for breathing room */
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

/* Play/Pause circular button */
.pp-pill {
  background: rgba(255,255,255,0.9); /* softer translucent white */
  border: none;
  border-radius: 50%;
  width: 43px;   /* slightly smaller background */
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* subtle floating effect */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* SVG icons inside the button */
.pp-pill svg {
  width: 28px;   /* enlarged for clarity */
  height: 28px;
  fill: #003E78; /* your brand blue */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover / active states */
.pp-pill:hover svg {
  transform: scale(1.1);
}

.pp-pill:active svg {
  transform: scale(0.95);
}

/* Ensure hidden controls stay gone */
#promoVideo .video-ctrls[hidden] {
  display: none !important;
}

/* ========== 6 Ways We Help You Unlock Cashflow (mobile-first) ========== */
:root{
  --cf-blue:#003E78;
  --cf-blue-2:#0A4A86;
  --cf-ink:#0A0A0A;
  --cf-gray:#5C6370;
  --cf-hair:#E6E8EB;
  --cf-chip: 999px;
}

/* Section */
.cf-showcase{ background:#fff; }
.cf-showcase__inner{ max-width:1200px; margin:0 auto; padding:44px 20px 40px; }

/* Title (≈+12%) */
.cf-title{
  font-family:Poppins, system-ui, sans-serif;
  font-weight:800;
  color:var(--cf-blue);
  font-size:clamp(34px, 6vw, 38px);  /* was clamp(24px,5.4vw,34px) */
  line-height:1.15;
  text-align:center;
  margin:0 0 10px;
}

/* Lead/description under title — centered */
#cashflowShowcase .cf__lead{
  font-family: Inter, system-ui, sans-serif;
  color:#5C6370;
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.6;
  margin: 8px auto 16px;        /* centered */
  /* max-width: 65ch; */
  text-align:center;            /* ensure center on all widths */
}

/* Tabs (chips) — single row + safe gutters */
.cf-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  padding:6px 0 8px;
}
.cf-tab{
  font:600 14px/1 Inter, system-ui, sans-serif;
  color:var(--cf-gray);
  background:transparent;
  border:1px solid var(--cf-hair);
  border-radius:var(--cf-chip);
  padding:9px 16px;
  -webkit-tap-highlight-color: transparent;
}
.cf-tab:active{ border-color:#cdd1d6; }
.cf-tab.is-active{
  color:#000;
  border-color:#000;
  background:transparent; /* clean modern look */
}

/* === Peek-friendly carousel row (full-bleed) === */
:root{
  /* drive everything from these */
  --cf-card-w: 80vw;   /* card width (try 76–82vw). You had 76vw; 80vw looks great too */
  --cf-gap: 12px;      /* space between cards */
}

/* make sure upstream doesn’t clip neighbors */
.cf-showcase,
.cf-showcase__inner,
.cf-carousel { overflow: visible; }

/* only the carousel row goes full-bleed so section padding doesn't eat the peek */
.cf-carousel{
  margin-top: 16px;
  /* negate the section's 20px side padding */
  margin-left:  -20px;
  margin-right: -20px;
}

/* horizontal track */
.cf-track{
  display: flex;
  align-items: stretch;
  gap: var(--cf-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;

  /* center the active card + equal gutters for visible peeks */
  padding-inline: max(12px, calc((100vw - var(--cf-card-w)) / 2 - var(--cf-gap) / 2));
}
.cf-track::-webkit-scrollbar{ display:none; }

/* slides */
.cf-slide{
  flex: 0 0 var(--cf-card-w);
  scroll-snap-align: center;
  transform: scale(.92);
  transition: transform 280ms cubic-bezier(.22,.61,.36,1);
}
.cf-slide.is-active{ transform: scale(1); }

/* tiny phones: give a touch more peek automatically */
@media (max-width: 360px){
  :root{ --cf-card-w: 78vw; }
}

/* Card */
.cf-card{
  position:relative;
  height:540px;                     /* you said height is good */
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.06); /* ultra-soft */
  background:#000; /* fallback while bg loads */
}

/* Background + overlay */
.cf-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.cf-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Foreground mockups — lowered ~8% */
.cf-mockups{
  position:absolute;
  left:18px; right:18px;
  /* previously: inset:16px 18px auto 18px; top was ~16px */
  top:60px;                         /* ~16px + ~8% of 540px ≈ 60px */
  text-align:center;
}
.cf-mockup{
  max-width:87%;
  height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.cf-mockup--secondary{
  position:absolute; right:8%; bottom:-19px;
  max-width:22%;
  transform:rotate(-2deg);
}

/* Glow helpers */
.mockup--glow-blue{ filter: drop-shadow(0 15px 18px rgba(0,62,120,.45)); }
.mockup--glow-white{ filter: drop-shadow(0 19px 25px rgba(255,255,255,.75)); }

/* Text block — nudged 5% higher */
.cf-text{
  position:absolute;
  left:8vw;
  right:18px;
  bottom:calc(18px + 1%);   /* push upward ~5% of card height */
  color:#fff;
}
.cf-card__title{
  font-family:Poppins, system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(18px,4.6vw,22px);
  line-height:1.2; margin:0 0 10px;
}
/* Blurb: no truncation */
.cf-card__blurb{
  font:400 clamp(14px,3.6vw,16px)/1.55 Inter, system-ui, sans-serif;
  margin:0;
  display:block;                 /* cancel -webkit-box */
  overflow:visible;              /* cancel clipping */
  -webkit-line-clamp:unset;      /* for Safari 16.4+ (safe no-op elsewhere) */
  -webkit-box-orient:initial;
	text-align:left;
	width:100%;
	max-width:1100px !important;
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .cf-slide{ transition:none; }
  .cf-track{ scroll-behavior:auto; }
}

/* ============================
   TESTIMONIALS (clean backgrounds, same look)
============================ */

/* Section scaffold – keep section itself white; no full-bleed tricks */
.ts-section{
  background:#fff;
  padding-top:72px;           /* your chosen spacing */
  position:relative;
  isolation:isolate;          /* stop ancestor paints */
}

/* Header */
.ts-head{
  /* max-width:640px;*/
  margin:0 auto;
  padding:0 16px 8px;         /* tighter gap under title */
}
.ts-title{
  font-family:'Poppins',sans-serif;
  font-weight:400;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--cf-blue);
  max-width:900px;
  margin:0 0 8px;
}
.ts-sub{
  font-family:Inter,system-ui,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--text-body);
  margin:0;
  text-align:center !important;
}

/* Carousel rail */
.ts-carousel{
  margin-top:20px;
  padding:0 20px;             /* side gutters */
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;   /* precise snap */
  scroll-padding-left:20px;
  scroll-padding-right:20px;
  /*
  scroll-snap-stop:normal;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  */
}
/* .ts-carousel::-webkit-scrollbar{ display:none; } */

/* Card */
.ts-card{
  flex:0 0 85%;
  max-width:360px;
  min-height:320px;
  border-radius:14px;
  padding:18px 20px 18px;
  color:var(--primary-blue);
  /* exact visual surface you had */
  background:var(--warm-beige);
  background-image:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0) 40%);
  background-blend-mode:multiply;
  box-shadow:0 6px 10px rgba(0,0,0,.08);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease;
  /* scroll-snap-align:start;
  scroll-snap-stop:always; */
  border:1px solid lightgray;
}
.ts-card.ts-active{
  /*
  transform:scale(1.012);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  */
}

/* Avatar + quote icon */
.ts-avatar{
  width:120px;height:120px;border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  position:relative; top:-10px; margin-bottom:-6px;
}
.ts-quoteicon{ width:35px;height:35px;margin-top:8px;opacity:.7; }
.ts-quoteicon svg{ width:100%;height:100%;display:block; }

/* Quote text & clamp */
.ts-quote{
  display:block;margin:12px 0 0;
  font-family:'Inter',sans-serif;
  font-size:14px; line-height:1.45;
  color:var(--ink,#000);
}
.ts-card:not(.is-expanded) .ts-quoteText{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ts-card.is-expanded .ts-quote{ font-size:15.5px; }

/* +More */
.ts-more{
  display:inline-block;
  margin-left:6px;
  font-weight:600;
  font-size:15px;
  border:0;background:transparent;color:var(--ink,#000);
  cursor:pointer; position:relative; z-index:1; top:-2px;
  padding:4px 2px; text-underline-offset:2px;
}
.ts-more:hover,.ts-more:active{ text-decoration:underline; }
.ts-more:focus{ outline:2px solid rgba(0,62,120,.3); outline-offset:2px; }

/* Name/role */
.ts-name{ margin:12px 0 0; font:700 15px/1.4 Inter,system-ui,sans-serif; color:var(--primary-blue); }
.ts-role{ margin-left:6px; font-weight:500; }

/* Progress underline */
.ts-progress{
  position:relative;
  height:2px;
  background:rgba(0,0,0,.08);
  margin:16px 20px 6px;
  border-radius:999px;
}
.ts-thumb{
  position:absolute;top:0;left:0;
  width:80px;height:2px;background:var(--primary-blue);border-radius:999px;
  transform:translateX(0); will-change:transform;
}

/* Stacking relative to the cashflow section below */
.ts-section, #testimonials, .testimonials{ position:relative; z-index:2; }
.cf-section{ position:relative; z-index:1; }

/* ===== IMPORTANT CLEANUPS (fix the seam) ===== */

/* Remove earlier full-bleed hack, if it exists anywhere else */
.ts-section{ left:auto; right:auto; margin-left:0; margin-right:0; width:auto; }

/* Do NOT paint white on every child – this caused the stripe */
.ts-section > *{ background:transparent; padding-left:16px; padding-right:16px; padding-top:0; padding-bottom:36px; }

/* Kill any pseudo paints that a theme might add */
.ts-section::before,
.ts-section::after{ content:none !important; background:transparent !important; box-shadow:none !important; }

/* ============================
   myEcon Membership Plans — Vertical Cards
   Scoped to #plans-v2 (fix bleed; keep beige cards)
============================ */
#plans-v2{
  --ink-h:#000;
  --ink-b:#666A70;
  --card-bg:#FAF9F7;      /* warm beige card surface */
  --brand-blue:#003E78;
  --cta-bg:#003E78;
  --cta-bg2:#0a4a86;

  background:#fff;        /* section surface stays white */
  padding:24px 0 28px;
  position:relative;
  isolation:isolate;
}

/* Neutralize any full-bleed / seam helpers accidentally nested inside */
#plans-v2 .surface,
#plans-v2 [class*="surface--"],
#plans-v2 [class*="seam"]{
  background:transparent !important;
  box-shadow:none !important;
  -webkit-clip-path:none !important;
          clip-path:none !important;
  position:static !important;
  z-index:auto !important;
}

/* Kill any pseudo paints that might create stripes */
#plans-v2::before,
#plans-v2::after{ content:none !important; background:transparent !important; box-shadow:none !important; }

/* Make sure plans does NOT paint a full-bleed layer (was causing the white strip) */
#plans-v2{ box-shadow:none; -webkit-clip-path:none; clip-path:none; }

/* ===== Head ===== */
#plans-v2 .plansv2__title{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1.39rem;
  line-height:1.15;
  color:var(--brand-blue);
  text-align:center;
  margin:0 16px 16px;
}

/* ===== Card (force beige) ===== */
#plans-v2 .planV2{
  width:min(680px,92vw);
  margin:0 auto 16px;
  background:var(--card-bg) !important;   /* beige wins */
  border-radius:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:0;
  transform:translateZ(0);
  position:relative; z-index:0;
}

/* If shared skins slip in, neutralize them */
#plans-v2 :is(.card,.ts-card,.bg-white).planV2{ background:var(--card-bg) !important; }
#plans-v2 .planV2::before,
#plans-v2 .planV2::after{ content:none !important; }

/* ===== Media ===== */
#plans-v2 .planV2__img{
  width:100%;
  height:clamp(160px,28vw,180px);
  object-fit:cover;
  border-radius:12px;
  margin:0 0 12px;
  display:block;
}

/* ===== Text ===== */
#plans-v2 .planV2__title{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1.25rem;
  line-height:1.2;
  color:var(--ink-h);
  margin:0 0 6px;
}
#plans-v2 .planV2__desc{
  font:400 .95rem/1.55 Inter,system-ui,sans-serif;
  color:var(--ink-b);
  margin:0 0 12px;
}
#plans-v2 .planV2__rule{ height:1px; width:100%; background:rgba(0,0,0,.08); margin:8px 0 10px; }
#plans-v2 .planV2__subhead{ font:700 .95rem/1.3 'Poppins',sans-serif; color:var(--ink-h); margin:8px 0 10px; }

/* ===== List ===== */
#plans-v2 .planV2__list{ list-style:none; margin:0 0 12px; padding:0; display:grid; row-gap:8px; }
#plans-v2 .planV2__list li{
  display:grid; grid-template-columns:24px 1fr; align-items:start; column-gap:8px;
  font:400 .95rem/1.55 Inter,system-ui,sans-serif; color:var(--ink-b);
}
#plans-v2 .planV2__check{ width:22px; height:22px; color:var(--brand-blue); display:grid; place-items:center; }

/* ===== Price ===== */
#plans-v2 .planV2__price{ margin:12px 0 14px; }
#plans-v2 .planV2__amount{ display:block; font:800 clamp(1.6rem,6.2vw,1.9rem)/1.05 Inter,system-ui,sans-serif; letter-spacing:-.3px; color:var(--ink-h); margin:0 0 2px; }
#plans-v2 .planV2__label{ display:block; font:500 .9rem/1.2 Inter,system-ui,sans-serif; color:var(--ink-h); }
#plans-v2 .planV2__monthly{ margin-top:6px; font:400 .95rem/1.4 Inter,system-ui,sans-serif; color:var(--ink-b); }
#plans-v2 .planV2__monthlyAmt{ font-weight:700; color:var(--ink-h); }

/* ===== CTA (unchanged visuals) ===== */
.planv2__cta,.planV2__cta{
  width:min(340px,88%); margin:14px auto 4px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px;
  font:700 1rem/1 'Poppins',sans-serif; letter-spacing:.1px;
  color:#fff; text-decoration:none; border-radius:9999px;
  position:relative; overflow:hidden; isolation:isolate;
  --cta-bg:#003E78; --cta-bg2:#0a4a86;
  background-color:var(--cta-bg);
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.12));
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 22px rgba(0,62,120,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .2s ease;
}
@supports (background: color-mix(in srgb, #000 10%, #fff 10%)){
  .planv2__cta,.planV2__cta{
    background-image:linear-gradient(100deg,
      color-mix(in srgb,var(--cta-bg) 94%,#fff 6%),
      color-mix(in srgb,var(--cta-bg2) 88%,#000 12%));
  }
}
.planv2__cta:hover,.planV2__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,62,120,.22), inset 0 1px 0 rgba(255,255,255,.45); }
.planv2__cta:focus-visible,.planV2__cta:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--cta-bg) 25%, #fff 75%),
    0 0 0 6px color-mix(in srgb,var(--cta-bg) 55%, transparent 45%),
    0 10px 22px rgba(0,62,120,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.planv2__cta:active,.planV2__cta:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(0,62,120,.22), inset 0 1px 0 rgba(255,255,255,.3); }
.planv2__cta::after,.planV2__cta::after{
  content:""; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateX(0) rotate(-45deg); transition:transform .2s ease, opacity .2s ease; opacity:.95; margin-left:2px;
}
.planv2__cta:hover::after,.planV2__cta:hover::after{ transform:translateX(4px) rotate(-45deg); }
.planv2__cta::before,.planV2__cta::before{
  content:""; position:absolute; left:50%; top:50%; width:0; height:0;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%);
  transform:translate(-50%,-50%); opacity:0;
  transition:width .45s ease, height .45s ease, opacity .55s ease; pointer-events:none; z-index:0;
}
.planv2__cta:active::before,.planV2__cta:active::before{ width:220%; height:220%; opacity:1; }
.planv2__cta > *, .planV2__cta > *{ position:relative; z-index:1; }
.planv2__cta[aria-disabled="true"], .planV2__cta[aria-disabled="true"]{ opacity:.6; pointer-events:none; filter:grayscale(.1); }
@media (prefers-reduced-motion: reduce){
  .planv2__cta,.planV2__cta,
  .planv2__cta::before,.planV2__cta::before,
  .planv2__cta::after,.planV2__cta::after{ transition:none !important; }
}

/* =========================
   Our Standalone Products / Tools
   (warm beige section; no strips)
========================= */
:root{ --warm-beige:#FAF9F7; }

.tools-section{
  --surface: var(--warm-beige);
  background: var(--surface);
  padding: 40px 0;            /* you can bump to 48px if desired */
  position: relative;
  isolation: isolate;

  /* paint full-bleed beige so edges never show white */
  box-shadow: 0 0 0 100vmax var(--surface);
  -webkit-clip-path: inset(0 -100vmax);
          clip-path: inset(0 -100vmax);
}

/* keep inner wrappers transparent */
.tools-section > *{ background:transparent !important; }

/* nuke any pseudo seams on the section itself */
.tools-section::before,
.tools-section::after{ content:none !important; background:transparent !important; box-shadow:none !important; }

/* ===== Header ===== */
.tools-head{ padding:0 20px; /*max-width:640px;*/ margin:0 auto; text-align:center !important; }
.tools-title{
  font-family:'Poppins',sans-serif; font-weight:500; font-size:20px; line-height:1.15; letter-spacing:-.01em;
  color:#003E78; margin:0;
}
.tools-arrows{ display:flex; gap:0; }
.tools-arrow{
  width:49px; height:49px; border-radius:999px; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#003E78;
  box-shadow:0 14px 14px rgba(0,0,0,.12);
}
.tools-arrow[disabled]{ opacity:.3; pointer-events:none; }
.tools-sub{ /* max-width:640px;*/ margin:10px auto 20px; padding:0 20px; font:400 16px/1.5 Inter, system-ui, sans-serif; color:var(--text-body,#444); text-align:center; }

/* ===== Rail ===== */
.tools-viewport{ overflow:hidden; padding-left:20px; padding:20px 0px;}
.tools-track{ display:flex; will-change:transform; transition: transform .3s cubic-bezier(.22,.61,.36,1); touch-action:none; }

/* ===== Card ===== */
.tool-card{
  flex:0 0 85vw; max-width:360px; min-height:380px;
  background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.10);
  padding:14px; margin-right:14px;
  display:flex; flex-direction:column; gap:10px; contain:content; cursor:default;
}
.tool-card:last-child{ margin-right:10px; }

.tool-name{
  font:800 22px/1.15 'Poppins',sans-serif; color:var(--primary-blue); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tool-desc{
  font:400 14px/1.5 Inter, system-ui, sans-serif; color:#666A70; margin:0;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  height:110px;
}

/* Media */
.tool-media{ margin-top:67px; height:clamp(140px,42vw,180px); display:flex; justify-content:center; align-items:flex-end; }
.tool-media img{ height:138%; max-height:138%; width:auto; object-fit:contain; }

/* CTA */
.tool-cta{
  align-self:flex-start; display:inline-block; padding:8px 0;
  font:600 13px/1.2 Inter, system-ui, sans-serif; color:var(--brand-blue,#003E78);
  text-decoration:underline; text-underline-offset:3px;
}
.tool-cta:hover,.tool-cta:focus{ text-decoration-thickness:2px; outline:none; }
/* .tool-cta::after{ content:" ›"; font-weight:700; } */

@media (max-width:480px){ .tool-card{ min-height:400px; } }

/* Safety: if global seam/surface utilities paint children, keep them transparent here */
.tools-section .surface,
.tools-section .seam,
.tools-section [class*="surface"],
.tools-section [class*="seam"]{ background:transparent !important; box-shadow:none !important; }


/* ===== Have more questions? — section (mobile-first) ===== */
:root{
  --faq-bg: #fff;    /* warm beige band */
  --faq-ink-h: #003E78; /* title (brand navy) */
  --faq-ink-b: #666A70; /* body gray */
}

#faq-teaser.faq-teaser{
  background: var(--faq-bg);
  padding: 28px 16px 32px;
  margin-top: 20px; /* adjust to taste */
}

.faq-teaser__inner{
  max-width: 680px;
  margin: 0 auto;
  text-align: center; /* mobile */
}

#faq-teaser h2{
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 5.6vw, 1.75rem);
  line-height: 1.15;
  color: var(--faq-ink-h);
  margin: 0 0 10px;
}

.faq-teaser__desc{
  font: 400 .95rem/1.6 Inter, system-ui, sans-serif;
  color: var(--faq-ink-b);
  margin: 0 auto 16px;
  max-width: 58ch;
}

/* Use your universal CTA styles. We only add layout constraints here.   */
/* Works whether your project uses .planv2__cta or .planV2__cta casing. */
.faq-teaser__cta{
  width: min(340px, 88%);
  margin: 14px auto 4px;
  display: inline-flex;
  justify-content: center;
}

/* ---------- Branded Surfaces + Seams (unified, smooth tops) ---------- */
:root{
  /* neutral, non-blue haze */
  --surface-white: #ffffff;
  --surface-haze:  #F4F5F7;      /* warmer than blue-ish grays */
  --surface-beige: #FAF9F7;

  /* global seam tuning */
  --seam-h: 96px;                /* bottom seam height */
  --seam-top-h: 64px;            /* top softness height */
  --seam-top-strength: .18;      /* .12–.24 = subtle–strong */

  /* visual rhythm */
  --section-pad-t: 40px;
  --section-pad-b: 48px;

  /* card coherence */
  --card-radius: 16px;
  --card-shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* Full-bleed painter: use ONLY on the SECTION element */
.surface{
  position: relative;
  background: transparent;
  box-shadow: 0 0 0 100vmax transparent;
  -webkit-clip-path: inset(0 -100vmax);
          clip-path: inset(0 -100vmax);
}
.surface--white { background: var(--surface-white); box-shadow: 0 0 0 100vmax var(--surface-white); }
.surface--haze  { background: var(--surface-haze);  box-shadow: 0 0 0 100vmax var(--surface-haze);  }
.surface--beige { background: var(--surface-beige); box-shadow: 0 0 0 100vmax var(--surface-beige); }

/* Keep common inner wrappers transparent so they don’t repaint */
.surface > .container,
.surface > .wrap,
.surface > .rail,
.surface > *:not(.seam-mask){
  background: transparent !important;
}

/* Soft seams (bottom fades) */
.seam{ position: relative; isolation: isolate; }
.seam::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  width:100vw; height:var(--seam-h);
  bottom:-1px; pointer-events:none; z-index:0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;  /* iOS hairline insurance */
}
.seam--to-white.seam::after{ background: linear-gradient(to top, var(--surface-white) 0%, rgba(255,255,255,0)); }
.seam--to-haze .seam::after, .seam--to-haze.seam::after{
  background: linear-gradient(to top, var(--surface-haze) 0%, rgba(244,245,247,0));
}
.seam--to-beige.seam::after{ background: linear-gradient(to top, var(--surface-beige) 0%, rgba(250,249,247,0)); }

/* New: smooth TOP “catch” on the section that begins a new surface */
.seam--top-soft{ position: relative; isolation: isolate; }
.seam--top-soft::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:-1px; width:100vw; height:var(--seam-top-h);
  pointer-events:none; z-index:0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}
.surface--white.seam--top-soft::before{
  background: linear-gradient(to bottom,
    rgba(255,255,255,var(--seam-top-strength)) 0%,
    rgba(255,255,255,0) 100%);
}
.surface--haze.seam--top-soft::before{
  background: linear-gradient(to bottom,
    rgba(244,245,247,var(--seam-top-strength)) 0%,
    rgba(244,245,247,0) 100%);
}
.surface--beige.seam--top-soft::before{
  background: linear-gradient(to bottom,
    rgba(250,249,247,var(--seam-top-strength)) 0%,
    rgba(250,249,247,0) 100%);
}

/* Safety: never let headings or nested elements paint seams/surfaces */
:where(.surface,.seam) :is(.surface,.seam),
:where(h1,h2,h3,h4,h5,h6,[class*="__title"])::before,
:where(h1,h2,h3,h4,h5,h6,[class*="__title"])::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-clip-path: none !important; clip-path: none !important;
  position: static !important;
}

/* Optional: unify section spacing for the main bands */
:where(#cashflowShowcase,#testimonials,#plans-v2,.tools-section,#faq-teaser){
  padding-top: var(--section-pad-t);
  padding-bottom: var(--section-pad-b);
}

/* Card coherence (keeps your existing look, just standardizes feel) */
:is(.ts-card,.planV2,.tool-card){
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background-clip: padding-box;
}

/* Plans: keep cards beige and above fades */
#plans-v2 .planV2{
  background: var(--surface-beige) !important;
  position: relative; z-index: 1;
}

/* If you previously had full-bleed on #plans-v2, neutralize it */
#plans-v2{ box-shadow:none; -webkit-clip-path:none; clip-path:none; }
/* ---------- Section-specific refinements ---------- */

/* Soften seam over the promo video */
/* Promo video: keep the top seam on top, but remove the hairline */
#promoVideo.seam--top::before{
  /* make sure we’re not re-adding a 1px hairline from any global rule */
  box-shadow: none !important;

  /* slightly taller + eased curve so there's no “edge” */
  height: 180px;

  /* very gentle 5-stop fade; last stop stays visible until ~98%,
     then goes fully transparent right at the end to avoid a hard step */
  background: linear-gradient(
    to bottom,
    rgba(250,249,247,0.50) 0%,
    rgba(250,249,247,0.36) 22%,
    rgba(250,249,247,0.18) 40%,
    rgba(250,249,247,0.06) 68%,
    rgba(250,249,247,0.00) 70%
  );

  /* iOS anti-aliasing nudge to eliminate sub-pixel seams */
  transform: translateZ(0);           /* promote to its own layer */
  will-change: transform, background; /* hint for Safari */
  box-shadow: none; /* no hairline */
}

/* if *any* global seam rule still forces a shadow on :before/:after, kill it here too */
#promoVideo.seam--top::after{ box-shadow: none !important; }

/* --- FOOTER Tokens --- */
.site-footer{
  --ink-h: #000;          /* headings */
  --ink-b: #666A70;       /* body/links */
  --brand-blue:#003E78;   /* icons + hover */
  --beige:#FFFFFF;        /* full-bleed background */

  background: var(--beige);
  padding: 28px 16px 36px;
}
.site-footer .footer__inner{
  width: min(680px,92vw);
  margin: 0 auto;
}

/* Text styles */
.footer__label{
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink-h);
  font-size: 1rem;
  margin: 0 0 0px;
}
.footer__links{
  list-style: none;
  padding: 0;
  margin: 0 0 0px;
}
.footer__link{
  display: flex;
  align-items: center;
  min-height: 44px;                 /* tap target */
  color: var(--ink-b);
  font: 400 .95rem/1.4 Inter, system-ui, sans-serif;
  text-decoration: none;
  position: relative;
  transition: color .15s ease, transform .15s ease;
}
.footer__link::after{               /* subtle chevron affordance */
  content: "›";
  position: absolute;
  right: 0;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--ink-b) 70%, #000 30%);
  opacity: .7;
}
.footer__link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 70%, #fff 30%);
  outline-offset: 3px;
  border-radius: 8px;
}
@media (hover:hover){
  .footer__link:hover{ color: var(--brand-blue); transform: translateX(2px); }
}

/* Social + legal */
.footer__social-legal{ margin-top: 8px; }
.footer__social{
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.footer__socialLink{
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--brand-blue);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer__socialLink:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 70%, #fff 30%);
  outline-offset: 3px;
}
@media (hover:hover){
  .footer__socialLink:hover{
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,62,120,.15);
  }
}
.icon{ width: 22px; height: 22px; }

.footer__legal{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 12px;
}
.footer__copyright{
  margin: 0 0 8px;
  color: var(--ink-b);
  font: 400 .9rem/1.5 Inter, system-ui, sans-serif;
}
.footer__policies{
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  color: var(--ink-b);
  font: 400 .9rem/1.4 Inter, system-ui, sans-serif;
}
.footer__policyLink{
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 2px 4px;
}
.footer__policyLink:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 70%, #fff 30%);
  outline-offset: 2px;
}
@media (hover:hover){
  .footer__policyLink:hover{ color: var(--brand-blue); }
}

/* Utilities */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.tap-row{ min-height:44px; }
.is-hidden{ display:none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .footer__link, .footer__socialLink{ transition:none !important; }
}

/* (Optional) Hide footer on member-only pages later:
   Add 'is-authenticated' to <body> when a user is logged in */
body.is-authenticated .site-footer{ display: none !important; }
.footer__copyright {
  text-align: center;
}
/* =========================================
   Footer: force full-bleed white background
   (no layout shift, no negative margins)
========================================= */
.site-footer{
  position: relative;
  background: transparent !important; /* let the pseudo-bg handle color */
}

/* Full-bleed white “backplate” */
.site-footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* centers the plate to the viewport */
  width: 100vw;                /* span entire viewport width */
  height: 100%;
  background: #fff;
  z-index: -1;                 /* sits behind footer content */
}

/* Make sure inner content doesn't reintroduce tint */
.site-footer .footer__inner,
.site-footer::after{
  background: transparent !important;
}

/* If your page wrapper clips overflow, keep the plate visible */
html, body { overflow-x: hidden; }
/* =======================================================
   LOGIN PAGE (mobile-first) — /login.html
   Scope: #login to avoid side effects
======================================================= */
#login{
  /* tokens */
  --ink-h: #000;
  --ink-b: #666A70;
  --brand-blue: #003E78;
  --blue-deep: #0A4A86;
  --rule: rgba(0,0,0,.10);
  --field-border: #DADDE3;
  --field-bg: #fff;

  background:#fff;               /* full bleed white */
  padding: 24px 16px 40px;
  padding-top: 36px;             /* keeps space under sticky header */
}
#login .login__inner{
  max-width: min(680px, 92vw);
  margin: 0 auto;
}
#login .login__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2rem);
  line-height: 1.15;
  color: var(--brand-blue);
  margin: 0 0 8px;
}
#login .login__rule{
  height:1px; width:100%;
  background: var(--rule);
  margin: 0 0 18px;
}

/* ---------- Form & fields ---------- */
/* anchor icon to the input itself */
#login .field__control{ position: relative; }
#login .field__control input{ padding-left: 40px; } /* room for icon */
#login .field__control .field__icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#98A2B3; pointer-events:none;
}
#login .field__control .lock{ width:20px; height:20px; }

/* label + show/hide bar */
#login .field__labelbar{
  display:flex; align-items:center; justify-content:space-between;
  margin: 0 0 8px;
}

#login .showpw{
  background:none; border:0; padding:10px 0; margin: -10px 0;
  color: var(--brand-blue);
  font: 500 14px/1 Inter, system-ui, sans-serif;
  text-decoration: underline;
}

/* inputs */
#login input[type="text"],
#login input[type="password"]{
  width:100%;
  height:48px;
  padding:12px 14px;
  border:1px solid var(--field-border);
  border-radius:8px;
  background: var(--field-bg);
  font: 400 16px/1 Inter, system-ui, sans-serif;
  color: var(--ink-h);
}

/* lock icon inside password */
#login .field--password{ position: relative; }
#login .field--password .field__icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#98A2B3;
  pointer-events:none;
}
#login .field--password .field__icon .lock{ width:20px; height:20px; }

/* add left padding to make room for icon */
#login .field--password input[type="password"]{
  padding-left: 40px;
}

/* focus ring (nice & accessible) */
@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  #login input:focus{
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 70%, #fff 30%);
  }
}
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  #login input:focus{
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 3px #2B6AA8; /* fallback */
  }
}

/* helper/caps hint */
#login .field__help{
  margin: 6px 0 0;
  font: 400 13px/1.3 Inter, system-ui, sans-serif;
  color: #B42318;
}

/* Remember me */
#login .remember{
  display:flex; align-items:center; gap:10px;
  margin: 6px 0 18px;
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  color: var(--ink-b);
}
#login .remember input{ width:18px; height:18px; }

/* ---------- CTA ----------
   Reuse your universal .planV2__cta, add .btn--full for forms */
.planV2__cta.btn--full{
  width:100%;
  margin: 8px 0 12px;
  justify-content:center;
}

/* remove the default right chevron (if your universal CTA adds one) */
.planV2__cta.btn--full::after{ display:none; }

/* disabled state for real <button disabled> */
.planV2__cta:disabled{
  opacity:.6; pointer-events:none; filter: grayscale(.1);
}

/* Recovery links */
#login .login__recovery{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin: 12px 0 0;
}
#login .login__recovery a{
  color: var(--brand-blue);
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  text-decoration: underline;
}

/* (Optional placeholders for later breakpoints) */
@media (min-width: 768px){
  /* tablet placeholder */
}
@media (min-width: 1024px){
  /* desktop placeholder */
}
/* =========================================
   Universal CTA (GLOBAL) — brand blue pill
   Applies anywhere .planV2__cta is used
========================================= */
:root{
  --cta-bg: #003E78;  /* myEcon blue */
  --cta-bg2:#0A4A86;  /* deeper blue */
}

.planV2__cta{
  width: min(340px, 88%); /* forms will override to 100% via .btn--full */
  margin: 14px auto 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;

  font: 700 1rem/1 'Poppins', sans-serif;
  letter-spacing: .1px;
  color: #fff;
  text-decoration: none;
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* solid color + simple overlay gradient (works everywhere) */
  background-color: var(--cta-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 22px rgba(0,62,120,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .2s ease;
}

/* upgrade to fancy gradient when supported */
@supports (background: color-mix(in srgb, #000 10%, #fff 10%)){
  .planV2__cta{
    background-image:
      linear-gradient(100deg,
        color-mix(in srgb, var(--cta-bg) 94%, #fff 6%),
        color-mix(in srgb, var(--cta-bg2) 88%, #000 12%));
  }
}

/* hover/focus/active */
.planV2__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,62,120,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.planV2__cta:active{ transform: translateY(0); }
.planV2__cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cta-bg) 25%, #fff 75%),
    0 0 0 6px color-mix(in srgb, var(--cta-bg) 55%, transparent 45%),
    0 10px 22px rgba(0,62,120,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* keep brand color when disabled (just mute the shadow) */
.planV2__cta:disabled{
  opacity: 1;                /* don't gray it out */
  filter: saturate(.9) brightness(.98);
  box-shadow: 0 8px 18px rgba(0,62,120,.14), inset 0 1px 0 rgba(255,255,255,.28);
  cursor: not-allowed;
  pointer-events: none;
}

/* full-width variant for forms */
.planV2__cta.btn--full{ width:100%; margin: 8px 0 12px; }
/* ==========================================================
   ABOUT – HERO INTRO (Mobile-first)
   Section: #about-hero
   Purpose: Clean, white, text-only intro with title + rule + story
   ========================================================== */

#about-hero{
  /* Tokens (scoped) */
  --ink-h: #003E78;        /* heading blue */
  --ink-b: #666A70;        /* body gray */
  --rule: rgba(0,0,0,.10); /* divider */

  background:#fff;               /* full-bleed white (kills any inherited tints) */
  padding:32px 16px 36px;        /* top / sides / bottom */
}

#about-hero .about-hero__inner{
  width:min(680px, 92vw);
  margin:0 auto;
  text-align:center;             /* mobile center per spec */
}

/* Title */
#about-hero .about-hero__title{
  font-family:'Poppins', system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem, 6.2vw, 2.2rem);
  line-height:1.15;
  color:var(--ink-h);
  margin:0 0 10px;
}

/* Divider rule (subtle) */
#about-hero .about-hero__rule{
  height:1px;
  width:100%;
  background:var(--rule);
  margin:0 auto 16px;
}

/* Story paragraphs */
#about-hero .about-hero__lede{
  font:400 1rem/1.65 Inter, system-ui, sans-serif;
  color:var(--ink-b);
  max-width:70ch;
  margin:0 auto 6px;            /* tight stack */
}

/* -------- Placeholders for future breakpoints (no desktop styles now) -------- */
@media (min-width:768px){
  /* optional later: text-align:left; bump title size; keep width cap */
  /* #about-hero .about-hero__inner{ text-align:left; } */
}
@media (min-width:1024px){
  /* optional later: widen container a bit if desired */
}
/* =============================
   ABOUT – Our impact (stats)
   ============================= */
#about-impact{
  /* tokens */
  --ink-h:#003E78;             /* myEcon blue (headings only) */
  --ink-b:#666A70;             /* body gray */
  --rule:rgba(0,0,0,.12);      /* thin rules */
  --accent:rgba(0,0,0,.18);    /* left accent line */

  background:#fff;             /* full-bleed white */
  padding:28px 16px 32px;
}
#about-impact .impact__inner{
  width:min(680px,92vw);
  margin:0 auto;
}

/* Title + lede */
#about-impact .impact__title{
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:700;
    font-size:clamp(1.8rem, 6.2vw, 2.2rem);
  line-height:1.15;
  color:var(--ink-h);
  margin:0 0 6px;
  text-align:center;   /* ✅ Centers the title */
}
#about-impact .impact__lede{
  font:400 .95rem/1.6 Inter,system-ui,sans-serif;
  color:var(--ink-b);
  margin:0 0 16px;
  max-width:58ch;
}
#about-impact .impact__rule{
  height:1px; width:100%;
  background:var(--rule);
  margin:0 0 10px;
}

/* Stats list */
#about-impact .impact__stats{
  margin:0; padding:0; /* reset dl spacing */
}
#about-impact .impact__item{
  position:relative;
  padding:10px 0 12px 12px;   /* space for accent */
}
#about-impact .impact__item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:1px; background:var(--accent);
  border-radius:1px;
}
#about-impact .impact__value{
  font:700 clamp(1.6rem,8vw,2.1rem)/1.2 Inter,system-ui,sans-serif;
  color:#000;
  margin:0;
}
#about-impact .impact__label{
  margin:6px 0 0;
  font:500 .95rem/1.35 Inter,system-ui,sans-serif;
  color:var(--ink-b);
}

/* Closing line */
#about-impact .impact__closing{
  margin:14px 0 0;
  font:400 .95rem/1.6 Inter,system-ui,sans-serif;
  color:var(--ink-b);
}

/* Placeholders for later breakpoints (no layout change yet) */
@media (min-width:768px){
  /* (optional future tweaks) */
}
/* ==== FIX: About > Our impact layout & visibility ==== */
#about-impact .impact__stats,
#about-impact .impact__stats dl,
#about-impact .impact__stats dt,
#about-impact .impact__stats dd{
  margin:0; padding:0;
}

#about-impact .impact__stats{            /* make rows breathe */
  display:block;
}

#about-impact .impact__item{
  position: relative;
  padding: 10px 0 12px 12px;             /* space for accent line */
}

/* give each stat its own vertical gap */
#about-impact .impact__item + .impact__item{
  margin-top: 16px;
}

/* ensure the value and label are stacked blocks (some resets make them inline) */
#about-impact .impact__value{
  display:block;
  font:700 clamp(1.6rem, 8vw, 2.1rem)/1.2 Inter, system-ui, sans-serif;
  color:#000;
  margin:0;
}

#about-impact .impact__label{
  display:block;
  margin:6px 0 0;
  font:500 .95rem/1.35 Inter, system-ui, sans-serif;
  color:var(--ink-b);                     /* the gray */
}

/* keep the left accent visible and not overlapping text */
#about-impact .impact__item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:var(--accent);
  border-radius:1px;
}

/* make sure the section has enough bottom room on iOS */
#about-impact{ padding-bottom: 40px; }
/* ===========================
   About > Impact — label fix
   (append after your impact CSS)
=========================== */

/* 1) Reset dl/dt/dd inside the section so other global rules can't hide them */
#about-impact dl,
#about-impact dt,
#about-impact dd{
  margin: 0;
  padding: 0;
}

/* 2) Make sure each stat item lays out correctly */
#about-impact .impact__item{
  position: relative;
  padding: 10px 0 12px 12px;   /* space to the right of the accent line */
}

/* 3) Big number */
#about-impact .impact__value{
  display: block;              /* ensure it sits above the label */
  font: 700 clamp(1.6rem, 8vw, 2.1rem)/1.15 Inter, system-ui, sans-serif;
  color: #000;
}

/* 4) The small gray label (this is the part that was missing) */
#about-impact .impact__label{
  display: block;              /* some resets set dd to inline or none */
  margin-top: 6px;
  font: 500 .95rem/1.45 Inter, system-ui, sans-serif;
  color: #666A70 !important;   /* beat any inherited color */
  opacity: 1 !important;       /* in case a fade class hit it */
  visibility: visible !important;
}

/* 5) Left accent line (slightly darker than the top rule) */
#about-impact .impact__item::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.18);
  border-radius: 1px;
}
/* =========================================
   About > Corporate Executive Team (scoped)
   ========================================= */
#about-leadership{
  --ink-h:#000;                 /* names / headings */
  --ink-b:#666A70;              /* titles + body */
  --brand-blue:#003E78;
  --rule: rgba(0,0,0,.10);

  background:#fff;              /* full-bleed white (seam safety) */
  padding:24px 16px 36px;
}
#about-leadership .leadership__bar{
  background:var(--brand-blue);
  color:#fff;
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.2rem,5.5vw,1.4rem);
  line-height:1.15;
  text-align:center;
  padding:12px 16px;
  margin:0 0 16px;
}

/* Each leader block */
#about-leadership .leader{
  padding:16px 0;
  border-top:1px solid var(--rule);
}
#about-leadership .leader:first-of-type{ border-top:none; }

/* Photo (stacked by default) */
#about-leadership .leader__photo{
  display:block;
  width:120px; height:120px;        /* 1:1 */
  object-fit:cover;
  border-radius:8px;
  margin:0 auto 12px;               /* centered on small screens */
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* Text */
#about-leadership .leader__text{ text-align:left; }
#about-leadership .leader__name{
  margin:0;
  color:var(--ink-h);
  font:700 1.05rem/1.2 'Poppins',system-ui,sans-serif;
}
#about-leadership .leader__title{
  margin:2px 0 10px;
  color:var(--ink-b);
  font:500 .85rem/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.3px;             /* subtle strength */
  text-transform:none;             /* toggle to uppercase if you prefer */
}
#about-leadership .leader__bio{
  margin:0;
  color:var(--ink-b);
  font:400 .95rem/1.55 Inter,system-ui,sans-serif;
  max-width:72ch;
}

/* Small layout enhancement: image left on wider mobile */
@media (min-width: 480px){
  #about-leadership .leader{
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
  #about-leadership .leader__photo{
    margin:0;                      /* remove auto-centering */
    flex:0 0 120px;
  }
  #about-leadership .leader__text{ flex:1 1 auto; }
}

/* Utility for screen-reader-only headings */
.sr-only{
  position:absolute !important;
  width:1px;height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* =========================================
   SIGNUP PAGE (Page 1) — Mobile-first
   Scope: #signup …
========================================= */
#signup{
  --ink-h:#000;
  --ink-b:#666A70;
  --brand-blue:#003E78;
  --brand-blue-deep:#0A4A86;
  --field-border:#DADDE3;
  --rule:rgba(0,0,0,.10);
  --danger:#D14343;
  background:#fff;
  width:100%;
}
#signup .su-header{ width:min(680px,92vw); margin:0 auto; padding:28px 16px 8px;  align-items: center; /* centers horizontally */
  text-align: center;  /* centers the text */ }
#signup .su-title{
  font-family:'Poppins',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.85rem,6vw,2rem); line-height:1.15; color:var(--brand-blue);
  margin:0 0 6px;
}
#signup .su-sponsor{
  margin:0 0 12px; color:var(--ink-b); font:500 .95rem/1.4 Inter,system-ui,sans-serif;
}
#signup .su-sponsor__label{ opacity:.9; }
#signup .su-sponsor__name{ font-weight:600; }
#signup .su-rule{ height:1px; background:var(--rule); margin:0 0 16px; }

#signup form{ width:min(680px,92vw); margin:0 auto; padding:0 16px 40px; }

/* Sections */
#signup .su-section{ margin:18px 0 20px; }
#signup .su-section__label{
  font:700 1rem/1.2 'Poppins',system-ui,sans-serif; color:#000; margin:0 0 8px;
}
#signup .su-help{
  color:var(--ink-b); font:400 .85rem/1.6 Inter,system-ui,sans-serif; margin:0 0 12px;
}
#signup .su-fine{
  color:var(--ink-b); opacity:.9; font:400 .83rem/1.5 Inter,system-ui,sans-serif; margin:8px 0 0;
}
#signup .su-link{ color:var(--brand-blue); text-decoration:underline; }

/* Fields */
#signup .su-grid{ display:grid; gap:16px; }
#signup .su-grid--3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 420px){ #signup .su-grid--3{ grid-template-columns:1fr; } }

#signup .su-field{ display:block; }
#signup .su-field__label{
  display:block; margin:0 0 6px; color:#000;
  font:600 .95rem/1.3 Inter,system-ui,sans-serif;
}
#signup .req{ color:var(--danger); margin-left:2px; }
#signup .su-input{
  width:100%; height:48px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--field-border); background:#fff; color:#000;
  font:400 1rem/1 Inter,system-ui,sans-serif;
  transition: box-shadow .15s ease, border-color .15s ease;
}
#signup .su-input:focus{
  outline:0; border-color:transparent;
  box-shadow:0 0 0 3px rgba(0,62,120,.25);
}
#signup .su-input::placeholder{ color:color-mix(in srgb, var(--ink-b) 80%, #000 20%); }
#signup .su-input--picker{ cursor:pointer; background-image: linear-gradient(transparent,transparent); }

/* Hints & errors */
#signup .su-hint{
  margin:6px 0 0; color:var(--ink-b); font:400 .85rem/1.4 Inter,system-ui,sans-serif;
}
#signup .su-error{
  margin:6px 0 0; color:var(--danger); font:500 .85rem/1.4 Inter,system-ui,sans-serif;
}

/* Password show/hide */
#signup .su-inputWrap{ position:relative; }
#signup .su-togglePw{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--brand-blue); font:600 .9rem/1 Inter;
  padding:6px; min-width:44px;
}

/* Plan card + initials */
#signup .su-grid--plan{ display:grid; gap:16px; }
#signup .su-initials{ max-width:120px; }
#signup .su-planCard{
  border:1px solid var(--rule); border-radius:10px; padding:14px;
  background:#fff;
}
#signup .su-planCard__price{ margin:0 0 8px; color:#000; font:500 .85rem/1.5 Inter; }
#signup .su-planCard__price strong{ font-weight:700; }
#signup .su-planCard__list{ margin:0; padding-left:18px; color:var(--ink-b); font:400 .95rem/1.5 Inter; }

/* CTA */
#signup .planV2__cta.btn--full{ width:100%; margin:18px 0 0; }

/* ===== Bottom sheet pickers ===== */
#signup .sheet[hidden]{ display:none; }
#signup .sheet{ position:fixed; inset:0; z-index:1000; }
#signup .sheet__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  opacity:0; transition:opacity .2s ease;
}
#signup .sheet__panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-radius:16px 16px 0 0; padding:12px 12px 16px;
  transform: translateY(100%); transition: transform .22s ease;
  max-height:75vh; display:flex; flex-direction:column;
}
#signup .sheet.is-open .sheet__backdrop{ opacity:1; }
#signup .sheet.is-open .sheet__panel{ transform: translateY(0); }

#signup .sheet__header{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 8px; }
#signup .sheet__header h3{ margin:0; font:700 1rem/1.1 'Poppins',system-ui,sans-serif; color:#000; }
#signup .sheet__close{ background:none; border:0; font-size:1.2rem; padding:6px 8px; }

#signup .sheet__search{
  height:44px; border:1px solid var(--field-border); border-radius:8px;
  padding:10px 12px; font:400 .95rem/1 Inter; margin:0 0 10px;
}
#signup .sheet__list{ list-style:none; padding:0; margin:0; overflow:auto; }
#signup .sheet__list li button{
  width:100%; text-align:left; background:#fff; border:0; padding:12px; border-radius:10px;
  font:500 1rem/1.2 Inter; color:#000;
}
#signup .sheet__list li button:focus{ outline:0; box-shadow:0 0 0 3px rgba(0,62,120,.25); }
#signup .sheet__list li button:hover{ background:#F6F7F9; }

@media (prefers-reduced-motion: reduce){
  #signup .sheet__panel, #signup .sheet__backdrop, #signup .su-input{ transition:none !important; }
}
/* ===========================
   SIGNUP – spacing & hierarchy tune-up
   (safe to paste after existing #signup rules)
=========================== */

/* Section labels: stronger and blue */
#signup .su-section__label{
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--brand-blue);
  letter-spacing: .2px;
  margin: 22px 0 8px;              /* more air above, small gap below */
}

/* Dividers: a touch more presence + space below */
#signup .su-rule{
  height: 2px;
  background: var(--rule);         /* rgba(0,0,0,.10) from your tokens */
  margin: 16px 0 13px;                /* separate label from fields */
   border-radius: 2px;       /* optional: soft edges */
}

/* Vertical rhythm inside sections */
#signup .su-field{ margin: 0 0 10px; }        /* gap between inputs */
#signup .su-help{ margin: 0 0 10px; }         /* helper above first input */
#signup .su-fine{ margin: 8px 0 0; }          /* fine print under email */

/* Extra space *between* major sections */
#signup .su-section + .su-section{ margin-top: 24px; }

/* Labels vs. input text: clearer contrast */
#signup label{
  font: 600 .95rem/1.2 Inter, system-ui, sans-serif;  /* a bit bolder */
  color: #1f2328;                                     /* darker than body gray */
  margin: 0 0 6px;
}

/* Placeholders should be obviously lighter than typed text */
#signup input::placeholder{
  color: #9aa1a9;       /* lighter placeholder */
  opacity: 1;
}

/* Ensure inputs don’t visually collapse into the divider above */
#signup .su-field input{
  height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);   /* #DADDE3 */
  border-radius: 8px;
  background: #fff;
}

/* Make the divider between Phone and Mailing Address read clearly */
#signup .su-section--address .su-rule{ margin: 2px 0 16px; }

/* Optional: tiny top/bottom breathing room for the whole page */
#signup{ padding-bottom: 48px; }
/* ===== Signup: Membership plan layout ===== */
#signup .su-planRow{
  display:flex !important;       /* beat any legacy .su-grid rules */
  align-items:flex-start;
  gap:16px;
  margin-top:8px;
  flex-wrap:nowrap;
}

/* Initials column (fixed, narrow) */
#signup .su-planRow .su-initials{
  flex:0 0 96px;                 /* ~96px column */
  max-width:96px;
}
#signup .su-planRow .su-initials .su-input{
  width:100%;
  min-width:0;
  text-transform:uppercase;
}

/* Plan card expands */
#signup .su-planRow .su-planCard{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--field-border, #DADDE3);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
}

/* Plan name (new) */
#signup .su-planCard__name{
  margin:0 0 6px;
  font:700 0.86rem/1.2 'Poppins', system-ui, sans-serif;
  color:#000;                    /* keep label black for hierarchy */
}

/* Price & list */
#signup .su-planCard__price{ margin:0 0 8px; }
#signup .su-planCard__list{
  margin:0; padding-left:18px;
  font:400 .80rem/1.55 Inter, system-ui, sans-serif;
  color:var(--ink-b, #666A70);
}

/* Stack on very small screens to avoid squish */
@media (max-width: 360px){
  #signup .su-planRow{ flex-direction:column; }
  #signup .su-planRow .su-initials{ flex:0 0 auto; max-width:none; }
}

/* Optional: make this section header blue for clarity (your UX note) */
#signup #planLabel{
  color:var(--brand-blue, #003E78);
}
.su-planCard__fine {
  font-size: 0.85rem;
  color: var(--ink-b);
  margin-top: 8px;
   text-align: center;
  font-style: italic;
}
/* ===== Signup: UX enhancements ==================================== */
/* Light-blue “completed” fields */
:root{
  --su-filled: #EAF2FF;          /* very light blue (matches your autofill vibe) */
  --su-note-bg: #EEF5FF;         /* sticky note bg (even lighter) */
  --su-note-ink: #000000;        /* gray text for note */
}
#signup .su-input.is-filled { background: var(--su-filled); }
#signup .su-input.is-filled:focus { background: var(--su-filled); }

/* Also normalize WebKit autofill so it matches our filled color */
#signup input.su-input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--su-filled) inset !important;
  -webkit-text-fill-color: #000 !important;
}

/* Sheet scroll fixes */
.sheet{ position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; }
.sheet[hidden]{ display:none; }
.sheet__panel{
  position: absolute; left:0; right:0; bottom: -100%;
  background:#fff; border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  transition: transform .22s ease, bottom .22s ease;
  transform: translateY(10px);
}
.sheet.is-open .sheet__panel{ bottom:0; transform: translateY(0); }
.sheet__head{ padding: 14px 16px 10px; display:flex; gap:8px; align-items:center; }
.sheet__title{ font: 700 1rem/1.2 Poppins,system-ui,sans-serif; flex:1; }
.sheet__close{ background:none; border:0; font-size:20px; line-height:1; }
.sheet__body{
  max-height: min(70vh, 520px); /* ensures a scroll area */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-top: 1px solid rgba(0,0,0,.06);
}
.sheet__search{ padding: 10px 16px; }
.sheet__search input{ width:100%; height:44px; border:1px solid #DADDE3; border-radius:8px; padding:0 12px; }
.sheet__list{ list-style:none; margin:0; padding: 6px 8px 12px; }
.sheet__list li{ margin:0; }
.sheet__list button{
  width:100%; text-align:left; border:0; background:#fff;
  padding: 12px 12px; font: 500 1rem/1.25 Inter,system-ui,sans-serif;
  border-radius:8px;
}
.sheet__list button:active{ background:#F4F7FB; }

/* Membership “row” (initials + card) stays stacked on tiny screens;
   turns into side-by-side starting around 380–400px */
#signup .su-planRow{ display:grid; gap:12px; }
@media (min-width: 400px){
  #signup .su-planRow{ grid-template-columns: 128px 1fr; align-items:start; }
}

/* Sticky “don’t use back” note */
.su-stickyNote{
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 20px;
  width: min(680px, 92vw);
  padding: 10px 14px;
  background: var(--su-note-bg);
  color: var(--su-note-ink);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  font: 500 1.2rem/1.3 Inter,system-ui,sans-serif;
  text-align: center; 
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  z-index: 10000;
  display:none;                 /* JS will flip to block() when time */
}
.su-stickyNote.is-showing{ display:block; }
/* =============================
   SIGNUP PAYMENT — Page 2
   Scope everything under #signupPay
============================= */
#signupPay{
  --ink-h:#000; --ink-b:#666A70;
  --brand-blue:#003E78; --brand-blue-deep:#0A4A86;
  --field-border:#DADDE3; --rule:rgba(0,0,0,.10); --danger:#D14343;
  --su-filled:#EAF2FF; --su-note-bg:#EEF5FF; --su-note-ink:#000;
  background:#fff; width:100%;
  font-family: Inter, system-ui, sans-serif;
}

/* Header (same as Page 1) */
#signupPay .su-header{ width:min(680px,92vw); margin:0 auto; padding:28px 16px 8px; text-align:center; 
 }
#signupPay .su-title{
  font-family:'Poppins',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.85rem,6vw,2rem); line-height:1.15; color:var(--brand-blue);
  margin:0 0 6px;
}
#signupPay .su-sponsor{ margin:0 0 12px; color:var(--ink-b); font:500 .95rem/1.4 Inter,system-ui,sans-serif; }
#signupPay .su-sponsor__name{ font-weight:600; }
#signupPay .su-rule{ height:2px; background:var(--rule); margin:16px 0 16px; border-radius:2px; }

#signupPay form{ width:min(680px,92vw); margin:0 auto; padding:0 16px 56px; }

/* Sections */
#signupPay .su-section{ margin:18px 0 22px; }
#signupPay .su-section__label{
  font:700 1.1rem/1.2 'Poppins',system-ui,sans-serif; color:var(--brand-blue); letter-spacing:.2px; margin:22px 0 8px;
}
#signupPay .su-help{ color:var(--ink-b); font:400 .85rem/1.6 Inter,system-ui,sans-serif; margin:8px 0 10px; }
#signupPay .su-fine{ color:var(--ink-b); opacity:.9; font:400 .83rem/1.5 Inter,system-ui,sans-serif; margin:8px 0 0; text-align:center; }

/* Fields */
#signupPay .su-field{ display:block; margin:0 0 14px; }
#signupPay .su-field__label{ display:block; margin:0 0 6px; color:#1f2328; font:600 .95rem/1.3 Inter,system-ui,sans-serif; }
#signupPay .req{ color:var(--danger); margin-left:2px; }
#signupPay .su-input{
  width:100%; height:48px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--field-border); background:#fff; color:#000;
  font:400 1rem/1 Inter,system-ui,sans-serif;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
#signupPay .su-input:focus{ outline:0; border-color:transparent; box-shadow:0 0 0 3px rgba(0,62,120,.25); }
#signupPay .su-input.is-filled{ background:var(--su-filled); }
#signupPay input.su-input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--su-filled) inset !important;
  -webkit-text-fill-color:#000 !important;
}
#signupPay .su-input--picker{ cursor:pointer; background-image: linear-gradient(transparent,transparent); }
#signupPay .su-hint{ margin:6px 0 0; color:var(--ink-b); font:400 .85rem/1.4 Inter; }
#signupPay .su-error{ margin:6px 0 0; color:var(--danger); font:500 .85rem/1.4 Inter; }

/* Grids */
#signupPay .su-grid{ display:grid; gap:16px; }
#signupPay .su-grid--3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:420px){ #signupPay .su-grid--3{ grid-template-columns:1fr; } }

/* Amount card */
#signupPay .pay-amountCard{
  border:1px solid var(--field-border); border-radius:12px; padding:16px 14px; background:#fff;
}
#signupPay .pay-amount{
  text-align:center; color:#000; font:700 clamp(1.6rem,6.2vw,2rem)/1 Inter,system-ui,sans-serif;
}

/* Credit-card badges */
#signupPay .cc-logos{ display:flex; gap:10px; align-items:center; }
#signupPay .cc-badge{
  display:inline-grid; place-items:center; height:28px; padding:0 10px; border:1px solid var(--field-border);
  border-radius:8px; font:700 .75rem/1 Inter; color:#222; filter:grayscale(1) brightness(.15);
  user-select:none;
}

/* Agreements initials */
#signupPay .su-initials{ max-width:160px; }

/* Summary card */
#signupPay .pay-summaryCard{
  position:relative; border:1px solid var(--rule); border-radius:12px; padding:14px; background:#fff; margin-bottom:12px;
}
#signupPay .pay-edit{
  /* position:absolute; right:12px; top:10px; background:none; border:0; color:var(--brand-blue); */
  color: white !important;
  text-decoration:underline; font:600 .9rem/1 Inter; padding:6px; min-width:44px;
}
#signupPay .pay-summaryList{ margin:0; padding:0; }
#signupPay .pay-summaryList > div{ display:grid; grid-template-columns: 1fr auto; align-items:start; gap:10px; padding:10px 0; border-top:1px solid rgba(0,0,0,.06); }
#signupPay .pay-summaryList > div:first-child{ border-top:0; }
#signupPay .pay-summaryList dt{ color:#1f2328; font:600 .95rem/1.3 Inter; }
#signupPay .pay-summaryList dd{ margin:0; color:#000; font:500 .95rem/1.4 Inter; text-align:right; }
#signupPay .pay-summaryList .is-strong dd{ font-weight:700; }

/* CTA */
#signupPay .planV2__cta.btn--full{ width:100%; margin:18px 0 0; }

/* Bottom sheets (reuse Page 1 styles) */
#signupPay .sheet[hidden]{ display:none; }
#signupPay .sheet{ position:fixed; inset:0; z-index:9999; }
#signupPay .sheet__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .2s ease; }
#signupPay .sheet__panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0; padding:12px 12px 16px;
  transform:translateY(100%); transition: transform .22s ease; max-height:75vh; display:flex; flex-direction:column;
}
#signupPay .sheet.is-open .sheet__backdrop{ opacity:1; }
#signupPay .sheet.is-open .sheet__panel{ transform:translateY(0); }
#signupPay .sheet__header{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 8px; }
#signupPay .sheet__header h3{ margin:0; font:700 1rem/1.1 'Poppins',system-ui,sans-serif; color:#000; }
#signupPay .sheet__close{ background:none; border:0; font-size:1.2rem; padding:6px 8px; }
#signupPay .sheet__search{ height:44px; border:1px solid var(--field-border); border-radius:8px; padding:10px 12px; font:400 .95rem/1 Inter; margin:0 0 10px; }
#signupPay .sheet__list{ list-style:none; padding:0; margin:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#signupPay .sheet__list li button{ width:100%; text-align:left; background:#fff; border:0; padding:12px; border-radius:10px; font:500 1rem/1.2 Inter; color:#000; }
#signupPay .sheet__list li button:focus{ outline:0; box-shadow:0 0 0 3px rgba(0,62,120,.25); }
#signupPay .sheet__list li button:hover{ background:#F6F7F9; }

/* Sticky note (persistent here) */
#signupPay .su-stickyNote{
  position:fixed; left:50%; transform:translateX(-50%); bottom:20px;
  width:min(680px,92vw); padding:10px 14px; background:var(--su-note-bg); color:var(--su-note-ink);
  border:1px solid rgba(0,0,0,.08); border-radius:10px; font:500 1rem/1.3 Inter; text-align:center;
  box-shadow:0 6px 22px rgba(0,0,0,.08); z-index:10000;
}
/* Page 2: hide sponsor line */
#signupPay .su-sponsor{ display:none !important; }
#signupPay .su-header{ padding-bottom: 12px; } /* a touch tighter without sponsor */
/* Amount card */
#signupPay .pay-amountCard{
  border:1px solid var(--field-border);
  border-radius:12px;
  padding:16px 14px;
  background:#fff;
  text-align:center;
}
#signupPay .pay-amount{ font:700 clamp(1.6rem,6.2vw,2rem)/1 Inter,system-ui,sans-serif; color:#000; }

/* Brand badges (placeholder look until you drop in real SVGs) */
#signupPay .cc-logos{ display:flex; gap:10px; align-items:center; margin:6px 0 8px; }
#signupPay .cc-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 10px;
  border:1px solid var(--field-border); border-radius:8px;
  font:700 .75rem/1 Inter,system-ui,sans-serif; color:#1f2328; background:#fff;
  letter-spacing:.4px;
}

/* Agreements compact list */
#signupPay .agreeList{ list-style:none; margin:0; padding:0; }
#signupPay .agreeItem{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--rule);
}
#signupPay .agreeItem:last-child{ border-bottom:none; }
#signupPay .agreeItem > span{ flex:1 1 auto; color:#000; font:500 .95rem/1.4 Inter; }
#signupPay .agreeItem .su-initials{ flex:0 0 100px; margin:0; }
#signupPay .agreeItem .su-initials .su-input{ text-align:center; height:44px; }

/* Summary header: “Edit” link on the right of the title */
#signupPay .pay-summary .su-section__label{ display:flex; align-items:center; gap:10px; }
#signupPay .pay-edit{
  margin-left:auto; font:600 .95rem/1 Inter; color:var(--brand-blue); text-decoration:underline;
}
/* --- Dividers appear ABOVE each section title (auto) --- */
#signupPay .su-section .su-rule{ display:none; }   /* hide any inline rules you already have */

#signupPay .su-section{
  margin:24px 0 0;
  padding-top:16px;
  position:relative;
}

/* draw the divider before the section content */
#signupPay .su-section::before{
  content:"";
  display:block;
  height:2px;
  background:var(--rule);
  border-radius:2px;
  margin:0 0 10px;   /* space between divider and the h2 */
}

/* the header already has its own divider, so skip the very first section */
#signupPay .su-section:first-of-type{
  margin-top:0; padding-top:0;
}
#signupPay .su-section:first-of-type::before{ content:none; }
/* --- Card brand badges: neutral chips, no dark filter --- */
#signupPay .cc-logos{
  display:flex; gap:8px; align-items:center;
  margin:6px 0 12px;
}

#signupPay .cc-badge{
  background:#F6F7F9;                 /* light chip */
  color:#1f2328;                       /* readable gray */
  border:1px solid #E2E6EB;
  border-radius:8px;
  padding:6px 10px;
  font:600 .75rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.25px;
}

/* if you switch to SVG logos later, make sure no filters darken them */
#signupPay .cc-logos svg{
  filter:none !important;
  opacity:.9;
}

/* nuke any old filters that may be applied to the badges/logos */
#signupPay .cc-logos *{
  filter:none !important;
}
/* Make the header a simple block and center its contents */
#signupPay .su-header{
  display:block;            /* avoid grid/flex left-start issues */
  text-align:center;        /* center all text inside the header */
}

/* Center the title explicitly (inherits from header, but belt & suspenders) */
#signupPay .su-header .su-title{
  text-align:inherit;
  margin:0 auto 6px;        /* keeps nice spacing */
}
#signupPay .linklike{
  background:none; border:0; padding:0; font:600 .95rem/1 Inter,system-ui,sans-serif;
  color: var(--brand-blue); text-decoration: underline;
}
/* ===== Products Hero (full-bleed beige, self-contained) ===== */
:root{
  --brand-blue: #003E78;
  --ink: #0A0A0A;
  --beige: #FAF9F7; /* warm beige */
}

/* Full-bleed background that only applies to this section */
.prod-hero{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: var(--beige);
}

/* Inner container */
.prod-hero__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 0px;              /* mobile */
  text-align: center;     /* center headline, sub, and CTA */
}

@media (min-width: 980px){
  .prod-hero__inner{ padding: 72px 32px; }
}

/* Headline */
.prod-hero__title{
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
  text-align: center;              /* mobile */
  font-size: clamp(32px, 5.4vw, 44px);
  line-height: 1.15;
}

@media (min-width: 980px){
  .prod-hero__title{ text-align: left; }
}

.prod-hero__static{ margin-right: .35ch; }

/* Animated word */
.prod-hero__swap{
  color: var(--brand-blue);
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  transition: opacity .5s ease, transform .5s ease;
  will-change: transform, opacity;
}
.prod-hero__swap.is-leaving{ opacity: 0; transform: translateY(10px); }
.prod-hero__swap.is-enter{ opacity: 0; transform: translateY(-10px); }
.prod-hero__swap.is-enter.is-show{ opacity: 1; transform: translateY(0); }

/* Subtext */
.prod-hero__sub{
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  font-weight: 400;
  font-size: clamp(14px, 2.4vw, 16px);
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;              /* mobile */
}

@media (min-width: 980px){
  .prod-hero__sub{ text-align: left; max-width: 60ch; }
}

/* CTA — uses your existing universal button styles; these are only safe fallbacks */
.cta-primary{
  display: inline-flex;                 /* hug content */
  text-align: center;
  text-decoration: none;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
 padding: 14px 48px;   /* more left-right space */
 min-width: 220px;     /* ensures a solid width */
  border-radius: 999px;
  color: #fff;
  background: var(--brand-blue);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.cta-primary:hover{ filter: brightness(.96); transform: translateY(-1px); }
.cta-primary:active{ transform: translateY(0); }

/* Mobile center, desktop align with text */
.prod-hero .cta-primary{ display: inline-flex; justify-content: center; }
@media (max-width: 979.98px){
  .prod-hero .cta-primary{ display: inline-flex; margin-inline: auto; }
}
/* =========================
   Full-bleed image (mobile-first)
   ========================= */

/* 0) Kill the gap coming from the hero block */
#productsHero,
#productsHero .pro-hero__inner{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 1) Edge-to-edge section that ignores page padding */
.prod-image{
  /* pull the section to the viewport edges */
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  /* no spacing/decoration */
  margin-block: 0;
  padding: 0;
  line-height: 0;
  background: transparent;
  border: 0;

  /* if a parent had overflow:hidden, this keeps it from clipping */
  isolation: isolate;
}

/* 2) Image fills width, keeps natural height (no zoom, no rounding) */
.prod-image__img{
  display: block;
  width: 100%;
  height: auto;            /* preserve aspect ratio */
  object-fit: contain;     /* no cropping */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 3) Prevent any “adjacent margin” gap between hero and image */
#productsHero + .prod-image{ margin-top: 0; }

/* 4) Make sure common page wrappers don’t clip the full-bleed */
.main, .page-wrap, .content, .container{ overflow: visible; }

/* 5) Optional safety if a horizontal scrollbar appears on some mobiles */
/* html, body { overflow-x: hidden; } */

/* Desktop: still full-bleed; keep the same trick */
@media (min-width: 980px){
  .prod-image{ width: 100vw; margin-inline: calc(50% - 50vw); }
}
/* =========================
   Products: Membership Comparison (2025)
   ========================= */

/* ---- Theme tokens ---- */
:root{
  --ink:#0A0A0A;
  --blue:#003E78;
  --blue-2:#0A4A86;
  --body-gray:#5C6370;
  --warm-beige:#FAF9F7;         /* plan-header band */
  --border:#0A0A0A;             /* horizontal rules (black) */
  --hair:#E6E8EB;               /* subtle dividers */
  --rule:#D5D8DE; /* subtle neutral for rows */
  --split:#E6E8EB; /* vertical split between plans */
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ---- Section wrapper ---- */
.compare{
  background:#fff;
  padding:48px 0;
}
@media (min-width:980px){ .compare{ padding:72px 0; } }

.compare__container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ---- Heading + subcopy ---- */
.compare__title{
  font-family:Poppins,system-ui,sans-serif;
  font-weight:800;
  color:var(--ink);
  font-size:clamp(34px,5vw,42px);
  line-height:1.18;
  text-align:center;
  margin:0 0 12px;
}
@media (min-width:980px){ .compare__title{ text-align:left; } }

.compare__sub{
  font-family:Inter,system-ui,sans-serif;
  font-weight:400;
  color:var(--body-gray);
  font-size:clamp(14px,2.8vw,18px);
  line-height:1.6;
  text-align:center;
  max-width:65ch;
  margin:0 auto 24px;
}
@media (min-width:980px){ .compare__sub{ text-align:left; margin-left:0; } }

/* =========================
   Card
   ========================= */
.compare-card{
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Optional fade-in (opt-in with data-animate="fade") */
.compare-card[data-animate="fade"]{
  transform:translateY(18px);
  opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
}
.compare-card[data-animate="fade"].in-view{ transform:none; opacity:1; }

.compare-card__brand-strip{
  display:block;
  height:10px;
  background-color:#003E78; /* fallback */
  background-image:-webkit-linear-gradient(90deg, #003E78 0%, #0A4A86 100%);
  background-image:linear-gradient(90deg, #003E78 0%, #0A4A86 100%);
}
@media (min-width:980px){
  .compare-card__brand-strip{ height:12px; }
}

/* =========================
   Plan headers (warm beige band)
   ========================= */
.plan-headers{
  background:var(--warm-beige);
  border-bottom:1px solid var(--hair);
}

.plan-headers__grid{
  display:grid;
  grid-template-columns:1fr 1fr;   /* always two columns */
  gap:0;                           /* no gutter—we draw the divider */
}
.plan-headers__grid > .plan:first-child{
  border-right:1px solid var(--hair); /* vertical divider like reference */
}

.plan{
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}
@media (min-width:980px){ .plan{ padding:22px 24px; gap:12px; } }

.plan__name{
  font-family:Poppins,system-ui,sans-serif;
  font-weight:700;
  color:var(--ink);
  font-size:clamp(18px,4.6vw,22px);
  margin:0;
}

.plan__price{ display:flex; align-items:baseline; gap:8px; }
.plan__amount{
  font-family:Poppins,system-ui,sans-serif;
  font-weight:800; color:var(--ink);
  font-size:clamp(26px,6vw,32px);
  line-height:1;
}
.plan__term{
  font-family:Inter,system-ui,sans-serif;
  color:var(--body-gray);
  font-size:14px;
}

/* Pill CTA – self-contained (no dependency on global .btn) */
.plan__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:86%;
  max-width:320px;
  min-height:44px;
  margin-top:8px;
  padding:0 20px;
  border-radius:999px;
  font-family:Poppins, system-ui, sans-serif;
  font-weight:700;
  font-size:15px;
  color:#fff;
  text-decoration:none;
  background-image:linear-gradient(180deg, #003E78 0%, #0A4A86 100%);
  box-shadow:0 10px 18px rgba(0,62,120,.18), 0 2px 0 rgba(0,0,0,.06) inset;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.plan__cta:hover{ filter:brightness(1.05); }
.plan__cta:active{ transform:translateY(1px); box-shadow:0 6px 12px rgba(0,62,120,.18); }

@media (min-width:980px){
  .plan__cta{ width:72%; max-width:240px; }
}

/* =========================
   Feature comparison table
   (Two-row pattern per feature)
   ========================= */
.features__table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
/* Horizontal rules */
.features__table th,
.features__table td{
  padding:16px 14px;
  border-top:1px solid var(--rule);
}
/* Row A: feature name spans both plan columns */
.features__table .feature-name th{
  text-align:left;
  font-family:Inter,system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(15px,3.6vw,17px);
  color:var(--ink);
  padding:16px 14px;
    border-top:1px solid var(--rule);
  background:#fff;
}

/* Row B: checks row has two equal cells, split by a vertical divider */
.features__table .feature-checks td{
  width:50%;
  text-align:center;
  vertical-align:middle;
  padding:16px 0;
   border-top:1px solid var(--rule);
  background:#fff;
}
.features__table .feature-checks td.plan-b{
  border-left:1px solid var(--hair);         /* vertical split between plans */
}

/* Icons */
.icon-check, .icon-x{
  width:20px; height:20px; color:var(--ink);
  display:inline-block;
}
.icon-x{ color:#C2C7CF; }

/* A11y utility */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
/* Ensure our two-row pattern behaves consistently */
.features__table .feature-name th { padding:16px 14px; }
.features__table .feature-checks td { padding:16px 0; }

/* view plans button transition */
html { scroll-behavior: smooth; }

/* Tell the browser how much space to keep above the target when scrolled to via anchor */
:root{ --sticky-header-h: 72px; }  /* adjust to your actual sticky header height */

#plans-compare-heading {
  /* This makes anchor/fragment jumps land *below* the sticky header */
  scroll-margin-top: calc(var(--sticky-header-h) + 8px);
}
:target {
  outline: none !important;
  box-shadow: none !important;
}

:focus {
  outline: 0px solid var(--blue); /* Keep visible focus for real keyboard navigation */
}