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

   Different register to the app. Where the product is restrained and gets out
   of the way, this page has to argue. So: committed colour, a display face
   with real width, and one idea per fold.

   The organising image is LIGHT THROUGH A WINDOW COVERING — the thing the
   client's product actually does. Deep moss surfaces cut by bands of daylight,
   with the app's own dimension-line language drawn over them.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --l-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Deep moss — the surface the brand lives on. Not black; the hue is the
     product's own green pushed almost to ink. */
  --deep:      oklch(0.185 0.026 150);
  --deep-2:    oklch(0.235 0.030 150);
  --deep-line: oklch(0.320 0.034 150);

  /* Daylight — what falls through the covering */
  --day:       oklch(0.985 0.004 95);
  --day-2:     oklch(0.930 0.008 95);
  --day-dim:   oklch(0.760 0.012 120);

  /* Brass — where the light lands */
  --brass:     oklch(0.800 0.135 74);
  /* The light-surface brass has to be much darker than the dark-surface one:
     as text on near-white it needs 4.5:1, which the bright value misses. */
  --brass-2:   oklch(0.465 0.115 62);

  --leaf:      oklch(0.760 0.120 148);
}

/* ==========================================================================
   Base
   ========================================================================== */

.lp {
  background: var(--day);
  color: var(--deep);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

.lp ::selection { background: var(--brass); color: var(--deep); }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}
.wrap-narrow { max-width: 940px; }

.band { padding-block: clamp(4.5rem, 11vh, 9rem); position: relative; }
.band-dark { background: var(--deep); color: var(--day); }
.band-dark h2, .band-dark h3 { color: var(--day); }

/* Light through slats: the section divider is a set of daylight bands, not a
   1px line. Same idea as the app's ruler rule, told louder. */
.slats {
  height: 9px;
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0 1px,
    transparent 1px 5px
  );
  opacity: 0.11;
}

/* ==========================================================================
   Type
   ========================================================================== */

.lp h1, .lp h2, .lp h3, .lp .display {
  font-family: var(--l-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* Capped well below the old 5.6rem. The previous scale pushed the headline to
   four lines and drove the call to action off the first screen, which is the
   one thing a hero must never do. */
.lp h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.9rem);
  font-stretch: 106%;
  font-weight: 800;
  line-height: 1.04;
}
.lp h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-stretch: 104%;
}
.lp h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: -0.018em; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  max-width: 62ch;
  color: color-mix(in oklch, currentColor 78%, transparent);
}

.kicker {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-2);
  display: block;
  margin-bottom: 1.1rem;
}
.band-dark .kicker { color: var(--brass); }

.num-xl {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--deep);
  color: var(--day);
  position: relative;
  overflow: hidden;
  padding-block: 0 clamp(2.25rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
}

/* Daylight falling across the hero from the top right, as if through the
   covering being drawn. */
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -30% auto auto;
  width: 90vw; height: 120vh;
  background:
    repeating-linear-gradient(
      177deg,
      oklch(0.80 0.135 74 / 0.10) 0 3px,
      transparent 3px 22px
    );
  transform: rotate(-8deg);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.15rem;
  margin-bottom: clamp(1.75rem, 4.5vh, 3.25rem);
  border-bottom: 1px solid var(--deep-line);
  flex-wrap: wrap;
}
.hero-brand {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--day); text-decoration: none;
}
.hero-brand svg { width: 30px; height: 30px; color: var(--leaf); }
.hero-brand b { font-family: var(--l-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
.hero-brand span { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.12em;
  color: var(--day-dim); text-transform: uppercase; display: block; margin-top: 1px; }

.hero-nav-links { display: flex; gap: 1.5rem; margin-left: auto; flex-wrap: wrap; }
.hero-nav-links a {
  color: var(--day-dim); text-decoration: none; font-size: 0.85rem;
  transition: color 140ms ease;
}
.hero-nav-links a:hover { color: var(--day); }
@media (max-width: 720px) { .hero-nav-links { display: none; } }

/* Top-aligned, not centred. The drawing card is much taller than the copy, and
   centring left the headline floating in the middle of the fold with dead
   space above it. Aligning the tops gives the composition a crisp edge. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.hero-copy { padding-top: 0.35rem; }
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .hero-copy { padding-top: 0; }
}

/* The grid column already sizes the headline to two lines; only the body copy
   needs its own measure. `ch` here would resolve against the body font, not
   the display face, so it is the wrong unit for the heading. */
.hero-copy .hero-sub { max-width: 44ch; }

.hero h1 { color: var(--day); }

/* The live measurement reads as a spec line, not a second headline. It was
   competing with the h1 at display size and pushing the fold; as a mono strip
   it does more work in a fifth of the height. */
.spec-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.15rem;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--day) 62%, transparent);
}
.spec-line .size { color: var(--brass); font-weight: 600; font-size: 1.16em; }
.spec-line .seg { white-space: nowrap; }
.spec-line .sep { color: var(--deep-line); }

.hero-sub {
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.62;
  color: color-mix(in oklch, var(--day) 72%, transparent);
  margin-top: 1.15rem;
}

.cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* Once they stack, ragged widths read as an accident. Make them match. */
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta { justify-content: center; }
}

.cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  height: 52px; padding: 0 1.5rem;
  border-radius: 4px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease, transform 140ms cubic-bezier(0.23,1,0.32,1);
}
.cta:active { transform: scale(0.975); }
.cta svg { width: 17px; height: 17px; }
.cta-primary { background: var(--leaf); color: var(--deep); }
.cta-primary:hover { background: oklch(0.83 0.13 148); }
.cta-ghost { border-color: var(--deep-line); color: var(--day); }
.cta-ghost:hover { border-color: var(--day-dim); background: oklch(1 0 0 / 0.045); }

/* ---- The live drawing ---------------------------------------------------- */

.drawing-card {
  border: 1px solid var(--deep-line);
  border-radius: 6px;
  background: oklch(1 0 0 / 0.022);
  padding: clamp(1rem, 1.6vw, 1.35rem);
}
/* Cap the drawing so the card cannot outgrow the first screen on a laptop.
   preserveAspectRatio letterboxes it rather than distorting. */
.drawing-card svg { width: 100%; height: auto; max-height: min(38vh, 300px); }

.dim-ctl {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin-bottom: 0.9rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--deep-line);
}
.dim-ctl label {
  font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--day-dim); margin-right: auto;
}
.step {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-content: center;
  border: 1px solid var(--deep-line); border-radius: 4px;
  background: transparent; color: var(--day);
  cursor: pointer; font-size: 1.15rem; line-height: 1;
  transition: background-color 140ms ease, border-color 140ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1);
}
.step:hover { background: oklch(1 0 0 / 0.06); border-color: var(--day-dim); }
.step:active { transform: scale(0.94); }
.step:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.dim-read {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em;
  min-width: 6.5ch; text-align: center; color: var(--brass);
}

.readout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.1rem;
  margin-top: 0.95rem; padding-top: 0.95rem;
  border-top: 1px solid var(--deep-line);
}
@media (max-width: 520px) { .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.readout div { min-width: 0; }
.readout dt {
  font-size: 0.7rem; color: var(--day-dim); letter-spacing: 0.03em;
  margin-bottom: 3px;
}
.readout dd {
  margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 1.02rem; font-weight: 500; letter-spacing: -0.015em;
}
.readout dd.hl { color: var(--brass); }

.readout-note {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--deep-line);
  font-size: 0.78rem; line-height: 1.55;
  color: color-mix(in oklch, var(--day) 66%, transparent);
}
.readout-note strong { color: var(--brass); }
.readout-note em { font-style: normal; color: var(--day); }

/* Recomputed values flash rather than animating their digits — moving numbers
   are noise, a settling background is information. */
@keyframes lp-flash {
  from { background-color: oklch(0.80 0.135 74 / 0.22); }
  to   { background-color: transparent; }
}
.flashed { animation: lp-flash 420ms cubic-bezier(0.23,1,0.32,1); border-radius: 3px; }

/* ==========================================================================
   Argument: fixed vs parametric
   ========================================================================== */

.versus {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.4rem; margin-top: 3rem;
}
.vs-card {
  border: 1px solid oklch(0.86 0.006 120); border-radius: 6px;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: oklch(1 0 0);
}
.vs-card.is-wrong { background: oklch(0.975 0.010 40); border-color: oklch(0.88 0.030 40); }
.vs-card.is-right { background: var(--deep); border-color: var(--deep); color: var(--day); }
.vs-card.is-right h3 { color: var(--day); }
.vs-tag {
  font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.9rem; display: block;
}
.is-wrong .vs-tag { color: oklch(0.52 0.16 32); }
.is-right .vs-tag { color: var(--brass); }
.vs-card p { font-size: 0.92rem; line-height: 1.6; margin-top: 0.7rem;
  color: color-mix(in oklch, currentColor 76%, transparent); }
.vs-code {
  font-family: var(--font-data); font-size: 0.78rem; line-height: 1.75;
  margin-top: 1.1rem; padding: 0.9rem 1rem; border-radius: 4px;
  white-space: pre; overflow-x: auto;
}
.is-wrong .vs-code { background: oklch(1 0 0); color: oklch(0.40 0.02 40); }
.is-right .vs-code { background: oklch(1 0 0 / 0.05); color: var(--leaf); }

/* ==========================================================================
   The thread
   ========================================================================== */

.thread-list { margin-top: 3.5rem; display: grid; gap: 0; }

.thread-step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--deep-line);
  align-items: start;
}
.thread-step:last-child { border-bottom: 1px solid var(--deep-line); }
@media (max-width: 860px) {
  .thread-step { grid-template-columns: 3rem minmax(0, 1fr); }
  .thread-step .thread-fig { grid-column: 1 / -1; }
}

.thread-n {
  font-family: var(--font-data); font-size: 0.9rem; font-weight: 500;
  color: var(--brass); padding-top: 0.35rem;
}
.thread-step h3 { margin-bottom: 0.6rem; }
.thread-step p { font-size: 0.94rem; line-height: 1.62; color: color-mix(in oklch, var(--day) 70%, transparent); }
.thread-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem; font-size: 0.85rem; font-weight: 500;
  color: var(--leaf); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--leaf) 40%, transparent);
  padding-bottom: 2px;
}
.thread-link:hover { border-bottom-color: var(--leaf); }
.thread-link svg { width: 14px; height: 14px; }

.thread-fig {
  border: 1px solid var(--deep-line); border-radius: 5px;
  background: oklch(1 0 0 / 0.022);
  padding: 0.9rem 1rem;
  font-family: var(--font-data); font-size: 0.74rem; line-height: 1.85;
  overflow-x: auto;
}
.thread-fig .k { color: var(--day-dim); }
.thread-fig .v { color: var(--day); }
.thread-fig .hl { color: var(--brass); }
.thread-fig .bad { color: oklch(0.72 0.16 30); }

/* ==========================================================================
   Rules grid — what generic software misses
   ========================================================================== */

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1px;
  background: oklch(0.88 0.006 120);
  border: 1px solid oklch(0.88 0.006 120);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 3rem;
}
.rule-cell { background: oklch(1 0 0); padding: clamp(1.3rem, 2.2vw, 1.8rem); }
.rule-cell h3 { font-size: 1.02rem; margin-bottom: 0.55rem; }
.rule-cell p { font-size: 0.88rem; line-height: 1.6; color: oklch(0.42 0.012 143); }
.rule-cell .fig {
  font-family: var(--font-data); font-size: 0.78rem; color: var(--brass-2);
  margin-top: 0.8rem; display: block;
}

/* ==========================================================================
   Money
   ========================================================================== */

.money {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 3rem;
}
.money-item { border-top: 3px solid var(--brass); padding-top: 1.3rem; }
.money-item .num-xl { color: var(--deep); }
.money-item h3 { font-size: 1rem; margin: 0.6rem 0 0.5rem; }
.money-item p { font-size: 0.88rem; line-height: 1.6; color: oklch(0.42 0.012 143); }

/* ==========================================================================
   Module map
   ========================================================================== */

.mods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.6rem 2rem; margin-top: 2.8rem;
}
.mod-group h3 {
  font-size: 0.78rem; font-family: var(--font-data); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 0.9rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--deep-line);
}
.mod-group a, .mod-group span {
  display: block; font-size: 0.88rem; padding: 0.32rem 0;
  color: color-mix(in oklch, var(--day) 78%, transparent); text-decoration: none;
}
.mod-group a:hover { color: var(--leaf); }
.mod-group span { color: color-mix(in oklch, var(--day) 60%, transparent); }

/* ==========================================================================
   Footer
   ========================================================================== */

.lp-footer { background: var(--deep); color: var(--day); padding-block: clamp(3.5rem, 7vh, 5.5rem) 3rem; }
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--deep-line);
}
.foot-note {
  font-size: 0.84rem; line-height: 1.65;
  color: color-mix(in oklch, var(--day) 58%, transparent);
  max-width: 68ch;
}
.foot-bottom {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 2rem; font-size: 0.78rem;
  color: color-mix(in oklch, var(--day) 62%, transparent);
}

/* ==========================================================================
   Entrance — one orchestrated load, then restraint.
   Content is visible by default and animation only enhances it, so a headless
   render or a background tab never ships a blank page.
   ========================================================================== */

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: lp-rise 620ms cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.rise-1 { animation-delay: 60ms; }
.rise-2 { animation-delay: 150ms; }
.rise-3 { animation-delay: 240ms; }
.rise-4 { animation-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .flashed { animation: none; }
  .hero::before { display: none; }
}