@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./assets/fonts/space-grotesk-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root {
  --ink: #070710;
  --ink-soft: #10101a;
  --ink-card: #151522;
  --paper: #f3f1eb;
  --paper-bright: #fbfaf7;
  --white: #fff;
  --muted: #797986;
  --line: rgba(8, 8, 17, 0.12);
  --line-light: rgba(255, 255, 255, 0.13);
  --blue: #3b67ff;
  --violet: #854bff;
  --pink: #fa4fb4;
  --green: #41d8a0;
  --gradient: linear-gradient(105deg, var(--blue) 0%, var(--violet) 52%, var(--pink) 100%);
  --gradient-soft: linear-gradient(105deg, rgba(59, 103, 255, 0.18), rgba(133, 75, 255, 0.13), rgba(250, 79, 180, 0.16));
  --display: "Space Grotesk", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 36px;
  --container: 1320px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

body.no-scroll {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--violet);
  color: #fff;
}

.announcement {
  position: relative;
  z-index: 80;
  overflow: hidden;
  height: 34px;
  background: var(--gradient);
  color: #fff;
  font: 600 10px/34px var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.announcement-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.announcement-track span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.announcement-track span::after {
  margin: 0 32px;
  content: "✦";
  opacity: 0.7;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(7, 7, 16, 0.82);
  color: #fff;
  backdrop-filter: blur(20px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background:
    radial-gradient(circle at 82% 84%, rgba(244, 73, 181, 0.92) 0%, rgba(190, 72, 224, 0.68) 28%, rgba(121, 78, 238, 0) 62%),
    linear-gradient(145deg, #436eff 0%, #7654ee 58%, #9d48dd 100%);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(17, 10, 45, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(99, 72, 255, 0.28);
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -0.06em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.desktop-nav a {
  padding: 10px 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease;
}

.desktop-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cart-button,
.menu-button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
}

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px 8px 15px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}

.cart-button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cart-button b {
  display: grid;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.72rem;
}

.menu-button {
  display: none;
  width: 42px;
  border-radius: 50%;
}

.menu-button span {
  display: block;
  width: 17px;
  height: 1px;
  margin: 5px auto;
  background: #fff;
  transition: transform 180ms ease;
}

.menu-button[aria-expanded="true"] span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  min-height: calc(100vh - 106px);
  padding: clamp(64px, 8vw, 120px) max(24px, calc((100vw - var(--container)) / 2));
  grid-template-columns: minmax(0, 0.94fr) minmax(430px, 0.76fr);
  align-items: center;
  gap: clamp(48px, 6vw, 100px);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 15%, rgba(74, 80, 255, 0.17), transparent 31%),
    linear-gradient(150deg, #070710 0%, #0b0b16 54%, #101022 100%);
  color: #fff;
}

.hero::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 48% at 18% 6%, rgba(96, 116, 255, 0.22), transparent 72%),
    radial-gradient(48% 44% at 88% 12%, rgba(226, 74, 196, 0.16), transparent 74%),
    radial-gradient(42% 40% at 62% 78%, rgba(64, 198, 255, 0.10), transparent 72%);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  content: "";
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.glow-one {
  top: 15%;
  left: -13%;
  width: 420px;
  height: 420px;
  background: rgba(54, 91, 255, 0.14);
}

.glow-two {
  right: -8%;
  bottom: 2%;
  width: 460px;
  height: 460px;
  background: rgba(247, 66, 178, 0.11);
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.58);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 28px;
  height: 1px;
  background: var(--gradient);
}

.eyebrow.dark {
  color: #6f6f7b;
}

.hero h1,
.section-intro h2,
.section-heading h2,
.app-copy h2,
.faq-intro h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(3.4rem, 6vw, 6.8rem);
  font-weight: 560;
  letter-spacing: -0.075em;
  line-height: 0.92;
}

h1 em,
h2 em {
  background: var(--gradient);
  background-clip: text;
  color: transparent;
  font-style: normal;
}

/* Negative headline tracking can leave the final glyph outside the painted
   gradient box. Reserve a few pixels so letters such as the final “f” in
   “Auf” remain complete without changing the visible line length. */
.hero h1 em {
  display: inline-block;
  margin-right: -.08em;
  padding-right: .08em;
}

.hero-lead {
  max-width: 660px;
  margin: 32px 0 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  min-height: 54px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 720;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 16px 34px rgba(96, 68, 255, 0.24);
}

.button-primary:hover {
  box-shadow: 0 20px 45px rgba(96, 68, 255, 0.4);
}

.button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.play-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 8px;
}

.hero-proof {
  display: flex;
  gap: clamp(24px, 4vw, 55px);
  margin-top: clamp(46px, 7vh, 72px);
}

.hero-proof div {
  position: relative;
  display: grid;
  gap: 3px;
}

.hero-proof div:not(:last-child)::after {
  position: absolute;
  top: 0;
  right: clamp(-27px, -2vw, -12px);
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.13);
  content: "";
}

.hero-proof strong {
  font-size: 1.25rem;
}

.hero-proof span {
  color: rgba(255, 255, 255, 0.45);
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-visual {
  min-height: min(67vh, 690px);
}

.hero-photo {
  position: absolute;
  inset: 0 5% 0 10%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 180px 180px 34px 34px;
  background: #161622;
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.55);
}

.hero-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(7, 7, 16, 0.75));
  content: "";
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% 45%;
}

.hero-product {
  position: absolute;
  top: 10%;
  left: -6%;
  width: 230px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: rgba(20, 20, 32, 0.74);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px);
  animation: float 6s ease-in-out infinite;
}

.hero-product .live-dot {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.56);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-product .live-dot::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(65, 216, 160, 0.12);
  content: "";
}

.hero-product img {
  width: 100%;
  height: 154px;
  margin: 2px 0;
  object-fit: contain;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, 0.5));
}

.hero-product div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.hero-product small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
}

.hero-product strong {
  font-size: 1rem;
}

.hero-note {
  position: absolute;
  right: -3%;
  bottom: 10%;
  display: flex;
  width: 230px;
  padding: 18px;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(10, 10, 20, 0.68);
  backdrop-filter: blur(16px);
}

.hero-note > span {
  color: var(--pink);
  font: 600 10px/1 var(--mono);
}

.hero-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.75rem;
  line-height: 1.5;
}

.hero-note strong {
  color: #fff;
}

.scroll-cue {
  position: absolute;
  right: max(24px, calc((100vw - var(--container)) / 2));
  bottom: 27px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.38);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-cue span:first-child {
  position: relative;
  width: 34px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.scroll-cue span:first-child::after {
  position: absolute;
  inset: 0;
  background: var(--gradient);
  content: "";
  animation: lineRun 2.4s ease-in-out infinite;
}

.proof-strip {
  display: grid;
  max-width: var(--container);
  margin: 0 auto;
  padding: 34px 24px;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}

.proof-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  border-right: 1px solid var(--line);
}

.proof-item:last-child {
  border-right: 0;
}

.proof-icon {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--violet);
}

.proof-item div {
  display: grid;
  gap: 2px;
}

.proof-item strong {
  font-size: 0.88rem;
}

.proof-item small {
  color: var(--muted);
  font-size: 0.7rem;
}

.section-dark {
  background: var(--ink);
  color: #fff;
}

.experience,
.config-section,
.app-section {
  position: relative;
  overflow: hidden;
}

.experience {
  padding: clamp(90px, 10vw, 150px) max(24px, calc((100vw - var(--container)) / 2));
}

.experience::before,
.app-section::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(67, 88, 255, 0.14), transparent 32%), radial-gradient(circle at 88% 72%, rgba(246, 68, 183, 0.11), transparent 30%);
  content: "";
  pointer-events: none;
}

.section-intro {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-bottom: 58px;
}

.section-intro h2,
.section-heading h2,
.app-copy h2,
.faq-intro h2,
.final-cta h2 {
  font-size: clamp(2.8rem, 5vw, 5.5rem);
}

.section-intro > p:last-child {
  max-width: 660px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.06rem;
  line-height: 1.7;
}

.compare-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(72vh, 780px);
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  background: #13131c;
  cursor: ew-resize;
  user-select: none;
}

.compare-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.compare-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 66%;
}

.compare-before {
  z-index: 2;
  width: 100%;
  clip-path: inset(0 48% 0 0);
  will-change: clip-path;
}

.compare-before img {
  width: 100%;
}

.compare-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 7, 16, 0.44), transparent 45%);
  content: "";
}

.compare-label {
  position: absolute;
  bottom: 30px;
  z-index: 3;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(8, 8, 15, 0.55);
  color: #fff;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.compare-label.left {
  left: 30px;
}

.compare-label.right {
  right: 30px;
}

.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 52%;
  z-index: 4;
  width: 1px;
  pointer-events: none;
}

.compare-line span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 6px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
}

#compare-range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.experience-benefits {
  position: relative;
  z-index: 2;
  display: grid;
  margin-top: 34px;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line-light);
}

.experience-benefits article {
  padding: 28px;
  background: var(--ink-soft);
}

.experience-benefits article > span,
.card-num {
  color: var(--pink);
  font: 600 10px/1 var(--mono);
}

.experience-benefits h3 {
  margin: 18px 0 8px;
  font-size: 1.06rem;
}

.experience-benefits p {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.86rem;
  line-height: 1.6;
}

.experience-cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  margin-top: 26px;
}

.experience-cta p {
  margin: 0;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c3a8ff;
  font-weight: 650;
  white-space: nowrap;
  transition: gap 200ms ease, color 200ms ease;
}

.text-link:hover {
  gap: 10px;
  color: #fff;
}

.bike-section,
.system-section,
.install-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(90px, 11vw, 160px) 24px;
}

.section-heading {
  display: grid;
  margin-bottom: 58px;
  grid-template-columns: 1fr minmax(280px, 440px);
  align-items: end;
  gap: 60px;
}

.section-heading > p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.bike-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
/* 3 cards across on top row, 2 wider cards on the second row (balanced). */
.bike-card { grid-column: span 2; }
.bike-card:nth-child(4),
.bike-card-wide { grid-column: span 3; }

.bike-card {
  position: relative;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: #15151c;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.bike-card:nth-child(4),
.bike-card-wide {
  min-height: 400px;
}

.bike-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 500ms ease;
}

.bike-card-wide img {
  object-position: center 57%;
}

.bike-card:hover img {
  filter: saturate(1.16);
  transform: scale(1.055);
}

.bike-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 12, 0.94), transparent 60%);
}

.bike-index {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  font: 500 9px/1 var(--mono);
  backdrop-filter: blur(12px);
}

.bike-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  padding: 24px;
}

.bike-copy small {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.48);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bike-copy strong {
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}

.bike-copy strong em {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78em;
  font-style: normal;
  font-weight: 500;
}

.bike-copy > span {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.78rem;
  opacity: 0;
  transition: max-height 250ms ease, margin 250ms ease, opacity 250ms ease;
}

.bike-card:hover .bike-copy > span {
  max-height: 24px;
  margin-top: 13px;
  opacity: 1;
}

.config-section {
  padding: clamp(90px, 10vw, 150px) max(24px, calc((100vw - var(--container)) / 2));
  background: #090912;
  color: #fff;
}

.config-section::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 77% 36%, rgba(103, 67, 255, 0.14), transparent 34%);
  content: "";
}

.config-bg-word {
  position: absolute;
  top: 35px;
  right: -50px;
  color: rgba(255, 255, 255, 0.018);
  font-size: clamp(7rem, 15vw, 15rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
  white-space: nowrap;
}

.configurator {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.74fr);
  gap: 18px;
  align-items: start;
}

.config-controls,
.config-result {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  background: #11111b;
}

.config-controls {
  padding: clamp(22px, 3vw, 42px);
}

.config-progress {
  display: flex;
  height: 3px;
  margin-bottom: 32px;
  gap: 5px;
}

.config-progress span {
  flex: 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 200ms ease;
}

.config-progress span.active {
  background: var(--gradient);
}

.choice-group {
  min-width: 0;
  margin: 0;
  padding: 27px 0;
  border: 0;
  border-bottom: 1px solid var(--line-light);
}

.choice-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.choice-group.is-hidden {
  display: none;
}

.choice-group legend {
  width: 100%;
  margin-bottom: 15px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.choice-group legend span {
  margin-right: 11px;
  color: var(--pink);
  font: 600 9px/1 var(--mono);
}

.choice-grid {
  display: grid;
  gap: 8px;
}

.choice-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.choice-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.choice-grid-bikes {
  grid-template-columns: repeat(5, 1fr);
}

.choice {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 76px;
  padding: 15px;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.choice:hover {
  border-color: rgba(130, 83, 255, 0.65);
  transform: translateY(-1px);
}

.choice.active {
  border-color: rgba(121, 77, 255, 0.85);
  background: linear-gradient(135deg, rgba(59, 103, 255, 0.14), rgba(133, 75, 255, 0.16), rgba(250, 79, 180, 0.09));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 12px 30px rgba(0, 0, 0, 0.13);
  color: #fff;
}

.choice strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
}

.choice small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.62rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.choice b {
  position: absolute;
  top: 9px;
  right: 9px;
  color: var(--pink);
  font: 500 8px/1 var(--mono);
}

.choice-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font: 600 7px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.choice-image {
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
}

.choice-image img {
  width: 38px;
  height: 45px;
  grid-row: 1 / 3;
  object-fit: contain;
}

.config-hint {
  margin: 11px 0 0;
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.7rem;
  line-height: 1.5;
}

.config-result {
  position: sticky;
  top: 96px;
  overflow: hidden;
}

.result-topline {
  display: flex;
  padding: 20px 23px 0;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.45);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
}

.stock i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(65, 216, 160, 0.09);
}

.result-image-stage {
  position: relative;
  display: grid;
  height: 330px;
  place-items: center;
  overflow: hidden;
}

.result-image-stage::before {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--gradient);
  filter: blur(65px);
  opacity: 0.22;
  content: "";
}

.result-image-stage img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 91%;
  object-fit: contain;
  filter: drop-shadow(0 25px 30px rgba(0, 0, 0, 0.5));
  transition: opacity 160ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.result-image-stage img.swapping {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

.result-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.orbit-one {
  width: 260px;
  height: 260px;
}

.orbit-two {
  width: 350px;
  height: 350px;
}

.result-copy {
  padding: 0 28px 24px;
}

.result-copy > small {
  color: var(--pink);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.result-copy h3 {
  margin: 9px 0 9px;
  font-size: 1.65rem;
  letter-spacing: -0.05em;
}

.result-copy > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  line-height: 1.55;
}

.result-copy ul {
  display: grid;
  margin: 16px 0 0;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
}

.result-copy li {
  position: relative;
  padding-left: 17px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.68rem;
}

.result-copy li::before {
  position: absolute;
  left: 0;
  color: var(--green);
  content: "✓";
}

.result-buy {
  padding: 22px 28px;
  border-top: 1px solid var(--line-light);
  background: rgba(255, 255, 255, 0.025);
}

.result-buy > div {
  display: grid;
  margin-bottom: 16px;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.result-buy > div small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.68rem;
}

.result-buy > div strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 1.7rem;
  letter-spacing: -0.05em;
}

.result-buy > div span {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.6rem;
}

.button-wide {
  width: 100%;
}

.buy-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.result-trust {
  display: flex;
  padding: 15px 20px;
  justify-content: center;
  gap: 15px;
  border-top: 1px solid var(--line-light);
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.57rem;
}

.system-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 14px;
}

.system-card {
  position: relative;
  min-height: 600px;
  padding: 30px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.system-card > div {
  position: relative;
  z-index: 3;
}

.system-card h3 {
  margin: 14px 0 10px;
  font-size: 2rem;
  letter-spacing: -0.06em;
}

.system-card p:not(.eyebrow) {
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.84rem;
  line-height: 1.6;
}

.system-card a {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.76rem;
  font-weight: 700;
}

.system-card .eyebrow {
  margin: 24px 0 0;
}

.system-card-main {
  color: #fff;
  background: #0b0b14;
}

.system-card-main::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 7, 16, 0.05) 30%, rgba(7, 7, 16, 0.95) 88%);
  content: "";
}

.system-card-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-card-main > div {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
}

.system-card-app,
.system-card-watch {
  background: #12121c;
  color: #fff;
}

.system-card-app {
  background: linear-gradient(155deg, #111120, #1b1230 75%, #261338);
}

.system-card-app img {
  position: absolute;
  right: -12%;
  bottom: -25%;
  width: 100%;
  max-height: 75%;
  object-fit: contain;
  object-position: right bottom;
  transform: rotate(7deg);
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.45));
}

.system-card-watch {
  background: linear-gradient(155deg, #11111b, #0f1d34);
}

.system-card-watch img {
  position: absolute;
  right: -5%;
  bottom: -3%;
  width: 104%;
  max-height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.48));
}

.app-section {
  display: grid;
  min-height: 880px;
  padding: clamp(90px, 10vw, 150px) max(24px, calc((100vw - var(--container)) / 2));
  grid-template-columns: 1fr 0.84fr;
  align-items: center;
  gap: 80px;
}

.app-visual,
.app-copy {
  position: relative;
  z-index: 2;
}

.app-visual {
  min-height: 700px;
}

.phone {
  position: absolute;
  width: 47%;
  max-height: 660px;
  object-fit: contain;
  filter: drop-shadow(0 35px 40px rgba(0, 0, 0, 0.55));
}

.phone-back {
  top: 7%;
  left: 8%;
  opacity: 0.6;
  transform: rotate(-8deg) translateY(12px);
}

.phone-front {
  top: 0;
  right: 12%;
  z-index: 2;
  transform: rotate(5deg);
}

.phone-glow {
  position: absolute;
  top: 22%;
  left: 22%;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: var(--gradient);
  filter: blur(110px);
  opacity: 0.28;
}

.app-lead {
  margin: 28px 0 34px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
}

.check-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 18px;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
}

.check-list li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(101, 92, 255, 0.5);
  border-radius: 50%;
  background: rgba(101, 92, 255, 0.1);
  color: var(--green);
  font-size: 0.76rem;
}

.check-list strong {
  font-size: 0.9rem;
}

.check-list p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.75rem;
  line-height: 1.5;
}

.store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.store-button {
  display: flex;
  min-width: 170px;
  padding: 10px 16px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.store-button > span {
  font-size: 1.3rem;
}

.store-button small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.58rem;
  line-height: 1.1;
}

.store-button strong {
  color: #fff;
  font-size: 0.9rem;
}

.store-muted {
  opacity: 0.68;
}

.install-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.install-step {
  position: relative;
  min-height: 290px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-bright);
}

.install-step > span {
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--violet);
  font: 600 10px/1 var(--mono);
}

.step-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 60px;
  place-items: center;
  border-radius: 16px;
  background: var(--gradient-soft);
  color: var(--violet);
  font-size: 1.25rem;
}

.install-step h3 {
  margin: 0 0 9px;
  font-size: 1.18rem;
}

.install-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.guide-links {
  display: flex;
  margin-top: 14px;
  padding: 20px 24px;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #e9e7e1;
  font-size: 0.74rem;
}

.guide-links span {
  margin-right: auto;
  color: var(--muted);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.guide-links a {
  font-weight: 700;
}

.faq-section {
  display: grid;
  padding: clamp(90px, 10vw, 150px) max(24px, calc((100vw - var(--container)) / 2));
  grid-template-columns: 0.74fr 1fr;
  gap: clamp(50px, 9vw, 130px);
  background: var(--ink);
  color: #fff;
}

.faq-intro {
  position: sticky;
  top: 125px;
  align-self: start;
}

.faq-intro > p:nth-of-type(2) {
  max-width: 420px;
  margin: 25px 0;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.7;
}

.faq-intro > a {
  font-size: 0.78rem;
  font-weight: 700;
}

.faq-list {
  border-top: 1px solid var(--line-light);
}

.faq-list details {
  border-bottom: 1px solid var(--line-light);
}

.faq-list summary {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 650;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 180ms ease;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  margin: -7px 42px 25px 0;
  color: rgba(255, 255, 255, 0.47);
  font-size: 0.85rem;
  line-height: 1.72;
}

.faq-list details p a {
  color: #fff;
  text-decoration: underline;
}

.final-cta {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  color: #fff;
}

.final-cta-image,
.final-cta-overlay {
  position: absolute;
  inset: 0;
}

.final-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 63%;
  filter: saturate(0.8);
}

.final-cta-overlay {
  background: linear-gradient(90deg, rgba(7, 7, 16, 0.95) 0%, rgba(7, 7, 16, 0.72) 46%, rgba(7, 7, 16, 0.18)), linear-gradient(to top, rgba(7, 7, 16, 0.8), transparent 50%);
}

.final-cta-copy {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px 24px;
}

.final-cta-copy p:not(.eyebrow) {
  max-width: 540px;
  margin: 26px 0 32px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.05rem;
  line-height: 1.65;
}

.footer {
  padding: 70px max(24px, calc((100vw - var(--container)) / 2)) 25px;
  background: #06060c;
  color: #fff;
}

.footer-main {
  display: grid;
  padding-bottom: 60px;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 70px;
  border-bottom: 1px solid var(--line-light);
}

.footer-brand {
  margin-bottom: 22px;
}

.footer-main > div:first-child p {
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.6;
}

.footer-main > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-main strong {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.38);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-main > div:not(:first-child) a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8rem;
}

.footer-main a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  padding-top: 24px;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255, 255, 255, 0.27);
  font: 500 8px/1.5 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3, 3, 8, 0.72);
  backdrop-filter: blur(6px);
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  display: flex;
  width: min(470px, 100%);
  height: 100dvh;
  padding: 25px;
  overflow: hidden;
  flex-direction: column;
  background: var(--paper-bright);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.3);
  transform: translateX(105%);
  transition: transform 320ms cubic-bezier(0.22, 0.8, 0.25, 1);
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer[aria-hidden="true"] {
  display: none;
}

.cart-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.cart-head small {
  color: var(--violet);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cart-head h2 {
  margin: 6px 0 0;
  font-size: 2rem;
  letter-spacing: -0.06em;
}

.cart-head button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
}

.cart-progress {
  margin: 24px 0 15px;
}

.cart-progress span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--gradient);
}

.cart-progress p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.cart-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cart-items {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 10px;
}

.cart-drawer.has-items .cart-items {
  flex: 0 1 auto;
}

.cart-line {
  display: grid;
  min-height: 112px;
  padding: 13px;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.cart-line > img {
  width: 86px;
  height: 86px;
  border-radius: 11px;
  background: #f0eee8;
  object-fit: contain;
}

.cart-line-copy {
  display: grid;
  gap: 4px;
}

.cart-line-copy strong {
  font-size: 0.8rem;
}

.cart-line-copy small {
  color: var(--muted);
  font-size: 0.61rem;
  line-height: 1.4;
}

.cart-qty {
  display: flex;
  width: fit-content;
  margin-top: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.cart-qty button {
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cart-qty span {
  min-width: 20px;
  text-align: center;
  font-size: 0.68rem;
}

.cart-line-price {
  display: grid;
  align-self: stretch;
  justify-items: end;
  align-content: space-between;
}

.cart-line-price strong {
  font-size: 0.76rem;
}

.cart-line-price button {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.6rem;
  text-decoration: underline;
}

.cart-empty {
  display: grid;
  margin: 14px 0 2px;
  place-items: center;
  text-align: center;
}

.cart-empty > div {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 18px;
  background: var(--gradient-soft);
  color: var(--violet);
  font-size: 1.5rem;
}

.cart-empty p {
  max-width: 280px;
  margin: 6px auto 14px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.cart-empty .button {
  min-height: 47px;
  font-size: 0.78rem;
}

.cart-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0 -25px -25px;
  padding: 18px 25px 25px;
  border-top: 1px solid var(--line);
  background: rgba(251, 250, 247, .98);
  box-shadow: 0 -18px 34px rgba(22, 18, 34, .07);
}

.cart-checkout:disabled,
#cart-checkout:disabled {
  cursor: not-allowed;
  filter: saturate(.25);
  opacity: .46;
}

.cart-total {
  display: flex;
  margin-bottom: 15px;
  align-items: end;
  justify-content: space-between;
}

.cart-total > span {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
}

.cart-total small {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 400;
}

.cart-total > strong {
  font-size: 1.35rem;
  letter-spacing: -0.04em;
}

/* Payment-brand chips — white lockups so brand colours read on dark + light. */
.pay-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cart-pay { margin-bottom: 13px; }
.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(10, 12, 20, 0.1);
  box-shadow: 0 1px 2px rgba(10, 12, 20, 0.14);
  color: #0a0c14;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pay-badge.pay-visa { color: #1434cb; font-size: 0.72rem; letter-spacing: 0.02em; }
.pay-badge.pay-paypal { gap: 0; font-style: italic; font-size: 0.7rem; }
.pay-badge.pay-paypal b:first-child { color: #003087; }
.pay-badge.pay-paypal b:last-child { color: #009cde; }
.pay-badge.pay-mc { gap: 0; }
.pay-badge.pay-mc i { width: 13px; height: 13px; border-radius: 50%; }
.pay-badge.pay-mc i:first-child { background: #eb001b; }
.pay-badge.pay-mc i + i { margin-left: -5px; background: #f79e1b; }
.pay-badge.pay-apple { color: #000; font-weight: 600; }
.pay-badge.pay-gpay { color: #5f6368; font-weight: 600; }
.pay-ic { display: block; width: 14px; height: 14px; }
.pay-ic-g { width: 16px; height: 16px; }

.cart-legal {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.54rem;
  line-height: 1.55;
}

.cart-legal a {
  color: var(--ink);
  text-decoration: underline;
}

.mobile-buy-bar {
  display: none;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: flex;
  min-width: 270px;
  padding: 15px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(12, 12, 21, 0.92);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(16px);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(65, 216, 160, 0.12);
  color: var(--green);
}

.toast p {
  display: grid;
  margin: 0;
  gap: 3px;
  font-size: 0.76rem;
}

.toast small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.61rem;
}

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 750ms ease, transform 750ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Shared legal pages copied from the production site. */
.legal-page {
  background: var(--paper);
}

.legal-page .site-header,
.legal-page .shop-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  padding: 14px max(20px, calc((100vw - 1180px) / 2));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ink);
  color: #fff;
}

.legal-page .main-nav {
  display: flex;
  gap: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}

.legal-lang-switch {
  justify-self: end;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
}

.legal-main {
  min-height: 100vh;
  padding: 60px 24px 100px;
}

.legal-shell {
  max-width: 940px;
  margin: 0 auto;
}

.legal-back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 0.78rem;
}

.legal-hero {
  padding: 48px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--ink);
  color: #fff;
}

.legal-hero .section-kicker {
  color: var(--pink);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.07em;
}

.legal-hero > p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}

.legal-card {
  padding: 45px 48px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: #fff;
}

.legal-card section {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.legal-card section:last-child {
  border-bottom: 0;
}

.legal-card h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.legal-card h3 {
  margin: 24px 0 8px;
  font-size: 0.95rem;
}

.legal-card p,
.legal-card li {
  color: #5e5e69;
  font-size: 0.87rem;
  line-height: 1.72;
}

.legal-card a {
  color: var(--violet);
  text-decoration: underline;
}

.legal-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.legal-card th,
.legal-card td {
  padding: 12px;
  border: 1px solid var(--line);
  text-align: left;
}

.legal-footer-links {
  display: flex;
  margin-top: 22px;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-size: 0.73rem;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes lineRun {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-menu {
    position: absolute;
    top: 100%;
    right: 18px;
    left: 18px;
    display: grid;
    max-height: 0;
    padding: 0 22px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 20px;
    background: rgba(12, 12, 22, 0.97);
    opacity: 0;
    transition: max-height 250ms ease, opacity 180ms ease, padding 250ms ease, border-color 180ms ease;
  }

  .mobile-menu.open {
    max-height: 380px;
    padding: 14px 22px;
    border-color: var(--line-light);
    opacity: 1;
  }

  .mobile-menu a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-light);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
  }

  .mobile-menu a:last-child {
    border-bottom: 0;
  }

  .hero {
    grid-template-columns: 1fr 0.8fr;
  }

  .hero-product {
    left: -15%;
  }

  .hero-note {
    right: -10%;
  }

  .choice-grid-bikes {
    grid-template-columns: repeat(3, 1fr);
  }

  .configurator {
    grid-template-columns: 1fr 400px;
  }

  .system-grid {
    grid-template-columns: 1fr 1fr;
  }

  .system-card-main {
    grid-row: span 2;
  }

  .system-card-app,
  .system-card-watch {
    min-height: 420px;
  }

  .system-card-watch img {
    width: 75%;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: 80px;
    padding-bottom: 110px;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-visual {
    min-height: 690px;
  }

  .hero-photo {
    inset: 0 8% 0 22%;
  }

  .hero-product {
    left: 5%;
  }

  .hero-note {
    right: 2%;
  }

  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-item:nth-child(2) {
    border-right: 0;
  }

  .proof-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .section-heading > p {
    max-width: 580px;
  }

  .bike-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bike-card,
  .bike-card:nth-child(4) {
    grid-column: auto;
  }

  .bike-card-wide {
    grid-column: 1 / -1;
  }

  .configurator {
    grid-template-columns: 1fr;
  }

  .config-result {
    position: relative;
    top: 0;
  }

  .app-section {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .app-copy {
    grid-row: 1;
  }

  .app-visual {
    min-height: 720px;
  }

  .faq-section {
    grid-template-columns: 1fr;
  }

  .faq-intro {
    position: relative;
    top: 0;
  }

  .footer-main {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-main > div:last-child {
    grid-column: 2;
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 74px;
  }

  body {
    padding-bottom: 78px;
  }

  .announcement {
    height: 30px;
    line-height: 30px;
  }

  .site-header {
    min-height: 62px;
    padding: 10px 16px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .cart-button {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .cart-button span {
    display: none;
  }

  .cart-button b {
    position: absolute;
    top: 5px;
    right: 52px;
    min-width: 17px;
    height: 17px;
    border: 2px solid var(--ink);
    font-size: 0.55rem;
  }

  .hero {
    padding: 70px 18px 85px;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 15vw, 4.6rem);
  }

  .hero-lead {
    font-size: 0.96rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-proof {
    justify-content: space-between;
    gap: 14px;
  }

  .hero-proof div:not(:last-child)::after {
    display: none;
  }

  .hero-visual {
    min-height: 580px;
  }

  .hero-photo {
    inset: 0 0 0 12%;
    border-radius: 130px 130px 28px 28px;
  }

  .hero-product {
    top: 6%;
    left: 0;
    width: 175px;
  }

  .hero-product img {
    height: 110px;
  }

  .hero-product div {
    display: grid;
  }

  .hero-note {
    right: -4px;
    bottom: 6%;
    width: 205px;
  }

  .scroll-cue {
    display: none;
  }

  .proof-strip {
    padding: 20px 16px;
  }

  .proof-item {
    padding: 15px 4px;
    justify-content: flex-start;
  }

  .proof-icon {
    width: 31px;
    height: 31px;
  }

  .proof-item strong {
    font-size: 0.7rem;
  }

  .proof-item small {
    font-size: 0.58rem;
  }

  .experience,
  .config-section,
  .app-section,
  .faq-section {
    padding: 80px 18px;
  }

  .section-intro {
    margin-bottom: 38px;
  }

  .section-intro h2,
  .section-heading h2,
  .app-copy h2,
  .faq-intro h2,
  .final-cta h2 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .compare-shell {
    height: 530px;
    min-height: 0;
    border-radius: 22px;
  }

  .compare-image img {
    object-position: 50% 67%;
  }

  .compare-line span {
    width: 50px;
    height: 50px;
    border-width: 4px;
  }

  .compare-label {
    bottom: 18px;
  }

  .compare-label.left { left: 18px; }
  .compare-label.right { right: 18px; }

  .experience-benefits {
    grid-template-columns: 1fr;
  }

  .bike-section,
  .system-section,
  .install-section {
    padding: 80px 18px;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .bike-grid {
    grid-template-columns: 1fr;
  }

  .bike-card,
  .bike-card:nth-child(4),
  .bike-card-wide {
    min-height: 390px;
    grid-column: auto;
  }

  .bike-copy > span {
    max-height: 24px;
    margin-top: 13px;
    opacity: 1;
  }

  .config-controls {
    padding: 20px 15px;
  }

  .choice-grid-3,
  .choice-grid-bikes {
    grid-template-columns: 1fr 1fr;
  }

  #intent-options .choice:first-child {
    grid-column: 1 / -1;
  }

  .choice-grid-2 {
    grid-template-columns: 1fr;
  }

  #button-options {
    grid-template-columns: 1fr;
  }

  .config-result {
    border-radius: 26px;
  }

  .result-image-stage {
    height: 300px;
  }

  .result-copy ul {
    grid-template-columns: 1fr;
  }

  .result-trust {
    align-items: center;
    flex-direction: column;
    gap: 5px;
  }

  .system-grid,
  .install-steps {
    grid-template-columns: 1fr;
  }

  .system-card,
  .system-card-main,
  .system-card-app,
  .system-card-watch {
    min-height: 520px;
    grid-row: auto;
  }

  .system-card-app img {
    width: 82%;
  }

  .system-card-watch img {
    width: 75%;
  }

  .app-visual {
    min-height: 500px;
  }

  .phone {
    width: 56%;
    max-height: 500px;
  }

  .phone-back { left: 0; }
  .phone-front { right: 0; }

  .guide-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .guide-links span {
    margin: 0 0 4px;
  }

  .final-cta {
    min-height: 650px;
  }

  .final-cta-overlay {
    background: linear-gradient(to top, rgba(7, 7, 16, 0.96) 0%, rgba(7, 7, 16, 0.6) 70%, rgba(7, 7, 16, 0.18));
  }

  .final-cta-copy {
    padding: 200px 18px 80px;
  }

  .footer {
    padding: 60px 18px 30px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 45px 25px;
  }

  .footer-main > div:first-child {
    grid-column: 1 / -1;
  }

  .footer-main > div:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-buy-bar {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 60;
    display: flex;
    min-height: 66px;
    padding: 9px 9px 9px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;
    background: rgba(10, 10, 18, 0.92);
    color: #fff;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(18px);
    transition: transform 250ms ease, opacity 250ms ease;
  }

  .mobile-buy-bar.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(90px);
  }

  .mobile-buy-bar > div {
    display: grid;
    min-width: 0;
  }

  .mobile-buy-bar small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-buy-bar strong {
    font-size: 0.9rem;
  }

  .mobile-buy-bar .button {
    min-height: 47px;
    padding: 0 15px;
    gap: 8px;
    font-size: 0.7rem;
  }

  .toast {
    right: 10px;
    bottom: 88px;
    left: 10px;
  }

  .legal-page .shop-header {
    grid-template-columns: 1fr auto;
  }

  .legal-page .main-nav {
    display: none;
  }

  .legal-hero,
  .legal-card {
    padding: 28px 22px;
  }

  .legal-card table {
    display: block;
    overflow-x: auto;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== Combined Motech rebuild ===== */
.locale-button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  color: var(--ink); font: 600 10px/1 var(--mono); letter-spacing: .04em;
}
.locale-button span { color: var(--blue); font-size: 16px; }
.locale-menu {
  position: absolute; top: calc(100% + 10px); right: 110px; z-index: 120; width: min(420px, calc(100vw - 32px));
  max-height: 70vh; overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(7,7,16,.2);
}
.locale-menu > span { display: block; margin: 6px 0 9px; color: var(--muted); font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.locale-options { display: flex; flex-wrap: wrap; gap: 6px; }
.locale-options button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-bright); cursor: pointer; font-size: 12px; }
.locale-options button.active { border-color: var(--violet); background: #eee8ff; color: #5522bb; }
.locale-currency-note { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.55; }

.hero-from-price {
  position: relative;
  display: grid;
  min-width: 112px;
  min-height: 54px;
  padding: 7px 6px 7px 19px;
  align-content: center;
  align-self: stretch;
  gap: 5px;
  color: rgba(255,255,255,.52);
  font: 600 8px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: color .2s ease,transform .2s ease;
}
.hero-from-price::before { position: absolute; top: 7px; bottom: 7px; left: 0; width: 1px; background: linear-gradient(180deg,transparent,rgba(255,255,255,.34),transparent); content: ""; }
.hero-from-price strong { color: #fff; font: 700 16px/1 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.hero-from-price:hover { color: rgba(255,255,255,.82); transform: translateX(2px); }
.hero-commerce { max-width: 660px; margin-top: 34px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(7,7,16,.52); backdrop-filter: blur(14px); }
.hero-commerce-points { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.hero-commerce-points span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 650; }
.hero-commerce-points b { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #c8afff; font: 600 8px/1 var(--mono); }
.hero-commerce .pay-row { margin-top: 14px; }

.experience { min-height: 155vh; }
@media (min-width: 981px) {
  .experience > .section-intro, .experience > .compare-shell, .experience > .experience-benefits { position: relative; z-index: 2; }
  .compare-shell { width: min(100%, 1180px); aspect-ratio: 16 / 9; margin-inline: auto; }
}

.stealth-editorial { padding: clamp(90px,10vw,145px) max(24px,calc((100vw - var(--container))/2)); }
.stealth-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); gap: 24px 70px; align-items: end; }
.stealth-heading .eyebrow { grid-column: 1 / -1; }
.stealth-heading h2 { margin: 0; font-size: clamp(2.7rem,5.7vw,6rem); line-height: .96; letter-spacing: -.06em; }
.stealth-heading h2 em { color: #ad8bff; font-weight: 400; }
.stealth-heading > p:last-child { color: rgba(255,255,255,.54); line-height: 1.7; }
.stealth-rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 70px; border-top: 1px solid var(--line-light); }
.stealth-rail::before { position: absolute; top: -1px; left: 0; width: 25%; height: 2px; background: var(--gradient); content: ""; }
.stealth-rail article { position: relative; min-height: 300px; padding: 28px 24px; border-right: 1px solid var(--line-light); transition: background 300ms ease; }
.stealth-rail article:last-child { border-right: 0; }
.stealth-rail article::before { position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--gradient); transition: width 420ms cubic-bezier(.2,.8,.2,1); content: ""; }
.stealth-rail article:hover { background: rgba(255,255,255,.02); }
.stealth-rail article:hover::before { width: 100%; }
.stealth-rail article > span, .relay-examples article > span { color: #a985ff; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stealth-symbol { display: grid; width: 50px; height: 50px; margin: 28px 0; place-items: center; border-radius: 14px; border: 1px solid rgba(173,139,255,.28); background: var(--gradient-soft); color: #c3a8ff; }
.stealth-symbol svg { width: 24px; height: 24px; }
.stealth-rail h3 { margin: 0 0 12px; font-size: 1.25rem; }
.stealth-rail p { margin: 0; color: rgba(255,255,255,.52); line-height: 1.65; }

.bike-gallery { margin-top: 70px; padding-top: 42px; border-top: 1px solid var(--line); }
.bike-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.bike-gallery-head h3 { margin: 8px 0 0; font-size: clamp(1.8rem,3vw,3rem); }
.bike-gallery-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.bike-gallery-tabs button { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; font: 600 10px/1 var(--mono); }
.bike-gallery-tabs button.active { border-color: var(--violet); background: var(--ink); color: #fff; }
.bike-gallery-stage { display: grid; gap: 10px; margin-top: 22px; }
#bike-gallery-main { position: relative; aspect-ratio: 16/9; margin: 0; overflow: hidden; border-radius: 28px; background: #111; }
#bike-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; gap: 20px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(7,7,16,.68); color: #fff; backdrop-filter: blur(14px); }
.gallery-caption small { color: #c2aaff; font: 600 9px/1 var(--mono); text-transform: uppercase; }
.bike-gallery-thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.bike-gallery-thumbs button { aspect-ratio: 4/3; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 13px; background: #111; cursor: pointer; }
.bike-gallery-thumbs button.active { border-color: var(--violet); }
.bike-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: repeating-linear-gradient(-45deg,#151522 0 10px,#11111a 10px 20px); color: rgba(255,255,255,.48); font: 600 10px/1 var(--mono); }

.pricing-section, .relay-section, .buttons-section { padding: clamp(90px,10vw,145px) max(24px,calc((100vw - var(--container))/2)); background: var(--paper); }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 29px; border: 1px solid var(--line); border-radius: 26px; background: #fff; }
.price-card-featured { transform: translateY(-12px); border-color: rgba(133,75,255,.44); box-shadow: 0 25px 65px rgba(40,20,90,.13); }
.price-ribbon { position: absolute; top: 15px; right: 15px; padding: 6px 9px; border-radius: 999px; background: var(--gradient); color: #fff; font: 600 7px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.price-tag { color: var(--violet); font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.price-card h3 { min-height: 56px; margin: 12px 0; font-size: 1.2rem; }
.price-value { display: flex; align-items: end; gap: 8px; margin: 14px 0 24px; }
.price-value small { color: var(--muted); }
.price-value strong { font-size: clamp(2rem,3.5vw,3.4rem); letter-spacing: -.06em; }
.price-compare { margin: 5px 0 -10px; color: var(--muted); font-size: 12px; text-decoration: line-through; }
.price-card ul { display: grid; margin: 0 0 26px; padding: 0; gap: 10px; list-style: none; }
.price-card li { padding-left: 20px; color: #555562; font-size: 13px; line-height: 1.45; }
.price-card li::before { margin-left: -20px; margin-right: 10px; color: var(--violet); content: "✓"; }
.price-card .button { margin-top: auto; }
.pricing-note { margin: 20px 0 0; color: var(--muted); text-align: center; font: 500 10px/1.5 var(--mono); }

.configurator { grid-template-columns: minmax(0,1.24fr) minmax(370px,.76fr); }
.result-image-stage { height: 370px; }
.result-image-stage img { width: 90%; height: 100%; transform: scale(1.08); }
.choice.active strong { color: #fff !important; }
.choice.active small { color: rgba(255,255,255,.68) !important; }

.device-frame { position: absolute; display: block; width: 47%; padding: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 48px; background: linear-gradient(145deg,#363843,#090a10 48%,#010207); box-shadow: inset 0 0 0 2px #05060b,0 34px 55px rgba(0,0,0,.48); }
.device-frame i { position: absolute; top: 14px; left: 50%; z-index: 4; width: 25%; height: 18px; border-radius: 999px; background: #020308; transform: translateX(-50%); }
.device-frame .phone { position: static; width: 100%; max-height: none; border-radius: 40px; object-fit: cover; filter: none; }

.watch-siri { display: grid; grid-template-columns: .8fr 1.1fr; min-height: 800px; align-items: center; gap: 90px; padding: clamp(90px,10vw,145px) max(24px,calc((100vw - var(--container))/2)); }
.watch-art { position: relative; display: grid; min-height: 620px; place-items: center; }
.watch-art::before {
  position: absolute;
  inset: -12% -34%;
  background:
    radial-gradient(ellipse at 42% 50%,rgba(67,88,255,.22) 0%,rgba(67,88,255,.09) 28%,rgba(67,88,255,.03) 48%,transparent 76%),
    radial-gradient(ellipse at 59% 52%,rgba(246,68,183,.16) 0%,rgba(246,68,183,.07) 28%,rgba(246,68,183,.024) 48%,transparent 76%);
  content: "";
  pointer-events: none;
}
.watch-case { position: relative; z-index: 2; width: 300px; padding: 13px; border: 2px solid #6b6c73; border-radius: 78px; background: #050509; box-shadow: 0 40px 70px rgba(0,0,0,.55); }
.watch-case img { width: 100%; border-radius: 65px; }
.watch-case > span { position: absolute; right: -18px; top: 78px; width: 16px; height: 50px; border-radius: 0 12px 12px 0; background: #5d5e65; }
.watch-band { position: absolute; left: 50%; width: 190px; height: 190px; border: 1px solid #373843; background: linear-gradient(90deg,#11121a,#282a35,#11121a); transform: translateX(-50%); }
.watch-band.top { top: 0; border-radius: 50px 50px 12px 12px; }
.watch-band.bottom { bottom: 0; border-radius: 12px 12px 50px 50px; }
.watch-copy h2 { font-size: clamp(3rem,5.5vw,5.8rem); line-height: .96; letter-spacing: -.06em; }
.watch-copy h2 em { color: #ae8dff; font-weight: 400; }
.feature-lines { display: grid; margin-top: 35px; }
.feature-lines > div { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-light); }
.feature-lines span { color: #a985ff; font: 600 9px/1 var(--mono); }
.feature-lines p { margin: 0; color: rgba(255,255,255,.52); line-height: 1.55; }
.feature-lines strong { display: block; margin-bottom: 5px; color: #fff; }
.watch-note { color: rgba(255,255,255,.4); font-size: 12px; }

.relay-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 18px; }
.relay-product { position: relative; display: grid; min-height: 520px; margin: 0; place-items: center; overflow: hidden; border-radius: 30px; background: #0e0e17; }
.relay-product::before { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; background: var(--gradient); filter: blur(80px); opacity: .28; content: ""; }
.relay-product img { position: relative; z-index: 2; width: 70%; filter: drop-shadow(0 30px 35px rgba(0,0,0,.5)); }
.relay-product span { position: absolute; left: 18px; bottom: 18px; z-index: 3; color: rgba(255,255,255,.54); font: 600 9px/1 var(--mono); }
.relay-examples { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 30px; overflow: hidden; }
.relay-examples article { padding: 28px; border-right: 1px solid var(--line); }
.relay-examples article:last-child { border-right: 0; }
.relay-examples h3 { margin: 55px 0 14px; font-size: 1.7rem; }
.relay-examples p { color: var(--muted); line-height: 1.65; }
.relay-warnings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.relay-warnings p { margin: 0; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.relay-warnings strong { color: var(--ink); }

.buttons-section { background: var(--paper); }
.button-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.button-product { padding: 15px 15px 25px; border: 1px solid var(--line); border-radius: 26px; background: #fff; }
.button-product figure { display: grid; height: 310px; margin: 0 0 20px; place-items: center; overflow: hidden; border-radius: 18px; background: #eceae4; }
.button-product figure img { width: 82%; height: 86%; object-fit: contain; transition: transform .35s ease; }
.button-product:hover figure img { transform: scale(1.08) rotate(-2deg); }
.button-product > span { color: var(--violet); font: 600 9px/1 var(--mono); }
.button-product h3 { margin: 10px 0 8px; font-size: 1.5rem; }
.button-product p { min-height: 65px; color: var(--muted); line-height: 1.55; }
.button-product > small { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #eee9ff; color: #5d2bb4; font: 600 8px/1 var(--mono); text-transform: uppercase; }

.install-journey { display: grid; grid-template-columns: .86fr 1.14fr; align-items: stretch; gap: 14px; }
.install-title-mobile { display: none; }
.install-visual {
  position: relative;
  height: 540px;
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #11111a;
  box-shadow: 0 24px 60px rgba(16,19,42,.14);
}
.install-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(7,7,16,.02) 35%,rgba(7,7,16,.84) 100%);
  content: "";
}
.install-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  transition: transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease;
}
.install-visual:hover img { filter: saturate(1.08) contrast(1.03); transform: scale(1.045); }
.install-visual figcaption {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  font: 600 9px/1 var(--mono);
  letter-spacing: .13em;
}
.install-visual figcaption span { display: flex; align-items: center; gap: 9px; }
.install-visual figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #4ee2a4; box-shadow: 0 0 0 5px rgba(78,226,164,.1),0 0 16px rgba(78,226,164,.55); }
.install-visual figcaption strong { color: rgba(255,255,255,.55); font-weight: 500; }
.install-steps { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3,1fr); gap: 10px; }
.install-step {
  position: relative;
  display: flex;
  min-height: 0;
  padding: 28px 34px 28px 96px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(110deg,#fff,#faf9ff);
  box-shadow: 0 10px 30px rgba(16,19,42,.045);
  transition: transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .35s ease;
}
.install-step::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(#405cff,#a33dff,#ef46b5);
  opacity: .25;
  content: "";
  transition: opacity .25s ease;
}
.install-step:hover { border-color: rgba(113,70,225,.26); box-shadow: 0 18px 42px rgba(72,45,139,.1); transform: translateX(6px); }
.install-step:hover::before { opacity: 1; }
.install-step > span {
  top: 50%;
  right: auto;
  left: 27px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(104,69,220,.2);
  border-radius: 14px;
  background: #f0ecff;
  transform: translateY(-50%);
}
.install-step h3 { margin-bottom: 8px; font-size: 1.32rem; }
.install-step p { max-width: 58ch; }
.guide-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.guide-links > span { grid-column: 1 / -1; }
.guide-links a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.guide-links a b { color: var(--violet); font: 600 9px/1 var(--mono); }
.guide-links a span { display: grid; }
.guide-links a strong { font-size: 13px; }
.guide-links a small { color: var(--muted); font-size: 10px; }
.guide-links a em { font-style: normal; }
.guide-links a { transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.guide-links a:hover { border-color: rgba(102,66,218,.28); box-shadow: 0 12px 28px rgba(67,43,123,.08); transform: translateY(-3px); }

.social-section { padding: clamp(90px,10vw,145px) max(24px,calc((100vw - var(--container))/2)); }
.social-section .section-heading h2, .social-section .section-heading p { color: #fff; }
.instagram-bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 15px; margin-bottom: 17px; padding: 15px 18px; border: 1px solid var(--line-light); border-radius: 16px; background: var(--gradient-soft); }
.instagram-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--gradient); font-weight: 800; }
.instagram-bar > span { display: grid; }
.instagram-bar small { color: rgba(255,255,255,.5); }
.instagram-live { padding-left: 20px; border-left: 1px solid var(--line-light); text-align: right; }
.instagram-live b { color: #bca1ff; font: 600 11px/1 var(--mono); }
.instagram-bar em { font-style: normal; font-size: 12px; }
.media-grid { display: grid; grid-template-columns: 1.35fr 1.35fr .65fr .65fr; gap: 10px; align-items: start; }
.media-card { overflow: hidden; border: 1px solid var(--line-light); border-radius: 20px; background: var(--ink-card); }
.media-frame { overflow: hidden; background: #000; }
.media-frame.landscape { aspect-ratio: 16/10; }
.media-frame.portrait { aspect-ratio: 9/14; }
.media-frame iframe { width: 100%; height: 100%; border: 0; }
.media-card > span { display: block; margin: 15px 17px 6px; color: #a985ff; font: 600 8px/1 var(--mono); text-transform: uppercase; }
.media-card h3 { margin: 0 17px 18px; font-size: 1rem; }

.final-cta-image img { object-position: center 52%; }
.cart-suggestion { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; margin: 12px 20px; padding: 11px; border: 1px solid rgba(133,75,255,.25); border-radius: 14px; background: #f3efff; }
.cart-suggestion img { width: 60px; height: 60px; object-fit: contain; }
.cart-suggestion span { display: grid; }
.cart-suggestion small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.cart-suggestion button { padding: 8px 10px; border: 0; border-radius: 9px; background: var(--ink); color: #fff; cursor: pointer; font-size: 10px; }

@media (max-width: 980px) {
  .locale-button b { display: none; }
  .locale-menu { right: 70px; }
  .stealth-heading { grid-template-columns: 1fr; }
  .stealth-heading .eyebrow { grid-column: auto; }
  .stealth-rail { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card-featured { transform: none; }
  .configurator { grid-template-columns: 1fr; }
  .config-result { position: relative; top: auto; }
  .watch-siri { grid-template-columns: 1fr; }
  .watch-art { min-height: 560px; }
  .relay-layout { grid-template-columns: 1fr; }
  .install-journey { grid-template-columns: 1fr; }
  .install-visual { height: 480px; }
  .install-steps { grid-template-rows: none; }
  .media-grid { grid-template-columns: 1fr 1fr; }
  .media-card-reel .media-frame.portrait { aspect-ratio: 9/12; }
}

@media (max-width: 680px) {
  .locale-button { min-width: 40px; padding: 0 10px; }
  .hero-commerce-points { display: grid; }
  .stealth-rail { grid-template-columns: 1fr; }
  .stealth-rail article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .bike-gallery-head { align-items: start; flex-direction: column; }
  #bike-gallery-main { aspect-ratio: 4/3; }
  .bike-gallery-thumbs { grid-template-columns: repeat(5,74px); overflow-x: auto; }
  .pricing-grid, .button-product-grid { grid-template-columns: 1fr; }
  .relay-examples { grid-template-columns: 1fr; }
  .relay-examples article { border-right: 0; border-bottom: 1px solid var(--line); }
  .relay-warnings { grid-template-columns: 1fr; }
  .install-visual { height: 410px; border-radius: 24px; }
  .install-visual figcaption { right: 18px; bottom: 18px; left: 18px; }
  .install-step { min-height: 158px; padding: 24px 22px 24px 82px; }
  .install-step > span { left: 21px; width: 38px; height: 38px; }
  .install-steps, .guide-links { grid-template-columns: 1fr; }
  .guide-links > span { grid-column: auto; }
  .instagram-bar { grid-template-columns: auto 1fr auto; }
  .instagram-live { grid-column: 2; padding: 0; border: 0; text-align: left; }
  .instagram-bar em { grid-column: 3; grid-row: 1 / 3; }
  .media-grid { grid-template-columns: 1fr; }
  .media-card-reel .media-frame.portrait { aspect-ratio: 9/12; }
  .cart-suggestion { grid-template-columns: 50px 1fr; }
  .cart-suggestion button { grid-column: 1 / -1; }
}

/* Mobile performance: the Instagram in-app browser (88% of traffic) pays a real
   cost for large backdrop-filter blurs on every composited frame. Cap the radius
   on the always-visible / full-width surfaces — the frosted look survives. */
@media (max-width: 680px) {
  .site-header { backdrop-filter: blur(10px); }
  .hero-commerce { backdrop-filter: blur(8px); }
  .cart-drawer { backdrop-filter: blur(10px); }
  .gallery-caption { backdrop-filter: blur(8px); }
}

/* ===== July 2026 refinement pass ===== */
.locale-menu,
.locale-menu button,
.locale-menu strong {
  color: var(--ink);
}
.locale-menu > span { color: #6d6a76; }
.locale-options button { background: #fff; }
.locale-options button:hover { border-color: rgba(133,75,255,.46); background: #f7f4ff; }
.locale-options button.active { border-color: #7650df; background: #e9e1ff; color: #3f168f; box-shadow: inset 0 0 0 1px rgba(118,80,223,.08); }

.experience {
  min-height: 0;
  padding-top: clamp(82px,8vw,118px);
  padding-bottom: clamp(82px,8vw,118px);
}
.experience .section-intro { max-width: 760px; margin-bottom: 38px; }
@media (min-width: 981px) {
  .experience > .compare-shell {
    width: min(100%, 780px);
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .experience .experience-benefits { width: min(100%,1040px); margin-inline: auto; }
  .experience .experience-cta { width: min(100%,1040px); margin-inline: auto; margin-top: 22px; }
}
@media (min-width: 681px) and (max-width: 980px) {
  .experience > .compare-shell {
    width: min(100%, 760px);
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
  }
}
.compare-line span { width: 54px; height: 54px; border-width: 5px; }

.stealth-editorial { padding-top: clamp(82px,8vw,118px); padding-bottom: clamp(82px,8vw,118px); }
.stealth-heading { grid-template-columns: minmax(0,.9fr) minmax(280px,.55fr); }
.stealth-heading h2 { max-width: 760px; font-size: clamp(2.4rem,4.25vw,4.55rem); line-height: 1; }
.stealth-rail { margin-top: 48px; }

.bike-gallery {
  width: min(100%, 1050px);
  margin: 52px auto 0;
  padding-top: 34px;
}
.bike-gallery-head h3 { font-size: clamp(1.65rem,2.5vw,2.55rem); }
.bike-gallery-stage { position: relative; display: block; margin-top: 18px; }
#bike-gallery-main { aspect-ratio: 16 / 9.6; border-radius: 22px; isolation: isolate; }
#bike-gallery-main .gallery-backdrop {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: blur(26px) brightness(.46) saturate(.9);
  transform: scale(1.08);
  animation: gallery-backdrop-in .55s ease both;
}
#bike-gallery-main .gallery-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 18px;
  object-fit: contain;
  filter: drop-shadow(0 20px 38px rgba(0,0,0,.42));
  animation: gallery-photo-in .55s cubic-bezier(.2,.75,.25,1) both;
}
#bike-gallery-main .gallery-placeholder { position: relative; z-index: 1; }
.bike-gallery .gallery-caption { z-index: 3; right: 86px; left: 86px; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(7,7,16,.68);
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  transform: translateY(-50%);
  transition: background 180ms ease, transform 180ms ease;
}
.gallery-arrow:hover { background: #7650df; transform: translateY(-50%) scale(1.06); }
.gallery-arrow:focus-visible { outline: 3px solid rgba(133,75,255,.42); outline-offset: 3px; }
.gallery-arrow:disabled { cursor: default; opacity: .3; }
.gallery-arrow-prev { left: 18px; }
.gallery-arrow-next { right: 18px; }
.gallery-status {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: flex;
  min-width: 104px;
  padding: 10px 13px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(7,7,16,.66);
  color: #fff;
  font: 600 9px/1 var(--mono);
  backdrop-filter: blur(12px);
}
.gallery-status i { width: 24px; height: 1px; background: rgba(255,255,255,.36); }
@keyframes gallery-photo-in { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
@keyframes gallery-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.config-section {
  background: var(--paper);
  color: var(--ink);
}
.config-section::before { background: radial-gradient(circle at 78% 32%,rgba(121,77,255,.10),transparent 36%); }
.config-bg-word { color: rgba(20,18,28,.035); }
.config-section .section-intro h2 { color: var(--ink); }
.config-section .section-intro h2 em { color: #7146d8; }
.config-section .section-intro > p:last-child { color: #65616d; }
.config-section .eyebrow { color: #716d77; }
.config-controls,
.config-result {
  border-color: #dedbe4;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 70px rgba(37,27,62,.08);
}
.config-progress span { background: #e4e0e8; }
.choice-group { border-bottom-color: #e4e0e7; }
.choice-group legend { color: var(--ink); }
.choice {
  border-color: #ded9e5;
  background: #faf9fc;
  color: #24212c;
}
.choice:hover { border-color: #8b68e7; background: #f7f3ff; }
.choice small { color: #77717f; }
.choice.active {
  border-color: #7650df;
  background: linear-gradient(135deg,#343cdb,#8150e5 55%,#dc4fa9);
  box-shadow: 0 12px 28px rgba(91,54,180,.2);
}
.choice.active b { color: #fff; }
.config-hint { color: #6d6873; }
.result-topline { color: #6c6673; }
.result-image-stage { margin: 18px; border-radius: 22px; background: linear-gradient(145deg,#f1edf9,#f8f6f1); }
.result-orbit { border-color: rgba(67,49,112,.1); }
.result-copy h3 { color: var(--ink); }
.result-copy > p { color: #686371; }
.result-copy li { color: #55505c; }
.result-buy { border-top-color: #e3dfe8; background: #faf9fc; }
.result-buy > div small,
.result-buy > div span { color: #6c6674; }
.result-buy > div strong { color: var(--ink); }
.buy-link { color: #5f536f; }
.result-trust { border-top-color: #e3dfe8; color: #686171; }

.system-section {
  --system-line: rgba(255,255,255,.1);
  --system-panel: #0c0c16;
  position: relative;
  padding-block: clamp(84px,8vw,112px);
  isolation: isolate;
}
.system-section .section-heading { margin-bottom: 34px; }
.system-section .section-heading h2 { max-width: 760px; }
.system-title-mobile,
.system-kicker-mobile { display: none; }
.system-command-bar {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 68px;
  padding: 13px 18px 14px;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--system-line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(110deg,#0b0b14,#11111e 58%,#0c101d);
  color: #fff;
  box-shadow: 0 24px 70px rgba(17,12,35,.12);
}
.system-command-bar::after {
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(92,89,255,.65),rgba(244,55,179,.62),transparent);
  content: "";
}
.system-command-id,
.system-command-ready,
.system-command-modes span { display: flex; align-items: center; }
.system-command-id { gap: 8px; font: 600 9px/1 var(--mono); letter-spacing: .15em; }
.system-command-id > i,
.system-command-ready > i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #4ee2a4;
  box-shadow: 0 0 0 5px rgba(78,226,164,.09),0 0 18px rgba(78,226,164,.55);
}
.system-command-id span { color: rgba(255,255,255,.92); }
.system-command-id b { color: rgba(255,255,255,.38); font-weight: 500; }
.system-command-modes {
  display: grid;
  max-width: 680px;
  justify-self: center;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}
.system-command-modes span {
  min-width: 0;
  padding: 9px 14px;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}
.system-command-modes i { color: #d957dc; font: 600 9px/1 var(--mono); font-style: normal; }
.system-command-modes b { overflow: hidden; color: rgba(255,255,255,.66); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.system-command-ready { gap: 8px; color: rgba(255,255,255,.46); font: 600 9px/1 var(--mono); letter-spacing: .14em; }
.system-command-ready > i { animation: systemReadyPulse 2.4s ease-in-out infinite; }
@keyframes systemReadyPulse {
  50% { opacity: .45; box-shadow: 0 0 0 8px rgba(78,226,164,0),0 0 10px rgba(78,226,164,.2); }
}
.system-grid {
  position: relative;
  z-index: 1;
  padding: 10px;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
  border: 1px solid var(--system-line);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  background: var(--system-panel);
  box-shadow: 0 34px 90px rgba(20,15,39,.2);
}
.system-card {
  min-height: 540px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateZ(0);
  transition: transform .55s cubic-bezier(.2,.75,.2,1),border-color .35s ease,box-shadow .55s ease;
}
.system-card::before {
  position: absolute;
  top: 0;
  left: 12%;
  z-index: 4;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(164,120,255,.8),rgba(246,71,181,.75),transparent);
  opacity: .62;
  content: "";
}
.system-card:hover {
  z-index: 4;
  border-color: rgba(184,144,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 24px 55px rgba(0,0,0,.33),0 0 0 1px rgba(126,78,225,.08);
  transform: translateY(-6px) translateZ(0);
}
.system-card > div { position: relative; z-index: 3; }
.system-card h3 { font-size: clamp(1.8rem,2.2vw,2.2rem); }
.system-card a { position: relative; padding-bottom: 4px; }
.system-card a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg,#7968ff,#ef4bb7);
  content: "";
  transform: scaleX(.32);
  transform-origin: left;
  transition: transform .25s ease;
}
.system-card a:hover::after { transform: scaleX(1); }
.system-card-main img {
  object-position: 48% 52%;
  transform: scale(1.01);
  transition: transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease;
}
.system-card-main:hover img { filter: saturate(1.08) contrast(1.03); transform: scale(1.055); }
.system-card-main::after { background: linear-gradient(to bottom,rgba(7,7,16,.02) 15%,rgba(7,7,16,.23) 48%,rgba(7,7,16,.98) 91%); }
.system-card-main p:not(.eyebrow) { max-width: 48ch; }
.system-card-app,
.system-card-watch { isolation: isolate; }
.system-card-app::after,
.system-card-watch::after {
  position: absolute;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(12px);
  content: "";
  opacity: .48;
  transition: opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.system-card-app::after { right: -42%; bottom: -18%; background: radial-gradient(circle,rgba(132,56,255,.72),transparent 67%); }
.system-card-watch::after { right: -38%; bottom: -10%; background: radial-gradient(circle,rgba(36,125,255,.52),transparent 67%); }
.system-card-app:hover::after,
.system-card-watch:hover::after { opacity: .72; transform: scale(1.12); }
.system-device { position: absolute; z-index: 1; margin: 0; overflow: hidden; transition: transform .75s cubic-bezier(.2,.75,.2,1),box-shadow .55s ease; }
.system-card-app .system-phone {
  right: 22px;
  bottom: -116px;
  width: 66%;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 42px;
  background: linear-gradient(145deg,#4f5360,#07080d 42%,#010206);
  box-shadow: 0 28px 55px rgba(0,0,0,.5),inset 0 0 0 2px #05060b;
  transform: rotate(5deg);
}
.system-card-app:hover .system-phone { box-shadow: 0 36px 70px rgba(0,0,0,.58),0 0 35px rgba(119,69,255,.2),inset 0 0 0 2px #05060b; transform: translateY(-12px) rotate(1.5deg); }
.system-card-app .system-phone > span { position: absolute; top: 12px; left: 50%; z-index: 2; width: 31%; height: 14px; border-radius: 999px; background: #020308; transform: translateX(-50%); }
.system-card-app .system-phone img {
  position: static;
  width: 100%;
  max-height: none;
  border-radius: 35px;
  object-fit: cover;
  filter: none;
  transform: none;
}
.system-card-watch .system-watch-device {
  right: 50%;
  bottom: 34px;
  width: 73%;
  padding: 10px;
  border: 2px solid #70717a;
  border-radius: 48px;
  background: #050509;
  box-shadow: 0 28px 55px rgba(0,0,0,.52);
  transform: translateX(50%) rotate(-4deg);
}
.system-card-watch:hover .system-watch-device { box-shadow: 0 38px 74px rgba(0,0,0,.6),0 0 38px rgba(47,128,255,.18); transform: translateX(50%) translateY(-10px) rotate(-1deg); }
.system-card-watch .system-watch-device > span { position: absolute; top: 28%; right: -11px; width: 10px; height: 38px; border-radius: 0 8px 8px 0; background: #64656d; }
.system-card-watch .system-watch-device img {
  position: static;
  width: 100%;
  max-height: none;
  border-radius: 38px;
  object-fit: cover;
  filter: none;
}

.relay-examples { grid-template-columns: repeat(2,1fr); }
.relay-examples article { min-height: 250px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.relay-examples article:nth-child(2n) { border-right: 0; }
.relay-examples article:nth-last-child(-n+2) { border-bottom: 0; }
.relay-examples h3 { margin: 38px 0 12px; }

.button-product-light figure img {
  width: 92%;
  height: 92%;
  object-position: center;
  transform: scale(.92) translate(14px,-61px);
}
.button-product-light:hover figure img { transform: scale(.98) translate(13px,-57px); }

.community-proof { margin-bottom: 22px; overflow: hidden; border: 1px solid rgba(173,139,255,.25); border-radius: 24px; background: linear-gradient(135deg,rgba(73,58,162,.22),rgba(246,68,183,.08)); }
.community-proof .instagram-bar { margin: 0; border: 0; border-radius: 0; background: transparent; }
.instagram-mark { width: 54px; height: 54px; border-radius: 16px; }
.instagram-live { display: grid; min-width: 150px; gap: 3px; }
.instagram-live b { font-size: 1.55rem; letter-spacing: -.04em; }
.live-status { display: inline-flex; align-items: center; justify-content: end; gap: 6px; color: #57dfad; font: 600 8px/1 var(--mono); letter-spacing: .1em; }
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(87,223,173,.1); }
.community-signals { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.1); }
.community-signals > span { display: grid; gap: 4px; padding: 16px 20px; border-right: 1px solid rgba(255,255,255,.1); }
.community-signals > span:last-child { border-right: 0; }
.community-signals b { color: #fff; font-size: .95rem; }
.community-signals small { color: rgba(255,255,255,.46); font-size: .65rem; }

.cart-suggestion {
  grid-template-columns: 66px minmax(0,1fr) auto;
  gap: 11px;
  margin: 12px 0 14px;
  padding: 11px 12px;
  border: 1px dashed rgba(118,80,223,.58);
  border-radius: 18px;
  background: linear-gradient(135deg,#f1edff,#fff 70%);
  box-shadow: 0 8px 24px rgba(82,49,171,.06);
}
.cart-suggestion img { width: 64px; height: 64px; padding: 5px; border-radius: 12px; background: #eeebf3; object-fit: contain; }
.cart-suggestion span { gap: 3px; }
.cart-suggestion em { color: #7751d2; font: 600 8px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.cart-suggestion strong { font-size: .76rem; line-height: 1.3; }
.cart-suggestion button { display: inline-flex; min-width: 0; min-height: 36px; padding: 0 11px; align-self: center; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(103,61,218,.42); border-radius: 999px; background: rgba(255,255,255,.78); color: #6240c7; cursor: pointer; font-weight: 700; white-space: nowrap; box-shadow: none; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.cart-suggestion button:hover { border-color: #6f45e8; background: #fff; transform: translateY(-1px); }
.cart-suggestion button span { display: inline; color: inherit; font-size: 9px; }
.cart-suggestion button b { color: inherit; font-size: 9px; }

@media (max-width: 980px) {
  .system-command-bar { grid-template-columns: 1fr auto; }
  .system-command-modes { display: none; }
  .system-grid { grid-template-columns: 1fr; }
  .system-card-main { grid-row: auto; }
  .system-card { min-height: 510px; }
  .system-card-app .system-phone { right: 7%; width: min(38%,280px); }
  .system-card-watch .system-watch-device { width: min(38%,270px); }
  .relay-examples { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  .cart-drawer { padding: 20px; overflow: hidden; }
  .cart-footer { margin: 0 -20px -20px; padding: 16px 20px max(20px,env(safe-area-inset-bottom)); }
  .experience { padding-block: 76px; }
  .experience .section-intro { margin-bottom: 30px; }
  .compare-shell { width: min(100%,430px); height: auto; min-height: 0; aspect-ratio: 4/3; margin-inline: auto; }
  .stealth-heading h2 { font-size: clamp(2.25rem,11vw,3.25rem); }
  .bike-gallery { margin-top: 38px; padding-top: 28px; }
  #bike-gallery-main { aspect-ratio: 4/5; border-radius: 18px; }
  #bike-gallery-main .gallery-photo { padding: 10px; }
  .bike-gallery .gallery-caption { right: 14px; bottom: 14px; left: 14px; padding-right: 70px; flex-direction: column; gap: 5px; }
  .gallery-arrow { top: auto; bottom: 16px; width: 42px; height: 42px; transform: none; }
  .gallery-arrow:hover { transform: scale(1.04); }
  .gallery-arrow-prev { right: 62px; left: auto; }
  .gallery-arrow-next { right: 14px; }
  .gallery-status { top: 14px; right: 14px; }
  .config-section { padding-block: 78px; }
  .config-controls { padding: 20px; }
  .system-section { padding-inline: 18px; }
  .system-section .section-heading { margin-bottom: 26px; }
  .system-command-bar { min-height: 58px; padding: 12px 14px; border-radius: 22px 22px 0 0; }
  .system-command-id { letter-spacing: .1em; }
  .system-command-ready { font-size: 8px; }
  .system-grid { padding: 7px; gap: 7px; border-radius: 0 0 26px 26px; }
  .system-card { min-height: 480px; padding: 24px; border-radius: 21px; }
  .system-card-main { min-height: 520px; }
  .system-card-app .system-phone { right: 18px; bottom: -96px; width: 57%; }
  .system-card-watch .system-watch-device { bottom: 28px; width: 60%; }
  .relay-examples { grid-template-columns: 1fr; }
  .relay-examples article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .relay-examples article:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .relay-examples article:last-child { border-bottom: 0; }
  .community-proof .instagram-bar { grid-template-columns: auto 1fr; }
  .instagram-live { grid-column: 1 / -1; min-width: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; text-align: left; }
  .live-status { justify-content: start; }
  .community-proof .instagram-bar em { grid-column: 1 / -1; grid-row: auto; }
  .community-signals { grid-template-columns: 1fr; }
  .community-signals > span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .community-signals > span:last-child { border-bottom: 0; }
  .cart-suggestion { grid-template-columns: 58px minmax(0,1fr) auto; gap: 9px; }
  .cart-suggestion img { width: 58px; height: 64px; }
  .cart-suggestion button { grid-column: auto; min-width: 0; min-height: 34px; padding-inline: 9px; }
}

@media (max-width: 360px) {
  .cart-suggestion { grid-template-columns: 60px minmax(0,1fr); }
  .cart-suggestion button { grid-column: 2; width: fit-content; min-height: 34px; }
}

/* Portrait gallery — all installed-bike photos are vertical */
.bike-gallery {
  width: min(100%, 700px);
}
.bike-gallery-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 18px;
}
.bike-gallery-tabs { align-self: stretch; }
#bike-gallery-main {
  aspect-ratio: 1 / 1.06;
}
#bike-gallery-main .gallery-photo {
  padding: 14px;
}
.bike-gallery .gallery-caption {
  right: 72px;
  left: 72px;
}

@media (max-width: 680px) {
  .bike-gallery { width: 100%; }
  #bike-gallery-main { aspect-ratio: 4 / 5; }
  .bike-gallery .gallery-caption { right: 14px; left: 14px; }
}

/* Configurator imported from ClaudeMotech */
.config-section.zone-light {
  --grad: var(--gradient);
  --grad-text: linear-gradient(100deg, #2743d8 0%, #6d2ee6 45%, #c92378 100%);
  --text: #10132a;
  --text-dim: #454b6e;
  --text-mute: #676d90;
  --card: #fff;
  --line: rgba(16, 19, 42, .1);
  --line-strong: rgba(16, 19, 42, .2);
  --bg-2: #eef0f8;
  --green: #0c9d66;
  --pink-soft: #c92378;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  overflow: visible;
  padding: clamp(82px, 8vw, 124px) max(24px, calc((100vw - var(--container)) / 2)) 96px;
  background: var(--paper);
  color: var(--text);
}
.config-section.zone-light::before { display: none; }
.config-section .section-head {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(34px, 5vw, 56px);
}
.config-section .section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.7rem, 4.2vw, 4.45rem);
  line-height: .98;
  letter-spacing: -.065em;
}
.config-section .section-head.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 30px;
}
.config-section .kicker {
  margin: 0 0 14px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 600 12px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.config-section .grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.config-section .section-head h2 em {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.config-section .lead {
  max-width: 56ch;
  margin: 0;
  color: var(--text-dim);
  font-size: 17.5px;
  line-height: 1.55;
}
.config-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(440px, 1.04fr);
  align-items: start;
  gap: clamp(22px, 3.5vw, 44px);
}
.config-shell.reveal.in-view { transform: none; }
.config-steps {
  display: grid;
  gap: 26px;
}
.config-shell .config-progress {
  display: block;
  height: 4px;
  margin: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(16, 19, 42, .08);
}
.config-shell .config-progress i {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 4px;
  background: var(--grad);
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.config-group {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 8px 26px rgba(16, 19, 42, .05);
  transition: opacity .3s ease;
}
.config-group[hidden] { display: none; }
.config-group-head h3 {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 17px;
}
.config-group-head h3 small {
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 500;
}
.step-badge {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  background: var(--grad);
  color: #fff;
  font: 600 12.5px/1 var(--mono);
}
.config-helper {
  margin: 8px 0 0;
  color: var(--text-mute);
  font-size: 13.5px;
  line-height: 1.55;
}
.config-tiles {
  display: grid;
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.config-tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-tile {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 14px 12px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(16, 19, 42, .03);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.config-tile:hover {
  border-color: var(--line-strong);
  background: rgba(16, 19, 42, .06);
  transform: translateY(-2px);
}
.config-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 6px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(16, 19, 42, .2));
  transform: translateZ(0);
  transition: filter .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.config-tile.is-active img { filter: drop-shadow(0 10px 19px rgba(67, 39, 154, .25)); transform: scale(1.025) translateZ(0); }
.config-tile strong { color: var(--text); font-size: 14.5px; line-height: 1.25; }
.config-tile small { color: var(--text-mute); font-size: 12.5px; line-height: 1.35; }
.config-tile .tile-extra { color: #c92378; font: 500 11.5px/1.3 var(--mono); }
.config-tile .tile-note { color: var(--text-mute); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.config-tile.is-active {
  z-index: 1;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow: 0 8px 26px rgba(109, 46, 230, .16);
}
.config-tile.is-active::after {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 2px 10px rgba(255, 82, 170, .5);
  content: "";
}
.config-tile.is-active::before {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 10px;
  height: 10px;
  background: #fff;
  content: "";
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}
.config-preview {
  min-width: 0;
  align-self: stretch;
}
.preview-sticky {
  position: sticky;
  top: 80px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(170deg, rgba(52, 87, 255, .06), #fff 40%);
  box-shadow: 0 28px 70px rgba(16, 19, 42, .12);
}
.preview-media {
  position: relative;
  display: grid;
  min-height: clamp(340px, 44dvh, 420px);
  padding: 22px;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 64%, rgba(122, 61, 255, .18), transparent 62%), linear-gradient(145deg, #eef0f8, #f7f5fb);
}
.preview-media::after {
  position: absolute;
  right: 12%;
  bottom: 8%;
  left: 12%;
  height: 14px;
  border-radius: 50%;
  background: rgba(16, 19, 42, .12);
  filter: blur(13px);
  content: "";
}
.preview-media img {
  position: absolute;
  z-index: 1;
  width: 92%;
  height: var(--preview-image-height, 230%);
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(16, 19, 42, .28));
  transform: translateY(var(--preview-image-y, 0%)) scale(var(--preview-image-scale, 1.06)) translateZ(0);
  transition: opacity .2s ease, filter .42s ease, transform .42s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.preview-media img.is-swapping { opacity: 0; filter: drop-shadow(0 12px 20px rgba(16, 19, 42, .15)); transform: translateY(var(--preview-image-y, 0%)) scale(var(--preview-image-scale, 1.06)) translateZ(0); }
.preview-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: var(--text);
  font: 600 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.preview-body { display: grid; padding: 22px; gap: 10px; }
.preview-body h3 { margin: 0; color: var(--text); font: 700 25px/1.05 var(--display); letter-spacing: -.045em; }
.preview-body > p { margin: 0; color: var(--text-dim); font: 400 14px/1.45 var(--display); }
.preview-list { display: grid; margin: 0; padding: 0; gap: 4px; color: var(--text-dim); font: 400 13.5px/1.35 var(--display); list-style: none; }
.preview-list li { display: flex; min-height: 24px; padding-bottom: 5px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px dashed rgba(16, 19, 42, .12); }
.preview-list li span:first-child { color: var(--text-mute); }
.preview-list li span:last-child { color: var(--text); font-weight: 650; text-align: right; }
.preview-save {
  display: inline-flex;
  margin: 0;
  padding: 5px 10px;
  align-items: center;
  justify-self: start;
  border: 1px solid rgba(12, 157, 102, .32);
  border-radius: 999px;
  background: rgba(12, 157, 102, .09);
  color: var(--green) !important;
  font: 600 12.5px/1.25 var(--display) !important;
  font-weight: 600;
}
.preview-save[hidden] { display: none; }
.preview-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.preview-price { display: block; min-width: 165px; color: var(--text); font: 700 35px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.055em; transition: color .2s ease, transform .2s ease; }
.preview-price.is-counting { color: #6339cf; transform: translateY(-1px); }
.preview-price.is-counting-up { transform: translateY(-2px) scale(1.025); }
.preview-price.is-counting-down { transform: translateY(2px) scale(.985); }
#mobile-price { transition: color .2s ease,transform .2s ease; }
#mobile-price.is-counting { color: #d8c5ff; }
#mobile-price.is-counting-up { transform: translateY(-1px) scale(1.025); }
#mobile-price.is-counting-down { transform: translateY(1px) scale(.985); }
.preview-anchor { color: var(--text-mute); font: 500 12.5px/1.35 var(--display); }
.preview-stock { color: var(--green); font: 650 12.5px/1.2 var(--display); white-space: nowrap; }
.preview-stock::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); content: ""; vertical-align: 1px; }
.preview-actions { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8px; }
.preview-actions .button.full { width: 100%; }
.preview-actions .button { min-height: 48px; padding: 11px 15px; font: 650 13.5px/1.15 var(--display); }
.preview-actions .button-ghost { border-color: var(--line-strong); background: rgba(16, 19, 42, .02); color: var(--text); }
.preview-actions .button-ghost:hover { border-color: rgba(16, 19, 42, .34); background: rgba(16, 19, 42, .06); }
.preview-trust { display: none; }
.preview-trust li::before { color: var(--green); content: "✓ "; }
.preview-question { display: none; }
.preview-question:hover { color: var(--text-dim); }

@media (max-width: 900px) {
  .config-section .section-head.split { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .config-shell { grid-template-columns: 1fr; }
  .config-preview { align-self: auto; }
  .preview-sticky { position: static; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .preview-media { min-height: 250px; padding: 16px; }
  .preview-body { padding: 18px 20px; gap: 7px; }
  .preview-body h3 { font-size: 23px; }
  .preview-body > p { font-size: 13.5px; line-height: 1.38; }
  .preview-list { gap: 2px; font-size: 13px; }
  .preview-list li { min-height: 21px; padding-bottom: 3px; }
  .preview-save { padding-block: 4px; }
  .preview-price { font-size: 32px; }
  .preview-actions .button { min-height: 44px; }
}
@media (max-width: 680px) {
  .config-section.zone-light { padding: 78px 18px; }
  .config-section .section-head h2 { font-size: clamp(2.55rem, 12.2vw, 3.4rem); }
  .config-tiles { grid-template-columns: 1fr; }
  .config-tiles.cols-2 { grid-template-columns: 1fr 1fr; }
  .config-group { padding: 18px; }
  .preview-media { min-height: 340px; }
  .preview-body { padding: 20px; }
  .preview-body h3 { font-size: 23px; }
  .preview-price { font-size: 32px; }
}

/* Motech Live — community dashboard */
.social-section {
  position: relative;
  padding-block: clamp(90px,8vw,118px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 8%,rgba(80,72,255,.17),transparent 31%),
    radial-gradient(circle at 88% 36%,rgba(239,61,179,.12),transparent 28%),
    #080811;
}
.social-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size: 46px 46px;
  content: "";
  mask-image: linear-gradient(to bottom,transparent,black 18%,black 80%,transparent);
  opacity: .72;
}
.social-section::after {
  position: absolute;
  top: 24%;
  right: -170px;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: #662dff;
  filter: blur(150px);
  content: "";
  opacity: .13;
}
.social-section > * { position: relative; z-index: 1; }
.social-section .section-heading { margin-bottom: 38px; }
.social-section .section-heading h2 { max-width: 800px; font-size: clamp(3.7rem,6.4vw,6.35rem); line-height: .94; }
.social-section .section-heading > p { max-width: 420px; color: rgba(255,255,255,.58); }
.community-proof {
  position: relative;
  display: grid;
  margin-bottom: 18px;
  grid-template-columns: 1.32fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(159,121,255,.3);
  border-radius: 28px;
  background: linear-gradient(115deg,rgba(48,36,103,.5),rgba(20,15,40,.86) 58%,rgba(50,16,42,.58));
  box-shadow: 0 28px 75px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
}
.community-proof::before {
  position: absolute;
  top: 0;
  left: 8%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg,transparent,#7770ff,#ef48b8,transparent);
  content: "";
}
.community-proof .instagram-bar {
  min-width: 0;
  min-height: 120px;
  margin: 0;
  padding: 22px 24px;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: background .25s ease;
}
.community-proof .instagram-bar:hover { background: rgba(255,255,255,.035); }
.instagram-mark {
  width: 62px;
  height: 62px;
  border-radius: 19px;
  box-shadow: 0 14px 30px rgba(111,63,255,.28),inset 0 1px 0 rgba(255,255,255,.28);
}
.instagram-bar > span:nth-child(2) { min-width: 0; gap: 5px; }
.instagram-bar > span:nth-child(2) strong { overflow: hidden; color: #fff; font-size: 1rem; text-overflow: ellipsis; }
.instagram-bar > span:nth-child(2) small { color: rgba(255,255,255,.46); }
.instagram-live { display: grid; min-width: 145px; padding-left: 18px; gap: 4px; border-left: 1px solid rgba(255,255,255,.1); text-align: right; }
.instagram-live b { color: #fff; font-size: 1.45rem; letter-spacing: -.045em; }
.instagram-live small { color: rgba(255,255,255,.42); }
.instagram-bar em { padding: 10px 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.045); font-size: 10px; white-space: nowrap; }
.live-status { display: inline-flex; align-items: center; justify-content: end; gap: 7px; color: #53e1a5; font: 600 8px/1 var(--mono); letter-spacing: .12em; }
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(83,225,165,.1),0 0 15px rgba(83,225,165,.42); animation: systemReadyPulse 2.4s ease-in-out infinite; }
.community-signals { display: grid; grid-template-columns: repeat(3,1fr); border-top: 0; border-left: 1px solid rgba(255,255,255,.1); }
.community-signals > span { min-width: 0; padding: 25px 17px; justify-content: center; border-right: 1px solid rgba(255,255,255,.08); }
.community-signals b { color: #fff; font-size: 1.05rem; }
.community-signals small { color: rgba(255,255,255,.4); font-size: .61rem; line-height: 1.4; }
.live-feed-shell {
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 32px;
  background: linear-gradient(150deg,rgba(20,20,34,.96),rgba(9,9,17,.98));
  box-shadow: 0 35px 90px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
}
.live-feed-toolbar {
  display: flex;
  min-height: 58px;
  padding: 10px 15px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.38);
  font: 600 8px/1 var(--mono);
  letter-spacing: .13em;
}
.live-feed-toolbar > span { display: inline-flex; align-items: center; gap: 8px; }
.live-feed-toolbar > span:first-child { color: rgba(255,255,255,.76); }
.live-feed-toolbar i { width: 7px; height: 7px; border-radius: 50%; background: #53e1a5; box-shadow: 0 0 0 5px rgba(83,225,165,.09); }
.live-feed-toolbar b { color: #dd58d5; font-size: 10px; }
.live-feed-shell .media-grid {
  min-width: 0;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1.35fr) minmax(0,.65fr) minmax(0,.65fr);
  gap: 9px;
}
.live-feed-shell .media-card {
  position: relative;
  min-width: 0;
  border-color: rgba(255,255,255,.1);
  border-radius: 23px;
  background: linear-gradient(155deg,#171725,#0e0e17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transform: translateZ(0);
  transition: transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .45s ease;
}
.live-feed-shell .media-card::before {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(7,7,16,.72);
  color: rgba(255,255,255,.72);
  font: 600 8px/1 var(--mono);
  content: attr(data-feed);
  backdrop-filter: blur(8px);
}
.live-feed-shell .media-card:hover { z-index: 3; border-color: rgba(159,118,255,.4); box-shadow: 0 24px 50px rgba(0,0,0,.42),0 0 35px rgba(97,56,201,.09); transform: translateY(-6px) translateZ(0); }
.live-feed-shell .media-frame,
.live-feed-shell .media-frame iframe { min-width: 0; max-width: 100%; }
.live-feed-shell .media-frame { border-bottom: 1px solid rgba(255,255,255,.08); }
.live-feed-shell .media-card > span { margin: 16px 18px 7px; color: #c68cff; letter-spacing: .1em; }
.live-feed-shell .media-card h3 { display: flex; margin: 0 18px 19px; align-items: center; justify-content: space-between; gap: 12px; color: #fff; font-size: 1.03rem; }
.live-feed-shell .media-card h3::after { color: rgba(255,255,255,.32); font: 500 13px/1 var(--display); content: "↗"; transition: color .25s ease,transform .25s ease; }
.live-feed-shell .media-card:hover h3::after { color: #c68cff; transform: translate(2px,-2px); }

@media (max-width: 980px) {
  .community-proof { grid-template-columns: 1fr; }
  .community-signals { border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
}

@media (max-width: 680px) {
  .social-section { padding: 82px 18px; }
  .social-section .section-heading h2 { font-size: clamp(3rem,13.5vw,4.2rem); }
  .community-proof { border-radius: 23px; }
  .community-proof .instagram-bar { padding: 18px; grid-template-columns: auto 1fr; }
  .instagram-mark { width: 54px; height: 54px; border-radius: 16px; }
  .instagram-live { grid-column: 1 / -1; min-width: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; text-align: left; }
  .live-status { justify-content: start; }
  .instagram-bar em { grid-column: 1 / -1; justify-self: start; }
  .community-signals { grid-template-columns: 1fr; }
  .community-signals > span { padding: 15px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .community-signals > span:last-child { border-bottom: 0; }
  .live-feed-shell { padding: 7px; border-radius: 25px; }
  .live-feed-toolbar { min-height: 52px; padding: 9px 11px 15px; }
  .live-feed-toolbar > span:last-child { display: none; }
  .live-feed-shell .media-grid { grid-template-columns: 1fr; }
  .live-feed-shell .media-card { border-radius: 19px; }
  .live-feed-shell .media-card-reel .media-frame.portrait { aspect-ratio: 9 / 12; }
}

/* Motech Live — Instagram profile + featured demonstration reel */
.instagram-profile-card {
  position: relative;
  display: grid;
  min-height: 138px;
  margin-bottom: 18px;
  padding: 20px 22px;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border: 1px solid rgba(159,121,255,.32);
  border-radius: 29px;
  background: linear-gradient(115deg,rgba(49,36,106,.58),rgba(17,16,30,.92) 56%,rgba(55,18,46,.62));
  box-shadow: 0 28px 75px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);
}
.instagram-profile-card::before {
  position: absolute;
  top: 0;
  left: 7%;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg,transparent,#6d70ff,#ef48b8,transparent);
  content: "";
}
.instagram-profile-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 17px;
  color: #fff;
}
.instagram-avatar {
  display: grid;
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  padding: 3px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#575dff,#a43df1 55%,#ef42b7);
  box-shadow: 0 16px 35px rgba(92,54,223,.32);
}
.instagram-avatar img {
  width: 100%;
  height: 100%;
  border: 3px solid #11111b;
  border-radius: inherit;
  object-fit: cover;
}
.instagram-profile-identity > span:last-child { display: grid; min-width: 0; gap: 5px; }
.instagram-profile-identity small { color: #ae86ff; font: 600 8px/1 var(--mono); letter-spacing: .14em; }
.instagram-profile-identity strong { color: #fff; font-size: 1.28rem; letter-spacing: -.02em; }
.instagram-profile-identity em { overflow: hidden; color: rgba(255,255,255,.48); font-size: .72rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.instagram-profile-stats { display: flex; min-height: 70px; align-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.025); }
.instagram-profile-stats > span { display: grid; min-width: 122px; padding: 13px 22px; gap: 5px; text-align: center; }
.instagram-profile-stats > span + span { border-left: 1px solid rgba(255,255,255,.09); }
.instagram-profile-stats b { color: #fff; font-size: 1.52rem; letter-spacing: -.045em; }
.instagram-profile-stats small { color: rgba(255,255,255,.42); font-size: .63rem; }
.instagram-profile-action { display: grid; justify-items: end; gap: 13px; }
.instagram-profile-action .live-status { justify-content: end; }
.instagram-profile-action > a {
  display: inline-flex;
  min-height: 43px;
  padding: 0 18px;
  align-items: center;
  gap: 22px;
  border-radius: 999px;
  background: linear-gradient(110deg,#4564ff,#9a3ff1 58%,#e43fbd);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  box-shadow: 0 13px 28px rgba(96,52,223,.25);
  transition: transform .25s ease,box-shadow .25s ease;
}
.instagram-profile-action > a:hover { box-shadow: 0 17px 35px rgba(117,58,228,.38); transform: translateY(-2px); }

.featured-reel-shell {
  position: relative;
  display: grid;
  min-width: 0;
  margin-bottom: 18px;
  padding: 13px;
  grid-template-columns: minmax(330px,390px) minmax(0,1fr);
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: linear-gradient(145deg,rgba(21,21,36,.98),rgba(8,8,16,.99));
  box-shadow: 0 40px 100px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.045);
}
.featured-reel-shell::after {
  position: absolute;
  right: 3%;
  bottom: -38%;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(207,56,183,.17),transparent 68%);
  content: "";
  pointer-events: none;
}
.featured-reel-device {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 27px;
  background: #090910;
  box-shadow: 0 28px 70px rgba(0,0,0,.52),0 0 55px rgba(86,54,224,.12);
}
.featured-reel-topline { display: flex; min-height: 43px; padding: 0 9px; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.37); font: 600 8px/1 var(--mono); letter-spacing: .12em; }
.featured-reel-topline span { display: inline-flex; align-items: center; gap: 8px; }
.featured-reel-topline span:first-child { color: rgba(255,255,255,.78); }
.featured-reel-topline i { width: 7px; height: 7px; border-radius: 50%; background: #53e1a5; box-shadow: 0 0 0 5px rgba(83,225,165,.09),0 0 16px rgba(83,225,165,.35); }
.featured-reel-frame {
  position: relative;
  --reel-progress: 0%;
  width: 100%;
  min-height: 620px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: #000;
}
.featured-reel-frame::after {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: var(--reel-progress);
  height: 3px;
  background: linear-gradient(90deg,#5068ff,#ba42e6 62%,#ed42b7);
  content: "";
  pointer-events: none;
  transition: width .12s linear;
}
.featured-reel-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.featured-reel-frame video { display: block; width: 100%; height: 100%; border: 0; background: #000; cursor: pointer; object-fit: cover; }
.featured-reel-proof {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  min-height: 54px;
  padding: 7px 13px 7px 7px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 17px;
  background: rgba(8,8,16,.78);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  transition: border-color .25s ease,transform .25s ease,background .25s ease;
}
.featured-reel-proof[hidden] { display: none; }
.featured-reel-proof:hover { border-color: rgba(236,79,188,.55); background: rgba(19,14,31,.9); transform: translateY(-2px); }
.featured-reel-proof-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg,#5667ff,#aa3fec 57%,#ed43b8);
  box-shadow: 0 8px 19px rgba(159,57,221,.32);
}
.featured-reel-proof-icon svg { width: 20px; height: 20px; fill: #fff; }
.featured-reel-proof-copy { display: grid; gap: 3px; }
.featured-reel-proof-copy b { color: #fff; font-size: 1.05rem; line-height: 1; letter-spacing: -.035em; }
.featured-reel-proof-copy small { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.6); font: 600 7px/1 var(--mono); letter-spacing: .09em; }
.featured-reel-proof.is-live .featured-reel-proof-copy small::before { width: 5px; height: 5px; border-radius: 50%; background: #53e1a5; box-shadow: 0 0 9px rgba(83,225,165,.55); content: ""; }
.featured-reel-controls { position: absolute; right: 12px; bottom: 13px; z-index: 5; display: flex; align-items: center; gap: 7px; }
.featured-reel-controls button { display: inline-flex; min-height: 38px; padding: 0 12px; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(7,7,15,.62); color: #fff; cursor: pointer; font: 600 8px/1 var(--mono); letter-spacing: .08em; box-shadow: 0 8px 22px rgba(0,0,0,.25); backdrop-filter: blur(12px); transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.featured-reel-controls button:first-child { width: 38px; padding: 0; font: 700 13px/1 var(--display); letter-spacing: 0; }
.featured-reel-controls button:hover { border-color: rgba(190,139,255,.55); background: rgba(42,29,76,.78); transform: translateY(-1px); }
.featured-reel-frame iframe[hidden],
.featured-reel-poster[hidden] { display: none; }
.featured-reel-poster {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 0;
  background: #080810;
  color: #fff;
  cursor: pointer;
}
.featured-reel-poster::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(5,5,12,.04),rgba(5,5,12,.18) 45%,rgba(5,5,12,.78));
  content: "";
}
.featured-reel-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1),filter .35s ease; }
.featured-reel-poster > span { position: relative; z-index: 1; display: grid; padding-top: 46%; justify-items: center; gap: 7px; text-shadow: 0 2px 20px rgba(0,0,0,.65); }
.featured-reel-poster > span i { display: grid; width: 74px; height: 74px; margin-bottom: 4px; place-items: center; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(9,9,18,.42); color: #fff; font: 700 22px/1 var(--display); font-style: normal; box-shadow: 0 16px 40px rgba(0,0,0,.34),0 0 0 10px rgba(255,255,255,.055); backdrop-filter: blur(12px); transition: transform .25s ease,background .25s ease; }
.featured-reel-poster > span strong { font-size: .88rem; }
.featured-reel-poster > span small { color: rgba(255,255,255,.62); font-size: .68rem; }
.featured-reel-poster:hover > img { filter: saturate(1.08); transform: scale(1.035); }
.featured-reel-poster:hover > span i { background: linear-gradient(135deg,#5366ff,#e43fba); transform: scale(1.06); }
.featured-reel-switcher { display: grid; margin-top: 8px; grid-template-columns: 1fr 1fr; gap: 7px; }
.featured-reel-switcher button { display: grid; min-width: 0; min-height: 55px; padding: 10px 12px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.48); cursor: pointer; text-align: left; transition: border-color .25s ease,background .25s ease,color .25s ease; }
.featured-reel-switcher button b { color: #9a75e9; font: 600 8px/1 var(--mono); }
.featured-reel-switcher button span { overflow: hidden; font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.featured-reel-switcher button.active { border-color: rgba(169,118,255,.42); background: linear-gradient(115deg,rgba(84,69,210,.22),rgba(228,58,181,.11)); color: #fff; }
.featured-reel-story {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  padding: clamp(38px,5.4vw,78px);
  justify-content: center;
  flex-direction: column;
}
.reel-story-panel[hidden] { display: none; }
.reel-story-kicker { display: flex; margin-bottom: 22px; align-items: center; gap: 10px; color: #a981ff; font: 600 9px/1 var(--mono); letter-spacing: .13em; }
.reel-story-kicker span { width: 30px; height: 1px; background: linear-gradient(90deg,#5366ff,#ed43ba); }
.reel-story-kicker b { font: inherit; }
.featured-reel-story h3 { max-width: 650px; margin: 0 0 20px; color: #fff; font-size: clamp(3.1rem,5vw,5.4rem); line-height: .94; letter-spacing: -.055em; }
.featured-reel-story h3 em { background: linear-gradient(90deg,#5269ff,#b541ee 52%,#ef42b3); background-clip: text; color: transparent; font-style: normal; }
.reel-story-lead { max-width: 590px; margin: 0 0 32px; color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1.65; }
.reel-story-steps { display: grid; max-width: 620px; border-top: 1px solid rgba(255,255,255,.1); }
.reel-story-steps > span { display: grid; min-height: 78px; grid-template-columns: 42px minmax(0,1fr); align-content: center; column-gap: 11px; border-bottom: 1px solid rgba(255,255,255,.1); }
.reel-story-steps b { grid-row: 1 / 3; align-self: center; color: #b17bff; font: 600 9px/1 var(--mono); }
.reel-story-steps strong { color: #fff; font-size: .84rem; }
.reel-story-steps small { margin-top: 4px; color: rgba(255,255,255,.4); font-size: .7rem; }
.reel-story-controls { display: flex; margin: 26px 0 22px; flex-wrap: wrap; gap: 7px; }
.reel-story-controls span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.58); font: 600 8px/1 var(--mono); letter-spacing: .08em; }
.reel-instagram-link { display: inline-flex; width: fit-content; align-items: center; gap: 24px; color: #fff; font-size: .77rem; font-weight: 700; }
.reel-instagram-link > span:last-child { color: #cf54d9; transition: transform .2s ease; }
.reel-instagram-link:hover > span:last-child { transform: translate(3px,-3px); }

.more-live {
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 30px;
  background: linear-gradient(150deg,rgba(18,18,31,.96),rgba(9,9,17,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);
}
.more-live-heading { display: flex; min-height: 58px; padding: 10px 14px 18px; align-items: center; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.75); font: 600 8px/1 var(--mono); letter-spacing: .13em; }
.more-live-heading > span { display: inline-flex; align-items: center; gap: 8px; }
.more-live-heading i { width: 7px; height: 7px; border-radius: 50%; background: #53e1a5; box-shadow: 0 0 0 5px rgba(83,225,165,.09); }
.more-live-heading small { color: rgba(255,255,255,.35); font: inherit; }
.more-live-grid { display: grid; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 9px; }
.more-live .media-card { position: relative; min-width: 0; overflow: hidden; border-color: rgba(255,255,255,.1); border-radius: 22px; background: linear-gradient(155deg,#171725,#0e0e17); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .4s ease; }
.more-live .media-card::before { position: absolute; top: 11px; right: 11px; z-index: 4; padding: 7px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(7,7,16,.72); color: rgba(255,255,255,.72); font: 600 8px/1 var(--mono); content: attr(data-feed); backdrop-filter: blur(8px); }
.more-live .media-card:hover { z-index: 2; border-color: rgba(159,118,255,.4); box-shadow: 0 22px 46px rgba(0,0,0,.38); transform: translateY(-5px); }
.more-live .media-frame { border-bottom: 1px solid rgba(255,255,255,.08); }
.more-live .media-frame,
.more-live .media-frame iframe { min-width: 0; max-width: 100%; }
.more-live .media-card > span { margin: 16px 18px 7px; color: #c68cff; letter-spacing: .1em; }
.more-live .media-card h3 { display: flex; margin: 0 18px 19px; align-items: center; justify-content: space-between; gap: 12px; color: #fff; font-size: 1.02rem; }
.more-live .media-card h3::after { color: rgba(255,255,255,.3); content: "↗"; }

@media (max-width: 1040px) {
  .instagram-profile-card { grid-template-columns: minmax(0,1fr) auto; }
  .instagram-profile-action { grid-column: 1 / -1; padding-top: 16px; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid rgba(255,255,255,.09); }
  .featured-reel-shell { grid-template-columns: minmax(330px,390px) minmax(0,1fr); }
  .featured-reel-story { padding: 38px; }
  .featured-reel-story h3 { font-size: clamp(2.8rem,5.5vw,4.4rem); }
}

@media (max-width: 800px) {
  .instagram-profile-card { grid-template-columns: 1fr; gap: 18px; }
  .instagram-profile-stats { width: 100%; }
  .instagram-profile-stats > span { min-width: 0; flex: 1; }
  .instagram-profile-action { grid-column: auto; }
  .featured-reel-shell { grid-template-columns: 1fr; }
  .featured-reel-device { width: min(100%,430px); margin: 0 auto; }
  .featured-reel-story { padding: 42px 28px 48px; }
  .more-live-grid { grid-template-columns: 1fr 1fr; }
  .more-live .media-card-reel { grid-column: 1 / -1; width: min(100%,430px); justify-self: center; }
}

@media (max-width: 680px) {
  .hero-from-price { width: 100%; min-height: 44px; padding: 12px 2px 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; border-top: 1px solid rgba(255,255,255,.16); }
  .hero-from-price::before { display: none; }
  .instagram-profile-card { padding: 18px; border-radius: 23px; }
  .instagram-avatar { width: 70px; height: 70px; }
  .instagram-profile-identity strong { font-size: 1.08rem; }
  .instagram-profile-identity em { white-space: normal; }
  .instagram-profile-action {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    justify-items: start;
    gap: 12px;
  }
  .instagram-profile-action .live-status { justify-content: start; }
  .instagram-profile-action > a {
    min-height: 42px;
    padding-inline: 16px;
    justify-self: end;
    gap: 15px;
  }
  .featured-reel-shell { padding: 7px; border-radius: 25px; }
  .featured-reel-device { padding: 7px; border-radius: 21px; }
  .featured-reel-frame { min-height: 0; border-radius: 15px; }
  .featured-reel-proof { top: 10px; left: 10px; min-height: 48px; padding: 6px 10px 6px 6px; border-radius: 14px; }
  .featured-reel-proof-icon { width: 35px; height: 35px; border-radius: 11px; }
  .featured-reel-proof-copy b { font-size: .95rem; }
  .featured-reel-story { padding: 36px 21px 42px; }
  .featured-reel-story h3 { font-size: clamp(2.65rem,13vw,4rem); }
  .reel-story-lead { font-size: .84rem; }
  .more-live { padding: 7px; border-radius: 25px; }
  .more-live-heading { padding: 8px 10px 14px; }
  .more-live-heading small { display: none; }
  .more-live-grid { grid-template-columns: 1fr; }
  .more-live .media-card-reel { grid-column: auto; width: 100%; }
  .more-live .media-card { border-radius: 18px; }
  .more-live .media-card-reel .media-frame.portrait { aspect-ratio: 9 / 12; }
}

/* ===== Mobile commerce experience =====
   Mobile is the primary storefront. These rules intentionally live last so the
   desktop composition stays untouched while phones get a shorter purchase path. */
.mobile-fast-track { display: none; }

@media (max-width: 820px) {
  :root {
    --mobile-gutter: 16px;
    --mobile-card: min(84vw, 350px);
  }

  html { scroll-padding-top: 66px; }
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  main { overflow-x: clip; }
  main > section[id] { scroll-margin-top: 66px; }

  .announcement {
    height: 27px;
    font-size: 7px;
    line-height: 27px;
  }
  .announcement-track { gap: 34px; }

  .site-header {
    min-height: 58px;
    padding: 8px var(--mobile-gutter);
    background: rgba(7,7,16,.94);
  }
  .brand { gap: 8px; }
  .brand-mark { width: 33px; height: 33px; border-radius: 10px; }
  .brand-name { font-size: 1.02rem; }
  .header-actions { gap: 6px; }
  .locale-button,
  .cart-button,
  .menu-button { width: 39px; min-width: 39px; min-height: 39px; padding: 0; justify-content: center; }
  .cart-button { position: relative; }
  .locale-button span { font-size: 15px; }
  .cart-button b {
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-color: #090912;
  }
  .mobile-menu {
    top: calc(100% + 7px);
    right: 10px;
    left: 10px;
    border-radius: 18px;
    box-shadow: 0 24px 55px rgba(0,0,0,.42);
  }
  .mobile-menu.open { max-height: min(480px, calc(100dvh - 82px)); padding: 8px 18px; overflow-y: auto; }
  .mobile-menu a { min-height: 48px; padding: 15px 2px; font-size: .82rem; }
  .locale-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 112px);
    padding: 16px;
    border-radius: 18px;
  }

  .hero {
    min-height: auto;
    padding: 39px var(--mobile-gutter) 48px;
    gap: 30px;
  }
  .hero::before { opacity: .75; }
  .hero-glow { display: none; }
  .hero .eyebrow { margin-bottom: 17px; font-size: 8px; }
  .hero h1 {
    max-width: 350px;
    font-size: clamp(3rem, 14.4vw, 3.85rem);
    line-height: .91;
  }
  .hero-lead {
    max-width: 39ch;
    margin-top: 22px;
    font-size: .91rem;
    line-height: 1.52;
  }
  .hero-actions {
    display: grid;
    margin-top: 25px;
    grid-template-columns: 1fr auto;
    gap: 9px;
  }
  .hero-actions .button-primary {
    grid-column: 1 / -1;
    min-height: 58px;
    padding-inline: 20px;
    justify-content: space-between;
    font-size: .82rem;
  }
  .hero-actions .button-primary > span:last-child {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
  }
  .hero-actions .button-secondary {
    min-height: 45px;
    padding-inline: 16px;
    justify-content: flex-start;
    font-size: .72rem;
  }
  .hero-from-price {
    width: auto;
    min-width: 92px;
    min-height: 45px;
    padding: 5px 3px;
    justify-items: end;
    border-top: 0;
  }
  .hero-from-price strong { font-size: 15px; }
  .hero-commerce {
    margin-top: 18px;
    padding: 13px;
    border-radius: 15px;
    background: rgba(255,255,255,.035);
  }
  .hero-commerce-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
  }
  .hero-commerce-points > span { min-width: 0; font-size: 9px; line-height: 1.3; }
  .hero-commerce-points > span:last-child { grid-column: 1 / -1; }
  .hero-commerce-points b { width: 22px; height: 22px; flex: none; }
  .hero-commerce .pay-row { margin-top: 11px; flex-wrap: nowrap; gap: 4px; }
  .hero-commerce .pay-badge { height: 21px; padding-inline: 6px; transform: scale(.92); transform-origin: left center; }

  .hero-visual { min-height: 405px; }
  .hero-photo {
    inset: 0 0 0 9%;
    border-radius: 92px 92px 24px 24px;
  }
  .hero-photo img { object-position: 52% 50%; }
  .hero-product {
    top: 17px;
    left: 0;
    width: 148px;
    padding: 11px;
    border-radius: 18px;
    animation: none;
    backdrop-filter: blur(9px);
  }
  .hero-product img { height: 91px; }
  .hero-product small { font-size: .56rem; }
  .hero-product strong { font-size: .79rem; }
  .hero-note {
    right: 0;
    bottom: 18px;
    width: 181px;
    padding: 13px;
    gap: 9px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
  }
  .hero-note p { font-size: .66rem; }

  .proof-strip {
    display: flex;
    max-width: none;
    padding: 13px var(--mobile-gutter) 16px;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 0;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .proof-strip::-webkit-scrollbar,
  .bike-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar,
  .stealth-rail::-webkit-scrollbar,
  .system-grid::-webkit-scrollbar,
  .button-product-grid::-webkit-scrollbar,
  .relay-examples::-webkit-scrollbar { display: none; }
  .proof-strip,
  .bike-grid,
  .pricing-grid,
  .stealth-rail,
  .system-grid,
  .button-product-grid,
  .relay-examples {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .proof-item {
    min-width: 205px;
    min-height: 66px;
    padding: 11px 13px;
    flex: 0 0 auto;
    gap: 11px;
    border: 1px solid var(--line) !important;
    border-radius: 14px;
    background: #fff;
    scroll-snap-align: start;
  }
  .proof-item strong { font-size: .68rem; }
  .proof-item small { font-size: .57rem; }

  .mobile-fast-track {
    display: grid;
    margin: 2px var(--mobile-gutter) 18px;
    padding: 21px;
    gap: 18px;
    overflow: hidden;
    border-radius: 23px;
    background:
      radial-gradient(circle at 95% 0,rgba(232,66,190,.27),transparent 36%),
      radial-gradient(circle at 0 100%,rgba(65,88,255,.32),transparent 42%),
      #0b0b16;
    color: #fff;
    box-shadow: 0 18px 42px rgba(20,12,55,.18);
  }
  .mobile-fast-track .eyebrow { margin: 0 0 10px; color: rgba(255,255,255,.52); font-size: 8px; }
  .mobile-fast-track h2 { margin: 0; font-size: 1.85rem; line-height: 1.01; letter-spacing: -.055em; }
  .mobile-fast-track h2 .grad-text { background: var(--gradient); background-clip: text; color: transparent; }
  .mobile-fast-track-copy > p:last-child { margin: 10px 0 0; color: rgba(255,255,255,.57); font-size: .72rem; }
  .mobile-fast-track-action { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .mobile-fast-track-action > span { display: grid; gap: 2px; }
  .mobile-fast-track-action small { color: rgba(255,255,255,.46); font: 600 8px/1 var(--mono); text-transform: uppercase; }
  .mobile-fast-track-action strong { font-size: 1.08rem; white-space: nowrap; }
  .mobile-fast-track-action .button { min-height: 52px; padding: 0 15px; justify-content: space-between; gap: 10px; font-size: .71rem; }
  .mobile-fast-track-action .button i { font-size: 1.35rem; font-style: normal; font-weight: 400; }
  .mobile-fast-track-trust { display: flex; flex-wrap: wrap; gap: 8px 14px; color: rgba(255,255,255,.6); font-size: .6rem; }
  .mobile-fast-track-trust > span { display: inline-flex; align-items: center; gap: 5px; }
  .mobile-fast-track-trust i { color: #56dda6; font-style: normal; }

  .experience,
  .stealth-editorial,
  .bike-section,
  .pricing-section,
  .config-section.zone-light,
  .system-section,
  .app-section,
  .watch-siri,
  .relay-section,
  .buttons-section,
  .install-section,
  .social-section,
  .faq-section {
    min-height: 0;
    padding: 67px var(--mobile-gutter);
  }
  .section-intro,
  .section-heading,
  .config-section .section-head,
  .social-section .section-heading { margin-bottom: 29px; }
  .section-heading { gap: 16px; }
  .section-intro h2,
  .section-heading h2,
  .app-copy h2,
  .watch-copy h2,
  .faq-intro h2,
  .final-cta h2,
  .social-section .section-heading h2,
  .config-section .section-head h2 {
    font-size: clamp(2.45rem, 11.8vw, 3.25rem);
    line-height: .95;
  }
  .section-heading > p,
  .section-intro > p:last-child,
  .config-section .lead { font-size: .85rem; line-height: 1.55; }
  .eyebrow { margin-bottom: 17px; font-size: 8px; }

  .compare-shell { width: 100%; aspect-ratio: 4 / 3; }
  .experience-benefits { gap: 0; }
  .experience-benefits article { padding: 22px 0; border-bottom: 1px solid var(--line-light); }
  .experience-benefits article:last-child { border-bottom: 0; }
  .experience-cta { align-items: flex-start; flex-direction: column; margin-top: 18px; }

  .stealth-heading { grid-template-columns: 1fr; gap: 16px; }
  .stealth-heading .eyebrow { grid-column: auto; }
  .stealth-heading h2 { font-size: clamp(2.35rem,11.2vw,3.1rem); }
  .stealth-rail {
    display: flex;
    margin: 30px calc(var(--mobile-gutter) * -1) 0;
    padding: 0 var(--mobile-gutter) 8px;
    gap: 9px;
    overflow-x: auto;
    border-top: 0;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .stealth-rail::before { display: none; }
  .stealth-rail article {
    width: var(--mobile-card);
    min-width: var(--mobile-card);
    min-height: 270px;
    padding: 23px;
    flex: 0 0 auto;
    border: 1px solid var(--line-light) !important;
    border-radius: 20px;
    background: rgba(255,255,255,.025);
    scroll-snap-align: center;
  }
  .stealth-symbol { margin: 23px 0; }

  .bike-grid {
    display: flex;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: 0 var(--mobile-gutter) 9px;
    gap: 10px;
    overflow-x: auto;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .bike-card,
  .bike-card:nth-child(4),
  .bike-card-wide {
    width: var(--mobile-card);
    min-width: var(--mobile-card);
    min-height: 350px;
    flex: 0 0 auto;
    border-radius: 21px;
    scroll-snap-align: center;
  }
  .bike-copy { padding: 20px; }
  .bike-copy strong { font-size: 1.3rem; }
  .bike-gallery { margin-top: 45px; padding-top: 28px; }
  .bike-gallery-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .bike-gallery-tabs button { flex: 0 0 auto; }
  #bike-gallery-main { aspect-ratio: 4 / 5; border-radius: 20px; }

  .pricing-grid {
    display: flex;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: 11px var(--mobile-gutter) 15px;
    gap: 10px;
    overflow-x: auto;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .price-card {
    width: min(87vw, 365px);
    min-width: min(87vw, 365px);
    min-height: 495px;
    padding: 25px 22px 22px;
    flex: 0 0 auto;
    border-radius: 22px;
    scroll-snap-align: center;
  }
  .price-card-featured { order: -1; border-width: 2px; box-shadow: 0 18px 44px rgba(58,33,118,.15); }
  .price-card h3 { min-height: 48px; font-size: 1.08rem; }
  .price-value { margin: 10px 0 20px; }
  .price-value strong { font-size: 2.55rem; }
  .pricing-note { margin-top: 10px; text-align: left; }

  .config-section.zone-light { padding-top: 68px; padding-bottom: 74px; }
  .config-section .section-head.split { gap: 12px; }
  .config-shell { gap: 16px; }
  .config-steps { gap: 12px; }
  .config-shell .config-progress { position: sticky; top: 66px; z-index: 8; height: 5px; margin: 0 3px; box-shadow: 0 0 0 5px var(--paper); }
  .config-group { padding: 17px 14px; border-radius: 18px; box-shadow: 0 6px 18px rgba(16,19,42,.045); }
  .config-group-head h3 { gap: 8px; font-size: 15px; }
  .config-group-head h3 small { font-size: 10px; }
  .step-badge { width: 23px; height: 23px; }
  .config-helper { font-size: 11.5px; line-height: 1.45; }
  .config-tiles { margin-top: 12px; grid-template-columns: 1fr; gap: 8px; }
  .config-tiles.cols-2,
  #bike-options,
  #button-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .config-tile { min-height: 74px; padding: 12px 10px; border-radius: 13px; }
  .config-tile img { aspect-ratio: 4 / 3; margin-bottom: 3px; }
  .config-tile strong { font-size: 12.5px; }
  .config-tile small { font-size: 10.5px; }
  .config-tile .tile-note,
  .config-tile .tile-extra { font-size: 9px; }
  .preview-sticky { border-radius: 22px; box-shadow: 0 18px 45px rgba(16,19,42,.1); }
  .preview-media { min-height: 340px; padding: 16px; }
  .preview-badge { top: 12px; left: 12px; padding: 7px 10px; font-size: 9px; }
  .preview-body { padding: 18px 16px; gap: 9px; }
  .preview-body h3 { font-size: 21px; }
  .preview-body > p { font-size: 12.5px; }
  .preview-list { font-size: 11.5px; }
  .preview-list li { min-height: 22px; }
  .preview-price { min-width: 130px; font-size: 30px; }
  .preview-stock { font-size: 10px; }
  .preview-actions { grid-template-columns: 1fr; }
  .preview-actions .button { min-height: 51px; }
  .preview-actions .button-ghost { min-height: 44px; }

  .system-command-bar { margin-bottom: 8px; }
  .system-grid {
    display: flex;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: 0 var(--mobile-gutter) 8px;
    gap: 9px;
    overflow-x: auto;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 0;
  }
  .system-card,
  .system-card-main,
  .system-card-app,
  .system-card-watch {
    width: min(86vw,360px);
    min-width: min(86vw,360px);
    min-height: 480px;
    padding: 23px;
    flex: 0 0 auto;
    border-radius: 21px;
    scroll-snap-align: center;
  }
  .system-card h3 { font-size: 1.7rem; }
  .system-card p:not(.eyebrow) { font-size: .76rem; }
  .system-card-app .system-phone { bottom: -74px; width: 54%; }

  .app-section { gap: 28px; }
  .app-visual { min-height: 430px; }
  .phone { width: 58%; max-height: 430px; }
  .watch-siri { gap: 26px; }
  .watch-art { min-height: 440px; transform: scale(.82); margin: -42px 0; }
  .feature-lines { margin-top: 24px; }
  .feature-lines > div { padding: 15px 0; }

  .relay-layout { gap: 10px; }
  .relay-product { min-height: 330px; border-radius: 22px; }
  .relay-examples {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .relay-examples article {
    width: 78vw;
    min-width: 78vw;
    min-height: 230px;
    padding: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--line) !important;
    border-radius: 20px;
    background: #fff;
    scroll-snap-align: center;
  }
  .relay-examples h3 { margin: 38px 0 10px; font-size: 1.4rem; }

  .button-product-grid {
    display: flex;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: 0 var(--mobile-gutter) 8px;
    gap: 9px;
    overflow-x: auto;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .button-product {
    width: var(--mobile-card);
    min-width: var(--mobile-card);
    padding: 12px 12px 21px;
    flex: 0 0 auto;
    border-radius: 21px;
    scroll-snap-align: center;
  }
  .button-product figure { height: 250px; }
  .button-product p { min-height: 0; font-size: .78rem; }

  .install-journey { gap: 9px; }
  .install-visual { height: 380px; border-radius: 22px; }
  .install-step { min-height: 139px; padding: 21px 18px 21px 71px; border-radius: 19px; }
  .install-step > span { left: 18px; }
  .install-step h3 { font-size: 1.13rem; }
  .install-step p { font-size: .76rem; }

  .instagram-profile-card { gap: 15px; }
  .instagram-profile-stats { min-height: 62px; }
  .instagram-profile-stats > span { padding: 10px; }
  .instagram-profile-stats b { font-size: 1.25rem; }
  .featured-reel-story { padding: 29px 18px 35px; }
  .featured-reel-story h3 { font-size: clamp(2.3rem,11.8vw,3.25rem); }
  .reel-story-steps > span { min-height: 68px; }

  .faq-section { gap: 28px; }
  .faq-intro { position: static; }
  .faq-list summary { min-height: 70px; font-size: .88rem; }
  .faq-list details p { margin-right: 18px; font-size: .78rem; }
  .final-cta { min-height: 560px; }
  .final-cta-copy { padding: 230px var(--mobile-gutter) 105px; }

  .footer { padding: 51px var(--mobile-gutter) 27px; }
  .footer-main { gap: 36px 20px; }

  .mobile-buy-bar {
    right: 8px;
    bottom: max(8px,env(safe-area-inset-bottom));
    left: 8px;
    min-height: 67px;
    padding: 8px 8px 8px 14px;
    border-radius: 19px;
    background: rgba(9,9,17,.96);
    box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter: blur(10px);
    display: flex;
  }
  .mobile-buy-bar small { max-width: 135px; font-size: .53rem; }
  .mobile-buy-bar strong { font-size: .88rem; }
  .mobile-buy-bar .button {
    min-width: 158px;
    min-height: 49px;
    padding-inline: 15px;
    justify-content: space-between;
    font-size: .67rem;
  }
  .mobile-buy-bar .button > span:last-child {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
  }
  .cart-drawer.is-open ~ .mobile-buy-bar { opacity: 0; pointer-events: none; transform: translateY(90px); }

  .cart-drawer { width: 100%; padding: 16px; }
  .cart-head h2 { font-size: 1.75rem; }
  .cart-progress { margin: 17px 0 12px; }
  .cart-line { min-height: 104px; padding: 11px; grid-template-columns: 70px minmax(0,1fr); gap: 10px; }
  .cart-line > img { width: 70px; height: 70px; }
  .cart-line-price { grid-column: 2; display: flex; align-self: auto; align-items: center; justify-content: space-between; }
  .cart-suggestion { margin-inline: 0; padding: 10px; }
  .cart-footer { margin: 0 -16px -16px; padding: 14px 16px max(16px,env(safe-area-inset-bottom)); }
  .cart-total { margin-bottom: 11px; }
  .cart-pay { margin-bottom: 10px; flex-wrap: nowrap; gap: 4px; }
  .cart-pay .pay-badge { padding-inline: 6px; transform: scale(.92); transform-origin: left center; }
  #cart-checkout { min-height: 53px; }
  .cart-legal { margin-top: 9px; font-size: .49rem; }

  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  :root { --mobile-card: 86vw; }
  .brand-name { display: none; }
  .hero h1 { font-size: clamp(2.75rem,14.2vw,3.35rem); }
  .hero-commerce-points { grid-template-columns: 1fr; }
  .hero-commerce-points > span:last-child { grid-column: auto; }
  .mobile-fast-track-action { grid-template-columns: 1fr; }
  .mobile-fast-track-action > span { grid-template-columns: auto 1fr; align-items: baseline; gap: 6px; }
  .mobile-buy-bar small { max-width: 105px; }
  .mobile-buy-bar .button { min-width: 148px; padding-inline: 12px; }
  .config-tiles.cols-2,
  #bike-options,
  #button-options { grid-template-columns: 1fr; }
}

@media (hover: none) and (pointer: coarse) {
  .button:hover,
  .bike-card:hover img,
  .price-card:hover,
  .config-tile:hover,
  .system-card:hover,
  .button-product:hover figure img,
  .install-step:hover { transform: none; }
}

/* Mobile stability pass — no sideways page or sideways product navigation. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

@media (max-width: 1180px) {
  html,
  body { scrollbar-width: none; }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .cart-button > span { display: none; }
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .cart-body::-webkit-scrollbar,
  .mobile-menu::-webkit-scrollbar,
  .locale-menu::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  main,
  .site-header,
  .announcement,
  .footer {
    width: 100%;
    max-width: 100%;
  }
  main > *,
  .site-header > * { min-width: 0; }

  .site-header { grid-template-columns: minmax(0,1fr) auto; }
  .header-actions { min-width: 0; }
  .locale-button b,
  .cart-button > span { display: none !important; }
  .menu-button { display: block; }

  .proof-strip,
  .stealth-rail,
  .bike-grid,
  .pricing-grid,
  .system-grid,
  .relay-examples,
  .button-product-grid {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior: auto;
  }

  .proof-strip {
    display: grid;
    padding: 14px var(--mobile-gutter) 17px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .proof-item {
    width: 100%;
    min-width: 0;
    min-height: 76px;
    padding: 11px;
    align-items: flex-start;
    flex: none;
    scroll-snap-align: none;
  }
  .proof-item > div { min-width: 0; }
  .proof-item strong,
  .proof-item small { overflow-wrap: anywhere; }

  .stealth-rail {
    display: grid;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .stealth-rail article {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 21px;
    flex: none;
    overflow: hidden;
    scroll-snap-align: none;
  }
  .stealth-rail article::before { top: 0; }
  .stealth-symbol { margin: 18px 0; }

  .bike-grid {
    display: grid;
    padding: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }
  .bike-card,
  .bike-card:nth-child(4),
  .bike-card-wide {
    width: 100%;
    min-width: 0;
    min-height: 270px;
    flex: none;
    grid-column: auto;
    scroll-snap-align: none;
  }
  .bike-card-wide { min-height: 310px; grid-column: 1 / -1; }
  .bike-copy { padding: 15px; }
  .bike-copy strong { font-size: 1.05rem; overflow-wrap: anywhere; }
  .bike-copy small { font-size: 7px; }
  .bike-copy > span { font-size: .67rem; }
  .bike-gallery-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: wrap;
  }
  .bike-gallery-tabs button { flex: 0 1 auto; }

  .pricing-grid {
    display: grid;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .price-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: none;
    scroll-snap-align: none;
  }

  .system-grid {
    display: grid;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .system-card,
  .system-card-main,
  .system-card-app,
  .system-card-watch {
    width: 100%;
    min-width: 0;
    min-height: 450px;
    flex: none;
    scroll-snap-align: none;
  }

  .relay-examples {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .relay-examples article {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: none;
    scroll-snap-align: none;
  }

  .button-product-grid {
    display: grid;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .button-product {
    width: 100%;
    min-width: 0;
    flex: none;
    scroll-snap-align: none;
  }

  .hero-commerce .pay-row,
  .cart-pay { flex-wrap: wrap; }
  .config-tile,
  .preview-list li,
  .preview-list li span,
  .mobile-fast-track { min-width: 0; overflow-wrap: anywhere; }

  .mobile-buy-bar > div { max-width: 102px; flex: 0 1 102px; }
  .mobile-buy-bar .button {
    min-width: 0;
    padding-inline: 12px;
    flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  .proof-strip { grid-template-columns: 1fr; }
  .proof-item { min-height: 64px; align-items: center; }
  .bike-grid { grid-template-columns: 1fr; }
  .bike-card,
  .bike-card:nth-child(4),
  .bike-card-wide { min-height: 310px; grid-column: auto; }
  .mobile-buy-bar > div { max-width: 82px; flex-basis: 82px; }
  .mobile-buy-bar .button { min-width: 0; padding-inline: 10px; font-size: .61rem; }
}

/* Compact mobile benefit cards below the before/after comparison. */
@media (max-width: 820px) {
  .experience-benefits {
    margin-top: 22px;
    gap: 8px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  .experience-benefits article {
    display: grid;
    min-height: 0;
    padding: 17px !important;
    grid-template-columns: 27px minmax(0,1fr);
    align-items: start;
    gap: 5px 10px;
    border: 1px solid var(--line-light) !important;
    border-radius: 17px;
    background: rgba(255,255,255,.035);
  }
  .experience-benefits article > span {
    grid-row: 1 / 3;
    padding-top: 3px;
    font-size: 9px;
  }
  .experience-benefits h3 {
    margin: 0;
    font-size: .96rem;
    line-height: 1.25;
  }
  .experience-benefits p {
    margin: 0;
    font-size: .76rem;
    line-height: 1.48;
  }
}

/* Compact mobile pricing — three clear choices without a very long section. */
@media (max-width: 820px) {
  .pricing-section { padding-top: 58px; padding-bottom: 58px; }
  .pricing-section .section-heading { margin-bottom: 22px; }
  .pricing-section .section-heading h2 {
    max-width: 100%;
    font-size: clamp(2rem,9.7vw,2.65rem);
    line-height: .96;
    letter-spacing: -.065em;
  }
  .pricing-grid { gap: 8px; }
  .price-card {
    padding: 20px 18px 18px;
    border-radius: 18px;
  }
  .price-card-featured { border-width: 1px; box-shadow: 0 12px 30px rgba(58,33,118,.11); }
  .price-ribbon { top: 12px; right: 12px; }
  .price-card h3 {
    min-height: 0;
    max-width: calc(100% - 86px);
    margin: 9px 0;
    font-size: 1rem;
    line-height: 1.3;
  }
  .price-card:not(.price-card-featured) h3 { max-width: 100%; }
  .price-compare { margin: 3px 0 -5px; font-size: 10px; }
  .price-value { margin: 8px 0 15px; }
  .price-value strong { font-size: 2.15rem; }
  .price-card ul { margin-bottom: 17px; gap: 6px; }
  .price-card li { padding-left: 18px; font-size: 11.5px; line-height: 1.35; }
  .price-card li::before { margin-left: -18px; margin-right: 8px; }
  .price-card li:nth-child(n+4) { display: none; }
  .price-card .button { min-height: 48px; font-size: .72rem; }
  .pricing-note { font-size: 8px; }
}

/* Compact mobile Relay Box section. */
@media (max-width: 820px) {
  .relay-section { padding-top: 58px; padding-bottom: 58px; }
  .relay-section .section-heading { margin-bottom: 22px; }
  .relay-section .section-heading h2 {
    font-size: clamp(2rem,9.7vw,2.65rem);
    line-height: .96;
    letter-spacing: -.065em;
  }
  .relay-layout { gap: 8px; }
  .relay-product { min-height: 230px; border-radius: 18px; }
  .relay-product img { width: min(58%,210px); }
  .relay-product span { bottom: 13px; left: 14px; font-size: 7px; }
  .relay-examples {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
  }
  .relay-examples article {
    display: grid;
    min-height: 128px;
    padding: 15px;
    align-content: start;
    gap: 7px;
    border-radius: 16px;
  }
  .relay-examples article > span { font-size: 7px; line-height: 1.3; }
  .relay-examples h3 { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.15; }
  .relay-examples p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .relay-warnings { margin-top: 8px; gap: 7px; }
  .relay-warnings p { padding: 13px 14px; border-radius: 12px; font-size: 10px; line-height: 1.45; }
}

/* Three button choices: use the last free grid cell instead of leaving a hole. */
@media (max-width: 820px) {
  #button-options .config-tile:last-child {
    min-height: 138px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(112px,38%) minmax(0,1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 15px;
  }
  #button-options .config-tile:last-child img {
    width: 100%;
    height: 112px;
    margin: 0;
    grid-row: 1 / 3;
    object-fit: contain;
    transform: scale(1.16) translateZ(0);
  }
  #button-options .config-tile:last-child strong { align-self: end; font-size: 14px; }
  #button-options .config-tile:last-child small { align-self: start; font-size: 11px; }
  #button-options .config-tile:last-child.is-active img { transform: scale(1.2) translateZ(0); }
}

/* Final mobile configurator system — one consistent layout for every step. */
@media (max-width: 820px) {
  .config-section.zone-light {
    padding: 58px 12px 72px;
  }
  .config-section .section-head {
    margin: 0 4px 25px;
  }
  .config-section .section-head.split { gap: 10px; }
  .config-section .kicker { margin-bottom: 10px; font-size: 9px; }
  .config-section .section-head h2 {
    font-size: clamp(2.2rem,10.5vw,3rem);
    line-height: .98;
  }
  .config-section .lead {
    max-width: 42ch;
    font-size: .8rem;
    line-height: 1.5;
  }
  .config-shell { display: block; }
  .config-steps { gap: 10px; }
  .config-shell .config-progress {
    position: static;
    height: 5px;
    margin: 0 4px 3px;
    box-shadow: none;
  }
  .config-group {
    padding: 16px 13px;
    border-radius: 18px;
    box-shadow: 0 5px 16px rgba(16,19,42,.045);
  }
  .config-group-head h3 {
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.25;
  }
  .config-group-head h3 small { margin-left: 31px; font-size: 9.5px; }
  .step-badge { width: 24px; height: 24px; border-radius: 8px; }
  .config-helper { margin-top: 7px; font-size: 10.5px; line-height: 1.45; }
  .config-tiles { margin-top: 11px; gap: 8px; }
  #intent-options { grid-template-columns: 1fr; }
  #bike-options,
  .config-tiles.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .config-tile {
    min-width: 0;
    min-height: 76px;
    padding: 12px;
    gap: 4px;
    border-radius: 13px;
    overflow: hidden;
  }
  .config-tile strong { padding-right: 21px; font-size: 12px; line-height: 1.25; }
  .config-tile small { font-size: 10px; line-height: 1.35; }
  .config-tile .tile-extra,
  .config-tile .tile-note { font-size: 8.5px; line-height: 1.3; }
  .config-tile.is-active::after { top: 8px; right: 8px; width: 17px; height: 17px; }
  .config-tile.is-active::before { top: 12px; right: 12px; width: 9px; height: 9px; }

  #bike-options .config-tile {
    min-height: 154px;
    padding: 9px;
    align-content: start;
  }
  #bike-options .config-tile img {
    width: 100%;
    height: 92px;
    aspect-ratio: auto;
    margin: 0 0 5px;
    object-fit: contain;
  }
  #bike-options .config-tile strong { font-size: 12px; }
  #bike-options .config-tile small { font-size: 9px; }

  #button-options { grid-template-columns: 1fr; }
  #button-options .config-tile,
  #button-options .config-tile:last-child {
    min-height: 104px;
    padding: 10px 11px;
    grid-column: auto;
    grid-template-columns: 88px minmax(0,1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: 3px 12px;
  }
  #button-options .config-tile img,
  #button-options .config-tile:last-child img {
    width: 88px;
    height: 82px;
    margin: 0;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    object-fit: contain;
    transform: scale(1.05) translateZ(0);
  }
  #button-options .config-tile strong,
  #button-options .config-tile:last-child strong {
    align-self: end;
    padding-right: 23px;
    font-size: 13px;
  }
  #button-options .config-tile small,
  #button-options .config-tile:last-child small {
    align-self: start;
    font-size: 10px;
  }
  #button-options .config-tile.is-active img,
  #button-options .config-tile:last-child.is-active img {
    transform: scale(1.08) translateZ(0);
  }

  .config-preview { margin-top: 12px; }
  .preview-sticky {
    border-radius: 20px;
    box-shadow: 0 15px 38px rgba(16,19,42,.1);
  }
  .preview-media { min-height: 330px; padding: 14px; }
  .preview-badge { top: 11px; left: 11px; padding: 7px 10px; font-size: 8px; }
  .preview-body { padding: 17px 15px; gap: 9px; }
  .preview-body h3 { font-size: 20px; line-height: 1.08; }
  .preview-body > p { font-size: 11.5px; line-height: 1.42; }
  .preview-list { gap: 3px; font-size: 10.5px; }
  .preview-list li { min-width: 0; min-height: 22px; padding-bottom: 4px; gap: 10px; }
  .preview-list li span:first-child { flex: 0 0 auto; }
  .preview-list li span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .preview-save { padding: 5px 8px; font-size: 10px !important; }
  .preview-price-row { align-items: center; }
  .preview-price { min-width: 0; font-size: 29px; }
  .preview-anchor { font-size: 10px; }
  .preview-stock { font-size: 9.5px; }
  .preview-actions { grid-template-columns: 1fr; gap: 7px; }
  .preview-actions .button { min-height: 50px; font-size: 12px; }
  .preview-actions .button-ghost { min-height: 44px; }
}

@media (max-width: 350px) {
  .config-section.zone-light { padding-inline: 9px; }
  .config-group { padding-inline: 11px; }
  #bike-options { grid-template-columns: 1fr; }
  #bike-options .config-tile {
    min-height: 112px;
    grid-template-columns: 105px minmax(0,1fr);
    grid-template-rows: auto auto;
    align-content: center;
  }
  #bike-options .config-tile img { width: 105px; height: 88px; margin: 0; grid-row: 1 / 3; }
  .preview-price-row { align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* Universal closes the last open cell in the two-column bike grid. */
@media (max-width: 820px) {
  #bike-options .config-tile:last-child {
    min-height: 126px;
    padding: 10px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(118px,44%) minmax(0,1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: center;
    gap: 3px 13px;
  }
  #bike-options .config-tile:last-child img {
    width: 100%;
    height: 106px;
    margin: 0;
    grid-row: 1 / 4;
    object-fit: contain;
  }
  #bike-options .config-tile:last-child strong { align-self: end; font-size: 13px; }
  #bike-options .config-tile:last-child small { align-self: start; font-size: 10px; }
  #bike-options .config-tile:last-child .tile-note { align-self: start; }
}

/* Balance the wide Universal card instead of leaving its copy at the top. */
@media (max-width: 820px) {
  #bike-options .config-tile:last-child {
    min-height: 120px;
    padding: 8px;
    grid-template-columns: minmax(112px,42%) minmax(0,1fr);
    grid-template-rows: 1fr auto auto 1fr;
    gap: 4px 14px;
    background: linear-gradient(135deg,rgba(16,19,42,.025),rgba(105,65,220,.055));
  }
  #bike-options .config-tile:last-child img {
    width: 100%;
    height: 102px;
    grid-row: 1 / 5;
    border-radius: 9px;
    filter: drop-shadow(0 7px 13px rgba(16,19,42,.15));
  }
  #bike-options .config-tile:last-child strong {
    align-self: end;
    padding-right: 24px;
    grid-row: 2;
    font-size: 14px;
  }
  #bike-options .config-tile:last-child small {
    max-width: 18ch;
    align-self: start;
    grid-row: 3;
    font-size: 10.5px;
    line-height: 1.4;
  }
  #bike-options .config-tile:last-child .tile-note {
    align-self: start;
    grid-row: 4;
  }
  #bike-options .config-tile:last-child.is-active {
    background: linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  }
}

@media (max-width: 820px) {
  html[lang="sv"] .hero h1 {
    font-size: clamp(2.65rem,12.5vw,3.4rem);
    letter-spacing: -.07em;
  }
}

/* Match the visible size of Button 2 and the tall Button 3 source to Button 1. */
@media (max-width: 820px) {
  #button-options .config-tile:nth-child(2) img {
    transform: translate3d(2px,1px,0) scale(1.3);
  }
  #button-options .config-tile:nth-child(2).is-active img {
    transform: translate3d(2px,1px,0) scale(1.34);
  }
  #button-options .config-tile:nth-child(3) img {
    clip-path: inset(0 27% 0 0);
    transform: translate3d(0,-1px,0) scale(3.1);
    transform-origin: 50% 50%;
  }
  #button-options .config-tile:nth-child(3).is-active img {
    transform: translate3d(0,-1px,0) scale(3.16);
  }
}

/* Keep every piece of purchasing information comfortably readable on mobile. */
@media (max-width: 820px) {
  .preview-body {
    padding: 19px 16px 18px;
    gap: 11px;
  }
  .preview-body h3 {
    font-size: 22px;
    line-height: 1.08;
  }
  .preview-body > p {
    color: #56607e;
    font-size: 13px;
    line-height: 1.48;
  }
  .preview-list {
    gap: 4px;
    font-size: 12px;
    line-height: 1.35;
  }
  .preview-list li {
    min-height: 26px;
    padding-bottom: 5px;
    gap: 12px;
  }
  .preview-list li span:first-child {
    color: #66708f;
  }
  .preview-list li span:last-child {
    color: #10132a;
    font-weight: 700;
  }
  .preview-save {
    padding: 7px 11px;
    background: rgba(12,157,102,.11);
    color: #087a50 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }
  .preview-price { font-size: 31px; }
  .preview-anchor { font-size: 11px; }
  .preview-stock { font-size: 11px; }
  .preview-actions .button { font-size: 13px; }
}

/* Mobile already explains App and Watch below, so keep this section focused. */
@media (max-width: 820px) {
  .system-section { padding-block: 64px; }
  .system-title-desktop,
  .system-kicker-desktop,
  .system-section .section-heading > p,
  .system-command-bar,
  .system-card-app,
  .system-card-watch { display: none; }
  .system-title-mobile,
  .system-kicker-mobile { display: inline; }
  .system-section .section-heading { margin-bottom: 22px; }
  .system-section .section-heading h2 {
    max-width: none;
    font-size: clamp(2.35rem,11vw,3.1rem);
    line-height: .98;
  }
  .system-grid {
    padding: 7px;
    border: 1px solid var(--system-line);
    border-radius: 26px;
  }
  .system-card-main {
    min-height: 440px;
    border-radius: 21px;
  }
}

/* Compact mobile button catalogue: large products, much less vertical travel. */
@media (max-width: 820px) {
  .buttons-section {
    padding: 62px 12px 68px;
  }
  .buttons-section .section-heading {
    margin: 0 4px 20px;
  }
  .buttons-section .section-heading > p,
  #buttons-title br,
  #buttons-title em {
    display: none;
  }
  #buttons-title {
    font-size: clamp(2.25rem,10vw,2.85rem);
    line-height: .98;
  }
  .button-product-grid {
    gap: 8px;
  }
  .button-product {
    display: grid;
    min-height: 164px;
    padding: 10px;
    grid-template-columns: minmax(112px,38%) minmax(0,1fr);
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    gap: 4px 13px;
    border-radius: 18px;
  }
  .button-product figure {
    width: 100%;
    height: 144px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / 5;
    border-radius: 13px;
  }
  .button-product figure img,
  .button-product:hover figure img {
    width: 94%;
    height: 94%;
    transform: none;
  }
  .button-product > span {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .button-product h3 {
    margin: 3px 0 1px;
    grid-column: 2;
    grid-row: 2;
    font-size: 1.08rem;
    line-height: 1.15;
  }
  .button-product p {
    min-height: 0;
    margin: 0;
    grid-column: 2;
    grid-row: 3;
    color: #66708a;
    font-size: 11px;
    line-height: 1.4;
  }
  .button-product > small {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    font-size: 7px;
  }
  .button-product-light figure img,
  .button-product-light:hover figure img {
    clip-path: inset(0 8% 0 0);
    transform: translate3d(6px,0,0) scale(1.65);
  }
}

/* The mobile buy bar hides at the footer, so no blank reservation is needed. */
@media (max-width: 820px) {
  body { padding-bottom: 0; }
}

/* Fast, reliable YouTube facades avoid iframe error 153 in local previews. */
.youtube-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9 !important;
  isolation: isolate;
}
.youtube-facade::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,rgba(5,5,12,.5),transparent 55%);
  content: "";
  transition: background .25s ease;
}
.youtube-facade > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .35s ease,transform .55s cubic-bezier(.2,.7,.2,1);
}
.youtube-facade .youtube-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #f03;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
  transform: translate(-50%,-50%);
  transition: transform .25s ease,background .25s ease;
}
.youtube-facade .youtube-play svg { width: 24px; height: 24px; fill: currentColor; }
.youtube-facade > small {
  position: absolute;
  right: 13px;
  bottom: 11px;
  z-index: 2;
  color: rgba(255,255,255,.82);
  font: 600 8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.youtube-facade:hover > img { filter: brightness(.82) saturate(1.08); transform: scale(1.025); }
.youtube-facade:hover .youtube-play { background: #ff1645; transform: translate(-50%,-50%) scale(1.07); }
@media (max-width: 820px) {
  .youtube-facade .youtube-play { width: 54px; height: 40px; border-radius: 12px; }
}

/* Refined before/after control: quieter on the photo, clearer to drag. */
.compare-line {
  width: 2px;
  background: linear-gradient(to bottom,transparent 3%,rgba(255,255,255,.76) 16%,rgba(255,255,255,.76) 84%,transparent 97%);
  box-shadow: 0 0 14px rgba(118,89,255,.16);
}
.compare-line span {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  background: linear-gradient(rgba(10,10,21,.82),rgba(17,17,31,.74)) padding-box,var(--gradient) border-box;
  box-shadow: 0 10px 28px rgba(0,0,0,.38),0 0 0 4px rgba(118,89,255,.12),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.compare-line span::before,
.compare-line span::after {
  width: 8px;
  height: 8px;
  flex: none;
  border-top: 1.5px solid rgba(255,255,255,.92);
  border-right: 1.5px solid rgba(255,255,255,.92);
  content: "";
}
.compare-line span::before { transform: rotate(-135deg); }
.compare-line span::after { transform: rotate(45deg); }
@media (max-width: 820px) {
  .compare-line span {
    width: 44px;
    height: 44px;
    gap: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,.4),0 0 0 3px rgba(118,89,255,.11),inset 0 1px 0 rgba(255,255,255,.14);
  }
  .compare-line span::before,
  .compare-line span::after { width: 7px; height: 7px; }
}

/* Short mobile installation path without sacrificing readable steps or links. */
@media (max-width: 820px) {
  .install-section {
    padding: 60px 12px 66px;
  }
  .install-section .section-heading {
    margin: 0 4px 19px;
  }
  .install-section .section-heading .eyebrow,
  .install-section .section-heading > p,
  .install-title-desktop { display: none; }
  .install-title-mobile {
    display: inline;
  }
  .install-title-mobile::after { content: "."; }
  .install-section .section-heading h2 {
    font-size: clamp(2.3rem,10.5vw,2.9rem);
    line-height: .98;
  }
  .install-journey { gap: 8px; }
  .install-visual {
    height: 285px;
    border-radius: 19px;
  }
  .install-visual figcaption {
    right: 15px;
    bottom: 14px;
    left: 15px;
    font-size: 7px;
  }
  .install-steps { gap: 8px; }
  .install-step {
    min-height: 112px;
    padding: 16px 14px 16px 64px;
    border-radius: 16px;
  }
  .install-step > span {
    left: 14px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 8px;
  }
  .install-step h3 {
    margin-bottom: 5px;
    font-size: 1.03rem;
  }
  .install-step p {
    font-size: 11px;
    line-height: 1.45;
  }
  .guide-links {
    margin-top: 9px;
    padding: 10px;
    gap: 7px;
    border-radius: 16px;
  }
  .guide-links > span { margin: 2px 3px 3px; }
  .guide-links a {
    padding: 12px;
    grid-template-columns: 28px minmax(0,1fr) auto;
    gap: 9px;
    border-radius: 12px;
  }
  .guide-links a strong { font-size: 12px; }
  .guide-links a small { font-size: 9px; }
}

/* Bind the footer to document width; embedded file previews can misreport vw. */
@media (max-width: 820px) {
  html { background: #06060c; }
  .footer {
    position: relative;
    right: auto;
    left: auto;
    width: 100%;
    min-width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
}

/* Preserve the 2 × 2 + wide bike grid and show every motorcycle in full. */
@media (max-width: 820px) {
  .bike-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }
  .bike-card,
  .bike-card:nth-child(4) {
    min-height: 270px;
    grid-column: auto;
  }
  .bike-card-wide {
    min-height: 300px;
    grid-column: 1 / -1;
  }
  .bike-card img,
  .bike-card-wide img {
    width: 100%;
    height: 100%;
    padding: 8px 5px 72px;
    object-fit: contain;
    object-position: center;
    filter: saturate(1.03) contrast(1.02);
    transform: none;
  }
  .bike-card-wide img { padding-inline: 12px; }
  .bike-card:hover img { transform: none; }
  .bike-overlay {
    background: linear-gradient(to top,rgba(6,6,12,.98) 0,rgba(6,6,12,.78) 24%,rgba(6,6,12,.08) 57%,transparent 76%);
  }
}
@media (max-width: 380px) {
  .bike-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bike-card,
  .bike-card:nth-child(4) { min-height: 258px; grid-column: auto; }
  .bike-card-wide { min-height: 288px; grid-column: 1 / -1; }
  .bike-card img,
  .bike-card-wide img { padding: 7px 4px 70px; }
  .bike-copy { padding: 13px; }
  .bike-copy strong { font-size: .94rem; }
  .bike-copy > span { font-size: .61rem; }
}

/* Clean mobile gallery navigation without overlapping rings. */
@media (max-width: 680px) {
  .bike-gallery .gallery-caption {
    min-height: 64px;
    padding-right: 104px;
  }
  .gallery-arrow {
    top: auto;
    bottom: 27px;
    width: 38px;
    height: 38px;
    border-color: rgba(255,255,255,.24);
    border-radius: 11px;
    background: rgba(8,8,17,.78);
    font-size: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
    transform: none;
  }
  .gallery-arrow::before {
    width: 16px;
    height: 16px;
    border: 0;
    background: rgba(255,255,255,.9);
    content: "";
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  }
  .gallery-arrow-prev {
    right: 70px;
    left: auto;
  }
  .gallery-arrow-prev::before { transform: rotate(180deg); }
  .gallery-arrow-next { right: 24px; }
  .gallery-arrow:hover {
    background: rgba(82,55,174,.9);
    transform: none;
  }
  .gallery-arrow:focus-visible {
    border-color: rgba(179,143,255,.88);
    outline: none;
    box-shadow: 0 0 0 2px rgba(133,75,255,.24),0 8px 20px rgba(0,0,0,.3);
  }
}

/* Configurator bike choices mirror the premium bike-card visual language. */
@media (max-width: 820px) {
  #bike-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  #bike-options .config-tile,
  #bike-options .config-tile:last-child {
    position: relative;
    display: block;
    min-height: 172px;
    padding: 0;
    grid-column: auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 30%,#303035 0,#191920 54%,#0b0b12 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    isolation: isolate;
  }
  #bike-options .config-tile:last-child {
    min-height: 188px;
    grid-column: 1 / -1;
  }
  #bike-options .config-tile img,
  #bike-options .config-tile:last-child img {
    position: absolute;
    top: 3px;
    right: 3px;
    left: 3px;
    z-index: 0;
    width: calc(100% - 6px);
    height: 76%;
    margin: 0;
    padding: 3px;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
    filter: saturate(1.04) contrast(1.03) drop-shadow(0 10px 16px rgba(0,0,0,.28));
    transform: none;
    -webkit-mask-image: linear-gradient(to bottom,#000 0,#000 68%,rgba(0,0,0,.76) 82%,transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0,#000 68%,rgba(0,0,0,.76) 82%,transparent 100%);
  }
  #bike-options .config-tile strong,
  #bike-options .config-tile:last-child strong,
  #bike-options .config-tile small,
  #bike-options .config-tile:last-child small,
  #bike-options .config-tile .tile-note,
  #bike-options .config-tile:last-child .tile-note {
    position: absolute;
    right: 11px;
    left: 11px;
    z-index: 2;
    margin: 0;
    padding: 0;
  }
  #bike-options .config-tile strong,
  #bike-options .config-tile:last-child strong {
    bottom: 34px;
    color: #fff;
    font-size: 13px;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,.62);
  }
  #bike-options .config-tile small,
  #bike-options .config-tile:last-child small {
    bottom: 14px;
    overflow: hidden;
    color: rgba(255,255,255,.56);
    font: 500 8px/1.25 var(--mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #bike-options .config-tile .tile-note,
  #bike-options .config-tile:last-child .tile-note {
    bottom: 9px;
    color: rgba(195,168,255,.78);
    font-size: 7px;
  }
  #bike-options .config-tile:has(.tile-note) strong { bottom: 47px; }
  #bike-options .config-tile:has(.tile-note) small { bottom: 28px; }
  #bike-options .config-tile.is-active,
  #bike-options .config-tile:last-child.is-active {
    border: 1px solid transparent;
    background: radial-gradient(circle at 50% 30%,#303035 0,#191920 54%,#0b0b12 100%) padding-box,var(--grad) border-box;
    box-shadow: 0 10px 25px rgba(109,46,230,.2),inset 0 1px 0 rgba(255,255,255,.07);
  }
  #bike-options .config-tile.is-active img,
  #bike-options .config-tile:last-child.is-active img {
    filter: saturate(1.1) contrast(1.04) drop-shadow(0 11px 18px rgba(0,0,0,.3));
    transform: none;
  }
}
@media (max-width: 350px) {
  #bike-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #bike-options .config-tile { min-height: 164px; }
  #bike-options .config-tile:last-child { min-height: 180px; grid-column: 1 / -1; }
  #bike-options .config-tile strong,
  #bike-options .config-tile:last-child strong { font-size: 12px; }
}

/* Responsive continuity: phone -> large phone -> tablet without broken
   intermediate layouts. Keep copy readable, remove empty card space and make
   every product / installation image independent of a fixed viewport crop. */
.install-visual img { object-position: center 55%; }
.button-product-light figure img,
.button-product-light:hover figure img {
  width: 100%;
  height: 100%;
  clip-path: none;
  object-fit: contain;
  transform: scale(1.65) translate(2%,-10%);
  transform-origin: center;
}
.price-card .button-secondary {
  border-color: rgba(79,61,133,.2);
  background: #f4f0ff;
  color: #352256;
}
.price-card .button-secondary:hover {
  border-color: rgba(112,71,220,.42);
  background: #ece5ff;
  color: #24143f;
}

@media (max-width: 980px) {
  .stealth-heading {
    grid-template-columns: minmax(0,1fr);
    align-items: start;
    gap: 18px;
  }
  .stealth-heading .eyebrow { grid-column: 1; }
  .stealth-heading h2 {
    max-width: 17ch;
    font-size: clamp(2.45rem,6.3vw,3.75rem);
    text-wrap: balance;
  }
  .stealth-heading > p:last-child {
    max-width: 58ch;
    margin: 0;
  }
  .stealth-rail {
    margin-top: 34px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    border-top: 0;
  }
  .stealth-rail::before { display: none; }
  .stealth-rail article {
    min-height: 230px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--line-light) !important;
    border-radius: 20px;
    background: rgba(255,255,255,.025);
  }
  .stealth-rail article::before { top: 0; }
  .stealth-symbol { margin: 20px 0; }

  .buttons-section .section-heading h2,
  .pricing-section .section-heading h2,
  .install-section .section-heading h2 {
    text-wrap: balance;
  }
}

@media (min-width: 821px) and (max-width: 980px) {
  .pricing-section,
  .buttons-section { padding-block: 76px; }
  .pricing-section .section-heading,
  .buttons-section .section-heading { margin-bottom: 34px; }
  .pricing-section .section-heading h2,
  .buttons-section .section-heading h2 {
    font-size: clamp(2.75rem,6vw,3.5rem);
    line-height: .98;
  }

  .pricing-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: stretch;
    gap: 10px;
  }
  .price-card {
    min-width: 0;
    padding: 20px;
    border-radius: 20px;
  }
  .price-card-featured { transform: none; }
  .price-ribbon {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 11px;
    white-space: normal;
  }
  .price-card h3 {
    min-height: 64px;
    margin: 10px 0;
    font-size: 1.02rem;
    line-height: 1.28;
  }
  .price-value { margin: 10px 0 18px; }
  .price-value strong { font-size: clamp(2rem,4.6vw,2.6rem); }
  .price-card ul { margin-bottom: 20px; gap: 7px; }
  .price-card li { padding-left: 18px; font-size: 11.5px; line-height: 1.38; }
  .price-card li::before { margin-left: -18px; margin-right: 8px; }
  .price-card .button { min-height: 48px; padding-inline: 12px; font-size: .7rem; }

  .button-product-grid { gap: 10px; }
  .button-product {
    min-width: 0;
    padding: 12px 12px 20px;
    border-radius: 21px;
  }
  .button-product figure {
    height: 240px;
    margin-bottom: 16px;
    border-radius: 16px;
  }
  .button-product:not(.button-product-light) figure img {
    width: 84%;
    height: 84%;
  }
  .button-product h3 { margin: 9px 0 7px; font-size: 1.2rem; line-height: 1.15; }
  .button-product p { min-height: 72px; font-size: .78rem; line-height: 1.45; }

  .install-section { padding-block: 76px; }
  .install-section .section-heading { margin-bottom: 34px; }
  .install-journey { grid-template-columns: 1fr; gap: 10px; }
  .install-visual { height: clamp(380px,49vw,440px); }
  .install-steps {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: none;
    gap: 8px;
  }
  .install-step {
    min-height: 158px;
    padding: 59px 17px 18px;
    justify-content: flex-start;
    border-radius: 18px;
  }
  .install-step > span {
    top: 16px;
    left: 17px;
    width: 34px;
    height: 34px;
  }
  .install-step h3 { font-size: 1rem; }
  .install-step p { font-size: 11px; line-height: 1.42; }
}

@media (min-width: 520px) and (max-width: 820px) {
  .stealth-rail {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }
  .stealth-rail article { min-height: 230px; }

  .button-product {
    grid-template-columns: minmax(150px,35%) minmax(0,1fr);
  }
  .button-product:not(.button-product-light) figure img,
  .button-product:not(.button-product-light):hover figure img {
    width: 90%;
    height: 90%;
  }

  .install-visual { height: clamp(305px,58vw,360px); }
}

@media (min-width: 720px) and (max-width: 820px) {
  .pricing-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: stretch;
    gap: 8px;
  }
  .price-card { min-width: 0; padding: 17px 15px; }
  .price-card-featured { transform: none; }
  .price-ribbon {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 9px;
    white-space: normal;
  }
  .price-card h3,
  .price-card:not(.price-card-featured) h3 {
    min-height: 58px;
    max-width: 100%;
    font-size: .88rem;
  }
  .price-value strong { font-size: 1.85rem; }
  .price-card li { font-size: 10.5px; }
  .price-card .button { padding-inline: 9px; font-size: .62rem; }
}

@media (max-width: 519px) {
  .stealth-rail { grid-template-columns: minmax(0,1fr); }
  .stealth-rail article { min-height: 0; }
  .button-product:not(.button-product-light) figure img,
  .button-product:not(.button-product-light):hover figure img {
    width: 91%;
    height: 91%;
  }
}

/* ===== Mobile conversion, accessibility and loading-quality audit ===== */
:where(a,button,input,summary):focus-visible {
  outline: 3px solid rgba(133,75,255,.55);
  outline-offset: 3px;
}

/* The primary message must paint immediately. Waiting for the reveal observer
   here delays the perceived load and can delay the LCP candidate. */
.hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 820px) {
  .locale-button,
  .cart-button,
  .menu-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .brand { min-height: 44px; }

  .hero {
    padding: 32px var(--mobile-gutter) 38px;
    gap: 20px;
  }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero h1 {
    font-size: clamp(2.85rem,13.6vw,3.65rem);
    line-height: .92;
  }
  .hero-lead {
    margin-top: 17px;
    font-size: .86rem;
    line-height: 1.48;
  }
  .hero-actions { margin-top: 19px; }
  .hero-actions .button-primary { min-height: 54px; }
  .hero-actions .button-secondary,
  .hero-from-price { min-height: 44px; }
  .hero-commerce {
    margin-top: 13px;
    padding: 10px;
  }
  .hero-commerce-points { gap: 8px; }
  .hero-commerce-points > span { font-size: 8.5px; }
  .hero-commerce-points > span:nth-child(3),
  .hero-commerce .pay-row { display: none; }
  .hero-visual { min-height: 330px; }
  .hero-photo {
    inset: 0 0 0 7%;
    border-radius: 72px 72px 22px 22px;
  }
  .hero-product {
    top: 12px;
    width: 132px;
    padding: 9px;
  }
  .hero-product img { height: 76px; }
  .hero-note {
    bottom: 12px;
    width: 169px;
    padding: 11px;
  }

  /* Fast scrolling should never leave half-transparent content behind. */
  .reveal {
    transform: translateY(12px);
    transition-duration: 420ms;
  }

  .text-link,
  .system-card a,
  .reel-instagram-link,
  .faq-intro > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .bike-gallery-tabs button,
  .gallery-arrow,
  .instagram-profile-action > a,
  .featured-reel-controls button,
  .cart-head button { min-width: 44px; min-height: 44px; }
  .gallery-arrow { width: 44px; height: 44px; }

  .cart-qty button {
    width: 40px;
    height: 40px;
  }
  .cart-line-price button {
    min-height: 32px;
    padding: 7px 0;
  }
  .cart-suggestion button { min-height: 44px; }
  .footer-main > div:not(:first-child) a {
    display: flex;
    min-height: 34px;
    align-items: center;
  }
}

@media (min-width: 360px) and (max-width: 519px) {
  /* Four benefits remain visible at once; no hidden sideways navigation and
     roughly half the previous vertical travel. */
  .stealth-rail {
    display: grid;
    margin: 27px 0 0;
    padding: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    overflow: visible;
  }
  .stealth-rail article {
    width: auto;
    min-width: 0;
    min-height: 225px;
    padding: 16px;
    border-radius: 17px;
  }
  .stealth-symbol {
    width: 42px;
    height: 42px;
    margin: 14px 0;
    border-radius: 12px;
  }
  .stealth-symbol svg { width: 20px; height: 20px; }
  .stealth-rail h3 {
    margin-bottom: 8px;
    font-size: .94rem;
    line-height: 1.2;
  }
  .stealth-rail p {
    font-size: .69rem;
    line-height: 1.45;
  }
}

@media (max-width: 519px) {
  .experience,
  .stealth-editorial,
  .bike-section,
  .pricing-section,
  .app-section,
  .watch-siri,
  .relay-section,
  .social-section,
  .faq-section { padding-block: 58px; }

  .app-section { gap: 20px; }
  .app-visual { min-height: 375px; }
  .watch-siri { gap: 18px; }
  .watch-art {
    min-height: 400px;
    margin-block: -34px;
    transform: scale(.78);
  }
  .feature-lines { margin-top: 18px; }
  .feature-lines > div { padding: 12px 0; }

  .more-live { padding: 6px; }
  .more-live-heading { min-height: 44px; }
}

/* The reel itself is the explanation. Keep proof and CTA on every mobile and
   tablet width, but do not repeat a second long walkthrough below the video. */
@media (max-width: 820px) {
  .featured-reel-story { padding: 22px 18px 24px; }
  .featured-reel-story h3 {
    margin-bottom: 14px;
    font-size: clamp(2rem,7vw,2.8rem);
  }
  .featured-reel-story .reel-story-lead,
  .featured-reel-story .reel-story-steps,
  .featured-reel-story .reel-story-controls { display: none; }
  .reel-instagram-link {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(193,148,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    font-size: .68rem;
  }
}

@media (min-width: 360px) and (max-width: 820px) {
  .more-live-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }
  .more-live .media-card h3 {
    min-height: 43px;
    padding-inline: 12px;
    font-size: .82rem;
    line-height: 1.25;
  }
  .more-live .media-card > span { padding-inline: 12px; }
  .youtube-facade .youtube-play {
    width: 46px;
    height: 34px;
  }
}

@media (max-width: 359px) {
  .stealth-rail {
    display: grid;
    margin-inline: 0;
    padding-inline: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    overflow: visible;
  }
  .stealth-rail article {
    width: auto;
    min-width: 0;
    min-height: 234px;
    padding: 13px;
    border-radius: 16px;
  }
  .stealth-symbol { width: 39px; height: 39px; margin: 13px 0; }
  .stealth-rail h3 { margin-bottom: 7px; font-size: .88rem; line-height: 1.18; }
  .stealth-rail p { font-size: .64rem; line-height: 1.4; }
}

/* Small tablets and narrow laptop windows previously fell into a tall stacked
   layout. Keep the same content, but use the available width deliberately. */
@media (min-width: 821px) and (max-width: 980px) {
  .hero {
    min-height: 820px;
    padding: 66px 30px;
    grid-template-columns: minmax(0,1.05fr) minmax(330px,.8fr);
    align-items: center;
    gap: 30px;
  }
  .hero h1 { font-size: clamp(3.35rem,6.8vw,4.3rem); }
  .hero-lead { margin-top: 24px; font-size: .98rem; line-height: 1.55; }
  .hero-actions { margin-top: 26px; }
  .hero-commerce { margin-top: 22px; }
  .hero-visual { min-height: 590px; }
  .hero-photo { inset: 0 1% 0 8%; border-radius: 130px 130px 28px 28px; }
  .hero-product { left: -4%; width: 175px; }
  .hero-product img { height: 110px; }
  .hero-note { right: -2%; width: 185px; }

  .bike-section { padding-block: 76px; }
  .bike-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
  }
  .bike-card,
  .bike-card:nth-child(4) {
    min-height: 330px;
    grid-column: auto;
  }
  .bike-card-wide {
    min-height: 330px;
    grid-column: 2 / 4;
  }
  .bike-card img,
  .bike-card-wide img {
    width: 100%;
    height: 100%;
    padding: 8px 6px 76px;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
  .bike-card:hover img { transform: none; }

  .system-section { padding-block: 76px; }
  .system-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .system-card-main {
    min-height: 450px;
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .system-card-app,
  .system-card-watch { min-height: 440px; }
  .system-card-app .system-phone { width: 58%; }
  .system-card-watch .system-watch-device { width: 58%; }

  .app-section {
    min-height: 780px;
    padding-block: 76px;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: 38px;
  }
  .app-visual { min-height: 570px; grid-column: 1; grid-row: 1; }
  .app-copy { grid-column: 2; grid-row: 1; }

  .watch-siri {
    min-height: 780px;
    padding-block: 76px;
    grid-template-columns: minmax(300px,.8fr) minmax(0,1.1fr);
    gap: 38px;
  }
  .watch-art { min-height: 560px; }
  .watch-case { width: 260px; }
  .watch-band { width: 168px; height: 174px; }
  .watch-copy h2 { font-size: clamp(3rem,6.4vw,4.2rem); }

  .relay-section { padding-block: 76px; }
  .relay-layout {
    grid-template-columns: minmax(260px,.78fr) minmax(0,1.22fr);
    gap: 10px;
  }
  .relay-product { min-height: 470px; }
  .relay-examples article { min-height: 230px; padding: 20px; }
  .relay-examples h3 { margin: 28px 0 10px; font-size: 1.35rem; }
  .relay-examples p { font-size: .78rem; line-height: 1.5; }
}

@media (min-width: 880px) and (max-width: 900px) {
  .config-section .section-head.split {
    grid-template-columns: minmax(0,1fr) minmax(300px,.8fr);
    align-items: end;
  }
  .config-shell {
    grid-template-columns: minmax(0,.95fr) minmax(370px,1.05fr);
    gap: 18px;
  }
  .config-preview { align-self: stretch; }
  .preview-sticky { position: sticky; top: 80px; }
}

/* ===== Final responsive continuity fixes =====
   Keep off-canvas UI from ever widening the document at the 820/821 breakpoint. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* The configurator already uses two columns from tablet upward. At these
   intermediate widths, two choices per row keep every label and image legible. */
@media (min-width: 880px) and (max-width: 1024px) {
  .config-steps .config-tiles:not(.cols-2) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  #intent-options .config-tile:last-child,
  #bike-options .config-tile:last-child,
  #button-options .config-tile:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  /* The cart combines an icon and a count, so it needs slightly more than the
     bare 44 px accessibility minimum used by the other header controls. */
  .cart-button {
    width: 50px;
    min-width: 50px;
  }

  /* A later gallery rule previously shrank these controls back to 38 px. */
  .gallery-arrow {
    width: 44px;
    height: 44px;
  }
  .gallery-arrow-prev { right: 76px; }
  .gallery-arrow-next { right: 24px; }
}

@media (max-width: 350px) {
  .featured-reel-switcher button {
    min-height: 58px;
    padding-inline: 9px;
    gap: 7px;
  }
  .featured-reel-switcher button span {
    overflow: visible;
    font-size: .6rem;
    line-height: 1.12;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ===== Intermediate mobile visual fixes (520–820 px) =====
   Width/height attributes keep the layout stable while images load. Whenever
   CSS changes an image width, its height must be released again or Safari uses
   the intrinsic attribute height and turns the artwork into a tall slab. */
.device-frame .phone,
.watch-case img,
.system-card-app .system-phone img,
.system-card-watch .system-watch-device img,
.relay-product img {
  height: auto;
}

/* Keep the app preview recognisable as a phone instead of letting the tall
   source image turn into a full-card screen strip. The device sits in the
   visual half of the card and the copy retains its own clear reading area. */
.system-card-app .system-phone {
  right: -28px;
  width: 58%;
}
.system-card-app .system-phone img { display: block; }
.system-card-app p:not(.eyebrow) { max-width: 200px; }

@media (min-width: 821px) and (max-width: 980px) {
  .system-card-app .system-phone {
    right: -16px;
    bottom: -116px;
    width: 50%;
  }
}

@media (max-width: 820px) {
  /* Give the portrait hero photo enough depth on phones. The previous 330 px
     landscape crop hid most of the bike at wide-phone orientations. */
  .hero-visual { min-height: 405px; }
  .hero-photo {
    inset: 0 3%;
    border-radius: 82px 82px 22px 22px;
  }
  .hero-photo img { object-position: 52% 48%; }

  /* Configurator button art: one consistent media rail, with product-specific
     optical scaling instead of a 3.1x crop on the light-disguise button. */
  #button-options .config-tile,
  #button-options .config-tile:last-child {
    overflow: hidden;
  }
  #button-options .config-tile:nth-child(2) img,
  #button-options .config-tile:nth-child(2).is-active img {
    clip-path: none;
    transform: translate3d(1px,0,0) scale(1.38);
  }
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    clip-path: none;
    transform: translate3d(-4px,-1px,0) scale(2.08);
    transform-origin: center;
  }

  /* All three editorial cards keep the complete product inside their frame.
     Explicit height wins over a later width-only rule that clipped the lower
     half of Knopf 1 and Knopf 2. */
  .button-product:not(.button-product-light) figure img,
  .button-product:not(.button-product-light):hover figure img {
    width: 84%;
    height: 84%;
    max-height: 84%;
    object-fit: contain;
    transform: none;
  }
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: 84%;
    height: 84%;
    max-height: 84%;
    clip-path: none;
    object-fit: contain;
    transform: translate3d(2px,-7px,0) scale(1.38);
    transform-origin: center;
  }
}

@media (min-width: 520px) and (max-width: 820px) {
  /* A centred portrait crop shows the complete bike instead of stretching the
     photo across a tablet-wide, shallow frame. */
  .hero-visual { min-height: 420px; }
  .hero-photo { inset: 0 12%; }

  /* Keep both app phones fully recognisable while preserving their overlap. */
  .app-visual {
    min-height: clamp(455px,85vw,510px);
    overflow: hidden;
  }
  .device-frame { width: min(38%,210px); }
  .phone-back { top: 7%; left: 15%; }
  .phone-front { top: 0; right: 15%; }

  /* The watch now derives its height from the actual screen ratio. */
  .watch-art {
    min-height: 420px;
    margin-block: -20px;
    transform: none;
  }
  .watch-case { width: 270px; }
  .watch-band { width: 170px; height: 166px; }

  /* Relay artwork is square-ish; keep that ratio and enough breathing room. */
  .relay-product { min-height: 290px; }
  .relay-product img {
    width: min(48%,240px);
    max-height: 225px;
    object-fit: contain;
  }

  #button-options .config-tile,
  #button-options .config-tile:last-child {
    min-height: 112px;
    grid-template-columns: 108px minmax(0,1fr);
    gap: 3px 14px;
  }
  #button-options .config-tile img,
  #button-options .config-tile:last-child img {
    width: 104px;
    height: 96px;
  }

  .button-product {
    grid-template-columns: minmax(150px,35%) minmax(0,1fr);
  }
  .button-product figure { height: 150px; }
  .button-product:not(.button-product-light) figure img,
  .button-product:not(.button-product-light):hover figure img {
    width: 92%;
    height: 136px;
    max-height: 136px;
    object-fit: contain;
    transform: none;
  }
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: 96%;
    height: 136px;
    max-height: 136px;
    object-fit: contain;
    transform: translate3d(10px,-18px,0) scale(1.4);
  }
}

/* The 821 px switch returns the product cards to a three-column layout. Keep
   the light-disguise artwork inside that taller card as well; otherwise its
   portrait source jumps back to a 1.65x crop exactly at the breakpoint. */
@media (min-width: 821px) {
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: min(88%,270px);
    height: min(24vw,270px);
    min-height: 198px;
    max-height: 270px;
    clip-path: none;
    object-fit: contain;
    transform: translate3d(2px,-4px,0) scale(1.06);
    transform-origin: center;
  }
}

/* In the two-column configurator the third option spans both columns. Its
   source contains deliberate transparent space, so enlarge the artwork only
   in this roomy card instead of making every mobile variant oversized. */
@media (min-width: 880px) and (max-width: 1024px) {
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    clip-path: none;
    transform: scale(1.5);
    transform-origin: center;
  }
}

/* Between a narrow phone and the 520 px tablet layout the device artwork grows
   faster than its former fixed 375 px stage. Let the stage follow the viewport
   and cap the phones so their lower edge stays inside the app section. */
@media (max-width: 519px) {
  .app-visual {
    min-height: clamp(375px,104vw,500px);
  }
  .device-frame {
    width: min(47%,210px);
  }
}

/* Render Knopf 3 at its final pixel size instead of enlarging a small rendered
   layer with transform: scale(). The visual size stays identical, but fine
   edges and the Light/OFF lettering remain crisp. */
@media (max-width: 820px) {
  #button-options .config-tile:nth-child(3) { position: relative; }
  #button-options .config-tile:nth-child(3) strong {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  #button-options .config-tile:nth-child(3) small {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    position: absolute;
    top: 50%;
    left: -38px;
    width: 183px;
    height: 171px;
    max-width: none;
    max-height: none;
    justify-self: center;
    object-fit: contain;
    transform: translate3d(-4px,-50%,0);
  }
}

@media (min-width: 520px) and (max-width: 820px) {
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    left: -44px;
    width: 216px;
    height: 200px;
  }
}

/* High-resolution light-disguise product: crop around the actual switch, not
   around the large transparent source canvas. This keeps it as prominent and
   crisp as the other two products in the compact tablet rows. */
@media (min-width: 520px) and (max-width: 820px) {
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    transform: translate3d(7px,-10px,0) scale(2.2);
    transform-origin: 44% 68%;
  }
}

/* At narrow laptop/tablet widths the third configurator option spans both
   columns. Keep that wide tile as a compact horizontal choice instead of
   scaling the portrait source into a tall product poster. */
@media (min-width: 880px) and (max-width: 1024px) {
  #button-options .config-tile:nth-child(3) {
    min-height: 136px;
    padding: 12px 14px;
    overflow: hidden;
    grid-template-columns: 128px minmax(0,1fr);
    grid-template-rows: 1fr auto auto 1fr;
    gap: 3px 14px;
  }
  #button-options .config-tile:nth-child(3) strong {
    position: relative;
    z-index: 1;
    align-self: end;
    grid-column: 2;
    grid-row: 2;
  }
  #button-options .config-tile:nth-child(3) small {
    position: relative;
    z-index: 1;
    align-self: start;
    grid-column: 2;
    grid-row: 3;
  }
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    position: absolute;
    top: 50%;
    left: -44px;
    width: 216px;
    height: 200px;
    max-width: none;
    max-height: none;
    margin: 0;
    clip-path: inset(0 45% 0 0);
    object-fit: contain;
    transform: translate3d(-4px,-50%,0) scale(1.5);
    transform-origin: 44% 68%;
  }
}

@media (max-width: 820px) {
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    clip-path: inset(0 45% 0 0);
    transform: translate3d(-4px,-50%,0) scale(1.5);
    transform-origin: 44% 68%;
  }
}

@media (max-width: 519px) {
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    transform: translate3d(3px,-8px,0) scale(2);
    transform-origin: 44% 68%;
  }
}

@media (min-width: 821px) {
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    clip-path: inset(0 35% 0 0);
    transform: translate3d(0,-8px,0) scale(2.2);
    transform-origin: 44% 68%;
  }
}

@media (min-width: 821px) {
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    transform: translate3d(4px,-8px,0) scale(2.2);
    transform-origin: 44% 68%;
  }
}

/* Final override for the full-width third configurator option. This must stay
   after the generic >=821 px image rule so the compact row cannot be enlarged
   back into a poster at 880–1024 px. */
@media (min-width: 880px) and (max-width: 1024px) {
  #button-options .config-tile:nth-child(3) img,
  #button-options .config-tile:nth-child(3).is-active img {
    clip-path: inset(0 45% 0 0);
    transform: translate3d(-4px,-50%,0) scale(1.5);
    transform-origin: 44% 68%;
  }
}

/* The button catalogue switches to horizontal cards on tablets. Keep the
   light-disguise product prominent, but contain it inside the 150 px media
   rail instead of inheriting the oversized mobile/detail crop. This override
   intentionally follows the generic Knopf 3 scaling above. */
@media (min-width: 520px) and (max-width: 820px) {
  .button-product-light figure img,
  .button-product-light:hover figure img {
    width: 100%;
    height: 150px;
    max-height: none;
    object-fit: contain;
    transform: translate3d(5px,2px,0) scale(2.35);
    transform-origin: 44% 68%;
  }
}