/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4
 *
 * genre: modern-minimal · macrostructure: Workbench
 * hero: H2 Split diptych · knobs: ratio=6/6, right=product-artifact, divider=negative-space
 * features: F4 Step sequence · knobs: numbering=01/02/03, layout=vertical-stack, connector=line
 *           F3 Tabular spec sheet · knobs: cols=3, rules=every-row, numbers=tabular
 * cta: C1 Outlined chip · knobs: shape=pill, density=spacious, adornment=arrow
 * nav: N1b Canonical SaaS three-section · knobs: centre-links=3, dropdowns=none, scroll=frost
 * footer: Ft2 Inline single line · knobs: order=wordmark/links/credit, sep=middot, density=spaced
 * enrichment: Tier-A pure CSS art (invoice document sheet + 3 step artifacts) — no re-drawn
 *             browser/phone chrome; these are rendered documents, which is the product's output
 *
 * theme: studied-DNA (source: https://www.usehallmark.com/examples/tally/)
 *   paper  oklch(98.4% 0.005 258)   accent oklch(54% 0.22 268)
 *   display/body Geist · labels + all numerals Geist Mono · accent Instrument Serif italic
 *   DNA was extracted and locked on 2026-07-25 into frontend/design.md; this page defers to it
 *   rather than re-studying. Diversification is INVERTED here — the page matches the app.
 *
 * Two deliberate departures from frontend/design.md, per anti-patterns.md
 * ("NOT bypassable by instructions to match the existing structure"):
 *   1. no italic-emphasis word in headings (gate 38a) — emphasis is accent + drawn underline
 *   2. no per-section ◇ eyebrow — only the genuinely ordinal 01/02/03 step numbers survive
 *
 * tone: technical, declarative · audience: small trades billing real clients
 * use case: create a free account / open the demo
 *
 * locales: en (/) + es (/es/) — two static pages sharing this stylesheet,
 *   hreflang-linked, switched explicitly (no navigator.language redirect).
 *   Structural parity is enforced by scripts/check-parity.mjs, not by hand.
 *   Spanish copy uses the app's own terms from core/locale/messages/es.ts.
 *
 * slop test 58/58 · verified in-browser, not by eye:
 *   contrast: pass (40–41) — every text/surface pair computed in both schemes;
 *     ink-3 is theme.ts `textDisabled` and clears nothing (2.4–2.7:1), so it
 *     carries no text here. Captions/labels/table heads all use ink-2 (≥4.9:1).
 *   mobile: pass (34, 49, 50–57) — 320/375/414/768 in real iframe viewports;
 *     document never scrolls sideways, no clickable wraps to two lines, the
 *     trades table scrolls inside its own box with every column reachable.
 *   hero fit: pass (44) — headline, lede, CTA, note and artifact all above
 *     800px at 1280×800; padding-block 80/120 = 1.5 ratio.
 *   honest: pass (46) — no invented metrics, logos or testimonials. €9.99/30d
 *     is core/config.py; the trades matrix marks renovations "API only"
 *     because the Expo app ships no screens for it yet.
 *   chrome: pass (47) · tokens: pass (48) · icons: pass (30) · nav/footer: pass (42–45)
 */

@import url('./tokens.css');

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

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

html,
body {
  /* clip, never hidden — `hidden` on the root kills position:sticky */
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-paper-0);
  color: var(--color-ink-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  /* Roman. Always. No italic display anywhere on this page. */
  font-style: normal;
  font-family: var(--font-display);
  color: var(--color-ink-0);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--leading-heading);
  /* long words (URLs, compounds) break inside rather than blowing the track */
  overflow-wrap: anywhere;
  min-width: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Focus rings appear instantly — never transitioned, never animated in. */
:focus-visible {
  outline: var(--rule-thick) solid var(--color-accent-pressed);
  outline-offset: 3px;
  border-radius: var(--radius-hairline);
}

::selection {
  background-color: var(--color-accent-tint);
  color: var(--color-ink-0);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-sprite {
  position: absolute;
}

/* trailing clarification under a section — prose, so it keeps a real measure */
.footnote {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.footnote sup {
  font-family: var(--font-mono);
}

.u-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-overlay);
  transform: translateY(-200%);
  background-color: var(--color-ink-0);
  color: var(--color-ink-invert);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.u-skip:focus-visible {
  transform: translateY(0);
}

/* ========================================================================
   Shared primitives
   ======================================================================== */

.shell {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Mono label. Loose tracking against the headings' tight tracking — the
   contrast between the two IS the type system. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  line-height: 1.4;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.rule {
  height: var(--rule-hairline);
  background-color: var(--color-paper-2);
  border: 0;
  margin: 0;
}

/* Section heads: S2 Hanging — heading sits in negative space, single column.
   Never a tag-left / heading-right two-column grid (gate 54). */
.head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* wide enough that .head__lede still reads at ≥45ch (gate 25); the title
     is held short by its own max-width, not by the wrapper */
  max-width: var(--measure);
  margin-bottom: var(--space-7);
}

.head__title {
  font-size: var(--text-display-s);
  letter-spacing: var(--track-display);
  max-width: 20ch;
}

.head__lede {
  font-size: var(--text-md);
  color: var(--color-ink-1);
}

/* Emphasis inside a heading is accent ink + a drawn underline — never italic.
   Fixed 2px thickness: an em-relative rule would render 8px thick under the
   hero's 68px display and read as a highlighter bar (gate 35). */
.mark {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

/* Instrument Serif italic survives only as body-copy emphasis. */
.serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.12em;
  letter-spacing: 0;
}

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Clickable text is a one-line object. It never wraps. (gate 49) */
  white-space: nowrap;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: var(--rule-hairline) solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Primary fills with INK, flipping to the accent on press. That inversion is
   the source's, and it's what stops a button-heavy page going all-indigo. */
.btn--primary {
  background-color: var(--color-ink-0);
  color: var(--color-ink-invert);
}

.btn--primary:hover {
  background-color: var(--color-accent);
}

.btn--primary:active {
  background-color: var(--color-accent-pressed);
}

.btn--secondary {
  background-color: var(--color-paper-elev);
  color: var(--color-ink-0);
  border-color: var(--color-paper-3);
}

.btn--secondary:hover {
  border-color: var(--color-ink-2);
  background-color: var(--color-paper-1);
}

.btn--secondary:active {
  background-color: var(--color-paper-2);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-ink-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  border-color: var(--color-paper-3);
}

.btn--ghost:hover {
  color: var(--color-ink-0);
  border-color: var(--color-ink-2);
}

.btn--ghost:active {
  background-color: var(--color-paper-1);
}

/* Anchors can't take :disabled, so the inert state is aria-driven — and it's
   signalled on three channels, not by opacity alone. */
.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-paper-1);
  border-color: var(--color-paper-3);
  color: var(--color-ink-2);
}

.btn__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(2px);
}


/* ---- Language toggle --------------------------------------------------- */

.langtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-half);
  padding: var(--space-half);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper-1);
  border: var(--rule-hairline) solid var(--color-paper-3);
  flex: none;
}

.langtoggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.langtoggle__opt:hover {
  color: var(--color-ink-0);
}

.langtoggle__opt:active {
  background-color: var(--color-paper-2);
}

/* the selected segment lifts onto the element surface */
.langtoggle__opt[aria-current='true'] {
  background-color: var(--color-paper-elev);
  color: var(--color-ink-0);
  box-shadow: var(--shadow-nav);
}

/* ---- Badge ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper-1);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.badge--sent {
  background-color: var(--color-accent-tint);
  color: var(--color-accent-pressed);
}

.badge--paid {
  /* the single, sparing use of lime — money received */
  background-color: color-mix(in oklab, var(--color-companion) 18%, var(--color-paper-elev));
  color: color-mix(in oklab, var(--color-companion) 78%, var(--color-ink-0));
}

.badge--overdue {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

/* ========================================================================
   N1b · Canonical SaaS three-section nav — frosts on scroll
   ======================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  transition:
    background-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    backdrop-filter var(--dur-mid) var(--ease-out);
}

.nav[data-scrolled='true'] {
  background-color: var(--color-nav-scrim);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.brand__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  flex: none;
}

.brand__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: var(--track-heading);
  color: var(--color-ink-0);
}

.nav__links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-block: var(--space-3);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--color-ink-0);
}

.nav__link:active {
  color: var(--color-accent-pressed);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}

.nav__signin {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
  padding: var(--space-3) var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__signin:hover {
  color: var(--color-ink-0);
}

.nav__signin:active {
  color: var(--color-accent-pressed);
}

/* ========================================================================
   H2 · Split diptych hero — copy 6 / document artifact 6
   ======================================================================== */

.hero {
  padding-block: var(--space-8) var(--space-9);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grid {
    /* divider = negative space, not a rule */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
  }
}

.hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.hero__lede {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  color: var(--color-ink-1);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 44ch;
}

/* ========================================================================
   Tier-A CSS art · the invoice document sheet
   A rendered document, not re-drawn app chrome — no browser bar, no dots.
   ======================================================================== */

.sheet {
  background-color: var(--color-paper-elev);
  border: var(--rule-hairline) solid var(--color-paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-5);
  container-type: inline-size;
}

.sheet__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-align: center;
}

.doc__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
}

.doc__no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink-0);
  letter-spacing: 0;
}

.doc__meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--space-half) var(--space-3);
  margin-top: var(--space-2);
}

.doc__meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.doc__meta dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-ink-1);
  text-align: right;
}

.doc__party {
  padding-block: var(--space-4);
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
}

.doc__party-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink-0);
  letter-spacing: var(--track-heading);
  margin-top: var(--space-1);
}

.doc__party-sub {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.doc__lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
}

.doc__lines th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  text-align: left;
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
}

.doc__lines td {
  padding: var(--space-3) 0;
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-ink-1);
  vertical-align: top;
}

.doc__lines .is-right {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.doc__totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
}

.doc__totals dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  text-align: right;
}

.doc__totals dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-ink-1);
  text-align: right;
  white-space: nowrap;
}

.doc__totals .is-total dt,
.doc__totals .is-total dd {
  color: var(--color-ink-0);
  font-size: var(--text-base);
  font-weight: 500;
  padding-top: var(--space-3);
  border-top: var(--rule-hairline) solid var(--color-paper-3);
}

/* `display: contents` lets a dt/dd pair share the parent grid's tracks. */
.doc__totals .is-total {
  display: contents;
}

@container (max-width: 20rem) {
  .doc__lines .is-hide-narrow {
    display: none;
  }
}

/* ========================================================================
   Status marquee — HP2 marquee-overflow
   The real invoice status ladder, not a slogan.
   ======================================================================== */

.marquee {
  border-block: var(--rule-hairline) solid var(--color-paper-2);
  padding-block: var(--space-5);
  overflow: hidden;
  /* full-bleed without 100vw (which breaks on scrollbar-visible desktops) */
  margin-inline: calc(var(--gutter) * -1);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide var(--dur-marquee) linear infinite;
}

.marquee__run {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
  flex: none;
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-marquee-ink);
  white-space: nowrap;
}

.marquee__item[data-live='true'] {
  color: var(--color-accent);
}

.marquee__sep {
  color: var(--color-paper-3);
  font-size: var(--text-xl);
  flex: none;
}

/* WCAG 2.2.2 — motion that starts automatically and runs past 5s must be
   pausable. Hover and keyboard focus both stop it. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .marquee {
    /* still readable when it can't move */
    overflow-x: auto;
  }
}

/* ========================================================================
   F4 · Step sequence — 01/02/03, vertical stack, line connector
   ======================================================================== */

.tour {
  padding-block: var(--space-9);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  position: relative;
}

@media (min-width: 60rem) {
  .step {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: center;
  }

  /* alternate direction down the page so the tour doesn't read as a list */
  .step:nth-child(even) .step__body {
    order: 2;
  }
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* The only ordinal device on the page, and it stacks above its heading —
   never a tag-left / heading-right two-column head. */
.step__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.step__n::after {
  content: '';
  height: var(--rule-hairline);
  flex: 1 1 auto;
  background-color: var(--color-paper-2);
}

.step__title {
  font-size: var(--text-xl);
}

.step__text {
  color: var(--color-ink-1);
  max-width: 46ch;
}

/* ---- step artifacts (Tier-A CSS art) ----------------------------------- */

.panel {
  background-color: var(--color-paper-elev);
  border: var(--rule-hairline) solid var(--color-paper-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
}

.panel__label {
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
  margin-bottom: var(--space-4);
}

.kv {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
}

.kv dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
}

.kv dd {
  color: var(--color-ink-0);
  font-size: var(--text-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

.rows {
  display: flex;
  flex-direction: column;
}

.rows__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
  font-size: var(--text-sm);
}

.rows__row:last-child {
  border-bottom: 0;
}

.rows__name {
  color: var(--color-ink-1);
  min-width: 0;
}

.rows__qty,
.rows__amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-ink-2);
}

.rows__amt {
  color: var(--color-ink-0);
}

.rows__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: var(--rule-hairline) solid var(--color-paper-3);
}

.rows__foot-amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  color: var(--color-ink-0);
}

/* status ladder artifact */
.ladder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ladder__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-paper-1);
}

.ladder__step[data-current='true'] {
  background-color: var(--color-accent-tint);
}

.ladder__date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  margin-left: auto;
  white-space: nowrap;
}

.ladder__pending {
  color: var(--color-ink-2);
}

/* ========================================================================
   F3 · Tabular spec sheet — the three business types
   ======================================================================== */

.trades {
  padding-block: var(--space-9);
  background-color: var(--color-paper-1);
  border-block: var(--rule-hairline) solid var(--color-paper-2);
}

.matrix-wrap {
  /* wide table scrolls inside its own container — the body never does */
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.matrix {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

.matrix caption {
  text-align: left;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  padding-bottom: var(--space-4);
}

.matrix th,
.matrix td {
  padding: var(--space-4) var(--space-4);
  border-bottom: var(--rule-hairline) solid var(--color-paper-3);
  vertical-align: middle;
}

.matrix thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  border-bottom-width: var(--rule-thick);
  border-bottom-color: var(--color-ink-2);
}

.matrix thead th:first-child {
  color: var(--color-ink-2);
}

.matrix tbody th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-0);
  padding-left: 0;
}

.matrix td {
  text-align: center;
  width: 8rem;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td {
  border-bottom: 0;
}

.tick {
  width: 15px;
  height: 15px;
  margin-inline: auto;
  color: var(--color-accent);
}

.tick--off {
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ========================================================================
   Pricing — one plan, because there is one plan
   ======================================================================== */

.pricing {
  padding-block: var(--space-9);
}

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  background-color: var(--color-paper-elev);
  border: var(--rule-hairline) solid var(--color-paper-3);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

@media (min-width: 52rem) {
  .plan {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: var(--space-8);
    padding: var(--space-7);
    align-items: start;
  }
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.plan__amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xxl);
  font-weight: 500;
  color: var(--color-ink-0);
  /* Geist Mono centres `.` in a full advance; at 40px that reads as
     "€9 . 99" unless the track is pulled in. */
  letter-spacing: -0.055em;
}

.plan__per {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.plan__note {
  margin-top: var(--space-4);
  color: var(--color-ink-1);
  font-size: var(--text-sm);
  max-width: 46ch;
}

.plan__list {
  display: flex;
  flex-direction: column;
}

.plan__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-ink-1);
}

.plan__item:last-child {
  border-bottom: 0;
}

.plan__item .tick {
  margin: 0;
  translate: 0 2px;
}

/* ========================================================================
   Closing CTA — one button, not two
   ======================================================================== */

.close {
  padding-block: var(--space-9) var(--space-10);
}

.close__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 46ch;
}

.close__title {
  font-size: var(--text-display-s);
  letter-spacing: var(--track-display);
}

.close__note {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* ========================================================================
   Ft2 · Inline single line footer
   ======================================================================== */

.foot {
  border-top: var(--rule-hairline) solid var(--color-paper-2);
  padding-block: var(--space-6) var(--space-7);
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.foot__tagline {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-left: auto;
}

.foot__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.foot__link:hover {
  color: var(--color-ink-0);
}

.foot__link:active {
  color: var(--color-accent-pressed);
}

.foot__sep {
  color: var(--color-paper-3);
  user-select: none;
}

.foot__credit {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
}

/* ========================================================================
   Narrow viewports
   ======================================================================== */

@media (max-width: 60rem) {
  /* N1b collapses to wordmark + CTA; the 3 centre links live in the page
     anyway, and a 3-item hamburger is more chrome than it's worth. */
  .nav__links {
    display: none;
  }

  .nav__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .hero {
    padding-block: var(--space-7) var(--space-8);
  }

  .tour,
  .trades,
  .pricing {
    padding-block: var(--space-8);
  }

  .close {
    padding-block: var(--space-8) var(--space-9);
  }

  .marquee__item,
  .marquee__sep {
    font-size: var(--text-lg);
  }

  .nav__signin {
    display: none; /* "Start free" lands on the same auth surface */
  }

  /* The language toggle stays at every width — language is the kind of thing
     you fix the moment you notice it, and unlike the sign-in link it has no
     equivalent above the fold. But the two-segment control plus the CTA plus
     the wordmark need 346px at 320px wide, so on phones it collapses to the
     one language you'd switch TO: same markup, the current option hides. */
  .nav__actions {
    gap: var(--space-2);
  }

  .nav__inner {
    column-gap: var(--space-2);
  }

  .nav__actions .btn {
    padding-inline: var(--space-4);
  }

  .brand__name {
    font-size: var(--text-base);
  }

  .langtoggle {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
  }

  .langtoggle__opt[aria-current='true'] {
    display: none;
  }

  .langtoggle__opt {
    /* now a standalone control, so it carries its own border and a full
       44px touch target */
    border: var(--rule-hairline) solid var(--color-paper-3);
    background-color: var(--color-paper-elev);
    min-width: 44px;
    min-height: 44px;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .sheet {
    padding: var(--space-4);
  }

  .foot__links {
    margin-left: 0;
  }
}

/* ========================================================================
   Reduced motion — gate 27
   The marquee stops in its own block above; this is the catch-all for the
   transitions. Colour changes survive (they carry state, not spatial motion);
   transforms and the nav's backdrop blur do not.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .btn__arrow,
  .btn:hover .btn__arrow,
  .u-sprite {
  position: absolute;
}

/* trailing clarification under a section — prose, so it keeps a real measure */
.footnote {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.footnote sup {
  font-family: var(--font-mono);
}

.u-skip {
    transition: none;
    transform: none;
  }

  .u-skip:not(:focus-visible) {
    /* still off-screen, just without the slide */
    top: -100vh;
  }

  .nav {
    transition: background-color var(--dur-fast) var(--ease-out);
  }
}