/* ===========================================================
   assets/legal/legal.css — the demo's Privacy policy, Cookie policy
   and Terms and conditions (assets/legal/*.html).

   Standalone pages: no JavaScript, no third-party origin. The values
   are the v2 design tokens of assets/styles.css (spec §2.1) at the
   default brand, repeated here so the pages render without the app's
   stylesheet; the fonts are the app's self-hosted files.
   =========================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.5.3.0.woff2") format("woff2-variations"),url("../fonts/inter-latin-wght-normal.5.3.0.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-latin-wght-normal.5.3.0.woff2") format("woff2-variations"),url("../fonts/plus-jakarta-sans-latin-wght-normal.5.3.0.woff2") format("woff2")}

:root{
  --brand:#4F46E5; --brand-text:#4F46E5; --brand-soft:#EEF0FF; --brand-line:rgb(79 70 229 / .28); --focus:#4F46E5;
  --bg:#F5F7FB; --bg-2:#EEF1F6; --card:#FFFFFF; --card-2:#F8FAFC; --hover:#F1F5F9;
  --line:#E3E8F0; --line-2:#CFD6E3; --line-3:#A9B4C6;
  --ink:#0F172A; --ink-2:#1E293B; --muted:#475569; --faint:#5B6475;
  --nav:#0B1120;
  --st-atrisk-soft:#FEF3C7; --st-atrisk-text:#B45309; --amber-line:#FDE68A;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --fh:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:24px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--card); color:var(--ink); font:400 16px/1.7 var(--fb); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden}
a{color:var(--brand-text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
::selection{background:rgb(79 70 229 / .18)}
.i{flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:12px; top:12px; z-index:10; padding:10px 14px; border-radius:var(--radius-sm); background:var(--ink); color:#FFFFFF; font:600 14px/20px var(--fb); text-decoration:none; transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- Header ---------- */
.lg-header{background:var(--nav); color:#E2E8F0; border-bottom:1px solid rgba(255,255,255,.08)}
.lg-header-in{display:flex; align-items:center; gap:20px; min-height:64px; flex-wrap:wrap; padding-block:10px}
.lg-brand{display:inline-flex; align-items:center; gap:10px; min-width:0; color:#FFFFFF; text-decoration:none}
.lg-brand img{flex:none; width:32px; height:32px; border-radius:9px}
.lg-brand-text{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.lg-brand-name{font:700 15px/19px var(--fh); letter-spacing:-.01em}
.lg-brand-suffix{font:500 11.5px/15px var(--fb); color:#94A3B8}
.lg-nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.lg-nav a{display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:8px; color:#CBD5E1; font:500 14px/20px var(--fb); text-decoration:none}
.lg-nav a:hover{background:rgba(255,255,255,.07); color:#FFFFFF}
.lg-nav a[aria-current="page"]{background:rgba(255,255,255,.1); color:#FFFFFF}
.lg-back{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:9px; border:1px solid rgba(255,255,255,.18); color:#FFFFFF; font:600 14px/20px var(--fb); text-decoration:none}
.lg-back:hover{background:rgba(255,255,255,.08)}
.lg-header a:focus-visible{outline-color:#8E9AFE}

/* ---------- Title block ---------- */
.lg-hero{background:var(--bg); border-bottom:1px solid var(--line); padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px)}
.lg-kicker{color:var(--brand-text); font:600 14px/20px var(--fb)}
.lg-hero h1{margin-top:10px; font:750 clamp(32px,3vw + 16px,48px)/1.08 var(--fh); letter-spacing:-.032em; color:var(--ink)}
.lg-lead{max-width:720px; margin-top:16px; color:var(--muted); font:400 clamp(16px,.4vw + 15px,18px)/1.65 var(--fb)}
.lg-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:20px; color:var(--faint); font:500 14px/20px var(--fb)}
.lg-meta span{display:inline-flex; align-items:center; gap:8px}
.lg-template{display:flex; align-items:flex-start; gap:12px; max-width:760px; margin-top:24px; padding:14px 16px; border-radius:var(--radius); background:var(--st-atrisk-soft); border:1px solid var(--amber-line); color:#78350F; font:500 14.5px/22px var(--fb)}
.lg-template .i{margin-top:2px; color:var(--st-atrisk-text)}
.lg-template strong{font-weight:700}

/* ---------- Body: contents + article ---------- */
.lg-body{display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; padding-block:clamp(40px,5vw,64px) clamp(56px,7vw,96px)}
.lg-toc{position:sticky; top:24px; align-self:start; font:500 14px/20px var(--fb)}
.lg-toc h2{margin-bottom:10px; color:var(--faint); font:600 12px/16px var(--fb); letter-spacing:.06em; text-transform:uppercase}
.lg-toc ol{display:grid; gap:2px; padding:0; list-style:none; counter-reset:toc}
.lg-toc a{display:block; padding:6px 10px; border-radius:7px; color:var(--muted); text-decoration:none}
.lg-toc a:hover{background:var(--hover); color:var(--ink)}
.lg-article{max-width:740px}
.lg-article section{padding-top:8px; scroll-margin-top:24px}
.lg-article section + section{margin-top:44px}
.lg-article h2{font:700 clamp(21px,.6vw + 18px,25px)/1.25 var(--fh); letter-spacing:-.02em; color:var(--ink)}
.lg-article h3{margin-top:28px; font:650 17px/1.35 var(--fh); letter-spacing:-.01em; color:var(--ink)}
.lg-article p,.lg-article ul,.lg-article ol,.lg-article .lg-table-wrap,.lg-article .lg-callout{margin-top:14px}
.lg-article ul,.lg-article ol{padding-left:22px}
.lg-article li + li{margin-top:8px}
.lg-article li::marker{color:var(--line-3)}
.lg-article strong{font-weight:650; color:var(--ink-2)}
.lg-article code{padding:1px 6px; border-radius:6px; background:var(--bg-2); color:var(--ink-2); font:500 .88em/1.4 "SFMono-Regular",ui-monospace,"Cascadia Code",Consolas,"Liberation Mono",monospace; white-space:nowrap}
.lg-confirm{padding:1px 7px; border-radius:6px; background:var(--st-atrisk-soft); color:#78350F; font-size:.86em; font-weight:600; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.lg-sentence{font-weight:650; color:var(--ink)}

/* "At a glance" box */
.lg-article .lg-glance{margin-top:0; padding:22px 24px; border-radius:var(--radius-lg); background:var(--card-2); border:1px solid var(--line)}
.lg-glance h2{font-size:19px}
.lg-glance ul{list-style:none; padding:0; display:grid; gap:10px}
.lg-glance li{display:flex; gap:12px; align-items:flex-start}
.lg-glance li + li{margin-top:0}
.lg-glance .i{margin-top:4px; color:var(--brand-text)}

/* Callout */
.lg-callout{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius); background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--ink-2); font-size:15.5px; line-height:1.6}
.lg-callout .i{margin-top:3px; color:var(--brand-text)}

/* Tables */
.lg-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); -webkit-overflow-scrolling:touch}
.lg-table-wrap:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
table{width:100%; border-collapse:collapse; font:400 14.5px/1.55 var(--fb)}
caption{padding:12px 16px 0; text-align:left; color:var(--faint); font:500 13px/18px var(--fb); caption-side:top}
th,td{padding:12px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--line)}
thead th{border-top:0; background:var(--card-2); color:var(--muted); font:600 13px/18px var(--fb); white-space:nowrap}
tbody th{font-weight:600; color:var(--ink-2)}
td code,th code{white-space:normal; word-break:break-word}

/* ---------- Footer ---------- */
.lg-footer{background:var(--bg); border-top:1px solid var(--line); padding:32px 0 40px; color:var(--muted); font:400 14px/22px var(--fb)}
.lg-footer-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px}
.lg-footer nav{display:flex; flex-wrap:wrap; gap:4px 18px}
.lg-footer nav a{color:var(--ink-2); text-decoration:none; font-weight:500}
.lg-footer nav a:hover{color:var(--brand-text); text-decoration:underline}
.lg-footer-fine{margin-top:18px; color:var(--faint); font-size:13px; line-height:20px}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .lg-body{grid-template-columns:minmax(0,1fr); gap:32px}
  .lg-toc{position:static; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card-2)}
  .lg-toc ol{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px}
}
@media (max-width:767px){
  :root{--gutter:16px}
  .lg-nav{order:3; width:100%; margin-left:-12px}
  .lg-back{margin-left:auto}
  .lg-toc ol{grid-template-columns:minmax(0,1fr)}
  th,td{padding:10px 12px}
  .lg-article .lg-glance{padding:18px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto!important} }
@media print{
  .lg-header,.lg-toc,.skip,.lg-footer nav{display:none}
  .lg-body{display:block; padding:0}
  .lg-hero{background:none; border:0; padding:0 0 16px}
  body{font-size:11pt}
  a{color:inherit}
}