/* =========
   Base / Reset
   ========= */
:root{
  --bg: #ffffff;
  --bg-soft:#f7f8fa;
  --ink:#1b1f23;
  --ink-2:#444b53;
  --ink-3:#666666;
  --primary:#3D91A6;
  --primary-600:#0E8088;
  --border:#e4e7ec;
  --shadow: 0 4px 16px rgba(0,0,0,.06);
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --maxw: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-600); text-decoration:underline}
code, kbd, samp{font-family:var(--mono); font-size:.95em; background:var(--bg-soft); padding:.1rem .35rem; border-radius:6px}

/* Containers */
.container{max-width: var(--maxw); margin: 0 auto; padding: 0 24px}

/* =========
   Header
   ========= */
.site-header{
  border-bottom:1px solid var(--border);
  background:#fff;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-logo{height:34px}
.brand-text{font-size:1.05rem; letter-spacing:.2px}

.topnav a{
  margin-left:18px; padding:8px 4px; border-bottom:2px solid transparent;
  color:var(--ink-2);
}
.topnav a:hover{border-color:var(--primary); text-decoration:none}
.topnav a.active{border-color:var(--primary); color:var(--ink)}

/* =========
   Hero
   ========= */
.hero{background:var(--bg-soft); border-bottom:1px solid var(--border)}
.hero-compact{padding:28px 0}
.page-title{margin:0 0 6px; font-size:2rem}
.lead{margin:0; color:var(--ink-3)}

/* =========
   Layout (sidebar + content)
   ========= */
.layout{display:grid; grid-template-columns: 260px 1fr; gap:32px; padding:32px 0}
@media (max-width: 920px){
  .layout{grid-template-columns: 1fr}
}

/* Sidebar */
.sidebar{position:sticky; top:16px; align-self:start}
.sidenav{background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:14px}
.sidenav-group + .sidenav-group{margin-top:16px; padding-top:12px; border-top:1px dashed var(--border)}
.sidenav h3{font-size:.95rem; margin:.25rem 0 6px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.sidenav a{display:block; padding:6px 4px; color:var(--ink-2); border-radius:6px}
.sidenav a:hover{background:var(--bg-soft); text-decoration:none}

/* Content blocks */
.block{margin-bottom:40px}
.block h2{margin-top:0}

/* Callout */
.callout{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: #eef6ff; border:1px solid #d7e8ff; color:#134074;
  padding:12px 14px; border-radius: var(--radius);
}
.callout .muted{color:#0E8088}

/* Buttons / Links */
.btn{
  display:inline-block; background:var(--primary); color:#fff;
  padding:10px 14px; border-radius:8px; box-shadow: var(--shadow);
}
.btn:hover{background:var(--primary-600); color:#fff; text-decoration:none}
.btn[aria-disabled="true"]{opacity:.6; pointer-events:none}
.btn-sm{padding:7px 10px; font-size:.92rem}
.link{margin-left:12px}

/* Cards / Grids */
.card-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px}
@media (max-width: 920px){.card-grid{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow)}
.card-body{padding:18px}
.card-title{margin:0 0 6px}
.card-meta{margin:0 0 12px; color:var(--ink-3)}
.card .steps{margin:8px 0 14px; padding-left:18px}
.card-actions{display:flex; align-items:center; gap:10px}

/* Lists */
.link-list{padding-left:18px}
.link-list li{margin:6px 0}

/* Video */
.video-embed{
  border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background:#000;
  aspect-ratio: 16/9; max-width:900px
}
.video-embed iframe{width:100%; height:100%; border:0}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff; margin-top:32px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:18px 0}
.footnav a{margin-left:16px; color:var(--ink-2)}
.footnav a:hover{color:var(--ink)}
.muted{color:var(--ink-3)}


.icon-text {
  display: inline-flex;
  align-items: center;
}

.icon {
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
}

.icon-mid {
  width: 2em;
  height: 2em;
  margin-right: 0.3em;
}

strong {
  margin-left: 0.25em;
  margin-right: 0.25em;
}


.icon-link {
  display: inline-flex;
  align-items: center; /* vertical centering */
  gap: 0.005em;          /* space between icon and text */
}