/* ============================================================
   landing-v3.css — Milestone 2 structural reskin (2026-07-17)
   Light-first, bolder layout: honest 1.0 scale, editorial
   left-aligned rhythm, oversized structural type, asymmetric
   grids. Loads LAST so it overrides the shared stylesheets.
   Gated on body.pf3 so subpages (which don't set the class and
   don't link this file) are untouched.
   RULE: no transform/filter/overflow on ancestors of
   .hs-form-frame / .meetings-iframe-container.
   ============================================================ */

/* ---- honest scale: undo the global 0.85 zoom on this page ---- */
html.pf3-root { zoom: 1; }

/* IMPORTANT: never put overflow-x clip/hidden on html or body - it breaks the
   real position:sticky pinning (the item stops holding at the top even though its
   computed position still reads "sticky"). Mobile horizontal bleed is contained by
   fixing the specific overflowing elements + clipping the marquees locally. */

body.pf3 {
  /* owner feedback: NO typewriter/monospace anywhere - labels are Inter small-caps */
  --pf3-mono: 'Inter', -apple-system, sans-serif;
  --pf3-display: 'Inter Tight', 'Inter', sans-serif;
  --pf3-hairline: rgba(15, 23, 42, 0.1);
}

/* ============================================================
   GLOBAL SECTION RHYTHM — kill the centered column
   ============================================================ */
body.pf3 .section { padding: 88px 0; }

body.pf3 .section-title {
  text-align: left;
  font-family: var(--pf3-display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 16em;
  margin-left: 0;
  margin-right: auto;
}
body.pf3 .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  max-width: 560px;
  font-size: 1.05rem;
}
body.pf3 .section-head-pro { text-align: left; margin-left: 0; }
body.pf3 .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pf3-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.pf3 .section-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent-orange, #ff6b2b);
}

/* numbered editorial section heads: hairline top rule + giant index */
body.pf3 .pf3-num {
  position: relative;
  border-top: 1px solid var(--pf3-hairline);
}
body.pf3 .pf3-slug {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary, #3b82f6);
  margin-bottom: 24px;
}
body.pf3 .pf3-slug em {
  font-style: normal;
  color: var(--accent-orange, #ff6b2b);
  margin-right: 10px;
}
body.pf3 .pf3-num .pf3-bignum {
  position: absolute;
  top: 34px;
  right: 4%;
  z-index: 0;
  font-family: var(--pf3-display);
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(15, 23, 42, 0.045);
  pointer-events: none;
  user-select: none;
}

/* full-bleed helper */
body.pf3 .pf3-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ============================================================
   HERO — asymmetric 7/5, Rescued Call stage, ghost fold word
   ============================================================ */
/* ============================================================
   HERO — big vertically-centered screenshot field on the right that
   "sneaks" behind the headline; copy in front on the left. Subtitle +
   CTAs are constrained to the clean left zone so screenshots never
   cover them (only the big headline overlaps the screenshot's edge).
   ============================================================ */
body.pf3 #hero-b {
  position: relative;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 28px;
  min-height: min(74vh, 720px); /* tighter - kills the dead white space */
  display: flex;
  align-items: center;
}
/* trust row sits right under the CTAs (no stranded gap at the bottom) */
body.pf3 .hero-pro-text .pf3-trust {
  margin-top: 22px;
  padding-top: 16px;
}
/* subtle whole-hero backdrop: faint brand wash + hairline grid, behind everything */
body.pf3 #hero-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 82% 42%, rgba(59, 130, 246, 0.06), transparent 60%),
    radial-gradient(50% 60% at 96% 8%, rgba(255, 107, 43, 0.05), transparent 60%);
}
/* the hero opts out of the container's centered max-width: both halves breathe
   into the side gutters for a wider, less crowded composition.
   !important required: design-system.css pins .container max-width with !important */
body.pf3 #hero-b > .container {
  width: 100%;
  max-width: none !important;
  position: relative;
  z-index: 4;
  padding-left: clamp(28px, 5vw, 110px) !important;
  padding-right: clamp(20px, 2vw, 48px) !important;
}
body.pf3 .pf3-hero-grid { display: block; }
/* copy always in front; subtitle + supporting text stay narrow on the left,
   but the CTA buttons keep their natural side-by-side width (they read in front) */
body.pf3 .hero-pro-text { position: relative; z-index: 4; }
body.pf3 .hero-pro-text .hero-subtitle,
body.pf3 .hero-pro-text .hero-supporting,
body.pf3 .hero-pro-text .pf3-trust { max-width: 440px; }
body.pf3 .hero-pro-text .hero-buttons { flex-wrap: nowrap; }

/* the screenshot field: right side, vertically centered, as big as fits */
body.pf3 .hero-pro-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 41%;
  /* shared CSS sets a fixed width on this element; with left+width set, right:0 is
     ignored (over-constrained absolute box) leaving a right gutter. Force auto. */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 1;
  display: flex;
  align-items: stretch;
  padding: 132px 1vw 24px 0; /* cluster anchors at the TOP (peek reaches just under the nav) */
  overflow: visible;
}
/* soft cohesive glow behind the cluster (no hard panel edge = not disconnected) */
body.pf3 .hero-pro-visual::before {
  content: "";
  position: absolute;
  inset: 60px 0 40px 6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 68% at 55% 50%, rgba(59, 130, 246, 0.10), transparent 70%);
  filter: blur(8px);
}
body.pf3 .hero-pro-visual .screenshot-stage { position: relative; width: 100%; z-index: 1; }

/* COMPOSITION: one focal dashboard (the star, in flow) with TWO light supporting
   windows peeking from behind on either side. Pills spaced cleanly (no dogpile);
   the pulsing LIVE card is the main "alive" accent. */
body.pf3 .hero-pro-visual .screenshot-stage { display: flex; align-items: center; }
body.pf3 .screenshot-composite {
  position: relative;
  width: 100%;
  padding: 0;
}
/* cluster is top-anchored by the visual's flex-start (no extra pull needed) */
body.pf3 .hero-pro-visual .screenshot-stage { margin-top: 0; }
body.pf3 .screenshot-composite .screenshot-main {
  position: relative;      /* in flow -> sizes the composite; the star, in front */
  z-index: 5;
  width: 92%;              /* the star: big, up, right-pinned */
  margin: 0 0 0 auto;
  transform: rotate(-1deg);
  box-shadow: 0 50px 100px rgba(15, 23, 42, 0.18), 0 16px 40px rgba(15, 23, 42, 0.1);
}
/* supporters BEHIND the dashboard; hover lifts one in front temporarily */
body.pf3 .screenshot-composite .screenshot-float { max-width: 460px; }
body.pf3 .screenshot-composite .screenshot-float-bl {   /* LEFT supporter: behind, visible band */
  z-index: 2;
  width: 42%;
  top: 26%;
  left: -5%;
  right: auto;
  bottom: auto;
  transform: rotate(-3deg);
}
body.pf3 .screenshot-composite .screenshot-float-tr {   /* CALL-LOG supporter: raised well above the dashboard (top ~aligns with the eyebrow) */
  z-index: 3;
  width: 44%;
  top: -34%;
  right: -1%;
  left: auto;
  bottom: auto;
  transform: rotate(3deg);
}
/* hover: bring that window in front of the dashboard while the pointer is on it */
body.pf3 .screenshot-composite .screenshot-float:hover {
  z-index: 8;
  filter: drop-shadow(0 26px 50px rgba(15, 23, 42, 0.28));
  cursor: pointer;
}
/* hovering the DASHBOARD lifts it above the LIVE card and pills too */
body.pf3 .screenshot-composite .screenshot-main:hover {
  z-index: 9;
  filter: drop-shadow(0 30px 56px rgba(15, 23, 42, 0.26));
  cursor: pointer;
}

/* ---- clean staggered offscreen entrances (screenshots slide in from the right
   edge, left supporter from the left, LIVE card drops in last) ---- */
@keyframes pf3InMain {
  from { opacity: 0; transform: translateX(200px) rotate(-1deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-1deg); }
}
@keyframes pf3InTR {
  from { opacity: 0; transform: translateX(280px) rotate(3deg); }
  to   { opacity: 1; transform: translateX(0) rotate(3deg); }
}
@keyframes pf3InBL {
  from { opacity: 0; transform: translateX(-220px) rotate(-3deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-3deg); }
}
@keyframes pf3InCard {
  from { opacity: 0; transform: translate(120px, -40px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
html.pf-motion:not(.fx-reduced) body.pf3 .screenshot-composite .screenshot-main {
  animation: pf3InMain 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
html.pf-motion:not(.fx-reduced) body.pf3 .screenshot-composite .screenshot-float-tr {
  animation: pf3InTR 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both,
             floatTR 9s ease-in-out infinite 2s;
}
html.pf-motion:not(.fx-reduced) body.pf3 .screenshot-composite .screenshot-float-bl {
  animation: pf3InBL 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both,
             floatBL 8s ease-in-out infinite 2.2s;
}
/* LIVE card: backwards-fill only, so the fx-floating-card JS parallax owns the
   transform after the entrance finishes */
html.pf-motion:not(.fx-reduced) body.pf3 .screenshot-stage .pf-live-card {
  animation: pf3InCard 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s backwards;
}
/* pills: choreographed by fx-status-pills - their entrance now slides from the right */
html.pf-motion:not(.fx-reduced) body.pf3 .hero-pro .screenshot-composite .annotation-float {
  transform: translate3d(90px, 0, 0) scale(0.97);
}
html.pf-motion:not(.fx-reduced) body.pf3 .hero-pro .screenshot-composite .annotation-float.fx-pill-on {
  transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  body.pf3 .screenshot-composite .screenshot-main,
  body.pf3 .screenshot-composite .screenshot-float-tr,
  body.pf3 .screenshot-composite .screenshot-float-bl,
  body.pf3 .screenshot-stage .pf-live-card { animation: none !important; }
}
body.pf3 .screenshot-composite .screenshot-float-mr { display: none; } /* the 4th stays off */
body.pf3 .screenshot-composite .browser-frame {
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(15, 23, 42, 0.08);
}
/* pills: two, spaced diagonally on the dashboard (no pile); ticker off in the hero */
/* pills sit ON the dashboard they describe (clear of the LIVE card):
   Call auto-booked overhangs the dashboard's left edge by Recent Activity;
   Lead tagged rides its lower-right corner */
body.pf3 .hero-pro .screenshot-composite .annot-tl { top: 46%; left: 4%; right: auto; bottom: auto; }
body.pf3 .hero-pro .screenshot-composite .annot-br { bottom: 8%; left: auto; right: 3%; top: auto; }
body.pf3 .hero-pro .screenshot-composite .annot-mr { display: none; }
body.pf3 .screenshot-stage .pf-call-strip { display: none; }

/* trust row flows directly UNDER the screenshots (flex column) - fills the empty
   zone and can never collide with the industries marquee below */
body.pf3 .hero-pro-visual { flex-direction: column; justify-content: flex-start; }
body.pf3 .hero-pro-visual .screenshot-stage { order: 1; }
body.pf3 .hero-pro-visual .pf3-trust {
  position: static;
  order: 2;
  width: 90%;
  margin: 48px auto 0; /* clears the right supporter window's lower edge */
  padding-top: 14px;
  border-top: 1px solid var(--pf3-hairline);
  justify-content: center;
  position: relative;
  z-index: 6;
}

/* live chips crisp on top */
body.pf3 .hero-pro .screenshot-composite .annotation-pill { font-size: 1rem; padding: 11px 18px; z-index: 6; }
/* LIVE card: upper-LEFT pocket above the dashboard (owner-pointed spot) */
body.pf3 .hero-pro .screenshot-stage .pf-live-card {
  position: absolute;
  z-index: 7;
  left: 2%;
  right: auto;
  top: -64px;
  max-width: 300px;
  padding: 14px 18px 12px 16px;
}
/* typed line: fixed 2-line box so the card never resizes while typing */
body.pf3 .pf-live-card .pf-live-sub { min-height: 2.8em; display: block; }
body.pf3 .hero-pro .pf-live-card .pf-live-row { font-size: 1rem; }
body.pf3 .hero-pro .pf-live-card .pf-live-sub { font-size: 0.88rem; }
body.pf3 .hero-pro .pf-live-card .pf-live-cta { font-size: 0.85rem; }
/* live-call ticker rides the bottom of the field */
body.pf3 .screenshot-stage .pf-call-strip {
  position: absolute;
  z-index: 6;
  left: auto;
  right: 1%;
  bottom: 0;
  width: min(540px, 66%);
  margin-top: 0;
  padding: 13px 20px;
  font-size: 1rem;
}
body.pf3 .screenshot-stage .pf-call-strip .pf-call-tag { font-size: 0.82rem; }
body.pf3 .screenshot-stage .pf-call-strip .pf-call-line { white-space: normal; }

@media (max-width: 1080px) {
  /* stack: screenshots become a normal block below the copy */
  body.pf3 #hero-b { display: block; overflow: hidden; min-height: 0; padding-top: 110px; }
  body.pf3 #hero-b::before { content: none; }
  body.pf3 .hero-pro-text .hero-subtitle,
  body.pf3 .hero-pro-text .hero-cta-group,
  body.pf3 .hero-pro-text .pf3-trust { max-width: none; }
  body.pf3 .hero-pro-visual {
    position: static;
    left: auto;
    margin-top: 24px;
    padding: 20px 6px;
    min-height: 440px;
  }
  body.pf3 .hero-pro-visual::before { content: none; }
  body.pf3 .screenshot-composite .screenshot-main { width: 68%; }
  body.pf3 .screenshot-composite .screenshot-float-bl { left: 0; }
  body.pf3 .hero-pro .pf-live-card { top: 0; right: 0; }
}
@media (max-width: 620px) {
  body.pf3 .hero-pro-visual { min-height: 340px; }
  body.pf3 .hero-pro .screenshot-composite .annotation-pill { font-size: 0.8rem; padding: 7px 12px; }
}

/* ============================================================
   MOBILE OVERFLOW GUARDS (the removed overflow-x:clip was masking these)
   ============================================================ */
@media (max-width: 768px) {
  /* desktop-only cursor spotlight must not create horizontal scroll on mobile */
  body.pf3 .fx-spot { display: none !important; }
  /* pf3 grids collapse to one column */
  body.pf3 #watch .video-frame-wrapper { grid-template-columns: 1fr !important; }
  body.pf3 #pricing .pricing-hero-content { grid-template-columns: 1fr !important; }
  body.pf3 .pf-steps .pf-step,
  body.pf3 .pf-steps .pf-step:nth-child(odd):not(.fx-rail) {
    width: auto;
    margin-left: 34px;
    margin-right: 0;
  }
  /* belt-and-suspenders: marquees clip locally (they are NOT pin ancestors, safe) */
  body.pf3 .trusted-by-scroller,
  body.pf3 .int-marquee { overflow-x: clip; }
  /* video CTA buttons stack full-width at mobile */
  body.pf3 #watch .video-showcase-cta { flex-wrap: wrap; max-width: 100%; }
  body.pf3 #watch .video-showcase-cta .cta-primary,
  body.pf3 #watch .video-showcase-cta .cta-secondary { max-width: 100%; width: 100%; text-align: center; }
  body.pf3 .pf-steps { padding-left: 0; }
  body.pf3 .pf-steps .fx-rail { left: 6px; }
  body.pf3 .pf-steps .pf-step,
  body.pf3 .pf-steps .pf-step:nth-child(odd):not(.fx-rail) { margin-left: 26px; max-width: calc(100% - 26px); }
  body.pf3 .pf-steps .step-card { max-width: 100%; box-sizing: border-box; }
  /* these sections have NO pins, so clipping their horizontal bleed is safe */
  body.pf3 #how-it-works,
  body.pf3 #integrations,
  body.pf3 #features,
  body.pf3 #testimonials,
  body.pf3 #faq,
  body.pf3 #calc { overflow-x: clip; }
  /* #watch (video pin) + #pricing (card pin) CANNOT be clipped without breaking
     their pins, so constrain their inner content to the viewport instead */
  body.pf3 #watch .video-frame-wrapper,
  body.pf3 #watch .video-showcase-cta { max-width: 100%; box-sizing: border-box; }
  body.pf3 #pricing .pricing-hero-card,
  body.pf3 #pricing .pricing-hero-content,
  body.pf3 #pricing .pricing-hero-main,
  body.pf3 #pricing .pricing-hero-details,
  body.pf3 #pricing .pricing-value-props { max-width: 100%; box-sizing: border-box; }
}
body.pf3 .pf3-eyebrow {
  font-family: var(--pf3-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-tertiary, #64748b);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.pf3 .pf3-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent-orange, #ff6b2b);
}
body.pf3 .hero-display.pf3-display {
  font-family: var(--pf3-display);
  font-size: clamp(3rem, 5.2vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin-bottom: 24px;
}
body.pf3 .hero-subtitle { max-width: 34em; }
body.pf3 .pf3-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--pf3-hairline);
  font-family: var(--pf3-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #64748b);
}
body.pf3 .pf3-trust .pf3-tick { color: var(--success, #10b981); margin-right: 6px; }

body.pf3 .pf3-hero-ghost {
  bottom: -0.14em;
  left: 2%;
  font-family: var(--pf3-display);
  color: var(--text-primary, #0f172a);
  z-index: 1;
}

/* ---- Rescued Call stage ---- */
body.pf3 .pf3-hero-stage { position: relative; min-height: 460px; }
body.pf3 .pf3-hero-stage::before {
  /* hairline grid backdrop */
  content: "";
  position: absolute;
  inset: -8% -6%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--pf3-hairline) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, var(--pf3-hairline) 0 1px, transparent 1px 84px);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}
body.pf3 .pf3-call-card {
  position: relative;
  z-index: 2;
  border-radius: 20px;
  padding: 22px 24px 20px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pf3-hairline);
  box-shadow: 0 30px 80px rgba(59, 130, 246, 0.16), 0 10px 30px rgba(15, 23, 42, 0.1);
}
body.pf3 .pf3-call-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--pf3-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary, #64748b);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pf3-hairline);
}
body.pf3 .pf3-call-head .pf3-incoming {
  color: var(--accent-orange, #ff6b2b);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body.pf3 .pf3-call-head .pf3-incoming::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-orange, #ff6b2b);
  animation: pf3Blink 1.6s ease-in-out infinite;
}
@keyframes pf3Blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
body.pf3 .pf3-call-caller {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
  margin: 14px 0 10px;
}
body.pf3 .pf3-call-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  color: var(--accent-primary, #3b82f6);
  margin-bottom: 12px;
}
body.pf3 .pf3-call-transcript {
  min-height: 215px; /* tall enough for the full 6-turn exchange: no layout shift while typing */
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary, #475569);
  white-space: pre-line;
}
body.pf3 .pf3-call-transcript .fx-typing-text { white-space: pre-line; }
body.pf3 .pf3-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--success, #10b981);
  color: var(--success-dark, #059669);
  font-family: var(--pf3-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
  background: rgba(16, 185, 129, 0.06);
}
body.pf3 .pf3-call-caption {
  display: block;
  margin-top: 14px;
  font-family: var(--pf3-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary, #64748b);
  text-decoration: none;
}
body.pf3 .pf3-call-caption strong { color: var(--accent-primary, #3b82f6); }
body.pf3 .pf3-call-caption:hover strong { text-decoration: underline; }

body.pf3 .pf3-live-chip {
  position: absolute;
  top: -18px;
  right: -8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-dark, #0f172a);
  color: #f8fafc;
  font-family: var(--pf3-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}
body.pf3 .pf3-live-chip .pf-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  animation: pfLivePulse 2s ease-out infinite;
}

/* hero marquee: quieter, tucked under */
body.pf3 .trusted-by { margin-top: 26px; position: relative; z-index: 5; }

/* ============================================================
   VIDEO (#watch) — off-axis 8/4 with mono side rail
   ============================================================ */
body.pf3 #watch .video-frame-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  max-width: none;
}
body.pf3 #watch .video-showcase-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 0;
  padding-bottom: 8px;
}
body.pf3 #watch .video-showcase-cta::before {
  content: "UNDER 45 SECONDS — WATCH IT BUILD A CALL FLOW";
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-tertiary, #64748b);
  margin-bottom: 8px;
}

/* ============================================================
   PROOF BAND — bigger numerals, never clipped
   ============================================================ */
/* owner rule: 1x4 or 2x2 - never 3+1. min-content floor so long words
   ("Thousands", "Hundreds") can never be clipped mid-word */
body.pf3 .proof-band .proof-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(min-content, 1fr));
  gap: 28px 24px;
}
@media (max-width: 1099px) {
  body.pf3 .proof-band .proof-stats { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
}
body.pf3 .proof-band .proof-stat-number {
  font-size: clamp(1.8rem, 2.4vw, 2.7rem);
  overflow-wrap: normal;
  white-space: nowrap;
}
body.pf3 .proof-band .proof-band-lead {
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ghost word sized to never overflow awkwardly */
body.pf3 .proof-band .fx-ghost { font-size: clamp(3.5rem, 10vw, 8.5rem); }

/* ============================================================
   PRODUCT (#product) — vertical tab rail left, stage right
   ============================================================ */
body.pf3 .product-showcase .container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas:
    "slug  slug"
    "title title"
    "sub   sub"
    "tabs  stage";
  gap: 0 clamp(24px, 3vw, 56px);
}
body.pf3 .product-showcase .pf3-slug { grid-area: slug; }
body.pf3 .product-showcase .section-title { grid-area: title; }
body.pf3 .product-showcase .section-subtitle { grid-area: sub; margin-bottom: 46px; }
body.pf3 .product-showcase .showcase-tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  border-left: 2px solid var(--pf3-hairline);
  align-self: start;
  position: sticky;
  top: 110px;
}
body.pf3 .showcase-tabs { counter-reset: pftab; }
body.pf3 .showcase-tab {
  counter-increment: pftab;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  border-radius: 0;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--pf3-hairline); /* subtle divider between steps */
  margin-left: -2px;
  background: transparent;
  padding: 13px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.25s var(--fx-ease-out), color 0.25s var(--fx-ease-out);
}
body.pf3 .showcase-tab:last-child { border-bottom: 0; }
/* obvious step number on every tab */
body.pf3 .showcase-tab::before {
  content: counter(pftab, decimal-leading-zero);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #94a3b8);
  min-width: 20px;
  transition: color 0.25s var(--fx-ease-out);
}
body.pf3 .showcase-tab::after { content: none; }
body.pf3 .showcase-tab.active {
  border-left-color: var(--accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.07);
  color: var(--accent-primary, #3b82f6);
}
body.pf3 .showcase-tab.active::before { color: var(--accent-orange, #ff6b2b); }
body.pf3 .showcase-content { grid-area: stage; }

/* pinned scrub: section holds while scroll advances the tabs (glue maps progress -> tab).
   Kept SHORT so the pinned item fits the viewport (pf-hold auto-disables if taller
   than vh-96, which would hide its bottom while pinned). */
body.pf3 .pf3-product-hold::after { height: 260vh; }
/* force compact so the pinned item fits ~all desktop heights (pf-hold disables if > vh-96) */
body.pf3 .product-showcase.pf3-num.pf-hold-item { padding: 22px 0 !important; }
body.pf3 .pf3-product-hold .section-title { margin-bottom: 6px; font-size: clamp(2rem, 3.4vw, 2.9rem); }
body.pf3 .pf3-product-hold .section-subtitle { margin-bottom: 14px; }
body.pf3 .pf3-product-hold .showcase-image-wrapper img { max-height: min(34vh, 380px) !important; object-fit: contain; }
body.pf3 .pf3-product-hold .showcase-description { margin-top: 10px; font-size: 0.9rem; }

/* try-ai: extended hold (~3 scroll steps) */
body.pf3 .pf3-tryai-hold::after { height: 130vh; }

/* hero: custom bottom-anchored sticky hold (independent of pf-hold's fit rule,
   since the hero is taller than the viewport). The hero sticks with its bottom at
   the viewport edge while the exit choreography plays over the extra scroll room. */
@media (min-width: 1081px) {
  body.pf3 .pf3-hero-wrap::after { content: ""; display: block; height: 70vh; }
  body.pf3 .pf3-hero-wrap > #hero-b {  /* id-level: must beat body.pf3 #hero-b { position: relative } */
    position: -webkit-sticky;
    position: sticky;
    /* actual negative top is set by the page glue: top = viewportH - heroH,
       so the hero holds with its bottom at the viewport edge while exiting */
    top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.pf3 .pf3-hero-wrap::after { height: 0; }
  body.pf3 .pf3-hero-wrap > .hero { position: static; }
}

/* keep the pinned trial section as short as possible so it pins on more heights
   (the HubSpot iframe is fixed-height; everything around it is compressed).
   NOTE: no transform/overflow anywhere near .hs-form-frame - sizing only. */
body.pf3 #trial.pf-hold-item { padding-top: 20px !important; padding-bottom: 20px !important; }
body.pf3 #trial .section-title { font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin-bottom: 6px; }
body.pf3 #trial .section-subtitle { font-size: 0.95rem; margin-bottom: 8px; max-width: 640px; }

/* pricing pin fix: shared components.css sets overflow:hidden on .section, and the
   pf-player ancestor-relaxer downgrades it to overflow-x:clip - both break the sticky
   of the INNER pricing card (unlike product/try-ai where the section itself is the pin).
   Force visible so the card actually holds. No horizontal content to clip here. */
body.pf3 #pricing { overflow: visible !important; }

/* ============================================================
   PRICING — the $0.25 typographic moment
   ============================================================ */
body.pf3 #pricing .pricing-hero-card {
  border: 0;
  border-top: 1px solid var(--pf3-hairline);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
body.pf3 #pricing .pricing-hero-card::before { content: none; }
body.pf3 #pricing .pricing-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
body.pf3 #pricing .pricing-hero-main { background: transparent; border: 0; box-shadow: none; padding: 0; text-align: left; }
body.pf3 #pricing .pricing-label {
  background: transparent;
  color: var(--text-tertiary, #64748b);
  font-family: var(--pf3-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0;
  border-radius: 0;
}
body.pf3 #pricing .pricing-hero-price { justify-content: flex-start; align-items: baseline; }
body.pf3 #pricing .price-currency { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; }
body.pf3 #pricing .price-amount {
  font-family: var(--pf3-display);
  font-size: clamp(6rem, 13vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: linear-gradient(120deg, var(--accent-primary, #3b82f6), var(--accent-secondary, #6366f1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.pf3 #pricing .price-unit { font-size: clamp(1.2rem, 2vw, 1.8rem); color: var(--text-tertiary, #64748b); }
body.pf3 #pricing .pricing-features-inline {
  columns: 1;
  font-family: var(--pf3-mono);
  font-size: 0.82rem;
}
body.pf3 #pricing .pricing-features-inline li {
  border-bottom: 1px solid var(--pf3-hairline);
  padding: 8px 0;
}

/* ============================================================
   TESTIMONIAL — editorial pull-quote
   ============================================================ */
body.pf3 #testimonials .pf-quote-wrap > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-left: 2px solid var(--accent-orange, #ff6b2b) !important;
  border-radius: 0 !important;
  padding: 10px 0 10px clamp(24px, 4vw, 56px) !important;
}
body.pf3 #testimonials .pf-quote-wrap > div > div:first-child { display: none !important; } /* old round quote icon */
body.pf3 #testimonials blockquote {
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  line-height: 1.55 !important;
  font-weight: 500;
  color: var(--text-primary, #0f172a) !important;
}
body.pf3 .pf-quote-mark { font-size: clamp(7rem, 12vw, 11rem); top: -0.4em; left: -0.08em; }

/* ============================================================
   FAQ — two-col: sticky head left, accordion right
   ============================================================ */
@media (min-width: 900px) {
  body.pf3 #faq .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
  }
  body.pf3 #faq .section-title,
  body.pf3 #faq .section-subtitle { grid-column: 1; }
  body.pf3 #faq .faq-list { grid-column: 2; grid-row: 1 / span 3; }
}

/* ============================================================
   HOW IT WORKS - tightened (owner feedback: trim + clean up)
   ============================================================ */
body.pf3 .pf-steps { max-width: 880px; }
body.pf3 .pf-steps .pf-step { margin-bottom: 26px; width: calc(50% - 40px); }
/* gentle interleave: fills the opposite column's dead space without cards
   crashing into each other or the rail */
@media (min-width: 769px) {
  body.pf3 .pf-steps .pf-step { margin-bottom: 8px; }
  body.pf3 .pf-steps .pf-step:nth-child(n+3) { margin-top: -96px; }
}
body.pf3 .pf-steps .step-card {
  min-height: 0;
  padding: var(--space-lg, 1.5rem);
  padding-top: 34px; /* room for the number badge */
  text-align: left;
}
body.pf3 .pf-steps .step-card .step-icon { margin-left: 0; width: 56px; height: 56px; }
body.pf3 .pf-steps .step-screenshot { height: 150px; margin-bottom: var(--space-sm, 0.75rem); }
/* OBVIOUS step number: clean circle badge pinned to each card's top-left.
   Fully self-contained so no older ghost/base styles bleed through. */
body.pf3 .pf-steps .pf-step .step-number,
body.pf3 .pf-steps .pf-step:nth-child(even) .step-number,
body.pf3 .pf-steps .pf-step:nth-child(odd) .step-number {
  position: absolute;
  top: -16px;
  left: 20px;
  right: auto;
  bottom: auto;
  transform: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-primary, #3b82f6), var(--accent-secondary, #6366f1));
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 1;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}
/* active step (as the blue line passes): badge gets a glow ring */
body.pf3 .pf-steps .pf-step.fx-on .step-number {
  color: #fff;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.16), 0 4px 14px rgba(59, 130, 246, 0.35);
}

/* ============================================================
   TRY-AI - compressed so the scroll-pin fits the viewport again
   ============================================================ */
/* compressed hard so the pinned section fits even ~700px-tall viewports
   (laptops + Windows display scaling) - otherwise pf-hold rightly disables
   the pin and the section scrolls straight past */
body.pf3 #try-ai .pf-try-eyebrow { margin-bottom: 0.5rem; padding: 6px 12px; font-size: 0.8rem; }
body.pf3 #try-ai .pf-try-title { font-size: 1.9rem; margin-bottom: 0.5rem; }
body.pf3 #try-ai .pf-try-sub { margin-bottom: 0.75rem; font-size: 1rem; }
body.pf3 #try-ai .pf-try-transcript { min-height: 54px; margin-bottom: 0.75rem; font-size: 0.9rem; }
body.pf3 #try-ai .pf-try-wave { margin-bottom: 0.75rem; height: 20px; }
body.pf3 #try-ai .pf-try-btn { padding: 16px 34px; font-size: 1.15rem; }
body.pf3 #try-ai .pf-try-note { margin-top: 0.75rem; }
body.pf3 #try-ai .pf-try-pill { margin-top: 0.6rem; }
body.pf3 #try-ai .pf-try-checks { margin-top: 0.9rem; gap: 1.25rem; }
body.pf3 #try-ai .fx-ghost { font-size: clamp(3rem, 8vw, 6.5rem); }

/* ============================================================
   MOBILE COLLAPSES
   ============================================================ */
@media (max-width: 960px) {
  body.pf3 .pf3-hero-grid { grid-template-columns: 1fr; }
  body.pf3 #watch .video-frame-wrapper { grid-template-columns: 1fr; }
  body.pf3 .product-showcase .container {
    grid-template-columns: 1fr;
    grid-template-areas: "slug" "title" "sub" "tabs" "stage";
  }
  body.pf3 .product-showcase .showcase-tabs {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    border-bottom: 1px solid var(--pf3-hairline);
    margin-bottom: 20px;
  }
  body.pf3 .showcase-tab { border-left: 0; border-bottom: 2px solid transparent; margin-left: 0; }
  body.pf3 .showcase-tab.active { border-left: 0; border-bottom-color: var(--accent-primary, #3b82f6); }
  body.pf3 #pricing .pricing-hero-content { grid-template-columns: 1fr; }
  body.pf3 .pf3-num .pf3-bignum { display: none; }
  body.pf3 .pf3-hero-ghost { display: none; }
}

/* ============================================================
   OFFSCREEN ENTRANCES - extra fx-scroll-reveal variants (module
   reads --fx-sr-* custom props, so variants are pure CSS)
   ============================================================ */
body.pf3 [data-fx~="fx-scroll-reveal"][data-fx-variant="left"] { --fx-sr-o: 0; --fx-sr-t: translateX(-72px); }
body.pf3 [data-fx~="fx-scroll-reveal"][data-fx-variant="right"] { --fx-sr-o: 0; --fx-sr-t: translateX(72px); }
/* how-it-works cards slide in from their own side */
html.pf-motion:not(.fx-reduced) body.pf3 .pf-steps .pf-step:nth-child(even) .step-card.reveal:not(.visible) {
  transform: translateX(-64px);
}
html.pf-motion:not(.fx-reduced) body.pf3 .pf-steps .pf-step:nth-child(odd) .step-card.reveal:not(.visible) {
  transform: translateX(64px);
}
@media (max-width: 768px) {
  html.pf-motion:not(.fx-reduced) body.pf3 .pf-steps .pf-step .step-card.reveal:not(.visible) {
    transform: translateY(30px);
  }
}

/* ============================================================
   VOICE WIDGET - clearly a live interactive demo
   ============================================================ */
/* the mic is THE call-to-action: big, brand-blue, pulsing - but only in the
   idle state (SDK-driven .listening/.connecting states keep their own look) */
body.pf3 .status-indicator:not(.listening):not(.connecting) {
  background: linear-gradient(135deg, var(--accent-primary, #3b82f6), #2563eb);
  box-shadow: 0 8px 26px rgba(59, 130, 246, 0.45);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s var(--fx-ease-out), box-shadow 0.2s var(--fx-ease-out);
}
body.pf3 .status-indicator:not(.listening):not(.connecting):hover {
  transform: scale(1.07);
  box-shadow: 0 12px 34px rgba(59, 130, 246, 0.55);
}
body.pf3 .status-indicator:not(.listening):not(.connecting)::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.5);
  pointer-events: none;
  animation: pfRing 2.4s var(--fx-ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.pf3 .status-indicator:not(.listening):not(.connecting)::after { animation: none; }
}
/* instruction line reads as the action it is */
body.pf3 #statusDescription {
  color: var(--accent-primary, #3b82f6) !important;
  font-weight: 700 !important;
}
.pf-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: 2px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #059669;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pf-demo-badge .pf-demo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: pfLivePulse 2s ease-out infinite;
}
.pf-widget-tips {
  margin: 0 0 var(--space-sm, 0.75rem);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
}
.pf-widget-tips-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary, #3b82f6);
  margin-bottom: 6px;
}
.pf-widget-tips ul { list-style: none; margin: 0; padding: 0; }
.pf-widget-tips li {
  font-size: 0.78rem;
  color: var(--text-secondary, #475569);
  padding: 3px 0;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .pf-demo-badge .pf-demo-dot { animation: none; }
}

/* reduced motion: the blink/pulse decorations still */
@media (prefers-reduced-motion: reduce) {
  body.pf3 .pf3-call-head .pf3-incoming::before,
  body.pf3 .pf3-live-chip .pf-live-dot { animation: none; }
}