/* ==========================================================================
   RacingLabs LLC — racinglabs.io
   Corporate site stylesheet. Standalone, zero-JS, plain static HTML.
   Sibling of the Apexcast product site (dark / lime / IBM Plex + JetBrains
   Mono) but more restrained and editorial: the company, not the product.
   Token prefix: --rl-
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* fonts */
  --rl-font-sans:  'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --rl-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* radii */
  --rl-radius-sm: 2px;
  --rl-radius-md: 5px;
  --rl-radius-lg: 8px;

  /* motion */
  --rl-ease: cubic-bezier(0.3, 0.7, 0.4, 1);
  --rl-dur-fast: 120ms;
  --rl-dur: 180ms;

  /* background scale (near-black -> slate) */
  --rl-bg-0: #07080A;
  --rl-bg-1: #0F1116;
  --rl-bg-2: #161920;
  --rl-bg-3: #1D2029;
  --rl-bg-4: #252934;

  /* hairlines */
  --rl-line: #21242D;
  --rl-line-strong: #2E323D;

  /* text scale */
  --rl-text-1: #F1F2F5;
  --rl-text-2: #A3A7B0;
  --rl-text-3: #7E828C;
  --rl-text-4: #464954;

  /* brand accent — lime */
  --rl-accent: #D4FF3A;
  --rl-accent-dim: #A8CC2E;
  --rl-accent-glow: rgba(212, 255, 58, 0.20);
  --rl-accent-ink: #07080A;

  /* semantic */
  --rl-ok:   #2ED573;
  --rl-warn: #FFA71A;
  --rl-hot:  #FF4444;
  --rl-cool: #3AA0FF;

  /* elevation */
  --rl-shadow: 0 12px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;

  /* layout */
  --rl-wrap: 1240px;
  --rl-gutter: 28px;

  color-scheme: dark;
}

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

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--rl-bg-0);
  color: var(--rl-text-1);
  font-family: var(--rl-font-sans);
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; display: flex; flex-direction: column; }

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; height: 1px; background: var(--rl-line); margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--rl-accent);
  outline-offset: 2px;
  border-radius: var(--rl-radius-sm);
}

/* subtle custom scrollbar (webkit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rl-bg-3);
  border: 3px solid var(--rl-bg-0);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--rl-bg-4); }

/* ------------------------------------------------------------- UTILITIES -- */
.mono  { font-family: var(--rl-font-mono); font-feature-settings: 'tnum'; }
.dim   { color: var(--rl-text-2); }
.faint { color: var(--rl-text-3); }
.accent { color: var(--rl-accent); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- LAYOUT -- */
.wrap {
  width: 100%;
  max-width: var(--rl-wrap);
  margin: 0 auto;
  padding: 0 var(--rl-gutter);
}
.wrap.tight { max-width: 980px; }
.wrap.narrow { max-width: 760px; }

.page { display: block; }

/* main should grow so the footer sinks to the bottom on short pages */
main { flex: 1 0 auto; }

.section { padding: 88px 0; position: relative; }
.section.sm { padding: 56px 0; }
.section.lg { padding: 120px 0; }
.section.flush-top { padding-top: 0; }
.section.alt { background: var(--rl-bg-1); border-block: 1px solid var(--rl-line); }

.divider { height: 1px; background: var(--rl-line); border: 0; }

/* section header (kicker + title + optional lede) */
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .kicker { margin-bottom: 16px; }
.section-head .lede { margin-top: 16px; }

/* ------------------------------------------------------------------ TYPE -- */
.h-display {
  font-family: var(--rl-font-sans);
  font-size: 56px; line-height: 1.04;
  letter-spacing: -0.025em; font-weight: 600;
  text-wrap: balance;
}
.h-1 {
  font-size: 42px; line-height: 1.07;
  letter-spacing: -0.02em; font-weight: 600;
  text-wrap: balance;
}
.h-2 {
  font-size: 30px; line-height: 1.15;
  letter-spacing: -0.015em; font-weight: 600;
  text-wrap: balance;
}
.h-3 {
  font-size: 20px; line-height: 1.25;
  letter-spacing: -0.01em; font-weight: 600;
}
.lede {
  font-size: 18px; line-height: 1.55;
  color: var(--rl-text-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.lede.lg { font-size: 20px; }

/* kicker — mono, uppercase, lime, with leading square tick */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--rl-font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rl-accent);
}
.kicker::before {
  content: ''; width: 6px; height: 6px;
  background: var(--rl-accent);
  flex: none;
}
.kicker.muted { color: var(--rl-text-3); }
.kicker.muted::before { background: var(--rl-text-3); }

/* eyebrow — mono uppercase, quieter, no tick */
.eyebrow {
  font-family: var(--rl-font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rl-text-3);
}

/* ------------------------------------------------------------------ CHIP -- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--rl-bg-2);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm);
  font-family: var(--rl-font-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rl-text-2);
}
.chip .dot { width: 6px; height: 6px; background: currentColor; flex: none; }
.chip.accent {
  color: var(--rl-accent);
  border-color: color-mix(in oklab, var(--rl-accent) 35%, var(--rl-line));
  background: var(--rl-accent-glow);
}
.chip.ok   { color: var(--rl-ok); }
.chip.warn { color: var(--rl-warn); }

/* ---------------------------------------------------------------- BUTTON -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  background: var(--rl-bg-2);
  color: var(--rl-text-1);
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius-md);
  font-family: var(--rl-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--rl-dur-fast) var(--rl-ease),
              border-color var(--rl-dur-fast) var(--rl-ease),
              color var(--rl-dur-fast) var(--rl-ease),
              transform var(--rl-dur-fast) var(--rl-ease);
}
.btn:hover { background: var(--rl-bg-3); border-color: var(--rl-text-3); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--rl-accent); color: var(--rl-accent-ink);
  border-color: var(--rl-accent);
}
.btn.primary:hover { background: var(--rl-accent-dim); border-color: var(--rl-accent-dim); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--rl-text-2); }
.btn.ghost:hover { color: var(--rl-text-1); background: var(--rl-bg-2); }
.btn.outline { background: transparent; }
.btn.outline:hover { background: var(--rl-bg-2); }
.btn.lg { padding: 14px 22px; font-size: 14px; }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn .arrow { font-family: var(--rl-font-mono); font-weight: 700; }
.btn.disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
  background: var(--rl-bg-3); border-color: var(--rl-line); color: var(--rl-text-3);
}

/* inline arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--rl-accent);
  font-weight: 600; font-size: 13px;
  transition: gap var(--rl-dur-fast) var(--rl-ease), color var(--rl-dur-fast) var(--rl-ease);
}
.link-arrow::after {
  content: '\2192'; font-family: var(--rl-font-mono); font-weight: 700;
}
.link-arrow:hover { gap: 11px; color: var(--rl-accent-dim); }

/* ----------------------------------------------------------------- PANEL -- */
.panel {
  background: var(--rl-bg-1);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-md);
  position: relative;
}
.panel.pad { padding: 28px; }
.panel.ticked::before, .panel.ticked::after {
  content: ''; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--rl-accent); pointer-events: none; opacity: .8;
}
.panel.ticked::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel.ticked::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* corner-tick decorator for any positioned element */
.tick-frame { position: relative; }
.tick-frame::before, .tick-frame::after,
.tick-frame > .tick-tr, .tick-frame > .tick-bl {
  content: ''; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--rl-accent); pointer-events: none;
}
.tick-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tick-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.tick-frame > .tick-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.tick-frame > .tick-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }

/* faint engineering grid background (for hero / feature bands) */
.brick {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--rl-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rl-line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at 50% 40%, black 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 25%, transparent 72%);
}

/* ------------------------------------------------------------------- NAV -- */
/* Zero-JS responsive nav. Desktop: brand + inline links + CTA on one row.
   <=900px: the .links group wraps to a full-width second row (see media). */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--rl-bg-0) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rl-line);
}
.site-nav .row {
  max-width: var(--rl-wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 13px var(--rl-gutter);
}
.site-nav .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--rl-font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rl-text-1);
}
.site-nav .brand .glyph {
  width: 22px; height: 22px; display: grid; place-items: center; flex: none;
}
.site-nav .links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.site-nav .links a {
  padding: 8px 12px; font-size: 13px; color: var(--rl-text-2);
  border-radius: var(--rl-radius-sm);
  transition: color var(--rl-dur-fast), background var(--rl-dur-fast);
}
.site-nav .links a:hover { color: var(--rl-text-1); background: var(--rl-bg-2); }
.site-nav .links a.current { color: var(--rl-text-1); }
.site-nav .links a.current::after {
  content: ''; display: block; height: 2px; background: var(--rl-accent);
  margin-top: 6px; margin-bottom: -9px;
}
.site-nav .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.site-nav .meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--rl-font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--rl-text-3); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 9px; border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm);
}
.site-nav .meta .dot { width: 6px; height: 6px; background: var(--rl-ok); flex: none; }

/* ------------------------------------------------------------------ HERO -- */
.hero { position: relative; overflow: hidden; padding: 104px 0 88px; }
.hero .brick { z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero .kicker { margin-bottom: 22px; }
.hero .h-display { max-width: 20ch; }
.hero .lede { margin-top: 22px; }
.hero .actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px;
}
.hero.center { text-align: center; }
.hero.center .h-display, .hero.center .lede { margin-left: auto; margin-right: auto; }
.hero.center .actions { justify-content: center; }

/* --------------------------------------------------------------- CONTENT -- */
/* two-up editorial split: heading column + body column */
.split {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px;
  align-items: start;
}
.split.even { grid-template-columns: 1fr 1fr; }
.prose-cols { columns: 2; column-gap: 40px; }
.prose-cols p { break-inside: avoid; margin-bottom: 16px; }

/* ------------------------------------------------------------ CARD GRID -- */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--rl-bg-1);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-md);
  padding: 26px 24px;
  transition: border-color var(--rl-dur) var(--rl-ease),
              background var(--rl-dur) var(--rl-ease),
              transform var(--rl-dur) var(--rl-ease);
}
.card.link:hover { border-color: var(--rl-line-strong); background: var(--rl-bg-2); }
.card .card-index {
  font-family: var(--rl-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--rl-text-4); margin-bottom: 16px;
}
.card .card-icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius-md);
  color: var(--rl-accent);
  margin-bottom: 18px;
}
.card h2, .card h3 { font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.card p { color: var(--rl-text-2); font-size: 14px; line-height: 1.6; margin-top: 10px; }
.card .card-foot { margin-top: auto; padding-top: 18px; }

/* product card — a bit more presence, optional header row + meta chips */
.card.product { padding: 0; overflow: hidden; }
.card.product .card-body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; }
.card.product .card-media {
  aspect-ratio: 16 / 9; background: var(--rl-bg-2);
  border-bottom: 1px solid var(--rl-line);
  display: grid; place-items: center; color: var(--rl-text-3);
}
.card.product .card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.card.product .card-head h3 { font-size: 19px; }
.card .meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* value / principle card — lighter, numbered, no icon box */
.card.value { background: transparent; border-color: var(--rl-line); }
.card.value:hover { border-color: var(--rl-line-strong); }

/* ------------------------------------------------------------ FACTS STRIP -- */
/* auto-fit so it handles 3, 4, or 5 items and collapses cleanly on mobile.
   Two flavours: numeric tiles (.num + .lbl) and key/value (.k + .v). */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--rl-line);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-md);
  overflow: hidden;
}
.fact { background: var(--rl-bg-1); padding: 24px 22px; }

/* numeric tile */
.fact .num {
  font-family: var(--rl-font-mono); font-weight: 600;
  font-size: 30px; line-height: 1; letter-spacing: -0.01em;
  color: var(--rl-text-1);
}
.fact .num.accent { color: var(--rl-accent); }
.fact .lbl {
  margin-top: 12px;
  font-family: var(--rl-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rl-text-3);
}

/* key/value flavour (label on top, longer text value below) */
.fact .k {
  font-family: var(--rl-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rl-text-3);
}
.fact .v { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--rl-text-1); }
.fact a.v, .fact .v a { color: var(--rl-accent); }
.fact a.v:hover, .fact .v a:hover { color: var(--rl-accent-dim); }

/* ---------------------------------------------------------- NUMBERED STEPS -- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative; padding: 18px 0 18px 54px;
  border-bottom: 1px solid var(--rl-line);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  font-family: var(--rl-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--rl-accent);
}
.steps li h4, .steps li strong {
  display: block; font-size: 15px; font-weight: 600; color: var(--rl-text-1);
  letter-spacing: -0.005em; margin: 0 0 4px;
}
.steps li p { margin: 0; color: var(--rl-text-2); font-size: 14px; line-height: 1.6; }

/* -------------------------------------------------------------- PRICE TAG -- */
.price {
  font-family: var(--rl-font-mono); font-weight: 700;
  font-size: 26px; line-height: 1; letter-spacing: -0.01em;
  color: var(--rl-accent);
}
.price .unit {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rl-text-3); margin-left: 6px;
}

/* ---------------------------------------------------------- CONTACT BLOCK -- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-methods { display: grid; gap: 1px; background: var(--rl-line);
  border: 1px solid var(--rl-line); border-radius: var(--rl-radius-md); overflow: hidden; }
.contact-method { background: var(--rl-bg-1); padding: 20px 22px; }
.contact-method .m-label {
  font-family: var(--rl-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rl-text-3);
  margin-bottom: 8px;
}
.contact-method .m-value { font-size: 15px; color: var(--rl-text-1); }
.contact-method a.m-value { color: var(--rl-accent); }
.contact-method a.m-value:hover { color: var(--rl-accent-dim); }
.contact-method .m-note { font-size: 13px; color: var(--rl-text-3); margin-top: 6px; }

/* definition-list style key/value block */
.deflist { display: grid; gap: 0; }
.deflist .row {
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rl-line);
}
.deflist .row:last-child { border-bottom: none; }
.deflist dt {
  font-family: var(--rl-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--rl-text-3);
}
.deflist dd { margin: 0; color: var(--rl-text-2); font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------- PROSE / LEGAL -- */
.prose { max-width: 68ch; color: var(--rl-text-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  color: var(--rl-text-1); font-size: 24px; line-height: 1.2;
  letter-spacing: -0.015em; font-weight: 600; margin-top: 44px;
}
.prose h3 {
  color: var(--rl-text-1); font-size: 17px; line-height: 1.3;
  font-weight: 600; margin-top: 30px;
}
.prose p { font-size: 14.5px; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose li { font-size: 14.5px; line-height: 1.7; }
.prose li::marker { color: var(--rl-text-4); }
.prose a { color: var(--rl-accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--rl-accent) 45%, transparent); }
.prose a:hover { text-decoration-color: var(--rl-accent); }
.prose strong { color: var(--rl-text-1); font-weight: 600; }
.prose code {
  font-family: var(--rl-font-mono); font-size: 0.9em;
  background: var(--rl-bg-2); border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm); padding: 1px 5px;
}

/* numbered legal document — panel with numbered clauses */
.legal-doc { padding: 0; }
.legal-doc .clause {
  padding: 24px 28px; border-bottom: 1px solid var(--rl-line);
}
.legal-doc .clause:last-child { border-bottom: none; }
.legal-doc .clause-head {
  display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px;
}
.legal-doc .clause-num {
  font-family: var(--rl-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--rl-text-3); min-width: 24px; flex: none;
}
.legal-doc .clause h2, .legal-doc .clause h3 {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--rl-text-1);
}
.legal-doc .clause-body { padding-left: 38px; }
.legal-doc .clause-body p {
  margin: 0; color: var(--rl-text-2); font-size: 13.5px; line-height: 1.65;
}
.legal-doc .clause-body p + p { margin-top: 8px; }

/* ---------------------------------------------------------------- FOOTER -- */
.site-foot {
  margin-top: auto; border-top: 1px solid var(--rl-line);
  background: var(--rl-bg-1);
}
.site-foot .row {
  max-width: var(--rl-wrap); margin: 0 auto;
  padding: 56px var(--rl-gutter) 32px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
}
.site-foot .brand-col .brand {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.site-foot .brand-col .brand .wordmark {
  font-family: var(--rl-font-mono); font-size: 13px; letter-spacing: 0.12em;
  font-weight: 700; text-transform: uppercase; color: var(--rl-text-1);
}
.site-foot .brand-col p {
  margin: 0; max-width: 38ch; font-size: 13px; line-height: 1.6; color: var(--rl-text-2);
}
.site-foot .foot-h {
  font-family: var(--rl-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--rl-text-3);
  margin: 0 0 14px;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-foot a { color: var(--rl-text-2); font-size: 13px; }
.site-foot a:hover { color: var(--rl-text-1); }
.site-foot .legal {
  max-width: var(--rl-wrap); margin: 0 auto;
  padding: 22px var(--rl-gutter) 36px;
  border-top: 1px solid var(--rl-line);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; align-items: center;
  font-family: var(--rl-font-mono); font-size: 10.5px;
  color: var(--rl-text-3); letter-spacing: 0.06em;
}
.site-foot .legal a:hover { color: var(--rl-text-1); }

/* -------------------------------------------------------------- 404 PAGE -- */
.notfound {
  flex: 1 0 auto;
  display: grid; place-items: center; text-align: center;
  padding: 120px var(--rl-gutter);
  position: relative; overflow: hidden;
}
.notfound .inner { position: relative; z-index: 1; max-width: 52ch; }
.notfound .code {
  font-family: var(--rl-font-mono); font-weight: 700;
  font-size: 108px; line-height: 1; letter-spacing: -0.04em;
  color: var(--rl-text-4);
}
.notfound .code .lit { color: var(--rl-accent); }
.notfound h1 { margin-top: 8px; }
.notfound .lede { margin: 16px auto 0; }
.notfound .actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================== RESPONSIVE == */

/* --- tablet / small-desktop: <= 900px ------------------------------------ */
@media (max-width: 900px) {
  .h-display { font-size: 44px; }
  .h-1 { font-size: 34px; }
  .h-2 { font-size: 26px; }
  .lede, .lede.lg { font-size: 17px; }

  .section { padding: 64px 0; }
  .section.lg { padding: 84px 0; }
  .hero { padding: 72px 0 64px; }

  /* nav: links drop to a full-width second row, CTA stays with the brand */
  .site-nav .row { gap: 12px 16px; }
  .site-nav .links {
    order: 3; flex-basis: 100%; margin-left: 0;
    justify-content: flex-start; flex-wrap: wrap;
    gap: 2px; padding-top: 10px; margin-top: 2px;
    border-top: 1px solid var(--rl-line);
  }
  .site-nav .links a.current::after { margin-bottom: -6px; }

  /* grids collapse a step */
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }

  .split, .split.even { grid-template-columns: 1fr; gap: 32px; }
  .prose-cols { columns: 1; }
  .contact { grid-template-columns: 1fr; gap: 28px; }

  .site-foot .row { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .site-foot .brand-col { grid-column: 1 / -1; }
}

/* --- phone: <= 640px ----------------------------------------------------- */
@media (max-width: 640px) {
  :root { --rl-gutter: 20px; }

  .h-display { font-size: 36px; }
  .h-1 { font-size: 30px; }
  .h-2 { font-size: 23px; }

  .section { padding: 52px 0; }
  .hero { padding: 56px 0 52px; }

  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }

  .legal-doc .clause { padding: 20px 20px; }
  .legal-doc .clause-body { padding-left: 0; }

  .deflist .row { grid-template-columns: 1fr; gap: 4px; }

  .site-foot .row { grid-template-columns: 1fr; gap: 28px; }
  .site-foot .legal { justify-content: flex-start; }

  .hero .actions .btn, .notfound .actions .btn { flex: 1 1 auto; }
  .notfound .code { font-size: 76px; }
}

/* --- very small: <= 360px ------------------------------------------------ */
@media (max-width: 360px) {
  html, body { font-size: 14px; }
  :root { --rl-gutter: 16px; }
  .h-display { font-size: 31px; }
  .site-nav .brand { font-size: 12px; }
}

/* --- wide: keep hero from getting lost on very large screens ------------- */
@media (min-width: 1440px) {
  .hero { padding-top: 120px; }
}

/* ---------------------------------------------------- MOTION PREFERENCES -- */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: rlFadeUp 480ms var(--rl-ease) both; }
  .fade-up.d1 { animation-delay: 60ms; }
  .fade-up.d2 { animation-delay: 120ms; }
  .fade-up.d3 { animation-delay: 180ms; }
}
@keyframes rlFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------- PRINT (legal) -- */
@media print {
  .site-nav, .site-foot .legal, .brick { display: none; }
  html, body { background: #fff; color: #000; }
  a { color: #000; }
}