/* RadioCheck website v2 (8 Oct 2026): the old site, plus what Rubén liked in the redesign:
   header layout over the video with the flat white logo, the typography (Barlow Condensed heavy
   italic + Inter), the dynamic waveform player, the bold red ending, cross-fading slideshows.
   Loaded after the page's own <style>, so it overrides it. Fonts self-hosted (OFL). */

@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-900-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jb: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── Typography ── */
h1, h2, h3 { font-style: italic; }
h2 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 900; line-height: .9; letter-spacing: -.005em; }
h3 { font-size: 1.55rem; font-weight: 800; letter-spacing: .01em; line-height: 1; }
p { font-size: 1rem; }
.ui-row-text h3 { text-transform: uppercase; font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: .92; letter-spacing: 0; }
.step h3 { font-size: 1.7rem; letter-spacing: .01em; }
.faq-q { font-style: italic; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .01em; }
.why-callout { font-style: italic; font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem) !important; line-height: 1 !important; }
.about-sig { font-style: italic; font-weight: 900; font-size: 2.4rem; letter-spacing: 0; text-transform: none; }

/* ── Buttons used by the new pieces ── */
.b2 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 0; cursor: pointer; font: 800 14px/1 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .2s ease, background-color .2s ease; }
.b2:hover { transform: translateY(-2px); }
.b2-red { background: var(--accent); color: #fff; box-shadow: 0 10px 30px var(--accent-glow); }
.b2-light { background: #fff; color: #111114; }
.b2-dark { background: #0a0a0c; color: #fff; }
.b2-ghost { background: transparent; color: #fff; border: 2px solid currentColor; }
.b2 .disc { width: 30px; height: 30px; margin-left: -12px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.b2 .disc svg { width: 11px; height: 11px; fill: #fff; margin-left: 2px; }
.b2 svg.ico { width: 18px; height: 18px; flex: none; }

/* ── Hero: left-aligned over the video, with the flat white logo ── */
.hero2 { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  background: #0a0a0c; padding: 0; text-align: left; max-width: none; }
.hero2-media { position: absolute; inset: 0; z-index: -2; background: #0a0a0c; }
.hero2-media video, .hero2-media .hero2-poster { width: 100%; height: 100%; object-fit: cover; }
.hero2-media .hero2-poster { position: absolute; inset: 0; z-index: 1; transition: opacity .6s ease; }
.hero2-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,12,.85) 0%, rgba(10,10,12,.55) 40%, rgba(10,10,12,.08) 72%),
              linear-gradient(180deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,0) 20%, rgba(10,10,12,0) 60%, rgba(10,10,12,.9) 100%);
  transition: opacity .45s ease; }
.hero2-copy { width: 100%; max-width: 1320px; margin: 0 auto; padding: 112px clamp(16px, 5vw, 72px) clamp(32px, 6vh, 72px);
  transition: opacity .35s ease, transform .35s ease; }
.hero2-mark { display: block; width: clamp(220px, 24vw, 360px); height: auto; margin-bottom: clamp(18px, 3vh, 30px); }
.hero2 h1 { font: 900 italic clamp(48px, min(7.4vw, 11vh), 124px)/.86 var(--head); text-transform: uppercase; letter-spacing: -.012em;
  color: #fff; max-width: 14ch; text-wrap: balance; margin: 0; }
.hero2 h1 .red { color: var(--accent); display: block; }
.hero2-lead { margin-top: 22px; max-width: 36em; font: 400 clamp(16px, 1.2vw, 18.5px)/1.6 var(--mono); color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero2-lead strong { font-weight: 800; color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }
.hero2 .cta2 { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; list-style: none; padding: 0; }
.hero2-meta li { font: 700 11.5px/1 var(--jb); letter-spacing: .12em; text-transform: uppercase; color: #e8e8ee;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); padding: 8px 11px; border-radius: 4px; }
.cap2 { position: absolute; right: clamp(16px, 5vw, 72px); bottom: clamp(100px, 17vh, 180px); z-index: 1; max-width: min(440px, 40vw);
  background: rgba(10,10,12,.82); border-left: 4px solid var(--accent); padding: 12px 16px 13px; font: 500 15px/1.45 var(--jb); color: #fff;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.cap2.on { opacity: 1; transform: none; }
.cap2 small, .t2-cap small { display: block; color: #ff3a62; font: 800 11px/1 var(--jb); letter-spacing: .16em; margin-bottom: 6px; }
.hero2-pause { position: absolute; right: clamp(16px, 5vw, 72px); bottom: 28px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); background: rgba(10,10,12,.5); display: grid; place-items: center; cursor: pointer; }
.hero2-pause svg { width: 13px; height: 13px; fill: #fff; }
.hero2-pause .i-play { display: none; margin-left: 2px; }
.hero2-pause[aria-pressed="true"] .i-play { display: block; }
.hero2-pause[aria-pressed="true"] .i-pause { display: none; }
.draft-tag { position: absolute; z-index: 2; right: clamp(16px, 5vw, 72px); top: 70px; font: 800 11px/1 var(--jb); letter-spacing: .12em;
  text-transform: uppercase; color: #111; background: #f3eee4; padding: 7px 10px; border-radius: 4px; }
.t2 { position: absolute; inset: auto 0 0 0; z-index: 3; display: none; }
.t2-cap { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); width: max-content; max-width: min(820px, 92vw);
  text-align: center; background: rgba(10,10,12,.86); padding: 13px 20px 14px; font: 500 clamp(16px, 1.6vw, 22px)/1.4 var(--jb); color: #fff; }
.t2-cap:empty, .t2-cap.off { display: none; }
.t2-bar { position: absolute; left: clamp(16px, 5vw, 72px); right: clamp(16px, 5vw, 72px); bottom: 26px; display: flex; align-items: center; gap: 12px;
  background: rgba(10,10,12,.84); border-radius: 999px; padding: 8px 10px; }
.ctl2 { min-width: 44px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: none;
  font: 800 12px/1 var(--jb); letter-spacing: .08em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ctl2 svg { width: 13px; height: 13px; fill: currentColor; }
.ctl2[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.t2-time { font: 600 12px/1 var(--jb); color: #d0d0d6; white-space: nowrap; }
.t2-prog { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); position: relative; cursor: pointer; }
.t2-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 3px; }
.end2card { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; text-align: center; background: rgba(10,10,12,.72);
  padding: 24px 24px 110px; }
.end2card .poster-line { font: 900 italic clamp(54px, 9vw, 140px)/.86 var(--head); text-transform: uppercase; color: #fff; }
.end2card .poster-line span { color: var(--accent); }
.end2card p.sub { margin-top: 18px; font: 800 italic clamp(26px, 3vw, 40px)/1 var(--head); text-transform: uppercase; color: #fff; }
.end2card .cta2 { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.hero2.is-theatre .hero2-copy, .hero2.is-theatre .cap2, .hero2.is-theatre .hero2-pause, .hero2.is-theatre .draft-tag { opacity: 0; pointer-events: none; }
.hero2.is-theatre .hero2-copy { transform: translateY(14px); }
.hero2.is-theatre .hero2-scrim { opacity: .25; }
.hero2.is-theatre .t2 { display: block; }
.hero2.is-ended .end2card { display: grid; }
.hero2.is-ended .t2-cap { display: none; }

/* ── Hear Alan: waveform player + calls (dark) ── */
.hear2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 3rem; align-items: start;
  position: relative; z-index: 1; max-width: 1200px; margin-left: auto; margin-right: auto; text-align: left; }
.player2 { background: rgba(10,10,12,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: clamp(22px, 3vw, 36px);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.player2 .now { font: 800 12px/1 var(--jb); letter-spacing: .16em; color: #ff3a62; text-transform: uppercase; margin: 0; }
.player2 .line { min-height: 2.1em; margin: 16px 0 22px; font: 800 italic clamp(28px, 3vw, 44px)/1.02 var(--head); text-transform: uppercase; color: #fff; }
.player2 canvas { width: 100%; height: 100px; display: block; }
.player2 .ctl { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.bigplay { width: 66px; height: 66px; border-radius: 50%; border: 0; background: var(--accent); display: grid; place-items: center; flex: none; cursor: pointer;
  box-shadow: 0 10px 30px var(--accent-glow); }
.bigplay svg { width: 22px; height: 22px; fill: #fff; }
.bigplay .i-play { margin-left: 4px; }
.bigplay .i-stop, .bigplay[aria-pressed="true"] .i-play { display: none; }
.bigplay[aria-pressed="true"] .i-stop { display: block; }
.player2 .meta { font: 500 13px/1.45 var(--jb); color: var(--muted); margin: 0; }
.calls2 { list-style: none; margin: 0; padding: 0; border-top: 2px solid rgba(255,255,255,.18); background: rgba(10,10,12,.55); border-radius: 0 0 14px 14px; }
.calls2 button { width: 100%; display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px 14px;
  text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); color: inherit; cursor: pointer; transition: background-color .2s; }
.calls2 button:hover, .calls2 button[aria-pressed="true"] { background: rgba(248,19,62,.12); }
.calls2 .cat { font: 800 11px/1.2 var(--jb); letter-spacing: .12em; text-transform: uppercase; color: #ff3a62; }
.calls2 .txt { font: 600 15.5px/1.4 var(--mono); color: #fff; }
.calls2 .orig { display: block; margin-top: 5px; font: 500 12px/1.4 var(--jb); color: var(--muted); }
.calls2 .dur { font: 500 12px/1 var(--jb); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.calls2 .dur svg { width: 10px; height: 10px; fill: #ff3a62; }
.hear2-note { margin-top: 18px; font: 500 12px/1.5 var(--jb); color: var(--muted); letter-spacing: .04em; }

/* ── Cross-fading slideshows (every screenshot row) ── */
.xfade { position: relative; overflow: hidden; }
.xfade > img, .xfade > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.2s ease; animation: none !important; transform: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.xfade > .is-on { opacity: 1; }
.xfade-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 2; }
.xfade-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.xfade-dots button[aria-current="true"] { background: var(--accent); }
.ui-slideshow.card-show { max-width: 380px; margin: 0 auto; aspect-ratio: 9 / 16; transform: rotate(-2deg); border-radius: 22px; }
.ui-row.reverse .ui-row-image .ui-slideshow.card-show { transform: rotate(2deg); }

/* ── Full-screen photos: "Less HUD. More race." ── */
.cine { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #0a0a0c; color: #fff; isolation: isolate; padding: 0; max-width: none; }
.cine-slides { position: absolute; inset: 0; z-index: -2; }
.cine-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.cine-slide.is-on { opacity: 1; }
.cine-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 7s linear; }
.cine-slide.is-on img { transform: scale(1.1); }
.cine-slide figcaption { position: absolute; right: clamp(16px, 5vw, 72px); bottom: clamp(36px, 7vh, 80px); max-width: min(460px, 80vw);
  background: rgba(10,10,12,.82); border-left: 4px solid var(--accent); padding: 12px 16px 13px; font: 500 15px/1.45 var(--jb); color: #fff; text-align: left; }
.cine-slide figcaption small { display: block; color: #ff3a62; font: 800 11px/1 var(--jb); letter-spacing: .16em; margin-bottom: 6px; }
.cine-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.25) 45%, rgba(10,10,12,0) 70%),
              linear-gradient(180deg, rgba(10,10,12,.4) 0%, rgba(10,10,12,0) 25%, rgba(10,10,12,0) 70%, rgba(10,10,12,.65) 100%); }
.cine-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 72px); text-align: left; }
.cine-line { font: 900 italic clamp(64px, 12vw, 210px)/.82 var(--head); text-transform: uppercase; letter-spacing: -.015em; max-width: 9ch; margin: 0; color: #fff; }
.cine-line span { color: var(--accent); display: block; }
.cine-pause { position: absolute; right: clamp(16px, 5vw, 72px); top: 80px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); background: rgba(10,10,12,.5); display: grid; place-items: center; cursor: pointer; }
.cine-pause svg { width: 13px; height: 13px; fill: #fff; }
.cine-pause .i-play { display: none; margin-left: 2px; }
.cine-pause[aria-pressed="true"] .i-play { display: block; }
.cine-pause[aria-pressed="true"] .i-pause { display: none; }

/* ── Bold red ending: Race with Alan ── */
#join.end2 { background: var(--accent); max-width: none; padding: clamp(84px, 11vw, 160px) clamp(16px, 5vw, 72px); text-align: left; position: relative; overflow: hidden; }
#join.end2::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 60px, rgba(255,255,255,.06) 60px 62px); }
.end2-in { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px); align-items: center; }
.end2-head { grid-column: 1 / -1; }
#join.end2 .section-tag { color: #0a0a0c; }
#join.end2 h2 { font: 900 italic clamp(64px, 11vw, 190px)/.84 var(--head); color: #fff; margin: 10px 0 0; text-align: left; }
#join.end2 .store-soon { text-align: left; color: #fff; margin-top: 18px; }
#join.end2 .store-badges { justify-content: flex-start; }
.signup2 { background: #0a0a0c; border-radius: 20px; padding: clamp(22px, 3vw, 34px); }
#join.end2 .email-form { margin: 0; max-width: none; }
#join.end2 .email-form label { color: #fff; font: 600 16px/1.5 var(--mono); text-align: left; }
#join.end2 .join-feedback { color: var(--muted); text-align: left; margin-top: 16px; font-size: .95rem; }

/* "In short" facts (GEO) */
.facts { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--border); text-align: left; }
.facts h2 { font-size: 1.6rem; }
.facts dl { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 28px; }
.facts dt { font: 800 11px/1.3 var(--jb); letter-spacing: .14em; text-transform: uppercase; color: #ff3a62; }
.facts dd { margin: 4px 0 0; color: var(--text); font-size: 14px; line-height: 1.5; }

@media (max-width: 860px) {
  .hear2, .end2-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hero2 { display: block; min-height: 0; }
  .hero2-media { position: relative; inset: auto; margin-top: 60px; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; }
  .hero2-scrim { inset: 60px 0 auto 0; aspect-ratio: 4 / 5; max-height: 72svh; background: linear-gradient(180deg, rgba(10,10,12,0) 55%, #0a0a0c 100%); }
  .hero2-copy { padding-top: 8px; padding-bottom: 48px; }
  .hero2 h1 { font-size: clamp(46px, 14vw, 72px); }
  .hero2-mark { width: 220px; }
  .cap2 { top: 74px; bottom: auto; left: 16px; right: 16px; max-width: none; font-size: 13px; }
  .hero2-pause { top: calc(60px + min(125vw, 72svh) - 58px); bottom: auto; right: 14px; }
  .draft-tag { top: calc(60px + min(125vw, 72svh) - 50px); right: auto; left: 16px; }
  .t2 { position: absolute; inset: 60px 0 auto 0; aspect-ratio: 4 / 5; max-height: 72svh; }
  .t2-cap { bottom: 72px; font-size: 15px; width: auto; left: 12px; right: 12px; transform: none; }
  .t2-bar { left: 10px; right: 10px; bottom: 12px; gap: 6px; padding: 6px; }
  .t2-time, .ctl2 .lbl { display: none; }
  .hero2.is-theatre .hero2-copy { opacity: 1; pointer-events: auto; transform: none; }
  .end2card { inset: 60px 0 auto 0; aspect-ratio: 4 / 5; max-height: 72svh; padding-bottom: 64px; }
  .calls2 button { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .calls2 .cat { grid-column: 1 / -1; }
  .cine { height: 82svh; min-height: 480px; }
  .cine-copy { top: 22%; transform: none; }
  .cine-line { font-size: clamp(56px, 17vw, 84px); }
  .cine-slide figcaption { left: 16px; right: 16px; max-width: none; font-size: 13px; }
  .hero2 .cta2 .b2 { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .xfade > img, .xfade > video, .cine-slide, .cine-slide img { transition: none !important; }
}

/* App clips fill their tilted frame like the slides do; flipped rows give the image the wide column. */
.ui-slideshow > video.app-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-row.reverse { grid-template-columns: 1fr 1.5fr; }
@media (max-width: 900px) { .ui-row.reverse { grid-template-columns: 1fr; } }

/* Rubén, 8 Oct: "hide the HUD overlay" on one line (wraps only on phones) */
@media (min-width: 700px) { .nowrap-lg { white-space: nowrap; } }

/* 10 Oct brand pack: flat white wordmark in the menu and footer, chrome logo in the hero */
.nav-logo { height: 26px; width: auto; }
.footer-logo { max-width: 180px; height: auto; opacity: 1; }
.hero2-mark { width: clamp(260px, 30vw, 440px); }
.cine-slide picture { display: contents; }
/* Phones: only the tall shots (dark sky up top for the words, cars low); the caption sits under the headline, never over a car */
@media (max-width: 700px) {
  .cine-wide { display: none; }
  .cine-slide img { transform-origin: 50% 80%; }
  .cine-slide figcaption { top: calc(22% + 3 * 0.82 * clamp(56px, 17vw, 84px) + 20px); bottom: auto; }
}
/* 3D icons beside the race tools and setup step titles (11 Oct, graphics/website-assets-2026-10/icons).
   The renders lean orange (#E10600): a small hue turn brings them to the site's crimson. */
h3.has-ico { display: flex; align-items: center; gap: 14px; }
.t-ico { width: 64px; height: 64px; flex: none; filter: hue-rotate(-12deg) drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.step h3.has-ico .t-ico { width: 56px; height: 56px; }
@media (max-width: 700px) { .t-ico, .step h3.has-ico .t-ico { width: 44px; height: 44px; } h3.has-ico { gap: 10px; } }
/* Closing devices (11 Oct, graphics/website-assets-2026-10/closing + the real app screens):
   headline across, the devices big on the right and bleeding off the edge, buttons and email on the left */
.end2-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "head head" "cta art" "sign art"; align-items: start; row-gap: 28px; }
.end2-head { grid-area: head; }
.end2-in > div:not(.end2-head):not(.signup2) { grid-area: cta; }
.end2-in > .signup2 { grid-area: sign; }
.end2-art { grid-area: art; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)) 0 0; align-self: center; }
.end2-art img { display: block; width: 100%; max-width: none; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.28)); }
@media (max-width: 900px) {
  .end2-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "cta" "sign"; }
  .end2-art { margin: 0 calc(-1 * clamp(16px, 5vw, 72px)); }
  .end2-art img { width: 100%; }
}
/* Setup steps: the icon big in the card's top-right corner, breaking out of it (Rubén, 11 Oct) */
.step { position: relative; overflow: visible; }
.step h3.has-ico .t-ico { position: absolute; top: clamp(-56px, -4vw, -36px); right: clamp(-28px, -2vw, -14px); width: clamp(120px, 12vw, 170px); height: auto; aspect-ratio: 1; pointer-events: none; }
.step h3.has-ico { display: block; }
@media (max-width: 700px) { .step h3.has-ico .t-ico { width: 116px; height: auto; top: -34px; right: -8px; } }
/* Race tools: each title in a crimson bar, the icon big on its left end breaking out of it (Rubén, 11 Oct) */
.ui-row-text h3.has-ico { display: inline-flex; width: fit-content; max-width: calc(100% - 40px); white-space: nowrap; align-self: flex-start; align-items: center; gap: 12px; background: var(--accent); color: #fff;
  padding: .28em .7em .28em 0; margin-left: 40px; border-radius: 6px; box-shadow: 0 14px 34px rgba(248,19,62,.22); }
.ui-row-text h3.has-ico .t-ico { width: 106px; height: 106px; margin: -33px 0 -33px -53px; filter: hue-rotate(-12deg) drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
@media (max-width: 700px) {
  .ui-row-text h3.has-ico { margin-left: 30px; gap: 8px; }
  .ui-row-text h3.has-ico .t-ico { width: 78px; height: 78px; margin: -23px 0 -23px -39px; }
}
/* Session analysis mirrored to face into the page (Rubén, 11 Oct) */
.t-ico.flip { transform: scaleX(-1); }
/* Hero, 11 Oct (Rubén): bigger logo with room under it; no "Watch Alan in action" (the video already plays behind);
   Download sits bottom right of the video frame, pause top right; smaller, narrower meta chips */
.hero2-mark { width: clamp(300px, 36vw, 540px); margin-bottom: clamp(30px, 5vh, 56px); }
.hero2-dl { position: absolute; right: clamp(16px, 5vw, 72px); bottom: clamp(32px, 6vh, 64px); z-index: 2; }
.cap2 { bottom: calc(clamp(32px, 6vh, 64px) + 82px); }
.hero2-pause { top: 84px; bottom: auto; }
.hero2.is-theatre .hero2-dl { opacity: 0; pointer-events: none; }
.hero2-meta { gap: 6px; }
.hero2-meta li { font-size: 10px; letter-spacing: .06em; padding: 6px 8px; }
@media (min-width: 701px) { .hero2 .cta2-copy { display: none; } }
@media (max-width: 700px) {
  .hero2-dl { display: none; }
  .hero2-mark { width: 260px; margin-bottom: 26px; }
  .hero2-pause { top: calc(60px + min(125vw, 72svh) - 58px); }
  .cap2 { bottom: auto; }
}
/* Hero (Rubén, 11 Oct): no radio caption over the video; Download centred in the lower-right quadrant */
.hero2 .cap2 { display: none; }
.hero2-dl { right: auto; bottom: auto; left: 75%; top: 75%; transform: translate(-50%, -50%); }
/* Hero logo (Rubén, 11 Oct): bigger, centred in the space between the top bar and the headline (same gap above and below) */
@media (min-width: 701px) {
  .hero2-copy { align-self: stretch; display: flex; flex-direction: column; padding-top: 52px; }
  .hero2-mark { width: clamp(320px, min(40vw, 70vh), 620px); margin: auto 0; padding: 24px 0; box-sizing: content-box; }
}
/* Copy rewrite (11 Oct): the line under the buttons, Hear Alan merged with What Alan does */
.cta-note { margin: 12px 0 0; font: 700 11px/1.4 var(--jb); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.hero2-dl .cta-note { text-align: center; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
#join.end2 .cta-note { color: #fff; }
@media (min-width: 701px) { .hero2 .cta2-copy-note { display: none; } }
@media (max-width: 700px) { .hero2 .cta2-copy-note { margin-top: 10px; } }
.hear2.hear2-solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
#audio-demo .features-grid { margin-top: 2.5rem; }
.card-call { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: rgba(10,10,12,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #fff; font: 600 13px/1.4 var(--jb); position: relative; z-index: 1; }
.card-call .cat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-call .txt { flex: 1 1 auto; min-width: 0; }
.card-call .txt::before { content: "\201C"; } .card-call .txt::after { content: "\201D"; }
.card-call .dur { order: -1; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); font-size: 0; }
.card-call .dur svg { width: 11px; height: 11px; fill: #fff; margin-left: 2px; }
.card-call:hover, .card-call[aria-pressed="true"] { border-color: var(--accent); background: rgba(248,19,62,.16); }
.card-call:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero2-dl .cta-note { white-space: nowrap; }
/* Hear Alan cards: three across on desktop (6 = 2 rows), two on tablets, one on phones */
#audio-demo .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
@media (max-width: 1000px) { #audio-demo .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #audio-demo .features-grid { grid-template-columns: minmax(0, 1fr); } }

/* Race Card on desktop (Rubén, 11 Oct): a soft 3D tilt as it scrolls past, and a faint holographic shine
   sliding across the iridescent frame, like a collectible card. Subtle on purpose; off for reduced motion */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .ui-row.reverse .ui-row-image .ui-slideshow.card-show {
    transform: perspective(1100px) rotate(2deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out; will-change: transform; }
  .card-show::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.20) 44%, rgba(150,225,255,.16) 50%, rgba(255,150,225,.14) 56%, transparent 68%);
    background-size: 260% 260%; background-position: var(--gx, 50%) 50%; mix-blend-mode: screen; opacity: .7; }
}
/* Card calls: one line that fades out (Rubén, 11 Oct); the full line shows in the player when it plays */
.card-call .txt { white-space: nowrap; overflow: hidden; }
.card-call .txt.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.card-call .txt.is-clipped::after { content: none; }
/* Play disc: centre the triangle (the hidden duration text made a second grid row) */
.card-call .dur { display: flex; align-items: center; justify-content: center; line-height: 0; }
.card-call .dur svg { width: 12px; height: 12px; margin-left: 3px; }
/* Red closing section (Rubén, 11 Oct): the price line beside the black Download button, the email box level with the devices */
.end2-in { grid-template-areas: "head head" "cta cta" "sign art"; align-items: center; }
#join .cta2 { display: inline-flex; vertical-align: middle; margin: 0; }
#join .cta2 + .cta-note { display: inline-block; vertical-align: middle; margin: 0 0 0 20px; }
.end2-art { align-self: center; }
@media (max-width: 900px) {
  .end2-in { grid-template-areas: "head" "art" "cta" "sign"; }
  #join .cta2 + .cta-note { display: block; margin: 12px 0 0; }
}
/* Share: the side bar covers desktop, so the share section only shows where the bar is hidden (≤1100px) */
@media (min-width: 1101px) { #share, .rule-share { display: none; } }
/* Side bar tucks away while you scroll and slides back when you stop or point at it */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  .side-share { transition: translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease; }
  .side-share.is-tucked { translate: calc(100% - 8px) -50%; }
  .side-share.is-tucked:hover, .side-share.is-tucked:focus-within { translate: 0 -50%; }
}
.footer-legal { line-height: 1.7; }
/* Hero Download (Rubén, 11 Oct): button and line centred on each other, the line level with the meta chips */
.hero2-dl { display: flex; flex-direction: column; align-items: center; top: auto; bottom: var(--chips-bottom, clamp(32px, 6vh, 72px)); transform: translateX(-50%); }
.hero2-dl .cta-note { margin-top: 14px; }
.hero2-dl { bottom: calc(clamp(32px, 6vh, 72px) + 4px); }
/* Race Cards (Rubén, 11 Oct): four smaller cards that fan out with a staggered rotation as you scroll down */
.card-fan { position: relative; width: min(250px, 62%); aspect-ratio: 9 / 16; margin: 24px auto; }
.fan-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55); transform-origin: 50% 115%;
  transform: translateX(calc(var(--x) * var(--p, 1))) rotate(calc(var(--a) * var(--p, 1))); transition: transform .35s ease-out; }
.fan-card:nth-child(1) { --a: 3deg;   --x: 14px;  z-index: 4; }
.fan-card:nth-child(2) { --a: -6deg;  --x: -26px; z-index: 3; }
.fan-card:nth-child(3) { --a: 10deg;  --x: 44px;  z-index: 2; }
.fan-card:nth-child(4) { --a: -13deg; --x: -58px; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .fan-card { transition: none; } }
/* Closing section without the diagonal stripes */
#join.end2::after { display: none; }
/* Footer: one row, socials + year + version left, sections centre, legal links right; trademark line under it */
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 6px 0 14px; }
.footer-left { display: flex; align-items: center; gap: 14px; }
.footer-left .footer-social { margin: 0; }
footer .footer-links { margin: 0; }
footer .footer-legal-links { margin: 0; gap: 14px; justify-content: flex-end; }
footer .footer-legal-links a { font-size: .66rem; }
footer .footer-copy, footer .footer-build { white-space: nowrap; }
@media (max-width: 760px) { .footer-row { flex-direction: column; } footer .footer-legal-links { justify-content: center; } }
/* the race tools tilt rule (.ui-row.reverse .ui-row-image img) must not reach the fan cards */
.ui-row.reverse .ui-row-image .card-fan .fan-card, .ui-row .ui-row-image .card-fan .fan-card {
  transform: translateX(calc(var(--x) * var(--p, 1))) rotate(calc(var(--a) * var(--p, 1))); transform-origin: 50% 115%;
  width: 100%; height: 100%; max-width: none; border: 0; }
/* Finish line (Rubén, 11 Oct): a chequered band closes the red section, fading in from the red */
#join.end2 { padding-bottom: calc(clamp(84px, 11vw, 160px) + 28px); }
#join.end2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(#0d0d10 0 25%, transparent 0 50%) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.15), #000 70%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.15), #000 70%); }
/* Footer: a thin, quiet end */
footer { padding-top: 22px; padding-bottom: 18px; }
footer .footer-row { margin: 0 0 10px; }
footer .footer-legal { max-width: none; margin: 0; font-size: .56rem; line-height: 1.6; opacity: .75; }
footer { border-top: 0; }
/* Fan cards keep the 3D lean + holographic shine, staggered per card (Rubén, 11 Oct) */
.ui-row .ui-row-image .card-fan .fan-card { display: block; overflow: hidden; border-radius: 16px;
  transform: perspective(900px) translateX(calc(var(--x) * var(--p, 1))) rotate(calc(var(--a) * var(--p, 1))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.ui-row .ui-row-image .card-fan .fan-card img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; border: 0; border-radius: 0; max-width: none; }
.fan-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.20) 44%, rgba(150,225,255,.16) 50%, rgba(255,150,225,.14) 56%, transparent 68%);
  background-size: 260% 260%; background-position: var(--gx, 50%) 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .3s; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .fan-card::after { opacity: .75; } }
/* Body copy a little smaller and lighter (Rubén, 11 Oct): Inter 350; the why paragraphs fit their lines */
.hero2-lead, .why-body p, .about-body p, .section-lead, .ui-row-text p, .feature-card p, .step p, .faq-a, .lang-strip p, .join-feedback, .email-form label { font-weight: 350; }
.hero2-lead strong, .lang-strip p strong { font-weight: 700; }
.hero2-lead { font-size: clamp(15px, 1.1vw, 17px); }
.why-body p { font-size: 15.5px; line-height: 1.8; }
.about-body p { font-size: 15px; line-height: 1.8; }
.section-lead, .ui-row-text p { font-size: 14.2px; }
.feature-card p, .step p { font-size: 13px; }
.faq-a { font-size: 13.4px; }
.lang-strip p { font-size: 13.6px; }
/* Finish band: longer, smoother fade; less empty red above it (Rubén, 11 Oct) */
#join.end2 { padding-bottom: calc(clamp(40px, 5vw, 80px) + 84px); }
#join.end2::before { height: 96px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.7) 70%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.7) 70%, #000 100%); }
/* Closing devices with live screens: warped app screens under a device layer with screen holes, cross-fading staggered */
.dev-stage { position: relative; aspect-ratio: 2 / 1; }
.dev-stage .dev-base { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.dev-screen { position: absolute; z-index: 1; }
.dev-screen img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
.dev-screen img.is-on { opacity: 1; }
.end2-art.dev-stage img.dev-base { width: 100%; }
@media (prefers-reduced-motion: reduce) { .dev-screen img { transition: none; } }
.end2-art .dev-screen img { filter: none; }
/* Closing section tightened (Rubén, 11 Oct): same column as the rest of the site, smaller type,
   the email box as a small glossy black badge, the contact line on one line */
.end2-in { max-width: 1156px; row-gap: 22px; }
#join.end2 h2 { font-size: clamp(52px, 7.4vw, 118px); }
#join.end2 .cta2 .b2 { font-size: 14px; padding-top: 14px; padding-bottom: 14px; }
.signup2 { max-width: 440px; padding: 22px 24px 20px; border-radius: 18px;
  background: linear-gradient(160deg, #26262d 0%, #121216 38%, #050507 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.6), 0 18px 40px rgba(60,0,12,.45), 0 2px 6px rgba(0,0,0,.35);
  position: relative; overflow: hidden; }
.signup2::before { content: ""; position: absolute; inset: 0 0 55% 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)); }
#join.end2 .email-form label { font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
#join.end2 .email-input-group input { font-size: 14px; padding-top: 11px; padding-bottom: 11px; }
#join.end2 .email-input-group .btn { font-size: 12px; padding: 11px 16px; }
#join.end2 .join-feedback { font-size: 12.5px; margin-top: 12px; white-space: nowrap; }
#join.end2 .join-feedback a { font-size: inherit; }
@media (max-width: 480px) { #join.end2 .join-feedback { white-space: normal; } }
/* Screens change through black (Rubén, 11 Oct): the old screen fades out, then the new one fades in */
.dev-screen img { transition: opacity .5s ease; }
.dev-screen img.is-on { transition-delay: .45s; }
.dev-screen img.dev-black { opacity: 1; transition: none; }
/* Hear Alan cards (Rubén, 11 Oct): no red flood on hover, just a soft lift; the play pill styled like the black email badge */
.card-call { background: linear-gradient(160deg, #26262d 0%, #121216 38%, #050507 100%); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.45); transition: border-color .25s, box-shadow .25s, transform .25s; }
.card-call:hover, .card-call[aria-pressed="true"] { background: linear-gradient(160deg, #2c2c34 0%, #15151a 38%, #060608 100%); border-color: rgba(248,19,62,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(248,19,62,.35); transform: translateY(-1px); }
/* Why paragraph a little wider so the first paragraph sits on two lines */
.why-body { max-width: 900px; }
/* Footer mark: the R with the waveform, small, opens the row */
.footer-mark { display: flex; align-items: center; margin-right: 6px; opacity: .9; transition: opacity .2s; }
.footer-mark:hover { opacity: 1; }
.footer-mark img { width: 30px; height: 30px; display: block; }
/* Closing devices bigger, with the buttons and the email badge overlapping their left edge (Rubén, 11 Oct) */
@media (min-width: 901px) {
  .end2-in { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); grid-template-areas: "head head" "cta art" "sign art"; }
  .end2-art.dev-stage { grid-area: art; position: relative; z-index: 0; align-self: end; width: 128%; margin: 0 -8% 0 -20%; }
  .end2-in > div:not(.end2-head):not(.signup2), .end2-in > .signup2, .end2-head { position: relative; z-index: 1; }
  #join .cta2 + .cta-note { text-shadow: 0 1px 8px rgba(120,0,20,.6); }
}
@media (min-width: 901px) {
  .end2-in { grid-template-areas: "head head" "cta cta" "sign art"; }
  .end2-art.dev-stage { grid-area: auto; grid-column: 2; grid-row: 2 / 4; }
  #join .cta2 + .cta-note { white-space: nowrap; }
}
.footer-right { display: flex; align-items: center; gap: 18px; }
.footer-right .footer-mark { margin: 0; }
@media (max-width: 760px) { .footer-right { flex-direction: column; gap: 12px; } }
footer .footer-legal-links { flex-wrap: nowrap; white-space: nowrap; }
/* Devices a little lower, without moving anything else (Rubén, 11 Oct) */
@media (min-width: 901px) { .end2-art.dev-stage { transform: translateY(clamp(40px, 5vw, 80px)); } }
/* Spanish page: the cards show the Spanish line (the English one Alan says stays for screen readers); the note on the English demos */
.card-call .orig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-note { max-width: 760px; margin: 18px auto 0; text-align: center; font: 350 12.5px/1.5 var(--mono); color: var(--muted); }
/* Hear Alan background (Rubén, 11 Oct): the radio headset on the wet pit wall (brand pack 08), not GT7, so the cards stand out */
#audio-demo .section-bg { background-image: linear-gradient(180deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.35) 25%, rgba(10,10,12,.45) 70%, rgba(10,10,12,.95) 100%), url('/assets/img/bg-headset-v.webp');
  background-position: center, center 30%; }
/* Hear Alan background at its own scale: the whole tall image, full section height, no zoom (Rubén, 11 Oct) */
#audio-demo .section-bg { background-color: #0a0a0c; background-size: cover, auto 100%; background-position: center, 78% center;
  animation: none; scale: 1; }
#audio-demo .section-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0a0a0c 0%, rgba(10,10,12,.2) 35%, rgba(10,10,12,0) 55%, rgba(10,10,12,.2) 75%, #0a0a0c 100%); }
/* Hear Alan background: Rubén's pick, the headset hanging by the wet track (11 Oct) */
#audio-demo .section-bg { background-image: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.15) 30%, rgba(10,10,12,.5) 70%, rgba(10,10,12,.95) 100%), url('/assets/img/bg-headset-rain.webp');
  background-size: cover, 100% auto; background-position: center, center top; background-repeat: no-repeat; }
#audio-demo .section-bg::after { display: none; }
#audio-demo .section-bg { background-image: linear-gradient(180deg, rgba(10,10,12,.45) 0%, rgba(10,10,12,.1) 25%, rgba(10,10,12,.55) 50%, #0a0a0c 68%), url('/assets/img/bg-headset-rain.webp'); }
/* Hear Alan background: the headset on the wet pit wall (Rubén's pick, 16:9). The image's lower half sits beside the
   heading, so the headset shows on the right above the cards; below, plain black */
#audio-demo .section-bg { background-image: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0) 30%, #0a0a0c 46%),
    url('/assets/img/bg-headset-wall.webp');
  background-size: 100% 100%, 100% auto; background-position: 0 0, center calc(440px - 56.25vw); }
#audio-demo .section-bg { background-image: linear-gradient(180deg, rgba(10,10,12,.25) 0, rgba(10,10,12,0) 140px, rgba(10,10,12,0) 260px, #0a0a0c 420px),
    url('/assets/img/bg-headset-wall.webp'); }
/* Hear Alan: the headset shows at the bottom, under the cards (Rubén, 11 Oct): image anchored bottom, black fading in from the top */
#audio-demo { padding-bottom: calc(7rem + 220px); }
#audio-demo .section-bg { background-image: linear-gradient(0deg, #0a0a0c 0, rgba(10,10,12,0) 90px, rgba(10,10,12,0) 380px, #0a0a0c 640px),
    url('/assets/img/bg-headset-wall.webp');
  background-size: 100% 100%, 100% auto; background-position: 0 0, center bottom; }
/* less empty space under Hear Alan: the cards cover the top of the headset (Rubén, 11 Oct) */
#audio-demo { padding-bottom: calc(4rem + 40px); }
#audio-demo .section-bg { background-image: linear-gradient(0deg, #0a0a0c 0, rgba(10,10,12,0) 70px, rgba(10,10,12,0) 420px, #0a0a0c 680px),
    url('/assets/img/bg-headset-wall.webp'); }
#audio-demo .section-bg { background-position: 0 0, center calc(100% + 60px); }
/* Responsive fixes (11 Oct night): the hero Download block only on wide screens (≤900 px: iPads and phones get
   "Notify me" in the copy, the Mac download is no use there); the Spanish cards' hidden English line takes no space */
@media (max-width: 900px) {
  .hero2-dl { display: none !important; }
  .hero2 .cta2-copy { display: flex !important; }
  .hero2 .cta2-copy-note { display: block !important; }
}
.card-call .orig { display: none; }
/* long Spanish tool titles must wrap on narrow screens instead of widening the row */
.ui-row > * { min-width: 0; }
@media (max-width: 760px) { .ui-row-text h3.has-ico { white-space: normal; max-width: calc(100% - 30px); } }
/* phones: the Race Cards fan spreads less, so the outer cards stay on screen */
@media (max-width: 700px) {
  .fan-card:nth-child(1) { --x: 8px; } .fan-card:nth-child(2) { --x: -16px; --a: -5deg; }
  .fan-card:nth-child(3) { --x: 24px; --a: 7deg; } .fan-card:nth-child(4) { --x: -30px; --a: -9deg; }
  .card-fan { width: min(220px, 56%); }
}
/* nav Download never wraps (Spanish "Descargar (Mac)" on phones) */
.nav-cta { white-space: nowrap; }
@media (max-width: 420px) { .nav-cta { padding-left: 12px; padding-right: 12px; font-size: 11px; letter-spacing: .08em; } }
/* Hear Alan cards: the play box sits at the bottom of every card, so a row's boxes line up whatever the text length */
#audio-demo .feature-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
#audio-demo .feature-card-body .card-call { margin-top: auto; }
#audio-demo .feature-card-body > p { margin-bottom: 16px; }
/* crimson title bars always wrap their text exactly (Rubén, 11 Oct) */
.ui-row-text h3.has-ico { max-width: none; font-size: clamp(1.4rem, 2.3vw, 2.1rem); }
/* Hear Alan cards: the 3D icon sits on the seam between photo and text, top right (replaces the faint line icon) */
#audio-demo .feature-icon { display: none; }
#audio-demo .feature-card-body { position: relative; overflow: visible; }
#audio-demo .feature-card { overflow: visible; }
.card-ico { position: absolute; right: 22px; top: -62px; width: 104px; height: 104px; z-index: 3; pointer-events: none;
  filter: hue-rotate(-12deg) drop-shadow(0 12px 18px rgba(0,0,0,.65)); transition: transform .35s ease; }
#audio-demo .feature-card:hover .card-ico { transform: translateY(-4px) rotate(-3deg); }
@media (max-width: 640px) { .card-ico { width: 84px; height: 84px; top: -50px; right: 16px; } }
#audio-demo .feature-card-body > .card-ico { position: absolute; z-index: 3; }
/* phones: card icon level with the card title, not on the photo (Rubén, 11 Oct) */
@media (max-width: 640px) {
  #audio-demo .feature-card-body > .card-ico { top: 38px; width: 72px; height: 72px; right: 16px; }
  #audio-demo .feature-card-body h3 { padding-right: 84px; }
}
/* Card photos brighter (Rubén, 11 Oct): a lighter fade, only near the text, and a small lift */
#audio-demo .feature-card-img-wrap::after { background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0) 62%, rgba(10,10,12,.55) 84%, var(--surface) 100%); }
#audio-demo img.feature-card-img { filter: brightness(1.15) saturate(1.08); }
#audio-demo .feature-card:hover img.feature-card-img { filter: brightness(1.22) saturate(1.15); }
/* fuel can faces into the card */
.card-ico.flip { transform: scaleX(-1); }
#audio-demo .feature-card:hover .card-ico.flip { transform: scaleX(-1) translateY(-4px) rotate(3deg); }
/* card text stops short of the icon so the two never touch */
@media (max-width: 640px) { #audio-demo .feature-card-body > p { padding-right: 84px; } }
/* Card icon level with the title on every screen; title and line keep clear of it */
#audio-demo .feature-card-body > .card-ico { top: 46px; width: 92px; height: 92px; right: 24px; }
#audio-demo .feature-card-body h3, #audio-demo .feature-card-body > p { padding-right: 104px; }
@media (max-width: 640px) {
  #audio-demo .feature-card-body > .card-ico { top: 38px; width: 72px; height: 72px; right: 16px; }
  #audio-demo .feature-card-body h3, #audio-demo .feature-card-body > p { padding-right: 84px; }
}
@media (min-width: 641px) { #audio-demo .feature-card-body > .card-ico { top: 27px; } }
.footer-mark img { width: 52px; height: 52px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
/* Race tools screenshots (Rubén, 11 Oct): a soft white glow so dark screens lift off the black page; it breathes slowly */
.ui-row-image .ui-slideshow:not(.card-show) { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 28px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.6);
  animation: screenGlow 6s ease-in-out infinite; }
.ui-row:nth-child(even) .ui-row-image .ui-slideshow { animation-delay: -3s; }
@keyframes screenGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 46px rgba(255,255,255,.16), 0 24px 60px rgba(0,0,0,.6); }
}
@media (prefers-reduced-motion: reduce) { .ui-row-image .ui-slideshow { animation: none; } }
/* Screens lit like the 3D icons (Rubén, 11 Oct): white key light on the left, crimson rim on the right; slow breathing */
.ui-row-image .ui-slideshow:not(.card-show) { animation: screenGlow2 7s ease-in-out infinite; }
@keyframes screenGlow2 {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.09), -14px -4px 34px -6px rgba(255,255,255,.12), 16px 6px 38px -6px rgba(248,19,62,.22), 0 26px 60px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.16), -20px -6px 52px -6px rgba(255,255,255,.22), 22px 8px 56px -6px rgba(248,19,62,.40), 0 26px 60px rgba(0,0,0,.6); }
}
/* softer, more subtle (Rubén, 11 Oct) */
.ui-row-image .ui-slideshow:not(.card-show) { animation: screenGlow3 8s ease-in-out infinite; }
@keyframes screenGlow3 {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.06), -16px -4px 44px -10px rgba(255,255,255,.07), 18px 6px 48px -10px rgba(248,19,62,.12), 0 26px 60px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.10), -20px -6px 60px -10px rgba(255,255,255,.12), 22px 8px 64px -10px rgba(248,19,62,.22), 0 26px 60px rgba(0,0,0,.6); }
}
/* no light outline around the screens, only the soft glow (Rubén, 11 Oct) */
.ui-row-image .ui-slideshow:not(.card-show) { border-color: transparent; animation-name: screenGlow4; }
@keyframes screenGlow4 {
  0%, 100% { box-shadow: -16px -4px 44px -10px rgba(255,255,255,.07), 18px 6px 48px -10px rgba(248,19,62,.12), 0 26px 60px rgba(0,0,0,.6); }
  50%      { box-shadow: -20px -6px 60px -10px rgba(255,255,255,.12), 22px 8px 64px -10px rgba(248,19,62,.22), 0 26px 60px rgba(0,0,0,.6); }
}
/* Setup background calmer (Rubén, 11 Oct): darker overall, the red shifted toward magenta */
.section-bg-setup { filter: brightness(.6) contrast(1.05) saturate(.9) hue-rotate(-14deg); }
.section-bg-setup { background-image: linear-gradient(180deg, rgba(10,10,12,.85) 0%, rgba(10,10,12,.5) 25%, rgba(10,10,12,.55) 75%, rgba(10,10,12,.95) 100%), url('/assets/img/setup-bg.webp'); }
/* Hero sound mode (12 Oct): the footage is clickable; with sound on, the copy fades away when the mouse rests */
.hero2 { cursor: pointer; }
.hero2 .hero2-copy, .hero2 .hero2-dl, .hero2 .hero2-scrim { transition: opacity .8s ease; }
.hero2.is-sound.is-idle .hero2-copy, .hero2.is-sound.is-idle .hero2-dl { opacity: 0; pointer-events: none; }
.hero2.is-sound.is-idle .hero2-scrim { opacity: .35; }
.hero2 .hero2-copy a, .hero2 .hero2-copy button, .hero2 .hero2-dl a, .hero2 .hero2-dl button { cursor: pointer; }
.hero2 h1, .hero2 .hero2-lead { cursor: auto; }
@media (max-width: 700px) { .hero2.is-sound.is-idle .hero2-copy { opacity: 1; pointer-events: auto; } }
/* Hero: a soft dark vignette in the bottom-right corner (covers the game's corner logo) */
.hero2-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 34% 32% at 100% 100%, rgba(10,10,12,.92) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,0) 100%); }
/* "Alan IS the HUD": no rule above it, same size as the other big headlines (Rubén, 12 Oct) */
.why-callout { border-top: 0 !important; padding-top: 0 !important; margin-top: 3.5rem !important;
  font: 900 italic clamp(2.6rem, 6vw, 5.2rem)/.9 var(--head) !important; letter-spacing: -.01em !important; }
.why-callout { font-size: clamp(2.6rem, 5.6vw, 4.8rem) !important; line-height: .9 !important; letter-spacing: -.005em !important; }
.why-body p { text-align: center !important; }
/* Why: more air under the headline, less before "Alan IS the HUD" (Rubén, 12 Oct) */
#why-heading { margin-bottom: 2.4rem !important; }
.why-callout { margin-top: 1.6rem !important; }
.why-callout { margin-top: 2.8rem !important; }

/* ── Motion with weight and inertia (26 Oct, NEXT_ROUND 1) ─────────────────────────────────────────
   One shared "settle" entrance replacing the plain fade-up: a ~0.9 s rise with a small spring overshoot,
   cards staggered, icons landing a beat after their card, hover returns easing out slowly. Once per element
   (the .visible class is never removed), small distances, no blank waits. Reduced motion: none of it. */
@media (prefers-reduced-motion: no-preference) {
  .js-loaded .fade-up {
    transform: translate3d(0, 34px, 0) scale(.985);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .95s cubic-bezier(.2, 1.14, .34, 1);
    will-change: opacity, transform;
  }
  .js-loaded .fade-up.visible { transform: translate3d(0, 0, 0) scale(1); }
  .js-loaded .section-title.fade-up { transform: translate3d(0, 26px, 0); transition-duration: .8s, 1.05s; }
  /* 26 Oct fix: the line above outranked .fade-up.visible, so every headline stayed 26 px low over its lead */
  .js-loaded .section-title.fade-up.visible { transform: translate3d(0, 0, 0); }
  .js-loaded .features-grid > .feature-card:nth-child(3n + 2) { transition-delay: .09s; }
  .js-loaded .features-grid > .feature-card:nth-child(3n + 3) { transition-delay: .18s; }
  /* the 3D icon lands a beat after its card, with a tiny spring (translate/scale/opacity only: the
     transform property stays free for the flipped icons and the hover tilt) */
  .js-loaded .feature-card .card-ico { transition: transform .35s ease, translate .9s cubic-bezier(.2, 1.35, .34, 1) .22s, scale .9s cubic-bezier(.2, 1.35, .34, 1) .22s, opacity .6s ease .22s; }
  .js-loaded .feature-card.fade-up:not(.visible) .card-ico { translate: 0 14px; scale: .9; opacity: 0; }
  /* hover returns ease out slowly (the way in stays quick) */
  .card-call, .btn, .btn-primary, .btn-ghost, .nav-cta { transition-duration: .45s; transition-timing-function: cubic-bezier(.2, .8, .3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .js-loaded .fade-up { transition: none; transform: none; }
}