/* =============================================================================
   iBoost — main stylesheet
   ============================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette */
  --color-bg: #ffffff;
  --color-fg: #0A2540;
  --color-fg-soft: #334155;
  --color-muted: #64748b;
  --color-primary: #0A2540;
  --color-primary-hover: #061A30;
  --color-accent: #2ECC71;
  --color-accent-hover: #27B862;
  --color-accent-soft: #d1fae5;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-surface: #f8fafc;
  --color-surface-2: #f1f5f9;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12);

  --container-max: 1140px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-fg);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-2); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover { text-decoration: underline; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.muted { color: var(--color-muted); }

/* HTML5 [hidden] attribute should always win, even against components that
   set display:flex / inline-flex / etc. Browsers ship this rule by default
   but at low specificity, so any element-level display rule beats it. We
   re-assert it with !important so that JS-driven hiding (e.g. the
   data-auth-hide pattern in header.js) just works regardless of the
   element's normal display mode. */
[hidden] { display: none !important; }

/* ---------- Header ---------- */
/* Simple header used by legal pages, auth pages, and as base styling.
   Marketing pages (index, how-it-works, pricing, faq) override this
   via a separate file /assets/css/header-megamenu.css which is scoped
   with body.iboost-mm to avoid any cascade conflict. */

.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255, 255, 255, 0.92);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.site-nav a {
  color: var(--color-fg);
  font-weight: 500;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--color-primary); }

@media (max-width: 680px) {
  .site-nav .nav-link-secondary { display: none; }
}

/* Logo — used by header + signup/login intro columns */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo img { display: block; height: 36px; width: auto; }

@media (max-width: 680px) {
  .logo img { height: 28px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

.btn-secondary {
  background: var(--color-primary);
  color: #fff;
}

.btn-secondary:hover { background: var(--color-primary-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-fg);
}

.btn-ghost:hover { background: var(--color-surface); }

.btn-lg {
  padding: 1rem 1.75rem;
  font-size: 1.05rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ---------- Hero ---------- */
/* ===========================================================
   HERO — dark navy "command center" version
   Large colored island between the white header and white sections
   below. Ascending-curve SVG motif sits behind content at low opacity.
   =========================================================== */
.hero-dark {
  position: relative;
  padding: var(--space-8) 0 var(--space-8);
  background:
    /* Primary emerald glow — bottom-left, where the journey visually
       starts. Bumped intensity 0.22 -> 0.38 for more drama. */
    radial-gradient(ellipse 80% 60% at 5% 100%, rgba(46, 204, 113, 0.38) 0%, transparent 55%),
    /* Secondary emerald pulse — mid-right near the scorecard, ties
       the card's own emerald border into the background. */
    radial-gradient(ellipse 50% 45% at 85% 55%, rgba(46, 204, 113, 0.15) 0%, transparent 60%),
    /* Electric blue top-right — gives the night a cinematic second
       color without drifting from the navy brand. */
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 55%),
    /* Bottom vignette — darker corners pull the eye to the center. */
    radial-gradient(ellipse 100% 80% at 50% 100%, transparent 50%, rgba(4, 20, 38, 0.6) 100%),
    /* Deep diagonal navy base. */
    linear-gradient(165deg, #0A2540 0%, #0e2d4d 50%, #041426 100%);
  color: #fff;
  overflow: hidden;
}

/* Full-viewport hero on desktop. min-height keeps content from getting
   clipped on short laptops — if the copy + scorecard stack is taller
   than the viewport, the hero grows rather than squeezes.

   Uses 100dvh where supported (modern browsers, avoids Safari iOS
   address-bar flicker) with 100vh fallback. Header is ~70px tall —
   subtract it so the hero's bottom edge sits exactly at the viewport
   bottom on first paint.

   Flex layout lets us vertically center the container inside the
   tall hero so the content doesn't stick to the top with dead space
   below. */
@media (min-width: 860px) {
  .hero-dark {
    min-height: calc(100vh - 70px);
    min-height: calc(100dvh - 70px);
    display: flex;
    align-items: center;
  }

  .hero-dark > .container {
    flex: 1;
  }
}

.hero-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
}

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

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-6);
  }
}

/* =======================================================================
   HUB-AND-SPOKES HERO (Vizii-inspired)
   ----------------------------------------------------------------------
   Dark navy background + vibrant emerald + electric blue accents.
   Centered copy block at the top, big glowing logo hub at the bottom
   with satellite cards connected by right-angle traces carrying
   animated data packets.

   Animations are all CSS-only and use animation-duration: !important
   where applicable to defeat the browser UA reduced-motion rule that
   collapses duration to near-zero.
   ======================================================================= */

.hero-hub {
  position: relative;
  padding: var(--space-8) 0 var(--space-8);
  background:
    /* Vibrant emerald halo from bottom-left */
    radial-gradient(ellipse 50% 40% at 50% 75%, rgba(46, 204, 113, 0.28) 0%, transparent 55%),
    /* Electric blue accent top-left */
    radial-gradient(ellipse 35% 30% at 15% 25%, rgba(56, 189, 248, 0.10) 0%, transparent 55%),
    /* Bottom vignette */
    radial-gradient(ellipse 100% 80% at 50% 100%, transparent 50%, rgba(4, 20, 38, 0.55) 100%),
    /* Dark navy overlay — 75-80% alpha so the skyline shows through at ~20-25% */
    linear-gradient(165deg, rgba(10, 37, 64, 0.78) 0%, rgba(14, 45, 77, 0.72) 50%, rgba(4, 20, 38, 0.82) 100%),
    /* City skyline image — bottom-aligned so the reflection sits at the bottom of the hero */
    url('/assets/img/brand/hero-city.jpg') center bottom / cover no-repeat,
    /* Fallback solid navy if image fails to load */
    #0A2540;
  color: #fff;
  overflow: hidden;
}

.hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

/* Top centered copy */
.hero-hub-copy {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-5);
  position: relative;
  z-index: 2;
}

.hero-hub-copy .hero-eyebrow { margin-bottom: 1rem; }

.hero-hub h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  font-weight: 800;
  margin: 0 0 0.85rem;
}

/* Animated gradient on the headline accent.
   Colors accentuated for more visual impact:
     - Bright lime/mint start (#a7f3d0)
     - Vibrant iBoost emerald mid (#2ECC71)
     - Electric cyan/sky end (#06b6d4)
   Animation: slow sweep that lingers on the accented state.
   Instead of a symmetric back-and-forth (0→50→100→50→0), the
   gradient shifts slowly forward and RESETS silently when the
   cycle completes, giving the impression of a continuous sweep
   in one direction. The text is 'always activating.'
   The keyframe uses a linear ease so the color band moves at
   constant speed — more sophisticated than the old ease-in-out
   pulse. */
.hero-headline-gradient {
  background: linear-gradient(90deg,
    #a7f3d0 0%,
    #2ECC71 40%,
    #06b6d4 70%,
    #2ECC71 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes hero-gradient-shift {
  /* Retained as no-op — kept for backward compatibility if any legacy
     selector still references it. The actual animation was removed
     because it distracted from the copy without adding brand value. */
  0%, 100% { background-position: 0% 50%; }
}

.hero-hub .lead {
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto 0.6rem;
}

.hero-hub .hero-microtrust {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.5rem;
  letter-spacing: 0.01em;
}

.hero-hub .hero-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
}

/* -------- HERO CTA — glass-3D hero-sized -------- */

.btn-cta-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(180deg, #4be892 0%, #2ECC71 45%, #22a85d 100%);
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  box-shadow:
    0 0 0 0 rgba(46, 204, 113, 0.7),
    0 14px 40px rgba(46, 204, 113, 0.55),
    0 0 60px rgba(46, 204, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  animation: cta-hero-pulse 2.5s ease-in-out infinite;
  animation-duration: 2.5s !important;
}

.btn-cta-hero:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #fff;
  text-decoration: none;
}

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

@keyframes cta-hero-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(46, 204, 113, 0.7),
      0 14px 40px rgba(46, 204, 113, 0.55),
      0 0 60px rgba(46, 204, 113, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(46, 204, 113, 0),
      0 18px 50px rgba(46, 204, 113, 0.75),
      0 0 80px rgba(46, 204, 113, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  }
}

/* Shine sweep that crosses the button every 5s */
.btn-cta-hero-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%);
  pointer-events: none;
  animation: cta-hero-shine 5s ease-in-out infinite;
  animation-duration: 5s !important;
}

@keyframes cta-hero-shine {
  0%, 55%  { left: -100%; }
  100%     { left: 200%; }
}

.btn-cta-hero-txt { position: relative; z-index: 1; }

.btn-cta-hero-arrow {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.btn-cta-hero:hover .btn-cta-hero-arrow {
  transform: translateX(3px);
}

/* Ghost (secondary) CTA with heavy enough contrast to hold the dark navy */
.btn-ghost-hero {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-ghost-hero:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

/* -------- HUB STAGE — logo + blob + connectors + satellites -------- */

.hub-stage {
  position: relative;
  height: 460px;
  margin: var(--space-5) auto 0;
  max-width: 1100px;
}

.hub-blob-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  filter: blur(1px);
  animation: hub-blob-breath 8s ease-in-out infinite;
  animation-duration: 8s !important;
  z-index: 1;
  pointer-events: none;
}

@keyframes hub-blob-breath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}

.hub-blob {
  width: 100%;
  height: 100%;
  animation: hub-blob-morph 14s ease-in-out infinite;
  animation-duration: 14s !important;
}

@keyframes hub-blob-morph {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(10deg); }
}

/* Connector SVG layer */
.hub-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

@keyframes hub-conn-flow { to { stroke-dashoffset: -20; } }
.hub-conn-flow {
  animation: hub-conn-flow 2s linear infinite;
  animation-duration: 2s !important;
}

@keyframes hub-junction-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.5); opacity: 1; }
}

.hub-junction {
  animation: hub-junction-pulse 2.5s ease-in-out infinite;
  animation-duration: 2.5s !important;
  transform-origin: center;
  transform-box: fill-box;
}

.hub-junction-1 { animation-delay: 0s; }
.hub-junction-2 { animation-delay: 0.35s; }
.hub-junction-3 { animation-delay: 0.7s; }
.hub-junction-4 { animation-delay: 1.05s; }
.hub-junction-5 { animation-delay: 1.4s; }
.hub-junction-6 { animation-delay: 1.75s; }
.hub-junction-7 { animation-delay: 2.1s; }

/* Data packets bouncing back and forth along the curves in CONTINUOUS
   motion. The packet travels from card (0%) to hub (100%) in ~3s with
   ease-in-out pacing (decelerates at hub, accelerates away), then
   returns (100% → 0%). No fade in/out — the packet stays visible at
   all times so the back-and-forth feels uninterrupted. Total round
   trip: 6s per packet. */
@keyframes hub-packet-bounce {
  0%   { offset-distance: 0%; }
  50%  { offset-distance: 100%; }
  100% { offset-distance: 0%; }
}

.hub-packet {
  animation: hub-packet-bounce 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-duration: 6s !important;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

/* Hub flash pulse rings — a subtle green ring that expands and
   fades out at the center of the hub to mark each packet's arrival.
   One ring per packet, staggered to match.

   Uses transform:scale instead of SVG `r` attribute animation because
   `r` animation via CSS has inconsistent browser support (especially
   older Safari). transform:scale is bulletproof. */
@keyframes hub-flash-pulse {
  /* Packet arrives at hub at 48-52% of its 6s cycle (~2.88-3.12s in).
     Flash fires between 45% and 55% (2.7s-3.3s). */
  0%, 45%  { opacity: 0; transform: scale(1); }
  48%      { opacity: 0.85; transform: scale(1); }
  55%      { opacity: 0; transform: scale(1.4); }
  100%     { opacity: 0; transform: scale(1); }
}

.hub-flash {
  animation: hub-flash-pulse 6s ease-out infinite;
  animation-duration: 6s !important;
  transform-origin: 600px 230px;  /* SVG user-space center of the hub */
  transform-box: view-box;
  pointer-events: none;
}

/* Stagger the flash rings to match the packets that trigger them */
.hub-flash-1 { animation-delay: 0s; }
.hub-flash-2 { animation-delay: 0.85s; }
.hub-flash-3 { animation-delay: 1.7s; }
.hub-flash-4 { animation-delay: 2.55s; }

/* -------- Central glass-3D logo hub -------- */

.hub-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 35% 25%, #1e4772 0%, #0A2540 45%, #041426 100%);
  border: 1.5px solid rgba(46, 204, 113, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(46, 204, 113, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.15),
    inset 0 -20px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Top highlight — the wet glass-3D look */
.hub-logo::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 15%;
  right: 15%;
  height: 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0) 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
  pointer-events: none;
  z-index: 2;
}

/* Bottom-right emerald reflection — light bouncing from the blob */
.hub-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 80%, rgba(46, 204, 113, 0.28) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.hub-logo svg {
  width: 115px;
  height: 115px;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Specular sweep that traverses the logo continuously.
   Cycle: 4s (faster than before for more regular rhythm).
   Opacity: fades in at 10%, stays visible until 90%, then fades
   out. This means 80% of the cycle (3.2s out of 4s) has a
   visible sweep, so it's always 'on camera' when the user looks.
   Linear timing gives a constant-speed sweep, more refined than
   the old ease-in-out which accelerated visually.

   Sweep path: starts off-screen left (translateX 0 at left: -40%)
   and crosses to off-screen right (translateX 800%). */
.hub-logo-sweep {
  position: absolute;
  top: -20%;
  left: -40%;
  width: 45%;
  height: 140%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 100%);
  animation: hub-logo-sweep 4s linear infinite;
  animation-duration: 4s !important;
  z-index: 2;
  pointer-events: none;
}

@keyframes hub-logo-sweep {
  0%   { transform: translateX(0) rotate(15deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(800%) rotate(15deg); opacity: 0; }
}

/* -------- Satellite node cards — 5 style variants -------- */

.hub-node {
  position: absolute;
  z-index: 6;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Variant 1 — small dark navy bureau card */
.hub-node-bureau {
  background: linear-gradient(160deg, #143a62, #0c2a47);
  border: 1px solid rgba(46, 204, 113, 0.35);
  border-radius: 12px;
  padding: 10px 13px;
  min-width: 115px;
  color: #fff;
}

.hub-node-k {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #6ee7a8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.hub-node-ico {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(46, 204, 113, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hub-node-ico svg { width: 9px; height: 9px; }

.hub-node-m {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hub-node-s {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

/* Variant 2 — large emerald-filled hero stat card (+92 pts) */
.hub-node-stat-hero {
  background: linear-gradient(160deg, rgba(46, 204, 113, 0.95), rgba(16, 145, 84, 0.92));
  border: 1px solid rgba(110, 231, 168, 0.65);
  border-radius: 14px;
  padding: 13px 18px;
  min-width: 140px;
  color: #fff;
  box-shadow:
    0 14px 32px rgba(46, 204, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hub-node-k-light {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.hub-node-m-big {
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hub-node-s-light {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 4px;
}

/* Variant 3 — electric blue stat card (30 days) */
.hub-node-stat-blue {
  background: linear-gradient(160deg, #1e5fa5, #104682);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 12px;
  padding: 11px 15px;
  min-width: 125px;
  color: #fff;
}

.hub-node-k-blue {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.hub-node-ico-blue {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(56, 189, 248, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hub-node-ico-blue svg { width: 9px; height: 9px; }

.hub-node-m-mid {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Variant 4 — translucent glass flag pill (banks) */
.hub-node-flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  padding: 6px 14px 6px 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.hub-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
}

.hub-flag svg { width: 100%; height: 100%; display: block; }

/* Variant 5 — tiny ghost emerald pill (Experian) */
.hub-node-ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(46, 204, 113, 0.45);
  border-radius: 100px;
  padding: 5px 11px;
  color: #6ee7a8;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hub-node-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2ECC71;
}

/* -------- Positioning (desktop, asymmetric layout) -------- */

.hub-pos-equifax    { top: 30px;   left: 60px; }
.hub-pos-transunion { top: 30px;   right: 60px; }
.hub-pos-stat92     { bottom: 30px; left: 40px; }
.hub-pos-stat30d    { bottom: 80px; right: 40px; }
.hub-pos-flagca     { top: 205px;  left: 10%; }
.hub-pos-flagus     { top: 205px;  right: 8%; }
.hub-pos-experian   { bottom: -8px; left: 50%; transform: translateX(-50%); }

/* -------- Core-attributes ribbon below the hub --------
   Single glassy-3D pill that contains 4 trust attributes
   separated by thin vertical dividers. A subtle shine-sweep
   traverses the ribbon every 6s for life.

   Pattern: unified segmented bar (think macOS status bar or
   Linear's nav) — more premium than individual chips.

   Centering: the .hero-ribbon is a width:max-content pill wrapped
   in auto margins, which centers it within the container without
   needing a flex wrapper. */

.hero-ribbon {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: var(--space-5) auto 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(46, 204, 113, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* Shine sweep — a white streak that crosses the whole ribbon every 6s */
.hero-ribbon-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 30%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%);
  pointer-events: none;
  animation: hero-ribbon-shine 6s ease-in-out infinite;
  animation-duration: 6s !important;
}

@keyframes hero-ribbon-shine {
  0%, 45%  { left: -60%; }
  100%     { left: 160%; }
}

.hero-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* Thin vertical divider between items — skip after the last one */
.hero-ribbon-item:not(:last-of-type)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%);
}

.hero-ribbon-ico {
  width: 16px;
  height: 16px;
  color: #6ee7a8;
  flex-shrink: 0;
}

/* Mobile: collapse into horizontal wrapping chip-pills.
   Each trust item becomes its own rounded pill with a subtle border
   and translucent bg — centered, flex-wrap across 1-2 lines depending
   on viewport width. More modern/fintech than the old stacked list. */
@media (max-width: 899px) {
  .hero-ribbon {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: var(--space-4) auto 0;
    overflow: visible;
  }

  .hero-ribbon-shine { display: none; }

  .hero-ribbon-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .hero-ribbon-item:not(:last-of-type)::after { display: none; }

  .hero-ribbon-ico {
    width: 13px;
    height: 13px;
  }
}

/* -------- Background constellation twinkling -------- */

@keyframes hero-star-twinkle {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.5; }
}

.hh-star {
  animation: hero-star-twinkle 4s ease-in-out infinite;
  animation-duration: 4s !important;
}

/* -------- Mobile: clean grid-based layout --------

   Strategy on mobile:
   - .hub-stage becomes a 2-column CSS grid
   - Row 1: logo + blob (logo spans both columns, centered)
   - Row 2: 4 cards arranged 2x2 (one per grid cell)
   - Flag pills, Experian pill, and connector SVG are hidden —
     they don't survive without the spatial layout
   - All desktop absolute positioning on .hub-pos-* classes is
     nullified so the cards can be auto-placed by the grid. */

@media (max-width: 899px) {
  .hero-hub {
    padding: var(--space-6) 0 var(--space-6);
  }

  /* Hub-stage becomes a 2x2 grid, with row 1 spanning both columns
     for the logo block, and row 2 holding the 4 cards (one per cell). */
  .hub-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    height: auto;
    min-height: 0;
    padding: 0;
    max-width: 360px;
    margin: var(--space-4) auto 0;
  }

  /* Logo block spans both columns in row 1 */
  .hub-logo {
    width: 140px;
    height: 140px;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 0 12px;
    z-index: 10;
  }

  .hub-logo svg { width: 72px; height: 72px; }

  /* Blob is absolute within the grid container, centered behind the
     logo. z-index: 0 puts it behind the logo (which has z:10). */
  .hub-blob-wrap {
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    z-index: 0;
    pointer-events: none;
  }

  /* Hide elements that don't survive without the spatial hub layout */
  .hub-connectors,
  .hub-pos-flagca,
  .hub-pos-flagus,
  .hub-pos-experian {
    display: none;
  }

  /* Reset all desktop absolute positioning on the 4 primary cards.
     They'll be auto-placed by the grid into row 2. */
  .hub-node {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0;
    z-index: 6;
  }

  .hub-pos-equifax,
  .hub-pos-transunion,
  .hub-pos-stat92,
  .hub-pos-stat30d {
    grid-column: span 1;
    min-width: 0;
    width: 100%;
  }

  /* Compress card padding a bit to fit the mobile grid cell */
  .hub-node-stat-hero {
    padding: 10px 12px;
    min-width: 0;
  }
  .hub-node-m-big { font-size: 1.3rem; }

  .hub-node-bureau,
  .hub-node-stat-blue {
    padding: 9px 11px;
    min-width: 0;
  }

  /* CTA row stacks vertically on mobile */
  .btn-cta-hero,
  .btn-ghost-hero {
    padding: 13px 22px;
    font-size: 0.95rem;
  }

  .hero-hub .hero-cta-row {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .hero-hub .hero-cta-row > a {
    width: 100%;
    justify-content: center;
  }
}

/* ---- LEFT column: copy + CTAs + social proof ---- */

.hero-copy { min-width: 0; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: rgba(46, 204, 113, 0.15);
  color: #6ee7a8;
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  animation: dot-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

.hero-dark h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-3);
}

.hero-dark .lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 0 var(--space-2);
}

.hero-dark .lead-price {
  color: #fff;
  font-weight: 700;
}

.hero-microtrust {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Ghost variant for dark backgrounds */
.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  text-decoration: none;
}

/* Social proof strip below CTAs */
.hero-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-avatars { display: flex; }

.hero-avatars .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #0A2540;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
}

.hero-avatars .avatar + .avatar { margin-left: -10px; }

.hero-avatars .avatar-1 { background: linear-gradient(135deg, #2ECC71, #0A2540); }
.hero-avatars .avatar-2 { background: linear-gradient(135deg, #5AC8DC, #113358); }
.hero-avatars .avatar-3 { background: linear-gradient(135deg, #2ECC71, #0d2c4a); }
.hero-avatars .avatar-4 { background: linear-gradient(135deg, #34d399, #0A2540); }

.hero-social-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* ---- RIGHT column: interactive score card + stats ---- */

.hero-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
}


/* =======================================================================
   HERO — PRICING (transparent ladder direction)
   Compact hero for the pricing page. Uses hero-pricing.jpg (blueprint
   skyline generated via Nano Banana Pro) heavily overlaid with a
   centered radial glow to keep the gaze on the H1 and match the
   symmetry of the pricing cards that follow.
   ======================================================================= */

.hero-pricing {
  position: relative;
  padding: var(--space-9) 0 var(--space-10);
  min-height: clamp(440px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* Centered emerald halo — matches the 'Essential' card below sitting center */
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(46, 204, 113, 0.32) 0%, transparent 60%),
    /* Subtle cyan accent behind the title */
    radial-gradient(ellipse 40% 30% at 50% 25%, rgba(6, 182, 212, 0.08) 0%, transparent 55%),
    /* Bottom vignette — smooths the transition into the pricing cards */
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 55%, rgba(4, 20, 38, 0.6) 100%),
    /* Dark navy overlay — 78-82% alpha so the blueprint shows through ~20% */
    linear-gradient(165deg, rgba(10, 37, 64, 0.8) 0%, rgba(14, 45, 77, 0.74) 50%, rgba(4, 20, 38, 0.85) 100%),
    /* Blueprint skyline image (Nano Banana Pro) */
    url('/assets/img/brand/hero-pricing.jpg') center bottom / cover no-repeat,
    /* Fallback solid navy if image fails to load */
    #0A2540;
  color: #fff;
  overflow: hidden;
}

/* Decorative geometric shapes overlay — cover the whole hero.
   Shapes are positioned in corners / edges where they don't compete
   with the H1 in the center. Very low opacity (set inline) for
   subtle depth. */
.hero-pricing-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-pricing .container {
  position: relative;
  z-index: 2;
}

/* Text column — centered */
.hero-pricing-copy {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.hero-pricing-copy .hero-eyebrow {
  margin-bottom: var(--space-2);
}

.hero-pricing h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: #fff;
}

.hero-pricing .lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  margin: 0 auto var(--space-3);
}

.hero-pricing .hero-microtrust {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em;
  margin: 0;
}

/* Mobile: smaller vertical padding, less min-height */
@media (max-width: 640px) {
  .hero-pricing {
    padding: var(--space-7) 0 var(--space-8);
    min-height: 360px;
  }
  .hero-pricing .lead {
    font-size: 0.95rem;
  }
  .hero-pricing .hero-microtrust {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* =======================================================================
   HERO — HOW IT WORKS (pedagogical / score trajectory direction)
   Same compact dark-hero pattern as .hero-pricing, with:
     - hero-how-it-works.jpg (ascending trajectory, Nano Banana Pro)
     - Centered glow (matches the H1 + aligns with the pedagogical theme)
     - Subtle geometric shapes overlay
   ======================================================================= */

.hero-how-it-works {
  position: relative;
  padding: var(--space-9) 0 var(--space-10);
  min-height: clamp(440px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* Centered emerald halo */
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(46, 204, 113, 0.3) 0%, transparent 60%),
    /* Subtle cyan accent behind the title */
    radial-gradient(ellipse 40% 30% at 50% 25%, rgba(6, 182, 212, 0.08) 0%, transparent 55%),
    /* Bottom vignette */
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 55%, rgba(4, 20, 38, 0.6) 100%),
    /* Dark navy overlay — slightly lighter than pricing (78%) so the
       beautiful trajectory curve shows through a bit more */
    linear-gradient(165deg, rgba(10, 37, 64, 0.78) 0%, rgba(14, 45, 77, 0.72) 50%, rgba(4, 20, 38, 0.82) 100%),
    /* Score trajectory image (Nano Banana Pro) */
    url('/assets/img/brand/hero-how-it-works.jpg') center bottom / cover no-repeat,
    /* Fallback */
    #0A2540;
  color: #fff;
  overflow: hidden;
}

.hero-how-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-how-it-works .container {
  position: relative;
  z-index: 2;
}

.hero-how-copy {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero-how-copy .hero-eyebrow {
  margin-bottom: var(--space-2);
}

.hero-how-it-works h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: #fff;
}

.hero-how-it-works .lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 580px;
  margin: 0 auto var(--space-3);
}

.hero-how-it-works .hero-microtrust {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em;
  margin: 0;
}

/* Mobile: smaller vertical padding */
@media (max-width: 640px) {
  .hero-how-it-works {
    padding: var(--space-7) 0 var(--space-8);
    min-height: 360px;
  }
  .hero-how-it-works .lead {
    font-size: 0.95rem;
  }
  .hero-how-it-works .hero-microtrust {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}


/* =======================================================================
   HERO — FAQ (calm, reference-style)
   Same compact dark-hero pattern as .hero-pricing / .hero-how-it-works,
   with:
     - hero-faq.jpg (constellation of interconnected nodes, Creatify)
     - Centered emerald halo aligned with the image's central hub node
     - Slightly lighter dark overlay (74-78%) so the constellation
       shows through more than the pricing skyline — the image is
       already quiet, so we let it breathe.
   ======================================================================= */

.hero-faq {
  position: relative;
  padding: var(--space-9) 0 var(--space-10);
  min-height: clamp(440px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* Centered emerald halo — aligns with the image's central hub node */
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(46, 204, 113, 0.28) 0%, transparent 60%),
    /* Subtle cyan accent behind the title */
    radial-gradient(ellipse 40% 30% at 50% 25%, rgba(6, 182, 212, 0.08) 0%, transparent 55%),
    /* Bottom vignette — smooths transition into the FAQ content below */
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 55%, rgba(4, 20, 38, 0.6) 100%),
    /* Dark navy overlay — 74-78% alpha (lighter than pricing's 80-82%)
       so the constellation is clearly visible through it */
    linear-gradient(165deg, rgba(10, 37, 64, 0.76) 0%, rgba(14, 45, 77, 0.7) 50%, rgba(4, 20, 38, 0.8) 100%),
    /* Constellation image */
    url('/assets/img/brand/hero-faq.jpg') center bottom / cover no-repeat,
    /* Fallback */
    #0A2540;
  color: #fff;
  overflow: hidden;
}

.hero-faq-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-faq .container {
  position: relative;
  z-index: 2;
}

.hero-faq-copy {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.hero-faq-copy .hero-eyebrow {
  margin-bottom: var(--space-2);
}

.hero-faq h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: #fff;
}

.hero-faq .lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto;
}

/* Mobile: smaller vertical padding, less min-height */
@media (max-width: 640px) {
  .hero-faq {
    padding: var(--space-7) 0 var(--space-8);
    min-height: 360px;
  }
  .hero-faq .lead {
    font-size: 0.95rem;
  }
}

/* =======================================================================
   HERO — ABOUT (calm, foundational — experience + horizon)
   Same compact dark-hero pattern as .hero-pricing / .hero-how-it-works /
   .hero-faq. Image: hero-about.jpg (light-trail + foundation plane,
   Creatify). Overlay opacity matches FAQ (74-80%) to let the trail and
   horizon cluster read through clearly.
   ======================================================================= */

.hero-about {
  position: relative;
  padding: var(--space-9) 0 var(--space-10);
  min-height: clamp(440px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* Centered emerald halo — aligns with the image's horizon cluster */
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(46, 204, 113, 0.26) 0%, transparent 60%),
    /* Subtle cyan accent behind the title */
    radial-gradient(ellipse 40% 30% at 50% 25%, rgba(6, 182, 212, 0.08) 0%, transparent 55%),
    /* Bottom vignette */
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 55%, rgba(4, 20, 38, 0.6) 100%),
    /* Dark navy overlay — 74-80% alpha, same as hero-faq since this
       image also wants to breathe (light trail is the focal element) */
    linear-gradient(165deg, rgba(10, 37, 64, 0.76) 0%, rgba(14, 45, 77, 0.7) 50%, rgba(4, 20, 38, 0.8) 100%),
    /* Foundation + horizon image */
    url('/assets/img/brand/hero-about.jpg') center bottom / cover no-repeat,
    /* Fallback */
    #0A2540;
  color: #fff;
  overflow: hidden;
}

.hero-about-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-about .container {
  position: relative;
  z-index: 2;
}

.hero-about-copy {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero-about-copy .hero-eyebrow {
  margin-bottom: var(--space-2);
}

.hero-about h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: #fff;
}

.hero-about .lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin: 0 auto;
}

/* Mobile: smaller vertical padding */
@media (max-width: 640px) {
  .hero-about {
    padding: var(--space-7) 0 var(--space-8);
    min-height: 360px;
  }
  .hero-about .lead {
    font-size: 0.95rem;
  }
}


/* =======================================================================
   ABOUT PAGE SECTIONS — prose blocks, belief card, 'not' grid,
   partner logos, and CTA card. All sit below the hero and share the
   same typography rhythm.
   ======================================================================= */

/* Shared prose block used by "Why iBoost exists" and "Who we are" */
.about-prose {
  max-width: 720px;
}

.about-prose-center {
  margin: 0 auto;
  text-align: center;
}

.about-prose .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
}

.about-prose h2 {
  margin: 0 0 var(--space-3);
}

.about-prose p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-fg-soft);
  margin: 0 0 var(--space-3);
}

.about-prose p:last-child {
  margin-bottom: 0;
}

/* -- Belief section (single emphasized statement on navy) -- */
.about-belief {
  background: linear-gradient(
    180deg,
    #0A2540 0%,
    #0e2d4d 100%
  );
  color: #fff;
  padding: var(--space-10) 0;
}

.about-belief-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.about-belief-card .eyebrow {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.about-belief-lead {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 var(--space-3);
}

.about-belief-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin: 0 auto;
}

/* -- "What iBoost is not" 2x2 grid -- */
.about-not {
  padding: var(--space-10) 0;
}

.about-not-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 960px;
  margin: var(--space-6) auto 0;
}

.about-not-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.about-not-item:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.06);
}

.about-not-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-not-ico svg {
  width: 20px;
  height: 20px;
}

.about-not-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 2px 0 6px;
  line-height: 1.3;
}

.about-not-body p {
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--color-fg-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .about-not-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* -- Who we are (centered prose) -- */
.about-who {
  padding: var(--space-10) 0;
}

/* -- Partner logo row -- */
.about-partners {
  padding: var(--space-8) 0;
}

.about-partners-eyebrow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.about-partners-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  color: #94a3b8;
  margin: 0 auto;
  max-width: 920px;
}

.about-partner-logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.about-partner-logo:hover {
  opacity: 1;
}

.about-partner-logo img {
  height: 100%;
  width: auto;
  display: block;
}

.about-partners-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: var(--space-4) 0 0;
  font-style: italic;
}

/* -- Final CTA card on the About page -- */
.about-cta {
  padding: var(--space-10) 0 var(--space-12);
}

.about-cta-card {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: linear-gradient(
    180deg,
    #0A2540 0%,
    #061A30 100%
  );
  border-radius: var(--radius-xl);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.about-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(46, 204, 113, 0.25), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 0%, rgba(6, 182, 212, 0.1), transparent 60%);
  pointer-events: none;
}

.about-cta-card > * {
  position: relative;
  z-index: 1;
}

.about-cta-card h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  margin: 0 0 var(--space-2);
  color: #fff;
  letter-spacing: -0.015em;
}

.about-cta-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-4);
}

.about-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.about-cta-secondary {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s;
}

.about-cta-secondary:hover {
  color: #fff;
}


/* =======================================================================
   REPORTING SHOWCASE — white passive card showing iBoost's monthly
   report to all 5 major credit bureaus (3 U.S. + 2 Canada).
   Each tile gets a staggered check-mark animation on scroll-into-view.
   Used inside .feature-visual on /how-it-works.html Feature 1.
   ======================================================================= */

.reporting-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1.1rem 1.2rem 1rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.reporting-showcase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.reporting-showcase-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-fg);
  line-height: 1.2;
}

.reporting-showcase-subtitle {
  font-size: 0.73rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Counter chip: "✓ 5 / 5" — the check is emerald, the number counts up. */
.reporting-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 4px 9px;
  border-radius: 100px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.reporting-counter svg {
  width: 12px;
  height: 12px;
}

.reporting-counter-num {
  font-weight: 800;
}

.reporting-counter-total {
  opacity: 0.75;
}

/* ---------- Market group (U.S. or Canada) ---------- */

.reporting-market {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reporting-market-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reporting-market-flag {
  font-size: 0.9rem;
  line-height: 1;
  /* Keep emoji renderable as-is; no filter */
}

/* ---------- Tiles grid ---------- */

.reporting-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.reporting-tiles-3 {
  grid-template-columns: repeat(3, 1fr);
}

.reporting-tiles-2 {
  grid-template-columns: repeat(2, 1fr);
}

.reporting-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.reporting-tile-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-fg);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.reporting-tile-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.4s ease;
}

.reporting-tile-status svg {
  width: 10px;
  height: 10px;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---------- Scroll-into-view animations ----------
   Each of the 5 tiles lights up sequentially (emerald border/background
   on the tile, emerald text on the status, checkmark fades in and pops).
   Total sequence time: ~1.8s. */

.reporting-showcase.is-visible .reporting-tile {
  border-color: rgba(46, 204, 113, 0.4);
  background: var(--color-accent-soft);
}

.reporting-showcase.is-visible .reporting-tile-status {
  color: var(--color-accent-hover);
}

.reporting-showcase.is-visible .reporting-tile-status svg {
  opacity: 1;
  transform: scale(1);
}

/* Stagger: U.S. bureaus first (0.3s, 0.55s, 0.8s), then Canada (1.05s, 1.3s).
   Selectors target the tiles-3 group (U.S.) and tiles-2 group (Canada). */
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(1),
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(1) .reporting-tile-status,
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(1) .reporting-tile-status svg {
  transition-delay: 0.3s;
}
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(2),
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(2) .reporting-tile-status,
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(2) .reporting-tile-status svg {
  transition-delay: 0.55s;
}
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(3),
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(3) .reporting-tile-status,
.reporting-showcase.is-visible .reporting-tiles-3 .reporting-tile:nth-child(3) .reporting-tile-status svg {
  transition-delay: 0.8s;
}
.reporting-showcase.is-visible .reporting-tiles-2 .reporting-tile:nth-child(1),
.reporting-showcase.is-visible .reporting-tiles-2 .reporting-tile:nth-child(1) .reporting-tile-status,
.reporting-showcase.is-visible .reporting-tiles-2 .reporting-tile:nth-child(1) .reporting-tile-status svg {
  transition-delay: 1.05s;
}
.reporting-showcase.is-visible .reporting-tiles-2 .reporting-tile:nth-child(2),
.reporting-showcase.is-visible .reporting-tiles-2 .reporting-tile:nth-child(2) .reporting-tile-status,
.reporting-showcase.is-visible .reporting-tiles-2 .reporting-tile:nth-child(2) .reporting-tile-status svg {
  transition-delay: 1.3s;
}

@media (prefers-reduced-motion: reduce) {
  .reporting-tile,
  .reporting-tile-status,
  .reporting-tile-status svg {
    transition: none;
  }
  .reporting-tile {
    border-color: rgba(46, 204, 113, 0.4);
    background: var(--color-accent-soft);
  }
  .reporting-tile-status {
    color: var(--color-accent-hover);
  }
  .reporting-tile-status svg {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Footer ---------- */

.reporting-showcase-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-fg-soft);
  line-height: 1.4;
}

.reporting-showcase-footer svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .reporting-showcase {
    padding: 1rem;
    gap: 0.75rem;
  }
}


/* =======================================================================
   STEPS SHOWCASE — White passive card with 3 vertically-connected steps.
   Used on /how-it-works.html Feature 2 (Three steps).
   The connecting line runs between the 3 markers for visual continuity.
   ======================================================================= */

.steps-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1.1rem 1.2rem 1rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.steps-showcase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.steps-showcase-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-fg);
  line-height: 1.2;
}

.steps-showcase-subtitle {
  font-size: 0.73rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.steps-showcase-meta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 2px;
}

.steps-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Connecting line drawn behind the markers. Starts at the first marker
   and ends at the last marker. Animated via stroke-dasharray on
   .is-visible. */
.steps-flow::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--color-accent) 0%,
    var(--color-accent) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.steps-showcase.is-visible .steps-flow::before {
  transform: scaleY(1);
}

.steps-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0.6rem 0;
  position: relative;
  z-index: 1;
}

.steps-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.steps-marker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: opacity 0.3s ease;
}

.steps-marker-check {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.steps-marker-check svg {
  width: 14px;
  height: 14px;
}

/* When visible: markers turn emerald one-by-one with stagger. */
.steps-showcase.is-visible .steps-item:nth-child(1) .steps-marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transition-delay: 0.4s;
}
.steps-showcase.is-visible .steps-item:nth-child(1) .steps-marker-dot {
  opacity: 0;
  transition-delay: 0.4s;
}
.steps-showcase.is-visible .steps-item:nth-child(1) .steps-marker-check {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.5s;
}

.steps-showcase.is-visible .steps-item:nth-child(2) .steps-marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transition-delay: 0.9s;
}
.steps-showcase.is-visible .steps-item:nth-child(2) .steps-marker-dot {
  opacity: 0;
  transition-delay: 0.9s;
}
.steps-showcase.is-visible .steps-item:nth-child(2) .steps-marker-check {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.0s;
}

.steps-showcase.is-visible .steps-item:nth-child(3) .steps-marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transition-delay: 1.4s;
}
.steps-showcase.is-visible .steps-item:nth-child(3) .steps-marker-dot {
  opacity: 0;
  transition-delay: 1.4s;
}
.steps-showcase.is-visible .steps-item:nth-child(3) .steps-marker-check {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
  .steps-flow::before,
  .steps-showcase.is-visible .steps-flow::before {
    transform: scaleY(1);
    transition: none;
  }
  .steps-marker,
  .steps-marker-dot,
  .steps-marker-check {
    transition: none;
  }
  .steps-marker {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  .steps-marker-dot { opacity: 0; }
  .steps-marker-check { opacity: 1; transform: scale(1); }
}

.steps-item-body {
  flex: 1;
  min-width: 0;
}

.steps-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 2px;
}

.steps-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-fg);
  letter-spacing: -0.01em;
}

.steps-item-time {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.steps-item-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-fg-soft);
  margin: 0;
}

/* =======================================================================
   FACTORS SHOWCASE — White passive card with 4 horizontal bars showing
   FICO score factor breakdown (35% / 30% / 15% / 20%).
   Bars fill in on scroll-into-view via CSS transition.
   Used on /how-it-works.html Feature 3 (What moves your score).
   ======================================================================= */

.factors-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1.1rem 1.2rem 1rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.factors-showcase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.factors-showcase-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-fg);
  line-height: 1.2;
}

.factors-showcase-subtitle {
  font-size: 0.73rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.factors-showcase-source {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
  text-decoration: none;
  flex-shrink: 0;
  padding-top: 2px;
  letter-spacing: 0.03em;
  transition: color 0.15s ease;
}

.factors-showcase-source:hover {
  color: var(--color-accent-hover);
}

.factors-showcase-source .ext {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-left: 2px;
}

.factors-bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.factors-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 6px;
}

.factors-bar-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-fg);
}

.factors-bar-primary .factors-bar-label {
  font-weight: 700;
}

.factors-bar-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.factors-bar-primary .factors-bar-pct {
  color: var(--color-accent-hover);
}

.factors-bar-track {
  height: 8px;
  background: var(--color-surface);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.factors-bar-fill {
  height: 100%;
  width: 0;
  background: var(--color-border-strong);
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.factors-bar-primary .factors-bar-fill {
  background: var(--color-accent);
}

/* On scroll-into-view: fill each bar to its target width with stagger. */
.factors-showcase.is-visible .factors-bar:nth-child(1) .factors-bar-fill {
  width: var(--factor-target);
  transition-delay: 0.2s;
}
.factors-showcase.is-visible .factors-bar:nth-child(2) .factors-bar-fill {
  width: var(--factor-target);
  transition-delay: 0.4s;
}
.factors-showcase.is-visible .factors-bar:nth-child(3) .factors-bar-fill {
  width: var(--factor-target);
  transition-delay: 0.6s;
}
.factors-showcase.is-visible .factors-bar:nth-child(4) .factors-bar-fill {
  width: var(--factor-target);
  transition-delay: 0.8s;
}

@media (prefers-reduced-motion: reduce) {
  .factors-bar-fill {
    width: var(--factor-target);
    transition: none;
  }
}

.factors-showcase-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-fg-soft);
  line-height: 1.4;
}

.factors-showcase-footer svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.factors-showcase-footer strong {
  color: var(--color-fg);
  font-weight: 700;
}

/* =======================================================================
   MONTHLY SHOWCASE — White passive card with a mini chart showing
   4 milestone dots (M1, M3, M6, M12) and the path drawing between them.
   Visually echoes the hero's score trajectory, in miniature.
   Used on /how-it-works.html Feature 4 (Month-by-month).
   ======================================================================= */

.monthly-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1.1rem 1.2rem 1rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.monthly-showcase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.monthly-showcase-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-fg);
  line-height: 1.2;
}

.monthly-showcase-subtitle {
  font-size: 0.73rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Delta chip in the header: "↗ +92 pts" — same visual language as
   .reporting-counter (emerald-soft pill with check icon). */
.monthly-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 4px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}

.monthly-delta svg {
  width: 12px;
  height: 12px;
}

.monthly-chart {
  width: 100%;
  height: 140px;
  overflow: visible;
}

.monthly-path {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
}

.monthly-dot {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transform-box: fill-box;
}

.monthly-value {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.monthly-showcase.is-visible .monthly-path {
  animation: monthly-draw 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.monthly-showcase.is-visible .monthly-dot-1 {
  animation: monthly-dot-pop 0.4s ease-out 0.6s forwards;
}

.monthly-showcase.is-visible .monthly-dot-2 {
  animation: monthly-dot-pop 0.4s ease-out 1.3s forwards;
}

.monthly-showcase.is-visible .monthly-dot-3 {
  animation: monthly-dot-pop 0.4s ease-out 2.0s forwards;
}

.monthly-showcase.is-visible .monthly-dot-4 {
  animation: monthly-dot-pop 0.4s ease-out 2.7s forwards;
}

.monthly-showcase.is-visible .monthly-dot-4-pulse {
  animation:
    monthly-dot-pop 0.4s ease-out 2.7s forwards,
    monthly-pulse 1.8s ease-out 3.2s infinite;
}

.monthly-showcase.is-visible .monthly-value-1 { opacity: 1; transition-delay: 0.7s; }
.monthly-showcase.is-visible .monthly-value-2 { opacity: 1; transition-delay: 1.4s; }
.monthly-showcase.is-visible .monthly-value-3 { opacity: 1; transition-delay: 2.1s; }
.monthly-showcase.is-visible .monthly-value-4 { opacity: 1; transition-delay: 2.8s; }

@keyframes monthly-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes monthly-dot-pop {
  0%   { opacity: 0; transform: scale(0.3); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes monthly-pulse {
  0%   { r: 7; opacity: 0.45; }
  100% { r: 18; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .monthly-path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .monthly-dot,
  .monthly-value {
    opacity: 1;
    transform: scale(1);
    animation: none;
  }
}

.monthly-showcase-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-fg-soft);
  line-height: 1.4;
}

.monthly-showcase-footer svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Mobile tightening for the 3 new showcases */
@media (max-width: 520px) {
  .steps-showcase,
  .factors-showcase,
  .monthly-showcase {
    padding: 1rem;
    gap: 0.75rem;
  }
}

/* Supporting mini-stats row beneath the scorecard — 3 peer proof cards.
   Each card: icon in a rounded square + short label + subtitle.
   Emerald micro-gradient gives them presence without competing with
   the scorecard white card above. */
.hero-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: var(--space-3) 0 0 auto;
  max-width: 400px;
}

.mini-stat {
  position: relative;
  padding: 0.75rem 0.65rem 0.7rem;
  background: linear-gradient(180deg,
    rgba(46, 204, 113, 0.18) 0%,
    rgba(46, 204, 113, 0.06) 60%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: 10px;
  min-width: 0;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  /* Stack icon above title above subtitle, centered */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Specular sheen on mini-stats for the same glossy hint as the scorecard */
.mini-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  border-radius: 10px 10px 0 0;
}

.mini-stat:hover {
  border-color: rgba(46, 204, 113, 0.55);
  transform: translateY(-1px);
  background: linear-gradient(180deg,
    rgba(46, 204, 113, 0.25) 0%,
    rgba(46, 204, 113, 0.1) 60%,
    rgba(255, 255, 255, 0.04) 100%);
}

.mini-stat-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin-bottom: 0;
}

.mini-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(46, 204, 113, 0.25);
  border-radius: 6px;
  color: #6ee7a8;
  flex-shrink: 0;
}

.mini-stat-icon svg {
  width: 14px;
  height: 14px;
}

/* Title: reserves 2 lines of height so short titles (e.g. '$30 / month')
   and long titles ('Zero hidden fees') render at identical card heights.
   Center-aligned vertically via flex so single-line titles don't stick
   to the top of the 2-line slot. */
.mini-stat-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.25;
  min-height: 2.5em;        /* 2 lines × 1.25 line-height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Subtitle: same 2-line reservation so the 3 cards' bottoms align. */
.mini-stat-sub {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  min-height: 2.8em;        /* 2 lines × 1.4 line-height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Mobile tweaks */
@media (max-width: 899px) {
  .hero-visual { margin-top: var(--space-3); }
  .reporting-showcase, .steps-showcase, .factors-showcase, .monthly-showcase, .hero-mini-stats {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Section base ---------- */
.section {
  padding: var(--space-10) 0;
}

.section-surface { background: var(--color-surface); }

.section-dark {
  background: var(--color-primary);
  color: #fff;
}

.section-dark h2,
.section-dark h3 { color: #fff; }

.section-dark .muted { color: rgba(255, 255, 255, 0.75); }

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-6);
}

.section-header .eyebrow {
  display: inline-block;
  color: var(--color-accent-hover);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.section-header p {
  color: var(--color-fg-soft);
  font-size: 1.1rem;
  margin-top: var(--space-2);
}

/* ---------- Feature rows ---------- */
.features-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 860px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .feature-row.reverse .feature-content { order: 2; }
  .feature-row.reverse .feature-visual { order: 1; }
}

.feature-content .badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--color-accent-soft);
  color: #065f46;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feature-content h3 { font-size: 1.75rem; margin-bottom: var(--space-2); }

/* Accent span inside feature H3 — used to emphasize key words
   (e.g. "every month", "in one place", "you"). Uses the same
   static emerald→cyan gradient as .hero-headline-gradient for
   brand consistency across all the page's main text accents.
   Animation removed for a calmer, less distracting read. */
.feature-accent {
  background: linear-gradient(90deg,
    #a7f3d0 0%,
    #2ECC71 40%,
    #06b6d4 70%,
    #2ECC71 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-content p {
  color: var(--color-fg-soft);
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.feature-content ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; }

.feature-content li {
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: 0.5rem;
  color: var(--color-fg-soft);
}

.feature-content li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.feature-visual {
  /* Dark navy background with subtle emerald + cyan mesh gradient
     to match the hero's visual DNA. Inner showcase cards stay white
     (defined in their own rules) so content reads clearly against
     the dark container. */
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(46, 204, 113, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(6, 182, 212, 0.1), transparent 60%),
    linear-gradient(160deg, #0A2540 0%, #0f2e4d 55%, #0A2540 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(10, 37, 64, 0.12);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mock-screen {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  width: 100%;
  max-width: 340px;
}

.mock-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.mock-screen-title { font-weight: 700; font-size: 0.9rem; }

.mock-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-surface-2);
  font-size: 0.85rem;
}

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

.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.mock-dot.muted { background: var(--color-border-strong); }

.mock-row-text { flex: 1; color: var(--color-fg-soft); }
.mock-row-value { font-weight: 700; color: var(--color-fg); }
.mock-row-value.positive { color: var(--color-accent-hover); }

/* AI tip mock box */
.mock-ai {
  background: linear-gradient(135deg, var(--color-accent-soft), #fff);
  padding: var(--space-2);
  border-radius: var(--radius);
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-fg-soft);
  border: 1px solid var(--color-accent);
}

.mock-ai-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

/* =======================================================================
   PAYMENT SHOWCASE (right column of the Credit Reporting feature row)
   Progressive-reveal animation: 4 payment rows fade in one at a time,
   a counter ticks from 1/12 to 12/12, a circular progress arc fills to
   match. Different primitive from the rolling tickers — this tells a
   'journey over 12 months' story, not a 'live feed' story.
   ======================================================================= */

.payment-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1rem 1.1rem 0.9rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.payment-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

.payment-showcase-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-fg);
}

/* ---------- Counter with circular progress arc ---------- */

.payment-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 700;
}

.payment-counter-arc {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  overflow: visible;
}

/* stroke-dasharray is the full circumference (94.2 = 2πr where r=15).
   Starts at 62.8 (8/12 empty = 4/12 full) because 4 months are already
   visible at t=0; animates down to 0 (full) over the first 65% of the
   cycle, then holds at full during the money shot (65%-97%), then
   snaps back to 62.8 for the next loop.
   !important on animation-duration defeats UA reduced-motion override. */
.payment-counter-arc-fill {
  animation: payment-arc-fill 22s linear infinite;
  animation-duration: 22s !important;
}

@keyframes payment-arc-fill {
  /* 9 steps (4/12 through 12/12), each ~7.2% of cycle.
     stroke-dashoffset values: full circumference 94.2, each /12 step = 7.85. */
  0%,   5%  { stroke-dashoffset: 62.8;  }  /* 4/12 */
  12.5%, 17.5% { stroke-dashoffset: 54.95; }  /* 5/12 */
  20%, 25% { stroke-dashoffset: 47.1;  }  /* 6/12 */
  27.5%, 32.5% { stroke-dashoffset: 39.25; }  /* 7/12 */
  35%, 40% { stroke-dashoffset: 31.4;  }  /* 8/12 */
  42.5%, 47.5% { stroke-dashoffset: 23.55; }  /* 9/12 */
  50%, 55% { stroke-dashoffset: 15.7;  }  /* 10/12 */
  57.5%, 62.5% { stroke-dashoffset: 7.85;  }  /* 11/12 */
  65%,  97%  { stroke-dashoffset: 0;    }  /* 12/12, money-shot hold */
  100% { stroke-dashoffset: 62.8; }  /* reset to 4/12 for next loop */
}

/* ---------- Counter text (number ticks 4 through 12) ---------- */

.payment-counter-text {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.payment-counter-num {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: baseline;
  text-align: right;
  color: var(--color-accent-hover);
}

/* Stacked digits: all occupy the same slot, visible one at a time via
   opacity. Each digit syncs with a step in the list's pan animation. */
.payment-counter-num > span {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  animation: payment-counter-step 22s linear infinite;
  animation-duration: 22s !important;
}

/* Each digit shows at the same moment the corresponding month arrives
   at the top of the viewport. Digit 4 is the initial state (at 0%),
   digit 12 is the final state which gets its own keyframe to hold
   during the money shot. Each step is 7.5% of the cycle = ~1.65s. */
.payment-counter-num > span[data-val="4"]  { animation-delay: 0s;     }
.payment-counter-num > span[data-val="5"]  { animation-delay: 1.65s;  }
.payment-counter-num > span[data-val="6"]  { animation-delay: 3.3s;   }
.payment-counter-num > span[data-val="7"]  { animation-delay: 4.95s;  }
.payment-counter-num > span[data-val="8"]  { animation-delay: 6.6s;   }
.payment-counter-num > span[data-val="9"]  { animation-delay: 8.25s;  }
.payment-counter-num > span[data-val="10"] { animation-delay: 9.9s;   }
.payment-counter-num > span[data-val="11"] { animation-delay: 11.55s; }
.payment-counter-num > span[data-val="12"] { animation-delay: 13.2s;  }

/* Generic step keyframe: each digit appears, holds briefly, then fades
   as the next digit takes over. Digit visible for ~6% of cycle. */
@keyframes payment-counter-step {
  0%   { opacity: 0; transform: translateY(6px); }
  1.5% { opacity: 1; transform: translateY(0);   }
  6%   { opacity: 1; transform: translateY(0);   }
  7.5% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Digit 12 is the money shot — appears at ~60% of cycle (14.52s from
   start, where 13.2s delay + 1.32s fade-in = 14.52s = 66% of 22s) and
   holds through 95% of the cycle before the final reset. */
.payment-counter-num > span[data-val="12"] {
  animation-name: payment-counter-final;
}

@keyframes payment-counter-final {
  0%    { opacity: 0; transform: translateY(6px); }
  1.5%  { opacity: 1; transform: translateY(0);   }
  37%   { opacity: 1; transform: translateY(0);   }
  38.5% { opacity: 0; transform: translateY(-6px); }
  100%  { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Payment list — sliding-stack pan ---------- */

.payment-list-viewport {
  height: 240px;
  overflow: hidden;
  position: relative;
  /* Fade at top and bottom edges so newly-arriving months enter through
     a soft mist rather than appearing at a hard clip line. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* The stack is always fully populated (12 rows newest-first). The
   animation pans the stack UP through the viewport: starts at -464px
   (showing indices 8-11: the 4 OLDEST months — Jun/May/Apr/Mar 2025),
   ends at 0 (showing indices 0-3: the 4 NEWEST — Feb/Jan 2026, Dec/Nov
   2025). Between those states, each new month arrives at the top of
   the viewport one at a time. The stack is NEVER empty — the viewport
   always contains 4 fully-rendered payment rows. No blank state ever.

   Row height 50px + gap 8px = 58px per slot. 12 rows × 58px = 696px
   total stack height, of which 4 × 58 = 232px is visible at a time. */
.payment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: payment-list-pan 22s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-duration: 22s !important;
  will-change: transform;
}

@keyframes payment-list-pan {
  /* Each step is a 7.5% of cycle window: hold for ~6%, slide over ~1.5%.
     Steps sync with the counter keyframe deltas so month arrival and
     counter increment happen together. */
  0%,    5%  { transform: translateY(-464px); }  /* 4/12: Jun/May/Apr/Mar 2025 */
  12.5%, 17.5% { transform: translateY(-406px); }  /* 5/12: add Jul 2025 */
  20%,   25% { transform: translateY(-348px); }  /* 6/12: add Aug 2025 */
  27.5%, 32.5% { transform: translateY(-290px); }  /* 7/12: add Sep 2025 */
  35%,   40% { transform: translateY(-232px); }  /* 8/12: add Oct 2025 */
  42.5%, 47.5% { transform: translateY(-174px); }  /* 9/12: add Nov 2025 */
  50%,   55% { transform: translateY(-116px); }  /* 10/12: add Dec 2025 */
  57.5%, 62.5% { transform: translateY(-58px);  }  /* 11/12: add Jan 2026 */
  65%,   97% { transform: translateY(0);       }  /* 12/12: Feb 2026 at top, HOLD */
  100%  { transform: translateY(-464px); }  /* reset to start, no fade */
}

.payment-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  min-height: 50px;
  flex-shrink: 0;
  /* No per-row opacity/transform — rows are always visible; only their
     POSITION within the viewport changes via the parent .payment-list's
     translateY pan. This is what guarantees the card is never blank. */
}

.payment-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}

.payment-row-month {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-fg);
}

.payment-row-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-hover);
  white-space: nowrap;
  flex-shrink: 0;
}

.payment-row-status svg {
  width: 14px;
  height: 14px;
  padding: 2px;
  background: var(--color-accent-soft);
  border-radius: 50%;
  color: var(--color-accent-hover);
}

.payment-showcase-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 600;
}

.payment-showcase-footer svg {
  width: 13px;
  height: 13px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Screen-reader helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =======================================================================
   BUREAUS SHOWCASE (right column of the 'Full visibility' feature row)
   Three bureau cards stacked with score + delta + range marker.
   Mirrors the payment-showcase / budget-showcase visual language:
   white card, soft shadow, rounded corners, emerald accents.
   ======================================================================= */

.bureaus-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1rem 1.1rem 0.9rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bureaus-showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.bureaus-showcase-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-fg);
}

.bureaus-showcase-period {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.bureaus-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Individual bureau card */
.bureau-card {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bureau-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bureau-card-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
}

.bureau-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.bureau-card-market {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bureau-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.bureau-card-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.bureau-card-score-num {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-fg);
  letter-spacing: -0.02em;
  line-height: 1;
}

.bureau-card-score-max {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 600;
}

.bureau-card-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bureau-card-delta svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.bureau-card-delta-up {
  background: var(--color-accent-soft);
  color: #065f46;
}

.bureau-card-delta-down {
  background: #fee2e2;
  color: #991b1b;
}

/* Score range bar: 300 → 850 scale */
.bureau-card-bar {
  position: relative;
  height: 5px;
  margin-top: 0.15rem;
}

.bureau-card-bar-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #fca5a5 0%,      /* Poor (red) */
    #fcd34d 25%,     /* Fair (amber) */
    #86efac 50%,     /* Good (light green) */
    #2ECC71 75%,     /* Very good (emerald) */
    #059669 100%);   /* Excellent (dark emerald) */
  border-radius: 100px;
  opacity: 0.35;
}

.bureau-card-bar-marker {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(10, 37, 64, 0.15);
}

/* Small scale labels under the bar (shown only on first card to keep
   the layout tight — the second and third inherit the same scale visually) */
.bureau-card-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

/* Tailored-suggestion line on the iBoost Brain card (in the bundle
   showcase). Normal-case muted body text, distinct from the uppercase
   scale labels. */
.bureau-card-note {
  font-size: 0.74rem;
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: 0.1rem;
}

.bureaus-showcase-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.74rem;
  color: var(--color-muted);
  font-weight: 600;
}

.bureaus-showcase-footer svg {
  width: 13px;
  height: 13px;
  color: var(--color-accent-hover);
  flex-shrink: 0;
}

/* Mobile: keep the showcase readable — slightly smaller fonts */
@media (max-width: 640px) {
  .bureaus-showcase {
    padding: 0.9rem 0.9rem 0.8rem;
  }
  .bureau-card-score-num {
    font-size: 1.35rem;
  }
  .bureau-card-market {
    font-size: 0.6rem;
  }
}

/* =======================================================================
   FEATURE ROW — large size variant (used on the AI-powered row) +
   AI tip showcase with rolling-tip animation
   ======================================================================= */

/* Upsize the text in the left column when content needs more visual weight
   (used specifically on the AI-powered feature because the right column is
   a large dashboard mock). */
.feature-content-lg .badge {
  font-size: 0.82rem;
  padding: 0.35rem 0.85rem;
  margin-bottom: var(--space-3);
}

.feature-content-lg h3 {
  font-size: 2.15rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

.feature-content-lg > p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--color-fg-soft);
  margin-bottom: var(--space-3);
}

.feature-content-lg ul { margin-top: var(--space-2); }

.feature-content-lg li {
  font-size: 1.02rem;
  padding-left: 1.9rem;
  margin-bottom: 0.65rem;
  line-height: 1.55;
}

.feature-content-lg li::before {
  top: 0.3rem;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.78rem;
}

/* ---------- AI tip showcase (right column) ---------- */

.ai-tip-showcase {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08),
              0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1rem 1.1rem 0.9rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.ai-tip-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.ai-tip-showcase-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-fg);
}

.ai-tip-showcase-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
}

.ai-tip-showcase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: ai-tip-dot-pulse 2s ease-out infinite;
}

@keyframes ai-tip-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Viewport: the fixed-height window that shows 2 tips at a time.
   overflow:hidden clips the stack that slides upward underneath. */
.ai-tip-viewport {
  height: 240px;
  overflow: hidden;
  position: relative;
  /* Fade out the top and bottom edges so tips seem to enter and exit
     through a mist rather than popping at a hard line. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Stack: the scrolling column of tips. 5 unique tips + 1 duplicate at the
   end (the first tip repeated) to make the loop seamless — when the
   animation wraps from bottom to top, the user sees the same tip land
   twice in a row, which reads as continuous motion rather than a jump.

   Slot height math: each .ai-tip is min-height 96px + flex gap ~9px = 105px
   per slot. Keyframe values are concrete pixels (not calc() + var()) because
   some engines interpolate calc-inside-keyframes unpredictably. */
.ai-tip-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: ai-tip-roll 20s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  /* !important defeats browser UA rules that override animation-duration
     when prefers-reduced-motion: reduce is set (some engines rewrite it
     to 1e-05s, effectively killing the motion). This animation is slow,
     editorial, and vestibular-safe — we run it for all users. */
  animation-duration: 20s !important;
  will-change: transform;
}

@keyframes ai-tip-roll {
  /* 5 tips × 4s each. Each tip holds at the top of the viewport
     for ~3.2s, then slides to the next over ~0.8s. */
  0%,  16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-105px); }
  40%, 56% { transform: translateY(-210px); }
  60%, 76% { transform: translateY(-315px); }
  80%, 96% { transform: translateY(-420px); }
  100%     { transform: translateY(-525px); }
}

/* Individual tip */
.ai-tip {
  background: linear-gradient(135deg,
    var(--color-accent-soft),
    rgba(209, 250, 229, 0.35));
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  flex-shrink: 0;
  /* Fixed height so the translateY math is stable. */
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ai-tip-cat {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #065f46;
}

.ai-tip-metric {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.ai-tip-metric-positive {
  background: var(--color-accent-soft);
  color: #065f46;
}

.ai-tip-metric-neutral {
  background: var(--color-surface-2);
  color: var(--color-fg-soft);
}

.ai-tip-metric-warning {
  background: #fef3c7;
  color: #854d0e;
}

.ai-tip p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-fg);
}

/* Variant border-tints for visual variety across categories */
.ai-tip-reminder {
  background: linear-gradient(135deg, #e0f2fe, rgba(224, 242, 254, 0.35));
  border-color: #7dd3fc;
}
.ai-tip-reminder .ai-tip-cat { color: #075985; }

.ai-tip-strategy {
  background: linear-gradient(135deg, #f3e8ff, rgba(243, 232, 255, 0.35));
  border-color: #c4b5fd;
}
.ai-tip-strategy .ai-tip-cat { color: #5b21b6; }

.ai-tip-opportunity {
  background: linear-gradient(135deg, var(--color-accent-soft), rgba(209, 250, 229, 0.35));
  border-color: var(--color-accent);
}

.ai-tip-warning {
  background: linear-gradient(135deg, #fef3c7, rgba(254, 243, 199, 0.35));
  border-color: #fcd34d;
}
.ai-tip-warning .ai-tip-cat { color: #92400e; }

/* Footer note beneath the viewport */
.ai-tip-showcase-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 600;
}

.ai-tip-showcase-footer svg {
  width: 13px;
  height: 13px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Reduced motion: keep the rolling animation (it's slow, editorial, and
   doesn't create vestibular issues) but freeze the pulsing dot, which
   is the kind of rapid flash reduced-motion users typically want off. */
@media (prefers-reduced-motion: reduce) {
  .ai-tip-showcase-dot {
    animation: none;
  }
}

/* =======================================================================
   PRICING — 3 tiers: Free (lead magnet), Essential (featured), Complete
   ======================================================================= */

.pricing-wrap {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.currency-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--color-surface-2);
  border-radius: 100px;
  margin-bottom: var(--space-4);
}

.currency-toggle button {
  padding: 0.5rem 1.25rem;
  border: 0;
  background: transparent;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.currency-toggle button.active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ---------- 3-card grid ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 1180px;
  margin: 0 auto;
  /* Align items to top; featured card scales up so we want tops aligned */
  align-items: start;
}

@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 0;
    /* Featured card is ~10% wider. On desktop cards butt against each
       other so the elevated middle card reads as the 'anchor'. */
    align-items: stretch;
  }
}

/* ---------- Base card styling ---------- */

.pricing-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              transform 0.2s ease;
}

@media (min-width: 900px) {
  .pricing-card {
    border-radius: 0;
  }

  .pricing-card:first-child {
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }

  .pricing-card:last-child {
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }
}

.pricing-card:hover {
  border-color: var(--color-border-strong);
}

/* ---------- Free tier (lead magnet — subdued) ---------- */

.pricing-card-free {
  background: var(--color-surface);
  color: var(--color-fg-soft);
}

.pricing-card-free h3 {
  color: var(--color-fg);
}

.pricing-card-free .price-amount {
  color: var(--color-fg);
}

/* ---------- Essential tier (featured — elevated + bordered) ---------- */

.pricing-card-featured {
  border: 2px solid var(--color-accent);
  background: #fff;
  box-shadow: 0 12px 32px rgba(46, 204, 113, 0.15),
              0 2px 8px rgba(10, 37, 64, 0.06);
  z-index: 1;
}

@media (min-width: 900px) {
  .pricing-card-featured {
    /* On desktop the featured card pops above the two side cards visually.
       It keeps rounded corners on all sides and lifts slightly. */
    border-radius: var(--radius-xl) !important;
    transform: translateY(-12px);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
}

.pricing-card-featured:hover {
  border-color: var(--color-accent-hover);
  transform: translateY(-14px);
}

@media (max-width: 899px) {
  .pricing-card-featured:hover {
    transform: translateY(-2px);
  }
}

/* ---------- Complete tier (premium — primary color border) ---------- */

.pricing-card-complete {
  border-color: var(--color-primary);
}

.pricing-card-complete .price-amount {
  color: var(--color-primary);
}

/* ---------- Featured badge ---------- */

.pricing-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* ---------- Shared card content styles ---------- */

.pricing-card h3 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pricing-card .price-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 var(--space-1);
  flex-wrap: wrap;
}

.price-amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-currency {
  font-size: 1rem;
  color: var(--color-muted);
  font-weight: 600;
}

.price-period {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.pricing-tagline {
  font-size: 0.9rem;
  color: var(--color-fg-soft);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
  min-height: 2.6em;  /* matches two lines at 1.45 line-height so all 3 tiers align vertically */
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  flex-grow: 1;
}

.pricing-card li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  color: var(--color-fg-soft);
  border-bottom: 1px solid var(--color-surface-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

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

.pricing-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Muted rows: excluded features on the Free tier. Displayed as struck-out
   grey items so the user sees what they're NOT getting — key UX signal
   for conversion. */
.pricing-card-free li.pricing-item-muted {
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(100, 116, 139, 0.4);
}

.pricing-card-free li.pricing-item-muted::before {
  content: '−';
  background: var(--color-border-strong);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

/* Strong-emphasis items in Complete card (bolded exclusive features) */
.pricing-card-complete li strong {
  color: var(--color-primary);
  font-weight: 700;
}

.pricing-card-complete li sup,
.pricing-card-essential li sup {
  color: var(--color-muted);
  font-size: 0.7em;
  margin-left: 2px;
}

/* ---------- Outline button variant for Free CTA ---------- */

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

.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Disclaimer ---------- */

.pricing-disclaimer {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-top: var(--space-4);
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.pricing-disclaimer sup { font-weight: 700; margin-right: 2px; }

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 680px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .testimonials-grid { grid-template-columns: repeat(4, 1fr); } }

.testimonial {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* "Illustrative" flag — appears top-right of each testimonial card.
   Signals clearly that the quote is a composed scenario from beta
   patterns, not a verbatim real user quote. FTC-aware. */
.testimonial-flag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.testimonial-stars {
  color: #f59e0b;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

.testimonial-quote {
  color: var(--color-fg-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: var(--space-3);
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-name { font-weight: 700; font-size: 0.9rem; }

.testimonial-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* ---------- FAQ ---------- */

.faq-section {
  /* Matches the default .section padding (var(--space-10) 0) so the
     gap between the FAQ and the next section reads as consistent with
     the rest of the page. Internal FAQ compaction (tighter question
     rows, smaller question font, tighter subtitle spacing) is applied
     lower in this block and stays — it saves vertical space inside the
     list without disrupting the page's section rhythm. */
  padding: var(--space-10) 0;
}

.faq-section .container {
  max-width: 1320px;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.faq-section .section-header {
  max-width: 760px;
  margin-bottom: var(--space-4);
}

.faq-section .section-header p {
  font-size: 1rem;
  color: var(--color-fg-soft);
  line-height: 1.55;
}

/* Sub-section header above each faq-list group */
.faq-subtitle {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 auto var(--space-1);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
  max-width: 1200px;
}

.faq-subtitle-spacer {
  margin-top: var(--space-4);
}

/* FAQ list container — single column on mobile, 2-column grid on desktop.
   Column-gap separates the two columns; row-gap is 0 because the border-bottom
   on each item handles vertical separation. */
.faq-list {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 900px) {
  .faq-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
  }
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  min-width: 0;  /* allow answers to wrap in narrow grid columns */
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 0.8rem 0;
  background: transparent;
  border: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-fg);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  line-height: 1.4;
}

.faq-question::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"]::after { content: '−'; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer[data-open="true"] {
  max-height: 1200px;
  padding-bottom: 0.9rem;
}

.faq-answer p {
  color: var(--color-fg-soft);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-answer a:hover { color: var(--color-accent-hover); }

/* =======================================================================
   WHY IBOOST — differentiators strip (used on pricing page)
   4-card grid showing what makes iBoost different, without naming
   competitors directly. Uses light surface to contrast with the dark
   hero above and the final CTA below.
   ======================================================================= */

.why-iboost {
  background: #fff;
}

.why-iboost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 1040px;
  margin: 0 auto;
}

.why-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.why-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.08);
}

.why-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-card-icon svg {
  width: 24px;
  height: 24px;
}

.why-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin: 0;
  line-height: 1.25;
}

.why-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-fg-soft);
  margin: 0;
}

/* Mobile: stack to single column */
@media (max-width: 820px) {
  .why-iboost-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-width: 520px;
  }
  .why-card {
    padding: var(--space-3);
  }
  .why-card h3 {
    font-size: 1.05rem;
  }
  .why-card p {
    font-size: 0.9rem;
  }
}

/* =======================================================================
   FINAL CTA — single-card close bookending the hero's dark-navy look
   ======================================================================= */

.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  /* Matches the standard .section padding (var(--space-10) vertical)
     so this final CTA has the same visual rhythm as the rest of the
     page. Previous value had a typo: var(--space-9) doesn't exist in
     the scale, which silently fell back to 0 — that's why the text
     felt cramped at the bottom. */
  padding: var(--space-10) var(--space-3);
  /* Same mesh-gradient grammar as the hero + how-it-works, slightly
     calmer so it reads as a close, not a second hero. */
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(46, 204, 113, 0.25), transparent 60%),
    radial-gradient(ellipse 45% 40% at 90% 0%,   rgba(56, 189, 248, 0.12), transparent 60%),
    linear-gradient(160deg, #0A2540 0%, #0f2e4d 60%, #0A2540 100%);
  color: #fff;
}

.final-cta-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  max-width: 760px;  /* narrow on purpose — this is a close, not a broadcast */
}

.final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.4);
  border-radius: 100px;
  color: #6ee7a8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.final-cta-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ECC71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: final-cta-dot-pulse 2s ease-out infinite;
}

@keyframes final-cta-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.final-cta h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0.5rem 0 0.5rem;
  font-weight: 800;
}

/* Accent line in the headline — the action-oriented part gets an emerald
   underline glow to subtly draw the eye to 'thirty seconds'. */
.final-cta-accent {
  color: #6ee7a8;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg,
    rgba(46, 204, 113, 0) 0%,
    rgba(46, 204, 113, 0.5) 10%,
    rgba(46, 204, 113, 0.5) 90%,
    rgba(46, 204, 113, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
}

.final-cta-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 520px;
  margin: 0 0 var(--space-4);
}

.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* The primary CTA inherits .btn .btn-primary .btn-lg .btn-cta-glow styles
   already defined. The arrow is inline SVG that scoots right on hover. */

.final-cta-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.75rem;
  font-size: 1.05rem;
}

.final-cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.final-cta-actions .btn:hover .final-cta-arrow {
  transform: translateX(3px);
}

/* The quiet 'Start free instead' alternate path — present but low-volume.
   Rescues users who were almost out the door. */
.final-cta-alt {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.final-cta-alt a {
  color: #6ee7a8;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  transition: color 0.15s ease;
}

.final-cta-alt a:hover {
  color: #86efac;
}

/* =======================================================================
   HOW-IT-WORKS — 30-day timeline on the /how-it-works.html page.
   Numbered ordered-list variant of the 'how' step cards used on the
   homepage, but arranged vertically with a connecting emerald rail.
   ======================================================================= */

.how-timeline {
  list-style: none;
  counter-reset: how-step-counter;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  position: relative;
}

/* The emerald rail that visually connects the 5 steps. Sits behind each
   step's left-side timestamp pill and the number disc. */
.how-timeline::before {
  content: '';
  position: absolute;
  left: 85px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(46, 204, 113, 0.5) 0%,
    rgba(46, 204, 113, 0.2) 100%);
  border-radius: 2px;
}

.how-step {
  position: relative;
  counter-increment: how-step-counter;
  display: grid;
  grid-template-columns: 72px 32px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
}

/* Number disc — emerald filled circle with white digit that also serves
   as the timeline's visual anchor. */
.how-step::before {
  content: counter(how-step-counter);
  grid-column: 2;
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow:
    0 0 0 4px var(--color-surface),
    0 0 0 5px rgba(46, 204, 113, 0.2);
  position: relative;
  z-index: 1;
}

.how-step-time {
  grid-column: 1;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
  padding-top: 0.5rem;
  line-height: 1.3;
}

.how-step-fact {
  grid-column: 3;
  font-weight: 700;
  color: var(--color-fg);
  font-size: 1.02rem;
  line-height: 1.35;
  padding-top: 0.4rem;
}

.how-step > p {
  grid-column: 3;
  color: var(--color-fg-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0.3rem 0 0;
}

.how-step-final::before {
  background: var(--color-primary);
  box-shadow:
    0 0 0 4px var(--color-surface),
    0 0 0 5px rgba(10, 37, 64, 0.25);
}

@media (max-width: 640px) {
  .how-timeline {
    padding-left: 0.5rem;
  }
  .how-timeline::before {
    left: 16px;
  }
  .how-step {
    grid-template-columns: 32px 1fr;
    gap: 0.75rem;
  }
  .how-step::before { grid-column: 1; }
  .how-step-time {
    grid-column: 2;
    text-align: left;
    padding-top: 0.6rem;
    font-size: 0.72rem;
  }
  .how-step-fact {
    grid-column: 2;
    font-size: 0.98rem;
  }
  .how-step > p { grid-column: 2; }
}

/* =======================================================================
   FOOTER — brand column + 3 link columns + two-line bottom bar
   ======================================================================= */

/* =======================================================================
   SITE FOOTER — polished 2-section layout
   ----------------------------------------------------------------------
   Section 1 (main): light surface, 5-column links grid, brand with
     social icons, emerald top border as the brand tie to the rest of
     the site (matches the emerald throughout CTAs, pills, etc.)
   Section 2 (fine print): dark navy bar, copyright + compliance
     badges + back-to-top, footnotes in small text.
   Responsive: 5 cols → 2 cols (640-980px) → 1 col stack (<640px).
   ======================================================================= */

.site-footer {
  position: relative;
  color: var(--color-fg-soft);
  font-size: 0.9rem;
  margin-top: auto; /* sticky footer pattern on short pages (if body is flex) */
}

/* ---------- SECTION 1: Main footer (light surface) ---------- */

.footer-main {
  background: var(--color-surface);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-6) 0 var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* Tablet: 2 columns (brand full-width on top, then 4 link cols in 2x2) */
@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Desktop: 5 columns (brand takes ~2.4x, then 4 link cols) */
@media (min-width: 980px) {
  .footer-grid {
    grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr;
    gap: var(--space-5);
  }
  .footer-brand {
    grid-column: auto;
  }
}

/* ---------- Brand column ---------- */

.footer-brand {
  min-width: 0;
  max-width: 380px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-bottom: 0.85rem;
  transition: opacity 0.15s ease;
}

.footer-logo:hover { opacity: 0.85; }

.footer-logo-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(10, 37, 64, 0.08));
}

.footer-logo-wordmark {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  line-height: 1;
}

.footer-tagline {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 1rem;
}

/* Market chips row */
.footer-market-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 1rem;
}

.footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-fg-soft);
  letter-spacing: 0.02em;
}

.footer-chip-flag {
  width: 14px;
  height: 10px;
  border-radius: 1px;
  overflow: hidden;
  flex-shrink: 0;
}

.footer-chip-active {
  background: var(--color-accent-soft);
  border-color: #86efac;
  color: #065f46;
  padding-left: 7px;
}

.footer-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: footer-chip-pulse 2.2s ease-out infinite;
}

@keyframes footer-chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); }
  70%  { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 0.5rem;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.footer-social a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.footer-social svg {
  width: 15px;
  height: 15px;
}

/* ---------- Link columns ---------- */

.footer-col {
  min-width: 0;
}

.footer-col-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.footer-col li:last-child {
  margin-bottom: 0;
}

.footer-col a {
  color: var(--color-fg-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--color-primary);
}

/* Accent variant — used on the 'Trust & compliance ↗' link to draw the
   eye, since this is the most-linked page for regulators/attorneys. */
.footer-col-link-accent {
  color: var(--color-accent-hover) !important;
  font-weight: 600;
}

.footer-col-link-accent:hover {
  color: var(--color-primary) !important;
}

/* "Coming soon" link variant — visually muted, not-yet-active */
.footer-col-link-soon {
  color: var(--color-muted) !important;
  cursor: default;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer-col-link-soon::after {
  content: 'Soon';
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  border-radius: 100px;
}

/* Support column: hours line */
.footer-col-hours {
  font-size: 0.74rem;
  color: var(--color-muted);
  margin-top: 0.3rem;
  line-height: 1.4;
  font-style: italic;
}

/* ---------- SECTION 2: Fine print bar (dark navy) ---------- */

.footer-fineprint {
  background: #0A2540;
  color: rgba(255, 255, 255, 0.58);
  padding: var(--space-3) 0;
  font-size: 0.78rem;
  line-height: 1.55;
}

.footer-fineprint-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: 0.6rem;
}

.footer-copyright {
  margin: 0;
  flex-shrink: 0;
}

.footer-copyright-sep {
  margin: 0 0.4rem;
  color: rgba(255, 255, 255, 0.2);
}

.footer-copyright-tag {
  color: #6ee7a8;
  font-weight: 600;
}

/* Compliance badges + back to top */
.footer-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.footer-badge svg {
  width: 13px;
  height: 13px;
  color: #6ee7a8;
}

.footer-totop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.footer-totop:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.footer-totop svg {
  width: 11px;
  height: 11px;
}

@media (max-width: 820px) {
  .footer-fineprint-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-badges {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile (<640px): center everything in the footer — brand, columns,
   fineprint. Users browsing on phone read center-aligned more
   comfortably and the vertical stack needs a strong shared axis. */
@media (max-width: 639px) {
  .footer-grid {
    text-align: center;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }
  .footer-brand .footer-tagline {
    text-align: center;
  }
  .footer-market-chips,
  .footer-social {
    justify-content: center;
  }
  .footer-col-title {
    text-align: center;
  }
  .footer-col ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-col-hours {
    text-align: center;
  }
  /* Soon badges next to link labels — make sure they stay centered */
  .footer-col-link-soon {
    justify-content: center;
  }
}

/* ---------- Auth pages ---------- */
.auth-wrap {
  max-width: 420px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-3);
}

.auth-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
}

.auth-card .muted {
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.form-group { margin-bottom: var(--space-2); }

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-group input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}

.form-group input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}

/* Small helper text under a form input (e.g., format hints).
   Used on the signup phone field to show the expected (###) ###-####
   format. Sits flush against the bottom of the input. */
.form-group .form-hint {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.3;
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  margin-bottom: var(--space-1);
  padding: 0.7rem 1rem;
  font-weight: 500;
}

.btn-oauth:hover {
  background: var(--color-surface);
  text-decoration: none;
}

.btn-oauth[disabled],
.btn-oauth[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.alert {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

.alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.auth-footer {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* ---------- Legal pages ---------- */
.legal-wrap {
  max-width: 760px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-3);
}

.legal-wrap h1 { font-size: 2rem; margin-bottom: var(--space-1); }

.legal-wrap .legal-updated {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}

.legal-wrap h2 {
  font-size: 1.35rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.legal-wrap p {
  color: var(--color-fg-soft);
  line-height: 1.7;
}

.legal-notice {
  padding: var(--space-3);
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  color: #78350f;
  margin-bottom: var(--space-4);
}

/* On auth pages (signup/login/etc.), let the header + footer span full width
   to match the auth-split layout. Activated when <body> has .auth-page class.

   EXCEPTION: login.html uses 'auth-page iboost-mm has-dark-hero' to get the
   homepage-style transparent dark header. That layout expects the standard
   centered .container width (matching marketing pages), so we explicitly
   exclude .has-dark-hero from this full-width treatment. */
body.auth-page:not(.has-dark-hero) .site-header .container,
body.auth-page:not(.has-dark-hero) .site-footer .container {
  max-width: 100%;
  padding: 0 var(--space-3);
}

@media (min-width: 900px) {
  body.auth-page:not(.has-dark-hero) .site-header .container,
  body.auth-page:not(.has-dark-hero) .site-footer .container {
    padding: 0 var(--space-4);
  }
}

/* ---------- Split signup layout (YMYL-focused) ---------- */
.signup-split {
  /* Full-width layout — no 1140px cap on the signup page */
  max-width: 100%;
  margin: 0;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 900px) {
  .signup-split {
    grid-template-columns: 1fr 1fr;  /* Equal weight — left column gets
                                        more real estate now that it has
                                        richer decorative content. */
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: stretch;            /* children stretch to match tallest */
  }
}

/* On ultra-wide screens, cap both columns at the same width so the
   split stays visually 50/50 at any viewport size. Without this, the
   content gets absurdly stretched on 2560px+ monitors. */
@media (min-width: 1600px) {
  .signup-split {
    grid-template-columns: minmax(0, 720px) minmax(0, 720px);
    justify-content: center;  /* centers the pair when viewport > 1440px total */
  }
}

/* Left column: brand + benefits + trust. A mesh of three radial gradients
   creates organic depth, and a low-opacity upward-curve SVG over the top
   reinforces the "credit improving" metaphor without being literal. */
.signup-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background:
    /* Emerald glow from bottom-left (where the growth arc starts) */
    radial-gradient(circle at 10% 95%, rgba(46, 204, 113, 0.22) 0%, transparent 55%),
    /* Cool cyan accent top-right */
    radial-gradient(circle at 95% 5%, rgba(90, 200, 220, 0.12) 0%, transparent 50%),
    /* Soft highlight mid-right */
    radial-gradient(circle at 85% 50%, rgba(46, 204, 113, 0.08) 0%, transparent 55%),
    /* Base: diagonal deep navy gradient */
    linear-gradient(165deg, #0A2540 0%, #0d2c4a 50%, #041628 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  /* Stretch to match the form column height */
  height: 100%;
}

.signup-intro::before {
  /* Decorative credit-improving motif: ascending curve + data-point dots,
     anchored to the lower portion of the column where there's no dense
     text. A mask fades the motif to transparent near the top so even the
     extreme tip of the curve never competes with the headline or intro.
     Inlined as a data URI — no extra network request. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Roughly the lower 55% of the column — keeps the logo, h1, intro
     paragraph, and the first couple of benefit list items in a clean zone. */
  height: 55%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='xMaxYMax slice'><g stroke='%23ffffff' stroke-width='1' stroke-opacity='0.05' fill='none'><line x1='0' y1='120' x2='400' y2='120'/><line x1='0' y1='240' x2='400' y2='240'/><line x1='0' y1='360' x2='400' y2='360'/></g><path d='M -40 380 Q 100 320 200 220 T 440 30' fill='none' stroke='%232ECC71' stroke-width='2.5' stroke-opacity='0.7' stroke-linecap='round'/><path d='M -20 395 Q 80 350 160 260 T 420 100' fill='none' stroke='%232ECC71' stroke-width='1.5' stroke-opacity='0.3' stroke-linecap='round'/><circle cx='30' cy='350' r='3.5' fill='%232ECC71' fill-opacity='0.5'/><circle cx='90' cy='310' r='4.5' fill='%232ECC71' fill-opacity='0.65'/><circle cx='170' cy='240' r='5.5' fill='%232ECC71' fill-opacity='0.8'/><circle cx='260' cy='150' r='6.5' fill='%232ECC71' fill-opacity='0.9'/><circle cx='370' cy='55' r='9' fill='%232ECC71' fill-opacity='0.95'/></svg>");
  background-size: cover;
  background-position: bottom right;
  background-repeat: no-repeat;
  opacity: 0.6;
  /* Fade the motif to transparent as it approaches the top edge so the
     decoration never reaches the text zone even on short columns. */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.85) 60%,
    #000 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.85) 60%,
    #000 100%);
  pointer-events: none;
}

.signup-intro > * { position: relative; z-index: 1; }

/* Logo on dark background — small and compact */
.signup-intro .logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;      /* don't stretch to full column width */
  line-height: 0;
}

.signup-intro .logo img {
  height: 28px;
  width: auto;
  display: block;
  /* Convert to white then tone down slightly so it doesn't glare on the
     dark navy. 0.92 opacity via drop-shadow is smoother than a brightness
     hit because it keeps the anti-aliasing crisp. */
  filter: brightness(0) invert(1) opacity(0.92);
}

.signup-intro h1 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: var(--space-1) 0 var(--space-1);
}

.signup-intro .intro-lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* The text content lives in a single <span> so inline <strong>s inside don't
   become sibling flex items alongside the ::before bullet. */
.benefit-list li > span {
  flex: 1;
  min-width: 0;
}

.benefit-list li > span strong {
  font-weight: 700;
  color: #fff;
}

.benefit-list li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--color-accent);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* Trust row on dark intro — regulator / security badges */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.trust-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Right column: form card */
.signup-form-col {
  min-width: 0;          /* allow grid item to shrink */
  height: 100%;          /* stretch to match intro column */
  display: flex;         /* so inner card can fill full height */
  flex-direction: column;
}

.signup-form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  flex: 1;               /* fill the column */
}

@media (min-width: 900px) {
  .signup-form-card {
    padding: var(--space-5);
  }
}

/* Form content lives in a centered column — card stays wide with breathing
   room on either side, but form controls stay at a readable/clickable width. */
@media (min-width: 900px) {
  .signup-form-card > * {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

.signup-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.signup-form-header h2 {
  font-size: 1.35rem;
  margin: 0;
}

/* Reassurance strip above the form */
.signup-reassurance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: var(--space-3);
  background: var(--color-accent-soft);
  border: 1px solid #a7f3d0;
  border-radius: var(--radius);
  color: #065f46;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
}

.signup-reassurance svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* ---------- Password strength criteria ---------- */
.password-criteria {
  margin: 0.5rem 0 var(--space-2);
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.password-criteria-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-fg);
  font-size: 0.82rem;
}

.password-criteria ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  justify-content: space-between;
}

/* When there's room, the 5 pills spread evenly across the row. When space
   gets tight (very narrow form column), they wrap and the space-between
   distribution falls back to normal left-aligned gaps. */

.password-criteria li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  transition: color 0.15s ease;
  line-height: 1.3;
  white-space: nowrap;
}

.password-criteria li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.password-criteria li[data-met="true"] {
  color: var(--color-accent-hover);
  font-weight: 500;
}

.password-criteria li[data-met="true"]::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ---------- Consent checkbox ---------- */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: var(--space-2) 0;
  font-size: 0.88rem;
  color: var(--color-fg-soft);
  line-height: 1.45;
}

.consent-row input[type='checkbox'] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.consent-row label {
  cursor: pointer;
  user-select: none;
}

.consent-row a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 500;
}

/* ---------- Fine-print / YMYL disclosure block ---------- */
.legal-fineprint {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-2);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.legal-fineprint strong { color: var(--color-fg-soft); }

.legal-fineprint p { margin: 0 0 0.4rem; }
.legal-fineprint p:last-child { margin-bottom: 0; }

.legal-fineprint a {
  color: var(--color-muted);
  text-decoration: underline;
}

/* ---------- Authored / reviewed block ---------- */
.reviewed-by {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.reviewed-by-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* Submit disabled state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:disabled:hover {
  background: var(--color-accent);
  transform: none;
}

/* ---------- Signup intro extras: score card, security, FAQ ---------- */

/* Score-gain projection card (on dark intro) */
.score-projection {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.score-projection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.score-projection-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-projection-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}

.score-projection-delta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.score-projection-delta .from {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.score-projection-delta .arrow {
  color: var(--color-accent);
  font-size: 1.2rem;
}

.score-projection-delta .to {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Mini gradient bar to show movement */
.score-projection-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
}

/* Bar fill starts collapsed (width 0) and grows to its final width
   when .score-projection gets .is-visible (added by hero-counter.js
   when the card enters the viewport). Duration 3500ms matches the
   count-up animation on the +92 pts badge and the 580->672 score,
   so the bar, the badge, and the score all fill in lockstep.

   The final width (75%) is a visual metaphor for 'progress toward
   excellent credit on a full score range' — not a literal 92/100 —
   and was the pre-animation static value. Math happens to land close
   enough (92/122 ≈ 75%) that no semantic change is needed. */
.score-projection-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: linear-gradient(90deg, #f59e0b 0%, var(--color-accent) 70%, #059669 100%);
  border-radius: 100px;
  transition: width 3500ms cubic-bezier(0.33, 1, 0.68, 1);
  /* cubic-bezier(0.33, 1, 0.68, 1) ≈ easeOutCubic — matches the JS
     count-up easing so the bar's growth rate feels coordinated with
     the number ticking up */
}

.score-projection.is-visible .score-projection-bar-fill {
  width: 75%;
}

/* Reduced-motion: skip the animation, bar appears at final width
   immediately. Mirrors the hero-counter.js reduced-motion handling. */
@media (prefers-reduced-motion: reduce) {
  .score-projection-bar-fill {
    width: 75%;
    transition: none;
  }
}

.score-projection-caveat {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin: 0;
}

/* Security deep-dive block */
.security-block {
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
}

.security-block h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 0.6rem;
  font-weight: 700;
}

.security-block h3 svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.security-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.security-block li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

.security-block li > span {
  flex: 1;
  min-width: 0;
}

.security-block li > span strong {
  color: #fff;
  font-weight: 600;
}

.security-block li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 3px;
  background: rgba(46, 204, 113, 0.2);
  border: 1px solid var(--color-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ECC71' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}

/* FAQ mini-accordion on dark intro */
.faq-mini {
  display: flex;
  flex-direction: column;
}

.faq-mini-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

.faq-mini-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-mini-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-mini-question {
  width: 100%;
  text-align: left;
  padding: 0.7rem 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.faq-mini-question::after {
  content: '+';
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
}

.faq-mini-question[aria-expanded="true"]::after {
  content: '−';
}

.faq-mini-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-mini-answer[data-open="true"] {
  max-height: 400px;
}

.faq-mini-answer p {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin: 0 0 0.7rem;
}

/* Hide heavy extras on narrow viewports to keep mobile signup lean */
@media (max-width: 899px) {
  .signup-intro .score-projection,
  .signup-intro .security-block,
  .signup-intro .faq-mini {
    display: none;
  }
}

/* =======================================================================
   LOGIN PAGE OVERRIDES — scoped to body.auth-page .login-split /
   .login-intro, so signup.html stays byte-identical.

   Three goals, all driven by team feedback that login felt cluttered and
   hard to read:
     1. Kill the decorative SVG curve on .signup-intro::before (ascending
        growth motif) — useful for signup's conversion context, pure noise
        for returning users.
     2. Compact the column: shift grid from 50/50 -> 40/60 so the form
        gets more room; tighten padding and gap.
     3. Replace the SVG decoration with a subtle, bottom-anchored
        hero-city.jpg — same image as index.html hero, ties login visually
        to the homepage. Masked to fade to transparent above ~55% height
        so it never overlaps the headline, intro, benefit list, or
        security block.
   ======================================================================= */

/* Shift the split from 50/50 to 40/60 on desktop — more room for the form */
@media (min-width: 900px) {
  .signup-split.login-split {
    grid-template-columns: 2fr 3fr;
  }
}
@media (min-width: 1600px) {
  .signup-split.login-split {
    grid-template-columns: minmax(0, 560px) minmax(0, 720px);
  }
}

/* Tighten the left column on login */
.signup-intro.login-intro {
  gap: var(--space-2);                /* was var(--space-3) */
  padding: var(--space-4) var(--space-4);
}

/* Swap the decorative SVG for hero-city.jpg, anchored to the bottom.
   Use a high-specificity selector to reliably override the base
   .signup-intro::before declaration (.signup-intro already sets a
   background-image there; we replace ALL the relevant properties). */
body.auth-page .signup-intro.login-intro::before {
  /* Image */
  background-image: url('/assets/img/brand/hero-city.jpg');
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  /* Keep it in the lower portion — 55% is enough to show the skyline
     without bleeding into the security-block / benefit-list zone */
  height: 55%;
  opacity: 0.22;
  /* Mask fades the image softly at BOTH ends:
       - top: so it doesn't compete with the text zone above
       - bottom: so the horizon / water-reflection line in the source
         image (row ~430/540 ≈ 80% down, where brightness drops sharply)
         disappears instead of reading as a hard horizontal edge */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.95) 75%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.95) 75%,
    transparent 100%);
}

/* Slightly tighten the h1 on login — no decorative pressure, so the
   headline can sit closer to the intro paragraph */
.signup-intro.login-intro h1 {
  margin-bottom: 0.25rem;
}

/* Mobile: drop the image entirely on the collapsed single-column layout
   (it would otherwise fight the text at narrow widths where there's no
   breathing room) */
@media (max-width: 899px) {
  body.auth-page .signup-intro.login-intro::before {
    display: none;
  }
}

/* =======================================================================
   SIGNUP PAGE — visual-style match to login (scoped)

   Mirrors login's ::before treatment only — replaces the decorative
   growth-curve SVG with the same bottom-fade hero-city.jpg so both
   auth pages share the same visual language.

   Deliberately does NOT mirror login's other changes:
     - 50/50 grid kept (signup needs equal column weight for conversion)
     - No padding/gap tightening (signup has more content that needs room)
     - Trust-row, mini-FAQ, score-projection, security-block all stay
       (these are load-bearing conversion elements on signup, even
       though they were redundant on login)

   Scoped via .signup-intro-v2 modifier class so un-versioned usages
   elsewhere (if any appear in future) keep the original SVG decoration.
   ======================================================================= */

body.auth-page .signup-intro.signup-intro-v2::before {
  /* Image */
  background-image: url('/assets/img/brand/hero-city.jpg');
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  /* Same lower-portion anchor as login */
  height: 55%;
  opacity: 0.22;
  /* Same five-stop mask as login — fades softly at top AND bottom so
     the horizon line in the source image (row ~430/540, 78-82% down)
     doesn't read as a hard edge */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.95) 75%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.95) 75%,
    transparent 100%);
}

/* Mobile: drop the image on collapsed single-column, same rationale
   as login — no room for decoration without fighting text */
@media (max-width: 899px) {
  body.auth-page .signup-intro.signup-intro-v2::before {
    display: none;
  }
}

/* Override the base .signup-intro's height:100% + parent grid
   align-items:stretch — the signup column now sizes to its own
   content so there's no empty navy space below the mini-FAQ.

   Scoped to .signup-intro-v2 only (NOT the base class) so login,
   which also uses .signup-intro, keeps its original stretch
   behavior until the form column gets reworked.

   The form column (.signup-form-col) will be redesigned next, at
   which point both columns will be re-balanced in height. */
body.auth-page .signup-intro.signup-intro-v2 {
  align-self: start;
  height: auto;
}

/* ---------- Country selector (two radio cards) ---------- */
.country-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.country-select input[type="radio"] {
  /* Hide the native radio but keep it accessible and focusable. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.country-select label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-fg);
}

.country-select label:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.country-select input[type="radio"]:checked + label {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-fg);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
}

.country-select input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Flag container — holds an inline SVG child */
.country-flag {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--color-surface-2);
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.country-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.country-hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* ---------- Password show/hide toggle ---------- */
.password-wrap {
  position: relative;
  display: block;
}

/* Extra right padding on the input so typed characters don't slide under
   the toggle button. The button is 40px wide + some breathing room. */
.password-wrap input[type="password"],
.password-wrap input[type="text"] {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  font-family: inherit;
}

.password-toggle:hover {
  color: var(--color-fg);
  background: var(--color-surface-2);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-fg);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Show the eye icon when the password is hidden (button not pressed),
   show the eye-off icon when the password is visible (button pressed). */
.password-toggle .icon-eye-off { display: none; }

.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

/* =======================================================================
   CHECKOUT PAGE — Visual-only Stripe Checkout mockup (DEV MODE)
   ----------------------------------------------------------------------
   Styles the payment page at /checkout.html. Matches Stripe's visual
   grammar (centered narrow layout, order summary left / form right,
   card input with inline icons, single primary action button) without
   copying their exact design. Brand applied: iBoost navy + emerald on
   white background, same typography as the rest of the site.

   When Stripe is integrated for real, the markup may be replaced by
   Stripe Elements but the outer chrome (header, layout, summary) stays.
   ======================================================================= */

.checkout-page {
  background: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* DEV MODE banner — bright, unmissable, sticky at top */
.checkout-dev-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.82rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.checkout-dev-banner svg {
  width: 18px;
  height: 18px;
  color: #d97706;
  flex-shrink: 0;
}

.checkout-dev-banner strong {
  font-weight: 700;
  color: #78350f;
}

/* Header — minimal, focused */
.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.checkout-logo img {
  display: block;
  height: 50px;
  width: auto;
}

.checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.checkout-secure svg {
  width: 14px;
  height: 14px;
  color: #16a34a;
}

/* Main layout — 2-column on desktop, stacked on mobile */
.checkout-main {
  flex: 1;
  padding: 40px 32px 60px;
}

.checkout-layout {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: flex-start;
  }
}

/* ---- LEFT: Order summary ---- */
.checkout-summary {
  background: linear-gradient(180deg, #0A2540 0%, #0e2d4d 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.15);
}

.checkout-summary::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.checkout-summary-plan {
  position: relative;
  z-index: 1;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.checkout-plan-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ee7a8;
  margin-bottom: 6px;
}

.checkout-plan-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.checkout-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.checkout-plan-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.checkout-plan-currency {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

.checkout-plan-period {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 2px;
}

.checkout-plan-tagline {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin: 0 0 16px;
}

.checkout-plan-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-plan-includes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}

.checkout-plan-includes svg {
  width: 14px;
  height: 14px;
  color: #6ee7a8;
  flex-shrink: 0;
  margin-top: 3px;
}

.checkout-summary-meta {
  position: relative;
  z-index: 1;
  padding-top: 18px;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.88rem;
  color: #fff;
}

.checkout-summary-row strong {
  font-size: 1rem;
  font-weight: 800;
  color: #6ee7a8;
}

.checkout-summary-row-muted {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.checkout-change-plan {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 16px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.checkout-change-plan:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  text-decoration: none;
}

/* ---- RIGHT: Payment form ---- */
.checkout-form-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.06);
  border: 1px solid #e5e7eb;
}

.checkout-form-header {
  margin-bottom: 20px;
}

.checkout-form-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A2540;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.checkout-form-header p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}

/* DEV-MODE "Fill with dummy data" button — dashed border + amber accent
   to signal it's a test shortcut, not a production feature. Matches the
   amber banner at the top of the page visually. */
.checkout-fill-dummy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 12px;
  background: #fef3c7;
  border: 1px dashed #d97706;
  border-radius: 6px;
  color: #78350f;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkout-fill-dummy-btn:hover {
  background: #fde68a;
  border-color: #b45309;
}

.checkout-fill-dummy-btn:active {
  transform: translateY(1px);
}

.checkout-fill-dummy-btn svg {
  width: 13px;
  height: 13px;
  color: #d97706;
  flex-shrink: 0;
}

.checkout-field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}

.checkout-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.checkout-field-hint {
  display: inline-flex;
  opacity: 0.5;
}

.checkout-field-hint svg {
  width: 12px;
  height: 12px;
}

.checkout-field input,
.checkout-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #0A2540;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.checkout-field input:focus,
.checkout-field select:focus {
  outline: none;
  border-color: #2ECC71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
}

.checkout-field input:read-only {
  background: #f9fafb;
  color: #64748b;
  cursor: not-allowed;
}

.checkout-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Card number input: icons on the right */
.checkout-card-input-wrap {
  position: relative;
}

.checkout-card-input-wrap input {
  padding-right: 120px;
}

.checkout-card-logos {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.checkout-card-logos svg {
  width: 32px;
  height: 22px;
  display: block;
}

/* Alert (error) */
.checkout-form .alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.checkout-form .alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Submit button — the big "Pay" action */
.checkout-submit-btn {
  position: relative;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(180deg, #3ee082 0%, #2ECC71 50%, #22a85d 100%);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow:
    0 4px 14px rgba(46, 204, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  margin-top: 6px;
  overflow: hidden;
}

.checkout-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.checkout-submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.checkout-submit-txt {
  position: relative;
  z-index: 1;
  transition: opacity 0.15s ease;
}

.checkout-submit-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: checkout-spin 0.8s linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

.checkout-submit-btn.is-loading .checkout-submit-txt {
  opacity: 0;
}

.checkout-submit-btn.is-loading .checkout-submit-spinner {
  opacity: 1;
}

.checkout-submit-legal {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.5;
  margin: 14px 0 0;
  text-align: center;
}

.checkout-powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 16px;
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 0.72rem;
  color: #94a3b8;
}

.checkout-powered-by svg {
  width: 12px;
  height: 12px;
}

/* Footer — slim, legal */
.checkout-footer {
  padding: 24px 32px;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.checkout-footer p {
  margin: 0 0 6px;
}

.checkout-footer nav {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.checkout-footer nav a {
  color: #475569;
  text-decoration: none;
}

.checkout-footer nav a:hover {
  color: #0A2540;
  text-decoration: underline;
}

/* Mobile: reduce padding a bit */
@media (max-width: 640px) {
  .checkout-main {
    padding: 24px 16px 40px;
  }

  .checkout-header {
    padding: 14px 20px;
  }

  .checkout-logo img {
    height: 40px;
  }

  .checkout-summary,
  .checkout-form-wrap {
    padding: 22px 18px;
  }

  .checkout-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-card-input-wrap input {
    padding-right: 110px;
  }

  .checkout-card-logos svg {
    width: 28px;
    height: 20px;
  }
}


/* =======================================================================
   CHECKOUT — PHASE 2 (two-column: plan picker + payment form)
   =======================================================================
   /login.html-style 40/60 layout. Left: currency toggle + 3 skinny
   radio-row plan cards + what's-included list. Right: summary +
   payment form + submit. Payment form collapses when Free is selected.
   ======================================================================= */

/* ---- Compact hero ----
   Same dark-emerald palette as /pricing.html but short, because the
   user is here to finish a task. */
.checkout-hero {
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(46, 204, 113, 0.28) 0%, transparent 70%),
    linear-gradient(165deg, rgba(10, 37, 64, 0.96) 0%, rgba(14, 45, 77, 0.92) 50%, rgba(4, 20, 38, 0.98) 100%),
    #0A2540;
  color: #fff;
  overflow: hidden;
}
.checkout-hero-copy {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.checkout-hero-copy .hero-eyebrow { margin-bottom: 8px; }
.checkout-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: #fff;
}
.checkout-hero-lead {
  font-size: clamp(0.94rem, 1.2vw, 1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .checkout-hero { padding: 24px 0 20px; min-height: 140px; }
  .checkout-hero h1 { font-size: 1.3rem; }
  .checkout-hero-lead { font-size: 0.88rem; }
}

/* ---- Main container ---- */
.checkout-page .checkout-main {
  padding: var(--space-6) 0 var(--space-8);
  background: var(--color-bg);
}
.checkout-page .checkout-main > .container { max-width: 1120px; }

/* ---- Two-column layout ----
   40/60 desktop, stacked on mobile. Mirrors /login.html's shape so the
   two pages feel like siblings. align-items: stretch so the payment
   column's height drives the plan column's height — they stay visually
   tied together even when the payment block is long. */
.checkout-layout-v2 {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .checkout-layout-v2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---- LEFT COLUMN ---- */
.checkout-plans-col {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(10, 37, 64, 0.06);
  display: flex;
  flex-direction: column;
}
.checkout-plans-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.checkout-plans-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Currency toggle — appears above the plan rows per spec.
   Lean on the existing .currency-toggle styles but override a few
   things: smaller, left-aligned, no max-width auto-centering. */
.checkout-currency-toggle {
  align-self: flex-start;
  margin: 0;
}

/* Active currency pill matches the checkout-submit-btn color on this
   page only (scoped to .checkout-page so /pricing.html's toggle keeps
   its current white-pill-on-gray active style). Same emerald gradient
   as the submit button, plus the same inset highlights for depth. */
.checkout-page .currency-toggle button.active {
  background: linear-gradient(180deg, #3ee082 0%, #2ECC71 50%, #22a85d 100%);
  color: #fff;
  box-shadow:
    0 2px 6px rgba(46, 204, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* ---- Plan rows (skinny radio cards) ---- */
.plan-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.plan-row:hover {
  border-color: #cbd5e1;
}
.plan-row.is-selected {
  border-color: var(--color-accent);
  background: rgba(46, 204, 113, 0.04);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.12);
}

/* Hide native radio, keep keyboard-focusable */
.plan-picker-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.plan-row:has(.plan-picker-radio:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Radio indicator circle on the left */
.plan-row-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease;
  flex-shrink: 0;
}
.plan-row-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.plan-row.is-selected .plan-row-indicator {
  border-color: var(--color-accent);
}
.plan-row.is-selected .plan-row-indicator-dot {
  opacity: 1;
  transform: scale(1);
}

/* Plan body: name + desc */
.plan-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plan-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-row-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-fg);
  letter-spacing: -0.01em;
}
.plan-row-desc {
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.35;
}
.plan-row-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  flex-shrink: 0;
}
.plan-row-badge-soft {
  background: rgba(46, 204, 113, 0.14);
  color: #065f46;
}

/* Price stack on the right */
.plan-row-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
}
.plan-row-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-fg);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.plan-row-period {
  font-size: 0.72rem;
  color: var(--color-muted);
  line-height: 1.2;
}

/* ---- What's included block ---- */
.plan-includes {
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto; /* absorbs extra height so left column matches right */
}
.plan-includes-heading {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.plan-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Item row — matches /pricing.html's .pricing-card li treatment:
   subtle divider between rows, checkmark circle on the left,
   comfortable line-height. */
.plan-includes-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-fg-soft);
  border-bottom: 1px solid var(--color-surface-2);
}
.plan-includes-list li:last-child {
  border-bottom: none;
}
/* Bold spans inside items pick up primary color — matches Complete tier
   emphasis on /pricing.html. */
.plan-includes-list li strong {
  color: var(--color-primary);
  font-weight: 700;
}
.plan-includes-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
/* Muted rows (Free tier "not included") — line-through + grey dash */
.plan-includes-list li.plan-includes-item-muted {
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(100, 116, 139, 0.4);
}
.plan-includes-list li.plan-includes-item-muted::before {
  content: '−';
  background: var(--color-border-strong);
  font-size: 0.95rem;
  font-weight: 800;
}

/* ---- RIGHT COLUMN — confirm / payment ---- */
.checkout-confirm-col {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(10, 37, 64, 0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkout-confirm-summary {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Payment fields block — collapses when Free is selected */
.checkout-payment-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.32s ease, opacity 0.2s ease, margin 0.32s ease;
  overflow: hidden;
}
body.is-free-selected .checkout-payment-fields {
  max-height: 0;
  opacity: 0;
  margin-bottom: -20px;
  pointer-events: none;
}
body.is-free-selected .checkout-confirm-summary {
  margin-bottom: 0;
}

/* Submit spinner state */
.checkout-submit-btn.is-processing { pointer-events: none; }
.checkout-submit-btn.is-processing .checkout-submit-txt { opacity: 0; }
.checkout-submit-btn.is-processing .checkout-submit-spinner { opacity: 1; }

@media (max-width: 640px) {
  .checkout-confirm-col,
  .checkout-plans-col { padding: 20px 18px; }
}



/* Welcome banner on /account.html after successful checkout.
   Emerald gradient card with check-circle icon. Appears once per
   completed checkout; auto-clears from URL on display. */
.account-welcome-banner {
  max-width: 520px;
  margin: 20px auto 16px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.14) 0%, rgba(46, 204, 113, 0.06) 100%);
  border: 1px solid rgba(46, 204, 113, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.12);
}

.account-welcome-banner svg {
  width: 32px;
  height: 32px;
  color: #16a34a;
  flex-shrink: 0;
}

.account-welcome-banner div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-welcome-banner strong {
  font-size: 1rem;
  font-weight: 700;
  color: #065f46;
}

.account-welcome-banner span {
  font-size: 0.85rem;
  color: #047857;
}


/* =======================================================================
   SIGNUP PAGE — Plan selector (3 mini-cards at top of signup form)
   ----------------------------------------------------------------------
   Always-visible radio group with 3 plan mini-cards. Pre-selects based
   on ?plan= URL param (set by pricing page CTAs). Clicking a card
   updates aria-checked, the hidden form state, and the URL (via
   history.replaceState) so refreshes preserve the choice.
   ======================================================================= */

.signup-plan-selector {
  margin-bottom: var(--space-3);
  padding: 18px 16px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.signup-plan-head {
  margin-bottom: 12px;
}

.signup-plan-head h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0A2540;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}

.signup-plan-head p {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}

.signup-plan-compare {
  color: #16a34a;
  text-decoration: none;
  font-weight: 600;
  margin-left: 3px;
}

.signup-plan-compare:hover {
  text-decoration: underline;
}

.signup-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* Mini-card — also a button (clickable entire surface).
   Using <button> ensures keyboard accessibility by default. */
.signup-plan-card {
  position: relative;
  padding: 12px 10px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  min-height: 130px;
}

.signup-plan-card:hover:not(.is-selected) {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.signup-plan-card:focus-visible {
  outline: 2px solid #2ECC71;
  outline-offset: 2px;
}

.signup-plan-card.is-selected {
  border-color: #2ECC71;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.05) 0%, rgba(46, 204, 113, 0.01) 100%);
  box-shadow:
    0 0 0 3px rgba(46, 204, 113, 0.15),
    0 4px 12px rgba(46, 204, 113, 0.1);
}

.signup-plan-radio {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.signup-plan-card.is-selected .signup-plan-radio {
  border-color: #2ECC71;
  background: #2ECC71;
}

.signup-plan-card.is-selected .signup-plan-radio::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.signup-plan-badge {
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 2px 7px;
  background: linear-gradient(180deg, #3ee082 0%, #22a85d 100%);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(46, 204, 113, 0.35);
  pointer-events: none;
}

.signup-plan-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0A2540;
  letter-spacing: -0.005em;
  margin: 0;
  padding-right: 22px; /* leave room for radio */
}

.signup-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.signup-plan-amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0A2540;
  letter-spacing: -0.02em;
  line-height: 1;
}

.signup-plan-period {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 500;
}

.signup-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.signup-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.68rem;
  color: #475569;
  line-height: 1.3;
}

.signup-plan-features svg {
  width: 9px;
  height: 9px;
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 2px;
}

.signup-plan-currency-note {
  margin: 10px 0 0;
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: right;
}

/* Mobile: stack the 3 cards vertically. 3 columns at ~110px each is too
   narrow for "$2,000 reported line" to fit on one line. */
@media (max-width: 540px) {
  .signup-plan-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .signup-plan-card {
    min-height: auto;
    padding: 14px 14px;
  }

  .signup-plan-features li {
    font-size: 0.78rem;
  }

  .signup-plan-amount {
    font-size: 1.4rem;
  }
}