:root{
  --ink:#0b1220;
  --muted:#475569;
  --brand:#0ea5e9;
  --brand2:#38bdf8;
  --soft:#f1f5f9;
  --line:#e2e8f0;
  --bg:#ffffff;
  --card:#ffffff;
  --panel-h:80dvh;
}

/* RESET / BASE */
*{
  box-sizing:border-box;
}

/* Normal page flow (scrolls like a website) */
html,
body {
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  line-height:1.55;

  margin:0;
  padding:0;

  min-height:100%;
  height:auto;

  display:block;
  overflow-x:hidden;
  overflow-y:auto;
}

/* ===================== HEADER / NAV ===================== */

header.site-header {
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:5;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand h1{
  font-size:16px;
  margin:0;
}
.brand p{
  font-size:12px;
  color:var(--muted);
  margin:2px 0 0;
}
.logo{
  height:48px;
  width:auto;
  border-radius:8px;
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.nav a{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--ink);
  text-decoration:none;
}
.nav a:hover{
  background:#dfecff;
  transform:translateY(-2px);
  border:1px solid silver;
}

a.cta,
a.cta:link,
a.cta:visited,
a.cta:hover,
a.cta:active,
.nav a.cta {
  color:#fff !important;
}
.cta{
  padding:8px 12px;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  text-decoration:none;
  transition:transform .12s ease;
}
.cta:hover{
  transform:translateY(-2px);
  background:#547BD8;
}

/* ===================== LAYOUT HELPERS ===================== */

.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 16px;
}

.section{
  margin:24px 0;
}
.section h2{
  margin:.25rem 0 .25rem;
}

.grid{
  display:grid;
  gap:16px;
}
@media (min-width:640px){
  .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===================== HERO / BADGE / BUTTONS ===================== */

.hero{
  padding:28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,#e0f2fe,#f8fafc);
}
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#ecfeff;
  border:1px solid #bae6fd;
  color:#075985;
  font-size:12px;
  font-weight:700;
}
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  background:#547BD8;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  display:inline-block;
  text-decoration:none;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{
  background:#35508E;
  transform:translateY(-2px);
}
.btn.secondary{
  background:#eaeaea;
  border:1px solid silver;
  color:var(--ink);
}
.btn.secondary:hover{
  background:#dfecff;
  transform:translateY(-2px);
  border:1px solid silver;
}

/* ===================== CARDS ===================== */

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform:translateY(0px);
  box-shadow:0 8px 24px rgba(2,8,23,.06);
}
.card h3{
  margin:0 0 6px;
}
.card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.cardlink{
  background:var(--cardlink);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
  color:inherit;
  display:block;
}
.cardlink:hover{
  background:#e1f3fe;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(2,8,23,.06);
}
.cardlink h3{
  margin:0 0 6px;
}
.cardlink p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* ===================== INFO LISTS ===================== */

.list{
  padding-left:18px;
  margin:0;
}

.kv{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:10px;
}
.kv div{
  padding:6px 0;
  border-bottom:1px dashed var(--line);
}

#viewer h2 {
  color:#565656;
  margin:0;
}

/* ===================== FOOTER ===================== */

footer{
  border-top:1px solid var(--line);
  margin-top:32px;

  padding:0.25rem 0;
  background:#f8f9fa;
  border-top:1px solid #ccc;
  font-size:0.75rem;
  color:#555;
  text-align:center;
  line-height:1.2;

  flex-shrink:0;
  margin-bottom:0 !important;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.25rem 0 !important;
  gap:12px;
  flex-wrap:wrap;
  line-height:1.2;
  margin:0 auto;
}

/* ===================== TEXT IMPORT CLEANUP (Word -> Web) ===================== */

.list-tight1,
.list-tight2,
.list-tight3,
.list-tightParagraph,
.list-tightParagraphCxSpFirst,
.list-tightParagraphCxSpMiddle,
.list-tightParagraphCxSpLast {
  margin-top:0.2em !important;
  margin-bottom:0.2em !important;
  line-height:1.3 !important;
  padding-left:1.2em;
}
.list-tight2{padding-left:2em;}
.list-tight3{padding-left:3em;}

.list-tight1 li,
.list-tightParagraph li{
  margin-bottom:0.2em !important;
  line-height:1.3 !important;
}

.h4{
  margin-top:0.6em;
  margin-bottom:0.3em;
  line-height:1.25;
  font-weight:600;
}

/* highlighted h4 band */
h4,
.MsoHeading4,
.Heading4,
p.MsoHeading4 {
  background:#b0cfff66;
  border-top:2px solid #71a8ff;
  border-radius:6px;
  padding:6px 10px;
  margin-top:0.8em;
  margin-bottom:0.4em;
  line-height:1.25;
  font-weight:600;
}