/*
  Feature pages: Ride, Protect, Garage, Social, Community and MotoRev Pro. Loads after
  base.css, in place of page.css. Only what every feature page shares lives here: the wide
  wrap, the hairline phone frame, the store badge row, data numerals and the NEXT EXIT
  close. Each page brings its own layout in css/fp-<page>.css, built from what the feature
  is: Ride is a map, Protect a crash timeline, Garage a spec sheet, Social a magazine,
  Community a gathering map and Pro a membership plate. Keep them different.
*/

body.fp { --fp-max: 2240px; --fp-gutter: clamp(16px, 4.2vw, 120px); }
body.fp .wrap { width: min(var(--fp-max), 100% - 2 * var(--fp-gutter)); }

.fp main p a { color: var(--signal); text-underline-offset: 3px; }
.fp .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hairline phone frame for real screenshots (no drop shadow) */
.fp .phone {
  --pw: 300px;
  position: relative;
  width: var(--pw);
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--pw) * 0.153);
  padding: calc(var(--pw) * 0.03);
  background: #050506;
  box-shadow: 0 0 0 1.5px #3a3f47;
  flex: none;
}
.fp .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--pw) * 0.125); background: var(--asphalt-2); }

/* Store badges and the web link, in a row */
.fbadges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fbadges .btn--ghost { box-shadow: inset 0 0 0 2px rgba(244,243,238,0.5); }
.fbadges .btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--legend); }

/* ---------- Close: NEXT EXIT and the downloads ---------- */

.ffinale { position: relative; isolation: isolate; overflow: hidden; min-height: min(80vh, 900px); display: grid; align-items: center; padding: clamp(100px, 11vw, 200px) 0; text-align: center; }
.ffinale__photo { position: absolute; inset: 0; z-index: -2; }
.ffinale__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scaleX(-1); }
.ffinale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12,16,20,0.74); }
.ffinale h2 { font-size: clamp(3.2rem, 8.6vw, 10rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.92; margin: 28px auto 24px; max-width: 11ch; }
.ffinale p { color: #dcdee2; font-size: clamp(1.15rem, 1.4vw, 1.6rem); max-width: 40rem; margin: 0 auto 40px; }
.ffinale .fbadges { justify-content: center; }
.end-sign { --sign-bg: var(--signal); --sign-edge: #111; color: var(--signal-ink); font-size: 16px; letter-spacing: 0.1em; padding: 13px 20px 11px; }

@media (max-width: 600px) {
  .ffinale .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fp [data-anim] { transition: none !important; animation: none !important; }
}