/* ============================================================================
   DNX Panorama landing page.

   Everything page-specific lives here. The DNX Experience design system
   supplies the tokens (../ds/tokens/*.css), the base element voice
   (../ds/tokens/base.css) and the three shared components (../ds/components.css);
   this file only composes them into sections.

   House rules inherited from the brand guidelines, worth stating because they
   drive most of what follows:
     · FLAT. Boxes have square corners. Only buttons, chips and tags are round.
     · Hairlines, not shadows. Grids are drawn as a 1px gap over a border-
       coloured background, so every divider is exactly one pixel at any DPR.
     · Empower (orange) is a CTA colour ONLY. It is never a background.
     · Headings are Questrial at weight 400 (300 for the hero), sentence case.
   ============================================================================ */

html { scroll-behavior: smooth; }

body {
  background: var(--dnx-white);
  color: var(--dnx-secure);
}

::selection { background: var(--dnx-future); color: var(--dnx-secure); }

a:hover { color: var(--dnx-secure); }

/* The brand SVGs carry width/height attributes so the layout is stable before
   they load. Every use site pins the HEIGHT, so the width has to be released,
   otherwise the attribute's 854px becomes the used width and the mark stretches
   across its flex row. */
img { max-width: 100%; }
.lp-nav-logo,
.lp-footer-logo,
.lp-sponsor-mark,
.lp-edition-mark,
.lp-gateway-brand img { width: auto; }

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

/* ------------------------------------------------------------- scaffold --- */

/* 1180px is the comp's content width; the 40px gutter is part of it. */
.lp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.lp-section { padding-top: 88px; padding-bottom: 88px; }

/* Full-bleed colour bands. The dark ones also carry data-theme="secure" so the
   design system's semantic tokens flip with them. */
.lp-band-secure { background: var(--dnx-secure); }
.lp-band-adapt  { background: var(--dnx-adapt); }

/* Hairline grid: children sit on a 1px gap that lets the container's own
   background show through as the divider. */
.lp-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lp-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-num { text-align: right; }

/* ------------------------------------------------------------ section UI --- */

.lp-kicker { color: var(--dnx-evolve); margin-bottom: 14px; }
.lp-band-secure .lp-kicker { color: var(--dnx-future); }

.lp-h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lp-band-secure .lp-h2 { color: #fff; }

.lp-lede {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 16px;
}
.lp-band-secure .lp-lede { color: rgba(255, 255, 255, 0.78); }

.lp-intro { max-width: 700px; }
.lp-intro-wide { max-width: 760px; }

/* --------------------------------------------------------------- top bar --- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--dnx-secure);
}
.lp-nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.lp-nav-logo { height: 24px; display: block; }
.lp-nav-tag { color: var(--dnx-future); }
.lp-nav-links { display: flex; gap: 26px; margin-left: 14px; }
.lp-nav-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 300;
  white-space: nowrap;
}
.lp-nav-links a:hover { color: #fff; }
.lp-nav-tagline {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ hero --- */

.lp-hero-inner {
  padding-top: 78px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 52px;
  align-items: center;
}

.lp-eyebrow-live {
  color: var(--dnx-future);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.lp-dot {
  width: 7px;
  height: 7px;
  border-radius: 100px;
  background: var(--dnx-trust);
  display: inline-block;
  flex: none;
}

/* The hero is the one place the brand uses weight 300. The lead clause is held
   back at 72% so the promise in <strong> lands first. */
.lp-h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 54px;
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: balance;
}
.lp-h1 strong { color: #fff; font-weight: 300; }

.lp-hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.7;
  max-width: 500px;
  margin-top: 24px;
}

/* Pre-launch stand-in for the comp's CTA pair: the repo is not public yet, so
   there is nothing honest to link to. */
.lp-hero-notice {
  margin-top: 32px;
  border-left: 2px solid var(--dnx-future);
  background: rgba(255, 255, 255, 0.05);
  padding: 16px 20px;
}
.lp-hero-notice-title { color: #fff; font-size: 15px; }
.lp-hero-notice-body {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 4px;
}

.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.lp-sponsor {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 13px;
}
.lp-sponsor-mark { height: 22px; display: block; opacity: 0.9; flex: none; }
.lp-sponsor p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------- cost dashboard --- */

.lp-dash {
  background: var(--surface-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-dash-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 14px;
}
.lp-dash-range { color: rgba(255, 255, 255, 0.55); }

.lp-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.lp-kpi { background: var(--surface-card); padding: 16px 20px; }
.lp-kpi-label { color: rgba(255, 255, 255, 0.55); }
.lp-kpi-figure {
  font-family: var(--font-heading);
  font-size: 30px;
  color: #fff;
  margin-top: 8px;
  line-height: 1;
}
.lp-kpi-figure.accent { color: var(--dnx-future); }

.lp-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-dash-rows { min-height: 244px; }
.lp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 13px 20px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-base) ease;
}
.lp-row.lp-selected {
  background: var(--surface-muted);
  box-shadow: inset 3px 0 0 var(--dnx-future);
}
.lp-row-label { color: #fff; font-size: 14px; }
.lp-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.lp-row-tag {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-tag);
  padding: 1px 9px;
  font-size: 11px;
  white-space: nowrap;
}
.lp-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lp-row-cost { color: #fff; font-size: 13.5px; }
.lp-row-status { font-size: 12px; }

/* Chips: the dashboard tab controls. Two tone sets, because they appear on
   both Secure and white surfaces. */
.lp-chip {
  border-radius: var(--radius-pill);
  height: 30px;
  padding: 0 15px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}
.lp-chip.active { border-color: var(--dnx-evolve); background: var(--dnx-evolve); color: #fff; }
.lp-chip-dark { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.78); }
.lp-chip-dark.active { border-color: var(--dnx-future); background: var(--dnx-future); color: var(--dnx-secure); }

/* ---------------------------------------------------------- works with ----- */

.lp-compat {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.lp-compat-name { font-family: var(--font-heading); font-size: 19px; color: var(--dnx-secure); }
.lp-compat-name.muted { opacity: 0.7; }
.lp-compat-note { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 420px; }

/* -------------------------------------------------------- 01 / problem ----- */

.lp-problem-grid { margin-top: 40px; }
.lp-cell { background: var(--dnx-white); padding: 30px 28px; }
.lp-cell-accent { background: var(--dnx-adapt); border-top: 2px solid var(--dnx-evolve); }
.lp-claim {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  margin-top: 14px;
  line-height: 1.35;
}
.lp-cell-body { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-top: 10px; }

/* --------------------------------------------------- 02 / capabilities ----- */

.lp-cap-grid { margin-top: 40px; }
.lp-cap { background: var(--dnx-white); padding: 28px 26px 30px; }
.lp-cap-icon { color: var(--dnx-evolve); display: block; height: 28px; }
.lp-cap-icon svg { width: 28px; height: 28px; }
.lp-cap h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19px;
  margin-top: 16px;
  line-height: 1.3;
}
.lp-cap p { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-top: 8px; }

/* ---------------------------------------------------- 03 / attribution ----- */

.lp-attr-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: start;
}

.lp-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lp-chain-tag {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-tag);
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--dnx-secure);
}
.lp-chain-tag.accent { border-color: var(--dnx-evolve); color: var(--dnx-evolve); }
.lp-chain-arrow { color: var(--dnx-future); }

.lp-coverage {
  background: var(--dnx-adapt);
  border: 1px solid var(--border);
  padding: 20px;
  margin-top: 24px;
}
.lp-coverage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-coverage-val { font-family: var(--font-heading); font-size: 20px; color: var(--dnx-secure); }
.lp-coverage-track { height: 8px; background: var(--dnx-cloud); margin-top: 12px; }
.lp-coverage-track > span {
  display: block;
  height: 100%;
  background: var(--dnx-evolve);
  transition: width var(--dur-slower) var(--ease-out-quart);
}
.lp-coverage-note { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; margin-top: 12px; }

/* Shared boxed panel: Adapt header strip over a white body. */
.lp-box { border: 1px solid var(--border); background: var(--dnx-white); min-width: 0; }
.lp-box-head {
  background: var(--dnx-adapt);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.lp-box-title { font-family: var(--font-heading); font-size: 20px; }
.lp-box-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 2px; }
.lp-box-tabs { display: flex; gap: 8px; }

.lp-attr-body { padding: 4px 22px 20px; min-height: 368px; }
.lp-attr-row { padding: 17px 0; border-bottom: 1px solid var(--border); }
.lp-attr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.lp-attr-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-attr-tag {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-tag);
  padding: 2px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.lp-attr-name { font-size: 14.5px; }
.lp-attr-cost { font-family: var(--font-heading); font-size: 16px; }
.lp-attr-track { height: 6px; background: var(--dnx-grey-200); margin-top: 10px; }
.lp-attr-track > span {
  display: block;
  height: 100%;
  background: var(--dnx-evolve);
  transition: width var(--dur-slower) var(--ease-out-quart);
}
.lp-attr-meta {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  flex-wrap: wrap;
}

/* ------------------------------------------------ 04 / service accounts ---- */

.lp-tenant-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  margin-top: 40px;
  align-items: start;
}
.lp-tenant-row {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.lp-tenant-head {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--dnx-grey-100);
  align-items: baseline;
}
.lp-tenant-name { font-size: 14.5px; }
.lp-tenant-acct { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.lp-tenant-reqs { color: var(--text-muted); font-size: 13px; }
.lp-tenant-spend { font-size: 14px; }
.lp-plan {
  display: inline-block;
  border-radius: var(--radius-tag);
  padding: 2px 11px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.lp-plan.good { border-color: var(--dnx-evolve); color: var(--dnx-evolve); }
.lp-plan.warn { border-color: var(--dnx-empower); color: #B06A20; }
.lp-tenant-foot { padding: 14px 22px; color: var(--text-muted); font-size: 13px; }

.lp-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lp-card { border: 1px solid var(--border); background: var(--dnx-white); padding: 24px; min-width: 0; }
.lp-card-title { font-family: var(--font-heading); font-size: 20px; }
.lp-card-sub { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-top: 8px; }

.lp-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}
.lp-code {
  background: var(--dnx-secure);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  padding: 16px;
  overflow-x: auto;
  min-width: 0;
  white-space: pre;
  margin: 0;
}

.lp-quotas { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.lp-quota-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.lp-quota-name { font-family: var(--font-mono); }
.lp-quota-of { color: var(--text-muted); }
.lp-quota-track { height: 8px; background: var(--dnx-grey-200); }
.lp-quota-track > span {
  display: block;
  height: 100%;
  background: var(--dnx-evolve);
  transition: width var(--dur-slower) var(--ease-out-quart);
}
.lp-quota-track > span.warn { background: var(--dnx-empower); }
.lp-quota-note {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------- 05 / architecture ---- */

/* Five tracks: sources | link | gateway | link | models. */
.lp-arch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.lp-arch-col { display: flex; flex-direction: column; gap: 22px; }
.lp-arch-label { color: rgba(255, 255, 255, 0.55); }
.lp-stack-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-stack-item {
  background: var(--surface-card);
  padding: 12px 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.lp-stack-item.first-class { color: #fff; }

.lp-arch-link { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 14px; }
.lp-arch-link .lp-kicker { color: var(--dnx-future); margin-bottom: 0; }
.lp-arch-line { width: 60px; height: 1px; background: rgba(255, 255, 255, 0.28); }

/* The gateway is the only Evolve-filled surface on the page, and it wears the
   brand's holding shape, the notched frame that echoes the brandmark. */
.lp-gateway { --notch: 22px; background: var(--dnx-evolve); padding: 26px; }
.lp-gateway-tag { color: rgba(255, 255, 255, 0.75); }
.lp-gateway-brand { display: flex; align-items: center; gap: 10px; margin-top: 12px; margin-bottom: 18px; }
.lp-gateway-brand img { height: 20px; display: block; }
.lp-gateway-name { font-family: var(--font-heading); font-size: 19px; color: #fff; }
.lp-gateway-caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.lp-gateway-cap {
  background: var(--dnx-evolve);
  color: #fff;
  padding: 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.lp-models-box {
  margin-top: 10px;
  background: var(--surface-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px;
}
.lp-models-name { font-family: var(--font-heading); font-size: 18px; color: #fff; }
.lp-models-sub { color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.6; margin-top: 6px; }

/* -------------------------------------------------------- 06 / editions ---- */

.lp-editions { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; margin-top: 36px; }
.lp-edition { background: var(--dnx-white); border: 1px solid var(--border); padding: 32px; }
.lp-edition-hero { border-top: 2px solid var(--dnx-evolve); }
.lp-edition-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-edition-mark { height: 20px; display: block; }
.lp-edition h3 { font-family: var(--font-heading); font-weight: 400; font-size: 26px; margin-top: 14px; }
.lp-edition > p { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-top: 8px; }

.lp-rungs { margin-top: 20px; display: flex; flex-direction: column; }
.lp-rung {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
}
.lp-rung:last-child { border-bottom: 1px solid var(--border); }
/* A square dot, not round: the one place the flat system shows its teeth. */
.lp-rung-dot { width: 6px; height: 6px; background: var(--dnx-cloud); display: inline-block; flex: none; }
.lp-edition-hero .lp-rung-dot { background: var(--dnx-evolve); }

.lp-edition-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; }
.lp-edition-status .dx-eyebrow { color: var(--text-muted); }
.lp-edition-cta { margin-top: 24px; }

/* ---------------------------------------------------------------- footer --- */

.lp-footer { background: var(--dnx-secure); }
.lp-footer-inner { padding-top: 56px; }
.lp-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 40px;
}
.lp-footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lp-footer-logo { height: 22px; display: block; }
.lp-footer-prose {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
  max-width: 340px;
}
.lp-footer-head { color: var(--dnx-future); margin-bottom: 14px; }
.lp-footer-list { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.lp-footer-soon { color: rgba(255, 255, 255, 0.5); }
.lp-footer-list a { color: rgba(255, 255, 255, 0.78); }
.lp-footer-list a:hover { color: #fff; }
.lp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* ---------------------------------------------------------------- reveal --- */

/* Armed by JS only. The class goes on <html> once an IntersectionObserver is
   actually wired up, so content is never parked at opacity 0 with nothing to
   bring it back (no-JS, old browsers, reduced motion). */
.lp-reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slower) var(--ease-out-quart),
              transform var(--dur-slower) var(--ease-out-quart);
}
.lp-reveal-armed [data-reveal].lp-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------- responsive --- */

/* The comp is designed at 1280px and only specifies two collapses (nav links,
   architecture diagram). Everything below that is the same "reasonable
   defaults" ladder the previous build used; see README "Deviations". */

@media (max-width: 1180px) {
  .lp-wrap { padding-left: 32px; padding-right: 32px; }
  .lp-section { padding-top: 72px; padding-bottom: 72px; }

  .lp-h1 { font-size: 42px; }
  .lp-h2 { font-size: 32px; }

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

  .lp-hero-inner { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 56px; }
  .lp-attr-grid { grid-template-columns: 1fr; gap: 44px; }
  .lp-tenant-grid { grid-template-columns: 1fr; }
  .lp-editions { grid-template-columns: 1fr; }

  /* The five-track diagram cannot survive narrow widths: it becomes a vertical
     flow: sources -> gateway -> models. */
  .lp-arch { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-arch-link { display: none; }
}

@media (max-width: 860px) {
  .lp-wrap { padding-left: 20px; padding-right: 20px; }
  .lp-section { padding-top: 64px; padding-bottom: 64px; }

  .lp-h1 { font-size: 34px; }
  .lp-h2 { font-size: 28px; }
  .lp-hero-sub, .lp-lede { font-size: 15.5px; }

  .lp-grid-3 { grid-template-columns: 1fr; }
  .lp-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .lp-footer-inner { padding-top: 48px; }

  /* Requests drop out first: spend and plan are the load-bearing columns. */
  .lp-tenant-row { grid-template-columns: 1.4fr 0.9fr 0.8fr; }
  .lp-tenant-row > .lp-tenant-reqs,
  .lp-tenant-row > .lp-col-reqs { display: none; }

  .lp-edition { padding: 24px; }
  .lp-nav-tagline { display: none; }
}

@media (max-width: 560px) {
  .lp-kpi-grid { grid-template-columns: 1fr; }
  .lp-compat { gap: 18px; }
  .lp-cell, .lp-cap { padding: 24px 20px; }
  .lp-hero-actions .dnx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-coverage-track > span,
  .lp-attr-track > span,
  .lp-quota-track > span { transition: none; }
}