/* ──────────────────────────────────────────────────────────────
   Kinobi — shared styles for document pages (legal, trust, 404).
   Same tokens as index.html: one type scale (12px hard floor) and
   three colour roles (accent · positive · negative). Kept in one
   file so the subpages stay consistent and CSP-safe (style-src 'self').
   Font URLs are relative to THIS file (landing/assets/).
   ────────────────────────────────────────────────────────────── */

@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format('woff2')}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Type scale — mirrors index.html. 12px is a hard floor. */
  --t-hero:clamp(2.25rem,4.5vw,3.5rem);   /* 36 → 56 */
  --t-h2:clamp(1.5rem,2.6vw,2rem);        /* 24 → 32 */
  --t-h3:1.0625rem;                       /* 17 */
  --t-body:1rem;                          /* 16 */
  --t-nav:.8125rem;                       /* 13 */
  --t-sm:.875rem;                         /* 14 */
  --t-xs:.75rem;                          /* 12 — floor */
  --t-mono:.8125rem;                      /* 13 */
  --t-mono-sm:.75rem;                     /* 12 — floor */
  --t-logo:1.375rem;                      /* 22 — brand wordmark only */

  /* Neutral ramp */
  --fg:#fef3c7;--fg2:#d4c9a8;--fg3:#8a7f6a;--fg4:#4a4538;
  --bg:#09090b;--white:#111113;
  --border:#1e1e22;--border2:#27272a;--chip:#1a1a1e;

  /* Accent · positive · negative — the only three colour roles. */
  --accent:#ea580c;--accent-light:#fb923c;--accent-btn:#c2410c;
  --accent-soft:rgba(234,88,12,.12);
  --positive:#34d399;
  --negative:#f87171;

  --mono:'Geist Mono','SF Mono','Menlo',monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color-scheme:dark;
}

html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:var(--t-body);color:var(--fg);background:var(--bg);line-height:1.7}
::selection{background:rgba(251,146,60,.3)}

/* Keyboard users get a visible ring everywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent-light);outline-offset:3px;border-radius:3px
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:10px 18px;border-radius:0 0 8px 0;font-size:var(--t-sm);text-decoration:none}
.skip-link:focus{left:0}

/* ── Header ── */
.doc-nav{max-width:1120px;margin:0 auto;padding:18px 40px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-size:var(--t-logo);font-weight:800;letter-spacing:-.03em;
  color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  --icon-box:var(--accent);--icon-border:var(--accent);--icon-stroke:#fef3c7}
.logo-icon{flex-shrink:0}
.doc-nav-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.doc-nav-links a{font-size:var(--t-nav);color:var(--fg2);text-decoration:none;transition:color .2s}
.doc-nav-links a:hover{color:var(--fg)}
.doc-nav-links a[aria-current="page"]{color:var(--accent-light)}

/* ── Early-access status chip ── */
.ea-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-light);
  border:1px solid rgba(234,88,12,.4);background:var(--accent-soft);
  padding:3px 10px;border-radius:100px;white-space:nowrap}
.ea-chip i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ── Document body ── */
.doc{max-width:820px;margin:0 auto;padding:20px 28px 96px}
.doc-head{border-bottom:1px solid var(--border2);padding-bottom:28px;margin-bottom:36px}
.doc h1{font-size:var(--t-h2);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.doc-meta{margin-top:14px;font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--fg3);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.doc-meta span::after{content:'·';margin-left:8px;color:var(--fg4)}
.doc-meta span:last-child::after{content:''}
.doc-lede{margin-top:18px;font-size:var(--t-body);color:var(--fg2);max-width:64ch}

.doc h2{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em;margin:44px 0 12px;
  scroll-margin-top:24px;color:var(--fg)}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:var(--t-sm);font-weight:600;margin:26px 0 8px;color:var(--fg)}
.doc p{font-size:var(--t-sm);color:var(--fg2);margin-bottom:14px;max-width:70ch}
.doc ul,.doc ol{margin:0 0 16px 22px;max-width:70ch}
.doc li{font-size:var(--t-sm);color:var(--fg2);margin-bottom:8px}
.doc a{color:var(--accent-light);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(251,146,60,.45)}
.doc a:hover{text-decoration-color:var(--accent-light)}
.doc strong{color:var(--fg);font-weight:600}
.doc code{font-family:var(--mono);font-size:var(--t-mono);color:var(--fg);
  background:var(--white);border:1px solid var(--border2);border-radius:4px;padding:1px 5px}
.doc hr{border:none;border-top:1px solid var(--border);margin:40px 0}

/* Table of contents */
.toc{background:var(--white);border:1px solid var(--border2);border-radius:10px;padding:18px 22px;margin-bottom:40px}
.toc-title{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:10px}
.toc ol{margin:0 0 0 18px}
.toc li{font-size:var(--t-sm);margin-bottom:5px}

/* Callout */
.note{border-left:2px solid var(--accent);background:var(--accent-soft);
  padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 22px}
.note p{margin-bottom:0;font-size:var(--t-sm);color:var(--fg2)}
.note p+p{margin-top:10px}
.note-title{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:6px;display:block}

/* Tables (subprocessors, data categories, status) */
.tbl-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--border2);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{text-align:left;padding:11px 16px;font-size:var(--t-sm);border-bottom:1px solid var(--border);vertical-align:top}
th{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg3);background:var(--white);font-weight:400;white-space:nowrap}
td{color:var(--fg2)}
tr:last-child td{border-bottom:none}
td strong{color:var(--fg)}

/* Live / not-live status markers — positive, accent, neutral. */
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.st i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.st-live{color:var(--positive)}     .st-live i{background:var(--positive)}
.st-beta{color:var(--accent-light)} .st-beta i{background:var(--accent)}
.st-soon{color:var(--fg3)}          .st-soon i{background:var(--fg4)}

/* Contact block */
.contact-card{background:var(--white);border:1px solid var(--border2);border-radius:10px;padding:20px 22px;margin:0 0 24px}
.contact-card p:last-child{margin-bottom:0}

/* ── Footer ── */
.doc-footer{border-top:1px solid var(--border);max-width:820px;margin:0 auto;
  padding:26px 28px 44px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  font-size:var(--t-xs);color:var(--fg3)}
.doc-footer a{color:var(--fg3);text-decoration:none;transition:color .2s}
.doc-footer a:hover{color:var(--fg2)}
.doc-footer .footer-logo{font-family:'Bricolage Grotesque',sans-serif;font-size:.9375rem;font-weight:800;
  color:var(--fg3);display:inline-flex;align-items:center;gap:7px}
.doc-footer-sep{flex-basis:100%;height:0}

/* ── 404 ── */
.nf{max-width:820px;margin:0 auto;padding:clamp(60px,14vh,140px) 28px 120px;text-align:center}
.nf-code{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.14em;color:var(--fg3);text-transform:uppercase}
.nf h1{font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;margin:16px 0 14px}
.nf p{font-size:var(--t-body);color:var(--fg2);max-width:48ch;margin:0 auto 28px}
.nf-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{font-size:var(--t-sm);font-weight:500;font-family:var(--sans);padding:9px 20px;border-radius:100px;
  text-decoration:none;transition:background .2s,border-color .2s,color .2s;cursor:pointer;
  border:1px solid transparent;display:inline-block}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-btn);border-color:var(--accent-btn)}
.btn-ghost{border-color:var(--border2);color:var(--fg2);background:transparent}
.btn-ghost:hover{border-color:var(--fg3);color:var(--fg)}

@media (max-width:560px){
  .doc-nav{padding:16px 20px}
  .doc{padding:16px 20px 72px}
  .doc-footer{padding:22px 20px 40px}
}

/* Respect reduced-motion globally. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ──────────────────────────────────────────────────────────────
   Light theme — automatic, follows the OS. No toggle, by design:
   one fewer control, and the system setting is already the user's
   stated preference.

   Palette notes:
     · Warm off-white, not the old beige #f1ebdd and not pure white.
       Cards go to #fff so they lift off it.
     · #ea580c FAILS as text on light (3.36:1) and as a button fill under
       white text (3.56:1). The accent darkens to #c2410c for anything
       carrying text; the bright orange survives only as a large fill.
   ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --fg:#1c1917;        /* 16.50:1 on bg */
    --fg2:#57534e;       /*  7.20:1 */
    --fg3:#6b645d;       /*  5.49:1 */
    --fg4:#c7c2b8;
    --bg:#faf8f5;--white:#ffffff;
    --border:#eeebe5;--border2:#ddd9d2;--chip:#f4f2ee;
    --accent:#ea580c;              /* large fills only */
    --accent-light:#9a3412;        /* small accent text, including tinted surfaces */
    --accent-btn:#9a3412;          /* hover */
    --accent-soft:rgba(234,88,12,.09);
    --positive:#047857;
    --negative:#b91c1c;
  }
  ::selection{background:rgba(234,88,12,.18)}
  /* White text needs the darker orange behind it. */
  .btn-primary{background:var(--accent-light);border-color:var(--accent-light)}
  .btn-primary:hover{background:var(--accent-btn);border-color:var(--accent-btn)}
  .skip-link{background:var(--accent-light)}
}

/* ── WCAG 2.2 SC 2.5.8 (Target Size, Minimum) ──────────────────────────
   Standalone navigation targets must be at least 24x24 CSS px. Links set
   in running prose are exempt under the "inline" exception, so this is
   scoped to the lists and rows that are navigation, not sentences. ── */
.toc li a,
.doc-nav-links a,
.doc-footer a{display:inline-flex;align-items:center;min-height:24px}
.toc li{margin-bottom:2px}
/* Contact links that stand alone in their own paragraph, and the status chip
   in the nav, are navigation rather than prose — same 24px floor. */
.doc p > a:only-child,
.contact-card a,
.ea-chip{display:inline-flex;align-items:center;min-height:24px}