/*
  Landing: the features sections, after landing.css and landing-hero.css.
  5. Control (#control, .lp-ctl-): the page's one dark band, three tall tiles, the first
     wider (one edit reaches every channel, the honest answer, asked once). 6. Capabilities (#features, .lp-cap-): the bento on the alt band, five tiles
     that trade widths row by row (4+2, 2+4, then the numbers across the last row).
     7. The owner app (#app, .lp-oa-): real screenshots, the site in a laptop frame and the
     app for phones in a phone frame, captions that switch the screen.
  Tokens and primitives are landing.css's (bands, .lp-tile, chips, bubbles, frames); the
  few colours these pictures need on top live on the section (light, then dark twice: the
  system preference and the explicit choice). End states are the plain rules (no script,
  reduced motion); each tile's small story plays once its picture is in view.
  Mobile (<735px): every grid is one column; tablets (735-1067px) use two.
*/

/* ------------------------------------------------------------------ tile captions */
/* Apple's caption: the lead in ink, the rest in grey, one paragraph */
.lp-ctl-text,
.lp-cap-text {
  max-width: 34rem;
  color: var(--text-2);
  font-size: var(--lp-fs-tile);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}
.lp-ctl-text h3,
.lp-ctl-text p,
.lp-cap-text h3,
.lp-cap-text p { display: inline; }
.lp-ctl-text h3,
.lp-cap-text h3 {
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

/* ================================================================== 5. control */
.lp-ctl {
  /* the band's own chat and soft-accent surfaces (the page's light ones would glare): the
     bot's bubble is the dark, teal-tinted one the page uses on every dark surface */
  --accent-soft: #10302b;
  --accent-soft-2: #17403a;
  --lp-bubble-me: #3a3a3c;
  --lp-bubble-bot: #1f2f2c;
  --lp-bubble-bot-edge: rgb(127 211 196 / 0.24);
  --lp-bot-ink: #f5f5f7;
  --lp-ctl-panel: #2c2c2e;
  --lp-ctl-screen: #111112;
}
.lp-ctl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lp-gap);
}
.lp-ctl-tile {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: clamp(500px, 24rem + 9vw, 600px);
}
.lp-ctl-visual { margin-block-start: auto; }

/* the knowledge card: one answer, edited once, and the channels it now reaches */
.lp-ctl-card {
  display: grid;
  gap: 2px;
  padding: 20px 22px 18px;
  border-radius: var(--lp-r-panel);
  background: var(--lp-ctl-panel);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  font-size: 15px;
  line-height: 1.45;
}
.lp-ctl-card .lp-chip { background: var(--surface-3); }
.lp-ctl-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-end: 10px;
  color: var(--text-2);
  font-size: 13px;
}
.lp-ctl-label { margin-block-start: 10px; color: var(--text-2); font-size: 12px; }
.lp-ctl-q {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.lp-ctl-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lp-ctl-src .icon { width: 13px; height: 13px; }
.lp-ctl-a { color: var(--text); }
/* the old value struck (a drawn line, so the story can draw it), the new one marked */
.lp-ctl-old {
  position: relative;
  display: inline-block;
  margin-inline: 2px;
  color: var(--text-2);
  text-decoration: none;
}
.lp-ctl-old::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: 55%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
}
.lp-ctl-new {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-soft-2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.lp-ctl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
}
.lp-ctl-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 500;
}
.lp-ctl-ok .icon { width: 16px; height: 16px; }
/* the four channels: phone, WhatsApp, email and site chat, each now giving the new answer */
.lp-ctl-everywhere { display: flex; gap: 6px; }
.lp-ctl-everywhere i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft-2);
  color: var(--accent-ink);
}
.lp-ctl-everywhere .icon { width: 15px; height: 15px; }

/* the honest answer: a short chat on a phone's dark screen */
.lp-ctl-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 14px 18px;
  border-radius: var(--lp-r-panel);
  background: var(--lp-ctl-screen);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.lp-ctl-reply { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.lp-ctl-reply .lp-bubble { max-width: calc(100% - 34px); }
/* the typing dots exist only while the story plays (motion below), over the reply's place */
.lp-ctl-typing { display: none; }
.lp-ctl-handoff { display: flex; justify-content: center; margin-block-start: 6px; }

/* asked once: the open question, answered, kept */
.lp-ctl-field {
  margin-block-start: 4px;
  padding: 11px 14px;
  border-radius: var(--lp-r-input);
  background: var(--lp-ctl-screen);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 14px;
}
.lp-ctl-field span { display: block; }
.lp-ctl-keep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 14px;
  color: var(--text);
  font-size: 13px;
}
.lp-ctl-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--accent);
  color: #ffffff;
}
.lp-ctl-box .icon { width: 12px; height: 12px; }
.lp-ctl-saved { display: flex; justify-content: center; margin-block-start: 14px; }

@media (max-width: 1067px) {
  .lp-ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-ctl-tile { min-height: 500px; }
  .lp-ctl-edit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    min-height: 0;
  }
  .lp-ctl-edit .lp-ctl-visual { margin-block-start: 0; }
}
@media (max-width: 734px) {
  .lp-ctl-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-ctl-tile, .lp-ctl-edit { display: flex; gap: 28px; min-height: 0; }
}

/* ================================================================== 6. capabilities */
.lp-cap {
  --lp-cap-wall:
    radial-gradient(110% 70% at 90% 0%, #cfe7e1 0%, transparent 62%),
    radial-gradient(100% 75% at 0% 100%, #ffdcca 0%, transparent 66%),
    linear-gradient(180deg, #e9f2ef, #f8ece5);
  --lp-cap-lock-ink: #1d1d1f;
  --lp-cap-note: rgb(255 255 255 / 0.72);
  --lp-cap-note-solid: rgb(255 255 255 / 0.96);
  --lp-cap-note-old: rgb(255 255 255 / 0.66);
  --lp-cap-app: #1d1d1f;
  --lp-cap-busy: #e8e8ed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-cap {
    --lp-cap-wall:
      radial-gradient(110% 70% at 90% 0%, #1b4740 0%, transparent 62%),
      radial-gradient(100% 75% at 0% 100%, #4a2d20 0%, transparent 66%),
      linear-gradient(180deg, #0f1f1c, #1d1511);
    --lp-cap-lock-ink: #f5f5f7;
    --lp-cap-note: rgb(44 44 46 / 0.72);
    --lp-cap-note-solid: rgb(44 44 46 / 0.96);
    --lp-cap-note-old: rgb(44 44 46 / 0.58);
    --lp-cap-app: #3a3a3c;
    --lp-cap-busy: #2c2c2e;
  }
}
:root[data-theme="dark"] .lp-cap {
  --lp-cap-wall:
    radial-gradient(110% 70% at 90% 0%, #1b4740 0%, transparent 62%),
    radial-gradient(100% 75% at 0% 100%, #4a2d20 0%, transparent 66%),
    linear-gradient(180deg, #0f1f1c, #1d1511);
  --lp-cap-lock-ink: #f5f5f7;
  --lp-cap-note: rgb(44 44 46 / 0.72);
  --lp-cap-note-solid: rgb(44 44 46 / 0.96);
  --lp-cap-note-old: rgb(44 44 46 / 0.58);
  --lp-cap-app: #3a3a3c;
  --lp-cap-busy: #2c2c2e;
}

.lp-cap-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--lp-gap);
}
.lp-cap-tile { display: flex; flex-direction: column; gap: 28px; }
/* five tiles, three rows: 4+2, 2+4, then the numbers across the whole row */
.lp-cap-booking, .lp-cap-learn { grid-column: span 4; }
.lp-cap-urgent, .lp-cap-remind { grid-column: span 2; }
.lp-cap-kpi { grid-column: 1 / -1; }

/* --- booking: a week in the owner's calendar ------------------------------------- */
.lp-cap-cal { margin-block-start: auto; }
.lp-cap-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 10px;
  color: var(--text-2);
  font-size: 13px;
}
.lp-cap-cal-head span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 600;
}
.lp-cap-cal-head .icon { width: 16px; height: 16px; }
.lp-cap-cal-grid {
  display: grid;
  grid-template-columns: 46px repeat(5, minmax(0, 1fr));
  grid-template-rows: 30px repeat(10, 26px);
}
.lp-cap-cal-day {
  grid-column: var(--c);
  grid-row: 1;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.lp-cap-cal-col {
  grid-column: var(--c);
  grid-row: 2 / -1;
  border-inline-start: 1px solid var(--line);
}
.lp-cap-cal-lines {
  grid-column: 2 / -1;
  grid-row: 2 / -1;
  border-block-end: 1px solid var(--line);
  background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 52px);
}
.lp-cap-cal-hour {
  grid-column: 1;
  grid-row: var(--r);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  text-align: center;
  translate: 0 -0.5em;
}
.lp-cap-cal-busy,
.lp-cap-cal-new {
  grid-column: var(--c);
  grid-row: var(--r) / span var(--s);
  margin: 2px 3px;
  border-radius: 7px;
}
.lp-cap-cal-busy { background: var(--lp-cap-busy); }
.lp-cap-cal-new {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 8px;
  padding-inline-end: 28px;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 8px 18px -10px rgb(18 102 92 / 0.55);
}
.lp-cap-cal-new b { color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
/* the booking's done mark: the page's rare peach */
.lp-cap-cal-ok {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--on-peach);
  box-shadow: 0 0 0 2px var(--lp-tile);
}
.lp-cap-cal-ok .icon { width: 11px; height: 11px; }

/* --- urgent: the top of a phone's lock screen, rising from the tile's edge -------- */
.lp-cap-urgent { padding-block-end: 0; }
.lp-cap-lock {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  width: min(100%, 320px);
  min-height: 330px;
  margin: auto auto 0;
  padding: 34px 12px 22px;
  overflow: hidden;
  border: 7px solid var(--lp-frame);
  border-block-end: 0;
  border-radius: 46px 46px 0 0;
  background: var(--lp-cap-wall);
  color: var(--lp-cap-lock-ink);
}
.lp-cap-lock-island {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: #000000;
  transform: translateX(-50%);
}
.lp-cap-lock-day { margin-block-start: 6px; font-size: 14px; font-weight: 500; opacity: 0.8; }
.lp-cap-lock-time {
  margin-block: -6px 10px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.88;
}
.lp-cap-note {
  width: 100%;
  padding: 10px 14px 12px;
  border-radius: 20px;
  background: var(--lp-cap-note);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  text-align: start;
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.35);
}
@media (prefers-reduced-transparency: reduce) {
  .lp-cap-note,
  .lp-cap-note.lp-cap-note-old { background: var(--lp-cap-note-solid); }
}
.lp-cap-note-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 4px;
  color: var(--text-2);
  font-size: 12px;
}
.lp-cap-note-app {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--lp-cap-app);
  color: #ffffff;
}
.lp-cap-note-app .icon { width: 13px; height: 13px; }
.lp-cap-note-now { margin-inline-start: auto; }
.lp-cap-note-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.lp-cap-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 7px;
  border-radius: var(--lp-r-pill);
  background: var(--peach);
  color: var(--on-peach);
  font-size: 12px;
  font-weight: 600;
}
.lp-cap-flag .icon { width: 12px; height: 12px; }
/* the older one sits back: smaller, on a thinner card; its text keeps full contrast */
.lp-cap-note-old {
  scale: 0.95;
  background: var(--lp-cap-note-old);
  box-shadow: none;
}

/* --- reminders: the message the customer gets, and the hours it never goes -------- */
.lp-cap-remind-pic {
  display: grid;
  gap: 16px;
  margin-block-start: auto;
  padding: 18px 14px 16px;
  border-radius: var(--lp-r-panel);
  background: var(--surface-2);
}
.lp-cap-remind-msg { display: flex; align-items: flex-end; gap: 6px; }
.lp-cap-remind-bubble { max-width: calc(100% - 34px); }
.lp-cap-remind-stop { margin-block-start: 4px; font-size: 13px; opacity: 0.75; }
/* the bubble's ink, a step softer, solid (about 6.4:1 on the light bubble, 9:1 on the
   dark one); no opacity on text */
.lp-cap-remind-sent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-block-start: 2px;
  color: var(--lp-bot-ink);
  color: color-mix(in srgb, var(--lp-bot-ink) 78%, var(--lp-bubble-bot));
  font-size: 11px;
}
.lp-cap-remind-sent .icon { width: 12px; height: 12px; }
.lp-cap-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lp-cap-quiet .lp-chip { background: var(--surface); }
.lp-cap-quiet-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
}
.lp-cap-quiet-icon .icon { width: 15px; height: 15px; }

/* --- learning: an edit in a draft becomes a proposal ------------------------------- */
.lp-cap-learn {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}
.lp-cap-learn-pic { display: grid; gap: 8px; }
.lp-cap-mail {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: var(--lp-r-panel);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.55;
}
.lp-cap-mail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 6px;
  padding-inline-end: 80px;
}
.lp-cap-mail-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
}
.lp-cap-mail-tag .icon { width: 14px; height: 14px; }
.lp-cap-mail-head b { font-weight: 600; }
.lp-cap-mail-body ins {
  padding: 1px 3px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--text);
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lp-cap-edited {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 12px;
}
.lp-cap-edited .icon { width: 13px; height: 13px; }
.lp-cap-flow { justify-self: center; color: var(--text-3); }
.lp-cap-flow .icon { width: 20px; height: 20px; rotate: -90deg; }
.lp-cap-prop {
  padding: 14px 18px 16px;
  border-radius: var(--lp-r-panel);
  background: var(--lp-tile);
  box-shadow:
    inset 0 0 0 1.5px var(--accent-soft-2),
    var(--lp-shadow-sm);
}
.lp-cap-prop-head,
.lp-cap-prop-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.lp-cap-prop-head { color: var(--accent-ink); font-weight: 600; }
.lp-cap-prop-head .icon, .lp-cap-prop-state .icon { width: 14px; height: 14px; }
.lp-cap-prop-text {
  margin-block: 4px 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.lp-cap-prop-state { display: flex; color: var(--text-2); }

/* --- the numbers: the brand tile across the last row, an example (the label says so) */
.lp-cap-kpi {
  --text: #ffffff;
  --text-2: rgb(236 248 245 / 0.84);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  align-items: end;
  gap: 32px clamp(40px, 5vw, 80px);
  isolation: isolate;
  background: var(--glow-bg);
  color: var(--text);
}
.lp-cap-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 120% at 0% 120%, rgb(46 160 142 / 0.7), rgb(30 130 116 / 0.2) 50%, transparent 75%),
    radial-gradient(50% 90% at 100% -20%, rgb(255 248 238 / 0.14), transparent 70%);
}
.lp-cap-kpi .lp-cap-text { max-width: 22rem; }
.lp-cap-kpi-pic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 18px clamp(28px, 4vw, 64px);
}
.lp-cap-example {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 11px;
  border-radius: var(--lp-r-pill);
  background: rgb(255 255 255 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  font-size: 12px;
  font-weight: 600;
}
.lp-cap-kpi-num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2.8rem + 5vw, 8.5rem);
  font-weight: 600;
  line-height: 0.95;
}
.lp-cap-kpi-label { max-width: 15em; margin-block-start: 10px; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.lp-cap-kpi-list { display: grid; gap: 14px; margin: 0; padding: 0 0 4px; list-style: none; }
.lp-cap-kpi-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
  font-size: 15px;
}
.lp-cap-kpi-list .icon { width: 16px; height: 16px; opacity: 0.85; }
.lp-cap-kpi-list b { font-weight: 600; }
/* a plain bar per channel, no track behind it */
.lp-cap-kpi-list i {
  grid-column: 2 / -1;
  width: var(--w);
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.78);
  transform-origin: 100% 50%;
}

/* --- the bento's shapes on smaller screens --------------------------------------- */
@media (max-width: 1067px) {
  /* booking across, urgent and reminders side by side, learning across, the numbers across */
  .lp-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cap-booking, .lp-cap-learn, .lp-cap-kpi { grid-column: 1 / -1; }
  .lp-cap-urgent, .lp-cap-remind { grid-column: auto; }
  .lp-cap-kpi { grid-template-columns: minmax(0, 1fr); }
  .lp-cap-kpi .lp-cap-text { max-width: 34rem; }
}
@media (max-width: 734px) {
  .lp-cap-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-cap-learn, .lp-cap-kpi { display: flex; }
  .lp-cap-kpi { align-items: stretch; }
  .lp-cap-kpi-pic { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-cap-lock { min-height: 300px; }
  /* three days fit a phone: Tuesday to Thursday */
  .lp-cap-cal-grid { grid-template-columns: 40px 0 0 repeat(3, minmax(0, 1fr)); }
  .lp-cap-cal-early, .lp-cap-cal-what { display: none; }
  .lp-cap-cal-new { padding-inline-end: 6px; }
  .lp-cap-cal-ok { inset-block-start: -7px; inset-inline-end: -7px; }
  .lp-cap-mail-head { padding-inline-end: 0; flex-wrap: wrap; }
  .lp-cap-edited { position: static; margin-block-start: 8px; }
}

/* ================================================================== 7. the owner app */
.lp-oa {
  /* the app's own page and ink, for the phone's status bar and home indicator */
  --lp-oa-app-bg: #f7f7f7;
  --lp-oa-app-ink: #1d1d1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-oa { --lp-oa-app-bg: #141414; --lp-oa-app-ink: #f5f5f7; }
}
:root[data-theme="dark"] .lp-oa { --lp-oa-app-bg: #141414; --lp-oa-app-ink: #f5f5f7; }

.lp-oa-stage {
  position: relative;
  width: min(100%, 1120px);
  margin-inline: auto;
}
.lp-oa-laptop .lp-laptop-screen { background: var(--bg-alt); }
.lp-oa-screen,
.lp-oa-pscreen { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.lp-oa-screen.is-on { visibility: visible; opacity: 1; }
.lp-oa-screen picture,
.lp-oa-pscreen picture { display: contents; }
/* The phone stands at the laptop's inline-end corner, over the content area, so the app's
   side menu (at the screen's inline-start) stays whole. It shows the chosen tab's pair: a
   different screen from the laptop's (.is-pair; on phones, .is-on below). */
.lp-oa-phone {
  position: absolute;
  inset-inline-end: 4%;
  inset-block-end: -7%;
  z-index: 2;
}
.lp-oa-phone-frame { --pw: clamp(156px, 12vw + 70px, 236px); }
/* the phone's screen: a status bar, then the app (390 x 782 at 2x, the screen's exact
   shape under the bar), and the home indicator over its quiet bottom edge */
.lp-oa-phone-frame .lp-phone-screen {
  display: flex;
  flex-direction: column;
  background: var(--lp-oa-app-bg);
  color: var(--lp-oa-app-ink);
}
.lp-oa-sbar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pw) * 0.128);
  padding: calc(var(--pw) * 0.012) calc(var(--pw) * 0.1) 0;
  font-size: calc(var(--pw) * 0.047);
  font-weight: 600;
  line-height: 1;
}
.lp-oa-batt {
  position: relative;
  width: calc(var(--pw) * 0.075);
  height: calc(var(--pw) * 0.036);
  border: 1px solid currentColor;
  border-radius: calc(var(--pw) * 0.012);
  opacity: 0.5;
}
.lp-oa-batt::after {
  content: "";
  position: absolute;
  inset: 1.5px 30% 1.5px 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.lp-oa-app { position: relative; flex: 1; }
.lp-oa-home {
  position: absolute;
  inset-block-end: calc(var(--pw) * 0.022);
  left: 50%;
  z-index: 3;
  width: 36%;
  height: calc(var(--pw) * 0.014);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
  transform: translateX(-50%);
}
.lp-oa-pscreen.is-pair { visibility: visible; opacity: 1; }
.lp-oa-pscreen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 734px) {
  /* Phones: a 2000px-wide dashboard would be drawn at a fifth of its size, every label a
     few pixels tall. The laptop gives way, and the phone alone shows the chosen screen of
     the app for phones, legible at this width. */
  .lp-oa-laptop { display: none; }
  .lp-oa-phone { position: static; display: flex; justify-content: center; }
  .lp-oa-phone-frame { --pw: min(76vw, 300px); }
  .lp-oa-pscreen.is-pair { visibility: hidden; opacity: 0; }
  .lp-oa-pscreen.is-on { visibility: visible; opacity: 1; }
}

/* the captions: one per screen, the chosen one in ink with its time running above it */
.lp-oa-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  width: min(100%, 980px);
  margin: clamp(44px, 5vw, 72px) auto 0;
}
.lp-oa-tab {
  position: relative;
  display: block;
  padding: 20px 0 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  text-align: start;
  cursor: pointer;
}
.lp-oa-tab b { font-weight: 600; }
.lp-oa-tab:hover b,
.lp-oa-tab[aria-selected="true"] b { color: var(--text); }
.lp-oa-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}
.lp-oa-bar i {
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: 100% 50%;
}
.lp-oa-tab[aria-selected="true"] .lp-oa-bar i { transform: scaleX(1); }
.lp-oa-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block-start: 28px;
}
.lp-oa-note { color: var(--text-2); font-size: 13px; }
.lp-oa-play {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--lp-platter);
  color: var(--text);
  cursor: pointer;
}
.lp-oa-play .icon { width: 15px; height: 15px; }
.lp-oa-play .lp-i-play, .lp-oa-play.is-paused .lp-i-pause { display: none; }
.lp-oa-play.is-paused .lp-i-play { display: block; }
@media (max-width: 734px) {
  .lp-oa-tabs { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lp-oa-tab { padding-block: 16px 10px; font-size: 16px; }
  .lp-oa-foot { flex-direction: column-reverse; }
}

/* ================================================================== motion */
/* Each tile's story waits, at its first frame, until its picture comes into view:
   landing-features.js sets html.lp-stories, then .is-played on the tile. Every story ends
   on the still picture, which is what shows without the script or with reduced motion.
   The beats are short (all done within about 1.6s, the tall phone ones within 1.1s) so a
   visitor scrolling at a normal pace sees each one end; no first frame is an empty
   picture. */
@media (prefers-reduced-motion: no-preference) {
  html.lp-stories .lp-tile:not(.is-played) [data-lp-story],
  html.lp-stories .lp-tile:not(.is-played) [data-lp-story] *,
  html.lp-stories .lp-tile:not(.is-played) [data-lp-story] *::after { animation-play-state: paused !important; }
  /* control: the old price is struck, the new one lands, and every channel takes it */
  html.lp-stories .lp-ctl-edit .lp-ctl-old { animation: lp-ctl-dim 0.4s 0.3s var(--lp-ease) both; }
  html.lp-stories .lp-ctl-edit .lp-ctl-old::after { animation: lp-ctl-strike 0.4s 0.3s var(--lp-ease) both; }
  html.lp-stories .lp-ctl-edit .lp-ctl-new { animation: lp-pop 0.45s 0.65s var(--lp-spring) both; }
  html.lp-stories .lp-ctl-edit .lp-ctl-ok { animation: lp-ctl-in 0.5s 0.95s var(--lp-ease) both; }
  html.lp-stories .lp-ctl-edit .lp-ctl-everywhere i {
    animation: lp-ctl-reach 0.4s calc(1s + var(--j) * 0.09s) var(--lp-ease) both;
  }
  html.lp-stories .lp-ctl-edit .lp-ctl-card { animation: lp-ctl-lit 0.8s 1s var(--lp-ease) forwards; }
  /* control: the question is there from the start; the dots hold the reply's place, the
     honest answer lands, the question is handed over */
  html.lp-stories .lp-ctl-honest .lp-ctl-typing {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 34px;
    display: inline-flex;
    animation: lp-ctl-typing 0.65s linear both;
  }
  html.lp-stories .lp-ctl-honest .lp-ctl-typing i { animation: lp-dot 0.6s 0.1s 1; }
  html.lp-stories .lp-ctl-honest .lp-ctl-typing i:nth-child(2) { animation-delay: 0.2s; }
  html.lp-stories .lp-ctl-honest .lp-ctl-typing i:nth-child(3) { animation-delay: 0.3s; }
  html.lp-stories .lp-ctl-honest .lp-ctl-answer { animation: lp-msg 0.5s 0.55s var(--lp-ease) both; }
  html.lp-stories .lp-ctl-honest .lp-ctl-handoff { animation: lp-pop 0.55s 1s var(--lp-spring) both; }
  /* control: the answer is written, kept, saved */
  html.lp-stories .lp-ctl-once .lp-ctl-field span { animation: lp-ctl-in 0.6s 0.35s var(--lp-ease) both; }
  html.lp-stories .lp-ctl-once .lp-ctl-box { animation: lp-pop 0.45s 0.9s var(--lp-spring) both; }
  html.lp-stories .lp-ctl-once .lp-ctl-saved { animation: lp-pop 0.55s 1.3s var(--lp-spring) both; }

  /* capabilities: the new slot drops into the free hour, the peach check lands */
  html.lp-stories .lp-cap-booking .lp-cap-cal-new { animation: lp-cap-drop 0.7s 0.45s var(--lp-spring) both; }
  html.lp-stories .lp-cap-booking .lp-cap-cal-ok { animation: lp-pop 0.45s 1.05s var(--lp-spring) both; }
  /* the alert arrives on top of an older one */
  html.lp-stories .lp-cap-urgent .lp-cap-note:not(.lp-cap-note-old) { animation: lp-cap-drop 0.7s 0.5s var(--lp-spring) both; }
  html.lp-stories .lp-cap-urgent .lp-cap-flag { animation: lp-pop 0.45s 1.05s var(--lp-spring) both; }
  /* the reminder and its quiet hours, quick: on a phone this tile passes by fast */
  html.lp-stories .lp-cap-remind .lp-cap-remind-msg { animation: lp-msg 0.5s 0.1s var(--lp-ease) both; }
  html.lp-stories .lp-cap-remind .lp-cap-quiet > * { animation: lp-pop 0.45s var(--lp-spring) both; }
  html.lp-stories .lp-cap-remind .lp-cap-quiet > :nth-child(1) { animation-delay: 0.4s; }
  html.lp-stories .lp-cap-remind .lp-cap-quiet > :nth-child(2) { animation-delay: 0.48s; }
  html.lp-stories .lp-cap-remind .lp-cap-quiet > :nth-child(3) { animation-delay: 0.56s; }
  html.lp-stories .lp-cap-remind .lp-cap-quiet > :nth-child(4) { animation-delay: 0.64s; }
  /* the edit is written, then the proposal arrives; it waits as a faint card, never as an
     empty space (on a phone it sits below the draft, the next thing in view) */
  html.lp-stories .lp-cap-learn .lp-cap-mail ins { animation: lp-ctl-in 0.5s 0.15s var(--lp-ease) both; }
  html.lp-stories .lp-cap-learn .lp-cap-edited { animation: lp-ctl-in 0.4s 0.35s var(--lp-ease) both; }
  html.lp-stories .lp-cap-learn .lp-cap-flow { animation: lp-ctl-in 0.4s 0.5s var(--lp-ease) both; }
  html.lp-stories .lp-cap-learn .lp-cap-prop { animation: lp-cap-arrive 0.5s 0.6s var(--lp-ease) both; }
  html.lp-stories .lp-cap-kpi .lp-cap-kpi-list i { animation: lp-cap-grow 0.9s 0.45s var(--lp-ease) both; }

  /* the owner app: screens cross-fade, on the laptop and the phone alike (visibility
     steps at the end of a fade out and at the start of a fade in) */
  .lp-oa-screen,
  .lp-oa-pscreen {
    transition:
      opacity 0.55s var(--lp-ease-io),
      visibility 0.55s var(--lp-ease-io);
  }
  .lp-oa-bar i { transition: transform 0.3s var(--lp-ease-io); }
  .lp-oa-viewer.is-playing .lp-oa-tab[aria-selected="true"] .lp-oa-bar i.is-running {
    transition: none;
    animation: lp-oa-fill var(--lp-oa-step, 7000ms) linear both;
  }
}
@keyframes lp-ctl-dim {
  from { color: var(--text); }
}
@keyframes lp-ctl-strike {
  from { transform: scaleX(0); }
}
@keyframes lp-ctl-reach {
  from { background: var(--surface-3); color: var(--text-2); }
}
@keyframes lp-ctl-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes lp-ctl-typing {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lp-ctl-lit {
  to { box-shadow: inset 0 0 0 1px rgb(127 211 196 / 0.45); }
}
@keyframes lp-cap-drop {
  from { opacity: 0; translate: 0 -18px; scale: 0.96; }
}
@keyframes lp-cap-arrive {
  from { opacity: 0.3; translate: 0 10px; scale: 0.97; }
}
@keyframes lp-cap-grow {
  from { transform: scaleX(0); }
}
@keyframes lp-oa-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}