:root{
  --bg:#000000;
  --bg-alt:#0a0a0a;
  --panel:#151517;
  --panel-2:#1b1b1e;
  --border:#26262a;
  --text:#f2f2f0;
  --muted:#8d8d93;
  --accent:#ff2b2b;
  --accent-dim:#d61f1f;
  --red:#ff5c5c;
  --amber:#ffb84d;
  --good:#3ddc71;
  --radius:14px;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:clip; max-width:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; max-width:100%;
}
.grain{ display:none; }
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase;}
p{margin:0;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:11.5px;
  color:var(--accent); font-weight:700; margin:0 0 10px;
}

/* nav */
.nav{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:38px 6vw;
  background:rgba(10,10,11,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-logo{display:flex; align-items:center; justify-self:center;}
.nav-logo img{
  height:32px; width:auto; display:block;
  transition:transform .2s ease, filter .2s ease;
}
.nav-logo:hover img{transform:scale(1.1); filter:drop-shadow(0 0 18px rgba(255,255,255,.85));}
.nav-links{display:flex; align-items:center; gap:26px; font-size:13px; color:#fff; text-transform:uppercase; letter-spacing:.04em;}
.nav-links-left{ justify-self:start; }
.nav-links-right{ justify-self:end; }
.nav-links a:not(.nav-cta){
  display:inline-block;
  transition:transform .2s ease, text-shadow .2s ease, color .2s ease;
}
.nav-links a:not(.nav-cta):hover{
  color:#fff;
  transform:scale(1.1);
  text-shadow:0 0 12px rgba(255,255,255,.75);
}
.nav-cta{
  background:var(--accent); color:#fff !important; padding:8px 16px; border-radius:100px; font-weight:700;
}
.nav-cta:hover{background:var(--accent-dim);}

/* desktop-only nav lock icon, sized to match the nav text */
.nav-lock-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; padding:0; margin:0;
  background:none; border:none; color:#fff; cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
  animation:navLockIdlePulse 4.5s ease-in-out infinite;
}
.nav-lock-btn svg{ width:100%; height:100%; display:block; }
.nav-lock-btn:hover{ transform:scale(1.15); filter:drop-shadow(0 0 10px rgba(255,255,255,.75)); }
.nav-lock-shackle{ transform-box:fill-box; transform-origin:100% 100%; transition:transform .2s ease; }
.nav-lock-btn.locking{ animation:navLockPulse .5s ease; pointer-events:none; }
.nav-lock-btn.locking .nav-lock-shackle{ animation:navLockShackle .5s ease; }
/* idle state: slowly turn red, fade back to white, hold, then repeat */
@keyframes navLockIdlePulse{
  0%{ color:#fff; filter:none; }
  35%{ color:var(--accent); filter:drop-shadow(0 0 8px var(--accent)); }
  70%{ color:#fff; filter:none; }
  100%{ color:#fff; filter:none; }
}
@keyframes navLockPulse{
  0%{ transform:scale(1); color:#fff; filter:none; }
  35%{ transform:scale(.8); color:var(--accent); filter:drop-shadow(0 0 10px var(--accent)); }
  70%{ transform:scale(1.15); }
  100%{ transform:scale(1); color:#fff; filter:none; }
}
@keyframes navLockShackle{
  0%{ transform:rotate(0deg); }
  45%{ transform:rotate(-22deg) translateY(1px); }
  100%{ transform:rotate(0deg); }
}
@media (max-width:780px){
  .nav-lock-btn{ display:none; }
}

/* same lock icon, reused at the top of any unlocked password-gated content
   (Athletes, Gear Checklists cards) so it can be relocked without scrolling
   down to the bottom lock button. Reuses the header icon's snap animation. */
.section-lock-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0; margin:0; flex:0 0 auto;
  background:none; border:none; color:var(--muted); cursor:pointer;
  transition:transform .2s ease, filter .2s ease, color .2s ease;
}
.section-lock-btn svg{ width:100%; height:100%; display:block; }
.section-lock-btn:hover{ color:#fff; transform:scale(1.15); filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); }
.section-lock-shackle{ transform-box:fill-box; transform-origin:100% 100%; transition:transform .2s ease; }
.section-lock-btn.locking{ animation:navLockPulse .5s ease; pointer-events:none; }
.section-lock-btn.locking .section-lock-shackle{ animation:navLockShackle .5s ease; }

/* mobile hamburger + drawer */
.menu-btn{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.menu-btn span{
  display:block; width:100%; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu-backdrop{
  position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.mobile-menu-backdrop.open{ opacity:1; visibility:visible; }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(78vw, 300px);
  background:#050505; border-left:1px solid var(--border);
  display:flex; flex-direction:column; gap:2px;
  padding:100px 26px 40px;
  transform:translateX(100%);
  transition:transform .35s ease;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-logo{
  display:block; margin:0 0 22px; padding:0; border:none !important;
}
.mobile-menu-logo img{ height:40px; width:auto; display:block; }
.mobile-menu a:not(.mobile-menu-logo){
  color:#fff; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  text-decoration:none; padding:16px 2px; border-bottom:1px solid var(--border);
  transition:transform .2s ease, text-shadow .2s ease, color .2s ease;
}
.mobile-menu a:not(.mobile-menu-logo):hover, .mobile-menu a:not(.mobile-menu-logo):active{
  color:#fff; transform:scale(1.06); text-shadow:0 0 12px rgba(255,255,255,.75);
}
.mobile-menu a.mobile-menu-cta{
  margin-top:20px; text-align:center; border:none; border-radius:100px;
  background:var(--accent); color:#fff !important; font-weight:700; padding:14px;
}
.mobile-menu a.mobile-menu-cta:hover, .mobile-menu a.mobile-menu-cta:active{
  background:var(--accent-dim); transform:scale(1.06);
  box-shadow:0 0 20px rgba(255,43,43,.55); text-shadow:none;
}
.mobile-menu-lock{
  margin:auto 2px 0; padding:0; background:none; border:none;
  color:var(--muted); font-size:12px; text-align:left; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--border);
  transition:color .2s ease, text-decoration-color .2s ease;
}
.mobile-menu-lock:hover, .mobile-menu-lock:active{
  color:#fff; text-decoration-color:#fff;
}

@media (min-width:781px){
  .mobile-menu, .mobile-menu-backdrop{ display:none; }
}
@media (max-width:780px){
  .menu-btn{ display:flex; }
}

/* hero */
.hero{
  position:relative; z-index:2; overflow:hidden;
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.hero-slideshow{position:absolute; inset:0; z-index:0;}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.8s ease;
}
.hero-slide.active{opacity:1;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 65% 50% at 50% 56%, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.82) 55%, #000 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 6vw;
  display:flex; flex-direction:column; align-items:center;
}
.hero-content .eyebrow{ text-shadow:0 2px 14px rgba(0,0,0,.8); }
.hero h1{
  font-size:clamp(34px,6vw,64px);
  line-height:1.05;
  margin:0 0 20px;
  text-shadow:0 4px 24px rgba(0,0,0,.75);
}
.hero h1 span{color:var(--accent);}
.hero-sub{
  color:#e4e4e2; font-size:clamp(15px,1.7vw,18px); max-width:520px; margin-bottom:36px;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.scroll-cue{
  display:inline-block; color:var(--muted); font-size:12px; letter-spacing:.08em;
  border:1px solid var(--border); padding:8px 14px; border-radius:100px;
}
.scroll-cue:hover{border-color:var(--accent); color:var(--accent);}

/* sections */
.section{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  padding:9vh 6vw;
  border-top:1px solid var(--border);
}
.section h2{font-size:clamp(24px,3.6vw,34px); margin-bottom:8px;}
.section-sub{color:var(--muted); font-size:14.5px; max-width:560px; margin-bottom:34px;}

/* how this site works rail */
.howworks-rail{
  display:flex; margin-top:28px;
  background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--accent);
  border-radius:var(--radius); overflow:hidden;
}
.howworks-step{
  flex:1; min-width:0; padding:24px 22px 26px;
  display:flex; flex-direction:column; gap:8px;
  border-right:1px solid var(--border);
  color:inherit; text-decoration:none;
  position:relative;
  transition:background .2s ease;
}
.howworks-step:last-child{ border-right:none; }
.howworks-step:hover{ background:var(--panel-2); }
.howworks-index{
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--muted);
}
.howworks-icon{
  width:22px; height:22px; color:var(--accent); margin:4px 0 2px;
}
.howworks-label{
  font-size:14.5px; font-weight:800; text-transform:uppercase; letter-spacing:.01em;
}
.howworks-desc{
  font-size:12.5px; color:var(--muted); line-height:1.5; padding-right:6px;
}
.howworks-step::after{
  content:"→"; position:absolute; right:18px; bottom:20px;
  color:var(--accent); font-size:15px; opacity:0;
  transform:translateX(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.howworks-step:hover::after{ opacity:1; transform:translateX(0); }

@media (max-width:780px){
  .howworks-rail{ flex-direction:column; }
  .howworks-step{ border-right:none; border-bottom:1px solid var(--border); }
  .howworks-step:last-child{ border-bottom:none; }
}

/* gallery */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:8px;
}
.gallery img{
  width:100%; height:220px; object-fit:cover; border-radius:10px; border:1px solid var(--border);
  display:block; transition:transform .25s ease, border-color .25s ease;
}
.gallery a:hover img{transform:scale(1.03); border-color:var(--accent); box-shadow:0 0 22px rgba(255,43,43,.45);}
.gallery-tag{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:6px; display:block;
}

.drive-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:13px; font-weight:800; color:var(--accent);
  background:var(--panel); border:2px solid var(--accent); padding:10px 18px; border-radius:100px;
}
.drive-link:hover{ background:var(--accent); color:#fff; }

.drive-embed{
  margin-top:22px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-alt);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.drive-embed:hover{
  transform:scale(1.015) rotate(-0.5deg);
  border-color:var(--accent); box-shadow:0 0 30px rgba(255,43,43,.35);
}
.drive-embed-bar{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-2); padding:12px 16px; border-bottom:1px solid var(--border);
}
.drive-embed-bar .dot{
  width:9px; height:9px; border-radius:50%; background:var(--border);
}
.drive-embed-label{
  margin-left:6px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.drive-back{
  margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--text);
  font-size:11.5px; padding:5px 12px; border-radius:100px; cursor:pointer;
}
.drive-back:hover{ border-color:var(--accent); color:var(--accent); }

.drive-browser{
  min-height:400px; max-height:560px; overflow-y:auto; padding:20px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px;
  align-content:start;
}
.drive-browser .loading{ grid-column:1/-1; color:var(--muted); font-size:13.5px; }
.drive-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:14px 10px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.drive-item:hover{
  transform:scale(1.06) rotate(-1.5deg); border-color:var(--accent); box-shadow:0 0 22px rgba(255,43,43,.45);
}
.drive-item:nth-child(even):hover{
  transform:scale(1.06) rotate(1.5deg);
}
.drive-item .thumb{
  width:100%; aspect-ratio:1/1; border-radius:8px; background:var(--panel-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:30px;
}
.drive-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.drive-item .thumb-folder{
  background:transparent; padding:8px;
}
.drive-item .thumb-folder svg{ width:100%; height:100%; }
.drive-item .name{
  font-size:11.5px; color:var(--muted); word-break:break-word; line-height:1.35;
}

.coming-soon{
  margin-top:40px; padding:26px 24px; border:1.5px dotted var(--border); border-radius:var(--radius);
  background:#000; opacity:.6;
}
.coming-soon h3{font-size:18px; margin-bottom:8px;}
.coming-soon p{color:var(--muted); font-size:14px; max-width:560px;}

/* roadmap */
.roadmap{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.roadmap li{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px;
}
.roadmap strong{font-size:15px;}
.roadmap p{color:var(--muted); font-size:13.5px; margin-top:4px;}
.tag{
  flex:0 0 auto; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 10px; border-radius:100px; white-space:nowrap; margin-top:2px;
  border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tag-pending{background:rgba(255,92,92,.14); color:var(--red);}
.tag-progress{background:rgba(255,184,77,.14); color:var(--amber);}
.tag-planned{background:rgba(255,43,43,.14); color:var(--accent);}

/* checklist */
.add-row{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
.add-row input[type=text]{
  flex:1 1 240px; background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:10px; font-size:14px; outline:none;
}
.add-row input[type=text]:focus{border-color:var(--accent);}
.add-row input.add-by{flex:0 1 150px;}
.add-row select.add-section{
  flex:0 1 190px;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:10px; font-size:14px; outline:none; cursor:pointer;
}
.add-row select.add-section:focus{border-color:var(--accent);}
.add-row input.add-section-custom{flex:0 1 190px;}
.add-row button{
  background:var(--accent); border:none; color:#fff; font-weight:700; padding:12px 20px;
  border-radius:10px; cursor:pointer; font-size:14px;
}
.add-row button:hover{background:var(--accent-dim);}
.add-row button:disabled{opacity:.5; cursor:default;}

@media (max-width:600px){
  .add-row{ flex-direction:column; }
  .add-row input[type=text],
  .add-row input.add-by,
  .add-row select.add-section,
  .add-row input.add-section-custom,
  .add-row button{
    flex:1 1 auto; width:100%;
  }
}

.checklist-root{display:flex; flex-direction:column; gap:26px;}
.checklist-section-title{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; margin-bottom:10px;
}
.checklist-item{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:12px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:13px 15px; margin-bottom:8px; cursor:pointer;
  transition:border-color .15s ease, background .25s ease, border-radius .25s ease;
}
.checklist-item:hover{border-color:#3a3a3f;}
.checklist-item .box{
  flex:0 0 auto; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--muted);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
  transition:background .2s ease, border-color .2s ease;
}
.checklist-item .item-thumb{
  flex:0 0 auto; width:42px; height:42px; border-radius:8px; object-fit:cover;
  border:1px solid var(--border);
}
.checklist-item.done .item-thumb{ border-color:rgba(255,255,255,.5); }
.checklist-item.done{ background:var(--accent); border-color:var(--accent); border-radius:18px; }
.checklist-item.done .box{background:#fff; border-color:#fff;}
.checklist-item.done .box::after{content:"✓"; font-size:12px; color:var(--accent); font-weight:800;}
.checklist-item .txt-wrap{display:flex; flex-direction:column; gap:3px; flex:1;}
.checklist-item span.txt{font-size:14.5px;}
.checklist-item.done span.txt{color:#fff; text-decoration:line-through; text-decoration-color:rgba(255,255,255,.6);}
.checklist-item .by{font-size:11px; color:var(--muted);}
.checklist-item.done .by{color:rgba(255,255,255,.8);}
.checklist-item .del{
  margin-left:auto; color:var(--muted); font-size:12px; opacity:0; transition:opacity .15s, color .15s;
}
.checklist-item:hover .del{opacity:1;}
.checklist-item .del:hover{color:var(--red);}
.checklist-item.done .del{color:rgba(255,255,255,.8);}
.checklist-item.done .del:hover{color:#fff; text-shadow:0 0 8px rgba(255,255,255,.7);}

/* one-shot shine + flash that plays right when an item gets checked off */
.checklist-item.just-checked{ animation:itemCheckFlash .55s ease; }
.checklist-item.just-checked::before{
  content:"";
  position:absolute; top:0; left:-75%; width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.85), transparent);
  transform:skewX(-20deg);
  animation:itemShineSweep .55s ease;
  pointer-events:none;
}
@keyframes itemCheckFlash{
  0%{ box-shadow:0 0 0 rgba(255,43,43,0); filter:brightness(1); }
  35%{ box-shadow:0 0 26px rgba(255,43,43,.85); filter:brightness(1.5); }
  100%{ box-shadow:0 0 0 rgba(255,43,43,0); filter:brightness(1); }
}
@keyframes itemShineSweep{
  0%{ left:-75%; }
  100%{ left:125%; }
}

.loading{color:var(--muted); font-size:14px;}
.sync-note{margin-top:18px; font-size:11.5px; color:var(--muted);}
.sync-note.ok{color:var(--accent-dim);}
.sync-note.err{color:var(--red);}

.footer{
  text-align:center; padding:40px 6vw 60px; color:var(--muted); font-size:12px;
  border-top:1px solid var(--border);
}
.footer-logo-link{ display:inline-block; }
.footer-logo{ height:26px; width:auto; opacity:.92; transition:transform .2s ease, filter .2s ease, opacity .2s ease; }
.footer-logo-link:hover .footer-logo{ opacity:1; transform:scale(1.08); filter:drop-shadow(0 0 14px rgba(255,255,255,.7)); }
.footer-label{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

@media (max-width:780px){
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery img{height:160px;}
  .nav-links{gap:14px; font-size:12.5px;}
  .nav-links a:not(.nav-cta){display:none;}
}


/* body lock state */
body.locked .nav, body.locked .hero, body.locked main, body.locked .footer{
  display:none;
}

/* password gate */
.gate{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  opacity:1; visibility:visible;
  transition:opacity 1.6s ease, visibility 1.6s ease;
}
.gate.no-anim{ transition:none !important; }
body:not(.locked) .gate{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes gateShake{
  10%, 90% { transform:translateX(-6px); }
  20%, 80% { transform:translateX(8px); }
  30%, 50%, 70% { transform:translateX(-10px); }
  40%, 60% { transform:translateX(10px); }
}
.gate-card.shake{ animation:gateShake .5s ease; }
.gate-pass-wrap.wrong{
  border-color:var(--red); box-shadow:0 0 14px rgba(255,63,63,.5);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gate-pass-wrap.shake{ animation:gateShake .5s ease; }

/* full-screen flash when the MAIN gate password is wrong, only this gate */
.gate::after{
  content:""; position:absolute; inset:0;
  background:var(--accent); opacity:0; pointer-events:none;
}
.gate.flash-wrong::after{ animation:gateWrongScreenFlash .4s ease; }
@keyframes gateWrongScreenFlash{
  0%{ opacity:.5; }
  100%{ opacity:0; }
}

/* shared correct-password flash: green glow that holds briefly then fades,
   same on every gate on the site (main, Athletes, Gear Checklists, admin) */
@keyframes gateCorrectFlash{
  0%{ border-color:var(--good); box-shadow:0 0 14px rgba(61,220,113,.6); }
  55%{ border-color:var(--good); box-shadow:0 0 14px rgba(61,220,113,.6); }
  100%{ border-color:var(--border); box-shadow:0 0 0 rgba(61,220,113,0); }
}
.gate-pass-wrap.correct{
  animation:gateCorrectFlash .6s ease forwards;
}
@keyframes gateButtonCorrectFlash{
  0%{ background:var(--good); box-shadow:0 0 14px rgba(61,220,113,.6); }
  55%{ background:var(--good); box-shadow:0 0 14px rgba(61,220,113,.6); }
  100%{ background:var(--accent); box-shadow:none; }
}
.gate-card button.correct,
.docs-gate button.correct{
  animation:gateButtonCorrectFlash .6s ease forwards;
}
@keyframes gateDotCorrectFlash{
  0%{ color:var(--good); }
  55%{ color:var(--good); }
  100%{ color:#fff; }
}
.gate-pass-wrap.correct .gate-dot{
  animation:gateDotCorrectFlash .6s ease forwards;
}

/* lets the dot-style password field drop into a .docs-gate row (Athletes,
   Gear Checklists) and stretch the same way the plain input used to */
.docs-gate .gate-pass-wrap{ flex:1 1 240px; min-height:46px; margin:0; }
.gate-card{
  width:min(90vw, 360px);
  background:#060606; border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 30px; text-align:center;
}
.gate-logo{
  height:34px; width:auto; margin:0 auto 20px; display:block;
}
.gate-card h2{ font-size:22px; margin:0 0 8px; }
.gate-sub{ color:var(--muted); font-size:13.5px; margin-bottom:22px; }
#gate-form{ display:flex; flex-direction:column; gap:12px; }

.gate-pass-wrap{
  position:relative; width:100%; max-width:100%; min-width:0; min-height:46px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease;
  overflow:hidden;
}
.gate-pass-wrap:focus-within{ border-color:var(--accent); }
.gate-pass-wrap input{
  position:absolute; inset:0; width:100%; height:100%;
  background:transparent; border:none; outline:none;
  color:transparent; caret-color:var(--accent);
  padding:12px 14px; font-size:16px; letter-spacing:.08em; text-align:center;
}
.gate-pass-wrap input::selection{ background:transparent; }
.gate-pass-wrap input::-moz-selection{ background:transparent; }
.gate-dots{
  display:flex; gap:9px; align-items:center; justify-content:center;
  flex-wrap:nowrap; overflow:hidden; max-width:100%; min-width:0;
  min-height:10px; pointer-events:none;
}
.gate-pass-placeholder{
  position:absolute; left:0; right:0; text-align:center;
  color:var(--muted); font-size:14px; letter-spacing:.08em;
  pointer-events:none; transition:opacity .15s ease;
}
.gate-dot{
  display:inline-block; flex-shrink:0; width:9px; height:9px; border-radius:50%;
  background-color:currentColor; color:#fff;
  animation: gateDotPop .45s ease-out;
}
@keyframes gateDotPop{
  0%{ opacity:0; transform:translateX(-8px) scale(1.6); filter:blur(6px); color:var(--accent); box-shadow:0 0 14px var(--accent);}
  55%{ opacity:1; transform:translateX(0) scale(1.2); filter:blur(2px); color:var(--accent); box-shadow:0 0 14px var(--accent);}
  100%{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); color:#fff; box-shadow:none;}
}

.gate-card button{
  background:var(--accent); border:none; color:#fff; font-weight:700; padding:12px 16px;
  border-radius:10px; cursor:pointer; font-size:14px;
}
.gate-card button:hover{ background:var(--accent-dim); }
.gate-error{ color:var(--red); font-size:12.5px; margin-top:14px; min-height:16px; }

/* Caps Lock warning - shared by every password field on the site. Native
   browser caps-lock hints are inconsistent (and mostly invisible on our
   custom dot-style fields), so this is detected in JS via getModifierState
   and shown as a clearly visible amber banner right under the field. */
.capslock-warning{
  display:none; align-items:center; gap:8px;
  color:var(--amber); font-size:12.5px; font-weight:700;
  background:rgba(255,184,77,.14); border:1px solid rgba(255,184,77,.4);
  padding:9px 12px; border-radius:8px; margin-top:10px;
  animation:capslockPop .25s ease;
}
.capslock-warning.visible{ display:flex; }
.capslock-warning svg{ width:15px; height:15px; flex:0 0 auto; }
@keyframes capslockPop{
  0%{ opacity:0; transform:translateY(-4px); }
  100%{ opacity:1; transform:translateY(0); }
}

@media (max-width:480px){
  /* smaller dots + tighter gap so a full password still fits inside the
     pill on narrow phones instead of clipping early; any dots past that
     stay contained inside the pill (gate-pass-wrap/gate-dots overflow:hidden)
     instead of pushing past it or the page edge */
  .gate-card{ width:92vw; padding:30px 20px; }
  .gate-dots{ gap:6px; }
  .gate-dot{ width:7px; height:7px; }
}

/* docs section gate */
.docs-gate{
  width:100%; margin:8px 0 4px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.docs-gate button{
  flex:0 0 auto;
  background:var(--accent); border:none; color:#fff; font-weight:700; padding:12px 20px;
  border-radius:10px; cursor:pointer; font-size:14px;
}
.docs-gate button:hover{ background:var(--accent-dim); }
.docs-error{ color:var(--red); font-size:12.5px; min-height:14px; margin:0; flex:1 1 100%; }
.docs-gate .capslock-warning{ flex:1 1 100%; margin-top:0; }

@media (max-width:600px){
  .docs-gate{ flex-direction:column; align-items:stretch; }
  .docs-gate .gate-pass-wrap,
  .docs-gate button{
    width:100%; flex:1 1 auto;
  }
}

.docs-subhead{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  font-weight:700; margin:26px 0 12px;
}
.docs-subhead:first-of-type{ margin-top:6px; }

.docs-content-top{ display:flex; justify-content:flex-end; margin:-4px 0 10px; }

.docs-linked{ display:flex; flex-direction:column; gap:8px; }
.docs-link-item{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.docs-link-item:hover{
  transform:scale(1.015); border-color:var(--accent); box-shadow:0 0 20px rgba(255,43,43,.35);
}
.docs-link-icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  background:rgba(255,43,43,.14); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.docs-link-icon svg{ width:19px; height:19px; }
.docs-link-item:hover .docs-link-icon{ background:var(--accent); color:#fff; }
.docs-link-text{ display:flex; flex-direction:column; gap:3px; flex:1; }
.docs-link-name{ font-size:14.5px; font-weight:700; }
.docs-link-sub{ font-size:12px; color:var(--muted); }
.docs-link-arrow{
  flex:0 0 auto; color:var(--muted); font-size:16px;
  transition:color .2s ease, transform .2s ease;
}
.docs-link-item:hover .docs-link-arrow{ color:var(--accent); transform:translate(2px,-2px); }

.docs-todo-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
.docs-todo-list li{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; font-size:13px; color:var(--muted); line-height:1.55;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.docs-todo-list li:hover{
  transform:scale(1.015); border-color:var(--accent); box-shadow:0 0 20px rgba(255,43,43,.35);
}
.docs-todo-list li strong{ color:var(--text); }

.docs-browser{ margin-top:8px; }
.docs-browser .name{ word-break:break-word; }


/* content playbook */
.cadence-banner{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:28px;
}
.cadence-main strong{font-size:15.5px;}
.cadence-main p{color:var(--muted); font-size:13px; margin-top:4px; max-width:380px;}
.cadence-days{display:flex; gap:8px; flex-wrap:wrap;}
.day-chip{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:7px 13px; border-radius:100px; background:rgba(255,43,43,.14); color:var(--accent);
  display:inline-block; transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.day-chip:hover{
  transform:scale(1.15) rotate(-4deg);
  background:var(--accent); color:#fff;
  box-shadow:0 0 16px rgba(255,43,43,.55);
}
.day-chip:nth-child(even):hover{ transform:scale(1.15) rotate(4deg); }

.playbook-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.playbook-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px;
}
.playbook-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.playbook-card h3{font-size:15px; margin:0; color:var(--accent);}
.playbook-count{
  font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:100px; padding:2px 9px;
}
.playbook-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.playbook-card li{font-size:13px; color:var(--muted); line-height:1.5;}
.playbook-card li strong{color:var(--text);}

/* lock button */
.footer{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.lock-btn{
  background:none; border:none; color:var(--muted);
  padding:4px 2px; font-size:12px; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--border);
  transition:color .2s ease, text-shadow .2s ease, text-decoration-color .2s ease;
}
.lock-btn:hover{
  color:#fff; text-decoration-color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.6);
}

.coming-soon a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-transform:uppercase; font-weight:700; }
.coming-soon a:hover{ color:#fff; }

.docs-lock-row{
  display:flex; justify-content:center;
  margin-top:28px; padding-top:20px;
  border-top:1px solid var(--border);
}

/* designer checklists */
.designers-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:8px;
}
.designer-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px;
}
.designer-card h3{ font-size:16px; margin:0; }
.designer-card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; gap:12px; }
.designer-role{
  display:block; margin-top:3px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent); font-weight:700;
}
.designer-mini-counts{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.designer-card-head-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }

.designer-counts{ display:flex; gap:24px; margin:2px 0 20px; }
.designer-count{ display:flex; flex-direction:column; gap:3px; }
.designer-count-num{ font-size:26px; font-weight:800; line-height:1; color:var(--accent); }
.designer-count-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

.designer-view-note{ color:var(--muted); font-size:13px; margin:2px 0 16px; }

.designers-admin{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.designers-admin-note{ color:var(--muted); font-size:13px; margin:4px 0 16px; }

@media (max-width:780px){
  .designers-grid{ grid-template-columns:1fr; }
}

@media (max-width:780px){
  .playbook-grid{grid-template-columns:1fr;}
}


/* unified hover language: boxes/pills glow + grow, buttons also shine */
.playbook-card,
.roadmap li,
.coming-soon,
.checklist-item,
.cadence-banner,
.designer-card.is-locked{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.playbook-card:hover,
.roadmap li:hover,
.coming-soon:hover,
.checklist-item:hover,
.cadence-banner:hover,
.designer-card.is-locked:hover{
  transform: scale(1.025);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255,43,43,.4);
}
.tag:hover{
  transform: scale(1.08);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255,43,43,.45);
}

.nav-cta,
.add-row button,
.gate-card button,
.docs-gate button,
.drive-link{
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta::before,
.add-row button::before,
.gate-card button::before,
.docs-gate button::before,
.drive-link::before{
  content:"";
  position:absolute; top:0; left:-75%;
  width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.nav-cta:hover,
.add-row button:hover,
.gate-card button:hover,
.docs-gate button:hover,
.drive-link:hover{
  transform: scale(1.06);
  box-shadow: 0 0 20px rgba(255,43,43,.55);
}
.nav-cta:hover::before,
.add-row button:hover::before,
.gate-card button:hover::before,
.docs-gate button:hover::before,
.drive-link:hover::before{
  left: 125%;
}

.drive-embed-bar .dot{
  transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}
.drive-embed-bar .dot.on-red{ background:#ff3b3b; box-shadow:0 0 8px #ff3b3b; }
.drive-embed-bar .dot.on-yellow{ background:#ffcc33; box-shadow:0 0 8px #ffcc33; }
.drive-embed-bar .dot.on-green{ background:#3ddc71; box-shadow:0 0 8px #3ddc71; }
.drive-embed-bar .dot.flash{ transform:scale(1.35); }

/* team / front office roster */
.team-section{
  position:relative; overflow:hidden;
}
.team-section::before{
  content:"";
  position:absolute; top:-25%; left:50%; width:140%; height:75%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,43,43,.16), transparent 70%);
  pointer-events:none; z-index:0;
}
.team-section .eyebrow,
.team-section h2,
.team-section .section-sub,
.team-section .roster-grid{
  position:relative; z-index:1;
}

.roster-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px;
}
.roster-card{
  position:relative;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 20px 24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.roster-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, var(--accent), transparent 85%);
}
.roster-num{
  position:absolute; top:-16px; right:-4px;
  font-size:72px; font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16);
  pointer-events:none; user-select:none;
}
.roster-body{ position:relative; z-index:1; margin-top:26px; }
.roster-role{
  display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent); background:rgba(255,43,43,.14);
  padding:5px 11px; border-radius:100px; margin-bottom:12px;
}
.roster-name{ font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:.01em; margin:0 0 8px; }
.roster-desc{ color:var(--muted); font-size:13px; line-height:1.55; margin:0; }

.roster-card:nth-child(even){ transform:translateY(22px); }
.roster-card:nth-child(odd):hover{
  transform:scale(1.035) rotate(-1deg);
  border-color:var(--accent); box-shadow:0 0 26px rgba(255,43,43,.4);
}
.roster-card:nth-child(even):hover{
  transform:translateY(22px) scale(1.035) rotate(1deg);
  border-color:var(--accent); box-shadow:0 0 26px rgba(255,43,43,.4);
}

@media (max-width:780px){
  .roster-grid{ grid-template-columns:1fr; margin-top:26px; }
  .roster-card:nth-child(even){ transform:none; }
  .roster-card:nth-child(even):hover{ transform:scale(1.035) rotate(1deg); }
  .roster-num{ font-size:58px; }
}