/* Homepage brand applied to authentication. Native CSS, no animation library.
   Preserve: variance 6, motion 5, density 3. The form itself never tilts or travels. */
.marketing-auth{--bg:#12372b;--ink:#18372b;--mu:#c4d5ca;--muted:#52685b;--surface:#f7f9f7;--line:#cbd7cf;--court:#173d31;--on-court:#f7f9f7;--danger:#a32932;background:#12372b;color:#d0dfd5;min-height:100dvh;isolation:isolate}
.marketing-auth::before{content:"";position:absolute;inset:0 0 auto;height:850px;max-height:100dvh;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 30%,#dce87512,transparent 65%)}
.marketing-auth [hidden]{display:none!important}
.marketing-auth .nav{background:rgba(14,43,32,.82)}
.marketing-auth .nav .pop{background:#173d31}
.marketing-auth .links a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;min-height:calc(100dvh - 140px);padding-top:132px;padding-bottom:56px}
.auth-intro{min-width:0}
.auth-intro h1{font-size:clamp(48px,5.6vw,76px);line-height:1.05;letter-spacing:-.045em;text-wrap:initial}
.auth-title-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.auth-title-line>span{display:block;animation:auth-title .85s cubic-bezier(.16,1,.3,1) both}
.auth-title-line:nth-child(2)>span{animation-delay:.09s}
.auth-description{max-width:31em;font-size:19px;line-height:1.65;margin-top:24px;animation:auth-copy .8s .15s cubic-bezier(.16,1,.3,1) both}
.auth-photo{position:relative;width:100%;max-width:430px;height:205px;overflow:hidden;border-radius:24px;margin-top:32px;animation:auth-photo-reveal 1.1s .12s cubic-bezier(.16,1,.3,1) both;background:#244236}
.auth-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;animation:auth-photo-settle 1.5s .12s cubic-bezier(.16,1,.3,1) both}
.auth-next{animation:auth-copy .8s .25s cubic-bezier(.16,1,.3,1) both}
.auth-next:empty{display:none}
.auth-steps{list-style:none;counter-reset:auth-steps;padding:0;margin:32px 0 24px;display:grid;gap:18px;max-width:30em}
.auth-steps li{counter-increment:auth-steps;display:flex;gap:14px;align-items:center;font-size:15px;line-height:1.5;color:#ecf3ee}
.auth-steps li::before{content:counter(auth-steps);display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid #7f9b8d;border-radius:50%;font-size:12px;color:#dce875}
.auth-trial{font-size:14px;line-height:1.7;max-width:30em;color:#c4d5ca}
.auth-card-wrap{min-width:0;width:100%;max-width:500px;justify-self:end}
.auth-frame{padding:8px;border-radius:32px;background:rgba(231,243,219,.09);box-shadow:inset 0 1px 1px #ffffff7a,0 24px 64px -24px #071b1566}
.auth-frame::after{animation:auth-edge 1.2s ease-out both}
.auth-frame::before{display:none}
.auth-card{position:relative;z-index:1;border-radius:24px;padding:36px;background:var(--surface);color:var(--ink);min-width:0}
.auth-card>h2{font-size:26px;line-height:1.3;letter-spacing:-.03em;margin-bottom:16px}
.auth-card>p{font-size:15px;line-height:1.7;color:var(--muted)}
.auth-card>form{margin-top:24px}.auth-card>form .btn{width:100%;font-size:15px;gap:12px}
.auth-slot{display:grid;align-items:start;min-height:310px}
.auth-signup .auth-slot{min-height:390px}
#clerk-auth,#clerk-loading{grid-area:1/1;min-width:0}
.marketing-auth #clerk-auth[data-state=ready]{animation:auth-form-ready .35s ease-out both}
.marketing-auth #clerk-auth[data-state=error]:empty{display:none}
.auth-loading{position:relative;color:var(--ink)}
.auth-skeleton{display:grid;gap:10px;opacity:.7}
.auth-skeleton>span{display:block;border-radius:8px;background:#dce5df;overflow:hidden;position:relative}
.auth-skeleton>span::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffffb3,transparent);animation:auth-shimmer 1.6s ease-in-out infinite}
.skeleton-heading{height:28px;width:75%;margin:2px 0 4px}.skeleton-description{height:13px;width:90%;margin-bottom:20px}.skeleton-label{height:10px;width:28%;margin-top:8px}.skeleton-input{height:52px!important;border:1px solid #cbd7cf;background:transparent!important;border-radius:14px!important}.skeleton-button{height:50px;margin-top:14px;border-radius:26px!important;background:#dde6c1!important}
.auth-loading-copy{margin-top:22px;position:relative}
#clerk-message{font-size:14px;font-weight:650;line-height:1.5;margin:0}
#clerk-loading-detail{font-size:12px;line-height:1.6;color:var(--muted);margin-top:5px}
.auth-rally{position:relative;width:88px;height:14px;margin-bottom:12px;border-left:2px solid #648672;border-right:2px solid #648672}
.auth-rally>i{position:absolute;left:50%;height:100%;border-left:1px dashed #a5b8aa}
.auth-rally>span{position:absolute;left:4px;top:3px;width:8px;height:8px;background:#5b7430;border-radius:50%;animation:auth-rally 1.5s cubic-bezier(.4,0,.6,1) infinite alternate}
.auth-loading-error .auth-skeleton,.auth-loading-error .auth-rally{display:none}
.auth-loading-error .auth-loading-copy{margin:0;padding:18px;border:1px solid #e1b7b6;background:#fff2ef;border-radius:16px}
.auth-loading-error #clerk-message{color:#86262b}
#clerk-retry{font-size:14px;margin-top:16px;min-height:44px}
.auth-legal{display:flex;justify-content:center;gap:14px;color:#c4d5ca;font-size:12px;margin-top:14px}
.auth-legal a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:#6e8c7c;text-underline-offset:4px}
.auth-legal span{display:flex;align-items:center;color:#8eab99}
.auth-text-link{display:inline-flex;gap:10px;align-items:center;min-height:44px;margin-top:20px;font-size:14px;font-weight:650;text-underline-offset:4px}
.auth-notice{font-size:14px;border:1px solid #b4c8ba;border-radius:12px;padding:14px;margin-bottom:20px;background:#e9f0e7}
.auth-player-note{display:flex;align-items:baseline;gap:16px;padding-bottom:30px;font-size:13px;line-height:1.7;color:#c4d5ca}
.auth-player-note strong{color:#ecf3ee;flex:none;font-weight:600}
.marketing-auth footer{border-color:#41604f;color:#c4d5ca;padding-top:24px;padding-bottom:32px;font-size:12px}
.marketing-auth footer a{text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
/* Clerk owns every authentication step; use its stable public styling hooks. */
.marketing-auth #clerk-auth,.marketing-auth .cl-rootBox,.marketing-auth .cl-cardBox{width:100%;min-width:0;max-width:100%}
.marketing-auth .cl-cardBox,.marketing-auth .cl-card{box-shadow:none;border:0;background:var(--surface);border-radius:0;min-width:0;max-width:100%}
/* Clerk offsets its card by -1px for its own border. Our borderless card must
   stay inside its wrapper, and keyboard focus rings need room to paint. */
.marketing-auth .cl-cardBox{overflow:visible}
.marketing-auth .cl-card{margin:0;padding:0;gap:28px}
.marketing-auth .cl-header{align-items:flex-start;text-align:left;gap:10px}
.marketing-auth .cl-headerTitle{font-size:26px;line-height:1.25;letter-spacing:-.035em;margin:0;text-align:left;color:var(--ink);text-wrap:balance}
.marketing-auth .cl-headerSubtitle{font-size:14px;line-height:1.65;color:var(--muted);text-align:left}
.marketing-auth .cl-form{gap:22px}.marketing-auth .cl-formField{gap:9px}
.marketing-auth .cl-formFieldLabel{font-size:13px;font-weight:650;line-height:1.5;color:var(--ink)}
.marketing-auth .cl-formFieldInput{appearance:none;-webkit-appearance:none;background:#fff;color:var(--ink);border:1px solid #758e7d;border-radius:14px;height:52px;min-height:52px;max-height:none;font-size:16px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.marketing-auth .cl-formFieldInput::placeholder{color:#647a6b}
.marketing-auth .cl-formFieldInput:focus{border-color:#245646;outline:2px solid #245646;outline-offset:3px;box-shadow:none}
.marketing-auth .cl-formFieldInputShowPasswordButton{width:46px;min-width:44px;min-height:46px;border-radius:12px;color:#365743}
.marketing-auth .cl-formButtonPrimary{min-height:50px;border:0;border-radius:999px;background:#dce875;color:#173d31;font:700 15px Manrope,sans-serif;box-shadow:none;transition:background .2s,box-shadow .2s}
.marketing-auth .cl-formButtonPrimary:hover{background:#d1e064;box-shadow:0 4px 12px -6px #46613244}
.marketing-auth .cl-formButtonPrimary:active{background:#c4d35c}
.marketing-auth .cl-formButtonPrimary:focus-visible{outline:3px solid #245646;outline-offset:3px}
.marketing-auth .cl-socialButtonsBlockButton{min-height:48px;border-radius:14px;background:transparent;color:var(--ink);border:1px solid #758e7d}
.marketing-auth .cl-footer{background:transparent;background-image:none;border-radius:0;padding:20px 0 0;gap:12px}
.marketing-auth .cl-footerAction{width:100%;align-items:center;justify-content:flex-start;padding:0;flex-wrap:wrap;gap:5px}
.marketing-auth .cl-footerActionText{color:var(--muted);font-size:13px}.marketing-auth .cl-footerActionLink{color:#245646;font-size:13px;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
.marketing-auth .cl-identityPreview{max-width:100%;overflow-wrap:anywhere}
.marketing-auth .cl-otpCodeFieldInput{min-width:0;max-width:100%;font-size:22px;border-radius:10px;border:1px solid #758e7d;background:#fff;color:var(--ink)}
.marketing-auth .cl-formFieldErrorText,.marketing-auth .cl-alertText{font-size:13px;line-height:1.6}
.marketing-auth .cl-formResendCodeLink{min-height:44px}
.marketing-auth .cl-formFieldAction,.marketing-auth .cl-identityPreviewEditButton{color:#245646}
@keyframes auth-title{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes auth-copy{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes auth-photo-reveal{from{clip-path:inset(0 100% 0 0 round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes auth-photo-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes auth-edge{from{opacity:.15}to{opacity:1}}
@keyframes auth-form-ready{from{opacity:.35}to{opacity:1}}
@keyframes auth-shimmer{to{transform:translateX(100%)}}
@keyframes auth-rally{to{transform:translateX(68px)}}
@media(max-width:1099px){.auth-layout{gap:40px}.auth-card{padding:28px}.auth-intro h1{font-size:64px}}
@media(max-width:859px){
 .auth-layout{grid-template-columns:minmax(0,1fr);max-width:580px;gap:24px;min-height:0;padding-top:112px;padding-bottom:28px}
 .auth-intro{display:contents}.auth-intro h1{order:1;font-size:clamp(36px,8vw,48px)}
 .auth-title-line,.auth-title-line>span{display:inline-block;vertical-align:bottom}.auth-title-line{margin-right:.12em}
 .auth-description{order:2;font-size:17px;line-height:1.6;margin-top:-10px}
 .auth-card-wrap{order:3;max-width:none}.auth-next{order:4}.auth-photo{display:none}
 .auth-steps{margin:8px 0 20px;gap:14px}.auth-steps li{font-size:14px}
 .auth-frame{border-radius:30px}.auth-card{border-radius:22px;padding:28px}
 .auth-player-note{max-width:580px;display:block}.auth-player-note strong{display:block;margin-bottom:4px}
 .marketing-auth footer{max-width:580px}.marketing-auth .pop a{display:flex}
}
@media(max-width:399px){
 .auth-layout{padding-inline:16px;gap:20px}.auth-intro h1{font-size:36px}.auth-description{font-size:16px}
 .auth-frame{padding:6px;border-radius:26px}.auth-card{padding:24px 20px;border-radius:20px}
 .marketing-auth .cl-headerTitle{font-size:24px}.marketing-auth .cl-headerSubtitle{font-size:13px}
 .marketing-auth .cl-card{gap:24px}.auth-player-note{padding-inline:20px}
}
@media(prefers-reduced-motion:reduce){.marketing-auth *, .marketing-auth *::before,.marketing-auth *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.auth-photo{clip-path:none}.auth-photo img,.auth-title-line>span{transform:none}.auth-rally>span{transform:translateX(34px)}}
@media(prefers-reduced-transparency:reduce){.marketing-auth .nav,.auth-frame{background:#1b4538;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(hover:none),(pointer:coarse){.marketing-auth button,.marketing-auth summary{touch-action:manipulation}.marketing-auth .btn:hover{transform:none}}
.marketing-auth.auth-away .auth-skeleton>span::after,.marketing-auth.auth-away .auth-rally>span{animation-play-state:paused}
/* A campaign offer keeps its eligibility and price copy, without creating another card. */
.marketing-auth .p-offer-note{margin-top:26px;padding-top:22px;border-top:1px solid #6b8978;color:#d0dfd5}
.marketing-auth .p-offer-caption{font-size:12px;color:#c4d5ca;margin-bottom:8px}
.marketing-auth .p-offer-title{font-size:23px;font-weight:650;line-height:1.3;letter-spacing:-.025em;color:#dce875;margin-bottom:12px}
.marketing-auth .p-offer-note>p{font-size:14px;line-height:1.7}.marketing-auth .p-offer-note>.p-offer-title{font-size:23px}
.marketing-auth .p-offer-note .p-offer-terms{font-size:12px;margin-top:12px}
/* Successful sign-in remains visible while the next document loads. */
.auth-slot{position:relative}
.auth-progress{position:relative;grid-area:1/1;align-self:stretch;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;background:var(--surface);border-radius:8px;padding:12px 0}
.auth-progress-confirmation{font-size:13px;font-weight:700;color:#3e684e;margin-bottom:12px}
.auth-progress h2{font-size:clamp(23px,3vw,28px);line-height:1.25;letter-spacing:-.035em;margin:0 0 12px}
#auth-progress-detail{font-size:14px;line-height:1.65;color:var(--muted);margin:0;max-width:30em}
#auth-progress-status:focus{outline:none}
#auth-progress-retry{font-size:14px;min-height:46px;flex-shrink:0}
.auth-progress-court{position:relative;width:148px;height:80px;border:1px solid #8ba394;border-radius:3px;background:#e9efe9;overflow:hidden}
.auth-progress-court::before{content:"";position:absolute;inset:10px 0;border-block:1px solid #aabdb0}
.auth-progress-court::after{content:"";position:absolute;inset:0 50% 0 auto;border-left:1px dashed #658471}
.auth-progress-court i{position:absolute;inset:10px 28px;border-inline:1px solid #aabdb0;background:linear-gradient(#aabdb0,#aabdb0) center/100% 1px no-repeat}
.auth-progress-court span{position:absolute;left:10px;top:14px;width:9px;height:9px;border-radius:50%;background:#557526;box-shadow:0 2px 4px #173d3126;animation:auth-progress-rally 2.4s ease-in-out infinite}
@keyframes auth-progress-rally{0%,100%{transform:translate(0,0)}25%{transform:translate(114px,40px)}50%{transform:translate(0,40px)}75%{transform:translate(114px,0)}}
.auth-progress[data-state=error] .auth-progress-court{display:none}
.marketing-auth.auth-away .auth-progress-court span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.auth-progress-court span{animation:none;transform:translate(56px,22px)}}