/* ═══════════════════════════════
   home.css — Landing page sections
   Everything is prefixed .lp- on purpose. layout.css owns a bare
   `section` rule (4rem padding) and a global .stats; components.css
   owns .stat, .card and .step. Bare generic names collide here.
   ═══════════════════════════════ */

/* ═══════════════════════════════════════════════
   Prototype landing page.
   Everything is prefixed .lp- because layout.css owns a bare
   `section` rule (4rem padding), a global .stats, and
   components.css owns .stat / .card. Bare generic names collide.
   ═══════════════════════════════════════════════ */

.lp { padding-top: var(--nav-height); }

.lp-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* The explicit padding is load-bearing: layout.css:16 gives every bare
   <section> 4rem top and bottom, which stacked on top of the margin.
   padding-top is the breathing room at the start of a section; spacing
   below is left to the margin so it meets the divider cleanly. */
.lp-sec {
  padding: var(--space-3xl) 0 0;
  margin: 0 0 var(--space-3xl);
  scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}

.lp-sec__head { margin-bottom: var(--space-2xl); }

.lp-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cr-text-dim);
  margin-bottom: var(--space-md);
}
.lp-label i { display: block; width: 28px; height: 1px; background: var(--cr-border); }

.lp-h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cr-text-primary);
  margin: 0;
  max-width: 30ch;
}

.lp-body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cr-text-secondary);
  max-width: 78ch;
}
.lp-body + .lp-body { margin-top: var(--space-md); }
.lp-body strong { color: var(--cr-text-primary); font-weight: 600; }

/* ── Hero ─────────────────────────────────────── */

.lp-hero {
  position: relative;
  padding: var(--space-3xl) 0 var(--space-4xl);
  overflow: hidden;
}
.lp-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--cr-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cr-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.35;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
}

.lp-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--cr-text-primary);
  max-width: 26ch;
  margin: 0 0 var(--space-xl);
  overflow-wrap: anywhere;
}

/* Each clause owns its line. Relying on the wrap point put the accent
   colour mid-line once the Slovenian copy changed the string length. */
.lp-title > span,
.lp-title > em { display: block; }
.lp-title em { font-style: normal; color: var(--cr-cyan); }

.lp-lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--cr-text-secondary);
  max-width: 72ch;
  margin: 0 0 var(--space-3xl);
}

.lp-stats {
  /* auto-fit rather than a fixed column count: the Slovenian labels are
     longer and were forcing the row to wrap. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: var(--space-lg) var(--space-xl);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--cr-border);
  border-bottom: 1px solid var(--cr-border);
  margin-bottom: var(--space-2xl);
}
.lp-stat__v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.03em;
  color: var(--cr-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lp-stat__l {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--cr-text-secondary);
  margin-top: var(--space-xs);
  line-height: 1.4;
}
.lp-cta__sub {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--cr-text-dim);
  margin-top: var(--space-md);
}

/* ── About: statement + pull quote ────────────── */

.lp-quote {
  margin: var(--space-2xl) 0 0;
  padding-left: var(--space-xl);
  border-left: 2px solid var(--cr-red);
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cr-text-primary);
  max-width: 54ch;
  text-wrap: balance;
}

/* ── Capabilities: the codes are the device ───── */

.lp-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cr-border);
  border: 1px solid var(--cr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lp-cap {
  background: var(--cr-bg-surface);
  padding: var(--space-xl) var(--space-lg);
  transition: background var(--duration-normal) var(--ease-out);
}
.lp-cap:hover { background: var(--cr-bg-elevated); }
.lp-cap__code {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cr-cyan);
  display: block;
  margin-bottom: var(--space-md);
}
.lp-cap__name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  color: var(--cr-text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}
.lp-cap__desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--cr-text-secondary);
}

/* ── Cases ────────────────────────────────────── */

.lp-cases { display: flex; flex-direction: column; gap: var(--space-lg); }

.lp-case {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2xl);
  padding: var(--space-xl);
  border: 1px solid var(--cr-border);
  border-radius: var(--radius-md);
  background: var(--cr-bg-surface);
  transition: border-color var(--duration-normal) var(--ease-out);
}
a.lp-case:hover { border-color: var(--cr-cyan); }

.lp-case__aside { min-width: 0; }
.lp-case__client {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--cr-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.lp-case__domain {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cr-text-dim);
  margin-top: var(--space-xs);
}
.lp-case__tag {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cr-green);
  color: var(--cr-green);
  white-space: nowrap;
}
.lp-case__tag--restricted { border-color: var(--cr-amber); color: var(--cr-amber); }

.lp-case__main { min-width: 0; }
.lp-case__main p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--cr-text-secondary);
  max-width: 78ch;
}
.lp-case__main p + p { margin-top: var(--space-sm); }
.lp-case__more {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--cr-cyan);
}
.lp-redact {
  background: var(--cr-text-dim);
  color: var(--cr-text-dim);
  border-radius: 2px;
  padding: 0 var(--space-sm);
  user-select: none;
}

.lp-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.lp-project {
  padding: var(--space-lg);
  border: 1px dashed var(--cr-border);
  border-radius: var(--radius-md);
}
.lp-project__name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--cr-text-primary);
  margin-bottom: var(--space-sm);
}
.lp-project p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--cr-text-secondary);
}

/* ── Contact ──────────────────────────────────── */

.lp-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.lp-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-top: var(--space-xl);
}
.lp-details dt { color: var(--cr-text-dim); }
.lp-details dd { color: var(--cr-text-secondary); margin: 0; }
.lp-details a { color: var(--cr-cyan); }

.lp-form { display: flex; flex-direction: column; gap: var(--space-md); }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cr-text-dim);
}
.lp-field input,
.lp-field textarea {
  background: var(--cr-bg-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--cr-text-primary);
}
.lp-field input:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: var(--cr-cyan);
}
.lp-field textarea { min-height: 132px; resize: vertical; }

/* ── Responsive ───────────────────────────────── */

@media (max-width: 900px) {
  .lp-caps { grid-template-columns: repeat(2, 1fr); }
  .lp-projects { grid-template-columns: 1fr; }
  .lp-contact { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .lp-case { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 640px) {
  .lp-wrap { padding: 0 var(--space-lg); }
  .lp-caps { grid-template-columns: 1fr; }
  .lp-stats { grid-template-columns: 1fr; gap: var(--space-lg); }
  .lp-step { grid-template-columns: 1fr; gap: var(--space-sm); }
  .lp-sec { margin-bottom: var(--space-4xl); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-cap, a.lp-case { transition: none; }
}

/* ── Interop with existing rules ────────────── */

/* .step (components.css) rides along on each row so main.js can find
   it for the progress indicator. It brings display:flex and a
   border-bottom that would double up with our border-top. */
/* These override components.css .step (display:flex + border-bottom)
   and layout.css .process__steps, both of which ride along on the same
   elements purely as JS hooks for the progress indicator. They must
   out-specify the .lp-* rules further down, hence the doubled class. */
.lp-steps .step {
  display: block;
  border-bottom: 0;
  padding: 0;
}
.lp-steps .step:last-child { border-bottom: 0; }
.lp-steps.process__steps {
  display: grid;
  gap: var(--space-lg);
}
.lp-steps .process__progress { margin-bottom: 0; }

/* The hero sits directly under the fixed nav, so it needs the offset
   the old .hero rule used to provide. */
.lp-hero { margin-top: 0; }


/* ── Project cards ────────────────────────────── */

.lp-project__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  color: var(--cr-text-primary);
  margin: var(--space-xs) 0 var(--space-sm);
  line-height: 1.3;
}
.lp-project__link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--cr-cyan);
}
.lp-project__link:hover { color: var(--cr-text-primary); }

/* ── Light theme adjustments ──────────────────── */
/* The partner logos in the trust bar are light-coloured assets shown at
   50% opacity. On a light ground they disappear, and inverting them
   wrecks the ones that are already dark-on-transparent. Keeping the band
   dark in both themes is the honest fix until proper light-mode partner
   assets exist. */
@media (prefers-color-scheme: light) {
  .trust {
    background: #191818;
    border-top-color: #332F30;
    border-bottom-color: #332F30;
  }
  .trust__label { color: #8A8283; }

  /* The hero grid reads heavier on a light ground */
  .lp-hero__grid { opacity: 0.6; }
}

/* Duplicated for the forced-light case. Keep in sync with the block above. */
:root[data-theme="light"] .trust {
  background: #191818;
  border-top-color: #332F30;
  border-bottom-color: #332F30;
}
:root[data-theme="light"] .trust__label { color: #8A8283; }

/* The hero grid reads heavier on a light ground */
:root[data-theme="light"] .lp-hero__grid { opacity: 0.6; }

/* ── Client logo on the case cards ────────────── */
/* The partner marks are pure white on transparent, so they need
   inverting on a light ground. They are monochrome, so invert() is
   lossless here: white becomes black, nothing shifts hue. */

.lp-case__logo {
  display: block;
  margin-bottom: var(--space-md);
}
.lp-case__logo img {
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.75;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lp-case__logo img { filter: invert(1); opacity: 0.7; }
}
:root[data-theme="light"] .lp-case__logo img { filter: invert(1); opacity: 0.7; }

/* ── Spacing and depth ────────────────────────── */

/* After the layout restructure the trust bar is followed by the body
   wrapper, not by a section, so the old .trust + .lp-sec never matched.

   The gap is now zero: the first section is a band, so any margin here
   shows as a strip of page ground between two solid surfaces. The band
   supplies its own breathing room through padding instead. */
.trust + .lp-wrap { margin-top: 0; }
/* trust already draws a bottom border; a band's top border would double it */
.trust + .lp-wrap .lp-sec--band:first-of-type::before { border-top: 0; }

/* The divider carried 32px of its own padding against a 128px section
   margin, so the gap above it dwarfed the gap below and the next
   section appeared to start abruptly. Section padding now supplies the
   space beneath it. */
.lp-main .bracket-divider { padding: var(--space-md) 0; }

/* Flat on dark (the token is `none`), a real lift on light. */
.lp-caps,
.lp-case,
.lp-project { box-shadow: var(--cr-card-lift); }

/* ── Section rail beside the content ──────────── */
/* The top bar keeps the logo and the controls; the section links live
   here instead, mirroring the index rail on the case study pages. */

.lp-layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.lp-index {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-xl));
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* above the full-width band, which is a later sibling subtree and
     would otherwise paint over the rail */
  z-index: 2;
  /* Margin, not padding: it only shifts the unstuck position, so the
     first link lines up with the section eyebrow beside it instead of
     sitting flush against the trust bar. Once stuck, the top offset
     governs and this has no effect. Matches .lp-sec--band padding-top. */
  margin-top: var(--space-4xl);
}

.lp-index .nav__link {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 0 7px var(--space-md);
  border-left: 1px solid var(--cr-border);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.lp-index .nav__link:hover { border-left-color: var(--cr-text-dim); }
.lp-index .nav__link.is-active {
  color: var(--cr-cyan);
  border-left-color: var(--cr-cyan);
}
/* the top-bar underline treatment does not belong on a vertical rail */
.lp-index .nav__link.is-active::after { display: none; }

.lp-main { min-width: 0; }

/* The sections keep their own .lp-wrap so they still work standalone;
   inside the layout it must not re-centre or re-pad them. */
.lp-main .lp-wrap {
  max-width: none;
  padding: 0;
}

@media (max-width: 900px) {
  .lp-layout { grid-template-columns: 1fr; gap: 0; }
  /* Below this width the top bar switches to the hamburger, and the
     mobile menu carries the same links. */
  .lp-index { display: none; }
}

/* ── Wide screens: rail moves into the margin ──── */
/* Below this the rail shares the content grid and narrows the copy.
   Once the viewport is wide enough that the centred container has spare
   margin, the rail moves out into it: the content column then spans the
   full container and lines up with the hero above.

   The threshold is geometric, not arbitrary. Container is 1120 with
   32px padding, so the content edge sits at (100vw - 1120)/2 + 32. The
   rail needs 150 + 32 of that to its left, which needs about 1450. */

@media (min-width: 1450px) {
  .lp-layout {
    /* zero-width track: the rail is pulled out of it by its own margin,
       and stays a grid item so position:sticky still applies */
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0;
  }
  .lp-index {
    width: var(--rail-w);
    margin-left: calc(-1 * (var(--rail-w) + var(--space-xl)));
  }
}

/* ── Process: a pipeline, not a list ──────────── */
/* These four stages are a real sequence, so they are laid out as one:
   a track with a node per stage. The fill is the existing
   #process-progress element, which main.js already grows as each step
   scrolls into view, so the connector doubles as a read-progress bar
   rather than being decoration. */

.lp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-top: 34px;
}

.lp-steps .process__progress {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  margin: 0;
  background: var(--cr-border);
  overflow: visible;
}

.lp-step {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
}
.lp-step::before {
  content: "";
  position: absolute;
  top: -33px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* variable so a band section can repaint it without a specificity
     fight against the per-stage colour rules below */
  background: var(--step-node-bg, var(--cr-bg-deep));
  border: 2px solid var(--cr-text-dim);
}
.lp-steps .step:last-child { border-bottom: 0; }

.lp-step__name { font-size: var(--text-base); margin-top: var(--space-md); }
.lp-step p { font-size: var(--text-sm); max-width: 34ch; }

/* ── FAQ: an open register ────────────────────── */
/* Not an accordion. Hiding answers behind a click is the wrong posture
   for a studio whose pitch is that it tells you what it cannot do, and
   an open two-column register scans faster than six closed rows. */

.lp-faq {
  border-top: 1px solid var(--cr-border);
  margin: 0;
}
.lp-faq__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: var(--space-2xl);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--cr-border);
}
.lp-faq__q {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--cr-text-primary);
  margin: 0;
}
.lp-faq__a {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--cr-text-secondary);
  margin: 0;
  padding: 0;
  max-width: 62ch;
}

@media (max-width: 900px) {
  .lp-steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-top: 0;
    padding-left: var(--space-lg);
  }
  /* the horizontal track cannot survive a stacked layout */
  .lp-steps .process__progress { display: none; }
  .lp-steps::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 2px;
    background: var(--cr-border);
  }
  .lp-step::before { top: 4px; left: calc(-1 * var(--space-lg) - 5px); }
  .lp-step p { max-width: none; }

  .lp-faq__row { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ── Stage typography and colour ──────────────── */
/* The stage words carry the section. They step up to display scale and
   each takes the colour the rest of the site already uses for that
   idea: cyan for system work, red for the moment of release, green for
   running. INIT stays dim because nothing is live yet. LIVE gets the
   same pulsing dot used for "systems operational" in the footer and
   "in production" on the case cards, so the colour is a reference
   rather than decoration. */

.lp-step__tag {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.lp-step--init   .lp-step__tag { color: var(--cr-text-dim); }
.lp-step--build  .lp-step__tag { color: var(--cr-cyan); }
.lp-step--deploy .lp-step__tag { color: var(--cr-red); }
.lp-step--live   .lp-step__tag { color: var(--cr-green); }

.lp-step--init::before   { border-color: var(--cr-text-dim); }
.lp-step--build::before  { border-color: var(--cr-cyan); }
.lp-step--deploy::before { border-color: var(--cr-red); }
.lp-step--live::before   { border-color: var(--cr-green); background: var(--cr-green); }

.lp-step__tag .status-dot { margin-right: 0; }

/* ── FAQ rows respond ─────────────────────────── */

.lp-faq__row {
  padding-left: var(--space-lg);
  margin-left: calc(-1 * var(--space-lg));
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.lp-faq__row:hover {
  background: var(--cr-bg-elevated);
  border-left-color: var(--cr-cyan);
}
.lp-faq__row:hover .lp-faq__q { color: var(--cr-cyan); }
.lp-faq__q { transition: color var(--duration-fast) var(--ease-out); }

/* ── Contact: closing block, theme-aware ──────── */
/* Previously inverted in both themes, which meant light mode ended on a
   black slab. It now follows the theme and takes its accent from the
   logo instead: red on the left half, teal on the right, the same
   two-tone device the brand uses. */

.lp-contact {
  position: relative;
  background: var(--cr-bg-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--cr-card-lift);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  overflow: hidden;
}
.lp-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
              var(--cr-red) 0 50%, var(--cr-cyan) 50% 100%);
}
/* inputs sit on the page ground so they read as insets on the panel */
.lp-field input,
.lp-field textarea { background: var(--cr-bg-deep); }

@media (prefers-reduced-motion: reduce) {
  .lp-faq__row, .lp-faq__q { transition: none; }
}

/* ── Full-width band section ──────────────────── */
/* The section lives inside the centred container, so the background has
   to break out of it. The band is painted by a pseudo-element rather
   than by changing the section's own box, which keeps the content on
   the same grid as every other section.

   left/right: -100vw rather than the usual width:100vw + translateX
   trick: the content column is offset by the rail below 1450px, so its
   centre is not the viewport centre and a centred band would sit
   visibly off to one side. Overhanging both edges is position-
   independent.

   The overhang has to be clipped on <html>. body{overflow-x:hidden}
   alone only hides it: the document still reports the wider scrollWidth
   and stays horizontally scrollable. overflow-x:clip suppresses the
   scrollable region outright, and unlike hidden it does not create a
   scroll container, so the sticky section rail keeps working. */

html { overflow-x: clip; }

.lp-sec--band {
  position: relative;
  /* An explicit stacking context. Without it the band's z-index:-1
     pseudo-element only stays behind the rail while .reveal happens to
     leave opacity at 1; mid-animation the section becomes a stacking
     context on its own, traps the pseudo inside, and paints the whole
     section over the rail. Pinning the level makes it deterministic. */
  z-index: 0;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  /* the nodes punch through the track, so they take the band colour */
  --step-node-bg: var(--cr-bg-surface);
}
.lp-sec--band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: var(--cr-bg-surface);
  border-top: 1px solid var(--cr-border);
  border-bottom: 1px solid var(--cr-border);
}

/* Status chips: in dark the outline alone reads, but on a light ground a
   10px label with a hairline border has too little coloured area for the
   hue to land, and amber and green collapse into "two dark labels". The
   tint token is transparent in dark and a fill in light. */
.lp-case__tag { background: var(--cr-green-tint); }
.lp-case__tag--restricted { background: var(--cr-amber-tint); }