/* The public page. Tokens only — never a raw value, per CLAUDE.md §5.4.
   The two rules from the design system hold here too: colour is semantic, and
   anything the system worked out is set in mono. The demo rows below are the
   visual argument, so their evidence lines are mono exactly as in the app. */

.l-body {
  margin: 0;
  background: var(--k-paper);
  color: var(--k-ink);
  font: var(--k-text-body);
  font-family: var(--k-font);
  line-height: 1.5;
}

.l-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--k-space-4);
}

.l-word {
  font: var(--k-text-subtitle);
  font-family: var(--k-font);
  letter-spacing: var(--k-tracking-title);
  color: var(--k-ink);
  text-decoration: none;
}

.l-nav-links { display: flex; align-items: center; gap: var(--k-space-4); }

.l-nav-links a {
  color: var(--k-ink-2);
  text-decoration: none;
  font: var(--k-text-body);
  font-family: var(--k-font);
}

.l-nav-links a:hover { color: var(--k-ink); }
.l-nav-links a.k-btn--primary { color: var(--k-on-accent); }

.l-section {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--k-space-8) var(--k-space-4);
}

.l-section--tight { padding-top: var(--k-space-4); }

/* Hero -------------------------------------------------------------------- */

.l-hero { max-width: 44rem; }

.l-hero h1 {
  font-family: var(--k-font);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--k-tracking-display);
  text-wrap: balance;
  margin: 0 0 var(--k-space-4);
}

.l-lead {
  font-size: 1.0625rem;
  color: var(--k-ink-2);
  margin: 0 0 var(--k-space-6);
  text-wrap: pretty;
}

.l-cta { display: flex; align-items: center; gap: var(--k-space-3); flex-wrap: wrap; }

.l-cta-note {
  font: var(--k-text-small);
  font-family: var(--k-font);
  color: var(--k-ink-3);
}

/* Section headings -------------------------------------------------------- */

.l-kicker {
  font: var(--k-text-label);
  font-family: var(--k-font-mono);
  letter-spacing: var(--k-tracking-label);
  text-transform: uppercase;
  color: var(--k-ink-3);
  margin: 0 0 var(--k-space-2);
}

.l-section h2 {
  font: var(--k-text-title);
  font-family: var(--k-font);
  letter-spacing: var(--k-tracking-title);
  text-wrap: balance;
  margin: 0 0 var(--k-space-3);
  max-width: 34rem;
}

.l-section > p {
  color: var(--k-ink-2);
  max-width: 40rem;
  margin: 0 0 var(--k-space-6);
}

/* The demo — the visual argument ------------------------------------------ */

.l-demo {
  background: var(--k-surface);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius-panel);
  overflow: hidden;
}

.l-demo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--k-space-3) var(--k-space-4);
  border-bottom: 1px solid var(--k-rule);
  background: var(--k-surface-2);
  /* Wrap rather than clip: the panel hides overflow, so a shrunk flex item
     loses characters off the end instead of running to a second line. */
  flex-wrap: wrap;
}

.l-demo-title { font: var(--k-text-strong); font-family: var(--k-font); }

.l-demo-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) auto minmax(11rem, 2fr);
  gap: var(--k-space-4);
  align-items: center;
  padding: var(--k-space-3) var(--k-space-4);
  border-bottom: 1px solid var(--k-rule);
}

.l-demo-row:last-child { border-bottom: 0; }

.l-demo-name { font: var(--k-text-strong); font-family: var(--k-font); }

.l-demo-figure {
  font: var(--k-text-figure);
  font-family: var(--k-font-mono);
  color: var(--k-ink);
  text-align: right;
}

/* Evidence: mono, because the system worked it out. */
.l-why {
  font: var(--k-text-evidence);
  font-family: var(--k-font-mono);
  color: var(--k-ink-2);
}

/* Proportional to days_since / median — never to rank. */
.l-bar { height: 3px; border-radius: 2px; background: var(--k-rule); margin-top: var(--k-space-1); }
.l-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--k-signal); }

/* Tier 2 is a guess, not a measurement: no bar, quieter ink. */
.l-why--tier2 { color: var(--k-ink-3); }

/* Three-up ---------------------------------------------------------------- */

.l-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--k-space-4);
}

.l-card {
  background: var(--k-surface);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius-card);
  padding: var(--k-space-4);
}

.l-card h3 { font: var(--k-text-subtitle); font-family: var(--k-font); margin: 0 0 var(--k-space-2); }
.l-card p { color: var(--k-ink-2); margin: 0; }

.l-step {
  font: var(--k-text-label);
  font-family: var(--k-font-mono);
  letter-spacing: var(--k-tracking-label);
  color: var(--k-ink-3);
  display: block;
  margin-bottom: var(--k-space-2);
}

/* Pricing ----------------------------------------------------------------- */

.l-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--k-space-4); }

.l-plan {
  background: var(--k-surface);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius-card);
  padding: var(--k-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2);
}

.l-plan--featured { border-color: var(--k-action-border); background: var(--k-action-bg); }

.l-plan-name { font: var(--k-text-strong); font-family: var(--k-font); }

.l-plan-price {
  font-family: var(--k-font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--k-ink);
}

.l-plan-price small { font-size: var(--k-text-small); color: var(--k-ink-3); font-weight: 400; }

.l-plan-line { font: var(--k-text-evidence); font-family: var(--k-font-mono); color: var(--k-ink-2); }

/* Comparison and non-goals ------------------------------------------------ */

.l-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--k-space-2); }

.l-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--k-space-3);
  align-items: baseline;
  color: var(--k-ink-2);
}

.l-list b { color: var(--k-ink); font-weight: 600; }

.l-mark {
  font-family: var(--k-font-mono);
  font-size: var(--k-text-small);
  color: var(--k-ink-3);
}

.l-band {
  background: var(--k-surface);
  border-top: 1px solid var(--k-rule);
  border-bottom: 1px solid var(--k-rule);
}

.l-close { text-align: center; max-width: 34rem; margin: 0 auto; }
.l-close h2 { margin-left: auto; margin-right: auto; }
.l-close .l-cta { justify-content: center; }

/* Footer ------------------------------------------------------------------ */

.l-foot { border-top: 1px solid var(--k-rule); margin-top: var(--k-space-8); }

.l-foot-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--k-space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--k-space-4);
  flex-wrap: wrap;
  color: var(--k-ink-3);
  font: var(--k-text-small);
  font-family: var(--k-font);
}

@media (max-width: 40rem) {
  .l-hero h1 { font-size: 1.75rem; }
  .l-nav-links a:not(.k-btn) { display: none; }
  .l-demo-row { grid-template-columns: 1fr auto; }
  .l-demo-row .l-why { grid-column: 1 / -1; }
}