/* The about page. Builds on style.css (colours, fonts, buttons, counters). */
body.about{font-size:17px}
.about a{color:inherit}

.hero{background:radial-gradient(120% 90% at 100% 0,#2a2d33 0,transparent 60%),var(--asphalt);color:#f4f3ef;position:relative;overflow:hidden;padding:28px 16px 46px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(-45deg,var(--sign) 0 14px,var(--asphalt) 14px 28px)}
.hero-in{max-width:960px;margin:0 auto;display:grid;gap:8px;align-items:center}
.hero .kicker{margin:0;font-family:var(--head);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--flame)}
.hero h1{margin:.2rem 0 0;font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(2.3rem,8vw,3.6rem);line-height:.95;letter-spacing:.01em}
.hero h1 span{display:block;color:var(--sign)}
.tagline{margin:14px 0 0;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;color:#f4f3ef}
.hero .lede{margin:10px 0 0;color:#c4c7cb;font-size:1rem;max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cta .btn{width:auto;flex:1 1 180px;padding:14px 18px}
.hero .btn.ghost{border-color:#5d6267;color:#f4f3ef}
.free{margin:12px 0 0;font-size:.85rem;color:#a3a8ad}
.hero-sign{width:min(240px,62vw);height:auto;justify-self:center;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));grid-row:1}
.hero-tally{max-width:960px;margin:22px auto 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:stretch}
.hero-tally .counter{margin:0;flex:1 1 240px;max-width:none;width:auto}

.about-wrap{max-width:960px;padding-top:8px}
.about h2{font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:1.6rem;margin:36px 0 14px}
.about h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;font-weight:600;font-size:1.08rem;margin:0 0 4px}
.about p{margin:0 0 10px}

.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.how-steps li{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.how-steps p{margin:0;color:var(--muted)}
.dia{flex:none;width:40px;height:40px;margin:6px 6px 0;background:var(--sign);color:var(--sign-ink);display:grid;place-items:center;transform:rotate(45deg);border-radius:6px;border:2px solid var(--sign-ink)}
.dia b{transform:rotate(-45deg);font-family:var(--head);font-size:1.15rem}

.features,.install,.priv{display:grid;gap:12px}
.feat{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--sign);border-radius:10px;padding:14px 16px}
.feat p{margin:0;color:var(--muted);font-size:.95rem}
.feat .steps{margin:6px 0 0}
.priv .feat{border-left-color:var(--ok)}

.worst-box{background:var(--asphalt);color:#f4f3ef;border-radius:10px;padding:4px 18px 16px;margin-top:36px;border:2px solid var(--flame)}
.worst-box[hidden]{display:none}
.worst-box h2{color:var(--flame);margin-top:16px}
.worst-box .hint{color:#a3a8ad;font-size:.88rem;margin:-6px 0 8px}
.worst-list{margin:0;padding-left:1.4em;font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:1.2rem}
.worst-list li{padding:3px 0}
.worst-list b,.vr-line b{color:var(--sign);margin-left:12px;font-variant-numeric:tabular-nums}
.vr-line{margin:12px 0 0;padding-top:10px;border-top:1px solid #3a3e44;font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem}
.vr-line small{display:block;font-family:"Overpass",system-ui,sans-serif;text-transform:none;letter-spacing:0;font-weight:400;color:#a3a8ad;font-size:.8rem;margin-top:2px}

.btn.wide{margin-top:16px}
.about-foot{max-width:960px;margin:20px auto 0;padding:0 16px 40px;text-align:center}
.about-foot .btn{max-width:420px;margin:0 auto}
.about-foot p{margin:16px 0 0;font-size:.85rem;color:var(--muted)}

@media (min-width:760px){
  .hero{padding:44px 24px 60px}
  .hero-in{grid-template-columns:1fr auto;gap:32px}
  .hero-sign{grid-row:auto;width:300px}
  .about-wrap{padding-left:24px;padding-right:24px}
  .how-steps{grid-template-columns:repeat(3,1fr)}
  .how-steps li{flex-direction:column}
  .features{grid-template-columns:repeat(3,1fr)}
  .install,.priv{grid-template-columns:1fr 1fr}
}

.by-riders{font-size:1.05rem;max-width:62ch;margin:-4px 0 16px}
.feat.split{grid-column:1/-1;border-left-color:var(--flame);display:grid;gap:16px;align-items:start}
.feat.split .steps{color:var(--muted);font-size:.95rem;margin:10px 0 8px}
.feat.split .small{font-size:.85rem}
.split-pic{width:120px;height:200px;border:3px solid var(--ink);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:3fr 2fr;justify-self:center;background:var(--asphalt)}
.sp-nav{background:repeating-linear-gradient(35deg,transparent 0 22px,rgba(255,255,255,.08) 22px 24px),linear-gradient(160deg,#3a7bd5,#1d4f91);color:#fff;font-family:var(--head);text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;display:grid;place-items:center;text-align:center;padding:6px;border-bottom:3px solid var(--ink)}
.sp-app{display:grid;place-items:center;background:var(--bg)}
.sp-app img{width:56px;height:auto}
@media (min-width:760px){.feat.split{grid-template-columns:auto 1fr;gap:24px}}
.vr-line+.vr-line{border-top:none;padding-top:0;margin-top:2px}
.vr-note{display:block;color:#a3a8ad;font-size:.8rem;margin-top:4px}