/* Clozr landing page (landing.php). Page compositions + the seven product demonstrations.
 * Requires clozr-marketing-tokens.css and clozr-marketing.css; uses only --cm-* tokens plus the few
 * page tokens below. Demo state is driven by attributes the shared controller mirrors onto each
 * [data-cm-demo]: data-cm-scene-key (current scene) and data-cm-reached (every scene so far). */

.lp {
  --lp-callback: 234 88 12;       /* Calendar: call backs are orange in the app */
  --lp-appointment: 21 128 61;    /* Calendar: appointments are green in the app */
  --lp-pin-new: 100 116 139;
  --lp-pin-interested: 2 132 199;
  --lp-pin-sold: 21 128 61;
  --lp-map-land: 238 242 246;
  --lp-map-road: 255 255 255;
  --lp-map-case: 214 221 230;
  --lp-map-water: 205 228 245;
  --lp-map-park: 220 238 216;
  --lp-demo-height: 22.5rem;
  --cm-logo-height: 1.625rem;
}
.lp :where(select, textarea) { font: inherit; }
.lp-num { font-variant-numeric: tabular-nums; }
.lp-nw { white-space: nowrap; }
.lp [class^="ri-"], .lp [class*=" ri-"] { line-height: 1; }
/* Headings balance their lines; running copy avoids leaving one word alone on its last line. */
.lp :is(h1, h2, h3) { text-wrap: balance; }
.lp :is(p, li, dd) { text-wrap: pretty; }
.lp .lp-case li { text-wrap: balance; }   /* two-line checklist items split evenly, never onto one word */

/* ── Buttons: a touch of depth ────────────────────────────────────────────────────────────
   A soft light across the top, a slightly darker lower edge, and a small two-layer contact shadow. Hover
   lifts the button a pixel; press sinks it and flattens the shadow. background-image (not background) so
   the shared hover colors in clozr-marketing.css still apply underneath. */
.lp .cm-btn {
  background-image: linear-gradient(to bottom, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .3), 0 1px 1px rgb(var(--cm-ink) / .12), 0 3px 8px -2px rgb(var(--cm-ink) / .28);
  transition: background-color var(--cm-time-hover), box-shadow var(--cm-time-hover), transform var(--cm-time-hover) var(--cm-ease-out);
}
.lp .cm-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .3), 0 2px 2px rgb(var(--cm-ink) / .12), 0 6px 14px -3px rgb(var(--cm-ink) / .32); }
.lp .cm-btn--light { background-image: linear-gradient(to bottom, rgb(255 255 255 / 0) 35%, rgb(var(--cm-sky-100) / .7)); box-shadow: inset 0 -1px 0 rgb(var(--cm-sky-900) / .16), 0 1px 1px rgb(var(--cm-sky-900) / .18), 0 4px 12px -3px rgb(var(--cm-sky-900) / .42); }
.lp .cm-btn--light:hover { box-shadow: inset 0 -1px 0 rgb(var(--cm-sky-900) / .16), 0 2px 2px rgb(var(--cm-sky-900) / .18), 0 8px 18px -4px rgb(var(--cm-sky-900) / .48); }
.lp .cm-btn--glass { background-image: linear-gradient(to bottom, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 1px rgb(var(--cm-sky-900) / .14), 0 4px 12px -3px rgb(var(--cm-sky-900) / .34); }
.lp .cm-btn--glass:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), 0 2px 2px rgb(var(--cm-sky-900) / .14), 0 8px 18px -4px rgb(var(--cm-sky-900) / .4); }
.lp .cm-btn:active { transform: translateY(1px); background-image: none; box-shadow: inset 0 1px 2px rgb(0 0 0 / .22), 0 0 0 rgb(0 0 0 / 0); }
.lp .cm-btn:disabled { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lp .cm-btn:hover, .lp .cm-btn:active { transform: none; } }

/* ── Header additions ─────────────────────────────────────────────────────────────────── */
.lp .cm-header .cm-logo { color: rgb(var(--cm-ink)); }
/* Desktop nav: the same full-height segmented treatment as the demo control bars. Each item fills the
   header height, dividers separate them, and an open menu carries its accent on the bottom edge — the
   edge its panel opens from. */
@media (min-width: 1024px) {
  .lp .cm-header-row { align-items: stretch; }
  .lp .cm-header .cm-logo, .lp .lp-nav-actions { align-self: center; }
  .lp .cm-nav-pane { align-items: stretch; }
  .lp .cm-nav { align-items: stretch; gap: 0; border-left: 1px solid rgb(var(--cm-line)); }
  .lp .cm-nav > .cm-menu { display: flex; }
  .lp .cm-nav-trigger, .lp .cm-nav .cm-nav-link { min-height: var(--cm-header-height); padding: 0 var(--cm-space-5); border-radius: 0; border-right: 1px solid rgb(var(--cm-line)); color: rgb(var(--cm-ink-secondary)); font-size: var(--cm-type-ui); font-weight: 500; transition: background var(--cm-time-hover), color var(--cm-time-hover), box-shadow var(--cm-time-hover); }
  .lp .cm-nav-trigger:hover, .lp .cm-nav .cm-nav-link:hover { background: rgb(var(--cm-surface-soft)); color: rgb(var(--cm-ink)); }
  .lp .cm-nav-trigger[aria-expanded="true"] { background: rgb(var(--cm-surface-soft)); color: rgb(var(--cm-ink)); box-shadow: inset 0 -2px 0 rgb(var(--cm-brand)); }
  .lp .cm-nav-trigger:focus-visible, .lp .cm-nav .cm-nav-link:focus-visible { outline-offset: -3px; }
  .lp .lp-signin { color: rgb(var(--cm-ink-secondary)); font-size: var(--cm-type-ui); font-weight: 500; }
}
.lp-view-head { flex-wrap: wrap; row-gap: var(--cm-space-1); }
.lp-nav-actions { display: flex; align-items: center; gap: var(--cm-space-2); }
/* Mobile menu button: borderless 44px target, two rounded bars (the lower one shorter). It stays in the header
   while the menu is open and turns into the X that closes it. No display here: .cm-mobile-toggle decides when
   the toggle shows. */
.lp-menu-btn { align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: -.625rem; padding: 0; border: 0; border-radius: var(--cm-radius-control); background: transparent; color: rgb(var(--cm-ink)); transition: background var(--cm-time-hover); }
.lp-menu-btn:hover { background: rgb(var(--cm-surface-soft)); }
.lp-menu-btn:active { background: rgb(var(--cm-surface-inset)); }
.lp-burger { position: relative; display: block; width: 1.375rem; height: 1rem; }
.lp-burger i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: top var(--cm-time-mobile) var(--cm-ease-out), transform var(--cm-time-mobile) var(--cm-ease-out), width var(--cm-time-mobile) var(--cm-ease-out); }
.lp-burger i:first-child { top: 3px; width: 100%; }
.lp-burger i:last-child { top: 11px; width: 62%; }
.lp-menu-btn[aria-expanded="true"] .lp-burger i { top: 7px; width: 100%; }
.lp-menu-btn[aria-expanded="true"] .lp-burger i:first-child { transform: rotate(45deg); }
.lp-menu-btn[aria-expanded="true"] .lp-burger i:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) { .lp-nav-backdrop { display: none; } }
.lp-mega-eyebrow { display: inline-flex; align-items: center; gap: var(--cm-space-2); }
.lp-mega-eyebrow i { font-size: 1rem; color: rgb(var(--cm-brand)); letter-spacing: 0; }
/* Platform menu: eight destinations, four across; between 1024 and 1199px the cards drop their description. */
@media (min-width: 1024px) { .lp .lp-mega-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1199px) { .lp .lp-mega-grid--8 .cm-mega-card > p { display: none; } }
.lp-mega-links { display: flex; align-items: center; gap: var(--cm-space-5); }
.lp-mega-links .cm-btn { min-height: 2.5rem; }
.lp-journey { gap: .375rem; }
.lp-journey b { width: 14px; height: 1px; background: rgb(var(--cm-line-strong)); }
.lp .lp-journey span:nth-of-type(2) { background: white; color: inherit; }
.cm-menu.is-open .lp-journey span { animation: lp-journey 5s var(--cm-ease-standard) infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes lp-journey {
  0%, 18% { background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); border-color: rgb(var(--cm-brand) / .35); }
  22%, 100% { background: white; color: rgb(var(--cm-ink-muted)); border-color: rgb(var(--cm-line)); }
}

/* ── Sky bands: product frames keep their own light-surface colors ──────────────────────── */
.cm-sky .cm-frame .cm-eyebrow { color: rgb(var(--cm-ink-muted)); }
.cm-sky .cm-frame :focus-visible { outline-color: rgb(var(--cm-focus)); }
.cm-sky .cm-demo-caption { color: rgb(var(--cm-white) / .82); }
.cm-sky .cm-link { color: white !important; }

/* ── Hero ─────────────────────────────────────────────────────────────────────────────── */
.lp-btn-lg { min-height: var(--cm-control-large); padding-inline: var(--cm-space-6); font-size: 1rem; }
.lp-hero-demo { max-width: 72rem; margin: var(--cm-space-16) auto 0; }
.lp-hero .cm-hero-foot { color: rgb(var(--cm-white) / .9); }

/* ── Sections ─────────────────────────────────────────────────────────────────────────── */
.lp-section--soft { background: rgb(var(--cm-surface-soft)); }
.lp-feature--flip { grid-template-columns: 1.25fr .85fr; }
.lp-feature--flip > :first-child { order: 2; }
.lp .cm-feature-list strong { color: rgb(var(--cm-ink)); font-weight: 600; }
.lp-sub { margin-top: var(--cm-space-24); }
.lp-sub-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* Benefit grid: separated by space and a soft surface, not boxed borders. */
.lp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-4); }
.lp-benefits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-benefit { display: flex; flex-direction: column; gap: var(--cm-space-3); padding: var(--cm-space-6); background: rgb(var(--cm-surface-soft)); border-radius: var(--cm-radius-card); }
.lp-section--soft .lp-benefit { background: rgb(var(--cm-surface)); }
.lp-benefit h3, .lp-benefit h4, .lp-case h3, .lp-sent h3 { font-family: var(--cm-font-display); font-optical-sizing: none; word-spacing: var(--cm-word-display); }
.lp-benefit h3, .lp-benefit h4 { margin: 0; font-size: var(--cm-type-title); font-weight: 600; letter-spacing: var(--cm-tracking-heading); line-height: 1.2; }
.lp-benefit p { margin: 0; color: rgb(var(--cm-ink-secondary)); font-size: .9375rem; }
.lp-benefit .cm-link { margin-top: auto; padding-top: var(--cm-space-2); }
/* Small text links keep their look but get a 44px-tall hit area. */
.lp-benefit .cm-link, .lp-faq-intro .cm-link { position: relative; width: fit-content; }
.lp-benefit .cm-link::before, .lp-faq-intro .cm-link::before { content: ''; position: absolute; }
.lp-benefit .cm-link::before { inset: 0 -.5rem -1rem; }
.lp-faq-intro .cm-link { margin-top: var(--cm-space-2); }
.lp-faq-intro .cm-link::before { inset: -.875rem -.5rem; }
.lp-benefit-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--cm-radius-control); background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); font-size: 1.25rem; }

/* ── Shared demo parts ────────────────────────────────────────────────────────────────── */
.lp-demo .cm-demo-stage { min-height: var(--lp-demo-height); }
@media (min-width: 640px) { .lp-demo .cm-demo-stage:not(.lp-map-stage) { height: var(--lp-demo-height); overflow: hidden; } }
.lp-demo .cm-badge { white-space: nowrap; }
.lp-demo .cm-demo-main { display: flex; flex-direction: column; }
.lp-demo .cm-demo-toolbar { margin-bottom: var(--cm-space-4); }
.lp-demo .cm-demo-toolbar strong { font-weight: 600; }
.lp-detail { margin-top: 0; align-content: start; }
.lp-demo .cm-demo-note { min-height: 0; line-height: 1.55; }
.lp-demo .cm-demo-note .cm-eyebrow { font-size: .625rem; }
.lp-demo .cm-demo-action { align-items: center; gap: var(--cm-space-1); font-weight: 500; }
.lp-demo .cm-demo-action.is-quiet { background: rgb(var(--cm-surface-inset)); color: rgb(var(--cm-ink-secondary)); }
.lp-step-num { font-family: var(--cm-font-mono); font-size: .6875rem; opacity: .7; }
/* Control bar: full-height segmented steps divided by borders. The current step carries a top accent and,
   while the story plays, a progress line timed to the scene interval (--lp-interval, set per demo). */
.lp-demo .cm-demo-controls { padding: 0; gap: 0; align-items: stretch; min-height: 3rem; }
.lp-demo .cm-demo-step { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 3rem; padding: 0 var(--cm-space-5); border: 0; border-right: 1px solid rgb(var(--cm-line)); border-radius: 0; background: transparent; color: rgb(var(--cm-ink-muted)); font-size: var(--cm-type-small); font-weight: 500; white-space: nowrap; transition: background var(--cm-time-hover), color var(--cm-time-hover); }
.lp-demo .cm-demo-step:hover { background: rgb(var(--cm-surface-inset) / .6); color: rgb(var(--cm-ink)); }
.lp-demo .cm-demo-step:focus-visible { outline-offset: -3px; }
.lp-demo .cm-demo-step[aria-current="step"] { background: rgb(var(--cm-surface)); color: rgb(var(--cm-ink)); box-shadow: inset 0 2px 0 rgb(var(--cm-brand)); }
.lp-demo .cm-demo-step[aria-current="step"] .lp-step-num { color: rgb(var(--cm-link)); opacity: 1; }
.lp-demo .cm-demo-step[aria-current="step"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(var(--cm-brand) / .35); transform: scaleX(0); transform-origin: left; }
.lp-demo.is-running .cm-demo-step[aria-current="step"]::after { animation: lp-step-progress var(--lp-interval, 2750ms) linear forwards; }
.lp-demo .cm-demo-pause { margin-left: auto; border-right: 0; border-left: 1px solid rgb(var(--cm-line)); color: rgb(var(--cm-ink-secondary)); }
.lp-demo .cm-demo-pause::before { content: ''; width: 10px; height: 11px; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.lp-demo .cm-demo-pause[aria-pressed="true"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lp-demo .cm-demo-pause:disabled::before { display: none; }
@keyframes lp-step-progress { to { transform: scaleX(1); } }
.lp-crumb { color: rgb(var(--cm-ink-muted)); font-size: var(--cm-type-small); }
.lp-view-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-3); }
/* Split demos: both panes' headers share one row height, so their titles sit on the same line. */
.lp-pane > .cm-demo-toolbar:first-child, .lp-pane > .lp-view-head:first-child { min-height: 2rem; }
/* A note on a soft pane would vanish into it; lift it onto the card surface instead. */
.lp-pane--soft .cm-demo-note { background: rgb(var(--cm-surface)); }
.lp-view-title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.lp-meta { margin: 0; color: rgb(var(--cm-ink-muted)); font-size: .75rem; display: inline-flex; align-items: center; gap: var(--cm-space-1); }
.lp-aside i { color: rgb(var(--cm-brand)); }
.lp-rows { display: grid; }
.lp-row { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-3) var(--cm-space-2); border-bottom: 1px solid rgb(var(--cm-line)); border-radius: 0; }
.lp-row > div { min-width: 0; }
.lp-row strong, .lp-caller strong { display: block; font-size: var(--cm-type-ui); font-weight: 600; }
.lp-row small, .lp-caller small, .lp-route small, .lp-steps small, .lp-agenda small { display: block; color: rgb(var(--cm-ink-muted)); font-size: .6875rem; }
.lp-row > .cm-badge, .lp-caller > .cm-badge { margin-left: auto; font-size: .6875rem; }
.lp-row.is-fresh { background: rgb(var(--cm-brand-soft) / .55); border-radius: var(--cm-radius-control); border-bottom-color: transparent; animation: lp-arrive 600ms var(--cm-ease-out); }
.lp-row.is-picked { background: rgb(var(--cm-brand-soft) / .55); border-radius: var(--cm-radius-control); border-bottom-color: transparent; }
.lp-check { margin-left: auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgb(var(--cm-brand)); color: white; font-size: .875rem; }
.lp-answers { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-2); }
.lp-answers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-answers--form, .lp-answers--tight { grid-template-columns: 1fr; gap: var(--cm-space-1); }
.lp-answers > div { padding: var(--cm-space-2) var(--cm-space-3); background: rgb(var(--cm-surface-soft)); border-radius: var(--cm-radius-control); min-width: 0; }
.lp-pane--soft .lp-answers > div, .lp-map-panel .lp-answers > div { background: rgb(var(--cm-surface)); }
.lp-answers--form > div { display: flex; justify-content: space-between; gap: var(--cm-space-3); border: 1px solid rgb(var(--cm-line)); background: rgb(var(--cm-surface)); }
.lp-answers dt { color: rgb(var(--cm-ink-muted)); font-size: .6875rem; }
.lp-answers dd { margin: 0; font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; }
.lp-chips { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); margin: 0; }
.lp-chips > span { display: inline-flex; align-items: center; gap: var(--cm-space-1); padding: .375rem .75rem; border: 1px solid rgb(var(--cm-line-strong)); border-radius: var(--cm-radius-pill); font-size: .75rem; color: rgb(var(--cm-ink-secondary)); background: rgb(var(--cm-surface)); transition: background var(--cm-time-hover), color var(--cm-time-hover), border-color var(--cm-time-hover); }
.lp-chips > span.is-on { background: rgb(var(--cm-ink)); border-color: rgb(var(--cm-ink)); color: white; }
.lp-chips--sm > span { padding: .25rem .625rem; font-size: .6875rem; }
.lp-confirm { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-space-3); }
.lp-confirm .cm-badge { font-size: .75rem; }
.lp-caller { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-3); border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-card); background: rgb(var(--cm-surface)); }
.lp-call-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cm-space-2); }
.lp-call-keys span { display: grid; justify-items: center; gap: .25rem; padding: var(--cm-space-2) 0; border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface-soft)); font-size: .6875rem; color: rgb(var(--cm-ink-secondary)); }
.lp-call-keys i { font-size: 1.05rem; color: rgb(var(--cm-ink)); }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cm-space-2); }
.lp-table { display: grid; font-size: .75rem; }
.lp-tr { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr .9fr; gap: var(--cm-space-2); padding: .5rem var(--cm-space-2); border-bottom: 1px solid rgb(var(--cm-line)); align-items: center; transition: background var(--cm-time-panel); }
.lp-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tr > span:last-child { text-align: right; }
.lp-th { color: rgb(var(--cm-ink-muted)); font-size: .6875rem; font-weight: 500; }
.lp-tr.is-hl { background: rgb(var(--cm-brand-soft) / .6); border-radius: 6px; }
.lp-tr-neg .lp-num { color: rgb(var(--cm-danger)); }
.lp-tag { font-style: normal; margin-left: .25rem; padding: .0625rem .375rem; border-radius: var(--cm-radius-pill); background: rgb(var(--cm-surface-inset)); color: rgb(var(--cm-ink-secondary)); font-size: .625rem; font-weight: 500; }
.lp-tag.is-warn { background: rgb(var(--cm-warning-soft)); color: rgb(var(--cm-warning)); }
.lp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-2); }
.lp-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-kpis > div { padding: var(--cm-space-3); border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface-soft)); min-width: 0; }
.lp-kpis small { display: block; color: rgb(var(--cm-ink-muted)); font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-kpis strong { display: block; margin-top: .125rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.lp-cluster-sm { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); }
.lp-panel-title { font-size: .9375rem; font-weight: 600; }
.s-after { display: none; }

/* Stage layouts */
.lp-stage-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lp-stage-split--wide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.lp-stage-stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.lp-pane { min-width: 0; padding: var(--cm-space-5); display: flex; flex-direction: column; }
.lp-pane--soft { background: rgb(var(--cm-surface-soft)); border-left: 1px solid rgb(var(--cm-line)); gap: var(--cm-space-3); }
.lp-pane--soft > .cm-demo-toolbar { margin-bottom: var(--cm-space-1); }   /* + the pane gap = the 16px every other toolbar uses */
.lp-stage-stack .lp-pane--soft { border-left: 0; border-top: 1px solid rgb(var(--cm-line)); }

/* ── Demo 1 · connected workflow ──────────────────────────────────────────────────────── */
.lp-demo--workflow { --lp-demo-height: 26.5rem; }
.lp-demo--workflow .cm-demo-stage { grid-template-columns: 10.5rem minmax(0, 1fr); }
/* One inset for everything in the rail: logo, item icons, and the user chip all start at the same x. */
.lp-side { --lp-rail-x: .625rem; gap: 2px; padding: var(--cm-space-5) var(--cm-space-3) var(--cm-space-4); font-size: .8125rem; }
.lp-side-logo { display: block; padding: 0 var(--lp-rail-x); margin-bottom: var(--cm-space-6); color: white; }
.lp-side-logo svg { display: block; height: 1.125rem; width: auto; fill: currentColor; }
.lp-side .cm-demo-nav-item { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.25rem; padding: 0 var(--lp-rail-x); border-radius: 8px; white-space: nowrap; transition: background var(--cm-time-panel), color var(--cm-time-panel); }
.lp-side .cm-demo-nav-item i { width: 1rem; font-size: 1rem; text-align: center; opacity: .8; }
.lp-side-user { margin-top: auto; display: flex; align-items: center; gap: .625rem; padding: var(--cm-space-3) var(--lp-rail-x) 0; border-top: 1px solid rgb(var(--cm-white) / .1); }
.lp-side-user .cm-avatar { width: 1.75rem; height: 1.75rem; font-size: .625rem; background: rgb(var(--cm-white) / .14); color: white; }
.lp-side-user strong { display: block; font-size: .75rem; font-weight: 600; color: white; }
.lp-side-user small { display: block; font-size: .6875rem; color: rgb(var(--cm-white) / .6); }
.lp-demo--workflow:not([data-cm-scene-key]) [data-view="leads"],
.lp-demo--workflow[data-cm-scene-key="lead"] [data-view="leads"],
.lp-demo--workflow[data-cm-scene-key="assign"] [data-view="leads"],
.lp-demo--workflow[data-cm-scene-key="call"] [data-view="dialer"],
.lp-demo--workflow[data-cm-scene-key="outcome"] [data-view="pipeline"],
.lp-demo--workflow[data-cm-scene-key="commission"] [data-view="commissions"] { background: rgb(var(--cm-white) / .14); color: white; }

/* ── Demo 2 · inbound routing ─────────────────────────────────────────────────────────── */
.lp-ring { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 50%; background: rgb(var(--cm-success)); color: white; font-size: 1rem; animation: lp-ring 1.4s var(--cm-ease-out) infinite; }
.lp-route { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cm-space-2); }
.lp-route li { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-3); border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface)); border: 1px solid rgb(var(--cm-line)); transition: border-color var(--cm-time-panel), background var(--cm-time-panel); }
.lp-route li > div { min-width: 0; }
.lp-route strong { display: block; font-size: .8125rem; font-weight: 600; }
.lp-route-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface-inset)); color: rgb(var(--cm-ink-secondary)); }
.lp-state { margin-left: auto; font-size: .6875rem; white-space: nowrap; }
.lp-state em { display: none; font-style: normal; padding: .125rem .5rem; border-radius: var(--cm-radius-pill); background: rgb(var(--cm-surface-inset)); color: rgb(var(--cm-ink-muted)); }
.lp-state .s-wait { display: inline-flex; }
.lp-state .s-ring { background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); animation: lp-blink 1s ease-in-out infinite alternate; }
.lp-state .s-ok { background: rgb(var(--cm-success-soft)); color: rgb(var(--cm-success)); }
.lp-route-note { margin-top: auto; }
.lp-demo--routing[data-cm-reached~="owner"] .lp-route-a .s-wait,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-b .s-wait,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-c .s-wait { display: none; }
.lp-demo--routing[data-cm-scene-key="owner"] .lp-route-a .s-ring,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-a .s-miss,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-b .s-ok,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-c .s-skip { display: inline-flex; }
.lp-demo--routing[data-cm-scene-key="owner"] .lp-route-a,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-b { border-color: rgb(var(--cm-brand) / .45); background: rgb(var(--cm-brand-soft) / .45); }
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-a,
.lp-demo--routing[data-cm-reached~="fallback"] .lp-route-c { opacity: .6; }

/* ── Demo 3 · calendar ────────────────────────────────────────────────────────────────── */
.lp-demo--calendar { --lp-demo-height: 26.5rem; }
.lp-cal { position: relative; overflow: hidden; }
.lp-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.lp-week > span { position: relative; display: grid; justify-items: center; gap: .125rem; padding: .5rem 0 .75rem; border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface)); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: box-shadow var(--cm-time-panel), background var(--cm-time-panel); }
.lp-week b { font-size: .625rem; font-weight: 500; color: rgb(var(--cm-ink-muted)); text-transform: uppercase; letter-spacing: .08em; }
.lp-week .is-today { background: rgb(var(--cm-ink)); color: white; }
.lp-week .is-today b { color: rgb(var(--cm-white) / .7); }
.lp-dots { position: absolute; bottom: .3rem; display: flex; gap: 2px; }
.lp-dots i { width: 4px; height: 4px; border-radius: 50%; }
.lp-dots .d-cb { background: rgb(var(--lp-callback)); }
.lp-dots .d-ap { background: rgb(var(--lp-appointment)); }
.lp-dots .d-new { display: none; }
.lp-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.lp-agenda li { display: grid; grid-template-columns: 4.25rem 1fr; align-items: center; gap: var(--cm-space-2); padding: .5rem .875rem; border-radius: 0 var(--cm-radius-control) var(--cm-radius-control) 0; background: rgb(var(--cm-surface)); border-left: 3px solid rgb(var(--lp-callback)); }
.lp-agenda li.t-ap { border-left-color: rgb(var(--lp-appointment)); }
.lp-agenda time { font-size: .6875rem; color: rgb(var(--cm-ink-muted)); font-variant-numeric: tabular-nums; }
.lp-agenda strong { font-size: .8125rem; font-weight: 600; }
.lp-agenda .is-new { display: none; background: rgb(var(--cm-brand-soft) / .7); }
.lp-legend { margin: 0; display: flex; gap: var(--cm-space-4); font-size: .75rem; }
.lp-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.lp-legend span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: rgb(var(--lp-callback)); }
.lp-legend .t-ap::before { background: rgb(var(--lp-appointment)); }
.lp-toast { position: absolute; left: var(--cm-space-4); right: var(--cm-space-4); bottom: var(--cm-space-4); display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-3); border-radius: var(--cm-radius-card); background: rgb(var(--cm-ink)); color: white; box-shadow: var(--cm-shadow-small), 0 18px 36px -14px rgb(15 23 42 / .45); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--cm-time-panel), transform var(--cm-time-card) var(--cm-ease-out); }
.lp-toast > div { min-width: 0; flex: 1; }
.lp-toast strong { display: block; font-size: .8125rem; font-weight: 600; }
.lp-toast small { color: rgb(var(--cm-white) / .7); font-size: .6875rem; }
.lp-toast-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(var(--lp-callback)); flex-shrink: 0; }
.lp-toast-act { padding: .375rem .625rem; border-radius: 7px; background: white; color: rgb(var(--cm-ink)); font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.lp-toast-act.is-quiet { background: rgb(var(--cm-white) / .14); color: white; }
.lp-toast-acts { display: flex; gap: .375rem; flex-shrink: 0; }
.lp-demo--calendar .lp-pane:first-child { gap: var(--cm-space-3); }
.lp-demo--calendar .cm-demo-toolbar { margin-bottom: 0; }
.lp-caller--sm { padding: var(--cm-space-2) var(--cm-space-3); background: rgb(var(--cm-surface-soft)); border-color: transparent; }
.lp-caller--sm .cm-avatar { width: 2rem; height: 2rem; font-size: .6875rem; background: white; }
.lp-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cm-space-2); }
.lp-channels li { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-2) var(--cm-space-3); border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-control); }
.lp-channels li > div { min-width: 0; flex: 1; }
.lp-channels strong { display: block; font-size: .8125rem; font-weight: 600; }
.lp-channels small { display: block; font-size: .6875rem; color: rgb(var(--cm-ink-muted)); }
.lp-channel-icon { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; flex-shrink: 0; border-radius: 8px; background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); font-size: .9375rem; }
.lp-channel-on { padding: .125rem .5rem; border-radius: var(--cm-radius-pill); background: rgb(var(--cm-success-soft)); color: rgb(var(--cm-success)); font-size: .6875rem; font-weight: 600; }
.lp-sms { margin: 0; max-width: 17rem; padding: .625rem .875rem; border-radius: 14px 14px 14px 4px; background: rgb(var(--cm-surface-inset)); font-size: .8125rem; line-height: 1.45; }
.lp-sms-meta { display: block; margin-bottom: .125rem; color: rgb(var(--cm-ink-muted)); font-size: .625rem; font-weight: 500; letter-spacing: .02em; }
.lp-cal-sum .s-after { display: none; }
.lp-demo--calendar[data-cm-reached~="save"] .lp-agenda .is-new { display: grid; animation: lp-arrive 500ms var(--cm-ease-out); }
.lp-demo--calendar[data-cm-reached~="save"] .d-new { display: block; }
.lp-demo--calendar[data-cm-reached~="save"] .lp-cal-sum .s-before { display: none; }
.lp-demo--calendar[data-cm-reached~="save"] .lp-cal-sum .s-after { display: inline; }
.lp-demo--calendar[data-cm-scene-key="calendar"] .lp-week .is-today { box-shadow: 0 0 0 3px rgb(var(--cm-brand) / .35); }
.lp-demo--calendar[data-cm-scene-key="reminder"] .lp-toast { opacity: 1; transform: none; }

/* ── Demo 4 · territory map ───────────────────────────────────────────────────────────── */
.lp-demo .lp-map-stage { display: block; min-height: 0; }
.lp-map { position: relative; aspect-ratio: 640 / 400; background: rgb(var(--lp-map-land)); overflow: hidden; }
.lp-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-land { fill: rgb(var(--lp-map-land)); }
.m-minor path { fill: none; stroke: rgb(var(--lp-map-road)); stroke-width: 5; }
.m-major path { fill: none; stroke: rgb(var(--lp-map-road)); stroke-width: 9; stroke-linecap: round; }
.m-major .m-case { stroke: rgb(var(--lp-map-case)); stroke-width: 12; }
.m-park { fill: rgb(var(--lp-map-park)); }
.m-water { fill: rgb(var(--lp-map-water)); }
.m-label text { font: 500 9px var(--cm-font); fill: rgb(var(--cm-slate-500)); letter-spacing: .02em; paint-order: stroke; stroke: rgb(var(--lp-map-land)); stroke-width: 3px; }
.m-label .m-label-park { fill: rgb(56 118 64); stroke: rgb(var(--lp-map-park)); font-style: italic; }
.m-label .m-label-water { fill: rgb(40 104 150); stroke: rgb(var(--lp-map-water)); font-style: italic; }
.lp-territory { fill: rgb(var(--cm-brand) / 0); stroke: rgb(var(--cm-brand)); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.lp-pin { stroke: white; stroke-width: 2; transition: fill var(--cm-time-card); }
.lp-pin.is-new { fill: rgb(var(--lp-pin-new)); }
.lp-pin.is-interested { fill: rgb(var(--lp-pin-interested)); }
.lp-pin.is-sold { fill: rgb(var(--lp-pin-sold)); }
.lp-pin-halo { fill: none; stroke: rgb(var(--lp-pin-interested)); stroke-width: 2; opacity: 0; transform-origin: 420px 132px; }
.lp-map-hit { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; }
.lp-map-hit--start { background: rgb(var(--cm-brand)); box-shadow: 0 0 0 4px rgb(var(--cm-brand) / .25); opacity: 0; transition: opacity var(--cm-time-panel); }
.lp-map-rep { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem .25rem .25rem; border-radius: var(--cm-radius-pill); background: white; font-size: .6875rem; font-weight: 600; box-shadow: var(--cm-shadow-small), 0 8px 20px -6px rgb(15 23 42 / .25); opacity: 0; scale: .9; transition: opacity var(--cm-time-panel), scale var(--cm-time-card) var(--cm-ease-out); white-space: nowrap; }
.lp-map-rep .cm-avatar { width: 1.375rem; height: 1.375rem; font-size: .5625rem; }
.lp-map-layers { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .25rem; }
.lp-map-layers span, .lp-map-legend { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: var(--cm-radius-pill); background: white; font-size: .625rem; font-weight: 500; color: rgb(var(--cm-ink-secondary)); box-shadow: var(--cm-shadow-small); }
.lp-map-layers .is-on { background: rgb(var(--cm-ink)); color: white; }
.lp-map-legend { position: absolute; right: .75rem; bottom: .75rem; gap: .625rem; padding-inline: .625rem; }
.lp-map-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.lp-map-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--lp-pin-new)); }
.lp-map-legend .is-interested::before { background: rgb(var(--lp-pin-interested)); }
.lp-map-legend .is-sold::before { background: rgb(var(--lp-pin-sold)); }
.lp-map-panel { position: absolute; top: .75rem; left: .75rem; width: 15rem; padding: var(--cm-space-4); border-radius: var(--cm-radius-card); background: rgb(var(--cm-white) / .97); box-shadow: var(--cm-shadow-small), 0 18px 36px -16px rgb(15 23 42 / .28); }
.lp-map-panel .cm-demo-toolbar { margin-bottom: var(--cm-space-3); font-size: .8125rem; }
.lp-map-panel .cm-demo-toolbar .cm-badge { font-size: .6875rem; }
.lp-demo--map[data-cm-scene-key="select"] .lp-map-hit--start { opacity: 1; animation: lp-blink 900ms ease-in-out infinite alternate; }
.lp-demo--map[data-cm-reached~="draw"] .lp-territory { stroke-dashoffset: 0; fill: rgb(var(--cm-brand) / .1); transition: stroke-dashoffset 1.2s var(--cm-ease-out), fill 400ms 900ms; }
.lp-demo--map[data-cm-reached~="assign"] .lp-territory { fill: rgb(var(--cm-brand) / .16); }
.lp-demo--map[data-cm-reached~="assign"] .lp-map-rep { opacity: 1; scale: 1; }
.lp-demo--map[data-cm-reached~="status"] .lp-pin-key { fill: rgb(var(--lp-pin-interested)); }
.lp-demo--map[data-cm-scene-key="status"] .lp-pin-halo { animation: lp-halo 1.4s var(--cm-ease-out) infinite; }

/* ── Demo 5 · commissions ─────────────────────────────────────────────────────────────── */
.lp-demo--pay { --lp-demo-height: 29.5rem; }
.lp-ledger { padding: var(--cm-space-5) var(--cm-space-5) var(--cm-space-4); display: grid; gap: var(--cm-space-3); }
.lp-demo--pay .lp-pane--soft { padding-top: var(--cm-space-4); }
.lp-demo--pay[data-cm-scene-key="txn"] .lp-tr-key,
.lp-demo--pay[data-cm-scene-key="split"] .lp-tr-key,
.lp-demo--pay:not([data-cm-scene-key]) .lp-tr-key { background: rgb(var(--cm-brand-soft) / .7); border-radius: 6px; }
.lp-bars { display: grid; gap: var(--cm-space-2); }
.lp-bar { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; align-items: center; gap: var(--cm-space-3); font-size: .75rem; }
.lp-bar > span { color: rgb(var(--cm-ink-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-bar > i { position: relative; height: 8px; border-radius: 99px; background: rgb(var(--cm-surface-inset)); overflow: hidden; }
.lp-bar > i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: rgb(var(--cm-brand)); transform-origin: left; animation: lp-grow 1.2s var(--cm-ease-out) both; }
.lp-bar.is-alt > i::after { background: rgb(var(--cm-ink)); }
.lp-bar.is-quiet > i::after { background: rgb(var(--cm-slate-300)); }
.lp-bar > b { font-weight: 600; font-size: .8125rem; }
.lp-statement { padding: var(--cm-space-3) var(--cm-space-4); border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface)); border: 1px solid rgb(var(--cm-line)); font-size: .75rem; }
.lp-statement-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cm-space-3); padding-bottom: var(--cm-space-2); margin-bottom: .25rem; border-bottom: 1px solid rgb(var(--cm-line)); }
.lp-statement-head strong { display: block; font-size: .8125rem; font-weight: 600; }
.lp-statement-head { align-items: center; }
.lp-statement-head .cm-demo-action { padding: .375rem .625rem; font-size: .75rem; }
.lp-lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cm-space-6); }
.lp-line { display: flex; justify-content: space-between; padding: .1875rem 0; color: rgb(var(--cm-ink-secondary)); }
.lp-line.is-total { margin-top: .25rem; padding-top: .375rem; border-top: 1px solid rgb(var(--cm-line)); color: rgb(var(--cm-ink)); font-weight: 600; font-size: .8125rem; }

/* ── Demo 6 · referrals ───────────────────────────────────────────────────────────────── */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-steps li { position: relative; display: flex; gap: var(--cm-space-3); padding-bottom: var(--cm-space-3); color: rgb(var(--cm-ink-muted)); }
.lp-steps li:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 2px; background: rgb(var(--cm-line-strong)); }
.lp-steps strong { display: block; font-size: .8125rem; font-weight: 600; }
.lp-step-dot { position: relative; z-index: 1; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 2px solid rgb(var(--cm-line-strong)); background: rgb(var(--cm-surface-soft)); transition: background var(--cm-time-panel), border-color var(--cm-time-panel); }
.lp-demo--referral[data-cm-reached~="submit"] .st-submit,
.lp-demo--referral[data-cm-reached~="assign"] .st-assign,
.lp-demo--referral[data-cm-reached~="sale"] .st-sale,
.lp-demo--referral[data-cm-reached~="approval"] .st-approval { color: rgb(var(--cm-ink)); }
.lp-demo--referral[data-cm-reached~="submit"] .st-submit .lp-step-dot,
.lp-demo--referral[data-cm-reached~="assign"] .st-assign .lp-step-dot,
.lp-demo--referral[data-cm-reached~="sale"] .st-sale .lp-step-dot { background: rgb(var(--cm-brand)); border-color: rgb(var(--cm-brand)); }
.lp-demo--referral[data-cm-reached~="approval"] .st-approval .lp-step-dot { background: rgb(var(--cm-warning-soft)); border-color: rgb(var(--lp-callback)); }
.lp-demo--referral[data-cm-reached~="assign"] .st-submit::before,
.lp-demo--referral[data-cm-reached~="sale"] .st-assign::before,
.lp-demo--referral[data-cm-reached~="approval"] .st-sale::before { background: rgb(var(--cm-brand)); }
.lp-earn { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-2); }
.lp-earn > div { padding: var(--cm-space-2) var(--cm-space-3); border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface)); }
.lp-earn small { display: block; font-size: .6875rem; color: rgb(var(--cm-ink-muted)); }
.lp-earn strong { font-size: .9375rem; font-weight: 600; }
.lp-demo--referral[data-cm-reached~="approval"] .lp-earn .s-before { display: none; }
.lp-demo--referral[data-cm-reached~="approval"] .lp-earn .s-after { display: inline; color: rgb(var(--cm-warning)); }

/* ── Demo 7 · reporting ───────────────────────────────────────────────────────────────── */
.lp-demo--report { --lp-demo-height: 32rem; }
.lp-report { padding: var(--cm-space-5); display: grid; gap: var(--cm-space-3); }
.lp-demo--report[data-cm-reached~="period"] .lp-period .p-30 { background: rgb(var(--cm-ink)); border-color: rgb(var(--cm-ink)); color: white; }
.lp-demo--report[data-cm-reached~="metrics"] .lp-kpis .s-before { display: none; }
.lp-demo--report[data-cm-reached~="metrics"] .lp-kpis .s-after { display: inline; animation: lp-arrive 500ms var(--cm-ease-out); }
.lp-chart { margin: 0; }
.lp-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.c-ghost { fill: none; stroke: rgb(var(--cm-line-strong)); stroke-width: 1.5; stroke-dasharray: 3 4; }
.c-grid path { stroke: rgb(var(--cm-line)); stroke-width: 1; }
.c-area { fill: rgb(var(--cm-brand) / .08); opacity: 0; }
.c-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.c-leads { stroke: rgb(var(--cm-brand)); }
.c-sold { stroke: rgb(var(--cm-ink)); }
.lp-demo--report[data-cm-reached~="chart"] .c-line { stroke-dashoffset: 0; transition: stroke-dashoffset var(--cm-time-chart) var(--cm-ease-out); }
.lp-demo--report[data-cm-reached~="chart"] .c-area { opacity: 1; transition: opacity 600ms 900ms; }
.lp-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-space-4); margin-top: var(--cm-space-2); font-size: .6875rem; color: rgb(var(--cm-ink-secondary)); }
.lp-chart-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.lp-chart-legend .k-leads::before, .lp-chart-legend .k-sold::before { content: ''; width: 12px; height: 2.5px; border-radius: 2px; background: rgb(var(--cm-brand)); }
.lp-chart-legend .k-sold::before { background: rgb(var(--cm-ink)); }
.lp-chart-x { margin-left: auto; color: rgb(var(--cm-ink-muted)); }
.lp-table--coach .lp-tr { grid-template-columns: 1.2fr .9fr .8fr 1.3fr; background: rgb(var(--cm-surface)); }
.lp-table--coach .lp-tr.is-flag { background: rgb(var(--cm-warning-soft)); }

/* ── Additional capabilities ──────────────────────────────────────────────────────────── */
.lp-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cm-space-10); }
.lp-more li { display: flex; gap: var(--cm-space-4); padding-block: var(--cm-space-6); border-top: 1px solid rgb(var(--cm-line)); }
.lp-more h3 { margin: 0 0 var(--cm-space-2); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.lp-more p { margin: 0; color: rgb(var(--cm-ink-secondary)); font-size: .9375rem; }
.lp-more-icon { flex-shrink: 0; font-size: 1.375rem; color: rgb(var(--cm-brand)); line-height: 1.3; }

/* ── Use cases ────────────────────────────────────────────────────────────────────────── */
.lp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-4); }
.lp-case { display: flex; flex-direction: column; gap: var(--cm-space-3); padding: var(--cm-space-8) var(--cm-space-6); background: rgb(var(--cm-surface-soft)); border-radius: var(--cm-radius-card); }
.lp-section--soft .lp-case { background: rgb(var(--cm-surface)); }
.lp-case h3 { margin: var(--cm-space-2) 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: var(--cm-tracking-heading); }
.lp-case-lead { color: rgb(var(--cm-ink-secondary)); }
.lp-case ul { list-style: none; margin: var(--cm-space-2) 0 0; padding: var(--cm-space-4) 0 0; border-top: 1px solid rgb(var(--cm-line)); display: grid; gap: var(--cm-space-3); font-size: .9375rem; }
.lp-case li { display: flex; gap: var(--cm-space-2); align-items: baseline; }
.lp-case li i { color: rgb(var(--cm-success)); flex-shrink: 0; }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────── */
.lp-faq-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--cm-space-16); align-items: start; }
.lp-faq-intro { position: sticky; top: calc(var(--cm-header-height) + var(--cm-space-8)); }
.lp-faq { border-top: 1px solid rgb(var(--cm-line)); }
.lp-faq-item { border-bottom: 1px solid rgb(var(--cm-line)); }
.lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-4); min-height: 4rem; padding-block: var(--cm-space-4); cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary:hover { color: rgb(var(--cm-link)); }
.lp-faq-caret { flex-shrink: 0; color: rgb(var(--cm-ink-muted)); transition: transform var(--cm-time-panel) var(--cm-ease-out); }
.lp-faq-item[open] .lp-faq-caret { transform: rotate(180deg); }
.lp-faq-item p { margin: 0; padding: 0 var(--cm-space-10) var(--cm-space-6) 0; color: rgb(var(--cm-ink-secondary)); max-width: var(--cm-measure); }

/* ── Book a demo ──────────────────────────────────────────────────────────────────────── */
.lp-cta { padding-block: var(--cm-section-space); }
.lp-cta-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cm-space-16); align-items: start; }
.lp-cta-copy { padding-top: var(--cm-space-6); }
.lp-cta-title { font-size: clamp(2.5rem, 4.2vw, 3.625rem); }
.lp-cta .cm-lead { color: rgb(var(--cm-white) / .92); }
.lp-cta-list { list-style: none; margin: var(--cm-space-8) 0 0; padding: 0; display: grid; gap: var(--cm-space-3); }
.lp-cta-list li { display: flex; gap: var(--cm-space-3); align-items: baseline; }
.lp-cta-list i { flex-shrink: 0; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: rgb(var(--cm-white) / .18); font-size: .875rem; }
.lp-form-card { padding: var(--cm-space-8); border-radius: var(--cm-radius-frame); background: rgb(var(--cm-surface)); color: rgb(var(--cm-ink)); box-shadow: var(--cm-shadow-frame); }
.lp-form-card :focus-visible { outline-color: rgb(var(--cm-focus)); }
.lp-form-card .cm-link { color: rgb(var(--cm-link)) !important; }
.lp-form { display: grid; gap: var(--cm-space-5); }
/* Turnstile shares a row with the consent text, so while it runs out of sight it adds no space at all. */
.lp-turnstile.is-shown { margin-bottom: var(--cm-space-4); }
.lp-noscript { margin-bottom: var(--cm-space-2); color: rgb(var(--cm-danger)); }
.lp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-4); }
.lp-span-2 { grid-column: 1 / -1; }
.lp-fld { display: grid; gap: var(--cm-space-1); min-width: 0; }
.lp-form .cm-input { min-height: var(--cm-control-large); font-size: 1rem; transition: border-color var(--cm-time-hover), box-shadow var(--cm-time-hover); }
.lp-form .cm-input:focus { outline: none; border-color: rgb(var(--cm-focus)); box-shadow: 0 0 0 3px rgb(var(--cm-focus) / .18); }
.lp-form select.cm-input { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2364748B' stroke-width='1.4'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; }
.lp-textarea { min-height: 5.5rem; resize: vertical; padding-block: var(--cm-space-3); }
.lp-optional { color: rgb(var(--cm-ink-muted)); font-weight: 400; }
.lp-err { min-height: 0; color: rgb(var(--cm-danger)); font-size: .8125rem; }
.lp-err:empty { display: none; }
.lp-fld.is-invalid .cm-input { border-color: rgb(var(--cm-danger)); box-shadow: 0 0 0 1px rgb(var(--cm-danger)); }
.lp-interests { margin: 0; padding: 0; border: 0; min-width: 0; }
.lp-interests legend { padding: 0; margin-bottom: var(--cm-space-2); font-size: var(--cm-type-ui); font-weight: 500; }
.lp-interest-grid { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); }
.lp-pill { position: relative; display: inline-flex; }
.lp-interest-grid input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lp-interest-grid span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .375rem .875rem; border: 1px solid rgb(var(--cm-line-strong)); border-radius: var(--cm-radius-pill); font-size: .8125rem; font-weight: 500; color: rgb(var(--cm-ink-secondary)); transition: background var(--cm-time-hover), border-color var(--cm-time-hover), color var(--cm-time-hover); }
.lp-interest-grid input:hover + span { border-color: rgb(var(--cm-ink-muted)); }
.lp-interest-grid input:checked + span { background: rgb(var(--cm-ink)); border-color: rgb(var(--cm-ink)); color: white; }
.lp-interest-grid input:focus-visible + span { outline: 3px solid rgb(var(--cm-focus)); outline-offset: 2px; }
.lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-consent { margin: 0; color: rgb(var(--cm-ink-muted)); font-size: .75rem; line-height: 1.55; }
.lp-submit { width: 100%; min-height: 3.25rem; font-size: 1rem; font-weight: 600; }
.lp-spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgb(var(--cm-white) / .35); border-top-color: white; border-radius: 50%; animation: lp-spin 700ms linear infinite; }
.lp-submit.is-busy .lp-spinner { display: inline-block; }
.lp-flash { margin: 0 0 var(--cm-space-5); display: flex; gap: var(--cm-space-3); align-items: flex-start; padding: var(--cm-space-4); border-radius: var(--cm-radius-control); font-size: .9375rem; }
.lp-flash i { font-size: 1.25rem; line-height: 1.2; }
.lp-flash.is-success { background: rgb(var(--cm-success-soft)); color: rgb(var(--cm-success)); }
.lp-flash.is-warning { background: rgb(var(--cm-warning-soft)); color: rgb(var(--cm-warning)); }
.lp-flash.is-error { background: rgb(var(--cm-danger-soft)); color: rgb(var(--cm-danger)); }
.lp-sent { display: grid; gap: var(--cm-space-4); justify-items: start; }
.lp-sent-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgb(var(--cm-success-soft)); color: rgb(var(--cm-success)); font-size: 1.5rem; }
.lp-sent h3 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: var(--cm-tracking-heading); }
.lp-sent p { margin: 0; color: rgb(var(--cm-ink-secondary)); }

/* ── Footer ───────────────────────────────────────────────────────────────────────────── */
.lp-footer { padding-block: var(--cm-space-16) var(--cm-space-8); border-top: 0; }
.lp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--cm-space-10); }
.lp-footer-brand { display: grid; gap: var(--cm-space-4); justify-items: start; align-content: start; max-width: 22rem; }
.lp-footer-logo { --cm-logo-height: 2rem; color: rgb(var(--cm-ink)); }
.lp-footer-col { display: grid; gap: var(--cm-space-3); align-content: start; font-size: .9375rem; }
.lp-footer-col h2 { margin-bottom: var(--cm-space-1); }
.lp-footer-col a { color: rgb(var(--cm-ink-secondary)); width: fit-content; }
.lp-footer-col a:hover { color: rgb(var(--cm-link)); text-decoration: underline; text-underline-offset: 4px; }
.lp-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cm-space-3); margin-top: var(--cm-space-12); padding-top: var(--cm-space-6); border-top: 1px solid rgb(var(--cm-line)); color: rgb(var(--cm-ink-muted)); font-size: .75rem; }
.lp-footer-base .cm-mono { font-size: .6875rem; }
.lp-noscript { padding-block: var(--cm-space-4); color: rgb(var(--cm-ink-muted)); font-size: var(--cm-type-small); }

@keyframes lp-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lp-ring { 0% { box-shadow: 0 0 0 0 rgb(var(--cm-success) / .45); } 100% { box-shadow: 0 0 0 12px rgb(var(--cm-success) / 0); } }
@keyframes lp-blink { from { opacity: .55; } to { opacity: 1; } }
@keyframes lp-halo { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes lp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ── Demo 8: video consultation ───────────────────────────────────────────────────────────
   Left pane = the rep's Video Chat panel (scene templates). Right pane = what the customer sees, one screen
   per scene: the text invite, the branded waiting page, the live call, then the rep's shared screen. */
.lp-demo--video { --lp-demo-height: 26.5rem; }
.lp-vc-screen { position: relative; flex: 1; min-height: 0; margin-top: var(--cm-space-3); border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-card); background: rgb(var(--cm-surface)); overflow: hidden; }
.lp-vc-s { position: absolute; inset: 0; display: none; flex-direction: column; padding: var(--cm-space-4); }
.lp-demo--video:not([data-cm-scene-key]) .lp-vc-s--text,
.lp-demo--video[data-cm-scene-key="invite"] .lp-vc-s--text,
.lp-demo--video[data-cm-scene-key="waiting"] .lp-vc-s--wait,
.lp-demo--video[data-cm-scene-key="live"] .lp-vc-s--live,
.lp-demo--video[data-cm-scene-key="share"] .lp-vc-s--share { display: flex; animation: lp-vc-in 450ms var(--cm-ease-out); }
@keyframes lp-vc-in { from { opacity: 0; } to { opacity: 1; } }
.lp-vc-s--text { gap: var(--cm-space-3); }
.lp-vc-thread { margin: 0; display: flex; align-items: center; gap: .375rem; padding-bottom: var(--cm-space-2); border-bottom: 1px solid rgb(var(--cm-line)); color: rgb(var(--cm-ink-secondary)); font-size: .75rem; font-weight: 600; }
.lp-vc-s--text .lp-sms { max-width: 100%; }
.lp-vc-s--text .lp-sms u { color: rgb(var(--cm-link)); text-underline-offset: 2px; word-break: break-all; }
.lp-vc-s--wait { align-items: center; justify-content: center; gap: var(--cm-space-2); text-align: center; }
.lp-vc-brand { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: var(--cm-space-2); font-size: .8125rem; font-weight: 600; }
.lp-vc-brand b { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: rgb(var(--cm-brand)); color: white; font-size: .625rem; letter-spacing: .02em; }
.lp-vc-s--wait strong { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.lp-vc-s--wait small { max-width: 16rem; color: rgb(var(--cm-ink-muted)); font-size: .75rem; line-height: 1.5; }
.lp-vc-waiting { display: flex; align-items: center; gap: .625rem; margin-top: var(--cm-space-3); padding: .5rem .75rem; border-radius: var(--cm-radius-control); background: rgb(var(--cm-surface-soft)); color: rgb(var(--cm-ink-secondary)); font-size: .6875rem; line-height: 1.45; text-align: left; }
.lp-vc-dots { display: inline-flex; flex-shrink: 0; gap: 3px; }
.lp-vc-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--cm-brand)); animation: lp-vc-dot 1.2s ease-in-out infinite; }
.lp-vc-dots i:nth-child(2) { animation-delay: .15s; }
.lp-vc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lp-vc-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* Camera tiles are drawn, not filmed: a dark stage, the person's initials, and a speaking ring. */
.lp-vc-dark { background: radial-gradient(120% 90% at 30% 15%, rgb(var(--cm-slate-700)), rgb(var(--cm-slate-900))); color: white; }
.lp-vc-s.lp-vc-dark { align-items: center; justify-content: center; }
.lp-vc-face { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgb(255 255 255 / .12); color: white; font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.lp-vc-face--lg { width: 5rem; height: 5rem; font-size: 1.375rem; }
.lp-demo--video.is-running .lp-vc-face--lg, .lp-demo--video.is-running .lp-vc-tile .lp-vc-face { animation: lp-vc-talk 1.6s ease-out infinite; }
@keyframes lp-vc-talk { from { box-shadow: 0 0 0 0 rgb(74 222 128 / .5); } to { box-shadow: 0 0 0 12px rgb(74 222 128 / 0); } }
.lp-vc-name { position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .5rem; border-radius: 6px; background: rgb(0 0 0 / .45); font-size: .6875rem; font-weight: 500; }
.lp-vc-chip { position: absolute; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: var(--cm-radius-pill); background: rgb(0 0 0 / .45); color: white; font-size: .625rem; font-weight: 500; }
.lp-vc-chip--live .cm-dot { color: rgb(74 222 128); }
.lp-vc-chip--time { left: auto; right: .75rem; font-variant-numeric: tabular-nums; }
.lp-vc-self, .lp-vc-pip { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 4.5rem; height: 3.25rem; border: 2px solid rgb(255 255 255 / .6); border-radius: 8px; background: rgb(var(--cm-slate-500)); font-size: .625rem; font-weight: 600; }
.lp-vc-pip { background: rgb(var(--cm-slate-700)); }
.lp-vc-pip .lp-vc-face { width: 1.75rem; height: 1.75rem; font-size: .5625rem; }
.lp-vc-doc { width: min(82%, 15rem); padding: var(--cm-space-4); border-radius: 10px; background: white; color: rgb(var(--cm-ink)); box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 12px 28px rgb(0 0 0 / .35); }
.lp-vc-doc strong { display: block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; }
.lp-vc-doc dl { margin: 0; display: grid; gap: .375rem; }
.lp-vc-doc dl div { display: flex; justify-content: space-between; gap: .75rem; padding-top: .375rem; border-top: 1px solid rgb(var(--cm-line)); font-size: .6875rem; }
.lp-vc-doc dt { color: rgb(var(--cm-ink-muted)); }
.lp-vc-doc dd { margin: 0; font-weight: 600; }
/* Rep side */
.lp-vc-tile { position: relative; display: grid; place-items: center; height: 10rem; border-radius: var(--cm-radius-card); }
.lp-vc-tile--sm { height: 7rem; }
.lp-vc-keys .is-on { background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); }
.lp-vc-keys .is-on i { color: rgb(var(--cm-link)); }
.lp-vc-keys .is-end { background: rgb(var(--cm-danger-soft)); color: rgb(var(--cm-danger)); }
.lp-vc-keys .is-end i { color: rgb(var(--cm-danger)); transform: rotate(135deg); }
.lp-vc-knock { border-color: rgb(var(--cm-brand) / .35); background: rgb(var(--cm-brand-soft) / .5); }
.lp-vc-acts { display: flex; gap: var(--cm-space-2); }

/* ── Responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .lp-benefits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-footer-brand { grid-column: 1 / -1; }
  /* Below 1200px the intro heading gets the full row, and the desktop line breaks give way to balanced
     wrapping so no heading ends on one word. */
  .lp .cm-section-intro { display: grid; gap: var(--cm-space-4); }
  .lp :is(.cm-heading, .lp-cta-title) br { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .m-label text { font-size: 11px; }   /* the map column is narrowest here; keeps street names ≥ 9px */
}
@media (max-width: 1023px) {
  /* Dropdown menu: the header stays put and the menu slides down from its bottom edge. The header's
     backdrop-filter makes it the containing block for this fixed pane, so top: 100% is "just under the
     header". The reveal is a clip that opens downward (plus a small drop of the contents), so the menu reads
     as coming out of the header rather than appearing on top of it. */
  .lp .cm-nav-pane { top: 100%; bottom: auto; height: auto; max-height: calc(100dvh - var(--cm-header-height)); padding: var(--cm-space-2) var(--cm-gutter) var(--cm-space-6); border-radius: 0 0 20px 20px; box-shadow: 0 2px 6px rgb(var(--cm-ink) / .06), 0 18px 40px rgb(var(--cm-ink) / .16); opacity: 1; transform: none; clip-path: inset(0 -48px 100% -48px); transition: clip-path var(--cm-time-mobile) var(--cm-ease-out), visibility 0s var(--cm-time-mobile); overscroll-behavior: contain; }
  .lp .cm-nav-pane.is-mobile-open { clip-path: inset(0 -48px -64px -48px); transform: none; transition: clip-path 420ms var(--cm-ease-out), visibility 0s; }
  .lp .cm-nav-pane > * { transform: translateY(-10px); opacity: 0; transition: transform var(--cm-time-mobile) var(--cm-ease-out), opacity var(--cm-time-fade); }
  .lp .cm-nav-pane.is-mobile-open > * { transform: none; opacity: 1; transition: transform 420ms var(--cm-ease-out) 60ms, opacity 300ms ease 60ms; }
  .lp .cm-header.is-nav-open { background: rgb(var(--cm-surface)); }
  /* The page behind the open menu: dimmed and blurred; a tap on it closes the menu. It sits outside the
     header (a backdrop-filter nested inside the header's own would only see the header), just under it. */
  .lp-nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--cm-z-header) - 1); background: rgb(var(--cm-slate-900) / .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity var(--cm-time-mobile) var(--cm-ease-out), visibility 0s var(--cm-time-mobile); }
  .lp-nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--cm-time-mobile) var(--cm-ease-out), visibility 0s; }
  /* Sheet rows share the cards' 12px inset: labels line up with the card text, and an expanded (shaded) row
     keeps room around its label and caret instead of running them into its edges. */
  .lp .cm-nav-trigger, .lp .cm-nav .cm-nav-link, .lp .lp-nav-actions .lp-signin { padding-inline: var(--cm-space-3); }
  .lp .cm-nav-trigger .cm-caret { width: 12px; height: 12px; }
  .lp-nav-actions { flex-direction: column; align-items: stretch; gap: var(--cm-space-3); padding-top: var(--cm-space-4); flex-shrink: 0; }
  .lp-nav-actions .cm-btn { min-height: var(--cm-control-large); }
  .lp-feature--flip { grid-template-columns: 1fr; }
  .lp-feature--flip > :first-child { order: 0; }
  .lp-benefits, .lp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-faq-layout, .lp-cta-layout { grid-template-columns: 1fr; gap: var(--cm-space-10); }
  .lp-faq-intro { position: static; }
  .lp-cta-copy { padding-top: 0; }
}
/* Touch screens keep :hover after a tap, which left a collapsed row shaded. Only the open row stays shaded. */
@media (max-width: 1023px) and (hover: none) {
  .lp .cm-nav-trigger:not([aria-expanded="true"]):hover, .lp .cm-nav .cm-nav-link:hover, .lp .lp-menu-btn:hover { background: transparent; }
}
@media (max-width: 639px) {
  .lp { --lp-demo-height: auto; }
  /* Phone type scale: one step below the shared clamps so each section reads tighter on a small screen.
     Form fields are left at 16px, so iOS does not zoom in when one takes focus. */
  .lp { --cm-type-display: 2.25rem; --cm-type-section: 1.625rem; --cm-type-lead: .9375rem; --cm-type-title: 1.125rem; }
  .lp .lp-cta-title { font-size: 2.125rem; }
  .lp .lp-sub-title { font-size: 1.375rem; }
  .lp .cm-feature-list { gap: var(--cm-space-3); }
  .lp .cm-feature-list li, .lp-cta-list li, .lp-case-lead, .lp-faq-item p { font-size: .9375rem; line-height: 1.6; }
  .lp-benefit p, .lp-more p, .lp-cases li, .lp-footer-col { font-size: .875rem; }
  .lp-more h3, .lp-faq-item summary { font-size: 1rem; }
  .lp-faq-item summary { min-height: 3.5rem; }
  .lp .lp-btn-lg { font-size: .9375rem; }
  /* Stacked hero actions share one width instead of hugging their labels. */
  .lp-hero .cm-cluster { flex-direction: column; align-items: stretch; width: min(100%, 17.5rem); margin-inline: auto; }
  .lp-hero-demo { margin-top: var(--cm-space-10); }
  .lp-benefits, .lp-benefits--4, .lp-cases, .lp-more { grid-template-columns: 1fr; }
  .lp-stage-split, .lp-stage-split--wide { grid-template-columns: 1fr; }
  .lp-pane { padding: var(--cm-space-4); }
  .lp-pane--soft { border-left: 0; border-top: 1px solid rgb(var(--cm-line)); }
  .lp-demo .cm-demo-stage { min-height: 0; }
  /* The rail is hidden at this width (clozr-marketing.css), so the main view takes the whole stage. */
  .lp-demo--workflow .cm-demo-stage { grid-template-columns: minmax(0, 1fr); }
  /* Pane minimums = the tallest scene measured at 390px, so a scene change never moves the page. */
  .lp-demo--workflow .cm-demo-main { min-height: 26rem; }
  .lp-demo--workflow .lp-two > :nth-child(2) { display: none; }   /* the dialer keeps the script; notes would set the height for every scene */
  .lp-demo--routing .lp-pane:first-child { min-height: 21rem; }
  .lp-demo--referral .lp-pane:first-child { min-height: 18rem; }
  .lp-demo--calendar .lp-pane:first-child { min-height: 24rem; }
  .lp-demo--calendar .lp-cal { min-height: 29rem; }   /* rows (~20rem) + room for the two-row reminder toast */
  .lp-toast { flex-wrap: wrap; row-gap: var(--cm-space-2); left: var(--cm-space-3); right: var(--cm-space-3); bottom: var(--cm-space-3); }
  .lp-toast > div { flex: 1 1 calc(100% - 3rem); }
  .lp-toast-acts { width: 100%; justify-content: flex-end; }
  .lp-demo--pay .lp-pane--soft { min-height: 18rem; }
  .lp-demo--video .lp-pane:first-child { min-height: 19.5rem; }   /* tallest rep scene (live) at 390px */
  .lp-demo--video .lp-vc-screen { flex: none; height: 16rem; }
  .lp-demo--report .lp-pane--soft { min-height: 12.5rem; }
  .lp-map-panel { position: static; width: auto; border-radius: 0; box-shadow: none; border-top: 1px solid rgb(var(--cm-line)); min-height: 17rem; }
  .lp-map-layers { display: none; }
  .lp-answers--3 { grid-template-columns: 1fr 1fr; }
  .lp-answers--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* the odd one out takes the full row */
  .lp-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-kpis:not(.lp-kpis--4) > div { padding: var(--cm-space-3) .625rem; }
  .lp-kpis:not(.lp-kpis--4) strong { font-size: min(.9375rem, 3.6vw); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .lp-call-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-two { grid-template-columns: 1fr; }
  .lp-tr { grid-template-columns: 1fr 1fr .9fr; }
  .lp-tr > span:nth-child(3):not(:last-child) { display: none; }
  .lp-bar { grid-template-columns: minmax(0, 7.5rem) 1fr auto; }
  .lp-form-card { padding: var(--cm-space-4); border-radius: var(--cm-radius-card); }
  .lp-form-grid { grid-template-columns: 1fr; gap: var(--cm-space-3); }
  /* Compact phone form: shorter fields and tighter rows. Text stays 16px (smaller makes iOS zoom in on focus)
     and every control keeps a 40px+ touch target. */
  .lp-form { gap: var(--cm-space-4); }
  .lp-fld { gap: 2px; font-size: .8125rem; }
  .lp-form .cm-input { min-height: 2.625rem; padding: .375rem .75rem; }
  .lp-form textarea.cm-input { min-height: 4.5rem; height: 4.5rem; }
  .lp-interests legend { margin-bottom: var(--cm-space-1); font-size: .8125rem; }
  .lp-interest-grid { gap: 6px; }
  .lp-interest-grid span { min-height: 2.25rem; padding: .25rem .75rem; font-size: .75rem; }
  .lp-submit { min-height: 3rem; }
  .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Compact footer: Platform runs down the left, Resources and Legal stack on the right, and each link is a
     36px row with no extra gap, so the targets stay comfortable without the column spreading out. */
  .lp-footer { padding-top: var(--cm-space-10); padding-bottom: var(--cm-space-6); }
  .lp-footer-grid { gap: var(--cm-space-6) var(--cm-space-4); }
  .lp-footer-grid > .lp-footer-col:nth-child(2) { grid-row: span 2; }
  .lp-footer-col { gap: 0; }
  .lp-footer-col h2 { margin-bottom: var(--cm-space-1); }
  .lp-footer-col a { display: flex; align-items: center; min-height: 2.25rem; }
  .lp-footer-base { flex-direction: column; gap: var(--cm-space-1); margin-top: var(--cm-space-8); padding-top: var(--cm-space-4); }
  .lp-faq-item p { padding-right: 0; }
  /* The map drawing scales to about half size here; keep its labels near 10px on screen. */
  .m-label text { font-size: 18px; stroke-width: 5px; }
  .m-label .m-label-water { display: none; }   /* the legend sits on the lake at this size */
  .lp-mega-links { display: none; }
  .lp-demo .cm-demo-controls { flex-wrap: nowrap; }
  .lp-demo .cm-demo-step { flex: 1 1 0; min-width: 0; padding: 0 var(--cm-space-2); }
  .lp-demo .cm-demo-step .lp-step-num { font-size: .75rem; }
  .lp-demo .cm-demo-step .lp-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lp-demo .cm-demo-pause { flex: 0 0 3.25rem; margin-left: 0; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-row.is-fresh, .lp-ring, .lp-state .s-ring, .lp-vc-dots i, .lp-vc-face { animation: none !important; }
}