/* Standalone stylesheet: the privacy policy's only stylesheet, plus the
   layout frame and footer chrome shared with the React pages.
   Every rule is scoped on purpose — see scripts/gen-static.mjs. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800.woff2') format('woff2')}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fira-mono-400.woff2') format('woff2')}

:root{
  --s-paper:#f4f6f7; --s-sheet:#ffffff; --s-ink:#1b1f22; --s-ink2:#4a5257;
  --s-muted:#5b6268; --s-hair:#dde2e6; --s-accent:#9a6206;
  --s-band:#23282c; --s-onband:#f2f4f5; --s-onband2:#a9b2b8; --s-onbandaccent:#f2be6a;
  --s-sans:Manrope,ui-sans-serif,system-ui,sans-serif;
  --s-mono:'Fira Mono',ui-monospace,monospace;
  --s-rail:17.5rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --s-paper:#0e1113; --s-sheet:#171b1e; --s-ink:#eceff1; --s-ink2:#b6bec3;
    --s-muted:#afb7b4; --s-hair:#2a3034; --s-accent:#f2be6a; --s-band:#080a0b;
  }
}

/* The split canvas. Layout only — no colour, so it cannot fight a utility.
   #root is display:contents, so the rail and main column React renders become
   grid items alongside the static footer. */
.shell{margin:0;display:grid;grid-template-columns:1fr;grid-template-areas:"rail" "main" "foot";background:var(--s-paper)}
.shell>#root{display:contents}
.shell .rail{grid-area:rail}
.shell .mainwrap{grid-area:main;min-width:0}
.shell>.site-footer{grid-area:foot}
@media (min-width:1024px){
  .shell{grid-template-columns:var(--s-rail) minmax(0,1fr);grid-template-areas:"rail main" "rail foot"}
}

.shell .skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--s-accent);color:#fff;padding:.6rem 1rem;border-radius:6px;font-family:var(--s-sans);font-weight:700;text-decoration:none}
.shell .skip:focus{left:.75rem;top:.75rem}

/* Footer — the whole identity surface, and static markup so it survives with
   JavaScript off. */
.site-footer{background:var(--s-band);color:var(--s-onband);font-family:var(--s-sans);padding:3rem 1.5rem 2.5rem}
@media (min-width:1024px){.site-footer{padding:4rem 4rem 3rem}}
.site-footer a{color:var(--s-onband);text-decoration:none;border-bottom:1px solid rgba(242,244,245,.28)}
.site-footer a:hover{border-bottom-color:var(--s-onbandaccent);color:var(--s-onbandaccent)}
.site-footer a:focus-visible{outline:2px solid var(--s-onbandaccent);outline-offset:3px}
/* One inner measure for the whole footer, so the f-legal rule ends where the
   columns end instead of running to the padding box, and so the footer lines
   up with the page content above it. 70rem matches the React pages' content
   container; the policy narrows it to its own article measure below. */
.site-footer .f-inner{max-width:70rem;margin:0 auto}
.site-footer .f-grid{display:grid;gap:2.5rem}
@media (min-width:640px){.site-footer .f-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h2{font-size:1rem;font-weight:800;margin:0 0 .75rem;letter-spacing:-.01em}
.site-footer h3{font-size:.8rem;font-weight:700;margin:0 0 .75rem;color:var(--s-onband2)}
.site-footer p,.site-footer li{font-size:.9rem;line-height:1.7;margin:0;color:var(--s-onband2)}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.site-footer .f-mail{margin-top:.75rem}
.site-footer .f-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(242,244,245,.14);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:.8rem;color:var(--s-onband2)}

/* Privacy policy and the other standalone documents. */
.policy{background:var(--s-paper);color:var(--s-ink);font-family:var(--s-sans);margin:0}
.policy .p-head{background:var(--s-band);color:var(--s-onband);padding:1.25rem 1.5rem}
/* The chrome sits on the article's own measure: the wordmark lines up with
   the first line of the policy rather than floating at the window edge. */
.policy .p-head .p-inner{max-width:44rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline}
.policy .site-footer .f-inner{max-width:44rem}
.policy .p-head a{color:var(--s-onband);text-decoration:none;font-weight:800;letter-spacing:-.01em}
.policy .p-head .p-back{font-weight:400;font-size:.85rem;color:var(--s-onband2);border-bottom:1px solid rgba(242,244,245,.28)}
.policy .p-body{max-width:44rem;margin:0 auto;padding:3rem 1.5rem 4rem}
/* Scoped to .p-body, NOT to .policy: the shared footer sits inside
   <body class="policy">, so a bare .policy h2 or .policy a matches the footer
   too and beats .site-footer h2 / .site-footer a on equal specificity by
   source order. That pushed the footer's company name down by 2.5rem and
   turned its links accent-coloured. */
.policy .p-body h1{font-size:2rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5rem;font-weight:800}
.policy .p-body .p-date{font-family:var(--s-mono);font-size:.85rem;color:var(--s-muted);margin:0 0 2.5rem}
.policy .p-body h2{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;margin:2.5rem 0 .75rem}
.policy .p-body p,.policy .p-body li{font-size:1rem;line-height:1.7;color:var(--s-ink2);margin:0 0 1rem}
.policy .p-body ul{padding-left:1.25rem;margin:0 0 1rem}
.policy .p-body li{margin:0 0 .5rem}
.policy .p-body a{color:var(--s-accent)}
.policy .p-body strong{color:var(--s-ink);font-weight:700}
.policy .p-body code{font-family:var(--s-mono);font-size:.9em}
.policy .p-body .p-note{background:var(--s-sheet);border:1px solid var(--s-hair);border-radius:8px;padding:1.25rem 1.5rem;margin:0 0 1rem}
.policy .p-body .p-note p:last-child{margin-bottom:0}