/* ShredRoster public demo: the few styles the public build adds on top of each page's own CSS.
   The waitlist page, the paired calls to action, and the "Join the waitlist" button in each demo's slim bar. */

/* links config.js turns off (an empty PRIVACY_URL or APP_URL): beats the footer's display:flex */
a[data-privacy][hidden],a[data-app-link][hidden],[data-privacy-wrap][hidden]{display:none}

/* ---------- website: See the demo next to Join the waitlist ---------- */
.nav .nav-demo{margin-right:-16px}
@media (max-width:1180px){.nav .nav-demo{display:none}}
.cta .hero-cta{gap:12px}
.cta .btn-ghost{background:transparent;border-color:rgba(13,11,7,.42);color:#0d0b07}
.cta .btn-ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(13,11,7,.12) 48%,transparent 66%)}
.cta .btn-ghost:hover{border-color:#0d0b07;color:#0d0b07}
.cta .btn-ghost:focus-visible{outline-color:#0d0b07}
/* the pricing page's Lineup band is a dark card inside a light section: its ghost button keeps the dark-ground look */
.light .lb .btn-ghost{background:rgba(255,255,255,.03);color:var(--text)}
.light .lb .btn-ghost:hover{border-color:rgba(246,213,107,.5);color:var(--gold-b)}
.menu .btn + .btn{margin-top:8px}
.gf-card .wl-mini{display:grid;gap:22px}
.gf-card .wl-mini p{color:#d9d5cc;line-height:1.55}

/* ---------- waitlist page ---------- */
.tabs[data-on="gym"] .tab-ind{transform:translateX(100%)}
.wl-set{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
/* one-column field grids: without minmax(0,1fr) a field sizes to its input and spills out of the card */
.wl-set .fld{grid-template-columns:minmax(0,1fr)}
.wl-set .fld-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:420px){.wl-set .fld-2{grid-template-columns:minmax(0,1fr);gap:6px}}
.wl-set[hidden]{display:none}
.wl-price{margin-top:18px;max-width:46ch;color:#d9d5cc;line-height:1.55}
.wl-price b{color:var(--gold-b);font-weight:600}
.inp.has-pre .pre{padding-left:14px;color:#8b877f;font-weight:500}
.inp.has-pre input{padding-left:4px}
.opt{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.16);font-size:.76rem;font-weight:500;color:#a6a39b}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-fail{padding:12px 14px;border-radius:var(--r-btn);border:1px solid rgba(255,59,74,.45);background:rgba(255,59,74,.08);color:#ffb3ba;font-size:.95rem;line-height:1.45}
.wl-fail a{color:#fff;font-weight:600}
.wl-note{color:#a6a39b;font-size:.88rem;line-height:1.5;text-align:center}
.wl-note a{color:var(--gold-b);font-weight:500;text-decoration:none}
.wl-note a:hover{text-decoration:underline}
#wl-submit[disabled]{opacity:.6;cursor:progress}
.wl-thanks svg.check circle{stroke:var(--ok)}
.wl-thanks svg.check path{stroke:var(--ok)}
.wl-thanks:not([hidden]) svg.check path{animation:wl-draw .7s .2s cubic-bezier(.33,1,.68,1) both}
@keyframes wl-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.wl-thanks:not([hidden]) svg.check path{animation:none}}

/* ---------- demo picker ---------- */
.pick-head .pk-wl{margin-top:4px}

/* ---------- demos: Join the waitlist in the slim bar ---------- */
.dbar-cta{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;flex:none;border-radius:6px;background:linear-gradient(180deg,#f6d56b,#e8b73c);color:#171103;font-weight:600;font-size:13.5px;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.dbar-cta:hover{background:linear-gradient(180deg,#fbe08a,#efc04a)}
.dbar-cta:focus-visible{outline:2px solid #f6d56b;outline-offset:2px}
/* the gym demo's coach view carries the most in its bar (role, viewing as, the button, back): make room on narrow desktops */
@media (min-width:768px) and (max-width:1100px){
  html.as-coach .dbar{gap:12px}
  html.as-coach .dbar .dbar-me-l{display:none}
  html.as-coach .dbar .dbar-back{justify-content:center;min-width:40px;gap:0;font-size:0}
  html.as-coach .dbar .dbar-back svg{width:18px;height:18px}
}
@media (min-width:768px) and (max-width:900px){
  html.as-coach .dbar{gap:10px;padding:0 16px}
  html.as-coach .dbar .dbar-logo img{height:20px}
  html.as-coach .dbar .dbar-role button{padding:7px 10px}
}
@media (max-width:767px){
  .dbar .dbar-note{display:none}
  .dbar .dbar-cta{justify-self:end;margin-left:auto;min-height:34px;padding:0 12px;font-size:13px}
  .dbar .dbar-back{justify-content:center;min-width:40px;gap:0;font-size:0}
  .dbar .dbar-back svg{width:18px;height:18px}
}