/* ============================================================
   Lexware — marketing site
   Built on the app's own design tokens (Ink navy + true-neutral
   grays; Geist Sans / Instrument Serif / Geist Mono). Fonts are
   self-hosted — the site makes no third-party network requests,
   which is the same posture the product takes.
   ============================================================ */

/* ---- Fonts (self-hosted woff2) ---- */
@font-face {
  font-family: 'Geist Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/geist-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/geist-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/geist-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/geist-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/geist-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/geist-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}

/* ============================================================
   Tokens (mirrored from the app's design system)
   ============================================================ */
:root {
  /* Neutral ramp */
  --neutral-0:#ffffff; --neutral-25:#fafafa; --neutral-50:#f5f5f6;
  --neutral-100:#ededee; --neutral-150:#e4e4e6; --neutral-200:#d7d7da;
  --neutral-300:#bbbbc0; --neutral-400:#919198; --neutral-500:#6d6d75;
  --neutral-600:#53535a; --neutral-700:#3e3e44; --neutral-800:#292a2e;
  --neutral-900:#1a1b1e; --neutral-950:#0e0f11;

  /* Ink (brand navy) */
  --ink-50:#eef3f9; --ink-100:#d8e3f0; --ink-200:#aec6e0; --ink-300:#7fa1c8;
  --ink-400:#4e76a6; --ink-500:#2e5585; --ink-600:#1f3a5f; --ink-700:#1a314f;
  --ink-800:#15273e; --ink-900:#101c2d; --ink-950:#0a1320;

  --green-50:#ecf5f0; --green-100:#d3e8dd; --green-600:#2d6a4f; --green-700:#235540;
  --amber-50:#faf2e8; --amber-100:#f3e0c8; --amber-600:#b8732a; --amber-700:#985d20;
  --red-50:#faecec; --red-100:#f2d3d3; --red-600:#9b2c2c; --red-700:#7e2222;

  --mark-amber:#fbe6a2; --mark-green:#c4e8cf; --mark-rose:#f4cdd6;
  --mark-violet:#d9d2f0; --mark-blue:#c5dcf2;

  /* Semantic */
  --surface-page:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --text-strong:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-subtle:var(--neutral-400);
  --border-subtle:var(--neutral-150);
  --border-default:var(--neutral-200);
  --brand:var(--ink-600);
  --brand-hover:var(--ink-700);

  /* Type */
  --font-sans:'Geist Sans','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display:'Instrument Serif','Georgia','Times New Roman',serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono','Menlo',monospace;

  --tracking-tighter:-0.03em; --tracking-tight:-0.015em; --tracking-caps:0.08em;

  /* Layout */
  --maxw:1120px;
  --gutter:clamp(20px, 5vw, 48px);
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px;
  --shadow-sm:0 1px 2px rgba(16,28,45,.06), 0 1px 3px rgba(16,28,45,.05);
  --shadow-md:0 4px 16px rgba(16,28,45,.08), 0 2px 6px rgba(16,28,45,.05);
  --shadow-lg:0 24px 60px rgba(16,28,45,.18), 0 8px 24px rgba(16,28,45,.10);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip; /* defensive: never allow horizontal scroll (clip is position:sticky-safe) */
}

h1,h2,h3,h4 { margin:0; color:var(--text-strong); font-weight:600; letter-spacing:var(--tracking-tight); line-height:1.15; }
p { margin:0; }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-hover); }
img,svg { display:block; max-width:100%; }
::selection { background:color-mix(in srgb, var(--ink-300) 55%, transparent); }

:focus-visible { outline:2px solid transparent; outline-offset:2px; box-shadow:0 0 0 3px color-mix(in srgb, var(--ink-500) 35%, transparent); border-radius:var(--radius-sm); }
/* transparent outline above becomes a visible focus ring in Windows High Contrast / forced-colors mode */

/* Skip-to-content link — visually hidden until focused (keyboard bypass-blocks) */
.skip-link {
  position:absolute; left:8px; top:-56px; z-index:100;
  background:var(--ink-600); color:#fff; padding:10px 16px;
  border-radius:var(--radius-sm); font-size:.9rem; font-weight:500;
  transition:top .15s ease;
}
.skip-link:focus { top:8px; color:#fff; text-decoration:none; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.eyebrow {
  font-family:var(--font-mono);
  font-size:.75rem; font-weight:500;
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--ink-400);
  margin:0 0 16px;
}
.serif { font-family:var(--font-display); font-weight:400; letter-spacing:var(--tracking-tight); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-size:.95rem; font-weight:500;
  padding:12px 20px; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--ink-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--ink-700); color:#fff; transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text-strong); border-color:var(--border-default); }
.btn-ghost:hover { background:var(--surface-card); border-color:var(--neutral-300); color:var(--text-strong); }
.btn-ondark { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:saturate(120%) blur(2px); }
.btn-ondark:hover { background:rgba(255,255,255,.20); color:#fff; }
.btn-light { background:#fff; color:var(--ink-700); }
.btn-light:hover { background:var(--ink-50); color:var(--ink-800); transform:translateY(-1px); }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--neutral-50) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-brand { display:flex; align-items:center; gap:10px; }
.nav-brand svg, .nav-brand img { height:30px; width:auto; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a {
  color:var(--text-body); font-size:.92rem; font-weight:500;
  padding:8px 12px; border-radius:var(--radius-sm);
}
.nav-links a:hover { color:var(--text-strong); background:var(--surface-sunken); }
.nav-links .btn { margin-left:8px; }
/* The element-scoped `.nav-links a` rule above is more specific than `.btn-primary`,
   so re-assert button colours here (otherwise nav buttons inherit body text colour). */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color:#fff; background:var(--ink-600); }
.nav-links a.btn-primary:hover { background:var(--ink-700); }
/* Mobile: stack the brand over a centred, wrapping nav row — no JS, all
   destinations stay reachable from the header (no hidden hamburger). */
@media (max-width:760px) {
  .nav { flex-direction:column; height:auto; gap:10px; padding-block:12px; }
  .nav-brand { justify-content:center; }
  .nav-links { flex-wrap:wrap; justify-content:center; gap:4px 6px; }
  .nav-links .btn { margin-left:0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(46,85,133,.16), transparent 60%),
    radial-gradient(800px 460px at 8% 8%, rgba(31,58,95,.10), transparent 55%),
    linear-gradient(180deg, var(--neutral-25), var(--surface-page));
  border-bottom:1px solid var(--border-subtle);
}
.hero-inner { padding:clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:920px) { .hero-grid { grid-template-columns:1fr; } }

.hero h1 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.04;
  letter-spacing:var(--tracking-tight); color:var(--neutral-950);
  margin:0 0 22px; max-width:16ch;
}
.hero h1 em { font-style:italic; color:var(--ink-600); }
.hero-sub { font-size:clamp(1.05rem, 1.6vw, 1.2rem); color:var(--text-body); max-width:46ch; margin:0 0 14px; }
.hero-note { font-size:.95rem; color:var(--text-muted); max-width:48ch; margin:0 0 30px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-meta { display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:30px; }
.hero-meta div { display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--text-muted); }
.hero-meta svg { width:17px; height:17px; color:var(--ink-500); flex:none; }

/* ============================================================
   Product mockup (CSS — synthetic, no real matter data ever)
   ============================================================ */
.mock {
  border-radius:var(--radius-lg);
  background:var(--neutral-0);
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg);
  transform-origin:center;
}
@media (max-width:920px) { .mock { transform:none; margin-top:8px; } }
.mock { max-width:100%; }
.mock-bar {
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:var(--neutral-100); border-bottom:1px solid var(--border-subtle);
}
.mock-dot { width:11px; height:11px; border-radius:50%; background:var(--neutral-300); flex:none; }
.mock-dot:nth-child(1){ background:#e0726a; } .mock-dot:nth-child(2){ background:#e3b341; } .mock-dot:nth-child(3){ background:#7bb87b; }
/* title must be able to truncate, not push the whole mock wider than the viewport */
.mock-title { margin-left:10px; min-width:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); letter-spacing:.02em; }
.mock-body { display:grid; grid-template-columns:148px minmax(0,1fr); min-height:330px; }
.mock-side { background:var(--neutral-50); border-right:1px solid var(--border-subtle); padding:14px 10px; }
.mock-side .matter { font-size:.78rem; font-weight:600; color:var(--text-strong); padding:6px 8px; }
.mock-side .matter span { display:block; font-family:var(--font-mono); font-size:.66rem; font-weight:400; color:var(--text-subtle); margin-top:2px; }
.mock-nav { margin-top:10px; display:flex; flex-direction:column; gap:1px; }
.mock-nav i {
  font-style:normal; font-size:.78rem; color:var(--text-body);
  padding:7px 9px; border-radius:7px; display:flex; align-items:center; gap:8px;
}
.mock-nav i.on { background:var(--ink-50); color:var(--ink-700); font-weight:600; }
.mock-nav i b { width:7px; height:7px; border-radius:2px; background:var(--neutral-300); }
.mock-nav i.on b { background:var(--ink-500); }
.mock-main { padding:16px 18px; background:var(--neutral-0); min-width:0; }
.mock-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.mock-chip { flex:none; }
.mock-h h4 { font-size:.92rem; }
.mock-chip { font-family:var(--font-mono); font-size:.64rem; padding:3px 8px; border-radius:999px; background:var(--ink-50); color:var(--ink-600); border:1px solid var(--ink-100); }

/* dispute matrix rows in the mock */
.mrow { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--border-subtle); border-radius:9px; margin-bottom:7px; background:var(--neutral-0); }
.mrow p { font-size:.74rem; color:var(--text-body); line-height:1.35; }
.mrow p span { font-family:var(--font-mono); color:var(--text-subtle); margin-right:6px; }
.tag { font-family:var(--font-mono); font-size:.6rem; font-weight:500; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.tag.admit { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-100); }
.tag.deny  { background:var(--red-50); color:var(--red-700); border:1px solid var(--red-100); }
.tag.notad { background:var(--amber-50); color:var(--amber-700); border:1px solid var(--amber-100); }
.tag.check { background:var(--neutral-100); color:var(--text-muted); border:1px solid var(--border-default); }

/* ============================================================
   Gallery — additional product shots (CSS only, synthetic data)
   Reuses the .mock chrome above; flat (no tilt) for a clean showcase.
   ============================================================ */
.gallery { background:var(--neutral-0); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.shots { display:flex; flex-direction:column; gap:clamp(40px,7vw,84px); }
.shot { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,60px); align-items:center; }
@media (max-width:880px){ .shot { grid-template-columns:1fr; gap:24px; } }
.shot:nth-child(even) .shot-media { order:2; }
@media (max-width:880px){ .shot:nth-child(even) .shot-media { order:0; } }
.shot .mock { transform:none; }   /* the hero keeps the tilt; gallery shots sit flat */
.shot-copy h3 { font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:var(--tracking-tight); color:var(--neutral-950); margin:0 0 12px; }
.shot-copy p { font-size:1rem; color:var(--text-body); max-width:46ch; }
.shot-copy .mono { color:var(--ink-700); font-weight:500; }

/* Documents shot — file list with format badges */
.doclist { display:flex; flex-direction:column; gap:6px; }
.docrow { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--neutral-0); }
.docrow.on { border-color:var(--ink-200); background:var(--ink-50); }
.docrow .name { font-size:.76rem; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.docrow .meta { font-family:var(--font-mono); font-size:.62rem; color:var(--text-subtle); white-space:nowrap; }
.ftype { font-family:var(--font-mono); font-size:.56rem; font-weight:600; letter-spacing:.04em; padding:3px 6px; border-radius:5px; white-space:nowrap; }
.ftype.pdf  { background:var(--red-50);   color:var(--red-700);   border:1px solid var(--red-100); }
.ftype.docx { background:var(--ink-50);   color:var(--ink-600);   border:1px solid var(--ink-100); }
.ftype.msg  { background:var(--amber-50); color:var(--amber-700); border:1px solid var(--amber-100); }

/* Chronology shot — timeline list */
.tl { display:flex; flex-direction:column; }
.tlrow { display:grid; grid-template-columns:80px minmax(0,1fr); gap:12px; padding:9px 2px; border-bottom:1px solid var(--border-subtle); }
.tlrow:last-child { border-bottom:0; }
.tldate { font-family:var(--font-mono); font-size:.62rem; color:var(--ink-500); font-weight:500; padding-top:1px; }
.tlrow .ev { font-size:.76rem; color:var(--text-body); line-height:1.35; }
.tlrow .src { display:block; font-family:var(--font-mono); font-size:.6rem; color:var(--text-subtle); margin-top:3px; }

/* Scratchpad shot — colour-coded excerpt cards */
.cards { display:flex; flex-direction:column; gap:9px; }
.card { padding:10px 12px; border:1px solid var(--border-subtle); border-left-width:3px; border-radius:8px; background:var(--neutral-0); }
.card.amber { border-left-color:var(--amber-600); }
.card.green { border-left-color:var(--green-600); }
.card.rose  { border-left-color:var(--red-600); }
.card q { display:block; font-size:.76rem; color:var(--text-strong); line-height:1.4; }
.card .note { display:block; font-size:.7rem; color:var(--text-muted); margin-top:5px; }
.card .cite { display:block; font-family:var(--font-mono); font-size:.58rem; color:var(--text-subtle); margin-top:6px; }

/* ============================================================
   Sections
   ============================================================ */
section { padding:clamp(56px, 8vw, 100px) 0; }
.section-head { max-width:60ch; margin-bottom:44px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem, 4vw, 3rem); line-height:1.08; letter-spacing:var(--tracking-tight);
  color:var(--neutral-950); margin:0 0 16px;
}
.section-head p { font-size:1.08rem; color:var(--text-body); }

/* The core loop */
.loop { background:var(--neutral-0); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.loop-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
@media (max-width:880px){ .loop-steps { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .loop-steps { grid-template-columns:1fr; } }
.loop-step { position:relative; padding:22px 20px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--neutral-25); }
.loop-step .num { font-family:var(--font-mono); font-size:.72rem; color:var(--ink-400); font-weight:500; }
.loop-step h3 { font-size:1.02rem; margin:10px 0 7px; }
.loop-step p { font-size:.9rem; color:var(--text-muted); }

/* Feature grid */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .features { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .features { grid-template-columns:1fr; } }
.feature {
  padding:26px 24px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  background:var(--surface-card); box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.feature:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--border-default); }
.feature .ico {
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--ink-50); color:var(--ink-600); margin-bottom:16px;
}
.feature .ico svg { width:22px; height:22px; }
.feature h3 { font-size:1.08rem; margin-bottom:8px; }
.feature p { font-size:.93rem; color:var(--text-muted); line-height:1.55; }

/* Privacy band (the headline for this audience) */
.privacy {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(46,85,133,.5), transparent 60%),
    linear-gradient(180deg, var(--ink-800), var(--ink-950));
  color:#fff;
}
.privacy .section-head h2 { color:#fff; }
.privacy .eyebrow { color:var(--ink-300); }
.privacy .lead { font-size:1.18rem; color:var(--ink-100); max-width:58ch; }
.privacy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
@media (max-width:840px){ .privacy-grid { grid-template-columns:1fr; } }
.pcard {
  padding:24px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.pcard h3 { color:#fff; font-size:1.02rem; margin-bottom:9px; display:flex; align-items:center; gap:9px; }
.pcard h3 svg { width:18px; height:18px; color:var(--ink-300); flex:none; }
.pcard p { color:var(--ink-100); font-size:.92rem; line-height:1.55; }
.pcard p strong { color:#fff; font-weight:600; }
.privacy-foot { margin-top:34px; font-size:.95rem; color:var(--ink-200); }
.privacy-foot a { color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* CTA / beta */
.cta { text-align:center; }
.cta-card {
  max-width:760px; margin-inline:auto; text-align:center;
  padding:clamp(36px,6vw,60px); border-radius:var(--radius-xl);
  background:var(--neutral-0); border:1px solid var(--border-subtle); box-shadow:var(--shadow-md);
}
.cta-card h2 { font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,4vw,2.7rem); letter-spacing:var(--tracking-tight); color:var(--neutral-950); margin-bottom:14px; }
.cta-card p { font-size:1.05rem; color:var(--text-body); max-width:48ch; margin:0 auto 26px; }
.cta-card .btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-fine { margin-top:18px; font-size:.85rem; color:var(--text-muted); }

/* ============================================================
   Content pages (privacy / beta)
   ============================================================ */
.page-hero { padding:clamp(56px,8vw,88px) 0 clamp(28px,4vw,40px); border-bottom:1px solid var(--border-subtle); background:linear-gradient(180deg,var(--neutral-25),var(--surface-page)); }
.page-hero h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:var(--tracking-tight); color:var(--neutral-950); margin-bottom:14px; max-width:20ch; }
.page-hero p { font-size:1.1rem; color:var(--text-body); max-width:60ch; }

.prose { max-width:760px; margin-inline:auto; padding:clamp(40px,6vw,64px) var(--gutter); }
.prose h2 { font-family:var(--font-display); font-weight:400; font-size:1.9rem; letter-spacing:var(--tracking-tight); color:var(--neutral-950); margin:42px 0 14px; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:1.12rem; margin:30px 0 10px; color:var(--text-strong); }
.prose p { margin:0 0 16px; color:var(--text-body); }
.prose ul { margin:0 0 18px; padding-left:22px; }
.prose li { margin:0 0 9px; color:var(--text-body); }
.prose li strong, .prose p strong { color:var(--text-strong); font-weight:600; }
.prose code { font-family:var(--font-mono); font-size:.86em; background:var(--surface-sunken); padding:2px 6px; border-radius:6px; color:var(--ink-700); }
.prose a { text-decoration:underline; text-underline-offset:3px; }
.prose a.btn { text-decoration:none; color:#fff; }   /* buttons in prose keep button styling, not link underline */
.prose a.btn-ghost { color:var(--text-strong); }
.prose hr { border:0; border-top:1px solid var(--border-subtle); margin:36px 0; }

.callout {
  display:flex; gap:14px; padding:18px 20px; border-radius:var(--radius-md);
  background:var(--ink-50); border:1px solid var(--ink-100); margin:0 0 22px;
}
.callout svg { width:20px; height:20px; color:var(--ink-600); flex:none; margin-top:2px; }
.callout p { margin:0; font-size:.95rem; color:var(--ink-800); }

table.kb { width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:.92rem; }
table.kb th, table.kb td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-subtle); }
table.kb th { font-size:.72rem; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-muted); font-weight:600; font-family:var(--font-mono); }
table.kb kbd { font-family:var(--font-mono); font-size:.82em; background:var(--neutral-0); border:1px solid var(--border-default); border-bottom-width:2px; border-radius:6px; padding:1px 6px; }

.faq { border-top:1px solid var(--border-subtle); }
.faq details { border-bottom:1px solid var(--border-subtle); padding:4px 0; }
.faq summary { cursor:pointer; padding:18px 4px; font-weight:600; color:var(--text-strong); font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-family:var(--font-mono); color:var(--ink-400); font-size:1.3rem; transition:transform .2s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 4px 20px; color:var(--text-body); }

/* ============================================================
   Beta password gate (rendered by functions/_middleware.js)
   Plain HTML form, no script — styled to match the rest of the site.
   ============================================================ */
.gate-section { padding:clamp(36px,6vw,72px) 0 clamp(56px,9vw,104px); }
.gate-card {
  max-width:440px; margin-inline:auto; text-align:center;
  padding:clamp(28px,5vw,40px); border-radius:var(--radius-xl);
  background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-md);
}
.gate-lock {
  width:52px; height:52px; margin:0 auto 18px; border-radius:14px;
  display:grid; place-items:center; background:var(--ink-50); color:var(--ink-600);
}
.gate-lock svg { width:24px; height:24px; }
.gate-form { display:flex; flex-direction:column; gap:12px; text-align:left; }
.gate-label {
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-muted);
}
.gate-input {
  font-family:var(--font-sans); font-size:1rem; color:var(--text-strong);
  padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid var(--border-default); background:var(--neutral-25);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gate-input:focus-visible {
  outline:2px solid transparent; border-color:var(--ink-400);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink-500) 30%, transparent);
}
.gate-submit { justify-content:center; margin-top:4px; }
.gate-error { margin:0; font-size:.88rem; color:var(--red-700); }
.gate-help { margin-top:20px; font-size:.9rem; color:var(--text-muted); text-align:center; }
.gate-help a { text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background:var(--neutral-950); color:var(--neutral-300); padding:56px 0 40px; }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; margin-bottom:36px; }
.footer-brand { max-width:300px; }
.footer-brand .lede { color:var(--neutral-400); font-size:.9rem; margin-top:14px; line-height:1.6; }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4 { font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--neutral-400); font-weight:500; margin-bottom:14px; }
.footer-col a { display:block; color:var(--neutral-300); font-size:.92rem; padding:5px 0; }
.footer-col a:hover { color:#fff; }
.footer-legal { border-top:1px solid var(--neutral-800); padding-top:26px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; }
.footer-legal p { font-size:.82rem; color:var(--neutral-400); }
.footer-legal .mono { color:var(--neutral-400); }

/* utilities */
.center { text-align:center; }
.mt-0 { margin-top:0; }

/* 404 */
.notfound { min-height:46vh; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.notfound .eyebrow { text-align:center; }
.notfound h1 { font-size:2.4rem; margin-bottom:12px; }
.notfound .actions { margin-top:18px; }
.footer-legal.bare { border-top:none; padding-top:0; }