:root{color-scheme:light dark;--bg:#fafafa;--body:#52525b;--head:#18181b;--meta:#52525b;--link:#a83a00;--line:#e4e4e7;--btn:#ff5600;--on-btn:#18181b;--btn-edge:#c44400}
body{margin:0;background:var(--bg);color:var(--body);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
main{max-width:760px;margin:0 auto;padding:40px 16px 64px}
h1{color:var(--head);font-size:32px;margin:0 0 4px}
h2{color:var(--head);font-size:20px;margin:32px 0 8px}
.meta{color:var(--meta);margin:0 0 24px}
a{color:var(--link)}
strong{color:var(--head)}
ul{padding-left:20px}
li{margin-bottom:8px}
.offer{border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin:24px 0}
.price{font-size:36px;font-weight:700;color:var(--head);margin:0}
.price.long{font-size:22px;line-height:1.3}
.cta{display:inline-block;margin-top:12px;padding:12px 22px;border-radius:8px;border:1px solid var(--btn-edge);background:var(--btn);color:var(--on-btn);font-weight:700;text-decoration:none}
.soon{color:var(--meta);font-weight:600}
.foot{margin-top:48px;color:var(--meta);font-size:14px}
@media (prefers-color-scheme:dark){
:root{--bg:#0f1117;--body:#d4d4d8;--head:#fafafa;--meta:#a1a1aa;--link:#ff8a4d;--line:#27272a;--btn-edge:#ff5600}
}

/* Light and dark swap with a short fade (a theme picked in Options, or the system switching at dusk) instead of a hard cut.
   :where() keeps it at zero specificity, so any element with its own transition keeps it. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :where(html, body, body *) { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 0.2s; transition-timing-function: ease; }
}