/* European Safety Guide v3 — ChatGPT mockups + style guide (B / Compass Shield). Self-hosted OFL fonts, no third-party requests. */
[hidden]{display:none!important}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/inter-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/fonts/inter-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(/fonts/inter-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(/fonts/inter-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--navy:#0F2A47;--navy-h:#183F68;--gold:#B8902F;--gold-t:#80621F;--bg:#FFFFFF;--paper:#F7F6F2;--bar:#E9EDF1;--slate:#465563;--line:#DDE3E8;
  --fg:var(--navy);--body:var(--slate);--btn:var(--navy);--btn-fg:#FFFFFF;--shield:var(--navy);--needle-s:var(--navy)}
@media (prefers-color-scheme:dark){:root{--bg:#0B1E33;--paper:#11294A;--bar:#11294A;--fg:#FFFFFF;--body:#C9D3DD;--line:#24405F;--gold-t:#D9B65A;
  --btn:#FFFFFF;--btn-fg:#0F2A47;--navy-h:#E6EDF4;--shield:#FFFFFF;--needle-s:#FFFFFF}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--gold-t);outline-offset:2px;box-shadow:0 0 0 2px var(--bg)}
h1,h2,h3{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:700;color:var(--fg);line-height:1.12;letter-spacing:-.025em}
h1{font-size:clamp(34px,4.6vw,52px);margin:0 0 12px}
h1.hero{font-size:clamp(38px,5.4vw,64px);max-width:16ch;margin-bottom:16px}
h2{font-size:clamp(24px,2.6vw,32px);margin:48px 0 12px}
h3{font-size:20px;margin:0}
.frame{max-width:1200px;margin:0 auto;padding:0 32px}
/* header */
header.site{background:var(--bg)}
.hbar{display:flex;align-items:center;gap:32px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);flex:none}
.wm{font:700 19px/1.02 Inter,sans-serif;letter-spacing:.01em;text-transform:uppercase}
.wm span{display:block}
nav.main{display:flex;gap:28px;margin:0 auto}
nav.main a{text-decoration:none;font-size:16px;color:var(--fg)}
nav.main a:hover{text-decoration:underline}
.lang{font-size:16px;color:var(--fg);flex:none}
.indep{background:var(--bar);color:var(--body);font-size:13px;text-align:center;padding:6px 16px}
/* common */
.crumbs{font-size:14px;margin:28px 0 20px;overflow-wrap:anywhere}
.crumbs a{color:var(--body)}
.flag{display:inline-block;vertical-align:middle;border-radius:2px;box-shadow:0 0 0 1px var(--line);flex:none}
.kicker{display:flex;align-items:center;gap:12px;font:600 14px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t);margin:0 0 12px}
.lead{font-size:21px;line-height:1.5;max-width:640px;margin:0 0 16px}
.meta{font-size:15px;margin:0 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:6px;background:var(--btn);color:var(--btn-fg);
  font:600 17px/1 Inter,sans-serif;text-decoration:none}
.btn:hover{background:var(--navy-h)}
.tlink{font-weight:400;color:var(--fg);text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:2px}
.ext::after{content:"\00a0\2197";font-size:.9em}
.arrow::after{content:"\00a0\2192"}
.rule{border:0;border-top:1.5px solid var(--gold);margin:0}
/* home */
.hero-wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding:48px 0 40px}
.hero-actions{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:24px}
.hero-side{font-size:14px;text-align:right}
.sechead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.sechead p{margin:0}
.cgrid{list-style:none;padding:0;margin:24px 0 12px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.cgrid li{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cgrid li:nth-child(5n){border-right:0}
.cgrid a,.cgrid .soon{display:flex;align-items:flex-start;gap:12px;padding:16px 12px;text-decoration:none;color:var(--fg);min-height:72px}
.cgrid a:hover{background:var(--paper)}
.cgrid b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.cgrid small{display:block;font-size:13px;color:var(--body);line-height:1.35}
.cgrid .go{margin-left:auto;color:var(--fg)}
.cgrid .soon{opacity:.55}
.tgrid{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.tgrid a{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.tgrid svg{flex:none;color:var(--fg)}
.tgrid b{display:block;font:600 20px/1.25 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
.tgrid small{display:block;font-size:15px;color:var(--body)}
.tgrid .go{margin-left:auto;color:var(--fg)}
.band{background:var(--paper);padding:40px 0;margin-top:48px}
.band h2{margin-top:0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:16px 0}
.three>div{display:flex;gap:16px;padding:0 24px;border-left:1px solid var(--line)}
.three>div:first-child{padding-left:0;border-left:0}
.three b{display:block;font:600 19px/1.3 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
.three p{margin:4px 0 0;font-size:16px}
/* article */
.agrid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}
.aside{position:sticky;top:24px;border-left:1.5px solid var(--gold);padding-left:24px;margin-top:8px;font-size:15px}
.aside h3{font-size:19px;margin:0 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--gold)}
.aside ul{list-style:none;padding:0;margin:0 0 24px}
.aside li{margin:0 0 10px}
.aside .reg{border-top:1px solid var(--line);padding-top:20px}
.aside .reg b{display:block;color:var(--fg)}
.langs{font-size:15px;margin:8px 0 24px}
.langs b{color:var(--fg);border-bottom:2px solid var(--gold)}
.glance{background:var(--paper);border-left:4px solid var(--gold);padding:20px 24px;margin:24px 0 8px}
.glance h2{margin:0 0 8px;font-size:26px}
.glance ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.glance li{position:relative;padding-left:20px;font-size:16px;line-height:1.45}
.glance li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.body h2{padding-top:32px;margin-top:32px;border-top:1px solid var(--line)}
.body ol li::marker{color:var(--gold-t);font-weight:600}
.note{border-left:4px solid var(--gold);background:var(--paper);padding:14px 20px;margin:28px 0}
.course{background:var(--paper);border-left:4px solid var(--gold);padding:28px 28px 20px;margin:40px 0}
.course h2{margin:0 0 8px;border:0;padding:0}
.course p{margin:0 0 18px}
.course .small{font-size:14px;margin:14px 0 0}
.en{border:1px solid var(--line);border-radius:6px;padding:20px 24px;margin:32px 0}
.en h2{margin:0 0 8px;font-size:22px;border:0;padding:0}
.srcs{list-style:none;padding:0;margin:16px 0;counter-reset:s;border-top:1px solid var(--line)}
.srcs li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;padding:12px 0;border-bottom:1px solid var(--line)}
.srcs li::before{content:"[" counter(s) "]";color:var(--fg);font-size:15px}
.srcs a{font-weight:600;text-decoration:none;color:var(--fg);overflow-wrap:anywhere}
.srcs a:hover{text-decoration:underline}
.srcs small{display:block;font-size:14px}
.rel{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rel li{padding:4px 20px;border-left:1px solid var(--line)}
.rel li:first-child{padding-left:0;border-left:0}
/* country */
.crows{list-style:none;padding:0;margin:16px 0;border-top:1px solid var(--line)}
.crows a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 24px;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.crows b{display:block;font:600 21px/1.25 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
.crows i{display:block;font-style:normal;font-weight:600;font-size:15px;color:var(--gold-t);margin-top:4px}
.crows span{font-size:16px;color:var(--body)}
.crows .go{color:var(--fg)}
.stable{width:100%;border-collapse:collapse;font-size:15px;margin:16px 0}
.stable td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.stable td:last-child{text-align:right;white-space:nowrap}
/* footer */
footer.site{background:var(--navy);color:#D5DEE7;margin-top:72px;padding:40px 0 28px;font-size:14px}
@media (prefers-color-scheme:dark){footer.site{background:#071526}}
footer.site a{color:#FFFFFF;text-decoration:none}
footer.site a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.1fr 2.2fr .9fr;gap:40px}
.fgrid>div+div{border-left:1px solid #2C4867;padding-left:32px}
.fgrid .wm{color:#fff}
.fcountries{columns:4;column-gap:24px;list-style:none;padding:0;margin:8px 0 0}
.fcountries li{margin:0 0 4px}
.fcountries .na{color:#8FA2B5}
.flinks{list-style:none;padding:0;margin:0}
.flinks li{margin:0 0 6px}
.fcopy{margin-top:24px;color:#A9B8C7}
@media (max-width:1024px){.cgrid{grid-template-columns:repeat(3,1fr)}.cgrid li:nth-child(5n){border-right:1px solid var(--line)}.cgrid li:nth-child(3n){border-right:0}
  .agrid{grid-template-columns:1fr}.aside{position:static;margin:0 0 8px}nav.main{gap:18px}}
@media (max-width:760px){body{font-size:16px}.frame{padding:0 20px}nav.main,.lang{display:none}.hbar{min-height:68px}.wm{font-size:16px}
  .hero-wrap{grid-template-columns:1fr;padding:32px 0 28px}.hero-side{text-align:left}.lead{font-size:18px}
  .cgrid{grid-template-columns:1fr 1fr}.cgrid li:nth-child(n){border-right:1px solid var(--line)}.cgrid li:nth-child(2n){border-right:0}
  .tgrid{grid-template-columns:1fr}.three{grid-template-columns:1fr;gap:20px}.three>div{padding:0;border:0}
  .glance ul{grid-template-columns:1fr}.rel{grid-template-columns:1fr}.rel li{padding:6px 0;border:0}
  .crows a{grid-template-columns:1fr 24px;gap:8px}.crows span{grid-column:1}.crows .go{grid-row:1;grid-column:2}
  .fgrid{grid-template-columns:1fr;gap:24px}.fgrid>div+div{border:0;padding:0}.fcountries{columns:2}
  .btn{width:100%}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .tlink{align-self:flex-start}h2{margin-top:36px}
  .stable td:nth-child(3){display:none}}
/* ===== v3.1 components: menu, callouts, figures, steps, checklist, FAQ, stats, compare, quiz, decision helper, free course ===== */
footer.site{--shield:#fff;--needle-s:#fff}
h1.hero{max-width:20ch}
.mnav{display:none;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;border:1.5px solid var(--fg);border-radius:6px;padding:8px 14px;font-weight:600;color:var(--fg)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] .mpanel{display:block}
.mpanel{display:none;position:absolute;left:0;right:0;top:68px;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 16px;z-index:10}
.mpanel a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:18px}
header.site{position:relative}
.langsw{position:relative;flex:none}
.langsw summary{list-style:none;cursor:pointer;color:var(--fg);font-size:16px}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary::after{content:" \25BE"}
.langsw ul{position:absolute;right:0;top:32px;background:var(--bg);border:1px solid var(--line);border-radius:6px;list-style:none;margin:0;padding:6px 0;min-width:180px;z-index:10;box-shadow:0 8px 24px rgba(15,42,71,.12)}
.langsw li a{display:block;padding:8px 16px;text-decoration:none}
.langsw li a[aria-current]{font-weight:600;border-left:3px solid var(--gold)}
.call{border-radius:6px;padding:16px 20px 16px 52px;margin:24px 0;position:relative;background:var(--paper)}
.call::before{position:absolute;left:18px;top:16px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 Inter,sans-serif;color:#fff}
.call b.t{display:block;color:var(--fg);margin-bottom:2px}
.call p{margin:0}
.call.duty{border-left:4px solid var(--navy)} .call.duty::before{content:"§";background:var(--navy)}
.call.good{border-left:4px solid #2F7D5B} .call.good::before{content:"✓";background:#2F7D5B}
.call.warn{border-left:4px solid #B5462F;background:#FBF1EE} .call.warn::before{content:"!";background:#B5462F}
.call.change{border-left:4px solid var(--gold)} .call.change::before{content:"↻";background:var(--gold)}
.call.practical{border-left:4px solid var(--gold)} .call.practical::before{content:"▶";background:var(--gold-t);font-size:10px}
@media (prefers-color-scheme:dark){.call.warn{background:#3A1F1A}.call.duty::before{background:#fff;color:var(--navy)}}
figure.fig{margin:32px 0}
figure.fig .img{background:var(--paper);border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;aspect-ratio:16/9;color:var(--fg);overflow:hidden}
figure.fig img{width:100%;height:auto;display:block;border-radius:6px}
figure.fig figcaption{font-size:14px;margin-top:8px;display:flex;justify-content:space-between;gap:16px}
figure.fig figcaption span{color:var(--body);opacity:.8}
figure.side{float:right;width:42%;margin:4px 0 16px 28px}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.dodont>div{border-radius:6px;border:1px solid var(--line);overflow:hidden}
.dodont .img{aspect-ratio:4/3;display:grid;place-items:center;background:var(--paper);color:var(--fg)}
.dodont p{margin:0;padding:12px 16px;font-size:15px}
.dodont .do p::before{content:"✓ ";color:#2F7D5B;font-weight:700}
.dodont .dont p::before{content:"✕ ";color:#B5462F;font-weight:700}
.steps{list-style:none;padding:0;margin:28px 0;counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:0 0 22px;position:relative}
.steps li::before{content:counter(st);width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:600 16px/1 Inter,sans-serif}
.steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--line)}
.steps b{display:block;color:var(--fg)}
.checklist{border:1px solid var(--line);border-radius:6px;padding:20px 24px;margin:28px 0}
.checklist h3{margin:0 0 8px}
.checklist label{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.checklist input{width:22px;height:22px;accent-color:var(--navy);flex:none;margin-top:2px}
.checklist .res{margin-top:14px;font-weight:600;color:var(--fg)}
.meter{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}
.faq{margin:24px 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 32px 16px 0;font:600 19px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 26px/1 Inter,sans-serif;color:var(--gold-t)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.stats>div{border-top:3px solid var(--gold);padding:12px 0 0}
.stats b{display:block;font:600 40px/1.1 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
.stats span{font-size:15px}
.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px}
.cmp th,.cmp td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-t);border-bottom:2px solid var(--gold)}
.cmp tbody th{color:var(--fg)}
.tblwrap{overflow-x:auto}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);margin:32px 0;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.timeline>div{position:relative;padding-top:28px;padding-right:12px;font-size:15px}
.timeline>div::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--gold)}
.timeline b{display:block;color:var(--fg)}
.answer{border:2px solid var(--navy);border-radius:6px;padding:20px 24px;margin:20px 0 28px}
.answer .k{font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t)}
.answer p{font-size:21px;line-height:1.45;color:var(--fg);margin:8px 0 0}
/* quiz */
.quiz{border:1px solid var(--line);border-radius:8px;margin:36px 0;overflow:hidden}
.quiz .qh{background:var(--navy);color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.quiz .qh b{font:600 20px/1.2 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.quiz .qh span{font-size:14px;opacity:.85}
.quiz .qb{padding:20px 24px}
.quiz .qq{font:600 19px/1.35 Inter,sans-serif;color:var(--fg);margin:0 0 12px}
.quiz button.opt{display:block;width:100%;text-align:left;font:400 17px/1.4 Inter,sans-serif;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);
  border-radius:6px;padding:12px 16px;margin:0 0 10px;cursor:pointer;min-height:48px}
.quiz button.opt:hover:not([disabled]){border-color:var(--fg)}
.quiz button.opt.ok{border-color:#2F7D5B;background:#EAF5EF;color:#174A34}
.quiz button.opt.no{border-color:#B5462F;background:#FBF1EE;color:#6E2414}
.quiz .why{background:var(--paper);border-radius:6px;padding:12px 16px;font-size:16px;margin:4px 0 14px}
.quiz .qf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.quiz .bar{flex:1;min-width:120px}
.quiz .done{text-align:center;padding:12px 0}
.quiz .done b{display:block;font:600 44px/1.1 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
.btn.sec{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn.sm{min-height:40px;padding:0 18px;font-size:15px}
/* decision helper */
.helper{background:var(--paper);border-radius:8px;padding:24px;margin:32px 0}
.helper h3{margin:0 0 4px}
.helper .hq{font-weight:600;color:var(--fg);margin:12px 0}
.helper .hb{display:flex;gap:12px;flex-wrap:wrap}
.helper .hr{border-left:4px solid var(--gold);background:var(--bg);padding:14px 18px;margin-top:12px;border-radius:0 6px 6px 0}
/* free course promos */
.freebox{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border:2px solid var(--gold);border-radius:8px;padding:24px 28px;margin:36px 0;background:var(--bg)}
.freebox .tag{display:inline-block;background:var(--gold);color:#fff;font:700 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:4px;margin-bottom:10px}
.freebox h3{font-size:24px;margin:0 0 6px}
.freebox p{margin:0}
.mods{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mods span{font-size:13px;border-radius:4px;padding:5px 10px;border:1px solid var(--line)}
.mods span.free{border-color:var(--gold);color:var(--gold-t);font-weight:600}
.mods span.lock{opacity:.6}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.plans>div{border:1px solid var(--line);border-radius:8px;padding:24px}
.plans>div.pro{border:2px solid var(--navy)}
.plans h3{margin:0 0 4px}
.plans ul{padding-left:20px;margin:12px 0 20px}
.plans .price{font:600 28px/1 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
/* course player */
.player{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.lnav{position:sticky;top:24px;border:1px solid var(--line);border-radius:8px;padding:16px}
.lnav ol{list-style:none;padding:0;margin:8px 0 0}
.lnav li{display:flex;gap:10px;align-items:center;padding:9px 0;font-size:15px;border-bottom:1px solid var(--line)}
.lnav li:last-child{border:0}
.lnav li i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font:700 11px/1 sans-serif;font-style:normal}
.lnav li.cur{font-weight:600;color:var(--fg)} .lnav li.cur i{border-color:var(--gold)}
.lnav li.ok i{background:#2F7D5B;border-color:#2F7D5B;color:#fff} .lnav li.ok i::after{content:"✓"}
.lnav li.lock{opacity:.55} .lnav li.lock i::after{content:"🔒";font-size:10px}
.lesson[hidden]{display:none}
.lesson .lnext{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}
.pbar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:4px 0 24px}
.pbar i{display:block;height:100%;background:var(--gold);transition:width .3s}
.cert{border:2px solid var(--navy);border-radius:8px;padding:28px;text-align:center}
.cert b.big{display:block;font:600 34px/1.15 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg);margin-bottom:8px}
/* design catalogue */
.ds-block{border-top:1px solid var(--line);padding:40px 0}
.ds-label{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:16px}
.ds-label b{font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--gold-t);padding:5px 8px;border-radius:3px}
.ds-label h2{margin:0;font-size:26px;border:0;padding:0}
.ds-label span{font-size:15px}
.ds-code{background:var(--paper);border:1px dashed var(--line);border-radius:6px;padding:12px 16px;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-x:auto;margin-top:16px;color:var(--fg)}
.ds-toc{columns:3;font-size:15px;padding-left:20px}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.swatches div{border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:13px}
.swatches i{display:block;height:56px}
.swatches span{display:block;padding:8px}
.pt{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0}
.pt a{display:block;border:1px solid var(--line);border-radius:6px;padding:16px;text-decoration:none}
.pt b{display:block;font:600 18px/1.3 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--fg)}
.pt small{display:block;color:var(--body);font-size:14px;margin-top:4px}
@media (max-width:760px){.mnav{display:block}.langsw{display:none}figure.side{float:none;width:auto;margin:24px 0}.dodont,.plans{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr;row-gap:20px}.freebox{grid-template-columns:1fr}.player{grid-template-columns:1fr}
  .lnav{position:static}.ds-toc{columns:1}.swatches{grid-template-columns:repeat(2,1fr)}.pt{grid-template-columns:1fr}}
.ds-block{display:flow-root}

/* v5: photography */
.hero-wrap.photo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:48px}
.hero-img{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--paper)}
.hero-img img,.lead-img img,.thumb img,figure.fig img,.dodont img{width:100%;height:100%;object-fit:cover;display:block}
.lead-img{border-radius:8px;overflow:hidden;aspect-ratio:16/8;margin:8px 0 28px;background:var(--paper)}
.tgrid .thumb{width:76px;height:76px;border-radius:8px;overflow:hidden;flex:none}
.dodont .img{aspect-ratio:4/3;padding:0}
figure.fig .img{padding:0}
h1.hero{font-weight:800;letter-spacing:-.035em}
.wm{font-weight:800}
@media (max-width:760px){.hero-wrap.photo{grid-template-columns:1fr;gap:24px}.hero-img{aspect-ratio:16/10;order:-1}.lead-img{aspect-ratio:16/10}.tgrid .thumb{width:60px;height:60px}}
h1.hero{font-size:clamp(34px,4.2vw,54px);max-width:18ch}
.lead-img img{object-position:center 30%}
/* v6: employers, fines, downloads */
.fine{border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin:20px 0;background:var(--bg)}
.fine .fh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fine .fh b{font-size:20px;color:var(--fg)} .fine .fh span{font-size:14px;color:var(--gold-t);font-weight:600}
.fine .cmp{margin:10px 0} .fine .cmp th{width:34%;color:var(--fg)}
.fine .small{font-size:14px;margin:0}
.fine.soon{opacity:.6}
.dls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
a.dl{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:8px;padding:16px 18px;text-decoration:none;background:var(--bg)}
a.dl:hover{border-color:var(--fg)}
a.dl .ft{flex:none;width:46px;height:56px;border-radius:4px;background:var(--navy);color:#fff;display:grid;place-items:end center;padding-bottom:8px;font:700 12px/1 Inter,sans-serif}
a.dl b{display:block;color:var(--fg);font-size:17px;line-height:1.3} a.dl small{display:block;color:var(--body);font-size:14px;margin-top:3px}
a.dl .go{margin-left:auto;font-size:22px;color:var(--fg)}
.aud{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.aud a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);text-decoration:none;background:var(--bg)}
.aud .im{aspect-ratio:16/8;overflow:hidden}.aud img{width:100%;height:100%;object-fit:cover;display:block}
.aud div.t{padding:18px 20px}.aud b{display:block;font-size:22px;color:var(--fg);letter-spacing:-.02em}.aud small{display:block;font-size:15px;color:var(--body);margin-top:4px}
@media (max-width:760px){.dls,.aud{grid-template-columns:1fr}}
/* v7 */
.brand img{display:block;height:48px;width:auto}
footer.site .brand img{height:44px}
.flag{object-fit:cover}
.srch{font-size:16px;color:var(--fg);text-decoration:none;flex:none}
.srch::before{content:"⌕ ";font-size:18px}
.sinput{width:100%;font:400 20px/1.3 Inter,sans-serif;padding:16px 18px;border:1.5px solid var(--fg);border-radius:8px;margin:8px 0 12px;background:var(--bg);color:var(--fg)}
@media (max-width:760px){.srch{display:none}.brand img{height:40px}}
/* v8: mobile overflow guards */
.agrid>*{min-width:0}
.fine .cmp{table-layout:fixed;width:100%}
.fine .cmp th,.fine .cmp td{overflow-wrap:anywhere;hyphens:auto}
article p,article li,.crumbs,.meta{overflow-wrap:anywhere}
html{overflow-x:hidden}
@media (max-width:760px){.fine{padding:16px}.fine .cmp th{width:44%}.fine .cmp th,.fine .cmp td{padding:8px 6px;font-size:15px}}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}

/* ESG-9 MOBILE (13.10.2026): horizontal overflow fixes.
   1) <=760px: home country grid and guide rows with a long word. Grid tracks written as 1fr are minmax(auto,1fr) and grow
      with their content; minmax(0,1fr) keeps them inside the viewport. Words are not split mid-word: cells get a little more
      room and long titles a slightly smaller size; overflow-wrap:break-word is only the last resort.
   2) 761-940px (tablets): the desktop header (logo + 5 links + search + language) and the three-column footer need about
      910px, so EVERY page scrolled sideways. In this range the header switches to the same "Menu" button that phones use
      and the footer columns are allowed to shrink.
   3) <=360px: download cards and the kicker line no longer push the page wider than the screen. */
@media (max-width:760px){
.cgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cgrid a,.cgrid .soon{padding:16px 8px;gap:8px}
.cgrid .flag{width:30px;height:20px;flex:none}
.cgrid a>div,.cgrid .soon>div{min-width:0}
.cgrid b,.cgrid small{overflow-wrap:break-word}
.cgrid .go{flex:none}
.crows a{grid-template-columns:minmax(0,1fr) 24px}
.crows b{overflow-wrap:break-word}
a.dl>div{min-width:0}
a.dl b,a.dl small{overflow-wrap:break-word}
.kicker{flex-wrap:wrap}
.hero-wrap{grid-template-columns:minmax(0,1fr)}
.hero-wrap>div{min-width:0}
}
@media (max-width:420px){
.crows b{font-size:19px}
.cgrid b{font-size:15px}
h1{overflow-wrap:break-word;hyphens:auto}
.dls{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:761px) and (max-width:940px){
nav.main,.srch,.langsw{display:none}
.mnav{display:block}
.fgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,2.2fr) minmax(0,.9fr);gap:28px}
.fgrid>div+div{padding-left:20px}
.fcountries{columns:3;column-gap:16px}
.flinks a{overflow-wrap:break-word}
}
/* ESG-20 DESIGN-POLISH (M2I, 13.10.2026): related cards, video caption, TOC active state, block rhythm, course CTA. CSS only. */
.rel{gap:12px}
.rel li{padding:0!important;border:0!important}
.rel li a.arrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;height:100%;box-sizing:border-box;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font-weight:600;line-height:1.35;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.rel li a.arrow:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(15,42,71,.08);transform:translateY(-1px)}
.rel li a.arrow::after{flex:0 0 auto;margin-top:2px;color:var(--gold-t)}
figure.esg-video{margin:32px 0!important}
figure.esg-video figcaption{margin-top:8px;font-size:14px;color:var(--body);opacity:.85}
.aside ul a{display:block;padding:3px 0 3px 10px;margin-left:-10px;border-left:2px solid transparent;text-decoration:none}
.aside ul a:hover{text-decoration:underline}
.aside ul a.on{border-left-color:var(--gold);color:var(--fg);font-weight:600}
.quiz,.freebox,section.course{margin-top:32px;margin-bottom:32px}
section.course .btn{min-width:220px}
@media (max-width:760px){.rel{gap:10px}.rel li a.arrow{padding:14px 16px}section.course .btn{min-width:0}}
@media (prefers-color-scheme:dark){.rel li a.arrow{background:transparent}}

/* A 13.10: top disclaimer bar hidden (Alex) - disclaimer stays in footer */
.indep{display:none!important}

/* mobile language switcher 14.10 */
@media (max-width:760px){.hbar{gap:10px}.langsw{display:block!important;margin-left:auto}.mnav{margin-left:0}.langsw summary{border:1.5px solid var(--line);border-radius:6px;padding:8px 10px;font-size:14px;font-weight:600;white-space:nowrap}.langsw ul{right:-40px;max-height:70vh;overflow:auto}.brand img{height:32px!important}}
@media (max-width:360px){.langsw summary{max-width:84px;overflow:hidden;text-overflow:ellipsis}}

/* Free Academy strip 14.10 */
.fa-strip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#102D4B;color:#fff;text-decoration:none;padding:10px 16px;font-size:15px;line-height:1.3;text-align:center}
.fa-strip span{display:none}.fa-strip[data-l="en"] span[lang="en"],.fa-strip[data-l="ro"] span[lang="ro"],.fa-strip[data-l="fi"] span[lang="fi"],.fa-strip[data-l="nl"] span[lang="nl"],.fa-strip[data-l="fr"] span[lang="fr"],.fa-strip[data-l="de"] span[lang="de"],.fa-strip[data-l="pl"] span[lang="pl"],.fa-strip[data-l="nb"] span[lang="nb"]{display:inline}
.fa-strip b{background:#f59e0b;color:#1b1300;border-radius:999px;padding:6px 14px;font-size:14px;white-space:nowrap}
.fa-strip:hover b{background:#fff}
.fa-strip i{font-style:normal}
@media (max-width:640px){.fa-strip{font-size:13.5px;padding:9px 12px;gap:8px}.fa-strip b{padding:6px 12px;font-size:13px}}
@media (max-width:640px){.fa-strip i{display:none}}

/* ESG-FREEBOX-1COL (A 14.10): mini-course card was 1fr+auto -> text squeezed to a 120px column at mid widths. One column always. */
.freebox{grid-template-columns:minmax(0,1fr)!important}
.freebox>*{min-width:0}
.freebox img{max-width:100%;height:auto}
.freebox .mods{display:flex;flex-wrap:wrap;gap:8px}

/* ESG-UX2 (A 14.10): free-course grid on country hubs */
.fcourses{margin:40px 0}.fcourses .fc-intro{margin:0 0 16px;color:var(--muted,#5b6b80)}
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.fc-grid a{display:block;padding:12px 14px;border:1px solid var(--line,#dde3ea);border-radius:10px;font-weight:600;text-decoration:none;color:inherit;background:var(--bg,#fff)}
.fc-grid a:hover{border-color:var(--gold,#b8892b)}
.fc-more{margin-top:12px}.fc-more summary{cursor:pointer;font-weight:600;padding:8px 0}.fc-more .fc-grid{margin-top:8px}
.fc-academy{margin-top:16px}
/* ESG-RELCARD (A 14.10): hub guide cards with a description - description sat OUTSIDE the card (a.arrow height:100%). Make the li the card. */
.rel li:has(small){display:flex;flex-direction:column;border:1px solid var(--line)!important;border-radius:8px;padding:0 0 14px!important;background:var(--bg)}
.rel li:has(small):hover{border-color:var(--gold)!important}
.rel li:has(small) a.arrow{border:0;height:auto;padding-bottom:6px;background:transparent;box-shadow:none;transform:none}
.rel li:has(small) br{display:none}
.rel li:has(small) small{padding:0 18px;color:var(--muted,#5b6b80);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}