/* ============================================================
   RUN CLUB ACADEMY — the front doors (landing pages) + thank-you + LV page
   Loads after theme.css and uses its tokens. Catch-page rules: centered copy,
   no header, one supporting block, lifted button with the pointer, capture
   after the value is promised, result on the thank-you page. Clean-room words
   never appear above the fold. Spacing ladder only.
   ============================================================ */
html:has(body.lp){overflow-x:clip}
body.lp{overflow-x:clip}
.lp .wrap{max-width:1180px}
/* ---------- hero: full-bleed photograph, centered copy, always moving ----
   Standard §1b (a landing page is centered and points at the action) and
   §2e-i (every hero carries a moving background; Ken Burns over a still is
   the house technique, never a background video). The drawn line motif in
   bg.js sits on the scrim, under the copy. ---------------------------- */
.lp-hero{position:relative;display:grid;isolation:isolate;min-height:min(88svh,880px);background:var(--surface);padding:0}
.hero-bg{grid-area:1/1;position:relative;overflow:hidden}
.hero-bg picture{display:contents}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-bg .kb{animation:kenburns 32s ease-in-out infinite alternate;will-change:transform}
.scrim-c,.scrim-b{position:absolute;inset:0;pointer-events:none}
/* centre-weighted, because the copy is centred: darkest where the type sits,
   clearing at the edges so the photograph is still a photograph */
.scrim-c{background:radial-gradient(88% 84% at 50% 46%,
  rgba(10,13,11,.66) 0%,rgba(10,13,11,.60) 40%,rgba(10,13,11,.28) 76%,rgba(10,13,11,0) 100%)}
.scrim-b{background:linear-gradient(180deg,
  rgba(10,13,11,.32) 0%,rgba(10,13,11,0) 26%,rgba(10,13,11,.04) 62%,rgba(10,13,11,.88) 100%),
  linear-gradient(rgba(10,13,11,.38),rgba(10,13,11,.38))}
/* the flat veil, and the small black drop shadow on everything sitting on the photo */
.lp-copy .eyebrow,.lp-copy h1,.lp-copy .lead,.lp-copy .fine,.trust li{
  text-shadow:0 0 1px rgba(0,0,0,.70),0 1px 2px rgba(0,0,0,.66),0 2px 12px rgba(0,0,0,.45)}
.hero-bg .amb{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-copy{grid-area:1/1;position:relative;z-index:2;display:flex;align-items:center;
  justify-content:center;padding:96px 32px;text-align:center}
.lp-copy>div{max-width:740px;width:100%}
.lp-copy .eyebrow{margin-bottom:24px}
.lp-copy h1{font-size:clamp(44px,5.6vw,80px);line-height:.9}
.lp-copy .lead{margin:24px auto 0;color:var(--ink);opacity:.88;max-width:46ch}
.lp-cta{margin:48px auto 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.lp-cta .btn-wrap{width:min(100%,460px)}
.lp-cta .btn{width:100%;justify-content:space-between;padding:20px 28px}
.lp-cta .btn .lab{align-items:flex-start}
.lp .btn .lab strong{font-size:19px;font-weight:800;letter-spacing:.03em;line-height:1.2}
.lp .btn .lab small{font-size:12.5px;font-weight:600;opacity:.86;letter-spacing:.02em}

/* the drawn ring lives on the hero button; keep it off the trust row */
.lp-cta .btn-ring{inset:-13px -20px}
/* trust marks — drawn, not words in a bubble */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin:68px 0 0;padding:0;list-style:none}
.trust li{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,246,242,.80)}
.trust svg{width:22px;height:22px;flex:0 0 auto}

/* ---------- buttons: label centred, and a pointer you cannot miss ----------
   The house pointer is 40px; the owner asked for it much larger on these
   pages, so it is 76px here (66px on a phone, where the button is full width). */
.lp .btn{text-align:center;justify-content:center}
.lp .btn .lab{align-items:center;text-align:center}
.lp-cta .btn,.cap .btn{justify-content:center;gap:14px}
.lp .tap-finger{font-size:76px;bottom:-30px;right:-40px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
@keyframes tapBig{
  0%,100%{transform:translateY(14px) rotate(-12deg) scale(1)}
  50%    {transform:translateY(-22px) rotate(-12deg) scale(1.08)}
}
.lp .tap-finger{animation:tapBig 1.25s ease-in-out infinite}
/* ---------- the one supporting block: who is asking ---------- */
.auth{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.auth .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:24px;padding-top:72px;padding-bottom:72px;max-width:760px}
.auth img{width:180px;height:225px;object-fit:cover;object-position:50% 20%;border-radius:var(--r-s)}
.auth h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 16px}
.auth p{color:var(--muted);max-width:56ch;margin:0 auto}
.rules{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.rules li{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:var(--accent);border:1px solid var(--line-strong);border-radius:var(--r-p);padding:8px 14px}
/* ---------- footer ---------- */
.lp-foot{padding:48px 0 64px;font-size:13px;color:var(--muted)}
.lp-foot .wrap{display:grid;gap:12px;max-width:820px;text-align:center}
.lp-foot a{color:var(--muted)}
.lp-foot img{height:40px;width:auto;margin:0 auto 12px}
/* ---------- the tool: a sheet over the page ---------- */
.tool{position:fixed;inset:0;z-index:100;display:none}
.tool.open{display:block}
.tool-bg{position:absolute;inset:0;background:rgba(10,13,11,.86)}
.tool-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 32px));max-height:calc(100svh - 48px);overflow:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-m);padding:32px}
.tool-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.tool-x:hover{color:var(--ink)}
.prog{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin:8px 48px 24px 0}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease-out}
.qn{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.qt{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,32px);line-height:1;color:var(--ink);margin:0 0 20px;text-wrap:balance}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--body);font-size:17px;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-s);padding:16px 18px;min-height:56px;cursor:pointer;transition:border-color .12s ease-out,transform .12s ease-out,background .12s ease-out}
.opt b{font-family:var(--disp);font-style:italic;font-weight:800;color:var(--accent);font-size:14px;letter-spacing:.06em;width:20px;flex:0 0 auto}
.opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.opt.sel{border-color:var(--accent);background:rgba(79,243,31,.08)}
.txt{width:100%;font-family:var(--body);font-size:17px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-s);padding:16px 18px;min-height:56px}
.txt:focus{outline:none;border-color:var(--accent)}
.tool-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.tool-nav .back{background:transparent;border:0;color:var(--muted);font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;padding:12px 0;min-height:44px}
.tool-nav .back:hover{color:var(--ink)}
.tool-nav .btn{padding:16px 24px;min-height:52px;font-size:16px}
.fade{animation:qin .3s ease-out}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* capture step */
.cap h3{font-size:clamp(26px,3.2vw,34px);margin:0 0 8px}
.cap p{color:var(--muted);margin:0 0 20px}
.cap .field{display:grid;gap:6px;margin-bottom:12px}
.cap label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cap .btn{width:100%;margin-top:8px;justify-content:space-between}
.cap .msg{font-size:14px;color:var(--ink);margin:12px 0 0;min-height:1.2em}
.cap .msg.err{color:#FF8A8A}
.cap .fine{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
/* ---------- the thank-you page ---------- */
.ty{padding:96px 0 64px;text-align:center}
.ty .wrap{max-width:820px}
.ring{width:172px;height:172px;margin:0 auto 24px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .track{stroke:var(--line)}
.ring .val{stroke:var(--accent);transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font-family:var(--disp);font-style:italic;font-weight:900;font-size:52px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.ring b small{font-family:var(--body);font-style:normal;font-size:12px;letter-spacing:.16em;font-weight:700;display:block;color:var(--muted);margin-top:4px}
.ty h1{font-size:clamp(40px,6vw,72px)}
.ty .lead{margin:24px auto 0;color:var(--ink);opacity:.86;max-width:56ch}
.verdict{margin:32px auto 0;max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:24px 28px;text-align:left}
.verdict h3{font-size:25px;margin:0 0 8px}
.verdict p{color:var(--muted);margin:0 0 10px;font-size:16px}
.verdict p:last-child{margin:0}
.verdict .named{color:var(--ink)}
.ty-step{padding:64px 0;border-top:1px solid var(--line)}
.ty-step .wrap{max-width:960px}
.ty-step h2{font-size:clamp(34px,4.6vw,56px);margin-bottom:12px;text-align:center}
.ty-step .lead{text-align:center;margin:0 auto 32px}
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;min-height:560px;position:relative}
.cal iframe{width:100%;height:760px;border:0;display:block;background:#fff}
.cal-ph{padding:48px 32px;text-align:center}
.cal-ph h3{font-size:26px;margin-bottom:12px}
.cal-ph p{color:var(--muted);max-width:44ch;margin:0 auto 24px}
.after{margin:32px auto 0;text-align:center;font-size:15px;color:var(--muted)}
.after a{color:var(--ink)}
/* ---------- the LV page ---------- */
.lvp{display:grid;grid-template-columns:5fr 6fr;min-height:100svh}
.lvp-photo{position:relative;overflow:hidden;background:var(--card)}
.lvp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lvp-copy{display:flex;align-items:center;padding:96px 64px}
.lvp-copy>div{max-width:520px}
.lvp-copy h1{font-size:clamp(64px,10vw,140px);line-height:.85;margin-bottom:24px}
.lvp-copy p{color:var(--muted);margin:0 0 16px}
.links{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px}
.links a{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-s);padding:18px 20px;min-height:56px;font-weight:700;transition:border-color .12s ease-out,transform .12s ease-out}
.links a:hover{border-color:var(--accent);transform:translateY(-1px)}
.links a span{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.booked{background:var(--accent);color:var(--surface);border-radius:var(--r-s);padding:20px 24px;margin:0 0 24px}
.booked b{display:block;font-family:var(--disp);font-style:italic;font-weight:900;text-transform:uppercase;font-size:24px;line-height:1;margin-bottom:8px}
.booked p{color:var(--surface);opacity:.85;margin:0;font-size:15px}
/* the ambient motif behind a page with no photo hero */
.amb-fixed{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.lp>section,body.lp>footer,body.lp>.lvp{position:relative;z-index:1}
/* confetti canvas */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90}
/* ---------- responsive ---------- */
@media(max-width:960px){
  .lvp{grid-template-columns:1fr}
  .lvp-photo{min-height:56svh;position:relative}
  .lvp-copy{padding:48px 24px}
}
@media(max-width:760px){
  .lp-hero{min-height:92svh}
  .hero-bg img{object-position:50% 34%}
  /* on a phone the copy fills the frame, so both washes hold all the way down */
  .scrim-c{background:radial-gradient(124% 78% at 50% 48%,
    rgba(10,13,11,.74) 0%,rgba(10,13,11,.68) 46%,rgba(10,13,11,.38) 100%)}
  .scrim-b{background:linear-gradient(180deg,
    rgba(10,13,11,.44) 0%,rgba(10,13,11,.14) 22%,rgba(10,13,11,.20) 58%,rgba(10,13,11,.90) 100%)}
  .lp-copy{padding:56px 20px}
  .lp-copy h1{font-size:clamp(38px,11vw,52px)}
  .lp-copy .eyebrow{margin-bottom:16px}
  .lp-copy .lead{margin-top:16px;font-size:17px}
  .lp-cta{margin-top:32px}
  .lp-cta .btn-wrap{width:100%}
  .trust{margin-top:52px;gap:10px 16px}
  .lp .tap-finger{font-size:66px;bottom:-24px;right:-6px}
  .trust li{font-size:12px}
  .tool-card{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:calc(100svh - 24px);border-radius:16px 16px 0 0;padding:24px 20px 32px}
  .ty{padding:64px 0 48px}
  .cal iframe{height:640px}
}
@media(prefers-reduced-motion:reduce){.fade{animation:none}.ring .val{transition:none}}