/* Shortmile Website v23.63 — premium, Android-first refinement layer */
:root{
  --sm-orange:#FF6A13;
  --sm-orange-dark:#D95700;
  --sm-obsidian:#0D0D0D;
  --sm-ink:#171513;
  --sm-cream:#F5F1EA;
  --sm-paper:#FFFCF8;
  --sm-line:#E6DDD2;
  --sm-muted:#625D57;
  --sm-radius-sm:14px;
  --sm-radius-md:22px;
  --sm-radius-lg:32px;
  --sm-shadow-soft:0 14px 40px rgba(24,20,16,.07);
  --sm-shadow-lift:0 24px 64px rgba(24,20,16,.12);
  --sm-header-height:72px;
}

html{
  scroll-padding-top:calc(var(--sm-header-height) + 18px);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

body{
  background:
    radial-gradient(900px 500px at 88% -8%,rgba(255,106,19,.07),transparent 58%),
    var(--sm-cream);
  color:var(--sm-ink);
  font-feature-settings:"kern" 1,"liga" 1;
}

::selection{background:rgba(255,106,19,.22);color:var(--sm-obsidian)}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid rgba(255,106,19,.58)!important;
  outline-offset:3px!important;
}

button,.btn,.nav-cta,.whatsapp-lead-link,.product-card,.role-card{
  -webkit-tap-highlight-color:transparent;
}

.container{width:min(1200px,calc(100% - 40px))}
.wide-shell{width:min(1440px,calc(100% - 48px))}
.section{padding:96px 0}
.section-title{max-width:900px;text-wrap:balance}
.section-sub{color:var(--sm-muted);text-wrap:pretty}
.eyebrow{
  border:1px solid rgba(255,106,19,.12);
  box-shadow:0 6px 20px rgba(255,106,19,.06);
}

/* Premium navigation */
.nav{
  min-height:var(--sm-header-height);
  background:rgba(255,252,248,.88);
  border-bottom:1px solid rgba(45,36,28,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
  transition:box-shadow .2s ease,background-color .2s ease;
}
.nav.nav-scrolled{
  background:rgba(255,252,248,.96);
  box-shadow:0 16px 44px rgba(30,24,18,.08);
}
.nav-inner{min-height:var(--sm-header-height);padding:10px 0}
.brand img{height:38px}
.nav-links{gap:8px}
.nav-links>a,.nav-dropdown>a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 13px;
  border-radius:999px;
  transition:background-color .18s ease,color .18s ease;
}
.nav-links>a:hover,.nav-links>a:focus-visible,.nav-dropdown>a:hover,.nav-dropdown>a:focus-visible{
  background:#FFF1E6;
  color:var(--sm-orange-dark);
}
.nav-cta{
  min-height:46px;
  padding:0 22px;
  box-shadow:0 14px 34px rgba(255,106,19,.24);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.nav-cta:hover{transform:translateY(-2px);background:#ED5E08;box-shadow:0 18px 38px rgba(255,106,19,.30)}
.dropdown-panel{
  border-color:rgba(50,40,30,.08);
  box-shadow:0 28px 74px rgba(22,18,14,.16);
}

/* Buttons and interactive cards */
.btn{
  min-height:52px;
  padding:0 24px;
  border-radius:15px;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn-primary{box-shadow:0 14px 34px rgba(255,106,19,.23)}
.btn-primary:hover{transform:translateY(-2px);background:#ED5E08;box-shadow:0 20px 42px rgba(255,106,19,.29)}
.btn-secondary:hover{transform:translateY(-2px);border-color:rgba(255,106,19,.35);box-shadow:var(--sm-shadow-soft)}

/* Homepage hero */
.hero{padding:0 0 36px}
.hero-stage{
  min-height:660px;
  background:linear-gradient(135deg,#FFFCF8 0%,#F6F0E8 57%,#F1E9DF 100%);
  border-bottom:1px solid rgba(52,42,33,.06);
  isolation:isolate;
}
.hero-stage::before{opacity:.075!important;filter:saturate(.82) contrast(1.03)!important}
.hero-stage::after{
  background:
    linear-gradient(90deg,rgba(255,252,248,.98) 0%,rgba(255,252,248,.88) 45%,rgba(245,239,231,.38) 75%,rgba(245,239,231,.7) 100%)!important;
}
.hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
  gap:50px;
  min-height:660px;
  padding:62px 0 54px;
}
.hero-copy{max-width:680px}
.hero h1{
  max-width:680px;
  margin:16px 0 14px;
  font-size:clamp(56px,5.65vw,84px);
  line-height:.91;
  letter-spacing:-.06em;
  text-wrap:balance;
}
.hero-line{width:190px;height:5px;margin:13px 0 20px}
.hero p{max-width:650px;margin-bottom:18px;font-size:19px;line-height:1.62;color:#55504A}
.hero .chips{gap:9px;margin:20px 0 24px}
.hero .chip{
  padding:9px 13px;
  background:rgba(255,255,255,.8);
  border-color:rgba(206,183,160,.62);
  color:#A84A12;
  font-size:12.5px;
  box-shadow:0 6px 18px rgba(61,44,29,.04);
}
.hero-actions{gap:12px}
.hero-secondary-cta{margin-top:12px!important;max-width:580px!important;color:#68615A!important}
.hero-illust{
  position:relative;
  min-height:500px;
  padding:34px 22px;
  border-radius:44px;
  background:
    radial-gradient(circle at 62% 42%,rgba(255,106,19,.21),rgba(255,106,19,.07) 35%,rgba(255,255,255,.38) 67%,transparent 68%);
}
.hero-illust::before{
  content:"";
  position:absolute;
  inset:11% 7% 10% 9%;
  z-index:-1;
  border:1px solid rgba(255,106,19,.12);
  border-radius:40% 60% 56% 44% / 52% 46% 54% 48%;
  background:rgba(255,255,255,.32);
  box-shadow:0 34px 80px rgba(71,48,30,.09);
}
.hero-illust img{
  width:min(100%,570px);
  filter:drop-shadow(0 28px 22px rgba(38,27,18,.16));
  transform:translateY(4px);
}
.hero-claim-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:26px!important;
}
.hero-claim-card{
  min-width:0;
  padding:17px!important;
  border:1px solid rgba(58,46,36,.08)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 14px 34px rgba(35,27,20,.065)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.hero-claim-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,106,19,.25)!important;
  box-shadow:0 20px 42px rgba(35,27,20,.10)!important;
}
.hero-claim-icon{
  width:52px!important;
  height:52px!important;
  margin:0 0 10px!important;
  overflow:hidden;
  border:1px solid rgba(64,52,42,.08);
  border-radius:16px!important;
  background:#F4F3F1!important;
  box-shadow:0 8px 20px rgba(33,27,22,.06);
}
.hero-claim-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-claim-value{font-size:24px!important;line-height:1!important}
.hero-claim-label{font-size:11px!important;line-height:1.35!important}
.hero-claim-card small{font-size:9px!important}
.hero .hero-claim-note{margin-top:9px!important;max-width:620px!important;font-size:9px!important;line-height:1.45!important}

/* Premium site-wide surfaces */
.bike-range-cta-card,.product-card,.spec-card,.help-card,.release-card,.catalog-shell,.map-card,.contact-panel{
  border-color:rgba(65,51,39,.08)!important;
  box-shadow:var(--sm-shadow-soft)!important;
}
.bike-range-cta-card{
  border-radius:28px;
  background:
    radial-gradient(460px 170px at 88% 0%,rgba(255,106,19,.11),transparent 62%),
    #fff;
  padding:34px 38px;
}
.product-card,.spec-card{
  border-radius:26px!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.range-proof-photo{
  background:#F1EAE1 url("/assets/shortmile-bike-inspection.webp") center/cover no-repeat!important;
  isolation:isolate;
}
.range-proof-photo picture{position:absolute;inset:0;z-index:1;opacity:0}
.range-proof-photo picture img{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.range-proof-photo::after{
  z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.34) 100%)!important;
}
.range-proof-overlay{z-index:3!important}
.product-card:hover,.spec-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,106,19,.24)!important;
  box-shadow:var(--sm-shadow-lift)!important;
}
.product-visual{border-radius:20px}
.realistic-card-icon,
.realistic-flow-icon,
.realistic-partner-icon{
  overflow:hidden;
  border:1px solid rgba(64,52,42,.08)!important;
  background:#F5F4F2!important;
  box-shadow:0 9px 22px rgba(32,25,19,.07);
}
.realistic-card-icon{width:64px!important;height:64px!important;flex-basis:64px!important;border-radius:18px!important}
.realistic-flow-icon{width:70px!important;height:70px!important;border-radius:20px!important}
.realistic-partner-icon{width:76px!important;height:76px!important;border-radius:22px!important}
.realistic-card-icon img,
.realistic-flow-icon img,
.realistic-partner-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pathway-technical-icon{
  width:72px!important;
  height:72px!important;
  overflow:hidden;
  border:1px solid rgba(255,106,19,.25);
  background:#F5F4F2!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.pathway-technical-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.realistic-maint-icon{
  width:68px!important;
  height:68px!important;
  overflow:hidden;
  border:1px solid rgba(63,50,38,.09)!important;
  border-radius:19px!important;
  background:#F5F4F2!important;
  box-shadow:0 9px 22px rgba(32,25,19,.07);
}
.realistic-maint-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.impact-card,.flow-card,.partner-card{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.impact-card:hover,.flow-card:hover,.partner-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,106,19,.22)!important;
  box-shadow:0 18px 42px rgba(32,25,19,.09);
}
.steps-grid>div:not(.steps-connector){
  padding:0 14px!important;
}
.premium-steps .steps-connector{
  top:42px!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(255,106,19,.9),rgba(255,106,19,.22),rgba(255,106,19,.22),rgba(255,106,19,.9))!important;
}
.premium-step{
  position:relative;
  z-index:1;
}
.premium-step-icon{
  width:84px!important;
  height:84px!important;
  margin-bottom:22px!important;
  overflow:hidden;
  border:1px solid rgba(255,106,19,.22)!important;
  background:#F5F4F2!important;
  box-shadow:
    0 0 0 8px #fff,
    0 16px 34px rgba(38,29,21,.12)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.premium-step:hover .premium-step-icon{
  transform:translateY(-4px);
  border-color:rgba(255,106,19,.52)!important;
  box-shadow:
    0 0 0 8px #fff,
    0 22px 44px rgba(38,29,21,.16)!important;
}
.premium-step-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.rider-plan-grid article{
  border-color:rgba(63,50,38,.08)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 10px 28px rgba(28,22,17,.045);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.rider-plan-grid article:hover{
  transform:translateY(-3px);
  border-color:rgba(255,106,19,.24)!important;
  box-shadow:0 18px 38px rgba(28,22,17,.085);
}
.rider-plan-grid .plan-icon{
  width:76px;
  height:76px;
  margin-bottom:10px;
  overflow:hidden;
  border-color:rgba(63,50,38,.08);
  border-radius:20px;
  background:#F5F4F2;
  box-shadow:0 8px 20px rgba(32,25,19,.055);
}
.rider-plan-grid .plan-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.faq-item{
  border-color:rgba(63,50,38,.08);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(28,22,17,.04);
}
.faq-btn{min-height:72px}

/* Contact conversion
   The black surface is reserved for the true universal footer. Content and
   conversion sections above it use Shortmile's warm off-white surface. */
.contact-section{
  background:
    radial-gradient(760px 520px at 6% 6%,rgba(255,106,19,.075),transparent 62%),
    #F7F5F1;
  border-top:1px solid #E3DDD4;
}
.contact-section::before{
  background-image:radial-gradient(rgba(70,64,58,.11) 1px,transparent 1px)!important;
  opacity:.2!important;
}
.contact-left h2{color:#111!important}
.contact-left p{color:#5E5852!important}
.contact-left .eyebrow{
  color:#C65200!important;
  background:#FFF0E4!important;
}
.contact-section .email-block{
  background:#FFF!important;
  border-color:#DDD6CD!important;
}
.contact-section .email-block small{color:#746E67!important}
.contact-section .email-block strong{color:#111!important}
.contact-section .email-icon{
  background:#FFF7F0!important;
  border-color:#F0D4C1!important;
}
.contact-section .city-pills span{
  background:#FFF!important;
  border-color:#DDD6CD!important;
  color:#292622!important;
}
.contact-panel{
  background:#FFF;
  border-color:#DCD5CC!important;
  border-radius:26px;
  box-shadow:0 18px 42px rgba(18,18,18,.05);
  backdrop-filter:none;
}
.contact-section .role-label{color:#35312D!important}
.contact-section .role-card{
  background:#FBFAF8!important;
  border-color:#DED7CE!important;
  color:#222!important;
}
.contact-section .role-card{
  min-height:158px;
  transition:transform .16s ease,border-color .16s ease,background-color .16s ease;
}
.role-card:hover{transform:translateY(-2px);border-color:rgba(255,106,19,.42)}
.contact-section .role-card.selected{
  background:#FFF3E9!important;
  border-color:#FF6A13!important;
}
.contact-section .role-card span{color:#69635D!important}
.role-card .miniicon:has(img){
  width:58px;
  height:58px;
  overflow:hidden;
  border-radius:17px;
  background:#F5F4F2!important;
  border:1px solid rgba(63,50,38,.09)!important;
}
.role-card .miniicon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.contact-section .field input,
.contact-section .field textarea,
.contact-section .field select{
  min-height:54px;
  border-color:#DCD5CC;
  background:#FFF;
  color:#111;
}
.contact-section .field label{color:#312D29!important}
.contact-section .field input:focus,
.contact-section .field textarea:focus,
.contact-section .field select:focus{
  border-color:var(--sm-orange);
  box-shadow:0 0 0 4px rgba(255,106,19,.12);
}
.contact-section .whatsapp-lead-panel>p{color:#5E5852!important}
.whatsapp-lead-link{min-height:72px}

/* Full-width calls to action remain content, not a second footer. */
.pricing-strip,
.range-cta-strip{
  background:#F7F5F1!important;
  color:#111!important;
  border-top:1px solid #E3DDD4;
  border-bottom:1px solid #E3DDD4;
}
.pricing-strip h2,
.range-cta-strip h2{color:#111!important}
.pricing-strip p,
.range-cta-strip p{color:#625D57!important}

/* The supplied black reference is the definitive site ending. */
.footer-wrap{background:#0D0D0D}

/* Compact light/dark theme control. System preference is respected on first
   visit without adding another menu to the conversion-focused header. */
.nav-inner{
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
}
.theme-switcher{
  display:grid;
  place-items:center;
  justify-self:end;
  z-index:92;
}
.theme-trigger{
  display:grid;
  place-items:center;
  align-items:center;
  justify-content:center;
  width:46px;
  min-width:46px;
  height:46px;
  min-height:46px;
  padding:0;
  border:1px solid rgba(61,49,39,.1);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:#2D2925;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(25,20,15,.045);
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.theme-trigger:hover,
.theme-trigger:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,106,19,.32);
  background:#FFF4EB;
  box-shadow:0 12px 26px rgba(255,106,19,.10);
}
.theme-trigger:active{transform:translateY(0) scale(.96)}
.theme-trigger-icon{
  display:grid;
  place-items:center;
}
.theme-trigger-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
}

/* Dark theme
   Warm charcoal surfaces preserve the Shortmile orange identity. Product and
   bike photography stays natural inside controlled light image wells. */
html[data-theme="dark"]{
  --bg:#151311;
  --surface:#201D1A;
  --ink:#F7F2EC;
  --muted:#BBB2A8;
  --line:#3D3731;
  --sm-ink:#F7F2EC;
  --sm-cream:#151311;
  --sm-paper:#201D1A;
  --sm-line:#3D3731;
  --sm-muted:#BBB2A8;
  --sm-shadow-soft:0 14px 40px rgba(0,0,0,.22);
  --sm-shadow-lift:0 24px 64px rgba(0,0,0,.34);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(255,106,19,.10),transparent 58%),
    #151311;
  color:#F7F2EC;
}
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav.nav-scrolled{
  background:rgba(21,19,17,.92);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 16px 44px rgba(0,0,0,.18);
}
html[data-theme="dark"] .nav-links>a,
html[data-theme="dark"] .nav-dropdown>a{color:#E7E0D8}
html[data-theme="dark"] .nav-links>a:hover,
html[data-theme="dark"] .nav-links>a:focus-visible,
html[data-theme="dark"] .nav-dropdown>a:hover,
html[data-theme="dark"] .nav-dropdown>a:focus-visible{
  background:rgba(255,106,19,.13);
  color:#FF8A43;
}
html[data-theme="dark"] .hamburger{
  background:#29241F;
  color:#F7F2EC;
}
html[data-theme="dark"] .hamburger svg rect{fill:#F7F2EC}
html[data-theme="dark"] .dropdown-panel{
  border-color:rgba(255,255,255,.1);
  background:#24211E;
  box-shadow:0 28px 74px rgba(0,0,0,.38);
}
html[data-theme="dark"] .dropdown-panel a{color:#F4EEE7!important}
html[data-theme="dark"] .dropdown-panel a:hover{background:rgba(255,106,19,.12);color:#FF8A43!important}
html[data-theme="dark"] .dropdown-panel small{color:#AAA197}
html[data-theme="dark"] .menu-brand-title{color:#F4EEE7}
html[data-theme="dark"] .menu-group-soft,
html[data-theme="dark"] .menu-group-energy{
  border-color:rgba(255,255,255,.07);
  background:#1A1816;
}
html[data-theme="dark"] .theme-trigger{
  border-color:rgba(255,255,255,.1);
  background:#24211E;
  color:#F4EEE7;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
html[data-theme="dark"] .theme-trigger:hover,
html[data-theme="dark"] .theme-trigger:focus-visible{
  background:#35271E;
}
html[data-theme="dark"] main,
html[data-theme="dark"] .section,
html[data-theme="dark"] .privacy-wrap,
html[data-theme="dark"] .release-wrap,
html[data-theme="dark"] .shop-catalog-section{background-color:#151311}
html[data-theme="dark"] main :where(h1,h2,h3,h4,strong){color:#F7F2EC}
html[data-theme="dark"] main :where(p,li,.section-sub,.subtitle){color:#BBB2A8}
html[data-theme="dark"] .hero-stage{
  border-bottom-color:rgba(255,255,255,.06);
  background:linear-gradient(135deg,#201D1A 0%,#191715 58%,#151311 100%);
}
html[data-theme="dark"] .shop-hero{
  border-bottom-color:rgba(255,255,255,.07);
  background:
    radial-gradient(700px 420px at 78% 8%,rgba(255,106,19,.10),transparent 62%),
    linear-gradient(180deg,#201D1A 0%,#171513 100%)!important;
}
html[data-theme="dark"] .shop-hero h1{color:#F7F2EC!important}
html[data-theme="dark"] .shop-hero-copy{color:#C8BFB5!important}
html[data-theme="dark"] .shop-hero-note{
  border-color:rgba(255,255,255,.09)!important;
  background:#211E1B!important;
  color:#BBB2A8!important;
}
html[data-theme="dark"] .shop-hero-note strong{color:#F7F2EC!important}
html[data-theme="dark"] .range-hero{
  border-bottom-color:rgba(255,255,255,.07)!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,106,19,.12),transparent 32%),
    linear-gradient(180deg,#201D1A 0%,#151311 100%)!important;
}
html[data-theme="dark"] .range-hero :where(h1,p){color:#F7F2EC!important}
html[data-theme="dark"] .range-hero p{color:#BBB2A8!important}
html[data-theme="dark"] #compare-models{background:#151311!important}
html[data-theme="dark"] .story-card{
  border-color:rgba(255,255,255,.085)!important;
  background:#211E1B!important;
}
html[data-theme="dark"] .story-card p{color:#BBB2A8!important}
html[data-theme="dark"] .hero-stage::before{opacity:.055!important}
html[data-theme="dark"] .hero-stage::after{
  background:linear-gradient(90deg,rgba(21,19,17,.98) 0%,rgba(21,19,17,.90) 45%,rgba(21,19,17,.56) 76%,rgba(21,19,17,.82) 100%)!important;
}
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .hero p strong{color:#D4CCC3}
html[data-theme="dark"] .hero .chip,
html[data-theme="dark"] .model-spec-strip span{
  border-color:rgba(255,255,255,.1);
  background:#25211E;
  color:#FF9B5D;
  box-shadow:none;
}
html[data-theme="dark"] .hero-secondary-cta{color:#AAA197!important}
html[data-theme="dark"] .hero-claim-card,
html[data-theme="dark"] .rider-plan-grid article,
html[data-theme="dark"] .steps-grid>div:not(.steps-connector){
  border-color:rgba(255,255,255,.08)!important;
  background:#211E1B!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20)!important;
}
html[data-theme="dark"] .hero-claim-card :where(strong,span,small){color:#F4EEE7}
html[data-theme="dark"] .hero-illust{background:radial-gradient(circle at 62% 42%,rgba(255,106,19,.19),rgba(255,106,19,.06) 38%,rgba(255,255,255,.025) 68%,transparent 69%)}
html[data-theme="dark"] .hero-illust::before{
  border-color:rgba(255,106,19,.14);
  background:rgba(255,255,255,.025);
  box-shadow:0 34px 80px rgba(0,0,0,.22);
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-label{
  border-color:rgba(255,106,19,.18);
  background:rgba(255,106,19,.11);
  color:#FF9655;
}
html[data-theme="dark"] :where(
  .bike-range-cta-card,.product-card,.spec-card,.help-card,.release-card,
  .catalog-shell,.map-card,.contact-panel,.faq-item,.privacy-doc,
  .impact-card,.flow-card,.partner-card,.shop-product-card,.shop-service-card,
  .shop-bulk-card,.shop-help-card,.shop-hero-panel,.shop-category-tile,
  .model-spec-note,.compare-card,.comparison-card,.maintenance-card
){
  border-color:rgba(255,255,255,.085)!important;
  background:#211E1B!important;
  color:#F7F2EC!important;
  box-shadow:0 14px 40px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] :where(
  .bike-range-cta-card,.product-card,.spec-card,.help-card,.release-card,
  .catalog-shell,.map-card,.contact-panel,.faq-item,.privacy-doc,
  .impact-card,.flow-card,.partner-card,.shop-product-card,.shop-service-card,
  .shop-bulk-card,.shop-help-card,.shop-hero-panel,.shop-category-tile,
  .model-spec-note,.compare-card,.comparison-card,.maintenance-card
) :where(p,li,small,.subtitle){color:#BBB2A8!important}
html[data-theme="dark"] .product-card.dark{background:#11100F!important}
html[data-theme="dark"] :where(
  .realistic-card-icon,.realistic-flow-icon,.realistic-partner-icon,
  .realistic-maint-icon,.pathway-technical-icon,.premium-step-icon,
  .rider-plan-grid .plan-icon,.hero-claim-icon,.role-card .miniicon:has(img),
  .product-visual,.shop-product-media,.shop-service-media
){
  border-color:rgba(255,255,255,.09)!important;
  background:#F3F0EB!important;
}
html[data-theme="dark"] .shop-product-media:has(img[data-theme-dark-src]){
  background:#121212!important;
}
html[data-theme="dark"] .range-proof-photo{background-color:#292521!important}
html[data-theme="dark"] .model-spec-hero{
  background:linear-gradient(180deg,#201D1A 0%,#151311 100%)!important;
}
html[data-theme="dark"] .model-spec-copy p,
html[data-theme="dark"] .model-spec-note{color:#BBB2A8}
html[data-theme="dark"] .model-spec-section{background:#151311!important}
html[data-theme="dark"] .bike-hero-text span[style*="color:#1a1917"]{color:#F7F2EC!important}
html[data-theme="dark"] .bike-hero-text span[style*="color:#6b6860"]{color:#AAA197!important}
html[data-theme="dark"] .pricing-strip,
html[data-theme="dark"] .range-cta-strip,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .shop-services-section,
html[data-theme="dark"] .shop-page .contact-section{
  border-color:rgba(255,255,255,.08)!important;
  background:
    radial-gradient(760px 520px at 6% 6%,rgba(255,106,19,.09),transparent 62%),
    #191715!important;
  color:#F7F2EC!important;
}
html[data-theme="dark"] :where(.pricing-strip,.range-cta-strip,.contact-section,.shop-services-section) :where(h1,h2,h3,strong){color:#F7F2EC!important}
html[data-theme="dark"] :where(.pricing-strip,.range-cta-strip,.contact-section,.shop-services-section) :where(p,li,small){color:#BBB2A8!important}
html[data-theme="dark"] .contact-section .email-block,
html[data-theme="dark"] .contact-section .city-pills span,
html[data-theme="dark"] .contact-section .role-card,
html[data-theme="dark"] .shop-page .email-block,
html[data-theme="dark"] .shop-page .city-pills span,
html[data-theme="dark"] .shop-page .role-card{
  border-color:rgba(255,255,255,.09)!important;
  background:#211E1B!important;
  color:#F4EEE7!important;
}
html[data-theme="dark"] .contact-section .role-card.selected,
html[data-theme="dark"] .shop-page .role-card.selected{
  border-color:#FF6A13!important;
  background:#33251D!important;
}
html[data-theme="dark"] .contact-section :where(.contact-left h2,.email-block strong,.role-label,.field label),
html[data-theme="dark"] .shop-page :where(.contact-left h2,.email-block strong,.role-label,.field label){color:#F4EEE7!important}
html[data-theme="dark"] .contact-section :where(.contact-left p,.email-block small,.role-card span,.whatsapp-lead-panel>p),
html[data-theme="dark"] .shop-page :where(.contact-left p,.email-block small,.role-card span,.whatsapp-lead-panel>p){color:#BBB2A8!important}
html[data-theme="dark"] :where(input,textarea,select){
  border-color:#4A433C!important;
  background:#171513!important;
  color:#F7F2EC!important;
}
html[data-theme="dark"] :where(input,textarea)::placeholder{color:#81786E}
html[data-theme="dark"] select option{background:#171513;color:#F7F2EC}
html[data-theme="dark"] :where(
  .shop-filter,.shop-category-count,.shop-service-badge,.shop-product-cta,
  .shop-spec-cta,.privacy-table th,.privacy-table td,.release-field
){
  border-color:rgba(255,255,255,.09)!important;
  background:#211E1B!important;
  color:#EDE6DE!important;
}
html[data-theme="dark"] .shop-filter.active{
  border-color:#FF6A13!important;
  background:#FF6A13!important;
  color:#111!important;
}
html[data-theme="dark"] .shop-filter:hover:not(.active){background:#33251D;color:#FF9B5D}
html[data-theme="dark"] .shop-category-tile-num{background:#33251D;color:#FF9B5D}

/* Keep two-digit shop category markers optically centred in both themes. */
.shop-category-tile-num{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  flex:0 0 30px;
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border:1px solid #C9BCAF;
  border-radius:50%!important;
  background:transparent!important;
  color:#C65200!important;
  font-family:'Outfit',sans-serif!important;
  font-size:10px!important;
  font-weight:900!important;
  font-kerning:none;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:0!important;
  line-height:1!important;
  text-align:center;
  text-indent:0;
}
html[data-theme="dark"] .shop-category-tile-num{
  border-color:#B8A99B;
  background:transparent!important;
  color:#FF8A43!important;
}
@media(max-width:760px){
  .shop-category-tile-num{
    flex-basis:28px;
    width:28px!important;
    height:28px!important;
  }
}

/* v23.72 cross-device image and contact-surface refinement
   Keep real photography natural, but remove the large white mats that made
   otherwise dark or warm pages feel unfinished on laptop, tablet and mobile. */

/* Shop service process: the previous dark theme retained a white note while
   inheriting light text. This is now a readable, contained instruction card. */
.shop-service-note{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.28rem;
  background:#F1ECE5!important;
  border-color:#D8CEC2!important;
  color:#4E4841!important;
}
.shop-service-note strong{color:#24201C!important;white-space:nowrap;}
html[data-theme="dark"] .shop-service-note{
  background:#25211D!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#E4DCD3!important;
  box-shadow:0 14px 30px rgba(0,0,0,.20);
}
html[data-theme="dark"] .shop-service-note strong{color:#FFFFFF!important;}

/* Contact: warm, low-glare light surfaces and a fully dark form when the
   visitor selects dark mode. This prevents labels from disappearing and keeps
   the enquiry choices compact enough to scan. */
.contact-section .contact-panel{
  background:#F1ECE5!important;
  border-color:#D8CEC2!important;
  box-shadow:0 18px 42px rgba(18,18,18,.08)!important;
}
.contact-section .role-label,
.contact-section .field label{color:#312C27!important;}
.contact-section .role-card{
  min-height:132px!important;
  background:#E7E0D7!important;
  border-color:#D4C9BC!important;
  color:#25201C!important;
}
.contact-section .role-card.selected{background:#F7E8DB!important;}
.contact-section .role-card span{color:#625A52!important;}
.contact-section .field input,
.contact-section .field textarea,
.contact-section .field select{
  background:#FBF8F4!important;
  border-color:#D4C9BC!important;
  color:#24201C!important;
}
.contact-section .field input::placeholder,
.contact-section .field textarea::placeholder{color:#81766C!important;opacity:1;}
.contact-section .whatsapp-lead-panel{padding:14px!important;background:rgba(37,211,102,.045)!important;}
.contact-section .whatsapp-lead-panel>p{margin-bottom:10px!important;color:#CFC6BC!important;}
.contact-section .whatsapp-lead-grid{gap:7px!important;}
.contact-section .whatsapp-lead-link{
  min-height:54px!important;
  padding:9px 10px!important;
  background:#F1ECE5!important;
  border-color:rgba(37,211,102,.28)!important;
}
.contact-section .whatsapp-lead-link strong{font-size:12px!important;color:#29231E!important;}
.contact-section .whatsapp-lead-link span{font-size:10px!important;line-height:1.3!important;color:#665D54!important;}
html[data-theme="dark"] .contact-section .contact-panel{
  background:#201D19!important;
  border-color:rgba(255,255,255,.15)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.30)!important;
}
html[data-theme="dark"] .contact-section .role-label,
html[data-theme="dark"] .contact-section .field label{color:#FFFDFC!important;}
html[data-theme="dark"] .contact-section .role-card{
  background:#2A2520!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#FFFDFC!important;
}
html[data-theme="dark"] .contact-section .role-card.selected{background:#3A2A20!important;border-color:#FF6A13!important;}
html[data-theme="dark"] .contact-section .role-card span{color:#E0D6CD!important;}
html[data-theme="dark"] .contact-section .field input,
html[data-theme="dark"] .contact-section .field textarea,
html[data-theme="dark"] .contact-section .field select{
  background:#171411!important;
  border-color:#514940!important;
  color:#FFFDFC!important;
}
html[data-theme="dark"] .contact-section .field input::placeholder,
html[data-theme="dark"] .contact-section .field textarea::placeholder{color:#BFB3A7!important;}
html[data-theme="dark"] .contact-section .whatsapp-lead-link{background:#28231E!important;border-color:rgba(37,211,102,.32)!important;}
html[data-theme="dark"] .contact-section .whatsapp-lead-link strong{color:#FFFDFC!important;}
html[data-theme="dark"] .contact-section .whatsapp-lead-link span{color:#D8CEC4!important;}

/* Esin and Sisu: make the actual dark product canvas do the visual work,
   instead of placing it inside a large pale frame. */
.model-visual-card.real-bike-visual{
  padding:12px!important;
  background:#24201C!important;
  border-color:rgba(255,106,19,.34)!important;
  box-shadow:0 24px 56px rgba(18,15,12,.18)!important;
}
.model-visual-card.real-bike-visual::before{display:none!important;}
.model-visual-card.real-bike-visual .model-visual-inner{
  min-height:0!important;
  padding:0!important;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#151515!important;
  border-color:rgba(255,255,255,.08)!important;
}
.model-bike-photo picture{width:100%;height:100%;display:block;}
.model-bike-photo img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  filter:none!important;
}
html[data-theme="dark"] .model-visual-card.real-bike-visual{background:#171411!important;border-color:rgba(255,106,19,.42)!important;}

/* Article feature card: a photo should fill its own column; it should not sit
   in a big bright picture well. */
.blog-feature-image{
  background:#E5DED4!important;
  overflow:hidden!important;
}
.blog-feature-image img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  padding:0!important;
  object-fit:cover!important;
}
html[data-theme="dark"] body .blog-feature-image{background:#221E1A!important;border-color:rgba(255,255,255,.12)!important;}

@media(max-width:760px){
  .contact-section .role-card{min-height:96px!important;padding:11px 10px!important;}
  .contact-section .role-card .miniicon{width:38px!important;height:38px!important;margin-bottom:8px!important;}
  .contact-section .whatsapp-lead-panel{margin-top:18px!important;padding:12px!important;}
  .contact-section .whatsapp-lead-grid{grid-template-columns:1fr 1fr!important;}
  .contact-section .whatsapp-lead-link{min-height:50px!important;padding:8px 9px!important;}
  .model-visual-card.real-bike-visual{padding:9px!important;}
  .model-visual-card.real-bike-visual .model-visual-inner{aspect-ratio:16 / 10!important;}
  .model-image-note{font-size:10px!important;padding:7px 9px!important;}
  .blog-feature-image{min-height:220px!important;}
}
html[data-theme="dark"] .shop-product-media,
html[data-theme="dark"] .shop-service-media{border-color:rgba(255,255,255,.08)!important}
html[data-theme="dark"] .shop-product-card h3,
html[data-theme="dark"] .shop-service-card h3{color:#F7F2EC}
html[data-theme="dark"] .shop-product-card p,
html[data-theme="dark"] .shop-service-card p,
html[data-theme="dark"] .shop-category-head p{color:#BBB2A8}
html[data-theme="dark"] :where(table,th,td){
  border-color:rgba(255,255,255,.10)!important;
}
html[data-theme="dark"] :where(th,.compare-feature,.comparison-feature){
  background:#24211E!important;
  color:#F7F2EC!important;
}
html[data-theme="dark"] :where(td,.compare-value,.comparison-value){
  background:#1B1917!important;
  color:#D9D1C8!important;
}
html[data-theme="dark"] .range-table-wrap{
  border-color:rgba(255,255,255,.10)!important;
  background:#1B1917!important;
  box-shadow:0 18px 42px rgba(0,0,0,.26)!important;
}
html[data-theme="dark"] .range-table thead th{
  border-color:rgba(255,255,255,.10)!important;
  background:#0F0E0D!important;
  color:#F7F2EC!important;
}
html[data-theme="dark"] .range-table tbody th{
  border-color:rgba(255,255,255,.10)!important;
  background:#29241F!important;
  color:#F7F2EC!important;
}
html[data-theme="dark"] .range-table td,
html[data-theme="dark"] .range-table tbody tr:nth-child(even) td{
  border-color:rgba(255,255,255,.10)!important;
  background:#1B1917!important;
  color:#D9D1C8!important;
}
html[data-theme="dark"] .mobile-compare-guide{
  border-color:rgba(255,255,255,.09)!important;
  background:#211E1B!important;
  color:#D9D1C8!important;
}
html[data-theme="dark"] .range-table-wrap::-webkit-scrollbar-track{background:#29241F}
html[data-theme="dark"] .privacy-doc :where(p,li,.privacy-callout),
html[data-theme="dark"] .release-card :where(p,li){color:#C8BFB5!important}
html[data-theme="dark"] .privacy-callout{background:rgba(255,106,19,.09);color:#D8D0C7}
html[data-theme="dark"] .mobile-conversion-bar{
  border-top-color:rgba(255,255,255,.09);
  background:rgba(21,19,17,.96);
  box-shadow:0 -14px 38px rgba(0,0,0,.28);
}
html[data-theme="dark"] .mobile-conversion-whatsapp{
  border-color:rgba(37,211,102,.28);
  background:#153120;
  color:#7CE9A4;
}
html[data-theme="dark"] .footer-wrap{background:#080706!important}

/* Mobile conversion bar, added progressively by premium.js */
.mobile-conversion-bar{display:none}

@media(max-width:1100px){
  :root{--sm-header-height:66px}
  .container{width:min(100% - 32px,1120px)}
  .wide-shell{width:min(100% - 32px,1120px)}
  .nav-inner{grid-template-columns:minmax(0,1fr) auto auto!important}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding:50px 0 58px}
  .hero-copy{max-width:760px}
  .hero-illust{width:min(100%,620px);min-height:420px;margin:0 auto}
  .universal-contact .contact-inner{grid-template-columns:1fr!important}
}

@media(max-width:760px){
  :root{--sm-header-height:62px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .container,.wide-shell{width:calc(100% - 24px)!important}
  .section{padding:62px 0}
  .section-title{font-size:clamp(32px,10vw,42px);line-height:1}
  .section-sub{font-size:16px;line-height:1.65}

  .nav{min-height:var(--sm-header-height)}
  .nav-inner{
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:7px!important;
    min-height:var(--sm-header-height)!important;
    padding:8px 0;
  }
  .brand img{height:31px!important;max-width:190px!important}
  .hamburger{display:flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;border-radius:14px;background:#FFF3EA}
  .theme-trigger{
    min-width:46px;
    width:46px;
    min-height:46px;
    padding:0;
    border-radius:14px;
  }
  .mobile-menu{
    background:
      radial-gradient(520px 320px at 80% 10%,rgba(255,106,19,.12),transparent 60%),
      rgba(13,13,13,.985);
  }
  .mobile-menu a,.mobile-nav-group summary{min-height:48px}
  .mobile-close{min-width:46px;min-height:46px}

  /* Interleave the bike into the mobile hero immediately after the value proposition. */
  .hero{padding-bottom:18px}
  .hero-stage{min-height:auto}
  .hero-stage::after{background:linear-gradient(180deg,rgba(255,252,248,.94),rgba(246,239,231,.88))!important}
  .hero-grid{display:flex!important;flex-direction:column;gap:0;padding:28px 0 34px!important}
  .hero-copy{display:contents}
  .hero .eyebrow{order:0;align-self:flex-start;padding:8px 12px;font-size:10px}
  .hero h1{order:1;margin:14px 0 10px;font-size:clamp(43px,13.4vw,58px);line-height:.92;letter-spacing:-.058em}
  .hero-line{order:2;width:116px;height:4px;margin:9px 0 15px}
  .hero-copy>p{order:3;margin:0;font-size:16.5px;line-height:1.58}
  .hero-illust{
    order:4;
    width:100%;
    min-height:0;
    margin:12px 0 4px;
    padding:10px 4px;
    border-radius:28px;
  }
  .hero-illust::before{inset:10% 4%;border-radius:34% 66% 58% 42% / 50% 46% 54% 50%}
  .hero-illust img{width:100%;max-height:325px;object-fit:contain;filter:drop-shadow(0 20px 16px rgba(38,27,18,.15))}
  .hero .chips{order:5;display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;margin:12px 0 16px}
  .hero .chip{justify-content:center;min-height:44px;padding:8px 10px;text-align:center;font-size:10.5px;line-height:1.3}
  .hero-actions{order:6;display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:9px}
  .hero-actions .btn{width:100%;min-height:52px;padding:0 12px;font-size:14px}
  .hero-secondary-cta{order:7;margin:12px 0 0!important;font-size:12px!important}
  .hero-stats-row{order:8}
  .hero-claim-grid{grid-template-columns:1fr!important;gap:8px!important;margin-top:20px!important}
  .hero-claim-card{
    display:grid!important;
    grid-template-columns:54px auto 1fr!important;
    grid-template-rows:auto auto!important;
    column-gap:12px!important;
    align-items:center!important;
    padding:12px 14px!important;
  }
  .hero-claim-icon{grid-column:1;grid-row:1/3;margin:0!important;width:50px!important;height:50px!important;border-radius:14px!important}
  .hero-claim-value{grid-column:2;grid-row:1/3;min-width:72px;font-size:22px!important}
  .hero-claim-label{grid-column:3;grid-row:1;font-size:11px!important}
  .hero-claim-card small{grid-column:3;grid-row:2;font-size:9px!important}
  .hero .hero-claim-note{order:9;font-size:8px!important;line-height:1.42!important}

  .bike-range-cta-card{display:grid!important;gap:18px;padding:24px 20px;border-radius:22px}
  .bike-range-cta-card .btn{width:100%}
  .steps-grid{grid-template-columns:1fr!important;gap:24px!important}
  .steps-grid>div:not(.steps-connector){
    display:grid;
    grid-template-columns:58px 1fr;
    column-gap:15px;
    text-align:left!important;
    padding:18px!important;
    border:1px solid rgba(65,51,39,.08);
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 28px rgba(28,22,17,.045);
  }
  .premium-steps .steps-connector{display:none!important}
  .steps-grid>div:not(.steps-connector)>div:first-child{
    grid-row:1/5;
    margin:0!important;
    width:62px!important;
    height:62px!important;
    border-radius:18px!important;
    box-shadow:0 0 0 5px #fff,0 12px 28px rgba(38,29,21,.12)!important;
  }
  .steps-grid>div:not(.steps-connector)>div:not(:first-child),
  .steps-grid>div:not(.steps-connector)>h3,
  .steps-grid>div:not(.steps-connector)>p{grid-column:2;text-align:left!important}
  .steps-grid>div:not(.steps-connector)>h3{margin:2px 0 6px!important}
  .steps-grid>div:not(.steps-connector)>p{margin:0!important}
  .rider-plan-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .rider-plan-grid article{min-height:132px!important;padding:14px!important}
  .rider-plan-grid .plan-icon{width:66px;height:66px;border-radius:18px}
  .realistic-card-icon{width:58px!important;height:58px!important;flex-basis:58px!important;border-radius:17px!important}
  .realistic-flow-icon{width:64px!important;height:64px!important;border-radius:18px!important}
  .realistic-partner-icon{width:70px!important;height:70px!important;border-radius:20px!important}

  .contact-left h2{font-size:clamp(42px,13vw,58px);max-width:100%}
  .contact-panel{padding:17px!important;border-radius:22px}
  .role-grid{grid-template-columns:1fr 1fr!important;gap:9px}
  .role-card{min-height:126px!important;padding:13px 11px!important}
  .field input,.field textarea,.field select{font-size:16px!important}
  .whatsapp-lead-grid{grid-template-columns:1fr 1fr!important}

  .mobile-conversion-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:999;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,252,248,.96);
    border-top:1px solid rgba(52,42,33,.1);
    box-shadow:0 -14px 38px rgba(30,24,18,.12);
    backdrop-filter:blur(14px);
  }
  .mobile-conversion-bar a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border-radius:14px;
    font-family:'Outfit',system-ui,sans-serif;
    font-size:14px;
    font-weight:900;
  }
  .mobile-conversion-primary{background:var(--sm-orange);color:#fff;box-shadow:0 10px 22px rgba(255,106,19,.22)}
  .mobile-conversion-whatsapp{background:#EAFBF0;color:#116B32;border:1px solid rgba(37,211,102,.25)}
}

@media(max-width:390px){
  .container,.wide-shell{width:calc(100% - 20px)!important}
  .hero h1{font-size:42px}
  .hero .chips{grid-template-columns:1fr}
  .hero .chip{min-height:40px}
  .hero-actions{grid-template-columns:1fr}
  .rider-plan-grid,.role-grid,.whatsapp-lead-grid{grid-template-columns:1fr!important}
  .mobile-conversion-bar{grid-template-columns:1fr 1fr}
  .mobile-conversion-bar a{font-size:13px}
}

/* v23.63 dark-mode refinement
   Component-specific rules prevent legacy inline light-theme colours from
   breaking contrast, while a small surface ladder adds depth without turning
   every section into the same flat black panel. */
html[data-theme="dark"]{
  --sm-dark-bg:#12110F;
  --sm-dark-bg-alt:#171512;
  --sm-dark-surface:#1E1B18;
  --sm-dark-surface-raised:#25211D;
  --sm-dark-border:rgba(255,255,255,.10);
  --sm-dark-text:#F7F2EC;
  --sm-dark-text-secondary:#C7BDB3;
  --sm-dark-text-muted:#9E958C;
  --bg:var(--sm-dark-bg);
  --surface:var(--sm-dark-surface);
  --ink:var(--sm-dark-text);
  --muted:var(--sm-dark-text-secondary);
  --line:#3D3731;
  --sm-ink:var(--sm-dark-text);
  --sm-cream:var(--sm-dark-bg);
  --sm-paper:var(--sm-dark-surface);
  --sm-line:#3D3731;
  --sm-muted:var(--sm-dark-text-secondary);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(920px 540px at 88% -8%,rgba(255,106,19,.10),transparent 60%),
    var(--sm-dark-bg);
  color:var(--sm-dark-text);
}
html[data-theme="dark"] main,
html[data-theme="dark"] main>.section{
  background-color:var(--sm-dark-bg)!important;
}
html[data-theme="dark"] :where(
  #how-it-works,#compare-models,#repair-build-support,#app,
  .rider-plan-section,.bike-range-cta-section,.data-section,
  .shop-services-section,.privacy-wrap,.release-wrap
){
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-bg-alt)!important;
}
html[data-theme="dark"] :where(
  .section-title,.left-head h1,.left-head h2,.center-head h1,.center-head h2,
  .impact-hero h1,.impact-hero h2,.shop-category-head h2
){
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] :where(
  .section-sub,.rider-plan-note,.claim-basis-note,.chart-legend,
  .maint-dim,.maint-footnote,.mobile-model-compare p
){
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] :where(.btn-secondary,.submit-btn-secondary){
  border-color:rgba(255,255,255,.13)!important;
  background:var(--sm-dark-surface-raised)!important;
  color:var(--sm-dark-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] :where(.btn-secondary,.submit-btn-secondary):hover{
  border-color:rgba(255,106,19,.45)!important;
  background:#30251F!important;
}

/* Homepage ownership journey */
html[data-theme="dark"] #how-it-works .section-title{color:var(--sm-dark-text)!important}
html[data-theme="dark"] #how-it-works .section-sub{color:var(--sm-dark-text-secondary)!important}
html[data-theme="dark"] #how-it-works .premium-step h3{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] #how-it-works .premium-step p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] #how-it-works .premium-step>div:not(.premium-step-icon){
  color:#FF9655!important;
}
html[data-theme="dark"] .premium-step-icon{
  border-color:rgba(255,106,19,.30)!important;
  background:#F3F0EB!important;
  box-shadow:
    0 0 0 8px var(--sm-dark-bg-alt),
    0 18px 38px rgba(0,0,0,.32)!important;
}
html[data-theme="dark"] .premium-step:hover .premium-step-icon{
  border-color:rgba(255,106,19,.60)!important;
  box-shadow:
    0 0 0 8px var(--sm-dark-bg-alt),
    0 22px 46px rgba(0,0,0,.38)!important;
}
html[data-theme="dark"] .bike-range-cta-card{
  border-color:var(--sm-dark-border)!important;
  background:
    radial-gradient(560px 240px at 82% 0,rgba(255,106,19,.10),transparent 68%),
    var(--sm-dark-surface)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .bike-range-cta-card h2{color:var(--sm-dark-text)!important}

/* FAQ: controls, closed questions and revealed answers use one coherent
   graphite system instead of white headers over nearly-black answers. */
html[data-theme="dark"] .faq-tab{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  color:var(--sm-dark-text)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
html[data-theme="dark"] .faq-tab:hover{
  border-color:rgba(255,106,19,.34)!important;
  background:#2A211B!important;
}
html[data-theme="dark"] .faq-tab.active{
  border-color:#FF6A13!important;
  background:#322219!important;
}
html[data-theme="dark"] .faq-tab span{color:var(--sm-dark-text)!important}
html[data-theme="dark"] .faq-tab svg{stroke:#B7AEA5!important}
html[data-theme="dark"] .faq-tab.active svg{stroke:#FF7E32!important}
html[data-theme="dark"] .faq-item{
  overflow:hidden;
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20)!important;
}
html[data-theme="dark"] .faq-btn{
  border:0!important;
  background:var(--sm-dark-surface)!important;
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] .faq-btn:hover,
html[data-theme="dark"] .faq-btn:focus-visible{
  background:var(--sm-dark-surface-raised)!important;
}
html[data-theme="dark"] .faq-btn .icon{
  background:#33271F!important;
  color:#FF8A43!important;
}
html[data-theme="dark"] .faq-item.open .faq-btn{
  background:var(--sm-dark-surface-raised)!important;
}
html[data-theme="dark"] .faq-body{
  border-top:1px solid rgba(255,106,19,.36);
  background:#1A1816!important;
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] .faq-body :where(strong,a){color:var(--sm-dark-text)!important}
html[data-theme="dark"] .help-card{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .help-card :where(h2,h3){color:var(--sm-dark-text)!important}
html[data-theme="dark"] .help-card p{color:var(--sm-dark-text-secondary)!important}

/* Reusable cards and page-specific legacy surfaces */
html[data-theme="dark"] :where(
  .maint-card,.maint-service-card,.data-block,.charge-strip,.surface,
  .cost-card,.estimator-card,.compare-card,.comparison-card,
  .blog-card,.article-card,.article-shell,.story-card,
  .mobile-model-card,.submit-card,.next-actions,.shop-help-card
){
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  color:var(--sm-dark-text)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.20)!important;
}
html[data-theme="dark"] :where(
  .maint-card,.maint-service-card,.data-block,.charge-strip,.surface,
  .cost-card,.estimator-card,.compare-card,.comparison-card,
  .blog-card,.article-card,.article-shell,.story-card,
  .mobile-model-card,.submit-card,.next-actions,.shop-help-card
) :where(h1,h2,h3,h4,strong){
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] :where(
  .maint-card,.maint-service-card,.data-block,.charge-strip,.surface,
  .cost-card,.estimator-card,.compare-card,.comparison-card,
  .blog-card,.article-card,.article-shell,.story-card,
  .mobile-model-card,.submit-card,.next-actions,.shop-help-card
) :where(p,li,span,small){
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] .maint-sep{background:var(--sm-dark-border)!important}
html[data-theme="dark"] .maint-block-title{color:#FF9655!important}
html[data-theme="dark"] .maint-dot-item{color:var(--sm-dark-text-secondary)!important}
html[data-theme="dark"] .data-section .chart-wrap{
  border-color:var(--sm-dark-border)!important;
  background:#F7F4EF!important;
  border-radius:18px;
  padding:10px;
}
html[data-theme="dark"] .model-spec-strip span{
  border-color:rgba(255,106,19,.25)!important;
  background:#2A211B!important;
  color:#FF9B5D!important;
}
html[data-theme="dark"] :where(.spec-card,.product-card,.rider-plan-grid article){
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
}
html[data-theme="dark"] :where(.spec-card,.product-card,.rider-plan-grid article) :where(h2,h3,strong){
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] :where(.spec-card,.product-card,.rider-plan-grid article) :where(p,.subtitle,.subnote){
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] .spec-chip{
  border-color:var(--sm-dark-border)!important;
  background:#29241F!important;
  color:#E8E0D7!important;
}
html[data-theme="dark"] :where(
  .model-spec-copy,.bike-hero-text,.model-spec-note
) span[style*="color:#1a1917"]{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] :where(
  .model-spec-copy,.bike-hero-text,.model-spec-note
) span[style*="color:#6b6860"]{
  color:var(--sm-dark-text-secondary)!important;
}

/* The theme button follows the CTA on desktop. On compact navigation the CTA
   is intentionally replaced by the persistent bottom conversion bar. */
html[data-theme="dark"] .theme-trigger{
  border-color:rgba(255,255,255,.12);
  background:#24211E;
  color:#FFD8C0;
}
html[data-theme="dark"] .theme-trigger:hover,
html[data-theme="dark"] .theme-trigger:focus-visible{
  border-color:rgba(255,106,19,.48);
  background:#34271F;
}

@media(max-width:1100px){
  .nav-inner{grid-template-columns:minmax(0,1fr) auto auto!important}
}

@media(max-width:760px){
  html[data-theme="dark"] .hero-stage::after{
    background:linear-gradient(180deg,rgba(23,21,18,.84),rgba(18,17,15,.96))!important;
  }
  html[data-theme="dark"] .hero-illust img{
    filter:drop-shadow(0 20px 18px rgba(0,0,0,.32));
  }
  html[data-theme="dark"] #how-it-works .steps-grid>div:not(.steps-connector){
    border-color:var(--sm-dark-border)!important;
    background:var(--sm-dark-surface)!important;
    box-shadow:0 14px 32px rgba(0,0,0,.22)!important;
  }
  html[data-theme="dark"] #how-it-works .steps-grid>div:not(.steps-connector)>div:first-child{
    box-shadow:
      0 0 0 5px var(--sm-dark-surface),
      0 12px 28px rgba(0,0,0,.30)!important;
  }
  .faq-tabs{
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .faq-tab{
    min-width:132px!important;
    scroll-snap-align:start;
  }
  html[data-theme="dark"] .faq-btn{
    min-height:68px;
    padding:18px 16px!important;
    font-size:16px!important;
    line-height:1.35;
  }
  html[data-theme="dark"] .faq-body{
    padding:16px!important;
    font-size:15.5px!important;
    line-height:1.68!important;
  }
  html[data-theme="dark"] .mobile-conversion-bar{
    border-top-color:var(--sm-dark-border);
    background:rgba(18,17,15,.96);
  }
}

@media(prefers-reduced-motion:reduce){
  .product-card:hover,.spec-card:hover,.btn-primary:hover,.btn-secondary:hover,.nav-cta:hover,.role-card:hover,.theme-trigger:hover{transform:none}
}

/* v23.64 contrast and surface hierarchy
   The screenshots supplied during owner review exposed older, page-specific
   light-theme declarations that could outrank the shared dark palette. These
   selectors intentionally use the page/body context so the theme remains
   authoritative without changing the approved light homepage. */

/* Footer: the orange logo and white column headings form the strongest,
   clearest lock-up on the permanent obsidian footer. */
.footer-wrap .footer-col h4{
  color:#FFFFFF!important;
}
.footer-wrap .footer-copy,
.footer-wrap .footer-links{
  color:#BDB6AC;
}
.footer-wrap .footer-bottom{
  color:#9F978E;
}
.footer-wrap .footer-cities span{
  color:#F7F2EC;
}

/* Partnership heading: the phrase between the three technical illustrations
   gets one purposeful brand-orange emphasis rather than a faint full heading. */
.partners-section#partner{
  background:#FCFAF7;
}
.partners-section#partner .partners-head .section-title{
  color:#171513!important;
}
.partners-section#partner .partners-head .partner-highlight{
  color:#D95700!important;
}
.partners-section#partner .partners-head .section-sub{
  color:#625D57!important;
}

/* Bike comparison: keep the orange header, but separate the feature rail and
   model columns with subtle surfaces so the table never reads as one slab. */
.range-table thead th{
  background:#FF6A13!important;
  color:#111!important;
}
.range-table thead th small{
  color:rgba(17,17,17,.72)!important;
}
.range-table tbody th{
  background:#F0E8DE!important;
  color:#1A1917!important;
}
.range-table tbody td:nth-child(2){
  background:#FFFDFC;
}
.range-table tbody td:nth-child(3){
  background:#F8F3ED;
}
.range-table tbody td:nth-child(4){
  background:#F2ECE5;
}
.range-table tbody tr:nth-child(even) td:nth-child(2){
  background:#FAF7F3;
}
.range-table tbody tr:nth-child(even) td:nth-child(3){
  background:#F3ECE5;
}
.range-table tbody tr:nth-child(even) td:nth-child(4){
  background:#EDE5DC;
}

html[data-theme="dark"]{
  --sm-dark-text-secondary:#D2C9C0;
  --sm-dark-text-muted:#B0A79E;
  --muted:var(--sm-dark-text-secondary);
  --sm-muted:var(--sm-dark-text-secondary);
}
html[data-theme="dark"] main :where(p,li,.section-sub,.subtitle){
  color:var(--sm-dark-text-secondary);
}
html[data-theme="dark"] main :where(
  [style*="color:#111"],[style*="color: #111"],
  [style*="color:#1a1917"],[style*="color: #1a1917"]
){
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] main :where(
  [style*="color:#b0a99e"],[style*="color: #b0a99e"],
  [style*="color:#6b6860"],[style*="color: #6b6860"],
  [style*="color:#6b655c"],[style*="color: #6b655c"],
  [style*="color:#5f6672"],[style*="color: #5f6672"]
){
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] :where(input,textarea)::placeholder{
  color:var(--sm-dark-text-muted);
}

/* Impact/contact page: outrank its older light-only declarations in dark mode. */
html[data-theme="dark"] body.impact-page :where(
  .impact-hero,.partners-section#partner,.invest-section,.contact-section
){
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-bg-alt)!important;
}
html[data-theme="dark"] body.impact-page .partners-section#partner .partners-head .section-title{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .partners-section#partner .partners-head .partner-highlight{
  color:#FF7E32!important;
}
html[data-theme="dark"] body.impact-page .partners-section#partner .partners-head .section-sub{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .invest-grid{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] body.impact-page .invest-section h2{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .invest-section p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .invest-tile{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface-raised)!important;
}
html[data-theme="dark"] body.impact-page .invest-tile>div:last-child{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .contact-section{
  background:
    radial-gradient(760px 520px at 6% 6%,rgba(255,106,19,.08),transparent 62%),
    var(--sm-dark-bg-alt)!important;
}
html[data-theme="dark"] body.impact-page .contact-left h2,
html[data-theme="dark"] body.impact-page .email-block strong,
html[data-theme="dark"] body.impact-page .role-label,
html[data-theme="dark"] body.impact-page .field label{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .contact-left p,
html[data-theme="dark"] body.impact-page .email-block small,
html[data-theme="dark"] body.impact-page .role-card span,
html[data-theme="dark"] body.impact-page .whatsapp-lead-panel>p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .email-block,
html[data-theme="dark"] body.impact-page .city-pills span,
html[data-theme="dark"] body.impact-page .contact-panel,
html[data-theme="dark"] body.impact-page .role-card{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .role-card.selected{
  border-color:#FF6A13!important;
  background:#33251D!important;
}
html[data-theme="dark"] body.impact-page .email-icon,
html[data-theme="dark"] body.impact-page .role-card .miniicon{
  border-color:rgba(255,106,19,.28)!important;
  background:#33271F!important;
  color:#FF8A43!important;
}
html[data-theme="dark"] body.impact-page .field :where(input,textarea){
  border-color:#4A433C!important;
  background:#171513!important;
  color:var(--sm-dark-text)!important;
}

/* Pilot section: eliminate the glaring light strip and restore legibility in
   the editorial card while keeping the grey map and orange city markers. */
html[data-theme="dark"] body.impact-page .map-section{
  border-color:var(--sm-dark-border)!important;
  background:
    radial-gradient(680px 380px at 24% 34%,rgba(255,106,19,.08),transparent 66%),
    linear-gradient(180deg,#171512 0%,#12110F 100%)!important;
}
html[data-theme="dark"] body.impact-page .pilot-map-wrap{
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:28px;
  background:#1B1916!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
html[data-theme="dark"] body.impact-page .map-card{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface-raised)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] body.impact-page .map-card h2,
html[data-theme="dark"] body.impact-page .map-stat strong{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .map-card h2 span{
  color:#FF6A13!important;
}
html[data-theme="dark"] body.impact-page .map-card p,
html[data-theme="dark"] body.impact-page .map-stat span,
html[data-theme="dark"] body.impact-page .pilot-city-list{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .map-stat{
  border-top-color:var(--sm-dark-border)!important;
}
html[data-theme="dark"] body.impact-page .map-stat-icon{
  border-color:rgba(255,106,19,.26)!important;
  background:#33271F!important;
}
html[data-theme="dark"] body.impact-page .pilot-city-list::before{
  color:#FF7E32!important;
}

/* Dark comparison columns: orange header plus a warm feature rail and three
   deliberately different graphite levels. */
html[data-theme="dark"] .range-table thead th{
  border-color:rgba(17,17,17,.24)!important;
  background:#FF6A13!important;
  color:#111!important;
}
html[data-theme="dark"] .range-table thead th small{
  color:rgba(17,17,17,.72)!important;
}
html[data-theme="dark"] .range-table tbody th{
  border-color:rgba(255,255,255,.10)!important;
  background:#3A2C23!important;
  color:#FFFFFF!important;
}
html[data-theme="dark"] .range-table tbody td:nth-child(2),
html[data-theme="dark"] .range-table tbody tr:nth-child(even) td:nth-child(2){
  background:#29241F!important;
  color:#F0E8E0!important;
}
html[data-theme="dark"] .range-table tbody td:nth-child(3),
html[data-theme="dark"] .range-table tbody tr:nth-child(even) td:nth-child(3){
  background:#211E1B!important;
  color:#E7DED5!important;
}
html[data-theme="dark"] .range-table tbody td:nth-child(4),
html[data-theme="dark"] .range-table tbody tr:nth-child(even) td:nth-child(4){
  background:#26211D!important;
  color:#EFE6DD!important;
}
html[data-theme="dark"] .range-table td a{
  color:#FF9B5D!important;
}

@media(max-width:760px){
  .partners-section#partner .partners-head{
    text-align:left;
    margin-bottom:24px;
  }
  .partners-section#partner .partners-head .section-title{
    font-size:clamp(34px,10.5vw,44px)!important;
  }
  html[data-theme="dark"] body.impact-page .pilot-map-wrap{
    border-radius:20px;
  }
  html[data-theme="dark"] .range-table thead th:first-child,
  html[data-theme="dark"] .range-table tbody th{
    box-shadow:1px 0 0 rgba(255,255,255,.12),10px 0 20px rgba(0,0,0,.24)!important;
  }
}

/* v23.65 dark-mode readability pass
   Owner review showed three legacy light surfaces inside dark mode: the Blog
   hero, the Blog article cards, and the Impact e-bike education section. Keep
   photography natural in compact light wells, but move all reading surfaces
   onto the shared warm-charcoal ladder with stronger text contrast. */
html[data-theme="dark"]{
  --sm-dark-text:#FFFDFC;
  --sm-dark-text-secondary:#E1D8CF;
  --sm-dark-text-muted:#C3B9AF;
  --sm-dark-bg:#100F0D;
  --sm-dark-bg-alt:#151310;
  --sm-dark-surface:#1D1A17;
  --sm-dark-surface-raised:#26211C;
  --sm-dark-border:rgba(255,255,255,.14);
}

/* Blog hero */
html[data-theme="dark"] body .blog-hero{
  border-bottom-color:var(--sm-dark-border)!important;
  background:
    radial-gradient(660px 360px at 10% 8%,rgba(255,106,19,.16),transparent 62%),
    linear-gradient(180deg,#1C1815 0%,var(--sm-dark-bg-alt) 100%)!important;
}
html[data-theme="dark"] body .blog-hero h1{
  color:var(--sm-dark-text)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
html[data-theme="dark"] body .blog-hero p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body .blog-category{
  border-color:rgba(255,106,19,.30)!important;
  background:#28221D!important;
  color:#FFF8F2!important;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

/* Blog index */
html[data-theme="dark"] body .blog-section{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-bg)!important;
}
html[data-theme="dark"] body .blog-section-head h2{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body .blog-section-head p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body .blog-feature-card{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.30)!important;
}
html[data-theme="dark"] body .blog-feature-image{
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,#ECE7E0 0%,#D9D2C9 100%)!important;
}
html[data-theme="dark"] body .blog-feature-meta{
  color:#FFAE7C!important;
}
html[data-theme="dark"] body .blog-feature-copy h3 a{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body .blog-feature-copy h3 a:hover,
html[data-theme="dark"] body .blog-feature-copy h3 a:focus-visible{
  color:#FF9A5C!important;
}
html[data-theme="dark"] body .blog-feature-copy p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body .blog-topic-card{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20)!important;
}
html[data-theme="dark"] body .blog-topic-card:nth-child(even){
  background:var(--sm-dark-surface-raised)!important;
}
html[data-theme="dark"] body .blog-topic-card strong{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body .blog-topic-card span{
  color:var(--sm-dark-text-secondary)!important;
}

/* Impact: Why e-bikes matter */
html[data-theme="dark"] body.impact-page .ebike-visual-section{
  border-color:var(--sm-dark-border)!important;
  background:
    radial-gradient(720px 380px at 50% 0,rgba(255,106,19,.07),transparent 68%),
    linear-gradient(180deg,var(--sm-dark-bg-alt) 0%,var(--sm-dark-bg) 100%)!important;
}
html[data-theme="dark"] body.impact-page .ebike-visual-head .section-title{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .ebike-visual-head .section-sub,
html[data-theme="dark"] body.impact-page .claim-basis-note-wide{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .flow-card{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] body.impact-page .flow-card:nth-child(even){
  background:var(--sm-dark-surface-raised)!important;
}
html[data-theme="dark"] body.impact-page .flow-card h3{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .flow-card p{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .flow-chip{
  border:1px solid rgba(255,106,19,.28);
  background:#34251C!important;
  color:#FFAA75!important;
}
html[data-theme="dark"] body.impact-page .eco-panel{
  border-color:var(--sm-dark-border)!important;
  background:var(--sm-dark-surface)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] body.impact-page .eco-panel.shortmile-panel{
  border-color:rgba(255,106,19,.48)!important;
  background:
    radial-gradient(420px 220px at 100% 0,rgba(255,106,19,.09),transparent 70%),
    var(--sm-dark-surface-raised)!important;
}
html[data-theme="dark"] body.impact-page .eco-panel h3{
  color:var(--sm-dark-text)!important;
}
html[data-theme="dark"] body.impact-page .eco-panel.shortmile-panel h3{
  color:#FF8A43!important;
}
html[data-theme="dark"] body.impact-page .eco-list li{
  color:var(--sm-dark-text-secondary)!important;
}
html[data-theme="dark"] body.impact-page .eco-mark.no{
  background:#35302B!important;
  color:#D7CEC5!important;
}
html[data-theme="dark"] body.impact-page .eco-mark.yes{
  background:#3A281D!important;
  color:#FF9959!important;
}
html[data-theme="dark"] body.impact-page .eco-summary{
  border:1px solid rgba(255,106,19,.24);
  background:#34251C!important;
  color:#FFF5EE!important;
}

/* Footer copy must remain the easiest dark surface to scan. */
html[data-theme="dark"] .footer-wrap :where(h2,h3,h4,strong){
  color:#FFFFFF!important;
}
html[data-theme="dark"] .footer-wrap :where(p,a,small){
  color:#D6CEC5;
}

@media(max-width:760px){
  html[data-theme="dark"] body .blog-hero{
    padding:44px 0 36px;
  }
  html[data-theme="dark"] body .blog-hero h1{
    font-size:clamp(42px,13vw,56px);
    line-height:.98;
  }
  html[data-theme="dark"] body .blog-hero p{
    font-size:17px;
    line-height:1.62;
  }
  html[data-theme="dark"] body .blog-category{
    min-height:42px;
    align-items:center;
    padding:10px 13px;
  }
  html[data-theme="dark"] body .blog-feature-image{
    min-height:220px;
  }
  html[data-theme="dark"] body .blog-feature-image img{
    max-height:250px;
    padding:14px;
  }
  html[data-theme="dark"] body .blog-feature-copy{
    padding:22px;
  }
  html[data-theme="dark"] body .blog-feature-copy p{
    font-size:15px;
    line-height:1.65;
  }
  html[data-theme="dark"] body .blog-topic-card,
  html[data-theme="dark"] body.impact-page .flow-card,
  html[data-theme="dark"] body.impact-page .eco-panel{
    padding:20px 18px;
  }
  html[data-theme="dark"] body.impact-page .claim-basis-note-wide{
    font-size:12.5px;
    line-height:1.65;
  }
}

/* v23.72 final cascade guard: these rules deliberately load after legacy
   page patches, so the low-glare treatment remains consistent everywhere. */
html[data-theme="dark"] .shop-service-note{
  background:#25211D!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#E4DCD3!important;
}
html[data-theme="dark"] .shop-service-note strong{color:#FFFFFF!important;}
html[data-theme="dark"] .contact-section .contact-panel{background:#201D19!important;border-color:rgba(255,255,255,.15)!important;}
html[data-theme="dark"] .contact-section .role-label,
html[data-theme="dark"] .contact-section .field label{color:#FFFDFC!important;}
html[data-theme="dark"] .contact-section .role-card{background:#2A2520!important;border-color:rgba(255,255,255,.14)!important;color:#FFFDFC!important;}
html[data-theme="dark"] .contact-section .role-card.selected{background:#3A2A20!important;border-color:#FF6A13!important;}
html[data-theme="dark"] .contact-section .role-card span{color:#E0D6CD!important;}
html[data-theme="dark"] .contact-section .field input,
html[data-theme="dark"] .contact-section .field textarea,
html[data-theme="dark"] .contact-section .field select{background:#171411!important;border-color:#514940!important;color:#FFFDFC!important;}
html[data-theme="dark"] .contact-section .field input::placeholder,
html[data-theme="dark"] .contact-section .field textarea::placeholder{color:#BFB3A7!important;}
html[data-theme="dark"] .contact-section .whatsapp-lead-link{background:#28231E!important;border-color:rgba(37,211,102,.32)!important;}
html[data-theme="dark"] .contact-section .whatsapp-lead-link strong{color:#FFFDFC!important;}
html[data-theme="dark"] .contact-section .whatsapp-lead-link span{color:#D8CEC4!important;}
html[data-theme="dark"] body .blog-feature-image{background:#221E1A!important;border-color:rgba(255,255,255,.12)!important;}
html[data-theme="dark"] body .blog-feature-image img{max-height:none!important;padding:0!important;}

/* v23.72 catalogue disclosure and complete Blog article dark-mode repair.
   These rules load after the legacy page styles: they are deliberately narrow
   so light mode remains the approved neutral reading experience. */
.whatsapp-lead-heading{
  display:flex;
  align-items:center;
  gap:7px;
}
.whatsapp-lead-icon{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:#25D366;
  color:#FFFFFF;
}
.whatsapp-lead-icon svg{width:14px;height:14px;display:block;}
.whatsapp-lead-heading .whatsapp-lead-kicker{margin:0!important;}
@media(max-width:760px){
  .shop-product-card .shop-product-description-preview.is-collapsed{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
  }
  .shop-product-description-wrap{
    position:relative;
    margin:0 0 9px;
  }
  .shop-product-description-wrap .shop-product-description-preview{
    margin:0!important;
  }
  .shop-product-description-details{
    margin:0;
  }
  .shop-product-description-details .shop-product-description-full{
    display:block!important;
    -webkit-line-clamp:unset!important;
    overflow:visible!important;
    margin:8px 0 0!important;
    color:#69635d!important;
  }
  .shop-product-description-details:not([open]){
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .shop-product-description-details:not([open]) .shop-product-description-toggle{
    position:absolute;
    right:0;
    bottom:0;
    padding-left:12px;
    background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 22%)!important;
    pointer-events:auto;
  }
  .shop-product-description-wrap.is-expanded .shop-product-description-preview{
    display:none!important;
  }
  .shop-product-description-toggle{
    display:inline-flex;
    align-items:center;
    width:auto;
    min-height:34px;
    padding:4px 2px;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#C65200;
    font:800 12px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
    cursor:pointer;
    list-style:none;
  }
  .shop-product-description-toggle::-webkit-details-marker{display:none;}
  .shop-product-description-toggle::before{
    content:'…';
    display:inline-block;
    margin-right:3px;
    font-size:15px;
    line-height:1;
    text-decoration:none;
  }
  html[data-theme="dark"] .shop-product-description-toggle{color:#FFAA75!important;}
  html[data-theme="dark"] .shop-product-description-details .shop-product-description-full{color:#D8CEC4!important;}
  html[data-theme="dark"] .shop-product-description-details:not([open]) .shop-product-description-toggle{background:linear-gradient(90deg,rgba(34,30,26,0),#221E1A 22%)!important;}
  .whatsapp-lead-heading .whatsapp-lead-kicker{font-size:11px!important;}
}

html[data-theme="dark"] body .article-hero{
  border-bottom-color:var(--sm-dark-border)!important;
  background:
    radial-gradient(700px 360px at 8% 2%,rgba(255,106,19,.14),transparent 62%),
    linear-gradient(180deg,#1B1815 0%,#151310 100%)!important;
}
html[data-theme="dark"] body .article-breadcrumb,
html[data-theme="dark"] body .article-meta{color:#D9D0C7!important;}
html[data-theme="dark"] body .article-breadcrumb a{color:#FF9B5D!important;}
html[data-theme="dark"] body .article-kicker{background:#FF6A13!important;color:#17110D!important;}
html[data-theme="dark"] body .article-hero h1,
html[data-theme="dark"] body .article-hero-copy strong{color:#FFFDFC!important;}
html[data-theme="dark"] body .article-standfirst,
html[data-theme="dark"] body .article-hero-copy p{color:#E1D8CF!important;}
html[data-theme="dark"] body .article-hero-visual{
  border-color:var(--sm-dark-border)!important;
  background:#221E1A!important;
}
html[data-theme="dark"] body .article-hero-copy{color:#FFFDFC!important;}
html[data-theme="dark"] body .article-hero-visual img{background:#191613!important;}
html[data-theme="dark"] body .article-wrap{background:#100F0D!important;}
html[data-theme="dark"] body .article-content h2,
html[data-theme="dark"] body .article-content strong{color:#FFFDFC!important;}
html[data-theme="dark"] body .article-content :where(p,li){color:#E1D8CF!important;}
html[data-theme="dark"] body .article-content a{color:#FF9B5D!important;}
html[data-theme="dark"] body .article-content hr{border-color:var(--sm-dark-border)!important;}
html[data-theme="dark"] body .article-quote{border-left-color:#FF6A13!important;}
html[data-theme="dark"] body .article-quote p,
html[data-theme="dark"] body .pull-quote{color:#FFFDFC!important;}
html[data-theme="dark"] body .pull-quote{border-color:var(--sm-dark-border)!important;}
html[data-theme="dark"] body .article-evidence figcaption,
html[data-theme="dark"] body .article-ref-note{color:#CFC5BB!important;}
html[data-theme="dark"] body .blog-backlink-note{
  border-color:var(--sm-dark-border)!important;
  background:#211D19!important;
  color:#E1D8CF!important;
}
html[data-theme="dark"] body .article-cta{
  border:1px solid rgba(255,106,19,.28)!important;
  background:#211D19!important;
}
html[data-theme="dark"] body .article-cta h2{color:#FFFDFC!important;}
html[data-theme="dark"] body .article-cta p{color:#E1D8CF!important;}

/* v23.74 — light-mode product visibility and calmer range-card canvases.
   The photo treatment lifts shadow detail without changing product identity;
   dark-mode asset selection remains untouched. */
html[data-theme="light"] .shop-product-media{
  background:
    radial-gradient(ellipse 78% 72% at 50% 42%,#FFFFFF 0%,#FCF8F3 48%,#F3E9DF 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(110,77,50,.08),inset 0 14px 28px rgba(255,255,255,.72)!important;
}
html[data-theme="light"] .shop-product-media img{
  filter:brightness(1.06) contrast(.97) saturate(.98);
}
.product-range-grid .product-visual.range-comparison-bike{
  background:
    radial-gradient(ellipse 72% 72% at 53% 49%,rgba(255,142,78,.22) 0%,rgba(255,142,78,.08) 42%,transparent 72%),
    linear-gradient(145deg,#74655A 0%,#544941 56%,#3D3733 100%)!important;
}
html[data-theme="dark"] .product-range-grid .product-visual.range-comparison-bike{
  background:
    radial-gradient(ellipse 72% 72% at 53% 49%,rgba(255,142,78,.22) 0%,rgba(255,142,78,.08) 42%,transparent 72%),
    linear-gradient(145deg,#6E594A 0%,#493B33 58%,#302B27 100%)!important;
}

/* v23.76 — final premium systems pass.
   This layer resolves the remaining cross-device, contrast and loading-quality
   issues without changing approved content or the established page hierarchy. */
:root{
  --sm-ease:cubic-bezier(.22,.61,.36,1);
  --sm-focus:rgba(255,106,19,.62);
}

body{
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:where(main,section,header,footer,article,aside,nav,div){min-width:0}
:where(h1,h2,h3){text-wrap:balance}
:where(p,li,figcaption){text-wrap:pretty}
:where([id]){scroll-margin-top:calc(var(--sm-header-height) + 16px)}

:where(a,button,summary,[role="button"]){
  touch-action:manipulation;
}

/* Shortmile orange is a strong brand surface, but white type on it does not
   meet normal-text contrast. Obsidian type keeps the locked palette and is
   substantially clearer in both themes. */
:where(
  .btn-primary,.nav-cta,.mobile-menu .mobile-cta,.submit-btn-primary,
  .next-action-app,.menu-featured-link,.mobile-conversion-primary,
  .shop-product-cta:hover,.shop-product-cta:focus-visible
){
  color:#0D0D0D!important;
  text-shadow:none!important;
}
.menu-featured-link small{color:#42200F!important}

/* Four enquiry choices should occupy four columns, not leave a ghost fifth
   column on wide screens. Existing tablet and mobile rules still collapse it. */
.role-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Stable media geometry prevents catalogue cards from shifting as product
   photography arrives on slower Nigerian mobile connections. */
.shop-product-media,
.shop-service-media{
  contain:layout paint;
  isolation:isolate;
}
.shop-product-media img,
.shop-service-media img{
  transform:translateZ(0);
}
.shop-product-card,
.shop-service-card,
.blog-feature-card,
.impact-card,
.flow-card,
.partner-card{
  transition:
    transform .22s var(--sm-ease),
    border-color .22s ease,
    box-shadow .22s var(--sm-ease),
    background-color .22s ease;
}

/* Cleaner keyboard and disclosure feedback. */
.faq-btn .icon{
  transition:transform .2s var(--sm-ease),background-color .2s ease,color .2s ease;
}
.faq-item.open .faq-btn .icon{transform:rotate(45deg)}
.faq-item.open{border-color:rgba(255,106,19,.28)}

/* Autofill remains part of the form instead of becoming a bright browser-blue
   rectangle, especially in dark mode. */
.contact-section :where(input,textarea,select){
  caret-color:var(--sm-orange);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.contact-section input:-webkit-autofill,
.contact-section textarea:-webkit-autofill{
  -webkit-text-fill-color:#111;
  box-shadow:0 0 0 1000px #FFF inset!important;
  transition:background-color 9999s ease-out 0s;
}
html[data-theme="dark"] .contact-section input:-webkit-autofill,
html[data-theme="dark"] .contact-section textarea:-webkit-autofill{
  -webkit-text-fill-color:#FFFDFC;
  box-shadow:0 0 0 1000px #171411 inset!important;
}

/* A subtle surface polish keeps long pages dimensional without adding visual
   noise or changing the approved orange/cream/obsidian system. */
html[data-theme="light"] :where(
  .shop-product-card,.shop-service-card,.faq-item,.help-card,.privacy-doc,
  .release-card,.blog-feature-card,.article-cta
){
  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 16px 42px rgba(38,29,21,.065)!important;
}
html[data-theme="dark"] :where(
  .shop-product-card,.shop-service-card,.faq-item,.help-card,.privacy-doc,
  .release-card,.blog-feature-card,.article-cta
){
  box-shadow:
    0 1px 0 rgba(255,255,255,.045) inset,
    0 18px 48px rgba(0,0,0,.26)!important;
}

@media(min-width:761px){
  html{scrollbar-gutter:stable}
}

@media(min-width:761px) and (max-width:1100px){
  .section{padding:78px 0}
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-product-card{min-width:0}
  .shop-product-description-toggle{min-height:32px}
  .mobile-conversion-primary{font-weight:900}
}

@media(max-width:390px){
  .role-grid{grid-template-columns:1fr}
}

@media(hover:hover) and (pointer:fine){
  .shop-product-card:hover,
  .shop-service-card:hover,
  .blog-feature-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,106,19,.25)!important;
    box-shadow:0 24px 58px rgba(34,25,18,.12)!important;
  }
  html[data-theme="dark"] .shop-product-card:hover,
  html[data-theme="dark"] .shop-service-card:hover,
  html[data-theme="dark"] .blog-feature-card:hover{
    box-shadow:0 26px 62px rgba(0,0,0,.36)!important;
  }
}

@media(hover:none){
  :where(
    .product-card,.spec-card,.role-card,.impact-card,.flow-card,.partner-card,
    .shop-product-card,.shop-service-card,.blog-feature-card,.btn,.nav-cta
  ):hover{transform:none!important}
}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav{background:#FFFCF8}
  html[data-theme="dark"] .nav{background:#151311}
  .mobile-conversion-bar{background:#FFFCF8}
  html[data-theme="dark"] .mobile-conversion-bar{background:#151311}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media(forced-colors:active){
  :where(.btn,.nav-cta,.theme-trigger,.hamburger,.role-card,.shop-product-cta,.shop-filter){
    border:1px solid ButtonText!important;
    box-shadow:none!important;
  }
  :where(.btn-primary,.nav-cta,.mobile-conversion-primary,.menu-featured-link){
    background:Highlight!important;
    color:HighlightText!important;
  }
}