/* Bikes Explained: shared styles. System font stack, no external requests. */
:root{
  --green:#2D5016; --green-dark:#1F3810; --on-green:#FFFFFF; --orange:#E8A041;
  --ink:#1A1A1A; --muted:#5A5A5A; --bg:#FAFAF7; --card:#FFFFFF; --line:#E2E2DC;
  --radius:12px; --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#121412;--card:#1B1E1A;--ink:#F2F2EE;--muted:#A8ABA3;--line:#2E322B;--green:#7DB955;--green-dark:#9BD073;--on-green:#0F1A08}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px}
h1,h2,h3{line-height:1.2;margin:0 0 var(--s3)}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.125rem}
a{color:var(--green)}
code{font-family:var(--mono);background:var(--line);padding:1px 6px;border-radius:4px}
.header{border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:10}
.navbar{max-width:1200px;margin:0 auto;padding:var(--s3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.logo{font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--ink)}
.navbar-nav{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0}
.nav-link{text-decoration:none;color:var(--muted);font-weight:500;padding:var(--s2) 0}
.nav-link:hover,.nav-link.active{color:var(--green);border-bottom:2px solid var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s4);border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--green)}
.btn:focus-visible,.input-field:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.btn-primary,.btn.active{background:var(--green);color:var(--on-green);border-color:var(--green)}
.btn-primary:hover{background:var(--green-dark)}
.btn-large{min-height:52px;font-size:1.0625rem;padding:0 var(--s5)}
.hero{max-width:1200px;margin:0 auto;padding:var(--s6) var(--s3);display:grid;gap:var(--s5);align-items:center}
.hero-subtitle{font-size:1.25rem;color:var(--muted);margin:0 0 var(--s4)}
.hero-visual svg{width:100%;max-width:320px;height:auto;margin:0 auto;display:block}
.benefits,.how-it-works,.faq,.cta{max-width:1000px;margin:0 auto;padding:var(--s6) var(--s3)}
.benefits-grid{display:grid;gap:var(--s3)}
.benefit-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.benefit-card p{margin:0;color:var(--muted)}
.steps{padding-left:var(--s4)}
.steps li{margin-bottom:var(--s3)}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.faq-item summary{cursor:pointer}
.cta{text-align:center}
.footer{border-top:1px solid var(--line);margin-top:var(--s6);background:var(--card)}
.footer-content{max-width:1200px;margin:0 auto;padding:var(--s4) var(--s3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);color:var(--muted);font-size:.875rem}
.footer-links{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.prose{max-width:720px;margin:0 auto;padding:var(--s6) var(--s3)}
@media (min-width:768px){
  .hero{grid-template-columns:1.2fr 1fr}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
}