/* ============================================================================
 * Zimac agent landing — the ONE marketing template every agent site shares.
 *
 * This is Finn's landing system (the family's gold standard), extracted and
 * generalized: the near-black canvas, Inter-only type, mono uppercase labels,
 * the `— eyebrow` kicker above every hero H1, the two-tone headline, the
 * gradient + ghost CTA pair, the numbered 01–04 rail, and the alternating
 * product sections. A page never invents its own version of any of this —
 * it sets the theme tokens below (or just its `data-agent`) and writes
 * content. The Zimac indigo/pink pair appears exactly once per page, in the
 * platform bridge, so the hand-off to the mothership reads as a change of
 * brand.
 *
 * Consumers:
 *   Rust services   — serve zimac_common::ui::LANDING_STYLESHEET at
 *                     /zimac-landing.css (same rail as /zimac-ui.css).
 *   Static sites    — vendor a byte-for-byte copy next to index.html; a repo
 *                     test compares it against this file, so drift fails CI.
 *
 * Theming: every color in the sheet resolves through the `--l-*` tokens in
 * this block (via color-mix for alpha variants). The per-agent palettes live
 * at the bottom of this file as `[data-agent="…"]` blocks — add new agents
 * THERE, never by forking the sheet. Deliberate exceptions that stay literal:
 * mock-window chrome (cool "screen" neutrals + traffic-light dots) and pure
 * black/white overlay scrims.
 *
 * Structure marks a page opts into per <section>:
 *   .ln-sect-a     soft accent-glow background
 *   .ln-sect-b     bordered, raised-bg band
 *   .ln-sect-split two-column head|demo grid
 *   .ln-sect-flip  demo leads, head follows (order swap)
 *   .ln-sect-full  full-width head over content (grids, FAQ)
 *
 * It is deliberately self-contained: every rule is scoped under
 * `.agent-landing` and uses its own `--l-*` tokens rather than the kit's, so
 * the marketing surface can't leak into the app's product chrome. The one
 * seam is the sign-in card, whose ids (sso-btn, token-fallback,
 * signin-form, token-input) are the contract each app.js and sso.js wire
 * against.
 * ==========================================================================*/

.agent-landing {
  /* Default theme = Finn (the reference). Agent themes override these. */
  --l-bg: #080806;
  --l-bg2: #0d0c09;
  --l-surface: #13110d;
  --l-surface2: #18150f;
  --l-border: #302919;
  --l-border2: #5a481f;
  --l-border-soft: #211c12;
  --l-text: #fffaf0;
  --l-muted: #bbb4a7;
  /* Brand-lockup small text: brighter than muted, dimmer than text. */
  --l-muted-bright: #e9e3d7;
  --l-faint: #8e877a;
  /* Hero/image scrim ink — the page's black, tinted toward the canvas hue. */
  --l-shade: #040504;
  /* The agent's product accent (Finn's amber here). */
  --l-accent: #fbbf24;
  --l-accent-2: #fcd34d;
  --l-accent-deep: #f59e0b;
  /* Ink for text sitting ON the accent (white fails contrast on amber). */
  --l-ink: #201907;
  --l-ok: #34d399;
  --l-alert: #fb923c;
  /* The family pair, reserved for the Zimac bridge. */
  --l-indigo: #6c63ff;
  --l-pink: #f472b6;

  --l-maxw: 1280px;
  --l-gutter: 32px;
  --l-section-gap: 88px;
  --l-head-gap: 36px;
  --l-grid-gap: 18px;
  --l-card-pad: 26px;
  --l-hero-top: 76px;
  --l-radius: 20px;

  --l-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --l-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --l-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
  --l-grad-cta: linear-gradient(145deg, var(--l-accent-deep), var(--l-accent) 58%, var(--l-accent-2));
  --l-grad-text: linear-gradient(115deg, #fff 10%, var(--l-accent-2) 55%, var(--l-accent-deep));

  display: block;
  position: relative;
  color: var(--l-text);
  font: 400 16px/1.6 var(--l-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: hidden makes this element a scroll container, so
     the nav's position:sticky binds to it instead of the viewport and the
     header scrolls away (worst on phones). clip clips the decorative
     overhang identically without that side effect — same as Paige. */
  overflow-x: clip;
}

/* The base block's `display: block` outweighs the UA's [hidden] rule, so an
   SPA toggling the landing root via the hidden attribute would never hide
   it. Scoped to the root only — pages keep their own [hidden] conventions. */
.agent-landing[hidden] {
  display: none !important;
}

/* Two fixed layers own the page canvas while the landing is on screen: an
   amber glow up top with the family indigo answering from the left, then a
   masked dot field. The app is hidden underneath, so covering the body
   background is safe. */
.agent-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(56rem 50rem at 82% -12%, color-mix(in srgb, var(--l-accent) 14%, transparent), transparent 62%),
    radial-gradient(50rem 46rem at -6% 8%, color-mix(in srgb, var(--l-accent-deep) 9%, transparent), transparent 60%),
    radial-gradient(62rem 52rem at 50% 112%, color-mix(in srgb, var(--l-accent-deep) 7%, transparent), transparent 66%),
    var(--l-bg);
}

.agent-landing::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  background-image: radial-gradient(color-mix(in srgb, var(--l-accent-2) 45%, transparent) 0.55px, transparent 0.55px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(90rem 68rem at 50% 0, #000, transparent 72%);
  mask-image: radial-gradient(90rem 68rem at 50% 0, #000, transparent 72%);
}

.agent-landing a {
  color: inherit;
  text-decoration: none;
}

.agent-landing h1,
.agent-landing h2,
.agent-landing h3,
.agent-landing h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.agent-landing p {
  margin: 0;
}

.agent-landing ul,
.agent-landing ol {
  margin: 0;
  padding: 0;
}

.agent-landing code {
  font-family: var(--l-mono);
}

.agent-landing ::selection {
  background: color-mix(in srgb, var(--l-accent) 32%, transparent);
  color: #fff;
}

.agent-landing a:focus-visible,
.agent-landing button:focus-visible,
.agent-landing summary:focus-visible,
.agent-landing input:focus-visible {
  outline: 2px solid var(--l-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* The landing owns the whole page canvas, so the sheet — not each site —
   kills the UA's default 8px body margin. Static sites with no app kit sheet
   have no other reset, and forgetting it frames the page in a visible gutter
   (the fixed canvas layers show through around the inset nav/hero). Scoped
   via :has like smooth scrolling below, so an SPA that hides the landing
   hands the body back to its own chrome. */
body:has(.agent-landing:not([hidden])) {
  margin: 0;
}

/* Anchor navigation is the landing's whole spine; the app is a hash router and
   must not animate between views, so scope smooth scrolling to the landing. */
html:has(.agent-landing:not([hidden])) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.agent-landing:not([hidden])) {
    scroll-behavior: auto;
  }
}

.ln-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  border: 1px solid var(--l-border);
  border-radius: 10px;
  background: var(--l-surface);
}

.ln-skip:focus {
  left: 12px;
  top: 12px;
}

.ln-noscript {
  position: relative;
  z-index: 100;
  padding: 10px var(--l-gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--l-accent) 30%, transparent);
  background: color-mix(in srgb, var(--l-accent) 11%, transparent);
  color: var(--l-accent-2);
  text-align: center;
  font-size: 13px;
}

.ln-wrap {
  width: min(100%, var(--l-maxw));
  min-width: 0;
  margin: 0 auto;
  padding-inline: var(--l-gutter);
}

.agent-landing main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  row-gap: var(--l-section-gap);
}

.agent-landing main > section {
  position: relative;
  min-width: 0;
  padding: 0;
}

.agent-landing section[id] {
  scroll-margin-top: 84px;
}

/* ---------- landing type helpers ---------- */

.ln-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--l-accent);
  font: 700 11px/1 var(--l-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ln-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--l-accent));
}

.ln-eyebrow.is-zimac {
  color: var(--l-pink);
}

.ln-eyebrow.is-zimac::before {
  background: linear-gradient(90deg, transparent, var(--l-pink));
}

.ln-grad {
  background: var(--l-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ln-grad-zimac {
  background: linear-gradient(115deg, #fff 4%, var(--l-pink) 52%, #8b83ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ln-mono {
  font-family: var(--l-mono);
  font-size: 0.92em;
  color: var(--l-accent-2);
}

.ln-section-head {
  max-width: 760px;
  margin-bottom: var(--l-head-gap);
  display: grid;
  gap: 16px;
  justify-items: start;
}

.ln-section-head h2 {
  font-size: clamp(30px, 4.2vw, 42px);
}

.ln-section-head p {
  color: var(--l-muted);
  font-size: 16.5px;
  max-width: 62ch;
}

.ln-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--l-border);
  border-radius: 999px;
  color: var(--l-faint);
  font: 600 10px/1.4 var(--l-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ln-label {
  color: var(--l-accent);
  font: 700 11px/1 var(--l-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Deltas read the same everywhere they appear: up is neutral information,
   down is good news, a spike is the thing Finn exists to catch. */
.agent-landing .is-up {
  color: var(--l-muted);
}

.agent-landing .is-alert {
  color: var(--l-alert);
}

.agent-landing .is-down {
  color: var(--l-ok);
}

/* ---------- nav ---------- */

.ln-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  margin-bottom: -64px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 86%, transparent), color-mix(in srgb, var(--l-shade) 46%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  transition: border-color 0.25s, background 0.25s;
}

.ln-nav.is-scrolled {
  border-bottom-color: var(--l-border-soft);
  background: color-mix(in srgb, var(--l-bg) 92%, transparent);
}

.ln-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 64px;
}

.ln-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -0.01em;
}

.ln-brand-lockup {
  display: grid;
  gap: 0;
  line-height: 1;
}

.ln-brand-lockup b {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ln-brand-lockup small {
  color: var(--l-muted-bright);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ln-brand-lockup em {
  color: var(--l-accent);
  font-style: normal;
  font-weight: 700;
}

.ln-beacon-mark {
  position: relative;
  width: 30px;
  height: 38px;
  display: grid;
  align-content: end;
  gap: 3px;
  filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--l-accent) 22%, transparent));
}

.ln-beacon-mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9px;
  width: 12px;
  height: 9px;
  background: var(--l-accent);
  clip-path: polygon(50% 0, 100% 70%, 100% 100%, 0 100%, 0 70%);
}

.ln-beacon-mark i {
  display: block;
  height: 7px;
  border-radius: 50% 50% 8% 8%;
  background: var(--l-accent);
}

.ln-beacon-mark i:nth-child(1) { width: 20px; margin-inline: auto; }
.ln-beacon-mark i:nth-child(2) { width: 25px; margin-inline: auto; }
.ln-beacon-mark i:nth-child(3) { width: 30px; }

.ln-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-weight: 500;
  font-size: 14px;
  color: var(--l-muted);
}

.ln-links a:not(.ln-btn) {
  transition: color 0.2s;
}

.ln-links a:not(.ln-btn):hover {
  color: var(--l-text);
}

.ln-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--l-border);
  border-radius: 10px;
  background: none;
  color: var(--l-text);
  cursor: pointer;
}

/* ---------- buttons ---------- */

.ln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: 600 14px/1.45 var(--l-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--l-ease), box-shadow 0.25s, border-color 0.2s,
    background-color 0.2s, filter 0.2s;
}

.ln-btn:active {
  transform: translateY(1px);
}

.ln-btn-lg {
  padding: 13px 26px;
  font-size: 15px;
  border-radius: 13px;
}

.ln-btn-block {
  width: 100%;
}

/* `.agent-landing a { color: inherit }` outweighs a lone class selector, so
   every button color is scoped under .agent-landing to win for <a> buttons. */
.agent-landing .ln-btn-primary {
  background: var(--l-grad-cta);
  color: var(--l-ink);
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--l-accent) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.agent-landing .ln-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--l-accent) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.agent-landing .ln-btn-ghost {
  border-color: var(--l-border);
  color: var(--l-text);
  background: rgba(255, 255, 255, 0.02);
}

.agent-landing .ln-btn-ghost:hover {
  border-color: var(--l-border2);
  background: rgba(255, 255, 255, 0.05);
}

/* The one button on this page that belongs to the platform, not the product:
   the family indigo→pink, exactly as the Zimac sites draw it. */
.agent-landing .ln-btn-zimac {
  background: linear-gradient(145deg, var(--l-indigo), #7d76ff 58%, var(--l-pink));
  color: #fff;
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--l-indigo) 70%, transparent);
}

.agent-landing .ln-btn-zimac:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.agent-landing .ln-text-link {
  color: var(--l-muted);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}

.agent-landing .ln-text-link:hover {
  color: var(--l-text);
}

.ln-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

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

.ln-hero {
  isolation: isolate;
  min-height: min(960px, 100svh);
  padding: 64px 0 24px;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  box-shadow: inset 0 -1px color-mix(in srgb, var(--l-accent) 28%, transparent);
}

.ln-hero-art,
.ln-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ln-hero-art {
  z-index: -3;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.96) contrast(1.04);
}

.ln-hero-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 90%, transparent) 0%, color-mix(in srgb, var(--l-shade) 66%, transparent) 31%, color-mix(in srgb, var(--l-shade) 18%, transparent) 57%, color-mix(in srgb, var(--l-shade) 3%, transparent) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 28%, transparent) 0%, transparent 36%, color-mix(in srgb, var(--l-shade) 16%, transparent) 68%, color-mix(in srgb, var(--l-shade) 76%, transparent) 100%);
}

.ln-hero-grid {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(420px, 1.22fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.ln-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  justify-items: start;
  padding-block: 48px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.58);
}

.ln-hero h1 {
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.046em;
  line-height: 0.99;
  max-width: 10ch;
}

/* White headline with the amber held to the phrase that names the job, so
   "cloud costs" is the only lit thing in the line. */
.ln-hero h1 .ln-costs {
  color: var(--l-accent);
}

.ln-hero-sub {
  color: color-mix(in srgb, var(--l-text) 78%, transparent);
  font-size: clamp(16px, 1.45vw, 19px);
  max-width: 43ch;
}

.ln-hero-sub strong {
  display: block;
  margin-top: 5px;
  color: var(--l-text);
  font-weight: 600;
}

.ln-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.ln-hero .ln-btn-lg {
  min-width: 164px;
  min-height: 54px;
  font-size: 16px;
}

.ln-hero .ln-btn-ghost {
  border-color: color-mix(in srgb, var(--l-accent) 76%, transparent);
  background: color-mix(in srgb, var(--l-shade) 54%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ln-course-signals {
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.ln-course-signal {
  position: absolute;
  left: clamp(12px, 6vw, 86px);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  padding: 8px 12px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--l-shade) 27%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-shadow: 0 2px 14px #000;
}

.ln-course-signal > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--l-accent);
  border-radius: 11px;
  color: var(--l-accent);
  font-size: 23px;
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--l-accent) 9%, transparent), 0 0 24px color-mix(in srgb, var(--l-accent) 9%, transparent);
}

.ln-course-signal p {
  display: grid;
  gap: 1px;
}

.ln-course-signal b {
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  text-transform: uppercase;
}

.ln-course-signal small {
  color: color-mix(in srgb, var(--l-text) 78%, transparent);
  font-size: 12px;
}

.ln-course-signal.is-memory { top: 10%; }
.ln-course-signal.is-tools { top: 31%; left: clamp(0px, 4vw, 56px); }
.ln-course-signal.is-context { top: 52%; left: clamp(20px, 7vw, 96px); }
.ln-course-signal.is-outcomes { top: 73%; left: clamp(2px, 5vw, 70px); }

.ln-course-rail {
  position: relative;
  z-index: 2;
  width: min(calc(100% - (var(--l-gutter) * 2)), var(--l-maxw));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--l-accent) 70%, transparent);
  border-radius: 16px;
  overflow: hidden;
  color: var(--l-ink);
  background: linear-gradient(100deg, color-mix(in srgb, #fff 92%, var(--l-accent-2)), color-mix(in srgb, #fff 84%, var(--l-accent-2)));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.86);
}

.ln-course-rail article {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 20px 18px;
  border-right: 1px solid color-mix(in srgb, var(--l-border2) 22%, transparent);
}

.ln-course-rail article:last-child { border-right: 0; }

.ln-course-icon {
  color: var(--l-accent-deep);
  font-size: 32px;
  line-height: 1;
}

.ln-course-rail p {
  display: grid;
  gap: 5px;
}

.ln-course-rail b {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ln-course-rail small {
  color: var(--l-faint);
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- hero product window ---------- */

.ln-stage-wrap {
  position: relative;
  min-width: 0;
}

.ln-preview-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 10px 8px;
  padding: 4px;
  border: 1px solid var(--l-border-soft);
  border-radius: 999px;
  background: rgba(9, 11, 17, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ln-preview-tabs button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 9px 13px;
  background: transparent;
  color: var(--l-faint);
  font: 650 11px/1 var(--l-sans);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ln-preview-tabs button:hover {
  color: var(--l-text);
}

.ln-preview-tabs button[aria-selected="true"] {
  color: var(--l-ink);
  background: var(--l-accent);
  box-shadow: 0 5px 16px -8px color-mix(in srgb, var(--l-accent) 90%, transparent);
}

.ln-window {
  margin: 0;
  border: 1px solid var(--l-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #12151f, #0c0f17);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.65),
    0 0 90px color-mix(in srgb, var(--l-accent) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 18px 20px 16px;
  display: grid;
  gap: 16px;
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.ln-stage-wrap:has(.ln-preview-tabs button:focus-visible) .ln-window {
  border-color: color-mix(in srgb, var(--l-accent) 36%, transparent);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.65),
    0 0 100px color-mix(in srgb, var(--l-accent) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ln-window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px -6px 0;
}

.ln-window-bar .dots {
  display: inline-flex;
  gap: 6px;
}

.ln-window-bar .dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2c3247;
}

.ln-window-bar .dots i:first-child {
  background: rgba(255, 95, 87, 0.75);
}

.ln-window-bar .dots i:nth-child(2) {
  background: rgba(254, 188, 46, 0.75);
}

.ln-window-bar .dots i:last-child {
  background: rgba(40, 200, 64, 0.7);
}

.ln-window-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--l-muted);
}

.ln-window-bar .ln-chip {
  margin-left: auto;
}

.ln-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ln-kpi {
  border: 1px solid var(--l-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  padding: 12px 14px;
  display: grid;
  gap: 3px;
}

.ln-kpi span {
  color: var(--l-faint);
  font: 600 9.5px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ln-kpi b {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ln-kpi em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--l-faint);
}

.ln-mock-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.ln-mock-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--l-faint);
  font: 600 9.5px/1.4 var(--l-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ln-mock-rows {
  display: grid;
  gap: 7px;
}

.ln-mock-row {
  display: grid;
  grid-template-columns: 72px 1fr auto 46px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.ln-mock-row .team {
  font-weight: 600;
}

.ln-mock-row .bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.ln-mock-row .bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--l-accent-deep), var(--l-accent-2));
  transition: width 0.32s var(--l-ease);
}

.ln-mock-row .amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12.5px;
}

.ln-mock-row .delta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
}

.ln-mock-foot {
  color: var(--l-faint);
  font-size: 11.5px;
  border-top: 1px solid var(--l-border-soft);
  padding-top: 12px;
}

/* The floating budget toast: the one moment of motion in the hero. */
.ln-toast {
  position: absolute;
  left: -26px;
  bottom: -34px;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 320px;
  padding: 12px 16px 12px 13px;
  border: 1px solid var(--l-border);
  border-left: 3px solid var(--l-accent);
  border-radius: 13px;
  background: rgba(16, 19, 29, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7), 0 0 40px color-mix(in srgb, var(--l-accent) 7%, transparent);
  animation: ln-float 7s ease-in-out infinite;
}

@keyframes ln-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.ln-toast-icon {
  color: var(--l-accent);
  font-size: 11px;
}

.ln-toast-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ln-toast-body b {
  font-size: 12.5px;
  font-weight: 700;
}

.ln-toast-body span {
  color: var(--l-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.ln-toast-time {
  align-self: start;
  color: var(--l-faint);
  font: 600 10px/1.6 var(--l-mono);
}

/* ---------- personified Finn ---------- */

.ln-persona-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--l-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--l-accent) 9%, transparent), transparent 34%),
    linear-gradient(145deg, var(--l-surface), var(--l-bg2) 68%);
  box-shadow:
    0 40px 90px -42px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ln-persona-card::after {
  content: "\00a4";
  position: absolute;
  right: -30px;
  top: -78px;
  color: color-mix(in srgb, var(--l-accent) 3.5%, transparent);
  font: 700 300px/1 var(--l-sans);
  pointer-events: none;
}

.ln-persona-portrait {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--l-bg);
}

.ln-persona-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 70%, color-mix(in srgb, var(--l-shade) 82%, transparent)),
    linear-gradient(0deg, rgba(5, 6, 9, 0.72), transparent 34%);
  pointer-events: none;
}

.ln-persona-portrait img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(0.88) contrast(1.03);
}

.ln-persona-portrait figcaption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 32px);
  bottom: clamp(20px, 3vw, 30px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 9, 13, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}

.ln-persona-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--l-ink);
  background: var(--l-grad-cta);
  font-size: 22px;
  font-weight: 800;
}

.ln-persona-portrait figcaption > span:last-child {
  display: grid;
  gap: 2px;
}

.ln-persona-portrait figcaption b {
  color: var(--l-text);
  font-size: 14px;
}

.ln-persona-portrait figcaption small {
  color: var(--l-faint);
  font: 600 10px/1.2 var(--l-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ln-persona-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 20px;
  padding: clamp(34px, 5vw, 68px);
}

.ln-persona-copy h2 {
  max-width: 14ch;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.ln-persona-copy > p {
  max-width: 54ch;
  color: var(--l-muted);
  font-size: 16px;
}

.ln-persona-principles {
  width: 100%;
  display: grid;
  gap: 0;
  list-style: none;
  border-block: 1px solid var(--l-border-soft);
}

.ln-persona-principles li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--l-border-soft);
}

.ln-persona-principles li:last-child {
  border-bottom: 0;
}

.ln-persona-principles b {
  color: var(--l-accent-2);
  font: 700 11px/1.5 var(--l-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ln-persona-principles span {
  color: var(--l-muted);
  font-size: 13.5px;
}

/* ---------- trust strip ---------- */

.ln-strip-wrap {
  border-block: 1px solid var(--l-border-soft);
  background: rgba(255, 255, 255, 0.012);
}

.ln-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding-block: 22px;
}

.ln-strip-item {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.ln-strip-item b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}

.ln-strip-item b::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--l-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--l-accent) 60%, transparent);
}

.ln-strip-item span {
  color: var(--l-faint);
}

/* ---------- problem cards ---------- */

.ln-durability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--l-grid-gap);
}

.ln-durable {
  position: relative;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  padding: var(--l-card-pad);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s var(--l-ease);
}

.ln-durable:hover {
  border-color: var(--l-border2);
  transform: translateY(-2px);
}

.ln-durable .mark {
  position: absolute;
  top: 14px;
  right: 18px;
  font: 700 40px/1 var(--l-mono);
  color: color-mix(in srgb, var(--l-accent) 13%, transparent);
  letter-spacing: -0.04em;
}

.ln-durable h3 {
  font-size: 17px;
  margin-bottom: 10px;
  padding-right: 56px;
}

.ln-durable p {
  color: var(--l-muted);
  font-size: 14.5px;
}

/* ---------- split sections (attribution, chargebacks, alerts) ---------- */

.ln-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.ln-split.is-rev {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}

/* A single visual sitting alone under a section head, sharing its measure. */
.ln-solo {
  max-width: 760px;
}

.ln-solo.is-narrow {
  max-width: 620px;
}

.ln-mechanics {
  display: grid;
  gap: 18px;
  list-style: none;
}

.ln-mechanics li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 13px;
  font-size: 14.5px;
  color: var(--l-muted);
}

.ln-mechanics b {
  color: var(--l-text);
  font-weight: 600;
}

.ln-mechanics .n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 40%, transparent);
  border-radius: 9px;
  color: var(--l-accent);
  font: 700 12px/1 var(--l-mono);
  background: color-mix(in srgb, var(--l-accent) 7%, transparent);
}

/* Vertical rail points: label, claim, and the sentence behind it. */
.ln-rail-points {
  display: grid;
  gap: 22px;
  list-style: none;
}

.ln-rail-points li {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  border-left: 2px solid var(--l-border);
  transition: border-color 0.25s;
}

.ln-rail-points li:hover {
  border-left-color: var(--l-accent);
}

.ln-rail-points .stage {
  color: var(--l-accent);
  font: 700 10px/1 var(--l-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ln-rail-points b {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ln-rail-points p {
  color: var(--l-muted);
  font-size: 14.5px;
}

.ln-rail-points p b {
  font-size: inherit;
  color: var(--l-text);
}

/* ---------- attribution table card ---------- */

.ln-table-card {
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  padding: 20px 22px;
  display: grid;
  gap: 14px;
}

.ln-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 600 11px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-muted);
}

.ln-table-wrap {
  min-width: 0;
}

.ln-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ln-table th {
  text-align: left;
  padding: 0 10px 9px 0;
  color: var(--l-faint);
  font: 600 10px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--l-border);
}

.ln-table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--l-border-soft);
  font-variant-numeric: tabular-nums;
}

.ln-table td:first-child {
  font-weight: 600;
}

.ln-table tr:last-child td {
  border-bottom: 0;
}

.ln-table .is-unattributed td {
  background: color-mix(in srgb, var(--l-accent) 5%, transparent);
}

.ln-table .is-unattributed td:first-child {
  color: var(--l-accent-2);
}

.ln-table-note {
  color: var(--l-faint);
  font-size: 12.5px;
  border-top: 1px solid var(--l-border-soft);
  padding-top: 12px;
}

/* ---------- the frozen statement ---------- */

.ln-statement {
  margin: 0;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface2), var(--l-bg2));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--l-accent) 5%, transparent);
  padding: 22px 24px;
  display: grid;
  gap: 14px;
}

.ln-statement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 600 11px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-muted);
}

.ln-statement-period {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ln-statement-lines {
  display: grid;
}

.ln-statement-lines .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--l-border-soft);
  font-size: 14px;
}

.ln-statement-lines .row b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 92px;
  text-align: right;
}

.ln-statement-lines .src {
  font: 600 9.5px/1.6 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--l-faint);
}

.ln-statement-lines .src.is-decl {
  color: var(--l-accent);
}

.ln-statement-lines .row.is-total {
  border-bottom: 0;
  border-top: 1px solid var(--l-border2);
  margin-top: -1px;
  font-size: 15px;
}

.ln-statement-lines .row.is-total b {
  font-size: 18px;
  font-weight: 700;
}

.ln-statement-stamp {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--l-ok) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--l-ok) 5%, transparent);
  font-size: 12.5px;
  color: var(--l-muted);
}

.ln-statement-stamp b {
  color: var(--l-text);
}

.ln-statement-stamp .seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--l-ok) 50%, transparent);
  border-radius: 50%;
  color: var(--l-ok);
  font-size: 12px;
}

/* ---------- bands (worth knowing / demo) ---------- */

.ln-band {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: var(--l-grid-gap);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: rgba(255, 255, 255, 0.015);
  padding: 20px 24px;
  color: var(--l-muted);
  font-size: 14.5px;
}

.ln-band b {
  color: var(--l-text);
}

.ln-badge {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 45%, transparent);
  border-radius: 999px;
  color: var(--l-accent);
  background: color-mix(in srgb, var(--l-accent) 7%, transparent);
  font: 700 10px/1.4 var(--l-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- dashboards ---------- */

.ln-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.ln-dash-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.ln-dash-copy h2 {
  font-size: clamp(30px, 4.2vw, 42px);
}

.ln-dash-copy > p {
  color: var(--l-muted);
  font-size: 16px;
}

.ln-dash-copy .ln-mechanics {
  margin-top: 8px;
}

.ln-panel {
  margin: 0;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}

.ln-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ln-panel-head .ln-chip {
  margin-left: auto;
}

.ln-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--l-accent) 6%, transparent);
  font: 600 11.5px/1.4 var(--l-mono);
  color: var(--l-accent-2);
}

.ln-scope-pill em {
  font-style: normal;
  color: var(--l-faint);
}

.ln-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.ln-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ln-rail-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--l-border-soft);
  border-radius: 999px;
  font: 600 10.5px/1.4 var(--l-mono);
  white-space: nowrap;
}

.ln-rail-row b {
  color: var(--l-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.ln-rail-row em {
  font-style: normal;
  color: var(--l-muted);
}

.ln-rail-row.is-flag {
  border-color: color-mix(in srgb, var(--l-ok) 35%, transparent);
  background: color-mix(in srgb, var(--l-ok) 5%, transparent);
}

.ln-rail-row.is-flag b {
  color: var(--l-ok);
}

.ln-panel-caption {
  color: var(--l-faint);
  font-size: 12.5px;
  border-top: 1px solid var(--l-border-soft);
  padding-top: 12px;
}

/* ---------- the example alert ---------- */

.ln-alertcard {
  margin: 0;
  border: 1px solid var(--l-border);
  border-left: 3px solid var(--l-accent);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface2), var(--l-bg2));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--l-accent) 6%, transparent);
  padding: 20px 24px;
  display: grid;
  gap: 15px;
}

.ln-alertcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-muted);
}

.ln-alertcard-head .ln-chip {
  margin-left: auto;
}

.ln-alertcard-head .sig {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--l-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--l-accent) 50%, transparent);
  animation: ln-pulse 2.4s ease-out infinite;
}

@keyframes ln-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--l-accent) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--l-accent) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--l-accent) 0%, transparent);
  }
}

.ln-alertcard-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ln-alertcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ln-alertcard-grid > div {
  border: 1px solid var(--l-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  padding: 10px 13px;
  display: grid;
  gap: 2px;
}

.ln-alertcard-grid span {
  color: var(--l-faint);
  font: 600 9.5px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ln-alertcard-grid b {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ln-alertcard-checks {
  display: grid;
  gap: 7px;
  list-style: none;
  color: var(--l-muted);
  font-size: 13.5px;
}

.ln-alertcard-checks li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ln-alertcard-checks li::before {
  content: "\2713";
  color: var(--l-ok);
  font-weight: 700;
  font-size: 12px;
}

.ln-alertcard-foot {
  border-top: 1px solid var(--l-border-soft);
  padding-top: 11px;
  color: var(--l-faint);
  font: 600 10.5px/1.5 var(--l-mono);
  letter-spacing: 0.05em;
}

/* ---------- the honesty boundary ---------- */

.ln-boundary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: var(--l-grid-gap);
  border: 1px solid color-mix(in srgb, var(--l-accent) 28%, transparent);
  border-radius: var(--l-radius);
  background: color-mix(in srgb, var(--l-accent) 4.5%, transparent);
  padding: 18px 22px;
  color: var(--l-muted);
  font-size: 14px;
}

.ln-boundary strong {
  color: var(--l-text);
}

.ln-boundary .icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 50%, transparent);
  border-radius: 50%;
  color: var(--l-accent);
  font: 700 14px/1 var(--l-mono);
}

/* ---------- clouds ---------- */

.ln-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ln-capability-grid > div {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.018);
}

.ln-capability-grid > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(transparent, var(--l-accent), transparent);
  opacity: 0.7;
}

.ln-capability-grid b {
  display: block;
  margin: 7px 0 4px;
  font-size: 16px;
}

.ln-capability-grid p {
  color: var(--l-muted);
  font-size: 13.5px;
}

.ln-clouds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--l-grid-gap);
}

.ln-cloud {
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  padding: 22px;
  display: grid;
  gap: 9px;
  align-content: start;
  transition: border-color 0.25s, transform 0.25s var(--l-ease);
}

.ln-cloud:hover {
  border-color: var(--l-border2);
  transform: translateY(-2px);
}

.ln-cloud-mark {
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 40%, transparent);
  border-radius: 8px;
  color: var(--l-accent);
  background: color-mix(in srgb, var(--l-accent) 6%, transparent);
  font: 700 11px/1.4 var(--l-mono);
  letter-spacing: 0.08em;
}

.ln-cloud h3 {
  font-size: 15.5px;
}

.ln-cloud p {
  color: var(--l-muted);
  font-size: 13.5px;
}

/* ---------- security ---------- */

.ln-secgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--l-grid-gap);
}

.ln-sec {
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  padding: var(--l-card-pad);
  display: grid;
  gap: 11px;
  align-content: start;
  transition: border-color 0.25s, transform 0.25s var(--l-ease);
}

.ln-sec:hover {
  border-color: var(--l-border2);
  transform: translateY(-2px);
}

.ln-sec-glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 35%, transparent);
  border-radius: 11px;
  color: var(--l-accent);
  background: color-mix(in srgb, var(--l-accent) 6%, transparent);
}

.ln-sec-glyph svg {
  width: 19px;
  height: 19px;
}

.ln-sec h3 {
  font-size: 16.5px;
}

.ln-sec p {
  color: var(--l-muted);
  font-size: 14.5px;
}

/* ---------- pricing ---------- */

.ln-price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--l-grid-gap);
  align-items: stretch;
}

.ln-price {
  border: 1px solid var(--l-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  padding: 30px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.ln-price.is-primary {
  border-color: color-mix(in srgb, var(--l-accent) 40%, transparent);
  background:
    radial-gradient(40rem 22rem at 0% 0%, color-mix(in srgb, var(--l-accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 0 70px color-mix(in srgb, var(--l-accent) 8%, transparent);
}

.ln-price h3 {
  font-size: 19px;
}

.ln-price > p {
  color: var(--l-muted);
  font-size: 14.5px;
}

.ln-price-figure {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--l-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ln-price-figure em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--l-faint);
  -webkit-text-fill-color: var(--l-faint);
  margin-left: 6px;
}

.ln-list {
  display: grid;
  gap: 9px;
  list-style: none;
  color: var(--l-muted);
  font-size: 14.5px;
}

.ln-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ln-list li::before {
  content: "\2713";
  color: var(--l-accent);
  font-weight: 700;
  font-size: 12px;
}

.ln-price-note {
  display: grid;
  gap: 8px;
  justify-items: start;
  border-top: 1px solid var(--l-border-soft);
  padding-top: 18px;
  margin-top: auto;
  font-size: 14px;
  color: var(--l-muted);
}

.ln-price-note b {
  color: var(--l-text);
}

/* ---------- FAQ drawers ---------- */

.ln-drawers {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.ln-drawers details {
  border: 1px solid var(--l-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  transition: border-color 0.25s;
}

.ln-drawers details[open] {
  border-color: var(--l-border2);
}

.ln-drawers summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.ln-drawers summary::-webkit-details-marker {
  display: none;
}

.ln-drawers summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--l-border);
  border-radius: 50%;
  color: var(--l-accent);
  font: 500 15px/1 var(--l-mono);
  transition: transform 0.25s var(--l-ease);
}

.ln-drawers details[open] summary::after {
  transform: rotate(45deg);
}

.ln-drawer-body {
  padding: 0 20px 18px;
  color: var(--l-muted);
  font-size: 14.5px;
  max-width: 74ch;
}

/* ---------- start / sign-in ---------- */

.ln-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--l-grid-gap);
  align-items: stretch;
}

.ln-signin,
.ln-start-card {
  border: 1px solid var(--l-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  padding: 28px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.ln-signin {
  border-color: color-mix(in srgb, var(--l-accent) 40%, transparent);
  background:
    radial-gradient(36rem 20rem at 100% 0%, color-mix(in srgb, var(--l-accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 0 70px color-mix(in srgb, var(--l-accent) 7%, transparent);
}

.ln-signin h3,
.ln-start-card h3 {
  font-size: 20px;
}

.ln-signin-lede {
  color: var(--l-muted);
  font-size: 14px;
}

.ln-signin-lede a,
.ln-signin-note a {
  color: var(--l-accent-2);
  font-weight: 600;
}

.ln-signin-lede a:hover,
.ln-signin-note a:hover {
  text-decoration: underline;
}

.ln-field {
  display: grid;
  gap: 7px;
}

.ln-field-label {
  font-weight: 600;
  font-size: 13px;
}

.ln-field-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--l-faint);
  font-size: 12px;
}

.ln-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--l-border);
  border-radius: 11px;
  background: var(--l-bg2);
  color: var(--l-text);
  font: 500 14px/1.4 var(--l-sans);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ln-input::placeholder {
  color: var(--l-faint);
}

.ln-input:focus {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-accent) 15%, transparent);
}

.ln-fallback {
  border-top: 1px solid var(--l-border-soft);
  padding-top: 12px;
}

.ln-fallback summary {
  list-style: none;
  cursor: pointer;
  color: var(--l-muted);
  font-weight: 600;
  font-size: 13px;
  transition: color 0.2s;
}

.ln-fallback summary::-webkit-details-marker {
  display: none;
}

.ln-fallback summary:hover {
  color: var(--l-text);
}

.ln-fallback form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Ruled off, so the fine print never reads as a continuation of the form. */
.ln-signin-note {
  border-top: 1px solid var(--l-border-soft);
  padding-top: 12px;
  color: var(--l-faint);
  font-size: 12.5px;
}

.ln-steps {
  display: grid;
  gap: 14px;
  list-style: none;
  counter-reset: ln-step;
  color: var(--l-muted);
  font-size: 14.5px;
}

/* Block + absolute chip, NOT a grid: an li holding `<b>…</b> loose text` in a
   grid would drop the text run into the 26px chip column, one word per line. */
.ln-steps li {
  counter-increment: ln-step;
  position: relative;
  padding-left: 39px;
}

.ln-steps li::before {
  content: counter(ln-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--l-accent) 40%, transparent);
  border-radius: 9px;
  color: var(--l-accent);
  font: 700 12px/1 var(--l-mono);
  background: color-mix(in srgb, var(--l-accent) 7%, transparent);
}

.ln-steps b {
  color: var(--l-text);
  font-weight: 600;
}

/* ---------- bridge + finale ---------- */

/* The platform hand-off wears the family colors: indigo and pink washes over
   the same card grammar, and the one indigo→pink button on the page. */
.ln-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  border: 1px solid #2b2f45;
  border-radius: 20px;
  background:
    radial-gradient(44rem 26rem at 0% 0%, color-mix(in srgb, var(--l-indigo) 13%, transparent), transparent 62%),
    radial-gradient(36rem 24rem at 100% 100%, color-mix(in srgb, var(--l-pink) 9%, transparent), transparent 60%),
    linear-gradient(180deg, var(--l-surface), var(--l-bg2));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 0 80px color-mix(in srgb, var(--l-indigo) 7%, transparent);
  padding: clamp(28px, 4vw, 44px);
}

.ln-bridge h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 14px 0;
}

.ln-bridge p {
  color: var(--l-muted);
  font-size: 15.5px;
}

.ln-bridge p strong {
  color: var(--l-text);
}

.ln-bridge-actions {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.ln-bridge-actions .ln-text-link {
  justify-self: center;
}

.ln-finale {
  text-align: center;
  padding: 26px var(--l-gutter) 10px;
}

.ln-finale h2 {
  font-size: clamp(32px, 4.6vw, 48px);
  max-width: 18ch;
  margin: 0 auto 18px;
}

.ln-finale p {
  color: var(--l-muted);
  font-size: 16px;
  max-width: 52ch;
  margin: 0 auto 26px;
}

.ln-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

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

.ln-foot {
  margin-top: var(--l-section-gap);
  border-top: 1px solid var(--l-border-soft);
  background: rgba(255, 255, 255, 0.012);
  padding: 44px 0 30px;
}

.ln-foot-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 40px;
}

.ln-foot-brand {
  display: grid;
  gap: 14px;
  justify-items: start;
  align-content: start;
}

.ln-foot-brand p {
  color: var(--l-faint);
  font-size: 13.5px;
  max-width: 40ch;
}

.ln-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ln-foot-col {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
}

.ln-foot-col h3 {
  color: var(--l-faint);
  font: 700 10.5px/1.4 var(--l-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ln-foot-col a {
  color: var(--l-muted);
  font-size: 13.5px;
  transition: color 0.2s;
}

.ln-foot-col a:hover {
  color: var(--l-text);
}

.ln-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 36px;
  border-top: 1px solid var(--l-border-soft);
  padding-top: 18px;
  color: var(--l-faint);
  font-size: 12.5px;
}

/* ---------- reveal-on-scroll ---------- */

/* Gated on the .js class so content is never hidden without the observer. */
.js .agent-landing .ln-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s var(--l-ease);
}

.js .agent-landing .ln-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* A gentle stagger inside card grids. */
.js .agent-landing .ln-durability-grid .ln-reveal:nth-child(2),
.js .agent-landing .ln-clouds .ln-reveal:nth-child(2),
.js .agent-landing .ln-secgrid .ln-reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.js .agent-landing .ln-durability-grid .ln-reveal:nth-child(3),
.js .agent-landing .ln-clouds .ln-reveal:nth-child(3),
.js .agent-landing .ln-secgrid .ln-reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.js .agent-landing .ln-clouds .ln-reveal:nth-child(4),
.js .agent-landing .ln-secgrid .ln-reveal:nth-child(4) {
  transition-delay: 0.24s;
}

/* Anchor jumps land revealed: a :target section never hides its content. */
.js .agent-landing section:target .ln-reveal {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 1100px) {
  html:not(.js) .ln-nav {
    margin-bottom: 0;
  }

  .js .agent-landing .ln-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--l-gutter) 18px;
    /* Fully opaque: at less the hero headline ghosts through the open menu. */
    background: var(--l-bg);
    border-bottom: 1px solid var(--l-border);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.22s, transform 0.22s;
  }

  .js .agent-landing .ln-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .js .agent-landing .ln-links a {
    padding: 11px 0;
    border-bottom: 1px solid var(--l-border-soft);
  }

  .js .agent-landing .ln-links .ln-btn {
    margin-top: 11px;
    border-bottom: 0;
  }

  .js .agent-landing .ln-nav-toggle {
    display: grid;
    place-items: center;
  }

  html:not(.js) .agent-landing .ln-nav-in {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    padding-block: 12px;
  }

  html:not(.js) .agent-landing .ln-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 18px;
  }

  .ln-clouds {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .agent-landing {
    --l-gutter: 24px;
    --l-section-gap: 72px;
    --l-head-gap: 30px;
    --l-grid-gap: 15px;
    --l-card-pad: 22px;
    --l-hero-top: 56px;
  }

  .ln-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 620px;
  }

  .ln-hero-copy {
    width: 100%;
    max-width: 48rem;
  }

  .ln-hero h1 {
    max-width: 16ch;
  }

  .ln-hero-art {
    object-position: 72% center;
  }

  .ln-hero-shade {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 92%, transparent) 0%, color-mix(in srgb, var(--l-shade) 76%, transparent) 48%, color-mix(in srgb, var(--l-shade) 20%, transparent) 82%),
      linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 24%, transparent), transparent 42%, color-mix(in srgb, var(--l-shade) 75%, transparent));
  }

  .ln-course-signals {
    display: none;
  }

  .ln-course-rail {
    width: calc(100% - (var(--l-gutter) * 2));
    grid-template-columns: repeat(2, 1fr);
  }

  .ln-course-rail article:nth-child(2) {
    border-right: 0;
  }

  .ln-course-rail article:nth-child(-n + 2) {
    border-bottom: 1px solid color-mix(in srgb, var(--l-border2) 22%, transparent);
  }

  .ln-stage-wrap {
    width: 100%;
    max-width: 690px;
    margin-top: 40px;
  }

  .ln-persona-card {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  }

  .ln-persona-copy {
    padding: 34px;
  }

  .ln-toast {
    left: auto;
    right: -8px;
    bottom: -18px;
  }

  .ln-split,
  .ln-split.is-rev,
  .ln-dash-grid,
  .ln-price-grid,
  .ln-start-grid,
  .ln-bridge {
    grid-template-columns: 1fr;
  }

  .ln-bridge-actions {
    justify-items: start;
  }

  .ln-bridge-actions .ln-text-link {
    justify-self: start;
  }

  .ln-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ln-hero {
    min-height: 0;
    padding-bottom: 18px;
  }

  .ln-hero-grid {
    min-height: 620px;
    align-items: center;
  }

  .ln-hero-copy {
    width: min(100%, 36rem);
    padding-block: 82px 56px;
  }

  .ln-hero h1 {
    max-width: 9ch;
    font-size: clamp(46px, 14vw, 64px);
  }

  .ln-hero-art {
    object-position: 100% center;
  }

  .ln-hero-shade {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 92%, transparent) 0%, color-mix(in srgb, var(--l-shade) 62%, transparent) 44%, color-mix(in srgb, var(--l-shade) 26%, transparent) 72%, color-mix(in srgb, var(--l-shade) 10%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 30%, transparent), color-mix(in srgb, var(--l-shade) 10%, transparent) 30%, transparent 46%, color-mix(in srgb, var(--l-shade) 84%, transparent) 96%);
  }

  .ln-course-rail {
    grid-template-columns: 1fr;
  }

  .ln-course-rail article,
  .ln-course-rail article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--l-border2) 22%, transparent);
  }

  .ln-course-rail article:last-child {
    border-bottom: 0;
  }

  .ln-preview-tabs {
    width: 100%;
    margin-left: 0;
  }

  .ln-preview-tabs button {
    flex: 1;
    padding-inline: 6px;
  }

  .ln-hero-actions,
  .ln-finale-actions {
    display: grid;
    justify-items: stretch;
    width: 100%;
  }

  .ln-hero-actions .ln-btn,
  .ln-finale-actions .ln-btn {
    width: min(100%, 340px);
  }

  .ln-window {
    padding: 14px 14px 12px;
  }

  .ln-kpis {
    grid-template-columns: 1fr;
  }

  .ln-mock-row {
    grid-template-columns: 66px 1fr auto;
  }

  .ln-mock-row .delta {
    display: none;
  }

  .ln-toast {
    display: none;
  }

  .ln-persona-card {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 18px;
  }

  .ln-persona-portrait img {
    min-height: 0;
    height: min(112vw, 500px);
    object-position: 52% 35%;
  }

  .ln-persona-portrait::after {
    background: linear-gradient(0deg, rgba(8, 9, 13, 0.82), transparent 42%);
  }

  .ln-persona-copy {
    padding: 30px 22px 34px;
  }

  .ln-persona-principles li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .ln-strip,
  .ln-durability-grid,
  .ln-capability-grid,
  .ln-clouds,
  .ln-secgrid {
    grid-template-columns: 1fr;
  }

  .ln-band,
  .ln-boundary {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .ln-alertcard-grid {
    grid-template-columns: 1fr;
  }

  .ln-rail {
    grid-template-columns: repeat(2, auto);
  }

  .ln-table-wrap {
    overflow-x: auto;
  }

  .ln-table {
    min-width: 420px;
  }

  .ln-statement-lines .row {
    grid-template-columns: 1fr auto;
  }

  .ln-statement-lines .src {
    display: none;
  }

  .ln-foot-main {
    grid-template-columns: 1fr;
  }

  .ln-foot-cols {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-landing *,
  .agent-landing *::before,
  .agent-landing *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .ln-toast {
    animation: none;
  }

  .ln-reveal,
  .js .agent-landing .ln-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 2026 landing polish ----------
   One cinematic first viewport, then a measured alternating product grid.
   These rules intentionally sit after the original component definitions so
   the signed-in application keeps its established UI untouched. (The polish
   token values are folded into the base block above.) */

.agent-landing main {
  row-gap: 0;
}

.agent-landing main > section:not(.ln-hero) {
  padding-block: clamp(72px, 8vw, 112px);
}

.ln-sect-a {
  background:
    radial-gradient(52rem 34rem at 84% 10%, color-mix(in srgb, var(--l-accent) 3.5%, transparent), transparent 68%),
    var(--l-bg);
}

.ln-sect-b {
  border-block: 1px solid color-mix(in srgb, var(--l-accent) 8%, transparent);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.012), transparent 42%),
    var(--l-bg2);
}

.ln-nav-in {
  width: min(100%, var(--l-maxw));
}

.ln-nav {
  background: linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 90%, transparent), color-mix(in srgb, var(--l-shade) 50%, transparent));
}

.ln-links {
  gap: clamp(18px, 2.2vw, 30px);
  font-size: 13px;
}

.ln-nav .ln-btn {
  min-height: 40px;
  padding-inline: 20px;
}

.ln-hero {
  min-height: clamp(760px, 92svh, 900px);
  padding: 64px 0 28px;
  align-content: space-between;
}

.ln-hero-art {
  object-position: 54% center;
  filter: saturate(0.9) contrast(1.05) brightness(0.94);
}

.ln-hero-shade {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 94%, transparent) 0%, color-mix(in srgb, var(--l-shade) 78%, transparent) 28%, color-mix(in srgb, var(--l-shade) 28%, transparent) 51%, color-mix(in srgb, var(--l-shade) 2%, transparent) 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 16%, transparent), transparent 46%, color-mix(in srgb, var(--l-shade) 78%, transparent));
}

.ln-hero-grid {
  min-height: 590px;
  grid-template-columns: minmax(440px, 0.92fr) minmax(380px, 1.08fr);
  gap: clamp(36px, 5vw, 78px);
}

.ln-hero-copy {
  gap: 20px;
  max-width: 590px;
  /* Top padding clears the 64px overlay nav plus breathing room, so the
     REQUIRED eyebrow kicker never rides under the nav even when a tall
     (3–4 line) H1 pushes the centered copy block upward. */
  padding-block: 104px 36px;
}

.ln-hero h1 {
  max-width: none;
  font-size: clamp(54px, 5.5vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.052em;
}

.ln-hero-line,
.ln-hero-accent {
  display: block;
}

.ln-hero-accent {
  white-space: nowrap;
}

.ln-hero-sub {
  max-width: 39ch;
  color: color-mix(in srgb, var(--l-text) 76%, transparent);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.68;
}

.ln-hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  margin-top: 8px;
}

.ln-hero .ln-btn-lg {
  width: auto;
  min-width: 148px;
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 11px;
  font-size: 14px;
}

.ln-course-signals {
  display: grid;
  align-content: center;
  justify-content: start;
  gap: 12px;
  padding-left: clamp(0px, 4vw, 54px);
}

.ln-course-signal,
.ln-course-signal.is-memory,
.ln-course-signal.is-tools,
.ln-course-signal.is-context,
.ln-course-signal.is-outcomes {
  position: static;
  width: 230px;
  min-height: 52px;
  gap: 13px;
  padding: 8px 0 8px 15px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--l-accent) 54%, transparent);
  border-radius: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 50%, transparent), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ln-course-signal > span {
  width: 27px;
  height: auto;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--l-accent) 82%, transparent);
  font: 650 10px/1 var(--l-mono);
  letter-spacing: 0.08em;
  box-shadow: none;
}

.ln-course-signal b {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.ln-course-signal small {
  color: color-mix(in srgb, var(--l-text) 62%, transparent);
  font-size: 11px;
}

.ln-course-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-color: color-mix(in srgb, var(--l-accent) 22%, transparent);
  border-radius: 14px;
  color: var(--l-text);
  background: color-mix(in srgb, var(--l-bg) 76%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.035);
}

.ln-course-rail article {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  padding: 17px 18px;
  border-color: color-mix(in srgb, var(--l-accent) 12%, transparent);
}

.ln-course-index {
  color: color-mix(in srgb, var(--l-accent) 72%, transparent);
  font: 650 10px/1.5 var(--l-mono);
  letter-spacing: 0.08em;
}

.ln-course-rail b {
  font-size: 12.5px;
  letter-spacing: 0;
}

.ln-course-rail small {
  color: var(--l-faint);
  font-size: 11px;
  line-height: 1.42;
}

.ln-persona > .ln-wrap {
  width: min(100%, 1220px);
}

.ln-persona-card {
  grid-template-columns: minmax(390px, 0.94fr) minmax(0, 1.06fr);
  min-height: 560px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--l-accent) 6.5%, transparent), transparent 32%),
    var(--l-bg2);
  box-shadow: 0 40px 100px -54px rgba(0, 0, 0, 0.92);
}

.ln-persona-portrait img {
  min-height: 560px;
}

.ln-persona-copy {
  gap: 19px;
  padding: clamp(42px, 5vw, 70px);
}

.ln-persona-copy h2 {
  max-width: 12ch;
  font-size: clamp(36px, 3.7vw, 48px);
  line-height: 1.02;
}

.ln-persona-copy > p {
  max-width: 48ch;
  line-height: 1.7;
}

.ln-persona-mark {
  border: 1px solid color-mix(in srgb, var(--l-accent) 42%, transparent);
  color: var(--l-accent);
  background: color-mix(in srgb, var(--l-accent) 8%, transparent);
}

.ln-persona-mark .ln-beacon-mark {
  flex: none;
  transform: scale(0.58);
  transform-origin: center;
}

.ln-sect-split > .ln-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(52px, 7vw, 96px);
}

.ln-sect-flip > .ln-wrap > .ln-section-head {
  order: 2;
}

.ln-sect-flip > .ln-wrap > *:not(.ln-section-head) {
  order: 1;
}

.ln-section-head {
  max-width: 590px;
  margin-bottom: 0;
  gap: 18px;
}

.ln-section-head h2 {
  max-width: 14ch;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.ln-section-head p {
  max-width: 55ch;
  color: var(--l-muted);
  font-size: 15.5px;
  line-height: 1.72;
}

.ln-solo,
.ln-solo.is-narrow,
.ln-drawers {
  width: 100%;
  max-width: none;
}

.ln-table-card,
.ln-statement,
.ln-panel,
.ln-alertcard,
.ln-capability-grid > div,
.ln-sec,
.ln-price,
.ln-signin,
.ln-drawers details {
  border-color: var(--l-border);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.026), transparent 54%), var(--l-surface);
  box-shadow: 0 28px 80px -52px rgba(0, 0, 0, 0.96);
}

.ln-table-card,
.ln-statement,
.ln-panel,
.ln-alertcard {
  padding: clamp(22px, 2.6vw, 30px);
}

.ln-capability-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}

.ln-capability-grid > div {
  padding: 24px 26px;
}

.ln-secgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ln-sec {
  min-height: 218px;
  padding: 22px;
}

.ln-sect-full > .ln-wrap {
  /* Standalone grid: full sections need not also declare ln-sect-split. */
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 44px;
}

/* Any content block — canonical or bespoke — sits below the full-width head.
   (Order ties between multiple content blocks resolve by DOM order.) */
.ln-sect-full > .ln-wrap > :not(.ln-section-head) {
  order: 2;
}

.ln-sect-full .ln-section-head {
  order: 1;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  column-gap: clamp(56px, 8vw, 112px);
  align-items: end;
}

.ln-sect-full .ln-section-head .ln-eyebrow {
  grid-column: 1 / -1;
}

.ln-sect-full .ln-section-head h2 {
  max-width: 12ch;
}

.ln-sect-full .ln-section-head p {
  max-width: 54ch;
  justify-self: end;
  padding-bottom: 4px;
}

.ln-sect-full .ln-secgrid {
  order: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ln-sect-full .ln-sec {
  min-height: 100%;
  padding: 24px;
}

.ln-sect-full .ln-capability-grid {
  order: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ln-sect-full .ln-drawers {
  order: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px 14px;
}

.ln-sect-full .ln-drawers details {
  min-width: 0;
}

.ln-drawer-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.ln-price-grid {
  gap: 14px;
}

.ln-price {
  padding: 26px;
}

.ln-drawers {
  gap: 8px;
}

.ln-drawers summary {
  padding: 16px 18px;
  font-size: 14px;
}

.ln-signin {
  padding: clamp(26px, 3vw, 36px);
}

.ln-foot {
  margin-top: 0;
  background: var(--l-bg);
}

@media (max-width: 1100px) {
  .ln-hero-grid {
    grid-template-columns: minmax(420px, 600px) minmax(0, 1fr);
  }

  .ln-course-signals {
    display: none;
  }

  .ln-course-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ln-course-rail article:nth-child(2) {
    border-right: 0;
  }

  .ln-course-rail article:nth-child(-n + 2) {
    border-bottom: 1px solid color-mix(in srgb, var(--l-accent) 12%, transparent);
  }

  .ln-sect-split > .ln-wrap {
    grid-template-columns: minmax(280px, 0.8fr) minmax(440px, 1.2fr);
    gap: 42px;
  }

  .ln-section-head h2 {
    font-size: clamp(32px, 4.2vw, 42px);
  }

  .ln-sect-full > .ln-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ln-sect-full .ln-secgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ln-sect-full > .ln-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 900px) {
  .ln-hero-grid {
    grid-template-columns: 1fr;
  }

  .ln-hero-copy {
    max-width: 540px;
  }

  /* One column means a ~50-80% slice of the landscape art: aim it at the
     lighthouse (right ~15% of the frame) instead of the empty sky beside it. */
  .ln-hero-art {
    object-position: 88% center;
  }

  .ln-hero-shade {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 94%, transparent) 0%, color-mix(in srgb, var(--l-shade) 78%, transparent) 46%, color-mix(in srgb, var(--l-shade) 20%, transparent) 85%),
      linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 14%, transparent), transparent 42%, color-mix(in srgb, var(--l-shade) 82%, transparent));
  }

  .ln-persona-card {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  }

  .ln-sect-split > .ln-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ln-sect-flip > .ln-wrap > .ln-section-head {
    order: 1;
  }

  .ln-sect-flip > .ln-wrap > *:not(.ln-section-head) {
    order: 2;
  }

  .ln-section-head,
  .ln-section-head p {
    max-width: 680px;
  }

  .ln-section-head h2 {
    max-width: 16ch;
  }
}

@media (max-width: 760px) {
  .ln-sect-full .ln-section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ln-sect-full .ln-section-head .ln-eyebrow {
    grid-column: auto;
  }

  .ln-sect-full .ln-section-head p {
    justify-self: start;
  }

  .ln-sect-full .ln-capability-grid,
  .ln-sect-full .ln-drawers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .agent-landing main > section:not(.ln-hero) {
    padding-block: 64px;
  }

  .ln-hero {
    min-height: 0;
  }

  /* A phone shows only a ~quarter-width slice of the hero art. Pin it to the
     right edge so the lighthouse fills the frame, and thin the scrim's right
     side so the tower reads through it — the left stays dark for the copy. */
  .ln-hero-art {
    object-position: 100% center;
  }

  .ln-hero-shade {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--l-shade) 92%, transparent) 0%, color-mix(in srgb, var(--l-shade) 62%, transparent) 44%, color-mix(in srgb, var(--l-shade) 26%, transparent) 72%, color-mix(in srgb, var(--l-shade) 10%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--l-shade) 30%, transparent), color-mix(in srgb, var(--l-shade) 10%, transparent) 30%, transparent 46%, color-mix(in srgb, var(--l-shade) 84%, transparent) 96%);
  }

  .ln-hero-grid {
    min-height: 600px;
  }

  .ln-hero-copy {
    gap: 18px;
    padding-block: 86px 40px;
  }

  .ln-hero h1 {
    font-size: clamp(46px, 13vw, 62px);
  }

  .ln-hero-actions {
    display: flex;
    width: auto;
  }

  .ln-hero-actions .ln-btn {
    width: auto;
    min-width: 136px;
    padding-inline: 18px;
  }

  .ln-course-rail article {
    padding: 15px 16px;
  }

  .ln-persona-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ln-persona-portrait img {
    min-height: 0;
    height: min(112vw, 500px);
  }

  .ln-secgrid,
  .ln-price-grid {
    grid-template-columns: 1fr;
  }

  .ln-sect-full .ln-section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ln-sect-full .ln-section-head .ln-eyebrow {
    grid-column: auto;
  }

  .ln-sect-full .ln-section-head p {
    justify-self: start;
  }

  .ln-sect-full .ln-secgrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .ln-hero-accent {
    white-space: normal;
  }

  .ln-hero-actions {
    display: grid;
    width: 100%;
  }

  .ln-hero-actions .ln-btn {
    width: 100%;
  }

  .ln-course-rail {
    grid-template-columns: 1fr;
  }

  .ln-course-rail article,
  .ln-course-rail article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--l-accent) 12%, transparent);
  }

  .ln-course-rail article:last-child {
    border-bottom: 0;
  }
}

/* ---------- shell ----------
   The kit gives `.view` `overflow-y: auto` but nothing bounds its height, so
   the whole document scrolls instead: on a long dashboard the nav rail, the
   workspace switcher and the page title all scroll off the top, and you lose
   your place. Pin the shell to the viewport and let the view be the one
   scroller — the arrangement `.view` was already written for. The mobile


/* ---------- landing sign-in notices ---------- */
.ln-signin-alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
  font-size: 13.5px;
  line-height: 1.5;
}

#signin-form .ln-signin-alert {
  margin: 10px 0 0;
}

/* Progressive enhancement: preview tabs are JS-driven. */
html:not(.js) .ln-preview-tabs {
  display: none;
}

/* ============================================================================
 * Agent theme registry — THE per-agent palettes, all in one place.
 *
 * A page declares <section class="agent-landing" data-agent="finn"> and gets
 * its colors from here. Add a new agent by adding a block; never fork the
 * component rules above. Themes override COLOR only — structure (spacing,
 * radii, type scale) is identical across the family on purpose.
 *
 * Neutrals are hue-cast toward each agent's accent (warm for Finn, green for
 * Cassandra, plum for Joy…) exactly as the original hand-built pages did.
 * `--l-ink` is the text color used ON the accent (CTA labels, chips): dark
 * ink on bright accents (amber, mint, teal, rose), near-white on deep ones
 * (indigo, violet, purple, red).
 * ==========================================================================*/

/* Finn — amber. The reference theme; identical to the defaults above. */
.agent-landing[data-agent="finn"] {
  --l-accent: #fbbf24;
}

/* Sage — the family pink over a pink-cast charcoal. */
.agent-landing[data-agent="sage"] {
  --l-bg: #0a080a;
  --l-bg2: #0f0c10;
  --l-surface: #151018;
  --l-surface2: #1b141e;
  --l-border: #33222e;
  --l-border2: #5c3049;
  --l-border-soft: #241a22;
  --l-text: #fdf7fb;
  --l-muted: #c1b6bd;
  --l-muted-bright: #e9dfe6;
  --l-faint: #948a91;
  --l-shade: #050405;
  --l-accent: #f472b6;
  --l-accent-2: #f9a8d4;
  --l-accent-deep: #db2777;
  --l-ink: #380319;
  --l-grad-cta: linear-gradient(145deg, #db2777, #f472b6 58%, #f9a8d4);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #f9a8d4 55%, #db2777);
}

/* Quill — family indigo with a teal counterpoint (palette preserved from the
   deployed quill.zimac.ai sheet). Light ink: the indigo CTA carries white. */
.agent-landing[data-agent="quill"] {
  --l-bg: #080a10;
  --l-bg2: #0b0d14;
  --l-surface: #11141d;
  --l-surface2: #171a26;
  --l-border: #292d3a;
  --l-border2: #3c4253;
  --l-border-soft: #1e2230;
  --l-text: #f1f1f5;
  --l-muted: #a2a4b2;
  --l-muted-bright: #dfe0ea;
  --l-faint: #7f8391;
  --l-shade: #030409;
  --l-accent: #6c63ff;
  --l-accent-2: #9f98ff;
  --l-accent-deep: #5eead4;
  --l-ink: #ffffff;
  /* The deployed quill sheet's winning (tail-block) gradients: a pure indigo
     CTA ramp, and body-text gradient ending on indigo — not the teal-led
     pair its earlier base block declared. */
  --l-grad-cta: linear-gradient(145deg, #5148d8, #6c63ff 58%, #8a83ff);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #b9b5ff 55%, #6c63ff);
}

/* Cassandra — emerald over a green-cast vault dark. */
.agent-landing[data-agent="cassandra"] {
  --l-bg: #080d0b;
  --l-bg2: #0c1410;
  --l-surface: #0e1713;
  --l-surface2: #121d18;
  --l-border: #20342a;
  --l-border2: #345744;
  --l-border-soft: #182720;
  --l-text: #f0f7f3;
  --l-muted: #a0b2aa;
  --l-muted-bright: #d7e5de;
  --l-faint: #7d8f86;
  --l-shade: #030504;
  --l-accent: #34d399;
  --l-accent-2: #6ee7b7;
  --l-accent-deep: #059669;
  --l-ink: #04281c;
  --l-grad-cta: linear-gradient(145deg, #059669, #34d399 58%, #6ee7b7);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #6ee7b7 55%, #059669);
}

/* Kai — platform blue over a deep infrastructure navy. */
.agent-landing[data-agent="kai"] {
  --l-bg: #070d16;
  --l-bg2: #0b1420;
  --l-surface: #101a28;
  --l-surface2: #152235;
  --l-border: #22364f;
  --l-border2: #3a5b7c;
  --l-border-soft: #1a2a3d;
  --l-text: #eff6ff;
  --l-muted: #a5b4c7;
  --l-muted-bright: #dbeafe;
  --l-faint: #7f91a8;
  --l-shade: #03070d;
  --l-accent: #60a5fa;
  --l-accent-2: #93c5fd;
  --l-accent-deep: #3b82f6;
  --l-ink: #071a33;
  --l-grad-cta: linear-gradient(145deg, #3b82f6, #60a5fa 58%, #93c5fd);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #93c5fd 55%, #3b82f6);
}

/* Joy — purple over aubergine. Light ink on the deep-purple CTA. */
.agent-landing[data-agent="joy"] {
  --l-bg: #0b0710;
  --l-bg2: #100a16;
  --l-surface: #17101e;
  --l-surface2: #1e1527;
  --l-border: #392745;
  --l-border2: #634173;
  --l-border-soft: #241831;
  --l-text: #fff8ff;
  --l-muted: #c4b5c9;
  --l-muted-bright: #e7dcea;
  --l-faint: #94879a;
  --l-shade: #050308;
  --l-accent: #c084fc;
  --l-accent-2: #d8b4fe;
  --l-accent-deep: #9333ea;
  --l-ink: #2b0a4d;
  --l-grad-cta: linear-gradient(145deg, #9333ea, #c084fc 58%, #d8b4fe);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #d8b4fe 55%, #9333ea);
}

/* Cody — teal over blue-charcoal. */
.agent-landing[data-agent="cody"] {
  --l-bg: #090b11;
  --l-bg2: #0d1017;
  --l-surface: #0f131c;
  --l-surface2: #141925;
  --l-border: #252c3d;
  --l-border2: #34405a;
  --l-border-soft: #1b2130;
  --l-text: #f5f7fb;
  --l-muted: #a5adbd;
  --l-muted-bright: #dde2ec;
  --l-faint: #7e8798;
  --l-shade: #04050a;
  --l-accent: #2dd4bf;
  --l-accent-2: #5eead4;
  --l-accent-deep: #0f766e;
  --l-ink: #042f2a;
  --l-grad-cta: linear-gradient(145deg, #0f766e, #2dd4bf 58%, #5eead4);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #5eead4 55%, #14b8a6);
}

/* Franz — relay orange over warm charcoal. */
.agent-landing[data-agent="franz"] {
  --l-bg: #0b0806;
  --l-bg2: #100c09;
  --l-surface: #16100c;
  --l-surface2: #1c1510;
  --l-border: #33241a;
  --l-border2: #5c3d24;
  --l-border-soft: #241a13;
  --l-text: #fff8f0;
  --l-muted: #c2b7ac;
  --l-muted-bright: #e9ded4;
  --l-faint: #96897d;
  --l-shade: #050403;
  --l-accent: #fb923c;
  --l-accent-2: #fdba74;
  --l-accent-deep: #ea580c;
  --l-ink: #2b1204;
  --l-alert: #f87171;
  --l-grad-cta: linear-gradient(145deg, #ea580c, #fb923c 58%, #fdba74);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #fdba74 55%, #ea580c);
}

/* Daphne — violet over near-black plum. Light ink on the deep-violet CTA. */
.agent-landing[data-agent="daphne"] {
  --l-bg: #09080d;
  --l-bg2: #0d0b13;
  --l-surface: #12101a;
  --l-surface2: #17141f;
  --l-border: #292337;
  --l-border2: #3b3150;
  --l-border-soft: #1d1928;
  --l-text: #f8f5ff;
  --l-muted: #aaa3b8;
  --l-muted-bright: #ded8e9;
  --l-faint: #756e83;
  --l-shade: #040308;
  --l-accent: #a78bfa;
  --l-accent-2: #c4b5fd;
  --l-accent-deep: #7c3aed;
  --l-ink: #1e0a45;
  --l-grad-cta: linear-gradient(145deg, #7c3aed, #a78bfa 58%, #c4b5fd);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #c4b5fd 55%, #7c3aed);
}

/* Paige — signal red over pager black (palette preserved from the deployed
   paige.zimac.ai sheet, including its bespoke CTA/text gradients). */
.agent-landing[data-agent="paige"] {
  --l-bg: #050506;
  --l-bg2: #09090b;
  --l-surface: #0d0d10;
  --l-surface2: #121114;
  --l-border: #2a1b20;
  --l-border2: #5f252c;
  --l-border-soft: #21171a;
  --l-text: #f7f5f6;
  --l-muted: #aaa3a6;
  --l-muted-bright: #ded9db;
  --l-faint: #777174;
  --l-shade: #030304;
  --l-accent: #f0444f;
  --l-accent-2: #ff626b;
  --l-accent-deep: #cf2635;
  --l-ink: #fff7f7;
  --l-ok: #2dd4a7;
  --l-alert: #f59e0b;
  --l-grad-cta: linear-gradient(125deg, #e62f3d, #f34d58 56%, #d94980);
  --l-grad-text: linear-gradient(110deg, #df4d88 8%, #f04c54 52%, #ff745f);
}

/* Drew — studio magenta over plum. Light ink on the deep-magenta CTA. */
.agent-landing[data-agent="drew"] {
  --l-bg: #09080d;
  --l-bg2: #0f0c13;
  --l-surface: #151119;
  --l-surface2: #1c1621;
  --l-border: #302538;
  --l-border2: #5c3c66;
  --l-border-soft: #221a29;
  --l-text: #f7f1f7;
  --l-muted: #aaa0ad;
  --l-muted-bright: #ddd2df;
  --l-faint: #7f7583;
  --l-shade: #050308;
  --l-accent: #d946ef;
  --l-accent-2: #f472d0;
  --l-accent-deep: #a21caf;
  --l-ink: #380b3d;
  --l-grad-cta: linear-gradient(145deg, #a21caf, #d946ef 58%, #f472d0);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #f472d0 55%, #a21caf);
}

/* Iris — editorial rose, joining the family's dark canvas. */
.agent-landing[data-agent="iris"] {
  --l-bg: #0b0708;
  --l-bg2: #100b0c;
  --l-surface: #161011;
  --l-surface2: #1c1416;
  --l-border: #332225;
  --l-border2: #5c3038;
  --l-border-soft: #241a1c;
  --l-text: #fff7f8;
  --l-muted: #c2b4b7;
  --l-muted-bright: #e9dcdf;
  --l-faint: #94868a;
  --l-shade: #050304;
  --l-accent: #fb7185;
  --l-accent-2: #fda4af;
  --l-accent-deep: #e11d48;
  --l-ink: #38040f;
  --l-grad-cta: linear-gradient(145deg, #e11d48, #fb7185 58%, #fda4af);
  --l-grad-text: linear-gradient(115deg, #fff 10%, #fda4af 55%, #e11d48);
}