/* ============================================================
   Fullrack — product pages (currently /coaches/).

   Layered on switcher.css, which owns the tokens. Keeping the tokens
   in one file is what stops the front door and the product pages
   drifting into two dark themes that don't quite match.

   /gyms/ still runs on the original site.css. When that page is
   redesigned it should move onto this file, not fork it.
   ============================================================ */

body.product{background:var(--bg)}

/* ---------- nav ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(11,15,14,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px}
/* 22px tall before this; WCAG 2.5.8 asks for 24. Same trick as the footer —
   height inside the existing gap, so the bar does not grow. */
.topbar a{display:inline-flex;align-items:center;min-height:24px}
.mark{font-weight:700;letter-spacing:.12em;font-size:15px;text-transform:uppercase;margin:0;
  text-decoration:none}
.mark b{color:var(--accent)}
.mark span{color:var(--muted);font-weight:500}
.topnav{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;font-size:14px}
.topnav a{color:var(--muted);text-decoration:none}
.topnav a:hover{color:var(--text)}
.topnav .btn{color:var(--accent-ink)}

.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:600;
  border:0;border-radius:10px;padding:12px 18px;text-decoration:none;cursor:pointer;
  font-size:15px;font-family:inherit;transition:background .25s ease}
.btn:hover{background:var(--accent-soft)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.55;cursor:progress}
.ghostbtn{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:12px 18px;
  text-decoration:none;color:var(--text);font-size:15px}

/* ---------- hero ---------- */
.phero{padding:clamp(44px,7vh,84px) 0 clamp(40px,6vh,72px);
  background:radial-gradient(72% 58% at 68% 24%, rgba(43,217,169,.12), transparent 64%)}
.phero .wrap{display:grid;gap:clamp(28px,5vw,64px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.phero h1{font-size:clamp(32px,5.2vw,54px);line-height:1.04;letter-spacing:-.032em;margin:0 0 18px}
.phero .lede{color:var(--text-body);font-size:19px;max-width:520px;margin:0 0 18px}
.phero .lede.small{font-size:16px}
.pill{display:inline-block;margin:0 0 20px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line-hi);color:var(--accent);font-weight:600;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

.heroPhone{justify-self:center}
/* .phone is a <span>. Inside the switcher it inherits block-level layout from
   a flex parent; here the parent is a plain div, so it must be told — an
   inline element ignores width and aspect-ratio, and the device collapses to
   a 35px sliver with the screen inset inside it. */
.heroPhone .phone{display:block;margin:0 auto}
.heroPhone .phone{width:min(300px,82vw);opacity:1;--in:0px;
  transform:translate3d(0,var(--ty,0px),0) rotateY(var(--ry,-7deg)) rotateX(var(--rx,2deg))}
.phero{perspective:1500px}

/* ---------- generic sections ---------- */
.band{border-top:1px solid var(--line);padding:clamp(44px,7vh,80px) 0}
.band h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;max-width:640px;margin:0 0 14px}
.band .lede{color:var(--text-body);font-size:17px;max-width:620px;margin:0 0 30px}

.inc{list-style:none;margin:0;padding:0;display:grid;gap:0 32px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.inc li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);position:relative;
  color:var(--text-body);font-size:15px}
.inc li:before{content:"";position:absolute;left:2px;top:19px;width:9px;height:5px;
  border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}

.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);margin:0 0 10px}
.step h3{font-size:17px;margin:0 0 6px}
.step p{color:var(--muted);font-size:14.5px;margin:0}

.prices{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px;text-align:center}
.tier.mid{border-color:var(--line-hi)}
.tier .amt{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-.02em;margin:0}
.tier .amt s{font-size:15px;color:var(--muted);font-weight:400;text-decoration:none}
.tier .who{color:var(--muted);font-size:14px;margin:8px 0 0}
.tier /* 12px, not 11. Every other micro-label on this site is decorative — a kicker,
   a caption, a section marker — and 11px mono is the right register for those.
   This one is not decorative: it is the badge that steers the single most
   consequential choice on the page, sitting in the smallest type in the card it
   is trying to sell. One exception, made deliberately, rather than flattening
   the whole micro-label voice to satisfy a threshold no standard sets. */
.tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;color:var(--accent);border:1px solid var(--line-hi);
  border-radius:999px;padding:4px 10px}
.pnote{color:var(--muted);text-align:center;margin-top:20px;font-size:14.5px}
/* A .pnote can carry a link now (the terms note under signup). --muted on
   --bg is 6.2:1, which passes, but a grey link inside grey text is not a link
   anybody sees. */
.pnote a{color:var(--accent)}
/* Sending can fail on a deployment whose mail provider is configured and
   rejecting, and the API says so truthfully — so the page has to look like it
   means it. #F2B357 is 9.4:1 on --card and higher on --bg, where the ambers
   people reach for first land under AA. */
.pnote.warn{color:#F2B357}

/* ---------- signup ---------- */
.signup{max-width:460px;margin:0 auto}
.signup p{margin:0 0 14px}
/* 12px, not 11. These are not decorative micro-labels — they are the only
   thing telling a coach which box is their email, on the one form the whole
   page exists to get filled in. Uppercase mono at 11px with .12em tracking is
   a caption; at 12px it is still a caption and is legible on a phone held at
   arm's length. */
label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input{width:100%;padding:13px 14px;font-size:16px;background:#0d1211;border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-family:inherit}
/* This was `outline:none` with a 1px border-colour change standing in for a
   focus ring. Two problems: it overrode the site-wide :focus-visible rule, so
   these three fields were the only focusable things on the site with no
   indicator; and a 1px border shift is not a focus indicator a keyboard user
   can find at a glance, which is the entire job. The accent border stays —
   it reads well and it is the house style — and the ring comes back on top. */
input:focus{border-color:var(--accent)}
input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.subrow{display:flex;align-items:stretch}
.subrow input{border-radius:10px 0 0 10px}
.subrow span{display:flex;align-items:center;padding:13px 12px;background:#0d1211;
  border:1px solid var(--line);border-left:0;border-radius:0 10px 10px 0;color:var(--muted);
  white-space:nowrap;font-family:var(--mono);font-size:13px}
.msg{min-height:22px;font-size:14px;margin:0}
.msg.err{color:#FF8A8A}
.msg.ok{color:var(--accent)}
.success{background:var(--card);border:1px solid var(--line-hi);border-radius:var(--r);padding:24px}
.success a{color:var(--accent);word-break:break-all}
/* `.success a` out-specifies `.btn` (0,1,1 vs 0,1,0), so the two green action
   buttons on the signup success card were rendering accent-on-accent —
   green text on a green button, unreadable. The plain-link colour above is
   right for the bare app-URL link; buttons keep their ink colour. */
.success a.btn{color:var(--accent-ink);word-break:normal}
.noscript-note{display:none;color:var(--muted);font-size:14px;text-align:center}
@media (scripting:none){
  .signup form{display:none}
  .noscript-note{display:block}
}

/* ---------- faq ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--accent);font-family:var(--mono);margin-right:12px}
.faq details[open] summary:before{content:"–"}
.faq p{color:var(--text-body);font-size:15px;margin:0 0 18px;padding-left:26px}

@media (max-width:860px){
  .phero .wrap{grid-template-columns:1fr}
  .heroPhone{order:-1}
  .heroPhone .phone{width:min(240px,66vw)}
}
@media (prefers-reduced-motion:reduce){
  .heroPhone .phone{transform:none}
}