/* ==========================================================================
   Soulful Ledger — landing page
   ==========================================================================

   THIS FILE ADDS NOTHING TO THE DESIGN SYSTEM. It consumes design-tokens.css,
   which is copied byte-identical from the app repository and is the single
   source of truth for every colour and face. No hex value appears below.

   THE ONE RULE THIS PAGE HAS TO GET RIGHT, from the tokens file:

     Gold is permitted in exactly two places, both functional signals rather
     than decoration: the primary action, and the current navigation location.

   A marketing page has no navigation location and one action, so **gold appears
   here exactly twice — the two "Book a call" buttons — and nowhere else.**
   Not on a heading, not on a rule, not on a hover state of anything that is not
   that button. Everything else is black, white or grey.

   Red and mint are in the tokens and are deliberately UNUSED here. They report
   something true about data on screen, and there is no data on this page. The
   refusal specimen is monochrome for that reason: rendering it in the product's
   red would be colour claiming a state that nothing here actually holds.

   The scale below is larger than the app's, per the brief — the app's screens
   are dense working surfaces and this is not one. It is built from the token
   scale rather than beside it: --text-3xl is the largest token, so the display
   sizes extend the same ramp instead of replacing it.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Extends the token ramp upward for a page with room. Fluid so the hero does
     not need a breakpoint to stop being enormous on a phone. */
  --display-1: clamp(2.125rem, 1.35rem + 3.6vw, 3.75rem);
  --display-2: clamp(1.5rem,  1.15rem + 1.6vw, 2.125rem);
  --lead:      clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --body:      clamp(1rem, 0.96rem + 0.25vw, 1.1875rem);

  /* Prose measure. Long enough to read, short enough to track back. */
  --measure: 34rem;
  --wrap:    64rem;
  --gutter:  var(--s-5);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0 0 var(--s-5); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Focus is visible on everything, and it is ink rather than gold — gold is the
   button's own signal and a focus ring is not a primary action. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600;
}
.skip:focus { left: var(--gutter); top: var(--s-4); z-index: 10; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* REMOVED: .wrap.narrow.
   A second, narrower centred wrap gave the page three different left edges —
   the hero at one, the card grid at another, the prose sections at a third —
   and the eye tracks that jump on every scroll. Prose is constrained where it
   sits instead, left-aligned to the single spine. Caught in the browser; the
   markup looked perfectly reasonable. */
.band p,
.band .rows,
.hero .lead,
.hero .claims { max-width: var(--measure); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ chrome */

.site-head {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.site-foot {
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
}
.site-foot .wordmark { color: var(--ink-soft); }

/* -------------------------------------------------------------------- hero */

.hero { padding-block: clamp(var(--s-7), 9vw, 7rem) clamp(var(--s-7), 7vw, 5.5rem); }

/* The scene-setting paragraph runs BEFORE the headline, as written. It is set
   quieter and narrower so it reads as the way in rather than as a subheading
   competing with the h1 below it. */
.hero .lead {
  max-width: var(--measure);
  font-size: var(--lead);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--s-6);
}

.hero h1 {
  font-size: var(--display-1);
  line-height: 1.08;
  margin: 0 0 var(--s-6);
  max-width: 20ch;
}

/* Three parallel claims, laid out as three. The words are unchanged; only the
   line breaks are a design decision. */
.claims {
  list-style: none;
  margin: 0 0 var(--s-7);
  padding: 0;
  max-width: var(--measure);
  border-top: 1px solid var(--line);
}
.claims li {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-lg);
}

/* --------------------------------------------------------- the one action */

.cta-row { margin: 0; }

/* THE ONLY GOLD ON THIS PAGE.
   Sized deliberately larger than the app's .btn-primary: white on --gold
   measures 3.25:1, which clears WCAG AA for large text (3:1) and does not for
   normal text (4.5:1). At 1.1875rem / 600 this is large text. The token is
   unchanged; the type size is what makes it pass. */
.cta {
  display: inline-block;
  background: var(--gold);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: var(--s-4) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: filter 120ms ease, transform 120ms ease;
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(1px); }

/* ------------------------------------------------------------------- bands */

.band { padding-block: clamp(var(--s-7), 7vw, 5.5rem); }
.band + .band { border-top: 1px solid var(--line); }

.band h2 {
  font-size: var(--display-2);
  line-height: 1.2;
  margin: 0 0 var(--s-6);
  max-width: 24ch;
}

.band.quiet { background: var(--line-soft); border-top: 1px solid var(--line); }

/* The near-black band. Monochrome by design: this is the emotional centre of
   the page and it earns its weight from contrast and space, not from colour. */
.band.dark {
  background: var(--side);
  color: var(--surface);
  border-top: none;
}
.band.dark h2 { color: var(--surface); }
.band.dark p { color: var(--line); }

/* --------------------------------------------------------------- specimen */

/* An illustration, deliberately NOT a mock screenshot. A fabricated product
   screen on a marketing page invites the reader to believe they have seen the
   thing itself; this shows the shape of the idea — the absence where a figure
   would be — and says so in its caption. IBM Plex Mono because the slot it
   occupies is a figure's slot, which is exactly what the mono face is for. */
.specimen {
  margin: var(--s-7) 0;
  padding: var(--s-6) var(--s-5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  text-align: center;
}
.specimen-fig {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1;
  color: var(--surface);
}
.specimen figcaption {
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------- grid */

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-6) var(--s-7);
  /* Explicitly two, not auto-fit. auto-fit chose three columns at desktop width
     and stranded the fourth item alone on a second row, which reads as an
     afterthought rather than as one of four. */
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
.grid li {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
/* Index numbers are figures, so they are mono. Grey, never gold. */
.grid .num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}
.grid p { margin: 0; }

/* ------------------------------------------------------------------- rows */

/* Deliberately a different shape from .grid. Two four-item sections rendered
   identically would read as one list split in half. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.rows li:first-child { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- closing */

.closing {
  padding-block: clamp(var(--s-7), 8vw, 6.5rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.closing .wrap { max-width: 44rem; }
.closing-line {
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--s-6);
}

/* ------------------------------------------------------------------ misc */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .cta:active { transform: none; }
}

@media print {
  .skip, .cta { display: none; }
  body { background: var(--surface); }
}