/*
  Landing: the story sections, after landing.css and landing-hero.css.
  - #pains    the owner's day in big lines; grey to ink at the middle of the screen
              (CSS scroll timeline where supported; ink otherwise).
  - #channels Apple's highlights gallery: a scroll-snap track of four product shots, a
              frosted dot pill with the autoplay progress, a pause button and paddles.
  - #how      four steps beside the setup screen; pinned on wide screens with motion
              (.is-pinned, set by landing-story.js), a plain list everywhere else.
  Bands: pains on the alt band, channels on white, how on the alt band (the control
  section after it is the dark one). Tokens come from landing.css; the few that are new
  here are section-local (--lp-st-*), with both dark-mode paths. End states are the
  plain rules; motion lives in prefers-reduced-motion: no-preference blocks.
*/

/* ------------------------------------------------------------------ local tokens */
.lp-chan,
.lp-how {
  --lp-st-win: #ffffff;
  --lp-st-glass: rgb(232 232 237 / 0.72);
  --lp-st-glass-solid: #e8e8ed;
  --lp-st-dot: rgb(0 0 0 / 0.42);
  --lp-st-dot-on: rgb(0 0 0 / 0.8);
  --lp-st-paddle: #e8e8ed;
  --lp-st-paddle-ink: rgb(0 0 0 / 0.56);
  --lp-st-night: #1d1d1f;
  --lp-st-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.28), 0 2px 8px rgb(0 0 0 / 0.04);
  /* small secondary text on the tinted panels inside the shots (AA on #e4f2ef, #e9e9eb) */
  --lp-st-sub: #5e5e63;
  /* the windows' chrome (title bar, folder rail), their fields and the quote rule */
  --lp-st-bar: #f7f7f9;
  --lp-st-field: #ebebef;
  --lp-st-quote: rgb(0 0 0 / 0.22);
  /* the reply draft and the bot's bubble, as the hero demo draws them (landing-demo.css) */
  --lp-st-draft: #f1f8f6;
  --lp-st-draft-edge: rgb(18 102 92 / 0.16);
  --lp-st-bot-edge: rgb(0 0 0 / 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-chan,
  :root:not([data-theme="light"]) .lp-how {
    --lp-st-win: #2c2c2e;
    --lp-st-glass: rgb(51 51 54 / 0.7);
    --lp-st-glass-solid: #333336;
    --lp-st-dot: rgb(255 255 255 / 0.42);
    --lp-st-dot-on: rgb(255 255 255 / 0.8);
    --lp-st-paddle: #333336;
    --lp-st-paddle-ink: rgb(255 255 255 / 0.8);
    --lp-st-night: #141416;
    --lp-st-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.05);
    --lp-st-sub: #a1a1a6;
    --lp-st-bar: #242426;
    --lp-st-field: #323234;
    --lp-st-quote: rgb(255 255 255 / 0.26);
    --lp-st-draft: #0f2a26;
    --lp-st-draft-edge: rgb(127 211 196 / 0.16);
    --lp-st-bot-edge: rgb(255 255 255 / 0.06);
  }
}
:root[data-theme="dark"] .lp-chan,
:root[data-theme="dark"] .lp-how {
  --lp-st-win: #2c2c2e;
  --lp-st-glass: rgb(51 51 54 / 0.7);
  --lp-st-glass-solid: #333336;
  --lp-st-dot: rgb(255 255 255 / 0.42);
  --lp-st-dot-on: rgb(255 255 255 / 0.8);
  --lp-st-paddle: #333336;
  --lp-st-paddle-ink: rgb(255 255 255 / 0.8);
  --lp-st-night: #141416;
  --lp-st-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.05);
  --lp-st-sub: #a1a1a6;
  --lp-st-bar: #242426;
  --lp-st-field: #323234;
  --lp-st-quote: rgb(255 255 255 / 0.26);
  --lp-st-draft: #0f2a26;
  --lp-st-draft-edge: rgb(127 211 196 / 0.16);
  --lp-st-bot-edge: rgb(255 255 255 / 0.06);
}

/* ================================================================== #pains */
/* the heading is sr-only: the manifesto opens on its first line */
.lp-pains-list {
  display: grid;
  gap: clamp(20px, 12px + 1.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-pains-line {
  max-width: 18em;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
}
/* the answer at headline size: the bot's face beside the first sentence (the one it
   says), the second sentence under both. Sized in em, so the face keeps to the line's
   height at every width; flat (no lift), so it never reads as a chat launcher. */
.lp-pains-turn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.24em;
  margin-block-start: clamp(72px, 40px + 6vw, 144px);
  color: var(--text);
  font-family: var(--font-display);
  /* each sentence on its own line, whole, down to 360px wide (the vw cap) */
  font-size: min(var(--lp-fs-h2), 8.6vw);
  font-weight: 600;
  line-height: 1.07;
}
.lp-pains-face { grid-row: 1; grid-column: 1; width: 0.9em; height: 0.9em; }
.lp-pains-turn-lead { grid-row: 1; grid-column: 2; }
.lp-pains-turn-rest { grid-row: 2; grid-column: 1 / -1; color: var(--accent-ink); }
/* one sentence per line, never broken (not even at the hyphen of the name) */
.lp-pains-turn-lead, .lp-pains-turn-rest { display: block; white-space: nowrap; }

/* read as you scroll: each line is grey until it reaches the middle of the screen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-pains-line {
      animation: lp-pains-ink linear both;
      animation-timeline: view();
      animation-range: cover 26% cover 46%;
    }
    /* the timeline is the reveal here: no fade-up on top of it */
    html.js .lp-pains-line.lp-rv:not(.is-in) { opacity: 1; translate: none; }
  }
}
@keyframes lp-pains-ink {
  from { color: var(--text-3); }
  to { color: var(--text); }
}

/* ================================================================== #channels */
.lp-gal {
  --gal-w: min(87.5vw, 860px);
  /* at least 612px: on tablets the call's control row ends above the card's edge */
  --gal-h: clamp(612px, 440px + 16vw, 680px);
  --gal-gutter: max(6.25%, (100% - 1260px) / 2);
  position: relative;
}
.lp-gal-track {
  display: flex;
  gap: var(--lp-gap);
  padding-inline: var(--gal-gutter);
  padding-block: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gal-gutter);
  scrollbar-width: none;
}
.lp-gal-track::-webkit-scrollbar { display: none; }
.lp-gal-track:focus-visible { box-shadow: none; outline: none; }
.lp-gal-track:focus-visible .lp-gal-card { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.lp-gal-item {
  flex: none;
  width: var(--gal-w);
  scroll-snap-align: start;
}

/* a card: the caption with its bold lead-in, then the shot, cut by the card's edge */
.lp-gal-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: var(--gal-h);
  overflow: clip;
  border-radius: var(--lp-r-tile);
  background: var(--lp-tile);
  color: var(--text);
}
.lp-gal-cap {
  max-width: 31rem;
  padding: var(--lp-tile-pad) var(--lp-tile-pad) 0;
  color: var(--text-2);
  font-size: var(--lp-fs-tile);
  font-weight: 600;
  line-height: 1.38;
  text-wrap: balance;
}
.lp-gal-cap strong { color: var(--text); font-weight: 600; }
.lp-gal-shot {
  position: relative;
  display: grid;
  flex: 1;
  justify-items: center;
  align-items: start;
  min-height: 0;
  padding-block-start: clamp(24px, 12px + 1.8vw, 40px);
}
.lp-gal-shot::before {
  content: "";
  position: absolute;
  inset: 8% 10% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--lp-glow), transparent);
  pointer-events: none;
}
/* the windows (email, site) sit whole inside the card; the phones run off its edge */
.lp-gal-card-email .lp-gal-shot,
.lp-gal-card-site .lp-gal-shot {
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  padding-block: clamp(18px, 8px + 1.4vw, 28px) var(--lp-tile-pad);
}
.lp-gal-phone { --pw: 316px; }
.lp-gal-phone .lp-phone-screen { display: flex; flex-direction: column; text-align: start; }

/* the phone card is the gallery's one dark card (the call screen is dark) */
.lp-gal-card-phone {
  color-scheme: dark;
  background: var(--lp-st-night);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #86868b;
  --accent-ink: #7fd3c4;
  --line: #424245;
}
.lp-gal-card-phone .lp-gal-shot::before {
  inset: 0 6% -30%;
  background: radial-gradient(closest-side, rgb(23 120 107 / 0.42), transparent);
}

/* ---- the phones' status bar (the gallery's own, so the hero's rules never reach it) */
.lp-gal-sbar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 8px 28px 0;
  font-size: 13px;
  font-weight: 600;
}
.lp-gal-batt {
  position: relative;
  width: 23px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 3.5px;
  opacity: 0.45;
}
.lp-gal-batt::after {
  content: "";
  position: absolute;
  inset: 1.5px 7px 1.5px 1.5px;
  border-radius: 1.5px;
  background: currentColor;
}

/* ---- phone: a forwarded call the bot is answering */
.lp-gcall .lp-phone-screen {
  container-type: inline-size;
  background: radial-gradient(130% 70% at 50% 0%, #1e6c61 0%, #103f39 46%, #071b19 100%);
  color: #ffffff;
}
.lp-gcall-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 4px;
  padding: 18px 14px 0;
  text-align: center;
}
.lp-gcall-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(255 255 255 / 0.72);
  font-size: 12px;
  font-weight: 500;
}
.lp-gcall-label .icon { width: 14px; height: 14px; }
.lp-gcall-num {
  justify-self: center;
  max-width: 100%;
  margin-block-start: 6px;
  font-family: var(--font-display);
  /* the screen's width decides: the number stays whole and centred on a 360px phone */
  font-size: min(27px, 11cqi);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.lp-gcall-for {
  padding-inline: 4px;
  color: rgb(255 255 255 / 0.76);
  font-size: 13px;
  line-height: 1.4;
  text-wrap: balance;
}
.lp-gcall-live {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-block: 18px 14px;
  color: rgb(255 255 255 / 0.72);
  font-size: 13px;
}
.lp-gcall .wave { background: rgb(255 255 255 / 0.14); }
.lp-gcall .wave i { background: #ffffff; }
.lp-gcall-said {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: var(--lp-r-panel);
  background: rgb(255 255 255 / 0.12);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.45;
  text-wrap: balance;
}
.lp-gcall-result { margin-block-start: 14px; }
.lp-gcall-result .lp-chip { background: #ffffff; color: #0e5a51; }
/* sized by the screen (cqi), so the row fits inside it on a 360px phone */
.lp-gcall-ctrl { display: flex; gap: min(26px, 7cqi); margin-block-start: 30px; }
.lp-gcall-ctrl span {
  display: grid;
  place-items: center;
  width: min(52px, 20cqi);
  height: min(52px, 20cqi);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
}
.lp-gcall-ctrl .icon { width: 22px; height: 22px; }
.lp-gcall-ctrl .lp-gcall-end { background: #48484a; }
.lp-gcall-end .icon { rotate: 135deg; }

/* ---- WhatsApp: the customer's own phone. WhatsApp's colours (--lp-wa-*, landing.css):
   the wallpaper, white for the business, green for the customer, day chips, ticks */
.lp-gwa .lp-phone-screen { background: var(--lp-wa-bg); }
.lp-gwa .lp-gal-sbar { background: var(--lp-screen); }
.lp-gwa-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 10px 16px;
  border-block-end: 1px solid var(--line);
  background: var(--lp-screen);
}
.lp-gwa-back { display: grid; color: var(--accent-ink); }
.lp-gwa-back .icon { width: 20px; height: 20px; scale: -1 1; }
.lp-gwa-bar .face { width: 34px; height: 34px; }
.lp-gwa-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.lp-gwa-who b { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lp-gwa-who span { color: var(--text-2); font-size: 12px; }
.lp-gwa-call { display: grid; color: var(--accent-ink); }
.lp-gwa-call .icon { width: 20px; height: 20px; }
.lp-gwa-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 6px 10px 8px;
  overflow: hidden;
}
.lp-gwa-day {
  align-self: center;
  margin-block: 6px 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--lp-wa-day);
  color: var(--lp-wa-meta);
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
}
/* a message: the time sits in the last line's end corner (the spacer keeps text off it) */
.lp-gwa-msg {
  --meta-w: 40px;
  position: relative;
  max-width: 88%;
  padding: 6px 9px 7px;
  border-radius: 10px;
  background: var(--lp-wa-in);
  color: var(--lp-wa-ink);
  font-size: 14px;
  line-height: 1.38;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
}
.lp-gwa-business { align-self: flex-start; border-start-start-radius: 3px; }
.lp-gwa-customer {
  --meta-w: 58px;
  align-self: flex-end;
  border-start-end-radius: 3px;
  background: var(--lp-wa-out);
}
.lp-gwa-business + .lp-gwa-customer,
.lp-gwa-customer + .lp-gwa-business { margin-block-start: 4px; }
.lp-gwa-text::after { content: ""; display: inline-block; width: var(--meta-w); }
.lp-gwa-meta {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--lp-wa-meta);
  font-size: 11px;
  line-height: 1;
}
.lp-gwa-customer .lp-gwa-meta { color: var(--lp-wa-meta-out); }
.lp-gwa-ticks { display: inline-flex; }
.lp-gwa-ticks .icon { width: 13px; height: 13px; }
.lp-gwa-ticks .icon + .icon { margin-inline-start: -9px; }
/* the voice note: play, the wave, its length under it and the time at the end */
.lp-gwa-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 74%;
  padding: 8px 10px 20px;
}
.lp-gwa-play { display: grid; flex: none; color: var(--lp-wa-meta-out); }
.lp-gwa-play .icon { width: 22px; height: 22px; }
.lp-gwa-wave { display: flex; flex: 1; align-items: center; gap: 2px; height: 26px; color: var(--lp-wa-meta-out); }
.lp-gwa-wave i {
  flex: 1;
  max-width: 3px;
  height: calc(var(--h) * 1.3px);
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}
.lp-gwa-voice .lp-gwa-meta { inset-inline-start: 40px; justify-content: space-between; }
.lp-gwa-stamp { display: inline-flex; align-items: center; gap: 3px; }
.lp-gwa-compose {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 22px;
}
.lp-gwa-compose span {
  flex: 1;
  padding: 9px 14px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-wa-in);
  color: var(--lp-wa-meta);
  font-size: 14px;
}
.lp-gwa-compose b {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
}
.lp-gwa-compose .icon { width: 18px; height: 18px; }

/* ---- the two windows (email, site): a light chrome bar over the content */
.lp-gmail,
.lp-gsite {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100% - 2 * var(--lp-tile-pad), 800px);
  overflow: hidden;
  border-radius: var(--lp-r-panel);
  background: var(--lp-st-win);
  box-shadow: var(--lp-st-shadow);
  color: var(--text);
  text-align: start;
  font-size: 14px;
  line-height: 1.45;
}

/* the windows size their insides by their own box (container queries below) */
.lp-gmail { container: lp-gmail / size; }
.lp-gsite { container: lp-gsite / size; }

/* ---- email: the owner's mail app. Folders, the inbox, the mail opened, the draft */
.lp-gmail-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding-inline: 16px;
  border-block-end: 1px solid var(--line);
  background: var(--lp-st-bar);
}
.lp-gmail-app { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.lp-gmail-app b { font-weight: 600; }
.lp-gmail-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.lp-gmail-icon .icon { width: 16px; height: 16px; }
.lp-gmail-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: min(44%, 280px);
  height: 32px;
  margin-inline-start: auto;
  padding-inline: 12px;
  border-radius: 10px;
  background: var(--lp-st-field);
  color: var(--lp-st-sub);
  font-size: 13px;
}
.lp-gmail-search .icon { width: 15px; height: 15px; }
.lp-gmail-body {
  display: grid;
  flex: 1;
  grid-template-columns: 54px minmax(0, 0.8fr) minmax(0, 1.25fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.lp-gmail-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block: 12px;
  border-inline-end: 1px solid var(--line);
  background: var(--lp-st-bar);
}
.lp-gmail-rail span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-2);
}
.lp-gmail-rail .is-on { background: var(--accent-soft); color: var(--accent-ink); }
.lp-gmail-rail .icon { width: 18px; height: 18px; }
.lp-gmail-rail span:last-child .icon { scale: -1 1; }
.lp-gmail-list { border-inline-end: 1px solid var(--line); }
.lp-gmail-row {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-block-end: 1px solid var(--line);
}
.lp-gmail-row.is-on { background: var(--accent-soft); box-shadow: inset -3px 0 0 var(--accent); }
.lp-gmail-row.is-on:dir(ltr) { box-shadow: inset 3px 0 0 var(--accent); }
.lp-gmail-who { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lp-gmail-who b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lp-gmail-who span { flex: none; color: var(--lp-st-sub); font-size: 12px; }
.lp-gmail-subj { overflow: hidden; color: var(--lp-st-sub); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lp-gmail-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-block-start: 2px;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
}
.lp-gmail-tag .icon { width: 13px; height: 13px; }
.lp-gmail-read {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px 22px;
  overflow: hidden;
}
.lp-gmail-subject { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.25; }
.lp-gmail-from {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px 6px;
  border-block-end: 1px solid var(--line);
}
.lp-gmail-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.lp-gmail-from p { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.lp-gmail-from b { font-size: 14px; font-weight: 600; }
.lp-gmail-from p span, .lp-gmail-time { color: var(--lp-st-sub); font-size: 12px; }
.lp-gmail-time { align-self: flex-start; padding-block-start: 2px; }
.lp-gmail-text { font-size: 14.5px; line-height: 1.5; }
.lp-gmail-ask-sign { margin-block-start: -4px; }
/* the reply draft, drawn as the hero demo draws it: a teal tint, its filled "waiting for
   you" badge, the quote, the actions */
.lp-gmail-draft {
  display: grid;
  gap: 6px;
  margin-block-start: 4px;
  padding: 12px 16px 14px;
  border-radius: 14px;
  background: var(--lp-st-draft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--lp-st-draft-edge);
}
.lp-gmail-draft-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.lp-gmail-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--lp-r-pill);
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
.lp-gmail-badge .icon { width: 13px; height: 13px; }
.lp-gmail-to { color: var(--lp-st-sub); font-size: 12px; }
.lp-gmail-sign { font-size: 13.5px; font-weight: 600; }
.lp-gmail-quote {
  display: -webkit-box;
  overflow: hidden;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--lp-st-quote);
  color: var(--lp-st-sub);
  font-size: 12.5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.lp-gmail-quote span { font-weight: 600; }
.lp-gmail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-block-start: 4px; }
.lp-gmail-edit,
.lp-gmail-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--lp-r-pill);
  font-size: 13px;
  font-weight: 500;
}
.lp-gmail-edit { background: var(--lp-st-win); box-shadow: inset 0 0 0 1px var(--lp-st-draft-edge); color: var(--accent-ink); }
.lp-gmail-send { background: var(--accent); color: #ffffff; }
.lp-gmail-edit .icon, .lp-gmail-send .icon { width: 14px; height: 14px; }
.lp-gmail-send .icon { scale: -1 1; }

/* a short mail window (tablets, small phones) drops the extras before the actions */
@container lp-gmail (max-height: 440px) {
  .lp-gmail .lp-gmail-ask-sign { display: none; }
  .lp-gmail .lp-gmail-quote { -webkit-line-clamp: 1; line-clamp: 1; }
}
@container lp-gmail (max-height: 410px) {
  .lp-gmail .lp-gmail-quote { display: none; }
  .lp-gmail .lp-gmail-read { gap: 6px; padding-block: 12px; }
  .lp-gmail .lp-gmail-from p span { display: none; }
}

/* ---- site chat: the business's own site in a browser; the chat open in its corner */
.lp-gsite-chrome {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--line);
  background: var(--lp-st-bar);
  color: var(--text-3);
}
.lp-gsite-nav { display: flex; gap: 12px; }
.lp-gsite-chrome .icon { width: 16px; height: 16px; }
.lp-gsite-url {
  display: inline-flex;
  flex: 0 1 52%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  margin-inline: auto;
  border-radius: var(--lp-r-pill);
  background: var(--lp-st-field);
  color: var(--lp-st-sub);
  font-size: 13px;
}
.lp-gsite-url .icon { width: 12px; height: 12px; }
.lp-gsite-reload { display: grid; }
/* the page: its header across, the hero at the start and the chat docked at the end */
.lp-gsite-page {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.lp-gsite-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 24px;
  border-block-end: 1px solid var(--line);
}
.lp-gsite-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lp-gsite-brand b { font-weight: 600; }
/* the business's own mark: ink, not BaliBot's teal (the widget is the teal part) */
.lp-gsite-logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--text);
  color: var(--lp-st-win);
}
.lp-gsite-logo .icon { width: 16px; height: 16px; }
.lp-gsite-links { display: flex; gap: 18px; color: var(--text-2); font-size: 13px; }
.lp-gsite-menu { display: none; }
.lp-gsite-callbtn {
  display: none;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 5px 14px;
  border-radius: var(--lp-r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  font-weight: 500;
}
.lp-gsite-callbtn .icon { width: 14px; height: 14px; }
.lp-gsite-hero {
  display: grid;
  grid-row: 2;
  grid-column: 1;
  justify-items: start;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 30px 24px;
}
.lp-gsite-h {
  max-width: 11em;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
}
.lp-gsite-p { max-width: 22em; color: var(--text-2); font-size: 15px; }
.lp-gsite-cta {
  margin-block-start: 6px;
  padding: 9px 20px;
  border-radius: var(--lp-r-pill);
  background: var(--text);
  color: var(--lp-st-win);
  font-size: 14px;
  font-weight: 500;
}
.lp-gsite-info {
  display: grid;
  gap: 6px;
  margin-block-start: 18px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px;
}
.lp-gsite-info p { display: flex; align-items: center; gap: 6px; }
.lp-gsite-info .icon { flex: none; width: 15px; height: 15px; color: var(--text-3); }
.lp-gsite-dock {
  display: flex;
  grid-row: -2;
  grid-column: -2;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 0;
  padding: 12px 20px 14px;
}
/* a short window keeps the newest messages: the thread gives up its top first */
.lp-gsite-widget {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  width: 304px;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--lp-r-panel);
  background: var(--surface);
  box-shadow: 0 24px 48px -18px rgb(0 0 0 / 0.38), 0 0 0 1px var(--lp-hair);
}
.lp-gsite-whead {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #12665c;
  color: #ffffff;
}
.lp-gsite-whead p { display: grid; flex: 1; line-height: 1.25; }
.lp-gsite-whead b { font-size: 14px; font-weight: 600; }
.lp-gsite-whead span { color: rgb(255 255 255 / 0.8); font-size: 12px; }
.lp-gsite-whead .face { width: 32px; height: 32px; }
.lp-gsite-x .icon { width: 16px; height: 16px; opacity: 0.8; }
.lp-gsite-thread {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 8px;
  background: var(--lp-screen-2);
  /* what scrolled up fades under the header instead of being cut */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px);
  mask-image: linear-gradient(to bottom, transparent, #000 14px);
}
.lp-gsite-thread .lp-bubble { max-width: 90%; padding: 7px 12px; font-size: 13.5px; }
/* the same widget as the hero demo's: the customer in teal, the bot on white */
.lp-gsite-thread .lp-bubble-customer { background: var(--accent); color: #ffffff; }
.lp-gsite-thread .lp-bubble-bot {
  background: var(--lp-st-win);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--lp-st-bot-edge);
}
.lp-gsite-result { display: flex; justify-content: center; margin-block-start: 2px; }
.lp-gsite-compose {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 8px;
  border-block-start: 1px solid var(--line);
}
.lp-gsite-compose span {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--lp-r-pill);
  color: var(--text-2);
  font-size: 13px;
}
.lp-gsite-compose b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
}
.lp-gsite-compose .icon { width: 14px; height: 14px; scale: -1 1; }
/* the widget's own button under it (open: shows the close mark) */
.lp-gsite-launcher {
  display: grid;
  flex: none;
  align-self: flex-end;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #12665c;
  color: #ffffff;
  box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.45);
}
.lp-gsite-launcher .icon { width: 18px; height: 18px; }
/* a narrower window (tablets): a smaller headline, no info rows */
@container lp-gsite (max-width: 680px) {
  .lp-gsite .lp-gsite-hero { padding: 24px 20px; }
  .lp-gsite .lp-gsite-h { font-size: 24px; }
  .lp-gsite .lp-gsite-info { display: none; }
}
/* a short phone-sized window: a smaller headline keeps the chat whole */
@container lp-gsite (max-width: 520px) {
  .lp-gsite .lp-gsite-hero { padding: 18px 14px; }
  .lp-gsite .lp-gsite-h { font-size: 22px; }
}
@container lp-gsite (max-width: 520px) and (max-height: 470px) {
  .lp-gsite .lp-gsite-p { display: none; }
}
@container lp-gsite (max-width: 520px) and (max-height: 400px) {
  .lp-gsite .lp-gsite-hero { padding: 12px 14px 4px; }
  .lp-gsite .lp-gsite-h { font-size: 19px; }
}

/* ---- the controls: a frosted dot pill (the current dot fills with the time left), the
   pause button beside it, and the paddles at the end edge */
.lp-gal-ui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: var(--lp-w-wide);
  margin: clamp(22px, 14px + 1.2vw, 34px) auto 0;
}
.lp-gal-center { display: flex; grid-column: 2; align-items: center; gap: 12px; }
.lp-gal-dots {
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: 16px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-st-glass);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
/* each dot's target is 24px wide (28px on touch screens) around the 8px pill */
.lp-gal-dot {
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--lp-r-pill);
  background: transparent;
  cursor: pointer;
}
.lp-gal-pill {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--lp-r-pill);
  background: var(--lp-st-dot);
  transition: width 0.4s var(--lp-ease-io), background-color 0.1s linear;
}
.lp-gal-dot:hover .lp-gal-pill { background: var(--lp-st-dot-on); }
.lp-gal-dot[aria-current="true"] .lp-gal-pill { width: 48px; background: var(--lp-st-dot-on); }
/* the progress: the current pill is grey and fills (start to end: right to left) */
.lp-gal-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lp-st-dot-on);
  transform: scaleX(0);
  transform-origin: right;
}
.lp-gal-fill:dir(ltr) { transform-origin: left; }
.lp-gal.is-playing .lp-gal-dot[aria-current="true"] .lp-gal-pill { background: var(--lp-st-dot); }
.lp-gal-play,
.lp-gal-paddle {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.1s linear, opacity 0.1s linear;
}
.lp-gal-play {
  width: 56px;
  height: 56px;
  background: var(--lp-st-glass);
  color: var(--text);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.lp-gal-play .icon { width: 20px; height: 20px; }
.lp-gal-play .lp-i-play, .lp-gal-play[aria-pressed="true"] .lp-i-pause { display: none; }
.lp-gal-play[aria-pressed="true"] .lp-i-play { display: block; }
.lp-gal-paddles { display: flex; grid-column: 3; justify-self: end; gap: 10px; }
.lp-gal-paddle {
  width: 40px;
  height: 40px;
  background: var(--lp-st-paddle);
  color: var(--lp-st-paddle-ink);
}
.lp-gal-paddle .icon { width: 18px; height: 18px; }
.lp-gal-prev .icon { scale: -1 1; }
/* aria-disabled, not disabled: a paddle that holds the focus keeps it at either end.
   Faded by its colours, not by opacity, so its focus ring stays at full strength. */
.lp-gal-paddle[aria-disabled="true"] {
  background: color-mix(in srgb, var(--lp-st-paddle) 36%, transparent);
  color: color-mix(in srgb, var(--lp-st-paddle-ink) 36%, transparent);
  cursor: default;
}
@media (pointer: coarse) {
  .lp-gal-dot { padding: 0 10px; }
  .lp-gal-paddle { width: 44px; height: 44px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-gal-dots, .lp-gal-play { background: var(--lp-st-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .lp-gal-dots, .lp-gal-play { background: var(--lp-st-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 734px) {
  .lp-gal {
    --gal-w: 84vw;
    /* tall enough for a whole mail draft and a few WhatsApp messages on a 360px phone */
    --gal-h: clamp(600px, 158vw, 660px);
  }
  /* the end padding lets the last card reach the same snap edge as the others */
  .lp-gal-track { padding-inline-end: calc(100% - var(--gal-gutter) - var(--gal-w)); }
  .lp-gal-phone { --pw: min(256px, 66vw); }
  .lp-gal-cap { font-size: 17px; }
  .lp-gal-paddles { display: none; }
  .lp-gal-dots { height: 48px; padding-inline: 12px; }
  .lp-gal-play { width: 48px; height: 48px; }
  /* email: the opened mail only, as the mail app shows it on a phone */
  .lp-gmail-bar { height: 46px; padding-inline: 12px; }
  .lp-gmail-search { display: none; }
  .lp-gmail-body { grid-template-columns: minmax(0, 1fr); }
  .lp-gmail-rail, .lp-gmail-list, .lp-gmail-to { display: none; }
  .lp-gmail-read { gap: 7px; padding: 14px; }
  .lp-gmail-subject { font-size: 17px; }
  .lp-gmail-text { font-size: 14px; }
  .lp-gmail-draft { padding: 12px; }
  .lp-gmail-quote { -webkit-line-clamp: 1; line-clamp: 1; }
  /* site: the browser on a phone, the chat over the page */
  .lp-gsite-chrome { height: 42px; padding-inline: 10px; }
  .lp-gsite-nav, .lp-gsite-reload, .lp-gsite-links, .lp-gsite-callbtn, .lp-gsite-launcher, .lp-gsite-info { display: none; }
  .lp-gsite-url { flex: 1; }
  .lp-gsite-head { justify-content: space-between; padding: 10px 14px; }
  .lp-gsite-menu { display: grid; color: var(--text-2); }
  .lp-gsite-menu .icon { width: 20px; height: 20px; }
  .lp-gsite-p { font-size: 14px; }
  .lp-gsite-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .lp-gsite-dock { padding: 0 10px 10px; }
  .lp-gsite-widget { width: 100%; }
  /* the page keeps its headline and line; the chat takes the rest */
  .lp-gsite-cta, .lp-gsite-hello { display: none; }
  /* WhatsApp's bar on a narrow phone: the business's name stays whole */
  .lp-gwa-bar { gap: 6px; padding-inline: 10px 12px; }
  .lp-gwa-bar .face { width: 30px; height: 30px; }
  .lp-gwa-who b { font-size: 14px; }
  .lp-gwa-msg { font-size: 13.5px; }
  /* the phone runs off the card here too: the card's edge cuts the thread, not the
     message bar (which would sit under the card's edge anyway) */
  .lp-gwa-compose { display: none; }
}

/* the wave moves only on the card in view, while the gallery is on screen */
@media (prefers-reduced-motion: no-preference) {
  .lp-gal.is-visible .lp-gal-item.is-current .lp-gal-wave i { animation-play-state: running; }
  /* longhands: a shorthand here would reset the paused state below */
  .lp-gal.is-playing .lp-gal-dot[aria-current="true"] .lp-gal-fill.is-running {
    animation-name: lp-gal-fill;
    animation-duration: var(--lp-gal-step, 6000ms);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  .lp-gal.is-held .lp-gal-fill.is-running { animation-play-state: paused; }
}
@keyframes lp-gal-fill {
  to { transform: scaleX(1); }
}

/* ================================================================== #how */
.lp-how-grid {
  --how-h: min(560px, 100vh - var(--lp-nav-h) - 96px);
  --how-h: min(560px, 100svh - var(--lp-nav-h) - 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.lp-how-step { display: grid; gap: 10px; align-content: center; }
.lp-how-h {
  color: var(--text);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  transition: color 0.4s var(--lp-ease-io);
}
.lp-how-p {
  max-width: 27rem;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
}
.lp-how-scene { margin-block-end: 44px; }
.lp-how-scene:last-child { margin-block-end: 0; }

/* the setup screen: the app's bar, then the scene filling the rest */
.lp-how-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: clip;
  border-radius: var(--lp-r-tile);
  background: var(--lp-tile);
  color: var(--text);
  box-shadow: var(--lp-st-shadow);
  text-align: start;
}
.lp-how-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding-inline: clamp(18px, 12px + 1vw, 28px);
  border-block-end: 1px solid var(--line);
}
.lp-how-app { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.lp-how-app .brand-mark { width: 26px; height: 26px; border-radius: 8px; }
.lp-how-prog { display: flex; gap: 6px; }
.lp-how-prog i { width: 26px; height: 4px; border-radius: 4px; background: var(--surface-3); }
.lp-how-prog i.is-done { background: var(--accent); }
.lp-how-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(18px, 8px + 2vw, 36px);
}
.lp-how .lp-bubble-customer { background: var(--surface-2); }

/* ---- connect: the sources, read one after another */
.lp-src-list { display: grid; gap: 10px; }
.lp-src {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--lp-r-panel);
  background: var(--surface-2);
}
.lp-src-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lp-tile);
  color: var(--text);
}
.lp-src-icon .icon { width: 21px; height: 21px; }
.lp-src-text { display: grid; min-width: 0; line-height: 1.3; }
.lp-src-text b { font-size: 16px; font-weight: 600; }
.lp-src-text span { overflow: hidden; color: var(--text-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lp-src-state { display: grid; justify-items: end; }
.lp-src-state > span {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-src-done { color: var(--accent-ink); }
.lp-src-done .icon { width: 16px; height: 16px; }
.lp-src-wait { color: var(--text-2); opacity: 0; }
.lp-spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface-3);
  border-block-start-color: var(--accent);
  border-radius: 50%;
}
.lp-src-found {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 8px;
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 500;
}
.lp-src-found .icon { width: 18px; height: 18px; }

/* ---- interview: one question, the answers picked as chips */
.lp-ask-done { display: grid; gap: 8px; padding-block-end: 14px; border-block-end: 1px solid var(--line); opacity: 0.72; }
.lp-ask-done .lp-bubble { font-size: 15px; }
.lp-ask-now { margin-block-start: 6px; }
.lp-ask-row { display: flex; align-items: flex-end; gap: 10px; }
.lp-ask-now .face { width: 40px; height: 40px; }
.lp-how .lp-ask-q { max-width: calc(100% - 50px); font-size: 17px; }
.lp-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 14px 6px; }
.lp-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--lp-r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}
.lp-pick-chip .icon { width: 16px; height: 16px; }
.lp-pick-chip:not(.is-picked) .icon { display: none; }
.lp-pick-chip.is-picked {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.lp-ask-foot { display: flex; align-items: center; justify-content: space-between; margin-block-start: 10px; }
.lp-ask-skip { color: var(--text-2); font-size: 15px; }
.lp-ask-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--lp-r-pill);
  background: var(--accent);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}
.lp-ask-next .icon { width: 16px; height: 16px; }

/* ---- approve: simple facts came in by themselves; the price waits for a press */
.lp-apv-head { color: var(--text-2); font-size: 14px; font-weight: 600; }
.lp-apv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: var(--lp-r-panel);
  background: var(--surface-2);
}
.lp-apv-text { display: grid; min-width: 0; line-height: 1.35; }
.lp-apv-text span { color: var(--text-2); font-size: 13px; }
.lp-apv-text b { font-size: 16px; font-weight: 600; }
.lp-apv-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-tile);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-apv-tag .icon { width: 14px; height: 14px; }
.lp-apv-undo { color: var(--text-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.lp-apv-card {
  display: grid;
  gap: 8px;
  margin-block-start: 4px;
  padding: 18px 20px;
  border-radius: var(--lp-r-panel);
  background: var(--lp-tile);
  box-shadow: inset 0 0 0 1.5px var(--accent), var(--lp-st-shadow);
}
.lp-apv-card .lp-apv-text b { font-size: 18px; }
.lp-apv-wait,
.lp-apv-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
}
.lp-apv-wait { width: fit-content; padding: 4px 10px; border-radius: var(--lp-r-pill); background: var(--surface-2); color: var(--text); font-weight: 500; }
.lp-apv-wait .icon, .lp-apv-src .icon { width: 14px; height: 14px; }
.lp-apv-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; margin-block-start: 6px; }
.lp-apv-btn,
.lp-apv-ok {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--lp-r-pill);
  font-size: 15px;
  font-weight: 500;
}
.lp-apv-btn { background: var(--accent); color: #ffffff; }
.lp-apv-ok { background: var(--accent-soft); color: var(--accent-ink); opacity: 0; }
.lp-apv-ok .icon { width: 16px; height: 16px; }
.lp-apv-edit { grid-area: 1 / 2; color: var(--accent-ink); font-size: 15px; font-weight: 500; }

/* ---- live: every channel on, and the first answer goes out */
.lp-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 14px;
  border-radius: var(--lp-r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
}
/* the one status light: the bot is live */
.lp-live-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
.lp-live-chans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lp-live-chan {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 14px 6px 12px;
  border-radius: var(--lp-r-panel);
  background: var(--surface-2);
  text-align: center;
}
.lp-live-chan-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-block-end: 4px;
  border-radius: 50%;
  background: var(--lp-tile);
  color: var(--text);
}
.lp-live-chan-icon .icon { width: 19px; height: 19px; }
.lp-live-chan b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.lp-live-chan-on { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-ink); font-size: 12px; font-weight: 500; }
.lp-live-chan-on .icon { width: 12px; height: 12px; }
.lp-live-convo {
  display: grid;
  gap: 10px;
  margin-block-start: 6px;
  padding: 18px;
  border-radius: var(--lp-r-panel);
  background: var(--surface-2);
}
.lp-live-convo .lp-bubble-customer { background: var(--lp-tile); }
.lp-live-convo .lp-bubble { font-size: 16px; }
.lp-live-in { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.lp-live-in .icon { width: 15px; height: 15px; }
.lp-live-in .num { margin-inline-start: auto; }
/* the bot's answer beside its face, and the source chip under it (the scene's own rules) */
.lp-live-reply { display: flex; align-items: flex-end; gap: 6px; }
.lp-live-reply .lp-bubble { max-width: calc(100% - 40px); }
.lp-live-src { display: flex; justify-content: center; margin-block-start: 4px; }

/* ---- tablets: one centred column, so the scenes keep a phone-like measure */
@media (min-width: 600px) and (max-width: 899px) {
  .lp-how-step,
  .lp-how-scene {
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
  }
  .lp-how-scene { margin-block-end: 64px; }
  .lp-how-step:not(:first-child) { margin-block-start: 8px; }
}

/* ---- wide screens: the step beside its scene */
@media (min-width: 900px) {
  .lp-how-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: clamp(56px, 6vw, 96px);
    align-items: center;
  }
  .lp-how-step { grid-row: var(--row); grid-column: 1; }
  .lp-how-scene { grid-row: var(--row); grid-column: 2; margin: 0; }
  .lp-how-frame { min-height: 480px; }
}

/* ---- pinned (landing-story.js sets it on wide, tall screens when motion is allowed):
   one sticky place for the scenes, the step crossing the middle of the screen picks it */
.lp-how-grid.is-pinned {
  grid-template-rows: repeat(4, minmax(62vh, auto));
  row-gap: 0;
  align-items: stretch;
}
.lp-how-grid.is-pinned .lp-how-step { align-content: center; padding-block: 24px; }
.lp-how-grid.is-pinned .lp-how-step:not(.is-on) .lp-how-h { color: var(--text-3); }
.lp-how-grid.is-pinned .lp-how-scene {
  position: sticky;
  top: calc(var(--lp-nav-h) + (100vh - var(--lp-nav-h) - var(--how-h)) / 2);
  top: calc(var(--lp-nav-h) + (100svh - var(--lp-nav-h) - var(--how-h)) / 2);
  grid-row: 1 / -1;
  align-self: start;
  height: var(--how-h);
  transition:
    opacity 0.5s var(--lp-ease-io),
    visibility 0s linear;
}
.lp-how-grid.is-pinned .lp-how-scene:not(.is-on) {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.35s var(--lp-ease-io),
    visibility 0s linear 0.35s;
}
.lp-how-grid.is-pinned .lp-how-frame { min-height: 0; }

/* ---- the scenes play (landing-story.js sets .is-play: the pinned scene shown, or a
   scene in the list once it is in view). Without it the end state shows. */
@media (prefers-reduced-motion: no-preference) {
  html.js .lp-how-scene.is-play .lp-src { animation: lp-how-in 0.5s calc(0.1s + var(--i) * 0.12s) var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-src-wait { animation: lp-how-out 0.25s calc(0.8s + var(--i) * 0.5s) linear both; }
  html.js .lp-how-scene.is-play .lp-src-done { animation: lp-how-pop 0.4s calc(0.8s + var(--i) * 0.5s) var(--lp-spring) both; }
  html.js .lp-how-scene.is-play .lp-spin { animation: lp-how-spin 0.7s linear calc(2 + var(--i)); }
  html.js .lp-how-scene.is-play .lp-src-found { animation: lp-how-in 0.5s 2.9s var(--lp-ease) both; }

  html.js .lp-how-scene.is-play .lp-ask-done { animation: lp-how-in 0.45s 0.05s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-ask-now { animation: lp-how-in 0.5s 0.25s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-pick { animation: lp-how-in 0.5s 0.45s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-pick-chip.is-picked { animation: lp-how-pick 0.3s calc(1s + var(--i) * 0.45s) linear both; }
  html.js .lp-how-scene.is-play .lp-pick-chip.is-picked .icon { animation: lp-how-pop 0.35s calc(1s + var(--i) * 0.45s) var(--lp-spring) both; }
  html.js .lp-how-scene.is-play .lp-ask-next { animation: lp-how-press 0.36s 3s var(--lp-ease-io) both; }

  html.js .lp-how-scene.is-play .lp-apv-row { animation: lp-how-in 0.5s calc(0.15s + var(--i) * 0.15s) var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-apv-card { animation: lp-how-in 0.5s 0.5s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-apv-btn { animation: lp-how-press-out 0.5s 1.9s var(--lp-ease-io) both; }
  html.js .lp-how-scene.is-play .lp-apv-edit,
  html.js .lp-how-scene.is-play .lp-apv-wait { animation: lp-how-out 0.25s 2.2s linear both; }
  html.js .lp-how-scene.is-play .lp-apv-ok { animation: lp-how-ok 0.45s 2.25s var(--lp-spring) both; }

  /* the answer goes out right away: the payoff panel is never half empty */
  html.js .lp-how-scene.is-play .lp-live-status i { animation: lp-how-live 1.4s 0.2s ease-out 3; }
  html.js .lp-how-scene.is-play .lp-live-chan { animation: lp-how-in 0.4s calc(0.05s + var(--i) * 0.06s) var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-live-chan-on { animation: lp-how-pop 0.4s calc(0.3s + var(--i) * 0.08s) var(--lp-spring) both; }
  html.js .lp-how-scene.is-play .lp-live-in { animation: lp-how-in 0.4s 0.05s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-live-ask { animation: lp-how-in 0.4s 0.1s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-live-reply { animation: lp-how-in 0.45s 0.3s var(--lp-ease) both; }
  html.js .lp-how-scene.is-play .lp-live-src { animation: lp-how-pop 0.45s 0.6s var(--lp-spring) both; }
}
@keyframes lp-how-in {
  from { opacity: 0; translate: 0 12px; }
}
@keyframes lp-how-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes lp-how-pop {
  from { opacity: 0; scale: 0.6; }
}
@keyframes lp-how-spin {
  to { rotate: 1turn; }
}
@keyframes lp-how-pick {
  from {
    background-color: var(--surface-2);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--line);
  }
}
@keyframes lp-how-press {
  50% { scale: 0.94; filter: brightness(1.15); }
}
@keyframes lp-how-press-out {
  40% { opacity: 1; scale: 0.94; }
  100% { opacity: 0; scale: 0.94; visibility: hidden; }
}
@keyframes lp-how-ok {
  from { opacity: 0; scale: 0.7; }
  to { opacity: 1; scale: 1; }
}
@keyframes lp-how-live {
  from { box-shadow: 0 0 0 0 rgb(23 120 107 / 0.45); }
  to { box-shadow: 0 0 0 9px rgb(23 120 107 / 0); }
}

@media (max-width: 599px) {
  .lp-live-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-live-chan { grid-template-columns: auto minmax(0, 1fr); justify-items: start; column-gap: 10px; padding: 10px 12px; text-align: start; }
  .lp-live-chan-icon { grid-row: span 2; margin: 0; }
  /* a channel's name stays on one line ("צ׳אט באתר" too) */
  .lp-live-chan b { white-space: nowrap; }
}
/* small phones: each found fact gets the row's width; its tag and "undo" go under it */
@media (max-width: 400px) {
  .lp-apv-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .lp-apv-row .lp-apv-text { grid-column: 1 / -1; }
  .lp-apv-tag { justify-self: start; }
}