/* Scooter Info · Premium Ride System — additive, accessible redesign */
:root {
  --si-ink: #eaf1ef;
  --si-muted: #a8bab2;
  --si-canvas: #06110f;
  --si-panel: rgba(14, 33, 28, .78);
  --si-panel-solid: #10251f;
  --si-line: rgba(190, 228, 202, .14);
  --si-lime: #c9fb63;
  --si-mint: #61d5ad;
  --si-blue: #77b8ff;
  --si-shadow: 0 24px 72px rgba(0, 0, 0, .34);
}

html, body { background: var(--si-canvas) !important; color: var(--si-ink) !important; }
body {
  background-image:
    radial-gradient(72rem 42rem at 8% -12%, rgba(77, 183, 135, .17), transparent 60%),
    radial-gradient(64rem 46rem at 100% 12%, rgba(54, 125, 113, .16), transparent 56%),
    linear-gradient(180deg, #091713 0%, #06110f 70%, #07140f 100%) !important;
  font-feature-settings: "ss01" 1, "ss02" 1, "cv02" 1;
}
#root, #root > div.min-h-screen, #root > div.min-h-screen.bg-\[\#f6f7f4\] { background: transparent !important; color: var(--si-ink) !important; }
#root > div.min-h-screen h1, #root > div.min-h-screen h2, #root > div.min-h-screen h3, #root > div.min-h-screen h4 { color: var(--si-ink) !important; }
#root > div.min-h-screen p, #root > div.min-h-screen li { color: var(--si-muted) !important; }

/* Floating, precise navigation */
#root > div.min-h-screen header, .site-header {
  background: rgba(6, 17, 15, .66) !important;
  border-bottom: 1px solid var(--si-line) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.025) !important;
}
#root > div.min-h-screen header a, #root > div.min-h-screen header button, .site-header a, .site-header button { color: #d7e6df !important; }
#root > div.min-h-screen header a:hover, #root > div.min-h-screen header button:hover, .site-header a:hover, .site-header button:hover { color: var(--si-lime) !important; background-color: rgba(201,251,99,.08) !important; }
.brand-mark { background: linear-gradient(135deg, var(--si-lime), #86c53a) !important; color: #082017 !important; box-shadow: 0 12px 28px rgba(122,198,70,.27) !important; }

/* Editorial rhythm and premium cards */
.hero-section { position: relative; isolation: isolate; padding-top: clamp(72px, 10vw, 136px) !important; }
.hero-section::before { content: ""; position: absolute; z-index: -1; inset: 12% -10% auto auto; width: min(55vw, 650px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201,251,99,.13) 0, rgba(97,213,173,.045) 37%, transparent 70%); filter: blur(5px); pointer-events:none; }
.hero-copy h1 { max-width: 850px; font-size: clamp(50px, 7.2vw, 102px) !important; line-height: .93 !important; letter-spacing: -.068em !important; text-wrap: balance; }
.hero-copy h1 span { color: var(--si-lime) !important; text-shadow: 0 0 30px rgba(201,251,99,.15); }
.hero-copy p, .hero-lede { max-width: 610px; font-size: clamp(17px, 1.55vw, 21px) !important; line-height: 1.65 !important; }
.eyebrow, .hero-copy .eyebrow { color: var(--si-lime) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .19em !important; }
.eyebrow-line { background: linear-gradient(90deg, var(--si-lime), var(--si-mint)) !important; }

.feature-card, .tuning-card, .stat-card, .profile-chip, .location-menu, .setup-card, .coming-soon-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(20, 49, 40, .84), rgba(10, 27, 22, .92)) !important;
  color: var(--si-ink) !important;
  border: 1px solid var(--si-line) !important;
  border-radius: 26px !important;
  box-shadow: var(--si-shadow) !important;
  backdrop-filter: blur(18px);
}
.feature-card::after, .tuning-card::after, .stat-card::after, .coming-soon-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(116deg, rgba(255,255,255,.07), transparent 28%, transparent 72%, rgba(201,251,99,.045)); }
.feature-card:hover, .tuning-card:hover, .stat-card:hover { border-color: rgba(201,251,99,.42) !important; box-shadow: 0 29px 85px rgba(0,0,0,.43), inset 0 1px rgba(255,255,255,.05) !important; transform: translateY(-5px); }
.statement-strip { background: linear-gradient(105deg, rgba(25, 65, 49, .88), rgba(15, 37, 30, .88)) !important; color: var(--si-ink) !important; border: 1px solid rgba(201,251,99,.21) !important; box-shadow: 0 22px 60px rgba(0,0,0,.25) !important; }
.statement-strip * { color: inherit !important; }
.safety-notice { background: rgba(91, 67, 18, .34) !important; border-color: rgba(240, 199, 80, .38) !important; color: #f3db9d !important; }

/* Controls: confidence without visual noise */
#root > div.min-h-screen input, #root > div.min-h-screen textarea, #root > div.min-h-screen select {
  color: var(--si-ink) !important;
  background: rgba(5, 18, 14, .72) !important;
  border: 1px solid rgba(185, 224, 196, .19) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#root > div.min-h-screen input:focus, #root > div.min-h-screen textarea:focus, #root > div.min-h-screen select:focus { border-color: var(--si-lime) !important; box-shadow: 0 0 0 4px rgba(201,251,99,.14) !important; }
#root > div.min-h-screen button[class*="bg-[#b8df3f"], #root > div.min-h-screen button[class*="bg-[#173d2c]"] { background: linear-gradient(135deg, #c9fb63, #94d74d) !important; color: #092017 !important; border-color: transparent !important; box-shadow: 0 13px 24px rgba(116,190,59,.16) !important; }
#root > div.min-h-screen button[class*="bg-[#173d2c]"]:hover, #root > div.min-h-screen button[class*="bg-[#b8df3f"]:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 17px 34px rgba(116,190,59,.26) !important; }

/* Tuning centre: choice clarity, rate transparency, and checkout hierarchy */
.tuning-card { background: linear-gradient(145deg, rgba(18, 52, 40, .9), rgba(8, 29, 22, .93)) !important; }
.tuning-tier-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 34px; }
.tuning-tier-item { min-height: 160px; padding: 20px; border: 1px solid rgba(192,231,203,.16); border-radius: 22px; background: linear-gradient(150deg, rgba(26,62,49,.76), rgba(9,27,21,.76)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s ease, background .26s ease; }
.tuning-tier-item:hover { transform: translateY(-4px); border-color: rgba(201,251,99,.52); background: linear-gradient(150deg, rgba(42,83,60,.9), rgba(9,32,23,.9)); }
.tuning-tier-label { display:flex; align-items:center; justify-content:space-between; gap:8px; color: var(--si-lime); font: 800 10px/1 Manrope, sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.tuning-tier-price { color:#f1f8f3; font-size:30px; line-height:1; font-weight:800; letter-spacing:-.06em; margin:28px 0 9px; }
.tuning-tier-item p { margin:0; color:#aabfb5 !important; font-size:13px; line-height:1.5; }
.ltc-quote-card { position:relative; overflow:hidden; background: linear-gradient(110deg, rgba(169,227,102,.17), rgba(17,60,39,.42)) !important; border: 1px solid rgba(201,251,99,.2) !important; }
.ltc-quote-card::after { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(var(--si-lime),var(--si-mint)); }
.ltc-source-chip { display:inline-flex; max-width:100%; padding:6px 9px; margin-top:10px !important; color:#d6ebdd !important; font-size:10px !important; border:1px solid rgba(201,251,99,.15); border-radius:999px; background:rgba(5,18,14,.33); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.paypal-method { color:#f5f7f6 !important; background: linear-gradient(110deg, rgba(0,48,135,.78), rgba(0,156,222,.53)) !important; border-color:rgba(106,195,245,.58) !important; box-shadow: inset 0 1px rgba(255,255,255,.14), 0 12px 25px rgba(5,66,129,.14); }
.paypal-method strong { color:white !important; }
.paypal-method span { color:#dbeeff !important; }
.paypal-payment-card { border-color: rgba(75, 145, 214, .35) !important; background: linear-gradient(145deg, rgba(243,250,255,.98), rgba(237,247,252,.98)) !important; }
.paypal-payment-mark { color:#fff; background: linear-gradient(142deg, #003087 0%, #0070ba 53%, #009cde 100%); box-shadow: 0 9px 18px rgba(0,112,186,.22); }
.paypal-checkout-link { text-decoration:none !important; background: linear-gradient(105deg, #003087, #0070ba 60%, #009cde) !important; box-shadow: 0 12px 25px rgba(0,94,165,.19); transition: transform .18s ease, filter .18s ease; }
.paypal-checkout-link:hover { color:white !important; transform:translateY(-2px); filter:brightness(1.08); }

.site-footer { background: #040d0a !important; border-top: 1px solid rgba(201,251,99,.11); color:#92aa9e !important; }
.site-footer a { color: var(--si-lime) !important; }
.privacy-banner { background: rgba(11, 30, 23, .96) !important; color:var(--si-ink) !important; border-color:var(--si-line) !important; box-shadow:var(--si-shadow) !important; }
.privacy-banner p { color:var(--si-muted) !important; }
.privacy-actions button.primary { background:var(--si-lime) !important; color:#092017 !important; }

@media (max-width: 700px) {
  .hero-section { padding-top: 54px !important; }
  .hero-copy h1 { font-size: clamp(48px, 13.5vw, 72px) !important; }
  .tuning-tier-rail { grid-template-columns: 1fr; gap:10px; margin:22px 0 26px; }
  .tuning-tier-item { min-height:0; padding:17px 18px; }
  .tuning-tier-price { margin:16px 0 7px; }
  .feature-card, .tuning-card, .stat-card { border-radius:22px !important; }
}

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

/* Final contrast pass: dark editorial layers must remain legible at every viewport. */
#root .hero-copy h1 { color: #edf6f0 !important; text-shadow: 0 12px 42px rgba(0,0,0,.25); }
#root .hero-copy h1 span { color: var(--si-lime) !important; }
#root .hero-copy .hero-lede { color: #bfd0c7 !important; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
#root .hero-copy button:not([class*="bg-"]) { color: #ecf5ef !important; border-color: rgba(222, 244, 229, .76) !important; background: rgba(12, 36, 28, .42) !important; }
#root > div.min-h-screen header button[class*="text-"] { color: #dcece4 !important; }
#root > div.min-h-screen header button[class*="text-"]:hover { color: var(--si-lime) !important; }

/* Legacy hero uses an independent text-fill treatment; reset it for audited contrast. */
#root .hero-copy h1 { background: none !important; color: #edf6f0 !important; -webkit-text-fill-color: #edf6f0 !important; }
#root .hero-copy h1 span { color: var(--si-lime) !important; -webkit-text-fill-color: var(--si-lime) !important; }
#root .hero-copy .hero-lede { background: none !important; color: #bfd0c7 !important; -webkit-text-fill-color: #bfd0c7 !important; opacity: 1 !important; }
#root .hero-copy button:not([class*="bg-"]) { -webkit-text-fill-color: #ecf5ef !important; opacity: 1 !important; }
#root > div.min-h-screen header button[class*="text-"] { -webkit-text-fill-color: #dcece4 !important; opacity: 1 !important; }

#root .hero-copy button { color: #ecf5ef !important; -webkit-text-fill-color: #ecf5ef !important; opacity: 1 !important; }
#root .hero-copy button[class*="bg-[#b8df3f]"] { color: #092017 !important; -webkit-text-fill-color: #092017 !important; }


/* Final tuning checkout polish: readable first, premium second. */
#root .tuning-tier-rail + *,
#root .ltc-quote-card,
#root .paypal-payment-card {
  isolation: isolate;
}

#root .ltc-quote-card {
  background: linear-gradient(135deg, #eff9df 0%, #d9efc7 100%) !important;
  border: 1px solid #b8d69b !important;
  box-shadow: 0 18px 42px rgba(61, 112, 45, .16), inset 0 1px rgba(255,255,255,.72) !important;
  color: #183921 !important;
}
#root .ltc-quote-card::after {
  width: 4px;
  background: linear-gradient(#8fc63e, #4e9b61) !important;
}
#root .ltc-quote-card,
#root .ltc-quote-card * {
  color: #244b2d !important;
  -webkit-text-fill-color: #244b2d !important;
}
#root .ltc-quote-card .text-4xl {
  color: #12351e !important;
  -webkit-text-fill-color: #12351e !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
#root .ltc-quote-card .ltc-source-chip {
  color: #315f38 !important;
  -webkit-text-fill-color: #315f38 !important;
  background: rgba(255,255,255,.62) !important;
  border-color: #a8ca8d !important;
}
#root .ltc-quote-card code {
  color: #173d24 !important;
  -webkit-text-fill-color: #173d24 !important;
  background: rgba(255,255,255,.84) !important;
  border-color: #b8d69b !important;
  font-weight: 700;
}
#root .ltc-quote-card button {
  color: #2b713a !important;
  -webkit-text-fill-color: #2b713a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The unlock form is a dark panel: every label and helper line stays light. */
#root .tuning-card,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] {
  border-color: rgba(201,251,99,.22) !important;
}
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] h3,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] p,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] label,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] label > span {
  color: #f0f8f1 !important;
  -webkit-text-fill-color: #f0f8f1 !important;
}
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] p {
  color: #b9d0c0 !important;
  -webkit-text-fill-color: #b9d0c0 !important;
}
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] input,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] textarea {
  min-height: 50px;
  color: #eff8f0 !important;
  -webkit-text-fill-color: #eff8f0 !important;
  background: #173b2b !important;
  border-color: #4d7653 !important;
  border-radius: 14px !important;
}
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] input::placeholder,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] textarea::placeholder {
  color: #9fbdab !important;
  -webkit-text-fill-color: #9fbdab !important;
  opacity: 1 !important;
}
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] input:focus,
#root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] textarea:focus {
  border-color: var(--si-lime) !important;
  box-shadow: 0 0 0 4px rgba(201,251,99,.16), 0 8px 24px rgba(0,0,0,.16) !important;
}

/* Keep payment status and primary action visually anchored. */
#root .ltc-quote-card + div {
  color: #d5e6d8 !important;
}
#root button[class*="bg-[#b8df3f]"],
#root button[class*="bg-[#173d2c]"] {
  min-height: 48px;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
#root .ltc-quote-card ~ button,
#root .ltc-quote-card ~ div button {
  color: #0b2415 !important;
  -webkit-text-fill-color: #0b2415 !important;
  background: linear-gradient(135deg, #d7ff70, #9edd50) !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(111, 180, 52, .26) !important;
}

@media (max-width: 760px) {
  #root .ltc-quote-card .text-4xl { font-size: 2.35rem !important; }
  #root [class*="rounded-[26px]"][class*="bg-[#173d2c]"] { border-radius: 22px !important; }
}

/* Visual audit pass: win against legacy surface overrides without touching app logic. */
#root > div.min-h-screen.bg-\[\#f6f7f4\] h1,
#root > div.min-h-screen.bg-\[\#f6f7f4\] h2,
#root > div.min-h-screen.bg-\[\#f6f7f4\] h3,
#root > div.min-h-screen.bg-\[\#f6f7f4\] h4 {
  color: #edf6f0 !important;
  -webkit-text-fill-color: #edf6f0 !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] p,
#root > div.min-h-screen.bg-\[\#f6f7f4\] li {
  color: #b9d0c0 !important;
  -webkit-text-fill-color: #b9d0c0 !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] .section-intro > p,
#root > div.min-h-screen.bg-\[\#f6f7f4\] .section-copy,
#root > div.min-h-screen.bg-\[\#f6f7f4\] .hero-copy .hero-lede {
  color: #bfd0c7 !important;
  -webkit-text-fill-color: #bfd0c7 !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] .statement-strip,
#root > div.min-h-screen.bg-\[\#f6f7f4\] .statement-strip * {
  color: #eaf6ee !important;
  -webkit-text-fill-color: #eaf6ee !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] .feature-card p,
#root > div.min-h-screen.bg-\[\#f6f7f4\] .tuning-card p,
#root > div.min-h-screen.bg-\[\#f6f7f4\] .stat-card p {
  color: #b9d0c0 !important;
  -webkit-text-fill-color: #b9d0c0 !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] #theme-toggle {
  color: #dcece4 !important;
  -webkit-text-fill-color: #dcece4 !important;
  background: rgba(16, 39, 27, .72) !important;
  border: 1px solid rgba(201, 251, 99, .28) !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] .site-footer {
  color: #9ab3a6 !important;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] .site-footer .shu-inline-link,
#root > div.min-h-screen.bg-\[\#f6f7f4\] footer .shu-inline-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(201, 251, 99, .22);
  border-radius: 999px;
  color: var(--si-lime) !important;
  -webkit-text-fill-color: var(--si-lime) !important;
  background: rgba(201, 251, 99, .06);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}
#root > div.min-h-screen.bg-\[\#f6f7f4\] .site-footer .shu-inline-link:hover,
#root > div.min-h-screen.bg-\[\#f6f7f4\] footer .shu-inline-link:hover {
  background: rgba(201, 251, 99, .12);
  color: #efffcf !important;
  -webkit-text-fill-color: #efffcf !important;
}

/* The legacy script creates this link outside the React tree before it is moved. */
#shu-category-link {
  display: inline-flex !important;
  align-items: center;
  margin-top: 12px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(201, 251, 99, .22) !important;
  border-radius: 999px !important;
  color: var(--si-lime) !important;
  -webkit-text-fill-color: var(--si-lime) !important;
  background: rgba(201, 251, 99, .06) !important;
  font: 800 11px/1 Manrope, sans-serif !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
}
#shu-category-link:hover {
  background: rgba(201, 251, 99, .12) !important;
  color: #efffcf !important;
  -webkit-text-fill-color: #efffcf !important;
}
#root > div.min-h-screen footer #shu-category-link.shu-inline-link {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 12px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(201, 251, 99, .22) !important;
  border-radius: 999px !important;
  color: var(--si-lime) !important;
  -webkit-text-fill-color: var(--si-lime) !important;
  background: rgba(201, 251, 99, .06) !important;
  font: 800 11px/1 Manrope, sans-serif !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
}