/* ============================================================================
   Verity · landing.css — index.html only.
   The one page where the design IS the product, so it gets its own rules.
   ========================================================================== */

.lp { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-6); }

.lp-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--chrome); color: var(--ink-on-chrome);
  border-bottom: 1px solid var(--chrome-line);
}
.lp-nav-in { display: flex; align-items: center; gap: var(--s-4); height: 60px; }
.lp-nav a { color: var(--ink-on-chrome-2); text-decoration: none; font-size: var(--t-body);
  font-weight: 500; white-space: nowrap; }
.lp-nav a:hover { color: #fff; }
.lp-nav .btn { flex: none; }
/* Below 900 the section anchors are dropped rather than allowed to wrap
   inside a fixed-height bar. The page still scrolls to all of them, and the
   two links that matter — every screen, and the prototype — stay. */
@media (max-width: 899px) {
  .lp-nav .nav-anchor { display: none; }
  .lp-nav-in { gap: var(--s-3); }
}
@media (max-width: 479px) {
  .lp-nav-in { gap: var(--s-2); }
  .lp-nav .brand { font-size: var(--t-body); }
}

/* ── Hero. The number is the headline. ─────────────────────────────────── */
.lp-hero { padding: var(--s-16) 0 var(--s-12); }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-meta); font-weight: 600; color: var(--brand);
  background: var(--brand-wash); border: 1px solid var(--brand-line);
  padding: 6px 12px; border-radius: var(--r-full); margin-bottom: var(--s-6);
}
/* Deliberately NOT mono. Mono carries values that are read aloud, compared
   column-to-column, or typed into another system. A headline statistic is
   none of those, and a monospaced comma takes a full cell — "930 , 000". */
.lp-number {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(3.25rem, 11vw, 6rem); line-height: .95;
  letter-spacing: -0.045em; color: var(--ink);
  font-variant-numeric: lining-nums;
}
.lp-h1 {
  font-size: clamp(1.75rem, 4.2vw, 3rem); line-height: 1.1;
  letter-spacing: -0.03em; font-weight: 700; margin-top: var(--s-5);
  max-width: 24ch; text-wrap: balance;
}
.lp-lede {
  font-size: var(--t-body-lg); line-height: var(--lh-prose);
  color: var(--ink-2); max-width: 62ch; margin-top: var(--s-6);
}
.lp-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }

/* ── The two-column argument. Not a card grid. ─────────────────────────── */
.lp-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-12); align-items: start; padding: var(--s-12) 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 899px) { .lp-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }
.lp-h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 700; max-width: 22ch; text-wrap: balance;
}
.lp-body { color: var(--ink-2); line-height: var(--lh-prose); max-width: 60ch; }
.lp-body p + p { margin-top: var(--s-4); }
.lp-body strong { color: var(--ink); font-weight: 600; }

/* Quotes from the independent evaluation — the sharpest thing on the page. */
.lp-quotes { display: flex; flex-direction: column; gap: var(--s-4); }
.lp-quote {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-5);
}
.lp-quote q {
  display: block; font-size: var(--t-body-lg); line-height: var(--lh-prose);
  color: var(--ink); quotes: '“' '”';
}
.lp-quote cite {
  display: block; margin-top: var(--s-3); font-style: normal;
  font-size: var(--t-meta); color: var(--ink-3);
}

/* ── Module grid. Deliberately dense and typographic, not icon cards. ──── */
.lp-modules {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.lp-mod {
  background: var(--surface); padding: var(--s-5);
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  transition: background var(--d-hover) var(--ease-out);
}
.lp-mod:hover { background: var(--surface-2); }
.lp-mod-n { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }
.lp-mod-t { font-weight: 600; color: var(--ink); }
.lp-mod-d { font-size: var(--t-meta); color: var(--ink-3); line-height: var(--lh-ui); }

/* ── Demo path table ───────────────────────────────────────────────────── */
.lp-path { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lp-step {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--surface);
  border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background var(--d-hover) var(--ease-out);
}
.lp-step:last-child { border-bottom: none; }
.lp-step:hover { background: var(--surface-2); }
.lp-step-t { font-family: var(--font-mono); font-weight: 600; color: var(--ink-3); font-size: var(--t-meta); }
.lp-step-h { font-weight: 600; color: var(--ink); }
.lp-step-d { font-size: var(--t-meta); color: var(--ink-3); line-height: var(--lh-ui); margin-top: 2px; }
.lp-step.is-pause { background: var(--brand-wash); }
.lp-step.is-pause:hover { background: var(--brand-wash); filter: brightness(.99); }
@media (max-width: 599px) {
  .lp-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

.lp-foot {
  border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-12);
  color: var(--ink-3); font-size: var(--t-meta); line-height: var(--lh-prose);
}

/* ============================================================================
   Landing page — index.html.

   The one surface in this project where design IS the product rather than
   serving it, so it gets a different register: a dark hero on the app's own
   chrome, real product fragments rendered from real components, and an
   editorial rhythm of alternating bands rather than a grid of cards.

   The product visuals are NOT screenshots. They are the same components the
   application uses, rendered from the same data, at real size. A fragment of
   the real thing beats a shrunken picture of it.
   ========================================================================== */

/* ── Bands ───────────────────────────────────────────────────────────────── */
.band { padding: var(--s-16) 0; border-top: 1px solid var(--line); }
.band-tight { padding: var(--s-12) 0; }
.band-dark {
  background: var(--chrome); color: var(--ink-on-chrome); border-top: 0;
}
.band-dark .lp-h2, .band-dark .kicker { color: #fff; }
.band-dark .lp-body, .band-dark p { color: var(--ink-on-chrome-2); }
.band-dark .lp-body strong, .band-dark strong { color: #fff; }

.kicker {
  font-size: var(--t-meta); font-weight: 600; color: var(--brand);
  margin-bottom: var(--s-3); display: block;
}
.band-dark .kicker { color: var(--brand-ring); }
.lp-h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2;
  letter-spacing: -0.015em; font-weight: 700; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--chrome); color: var(--ink-on-chrome);
  position: relative; overflow: hidden;
  padding: var(--s-16) 0 var(--s-16);
}
/* Atmosphere, not decoration: a dot field and one soft brand glow behind the
   product, so the light UI card reads as lit rather than pasted on. */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px,
    rgba(255,255,255,.055) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute;
  top: -180px; right: -140px; width: 780px; height: 620px;
  background: radial-gradient(closest-side,
    oklch(0.62 0.16 288 / 26%), transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--s-12); align-items: center;
}
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .hero { padding: var(--s-12) 0; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-meta); font-weight: 600;
  color: var(--brand-ring);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--chrome-line);
  padding: 6px 12px; border-radius: var(--r-full); margin-bottom: var(--s-6);
}
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06;
  letter-spacing: -0.033em; font-weight: 700; color: #fff;
  max-width: 15ch; text-wrap: balance;
}
.hero-lede {
  font-size: var(--t-body-lg); line-height: var(--lh-prose);
  color: var(--ink-on-chrome-2); max-width: 54ch; margin-top: var(--s-5);
}
.hero-lede strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
.hero-note {
  margin-top: var(--s-5); font-size: var(--t-meta); color: var(--ink-on-chrome-2);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}

/* Staggered entrance. The content is laid out visible; the animation only
   moves it into place, and reduced-motion collapses the duration to nothing. */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }
.rise { animation: riseIn 520ms var(--ease-out) both; }
.rise-1 { animation-delay: 40ms; }
.rise-2 { animation-delay: 100ms; }
.rise-3 { animation-delay: 160ms; }
.rise-4 { animation-delay: 220ms; }

/* ── Product frame. A window around real UI, so a fragment of the app reads
   as the app rather than as an illustration. ────────────────────────────── */
.frame {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.42), 0 4px 14px rgba(0,0,0,.28);
}
.frame-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.frame-dots { display: flex; gap: 5px; flex: none; }
.frame-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong); display: block;
}
.frame-title {
  font-size: var(--t-micro); color: var(--ink-3); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.frame-body { padding: var(--s-4); }
.frame-body > * + * { margin-top: var(--s-3); }
.frame-tilt { transform: perspective(1600px) rotateY(-3deg) rotateX(1.4deg); }
@media (max-width: 1023px) { .frame-tilt { transform: none; } }

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.trust {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: var(--s-5) 0;
}
.trust-in { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.trust-label {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase; flex: none;
}
.trust-item {
  font-size: var(--t-meta); font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.trust-item .ic { color: var(--ink-3); }

/* ── Numbered flow. A real sequence, so numbers earn their place here. ───── */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
@media (max-width: 899px) { .flow { grid-template-columns: minmax(0, 1fr); } }
.flow-step { padding: var(--s-6) var(--s-6) var(--s-6) 0; position: relative; }
.flow-step + .flow-step { padding-left: var(--s-6); border-left: 1px solid var(--line); }
@media (max-width: 899px) {
  .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
.flow-n {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 700;
  color: var(--brand); margin-bottom: var(--s-3); display: block;
}
.flow-step h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.flow-step p { color: var(--ink-2); line-height: var(--lh-prose); font-size: var(--t-body); }

/* ── Feature rows. Alternating and asymmetric — not a card grid. ─────────── */
.feat {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-12); align-items: center;
}
.feat + .feat { margin-top: var(--s-16); }
.feat.is-flipped { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.feat.is-flipped .feat-copy { order: 2; }
.feat.is-flipped .feat-visual { order: 1; }
@media (max-width: 1023px) {
  .feat, .feat.is-flipped { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .feat.is-flipped .feat-copy { order: 1; }
  .feat.is-flipped .feat-visual { order: 2; }
  .feat + .feat { margin-top: var(--s-12); }
}
.feat-copy .lp-h2 { margin-bottom: var(--s-4); }
.feat-list { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.feat-list li { display: flex; gap: var(--s-3); align-items: flex-start;
  color: var(--ink-2); line-height: var(--lh-prose); }
.feat-list .ic { flex: none; margin-top: 3px; color: var(--brand); }
.band-dark .feat-list li { color: var(--ink-on-chrome-2); }
.band-dark .feat-list .ic { color: var(--brand-ring); }

/* ── The three behaviours. Typographic, deliberately not cards. ──────────── */
.behaviours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
@media (max-width: 899px) { .behaviours { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
.behaviour { padding-top: var(--s-4); border-top: 2px solid var(--brand); }
.band-dark .behaviour { border-top-color: var(--brand-ring); }
.behaviour h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); letter-spacing: -0.015em; }
.behaviour p { line-height: var(--lh-prose); }
.behaviour-quote {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.05); border: 1px solid var(--chrome-line);
  border-radius: var(--r-md); font-size: var(--t-meta);
  color: var(--ink-on-chrome); line-height: var(--lh-prose);
}

/* ── The domain wall. Density as the argument. ───────────────────────────── */
.wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  /* Cells draw their own right and bottom edge rather than the grid showing
     through a gap — otherwise a partly-filled last row reads as a grey hole. */
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.wall-item { padding: var(--s-4); box-shadow: inset -1px -1px 0 var(--line); }
.wall-t { font-weight: 600; color: var(--ink); font-size: var(--t-body); }
.wall-d { font-size: var(--t-micro); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

/* ── Stat row ────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
@media (max-width: 899px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.stat-v {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
  font-variant-numeric: lining-nums;
}
.band-dark .stat-v { color: #fff; }
.stat-l { font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s-2);
  line-height: var(--lh-ui); }
.band-dark .stat-l { color: var(--ink-on-chrome-2); }

/* ── Closing call to action ──────────────────────────────────────────────── */
.cta-band {
  background: var(--chrome); color: var(--ink-on-chrome);
  border-radius: var(--r-lg); padding: var(--s-12) var(--s-10);
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; inset: auto -120px -220px auto;
  width: 620px; height: 480px;
  background: radial-gradient(closest-side, oklch(0.62 0.16 288 / 22%), transparent 72%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
@media (max-width: 599px) { .cta-band { padding: var(--s-8) var(--s-5); } }

/* The frame is a piece of the light workspace embedded in dark chrome, so it
   must reset the inherited chrome ink back to the workspace ramp. Without
   this, near-white body text lands on a white card and disappears. */
.frame, .band-dark .frame { color: var(--ink); }
.frame p, .frame .t-meta, .frame .ho-text,
.band-dark .frame p, .band-dark .frame .t-meta { color: var(--ink-2); }
.frame .ink-3, .frame .t-micro, .frame .ev-foot, .frame .funnel-step,
.band-dark .frame .ink-3, .band-dark .frame .t-micro { color: var(--ink-3); }
.frame .ink, .frame strong, .frame .finding-title, .frame .w-600, .frame .w-700,
.band-dark .frame strong { color: var(--ink); }
.frame .funnel-num { color: var(--brand); }