:root{--brand:#0f766e;--ink:#1f2937;--muted:#6b7280;--bg:#f3f8f7}
html{scroll-padding-top:72px}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
main{max-width:760px;margin:0 auto;padding:24px 20px}h1{font-size:1.9rem;margin:.4em 0}
.card{background:#fff;border-radius:14px;padding:20px;margin:18px 0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
/* Wide tables scroll inside their card on small screens instead of widening the page */
.card:has(table){overflow-x:auto}@media(max-width:480px){td,th{padding:6px 4px}}
/* Site header + menu */
.site-header{position:sticky;top:0;z-index:50;background:var(--brand);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.hdr{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;min-height:56px;flex-wrap:wrap}
.site-header a{color:#fff;text-decoration:none}
.brand{font-weight:800;font-size:1.1rem;letter-spacing:.01em;padding:14px 0;white-space:nowrap}
.tagline{color:#cfe9e5;font-size:.9rem;white-space:nowrap}
.site-nav{margin-left:auto}.nav-list,.nav-sub{list-style:none;margin:0;padding:0}
.nav-list{display:flex;gap:2px}.nav-item{position:relative}
.nav-cat{display:block;padding:17px 12px;font-weight:700;font-size:.97rem;border-bottom:3px solid transparent}
.nav-cat:hover,.nav-cat:focus-visible,.nav-cat.active{border-bottom-color:#fde68a}
.nav-sub{display:none;position:absolute;top:100%;left:0;min-width:270px;background:#fff;border-radius:0 0 12px 12px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:8px 0}
.nav-item:nth-last-child(-n+2) .nav-sub{left:auto;right:0}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:block}
.site-header .nav-sub a{display:block;color:var(--ink);padding:7px 16px;font-size:.95rem;font-weight:500}
.site-header .nav-sub a:hover,.site-header .nav-sub a:focus-visible{background:#e6f2f0;color:var(--brand)}
.site-header .nav-sub .nav-all a{color:var(--brand);font-weight:700;border-top:1px solid #e5ecea;margin-top:4px;padding-top:9px}
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:8px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:8px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}.bars::before{top:-6px}.bars::after{top:6px}
@media(max-width:1060px){.tagline{display:none}}
@media(max-width:820px){
 .js .nav-toggle{display:inline-flex}
 .site-nav{flex-basis:100%;margin:0;padding:0 0 10px}
 .js .site-nav{display:none}.js .site-nav.open{display:block}
 .nav-list{flex-direction:column;gap:0}
 .nav-cat{padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.18)}
 .nav-cat.active{border-bottom-color:rgba(255,255,255,.18);color:#fde68a}
 .nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub,.nav-sub{display:none}
}
/* Breadcrumbs */
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 4px}.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.crumbs li+li::before{content:"›";margin:0 7px;color:#9ca3af}.crumbs a{color:var(--brand)}
/* Footer */
.site-footer,.site-footer.small{background:var(--brand);color:#e6f2f0;margin-top:30px}.ftr{max-width:1100px;margin:0 auto;padding:18px 20px 22px}
.site-footer p{margin:6px 0}.site-footer a{color:#fff;text-decoration:none;font-weight:700}.site-footer a:hover{text-decoration:underline}
.ftr-nav a{display:inline-block;padding:2px 0}
/* Home + hub pages */
main.wide{max-width:1100px}.lead{font-size:1.08rem;max-width:760px}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;padding:0;list-style:none}
.cat-chips a{display:inline-block;background:#fff;border:1px solid #cfe3df;border-radius:999px;padding:7px 14px;color:var(--brand);font-weight:700;text-decoration:none}
.cat-chips a:hover{background:#e6f2f0}
.cat-sec{margin:26px 0}.cat-sec h2{margin:0 0 2px;font-size:1.35rem}.cat-sec h2 a{color:var(--ink);text-decoration:none}.cat-sec h2 a:hover{color:var(--brand)}
.cat-sec>p{margin:2px 0 10px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin:10px 0;padding:0;list-style:none}
.tool-card{display:block;height:100%;background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #e3eeeb;color:var(--ink);text-decoration:none}
.tool-card:hover,.tool-card:focus-visible{border-color:var(--brand);box-shadow:0 3px 10px rgba(15,118,110,.15)}
.tool-card b{display:block;color:var(--brand);margin-bottom:3px}.tool-card span{display:block;font-size:.93rem;color:#374151}
.tool-card .price{display:inline-block;margin-top:6px;font-weight:700;color:var(--ink)}
.see-all{font-weight:700;color:var(--brand)}
label{display:block;font-weight:600;margin-top:12px}input,select{width:100%;padding:10px;border:1px solid #cfd8d6;border-radius:8px;font-size:1rem;margin-top:4px}
.result{background:#e6f2f0;border-left:5px solid var(--brand);padding:14px;border-radius:8px;margin-top:16px}
.cta{display:inline-block;background:var(--brand);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;margin-top:8px}
.small{color:var(--muted);font-size:.9rem}table{width:100%;border-collapse:collapse}td,th{padding:6px;border-bottom:1px solid #e5ecea;text-align:left}
ul.tools li{margin:8px 0}
html.embed header,html.embed footer,html.embed main>*:not(h1):not(.calc){display:none!important}
html.embed body{background:#fff}html.embed main{max-width:none;padding:6px 14px 0}
html.embed h1{font-size:1.35rem;margin:.2em 0 0}html.embed .calc{box-shadow:none;padding:4px 0;margin:6px 0}
.embed-by{margin:4px 14px 10px;font-size:.85rem;color:var(--muted)}.embed-by a{color:var(--brand);font-weight:700}
.snippet{width:100%;min-height:170px;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;padding:10px;border:1px solid #cfd8d6;border-radius:8px;background:#f8fbfa}
.copy{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;margin-top:6px}
@media(min-width:600px){html.embed .calc.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:end}html.embed .calc.cols>*{grid-column:1/-1}html.embed .calc.cols>p:not(.small),html.embed .calc.cols>div>p:not(.small){grid-column:auto}html.embed .calc.cols>div:not(.result){display:contents}html.embed .calc.cols p{margin:6px 0}}