/* =========================================================================
   landing.css: the 2026-09-02 landing skeleton (lx-*).

   Loaded AFTER styles.css and site.css. It owns the page's structure: the
   fixed nav that morphs into a pill, the two-column hero, the light reading
   bands, the Supporting-you marquee, and the light-ground restyle of the
   components it reuses from site.css (plan cards, FAQ, steps, grant cards,
   the arrow link). It does NOT own the living console replicas (lpc-*), the
   window chrome (lp-window*), the wire vocabulary (w-*), the compare table
   (cmp*), the demo booking (lp-demo*), the final call (lp-final) or the
   footer (lp-foot*): those stay in site.css, unchanged, because the tests
   pin several of them by name and because they are already drawn for a
   dark ground, which is where this page keeps them.

   THE PALETTE IS TWO COLOURS, AND EACH IS THE OTHER'S ACCENT.
   The dark regions are launch.css's night indigo with white as the single
   accent, the standing law in PRODUCT.md. The light regions are a tinted
   white with indigo-black as the single accent. Nothing is pure white or
   pure grey: the light ground is tinted toward the indigo and the light-side
   text ramp is indigo-black, so both halves read as one system.

   Which region a section gets is decided by one sentence, written before
   any hex was chosen: a founder at a desk after hours, one browser window
   held open, the reading light on. The held session is dark. Reading is
   light. impeccable.style calls the strategy "Committed": one colour owns
   30 to 60 percent of the surface as whole fields, never as scattered
   accents. Measured share of dark ground at 1440px: about 40 percent.

   Every light-side ratio below was computed, not assumed (WCAG AA):
     --lx-ink   #0a1024 on #f6f7fb  17.6
     --lx-ink-2 #3d4a73 on #f6f7fb   8.1
     --lx-ink-3 #56628a on #f6f7fb   5.6   (5.3 on the second tint)
     --lx-rule-strong #8792b5 on #f6f7fb 3.1  (controls and edges only)
   The dark side is launch.css's ramp, already pinned by test/markup.mjs.

   Design record: docs/landing-aveoreach-2026-09-02.md.
   ========================================================================= */

/* ----------------------------------------------------------------- tokens */

body.lx {
  --lx-paper:       #f6f7fb;
  --lx-paper-2:     #eef1fa;
  --lx-card:        #ffffff;
  --lx-ink:         #0a1024;
  --lx-ink-2:       #3d4a73;
  --lx-ink-3:       #56628a;
  --lx-rule:        #dfe4f1;   /* decorative hairlines, not a contrast surface */
  --lx-rule-strong: #8792b5;   /* 3.1:1, the floor for a control edge */
  /* Cards on the light ground carry a shadow OR a border, never both: a
     hairline plus a wide soft shadow is the combination impeccable flags as
     the generated-UI default. Rest state is shadow only (the border is
     transparent); hover draws the edge instead of lifting the shadow. */
  --lx-shadow:      0 8px 22px -14px rgba(10, 16, 36, .32), 0 1px 3px -1px rgba(10, 16, 36, .10);
  --lx-ease:        cubic-bezier(.22, 1, .36, 1);
  --lx-nav:         64px;
}

/* The page opens on the fixed bar, so the first section clears it. */
body.lx { padding-top: 0; }
.lx section, .lx main { scroll-margin-top: calc(var(--lx-nav) + 16px); }

/* Grain stays (PRODUCT.md), a touch lighter so it is not visible on white. */
body.lx::after { opacity: .035; }

/* ------------------------------------------------------------------- nav
   Aveoreach's one distinctive motion, measured off the live site: a fixed,
   transparent bar that becomes a floating glass pill once the page moves.
   Glass on chrome only. Over the dark hero the links are the dark side's
   muted white; the moment the pill forms it is the light side's card white,
   so it reads the same over every band it floats across. */
.lx-nav {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 40;
  width: 100%;
  height: var(--lx-nav);
  display: flex; align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition:
    top .35s var(--lx-ease), width .35s var(--lx-ease), height .35s var(--lx-ease),
    border-radius .35s var(--lx-ease), background .35s var(--lx-ease),
    border-color .35s var(--lx-ease), box-shadow .35s var(--lx-ease);
}
/* DARK glass, not white (owner's review, 2026-09-02 evening): the white pill
   put a white mark and dim links over the white bands, and "you can hardly see
   it" was the verdict. Indigo glass is the launch page's own bar, and the mark
   and the links stay white over every band the pill floats across. */
.lx-nav.is-scrolled {
  top: 12px;
  width: min(1160px, 100% - 24px);
  height: 56px;
  border-radius: var(--r-pill);
  background: rgba(10, 15, 30, .84);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: rgba(140, 162, 230, .22);
  box-shadow: 0 14px 34px -18px rgba(5, 7, 15, .7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lx-nav.is-scrolled { background: var(--surface); }
}
.lx-nav__inner {
  width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.lx-nav.is-scrolled .lx-nav__inner { padding-inline: 10px 8px; }
.lx-nav .logo { --logo-ink: var(--void); color: var(--text); transition: color .35s var(--lx-ease); }
.lx-nav__links { display: flex; gap: 2px; align-items: center; justify-content: center; }
.lx-nav__links a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 9px 13px; border-radius: var(--r-pill); white-space: nowrap;
  transition: color .2s var(--lx-ease), background .2s var(--lx-ease);
}
.lx-nav__links a:hover { color: var(--text); background: rgba(140, 162, 230, .12); }
.lx-nav__links a[aria-current="true"] { color: var(--text); background: rgba(140, 162, 230, .14); }
.lx-nav.is-scrolled .lx-nav__links a { color: var(--text); }
.lx-nav__cta { display: flex; justify-content: flex-end; }
/* The bar collapses to brand + one button where the links stop fitting; the
   hero CTA row carries the same destinations at every width. */
@media (max-width: 860px) {
  .lx-nav__inner { grid-template-columns: auto 1fr; }
  .lx-nav__links { display: none; }
}
@media (min-width: 861px) and (max-width: 980px) {
  .lx-nav__links a { font-size: 13px; padding: 9px 8px; letter-spacing: -.01em; }
}
@media (pointer: coarse) { .lx-nav__links a { min-height: var(--tap, 40px); } }

/* ------------------------------------------------------------------ hero
   Two columns from 980px: the statement left, the console right, exactly the
   composition Aveoreach runs, in our material. Behind it the launch page's
   single indigo light, and nothing else: no coloured hero, no second hue. */
.lx-hero {
  position: relative; isolation: isolate;
  padding-top: calc(var(--lx-nav) + clamp(32px, 5vw, 64px));
  padding-bottom: clamp(40px, 5vw, 64px);
  background: var(--bg);
  overflow: clip;
}
.lx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 30% 20%, rgba(70, 96, 190, .20) 0%, transparent 68%),
    radial-gradient(44rem 30rem at 80% 90%, rgba(70, 96, 190, .12) 0%, transparent 66%);
}
.lx-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
@media (max-width: 980px) { .lx-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.lx-hero__copy { display: grid; gap: 22px; justify-items: start; }

/* Fraunces roman first line, TRUE italic second: the launch page's move at
   landing scale. site.css supplies the gradient ink and the opsz axes via
   .lp-h1; this only sets the size, the block break and the ratio. */
.lx-h1 {
  font-size: clamp(38px, 5vw, 70px) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  font-weight: 440 !important;
  max-width: 14ch !important;
}
.lx-h1 em { display: block; font-weight: 420; padding-bottom: .06em; }
.lx-lead { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.lx-lead b { color: var(--text); font-weight: 600; }
.lx-hero .lp-cta-row { gap: 10px; }
.lx-hero .lp-proof { text-align: left; }

/* The console in the hero: no painted stage box any more, the window stands
   on the page. .lp-stage is kept as a class so lp-motion.js can still tip
   the window back and settle it flat as it scrolls into place. */
.lx-hero .lp-stage { padding: 0; border: 0; background: none; border-radius: 0; perspective: 1400px; }
.lx-hero .lp-window { max-width: none; }
/* Neutral elevation, not the coloured halo site.css gives the hero window:
   the halo read against the painted stage it used to sit on, and on the bare
   indigo ground it is the "dark glow" impeccable names as the AI default. */
.lx-hero .lp-window--hero { box-shadow: 0 30px 60px -30px rgba(0, 1, 8, .85), 0 2px 8px -4px rgba(0, 1, 8, .6); }
/* The Home replica's last row (weekly pace beside the donut) runs a little
   past the 780 design height, and at the old 896px window that overrun was
   hidden in the frame's shadow. In a 560px column it is a donut cut in half,
   so the hero frame is given the extra height rather than the replica a
   smaller scale. 870 became 900 on 2026-09-04 when the legibility pass in
   site.css gave the pace row and the donut larger type; the canvas height
   in site.css (.lp-window--hero .lpc) must match this ratio. */
.lx-hero .lp-window--hero .lp-shot { --shot-scale: .56; aspect-ratio: 1120 / 900; }

/* The staged arrival: the ONE authored moment on the page. Four steps,
   90ms apart, total delay capped at 270ms. */
.lx-hero__copy > *, .lx-hero .lp-stage { animation: lx-rise .7s var(--lx-ease) both; }
.lx-hero__copy > *:nth-child(2) { animation-delay: .09s; }
.lx-hero__copy > *:nth-child(3) { animation-delay: .18s; }
.lx-hero__copy > *:nth-child(n+4) { animation-delay: .27s; }
.lx-hero .lp-stage { animation-delay: .2s; }
@keyframes lx-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
html.no-motion .lx-hero__copy > *, html.no-motion .lx-hero .lp-stage { animation: none; }

/* --------------------------------------------------------- supporting you
   Aveoreach's marquee band, in its position under the hero, carrying the
   tools wireagent works with. White ground: the first contrast break on the
   page. Content is duplicated once in the markup so -50% loops seamlessly;
   hover pauses it; reduced motion lays it out as a wrapping row instead. */
.lx-band {
  background: var(--lx-paper);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid var(--lx-rule);
  padding-block: clamp(28px, 4vw, 44px);
  color: var(--lx-ink);
}
.lx-band__head { display: grid; gap: 6px; justify-items: center; text-align: center; margin-bottom: 22px; }
.lx-band__title { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; letter-spacing: -.015em; font-weight: 500; color: var(--lx-ink); margin: 0; }
.lx-band__sub { margin: 0; color: var(--lx-ink-3); font-size: 15px; line-height: 1.5; max-width: 60ch; text-wrap: balance; }
/* The carousel: every tool as a slow strip of marks above the tiles, back by
   the owner's request. Content is duplicated once in the markup so -50% loops
   seamlessly; hover pauses it; reduced motion lays it out as a wrapping row.
   Aveoreach's 38s becomes 40s; the marks are 30px so they read as logos, not
   as bullets. */
.lx-marquee {
  margin-bottom: clamp(22px, 3vw, 34px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lx-marquee__track { display: flex; width: max-content; animation: lx-scroll 40s linear infinite; }
.lx-marquee:hover .lx-marquee__track { animation-play-state: paused; }
@keyframes lx-scroll { to { transform: translateX(-50%); } }
.lx-marquee__set { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.lx-lockup {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 clamp(20px, 2.4vw, 34px);
  min-height: 56px;
  color: var(--lx-ink); font-size: 17px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap;
}
.lx-lockup svg { width: 30px; height: 30px; flex: none; color: var(--lx-ink); }
.lx-lockup svg [fill="var(--lx-paper, #f6f7fb)"] { fill: var(--lx-paper); }

.lx-band__note { margin: 4px 0 0; text-align: center; color: var(--lx-ink-3); font-size: 14px; line-height: 1.55; max-width: 66ch; margin-inline: auto; }

/* --------------------------------------------- how it works + guarantees
   One band, two columns, no cards (owner's second review: "a lot shorter,
   combine them"). Steps as a counted list, guarantees as an icon list. */
.lx-combo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .lx-combo { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.lx-combo h2 {
  margin: 0 0 18px; font-family: var(--serif); font-weight: 480;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.018em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1; color: var(--text); text-wrap: balance;
}
.lx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
.lx-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.lx-steps li::before { counter-increment: step; content: counter(step); grid-row: 1 / span 2; font-family: var(--serif); font-weight: 440; font-size: 34px; line-height: 1; color: var(--white); }
.lx-steps b { font-size: 17px; font-weight: 600; color: var(--text); }
.lx-steps span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.lx-guards2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lx-guards2 li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.lx-guards2 svg { width: 22px; height: 22px; grid-row: 1 / span 2; margin-top: 1px; color: var(--grey-3); }
.lx-guards2 b { font-size: 16px; font-weight: 600; color: var(--text); }
.lx-guards2 span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.lx-combo__foot { margin: 20px 0 0; color: var(--faint); font-size: 14px; line-height: 1.55; }
.lx-combo__foot a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }

/* The compare band (three rows, .lx-cmp) came off the page on 2026-09-11:
   its heading repeated the pricing note and its price row had gone stale.
   The comparison is one line at the foot of #pricing and the hub at
   /compare. See docs/landing-agents-2026-09-11.md section 3. */

/* faq: six questions in two columns */
#faq .lp-faq { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
@media (max-width: 860px) { #faq .lp-faq { grid-template-columns: minmax(0, 1fr); } }
.lx-band__note a { color: var(--lx-ink); text-decoration: underline; text-decoration-color: var(--lx-rule-strong); text-underline-offset: 3px; }
.lx-band__note a:hover { text-decoration-color: var(--lx-ink); }

/* ------------------------------------------------------- light sections
   The reading bands. Opaque, so the dark aurora behind the page never bleeds
   through, and every reused component is re-inked for the ground it is now
   standing on. */
.lx-light { background: var(--lx-paper); color: var(--lx-ink); padding-block: clamp(44px, 6vw, 80px); }
.lx-light--tint { background: var(--lx-paper-2); }
.lx-light + .lx-light { border-top: 1px solid var(--lx-rule); }
.lx-dark { background: var(--bg); color: var(--text); padding-block: clamp(44px, 6vw, 80px); position: relative; isolation: isolate; overflow: clip; }
.lx-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50rem 30rem at 70% 0%, rgba(70, 96, 190, .14) 0%, transparent 66%);
}
/* Two dark sections in a row need an edge between them, or the page reads as
   one long band. A hairline and one step of surface do it without a third
   colour. The replica windows and the consent widget live on these bands now
   (owner's review): a dark object on white read as a hole in the page. */
.lx-dark--band { background: linear-gradient(180deg, #0d1428, var(--bg) 40%); border-top: 1px solid var(--glass-edge); }
.lx-dark .lx-feature + .lx-feature { border-top-color: var(--glass-edge); }
.lx-dark .lx-feature__media .lp-window { box-shadow: var(--lift-glass); border-color: var(--glass-edge); }
.lx-dark .lx-feature__copy h3 { color: var(--text); }
.lx-dark .lx-feature__copy p { color: var(--muted); }

/* Section opener: an h2 and one lead sentence. No eyebrow, no pill, no
   index: both impeccable's craft floor and PRODUCT.md ban kickers above a
   heading, and Aveoreach's pills were the one device left behind. */
.lx-head { display: grid; gap: 12px; justify-items: start; max-width: 46rem; margin-bottom: clamp(22px, 3vw, 36px); }
.lx-head h2 {
  margin: 0; font-family: var(--serif); font-weight: 480;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.06; letter-spacing: -.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  color: var(--lx-ink); text-wrap: balance; max-width: 24ch;
}
.lx-head h2 em { font-style: italic; font-weight: 440; }
.lx-head p { margin: 0; color: var(--lx-ink-2); font-size: 17px; line-height: 1.55; max-width: 58ch; text-wrap: pretty; }
.lx-head--centre { justify-items: center; text-align: center; margin-inline: auto; }
.lx-dark .lx-head h2 { color: var(--text); }
.lx-dark .lx-head p { color: var(--muted); }

/* Buttons and the arrow link, re-inked for the light ground. */
.lx-light .btn--primary { background: var(--lx-ink); border-color: var(--lx-ink); color: #fff; }
.lx-light .btn--primary:hover:not(:disabled) { background: #1c2440; border-color: #1c2440; filter: none; }
.lx-light .btn--ghost { background: transparent; border-color: var(--lx-rule-strong); color: var(--lx-ink); }
.lx-light .btn--ghost:hover:not(:disabled) { background: rgba(10, 16, 36, .05); border-color: var(--lx-ink); }
.lx-light .lp-more { color: var(--lx-ink); }
.lx-light ::selection { background: var(--lx-ink); color: #fff; }

/* -------------------------------------------------------------- features
   Three rows, alternating sides, each with a living replica. On the light
   ground the panel border and the painted stage are gone: a dark window on
   a light page is already the object, it needs no frame around its frame. */
.lx-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-block: clamp(12px, 1.8vw, 22px);
}
.lx-feature + .lx-feature { border-top: 1px solid var(--lx-rule); }

/* The diagrams' share. The frames keep the 72rem wrap and the 1fr / 1.15fr
   (hero) and 1fr / 1.25fr (features) tracks they had on 2026-09-03. For a
   few hours on 2026-09-04 the wrap opened to 88rem and the console took a
   1.7fr / 1.9fr track, answering "almost fading out" with size; the owner's
   verdict was "absolutely massive", and the size came back. Legibility is
   handled INSIDE the replica instead (site.css, the lpc-* legibility pass):
   the 1120px design carries larger type, darker ink and heavier rules so it
   survives the 0.40 to 0.55 scale these frames give it. The one part of the
   wide layout kept: a flipped row puts its media in the FIRST column
   (order: -1), so its tracks swap, or the flipped diagrams draw a quarter
   smaller than the unflipped ones, which they had done from the start. */
@media (min-width: 861px) {
  .lx-feature--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.lx-feature--flip .lx-feature__media { order: -1; }
@media (max-width: 860px) {
  .lx-feature, .lx-feature--flip { grid-template-columns: minmax(0, 1fr); }
  .lx-feature--flip .lx-feature__media { order: 0; }
}
.lx-feature__media { margin: 0; min-width: 0; }
.lx-feature__media .lp-window { max-width: none; box-shadow: var(--lx-shadow), 0 30px 60px -30px rgba(10, 16, 36, .5); border-color: rgba(10, 16, 36, .12); }
.lx-feature__copy { display: grid; gap: 12px; justify-items: start; }
.lx-feature__copy h3 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(23px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.018em;
  color: var(--lx-ink); text-wrap: balance;
}
.lx-feature__copy p { margin: 0; color: var(--lx-ink-2); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.lx-feature__copy .lp-more { margin-top: 6px; }

/* ------------------------------------------------------------ guarantees
   The dark band: Aveoreach's navy "why applicants beat a database", here
   carrying the four guarantees and, beneath them, a hairline ledger of the
   four facts rather than a stat-tile row. Cards reuse .lp-card from
   site.css, which is already drawn for this ground. */
.lx-guards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .lx-guards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lx-guards { grid-template-columns: minmax(0, 1fr); } }
.lx-guards .lp-card { transition: transform .22s var(--lx-ease), border-color .25s var(--ease), background .25s var(--ease); }
.lx-guards .lp-card:hover { transform: translateY(-4px); }
.lx-guards .lp-card__top { margin-bottom: 26px; }
.lx-ledger {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--glass-edge); border-bottom: 1px solid var(--glass-edge);
}
.lx-ledger > div { padding: 20px 22px 18px; display: grid; gap: 6px; }
.lx-ledger > div + div { border-left: 1px solid var(--glass-edge); }
.lx-ledger b { font-family: var(--serif); font-weight: 480; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.lx-ledger span { color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 860px) {
  .lx-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-ledger > div + div { border-left: 0; }
  .lx-ledger > div:nth-child(2n) { border-left: 1px solid var(--glass-edge); }
  .lx-ledger > div:nth-child(n+3) { border-top: 1px solid var(--glass-edge); }
}
.lx-dark .lp-more { color: var(--text); }

/* ------------------------------------------------------------ how it works
   Three stations on the wire, on the light ground. The cable vocabulary is
   site.css's; only its ink changes here, and the .lp-steps-wire class is
   kept so the draw-in gating keeps working. */
.lx-light .w-cable { stroke: rgba(10, 16, 36, .22); }
.lx-light .w-current { stroke: rgba(10, 16, 36, .75); }
.lx-light .w-node { fill: var(--lx-ink); }
.lx-light .w-halo { fill: rgba(10, 16, 36, .10); }
.lx-light .lp-steps { gap: 16px; }
.lx-light .lp-step {
  background: var(--lx-card); border-color: transparent; box-shadow: var(--lx-shadow);
  padding: 26px 26px 28px;
  transition: transform .22s var(--lx-ease), border-color .25s var(--ease);
}
.lx-light .lp-step:hover { transform: translateY(-4px); border-color: var(--lx-rule-strong); }
.lx-light .lp-step::after { display: none; }
.lx-light .lp-step__n { color: var(--lx-ink); }
.lx-light .lp-step__t { color: var(--lx-ink); font-size: 18px; }
.lx-light .lp-step p { color: var(--lx-ink-2); font-size: 15px; }

/* ------------------------------------------------------------------ google
   The grant on the cable and the consent widget. The grant cards are re-inked
   as white cards; the consent widget stays a dark object, because it is a
   product surface (the permission screen) and the replicas keep their own
   colour on every ground. */
.lx-light .lp-grant__node, .lx-light .lp-grant__cap { background: var(--lx-card); border-color: transparent; box-shadow: var(--lx-shadow); }
.lx-light .lp-grant__node:hover, .lx-light .lp-grant__cap:hover { border-color: var(--lx-rule-strong); background: var(--lx-card); }
.lx-light .lp-grant__node::after, .lx-light .lp-grant__cap::after { display: none; }
.lx-light .lp-grant__ix { color: var(--lx-ink-3); }
.lx-light .lp-grant__t { color: var(--lx-ink); }
.lx-light .lp-grant__node p, .lx-light .lp-grant__cap p { color: var(--lx-ink-2); }
.lx-light .lp-grant__ico { background: var(--lx-ink); border-color: var(--lx-ink); color: #fff; }
.lx-light .lp-grant__cap code { color: var(--lx-ink-2); background: var(--lx-paper-2); border-color: var(--lx-rule); }
/* site.css paints the consent widget with a translucent gradient that only
   works over the dark aurora; on a light ground it rendered as grey smoke and
   the "stays yours" list vanished into it. Opaque indigo here. */
.lx-light .lp-consent {
  color: var(--text); /* the section inherits ink; this object stays a dark surface */
  background: linear-gradient(160deg, #1b2548, #0d1329);
  box-shadow: var(--lx-shadow), 0 30px 60px -30px rgba(10, 16, 36, .5);
  border-color: rgba(10, 16, 36, .12);
}

/* ----------------------------------------------------------------- pricing
   The card contract is site.css's and the tests pin it. What changes is the
   ground: white cards on the second tint, and the recommended plan is the
   one dark card in the row, Aveoreach's popular-card inversion in our two
   colours. Both prices and both Stripe links stay in the markup; the radio
   switch is still CSS only. */
.lx-light .lp-billing__switch { background: var(--lx-card); border-color: transparent; box-shadow: var(--lx-shadow); }
.lx-light .lp-billing__opt { color: var(--lx-ink-2); }
.lx-light .lp-billing__opt:hover { color: var(--lx-ink); }
.lx-light .lp-billing__save { background: var(--lx-paper-2); color: var(--lx-ink); }
.lx-light #billing-monthly:checked ~ .lp-billing__switch .lp-billing__opt[for="billing-monthly"],
.lx-light #billing-yearly:checked ~ .lp-billing__switch .lp-billing__opt[for="billing-yearly"] { background: var(--lx-ink); color: #fff; }
.lx-light #billing-yearly:checked ~ .lp-billing__switch .lp-billing__opt[for="billing-yearly"] .lp-billing__save { background: rgba(255, 255, 255, .16); color: #fff; }
.lx-light .lp-billing__radio:focus-visible ~ .lp-billing__switch .lp-billing__opt { outline-color: var(--lx-ink); }

.lx-light .lp-grid { gap: 16px; }
/* The group labels have to read on paper. --faint is tuned for the dark band
   and all but disappears here, and these are the labels the whole two-group
   split depends on being noticed. --lx-ink-3 is the same muted step the price
   suffixes already use on this band, so they sit at label weight without
   competing with the plan names. */
.lx-light .lp-plans__group { color: var(--lx-ink-3); }
.lx-light .lp-card {
  background: var(--lx-card); border-color: transparent; box-shadow: var(--lx-shadow);
  padding: 26px;
  transition: transform .22s var(--lx-ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lx-light .lp-card:hover { background: var(--lx-card); border-color: var(--lx-rule-strong); transform: translateY(-4px); }
.lx-light .lp-card::after { display: none; }
.lx-light .lp-card h3 { color: var(--lx-ink); font-size: 18px; }
.lx-light .lp-card p { color: var(--lx-ink-2); font-size: 15px; }
.lx-light .lp-plan__price b { color: var(--lx-ink); }
.lx-light .lp-plan__price small { color: var(--lx-ink-3); }
.lx-light .lp-plan__note { color: var(--lx-ink-2); }
.lx-light .lp-plan__note b { color: var(--lx-ink); }
.lx-light .lp-plan__list { border-top-color: var(--lx-rule); }
.lx-light .lp-plan__list li { color: var(--lx-ink-2); }
.lx-light .lp-plan__list li::before { background: var(--lx-ink); opacity: .7; }
.lx-light .lp-plan__buy { background: transparent; border-color: var(--lx-rule-strong); color: var(--lx-ink); }
.lx-light .lp-plan__buy:hover { background: rgba(10, 16, 36, .05); border-color: var(--lx-ink); }
.lx-light .lp-plan__buy:focus-visible { outline-color: var(--lx-ink); }
.lx-light .lp-plans__note { color: var(--lx-ink-2); font-size: 15px; }
.lx-light .lp-plans__note b { color: var(--lx-ink); }
.lx-light .lp-plans__note a { color: var(--lx-ink); text-decoration-color: var(--lx-rule-strong); text-underline-offset: 3px; }
/* The annual-objection head follows two notes; more room above a heading than
   below it, or the head reads as the notes' last paragraph. */
.lx-light .lp-plans__note + .lx-head { margin-top: clamp(44px, 6vw, 72px); }

/* the one dark card in the row */
.lx-light .lp-plan--pick,
.lx-light .lp-plan--pick:hover {
  background: var(--surface); border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 24px 50px -24px rgba(10, 16, 36, .6);
}
.lx-light .lp-plan--pick::before { display: none; }
.lx-light .lp-plan--pick h3, .lx-light .lp-plan--pick p, .lx-light .lp-plan--pick .lp-plan__price b, .lx-light .lp-plan--pick .lp-plan__note b { color: var(--white); }
.lx-light .lp-plan--pick .lp-plan__price small, .lx-light .lp-plan--pick .lp-plan__note, .lx-light .lp-plan--pick .lp-plan__list li { color: var(--muted); }
.lx-light .lp-plan--pick .lp-plan__list { border-top-color: var(--glass-edge); }
.lx-light .lp-plan--pick .lp-plan__list li::before { background: var(--white); opacity: .7; }
.lx-light .lp-plan--pick .lp-plan__buy { background: var(--white); border-color: var(--white); color: var(--lx-ink); font-weight: 600; }
.lx-light .lp-plan--pick .lp-plan__buy:hover { background: var(--accent-dim, #f2f5ff); border-color: var(--accent-dim, #f2f5ff); }
.lx-light .lp-plan__badge { background: var(--lx-ink); border-color: var(--lx-ink); color: #fff; }

/* ----------------------------------------------------------------- compare
   Dark band, site.css table unchanged. Only the note under it needs its
   links to read on this ground, which they already do. */
.lx-dark .lp-plans__note a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lx-dark .lp-plans__note a:hover { text-decoration-color: var(--text); }

/* --------------------------------------------------------------------- faq */
.lx-light .lp-faq { max-width: 52rem; }
.lx-light .lp-faq details { background: var(--lx-card); border-color: transparent; box-shadow: var(--lx-shadow); }
.lx-light .lp-faq details:hover, .lx-light .lp-faq details[open] { border-color: var(--lx-rule-strong); }
.lx-light .lp-faq summary { color: var(--lx-ink); font-size: 16px; }
.lx-light .lp-faq summary::after { color: var(--lx-ink-3); }
.lx-light .lp-faq details p { color: var(--lx-ink-2); font-size: 15px; }

/* ------------------------------------------------------------- final block
   Demo, the final call and the footer share one dark ground and no gaps, so
   the page closes on the product. */
.lx-close { background: var(--bg); position: relative; isolation: isolate; overflow: clip; }
.lx-close::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(52rem 34rem at 50% 100%, rgba(70, 96, 190, .16) 0%, transparent 66%);
}
.lx-close .lx-dark { padding-bottom: clamp(24px, 4vw, 48px); }
.lx-close .lx-dark::before { display: none; }
.lx-close .lp-footer { margin-top: 0; }

/* ----------------------------------------------------------- scroll reveal
   The same data-reveal contract as before, tuned to impeccable's numbers:
   a 14px lift, no blur, 0.6s. Scoped under .js-reveal so a blocked script, a
   print or reduced motion sees everything.

   NOTHING ON THIS PAGE EVER RESTS AT ZERO (2026-09-11). site.css:963 starts
   every [data-reveal] at opacity 0, which is right for a short page and wrong
   for this one: the landing is now ten bands tall, the observer only arms a
   block as it approaches, and a reader scrolling fast, or landing deep from an
   anchor, meets a band of nothing. The floor is .45, which is legible enough
   to read as content arriving and faint enough that the rise still reads as
   motion. The .is-in end state is still exactly 1, which is what ui-probe
   measures ("a below-fold section reveals when scrolled to"), so the guard
   against content hiding behind JavaScript is unchanged.

   This is scoped to .lx so site.css:963 is untouched for every other page. */
.js-reveal .lx [data-reveal] { opacity: .45; transform: translateY(14px); filter: none; transition: opacity .5s var(--lx-ease), transform .6s var(--lx-ease); }
.js-reveal .lx [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal .lx-guards [data-reveal]:nth-child(2), .js-reveal .lx .lp-steps [data-reveal]:nth-child(2), .js-reveal .lx .lp-grid [data-reveal]:nth-child(2) { transition-delay: .07s; }
.js-reveal .lx-guards [data-reveal]:nth-child(3), .js-reveal .lx .lp-steps [data-reveal]:nth-child(3), .js-reveal .lx .lp-grid [data-reveal]:nth-child(3) { transition-delay: .14s; }
.js-reveal .lx-guards [data-reveal]:nth-child(4), .js-reveal .lx .lp-grid [data-reveal]:nth-child(4) { transition-delay: .21s; }
/* A fifth step lived here between 2026-09-07 and 2026-09-09 for the Team card.
   Four cards again, so the cascade above is complete. */

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lx-nav { transition: none; }
  .lx-hero__copy > *, .lx-hero .lp-stage { animation: none !important; }
  .lx-marquee { -webkit-mask-image: none; mask-image: none; }
  .lx-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .lx-marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .lx-marquee__set:nth-child(2) { display: none; }
  .lx-light .lp-card { transition: none; }
  .lx-light .lp-card:hover { transform: none; }
}
html.no-motion .lx-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
html.no-motion .lx-marquee__set { flex-wrap: wrap; justify-content: center; }
html.no-motion .lx-marquee__set:nth-child(2) { display: none; }

/* --------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .lx-nav.is-scrolled, .lx-light .lp-card, .lx-light .lp-step, .lx-light .lp-faq details,
  .lx-guards .lp-card, .lx-light .lp-grant__node, .lx-light .lp-grant__cap, .lx-light .lp-consent { border: 1px solid currentColor; }
}

/* ------------------------------------------------------------------- print */
@media print {
  .lx-nav { position: static; transform: none; }
  .lx-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .lx-marquee__set:nth-child(2) { display: none; }
}

/* -------------------------------------------------- the difference (#voice)
   Added 2026-09-07 with the repositioning. One message slot, filled twice,
   wiped between by a handle. See the comment above the section in
   landing.html for why it is built this way rather than as two panels.

   THE GEOMETRY, because it is the one part that is easy to get wrong.
   Both drafts occupy the SAME grid cell, so they share a top edge and the
   taller of the two sets the frame height. --p is the seam, 0 to 100, left
   to right. The GENERIC draft is the top layer and is clipped to the left of
   the seam; the wireagent draft is the base and is revealed on the right. So
   dragging LEFT sweeps the generic aside, and the section's own sub copy
   ("the one on the right") is literally true at the default of 62.

   Everything is driven by that one custom property, which is what lets the
   handle and the small-screen segmented control share a single code path.

   IT RESTS AT 0 SINCE 2026-09-11, and 0 is all wireagent. The default was 62,
   so the first thing a reader saw was two drafts spliced down the middle:
   neither one readable, carrying the page's central argument. The resting
   frame is now a complete draft, the sub copy says "the one you are reading",
   and lp-split.js sweeps once to 74 and back to show that there is a worse
   one underneath. test/landing-layout.mjs pins this number for that reason. */
.lx-split { --p: 0; display: grid; gap: 14px; justify-items: center; }

/* This frame wears the same chrome as a console window and is NOT one.
   It borrowed `.lp-window` for the border and the lift until 2026-09-07,
   which quietly broke a real guard: `.lp-window` is the selector meaning
   "a framed window holding a living console replica" (site.css), and the
   probe counts it to catch a window that has silently lost its replica or
   a replica that has escaped its window. A fifth `.lp-window` with no
   `.lp-shot` inside made that count read 5 against 4 replicas.

   So the chrome is written out here rather than inherited. The duplication
   is the point: one class, one meaning. `test/landing-layout.mjs` asks only
   for `>= 4` windows, which is why the unit suite never saw this. */
.lx-split__frame {
  position: relative;
  width: 100%; margin-inline: auto;
  max-width: 44rem;                 /* a message is read at a column width, not a screen width */
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--lift-glass);
  background: var(--surface);
  padding: 0;
}

/* Who it is to. Shared by both drafts, because it is the same person: the
   thing being compared is the message, not the recipient. */
.lx-split__to {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--glass-edge);
  font-size: 13.5px; color: var(--muted); min-width: 0;
}
.lx-split__to b { color: var(--text); font-size: 14.5px; font-weight: 600; flex: none; }
.lx-split__to span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-split__av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--glass-edge);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text);
}

.lx-split__thread { position: relative; display: grid; }

/* Both drafts in one cell. grid-area rather than absolute positioning, so the
   taller one still contributes its height and the frame cannot collapse. */
.lx-split__msg { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; padding: 20px 22px 46px; }
.lx-split__msg p {
  margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text);
  text-wrap: pretty; hyphens: none;
}
/* THE OPAQUE GROUND IS LOAD-BEARING, not decoration. A clip-path cuts the
   layer's BOX, and a box that paints nothing hides nothing: without this
   background the wireagent draft underneath renders straight through the
   generic one across the whole frame and the section reads as two messages
   printed on top of each other. Found by looking at it in a browser; the
   clip-path was correct and measured correct the whole time. */
.lx-split__msg--generic {
  position: relative; z-index: 2;
  background: var(--surface);
  clip-path: inset(0 calc((100 - var(--p)) * 1%) 0 0);
}
.lx-split__msg--generic p { color: var(--muted); }

/* The seam. A hairline and a grip, drawn at --p and deliberately not
   transitioned: it is the handle's own position, so it must not lag the thumb. */
.lx-split__seam {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: calc(var(--p) * 1%); width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .55); pointer-events: none;
}
.lx-split__seam i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
}
/* The two arrows on the grip, drawn in CSS so the markup stays a single span. */
.lx-split__seam i::before, .lx-split__seam i::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  border-right: 1.6px solid var(--text); border-bottom: 1.6px solid var(--text);
}
.lx-split__seam i::before { left: 10px; transform: translateY(-50%) rotate(135deg); }
.lx-split__seam i::after  { right: 10px; transform: translateY(-50%) rotate(-45deg); }

/* Which side is which. Outside the clip on purpose, so a tag is never sliced
   in half at an extreme of the drag. Each dims when its own side is nearly
   gone; the opacity is set from script alongside --p. */
.lx-split__tag {
  position: absolute; bottom: 10px; z-index: 4; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-edge); background: rgba(10, 16, 36, .72);
  color: var(--muted);
  transition: opacity .2s var(--lx-ease);
}
.lx-split__tag--l { left: 12px; opacity: var(--tag-l, 1); }
.lx-split__tag--r { right: 12px; opacity: var(--tag-r, 1); color: var(--text); border-color: rgba(255, 255, 255, .45); }

/* The control itself. A real range input, so arrow keys, Home, End, touch and
   assistive technology all work with no script at all; the script only mirrors
   its value onto --p. Invisible, stretched over the whole frame, and the thumb
   is given a real width so a coarse pointer has something to grab. */
.lx-split__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none;
  cursor: ew-resize; opacity: 0;
}
.lx-split__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 240px; }
.lx-split__range::-moz-range-thumb { width: 44px; height: 240px; border: 0; background: transparent; }
/* The ring is drawn on the frame, because the input itself is invisible and an
   outline on a zero-opacity element is invisible with it. */
.lx-split__frame:has(.lx-split__range:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }

.lx-split__cap {
  margin: 0; text-align: center; max-width: 46ch;
  font-size: 14.5px; line-height: 1.5; color: var(--muted); text-wrap: balance;
}
.lx-split__foot {
  margin: clamp(18px, 2.4vw, 26px) auto 0; text-align: center; max-width: 62ch;
  font-size: 14px; line-height: 1.55; color: var(--faint);
}
.lx-split__foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.lx-split__foot a:hover { color: var(--text); }

/* The two-state control is the whole interaction below 720px, and nothing
   above it. */
.lx-split__switch { display: none; }

/* -------------------------------------------------- the difference, narrow
   A horizontal drag inside a narrow column fights the page's own scroll, so
   under 720px the wipe is dropped for a two-state control. Same two drafts,
   same DOM, one code path: the buttons write --p exactly as the handle does,
   and the transition here is what makes the swap read as a change of words
   rather than as a jump. */
@media (max-width: 720px) {
  /* A single extreme here too, and deliberately the OTHER one: the wide
     layout now opens on 0 (all wireagent) and this opens on 100 (all generic),
     because at this width the segmented control ships with the generic tab
     marked selected and the two must agree with no script running. With the
     handle hidden, a split anywhere in between is a state a reader cannot have
     asked for; and if the script never runs it is a state they cannot leave
     either. lp-split.js snaps the same way, so the two agree whether or not it
     loads. */
  .lx-split { --p: 100; }

  .lx-split__switch {
    display: inline-flex; padding: 3px; gap: 3px;
    border: 1px solid var(--glass-edge); border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .04);
  }
  .lx-split__switch button {
    font: inherit; font-size: 13.5px; font-weight: 600;
    padding: 7px 15px; min-height: var(--tap, 40px);
    border: 0; border-radius: var(--r-pill); background: transparent;
    color: var(--muted); cursor: pointer;
    transition: background .2s var(--lx-ease), color .2s var(--lx-ease);
  }
  .lx-split__switch button[aria-selected="true"] { background: var(--text); color: #05070a; }
  .lx-split__range, .lx-split__seam, .lx-split__tag { display: none; }
  .lx-split__msg--generic { transition: clip-path .34s var(--lx-ease); }
  .lx-split__frame { max-width: 100%; }
  .lx-split__msg { padding: 18px 16px 22px; }   /* no tags at this width, so no room to reserve */
  .lx-split__msg p { font-size: 15px; }
  .lx-split__to { padding: 12px 14px; font-size: 12.5px; }
}

/* Reduced motion. The handle still works; only the auto-demo and the
   narrow-width swap animation go, and the script skips the demo entirely. */
.no-motion .lx-split__msg--generic,
.no-motion .lx-split__tag { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lx-split__msg--generic, .lx-split__tag { transition: none; }
}

/* ==========================================================================
   THE AGENT SECTIONS (2026-09-11). Three diagrams, none of them a replica.

   Plan today and the approval queue are drawn as LIGHT TILES rather than as
   framed console windows, and the veto strip as three dark cards inside the
   wipe's own material. The reasoning is in docs/landing-agents-2026-09-11.md
   section 8, and the short version is: the tests pin four replicas each
   carrying a rail, Plan today is an overlay with no rail, the console's
   Approval page no longer exists, and a fifth framed window adds the height
   the owner has twice asked to take out. A tile says it in a third of the
   space and puts a light band between two dark ones.
   ========================================================================== */

/* ------------------------------------------------ tell it who, and why (#plan)
   Five tiles, one per question the console asks, in that order. Not numbered:
   the order is carried by the layout, and a numbered kicker is the ornament
   PRODUCT.md bans. Five across at the 72rem wrap, two under 860, one under
   520, which is the same ladder the plan cards walk. */
/* The head was in a 1.1fr column beside the ledger until 2026-09-11, so that
   four stacked blocks would not make the band 750px tall at 1440. The order
   that bought was wrong: the ledger sat above the questions it was the answer
   to. The head is full width now and the ledger has become the wire under the
   tiles, which restores the reading order at roughly the same height, because
   a lead that wrapped to four lines in half a column wraps to two across the
   band. Measured, not assumed: see the commit.

   .lx-plan__top is gone with it. If a second column is ever wanted back here,
   note that it is the ORDER that was the defect, not the columns. */
/* Tighter than the global head gap, because this band now carries four rows
   instead of three and every one of them is paying for the reading order.
   The lead could not be shortened by widening: .lx-head p is capped at 58ch
   and .lx-head at 46rem, so it wraps to four lines at any band width. That
   was the assumption behind moving the head full width and it was wrong;
   the gain here is the ORDER, and the height is paid for out of the gaps. */
#plan .lx-head { margin-bottom: clamp(18px, 2.2vw, 24px); }
.lx-head + .lx-plan { margin-top: 0; }
.lx-plan {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.lx-plan li {
  display: grid; gap: 8px; align-content: start;
  padding: 18px 18px 20px; border-radius: 14px;
  background: var(--lx-card);
  /* Shadow OR a border, never both, and the rest state is the shadow: the
     hairline plus a wide soft shadow is the combination impeccable flags as
     the generated-UI default. Same contract as .lx-light .lp-card. */
  border: 1px solid transparent; box-shadow: var(--lx-shadow);
}
.lx-plan b {
  font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.25;
  letter-spacing: -.012em; color: var(--lx-ink);
}
.lx-plan span { font-size: 14.5px; line-height: 1.5; color: var(--lx-ink-2); text-wrap: pretty; }

/* THE LEDGER, AS THE WIRE (2026-09-11). What the day did, in order, drawn as
   four stations on the cable instead of a tinted panel.

   It was `background: var(--lx-paper-2); border: 1px solid var(--lx-rule)`
   with mono prose, which broke the card contract stated in the token block at
   the top of this file while the five tiles directly above it followed that
   contract. A panel that is the only thing in its band not built the way its
   neighbours are is what "doesn't look on par" means in practice.

   NOTHING NEW IS DEFINED HERE. .w-cable, .w-current, .w-node and .w-halo are
   site.css's, and their light-band ink is already set at .lx-light .w-* above
   for the stations in #how. This adds the layout only, which is the whole
   argument for using the wire: it is the house asset and the product's own
   mark, not an ornament invented for one band.

   The four columns match the four node centres in the SVG (x 150/450/750/1050
   of a 1200 viewBox, i.e. the column centres), and preserveAspectRatio="none"
   stretches that linearly, so a node stays over its own text at every width. */
/* HEIGHT IS A CONSTRAINT HERE, NOT A PREFERENCE. The band was built
   side-by-side precisely because "four stacked blocks made the band 750px
   tall at 1440", and restoring the reading order put a fourth block back. So
   the wire row is deliberately the thinnest of the four: a 34px cable rather
   than site.css's 56, one tight line per station, and the foot pulled up
   under it. Measured against the two-column original, not estimated.

   gap is 0 and the spacing lives in each item's padding-right, so a column is
   exactly a quarter of the row at every width. With gap the columns were
   narrower than a quarter and their centres drifted up to 6px away from the
   node above them, which is the one thing this row cannot afford to get
   wrong. */
.lx-wire { margin-top: clamp(12px, 1.6vw, 18px); }
.lx-wire__cable { position: relative; }
.lx-wire__cable svg { display: block; width: 100%; height: 34px; overflow: visible; }
/* The node and its halo, in CSS rather than SVG, for the reason the markup
   gives: the cable's viewBox is stretched non-uniformly and an SVG circle
   would render as an ellipse. The inks are the same two the light-band wire
   already uses at .lx-light .w-node and .lx-light .w-halo above, so this is
   the same object drawn by other means, not a second style for it. */
.lx-wire__node {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--lx-ink);
  box-shadow: 0 0 0 5px rgba(10, 16, 36, .10);
}
/* The last station is the one that matters, and it is the only claim in the
   band that is about restraint rather than work done: nothing was sent. */
.lx-wire__node--end {
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  box-shadow: 0 0 0 6px rgba(10, 16, 36, .14);
}
/* Opt this wire into the house draw-in. site.css gates the dash on a named
   parent, so a new placement is visible-by-default until it is listed, which
   is the right default and the wrong look here. */
.js-reveal .lx-wire:not(.is-in) .w-cable { stroke-dashoffset: 100; }
.js-reveal .lx-wire:not(.is-in) .w-current { opacity: 0; }
.lx-wire__log {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.lx-wire__log li {
  font-size: 13.5px; line-height: 1.5; color: var(--lx-ink-2);
  text-wrap: pretty; padding-right: 22px;
}
/* The figures carry the claim, so they are weight and ink rather than a
   different typeface. Mono here was what made the whole block read as a
   terminal rather than as the product speaking. */
.lx-wire__log b { font-weight: 600; color: var(--lx-ink); }
.lx-wire__log .is-end { color: var(--lx-ink); }

/* Under 860px the cable is dropped rather than squashed: four stations across
   a phone is four words a column. The lines then read as a plain list, which
   is what they are, and the wire returns when there is room for it to mean
   something. Same call .lp-steps-wire makes at 720px in site.css. */
@media (max-width: 860px) {
  .lx-wire__cable { display: none; }
  .lx-wire__log { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lx-wire__log li { padding-left: 18px; position: relative; }
  .lx-wire__log li::before {
    content: ""; position: absolute; left: 2px; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--lx-ink); opacity: .35;
  }
  .lx-wire__log .is-end::before { opacity: 1; }
}
.lx-plan__foot {
  margin: clamp(10px, 1.4vw, 14px) 0 0; max-width: 70ch;
  font-size: 14px; line-height: 1.6; color: var(--lx-ink-3);
}
.lx-plan__foot a { color: var(--lx-ink); text-decoration: underline; text-decoration-color: var(--lx-rule-strong); text-underline-offset: 3px; }
.lx-plan__foot a:hover { text-decoration-color: var(--lx-ink); }

@media (max-width: 860px) {
  .lx-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .lx-plan { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- the veto strip (#voice)
   Given, Written, Refused. Three columns on the dark ground, wearing the
   split frame's material so it reads as the same argument continued rather
   than as a new section. The refused lines are struck through and carry the
   Guardian's own reason as a mono pill; the reason is the point, so it is the
   only thing in here that takes a colour. */
.lx-veto { margin-top: clamp(26px, 4vw, 44px); }
.lx-veto h3 {
  /* 60rem, not the 46rem the other heads take: the sentence is 68 characters
     and at 46rem it broke with one word on the second line. */
  margin: 0 0 16px; max-width: 60rem;
  font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2vw, 24px);
  line-height: 1.2; letter-spacing: -.015em; color: var(--text);
}
.lx-veto__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lx-veto__col {
  display: grid; gap: 10px; align-content: start;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--glass-edge); background: var(--surface);
}
/* 12.5px, not the 11px a kicker would normally take: width-sweep.mjs holds
   every public page to a 12px floor and this is real copy on a real page,
   not an ornament inside a scaled replica. */
.lx-veto__k {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.lx-veto__col p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.lx-veto__premise { color: var(--muted); }
.lx-veto__col s { color: var(--muted); text-decoration-color: rgba(255, 255, 255, .45); }
.lx-veto__why {
  display: inline-block; margin-top: 6px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.4;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--warn, #e0a33c); color: var(--warn, #e0a33c);
  background: rgba(224, 163, 60, .10);
}
.lx-veto__foot {
  margin: 16px 0 0; max-width: 70ch;
  font-size: 14px; line-height: 1.6; color: var(--faint);
}
@media (max-width: 720px) {
  .lx-veto__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------- approve, or say why not
   Three drafts and what the rejection taught it. Light tiles, same contract
   as .lx-plan: white card, transparent edge, the shadow at rest. The state
   column is where the whole section's argument lives, so it is the widest
   thing on each row that is allowed to wrap. */
/* Head and the learned rule on one row, the queue under both: the same
   one-screen contract as .lx-plan__top, for the same reason. */
.lx-approve__top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
  margin-bottom: clamp(16px, 2vw, 22px);
}
.lx-approve__top .lx-head { margin-bottom: 0; }
.lx-approve { display: grid; gap: 14px; }
.lx-approve__queue {
  list-style: none; margin: 0; padding: 6px 20px 10px;
  border-radius: 14px; background: var(--lx-card);
  border: 1px solid transparent; box-shadow: var(--lx-shadow);
}
.lx-approve__queue li {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 6px 20px;
  align-items: baseline; padding: 16px 0; border-top: 1px solid var(--lx-rule);
}
.lx-approve__queue li:first-child { border-top: 0; }
.lx-approve__who { font-size: 15.5px; font-weight: 600; color: var(--lx-ink); }
.lx-approve__line { font-size: 15px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-approve__state {
  font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--lx-ink-3);
  justify-self: end; text-align: right; max-width: 26ch;
}
.lx-approve__state--go { color: var(--lx-ink); }
.lx-approve__state--no { color: #8a3b2f; }
.lx-approve__learn {
  display: grid; gap: 6px; padding: 18px 20px; border-radius: 14px;
  background: var(--lx-paper-2); border: 1px solid var(--lx-rule);
}
.lx-approve__learn h3 {
  margin: 0; font-family: var(--serif); font-weight: 500; font-size: 17px;
  letter-spacing: -.012em; color: var(--lx-ink);
}
.lx-approve__learn p {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 15px; line-height: 1.5; color: var(--lx-ink-2);
}
.lx-approve__rule {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--lx-rule-strong); color: var(--lx-ink);
}
.lx-approve__foot {
  margin: clamp(14px, 2vw, 20px) 0 0; max-width: 70ch;
  font-size: 14px; line-height: 1.6; color: var(--lx-ink-3);
}
@media (max-width: 860px) {
  .lx-approve__top { grid-template-columns: minmax(0, 1fr); }
  .lx-approve__queue li { grid-template-columns: minmax(0, 1fr); }
  .lx-approve__state { justify-self: start; text-align: left; max-width: none; }
}