/* ══════════════════════════════════════════════════════════════════════════
   landing.css — the brand surface.

   A different register on purpose. Where the application is restrained and
   gets out of the way, this commits: drenched in ironbark olive-black, cut
   by citron, with Anybody carrying display type at a width solved to fill
   its measure. Same identity, louder voice.
   ══════════════════════════════════════════════════════════════════════════ */

.lp {
  background: var(--bark-deep);
  color: var(--on-bark);
  font-size: var(--t-16);
  line-height: 1.6;
}

.wrap { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 54rem); margin-inline: auto; }

/* ═══════════════════════════════════════════════════════ DISPLAY ══ */
/* Anybody's width axis is set by landing.js so each headline fills its
   measure exactly. The CSS only declares the starting point. */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  line-height: 0.95;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1.display { font-size: var(--d-1); }
h2.display { font-size: var(--d-2); letter-spacing: -0.024em; }
h3.display { font-size: var(--d-3); letter-spacing: -0.018em; }

/* Each fitted line is its own block and must never re-wrap: the width axis
   is solved so the line exactly fills its measure, and a sub-pixel rounding
   difference would otherwise break it onto two lines. Declared here rather
   than set from script, so it holds even before the solver has run. */
[data-fit-lines] .fit-line { display: block; white-space: nowrap; }

/* Without scripting the lines simply set at their natural width — still a
   correct headline, just not justified to the measure. */
.display[data-fit] { transition: font-variation-settings 200ms var(--ease-out); }

.lede {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: color-mix(in oklch, var(--on-bark) 78%, var(--bark));
}

/* ══════════════════════════════════════════════════════════ NAV ══ */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bark-deep) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklch, var(--on-bark) 12%, transparent);
}
.lp-nav > .wrap { display: flex; align-items: center; gap: var(--s-5); height: 4rem; }
.lp-brand {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--on-bark); text-decoration: none;
}
.lp-brand svg { width: 1.5rem; height: 1.5rem; }
.lp-brand b { font-size: var(--t-18); font-weight: 700; letter-spacing: -0.025em; }
.lp-nav-links { display: flex; gap: var(--s-5); margin-left: auto; }
.lp-nav-links a {
  font-size: var(--t-13);
  font-weight: 500;
  color: color-mix(in oklch, var(--on-bark) 72%, var(--bark));
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.lp-nav-links a:hover { color: var(--on-bark); }
@media (max-width: 56rem) { .lp-nav-links { display: none; } }

/* ═════════════════════════════════════════════════════════ HERO ══ */

.hero { position: relative; overflow: hidden; }

/* The ground: a faint measurement grid, because that is what this company
   actually deals in. Decoration that is of the domain rather than applied
   to it. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in oklch, var(--on-bark) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--on-bark) 5%, transparent) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(3.5rem, 9vh, 6.5rem);
}
@media (max-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--citron);
}
.kicker::before {
  content: '';
  width: 1.6rem; height: 1px;
  background: var(--citron);
}

.hero h1 { margin-top: var(--s-4); }
.hero .lede { margin-top: var(--s-5); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

.cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.875rem;
  padding: 0 var(--s-5);
  font-size: var(--t-15);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-3);
  border: 1px solid transparent;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.cta:active { transform: scale(0.98); }
.cta svg { width: 1.05rem; height: 1.05rem; }
.cta-primary { background: var(--citron); color: var(--on-citron); border-color: var(--citron-edge); }
.cta-primary:hover { background: color-mix(in oklch, var(--citron) 88%, var(--on-citron)); color: var(--on-citron); }
.cta-ghost {
  color: var(--on-bark);
  border-color: color-mix(in oklch, var(--on-bark) 28%, transparent);
}
.cta-ghost:hover { background: color-mix(in oklch, var(--on-bark) 8%, transparent); color: var(--on-bark); }

/* Facts under the hero, set as a line of type rather than a row of tiles
   with icons and gradients. Deliberately NOT the hero-metric template. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-6) var(--s-8);
  padding: var(--s-6) 0 var(--s-10);
  border-top: 1px solid color-mix(in oklch, var(--on-bark) 14%, transparent);
}
.hero-fact { max-width: 17rem; }
.hero-fact b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-21);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--citron);
}
.hero-fact span { display: block; margin-top: 0.15rem; font-size: var(--t-13);
  color: color-mix(in oklch, var(--on-bark) 66%, var(--bark)); }

/* ══════════════════════════════════════════════════ SPEC CARD ══ */
/* A light instrument panel on the dark ground. This is the product's own
   output, computed live — not a screenshot of it. */

.spec-card {
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--r-4);
  box-shadow: 0 2px 4px oklch(0 0 0/.2), 0 24px 60px oklch(0 0 0/.36);
  overflow: hidden;
  --draw-ink: var(--ink);
  --draw-dim: var(--ink-3);
  --draw-accent: var(--olive);
  --draw-tape: oklch(0.82 0.02 115);
}
.spec-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.spec-head .segmented { margin-left: auto; }
.spec-title { font-size: var(--t-12); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.spec-figure { display: grid; place-items: center; padding: var(--s-5) var(--s-4) var(--s-2); min-height: 14.5rem; }
.spec-figure svg { max-height: 14rem; width: auto; }
.spec-controls { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.spec-readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.spec-readout > div { padding: var(--s-3); border-right: 1px solid var(--line); }
.spec-readout > div:last-child { border-right: 0; }
.spec-readout dt { font-size: var(--t-11); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); }
.spec-readout dd { margin-top: 0.15rem; font-family: var(--font-mono); font-size: var(--t-16);
  letter-spacing: -0.02em; }

/* The CSV row, shown as the file it will become. */
.spec-file {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--sunken);
  overflow-x: auto;
}
.spec-file pre {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.7;
  white-space: pre;
  color: var(--ink-2);
}
.spec-file .hdr { color: var(--ink-3); }
.spec-file .chg { color: var(--ink); background: var(--citron-dim); border-radius: 2px; }

.stepper { display: flex; align-items: center; gap: var(--s-2); }
.stepper .step {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex: none;
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  background: var(--bg);
  color: var(--ink);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.stepper .step:hover { background: var(--panel); }
.stepper .step:active { transform: scale(0.92); }
.stepper .step svg { width: 0.9rem; height: 0.9rem; }
.stepper .read { font-family: var(--font-mono); font-size: var(--t-15); min-width: 5.5rem; text-align: center; }

/* ════════════════════════════════════════════════════════ BANDS ══ */

.band { padding: var(--band) 0; position: relative; }
.band-light { background: var(--bg); color: var(--ink); }
.band-mid { background: var(--bark); }
.band + .band-light, .band-light + .band { border-top: 1px solid color-mix(in oklch, var(--on-bark) 10%, transparent); }

.band-light .lede { color: var(--ink-2); }
.band-light .kicker { color: var(--olive); }
.band-light .kicker::before { background: var(--olive); }

.band h2.display { max-width: 20ch; }
.band .lede { margin-top: var(--s-5); }

/* ─── the versus pair: what a catalogue assumes vs what this needs ─── */

.versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-10);
}
.vs {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--surface);
}
.vs-tag {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vs h3 { margin-top: var(--s-2); font-size: var(--t-21); letter-spacing: -0.02em; }
.vs p { margin-top: var(--s-3); font-size: var(--t-14); color: var(--ink-2); max-width: 40ch; }
.vs-code {
  margin-top: var(--s-5);
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.vs-right { border-color: var(--citron-edge); background: var(--bg); }
.vs-right .vs-code { background: var(--sunken); }

/* ─────────────────────────────────── the thread: a real sequence ─── */

.thread { display: grid; gap: 0; margin-top: var(--s-10); counter-reset: step; }
.thread-step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-top: 1px solid color-mix(in oklch, var(--on-bark) 13%, transparent);
  align-items: start;
}
.thread-step:last-child { border-bottom: 1px solid color-mix(in oklch, var(--on-bark) 13%, transparent); }
.thread-step .no {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  color: var(--citron);
  padding-top: 0.2rem;
}
.thread-step h3 { font-size: var(--t-18); letter-spacing: -0.015em; }
.thread-step .where {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: color-mix(in oklch, var(--on-bark) 58%, var(--bark));
}
.thread-step p { font-size: var(--t-14); color: color-mix(in oklch, var(--on-bark) 74%, var(--bark)); }
.thread-step .moves {
  margin-top: var(--s-3);
  padding-left: var(--s-4);
  border-left: 1px solid var(--citron);
  font-size: var(--t-13);
  color: var(--citron);
}
@media (max-width: 56rem) {
  .thread-step { grid-template-columns: 2rem minmax(0, 1fr); }
  .thread-step > :last-child { grid-column: 2; }
}

/* ─────────────────────────────────────────── what it catches ─── */

.catches { display: grid; gap: var(--s-4); margin-top: var(--s-10); }
.catch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--surface);
  align-items: center;
}
.catch .rule {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 1.7;
  color: var(--ink);
}
.catch .rule b { color: var(--danger); font-weight: 500; }
.catch p { font-size: var(--t-14); color: var(--ink-2); }
.catch p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 52rem) { .catch { grid-template-columns: minmax(0, 1fr); } }

/* ───────────────────────────────────────────── the module map ─── */

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-6) var(--s-8);
  margin-top: var(--s-10);
}
.module h3 {
  font-size: var(--t-13);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--citron);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid color-mix(in oklch, var(--on-bark) 16%, transparent);
}
.module ul { list-style: none; padding: 0; margin-top: var(--s-3); }
.module li + li { margin-top: 0.1rem; }
.module a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 0.28rem 0;
  font-size: var(--t-14);
  color: color-mix(in oklch, var(--on-bark) 82%, var(--bark));
  text-decoration: none;
  transition: color var(--t-fast) ease, padding-left var(--t-fast) var(--ease-out);
}
.module a:hover { color: var(--citron); padding-left: 0.3rem; }
.module a .n { font-family: var(--font-mono); font-size: var(--t-11); opacity: 0.55; }

/* ═══════════════════════════════════════════════════════ FOOTER ══ */

.lp-foot {
  padding: var(--s-12) 0 var(--s-8);
  background: var(--bark-deep);
  border-top: 1px solid color-mix(in oklch, var(--on-bark) 14%, transparent);
}
.lp-foot .cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-8);
}
.lp-foot h4 { font-size: var(--t-12); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: color-mix(in oklch, var(--on-bark) 55%, var(--bark)); }
.lp-foot ul { list-style: none; padding: 0; margin-top: var(--s-3); }
.lp-foot li + li { margin-top: 0.35rem; }
.lp-foot a { font-size: var(--t-14); color: color-mix(in oklch, var(--on-bark) 80%, var(--bark)); text-decoration: none; }
.lp-foot a:hover { color: var(--citron); }
.lp-foot .small { font-size: var(--t-12); color: color-mix(in oklch, var(--on-bark) 52%, var(--bark)); line-height: 1.7; }
.foot-rule { margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid color-mix(in oklch, var(--on-bark) 12%, transparent); }

/* ═══════════════════════════════════════════════════ ENTRANCE ══ */
/* One orchestrated page-load, staggered. Content is visible by default and
   the animation only enhances it — a reveal that gates visibility on a
   class ships blank in headless renderers and on hidden tabs. */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 620ms var(--ease-out) backwards; }
  .rise-1 { animation-delay: 40ms; }
  .rise-2 { animation-delay: 110ms; }
  .rise-3 { animation-delay: 180ms; }
  .rise-4 { animation-delay: 250ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
  }
}