/* Product pages in the homepage's language (Xinyu, October 6, 2026; `templates/product-landing.mjs`).
   Loaded after home.css on those routes only. Type, colour and spacing are the Landing V4 values
   (v4.css tokens, home.css sizes).

   One small set of forms (DESIGN.md, "Product pages"):
   - every section opens with the blue eyebrow and the two-tone title, full width or in a column;
   - lists, figures, steps and questions are ruled with thin lines, never boxed;
   - a product view sits in the homepage's glass, beside its copy (a split) or under its head;
   - cards are kept for the things a buyer chooses between: the three layers, the two ways to pay
     and the three configurations.
   Sizes: 56px titles, 18px leads, 21px step and item titles, 15–16px text, 11.5px mono labels. */

/* ---------- page frame ---------- */
/* The breadcrumb sits under the fixed header, as on every inner page; the stage follows it. */
.pl-page main > .breadcrumb {
  position: relative;
  z-index: 2;
  padding-top: 92px;
}
:root:not([data-lp-mode='pinned']) .pl-story .lp-sticky {
  padding-top: 0;
}
.pl-story .lp-backdrop {
  min-height: 0;
  height: 100%;
}
:root:not([data-lp-mode='pinned']) .pl-story .lp-hero {
  padding: 64px 0 96px;
}
.pl-section {
  padding-top: 144px;
}
.pl-numbers {
  padding-top: 24px;
}
.pl-after-head {
  margin-top: 56px;
}

/* Pieces drawn for the inner pages keep their own sizing (border-box) inside the homepage's
   sections, which size the homepage's way (content-box). */
.pl-bb,
.pl-bb :where(*, *::before, *::after),
.pl-hero-figure,
.pl-hero-figure :where(*, *::before, *::after),
.pd-layers,
.pd-layers :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* ---------- the hero picture ---------- */
.pl-hero-figure {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
/* /product/: the workspace window fills the picture and the Tower stands at its lower-left
   corner, in front of the window's edge rather than over its apps. */
.pl-hero-figure .pd-hero-stack {
  padding: 0 0 9% 9%;
}
.pl-hero-figure .pd-hero-stack .pd-window-launcher-mini {
  width: 100%;
  margin: 0;
  transform: rotate(-2deg);
  opacity: 0.92;
}
.pl-hero-figure .pd-hero-stack .pd-hero-machine {
  width: 30%;
  margin: 0 0 -12% -12%;
}
.pl-hero-figure .pd-hero-view .lp-caption {
  margin-top: 16px;
}
.pl-hero-figure .pd-hero-machine-wrap {
  display: grid;
  place-items: center;
}
.pl-hero-figure .pd-hero-machine {
  width: min(460px, 86%);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
}

/* ---------- glass: every product view ---------- */
.pl-page .ind-window {
  border: 1px solid rgba(160, 188, 240, 0.18);
  border-radius: 16px;
  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%
  );
  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);
  overflow: hidden;
}
.pl-page .ind-window-bar {
  border-bottom-color: var(--lp-glass-rule);
}
.pl-view {
  position: relative;
  margin: 0;
}
.pl-view > .pl-bb {
  position: relative;
}

/* ---------- type shared by every form ---------- */
.pl-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.pl-label.is-accent {
  color: var(--lp-eyebrow);
}
body.page-landing main .pl-col-lead {
  margin-top: 24px;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-sub);
}
.pl-note {
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}
.pl-case-go {
  margin-top: 28px;
}
.pl-foot {
  margin-top: 28px;
}

/* ---------- ruled: figures ---------- */
.pl-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 30px;
}
.pl-figures li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
}
.pl-figure-number {
  font-size: 50px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}
.pl-figure-label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-muted);
}
/* Beside a product view, or four in a row, the figures are set smaller. */
.pl-split-copy .pl-figure-number,
.pl-in-production .pl-figure-number {
  font-size: 36px;
  letter-spacing: -0.035em;
}

/* ---------- ruled: rows of a name and its line, with an optional icon ---------- */
.pl-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-rule);
}
.pl-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--color-rule);
}
.pl-rows li:has(.pl-row-icon) {
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
}
.pl-row-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 8px;
  color: var(--color-accent);
}
body.page-landing main .pl-rows h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}
body.page-landing main .pl-rows p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---------- ruled: ticks ---------- */
.pl-ticks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pl-ticks li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-body);
}
.pl-ticks li::before {
  content: '✓';
  content: '✓' / '';
  color: var(--color-accent);
}

/* ---------- ruled: a line of stops (steps, the approval flow) ---------- */
.pl-timeline {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 40px;
  margin-top: 64px;
}
.pl-timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 30px;
  border-top: 1px solid var(--color-rule-strong);
}
.pl-timeline li::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}
.pl-flow {
  gap: 0;
}
.pl-flow li {
  padding: 26px 24px 0 0;
}
.pl-flow li::before {
  top: -6px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--lp-faint);
  background: var(--color-paper);
  box-sizing: border-box;
}
.pl-flow .lp-step-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-body);
}
.pl-flow li.is-lit::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(74, 163, 255, 0.18);
}
.pl-flow li.is-lit .lp-step-title {
  font-weight: 600;
  color: var(--color-ink);
}
.pl-flow .lp-step-number {
  color: var(--lp-faint);
}
.pl-flow li.is-lit .lp-step-number {
  color: var(--color-accent);
}

/* ---------- ruled: columns of a title and its text ---------- */
.pl-columns,
.pl-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin-top: 56px;
}
.pl-notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pl-columns li,
.pl-notes li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pl-notes li {
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
}
body.page-landing main .pl-notes h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
}
body.page-landing main .pl-notes p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---------- split: copy beside a product view ---------- */
.pl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 80px;
  align-items: center;
}
.pl-split.is-flipped {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}
/* A title in a column is set one step down, so it keeps to two lines beside the view. */
body.page-landing main :is(.pl-split-copy, .pl-faq-head) .lp-title {
  font-size: 48px;
}
.pl-split.is-flipped > .pl-split-copy {
  order: 2;
}
.pl-split-copy {
  display: flex;
  flex-direction: column;
}
.pl-split-copy > :is(.pl-rows, .pl-ticks, .pl-figures, .pl-label, div) {
  margin-top: 40px;
}
.pl-split-copy > .pl-label + div {
  margin-top: 14px;
}
.pl-split-copy > div + .pl-ticks {
  margin-top: 32px;
}
/* The view takes the height of its copy: the usage records beside the admin list, given the wider
   column so it stays a table. */
.pl-split.is-stretch {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
}
.pl-view.is-fill,
.pl-view.is-fill > .pl-bb {
  display: flex;
  flex-direction: column;
}
.pl-view.is-fill > .pl-bb {
  flex: 1;
}
.pl-view.is-fill .ind-window {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pl-view.is-fill .ind-window-scroll {
  flex: 1 0 auto;
}
/* Beside its list the usage records keep to their window: cells wrap instead of widening the table.
   Narrower, the table reads as labelled blocks and keeps its own sizes. */
@media (min-width: 1152px) {
  .pl-view.is-fill .ind-mock-table {
    width: 100%;
    table-layout: fixed;
  }
  .pl-view.is-fill .ind-mock-table :is(th, td) {
    padding: 12px 14px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 13.5px;
    line-height: 1.4;
  }
  .pl-view.is-fill .pd-audit :is(th, td):nth-child(1) {
    width: 76px;
  }
  .pl-view.is-fill .pd-audit :is(th, td):nth-child(2) {
    width: 100px;
  }
  .pl-view.is-fill .pd-audit :is(th, td):nth-child(3) {
    width: 32%;
  }
}
.pl-split.is-stage {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
}
.pl-stage .hardware-showroom {
  width: 100%;
}

/* ---------- cards: things to choose between ---------- */
.pl-page main .pd-layer,
.pl-price,
.pl-configs {
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
}

/* The three layers widen toward the base, the way the system is built up. */
.pd-layers {
  display: grid;
  gap: 12px;
  margin-top: 64px;
}
.pl-page main .pd-layer {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: 8px 56px;
  padding: 30px 36px;
}
.pl-page main .pd-layer:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-raised);
}
.pl-page main .pd-layer-3 {
  border-color: rgba(74, 163, 255, 0.45);
}
.pl-layer-for {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--lp-eyebrow);
}
.pl-page main .pd-layer strong {
  grid-column: 1;
  font-size: 26px;
  line-height: 1.2;
}
.pl-page main .pd-layer p {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-muted);
}
.pl-layer-go {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 15px;
  color: var(--color-ink);
}
.pl-layer-go svg {
  color: var(--lp-faint);
  transition:
    transform 0.25s,
    color 0.25s;
}
.pd-layer:hover .pl-layer-go svg {
  transform: translateX(4px);
  color: var(--color-accent);
}

/* The two ways to pay, what holds for both, then the two actions. */
.pl-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}
.pl-price {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 36px 38px;
}
.pl-price .lp-case-sector {
  color: var(--lp-eyebrow);
}
body.page-landing main .pl-price h3,
body.page-landing main .pl-config > h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
body.page-landing main .pl-price p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-muted);
}
.pl-pricing .pl-ticks {
  margin-top: 32px;
}
.pl-actions {
  margin-top: 40px;
}

/* The three configurations, Standard framed like the homepage's Matrix column. */
.pl-configs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 64px;
}
.pl-config {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px 32px 34px;
}
.pl-config + .pl-config {
  border-left: 1px solid var(--color-rule);
}
.pl-config.is-matrix {
  background: rgba(74, 163, 255, 0.07);
  box-shadow:
    inset 2px 0 0 rgba(74, 163, 255, 0.45),
    inset -2px 0 0 rgba(74, 163, 255, 0.45),
    inset 0 3px 0 var(--color-accent),
    inset 0 -2px 0 rgba(74, 163, 255, 0.45);
}
.pl-config-tag {
  position: absolute;
  top: 40px;
  right: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
body.page-landing main .pl-config > h3 {
  margin: 0;
  font-size: 24px;
}
.pl-config-people {
  margin-top: 18px;
  font-size: 48px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.pl-config-unit {
  font-size: 15px;
  color: var(--color-muted);
}
body.page-landing main .pl-config-fit {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
}
.pl-config ul {
  flex: 1;
  margin: 18px 0 26px;
  border-top: 1px solid var(--color-rule);
}
.pl-config ul li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-body);
}

/* ---------- the closing line of a section ---------- */
.pl-page main .pl-closing {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 64px;
  padding: 28px 0;
  border: 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: none;
}
.pl-page main .pl-closing strong {
  display: inline;
  font-family: var(--font-body);
  font-size: inherit;
  letter-spacing: normal;
}
body.page-landing main .pl-closing p {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-muted);
}
.pl-closing strong {
  font-weight: 600;
  color: var(--color-ink);
}
.pl-closing .lp-button {
  flex-shrink: 0;
}

/* ---------- comparison tables ---------- */
.pl-compare {
  margin-top: 64px;
}
/* The specification table keeps its column names in view while its rows scroll inside it. */
.pl-table {
  max-height: min(640px, calc(100vh - 160px));
  overflow: auto;
  border: 1px solid var(--color-rule);
  overscroll-behavior: contain;
}
.pl-table .lp-compare-table {
  border: 0;
}
.pl-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.pl-table thead th:not(.is-matrix) {
  background: var(--color-surface);
}
.pl-table thead th.is-matrix {
  /* Opaque, so the rows scroll under it, and theme-aware. */
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}
.pl-table th,
.pl-table td {
  padding-top: 18px;
  padding-bottom: 18px;
}
.pl-table td {
  color: var(--color-body);
}
.pl-table td.is-matrix {
  color: var(--color-ink);
}

/* ---------- Matrix Workspace ---------- */
/* The assistant's three tasks, each with its conversation. */
.pl-page main .assistant-tasks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
}
.pl-page main .assistant-tasks article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
}
.pl-page main .assistant-tasks article .pm-case {
  margin: 18px 0 0;
}
.pl-page main .assistant-tasks h3,
.pl-page main .pd-example-pair h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.pl-page main .assistant-tasks > article > p,
.pl-page main .pd-example-pair > div > p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-muted);
}
/* Side by side, the three tasks share rows: titles, lines and conversations line up whatever the
   wrapping, and the conversations end level. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 801px) {
    .pl-page main .assistant-tasks {
      grid-template-rows: auto auto 1fr;
      row-gap: 0;
    }
    .pl-page main .assistant-tasks article {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      gap: 0;
    }
    .pl-page main .assistant-tasks > article > p {
      margin-top: 8px;
    }
    .pl-page main .assistant-tasks .pm-case,
    .pl-page main .assistant-tasks .pm-case .pm-frame,
    .pl-page main .assistant-tasks .pm-case .pm-window {
      height: 100%;
    }
  }
}

/* The app catalog: one ruled column per group, the custom apps tinted. */
.pl-cats {
  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);
}
.pl-cat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px 30px;
}
.pl-cat:first-child {
  padding-left: 0;
}
.pl-cat + .pl-cat {
  border-left: 1px solid var(--color-rule);
}
.pl-cat.is-custom {
  background: var(--color-accent-tint);
}
.pl-cat-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}
.pl-cat-name svg {
  flex-shrink: 0;
  color: var(--color-accent);
}
.pl-cat ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pl-cat ul li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pl-cat b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-body);
}
.pl-cat ul span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-muted);
}
.pl-cat .lp-link {
  margin-top: auto;
  font-size: 14px;
}

/* Questions, all open: the heading on the left, the answers ruled on the right. */
.pl-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 80px;
  align-items: start;
}
.pl-faq {
  border-top: 1px solid var(--color-rule);
}
.pl-faq .faq-item {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--color-rule);
}
body.page-landing main .pl-faq h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
body.page-landing main .pl-faq p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---------- Matrix Hardware ---------- */
/* How we size it: the room photograph beside the four factors. */
.pl-sizing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 72px;
  align-items: center;
  margin-top: 96px;
}
.pl-sizing .matrix-in-place {
  margin: 0;
}
.pl-sizing .matrix-in-place img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule-strong);
}
.pl-sizing figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.pl-sizing .pl-rows {
  margin-top: 18px;
}

/* Six specifications in one ruled row, the way the homepage sets its points. */
.pl-spec-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.pl-spec-strip li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 20px 28px;
}
.pl-spec-strip li:first-child {
  padding-left: 0;
}
.pl-spec-strip li:last-child {
  padding-right: 0;
}
.pl-spec-strip li + li {
  border-left: 1px solid var(--color-rule);
}
.pl-spec-strip strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}
.pl-spec-strip li > span:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ---------- Custom workflows ---------- */
/* Three levers in ruled columns, each opened by an accent line, then the results in production. */
.pl-levers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 64px;
}
.pl-levers > li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 2px solid var(--color-accent);
}
body.page-landing main .pl-levers h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
body.page-landing main .pl-levers p {
  flex: 1;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-muted);
}
.pl-lever-proof {
  padding-top: 14px;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.pl-in-production {
  margin-top: 96px;
}
.pl-in-production .pl-figures {
  margin-top: 18px;
}
.pl-in-production .pl-label:last-child {
  margin-top: 4px;
}

/* Who provides what, in three ticked lists. */
.pl-share {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 72px;
}
.pl-share .pl-ticks {
  margin-top: 20px;
}

/* The two agent examples, side by side. */
.pl-page main .pd-example-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 64px;
}
.pl-page main .pd-example-pair > div > p {
  margin: 8px 0 24px;
}
.pl-examples .pd-caption {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-faint);
}

/* ---------- the homepage grids with three, four or six items ---------- */
@media (min-width: 768px) {
  .pl-figures-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pl-figures-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pl-split-copy .pl-figures-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1152px) {
  .lp-points.pl-points-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lp-points.pl-points-6 li:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  .lp-points.pl-points-6 li:nth-child(3n) {
    padding-right: 0;
  }
  .lp-points.pl-points-6 li:nth-child(n + 4) {
    border-top: 1px solid var(--color-rule);
  }
  .pl-cases-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pl-cases-3 .lp-case,
  .pl-cases-3 .lp-case:nth-child(even) {
    padding: 44px 36px 48px;
    border-left: 0;
  }
  .pl-cases-3 .lp-case:first-child {
    padding-left: 0;
  }
  .pl-cases-3 .lp-case:last-child {
    padding-right: 0;
  }
  .pl-cases-3 .lp-case + .lp-case {
    border-left: 1px solid var(--color-rule);
  }
  .pl-cases-3 .lp-case:nth-child(n + 3) {
    border-top: 0;
  }
  .pl-cases-3 .lp-case-value {
    font-size: 64px;
  }
  .pl-cases-3 .lp-case-value.is-phrase {
    font-size: 44px;
  }
}

/* ---------- tablet ---------- */
@media (max-width: 1151px) {
  .pl-section {
    padding-top: 112px;
  }
  body.page-landing main :is(.pl-split-copy, .pl-faq-head) .lp-title {
    font-size: 42px;
  }
  .pl-split.is-stretch {
    align-items: start;
  }
  .pl-view.is-fill .ind-window-scroll {
    flex: none;
    overflow: visible;
  }
  /* Beside the picture the hero column is narrow, so the three proof points wrap inside it. */
  .pl-hero .lp-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
    white-space: normal;
  }
  .pl-hero .lp-proof-item {
    gap: 10px;
    font-size: 14.5px;
  }
  .pl-hero .lp-proof-item svg {
    width: 22px;
    height: 22px;
  }
  .pl-page main .pd-layer {
    gap: 8px 36px;
    padding: 26px 28px;
  }
  .pl-timeline:not(.pl-flow) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
  .pl-split,
  .pl-split.is-flipped,
  .pl-faq-layout,
  .pl-sizing {
    gap: 48px;
  }
  .pl-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pl-cat,
  .pl-cat:first-child {
    padding: 26px 22px 28px;
    border-left: 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .pl-cat:nth-child(3n + 1) {
    padding-left: 0;
  }
  .pl-cat:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--color-rule);
  }
  .pl-cat.is-custom {
    grid-column: span 2;
  }
  .pl-config {
    padding: 30px 22px 28px;
  }
  .pl-config-tag {
    position: static;
  }
  .pl-spec-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pl-spec-strip li,
  .pl-spec-strip li:first-child,
  .pl-spec-strip li:last-child {
    padding: 22px 20px 24px;
    border-left: 0;
  }
  .pl-spec-strip li:nth-child(3n + 1) {
    padding-left: 0;
  }
  .pl-spec-strip li:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--color-rule);
  }
  .pl-spec-strip li:nth-child(n + 4) {
    border-top: 1px solid var(--color-rule);
  }
}

/* ---------- narrow ---------- */
@media (max-width: 899px) {
  .pl-hero-figure {
    order: 2;
    justify-self: center;
    width: min(100%, 640px);
    padding-bottom: 24px;
  }
  .pl-page main .pd-layer {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-page main .pd-layer p,
  .pl-layer-go {
    grid-column: 1;
    grid-row: auto;
  }
  .pl-layer-go {
    margin-top: 10px;
  }
  .pl-split,
  .pl-split.is-flipped,
  .pl-split.is-stage,
  .pl-split.is-stretch,
  .pl-faq-layout,
  .pl-sizing,
  .pl-columns,
  .pl-notes,
  .pl-prices,
  .pl-share,
  .pl-levers,
  .pl-page main .pd-example-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .pl-prices {
    gap: 16px;
  }
  .pl-split.is-flipped > .pl-split-copy {
    order: 0;
  }
  .pl-split.is-stretch {
    align-items: start;
  }
  .pl-configs {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-config + .pl-config {
    border-left: 0;
    border-top: 1px solid var(--color-rule);
  }
  .pl-page main .pl-closing {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .pl-table {
    max-height: none;
    overflow: visible;
    border: 0;
  }
  .pl-table thead th {
    position: static;
  }
}
@media (max-width: 800px) {
  .pl-page main .assistant-tasks {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
}
@media (max-width: 767px) {
  .pl-section {
    padding-top: 88px;
  }
  body.page-landing main :is(.pl-split-copy, .pl-faq-head) .lp-title {
    font-size: 38px;
  }
  .pl-page main > .breadcrumb {
    padding-top: 80px;
  }
  :root:not([data-lp-mode='pinned']) .pl-story .lp-hero {
    padding: 40px 0 32px;
  }
  .pl-hero .lp-proof {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pl-figures {
    column-gap: 24px;
  }
  .pl-figures .pl-figure-number {
    font-size: 36px;
  }
  .pd-layers,
  .pl-timeline,
  .pl-cats,
  .pl-configs,
  .pl-spec-strip,
  .pl-levers,
  .pl-page main .assistant-tasks,
  .pl-page main .pd-example-pair {
    margin-top: 44px;
  }
  .pl-page main .pd-layer-1,
  .pl-page main .pd-layer-2 {
    margin-inline: 0;
  }
  .pl-timeline,
  .pl-timeline:not(.pl-flow) {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-left: 1px solid var(--color-rule-strong);
  }
  .pl-timeline li,
  .pl-flow li {
    padding: 0 0 30px 26px;
    border-top: 0;
  }
  .pl-timeline li:last-child {
    padding-bottom: 0;
  }
  .pl-timeline li::before {
    top: 4px;
    left: -5px;
  }
  .pl-flow li::before {
    left: -6px;
  }
  .pl-price {
    padding: 26px 22px 28px;
  }
  .pl-cats,
  .pl-spec-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-cat,
  .pl-cat:first-child,
  .pl-cat:nth-child(3n + 1),
  .pl-cat:not(:nth-child(3n + 1)),
  .pl-spec-strip li,
  .pl-spec-strip li:first-child,
  .pl-spec-strip li:last-child,
  .pl-spec-strip li:nth-child(3n + 1),
  .pl-spec-strip li:not(:nth-child(3n + 1)) {
    padding: 22px 0 24px;
    border-left: 0;
  }
  .pl-spec-strip li + li {
    border-top: 1px solid var(--color-rule);
  }
  .pl-cat.is-custom {
    grid-column: auto;
    padding: 22px 18px 24px;
  }
}

/* ---------- Customers: the hub and the stories (Xinyu, October 6, 2026) ---------- */
/* A result: the large figure over its caption. */
.cs-value {
  display: block;
  font-size: 50px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}
.cs-caption {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-muted);
}
.cs-story .lp-link,
.cs-featured .lp-link {
  display: inline-flex;
  margin-top: auto;
  padding-top: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
}
/* A hero without a picture reads across the page. */
.pl-story .lp-box:not(:has(.pl-hero-figure)) .lp-hero {
  grid-column: 1 / -1;
  max-width: 900px;
}
body.page-landing main .pl-story .lp-box:not(:has(.pl-hero-figure)) .lp-hero h1 {
  max-width: none;
}
body.page-landing main .pl-story .lp-box:not(:has(.pl-hero-figure)) .lp-hero-lead {
  max-width: 620px;
}

/* The featured story: the place on the left, the result and the customer's words on the right. */
body.page-landing main a.cs-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  margin-top: 56px;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.25s;
}
body.page-landing main a.cs-featured:hover {
  border-color: var(--color-accent);
}
.cs-featured-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cs-featured-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 44px 48px 44px;
}
.cs-featured-result .cs-value {
  margin-top: 12px;
  font-size: 64px;
}
.cs-quote-line {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--lp-sub);
}

/* Every other story as its result: the homepage's results grid, each cell a link. */
.cs-stories .lp-case {
  padding: 0;
}
.cs-stories .lp-case:nth-child(even) {
  padding: 0;
}
body.page-landing main a.cs-story {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  padding: 44px 48px 48px 0;
  color: var(--color-ink);
  text-decoration: none;
  box-sizing: border-box;
}
.cs-stories .lp-case:nth-child(even) a.cs-story {
  padding: 44px 0 48px 48px;
}
.cs-stories .lp-case {
  display: flex;
}
.cs-stories .lp-case-detail {
  margin-top: 14px;
}

/* Smaller deployments in brief: one ruled row each. */
.cs-brief {
  margin-top: 56px;
  border-top: 1px solid var(--color-rule);
}
.cs-brief li {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--color-rule);
}
.cs-brief-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}
.cs-brief .cs-value {
  font-size: 36px;
}

/* A story's first screen: the result is the picture. The title takes the wider column, a step
   smaller than a page title, so it keeps to three lines. */
:root:not([data-lp-mode='pinned']) .cs-story-hero .lp-box {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  column-gap: 64px;
}
body.page-landing main .cs-story-hero .lp-hero h1 {
  --lp-hero-size: 52px;
  max-width: none;
}
.cs-hero-results {
  align-self: center;
  padding: 8px 0 8px 56px;
  border-left: 1px solid var(--color-rule-strong);
}
.cs-hero-lead .cs-value {
  font-size: 72px;
  letter-spacing: -0.05em;
}
.cs-hero-lead.is-phrase .cs-value {
  font-size: 44px;
  letter-spacing: -0.035em;
}
.cs-hero-lead .cs-caption {
  font-size: 17px;
  color: var(--color-body);
}
.cs-hero-results ul {
  margin-top: 32px;
  border-top: 1px solid var(--color-rule);
}
.cs-hero-results li {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--color-rule);
}
.cs-hero-results li .cs-value {
  font-size: 32px;
  letter-spacing: -0.035em;
}

/* The facts at a glance, in one ruled row. */
.cs-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.cs-facts > div {
  padding: 22px 24px 24px;
}
.cs-facts > div:first-child {
  padding-left: 0;
}
.cs-facts > div + div {
  border-left: 1px solid var(--color-rule);
}
.cs-facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.cs-facts dd {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-ink);
}
.cs-steps .lp-step-detail {
  font-size: 16px;
  color: var(--color-body);
}
.cs-view {
  max-width: 1040px;
  margin: 64px auto 0;
}

/* The customer's own words, set large. */
.cs-quote {
  margin: 0;
  max-width: 980px;
  padding-left: 32px;
  border-left: 2px solid var(--color-accent);
}
body.page-landing main .cs-quote p {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.cs-quote footer {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lp-faint);
}

@media (max-width: 1151px) {
  body.page-landing main .cs-story-hero .lp-hero h1 {
    --lp-hero-size: 44px;
  }
  .cs-hero-results {
    padding-left: 36px;
  }
  .cs-hero-lead .cs-value {
    font-size: 60px;
  }
  .cs-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cs-facts > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .cs-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--color-rule);
  }
}
@media (max-width: 899px) {
  body.page-landing main a.cs-featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .cs-featured-copy {
    padding: 28px 24px 30px;
  }
  .cs-hero-results {
    order: 2;
    padding: 0 0 32px;
    border-left: 0;
  }
  .cs-brief li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .cs-stories .lp-case,
  .cs-stories .lp-case:nth-child(even) {
    padding: 0;
  }
  body.page-landing main a.cs-story,
  .cs-stories .lp-case:nth-child(even) a.cs-story {
    padding: 32px 0 36px;
  }
  .cs-featured-result .cs-value,
  .cs-hero-lead .cs-value {
    font-size: 52px;
  }
  .cs-hero-lead.is-phrase .cs-value {
    font-size: 38px;
  }
  body.page-landing main .cs-story-hero .lp-hero h1 {
    --lp-hero-size: 34px;
  }
  .cs-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .cs-facts > div,
  .cs-facts > div:nth-child(odd) {
    padding: 18px 0 20px;
    border-left: 0;
  }
  .cs-facts > div + div {
    border-top: 1px solid var(--color-rule);
  }
  body.page-landing main .cs-quote p {
    font-size: 24px;
  }
  .cs-quote {
    padding-left: 20px;
  }
}