/* ============================================================
   OPENBIZNIS — Marketing site design system
   Tokens sourced from Branding & Guidelines/Branding.md
   Headlines: Cascadia Code · Body: Google Sans Flex
   Surface language: Palantir pass 2026-08-10 — square, flat,
   hairline-ruled, weight 400, frosted glass over the artwork.
   ============================================================ */

/* ---------- Fonts ---------- */
/* One variable file covers every weight the site asks for (600 and 700), so it
   replaces the two static Stack Sans cuts rather than sitting alongside them.
   Subset to Latin + Latin-1 + Latin Extended-A + General Punctuation: 42 KB
   against the full face's 210 KB. Headlines only ever render ASCII plus an
   em dash (verified against every page's computed styles), so the extended
   ranges are pure headroom for future copy. The wght axis is preserved. */
@font-face {
  font-family: 'Cascadia Code';
  src: url('assets/fonts/CascadiaCode-Latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
/* Body face is NOT subset: it carries the Slovak diacritics in the footer
   (IČO, Tamáši) and the ✓ ✕ → marks in the compare lists and buttons. */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('assets/fonts/GoogleSansFlex-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('assets/fonts/GoogleSansFlex-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg-canvas: #08090a;
  --bg-deep: #050506;
  --bg-nav: #151617;
  --bg-panel: #1b1c1d;
  --bg-card: #222324;
  --bg-card-raised: #292a2b;
  /* --surface-openbiz (the #1e1e1e slab) retired 2026-08-10: every surface
     that used it is now frosted glass. See --glass below. */

  --text-primary: #f7f7f5;
  --text-secondary: #c7c9c8;
  --text-muted: #8b8e8d;
  --text-faint: #626564;

  --border-subtle: #343638;
  --border-default: #55585a;
  --border-strong: #7b7e80;
  --hairline: rgb(255 255 255 / 8%);
  --hairline-strong: rgb(255 255 255 / 18%);

  --accent-brand: #ffffff;
  --accent-brand-soft: rgb(255 255 255 / 55%);
  --accent-green: #25d690;
  --accent-green-soft: #78e7b6;
  --accent-red: #e56a64;
  --accent-amber: #b9691e;

  --btn-light-bg: #d3d3d3;

  /* Apple UI kit pass, 2026-08-04 — read from Openbiz UI Kit.sketch, not estimated.
     Only the control system came from the kit; type is Cascadia Code /
     Google Sans (headlines moved off Stack Sans 2026-08-06). */
  --sys-blue: #0091ff;
  --sys-blue-menu: #0069f9;
  --sys-red: #ff4747;
  --control-bg: rgb(255 255 255 / 8%);
  --surface-groupbox: rgb(255 255 255 / 3%);
  --groupbox-border: rgb(255 255 255 / 6%);
  --radius-control: 6px;
  --radius-groupbox: 10px;
  --radius-menu: 10px;
  --radius-dialog: 16px;
  --overlay-scrim: rgb(23 23 23 / 62%);
  --shadow-menu: 0 4px 24px rgb(0 0 0 / 30%), 0 0 0 0.5px rgb(0 0 0 / 80%);
  --shadow-alert: 0 18px 48px rgb(0 0 0 / 45%);
  --focus-ring: 0 0 0 1px var(--sys-blue), 0 0 10px 3px rgb(10 132 255 / 45%);

  /* Palantir pass, 2026-08-10 — measured off palantir.com, not remembered.
     Their surfaces are square (radius 0 on ~920 of 1000 rendered elements),
     flat, and separated by 1px hairlines rather than by shadow. Nothing on
     that site lifts, glows, or drops a shadow. The pill radius survives at
     2px because a 0-radius chip reads as a table cell, not a tag. */
  --radius-sm: 0;
  --radius-button: 0;
  --radius-pill: 2px;
  --radius-card: 0;

  /* Frosted glass. Palantir runs rgba(255,255,255,0.2) over blur(10px), but
     theirs sits on light photography; at 20% over our starfield the panel
     goes milky and the artwork behind it dies. 5% keeps the stars readable
     through the panel, which is the whole point of glass over an image. */
  --glass: rgb(255 255 255 / 5%);
  --glass-raised: rgb(255 255 255 / 8%);
  --glass-blur: blur(10px) saturate(120%);

  /* Monospaced on purpose -- it matches the app's headings and the wordmark in
     the logo, which is set in the same face. Fallback stack is monospace so a
     slow load degrades to fixed-width rather than to a proportional sans. */
  --font-headline: 'Cascadia Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-body: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --content-max: 1240px;
  --nav-h: 68px;
}

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

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

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgb(255 255 255 / 20%); color: #fff; }

/* ---------- Scrolling background ---------- */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-deep);
}
/* Artwork is portrait (736 x 1445). Filling the viewport width lets the full
   mountain composition read on narrow screens and gives the scroll plenty of
   vertical travel on wide ones. */
.bg-stage img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 130vh;
  object-fit: cover;
  object-position: center 28%;
  transform: translate3d(-50%, var(--bg-shift, 0px), 0);
  will-change: transform;
  opacity: 0.9;
}
/* Scrim keeps type legible over the artwork */
.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgb(8 9 10 / 72%) 0%,
      rgb(8 9 10 / 55%) 28%,
      rgb(8 9 10 / 78%) 62%,
      rgb(8 9 10 / 94%) 100%);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }

.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 128px 0; } }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Typography ---------- */
/* 10px, uppercase, 0.05em — Palantir's section label, measured off their
   markup (10px / 0.5px tracking). The glowing dot went with the shadows. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--border-default);
}

/* Weight 400, not 700. Palantir sets every heading on the page at 400,
   including the h1 — the hierarchy is carried by size and tracking alone.
   Cascadia is variable across 200–700, so this costs no extra file. */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--text-primary);
}

.h-display {
  font-size: clamp(42px, 7.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.h-section {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02;
}
.h-card { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; }

.lede {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-top: 22px;
}
.muted { color: var(--text-muted); }
.body-sm { font-size: 14.5px; line-height: 1.62; color: var(--text-secondary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .18s ease-out, background .18s ease-out,
              border-color .18s ease-out, box-shadow .18s ease-out;
}
/* Nothing lifts on hover any more — Palantir's controls change tone, not
   position. The travel was the most un-Palantir thing on the page. */
.btn:active { opacity: .85; }

.btn--primary {
  background: var(--btn-light-bg);
  color: #101010;
}
.btn--primary:hover { background: #ffffff; }

/* The former --btn--ghost solid slab is now glass: it sits over the
   starfield instead of hiding it. */
.btn--ghost {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--hairline);
  color: var(--text-primary);
}
.btn--ghost:hover { background: var(--glass-raised); border-color: var(--hairline-strong); }

.btn--line {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}
.btn--line:hover { border-color: var(--border-strong); background: rgb(255 255 255 / 4%); }

.btn--sm { padding: 9px 17px; font-size: 14px; }

.btn .arrow { display: inline-flex; transition: transform .18s ease-out; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgb(10 11 12 / 68%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.nav.is-scrolled {
  background: rgb(8 9 10 / 88%);
  border-bottom-color: var(--hairline);
}
.nav-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 768px) { .nav-inner { padding: 0 40px; } }

.nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-brand img { height: 26px; width: auto; }

.nav-links { display: none; align-items: center; gap: 4px; }
@media (min-width: 940px) { .nav-links { display: flex; } }
.nav-link {
  padding: 8px 14px;
  border-radius: 0;
  font-size: 14.5px;
  color: var(--text-secondary);
  transition: color .18s ease, background .18s ease;
}
.nav-link:hover { color: var(--text-primary); background: rgb(255 255 255 / 6%); }
.nav-link[aria-current='page'] { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-actions .btn--line { display: none; }
@media (min-width: 620px) { .nav-actions .btn--line { display: inline-flex; } }

.nav-burger {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 0;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
@media (min-width: 940px) { .nav-burger { display: none; } }
.nav-burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--text-primary);
  transition: transform .28s ease, opacity .28s ease;
}
.nav-burger span + span { margin-top: 4px; }
.nav-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 99;
  padding: 18px 24px 28px;
  background: rgb(8 9 10 / 97%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-120%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility .38s;
}
.nav-mobile.is-open { transform: translateY(0); visibility: visible; }
.nav-mobile a {
  display: block;
  padding: 14px 4px;
  font-size: 17px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--hairline);
}
.nav-mobile a:last-child { border-bottom: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 88px) 0 96px;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
}
@media (min-width: 768px) { .hero { padding: calc(var(--nav-h) + 120px) 0 128px; } }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--hairline);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  background: var(--accent-green);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 38px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent-brand-soft);
}

/* ---------- Cards ---------- */
/* Frosted panel, square, hairline-edged. The old treatment was an opaque
   slab with a 50px drop shadow and a 4px hover lift — three things Palantir
   never does. Hover now moves tone, not geometry. */
.card {
  position: relative;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: background .25s ease, border-color .25s ease;
}
.card--hover:hover { background: var(--glass-raised); border-color: var(--hairline-strong); }
.card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.62; margin-top: 10px; }

/* Icons are 22px stroked SVG inheriting currentColor — no tile behind them.
   The boxed-emoji treatment is what read as consumer SaaS. */
.card-icon {
  display: block;
  margin-bottom: 18px;
  color: var(--text-muted);
}
.ico {
  display: block;
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ico--sm { width: 16px; height: 16px; }
.ico--inline { display: inline-block; vertical-align: -.18em; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Stat row ---------- */
.stats { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: left; }
.stat .n {
  font-family: var(--font-headline);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-primary);
}
.stat .l {
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Before / after ---------- */
.compare { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { padding: 30px; border-radius: var(--radius-card); border: 1px solid var(--hairline); }
.compare-col--old { background: transparent; }
.compare-col--new {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--hairline-strong);
}
.compare-col h3 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  margin-bottom: 22px;
}
.compare-col--old h3 { color: var(--text-muted); }
.compare-col--new h3 { color: var(--text-primary); }
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 14.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--hairline);
}
.compare-list li:last-child { border-bottom: none; }
.compare-list .mk { flex-shrink: 0; display: flex; align-items: center; height: 22px; }
.compare-col--old .compare-list li { color: var(--text-muted); }
.compare-col--old .mk { color: var(--accent-red); }
.compare-col--new .compare-list li { color: var(--text-secondary); }
.compare-col--new .mk { color: var(--accent-green); }

/* ---------- Role groups ---------- */
.role-group { padding: 26px 28px; }
.role-group h4 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.role-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.role-chip {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 6%);
  border: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--text-secondary);
}

/* ---------- Feature list ---------- */
.feature-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list .fl-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 22px;
  color: var(--text-primary);
}
.feature-list strong {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 3px;
}
.feature-list p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Integration tiles ---------- */
.integration {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
}
.integration .name {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: 72px 32px;
  border-radius: var(--radius-card);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
}
.cta-band .lede { margin-left: auto; margin-right: auto; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  border-top: 1px solid var(--hairline);
  background: rgb(5 5 6 / 82%);
  padding: 64px 0 36px;
}
.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-brand img { height: 28px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--text-muted); font-size: 14px; max-width: 34ch; line-height: 1.6; }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color .18s ease;
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-faint);
}

/* ---------- Legal / prose pages ---------- */
.legal-hero {
  padding: calc(var(--nav-h) + 72px) 0 44px;
  border-bottom: 1px solid var(--hairline);
}
.legal-hero .h-section { max-width: 18ch; }
.legal-meta {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.legal-body { padding: 56px 0 96px; }
.prose { max-width: 76ch; }
.prose h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 {
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 26px 0 8px;
}
.prose p { color: var(--text-secondary); font-size: 15px; line-height: 1.72; margin-bottom: 15px; }
.prose ul { margin: 0 0 16px; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.68;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 5px; top: 11px;
  width: 5px; height: 5px;
  background: var(--text-faint);
}
.prose a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-default); }
.prose a:hover { text-decoration-color: var(--text-primary); }
.prose strong { color: var(--text-primary); font-weight: 500; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 14px;
}
.prose th, .prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.prose th {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prose td { color: var(--text-secondary); }
.table-wrap { overflow-x: auto; }

.legal-note {
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.legal-note p { margin: 0; font-size: 14px; color: var(--text-muted); }

.legal-index { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 700px) { .legal-index { grid-template-columns: repeat(2, 1fr); } }
.legal-index a {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  font-size: 14.5px;
  color: var(--text-secondary);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.legal-index a:hover { border-color: var(--border-default); color: var(--text-primary); background: rgb(255 255 255 / 3%); }

/* ---------- Reveal ----------
   The hidden state is scoped to .js, which is set by an inline script in
   <head>. Without JavaScript the content simply renders — it is never
   left invisible behind a transition that will not run. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d='1'] { transition-delay: .07s; }
.reveal[data-d='2'] { transition-delay: .14s; }
.reveal[data-d='3'] { transition-delay: .21s; }
.reveal[data-d='4'] { transition-delay: .28s; }

/* ---------- Utility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--btn-light-bg);
  color: #101010;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Focus is a box-shadow, never an outline — box-shadow follows border-radius,
   outline does not. The blurred second layer is what makes it a halo rather
   than a thick solid ring. (Branding.md, Apple UI kit pass 2026-08-04.) */
:where(a, button, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0;
}
.btn:focus-visible,
.nav-burger:focus-visible,
.nav-brand:focus-visible,
.footer-col a:focus-visible,
.nav-link:focus-visible { border-radius: 0; }

.mt-0 { margin-top: 0; }
.mt-6 { margin-top: 48px; }
.mt-8 { margin-top: 64px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .bg-stage img { transform: translate3d(-50%, 0, 0) !important; }
}