@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700&display=swap');

:root { color-scheme:light; --ink:#121d32; --muted:#526079; --blue:#244cba; --light:#f3f6fc; --line:#dce4f2; font:16px/1.58 Geist,Arial,sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--light); }
html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin:0; }
a { color:inherit; text-underline-offset:.22em; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #5679dd; outline-offset:4px; }
img { display:block; max-width:100%; }
.shell { width:min(1210px,calc(100% - 70px)); margin-inline:auto; }
.skip { position:absolute; top:-60px; left:10px; padding:7px 12px; color:#141e31; background:#fff; z-index:2; }
.skip:focus { top:10px; }
.topbar { min-height:70px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:block; width:clamp(184px,24vw,251px); }
.brand img { height:auto; }
nav { display:flex; flex-wrap:wrap; gap:9px 21px; }
nav a { font-size:.88rem; font-weight:700; text-decoration:none; }
nav a:hover { color:var(--blue); text-decoration:underline; }
.feature { background:#0c1322; color:#f5f8ff; }
.feature-inner { position:relative; isolation:isolate; min-height:clamp(390px,45vw,540px); display:flex; align-items:center; overflow:hidden; }
.feature-inner > img { z-index:-2; position:absolute; inset:0 0 0 auto; width:77%; height:100%; object-fit:cover; }
.feature-inner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0c1322 18%,#0c1322f5 30%,transparent 75%); z-index:-1; }
.feature-copy { max-width:600px; padding:36px 0; }
.feature-copy p:not(.eyebrow) { color:#d6e4ff; font-size:1.07rem; max-width:405px; margin-top:18px; }
.eyebrow { color:#4268c5; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:800; }
.feature .eyebrow { color:#a2baff; }
h1 { font:800 clamp(3.05rem,7vw,6rem)/.91 Chivo,Arial,sans-serif; letter-spacing:-.065em; margin-top:11px; }
h2 { font:800 clamp(2rem,4.7vw,3.35rem)/1 Chivo,Arial,sans-serif; letter-spacing:-.046em; }
.pill,.intro .buy,.contact-form button { display:inline-flex; gap:9px; align-items:center; padding:10px 15px; background:var(--blue); color:white; border-radius:5px; text-decoration:none; font-size:.88rem; font-weight:700; }
.pill { margin-top:20px; }
.pill:hover,.intro .buy:hover,.contact-form button:hover { background:#18398f; }
.compare { padding-block:40px 18px; }
.compare-heading { display:flex; justify-content:space-between; gap:15px 25px; flex-wrap:wrap; align-items:end; }
.compare-heading p,.intro p,.prose p { color:var(--muted); margin-top:9px; }
.filters { display:flex; flex-wrap:wrap; gap:7px; }
.filters button { padding:7px 11px; border:1px solid var(--line); border-radius:4px; background:white; color:var(--ink); font:inherit; font-size:.85rem; font-weight:650; cursor:pointer; }
.filters button[aria-pressed="true"] { background:var(--blue); color:white; border-color:var(--blue); }
.result-count { margin:13px 0 5px; color:var(--muted); font-size:.84rem; }
.model-key,.model { display:grid; grid-template-columns:92px minmax(0,2fr) minmax(85px,.7fr) minmax(110px,1fr) auto; gap:15px; align-items:center; }
.model-key { padding:7px 14px; color:var(--muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.model { padding:10px 14px; margin-bottom:7px; background:white; border:1px solid var(--line); border-radius:7px; }
.thumbnail img { width:100%; height:80px; object-fit:contain; }
.model h3 { font:700 1.05rem/1.15 Chivo,Arial,sans-serif; }
.model h3 a { text-decoration:none; }
.model h3 a:hover { color:var(--blue); text-decoration:underline; }
.model p { font-size:.86rem; color:var(--muted); }
.model-name p { margin-top:3px; }
.buy { font-size:.86rem; font-weight:700; color:var(--blue); white-space:nowrap; }
.reading,.faq { padding-block:29px; }
.guide-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:15px; }
.guide-links a { display:grid; padding:12px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:4px; background:white; text-decoration:none; }
.guide-links a:hover strong { text-decoration:underline; }
.guide-links span { font-size:.85rem; color:var(--muted); }
details { padding:11px 0; border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:700; }
details p { max-width:700px; margin-top:5px; color:var(--muted); }
.footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding-block:22px; border-top:1px solid var(--line); font-size:.84rem; }
.interior { padding-block:21px 46px; }
.crumb { margin-bottom:23px; color:var(--muted); }
.detail { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:28px; }
.detail-photo { background:#fff; padding:25px; border:1px solid var(--line); border-radius:8px; }
.detail-photo img { width:100%; height:clamp(220px,34vw,440px); object-fit:contain; }
.intro h1 { font-size:clamp(2.5rem,5vw,4.1rem); }
.intro .control { font-weight:700; color:var(--blue); }
.intro .buy { margin-top:13px; }
.intro .small { font-size:.86rem; }
.prose { max-width:720px; margin-top:26px; }
.prose section + section { margin-top:24px; }
.prose h2 { font-size:clamp(1.5rem,3vw,2.2rem); }
.prose a { color:var(--blue); }

@media(max-width:760px) { .shell { width:calc(100% - 34px); } .model-key { display:none; } .model { grid-template-columns:70px 1fr auto; gap:6px 12px; } .thumbnail { grid-row:1 / 3; } .model-name { grid-column:2 / 4; } .model-type { grid-column:2; } .model-control { grid-column:2; grid-row:3; } .model .buy { grid-column:3; grid-row:2 / 4; } }
@media(max-width:500px) { .topbar { flex-wrap:wrap; padding-block:9px 12px; } .feature-inner > img { width:100%; opacity:.65; } .feature-inner::before { background:linear-gradient(90deg,#0c1322f0,transparent); } .detail,.guide-links { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }