/* Best Top Products — e-bike gear for Australian riders
   Palette borrowed from Australian bike infrastructure:
   green-painted bike lanes, asphalt, yellow warning signs. */
:root{
  --lane:#1d7a4e;        /* bike-lane green */
  --lane-dark:#145a39;
  --asphalt:#26292c;     /* road surface */
  --sign:#f5c518;        /* warning-sign yellow */
  --paper:#fbfaf6;
  --ink:#1f2326;
  --muted:#5b6268;
  --line:#dcdcd4;
  --tint:#eef5f0;
  --measure:70ch;
}
@media (prefers-color-scheme: dark){
  :root{
    --lane:#3fae78; --lane-dark:#6cc898;
    --paper:#16181a; --ink:#e9ebe8; --muted:#a3a9ad; --line:#33373a; --tint:#1d2a23;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:1.0625rem/1.65 "Atkinson Hyperlegible",system-ui,sans-serif}
a{color:var(--lane-dark)}
@media (prefers-color-scheme: dark){a{color:var(--lane-dark)}}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--sign);outline-offset:2px}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;line-height:1.1;letter-spacing:.005em}
h1{font-size:clamp(2.3rem,6vw,3.6rem);margin:.2em 0 .3em}
h2{font-size:1.9rem;margin:2.2rem 0 .6rem}
h3{font-size:1.45rem;margin:0 0 .4rem}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.prose{max-width:var(--measure)}

/* Header */
.site-head{background:var(--asphalt);color:#fff}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem}
.logo{color:#fff;text-decoration:none;font:700 1.55rem/1 "Barlow Condensed",sans-serif;display:flex;align-items:center;gap:.55rem}
.logo-mark{width:30px;height:30px;border-radius:50%;background:var(--lane);display:grid;place-items:center;border:2px solid #fff}
.logo-mark svg{width:18px;height:18px}
.nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.nav a{color:#d9ddd9;text-decoration:none;font-size:.95rem}
.nav a:hover{color:#fff;text-decoration:underline}

/* Lane-line rule: the one visual signature */
.lane-line{height:6px;background:repeating-linear-gradient(90deg,var(--sign) 0 38px,transparent 38px 64px);background-color:var(--asphalt)}

/* Hero */
.hero{background:var(--asphalt);color:#fff;padding:2.6rem 0 3rem}
.hero h1{max-width:18ch}
.hero p{max-width:56ch;color:#d4d8d5;font-size:1.15rem;margin:0}
.hero .start{display:inline-block;margin-top:1.4rem;background:var(--sign);color:#1a1a1a;font-weight:700;padding:.7rem 1.1rem;border-radius:6px;text-decoration:none}
.hero .start:hover{background:#ffd84a}

/* Guide index */
.section{padding:2.4rem 0}
.cat{display:grid;grid-template-columns:180px 1fr;gap:1.2rem;border-top:2px solid var(--ink);padding:1.2rem 0}
.cat h2{margin:0;font-size:1.5rem}
.cat ul{list-style:none;margin:0;padding:0}
.cat li{padding:.55rem 0;border-bottom:1px solid var(--line)}
.cat li:last-child{border-bottom:0}
.cat li a{font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.cat li a:hover{color:var(--lane-dark);text-decoration:underline}
.cat li p{margin:.15rem 0 0;color:var(--muted);font-size:.97rem;max-width:64ch}
@media (max-width:640px){.cat{grid-template-columns:1fr;gap:.4rem}}

/* Article */
.article-head{padding:2rem 0 1.2rem;border-bottom:1px solid var(--line)}
.crumbs{font-size:.92rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.meta{color:var(--muted);font-size:.95rem;margin:.2rem 0 0}
.disclosure{font-size:.9rem;color:var(--muted);background:var(--tint);padding:.6rem .8rem;border-radius:6px;margin:1.2rem 0 0;max-width:var(--measure)}
.article{padding-bottom:3rem}
.article p,.article ul,.article ol{max-width:var(--measure)}
.lede{font-size:1.2rem}
.quick-picks{border:2px solid var(--lane);border-radius:8px;padding:.4rem 1.2rem 1rem;margin:1.6rem 0;max-width:var(--measure)}
.quick-picks h2{margin-top:.8rem;font-size:1.5rem}
.quick-picks ul{padding-left:1.1rem;margin:0}
.quick-picks li{margin:.3rem 0}

.product{border:1px solid var(--line);border-left:6px solid var(--lane);border-radius:4px 8px 8px 4px;padding:1.1rem 1.3rem 1.3rem;margin:1.6rem 0;max-width:calc(var(--measure) + 3rem);background:var(--paper)}
.badge{display:inline-block;background:var(--sign);color:#1a1a1a;font-weight:700;font-size:.85rem;padding:.15rem .55rem;border-radius:3px;margin-bottom:.5rem}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.8rem 0 1rem}
.pros-cons ul{margin:0;padding-left:1.2rem;font-size:.97rem}
.pros li::marker{content:"+  ";color:var(--lane);font-weight:700}
.cons li::marker{content:"–  ";color:var(--muted);font-weight:700}
@media (max-width:640px){.pros-cons{grid-template-columns:1fr}}
.btn{display:inline-block;background:var(--lane);color:#fff!important;text-decoration:none;font-weight:700;padding:.65rem 1.05rem;border-radius:6px}
.btn:hover{background:var(--lane-dark)}
@media (prefers-color-scheme: dark){.btn{color:#0d1a13!important}.btn:hover{background:#8fdcb4}}
.callout,.note{border-left:6px solid var(--sign);background:var(--tint);padding:.8rem 1.1rem;margin:1.4rem 0;max-width:var(--measure);border-radius:0 8px 8px 0}
.callout p,.note p{margin:.3rem 0}
details{border-bottom:1px solid var(--line);padding:.7rem 0;max-width:var(--measure)}
summary{cursor:pointer;font-weight:700}
details p{margin:.5rem 0 0}
table{border-collapse:collapse;margin:1rem 0;max-width:100%;display:block;overflow-x:auto}
th,td{border-bottom:1px solid var(--line);padding:.45rem .7rem;text-align:left;vertical-align:top}

.related{border-top:2px solid var(--ink);margin-top:2.5rem;padding-top:.5rem}
.related ul{padding-left:1.1rem}

/* Footer */
.site-foot{background:var(--asphalt);color:#c9cec9;font-size:.93rem;padding:1.8rem 0 2.2rem}
.site-foot a{color:#fff}
.site-foot .cols{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-foot p{max-width:60ch;margin:.3rem 0}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
.logo img{display:block;max-height:46px;max-width:200px;background:#fff;border-radius:4px;padding:2px 6px}
.nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-color:var(--sign);text-underline-offset:5px}