:root{--bg:#f6f7fb;--surface:#fff;--ink:#141a2e;--muted:#55607a;--line:#dde1ec;--accent:#1f4fd1;--accent-soft:#e6ecfb;--warm:#b4530f;--free:#11724a;--free-soft:#e2f3ea;
--display:"Newsreader",Georgia,"Times New Roman",serif;--body:"Source Sans 3","Segoe UI",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0d111c;--surface:#161c2b;--ink:#e8ecf6;--muted:#9aa4bd;--line:#2a3247;--accent:#8fb0ff;--accent-soft:#1c2747;--warm:#f0a35c;--free:#6fd3a3;--free-soft:#14301f;color-scheme:dark}}
[hidden]{display:none!important}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body)}
a{color:var(--accent)}a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.wrap{max-width:860px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.site{border-bottom:1px solid var(--line);background:var(--surface)}
.site .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding-block:12px}
.logo{font:600 1.55rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}.logo span{color:var(--accent)}
nav{display:flex;flex-wrap:wrap;gap:4px 14px}nav a{white-space:nowrap;font-weight:600;color:var(--muted);text-decoration:none;font-size:.95rem}nav a:hover{color:var(--accent)}
h1{font:600 clamp(2rem,6vw,2.8rem)/1.08 var(--display);margin:28px 0 10px;letter-spacing:-.015em;text-wrap:balance}
h2{font:600 1.55rem/1.15 var(--display);margin:34px 0 10px}
.lede{color:var(--muted);max-width:62ch;font-size:1.08rem;margin:0 0 8px}
.small{font-size:.86rem;color:var(--muted)}
.by{font-size:1.1rem;color:var(--muted);margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:0;list-style:none;margin:12px 0}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);text-decoration:none;height:100%}
.card:hover{border-color:var(--accent)}.card b{font:600 1.08rem/1.25 var(--display);display:block}.card span{font-size:.88rem;color:var(--muted)}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:16px 0}
.way{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.way h3{margin:0 0 6px;font:700 .78rem var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.way.free{border-color:var(--free);background:var(--free-soft)}.way.free h3{color:var(--free)}
.way a.btn{display:inline-block;margin:4px 8px 4px 0;font-weight:700;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--bg);color:var(--ink)}
.way a.btn:hover{border-color:var(--accent);color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chip{font:700 .72rem var(--body);letter-spacing:.05em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:4px 7px;text-decoration:none}
.search{width:100%;font:600 1rem var(--body);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);margin:6px 0 4px}
.feature{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--warm);border-radius:10px;padding:14px 18px;margin:20px 0}
.feature b{font:600 1.25rem/1.2 var(--display)}
details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:8px 0}summary{font-weight:700;cursor:pointer}
footer{margin-top:56px;border-top:1px solid var(--line);padding-block:20px 40px;color:var(--muted);font-size:.86rem}footer p{max-width:70ch}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}