:root{
  color-scheme: light;

  --bg:#f4f7fb;
  --bg-accent:#e8f0f8;
  --panel:#ffffff;
  --panel-strong:#fbfdff;
  --panel-soft:#f7fafd;
  --text:#162033;
  --muted:#637089;
  --muted-strong:#3c485f;
  --border:#d9e2ef;
  --border-strong:#c7d3e3;
  --brand:#0c71c3;
  --brand-2:#2f6f9f;
  --brand-soft:#e7f2fb;
  --ok:#4f7468;
  --ok-soft:#edf6f2;
  --warn:#8a7450;
  --warn-soft:#fbf4e6;
  --bad:#8a5f62;
  --bad-soft:#fbeeee;
  --info:#526f91;
  --shadow:0 18px 48px rgba(35,49,72,.10);
  --shadow-soft:0 10px 28px rgba(35,49,72,.07);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  /* compatibility aliases for existing Email Surface classes */
  --brand2:var(--brand-2);
  --line:var(--border);
  --danger:var(--bad);
  --surface-1:var(--panel);
  --surface-2:var(--panel-soft);
  --surface-3:var(--bg-accent);
  --chip-bg:#eef4fa;
  --btn-bg:var(--panel);
  --btn-border:var(--border-strong);
  --btn-ghost-border:var(--border-strong);
  --panel-glass:var(--panel);
  --card:var(--panel-soft);
  --input-bg:var(--panel);
  --border-soft:rgba(217,226,239,.78);
  --topbar-bg:rgba(255,255,255,.82);
  --topbar-border:rgba(217,226,239,.88);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
[
  hidden] {
  display: none !important;
}
html[data-theme="dark"]{
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(12,113,195,.10), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(82,111,145,.10), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, #eef3f8 100%);
  color:var(--text);
  line-height:1.55;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:24px}

.topbar{position:sticky; top:0; z-index:20; background:transparent; border-bottom:0; padding:10px 0 0}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; background:var(--topbar-bg); border:1px solid var(--topbar-border); border-radius:999px; box-shadow:var(--shadow-soft); backdrop-filter:blur(12px)}
.topbar__controls{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text)}
.brand__logo {
  display: block;
  width: clamp(132px, 16vw, 172px);
  max-width: 172px;
  max-height: 48px; /* adjust to your desired lockup height */
  height: auto;
  object-fit: contain;
}

.footer__logo {
  display: block;
  width: 142px;
  max-width: 142px;
  max-height: 40px; /* footer logos usually sit smaller */
  height: auto;
  object-fit: contain;
}

.topnav{display:flex; gap:14px; font-size:14px; color:var(--muted)}
.topnav a{color:var(--muted-strong)}
.topnav a:hover{color:var(--brand); text-decoration:none}

.hero{display:grid; grid-template-columns:1fr; gap:20px; padding-top:24px}
.hero__copy h1{font-size:clamp(34px, 5vw, 54px); line-height:1.05; letter-spacing:-.045em; margin:0 0 14px; max-width:880px}
.lede{color:var(--muted); margin:0 0 14px; max-width:860px}
.bullets{margin:0; padding-left:18px; color:var(--muted)}
.bullets li{margin:6px 0}
.hero__card,.overlay__card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow)}
.label{display:block; font-size:13px; color:var(--muted-strong); margin-bottom:8px; letter-spacing:.02em; font-weight:700}
.row{display:flex; gap:10px; min-width:0; flex-wrap:wrap}
.row--tight{gap:8px; flex-wrap:wrap}
.input{flex:1; min-width:220px; padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--input-bg); color:var(--text); font:inherit; font-size:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.input:focus,.btn:focus-visible,.tab:focus-visible,.toggle:focus-within{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(12,113,195,.13)}
.btn{border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--muted-strong); padding:12px 15px; border-radius:var(--radius-md); cursor:pointer; font-weight:700; font-size:14px; font-family:inherit; box-shadow:0 1px 0 rgba(255,255,255,.8)}
.btn:hover{border-color:#afbfce; transform:translateY(-1px); text-decoration:none}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn--primary,.btn--secondary{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(12,113,195,.18)}
.btn--primary:hover,.btn--secondary:hover{background:#0a64ad; border-color:#0a64ad}
.btn--ghost{background:transparent; border:1px solid var(--btn-ghost-border); box-shadow:none}
.btn--sm{padding:8px 10px; font-size:13px}
.hint,.muted{color:var(--muted)}
.hint{margin-top:10px; font-size:13px}
.status{margin-top:12px; padding:10px 12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--panel-soft); color:var(--muted-strong); font-size:13px}

.section{padding:38px 0 0}.section h2{margin:0 0 12px; font-size:24px; letter-spacing:-.02em}.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.card,.panel,.adv,.note,.pathStep,.cta{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft)}
.card{padding:16px}.card h3{margin:0 0 8px; font-size:16px}.card p{margin:0; color:var(--muted)}
.results{margin-top:16px; display:block}.journey{display:grid; gap:16px}.journeyStep{position:relative; padding:16px; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--panel-strong); box-shadow:var(--shadow-soft)}
.journeyStep__eyebrow{margin:0 0 10px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.panel{overflow:hidden}.panel__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px 15px; border-bottom:1px solid var(--border); background:var(--panel-soft)}.panel__title{font-weight:800}.panel__body{padding:15px; overflow-x:hidden}.panel--evidence,.panel--unavailable{background:var(--panel); border-color:var(--border)}.panel--fail,.panel--ok{background:var(--panel); border-color:var(--border)}
.pills{display:flex; flex-wrap:wrap; gap:8px}.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:var(--chip-bg); color:var(--muted-strong); max-width:100%; white-space:normal; overflow-wrap:anywhere; word-break:break-word}.pill i{display:inline-block; width:8px; height:8px; border-radius:999px; background:#9aa9bb}.pill--ok,.pill--bad,.pill--warn,.pill--info{border-color:var(--border); color:var(--muted-strong)}.pill--ok i,.pill--bad i,.pill--warn i,.pill--info i{background:#9aa9bb}
.adv{margin-top:12px; overflow:hidden; background:var(--panel)}.adv>summary{list-style:none; cursor:pointer; padding:12px 14px; font-weight:800; color:var(--muted-strong)}.adv>summary::-webkit-details-marker{display:none}.adv>summary:after{content:"▾"; float:right; opacity:.7}.adv[open]>summary:after{content:"▴"}.adv__body{padding:12px 14px; border-top:1px solid var(--border); color:var(--text); font-size:13px}
.kv{display:grid; grid-template-columns:140px 1fr; gap:8px 12px}.kv .k{color:var(--muted)}.kv .v,.mono{font-family:var(--mono); font-size:12.5px; overflow-wrap:anywhere}
.path{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:18px 0 14px; padding:14px; border:1px solid var(--border); background:rgba(255,255,255,.55); border-radius:var(--radius-xl); box-shadow:var(--shadow-soft)}.pathStep{flex:1 1 180px; display:flex; gap:12px; align-items:flex-start; padding:12px; min-width:180px}.pathArrow{display:flex; align-items:center; opacity:.45; font-weight:700}.pathIcon{width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; background:var(--brand-soft); border:1px solid #d2e5f4; color:var(--brand)}.pathIcon.ok{background:var(--ok-soft); border-color:#d7e8e0; color:var(--ok)}.pathTitle{font-weight:800; margin-bottom:2px}.pathDesc{color:var(--muted); line-height:1.35; font-size:13px}.noteRow{display:grid; grid-template-columns:1fr; gap:10px; margin:10px 0 0}.note{padding:13px 15px; color:var(--muted)}.note strong{color:var(--text)}.note--tight{padding:10px 12px}
.toggle{display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel-soft)}.toggle--sm{padding:6px 8px; gap:8px}.toggle input{position:absolute; opacity:0; pointer-events:none}.toggle__track{width:44px; height:24px; border-radius:999px; background:#d9e5f0; border:1px solid var(--border-strong); position:relative}.toggle__track::after{content:""; width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; transition:transform .18s ease, background .18s ease; box-shadow:0 1px 4px rgba(35,49,72,.24)}.toggle input:checked + .toggle__track::after{transform:translateX(20px); background:var(--brand)}.toggle--sm .toggle__track{width:40px; height:22px}.toggle--sm .toggle__track::after{width:16px; height:16px}.toggle--sm input:checked + .toggle__track::after{transform:translateX(18px)}.toggle__label,.toggle__icons{font-size:13px; color:var(--muted)}.toggle__icons{display:inline-flex; gap:6px}.toggle__icons .ico{width:14px; height:14px; opacity:.65}.toggle input:checked ~ .toggle__icons .ico--sun{opacity:1}.toggle input:checked ~ .toggle__icons .ico--moon{opacity:.35}.toggle input:not(:checked) ~ .toggle__icons .ico--moon{opacity:1}.toggle input:not(:checked) ~ .toggle__icons .ico--sun{opacity:.35}
.overlay{position:fixed; inset:0; background:rgba(22,32,51,.25); z-index:100}.overlay__card{max-width:720px; margin:6vh auto}.overlay__top,.overlay__foot{display:flex; align-items:center; justify-content:space-between; gap:12px}.overlay__progress{height:10px; background:var(--panel-soft); border-radius:999px; overflow:hidden; border:1px solid var(--border)}.overlay__bar{height:100%; width:0%; background:var(--brand)}.overlay__body{margin-top:12px; padding:14px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--panel-soft); min-height:210px}.overlay__foot{margin-top:10px}
.kpi{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}.kpi__score{font-size:24px; font-weight:800}.kpi__meta{color:var(--muted); font-size:13px}.pre{margin:12px 0 0; padding:12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--panel-soft); color:#263246; font-family:var(--mono); font-size:12px; overflow:auto; max-height:320px; max-width:100%; -webkit-overflow-scrolling:touch}
.section--cta{padding-bottom:24px}.cta{display:flex; gap:18px; align-items:center; justify-content:space-between; padding:20px; background:var(--panel)}.cta__actions{display:flex; gap:10px; flex-wrap:wrap}.footer{margin-top:28px; padding:22px; border:1px solid var(--border); border-radius:var(--radius-xl); background:rgba(255,255,255,.68); box-shadow:var(--shadow-soft)}.footer__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:18px}.footer__grid ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}.footer__grid li{margin:6px 0}.footer__brand{display:flex; align-items:center; gap:10px; margin-bottom:8px}.footer__bottom{margin-top:14px; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px; flex-wrap:wrap}.dot{opacity:.5}.share-control{opacity:.62}.share-control::after{content:" · internal"; font-weight:600; color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tabs,.tabs__bar,.tabpanes,.tabpane{display:block}@keyframes fadeIn{from{opacity:.5; transform:translateY(2px)}to{opacity:1; transform:translateY(0)}}
.hero__card,.tabpanes,.tabpane,.panel,.card,.results,.journey,.journeyStep{min-width:0; max-width:100%}.row>*{min-width:0}.pre,.adv__body,.muted,.kv,.kv .v{overflow-wrap:anywhere; word-break:break-word}.panel__body>*,.pills,.panel__body .row{min-width:0; max-width:100%}.panel__body .btn{white-space:normal}.panel__body pre,.panel__body .pre{max-width:100%; overflow-x:auto; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word}

@media (min-width:760px){.noteRow{grid-template-columns:1fr 1fr}}
@media (max-width:920px){.hero__copy h1{font-size:34px}.grid3,.footer__grid{grid-template-columns:1fr}.topnav{display:none}.topbar{padding:6px 0 0}.topbar__inner{border-radius:var(--radius-lg); align-items:flex-start}.cta{align-items:flex-start; flex-direction:column}.pathArrow{display:none}}
@media (max-width:560px){.wrap{padding:16px}.hero__card,.journeyStep,.footer{border-radius:var(--radius-lg); padding:16px}.topbar__inner{padding:10px 12px}.brand span{font-size:13px}.brand__logo{width:118px}.topbar__controls .btn{width:auto; white-space:nowrap}.input,.btn{width:100%}.kv{grid-template-columns:1fr}.overlay__card{margin:3vh 12px}.overlay__top,.overlay__foot{align-items:flex-start; flex-direction:column}}