/* Keep the live preview completely clear and stable while visitors use it. */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);min-height:0;padding-top:24px;padding-bottom:68px}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(58px,6.3vw,88px)}
.hero-actions{flex-wrap:wrap}
.hero-stage{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column;gap:24px;padding:10px 20px 0;margin:0;perspective:1600px;scroll-margin-top:24px}
.hero-stage::before{content:'';position:absolute;inset:120px 0 90px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#83c7af16,transparent 68%);pointer-events:none}
.preview-intro{text-align:center;max-width:380px}
.preview-live{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--mint)}
.preview-intro h2{font-size:23px;line-height:1.25;letter-spacing:-.7px;margin:12px 0 9px}
.preview-intro p{font-size:12px;line-height:1.75;color:var(--muted)}
.hero-stage .phone,.hero-stage:hover .phone{--radius:48px;width:min(320px,calc(100% - 14px));transform:rotateX(3deg) rotateY(-10deg) rotateZ(-3deg);transition:transform .45s ease;box-shadow:inset 0 0 0 1px #fff6,0 28px 60px #0005;z-index:1}
.hero-stage.is-testing .phone,.hero-stage.is-testing:hover .phone{transform:none}
.hero-stage.is-demo-open .phone{visibility:hidden}
.hero-stage:not(.is-testing) .live-app{pointer-events:none}
.phone-demo-start{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 26%;border:0;border-radius:inherit;background:transparent;transform:translateZ(2px);cursor:pointer;touch-action:manipulation}
.phone-demo-start>span{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 18px;border:1px solid #d7f2dc88;border-radius:999px;background:#b5d8bdf5;color:#16251d;box-shadow:0 5px 24px #0006;font-size:12px;font-weight:750;line-height:1.2;white-space:nowrap;transition:background-color .2s ease,box-shadow .2s ease}
.phone-demo-start:hover>span,.phone-demo-start:focus-visible>span{background:#d0ead6;box-shadow:0 5px 30px #0008}
.phone-demo-start[hidden],[data-reset-demo][hidden]{display:none!important}
.demo-dialog-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.demo-dialog-actions .text-link{font-size:11px}
.phone .phone-display::after{background:none}
.preview-controls{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.preview-controls .button{min-height:46px;font-size:12px;padding:12px 21px;gap:18px}
.preview-controls .text-link{min-height:44px;font-size:11px}
.preview-note{font-size:10px;line-height:1.6;text-align:center;color:var(--muted);margin-top:-15px;max-width:300px}
.hero-note{font-size:11px}
.hero-foot{display:none}
.steps article{display:block}
.steps h3{margin-top:0}
.steps p{grid-column:auto}
.app-entry{grid-template-columns:minmax(0,1fr) 38px}
.sport-card-top{justify-content:flex-start;font-weight:700;letter-spacing:1.5px}
.sport-card img{filter:none}
.sport-card:hover img{transform:none}
.sport-card::after{background:linear-gradient(180deg,#0004,transparent 27%,#0001 45%,#000b)}
.sport-card:first-child img{object-position:47% center}
.sport-card:nth-child(2) img{object-position:43% center}
.sport-card:nth-child(3) img{object-position:55% center}
.sport-card:nth-child(4) img{object-position:50% center}
.back-to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid #b5d8bd55;border-radius:999px;background:#22352bf2;color:#d7f2dc;box-shadow:0 8px 30px #0004;font-size:12px;font-weight:650;backdrop-filter:blur(10px)}
.back-to-top[hidden]{display:none}
.button,.icon-button,.billing-switch button,.back-to-top{transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.text-link,.desktop-nav a,.brand{transition:color .2s ease,transform .2s ease}
.button>span,.text-link>span,.detail-sign{display:inline-block;transition:transform .2s ease}
.comparison summary{transition:color .2s ease,padding-inline .2s ease}
.desktop-nav a{position:relative;padding-block:12px}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
[data-reveal].will-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
[data-reveal].will-reveal.is-revealed{opacity:1;transform:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
/* Back-to-top moves focus to this non-interactive heading. */
#hero-title:focus{outline:none}
@media(hover:hover) and (pointer:fine){
  .button:hover,.icon-button:hover,.billing-switch button:hover{transform:translateY(-3px);box-shadow:0 8px 22px #0002}
  .button:hover>span,.text-link:hover>span{transform:translateX(4px)}
  .text-link:hover{transform:translateX(2px)}
  .brand:hover{transform:translateY(-2px)}
  .desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)}
  .comparison summary:hover{color:var(--mint);padding-left:6px}
  .back-to-top:hover{transform:translateY(-4px);background:#304b3a}
}
.button:active,.icon-button:active,.billing-switch button:active,.back-to-top:active{transform:scale(.98)}
@media(max-width:1150px){.hero{gap:28px}.hero h1{font-size:64px}.hero-stage{padding-inline:8px}.preview-intro h2{font-size:21px}.hero-stage .phone,.hero-stage:hover .phone{width:min(294px,calc(100% - 14px));--radius:45px}.hero-actions .button{font-size:12px}.app-entry{grid-template-columns:minmax(0,1fr) 38px}}
@media(max-width:800px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.hero h1{font-size:53px;letter-spacing:-2.8px}.preview-intro h2{font-size:19px}.preview-intro p{font-size:11px}.hero-stage{gap:22px;padding-inline:4px}.hero-stage .phone,.hero-stage:hover .phone{--radius:40px;width:min(280px,calc(100% - 14px))}.hero-actions .button{font-size:11px;padding-inline:14px;gap:10px}.preview-controls .button{font-size:11px;padding-inline:16px}.preview-note{font-size:9px}.app-entry{grid-template-columns:minmax(0,1fr) 34px}}
@media(max-width:650px){.hero{display:flex;gap:38px;padding-top:24px;padding-bottom:48px}.hero h1{font-size:clamp(53px,12.8vw,78px)}.hero-stage{padding:0;gap:23px;scroll-margin-top:24px}.hero-stage .phone,.hero-stage:hover .phone{--radius:48px;width:min(326px,calc(100% - 24px));transform:rotateX(2deg) rotateY(-7deg) rotateZ(-2deg)}.preview-intro h2{font-size:22px}.preview-intro p{font-size:12px}.preview-live{font-size:10px}.preview-controls .button{font-size:12px}.preview-note{font-size:10px}.hero .hero-actions{gap:12px 20px}.hero-actions .button{font-size:12px}.steps article{display:block}.steps h3{margin-bottom:9px}.app-entry{grid-template-columns:minmax(0,1fr) 34px;gap:18px}.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));min-height:46px;padding:10px 14px;font-size:11px}.sport-card-top{font-size:8px}.footer{padding-bottom:80px}}
@media(min-width:651px){.hero{padding-top:12px;padding-bottom:32px}.hero-stage{gap:14px;padding-top:0}.preview-intro h2,.preview-intro p{display:none}.hero-stage .phone,.hero-stage:hover .phone{width:min(320px,max(218px,calc((100svh - 292px)*.4613 + 20px)));--radius:40px}.preview-controls .text-link{display:none}.preview-controls [data-reset-demo]{display:inline-flex;min-height:34px;font-size:10px}.preview-note{margin-top:0;font-size:9px}.hero-note{max-width:350px}.hero-stage::before{inset:40px 0 40px}}
@media(prefers-reduced-motion:reduce){[data-reveal].will-reveal{opacity:1;transform:none}.hero-stage .phone,.hero-stage:hover .phone{transform:none}.button:hover,.icon-button:hover,.text-link:hover,.back-to-top:hover,.brand:hover,.billing-switch button:hover{transform:none}.button:hover>span,.text-link:hover>span{transform:none}}

.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:12px 24px;flex-wrap:wrap}
.footer-links .text-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
@media(max-width:600px){.footer-links{justify-content:flex-start;width:100%}}

/* Gentle depth and light, with a stable display as soon as it is used. */
.hero-stage::before{background:radial-gradient(ellipse,#83c7af28,transparent 68%);transform:translate(var(--halo-x,0px),var(--halo-y,0px));transition:transform .7s ease;will-change:transform}
[data-reveal].will-reveal{transition-delay:var(--reveal-delay,0ms)}
.button{position:relative;isolation:isolate;overflow:hidden}
.button::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(150px circle at var(--pointer-x,50%) var(--pointer-y,50%),#ffffff24,transparent 75%);opacity:0;transition:opacity .25s ease}
.button.pointer-active::before{opacity:1}
.sport-card img{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.sport-card-copy{transition:transform .4s ease}
.app-entry .entry-symbol{transition:transform .35s ease,color .35s ease}
@media(hover:hover) and (pointer:fine) and (min-width:651px){
  .hero-stage.motion-ready:not(.is-testing) .phone{transform:translateY(var(--phone-lift,0px)) rotateX(calc(3deg + var(--phone-x,0deg))) rotateY(calc(-10deg + var(--phone-y,0deg))) rotateZ(calc(-3deg + var(--phone-roll,0deg)));transition:none;will-change:transform}
}
@media(hover:hover) and (pointer:fine){
  .sport-card:hover img{transform:translate(var(--image-x,0px),var(--image-y,0px)) scale(1.055)}
  .sport-card:hover .sport-card-copy{transform:translateY(-5px)}
  .app-entry:hover .entry-symbol{transform:translateY(-3px) rotate(-5deg);color:var(--mint)}
  .button:hover{box-shadow:0 8px 28px #83c7af18,0 6px 18px #0003}
}
@media(hover:none){.button:active{background-image:linear-gradient(#ffffff0d,#ffffff0d)}}
@media(prefers-reduced-motion:reduce){
  .hero-stage::before,.hero-stage.motion-ready .phone,.sport-card:hover img,.sport-card:hover .sport-card-copy,.app-entry:hover .entry-symbol{transform:none!important;will-change:auto}
  .button::before{display:none}
  [data-reveal].will-reveal{transition-delay:0ms}
}

/* A clear invitation before the phone becomes interactive. */
.hero-stage:not(.is-testing) .live-app{filter:blur(1.5px);opacity:.72}
.hero-stage.is-testing .live-app{filter:none;opacity:1}
.phone-demo-start{align-items:center;padding:20px 12px;background:#10181118}
.phone-demo-start>span{flex-direction:column;gap:7px;padding:18px 16px;border-radius:20px;white-space:normal;text-align:center;max-width:100%}
.phone-demo-start strong{font-size:14px;line-height:1.3}
.phone-demo-start>span>span{font-size:11px;font-weight:550;opacity:.8}

/* Render the enlarged screen at its actual size, without scaling a small preview. */
.demo-dialog{width:min(880px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:16px 64px 16px 20px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:auto;overscroll-behavior:contain}
.demo-dialog[open]{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:44px;align-items:center}
.demo-dialog::backdrop{background:#080d0bf0;backdrop-filter:blur(16px)}
.demo-close{position:absolute;right:0;top:0;font-size:27px;line-height:1;display:grid;place-items:center;padding:0;border-radius:50%;z-index:5}
.demo-dialog-copy{min-width:0}
.demo-dialog h2{font-size:clamp(28px,3vw,40px);line-height:1.18;letter-spacing:-1.4px;margin:20px 0}
.demo-dialog h2 span{color:var(--mint)}
.demo-dialog .dialog-note{font-size:14px;line-height:1.75;margin:0 0 18px;max-width:290px}
.demo-data-note{font-size:11px;line-height:1.7;color:var(--muted);max-width:260px}
.demo-dialog-actions{flex-direction:column;align-items:flex-start;gap:6px;margin-top:28px}
.demo-dialog-actions .button{min-height:44px;font-size:12px;padding:12px 18px}
.demo-dialog-actions .text-link{min-height:44px;display:inline-flex;align-items:center;font-size:11px}
.demo-dialog .demo-phone{--radius:46px;width:min(413px,calc((100dvh - 84px)*.4613 + 20px));transform:none;transform-style:flat;transition:none;box-shadow:inset 0 0 0 1px #fff6,0 20px 60px #0008;margin:0 auto}
.demo-dialog .demo-phone{transform-origin:center}
.demo-dialog[data-motion]{overflow:visible}
.demo-dialog[data-motion] .demo-phone{pointer-events:none;will-change:transform,opacity}
.demo-dialog[data-motion="opening"]::backdrop{animation:demo-backdrop-in .38s ease-out both}
.demo-dialog[data-motion="closing"]::backdrop{animation:demo-backdrop-out .28s ease-in both}
@keyframes demo-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes demo-backdrop-out{from{opacity:1}to{opacity:0}}
.demo-phone .phone-depth{transform:none;inset:1px -3px 1px 3px;z-index:-1}
.demo-phone .phone-bezel{transform:none}
.demo-phone .phone-display{background:#10130f}
.demo-dialog #demo-frame{position:absolute;inset:34px 0 12px;display:block;width:100%;height:calc(100% - 46px);min-height:0;max-height:none;border:0;border-radius:0;transform:none;filter:none;opacity:1;background:#10130f}
.demo-phone .dynamic-island{width:92px;height:24px;top:6px;pointer-events:none}
.demo-phone .phone-home{height:4px;bottom:4px;pointer-events:none}
@media(max-width:820px){
  .demo-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 16px);padding:10px 6px 20px}
  .demo-dialog[open]{grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center}
  .demo-dialog-copy{width:100%;padding:4px 48px 0 8px}
  .demo-close{position:fixed;top:16px;right:20px}
  .demo-dialog .preview-live{font-size:9px;letter-spacing:1px}
  .demo-dialog h2{font-size:20px;letter-spacing:-.6px;margin:8px 0 0}
  .demo-dialog h2 br{display:none}
  .demo-dialog h2 span::before{content:' '}
  .demo-data-note{display:none}
  .demo-dialog-actions{flex-direction:row;align-items:center;gap:6px 16px;margin-top:4px}
  .demo-dialog-actions .button{font-size:11px;padding:8px 0;border:0;background:transparent;color:var(--mint)}
  .demo-dialog-actions .text-link{display:none}
  .demo-dialog .demo-phone{width:min(393px,calc(100% - 16px),max(280px,calc((100dvh - 210px)*.4613 + 20px)));--radius:46px}
}
@media(min-width:821px) and (max-height:520px){
  .demo-dialog .demo-phone{width:280px}
  .demo-dialog[open]{align-items:start}
  .demo-dialog-copy{padding-top:36px}
}
/* Small responses on controls, without any looping attention effects. */
.creator-layouts label{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .creator-layouts label:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0002}
 .demo-close:hover{transform:rotate(6deg)}
}
@media(prefers-reduced-motion:reduce){
 .demo-dialog::backdrop{animation:none!important}
 .creator-layouts label{transition:none}
}