/*
 * Marketing landing page.
 *
 * Loaded *after* app.css and only by landing.html: rather than restating
 * buttons and the language picker, this sheet re-points the tokens those
 * components are already built on. No other page links it.
 *
 * Theme: light, and only light. The page never reads the dashboard's theme
 * cookie or the system setting: whoever arrives sees the same page. The
 * neutrals are true greys (no violet in the greys, the shadows or the ground),
 * so the violet is the only colour on it.
 *
 * One accent, the violet of the brand mark, used flat and sparingly: buttons,
 * the second line of each two-line headline, the shopper's chat bubbles.
 * Tiles are grey, the closing band is near-black, the ground is plain; there
 * is no backdrop light. The product previews are the visuals.
 *
 * Motion (see Motion and Hero stage): the headline lines rise; the preview
 * swings in, in 3D, with product pieces dropping in around it and following
 * the pointer at different depths; the demo exchange plays in order. Below
 * the fold, things arrive as they scroll in, and each one shows what it is
 * about: the research figures count up under a bar drawn to their share,
 * the understood words appear one by one, product cards slide in, the chart
 * grows, the arrows between the four steps draw themselves, the price panel
 * and closing band rise from a step back. Text stays calm. The loops
 * (preview float, pieces bobbing, closing highlight) are slow, and every
 * bit of it is still under reduced motion.
 *
 * Corner radii, and nothing else: panels 16px, tiles inside panels 12px,
 * buttons 10px, pills (badges, tabs, the URL bar, inputs) fully round. Chat
 * bubbles keep the widget's own shape so the preview reads as the widget.
 *
 * Type: the system stack app.css already uses. On Windows 11 the variable cut
 * of the same Segoe UI family goes first, so headings get its display optical
 * size; elsewhere nothing changes. No web fonts: the Content-Security-Policy
 * serves fonts from 'self' only and this app ships none.
 */

:root {
  color-scheme: light;

  /* --- app.css tokens, re-pointed ---------------------------------------- */
  --canvas: #fcfcfc;
  --surface: #ffffff;
  --muted: #f3f3f5;

  --border: #e7e7ea;
  --border-strong: #d6d6db;

  --ink: #0b0b0e;
  --ink-soft: #4b4b53;
  /* 5.3:1 on --canvas and 5.1:1 on --surface-2: it is only ever set small. */
  --ink-faint: #62626b;

  /* The mark's violet, deepened and turned a few degrees toward blue (hue
     256 rather than the mark's 263). White text on it 7.7:1, it on the page
     7.2:1. */
  --accent: #5828d9;
  --accent-hover: #4a21b6;
  --accent-soft: #f1f1f3;

  --success: #047857;

  --radius: 16px;
  --font: "Segoe UI Variable Text", "Segoe UI Variable", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- landing-only ------------------------------------------------------ */
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --surface-2: #f5f5f6;
  --surface-3: #ececef;
  --accent-ink: #0b0b0e;
  --on-accent: #ffffff;
  --radius-tile: 12px;
  --radius-sm: 10px;
  /* Neutral: a violet shadow on a grey page is what made it look dirty. */
  --shadow-sm: 0 1px 2px rgba(11, 11, 14, 0.06);
  --shadow-lg: 0 28px 64px -34px rgba(11, 11, 14, 0.3);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  --wrap: 1200px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* `clip`, not `hidden`: `hidden` makes the root a scroll container and the
     sticky nav would start scrolling with the page. */
  overflow-x: clip;
}

body.lp {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  overflow-x: clip;
}

.lp ::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Shell ---------------------------------------------------------------- */

.lp-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.lp-section {
  /* These also carry .lp-wrap, which owns the side padding. */
  padding-block: 112px 0;
}

.lp-head {
  max-width: 62ch;
}

.lp-h2 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lp-lede {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Navigation ----------------------------------------------------------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: var(--canvas);
}

@supports (animation-timeline: scroll()) {
  /* The bar gains its rule once the page has moved, not while it sits flush
     with the hero. */
  .lp-nav {
    animation-name: lp-nav-rule;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 80px;
  }

  @keyframes lp-nav-rule {
    to {
      border-bottom-color: var(--border);
    }
  }
}

.lp-nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lp-nav-links a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.lp-nav-links a:hover {
  color: var(--ink);
  background: var(--muted);
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* --- Buttons -------------------------------------------------------------- */

.lp .btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), transform 0.18s var(--ease);
}

.lp .btn:active {
  transform: translateY(1px);
  transition-duration: 0.06s;
}

/* The secondary action: a hairline and no fill, plainly the quieter of the
   pair without vanishing into the page. */
.lp .btn-quiet {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
}

.lp .btn-quiet:hover {
  background: var(--muted);
}

.lp .btn-ghost {
  background: transparent;
  color: var(--ink-soft);
}

.lp .btn-ghost:hover {
  background: var(--muted);
  color: var(--ink);
}

/* The one button that sits on the accent itself. */
.lp .btn-invert {
  background: var(--on-accent);
  color: var(--ink);
}

.lp .btn-invert:hover {
  background: #ececef;
}

.lp .btn-lg {
  height: 48px;
  padding: 0 22px;
  font-size: 0.9375rem;
}

/* app.css's .btn-sm is 30px: right for an admin table, cramped in this bar. */
.lp-nav-actions .btn {
  height: 36px;
  padding: 0 14px;
  font-size: 0.875rem;
}

/* --- Phone and tablet menu ------------------------------------------------ */

/*
 * Below 900px the section links leave the bar for a sheet that drops from
 * under it. The button is 40px square (a thumb target) and swaps its three
 * lines for a cross while the sheet is open.
 */
.lp-menu-btn {
  display: none;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.lp-menu-btn:hover {
  background: var(--muted);
}

.lp-menu-btn:active {
  transform: scale(0.96);
}

.lp-menu-btn:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.lp-menu-ico {
  grid-area: 1 / 1;
  display: inline-flex;
  transition: opacity 0.18s var(--ease), transform 0.25s var(--ease);
}

.lp-menu-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.lp-nav:has(.lp-menu:popover-open) .lp-menu-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.lp-nav:has(.lp-menu:popover-open) .lp-menu-close {
  opacity: 1;
  transform: none;
}

/* The sheet: full width under the bar, the page dimmed behind it. */
.lp-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  width: auto;
  max-height: calc(100dvh - var(--nav-h));
  margin: 0;
  padding: 8px 16px 20px;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--canvas);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

/* Under the bar only, so the bar and its close button stay undimmed. A
   literal, not var(--nav-h): older engines do not pass custom properties to
   ::backdrop. */
.lp-menu::backdrop {
  top: 64px;
  background: rgba(11, 11, 14, 0.28);
}

.lp-menu-links {
  display: grid;
}

.lp-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.lp-menu-links a svg {
  color: var(--ink-soft);
  transition: transform 0.2s var(--ease);
}

.lp-menu-links a:hover svg,
.lp-menu-links a:focus-visible svg {
  transform: translateX(3px);
}

.lp-menu-links a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.lp-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}

.lp-menu-login {
  height: 44px;
  flex: 1;
  max-width: 220px;
}

/* The sheet slides down and the links follow a beat apart. Entry only:
   closing is instant, which is what a tap on "close" should feel like. */
@media (prefers-reduced-motion: no-preference) {
  .lp-menu:popover-open {
    animation: lp-menu-drop 0.32s var(--ease) both;
  }

  .lp-menu:popover-open .lp-menu-links a,
  .lp-menu:popover-open .lp-menu-foot {
    animation: lp-menu-item 0.4s var(--ease) both;
  }

  .lp-menu:popover-open .lp-menu-links a:nth-child(2) { animation-delay: 0.04s; }
  .lp-menu:popover-open .lp-menu-links a:nth-child(3) { animation-delay: 0.08s; }
  .lp-menu:popover-open .lp-menu-foot { animation-delay: 0.12s; }
}

@keyframes lp-menu-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

@keyframes lp-menu-item {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.lp .btn:focus-visible,
.lp-nav-links a:focus-visible,
.lp-brand:focus-visible,
.lp-foot a:focus-visible,
.lp-stat-src a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.lp .btn-invert:focus-visible {
  outline-color: var(--on-accent);
}

.lp .arrow {
  display: inline-flex;
  transition: transform 0.22s var(--ease);
}

.lp .arrow svg {
  width: 1.05em;
  height: 1.05em;
}

.lp .btn:hover .arrow {
  transform: translateX(3px);
}

/* --- Hero ----------------------------------------------------------------- */

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 64px;
  padding-block: 64px 24px;
}

.lp-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 3.9vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.032em;
}

/* The product on one line, the ten minutes on the next, at every width.
   Each line is its own clipped row, so it can rise out of it on load; the
   padding (taken back by the margin) keeps descenders clear of the clip. */
.lp-h1 span {
  display: block;
}

.lp-line {
  overflow: clip;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.lp-h1-accent {
  color: var(--accent);
}

.lp-hero .lp-lede {
  margin-top: 24px;
  max-width: 42ch;
  font-size: 1.1875rem;
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* --- Chat preview --------------------------------------------------------- */

.lp-demo {
  min-width: 0;
  width: 100%;
}

/* --- Hero stage ------------------------------------------------------------ */

/*
 * The preview in 3D. --rx / --ry are the stage's lean: a small resting angle
 * here, steered toward the pointer by static/landing.js. preserve-3d keeps the
 * floating pieces in the stage's space, so each one's translateZ is its depth
 * and the tilt moves the near ones further: parallax from one transform.
 *
 * Every piece moves on its own property so nothing overrides anything:
 * `transform` is the depth (and the window's entrance), `translate` the float,
 * `scale` the pop-in.
 */
.lp-stage {
  /* Rests square-on and leans up to 6/8 degrees with a long perspective:
     the floating pieces drift clearly, the window stays a rectangle. The
     long transition is the slow settle back once the pointer leaves. */
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(2600px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1.8s var(--ease);
}

.lp-stage.is-tracking {
  transition-duration: 0.25s;
}

.lp-stage .cw {
  box-shadow: 0 40px 80px -36px rgba(11, 11, 14, 0.42), 0 2px 6px rgba(11, 11, 14, 0.06);
}

.lp-chip {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
  box-shadow: 0 22px 44px -18px rgba(11, 11, 14, 0.38), 0 1px 2px rgba(11, 11, 14, 0.08);
  pointer-events: none;
}

.lp-chip svg {
  width: 22px;
  height: 22px;
}

.lp-chip-bolt {
  top: 56px;
  left: -38px;
  width: 58px;
  height: 58px;
  background: var(--accent);
  color: #fff;
  transform: translateZ(90px);
}

.lp-chip-always {
  /* Level with the window's header, whose right side is empty: lower down it
     sat on the shopper's bubble, which is right-aligned too. */
  top: 84px;
  right: -58px;
  display: flex;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transform: translateZ(120px);
}

.lp-chip-always svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  background: var(--success);
  color: #fff;
}

.lp-chip-cart {
  right: 34px;
  bottom: -44px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-ink);
  transform: translateZ(70px);
}

.lp-chip-product {
  /* Hangs below the window, overlapping only the composer's bottom edge, so
     the input's placeholder stays readable. */
  left: -76px;
  bottom: -72px;
  display: flex;
  width: 236px;
  background: var(--surface);
  transform: translateZ(150px);
}

.lp-chip-product .cw-thumb {
  width: 44px;
  height: 44px;
}

.lp-chip-product .cw-product-name,
.lp-chip-product .cw-product-price {
  display: block;
}

.lp-demo-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.lp-demo-pick legend {
  float: left;
  margin-right: 6px;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.lp-demo-pick label {
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.lp-demo-pick label:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.lp-demo-pick input:checked + label {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}

.lp-demo-pick input:focus-visible + label {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.cw {
  /* A <figure>: its UA margin would inset the whole window. */
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cw-chrome {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.cw-url {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.cw-url svg {
  width: 11px;
  height: 11px;
  flex: none;
}

.cw-url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.cw-avatar {
  display: block;
  flex: none;
}

.cw-who {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.cw-name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one status dot on the page, and it says something: the assistant is
   answering right now. */
.cw-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.cw-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* All three exchanges share one cell, so the window is always as tall as the
   longest and switching questions never moves the page. */
.cw-body {
  display: grid;
  /* A 0 minimum, or the track takes the widest exchange's longest line and
     the bubbles run out of the window on a phone. */
  grid-template-columns: minmax(0, 1fr);
  padding: 20px 18px 22px;
}

.cw-conv {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  visibility: hidden;
}

.lp-demo:has(#lpq-product:checked) .cw-conv-product,
.lp-demo:has(#lpq-delivery:checked) .cw-conv-delivery,
.lp-demo:has(#lpq-returns:checked) .cw-conv-returns {
  visibility: visible;
}

@supports not selector(:has(*)) {
  .cw-conv-product {
    visibility: visible;
  }

  .lp-demo-pick {
    display: none;
  }
}

.cw-turn {
  max-width: 88%;
}

.cw-turn.from-customer {
  align-self: flex-end;
}

.cw-bubble {
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.55;
}

.from-customer .cw-bubble {
  border-bottom-right-radius: 4px;
  background: var(--accent);
  color: #fff;
}

.from-assistant .cw-bubble {
  border-bottom-left-radius: 4px;
  background: var(--surface-3);
  color: var(--ink);
}

/* The widget's pending bubble and the answer that replaces it, stacked. */
.cw-reply {
  display: grid;
}

.cw-reply > * {
  grid-area: 1 / 1;
}

.cw-thinking {
  align-self: start;
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--surface-3);
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0;
}

/* The product card an answer carries: thumbnail, name, price, one way on. */
.cw-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-tile);
  background: var(--surface-2);
}

.cw-conv .cw-product {
  max-width: 88%;
}

.cw-thumb {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
  background: var(--surface-3);
}

.cw-thumb svg {
  width: 30px;
  height: 30px;
  color: var(--ink-soft);
}

.cw-product-meta {
  min-width: 0;
  flex: 1;
  line-height: 1.4;
}

.cw-product-name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-product-sub {
  font-size: 0.75rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-product-price {
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.cw-product-cta {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.cw-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

.cw-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.cw-send {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
}

.cw-send svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* --- Research figures ------------------------------------------------------ */

.lp-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

/* The bar is the figure: as wide as its share of the column, with no track
   behind it, so the four can be compared before a number is read. */
.lp-stat::before {
  content: "";
  display: block;
  width: calc(var(--share) * 1%);
  height: 3px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
}

.lp-stat-text {
  margin: 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.lp-stat-num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.8vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lp-stat-pct {
  margin-left: 0.06em;
  font-size: 0.56em;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.lp-stat-src {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.lp-stat-src a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: color 0.16s var(--ease), text-decoration-color 0.16s var(--ease);
}

.lp-stat-src a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* --- What it can do (bento) ----------------------------------------------- */

/*
 * Twelve columns, four rows:
 *   ask (12): its text | the exchange
 *   answers (5)        | products (7)
 *   stats (7)          | look (5)
 *   install (12): icon | its text | the shop systems
 */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}

.lp-cell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  /* `translate`, not `transform`: the scroll reveal animates transform and
     would override a hover set there. */
  transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

@media (hover: hover) {
  .lp-cell:hover {
    translate: 0 -4px;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
  }
}

.lp-cell-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-cell-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lp-cell-copy p {
  margin: 0;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.lp-cell-ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
  background: var(--ink);
  color: #fff;
}

.lp-cell-ico svg {
  width: 21px;
  height: 21px;
}

/* The lead cell, the width of the page: a whole sentence goes in, what the
   assistant took from it is set out, and the answer follows. */
.lp-cell-ask {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 32px 64px;
  padding: 40px;
  background: var(--surface-2);
}

.lp-cell-ask .lp-cell-copy h3 {
  font-size: 1.625rem;
  line-height: 1.18;
  letter-spacing: -0.022em;
}

.lp-cell-ask .lp-cell-copy p {
  font-size: 1rem;
}

.lp-ask {
  display: grid;
  gap: 12px;
}

.lp-ask-q {
  justify-self: end;
  max-width: 32ch;
  padding: 13px 17px;
  border-bottom-right-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
}

.lp-ask-read {
  justify-self: start;
  max-width: 100%;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.lp-ask-a {
  justify-self: start;
  max-width: 34ch;
  border-bottom-left-radius: 4px;
  background: var(--surface-3);
  color: var(--ink);
}

.lp-ask-label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-tags li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.lp-tags svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  stroke-width: 2.4;
}

.lp-cell-answers,
.lp-cell-look {
  grid-column: span 5;
}

.lp-cell-products {
  grid-column: span 7;
}

/* Two answers' worth of product cards, side by side and a step apart. */
.lp-cell-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: auto;
}

.lp-cell-demo .cw-product {
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.lp-cell-demo .cw-product:nth-child(2) {
  margin-top: 22px;
}

/* The questions, as the tappable suggestions the widget opens with. */
.lp-qs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.lp-qs li {
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
}

/* The Statistics page in small: three of its figures over its bar chart,
   the newest three bars in the full accent as they are there. */
.lp-cell-stats {
  grid-column: span 7;
}

.lp-mini {
  margin-top: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--surface);
  overflow: hidden;
}

.lp-mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--border);
  background: var(--border);
}

.lp-mini-kpis div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
}

.lp-mini-kpis span {
  font-size: 0.75rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-mini-kpis b {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 104px;
  padding: 16px 16px 0;
}

.lp-mini-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  transform-origin: center bottom;
}

.lp-mini-bars i:nth-last-child(-n + 3) {
  background: var(--accent);
}

.lp-mini-note {
  margin: 0;
  padding: 9px 16px 11px;
  border-top: 1px solid var(--border-strong);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/*
 * The Widget page's brand colour, to try. --brand is the chosen swatch; the
 * shopper's bubble and the chat button wear it, as they do in the widget.
 */
.lp-cell-look {
  background: var(--surface-2);
}

.lp-look {
  --brand: #5828d9;
  min-width: 0;
  margin: auto 0 0;
  padding: 0;
  border: 0;
}

.lp-look:has(#lpc-indigo:checked) { --brand: #4f46e5; }
.lp-look:has(#lpc-blue:checked) { --brand: #2563eb; }
.lp-look:has(#lpc-teal:checked) { --brand: #0f766e; }
.lp-look:has(#lpc-green:checked) { --brand: #15803d; }
.lp-look:has(#lpc-orange:checked) { --brand: #c2410c; }
.lp-look:has(#lpc-red:checked) { --brand: #be123c; }
.lp-look:has(#lpc-graphite:checked) { --brand: #1f2937; }

.lp-look-preview {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--surface);
}

.lp-look-chat {
  flex: 1;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.lp-look-a {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--surface-3);
  color: var(--ink);
}

.lp-look-q {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: var(--brand);
  color: #fff;
  transition: background-color 0.3s var(--ease);
}

.lp-look-launcher {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(11, 11, 14, 0.55);
  transition: background-color 0.3s var(--ease);
}

.lp-look-launcher svg {
  width: 22px;
  height: 22px;
}

/* One row at every width: the eight shrink a little on a narrow phone
   rather than leaving the last one on a line of its own. */
.lp-swatches {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

/* A ring in the swatch's own colour marks the chosen one; the gap between
   the two is the tile showing through. */
.lp-swatches label {
  flex: 0 1 30px;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 3px var(--surface-2);
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), scale 0.2s var(--ease);
}

.lp-swatches label:hover {
  scale: 1.08;
}

.lp-swatches label:active {
  scale: 0.94;
}

.lp-swatches input:checked + label {
  box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--swatch);
}

.lp-swatches input:focus-visible + label {
  outline: 2px solid var(--accent-ink);
  outline-offset: 6px;
}

/* The last cell runs the full width, in two rows: where the chat can be
   installed, then what the chatbot learns from each source. */
.lp-cell-install {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.lp-cell-install .lp-cell-copy {
  gap: 12px;
}

.lp-cell-install .lp-cell-copy h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lp-cell-install .lp-cell-copy > p {
  font-size: 1rem;
  max-width: none;
}

.lp-connect {
  min-width: 0;
  padding: 22px 24px 20px;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
}

.lp-connect h4 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Sources down the side, what each one brings across the top. The name
   column takes what the four narrow ones leave. */
.lp-src {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

/* The app's own tables rule every cell and shout their headings (app.css);
   this one draws its lines itself. */
.lp-src th,
.lp-src td {
  border: 0;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

.lp-src thead th {
  width: clamp(5.25rem, 12vw, 9.5rem);
  padding: 0 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-soft);
  vertical-align: bottom;
}

.lp-src thead th:first-child {
  width: auto;
}

/* The two kinds of source: the first can be asked for more than its list. */
.lp-src-group th {
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  color: var(--ink-faint);
}

.lp-src tbody:first-of-type .lp-src-group th {
  padding-top: 0;
}

.lp-src tbody th[scope="row"] {
  padding: 10px 12px 10px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
}

.lp-src td {
  padding: 10px 4px;
  text-align: center;
}

.lp-src tbody .lp-src-group th {
  border-bottom: 1px solid var(--border-strong);
}

.lp-src tbody tr + tr:not(:nth-child(2)) > * {
  border-top: 1px solid var(--border);
}

/* Three marks, told apart by shape as well as colour: a tick, a ring for
   "when the list has it", a short bar for "not from here". */
.lp-mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.lp-mark svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  stroke-width: 2.4;
}

.lp-mark-maybe::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  opacity: 0.55;
}

.lp-mark-no::before {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-faint);
}

.lp-src-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-strong);
  list-style: none;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.lp-src-key li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-src-note {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* Everything the chat installs into, as plain names, all alike. */
.lp-engines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.lp-engines li {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* --- What changes for the shop --------------------------------------------- */

/* The heading holds the left column while the four outcomes fill the right:
   no boxes, the space between them does the grouping. */
.lp-gains {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  gap: 64px;
}

.lp-gains-head {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}

.lp-gain-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-gain-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
  background: var(--surface-3);
  color: var(--accent-ink);
}

.lp-gain-ico svg {
  width: 21px;
  height: 21px;
}

.lp-gain h3 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lp-gain p {
  margin: 8px 0 0;
  max-width: 36ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- How it works --------------------------------------------------------- */

/* One tinted panel, so the four steps read as a single diagram. */
.lp-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  margin: 48px 0 0;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  list-style: none;
}

.lp-flow-step {
  position: relative;
  padding-top: 72px;
}

/* The arrow from one marker to the next, a rule and its head: the sequence,
   drawn once. It stops short of the next marker. */
.lp-flow-step::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 60px;
  right: -24px;
  height: 2px;
  border-radius: 999px;
  background: var(--border-strong);
}

.lp-flow-step::after {
  content: "";
  position: absolute;
  top: 19.5px;
  right: -24px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--border-strong);
  border-right: 2px solid var(--border-strong);
  rotate: 45deg;
}

.lp-flow-step:last-child::before,
.lp-flow-step:last-child::after {
  display: none;
}

.lp-flow-ico {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--accent-ink);
}

/* Where it all leads is the one marker in the accent. */
.lp-flow-step:last-child .lp-flow-ico {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.lp-flow-ico svg {
  width: 22px;
  height: 22px;
}

.lp-flow-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lp-flow-step p {
  margin: 10px 0 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- Why this, and not what a shop already has ------------------------------ */

.lp-vs-wrap {
  margin-top: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* app.css styles every table for the admin console (a 700px floor, small
   capitals in the header, a rule under each cell); this one takes none of it. */
.lp-vs-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.lp-vs-table th,
.lp-vs-table td {
  padding: 18px 22px;
  text-align: left;
  vertical-align: top;
}

.lp-vs-table thead th {
  width: 23%;
  padding-block: 16px;
  border-bottom: 0;
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-soft);
}

.lp-vs-table thead th:first-child {
  width: 31%;
}

.lp-vs-table tbody tr > * {
  border-top: 1px solid var(--border);
}

.lp-vs-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.lp-vs-table tbody td {
  border-bottom: 0;
  color: var(--ink-soft);
}

/* The mark repeats what the words beside it already say. */
.lp-vs-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lp-vs-cell svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--ink-faint);
}

.lp-vs-table .is-yes svg {
  color: var(--ink);
}

/* The column the page is about: tinted all the way down, its heading filled. */
.lp-vs-table .is-us {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  font-weight: 600;
  color: var(--ink);
}

.lp-vs-table thead .is-us {
  background: var(--accent);
  color: #fff;
}

.lp-vs-table .is-us svg {
  color: var(--accent);
}

.lp-vs-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  max-width: 72ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.lp-vs-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-ink);
}

/* --- Pricing -------------------------------------------------------------- */

.lp-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  margin-top: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.lp-price-main {
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.lp-price-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lp-price-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.lp-price-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 28px 0 0;
  font-variant-numeric: tabular-nums;
}

.lp-price-was {
  font-size: 1.25rem;
  color: var(--ink-faint);
}

.lp-price-amount {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.lp-price-unit {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.lp-price-after {
  margin: 16px 0 32px;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Pinned to the bottom when the column is taller than its content. */
.lp-price-cta {
  align-self: flex-start;
  margin-top: auto;
}

.lp-price-note {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.lp-est {
  padding: 40px;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
}

.lp-est-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.lp-est-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.lp-est-field label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.lp-est-field output {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Drawn here rather than left to the browser: a 6px track filled up to the
   thumb, and a thumb large enough to take hold of. --at is how far along the
   thumb is (0 to 1), set by landing.js; the fill stops at the thumb's centre,
   which is half a thumb in from each end of the track. */
.lp-est-range {
  --at: 0.5;
  --thumb: 22px;
  display: none;
  width: 100%;
  height: var(--thumb);
  margin: 14px 0 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Only once the script has taken it over: a slider that moves nothing would
   be a broken control, so without the script the example stands alone. */
.lp-est.is-live .lp-est-range {
  display: block;
}

.lp-est-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at)),
    var(--border-strong) 0
  );
}

.lp-est-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
}

.lp-est-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.lp-est-range::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: -8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(11, 11, 14, 0.16);
  transition: transform 0.18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.lp-est-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(11, 11, 14, 0.16);
  transition: transform 0.18s var(--ease);
}

.lp-est-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.lp-est-range:active::-moz-range-thumb {
  transform: scale(1.12);
}

.lp-est-range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 999px;
}

/* The two ends of the scale, under the two ends of the track. */
.lp-est-scale {
  display: none;
  justify-content: space-between;
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.lp-est.is-live .lp-est-scale {
  display: flex;
}

.lp-est-result {
  margin-top: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lp-est-label {
  margin: 0;
  padding: 24px 24px 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.lp-est-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.28em;
  margin: 6px 0 0;
  padding: 0 24px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The dash between the two ends of a range steps back, so the eye lands on
   the numbers. */
.lp-est-to {
  font-weight: 400;
  color: var(--ink-faint);
}

.lp-est-unit {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.lp-est-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 24px 0;
  padding: 18px 0 22px;
  border-top: 1px solid var(--border);
}

/* A column each, the figure at the foot, so the two figures share a line
   even when one label runs to two. */
.lp-est-facts div {
  display: flex;
  flex-direction: column;
}

.lp-est-facts div + div {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.lp-est-facts dt {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.lp-est-facts dd {
  margin: auto 0 0;
  padding-top: 4px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The caveat is the foot of the card it qualifies, not a line somewhere
   under it. */
.lp-est-note {
  margin: 0;
  padding: 14px 24px 16px;
  border-top: 1px solid var(--border);
  background: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.lp-est-note strong {
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 560px) {
  .lp-est-label { padding: 20px 20px 0; }
  /* Small enough that the largest range and its unit stay on one line. */
  .lp-est-figure {
    padding: 0 20px;
    font-size: 1.5rem;
  }
  .lp-est-note { padding-inline: 20px; }

  .lp-est-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-inline: 20px;
  }

  .lp-est-facts div + div {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.lp-price-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.lp-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.lp-price-features svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-ink);
}

/* --- Final call to action -------------------------------------------------- */

.lp-final-wrap {
  padding-bottom: 112px;
}

.lp-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-accent);
}

/* One white highlight drifting across the band, slowly: the last thing on
   the page that moves is the last thing to click. White only, so the text
   keeps its contrast; still under reduced motion. */
.lp-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -20%;
  width: 70%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-final::before {
    animation: lp-sheen 14s ease-in-out infinite alternate;
  }
}

@keyframes lp-sheen {
  to { transform: translateX(110%); }
}

.lp-final h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.lp-final h2 span {
  display: block;
}

/* AA on the near-black band: the second line steps back without dropping under AA. */
.lp-final-accent {
  color: rgba(255, 255, 255, 0.8);
}

.lp-final p {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.lp-final .btn {
  flex: none;
}

/* --- Footer --------------------------------------------------------------- */

.lp-foot {
  border-top: 1px solid var(--border);
  padding-block: 40px 32px;
}

.lp-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

.lp-foot-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.lp-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.lp-foot-links a {
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.lp-foot a:hover {
  color: var(--ink);
}

.lp-foot-legal {
  margin-top: 28px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --- Motion --------------------------------------------------------------- */

/*
 * Above the fold, motion runs on a timer and tells the exchange in order: the
 * question, the widget searching, the answer, then the product it points to.
 * Picking another question replays that for the new one, because its steps
 * only get an animation while their question is the chosen one.
 *
 * Below the fold, reveals use a scroll-driven timeline inside an @supports,
 * so a browser without it simply gets the page and nothing can end up stuck
 * at opacity 0.
 */
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-think {
  0%,
  100% {
    opacity: 0;
  }
  18%,
  82% {
    opacity: 1;
  }
}

@keyframes lp-line-up {
  from { transform: translateY(105%); }
  to { transform: none; }
}

@keyframes lp-float {
  from { translate: 0 0; }
  to { translate: 0 -8px; }
}

/* The window swings in from further back and further round, then settles
   into the stage's lean. */
@keyframes lp-swing-in {
  from {
    opacity: 0;
    transform: translate3d(0, 60px, -160px) rotateX(18deg) rotateY(-22deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A floating piece arrives with a little overshoot, like it was dropped in. */
@keyframes lp-pop {
  0% { opacity: 0; scale: 0.3; }
  60% { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

@keyframes lp-bob {
  from { translate: 0 0; }
  to { translate: 0 -14px; }
}

.lp-in {
  animation: lp-rise 0.8s var(--ease) both;
}

@media (prefers-reduced-motion: no-preference) {
  /* The headline, a line at a time, before the lede and buttons arrive. */
  .lp-line > span {
    animation: lp-line-up 0.9s var(--ease) both;
  }

  .lp-line:nth-child(2) > span {
    animation-delay: 0.1s;
  }

  /* The window swings into place, then hangs rather than sits: a slow float
     once it has arrived, on `translate` so the two never collide. */
  .lp-demo .cw {
    animation:
      lp-swing-in 1.3s var(--ease) 0.1s both,
      lp-float 6s ease-in-out 1.4s infinite alternate;
  }

  /* The pieces drop in one after another once the window is there, then
     each bobs on its own period, so they never move in step. */
  .lp-chip {
    animation:
      lp-pop 0.8s var(--ease) var(--in) both,
      lp-bob var(--bob) ease-in-out calc(var(--in) + 0.8s) infinite alternate;
  }

  .lp-chip-bolt { --in: 0.9s; --bob: 4.2s; }
  .lp-chip-always { --in: 1.05s; --bob: 5.4s; }
  .lp-chip-product { --in: 1.2s; --bob: 4.8s; }
  .lp-chip-cart { --in: 1.35s; --bob: 6s; }
}

.lp-in-1 { animation-delay: 0.05s; }
.lp-in-2 { animation-delay: 0.15s; }
.lp-in-3 { animation-delay: 0.25s; }

/* Only when motion is welcome: these selectors outrank anything a
   reduced-motion override could say, so they are never applied at all. */
@media (prefers-reduced-motion: no-preference) {
  .lp-demo:has(#lpq-product:checked) .cw-conv-product .cw-step,
  .lp-demo:has(#lpq-delivery:checked) .cw-conv-delivery .cw-step,
  .lp-demo:has(#lpq-returns:checked) .cw-conv-returns .cw-step {
    animation: lp-rise 0.55s var(--ease) var(--delay, 0s) both;
  }

  .lp-demo:has(#lpq-product:checked) .cw-conv-product .cw-thinking,
  .lp-demo:has(#lpq-delivery:checked) .cw-conv-delivery .cw-thinking,
  .lp-demo:has(#lpq-returns:checked) .cw-conv-returns .cw-thinking {
    animation: lp-think 0.9s linear var(--delay, 0s) both;
  }
}

.cw-step-q { --delay: 0.25s; }
.cw-thinking { --delay: 0.6s; }
.cw-step-a { --delay: 1.4s; }
.cw-step-card { --delay: 1.75s; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A research figure's bar draws out to its share as the figure scrolls
       in, while landing.js counts the number up beside it. */
    .lp-stat::before {
      animation-name: lp-draw;
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 4% cover 34%;
    }

    @keyframes lp-draw {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    /* The arrow between two steps draws itself as the steps scroll in: the
       order is the content. The head lands once the rule has arrived. */
    .lp-flow-step::before {
      transform-origin: left center;
      animation-name: lp-draw;
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }

    .lp-flow-step::after {
      animation-name: lp-appear;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 36% cover 44%;
    }

    @keyframes lp-appear {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* The step icons spin up out of nothing as their step arrives. */
    .lp-flow-ico {
      animation-name: lp-spin-pop;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }

    @keyframes lp-spin-pop {
      0% { opacity: 0; transform: scale(0.2) rotate(-90deg); }
      70% { opacity: 1; transform: scale(1.15) rotate(8deg); }
      100% { opacity: 1; transform: none; }
    }

    /* The feature tiles fold up off the page, like cards being stood up,
       each column a beat behind the one before it. */
    .lp-cell.lp-reveal {
      animation-name: lp-fold-up;
      animation-range: entry 0% cover 28%;
    }

    .lp-cell.lp-reveal:nth-child(even) { animation-range: entry 6% cover 34%; }

    @keyframes lp-fold-up {
      from {
        opacity: 0;
        transform: perspective(900px) translateY(70px) rotateX(28deg) scale(0.94);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* What the assistant took from the sentence arrives a word at a time,
       in the order it was said. */
    .lp-tags li {
      animation-name: lp-tag-in;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 14% cover 26%;
    }

    .lp-tags li:nth-child(2) { animation-range: cover 19% cover 31%; }
    .lp-tags li:nth-child(3) { animation-range: cover 24% cover 36%; }

    /* The answer follows the last word. It sits lower, so the same share of
       its own passage up the screen comes later. */
    .lp-ask-a {
      animation-name: lp-tag-in;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 22% cover 34%;
    }

    @keyframes lp-tag-in {
      from { opacity: 0; transform: translateY(8px) scale(0.86); }
      to { opacity: 1; transform: none; }
    }

    /* The two product cards in the catalogue tile slide in from the side,
       one after the other, as if the assistant had just found them. */
    .lp-cell-demo .cw-product {
      animation-name: lp-slide-in;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }

    .lp-cell-demo .cw-product:nth-child(2) {
      animation-range: entry 30% cover 50%;
    }

    @keyframes lp-slide-in {
      from { opacity: 0; transform: translateX(120px) rotate(4deg); }
      to { opacity: 1; transform: none; }
    }

    /* The chart grows out of its baseline, the way the real one fills in. */
    .lp-mini-bars i {
      animation-name: lp-grow;
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 36%;
    }

    @keyframes lp-grow {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }

    /* The four outcomes arrive a column apart. */
    .lp-gain.lp-reveal:nth-child(even) {
      animation-range: entry 14% cover 30%;
    }

    /* The price panel and the closing band rise up from a step back. */
    .lp-price-panel.lp-reveal,
    .lp-final.lp-reveal {
      animation-name: lp-zoom-in;
      animation-range: entry 0% cover 30%;
    }

    @keyframes lp-zoom-in {
      from { opacity: 0; transform: perspective(1200px) translateY(80px) rotateX(14deg) scale(0.9); }
      to { opacity: 1; transform: none; }
    }
  }

  .lp-reveal {
    /* Longhands, not the shorthand: the shorthand resets the duration to 0s,
       and a scroll-driven animation needs it left at `auto`. */
    animation-name: lp-rise;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 4% cover 22%;
  }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .lp-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-block: 56px 16px;
  }

  .lp-demo {
    max-width: 520px;
  }

  /* One column: no room either side of the window for the floating pieces. */
  .lp-chip {
    display: none;
  }

  .lp-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two columns: the wide cells take both, the two chat cells share a row,
     so no row is left with a hole in it. */
  .lp-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-cell-ask,
  .lp-cell-stats,
  .lp-cell-look,
  .lp-cell-install {
    grid-column: span 2;
  }

  .lp-cell-products,
  .lp-cell-answers {
    grid-column: span 1;
  }

  /* The lead cell's exchange drops under its text. */
  .lp-cell-ask {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px;
  }

  .lp-ask {
    max-width: 520px;
  }

  /* Half the row is too narrow for two cards abreast: one over the other. */
  .lp-cell-demo {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .lp-cell-demo .cw-product {
    max-width: 320px;
  }

  .lp-cell-demo .cw-product:nth-child(2) {
    margin: 0 0 0 28px;
  }

  /* With the whole row to itself the colour picker sits beside its text. */
  .lp-cell-look {
    flex-direction: row;
    align-items: center;
  }

  .lp-cell-look > * {
    flex: 1;
  }

  .lp-look {
    margin: 0;
  }

  .lp-cell-install {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-connect {
    grid-column: 1 / -1;
  }

  /* The heading goes above its four outcomes, and has nothing to stick to. */
  .lp-gains {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .lp-gains-head {
    position: static;
  }

  .lp-price-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-est {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .lp-final {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 900px) {
  /* The four steps run down the page and the arrows turn to point down. */
  .lp-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 28px;
  }

  .lp-flow-step {
    padding: 0 0 0 68px;
    min-height: 48px;
  }

  .lp-flow-step::before {
    top: 58px;
    bottom: -22px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .lp-flow-step::after {
    top: auto;
    bottom: -22px;
    left: 19.5px;
    right: auto;
    rotate: 135deg;
  }

  .lp-flow-step p {
    max-width: 52ch;
  }

  .lp-nav-links {
    display: none;
  }

  .lp-menu-btn {
    display: inline-grid;
  }
}

/* Wide enough for the whole bar: the sheet never shows, even if it was left
   open while the window grew. */
@media (min-width: 901px) {
  .lp-menu {
    display: none;
  }
}

/* The bar still carries "Log in" and the language switch here, so the sheet
   holds only the section links. */
@media (min-width: 561px) {
  .lp-menu-foot {
    display: none;
  }
}

@media (max-width: 767px) {
  .lp-wrap,
  .lp-nav-inner {
    padding: 0 16px;
  }

  .lp-nav-inner {
    gap: 12px;
  }

  .lp-section {
    padding-top: 80px;
  }

  .lp-final-wrap {
    padding-bottom: 80px;
  }

  .lp-hero {
    padding-block: 32px 8px;
  }

  .lp-hero .lp-lede {
    font-size: 1.0625rem;
  }

  .lp-cta-row .btn {
    width: 100%;
  }

  .lp-stat-row {
    gap: 32px 20px;
    margin-top: 40px;
  }

  .lp-bento {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .lp-cell-ask,
  .lp-cell-products,
  .lp-cell-answers,
  .lp-cell-stats,
  .lp-cell-look,
  .lp-cell-install {
    grid-column: auto;
  }

  .lp-cell,
  .lp-cell-ask {
    padding: 24px;
  }

  .lp-cell-ask {
    gap: 28px;
  }

  .lp-cell-ask .lp-cell-copy h3 {
    font-size: 1.3125rem;
  }

  .lp-cell-ask .lp-cell-copy p,
  .lp-ask-q {
    font-size: 0.9375rem;
  }

  /* On a phone the install cell is its icon over its text over the list. */
  .lp-cell-install {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-cell-demo .cw-product:nth-child(2) {
    margin-left: 20px;
  }

  .lp-cell-look {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-mini-kpis div {
    padding: 12px;
  }

  .lp-mini-kpis b {
    font-size: 1.1875rem;
  }

  .lp-gain-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .lp-flow {
    margin-top: 40px;
    padding: 24px 20px;
  }

  /*
   * The comparison as blocks: each need is a heading, and under it the three
   * answers, each named by its column (data-label), ours last and tinted.
   * The header row stays in the page for assistive technology only.
   */
  .lp-vs-wrap {
    margin-top: 40px;
  }

  .lp-vs-table,
  .lp-vs-table tbody,
  .lp-vs-table tr,
  .lp-vs-table th,
  .lp-vs-table td {
    display: block;
  }

  .lp-vs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .lp-vs-table tbody tr {
    padding: 20px 16px;
  }

  .lp-vs-table tbody tr + tr {
    border-top: 1px solid var(--border);
  }

  .lp-vs-table tbody tr > * {
    padding: 0;
    border-top: 0;
  }

  .lp-vs-table tbody th {
    margin-bottom: 12px;
    font-size: 1rem;
  }

  .lp-vs-table tbody td {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
  }

  .lp-vs-table tbody td::before {
    content: attr(data-label);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ink-faint);
  }

  .lp-vs-table tbody td.is-us {
    margin-top: 8px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
  }

  .lp-vs-table tbody td.is-us::before {
    font-weight: 650;
    color: var(--accent);
  }

  .lp-price-main,
  .lp-est {
    padding: 24px;
  }

  .lp-price-amount {
    font-size: 3.25rem;
  }

  .lp-price-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-final {
    padding: 36px 24px;
  }

  .lp-final .btn {
    width: 100%;
  }

  .cw-turn,
  .cw-conv .cw-product {
    max-width: 94%;
  }
}

/* One figure to a row on a phone: two columns left each sentence a ribbon. */
@media (max-width: 560px) {
  .lp-stat-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-stat-text,
  .lp-stat-src {
    max-width: 40ch;
  }

  /* Three figures abreast cut their labels off mid-word here, so each gets
     a line: its name on the left, its value on the right. */
  .lp-mini-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-mini-kpis div {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
  }

  .lp-mini-kpis span {
    font-size: 0.8125rem;
  }

  .lp-swatches {
    gap: 8px;
  }
}

/* Only the language switch steps out of the bar (it is in the menu sheet).
   "Log in" stays beside the sign-up button, both a little tighter so the
   pair and the menu button fit a 360px phone; the sheet's own copy of the
   link goes, since the bar now carries it. */
@media (max-width: 560px) {
  .lp-menu-login {
    display: none;
  }

  /* The 28px between the mark and the buttons is for the desktop bar. */
  .lp-nav-inner {
    gap: 8px;
  }

  .lp-nav-actions {
    gap: 4px;
  }

  .lp-nav-actions .btn {
    padding: 0 7px;
    font-size: 0.75rem;
  }

  .lp-nav-actions .lp-nav-login {
    padding: 0 4px;
  }

  .lp-menu-btn {
    width: 36px;
    height: 36px;
  }

  /* The switch is a single pill naming the other language: the active one
     needs no button, and the bar has no room for both. The sheet keeps the
     full two-part switch. */
  .lp-nav-actions > .lang-switch {
    padding: 0;
    border: 0;
  }

  .lp-nav-actions > .lang-switch .is-active {
    display: none;
  }

  .lp-nav-actions > .lang-switch .lang-switch-option {
    min-width: 30px;
    height: 36px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    font-size: 0.75rem;
    color: var(--ink);
  }

  /* On its own line, so the three questions fit on one row. */
  .lp-demo-pick legend {
    float: none;
    width: 100%;
    margin: 0 0 8px;
  }

  /* Flat on a phone: a leaning window at this width only loses its edge. */
  .lp-stage {
    --rx: 0deg;
    --ry: 0deg;
  }

  /* The product card's button drops under the product, so the name and
     price keep the card's full width instead of truncating to "Nike ...". */
  .cw-conv .cw-product {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .cw-conv .cw-product-cta {
    margin-left: 66px;
  }
}

@media (max-width: 420px) {
  .lp-nav .lp-brand-name {
    display: none;
  }
}

/* Too narrow for the whole row: the language pill goes back to the menu
   sheet first, then "Log in" (below 350px), which still carries both. */
@media (max-width: 359px) {
  .lp-nav-actions > .lang-switch {
    display: none;
  }
}

@media (max-width: 349px) {
  .lp-nav-login {
    display: none;
  }

  .lp-menu-login {
    display: inline-flex;
  }
}

/* app.css collapses animation durations under reduced motion but not the
   staggered delays, which would leave the hero blank for a moment before it
   snaps in. No motion, content immediately, and no "searching" bubble. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .lp-in,
  .lp-reveal {
    animation: none;
  }

  /* Leaning still reads as depth, so the stage keeps its rest angle; it
     just never follows the pointer (landing.js checks the same query). */
  .lp-stage {
    transition: none;
  }


  .lp-demo .cw-thinking {
    display: none;
  }

  .lp .btn,
  .lp .arrow,
  .lp-cell,
  .lp-look-q,
  .lp-look-launcher,
  .lp-swatches label {
    transition: none;
  }
}

/* The store list in one column on a phone: ten rows, a line between each. */
@media (max-width: 767px) {
  .lp-connect {
    padding: 18px 16px 16px;
  }

  /* No room for a name beside four marks: each source's name gets a line
     of its own, with its marks under it in four even columns. The headings
     keep to the same four and stay in view under the nav while the list
     scrolls past. The markup carries the table roles this layout drops. */
  .lp-src,
  .lp-src tbody {
    display: block;
  }

  .lp-src thead {
    display: block;
    position: sticky;
    top: var(--nav-h);
    z-index: 1;
    background: var(--surface-2);
  }

  .lp-src tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp-src thead th {
    width: auto;
    padding: 10px 2px;
    font-size: 0.6875rem;
  }

  .lp-src thead th:first-child {
    display: none;
  }

  .lp-src-group th,
  .lp-src tbody th[scope="row"] {
    grid-column: 1 / -1;
  }

  .lp-src tbody th[scope="row"] {
    padding: 12px 0 0;
  }

  .lp-src td {
    padding: 6px 0 12px;
  }

  .lp-src tbody tr + tr:not(:nth-child(2)) > td {
    border-top: 0;
  }
}