/* AllPanelExch — OPEN SKY. Light page, deep-sky chrome.
   Naming is its own: nothing here reuses the hdr/wrap/nav/btn/seo-box set of the
   previous build, nor the topbar/act/mark/menu/roundup set used on the sibling. */
:root{
  --sky:#EFF5FB; --sky-2:#E3EDF8; --paper:#FFFFFF;
  --deep:#0E3A5C; --deep-2:#0A2C46;
  --ink:#12293D; --quiet:#5A7186; --hush:#8397A9;
  --rule:#D3E1EE; --rule-2:#BFD4E6;
  --azure:#1B7FD4; --azure-d:#1668B8; --azure-soft:#E6F1FB;
  --wa:#25D366; --wa-ink:#04250F;
  --flag-no:#C4453F; --flag-yes:#1E8E5A;
  --r:14px; --r-s:9px; --hold:1120px;
  --disp:'Figtree',system-ui,-apple-system,sans-serif;
  --read:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--sky);color:var(--ink);font:16.5px/1.75 var(--read);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--azure-d)}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.15;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,2.95rem);letter-spacing:-.022em}
h2{font-size:clamp(1.35rem,2.8vw,1.95rem);margin-top:1.75em;letter-spacing:-.015em}
h3{font-size:clamp(1.08rem,2vw,1.32rem);margin-top:1.4em;font-weight:700}
p{margin:0 0 1.05em}
.gutter{width:100%;max-width:var(--hold);margin:0 auto;padding:0 20px}
.hop{position:absolute;left:-9999px;top:0;z-index:999;background:var(--wa);
  color:var(--wa-ink);padding:10px 16px;font-weight:700}
.hop:focus{left:0}

/* ---------------------------------------------------------- chrome */
.mast{position:sticky;top:0;z-index:60;width:100%;max-width:100vw;
  background:var(--deep);border-bottom:1px solid rgba(255,255,255,.09)}
.mast-row{display:flex;align-items:center;gap:16px;min-height:64px}
.flag{display:flex;align-items:center;flex:none;margin-right:auto}
.flag img{height:38px;width:auto;display:block}
.routes{display:flex;align-items:center;gap:1px}
.routes a{font-family:var(--disp);font-size:.97rem;font-weight:600;color:#C8DCEC;
  text-decoration:none;padding:9px 12px;border-radius:var(--r-s)}
.routes a:hover{color:#fff;background:rgba(255,255,255,.09)}
.routes a[aria-current="page"]{color:#fff;background:var(--azure-d)}
.press{display:inline-block;font-family:var(--disp);font-weight:700;text-decoration:none;
  border-radius:99px;text-align:center;border:0;cursor:pointer}
.press-wa{background:var(--wa)!important;color:var(--wa-ink)!important;padding:11px 21px;font-size:1rem}
.press-wa:hover{background:#2FE372!important}
.press-out{background:transparent!important;color:var(--azure-d)!important;
  padding:10px 20px;font-size:1rem;border:2px solid var(--azure)!important}
.press-out:hover{background:var(--azure-soft)!important}
.press-lg{padding:15px 32px;font-size:1.14rem}
.opener{display:none;flex:none;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);
  color:#fff;width:44px;height:42px;border-radius:var(--r-s);cursor:pointer;font-size:1.2rem;line-height:1}
@media(max-width:960px){
  .routes{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--deep-2);padding:6px 16px 14px;max-height:0;overflow:hidden;visibility:hidden}
  .routes.shown{max-height:80vh;overflow:auto;visibility:visible}
  .routes a{padding:13px 8px;border-bottom:1px solid rgba(255,255,255,.09)}
  .opener{display:block;order:3}
  .mast-row .press-wa{display:none}
  .flag img{height:32px}
}


/* card band — sits between </header> and the page body, first thing on screen */
.cardband{background:var(--sky-2);border-bottom:1px solid var(--rule);padding:26px 0 28px}
.cardband .gutter{display:flex;justify-content:center}
@media(max-width:600px){.cardband{padding:18px 0 20px}}

/* ------------------------------------------------------------ page */
.crumbline{font-size:.85rem;color:var(--hush);margin:18px 0 4px}
.crumbline a{color:var(--quiet);text-decoration:none}
.crumbline a:hover{color:var(--azure-d)}
main{display:block;padding-bottom:44px}
.boxed{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px;margin:22px 0}
.upshot{background:var(--azure-soft);border-left:4px solid var(--azure);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:22px 0}
.upshot p{margin:0;font-size:1.06rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.dataset{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem;background:var(--paper)}
.dataset th,.dataset td{border:1px solid var(--rule);padding:11px 13px;text-align:left;vertical-align:top}
.dataset th{background:var(--sky-2);font-family:var(--disp);font-weight:700}
.dataset td:first-child{color:var(--azure-d);font-weight:600}
.scrollx{overflow-x:auto;margin:20px 0}
.stair{counter-reset:s;list-style:none;padding:0;margin:22px 0}
.stair li{counter-increment:s;position:relative;padding:0 0 18px 56px}
.stair li::before{content:counter(s);position:absolute;left:0;top:-3px;width:36px;height:36px;
  border-radius:50%;background:var(--azure);color:#fff;font-family:var(--disp);font-weight:800;
  display:flex;align-items:center;justify-content:center}
.stair b{color:var(--ink)}
.imgcard{margin:26px auto;max-width:820px;width:100%}
.imgcard img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--rule)}
.imgcard figcaption{margin-top:9px;font-size:.85rem;color:var(--quiet);text-align:center}

/* ------------------------------------------------------- questions */
.qbox details{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-s);margin-bottom:9px}
.qbox summary{cursor:pointer;padding:14px 18px;font-family:var(--disp);font-weight:700;
  font-size:1.05rem;list-style:none}
.qbox summary::-webkit-details-marker{display:none}
.qbox summary::after{content:'+';float:right;color:var(--azure);font-size:1.35rem;line-height:1}
.qbox details[open] summary::after{content:'\2212'}
.qbox div{padding:0 18px 15px;color:var(--quiet);font-size:.96rem}

/* ------------------------------------------- wrap-up + query cloud */
.wrapup{margin:44px 0 24px;padding:22px 24px;background:var(--sky-2);
  border:1px solid var(--rule-2);border-radius:var(--r);max-height:340px;overflow-y:auto}
.wrapup h2{margin-top:0;font-size:1.28rem}
.wrapup h3{font-size:1.02rem;color:var(--azure-d)}
.wrapup p,.wrapup li,.wrapup dd{font-size:.93rem;color:var(--quiet)}
.wrapup ul,.wrapup ol{margin:0 0 1em;padding-left:1.2em}
.wrapup dl{margin:0 0 1em}
.wrapup dt{font-weight:700;color:var(--ink);margin-top:.6em}
.wrapup dd{margin:0 0 .4em}
.wrapup table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1em}
.wrapup th,.wrapup td{border:1px solid var(--rule);padding:7px 10px;text-align:left}
.alsoq{margin:26px 0 12px}
.alsoq h2{font-size:1.2rem;margin-bottom:.7em}
.alsoq ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.alsoq li{font-size:.82rem;color:var(--quiet);background:var(--paper);
  border:1px solid var(--rule);border-radius:99px;padding:8px 15px}

/* ----------------------------------------------------------- foot */
.underfoot{background:var(--deep);color:#B9D0E2;margin-top:34px;padding:34px 0 24px;font-size:.93rem}
.uf-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:28px}
@media(max-width:820px){.uf-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.uf-cols{grid-template-columns:1fr}}
.underfoot img.uf-mark{height:34px;width:auto;margin-bottom:12px;display:block}
.underfoot h3{font-size:1rem;color:#fff;margin:0 0 .7em}
.underfoot ul{list-style:none;margin:0;padding:0}
.underfoot li{margin-bottom:7px}
.underfoot a:not([class]){color:#B9D0E2;text-decoration:none}
.underfoot a:not([class]):hover{color:#fff}
.orbs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.orbs a{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#B9D0E2}
.orbs a:hover{color:#fff;border-color:#fff}
.orbs svg{width:16px;height:16px;fill:currentColor}
.tmark{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 13px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:8px;
  color:#D5E5F1;text-decoration:none;font-size:.85rem}
.tmark:hover{border-color:#00B67A;color:#fff}
.tmark svg{width:16px;height:16px;fill:#00B67A;flex:none}
.uf-end{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:18px;
  font-size:.85rem;color:#8FAEC6}

/* -------------------------------------------------------- chat dot */
.ping{position:fixed;right:18px;bottom:18px;z-index:80;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(14,58,92,.32);animation:pingpulse 2.4s infinite}
.ping svg{width:33px;height:33px;fill:#fff}
@keyframes pingpulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 15px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.ping{animation:none}}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px}