/* Hero — Figma 10007:21807 */
/* Top padding tracks the fixed nav (nav top pad = 3.472vw) so content clears it: 213px at 1728. */
.hero { padding: clamp(150px, calc(3.472vw + 153px), 213px) 0 clamp(56px, calc(114 / 1728 * 100vw), 114px); }
.hero .inner { display: flex; flex-direction: column; gap: clamp(32px, calc(48 / 1728 * 100vw), 48px); align-items: center; }
.hero-head { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hero-title { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .1834em; font-size: clamp(40px, calc(78.83 / 1728 * 100vw), 78.83px); text-align: center; }
.hero-title span { white-space: nowrap; }
.hero-title .accent { color: var(--text-success); }
.hero-sub { font-size: clamp(16px, calc(22 / 1728 * 100vw), 22px); text-align: center; }
/* Hero CTAs: mobile only (hidden ≥900px, where the nav carries "Book a demo"). */
.hero-ctas { display: none; }
.hero-btn {
  flex: 1 1 0; max-width: 200px; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 16px; border: 1px solid var(--brand-dark-green);
  font-family: var(--font-body); font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.hero-btn--primary { background: var(--brand-dark-green); color: var(--text-selected); }
.hero-btn--primary:hover { background: #055f58; border-color: #055f58; }
.hero-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.hero-btn--secondary:hover { background: var(--text-primary); color: var(--text-selected); }
.hero-btn:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-btn { transition: none; } }
.hero-canvas-box { --w: 1440; --h: 613.508; }
.hero-canvas { background: #e8e8f2; border-radius: 18.848px; overflow: hidden; }
.hero-glow { position: absolute; width: 729.424px; height: 725.654px; }
.hero-glow img { position: absolute; left: -64.6%; top: -64.94%; width: 229.2%; height: 229.88%; }
.hero-glow.g1 { left: -81.05px; top: 129.11px; }
.hero-glow.g2 { left: 694.55px; top: -54.66px; }
/* ---- Scene 12 (finale) message layout — Figma 10090:1935 ---- */
.bubble-row { position: absolute; display: flex; align-items: flex-end; }
.bubble {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255,255,255,0.3);
  border-radius: var(--r) var(--r) var(--r) 0;
}
.bubble p { color: var(--text-primary); }
.bubble .ts { position: absolute; color: var(--text-unavailable); white-space: nowrap; line-height: normal; }
.b-main { left: 411px; top: 189px; gap: 5.644px; }
.b-main img { width: 63.425px; height: 63.425px; }
.b-main .bubble { --r: 19.89px; width: 548px; height: 120px; padding: 13.26px 33.15px 13.26px 19.89px; }
.b-main p { font-size: 26.52px; line-height: 36.465px; width: 497.407px; }
.b-main .ts { font-size: 19.89px; letter-spacing: .3978px; right: 7.7px; bottom: 9.48px; }
.b-tl { left: 92px; top: 73px; gap: 3.92px; }
.b-tl img { width: 35.236px; height: 35.236px; }
.b-tl .bubble { --r: 11.05px; width: 304.559px; height: 71.73px; padding: 7.367px 18.417px 7.367px 11.05px; }
.b-tl p { font-size: 14.733px; line-height: 20.258px; width: 276.337px; }
.b-tl .ts { font-size: 11.05px; letter-spacing: .221px; right: 4.77px; bottom: 5.76px; }
.b-br { left: 987px; top: 368px; gap: 3.92px; }
.b-br img { width: 36.646px; height: 36.646px; }
.b-br .bubble { --r: 11.492px; width: 316.741px; height: 74.599px; padding: 7.661px 19.153px 7.661px 11.492px; }
.b-br p { font-size: 15.323px; line-height: 21.069px; width: 287.391px; }
.b-br .ts { font-size: 11.49px; letter-spacing: .2298px; right: 3.57px; bottom: 5.21px; }
.b-tr { left: 995px; top: 80px; gap: 3.92px; }
.b-tr img { width: 28.217px; height: 28.217px; }
.b-tr .bubble { --r: 8.849px; width: 249.213px; height: 41.392px; padding: 5.899px 14.748px 5.899px 8.849px; }
.b-tr p { font-size: 11.799px; line-height: 16.223px; width: 229.38px; white-space: nowrap; }
.b-tr .ts { font-size: 8.85px; letter-spacing: .177px; right: 3.71px; bottom: 4.18px; }
.b-bl { left: 112px; top: 359px; gap: 3.92px; }
.b-bl img { width: 33.827px; height: 33.827px; }
.b-bl .bubble { --r: 10.608px; width: 292.377px; height: 68.861px; padding: 7.072px 17.68px 7.072px 10.608px; }
.b-bl p { font-size: 14.144px; line-height: 19.448px; width: 265.284px; }
.b-bl .ts { font-size: 10.61px; letter-spacing: .2122px; right: 4.44px; bottom: 4.5px; }

/* ---- Mobile: titles wrap to 2 lines; chat canvas re-composed as a tall stacked column ---- */
@media (max-width: 899px) {
  .hero-title { font-size: clamp(38px, 11vw, 48px); line-height: 1.12; }
  .hero-sub { font-size: 16px; line-height: 1.45; max-width: 520px; margin: 0 auto; }
  /* nory-style rhythm: headline → sub → two CTAs side by side → full-width product card */
  .hero { padding-top: 120px; padding-bottom: 72px; }
  .hero .inner { gap: 0; }
  .hero-head { gap: 16px; }
  .hero-ctas { display: flex; justify-content: center; gap: 12px; width: 100%; margin: 28px 0 40px; }
}

/* Stacked chat column from tablet down: plain scaling makes the small bubbles unreadable below 1200px.
   Every scene is centred in the 358×600 compact canvas and shrunk with zoom. */
@media (max-width: 1199px) {
  .hero-canvas-box { --w: 358; --h: 600; max-width: 480px; border-radius: 16px; }
  .hero-canvas { border-radius: 16px; }
  .hero-rig { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 20px 14px; }
  .hero-glow.g1 { left: -420px; top: 220px; }
  .hero-glow.g2 { left: -80px; top: -260px; }
  /* 12 — five messages as a stacked chat, headline below */
  .hero-canvas .bubble-row { position: relative; left: auto; top: auto; gap: 6px; max-width: 266px; }
  .hero-canvas .bubble { --r: 14px; width: auto; height: auto; padding: 10px 14px 22px 14px; }
  .hero-canvas .bubble p { font-size: 15px; line-height: 21px; width: auto; white-space: normal; }
  .hero-canvas .ts { font-size: 11px; letter-spacing: .2px; right: 8px; bottom: 5px; }
  .hero-canvas .bubble-row img { width: 30px; height: 30px; flex-shrink: 0; }
  .b-tl { order: 1; align-self: flex-start; }
  .b-tr { order: 2; align-self: flex-end; }
  .hero-canvas .b-main { order: 3; align-self: flex-start; max-width: 316px; }
  .b-bl { order: 4; align-self: flex-end; }
  .b-br { order: 5; align-self: flex-start; margin-left: 18px; }
  .hero-canvas .b-main .bubble { --r: 18px; padding: 14px 18px 26px; }
  .hero-canvas .b-main p { font-size: 18px; line-height: 25px; }
  .hero-canvas .b-main .ts { font-size: 13px; }
  .hero-canvas .b-main img { width: 40px; height: 40px; }
  .hero-canvas .hero-kf-headline { order: 6; position: relative; left: auto; top: auto; align-self: center; margin-top: 4px; font-size: 32px; }

  /* centred single-card scenes */
  .hero-canvas.is-seq .hero-kf-ask,
  .hero-canvas.is-seq .hero-kf-typing,
  .hero-canvas.is-seq .hero-kf-vat,
  .hero-canvas.is-seq .hero-kf-recept,
  .hero-canvas.is-seq .hero-kf-campaign,
  .hero-canvas.is-seq .hero-kf-go { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: max-content; height: max-content; }
  .hero-canvas.is-seq .hero-kf-req { zoom: .44; }
  .hero-canvas.is-seq .hero-kf-req .hero-kf-askbubble { width: 690px; padding-right: 40px; }
  .hero-canvas.is-seq .hero-kf-req .hero-kf-askbubble p { width: auto; }
  .hero-canvas.is-seq .hero-kf-q2 { zoom: .4; }
  .hero-canvas.is-seq .hero-kf-ask2 { zoom: .43; }
  .hero-canvas.is-seq .hero-kf-typing { zoom: .6; }
  .hero-canvas.is-seq .hero-kf-vat { zoom: .48; }
  .hero-canvas.is-seq .hero-kf-recept { zoom: .6; }
  .hero-canvas.is-seq .hero-kf-campaign { zoom: .6; }
  .hero-canvas.is-seq .hero-kf-go { zoom: .55; }
  /* 7 — the card moves up (JS) and the two messages sit below it */
  .hero-canvas.is-seq .hero-kf-s7 { left: 14px; right: 14px; top: auto; bottom: 22px; gap: 12px; }
  .hero-canvas .hero-kf-s7row { gap: 6px; max-width: 300px; }
  .hero-canvas .hero-kf-s7row > img { width: 30px; height: 30px; }
  .hero-canvas .hero-kf-s7row:nth-child(2) { align-self: flex-end; }
  /* 11 — question + chart only, centred; operator pairs hidden */
  .hero-canvas.is-seq .hero-kf-montage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .hero-canvas .hero-mt-pair { display: none; }
  .hero-canvas .hero-mt-q, .hero-canvas .hero-mt-chart { position: relative; left: auto; top: auto; }
  .hero-canvas .hero-mt-q { align-self: flex-end; margin-right: 14px; }
  .hero-canvas .hero-mt-askbubble { zoom: .9; }
  .hero-canvas .hero-mt-chart .hero-mt-zoom { zoom: .48; }
}
@media (max-width: 380px) {
  .hero-canvas .hero-kf-headline { font-size: 28px; }
  .hero-canvas.is-seq .hero-kf-req { zoom: .4; }
  .hero-canvas.is-seq .hero-kf-q2 { zoom: .36; }
  .hero-canvas.is-seq .hero-kf-ask2 { zoom: .38; }
  .hero-canvas.is-seq .hero-kf-vat { zoom: .43; }
  .hero-canvas.is-seq .hero-kf-recept { zoom: .54; }
  .hero-canvas.is-seq .hero-kf-campaign { zoom: .55; }
  .hero-canvas .hero-mt-chart .hero-mt-zoom { zoom: .44; }
}

/* ---- Hero film (js/hero-seq.js: one GSAP timeline; it adds .is-seq to .hero-canvas) ----
   All motion (entrances, exits, camera, count-ups, line draw, pops) is owned by GSAP — no CSS transitions/animations here.
   Without JS / GSAP: the 5 finale messages show statically and the other scenes stay hidden. */
.hero-camera, .hero-rig { position: absolute; inset: 0; perspective: 1200px; }
.hero-camera { transform-origin: 50% 50%; } /* ambient drift */
.hero-rig { transform-origin: 0 0; }        /* scripted push-ins / pull-backs */
.hero-kf { display: none; }
.hero-canvas.is-seq .hero-kf { display: flex; }
.hero-canvas.is-seq .bubble-row,
.hero-canvas.is-seq .hero-kf { visibility: hidden; } /* GSAP autoAlpha reveals them */

/* Decorative layers: only the arc (scene 8) is used; ring and leak stay hidden (kept for the motion helpers) */
.hero-fx { position: absolute; inset: 0; pointer-events: none; }
.hero-fx > span { position: absolute; left: 50%; top: 50%; opacity: 0; visibility: hidden; }
.hero-fx-ring {
  width: 1600px; height: 1600px; margin: -800px 0 0 -800px; border-radius: 50%;
  border: 2px solid rgba(7, 117, 108, 0.4);
  box-shadow: 0 0 48px rgba(178, 237, 216, 0.55), inset 0 0 48px rgba(178, 237, 216, 0.45);
}
.hero-fx-arc {
  width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%;
  background: conic-gradient(from 0turn, rgba(178, 237, 216, 0) 0turn, rgba(178, 237, 216, 0) .55turn, rgba(178, 237, 216, .9) .92turn, #07756c 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.hero-fx-leak {
  left: 0; top: -40%; width: 55%; height: 180%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 30%, rgba(255, 255, 255, .95) 46%, rgba(178, 237, 216, .8) 58%, rgba(201, 255, 236, .4) 72%, rgba(255, 255, 255, 0) 100%);
}

/* Shared glass for new hero surfaces (same recipe as css/glass.css) */
.hero-canvas .hero-mt-askbubble { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }

/* Word-by-word lines (intro + finale headline) with a light sweep over the accent words */
.hero-intro-word { display: inline-block; position: relative; }
.hero-sheen-host { position: relative; display: inline-block; }
.hero-intro-sheen { position: absolute; left: 0; top: 0; white-space: nowrap; color: #3dbf9f; clip-path: inset(0 100% 0 0); visibility: hidden; pointer-events: none; }

/* 1 — Intro "Meet Barespace AI" (Figma 10090:1223: Bethany 78.83px, centred) */
.hero-kf-intro { position: absolute; inset: 0; align-items: center; justify-content: center; }
.hero-intro { position: relative; font-size: 78.83px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
.hero-intro .accent { color: var(--text-success); }

/* Dark user bubbles (scenes 2, 5, 8) — tail bottom-right */
.hero-kf-ask { position: absolute; }
.hero-kf-askbubble {
  position: relative; height: 111px; padding: 17px 24px;
  background: rgba(42, 42, 42, 0.8); border-radius: 26.758px 26.758px 0 26.758px;
}
.hero-kf-askbubble p { font-size: 35.677px; line-height: 49.055px; color: var(--text-selected); white-space: nowrap; }
.hero-canvas .hero-kf-askbubble .ts { position: absolute; right: 12.5px; bottom: 12.5px; font-size: 26.76px; letter-spacing: .5352px; color: var(--text-unavailable); }
/* 2 — request (Figma 10090:1250) */
.hero-kf-req { left: 345px; top: 251px; }
.hero-kf-req .hero-kf-askbubble { width: 751px; height: 143px; padding: 17px 99px 17px 21px; }
.hero-kf-req .hero-kf-askbubble p { white-space: normal; width: 631px; }
/* 5 — question (Figma 10090:1437) */
.hero-kf-q2 { left: 311px; top: 253px; }
.hero-kf-q2 .hero-kf-askbubble { width: 818px; height: 108px; padding: 17px; }
/* 8 — "Can you fill my dead space this week?" (Figma 10090:1734) */
.hero-kf-ask2 { left: 344.5px; top: 251px; }
.hero-kf-ask2 .hero-kf-askbubble { width: 751px; }

/* 3 — typing indicator (Figma 10090:1259) */
.hero-kf-typing { position: absolute; left: 574px; top: 269px; align-items: flex-end; gap: 6.568px; }
.hero-kf-typing > img { flex-shrink: 0; }
.hero-canvas .hero-kf-typingbubble { --r: 23.145px; width: 212px; height: 76px; padding: 0; }
.hero-kf-dots { position: absolute; left: 51.63px; top: 26px; display: flex; gap: 18px; }
.hero-kf-dot { display: block; width: 24px; height: 24px; border-radius: 50%; background: #bdbdc9; }

/* 4 — VAT reply card (Figma 10090:1393); reuses the chart bubble's glass + type styles */
.hero-kf-vat { position: absolute; left: 376px; top: 115px; align-items: flex-end; gap: 6.57px; }
.hero-kf-vat > img { flex-shrink: 0; }
.hero-kf-vatbubble { width: 607px; height: 383px; }
.hero-kf-vatbubble .hero-kf-head img { width: 32.12px; height: 32.12px; }
.hero-kf-chip { display: flex; align-items: center; gap: 13px; width: 531px; padding: 13px 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.4); }
/* The VAT card itself gets Liquid Glass from css/glass.css (.hero-kf-chartbubble). The attachment chip is a raised glass
   tile (Figma 10090:1393), same recipe as the receptionist tiles: frosted backdrop, white edge, highlights, soft shadow. */
.hero-canvas .hero-kf-chip {
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 12px rgba(42, 42, 60, 0.04),
    0 6px 20px rgba(42, 42, 60, 0.06);
}
.hero-kf-chip img { flex-shrink: 0; }
.hero-kf-chip .t { height: 32px; font-size: 25px; font-weight: 500; line-height: 38.874px; color: var(--text-primary); white-space: nowrap; }
.hero-kf-chip .s { height: 31px; font-size: 22px; line-height: 38.874px; color: var(--text-secondary); }
.hero-kf-sent { font-size: 28.272px; line-height: 38.874px; color: var(--text-primary); white-space: nowrap; }

/* 6 + 7 — AI receptionist card (Figma 10090:1446): css/receptionist.css card at the frame's 1.18266× size */
.hero-kf-recept { position: absolute; left: 449px; top: 101px; align-items: flex-end; gap: 6.57px; }
.hero-kf-recept > img { flex-shrink: 0; }
.hero-canvas .hero-kf-receptcard {
  zoom: 1.18266; width: 391px; height: 349.21px; margin: 0; justify-content: flex-start;
  background: rgba(255, 255, 255, 0.3); border-radius: 15.635px 15.635px 15.635px 0;
  font-family: var(--font-body);
}
/* pin the card's desktop metrics so css/receptionist.css's own mobile rules don't reshape it inside the hero */
.hero-canvas .hero-kf-receptcard { padding: 18.246px; gap: 18.246px; }
.hero-canvas .hero-kf-receptcard .receptionist-stats, .hero-canvas .hero-kf-receptcard .receptionist-stat-row { gap: 18.246px; }
.hero-canvas .hero-kf-receptcard .receptionist-id-text .name { font-size: 18.246px; }
.hero-canvas .hero-kf-receptcard .receptionist-id-text .sub { font-size: 15.201px; color: var(--text-secondary); }
.hero-canvas .hero-kf-receptcard .receptionist-stat { padding: 18.246px; background: rgba(255, 255, 255, 0.2); }
/* Liquid Glass on the inner tiles, pill and icon (Figma 10090:1446): same recipe as css/glass.css — frosted backdrop,
   bright white edge, top-left highlight, faint recessed inner shade and drop shadow — instead of receptionist.css's flat grey border. */
.hero-canvas .hero-kf-receptcard .receptionist-stat {
  border: 1.14px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 12px rgba(42, 42, 60, 0.05),
    0 6px 20px rgba(42, 42, 60, 0.06);
}
.hero-canvas .hero-kf-receptcard .receptionist-pill,
.hero-canvas .hero-kf-receptcard .receptionist-icon {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.85), inset -1px -1px 0 rgba(255, 255, 255, 0.25), 0 3px 10px rgba(7, 117, 108, 0.06);
}
.hero-canvas .hero-kf-receptcard .receptionist-stat .label { color: var(--text-secondary); }
.hero-canvas .hero-kf-receptcard .receptionist-stat.is-wide .value { font-size: 37.837px; }
.hero-canvas .hero-kf-receptcard .receptionist-stat-row .receptionist-stat { flex: 0 0 166.44px; }
.hero-canvas .hero-kf-receptcard .ts { position: absolute; right: 9.98px; bottom: 11.84px; font-family: var(--font-body); font-size: 15.634px; letter-spacing: .3127px; line-height: normal; color: var(--text-unavailable); white-space: nowrap; }
/* 7 — the two messages on the left (Figma 10090:1635) */
.hero-kf-s7 { position: absolute; left: 96px; top: 132px; flex-direction: column; gap: 111px; }
.hero-kf-s7row { display: flex; align-items: flex-end; gap: 5.246px; }
.hero-kf-s7row > img { flex-shrink: 0; }
.hero-kf-s7row .bubble { --r: 18.486px; width: 509.508px; height: 120px; padding: 12.324px 30.81px 12.324px 18.486px; }
.hero-kf-s7row .bubble p { font-size: 24.648px; line-height: 33.891px; width: 462.295px; white-space: nowrap; }
.hero-kf-s7row .bubble .ts { font-size: 18.49px; letter-spacing: .3698px; right: 7.99px; bottom: 9.17px; }

/* Weekly chart (reused at 0.688× in the montage) */
.hero-kf-chart { display: flex; align-items: flex-end; gap: 6.57px; }
.hero-kf-chart > img { flex-shrink: 0; }
.hero-kf-chartbubble {
  position: relative; width: 637.92px; height: 390.676px; padding: 22.19px;
  display: flex; flex-direction: column; gap: 13.764px;
  background: rgba(255, 255, 255, 0.3); border-radius: 21.204px 21.204px 21.204px 0;
}
.hero-kf-head { display: flex; align-items: center; gap: 6.882px; font-size: 28.272px; line-height: 38.874px; color: var(--text-success); }
.hero-kf-body { display: flex; flex-direction: column; gap: 35.66px; width: 543.619px; }
.hero-kf-figures { display: flex; flex-direction: column; gap: 9.176px; font-size: 28.272px; line-height: 38.874px; }
.hero-kf-total { font-weight: 600; color: var(--text-primary); }
.hero-kf-delta { color: var(--text-secondary); white-space: nowrap; }
.hero-kf-delta .up { color: var(--text-success); }
.hero-kf-figures [data-kf-count] { font-variant-numeric: tabular-nums; }
.hero-kf-graph { display: flex; flex-direction: column; gap: 12.679px; width: 529.355px; margin-left: 7.13px; }
.hero-kf-plot { position: relative; width: 529.355px; height: 107.772px; }
.hero-kf-plot .layer { position: absolute; inset: -0.37% -0.15% 0 -0.15%; }
.hero-kf-plot .layer img { width: 100%; height: 100%; }
.hero-kf-axis { display: flex; justify-content: space-between; font-size: 22.189px; line-height: 38.874px; color: var(--text-secondary); }
.hero-canvas .hero-kf-chartbubble .ts { position: absolute; right: 11.1px; bottom: 10.96px; font-size: 21.2px; letter-spacing: .424px; color: var(--text-unavailable); }
.hero-kf-pulse {
  position: absolute; left: 52.24%; top: 21.25%; width: 8.5px; height: 8.5px; margin: -4.25px 0 0 -4.25px;
  border-radius: 50%; background: var(--brand-dark-green); opacity: 0;
}

/* Graph: the projection segment only covers "today" onwards (its fade-in and the line draw are animated by GSAP) */
.hero-canvas.is-seq .hero-kf-plot .projection { clip-path: inset(0 0 0 52%); }

.hero-kf-campaign { position: absolute; left: 457px; top: 72px; align-items: flex-end; gap: 4.792px; }
.hero-kf-campaign { isolation: isolate; }
.hero-kf-campaign > img { flex-shrink: 0; }
/* Soft "product shot" shadow under the campaign card; GSAP grows it as the card lifts */
.hero-kf-campaign-shadow {
  position: absolute; left: 70px; right: 0; top: 50px; bottom: -36px; z-index: -1; border-radius: 48px;
  background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(42, 42, 60, 0.2), rgba(42, 42, 60, 0) 100%);
  opacity: 0; pointer-events: none;
}
.hero-kf-campaignbubble { height: 469px; }
.hero-kf-go { position: absolute; left: 533px; top: 245px; }
.hero-kf-gobubble {
  position: relative; width: 374.889px; height: 123.612px; padding: 22.29px 0 0 22.29px;
  background: rgba(42, 42, 42, 0.9); border-radius: 37.461px 37.461px 0 37.461px;
}
.hero-kf-gobubble p { font-size: 49.948px; line-height: 68.678px; color: var(--text-selected); white-space: nowrap; }
.hero-canvas .hero-kf-gobubble .ts { position: absolute; right: 11px; bottom: 7.44px; font-size: 37.46px; letter-spacing: .7492px; color: var(--text-unavailable); }
.hero-kf-react {
  position: absolute; left: 276.27px; top: 113.37px;
  padding: 13.51px 22.966px; border-radius: 40.529px; background: rgba(255, 255, 255, 0.1);
  font-family: "SF Pro", -apple-system, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 39.097px; line-height: 44.812px;
}
/* Ring pulse that expands from the "Go ahead" bubble as it lands */
.hero-kf-go-ring {
  position: absolute; left: 0; top: 0; width: 374.889px; height: 123.612px;
  border: 2px solid rgba(7, 117, 108, 0.5); border-radius: 37.461px 37.461px 0 37.461px;
  opacity: 0; pointer-events: none;
}

/* 11 — recap montage (Figma 10090:1786). Zoom wrappers reproduce the frame's sizes; outer wrappers carry GSAP transforms. */
.hero-canvas.is-seq .hero-kf-montage { display: block; }
.hero-kf-montage { position: absolute; inset: 0; }
.hero-mt-q, .hero-mt-chart, .hero-mt-pair { position: absolute; }
.hero-mt-zoom { position: relative; }
.hero-mt-q { left: 693.18px; top: 186px; }
.hero-canvas .hero-mt-askbubble { width: 292.819px; height: 63.977px; padding: 9.84px 11.83px; border-radius: 15.455px 15.455px 0 15.455px; }
.hero-canvas .hero-mt-askbubble p { font-size: 20.607px; line-height: 28.334px; }
.hero-canvas .hero-mt-askbubble .ts { right: 5.75px; bottom: 6.6px; font-size: 15.46px; letter-spacing: .3092px; }
.hero-mt-chart { left: 446px; top: 263.05px; }
.hero-mt-chart .hero-mt-zoom { zoom: .68794; }
.hero-mt-price { left: 8.43px; top: 9.725px; }
.hero-mt-price .hero-mt-zoom { zoom: 1.02487; }
.hero-mt-roster { left: -137.11px; top: -20.634px; }
.hero-mt-roster .hero-mt-zoom { zoom: 1.08998; }

/* 12 — finale headline (Figma 10090:1935: Bethany 54.74px) */
.hero-canvas.is-seq .hero-kf-headline { display: block; }
.hero-kf-headline { position: absolute; left: 441px; top: 479px; font-size: 54.74px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
.hero-kf-headline .accent { color: var(--text-success); }

/* Compact overrides that must come after the desktop scene rules above */
@media (max-width: 1199px) {
  .hero-canvas .hero-kf-s7row .bubble { --r: 14px; width: auto; height: auto; padding: 10px 14px 22px 14px; }
  .hero-canvas .hero-kf-s7row .bubble p { font-size: 15px; line-height: 21px; width: auto; white-space: normal; }
  .hero-canvas .hero-kf-s7row .bubble .ts { font-size: 11px; letter-spacing: .2px; right: 8px; bottom: 5px; }
  .hero-canvas .hero-kf-s7row .bubble br { display: none; }
  .hero-canvas .hero-intro { font-size: 40px; }
  .hero-canvas .hero-fx-ring { width: 900px; height: 900px; margin: -450px 0 0 -450px; }
  .hero-canvas .hero-fx-arc { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
  .hero-canvas .hero-fx-leak { width: 90%; }
}
@media (max-width: 380px) {
  .hero-canvas .hero-intro { font-size: 34px; }
}

/* ================= Phone film (≤767px) — Figma 10104:10366 (layout) + 10104:10365 (keyframes) =================
   Its own DOM (.hero-phone) and its own GSAP branch in js/hero-seq.js. ≥768px never shows it. */
.hero-phone, .hero-ph-glow { display: none; }
@media (max-width: 767px) {
  /* Hero head per the phone layout frame: H1 36px on two lines, subtitle 13.3px, no CTA row (the nav carries "Book a demo"),
     then the film canvas full-bleed down to the bottom of the screen. */
  .hero { padding-bottom: 0; }
  .hero .inner { gap: 0; }
  .hero-head { gap: 8px; }
  .hero-title { flex-direction: column; align-items: center; font-size: 36px; line-height: normal; }
  .hero-sub { font-size: 13.3px; line-height: normal; max-width: 347px; margin: 0 auto; }
  .hero-ctas { display: none; }
  .hero-canvas-box { margin-top: 30px; }
  /* js adds .is-phone and sets the height to 100svh minus the canvas's top offset (min 360px) */
  .hero-canvas-box.is-phone {
    align-self: stretch; width: auto; max-width: none; aspect-ratio: auto; border-radius: 0;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  }
  .hero-canvas-box.is-phone .hero-canvas { width: 100%; height: 100%; transform: none; border-radius: 0; }
  .hero-canvas.is-phone .hero-camera, .hero-canvas.is-phone .hero-glow { display: none; }
  .hero-canvas.is-phone .hero-phone, .hero-canvas.is-phone .hero-ph-glow { display: block; }

  .hero-ph-glow { position: absolute; pointer-events: none; }
  .hero-ph-glow img { position: absolute; display: block; max-width: none; }
  .hero-ph-glow.g1 { left: -282px; top: 204px; width: 430px; height: 428px; }
  .hero-ph-glow.g1 img { left: -32.11%; top: -32.26%; width: 164.22%; height: 164.52%; }
  .hero-ph-glow.g2 { left: calc(50% + 2.54px); top: -16.02px; width: 213.762px; height: 212.657px; }
  .hero-ph-glow.g2 img { left: -64.6%; top: -64.94%; width: 229.2%; height: 229.88%; }

  .hero-phone { position: absolute; inset: 0; }
  .hero-ph-intro, .hero-ph-headline { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
  .hero-ph-intro p, .hero-ph-headline p { font-size: 36px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
  .hero-ph-intro .accent, .hero-ph-headline .accent { color: var(--text-success); }

  /* Threads: one column, 30px gutters, 10px gaps; JS positions each so the newest message sits 36px above the bottom */
  .hero-ph-view { position: absolute; inset: 0; overflow: hidden; }
  .hero-thread { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 0 30px; transform-origin: 0 0; }
  .hero-ph-item { display: flex; align-items: flex-end; flex-shrink: 0; }
  @media (max-width: 379px) { .hero-thread { padding: 0 12px; } } /* narrow phones: 12px gutters so cards don't clip */
  .hero-ph-item.is-user { align-self: flex-end; }
  .hero-ph-item.is-ai { align-self: flex-start; }
  /* user bubbles = the desktop dark bubbles at the keyframes' sizes */
  .hero-ph-item .hero-kf-askbubble { flex-shrink: 0; }
  .ph-req .hero-kf-askbubble { zoom: .34266; width: 751px; height: 143px; padding: 17px 99px 17px 21px; }
  .ph-req .hero-kf-askbubble p { white-space: normal; width: 631px; }
  .ph-q2 .hero-kf-askbubble { zoom: .36101; width: 818px; height: 108px; padding: 17px; }
  .ph-ask2 .hero-kf-askbubble { zoom: .35972; width: 751px; }
  .ph-gosmall .hero-kf-gobubble { zoom: .2575; flex-shrink: 0; }
  /* 3–4 typing indicator and VAT card share a slot: the typing row sits at the slot's top, the card fills it */
  .ph-vatslot { position: relative; }
  .ph-vat { display: flex; align-items: flex-end; gap: 6.57px; }
  .ph-vat > img, .ph-recept > img { width: 34.08px; height: 34.08px; flex-shrink: 0; }
  .ph-vat .hero-kf-vatbubble { zoom: .42395; flex-shrink: 0; }
  .ph-typing { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; gap: 6.568px; zoom: .4617; }
  .ph-typing > img { flex-shrink: 0; }
  .ph-recept { gap: 6.57px; }
  .ph-receptzoom { zoom: .5565; }
  .ph-campaignzoom { zoom: .5703; position: relative; display: flex; align-items: flex-end; gap: 4.792px; isolation: isolate; }
  .ph-campaignzoom > img { flex-shrink: 0; }
  /* ops thread (operator.css classes, in flow; 6px ask→reply, 78px between pairs) */
  .hero-thread-ops { gap: 6px; }
  .ph-op-price { zoom: .8711; }
  .ph-op-roster { zoom: 1.0237; }
  .ph-pairgap { margin-top: 70.33px; } /* 72px visual at zoom 1.0237 */
  .hero-canvas .ph-op .operator-ask, .hero-canvas .ph-op .operator-row { position: relative; left: auto; top: auto; }
  .hero-canvas .ph-op .operator-row > img, .hero-canvas .ph-op .operator-card-tag img { width: auto; height: auto; }
  .hero-canvas .ph-op .operator-card-lines span { white-space: nowrap; }
  /* beat 11: the weekly chart joins the ops thread — 78px after the roster reply (as between the ops pairs), 8.26px q→card */
  .ph-pairgap-plain { margin-top: 72px; }
  .ph-chart { margin-top: 2.26px; }
  .hero-canvas .ph-chartq .hero-mt-askbubble { zoom: .63204; }
  .ph-chart .hero-kf-chart { zoom: .4348; }
  /* Top fade: a masked copy of the canvas background over the top 60px (no mask on the thread, so glass keeps its backdrop) */
  .hero-ph-fade {
    position: absolute; left: 0; top: 0; width: 100%; height: 60px; overflow: hidden; pointer-events: none; background: #e8e8f2;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
  }
  .hero-ph-fade .hero-ph-glow { display: block; }
  /* 9 — "Go ahead" landed in the centre (Figma 10104:10155, 0.643× the desktop bubble) */
  .hero-ph-go { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: max-content; height: max-content; zoom: .64285; }
  /* ✅ react at the bubble's bottom-right corner, just under the timestamp and overlapping the bubble's bottom edge, as in
     Figma 10104:10155 (Shane). The phone bubble keeps the timestamp in its own strip, so the react sits below it rather
     than on it. Values are in the bubble's zoomed units (×0.643 on screen). */
  .hero-ph-go .hero-kf-react { top: auto; bottom: -64px; left: auto; right: 12px; }
}

/* Phone: every bubble/card reserves its own timestamp strip, so the time never overlaps the message and the spacing is the
   same everywhere: content → 7px gap → timestamp line → 5px to the bubble edge, 6px from the right. Each component is
   zoomed differently, so --z (its effective zoom) converts those on-screen px into its local px. Heights become auto. */
@media (max-width: 767px) {
  .hero-phone { --ts-gap: 7px; --ts-inset: 5px; --ts-right: 6px; --ts-lh: 1.2; }
  .hero-phone .ph-req { --z: .34266; }
  .hero-phone .ph-q2 { --z: .36101; }
  .hero-phone .ph-ask2 { --z: .35972; }
  .hero-phone .ph-gosmall { --z: .2575; }
  .hero-phone .hero-ph-go { --z: .64285; }
  .hero-phone .ph-chartq { --z: .63204; }
  .hero-phone .ph-vat { --z: .42395; }
  .hero-phone .ph-recept { --z: .65816; }    /* .5565 wrapper × 1.18266 card */
  .hero-phone .ph-campaign { --z: .5703; }
  .hero-phone .ph-op-price { --z: .8711; }
  .hero-phone .ph-op-roster { --z: 1.0237; }
  .hero-phone .ph-chart { --z: .4348; }

  /* the bubbles / cards */
  .hero-canvas .hero-phone .hero-kf-askbubble,
  .hero-canvas .hero-phone .hero-kf-gobubble,
  .hero-canvas .hero-phone .hero-kf-vatbubble,
  .hero-canvas .hero-phone .hero-kf-receptcard,
  .hero-canvas .hero-phone .hero-kf-campaignbubble,
  .hero-canvas .hero-phone .operator-card,
  .hero-canvas .hero-phone .operator-ask,
  .hero-canvas .hero-phone .hero-kf-chartbubble { height: auto; }
  /* their timestamps: fixed line box, pinned in the strip */
  .hero-canvas .hero-phone .hero-kf-askbubble > .ts,
  .hero-canvas .hero-phone .hero-kf-gobubble > .ts,
  .hero-canvas .hero-phone .hero-kf-chartbubble > .ts,
  .hero-canvas .hero-phone .hero-kf-receptcard > .ts,
  .hero-canvas .hero-phone .growth-bubble > .growth-ts,
  .hero-canvas .hero-phone .operator-card > .operator-ts,
  .hero-canvas .hero-phone .operator-ask > .operator-ts {
    position: absolute; left: auto; top: auto; line-height: var(--ts-lh);
    right: calc(var(--ts-right) / var(--z)); bottom: calc(var(--ts-inset) / var(--z));
  }
  /* strip height = inset + timestamp line + gap (timestamp font sizes are each component's own) */
  .hero-canvas .hero-phone .hero-kf-askbubble { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 26.76px * var(--ts-lh)); }
  .hero-canvas .hero-phone .hero-mt-askbubble { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 15.46px * var(--ts-lh)); }
  .hero-canvas .hero-phone .hero-kf-gobubble { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 37.46px * var(--ts-lh)); }
  .hero-canvas .hero-phone .hero-kf-chartbubble { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 21.2px * var(--ts-lh)); }
  .hero-canvas .hero-phone .hero-kf-receptcard { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 15.634px * var(--ts-lh)); }
  .hero-canvas .hero-phone .hero-kf-campaignbubble { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 16.89px * var(--ts-lh)); }
  .hero-canvas .hero-phone .op-price .operator-card { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 10.75px * var(--ts-lh)); padding-right: 11.06px; }
  .hero-canvas .hero-phone .op-roster .operator-card { padding-bottom: calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 10.26px * var(--ts-lh)); padding-right: 10.57px; }
  /* operator asks: text back in flow (it was absolutely placed), same right offset as the design */
  .hero-canvas .hero-phone .operator-ask { display: flex; justify-content: flex-end; }
  .hero-canvas .hero-phone .operator-ask p { position: static; }
  .hero-canvas .hero-phone .op-price-ask { padding: 6.98px 31.69px calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 10.75px * var(--ts-lh)) 0; }
  .hero-canvas .hero-phone .op-roster-ask { padding: 6.66px 30.92px calc((var(--ts-inset) + var(--ts-gap)) / var(--z) + 10.26px * var(--ts-lh)) 0; }
  /* the growth bubble's own bottom padding is replaced by the strip */
  .hero-canvas .hero-phone .growth-text { padding-bottom: 0; }
}