/* ============================================================
   RoadmapMint — Main Stylesheet
   Brand: Deep Navy #172B3A | Mint #34D399 | White #FFF | Black #111
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand */
  --clr-navy:      #172B3A;
  --clr-mint:      #34D399;
  --clr-white:     #FFFFFF;
  --clr-black:     #111111;

  /* Light theme (default) */
  --bg-page:       #FAFBFB;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F3F5F5;
  --bg-nav:        rgba(255,255,255,0.92);
  --txt-primary:   #172B3A;
  --txt-secondary: #3D5A6C;
  --txt-muted:     #52707F;
  --txt-inverse:   #FFFFFF;
  --border:        rgba(23,43,58,0.10);
  --shadow-sm:     0 1px 4px rgba(23,43,58,0.08);
  --shadow-md:     0 4px 20px rgba(23,43,58,0.10);
  --shadow-lg:     0 8px 40px rgba(23,43,58,0.13);

  /* Accent */
  --clr-accent:    #34D399;
  --clr-accent-dk: #22B87D;
  --clr-accent-txt: #0E7F58;   /* accent green for TEXT on light surfaces: 4.6:1 on #DCFDF0, 5:1 on white (#22B87D is only 2.4:1) */
  --clr-accent-lt: #DCFDF0;
  --announce-bg:   #DCFDF0;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 999px;

  /* Type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Nav */
  --nav-h: 68px;

  /* Transitions */
  --ease: 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-page:       #0C1A23;
  --bg-surface:    #132130;
  --bg-surface-2:  #1A2D3D;
  --bg-nav:        rgba(12,26,35,0.95);
  --txt-primary:   #E8F4F0;
  --txt-secondary: #A8C4D0;
  --txt-muted:     #87A3B0;
  --clr-accent-txt: #22B87D;
  --txt-inverse:   #172B3A;
  --border:        rgba(255,255,255,0.08);
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.25);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.45);
  --clr-accent-lt: rgba(52,211,153,0.15);
  --announce-bg:   #123B2E;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg-page);
  color: var(--txt-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--ease), color var(--ease);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--txt-primary);
  letter-spacing: -0.02em;
}

.text-muted    { color: var(--txt-muted); }
.text-secondary{ color: var(--txt-secondary); }
.text-mint     { color: var(--clr-mint); }
.text-center   { text-align: center; }

/* ── Layout Utilities ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.section {
  padding-top: calc(var(--sp-10) * 0.6);
  padding-bottom: calc(var(--sp-12) * 0.6);
}

.section-sm {
  padding-block: var(--sp-16);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed;
  /* --announce-h is set by header.php's inline script to the offer
     banner's real rendered height (0 when there is no active offer),
     so the fixed nav sits right below it instead of covering it. */
  top: var(--announce-h, 0px); left: 0; right: 0;
  height: var(--nav-h);
  background: var(--bg-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 20px -14px rgba(52,211,153,0.5);
  z-index: 1000;
  transition: background var(--ease), box-shadow var(--ease);
}

.nav.scrolled {
  box-shadow: var(--shadow-md), 0 8px 20px -14px rgba(52,211,153,0.5);
}

.nav-inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav-logo img {
  height: 34px;
  width: auto;
}

.nav-logo .logo-light { display: block; }
.nav-logo .logo-dark  { display: none; }
[data-theme="dark"] .nav-logo .logo-light { display: none; }
[data-theme="dark"] .nav-logo .logo-dark  { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav-link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--txt-secondary);
  padding: 0.3rem 0;
  transition: color var(--ease);
}

.nav-link:hover {
  color: var(--txt-primary);
}

.nav-link.active {
  color: var(--txt-primary);
  font-weight: 700;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--clr-mint);
  border-radius: 2px;
}

/* Secondary link in the mobile menu ("Check roadmap status"); on desktop the same page is the Order Status button in the header actions. */
.nav-link--secondary { font-size: var(--fs-xs); color: var(--txt-muted); white-space: nowrap; }
.nav-link--secondary:hover, .nav-link--secondary.active { color: var(--txt-primary); }
.nav-mobile .nav-link--secondary { font-size: var(--fs-base); }

/* --clr-accent-dk is a fixed medium-green, correct against the SOLID pale
   mint of --clr-accent-lt in light theme — but accent-lt becomes a
   translucent overlay on a dark surface in dark theme, so that same text
   color loses real contrast. Every component using the accent-lt/accent-dk
   pairing swaps its text/icon color to the theme-aware --txt-primary here
   instead, rather than patching each one individually. */
[data-theme="dark"] .tag-green,
[data-theme="dark"] .dot-done,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .coverage-group-icon,
[data-theme="dark"] .principle-icon,
[data-theme="dark"] .audience-compact-icon,
[data-theme="dark"] .engine-node-icon,
[data-theme="dark"] .pricing-feature .check,
[data-theme="dark"] .pricing-label,
[data-theme="dark"] .hero-badge {
  color: var(--txt-primary);
}

/* Header actions: currency dropdown, theme toggle, Order Status (outlined), Get My Roadmap (solid). Every control is 36px high and
   fully rounded; they sit on the bar itself with even spacing rather than inside one pill. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav-actions .btn { min-height: 36px; padding-block: 0; }
.nav-status-btn[aria-current="page"] { border-color: var(--clr-mint); color: var(--txt-primary); background: var(--clr-accent-lt); }

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--txt-secondary);
  transition: all var(--ease);
}

.theme-toggle:hover {
  color: var(--txt-primary);
  border-color: var(--clr-mint);
}

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile menu toggle */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
}

.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--txt-primary);
  border-radius: 2px;
  transition: all var(--ease);
}

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

/* Mobile nav */
.nav-mobile {
  display: none;
  position: fixed;
  top: calc(var(--nav-h) + var(--announce-h, 0px)); left: 0; right: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-6);
  z-index: 999;
  box-shadow: var(--shadow-lg);
}

.nav-mobile.open { display: block; }

.nav-mobile .nav-link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-1);
}

.nav-mobile .nav-mobile-actions {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Navigation: switch to the menu button when the desktop row stops having comfortable room. Measured with the currency dropdown,
   the theme toggle, Order Status and Get My Roadmap in the actions: from 1300px there are at least 28px between the logo, the links and the actions; below that the gaps
   close and labels would wrap. The menu button then takes over; Order Status moves into the menu. The no-JavaScript style in
   includes/header.php uses the same value. */
@media (max-width: 1299px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-full);
  padding: 0.6rem 1.4rem;
  transition: all var(--ease);
  white-space: nowrap;
  border: 1.5px solid transparent;
  line-height: 1.4;
  color: var(--txt-primary);
}

.btn-primary {
  background: var(--clr-mint);
  color: var(--clr-navy);
  border-color: var(--clr-mint);
}

.btn-primary:hover {
  background: var(--clr-accent-dk);
  border-color: var(--clr-accent-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(52,211,153,0.4);
}

.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--txt-primary);
  border-color: var(--border);
}

.btn-outline:hover {
  border-color: var(--clr-mint);
  color: var(--clr-mint);
  background: var(--clr-accent-lt);
}

.btn-navy {
  background: var(--clr-navy);
  color: #fff;
  border-color: var(--clr-navy);
}

.btn-navy:hover {
  background: #1e3a4d;
  border-color: #1e3a4d;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  font-size: var(--fs-base);
  padding: 0.85rem 2rem;
}

.btn-sm {
  font-size: var(--fs-xs);
  padding: 0.45rem 1rem;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding-top: calc(var(--nav-h) + var(--announce-h, 0px) + var(--sp-10));
  padding-bottom: var(--sp-12);
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(52,211,153,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.hero-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-mint);
  margin-bottom: var(--sp-6);
}

.hero-trust-line {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  margin-top: var(--sp-8);
}

/* Simplified roadmap preview — illustrative sample data (Grade 12 ·
   Science → Software Engineering) without a "Sample Profile" label, so
   it demonstrates the product concretely without making the hero feel
   demographic-specific. Deliberately narrower than its grid column (not
   stretched to fill it) — a wide card with short lines of text read as
   an empty panel, not a tight product preview. Sized to its own content
   rather than height-matched to the copy column; "equal visual weight,"
   not identical pixel height, is the goal. */
.roadmap-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
}

.rp-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-5);
}

/* Timeline: a real connected node/line system rather than floating
   arrow characters between stacked blocks — the vertical line is one
   continuous element behind all dots (::before on the container), each
   node's dot sits on top of it with a surface-colored ring to separate
   it visually from the line running through it. */
.rp-timeline {
  position: relative;
  padding-left: 26px;
}
.rp-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.rp-node {
  position: relative;
  padding-bottom: var(--sp-5);
}
.rp-node:last-child { padding-bottom: 0; }

.rp-dot {
  position: absolute;
  left: -23px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-mint);
  opacity: 0.75;
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.rp-dot-final { background: var(--clr-navy); opacity: 1; }
[data-theme="dark"] .rp-dot-final { background: var(--clr-mint); }

/* Value-first grouping: the concrete illustrative value leads (bigger,
   bold), the descriptor label follows underneath in small muted text —
   inverted from a caption-above-value layout so the actual content, not
   the category name, is what the eye lands on first. "What's Between" /
   "Pathway" / "Next Action" keep their label-first treatment since
   they're introducing a group, not a single illustrative fact. */
.rp-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--txt-primary);
  line-height: 1.3;
}

.rp-desc {
  font-size: var(--fs-xs);
  color: var(--txt-muted);
  margin-top: 1px;
}

.rp-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-mint);
  margin-bottom: 4px;
}

.rp-next { color: var(--clr-mint); }

.rp-checks { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
.rp-checks li {
  font-size: var(--fs-base);
  color: var(--txt-secondary);
  padding-left: var(--sp-5);
  position: relative;
  white-space: nowrap;
}
.rp-checks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--clr-mint);
  font-weight: 700;
}

.rp-pathway-line {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--txt-secondary);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--clr-accent-lt);
  color: var(--clr-navy);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
}

.hero-badge .dot {
  width: 6px; height: 6px;
  background: var(--clr-mint);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.3);
}

.hero-title {
  font-size: var(--fs-5xl);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.03em;
}

.hero-title .accent {
  color: var(--clr-mint);
  position: relative;
}

.hero-subtitle {
  font-size: var(--fs-lg);
  color: var(--txt-secondary);
  line-height: 1.65;
  margin-bottom: var(--sp-8);
  max-width: 500px;
}

.hero-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.hero-price .price-main {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--txt-primary);
}

.hero-price .price-label {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
}

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-10);
}

.hero-trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--txt-muted);
}

.hero-trust-item svg {
  color: var(--clr-mint);
  flex-shrink: 0;
}

/* Hero visual / roadmap mockup */
.hero-visual {
  position: relative;
  z-index: 1;
}

/* Small profile-switcher above the mockup card — subtle, compact, not a
   full section control like .audience-tabs. Uses the same active/hover
   pattern established for the segmented main-nav pills, but filled with
   the brand mint on the active state since this is a playful, secondary
   interactive element rather than primary navigation. */
.sample-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-surface-2);
  border-radius: var(--r-full);
  padding: 3px;
  margin-bottom: var(--sp-3);
}

.sample-toggle-btn {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--txt-muted);
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-full);
  transition: color var(--ease), background var(--ease);
}

.sample-toggle-btn:hover {
  color: var(--txt-secondary);
}

.sample-toggle-btn.active {
  color: var(--clr-navy);
  background: var(--clr-mint);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.roadmap-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.roadmap-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.roadmap-card-avatar {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-mint), var(--clr-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.roadmap-card-info h3, .roadmap-card-info h4 { font-size: var(--fs-sm); line-height: 1.3; margin-bottom: 2px; }
.roadmap-card-info p  { font-size: var(--fs-xs); line-height: 1.3; color: var(--txt-muted); }

.roadmap-step {
  display: flex;
  gap: var(--sp-4);
  position: relative;
}

.roadmap-step + .roadmap-step { margin-top: var(--sp-3); }

.roadmap-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.roadmap-step-dot .dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.dot-active   { background: var(--clr-mint); color: var(--clr-navy); }
.dot-done     { background: var(--clr-accent-lt); color: var(--clr-accent-txt); border: 1.5px solid var(--clr-mint); }
.dot-upcoming { background: var(--bg-surface-2); color: var(--txt-muted); border: 1.5px solid var(--border); }

.roadmap-step-line {
  width: 1.5px;
  flex: 1;
  min-height: 20px;
  background: var(--border);
  margin: 4px auto;
}

.roadmap-step-content { padding-top: 4px; padding-bottom: var(--sp-2); }
.roadmap-step-content h5 { font-size: var(--fs-sm); line-height: 1.3; font-weight: 600; margin-bottom: 2px; }
.roadmap-step-content p  { font-size: var(--fs-xs); line-height: 1.35; color: var(--txt-muted); }

.roadmap-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-full);
  padding: 2px 8px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-green  { background: var(--clr-accent-lt); color: var(--clr-accent-txt); }
.tag-blue   { background: #EAF2FF; color: #2563EB; }
.tag-orange { background: #FFF4E0; color: #B45309; }

[data-theme="dark"] .tag-blue   { background: rgba(37,99,235,0.2); color: #93C5FD; }
[data-theme="dark"] .tag-orange { background: rgba(180,83,9,0.2);  color: #FCD34D; }

/* Floating badge on hero visual */
.hero-float-badge {
  position: absolute;
  bottom: -28px;
  right: -16px;
  z-index: 2;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 200px;
}

.hero-float-badge .emoji { font-size: 1.5rem; }
.hero-float-badge h5 { font-size: var(--fs-sm); font-weight: 600; }
.hero-float-badge p  { font-size: var(--fs-xs); color: var(--txt-muted); }

/* ── Section Headings ───────────────────────────────────── */
.section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-mint);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  margin-bottom: var(--sp-5);
}

.section-desc {
  font-size: var(--fs-lg);
  color: var(--txt-secondary);
  line-height: 1.7;
}

.section-header {
  margin-bottom: var(--sp-8);
}

.section-header.center {
  text-align: center;
}

.section-header.center .section-desc {
  margin-inline: auto;
}

/* ── Feature / How-It-Works Steps ───────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  width: 80%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--clr-mint), transparent);
}

.step-item {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  position: relative;
}

.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--txt-muted);
  position: relative;
  z-index: 1;
  transition: all var(--ease);
}

.step-item:hover .step-num {
  background: var(--clr-mint);
  color: var(--clr-navy);
  border-color: var(--clr-mint);
  transform: scale(1.1);
}

.step-item h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.step-item p {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  line-height: 1.6;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(52,211,153,0.3);
}

.card-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--clr-accent-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--clr-accent-txt);
}

.card h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}

.card p {
  font-size: var(--fs-base);
  color: var(--txt-secondary);
  line-height: 1.7;
}

/* "What You Get" 4-item summary right after the hero — plain text
   blocks, deliberately no card/border/icon, consistent with the
   restraint direction the hero itself was rebuilt around. */
.whatget-grid { gap: var(--sp-8); }
.whatget-item h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.whatget-item p { font-size: var(--fs-sm); color: var(--txt-secondary); line-height: 1.6; }

/* Sample Roadmap preview — large muted numerals lead each item, kept
   text-only (no icons/cards) so it reads as a quick, confident preview
   rather than another explanatory feature grid. */
.sample-preview-grid { gap: var(--sp-8); }
.sample-preview-num {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: #678290;   /* soft brand grey-teal; large bold text needs 3:1 (was #6B8999 at 50% = 1.8:1) */
  margin-bottom: var(--sp-2);
  line-height: 1;
}
[data-theme="dark"] .sample-preview-num { color: #5E7A89; }
.sample-preview-item h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.sample-preview-item p { font-size: var(--fs-sm); color: var(--txt-secondary); }

/* Scoped to "What You Get" specifically — reuses the same icon-flip
   hover treatment built for the About page's principles (icon fills
   solid mint, icon color flips to navy, matching .btn-primary's proven
   accessible pairing), plus a mint left-border accent, layered on top
   of this section's existing lift/shadow hover rather than replacing
   it. Scoped by #what-you-get so how-it-works.php's own re-use of
   .card/.card-icon for a different section isn't affected. */
#what-you-get .card {
  border-left: 3px solid transparent;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), border-left-color var(--ease);
}
#what-you-get .card:hover {
  border-left-color: var(--clr-mint);
}
#what-you-get .card-icon {
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
#what-you-get .card:hover .card-icon {
  background: var(--clr-mint);
  color: var(--clr-navy);
  transform: scale(1.06);
}

/* ── Pricing Card ───────────────────────────────────────── */
.pricing-card {
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-mint), var(--clr-navy));
}

.pricing-card.featured {
  border-color: var(--clr-mint);
  box-shadow: var(--shadow-lg);
}

.pricing-label {
  display: inline-block;
  background: var(--clr-accent-lt);
  color: var(--clr-accent-txt);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-6);
}

.pricing-price {
  margin-bottom: var(--sp-6);
}

.pricing-price .amount {
  font-size: var(--fs-6xl);
  font-weight: 800;
  color: var(--txt-primary);
  line-height: 1;
}

.pricing-price .currency {
  font-size: var(--fs-3xl);
  font-weight: 700;
  vertical-align: top;
  margin-top: 0.5rem;
  display: inline-block;
}

.pricing-price .period {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  display: block;
  margin-top: var(--sp-2);
}

.pricing-usd {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  margin-bottom: var(--sp-8);
}

.pricing-features {
  text-align: left;
  margin-bottom: var(--sp-8);
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
}

.pricing-feature:last-child { border-bottom: none; }

.pricing-feature .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--clr-accent-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--clr-accent-txt);
}
.pricing-feature .check svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Audience Tabs ──────────────────────────────────────── */
.audience-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-12);
}

.audience-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--txt-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--ease);
}

.audience-tab:hover { border-color: var(--clr-mint); color: var(--txt-primary); }
.audience-tab.active {
  background: var(--clr-mint);
  border-color: var(--clr-mint);
  color: var(--clr-navy);
}

/* ── FAQ / Accordion ────────────────────────────────────── */
.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  text-align: left;
  padding: var(--sp-5) 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--txt-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--ease);
}

.accordion-trigger:hover { color: var(--clr-mint); }

.accordion-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
  color: var(--txt-muted);
}

.accordion-item.open .accordion-icon {
  background: var(--clr-mint);
  border-color: var(--clr-mint);
  color: var(--clr-navy);
  transform: rotate(45deg);
}

.accordion-body {
  display: none;
  padding-bottom: var(--sp-5);
  color: var(--txt-secondary);
  font-size: var(--fs-base);
  line-height: 1.75;
}

.accordion-item.open .accordion-body { display: block; }

/* ── CTA Band ───────────────────────────────────────────── */
.cta-band {
  background: var(--clr-navy);
  border-radius: var(--r-xl);
  padding: var(--sp-20) var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: var(--sp-8) 0;
}

.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(52,211,153,0.08);
  pointer-events: none;
}

.cta-band::before { width: 400px; height: 400px; top: -150px; left: -100px; }
.cta-band::after  { width: 300px; height: 300px; bottom: -100px; right: -80px; }

.cta-band h2 { color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--sp-4); }
.cta-band p  { color: rgba(255,255,255,0.65); font-size: var(--fs-lg); margin-bottom: var(--sp-8); max-width: 500px; margin-inline: auto; }

/* ── Stats Row ──────────────────────────────────────────── */
.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
  padding: var(--sp-12) 0;
}

.stat-item { text-align: center; }
.stat-item .stat-value {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--txt-primary);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.stat-item .stat-value .accent { color: var(--clr-mint); }
.stat-item .stat-label { font-size: var(--fs-sm); color: var(--txt-muted); font-weight: 500; }

/* ── Who Is It For Section ──────────────────────────────── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.audience-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  transition: all var(--ease);
}

.audience-card:hover {
  border-color: rgba(52,211,153,0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.audience-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  width: 60px; height: 60px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.audience-card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.audience-card p  { font-size: var(--fs-sm); color: var(--txt-secondary); line-height: 1.65; }

.audience-card ul {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.audience-card ul li {
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.audience-card ul li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--clr-mint);
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

/* ── Coverage Strip ─────────────────────────────────────── */
.coverage-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 980px;
  margin-inline: auto;
}

.coverage-group {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}

/* The "Connects" card is the actual differentiator, so it gets a touch
   more visual weight than the two example-list cards — not a different
   style, just more of the same one (stronger border, bigger shadow, more
   room, slightly larger icon/heading). */
.coverage-group-featured {
  padding: var(--sp-10);
  border: 1.5px solid rgba(52,211,153,0.35);
  box-shadow: var(--shadow-md);
}

.coverage-group-featured .coverage-group-icon {
  width: 48px;
  height: 48px;
}

.coverage-group-featured .coverage-group-head h3 {
  font-size: var(--fs-xl);
}

.coverage-group-head {
  text-align: center;
  margin-bottom: var(--sp-4);
}

.coverage-group-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-accent-lt);
  color: var(--clr-accent-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-3);
}

.coverage-group-head h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: 4px;
}

.coverage-group-note {
  font-size: var(--fs-xs);
  color: var(--txt-muted);
  font-style: italic;
}

.coverage-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.coverage-tile {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-secondary);
  transition: all var(--ease);
}

.coverage-tile:hover {
  border-color: var(--clr-mint);
  color: var(--txt-primary);
}

.coverage-tile-more {
  background: transparent;
  border-style: dashed;
  color: var(--txt-muted);
}

/* Compact pill-and-arrow flow for "What RoadmapMint Connects" —
   deliberately lighter-weight than .engine-flow's boxed nodes (used
   elsewhere for a 5-step framework diagram), since this list runs to 8
   items and needs to stay tight rather than bulky. */
.connect-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.connect-node {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0.5rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-primary);
  white-space: nowrap;
}

.connect-arrow {
  color: var(--clr-mint);
  font-size: var(--fs-base);
  flex-shrink: 0;
}

.connect-flow-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--txt-muted);
  font-style: italic;
  margin-top: var(--sp-5);
}

/* Compact Coverage section — replaces three large bordered cards with
   one plain block (two label+list rows) plus a lightweight relationship
   diagram, so this section proves breadth without becoming a catalog. */
.coverage-compact {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}
.coverage-compact-row {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.coverage-compact-row:last-child { border-bottom: 1px solid var(--border); }
.coverage-compact-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-mint);
  margin-bottom: var(--sp-2);
}
.coverage-compact-list {
  font-size: var(--fs-base);
  color: var(--txt-secondary);
}
.coverage-more { color: var(--txt-muted); font-style: italic; }

.coverage-model { text-align: center; }
.coverage-model-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-4);
}

/* Compact "Who It's For" cards — replaces interactive tabs + long
   expanded panels with four always-visible, one-line cards. */
.audience-compact-grid { gap: var(--sp-6); }
.audience-compact-card { text-align: center; }
.audience-compact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-accent-lt);
  color: var(--clr-accent-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-3);
}
.audience-compact-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.audience-compact-card p { font-size: var(--fs-sm); color: var(--txt-secondary); line-height: 1.5; }

/* Progressive mint tint across the 8 connect-nodes: neutral at the start
   (Curriculum — where you are), building to a fully mint-filled pill at
   the end (Next Actions — your destination). Purely visual storytelling,
   no new component needed beyond color per node. */
.connect-node-1 { background: var(--bg-surface); border-color: var(--border); color: var(--txt-secondary); }
.connect-node-2 { background: rgba(52,211,153,0.05); border-color: rgba(52,211,153,0.25); color: var(--txt-secondary); }
.connect-node-3 { background: rgba(52,211,153,0.09); border-color: rgba(52,211,153,0.35); }
.connect-node-4 { background: rgba(52,211,153,0.13); border-color: rgba(52,211,153,0.45); }
.connect-node-5 { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.55); }
.connect-node-6 { background: rgba(52,211,153,0.24); border-color: rgba(52,211,153,0.65); }
.connect-node-7 { background: rgba(52,211,153,0.32); border-color: rgba(52,211,153,0.8); }
.connect-node-8 { background: var(--clr-mint); border-color: var(--clr-mint); color: var(--clr-navy); font-weight: 700; }

/* ── Sample Roadmap Excerpt ─────────────────────────────── */
.excerpt-card { padding: var(--sp-10); }

.excerpt-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--txt-muted);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-5);
}

.excerpt-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.excerpt-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2.4fr;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
  border-bottom: 1px solid var(--border);
}

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

.excerpt-row-head {
  background: var(--bg-surface-2);
  font-weight: 700;
  color: var(--txt-primary);
  font-size: var(--fs-xs);
}

/* ── Process / How It Works Detail ─────────────────────── */
.hiw-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.hiw-step {
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: all var(--ease);
}

.hiw-step:hover {
  border-color: rgba(52,211,153,0.3);
  box-shadow: var(--shadow-md);
}

.hiw-step-num {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--clr-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 800;
  flex-shrink: 0;
}

[data-theme="dark"] .hiw-step-num { background: var(--clr-mint); color: var(--clr-navy); }

.hiw-step-body h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.hiw-step-body p  { color: var(--txt-secondary); line-height: 1.7; }

/* ── Roadmap Engine Graphic ─────────────────────────────── */
.engine-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: var(--sp-12) 0;
}

.engine-node {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-6);
  text-align: center;
  min-width: 130px;
  transition: all var(--ease);
}

.engine-node:hover {
  border-color: var(--clr-mint);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.15);
}

.engine-node .node-emoji { font-size: 1.5rem; margin-bottom: var(--sp-2); }
.engine-node-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-accent-lt);
  color: var(--clr-accent-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-2);
}
.engine-node h3, .engine-node h4 { font-size: var(--fs-sm); font-weight: 700; }
.engine-node p  { font-size: var(--fs-xs); color: var(--txt-muted); }

.engine-arrow {
  font-size: var(--fs-xl);
  color: var(--clr-mint);
  padding: 0 var(--sp-3);
  flex-shrink: 0;
}

/* ── Utility / Misc ─────────────────────────────────────── */
.divider {
  width: 60px; height: 3px;
  background: var(--clr-mint);
  border-radius: 2px;
  margin-bottom: var(--sp-6);
}

.divider.center { margin-inline: auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--bg-surface-2);
  color: var(--txt-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
}

.bg-surface-2 { background: var(--bg-surface-2); }

/* Gradient text */
.grad-text {
  background: linear-gradient(135deg, var(--clr-mint) 0%, #6EE7B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Homepage hero (centred introduction + supporting panel). Scoped to .hero--home. ───────────────── */
.hero--home .hx-intro { max-width: 960px; margin: 0 auto; text-align: center; }
.hero--home .hero-eyebrow { margin-bottom: var(--sp-5); }
.hero--home .hero-title { margin-bottom: var(--sp-5); text-wrap: balance; line-height: 1.12; }
.hero--home .hx-line { display: block; text-wrap: balance; }
.hero--home .hx-lead { font-size: 0.6em; font-weight: 700; letter-spacing: -0.01em; color: var(--txt-secondary); margin-bottom: 0.35em; }
.hero--home .hx-big { font-size: 1em; font-weight: 800; }
@media (min-width: 1025px) { .hero--home .hero-title { font-size: 3.25rem; } .hero--home .hx-intro { max-width: 1040px; } }
.hero--home .hx-s { display: inline-block; max-width: 100%; }
.hero--home .hero-subtitle { max-width: 640px; margin: 0 auto var(--sp-8); font-size: var(--fs-lg); color: var(--txt-secondary); }
.hero--home .hx-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--sp-1) var(--sp-5); margin: 0 0 var(--sp-8); }
.hero--home .hx-meta p { margin: 0; }
.hero--home .hx-about { max-width: 640px; margin: 0 auto; padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.hero--home .hx-explainer { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.65; color: var(--txt-secondary); }
.hero--home .hx-powered { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--txt-muted); }
.hero--home .hero-actions { justify-content: center; margin-bottom: var(--sp-5); }
.hero--home .hx-reassure { font-size: var(--fs-sm); color: var(--txt-secondary); margin: 0 0 var(--sp-3); }
.hero--home .hx-contact { font-size: var(--fs-sm); color: var(--txt-muted); margin: 0; }
.hero--home .hx-contact a, .hero--home .hx-more a, .hero--home .hx-faq a { color: var(--clr-accent-txt); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.hero--home .hx-panel {
  max-width: none; margin: var(--sp-12) 0 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-10) var(--sp-10); box-shadow: var(--shadow-sm, 0 1px 3px rgba(23,43,58,0.06));
}
.hero--home .hx-panel-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-8); align-items: start;
  text-align: left; padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--border);
}
.hero--home .hx-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-accent-txt); margin: 0 0 var(--sp-3); }
.hero--home .hx-heading { font-size: var(--fs-2xl); line-height: 1.2; margin: 0; }
.hero--home .hx-explain { font-size: var(--fs-sm); color: var(--txt-secondary); margin: 0; }
.hero--home .hx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }

.hero--home .hx-plan { padding: var(--sp-5) 0; }
.hero--home .hx-plan:first-child { padding-top: 0; }
.hero--home .hx-plan + .hx-plan { border-top: 1px solid var(--border); }
.hero--home .hx-plan h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.hero--home .hx-plan-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 var(--sp-2); margin-left: auto; text-align: right; }
.hero--home .hx-inr { font-size: var(--fs-xl); font-weight: 800; color: var(--txt-primary); }
.hero--home .hx-sec { font-size: var(--fs-sm); font-weight: 500; color: var(--txt-muted); }
.hero--home .hx-was, .hero--home .hx-usd { color: var(--txt-muted); font-weight: 500; }
/* Narrow phones: name and current price share the first row; the former price and the dollar amount go on a second, right-aligned row. */
@media (max-width: 560px) {
  .hero--home .hx-plan h3 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--sp-3); }
  .hero--home .hx-plan-price { display: contents; }
  .hero--home .hx-inr { grid-column: 2; grid-row: 1; text-align: right; }
  .hero--home .hx-sec { grid-column: 1 / -1; grid-row: 2; text-align: right; }
}
.hero--home .hx-plan p, .hero--home .hx-sample p { font-size: var(--fs-sm); color: var(--txt-secondary); margin: 0 0 var(--sp-3); }
.hero--home .hx-more { margin: var(--sp-4) 0 0 !important; font-size: var(--fs-sm); }

.hero--home .hx-sample { margin: 0; border-radius: var(--r-md); padding: var(--sp-6); background: var(--bg-surface-2); }
.hero--home .hx-sample figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-5); }
.hero--home .hx-sample-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--clr-accent-lt); color: var(--clr-accent-txt); border-radius: var(--r-full); padding: 2px 10px; }
.hero--home .hx-sample-title { font-weight: 700; color: var(--txt-primary); }
.hero--home .hx-sample-note { flex-basis: 100%; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--txt-muted); }
.hero--home .hx-sample .hx-sample-lead { color: var(--txt-primary); margin-bottom: var(--sp-5); }
.hero--home .hx-sample h3 { font-size: var(--fs-base); line-height: 1.35; margin: 0 0 var(--sp-3); }
.hero--home .hx-chip { display: inline-block; vertical-align: middle; margin-left: var(--sp-2); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--border); border-radius: var(--r-full); padding: 1px 8px; background: var(--bg-surface); color: var(--txt-secondary); }

.hero--home .hx-disclaimer { max-width: 780px; margin: var(--sp-6) auto var(--sp-8); text-align: center; font-size: var(--fs-sm); color: var(--txt-secondary); }
.hero--home .hx-faq { max-width: none; margin: 0; padding: var(--sp-2) var(--sp-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.hero--home .hx-faq details { border-bottom: 1px solid var(--border); }
.hero--home .hx-faq details:last-child { border-bottom: 0; }
.hero--home .hx-faq summary { cursor: pointer; padding: var(--sp-4) var(--sp-1); font-weight: 600; color: var(--txt-primary); }
.hero--home .hx-faq details p { margin: 0; padding: 0 var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--txt-secondary); }
@media (max-width: 1000px) {
  .hero--home .hx-panel { padding: var(--sp-8) var(--sp-6); }
  .hero--home .hx-cols { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 768px) {
  .hero--home .hx-panel { padding: var(--sp-6) var(--sp-4); margin-top: var(--sp-8); }
  .hero--home .hx-panel-head { grid-template-columns: 1fr; gap: var(--sp-3); padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); }
  .hero--home .hx-heading { font-size: var(--fs-xl); }
  .hero--home .hx-sample { padding: var(--sp-4); }
  .hero--home .hx-faq { padding: var(--sp-1) var(--sp-4); }
}

/* ── Homepage hero v3: split layout (copy + real report page), then three answers to the visitor's first doubts. ───────── */
.hero--home::before { width: 60vw; height: 60vw; top: -25%; right: -15%; background: radial-gradient(circle, rgba(52,211,153,0.16) 0%, transparent 65%); }
.hero--home .hx-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); align-items: center; }
.hero--home .hx-top .hx-intro { max-width: 680px; }
@media (min-width: 1025px) {
  .hero--home .hx-top { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--sp-12); }
  .hero--home .hx-top .hx-intro { max-width: none; margin: 0; text-align: left; }
  .hero--home .hx-top .hero-title { font-size: 3rem; }
  .hero--home .hx-top .hero-subtitle, .hero--home .hx-top .hx-about { margin-left: 0; margin-right: 0; }
  .hero--home .hx-top .hero-actions, .hero--home .hx-top .hx-meta { justify-content: flex-start; }
}
.hero--home .hx-top .hx-lead { font-size: 0.5em; letter-spacing: 0; text-transform: none; }

/* the report page */
.hero--home .hx-doc { position: relative; margin: 0 auto; width: 100%; max-width: 520px; padding: 0 var(--sp-3) var(--sp-3) 0; }
.hero--home .hx-doc-sheet { position: absolute; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.hero--home .hx-doc-sheet--a { inset: var(--sp-3) 0 0 var(--sp-3); opacity: .75; }
.hero--home .hx-doc-sheet--b { inset: var(--sp-5) calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-5); opacity: .45; }
.hero--home .hx-doc-page { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 24px 60px -24px rgba(23,43,58,0.35), 0 4px 14px rgba(23,43,58,0.08); overflow: hidden; }
[data-theme="dark"] .hero--home .hx-doc-page { box-shadow: 0 24px 60px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(52,211,153,0.10); }
.hero--home .hx-doc-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-5); background: var(--clr-navy, #172B3A); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; }
.hero--home .hx-doc-brand { font-size: var(--fs-sm); letter-spacing: 0; font-weight: 500; }
.hero--home .hx-doc-brand b { color: var(--clr-mint); font-weight: 600; }
.hero--home .hx-doc-body { padding: var(--sp-5) var(--sp-6) var(--sp-4); text-align: left; }
.hero--home .hx-doc-kicker { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-accent-txt); }
.hero--home .hx-doc-title { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); }
.hero--home .hx-doc-item { padding: var(--sp-4) 0 0; margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.hero--home .hx-doc-title + .hx-doc-item { border-top: 0; padding-top: 0; margin-top: 0; }
.hero--home .hx-doc-item h3 { font-size: var(--fs-base); line-height: 1.35; margin: 0 0 var(--sp-2); }
.hero--home .hx-doc-item p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--txt-secondary); }
.hero--home .hx-doc-how { color: var(--txt-primary) !important; }
.hero--home .hx-chip { display: inline-block; vertical-align: middle; margin-left: var(--sp-2); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border-radius: var(--r-full); padding: 2px 9px; }
.hero--home .hx-chip--warn { background: #FFF4E0; color: #92400E; }
.hero--home .hx-chip--info { background: #EAF2FF; color: #1D4ED8; }
[data-theme="dark"] .hero--home .hx-chip--warn { background: rgba(180,83,9,0.25); color: #FCD34D; }
[data-theme="dark"] .hero--home .hx-chip--info { background: rgba(37,99,235,0.25); color: #93C5FD; }
.hero--home .hx-doc-foot { margin: 0; padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--txt-muted); }
.hero--home .hx-doc-cap { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-5); padding-right: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; color: var(--txt-muted); text-align: left; }
.hero--home .hx-doc-cap a { color: var(--clr-accent-txt); text-decoration: underline; text-underline-offset: 2px; }

/* three answers */
.hero--home .hx-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin: var(--sp-12) 0 0; }
.hero--home .hx-pt { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); text-align: left; box-shadow: var(--shadow-sm, 0 1px 3px rgba(23,43,58,0.06)); }
.hero--home .hx-pt-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--clr-accent-lt); color: var(--clr-accent-txt); margin-bottom: var(--sp-4); }
.hero--home .hx-pt h2 { font-size: var(--fs-lg); line-height: 1.3; margin: 0 0 var(--sp-3); }
.hero--home .hx-pt p { font-size: var(--fs-sm); color: var(--txt-secondary); margin: 0 0 var(--sp-4); }
.hero--home .hx-pt > a { font-size: var(--fs-sm); font-weight: 600; color: var(--clr-accent-txt); text-decoration: underline; text-underline-offset: 2px; }
.hero--home .hx-pt p a { color: var(--clr-accent-txt); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hero--home .hx-proof + .hx-panel { margin-top: var(--sp-8); }
@media (max-width: 900px) {
  .hero--home .hx-proof { grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-10); }
  .hero--home .hx-pt { padding: var(--sp-5); }
}
@media (max-width: 480px) { .hero--home .hx-doc-body { padding: var(--sp-4) var(--sp-4) var(--sp-3); } .hero--home .hx-doc-foot { padding: var(--sp-3) var(--sp-4); } .hero--home .hx-doc-bar { padding: var(--sp-3) var(--sp-4); } }


/* v3c: light, airy stage with a compact scrollable report preview */
.hero--home .hx-stage { position: relative; overflow: hidden; overflow: clip; border-radius: 28px; padding: var(--sp-12) var(--sp-10) var(--sp-10); border: 1px solid var(--border); background: radial-gradient(760px 420px at 92% 0%, rgba(52,211,153,0.20), transparent 62%), radial-gradient(640px 420px at 0% 100%, rgba(125,170,255,0.14), transparent 62%), linear-gradient(180deg, #FFFFFF, #F3FAF7); box-shadow: 0 24px 60px -34px rgba(23,43,58,0.35); }
[data-theme="dark"] .hero--home .hx-stage { background: radial-gradient(760px 420px at 92% 0%, rgba(52,211,153,0.16), transparent 62%), linear-gradient(180deg, #1B2F3F, #172B3A); }
.hero--home .hx-stage > * { position: relative; }
.hero--home .hx-stage .hero-eyebrow { max-width: 100%; display: inline-block; padding: 6px 14px; border-radius: var(--r-full); background: var(--clr-accent-lt); border: 1px solid rgba(5,150,105,0.25); }
.hero--home .hx-stage .hero-title { font-weight: 700; }
.hero--home .hx-stage .hx-lead { font-weight: 600; color: var(--txt-secondary); }
.hero--home .hx-stage .hx-big { font-weight: 700; letter-spacing: -0.02em; }
.hero--home .hx-stage .btn-primary { box-shadow: 0 10px 26px -10px rgba(5,150,105,0.55); }
.hero--home .hx-doc { max-width: 470px; }
.hero--home .hx-doc-page { background: var(--bg-surface); }
.hero--home .hx-doc-bar { background: var(--clr-navy, #172B3A); }
.hero--home .hx-doc-body { max-height: 232px; overflow-y: auto; padding: var(--sp-4) var(--sp-5); scrollbar-width: thin; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.hero--home .hx-doc-body:focus-visible { outline: 2px solid var(--clr-accent-txt); outline-offset: -2px; }
.hero--home .hx-doc-title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.hero--home .hx-doc-foot { padding: var(--sp-2) var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-3); }
.hero--home .hx-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-2); position: relative; }
.hero--home .hx-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 14px; border-top: 2px dashed rgba(5,150,105,0.4); }
.hero--home .hx-steps li { position: relative; text-align: center; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--txt-primary); }
.hero--home .hx-steps li span { display: flex; margin: 0 auto var(--sp-2); width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-surface); color: var(--clr-accent-txt); border: 2px solid var(--clr-mint); font-weight: 700; }
.hero--home .hx-doc-cap { margin-top: var(--sp-4); }
.hero--home .hx-proof { align-items: stretch; margin-top: var(--sp-10); }
.hero--home .hx-pt { display: flex; flex-direction: column; background: var(--bg-surface); box-shadow: 0 6px 22px -14px rgba(23,43,58,0.3); }
.hero--home .hx-pt > p { flex: 1 1 auto; }
.hero--home .hx-pt > a { margin-top: auto; }
.hero--home .hx-pt-ico { width: 46px; height: 46px; border-radius: 14px; }
.hero--home .hx-pt:nth-child(2) .hx-pt-ico { background: #FEF3C7; color: #92400E; }
.hero--home .hx-pt:nth-child(3) .hx-pt-ico { background: #E0F0FF; color: #1D4ED8; }
[data-theme="dark"] .hero--home .hx-pt:nth-child(2) .hx-pt-ico { background: rgba(251,191,36,0.18); color: #FCD34D; }
[data-theme="dark"] .hero--home .hx-pt:nth-child(3) .hx-pt-ico { background: rgba(56,189,248,0.18); color: #7DD3FC; }
@media (max-width: 1024px) { .hero--home .hx-stage { padding: var(--sp-10) var(--sp-8) var(--sp-8); } }
@media (max-width: 640px) { .hero--home .hx-stage { padding: var(--sp-8) var(--sp-5) var(--sp-6); border-radius: 22px; } .hero--home .hx-steps { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--sp-4); } .hero--home .hx-steps::before { display: none; } }

.hero--home .hx-from { color: var(--txt-primary); font-weight: 700; }
.hero--home .hx-trust { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--txt-muted); }
.hero--home .hx-steps li { padding: 0 2px; overflow-wrap: anywhere; }
/* v3d: real sample pages (scrollable) + full-width centred about */
.hero--home .hx-doc { padding: 0; max-width: 500px; }
.hero--home .hx-pages { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp-2) var(--sp-1) var(--sp-4); scrollbar-width: thin; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.hero--home .hx-pages:focus-visible { outline: 2px solid var(--clr-accent-txt); outline-offset: 2px; border-radius: var(--r-md); }
.hero--home .hx-pg { flex: 0 0 min(62%, 250px); margin: 0; scroll-snap-align: start; text-align: center; }
.hero--home .hx-pg img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); background: #fff; box-shadow: 0 18px 40px -20px rgba(23,43,58,0.45), 0 3px 10px rgba(23,43,58,0.08); }
.hero--home .hx-pg figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--txt-secondary); }
.hero--home .hx-doc-cap { justify-content: center; text-align: center; padding-right: 0; }
.hero--home .hx-stage .hx-top + .hx-about { max-width: 1000px; margin: var(--sp-10) auto 0; padding-top: var(--sp-6); text-align: center; border-top: 1px solid var(--border); }
.hero--home .hx-stage .hx-top + .hx-about .hx-explainer { max-width: none; margin: 0 auto var(--sp-2); font-size: var(--fs-base); }
.hero--home .hx-stage .hx-top + .hx-about .hx-powered { margin: 0; }
@media (max-width: 640px) { .hero--home .hx-pg { flex-basis: 68%; } }
/* v3e: eyebrow plain, carousel arrows, about block */
.hero--home .hx-stage .hero-eyebrow { background: none; border: 0; padding: 0; border-radius: 0; color: var(--clr-accent-txt); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; display: flex; align-items: center; gap: 10px; }
.hero--home .hx-stage .hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--clr-mint); flex: none; }
.hero--home .hx-doc { position: relative; }
.hero--home .hx-doc.is-js .hx-pages { scrollbar-width: none; }
.hero--home .hx-doc.is-js .hx-pages::-webkit-scrollbar { display: none; }
.hero--home .hx-nav { position: absolute; top: 38%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-surface); color: var(--clr-navy, #172B3A); box-shadow: 0 6px 16px -6px rgba(23,43,58,0.4); cursor: pointer; padding: 0; }
[data-theme="dark"] .hero--home .hx-nav { color: var(--txt-primary); }
.hero--home .hx-nav:hover { border-color: var(--clr-mint); color: var(--clr-accent-txt); }
.hero--home .hx-nav:focus-visible { outline: 2px solid var(--clr-accent-txt); outline-offset: 2px; }
.hero--home .hx-nav--prev { left: -8px; } .hero--home .hx-nav--next { right: -8px; }
.hero--home .hx-stage .hx-top + .hx-about .hx-explainer { max-width: 1000px; font-size: var(--fs-base); line-height: 1.7; color: var(--txt-secondary); text-wrap: pretty; }
.hero--home .hx-stage .hx-top + .hx-about .hx-powered { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--sp-3) 0 0; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.02em; color: var(--txt-muted); }
.hero--home .hx-powered svg { flex: none; color: var(--clr-accent-txt); }
.hero--home .hx-pt p { text-wrap: pretty; }
.hero--home .hx-top { align-items: start; }
.hero--home .hx-pages { padding-top: 0; }
@media (min-width: 1025px) { .hero--home .hx-doc { margin: 0 0 0 auto; } .hero--home .hx-nav { top: 30%; } }
.hero--home .hx-pg { flex-basis: min(60%, 205px); }
.hero--home .hx-pages { padding-bottom: var(--sp-2); }
.hero--home .hx-doc-cap { flex-direction: column; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); }
.hero--home .hx-nav { opacity: 0; transition: opacity .2s; }
.hero--home .hx-doc:hover .hx-nav, .hero--home .hx-doc:focus-within .hx-nav { opacity: 1; }
@media (hover: none) { .hero--home .hx-nav { opacity: 1; } }
.hero--home .hx-top .hx-meta { margin-top: var(--sp-10); }
@media (prefers-reduced-motion: reduce) { .hero--home .hx-nav { transition: none; } }
/* v3f: about block as a quote, no rule, tighter */
.hero--home .hx-stage .hx-top + .hx-about { border-top: 0; margin-top: var(--sp-6); padding: 0; position: relative; }
.hero--home .hx-stage .hx-top + .hx-about::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 0.7; height: 30px; color: var(--clr-mint); margin-bottom: var(--sp-2); }
.hero--home .hx-stage .hx-top + .hx-about .hx-explainer { font-size: var(--fs-lg); font-weight: 500; line-height: 1.6; color: var(--txt-primary); max-width: 900px; }
.hero--home .hx-stage .hx-top + .hx-about .hx-powered { margin-top: var(--sp-4); }
.hero--home .hx-stage .hx-top + .hx-about .hx-powered span::before { content: "\2014\00a0"; }
.hero--home .hx-stage .hx-proof { margin-top: var(--sp-8); }
.hero--home .hx-nb { white-space: nowrap; }
/* v3g: narrow-width containment */
.hero--home .hx-top > *, .hero--home .hx-intro, .hero--home .hx-doc { min-width: 0; }
.hero--home .hx-intro { width: 100%; max-width: 100%; }
.hero--home .hx-intro > *, .hero--home .hx-meta > * { max-width: 100%; min-width: 0; }
.hero--home .hero-actions .btn { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.hero--home .hx-nav--prev { left: 6px; } .hero--home .hx-nav--next { right: 6px; }
.hero--home .hx-stage .hx-audience { text-wrap: balance; }
@media (max-width: 380px) { .hero--home .hero-actions .btn { padding-left: var(--sp-4); padding-right: var(--sp-4); } }
/* v3h: audience line = supporting text; PDF benefit = main description */
.hero--home .hx-stage .hx-audience { font-size: var(--fs-sm); line-height: 1.6; color: var(--txt-muted); margin: 0 0 var(--sp-4); max-width: 34em; text-wrap: balance; }
.hero--home .hx-stage .hx-benefit { font-size: var(--fs-lg); line-height: 1.55; font-weight: 500; color: var(--txt-primary); margin: 0 0 var(--sp-6); max-width: 30em; text-wrap: balance; }
.hero--home .hx-top .hx-audience, .hero--home .hx-top .hx-benefit { margin-left: 0; margin-right: 0; }
@media (max-width: 1024px) { .hero--home .hx-stage .hx-audience, .hero--home .hx-stage .hx-benefit { margin-left: auto; margin-right: auto; } }
/* ── Display currency ──────────────────────────────────────
   Pages carry both amounts (they are cached, so the HTML is the same for every visitor); html[data-currency] picks one.
   Neutral (no choice yet, or JavaScript off): rupees with the dollar amount in brackets. INR: rupees only. USD: US$ only. */
.rm-uo { display: none; }
.rm-ub::before { content: " ("; }
.rm-ub::after  { content: ")"; }
.rm-ub.rm-c::before { content: ", "; }
.rm-ub.rm-c::after  { content: ""; }
html[data-currency="INR"] .rm-ub,
html[data-currency="INR"] .rm-uo,
html[data-currency="USD"] .rm-i { display: none; }
html[data-currency="USD"] .rm-uo { display: inline; }
html[data-currency="USD"] .rm-ub::before,
html[data-currency="USD"] .rm-ub::after { content: ""; }

.cur-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-surface); }
.cur-opt { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--txt-secondary); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: background var(--ease), color var(--ease); }
.cur-opt img { display: block; width: 18px; height: 12px; border-radius: 2px; flex: none; }
.cur-opt:hover { color: var(--txt-primary); }
.cur-opt[aria-pressed="true"] { background: var(--clr-accent-lt); color: var(--clr-accent-txt); box-shadow: inset 0 0 0 1px var(--clr-mint); }
.cur-opt:focus-visible { outline: 2px solid var(--clr-accent-txt); outline-offset: 1px; }
.cur-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-mobile-currency { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.nav-mobile-currency .cur-label { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-muted); }
.cur-switch--menu { display: flex; width: 100%; }

/* Header currency dropdown: shows only the selected currency; both are offered in the list. The trigger's content is chosen by
   html[data-currency] in CSS (like the prices), so it is right before any script runs. */
.cur-switch.cur-dd { display: block; position: relative; padding: 0; border: 0; border-radius: 0; background: none; }
.cur-dd-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-surface); color: var(--txt-primary); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; transition: border-color var(--ease), background var(--ease); }
.cur-dd-btn:hover, .cur-dd-btn[aria-expanded="true"] { border-color: var(--clr-mint); }
.cur-dd-btn:focus-visible, .cur-dd-list .cur-opt:focus-visible { outline: 2px solid var(--clr-accent-txt); outline-offset: 2px; }
.cur-dd-val { display: none; align-items: center; gap: 6px; }
.cur-dd-val img, .cur-dd .cur-opt img { display: block; width: 18px; height: 12px; border-radius: 2px; flex: none; }
html[data-currency="INR"] .cur-dd-val[data-for="INR"],
html[data-currency="USD"] .cur-dd-val[data-for="USD"],
html:not([data-currency="INR"]):not([data-currency="USD"]) .cur-dd-val[data-for="none"] { display: inline-flex; }
.cur-dd-caret { flex: none; color: var(--txt-muted); transition: transform var(--ease); }
.cur-dd-btn[aria-expanded="true"] .cur-dd-caret { transform: rotate(180deg); }
.cur-dd-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100; min-width: 100%; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); box-shadow: var(--shadow-md); }
.cur-dd-list[hidden] { display: none; }
.cur-dd-list .cur-opt { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--txt-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; }
.cur-dd-list .cur-opt:hover, .cur-dd-list .cur-opt:focus { background: var(--bg-surface-2); color: var(--txt-primary); }
.cur-dd-list .cur-opt[aria-selected="true"] { background: var(--clr-accent-lt); color: var(--clr-accent-txt); box-shadow: inset 0 0 0 1px var(--clr-mint); }
.cur-switch--menu .cur-opt { flex: 1; justify-content: center; height: 44px; font-size: var(--fs-sm); }
@media (max-width: 599px) { .cur-switch--bar, .cur-switch.cur-dd { display: none; } }
@media (min-width: 600px) { .nav-mobile-currency { display: none; } }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-title  { font-size: var(--fs-5xl); }
  .section-title { font-size: var(--fs-3xl); }
  .hero-grid   { gap: var(--sp-10); }
  .steps-grid  { grid-template-columns: repeat(3, 1fr); }
  .steps-grid::before { display: none; }
  .about-principles-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  .nav-links, .nav-actions .btn { display: none; }
  .nav-hamburger { display: flex; }

  .hero { padding-top: calc(var(--nav-h) + var(--announce-h, 0px) + var(--sp-12)); padding-bottom: var(--sp-16); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero-title { font-size: var(--fs-4xl); }
  .hero-subtitle { font-size: var(--fs-base); }
  /* Headline and buttons first; the roadmap preview card follows below them on phones. */
  .hero-float-badge { display: none; }

  .section { padding-block: var(--sp-16); }
  .section-title { font-size: var(--fs-2xl); }

  .grid-2, .grid-3, .grid-4, .audience-grid { grid-template-columns: 1fr; }

  .steps-grid { grid-template-columns: 1fr; }

  .stats-row { gap: var(--sp-8); }


  .cta-band { padding: var(--sp-12) var(--sp-6); border-radius: var(--r-lg); }
  .cta-band h2 { font-size: var(--fs-2xl); }

  .engine-flow { flex-direction: column; gap: var(--sp-2); }
  .engine-arrow { transform: rotate(90deg); }

  .container { padding-inline: var(--sp-4); }

  .hiw-step { flex-direction: column; gap: var(--sp-4); }

  .excerpt-card { padding: var(--sp-6); }
  .excerpt-row { grid-template-columns: 1fr; gap: var(--sp-1); text-align: left; }
  .excerpt-row-head { display: none; }
  .excerpt-row span:first-child { font-weight: 700; color: var(--txt-primary); }
  .audience-card { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero-title  { font-size: var(--fs-3xl); }
  .hero-price .price-main { font-size: var(--fs-3xl); }
  .hero-actions { flex-direction: column; }
  .btn-lg { width: 100%; justify-content: center; }
  .audience-tabs { flex-wrap: wrap; }
}

/* ── Page-specific ──────────────────────────────────────── */
/* Redesigned per explicit feedback: the hero didn't read as highlighted
   or distinct from surrounding page content. Now rendered inside a
   bordered, corner-bracketed card (see includes/page-hero.php) with the
   eyebrow as a solid tag clipped onto the card's top edge, so it reads
   as its own highlighted component rather than plain text on the page
   background. Shared by every page except the homepage. */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--announce-h, 0px) + var(--sp-10));
  padding-bottom: var(--sp-5);
  text-align: left;
  background: var(--bg-page);
}
/* Only the section immediately following the hero gets a reduced top
   gap (hero pb 20px + this 20px = 40px total, half of the previous
   80px, matching the nav-to-card gap on the no-hero roadmap page) --
   other stacked .section instances further down a page are unaffected. */
.page-hero + .section {
  padding-top: var(--sp-5);
}

.page-hero-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  padding-top: 22px;
  padding-right: var(--sp-10);
  padding-bottom: 22px;
  padding-left: 38px;
}

.page-hero-card::before,
.page-hero-card::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-mint);
  opacity: 0.55;
  pointer-events: none;
}
.page-hero-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: calc(var(--r-lg) + 1px) 0 0 0; }
.page-hero-card::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 calc(var(--r-lg) + 1px) 0; }

.page-hero-tag {
  position: absolute;
  top: -14px;
  left: 38px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--clr-navy);
  color: var(--clr-white);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.page-hero-tag-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: url('../img/logos/roadmapmint-icon-light.svg');
  mask-image: url('../img/logos/roadmapmint-icon-light.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
[data-theme="dark"] .page-hero-tag { background: var(--clr-mint); color: var(--clr-navy); }

/* Right-side decoration only: faint dot-grid fading in from the right
   edge plus a low-opacity RoadmapMint icon watermark. Own clipping
   layer (inset + matching radius + overflow:hidden) so it never cuts
   off .page-hero-tag, which pokes above the card's top edge. Purely
   decorative — left-side content/layout is unchanged. */
.page-hero-deco {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.page-hero-deco::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 260px;
  background-image: radial-gradient(var(--clr-mint) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent 85%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent 85%);
  opacity: 0.5;
}
.page-hero-deco::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 74px;
  background-color: var(--clr-mint);
  -webkit-mask-image: url('../img/logos/roadmapmint-icon-light.svg');
  mask-image: url('../img/logos/roadmapmint-icon-light.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.14;
}
.page-hero-card > .page-hero-title,
.page-hero-card > .page-hero-sub { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .page-hero-deco { display: none; }
}

.page-hero-title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
  max-width: 720px;
}
.page-hero-sub {
  font-size: clamp(0.875rem, 1vw, 0.95rem);
  line-height: 1.55;
  color: var(--txt-secondary);
  max-width: 700px;
}
.page-hero-card .page-hero-title { margin-top: 8px; }
.page-hero-card .page-hero-sub { margin-bottom: 0; }

/* ── About Page (editorial/corporate treatment, page-scoped) ─────
   Deliberately does NOT reuse .section-label / .section-header.center /
   .card — those are the site's generic centered-eyebrow-and-card
   language, and this page is meant to read as a distinct, more editorial
   treatment. Left-aligned intro copy, a border-only principles list
   instead of boxed cards, a formal typographic flow instead of pill
   chips — but the same color tokens, type family, and buttons as
   everywhere else on the site. Outer section padding intentionally
   matches .page-hero/.section exactly (uniform padding is a standing
   site-wide rule); only the content treatment within it differs. */

.about-hero {
  padding-top: calc(var(--nav-h) + var(--announce-h, 0px) + var(--sp-10));
  padding-bottom: var(--sp-8);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}

.about-hero-inner { max-width: 100%; }

.about-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-3);
}

.about-hero-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
}

.about-hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--txt-secondary);
  margin-bottom: var(--sp-8);
}

.about-hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.about-intro { max-width: 100%; margin-bottom: var(--sp-10); }
.about-intro-center { max-width: 100%; margin-inline: auto; text-align: center; }

.about-heading {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}

.about-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--txt-secondary);
  margin-bottom: var(--sp-4);
}
.about-body p:last-child { margin-bottom: 0; }

.about-body-sm { font-size: var(--fs-base); line-height: 1.7; color: var(--txt-secondary); }

.principles-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-12);
}

.principle-item {
  padding: var(--sp-8) var(--sp-5);
  margin-inline: calc(-1 * var(--sp-5));
  border-top: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background var(--ease), border-left-color var(--ease);
}
.principle-item:hover {
  background: var(--bg-surface-2);
  border-left-color: var(--clr-mint);
}

.principle-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--clr-accent-lt);
  color: var(--clr-accent-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.principle-item:hover .principle-icon {
  background: var(--clr-mint);
  color: var(--clr-navy);
  transform: scale(1.06);
}

.principle-item h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}
.principle-item p  { font-size: var(--fs-base); line-height: 1.7; color: var(--txt-secondary); }

.method-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: var(--sp-4);
  column-gap: var(--sp-3);
  max-width: 920px;
  margin-inline: auto;
}

.method-flow span:not(.method-arrow) {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-navy);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--clr-mint);
}

[data-theme="dark"] .method-flow span:not(.method-arrow) { color: var(--txt-primary); }

.method-arrow { color: var(--txt-muted); font-size: var(--fs-base); flex-shrink: 0; }

@media (max-width: 768px) {
  .principles-list { grid-template-columns: 1fr; column-gap: 0; }
  .principle-item { padding: var(--sp-6) 0; }
  .method-flow { justify-content: flex-start; }
}

/* About page v2 additions: numbered principle grid (replaces the old
   icon-based .principles-list for this page's "What We Believe"
   section — brief asked for minimal, no icons) and a calm transparency
   note (small, not a warning box). .principles-list/.principle-item/
   .method-flow above are no longer used by about.php but left in place
   as harmless unused CSS rather than risk breaking something removing
   them; The Framework section now reuses the homepage's .steps-grid
   directly instead. */
.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-8);
}
.about-principle-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: #678290;   /* large bold text needs 3:1 (was muted at 40% = 1.7:1) */
  margin-bottom: var(--sp-3);
  line-height: 1;
}
[data-theme="dark"] .about-principle-num { color: #5E7A89; }
.about-principle h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.3; margin-bottom: var(--sp-2); }
.about-principle p { font-size: var(--fs-sm); color: var(--txt-secondary); line-height: 1.6; }

.about-trust-note {
  max-width: 960px;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--clr-mint);
  background: var(--bg-surface-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
}

/* ── Resources Page: evergreen guide block ──────────────────
   Editorial treatment matching the About page's intro blocks
   (.about-label / .about-heading / .about-body), scaled down to
   a repeatable per-guide unit since several sit on one page. */
.resource-guide { max-width: 100%; }
.resource-guide-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-3);
}
.resource-guide h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}
.resource-guide-intro {
  font-size: var(--fs-base);
  color: var(--txt-secondary);
  line-height: 1.75;
  margin-bottom: var(--sp-5);
}
.resource-guide-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.resource-guide-points li {
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
  line-height: 1.7;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--border);
}
.resource-guide-points li strong { color: var(--txt-primary); font-weight: 700; }

@media (max-width: 768px) {
  .about-principles-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 480px) {
  .about-principles-grid { grid-template-columns: 1fr; }
}

/* Scroll-reveal utility (applied via JS) */
/* Content is visible by default. It is only held back (and faded in) while the page's own script has confirmed it can reveal it:
   the header sets html.rm-reveal only when IntersectionObserver exists and removes it again if main.js never starts. */
.rm-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rm-reveal .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rm-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Legal / Policy Pages ───────────────────────────────── */
/* Matches the width of an ordinary .section-desc paragraph elsewhere on
   the site (e.g. how-it-works.php), which never gets its own narrower
   cap and simply fills the .container it sits in. legal.php markup puts
   both "container" and "legal-content" on the same element, so this
   rule's max-width overrides .container's (same specificity, later in
   the cascade) rather than stacking with it -- it must therefore repeat
   .container's own 1180px value here, not "100%", or it loses the cap
   entirely and stretches past the container to the full viewport. */
.legal-content { max-width: 1180px; margin-inline: auto; }
.legal-content h2 {
  font-size: var(--fs-2xl);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.legal-content p {
  color: var(--txt-secondary);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
}
.legal-content ul { margin: 0 0 var(--sp-4) var(--sp-5); list-style: disc; }
.legal-content li { color: var(--txt-secondary); line-height: 1.7; margin-bottom: var(--sp-2); }
.legal-content a { color: var(--clr-mint); font-weight: 600; }

/* ── Sample Report page: static cover-page mockup, not a real PDF ────
   Placeholder for Phase 3's actual embedded PDF viewer. */
.report-preview { text-align: center; }
.report-preview-page {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  margin-inline: auto;
  overflow: hidden;
}
.report-preview-topbar {
  height: 10px;
  background: linear-gradient(90deg, var(--clr-mint), var(--clr-navy));
}
.report-preview-body { padding: var(--sp-10) var(--sp-8); text-align: left; }
.report-preview-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-mint);
  margin-bottom: var(--sp-3);
}
.report-preview-title { font-size: var(--fs-3xl); font-weight: 800; margin-bottom: var(--sp-2); }
.report-preview-sub { font-size: var(--fs-base); color: var(--txt-muted); margin-bottom: var(--sp-8); }
.report-preview-lines { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.report-preview-lines span { display: block; height: 8px; border-radius: 4px; background: var(--bg-surface-2); width: 100%; }
.report-preview-sections { display: flex; flex-direction: column; gap: var(--sp-2); }
.report-preview-sections span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-secondary);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface-2);
  border-radius: var(--r-sm);
}
.report-preview-caption { font-size: var(--fs-sm); color: var(--txt-muted); font-style: italic; margin-top: var(--sp-6); }

/* ── Sample Report: multi-page preview (Sample Report page only) ──── */
.report-preview-page { max-width: 640px; text-align: left; }
.report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-6);
}
.report-tab {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--txt-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: all var(--ease);
}
.report-tab:hover { border-color: var(--clr-mint); color: var(--txt-primary); }
.report-tab.active { background: var(--clr-navy); border-color: var(--clr-navy); color: #fff; }

.report-page-content { display: none; }
.report-page-content.active { display: block; }
.report-page-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-mint);
  margin-bottom: var(--sp-2);
}
.report-page-heading { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: var(--sp-5); }
.report-page-subsection {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-muted);
  margin: var(--sp-6) 0 var(--sp-3);
}
.report-page-subsection:first-of-type { margin-top: 0; }

.report-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.report-table th, .report-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.report-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--txt-muted); font-weight: 700; }
.report-table td { color: var(--txt-secondary); }

.status-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-full); }
.status-badge.met { background: rgba(52,211,153,0.14); color: var(--clr-accent-txt); }
.status-badge.partial { background: rgba(234,179,8,0.14); color: #a16207; }
.status-badge.missing { background: rgba(239,68,68,0.12); color: #b91c1c; }
:root[data-theme="dark"] .status-badge.partial { color: #facc15; }
:root[data-theme="dark"] .status-badge.missing { color: #f87171; }

.report-callout {
  border-left: 3px solid var(--clr-mint);
  background: var(--bg-surface-2);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
  margin-top: var(--sp-4);
}

.report-timeline { display: flex; flex-direction: column; gap: 0; }
.report-timeline-item { display: flex; gap: var(--sp-4); position: relative; padding-bottom: var(--sp-6); }
.report-timeline-item:last-child { padding-bottom: 0; }
.report-timeline-marker { position: relative; flex-shrink: 0; width: 12px; }
.report-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--clr-mint); margin-top: 3px; }
.report-timeline-item:not(:last-child) .report-timeline-marker::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 5px;
  width: 2px;
  bottom: -24px;
  background: var(--border);
}
.report-timeline-stage { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--txt-muted); margin-bottom: 2px; }
.report-timeline-title { font-weight: 700; color: var(--txt-primary); margin-bottom: 2px; }
.report-timeline-desc { font-size: var(--fs-sm); color: var(--txt-secondary); }

.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.report-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--txt-secondary); }
.report-list .li-check { margin-top: 4px; }

.report-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--txt-muted);
}

/* ── Get My Roadmap page: Start/Done card + entry layout ───────────── */
/* .assessment-intro-card remains for the Start screen and the Done/debug
   screen only -- a landing CTA and a data dump respectively, not part
   of the "one question, one decision" assessment flow redesigned below. */
.assessment-intro-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8);
}
.assessment-progress { margin-bottom: var(--sp-6); }
.assessment-progress-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-2);
}
.assessment-progress-bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  overflow: hidden;
}
.assessment-progress-fill { height: 100%; background: var(--clr-mint); transition: width var(--ease); }
.assessment-q { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-5); }
.assessment-note { font-size: var(--fs-sm); color: var(--txt-muted); text-align: center; margin-top: var(--sp-4); }

/* Get My Roadmap: entry layout — Getting Started (left) is deliberately
   wider/dominant; Already Purchased (right) is narrower and visually
   secondary. Both columns are TOP-ALIGNED (align-items: start), not
   stretched to match height. */
.roadmap-entry-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.roadmap-entry-primary,
.roadmap-entry-secondary {
  display: flex;
  flex-direction: column;
}
.roadmap-entry-card {
  display: flex;
  flex-direction: column;
}
/* Deliberately borderless/unboxed — no card treatment at all — so the
   order-status panel reads as clearly secondary information next to the
   primary card, not a second competing product. */
.roadmap-entry-quiet {
  padding-top: var(--sp-2);
}
.roadmap-entry-quiet .quiet-reassurance {
  font-size: 12px;
  color: var(--txt-muted);
  margin-top: var(--sp-3);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .roadmap-entry-grid { grid-template-columns: 1fr; }
}

/* ── Assessment v2: premium interactive-questionnaire visual language ──
   Redesign per explicit feedback: the question itself should be the
   dominant element on screen (larger than any surrounding chrome), each
   answer a large clickable tile with a visible selection indicator (not
   a plain bordered box of text), and the outer container should feel
   like an open canvas rather than a bordered "document" card. Progress
   is reported honestly ("Question N", never "N of X") since the
   assessment is adaptive and the eventual total isn't knowable upfront.
   This applies to the single-question flow and the opening 3-question
   bundle screen -- .assessment-intro-card above stays for the Start and
   Done screens specifically, which are a different kind of screen. */
.assessment-canvas {
  padding: var(--sp-4) 0 var(--sp-2);
}

.assessment-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-6);
}

.assessment-progress-mini {
  margin-bottom: var(--sp-8);
}
.assessment-progress-count {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--txt-muted);
  margin-bottom: var(--sp-2);
}
.assessment-progress-track {
  height: 3px;
  background: var(--bg-surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.assessment-progress-track-fill {
  height: 100%;
  background: var(--clr-mint);
  transition: width 0.3s ease;
}

/* The question itself: the single largest, most visually dominant piece
   of text on this screen -- bigger than the eyebrow, bigger than the
   helper line, bigger than any answer tile's label. */
.assessment-question-hero {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  max-width: 640px;
}

.assessment-helper {
  font-size: var(--fs-base);
  color: var(--txt-muted);
  margin-bottom: var(--sp-8);
  max-width: 560px;
}

.assessment-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  max-width: 560px;
}

/* Choice tile: the entire block is the click target (not a small radio
   circle inside a box of plain text) -- large touch/click area, clear
   hover lift, and an explicit selection indicator (empty ring -> filled
   mint circle with a check) rather than only a background-color change,
   so "selected" reads unambiguously even before the mint tint registers. */
.assessment-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--txt-primary);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}
.assessment-tile:hover {
  border-color: var(--clr-mint);
  transform: translateY(-1px);
}
.assessment-tile-selected {
  border-color: var(--clr-mint);
  background: var(--clr-accent-lt);
}
.assessment-tile-indicator {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: transparent;
  transition: all var(--ease);
}
.assessment-tile-selected .assessment-tile-indicator {
  background: var(--clr-mint);
  border-color: var(--clr-mint);
  color: var(--clr-navy);
}

.assessment-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 560px;
}
.assessment-nav-back {
  background: none;
  border: none;
  color: var(--txt-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0.6rem 0;
  transition: color var(--ease);
}
.assessment-nav-back:hover { color: var(--txt-primary); }

.assessment-secondary-links {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-6);
  max-width: 560px;
}
.assessment-secondary-links button {
  background: none;
  border: none;
  color: var(--txt-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .assessment-tiles, .assessment-nav, .assessment-progress-mini, .assessment-secondary-links {
    max-width: 100%;
  }
}
/* ── Pricing page v2 — price split, tinted info panels, does/don'ts ── */
.price-split {
  display: flex;
  align-items: stretch;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.price-split-col {
  width: 50%;
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.price-split-col:first-child { width: 40%; border-right: 1px solid var(--border); }
.price-split-col:last-child { width: 60%; }

.price-split-includes {
  columns: 2;
  column-gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-split-includes li {
  font-size: 13px;
  color: var(--txt-secondary);
  line-height: 1.6;
  padding: var(--sp-1) 0;
}

.price-secure-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--txt-muted);
  margin-top: auto;
  padding-top: var(--sp-5);
}

/* Tinted info panel — for facts/notes that need visual separation from
   surrounding prose, without adding another bordered/shadowed card. */
.info-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.info-box p {
  color: var(--txt-secondary);
  font-size: 13px;
  line-height: 1.75;
  margin-bottom: var(--sp-3);
}
.info-box p:last-child { margin-bottom: 0; }

/* Does / doesn't */
.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.dd-col {
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.dd-yes {
  border-color: rgba(52,211,153,0.35);
  box-shadow: var(--shadow-sm);
}
.dd-no { opacity: 0.88; }
.dd-col h3, .dd-col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
  color: var(--txt-primary);
}
.dd-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.dd-col li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--txt-secondary);
  line-height: 1.6;
}
.dd-col li span { flex-shrink: 0; font-weight: 700; }
.dd-yes li span { color: var(--clr-accent-txt); }
.dd-no li span { color: var(--txt-muted); }

/* Straightforward pricing */
.straightforward-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.straightforward-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.straightforward-item h3, .straightforward-item h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}
.straightforward-item p {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  line-height: 1.5;
}

/* Need-help support-boundary note */
.help-note {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.help-note svg { flex-shrink: 0; margin-top: 2px; color: var(--txt-muted); }
.help-note h3, .help-note h4 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.help-note p { font-size: var(--fs-sm); color: var(--txt-secondary); line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
  .price-split { flex-direction: column; }
  .price-split-col,
  .price-split-col:first-child,
  .price-split-col:last-child { width: 100%; }
  .price-split-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .dd-grid, .straightforward-grid { grid-template-columns: 1fr; }
}

/* Deliverable-list check bullets (price-split includes) */
.price-split-includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.li-check {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--clr-accent-lt);
  color: var(--clr-accent-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Compact reassurance strip below the CTA in the price section */
.price-reassurance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: var(--sp-6);
  row-gap: var(--sp-3);
}
.price-reassurance span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--txt-muted);
  line-height: 1;
}
.price-reassurance .pr-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--clr-accent-txt);
}

/* Left price column: spacing is controlled by explicit margins on each
   child (tight after the label, roomier before the CTA), not the
   shared .price-split-col flex gap. */
.price-col-left { gap: 0; }

/* ══ Canonical price-display component (RoadmapMint product price) ══
   Reused everywhere the product price is shown. INR is always primary
   (largest, boldest, --txt-primary); USD is always secondary (smaller,
   --txt-muted), directly beneath with consistent spacing. Both values
   come from the configured product price -- never calculated here.
   Use .rm-price--lg for a larger context (e.g. the pricing page); the
   hierarchy and relative proportions stay identical everywhere. */
.rm-price {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rm-price-inr {
  font-weight: 800;
  line-height: 1;
  color: var(--txt-primary);
  font-size: var(--fs-5xl);
}
.rm-price-usd {
  font-weight: 600;
  line-height: 1;
  color: var(--txt-secondary);
  font-size: var(--fs-sm);
  margin-top: var(--sp-3);
}
.rm-price--lg .rm-price-inr {
  font-size: 4.25rem;
}
.rm-price--lg .rm-price-usd {
  font-size: var(--fs-base);
  margin-top: var(--sp-4);
}

/* ══ Offer banner card (homepage + pricing, shown when offer active) ══
   Reuses .cta-band for the dark navy card + decorative circles; these
   rules only add the internal 3-column layout on top of it. Kept
   deliberately compact -- a single slim strip, not a tall feature card. */
.rm-offer-banner {
  text-align: left;
}
.rm-offer-banner-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.rm-offer-banner-info { flex: 1 1 220px; }
.rm-offer-chip {
  display: inline-block;
  background: rgba(52,211,153,0.16);
  color: var(--clr-mint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.rm-offer-banner-title { color: #fff; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 2px; line-height: 1.3; }
.rm-offer-banner-sub { color: rgba(255,255,255,0.55); font-size: var(--fs-xs); }

.rm-offer-banner-price { flex: 0 0 auto; text-align: center; }
.rm-offer-price-was {
  display: block;
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  font-size: var(--fs-xs);
  margin-bottom: 2px;
}
.rm-offer-price-now-row { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2); }
.rm-offer-banner .rm-price-inr { color: #fff; font-size: var(--fs-3xl); }
.rm-offer-banner .rm-price-usd { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 1px; }
.rm-offer-pct {
  display: inline-block;
  background: var(--clr-mint);
  color: var(--clr-navy);
  font-size: 11px;
  font-weight: 800;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.rm-offer-expiry { margin-top: var(--sp-1); color: rgba(255,255,255,0.5); font-size: 12px; }

.rm-offer-banner-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.rm-offer-checklist { list-style: none; display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--sp-3); }
.rm-offer-checklist li { color: rgba(255,255,255,0.6); font-size: 12px; white-space: nowrap; }
.rm-offer-checklist li::before { content: '✓ '; color: var(--clr-mint); font-weight: 700; }

@media (max-width: 768px) {
  .rm-offer-banner-row { flex-direction: column; align-items: stretch; text-align: center; gap: var(--sp-4); }
  .rm-offer-banner-info { text-align: center; }
  .rm-offer-price-now-row { justify-content: center; }
  .rm-offer-banner-cta { align-items: center; }
  .rm-offer-checklist { flex-wrap: wrap; justify-content: center; }
}

/* ── Very narrow phones (320–380px): keep the logo, theme toggle and menu button all on-screen ── */
@media (max-width: 380px) {
  .nav-inner { padding-inline: var(--sp-3); }
  .nav-logo { min-width: 0; flex-shrink: 1; }
  .nav-logo img { height: 26px; max-width: 100%; }
}

/* ── Hero: rotating question, price line, audience row ─────────────── */
.hero-actions-tight { margin-bottom: var(--sp-4); }

/* Two-column hero: the roadmap card takes the full height of the left column and spreads its
   steps evenly, so the two sides end at the same line whatever the left text needs.
   Only on wide screens: on a narrow two-column layout the left text gets very tall and the steps would spread too far apart. */
@media (min-width: 1025px) {
  .hero-grid { align-items: stretch; }
  .hero-visual { display: flex; }
  .roadmap-preview { display: flex; flex-direction: column; width: 100%; }
  .roadmap-preview .rp-timeline { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
}

.hero-ask {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--sp-6);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  border-radius: var(--r-full);
  background: var(--clr-accent-lt);
  color: var(--txt-primary);
}
.hero-ask-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--clr-accent-txt);
}
.hero-ask-text {
  display: grid;                 /* every question sits in the same cell: the tallest one sets the height */
  margin: 0;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.hero-ask-q {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.hero-ask-q.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease, transform .45s ease, visibility 0s;
}
.hero-ask-nav { display: flex; gap: var(--sp-1); flex: 0 0 auto; margin-left: var(--sp-2); }
.hero-ask-nav[hidden] { display: none; }
.hero-ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--txt-primary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hero-ask-btn:hover { background: var(--clr-mint); color: var(--clr-navy); }
.hero-ask-btn:focus-visible { outline: 2px solid var(--clr-accent-txt); outline-offset: 2px; }
@media (max-width: 560px) {
  /* The longest question can wrap to two lines on a phone: reserve both so the hero never jumps. */
  .hero-ask-text { min-height: 2.7em; align-content: center; }
  .hero-ask { border-radius: var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
  /* Questions still change by themselves, but with no fade or slide. */
  .hero-ask-q, .hero-ask-q.is-active { transition: none; transform: none; }
}

.hero-price-line span { white-space: nowrap; }
.hero-price-was { color: var(--txt-muted); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }
.hero-price-now { color: var(--txt-primary); font-weight: 700; }
.hero-price-line {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-secondary);
}
.hero-audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--txt-muted);
}
.hero-audience li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-left: 1px solid var(--border);
}
.hero-audience li:first-child { padding-left: 0; border-left: 0; }
.hero-audience svg { flex: 0 0 auto; color: var(--txt-secondary); }
@media (max-width: 480px) {
  /* The row can wrap on a phone: no dividers (a divider would dangle at the start of a new line). */
  .hero-audience { gap: var(--sp-2) var(--sp-5); }
  .hero-audience li { padding: 0; border-left: 0; }
}
.hero-price-line .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Longer deliverable-list items: one column on phones */
@media (max-width: 640px) {
  .price-split-includes { columns: 1; }
}

/* Career guide link lists (Resources + home) */
.guide-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-8); margin-top: var(--sp-6); }
.guide-group h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.guide-group ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.guide-group a { color: var(--txt-secondary); text-decoration: none; }
.guide-group a:hover { color: var(--clr-mint); text-decoration: underline; }
.guide-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }


/* ── How it works: "Behind your roadmap" (build-and-check stages + comparison) ── */
.hiw-flow {
  list-style: none;
  margin: 0 0 var(--sp-12, 3rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6, 1.5rem);
  counter-reset: none;
}
.hiw-flow .card { padding: var(--sp-6, 1.5rem); }
.hiw-flow .card h3 { font-size: var(--fs-lg); }
.hiw-flow .card p { font-size: var(--fs-sm); line-height: 1.65; margin: 0; }
.hiw-flow-num {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--clr-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
[data-theme="dark"] .hiw-flow-num { background: var(--clr-mint); color: var(--clr-navy); }

.hiw-compare-head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-6, 1.5rem); }
.hiw-compare-head h3 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.hiw-compare-head p { color: var(--txt-secondary); line-height: 1.7; margin: 0; }

.hiw-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6, 1.5rem);
  max-width: 960px;
  margin: 0 auto;
}
.hiw-compare-col {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6, 1.5rem) var(--sp-8, 2rem);
}
.hiw-compare-us { border-color: var(--clr-mint); box-shadow: var(--shadow-md); }
.hiw-compare-col h4 { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); color: var(--txt-primary); }
.hiw-compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hiw-compare-col li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--txt-secondary);
}
.hiw-compare-col li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 800;
  line-height: 1.6;
}
.hiw-compare-plain li::before { content: "\2013"; color: var(--txt-muted); }
.hiw-compare-us li::before { content: "\2713"; color: var(--clr-accent-txt); }
.hiw-compare-note {
  max-width: 720px;
  margin: var(--sp-6, 1.5rem) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .hiw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hiw-flow, .hiw-compare { grid-template-columns: 1fr; }
  .hiw-compare-col { padding: var(--sp-5, 1.25rem); }
}

/* ── Homepage: Choose where to start ───────────────────── */
.cs-head { margin-bottom: var(--sp-6); }
.cs-head .section-title { margin-bottom: var(--sp-3); }
.cs-head .section-desc { font-size: var(--fs-base); margin: 0; }
.cs-list { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 6px 22px -14px rgba(23,43,58,0.3); overflow: hidden; }
.cs-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ico txt price" "ico txt act"; align-items: center; column-gap: var(--sp-5); row-gap: 2px; padding: var(--sp-5) var(--sp-6); margin: 0; }
.cs-row + .cs-row { border-top: 1px solid var(--border); }
.cs-ico { grid-area: ico; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--clr-accent-lt); color: var(--clr-accent-txt); }
.cs-row:nth-child(2) .cs-ico { background: #E0F0FF; color: #1D4ED8; }
.cs-row:nth-child(3) .cs-ico { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .cs-row:nth-child(2) .cs-ico { background: rgba(56,189,248,0.18); color: #7DD3FC; }
[data-theme="dark"] .cs-row:nth-child(3) .cs-ico { background: rgba(251,191,36,0.18); color: #FCD34D; }
.cs-txt { grid-area: txt; min-width: 0; }
.cs-txt h3 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.cs-txt p { font-size: var(--fs-base); color: var(--txt-secondary); line-height: 1.55; margin: 0; max-width: 80ch; }
.cs-price { grid-area: price; justify-self: end; margin: 0; text-align: right; font-weight: 700; font-size: var(--fs-xl); color: var(--txt-primary); line-height: 1.25; }
.cs-was { font-size: var(--fs-base); font-weight: 500; color: var(--txt-muted); margin-right: 4px; }
.cs-offer { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--clr-accent-txt); }
.cs-act { grid-area: act; justify-self: end; text-align: right; padding: 2px 0; font-size: var(--fs-base); font-weight: 600; color: var(--clr-accent-txt); text-decoration: underline; text-underline-offset: 2px; }
.cs-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); }
.cs-foot p { margin: 0; font-size: var(--fs-sm); color: var(--txt-secondary); }
.cs-foot a { font-size: var(--fs-base); font-weight: 600; color: var(--clr-accent-txt); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .cs-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ico txt" ". price" ". act"; row-gap: var(--sp-2); padding: var(--sp-4); }
  .cs-ico { align-self: start; }
  .cs-txt h3 { font-size: var(--fs-base); }
  .cs-txt p { font-size: var(--fs-sm); }
  .cs-price { justify-self: start; text-align: left; font-size: var(--fs-lg); }
  .cs-act { justify-self: start; text-align: left; font-size: var(--fs-sm); }
  .cs-foot { flex-direction: column; align-items: flex-start; }
}
#choose-start { scroll-margin-top: calc(var(--nav-h) + var(--announce-h, 0px) + 24px); }
.cs-paused { margin: 0; font-weight: 600; color: var(--txt-secondary); text-decoration: none; }

/* ── Homepage: What's included ─────────────────────────── */
.wg-head { margin-bottom: var(--sp-6); }
.wg-head .section-label { color: var(--clr-accent-txt); }
.wg-head .section-title { margin-bottom: var(--sp-3); }
.wg-head .section-desc { font-size: var(--fs-base); max-width: 62ch; margin: 0; }
.wg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.wg-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: 0 6px 22px -14px rgba(23,43,58,0.3); }
.wg-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.wg-top h3 { font-size: var(--fs-xl); line-height: 1.25; margin: 0; }
.wg-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--clr-accent-lt); color: var(--clr-accent-txt); }
.wg-sub { margin: 0 0 var(--sp-3); font-size: var(--fs-base); color: var(--txt-secondary); }
.wg-list { list-style: none; margin: 0; padding: 0; }
.wg-list li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); font-size: var(--fs-base); line-height: 1.5; color: var(--txt-primary); }
.wg-ck { flex: none; margin-top: 4px; color: var(--clr-accent-txt); }
.wg-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); }
.wg-foot p { margin: 0; font-size: var(--fs-sm); color: var(--txt-secondary); }
.wg-foot a { font-size: var(--fs-base); font-weight: 600; color: var(--clr-accent-txt); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .wg-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .wg-card { padding: var(--sp-5) var(--sp-4); }
  .wg-top h3 { font-size: var(--fs-lg); }
  .wg-list li, .wg-sub { font-size: var(--fs-sm); }
  .wg-foot { flex-direction: column; align-items: flex-start; }
}
#what-you-get, #whatyouget-heading { scroll-margin-top: calc(var(--nav-h) + var(--announce-h, 0px) + 24px); }

/* ── Homepage: What your roadmap answers ───────────────── */
#model-heading { scroll-margin-top: calc(var(--nav-h) + var(--announce-h, 0px) + 24px); }
.mq-head { margin-bottom: var(--sp-6); }
.mq-head .section-label { color: var(--clr-accent-txt); }
.mq-head .section-title { margin-bottom: var(--sp-3); }
.mq-head .section-desc { font-size: var(--fs-base); max-width: 62ch; margin: 0; }
.mq-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-6); box-shadow: 0 6px 22px -14px rgba(23,43,58,0.3); }
.mq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; column-gap: var(--sp-8); padding: var(--sp-4) 0; }
.mq-row + .mq-row { border-top: 1px solid var(--border); }
.mq-q { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.mq-q h3 { font-size: var(--fs-lg); line-height: 1.3; margin: 0; }
.mq-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--clr-accent-lt); color: var(--clr-accent-txt); }
.mq-a { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--txt-secondary); }
.mq-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--txt-secondary); }
@media (max-width: 760px) {
  .mq-panel { padding: var(--sp-1, 4px) var(--sp-4); }
  .mq-row { grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .mq-q h3 { font-size: var(--fs-base); }
  .mq-a { padding-left: calc(40px + var(--sp-4)); font-size: var(--fs-sm); }
}

/* ── Homepage: Why roadmaps differ ─────────────────────── */
#personalization-heading { scroll-margin-top: calc(var(--nav-h) + var(--announce-h, 0px) + 24px); }
#sample-heading { scroll-margin-top: calc(var(--nav-h) + var(--announce-h, 0px) + 24px); }
.pf-head { margin-bottom: var(--sp-5); }
.pf-head .section-label { color: var(--clr-accent-txt); }
.pf-head .section-title { margin-bottom: var(--sp-3); }
.pf-head .section-desc { font-size: var(--fs-base); max-width: 92ch; margin: 0; }
.pf-goal { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-size: var(--fs-base); color: var(--txt-secondary); }
.pf-goal strong { color: var(--txt-primary); }
.pf-goal-ico { flex: none; display: inline-flex; color: var(--clr-accent-txt); }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
.pf-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: 0 6px 22px -14px rgba(23,43,58,0.3); }
.pf-top { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.pf-top h3 { font-size: var(--fs-xl); line-height: 1.25; margin: 0; }
.pf-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--clr-accent-lt); color: var(--clr-accent-txt); }
.pf-desc { margin: 0 0 var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-base); color: var(--txt-secondary); }
.pf-qh { margin: 0 0 var(--sp-3); font-size: var(--fs-base); font-weight: 700; color: var(--clr-accent-txt); }
.pf-list { margin: 0; padding: 0 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.pf-list li { font-size: var(--fs-base); line-height: 1.5; color: var(--txt-primary); padding-left: 2px; }
.pf-list li::marker { color: var(--clr-accent-txt); }
.pf-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--txt-secondary); }
@media (max-width: 760px) {
  .pf-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pf-card { padding: var(--sp-5) var(--sp-4); }
  .pf-top h3 { font-size: var(--fs-lg); }
  .pf-desc, .pf-list li { font-size: var(--fs-sm); }
}
@media (min-width: 1025px) { .pf-head .section-title { font-size: 2rem; } }
#audience-heading { scroll-margin-top: calc(var(--nav-h) + var(--announce-h, 0px) + 24px); }
.bg-surface-2 .guide-chips .chip { background: var(--bg-surface); }

/* ── Homepage: final action panel ──────────────────────── */
.fa-panel { background: var(--bg-surface-2); background: color-mix(in srgb, var(--clr-accent-lt) 28%, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--r-xl, 28px); padding: var(--sp-8) var(--sp-10); }
.fa-main { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6) var(--sp-10); }
.fa-copy { min-width: 0; max-width: 44ch; }
.fa-copy h2 { font-size: 2rem; line-height: 1.2; margin: 0 0 var(--sp-3); }
.fa-copy p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--txt-secondary); }
.fa-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.fa-link { font-size: var(--fs-base); font-weight: 600; color: var(--clr-accent-txt); text-decoration: underline; text-underline-offset: 3px; }
.fa-support { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--txt-secondary); }
.fa-support a { font-weight: 700; color: var(--clr-accent-txt); text-decoration: none; }
.fa-support a:hover { text-decoration: underline; }
@media (max-width: 1024px) { .fa-copy h2 { font-size: var(--fs-3xl); } }
@media (max-width: 760px) {
  .fa-panel { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); }
  .fa-main { flex-direction: column; align-items: flex-start; }
  .fa-copy { max-width: none; }
  .fa-copy h2 { font-size: var(--fs-2xl); }
  .fa-actions { align-items: flex-start; width: 100%; }
  .fa-actions .btn { width: 100%; justify-content: center; }
}
@media (min-width: 761px) {
  .fa-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(32px, 4vw, 48px); align-items: center; justify-content: stretch; }
  .fa-copy { max-width: none; }
  .fa-copy p { max-width: 52ch; }
  .fa-actions { justify-self: center; }
}


/* ── Homepage dark theme: card surfaces, supporting text, accents, edges ─────────────────────────────────────────────
   Scoped to the homepage (the page whose <main> starts with the home hero); no shared theme token is changed, light theme untouched. */
[data-theme="dark"] main:has(> .hero--home) {
  --hp-card: #213648;                       /* lighter navy than the page (#0C1A23), alternating sections (#1A2D3D) and the hero stage */
  --hp-card-in: #1A2D3D;                    /* nested panel inside a card */
  --hp-edge: rgba(255,255,255,0.16);        /* card edges */
  --hp-line: rgba(255,255,255,0.13);        /* row dividers */
  --hp-acc: #4EDDA9;                        /* dark-mode accent for text links, small labels and icons */
  --hp-sub: #BED3DC;                        /* reassurance / secondary supporting text */
  --hp-sub2: #A9C3CE;                       /* captions, audience line, "Powered by" */
}
/* 1 + 4. Card surfaces and edges */
[data-theme="dark"] main:has(> .hero--home) :is(.hx-pt, .cs-list, .mq-panel, .pf-card, .wg-card) {
  background: var(--hp-card);
  border-color: var(--hp-edge);
}
[data-theme="dark"] main:has(> .hero--home) :is(.cs-row + .cs-row, .mq-row + .mq-row) { border-top-color: var(--hp-line); }
[data-theme="dark"] main:has(> .hero--home) .wg-list li { border-top-color: var(--hp-line); }
[data-theme="dark"] main:has(> .hero--home) .pf-desc { border-bottom-color: var(--hp-line); }
/* 2. Hero supporting text */
[data-theme="dark"] main:has(> .hero--home) .hx-stage .hx-audience { color: var(--hp-sub2); }
[data-theme="dark"] main:has(> .hero--home) :is(.hx-reassure, .hx-trust) { color: var(--hp-sub); }
[data-theme="dark"] main:has(> .hero--home) :is(.hx-doc-cap, .hx-stage .hx-top + .hx-about .hx-powered, .hx-pg figcaption) { color: var(--hp-sub2); }
/* 3. Accents: text links, small labels, icons */
[data-theme="dark"] main:has(> .hero--home) :is(
  .hx-doc-cap a, .hx-pt > a, .hx-pt p a, .hx-contact a, .hx-more a, .hx-faq a,
  .cs-act, .cs-offer, .cs-foot a, .wg-foot a,
  .hx-stage .hero-eyebrow, .hx-doc-kicker, .hx-label,
  .wg-head .section-label, .mq-head .section-label, .pf-head .section-label, .pf-qh,
  .pf-goal-ico, .wg-ck, .pf-list li::marker, .hx-powered svg,
  .wg-ico, .mq-ico, .pf-ico, .cs-ico, .hx-pt-ico) { color: var(--hp-acc); }
/* the amber / blue icon tiles keep their own hues (set above), so restore them after the accent pass */
[data-theme="dark"] main:has(> .hero--home) .cs-row:nth-child(2) .cs-ico,
[data-theme="dark"] main:has(> .hero--home) .hx-pt:nth-child(3) .hx-pt-ico { color: #7DD3FC; }
[data-theme="dark"] main:has(> .hero--home) .cs-row:nth-child(3) .cs-ico,
[data-theme="dark"] main:has(> .hero--home) .hx-pt:nth-child(2) .hx-pt-ico { color: #FCD34D; }

/* ── Shared header/footer shell: same full-width outer alignment, side padding and logo size ── */
:root { --shell-pad: clamp(16px, 2vw, 32px); --logo-h: 30px; }
@media (max-width: 380px) { :root { --shell-pad: 12px; --logo-h: 26px; } }
.nav-inner, .footer-container { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--shell-pad); }
.nav-logo img, .footer-logo img { height: var(--logo-h); width: auto; }

/* Approved focused homepage first view. Shared page layouts keep their existing styles. */
.hero--focused .hx-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); row-gap: 24px; align-items: start; }
.hero--focused .hx-top--form_left { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
@media (min-width: 901px) {
  .hero--focused .hx-top--form_left .hx-intro { padding: clamp(20px, 2vw, 30px); }
}
.hero--focused .hx-top--form_below { grid-template-columns: minmax(0, 1fr); }
.hero--focused .hx-top--form_below .hx-intro { max-width: 760px; }
@media (min-width: 1200px) {
  .hero--form-below > .container { max-width: 1600px; }
}
.hero--focused .hx-about--inline { margin: clamp(26px, 3vw, 44px) 0 0; padding: 0; max-width: 560px; text-align: left; }
.hero--focused .hx-about--inline::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 58px; line-height: .8; height: 32px; color: var(--clr-mint); }
.hero--focused .hx-about--inline .hx-explainer { color: var(--txt-primary); font-size: var(--fs-base); font-weight: 500; line-height: 1.6; margin: 0; text-wrap: pretty; }
.hero--focused .hx-about--inline .hx-powered { display: flex; align-items: center; gap: 8px; color: var(--txt-muted); font-size: var(--fs-xs); margin: var(--sp-3) 0 0; }
.hero--focused .hx-about--mobile-only { display: none; }
.hx-form-column { width: 100%; min-width: 0; }
.hero--focused .hx-form-column .hx-quiet-trust { margin: 12px 0 0; text-align: center; }
.hx-top--form_right .hx-form-column { max-width: 500px; margin-left: auto; }
.hx-top--form_below .hx-form-column { grid-column: 1 / -1; }
.hx-assessment-form { min-width: 0; width: 100%; max-width: 500px; padding: clamp(20px, 2vw, 30px); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-md); text-align: left; }
.hx-top--form_right .hx-assessment-form { margin-left: auto; }
.hx-assessment-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 20px; }
.hx-assessment-top span { color: var(--clr-accent-txt); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.hx-assessment-top small { color: var(--txt-muted); font-size: var(--fs-xs); }
.hx-assessment-form h2 { font-size: var(--fs-xl); line-height: 1.25; margin: 0 0 8px; color: var(--txt-primary); }
.hx-assessment-intro { color: var(--txt-secondary); font-size: var(--fs-sm); line-height: 1.55; margin: 0 0 20px; }
.hx-assessment-fields { display: grid; gap: 16px; }
.hx-assessment-field label { display: block; color: var(--txt-primary); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 7px; }
.hx-assessment-field :is(input, select) { display: block; width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-page); color: var(--txt-primary); font: inherit; font-size: var(--fs-sm); color-scheme: light; }
[data-theme="dark"] .hx-assessment-field :is(input, select) { color-scheme: dark; }
.hx-assessment-field input::placeholder { color: var(--txt-muted); }
.hx-assessment-field :is(input, select)[aria-invalid="true"] { border-color: #dc4545; }
.hx-assessment-error { display: block; margin-top: 5px; color: #b42332; font-size: var(--fs-xs); }
[data-theme="dark"] .hx-assessment-error { color: #ffa4ae; }
.hx-assessment-error[hidden], .hx-assessment-minor[hidden], #home-assessment-error[hidden] { display: none; }
.hx-assessment-minor { margin: 14px 0 0; color: var(--txt-secondary); font-size: var(--fs-xs); line-height: 1.5; }
.hx-assessment-turnstile { width: 300px; max-width: 100%; min-width: 0; margin-top: 16px; min-height: 65px; display: flex; justify-content: flex-start; }
.hx-assessment-submit { width: 100%; margin-top: 20px; justify-content: center; }
.hx-assessment-foot { text-align: center; color: var(--txt-muted); font-size: var(--fs-xs); margin: 12px 0 0; }
.hero--focused .hx-top--form_below .hx-assessment-form { max-width: none; margin: 0; }
.hero--focused .hx-top--form_below .hx-assessment-turnstile { justify-content: flex-start; }
@media (min-width: 901px) {
  .hx-top--form_below .hx-assessment-fields { grid-template-columns: 1fr 1.2fr .9fr; align-items: start; }
  .hx-top--form_below .hx-assessment-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .hx-top--form_below .hx-assessment-actions .hx-assessment-turnstile { flex: none; margin-top: 16px; }
  .hx-top--form_below .hx-assessment-submit { display: flex; width: max-content; max-width: 100%; margin: 16px 0 0 auto; }
  .hx-top--form_below .hx-assessment-foot { text-align: left; }
}
@media (max-width: 900px) {
  .hero--focused .hx-about--inline { display: none; }
  .hero--focused .hx-about--mobile-only { display: block; }
  .hero--focused .hx-top--form_left, .hero--focused .hx-top--form_right, .hero--focused .hx-top--form_below { grid-template-columns: minmax(0, 1fr); }
  .hx-top--form_left .hx-form-column { order: 1; }
  .hx-top--form_left .hx-intro { order: 2; }
  .hx-form-column { max-width: 620px; margin-inline: auto; }
  .hx-top--form_right .hx-form-column { max-width: 620px; margin-inline: auto; }
  .hx-assessment-form { max-width: 620px; margin: 0 auto; }
  .hx-top--form_right .hx-assessment-form { margin: 0 auto; }
}
@media (max-width: 640px) {
  .hero--home .hx-stage--form { padding-top: 16px; padding-bottom: 24px; }
}
@media (max-width: 420px) {
  .hero--home .hx-stage--form { padding-inline: 12px; }
}
@media (max-width: 340px) {
  .hx-assessment-top { align-items: flex-start; flex-direction: column; gap: 3px; }
}
.hero--focused .hx-top .hx-intro { margin: 0; max-width: none; text-align: left; }
@media (max-width: 900px) {
  .hero--focused .hx-top--form_left .hx-intro { max-width: 620px; margin-inline: auto; padding: clamp(20px, 2vw, 30px); }
  .hero--home.hero--focused .hx-stage .hx-about--mobile-only { max-width: 620px; padding-inline: clamp(20px, 2vw, 30px); text-align: left; }
  .hero--home.hero--focused .hx-stage .hx-about--mobile-only .hx-powered { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .hero--home-form { padding-top: calc(var(--nav-h) + var(--announce-h, 0px) + var(--sp-6)); }
}
.hero--focused .hx-intro :is(.hero-eyebrow, .hx-lead, .hx-big, .hx-audience, .hx-benefit) { overflow-wrap: anywhere; }
.hero--focused .hx-top .hero-title { font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1.13; text-wrap: initial; }
.hero--focused .hx-lead .hx-s { display: block; }
.hero--focused .hx-top--form_below .hx-lead .hx-s { display: inline; }
.hero--focused .hx-top .hx-lead { font-size: 0.49em; line-height: 1.4; margin-bottom: 0.6em; }
.hero--focused .hx-top .hx-big .hx-s { display: inline; }
.hero--focused .hx-top .hx-audience, .hero--focused .hx-top .hx-benefit { margin-left: 0; margin-right: 0; text-align: left; text-wrap: pretty; }
.hero--home.hero--focused .hx-top--form_below :is(.hx-audience, .hx-benefit) { max-width: none; }
.hero--focused .hx-top .hero-actions { justify-content: flex-start; gap: 12px; }
@media (min-width: 901px) {
  .hero--focused .hx-top--form_below .hero-actions { justify-content: flex-end; }
}
@media (min-width: 1220px) {
  .hero--focused .hx-top--form_below .hx-intro { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 28px; }
  .hero--focused .hx-top--form_below .hx-intro > :is(.hero-eyebrow, .hero-title) { grid-column: 1 / -1; }
  .hero--focused .hx-top--form_below .hx-audience { grid-column: 1; grid-row: 3; }
  .hero--focused .hx-top--form_below .hx-benefit { grid-column: 1; grid-row: 4; }
  .hero--focused .hx-top--form_below .hero-actions { grid-column: 2; grid-row: 3 / 5; align-self: center; }
}
.hero--focused .hx-top .hero-actions .btn { font-size: var(--fs-sm); padding: 14px 22px; }
.hero--focused .hx-top .hx-meta { margin: 18px 0 0; justify-content: flex-start; }
.hero--focused .hx-meta .hx-reassure { font-size: var(--fs-xs); }
.hero--focused .hx-preview { width: 100%; max-width: 440px; margin: 0 0 0 auto; min-width: 0; }
.hero--focused .hx-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--txt-muted); font-size: var(--fs-xs); }
.hero--focused .hx-preview-head strong { color: var(--txt-primary); font-weight: 600; font-size: var(--fs-sm); }
.hero--focused .hx-preview-tabs { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }
.hero--focused .hx-preview-tabs[hidden], .hero--focused .hx-preview-panel[hidden] { display: none; }
.hero--focused .hx-preview-tabs button { padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--txt-secondary); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.hero--focused .hx-preview-tabs button[aria-selected="true"] { color: var(--clr-accent-txt); border-bottom-color: var(--clr-mint); font-weight: 600; }
.hero--focused .hx-preview-paper { position: relative; height: clamp(310px, 28vw, 380px); overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(0,30,39,0.12); }
.hero--focused .hx-preview-paper img { display: block; width: 100%; height: auto; }
.hero--focused .hx-preview-paper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.hero--focused .hx-preview-caption { margin: 14px 0 9px; color: var(--txt-muted); font-size: var(--fs-xs); line-height: 1.5; }
.hero--focused .hx-preview-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; font-size: var(--fs-xs); }
.hero--focused .hx-preview-links a { color: var(--clr-accent-txt); font-weight: 600; text-underline-offset: 3px; }
.hero--focused .hx-quiet-trust { grid-column: 1 / -1; margin: 0; color: var(--txt-muted); font-size: var(--fs-xs); line-height: 1.5; }
.hx-preview-dialog { width: min(640px, calc(100% - 32px)); max-height: 88vh; max-height: 88dvh; padding: 16px; color: var(--txt-primary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; overflow-y: auto; }
.hx-preview-dialog::backdrop { background: rgba(8,27,43,0.65); }
.hx-preview-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.hx-preview-dialog-head strong { font-size: var(--fs-sm); }
.hx-preview-dialog-head button { padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-full); color: var(--txt-primary); background: var(--bg-surface); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.hx-preview-dialog > img { display: block; width: 100%; height: auto; background: #fff; }
@media (max-width: 900px) {
  .hero--focused .hx-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero--focused .hx-preview { margin: 0 auto; }
  .hero--focused .hx-top .hero-title { font-size: clamp(2rem, 6vw, 2.75rem); }
  .hero--focused .hx-preview-paper { height: 340px; }
}
@media (max-width: 420px) {
  .hero--focused .hx-preview-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .hero--focused .hx-preview-tabs { gap: 14px; }
  .hero--focused .hx-preview-paper { height: 310px; }
  .hero--focused .hx-top .hero-actions .btn { padding: 12px 16px; }
}

/* Approved static depth treatment: dark homepage hero only; no geometry or type changes. */
[data-theme="dark"] .hero--focused .hx-stage {
  background: radial-gradient(760px 520px at 88% 280px, rgba(52,211,153,0.23), transparent 54%), radial-gradient(640px 420px at 18% 100%, rgba(52,211,153,0.045), transparent 50%), linear-gradient(180deg, #1B2F3F, #172B3A);
  border-color: rgba(97,205,171,0.29);
}
[data-theme="dark"] .hero--focused .hx-preview-paper {
  box-shadow: 0 18px 36px rgba(0,0,0,0.27), 0 0 30px rgba(52,211,153,0.10);
  border-color: rgba(152,209,193,0.42);
}

/* Homepage plan offers: distinguish the offer, expiry and existing green action. */
.cs-section .cs-offer { text-transform: none; }
.cs-section .cs-offer-label { color: #965400; }
.cs-section .cs-offer-expiry { color: var(--txt-secondary); font-weight: 400; }
[data-theme="dark"] main:has(> .hero--home) .cs-section .cs-offer-label { color: #FCD34D; }
[data-theme="dark"] main:has(> .hero--home) .cs-section .cs-offer-expiry { color: var(--hp-sub); }

/* Payment strip + Quick Check counter */
.pay-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--clr-border, rgba(127,127,127,.35)); border-radius: 12px; background: var(--bg-surface, rgba(127,127,127,.06)); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.pay-strip .ps-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: 700; color: var(--txt-primary, inherit); }
.pay-strip .ps-label svg { color: var(--clr-accent-txt, currentColor); flex: none; }
.pay-strip .ps-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-strip .ps-chip { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 38px; background: #fff; border: 1px solid #d5dbe3; border-radius: 7px; flex: none; color: #334155; box-shadow: 0 1px 1px rgba(15,23,42,.05); }
.pay-strip .ps-chip img { display: block; max-width: 46px; max-height: 24px; width: auto; height: auto; }
.pay-strip .ps-chip svg { width: 24px; height: 24px; }
.pay-strip .ps-note { flex-basis: 100%; font-size: var(--fs-sm); color: var(--txt-secondary); }
.pay-strip--center { justify-content: center; text-align: center; }
.pay-strip--center .ps-chips { justify-content: center; }
.qc-count { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--txt-secondary); }
.pay-strip--center { justify-content: center; text-align: center; }
.proof-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--txt-secondary); }
.proof-line .proof-ico { flex: none; color: var(--txt-muted, var(--txt-secondary)); opacity: .9; }
.proof-line--center { justify-content: center; margin: 0 0 var(--sp-4); }
.cs-proof { margin-top: 6px; }
.hx-count { margin-top: var(--sp-3); }
.proof-line { flex-wrap: wrap; row-gap: 2px; }
.proof-line--center { text-align: center; }
.hx-count span { white-space: nowrap; }
.hx-count-sep { opacity: .6; }
.proof-line--center.hx-count .hx-count-sep { display: none; }
.proof-line--center.hx-count span:last-child { flex-basis: 100%; font-weight: 500; }
.hero--home .hx-proof.hx-proof--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .hero--home .hx-proof.hx-proof--two { grid-template-columns: 1fr; } }

/* ── Home hero: situation cards layout (hero--cards) ─────────────────────────── */
.hero--cards .hx-audience { font-weight: 600; color: var(--txt-primary); margin: 0 0 var(--sp-3); }
.hc-cards { grid-auto-rows: 1fr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-5); max-width: none; }
.hc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--sp-4); text-align: left; font: inherit; color: var(--txt-primary); background: var(--bg-card, var(--bg-surface, #fff)); border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.hc-card { position: relative; padding-right: calc(var(--sp-4) + 30px); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
/* Radio mark: shows these are choices (pick one), and fills with a tick when chosen. */
.hc-card::after { content: ""; position: absolute; top: var(--sp-4); right: var(--sp-4); width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--border-strong, #94a3b8); border-radius: 50%; background: transparent center / 12px no-repeat; transition: border-color .15s, background-color .15s; }
.hc-card:hover { border-color: var(--clr-mint); box-shadow: 0 6px 18px rgba(15,23,42,.10); transform: translateY(-2px); }
.hc-card:hover::after { border-color: var(--clr-mint); }
.hc-card.is-on::after, .hc-card[aria-checked="true"]::after { border-color: #059669; background-color: #059669; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.hc-card:focus-visible { outline: 3px solid var(--clr-mint); outline-offset: 2px; }
.hc-card.is-on { border-color: var(--clr-mint); box-shadow: 0 0 0 3px rgba(5,150,105,.18); background: var(--clr-accent-lt); transform: none; }
.hc-l { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-accent-txt); }
.hc-q { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; }
.hc-d { font-size: var(--fs-sm); line-height: 1.5; color: var(--txt-muted); }
.hc-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hc-ticks li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 500; color: var(--txt-primary); }
.hc-ticks svg { flex: none; color: var(--clr-accent-txt); }
.hx-assessment-for { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--txt-secondary); }
.hx-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--clr-accent-txt); text-decoration: underline; cursor: pointer; }
.hc-sample { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: center; margin: var(--sp-5) 0 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card, var(--bg-surface, #fff)); }
.hc-sample-img { display: block; height: 120px; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.hc-sample-img img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }
.hc-sample figcaption { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--txt-muted); }
.hc-sample figcaption strong { color: var(--txt-primary); font-size: var(--fs-base); }
.hc-sample figcaption a { color: var(--clr-accent-txt); font-weight: 600; text-decoration: none; }
.hc-sample figcaption a:hover { text-decoration: underline; }
.hc-qc { font-weight: 500 !important; }
.pr-qc { text-align: center; margin: var(--sp-5) 0 0; font-size: var(--fs-base); color: var(--txt-secondary); }
.pr-qc a { color: var(--clr-accent-txt); font-weight: 600; }
@media (max-width: 899px) { .hero--cards .hc-ticks { display: none; } }
@media (max-width: 560px) { .hc-cards { grid-template-columns: minmax(0, 1fr); } .hc-card { padding: var(--sp-3) calc(var(--sp-4) + 30px) var(--sp-3) var(--sp-4); } .hc-card::after { top: var(--sp-3); right: var(--sp-3); } }
@media (prefers-reduced-motion: reduce) { .hc-card { transition: none; } .hc-card:hover { transform: none; } }
.hero--cards .hc-ticks { gap: 6px; }
/* With the situation cards, the "RoadmapMint combines…" statement runs full width under both columns (the copy that follows the grid), not squeezed into the left column. */
.hero--cards .hx-about--inline { display: none; }
.hero--cards .hx-about--mobile-only { display: block; }
.hero--cards .hc-ticks li { font-size: var(--fs-sm); font-weight: 400; color: var(--txt-secondary); }
.hero--cards .hc-ticks svg { width: 14px; height: 14px; }
.hero--cards .hx-about--inline { margin-top: var(--sp-6); }
/* Home hero (cards layout): the two proof cards get a soft tinted gradient instead of plain white. */
.hero--cards .hx-proof .hx-pt { border-color: rgba(5,150,105,.22); }
.hero--cards .hx-proof .hx-pt:nth-child(1) { background: linear-gradient(135deg, #E8F8F0 0%, #EEF6FD 100%); }
.hero--cards .hx-proof .hx-pt:nth-child(2) { background: linear-gradient(135deg, #FFF6E0 0%, #E8F8F0 100%); }
.hero--cards .hx-proof .hx-pt-ico { background: #fff; box-shadow: 0 2px 8px -3px rgba(23,43,58,.25); }
[data-theme="dark"] .hero--cards .hx-proof .hx-pt { border-color: rgba(52,211,153,.22); }
[data-theme="dark"] .hero--cards .hx-proof .hx-pt:nth-child(1) { background: linear-gradient(135deg, rgba(52,211,153,.16) 0%, rgba(56,132,196,.14) 100%), #1B2F3F; }
[data-theme="dark"] .hero--cards .hx-proof .hx-pt:nth-child(2) { background: linear-gradient(135deg, rgba(245,184,66,.14) 0%, rgba(52,211,153,.14) 100%), #1B2F3F; }
[data-theme="dark"] .hero--cards .hx-proof .hx-pt-ico { background: rgba(255,255,255,.08); box-shadow: none; }

/* ── Home: combined "Inside your roadmap" section ─────────────────────────── */
.rin { background: linear-gradient(180deg, #EEF6F3 0%, #F4F8FB 100%); }
[data-theme="dark"] .rin { background: linear-gradient(180deg, #14232F 0%, #172B3A 100%); }
.rin-head { margin-bottom: var(--sp-10); }
.rin-head .section-desc { max-width: 40em; margin-left: 0; }
.rin-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 24px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 18px 40px -28px rgba(23,43,58,.35); }
.rin-panel + .rin-panel { margin-top: var(--sp-6); }
.rin-panel h3 { font-size: var(--fs-xl, 1.375rem); margin: 0 0 4px; }
.rin-sub { margin: 0 0 var(--sp-6); color: var(--txt-muted); font-size: var(--fs-sm); }
.rin-q { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: rq; }
.rin-q li { position: relative; padding: 18px 16px; border-radius: 16px; background: linear-gradient(160deg, #F0FAF5, #F2F7FC); border: 1px solid #D6EADF; display: block; }
.rin-q li::before { counter-increment: rq; content: counter(rq); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--clr-accent, #059669); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.rin-q b { display: block; font-size: var(--fs-base); line-height: 1.3; margin-bottom: 6px; }
.rin-q span { display: block; font-size: var(--fs-sm); color: var(--txt-muted); line-height: 1.5; }
.rin-chip { display: inline-flex; margin: 0 0 var(--sp-5); font-size: var(--fs-xs); font-weight: 600; color: var(--clr-accent-txt); background: var(--clr-accent-lt); border-radius: 99px; padding: 6px 14px; }
.rin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.rin-card { border: 1px solid var(--border); border-radius: 18px; padding: var(--sp-6); background: linear-gradient(160deg, var(--bg-surface), var(--bg-surface-2)); }
.rin-card small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-accent-txt); }
.rin-card h4 { font-size: 1.1875rem; margin: 6px 0 4px; }
.rin-card p { margin: 0 0 14px; color: var(--txt-muted); font-size: var(--fs-sm); }
.rin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rin-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; }
.rin-list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #059669 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rin-card--deep { background: linear-gradient(160deg, #173446, #1B4A46); border-color: transparent; color: #E8F3F0; }
.rin-card--deep small { color: #6EE7B7; }
.rin-card--deep h4 { color: #fff; }
.rin-card--deep p { color: #B7CBC8; }
.rin-card--deep .rin-list li::before { background-color: #34D399; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173446' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.rin-note { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--txt-muted); }
.rin-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--txt-muted); }
.rin-foot a { color: var(--clr-accent-txt); font-weight: 600; }
[data-theme="dark"] .rin-q li { background: linear-gradient(160deg, rgba(52,211,153,.12), rgba(56,132,196,.1)); border-color: rgba(52,211,153,.2); }
@media (max-width: 960px) { .rin-q { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rin-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rin-q { grid-template-columns: minmax(0, 1fr); } }

/* ── Shared closing banner (above the footer) ─────────────────────────────── */
.cb { position: relative; overflow: hidden; isolation: isolate; padding: clamp(22px, 4.5vw, 62px) var(--sp-4); background: #E3F2EC; background: linear-gradient(135deg, #DDF3EA, #E3EEFA 60%, #EFE8FA); background-size: 200% 200%; animation: cb-drift 22s ease-in-out infinite; }
.cb-in { max-width: 1120px; margin: 0 auto; }
.cb-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: var(--sp-6); align-items: center; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px); background: #fff; border: 1px solid rgba(5,150,105,.2); border-radius: 28px; box-shadow: 0 30px 60px -34px rgba(23,43,58,.45); }
.cb-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #34D399, #059669); }
.cb-copy h2 { margin: 0 0 var(--sp-2); font-size: clamp(1.4rem, 2.7vw, 2.05rem); line-height: 1.15; letter-spacing: -.02em; color: var(--clr-navy, #172B3A); text-wrap: balance; }
.cb-copy p { margin: 0; color: #4A5E6C; font-size: var(--fs-lg, 1.125rem); line-height: 1.55; max-width: 36em; }
.cb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-4); }
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: var(--fs-base); line-height: 1; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cb-btn span { display: inline-block; transition: transform .2s ease; }
.cb-btn:hover { transform: translateY(-1px); }
.cb-btn:hover span { transform: translateX(4px); }
.cb-btn:focus-visible { outline: 3px solid #059669; outline-offset: 3px; }
.cb-btn--pri { background: #059669; color: #fff; box-shadow: 0 12px 26px -12px rgba(5,150,105,.7); }
.cb-btn--out { color: var(--clr-navy, #172B3A); border: 1.5px solid rgba(23,43,58,.3); background: transparent; }
.cb-btn--out:hover { border-color: #059669; }
.cb-copy .cb-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: #5A6B78; }
.cb-note a { color: var(--clr-accent-txt); font-weight: 600; }
.cb-sheet { justify-self: center; display: block; width: min(140px, 100%); border-radius: 10px; overflow: hidden; border: 1px solid #DDE6E4; box-shadow: 0 22px 40px -22px rgba(23,43,58,.55); transform: rotate(3deg); animation: cb-float 7s ease-in-out infinite; background: #fff; }
.cb-sheet img { display: block; width: 100%; height: auto; }
@keyframes cb-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes cb-float { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-10px); } }
[data-theme="dark"] .cb { background: linear-gradient(135deg, #12302F, #14263A 60%, #1C2540); background-size: 200% 200%; }
[data-theme="dark"] .cb-card { background: #1B2F3F; border-color: rgba(52,211,153,.28); box-shadow: 0 30px 60px -34px rgba(0,0,0,.7); }
[data-theme="dark"] .cb-copy h2 { color: #fff; }
[data-theme="dark"] .cb-copy p { color: #B7CBC8; }
[data-theme="dark"] .cb-btn--pri { background: #34D399; color: #0B2A22; box-shadow: 0 12px 26px -12px rgba(52,211,153,.6); }
[data-theme="dark"] .cb-btn--out { color: #E8F4F0; border-color: rgba(255,255,255,.35); }
[data-theme="dark"] .cb-copy .cb-note { color: #9FB3AF; }
[data-theme="dark"] .cb-sheet { border-color: rgba(255,255,255,.15); }
@media (max-width: 820px) { .cb-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .cb-sheet { justify-self: start; width: 90px; } }
@media (max-width: 560px) { .cb { padding-left: var(--sp-4); padding-right: var(--sp-4); } .cb-btns { flex-direction: column; } .cb-card { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .cb, .cb-sheet { animation: none; } .cb-btn, .cb-btn span { transition: none; } }

/* Menu stays put from page to page: the currency button has one fixed width, and pages without the selector reserve the same space. */
.cur-switch--bar .cur-dd-btn { width: 104px; justify-content: center; }
.cur-spacer { display: block; flex: none; width: 104px; height: 36px; }
@media (max-width: 599px) { .cur-spacer { display: none; } }

/* Pricing page: small floating offer card (right edge, just below the header; dark on the light theme, light on the dark theme) */
.fo { position: fixed; right: 14px; top: calc(var(--nav-h, 68px) + var(--announce-h, 0px) + 12px); z-index: 60; width: 206px; border-radius: 20px; color: #fff; background: radial-gradient(160px 120px at 100% 0%, rgba(52,211,153,.45), transparent 70%), linear-gradient(160deg, #173446, #0F2230); border: 1px solid rgba(52,211,153,.35); box-shadow: 0 22px 44px -16px rgba(11,31,44,.65), 0 0 0 4px rgba(52,211,153,.08); overflow: hidden; animation: fo-in .5s ease-out both, fo-glow 4s ease-in-out 1s infinite; }
.fo[hidden] { display: none; }
.fo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #34D399, #6EE7B7, #34D399); }
.fo-link { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 14px; color: inherit; text-decoration: none; }
.fo-tag { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0B2A22; background: #34D399; border-radius: 99px; padding: 4px 10px; }
.fo-row { display: flex; flex-direction: column; gap: 1px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.14); }
.fo-plan { font-size: 12px; color: #A9C4BF; }
.fo-px { font-size: 13px; line-height: 1.3; color: #fff; }
.fo-px s { color: #8FA9A4; }
.fo-px b { font-size: 17px; font-weight: 700; color: #6EE7B7; }
.fo-end { font-size: 11px; color: #A9C4BF; }
.fo-cta { margin-top: 2px; font-size: 12px; font-weight: 700; color: #6EE7B7; }
.fo-link:hover .fo-cta { text-decoration: underline; }
.fo-link:focus-visible { outline: 3px solid #34D399; outline-offset: -3px; border-radius: 20px; }
.fo-x { position: absolute; top: 9px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.fo-x:hover { background: rgba(255,255,255,.22); }
.fo-x:focus-visible { outline: 2px solid #34D399; }
[data-theme="dark"] .fo { color: #172B3A; background: radial-gradient(160px 120px at 100% 0%, rgba(52,211,153,.4), transparent 70%), linear-gradient(160deg, #FFFFFF, #E6F6EE); border-color: rgba(5,150,105,.35); box-shadow: 0 22px 44px -16px rgba(0,0,0,.7), 0 0 0 4px rgba(52,211,153,.12); }
[data-theme="dark"] .fo-tag { background: #059669; color: #fff; }
[data-theme="dark"] .fo-row { border-top-color: rgba(23,43,58,.14); }
[data-theme="dark"] .fo-plan, [data-theme="dark"] .fo-end { color: #4A5E6C; }
[data-theme="dark"] .fo-px { color: #172B3A; }
[data-theme="dark"] .fo-px s { color: #6B7C88; }
[data-theme="dark"] .fo-px b, [data-theme="dark"] .fo-cta { color: #047857; }
[data-theme="dark"] .fo-x { background: rgba(23,43,58,.08); color: #172B3A; }
[data-theme="dark"] .fo-x:hover { background: rgba(23,43,58,.16); }
@keyframes fo-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fo-glow { 0%, 100% { box-shadow: 0 22px 44px -16px rgba(11,31,44,.65), 0 0 0 4px rgba(52,211,153,.08); } 50% { box-shadow: 0 22px 44px -16px rgba(11,31,44,.65), 0 0 0 8px rgba(52,211,153,.16); } }
@media (max-width: 599px) { .fo { width: 140px; right: 8px; } .fo-link { padding: 18px 12px 12px; gap: 6px; } .fo-tag { font-size: 9.5px; padding: 4px 8px; margin-right: 22px; letter-spacing: .06em; } .fo-px { font-size: 12px; } .fo-px b { font-size: 15px; } .fo-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .fo { animation: none; } }
@media print { .fo { display: none; } }

/* ── Page hero (inner pages): full-width gradient band with a small card (see includes/page-hero.php) ───────── */
.ph { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + var(--announce-h, 0px) + clamp(36px, 5vw, 56px)) var(--sp-4) clamp(40px, 5vw, 64px); background: radial-gradient(700px 320px at 90% 0%, rgba(52,211,153,.28), transparent 65%), linear-gradient(135deg, #E8F6EF, #F1F6FB); border-bottom: 1px solid rgba(5,150,105,.12); }
.ph-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
.ph-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-accent-txt); }
.ph-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--clr-mint); flex: none; }
.ph-title { margin: 0 0 14px; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -.02em; color: var(--clr-navy, #172B3A); text-wrap: balance; }
.ph-sub { margin: 0; max-width: 40em; font-size: var(--fs-lg, 1.125rem); line-height: 1.6; color: #4A5E6C; }
.ph-extra { margin-top: var(--sp-4); }
.ph-crumb { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.ph-card { list-style: none; margin: 0; padding: 22px; display: grid; gap: 14px; background: #fff; border: 1px solid rgba(5,150,105,.2); border-radius: 22px; box-shadow: 0 26px 50px -28px rgba(23,43,58,.45); animation: ph-float 8s ease-in-out infinite; }
.ph-card li { display: flex; gap: 12px; align-items: center; }
.ph-dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #059669; color: #fff; font-size: 14px; font-weight: 700; }
.ph-t { display: block; }
.ph-t b { display: block; font-size: var(--fs-base); color: var(--clr-navy, #172B3A); }
.ph-t span { display: block; font-size: var(--fs-xs); color: #5A6B78; }
.ph-mark { justify-self: center; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 34px; background: #fff; border: 1px solid rgba(5,150,105,.2); box-shadow: 0 26px 50px -28px rgba(23,43,58,.5); animation: ph-float 8s ease-in-out infinite; }
.ph-mark svg { width: 76px; height: 76px; }
.ph + section, .ph + .section { padding-top: var(--sp-10); }
@keyframes ph-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
[data-theme="dark"] .ph { background: radial-gradient(700px 320px at 90% 0%, rgba(52,211,153,.18), transparent 65%), linear-gradient(135deg, #12302F, #14263A); border-bottom-color: rgba(52,211,153,.15); }
[data-theme="dark"] .ph-title { color: #fff; }
[data-theme="dark"] .ph-sub { color: #B7CBC8; }
[data-theme="dark"] .ph-card, [data-theme="dark"] .ph-mark { background: #1B2F3F; border-color: rgba(52,211,153,.28); box-shadow: 0 26px 50px -28px rgba(0,0,0,.7); }
[data-theme="dark"] .ph-t b { color: #fff; }
[data-theme="dark"] .ph-t span { color: #9FB3AF; }
[data-theme="dark"] .ph-dot { background: #34D399; color: #0B2A22; }
@media (max-width: 860px) { .ph-in { grid-template-columns: minmax(0, 1fr); } .ph-card, .ph-mark { display: none; } }
@media (prefers-reduced-motion: reduce) { .ph-card, .ph-mark { animation: none; } }
.ph-mark .ph-ic-top { fill: #172B3A; }
[data-theme="dark"] .ph-mark .ph-ic-top { fill: #fff; }
.ph-mark svg { width: 88px; height: auto; }

/* ── "N+ roadmaps delivered": the dominant proof point wherever it appears ── */
.proof-line{gap:12px;row-gap:4px;color:var(--txt-primary)}
.proof-line .proof-ico{box-sizing:content-box;width:22px;height:22px;padding:9px;border-radius:12px;color:#fff;opacity:1;background:linear-gradient(145deg,#0A6B4A,#10A674);box-shadow:0 8px 18px -10px rgba(16,166,116,.8)}
.proof-line>span:first-of-type{font-size:clamp(1.25rem,2.4vw,1.625rem);font-weight:800;letter-spacing:-.01em;line-height:1.15;color:var(--txt-primary)}
.proof-line--center{padding:var(--sp-3) var(--sp-5);border:1px solid rgba(52,211,153,.45);border-radius:99px;background:linear-gradient(rgba(52,211,153,.09),rgba(52,211,153,.09)),var(--bg-surface);width:-moz-fit-content;width:fit-content;max-width:100%;margin:0 auto var(--sp-5)}
.proof-line--center.hx-count{border-radius:var(--r-lg);margin:0 0 var(--sp-4);width:100%;padding:var(--sp-3) var(--sp-4)}
.proof-line.hx-count:not(.proof-line--center){margin-top:var(--sp-4)}
.proof-line .hx-count-sep{display:none}
.proof-line.hx-count>span:last-child{flex-basis:100%;font-size:var(--fs-sm);font-weight:500;color:var(--txt-secondary);padding-left:56px;margin-top:-2px}
.proof-line--center.hx-count>span:last-child{padding-left:0}
.proof-line:not(.hx-count) .proof-ico+span{white-space:normal}
/* Icon left, text right (also inside the narrow form card) */
.proof-line.hx-count{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;text-align:left;justify-content:start}
.proof-line--center.hx-count{justify-content:center;width:100%}
.proof-line.hx-count .proof-ico{grid-row:1 / span 2}
.proof-line.hx-count>span{white-space:normal}
.proof-line.hx-count>span:last-child,.proof-line--center.hx-count>span:last-child{padding-left:0;margin-top:0;flex-basis:auto}
.proof-line--center:not(.hx-count){flex-wrap:nowrap}
/* Compact version inside the form card: one line, lower height */
.proof-line.hx-count{padding:var(--sp-2) var(--sp-4);column-gap:12px;row-gap:0}
.proof-line.hx-count .proof-ico{width:18px;height:18px;padding:8px;border-radius:11px}
.proof-line.hx-count>span:first-of-type{white-space:nowrap;font-size:clamp(1.0625rem,4.4vw,1.3125rem);line-height:1.2}
.proof-line.hx-count>span:last-child{font-size:.875rem;line-height:1.3}
/* Single-line proof (no secondary text) */
.proof-line.hx-count{grid-template-columns:auto minmax(0,1fr);padding:var(--sp-2) var(--sp-4)}
.proof-line.hx-count .proof-ico{grid-row:auto}
.proof-line--center.hx-count{justify-content:center;width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;border-radius:99px;padding:var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2)}
.proof-line.hx-count>span:first-of-type{font-size:clamp(1.125rem,4.6vw,1.375rem)}
.proof-line.hx-count>span:only-of-type,.proof-line--center.hx-count>span:only-of-type{font-size:clamp(1.125rem,4.6vw,1.375rem);font-weight:800;color:var(--txt-primary);line-height:1.2;padding:0;margin:0;white-space:nowrap}

/* Native selects follow the site theme and do not animate colours (prevents a dark flash when the list opens) */
select { color-scheme: light; }
[data-theme="dark"] select { color-scheme: dark; }
select option { background-color: var(--bg-surface, #fff); color: var(--txt-primary, #12202b); }

/* Themed in-page dropdown list (Chrome/Edge 135+): replaces the native popup, which could flash dark before painting. Other browsers keep the native list. */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { display: inline-flex !important; flex-wrap: nowrap; vertical-align: middle; align-items: center; justify-content: space-between; gap: .5rem; }
  select::picker-icon { color: #10A674; transition: rotate .15s ease; }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) { border: 1.5px solid rgba(16, 166, 116, .35); border-radius: 12px; background: var(--bg-surface, #fff); padding: 6px; box-shadow: 0 18px 40px -18px rgba(15, 35, 50, .35); margin-block: 4px; max-height: min(320px, 60vh); }
  select::picker(select) { min-width: anchor-size(width); width: max-content; max-width: min(92vw, 480px); box-sizing: border-box; }
  select option { padding: 10px 12px; white-space: nowrap; border-radius: 8px; font-size: 16px; color: var(--txt-primary, #12202b); background: transparent; display: flex; gap: .5rem; align-items: center; }
  /* Three clearly different states: resting, hovered / keyboard-highlighted (neutral grey), selected (mint tint + left bar + tick) */
  select option { transition: background-color .12s ease; }
  select option:hover, select option:focus { background: var(--bg-surface-2, #EEF3F6); color: var(--txt-primary, #12202b); }
  select option:focus-visible { outline: 2px solid #10A674; outline-offset: -2px; }
  select option:checked { background: var(--clr-accent-lt, #E8F8F0); color: var(--clr-accent-txt, #0A6B4A); font-weight: 700; box-shadow: inset 3px 0 0 #10A674; }
  select option:checked:hover, select option:checked:focus { background: rgba(16, 166, 116, .22); }
  select option::checkmark { color: #10A674; order: 1; margin-left: auto; }
  select option:disabled { opacity: .45; }
}

/* Cross-browser hardening */
.proof-line { box-sizing: border-box; max-width: 100%; min-width: 0; }
.proof-line.hx-count > span:first-of-type,
.proof-line.hx-count > span:only-of-type,
.proof-line--center.hx-count > span:only-of-type { white-space: normal; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 480px) {
  .proof-line--center.hx-count { border-radius: var(--r-lg); width: 100%; padding-right: var(--sp-3); }
  .proof-line.hx-count > span:first-of-type,
  .proof-line.hx-count > span:only-of-type { font-size: clamp(1rem, 4.2vw, 1.2rem); }
}
/* Fallbacks for browsers without the `inset` shorthand (Safari < 14.1, older Android WebView) */
.page-hero-deco { top: 0; right: 0; bottom: 0; left: 0; }
.rmx .av2-card::before { top: 0; bottom: 0; left: 0; }
section.rmx.rmp .rmp-state::before { top: 0; left: 0; right: 0; }

/* Intro video strip under the header (click to play, pop-up player) */
.ivs { background: #12303F; color: #fff; margin-top: calc(var(--nav-h) + var(--announce-h, 0px)); }
/* The first section normally reserves room for the fixed header; with the strip in place the strip takes that spot. */
.ivs:not([hidden]) ~ .hero, .ivs:not([hidden]) ~ .page-hero { padding-top: var(--sp-10); }
/* The shared page hero (.ph) already clears the fixed nav in its own padding; below the intro strip that clearance is not needed again. */
.ivs:not([hidden]) ~ .ph { padding-top: clamp(36px, 5vw, 56px); }
@media (max-width: 768px) { .ivs:not([hidden]) ~ .hero { padding-top: var(--sp-8); } }
.ivs[hidden] { display: none; }
.ivs-in { max-width: 1160px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; }
.ivs-play { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; color: #fff; text-decoration: none; }
.ivs-thumb { flex: none; width: 84px; height: 47px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); }
.ivs-txt { display: flex; align-items: baseline; gap: 14px; min-width: 0; font-size: .9375rem; line-height: 1.35; }
.ivs-txt strong { font-weight: 700; }
.ivs-sub { color: rgba(255,255,255,.78); font-size: .875rem; }
.ivs-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: #34D399; color: #0B2B20; font-weight: 800; font-size: .875rem; white-space: nowrap; transition: transform .15s ease, background-color .15s ease; }
.ivs-play:hover .ivs-btn { background: #5EE7B4; transform: translateY(-1px); }
.ivs-play:focus-visible { outline: 3px solid #34D399; outline-offset: 3px; border-radius: 10px; }
.ivs-x { flex: none; width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.7); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ivs-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.ivs-x:focus-visible { outline: 3px solid #34D399; }
@media (max-width: 860px) { .ivs-sub { display: none; } .ivs-in { justify-content: space-between; padding: 8px 12px; } .ivs-play { flex: 1; justify-content: flex-start; gap: 10px; } }
@media (max-width: 480px) { .ivs-thumb { width: 64px; height: 36px; } .ivs-txt { font-size: .8125rem; } .ivs-btn { padding: 7px 12px; font-size: .8125rem; } .ivs-x { margin-left: 0; } }
/* ── Numbers band: Quick Checks, Basic and Premium reports, full width under the intro video strip (home page) ── */
/* Numbers band: light mint gradient in the light theme, the deep green gradient in the dark theme. */
.cband { position: relative; overflow: hidden; color: var(--clr-navy); background: radial-gradient(60% 140% at 85% 0%, rgba(52,211,153,.2), rgba(52,211,153,0) 60%), linear-gradient(100deg, #F0FAF6 0%, #DDF3EA 50%, #CBEDDF 100%); border-top: 1px solid rgba(10,125,85,.18); border-bottom: 1px solid rgba(10,125,85,.18); }
[data-theme="dark"] .cband { color: #fff; background: radial-gradient(60% 140% at 85% 0%, rgba(52,211,153,.35), rgba(52,211,153,0) 60%), linear-gradient(100deg, #12303F 0%, #0A6B4A 55%, #0C7C57 100%); border-top-color: rgba(255,255,255,.08); border-bottom-color: transparent; }
.ivs[hidden] ~ .cband { margin-top: calc(var(--nav-h) + var(--announce-h, 0px)); }
.cband-in { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.cband-in li { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 14px 12px; text-align: left; }
.cband-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, #16B27C, #0A7D55); border: 2px solid rgba(255,255,255,.85); color: #fff; box-shadow: 0 6px 14px -4px rgba(10,125,85,.55); }
.cband-ic svg { width: 26px; height: 26px; stroke-width: 2; }
[data-theme="dark"] .cband-ic { background: linear-gradient(145deg, #5EE7B4, #34D399); border-color: rgba(255,255,255,.35); color: #0B2B20; box-shadow: 0 6px 16px -4px rgba(0,0,0,.45); }
.cband-tx { display: flex; flex-direction: column; gap: 2px; }
.cband-in li { padding-block: 18px; }
.cband-in li + li { border-left: 1px solid rgba(10,125,85,.28); }
[data-theme="dark"] .cband-in li + li { border-left-color: rgba(255,255,255,.2); }
.cband-in strong { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #0B2433; }
[data-theme="dark"] .cband-in strong { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.18); }
.cband-tx span { font-size: var(--fs-sm); font-weight: 700; color: #123246; line-height: 1.3; }
[data-theme="dark"] .cband-tx span { color: rgba(255,255,255,.88); }
.cband ~ .hero { padding-top: var(--sp-10); }
@media (max-width: 768px) { .cband ~ .hero { padding-top: var(--sp-8); } .cband-in li { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; } .cband-tx { align-items: center; } .cband-ic { width: 34px; height: 34px; } .cband-ic svg { width: 20px; height: 20px; } .cband-in span { font-size: .75rem; } }
.ivs-lock { overflow: hidden; }
.ivs-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,20,28,.82); }
.ivs-box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.ivs-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ivs-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.ivs-close:hover { background: rgba(255,255,255,.28); }
.ivs-close:focus-visible { outline: 3px solid #34D399; outline-offset: 2px; }
@media (max-width: 600px) { .ivs-modal { padding: 12px; } .ivs-close { top: 8px; right: 8px; } }

/* ── Footer ───────────────────────────────────────────────
   One layout for both themes. Colours come from the --f-* tokens: light surface in the light theme, deep navy in the dark theme. */
.footer {
  --f-bg: #EEF4F2; --f-card: #DCEAE5; --f-title: #172B3A; --f-text: #34505F; --f-muted: #4B6877;
  --f-line: rgba(23,43,58,0.12); --f-accent: #0A7D55; --f-field: #EDF4F1; --f-field-line: rgba(23,43,58,0.30); --f-ph: #35525F;
  --f-chip: #FFFFFF; --f-ok: #0A7D55; --f-bad: #B42318;
  position: relative; background: var(--f-bg); color: var(--f-text);
  padding: var(--sp-10) 0 var(--sp-5); border-top: 1px solid var(--f-line);
}
[data-theme="dark"] .footer {
  --f-bg: #0F1D29; --f-card: rgba(255,255,255,0.045); --f-title: #FFFFFF; --f-text: rgba(255,255,255,0.80); --f-muted: rgba(255,255,255,0.64);
  --f-line: rgba(255,255,255,0.10); --f-accent: #34D399; --f-field: rgba(255,255,255,0.08); --f-field-line: rgba(255,255,255,0.40); --f-ph: rgba(255,255,255,0.74);
  --f-chip: rgba(255,255,255,0.05); --f-ok: #7FE3BC; --f-bad: #FFB4A8;
}
.footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #34D399, #22B87D 45%, rgba(52,211,153,0)); }
.footer-container { width: 100%; margin-inline: auto; padding-inline: var(--shell-pad, var(--sp-6)); }
.footer a { text-decoration: none; transition: color var(--ease); }

/* Top band: brand beside the subscribe card */
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 450px); grid-template-areas: "brand news" "nav nav"; gap: var(--sp-8) var(--sp-10); align-items: start; }
.footer-top .footer-brand { grid-area: brand; }
.footer-top .footer-nav { grid-area: nav; }
.footer-top .footer-news { grid-area: news; }
@media (min-width: 1025px) and (max-width: 1679px) {
  .footer-top { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "brand nav" "news nav"; gap: var(--sp-6) var(--sp-8); }
  .footer-top .footer-nav { max-width: none; grid-template-columns: repeat(auto-fit, minmax(125px, 180px)); justify-content: end; gap: var(--sp-6) var(--sp-8); }
}
@media (min-width: 1680px) {
  .footer-top { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) 420px; gap: var(--sp-8) var(--sp-8); grid-template-areas: "brand nav news"; }
  .footer-top .footer-nav { grid-template-columns: repeat(auto-fit, minmax(125px, 180px)); justify-content: end; }
}
.footer-logo { display: inline-block; margin-bottom: var(--sp-3); }
.footer-logo .logo-footer { display: block; height: var(--logo-h, 30px); width: auto; }
.footer-logo .logo-dark, [data-theme="dark"] .footer-logo .logo-light { display: none; }
[data-theme="dark"] .footer-logo .logo-dark { display: block; }
.footer-tagline { margin: 0; max-width: 34ch; font-size: var(--fs-base, 1rem); line-height: 1.6; color: var(--f-text); }

/* Subscribe card */
.footer-news { box-sizing: border-box; width: 100%; padding: var(--sp-4) var(--sp-5); background: var(--f-card); border: 1px solid rgba(23,43,58,0.14); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.footer-news[hidden], .footer-news-form[hidden] { display: none; }
.footer .footer-news-title { margin: 0 0 2px; font-size: 1rem; font-weight: 700; color: var(--f-title); }
.footer .footer-news-lead { margin: 0 0 var(--sp-3); font-size: 0.8125rem; line-height: 1.5; color: var(--f-muted); }
.footer-news-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; }
.footer-news-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer-news-row input { flex: 1 1 180px; min-width: 0; box-sizing: border-box; padding: 8px 14px; border: 1px solid var(--f-field-line); border-radius: 999px; background: var(--f-field); color: var(--f-title); font: inherit; font-size: 0.8125rem; }
.footer-news-row input::placeholder { color: var(--f-ph, var(--f-muted)); opacity: 1; }
.footer-news-row input:focus { outline: 2px solid #34D399; outline-offset: 1px; border-color: #34D399; }

.footer-news-row--code { flex-direction: column; }
.footer-news-row--code input { flex: 0 0 auto; width: 100%; }
.footer-news-row--code .footer-news-btn { align-self: flex-start; }
.footer-news-btn { flex: 0 0 auto; padding: 8px 18px; border: 0; border-radius: 999px; background: #34D399; color: #0B2B20; font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: background var(--ease); }
.footer-news-btn:hover { background: #5EE7B4; }
.footer-news-btn:disabled, .footer-news-link:disabled { opacity: .6; cursor: not-allowed; }
.footer-news-btn:disabled:hover { background: #34D399; }
.footer-news-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.75rem; line-height: 1.5; color: var(--f-muted); cursor: pointer; }
.footer-news-check input { flex: 0 0 auto; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 1px 0 0; border: 1.5px solid var(--f-field-line); border-radius: 4px; background: var(--f-field) center / 12px no-repeat; cursor: pointer; }
.footer-news-check input:checked { background-color: #34D399; border-color: #22B87D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.3 2.3 4.7-5' fill='none' stroke='%230B2B20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.footer-news-check input:focus-visible { outline: 2px solid #34D399; outline-offset: 2px; }
.footer .footer-news-check a { color: var(--f-title); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.footer .footer-news-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.75rem; color: var(--f-muted); }
.footer-news-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--f-text); font: inherit; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.footer .footer-news-msg { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--f-muted); }
.footer .footer-news-msg:empty { display: none; }
.footer .footer-news-msg.is-ok { color: var(--f-ok); }
.footer .footer-news-msg.is-error { color: var(--f-bad); }
.footer-news .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer-news-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Link columns */
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-6) var(--sp-6); max-width: 1100px; }
.footer-col .footer-col-title { position: relative; margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--f-title); }
.footer-col .footer-col-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: #34D399; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.footer-col a { font-size: 0.8125rem; line-height: 1.35; color: var(--f-text); }
.footer-col a:hover, .footer-guides a:hover { color: var(--f-accent); }

/* Popular guides */
.footer-guides { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--f-line); }
.footer-guides-title { margin-right: var(--sp-2); font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--f-title); }
.footer-guides ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.footer-guides a { display: inline-block; padding: 5px 13px; border: 1px solid var(--f-line); border-radius: 999px; background: var(--f-chip); font-size: 0.8125rem; line-height: 1.4; color: var(--f-text); }
.footer-guides a:hover { border-color: var(--f-accent); }

/* Bottom bar */
.footer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-5); padding-right: 168px; border-top: 1px solid var(--f-line); } /* right gap keeps the fixed help button clear of the controls */
.footer-bottom p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--f-muted); }
.footer-mint { font-weight: 700; color: var(--f-title); }
.footer-notice { max-width: 64ch; }
.footer-controls { display: flex; align-items: center; gap: var(--sp-3); }
.footer-controls .theme-toggle { color: var(--f-title); border-color: var(--f-field-line); }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "news" "nav"; }
  .footer-news { max-width: 560px; }
  .footer { padding-bottom: 76px; }
  .footer-bottom { grid-template-columns: 1fr auto; padding-right: 0; }
  .footer-bottom .footer-notice { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}
@media (max-width: 760px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
}
@media (max-width: 560px) {
  .footer { padding-top: var(--sp-8); }
  .footer-news { padding: var(--sp-4); }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom .footer-notice { grid-row: auto; }
  .footer-controls { justify-content: space-between; }
}
@media (max-width: 400px) { .footer-col a { overflow-wrap: anywhere; } .footer-brand, .footer-tagline { min-width: 0; overflow-wrap: anywhere; } }

/* ── Home hero, situation cards: continue button under the cards; sample page and promises on the right, level with the left column ── */
.hc-go { margin: var(--sp-4) 0 0; }
.hc-go .rm-notice { margin: 0 0 var(--sp-3); }
.hc-go-btn { display: flex; width: 100%; justify-content: center; min-height: 54px; }
.hc-go-btn[aria-disabled="true"] { background: var(--border); border-color: var(--border); color: var(--txt-secondary); box-shadow: none; cursor: default; }
.hc-go-btn[aria-disabled="true"]:hover { transform: none; filter: none; }
.hc-go-note { margin: 10px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--txt-secondary); }
.hx-top--cards .hc-side { max-width: none; margin-left: 0; }
@media (min-width: 901px) {
  .hero--cards .hx-top--cards { align-items: stretch; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }
  .hx-top--cards .hc-side { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; }
  /* The sample page floats tilted like the one in the closing banner: no card frame, the whole column centred beside the cards. */
  .hx-top--cards .hc-side { justify-content: flex-start; align-items: center; padding-top: 0; }
  .hc-sample--tall { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 0 0 auto; margin: 0; padding: 0; gap: var(--sp-6); border: 0; background: none; box-shadow: none; min-height: 0; }
  .hc-sample--tall .hc-sample-img { position: static; flex: none; width: min(100%, 440px); height: auto; min-height: 0; overflow: hidden; border-radius: 10px; border: 1px solid #DDE6E4; background: #fff; box-shadow: 0 22px 40px -22px rgba(23,43,58,.55); transform: rotate(3deg); animation: cb-float 7s ease-in-out infinite; }
  .hc-sample--tall .hc-sample-img img { position: static; width: 100%; height: auto; }
  .hc-sample--tall figcaption { text-align: center; margin-top: 10px; }
  [data-theme="dark"] .hc-sample--tall .hc-sample-img { border-color: rgba(255,255,255,.15); }
  .hero--cards .hc-ticks--side { display: grid; padding: 0 var(--sp-1); }
}

@media (max-width: 560px) { .hc-card:not(.is-on) .hc-d { display: none; } }

/* clip (not hidden) keeps the decorative edge clipped but lets the Continue button stay pinned; older browsers keep hidden and simply do not pin it */

@media (max-width: 560px) { .hc-cards { grid-auto-rows: auto; } }
@media (prefers-reduced-motion: reduce) { .hc-sample--tall .hc-sample-img { animation: none; } }

/* Cards layout, wide screens: the headline and its lead line grow so the text fills the 65% column instead of leaving a gap before the sample page. */
@media (min-width: 901px) {
  .hero--cards .hx-top--cards .hx-intro .hx-big { font-size: clamp(2.6rem, 4.6vw, 3.9rem); }
  .hero--cards .hx-top--cards .hx-intro .hx-lead { font-size: clamp(1.4rem, 2vw, 1.75rem); }
}

/* Home hero (cards layout): the "RoadmapMint combines…" statement sits in the right column under the sample link on desktop; phones keep the full-width copy below. */
.hc-about { display: none; }
@media (min-width: 901px) {
  .hero--cards .hx-about--mobile-only { display: none; }
  .hero--cards .hc-about { display: block; width: min(100%, 400px); margin-top: var(--sp-4); text-align: left; }
  .hc-about::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 0.7; height: 22px; color: var(--clr-mint); margin-bottom: var(--sp-1); }
  .hc-about-text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; font-weight: 500; color: var(--txt-primary); text-wrap: pretty; }
  .hc-about-by { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--txt-muted); }
  .hc-about-by svg { flex: none; color: var(--clr-accent-txt); }
  .hc-about-by span::before { content: "\2014\00a0"; }
}

/* Home hero (cards layout): privacy and trust row between the Continue note and the two proof cards. */
.hc-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-8) 0 0; padding: 0; list-style: none; }
.hc-trust + .hx-proof { margin-top: var(--sp-6); }
.hc-trust-i { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-surface, #fff); }
.hc-trust-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(31, 191, 138, .16); color: var(--clr-accent-txt); }
.hc-trust-ic svg { display: block; }
.hc-trust-i b { display: block; font-size: var(--fs-base); color: var(--txt-primary); }
.hc-trust-i div span { display: block; font-size: var(--fs-sm); color: var(--txt-secondary); }
@media (max-width: 899px) { .hc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hc-trust-i { flex-direction: column; align-items: flex-start; } }
/* Trust row: each icon takes a colour that fits its meaning (privacy green, security blue, transparency violet, official sources amber). */
.hc-trust-i:nth-child(1) .hc-trust-ic { background: rgba(5, 150, 105, .14); color: #047857; }
.hc-trust-i:nth-child(2) .hc-trust-ic { background: rgba(37, 99, 235, .12); color: #1D4ED8; }
.hc-trust-i:nth-child(3) .hc-trust-ic { background: rgba(124, 58, 237, .12); color: #6D28D9; }
.hc-trust-i:nth-child(4) .hc-trust-ic { background: rgba(217, 119, 6, .15); color: #B45309; }
[data-theme="dark"] .hc-trust-i:nth-child(1) .hc-trust-ic { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
[data-theme="dark"] .hc-trust-i:nth-child(2) .hc-trust-ic { background: rgba(96, 165, 250, .16); color: #93C5FD; }
[data-theme="dark"] .hc-trust-i:nth-child(3) .hc-trust-ic { background: rgba(167, 139, 250, .16); color: #C4B5FD; }
[data-theme="dark"] .hc-trust-i:nth-child(4) .hc-trust-ic { background: rgba(251, 191, 36, .15); color: #FCD34D; }
/* Home hero: "reports delivered" card (all report versions together; Quick Checks not counted). Inverted against the page: dark card in the light theme, light card in the dark theme. */
.hx-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 6px; border: 1px solid transparent; border-radius: var(--r-lg, 14px); background: linear-gradient(165deg, #1E4F49 0%, #12303A 55%, #0C2229 100%); color: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .28), 0 14px 30px -6px rgba(8, 27, 43, .55), 0 4px 10px rgba(8, 27, 43, .25); white-space: nowrap; }
.hx-badge-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(52, 211, 153, .18); color: #6EE7B7; }
.hx-badge-ic svg { display: block; width: 18px; height: 18px; }
.hx-badge-txt { display: flex; flex-direction: column; line-height: 1.15; }
.hx-badge strong { font-size: var(--fs-base, 1rem); font-weight: 800; letter-spacing: -.01em; color: #fff; }
.hx-badge small { font-size: .6875rem; font-weight: 600; color: rgba(255, 255, 255, .78); }
[data-theme="dark"] .hx-badge { background: linear-gradient(165deg, #FFFFFF 0%, #F1F8F5 55%, #DCEBE4 100%); color: #3B5560; box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(11, 42, 34, .14), 0 14px 30px -6px rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .4); }
/* Stitched seam along the pouch edge */
.hx-badge { position: relative; }
.hx-badge::after { content: ''; position: absolute; inset: 3px 0 5px 3px; border: 1px dashed rgba(255, 255, 255, .24); border-right: 0; border-radius: calc(var(--r-lg, 14px) - 3px) 0 0 calc(var(--r-lg, 14px) - 3px); pointer-events: none; }
[data-theme="dark"] .hx-badge::after { border-color: rgba(11, 42, 34, .22); }
[data-theme="dark"] .hx-badge-ic { background: rgba(5, 150, 105, .14); color: #047857; }
[data-theme="dark"] .hx-badge strong { color: #0B2A22; }
[data-theme="dark"] .hx-badge small { color: #3B5560; }
.hero--home .hx-stage > .hx-badge { position: absolute; top: 99px; right: 0; z-index: 3; border-right: 0; border-radius: var(--r-lg, 14px) 0 0 var(--r-lg, 14px); padding-right: 14px; }
@media (min-width: 901px) { .hero--cards .hx-top--cards .hc-side { padding-top: 0; } }
/* Price badge colour (home hero and assessment): deep indigo in the light theme, warm cream in the dark theme; the reports badge stays teal / mint */
.hx-badge.hx-badge--price { background: linear-gradient(165deg, #2F3E78 0%, #1A2450 55%, #101736 100%); color: rgba(255, 255, 255, .8); }
.hx-badge--price .hx-badge-ic { background: rgba(251, 191, 36, .18); color: #FCD34D; }
.hx-badge--price strong { color: #fff; }
.hx-badge--price small { color: rgba(255, 255, 255, .8); }
[data-theme="dark"] .hx-badge.hx-badge--price { background: linear-gradient(165deg, #FFFFFF 0%, #FFF8E6 55%, #FBE8B8 100%); color: #6B5A33; box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(90, 60, 0, .14), 0 14px 30px -6px rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .4); }
[data-theme="dark"] .hx-badge--price::after { border-color: rgba(90, 60, 0, .22); }
[data-theme="dark"] .hx-badge--price .hx-badge-ic { background: rgba(217, 119, 6, .14); color: #B45309; }
[data-theme="dark"] .hx-badge--price strong { color: #3A2A00; }
[data-theme="dark"] .hx-badge--price small { color: #6B5A33; }
/* "From" price badge: stacked directly under the reports-delivered badge */
.hero--home .hx-stage > .hx-badge--price { top: 157px; }
.hero--home .hx-stage > .hx-badge--price.hx-badge--first { top: 99px; }
.hx-badge--price .hx-badge-txt small { order: -1; }
/* Phones: both badges sit on the sample report card (same idea as on desktop), not at the top of the hero */
.hx-badges-m { display: none; }
@media (max-width: 640px) {
  .hero--home .hx-stage > span.hx-badge.hx-badge { display: none; }
  .hc-sample { position: relative; }
  .hx-badges-m { display: flex; gap: 8px; position: absolute; top: -18px; right: 8px; z-index: 3; }
  .hx-badges-m .hx-badge { position: relative; top: auto; right: auto; border-right: 1px solid transparent; border-radius: 14px; padding: 5px 12px 5px 5px; margin: 0; }
  .hx-badges-m .hx-badge::after { inset: 3px; border-right: 1px dashed rgba(255, 255, 255, .24); border-radius: 11px; }
  [data-theme="dark"] .hx-badges-m .hx-badge::after { border-right-color: rgba(11, 42, 34, .22); }
  [data-theme="dark"] .hx-badges-m .hx-badge--price::after { border-right-color: rgba(90, 60, 0, .22); }
}
@media (max-width: 640px) { .hero--home .hx-stage > .hx-badge { position: relative; display: flex; margin: 0 -12px var(--sp-4) auto; width: fit-content; } .hx-badge { padding: 5px 12px 5px 5px; } .hx-badge-ic { width: 30px; height: 30px; } }
/* Home hero: the sample image frame. */
.hx-preview-paper, .hc-sample-img { position: relative; }


/* Sample report page: looks like paper. Two sheets peek out underneath, a soft sheen lies across the page and the left edge is shaded like a binding. */
.hc-sample--tall .hc-sample-img {
  box-shadow: 4px 5px 0 0 #F6F8F7, 4px 5px 0 1px #D3DEDB, 8px 10px 0 0 #EDF2F0, 8px 10px 0 1px #D3DEDB, 0 28px 42px -20px rgba(23, 43, 58, .5);
}
.hc-sample--tall .hc-sample-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(23, 43, 58, .10) 0, rgba(23, 43, 58, 0) 7%),
              linear-gradient(125deg, rgba(255, 255, 255, .30) 0, rgba(255, 255, 255, 0) 38%, rgba(23, 43, 58, .06) 100%);
}
[data-theme="dark"] .hc-sample--tall .hc-sample-img {
  box-shadow: 4px 5px 0 0 #D9E1DF, 4px 5px 0 1px #8FA19D, 8px 10px 0 0 #B9C6C3, 8px 10px 0 1px #6F827E, 0 28px 42px -18px rgba(0, 0, 0, .7);
}
@media (prefers-reduced-motion: reduce) { .hc-sample--tall .hc-sample-img::after { opacity: .8; } }