/* Golf Fit Starter funnel — shared skin for the landing page, the warm-up and
   both weeks. The palette is lifted from parts/01-style.html so the funnel and
   the real app cannot drift apart. Light only, same as the app. */
:root{
  color-scheme: light;
  --bg:#F6F5F5; --card:#FFFFFF; --card2:#FBFAFA; --line:#E4E1E1; --line2:#EFECEC;
  --ink:#424649; --muted:#6E6B6B; --faint:#8F8B8B;
  --accent:#1D7C72; --accent-ink:#155B54; --accent-soft:#E8F8F6; --mint:#91E6DC;
  --deep:#0A2C28; --deep2:#10403B;
  --gold:#B5831F; --gold-soft:#FAF0DA; --gold-hot:#F0B429;
  --warn:#C9503A;
  --shadow:0 1px 2px rgba(66,70,73,.05), 0 8px 24px -12px rgba(66,70,73,.18);
  --shadow-lg:0 2px 4px rgba(66,70,73,.06), 0 24px 60px -24px rgba(66,70,73,.32);
  --r:14px; --r-sm:9px; --r-lg:22px;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
a{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--gold-hot); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--accent-ink);padding:12px 18px;z-index:99;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}

section{padding:66px 0}
h1,h2,h3{line-height:1.1; letter-spacing:-.03em; margin:0 0 16px}
h1{font-size:clamp(32px,6vw,56px); font-weight:800}
h2{font-size:clamp(27px,4.6vw,40px); font-weight:800}
h3{font-size:19px; letter-spacing:-.01em; margin:0 0 8px; line-height:1.25}
.lede{font-size:clamp(16.5px,2vw,19px); color:var(--muted); max-width:58ch; margin:0 auto 8px}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  padding:8px 16px; border-radius:999px; margin-bottom:18px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:16.5px; font-weight:800; letter-spacing:.04em;
  padding:19px 32px; border-radius:var(--r); border:0; cursor:pointer;
  text-decoration:none; text-align:center; line-height:1.2;
  transition:transform .12s ease, background .12s ease; touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--mint); color:#0A2C28; box-shadow:0 12px 34px -12px rgba(0,0,0,.55)}
.btn-primary:hover{background:#A8EEE5}
.btn-solid{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn-solid:hover{background:var(--accent-ink)}
.btn-gold{background:var(--gold-hot); color:#3A2600; box-shadow:0 12px 34px -12px rgba(240,180,41,.7)}
.btn-gold:hover{background:#FFC53D}
.btn-ghost{background:transparent; color:var(--accent-ink); border:2px solid var(--line)}
.btn-ghost:hover{background:var(--card); border-color:var(--accent)}
.btn-lg{width:100%; font-size:17px; padding:21px 30px}

/* ── Progress rail. The same four steps on every page of the funnel, so it
      always reads as one journey rather than a pile of links. ───────────── */
.rail{background:var(--card); border-bottom:1px solid var(--line2); position:sticky; top:0; z-index:40}
.rail-in{display:flex; gap:6px; padding:11px 20px; max-width:var(--wrap); margin:0 auto; overflow-x:auto; scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.step{
  flex:1 0 auto; min-width:0; display:flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:var(--faint); text-decoration:none;
  padding:8px 12px; border-radius:999px; white-space:nowrap;
}
.step .dot{
  width:19px; height:19px; border-radius:50%; flex:none; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); color:var(--faint); background:var(--card);
}
.step.done{color:var(--accent-ink)}
.step.done .dot{background:var(--accent); border-color:var(--accent); color:#fff}
.step.now{color:var(--accent-ink); background:var(--accent-soft)}
.step.now .dot{border-color:var(--accent); color:var(--accent-ink)}
.step.locked{opacity:.55}

/* ── Page header ─────────────────────────────────────────────────────── */
.phead{background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 45%,var(--accent) 100%); color:#fff; padding:44px 0 40px}
.phead h1{margin-bottom:12px; text-shadow:0 2px 22px rgba(0,0,0,.3)}
.phead p{color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto; font-size:17px}
.phead .eyebrow{background:rgba(145,230,220,.16); color:#BFF3EC}

/* ── Video shell. Josh films on a phone, so 9:16 is the house format. ── */
.vshell{
  position:relative; width:min(330px,80vw); aspect-ratio:9/16;
  max-height:min(580px,64vh); margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden; background:#061E1B;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12);
}
.vshell.wide{width:min(760px,92vw); aspect-ratio:16/9; max-height:none}
.vshell video{width:100%; height:100%; object-fit:cover; background:#061E1B}
.vmissing{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; text-align:center; padding:22px;
  background:linear-gradient(150deg,#10403B,#1D7C72 62%,#2A9C90); color:#fff;
}
.vmissing .pm{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center;
}
.vmissing b{font-size:16px; display:block}
.vmissing span{font-size:13px; color:rgba(255,255,255,.82); max-width:26ch; line-height:1.45}

/* ── Exercise list ───────────────────────────────────────────────────── */
.exlist{display:flex; flex-direction:column; gap:22px; margin-top:30px}
.ex{
  background:var(--card); border:1px solid var(--line2); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.ex-head{display:flex; align-items:center; gap:13px; padding:20px 22px 0}
.ex-n{
  width:34px; height:34px; border-radius:50%; flex:none; background:var(--accent-soft);
  color:var(--accent-ink); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.ex-head h3{margin:0; font-size:20px}
.ex-body{padding:18px 22px 22px}
.ex-body .vshell{margin:0 auto 18px}
.ex-meta{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:15px}
.chip{
  background:var(--accent-soft); color:var(--accent-ink); font-weight:800;
  font-size:13.5px; padding:8px 15px; border-radius:999px; white-space:nowrap;
}
.chip.time{background:var(--gold-soft); color:var(--gold)}
.cue{
  margin:0; color:var(--muted); font-size:16px; text-align:center;
  max-width:46ch; margin-inline:auto; line-height:1.55;
}
.cue::before{content:"“"} .cue::after{content:"”"}

/* ── Cards, forms, misc ──────────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line2); border-radius:var(--r); padding:24px 22px; box-shadow:var(--shadow)}
.formcard{
  background:var(--card); border-radius:var(--r-lg); padding:30px 26px;
  box-shadow:var(--shadow-lg); border:1px solid var(--line2);
  max-width:540px; margin:0 auto; text-align:left;
}
.field{margin-bottom:14px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; color:var(--ink)}
label .opt{font-weight:500; color:var(--faint)}
input,select,textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  padding:15px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--card2); transition:border-color .12s ease, background .12s ease;
}
select{appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B6B' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); background:#fff}
textarea{resize:vertical; min-height:80px}
.hp{position:absolute; left:-9999px}
.fineprint{font-size:12.5px; color:var(--faint); margin:14px 0 0; text-align:center; line-height:1.5}
.formstate{display:none; text-align:center; padding:18px 4px}
.formstate.on{display:block}
.tick{width:56px;height:56px;margin:0 auto 15px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800}
.formstate h3{font-size:21px; color:var(--accent-ink)}
.formstate p{color:var(--muted); margin:0 auto 18px; max-width:38ch; font-size:15.5px}
.err{color:var(--warn); font-size:14.5px; margin:12px 0 0; text-align:center; display:none}
.err.on{display:block}

/* ── Next step / upsell ──────────────────────────────────────────────── */
.nextband{background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 48%,var(--accent) 100%); color:#fff; text-align:center}
.nextband h2{color:#fff}
.nextband p{color:rgba(255,255,255,.9); max-width:50ch; margin:0 auto 28px; font-size:17.5px}
.nextband .btn+.btn{margin-top:12px}
.upsell{background:linear-gradient(150deg,#2A1C00 0%,#5A3D00 50%,#8A6000 100%); color:#fff; text-align:center; position:relative; overflow:hidden}
.upsell::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% -10%,rgba(240,180,41,.3),transparent 65%); pointer-events:none}
.upsell > .wrap{position:relative; z-index:1}
.upsell h2{color:#fff}
.upsell h2 em{font-style:normal; color:var(--gold-hot)}
.upsell p{color:rgba(255,255,255,.88); max-width:52ch; margin:0 auto 28px; font-size:17.5px}
.tag-gold{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#3A2600;background:var(--gold-hot);padding:7px 16px;border-radius:999px;margin-bottom:18px}

footer{background:#061E1B; color:rgba(255,255,255,.68); padding:44px 0 36px; font-size:14.5px; text-align:center}
footer a{color:rgba(255,255,255,.9)}
.footlinks{display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.footnote{margin:24px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.5); max-width:520px}

@media (max-width:640px){
  body{font-size:16px}
  section{padding:50px 0}
  .wrap{padding:0 16px}
  .row2{grid-template-columns:1fr}
  .formcard{padding:24px 19px; border-radius:var(--r)}
  .ex-head{padding:17px 17px 0} .ex-body{padding:15px 17px 19px}
  .step{font-size:12px; padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   TRAINING LOG
   Somebody halfway through a set is holding a phone with one hand, in a
   gym, possibly sweating. Every target here is big, the keypad is numeric,
   and nothing needs a "save" press — it writes as they type. The numbers
   are theirs and stay on their device.
   ═══════════════════════════════════════════════════════════════════════ */
.log{margin-top:18px; border-top:1px solid var(--line2); padding-top:16px}
.log-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px}
.log-h b{font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.log-last{font-size:12.5px; color:var(--accent-ink); background:var(--accent-soft); padding:5px 11px; border-radius:999px; font-weight:700}

.setrow{display:grid; grid-template-columns:52px 1fr 1fr 46px; gap:9px; align-items:center; margin-bottom:9px}
.setrow .n{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.setrow .wrapin{position:relative}
.setrow input{
  padding:13px 11px 13px 12px; font-size:16px; font-weight:700; text-align:center;
  border-radius:var(--r-sm); background:var(--card2); border:1.5px solid var(--line);
  -moz-appearance:textfield;
}
.setrow input::-webkit-outer-spin-button,.setrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.setrow input::placeholder{color:var(--grey,#B2AFAF); font-weight:600}
.setrow .unit{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:800; color:var(--faint); pointer-events:none; letter-spacing:.05em;
}
.setrow .tick{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--line);
  background:var(--card); color:var(--line); display:flex; align-items:center;
  justify-content:center; font-size:17px; font-weight:800; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  font-family:inherit; padding:0;
}
.setrow .tick:hover{border-color:var(--accent); color:var(--accent)}
.setrow.filled .tick{background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.06)}
.setrow.filled input{border-color:var(--accent-soft); background:var(--accent-soft)}

/* An exercise everybody has logged every set of gets a quiet green frame,
   so scrolling the page tells you where you are without reading a word. */
.ex{transition:border-color .2s ease, box-shadow .2s ease}
.ex.done{border-color:var(--mint); box-shadow:0 0 0 1px var(--mint), var(--shadow)}
.ex.done .ex-n{background:var(--accent); color:#fff}
.ex.done .ex-head h3::after{content:" ✓"; color:var(--accent)}

/* ── Session progress ────────────────────────────────────────────────── */
.sesh{
  position:sticky; top:48px; z-index:30; background:var(--card);
  border-bottom:1px solid var(--line2); padding:11px 0;
}
.sesh-in{max-width:var(--wrap); margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:14px}
.sesh-bar{flex:1; height:8px; border-radius:99px; background:var(--line2); overflow:hidden}
.sesh-fill{height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--mint)); transition:width .35s cubic-bezier(.4,0,.2,1)}
.sesh-txt{font-size:13px; font-weight:800; color:var(--accent-ink); white-space:nowrap; letter-spacing:.02em}
.sesh-reset{background:none;border:0;font-family:inherit;font-size:12.5px;color:var(--faint);cursor:pointer;text-decoration:underline;padding:4px}
.sesh-reset:hover{color:var(--warn)}

/* ── Finished ────────────────────────────────────────────────────────── */
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.finished{display:none; margin-top:26px; animation:pop .45s cubic-bezier(.34,1.4,.64,1) both}
.finished.on{display:block}
.finished .card{
  background:linear-gradient(150deg,var(--deep) 0%,var(--deep2) 50%,var(--accent) 100%);
  border:0; color:#fff; text-align:center; padding:34px 26px; border-radius:var(--r-lg);
}
.finished .mark{
  width:64px;height:64px;margin:0 auto 15px;border-radius:50%;background:var(--mint);
  color:var(--deep);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;
}
.finished h3{color:#fff; font-size:23px; margin-bottom:8px}
.finished p{color:rgba(255,255,255,.88); margin:0 auto 22px; max-width:38ch; font-size:16px}

/* ── Flare: cards arrive as you reach them, once, and never for anybody
      who has asked their device to stop moving things. ────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ex.reveal{animation:rise .5s cubic-bezier(.22,1,.36,1) both}
.phead h1{animation:rise .55s cubic-bezier(.22,1,.36,1) both}
.phead p{animation:rise .55s .08s cubic-bezier(.22,1,.36,1) both}

@media (max-width:640px){
  .setrow{grid-template-columns:44px 1fr 1fr 42px; gap:7px}
  .setrow input{padding:12px 8px; font-size:15.5px}
  .setrow .tick{width:36px;height:36px}
  .sesh{top:44px}
}
@media (prefers-reduced-motion:reduce){
  .ex.reveal,.phead h1,.phead p,.finished{animation:none}
}

/* A video slot a human has not yet matched to its exercise name. Loud on
   purpose: this must never reach a golfer without somebody checking it. */
.unconf{
  margin:12px auto 0; max-width:44ch; text-align:center;
  font-size:13px; font-weight:700; color:#8A6000;
  background:var(--gold-soft); border:1px dashed var(--gold);
  padding:9px 14px; border-radius:var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   THE PROGRAM PAGE
   One page, one link, five tabs. Replaces the four separate pages: a lead
   bookmarks this once and it is the whole program.
   ═══════════════════════════════════════════════════════════════════════ */
.hello{background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 46%,var(--accent) 100%); color:#fff; padding:34px 0 30px; text-align:center}
.hello h1{font-size:clamp(26px,5vw,40px); margin:0 0 8px; text-shadow:0 2px 22px rgba(0,0,0,.3)}
.hello p{color:rgba(255,255,255,.88); margin:0; font-size:16px}
.hello .eyebrow{background:rgba(145,230,220,.16); color:#BFF3EC}

.tabs{background:var(--card); border-bottom:1px solid var(--line2); position:sticky; top:0; z-index:40}
.tabs-in{display:flex; gap:5px; max-width:var(--wrap); margin:0 auto; padding:9px 14px; overflow-x:auto; scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:800; letter-spacing:.01em;
  padding:10px 15px; border-radius:999px; border:0; background:transparent;
  color:var(--faint); white-space:nowrap; transition:background .14s ease, color .14s ease;
}
.tab:hover:not(:disabled){background:var(--card2); color:var(--ink)}
.tab .dot{
  width:19px;height:19px;border-radius:50%;flex:none;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line); color:var(--faint); background:var(--card);
}
.tab[aria-selected="true"]{background:var(--accent-soft); color:var(--accent-ink)}
.tab[aria-selected="true"] .dot{border-color:var(--accent); color:var(--accent-ink)}
.tab.done{color:var(--accent-ink)}
.tab.done .dot{background:var(--accent); border-color:var(--accent); color:#fff}
.tab:disabled{opacity:.42; cursor:not-allowed}
.tab .lk{font-size:12px; opacity:.75}

.panel{display:none}
.panel.on{display:block}

/* A week that has not opened yet. Says when, so it reads as a schedule
   rather than as something broken. */
.lockedpanel{text-align:center; padding:60px 20px}
.lockedpanel .ring{
  width:76px;height:76px;margin:0 auto 20px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:32px;
}
.lockedpanel h2{margin-bottom:10px}
.lockedpanel p{color:var(--muted); max-width:42ch; margin:0 auto 8px; font-size:16.5px}
.lockedpanel .when{
  display:inline-block; margin-top:18px; font-weight:800; font-size:15px;
  color:var(--accent-ink); background:var(--accent-soft); padding:12px 22px; border-radius:999px;
}

/* Finish everything and this is the last tab. */
.trophy{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:var(--gold-hot);color:#3A2600;display:flex;align-items:center;justify-content:center;font-size:44px}
.wkgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:560px; margin:26px auto 0}
@media (max-width:600px){ .wkgrid{grid-template-columns:1fr} }
.wkcard{background:var(--card); border:1px solid var(--line2); border-radius:var(--r); padding:16px; text-align:center}
.wkcard b{display:block; font-size:14px; margin-bottom:4px}
.wkcard span{font-size:13px; color:var(--muted)}
.wkcard.full{border-color:var(--mint); background:var(--accent-soft)}

/* A locked week reads as "not yet", not as "broken". Dimmed, but the
   cursor still says you may look. */
.tab.locked{opacity:.55}
.tab.locked:hover{opacity:.8; background:var(--card2)}

/* ── Welcome ─────────────────────────────────────────────────────────────
   Shown once, on the first visit. Somebody arriving from an email lands in
   the middle of a workout with no idea what they are holding, and a page
   that explains itself once is worth more than one that never does. It is
   dismissible and reachable again from the header, so it never becomes the
   thing standing between a returning golfer and their session. */
.welcome{
  background:var(--card); border-bottom:1px solid var(--line2);
  padding:34px 0 30px;
}
.welcome-card{
  max-width:620px; margin:0 auto; background:var(--card2);
  border:1px solid var(--line2); border-radius:var(--r-lg); padding:28px 26px;
}
.welcome h2{font-size:24px; margin:0 0 6px; text-align:center}
.welcome .sub{color:var(--muted); text-align:center; margin:0 0 22px; font-size:15.5px}
.steps{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:14px}
.steps li{display:flex; gap:13px; align-items:flex-start}
.steps .num{
  width:27px;height:27px;border-radius:50%;flex:none;background:var(--accent);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.steps b{display:block; font-size:15.5px; margin-bottom:1px}
.steps span{font-size:14.5px; color:var(--muted); line-height:1.5}
.welcome .dates{
  background:var(--accent-soft); border-radius:var(--r-sm); padding:13px 16px;
  font-size:14px; color:var(--accent-ink); text-align:center; margin:0 0 20px; line-height:1.6;
}
.howlink{
  background:none;border:0;font-family:inherit;cursor:pointer;
  color:rgba(255,255,255,.82); font-size:13px; text-decoration:underline;
  padding:6px; margin-top:10px;
}
.howlink:hover{color:#fff}
@media (max-width:640px){ .welcome-card{padding:22px 18px} }

/* A short health warning where somebody actually is, not only on a page
   they will never open. Amber rather than red: this is "read this", not
   "something is broken". */
.healthnote{
  background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r-sm); padding:13px 16px; margin:16px 0 0;
  font-size:13.5px; line-height:1.55; color:#6B4E10; text-align:left;
}
.healthnote a{color:#6B4E10; font-weight:700}
.healthnote b{display:block; margin-bottom:3px}

/* ═══════════════════════════════════════════════════════════════════════
   GOLD
   The live offers page reads as deep teal with gold doing the pointing:
   gold on the one word that matters, mint on the headings. The funnel had
   drifted teal-on-teal, so these pull it back to the same palette. Gold is
   for emphasis only — used everywhere it stops meaning anything.
   ═══════════════════════════════════════════════════════════════════════ */

/* Progress reads as gold filling up, which is the thing you want to watch. */
.sesh-fill{background:linear-gradient(90deg,var(--gold),var(--gold-hot))}
.sesh-txt{color:var(--gold)}

/* The tab you are on, and the ones you have finished. */
.tab[aria-selected="true"]{background:var(--gold-soft); color:#6B4E10}
.tab[aria-selected="true"] .dot{border-color:var(--gold-hot); color:#6B4E10; background:#fff}
.tab.done{color:var(--gold)}
.tab.done .dot{background:var(--gold-hot); border-color:var(--gold-hot); color:#3A2600}

/* Section headers: mint heading on deep teal, same as the hero. */
.phead h1{color:#fff}
.phead .eyebrow{background:rgba(240,180,41,.18); color:var(--gold-hot)}
.hello .eyebrow{background:rgba(240,180,41,.18); color:var(--gold-hot)}

/* A finished exercise gets the gold frame rather than the mint one, so it
   matches the bar that is tracking it. */
.ex.done{border-color:var(--gold-hot); box-shadow:0 0 0 1px var(--gold-hot), var(--shadow)}
.ex.done .ex-n{background:var(--gold-hot); color:#3A2600}
.ex.done .ex-head h3::after{color:var(--gold)}
.setrow.filled .tick{background:var(--gold-hot); border-color:var(--gold-hot); color:#3A2600}
.setrow.filled input{border-color:var(--gold-soft); background:var(--gold-soft)}
.log-last{background:var(--gold-soft); color:#6B4E10}

/* Numbered steps in the welcome, and the exercise numbers, in gold. */
.steps .num{background:var(--gold-hot); color:#3A2600}
.welcome .dates{background:var(--gold-soft); color:#6B4E10}

/* The finish line. */
.finished .mark{background:var(--gold-hot); color:#3A2600}
.wkcard.full{border-color:var(--gold-hot); background:var(--gold-soft)}
.wkcard.full b{color:#6B4E10}

/* Locked weeks keep the gold padlock treatment rather than teal. */
.lockedpanel .ring{background:var(--gold-soft); color:var(--gold)}
.lockedpanel .when{background:var(--gold-soft); color:#6B4E10}

/* ═══════════════════════════════════════════════════════════════════════
   PHOTOGRAPHY
   Every section header carries a real photo of Josh working, behind a
   dark gradient so the heading stays readable. Same treatment as the
   offers hero: the picture does the selling, the overlay does the
   legibility, and nothing is a stock image.
   ═══════════════════════════════════════════════════════════════════════ */
.phead{position:relative; isolation:isolate; overflow:hidden}
.phead-photo{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 40%;
}
.phead-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,30,27,.80) 0%,rgba(6,30,27,.68) 45%,rgba(6,30,27,.92) 100%),
    radial-gradient(110% 70% at 50% 0%,rgba(0,0,0,0) 35%,rgba(6,30,27,.55) 100%);
}
.hello{position:relative; isolation:isolate; overflow:hidden}
.hello-photo{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 38%}
.hello-veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,30,27,.82) 0%,rgba(6,30,27,.70) 50%,rgba(6,30,27,.94) 100%);
}

/* The wordmark, so a page somebody opened from an email says whose it is. */
.brandbar{display:flex; justify-content:center; margin-bottom:18px}
.brandbar img{height:38px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
.brandbar .fallback{font-weight:800; letter-spacing:-.02em; font-size:19px; color:#fff}

/* A strip of real training photos, so the page is not only video tiles. */
.shots{columns:3; column-gap:12px; margin-top:30px}
.shots figure{margin:0 0 12px; break-inside:avoid}
.shots img{width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow); background:var(--line2)}
@media (max-width:860px){ .shots{columns:2} }
@media (max-width:520px){ .shots{columns:1} }

.bandphoto{
  max-width:720px; margin:30px auto 0; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.bandphoto img{width:100%; height:auto; display:block}

/* Every eyebrow gold, so a golfer moving from the landing page into the
   program does not feel like they changed website. */
.eyebrow{background:var(--gold-soft); color:#6B4E10}
.incl .ico, .clinic .ico{background:var(--gold-soft); color:#6B4E10}
.tpi{background:var(--gold-soft); color:#6B4E10}
.hero .eyebrow, .phead .eyebrow, .hello .eyebrow{
  background:rgba(240,180,41,.18); color:var(--gold-hot);
}

/* ═══════════════════════════════════════════════════════════════════════
   PINNED NAV
   The tabs and the progress bar were two separate sticky elements, with
   the bar guessing the tab strip's height with a hardcoded top offset. On
   a narrow phone the tabs wrap taller than the guess and the two overlap.
   One sticky wrapper holds both, so they move as the single bar they look
   like and there is no offset to keep in sync.
   ═══════════════════════════════════════════════════════════════════════ */
.pinned{
  position:sticky; top:0; z-index:45;
  background:var(--card); border-bottom:1px solid var(--line2);
  box-shadow:0 1px 0 rgba(66,70,73,.04), 0 6px 18px -12px rgba(66,70,73,.35);
}
.pinned .tabs{position:static; border-bottom:1px solid var(--line2); box-shadow:none}
.pinned .sesh{position:static; border-bottom:0; padding:9px 0}

/* ── Ask Josh ────────────────────────────────────────────────────────────
   A golfer stuck on an exercise should be one tap from asking, not hunting
   for a contact page. Sits out of the way bottom-right, and collapses to
   the icon on a phone so it never covers what they are reading. */
.askjosh{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--deep); color:#fff; text-decoration:none;
  font-family:inherit; font-size:14.5px; font-weight:800; letter-spacing:.01em;
  padding:13px 20px 13px 15px; border-radius:999px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .14s ease, background .14s ease;
}
.askjosh:hover{transform:translateY(-2px); background:var(--deep2)}
.askjosh .ig{
  width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(125deg,#F9CE34,#EE2A7B 52%,#6228D7); color:#fff;
}
.askjosh .lbl{display:flex; flex-direction:column; line-height:1.25}
.askjosh .lbl b{font-size:14.5px}
.askjosh .lbl span{font-size:11.5px; font-weight:600; color:rgba(255,255,255,.72)}
@media (max-width:600px){
  .askjosh{right:12px; bottom:12px; padding:11px; gap:0}
  .askjosh .lbl{display:none}
  .askjosh .ig{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){ .askjosh{transition:none} }

/* ── Tab strip height ────────────────────────────────────────────────────
   .tabs-in is a flex row and flex defaults to align-items:stretch, so each
   tab grew to whatever the tallest thing in the row was instead of sizing
   to its own content. With border-radius:999px on a tall box the highlight
   renders as a big circle rather than a pill, which is what it looked like
   on a phone. Centring the row makes each tab its own natural height. */
.tabs-in{align-items:center}
.tab{flex:0 0 auto; align-self:center; min-height:0}

/* ── Ask Josh, with words ────────────────────────────────────────────────
   The label used to collapse to a bare Instagram glyph on a phone, which
   is where nearly everyone reads this. An icon on its own does not say
   "ask a question", so the words stay at every width and the pill just
   gets tighter. */
@media (max-width:600px){
  .askjosh{right:12px; bottom:12px; padding:9px 16px 9px 10px; gap:9px}
  .askjosh .lbl{display:flex}
  .askjosh .lbl b{font-size:13.5px}
  .askjosh .lbl span{font-size:10.5px}
  .askjosh .ig{width:27px;height:27px}
}

/* Noticed once, then left alone. Fires a few seconds after landing, when
   somebody has started reading and a movement in the corner reads as an
   offer of help rather than as another thing shouting on load. */
@keyframes nudge{
  0%   {transform:none}
  12%  {transform:scale(1.09) translateY(-4px)}
  24%  {transform:scale(1) translateY(0)}
  36%  {transform:scale(1.05) translateY(-2px)}
  48%  {transform:none}
  100% {transform:none}
}
.askjosh.nudge{animation:nudge 1.8s cubic-bezier(.34,1.3,.64,1) 1}
@media (prefers-reduced-motion:reduce){ .askjosh.nudge{animation:none} }

/* ── Video framing ───────────────────────────────────────────────────────
   Every clip Josh has filmed is portrait 9:16, intros included. The intro
   shell was 16:9, so a tall video in a wide box was being cropped to a
   zoomed-in middle: his forehead and chin cut off, and on an exercise clip
   it would hide the very movement the video exists to show.

   The intro shell is portrait now, and object-fit is `contain` rather than
   `cover` everywhere. contain never crops — if a clip ever arrives in a
   different shape it letterboxes against the dark shell instead of quietly
   hiding part of the frame. For a demonstration video, showing the whole
   picture matters more than filling the box. */
.vshell video{object-fit:contain}
.vshell.wide{
  width:min(340px,82vw); aspect-ratio:9/16;
  max-height:min(600px,68vh); margin-inline:auto;
}
@media (min-width:760px){
  .vshell.wide{width:min(380px,60vw); max-height:min(660px,72vh)}
}

/* ── Finishing a workout ─────────────────────────────────────────────────
   Sits under the last exercise. The sheet you type into is today's session;
   saving banks it and clears the boxes, so next week starts empty with last
   week's numbers shown beside each exercise to beat. */
.finishbar{margin-top:26px; display:flex; flex-direction:column; gap:14px}
.finishcard{
  background:var(--card); border:1px solid var(--line2); border-radius:var(--r-lg);
  padding:24px 22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px; text-align:center;
}
.finishcard b{font-size:18px; letter-spacing:-.01em}
.finishcard > span{font-size:14.5px; color:var(--muted); max-width:42ch; margin:0 auto 6px}
.finishcard .fn{font-size:12.5px; color:var(--faint); margin:0}

.saved{
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--mint); border-radius:var(--r);
  padding:14px 18px; font-size:15px; font-weight:700; text-align:center;
}

.pastlist{
  background:var(--card2); border:1px solid var(--line2); border-radius:var(--r);
  padding:16px 18px; display:flex; flex-direction:column; gap:9px;
}
.pastlist b{
  font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.pastrow{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:14.5px; color:var(--ink); padding:7px 0; border-bottom:1px solid var(--line2);
}
.pastrow:last-child{border-bottom:0; padding-bottom:0}
.pastrow .pn{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.finishcard .btn:disabled{opacity:.4; cursor:not-allowed; transform:none}