/* Shared visual system, applied after the legacy layout stylesheet. */
:root { --muted:#b1bdd1; --dark:#080c14; --surface:#121b2a; --line:#2c3a51; }
body { background:#080c14; color:#f4f7ff; }
.blob { display:none; }
.reveal { opacity:1; transform:none; }
h1,h2 { line-height:1; }
h3 { font-family:var(--font-body); font-style:normal; text-transform:none; letter-spacing:0; line-height:1.4; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #a9c6ff; outline-offset:4px; }
.hero { min-height:auto; background:radial-gradient(ellipse at 85% 50%,#162e60,transparent 50%),#080c14; padding:24px max(24px,calc((100vw - 1120px)/2)) 32px; }
.nav { position:relative; top:auto; padding:10px 0 26px; margin:0 auto; border-radius:0; border-bottom:1px solid var(--line); gap:20px; }
.nav.scrolled { background:transparent; box-shadow:none; backdrop-filter:none; }
.nav-links a { color:#c3cee1; font-size:.78rem; letter-spacing:.02em; text-transform:none; }
.nav-cta,.btn-primary,.btn-secondary { border-radius:8px; font-family:var(--font-body); font-style:normal; text-transform:none; letter-spacing:0; font-weight:700; font-size:.9rem; min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
.nav-cta { background:#1f5aff; border-color:#1f5aff; }
.btn-secondary { background:#141f32; border-color:#475974; }
.btn-glow,.eyebrow-dot,.live-dot,.preview-chip,.preview-card { animation:none; }
.hero-main { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); padding:80px 0 92px; min-height:0; gap:70px; }
.hero-content { text-align:left; margin:0; }
.hero-content h1 { font-size:clamp(4.5rem,8.5vw,7.5rem); line-height:.89; margin:26px 0; }
.gradient-text { background:none; color:#5688ff; }
.eyebrow { padding:0; border:0; border-radius:0; background:none; color:#b2caff; font-size:.72rem; margin:0; }
.subtitle { color:#bcc8dd; font-size:1.08rem; line-height:1.8; max-width:440px; }
.hero-actions { justify-content:flex-start; gap:12px; }
.hero-note { font-size:.8rem; font-weight:400; color:#a5b4cd; }
.hero-preview { margin:0 auto; max-width:360px; }
.preview-card { padding:32px; border:1px solid #4a6189; border-radius:16px; background:linear-gradient(145deg,#1c2a43,#101827); box-shadow:14px 16px 0 #1f5aff,0 25px 65px #0005; transform:rotate(-3deg); }
.preview-card-title { font-size:2.5rem; margin:26px 0 6px; }
.preview-card-header,.preview-card-meta,.preview-card-footer { color:#c3d0e8; }
.preview-card-progress-bar { width:80%; animation:none; background:#6593ff; }
.preview-chip { border-radius:10px; background:#1f5aff; color:white; border:1px solid #87a9ff; }
.sport-strip { margin-top:0; border-color:var(--line); color:#b9c7de; }
.features,.how-it-works,.demo,.faq { background:transparent; max-width:1168px; padding:84px 24px; margin:auto; }
.features h2,.how-it-works h2,.demo h2,.faq h2,.early-access h2 { font-size:clamp(2.6rem,4.5vw,4rem); line-height:1.05; }
.section-tag,.business .section-tag { color:#9abaff; font-size:.72rem; letter-spacing:.12em; margin-bottom:18px; }
.section-subtitle { color:#b8c5dc; line-height:1.8; }
.feature-grid { gap:16px; }
.feature-card { text-align:left; background:var(--surface); color:#f4f7ff; border:1px solid var(--line); border-radius:12px; padding:28px 24px; }
.feature-card:hover { border-color:#799fe9; transform:none; box-shadow:none; }
.feature-card h3 { font-family:var(--font-body); font-size:1.05rem; font-style:normal; text-transform:none; color:white; letter-spacing:0; line-height:1.4; }
.feature-card p { color:#b6c3d9; line-height:1.8; font-size:.9rem; }
.feature-icon-wrap { width:42px; height:42px; border-radius:10px; background:#213558; color:#abc6ff; margin-bottom:24px; }
.feature-card:hover .feature-icon-wrap { transform:none; }
.how-it-works { border-top:1px solid var(--line); }
.steps { text-align:left; gap:40px; }
.steps::before { display:none; }
.step-number { background:none; color:#99baff; font-family:var(--font-display); font-size:2.5rem; border-bottom:1px solid var(--line); border-radius:0; width:100%; justify-content:flex-start; height:auto; padding-bottom:14px; }
.step p { margin:0; max-width:none; color:#b6c3d9; line-height:1.8; }
.video-placeholder { max-width:800px; margin:auto; aspect-ratio:auto; min-height:260px; background:radial-gradient(ellipse at center,#203b71,#111a2a); border:1px solid #394d72; border-radius:16px; box-shadow:none; }
.play-btn { animation:none; }
.business { background:#0e1624; border-block:1px solid var(--line); padding:88px 24px; }
.business h2 { font-size:clamp(3.5rem,6vw,5rem); line-height:.98; }
.business-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:56px; }
.business-steps { padding:8px 0; background:none; border:0; box-shadow:none; border-radius:0; }
.business-steps h3 { font-family:var(--font-display); font-style:italic; text-transform:uppercase; font-size:2.7rem; line-height:1.05; }
.business-lead,.business-step-list p { color:#b9c7dd; line-height:1.8; }
.business-step-number { border:1px solid #4a6490; background:#182842; color:#bcd1ff; border-radius:8px; }
.business-guide-link { color:#b4ceff; }
.business-dashboard { min-width:0; background:#152033; color:#f7f9ff; padding:26px; border:1px solid #476084; border-radius:16px; box-shadow:0 24px 55px #0004; }
.dashboard-topbar { border-color:#3b4b65; }
.dashboard-label { color:#afc7f2; }
.dashboard-status { background:#233654; color:#c9dcff; border:1px solid #506b96; border-radius:6px; }
.dashboard-stats { gap:10px; }
.dashboard-stats div { min-width:0; background:#20314b; border:1px solid #3d5374; border-radius:8px; padding:16px 10px; }
.dashboard-stats div:first-child { border-color:#6799ff; }
.dashboard-stats span { color:#c1d0e9; font-size:.62rem; }
.dashboard-stats strong { color:white; font-size:2rem; margin:10px 0 6px; }
.dashboard-stats small { color:#bfcfe8; font-size:.7rem; }
.dashboard-schedule { background:#131e30; border:1px solid #40516e; padding:0; border-radius:10px; overflow:hidden; }
.dashboard-schedule-head { padding:16px; margin:0; background:#24344d; }
.dashboard-schedule-head span { color:#c4d2e8; }
.schedule-row { padding:18px 16px; gap:14px; border-color:#3b4b65; }
.schedule-row time,.schedule-row small { color:#bccce5; }
.schedule-row strong { color:#f5f8ff; font-size:.88rem; }
.schedule-line.booked { background:#76a2ff; }
.dashboard-foot { margin-top:0; color:#b5c8e6; font-size:.75rem; }
.dashboard-foot .icon { color:#a9c8ff; }
.faq { max-width:860px; }
.faq-item { border-color:var(--line); }
.faq-question { color:#f3f7ff; padding:24px 0; font-size:1rem; }
.faq-answer-inner p { color:#b7c5dc; line-height:1.8; }
.faq-answer-inner a,.waitlist-permission a { color:#afc9ff; }
.early-access { padding:80px 24px; background:linear-gradient(145deg,#1a315e,#0f1b32); border-block:1px solid #3c5074; }
.early-access p { color:#c0cee4; max-width:600px; margin-inline:auto; }
.waitlist-form { max-width:560px; }
.waitlist-form>input { min-width:0; border-radius:8px; background:#101d32; border-color:#6a81a6; }
.waitlist-form input::placeholder { color:#b5c5df; }
.waitlist-permission { max-width:none; color:#c3d1e7; line-height:1.7; }
.footer { padding:44px 24px; border-top:1px solid var(--line); color:#b7c5da; }
.footer .logo { width:auto; justify-content:center; margin-bottom:18px; }
.footer-links { margin-top:20px; gap:16px 24px; }
.notice-page { background:#080c14; }
.notice-card { background:#121b2a; color:#f4f7ff; border-color:var(--line); box-shadow:none; }
.notice-card p { color:#bac7dc; }
.notice-card a { color:#b2ccff; }
@media(max-width:960px){.business-layout{gap:28px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links{gap:14px}.hero-main{gap:40px}.business-dashboard{padding:20px}}
@media(max-width:760px){.nav-links{display:none}.hero-main{grid-template-columns:1fr;padding:60px 0 78px;gap:56px}.hero-content{text-align:left}.hero-content h1{font-size:clamp(4rem,13vw,6rem)}.hero-actions{justify-content:flex-start}.hero-preview{max-width:330px;width:calc(100% - 24px)}.business-layout{grid-template-columns:1fr;gap:36px}.business-dashboard{width:100%;max-width:580px;margin:auto}.features,.how-it-works,.demo,.faq,.business{padding:64px 24px}.business-steps h3{font-size:2.5rem}.steps{grid-template-columns:1fr;gap:28px}.step-number{margin-left:0}.section-subtitle{margin-bottom:36px}.sport-strip{flex-wrap:wrap}.dashboard-topbar{flex-wrap:wrap}}
@media(max-width:440px){.feature-grid{grid-template-columns:1fr}.logo-wordmark{width:140px}.nav-cta{padding:8px 12px;font-size:.78rem}.nav{gap:12px}.hero-actions{gap:10px}.hero-actions a{padding:13px 16px;font-size:.8rem}.business-dashboard{padding:16px}.dashboard-stats{gap:6px}.dashboard-stats div{padding:12px 7px}.dashboard-stats strong{font-size:1.5rem}.dashboard-stats small{font-size:.65rem}.dashboard-schedule-head,.schedule-row{padding:14px 12px}.schedule-row{gap:10px}.notice-card{padding:24px}}
/* Motion follows the same restrained rhythm throughout the page. */
@keyframes gentle-float {
  0%,100% { transform:translateY(0) rotate(-3deg); }
  50% { transform:translateY(-8px) rotate(-2deg); }
}
@keyframes chip-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
@keyframes progress-enter {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
@media(prefers-reduced-motion:no-preference){
  .motion-ready .reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1);
    transition-delay:var(--delay,0s);
  }
  .motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); }
  .hero-preview.is-visible .preview-card { animation:gentle-float 7s ease-in-out 3; }
  .hero-preview.is-visible .preview-chip { animation:chip-float 6s ease-in-out 3; }
  .hero-preview.is-visible .chip-2 { animation-delay:1s; }
  .preview-card-progress-bar { transform-origin:left; }
  .hero-preview.is-visible .preview-card-progress-bar { animation:progress-enter 1.2s .3s ease both; }
  .feature-card,.business-dashboard,.dashboard-stats>div,.schedule-row {
    transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
  }
  .btn-primary,.btn-secondary,.nav-cta { transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
  .btn-primary:active,.btn-secondary:active,.nav-cta:active { transform:scale(.97); }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .feature-card:hover { transform:translateY(-5px); box-shadow:0 14px 28px #0003; }
  .dashboard-stats>div:hover { transform:translateY(-3px); border-color:#87adf7; }
  .schedule-row:hover { background:#23344e; }
  .btn-primary:hover,.nav-cta:hover { transform:translateY(-2px); box-shadow:0 7px 24px #1f5aff40; }
  .business-guide-link { transition:color .2s ease,gap .2s ease; }
  .business-guide-link:hover { gap:18px; color:#dce8ff; }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-ready .reveal { opacity:1; transform:none; transition:none; }
  .preview-card,.preview-chip,.preview-card-progress-bar { animation:none!important; }
}