:root{
  --bg:#fbfefc; --ink:#0b1b16; --muted:#46685b;
  --line:#e6f0eb; --panel:#ffffff; --panel-2:#f2fbf6;
  --brand:#149e55; --brand-2:#0f766e; --accent:#84cc16;
  --link:#0ea5e9; --radius:16px; --max:1180px; --shadow:0 10px 32px rgba(10,45,30,.08);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fbfefc 0%,#f7fdf9 100%)}
.container{max-width:var(--max);margin:auto;padding:24px 20px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo{width:font-weight:800;letter-spacing:.3px}
.nav-toggle{margin-left:auto;border:1px solid var(--line);background:#fff;padding:10px 12px;border-radius:12px;display:none}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;margin-left:auto;padding:0;align-items:center;flex-wrap:wrap}
.nav a{display:block;padding:10px 12px;border-radius:10px}
.nav a:hover{background:var(--panel-2);text-decoration:none}

/* Dropdown */
.more{position:relative}
.more-btn{border:1px solid var(--line);background:#fff;padding:10px 12px;border-radius:10px;cursor:pointer}
.dropdown{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);list-style:none;margin:0;padding:6px;display:none;min-width:210px}
.dropdown li a{padding:8px 10px;display:block;border-radius:8px}
.dropdown li a:hover{background:var(--panel-2)}

/* Mobile */
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav ul{display:none}
  .nav.open ul{display:flex;flex-direction:column;align-items:stretch;margin:10px 0 0}
  .more .dropdown{position:relative;top:0;right:auto;box-shadow:none;border:0;display:block;padding:0}
}

/* Hero */
.hero{background:linear-gradient(120deg,rgba(20,158,85,.10),rgba(14,165,233,.10));border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.hero .title{font-size:clamp(28px,4vw,46px);margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--brand);color:#fff;font-weight:700}
.btn.secondary{background:#fff;color:var(--ink)}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(20,158,85,.12);color:#065f46;font-weight:700}

/* Sections */
.section{padding:40px 0;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .cover{aspect-ratio:16/9;background:linear-gradient(135deg,#e8f5ee,#f3faf6)}
.card .pad{padding:16px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

.kicker{font-size:13px;color:#064e3b;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:10px}

/* Prose */
.prose{max-width:85ch}
.prose h1,.prose h2,.prose h3{scroll-margin-top:90px}
.prose h1{margin:0 0 10px}
.prose h2{margin:22px 0 8px}
.prose p{color:var(--muted)}
.prose ul{line-height:1.7}
.callout{border:1px dashed var(--line);padding:12px;border-radius:12px;background:#f7fdf9}

/* TOC */
.toc{position:sticky;top:84px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;max-height:70vh;overflow:auto}
.toc h4{margin:0 0 8px}
.toc a{display:block;padding:6px 8px;border-radius:8px}
.toc a:hover{background:var(--panel-2);text-decoration:none}
.two-col{display:grid;grid-template-columns:280px 1fr;gap:22px}
@media (max-width:980px){.two-col{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:#0f172a;color:#e2e8f0;margin-top:20px}
.site-footer h3{color:#fff}
.site-footer a{color:#cbd5e1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.copy{border-top:1px solid rgba(255,255,255,0.1);margin-top:12px;padding-top:12px;text-align:center}
.plain{list-style:none;margin:0;padding:0}
.plain li{margin:6px 0}

/* Utilities */
.to-top{position:fixed;right:16px;bottom:16px;border:1px solid var(--line);background:#fff;color:#0b1b16;padding:10px 12px;border-radius:12px;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--line);padding:10px;text-align:left}
.table th{background:#eef9f3}
.badge-pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);margin-right:6px}

/* Modal */
.modal-dialog{border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:400px;box-shadow:var(--shadow);background:var(--panel);color:var(--ink);margin:auto}
.modal-dialog::backdrop{background:rgba(11, 27, 22, 0.192)}
.modal-dialog h2{margin-top:0}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
#verify-btn { animation: pulse 1.5s infinite ease-in-out; }
#verify-btn:hover { animation: none; transform: scale(1); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite }