/*
  The landing page's own parts (/), after landing.css: the shared product-shot pieces the
  sections draw with (device frames, chat bubbles, chips: macros/landing.html), then the
  hero, the conversation pieces the hero demo and the channels gallery share, the closing
  waitlist band, the footnotes and the footer. The hero's live channel demo has its own
  sheet, landing-demo.css, linked right after this one.
  End states are the plain rules (reduced motion, no JS); motion lives in the
  prefers-reduced-motion: no-preference blocks behind html.js.
*/

/* ------------------------------------------------------------------ device frames */
.lp-phone {
  --pw: 300px;
  position: relative;
  width: var(--pw);
  aspect-ratio: 300 / 620;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.18);
  background: var(--lp-frame);
  box-shadow:
    inset 0 0 0 1.5px var(--lp-frame-edge),
    inset 0 0 0 5px var(--lp-frame),
    var(--lp-shadow);
}
.lp-phone-screen {
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.146);
  background: var(--lp-screen);
  color: var(--text);
}
.lp-phone-island {
  position: absolute;
  top: calc(var(--pw) * 0.034);
  left: 50%;
  z-index: 5;
  width: calc(var(--pw) * 0.3);
  height: calc(var(--pw) * 0.088);
  border-radius: 999px;
  background: #000000;
  transform: translateX(-50%);
}
.lp-laptop { width: 100%; }
.lp-laptop-lid {
  margin-inline: 7%;
  padding: 1.4% 1.4% 2%;
  border-radius: 20px 20px 6px 6px;
  background: var(--lp-frame);
  box-shadow: inset 0 0 0 1.5px var(--lp-frame-edge), var(--lp-shadow);
}
.lp-laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: var(--lp-screen);
}
.lp-laptop-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.lp-laptop-base {
  position: relative;
  height: clamp(10px, 1.4vw, 18px);
  border-radius: 2px 2px 18px 18px / 2px 2px 12px 12px;
  background: linear-gradient(180deg, #e6e6ea, #b9b9c0);
}
.lp-laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 40%;
  border-radius: 0 0 10px 10px;
  background: rgb(0 0 0 / 0.14);
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------ bubbles and chips */
.lp-bubble {
  width: fit-content;
  max-width: 84%;
  margin: 0;
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}
.lp-bubble-customer {
  margin-inline-start: auto;
  border-end-end-radius: 6px;
  background: var(--lp-bubble-me);
  color: var(--text);
}
.lp-bubble-bot {
  border-end-start-radius: 6px;
  background: var(--lp-bubble-bot);
  color: var(--lp-bot-ink);
  box-shadow: inset 0 0 0 1px var(--lp-bubble-bot-edge);
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--lp-r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.lp-chip .icon { width: 15px; height: 15px; }
.lp-chip-accent { background: var(--accent-soft); color: var(--accent-ink); }
.lp-chip-peach { background: var(--peach-soft); color: var(--text); }
.lp-chip-peach .icon { color: #c2562b; }

/* typing dots (the bot is writing) */
.lp-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--lp-bubble-bot);
}
.lp-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-bot-ink);
  opacity: 0.45;
}

/* ------------------------------------------------------------------ hero */
.lp-hero { padding-block: clamp(32px, 2vw + 4vh, 88px) clamp(72px, 40px + 6vw, 140px); text-align: center; }
.lp-hero-copy { display: grid; justify-items: center; }
.lp-hero-eyebrow {
  font-family: var(--font-display);
  font-size: var(--lp-fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.lp-display { margin-block-start: 10px; font-size: var(--lp-fs-hero); font-weight: 600; line-height: 1.04; }
.lp-line { display: block; }
/* the answer half of the slogan in the brand's teal: the page's one gradient line */
.lp-line-accent {
  width: fit-content;
  margin-inline: auto;
  padding-block-end: 0.06em;
  background: linear-gradient(270deg, var(--lp-hl-from), var(--lp-hl-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-hero-lead {
  max-width: 40rem;
  margin-block-start: clamp(16px, 12px + 0.8vw, 24px);
  color: var(--text-2);
  font-size: var(--lp-fs-intro);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}
.lp-hero-cta {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
  margin-block-start: clamp(24px, 16px + 1.4vw, 36px);
}
.lp-hero-cta .lp-more { font-size: 17px; }
.lp-hero-cta .wl { width: min(100%, 480px); }

/* ------------------------------------------------------------------ conversation pieces */
/* The hero demo's own rules live in landing-demo.css. These stay here: the channels
   gallery (partials/landing/channels.html) draws with the same class names, and the
   demo's screens use them too. */
.lp-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-sbar-batt {
  position: relative;
  width: 23px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 3.5px;
  opacity: 0.45;
}
.lp-sbar-batt::after {
  content: "";
  position: absolute;
  inset: 1.5px 7px 1.5px 1.5px;
  border-radius: 1.5px;
  background: currentColor;
}
.lp-appbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
  border-block-end: 1px solid var(--line);
}
.lp-appbar p { display: grid; line-height: 1.25; }
.lp-appbar b { font-size: 15px; font-weight: 600; }
.lp-appbar span { color: var(--text-2); font-size: 12px; }
.lp-appbar-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.lp-day {
  align-self: center;
  margin-block-end: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--lp-screen);
  color: var(--text-2);
  font-size: 12px;
}
.lp-reply { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.lp-reply .lp-bubble { max-width: calc(100% - 40px); }
.lp-result { display: flex; justify-content: center; margin-block-start: 4px; }
/* WhatsApp's wallpaper and day chips */
.lp-wa {
  gap: 5px;
  padding: 10px 12px 12px;
  background: var(--lp-wa-bg);
}
.lp-wa .lp-day {
  margin-block: 6px 3px;
  background: var(--lp-wa-day);
  color: var(--lp-wa-meta);
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
}
.lp-wa .lp-result { margin-block-start: 8px; }
.lp-site { flex: 1; min-height: 0; border-block-start: 1px solid var(--line); }
.lp-widget {
  position: absolute;
  inset: 214px 8px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: var(--lp-screen);
  box-shadow:
    0 18px 50px -12px rgb(0 0 0 / 0.38),
    0 0 0 1px var(--line);
}
.lp-widget-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent);
  color: #ffffff;
}
.lp-widget-head p { display: grid; flex: 1; line-height: 1.25; }
.lp-widget-head b { font-size: 15px; font-weight: 600; }
.lp-widget-head span { font-size: 12px; opacity: 0.9; }
.lp-widget-thread { gap: 8px; padding: 12px 12px 10px; background: var(--lp-screen); }

/* the keyframes the demo and the feature tiles (landing-features.css) both play */
@keyframes lp-msg {
  from { opacity: 0; translate: 0 10px; scale: 0.97; }
}
@keyframes lp-pop {
  from { opacity: 0; scale: 0.8; }
}
@keyframes lp-dot {
  0%, 60%, 100% { translate: 0 0; }
  30% { translate: 0 -3px; }
}

/* ------------------------------------------------------------------ the waitlist band */
.lp-final-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  overflow: hidden;
  padding: clamp(28px, 4vw + 8px, 72px);
  border-radius: var(--lp-r-tile);
  background: var(--glow-bg);
  color: #ffffff;
}
.lp-final-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 80% at 85% 115%, rgb(46 160 142 / 0.7), rgb(30 130 116 / 0.25) 45%, transparent 75%),
    radial-gradient(55% 60% at 10% -10%, rgb(255 248 238 / 0.14), transparent 70%);
}
.lp-final-copy { display: grid; justify-items: start; gap: 18px; container-type: inline-size; }
.lp-final-face { width: 72px; height: 72px; }
/* two beats, one line each: "שהלקוחות יקבלו תשובה," / "גם כשאתם באמצע עבודה." The size
   follows the column (each beat is about 11em wide), up to 56px; a very narrow column
   wraps inside a beat instead of overflowing */
.lp-final-title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  font-size: clamp(1.75rem, 8.7cqi, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
.lp-final-beat { display: block; }
.lp-final-lead {
  max-width: 28rem;
  color: rgb(240 250 247 / 0.88);
  font-size: var(--lp-fs-intro);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}
.lp-final-form {
  padding: clamp(22px, 2vw + 12px, 36px);
  border-radius: var(--lp-r-panel);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 60px -30px rgb(4 30 27 / 0.6);
}
@media (max-width: 899px) {
  .lp-final-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 734px) {
  .lp-final-card {
    margin-inline: calc(50% - 50vw);
    padding: 48px calc((100vw - var(--lp-w)) / 2) 52px;
    border-radius: 0;
  }
  .lp-final-form { padding: 22px 18px; }
}

/* ------------------------------------------------------------------ footnotes and footer */
.lp-foot {
  padding-block: 40px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-alt);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}
.lp-fns { padding-block-end: 24px; border-block-end: 1px solid var(--line); }
.lp-fns ol { display: grid; gap: 8px; margin: 0; padding-inline-start: 1.3em; }
.lp-fns li { scroll-margin-top: 80px; }
.lp-fns li:target { color: var(--text); }
.lp-foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  padding-block: 28px;
  border-block-end: 1px solid var(--line);
}
.lp-foot-brand {
  align-self: start;
  justify-self: start;
  width: fit-content;
  padding-block: 8px;
  margin-block: -8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.lp-foot-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.lp-foot-h {
  margin-block-end: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}
.lp-foot-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-foot a:not(.brand) { color: var(--text-2); text-decoration: none; }
.lp-foot a:not(.brand):hover { color: var(--text); text-decoration: underline; }
.lp-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block-start: 20px;
}
@media (pointer: coarse) {
  .lp-foot-col ul { gap: 0; }
  .lp-foot-col a { display: inline-block; padding-block: 13px; }
}
@media (max-width: 734px) {
  .lp-foot-grid { grid-template-columns: 1fr 1fr; }
  .lp-foot-brand { grid-column: 1 / -1; }
}