/* =====================================================================
   V3 · CB350C product page, everything after the hero.
   SEE IT (look) → UNDERSTAND IT (char) → EXPLORE IT (xd, xeng)
   → EXPERIENCE IT (xride) → CONFIGURE IT (xcfg) → CHECK IT (xspec)
   → RIDE IT (trb). The hero (.ph) is untouched and lives in product.css.
   ===================================================================== */
@property --tint { syntax: "<color>"; inherits: true; initial-value: #141516; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: rgba(0,0,0,0); }

.page-product { --chap: 60px; }
.page-product .h2 { font-size: clamp(32px, min(2.8vw + 12px, 7vh), 64px); }
.w { display: inline-block; will-change: transform; }

/* odometer digits (built by cb350c.js when motion is on) */
.is-odo { display: inline-flex; align-items: flex-start; line-height: 1; vertical-align: bottom; }
.odo { display: inline-block; height: 1em; overflow: hidden; }
.odo__strip { display: block; }
.odo__strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo__sep { display: inline-block; line-height: 1; }

/* ---------------------------------------------------------------
   01 SEE IT · Up close
   --------------------------------------------------------------- */
.look { background: #0B0A0B; color: #fff; }
.look__stage { --glow: rgba(0,0,0,0); position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 56%, #1F1D1E 0%, #161415 52%, #0B0A0B 100%); }
.look__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 52% 46% at 50% 56%, var(--glow) 0%, rgba(0,0,0,0) 72%); transition: --glow .8s var(--ease-out); pointer-events: none; }
.look__close { position: absolute; inset: 0; z-index: 3; }
.look__closeimg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.look__close::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,.7)); }
.look__bike { position: absolute; z-index: 2; left: 50%; top: 54%; width: min(86vw, calc((100svh - 300px) * 1.69), 1100px); aspect-ratio: 901 / 532; transform: translate(-50%, -50%); }
.look__cam { position: absolute; inset: 0; transform-origin: 53% 37%; }
.look__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 13%), radial-gradient(ellipse 56% 54% at 50% 50%, #000 64%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 1%, #000 13%), radial-gradient(ellipse 56% 54% at 50% 50%, #000 64%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.look__shot.is-on { opacity: 1; }
.motion .look__shot { transition: none; }
.look__sweep { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: overlay; pointer-events: none; opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 55%, transparent 100%); }
.look__sweep span { position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.9) 50%, rgba(255,255,255,0)); transform: translateX(-120%) skewX(-14deg); }
.look__note { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 10px; transform: translate(-6px, -50%); pointer-events: none; }
.look__note i { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 0 0 9px rgba(255,255,255,.06); flex: none; }
.look__note b { font: 600 11px/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; padding: 6px 10px; background: rgba(11,10,11,.72); border: 1px solid rgba(255,255,255,.18); transform: translateY(-26px); }
.look__note--r { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.look__head { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--chap) + clamp(18px, 4vh, 44px)); display: grid; gap: 10px; pointer-events: none; }
.look__foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.look__now { min-width: 0; font: 600 clamp(30px, min(4.2vw + 4px, 7.5vh), 80px)/.92 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; min-height: .92em; }
.look__side { display: grid; justify-items: end; gap: 10px; flex: none; }
@media (min-width: 768px) { .look__foot { flex-wrap: nowrap; } }
.look__chips { display: flex; gap: 10px; }
.look__chips li { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); opacity: .45; transition: opacity .3s, transform .3s var(--ease-out), box-shadow .3s; }
.look__chips li.is-on { opacity: 1; transform: scale(1.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 3px #0B0A0B, 0 0 0 4px #fff; }
.look__hint { font-size: 13px; color: var(--metal); }
.look__hint a { color: #fff; }
@media (min-width: 768px) { .look__side { margin-bottom: 62px; } }
.motion .look__note { opacity: 0; }
html:not(.motion) .look__close { display: none; }
html:not(.motion) .look__chips li { opacity: 1; }
@media (max-width: 767px) { .look__foot { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (max-width: 767px) {
  .look__bike { top: 50%; width: 94vw; }
  .look__note b { font-size: 9px; padding: 4px 6px; letter-spacing: .1em; }
  .look__note--l b { display: none; }
  .look__side { justify-items: start; }
}

/* ---------------------------------------------------------------
   02 UNDERSTAND IT · Character (sticky image, chapters scroll)
   --------------------------------------------------------------- */
.char { background: var(--night); color: #fff; padding-block: var(--sec); border-top: 1px solid var(--steel); }
.char__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.char__media { position: sticky; top: calc(var(--chap) + 4vh); height: calc(100vh - var(--chap) - 8vh); min-height: 420px; overflow: hidden; background: #111; }
.char__f { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.char__f:first-child, .char__f.is-on { clip-path: inset(0 0 0 0); }
.char__f .char__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
.char__f.is-on .char__img { transform: none; }
.char__count { position: absolute; z-index: 2; left: 20px; bottom: 16px; font-size: 14px; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.char__head { display: grid; gap: 14px; padding-bottom: clamp(32px, 8vh, 96px); }
.char__ch { display: grid; align-content: center; gap: 14px; min-height: 72vh; padding-block: clamp(28px, 5vh, 56px); border-top: 1px solid var(--steel); }
.char__ch:last-child { min-height: 64vh; }
.char__mimg { display: none; }
.char__n { font: 600 12px var(--f-display); letter-spacing: .18em; color: #FF5A5A; }
.char__t { font: 600 clamp(40px, min(4.2vw + 6px, 10vh), 92px)/.92 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.char__ch > p:not([class]) { font-size: clamp(16px, .35vw + 13.5px, 19px); line-height: 1.6; color: var(--mist); max-width: 44ch; }
.char__fact { font: 500 13px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--metal); }
.char__fact .num { font-size: clamp(30px, 1.6vw + 14px, 46px); color: #fff; letter-spacing: -.02em; margin-right: 4px; }
.char__sep { margin-inline: 10px; color: var(--steel); }
@media (max-width: 1023px) {
  .char__grid { grid-template-columns: minmax(0, 1fr); }
  .char__media { display: none; }
  .char__mimg { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 8px; }
  .char__mimg .char__img { width: 100%; height: 100%; object-fit: cover; }
  .char__ch, .char__ch:last-child { min-height: 0; }
}

/* ---------------------------------------------------------------
   03 EXPLORE IT · Details (camera tour)
   --------------------------------------------------------------- */
.xd { background: #0B0B0C; color: #fff; border-top: 1px solid var(--steel); }
.xd__pin { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--chap) + clamp(20px, 4vh, 48px)) clamp(20px, 4vh, 48px); }
.xd__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.xd__win { position: relative; overflow: hidden; width: min(100%, calc((100svh - var(--chap) - 8vh) * 1.202)); aspect-ratio: 1600 / 1331; background: #222; }
.xd__cam { position: absolute; inset: 0; transform-origin: 0 0; --iz: 1; }
.xd__img { width: 100%; height: 100%; object-fit: cover; }
.xd__dots { position: absolute; inset: 0; }
.xd__dot { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; transform: scale(var(--iz)); cursor: pointer; }
.xd__dot::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.5); transition: transform .4s var(--ease-out), background-color .3s; }
.xd__dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease-out); }
.xd__dot:hover::before { transform: scale(1.25); }
.xd__dot[aria-selected="true"]::before { background: var(--red); }
.xd__dot[aria-selected="true"]::after { opacity: 1; transform: none; animation: xd-pulse 2.4s var(--ease-out) infinite; }
@keyframes xd-pulse { 0% { transform: scale(.7); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.xd__side { display: grid; gap: clamp(18px, 3.4vh, 36px); align-content: start; align-self: start; min-width: 0; padding-top: clamp(0px, 2vh, 24px); }
.xd__nav { order: -1; }
.xd__nav .flip { transform: scaleX(-1); }
.xd__head { display: grid; gap: 10px; }
.xd__hint { font-size: 14px; color: var(--metal); max-width: 34ch; }
.xd__cards { display: grid; gap: 14px; }
.xd__card { display: grid; gap: 8px; align-content: start; }
.xd__card:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.xd__cimg { aspect-ratio: 16 / 10; overflow: hidden; background: #1A1819; margin-bottom: 8px; }
.xd__cimg img { width: 100%; height: 100%; object-fit: cover; }
.xd__cimg--wheel img { object-position: 100% 100%; transform: scale(1.7); transform-origin: 84% 84%; }
.xd__cimg--muffler img { object-position: 50% 100%; transform: scale(1.25); transform-origin: 35% 92%; }
.xd__card .h3 { font-size: clamp(22px, 1vw + 12px, 30px); }
.xd__card p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--mist); max-width: 44ch; }
.xd__tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 4px; padding: 5px 12px; border: 1px solid var(--steel); font: 600 10px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.xd__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.xd__nav { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--steel); }
.xd__nav .num { font-size: 15px; margin-right: auto; color: var(--metal); }
@media (max-height: 820px) and (min-width: 1024px) { .xd__cimg { aspect-ratio: 16 / 8; } .xd__card p:not([class]) { font-size: 14px; } .xd__hint { display: none; } }
@media (max-width: 1023px) {
  .xd__pin { min-height: 0; padding-block: var(--sec); }
  .xd__body { grid-template-columns: minmax(0, 1fr); }
  .xd__win { width: 100%; order: 1; }
  .xd__body > .xd__side { display: contents; }
  .xd__head { order: 0; }
  .xd__cards { order: 2; }
}
@media (max-width: 599px) { .xd__dot { width: 36px; height: 36px; margin: -18px 0 0 -18px; } .xd__dot::before { inset: 12px; } }

/* ---------------------------------------------------------------
   04 EXPLORE IT · Engineering in four numbers
   --------------------------------------------------------------- */
.xeng { background: #000; color: #fff; border-top: 1px solid var(--steel); }
.xeng__pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 96px); align-items: center; max-width: var(--maxw); margin-inline: auto; padding: calc(var(--chap) + clamp(20px, 4vh, 48px)) var(--gutter) clamp(20px, 4vh, 48px); min-height: 100vh; min-height: 100svh; }
.xeng__media { height: calc(100svh - var(--chap) - 8vh); min-height: 420px; max-height: 900px; overflow: hidden; background: #111; }
.xeng__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.xeng__copy { display: grid; gap: clamp(16px, 3.6vh, 36px); align-content: center; min-width: 0; }
.xeng__head { display: grid; gap: 10px; }
.xeng__ticks { display: grid; grid-template-columns: repeat(var(--ticks, 4), minmax(0, 1fr)); gap: 6px; }
.xeng__ticks li { padding-top: 10px; border-top: 2px solid var(--steel); font: 600 10px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--metal); transition: color .4s, border-color .4s; }
.xeng__ticks li.is-on { color: #fff; border-color: #fff; }
.xeng__frames { display: grid; gap: 28px; }
.xeng__f { display: flex; flex-direction: column-reverse; gap: 12px; }
.xeng__big { display: flex; align-items: baseline; gap: .12em; }
.xeng__big .num { font-size: clamp(76px, min(10vw, 19vh), 196px); line-height: .9; font-weight: 300; letter-spacing: -.03em; }
.xeng__u { font: 500 clamp(22px, 1.6vw + 8px, 40px) var(--f-display); font-stretch: 110%; text-transform: uppercase; color: var(--metal); }
.xeng__cap { font-size: clamp(15px, .3vw + 13px, 18px); line-height: 1.55; color: var(--mist); max-width: 40ch; }
.xeng__fine { font-size: 13px; color: var(--metal); padding-top: 14px; border-top: 1px solid var(--steel); }
@media (min-width: 1024px) {
  .motion .xeng__f { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
  .motion .xeng__f.is-on { opacity: 1; visibility: visible; }
}
@media (max-width: 1023px) {
  .xeng__pin { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--sec) 0; }
  .xeng__media { height: auto; min-height: 0; aspect-ratio: 4 / 3; order: 2; }
  .xeng__ticks { display: none; }
  .xeng__f + .xeng__f { padding-top: 22px; border-top: 1px solid var(--steel); }
}
html:not(.motion) .xeng__ticks { display: none; }
html:not(.motion) .xeng__f + .xeng__f { padding-top: 22px; border-top: 1px solid var(--steel); }
html:not(.motion) .xeng__big .num { font-size: clamp(64px, min(7vw, 14vh), 140px); }

.xeng__more { padding-block: clamp(56px, 10vh, 120px) var(--sec); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.xeng__mtitle { font: 500 clamp(28px, 1.6vw + 14px, 44px)/1 var(--f-display); font-stretch: 110%; position: sticky; top: calc(var(--chap) + 32px); }
.onboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); }
.onboard li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding-block: 20px; border-top: 1px solid var(--steel); }
.onboard__n { grid-row: span 2; font-size: 14px; color: #FF5A5A; padding-top: 4px; }
.onboard h4 { font: 500 clamp(18px, .5vw + 14px, 22px)/1.2 var(--f-display); font-stretch: 106%; }
.onboard p { font-size: 14px; line-height: 1.55; color: var(--metal); }
@media (max-width: 767px) { .xeng__more { grid-template-columns: minmax(0, 1fr); } .xeng__mtitle { position: static; } .onboard { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------
   05 EXPERIENCE IT · Riding
   --------------------------------------------------------------- */
.xride { background: #000; color: #fff; }
.xride__pin { position: relative; }
.xride__p { position: relative; height: 92svh; min-height: 520px; overflow: hidden; display: grid; align-items: end; }
.xride__media, .xride__media > .ai, .xride__media > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.xride__img, .xride__media .ai__img { width: 100%; height: 100%; object-fit: cover; }
.xride__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 42%, rgba(0,0,0,0) 68%), linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 46%), linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 26%); }
.xride .ai-tag { top: calc(var(--chap) + clamp(18px, 3vh, 36px)); right: var(--gutter); }
.xride__copy { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; padding-bottom: clamp(88px, 14vh, 140px); }
.xride__n { font-size: 14px; color: var(--mist); }
.xride__word { font: 600 clamp(64px, min(11vw, 20vh), 210px)/.84 var(--f-display); font-stretch: 116%; text-transform: uppercase; letter-spacing: -.02em; }
.xride__text { font-size: clamp(16px, .35vw + 13.5px, 19px); line-height: 1.6; color: #E4E7EA; max-width: 46ch; }
.xride__fact { font: 500 13px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); padding-top: 12px; border-top: 1px solid rgba(255,255,255,.3); }
.xride__fact .num { font-size: 26px; color: #fff; letter-spacing: -.01em; margin-right: 4px; }
.xride__head { position: absolute; z-index: 20; left: 0; right: 0; top: calc(var(--chap) + clamp(18px, 3vh, 36px)); display: grid; gap: 10px; pointer-events: none; }
.xride__index { display: none; }
@media (min-width: 1024px) {
  .motion .xride__pin { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
  .motion .xride__p { position: absolute; inset: 0; height: auto; min-height: 0; }
  .motion .xride__index { position: absolute; z-index: 20; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 4px; }
  .xride__index button { min-width: 132px; min-height: 44px; padding: 0 0 0 16px; border: 0; border-left: 2px solid rgba(255,255,255,.3); background: none; color: var(--mist); text-align: left; font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; transition: color .3s, border-color .3s; }
  .xride__index button:hover { color: #fff; }
  .xride__index button[aria-current="true"] { color: #fff; border-color: #fff; }
}
@media (max-width: 1023px) { .xride__head { position: relative; top: auto; padding-block: var(--sec) 28px; } .xride__pin { display: flex; flex-direction: column; } .xride__head { order: -1; } }
html:not(.motion) .xride__head { position: relative; top: auto; padding-block: var(--sec) 28px; }
html:not(.motion) .xride__pin { display: flex; flex-direction: column; }
html:not(.motion) .xride__head { order: -1; }
@media (max-width: 599px) { .xride__p { height: auto; min-height: 88svh; } .xride__word { font-size: 14.5vw; } }

/* ---------------------------------------------------------------
   06 CONFIGURE IT · Choose your finish
   --------------------------------------------------------------- */
.finish { position: relative; background: #0B0A0B; color: #fff; border-top: 1px solid var(--steel); overflow: hidden; }
.finish__head { position: relative; z-index: 1; display: grid; gap: 12px; padding-top: clamp(64px, 6vw + 16px, 140px); padding-bottom: clamp(20px, 4vh, 40px); }
.xcfg { position: relative; padding-bottom: clamp(56px, 8vh, 96px); transition: --tint 1s var(--ease-out); }
.xcfg__glow { position: absolute; left: 0; right: 0; top: -40vh; bottom: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 48% 42% at 34% 40%, color-mix(in srgb, var(--tint) 60%, transparent) 0%, transparent 72%); opacity: .7; }
.xcfg__main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.xcfg__stage { position: relative; background: radial-gradient(ellipse 46% 44% at 50% 46%, #1F1D1E 0%, rgba(25,23,24,.7) 55%, rgba(11,10,11,0) 100%); aspect-ratio: 16 / 10; max-height: calc(100svh - var(--chap) - 120px); width: 100%; overflow: hidden; }
.xcfg__shot { position: absolute; inset: 0; display: grid; place-items: center; padding: 2% 2% 12%; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease-out), transform 1.1s var(--ease-out); }
.xcfg__shot.is-on { opacity: 1; transform: none; }
.xcfg__img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 13%), radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 1%, #000 13%), radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.xcfg__shot--photo { padding: 0 0 10%; }
.xcfg__shot--photo .xcfg__img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 58%, transparent 100%); }
.xcfg__sweep { position: absolute; inset: 0 0 10% 0; overflow: hidden; mix-blend-mode: overlay; pointer-events: none; }
.xcfg__sweep span { position: absolute; top: -20%; bottom: -20%; left: 0; width: 24%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.85) 50%, rgba(255,255,255,0)); transform: translateX(-130%) skewX(-14deg); }
.xcfg__sweep.is-run span { animation: xcfg-sweep 1.3s var(--ease) .15s both; }
@keyframes xcfg-sweep { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(460%) skewX(-14deg); } }
.xcfg__caption { position: absolute; left: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; }
.xcfg__caption span:first-child { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.xcfg__now { font: 600 clamp(28px, min(2.6vw + 8px, 7vh), 60px)/.95 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.xcfg__count { position: absolute; right: 0; bottom: 4px; z-index: 2; font-size: 14px; color: var(--metal); }
.xcfg__panel { display: grid; gap: clamp(14px, 2.4vh, 24px); align-content: center; min-width: 0; }
.xcfg__label { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--metal); margin-bottom: 10px; }
.xcfg__vtabs { position: relative; display: grid; grid-template-columns: repeat(var(--vtabs, 3), minmax(0, 1fr)); padding: 3px; border: 1px solid var(--steel); background: rgba(0,0,0,.35); }
.xcfg__ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; background: #fff; transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.xcfg__vtab { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 8px 6px; border: 0; background: none; color: #fff; text-align: center; transition: color .35s; }
.xcfg__vtab span { font: 600 13px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.xcfg__vtab small { font-size: 11px; color: var(--metal); transition: color .35s; }
.xcfg__vtab[aria-selected="true"] { color: #000; }
.xcfg__vtab[aria-selected="true"] small { color: #444; }
.xcfg__vtab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.xcfg__minis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.xcfg__mini { position: relative; display: block; padding: 0; border: 1px solid var(--steel); background: #151314; transition: border-color .3s, transform .4s var(--ease-out); }
.xcfg__mini:hover { border-color: var(--metal); }
.xcfg__mini[aria-checked="true"] { border-color: #fff; transform: translateY(-3px); }
.xcfg__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.xcfg__thumbimg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.5); transform-origin: 55% 45%; transition: transform .6s var(--ease-out); }
.xcfg__thumb--photo .xcfg__thumbimg { transform: scale(2.1); transform-origin: 58% 40%; }
.xcfg__chip { position: absolute; left: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 0 3px rgba(255,255,255,.4); }
.xcfg__mini[aria-checked="true"] .xcfg__chip { box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 0 3px #fff; }
.xcfg__sel { display: grid; gap: 8px; padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid var(--steel); }
.xcfg__sel .xcfg__label { margin: 0; }
.xcfg__selname { font: 500 clamp(22px, 1vw + 12px, 30px)/1.05 var(--f-display); font-stretch: 108%; text-transform: uppercase; }
.xcfg__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.xcfg__meta dt { font: 600 10px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); }
.xcfg__meta dd { font-size: 14px; }
.xcfg__typeline { font-size: 14px; line-height: 1.55; color: var(--mist); }
.xcfg__cta { gap: 10px 20px; }
.xcfg__emi a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mist); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.3); }
.xcfg__emi a:hover { color: #fff; }
.xcfg__emi svg { width: 16px; height: 16px; }
.xcfg__more { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 56px); margin-top: clamp(28px, 5vh, 56px); padding-top: clamp(24px, 4vh, 40px); border-top: 1px solid var(--steel); }
.xcfg__crops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transition: opacity .3s; }
.xcfg__crops.is-swapping { opacity: 0; }
.xcfg__crop { display: grid; gap: 10px; }
.xcfg__cropwin { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1F1D1E; }
.xcfg__cropwin img { position: absolute; max-width: none; width: calc(var(--z) * 100%); height: auto; left: calc(50% - var(--x) * var(--z) * 100%); top: 50%; transform: translateY(calc(var(--y) * -100%)); }
.xcfg__crop figcaption { font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.xcfg__cropnote { margin-top: 12px; font-size: 12px; color: var(--metal); }
.xcfg__adds { display: grid; gap: 12px; align-content: start; }
.xcfg__adds .xcfg__label { margin: 0; color: #fff; }
.xcfg__line { font-size: 15px; line-height: 1.55; color: var(--mist); }
.xcfg__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.xcfg__facts li { padding: 6px 12px; border: 1px solid var(--steel); font-size: 13px; color: #fff; }
.xcfg__cmpbtn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 6px; padding: 12px 0; border: 0; border-top: 1px solid var(--steel); background: none; color: #fff; font: 600 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; text-align: left; }
.xcfg__cmpbtn svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.xcfg__cmpbtn[aria-expanded="true"] svg { transform: rotate(45deg); }
.xcfg__compare { grid-column: 1 / -1; }
.xcfg__tablewrap { overflow-x: auto; }
.xcfg__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.xcfg__table th, .xcfg__table td { padding: 12px 14px; border-bottom: 1px solid var(--steel); text-align: left; }
.xcfg__table thead th { font: 600 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--metal); }
.xcfg__table tbody th { font-weight: 400; color: var(--mist); width: 40%; }
.xcfg__table td { color: var(--metal); }
.xcfg__table td svg { width: 18px; height: 18px; color: #fff; }
.xcfg__compare[data-active="dlx"] [data-col="dlx"], .xcfg__compare[data-active="dlxpro"] [data-col="dlxpro"], .xcfg__compare[data-active="se"] [data-col="se"] { background: rgba(255,255,255,.06); color: #fff; }
.xcfg__fine { position: relative; z-index: 1; margin-top: clamp(20px, 3vh, 32px); font-size: 12px; color: var(--metal); }
@media (max-width: 1023px) {
  .xcfg__main, .xcfg__more { grid-template-columns: minmax(0, 1fr); }
  .xcfg__stage { max-height: none; }
  .xcfg__glow { background: radial-gradient(ellipse 80% 40% at 50% 26%, color-mix(in srgb, var(--tint) 60%, transparent) 0%, transparent 72%); }
}
@media (max-width: 599px) {
  .xcfg__minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xcfg__vtab span { font-size: 12px; letter-spacing: .02em; }
  .xcfg__crops { gap: 6px; }
  .xcfg__crop figcaption { font-size: 9px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) { .xcfg, .xcfg__shot, .xcfg__ind, .xcfg__crops, .look__stage::before, .char__f, .char__f .char__img { transition: none; } .xd__dot[aria-selected="true"]::after { animation: none; } }

/* ---------------------------------------------------------------
   08 CHECK IT · Specifications, on the motorcycle
   --------------------------------------------------------------- */
.xspec { padding-block: var(--sec); color: #fff; background: radial-gradient(ellipse 70% 55% at 50% 42%, #1F1D1E 0%, #121011 55%, #0B0A0B 100%); border-top: 1px solid var(--steel); overflow-x: clip; }   /* the dimension drawing slides in from the right: keep it from widening the page on phones */
.xspec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.xspec__head > div:first-child { display: grid; gap: 10px; }
.dim { margin-block: clamp(28px, 6vh, 64px) clamp(28px, 5vh, 56px); }
.dim__frame { position: relative; width: min(100%, 1000px, calc((100svh - 260px) * 1.5)); min-width: min(100%, 520px); margin-inline: auto; aspect-ratio: 901 / 600; }
.dim__img { position: absolute; left: 0; top: 0; width: 100%; height: 88.67%; -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 13%), radial-gradient(ellipse 60% 62% at 50% 46%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 1%, #000 13%), radial-gradient(ellipse 60% 62% at 50% 46%, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.dim__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.dim__ground { stroke: rgba(255,255,255,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dim__guide { stroke: rgba(255,255,255,.4); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.dim__line { stroke: #fff; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.motion .dim__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dim__lab { position: absolute; left: var(--x); top: var(--y); font: 600 11px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.dim__lab b { font-size: clamp(18px, 1vw + 10px, 26px); color: #fff; letter-spacing: -.01em; margin-right: 4px; }
.dim__lab--wb { transform: translate(-50%, -50%); padding: 2px 12px; background: #110F10; }
.dim__lab--sh { transform: translate(0, -100%); padding-bottom: 8px; }
.dim__lab--t { transform: translate(-50%, 8px); color: var(--metal); font-size: 10px; }
.keynums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--steel); }
.keynums div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 16px 0; }
.keynums div:first-child { padding-left: 0; }
.keynums div + div { border-left: 1px solid var(--steel); }
.keynums dt { font: 600 10px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); }
.keynums dd { font: 500 14px var(--f-display); color: var(--mist); }
.keynums .num { font-size: clamp(30px, 1.8vw + 12px, 54px); color: #fff; margin-right: 2px; }
.keynums small { display: block; font-size: 12px; color: var(--metal); margin-top: 2px; font-family: var(--f-body); }
@media (max-width: 1023px) { .keynums { grid-template-columns: repeat(3, minmax(0, 1fr)); } .keynums div:nth-child(4) { padding-left: 0; border-left: 0; } .keynums div:nth-child(n+4) { border-top: 1px solid var(--steel); margin-top: 18px; } }
@media (max-width: 599px) {
  .keynums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keynums div:nth-child(n) { padding-left: 14px; border-left: 1px solid var(--steel); }
  .keynums div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .keynums div:nth-child(n+3) { border-top: 1px solid var(--steel); margin-top: 18px; }
  .dim__frame { min-width: 0; }
  .dim__lab { font-size: 9px; letter-spacing: .08em; }
  .dim__lab b { font-size: 15px; }
  .dim__lab--t { display: none; }
}

/* ---------------------------------------------------------------
   09 RIDE IT · Test ride band
   --------------------------------------------------------------- */
.trb { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: #000; color: #fff; border-top: 1px solid var(--steel); }
.trb__media { position: absolute; right: 0; bottom: 0; width: min(78%, calc(100svh * 2.1)); aspect-ratio: 1600 / 626; }
.trb__img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 28%); mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 28%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.trb { background: radial-gradient(ellipse 50% 60% at 66% 78%, #1C1A1B 0%, #0B0A0B 70%); }
.trb__copy { position: relative; z-index: 2; display: grid; gap: clamp(14px, 2.6vh, 24px); justify-items: start; padding-block: calc(var(--chap) + clamp(40px, 8vh, 96px)) clamp(48px, 8vh, 96px); }
.trb__title { font: 600 clamp(42px, min(5.6vw + 4px, 11vh), 118px)/.92 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.trb__title .line { overflow: hidden; }
.trb__text { font-size: clamp(16px, .35vw + 13.5px, 19px); line-height: 1.6; color: var(--mist); max-width: 46ch; }
.trb__pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45); font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); }
.trb__pick strong { font: 500 15px var(--f-body); letter-spacing: 0; text-transform: none; color: #fff; }
.trb__pick a { color: var(--mist); font-size: 11px; }
.trb__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 18px; }
.trb__steps li { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.3); font-size: 14px; line-height: 1.4; color: #E4E7EA; }
.trb__steps .num { font-size: 13px; color: #FF5A5A; }
@media (max-width: 767px) {
  .trb { align-items: start; }
  .trb__media { position: relative; width: 100%; order: 2; }
  .trb__copy { padding-block: var(--sec) 0; }
  .trb__steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* V3.4: the active-point pulse pauses while the section is off screen */
.xd.is-off .xd__dot[aria-selected="true"]::after, [data-xd].is-off .xd__dot[aria-selected="true"]::after { animation-play-state: paused; }