/* ============================================================
   ad.miniaccountant.app — landing styles
   Tokens mirror the app design system: mobile/design/storybook.css
   (dark theme, the app's default). Values the app system has no
   token for are grouped under "Proposed DS additions" below.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Design system (storybook.css, dark) ---- */
  --surface: #1B1B1F;
  --on-surface: #E3E2E6;
  --on-surface-variant: #C4C6D0;
  --primary: #9E9E9E;
  --primary-light: #BDBDBD;
  --on-primary: #FFFFFF;
  --outline: #8E9099;
  --outline-variant: #44474E;
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.10);
  --page-bg: #0E0E10;
  --scrim: #000000;
  --nav-bg: rgba(14, 14, 16, 0.92);
  --fab-bg: #FFFFFF;
  --fab-fg: var(--surface);
  --card-border: var(--outline-variant);
  --card-btn-bg: var(--surface-3);
  --card-btn-fg: var(--on-surface);
  --annotation: #FF8A3D;
  --on-annotation: #1B1B1F;
  --positive: #8FBF9F;  /* SemanticColors.positive */
  --warning: #E0B872;   /* SemanticColors.warning */
  --negative: #E39A91;  /* SemanticColors.negative */
  --ocean-primary-light: #4285D6;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-pill: 999px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* ---- Proposed DS additions (marketing pages) ---- */
  /* spacing: the DS scale 4/8/12/16/20/24/32, continued for sections */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  /* type: the DS app scale (12 / 14 / 16 / 20) plus display steps */
  --text-label: 12px;
  --text-body: 14px;
  --text-button: 16px;
  --text-lead: 18px;
  --text-title: 20px;
  --text-h3: 24px;
  --text-h2: clamp(30px, 4vw, 40px);
  --text-display: clamp(40px, 6.4vw, 64px);
  /* layout */
  --container: 1120px;
  --container-narrow: 680px;
  --nav-h: 64px;
  /* motion: the DS has only 120–150ms hover fades */
  --motion-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-standard: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-duration-hover: 150ms;
  --motion-duration-medium: 700ms;
  --motion-duration-slow: 900ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-16)); }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: var(--text-lead);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 600; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--text-display); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-title); line-height: 1.3; }
:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 3px; border-radius: var(--radius-s); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-20); }
.muted { color: var(--on-surface-variant); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: var(--space-16); top: -100px; z-index: 100;
  background: var(--fab-bg); color: var(--fab-fg); padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-s); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--space-16); }

/* ---------- buttons (DS §8, outlined + text tiers) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; padding: 0 var(--space-20);
  border-radius: var(--radius-m); border: 0;
  font: 600 var(--text-button) / 1 var(--font);
  text-decoration: none; cursor: pointer;
  transition: background var(--motion-duration-hover), transform var(--motion-duration-hover);
}
.btn:active { transform: translateY(1px); }
.btn.outlined { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn.outlined:hover { background: rgba(158, 158, 158, 0.08); }
/* the FAB colours of the dark theme: the only light-on-dark filled control in the DS */
.btn.fab { background: var(--fab-bg); color: var(--fab-fg); }
.btn.fab:hover { background: var(--on-surface); }
.btn.small { min-height: 40px; padding: 0 var(--space-16); font-size: var(--text-body); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.badges a { display: block; border-radius: var(--radius-s); transition: transform var(--motion-duration-hover); }
.badges a:hover { transform: translateY(-1px); }
.badges img { height: 48px; width: auto; }

/* ---------- navigation ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  border-bottom: 1px solid var(--outline-variant);
}
/* the blur sits on a pseudo-element: backdrop-filter on the bar itself would
   make it the containing block of the fixed mobile menu panel */
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
}
.site-nav .container { height: 100%; display: flex; align-items: center; gap: var(--space-24); }
.brand { display: flex; align-items: center; gap: var(--space-8); font-weight: 600; font-size: var(--text-button); text-decoration: none; margin-right: auto; }
.brand img { width: 32px; height: 32px; }
.nav-links { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: var(--space-8) var(--space-12); border-radius: var(--radius-s);
  color: var(--on-surface-variant); font-size: var(--text-body); font-weight: 500; text-decoration: none;
  transition: background var(--motion-duration-hover), color var(--motion-duration-hover);
}
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--on-surface); background: var(--surface-2); }
.menu-btn {
  display: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--on-surface); cursor: pointer; padding: 0;
}
.menu-btn span { display: block; width: 20px; height: 2px; margin: 4px auto; background: currentColor; border-radius: 2px;
  transition: transform 400ms var(--motion-ease-in-out), opacity 200ms; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav-cta { display: none; }
  .nav-panel {
    position: fixed; inset: var(--nav-h) 0 0 0; padding: var(--space-24) var(--space-20);
    background: rgba(14, 14, 16, 0.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    visibility: hidden; opacity: 0; transition: opacity 300ms var(--motion-ease-standard), visibility 0s 300ms;
  }
  .menu-open .nav-panel { visibility: visible; opacity: 1; transition: opacity 300ms var(--motion-ease-standard); }
  .nav-links { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .nav-links a { font-size: var(--text-h3); color: var(--on-surface); padding: var(--space-12) var(--space-8); }
  .nav-links li { opacity: 0; transform: translateY(var(--space-24)); }
  .menu-open .nav-links li {
    opacity: 1; transform: none;
    transition: opacity 400ms var(--motion-ease-standard), transform 400ms var(--motion-ease-entrance);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
}

/* ---------- sections ---------- */
main { padding-top: var(--nav-h); }
section { padding: var(--space-96) 0; }
.section-head { max-width: var(--container-narrow); margin-bottom: var(--space-48); }
.section-head p { margin-top: var(--space-16); color: var(--on-surface-variant); }
.eyebrow { display: inline-block; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: var(--space-12); }

/* hero */
.hero { padding: var(--space-64) 0 var(--space-96); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-64); }
.hero-copy { max-width: var(--container-narrow); }
.hero-copy .lead { margin-top: var(--space-24); color: var(--on-surface-variant); max-width: 34em; }
.hero-actions { margin-top: var(--space-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.proof { margin-top: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); font-size: var(--text-body); color: var(--on-surface-variant); list-style: none; padding: 0; }
.proof li { display: flex; align-items: center; gap: var(--space-8); }
.proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.phone {
  position: relative; width: 300px; aspect-ratio: 600 / 1300; padding: 10px;
  background: var(--scrim); border-radius: 44px; border: 1px solid var(--outline-variant);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 6px var(--surface-1);
}
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: var(--surface); }
.hero-visual { position: relative; animation: hero-rise var(--motion-duration-slow) var(--motion-ease-entrance) both; }
@keyframes hero-rise { from { transform: translateY(var(--space-32)); } }
.hero-visual::before {
  content: ""; position: absolute; inset: -18% -40%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ocean-primary-light) 22%, transparent), transparent 70%);
}
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: var(--space-48); }
  .hero-visual { justify-self: center; }
  .phone { width: min(280px, 72vw); }
}

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-16); }
.tile {
  grid-column: span 2; display: flex; flex-direction: column; gap: var(--space-24);
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-m);
  padding: var(--space-24); overflow: hidden; min-width: 0;
}
.tile.wide { grid-column: span 4; }
.tile.half { grid-column: span 3; }
.tile h3 { margin-bottom: var(--space-8); }
.tile p { font-size: var(--text-body); color: var(--on-surface-variant); line-height: 1.6; }
.viz { position: relative; flex: 1; min-height: 196px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile.wide, .tile.half { grid-column: span 1; }
  .tile.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile.wide, .tile.half { grid-column: auto; }
}

/* DS components used inside the tiles */
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-m); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); font-size: var(--text-button); font-weight: 500; margin-bottom: var(--space-4); }
.card-meta { font-size: 13px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.card-actions { display: flex; gap: var(--space-8); justify-content: flex-end; margin-top: var(--space-12); }
.card-btn { width: 44px; height: 44px; border-radius: var(--radius-s); background: var(--card-btn-bg); color: var(--card-btn-fg); display: inline-flex; align-items: center; justify-content: center; }
.card-btn svg { width: 20px; height: 20px; }
.status-pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-8);
  border-radius: var(--radius-pill); border: 1px solid currentColor; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  transition: color 400ms var(--motion-ease-standard);
}
.status-pill.paid { color: var(--positive); }
.status-pill.partial { color: var(--warning); }
.status-pill.unpaid { color: var(--negative); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.kpi { border: 1px solid var(--outline-variant); border-radius: var(--radius-m); padding: var(--space-12) var(--space-16); }
.kpi .label { font-size: var(--text-label); color: var(--on-surface-variant); }
.kpi .value { margin-top: var(--space-8); font-size: var(--text-title); font-weight: 500; font-variant-numeric: tabular-nums; }
.month { display: flex; align-items: center; justify-content: center; gap: var(--space-16); font-size: var(--text-body); font-weight: 600; }
.month .arrow { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-surface); }
.month .arrow.tap { background: var(--surface-3); }
.month .label { min-width: 9.5em; text-align: center; }
.field { border: 1px solid var(--outline-variant); border-radius: var(--radius-s); padding: var(--space-8) var(--space-12); }
.field .label { font-size: var(--text-label); color: var(--on-surface-variant); }
.field .value { font-size: var(--text-button); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.field.focus { border-color: var(--on-surface-variant); }
.field-note { font-size: 11px; color: var(--on-surface-variant); text-align: center; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--on-surface); }
.conv { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-8) var(--space-4) 0; font-size: var(--text-body); color: var(--on-surface-variant); }
.conv b { color: var(--on-surface); font-size: var(--text-title); font-weight: 500; font-variant-numeric: tabular-nums; }

/* mini invoice (the PDF the app makes) */
.paper { background: var(--on-primary); color: var(--surface); border-radius: var(--radius-s); padding: var(--space-16); font-size: 11px; line-height: 1.4; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.paper .ttl { color: var(--ocean-primary-light); font-size: var(--text-title); font-weight: 700; letter-spacing: 0.02em; }
.paper .meta { display: flex; justify-content: space-between; margin: var(--space-8) 0 var(--space-12); color: var(--outline-variant); }
.paper table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.paper th { background: var(--ocean-primary-light); color: var(--on-primary); font-weight: 600; text-align: left; padding: 4px 6px; }
.paper td { padding: 4px 6px; border-bottom: 1px solid var(--on-surface); }
.paper th:last-child, .paper td:last-child { text-align: right; }
.paper .total { text-align: right; font-weight: 700; margin-top: var(--space-8); font-variant-numeric: tabular-nums; }
.paper tr.add td { transition: none; }

/* chart (DS §7a) */
.chart-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-body); font-weight: 500; }
.chart-head span { color: var(--on-surface-variant); }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--outline-variant); stroke-dasharray: 3 4; }
.chart .axis text { fill: var(--on-surface-variant); font-size: 10px; font-family: var(--font); }
.chart .series { fill: none; stroke: var(--on-surface); stroke-width: 1.5; }
.chart .dots circle { fill: var(--on-surface); }
.chart .scrub { stroke: var(--on-surface-variant); stroke-width: 1; opacity: 0; }
.chart .active { fill: var(--page-bg); stroke: var(--on-surface); stroke-width: 2; opacity: 0; }
.chart-tooltip {
  position: absolute; top: 4px; left: 0; padding: var(--space-8) var(--space-12); pointer-events: none;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-s); font-size: var(--text-label); line-height: 1.5; white-space: nowrap;
  opacity: 0; font-variant-numeric: tabular-nums;
}

/* chat */
.chat { display: flex; flex-direction: column; gap: var(--space-8); }
.bubble { max-width: 86%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-m); font-size: var(--text-body); line-height: 1.45; }
.bubble.me { align-self: flex-end; background: var(--surface-3); }
.bubble.bot { align-self: flex-start; background: var(--surface-2); width: 86%; }
.bubble.bot table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-variant-numeric: tabular-nums; }
.bubble.bot td { padding: 3px 0; border-bottom: 1px solid var(--outline-variant); }
.bubble.bot td:last-child { text-align: right; }
.composer { display: flex; align-items: center; gap: var(--space-8); border: 1px solid var(--outline-variant); border-radius: var(--radius-s); padding: var(--space-8) var(--space-12); font-size: var(--text-body); min-height: 44px; }
.composer .text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.composer .placeholder { color: var(--on-surface-variant); }
.composer svg { width: 20px; height: 20px; color: var(--on-surface-variant); flex: none; }

/* languages and platforms */
.word { font-size: clamp(32px, 4vw, 44px); font-weight: 600; letter-spacing: -0.01em; min-height: 1.3em; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-12); border: 1px solid var(--outline-variant); border-radius: var(--radius-pill); font-size: 13px; color: var(--on-surface-variant); transition: color 300ms, border-color 300ms, background 300ms; }
.chip.lit { color: var(--on-surface); border-color: var(--on-surface-variant); background: var(--surface-2); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { border-top: 1px solid var(--outline-variant); padding-top: var(--space-24); }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: var(--space-16);
  border-radius: 50%; background: var(--annotation); color: var(--on-annotation); font-size: var(--text-body); font-weight: 700;
}
.steps p { margin-top: var(--space-8); font-size: var(--text-button); color: var(--on-surface-variant); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* developers */
.links3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.link-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); text-decoration: none;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-m);
  transition: background var(--motion-duration-hover), transform var(--motion-duration-hover); }
.link-card:hover { background: color-mix(in srgb, var(--surface) 92%, white); transform: translateY(-2px); }
.link-card p { font-size: var(--text-body); color: var(--on-surface-variant); }
.link-card .go { margin-top: auto; padding-top: var(--space-8); font-size: var(--text-body); font-weight: 600; }
.link-card code { font-size: 13px; color: var(--on-surface); }
@media (max-width: 860px) { .links3 { grid-template-columns: 1fr; } }

/* tagline (signature moment) */
.tagline p { font-size: var(--text-h2); line-height: 1.2; font-weight: 600; max-width: 22em; letter-spacing: -0.01em; text-wrap: balance; }
.tagline .w { color: var(--on-surface); }
.js .tagline .w { color: var(--outline); transition: color 600ms var(--motion-ease-standard); }
.js .tagline .w.on { color: var(--on-surface); }

/* price */
.price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-32); align-items: center;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-m); padding: var(--space-32); }
.price p { margin-top: var(--space-12); color: var(--on-surface-variant); }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; } }

/* faq */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--outline-variant); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-16);
  padding: var(--space-20) 0; font-size: var(--text-button); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--on-surface-variant); border-bottom: 2px solid var(--on-surface-variant);
  transform: rotate(45deg) translateY(-3px); transition: transform 300ms var(--motion-ease-in-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .a { padding: 0 0 var(--space-20); font-size: var(--text-button); color: var(--on-surface-variant); max-width: 65ch; }
.faq .a a { color: var(--on-surface); }

/* final cta */
.final { text-align: center; }
.final h2 { max-width: 18em; margin: 0 auto; }
.final p { margin: var(--space-16) auto 0; max-width: 36em; color: var(--on-surface-variant); }
.final .hero-actions { justify-content: center; }

/* footer */
.site-footer { border-top: 1px solid var(--outline-variant); padding: var(--space-48) 0; font-size: var(--text-body); color: var(--on-surface-variant); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); list-style: none; margin: 0; padding: 0; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--on-surface); text-decoration: underline; }
.social { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-s); color: var(--on-surface-variant); transition: background var(--motion-duration-hover), color var(--motion-duration-hover); }
.social a:hover { background: var(--surface-2); color: var(--on-surface); }
.social svg { width: 20px; height: 20px; }
.copy { width: 100%; }

/* consent */
.consent {
  position: fixed; left: var(--space-16); right: var(--space-16); bottom: var(--space-16); z-index: 60; max-width: 560px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16);
  padding: var(--space-16) var(--space-20); background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-m);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); font-size: var(--text-body); color: var(--on-surface-variant);
}
.consent p { flex: 1 1 260px; }
.consent a { color: var(--on-surface); }
.consent .row { display: flex; gap: var(--space-8); }

/* ---------- motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(var(--space-32)); transition: opacity var(--motion-duration-medium) var(--motion-ease-standard), transform var(--motion-duration-slow) var(--motion-ease-entrance); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .tile { opacity: 0; transform: translateY(24px) scale(0.985); filter: blur(6px);
  transition: opacity 600ms var(--motion-ease-standard), transform var(--motion-duration-slow) var(--motion-ease-entrance), filter var(--motion-duration-medium) var(--motion-ease-standard);
  transition-delay: var(--d, 0ms); }
.js .tile.in { opacity: 1; transform: none; filter: none; }
.js .tile [data-up] { opacity: 0; transform: translateY(10px); filter: blur(4px);
  transition: opacity var(--motion-duration-medium) var(--motion-ease-standard), transform 1s var(--motion-ease-entrance), filter var(--motion-duration-medium) var(--motion-ease-standard);
  transition-delay: calc(var(--d, 0ms) + 150ms + var(--k, 0) * 60ms); }
.js .tile.in [data-up] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-visual { animation: none; }
  .js [data-reveal], .js .tile, .js .tile [data-up] { opacity: 1; transform: none; filter: none; transition: none; }
  .js .tagline .w { color: var(--on-surface); transition: none; }
  .nav-links li, .menu-open .nav-links li { opacity: 1; transform: none; transition: none; }
}

/* ---------- simple pages (legal, 404) ---------- */
.page-head { border-bottom: 1px solid var(--outline-variant); }
.page-head .container { height: var(--nav-h); display: flex; align-items: center; gap: var(--space-16); }
.page-head .back { font-size: var(--text-body); color: var(--on-surface-variant); text-decoration: none; }
.page-head .back:hover { color: var(--on-surface); text-decoration: underline; }
.page { padding: var(--space-48) 0 var(--space-96); }
.prose { max-width: 72ch; font-size: var(--text-button); line-height: 1.65; color: var(--on-surface-variant); }
.prose h1 { font-size: var(--text-h2); color: var(--on-surface); margin-bottom: var(--space-24); }
.prose h2 { font-size: var(--text-h3); color: var(--on-surface); margin: var(--space-48) 0 var(--space-16); }
.prose h3 { color: var(--on-surface); margin: var(--space-32) 0 var(--space-12); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-16); }
.prose a { color: var(--on-surface); }
.prose li { margin-bottom: var(--space-8); }
.prose .loading { color: var(--on-surface-variant); }
/* the text arrives by fetch: keep the footer below the fold so it does not jump */
.page .prose { min-height: 100vh; }
.notfound { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; }
.notfound p { margin-top: var(--space-16); color: var(--on-surface-variant); max-width: 36em; }
.notfound .hero-actions { margin-top: var(--space-32); }