:root { color-scheme: light dark; --accent: #b3261e; --link: #4f378b; --muted: #666; --line: #ddd; --bg: #fff; --fg: #1c1b1f; }
@media (prefers-color-scheme: dark) { :root { --muted: #aaa; --line: #444; --bg: #141218; --fg: #e6e0e9; --accent: #f2b8b5; --link: #d0bcff; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 42rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
a { color: var(--link); }
.muted { color: var(--muted); font-size: .92rem; }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: .55rem .5rem; border-bottom: 1px solid var(--line); }
th { font-size: .85rem; color: var(--muted); }
/* Site header and footer (home, pricing, contact and policy pages). */
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; padding: .9rem 1rem; max-width: 42rem; margin: 0 auto; }
.site-nav .brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); text-decoration: none; margin-right: auto; }
.site-nav a { text-decoration: none; }
.site-foot { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.site-foot a { margin-right: .9rem; }
.cta { display: inline-block; padding: .7rem 1.2rem; border-radius: 999px; background: #237B92; color: #fff !important; text-decoration: none; font-weight: 600; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.card h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.price { font-size: 1.5rem; font-weight: 700; margin: .25rem 0; }
.site-nav .brand { display: inline-flex; align-items: center; gap: .4rem; }
.hero { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.hero img { flex: none; width: 140px; height: auto; }
.hero > div { flex: 1 1 18rem; }
.cards { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.card.pick { border-color: #237B92; border-width: 2px; }
h1, .brand { color: #237B92; }
@media (prefers-color-scheme: dark) { h1, .site-nav .brand { color: #7fd0e3; } }