/* ==========================================================================
   TALORIFY LANDING PAGE: THE NEW SECTIONS AND THE PRODUCT DEMO
   Loaded after style.css, so it adds to it and, where they disagree, wins.

   One job for the whole page: get the visitor to join the waitlist.

   Contents
     1. Tokens
     2. Hero: eyebrow, fine print, the live demo
     3. How it works (pinned scroll, built from the user's own measured spec)
     4. The problem
     5. What you get
     6. The promise (dark panel)
     7. Who it's for
     8. Questions (FAQ)
     9. Sticky button on phones
    10. Motion and reduced motion
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --lp-radius-card: 24px;
  --lp-radius-inner: 16px;
  --lp-radius-panel: 32px;
  --lp-section-space: 104px;
  --lp-white: #FFFFFF;
}

.lp-section { padding: var(--lp-section-space) 0; }
.lp-title { max-width: 720px; }
.lp-lead {
  margin-top: 18px;
  max-width: 560px;
  font-family: var(--font-support);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}


/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero-section { padding-top: 150px; padding-bottom: 80px; }

.hero-eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: var(--lp-white);
  color: var(--color-text-secondary);
  font-family: var(--font-support);
  font-size: 0.9rem;
  font-weight: 500;
}

.hero-fineprint {
  margin-top: 14px;
  font-family: var(--font-support);
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* The demo: a small window that plays the three steps in a loop */
.hero-demo { width: min(360px, 100%); margin: 56px auto 0; }
.hero-demo-stage { position: relative; height: 350px; }
.hero-demo-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.5s var(--ease-smooth), transform 0.6s var(--ease-spring);
  pointer-events: none;
}
.hero-demo-screen.is-active { opacity: 1; transform: none; }

.hero-demo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hero-demo-dots i {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-ink) 18%, transparent);
  transition: width 0.3s var(--ease-spring), background 0.3s ease;
}
.hero-demo-dots i.is-active { width: 22px; background: var(--color-ink); }


/* --- The floating pill nav --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 22px 0;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
  transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header .header-container {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 980px;
  width: 90%;
  margin: 0 auto;
  padding: 8px 12px 8px 26px;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

/* When scrolling down: navbar expands smoothly */
.site-header.is-scrolled {
  padding: 14px 0;
}

.site-header.is-scrolled .header-container {
  max-width: 1240px;
  width: calc(100% - 48px);
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
}

.site-header .brand-logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-header .brand-logo img { height: 30px; width: auto; }
.site-header .nav-links {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 36px;
}
.site-header .nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: 6px 2px;
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-header .nav-link:hover, .site-header .nav-link.is-active { color: var(--color-text-primary); }

/* Smooth sliding line indicator that glides without skipping */
.nav-sliding-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--color-ink, #191919);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  will-change: transform, width;
}

/* The Add to Chrome button with white circle arrow badge */
.btn-with-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 22px;
  border-radius: 9999px;
  background: var(--color-ink, #191919);
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s var(--ease-spring);
  box-sizing: border-box;
}

.btn-with-arrow:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-arrow-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #191919;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring);
}

.btn-arrow-badge svg {
  display: block;
}

.btn-with-arrow:hover .btn-arrow-badge {
  transform: translate(2px, -2px);
}

.site-header .header-action .btn-with-arrow {
  padding: 6px 8px 6px 20px;
  font-size: 0.92rem;
}

.site-header .header-action .btn-arrow-badge {
  width: 26px;
  height: 26px;
}

/* --- Hero --- */
.hero-section {
  position: relative;
  aspect-ratio: 2902 / 1948;
  padding: 150px 0 0;
  background-image: url('assets/hero%20Background%20new.webp');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  text-align: center;
  align-items: flex-start; /* style.css centers the content vertically; here padding-top alone should place it, so it stays in the sky at any width */
}


/* ==========================================================================
   FRAMER-MOTION STYLE SLOW SCROLL SECTION PULL-UP (BIDIRECTIONAL)
   Sections smoothly pull up and scale into focus on scroll down,
   and smoothly ease back down on scroll up with spring-damped lerp.
   ========================================================================== */
.fm-scroll-section {
  will-change: transform, opacity;
  transform-origin: center top;
  transition: none !important;
}

.fm-scroll-card {
  will-change: transform;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fm-scroll-section,
  .fm-scroll-card {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   SCROLL-DRIVEN READING TEXT ("Reads Like Text, Not Objects")
   Section titles start grayed out in var(--color-text-light).
   As the user scrolls down, words transition into normal solid color
   (var(--color-text-primary)) in natural reading order word by word.
   ========================================================================== */
.reading-title {
  /* Natural typography container */
}

.read-word {
  display: inline-block;
  white-space: pre-wrap;
  color: var(--color-text-light, #a1a1aa);
  color: color-mix(in srgb, var(--color-text-primary, #191919) calc(var(--word-p, 0) * 100%), var(--color-text-light, #a1a1aa));
  transition: color 0.12s ease-out;
  will-change: color;
}

@media (prefers-reduced-motion: reduce) {
  .read-word {
    color: var(--color-text-primary) !important;
    transition: none !important;
  }
}
.hero-section .hero-container { max-width: 1120px; padding: 0 24px; }

/* ==========================================================================
   HERO ENTRANCE TEXT REVEAL ANIMATION (PAGE LOAD)
   Smooth editorial reveal: title, subtitle, and CTA buttons bloom
   and lift into place with zero layout shift and zero JS overhead.
   ========================================================================== */
@keyframes heroTextReveal {
  0% {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: 26px;
  text-wrap: balance;
  animation: heroTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  will-change: transform, opacity;
}
.hero-italic { font-style: italic; font-weight: 500; color: color-mix(in srgb, var(--color-ink) 60%, var(--color-surface)); }
.hero-icon-inline {
  display: inline-grid; place-items: center;
  width: 0.9em; height: 0.9em;
  background: var(--color-ink); color: var(--color-surface);
  border-radius: 50%;
  vertical-align: -0.06em;
  margin: 0 0.1em;
}
.hero-icon-inline svg { width: 55%; height: 55%; }
.hero-subtitle {
  font-family: var(--font-support);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 40px;
  text-wrap: pretty;
  animation: heroTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
  will-change: transform, opacity;
}
.hero-buttons {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 60px;
  flex-wrap: wrap;
  justify-content: center;
  animation: heroTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-subtitle,
  .hero-buttons {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
.btn-pill-soft {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px 12px 24px; height: auto;
  background: var(--color-tone-2); color: var(--color-text-primary);
  border-radius: 9999px; font-family: var(--font-support);
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  transition: background 0.2s var(--ease-spring);
}
.btn-pill-soft:hover { background: color-mix(in srgb, var(--color-ink) 12%, var(--color-surface)); }
.btn-pill-soft .btn-play { width: 14px; height: 14px; color: var(--color-ink); }

/* The sign-up sits just under the picture */
.hero-signup { max-width: 560px; margin: 0 auto; }

@media (max-width: 900px) {
  .site-header .header-container { padding: 8px 14px 8px 20px; gap: 12px; }
  .site-header .nav-links, .site-header .header-action { display: none; }
  .site-header .mobile-toggle { display: flex; }
  .hero-section { aspect-ratio: auto; min-height: 760px; padding: 120px 0 0; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .desktop-br { display: none; }
  .hero-buttons { margin-bottom: 40px; }
}


/* ==========================================================================
   3. HOW IT WORKS
   Built from the user's own measured 1207px-wide spec, not a reference file. Values noted "guessed" in the
   chat reply are marked (guess) below so they're easy to find and revise.
   ========================================================================== */
.hiw2 { position: relative; height: 220vh; }
.hiw2-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
/* Matches .section-container (the rest of the site's shared content width/padding) exactly, so this
   section's left edge lines up with every other section's instead of sitting ~35px further right - the
   spec's own 1207px/100px numbers didn't match the site's actual shared container and produced exactly
   that visible misalignment, confirmed by comparing .hiw2-steps's left edge against .problem-media's. */
.hiw2-container { max-width: 1140px; margin: 0 auto; padding: 0 32px; width: 100%; }

.hiw2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 58px; }
.hiw2-label { font-family: var(--font-support); font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 14px; } /* (guess) */
.hiw2-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.75rem); /* (guess) */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.hiw2-desc {
  font-family: var(--font-support);
  font-size: 1rem; /* (guess) */
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 410px;
  text-align: right;
  padding-top: 0.3em; /* nudges the paragraph's first line to align with the H2's first line, not its top edge */
}

/* Same 442:543 ratio the spec gave, but as fr units instead of fixed px - fixed widths left ~73px of the
   container unused on the right (442+18+543=1003px of a 1076px-wide content area), which is exactly why
   the photo/card couldn't actually reach the description text's right edge no matter how they were aligned
   inside the frame - the frame itself was falling short of the container's edge. fr fills it while keeping
   the same proportions. */
.hiw2-body { display: grid; grid-template-columns: 442fr 543fr; gap: 18px; align-items: start; }

/* ---- Left: steps + the one sliding highlight ---- */
.hiw2-steps { position: relative; list-style: none; }
.hiw2-highlight {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  background: var(--color-step-active);
  border-radius: 10px 0 0 10px;
  transition: transform 550ms cubic-bezier(.22,1,.36,1), height 550ms cubic-bezier(.22,1,.36,1);
  z-index: 0;
  pointer-events: none;
}
.hiw2-step { position: relative; z-index: 1; padding: 20px 17px; cursor: pointer; outline: none; }
.hiw2-step:focus-visible { outline: 2px solid var(--color-btn-dark); outline-offset: 2px; border-radius: 10px 0 0 10px; }
.hiw2-step-num {
  display: block;
  font-family: var(--font-support);
  font-size: 0.75rem; /* ~12px, per the user's screenshot */
  font-weight: 600;
  color: #4A4A45; /* (guess - "dark grey" wasn't given an exact hex) */
  margin-bottom: 8px;
}
.hiw2-step-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem; /* (guess) */
  color: var(--color-text-muted);
  transition: color 300ms ease;
}
.hiw2-step.is-active .hiw2-step-title { color: var(--color-text-primary); }

/* The 0fr -> 1fr accordion technique: the outer track sizes itself, the inner wrapper clips overflow. */
.hiw2-step-desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 550ms cubic-bezier(.22,1,.36,1);
}
.hiw2-step.is-active .hiw2-step-desc { grid-template-rows: 1fr; }
.hiw2-step-desc-inner { overflow: hidden; min-height: 0; }
.hiw2-step-desc-inner p {
  padding-top: 10px;
  font-family: var(--font-support);
  font-size: 0.875rem; /* ~14px, per the user's screenshot */
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ---- Right: the fixed photo frame + the stacked cards ---- */
.hiw2-photo-col { position: relative; width: 100%; }
.hiw2-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 550 / 428;
  /* Desktop only per the user's screenshot: square on the left (the side facing the steps), rounded on the
     right. Restored to a uniform radius for tablet/mobile inside the max-width:860px block below. */
  border-radius: 0 24px 24px 0;
  overflow: hidden;
  /* The woman needs to show on the right of the frame (the card sits centered now, with visible photo margin
     on every side, so nothing hides her). */
  background: var(--color-tone-2) url('assets/how-it-works-clean.webp') no-repeat 78% 38%;
  background-size: cover;
  display: grid;
  place-items: center;
}
/* Per the user's screenshot: the card is centered in the frame (not pinned to an edge), ~62% of the frame's
   width (capped at 340px) and ~83% of its height, leaving an even margin of photo visible on all four sides. */
.hiw2-card-wrap { display: grid; width: 62%; max-width: 340px; height: 83%; }
.hiw2-card {
  grid-area: 1 / 1;
  position: relative;
  /* Warm off-white, measured from the screenshot - slightly deeper than --color-surface. */
  background: #F7F6EF;
  /* Full radius on all four corners now that the card floats inside the frame instead of touching an edge. */
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 20px 45px -18px rgba(20, 20, 20, 0.35); /* (guess) */
  opacity: 0;
  transform: translateY(18px) scale(0.975);
  transition: opacity 550ms cubic-bezier(.22,1,.36,1), transform 550ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.hiw2-card.is-passed { transform: translateY(-18px) scale(0.975); }
.hiw2-card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 70ms;
}
.hiw2-badge {
  position: absolute;
  top: -14px; right: 14px;
  background: var(--color-ink);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-support);
  padding: 6px 12px;
  border-radius: 999px;
}

/* Card contents - plain, prefixed names so nothing here can ever collide with the rest of the site. */
.hiw2-c-title { font-family: var(--font-heading); font-size: 16px; font-weight: 400; display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hiw2-plus { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 20, 0.12); display: grid; place-items: center; font-size: 18px; }
/* Inverted from the earlier guess: the list container is white, the selected row carries the warm grey. */
.hiw2-list { background: #fff; border-radius: 14px; padding: 10px; }
.hiw2-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.hiw2-row.sel { background: #F3F2EC; }
.hiw2-radio { width: 16px; height: 16px; border: 1.5px solid var(--color-ink); border-radius: 50%; display: grid; place-items: center; flex: none; }
.hiw2-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink); }
.hiw2-row:not(.sel) .hiw2-radio { visibility: hidden; }
.hiw2-row b { display: block; font-weight: 500; font-size: 14px; }
.hiw2-row small { color: var(--color-text-muted); font-size: 12px; }
.hiw2-kebab { margin-left: auto; color: var(--color-ink); font-weight: 700; }
.hiw2-note { text-align: center; color: var(--color-text-muted); font-size: 13px; margin: 14px 0 10px; }
.hiw2-cta-text { text-align: center; font-weight: 700; font-size: 14px; }
.hiw2-box { background: var(--color-tone-2); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.hiw2-lbl { font-size: 12px; color: var(--color-text-muted); }
.hiw2-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.hiw2-stats div { padding-left: 8px; border-left: 1px solid #E2E2DA; }
.hiw2-stats div:first-child { border: 0; padding-left: 0; }
.hiw2-stats strong { display: block; font-weight: 500; font-size: 15px; margin-top: 4px; }
.hiw2-btn { display: block; width: 100%; border: 0; border-radius: 999px; padding: 12px; font: 700 14px var(--font-support); background: var(--color-ink); color: #fff; }
.hiw2-btn.ghost { background: var(--color-tone-2); color: var(--color-ink); }
.hiw2-ba { display: flex; justify-content: space-between; align-items: flex-end; }
.hiw2-ba strong { font-size: 26px; font-weight: 500; }
.hiw2-bar { height: 6px; background: #EBEBE4; border-radius: 9px; margin: 12px 0; }
.hiw2-bar i { display: block; height: 100%; width: 88%; background: var(--color-ink); border-radius: 9px; }
.hiw2-bullets { list-style: none; font-size: 13px; line-height: 2; }
.hiw2-bullets li::before { content: "•"; margin-right: 8px; }
.hiw2-btns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-top: 12px; }

.hiw2-mobile-photo-slot { display: none; }

/* Used only for the instant, synchronous measuring pass in how-it-works.js - never left on. */
.hiw2-no-anim, .hiw2-no-anim * { transition: none !important; }

/* Lenis injects its own `.lenis.lenis-stopped { overflow: clip !important }` rule for <html> while stopped
   (specifically overflow-x, empirically - clip on either axis is still enough to break position:sticky for
   any sticky descendant, same failure mode as an old-fashioned overflow:hidden ancestor). how-it-works.js
   pauses Lenis this way while pinned, on purpose - this just neutralizes that one side effect (higher
   specificity than Lenis's own rule so it doesn't matter which loads first). Nothing else on the site
   currently stops Lenis, so this has no effect anywhere else. */
html.lenis.lenis-stopped { overflow-x: visible !important; overflow-y: visible !important; }

@media (max-width: 860px) {
  .hiw2 { height: auto; overflow-anchor: none; }
  .hiw2-pin { position: static; height: auto; padding: 64px 20px; display: block; }
  .hiw2-container { padding: 0; max-width: none; }
  .hiw2-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .hiw2-desc { text-align: left; max-width: none; padding-top: 0; }

  .hiw2-body { grid-template-columns: 1fr; gap: 0; }
  .hiw2-highlight { display: none; }
  .hiw2-step { border-radius: 14px; }
  .hiw2-step.is-active { background: var(--color-step-active); border-radius: 14px; }

  .hiw2-photo-col { display: none; }
  .hiw2-mobile-photo-slot:empty { display: none; }
  .hiw2-mobile-photo-slot { display: block; }
  /* No fixed aspect-ratio here on purpose: the photo's height follows the card's own content height plus
     these gaps, so the card (and the Demo badge, which pokes 14px above its top edge) never gets clipped by
     the photo's overflow:hidden - a fixed ratio was exactly what caused the old clipping. Radius stays
     uniform on all four corners (rounded-on-the-right is a desktop-only look, see the base rule above). */
  .hiw2-photo {
    aspect-ratio: auto;
    border-radius: 22px;
    width: 100%;
    margin-top: 16px;
    padding: 32px 20px 20px;
    box-sizing: border-box;
  }
  .hiw2-card-wrap { width: 100%; height: auto; }
  .hiw2-card { border-radius: 26px; padding: 16px; }
  .hiw2-c-title { font-size: 15px; }
  .hiw2-list { padding: 8px; }
  .hiw2-row { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw2-highlight, .hiw2-card, .hiw2-step-desc, .hiw2-step-title { transition: none; }
}


/* ==========================================================================
   2b. DEMO SCREEN STYLING (shared by the hero's own floating demo loop)
   ========================================================================== */


/* ==========================================================================
   4. THE PROBLEM
   The intro (badge, title, lead) is centred here, unlike the other sections, and the small label has no pill
   behind it - both by the user's own design, scoped to this section only.
   A big photo (assets/the problem backgrond.jpg, 20px corners) with a card that "pulls up" onto it on scroll. Three
   pills above it play through the three problems on their own, each filling with ink as it plays; clicking one jumps
   straight there and the loop carries on from that point.
   ========================================================================== */
.problem-intro-center { text-align: center; margin-left: auto; margin-right: auto; }
.problem-badge-plain { background: transparent; padding: 0; border-radius: 0; }

.problem-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; margin-top: 40px; }
.problem-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 9999px;
  padding: 9px 18px;
  background: var(--color-tone-2);
  color: var(--color-text-secondary);
  font-family: var(--font-support);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The fill sits ON TOP of the base label, so the part of the text it has reached actually turns white as it plays */
.problem-pill-text { position: relative; z-index: 0; white-space: nowrap; }
.problem-pill-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--color-ink);
  color: var(--color-surface);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0); /* fully hidden; the carousel script grows this from the left as each pill plays */
}

/* The photo and the card that sits on it */
.problem-stage { margin-top: 44px; }
.problem-media {
  position: relative;
  aspect-ratio: 1688 / 874;
  border-radius: 20px;
  overflow: hidden;
}
.problem-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Rests against the card's own top-left corner, half on the card and half on the photo. */
.problem-card .problem-warning-icon { position: absolute; top: -30px; left: -30px; width: clamp(60px, 12%, 100px); height: auto; z-index: 1; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25)); }
/* Centred perfectly on the photo, balanced in both axes with ample breathing room.
   Smooth micro-motion and subtle spring pulse trigger when switching between problem capsules. */
.problem-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, 82%);
  min-height: 240px;
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  background: var(--lp-white);
  box-shadow: 0 30px 60px -25px rgba(25, 25, 25, 0.28), 0 10px 24px -10px rgba(25, 25, 25, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.85);
  z-index: 2;
  opacity: 1;
  transition: box-shadow 0.4s ease;
}

.problem-card.card-pulse {
  animation: problemCardPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.problem-card .problem-warning-icon {
  position: absolute;
  top: -30px;
  left: -30px;
  width: clamp(60px, 12%, 100px);
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.problem-card.card-pulse .problem-warning-icon {
  transform: rotate(-6deg) scale(1.06);
}

.problem-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0);
  opacity: 1;
}

.problem-card-content.is-switching {
  opacity: 0;
  transform: translateY(-8px);
}

.problem-card-content.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

.problem-card-title {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.problem-card-rule {
  flex: none;
  height: 1px;
  margin: 18px 0;
  background: var(--color-border-subtle);
}

.problem-card-text {
  font-family: var(--font-support);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

@keyframes problemCardPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.02); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 700px) {
  /* At this width the photo's own shape is too short to hold the card, so it gets a fixed height instead */
  .problem-media { aspect-ratio: auto; min-height: 420px; }
  .problem-card {
    left: 4%;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-height: 232px;
    padding: 28px 24px;
  }
  .problem-card-title { font-size: 1.2rem; }
  .problem-card-rule { margin: 14px 0; }
  @keyframes problemCardPulse {
    0% { transform: translateY(-50%) scale(1); }
    35% { transform: translateY(-50%) scale(1.02); }
    100% { transform: translateY(-50%) scale(1); }
  }
}


/* ==========================================================================
   5. FEATURES TIMELINE (WATER FLOW SCROLL)
   ========================================================================== */
.features-section {
  position: relative;
  overflow: clip;
}

.features-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 32px;
}

.features-head-left {
  max-width: 560px;
}

.features-title {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  margin-top: 14px;
}

.features-desc {
  font-family: var(--font-support);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 440px;
  text-align: right;
  flex: none;
}

/* Horizontal dotted divider below header */
.features-divider {
  width: 100%;
  height: 1px;
  border-bottom: 1.5px dashed rgba(18, 18, 20, 0.16);
  margin-bottom: 56px;
}

/* Timeline container */
.features-timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 0 70px;
}

/* Center vertical dashed line */
.features-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 16px;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.features-spine-track {
  position: absolute;
  inset: 0;
  border-left: 1.5px dashed rgba(18, 18, 20, 0.18);
}

/* Fluid water stream drawn down the spine - NO SHADOW */
.features-spine-stream {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: var(--color-ink, #191919);
  border-radius: 999px;
  will-change: height;
  box-shadow: none !important;
}

/* Small terminal dot at bottom of spine */
.features-spine-end {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #AFAEA9;
  transform: translateX(-50%);
  transition: transform 0.4s var(--ease-spring), background-color 0.4s ease;
  box-shadow: none !important;
}

.features-spine-end.is-active {
  background: var(--color-ink);
  transform: translateX(-50%) scale(1.3);
}

/* Timeline items */
.features-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 84px;
  min-height: 60px;
}

.features-item:last-of-type {
  margin-bottom: 30px;
}

/* Icon centered on spine - Clean white circle, NO SHADOW */
.features-item-icon-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.features-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff !important;
  border: 1.1px solid rgba(25, 25, 25, 0.12);
  color: rgba(25, 25, 25, 0.38);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.35s ease,
              color 0.35s ease,
              box-shadow 0.35s ease;
}

.features-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.1px !important;
  transition: transform 0.4s var(--ease-spring), color 0.3s ease;
}

.features-icon svg * {
  stroke-width: 1.1px !important;
}

/* Active state for icon - Refined, delicate, non-harsh border with gentle float */
.features-item.is-active .features-icon {
  background: #ffffff !important;
  border-color: rgba(25, 25, 25, 0.7) !important;
  border-width: 1.2px !important;
  color: #191919 !important;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  animation: featureIconFloat 3.5s ease-in-out infinite;
}

.features-item.is-active .features-icon svg {
  transform: scale(1.04);
  color: #191919;
}

@keyframes featureIconFloat {
  0%, 100% { transform: scale(1.08) translateY(0); }
  50% { transform: scale(1.08) translateY(-3px); }
}

/* Subtle expanding aura pulse ring behind active icon */
.features-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(25, 25, 25, 0.14);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.features-item.is-active .features-icon::before {
  opacity: 1;
  transform: scale(1);
  animation: featurePulseRing 3.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes featurePulseRing {
  0% { transform: scale(0.95); opacity: 0.35; }
  50% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.features-item:hover .features-icon {
  transform: scale(1.12);
  border-color: rgba(25, 25, 25, 0.5);
  color: #191919;
}

.features-item:hover .features-item-body {
  transform: translateX(var(--feat-shift, 3px));
  transition: transform 0.3s ease;
}
.features-item.is-left:hover {
  --feat-shift: -3px;
}
.features-item.is-right:hover {
  --feat-shift: 3px;
}

/* Text body */
.features-item-body {
  width: calc(50% - 48px);
  will-change: transform, opacity;
}

.features-item-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}

.features-item-text {
  font-family: var(--font-support);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Right vs Left positioning */
.features-item.is-right .features-item-body {
  margin-left: calc(50% + 48px);
  text-align: left;
}

.features-item.is-left .features-item-body {
  margin-right: calc(50% + 48px);
  margin-left: 0;
  text-align: right;
}

.features-item.is-left .features-item-text {
  margin-left: auto;
}

/* Responsive / Mobile */
@media (max-width: 768px) {
  .features-section {
    padding: 56px 0 36px;
  }
  .features-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .features-title {
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 10px;
  }
  .features-desc {
    text-align: left;
    max-width: none;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--color-text-muted);
  }
  .features-divider {
    margin-bottom: 28px;
    border-bottom: 1px dashed rgba(18, 18, 20, 0.12);
  }
  .features-timeline {
    padding: 6px 0 40px;
  }
  .features-spine {
    left: 18px;
  }
  .features-spine-track {
    border-left: 1px dashed rgba(18, 18, 20, 0.15);
  }
  .features-spine-stream {
    width: 1.5px;
  }
  .features-spine-end {
    left: 18px;
    width: 6px;
    height: 6px;
  }
  .features-item {
    margin-bottom: 28px;
    min-height: 48px;
    justify-content: flex-start;
  }
  .features-item:last-of-type {
    margin-bottom: 16px;
  }
  .features-item-icon-wrap {
    left: 18px;
  }
  .features-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(25, 25, 25, 0.12);
  }
  .features-icon svg {
    width: 16px;
    height: 16px;
  }
  .features-item.is-active .features-icon {
    border-width: 1.1px !important;
  }
  .features-item.is-right .features-item-body,
  .features-item.is-left .features-item-body {
    width: calc(100% - 48px);
    margin-left: 48px;
    margin-right: 0;
    text-align: left;
  }
  .features-item-title {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.28;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
  }
  .features-item-text {
    font-size: 0.82rem;
    line-height: 1.48;
    color: var(--color-text-secondary);
  }
  .features-item.is-left .features-item-text {
    margin-left: 0;
  }
}


/* ==========================================================================
   6. THE PROMISE (DAISY FIELD WITH STEPPED CARDS)
   Rebuilt exactly to the user's design:
   - Asymmetric 3-card layout over the daisy grassy mound (field our promise.jpg)
   - Left card: Dark / ink card, partially sunk behind the left grassy slope
   - Center card: Frosted glass / translucent card, overlapping the daisy dome
   - Right card: Crisp white card, elevated on the right
   - Scroll-reactive pull-up / pull-down animation: cards sink down when scrolling up,
     and pull up into resting positions when scrolling into view.
   ========================================================================== */
.promise-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0 0 0;
  min-height: unset;
  background: #F1F1EE;
}

.promise-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.promise-header {
  text-align: center;
  position: relative;
  z-index: 10;
  margin-bottom: 24px;
}

.promise-header .pill-badge {
  background: #FFFFFF;
  color: var(--color-text-primary);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.promise-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 3.8vw, 3.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-top: 14px;
  text-align: center;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
  position: relative;
  padding-bottom: 120px;
}

.promise-col {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Col 1 (Left / Dark card): sits lower, submerged behind grass slope */
.promise-col--left {
  padding-top: 130px;
  position: relative;
  z-index: 1; /* Below grass mound (z-index: 2) so green blades overlap it */
}

/* Col 2 (Center / Glass card): centered under title, in front of grass */
.promise-col--center {
  align-items: center;
  position: relative;
  z-index: 3; /* In front of grass mound */
}

.promise-col--center .promise-header {
  margin-bottom: 24px;
  width: 100%;
}

.promise-col--center .promise-card {
  width: 100%;
}

/* Col 3 (Right / White card): elevated high in mid-air above grass */
.promise-col--right {
  padding-top: 15px;
  position: relative;
  z-index: 3; /* In front of grass */
}

/* Base card styling: ALL cards are the exact same size (height and width), NO shadows */
.promise-card {
  border-radius: 24px;
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 340px;
  min-height: 340px;
  max-height: 340px;
  box-shadow: none !important;
  will-change: transform, opacity;
}

/* Card 1: Left / Dark (tucked behind the left grass slope) */
.promise-card--dark {
  background: #18181A;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
  z-index: 1;
}

.promise-card--dark .promise-card-icon-pill {
  background: #FFFFFF;
  color: #18181A;
  box-shadow: none !important;
}

.promise-card--dark .promise-card-line {
  border-bottom: 1.5px dotted rgba(255, 255, 255, 0.4);
}

.promise-card--dark .promise-card-title {
  color: #FFFFFF;
  text-shadow: none;
}

.promise-card--dark .promise-card-text {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: none;
}

/* Card 2: Center / Pure Frosted Milky Glass (clean neutral blur, NO green tint, NO shadow) */
.promise-card--glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: none !important;
  color: #FFFFFF;
  z-index: 3;
}

.promise-card--glass .promise-card-icon-pill {
  background: #FFFFFF;
  color: #18181A;
  box-shadow: none !important;
}

.promise-card--glass .promise-card-line {
  border-bottom: 1.5px dotted rgba(255, 255, 255, 0.6);
}

.promise-card--glass .promise-card-title {
  color: #FFFFFF;
  text-shadow: none;
}

.promise-card--glass .promise-card-text {
  color: #FFFFFF;
  text-shadow: none;
}

/* Card 3: Right / Crisp White (floating high up in mid-air, NO shadow) */
.promise-card--white {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none !important;
  color: var(--color-text-primary);
  z-index: 3;
}

.promise-card--white .promise-card-icon-pill {
  background: #18181A;
  color: #FFFFFF;
  box-shadow: none !important;
}

.promise-card--white .promise-card-line {
  border-bottom: 1.5px dotted rgba(0, 0, 0, 0.25);
}

.promise-card--white .promise-card-title {
  color: #18181A;
  text-shadow: none;
}

.promise-card--white .promise-card-text {
  color: #666668;
  text-shadow: none;
}

/* Card Header (Icon Pill + Dotted Line) - refined, clean spacing */
.promise-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.promise-card-head--rev {
  flex-direction: row;
}

.promise-card-line {
  flex: 1;
  height: 1px;
}

.promise-card-icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: none !important;
}

.promise-card-icon-pill svg {
  display: block;
}

/* Card Typography - compact & proportional to design */
.promise-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  text-shadow: none;
}

.promise-card-text {
  font-family: var(--font-support);
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
  text-shadow: none;
}

/* Grassy Hill with Daisies Background (User Transparent PNG) */
.promise-field-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  pointer-events: none;
  z-index: 2; /* In front of left dark card (z-index: 1), behind glass card (z-index: 3) */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 0;
}

.promise-field-img {
  width: 100%;
  min-width: 1200px;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: bottom center;
  display: block;
  vertical-align: bottom;
}

/* Responsive adjustments */
@media (max-width: 1050px) {
  .promise-grid {
    gap: 20px;
  }
  .promise-card {
    padding: 28px 24px 34px;
    min-height: 360px;
  }
  .promise-card-title {
    font-size: 1.25rem;
  }
  .promise-card-text {
    font-size: 0.95rem;
  }

  /* Tablet & Mobile: frosted transparent card readability with dark text */
  .promise-card--glass {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    color: #18181A !important;
  }
  .promise-card--glass .promise-card-title {
    color: #18181A !important;
  }
  .promise-card--glass .promise-card-text {
    color: #555558 !important;
  }
  .promise-card--glass .promise-card-line {
    border-bottom: 1.5px dotted rgba(0, 0, 0, 0.25) !important;
  }
  .promise-card--glass .promise-card-icon-pill {
    background: #FFFFFF !important;
    color: #18181A !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 820px) {
  .promise-section {
    padding: 60px 0 30px 0;
    min-height: auto;
    overflow: hidden;
    max-width: 100vw;
  }
  .promise-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-bottom: 36px;
  }
  .promise-col {
    display: contents;
  }
  .promise-header {
    order: 0;
    margin-bottom: 24px;
    width: 100%;
  }
  .promise-card--dark {
    order: 1;
    z-index: 4;
  }
  .promise-card--glass {
    order: 2;
    z-index: 4;
  }
  .promise-card--white {
    order: 3;
    z-index: 2;
    padding: 24px 20px 78px !important;
  }
  .promise-card {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: none;
    padding: 24px 20px 24px;
    border-radius: 22px;
    transform-origin: top center;
    will-change: transform, opacity;
    box-shadow: none !important;
  }
  .promise-card-title {
    font-size: 1.12rem;
    margin-bottom: 8px;
  }
  .promise-card-text {
    font-size: 0.85rem;
    line-height: 1.48;
  }
  .promise-field-bg {
    bottom: 0;
    z-index: 3;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    pointer-events: none;
  }
  .promise-field-img {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    display: block;
  }
}


/* ==========================================================================
   7. WHO IT'S FOR
   Rebuilt from the user's own screenshot (audience.png): a four-card carousel, one always expanded, that
   rotates on its own. All motion/rotation logic lives in who-carousel.js; this is layout and state styling
   only. Every value below is measured from that 2x screenshot (already halved to CSS px).
   ========================================================================== */
/* Round 2 rebuild, per the user's reference video: the previous version resized cards while they were
   normal flex items, so the row's own box kept changing size every frame and shook the whole page. Now the
   stage has a JS-fixed height and every card is `position:absolute` inside it - out of flow completely, so
   nothing it does (including plain width/height/left/top, set straight from JS, not a CSS transition) can
   ever move anything outside the stage. All geometry math and the frame-by-frame animation loop live in
   who-carousel.js; this file only sets up the stage and the cards' internal (photo/text) layout. */
.who2 { background: #F1F1EE; overflow-x: clip; overflow-anchor: none; }
.who2-head { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: 56px; }
.who2-title { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.who2-desc {
  font-family: var(--font-support);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 410px;
  text-align: right;
  flex: none;
}

/* The stage: JS sets an explicit height (the active card's height) once per breakpoint and never changes
   it during an animation - that fixed height, plus every child being absolutely positioned, is what makes
   the shake impossible regardless of what the cards themselves do. */
.who2-carousel { position: relative; width: 100%; overflow: clip; }
.who2-track { position: relative; width: 100%; height: 100%; }

.who2-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  border: 0;
  border-radius: 24px;
  background: var(--lp-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: left, top, width, height, padding;
}
.who2-card:focus-visible { outline: 2px solid var(--color-btn-dark); outline-offset: 2px; }
.who2-card.is-active { cursor: default; }

.who2-card-photo {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 20px;
}
.who2-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.who2-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  padding-left: 28px;
  min-width: 0;
  text-align: left;
}
.who2-card-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.85rem; line-height: 1.2; color: var(--color-text-primary); opacity: 0; }
.who2-card-desc { font-family: var(--font-support); font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); opacity: 0; }

/* Progress: slim, elegant fluid indicator bars */
.who2-progress { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 32px; }
.who2-dot-slot {
  flex: none;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.who2-dot {
  position: relative;
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 14%, transparent);
  overflow: hidden;
  transition: background-color 200ms ease;
}
.who2-dot-slot:hover .who2-dot {
  background: color-mix(in srgb, var(--color-ink) 26%, transparent);
}
.who2-dot-slot:focus-visible {
  outline: 2px solid var(--color-btn-dark);
  outline-offset: 3px;
  border-radius: 999px;
}
.who2-dot-fill {
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
}

@media (max-width: 820px) {
  .who2-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }
  .who2-desc {
    text-align: left;
    max-width: none;
  }
  .who2-carousel {
    overflow: visible;
  }
  .who2 {
    overflow-x: clip;
  }
  .who2-card {
    flex-direction: column;
    border-radius: 26px;
    box-shadow: none !important;
  }
  .who2-card-photo {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    flex: none;
  }
  .who2-card-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .who2-card-body {
    padding-left: 0;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-height: 0;
  }
  .who2-card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
    margin: 0;
  }
  .who2-card-desc {
    font-family: var(--font-support);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
  }
  .who2-progress {
    margin-top: 24px;
    gap: 8px;
  }
  .who2-dot-slot {
    width: 34px;
    height: 18px;
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .who2-dot-slot.is-active {
    width: 44px;
  }
  .who2-dot {
    width: 100%;
    height: 3.5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-ink) 14%, transparent);
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .who2-dot { transition: none; }
}


/* ==========================================================================
   7b. TESTIMONIALS (Directly after Pricing)
   ========================================================================== */
.testimonials-section {
  padding: 80px 24px;
}

.testimonials-container {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.testimonials-head {
  margin-bottom: 40px;
}

.testimonials-title {
  margin-top: 14px;
}

.testi-card-container {
  max-width: 680px;
  margin: 0 auto;
}

.testi-single-card {
  position: relative;
  background: var(--lp-white, #ffffff);
  border-radius: 26px;
  padding: 48px 56px 44px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testi-card-top-bar {
  position: absolute;
  top: 32px;
  right: 38px;
}

.testi-counter {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--color-ink, #191919);
  letter-spacing: -0.01em;
}

/* CSS Grid Stack: All slides share exact identical cell coordinates so changing slides NEVER causes height shifts or bouncing */
.testi-quote-viewport {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 120px;
  padding-right: 52px;
}

.testi-slide {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(6px);
  pointer-events: none;
}

.testi-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.testi-quote-text {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.4vw, 1.25rem);
  font-weight: 450;
  line-height: 1.65;
  color: var(--color-ink, #191919);
  margin: 0;
}

.testi-dashes-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px auto 16px;
}

.testi-dash {
  width: 36px;
  height: 3.5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.testi-dash.is-active {
  width: 36px;
}

.testi-dash-progress {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-ink, #191919);
  border-radius: 999px;
}

.testi-dash.is-filled .testi-dash-progress {
  width: 100%;
}

/* Wide Author Bar matching user Screenshot 2 */
.testi-author-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lp-white, #ffffff);
  border-radius: 20px;
  padding: 14px 22px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.testi-author-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testi-avatar-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #191919;
  flex-shrink: 0;
}

.testi-author-name {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--color-ink, #191919);
  display: flex;
  align-items: center;
  gap: 7px;
}

.testi-author-person {
  color: var(--color-ink, #191919);
  font-weight: 600;
}

.testi-author-sep {
  color: rgba(25, 25, 25, 0.28);
  font-weight: 400;
}

.testi-author-role {
  color: var(--color-text-muted, #71717A);
  font-weight: 450;
}

.testi-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testi-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #F4F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink, #191919);
  transition: background 0.2s ease, transform 0.15s ease;
  padding: 0;
}

.testi-nav-btn:hover {
  background: #E8E8DF;
  transform: scale(1.06);
}

.testi-nav-btn:active {
  transform: scale(0.94);
}

@media (max-width: 700px) {
  .testimonials-section {
    padding: 56px 16px;
  }
  .testimonials-head {
    margin-bottom: 28px;
  }
  .testi-single-card {
    padding: 24px 18px 22px;
    border-radius: 20px;
    min-height: 148px;
  }
  .testi-card-top-bar {
    top: 20px;
    right: 18px;
  }
  .testi-counter {
    font-size: 0.92rem;
  }
  .testi-quote-viewport {
    min-height: 84px;
    padding-right: 32px;
  }
  .testi-quote-text {
    font-size: 0.94rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
  .testi-dashes-bar {
    margin: 16px auto 14px;
    gap: 6px;
  }
  .testi-dash {
    width: 28px;
    height: 3px;
  }
  .testi-dash.is-active {
    width: 28px;
  }
  .testi-author-bar {
    padding: 10px 14px;
    border-radius: 16px;
    margin-top: 10px;
  }
  .testi-author-left {
    gap: 10px;
  }
  .testi-avatar-dot {
    width: 24px;
    height: 24px;
  }
  .testi-author-name {
    font-size: 0.85rem;
    gap: 5px;
  }
  .testi-nav-arrows {
    gap: 6px;
  }
  .testi-nav-btn {
    width: 30px;
    height: 30px;
  }
  .testi-nav-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* ==========================================================================
   8. FREQUENTLY ASKED QUESTIONS (Framed card on city background, flush bottom)
   ========================================================================== */
.faq-outer-section {
  position: relative;
  background-image: url('assets/FAQ BG IMAGE.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 120px 24px 0 24px;
  margin-top: 60px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.faq-frame-card {
  width: 100%;
  max-width: 1120px;
  background: #ffffff;
  border-radius: 32px 32px 0 0;
  padding: 64px 64px 44px 64px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  margin-bottom: 0;
}

.faq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 36px;
}

.faq-card-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-ink);
  letter-spacing: -0.03em;
  margin-top: 12px;
}

.faq-card-header-right {
  max-width: 380px;
  text-align: left;
  padding-top: 6px;
}

.faq-card-subtitle {
  font-family: var(--font-support);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.faq-contact-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-support);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}

.faq-contact-btn-link:hover {
  opacity: 0.75;
}

.faq-accordion-group {
  display: flex;
  flex-direction: column;
}

.faq-accordion-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.faq-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 20px;
}

.faq-q-text {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  font-weight: 600;
  color: var(--color-ink);
}

.faq-icon-bubble {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  color: var(--color-ink);
  background: #ffffff;
}

.faq-accordion-item.is-open .faq-icon-bubble {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #ffffff;
}

.faq-svg-minus { display: none; }
.faq-svg-plus { display: block; }
.faq-accordion-item.is-open .faq-svg-minus { display: block; }
.faq-accordion-item.is-open .faq-svg-plus { display: none; }

.faq-accordion-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
  padding: 0;
}

.faq-accordion-item.is-open .faq-accordion-panel {
  max-height: 300px;
  opacity: 1;
  padding-bottom: 22px;
}

.faq-accordion-panel p {
  font-family: var(--font-support);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

@media (max-width: 820px) {
  .faq-outer-section {
    padding: 56px 14px 0 14px;
    margin-top: 36px;
  }
  .faq-frame-card {
    padding: 30px 18px 24px 18px;
    border-radius: 22px 22px 0 0;
  }
  .faq-card-header {
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  .faq-card-title {
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 8px;
  }
  .faq-card-subtitle {
    font-size: 0.85rem;
    line-height: 1.48;
    margin-bottom: 10px;
  }
  .faq-contact-btn-link {
    font-size: 0.84rem;
  }
  .faq-accordion-trigger {
    padding: 14px 0;
    gap: 12px;
  }
  .faq-q-text {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .faq-icon-bubble {
    width: 26px;
    height: 26px;
    border-width: 1px;
  }
  .faq-icon-bubble svg {
    width: 12px;
    height: 12px;
  }
  .faq-accordion-panel p {
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--color-text-muted);
  }
  .faq-accordion-item.is-open .faq-accordion-panel {
    padding-bottom: 14px;
  }
}


/* ==========================================================================
   9. STICKY BUTTON ON PHONES
   Appears once the first sign-up box has scrolled away, and goes again when the last one is on screen.
   ========================================================================== */
.sticky-cta { display: none; }
@media (max-width: 700px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    transform: translateY(140%);
    transition: transform 0.45s var(--ease-spring);
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn-pill-black { width: 100%; height: 52px; box-shadow: 0 14px 28px -12px rgba(25, 25, 25, 0.5); }
}


/* ==========================================================================
   10. MOTION
   The new sections rise in one by one as they arrive (the reveal script adds .is-visible).
   ========================================================================== */
.lp-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring); }
.lp-stagger.is-visible > * { opacity: 1; transform: none; }
.lp-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.lp-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.lp-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.lp-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.lp-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; }

.lp-card, .lp-faq-item { transition: transform 0.35s var(--ease-spring), opacity 0.7s var(--ease-spring); }
@media (hover: hover) { .lp-features-grid .lp-card:hover { transform: translateY(-4px); } }

@media (max-width: 1000px) {
  .lp-features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  :root { --lp-section-space: 56px; }
  .reading-title { font-size: 1.55rem !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
  .how-main-title { font-size: 1.55rem !important; line-height: 1.2 !important; }
  .hero-section { padding-top: 100px; padding-bottom: 40px; }
  .hero-title { font-size: clamp(1.75rem, 6.8vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; }
  .hero-subtitle { font-size: 0.88rem; line-height: 1.52; max-width: 340px; margin: 12px auto 20px; }
  .hero-demo { margin-top: 28px; }
  .btn-pill-soft { padding: 10px 18px; font-size: 0.88rem; }
  .problem-pills { gap: 6px; margin-top: 24px; }
  .problem-pill { padding: 6px 12px; font-size: 0.72rem; }
  .problem-pill-fill { padding: 6px 12px; }
  .problem-card .problem-warning-icon { top: -14px; left: -14px; width: clamp(38px, 11%, 52px); }
  .problem-card { padding: 22px 18px; min-height: 190px; }
  .problem-card-title { font-size: 1.08rem; line-height: 1.25; }
  .problem-card-text { font-size: 0.84rem; line-height: 1.48; }
  .problem-card-rule { margin: 12px 0; }
  .lp-features-grid { grid-template-columns: 1fr; gap: 14px; }
  .lp-faq-item summary { padding: 14px 16px; font-size: 0.92rem; }
  .lp-faq-item p { padding: 0 16px 16px; font-size: 0.83rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-stagger > *, .hero-demo-screen { opacity: 1; transform: none; transition: none; }
  .hero-demo-screen:not(.is-active) { opacity: 0; }
  .lp-card, .lp-faq-item, .sticky-cta, .hero-demo-dots i { transition: none; }
}

/* ==========================================================================
   11. PRICING TOGGLE GLIDING PILL & SMOOTH TRANSITIONS
   ========================================================================== */
.billing-toggle {
  position: relative;
}

.billing-pill-slider {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 9999px;
  background: var(--color-ink, #121214);
  box-shadow: 0 2px 10px rgba(18, 18, 20, 0.22);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, width;
}

.billing-toggle.has-slider .billing-option {
  position: relative;
  z-index: 2;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.billing-toggle.has-slider .billing-option.is-active {
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.plan-pro-inner .plan-price,
#proBilled,
#proFlag {
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}