/* Qoinomics – stijl van de website (voorpagina en blog). 3-11-2026: uit index.php gehaald, plus mega-menu, vlaggen en blog. */

/* 3-11-2026: klinische huisstijl van het kubus-logo: Deep Navy #003B70 · Electric Blue #007BDB · Cyber Cyan #00DDE0 · Energy Orange #FF8900 · Ice White #E8F1FF
   (de oude namen blijven, zodat alle regels hieronder gewoon de nieuwe kleuren krijgen: --char = navy, --ivory = ice white, --teal = navy, --sage = cyan) */
:root{--teal:#003B70;--ivory:#E8F1FF;--orange:#FF8900;--orange-d:#A85400;--sage:#00DDE0;--char:#003B70;--muted:#3B5B7E;--line:#C9D9EE;--soft:#DCE8F8;--navy:#003B70;--navy-d:#002A50;--blue:#007BDB;--cyan:#00DDE0;color-scheme:light;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:128px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ivory);color:var(--char);font:17px/1.6 Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{margin:0;letter-spacing:-.015em}
a{color:var(--char)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;font:700 16px Montserrat,sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn svg{flex:0 0 auto}
.btn.orange{background:var(--orange);color:var(--char)}.btn.orange:hover{background:#FFA033}
.btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);background:rgba(0,42,80,.25)}.btn.ghost:hover{background:rgba(0,42,80,.55)}
.btn.teal{background:var(--char);color:#fff}.btn.teal:hover{background:var(--navy-d)}   /* 3-11-2026: donkere knoppen in Deep Navy */
.btn.line{color:var(--char);box-shadow:inset 0 0 0 2px var(--char)}.btn.line:hover{background:#fff}
/* ---------- menu bovenaan (over de hero; bij scrollen een donkere balk) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;background:#fff;box-shadow:0 1px 0 #C9D9EE}   /* 2-11-2026: altijd wit, zodat het logo uitspringt */
.nav.solid{box-shadow:0 6px 18px rgba(0,42,80,.08)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:128px}
.brand{display:flex;align-items:center;gap:16px;color:var(--char);text-decoration:none}
.brand img{width:104px;height:104px;object-fit:contain;display:block}   /* 2-11-2026: logo 2× zo groot */
.brand b{display:block;font:800 32px/1 Montserrat,sans-serif}
.brand small{display:block;margin-top:6px;font:600 11px Montserrat,sans-serif;letter-spacing:.26em;color:var(--muted)}
.links{display:flex;gap:4px;margin:0 auto;flex:0 0 auto}
.links a{white-space:nowrap;position:relative;color:var(--char);text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px}
.links a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .2s ease}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}
.auth{display:flex;gap:10px}
.auth .btn{min-height:44px;padding:0 18px;font-size:15px}
/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--char);color:#fff;overflow:hidden}
.hero .bg,.hero video,.livebox{position:absolute;inset:0;width:100%;height:100%}
.hero video,.hero .bg{object-fit:cover;background-size:cover;background-position:center}
/* 2-11-2026: een lichte ZWARTE laag (geen groen): iets donkerder links achter de tekst, licht over de rest van de film */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,42,80,.6) 0%,rgba(0,42,80,.36) 45%,rgba(0,42,80,.16) 100%)}
.hero .copy{padding-bottom:clamp(64px,12vh,120px);text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5);position:relative;z-index:2;padding-top:200px;display:flex;flex-direction:column;gap:22px}   /* 2-11-2026: zelfde breedte en linkerlijn als het logo en de pijlers eronder (geen eigen max-width meer, die zette het blok in het midden) */
.kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:10px}
.kicker i{width:9px;height:9px;background:var(--cyan);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.kicker i{animation:none}}
.hero h1{font:800 clamp(44px,5.8vw,92px)/1.02 Montserrat,sans-serif;max-width:none}   /* 2-11-2026: twee vaste regels (Leer ondernemen. / In een virtuele wereld.) */
.hero h1 em{position:relative;display:inline-block;font-style:normal;color:var(--orange);padding-bottom:10px}
.hero h1 em svg{position:absolute;left:0;bottom:-4px;width:72%;height:16px}
.hero .copy p{margin:0;font-size:clamp(18px,1.5vw,22px);max-width:62ch;color:#E8F1FF}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.pillars{text-shadow:0 1px 8px rgba(0,0,0,.6);position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,7vh,80px)}
.pillars a{display:flex;gap:16px;align-items:flex-start;padding:18px 26px 18px 0;color:#fff;text-decoration:none}
.pillars a+a{padding-left:26px;box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.pillars svg{flex:0 0 40px}
.pillars b{display:block;font-size:17px}.pillars span{display:block;font-size:14px;color:rgba(232,241,255,.85);line-height:1.45}
.pillars a:hover b{color:var(--orange)}
.scroll{position:relative;z-index:2;display:flex;align-items:center;gap:14px;justify-content:center;padding:14px 0 22px;font-size:13px;color:rgba(255,255,255,.85);text-decoration:none}
.scroll::before,.scroll::after{content:"";flex:0 1 200px;height:1px;background:rgba(255,255,255,.25)}
.devices{background:#fff;border-bottom:1px solid var(--line);padding:clamp(34px,6vh,56px) 0;text-align:center}
.devices .eyebrow{margin:0 0 6px}
.devices h2{font:800 clamp(20px,2vw,26px)/1.2 Montserrat,sans-serif;color:var(--char)}
.devices ul{list-style:none;margin:26px auto 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:760px}
.devices li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 8px;color:var(--char);font-size:15px;font-weight:600}
.devices li+li{box-shadow:inset 1px 0 0 var(--line)}
@media (max-width:560px){.devices ul{margin-top:20px}.devices li{font-size:12px;padding:4px 2px}.devices li svg{width:26px;height:26px}}
/* 2-11-2026: scholen als horizontale slides (computer); anders onder elkaar */
.hx{padding:0}
.hx-pin{position:relative}
.hx-track{display:flex;flex-direction:column}
.hx-slide{padding:clamp(48px,8vh,90px) 0}
.hx-in{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.hx-slide.has-img .hx-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hx-img img{width:100%;height:auto;display:block}
.hx-txt{max-width:720px}
.hx-txt h3{font:800 clamp(28px,3vw,42px)/1.12 Montserrat,sans-serif;color:#fff;margin:0 0 16px}
.hx-txt p{color:#BFD3EA;font-size:17px;margin:0 0 12px}.hx-txt .lead{color:#BFD3EA}
.checks.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.hx-bar{display:none}
.hx.hx-on .hx-pin{position:sticky;top:var(--navh,128px);height:calc(100vh - var(--navh,128px));overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hx.hx-on .hx-track{flex-direction:row;width:500%;will-change:transform}
.hx.hx-on .hx-slide{width:20%;padding:0;display:flex;align-items:center}
.hx.hx-on .hx-bar{display:flex;gap:8px;position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(20px,4vh,40px);width:min(420px,60%)}
.hx-bar span{flex:1;height:3px;background:rgba(255,255,255,.2);transition:background .3s}.hx-bar span.on{background:var(--cyan)}
@media (max-width:900px){.checks.two{grid-template-columns:1fr}.hx-slide.has-img .hx-in{grid-template-columns:1fr}}
/* ---------- secties ---------- */
section.blk{padding:clamp(64px,10vh,110px) 0}
.eyebrow{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d)}
.title{font:800 clamp(32px,3.4vw,48px)/1.08 Montserrat,sans-serif;color:var(--char);max-width:22ch}
.lead{margin:16px 0 0;color:var(--muted);max-width:60ch;font-size:18px}
.usp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:44px;border-top:2px solid var(--char)}
.usp div{padding:26px 0;border-bottom:1px solid var(--line)}
.usp .n{display:block;font:800 30px/1 Montserrat,sans-serif;color:var(--orange);margin-bottom:12px}
.usp h3{font:700 20px Montserrat,sans-serif;margin-bottom:6px}.usp p{margin:0;color:var(--muted);font-size:16px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px;counter-reset:s}
.steps li{list-style:none;background:#fff;padding:30px;display:flex;flex-direction:column;gap:10px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);width:40px;height:40px;display:grid;place-items:center;background:var(--orange);color:var(--char);font:800 18px Montserrat,sans-serif}
.steps h3{font:800 22px Montserrat,sans-serif;color:var(--char)}.steps p{margin:0;color:var(--muted);font-size:16px}
.steps{padding:0}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.school{background:var(--char);color:#fff}
.school .eyebrow{color:var(--orange)}.school .title{color:#fff}.school .lead{color:#BFD3EA}
.edu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:48px;padding-top:40px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.edu-grid h3{font:800 24px/1.2 Montserrat,sans-serif;color:#fff;margin-bottom:12px}
.edu-grid p{margin:0 0 12px;color:#BFD3EA;font-size:16px}
.checks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{position:relative;padding-left:32px;color:#E8F1FF;font-size:16px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002A50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/14px no-repeat}
.edu-close{margin:48px 0 0;font:800 clamp(24px,2.4vw,34px)/1.2 Montserrat,sans-serif;color:#fff;max-width:30ch}.edu-close em{font-style:normal;color:var(--orange)}
.edu-student{margin:18px 0 0;color:#BFD3EA;font-size:15px}.edu-student a{color:#fff;font-weight:700}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.paths div{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);padding:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.paths span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.paths h3{font:800 26px Montserrat,sans-serif}.paths p{margin:0;color:#BFD3EA;font-size:16px;flex:1}
.game{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.game > div{background:#fff;padding:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.game h3{font:800 24px Montserrat,sans-serif;color:var(--char)}.game p{margin:0;color:var(--muted);font-size:16px;flex:1}
.game img{width:100%;max-width:260px;height:auto;display:block}
.final{background:var(--orange);color:var(--char);padding:clamp(48px,8vh,80px) 0}
.final .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.final h2{font:800 clamp(28px,3vw,42px)/1.1 Montserrat,sans-serif;max-width:20ch}
.final .btn.teal{background:var(--char)}.final .btn.teal:hover{background:var(--navy-d)}
footer{background:var(--char);color:#A9C4E4;font-size:14px;padding:36px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer a{color:#fff;text-decoration:none;font-weight:600}footer a:hover{color:var(--orange)}
footer .sp{flex:1}
@media (max-width:1240px){.links{display:none}.auth{margin-left:auto}}
@media (max-width:900px){
  .hero::after{background:rgba(0,42,80,.45)}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}.pillars a,.pillars a+a{padding:14px 12px 14px 0;box-shadow:none}
  .usp,.steps,.paths,.game,.edu-grid{grid-template-columns:1fr}
}
@media (max-width:560px){.nav .wrap{height:84px;gap:12px}.brand img{width:64px;height:64px}.brand b{font-size:22px}.brand small{display:none}.auth .btn.line-w{display:none}.hero .copy{padding-top:130px}.pillars span{display:none}.scroll{display:none}}
.auth .btn.line-w{color:var(--char);box-shadow:inset 0 0 0 2px var(--char);background:transparent}.auth .btn.line-w:hover{background:var(--ivory)}

/* =====================================================================
   3-11-2026: MEGA-MENU, TAALKIEZER MET VLAGGEN, HAMBURGER, VOET EN BLOG
   ===================================================================== */
.flag{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14);flex:0 0 auto}
.mm{display:flex;align-items:center;gap:2px;margin:0 auto}
.mm-t,.mm-blog{position:relative;display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--char);text-decoration:none;font:600 15px Montserrat,sans-serif;padding:10px 14px;white-space:nowrap}
.mm-t::after,.mm-blog::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .2s ease}
.mm-t:hover::after,.mm-i.open .mm-t::after,.mm-blog:hover::after,.mm-blog[aria-current]::after{transform:scaleX(1)}
.mm-t .chev{transition:transform .2s ease}.mm-i.open .mm-t .chev{transform:rotate(180deg)}
.mm-p{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 26px 50px rgba(0,42,80,.16)}
.mm-p[hidden]{display:none}
.mm-g{max-width:1280px;margin:0 auto;padding:38px clamp(20px,4vw,56px) 42px;display:flex;gap:48px;align-items:stretch}
.mm-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mm-col h4{margin:0 0 10px;padding-bottom:12px;border-bottom:1px solid var(--line);font:700 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d)}
.mm-a{display:flex;gap:16px;align-items:flex-start;padding:12px;margin:0 -12px;text-decoration:none;color:var(--char);transition:background .15s ease}
.mm-ic{flex:0 0 46px;height:46px;display:grid;place-items:center;background:var(--ivory);color:var(--char);transition:background .15s ease,color .15s ease}
.mm-a:hover,.mm-a:focus-visible{background:#F4F8FF}
.mm-a:hover .mm-ic,.mm-a:focus-visible .mm-ic{background:var(--orange);color:#fff}
.mm-tx{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.mm-tx b{font-size:16px;font-weight:700;line-height:1.25}
.mm-tx small{font-size:14px;color:var(--muted);line-height:1.45}
.mm-feat{flex:0 0 340px;background:var(--char);color:#fff;padding:30px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:flex-end;background-image:linear-gradient(160deg,rgba(255,137,0,.18),rgba(0,42,80,0) 55%)}
.mm-feat span{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.mm-feat b{font:800 22px/1.25 Montserrat,sans-serif}
.mm-feat p{margin:0 0 8px;font-size:15px;color:#BFD3EA}
.mm-feat .btn{min-height:46px;padding:0 18px;font-size:14px}
.lang{position:relative}
.lang-b{display:flex;align-items:center;gap:7px;height:44px;padding:0 11px;background:#fff;border:1px solid var(--line);color:var(--char);font:600 14px Montserrat,sans-serif;cursor:pointer}
.lang-b:hover{border-color:var(--char)}
.lang-l{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:190px;margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,42,80,.14)}
.lang-l[hidden]{display:none}
.lang-l a{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--char);text-decoration:none;font-size:14px;font-weight:500}
.lang-l a:hover{background:var(--ivory)}
.lang-l a.on{background:#E8F1FF;box-shadow:inset 3px 0 0 var(--blue);font-weight:700}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:44px;padding:0 11px;background:#fff;border:1px solid var(--line);cursor:pointer}
.burger span{display:block;height:2px;background:var(--char);transition:transform .2s ease,opacity .2s ease}
.nav.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .burger span:nth-child(2){opacity:0}
.nav.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ft-langs{display:flex;gap:8px}.ft-lang{display:block;opacity:.75}.ft-lang:hover{opacity:1}
@media (max-width:1320px){
  .mm{display:none}.burger{display:flex}.lang{margin-left:auto}.nav .auth{margin-left:0}
  .nav.menu-open .mm{display:flex;position:fixed;top:128px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px clamp(20px,4vw,56px) 40px;background:#fff;overflow:auto;border-top:1px solid var(--line)}
  .mm-t,.mm-blog{justify-content:space-between;width:100%;padding:16px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .mm-t::after,.mm-blog::after{display:none}
  .mm-p{position:static;box-shadow:none;border:0}
  .mm-g{flex-direction:column;gap:22px;padding:14px 0 24px;max-width:none}
  .mm-feat{flex:auto}
}
@media (max-width:560px){.nav.menu-open .mm{top:84px}.lang-b span{display:none}.lang-b{padding:0 9px}}
/* blog */
.page-top{padding-top:calc(128px + clamp(40px,7vh,72px))}
@media (max-width:560px){.page-top{padding-top:calc(84px + 32px)}}
.blog-head{padding-bottom:clamp(28px,5vh,48px)}
.blog-head h1{font:800 clamp(34px,4.4vw,60px)/1.05 Montserrat,sans-serif;max-width:20ch}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:clamp(56px,10vh,110px)}
.post-card{display:flex;flex-direction:column;background:#fff;text-decoration:none;color:var(--char);transition:transform .2s ease,box-shadow .2s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,42,80,.12)}
.post-card .pc-img{aspect-ratio:16/9;background:var(--char) center/cover no-repeat}
.post-card .pc-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card time{font-size:13px;color:var(--muted)}
.post-card h2{font:800 21px/1.25 Montserrat,sans-serif}
.post-card p{margin:0;color:var(--muted);font-size:15px;flex:1}
.post-card .more{font-weight:700;color:var(--orange-d);font-size:15px}
.blog-empty{padding:40px 0 90px;color:var(--muted)}
.post{max-width:780px;margin:0 auto;padding-bottom:clamp(56px,10vh,110px)}
.post .back{display:inline-flex;gap:6px;font-weight:700;text-decoration:none;color:var(--orange-d);margin-bottom:22px}
.post h1{font:800 clamp(32px,4vw,52px)/1.08 Montserrat,sans-serif;margin-bottom:14px}
.post .meta{color:var(--muted);font-size:15px;margin:0 0 26px}
.post .lead-img{width:100%;height:auto;display:block;margin:0 0 30px}
.post .intro{font-size:20px;line-height:1.6;color:var(--char);margin:0 0 22px;font-weight:500}
.prose{font-size:18px;line-height:1.75}
.prose h2{font:800 28px/1.2 Montserrat,sans-serif;margin:38px 0 12px}
.prose h3{font:800 22px/1.25 Montserrat,sans-serif;margin:30px 0 10px}
.prose p{margin:0 0 18px}.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}.prose li{margin:4px 0}
.prose a{color:var(--orange-d);font-weight:600}
.prose blockquote{margin:24px 0;padding:6px 0 6px 20px;box-shadow:inset 4px 0 0 var(--orange);font-weight:600}
.prose img{max-width:100%;height:auto}
.post-cta{margin-top:40px;background:var(--char);color:#fff;padding:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.post-cta b{font:800 22px/1.25 Montserrat,sans-serif;max-width:24ch}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr}}

html[lang=de] .hero h1,html[lang=es] .hero h1{font-size:clamp(38px,4.9vw,80px)}   /* langere zinnen */

/* 3-11-2026: juridische pagina's */
.legal{background:#fff}
.legal-in{display:grid;grid-template-columns:270px minmax(0,1fr);gap:56px;padding-bottom:clamp(56px,10vh,110px)}
.legal-nav{position:sticky;top:150px;align-self:start;max-height:calc(100vh - 170px);overflow:auto;font-size:14px}
.legal-nav ul,.legal-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.legal-nav a{display:block;padding:7px 10px;color:var(--char);text-decoration:none;border-left:3px solid transparent}
.legal-nav a:hover{background:var(--ivory)}.legal-nav a.on{border-left-color:var(--blue);background:#E8F1FF;font-weight:700}
.legal-toc a{font-size:13px;color:var(--muted);padding:5px 10px}
.legal-doc{max-width:820px}
.legal-doc h1{font:800 clamp(30px,3.6vw,48px)/1.1 Montserrat,sans-serif;margin:6px 0 10px}
.legal-meta{color:var(--muted);font-size:14px;margin:0 0 18px}.legal-meta a{color:var(--orange-d)}
.legal-note{background:var(--ivory);padding:14px 16px;font-size:15px;margin:0 0 14px;box-shadow:inset 4px 0 0 var(--line)}
.legal-note.draft{background:#FFF6D6;box-shadow:inset 4px 0 0 #E8B100}
.legal-body{font-size:16.5px;line-height:1.7}
.legal-body h2{font:800 22px/1.3 Montserrat,sans-serif;margin:38px 0 12px;scroll-margin-top:150px}
.legal-body p{margin:0 0 12px}
.legal-body .lid{display:flex;gap:10px;margin:0 0 12px}.legal-body .lid .nr{flex:0 0 auto;min-width:26px;font-weight:700;color:var(--orange-d)}.legal-body .lid p{margin:0}.legal-body .lid ul{margin:8px 0 0}
.legal-body ul{margin:0 0 14px;padding-left:22px}.legal-body li{margin:4px 0}
.legal-body ul.sum{background:var(--ivory);padding:18px 18px 18px 38px;margin:0 0 10px}
.legal-body mark.todo{background:#FFE58A;color:inherit;padding:0 2px}
.legal-body .form{margin:0 0 6px}
.legal-body .tbl{overflow-x:auto;margin:6px 0 18px}
.legal-body table{border-collapse:collapse;min-width:720px;font-size:14px;line-height:1.5}
.legal-body th,.legal-body td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
.legal-body th{background:var(--ivory);font-weight:700}
.legal-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.legal-card{display:flex;justify-content:space-between;align-items:center;padding:22px;background:var(--ivory);text-decoration:none;color:var(--char);font-size:17px}
.legal-card:hover{background:#E8F1FF}.legal-card span{color:var(--orange-d);font-weight:800}
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%;padding-top:14px;margin-top:6px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.ft-legal a{font-weight:500;color:#BFD3EA}
@media (max-width:900px){.legal-in{grid-template-columns:1fr;gap:20px}.legal-nav{position:static;max-height:none}.legal-toc{display:none}.legal-cards{grid-template-columns:1fr}}
@media print{.nav,footer,.legal-nav{display:none!important}.page-top{padding-top:0}.legal-in{display:block}}