/* SportOS 3.12.0 — forms as a journey (pages outside index.php: sign-ups, contact, updates). Theme tokens only. */
.is-flow{--hot:var(--accent,#F28C28);--hot-text:color-mix(in srgb,var(--hot) 62%,var(--text));--ink:var(--secondary,#0B1530);--ease:cubic-bezier(.2,.8,.2,1)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:56px 20px 64px}
.fx-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 140% at 100% 0%,color-mix(in srgb,var(--hot) 45%,transparent),transparent 60%),radial-gradient(60% 120% at 0% 100%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 60%)}
.fx-hero .in{position:relative;max-width:860px;margin:0 auto}
.fx-hero h1{font:800 clamp(36px,6vw,64px)/.95 var(--font-display);text-transform:uppercase;color:#fff;margin-top:12px;animation:fxUp .8s var(--ease) both}
.fx-hero p{color:rgba(255,255,255,.88);font-size:17px;margin-top:12px;max-width:60ch;animation:fxUp .8s .1s var(--ease) both}
.fx-kick{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:8px 13px;border-radius:999px}
.fx-kick::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--hot)}
.fx-crumb{font-size:14px;margin-bottom:6px}.fx-crumb a{color:#fff;opacity:.85}
main.fx{max-width:860px;margin:-36px auto 0;padding:0 16px 64px;position:relative;z-index:2}
.fx-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.fx-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.fx-facts span{background:var(--surface2);border-radius:999px;padding:7px 12px;font-size:13px}.fx-facts b{color:var(--text)}

/* The choices on the forms page */
.fx-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.fx-opt{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 20px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;animation:fxUp .7s var(--ease) both;animation-delay:calc(var(--i,0) * .05s)}
.fx-opt::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--hot) 16%,transparent);transition:transform .5s var(--ease)}
.fx-opt:hover{transform:translateY(-5px);border-color:var(--hot);box-shadow:0 24px 40px -26px rgba(0,0,0,.5)}
.fx-opt:hover::after{transform:scale(1.8)}
.fx-opt .ic{width:46px;height:46px;border-radius:14px;background:var(--ink);color:var(--hot);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)}
.fx-opt:hover .ic{transform:rotate(-8deg) scale(1.08)}
.fx-opt .ic svg{width:24px;height:24px}
.fx-opt small{font:800 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hot-text);margin-top:6px}
.fx-opt b{font:800 21px/1.1 var(--font-display);text-transform:uppercase;position:relative}
.fx-opt span{color:var(--text2);font-size:14px;position:relative}
.fx-group{font:800 13px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin:30px 0 12px}
.fx-group:first-child{margin-top:0}

/* Steps */
form.flowing .flow-step{border:0;padding:0;margin:0;min-width:0}
form.flowing .flow-step[hidden]{display:none}
.flow-step.in-right{animation:fxRight .45s var(--ease)}.flow-step.in-left{animation:fxLeft .45s var(--ease)}
.flow-bar{margin:-4px 0 22px;scroll-margin-top:96px}
.flow-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--text2);margin-bottom:8px}
.flow-count{font-weight:800;color:var(--text);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.flow-cheer{color:var(--hot-text);font-weight:700;animation:fxUp .5s var(--ease)}
.flow-track{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.flow-track i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--hot));transition:width .6s var(--ease)}
.flow-dots{list-style:none;display:flex;gap:6px;margin:14px 0 0;padding:0;overflow-x:auto;scrollbar-width:none}
.flow-dots li{display:flex;align-items:center;gap:7px;padding:6px 11px 6px 6px;border-radius:999px;background:var(--surface2);font-size:12px;color:var(--text2);white-space:nowrap;transition:background .3s,color .3s}
.flow-dots li span{width:22px;height:22px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;transition:background .3s,color .3s}
.flow-dots li.on{background:var(--ink);color:#fff}.flow-dots li.on span{background:var(--hot);color:#000}
.flow-dots li.done span{background:#2fa36b;color:#fff}.flow-dots li.done span{font-size:0}.flow-dots li.done span::before{content:'✓';font-size:12px}
.flow-nav{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.flow-nav .send{flex:1;margin:0}
.flow-back,.flow-next{min-height:52px;border-radius:14px;padding:0 22px;font:800 15px var(--font-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.flow-back{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.flow-next{flex:1;background:var(--ink);color:#fff;border:0}
.flow-next::after{content:' →'}
.flow-back:hover,.flow-next:hover{transform:translateY(-2px)}
.send{width:100%;margin-top:10px;background:var(--hot);color:#0b0b0b;border:0;border-radius:14px;padding:15px;font:800 16px var(--font-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-height:52px;box-shadow:0 14px 30px -16px var(--hot);transition:transform .2s var(--ease)}
.send:hover{transform:translateY(-2px)}
.send.busy{opacity:.7;pointer-events:none}
.fq.nudge input,.fq.nudge select,.fq.nudge textarea,.fq.nudge .opt{border-color:var(--hot)!important;animation:fxShake .4s}
.fq.nudge::after{content:'This one is needed.';display:block;color:var(--hot-text);font-size:13px;font-weight:700;margin-top:6px}

/* Choices as tiles */
.is-flow .fq fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.is-flow .fq fieldset>legend,.is-flow .fq fieldset>.fhelp{grid-column:1/-1}
.is-flow .fq .opt{margin:0;border-radius:14px;padding:12px 14px;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.is-flow .fq .opt:hover{transform:translateY(-2px);border-color:var(--hot)}
.is-flow .fq .opt:has(input:checked){border-color:var(--hot);background:color-mix(in srgb,var(--hot) 12%,var(--surface));font-weight:700}
.is-flow .fq .opt.other{grid-column:1/-1}
.is-flow .fq input[type=text],.is-flow .fq input[type=email],.is-flow .fq input[type=tel],.is-flow .fq input[type=number],.is-flow .fq input[type=date],.is-flow .fq select,.is-flow .fq textarea{border-radius:14px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.is-flow .fq input:focus,.is-flow .fq select:focus,.is-flow .fq textarea:focus{outline:0;border-color:var(--hot);box-shadow:0 0 0 4px color-mix(in srgb,var(--hot) 22%,transparent)}
.is-flow .fq input[type=file]{width:100%;padding:16px;border:2px dashed var(--border);border-radius:14px;background:var(--surface2)}

/* Done */
.fx-done{text-align:center;padding:12px 0}
.fx-tick{width:96px;height:96px;margin:0 auto 18px}
.fx-tick circle{stroke:#2fa36b;stroke-width:4;fill:none;stroke-dasharray:290;stroke-dashoffset:290;animation:fxDraw .8s var(--ease) forwards}
.fx-tick path{stroke:#2fa36b;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:fxDraw .5s .6s var(--ease) forwards}
.fx-done h2{font:800 34px var(--font-display);text-transform:uppercase}
.fx-ref{display:inline-block;font:800 30px var(--font-mono,monospace);letter-spacing:.08em;background:var(--surface2);border-radius:14px;padding:10px 18px;margin:12px 0}
canvas.confetti{position:fixed;inset:0;z-index:300;pointer-events:none}

.fx-msg{border-radius:14px;padding:14px 16px;margin:0 0 16px;font-size:15px}
.fx-msg.warn{background:color-mix(in srgb,#E4572E 12%,transparent);border:1px solid color-mix(in srgb,#E4572E 40%,transparent)}
.fx-msg.ok{background:color-mix(in srgb,#2fa36b 14%,transparent);border:1px solid color-mix(in srgb,#2fa36b 40%,transparent)}
.fx-phones{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:16px}
.fx-phone{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--surface2);text-decoration:none;color:var(--text)}
.fx-phone svg{width:22px;height:22px;color:var(--hot-text)}.fx-phone b{display:block}.fx-phone small{color:var(--text2)}

@keyframes fxUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fxRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes fxLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes fxShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@media(max-width:560px){.fx-card{padding:18px;border-radius:18px}.fx-hero{padding:40px 16px 56px}.flow-nav{position:sticky;bottom:0;background:var(--surface);padding:10px 0;margin:10px -18px -18px;padding:12px 18px;border-top:1px solid var(--border);border-radius:0 0 18px 18px}}
@media (prefers-reduced-motion:reduce){.is-flow *{animation:none!important;transition:none!important}.fx-tick circle,.fx-tick path{stroke-dashoffset:0}}