/* Privacy and collection notice.
 *
 * Its own file, not a <style> block: the edge CSP for the landing route is
 * style-src 'self' with no 'unsafe-inline', so an inline block would be blocked
 * and the page would render unstyled.
 *
 * Tokens come from ../styles.css. They are repeated rather than imported so this
 * page renders correctly on its own; keep them in step if the landing palette moves.
 */

  /* Tokens from apps/landing/site/styles.css. The privacy notice serves BOTH tools, so it
     uses the landing page's neutral world rather than either app's accent. */
  :root {
    --void:#07080A;
    --line:rgba(255,255,255,0.14);
    --white:#F4F6F8;
    --dim:rgba(244,246,248,0.58);
    --body:rgba(244,246,248,0.84);
    --panel:#0E1116;
    --sunk:#0A0C10;

    --hot-1:#2A0B06;  --hot-2:#C2410C;  --hot-3:#FF7A18;  --hot-4:#FFD08A;
    --cold-1:#04121A; --cold-2:#0E6B7A; --cold-3:#21C7C7; --cold-4:#A9F2EE;

    --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"SF Mono",Menlo,monospace;

    --rail:clamp(84px, 13vw, 210px);
    color-scheme: dark;
  }

  * { box-sizing:border-box; }
  html, body { min-height:100%; }
  body {
    margin:0; background:var(--void); color:var(--white);
    font-family:var(--sans); font-size:15px; line-height:1.6;
    overflow-x:hidden; -webkit-font-smoothing:antialiased;
  }

  /* ── the two animated rails ───────────────────────────────────────── */
  .rail {
    position:fixed; top:0; bottom:0; width:var(--rail);
    z-index:0; overflow:hidden; pointer-events:none;
  }
  .rail.left  { left:0;  }
  .rail.right { right:0; }

  .rail canvas {
    position:absolute; inset:0; width:100%; height:100%;
    opacity:.62;
  }
  /* Only the small JS-rendered canvas (360x620) stretched across the rail. The blur hides
     the upscaling, object-fit stops it distorting, the scale keeps blurred edges off the
     border. The shader renders at full size and needs none of it. Same rule as the
     landing page. */
  .rail canvas.cpu {
    object-fit:cover; filter:blur(2px); transform:scale(1.06);
  }

  /* Fade each rail into the page on its inner edge, so nothing competes with the text. */
  .rail::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, rgba(7,8,10,0) 0%, rgba(7,8,10,.55) 62%, var(--void) 100%);
  }
  .rail.right::after {
    background:linear-gradient(to left, rgba(7,8,10,0) 0%, rgba(7,8,10,.55) 62%, var(--void) 100%);
  }

  @media (max-width: 900px) {
    .rail { display:none; }
    :root { --rail: 0px; }
  }

  /* ── content column ───────────────────────────────────────────────── */
  .page {
    position:relative; z-index:1;
    max-width:820px;
    margin:0 auto;
    padding:0 clamp(20px,4vw,40px) 110px;
  }

  .masthead { padding:clamp(48px,8vw,86px) 0 26px; border-bottom:1px solid var(--line); }
  .eyebrow {
    margin:0 0 14px; font-family:var(--mono); font-size:.62rem; font-weight:600;
    letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  }
  h1 {
    margin:0 0 10px; font-size:clamp(1.9rem,4.4vw,2.7rem);
    font-weight:800; letter-spacing:-.032em; line-height:1.08;
  }
  .masthead .sub { margin:0; font-size:.92rem; color:var(--dim); }

  /* the two tools this notice covers, stated once at the top */
  .covers {
    display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0;
    font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  }
  .covers span {
    border:1px solid var(--line); border-radius:3px; padding:5px 10px; color:var(--dim);
  }
  .covers span.h { border-color:rgba(255,122,24,.45); color:var(--hot-4); }
  .covers span.c { border-color:rgba(33,199,199,.45); color:var(--cold-4); }

  .partbar {
    display:flex; align-items:center; gap:.8rem; margin:52px 0 24px;
    font-family:var(--mono); font-size:.63rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  }
  .partbar::before, .partbar::after { content:""; height:1px; flex:1; background:var(--line); }

  /* Inline style attributes are blocked by style-src 'self' just as inline <style>
     blocks are, so these two one-off overrides live here instead. */
  .shortform h3.first { margin-top:0; }
  .shortform p.last   { margin-bottom:0; }

  .shortform {
    background:var(--panel); border:1px solid var(--line);
    border-radius:4px; padding:22px 24px;
  }

  .sect { margin-bottom:30px; }
  .sect h2 {
    margin:0 0 10px; font-size:1.06rem; font-weight:700; letter-spacing:-.018em;
    display:flex; gap:11px; align-items:baseline;
  }
  .sect h2 .n {
    font-family:var(--mono); font-size:.72rem; font-weight:600;
    letter-spacing:.1em; color:var(--dim);
  }
  h3 { margin:18px 0 6px; font-size:.85rem; font-weight:700; color:var(--dim); }

  p { margin:0 0 11px; font-size:.92rem; line-height:1.68; color:var(--body); }
  ul { margin:0 0 12px; padding-left:20px; font-size:.92rem; line-height:1.68; color:var(--body); }
  li { margin-bottom:6px; }
  strong { color:var(--white); font-weight:650; }
  em { color:var(--body); }

  code {
    font-family:var(--mono); font-size:.85em; background:var(--sunk);
    border:1px solid var(--line); padding:1px 5px; border-radius:3px; color:var(--cold-4);
  }

  .blank {
    display:inline-block; background:rgba(255,122,24,.13);
    border-bottom:1px solid var(--hot-3); color:var(--hot-4);
    font-weight:600; padding:0 6px; border-radius:2px 2px 0 0;
  }

  .tbl { overflow-x:auto; margin:0 0 15px; }
  table { border-collapse:collapse; width:100%; min-width:440px; font-size:.87rem; }
  th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  th {
    font-family:var(--mono); font-size:.6rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--dim); font-weight:600;
  }
  td { color:var(--body); }
  td:first-child { color:var(--white); font-weight:600; }
  tbody tr:last-child td { border-bottom:none; }

  .xref-box {
    background:var(--sunk); border:1px solid var(--line);
    border-radius:4px; padding:16px 18px; margin:40px 0 0;
  }
  .xref-box p { margin:0; font-size:.88rem; }

  .foot {
    margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--dim);
  }