/* ============================================================
   VOKT marketing site — shared design system

   Colour, type and geometry all come from tokens.css, which is
   generated from the app's brand package. Everything below maps
   this site's own names onto the SEMANTIC roles (--foreground,
   --card, --primary), never the --vokt-* primitives: only the
   roles flip for dark mode, so pointing at a primitive would
   quietly opt the site out of it.
   ============================================================ */

:root {
  /* Brand */
  --brand:        var(--primary);
  --brand-ink:    color-mix(in oklab, var(--primary) 84%, var(--foreground));
  --brand-tint:   var(--info-subtle);    /* soft highlight background */
  --brand-tint-2: color-mix(in oklab, var(--primary) 14%, var(--card));

  /* Neutrals */
  --ink:        var(--foreground);
  --ink-soft:   color-mix(in oklab, var(--foreground) 82%, var(--background));
  --surface:    var(--card);
  --surface-alt:var(--background);
  /* Terminal blocks read as a console in BOTH themes, so this one is
     deliberately a primitive — it must not invert with the theme. */
  --surface-dk: var(--vokt-grey-1);
  /* The brand grey (#6e7378) is 4.79:1 on white but 4.40:1 on --surface-alt,
     and this site sets secondary copy on both. Nudged 8% toward the text
     colour: 5.45:1 and 5.01:1, a shift of ~8/255 that reads as the same
     grey. Self-inverting, so dark mode gains contrast rather than losing it.
     Revert to var(--muted-foreground) if the exact token is preferred. */
  --text-muted:      color-mix(in oklab, var(--muted-foreground) 92%, var(--foreground));
  /* --border is defined by tokens.css and intentionally not redeclared here:
     redeclaring it as var(--border) would be self-referential. */

  /* Semantic */
  --green:      var(--success-foreground);
  --green-tint: var(--success-subtle);
  --warn:       var(--warning-foreground);

  /* Type */
  --font-display: var(--vokt-font-display);   /* Anybody — the WORDMARK only.
     The type specimen says headings are Arial; Anybody is not on it. */
  --font-heading: var(--vokt-font-heading);   /* Arial — interface chrome */
  --font-body:    var(--vokt-font-prose);     /* Literata — reading */
  --font-mono:    var(--vokt-font-mono);

  /* Spacing */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px;

  --maxw: 1080px;
}


* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga' 1, 'kern' 1;
}
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* ── Nav ───────────────────────────────────────────────── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: color-mix(in srgb, var(--card) 93%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-lg);
  display: flex; align-items: center; justify-content: space-between; height: 56px;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  /* The wordmark is the only tracked text in the brand: Anybody Bold at the
     measured +0.116em. Everything else stays Arial. */
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; color: var(--ink);
  letter-spacing: var(--vokt-tracking-wordmark); text-transform: uppercase;
}
/* The mark: frame as a CSS border, V as SVG.
   An SVG stroke is laid out in user space and then scaled, so on a 15.45px-wide
   box its four sides land on different sub-pixel boundaries — measured at 1x,
   left 73/255 against right 20/255. Browsers snap CSS borders to the device
   pixel grid, so the four sides are identical by construction.
   Proportions are vokt-mark.svg's: 464x600 (0.77333), rx 76 = 12.667% of the
   height, V centred at 43.17% of the height. */
.nav-logo .mark, .footer-brand .mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; border: 1px solid var(--border); color: var(--ink);
}

/* The optical correction goes on the TEXT, not the mark.
   align-items:center centres the BOXES, and the wordmark is all-caps — its line
   box reserves descender space no ink occupies, so the letters ride high and the
   mark reads 0.83px low against them. The obvious fix is to shift the mark up.
   That is wrong: a fractional transform puts the mark on a fractional device row,
   which turns OFF the border pixel-snapping that makes the frame even in the
   first place. Measured with the mark transformed: side-to-side spread 14 at
   dpr 1, 21 at 1.25, 85 at 1.5 and 2. With it removed: spread 0.
   Text is antialiased regardless, so it carries the shift for free. */
.nav-logo .wordmark, .footer-brand .wordmark { transform: translateY(0.047em); }
.nav-logo .mark   { width: 15.47px; height: 20px; border-radius: 2.53px; }
.footer-brand .mark { width: 12.37px; height: 16px; border-radius: 2.03px; }
.nav-logo .mark svg, .footer-brand .mark svg { height: 43.17%; width: auto; display: block; }
.nav-links { display: flex; gap: var(--space-lg); }
.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.82rem; font-weight: 500; color: var(--text-muted);
  letter-spacing: 0.01em; transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: var(--space-md); }
.nav-login {
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
  transition: color 0.15s; white-space: nowrap;
}
.nav-login:hover { color: var(--ink); }
/* ── Mobile menu ───────────────────────────────────────
   Below 860px the link list was simply display:none with no control to reveal
   it, so seven of the ten nav destinations were unreachable on a phone. The
   panel is the same <div class="nav-links">, re-laid-out. */
.nav-burger { display: none; }

@media (max-width: 860px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 0 9px;   /* 40px keeps the touch target legal */
    background: none; border: 1px solid var(--border); cursor: pointer;
    order: 3; flex: none;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%; background: var(--ink);
    transition: transform .18s, opacity .18s;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-links {
    display: none;
    position: fixed; inset: 57px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
    max-height: calc(100dvh - 57px); overflow-y: auto;
  }
  .nav-open .nav-links { display: flex; }
  .nav-links a {
    padding: 14px var(--space-lg);       /* 44px+ rows, comfortably tappable */
    font-size: 0.95rem; color: var(--ink);
    border-bottom: 1px solid var(--border);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-open { overflow: hidden; }        /* stop the page scrolling behind the panel */
}

@media (prefers-reduced-motion: reduce) {
  .nav-burger span { transition: none; }
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.5rem; font-family: var(--font-heading);
  font-size: var(--vokt-text-caps); font-weight: 700; letter-spacing: var(--vokt-tracking-caps);
  text-transform: uppercase; border: 1.5px solid transparent; cursor: pointer;
  border-radius: 0; transition: background 0.15s, opacity 0.15s, transform 0.1s, border-color 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--brand-ink); }
.btn-ghost { background: none; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--card); color: var(--brand); }
.btn-light:hover { opacity: 0.9; }
.nav-cta { padding: 0.5rem 1.15rem; font-size: var(--vokt-text-xs); }

/* ── Sections ──────────────────────────────────────────── */
.section {
  padding: var(--space-3xl) var(--space-lg);
  max-width: var(--maxw); margin: 0 auto;
}
.section-alt { background: var(--surface-alt); }
.section-label {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--space-md);
}
.section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); max-width: 22ch;
}
.section-sub {
  font-size: 1rem; color: var(--text-muted); max-width: 52ch;
  margin-top: var(--space-md); line-height: 1.65;
}
.section-head-center { text-align: center; }
.section-head-center h2, .section-head-center .section-sub { margin-left: auto; margin-right: auto; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  padding: clamp(7rem, 14vh, 11rem) var(--space-lg) clamp(3rem, 7vh, 6rem);
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); align-items: center;
}
.hero-label {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--space-md);
}
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.03em; color: var(--ink);
}
.hero h1 span { color: var(--brand); }
.hero-sub {
  font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--text-muted);
  max-width: 46ch; margin: var(--space-lg) 0 var(--space-md); line-height: 1.6;
}
.hero-support {
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  color: var(--ink-soft); letter-spacing: 0.02em; margin-bottom: var(--space-xl);
}
.hero-ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--space-md); }
}

/* ── Terminal / demo blocks (dashboard + verified answers) ─ */
.hero-visual, .demo-block, .ocr-after {
  background: var(--surface-dk); color: #cfd3da;
  font-family: var(--font-mono); border-radius: 0;
}
.hero-visual {
  padding: var(--space-lg); position: relative; font-size: 0.76rem;
  line-height: 1.8; overflow: hidden;
}
.hero-visual .dots { position: absolute; top: 12px; left: 14px; display: flex; gap: 6px; }
.hero-visual .dots span { width: 10px; height: 10px; border-radius: 50%; }
.hero-visual .dots span:nth-child(1) { background: #e0533f; }
.hero-visual .dots span:nth-child(2) { background: #e8b23f; }
.hero-visual .dots span:nth-child(3) { background: #3fb069; }
.hero-visual .content { padding-top: 22px; }
.demo-block {
  margin-top: var(--space-xl); padding: var(--space-xl);
  font-size: 0.82rem; line-height: 1.7; overflow-x: auto; position: relative;
}
.demo-prompt, .hero-visual .prompt { color: #6f9bff; font-weight: 600; }
.demo-prompt::before, .hero-visual .prompt::before { content: '> '; color: #8b8f98; }
.demo-response, .hero-visual .response { color: #e5e7eb; margin: var(--space-sm) 0 var(--space-md); }
.hero-visual .response { margin-bottom: var(--space-md); }
.demo-cite, .hero-visual .source {
  color: #8b8f98; font-size: 0.72rem;
  border-top: 1px solid #2a2d33; padding-top: var(--space-sm); margin-top: var(--space-sm);
}
.hero-visual .source { font-size: 0.68rem; }
.badge, .demo-badge {
  font-family: var(--font-heading); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #4fd08a;
  background: rgba(79, 208, 138, 0.14); padding: 0.18rem 0.55rem; border-radius: 0;
}
.hero-visual .badge { display: inline-block; font-size: 0.55rem; margin-bottom: var(--space-sm); }
.demo-badge { position: absolute; top: var(--space-md); right: var(--space-md); font-size: 0.6rem; }

/* ── Pillars grid (Four Pillars of VOKT) ───────────────── */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg); margin-top: var(--space-2xl);
}
.pillar {
  padding: var(--space-lg); background: var(--surface);
  border: 1px solid var(--border); border-radius: 0;
  border-top: 3px solid var(--brand);
}
.pillar h3 {
  font-size: 1rem; font-weight: 700; margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}
.pillar p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* ── Capability grid (generic feature list) ────────────── */
.cap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg); margin-top: var(--space-xl);
}
.cap-item { padding: var(--space-lg) 0; border-top: 1px solid var(--border); }
.cap-item h3 {
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}
.cap-item p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; max-width: 40ch; }

/* ── Deployment mode cards ─────────────────────────────── */
.mode-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg); margin-top: var(--space-2xl);
}
.mode-card {
  padding: var(--space-lg); border: 1px solid var(--border);
  border-radius: 0; background: var(--surface); display: flex; flex-direction: column;
}
.mode-card .mode-name {
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
  color: var(--brand); margin-bottom: var(--space-xs);
}
.mode-card .mode-best {
  font-size: 0.78rem; color: var(--text-muted); margin-bottom: var(--space-md);
}
.mode-card .mode-best b { color: var(--ink); font-weight: 600; }
.mode-card > p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--space-md); }
.mode-card ul { list-style: none; margin-top: auto; }
.mode-card li {
  font-size: 0.84rem; color: var(--text-muted); padding-left: 1.3rem; position: relative;
  margin-bottom: var(--space-xs); line-height: 1.5;
}
.mode-card li::before {
  content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: 0.8rem;
}
@media (max-width: 720px) { .mode-grid { grid-template-columns: 1fr; } }

/* ── Deployment quick-cards (homepage carousel row) ────── */
.deploy-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md); margin-top: var(--space-xl);
}
.deploy-chip {
  padding: var(--space-md); border: 1px solid var(--border); border-radius: 0;
  text-align: center; background: var(--surface);
}
.deploy-chip strong { font-family: var(--font-heading); font-size: 0.9rem; color: var(--ink); display: block; }
.deploy-chip span { font-size: 0.76rem; color: var(--text-muted); }
@media (max-width: 640px) { .deploy-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Guardrails strip / trust signals ──────────────────── */
.guardrails-strip {
  display: flex; gap: var(--space-xl); align-items: flex-start;
  margin-top: var(--space-xl); flex-wrap: wrap;
}
.guard-item {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 0.85rem; font-weight: 500; color: var(--ink);
}
.guard-check {
  width: 20px; height: 20px; background: var(--green-tint); border-radius: 0;
  color: var(--green); display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}

/* ── Bullet list (compliance / feature bullets) ────────── */
.check-list { list-style: none; margin-top: var(--space-lg); }
.check-list li {
  font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6;
  padding-left: 1.7rem; position: relative; margin-bottom: var(--space-sm); max-width: 60ch;
}
.check-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0.05rem;
  color: var(--green); font-weight: 700;
}

/* ── OCR demo (before → after) ─────────────────────────── */
.ocr-demo {
  display: grid; grid-template-columns: 1fr 32px 1fr; gap: 0;
  align-items: stretch; margin-top: var(--space-xl);
}
.ocr-before {
  background: var(--surface-alt); padding: var(--space-lg);
  border: 1px solid var(--border); border-radius: 0;
  font-size: 0.85rem; color: var(--text-muted);
}
.ocr-arrow {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--brand);
}
.ocr-after { padding: var(--space-lg); font-size: 0.78rem; color: #e5e7eb; line-height: 1.8; border-radius: 0; }
.ocr-after .tag { margin-bottom: var(--space-sm); font-family: var(--font-heading); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4fd08a; }
@media (max-width: 640px) {
  .ocr-demo { grid-template-columns: 1fr; }
  .ocr-before { border-radius: 0; }
  .ocr-after { border-radius: 0; }
  .ocr-arrow { transform: rotate(90deg); padding: var(--space-sm) 0; }
}

/* ── Comparison table ──────────────────────────────────── */
.compare-table { margin-top: var(--space-xl); width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.compare-table th {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 2px solid var(--ink); color: var(--ink);
}
.compare-table th:first-child { padding-left: 0; }
.compare-table td {
  padding: var(--space-md); border-bottom: 1px solid var(--border);
  color: var(--text-muted); vertical-align: top;
}
.compare-table td:first-child { padding-left: 0; color: var(--ink); font-weight: 500; }
.compare-table .yes { color: var(--green); font-weight: 600; }
.compare-table .no  { color: var(--text-muted); }
.compare-table .vokt-col { background: var(--brand-tint); }

/* ── Pricing table ─────────────────────────────────────── */
.price-table { margin-top: var(--space-2xl); width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.price-table th {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: left;
  padding: var(--space-md); border-bottom: 2px solid var(--ink); color: var(--ink);
}
.price-table td { padding: var(--space-md); border-bottom: 1px solid var(--border); color: var(--text-muted); }
.price-table td:first-child { color: var(--ink); font-weight: 600; font-family: var(--font-heading); }
.price-table .price { color: var(--brand); font-weight: 700; font-family: var(--font-heading); font-size: 1.05rem; }

/* ── Simple info blocks (token economics, services) ────── */
.info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.info-block { padding: var(--space-lg); background: var(--surface-alt); border-radius: 0; }
.info-block h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: var(--space-xs); }
.info-block p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.info-block .figure { font-family: var(--font-heading); font-weight: 700; color: var(--brand); font-size: 1.3rem; }

/* ── Steps ─────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step); font-family: var(--font-heading);
  font-size: 2.4rem; font-weight: 700; color: var(--brand); opacity: 0.25;
  line-height: 1; display: block; margin-bottom: var(--space-md);
}
.step h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: var(--space-sm); }
.step p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }

/* ── Metrics bar ───────────────────────────────────────── */
.metrics { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-top: var(--space-2xl); }
.metric-val { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.metric-label { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-xs); }

/* ── Final CTA ─────────────────────────────────────────── */
.final-cta {
  padding: var(--space-3xl) var(--space-lg); max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--border); text-align: center;
}
.final-cta h2 {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.025em;
}
.final-cta p { font-size: 1rem; color: var(--text-muted); max-width: 44ch; margin: var(--space-md) auto var(--space-xl); line-height: 1.65; }
.final-cta .hero-ctas { justify-content: center; }

/* ── Beta / demo form ──────────────────────────────────── */
.beta-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 400px; margin: 0 auto; }
.beta-form input {
  padding: 0.7rem 1rem; font-family: var(--font-body); font-size: 0.9rem;
  border: 1.5px solid var(--border); border-radius: 0; background: var(--surface);
  color: var(--ink); outline: none; transition: border-color 0.15s;
}
.beta-form input:focus { border-color: var(--brand); }
.beta-form input::placeholder { color: var(--text-muted); }
.beta-success { display: none; font-size: 0.9rem; color: var(--green); margin-top: var(--space-md); }

/* ── Footer ────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); padding: var(--space-xl) var(--space-lg);
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 0.8rem; color: var(--text-muted); flex-wrap: wrap; gap: var(--space-lg);
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--ink); letter-spacing: var(--vokt-tracking-wordmark);
  text-transform: uppercase; margin-bottom: var(--space-xs);
}

.footer-links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.footer-links a { font-size: 0.8rem; color: var(--text-muted); transition: color 0.15s; }
.footer-links a:hover { color: var(--ink); }
.footer-marks { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }
.footer-mark {
  font-family: var(--font-heading); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 0; color: var(--text-muted);
}

/* ── Scroll-reveal animation ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); animation: reveal 0.6s ease-out forwards; }
  .reveal-1 { animation-delay: 0.05s; }
  .reveal-2 { animation-delay: 0.10s; }
  .reveal-3 { animation-delay: 0.15s; }
  .reveal-4 { animation-delay: 0.20s; }
  @keyframes reveal { to { opacity: 1; transform: translateY(0); } }
}

/* Placed last on purpose: these rules have the same specificity as the ones
   they stand in for, so they win only on source order.
   color-mix landed in Chrome 111 / Safari 16.2 / Firefox 113. Everything below
   is the same value computed statically, for engines older than that. It has to
   live in @supports: a declaration-level fallback cannot work, because every one
   of these contains a var() and so is never rejected at parse time. */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --brand-ink:    #1f419a;
    --brand-tint-2: #dde6f7;
    --ink-soft:     #313437;
    --text-muted:   #666a6f;   /* the oklab mix, resolved: 5.45:1 on white */
  }
  /* background-color, not the shorthand: the shorthand resets every other
     background longhand as a side effect. */
  nav { background-color: rgba(255, 255, 255, 0.93); }
}