/* Home: two products, told apart. The app on white and paper with its solid pink, then — further down —
   FORGE Ride on ink with the Ride gradient and its own photos. The hero shows both halves side by side. */

/* ── Split hero ─────────────────────────────────────── */
.split { position: relative; display: grid; min-height: 100svh; background: var(--ink); }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1.15fr; } }
.split__half { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; padding: 130px var(--gutter) clamp(90px, 12vh, 130px); min-height: 88svh; }
.split__half--app { background: var(--white); color: var(--on-paper); color-scheme: light; --line: var(--paper-line); --mute: var(--on-paper-2); --faint: var(--on-paper-3); justify-content: space-between; gap: 40px; }
.split__half--ride { color: var(--on-ink); --mute: var(--on-ink-2); }
.split__copy { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; max-width: 620px; }
.split .h-hero { font-size: clamp(52px, min(6.4vw, 12vh), 124px); }
.split__half .tlink { font-size: 17px; }
.split__half:hover .tlink::after { transform: scaleX(1); transform-origin: left; }
.split__half:hover .tlink svg { transform: translateX(4px); }

/* App half: the phones peek up from the bottom edge. */
.split__phones { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-bottom: calc(-1 * clamp(90px, 12vh, 130px) - 120px); }
.split__phones .phone--sm { z-index: 2; transform: rotate(-4deg) translateX(30px); transition: transform 1s var(--ease); }
.split__phones .phone--xs { transform: rotate(6deg) translate(-26px, 60px); transition: transform 1s var(--ease); }
.split__half--app:hover .phone--sm { transform: rotate(-2deg) translate(30px, -14px); }
.split__half--app:hover .phone--xs { transform: rotate(4deg) translate(-26px, 44px); }
.split__half--app::before { content: ""; position: absolute; left: 50%; bottom: -20%; width: 900px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 46, 120, .14), transparent); z-index: -1; pointer-events: none; }

/* Ride half: full-bleed photos that cross-fade. */
.split__bg { position: absolute; inset: 0; z-index: -2; }
.split__half--ride::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 9, 11, .55) 0%, rgba(7, 9, 11, .05) 30%, rgba(7, 9, 11, .2) 55%, rgba(7, 9, 11, .92) 100%); }
.split__place { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-3); }
.split__place::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.split__join { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink-line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 999px) {
  .split__half { min-height: 0; padding-top: 110px; }
  .split__half--app { padding-bottom: 0; }
  .split__phones { margin-bottom: -90px; }
  .split__half--ride { min-height: 86svh; padding-top: 60px; }
  .split__join { position: static; transform: none; justify-self: center; margin: 0 0 24px; background: transparent; }
}

/* ── Chapter openers ────────────────────────────────── */
.chapter { position: relative; overflow: clip; isolation: isolate; }
.chapter__in { position: relative; padding-top: clamp(110px, 16vh, 170px); padding-bottom: clamp(80px, 12vh, 130px); display: grid; gap: 40px; align-items: end; }
@media (min-width: 1000px) { .chapter__in { grid-template-columns: minmax(0, 1fr) 440px; gap: 60px; } }
.chapter__n { position: absolute; top: clamp(30px, 5vh, 60px); right: var(--gutter); font-size: clamp(120px, 18vw, 280px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--line); pointer-events: none; }
.chapter__aside { display: grid; gap: 26px; justify-items: start; }
.chapter__aside p { color: var(--mute); font-size: clamp(17px, 1.3vw, 19px); }
.chapter.s-white { border-top: 1px solid var(--paper-line); }
.chapter--ride { min-height: 100svh; display: flex; align-items: flex-end; }
.chapter--ride .wrap { width: 100%; }
.chapter__bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; z-index: -2; }
.chapter--ride::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 9, 11, .3) 20%, rgba(7, 9, 11, .55) 45%, rgba(7, 9, 11, .95) 78%, var(--ink) 100%); }
.chapter--ride .chapter__n { -webkit-text-stroke-color: rgba(255, 255, 255, .28); }
.chapter__stats { grid-column: 1 / -1; border-radius: var(--r); background: rgba(7, 9, 11, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--ink-line); }
@media (min-width: 900px) { .chapter__stats { grid-template-columns: repeat(4, 1fr); } .chapter__stats > div { border-bottom: 0 !important; border-right: 1px solid var(--ink-line) !important; } .chapter__stats > div:last-child { border-right: 0 !important; } }
.chapter__stats dd small { font-size: .45em; letter-spacing: 0; color: var(--on-ink-2); }

/* ── Where the app runs ─────────────────────────────── */
.home-where__phones { display: flex; justify-content: center; align-items: center; }
.home-where__phones .phone--xs:first-child { transform: rotate(-6deg) translateX(34px); }
.home-where__phones .phone--xs:last-child { transform: rotate(6deg) translateX(-34px); }
.home-where__phones .phone--sm { z-index: 2; }

/* ── Montréal and Québec mosaic ─────────────────────── */
.qc { display: grid; gap: 14px; }
@media (min-width: 900px) { .qc { grid-template-columns: repeat(4, 1fr); } .qc__big { grid-column: 1 / 3; grid-row: 1 / 3; } .qc__card:nth-last-child(-n+2) { grid-column: span 2; min-height: 300px; } }
.qc__big, .qc__card { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; min-height: 250px; display: flex; align-items: flex-end; }
.qc__big { min-height: 520px; }
.qc__big > img, .qc__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.qc__big:hover > img, .qc__card:hover > img { transform: scale(1.05); }
.qc__big::after, .qc__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(7, 9, 11, .92)); }
.qc__in { padding: clamp(18px, 2vw, 30px); display: grid; gap: 8px; justify-items: start; }
.qc__big .qc__in { gap: 14px; max-width: 560px; }
.qc__in h3:not(.h-2) { font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variation-settings: "wdth" 86; }
.qc__in p { color: var(--on-ink-2); font-size: 14.5px; }

/* The climb scene runs over five screens of scroll, one per photo. */
.home-climb { height: 520vh; }
@media (max-width: 800px) { .home-climb { height: 460vh; } }
.home-climb .h-2 { font-size: clamp(30px, 3.4vw, 56px); }

/* ── PC or browser ──────────────────────────────────── */
.play { display: grid; gap: 18px; }
@media (min-width: 900px) { .play { grid-template-columns: 1.25fr 1fr; } }
.play__card { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; min-height: 560px; display: flex; align-items: flex-end; color: var(--on-ink); }
.play__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.play__card:hover > img { transform: scale(1.04); }
.play__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 9, 11, .25), transparent 30%, rgba(7, 9, 11, .55) 55%, rgba(7, 9, 11, .95)); }
.play__in { padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; justify-items: start; max-width: 560px; }
.play__in p { color: var(--on-ink-2); }

/* Floating chips around the sticky phone. */
.story__phone .phone-float { display: flex; }
.home-float-1 { left: 4%; top: 22%; }
.home-float-2 { right: 0; bottom: 20%; animation-delay: -3s; }
@media (max-width: 1200px) { .home-float-1 { left: 0; } }

/* The ladder sits on a faint glow so the emblems read as metal. */
.home-ladder::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 1200px; height: 800px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 46, 120, .1), transparent); pointer-events: none; }

/* Closing band. */
.band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .eyebrow::before { background: #fff; }

/* FAQ title stays beside the questions on wide screens only. */
@media (min-width: 900px) { .home-faq-aside { position: sticky; top: 120px; } }

/* The hero is half white: the header keeps its dark glass from the top so the menu stays readable. */
[data-page="home"] .hdr:not(.is-solid) { background: rgba(7, 9, 11, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.s-white .ladder__t { background: var(--paper); }

/* ── Real game UI on monitors ───────────────────────── */
/* .crop shows one region of a 1920×1080 capture: --x/--y/--w/--h are pixels of the source. */
.crop { position: relative; display: block; overflow: hidden; aspect-ratio: var(--w) / var(--h); border-radius: clamp(9px, .9vw, 14px); background: #f4f5f7; }
.crop img { position: absolute; max-width: none; width: calc(1920 / var(--w) * 100%) !important; height: auto !important; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); border-radius: 0 !important; }
@media (max-width: 700px) { .crop--half { --w: 740 !important; } .crop--zoom { --w: 1000 !important; } }

/* In the game: the riding screen, big, beside four short lines. */
.hud { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1100px) { .hud { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.hud__screen { margin: 0; }
.hud__lines { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.hud__lines li { display: grid; gap: 6px; padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.hud__lines .label { color: var(--pink); }
.hud__lines .h-3 { font-size: clamp(20px, 1.6vw, 25px); }
.hud__lines p { color: var(--mute); font-size: 15.5px; }
.hud-events { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(90px, 14vh, 160px); }
@media (min-width: 1000px) { .hud-events { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } }
.hud-events .screen, .qc-menu .screen { margin: 0; }
.home-hud::before { content: ""; position: absolute; left: -10%; top: 12%; width: 1100px; height: 800px; background: radial-gradient(closest-side, rgba(255, 46, 120, .13), transparent); pointer-events: none; }

/* Montréal and Québec: the game's own route picker under the mosaic. */
.qc-menu { display: grid; gap: 28px; align-items: center; margin-top: clamp(56px, 9vh, 100px); }
@media (min-width: 1000px) { .qc-menu { grid-template-columns: minmax(0, .55fr) minmax(0, 2fr); gap: 56px; } }

/* Where to play: the PC card shows the game's home menu on a monitor. */
.play__card--pc { flex-direction: column; align-items: stretch; justify-content: space-between; }
.play__card--pc::after { background: linear-gradient(180deg, rgba(7, 9, 11, .55), rgba(7, 9, 11, .7) 45%, rgba(7, 9, 11, .96)); }
.play__screen { margin: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0; transform: rotate(-1.5deg); transition: transform 1s var(--ease); }
.play__card--pc:hover .play__screen { transform: rotate(0) translateY(-6px); }

/* ── FORGE Run (new): the hero's note, then the running screen with two pictures ── */
.split__new { display: inline-flex; align-items: baseline; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, .9); max-width: 44ch; }
.split__new b { flex: none; font-family: var(--mono, "Geist Mono", monospace); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--ride); color: #fff; }
.home-run-shots { padding-top: 0; }
.run-shots { display: grid; gap: 16px; }
.run-shots figure { margin: 0; }
.run-shots__pic { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-3); }
.run-shots__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.run-shots__pic:hover img { transform: scale(1.04); }
.run-shots__pic--photo img { object-position: 50% 30%; }
@media (min-width: 900px) {
  .run-shots { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .run-shots__main { grid-row: 1 / 3; align-self: center; }
  .run-shots__pic { aspect-ratio: auto; position: relative; min-height: 0; }
  .run-shots__pic img { position: absolute; inset: 0; } /* the screen on the left sets the height */
}