:root{
  --bg:#f4f7fb;
  --bg-soft:#ffffff;
  --primary:#007b8f; /* teal-blue */
  --primary-dark:#024c57;
  --accent:#00b894;
  --text:#111827;
  --muted:#6b7280;
  --border:#dde3ee;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:var(--primary);}
a:hover{color:var(--primary-dark);}
.container{width:min(1100px,92%);margin:0 auto;}

.site-header{position:sticky;top:0;z-index:40;background:rgba(244,247,251,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.9rem;}
.brand-text{display:flex;flex-direction:column;}
.brand-title{font-weight:700;font-size:.98rem;}
.brand-subtitle{font-size:.78rem;color:var(--muted);}
.nav a{margin-left:16px;font-size:.9rem;color:var(--muted);}
.nav a:hover{color:var(--primary);}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg-soft);}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;pointer-events:none;}
.hero-inner{position:relative;padding:40px 0 32px;}
.hero-copy{max-width:720px;}
.hero h1{font-size:clamp(1.9rem,2.5vw+1rem,2.6rem);margin:0 0 12px;}
.hero-lead{font-size:1rem;color:var(--muted);max-width:650px;}
.hero-highlights{list-style:none;padding:0;margin:14px 0 0;color:var(--text);}
.hero-highlights li{position:relative;padding-left:20px;margin-bottom:4px;font-size:.94rem;}
.hero-highlights li::before{content:'•';position:absolute;left:3px;top:-1px;color:var(--accent);}
.hero-cta{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.btn-primary{appearance:none;border:0;background:var(--primary);color:#fff;font-weight:600;padding:12px 18px;border-radius:999px;cursor:pointer;font-size:.98rem;box-shadow:0 12px 25px rgba(0,123,143,.35);}
.btn-primary:hover{background:var(--primary-dark);}
.hero-note{font-size:.85rem;color:var(--muted);max-width:600px;}

.toc{margin-top:18px;}
.toc-details{border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);padding:0 12px;}
.toc-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px 4px;font-weight:600;color:var(--primary-dark);}
.toc-details summary::-webkit-details-marker{display:none;}
.toc-panel{padding:0 0 10px;}
.toc-list{margin:0 0 0 20px;padding:0;font-size:.9rem;color:var(--muted);}
.toc-list li{margin:2px 0;}
.toc-list a{color:var(--muted);}
.toc-list a:hover{color:var(--primary);}
.chev{font-size:.8rem;color:var(--muted);}

.main-content{padding:24px 0 40px;}
.main-content section{margin-top:26px;padding:18px 18px 20px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--border);}
h2{margin:0 0 10px;font-size:1.25rem;}
h3{margin:12px 0 6px;font-size:1rem;}
p{font-size:.95rem;line-height:1.6;}
ul,ol{font-size:.94rem;}
ul{padding-left:20px;}
ol{padding-left:22px;}
.note{margin-top:8px;font-size:.85rem;color:var(--muted);}
.section-banner{width:100%;border-radius:12px;border:1px solid var(--border);margin:8px 0 14px;}

.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--border);margin-top:8px;}
table{width:100%;border-collapse:collapse;font-size:.9rem;}
thead{background:#e4f4f7;}
th,td{padding:10px 10px;border-bottom:1px solid var(--border);text-align:left;}
tbody tr:nth-child(even){background:#f8fafc;}

.grid-2{display:grid;grid-template-columns:1.2fr 1.2fr;gap:16px;margin-top:10px;}
.steps li{margin-bottom:6px;}

.cta-box{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f0fcf7;border-left:4px solid var(--accent);font-size:.9rem;}

details{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#f9fafb;}
details summary{cursor:pointer;font-weight:500;}
details p{margin-top:6px;font-size:.9rem;}

.site-footer{border-top:1px solid var(--border);padding:18px 0;background:var(--bg-soft);}
.footer-inner{text-align:center;font-size:.85rem;color:var(--muted);}

@media (max-width:800px){
  .nav{display:none;}
  .grid-2{grid-template-columns:1fr;}
  .hero-inner{padding-top:28px;padding-bottom:26px;}
}