:root{--ink:#0c2340;--ink2:#46607c;--bg:#f4f7fa;--card:#fff;--line:#d9e2ec;--teal:#0f9d8f;--amber:#f0a030;--dark:#08182d}
*{box-sizing:border-box;margin:0}
body{font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;font-size:17px}
a{color:inherit}:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.w{max-width:1100px;margin:0 auto;padding:0 22px}
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;text-decoration:none}
.logo img{width:36px;height:36px;object-fit:contain}
nav ul{display:flex;gap:6px;list-style:none;padding:0}
nav a{display:block;padding:8px 13px;border-radius:8px;text-decoration:none;font-weight:500;color:var(--ink2)}
nav a:hover,nav a.on{color:var(--ink);background:var(--card)}
nav a.cta{background:var(--teal);color:#fff;font-weight:700}
#tg{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 12px;font:inherit}
section{padding:64px 0}
h1{font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:1.1;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.2;font-weight:800;margin-bottom:14px}
h3{font-size:1.15rem;margin-bottom:6px}
.lead{font-size:1.2rem;color:var(--ink2);max-width:58ch;margin:18px 0 26px}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;background:var(--teal);color:#fff;font:inherit;font-weight:700;text-decoration:none;border:0;cursor:pointer}
.btn.alt{background:transparent;color:var(--ink);border:2px solid var(--line);margin-left:8px}
.hero,.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.hero{padding:60px 0}
.img{width:100%;height:auto;display:block;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.card p,.card li{color:var(--ink2)}.card ul{padding-left:18px;margin-top:8px}
.card .img{margin-bottom:14px;border:0}
.band{background:var(--dark);color:#e8eff7}.band p{color:#a9bdd2}
.band .card{background:#0f2a4a;border-color:#1f3a5a}.band .card p{color:#a9bdd2}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}
.stats b{display:block;font-size:2.6rem;color:var(--amber);line-height:1.1}
.tag{display:inline-block;font-size:.8rem;font-weight:700;border:1px solid var(--line);border-radius:20px;padding:2px 11px;margin:8px 6px 0 0;color:var(--ink2)}
.legal{max-width:760px}.legal h2{font-size:1.4rem;margin:30px 0 8px}.legal p,.legal li{color:var(--ink2);margin-bottom:8px}.legal ul{padding-left:22px}
label{display:block;font-weight:700;margin:14px 0 5px}
input,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
#ok{display:none;margin-top:14px;font-weight:700;color:var(--teal)}
footer{background:var(--dark);color:#a9bdd2;padding:50px 0 24px;font-size:.95rem}
footer .grid{margin-bottom:26px}footer h4{color:#fff;margin-bottom:8px}
footer a{display:block;text-decoration:none;padding:2px 0}footer a:hover{color:#fff}
@media(max-width:820px){.hero,.two{grid-template-columns:1fr}#tg{display:block}
nav ul{display:none;position:absolute;top:66px;left:0;right:0;background:var(--bg);flex-direction:column;padding:12px 22px;border-bottom:1px solid var(--line)}nav ul.open{display:flex}}

.bighero{background:radial-gradient(circle at 75% 40%,#12457a 0,#0a2444 45%,#06142a 100%);color:#e8eff7;overflow:hidden}
.bighero .hero{padding:80px 0 70px}
.bighero h1{color:#fff}.bighero .lead{color:#b6c9dd}
.bighero .btn.alt{color:#fff;border-color:#3b5f86}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{border:1px solid #2c5a8a;border-radius:20px;padding:4px 14px;font-size:.88rem;color:#b6c9dd}
.hv{width:100%;height:auto}
.hv .l{stroke:#2ccab9;stroke-width:2.5;stroke-dasharray:5 8;animation:d 1.4s linear infinite}
.hv .p{animation:pl 2.8s ease-in-out infinite}
@keyframes d{to{stroke-dashoffset:-26}}@keyframes pl{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.hv .l,.hv .p{animation:none}}
.alt-bg{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.q{font-size:1.05rem;color:var(--ink2)}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer}details p{color:var(--ink2);margin-top:8px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--dark);color:#fff}td{color:var(--ink2)}
.tw{overflow-x:auto}
#ok,#er{display:none;margin-top:14px;font-weight:700}#er{color:#c0392b}
.hp{position:absolute;left:-9999px}
/* justified body text */
main p,main li,main summary+p,td{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
main p.lead{text-align:justify}
.stats p,.chips span,#ok,#er{text-align:left;hyphens:manual}
/* ---------- responsive layer ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden}
img,svg{max-width:100%}
.hero>*,.two>*,.grid>*{min-width:0}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.btn{min-height:46px;text-align:center}
.btn.alt{margin-left:0}
.hero .btn{margin:0 10px 10px 0}
.w{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
nav a{min-height:44px;display:flex;align-items:center}
.nav{gap:12px}
.logo span{white-space:nowrap}
.tw{-webkit-overflow-scrolling:touch}
table{min-width:560px}
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:1024px){
section{padding:52px 0}
.hero,.two{gap:26px}
.bighero .hero{padding:60px 0 50px}
}
@media(max-width:820px){
.hero,.two{grid-template-columns:1fr}
.hero{padding:40px 0}
.hv{max-width:420px;margin:0 auto}
.hero>.img{max-width:520px;margin:0 auto}
#tg{display:block;min-height:44px}
nav ul{max-height:calc(100vh - 66px);overflow-y:auto;box-shadow:0 12px 24px rgba(0,0,0,.12)}
nav a{padding:12px 14px}
footer .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
body{font-size:16px}
section{padding:42px 0}
.w{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.logo{font-size:.9rem}.logo img{width:30px;height:30px}
.lead{font-size:1.05rem;margin:14px 0 20px}
.hero .btn,.band .btn,section .btn{display:block;width:100%;margin:0 0 10px}
.bighero .hero{padding:36px 0 30px}
.chips{gap:6px}.chips span{font-size:.8rem;padding:3px 10px}
.card{padding:20px}
.stats b{font-size:2.1rem}
footer .grid{grid-template-columns:1fr}
details{padding:14px 16px}
input,textarea{font-size:16px}
}
@media(max-width:360px){.logo span{font-size:.78rem}#tg{padding:8px 10px}}
@media(hover:none){nav a:hover{background:transparent}}
/* hero padding fix: .hero shares an element with .w, so only set vertical padding */
.hero,.bighero .hero{padding-top:60px;padding-bottom:60px;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.bighero .hero{padding-top:80px;padding-bottom:70px}
@media(max-width:1024px){.bighero .hero{padding-top:60px;padding-bottom:50px}}
@media(max-width:820px){.hero{padding-top:40px;padding-bottom:40px}.bighero .hero{padding-top:44px;padding-bottom:40px}}
@media(max-width:560px){.hero,.bighero .hero{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.hero{padding-top:32px;padding-bottom:32px}.bighero .hero{padding-top:36px;padding-bottom:32px}.hv{max-width:340px}}
/* sticky header: the sticky element must be the direct child of body */
#hdr{position:sticky;top:0;z-index:50}
header{position:relative;top:auto;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(8,24,45,.12)}
body{overflow-x:clip}
html{scroll-padding-top:70px}
/* dark blue first block on inner pages */
.pagehero{background:radial-gradient(circle at 80% 30%,#12457a 0,#0a2444 50%,#06142a 100%);color:#e8eff7;border-bottom:4px solid var(--teal)}
.pagehero h1{color:#fff}
.pagehero .lead,.pagehero p{color:#b6c9dd}
.pagehero a:not(.btn){color:#fff;text-decoration:underline}
.pagehero .btn.alt{color:#fff;border-color:#3b5f86}
.pagehero .img{border-color:#2c5a8a;background:#0c2340}
a.card:hover{border-color:var(--teal)}
.legal ul li b{color:var(--ink)}
/* blog articles use the full site content width */
article.legal{max-width:none}
article.legal>.img{max-height:420px;object-fit:cover}

/* always light theme, even when the phone is in dark mode */
:root{color-scheme:light}
/* justified text on all screen sizes: desktop, tablet and phone */
main p,main p.lead,main li,main td,main details p,main .q,.legal p,.legal li,.card p,.card li,.pagehero p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.stats p,.chips span,#ok,#er{text-align:left;hyphens:manual}