/* Site-wide UX layer: sticky navigation, skip link, anchor offset, back to top. */
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:96px}
.nav{position:sticky;top:0;z-index:60;transition:padding .2s}
.nav::before{content:"";position:absolute;inset:0 -100vmax;background:var(--bg);border-bottom:1px solid transparent;z-index:-1;transition:border-color .2s,box-shadow .2s}
.nav.stuck{padding-block:12px}
.nav.stuck::before{border-bottom-color:var(--line);box-shadow:0 6px 18px rgba(15,28,43,.08)}
.nav a[aria-current="page"]:not(.btn):not(.logo){color:var(--ink);font-weight:600}
.nav .sub{z-index:70}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:100;font:600 16px var(--f-body);text-decoration:none}
.skip:focus{top:8px}
.totop{position:fixed;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(15,28,43,.15);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:55}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--accent);color:var(--accent)}
.totop svg{width:20px;height:20px}
@media (max-width:520px){
  .nav{padding-block:10px;gap:6px 10px;flex-wrap:wrap}
  .nav .logo{font-size:20px}
  .nav .logo svg{width:26px;height:20px}
  .nav a.btn{padding:9px 13px;font-size:14px;white-space:nowrap}
  .nav ul{font-size:15px;gap:18px;padding-bottom:2px}
  .nav ul a{display:inline-block;padding:9px 0}
  .nav.stuck{padding-block:8px}
  [id]{scroll-margin-top:110px}
}
@media print{.nav{position:static}.totop,.skip{display:none}}

/* Light by default. Alternate section backgrounds so each section reads as its own block. */
:root{--alt:#FFFFFF}
:root[data-theme="dark"]{--alt:#101D2A}
main:not(:has(>section[style*="background"]))>section:nth-of-type(even):not(.band):not(.faqx):not(.lcta):not(.nbar):not(.chero):not(.ctint):not([style*="background"]){background:var(--alt);border-block:1px solid var(--line)}
section.faqx{background:var(--alt);border-block:1px solid var(--line)}
.sv-theme{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:none}
.sv-theme:hover{color:var(--ink);text-decoration:underline}

section.lcta{background:var(--bg)}

/* Safety net: when two neighbouring sections share a background, site-ux.js flips the later one. */
section.sv-tint{background:var(--bg)!important;border-block:1px solid var(--line)}
section.sv-white{background:var(--alt)!important;border-block:1px solid var(--line)}

/* Form fields: pure white so they read as places to type, plus a gentle one-off nudge on the name field */
:root{--field:#FFFFFF}
:root[data-theme="dark"]{--field:#26405A}
.lform input[type=text],.lform input[type=email],.gform input[type=text],.gform input[type=email],.cform input:not([type=hidden]),.cform select,.cform textarea{background:var(--field)!important;border:1.5px solid color-mix(in srgb,var(--muted) 65%,transparent)!important;box-shadow:inset 0 1px 2px rgba(15,28,43,.07);transition:border-color .2s,box-shadow .2s}
.lform input[type=text]:hover,.lform input[type=email]:hover,.gform input[type=text]:hover,.gform input[type=email]:hover,.cform input:hover,.cform select:hover,.cform textarea:hover{border-color:var(--accent)!important}
.lform input:focus,.gform input:focus,.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 32%,transparent)}
@keyframes svnudge{0%,100%{box-shadow:inset 0 1px 2px rgba(15,28,43,.07),0 0 0 0 color-mix(in srgb,var(--signal) 0%,transparent)}50%{box-shadow:inset 0 1px 2px rgba(15,28,43,.07),0 0 0 6px color-mix(in srgb,var(--signal) 38%,transparent)}}
.sv-nudge input[name=name]:not(:focus):invalid{animation:svnudge 2.2s ease-in-out .4s 3}
@media (prefers-reduced-motion:reduce){.sv-nudge input[name=name]:not(:focus):invalid{animation:none}}

/* guide illustrations used in "Keep reading" cards */
.gsvg{display:block;width:100%;height:auto}
.gsvg .gs{fill:var(--surface)}.gsvg .gb{fill:var(--bg)}.gsvg .gl{stroke:var(--line)}
.gsvg .ga{fill:var(--accent)}.gsvg .ga2{stroke:var(--accent)}
.gsvg .gg{fill:var(--signal)}.gsvg .gg[fill=none]{fill:none;stroke:var(--signal)}
.gsvg .gi{fill:var(--ink)}.gsvg .gm{fill:var(--muted)}
.gsvg .gm2{fill:var(--line)}.gsvg .gm2[fill=none]{fill:none;stroke:var(--muted)}
.gsvg .gbar{fill:var(--line)}
.gsvg .gw{fill:#fff}.gsvg .gk{fill:#0F1C2B}.gsvg .gw2{stroke:#fff;fill:none}
.gsvg .gt{font-family:var(--f-mono),monospace}
.prob.pg .rthumb{display:block;margin:0 0 14px}
.prob.pg .rthumb .gsvg{border:1px solid var(--line)}
.prob.pg .rthumb .gsvg>rect:first-child{stroke:none}

/* Whole-card links: click anywhere on a card to open its page */
.prob.pg,.scard,.svc,.hubcard{position:relative;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.prob.pg h3 a::after,.scard a.more::after,.svc a.more::after,.hubcard a.more::after{content:"";position:absolute;inset:0;z-index:1}
.prob.pg:hover,.scard:hover,.svc:hover,.hubcard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(15,28,43,.10)}
.prob.pg:hover h3 a,.scard:hover h3,.svc:hover h3,.hubcard:hover h3 a{color:var(--accent)}
.prob.pg:focus-within,.scard:focus-within,.svc:focus-within,.hubcard:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.prob.pg a:focus-visible,.scard a:focus-visible,.svc a:focus-visible,.hubcard a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.prob.pg:hover,.scard:hover,.svc:hover,.hubcard:hover{transform:none}}

.newtag{font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--signal);color:#0F1C2B;padding:2px 6px;margin-left:6px;vertical-align:middle;border-radius:2px}
.tblwrap+.prose,.tblwrap+p{margin-top:20px}

.fli{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:inherit;text-decoration:none;opacity:.9}.fli:hover{opacity:1;color:var(--accent);text-decoration:underline}.fli svg{flex:none}