/*
 * RiderSOS customer-facing page language.
 * This file deliberately avoids admin, homepage, cart, and contact selectors.
 * It replaces generic nested cards with editorial spacing and rule-based hierarchy.
 */

html {
  overflow-x: clip;
}

body.storefront-context {
  --brand-red: #e31b23;
  --brand-red-dark: #bd1017;
  --brand-ink: #080808;
  --brand-muted: #62626b;
  --brand-soft: #f5f5f5;
  --brand-line: #d9d9dc;
  --brand-gutter: clamp(1.25rem, 5vw, 5rem);
  --brand-section: clamp(4rem, 8vw, 8rem);
  --brand-max: 1440px;
  --brand-radius: 6px;
  overflow-x: clip;
}

body.storefront-context:not(.page-home):not(.page-public-cart):not(.page-public-contact) :is(.btn-primary, .btn-secondary, .btn-danger, .btn-red, .btn-outline) {
  min-height: 44px;
  border-radius: 4px;
  box-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.storefront-context:not(.page-home):not(.page-public-cart):not(.page-public-contact) :is(.btn-primary, .btn-danger, .btn-red):hover {
  background: var(--brand-red-dark);
  border-color: var(--brand-red-dark);
}

body.storefront-context:not(.page-home):not(.page-public-cart):not(.page-public-contact) :is(.btn-primary, .btn-secondary, .btn-danger, .btn-red, .btn-outline):active {
  transform: translateY(1px);
}

body.storefront-context:not(.page-home):not(.page-public-cart):not(.page-public-contact) :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
}

/* Shared support and account shells */
body.storefront-context :is(.page-shell, .form-shell, .support-shell, .account-shell, .collection-shell) {
  width: min(100%, var(--brand-max));
  padding: clamp(1.5rem, 3vw, 3rem) var(--brand-gutter) var(--brand-section);
}

body.storefront-context :is(.page-title, .support-hero h1, .auth-card h1) {
  color: var(--brand-ink);
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.9;
  text-wrap: balance;
}

body.storefront-context .form-shell > .auth-card {
  width: min(100%, 38rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.storefront-context .form-shell > .auth-card::before {
  display: block;
  width: 3rem;
  height: 4px;
  margin-bottom: 2rem;
  background: var(--brand-red);
  content: "";
}

body.storefront-context .form-shell .input {
  min-height: 3.5rem;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid #aaaab0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-ink);
}

body.storefront-context :is(.page-copy, .support-hero p, .auth-card p, .account-card p, .account-row p) {
  color: var(--brand-muted);
}

body.storefront-context .eyebrow-label {
  color: var(--brand-red);
  font-weight: 900;
  letter-spacing: 0.12em;
}

/* FAQ: questions read as a concise support index, not detached cards. */
body.page-public-faq .support-shell {
  gap: clamp(3rem, 7vw, 6rem);
}

body.page-public-faq .support-hero {
  max-width: 58rem;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--brand-line);
}

body.page-public-faq .faq-grid {
  gap: 0;
}

body.page-public-faq .faq-card {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 6vw, 7rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  border-radius: 0;
  box-shadow: none;
}

body.page-public-faq .faq-card:first-child {
  border-top: 1px solid var(--brand-line);
}

body.page-public-faq .faq-card h3,
body.page-public-faq .faq-card p {
  margin: 0;
}

body.page-public-faq .faq-card h3 {
  color: var(--brand-ink);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  letter-spacing: -0.025em;
}

body.page-public-faq .faq-card p {
  max-width: 42rem;
  color: var(--brand-muted);
  line-height: 1.7;
}

/* Authentication: full account experience. */
body.page-auth .site-body {
  background: #efeff1;
}

body.page-auth .auth-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(30rem, .92fr);
  width: min(calc(100% - 2rem), 1380px);
  min-height: clamp(720px, calc(100vh - 9rem), 900px);
  margin: 1rem auto 3rem;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 35px 90px -60px rgba(5,5,7,.48);
}

body.page-auth .auth-story {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2.25rem, 5vw, 5.25rem);
  color: #fff;
  background:
    radial-gradient(circle at 88% 14%, rgba(215,25,32,.34), transparent 24rem),
    linear-gradient(145deg, #25272b 0%, #111214 62%, #08090a 100%);
}

body.page-auth .auth-story::after {
  position: absolute;
  right: -9rem;
  bottom: -11rem;
  width: 29rem;
  height: 29rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(255,255,255,.025),
    0 0 0 9rem rgba(255,255,255,.018);
  content: "";
  pointer-events: none;
}

body.page-auth .auth-story__top {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(255,255,255,.7);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.page-auth .auth-story__mark {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--brand-red);
  font-size: 1rem;
  font-weight: 950;
}

body.page-auth .auth-story__copy {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-block: clamp(4rem, 11vh, 8rem) clamp(3rem, 7vh, 5rem);
}

body.page-auth .auth-story__eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: #ff676d;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-auth .auth-story h2 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-size: clamp(3.3rem, 6vw, 6.4rem);
  font-weight: 950;
  letter-spacing: -.072em;
  line-height: .87;
  text-wrap: balance;
}

body.page-auth .auth-story__copy p {
  max-width: 38rem;
  margin: 1.6rem 0 0;
  color: rgba(255,255,255,.64);
  font-size: clamp(.95rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}

body.page-auth .auth-story__features {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(255,255,255,.14);
}

body.page-auth .auth-story__features > div {
  min-width: 0;
  padding: 1.35rem 1rem;
}

body.page-auth .auth-story__features > div:first-child { padding-left: 0; }
body.page-auth .auth-story__features > div + div { border-left: 1px solid rgba(255,255,255,.14); }
body.page-auth .auth-story__features span { color: #ff676d; font-size: .65rem; font-weight: 900; }
body.page-auth .auth-story__features strong { display: block; margin-top: .75rem; color: #fff; font-size: .82rem; }
body.page-auth .auth-story__features p { margin: .38rem 0 0; color: rgba(255,255,255,.52); font-size: .7rem; line-height: 1.45; }
body.page-auth .auth-story__foot { position: relative; z-index: 1; margin: 1.3rem 0 0; color: rgba(255,255,255,.38); font-size: .68rem; }

body.page-auth .auth-panel {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  background: #fff;
}

body.page-auth .auth-card {
  width: min(100%, 30rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-auth .auth-card h1 {
  margin: .15rem 0 .85rem;
  color: var(--brand-ink);
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .92;
}

body.page-auth .auth-card > p {
  max-width: 28rem;
  margin: 0;
  color: var(--brand-muted);
  font-size: .9rem;
  line-height: 1.65;
}

body.page-auth .google-auth-button {
  display: flex;
  width: 100%;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.8rem;
  padding: .75rem 1rem;
  border: 1px solid #cfd0d4;
  border-radius: 9px;
  color: var(--brand-ink);
  background: #fff;
  font-size: .83rem;
  font-weight: 850;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.page-auth .google-auth-button:hover { border-color: #92949a; background: #f7f7f8; }
body.page-auth .google-auth-button svg { width: 19px; height: 19px; flex: none; }

body.page-auth .google-auth-legal {
  margin: .65rem 0 0 !important;
  font-size: .69rem !important;
  line-height: 1.45 !important;
  text-align: center;
}

body.page-auth .google-auth-legal a,
body.page-auth .auth-consent a {
  color: var(--brand-ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-auth .auth-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.25rem 0;
  color: #86888e;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

body.page-auth .auth-divider::before,
body.page-auth .auth-divider::after { height: 1px; flex: 1; background: var(--brand-line); content: ""; }

body.page-auth .auth-form {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

body.page-auth .auth-form > label:not(.auth-consent) {
  display: grid;
  gap: .42rem;
  color: var(--brand-ink);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .065em;
  text-transform: uppercase;
}

body.page-auth .auth-form label small {
  color: var(--brand-muted);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

body.page-auth .input {
  min-height: 3.15rem;
  padding: .72rem .85rem;
  border: 1px solid #d0d1d5;
  border-radius: 9px;
  background: #fafafa;
  color: var(--brand-ink);
  box-shadow: none;
  font-size: .88rem;
}

body.page-auth .input:focus {
  border-color: var(--brand-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(215,25,32,.09);
  outline: none;
}

body.page-auth .auth-form__between {
  display: flex;
  justify-content: flex-end;
  margin-top: -.35rem;
}

body.page-auth .auth-form__between a {
  color: var(--brand-muted);
  font-size: .72rem;
  font-weight: 750;
  text-decoration: none;
}

body.page-auth .auth-form__between a:hover { color: var(--brand-red); }

body.page-auth .auth-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  color: var(--brand-muted);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

body.page-auth .auth-consent input { width: 15px; height: 15px; margin-top: .12rem; accent-color: var(--brand-red); }

body.page-auth .auth-submit {
  width: 100%;
  min-height: 3.2rem;
  margin-top: .15rem;
  border-radius: 9px;
  background: var(--brand-red);
  font-size: .83rem;
  font-weight: 850;
}

body.page-auth .auth-switch {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.25rem;
  color: var(--brand-muted);
  font-size: .76rem;
}

body.page-auth .auth-switch a { color: var(--brand-ink); font-weight: 850; text-decoration: none; }
body.page-auth .auth-switch a:hover { color: var(--brand-red); }

body.page-activation-activate .input,
body[class*="page-dashboard-"] .input,
body[class*="page-ride-"] .input {
  min-height: 3.5rem;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid #aaaab0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-ink);
}

body.page-activation-activate .input:focus,
body[class*="page-dashboard-"] .input:focus,
body[class*="page-ride-"] .input:focus {
  border-bottom-color: var(--brand-red);
  box-shadow: 0 2px 0 -1px var(--brand-red);
}

@media (max-width: 980px) {
  body.page-auth .auth-experience { grid-template-columns: 1fr; width: min(calc(100% - 1.5rem), 720px); }
  body.page-auth .auth-story { min-height: auto; padding: 2rem; }
  body.page-auth .auth-story__copy { margin-block: 3.5rem 2.5rem; }
  body.page-auth .auth-story h2 { max-width: 12ch; font-size: clamp(3rem, 9vw, 5rem); }
  body.page-auth .auth-story__foot { display: none; }
  body.page-auth .auth-panel { padding: clamp(2rem, 8vw, 4rem); }
}

@media (max-width: 620px) {
  body.page-auth .auth-experience { width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
  body.page-auth .auth-story { padding: 1.5rem 1.25rem 1.75rem; }
  body.page-auth .auth-story__copy { margin-block: 2.5rem 1.5rem; }
  body.page-auth .auth-story h2 { font-size: clamp(2.75rem, 15vw, 4.2rem); }
  body.page-auth .auth-story__copy p { font-size: .86rem; }
  body.page-auth .auth-story__features { grid-template-columns: 1fr; }
  body.page-auth .auth-story__features > div { display: grid; grid-template-columns: 2rem 1fr; gap: 0 .65rem; padding: .8rem 0; }
  body.page-auth .auth-story__features > div + div { border-top: 1px solid rgba(255,255,255,.14); border-left: 0; }
  body.page-auth .auth-story__features strong { margin: 0; }
  body.page-auth .auth-story__features p { grid-column: 2; }
  body.page-auth .auth-panel { padding: 2.25rem 1.25rem 3rem; }
}

/* Activation: the steps become a sequence; only the code entry remains a controlled surface. */
body.page-activation-activate .activate-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

body.page-activation-activate .activate-grid > * {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-activation-activate .activate-intro,
body.page-activation-activate .activate-panel {
  padding: 0;
}

body.page-activation-activate .activate-steps {
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--brand-line);
}

body.page-activation-activate .activate-step {
  padding: 1.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  border-radius: 0;
  background: transparent;
}

body.page-activation-activate .activate-panel {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-top: 4px solid var(--brand-red);
  background: var(--brand-soft);
}

body.page-activation-activate .activate-note {
  padding: 1.25rem 0 0;
  border: 0;
  border-top: 1px solid var(--brand-line);
  border-radius: 0;
  background: transparent;
}

/* Shop collection and product detail pages. Product media keeps a restrained boundary. */
body:is(.page-public-collection-detail, .page-public-products-search) .collection-hero {
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:is(.page-public-collection-detail, .page-public-products-search) .collection-filters {
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.storefront-context .product-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.storefront-context .product-card__media {
  overflow: hidden;
  border-radius: var(--brand-radius);
  background: var(--brand-soft);
}

body.storefront-context .product-card__body {
  padding: 1.25rem 0 0;
}

body.storefront-context .product-card__footer {
  padding-top: 1rem;
  border-top: 1px solid var(--brand-line);
}

/* Legacy reveal code must never leave purchasable content blank before scrolling. */
body.page-products-index .reveal,
body[class*="page-public-product-detail"] .launch-product-page [data-reveal] {
  opacity: 1;
  transform: none;
}

body.page-products-index {
  background: #fff;
}

body.page-products-index .category-strip {
  gap: 0;
  border-bottom: 1px solid var(--brand-line);
}

body.page-products-index .category-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-products-index .category-card + .category-card {
  border-left: 1px solid var(--brand-line);
}

body.page-products-index .product-section {
  margin-block: clamp(3rem, 6vw, 6rem);
  padding: clamp(2rem, 4vw, 3.5rem) max(20px, calc((100vw - var(--max-width)) / 2));
  border: 0;
  border-top: 1px solid var(--brand-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-products-index .product-section .section-head {
  padding-inline: 0;
}

body.page-products-index :is(.feature, .kit) {
  border-radius: 0;
  box-shadow: none;
}

body.page-products-index .feature {
  border: 0;
  border-block: 1px solid var(--brand-line);
}

body.page-products-index .kit {
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  background: transparent;
}

body.page-products-index .subscription-feature {
  border-radius: var(--brand-radius);
  box-shadow: none;
}

body[class*="page-public-product-detail"] .product-page {
  width: min(100%, var(--brand-max));
  padding-inline: var(--brand-gutter);
}

body[class*="page-public-product-detail"] :is(.product-hero, .product-section, .product-cta-panel) {
  border-radius: 0;
  box-shadow: none;
}

body[class*="page-public-product-detail"] .product-hero {
  padding-inline: 0;
  border: 0;
  background: transparent;
}

body[class*="page-public-product-detail"] .product-gallery__main {
  border: 0;
  border-radius: var(--brand-radius);
  background: var(--brand-soft);
  box-shadow: none;
}

body[class*="page-public-product-detail"] .product-section {
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border: 0;
  border-top: 1px solid var(--brand-line);
  background: transparent;
}

body[class*="page-public-product-detail"] .product-step,
body[class*="page-public-product-detail"] .product-faq-item,
body[class*="page-public-product-detail"] .product-highlight-card {
  border-radius: 0;
  box-shadow: none;
}

body[class*="page-public-product-detail"] .product-step,
body[class*="page-public-product-detail"] .product-faq-item {
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  background: transparent;
}

body[class*="page-public-product-detail"] .product-highlight-card {
  border: 0;
  border-left: 3px solid var(--brand-red);
  background: var(--brand-soft);
}

body[class*="page-public-product-detail"] .product-cta-panel {
  border: 0;
  border-top: 4px solid var(--brand-red);
  background: var(--brand-soft);
}

/* Buying guide */
body.page-public-pricing .pricing-page {
  max-width: var(--brand-max);
  padding: clamp(1.5rem, 3vw, 3rem) var(--brand-gutter) var(--brand-section);
  gap: var(--brand-section);
}

body.page-public-pricing :is(.pricing-hero, .pricing-card, .pricing-band) {
  border-radius: 0;
  box-shadow: none;
}

body.page-public-pricing .pricing-hero {
  padding: 0 0 clamp(3rem, 6vw, 5rem);
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  background: transparent;
}

body.page-public-pricing .pricing-title {
  max-width: 13ch;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
}

body.page-public-pricing .pricing-strip {
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-block: 1px solid var(--brand-line);
}

body.page-public-pricing .pricing-strip-card {
  padding: 1.5rem clamp(1rem, 2vw, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-public-pricing .pricing-strip-card + .pricing-strip-card {
  border-left: 1px solid var(--brand-line);
}

body.page-public-pricing :is(.pricing-grid, .pricing-addons) {
  gap: 0;
  border-block: 1px solid var(--brand-line);
}

body.page-public-pricing .pricing-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 0;
  background: transparent;
}

body.page-public-pricing .pricing-card + .pricing-card {
  border-left: 1px solid var(--brand-line);
}

body.page-public-pricing .pricing-card--featured {
  border-top: 4px solid var(--brand-red);
  background: var(--brand-soft);
}

body.page-public-pricing .pricing-band {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border: 0;
  border-block: 1px solid var(--brand-line);
  background: transparent;
}

/* How it works */
body.page-public-how-it-works .how-guide-shell {
  max-width: var(--brand-max);
  padding: clamp(1.5rem, 3vw, 3rem) var(--brand-gutter) var(--brand-section);
  gap: var(--brand-section);
}

body.page-public-how-it-works :is(.how-guide-hero, .how-guide-card, .how-guide-step, .how-guide-tip, .how-guide-cta-band) {
  border-radius: 0;
  box-shadow: none;
}

body.page-public-how-it-works .how-guide-hero {
  padding: 0 0 clamp(3rem, 6vw, 5rem);
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  background: transparent;
}

body.page-public-how-it-works .how-guide-title {
  max-width: 13ch;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  color: var(--brand-ink);
}

body.page-public-how-it-works .how-guide-card {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border: 0;
  border-top: 1px solid var(--brand-line);
  background: transparent;
}

body.page-public-how-it-works .how-guide-steps,
body.page-public-how-it-works .how-guide-tips {
  gap: 0;
  border-block: 1px solid var(--brand-line);
}

body.page-public-how-it-works .how-guide-step,
body.page-public-how-it-works .how-guide-tip {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 0;
  background: transparent;
}

body.page-public-how-it-works :is(.how-guide-step, .how-guide-tip) + :is(.how-guide-step, .how-guide-tip) {
  border-left: 1px solid var(--brand-line);
}

body.page-public-how-it-works .how-guide-cta-band {
  padding: clamp(2rem, 5vw, 4rem);
  border: 0;
  border-top: 4px solid var(--brand-red);
  background: var(--brand-ink);
  color: #fff;
}

body.page-public-how-it-works .how-guide-cta-band :is(h2, h3, strong) {
  color: #fff;
}

body.page-public-how-it-works .how-guide-cta-band :is(p, li) {
  color: rgba(255,255,255,.76);
}

body.page-public-how-it-works .how-guide-footer {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border: 0;
  border-block: 1px solid var(--brand-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Bike ID: keep one dark technical hero, open up all supporting information. */
body.page-public-bike-id-marketing .bike-id-shell {
  max-width: var(--brand-max);
  padding-inline: var(--brand-gutter);
}

body.page-public-bike-id-marketing .bike-id-hero {
  border-radius: var(--brand-radius);
  box-shadow: none;
}

body.page-public-bike-id-marketing :is(.bike-id-meta-card, .bike-id-feature-card, .bike-id-process-card, .bike-id-demo-card, .bike-id-closing-panel) {
  border-radius: 0;
  box-shadow: none;
}

body.page-public-bike-id-marketing .bike-id-meta-grid,
body.page-public-bike-id-marketing .bike-id-feature-grid {
  gap: 0;
  border-block: 1px solid var(--brand-line);
}

body.page-public-bike-id-marketing .bike-id-meta-card,
body.page-public-bike-id-marketing .bike-id-feature-card {
  border: 0;
  background: transparent;
}

body.page-public-bike-id-marketing :is(.bike-id-meta-card, .bike-id-feature-card) + :is(.bike-id-meta-card, .bike-id-feature-card) {
  border-left: 1px solid var(--brand-line);
}

body.page-public-bike-id-marketing .bike-id-story-grid {
  gap: clamp(3rem, 7vw, 7rem);
}

body.page-public-bike-id-marketing .bike-id-process-card {
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-public-bike-id-marketing .bike-id-process-card .product-step {
  border-radius: 0;
  box-shadow: none;
}

body.page-public-bike-id-marketing .bike-id-demo-card {
  border: 0;
  border-top: 4px solid var(--brand-red);
  background: var(--brand-soft);
}

body.page-public-bike-id-marketing .bike-id-closing-panel {
  border: 0;
  border-block: 1px solid var(--brand-line);
  background: transparent;
}

/* Pro: deliberate campaign hero, editorial comparisons underneath. */
body.page-public-pro .pro-offer-page {
  max-width: var(--brand-max);
  padding: clamp(1.5rem, 3vw, 3rem) var(--brand-gutter) var(--brand-section);
  gap: var(--brand-section);
}

body.page-public-pro :is(.pro-offer-hero, .pro-offer-card, .pro-offer-band, .pro-ride-band, .pro-ride-scenario) {
  border-radius: 0;
  box-shadow: none;
}

body.page-public-pro .pro-offer-hero {
  padding: 0 0 clamp(3rem, 6vw, 5rem);
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  background: transparent;
}

body.page-public-pro .pro-offer-title {
  max-width: 13ch;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
}

body.page-public-pro .pro-offer-strip,
body.page-public-pro .pro-offer-grid,
body.page-public-pro .pro-ride-scenarios {
  gap: 0;
  border-block: 1px solid var(--brand-line);
}

body.page-public-pro :is(.pro-offer-strip-card, .pro-offer-card, .pro-ride-scenario) {
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-public-pro :is(.pro-offer-strip-card, .pro-offer-card, .pro-ride-scenario) + :is(.pro-offer-strip-card, .pro-offer-card, .pro-ride-scenario) {
  border-left: 1px solid var(--brand-line);
}

body.page-public-pro .pro-offer-band {
  border: 0;
  border-top: 4px solid var(--brand-red);
  background: var(--brand-soft);
}

body.page-public-pro .pro-ride-band {
  border: 0;
  background: var(--brand-ink);
}

body.page-public-pro .pro-ride-band :is(.pro-ride-title, h2, h3, strong) {
  color: #fff;
}

body.page-public-pro .pro-ride-band :is(p, li, .pro-offer-copy) {
  color: rgba(255,255,255,.72);
}

body.page-public-pro .pro-ride-band .btn-secondary {
  border-color: rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
}

/* Blog: styled entirely by blog.css's own editorial design language -
   deliberately not forced into this file's generic brand-page treatment. */

/* Account and dashboard: information remains grouped, but nested cards become open rows. */
body[class*="page-dashboard-"] .account-hero {
  max-width: 58rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--brand-line);
}

body[class*="page-dashboard-"] :is(.glass-card, .account-card, .account-row, .bike-dashboard-card) {
  border: 0;
  border-top: 1px solid var(--brand-line);
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}

body[class*="page-dashboard-"] .glass-card.p-6,
body[class*="page-dashboard-"] .glass-card.p-4 {
  padding-inline: 0;
}

body[class*="page-dashboard-"] :is(.rounded-2xl, .rounded-xl) {
  border-radius: var(--brand-radius) !important;
}

body[class*="page-dashboard-"] .glass-card.rounded-2xl {
  border-radius: 0 !important;
}

body[class*="page-dashboard-"] :is(.text-slate-100, .text-slate-200, .text-slate-300) {
  color: #303038;
}

body[class*="page-dashboard-"] .text-slate-400 {
  color: var(--brand-muted);
}

body[class*="page-dashboard-"] .account-list {
  gap: 0;
}

body[class*="page-dashboard-"] .account-row {
  padding: 1.5rem 0;
}

/* Ride keeps its map and emergency controls visually distinct, while removing decorative mini-cards. */
body.page-ride-index .ride-page {
  max-width: var(--brand-max);
  padding: clamp(1.5rem, 3vw, 3rem) var(--brand-gutter) var(--brand-section);
}

body.page-ride-index .ride-shell {
  gap: clamp(2rem, 5vw, 5rem);
}

body.page-ride-index .ride-hero {
  border-radius: var(--brand-radius);
  box-shadow: none;
}

body.page-ride-index .ride-hero .btn-secondary {
  border-color: rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
}

body.page-ride-index .ride-proof {
  gap: 0;
  border-block: 1px solid rgba(255,255,255,.18);
}

body.page-ride-index .ride-proof-card {
  padding: 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-ride-index .ride-proof-card + .ride-proof-card {
  border-left: 1px solid rgba(255,255,255,.18);
}

body.page-ride-index .ride-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border: 0;
  border-top: 4px solid var(--brand-red);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-ride-index .ride-row,
body.page-ride-index .ride-empty {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 820px) {
  body.page-public-faq .faq-card,
  body.page-activation-activate .activate-grid {
    grid-template-columns: 1fr;
  }

  body.page-public-pricing .pricing-strip-card + .pricing-strip-card,
  body.page-public-pricing .pricing-card + .pricing-card,
  body.page-public-how-it-works :is(.how-guide-step, .how-guide-tip) + :is(.how-guide-step, .how-guide-tip),
  body.page-public-bike-id-marketing :is(.bike-id-meta-card, .bike-id-feature-card) + :is(.bike-id-meta-card, .bike-id-feature-card),
  body.page-public-pro :is(.pro-offer-strip-card, .pro-offer-card, .pro-ride-scenario) + :is(.pro-offer-strip-card, .pro-offer-card, .pro-ride-scenario) {
    border-top: 1px solid var(--brand-line);
    border-left: 0;
  }

  body.page-products-index .category-card + .category-card {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  body.storefront-context :is(.page-title, .support-hero h1, .auth-card h1) {
    font-size: clamp(3rem, 15vw, 4.4rem);
  }

  body.page-public-pricing .pricing-title,
  body.page-public-how-it-works .how-guide-title,
  body.page-public-pro .pro-offer-title {
    font-size: clamp(3.1rem, 15vw, 4.5rem);
  }

  body.page-auth .auth-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

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