:root{
  --blue-700: oklch(0.42 0.15 258);
  --blue-600: oklch(0.50 0.18 257);
  --blue-500: oklch(0.57 0.20 256);
  --blue-100: oklch(0.93 0.04 255);
  --blue-50:  oklch(0.965 0.018 255);
  --red-500: oklch(0.61 0.22 28);
  --green-600: oklch(0.55 0.13 150);
  --green-100: oklch(0.93 0.05 150);
  --ink-900: oklch(0.24 0.025 258);
  --ink-700: oklch(0.40 0.02 258);
  --ink-500: oklch(0.56 0.018 258);
  --ink-300: oklch(0.78 0.012 258);
  --paper:   oklch(0.99 0.004 255);
  --paper-2: oklch(0.975 0.008 255);
  --surface: oklch(1 0 0);
  --line:    oklch(0.91 0.008 258);
  --brand: var(--blue-600);
  --brand-strong: var(--blue-700);
  --accent: var(--red-500);
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;--r-2xl:40px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 258 / .06), 0 2px 6px oklch(0.4 0.03 258 / .05);
  --shadow-md: 0 8px 24px oklch(0.4 0.05 258 / .10), 0 2px 6px oklch(0.4 0.03 258 / .05);
  --shadow-lg: 0 24px 60px oklch(0.4 0.06 258 / .16), 0 8px 20px oklch(0.4 0.04 258 / .08);
  --shadow-blue: 0 18px 40px oklch(0.50 0.18 257 / .28);
  --maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--paper);color:var(--ink-900);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.1;letter-spacing:-.02em;font-weight:700;color:var(--ink-900)}

a{color:inherit;text-decoration:none}

.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;user-select:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}

.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent)}


.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;padding:13px 22px;border-radius:999px;border:1.5px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;white-space:nowrap}

.btn .material-symbols-rounded{font-size:20px}

.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-blue)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px oklch(0.50 0.18 257 / .36)}

.btn-ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line);box-shadow:var(--shadow-sm)}

.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink-300)}

.btn-soft{background:var(--blue-50);color:var(--brand-strong)}

.btn-soft:hover{background:var(--blue-100)}


/* nav */

.nav{position:sticky;top:0;z-index:60;background:oklch(0.99 0.004 255 / .82);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}

.nav.scrolled{border-color:var(--line)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}

.brand{display:flex;align-items:center;gap:10px}

.brand img{display:block;height:40px;width:auto}

.nav-links{display:flex;align-items:center;gap:4px}

.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-700);padding:9px 14px;border-radius:999px;transition:background .2s,color .2s}

.nav-links a:hover{background:var(--blue-50);color:var(--ink-900)}

.nav-links a.on{color:var(--brand);background:var(--blue-50)}

.nav-right{display:flex;align-items:center;gap:10px}

.lang{display:flex;gap:2px;padding:3px;background:var(--blue-50);border-radius:999px}

.lang a{font-size:13px;font-weight:600;color:var(--ink-500);padding:6px 12px;border-radius:999px;transition:.2s}

.lang a.on{background:var(--surface);color:var(--brand-strong);box-shadow:var(--shadow-sm)}

.menu-btn{display:none}


/* hero */

.lhero{position:relative;overflow:hidden;padding:60px 0 40px}

.lhero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}

.lhero-bg .blob{position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(72px);background:var(--blue-100);opacity:.5;top:-220px;right:-80px}

.crumbs{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-500);font-weight:500}

.crumbs a:hover{color:var(--brand)}

.crumbs .material-symbols-rounded{font-size:16px}

.lhero-inner{position:relative;z-index:1;max-width:720px;margin-top:22px}

.lhero h1{font-size:clamp(34px,4.6vw,52px);font-weight:800;margin-top:14px}

.lhero p{font-size:18px;color:var(--ink-700);margin-top:16px;max-width:560px;text-wrap:pretty}

.lhero .updated{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--brand-strong);background:var(--blue-50);padding:8px 15px;border-radius:999px}

.lhero .updated .material-symbols-rounded{font-size:17px}


/* layout */

.legal-wrap{display:grid;grid-template-columns:268px 1fr;gap:48px;padding:48px 0 96px;align-items:start}


/* sidebar TOC */

.toc{position:sticky;top:96px}

.toc h5{font-family:"Plus Jakarta Sans";font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:14px;padding-left:14px}

.toc nav{display:flex;flex-direction:column;gap:2px}

.toc a{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:500;color:var(--ink-700);padding:10px 14px;border-radius:11px;transition:.2s;border-left:2px solid transparent}

.toc a:hover{background:var(--paper-2);color:var(--ink-900)}

.toc a.active{background:var(--blue-50);color:var(--brand-strong);font-weight:600}