/* Landing V4 homepage (design/landing-v4). Values match the design at 1440 x 900. */
body.page-landing {
  background: var(--color-paper);
  color: var(--color-ink);
}
body.page-landing main {
  overflow: clip;
  line-height: normal;
}
/* The design sizes boxes the browser's default way (content-box); styles.css uses border-box
   everywhere. Components that the design sizes with border-box say so below. */
:where(.lp-story, .lp-section) :where(*, *::before, *::after) {
  box-sizing: content-box;
}
/* Element resets carry no class weight, so every component below keeps its own spacing. */
:where(.page-landing main) :where(p, figure) {
  margin: 0;
}
:where(.page-landing main) :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.page-landing main :is(h1, h2, h3) {
  overflow-wrap: normal;
  text-wrap: wrap;
}

/* ---------- stage: shared pieces ---------- */
.lp-story {
  position: relative;
}
.lp-sticky {
  position: relative;
}
.lp-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-backdrop > div {
  position: absolute;
  inset: 0;
}
.lp-backdrop-base {
  background:
    radial-gradient(
      860px 520px at calc(50% + 460px) 420px,
      rgba(30, 62, 150, 0.16) 0%,
      rgba(14, 28, 72, 0.08) 50%,
      rgba(5, 7, 12, 0) 78%
    ),
    var(--color-paper);
}
.lp-backdrop-glow {
  background: radial-gradient(
    560px 300px at calc(50% + 460px) 470px,
    rgba(40, 90, 220, 0.1) 0%,
    rgba(20, 50, 150, 0.04) 55%,
    rgba(5, 7, 12, 0) 100%
  );
}
.lp-glass {
  background: linear-gradient(
    165deg,
    rgba(22, 27, 38, 0.94) 0%,
    rgba(15, 19, 27, 0.95) 55%,
    rgba(12, 15, 22, 0.96) 100%
  );
  border: 1px solid rgba(160, 188, 240, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* the software behind the machine */
.lp-app-hero {
  --color-muted: #c2c7d1;
  --lp-faint: #9aa1ad;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.lp-app-hero-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  height: 100%;
  padding: 28px 34px 30px 24px;
  box-sizing: border-box;
}
.lp-app-hero-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 14px;
  border-right: 1px solid var(--lp-glass-rule);
}
.lp-app-hero-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.lp-app-hero-brand > span {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--lp-faint);
}
.lp-app-hero-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 6px;
  font-size: 12.5px;
  color: var(--color-muted);
}
.lp-app-hero-nav.is-current {
  color: var(--color-ink);
}
.lp-app-hero-today {
  padding: 22px 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--lp-faint);
}
.lp-app-hero-recent {
  padding: 6px;
  font-size: 9.5px;
  color: var(--color-muted);
}
.lp-app-hero-active {
  padding: 6px;
  border-radius: 6px;
  background: var(--lp-glass-hi);
  font-size: 12px;
  color: var(--color-ink);
}
.lp-app-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 0 0 26px;
}
.lp-app-hero-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
.lp-app-hero-ask {
  align-self: flex-end;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--lp-glass-hi);
  font-size: 12px;
  color: var(--color-ink);
}
.lp-app-hero-answer {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-muted);
}
.lp-app-hero-answer b {
  color: var(--color-ink);
  font-weight: 600;
}
.lp-app-hero-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--lp-glass-rule);
  color: var(--color-ink);
}
.lp-app-hero-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--lp-glass-rule);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-muted);
}
.lp-app-hero-file .lp-file-pdf {
  padding: 1px 3px;
  border-radius: 2px;
  background: #1f5bd8;
  color: #fff;
  font-size: 8.5px;
}
.lp-app-hero-composer {
  position: absolute;
  left: 22px;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 46px;
  padding: 0 8px;
  border-radius: 23px;
  border: 1px solid var(--lp-glass-rule);
}
.lp-app-hero-composer > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lp-glass-hi);
  color: var(--color-ink);
}
.lp-rim {
  position: absolute;
  right: -1px;
  top: 8%;
  bottom: 8%;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(170, 210, 255, 0) 0%,
    rgba(170, 205, 255, 0.55) 25%,
    rgba(200, 222, 255, 0.85) 70%,
    rgba(170, 210, 255, 0.1) 100%
  );
  box-shadow: 0 0 9px 1px rgba(90, 150, 255, 0.35);
}
.lp-scene-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      150px 60px at 1290px 592px,
      rgba(150, 190, 255, 0.2) 0%,
      rgba(70, 120, 240, 0.07) 50%,
      rgba(40, 90, 230, 0) 100%
    ),
    radial-gradient(
      70px 380px at 1412px 360px,
      rgba(110, 165, 255, 0.14) 0%,
      rgba(40, 90, 230, 0) 100%
    );
  pointer-events: none;
}
.lp-beam {
  position: absolute;
  left: 760px;
  top: 640px;
  width: 680px;
  height: 200px;
  background: radial-gradient(
    ellipse 40% 26% at 60% 40%,
    rgba(110, 160, 255, 0.05) 0%,
    rgba(50, 100, 230, 0.02) 55%,
    rgba(20, 40, 120, 0) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}
.lp-fade {
  position: absolute;
  left: 0;
  top: 760px;
  width: 1440px;
  height: 140px;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 20, 0) 0%,
    rgba(10, 13, 20, 0.6) 70%,
    var(--color-paper) 100%
  );
  pointer-events: none;
}

/* hero copy */
.lp-hero {
  display: flex;
  flex-direction: column;
}
.lp-hero-eyebrow {
  font-size: 14px;
}
body.page-landing main .lp-hero h1 {
  /* The design's size; each breakpoint sets its own, and outside the pinned stage it is a maximum. */
  --lp-hero-size: 64px;
  margin: 22px 0 0;
  max-width: 570px;
  font-family: var(--font-display);
  font-size: var(--lp-hero-size);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.lp-hero h1 span,
.lp-chapter-title span,
.lp-title span {
  color: var(--lp-second);
}
body.page-landing main .lp-hero-lead {
  margin: 30px 0 0;
  max-width: 470px;
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--lp-sub);
}
.lp-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.lp-proof {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  margin-top: 50px;
  white-space: nowrap;
}
.lp-proof-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 1.4;
  color: #c5c9d0;
}
.lp-proof-item svg {
  flex-shrink: 0;
}
.lp-proof-rule {
  flex-shrink: 0;
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.16);
}

/* chapters */
.lp-chapter {
  display: flex;
  flex-direction: column;
}
.lp-chapter .lp-eyebrow,
.lp-section .lp-eyebrow {
  font-size: 13px;
}
body.page-landing main .lp-chapter-title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
body.page-landing main .lp-chapter-lead {
  margin: 24px 0 0;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-sub);
}
.lp-descriptors {
  display: block;
  margin-top: 26px;
  padding: 25px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.lp-descriptors span {
  white-space: nowrap;
}
.lp-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 30px;
  margin-top: 40px;
}
.lp-figures li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0 0;
  border-top: 1px solid var(--color-rule);
}
.lp-figure-number {
  font-size: 50px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}
.lp-figure-label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-muted);
}
body.page-landing main .lp-sectors {
  margin: 34px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}
body.page-landing main .lp-as-of {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: normal;
  letter-spacing: 0.12em;
  color: var(--lp-faint);
}
.lp-rows {
  display: flex;
  flex-direction: column;
  margin-top: 36px;
  border-top: 1px solid var(--color-rule);
}
body.page-landing main a.lp-row {
  display: grid;
  grid-template-columns: 170px 1fr 24px;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
  text-decoration: none;
}
.lp-row-key {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--color-ink);
  transition: color 0.4s;
}
.lp-row-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-muted);
}
.lp-row-arrow {
  display: flex;
  justify-content: flex-end;
  padding-top: 3px;
  color: var(--lp-faint);
  transition:
    transform 0.25s,
    color 0.25s;
}
a:hover > .lp-row-arrow,
a:focus-visible > .lp-row-arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}
a.lp-row:hover .lp-row-key,
a.lp-row:focus-visible .lp-row-key {
  color: var(--color-accent);
}
.lp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
}
.lp-tiers li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 0;
  border-top: 1px solid var(--color-rule);
}
.lp-tiers li:first-child {
  padding-left: 0;
}
.lp-tiers li + li {
  border-left: 1px solid var(--color-rule);
}
.lp-tier-value {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.lp-tier-name {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
}
.lp-tier-detail {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
}
.lp-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-muted);
}
.lp-figure {
  margin: 0;
}
.lp-still {
  display: block;
  width: 100%;
  height: auto;
}
.lp-stage-status {
  position: relative;
  z-index: 2;
}
.lp-stage-status:has([hidden] + [hidden]) {
  display: none;
}
.lp-stage-status p {
  margin: 0 auto;
  padding: 16px 0 8px;
  width: min(1272px, calc(100% - 48px));
  color: var(--color-muted);
  font-size: 14px;
}
.lp-stage-status button {
  display: block;
  margin: 0 auto 16px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

/* ---------- stage: pinned (motion and WebGL available, wide screens) ---------- */
:root[data-lp-mode='pinned'] .lp-story {
  height: calc(100vh + 2800px);
}
:root[data-lp-mode='pinned'] .lp-story .lp-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* Unlike hidden, clip cannot be scrolled by an anchor or by focus, so the stage stays put. */
  overflow: clip;
}
/* The 1440 x 900 design, scaled to fit and anchored under the header. home-mode.js sets the
   scale and the top offset; the backdrop shares the transform and bleeds past every edge. */
:root[data-lp-mode='pinned'] .lp-story :is(.lp-box, .lp-backdrop) {
  position: absolute;
  left: 50%;
  top: var(--lp-top, 0px);
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  transform: scale(var(--lp-s, 1)) translateX(-50%);
}
:root[data-lp-mode='pinned'] .lp-story .lp-backdrop > div {
  inset: -1000px -2000px;
}
/* Past the design's 900px the floor shades on into the page instead of ending. */
:root[data-lp-mode='pinned'] .lp-story .lp-sticky::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lp-top, 0px) + 760px * var(--lp-s, 1));
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 20, 0) 0,
    var(--color-paper) calc(140px * var(--lp-s, 1))
  );
  opacity: var(--lp-floor, 1);
  pointer-events: none;
}
:root[data-lp-mode='pinned'] .lp-story .lp-backdrop-base {
  background:
    radial-gradient(
      860px 520px at 3180px 1420px,
      rgba(30, 62, 150, 0.16) 0%,
      rgba(14, 28, 72, 0.08) 50%,
      rgba(5, 7, 12, 0) 78%
    ),
    var(--color-paper);
}
:root[data-lp-mode='pinned'] .lp-story .lp-backdrop-glow {
  background: radial-gradient(
    560px 300px at 3180px 1470px,
    rgba(40, 90, 220, 0.1) 0%,
    rgba(20, 50, 150, 0.04) 55%,
    rgba(5, 7, 12, 0) 100%
  );
}
:root[data-lp-mode='pinned'] .lp-story .lp-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  pointer-events: none;
}
:root[data-lp-mode='pinned'] .lp-story .lp-panel {
  position: absolute;
  left: 560px;
  top: 96px;
  width: 855px;
  height: 560px;
  perspective: 1500px;
  perspective-origin: 70% 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
:root[data-lp-mode='pinned'] .lp-story .lp-app-hero {
  position: absolute;
  right: 0;
  top: 8px;
  width: 820px;
  height: 500px;
  transform: rotateY(-19deg);
  transform-origin: 100% 50%;
}
:root[data-lp-mode='pinned'] .lp-story .lp-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  display: block;
  pointer-events: none;
}
/* Wider than the design, the floor's light feathers out instead of stopping at the stage edge. */
@media (min-width: 1460px) {
  :root[data-lp-mode='pinned'] .lp-story .lp-canvas {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%);
  }
}
:root[data-lp-mode='pinned'] .lp-story .lp-hero {
  position: absolute;
  left: 84px;
  top: 170px;
  width: 600px;
}
:root[data-lp-mode='pinned'] .lp-story .lp-chapters {
  position: absolute;
  left: 84px;
  top: 0;
  width: 580px;
  height: 900px;
  pointer-events: none;
}
:root[data-lp-mode='pinned'] .lp-story .lp-chapter {
  position: absolute;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
:root[data-lp-mode='pinned'] .lp-story .lp-trusted {
  top: 150px;
  width: 560px;
}
:root[data-lp-mode='pinned'] .lp-story .lp-meet {
  top: 190px;
  width: 540px;
}
:root[data-lp-mode='pinned'] .lp-story .lp-sized {
  top: 140px;
  width: 560px;
}
:root[data-lp-mode='pinned'] .lp-story .lp-figure {
  display: none;
}
/* Until the live view draws, its first frame shows as a still in exactly the same place. */
:root[data-lp-mode='pinned'] .lp-story:not([data-model-state='ready']) .lp-figure-hero {
  display: block;
  position: absolute;
  left: 520px;
  top: 70px;
  width: 920px;
  height: 790px;
  pointer-events: none;
}
:root[data-lp-mode='pinned'] .lp-story .lp-chapter > :not(.lp-figure) {
  flex-shrink: 0;
}
:root[data-lp-mode='pinned'] .lp-story .lp-stage-status {
  display: none;
}

/* ---------- stage: in normal flow (no JavaScript, reduced motion, small screens) ---------- */
:root:not([data-lp-mode='pinned']) .lp-sticky {
  padding-top: 70px;
}
:root:not([data-lp-mode='pinned']) .lp-backdrop {
  bottom: auto;
  height: min(100vh, 980px);
  min-height: 760px;
}
:root:not([data-lp-mode='pinned']) .lp-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  column-gap: 48px;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 84px;
  box-sizing: border-box;
}
:root:not([data-lp-mode='pinned']) .lp-scene,
:root:not([data-lp-mode='pinned']) .lp-beam,
:root:not([data-lp-mode='pinned']) .lp-fade {
  display: none;
}
:root:not([data-lp-mode='pinned']) .lp-canvas {
  display: none;
}
:root:not([data-lp-mode='pinned']) .lp-hero {
  grid-column: 1;
  grid-row: 1;
  padding: 100px 0 120px;
}
:root:not([data-lp-mode='pinned']) .lp-figure-hero {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-right: -84px;
}
:root:not([data-lp-mode='pinned']) .lp-chapters {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
:root:not([data-lp-mode='pinned']) .lp-chapter {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  column-gap: 48px;
  align-items: center;
  padding: 112px 0;
  border-top: 1px solid var(--color-rule);
}
:root:not([data-lp-mode='pinned']) .lp-chapter > :not(.lp-figure) {
  grid-column: 1;
}
:root:not([data-lp-mode='pinned']) .lp-chapter > .lp-figure {
  grid-column: 2;
  grid-row: 1 / span 8;
}
:root[data-lp-mode='stacked'] .lp-canvas {
  display: block;
  position: absolute;
  left: var(--tower-slot-x, 0);
  top: var(--tower-slot-y, 0);
  width: var(--tower-slot-width, 0);
  height: var(--tower-slot-height, 0);
  z-index: 1;
  pointer-events: none;
}
:root[data-lp-mode='stacked'] .lp-figure[data-live-view] .lp-still,
:root[data-lp-mode='stacked'] .lp-figure[data-ghost] .lp-still {
  visibility: hidden;
}
.lp-figure {
  position: relative;
}
:root[data-lp-mode='stacked'] .tower-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- sections ---------- */
.lp-section {
  position: relative;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 168px 84px 0;
  box-sizing: border-box;
}
.lp-head {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 80px;
  align-items: end;
}
.lp-head > div {
  display: flex;
  flex-direction: column;
}
body.page-landing main .lp-title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
body.page-landing main .lp-head-lead {
  padding-bottom: 6px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-sub);
}
.lp-view {
  position: relative;
  margin: 72px 0 0;
}
.lp-view-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  bottom: -6%;
  background: radial-gradient(closest-side, rgba(40, 90, 220, 0.12), rgba(5, 7, 12, 0));
  pointer-events: none;
}
.lp-caption {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--lp-faint);
}

/* the assistant */
/* The product view is taller than the viewport, so the heading and its lead hold their place
   while the view scrolls up behind them, then the whole section releases together. The pin is
   desktop-only: a short viewport needs the reading space more than the pinned heading. */
.lp-pin-head {
  position: relative;
}
@media (min-width: 900px) and (min-height: 680px) {
  .lp-assistant .lp-pin-head {
    position: sticky;
    top: 69px;
    z-index: 3;
    padding: 22px 0 24px;
    background: var(--color-paper);
  }
  .lp-assistant .lp-pin-head::after {
    content: '';
    position: absolute;
    inset: 100% 0 auto;
    height: 64px;
    background: linear-gradient(180deg, var(--color-paper) 0%, rgba(10, 13, 20, 0) 100%);
    pointer-events: none;
  }
  .lp-assistant .lp-view {
    margin-top: 40px;
  }
}
.lp-app {
  position: relative;
  display: grid;
  grid-template-columns: 236px 1fr;
  border-radius: 16px;
  overflow: hidden;
}
.lp-app-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 14px;
  border-right: 1px solid var(--lp-glass-rule);
}
.lp-app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 12px 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.lp-app-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  white-space: nowrap;
  font-size: 14.5px;
  color: var(--color-muted);
}
.lp-app-nav.is-current {
  background: var(--lp-glass-hi);
  color: var(--color-ink);
}
.lp-app-today {
  padding: 30px 12px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lp-faint);
}
.lp-app-main {
  display: flex;
  flex-direction: column;
  padding: 30px 40px 34px;
}
.lp-app-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
}
.lp-app-thread {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
  max-width: 780px;
  margin: 30px auto 0;
}
.lp-app-ask {
  align-self: flex-end;
  max-width: 560px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--lp-glass-rule);
  background: var(--lp-glass-hi);
  font-size: 15px;
  color: var(--color-ink);
}
.lp-app-answer {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-muted);
}
.lp-app-answer > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.page-landing main .lp-app-answer p {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.62;
}
.lp-app-answer b {
  color: var(--color-ink);
  font-weight: 600;
}
.lp-app-answer mark {
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 176, 72, 0.16);
  color: var(--lp-flag);
}
.lp-app-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--lp-glass-rule);
  color: var(--color-ink);
}
.lp-app-files {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.lp-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--lp-glass-rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-muted);
}
.lp-file > span {
  padding: 1px 4px;
  border-radius: 2px;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.lp-file .lp-file-pdf {
  background: #1f5bd8;
}
.lp-file .lp-file-docx {
  background: #3a4a6b;
}
.lp-app-compose {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.lp-app-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 9px 0 20px;
  border-radius: 27px;
  border: 1px solid var(--lp-glass-rule);
  font-size: 14.5px;
  color: var(--lp-faint);
}
.lp-app-input > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lp-glass-hi);
  color: var(--color-ink);
}
.lp-app-chips {
  display: flex;
  gap: 8px;
}
.lp-app-chips span {
  padding: 8px 13px;
  border-radius: 17px;
  border: 1px solid var(--lp-glass-rule);
  font-size: 13px;
  color: var(--color-muted);
}

/* team tools */
.lp-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 64px;
  padding: 40px 0 44px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.lp-tool {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 28px;
  transition: background-color 0.3s;
}
.lp-tool:first-child {
  padding-left: 0;
}
.lp-tool:last-child {
  padding-right: 0;
}
.lp-tool + .lp-tool {
  border-left: 1px solid var(--color-rule);
}
.lp-tool:hover {
  background-color: var(--color-accent-tint);
}
body.page-landing main .lp-tool-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.16em;
  color: var(--color-ink);
}
body.page-landing main .lp-tool-detail {
  margin-top: -10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}
.lp-mini {
  position: relative;
  height: 196px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-mini-meeting {
  gap: 11px;
}
.lp-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-ink);
}
.lp-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
.lp-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.lp-mini-line {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-muted);
}
.lp-mini-line > span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--lp-faint);
}
.lp-mini-line.is-translated {
  color: var(--color-ink);
}
.lp-mini-line.is-translated > span {
  color: var(--color-accent);
}
.lp-mini-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--lp-glass-rule);
  font-size: 11px;
  color: var(--color-muted);
}
.lp-mini-foot > span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--lp-faint);
}
.lp-mini-office {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
}
.lp-mini-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 4px;
  background: var(--lp-page);
}
.lp-mini-page span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--lp-faint);
  opacity: 0.5;
}
.lp-mini-page span:nth-child(1) {
  width: 70%;
  opacity: 0.9;
}
.lp-mini-page span:nth-child(2) {
  width: 92%;
}
.lp-mini-page span:nth-child(3) {
  width: 86%;
}
.lp-mini-page span.is-selected {
  height: 22px;
  margin: 2px -4px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent-tint);
  opacity: 1;
}
.lp-mini-page span:nth-child(5) {
  width: 80%;
}
.lp-mini-page span:nth-child(6) {
  width: 60%;
}
.lp-mini-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 2px;
}
.lp-mini-actions > span:not(.lp-mini-apps) {
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid var(--lp-glass-rule);
  font-size: 10.5px;
  color: var(--color-muted);
}
.lp-mini-actions > span.is-current {
  border-color: var(--color-accent);
  color: var(--color-ink);
}
.lp-mini-apps {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}
.lp-mini-apps span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.lp-mini-apps .is-word {
  background: #2b579a;
}
.lp-mini-apps .is-excel {
  background: #217346;
}
.lp-mini-apps .is-powerpoint {
  background: #c43e1c;
}
.lp-mini-label {
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--lp-faint);
}
.lp-mini-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid var(--lp-glass-rule);
  font-size: 12px;
  color: var(--color-ink);
}
.lp-mini-project:last-child {
  border-bottom: 0;
}
.lp-mini-project > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-muted);
}
.lp-mini-brand {
  gap: 12px;
}
.lp-mini-brand .lp-mini-head {
  justify-content: flex-start;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lp-glass-rule);
  font-size: 13px;
  font-weight: 600;
}
.lp-mini-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px dashed var(--lp-faint);
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 400;
  color: var(--lp-faint);
}
.lp-mini-bubble {
  align-self: flex-end;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--lp-glass-hi);
  font-size: 11px;
  color: var(--color-ink);
}
.lp-mini-reply {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

/* core work */
.lp-monitor {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
}
.lp-monitor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 24px;
  border-bottom: 1px solid var(--lp-glass-rule);
}
.lp-monitor-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-monitor-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}
.lp-monitor-tab {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-muted);
}
.lp-monitor-name + .lp-monitor-tab {
  margin-left: 0;
}
.lp-monitor-tab + .lp-monitor-tab {
  margin-left: -22px;
}
.lp-monitor-tab.is-current {
  background: var(--lp-glass-hi);
  color: var(--color-ink);
}
.lp-monitor-team {
  font-size: 13px;
  color: var(--color-muted);
}
.lp-monitor-body {
  display: grid;
  grid-template-columns: 1fr 400px;
}
.lp-camera {
  position: relative;
  height: 500px;
  background: #0b0d11;
  overflow: hidden;
}
.lp-camera-sketch,
.lp-camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lp-camera-video {
  object-fit: cover;
}
.lp-camera-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #e8ecf2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.lp-camera-bar > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-pulse-rec {
  width: 7px;
  height: 7px;
  background: #ff5a4f;
}
.lp-camera-box {
  position: absolute;
  left: 50.5%;
  top: 50%;
  width: 9%;
  height: 28%;
  border: 2px solid #ffb648;
  border-radius: 3px;
}
.lp-camera[data-playing] .lp-camera-box {
  display: none;
}
.lp-camera-box span {
  position: absolute;
  left: -2px;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 3px 7px;
  white-space: nowrap;
  background: #ffb648;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #111;
}
.lp-camera-note {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(232, 236, 242, 0.7);
}
.lp-agents {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 20px;
  border-left: 1px solid var(--lp-glass-rule);
}
.lp-agent {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--lp-glass-rule);
}
.lp-agent-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--lp-glass-rule);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
}
.lp-agent-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-agent-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
.lp-agent-detail {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-muted);
}
.lp-waiting {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--color-accent);
  font-size: 11px;
  color: var(--color-accent);
}
.lp-pilot {
  margin-top: 96px;
}
/* The label sits on a 16px line, as the design's inline label does. */
body.page-landing main .lp-pilot-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
.lp-pilot-title span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lp-faint);
}
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.lp-steps li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px 36px;
}
.lp-steps li:first-child {
  padding-left: 0;
}
.lp-steps li:last-child {
  padding-right: 0;
}
.lp-steps li + li {
  border-left: 1px solid var(--color-rule);
}
.lp-step-number {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.lp-step-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.lp-step-detail {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}

/* results */
.lp-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 64px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.lp-case {
  display: flex;
  flex-direction: column;
  padding: 48px 48px 52px 0;
  transition: background-color 0.3s;
}
.lp-case:hover {
  background-color: var(--color-accent-tint);
}
.lp-case:nth-child(even) {
  padding: 48px 0 52px 48px;
  border-left: 1px solid var(--color-rule);
}
.lp-case:nth-child(n + 3) {
  border-top: 1px solid var(--color-rule);
}
.lp-case-sector {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lp-faint);
}
.lp-case-value {
  margin-top: 40px;
  font-size: 76px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--color-ink);
}
.lp-case-value.is-phrase {
  font-size: 56px;
}
.lp-case-result {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-ink);
}
.lp-case-detail {
  margin-top: 12px;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}

/* security */
.lp-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.lp-points li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px 32px;
}
.lp-points li:first-child {
  padding-left: 0;
}
.lp-points li:last-child {
  padding-right: 0;
}
.lp-points li + li {
  border-left: 1px solid var(--color-rule);
}
.lp-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-accent);
}
body.page-landing main .lp-point-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
body.page-landing main .lp-point-detail {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}
/* The approval boundary leads the section instead of trailing the four points. */
body.page-landing main .lp-maintenance {
  color: var(--lp-sub);
}
.lp-compare {
  margin-top: 84px;
  padding-top: 64px;
  border-top: 1px solid var(--color-rule);
}
.lp-compare-eyebrow {
  display: block;
  margin-bottom: 18px;
}
.lp-compare-table {
  width: 100%;
  border: 1px solid var(--color-rule);
  border-collapse: collapse;
  table-layout: fixed;
}
body.page-landing main .lp-compare-table caption {
  margin: 0 0 34px;
  caption-side: top;
  text-align: left;
  max-width: 820px;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.lp-compare-table th,
.lp-compare-table td {
  box-sizing: border-box;
  padding: 30px 28px;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
  text-align: left;
}
.lp-compare-table tr > :not(:last-child) {
  border-right: 1px solid var(--color-rule);
}
.lp-compare-table tbody tr:last-child > * {
  border-bottom: 0;
}
.lp-compare-table thead th {
  padding: 22px 28px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--lp-faint);
  background: var(--color-surface);
}
.lp-compare-table thead th:first-child,
.lp-compare-table tbody th {
  width: 26.67%;
}
/* The row-label column is a label rail, not a third answer. */
.lp-compare-table tbody th {
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-body);
  background: var(--color-surface);
}
/* The Matrix column is the answer the section is making; it reads as the raised one. */
.lp-compare-table .is-matrix {
  background: rgba(74, 163, 255, 0.07);
  border-left: 2px solid rgba(74, 163, 255, 0.45);
  border-right: 2px solid rgba(74, 163, 255, 0.45);
}
.lp-compare-table thead th.is-matrix {
  border-top: 3px solid var(--color-accent);
  background: rgba(74, 163, 255, 0.12);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
}
.lp-compare-mark {
  display: inline-flex;
  margin-right: 9px;
  vertical-align: -2px;
  color: var(--color-accent);
}
.lp-compare-table tbody tr:last-child .is-matrix {
  border-bottom: 2px solid rgba(74, 163, 255, 0.45);
}
.lp-compare-table td {
  font-size: 15px;
}
.lp-compare-table td > span {
  display: inline-block;
  vertical-align: top;
}
.lp-compare-table td > .lp-compare-label {
  display: none;
}
.lp-compare-icon {
  width: 22px;
  margin-right: 14px;
  padding-top: 3px;
  color: var(--color-accent);
}
.lp-compare-icon.is-cloud {
  color: var(--lp-faint);
}
.lp-compare-copy {
  display: inline-flex !important;
  flex-direction: column;
  gap: 10px;
  width: calc(100% - 36px);
}
.lp-compare-copy strong {
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-ink);
}
.lp-compare-copy span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-sub);
}
.lp-compare-table td:not(.is-matrix) .lp-compare-copy strong,
.lp-compare-table td:not(.is-matrix) .lp-compare-copy span {
  color: var(--color-muted);
}
.lp-compare-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-top: 28px;
}
/* The boundary note is set to be read, not to be stepped over. */
body.page-landing main .lp-compare-foot p {
  padding-left: 16px;
  border-left: 2px solid var(--color-rule-strong);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-body);
}
.lp-compare-foot > div {
  display: flex;
  flex-shrink: 0;
  gap: 36px;
}

/* industries */
.lp-sectors-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.lp-sectors-grid li {
  display: flex;
}
.lp-sectors-grid li + li {
  border-left: 1px solid var(--color-rule);
}
body.page-landing main a.lp-sector {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 22px;
  padding: 36px 32px 40px;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 0.3s;
}
.lp-sectors-grid li:first-child a.lp-sector {
  padding-left: 0;
}
.lp-sectors-grid li:last-child a.lp-sector {
  padding-right: 0;
}
body.page-landing main a.lp-sector:hover {
  background-color: var(--color-accent-tint);
}
.lp-sector-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-accent);
}
.lp-sector-name {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.lp-sector-detail {
  flex: 1;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}
.lp-sector .lp-row-arrow {
  justify-content: flex-start;
  padding-top: 0;
}
body.page-landing main .lp-also {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: normal;
  color: var(--color-muted);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .lp-pulse {
    animation: lp-pulse 1.6s ease-in-out infinite;
  }
  html:not(.motion-paused) .lp-camera-box {
    animation: lp-box 6s ease-in-out infinite;
  }
  html:not(.motion-paused) .lp-agent {
    animation: lp-agent 6s ease-in-out infinite;
  }
  html:not(.motion-paused) .lp-agent:nth-child(2) {
    animation-delay: 0.7s;
  }
  html:not(.motion-paused) .lp-agent:nth-child(3) {
    animation-delay: 1.4s;
  }
  html:not(.motion-paused) .lp-agent:nth-child(4) {
    animation-delay: 2.1s;
  }
}
@keyframes lp-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes lp-box {
  0%,
  8% {
    opacity: 0;
    transform: scale(1.15);
  }
  14%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lp-agent {
  0%,
  10% {
    opacity: 0.35;
  }
  18%,
  100% {
    opacity: 1;
  }
}

/* ---------- tablets and phones (below the pinned stage) ---------- */
@media (max-width: 1151px) {
  :root:not([data-lp-mode='pinned']) .lp-box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    column-gap: 40px;
    padding: 0 48px;
  }
  /* Outside the pinned stage the hero is a column of its own. Its heading keeps "your whole
     company." on one line (non-breaking spaces in home.mjs), and that line is 9.3 times the font
     size wide, so from here down the heading shrinks below its size until the line fits the
     column: it never runs into the picture beside it (900 to 1000 px) or past a phone's edge. The
     first value is for browsers without container units, and only helps on phones, where the
     column is the screen less its margins. Wider, the design's size already clears the picture. */
  :root:not([data-lp-mode='pinned']) .lp-hero {
    container-type: inline-size;
  }
  :root:not([data-lp-mode='pinned']) body.page-landing main .lp-hero h1 {
    font-size: min(var(--lp-hero-size), calc((100vw - 48px) / 9.9));
    font-size: min(var(--lp-hero-size), 10.4cqi);
  }
  :root:not([data-lp-mode='pinned']) .lp-hero {
    padding: 72px 0 88px;
  }
  :root:not([data-lp-mode='pinned']) .lp-figure-hero {
    margin-right: -48px;
  }
  :root:not([data-lp-mode='pinned']) .lp-chapter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    column-gap: 40px;
    padding: 96px 0;
  }
  body.page-landing main .lp-hero h1 {
    --lp-hero-size: 56px;
  }
  body.page-landing main :is(.lp-chapter-title, .lp-title) {
    font-size: 46px;
  }
  /* Three proof points stay in one row, never two and a lone third. */
  .lp-proof {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 22px 28px;
    width: auto;
  }
  .lp-proof-rule {
    display: none;
  }
  .lp-section {
    padding: 128px 48px 0;
  }
  .lp-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 48px;
  }
  .lp-view {
    margin-top: 56px;
  }
  .lp-app {
    grid-template-columns: 196px 1fr;
  }
  .lp-app-main {
    padding: 28px 28px 30px;
  }
  .lp-tools,
  .lp-points,
  .lp-sectors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-tool:nth-child(odd),
  .lp-points li:nth-child(odd),
  .lp-sectors-grid li:nth-child(odd) {
    border-left: 0;
  }
  .lp-tool:nth-child(odd),
  .lp-points li:nth-child(odd),
  .lp-sectors-grid li:nth-child(odd) a.lp-sector {
    padding-left: 0;
  }
  .lp-tool:nth-child(even),
  .lp-points li:nth-child(even),
  .lp-sectors-grid li:nth-child(even) a.lp-sector {
    padding-right: 0;
  }
  .lp-tool:nth-child(n + 3) {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--color-rule);
  }
  .lp-points li:nth-child(n + 3),
  .lp-sectors-grid li:nth-child(n + 3) {
    border-top: 1px solid var(--color-rule);
  }
  /* Five industries in two columns: the last one takes the whole row. */
  .lp-sectors-grid li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body.page-landing main .lp-sectors-grid li:nth-child(odd) a.lp-sector {
    padding-left: 0;
  }
  body.page-landing main .lp-sectors-grid li:nth-child(even) a.lp-sector {
    padding-right: 0;
  }
  .lp-monitor-body {
    grid-template-columns: 1fr;
  }
  .lp-camera {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .lp-agents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    border-left: 0;
    border-top: 1px solid var(--lp-glass-rule);
  }
  .lp-case,
  .lp-case:nth-child(even) {
    padding: 40px 32px 44px 0;
  }
  .lp-case:nth-child(even) {
    padding: 40px 0 44px 32px;
  }
  .lp-case-value {
    font-size: 64px;
  }
  .lp-case-value.is-phrase {
    font-size: 48px;
  }
  .lp-compare-table th,
  .lp-compare-table td,
  .lp-compare-table thead th {
    padding: 24px 20px;
  }
}

@media (max-width: 899px) {
  :root:not([data-lp-mode='pinned']) .lp-box {
    display: flex;
    flex-direction: column;
  }
  :root:not([data-lp-mode='pinned']) .lp-hero {
    order: 1;
  }
  :root:not([data-lp-mode='pinned']) .lp-figure-hero {
    order: 2;
  }
  :root:not([data-lp-mode='pinned']) .lp-chapters {
    order: 3;
  }
  :root:not([data-lp-mode='pinned']) .lp-hero {
    padding: 64px 0 40px;
  }
  :root:not([data-lp-mode='pinned']) .lp-figure-hero {
    margin: 0 -48px 0 auto;
    width: min(100% + 48px, 760px);
  }
  :root:not([data-lp-mode='pinned']) .lp-chapter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 80px 0;
  }
  :root:not([data-lp-mode='pinned']) .lp-chapter > .lp-figure {
    order: 2;
    align-self: center;
    width: min(100%, 480px);
    margin-top: 32px;
  }
  .lp-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .lp-app {
    grid-template-columns: 1fr;
  }
  .lp-app-side {
    display: none;
  }
  .lp-compare-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .lp-compare-foot > div {
    flex-wrap: wrap;
    /* A wrapped row stays a full 44 px target apart: each link reaches 12.5 px past its line. */
    gap: 26px 28px;
  }
}

@media (max-width: 767px) {
  :root:not([data-lp-mode='pinned']) .lp-sticky {
    padding-top: 64px;
  }
  :root:not([data-lp-mode='pinned']) .lp-box {
    padding: 0 24px;
  }
  :root:not([data-lp-mode='pinned']) .lp-hero {
    padding: 48px 0 32px;
  }
  :root:not([data-lp-mode='pinned']) .lp-figure-hero {
    margin: 0 -24px;
    width: auto;
  }
  :root:not([data-lp-mode='pinned']) .lp-chapter {
    padding: 72px 0;
  }
  :root:not([data-lp-mode='pinned']) .lp-chapter > .lp-figure {
    width: min(100%, 420px);
  }
  .lp-eyebrow,
  .lp-hero-eyebrow,
  .lp-chapter .lp-eyebrow,
  .lp-section .lp-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
  }
  body.page-landing main .lp-hero h1 {
    --lp-hero-size: 44px;
    margin-top: 18px;
    line-height: 1;
  }
  body.page-landing main .lp-hero-lead {
    margin-top: 22px;
    font-size: 17.5px;
  }
  .lp-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 32px;
  }
  body.page-landing main .lp-hero-actions a.lp-button {
    height: 52px;
  }
  /* One column of one-line points: each label's line break gives way to its space. */
  .lp-proof {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 36px;
    white-space: normal;
  }
  .lp-proof-item {
    gap: 10px;
    font-size: 14.5px;
  }
  .lp-proof-item br {
    display: none;
  }
  .lp-proof-item svg {
    width: 22px;
    height: 22px;
  }
  body.page-landing main :is(.lp-chapter-title, .lp-title) {
    margin-top: 18px;
    font-size: 38px;
    line-height: 1.04;
  }
  body.page-landing main :is(.lp-chapter-lead, .lp-head-lead) {
    font-size: 16.5px;
  }
  .lp-descriptors {
    margin-top: 22px;
    padding: 22px 0;
  }
  .lp-figures {
    column-gap: 24px;
    row-gap: 24px;
    margin-top: 32px;
  }
  .lp-figures li {
    padding-top: 18px;
  }
  .lp-figure-number {
    font-size: 40px;
  }
  .lp-figure-label {
    font-size: 14px;
  }
  body.page-landing main a.lp-row {
    grid-template-columns: 1fr 20px;
    row-gap: 6px;
    padding: 16px 0;
  }
  .lp-row-key {
    grid-column: 1;
    grid-row: 1;
  }
  .lp-row-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 15px;
  }
  .lp-row-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .lp-tiers li {
    padding: 18px 10px 0;
  }
  .lp-tier-value {
    font-size: 32px;
  }
  .lp-tier-name {
    font-size: 14px;
  }
  .lp-tier-detail {
    font-size: 13px;
  }
  .lp-notes {
    margin-top: 28px;
    font-size: 14px;
  }
  .lp-section {
    padding: 104px 24px 0;
  }
  .lp-view {
    margin-top: 40px;
  }
  .lp-app-main {
    padding: 22px 16px 20px;
  }
  .lp-app-thread {
    gap: 20px;
    margin-top: 22px;
  }
  .lp-app-ask {
    max-width: 86%;
    padding: 10px 14px;
    font-size: 14px;
  }
  .lp-app-answer {
    grid-template-columns: 26px 1fr;
    gap: 10px;
  }
  body.page-landing main .lp-app-answer p {
    font-size: 14.5px;
    line-height: 1.58;
  }
  .lp-app-avatar {
    width: 24px;
    height: 24px;
  }
  .lp-app-files,
  .lp-app-chips {
    flex-wrap: wrap;
  }
  .lp-tools {
    grid-template-columns: 1fr;
    margin-top: 44px;
    padding: 32px 0 36px;
  }
  .lp-tool,
  .lp-tool:nth-child(odd),
  .lp-tool:nth-child(even) {
    padding: 0;
    border-left: 0;
  }
  .lp-tool + .lp-tool,
  .lp-tool:nth-child(n + 3) {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--color-rule);
  }
  .lp-monitor-bar {
    height: 52px;
    padding: 0 16px;
  }
  .lp-monitor-tabs {
    gap: 16px;
  }
  .lp-monitor-tab:not(.is-current),
  .lp-monitor-team {
    display: none;
  }
  .lp-camera-bar {
    padding: 12px 12px;
    font-size: 9.5px;
  }
  .lp-camera-box span {
    font-size: 9px;
  }
  .lp-agents {
    grid-template-columns: 1fr;
    padding: 4px 16px 12px;
  }
  .lp-agent:last-child {
    border-bottom: 0;
  }
  .lp-pilot {
    margin-top: 72px;
  }
  .lp-steps {
    grid-template-columns: 1fr;
  }
  .lp-steps li,
  .lp-steps li:first-child,
  .lp-steps li:last-child {
    padding: 26px 0 28px;
  }
  .lp-steps li + li {
    border-left: 0;
    border-top: 1px solid var(--color-rule);
  }
  .lp-cases {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }
  .lp-case,
  .lp-case:nth-child(even) {
    padding: 36px 0 40px;
    border-left: 0;
  }
  .lp-case + .lp-case {
    border-top: 1px solid var(--color-rule);
  }
  .lp-case-value {
    margin-top: 28px;
    font-size: 56px;
  }
  .lp-case-value.is-phrase {
    font-size: 42px;
  }
  .lp-points {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }
  .lp-points li,
  .lp-points li:first-child,
  .lp-points li:last-child {
    padding: 22px 0 24px;
    border-left: 0;
  }
  .lp-points li + li {
    border-top: 1px solid var(--color-rule);
  }
  .lp-compare {
    margin-top: 64px;
  }
  /* The comparison reads as one block per question, each answer labelled. */
  .lp-compare-table,
  .lp-compare-table tbody,
  .lp-compare-table tr,
  .lp-compare-table th,
  .lp-compare-table td {
    display: block;
    width: auto;
  }
  .lp-compare-table {
    border: 0;
  }
  .lp-compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .lp-compare-table tbody tr {
    border: 1px solid var(--color-rule);
  }
  .lp-compare-table tbody tr + tr {
    margin-top: 16px;
  }
  .lp-compare-table tr > :not(:last-child) {
    border-right: 0;
  }
  .lp-compare-table tbody th,
  .lp-compare-table thead th:first-child {
    width: auto;
  }
  .lp-compare-table tbody th,
  .lp-compare-table td {
    padding: 18px 18px;
  }
  .lp-compare-table tbody tr > * {
    border-bottom: 1px solid var(--color-rule);
  }
  .lp-compare-table tbody tr > :last-child {
    border-bottom: 0;
  }
  body.page-landing main .lp-compare-table caption {
    display: block;
    margin-bottom: 24px;
    font-size: 21px;
    line-height: 1.34;
  }
  .lp-compare-table td > .lp-compare-label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-faint);
  }
  .lp-sectors-grid {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }
  .lp-sectors-grid li + li {
    border-left: 0;
    border-top: 1px solid var(--color-rule);
  }
  body.page-landing main .lp-sectors-grid li a.lp-sector {
    padding: 28px 0 30px;
    gap: 16px;
  }
}