/* ══════════════════════════════════════════════════════════════════════════════
   THE LANDING PAGE'S OWN DECISIONS, AND NOTHING ELSE.

   The bar, the button, the card, the chip, the eyebrow, the headline pairing, the steps
   and the question list are public/design/marketing.css and arrive with /theme.css: this
   page uses those objects as they are. What is here is what only this page has — the
   hero and its exchange, the pictures that carry each argument, and the five product
   screens drawn for sample data.

   Every colour, size, corner and duration is an --ag-* token. The only literals are the
   assistants' own marks (somebody else's brand) and the dark answer card in the Presence
   screen, which is a drawing of somebody else's interface. When a recipe here earns a
   second use it moves to marketing.css under a generic name; nothing below is named for
   this page's content.

   Written to be read in order: base, hero, band, then one block per section.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-ag-surface="marketing"] {
  /* The product pictures are drawn at product size, a step down from the page's reading
     size. They are multiples of the label step so the operator's type scale still moves them. */
  --lp-ui-xs: calc(var(--ag-type-label) * .87);
  --lp-ui-sm: calc(var(--ag-type-label) * .92);
  --lp-ui: var(--ag-type-label);
  --lp-ui-md: calc(var(--ag-type-body) * .9);
  --lp-h2: clamp(38px, 5.4vw, 78px);
  --lp-r: var(--ag-radius-lg);
  --lp-hair: 1px solid var(--ag-line);
}

.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-skip { position: absolute; left: var(--ag-space-3); top: -4em; z-index: 300; background: var(--ag-ink); color: var(--ag-canvas); padding: var(--ag-space-2) var(--ag-space-4); border-radius: var(--ag-radius-sm); font-weight: 600; }
.lp-skip:focus { top: var(--ag-space-3); }

/* An icon is a <use>, never a glyph: it takes the colour of whatever holds it. */
.lp-i { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -.16em; }

/* ── The bar's progress rule ─────────────────────────────────────────────── */
.lp-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.lp-progress i { display: block; height: 100%; background: var(--ag-signal); transform: scaleX(0); transform-origin: left; }

/* ── Section scaffolding ─────────────────────────────────────────────────── */
.lp-sec { padding-block: clamp(64px, 8.5vw, 124px); }
.lp-head { margin-bottom: clamp(32px, 4.5vw, 64px); }
.lp-h2 .said, .lp-h2 .meant { text-wrap: balance; }
.lp-h2 { font-size: var(--lp-h2) !important; line-height: .98; letter-spacing: -.042em; }
.lp-h2 .said { letter-spacing: -.035em; }
.lp-head .lede { margin: var(--ag-space-5) 0 0; max-width: 56ch; }
.lp-label { font-family: var(--ag-font-mono); font-size: var(--lp-ui); color: var(--ag-ink-faint); margin: 0; }
.lp-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--ag-signal-ink-soft); color: var(--ag-signal-ink); display: grid; place-items: center; flex: none; }
.lp-ic .lp-i { width: 22px; height: 22px; }

/* The assistants' marks are the makers' own shapes in marks.svg, each on its own tile, because they are
   somebody else's brand and the stylesheet keeps no colour that is not the platform's. The two plain
   tiles (a search box, a phone) are the platform's own and take its tokens. */
.lp-tile { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none; overflow: hidden; }
.lp-tile svg { width: 100%; height: 100%; display: block; }
.lp-tile--sm { width: 22px; height: 22px; border-radius: 7px; }
.lp-tile--plain { background: var(--ag-surface-inset); color: var(--ag-ink-muted); }
.lp-tile--plain svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.lp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lp-ui-xs); font-weight: 700; color: var(--ag-ink-muted); background: var(--ag-surface-inset); border-radius: var(--ag-radius-pill); padding: 4px 10px; white-space: nowrap; }
.lp-chip .lp-i { width: 12px; height: 12px; }
.lp-chip--ok { background: color-mix(in srgb, var(--ag-positive) 14%, transparent); color: var(--ag-positive-label); }
.lp-mini { display: inline-flex; align-items: center; font-size: var(--lp-ui-xs); font-weight: 700; border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-sm); padding: 5px 11px; color: var(--ag-ink); background: var(--ag-surface); white-space: nowrap; }
.lp-mini.is-pri, .lp-mini--ask { background: var(--ag-signal); border-color: transparent; color: var(--ag-signal-contrast); }
.lp-state { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: var(--lp-ui-xs); font-weight: 700; border-radius: var(--ag-radius-pill); padding: 4px 10px; background: var(--ag-surface-inset); color: var(--ag-ink-muted); white-space: nowrap; }
.lp-state .lp-i { width: 12px; height: 12px; }
.lp-state--ok { background: color-mix(in srgb, var(--ag-positive) 14%, transparent); color: var(--ag-positive-label); }
.lp-state--q { background: color-mix(in srgb, var(--ag-warning) 14%, transparent); color: var(--ag-warning-label); }

.lp-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-positive); flex: none; animation: lp-pulse 2.2s infinite; }
@keyframes lp-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ag-positive) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ag-positive) 0%, transparent); }
}

/* ══ HERO ═════════════════════════════════════════════════════════════════════
   THE FIRST SCREEN IS A SCREEN. The question, the answer and the first button are one claim,
   so the block is given the height the screen actually has and everything in it is measured
   against that (svh, not vh: a phone's vh is taller than the screen it is on). The headline is
   capped on BOTH axes, and the width cap is the one a phone needs. */
header.hero { padding: 0; }
.lp-hero { position: relative; overflow: clip; }
.lp-hero::before {
  /* A field of dots that fades out toward the corners: texture for the cream without a picture. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ag-ink) 16%, transparent) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 70% at 78% 42%, black, transparent 78%);
  mask-image: radial-gradient(60% 70% at 78% 42%, black, transparent 78%);
  opacity: .6;
}
.lp-hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4.4vw, 72px); align-items: center;
  min-height: calc(100vh - var(--ag-topbar-height)); min-height: calc(100svh - var(--ag-topbar-height));
  padding-block: clamp(20px, 3.5vh, 56px);
}
.lp-hero-copy { min-width: 0; }
.lp-hero .display { font-size: clamp(44px, min(6.3vw, 10.6vh), 100px); }
.hero-cta { display: flex; align-items: center; gap: var(--ag-space-4); flex-wrap: wrap; margin-top: clamp(var(--ag-space-4), 3.4vh, var(--ag-space-6)); }
.hero-sub { margin: clamp(var(--ag-space-3), 2.6vh, var(--ag-space-5)) 0 0; font-size: min(var(--ag-type-body-lg), 4.6vw); max-width: 42ch; }
.hero-note { margin: clamp(var(--ag-space-3), 1.8vh, var(--ag-space-4)) 0 0; font-size: var(--ag-type-caption); color: var(--ag-ink-muted); }

/* "Agoria Can." — the brand is the last word; the stop is DRAWN (a font's period at headline
   size is a smudge); the brush is a filled path that is drawn on, left to right, as the
   headline arrives. */
.hero .display .meant { text-wrap: balance; }
.hero .display .meant .can { position: relative; display: inline-block; }
.hero .display .meant .brush { position: absolute; left: -.045em; width: calc(100% + .1em); top: 100%; height: .28em; margin-top: -.03em; fill: var(--ag-signal-ink); overflow: visible; pointer-events: none; }
.js-reveal .hero .display[data-r] .brush { clip-path: inset(0 100% 0 0); transition: clip-path .68s var(--ag-ease-enter) .26s; }
.js-reveal .hero .display[data-r].in .brush { clip-path: inset(0 0 0 0); }
.hero .display .meant .stop { display: inline-block; width: .28em; height: .28em; border-radius: var(--ag-radius-pill); background: var(--ag-ink); vertical-align: baseline; margin-left: .07em; }

/* The rotating verb owns a LINE, which is what makes the headline the same shape on every
   screen. Two spans, for ever: a turn writes text into the hidden one and swaps a class, so
   nothing is created or destroyed and only opacity and transform ever animate. */
.display .said > span { display: block; }
.display .verb { position: relative; display: block; height: .96em; height: 1lh; color: var(--ag-signal-ink); font-style: italic; white-space: nowrap; }
.display .verb .w { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; opacity: 0; transform: translateY(.26em); transition: opacity .44s var(--ag-ease-enter), transform .44s var(--ag-ease-enter); padding: 0 .16em .22em 0; will-change: opacity, transform; }
.display .verb .w.is-in { opacity: 1; transform: none; }
.display .verb .w.still { transition: none; }
.display .verb .w.is-out { opacity: 0; transform: translateY(-.26em); }

/* ── The exchange ────────────────────────────────────────────────────────────
   Three cards, one story: what the customer asked, what the assistant did to answer, and
   what landed on the other side. Without script it is scene one, finished. With script it
   replays with other assistants and other trades, and each element arrives in its turn. */
.lp-ex { position: relative; display: grid; gap: var(--ag-space-3); width: 100%; max-width: 690px; justify-self: end; min-width: 0; }
.lp-ex::before { content: ""; position: absolute; inset: -9% -7% -11% -9%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--ag-signal) 14%, transparent), transparent); }
.lp-ex > * { position: relative; z-index: 1; min-width: 0; }
.lp-chat { background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-3); overflow: hidden; }
.lp-chat-top, .lp-ans-top { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: var(--lp-hair); }
.lp-chat-name { display: grid; line-height: 1.15; min-width: 0; }
.lp-chat-name b { font-size: var(--lp-ui-md); }
.lp-chat-name small { color: var(--ag-ink-faint); font-size: var(--lp-ui-sm); }
.lp-chat-trade { margin-left: auto; font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); background: var(--ag-surface-inset); border-radius: var(--ag-radius-pill); padding: 3px 11px; white-space: nowrap; }
.lp-chat-body { padding: 18px; display: grid; gap: 14px; min-height: 17.5rem; align-content: start; }
.lp-msg { margin: 0; font-size: var(--lp-ui-md); line-height: 1.45; }
.lp-msg--you { justify-self: end; max-width: 94%; background: var(--ag-signal); color: var(--ag-signal-contrast); padding: 10px 15px; border-radius: 17px 17px 4px 17px; }
.lp-msg--ai { display: grid; gap: 12px; }
.lp-say { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-say li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--lp-ui-md); line-height: 1.45; }
.lp-say .tick { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ag-signal-ink-soft); color: var(--ag-signal-ink); display: grid; place-items: center; font-size: var(--lp-ui-xs); font-weight: 700; margin-top: 1px; }
.lp-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-srcs span { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); border: var(--lp-hair); border-radius: var(--ag-radius-pill); padding: 3px 10px; background: var(--ag-surface); }
.lp-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 42px; }
.lp-bookbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--ag-signal); color: var(--ag-signal-contrast); border-radius: var(--ag-radius-md); padding: 10px 15px; font-weight: 700; font-size: var(--lp-ui-md); }
.lp-booked { display: inline-flex; align-items: center; gap: 8px; color: var(--ag-positive-label); font-weight: 700; font-size: var(--lp-ui-md); }
/* Finished, with no script: the job is booked, so the button that booked it is gone. */
.lp-ex:not(.is-playing) .lp-bookbtn { display: none; }
.lp-booked .lp-i { width: 1.3em; height: 1.3em; padding: 3px; border-radius: 50%; background: var(--ag-positive); color: var(--ag-positive-contrast); stroke-width: 2.6; }
.lp-bookbtn--off { background: var(--ag-surface-inset); color: var(--ag-ink-faint); }
.lp-act-say { font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); flex: 1 1 18ch; }
.lp-chat-foot { display: flex; gap: 4px 20px; flex-wrap: wrap; padding: 11px 18px; background: var(--ag-surface-inset); border-top: var(--lp-hair); font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
.lp-chat-foot span + span::before { content: "·"; margin-right: 20px; color: var(--ag-ink-faint); }

.lp-calls { margin-left: clamp(0px, 7%, 48px); background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-2); padding: 12px 16px 6px; }
.lp-calls header { display: flex; align-items: center; gap: 8px; font-size: var(--lp-ui-sm); margin-bottom: 4px; }
.lp-calls header small { margin-left: auto; color: var(--ag-ink-faint); font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); }
.lp-calls ol { list-style: none; margin: 0; padding: 0; }
.lp-calls li { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto 1.3em; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--ag-line); font-size: var(--lp-ui-xs); }
.lp-calls code { font-family: var(--ag-font-mono); font-weight: 600; color: var(--ag-signal-ink); }
.lp-calls li span { color: var(--ag-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-calls li em { font-style: normal; font-family: var(--ag-font-mono); color: var(--ag-ink-faint); }
.lp-calls li i { display: grid; place-items: center; color: var(--ag-positive-label); }
.lp-calls li i .lp-i { width: 14px; height: 14px; stroke-width: 2.6; }

.lp-owner { margin-right: clamp(0px, 8%, 56px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--ag-ink); color: var(--ag-canvas); border-radius: var(--lp-r); padding: 12px 16px; box-shadow: var(--ag-shadow-3); }
.lp-owner-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--ag-positive); color: var(--ag-positive-contrast); display: grid; place-items: center; }
.lp-owner b { display: block; font-size: var(--lp-ui-md); }
.lp-owner div span { font-size: var(--lp-ui-sm); opacity: .78; }
.lp-owner small { font-family: var(--ag-font-mono); opacity: .6; font-size: var(--lp-ui-xs); }
.lp-caption { margin: 0; font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); text-align: right; }

/* The replay. Everything here is scoped to .is-playing, which the script sets only when it is
   about to run the sequence, so the finished scene above is what a reader with no script sees. */
.lp-ex.is-playing .lp-msg--you { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ag-ease-enter), transform .35s var(--ag-ease-enter); }
.lp-ex.is-playing.ph-q .lp-msg--you { opacity: 1; transform: none; }
.lp-ex.is-playing .lp-msg--ai { opacity: 0; transition: opacity .3s; }
.lp-ex.is-playing.ph-ans .lp-msg--ai { opacity: 1; }
.lp-ex.is-playing .lp-say li, .lp-ex.is-playing .lp-srcs, .lp-ex.is-playing .lp-act { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ag-ease-enter), transform .4s var(--ag-ease-enter); }
.lp-ex.is-playing .lp-say li.on, .lp-ex.is-playing .lp-srcs.on, .lp-ex.is-playing .lp-act.on { opacity: 1; transform: none; }
.lp-ex.is-playing .lp-bookbtn { display: inline-flex; }
.lp-ex.is-playing .lp-booked { display: none; }
.lp-ex.is-playing.ph-done .lp-bookbtn { display: none; }
.lp-ex.is-playing.ph-done .lp-booked { display: inline-flex; }
.lp-ex.is-playing .lp-calls li { opacity: .22; transition: opacity .3s; }
.lp-ex.is-playing .lp-calls li.on { opacity: 1; }
.lp-ex.is-playing .lp-owner { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .45s var(--ag-ease-enter), transform .45s var(--ag-ease-enter); }
.lp-ex.is-playing.ph-done .lp-owner { opacity: 1; transform: none; }
.lp-think { display: inline-flex; gap: 5px; align-items: center; padding: 6px 2px; }
.lp-think i { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-ink-faint); animation: lp-dot 1s infinite ease-in-out; }
.lp-think i:nth-child(2) { animation-delay: .15s; } .lp-think i:nth-child(3) { animation-delay: .3s; }
@keyframes lp-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.lp-caret { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -.12em; animation: lp-blink 1s steps(2) infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }

/* ══ THE BAND: who is asking, and what they ask ═════════════════════════════ */
.lp-band { padding: var(--ag-space-6) 0 var(--ag-space-7); background: var(--ag-surface); border-block: var(--lp-hair); }
.lp-assistants { display: flex; align-items: center; justify-content: space-between; gap: var(--ag-space-4) clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.lp-logos { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ag-space-3) clamp(14px, 2.4vw, 32px); flex-wrap: wrap; align-items: center; }
.lp-logos li { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; font-size: var(--ag-type-small); }
.lp-protos { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.lp-protos code { font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); color: var(--ag-signal-ink); background: var(--ag-signal-ink-soft); border-radius: var(--ag-radius-sm); padding: 4px 10px; font-weight: 600; }
.lp-ticker { overflow: hidden; margin-top: var(--ag-space-5); -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); }
.lp-ticker-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ag-space-3); }
.lp-ticker-track li { background: var(--ag-canvas); border: var(--lp-hair); border-radius: var(--ag-radius-pill); padding: 8px 18px; font-size: var(--lp-ui-md); color: var(--ag-ink-muted); }
/* Without motion the questions are a short, centred cloud, not a wall: the first eight say it. */
.lp-ticker-track li:nth-child(n+9) { display: none; }
.js-reveal .lp-ticker-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: lp-marquee 90s linear infinite; }
.js-reveal .lp-ticker-track li { white-space: nowrap; }
.js-reveal .lp-ticker-track li:nth-child(n+9) { display: block; }
.js-reveal .lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }

/* ══ 01 · THE SHIFT ═════════════════════════════════════════════════════════
   Ten links on the left, one answer on the right, and a toggle that asks the same question of
   an assistant that can read you and one that cannot. */
.lp-versus { display: grid; grid-template-columns: minmax(0, .82fr) auto minmax(0, 1.18fr); gap: clamp(12px, 2vw, 28px); align-items: stretch; }
.lp-serp { background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--lp-r); padding: var(--ag-space-4) var(--ag-space-4) var(--ag-space-3); min-width: 0; }
.lp-serp header { display: grid; gap: 10px; margin-bottom: 8px; }
.lp-serp-q { display: flex; align-items: center; gap: 8px; border: var(--lp-hair); border-radius: var(--ag-radius-pill); padding: 8px 14px; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); background: var(--ag-canvas); }
.lp-serp ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.lp-serp li { counter-increment: r; display: grid; gap: 1px; padding: 8px 0 8px 28px; position: relative; border-top: var(--lp-hair); min-width: 0; }
.lp-serp li::before { content: counter(r); position: absolute; left: 0; top: 9px; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-serp li b { font-size: var(--lp-ui-sm); font-weight: 600; color: var(--ag-ink-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-serp li small { font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-serp li.is-you { background: var(--ag-attention-soft); margin-inline: -10px; padding-inline: 38px 10px; border-radius: 8px; border-top-color: transparent; }
.lp-serp li.is-you::before { left: 10px; color: var(--ag-ink); font-weight: 700; }
.lp-serp li.is-you b { color: var(--ag-ink); }
.lp-serp li.is-you em { font-style: normal; font-weight: 700; color: var(--ag-ink); }
.lp-vs-mid { align-self: center; display: grid; justify-items: center; gap: 6px; color: var(--ag-ink-faint); font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); }
.lp-vs-mid .lp-i { width: 28px; height: 28px; }

.lp-ans { background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-2); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.lp-ans-top { flex-wrap: wrap; }
.lp-seg { margin-left: auto; display: inline-flex; background: var(--ag-surface-inset); border-radius: var(--ag-radius-pill); padding: 3px; gap: 2px; }
.lp-seg button { font: inherit; font-size: var(--lp-ui-sm); font-weight: 700; border: 0; background: transparent; color: var(--ag-ink-muted); padding: 7px 15px; border-radius: var(--ag-radius-pill); cursor: pointer; min-height: 32px; transition: background var(--ag-motion-normal), color var(--ag-motion-normal); }
.lp-seg button[aria-selected="true"] { background: var(--ag-chip-on); color: var(--ag-chip-on-ink); }
.lp-seg button:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: 2px; }
.lp-ans > .lp-msg--you { margin: 18px 18px 0; }
.lp-panes { padding: 16px 18px 18px; display: grid; flex: 1; align-content: start; }
.lp-pane { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; min-width: 0; }
.lp-ans.is-tabbed .lp-pane { transition: opacity .3s var(--ag-ease-standard); }
.lp-ans.is-tabbed .lp-pane:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-ans:not(.is-tabbed) .lp-pane { grid-area: auto; }
.lp-ans:not(.is-tabbed) .lp-panes { gap: var(--ag-space-5); }
.lp-pane-lead { margin: 0; font-weight: 700; font-size: var(--lp-ui-md); }
.lp-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: n; }
.lp-names li { counter-increment: n; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 12px; font-size: var(--lp-ui-md); }
.lp-names li::before { content: counter(n); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--ag-surface-inset); display: grid; place-items: center; font-size: var(--lp-ui-xs); font-weight: 700; color: var(--ag-ink-muted); }
.lp-names li span { color: var(--ag-ink-muted); font-size: var(--lp-ui-sm); }
.lp-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--ag-radius-md); font-size: var(--lp-ui-sm); line-height: 1.45; margin: 4px 0 0; }
.lp-note .lp-i { width: 18px; height: 18px; margin-top: 1px; }
.lp-note--bad { background: color-mix(in srgb, var(--ag-danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ag-danger) 28%, transparent); }
.lp-note--bad .lp-i { color: var(--ag-danger-label); }
.lp-note--good { background: var(--ag-signal-ink-soft); border: 1px solid color-mix(in srgb, var(--ag-signal) 32%, transparent); }
.lp-note--good .lp-i { color: var(--ag-signal-ink); }
.lp-ans > .lp-chat-foot { margin-top: auto; }

.lp-points { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.lp-points li { border-top: 2px solid var(--ag-ink); padding-top: var(--ag-space-5); }
.lp-points h3 { font-size: var(--ag-type-card); line-height: 1.15; letter-spacing: -.02em; margin: var(--ag-space-4) 0 var(--ag-space-2); font-weight: 800; }
.lp-points p { margin: 0; color: var(--ag-ink-muted); font-size: var(--ag-type-body); line-height: var(--ag-leading-body); }

/* ══ 02 · THREE READERS ═════════════════════════════════════════════════════ */
.lp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.lp-reader { background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--lp-r); padding: var(--ag-space-5); display: flex; flex-direction: column; gap: var(--ag-space-4); min-width: 0; }
.lp-reader header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.lp-reader header .lp-verdict { grid-column: 1 / -1; justify-self: start; }
.lp-reader header small { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); display: block; }
.lp-reader h3 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: 1.1; font-weight: 800; }
.lp-no { width: 32px; height: 32px; border-radius: 50%; background: var(--ag-ink); color: var(--ag-canvas); display: grid; place-items: center; font-weight: 800; font-size: var(--lp-ui-sm); }
.lp-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lp-ui-xs); font-weight: 800; border-radius: var(--ag-radius-pill); padding: 4px 11px 4px 8px; }
.lp-verdict .lp-i { width: 13px; height: 13px; stroke-width: 2.6; }
.lp-verdict--ok { background: color-mix(in srgb, var(--ag-positive) 14%, transparent); color: var(--ag-positive-label); }
.lp-verdict--bad { background: color-mix(in srgb, var(--ag-danger) 12%, transparent); color: var(--ag-danger-label); }
.lp-reader-cap { margin: auto 0 0; color: var(--ag-ink-muted); font-size: var(--lp-ui-md); line-height: 1.45; padding-top: var(--ag-space-3); border-top: var(--lp-hair); }
.lp-reader--bad { border-color: color-mix(in srgb, var(--ag-danger) 32%, var(--ag-line)); }
.lp-reader--good { border-color: color-mix(in srgb, var(--ag-signal) 50%, transparent); box-shadow: var(--ag-shadow-3); background: linear-gradient(180deg, var(--ag-signal-ink-soft), transparent 42%), var(--ag-surface-raised); }

.lp-browser { border: var(--lp-hair); border-radius: var(--ag-radius-md); overflow: hidden; background: var(--ag-surface-raised); }
.lp-browser-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--ag-surface-inset); border-bottom: var(--lp-hair); }
.lp-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-line-strong); opacity: .5; }
.lp-browser-bar span { margin-left: 8px; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); background: var(--ag-canvas); border-radius: var(--ag-radius-pill); padding: 2px 11px; }
.lp-site { padding: 20px 18px 22px; display: grid; gap: 10px; justify-items: start; }
.lp-site small { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-site b { font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.035em; line-height: 1.05; font-weight: 800; }
.lp-site-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-site-chips span { font-size: var(--lp-ui-xs); border: var(--lp-hair); border-radius: var(--ag-radius-pill); padding: 3px 10px; color: var(--ag-ink-muted); }
.lp-site-btn { background: var(--ag-signal); color: var(--ag-signal-contrast); font-weight: 700; border-radius: var(--ag-radius-sm); padding: 8px 15px; font-size: var(--lp-ui-sm); }

.lp-site-list { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; width: 100%; }
.lp-site-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: var(--lp-hair); font-size: var(--lp-ui-sm); }
.lp-site-list li b { font-weight: 800; }
.lp-site-rev { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-asks { margin: 0; display: flex; gap: 10px; align-items: flex-start; border: 1px dashed var(--ag-line-strong); border-radius: var(--ag-radius-md); padding: 10px 12px; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); line-height: 1.4; }
.lp-asks .lp-tile { margin-top: 1px; }
.lp-pre { margin: 0; background: var(--ag-surface-inset); border-radius: var(--ag-radius-md); padding: 12px 14px; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); line-height: 1.65; color: var(--ag-ink); overflow: auto; white-space: pre; }
.lp-pre .c, .lp-code .c { color: var(--ag-ink-faint); }
.lp-pre .k, .lp-code .k { color: var(--ag-signal-ink); }
.lp-pre .s, .lp-code .s { color: var(--ag-positive-label); }
.lp-pre--call { padding: 10px 14px; }
.lp-found { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-found li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--lp-ui-sm); }
.lp-found .lp-i { color: var(--ag-danger-label); width: 15px; height: 15px; stroke-width: 2.4; }
.lp-found em { font-style: normal; color: var(--ag-danger-label); font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); }
.lp-facts { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 9px 0; border-top: var(--lp-hair); font-size: var(--lp-ui-sm); }
.lp-facts li:first-child { border-top: 0; }
.lp-facts li b { font-weight: 600; }
.lp-facts li span { font-weight: 800; text-align: right; }
.lp-facts li em { grid-column: 1 / -1; font-style: normal; color: var(--ag-ink-faint); font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); }
.lp-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-tools code { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); background: var(--ag-signal-ink-soft); color: var(--ag-signal-ink); border-radius: var(--ag-radius-sm); padding: 3px 9px; font-weight: 600; }

/* ══ 03 · THE CLIMB ═════════════════════════════════════════════════════════
   "Cited" and "reachable" are two different heights, so the page draws a stair. The step you
   are on is the fill, the steps already climbed carry the tint, and the ones above stay empty:
   that is the honest picture, and it is the picture most websites are actually in. */
.lp-stair { position: relative; }
.lp-stair-brackets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--ag-space-4); }
.lp-stair-brackets span { position: relative; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding-top: 16px; font-weight: 800; font-size: var(--ag-type-body); letter-spacing: -.01em; }
.lp-stair-brackets small { font-weight: 500; color: var(--ag-ink-muted); font-size: var(--lp-ui); }
.lp-stair-brackets i { position: absolute; left: 0; right: 0; top: 0; height: 9px; border: 2px solid var(--ag-ink); border-bottom: 0; border-radius: 7px 7px 0 0; }
.lp-stair-brackets .b1 { grid-column: 1 / 4; }
.lp-stair-brackets .b2 { grid-column: 4 / 8; }
.lp-stair-brackets .b2 i { border-color: var(--ag-signal); }
.lp-steps7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.lp-rung { position: relative; --h: calc(118px + var(--i) * 30px); height: var(--h); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; text-align: left; padding: 14px; border-radius: var(--ag-radius-md) var(--ag-radius-md) 6px 6px; border: var(--lp-hair); background: var(--ag-surface); color: var(--ag-ink-muted); cursor: pointer; font: inherit; transition: background .28s var(--ag-ease-standard), color .28s var(--ag-ease-standard), border-color .28s, transform .35s var(--ag-ease-enter), box-shadow .28s; min-width: 0; }
.lp-rung .lp-i { order: -1; margin-bottom: auto; width: 24px; height: 24px; opacity: .92; }
.lp-rung .n { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); opacity: .85; }
.lp-rung b { font-size: clamp(14px, 1.45vw, 20px); letter-spacing: -.02em; font-weight: 800; color: inherit; }
.lp-rung:hover { border-color: var(--ag-line-strong); }
.lp-rung[data-state="climbed"] { background: var(--ag-signal-ink-soft); border-color: transparent; color: var(--ag-signal-ink); }
.lp-rung[data-state="here"] { background: var(--ag-signal); border-color: transparent; color: var(--ag-signal-contrast); transform: translateY(-8px); box-shadow: var(--ag-shadow-3); }
.lp-rung:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: 2px; }
.lp-rung[data-rung="2"]::after { content: "most websites stop here"; position: absolute; left: 0; bottom: calc(100% + 10px); font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink); background: var(--ag-attention); border-radius: var(--ag-radius-pill); padding: 3px 10px; white-space: nowrap; }
.lp-stair-say { margin-top: var(--ag-space-5); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--ag-space-4) clamp(24px, 4vw, 64px); padding: var(--ag-space-5) var(--ag-space-5) var(--ag-space-5); background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-1); min-height: 14.5rem; align-content: start; transition: opacity .14s; }
.lp-stair-say.turning { opacity: 0; }
.lp-stair-of { grid-column: 1 / -1; margin: 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--ag-font-mono); font-size: var(--lp-ui); color: var(--ag-ink-faint); }
.lp-stair-of span { color: var(--ag-signal-ink); font-weight: 700; }
.lp-stair-of em { font-style: normal; }
.lp-stair-main { margin: 0; font-size: var(--ag-type-body-lg); line-height: 1.5; color: var(--ag-ink-muted); }
.lp-stair-main b { color: var(--ag-ink); font-size: 1.12em; letter-spacing: -.02em; }
.lp-stair-meta { margin: 0; display: grid; gap: var(--ag-space-4); align-content: start; }
.lp-stair-meta dt { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.lp-stair-meta dd { margin: 3px 0 0; color: var(--ag-ink); font-size: var(--ag-type-body); line-height: 1.4; }

/* ══ 04 · FIVE STEPS ════════════════════════════════════════════════════════
   The picture sticks while its step scrolls past. Without script every step is simply in
   order; the script only lights the step you are on and draws the line that joins them. */
.lp-flow { list-style: none; margin: 0; padding: 0; position: relative; }
.lp-flow-step { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(24px, 5vw, 88px); align-items: start; min-height: min(76vh, 700px); padding-block: clamp(28px, 6vh, 72px); border-top: var(--lp-hair); }
.lp-flow-copy { align-self: center; max-width: 36rem; min-width: 0; transition: opacity .5s var(--ag-ease-standard); }
.js-reveal .lp-flow-step:not(.is-on) .lp-flow-copy { opacity: .42; }
.lp-flow-copy .step-n { display: block; margin-bottom: var(--ag-space-3); font-size: var(--lp-ui); padding: 0; }
.lp-flow-copy h3 { margin: 0 0 var(--ag-space-4); font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.lp-flow-copy p { margin: 0; font-size: var(--ag-type-body-lg); line-height: 1.5; color: var(--ag-ink-muted); max-width: 42ch; }
.lp-roles { margin: var(--ag-space-5) 0 0; display: grid; border-top: var(--lp-hair); }
.lp-roles div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: var(--lp-hair); font-size: var(--ag-type-body); }
.lp-roles dt { font-family: var(--ag-font-mono); font-size: var(--lp-ui); color: var(--ag-ink-faint); padding-top: 2px; }
.lp-roles dd { margin: 0; color: var(--ag-ink); }
.lp-roles div:last-child dt { color: var(--ag-signal-ink); font-weight: 700; }
.lp-flow-vis { position: sticky; top: calc(var(--ag-topbar-height) + var(--ag-space-6)); align-self: start; min-width: 0; }

.lp-vis { background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-3); overflow: hidden; }
.lp-vis-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: var(--lp-hair); font-size: var(--lp-ui-md); }
.lp-vis-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lp-vis-top .lp-chip { margin-left: auto; }
.lp-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--ag-signal-ink-soft); color: var(--ag-signal-ink); display: grid; place-items: center; flex: none; }
.lp-ico .lp-i { width: 16px; height: 16px; }
.lp-vis-foot { margin: 0; padding: 12px 18px; background: var(--ag-surface-inset); border-top: var(--lp-hair); font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); }

.lp-checks { list-style: none; margin: 0; padding: 6px 18px; display: grid; }
.lp-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: var(--lp-hair); font-size: var(--lp-ui-md); }
.lp-checks li:last-child { border-bottom: 0; }
.lp-checks i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.lp-checks i .lp-i { width: 13px; height: 13px; stroke-width: 2.5; }
.lp-checks .ok i { background: color-mix(in srgb, var(--ag-positive) 16%, transparent); color: var(--ag-positive-label); }
.lp-checks .warn i { background: color-mix(in srgb, var(--ag-warning) 16%, transparent); color: var(--ag-warning-label); }
.lp-checks .bad i { background: color-mix(in srgb, var(--ag-danger) 14%, transparent); color: var(--ag-danger-label); }
.lp-checks b { font-weight: 600; }
.lp-checks span { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); text-align: right; }
.lp-scan-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; background: var(--ag-surface-inset); border-top: var(--lp-hair); }
.lp-scan-out small { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-scan-out > div > b { display: block; font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 4px; }
.lp-scan-out p { margin: 0; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); line-height: 1.4; }
.lp-ring { position: relative; width: 88px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lp-ring .t { fill: none; stroke: var(--ag-line); stroke-width: 3.2; }
.lp-ring .v { fill: none; stroke: var(--ag-signal); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.lp-ring b { font-size: 28px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.lp-ring small { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.js-reveal .lp-ring .v { stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--ag-ease-enter) .2s; }
.js-reveal .is-on .lp-ring .v { stroke-dasharray: var(--p) 100; }

.lp-proofs { list-style: none; margin: 0; padding: 6px 18px; }
.lp-proofs li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: var(--lp-hair); }
.lp-proofs li:last-child { border-bottom: 0; }
.lp-proofs i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: var(--lp-ui-sm); }
.lp-proofs i .lp-i { width: 14px; height: 14px; stroke-width: 2.5; }
.lp-proofs i.ok { background: color-mix(in srgb, var(--ag-positive) 16%, transparent); color: var(--ag-positive-label); }
.lp-proofs i.q { background: color-mix(in srgb, var(--ag-warning) 18%, transparent); color: var(--ag-warning-label); }
.lp-proofs b { display: block; font-size: var(--lp-ui-md); }
.lp-proofs small { display: block; color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); margin-top: 2px; line-height: 1.4; }
.lp-proofs li > span { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-proofs .unsupported { background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--ag-warning) 7%, transparent) 9px 18px); margin-inline: -18px; padding-inline: 18px; }

.lp-fixes { list-style: none; margin: 0; padding: 6px 18px; }
.lp-fixes li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: var(--lp-hair); }
.lp-fixes li:last-child { border-bottom: 0; }
.lp-fixes i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ag-line-strong); display: grid; place-items: center; font-style: normal; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
.lp-fixes .done i { background: var(--ag-positive); border-color: transparent; color: var(--ag-positive-contrast); }
.lp-fixes .done i .lp-i { width: 14px; height: 14px; stroke-width: 2.8; }
.lp-fixes b { display: block; font-size: var(--lp-ui-md); }
.lp-fixes small { display: block; color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); margin-top: 2px; line-height: 1.4; }
.lp-fixes .lp-state { color: var(--ag-positive-label); background: transparent; padding: 0; }
.lp-diff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 18px; background: var(--ag-surface-inset); border-top: var(--lp-hair); font-size: var(--lp-ui-md); }
.lp-diff small { display: block; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); margin-bottom: 2px; }
.lp-diff em { font-style: normal; color: var(--ag-ink-faint); text-decoration: line-through; }
.lp-diff .lp-i { color: var(--ag-ink-faint); }

.lp-ends { list-style: none; margin: 0; padding: 6px 18px; }
.lp-ends li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: var(--lp-hair); }
.lp-ends li:last-child { border-bottom: 0; }
.lp-ends b { display: block; font-size: var(--lp-ui-md); }
.lp-ends code { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); overflow-wrap: anywhere; }
.lp-ok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lp-ui-xs); font-weight: 800; color: var(--ag-positive-label); }
.lp-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-positive); }
.lp-reg { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--ag-surface-inset); border-top: var(--lp-hair); flex-wrap: wrap; }
.lp-reg p { margin: 0 0 0 8px; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); flex: 1 1 14ch; }

.lp-watch-fig { display: flex; align-items: baseline; gap: 12px 16px; flex-wrap: wrap; padding: 22px 18px 8px; }
.lp-watch-fig b { font-size: clamp(60px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.06em; line-height: .88; }
.lp-watch-fig span { color: var(--ag-ink-muted); font-size: var(--lp-ui-md); flex: 1 1 13ch; }
.lp-watch-fig .up { font-style: normal; font-weight: 800; color: var(--ag-positive-label); background: color-mix(in srgb, var(--ag-positive) 14%, transparent); border-radius: var(--ag-radius-pill); padding: 3px 11px; font-size: var(--lp-ui-sm); }
.lp-ledger { display: grid; gap: 11px; padding: 14px 18px 20px; }
.lp-ledger div { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--lp-ui-md); }
.lp-ledger span { color: var(--ag-ink-muted); }
.lp-ledger i { display: block; height: 12px; border-radius: var(--ag-radius-pill); background: var(--ag-line); position: relative; overflow: hidden; }
.lp-ledger i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ag-signal); border-radius: var(--ag-radius-pill); transform-origin: left; }
.lp-ledger b { font-variant-numeric: tabular-nums; text-align: right; min-width: 3.4em; }
.js-reveal .lp-ledger i::after { transform: scaleX(0); transition: transform 1s var(--ag-ease-enter) .2s; }
.js-reveal .is-on .lp-ledger i::after { transform: scaleX(1); }

/* ══ 05 · THE PLATFORM TOUR ═════════════════════════════════════════════════
   Five tabs, each a question, each a screen. With no script all five panes simply stack in
   order; the script adds .is-tabbed and they become tabs. */
.lp-tour-ui { display: grid; gap: var(--ag-space-5); }
.lp-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lp-tour-ui:not(.is-tabbed) .lp-tabs { display: none; }
.lp-tabs button { font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; row-gap: 3px; align-items: start; padding: 14px 16px; border-radius: var(--ag-radius-md); border: var(--lp-hair); background: var(--ag-surface); color: var(--ag-ink-muted); transition: background .22s var(--ag-ease-standard), border-color .22s, transform .22s var(--ag-ease-standard); }
.lp-tabs button:hover { border-color: var(--ag-line-strong); transform: translateY(-1px); }
.lp-tab-n { grid-row: 1 / 3; font-family: var(--ag-font-mono); font-size: var(--lp-ui); color: var(--ag-ink-faint); padding-top: 2px; }
.lp-tabs b { font-size: var(--lp-ui-md); line-height: 1.25; color: var(--ag-ink); letter-spacing: -.01em; font-weight: 700; }
.lp-tabs small { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-tabs button[aria-selected="true"] { background: var(--ag-chip-on); border-color: var(--ag-chip-on); transform: none; }
.lp-tabs button[aria-selected="true"] b { color: var(--ag-chip-on-ink); }
.lp-tabs button[aria-selected="true"] .lp-tab-n, .lp-tabs button[aria-selected="true"] small { color: color-mix(in srgb, var(--ag-chip-on-ink) 68%, transparent); }
.lp-tabs button:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: 2px; }

.lp-tpane { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(20px, 3.6vw, 60px); align-items: start; padding-top: var(--ag-space-5); }
.lp-tour-ui:not(.is-tabbed) .lp-tpane { border-top: var(--lp-hair); padding-block: var(--ag-space-7); }
.lp-tour-ui.is-tabbed .lp-tpane:not(.is-on) { display: none; }
.lp-tour-ui.is-tabbed .lp-tpane.is-on { animation: lp-in .45s var(--ag-ease-enter); }
@keyframes lp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lp-tcopy { display: grid; gap: var(--ag-space-4); align-content: start; min-width: 0; padding-top: var(--ag-space-2); }
.lp-tier { justify-self: start; font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); font-weight: 700; color: var(--ag-signal-ink); background: var(--ag-signal-ink-soft); border-radius: var(--ag-radius-pill); padding: 4px 13px; }
.lp-tcopy h3 { margin: 0; font-size: clamp(27px, 2.7vw, 40px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; }
.lp-tcopy p { margin: 0; color: var(--ag-ink-muted); font-size: var(--ag-type-body); line-height: 1.5; }
.lp-verbs { list-style: none; margin: var(--ag-space-2) 0 0; padding: 0; display: grid; gap: 11px; }
.lp-verbs li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--ag-type-body); line-height: 1.4; }
.lp-verbs .lp-i { color: var(--ag-signal-ink); margin-top: 3px; width: 19px; height: 19px; }
.lp-tour-note { margin: var(--ag-space-5) 0 0; font-size: var(--lp-ui); color: var(--ag-ink-faint); text-align: center; }
.lp-tour-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ── A window, drawn: the product's chrome, thin ────────────────────────── */
.lp-win { background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-3); overflow: hidden; min-width: 0; }
.lp-win-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--ag-surface-inset); border-bottom: var(--lp-hair); font-size: var(--lp-ui-sm); }
.lp-win-tile { width: 24px; height: 24px; border-radius: 7px; background: var(--ag-ink); color: var(--ag-canvas); display: grid; place-items: center; font-weight: 800; font-size: var(--lp-ui-xs); flex: none; }
.lp-win-bar b { white-space: nowrap; }
.lp-win-path { color: var(--ag-ink-faint); font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lp-win-path i { font-style: normal; margin: 0 4px; }
.lp-sample { margin-left: auto; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); border: 1px dashed var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 2px 9px; flex: none; }
.lp-win-body { padding: 16px; display: grid; gap: 14px; align-content: start; background: var(--ag-surface-inset); }
.lp-win-body > div { background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 16px; min-width: 0; }
.lp-cap { display: block; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.lp-win-body small { font-size: var(--lp-ui-xs); }

/* ── Presence ───────────────────────────────────────────────────────────── */
.lp-s-pres { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.lp-bignum { display: flex; align-items: flex-start; gap: 4px; margin: 8px 0 12px; }
.lp-bignum b { font-size: clamp(66px, 7.4vw, 108px); font-weight: 800; letter-spacing: -.065em; line-height: .84; }
.lp-bignum sup { font-size: clamp(22px, 2.3vw, 34px); font-weight: 800; margin-top: 6px; }
.lp-delta { margin-left: 10px; align-self: center; font-size: var(--lp-ui-sm); font-weight: 800; color: var(--ag-positive-label); background: color-mix(in srgb, var(--ag-positive) 14%, transparent); border-radius: var(--ag-radius-pill); padding: 3px 11px; white-space: nowrap; }
.lp-rangebar { position: relative; height: 6px; background: var(--ag-line); border-radius: var(--ag-radius-pill); margin-top: 12px; }
.lp-rangebar .band { position: absolute; top: -3px; height: 12px; border-radius: var(--ag-radius-pill); background: var(--ag-signal-ink-soft); border: 1px solid var(--ag-signal); }
.lp-rangebar .dot { position: absolute; top: -6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--ag-signal); border: 3px solid var(--ag-surface-raised); box-shadow: var(--ag-shadow-1); }
.lp-rangescale { display: flex; justify-content: space-between; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); margin-top: 8px; }
.lp-s-fine { margin: 12px 0 14px; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); line-height: 1.45; }
.lp-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-minis > div { display: flex; align-items: center; gap: 8px; border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 8px; background: var(--ag-surface); }
.lp-minis span { display: grid; font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); line-height: 1.2; }
.lp-minis b { font-size: var(--lp-ui-md); color: var(--ag-ink); }
.lp-ringsm { width: 34px; height: 34px; transform: rotate(-90deg); flex: none; }
.lp-ringsm .t { fill: none; stroke: var(--ag-line); stroke-width: 4; }
.lp-ringsm .v { fill: none; stroke: var(--ag-signal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.lp-ringsm--warn .v { stroke: var(--ag-warning); }
.lp-ringsm--cat .v { stroke: var(--ag-cat-2); }
/* The assistant's answer is the one dark card on a light page: the ink as the ground and the canvas
   as the type, with a tint of the signal so it is blue-black rather than grey. In the dark theme the
   pair inverts, which is how every inverted object on this page (the toast, the selected tab) behaves. */
.lp-win-body > .lp-s-said { --on: var(--ag-canvas); background: color-mix(in srgb, var(--ag-signal-ink) 24%, var(--ag-ink)); color: var(--on); border-color: transparent; display: grid; gap: 10px; align-content: start; }
.lp-s-said .lp-cap { color: color-mix(in srgb, var(--on) 62%, transparent); }
.lp-s-q { margin: 0; font-size: var(--lp-ui-md); font-weight: 700; color: var(--on); line-height: 1.3; }
.lp-s-bubble { background: color-mix(in srgb, var(--on) 9%, transparent); border: 1px solid color-mix(in srgb, var(--on) 16%, transparent); border-radius: 12px; padding: 12px; display: grid; gap: 8px; font-size: var(--lp-ui-sm); }
.lp-s-bubble header { display: flex; align-items: center; gap: 8px; }
.lp-s-bubble header em { margin-left: auto; font-style: normal; font-size: var(--lp-ui-xs); background: color-mix(in srgb, var(--on) 16%, transparent); padding: 2px 9px; border-radius: var(--ag-radius-pill); color: var(--on); }
.lp-s-bubble p { margin: 0; color: color-mix(in srgb, var(--on) 84%, transparent); }
.lp-s-bubble ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: color-mix(in srgb, var(--on) 84%, transparent); }
.lp-s-bubble li b { color: var(--on); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--on) 40%, transparent); }
.lp-s-read { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: color-mix(in srgb, var(--on) 62%, transparent); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lp-s-read code { background: color-mix(in srgb, var(--on) 12%, transparent); border-radius: 6px; padding: 2px 7px; }
.lp-s-btns { display: flex; gap: 8px; justify-content: flex-end; }
.lp-s-btns span { font-size: var(--lp-ui-xs); font-weight: 700; border: 1px solid color-mix(in srgb, var(--on) 32%, transparent); border-radius: var(--ag-radius-sm); padding: 6px 11px; color: var(--on); }
.lp-s-btns .is-pri { background: var(--on); color: var(--ag-ink); border-color: transparent; }
.lp-s-assist { grid-column: 1 / -1; }
.lp-s-assist ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lp-s-assist li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 10px; background: var(--ag-surface); }
.lp-s-assist li .lp-tile { grid-row: 1 / 3; }
.lp-s-assist li b { font-size: var(--lp-ui-sm); }
.lp-s-assist li em { font-style: normal; font-size: var(--ag-type-card); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lp-spark { grid-column: 1 / -1; width: 100%; height: 22px; margin-top: 6px; fill: none; stroke: var(--ag-signal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lp-spark path { vector-effect: non-scaling-stroke; }
.lp-s-wrong { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.lp-win-body > .lp-s-wrong { background: color-mix(in srgb, var(--ag-warning) 11%, var(--ag-surface-raised)); border-color: color-mix(in srgb, var(--ag-warning) 32%, transparent); padding: 12px 14px; }
.lp-s-wrong > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--ag-warning) 20%, transparent); color: var(--ag-warning-label); }
.lp-s-wrong > div b { display: block; font-size: var(--lp-ui-md); }
.lp-s-wrong > div span { font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); }
.lp-s-wrong del { color: var(--ag-danger-label); }
.lp-s-wrong ins { text-decoration: none; font-weight: 800; color: var(--ag-positive-label); }

/* ── Interact ───────────────────────────────────────────────────────────── */
.lp-s-int { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
.lp-win-body > .lp-s-thread { display: grid; gap: 10px; align-content: start; }
.lp-s-thread header { display: flex; align-items: center; gap: 8px; }
.lp-s-thread header small { color: var(--ag-ink-faint); margin-left: auto; }
.lp-s-thread .lp-msg { font-size: var(--lp-ui-sm); }
.lp-s-thread .lp-msg--ai { display: block; background: var(--ag-surface); border: var(--lp-hair); border-radius: 4px 16px 16px 16px; padding: 10px 12px; }
.lp-s-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; background: color-mix(in srgb, var(--ag-positive) 11%, transparent); border: 1px solid color-mix(in srgb, var(--ag-positive) 30%, transparent); border-radius: var(--ag-radius-md); padding: 10px 12px; font-size: var(--lp-ui-sm); }
.lp-s-card i { width: 26px; height: 26px; border-radius: 50%; background: var(--ag-positive); color: var(--ag-positive-contrast); display: grid; place-items: center; }
.lp-s-card i .lp-i { width: 14px; height: 14px; stroke-width: 2.8; }
.lp-s-card b { display: block; }
.lp-s-card span { color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); }
.lp-s-card em { grid-column: 1 / -1; font-style: normal; font-size: var(--lp-ui-xs); font-weight: 800; color: var(--ag-positive-label); }
.lp-win-body > .lp-s-inbox { display: grid; gap: 12px; align-content: start; }
.lp-s-inbox header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-minitabs { display: flex; gap: 4px; }
.lp-minitabs i { font-style: normal; font-size: var(--lp-ui-xs); font-weight: 700; border-radius: var(--ag-radius-pill); padding: 4px 10px; color: var(--ag-ink-muted); background: var(--ag-surface-inset); }
.lp-minitabs i.on { background: var(--ag-chip-on); color: var(--ag-chip-on-ink); }
.lp-s-inbox ul { list-style: none; margin: 0; padding: 0; display: grid; border: var(--lp-hair); border-radius: var(--ag-radius-md); overflow: hidden; background: var(--ag-surface); }
.lp-s-inbox li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: var(--lp-hair); }
.lp-s-inbox li:first-child { border-top: 0; }
.lp-s-inbox li.needs { background: color-mix(in srgb, var(--ag-warning) 10%, transparent); }
.lp-av { width: 28px; height: 28px; border-radius: 50%; background: var(--ag-cat-1); color: var(--ag-info-contrast); display: grid; place-items: center; font-weight: 800; font-size: var(--lp-ui-xs); font-style: normal; flex: none; }
.lp-av--b { background: var(--ag-cat-3); } .lp-av--c { background: var(--ag-cat-4); } .lp-av--d { background: var(--ag-cat-2); }
.lp-s-inbox li > div b { display: block; font-size: var(--lp-ui-sm); }
.lp-s-inbox li > div span { color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); line-height: 1.35; display: block; }
.lp-src { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); white-space: nowrap; }
.lp-st { font-size: var(--lp-ui-xs); font-weight: 800; border-radius: var(--ag-radius-pill); padding: 3px 10px; white-space: nowrap; }
.lp-st.ok { background: color-mix(in srgb, var(--ag-positive) 14%, transparent); color: var(--ag-positive-label); }
.lp-st.warn { background: color-mix(in srgb, var(--ag-warning) 18%, transparent); color: var(--ag-warning-label); }
.lp-s-may { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lp-s-may small { color: var(--ag-ink-faint); margin-right: 4px; }
.lp-s-may span { font-size: var(--lp-ui-xs); border: 1px dashed var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 4px 11px; color: var(--ag-ink-faint); }
.lp-s-may span.on { background: var(--ag-signal-ink-soft); border: 1px solid transparent; color: var(--ag-signal-ink); font-weight: 700; }

/* ── Growth ─────────────────────────────────────────────────────────────── */
.lp-s-growth { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.lp-win-body > .lp-s-ledger { grid-row: 1 / 3; display: grid; gap: 10px; align-content: start; overflow-x: auto; }
.lp-s-ledger header { display: grid; gap: 2px; }
.lp-s-ledger header small { color: var(--ag-ink-faint); }
.lp-s-ledger table { width: 100%; border-collapse: collapse; font-size: var(--lp-ui-sm); font-variant-numeric: tabular-nums; min-width: 400px; }
.lp-s-ledger th { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); font-weight: 500; color: var(--ag-ink-faint); text-align: right; padding: 6px 6px; border-bottom: var(--lp-hair); }
.lp-s-ledger th:first-child { text-align: left; }
.lp-s-ledger td { padding: 8px 6px; text-align: right; border-bottom: var(--lp-hair); }
.lp-s-ledger tr:last-child td { border-bottom: 0; }
.lp-s-ledger td:first-child { text-align: left; font-weight: 700; white-space: nowrap; }
.lp-s-ledger td:first-child .lp-tile { margin-right: 8px; vertical-align: middle; }
.lp-s-ledger td.w { position: relative; min-width: 92px; }
.lp-s-ledger td.w i { position: absolute; top: 7px; bottom: 7px; right: 6px; width: var(--w); max-width: calc(100% - 6px); background: var(--ag-signal-ink-soft); border-radius: 4px; }
.lp-s-ledger td.w b { position: relative; font-weight: 800; }
.lp-win-body > .lp-s-escrow { display: grid; gap: 8px; align-content: start; }
.lp-s-escrow > b { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -.045em; line-height: 1; font-weight: 800; }
.lp-s-escrow p { margin: 0; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); }
.lp-s-escrow em { font-style: normal; font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); line-height: 1.4; }
.lp-s-escrow .lp-mini { justify-self: start; }
.lp-track { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lp-track li { font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); padding-top: 8px; border-top: 3px solid var(--ag-line); }
.lp-track li.done { border-top-color: var(--ag-positive); color: var(--ag-ink); }
.lp-track li.now { border-top-color: var(--ag-signal); color: var(--ag-ink); font-weight: 800; }
.lp-win-body > .lp-s-loop { display: grid; gap: 4px; align-content: start; }
.lp-s-loop ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.lp-s-loop li { border: var(--lp-hair); border-radius: var(--ag-radius-sm); padding: 8px; font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); background: var(--ag-surface); }
.lp-s-loop li b { display: block; color: var(--ag-ink); font-size: var(--lp-ui-sm); }

/* ── Steer ──────────────────────────────────────────────────────────────── */
.lp-s-steer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lp-win-body > .lp-s-cons, .lp-win-body > .lp-s-fc { display: grid; gap: 8px; align-content: start; }
.lp-s-cons header b { display: block; font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -.035em; font-weight: 800; margin-top: 2px; }
.lp-s-cons p { margin: 0; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); line-height: 1.45; }
.lp-s-fc header { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.lp-s-fc header span { display: flex; gap: 6px; align-items: center; font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
.lp-s-fc header i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 4px; }
.lp-s-fc header i.a { background: var(--ag-positive); } .lp-s-fc header i.b { background: var(--ag-signal); } .lp-s-fc header i.c { background: var(--ag-danger); }
.lp-chartsvg { width: 100%; height: auto; display: block; overflow: visible; }
.lp-chartsvg .grid path { stroke: var(--ag-line); stroke-width: 1; fill: none; }
.lp-chartsvg .bars rect { fill: var(--ag-cat-1); opacity: .88; rx: 3; }
.lp-chartsvg .bars .over { fill: var(--ag-danger); opacity: .92; }
.lp-chartsvg .cap path { stroke: var(--ag-ink); stroke-width: 2; stroke-dasharray: 4 3; fill: none; }
.lp-chartsvg .lbl text { font-size: 9px; fill: var(--ag-ink-faint); text-anchor: middle; font-family: var(--ag-font-mono); }
.lp-chartsvg .note { font-size: 9px; fill: var(--ag-danger-label); font-weight: 800; font-family: var(--ag-font-interface); }
.lp-chartsvg .fan { fill: var(--ag-signal-ink-soft); }
.lp-chartsvg .hi, .lp-chartsvg .mid, .lp-chartsvg .lo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-chartsvg .hi { stroke: var(--ag-positive); stroke-width: 1.6; }
.lp-chartsvg .mid { stroke: var(--ag-signal); stroke-width: 2.4; }
.lp-chartsvg .lo { stroke: var(--ag-danger); stroke-width: 1.6; }
.lp-chartsvg .floor { stroke: var(--ag-ink); stroke-width: 1.4; stroke-dasharray: 4 3; fill: none; }
.lp-why { color: var(--ag-ink-faint); line-height: 1.4; }
.lp-s-paths { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-s-paths li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 9px 10px; background: var(--ag-surface); }
.lp-s-paths i { width: 4px; height: 100%; min-height: 28px; border-radius: 2px; grid-row: 1 / 3; }
.lp-s-paths .a i { background: var(--ag-positive); } .lp-s-paths .b i { background: var(--ag-signal); } .lp-s-paths .c i { background: var(--ag-danger); }
.lp-s-paths b { font-size: var(--ag-type-card); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lp-s-paths span { font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
.lp-win-body > .lp-s-opts { grid-column: 1 / -1; display: grid; gap: 12px; }
.lp-s-opts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-s-opts li { border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 12px; background: var(--ag-surface); display: grid; gap: 4px; align-content: start; }
.lp-s-opts li b { font-size: var(--lp-ui-md); line-height: 1.25; }
.lp-s-opts li span { font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); line-height: 1.4; }
.lp-s-opts li.best { border-color: var(--ag-signal); background: var(--ag-signal-ink-soft); }
.lp-hold { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-holdbtn { position: relative; display: inline-flex; align-items: center; overflow: hidden; background: var(--ag-ink); color: var(--ag-canvas); font-weight: 800; border-radius: var(--ag-radius-md); padding: 11px 18px; font-size: var(--lp-ui-md); isolation: isolate; }
.lp-holdbtn i { position: absolute; inset: 0 auto 0 0; width: 38%; background: color-mix(in srgb, var(--ag-canvas) 24%, transparent); z-index: -1; }
.lp-hold small { color: var(--ag-ink-muted); font-size: var(--lp-ui-sm); }

/* ── Scale ──────────────────────────────────────────────────────────────── */
.lp-s-scale { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.lp-win-body > .lp-s-roll { display: grid; gap: 10px; align-content: start; overflow-x: auto; }
.lp-s-roll header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lp-s-roll header small { color: var(--ag-ink-faint); }
.lp-s-roll table { width: 100%; border-collapse: collapse; font-size: var(--lp-ui-sm); font-variant-numeric: tabular-nums; min-width: 300px; }
.lp-s-roll th { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); font-weight: 500; color: var(--ag-ink-faint); text-align: right; padding: 5px 6px; border-bottom: var(--lp-hair); }
.lp-s-roll th:first-child { text-align: left; }
.lp-s-roll td { padding: 7px 6px; text-align: right; border-bottom: var(--lp-hair); }
.lp-s-roll td:first-child { text-align: left; font-weight: 700; white-space: nowrap; }
.lp-s-roll .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; background: var(--ag-positive); }
.lp-s-roll .dot.bad { background: var(--ag-danger); }
.lp-s-roll tr.slip td { background: color-mix(in srgb, var(--ag-danger) 8%, transparent); }
.lp-s-roll td em { font-style: normal; color: var(--ag-danger-label); font-weight: 800; }
.lp-slip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border-radius: var(--ag-radius-md); background: color-mix(in srgb, var(--ag-danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ag-danger) 26%, transparent); font-size: var(--lp-ui-sm); }
.lp-slip .lp-i { color: var(--ag-danger-label); width: 17px; height: 17px; }
.lp-win-body > .lp-s-map { display: grid; gap: 10px; align-content: start; }
.lp-s-map .spokes path { stroke: var(--ag-line-strong); stroke-width: 1.2; fill: none; stroke-dasharray: 3 3; }
.lp-s-map .hub { fill: var(--ag-ink); }
.lp-s-map .hubt { fill: var(--ag-canvas); font-size: 9px; font-weight: 800; font-family: var(--ag-font-interface); }
.lp-s-map .n { stroke: var(--ag-surface-raised); stroke-width: 3; }
.lp-s-map .n.ok { fill: var(--ag-positive); } .lp-s-map .n.bad { fill: var(--ag-danger); }
.lp-seats { display: grid; gap: 8px; }
.lp-seats > span { display: flex; }
.lp-seats .lp-av { margin-left: -7px; border: 2px solid var(--ag-surface-raised); }
.lp-seats .lp-av:first-child { margin-left: 0; }
.lp-seats div { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-seats em { font-style: normal; font-size: var(--lp-ui-xs); border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 3px 10px; color: var(--ag-ink-muted); }

/* ══ 06 · TRUST ═════════════════════════════════════════════════════════════ */
.lp-trust-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(20px, 3.2vw, 44px); align-items: start; }
.lp-ledgercard { background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: var(--lp-r); box-shadow: var(--ag-shadow-2); overflow: hidden; position: sticky; top: calc(var(--ag-topbar-height) + var(--ag-space-5)); min-width: 0; }
.lp-ledgercard header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: var(--lp-hair); flex-wrap: wrap; }
.lp-ledgercard ul { list-style: none; margin: 0; padding: 0; }
.lp-ledgercard li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 14px 18px; border-bottom: var(--lp-hair); align-items: center; }
.lp-ledgercard li > div { display: flex; gap: 4px 12px; align-items: baseline; flex-wrap: wrap; }
.lp-ledgercard li b { font-size: var(--lp-ui-md); }
.lp-ledgercard li > div span { font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); color: var(--ag-ink); }
.lp-ledgercard li small { grid-column: 1; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-ledgercard li em { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.lp-ledger-foot { margin: 0; padding: 14px 18px; background: var(--ag-surface-inset); font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); line-height: 1.5; }
.lp-rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp-rail { background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--lp-r); padding: var(--ag-space-5); display: grid; gap: var(--ag-space-3); align-content: start; transition: border-color var(--ag-motion-fast), transform var(--ag-motion-fast); }
.lp-rail:hover { border-color: var(--ag-line-strong); transform: translateY(-2px); }
.lp-rail h3 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.lp-rail p { margin: 0; color: var(--ag-ink-muted); font-size: var(--ag-type-small); line-height: 1.5; }

/* ══ 07 · THREE WAYS IN ═════════════════════════════════════════════════════
   Three, side by side, and stated as THREE rather than as auto-fit: a minmax track folds to
   one column the moment the measure narrows. Below the tablet breakpoint they stack because a
   phone has one column, not because the measure moved. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ag-space-5); align-items: stretch; }
.lp-sectors { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 14px; }
.lp-sectors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-sectors li { font-size: var(--lp-ui-md); font-weight: 600; border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 7px 17px; color: var(--ag-ink); background: var(--ag-surface); }

/* ══ 08 · FOR BUILDERS ══════════════════════════════════════════════════════ */
.lp-build-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 84px); align-items: center; }
.lp-build-copy { min-width: 0; }
.lp-build-copy .lede { margin: var(--ag-space-5) 0 0; max-width: 46ch; }
.lp-build-pts { list-style: none; margin: var(--ag-space-5) 0 0; padding: 0; display: grid; gap: 14px; }
.lp-build-pts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: var(--ag-type-body); line-height: 1.45; color: var(--ag-ink-muted); }
.lp-build-pts b { color: var(--ag-ink); }
.lp-build-pts .lp-i { color: var(--ag-signal-ink); margin-top: 3px; width: 20px; height: 20px; }
/* The specification: square corners, an inset ground, a rule down the left edge and mono
   throughout, the same object as the "for builders" card above it. */
.lp-code { background: var(--ag-surface-inset); border: 1px solid var(--ag-line-strong); border-left: 3px solid var(--ag-cat-3); border-radius: var(--ag-radius-xs) var(--ag-radius-md) var(--ag-radius-md) var(--ag-radius-xs); overflow: hidden; box-shadow: var(--ag-shadow-2); min-width: 0; }
.lp-code-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 8px 12px 0; border-bottom: var(--lp-hair); flex-wrap: wrap; }
.lp-code-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.lp-code-tabs button { font: inherit; font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); font-weight: 600; border: 0; background: transparent; color: var(--ag-ink-faint); padding: 9px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lp-code-tabs button:hover { color: var(--ag-ink); }
.lp-code-tabs button[aria-selected="true"] { color: var(--ag-ink); border-bottom-color: var(--ag-signal); }
.lp-code-tabs button:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: -2px; }
.lp-copy { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--lp-ui-xs); font-weight: 700; border: var(--lp-hair); background: var(--ag-surface); color: var(--ag-ink); border-radius: var(--ag-radius-sm); padding: 5px 10px; margin-bottom: 7px; cursor: pointer; }
.lp-copy:hover { border-color: var(--ag-line-strong); }
.lp-copy .lp-i { width: 13px; height: 13px; }
.lp-code.is-tabbed .lp-code-pane:not(.is-on) { display: none; }
.lp-code pre { margin: 0; padding: 18px; font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); line-height: 1.65; overflow: auto; color: var(--ag-ink); min-height: 22.5rem; white-space: pre; }
.lp-code-foot { margin: 0; padding: 10px 18px; border-top: var(--lp-hair); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); font-family: var(--ag-font-mono); }
.lp-toolmap { margin-top: clamp(32px, 4.5vw, 64px); display: grid; grid-template-columns: 2.1fr 1.1fr 1fr 1fr; gap: var(--ag-space-4) clamp(16px, 2vw, 32px); padding: var(--ag-space-5); border: 1px dashed var(--ag-line-strong); border-radius: var(--lp-r); }
.lp-toolmap ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-toolmap li code { display: inline-block; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--ag-radius-sm); padding: 4px 9px; color: var(--ag-ink); }
.lp-toolmap li.w code { border-color: var(--ag-signal); color: var(--ag-signal-ink); background: var(--ag-signal-ink-soft); }
.lp-toolkey { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
.lp-toolkey i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--ag-signal); background: var(--ag-signal-ink-soft); }
.lp-layers { margin-top: var(--ag-space-6); }
.lp-layers > p a { text-decoration: underline; text-underline-offset: 3px; color: var(--ag-ink); }
.lp-layers ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lp-layers li { position: relative; padding: 14px 13px; border: var(--lp-hair); background: var(--ag-surface); font-weight: 800; font-size: var(--ag-type-small); display: grid; gap: 4px; margin-left: -1px; align-content: start; letter-spacing: -.01em; }
.lp-layers li:first-child { border-radius: var(--ag-radius-md) 0 0 var(--ag-radius-md); margin-left: 0; }
.lp-layers li:last-child { border-radius: 0 var(--ag-radius-md) var(--ag-radius-md) 0; }
.lp-layers li b { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-signal-ink); font-weight: 600; }
.lp-layers li small { font-weight: 400; color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); line-height: 1.35; letter-spacing: 0; }

/* ══ 09 · PRICING ═══════════════════════════════════════════════════════════ */
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); align-items: stretch; padding-top: 12px; }
.lp-plan { position: relative; background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--lp-r); padding: var(--ag-space-5); display: flex; flex-direction: column; gap: var(--ag-space-2); transition: border-color var(--ag-motion-fast), transform var(--ag-motion-fast); min-width: 0; }
.lp-plan:hover { border-color: var(--ag-line-strong); transform: translateY(-3px); }
.lp-plan--feat { background: linear-gradient(180deg, var(--ag-signal-ink-soft), transparent 55%), var(--ag-surface-raised); border-color: var(--ag-signal); box-shadow: var(--ag-shadow-3); }
.lp-plan-badge { position: absolute; top: -13px; left: var(--ag-space-5); background: var(--ag-signal); color: var(--ag-signal-contrast); font-size: var(--lp-ui-xs); font-weight: 800; border-radius: var(--ag-radius-pill); padding: 4px 13px; }
.lp-plan-n { font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-plan h3 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; font-weight: 800; }
.lp-plan-q { margin: 0; font-family: var(--serif); font-size: clamp(23px, 2.2vw, 30px); line-height: 1.08; letter-spacing: -.03em; min-height: 2.16em; }
.lp-plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: var(--ag-space-3); }
.lp-plan-price b { font-size: clamp(42px, 4.2vw, 58px); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.lp-plan-price s { color: var(--ag-ink-faint); font-size: var(--ag-type-body-lg); }
.lp-plan-price small { color: var(--ag-ink-muted); font-size: var(--ag-type-body); }
.lp-plan-day { margin: 0; font-size: var(--lp-ui); color: var(--ag-ink-faint); }
.lp-plan-blurb { margin: var(--ag-space-3) 0 var(--ag-space-4); font-size: var(--ag-type-small); color: var(--ag-ink-muted); line-height: 1.5; min-height: 4.6em; }
.lp-plan-in { margin: 0; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.lp-plan ul { list-style: none; margin: var(--ag-space-2) 0 var(--ag-space-5); padding: 0; display: grid; gap: 8px; }
.lp-plan li { display: grid; grid-template-columns: 1.15em minmax(0, 1fr); font-size: var(--ag-type-small); line-height: 1.35; }
.lp-plan li::before { content: "+"; color: var(--ag-signal-ink); font-weight: 800; }
.lp-plan .btn { margin-top: auto; }
.lp-price-foot { margin: var(--ag-space-5) 0 0; color: var(--ag-ink-muted); font-size: var(--ag-type-small); }
.lp-price-foot a { color: var(--ag-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ══ 10 · THE QUESTIONS ═════════════════════════════════════════════════════ */
.lp-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.lp-faq-head { position: sticky; top: calc(var(--ag-topbar-height) + var(--ag-space-6)); min-width: 0; }
.lp-faq-head .lede { margin: var(--ag-space-5) 0 0; }
.lp-faq-head .hero-cta { margin-top: var(--ag-space-5); }
.lp-faqsec .faq { margin-top: 0; }
/* The recipe indents an answer by 3.4em of the ANSWER's size and the title by 3.4em of the
   TITLE's, which are different sizes: the answer started eight pixels left of the question. */
.lp-faqsec .faq .a { padding-left: calc(3.4 * var(--ag-type-body-lg) + var(--ag-space-4)); }

/* ══ 11 · THE CLOSE ═════════════════════════════════════════════════════════ */
.lp-close { text-align: left; padding-block: clamp(72px, 10vw, 150px); position: relative; overflow: clip; }
.lp-close::before { content: ""; position: absolute; right: -12vw; top: 50%; width: min(70vw, 900px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--ag-signal) 15%, transparent), transparent); }
.lp-close .wrap { position: relative; }
.closing .display { font-size: clamp(46px, 8.4vw, 128px); line-height: .92; }
.closing .display .said, .closing .display .meant { text-wrap: balance; }
.lp-close .lede { margin: var(--ag-space-5) 0 0; }
.lp-check { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--ag-space-6); align-items: center; }
.lp-check-field { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; max-width: 540px; min-height: var(--ag-control-h-lg); background: var(--ag-surface-raised); border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-lg); padding: 0 18px; color: var(--ag-ink-faint); transition: border-color var(--ag-motion-fast), box-shadow var(--ag-motion-fast); }
.lp-check-field:focus-within { border-color: var(--ag-focus); box-shadow: 0 0 0 3px var(--ag-signal-ink-soft); }
.lp-check-field .lp-i { width: 20px; height: 20px; }
.lp-check-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--ag-type-body-lg); color: var(--ag-ink); outline: none; height: 100%; padding: 0; }
.lp-close .hero-note { margin-top: var(--ag-space-3); }
.lp-close-alt { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--ag-space-6); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lp-foot { padding-top: var(--ag-space-8); }
.lp-foot-grid { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); gap: var(--ag-space-6) var(--ag-space-5); }
.lp-foot-brand p { margin: var(--ag-space-2) 0 0; }
.lp-foot-fine { font-size: var(--lp-ui); }
.lp-foot-col { display: grid; gap: 10px; align-content: start; }
.lp-foot-col h4 { margin: 0 0 6px; font-family: var(--ag-font-mono); font-size: var(--lp-ui); font-weight: 500; color: var(--ag-ink-faint); }
.lp-foot-col a { color: var(--ag-ink-muted); font-size: var(--ag-type-small); }
.lp-foot-col a:hover { color: var(--ag-ink); }
.lp-linkbtn { margin-top: var(--ag-space-4); display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--lp-ui); font-weight: 700; color: var(--ag-ink); background: transparent; border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 8px 15px; cursor: pointer; }
.lp-linkbtn:hover { border-color: var(--ag-ink-faint); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.lp-modal { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--ag-ink) 62%, transparent); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; overflow: auto; }
.lp-modal[hidden] { display: none; }
.lp-modal-card { position: relative; max-width: 480px; width: 100%; padding: var(--ag-space-6); gap: var(--ag-space-3); }
.lp-modal--wide .lp-modal-card { max-width: 900px; }
.lp-modal-card h3 { margin: 0; font-size: var(--ag-type-section); letter-spacing: -.025em; }
.lp-modal-card > p { margin: 0 0 var(--ag-space-3); color: var(--ag-ink-muted); font-size: var(--ag-type-small); }
.lp-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--ag-ink-muted); font-size: 28px; cursor: pointer; line-height: 1; width: 40px; height: 40px; }
.lp-form { display: grid; gap: 12px; }
.lp-form label { display: grid; gap: 6px; font-size: var(--lp-ui); font-weight: 700; color: var(--ag-ink-muted); }
.lp-form em { font-weight: 400; font-style: normal; color: var(--ag-ink-faint); }
.lp-form input, .lp-form textarea { background: var(--ag-field-ground); border: 1px solid var(--ag-field-edge); border-radius: var(--ag-radius-sm); padding: 12px 14px; color: var(--ag-ink); font: inherit; font-size: var(--ag-type-body); outline: none; width: 100%; resize: vertical; }
.lp-form input:focus, .lp-form textarea:focus { border-color: var(--ag-focus); box-shadow: 0 0 0 3px var(--ag-signal-ink-soft); }
.lp-form-err { color: var(--ag-danger-label); font-size: var(--lp-ui); }
.lp-form-done { text-align: center; display: grid; justify-items: center; gap: 8px; padding: var(--ag-space-4) 0; }
.lp-form-done h3 { margin: 4px 0 0; }
.lp-machine .lp-code-tabs { margin-top: var(--ag-space-2); border-bottom: var(--lp-hair); }
.lp-mach-pane { display: none; margin: 0; background: var(--ag-surface-inset); border-radius: var(--ag-radius-md); padding: 16px 18px; font-family: var(--ag-font-mono); font-size: var(--lp-ui-sm); line-height: 1.6; max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ag-ink); }
.lp-mach-pane.is-on { display: block; }

/* ══ NARROW ═════════════════════════════════════════════════════════════════
   The bar collapses on its own container query (marketing.css); these are the page's. */
/* A laptop is wide and short. The exchange is three cards tall, so on a short screen it gives up
   some of its air rather than its owner notification, which is the end of the story. */
@media (min-width: 1001px) and (max-height: 840px) {
  .lp-ex { gap: 10px; }
  .lp-chat-top { padding: 10px 16px; }
  .lp-chat-body { padding: 14px 16px; gap: 10px; min-height: 14.5rem; }
  .lp-say { gap: 7px; }
  .lp-calls { padding: 10px 14px 4px; }
  .lp-calls li { padding: 5px 0; }
  .lp-owner { padding: 9px 14px; }
  .lp-chat-foot { padding: 9px 16px; }
}
@media (max-width: 1100px) {
  .lp-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .lp-tabs button { scroll-snap-align: start; }
  .lp-tpane { grid-template-columns: minmax(0, 1fr); }
  .lp-toolmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-layers ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .lp-layers li, .lp-layers li:first-child, .lp-layers li:last-child { border-radius: var(--ag-radius-md); margin-left: 0; }
  .lp-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--ag-space-6) var(--ag-space-7); gap: var(--ag-space-6); }
  .lp-hero .display { font-size: min(var(--ag-type-hero), 13vw); }
  .lp-ex { justify-self: stretch; max-width: 640px; margin-inline: auto; }
  .lp-versus { grid-template-columns: minmax(0, 1fr); }
  .lp-vs-mid { display: none; }
  .lp-serp li:nth-child(n+9) { display: none; }
  .lp-trio { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .lp-points { grid-template-columns: minmax(0, 1fr); }
  .lp-flow-step { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--ag-space-5); }
  .lp-flow-vis { position: static; }
  .lp-flow-copy { max-width: none; }
  .js-reveal .lp-flow-step:not(.is-on) .lp-flow-copy { opacity: 1; }
  .lp-trust-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-ledgercard { position: static; }
  .lp-build-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-faq-head { position: static; }
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stair-say { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .lp-s-pres, .lp-s-int, .lp-s-growth, .lp-s-steer, .lp-s-scale { grid-template-columns: minmax(0, 1fr); }
  .lp-win-body > .lp-s-ledger { grid-row: auto; }
}
/* Seven columns need about 130px each to keep "Represented" in one piece, so the stair stands
   up into a pyramid of bars below the desktop widths, not only on a phone. */
@media (max-width: 1000px) {
  .lp-steps7 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lp-rung { --h: auto; height: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 13px 16px; border-radius: var(--ag-radius-md); width: calc(46% + var(--i) * 9%); min-width: 188px; }
  .lp-rung .lp-i { order: 0; margin: 0; }
  .lp-rung .n { order: -2; }
  .lp-rung b { font-size: var(--ag-type-body); }
  .lp-rung[data-state="here"] { transform: translateX(6px); }
  .lp-rung[data-rung="2"]::after { display: none; }
  .lp-stair-brackets { display: none; }
}
@media (max-width: 760px) {
  .lp-s-assist ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-s-opts ul { grid-template-columns: minmax(0, 1fr); }
  .lp-minis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lp-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-plan-q, .lp-plan-blurb { min-height: 0; }
  .lp-code pre { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 0; }
  .lp-ticker-track li:nth-child(n+5) { display: none; }
  .js-reveal .lp-ticker-track li:nth-child(n+5) { display: block; }
  .lp-calls header { flex-wrap: wrap; }
  .lp-rails { grid-template-columns: minmax(0, 1fr); }
  .lp-toolmap { grid-template-columns: minmax(0, 1fr); }
  .lp-layers ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-assistants { align-items: flex-start; }
  .lp-calls { margin-left: 0; } .lp-owner { margin-right: 0; }
  .lp-calls li { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) 1.3em; }
  .lp-calls li em { display: none; }
  .lp-chat-trade { display: none; }
  .lp-chat-body { min-height: 0; }
  .lp-flow-copy h3 { font-size: clamp(28px, 8vw, 36px); }
  .lp-s-inbox li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lp-s-inbox li .lp-src { display: none; }
  .lp-diff { grid-template-columns: minmax(0, 1fr); }
  .lp-diff .lp-i { transform: rotate(90deg); }
  .lp-win-bar .lp-win-path { display: none; }
  .lp-scan-out { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .lp-slip { grid-template-columns: auto minmax(0, 1fr); } .lp-slip .lp-mini { grid-column: 1 / -1; justify-self: start; }
  .lp-s-wrong { grid-template-columns: auto minmax(0, 1fr); } .lp-s-wrong .lp-mini { grid-column: 1 / -1; justify-self: start; }
  .lp-ans-top .lp-seg { margin-left: 0; width: 100%; } .lp-seg button { flex: 1; padding-inline: 8px; }
  .lp-close-alt .btn, .lp-check .btn { width: 100%; }
  .lp-check-field { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-live, .lp-think i, .lp-caret { animation: none; }
  .lp-tour-ui.is-tabbed .lp-tpane.is-on { animation: none; }
  .lp-rung, .lp-tabs button, .lp-plan, .lp-rail, .lp-float, .lp-flow-copy { transition: none; }
}

/* ══ SMALL THINGS THE SCRIPT AND THE MARKUP SHARE ═══════════════════════════ */
[data-ag-surface="marketing"] [hidden] { display: none !important; }
.lp-msg--you.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -.14em; animation: lp-blink 1s steps(2) infinite; }
[data-ag-surface="marketing"] .nav-links > a[aria-current="true"]:not(.btn) { color: var(--ag-ink); background: var(--ag-surface-inset); }
.lp-hero .hero-cta .btn-ghost { background: color-mix(in srgb, var(--ag-surface-raised) 70%, transparent); }

/* ══ THE SAMPLE VALUES ══════════════════════════════════════════════════════
   Every figure in a drawn screen is sample data, and it lives here beside the shape it sizes, so the
   page's markup carries no inline style. A real screen would set these from its own record. */
.lp-steps7 > :nth-child(1) { --i: 0; } .lp-steps7 > :nth-child(2) { --i: 1; } .lp-steps7 > :nth-child(3) { --i: 2; } .lp-steps7 > :nth-child(4) { --i: 3; }
.lp-steps7 > :nth-child(5) { --i: 4; } .lp-steps7 > :nth-child(6) { --i: 5; } .lp-steps7 > :nth-child(7) { --i: 6; }
.lp-scan .lp-ring { --p: 41; }
.lp-ledger > :nth-child(1) { --w: 100%; } .lp-ledger > :nth-child(2) { --w: 41.5%; } .lp-ledger > :nth-child(3) { --w: 24%; } .lp-ledger > :nth-child(4) { --w: 21.7%; }
.lp-rangebar .band { left: 38%; width: 6%; }
.lp-rangebar .dot { left: 41%; }
.lp-minis > :nth-child(1) .lp-ringsm .v { --p: 41; } .lp-minis > :nth-child(2) .lp-ringsm .v { --p: 44; } .lp-minis > :nth-child(3) .lp-ringsm .v { --p: 19; }
.lp-s-ledger tbody tr:nth-child(1) td.w i { --w: 88%; } .lp-s-ledger tbody tr:nth-child(2) td.w i { --w: 45%; } .lp-s-ledger tbody tr:nth-child(3) td.w i { --w: 30%; }
.lp-s-ledger tbody tr:nth-child(4) td.w i { --w: 13%; } .lp-s-ledger tbody tr:nth-child(5) td.w i { --w: 100%; } .lp-s-ledger tbody tr:nth-child(6) td.w i { --w: 83%; }
.faq .a a { color: var(--ag-link-ink); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   ROUND TWO. A dark tone for the bands that should feel like a room with the lights down (the film, the
   product, the code, the close), nine more screens, six illustrations, a marker under the line that matters,
   and a little depth in the hero. Same rules as above: tokens only, no inline style.
   ══════════════════════════════════════════════════════════════════════════════ */

.lp-label { font-family: var(--ag-font-interface); font-weight: 700; font-size: var(--ag-type-caption); color: var(--ag-ink-muted); letter-spacing: 0; }

/* ── The night tone ──────────────────────────────────────────────────────────
   night.css (generated from the theme) re-declares the platform's dark colours on .lp-night, so everything inside
   a night band is drawn in the dark palette whichever theme the page is in. */
.lp-night { background: var(--ag-canvas); color: var(--ag-ink); position: relative; isolation: isolate; border-block: var(--lp-hair); overflow: clip; }
.lp-night::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 84% 0%, color-mix(in srgb, var(--ag-signal) 17%, transparent), transparent 70%),
    radial-gradient(50% 55% at 2% 100%, color-mix(in srgb, var(--ag-cat-4) 15%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ag-ink) 9%, transparent) 1px, transparent 1.4px) 0 0 / 26px 26px; }
.bn-body.lp-night { overflow: hidden; border-radius: var(--ag-radius-md); border: var(--lp-hair); }
.bn-body.lp-night::before { display: none; }
.lp-night .btn-ghost { background: color-mix(in srgb, var(--ag-surface-raised) 60%, transparent); }

/* ── The marker ──────────────────────────────────────────────────────────────
   One phrase in a headline is the one that matters, so it is underlined the way a person would, in the same
   yellow as the stop-sign pill on the stair, and it is drawn on as the headline arrives. */
.lp-hl { color: inherit; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ag-attention) 78%, transparent) 62% 94%, transparent 94%) no-repeat 0 0 / 0% 100%; padding: 0 .07em; margin: 0 -.07em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s var(--ag-ease-enter) .4s; }
.in .lp-hl, html:not(.js-reveal) .lp-hl { background-size: 100% 100%; }
.lp-night .lp-hl { background-image: linear-gradient(transparent 8%, var(--ag-attention) 8% 92%, transparent 92%); color: var(--ag-attention-contrast); }

/* ── Spotlight and depth ─────────────────────────────────────────────────────── */
.lp-spot { position: relative; }
.lp-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ag-ease-standard); background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--ag-signal) 13%, transparent), transparent 62%); }
@media (hover: hover) { .lp-spot:hover::before { opacity: 1; } }
.lp-hero::after { content: ""; position: absolute; right: -6%; top: -14%; width: 74%; height: 96%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 38% at 66% 30%, color-mix(in srgb, var(--ag-cat-1) 24%, transparent), transparent 70%),
    radial-gradient(32% 32% at 92% 66%, color-mix(in srgb, var(--ag-cat-4) 20%, transparent), transparent 70%),
    radial-gradient(28% 28% at 52% 90%, color-mix(in srgb, var(--ag-cat-2) 16%, transparent), transparent 70%); }
.js-reveal .lp-hero::after { animation: lp-drift 26s ease-in-out infinite alternate; }
@keyframes lp-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 4%, 0) scale(1.08); } }
.lp-hero-grid { z-index: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-ex { perspective: 1600px; }
  .lp-ex .lp-chat { transform: translate3d(calc(var(--tx, 0) * -7px), calc(var(--ty, 0) * -6px), 0) rotateY(calc(var(--tx, 0) * 2.4deg)) rotateX(calc(var(--ty, 0) * -2deg)); transition: transform .25s var(--ag-ease-standard); }
  .lp-ex .lp-calls { transform: translate3d(calc(var(--tx, 0) * 5px), calc(var(--ty, 0) * 4px), 0); transition: transform .25s var(--ag-ease-standard); }
  .lp-ex .lp-owner { transform: translate3d(calc(var(--tx, 0) * 11px), calc(var(--ty, 0) * 8px), 0); transition: transform .25s var(--ag-ease-standard); }
  .lp-ex.is-playing .lp-owner { transition: opacity .45s var(--ag-ease-enter), transform .45s var(--ag-ease-enter); }
}

/* ══ THE FILM ═══════════════════════════════════════════════════════════════ */
.lp-film { padding-block: clamp(72px, 9vw, 132px); }
.lp-film .lp-head { max-width: 1180px; margin-inline: auto; }
.lp-player { position: relative; aspect-ratio: 16 / 9; max-width: 1180px; margin-inline: auto; border-radius: var(--lp-r); overflow: hidden; background: var(--ag-surface-inset); box-shadow: 0 50px 110px -40px color-mix(in srgb, black 80%, transparent), 0 0 0 1px var(--ag-line); }
.lp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ag-surface-inset); }
.lp-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--ag-space-4); border: 0; cursor: pointer; color: var(--ag-ink); font: inherit; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, black 38%, transparent)); transition: opacity var(--ag-motion-slow) var(--ag-ease-standard); }
.lp-player.is-playing .lp-play { opacity: 0; pointer-events: none; }
.lp-play-disc { width: clamp(72px, 9vw, 108px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--ag-signal); color: var(--ag-signal-contrast); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ag-signal) 26%, transparent), var(--ag-shadow-3); transition: transform .3s var(--ag-ease-enter), box-shadow .3s; }
.lp-play-disc .lp-i { width: 38%; height: 38%; margin-left: 6%; fill: currentColor; stroke: currentColor; stroke-width: 1; }
.lp-play:hover .lp-play-disc, .lp-play:focus-visible .lp-play-disc { transform: scale(1.07); box-shadow: 0 0 0 16px color-mix(in srgb, var(--ag-signal) 30%, transparent), var(--ag-shadow-3); }
.lp-play:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: -6px; }
.lp-play-text { position: absolute; right: var(--ag-space-4); bottom: var(--ag-space-4); display: grid; gap: 1px; text-align: left; padding: 10px 18px 11px; border-radius: var(--ag-radius-md); background: color-mix(in srgb, black 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, white 14%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lp-play-text b { font-size: var(--lp-ui-md); font-weight: 800; letter-spacing: -.015em; }
.lp-play-text small { font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
/* the listening page for the film's sound (sound.html): a card for each option, its two players inside */
.lp-sound { padding-block: clamp(48px, 7vw, 96px); }
.lp-sound-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ag-space-5); }
.lp-sound-card { display: grid; align-content: start; gap: var(--ag-space-4); padding: var(--ag-space-5); border: var(--lp-hair); border-radius: var(--lp-r); background: var(--ag-surface); }
.lp-sound-card h2 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; }
.lp-sound-card p { margin: 0; color: var(--ag-ink-muted); line-height: var(--ag-leading-reading); }
.lp-sound-card p b { color: var(--ag-ink); }
.lp-sound-card small { display: block; margin-bottom: 6px; font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-sound-card audio { width: 100%; }
.lp-sound-card--now { background: var(--ag-surface-inset); }
.lp-sound-where { margin-top: var(--ag-space-6); max-width: 70ch; }
.lp-sound-where h2 { margin: 0 0 var(--ag-space-3); font-size: var(--ag-type-card); letter-spacing: -.02em; }
.lp-sound-where ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ag-space-2); color: var(--ag-ink-muted); }
.lp-sound-where b { display: inline-block; min-width: 3.2em; color: var(--ag-signal-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .lp-sound-list { grid-template-columns: minmax(0, 1fr); } }
/* the casting page (cast.html): the tracks to hear, and each story's clips */
.lp-cast-h { margin: var(--ag-space-6) 0 var(--ag-space-3); font-size: var(--ag-type-card); letter-spacing: -.02em; }
.lp-cast-note { margin: 0 0 var(--ag-space-4); max-width: 70ch; color: var(--ag-ink-muted); line-height: var(--ag-leading-reading); }
.lp-cast-tracks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ag-space-4); }
.lp-cast-track { display: grid; gap: var(--ag-space-3); padding: var(--ag-space-4); border: var(--lp-hair); border-radius: var(--lp-r); background: var(--ag-surface); }
.lp-cast-track h3 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; }
.lp-cast-track p { margin: 2px 0 0; color: var(--ag-ink-muted); font-size: var(--lp-ui-sm); }
.lp-cast-track audio { width: 100%; }
.lp-cast-wave { display: flex; align-items: flex-end; gap: 1px; height: 44px; }
.lp-cast-wave i { flex: 1 1 0; min-width: 1px; height: calc(var(--h) * 1%); background: var(--ag-signal); border-radius: 1px 1px 0 0; }
.lp-cast-wavetime { display: flex; justify-content: space-between; margin-top: -4px; font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); font-variant-numeric: tabular-nums; }
.lp-cast-trackline { margin: 0; color: var(--ag-ink-muted); line-height: var(--ag-leading-reading); font-size: var(--lp-ui-sm); }
.lp-cast-story { margin-top: var(--ag-space-6); padding-top: var(--ag-space-5); border-top: var(--lp-hair); }
.lp-cast-story h2 { margin: 0 0 6px; font-size: var(--ag-type-headline, 28px); letter-spacing: -.03em; }
.lp-cast-story h2 small { margin-left: 10px; font-size: var(--lp-ui-md); color: var(--ag-signal-ink); font-weight: 700; }
.lp-cast-story header p { margin: 0 0 var(--ag-space-3); max-width: 70ch; color: var(--ag-ink-muted); line-height: var(--ag-leading-reading); }
.lp-cast-lines { list-style: none; margin: 0 0 var(--ag-space-4); padding: 0; display: grid; gap: 4px; font-size: var(--lp-ui-md); }
.lp-cast-lines b { display: inline-block; min-width: 5.2em; color: var(--ag-ink-faint); font-weight: 700; }
.lp-cast-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--ag-space-3); }
.lp-cast-shot { margin: 0; display: grid; gap: 8px; align-content: start; }
.lp-cast-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ag-radius-md); overflow: hidden; background: var(--ag-surface-inset); cursor: pointer; }
.lp-cast-frame img, .lp-cast-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-cast-frame video { opacity: 0; transition: opacity var(--ag-motion-fast); }
.lp-cast-frame.is-on video { opacity: 1; }
.lp-cast-shot figcaption { display: grid; gap: 2px; font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-cast-shot figcaption b { font-size: var(--lp-ui-sm); color: var(--ag-ink); }
.lp-cast-shot figcaption a { color: var(--ag-signal-ink); }
@media (max-width: 760px) { .lp-cast-tracks { grid-template-columns: minmax(0, 1fr); } }
.lp-film-note { max-width: 1180px; margin: var(--ag-space-3) auto 0; font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.lp-chapters { list-style: none; margin: var(--ag-space-5) auto 0; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-chapters button { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 8px; padding: 8px 8px 12px; background: color-mix(in srgb, var(--ag-surface) 70%, transparent); border: var(--lp-hair); border-radius: var(--ag-radius-md); transition: border-color var(--ag-motion-fast), transform var(--ag-motion-fast), background var(--ag-motion-fast); }
.lp-chapters button:hover { border-color: var(--ag-line-strong); transform: translateY(-2px); }
.lp-chapters button.is-now { border-color: var(--ag-signal); background: var(--ag-signal-ink-soft); }
.lp-chapters button:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: 2px; }
.lp-chapters img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; background: var(--ag-surface-inset); }
.lp-chapters span { font-family: var(--ag-font-interface); font-weight: 700; font-size: var(--lp-ui-xs); color: var(--ag-signal-ink); padding: 0 4px; font-variant-numeric: tabular-nums; }
.lp-chapters b { font-size: var(--lp-ui-md); letter-spacing: -.01em; line-height: 1.25; padding: 0 4px; }
.lp-transcript { max-width: 1180px; margin: var(--ag-space-5) auto 0; border-top: var(--lp-hair); }
.lp-transcript summary { cursor: pointer; padding: var(--ag-space-4) 0; font-weight: 700; color: var(--ag-ink-muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.lp-transcript summary::-webkit-details-marker { display: none; }
.lp-transcript summary::after { content: "+"; font-size: var(--ag-type-card); color: var(--ag-ink-faint); transition: transform var(--ag-motion-normal); }
.lp-transcript[open] summary::after { transform: rotate(45deg); }
.lp-transcript-body { max-width: 70ch; display: grid; gap: var(--ag-space-3); color: var(--ag-ink-muted); line-height: var(--ag-leading-reading); padding-bottom: var(--ag-space-5); }
.lp-transcript-body p { margin: 0; }
.lp-transcript-body b { color: var(--ag-ink); font-size: var(--lp-ui-sm); display: block; margin-top: var(--ag-space-3); }

/* ══ NINE MORE SCREENS ══════════════════════════════════════════════════════ */
.lp-suite { padding-top: clamp(64px, 8vw, 116px); }
.bn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.bn-tile { display: flex; flex-direction: column; gap: var(--ag-space-4); background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--lp-r); padding: var(--ag-space-5); overflow: hidden; min-width: 0; transition: border-color var(--ag-motion-fast), transform var(--ag-motion-normal) var(--ag-ease-standard); }
.bn-tile:hover { border-color: var(--ag-line-strong); transform: translateY(-3px); }
.bn-web { grid-column: span 7; } .bn-conv { grid-column: span 5; }
.bn-content, .bn-reach, .bn-people { grid-column: span 4; }
.bn-map { grid-column: span 8; } .bn-voice-t { grid-column: span 4; }
.bn-books { grid-column: span 5; } .bn-board { grid-column: span 7; }
.bn-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.bn-head h3 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.bn-head p { margin: 5px 0 0; color: var(--ag-ink-muted); font-size: var(--ag-type-small); line-height: 1.45; }
.bn-body { flex: 1; display: grid; gap: 12px; align-content: start; min-width: 0; }
.bn-note { margin: 0; font-size: var(--lp-ui-sm); color: var(--ag-ink-muted); }

.bn-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-site { margin: 0; border: var(--lp-hair); border-radius: var(--ag-radius-md); overflow: hidden; background: var(--ag-surface-raised); }
.bn-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--ag-surface-inset); border-bottom: var(--lp-hair); }
.bn-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-line-strong); opacity: .5; }
.bn-bar span { margin-left: 6px; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-hero { padding: 18px 14px 20px; display: grid; gap: 9px; justify-items: start; }
.bn-hero small { font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }
.bn-hero b { font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -.03em; line-height: 1.1; font-weight: 800; }
.bn-btn { background: var(--ag-signal); color: var(--ag-signal-contrast); font-weight: 700; font-size: var(--lp-ui-sm); border-radius: var(--ag-radius-sm); padding: 7px 12px; }
.bn-site--on { border-color: var(--ag-signal); box-shadow: 0 0 0 3px var(--ag-signal-ink-soft); }
.bn-site--on .bn-hero small { color: var(--ag-signal-ink); font-weight: 700; }
.bn-aud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bn-aud li { font-size: var(--lp-ui-xs); font-weight: 700; border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 5px 12px; color: var(--ag-ink-muted); }
.bn-aud li.on { background: var(--ag-chip-on); border-color: transparent; color: var(--ag-chip-on-ink); }

.bn-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bn-funnel li { display: grid; grid-template-columns: 8.4em minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--lp-ui-sm); }
.bn-funnel span { color: var(--ag-ink-muted); }
.bn-funnel i { display: block; height: 14px; border-radius: var(--ag-radius-pill); background: var(--ag-line); position: relative; overflow: hidden; }
.bn-funnel i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ag-signal); border-radius: var(--ag-radius-pill); }
.bn-funnel li:nth-child(1) { --w: 100%; } .bn-funnel li:nth-child(2) { --w: 49%; } .bn-funnel li:nth-child(3) { --w: 23%; } .bn-funnel li:nth-child(4) { --w: 16%; }
.bn-funnel b { font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.bn-friction { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--ag-radius-md); background: color-mix(in srgb, var(--ag-warning) 11%, transparent); border: 1px solid color-mix(in srgb, var(--ag-warning) 30%, transparent); font-size: var(--lp-ui-sm); line-height: 1.45; }
.bn-friction .lp-i { color: var(--ag-warning-label); width: 18px; height: 18px; margin-top: 1px; }

.bn-post { border: var(--lp-hair); border-radius: var(--ag-radius-md); overflow: hidden; background: var(--ag-surface-raised); display: grid; gap: 10px; padding-bottom: 12px; }
.bn-post-img { display: block; width: 100%; height: auto; }
.bn-post-img .sk { fill: color-mix(in srgb, var(--ag-cat-1) 24%, var(--ag-surface-raised)); }
.bn-post-img .sun { fill: var(--ag-cat-6); }
.bn-post-img .hill { fill: color-mix(in srgb, var(--ag-cat-3) 38%, var(--ag-surface-raised)); }
.bn-post-img .van rect, .bn-post-img .van path { fill: var(--ag-cat-1); stroke: var(--ag-ink); stroke-width: 2.2; stroke-linejoin: round; }
.bn-post-img .van .wh { fill: var(--ag-ink); stroke: none; }
.bn-post p { margin: 0 12px; font-size: var(--lp-ui-md); line-height: 1.4; }
.bn-post-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 12px; }
.bn-voice { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bn-voice small { color: var(--ag-ink-faint); margin-right: 2px; }
.bn-voice span { font-size: var(--lp-ui-xs); font-weight: 700; border-radius: var(--ag-radius-pill); padding: 4px 11px; background: var(--ag-signal-ink-soft); color: var(--ag-signal-ink); }

.bn-cal { border: var(--lp-hair); border-radius: var(--ag-radius-md); overflow: hidden; background: var(--ag-surface-raised); }
.bn-cal-h, .bn-cal-b { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bn-cal-h span { padding: 7px 6px; font-size: var(--lp-ui-xs); font-weight: 700; color: var(--ag-ink-faint); text-align: center; border-bottom: var(--lp-hair); background: var(--ag-surface-inset); }
.bn-cal-b > div { min-height: 96px; padding: 6px 4px; display: grid; gap: 4px; align-content: start; border-left: var(--lp-hair); }
.bn-cal-b > div:first-child { border-left: 0; }
.bn-cal-b em { --c: var(--ag-cat-1); font-style: normal; font-size: var(--lp-ui-xs); font-weight: 700; padding: 3px 5px; border-radius: 5px; background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 60%, var(--ag-ink)); border-left: 3px solid var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-cal-b em.post { --c: var(--ag-cat-4); } .bn-cal-b em.sms { --c: var(--ag-cat-3); } .bn-cal-b em.rev { --c: var(--ag-cat-2); }

.bn-contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 10px 12px; background: var(--ag-surface-raised); }
.bn-contact b { display: block; font-size: var(--lp-ui-md); }
.bn-contact small { color: var(--ag-ink-faint); }
.bn-timeline { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.bn-timeline::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 2px; background: var(--ag-line); }
.bn-timeline li { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: var(--lp-ui-sm); position: relative; }
.bn-timeline i { width: 10px; height: 10px; border-radius: 50%; background: var(--ag-signal); box-shadow: 0 0 0 3px var(--ag-signal-ink-soft); }
.bn-timeline li.next i { background: var(--ag-line-strong); box-shadow: none; }
.bn-timeline span { color: var(--ag-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-timeline em { font-style: normal; font-family: var(--ag-font-mono); font-size: var(--lp-ui-xs); color: var(--ag-ink-faint); }

.bn-mapwrap { position: relative; min-height: 318px; height: 100%; }
.bn-mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bn-mapsvg .land { fill: var(--ag-surface-inset); }
.bn-mapsvg .water { fill: color-mix(in srgb, var(--ag-cat-1) 24%, transparent); }
.bn-mapsvg .park { fill: color-mix(in srgb, var(--ag-cat-3) 24%, transparent); }
.bn-mapsvg .roads path { stroke: var(--ag-line-strong); stroke-width: 1.4; fill: none; opacity: .5; }
.bn-mapsvg .route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bn-mapsvg .route.done { stroke: var(--ag-positive-ink); }
.bn-mapsvg .route.next { stroke: var(--ag-signal); stroke-dasharray: 2 9; }
.bn-mapsvg .route.van2 { stroke: var(--ag-cat-2); stroke-dasharray: 2 9; }
.bn-mapsvg .job circle { fill: var(--ag-surface-raised); stroke: var(--ag-signal-ink); stroke-width: 3; }
.bn-mapsvg .van circle { fill: var(--ag-signal); stroke: var(--ag-canvas); stroke-width: 4; }
.bn-maplist { position: absolute; left: 16px; bottom: 16px; width: min(310px, 62%); background: color-mix(in srgb, var(--ag-surface-raised) 88%, transparent); backdrop-filter: blur(10px); border: var(--lp-hair); border-radius: var(--ag-radius-md); padding: 12px 14px; display: grid; gap: 8px; }
.bn-maplist small { color: var(--ag-ink-faint); font-weight: 700; }
.bn-maplist ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bn-maplist li { display: grid; gap: 1px; font-size: var(--lp-ui-sm); padding-left: 14px; position: relative; }
.bn-maplist li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-line-strong); }
.bn-maplist li.done::before { background: var(--ag-positive-ink); } .bn-maplist li.now::before { background: var(--ag-signal); box-shadow: 0 0 0 3px var(--ag-signal-ink-soft); }
.bn-maplist li span { color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); }

.bn-wave { width: 100%; height: 48px; display: block; }
.bn-wave rect { fill: var(--ag-signal); }
.bn-wave rect:nth-child(n+22) { opacity: .3; }
.bn-says { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bn-says li { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: var(--lp-ui-sm); line-height: 1.4; display: grid; gap: 2px; }
.bn-says small { color: var(--ag-ink-faint); font-weight: 700; font-size: var(--lp-ui-xs); }
.bn-says .them { justify-self: start; background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: 14px 14px 14px 4px; }
.bn-says .us { justify-self: end; background: var(--ag-signal-ink-soft); border-radius: 14px 14px 4px 14px; }
.bn-booked { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--ag-radius-md); background: color-mix(in srgb, var(--ag-positive) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ag-positive) 30%, transparent); font-size: var(--lp-ui-sm); font-weight: 700; color: var(--ag-positive-label); }
.bn-booked .lp-i { width: 16px; height: 16px; stroke-width: 2.6; }

.bn-age { display: flex; height: 36px; border-radius: 9px; overflow: hidden; font-size: var(--lp-ui-xs); font-weight: 700; }
.bn-age span { display: flex; align-items: center; gap: 5px; padding: 0 9px; white-space: nowrap; overflow: hidden; }
.bn-age b { font-variant-numeric: tabular-nums; }
.bn-age .a { flex: 62; background: color-mix(in srgb, var(--ag-positive) 22%, var(--ag-surface-raised)); }
.bn-age .b { flex: 21; background: color-mix(in srgb, var(--ag-cat-1) 22%, var(--ag-surface-raised)); }
.bn-age .c { flex: 11; background: color-mix(in srgb, var(--ag-warning) 22%, var(--ag-surface-raised)); }
.bn-age .d { flex: 6; background: color-mix(in srgb, var(--ag-danger) 26%, var(--ag-surface-raised)); padding: 0 4px; }
.bn-inv { width: 100%; border-collapse: collapse; font-size: var(--lp-ui-sm); font-variant-numeric: tabular-nums; }
.bn-inv td { padding: 9px 8px 9px 0; border-bottom: var(--lp-hair); }
.bn-inv tr:last-child td { border-bottom: 0; }
.bn-inv td:first-child { font-family: var(--ag-font-mono); color: var(--ag-ink-faint); font-size: var(--lp-ui-xs); }
.bn-inv td:nth-child(3) { font-weight: 800; text-align: right; }
.bn-inv td:last-child { text-align: right; padding-right: 0; }

.bn-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bn-cols > div { background: var(--ag-surface-inset); border-radius: var(--ag-radius-md); padding: 10px; display: grid; gap: 6px; align-content: start; min-height: 128px; }
.bn-cols small { font-weight: 800; color: var(--ag-ink-muted); font-size: var(--lp-ui-xs); }
.bn-cols span { display: block; background: var(--ag-surface-raised); border: var(--lp-hair); border-radius: 8px; padding: 8px 10px; font-size: var(--lp-ui-sm); line-height: 1.3; }
.bn-cols .hot { border-color: var(--ag-signal); background: var(--ag-signal-ink-soft); }
.bn-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.bn-flow li { font-size: var(--lp-ui-xs); font-weight: 700; border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-pill); padding: 5px 12px; background: var(--ag-surface-raised); }
.bn-flow li + li::before { content: "→"; margin-right: 6px; color: var(--ag-ink-faint); font-weight: 400; }
.bn-flow li:first-child { background: var(--ag-signal-ink-soft); border-color: transparent; color: var(--ag-signal-ink); }

/* ══ SIX ILLUSTRATIONS ══════════════════════════════════════════════════════
   A flat set, drawn in the platform's own colours: the categorical ramp for the fills, the ink for the line, so
   the set follows the theme and the operator's palette like everything else. */
.sx { margin-top: clamp(44px, 5.5vw, 80px); }
.sx-title { margin: 0 0 var(--ag-space-5); max-width: 26ch; font-size: clamp(26px, 2.9vw, 42px); letter-spacing: -.038em; line-height: 1.04; font-weight: 800; }
.sx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.sx-tile { display: grid; background: var(--ag-surface); border: var(--lp-hair); border-radius: var(--lp-r); overflow: hidden; transition: border-color var(--ag-motion-fast), transform var(--ag-motion-normal) var(--ag-ease-standard); }
.sx-tile:hover { border-color: var(--ag-line-strong); transform: translateY(-3px); }
.sx-art { width: 100%; height: auto; display: block; background: var(--ag-surface-inset); }
.sx-q { padding: var(--ag-space-4) var(--ag-space-5) var(--ag-space-5); display: grid; gap: 5px; align-content: start; }
.sx-q small { font-weight: 800; color: var(--ag-ink-muted); font-size: var(--lp-ui-sm); }
.sx-q b { font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: 1.2; font-weight: 800; }
.sx-q span { color: var(--ag-ink-muted); font-size: var(--ag-type-small); line-height: 1.45; }
.sx-foot { margin: var(--ag-space-5) 0 0; color: var(--ag-ink-muted); max-width: 62ch; }
.sx-art .bg.c1 { fill: color-mix(in srgb, var(--ag-cat-1) 22%, var(--ag-surface-inset)); } .sx-art .bg.c2 { fill: color-mix(in srgb, var(--ag-cat-2) 22%, var(--ag-surface-inset)); }
.sx-art .bg.c3 { fill: color-mix(in srgb, var(--ag-cat-3) 22%, var(--ag-surface-inset)); } .sx-art .bg.c4 { fill: color-mix(in srgb, var(--ag-cat-4) 22%, var(--ag-surface-inset)); }
.sx-art .bg.c5 { fill: color-mix(in srgb, var(--ag-cat-5) 20%, var(--ag-surface-inset)); } .sx-art .bg.c6 { fill: color-mix(in srgb, var(--ag-cat-6) 24%, var(--ag-surface-inset)); }
.sx-art .gnd { fill: none; stroke: var(--ag-ink); stroke-width: 2.5; stroke-linecap: round; }
.sx-art .ol { fill: none; stroke: var(--ag-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sx-art .f1 { fill: var(--ag-cat-1); } .sx-art .f1b { fill: color-mix(in srgb, var(--ag-cat-1) 72%, var(--ag-ink)); }
.sx-art .f2 { fill: var(--ag-cat-2); } .sx-art .f2b { fill: color-mix(in srgb, var(--ag-cat-2) 74%, var(--ag-ink)); }
.sx-art .f3 { fill: var(--ag-cat-3); } .sx-art .f3b { fill: color-mix(in srgb, var(--ag-cat-3) 74%, var(--ag-ink)); }
.sx-art .f4 { fill: var(--ag-cat-4); } .sx-art .f4b { fill: color-mix(in srgb, var(--ag-cat-4) 74%, var(--ag-ink)); }
.sx-art .f5 { fill: var(--ag-cat-5); } .sx-art .f6 { fill: var(--ag-cat-6); }
.sx-art .fw { fill: var(--ag-surface-raised); } .sx-art .fi { fill: var(--ag-ink); }
.sx-art .plus { stroke: var(--ag-cat-3); stroke-width: 5.5; }
.sx-art .ecg { stroke: var(--ag-cat-3); stroke-width: 3; }
.sx-art .steam { stroke: var(--ag-ink-faint); stroke-width: 2; }
.sx-art .chk { stroke: var(--ag-surface-raised); stroke-width: 3.5; }
.sx-art .hnd { stroke: var(--ag-ink); stroke-width: 3; }
.sx-art .perf { stroke-dasharray: 4 5; stroke-width: 2; }
.sx-art .tx { fill: var(--ag-surface-raised); stroke: none; font-family: var(--ag-font-interface); font-weight: 800; font-size: 8px; letter-spacing: .06em; }
.sx-art .tx.dk { fill: var(--ag-ink); font-size: 19px; letter-spacing: 0; }
.sx-art .spark { fill: var(--ag-cat-6); stroke: var(--ag-ink); stroke-width: 1.6; stroke-linejoin: round; }
.sx-art .dot { stroke: none; } .sx-art .dot.a { fill: var(--ag-cat-4); } .sx-art .dot.b { fill: var(--ag-cat-1); } .sx-art .dot.c { fill: var(--ag-cat-3); }

/* ══ NARROW, ROUND TWO ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .bn-web, .bn-conv, .bn-map, .bn-books, .bn-board { grid-column: span 12; }
  .bn-content, .bn-reach, .bn-people, .bn-voice-t { grid-column: span 6; }
}
@media (max-width: 900px) {
  .lp-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-play-text { padding: 7px 14px 8px; }
  .lp-play-text b { font-size: var(--lp-ui-sm); }
  .lp-play-text small { display: none; }
}
@media (max-width: 760px) {
  .bn-content, .bn-reach, .bn-people, .bn-voice-t { grid-column: span 12; }
  .bn-sites { grid-template-columns: minmax(0, 1fr); }
  .sx-grid { grid-template-columns: minmax(0, 1fr); }
  .bn-cols { grid-template-columns: minmax(0, 1fr); }
  .bn-cols > div { min-height: 0; }
  .bn-timeline li { grid-template-columns: 10px minmax(0, 1fr) auto; } .bn-timeline li span { display: none; }
  .bn-maplist { position: relative; left: auto; bottom: auto; width: auto; margin: 0 12px 12px; }
  .bn-mapwrap { display: grid; min-height: 0; } .bn-mapsvg { position: relative; height: 220px; }
  .bn-cal-b > div { min-height: 78px; }
}
@media (max-width: 640px) {
  .lp-chapters { grid-template-columns: minmax(0, 1fr); }
  .lp-chapters button { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .lp-chapters img { grid-row: 1 / 3; }
  .bn-funnel li { grid-template-columns: 7em minmax(0, 1fr) auto; }
  .lp-play-text { display: none; }
}
@media (min-width: 761px) and (max-width: 1000px) { .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .lp-hl { transition: none; }
  .js-reveal .lp-hero::after { animation: none; }
  .lp-ex .lp-chat, .lp-ex .lp-calls, .lp-ex .lp-owner { transform: none; transition: none; }
}

/* ── small corrections to the nine screens ─────────────────────────────────── */
.bn-contact { grid-template-columns: auto minmax(0, 1fr); }
.bn-contact .lp-chip { grid-column: 1 / -1; justify-self: start; }
.bn-maplist { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 10px 14px; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.bn-maplist ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bn-age { height: 18px; }
.bn-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--lp-ui-xs); color: var(--ag-ink-muted); }
.bn-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bn-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.bn-legend b { color: var(--ag-ink); font-variant-numeric: tabular-nums; }
.bn-legend .a { --k: color-mix(in srgb, var(--ag-positive) 55%, var(--ag-surface-raised)); } .bn-legend .b { --k: color-mix(in srgb, var(--ag-cat-1) 55%, var(--ag-surface-raised)); }
.bn-legend .c { --k: color-mix(in srgb, var(--ag-warning) 55%, var(--ag-surface-raised)); } .bn-legend .d { --k: color-mix(in srgb, var(--ag-danger) 60%, var(--ag-surface-raised)); }
@media (max-width: 760px) { .bn-maplist { grid-template-columns: minmax(0, 1fr); } .bn-maplist ol { grid-template-columns: minmax(0, 1fr); } }