/* ============================================================
   Landing page (D-37). Loaded only by _LandingLayout, so the
   app shell doesn't pay for marketing styling it never renders.

   Built from the design tokens — no literal colours — with one
   deliberate exception, the .lp-agents band, which is always
   dark in both themes and therefore needs its own palette. Its
   literals are declared once at the top of that block.

   The source design is a single desktop composition with no
   breakpoints (its hero is a fixed two-column grid). Every
   media query below is ours: at 960px the split collapses to
   one column, at 760px the page matches the app's own small
   breakpoint.
   ============================================================ */

.lp {
  /* app.css pins html/body to height:100% so the app shell can scroll its own
     panes. A marketing page wants the ordinary thing: one long document, the
     viewport scrolling it. Height auto (not overflow-y:auto) — making body a
     scroll container of its own nests a second scroller inside the viewport,
     which reports a phantom horizontal overflow on narrow screens. */
  height: auto;
  min-height: 100%;
  scroll-behavior: smooth;

  /* CONTRAST. --ds-text-faint and the chip inks used to fail AA, and this file
     worked around both locally. Both are now fixed in the tokens themselves, so
     the small print is back on the design's own faint and the chips share
     --ds-chip-ink with .ds-pill — this page no longer has a private answer to a
     question the design system answers.

     The eyebrow is the one that stays: --ds-accent on a light background is
     3.3:1, fine for the 56px accent word in the h1 (large text needs only 3:1)
     but not for a 12px label. Darkening the brand orange app-wide is a bigger
     decision than this page should make, so it steps to --ds-accent-press only
     where the background is light. */
  --lp-fine: var(--ds-text-faint);
  --lp-eyebrow-color: var(--ds-accent-press);
}

:root[data-theme="dark"] .lp { --lp-eyebrow-color: var(--ds-accent); }

@media (prefers-reduced-motion: reduce) {
  .lp { scroll-behavior: auto; }
}

.lp-container {
  max-width: 1180px;
  margin: 0 auto;
}

/* Keyboard users land here first; visible only when focused. */
.lp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--ds-z-toast);
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  font-weight: 600;
}

.lp-skip:focus { left: var(--ds-space-4); top: var(--ds-space-4); }

/* ---------- sticky nav ---------- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-nav);
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
}

.lp-nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--ds-space-8);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
}

.lp-nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.lp-nav__links a {
  color: var(--ds-text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.lp-nav__links a:hover { color: var(--ds-text); }

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

/* ---------- shared section furniture ---------- */
.lp-section { padding: 72px var(--ds-space-8); }

.lp-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-eyebrow-color);
}

.lp-h2 {
  margin: var(--ds-space-3) 0 0;
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 660px;
  text-wrap: pretty;
}

.lp-sub {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ds-text-muted);
  max-width: 620px;
  text-wrap: pretty;
}

.lp-label {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-fine);
}

/* ---------- hero (left-split) ---------- */
.lp-hero { padding: 80px var(--ds-space-8) 72px; }

.lp-hero__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(400px, 1.25fr) minmax(380px, 0.85fr);
  gap: 56px;
  align-items: center;
}

.lp-hero__copy, .lp-hero__example { min-width: 0; }

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  padding: 5px 14px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.lp-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-agent);
}

.lp-badge__agent { color: var(--ds-agent); }
.lp-badge__sep { color: var(--ds-border-strong); }

.lp-h1 {
  margin: 22px 0 0;
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.lp-h1 em { font-style: normal; color: var(--ds-accent); }

.lp-lede {
  margin: var(--ds-space-5) 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ds-text-muted);
  max-width: 540px;
  text-wrap: pretty;
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-8);
}

.lp-fineprint {
  margin: 14px 0 0;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  color: var(--lp-fine);
}

.lp-works { margin-top: 44px; }

.lp-works__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) 22px;
  margin-top: 10px;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  color: var(--ds-text-muted);
}

/* The tabbed snippet. Fixed min-height so switching tabs doesn't reflow the
   hero — the three panels are different lengths. */
.lp-snippet { margin-top: var(--ds-space-4); min-height: 262px; }
.lp-snippet .ds-code { margin: 0; }

/* ---------- capture flow ---------- */
.lp-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--ds-space-5);
  margin-top: var(--ds-space-10);
}

.lp-flow__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lp-flow__col--sources { flex: 1 1 260px; min-width: 240px; }
.lp-flow__col--stack { flex: 1; display: flex; flex-direction: column; gap: var(--ds-space-3); }

.lp-flow__step {
  display: flex;
  align-items: stretch;
  gap: var(--ds-space-5);
  min-width: 0;
}

.lp-flow__step--lands { flex: 1.15 1 330px; min-width: 300px; }
.lp-flow__step--reads { flex: 1 1 270px; min-width: 260px; }

.lp-flow__arrow {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--ds-font-mono);
  font-size: 20px;
  color: var(--ds-text-faint);
}

.lp-source {
  flex: 1;
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  padding: 18px;
}

.lp-source__head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ds-accent);
}

.lp-source__name, .lp-read__name {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ds-text);
}

.lp-source p {
  margin: var(--ds-space-2) 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-text-muted);
}

.lp-lands { flex: 1; }

.lp-lands__title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.lp-lands__body {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

.lp-lands__body strong { color: var(--ds-text); font-weight: 600; }

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-4);
}

.lp-chip {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--ds-radius-full);
}

.lp-chip--ok { background: var(--ds-ok-tint); color: color-mix(in srgb, var(--ds-ok) var(--ds-chip-ink), black); }
.lp-chip--info { background: var(--ds-info-tint); color: color-mix(in srgb, var(--ds-info) var(--ds-chip-ink), black); }
.lp-chip--agent { background: var(--ds-agent-tint); color: color-mix(in srgb, var(--ds-agent) var(--ds-chip-ink), black); }

.lp-read {
  flex: 1;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-4) 18px;
  background: var(--ds-surface);
}

.lp-read__name--agent { color: var(--ds-agent); }

.lp-read p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.lp-read code {
  font-family: var(--ds-font-mono);
  font-size: 12px;
}

/* ---------- features grid ---------- */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ds-space-5);
  margin-top: 36px;
}

.lp-feature__icon { display: inline-flex; color: var(--ds-accent); }

.lp-feature__title {
  margin-top: var(--ds-space-3);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.lp-feature__body {
  margin: var(--ds-space-2) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

/* ---------- built for agents (always dark, both themes) ----------
   This band sits on --ds-code-bg, which is dark even in light theme (same
   rule as .ds-code). Theme-following text tokens would be unreadable on it
   in light mode, so the band carries its own always-light palette. These
   are the only literal colours in this file, and they are the design's. */
.lp-agents {
  --lp-agents-text: var(--ds-code-text);
  --lp-agents-muted: #9d9887;
  --lp-agents-faint: #6b665a;
  --lp-agents-chip: #c8c3b4;
  --lp-agents-accent: #a98bf0;   /* the agent violet, at dark-theme brightness */
  --lp-agents-ok: #9ece6a;
  --lp-agents-value: #e0af68;
  --lp-agents-line: rgba(255, 255, 255, 0.10);

  /* The band's background never follows the theme, so neither may the text on
     it — rebind the shared variables rather than out-specify the rules. */
  --lp-eyebrow-color: var(--lp-agents-accent);
  --lp-fine: var(--lp-agents-muted);

  padding: 88px var(--ds-space-8);
  background: var(--ds-code-bg);
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}

.lp-agents__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 56px;
  align-items: center;
}

.lp-agents__copy { min-width: 0; }
.lp-agents .lp-h2 { color: var(--lp-agents-text); }
.lp-agents .lp-sub { color: var(--lp-agents-muted); }

.lp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-8);
}

.lp-tool {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  padding: 5px 9px;
  border: 1px solid var(--lp-agents-line);
  border-radius: var(--ds-radius-md);
  color: var(--lp-agents-chip);
}

.lp-terminal {
  min-width: 0;
  border: 1px solid var(--lp-agents-line);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-6);
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 2;
  color: var(--lp-agents-text);
  overflow-x: auto;
}

.lp-terminal .c { color: var(--lp-agents-faint); }
.lp-terminal .out { color: var(--lp-agents-accent); }
.lp-terminal .in { color: var(--lp-agents-ok); }
.lp-terminal .v { color: var(--lp-agents-value); }

/* ---------- how it works ---------- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ds-space-6);
  margin-top: 36px;
}

.lp-step { border-top: 2px solid var(--ds-accent); padding-top: var(--ds-space-5); }

.lp-step__n {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  font-weight: 700;
  /* 13px is normal-size text, so it needs 4.5:1 — the plain accent gives 3.3:1
     on a light background. (The accent word in the h1 keeps the bright ember:
     at 56px it is large text, where 3:1 is the bar.) */
  color: var(--lp-eyebrow-color);
}

.lp-step__t {
  margin-top: var(--ds-space-2);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.lp-step__d {
  margin: var(--ds-space-2) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

.lp-step__m {
  margin: var(--ds-space-3) 0 0;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  color: var(--lp-fine);
  /* These carry a full API URL built from the request host, so their length is
     not knowable here — a deployment on a long hostname must wrap, not push the
     page sideways. Same reason inline <code> below. */
  overflow-wrap: anywhere;
}

.lp :is(p, li) code { overflow-wrap: anywhere; }

/* ---------- pricing ----------
   Two cards that have to read as a pair. The rows that repeat across them — price,
   lead line, limit row — carry a min-height rather than the design's fixed height:
   the composition is one desktop width, where every one of those is a single line,
   and a fixed 46px silently clips the lead as soon as the card narrows. min-height
   keeps the alignment wherever the text does fit and gives way where it doesn't. */
.lp-plans {
  display: grid;
  /* min() so a track can never be wider than the space it has: a plain
     minmax(340px, 1fr) overflows a 375px viewport, and this page is tested for
     not scrolling sideways on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--ds-space-6);
  margin-top: var(--ds-space-10);
  align-items: stretch;
}

.lp-plan {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.lp-plan__name {
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.lp-plan__price {
  margin-top: 18px;
  min-height: 52px;
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-plan__note {
  margin-top: 10px;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  color: var(--lp-fine);
}

.lp-plan__lead {
  margin: 18px 0 0;
  min-height: 46px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

.lp-limits {
  display: grid;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-5);
}

/* Dashed, like .lp-source: these are quantities being quoted, not surfaces. */
.lp-limit {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-space-4);
  min-height: 64px;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
}

.lp-limit__n {
  font-family: var(--ds-font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-accent);
  text-align: right;
  /* The two numbers sit above each other in a fixed-width column; without this the
     digits of "100" and "1,000,000" land on different rhythms. */
  font-variant-numeric: tabular-nums;
}

.lp-limit__d {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.lp-meter { margin-top: 22px; }

.lp-meter__track {
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-3);
  overflow: hidden;
}

/* 4% of the million, which is what the "≈ 40k" beside it says. Move one, move both. */
.lp-meter__fill {
  width: 4%;
  height: 100%;
  background: var(--ds-accent);
}

/* Scale has no ceiling to fill, so its bar runs the full width as a dashed rule
   that reads as "continues" rather than "full". */
.lp-meter--open .lp-meter__track { background: var(--ds-accent-tint); }

.lp-meter--open .lp-meter__fill {
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--ds-accent) 0 8px, transparent 8px 14px);
}

.lp-meter__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  color: var(--lp-fine);
}

.lp-plan__features {
  display: grid;
  gap: 10px;
  margin-top: var(--ds-space-6);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.lp-plan__feature { display: flex; gap: 10px; }

.lp-plan__mark { font-family: var(--ds-font-mono); color: var(--ds-accent); }

.lp-plan__mark--ok { color: var(--ds-ok); }

/* margin-top:auto pins the CTA to the bottom of whichever card is taller, so the
   two buttons line up however far the copy above them runs. */
.lp-plan__foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}

.lp-plan__fine {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  color: var(--lp-fine);
  text-align: center;
}

.lp-plan__over {
  margin: 28px 0 0;
  max-width: 720px;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--lp-fine);
}

.lp-plan__over a { color: var(--ds-link); text-decoration: none; }
.lp-plan__over a:hover { text-decoration: underline; }

/* ---------- closing CTA ---------- */
.lp-cta { padding: 88px var(--ds-space-8) 96px; }

.lp-cta__inner { max-width: 720px; margin: 0 auto; text-align: center; }

.lp-cta__line {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.lp-cta__sub {
  margin: var(--ds-space-4) auto 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ds-text-muted);
  text-wrap: balance;
}

.lp-cta .lp-cta-row { justify-content: center; }

/* ---------- footer ---------- */
.lp-footer { border-top: 1px solid var(--ds-border); }

.lp-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--ds-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-5) var(--ds-space-8);
}

.lp-footer__tag, .lp-footer__legal {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  color: var(--lp-fine);
}

.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-5);
  margin-left: auto;
  font-size: 13px;
}

.lp-footer__links a { color: var(--ds-text-muted); text-decoration: none; }
.lp-footer__links a:hover { color: var(--ds-text); }

/* ---------- responsive ----------
   The hero and agents bands are the only fixed splits; below 960px there is
   no honest way to keep two 400px columns, so both stack. */
@media (max-width: 960px) {
  .lp-hero__grid,
  .lp-agents__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-10);
  }

  .lp-hero__grid { align-items: start; }
  .lp-lede, .lp-h2, .lp-sub { max-width: none; }

  /* The plan cards stay two-up all the way down to 760px, and by here their limit
     rows no longer have the width for a 132px number column beside a label that
     still reads as a sentence. Shrink both rather than add a breakpoint of its own. */
  .lp-limit { grid-template-columns: 104px minmax(0, 1fr); gap: var(--ds-space-3); }
  .lp-limit__n { font-size: 17px; }
}

@media (max-width: 760px) {
  .lp-nav__inner { padding: 0 var(--ds-space-5); gap: var(--ds-space-3); }

  /* The anchor links are the first thing to go — the sections are still
     reachable by scrolling, and Sign in / Start trapping are the point. */
  .lp-nav__links { display: none; }

  .lp-hero { padding: 48px var(--ds-space-5) 40px; }
  .lp-section { padding: 48px var(--ds-space-5); }
  .lp-agents { padding: 56px var(--ds-space-5); }
  .lp-cta { padding: 56px var(--ds-space-5) 64px; }
  .lp-footer__inner { padding: var(--ds-space-6) var(--ds-space-5); }

  .lp-h2 { font-size: 28px; }
  .lp-works { margin-top: var(--ds-space-8); }

  /* The flow reads top-to-bottom on a phone, so the ← → arrows would point
     the wrong way. Drop them rather than rotate them. */
  .lp-flow__arrow { display: none; }
  .lp-flow__step { flex-direction: column; }

  .lp-footer__links { margin-left: 0; }

  /* A single column of full-width buttons beats two cramped ones. */
  .lp-cta-row .ds-btn { flex: 1 1 auto; justify-content: center; }

  .lp-plan { padding: var(--ds-space-5); }

  /* "1,000,000+" at mono 20px is wider than a phone leaves for a number column with
     a readable label beside it, so the two stack — same reason the flow arrows go. */
  .lp-limit { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lp-limit__n { text-align: left; font-size: 20px; }
}