/* ═══════════════════════════════════════════════════════════
   CPA LANDING PAGE — style.css
   Design source: Figma /Mobile node-id=7632:8753 (Hero-CPA)
   7SearchPPC Color Styles extracted from Figma design tokens
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Colors — from Figma "7SearchPPC - Color Styles" */
  --color-bg:          #F9FAFB;   /* Light BG */
  --color-black:       #1E1E1E;   /* Black - Primary */
  --color-grey:        #6B7280;   /* Grey */
  --color-white:       #FFFFFF;   /* White */
  --color-blue:        #3B82F6;   /* Primary Blue */
  --color-yellow:      #FACC15;   /* Secondary Yellow */
  --color-orange:      #F59E0B;   /* Warning */
  --color-green:       #10B981;   /* Success */
  --color-light-gray:  #D2D2D2;   /* Light Gray */
  --color-track:       #E5E7EB;   /* Donut track ring */
  --color-box-bg:      #EFEFF5;   /* Quick Glance inner-box background (Figma 8857:5908) */
  --color-icon-blue:   #1473F8;   /* Inner-box icon accent blue */
  --color-icon-yellow: #FDC135;   /* Inner-box icon accent yellow */

  /* Typography — from Figma text styles */
  --font-heading:  'Be Vietnam Pro', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Type scale */
  --text-64:  4rem;      /* 64px — CPA value */
  --text-36:  2.25rem;   /* 36px — headings */
  --text-24:  1.5rem;    /* 24px — body / buttons */
  --text-20:  1.25rem;   /* 20px — slider labels */
  --text-16:  1rem;      /* 16px — chart labels, sub-heading */

  /* Spacing */
  --sp-40:   2.5rem;
  --sp-24:   1.5rem;
  --sp-20:   1.25rem;
  --sp-16:   1rem;

  /* Border radius */
  --radius-pill: 30px;
  --radius-device-outer: 80px;   /* Figma: rounded-tl-[80px] black frame */
  --radius-device-inner: 70px;   /* Figma: rounded-tl-[70px] white card */

  /* Transitions */
  --transition: 0.35s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────
   3. HEADER / NAV
───────────────────────────────────────────── */
.cpa-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(209, 213, 219, 0.6);
}

.cpa-nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1440px;
  margin-inline: auto;
  padding: 1rem 2rem;
}

.cpa-nav__logo img { height: 36px; width: auto; }

.cpa-nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.cpa-nav__link {
  font-family: var(--font-heading);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--color-black);
  transition: color var(--transition);
}

.cpa-nav__link:hover { color: var(--color-blue); }

.cpa-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1.5rem;
}

.cpa-nav__btn-outline {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-blue);
  border: 1.5px solid var(--color-blue);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.25rem;
  transition: background var(--transition), color var(--transition);
}

.cpa-nav__btn-outline:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

.cpa-nav__btn-solid {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-blue);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.25rem;
  transition: opacity var(--transition);
}

.cpa-nav__btn-solid:hover { opacity: 0.88; }

/* Hamburger — mobile only */
.cpa-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.cpa-nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Mobile nav drawer */
.cpa-nav__mobile {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 2rem 1.5rem;
  border-top: 1px solid var(--color-track);
  background: var(--color-white);
}

.cpa-nav__mobile[aria-hidden="false"] { display: flex; }

.cpa-nav__mobile ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cpa-nav__mobile a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-16);
  color: var(--color-black);
}

.cpa-nav__mobile-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

/* ─────────────────────────────────────────────
   4. HERO — CPA SECTION
   Figma: 1920×1080 frame, node-id=7632:8753
   Full-width fluid — no max-width constraint
   Device: left=906px(47.2vw), top=157px(14.5vh)
           outer-r=80px, inner-r=70px, offset=10px
───────────────────────────────────────────── */
.hero-cpa {
  position: relative;
  min-height: 88svh;
  overflow: hidden;
}

/* Subtle grid lines — recreated from Figma Union background layer */
.hero-cpa__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(209, 213, 219, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 213, 219, 0.45) 1px, transparent 1px);
  background-size: 48px 48px;
  background-color: var(--color-bg);
  pointer-events: none;
  z-index: 0;
}

/* ── Fluid full-width two-column grid ──
   Figma: 906px:1014px = 47.2fr:52.8fr at 1920px
   No max-width, no centering, no padding — truly full-bleed
───────────────────────────── */
.hero-cpa__inner {
  position: relative;
  /* Creates the stacking context for the hero mockup. .hero-cpa itself has
     position:relative but no z-index, so it doesn't isolate one — raising it
     here is what keeps the simulator card (incl. #cpaSlider) painting, and
     staying clickable, above anything overlapping the hero. */
  z-index: 1;
  display: grid;
  grid-template-columns: 47.2fr 52.8fr;
  min-height: 88svh;
  width: 100%;
}

/* ── Left: text content ──
   Figma: left=120px (6.25%), text center at 74.6% from top
   justify-content:flex-end + padding-bottom ≈ 12vh
   places bottom of text at ~88vh → center at ~74vh ✓
───────────────────────────── */
.hero-cpa__content {
  display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 14vh 4% 7vh 11%;
}

.hero-cpa__heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.875vw, 2.25rem); /* 36px at 1920px */
  line-height: 1.25;
  letter-spacing: -0.18px;
  color: var(--color-black);
}

.hero-cpa__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.5rem); /* 24px at 1920px */
  line-height: 1.6;
  color: var(--color-grey);
  max-width: 648px; /* Figma: w-648px */
}

.hero-cpa__ctas {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* CTA buttons — Figma: px-24 py-20, rounded-30px, Be Vietnam Pro Medium 24px */
.hero-cpa__btn-primary,
.hero-cpa__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1rem, 1.25vw, 1.5rem); /* 24px at 1920px */
  letter-spacing: -0.12px;
  padding: clamp(0.75rem, 0.75vw, 1.25rem) clamp(1rem, 1.25vw, 1.5rem);
  border-radius: var(--radius-pill);
  transition: opacity var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}

input#cpaSlider {
    border-color: transparent;
}

.hero-cpa__btn-primary {
  background: var(--color-blue);
  color: var(--color-white);
  border: 2px solid var(--color-blue);
}

.hero-cpa__btn-primary:hover { 
  background: var(--color-white);
    color: var(--color-blue);
    border: 2px solid var(--color-blue);
 }

.hero-cpa__btn-secondary {
  background: var(--color-white);
  color: var(--color-blue);
  border: 2px solid var(--color-blue);
}

.hero-cpa__btn-secondary:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

/* ── Right: tablet device mockup ──
   Figma device: left=906px, top=157px (14.5vh), w=1014px, h=923px (85.5vh)
   position:absolute fills right column — right/bottom edges reach viewport edge
───────────────────────────── */
.hero-cpa__mockup {
  position: relative; /* positioning context for absolute device */
}

/* Black outer device frame — fills right column from 14.5vh to bottom of viewport */
.mockup-device {
  position: absolute;
  inset: 4.5vh 0 0 0; /* Figma top=157/1080=14.5%, flush right/bottom */
  background: var(--color-black);
  border-radius: 80px 0 0 0; /* Figma: rounded-tl-[80px] */
  box-shadow: 0 32px 80px rgba(30, 30, 30, 0.18);
}

/* Camera notch — dark rectangle at top-right, aligns with white card top */
.mockup-device__notch {
  position: absolute;
  top: 10px; /* aligns with inner white card top (card inset = 10px) */
  right: 0;
  width: clamp(100px, 10.47vw, 201px); /* Figma: 201/1920 = 10.47vw */
  height: 40px;
  background: var(--color-black);
  border-bottom-left-radius: 16px;
  z-index: 2;
}

/* White inner card — 10px inset from device frame on top + left
   Figma: card at (916-906=10px left, 167-157=10px top), w=1004px, h=913px */

   .mockup-device__card {
  position: absolute;
    inset: 10px 0 0 10px;
    background: var(--color-white);
    border-radius: 70px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9.96% 10.96% 5% 9.96%;
    gap: clamp(1rem, 6.2vw, 0rem);
    overflow: hidden;
}

/* ── Simulator header ── */
.simulator__header {
  text-align: center;
  flex-shrink: 0;
  width: 100%;
}

.simulator__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.875vw, 2.25rem); /* 36px at 1920px */
  letter-spacing: -0.18px;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}

.simulator__subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(0.75rem, 0.833vw, 1rem); /* 16px at 1920px */
  color: var(--color-grey);
}

/* ── Donut charts ──
   Figma: 3 charts × 198px with 100px gaps = 794px content width at 1920px
   grid-template-columns: repeat(3, 1fr) auto-sizes columns within available space
───────────────────────────── */
.simulator__charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  column-gap: clamp(20px, 5.2vw, 100px); /* Figma: 100px gap at 1920px */
  width: 100%;
  flex-shrink: 0;
}

.chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.094vw, 1.3125rem); /* Figma: 21px at 1920px */
  width: 100%;
}

/* Ring — fills grid column up to Figma max of 198px */
.chart-item__ring {
  position: relative;
  width: 100%;
  max-width: 198px; /* Figma: 198×198px donut */
  aspect-ratio: 1;
}

.donut-svg {
  width: 100%;
  height: 100%;
}

/* Percentage value overlaid — scales proportionally with ring via vw */
.donut-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(0.875rem, 1.875vw, 2.25rem); /* 36px at 1920px */
  letter-spacing: -0.18px;
  color: var(--color-black);
  pointer-events: none;
}

.donut-arc {
  transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-item__label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(0.625rem, 0.833vw, 1rem); /* 16px at 1920px */
  color: var(--color-grey);
  text-align: center;
  line-height: 1.4;
}

/* ── CPA value + slider wrapper ──
   Figma: these two share a container with gap: 60px
   max-width: 478px (Figma's 478px slider/display width)
───────────────────────────── */
.simulator__bottom {
  display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 2.125vw, 3.75rem);
    width: 100%;
    max-width: min(478px, 100%);
    flex-shrink: 0;
}

/* ── CPA Value display ── */
.simulator__cpa-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.cpa-display__amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

/* $ symbol — Figma: Be Vietnam Pro Bold 24px #3B82F6 */
.cpa-display__currency {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1rem, 1.25vw, 1.5rem); /* 24px at 1920px */
  color: var(--color-blue);
  letter-spacing: -0.12px;
  position: relative;
    top: -1.7rem;
}

/* Value number — Figma: Be Vietnam Pro Bold 64px #1E1E1E */
.cpa-display__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 3.333vw, 4rem); /* 64px at 1920px */
  color: var(--color-black);
  letter-spacing: -0.32px;
  min-width: unset; /* prevents shrinking below 64px at small widths */
  text-align: left;
  
}

/* "Target CPA" label — Figma: Be Vietnam Pro Regular 16px #6B7280 */
.cpa-display__label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(0.75rem, 0.833vw, 1rem); /* 16px at 1920px */
  color: var(--color-grey);
  align-self: center;
  position: relative;
    top: -1.6rem;
}

/* ── Slider ── */
.simulator__slider-wrap {
  position: relative;
  padding-bottom: 1.75rem;
  width: 100%;
  /* The input is an absolutely-positioned overlay now (see .cpa-slider), so
     it no longer contributes its own height to this box. The 34px term
     reproduces exactly what the in-flow inline-block input used to
     contribute (its 27px height plus the ~7px inline baseline gap); the
     padding is added back because box-sizing is border-box here. Together
     they keep the $5/$50 labels and everything below at the same position
     as before. */
  min-height: calc(34px + 1.75rem);
  /* Filled-track width, kept in sync with the slider value by
     updateSimulator() in main.js — same progress-fill behaviour as the
     homepage estimator's .ate-track-fill (index.php). Default matches the
     slider's initial value (50 = max = fully filled). */
  --cpa-fill: 100%;
}

/* Decorative thumb — the visible blue pill. The real <input> above it is
   transparent (opacity:0), so this div is what the user actually sees;
   updateSimulator() in main.js drives its `left`. Exactly the role
   .ate-thumb plays for the homepage estimator (index.php).
   `left` is offset by the thumb's own width so it tracks a native range
   thumb's travel (0 -> trackWidth - 14px) rather than overhanging the ends. */
.cpa-slider-thumb {
  position: absolute;
  top: 13.5px; /* centre of the 27px track */
  left: 0;
  transform: translateY(-50%);
  width: 14px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-blue);
  box-shadow:
    inset -2px -2px 4px rgba(0, 80, 212, 0.6),
    inset 2px 2px 2px rgba(30, 30, 30, 0.1);
  pointer-events: none; /* the invisible input owns every gesture */
  z-index: 1;
}

/* Track: two stacked layers behind a transparent-tracked native input —
   the same structure as index.php's .ate-track + .ate-track-fill, adapted
   to the simulator's white card. Base layer: 2D grid of small light-gray
   squares (7.36px cells on a 9.82px period; 27px tall = exactly 3 rows).
   The ::before fill layer repaints the squares left of the thumb blue and
   resizes with the slider value via --cpa-fill. */
.slider-track-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.82' height='9.82'%3E%3Crect width='7.36' height='7.36' fill='%23D2D2D2'/%3E%3C/svg%3E");
  background-size: 9.82px 9.82px;
  background-repeat: repeat;
  pointer-events: none;
}

.slider-track-bg::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cpa-fill, 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.82' height='9.82'%3E%3Crect width='7.36' height='7.36' fill='%233B82F6'/%3E%3C/svg%3E");
  background-size: 9.82px 9.82px;
  background-repeat: repeat;
}

/* Invisible input overlaid on the decorative track + thumb — the exact
   technique the homepage estimator uses for .ate-range (assets/css/style.css).
   Why this and not a styled native thumb: the pill is 36px tall but the
   input's box was only 27px, so the pill overhung its own hit area by 4.5px
   top and bottom. On a phone a fingertip pressing the visible pill routinely
   landed on those dead pixels — the touch went to the parent, the range never
   saw it, and the thumb simply refused to move.
   Absolute positioning keeps the taller box out of the layout (the wrap's
   min-height above preserves the old spacing), so a 44px touch target costs
   nothing visually. */
.cpa-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: -8.5px;  /* centres the 44px box on the 27px track: -8.5 + 22 = 13.5 */
  left: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0;   /* .cpa-slider-thumb draws the visible pill */
  cursor: pointer;
  outline: none;
  z-index: 2;   /* above .cpa-slider-thumb so it receives every gesture */
  /* Claim the gesture outright. With the default `auto`, the browser hands
     the drag to the page scroller the moment it picks up any vertical
     component — and a real finger never travels perfectly horizontally, so
     the thumb stuttered and then stopped tracking mid-drag. `none` keeps the
     gesture with the range for its whole lifetime. Scoped to this strip, so
     the rest of the simulator card still scrolls the page normally. */
  touch-action: none;
}

/* Native track/thumb are invisible (the input is opacity:0) — they exist
   only to size the hit area. The thumb is deliberately wider and taller
   than the painted pill so it is comfortable to grab, matching .ate-range's
   28×44 thumb. */
.cpa-slider::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
}

.cpa-slider::-moz-range-track {
  height: 44px;
  background: transparent;
}

.cpa-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: grab;
}

.cpa-slider::-webkit-slider-thumb:active { cursor: grabbing; }

.cpa-slider::-moz-range-thumb {
  width: 28px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: grab;
}

/* Slider labels: $5 ... $50 */
.slider-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.slider-labels span {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(0.75rem, 1.042vw, 1.25rem); /* 20px at 1920px */
  color: var(--color-light-gray);
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.slider-labels span:hover {
  color: var(--color-black);
}

.slider-labels span:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reflects whichever bound ($5 / $50) the slider is currently at — set by
   updateSimulator() in main.js, both on drag and on clicking the label
   itself (see bindSlider's jumpTo). */
.slider-labels span.is-active {
  font-weight: 600;
  color: var(--color-black);
}

/* ─────────────────────────────────────────────
   5. FOOTER
───────────────────────────────────────────── */
.cpa-footer {
  border-top: 1px solid var(--color-track);
  padding: 1.5rem 2rem;
  background: var(--color-white);
}

.cpa-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1440px;
  margin-inline: auto;
  flex-wrap: wrap;
}

.cpa-footer__inner p {
  font-size: 0.875rem;
  color: var(--color-grey);
}

.cpa-footer__inner ul {
  display: flex;
  gap: 1.5rem;
}

.cpa-footer__inner ul a {
  font-size: 0.875rem;
  color: var(--color-grey);
  transition: color var(--transition);
}

.cpa-footer__inner ul a:hover { color: var(--color-blue); }

/* ─────────────────────────────────────────────
   6. RESPONSIVE
   clamp() values handle most scaling automatically.
   Breakpoints only override layout/structure.
───────────────────────────────────────────── */

/* Short-viewport desktops (e.g. 1600×740, 1440×768, 1366×768, 1280×720)
   The simulator card is a fixed-height box with overflow:hidden, so anything
   its children don't fit into is silently cut off — at 1600×740 that was the
   whole "$50 Target CPA" row and the slider.

   Every vertical measure below is now height-relative (vh) or a small fixed
   value. The previous rules sized the vertical rhythm in `vw`, which grows
   with WIDTH and ignores HEIGHT — the exact failure this breakpoint exists to
   prevent. `gap: clamp(1rem, 4.5vw, 4.5rem)` in particular resolved to 72px
   at 1600px wide, while the base rule's own gap collapses to 16px (its clamp
   has max < min), so the "tighter gap so content fits" was in fact 4.5x
   LOOSER than the gap it overrode, and two of them cost 144px of a 508px
   card. */
@media (max-height: 800px) and (min-width: 1200px) {
  .mockup-device {
    /* Start the device higher: every vh reclaimed here becomes card height. */
    inset: 4vh 0 0 0;
  }
  .mockup-device__card {
    /* Vertical padding is a % of the card's WIDTH (that is how percentage
       padding resolves), so it too ignores height — trimmed accordingly. */
    padding: 3.5% 10.96% 2.5% 9.96%;
    gap: clamp(0.75rem, 1.6vh, 1.25rem);
  }
  .simulator__bottom {
    gap: clamp(0.75rem, 2vh, 1.75rem);
  }
}

/* Tablet / small desktop (768px – 1199px) */
@media (max-width: 1199px) {
  .mockup-device {
    inset: 10vh 0 0 0; /* start device earlier to gain card height */
  }
  .mockup-device__card {
    gap: clamp(1.25rem, 5vw, 5.5rem); /* slightly tighter than desktop at these widths */
  }
}

/* Mobile portrait (<768px) — stack columns vertically */
@media (max-width: 767px) {
  .cpa-nav__links,
  .cpa-nav__actions { display: none; }
  .cpa-nav__hamburger { display: flex; }

  /* No forced height here — it used to be a hard `height: 100vh`, which on
     a small/short phone clipped REAL content (the simulator card's own
     $ amount, slider and even parts of the heading), not just decorative
     overflow: .hero-cpa__mockup below stretched an absolutely-positioned
     frame to fill exactly "100vh minus the text block's height", and
     .mockup-device__card's overflow:hidden then silently cropped whatever
     didn't fit in that leftover space. min-height keeps the full-bleed
     look on taller phones; on a short one the section now simply grows
     past the viewport and the page scrolls, instead of cropping. */
  .hero-cpa {
    min-height: 100vh;
  }

  .hero-cpa__inner {
    grid-template-columns: 1fr;
    /* Both rows size to their own content now — no more 1fr "fill
       whatever's left of 100vh" for the mockup row (see .hero-cpa above
       for why that clipped small phones). */
    grid-template-rows: auto auto;
    min-height: unset;
    height: auto;
  }

  .hero-cpa__content {
    justify-content: flex-start;
    padding: 5rem 1.25rem 1.25rem; /* 5rem top clears the fixed nav (~68px) */
    gap: 1.25rem;
  }

  /* The phone mockup is now a normal in-flow block sized by its own
     content (see .mockup-device / .mockup-device__card below) instead of
     an absolutely-positioned frame stretched to fill the rest of the
     viewport — see .hero-cpa above for the cropping that caused. */
  .hero-cpa__mockup {
            padding: 0 0px 0rem;
  }

  /* Mobile = centered phone mockup (not the desktop asymmetric frame): a
     normal in-flow card, fully rounded (all 4 corners — the desktop
     rule's asymmetric top-only rounding assumed the frame ran off the
     bottom of the viewport, which no longer happens now that it's sized
     to its own content) with a centered pill notch, matching the Figma
     mobile hero (node 8930-9100). position/inset are reset from the
     desktop absolute-fill rule so this sizes by content instead. */
  .mockup-device {
            position: relative;
        inset: 2vh 0px 0px 0px;
        border-radius: 44px 44px 0px 0px;
  }

  .mockup-device__notch {
    top: 0px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 118px;
    height: 26px;
    border-radius: 14px; /* full pill, centered like an iPhone notch */
  }

  .mockup-device__card {
    position: relative;
        inset: 10px 0px;
        margin: 10px;
        border-radius: 36px 36px 0px 0px;
        padding: 3rem 1.25rem 1.5rem;
        gap: 0rem;
  }

  .simulator__title { font-size: clamp(1rem, 3.5vw, 1.5rem); }
  .simulator__subtitle { font-size: 0.75rem; }
  .cpa-display__number { font-size: clamp(2rem, 7vw, 3rem); }
  .slider-labels span { font-size: 0.75rem; }

  .cpa-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Very small screens (<375px) */
@media (max-width: 374px) {
  .hero-cpa__ctas { flex-direction: column; align-items: flex-start; flex-direction: row;}
  .hero-cpa__content { padding-top: 1.5rem; align-items: flex-start;}
}

/* ─────────────────────────────────────────────
   7. SECTIONS WRAPPER
   Figma 7677:9497 — sticky left nav + scrollable right content
───────────────────────────────────────────── */
.cpa-sections-wrapper {
  display: flex;
  align-items: flex-start;
  background: var(--color-white);
}

.cpa-side-nav {
    width: 51.8%;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-left: 8rem;
    z-index: 7;
    /* background: var(--color-white); */
    transition: width var(--transition);
}

.cpa-side-nav nav {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Mobile-only duplicate nav "intro" blocks placed before Benefits/How To Set
   Up/FAQs (see cpa.php and initMobileNavCopies() in quick-glance-gsap.js) —
   hidden above the mobile breakpoint so they never affect the desktop
   sticky-nav layout; see the mobile override in the responsive section. */
.cpa-side-nav--copy {
  display: none;
}

.cpa-side-nav__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: -0.24px;
  color: var(--color-light-gray);
  line-height: 1.15;
  text-decoration: none;
  transition: color var(--transition);
}

.cpa-side-nav__arrow {
  display: inline-flex;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transition), transform var(--transition);
  flex-shrink: 0;
  line-height: 1;
}

.cpa-side-nav__arrow img {
  display: block;
  width: 28px;
  height: auto;
}

.cpa-side-nav__item.is-active {
  color: var(--color-black);
  position: relative;
  left: 14.5%;
}

.cpa-side-nav__item.is-active .cpa-side-nav__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Narrows only while the FAQs item is active (toggled by setActiveNav in
   quick-glance-gsap.js) — FAQs' own content takes the extra width back.
   Desktop only (min-width:1200px, matching the plain 51.8% rule above):
   .is-faqs-active has higher specificity than the tablet/mobile width
   overrides further down, so without this guard it would win there too
   and override their fixed/100% widths with an unwanted percentage. */
@media (min-width: 1200px) {
  .cpa-side-nav.is-faqs-active {
    width: 35%;
  }
}

.cpa-sections-content {
  flex: 1;
  min-width: 0;
}

.cpa-section {
  width: 100%;
}

/* ─────────────────────────────────────────────
   8. QUICK GLANCE — PINNED SCROLLYTELLING STAGE
   Figma 7677:9497 → 7677:9627 "Intro Key Points" (proto, starting-point
   7677:9497) — a pinned canvas: hero card slides in, hero+nav slide off
   together, then 4 benefit rows cycle through the same pinned viewport.
   Driven by GSAP ScrollTrigger — see quick-glance-gsap.js.

   Progressive enhancement: the rules below (no `.qg-enhanced` ancestor)
   are the baseline — a plain stacked, always-visible layout that works
   with no JS and satisfies prefers-reduced-motion (the JS never adds
   `.qg-enhanced` in either case). `.qg-enhanced .qg-*` rules below turn
   the same markup into the absolutely-stacked pinned stage that GSAP
   drives via inline transforms/opacity.
───────────────────────────────────────────── */
.cpa-section--intro {
  display: flex;
  flex-direction: column;
}

.qg-stage {
  /* baseline: no-op wrapper, hero + points render in normal flow */
}

.qg-hero {
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

.intro-card {
  flex: 1;
  background: var(--color-blue);
  border-radius: 80px 0 0 80px;
  margin-left: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5rem 4.5rem 0;
  overflow: hidden;
}

.intro-card__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 680px;
}

.intro-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.75rem);
  letter-spacing: -0.18px;
  color: var(--color-white);
  line-height: 1.25;
}

.intro-card__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.25vw, 1.25rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

.intro-card__illus {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
}

.intro-card__illus img {
  width: 85%;
    /* max-width: 540px; */
    height: auto;
    display: block;
}

/* ─────────────────────────────────────────────
   8b. QUICK GLANCE — KEY POINTS (baseline layout)
   Figma 7677:9627 "Intro Key Points" — 4 rows, each pairing copy with an
   animated "inner box" (Benefit-1..4.webm).
───────────────────────────────────────────── */
.qg-points {
  display: flex;
  flex-direction: column;
  padding: 2rem 4.5rem 6rem;
}

.qg-point {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* push text + box to opposite edges (ref framing) */
  gap: clamp(2.5rem, 5vw, 5rem);
  min-height: 80vh;
  padding: 3rem 0;
  opacity: 1;
}

.qg-point--reverse {
  flex-direction: row-reverse;
}

.qg-point__text {
  flex: 0 1 460px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.qg-point__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 2.25rem);
  letter-spacing: -0.18px;
  color: var(--color-black);
  line-height: 1.25;
}

.qg-point__body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.5rem);
  color: var(--color-grey);
  line-height: 1.65;
}

.qg-point__box {
  flex: 0 0 auto;
  width: min(48vw, 780px);
  aspect-ratio: 1 / 1;
  border-radius: 0px;
  background: var(--color-box-bg);
  overflow: hidden;
  position: relative;
}

.qg-point__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .qg-points { padding: 1rem 1.5rem 4rem; }
  .qg-point,
  .qg-point--reverse {
    flex-direction: column;
    min-height: 0;
    gap: 2rem;
    padding: 2rem 0;
  }
  .qg-point__box { width: min(340px, 78vw); }
  .qg-point__text { max-width: 100%; }
}

/* ─────────────────────────────────────────────
   8c. QUICK GLANCE — ENHANCED MODE OVERRIDES
   Added only when quick-glance-gsap.js confirms GSAP + ScrollTrigger
   loaded and the visitor hasn't requested reduced motion.

   Two phases:
     • .qg-intro — a pinned, 100vh stage holding the hero. GSAP slides
       the hero in, collapses/centres the nav, then slides hero + nav
       off-screen-left together (all via inline transforms).
     • .qg-points — NORMAL document flow, broken out to full viewport
       width. Each .qg-point is a full-height block that reveals as it
       scrolls up, one by one.
───────────────────────────────────────────── */
.qg-enhanced #quick-glance {
  /* pin-spacer must not be a flex item — flex sizing fights the
     spacer's explicit height. Must stay overflow-visible so the
     full-width .qg-points breakout isn't clipped by the content column. */
  display: block;
}

.qg-enhanced .qg-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  /* overflow: hidden;    */
  z-index: 1;         /* stay below the staged content overlay (z-index 5) */
}

.qg-enhanced .qg-hero {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
}

/* Points break out of the right-50% content column to span the full
   viewport (the nav has slid away by the time they're on screen).
   calc(100% - 100vw) pulls the left edge to the viewport's left edge at
   any nav width; body{overflow-x:hidden} keeps it scrollbar-free. */
.qg-enhanced .qg-points {
  width: 100vw;
  margin-left: calc(100% - 100vw);
  padding: 0;
}

.qg-enhanced .qg-point {
  min-height: 100vh;
  padding: 2.5rem clamp(2rem, 6vw, 8rem);
}
.qg-enhanced .qg-point:first-child {
  /* padding-top: 0rem ; */
}
.qg-enhanced .qg-point:last-child {
  padding-bottom: 0rem ;
}

/* While the intro is pinned, the content container is lifted into a
   full-viewport fixed overlay so the first point can fade in at the
   stage's top-left AS the hero + nav slide off (crossfade). When the pin
   releases it drops back to normal flow — the first point is already at
   the top, so there's no jump or blank gap. */
.qg-enhanced .qg-points.sf-staged {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin-left: 0;
  overflow: hidden;
  z-index: 0;
}

/* NOTE: .qg-point__text / .qg-point__box previously carried
   `will-change: transform, opacity` here. Removed — Quick Glance sets
   contentSelector, so initSectionFlow's per-item reveal loop early-returns
   (`if (content) return;`) and these elements receive no JS animation on any
   breakpoint; the CONTAINER (.qg-points) is what crossfades. That left 8
   elements permanently promoted to their own compositor layers for nothing.
   Per GSAP performance guidance: do not set will-change "just in case". */

@media (max-width: 1199px) {
  /* Tablet + mobile static mode (matches isMobile in quick-glance-gsap.js,
     widened to 1199px to cover tablet too — see the comment on isMobile
     there): the 100vh full-screen-per-point sizing above is only
     meaningful for the desktop reveal-one-at-a-time flow. Content here is
     always-visible, normal-flow, so points should size to their own
     content instead. */
  .qg-enhanced .qg-point,
  .qg-enhanced .qg-point--reverse {
    flex-direction: column-reverse ;
    justify-content: center;
    min-height: 0;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }

  /* In a column layout "flex: 1 1 420px" (from the baseline row layout)
     reads as a MAIN-axis basis and grows the text block to fill all
     leftover vertical space. It only needs to size to its own content. */
  .qg-enhanced .qg-point__text {
    flex: 0 0 auto;
    max-width: 100%;
        gap: 0.25rem;
  }

  .qg-enhanced .qg-point__box {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────
   8d. BENEFITS — ENHANCED MODE (section-flow)
   Same pinned-intro + full-bleed scrolling content as Quick Glance,
   reusing the existing Benefits markup (see section-flow init in
   quick-glance-gsap.js).
───────────────────────────────────────────── */
.qg-enhanced #benefits {
  display: block;   /* pin-spacer must not be a flex item */
}

/* The tilted benefit cards overhang the viewport horizontally; clip that
   at the wrapper. `overflow-x: clip` (not `hidden`) clips without
   creating a scroll container, so the sticky nav and GSAP pins still work. */
.qg-enhanced .cpa-sections-wrapper {
  overflow-x: clip;
}

.qg-enhanced .benefits-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 0;
  display: block;
  
}

.qg-enhanced .benefits-intro__card {
  position: absolute;
  inset: 0;
  margin-left: 0;
  height: 100%;
  transform: none;    /* GSAP owns the transform */
  transition: none;   /* no CSS transition — GSAP scrubs it */
}

/* Benefit cards break out to full viewport width; each tilts then
   straightens on scroll (diagonal reveal — see rotateReveal in
   quick-glance-gsap.js).

   Gap: a skewY(30deg) card's top-left corner shears UP by
   half-width × tan(30°) ≈ 28.9% of the card width (≲ 30vw) beyond its own
   layout box. The gap must exceed that rise or the tilted card bleeds
   over the straight card above it — max(55vh, 30vw) keeps them clear at
   any viewport shape (55vh matches the reference spacing on normal
   screens; the 30vw floor covers short-and-wide windows where 55vh alone
   would be smaller than the shear). Result: straight card + next card's
   tilted tip share the screen with ~100px of clear space, never touching,
   exactly like the reference. */
.qg-enhanced .benefits-cards {
  width: 100vw;
  margin-left: calc(100% - 100vw);
  display: flex;
  flex-direction: column;
  gap: max(7vh, 3vw);
  padding: 60vh clamp(1rem, 4vw, 5rem)  10vh;
  opacity: 1;
  transition: none;
  will-change: transform;
  transform: none;
}

/* While sliding in (see cardsEnterFromHero in quick-glance-gsap.js),
   .benefits-cards is lifted to a fixed, viewport-relative box — already at
   its normal full width (no growing, no left/top/width animation, just
   the width:100vw from the base rule above) — so GSAP's xPercent transform
   slide lands it flush against the viewport instead of whatever its
   normal-flow scroll position happens to be. Stays fixed through the
   entire card-reveal phase too (the "sticky" pin), then drops back to
   normal flow (this class removed, inline transform cleared) once the
   whole intro pin truly ends. Same treatment as .setup-slider.grow-stage
   below — kept as a near-identical mirror on purpose. */
.qg-enhanced .benefits-cards.grow-stage {
  position: fixed;
  top: 0;
  margin-left: 0;
  z-index: 2;
  right: 0px;
}

/* Belt-and-braces for the gap above: should any edge case still let a
   not-yet-revealed card's skewed edge reach the card above it, flex items
   paint in DOM order, so it would render ON TOP of the straightened card.
   Stack earlier cards higher so any residual bleed renders behind
   already-revealed content instead. */
.qg-enhanced .benefit-card:nth-child(1) { z-index: 5; }
.qg-enhanced .benefit-card:nth-child(2) { z-index: 4; }
.qg-enhanced .benefit-card:nth-child(3) { z-index: 3; }
.qg-enhanced .benefit-card:nth-child(4) { z-index: 2; }
.qg-enhanced .benefit-card:nth-child(5) { z-index: 1; }

.qg-enhanced .benefit-card {
  min-height: 43vh;
  margin: 0;
  border-radius: 0px;
  opacity: 1;                 /* GSAP owns rotation, not opacity */
  transition: none;
  will-change: transform;
  transform-origin: left top;
      position: relative;
}


@media (max-width: 1199px) {
  .qg-enhanced .benefit-card {
    min-height: 46vh;
  }
  /* Tablet + mobile is static mode (no skew, no tilt — see isMobile in
     quick-glance-gsap.js, widened to 1199px to cover tablet too), so the
     huge anti-collision desktop gap above has nothing to clear; keep the
     baseline compact stack instead. */
  .qg-enhanced .benefits-cards {
    gap: 2.5rem;
    padding: 2rem 1rem 3rem;
  }
}

/* ─────────────────────────────────────────────
   8e. HOW TO SET UP — ENHANCED MODE (section-flow)
   Intro card pins/slides like the others; the 4-step slider is the
   single full-bleed content block revealed on scroll.
───────────────────────────────────────────── */
.qg-enhanced #how-to-setup {
  display: block;
}

.qg-enhanced .setup-intro-panel {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 0;
  display: block;
  /* overflow: hidden; */
}

.qg-enhanced .setup-intro-panel__card {
  position: absolute;
  inset: 0;
  margin-left: 0;
  height: 100%;
  transform: none;
  transition: none;
}

.qg-enhanced .setup-slider {
  width: 100vw;
    margin-left: calc(100% - 100vw);
    opacity: 1;
    transition: none;
    will-change: transform;
    /* Cancels the base (non-enhanced, pre-.qg-enhanced) fallback rule's
       transform: translateY(50px) — without this, any moment GSAP's own
       inline transform override isn't present (before it first touches
       this element, or right after a clearProps), that stale 50px offset
       would show through instead of matching where the enhanced flow
       actually needs it. GSAP owns transform entirely once it takes over. */
    transform: none;

}

/* While sliding in (see cardsEnterFromHero in quick-glance-gsap.js),
   .setup-slider is lifted to a fixed, viewport-relative box — already at
   its normal full width (no growing, no left/top/width animation, just
   the width:100vw from the base rule above) — so GSAP's xPercent
   transform slide lands it flush against the viewport instead of
   whatever its normal-flow scroll position happens to be. Stays fixed
   through the entire stepping phase too (the "sticky" pin), then drops
   back to normal flow (this class removed, inline transform cleared)
   once the whole intro pin truly ends. */
.qg-enhanced .setup-slider.grow-stage {
  position: fixed;
  top: 0;
  margin-left: 0;
  z-index: 2;
  right: 0px;
  height: 100vh;
}

/* Tablet + mobile (matches quick-glance-gsap.js's isMobile breakpoint,
   widened to 1199px to cover tablet too): hero/intro cards get no pin and
   no GSAP transform there anymore (see the isMobile branches in
   initSectionFlow) — they render as normal, static, in-flow boxes instead
   of the fixed-height, absolutely-positioned slot the desktop pinned
   reveal needs. Without this, the parent wrappers would still reserve a
   full 100vh slot for a card that no longer fills it, leaving a large
   blank gap (or, at tablet widths, essentially blank/off-screen content)
   below each static card. */
@media (max-width: 1199px) {
  .qg-enhanced .qg-intro,
  .qg-enhanced .benefits-intro,
  .qg-enhanced .setup-intro-panel {
    height: auto;
    min-height: 0;
  }

  .qg-enhanced .qg-hero,
  .qg-enhanced .benefits-intro__card,
  .qg-enhanced .setup-intro-panel__card {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    
  }
}

/* ─────────────────────────────────────────────
   9. BENEFITS SECTION — intro card + 5 numbered cards
   Figma 7671:9438
───────────────────────────────────────────── */
.cpa-section--benefits {
  display: flex;
  flex-direction: column;
}

/* --- Benefits intro panel --- */
.benefits-intro {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  /* overflow: hidden; */
}

.benefits-intro__card {
  margin-left: 25%;
  flex: 1;
  background: var(--color-blue);
  border-radius: 56px 0 0 56px;
  padding: 5rem 4.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transform: translateX(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.benefits-intro__card.is-visible {
  transform: translateX(0);
}

.benefits-intro__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.benefits-intro__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  max-width: 480px;
}

.benefits-intro__illus {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* opacity: 0.28; */
  margin-top: 3rem;
}

.benefits-intro__illus img {
      width: 85%;
    object-fit: contain;
    display: block;
}

/* --- Numbered benefit cards --- */
.benefits-cards {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 4rem 0 5rem;
}

.benefit-card {
  background: #2563EB;
  border-radius: 16px;
  min-height: 380px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.benefit-card__num {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 200;
  /* 26vw ≈ 500px at the 1920 reference — the number spans ~3/4 of the
     card's height in the Figma design, so the cap must stay well above
     the old 320px or the digit reads too small next to the copy. */
  font-size: clamp(240px, 26vw, 500px);
  line-height: 0.85;
  color: var(--color-white);
  padding: 0.75rem 0 0 2.5rem;
  align-self: start;
}

.benefit-card__content {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 3.5rem 2.5rem 3.5rem;
}

.benefit-card__title {
  font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.25rem, 1.25vw, 1.375rem);
    color: var(--color-white);
    text-align: right;
}

.benefit-card__body {
  font-family: var(--font-body);
    font-size: clamp(1.25em, 1.05vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    text-align: right;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    max-width: 100vw;
    margin-left: auto;
    padding-top: 1.5rem;
}

/* Scroll-in animation — applied via JS observer */
.benefit-card,
.setup-slider {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.benefit-card.is-visible,
.setup-slider.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   10. SETUP SECTION
   Figma 7832:9205, 7866:9276, 7946:8798, 7914:8783
───────────────────────────────────────────── */
.cpa-section--setup {
  display: flex;
  flex-direction: column;
}

/* --- Intro panel (mirrors Benefits intro) --- */
.setup-intro-panel {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  /* overflow: hidden; */
}

.setup-intro-panel__card {
  margin-left: 25%;
  flex: 1;
  background: var(--color-blue);
  border-radius: 56px 0 0 56px;
  padding: 5rem 4.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transform: translateX(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.setup-intro-panel__card.is-visible {
  transform: translateX(0);
}

.setup-intro-panel__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.setup-intro-panel__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  max-width: 480px;
}

.setup-intro-panel__illus {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 3rem;
}

.setup-intro-panel__illus img {
  width: 85%;
    /* max-width: 420px; */
    object-fit: contain;
    display: block;
}

/* --- Step slider --- */
.setup-slider {
  background: var(--color-blue);
  padding: 10rem 10rem 0rem;
}

.setup-slider__track {
      display: grid;
    align-items: end;
}

.setup-slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.setup-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.setup-slide__card {
  background: var(--color-white);
    border-radius: 24px;
    overflow: hidden;
    padding: 2.5rem 2.5rem 0;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  
}

.setup-slide__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.setup-slide__tabs {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.setup-slide__tab {
  background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1rem;
    font-size: 1.75rem;
    color: #2c2c2c;
  padding: 0;
  line-height: 1.4;
  transition: color 0.2s;
}

.setup-slide__tab.is-active {
  font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-blue);
    font-size: 1.75rem;
}

.setup-slide__tab:hover:not(.is-active) {
  color: var(--color-black);
}

.setup-slide__arrows {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
}

.setup-slide__arrow {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #DEDEDE;
  background: var(--color-white);
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}

.setup-slide__arrow:hover:not(:disabled) {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.setup-slide__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.setup-slide__hr {
  border: none;
  border-top: 1px solid #000000;
  margin: 0 -2.5rem;
}

/* Mobile-only step title (see cpa.php) — desktop shows the current step's
   name inline as the active tab itself (see .setup-slide__tab.is-active),
   which reads fine on a wide tab bar but has no room to wrap on mobile;
   mobile instead keeps every tab a plain number (see the mobile override
   below) and shows the title on its own line here. */
.setup-slide__mobile-title {
  display: none;
}

.setup-slide__body {
  padding: 2rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.setup-slide__desc {
      font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.25vw, 2rem);
    color: var(--color-grey);
    line-height: 1.7;
}


.setup-slide__desc--cols {
  display: grid;
  /* grid-template-columns: 1fr 1fr;
  gap: 3rem; */
}

.setup-slide__desc p {
  /* margin: 0; */
}

.setup-slide__screen {
  background: #111;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
      height: 500px;
}

.setup-slide__screen img {
      width: auto;
    height: 400px;
    display: block;
    object-fit: contain;
    padding: 1rem 2rem;
}

.setup-slide__screen--golive {
  min-height: 320px;
}

.setup-golive-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3rem, 7vw, 6rem);
  color: #F5C500;
  letter-spacing: -0.5px;
}

/* ─────────────────────────────────────────────
   11. FAQs SECTION
   Figma 7943:8611, 7946:8688
───────────────────────────────────────────── */
.cpa-section--faqs {
     display: flex;
    flex-direction: column;
    padding: 58rem 3rem 6rem 3rem;
    background: var(--color-white);
}

.faqs-inner {
  width: 100%;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Row: card + circle button side-by-side */
.faq-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.faq-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card */
.faq-item {
  flex: 1;
    min-width: 0;
    background: var(--color-white);
    border: 1.5px solid #505050;
    border-radius: 60px;
    overflow: hidden;
    transition: background 0.35s ease, border-color 0.35s ease;
}
button:focus {
    outline: 1px dotted;
    outline: none !important;
}

.faq-row:hover .faq-item {
  border-color: #AAAAAA;
}

.faq-row.is-open .faq-item {
  background: #1E1E1E;
  border-color: #1E1E1E;
}

.faq-item__question {
      font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.0625rem, 2.3vw, 2.25rem);
    color: var(--color-black);
    line-height: 1.4;
    padding: 4rem ;
    margin: 0;
    transition: color 0.35s ease;
}

.is-open .faq-item__question {
    padding-bottom: 2rem;
}

.faq-row.is-open .faq-item__question {
  color: #6b7380;
}

.faq-item__answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 2.25rem;
  transition: max-height 0.45s ease, opacity 0.3s ease, padding 0.35s ease;
}

.faq-row.is-open .faq-item__answer {
  max-height: 400px;
  opacity: 1;
      padding: 0 4rem 4rem;
}

.faq-item__answer p {
      font-family: var(--font-body);
    /* Was a fixed 1.35rem at every breakpoint — on mobile that rendered
       larger (21.6px) than the question itself (1rem/16px, see the mobile
       override below), the reverse of the intended hierarchy. Scales down
       alongside .faq-item__question's own clamp instead, staying under it
       at every width. */
    font-size: clamp(0.9375rem, 1.1vw, 1.35rem);
    color: #ffffff;
    line-height: normal;
    margin: 0;
    text-align: justify;
    font-weight: 200;
}

/* Circle toggle button */
.faq-toggle {
      width: 90px;
    height: 90px;
  border-radius: 50%;
  border: 1.5px solid #D0D0D0;
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1.375rem;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.faq-row:hover .faq-toggle {
  border-color: #999;
}

.faq-row.is-open .faq-toggle {
  background: #1E1E1E;
  border-color: #1E1E1E;
}

.faq-toggle svg {
  color: #92959c;
  transition: transform 0.35s ease, color 0.35s ease;
}

.faq-row:hover .faq-toggle svg {
  color: #333;
}

.faq-row.is-open .faq-toggle svg {
  transform: rotate(45deg);
  color: rgba(255, 255, 255, 0.85);
}

/* ─────────────────────────────────────────────
   12. SECTIONS RESPONSIVE
───────────────────────────────────────────── */

/* Tablet (768px – 1199px) */
@media (max-width: 1199px) {
  .cpa-side-nav {
    width: 280px;
    padding-left: 2rem;
  }

  .cpa-side-nav__item {
    font-size: 2rem;
    gap: 1rem;
  }

  .cpa-side-nav__arrow img { width: 22px; }

  .cpa-side-nav nav { gap: 2rem; }

  .intro-card {
    border-radius: 48px 0 0 48px;
    padding: 4rem 3rem 0;
  }

  .benefits-intro__card { margin-left: 15%; border-radius: 40px 0 0 40px; padding: 4rem 3rem 0; }
  .benefit-card { grid-template-columns: 220px 1fr; }
  .benefit-card__num { font-size: clamp(180px, 20vw, 240px); }

  .setup-intro-panel__card { margin-left: 15%; border-radius: 40px 0 0 40px; padding: 4rem 3rem 0; }
  .setup-slider { padding: 3rem 2rem 4rem; }

  .cpa-section--faqs { padding: 4rem 1.5rem 4rem 2rem; }
  .faq-toggle { width: 52px; height: 52px; }
}

/* Mobile + Tablet (<1200px) — tablet was requested to use the exact same
   nav/menu treatment and stacked full-width layout as mobile, so this block
   (originally max-width:767px) now covers the whole tablet-and-below range.
   Desktop (>=1200px) is untouched. The narrower 374px block further down
   still fine-tunes the smallest phones on top of this. */
@media (max-width: 1199px) {
  .cpa-sections-wrapper { flex-direction: column; }

  /* Mobile CSS-baseline nav (no JS / reduced motion / GSAP unavailable —
     see the progressive-enhancement note at the top of quick-glance-gsap.js):
     a plain, compact, always-visible strip. The full-viewport-height
     "announcement" treatment below is opt-in via .qg-enhanced only, so a
     failed/skipped enhancement never leaves four permanent full-screen
     blocks with no way to shrink them. */
  .cpa-side-nav {
    position: relative;
    width: 100%;
    height: auto;
    /* Reset the desktop rule's flex/centering — a mobile media query only
       overrides properties it explicitly sets, so display/align-items
       would otherwise still cascade through from the unconditional
       desktop .cpa-side-nav rule above. */
    display: block;
    padding: 1.5rem 1.25rem 1rem;
    /* border-bottom: 1px solid var(--color-track); */
  }

  /* Enhanced only: a plain, constant-height (100vh) block — never
     position:fixed, no GSAP pin. Purely gives the sticky inner <nav> below
     enough scroll room to shrink in before naturally releasing back into
     normal document flow. Four near-identical copies exist in the DOM:
     Quick Glance's original .cpa-side-nav plus one .cpa-side-nav--copy
     duplicate placed right before each of Benefits/How To Set Up/FAQs (see
     cpa.php) — each already shows only its own section's item as active,
     so there's no cross-section hand-off to manage. */
  .qg-enhanced .cpa-side-nav {
    height: 100vh;
  }

  /* Duplicate copies only ever exist to feed the enhanced scroll effect —
     without it they'd just be three redundant, non-shrinking nav blocks. */
  .qg-enhanced .cpa-side-nav--copy { display: block; }

  .cpa-side-nav nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  /* The actual visible, shrinking "announcement" card (see
     initMobileNavCopies() in quick-glance-gsap.js): position:sticky —
     distinct from both position:fixed and plain position:relative — keeps
     it visible near the top of the viewport for exactly as long as its
     (constant-height) parent above has room, then releases back into
     normal flow on its own the moment the parent's bottom is reached, with
     no JS position management needed at all. Scrubs down to a compact
     strip as the section scrolls past: collapsing the other three items'
     opacity/height to 0 in place (their position never changes, they just
     fade and shrink away) is what carries the active item from
     screen-centre up to the top; nothing transforms the active item
     directly. */
  .qg-enhanced .cpa-side-nav nav {
    position: sticky;
    top: var(--cpa-header-height, 0px);
    height: 100vh;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem 1.25rem 1rem;
    /* border-bottom: 1px solid var(--color-track); */
    background: var(--color-white);
  }

  .cpa-side-nav__item {
    font-size: 1.50rem;
        gap: 0.5rem;
        white-space: normal;
        flex-shrink: 0;
        margin-bottom: 0.75rem;
        height: auto;
        overflow: hidden;
  }

  /* Cancels the desktop-only active-item indent (see the unqualified
     .cpa-side-nav__item.is-active rule above) — the mobile reference
     keeps every item flush to the same left edge regardless of state. */
  .cpa-side-nav__item.is-active { left: 0; }

  .cpa-side-nav__arrow img { width: 16px; }

  /* Intro card — full-width on mobile */
  .cpa-section--intro { min-height: 80vh; }

  .intro-card {
            margin-left: 0px;
        border-radius: 40px 40px 0 0px;
        padding: 3rem 1.75rem 0;
        gap: 8.5rem;
  }

  /* Benefits intro — full-width on mobile */
  .benefits-intro__card {
    margin-left: 0.75rem;
        border-radius: 40px 40px 0 0px;
        padding: 3rem 1.75rem 0;
        gap: 8.5rem;
  }

  /* Benefit cards — number sits beside the title on one row, then a tall
     gap before the body, which sits centred at the card's bottom (see
     reference: mobile-benefit-card.png). */
  .benefit-card {
    grid-template-columns: auto 1fr;
    min-height: 380px;
  }

  .benefit-card__num {
    font-size: 3.5rem;
    line-height: 1;
    padding: 1.75rem 0 0 1.5rem;
  }

  .benefit-card__content {
    padding: 1.9rem 1.5rem 2rem 0.5rem;
  }

  /* Body text becomes a bottom-anchored overlay so it can sit "centred at
     the card's bottom" per the comment above. Applies across the whole
     tablet-and-below range now (this block was widened to 1199px so tablet
     matches mobile) — the earlier two-column-grid caveat no longer holds
     because tablet now uses the same single-column .benefit-card grid as
     mobile (grid-template-columns: auto 1fr, set above in this block). */
  .benefit-card__body {
    font-size: clamp(1rem, 1.05vw, 1.0625rem) !important;
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 1.5rem;
  }

  /* Setup — a compact, fully-rounded "floating" card on mobile (see
     reference: mobile-how-to-setup.png), instead of desktop's flush-bottom
     panel. */
  .setup-intro-panel__card { margin-left: 0.75rem; border-radius: 40px 40px 0 0px; padding: 3rem 1.75rem 0; gap: 8.5rem;}
  .setup-slider { padding: 1.5rem 1rem 2.5rem; position: relative;
        top: -1px; }

  .setup-slide__card {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 24px;
  }

  .setup-slide__hr { margin: 0 -1.25rem; }

  .setup-slide__nav { gap: 1rem; }
  .setup-slide__tabs { gap: 1.25rem; }

  /* Every tab reads as a plain number on mobile — there's no room for the
     active tab's full step name inline (see .setup-slide__mobile-title,
     which shows that text as its own line instead). The real text stays
     in the DOM (still the accessible name), just visually collapsed. */
  .setup-slide__tab { font-size: 1.375rem; }
  .setup-slide__tab.is-active {
    font-size: 0;
  }
  .setup-slide__tab.is-active::before {
    content: attr(data-step);
    font-size: 1.375rem;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-blue);
  }

  .setup-slide__mobile-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--color-blue);
    margin: 0;
  }

  .setup-slide__body { padding: 1.5rem 0 0; gap: 1.25rem; }
  .setup-slide__desc--cols { grid-template-columns: 1fr; gap: 1rem; }

  /* Screenshot area — desktop's fixed 500px height (sized for a wide
     two-column layout) made this card nearly 1000px tall on a narrow
     viewport; let it size to the image's own aspect ratio instead. */
  .setup-slide__screen {
            height: 232px;
        min-height: 232px;
    padding: 1rem;
  }
  .setup-slide__screen img {
    width: 100%;
    height: auto;
    max-height: 220px;
    padding: 0;
  }
  .setup-slide__screen--golive { min-height: 232px; }

  /* FAQs */
  .cpa-section--faqs { padding: 3rem 0.75rem 4rem 1.25rem; }
  .faq-row { gap: 0.75rem; }
  .faq-toggle { width: 48px; height: 48px; margin-top: 1rem; }
  .faq-item__question { font-size: 1rem; padding: 1.5rem 1.5rem; }
  .faq-item { border-radius: 20px; }
  .faq-item__answer { padding: 0 1.5rem; }
  .faq-row.is-open .faq-item__answer { padding: 0 1.5rem 1.5rem; }
}

/* ─────────────────────────────────────────────
   8. CTA SECTION
───────────────────────────────────────────── */
.cpa-cta {
    background: #EEF1F8;
    padding: 8.5rem 8.5rem;
    height: 100vh;
    display: grid;
}

.cpa-cta__card {
  background: var(--color-blue);
  border-radius: 40px;
  padding: 4.5rem 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.cpa-cta__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cpa-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: 1.05;
  color: var(--color-white);
  letter-spacing: -1.5px;
  margin: 0;
}

.cpa-cta__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.cpa-cta__sub {
      font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.25vw, 1.35rem);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    max-width: 100%;
    margin: 0;
}

.cpa-cta__actions {
  display: flex;
  gap: 0.875rem;
  flex-shrink: 0;
}

.cpa-cta__btn {
      padding: 0.875rem 1.75rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.cpa-cta__btn--solid {
  background: var(--color-white);
  color: var(--color-blue);
  border: none;
}

.cpa-cta__btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.cpa-cta__btn:hover { background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.6); }
.cpa-cta__btn--outline:hover {
  background: var(--color-white);
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
  
}




/* ─────────────────────────────────────────────
   9. CPA QUERY MODAL (Figma node 8840:5393)
───────────────────────────────────────────── */
.cpa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 35, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* An open modal must always be the topmost UI — kept above any sitewide
     fixed-position overlay rather than the 2000 it used to sit at, which
     let such overlays render over the bottom of this one (covering the form). */
  z-index: 100000;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cpa-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Outer shell only — it sizes and clips, it does NOT scroll. All padding,
   gap and the flex row live on .cpa-modal_main below, which is the single
   scroll container. Keeping the scroll off this element is what lets
   .cpa-modal__close stay pinned to the modal's corner instead of scrolling
   away with the form. */
.cpa-modal {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1120px;
  background: linear-gradient(135deg, #F9FAFB 0%, #E5EFFF 100%);
  border-radius: 0px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  /* % of the overlay's own box, not vh: main.js pins the overlay's height
     to window.visualViewport on mobile so this shrinks with the on-screen
     keyboard instead of staying sized to the pre-keyboard layout viewport
     (which hides the lower fields/submit button behind the keyboard with
     nothing left for overflow-y to actually scroll). */
  max-height: 94%;
  overflow: hidden;
}

/* The one and only scroll container. It fills the shell edge-to-edge, so a
   touch-drag started anywhere inside the popup — over the left panel, the
   labels, the gaps between fields, even the textarea's own padding — lands
   on this element and scrolls the form. */
.cpa-modal_main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3.75rem;
  padding: 2.75rem;
  width: 100%;
  /* Required for a flex child to be allowed to shrink below its content's
     height; without it overflow-y never engages and there is nothing to
     scroll. */
  min-height: 0;
  overflow-y: auto;
  /* Without this, overflow:auto containers can be sluggish or fail to
     respond to a touch-scroll gesture at all on iOS Safari — the modal
     scrolls fine with a mouse/trackpad but reads as "broken" on a real
     phone. */
  -webkit-overflow-scrolling: touch;
  /* Keep a scroll that runs off the top/bottom of the form from chaining
     into the page behind the overlay. */
  overscroll-behavior: contain;
  /* Claim vertical drags for scrolling rather than leaving them ambiguous;
     horizontal gestures still reach the page/browser. */
  touch-action: pan-y;
}

.cpa-modal-overlay.is-open .cpa-modal {
  /* transform: translateY(0) scale(1); */
}

.cpa-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.07);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.2s;
  /* Above .cpa-modal_main, which now fills the shell edge-to-edge and would
     otherwise paint (and take the taps) over this. */
  z-index: 2;
  /* This button sits outside the scroll container, so the browser has no
     scrollable ancestor to pan here and a drag starting on it would do
     nothing. Claim the gesture so main.js's overlay touchmove handler can
     forward it to .cpa-modal_main by hand. Taps are unaffected. */
  touch-action: none;
}

.cpa-modal__close:hover { background: rgba(0, 0, 0, 0.13); }

/* Left panel */
.cpa-modal__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
  gap: 2rem;
}

.cpa-modal__left-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cpa-modal__at-wrap {
      display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-blue);
    border-radius: 0px;
    flex-shrink: 0;
}

.cpa-modal__title-block {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.cpa-modal__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.25;
  letter-spacing: -0.18px;
  color: var(--color-black);
  margin: 0;
}

.cpa-modal__title span { color: var(--color-blue); }

.cpa-modal__desc {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-grey);
  line-height: 1.6;
  margin: 0;
}

/* Stats */
.cpa-modal__stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cpa-modal__stat {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cpa-modal__stat img {
        width: 45px;
    height: 45px;
    flex-shrink: 0;
    background: #fff;
    padding: 10px;
    border: 1px solid #c5c5c5;
}

.cpa-modal__stat-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cpa-modal__stat-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-black);
  margin: 0;
  line-height: 1;
}

.cpa-modal__stat-desc {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-grey);
  margin: 0;
  line-height: 1;
}

/* Right form card */
.cpa-modal__form-wrap {
  background: var(--color-white);
  border-radius: 20px;
  padding: 2rem;
  flex-shrink: 0;
  width: 440px;
}

.cpa-modal__form {
      display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cpa-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.10rem;
  position: relative;
}

.cpa-form-group label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-black);
  line-height: normal;
    margin: 0px 0px 3px;
}

.cpa-form-group input,
.cpa-form-group textarea {
      width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-black);
    border-radius: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1rem;
    color: #000000;
    background: var(--color-white);
    transition: border-color 0.2s;
    outline: none;
    box-sizing: border-box;
    height: 44px;
}

.cpa-form-group input::placeholder,
.cpa-form-group textarea::placeholder {
  color: var(--color-grey);
  font-style: italic;
}

.cpa-form-group input:focus,
.cpa-form-group textarea:focus { border-color: var(--color-blue); }

.cpa-form-group textarea {
  resize: none;
    height: 120px;
    min-height: 120px;
}


  .cpa-field-msg {
    font-size: 0.75rem;
    color: #DC2626;
    margin: 0;
    min-height: 0.875rem;
    position: absolute;
    bottom: -20px;
    left: 0px;

}

.cpa-modal__submit-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cpa-modal__submit {
  width: 100%;
  padding: 0.65rem 1.75rem;
  background: var(--color-blue);
  color: var(--color-white);
  border: none;
  border-radius: 2.375rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.09px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cpa-modal__submit:hover { opacity: 0.88; }

.cpa-modal__submit-note {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-grey);
  text-align: center;
  margin: 0;
}

/* Toast notifications */
.cpa-toast-wrap {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  /* Must outrank .cpa-modal-overlay's z-index: 100000 (style.css:2223) —
     the modal stays open for a few seconds after the API responds, so a
     toast fired from that response needs to render above it, not behind
     it, to actually be visible. */
  z-index: 100010;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.cpa-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 260px;
  max-width: 360px;
  padding: 0.9rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-white);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cpa-toast__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.cpa-toast__msg {
  flex: 1;
}

.cpa-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.cpa-toast--success { background: #16A34A; }
.cpa-toast--warning  { background: #D97706; }
.cpa-toast--error    { background: #DC2626; }

/* ─────────────────────────────────────────────
   CTA + MODAL RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1199px) {
  .cpa-cta { padding: 3rem 2rem; }
  .cpa-cta__card { padding: 3.5rem 3rem 3rem; gap: 4rem; }
  .cpa-modal_main { padding: 2rem; gap: 3rem; }
  .cpa-modal__form-wrap { width: 380px; }
}

@media (max-width: 900px) {
  .cpa-modal { max-height: 90%; }
  /* Stacking (and therefore align-items) belongs to the scroll container:
     centring a column that overflows its box would push the first field
     out the top, unreachable — flex-start keeps the scroll range honest. */
  .cpa-modal_main { flex-direction: column; align-items: flex-start; }
  .cpa-modal__left { justify-content: flex-start; }
  .cpa-modal__form-wrap { width: 100%; }
}

@media (max-width: 767px) {
  .cpa-cta {         padding: 5rem 1rem; }
  .cpa-cta__card { padding: 2.5rem 1.75rem 2.25rem; gap: 2.5rem; border-radius: 28px; }
  .cpa-cta__footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .cpa-cta__actions { flex-direction: column; width: 100%; }
  .cpa-cta__btn { justify-content: center; }
  .cpa-modal-overlay { padding: 0; align-items: flex-end; }
  /* max-height raised from 88vh and every internal gap/padding tightened
     below — at the old spacing, stacked content ran to ~1103px against an
     ~743px-tall modal (390×844 viewport): the form was still reachable by
     scrolling, but nothing above the fold hinted at that, so it read as a
     cut-off, broken popup rather than a scrollable one.
     94vh -> 94%: see main.js's syncOverlayToViewport — on mobile the
     overlay's own height is kept pinned to window.visualViewport, so this
     percentage shrinks with the on-screen keyboard instead of staying
     sized to the pre-keyboard layout viewport. */
  .cpa-modal { border-radius: 20px 20px 0 0; max-height: 94%; }
  /* Padding lives here, not on the shell: it must scroll WITH the content,
     otherwise the bottom padding is clipped and the submit button ends up
     flush against the modal's bottom edge. */
  .cpa-modal_main { flex-direction: column; align-items: stretch; padding: 1.75rem 0rem 0px; gap: 1.25rem; }
  .cpa-modal__title { font-size: 1.75rem; }
  .cpa-modal__desc { font-size: 1rem; }
  .cpa-modal__left { gap: 1.25rem; }
  .cpa-modal__left-top { gap: 1rem; padding: 0px 1.75rem;}
  .cpa-modal__title-block { gap: 0.75rem; }
  .cpa-modal__stats { gap: 0.875rem; display: none; }
  .cpa-modal__form-wrap { width: 100%; padding: 0; }
  .cpa-modal__form { gap: 1rem; padding: 25px; }
  .cpa-form-group textarea { height: 90px; }
  .cpa-display__currency {
    top: -0.7rem;
}
.cpa-display__label {
    top: -0.6rem;
}
.qg-enhanced .qg-points {
    width: 100vw;
    margin-left: initial;
    padding: 0;
}
.setup-slide__mobile-title {
        display: block;
        font-family: var(--font-heading);
        font-weight: 500;
        font-size: 1.1rem;
        color: var(--color-blue);
        margin: 0;
        height: 46px;
    }
    .setup-slide__body {
        height: 525px;
    }
    .setup-slide__desc {

    height: 180px;
}
.setup-slide__mobile-title {
        height: 46px;
    }

        .setup-slide__screen {
        height: 232px;
        min-height: 232px;
        padding: 1rem;
    }
        .setup-slide__screen img {
        width: 100%;
        height: 220px;
        max-height: 220px;
        padding: 0;
    }
}
.cf-turnstile {
    display: flex;
    width: 100%;
    min-width: 100%;
}
 iframe{
    width: 100% !important;
    min-width: 100% !important;
}