* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#030712; --text:#f8fafc; --muted:#a0aec0; --green:#86efac; --line:rgba(255,255,255,.12); }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--green); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { color:#bbf7d0; }
a:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.skip { position:absolute; top:-100px; left:1rem; z-index:2; padding:.7rem 1rem; background:#111827; }
.skip:focus { top:1rem; }
header { max-width:1060px; margin:auto; padding:1.4rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; border-bottom:1px solid var(--line); }
.brand img { display:block; width:120px; height:auto; }
nav, footer { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
nav a, footer a { text-decoration:none; }
main { max-width:840px; margin:auto; padding:4.5rem 1.5rem 3rem; }
.eyebrow { font-size:.75rem; font-weight:750; letter-spacing:.14em; color:var(--green); }
h1 { font-size:clamp(2.25rem,5vw,3.8rem); line-height:1.1; letter-spacing:-.035em; margin:1rem 0 1.5rem; }
.lead { font-size:1.2rem; color:#cbd5e1; line-height:1.65; }
.byline { font-size:.8rem; color:var(--muted); padding-bottom:2rem; border-bottom:1px solid var(--line); }
h2 { font-size:1.5rem; line-height:1.3; letter-spacing:-.015em; margin:2.6rem 0 1rem; }
p { color:#cbd5e1; margin:1rem 0; }
strong { color:var(--text); }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.9rem; line-height:1.5; }
caption { text-align:left; color:var(--muted); font-size:.8rem; padding-bottom:.7rem; }
td, th { padding:.9rem .65rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--text); }
td { color:#cbd5e1; }
.next { margin-top:3rem; border:1px solid rgba(134,239,172,.22); border-radius:12px; padding:1.5rem; background:rgba(34,197,94,.04); }
.next h2 { margin-top:0; }
.button { display:inline-block; border-radius:7px; padding:.65rem 1rem; background:var(--green); color:#04110a; text-decoration:none; font-weight:700; margin:.5rem 1rem .5rem 0; }
.button:hover { color:#04110a; background:#bbf7d0; }
footer { max-width:1060px; margin:auto; border-top:1px solid var(--line); padding:1.5rem; font-size:.8rem; }
@media(max-width:500px) { header { align-items:flex-start; gap:1rem; } nav { gap:.35rem .9rem; font-size:.85rem; } .brand img { width:100px; } main { padding-top:2.7rem; } td, th { padding:.65rem .4rem; } }

/* Guides, comparisons, and tools */
main.wide { max-width:1060px; }
h3 { font-size:1.15rem; line-height:1.35; margin:2rem 0 .5rem; }
ul, ol { color:#cbd5e1; padding-left:1.3rem; }
li { margin:.4rem 0; }
.crumbs { font-size:.8rem; color:var(--muted); margin-bottom:1rem; display:block; }
.crumbs a { text-decoration:none; }
.note, .example { border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; background:rgba(255,255,255,.03); font-size:.92rem; }
.example p { margin:.5rem 0; }
.small { font-size:.8rem; color:var(--muted); }
.shot { margin:2rem 0; }
.shot img { max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line); }
.shot figcaption { font-size:.8rem; color:var(--muted); margin-top:.5rem; }
.faq details { border-bottom:1px solid var(--line); padding:.9rem 0; }
.faq summary { cursor:pointer; font-weight:700; color:var(--text); }
.faq details p { margin:.6rem 0 0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; margin:1rem 0 2rem; }
.card { display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); text-decoration:none; line-height:1.5; }
.card strong { color:var(--text); }
.card span { color:var(--muted); font-size:.88rem; }
.card:hover { border-color:rgba(134,239,172,.45); background:rgba(34,197,94,.05); }
.calc { display:grid; gap:1rem; margin:2rem 0 1rem; }
.calc fieldset { border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem 1.2rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem 1rem; }
.calc legend { color:var(--green); font-size:.75rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; padding:0 .4rem; }
.calc label, .message-box label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; color:#cbd5e1; line-height:1.4; }
.calc input, .calc select, .message-box textarea { font:inherit; font-size:1rem; color:var(--text); background:#0b1220; border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:.55rem .7rem; width:100%; }
.calc input:focus, .calc select:focus, .message-box textarea:focus { outline:2px solid var(--green); outline-offset:1px; }
.results { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.8rem; margin:1rem 0; }
.results div { border:1px solid rgba(134,239,172,.22); background:rgba(34,197,94,.04); border-radius:12px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.2rem; }
.results span { font-size:.78rem; color:var(--muted); line-height:1.4; }
.results strong { font-size:1.35rem; line-height:1.25; }
.results strong[data-tone="good"] { color:var(--green); }
.results strong[data-tone="bad"] { color:#fca5a5; }
.message-box { display:grid; gap:.6rem; margin:1rem 0 2rem; }
.message-box textarea { resize:vertical; }
.message-box .button { border:0; cursor:pointer; font:inherit; font-weight:700; justify-self:start; }
.glossary dt { font-weight:750; color:var(--text); margin-top:1.4rem; scroll-margin-top:1rem; }
.glossary dd { margin:.3rem 0 0; color:#cbd5e1; }
.compare { margin:2.5rem 0 0; }
.compare h2 { font-size:1.1rem; margin:0 0 .7rem; }
.compare ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.compare li { margin:0; }
.compare a { display:inline-block; padding:.4rem .8rem; border:1px solid var(--line); border-radius:999px; font-size:.86rem; text-decoration:none; background:rgba(255,255,255,.03); }
.compare a:hover { border-color:rgba(134,239,172,.45); background:rgba(34,197,94,.05); }