/* Reps Race site: the app's Soft Blue and Rubik, with gymwhere.app's liquid glass (floating header, lens buttons,
   sliding tab lens). Light and dark: data-theme on <html>, set before paint from the saved choice or the system. */
@font-face { font-family: Rubik; font-weight: 400 800; font-display: swap; src: url(/assets/rubik.woff2) format("woff2"); }
:root {
  --blue: #3B76F6; --blue-deep: #2B5FE0; --gold: #FFB21E; --red: #F2545B;
  --bg: #F6F9FF; --text: #101828; --text2: #4b5875; --muted: #667394; --accent: #3B76F6;
  --line: #10182819; --panel: #ffffffb3; --glass: #F6F9FFc4; --rim: #ffffffd9; --shade: #3B76F61f;
  --lens: linear-gradient(135deg, #ffffffcc, #ffffff40 48%, #10182808);
  --blue-lens: linear-gradient(165deg, #ffffff55 0%, #ffffff08 43%, #10182826 100%), var(--blue);
  --lens-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 #1018281a, 0 10px 28px var(--shade);
  color-scheme: light;
}
[data-theme=dark] {
  --bg: #0F1626; --text: #F6F9FF; --text2: #C9D3EA; --muted: #8E9BBB; --accent: #7FA5FF;
  --line: #F6F9FF1f; --panel: #F6F9FF08; --glass: #0F1626c2; --rim: #F6F9FF33; --shade: #00000066;
  --lens: linear-gradient(135deg, #F6F9FF1c, #F6F9FF06 48%, #0F162633);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 500 17px/1.55 Rubik, system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .3s; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid #A9C3FB; outline-offset: 3px; }
.wrap { width: min(1040px, 100% - 40px); margin-inline: auto; }
.wordmark { font-weight: 800; letter-spacing: -.01em; }
.wordmark span { color: var(--accent); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
h2 { font-size: clamp(32px, 5.4vw, 54px); }
h3 { font-size: 22px; letter-spacing: -.01em; }
.eyebrow, .micro { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.eyebrow { color: var(--muted); margin-bottom: 18px; }
.micro { color: var(--accent); }
.lead { color: var(--text2); font-size: 19px; margin-top: 18px; max-width: 540px; }
.muted { color: var(--muted); }
.glow { color: var(--accent); text-shadow: 0 0 34px #3B76F659, 0 0 2px #3B76F633; }

/* Glass: a lens of reflections over the page, and a blue lens for buttons and what's chosen. */
.glass { background: var(--lens), var(--glass); border: 1px solid var(--line); box-shadow: var(--lens-shadow); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); }
.button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; min-height: 54px; padding: 15px 26px; border-radius: 99px; background: var(--blue-lens); border: 1px solid #ffffff55; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: inset 0 2px 2px #ffffff66, inset 0 -2px 5px #10182833, 0 8px 20px #3B76F64d, 0 0 26px #3B76F626; transition: transform .2s, box-shadow .25s; }
.button:before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 20%, #ffffff4d 46%, transparent 68%); transform: translateX(-130%); transition: transform .65s; }
.button:hover:before, .button:focus-visible:before { transform: translateX(130%); }
.button:hover { transform: translateY(-2px); box-shadow: inset 0 2px 2px #ffffff88, inset 0 -2px 4px #10182833, 0 12px 28px #3B76F666, 0 0 32px #3B76F640; }
.button:active { transform: translateY(1px); }
.button.small { white-space: nowrap; min-height: 40px; padding: 9px 16px; font-size: 13px; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .button:before { display: none; } html { scroll-behavior: auto; } }

/* Header: open at the top; once you scroll it shrinks into a glass bar and shows the beta button. */
.site-header { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(100% - 32px, 1180px); display: flex; align-items: center; gap: 20px; padding: 10px 14px; border: 1px solid transparent; border-radius: 22px; transition: width .35s, top .35s, padding .35s, background-color .35s, border-color .35s, box-shadow .35s; }
.site-header.is-scrolled { top: 10px; width: min(100% - 40px, 1040px); padding: 7px 8px 7px 12px; background: var(--lens), var(--glass); border-color: var(--line); box-shadow: var(--lens-shadow); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 21px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; transition: width .35s, height .35s; }
.is-scrolled .brand img { width: 32px; height: 32px; }
.site-header nav { display: flex; gap: 24px; margin-inline: auto; }
.site-header nav a { color: var(--text); text-decoration: none; font-size: 15px; opacity: .8; }
.site-header nav a:hover { opacity: 1; color: var(--accent); }
.header-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.site-header nav + .header-tools { margin-left: 0; }
.header-cta { display: none; }
.is-scrolled .header-cta { display: inline-flex; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.icon-button svg { width: 20px; height: 20px; }
.back-to-top { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 15; }

/* Landing page */
section { padding-block: 88px; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-block: 140px 70px; }
.hero h1 { font-size: clamp(50px, 8vw, 90px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 32px; }
.badge img { width: 150px; height: 50px; }
.platforms { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 24px; }
.platforms li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 99px; font-size: 14px; font-weight: 700; }
.platforms svg { width: 17px; height: 17px; }
.platforms small { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding-left: 8px; border-left: 1px solid var(--line); }
.platforms .live small { color: var(--accent); }
.note { font-size: 14px; color: var(--muted); margin-top: 14px; }
.demo { min-width: 0; }
.tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; border-radius: 99px; }
.tabs button { position: relative; z-index: 1; min-height: 46px; border-radius: 99px; font-size: 15px; font-weight: 700; transition: color .3s; }
.tabs button span { font-size: 11px; color: var(--muted); margin-right: 6px; transition: color .3s; }
.tabs button[aria-pressed=true], .tabs button[aria-pressed=true] span { color: #fff; }
.tab-lens { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 99px; background: var(--blue-lens); box-shadow: inset 0 2px 2px #ffffff66, inset 0 -2px 4px #10182833, 0 6px 16px #3B76F64d; transition: transform .45s cubic-bezier(.34, 1.3, .64, 1); }
.demo figure { margin-top: 26px; text-align: center; }
.phone { position: relative; width: 270px; margin-inline: auto; border-radius: 40px; padding: 8px; background: #101828; box-shadow: 0 30px 70px #3B76F633, inset 0 0 0 1px #ffffff26; }
.phone img { width: 100%; border-radius: 32px; }
.demo .hop { position: absolute; width: 120px; left: -92px; bottom: -14px; filter: drop-shadow(0 18px 24px #10182833); }
.demo figcaption { min-height: 76px; margin-top: 22px; }
.demo figcaption b { display: block; font-size: 20px; }
.demo figcaption span { font-size: 15px; color: var(--muted); }
.proof { border-block: 1px solid var(--line); padding-block: 30px; }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.proof div div { border-right: 1px solid var(--line); }
.proof div div:last-child { border: 0; }
.proof strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.proof span { font-size: 14px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { border-radius: 24px; padding: 24px; }
.card h3 { margin-top: 10px; }
.card p { color: var(--text2); font-size: 15px; margin-top: 10px; }
.card .art { width: 112px; height: 112px; margin: 0 auto 8px; }
.split { display: grid; grid-template-columns: 1fr 300px; gap: 70px; align-items: center; }
.points { list-style: none; margin-top: 28px; display: grid; gap: 16px; font-size: 16px; color: var(--text2); }
.points li { display: grid; grid-template-columns: 8px 1fr; gap: 14px; }
.points li:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px #3B76F680; margin-top: 8px; }
.points b { color: var(--text); }
.private { text-align: center; }
.private .lead { margin-inline: auto; }
.final { text-align: center; padding-block: 90px 110px; border-top: 1px solid var(--line); }
.final img { width: 140px; margin: 0 auto 20px; }
.final h2 { font-size: clamp(42px, 7vw, 72px); }
.final .cta-row, .final .platforms { justify-content: center; }

/* Policy and support pages */
.doc { max-width: 720px; padding-block: 130px 80px; }
.doc h1 { font-size: clamp(36px, 6vw, 52px); margin-bottom: 8px; }
.doc h2 { font-size: 22px; letter-spacing: -.01em; margin: 38px 0 8px; }
.doc p, .doc li { color: var(--text2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; }
.doc .card { margin-top: 14px; padding: 18px 20px; border-radius: 20px; color: var(--text2); }
.doc .card strong { display: block; color: var(--text); margin-bottom: 4px; }
.doc .card li { margin: 4px 0; }
.doc .button { margin-top: 20px; }

footer { border-top: 1px solid var(--line); padding-block: 28px 44px; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
footer a { color: var(--text2); }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .split { gap: 40px; grid-template-columns: 1fr 260px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .site-header { top: 8px; width: calc(100% - 20px); padding: 8px 8px 8px 10px; }
  .site-header.is-scrolled { top: 8px; width: calc(100% - 32px); }
  .site-header nav { display: none; }
  .site-header { gap: 8px; }
  .brand { font-size: 18px; gap: 8px; }
  .header-cta span { display: none; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-block: 108px 40px; gap: 40px; }
  .hero .lead { margin-inline: auto; font-size: 17px; }
  .cta-row, .platforms { justify-content: center; }
  .phone { width: min(250px, 66vw); border-radius: 36px; }
  .phone img { border-radius: 29px; }
  .demo .hop { width: 90px; left: -54px; }
  section { padding-block: 60px; }
  .proof .wrap { grid-template-columns: 1fr 1fr; }
  .proof div div:nth-child(2) { border: 0; }
  .proof strong { font-size: 28px; }
  .cards.three { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .card .art { width: 88px; height: 88px; }
  .cards:not(.three) .micro { font-size: 10px; letter-spacing: .02em; }
  .split { grid-template-columns: 1fr; }
  .tabs button { font-size: 14px; }
  .tabs button span { display: none; }
  .doc { padding-block: 100px 60px; }
}
@media (max-width: 380px) { .is-scrolled .brand img { display: none; } }
@supports not (backdrop-filter: blur(1px)) { .site-header.is-scrolled, .glass { background: var(--bg); } }