body.intro{overflow:hidden}
/* intro splash (also unlocks sound) */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 50% 20%,#1B3E7E 0%,#0E2A5C 45%,#071631 100%);transition:opacity .7s ease,transform .7s var(--ease),visibility .7s}
#splash.out{opacity:0;transform:scale(1.08);visibility:hidden;pointer-events:none}
.sp-in{display:flex;flex-direction:column;align-items:center;padding:24px;position:relative;z-index:2}
.sp-stage{position:relative;width:240px;margin-bottom:6px}
.sp-emb{display:block;width:240px;height:240px;overflow:visible;opacity:0;transform-origin:50% 55%;animation:spZoom 1s cubic-bezier(.16,.9,.3,1) .15s forwards,spGlow 2.6s 1.2s ease-in-out infinite}
.sp-emb .shield{fill:rgba(14,42,92,.55);stroke:url(#spg);stroke-width:5;stroke-linejoin:round}
.sp-emb .chev{fill:none;stroke:url(#spg);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:spDraw .6s cubic-bezier(.6,0,.2,1) forwards}
.sp-emb .c1{animation-delay:1.05s}.sp-emb .c2{animation-delay:1.25s}.sp-emb .c3{animation-delay:1.45s}
.sp-gloss{animation:spGloss 1.2s 1.7s ease-in-out both}
.sp-shadow{position:absolute;left:50%;bottom:-18px;width:190px;height:24px;margin-left:-95px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(5px);opacity:0;transform:scale(.3);animation:spShadow .5s 1.05s ease-out forwards}
.sp-ring{position:absolute;left:50%;top:48%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:2px solid var(--brass-hi);opacity:0;animation:spRing .9s 1.1s ease-out forwards;z-index:1}
.sp-title{margin-top:34px;font:800 clamp(38px,7vw,76px)/1.02 var(--sans);font-variation-settings:"wdth" 78;letter-spacing:-.005em;opacity:0;animation:sUp .7s 1.55s var(--ease) forwards}
.sp-sub{margin:8px 0 0;color:var(--brass-hi);font:700 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:sUp .7s 1.7s var(--ease) forwards}
.sp-by{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:6px}
.sp-created{color:#9FB2D8;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:sUp .6s 2s var(--ease) forwards}
.sp-name{display:flex;justify-content:center;font:800 clamp(18px,2.8vw,28px)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sp-name i{font-style:normal;display:inline-block;opacity:0;background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 55%,var(--brass-lo) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:spLetter .7s calc(2.3s + var(--i)*.11s) linear forwards;transform-origin:50% 50%}
.sp-name i.sp{width:.35em}
.sp-btn{margin-top:34px;padding:0 44px;min-height:50px;border-radius:14px;border:0;background:linear-gradient(160deg,var(--brass-hi),var(--brass) 55%,var(--brass-lo));color:#1C1405;font:800 15px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:0;animation:sUp .7s 2.6s var(--ease) forwards,btnGlow 2.6s 3.3s ease-in-out infinite;transition:transform .3s var(--spring);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.sp-btn:hover{transform:scale(1.06)}.sp-btn:active{transform:scale(.97)}
.sp-hint{margin:14px 0 0;color:#9FB2D8;font-size:12px;opacity:0;animation:sUp .7s 2.8s var(--ease) forwards}
@keyframes spZoom{0%{opacity:0;transform:scale(9) rotate(-8deg);filter:blur(14px)}45%{opacity:1;filter:blur(0)}72%{transform:scale(.92) rotate(0)}86%{transform:scale(1.04)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes spGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(241,216,140,.3))}50%{filter:drop-shadow(0 0 26px rgba(241,216,140,.85)) drop-shadow(0 0 60px rgba(241,216,140,.3))}}
@keyframes spDraw{to{stroke-dashoffset:0}}
@keyframes spGloss{from{transform:translateX(0)}to{transform:translateX(230px)}}
@keyframes spShadow{to{opacity:1;transform:scale(1)}}
@keyframes spRing{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(4.2)}}
@keyframes spLetter{0%{opacity:0;transform:scale(11);filter:blur(16px);animation-timing-function:cubic-bezier(.7,0,.9,.4)}40%{opacity:1;transform:scale(.97);filter:blur(0) drop-shadow(0 0 26px #fff1b8);animation-timing-function:ease-out}62%{transform:scale(1.025)}80%{transform:scale(.995)}100%{opacity:1;transform:none;filter:drop-shadow(0 0 6px rgba(201,162,74,.45))}}
#splash.shake .sp-in{animation:spShake .22s linear}
@keyframes spShake{20%{transform:translate(-4px,5px)}45%{transform:translate(4px,-3px)}70%{transform:translate(-2px,2px)}}
@keyframes sUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes btnGlow{50%{box-shadow:0 0 34px rgba(241,216,140,.55)}}
body.intro .gbar *{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){#splash .sp-emb,.sp-title,.sp-sub,.sp-created,.sp-name i,.sp-btn,.sp-hint,.sp-shadow{opacity:1;transform:none}.sp-emb .chev{stroke-dashoffset:0}.sp-ring{display:none}}

@media(max-width:560px){.hubhero{padding:30px 20px;margin-top:16px}.hubhero p{font-size:16px}.sechead{margin-top:40px}.cta .btn{width:100%}.hcard{padding:22px 20px}.facts{grid-template-columns:repeat(2,1fr)}.fact{padding:20px 12px}}
@media(hover:none){.hcard:hover,.hcard:focus-visible,.step:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}.hcard:hover{z-index:auto}}
/* intro on short screens (phones in landscape) */
@media(max-height:620px){.sp-emb{width:130px;height:130px}.sp-stage{width:130px}.sp-ring{width:130px;height:130px;margin:-65px 0 0 -65px}.sp-shadow{width:110px;margin-left:-55px;bottom:-10px}.sp-title{margin-top:16px;font-size:clamp(28px,6vw,44px)}.sp-by{margin-top:10px}.sp-btn{margin-top:14px;min-height:42px}.sp-hint{display:none}.sp-in{padding:10px}}
@media(max-width:420px){.sp-emb{width:190px;height:190px}.sp-stage{width:190px}.sp-ring{width:190px;height:190px;margin:-95px 0 0 -95px}}

/* the intro waits for a first tap (browsers block sound until then); everything is paused and hidden until it starts */
#splash:not(.go) *:not(.sp-begin){animation-play-state:paused!important}
.sp-begin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;border:1.5px solid var(--brass-hi);background:rgba(255,255,255,.08);color:#fff;font:800 17px var(--sans);letter-spacing:.04em;cursor:pointer;animation:beginPulse 2.4s ease-in-out infinite;transition:transform .3s var(--spring)}
.sp-begin[hidden]{display:none}
.sp-begin svg{width:22px;height:22px;color:var(--brass-hi)}
.sp-begin small{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi)}
.sp-begin:hover{transform:translate(-50%,-50%) scale(1.05)}
@keyframes beginPulse{50%{box-shadow:0 0 0 10px rgba(241,216,140,.12),0 0 34px rgba(241,216,140,.35)}}

.count{min-height:50px}.count b{min-width:2ch;display:inline-block;text-align:right;font-variant-numeric:tabular-nums}

#splash[hidden]{display:none!important}