:root { color-scheme: light dark; --background:#f7f4ec; --surface:#fffdf8; --text:#1c211d; --muted:#50584f; --accent:#175d43; --accent-strong:#0d3e2c; --border:#bdc8bb; font:1.08rem/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--text); background:var(--background); } a { color:var(--accent-strong); text-underline-offset:.18em; } a:hover { text-decoration-thickness:.16em; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:.2rem solid #e07924; outline-offset:.2rem; }
.skip-link { position:absolute; left:.75rem; top:-5rem; padding:.7rem 1rem; background:var(--surface); z-index:10; } .skip-link:focus { top:.75rem; }
.site-header { display:flex; align-items:baseline; gap:2rem; padding:1rem max(1.25rem,calc((100% - 70rem)/2)); background:var(--accent-strong); color:white; } .brand { color:white; font-size:1.45rem; font-weight:750; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:.5rem 1.15rem; } nav a { color:white; } nav a[aria-current="page"] { font-weight:700; text-decoration-thickness:.18em; }
main { max-width:70rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; } main>* { max-width:48rem; } h1,h2,h3 { line-height:1.2; } h1 { font-size:clamp(2rem,5vw,3.6rem); margin-block:.25rem 1rem; } h2 { margin-top:2.4rem; }
.hero { max-width:58rem; padding:2.5rem 0; } .eyebrow { color:var(--accent); font-weight:750; letter-spacing:.04em; text-transform:uppercase; } .lede { font-size:1.3rem; color:var(--muted); }
.button,button { display:inline-block; border:0; border-radius:.3rem; padding:.7rem 1rem; background:var(--accent); color:white; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; } .secondary-link { margin-left:1rem; font-weight:650; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; max-width:70rem; margin-top:2rem; } .feature-grid article,.comparison section { padding:1.2rem 1.4rem; background:var(--surface); border:1px solid var(--border); border-radius:.35rem; } .feature-grid h2,.comparison h2 { margin-top:0; }
.comparison { display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1rem; max-width:70rem; } .notice { margin-block:2rem; padding:1rem 1.3rem; border-left:.35rem solid var(--accent); background:var(--surface); } .notice h2 { margin-top:.25rem; } .sources { font-size:.92rem; color:var(--muted); }
fieldset { display:grid; gap:.65rem; margin:1rem 0 1.5rem; border:1px solid var(--border); } details { margin-block:.8rem; } summary { cursor:pointer; font-weight:700; } progress { display:block; width:100%; margin-top:1.5rem; }
audio { display:block; width:min(100%,32rem); margin-block:1rem 2rem; }
.product-hero { max-width:38rem; margin:2rem 0; } figure img { display:block; max-width:100%; height:auto; border-radius:.35rem; } figcaption { margin-top:.6rem; color:var(--muted); } .product-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.5rem; max-width:70rem; } .product-gallery figure { margin:0; } .model-name { padding:1rem 1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:.35rem; } .market-links { columns:2 14rem; max-width:42rem; }
.profile-photo { width:min(100%,20rem); margin:1.5rem 0 2rem; }
form { display:grid; gap:.45rem; max-width:38rem; } form label { margin-top:.7rem; font-weight:700; } input,textarea { width:100%; padding:.65rem; border:1px solid var(--border); border-radius:.25rem; background:var(--surface); color:var(--text); font:inherit; } form button { justify-self:start; margin-top:.8rem; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } footer { padding:1.5rem max(1.25rem,calc((100% - 70rem)/2)); border-top:1px solid var(--border); color:var(--muted); } footer a { color:inherit; }
@media (max-width:45rem) { .site-header { align-items:flex-start; flex-direction:column; gap:.5rem; } .secondary-link { display:inline-block; margin:.8rem 0 0; } }
@media (prefers-color-scheme:dark) { :root { --background:#141714; --surface:#202520; --text:#f2f4ef; --muted:#c3cbc1; --accent:#77d7ac; --accent-strong:#104b37; --border:#59645a; } a { color:var(--accent); } .site-header a { color:white; } }