/* ==========================================================================
   Medicare Answers Now / Amanda Brewton. Design System
   Hand-coded. Deep teal + warm coral. Premium, warm, senior-friendly, fast.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --navy-900: #2e1065;
  --navy-800: #4c1d95;
  --navy-700: #5b21b6;
  --navy-600: #6d28d9;
  --navy-500: #7c3aed;
  --navy-400: #a78bfa;
  --gold-600: #a21caf;
  --gold-500: #c026d3;
  --gold-400: #e879f9;
  --gold-100: #fae8ff;

  /* Neutrals */
  --ink: #190f33;
  --slate-700: #403a52;
  --slate-500: #6e6684;
  --slate-400: #968ca8;
  --line: #e8e4f0;
  --mist: #f8f7fc;
  --cloud: #f2eef8;
  --white: #ffffff;

  /* Accents */
  --teal: #7c3aed;
  --rose: #db2777;
  --success: #1c8a5a;

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 5rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  /* Spacing & layout */
  --container: 1200px;
  --container-wide: 1340px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(25,15,51, 0.06), 0 2px 6px rgba(25,15,51, 0.05);
  --shadow: 0 10px 30px -12px rgba(25,15,51, 0.18);
  --shadow-lg: 0 30px 70px -30px rgba(25,15,51, 0.35);
  --shadow-gold: 0 14px 34px -12px rgba(192,38,211, 0.55);
  --ring: 0 0 0 4px rgba(124,58,237, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--slate-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.display { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; }
.serif { font-family: var(--font-display); font-weight: 500; }
.lead { font-size: var(--fs-lead); color: var(--slate-500); line-height: 1.6; }
p { max-width: 68ch; }
strong { color: var(--ink); font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy-600);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.eyebrow.on-dark { color: var(--gold-400); }
.text-gradient { background: linear-gradient(100deg, var(--gold-500), var(--gold-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.bg-mist { background: var(--mist); }
.bg-cloud { background: var(--cloud); }
.bg-navy { background: var(--navy-800); color: var(--on-dark); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-gradient-navy { background: radial-gradient(120% 120% at 80% -10%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%); color: var(--on-dark); }
.bg-gradient-navy h1, .bg-gradient-navy h2, .bg-gradient-navy h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2rem; }
.center { text-align: center; }
.measure { max-width: 60ch; }
.center .measure, .center p { margin-inline: auto; }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head.center { margin-inline: auto; }

@media (max-width: 920px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--navy-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 0.98rem; letter-spacing: 0.005em;
  cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn-gold { --btn-bg: linear-gradient(100deg, var(--gold-500), var(--gold-400)); --btn-fg: var(--navy-900); }
.btn-gold:hover { box-shadow: var(--shadow-gold); }
.btn-navy { --btn-bg: var(--navy-700); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--navy-700); border-color: rgba(91,33,182, 0.25); }
.btn-outline:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.btn-ghost-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-arrow svg { transition: transform 0.25s var(--ease); }
.btn-arrow:hover svg { transform: translateX(4px); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--navy-600); }
.link-arrow svg { width: 1em; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow.on-dark { color: var(--gold-400); }

/* ---------- Header / Nav ---------- */
.topbar {
  background: var(--navy-900); color: var(--on-dark-soft); font-size: var(--fs-sm);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 1rem; }
.topbar a { color: var(--on-dark); transition: color 0.2s; }
.topbar a:hover { color: var(--gold-400); }
.topbar-left { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.topbar-left svg { width: 1em; color: var(--gold-400); }
.topbar-right { display: inline-flex; align-items: center; gap: 1.1rem; }
.topbar-social { display: inline-flex; gap: 0.65rem; }
.topbar-social svg { width: 1.05em; height: 1.05em; }
@media (max-width: 620px) { .topbar-note { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,0.95); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; }
.nav-logo img { height: 40px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 0.35rem; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.85rem; border-radius: 999px;
  font-weight: 600; font-size: 0.96rem; color: var(--slate-700);
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link[aria-current="page"] { color: var(--navy-800); background: var(--mist); }
.nav-link .chev { width: 0.7em; height: 0.7em; transition: transform 0.25s var(--ease); }
.nav-item:hover .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 0.5rem;
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 20;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Invisible hover bridge: keeps the dropdown open while the cursor travels
   from the nav link down into the panel across the 10px gap. Site-wide fix. */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px; }
.dropdown a { display: flex; flex-direction: column; gap: 1px; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); transition: background 0.2s; }
.dropdown a:hover { background: var(--mist); }
.dropdown a strong { color: var(--ink); font-size: 0.95rem; }
.dropdown a span { font-size: var(--fs-xs); color: var(--slate-400); }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.nav-toggle svg { width: 28px; height: 28px; color: var(--navy-800); }

@media (max-width: 1120px) {
  .nav-menu, .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--navy-900); color: #fff;
  padding: 1.5rem var(--gutter) 2.5rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.4s var(--ease); visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.mobile-menu-top img { height: 38px; filter: brightness(0) invert(1); }
.mobile-close { background: none; border: 0; color: #fff; cursor: pointer; padding: 0.5rem; }
.mobile-close svg { width: 30px; height: 30px; }
.mobile-nav a { display: block; padding: 0.85rem 0; font-size: 1.3rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; }
.mobile-nav .sub { padding-left: 1rem; font-size: 1.02rem; font-weight: 500; color: var(--on-dark-soft); }
.mobile-menu .btn { margin-top: 1.75rem; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #ddd4ec; }
.card-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-600)); color: var(--gold-400); margin-bottom: 1.25rem;
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--slate-500); font-size: 1rem; }

.product-card { position: relative; overflow: hidden; padding: 0; }
.product-card .pc-media { aspect-ratio: 16/10; overflow: hidden; background: var(--cloud); }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card:hover .pc-media img { transform: scale(1.06); }
.product-card .pc-body { padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.product-card .pc-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); }
.product-card h3 { margin: 0.4rem 0 0.6rem; }

.feature {
  display: flex; gap: 1rem; align-items: flex-start;
}
.feature .f-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--gold-100); color: var(--gold-600); display: grid; place-items: center; }
.feature .f-ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.feature p { font-size: 1rem; color: var(--slate-500); }

/* Pills / badges */
.pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--gold-100); color: var(--gold-600); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.04em; }
.pill.on-dark { background: rgba(255,255,255,0.1); color: var(--gold-400); }
.pill-dot::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(28,138,90,0.18); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { padding: 0.45rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--slate-700); background: #fff; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: var(--ring); }
.field textarea { min-height: 110px; resize: vertical; }
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px){ .form-grid { grid-template-columns: 1fr; } }
.consent { font-size: 0.72rem; line-height: 1.5; color: var(--slate-400); }
.consent a { color: var(--navy-600); text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(3rem, 2rem + 3vw, 5rem); padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: 0; pointer-events: none; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { margin: 1rem 0 1.25rem; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2rem; }
.stars { color: var(--gold-500); letter-spacing: 1px; }

/* Stat band */
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); line-height: 1; color: #fff; }
.stat .num .text-gradient, .stat .num.gold { color: var(--gold-400); }
.stat .lbl { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--on-dark-soft); letter-spacing: 0.04em; }

/* Logo strip */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.logo-strip img { height: clamp(28px, 24px + 1vw, 40px); width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; }
.logo-strip img:hover { opacity: 1; filter: grayscale(0); }

/* Steps */
.steps { counter-reset: step; }
.step { position: relative; }
.step .step-num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-800); color: var(--gold-400); margin-bottom: 1rem; }

/* Testimonial */
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; }
.quote-card .stars { margin-bottom: 0.85rem; }
.quote-card blockquote { font-size: 1.05rem; color: var(--slate-700); line-height: 1.6; flex: 1; }
.quote-card .who { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.quote-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(150deg, var(--navy-600), var(--navy-800)); color: #fff; display: grid; place-items: center; font-weight: 700; }
.quote-card .who b { color: var(--ink); display: block; font-size: 0.95rem; }
.quote-card .who span { font-size: var(--fs-xs); color: var(--slate-400); }

/* FAQ */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: box-shadow 0.25s; }
.faq-item + .faq-item { margin-top: 0.85rem; }
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.15rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; transition: transform 0.3s var(--ease), background 0.3s; color: var(--navy-700); }
.faq-item[open] summary .pm { transform: rotate(45deg); background: var(--gold-500); color: var(--navy-900); }
.faq-item .faq-body { padding: 0 1.35rem 1.3rem; color: var(--slate-500); }
.faq-item .faq-body p { margin: 0; }

/* CTA banner */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.cta-band .cta-inner { position: relative; z-index: 2; }

/* Breadcrumb */
.crumbs { font-size: var(--fs-sm); color: var(--slate-400); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.crumbs a:hover { color: var(--navy-600); }
.crumbs .sep { opacity: 0.5; }

/* Page hero (interior) */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.page-hero .eyebrow { color: var(--gold-400); }
.page-hero h1 { margin: 0.75rem 0 1rem; max-width: 16ch; }
.page-hero p { color: var(--on-dark-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--on-dark-mute); padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 1rem + 2vw, 3rem); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo img { height: 42px; filter: brightness(0) invert(1); margin-bottom: 1.25rem; }
.site-footer h4 { color: #fff; font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-links a { display: block; padding: 0.32rem 0; color: var(--on-dark-mute); transition: color 0.2s, padding-left 0.2s; }
.footer-links a:hover { color: var(--gold-400); padding-left: 4px; }
.footer-contact a { color: var(--on-dark); }
.footer-contact .big { font-family: var(--font-display); font-size: 1.5rem; color: #fff; font-weight: 600; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); }
.footer-bottom a:hover { color: var(--gold-400); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-disclaimer { font-size: var(--fs-xs); color: var(--on-dark-faint); line-height: 1.6; max-width: 100%; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.07); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Prose (legal / long-form) ---------- */
.prose { color: var(--slate-700); }
.prose h2 { font-size: var(--fs-h3); margin: 2.25rem 0 0.75rem; }
.prose h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.prose p { margin-bottom: 1rem; max-width: 72ch; }
.prose ul { margin: 0 0 1rem 1.25rem; padding-left: 0.5rem; color: var(--slate-700); }
.prose ul li { margin-bottom: 0.4rem; }
.prose a { color: var(--navy-600); text-decoration: underline; }
.prose strong { color: var(--ink); }
.prose .updated { color: var(--slate-400); font-size: var(--fs-sm); }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--slate-400); }
.nowrap { white-space: nowrap; }
.hide-mobile { }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-sm { gap: 0.75rem; }
.gap { gap: 1.25rem; }
.wrap { flex-wrap: wrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.divider { height: 1px; background: var(--line); border: 0; }
.relative { position: relative; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy-800); color: #fff; padding: 0.75rem 1rem; border-radius: 0 0 8px 0; z-index: 999; }
.skip-link:focus { left: 0; }
@media (max-width: 560px) { .hide-mobile { display: none !important; } }

/* ==========================================================================
   Conversion components (v2)
   ========================================================================== */

/* ---- Button sheen ---- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease); pointer-events: none;
}
.btn:hover::after { left: 140%; }
.btn-outline::after, .btn-ghost-light::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

/* ---- Card top-accent on hover ---- */
.card { position: relative; }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.card:hover::before { transform: scaleX(1); }
.product-card::before { display: none; }

/* ---- Hero mesh background ---- */
.hero-mesh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 18%, rgba(124,58,237,0.10), transparent 70%),
    radial-gradient(38% 45% at 88% 12%, rgba(192,38,211,0.12), transparent 70%);
}
.hero-grid-pattern::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
}

/* ---- Rating chip & trust badges ---- */
.rating-chip {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm);
}
.rating-chip .stars { font-size: 0.95rem; }
.rating-chip b { color: var(--ink); }
.rating-chip span { font-size: var(--fs-xs); color: var(--slate-400); }
.rating-chip img { height: 16px; width: auto; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 1rem; }
.trust-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 700; color: var(--slate-500); letter-spacing: 0.02em; }
.trust-badge svg { width: 1.05em; height: 1.05em; color: var(--success); flex: none; }
.trust-badges.on-dark .trust-badge { color: var(--on-dark-soft); }
.trust-badges.on-dark .trust-badge svg { color: var(--gold-400); }

/* Floating chip over media */
.floating-chip {
  position: absolute; display: flex; align-items: center; gap: 0.65rem;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 0.7rem 0.95rem; z-index: 3;
}
.floating-chip .fc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-600); flex: none; }
.floating-chip .fc-ic svg { width: 20px; height: 20px; }
.floating-chip b { color: var(--ink); display: block; font-size: 0.95rem; line-height: 1.1; }
.floating-chip span { font-size: var(--fs-xs); color: var(--slate-400); }

/* ---- Multi-step quote form ---- */
.qf-progress { height: 6px; background: var(--cloud); border-radius: 999px; overflow: hidden; margin-bottom: 1.25rem; }
.qf-progress-fill { height: 100%; width: 50%; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); border-radius: 999px; transition: width 0.5s var(--ease); }
.qf-stepmeta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.qf-stepmeta .step-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-600); }
.qf-step[hidden] { display: none; }
.qf-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
@media (max-width: 380px) { .qf-options { grid-template-columns: 1fr; } }
.qf-option { position: relative; cursor: pointer; }
.qf-option input { position: absolute; opacity: 0; pointer-events: none; }
.qf-option .qf-card {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  font-weight: 600; font-size: 0.95rem; color: var(--slate-700); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; height: 100%;
}
.qf-option .qf-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--mist); color: var(--navy-600); display: grid; place-items: center; flex: none; transition: background 0.2s, color 0.2s; }
.qf-option .qf-ic svg { width: 18px; height: 18px; }
.qf-option:hover .qf-card { border-color: var(--navy-400); }
.qf-option input:checked + .qf-card { border-color: var(--navy-600); background: #f5f3ff; box-shadow: var(--ring); }
.qf-option input:checked + .qf-card .qf-ic { background: var(--navy-700); color: var(--gold-400); }
.qf-option input:focus-visible + .qf-card { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qf-nav { display: flex; gap: 0.6rem; align-items: center; }
.qf-nav .btn-back { flex: none; }
.qf-error { color: var(--rose); font-size: var(--fs-xs); font-weight: 600; min-height: 1em; margin-top: -0.25rem; }
.qf-success { text-align: center; padding: 1rem 0 0.5rem; }
.qf-success .qf-check { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(150deg, var(--success), #2bb377); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -12px rgba(28,138,90,0.5); }
.qf-success .qf-check svg { width: 32px; height: 32px; }
.qf-success h3 { margin-bottom: 0.5rem; }
.qf-success p { color: var(--slate-500); margin: 0 auto; }

/* ---- Comparison block ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare-col { border-radius: var(--radius-lg); padding: clamp(1.5rem,1rem + 1.5vw,2.25rem); border: 1px solid var(--line); background: #fff; }
.compare-col.win { background: var(--navy-800); border-color: var(--navy-700); color: var(--on-dark); position: relative; box-shadow: var(--shadow-lg); }
.compare-col.win h3 { color: #fff; }
.compare-col .ch { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.compare-col .ch .badge-win { margin-left: auto; }
.compare-list { display: grid; gap: 0.85rem; }
.compare-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1rem; }
.compare-list .ci { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.compare-col .ci.yes { background: rgba(192,38,211,0.18); color: var(--gold-400); }
.compare-col .ci.no { background: var(--cloud); color: var(--slate-400); }
.compare-col.plain .ci.yes { background: var(--gold-100); color: var(--gold-600); }
.compare-col .ci svg { width: 14px; height: 14px; }

/* ---- Sticky mobile CTA bar ---- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 0.6rem; padding: 0.6rem 0.85rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(25,15,51,0.25);
  transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { flex: 1; padding-inline: 0.5rem; }
@media (max-width: 1120px) { .sticky-cta { display: flex; } body { } }
@media (max-width: 1120px) { main { } }

/* keep content clear of the bar on mobile */
@media (max-width: 1120px) { .site-footer { padding-bottom: 84px; } }

/* ==========================================================================
   Amanda Brewton, page-specific additions
   ========================================================================== */
.portrait-wrap { position: relative; }
.portrait-frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait-glow { position:absolute; inset:auto -8% -12% -8%; height:60%; background:radial-gradient(60% 80% at 50% 100%, rgba(192,38,211,0.28), transparent 70%); filter:blur(20px); z-index:-1; }
.cred-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }
@media (max-width:520px){ .cred-grid{ grid-template-columns:1fr; } }
.cred { display:flex; gap:0.7rem; align-items:flex-start; padding:0.95rem 1.05rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.cred .ci { flex:none; width:40px; height:40px; border-radius:11px; background:var(--gold-100); color:var(--gold-600); display:grid; place-items:center; }
.cred .ci svg{ width:21px; height:21px; }
.cred b{ color:var(--ink); display:block; font-size:0.97rem; line-height:1.2; }
.cred span{ font-size:var(--fs-xs); color:var(--slate-400); }
.award-list{ display:grid; gap:0.65rem; }
.award-list li{ display:flex; gap:0.7rem; align-items:flex-start; }
.award-list .ai{ flex:none; color:var(--gold-500); margin-top:2px; }
.award-list .ai svg{ width:20px; height:20px; }
.ribbon { display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 0.95rem; border-radius:999px; background:var(--navy-800); color:#fff; font-weight:700; font-size:var(--fs-xs); letter-spacing:0.04em; }
.ribbon svg{ width:1em; color:var(--gold-400); }
.embed-frame{ width:100%; min-height:620px; border:0; border-radius:var(--radius); background:var(--mist); }
.note-strip{ display:flex; gap:0.6rem; align-items:flex-start; padding:0.85rem 1.05rem; background:var(--gold-100); border:1px solid #f0d0f7; border-radius:var(--radius-sm); color:var(--slate-700); font-size:0.92rem; }
.note-strip svg{ flex:none; width:1.2em; height:1.2em; color:var(--gold-600); margin-top:2px; }

/* ==========================================================================
   v3, "Million-dollar" polish layer
   Layered depth, soft light gradients, grain, refined micro-interactions.
   All effects are GPU-friendly (transform/opacity) and reduced-motion safe.
   ========================================================================== */
:root{
  --shadow-soft: 0 2px 4px rgba(46,16,101,.04), 0 8px 18px -6px rgba(46,16,101,.08), 0 24px 48px -16px rgba(46,16,101,.10);
  --shadow-float: 0 6px 14px -6px rgba(46,16,101,.16), 0 30px 60px -24px rgba(46,16,101,.28);
}

/* Page-wide soft light field behind content */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(124,58,237,.06), transparent 60%),
    radial-gradient(50% 45% at 0% 0%, rgba(192,38,211,.05), transparent 60%);
}
/* Ultra-subtle film grain for a premium, printed feel */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress bar (element injected by JS) */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400)); box-shadow:0 0 12px rgba(192,38,211,.5);
  transition:width .1s linear; }

/* Richer card & form depth */
.card, .quote-card, .form-card, .compare-col{ box-shadow:var(--shadow-soft); }
.card:hover{ box-shadow:var(--shadow-float); transform:translateY(-7px); }
.product-card:hover, .quote-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-float); }

/* Section hairline dividers, barely-there gradient seams */
.section + .section, .section + .section-sm, .section-sm + .section{ position:relative; }
.section::before, .section-sm::before{ }
.bg-mist, .bg-cloud{ position:relative; }
.bg-mist::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* Eyebrow & pill refinement */
.eyebrow::before{ box-shadow:0 0 0 0 rgba(192,38,211,.0); }
.pill{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-sm); }

/* Animated gradient sheen on the dark gradient sections */
.bg-gradient-navy{ position:relative; isolation:isolate; }
.bg-gradient-navy::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(40% 60% at 15% 10%, rgba(124,58,237,.35), transparent 60%),
            radial-gradient(45% 65% at 95% 100%, rgba(192,38,211,.20), transparent 60%);
}

/* Display headline: soft animated shimmer on the gradient word */
.text-gradient{ background-size:200% auto; }
@media (prefers-reduced-motion:no-preference){
  .text-gradient{ animation:shimmer 6s ease-in-out infinite; }
  @keyframes shimmer{ 0%,100%{ background-position:0% center; } 50%{ background-position:100% center; } }
}

/* Buttons: deeper, with a soft inner highlight */
.btn{ box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -10px rgba(46,16,101,.5); }
.btn-gold{ box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -10px rgba(192,38,211,.55); }
.btn-gold:hover{ box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 18px 36px -10px rgba(192,38,211,.7); }

/* Nav link active/hover underline grow */
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease); }
.nav-link[aria-current="page"]::after, .nav-item:hover > .nav-link::after{ transform:scaleX(1); }

/* Portrait frame: refined ring + gentle zoom */
.portrait-frame{ box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5) inset; }
.portrait-frame img{ transition:transform 1.2s var(--ease); }
.portrait-wrap:hover .portrait-frame img{ transform:scale(1.04); }
.portrait-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(46,16,101,.28)); }

/* Prose links: animated underline */
.prose a{ background-image:linear-gradient(var(--gold-500),var(--gold-500)); background-size:0% 2px;
  background-position:0 100%; background-repeat:no-repeat; text-decoration:none; transition:background-size .3s var(--ease); }
.prose a:hover{ background-size:100% 2px; }

/* Feature icon hover pop */
.feature .f-ic, .card-icon{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover .card-icon{ transform:translateY(-2px) scale(1.04); }

/* Reveal: add a touch of blur-in for richness */
@media (prefers-reduced-motion:no-preference){
  .reveal{ filter:blur(6px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
  .reveal.in{ filter:blur(0); }
}

/* Rating chip & ribbon depth */
.rating-chip{ box-shadow:var(--shadow-soft); }
.ribbon{ box-shadow:0 8px 18px -10px rgba(46,16,101,.6); }

/* Smooth anchor offset for sticky header */
:target{ scroll-margin-top:96px; }

/* ==========================================================================
   v4. Advanced UI & motion layer
   ========================================================================== */

/* ---- Animated heading underline accent ---- */
.h-accent{ position:relative; display:inline-block; }
.h-accent::after{ content:""; position:absolute; left:0; bottom:-.12em; height:.42em; width:100%;
  background:linear-gradient(90deg,var(--gold-400),var(--gold-500)); opacity:.28; border-radius:6px; z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); }
.reveal.in .h-accent::after, .h-accent.in::after{ transform:scaleX(1); }

/* ---- Featured / recognized-by strip ---- */
.featured-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.8rem 1.4rem; }
.featured-item{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,.9rem+.5vw,1.4rem); color:var(--slate-500); letter-spacing:-.01em; opacity:.85;
  transition:color .3s, opacity .3s; }
.featured-item:hover{ color:var(--navy-700); opacity:1; }
.featured-item svg{ width:1.1em; height:1.1em; color:var(--gold-500); }

/* ---- Marquee (infinite scroll ribbon) ---- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; gap:.6rem; padding:0 1.6rem; white-space:nowrap;
  font-weight:700; color:var(--navy-700); font-size:1.02rem; }
.marquee-item svg{ width:1.05em; height:1.05em; color:var(--gold-500); }
.marquee-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-500); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---- 3D tilt cards ---- */
.tilt{ transform-style:preserve-3d; transition:transform .3s var(--ease); will-change:transform; }
.tilt > *{ transform:translateZ(0); }

/* ---- Icon stat band ---- */
.stat-ico{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
.stat-ico .si-ic{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16);
  color:var(--gold-400); margin-bottom:.35rem; }
.stat-ico .si-ic svg{ width:28px; height:28px; }

/* ---- Curve / wave section dividers ---- */
.divider-wave{ display:block; width:100%; height:auto; line-height:0; }
.divider-wave svg{ display:block; width:100%; height:60px; }
@media (max-width:600px){ .divider-wave svg{ height:38px; } }

/* ---- Glass panel ---- */
.glass{ background:rgba(255,255,255,.7); backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px); border:1px solid rgba(255,255,255,.6); }

/* ---- Timeline (process / journey) ---- */
.timeline{ position:relative; display:grid; gap:1.25rem; }
.timeline::before{ content:""; position:absolute; left:23px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--gold-500),var(--line)); }
.tl-item{ position:relative; padding-left:62px; }
.tl-item .tl-dot{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background:#fff; border:2px solid var(--gold-500); color:var(--navy-700); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; box-shadow:var(--shadow-sm); z-index:1; }
.tl-item h3{ margin-bottom:.25rem; }
.tl-item p{ color:var(--slate-500); }

/* ---- Back-to-top button (injected) ---- */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:80; width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer; background:var(--navy-800); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow-float); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--gold-500); color:var(--navy-900); }
.to-top svg{ width:22px; height:22px; }
@media (max-width:1080px){ .to-top{ bottom:78px; } }

/* ---- Hero floating chips polish (uses existing .floating-chip) ---- */
.form-card{ position:relative; }
.fc-a{ top:-22px; left:-26px; }
.fc-b{ bottom:-22px; right:-22px; }
@media (max-width:1100px){ .fc-a,.fc-b{ display:none; } }

/* ---- Big quote / pull section ---- */
.pull-quote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem);
  line-height:1.25; color:var(--ink); letter-spacing:-.01em; }
.pull-quote .mark{ color:var(--gold-500); }

/* ---- Link card (resource hub) ---- */
.link-card{ display:flex; flex-direction:column; height:100%; }
.link-card .lc-tag{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-600); margin-bottom:.6rem; }
.link-card h3{ margin-bottom:.4rem; }
.link-card .link-arrow{ margin-top:auto; padding-top:1rem; }

/* ---- Decorative dotted grid ---- */
.dots{ background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px); background-size:18px 18px; }

/* ==========================================================================
   v5. Modern graphics: aurora, gradient borders, conic glows, fine detail
   ========================================================================== */

/* Text selection + tap highlight on-brand */
::selection{ background:rgba(192,38,211,.22); color:var(--ink); }
::-moz-selection{ background:rgba(192,38,211,.22); color:var(--ink); }

/* Crisper, more contrasted dark sections (deeper teal -> ink with coral pool) */
.bg-gradient-navy{
  background:
    radial-gradient(120% 140% at 82% -10%, #6d28d9 0%, #4c1d95 42%, #250a54 100%);
}
/* Animated aurora ribbons on dark sections */
.bg-gradient-navy::before{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none; opacity:.55;
  background:
    radial-gradient(38% 55% at 12% 8%, rgba(167,139,250,.30), transparent 60%),
    radial-gradient(34% 50% at 92% 18%, rgba(192,38,211,.26), transparent 62%),
    radial-gradient(46% 60% at 70% 110%, rgba(139,92,246,.22), transparent 60%);
  background-size:160% 160%;
}
@media (prefers-reduced-motion:no-preference){
  .bg-gradient-navy::before{ animation:aurora 18s ease-in-out infinite alternate; }
  @keyframes aurora{ 0%{ background-position:0% 0%, 100% 0%, 50% 100%; } 100%{ background-position:30% 20%, 70% 30%, 40% 80%; } }
}
/* Fine starfield grain on dark sections for depth */
.bg-gradient-navy.dots-soft::after{ opacity:.6; }

/* Gradient-border feature: wraps key cards with a luminous edge */
.gborder{ position:relative; border:0 !important; border-radius:var(--radius-lg); }
.gborder::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; z-index:3; pointer-events:none;
  background:linear-gradient(140deg, rgba(192,38,211,.7), rgba(124,58,237,.6) 55%, rgba(192,38,211,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; transition:opacity .35s var(--ease);
}
.gborder:hover::after{ opacity:1; }

/* Conic glow accent behind feature icons & step numbers */
.card-icon, .step .step-num, .si-ic, .f-ic{ position:relative; }
.card-icon::after{
  content:""; position:absolute; inset:-30%; z-index:-1; border-radius:50%;
  background:conic-gradient(from 120deg, rgba(192,38,211,.0), rgba(192,38,211,.28), rgba(124,58,237,.22), rgba(192,38,211,0));
  filter:blur(14px); opacity:0; transition:opacity .4s var(--ease);
}
.card:hover .card-icon::after{ opacity:1; }

/* Buttons: dual-tone gradient + subtle shine sweep already present */
.btn-gold{ --btn-bg:linear-gradient(135deg,#e879f9 0%, #c026d3 55%, #a21caf 100%); }
.btn-navy{ --btn-bg:linear-gradient(135deg,#5b21b6, #4c1d95); }
.btn-navy:hover{ --btn-bg:linear-gradient(135deg,#6d28d9, #5b21b6); }

/* Pills get a soft gradient */
.pill{ background:linear-gradient(135deg, #fdece4, #fbe0d4); }
.pill.on-dark{ background:rgba(255,255,255,.12); }

/* Eyebrow accent becomes a gradient bar */
.eyebrow::before{ background:linear-gradient(90deg,var(--gold-500),var(--gold-400)); height:2px; }

/* Section headers: gradient hairline above centered heads */
.section-head.center .eyebrow{ }

/* Hero: richer mesh + soft vignette */
.hero.hero-mesh::before{
  background:
    radial-gradient(40% 50% at 10% 16%, rgba(124,58,237,.12), transparent 70%),
    radial-gradient(40% 48% at 90% 10%, rgba(192,38,211,.14), transparent 70%),
    radial-gradient(60% 60% at 50% 120%, rgba(124,58,237,.07), transparent 70%);
}

/* Floating chips: glassy + gradient ring */
.floating-chip{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-float), 0 0 0 1px rgba(255,255,255,.6) inset; }
@media (prefers-reduced-motion:no-preference){
  .floating-chip{ animation:floaty 5s ease-in-out infinite; }
  .fc-b{ animation-delay:-2.5s; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
}

/* Stat numbers: gradient fill on the gold ones */
.stat .num.gold, .stat .num .text-gradient{ background:linear-gradient(120deg,#e879f9,#c026d3); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Card top-accent: thicker gradient + glow on hover */
.card::before{ height:4px; background:linear-gradient(90deg,var(--gold-500),var(--navy-500)); }

/* Link arrows: gradient text on hover */
.link-arrow:hover{ color:var(--gold-600); }

/* Refined focus ring (gradient-ish dual outline) */
:focus-visible{ outline:3px solid var(--gold-500); outline-offset:2px; }

/* Divider waves: add a faint second layer for depth (handled per-page) */

/* Portrait frame: gradient ring + glow */
.portrait-frame{ box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5) inset; }
.portrait-frame::before{
  content:""; position:absolute; inset:-3px; z-index:-1; border-radius:inherit;
  background:linear-gradient(140deg, rgba(192,38,211,.8), rgba(124,58,237,.7));
  filter:blur(2px); opacity:.7;
}

/* FAQ items: gradient left accent when open */
.faq-item[open]{ border-color:transparent; box-shadow:var(--shadow-soft); }
.faq-item[open]::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--gold-500),var(--navy-500)); border-radius:3px; }
.faq-item{ position:relative; }

/* Marquee items: gradient dot */
.marquee-item .dot{ background:linear-gradient(135deg,var(--gold-500),var(--navy-500)); }

/* Chips (hero anchor chips) hover lift */
.chip{ transition:transform .25s var(--ease), border-color .25s, background .25s, color .25s; }
.chip:hover{ transform:translateY(-2px); border-color:var(--gold-400); }

/* Trust badge check in a gradient circle */
.trust-badge svg{ }

/* Nav logo subtle */
.nav-logo img{ transition:transform .3s var(--ease); }
.nav-logo:hover img{ transform:scale(1.03); }

/* ==========================================================================
   PASS 1. DESIGN SYSTEM CONSOLIDATION (authoritative; loaded last = wins)
   Single source of truth for spacing, color, radius, shadow.
   ========================================================================== */
:root{
  /* ---- Spacing scale (4px base) ---- */
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-9:2.25rem;
  --space-10:2.5rem; --space-12:3rem; --space-16:4rem;

  /* ---- Semantic color aliases (map to brand teal + coral) ---- */
  --color-primary:#5b21b6;      /* teal-700  */
  --color-primary-strong:#2e1065;/* teal-900 */
  --color-accent:#c026d3;       /* coral-500 */
  --color-accent-strong:#a21caf;/* coral-600 */
  --color-surface:#ffffff;
  --color-bg-muted:var(--mist);
  --color-text:var(--slate-700);
  --color-heading:var(--ink);
  --color-border:var(--line);

  /* ---- Text-on-dark tokens (replace one-off light hexes) ---- */
  --on-dark:#e9e4f7;        /* primary light text on teal */
  --on-dark-soft:#cfc5e8;   /* secondary */
  --on-dark-mute:#a89bce;   /* tertiary  */
  --on-dark-faint:#8779ad;  /* legal/disclaimer */

  /* ---- Layered SOFT shadow scale (one system, subtle) ---- */
  --shadow-1:0 1px 2px rgba(46,16,101,.05);
  --shadow-2:0 1px 2px rgba(46,16,101,.04), 0 4px 12px -4px rgba(46,16,101,.08);
  --shadow-3:0 2px 4px rgba(46,16,101,.05), 0 10px 24px -8px rgba(46,16,101,.12);
  --shadow-4:0 8px 18px -8px rgba(46,16,101,.12), 0 26px 52px -22px rgba(46,16,101,.18);
  /* Re-map legacy names to the unified scale so every component inherits it */
  --shadow-sm:var(--shadow-1);
  --shadow:var(--shadow-3);
  --shadow-lg:var(--shadow-4);
  --shadow-soft:var(--shadow-2);
  --shadow-float:var(--shadow-4);
}

/* ---- Spacing utility classes (token-backed) ---- */
.mt-0{margin-top:var(--space-0)} .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)}
.mt-6{margin-top:var(--space-6)} .mt-7{margin-top:var(--space-7)} .mt-8{margin-top:var(--space-8)} .mt-10{margin-top:var(--space-10)}
.mb-0{margin-bottom:var(--space-0)} .mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)} .mb-5{margin-bottom:var(--space-5)}
.mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
.mx-auto{margin-inline:auto}
.justify-end{justify-content:flex-end} .items-start{align-items:flex-start}
/* Content measures (token-backed reading widths) */
.measure-2xs{max-width:20ch} .measure-xs{max-width:34ch} .measure-sm{max-width:46ch}
.measure-md{max-width:54ch} .measure-lg{max-width:60ch}
/* Text-on-dark helpers */
.text-on-dark{color:var(--on-dark)} .text-on-dark-soft{color:var(--on-dark-soft)} .text-on-dark-mute{color:var(--on-dark-mute)}

/* ==========================================================================
   v6: WHITE + PURPLE REDESIGN LAYER (loaded last = authoritative)
   Violet primary, fuchsia accent, airy white surfaces.
   ========================================================================== */

/* ---- Accent recalibration: violet-to-fuchsia, white text on accent ---- */
.btn-gold{ --btn-bg:linear-gradient(135deg,#8b5cf6 0%,#a855f7 45%,#c026d3 100%); --btn-fg:#fff; background-size:160% auto; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .45s var(--ease); }
.btn-gold:hover{ background-position:90% center; }
.btn-navy{ --btn-bg:linear-gradient(135deg,#6d28d9,#5b21b6); }
.btn-navy:hover{ --btn-bg:linear-gradient(135deg,#7c3aed,#6d28d9); }
.text-gradient{ background-image:linear-gradient(100deg,#7c3aed,#c026d3,#a855f7); }
.stat .num.gold, .stat .num .text-gradient{ background:linear-gradient(120deg,#c4b5fd,#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow::before{ background:linear-gradient(90deg,#7c3aed,#c026d3); }
.faq-item[open] summary .pm{ color:#fff; }
.to-top:hover{ color:#fff; }
.qf-option input:checked + .qf-card .qf-ic{ color:#fff; }
.gborder::after{ background:linear-gradient(140deg,rgba(168,85,247,.65),rgba(124,58,237,.5) 55%,rgba(192,38,211,.35)); }
.card-icon{ background:linear-gradient(150deg,#6d28d9,#8b5cf6); color:#ede9fe; }
.step .step-num{ background:linear-gradient(150deg,#5b21b6,#7c3aed); color:#ede9fe; }
.card::before{ background:linear-gradient(90deg,#8b5cf6,#d946ef); }
.qf-progress-fill{ background:linear-gradient(90deg,#8b5cf6,#c026d3); }
.bg-gradient-navy{ background:radial-gradient(120% 140% at 82% -10%, #6d28d9 0%, #4c1d95 42%, #2e1065 100%); }

/* ---- Header: bigger logo, roomier nav ---- */
.nav{ min-height: 88px; }
.nav-logo img{ height: 60px; width: auto; }
.mobile-menu-top img{ height: 48px; }
@media (max-width: 560px){ .nav{ min-height: 74px; } .nav-logo img{ height: 50px; } }

/* ---- Experience strip (recognized-by) ---- */
.exp-strip .container{ max-width: 980px; }
.exp-head{ display:flex; align-items:center; justify-content:center; gap:clamp(1rem,2vw,1.75rem); margin-bottom:var(--space-7); }
.exp-head p{ margin:0; text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-400); white-space:nowrap; }
@media (max-width:640px){ .exp-head p{ white-space:normal; max-width:24ch; } }
.exp-rule{ flex:1; max-width:150px; height:1px; background:linear-gradient(90deg,transparent,#c4b5fd); }
.exp-rule:last-child{ background:linear-gradient(90deg,#c4b5fd,transparent); }
.featured-strip{ gap:.9rem clamp(1rem,2.5vw,2rem); }
.featured-item{ color:var(--slate-500); font-size:clamp(1.02rem,.92rem+.5vw,1.35rem); }
.featured-item:hover{ color:#6d28d9; }
.exp-dot{ width:5px; height:5px; border-radius:50%; background:#c4b5fd; flex:none; }
@media (max-width:640px){ .exp-dot{ display:none; } }
.exp-note{ text-align:center; font-size:.75rem; color:var(--slate-400); max-width:62ch; margin:var(--space-6) auto 0; }

/* ---- Comparison block: one unified premium panel ---- */
.compare{ gap:0; max-width:1020px; margin-inline:auto; align-items:stretch; }
.compare-col{ padding:clamp(1.75rem,1.25rem + 1.6vw,2.9rem); }
.compare-col.plain{ background:var(--mist); border:1px solid var(--line); border-right:0; border-radius:var(--radius-xl) 0 0 var(--radius-xl); box-shadow:none; }
.compare-col.plain h3{ color:var(--slate-500); font-size:1.2rem; }
.compare-col.win{ border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); background:radial-gradient(130% 130% at 85% -10%, #7c3aed 0%, #5b21b6 45%, #3b0f7e 100%); transform:scale(1.045); z-index:2; box-shadow:0 30px 70px -25px rgba(76,29,149,.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
@media (max-width:720px){
  .compare{ gap:1.25rem; }
  .compare-col.plain{ border-right:1px solid var(--line); border-radius:var(--radius-lg); }
  .compare-col.win{ transform:none; }
}
.compare-list{ gap:0; }
.compare-list li{ padding:.72rem 0; }
.compare-col.plain .compare-list li{ color:var(--slate-500); }
.compare-col.plain .compare-list li + li{ border-top:1px solid rgba(25,15,51,.06); }
.compare-col.win .compare-list li + li{ border-top:1px solid rgba(255,255,255,.09); }
.compare-col .ci.yes{ background:rgba(232,121,249,.2); color:#e879f9; }
.compare-col.plain .ci.no{ background:#eee9f5; color:var(--slate-400); }
.badge-win{ background:linear-gradient(135deg,#a855f7,#d946ef); color:#fff; box-shadow:0 6px 16px -6px rgba(217,70,239,.55); }

/* ---- Footer: quieter type, refined hierarchy, no logo box ---- */
.site-footer{ position:relative; overflow:hidden; background:linear-gradient(180deg,#2e1065,#22084d); }
.site-footer::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(45% 40% at 90% 0%, rgba(168,85,247,.16), transparent 65%), radial-gradient(40% 45% at 0% 100%, rgba(217,70,239,.08), transparent 60%); }
.site-footer .container{ position:relative; }
.footer-logo img{ height:58px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:1.1rem; }
.site-footer h4{ font-size:.74rem; letter-spacing:.16em; opacity:.85; margin-bottom:.9rem; }
.footer-links a{ font-size:.92rem; padding:.26rem 0; }
.footer-links a:hover{ color:#e879f9; }
.site-footer > .container > .footer-grid > div > p{ font-size:.92rem; }
.footer-contact .big{ font-size:1.6rem; }
.footer-contact p{ font-size:.85rem; }
.footer-bottom{ font-size:.82rem; }
.footer-bottom a:hover{ color:#e879f9; }
.footer-disclaimer{ font-size:.72rem; line-height:1.7; opacity:.9; }
.ribbon{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.ribbon svg{ color:#e879f9; }

/* ---- v7: Comparison block, final form: one seamless panel ---- */
.compare{ grid-template-columns:1fr 1fr; gap:0; max-width:1000px; margin-inline:auto;
  border-radius:var(--radius-xl); overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:0 24px 64px -28px rgba(46,16,101,.28); align-items:stretch; }
.compare-col, .compare-col.plain, .compare-col.win{ border:0; border-radius:0; box-shadow:none; transform:none; }
.compare-col{ padding:clamp(1.9rem,1.4rem + 1.8vw,3rem); }
.compare-col.plain{ background:#faf9fd; }
.compare-col.win{ background:linear-gradient(160deg,#7c3aed 0%,#6023c8 55%,#4c1d95 100%); position:relative; }
.compare-col.win::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 45% at 85% 0%, rgba(232,121,249,.25), transparent 65%); }
.compare-col > *{ position:relative; }
.compare-col .ch{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.15rem; }
.compare-col.win .ch{ padding-right:7rem; }
.compare-col .ch h3{ font-size:1.22rem; margin:0; }
.compare-col.plain .ch h3{ color:var(--slate-700); }
.ch-ic{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; }
.ch-ic svg{ width:17px; height:17px; }
.ch-ic.no{ background:#efeaf6; color:var(--slate-400); }
.ch-ic.yes{ background:rgba(232,121,249,.22); color:#f0abfc; }
.badge-win, .pill.on-dark.badge-win{ position:absolute; top:1.5rem; right:1.5rem; margin:0; display:inline-flex; align-items:center;
  padding:.38rem .8rem; border-radius:999px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em;
  background:linear-gradient(135deg,#c026d3,#e879f9); color:#fff; box-shadow:0 8px 20px -8px rgba(217,70,239,.6); z-index:2; }
.compare-list li{ padding:.78rem 0; line-height:1.5; }
.compare-list li:last-child{ padding-bottom:0; }
.compare-cta{ text-align:center; margin-top:clamp(2rem,1.5rem + 1.5vw,3rem); }
.compare-cta p{ margin:.85rem auto 0; font-size:var(--fs-sm); color:var(--slate-400); }
@media (max-width:720px){
  .compare{ grid-template-columns:1fr; gap:0; border-radius:var(--radius-lg); }
  .compare-col.win .ch{ padding-right:0; }
  .badge-win{ top:1.15rem; right:1.15rem; }
}

/* ---- v8: compact page heroes (no breadcrumbs), marquee on dark, hardening ---- */
.page-hero{ padding-block:clamp(1.9rem,1.4rem + 2.2vw,3.5rem); }
.page-hero h1{ margin:0.6rem 0 0.9rem; }
.bg-gradient-navy .marquee{ margin-top:clamp(2.75rem,2rem + 2.5vw,4.5rem); }
.marquee-dark .marquee-item{ color:var(--on-dark); }
.marquee-dark .marquee-item .dot{ background:#e879f9; }
.compare-col{ min-width:0; }
.compare-list li{ overflow-wrap:anywhere; }

/* ---- Micro-motion additions (transform/opacity only) ---- */
@media (prefers-reduced-motion:no-preference){
  .pill-dot::before{ animation:pulse-dot 2.4s ease-in-out infinite; }
  @keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 0 4px rgba(28,138,90,.18);} 50%{ box-shadow:0 0 0 7px rgba(28,138,90,.08);} }
  .card-icon, .f-ic{ transition:transform .35s var(--ease); }
  .feature:hover .f-ic{ transform:translateY(-3px) rotate(-3deg); }
}

/* ==========================================================================
   v9 — FINAL AUTHORITY (loaded last, overrides all earlier compare/logo rules)
   Comparison = two clean separated cards. Logos = real artwork, no filters.
   ========================================================================== */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:1020px; margin-inline:auto;
  border:0; border-radius:0; overflow:visible; background:transparent; box-shadow:none; align-items:stretch; }
.compare .compare-col{ display:flex; flex-direction:column; min-width:0; border-radius:var(--radius-lg);
  padding:clamp(1.75rem,1.3rem + 1.5vw,2.5rem); transform:none; }
.compare .compare-col.plain{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-2); border-right:1px solid var(--line); }
.compare .compare-col.win{ background:linear-gradient(165deg,#7c3aed 0%,#6d28d9 45%,#4c1d95 100%);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 26px 56px -22px rgba(91,33,182,.5); position:relative; overflow:hidden; }
.compare .compare-col.win::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 42% at 88% 0%, rgba(232,121,249,.26), transparent 62%); }
.compare .compare-col.win > *{ position:relative; }
.compare .badge-win, .compare .pill.on-dark.badge-win{ position:static; display:inline-flex; align-self:flex-start;
  align-items:center; margin:0 0 1.1rem; padding:.32rem .75rem; border-radius:999px; font-size:.7rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  color:#fff; box-shadow:none; }
.compare .ch{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; padding:0; }
.compare .ch h3{ font-size:1.18rem; margin:0; }
.compare .compare-col.plain .ch h3{ color:var(--ink); }
.compare .ch .badge-win{ margin:0 0 0 auto; flex:none; }
.compare .ch-ic{ width:36px; height:36px; }
.compare .compare-list{ display:block; margin:0; flex:1; }
.compare .compare-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.8rem 0; font-size:1rem;
  line-height:1.55; overflow-wrap:anywhere; }
.compare .compare-col.plain .compare-list li{ color:var(--slate-500); }
.compare .compare-col.plain .compare-list li + li{ border-top:1px solid #f0edf6; }
.compare .compare-col.win .compare-list li{ color:#f3effc; }
.compare .compare-col.win .compare-list li + li{ border-top:1px solid rgba(255,255,255,.13); }
.compare .compare-list li:last-child{ padding-bottom:0; }
.compare .compare-col .btn{ margin-top:1.5rem; }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; gap:1.1rem; } }

/* Badge: beat the `.compare-col.win > *` (0,3,0) rule and kill v7 offsets */
.compare .compare-col.win > .badge-win, .compare .compare-col .ch .badge-win{
  position:relative; top:0; left:0; right:auto; bottom:auto; }

/* Logos: color artwork in header, white artwork on dark surfaces */
.nav-link{ white-space:nowrap; }
.nav{ gap:1rem; }
.nav-logo img{ height:48px; width:auto; }
@media (max-width:1240px){ .nav-logo img{ height:42px; } }
.mobile-menu-top img{ height:40px; filter:none; }
.footer-logo img{ height:58px; filter:none; opacity:1; }

/* ============================================================
   WORK WITH US — agency (B2B) section additions
   ============================================================ */
.nav-logo{ display:inline-flex; align-items:center; gap:.55rem; }
.agent-tag{
  font-family:var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-600, #4c1d95); background:var(--mist, #f4f0fb);
  border:1px solid rgba(76,29,149,.18); border-radius:999px;
  padding:.2rem .5rem; line-height:1; white-space:nowrap;
}
@media (max-width:640px){ .agent-tag{ display:none; } }

/* Discuss / booking card blocks on the hub */
.wwu-book{ display:flex; flex-direction:column; gap:.7rem; }
.wwu-book-person{ display:flex; align-items:center; gap:.85rem; margin-bottom:.2rem; }
.wwu-book-person img{ width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 4px 14px rgba(46,16,101,.18); }
.wwu-book-person strong{ display:block; color:var(--ink); font-size:1rem; }
.wwu-book-person span{ display:block; font-size:.85rem; color:var(--slate-500); }
.wwu-launch{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px dashed rgba(46,16,101,.16);
}
.wwu-launch strong{ display:block; color:var(--ink); font-size:.98rem; }
.wwu-launch span{ display:block; font-size:.85rem; color:var(--slate-500); }

/* Simple content blocks reused across agency sub-pages */
.prose-narrow{ max-width:70ch; margin-inline:auto; }
.prose-narrow p{ margin-bottom:1.05rem; }
.info-list{ list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:.75rem; }
.info-list li{ position:relative; padding-left:2rem; line-height:1.6; }
.info-list li::before{
  content:""; position:absolute; left:0; top:.35em; width:1.15rem; height:1.15rem;
  background:var(--gold, #d4a12a); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") center/70% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") center/70% no-repeat;
}
.check-num{ counter-reset:step; list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:1rem; }
.check-num li{ position:relative; padding:1.1rem 1.2rem 1.1rem 3.6rem; background:#fff;
  border:1px solid rgba(46,16,101,.10); border-radius:var(--radius, 16px);
  box-shadow:0 6px 20px rgba(46,16,101,.05); line-height:1.55; }
.check-num li::before{ counter-increment:step; content:counter(step);
  position:absolute; left:1rem; top:1.1rem; width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:.95rem; color:#fff;
  background:linear-gradient(135deg,#6d28d9,#c026d3); }
.check-num li strong{ color:var(--ink); }
.check-num li .sub{ display:block; margin-top:.35rem; font-size:.9rem; color:var(--slate-500); }

/* Carrier chip grid */
.carrier-group{ margin-bottom:2.4rem; }
.carrier-group h3{ margin-bottom:.9rem; }
.chip-grid{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip-grid span{ font-size:.86rem; font-weight:600; color:var(--navy-700, #3b1c74);
  background:#fff; border:1px solid rgba(46,16,101,.12); border-radius:999px;
  padding:.42rem .8rem; box-shadow:0 2px 8px rgba(46,16,101,.04); }

/* Team grid */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem; }
.team-card{ background:#fff; border:1px solid rgba(46,16,101,.09); border-radius:var(--radius,16px);
  padding:1.4rem; box-shadow:0 8px 26px rgba(46,16,101,.06); }
.team-card .th{ display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; }
.team-card img{ width:66px; height:66px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 4px 12px rgba(46,16,101,.16); flex:none; }
.team-card .th strong{ display:block; color:var(--ink); font-size:1.05rem; line-height:1.2; }
.team-card .th span{ display:block; font-size:.85rem; color:var(--navy-600,#6d28d9); font-weight:600; margin-top:.15rem; }
.team-card .th a{ display:block; font-size:.82rem; color:var(--slate-500); margin-top:.15rem; }
.team-card p{ font-size:.92rem; color:var(--slate-600,#475569); line-height:1.6; margin:0; }
.team-card.compact{ text-align:center; }
.team-card.compact .th{ flex-direction:column; text-align:center; gap:.6rem; }

/* Simple page hero (sub-pages) */
.page-hero{ position:relative; overflow:hidden; padding:calc(var(--space-12,6rem) + 40px) 0 var(--space-10,4rem); }
/* light mist bg ONLY on the agent/CE sub-page heroes; consumer heroes keep bg-gradient-navy */
body.agents .page-hero, body.ce .page-hero{ background:var(--mist,#f4f0fb); }
body.agents .page-hero .eyebrow, body.ce .page-hero .eyebrow{ color:var(--navy-600); }
body.agents .page-hero p, body.ce .page-hero p{ color:var(--slate-700); }
.page-hero .eyebrow{ margin-bottom:var(--space-3,1rem); }
.page-hero h1{ max-width:20ch; }
.page-hero .lead{ max-width:60ch; margin-top:var(--space-4,1.25rem); }
.breadcrumbs{ font-size:.82rem; color:var(--slate-500); margin-bottom:var(--space-4,1.25rem); }
.breadcrumbs a{ color:var(--navy-600,#6d28d9); font-weight:600; }
.breadcrumbs span{ opacity:.5; margin:0 .4rem; }

/* Contact page: text-only left column — balance the two columns and
   keep a comfortable channel so long lines don't crowd the form card. */
.contact-split{ grid-template-columns:minmax(0,460px) minmax(0,520px); justify-content:center; align-items:start; gap:clamp(2.5rem,2rem + 3vw,4.5rem); }
.contact-split .stack{ max-width:440px; }
@media (max-width:920px){ .contact-split{ grid-template-columns:1fr; justify-content:stretch; } .contact-split .stack{ max-width:none; } }

/* Agent section: darker, higher-contrast intro/lead text */
body.agents .lead{ color:var(--slate-700); }
body.agents .page-hero .lead{ color:var(--slate-700); }

/* ============================================================
   CONTINUING EDUCATION (CE) section
   ============================================================ */
body.ce .lead{ color:var(--slate-700); }
body.ce .page-hero .lead{ color:var(--slate-700); }

/* Hub hero card mini-list */
.mini-list{ display:grid; gap:.6rem; }
.mini-item{ display:flex; align-items:center; gap:.8rem; padding:.65rem .8rem; border:1px solid rgba(46,16,101,.10); border-radius:14px; background:#fff; }
.mini-ic{ flex:none; width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#efe3ff,#fbe4f5); color:#7c3aed; display:grid; place-items:center; overflow:visible; }
.mini-ic svg{ width:23px; height:23px; display:block; }
.mini-item strong{ display:block; color:var(--ink); font-size:.95rem; line-height:1.2; }
.mini-item span{ display:block; font-size:.8rem; color:var(--slate-500); margin-top:.1rem; }

/* Course / event cards */
.event-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem; }
.event-card{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(46,16,101,.10); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 10px 30px rgba(46,16,101,.06); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.event-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(46,16,101,.12); }
.event-media{ aspect-ratio:16/10; overflow:hidden; background:var(--mist); }
.event-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-body{ padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.date-badge{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; font-size:.76rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--navy-600); background:var(--mist); border:1px solid rgba(76,29,149,.14); border-radius:999px; padding:.35rem .7rem; margin-bottom:.75rem; }
.event-body h3{ margin-bottom:.5rem; font-size:1.2rem; }
.event-body > p{ font-size:.93rem; color:var(--slate-700); line-height:1.6; }
.event-body ul{ list-style:none; padding:0; margin:.8rem 0 0; display:grid; gap:.4rem; }
.event-body ul li{ position:relative; padding-left:1.5rem; font-size:.9rem; color:var(--slate-700); line-height:1.5; }
.event-body ul li::before{ content:""; position:absolute; left:0; top:.5em; width:.5rem; height:.5rem; border-radius:50%; background:linear-gradient(135deg,#6d28d9,#c026d3); }
.approvals{ font-size:.8rem !important; color:var(--slate-500) !important; margin-top:.85rem; padding-top:.85rem; border-top:1px dashed rgba(46,16,101,.14); }
.event-body .btn{ margin-top:auto; }
.event-body .approvals, .event-body > ul{ margin-bottom:1.1rem; }
.event-body .btn.mt-auto{ margin-top:auto; }

/* Responsive video embeds */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.6rem; }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 10px 30px rgba(46,16,101,.10); background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================
   Nav de-cramp + CE logo sizing (v16)
   ============================================================ */
.nav-menu { gap: 0.15rem; }
.nav-link { padding: 0.55rem 0.7rem; font-size: 0.93rem; }
.nav-cta { gap: 0.5rem; }
.nav { gap: 1.25rem; }
@media (max-width: 1240px){ .nav-link{ padding: 0.5rem 0.6rem; font-size: 0.9rem; } }
/* CE section logo (header + white footer) */
body.ce .nav-logo img { height: 76px; }
body.ce .nav { min-height: 116px; }
body.ce .footer-logo img { height: 70px; }

/* ============================================================
   v18 — mobile polish + button shine (visible without hover)
   ============================================================ */
@media (max-width: 560px){
  /* the wide CE logo must shrink on phones or it overflows */
  body.ce .nav-logo img{ height: 40px; }
  body.ce .nav{ min-height: 70px; }
  body.ce .footer-logo img{ height: 54px; }
  /* single-column galleries so a 320px min can't force sideways scroll */
  .event-grid, .video-grid, .team-grid{ grid-template-columns: 1fr; }
  .chip-grid span{ font-size:.8rem; padding:.36rem .62rem; }
  /* comfortable tap targets */
  .footer-links a{ display:inline-block; padding-block:.24rem; }
  .mobile-nav a{ min-height:44px; display:flex; align-items:center; }
  .btn-row{ flex-wrap:wrap; }
  .btn, .btn-lg{ min-height:48px; }
  /* headline breathing room on small screens */
  .display{ letter-spacing:-0.015em; }
}
@media (max-width: 360px){
  .event-grid, .video-grid, .team-grid, .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; }
}

/* Idle "shine" sweep on the primary CTAs — animates on its own so it
   reads as premium even on touch devices where there's no hover. */
@media (prefers-reduced-motion: no-preference){
  .btn-lg.btn-gold::before, .btn-block.btn-gold::before{
    content:""; position:absolute; top:0; left:-160%; width:55%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-18deg); pointer-events:none; border-radius:inherit;
    animation: btnSheen 5s ease-in-out infinite; animation-delay:1.4s;
  }
  @keyframes btnSheen{ 0%{ left:-160%; } 42%{ left:160%; } 100%{ left:160%; } }
}

/* v19 — FIX: footer/mobile logos were stretched because the width="" attribute
   acted as a fixed width while CSS only set height. Force proportional. */
.footer-logo img, .mobile-menu-top img { width: auto !important; max-width: 100%; }

/* Move hero content up (less top padding) + remove reliance on pills */
.hero { padding-top: clamp(1.4rem, 0.8rem + 1.4vw, 2.6rem) !important; }
.page-hero { padding-top: calc(var(--space-9, 3rem) + 14px) !important; }

/* v20 — bigger header logo + de-cramped nav labels */
.nav-logo img { height: 58px; }
@media (max-width: 1240px){ .nav-logo img { height: 50px; } }
@media (max-width: 640px){ .nav-logo img { height: 44px; } }