/* Concept A: night ride. Dark navy, giant condensed type, the film as the hero.
   Font sizes used: sm, base, lg, 2xl, 4xl, 7xl (6 sizes). */

.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--sp-5); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5);
  background: var(--c-accent); color: var(--c-paper); font-weight: 700; font-size: var(--fs-base); text-decoration: none;
  border-radius: var(--r-md); transition: background-color 0.2s ease, transform 0.2s ease; }
.btn:hover { background: var(--c-accent-dark); }
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-base); }
.link-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; background: none; border: 0;
  color: var(--c-accent-text); font: inherit; font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.link-btn:hover { color: var(--c-ink); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--c-surface) 92%, transparent); border-bottom: 1px solid var(--c-line); }
.header-row { display: flex; align-items: center; gap: var(--sp-6); min-height: 72px; }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--c-ink);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); }
.brand img { border-radius: var(--r-sm); }
.nav-list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; font-size: var(--fs-base); }
.nav-list a { text-decoration: none; color: var(--c-text-muted); padding: var(--sp-2) 0; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--c-ink); }
.site-header nav { margin-left: auto; }

/* Hero */
/* clip, not only hidden: a hidden box counts as a scroll box, and the word photo would then follow it, not the page. */
.hero { position: relative; overflow: hidden; overflow: clip; padding: var(--sp-8) 0 var(--sp-6); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-7); align-items: center; }
.hero h1 { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: -0.01em; }
.hero-sub { margin-top: var(--sp-5); font-size: var(--fs-lg); line-height: 1.5; color: var(--c-text); max-width: 34ch; }
.hero-copy .btn { margin-top: var(--sp-6); }
.hero-note { margin-top: var(--sp-4); font-size: var(--fs-base); color: var(--c-text-muted); }
.hero-film { margin: 0; }
.hero-film video { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface-alt); }
.hero-film figcaption { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-2); }
.hero-word { position: relative; z-index: 1; margin: var(--sp-6) 0 0; padding: 0; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(var(--fs-4xl), 16vw, calc(var(--fs-7xl) * 1.4)); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--c-surface-alt); text-align: center; user-select: none; }
.hero-word::before { content: attr(data-word); }
/* The photo shows through the letters. It drifts slower than the page as you scroll (parallax).
   Browsers without text clipping keep the plain letters. Motion-off visitors get a still photo. */
.hero-word { --hero-word-photo: url("/decor/hero-word-rider.webp"); --hero-word-from: 46%; --hero-word-to: 16%; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  /* screen blend: the photo's black parts take the old letter colour, so no letter fades into the page. */
  .hero-word { color: transparent; background: var(--hero-word-photo) center 34% / cover no-repeat, var(--c-surface-alt);
    background-blend-mode: screen; -webkit-background-clip: text; background-clip: text; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .hero-word { animation: hero-word-drift linear both; animation-timeline: view(); }
    }
  }
}
@keyframes hero-word-drift { from { background-position-y: var(--hero-word-from); } to { background-position-y: var(--hero-word-to); } }
.hero-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between;
  gap: var(--sp-5); list-style: none; margin-top: var(--sp-5); font-size: var(--fs-base); color: var(--c-text-muted); }
.hero-facts li { display: flex; align-items: center; gap: var(--sp-2); }
.hero-facts li::before { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-pill); background: var(--c-accent-text); }

/* How it works */
.how { padding: var(--sp-9) 0; background: var(--c-surface-alt); }
.how-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: end; }
.how-head h2 { font-size: var(--fs-4xl); line-height: 1.02; }
.how-head p { font-size: var(--fs-lg); line-height: 1.5; }
.how-road { width: 100%; height: 120px; margin-top: var(--sp-7); }
.how-road path { fill: none; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.how-road-ahead { stroke: var(--c-line); stroke-dasharray: 2 10; }
.how-road-done { stroke: var(--c-effort); }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); list-style: none; margin: var(--sp-5) 0 0; padding: 0; counter-reset: step; }
.how-steps li { counter-increment: step; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.how-steps li::before { content: counter(step); display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-2xl);
  color: var(--c-accent-text); line-height: 1; }
.how-steps li:last-child::before { color: var(--c-effort); }
.how-steps h3 { margin-top: var(--sp-3); font-size: var(--fs-lg); }
.how-steps p { margin-top: var(--sp-2); }

/* Screens */
.screens { padding: var(--sp-10) 0 var(--sp-9); }
.screens-grid { display: grid; grid-template-columns: 4fr 6fr; gap: var(--sp-8); align-items: center; }
.screens-copy h2 { font-size: var(--fs-4xl); line-height: 1.02; }
.screens-copy p { margin-top: var(--sp-4); max-width: 44ch; }
.phones { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: start; }
.phone { margin: 0; padding: var(--sp-2); background: var(--c-surface-alt); border: 1px solid var(--c-line); border-radius: 28px; }
.phone img { border-radius: 20px; width: 100%; }
.phone-2 { margin-top: var(--sp-9); }
.phone-3 { margin-top: var(--sp-7); }

/* Who it's for */
.who { padding: var(--sp-8) 0; border-top: 1px solid var(--c-line); }
.who h2 { font-size: var(--fs-4xl); line-height: 1.02; max-width: 18ch; }
.who-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.who-list li { display: grid; grid-template-columns: 96px 5fr 6fr; gap: var(--sp-5); align-items: baseline;
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-line); transition: background-color 0.2s ease; }
.who-list li:first-child { border-top: 1px solid var(--c-line); }
.who-num { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-2xl); color: var(--c-text-muted); line-height: 1; }
.who-list h3 { font-size: var(--fs-2xl); line-height: 1.1; }
.who-list p { max-width: 52ch; }
.who-list li:hover .who-num { color: var(--c-accent-text); }

/* Climbs */
.climbs { padding: var(--sp-9) 0; background: var(--c-surface-alt); }
.climbs-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: end; }
.climbs-head h2 { font-size: var(--fs-4xl); line-height: 1.02; }
/* The road on each card is coloured by slope: the app's five bands, flattest first (road colours set A). */
.climbs { --road-0: var(--c-text-muted); --road-1: var(--c-accent-text); --road-2: var(--c-road-steady);
  --road-3: var(--c-effort); --road-4: var(--c-road-steep); }
.climbs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-7); }
.road-key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-base); color: var(--c-text); }
.road-key li { display: flex; align-items: center; gap: var(--sp-2); }
.road-key li::before { content: ""; width: var(--sp-5); height: var(--sp-1); border-radius: var(--r-pill); background: var(--road); }
.road-0 { --road: var(--road-0); } .road-1 { --road: var(--road-1); } .road-2 { --road: var(--road-2); }
.road-3 { --road: var(--road-3); } .road-4 { --road: var(--road-4); }
.strip-controls { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.strip-controls[hidden] { display: none; }
.strip-count { margin-right: var(--sp-3); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-lg);
  color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); cursor: pointer; transition: border-color .2s, opacity .2s; }
.strip-btn:hover:not(:disabled) { border-color: var(--c-accent-text); }
.strip-btn:disabled { opacity: .35; cursor: default; }
.climb-strip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: var(--sp-4); overflow-x: auto;
  list-style: none; margin: var(--sp-5) 0 0; --gutter: var(--sp-5); padding: var(--sp-1) var(--gutter) var(--sp-5);
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--c-line) transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-8)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-8)), transparent); }
@media (min-width: 1248px) { .climb-strip { --gutter: calc((100vw - var(--page-max)) / 2 + var(--sp-5)); } }
.climb-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.climb-card.is-free { border-color: var(--c-accent); }
.climb-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-base); }
.climb-step { color: var(--c-accent-text); }
.climb-country { color: var(--c-text-muted); }
.climb-free { font-weight: 700; color: var(--c-success); }
.climb-svg { display: block; width: 100%; height: 100px; }
.profile-fill { fill: var(--c-accent-soft); }
.profile-line { fill: none; stroke: var(--c-accent-text); stroke-width: 2; }
.profile-top { fill: var(--c-effort); stroke: none; }
.climb-svg .profile-fill { opacity: .55; }
.climb-svg .profile-road { fill: none; stroke: var(--road); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.climb-card h3 { font-size: var(--fs-xl); line-height: 1.05; }
.climb-stats { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line); }
.climb-stats div { display: flex; flex-direction: column; }
.climb-stats dd { order: -1; margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl); line-height: 1;
  color: var(--c-ink); font-variant-numeric: tabular-nums; }
.climb-stats dt { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Price */
.price { padding: var(--sp-8) 0; }
.price-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: start; }
.price-free h2 { font-size: var(--fs-4xl); line-height: 1.02; max-width: 16ch; }
.price-free p { margin-top: var(--sp-4); font-size: var(--fs-lg); line-height: 1.5; max-width: 40ch; }
.price-free .btn { margin-top: var(--sp-6); }
.price-paid { padding: var(--sp-6); background: var(--c-surface-alt); border-radius: var(--r-lg); }
.price-paid h3 { font-size: var(--fs-2xl); }
.price-list { margin: var(--sp-5) 0 0; }
.price-list div { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.price-list dt { color: var(--c-text-muted); }
.price-list dd { margin: 0; }
.price-list strong { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--c-ink); }
.price-note { margin-top: var(--sp-4); font-size: var(--fs-base); color: var(--c-text-muted); }
.price-list dd { text-align: right; }
.price-extra { display: block; color: var(--c-text-muted); }
.price-soon { margin-top: var(--sp-6); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); color: var(--c-accent-text); }

/* Big photo */
.summit { padding: var(--sp-9) 0 var(--sp-8); border-bottom: 1px solid var(--c-line); }
.summit-img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--c-line); }
.summit-copy { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: end; margin-top: var(--sp-6); }
.summit-copy h2 { font-size: var(--fs-4xl); line-height: 1.02; }
.summit-copy p { font-size: var(--fs-lg); line-height: 1.5; }

/* Reviews */
.reviews { padding: var(--sp-8) 0; }
.reviews h2 { font-size: var(--fs-4xl); line-height: 1.02; max-width: 16ch; }
.review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.review-list blockquote { margin: 0; font-size: var(--fs-lg); line-height: 1.5; color: var(--c-ink); }
.review-by { margin-top: var(--sp-3); color: var(--c-text-muted); }
.footer-maker { margin-top: var(--sp-2); color: var(--c-text-muted); }

/* FAQ */
.faq { padding: var(--sp-8) 0; border-top: 1px solid var(--c-line); }
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-7); }
.faq h2 { font-size: var(--fs-4xl); line-height: 1.02; }
.faq-list details { border-bottom: 1px solid var(--c-line); }
.faq-list summary { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; cursor: pointer;
  font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--c-accent-text); transition: transform 0.2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--c-accent-text); }
.faq-list details p { padding-bottom: var(--sp-5); max-width: 56ch; }

/* Footer */
.site-footer { position: relative; padding-top: var(--sp-9); }
.footer-hill { position: absolute; inset: 0 0 auto; width: 100%; height: 100%; opacity: 0.6; }
.footer-hill .profile-fill { fill: var(--c-surface-alt); }
.footer-hill .profile-line { stroke: var(--c-line); }
.footer-hill .profile-top { display: none; }
.footer-row { position: relative; display: flex; justify-content: space-between; gap: var(--sp-5); padding-top: var(--sp-8);
  padding-bottom: var(--sp-6); font-size: var(--fs-base); color: var(--c-text-muted); }
.footer-links { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; text-decoration: none; }
/* Touch screens get full size tap targets. */
@media (pointer: coarse) { .footer-links a { min-height: var(--tap-min); } }
.footer-links a:hover { color: var(--c-ink); }

/* Phone layout */
@media (max-width: 900px) {
  .nav-list { display: none; }
  .header-row { gap: var(--sp-4); }
  .header-row .btn-small { margin-left: auto; }
  .hero { padding-top: var(--sp-6); }
  .hero-grid, .how-head, .screens-grid, .climbs-head, .price-grid, .faq-grid, .summit-copy { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-word { margin-top: var(--sp-4); }
  .hero-facts { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .phones { gap: var(--sp-3); }
  .phone { border-radius: var(--r-lg); padding: var(--sp-1); }
  .phone img { border-radius: var(--r-md); }
  .who-list li { grid-template-columns: 56px 1fr; }
  .who-list p { grid-column: 2; }
  .footer-row { flex-direction: column; }
}
@media (max-width: 560px) {
  .brand span { display: none; }
  .how-steps { grid-template-columns: 1fr; }
  .hero h1, .how-head h2, .screens-copy h2, .who h2, .climbs-head h2, .price-free h2, .faq h2, .summit-copy h2, .reviews h2 { font-size: var(--fs-2xl); }
}

/* Plain text pages (privacy, terms, support) */
.text-page { padding: var(--sp-9) 0; }
.text-body { max-width: var(--measure); }
.text-body h1 { font-size: var(--fs-4xl); line-height: 1; }
.text-body h2 { margin-top: var(--sp-7); font-size: var(--fs-2xl); }
.text-body h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); }
.text-body p, .text-body ul, .text-body ol { margin-top: var(--sp-4); }
@media (max-width: 560px) { .text-body h1 { font-size: var(--fs-2xl); } }