@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#eef2ec; --muted:#91999a; --line:rgba(238,242,236,.16); --bg:#111513; --panel:#181d1a; --acid:#b1e85f; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:Manrope, sans-serif; } main, footer { width:min(1240px,calc(100% - 48px)); margin:auto; }.masthead { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font:12px 'DM Mono', monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }.brand { color:var(--ink); font:700 20px Manrope; text-decoration:none; letter-spacing:-.06em; }.brand span { color:var(--acid); }.intro { padding:110px 0 72px; max-width:780px; }.eyebrow { margin:0 0 14px; font:11px 'DM Mono',monospace; color:var(--acid); letter-spacing:.14em; }.intro h1, h2 { font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.08em; margin:0; }.intro h1 { font-size:clamp(64px,11vw,158px); line-height:.8; }.intro em { color:var(--acid); font-style:normal; }.lede { color:#c4c9c5; font-size:clamp(18px,2vw,23px); line-height:1.5; max-width:610px; margin:44px 0 0; }.map-section, .catalog, .calculator { border-top:1px solid var(--line); padding:32px 0 80px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }.section-heading h2 { font-size:clamp(32px,5vw,60px); line-height:.9; }.section-heading > p, .hint { margin:0; color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; }.chart-wrap { position:relative; min-height:400px; background:var(--panel); border:1px solid var(--line); overflow:hidden; } #chart { width:100%; display:block; overflow:visible; }.grid line { stroke:rgba(238,242,236,.12); stroke-dasharray:3 6; }.grid text { fill:#8e9693; font:11px 'DM Mono',monospace; }.axis-label { fill:#aab1ae; font:10px 'DM Mono',monospace; letter-spacing:.12em; }.points { position:relative; width:960px; height:530px; }.point { position:absolute; left:var(--x); top:var(--y); width:20px; height:20px; transform:translate(-50%,-50%); border:0; background:transparent; padding:0; cursor:pointer; }.point span { display:block; width:11px; height:11px; margin:4px; border-radius:50%; background:var(--color); box-shadow:0 0 0 2px #181d1a; transition:transform .15s, box-shadow .15s; }.point:hover span,.point.active span { transform:scale(1.65); box-shadow:0 0 0 3px #181d1a,0 0 0 5px var(--color); }.hint { margin-top:14px; }.controls { display:flex; gap:28px; align-items:end; margin-bottom:20px; }.search { display:grid; gap:8px; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }.search input { color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--muted); padding:8px 0; width:210px; outline:none; font:14px Manrope; }.providers { display:flex; flex-wrap:wrap; gap:5px; }.providers button, thead button { font:11px 'DM Mono',monospace; color:var(--muted); background:transparent; border:1px solid var(--line); padding:8px 10px; cursor:pointer; }.providers button.active, .providers button:hover { color:#121711; background:var(--acid); border-color:var(--acid); }.table-wrap { overflow-x:auto; border-top:1px solid var(--line); }.table-wrap table { border-collapse:collapse; min-width:900px; width:100%; }.table-wrap th { text-align:left; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:13px 12px; }.table-wrap th:first-child { width:52px; }.table-wrap th button { padding:0; border:0; text-transform:inherit; letter-spacing:inherit; }.table-wrap th button:hover { color:var(--acid); }.table-wrap td { border-top:1px solid var(--line); padding:15px 12px; font:13px 'DM Mono',monospace; white-space:nowrap; }.table-wrap tr.selected { background:rgba(177,232,95,.09); }.table-wrap i,.comparison i { width:8px; height:8px; display:inline-block; margin-right:7px; border-radius:50%; background:var(--dot); }.check input { position:absolute; opacity:0; }.check span { display:block; width:17px; height:17px; border:1px solid var(--muted); }.check input:checked + span { background:var(--acid); border-color:var(--acid); box-shadow:inset 0 0 0 4px #161b18; }.calculator { padding-bottom:112px; }.calculator-grid { display:grid; grid-template-columns:minmax(240px,.7fr) 1.3fr; gap:48px; }.usage { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.usage label { display:grid; gap:8px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; }.usage input { color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--muted); padding:10px 0; outline:none; font:16px 'DM Mono',monospace; }.comparison { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }.comparison > p { margin:0; padding:25px; background:var(--panel); color:var(--muted); }.comparison article { padding:21px; background:var(--panel); }.comparison article p,.comparison article span { display:block; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }.comparison article p { margin:10px 0 4px; }.comparison h3 { margin:0 0 26px; font-size:15px; word-break:break-word; }.comparison strong { color:var(--acid); font:32px 'Archivo Black'; letter-spacing:-.07em; } footer { padding:20px 0 32px; border-top:1px solid var(--line); color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:700px) { main,footer { width:min(100% - 28px,1240px); }.masthead { height:68px; }.masthead p { font-size:9px; }.intro { padding:73px 0 52px; }.chart-wrap { margin-inline:-14px; }.section-heading { align-items:start; flex-direction:column; gap:12px; }.controls,.calculator-grid { display:block; }.providers { margin-top:18px; }.table-wrap { margin-inline:-14px; }.usage { margin-bottom:28px; }.points { transform-origin:top left; transform:scale(.74); }.chart-wrap { height:400px; }.map-section,.catalog,.calculator { padding-bottom:58px; } }