/* Abode Fitness landing page (abodefitness.co.uk; Matt, 4 Nov 2026; mockups/landing-page.html).
   Colours come only from tokens.css (Abode's tokens, plus the --lp-* block for shadows and the example trainer).
   Served by lib/landing.js. Kept apart from app.css so the app never loads it. */

.lp{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp a{color:inherit}
.lp [id]{scroll-margin-top:16px}
.lp :where(h1,h2,h3,h4,p){margin:0}
.lp-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.lp-skip{position:absolute;left:-999px;top:8px;background:var(--color-surface);padding:8px 12px;border-radius:10px;z-index:9}
.lp-skip:focus{left:8px}
.lp :focus-visible{outline:2px solid var(--color-champagne);outline-offset:3px;border-radius:6px}

/* Example trainer looks (data-look). The default is Phoenix Fitness: ember on sand. */
[data-look]{--r-bg:var(--lp-sand-bg);--r-surface:var(--lp-sand-surface);--r-text:var(--lp-ink);--r-muted:var(--lp-ink-muted);--r-line:var(--lp-sand-line);--r-accent:var(--lp-ember);--r-on-accent:var(--lp-white)}
[data-look="midnight"]{--r-bg:var(--lp-midnight-bg);--r-surface:var(--lp-midnight-surface);--r-text:var(--lp-ivory);--r-muted:var(--lp-ivory-muted);--r-line:var(--lp-ivory-line);--r-accent:var(--lp-coral);--r-on-accent:var(--lp-midnight-bg)}
[data-look="forest"]{--r-bg:var(--lp-forest-bg);--r-surface:var(--lp-forest-surface);--r-text:var(--lp-ivory);--r-muted:var(--lp-ivory-muted);--r-line:var(--lp-ivory-line);--r-accent:var(--lp-mint);--r-on-accent:var(--lp-forest-bg)}
[data-look="limestone"]{--r-bg:var(--lp-limestone-bg);--r-surface:var(--lp-white);--r-text:var(--lp-ink);--r-muted:var(--lp-ink-muted);--r-line:var(--lp-limestone-line);--r-accent:var(--lp-berry);--r-on-accent:var(--lp-white)}

/* Buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;font:500 17px/1 var(--font-family);text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.lp-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp .lp-btn--abode{background:var(--btn-primary-bg);color:var(--color-text)}
.lp .lp-btn--abode:hover{background:var(--btn-primary-bg-hover)}
.lp .lp-btn--ink{background:var(--r-text);color:var(--r-bg)}
.lp .lp-btn--quiet{border-color:var(--color-border-strong);color:var(--color-text);background:transparent}
.lp-btn--quiet:hover{border-color:var(--color-champagne)}

/* Nav */
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.lp-nav__logo svg{display:block;height:28px;width:auto}
.lp-nav__links{display:flex;align-items:center;gap:4px}
.lp-nav__links a{text-decoration:none;font-size:15px;color:var(--color-text-muted);padding:8px 12px;border-radius:10px}
.lp-nav__links a:hover{color:var(--color-text)}
.lp-menu{display:none;position:relative}
.lp-menu summary{list-style:none;cursor:pointer;padding:8px 14px;border-radius:10px;border:1px solid var(--color-border-strong);font-size:15px;color:var(--color-text)}
.lp-menu summary::-webkit-details-marker{display:none}
.lp-menu[open] summary{border-color:var(--color-champagne)}
.lp-menu__panel{position:absolute;right:0;top:calc(100% + 8px);z-index:10;min-width:200px;padding:8px;border-radius:16px;background:var(--color-surface);border:1px solid var(--color-border-strong);box-shadow:0 24px 48px -20px var(--lp-shadow)}
.lp-menu__panel a{display:block;padding:12px 14px;border-radius:10px;font-size:17px;color:var(--color-text)!important}
.lp-menu__panel a:hover{background:var(--color-bg)}
.lp-nav__links a.lp-signin{color:var(--color-text);border:1px solid var(--color-border-strong);margin-left:8px;padding:8px 16px}

/* Hero */
.lp-hero{padding:clamp(28px,6vh,72px) 0 clamp(64px,8vw,112px);text-align:center}
.lp-hero h1{font-weight:500;font-size:clamp(42px,6.2vw,84px);line-height:1.02;letter-spacing:-.025em}
.lp-hero .lp-lede{margin:22px auto 0;max-width:46ch;font-size:clamp(17px,1.4vw,20px);color:var(--color-text-muted)}
.lp-jump{display:none}
.lp-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,64px);text-align:left}
.door{position:relative;display:flex;flex-direction:column;border-radius:28px;padding:clamp(24px,3vw,40px);overflow:hidden;container-type:inline-size}
.door--me{background:var(--color-surface);border:1px solid var(--color-border)}
.door--pro{background:var(--r-bg);color:var(--r-text);transition:background-color .5s ease,color .5s ease}
.door__title{font-weight:500;font-size:clamp(30px,10cqi,56px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.ticks{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
.ticks svg{width:20px;height:20px;margin-top:3px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.door--me .ticks svg{stroke:var(--color-champagne)}
.door--pro .ticks svg{stroke:var(--r-accent)}
.door__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.door__line{flex-basis:100%;font-size:15px;line-height:1.45}
.door--me .door__line{color:var(--color-text-muted)}
.door--pro .door__line{color:var(--r-muted)}
.stage{position:relative;height:392px;margin-top:36px}

/* Personal: a set being logged */
.log{position:absolute;left:0;top:0;width:min(380px,68%);background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:22px;padding:20px;box-shadow:0 40px 80px -36px var(--lp-shadow)}
.log__ex{font-size:20px;font-weight:500;line-height:1.2}
.log__ex small{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--color-text-muted)}
.rows{display:grid;grid-template-columns:18px auto 1fr;gap:10px 14px;align-items:center;margin-top:16px}
.rows .hd{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.rows .n,.rows .prev{color:var(--color-text-muted);font-size:15px;white-space:nowrap}
.rows .n{text-align:center}
.today{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--color-border-strong);border-radius:12px;padding:8px 12px;font-size:17px;font-weight:500;white-space:nowrap}
.today--done{border-color:var(--accent-mark);background:var(--accent-fill)}
.today--done::after{content:"✓";font-size:15px;color:var(--color-success)}
.today--now{border-color:var(--color-champagne)}
.caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--color-champagne);animation:lp-blink 1s steps(1) infinite}
@keyframes lp-blink{50%{opacity:0}}
.sugg{margin-top:14px;padding:11px 13px;border-radius:12px;background:var(--accent-fill);border:1px solid var(--color-border);font-size:14px;line-height:1.45;color:var(--color-text-muted)}
.sugg b{font-weight:500;color:var(--color-text)}
.timer{position:absolute;right:0;top:64px;width:160px;padding:16px 18px;border-radius:20px;background:var(--success-surface);border:1px solid transparent;box-shadow:0 30px 60px -28px var(--lp-shadow)}
.timer small{display:block;font-size:13px;color:var(--color-text-muted)}
.timer b{display:block;margin-top:4px;font-size:42px;font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.timer i{display:block;height:4px;margin-top:12px;border-radius:4px;background:var(--success-bar);transform-origin:left;transition:transform 1s linear}

/* Trainers: a client's app in Phoenix Fitness's brand */
.client{position:absolute;left:0;top:0;width:min(400px,80%);background:var(--r-surface);border:1px solid var(--r-line);border-radius:22px;overflow:hidden;color:var(--r-text);box-shadow:0 40px 80px -40px var(--lp-shadow-soft);transition:background-color .5s ease,border-color .5s ease,color .5s ease}
.pband{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--r-accent);color:var(--r-on-accent);transition:background-color .5s ease,color .5s ease}
.plogo{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--lp-on-accent-tint);box-shadow:inset 0 0 0 1px var(--lp-on-accent-edge)}
.plogo svg{width:25px;height:auto;display:block}
.pword{font-weight:500;font-size:18px;letter-spacing:.24em;line-height:1;text-transform:uppercase}
.pword em{display:block;margin-top:5px;font-style:normal;font-weight:400;font-size:10px;letter-spacing:.6em;opacity:.85}
.client__body{padding:16px 20px 18px}
.hello{font-size:14px;color:var(--r-muted)}
.hello b{font-weight:500;color:var(--r-text)}
.wk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:14px 16px;border:1px solid var(--r-line);border-radius:16px}
.wk b{display:block;font-size:20px;font-weight:500;line-height:1.15}
.wk small{display:block;margin-top:2px;font-size:13px;color:var(--r-muted)}
.wk .go{flex:none;padding:10px 18px;border-radius:12px;font-weight:500;background:var(--r-accent);color:var(--r-on-accent)}
.ci{display:flex;justify-content:space-between;margin-top:10px;padding:11px 14px;border-radius:12px;background:var(--r-bg);font-size:14px}
.ci span:first-child{color:var(--r-muted)}
.powered{margin-top:14px;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--r-muted)}
.swatches{position:absolute;right:0;bottom:0;padding:12px 14px;border-radius:18px;background:var(--r-surface);border:1px solid var(--r-line);box-shadow:0 30px 60px -30px var(--lp-shadow-soft)}
.swatches p{margin:0 0 8px;font-size:12px;color:var(--r-muted)}
.swatches div{display:flex;gap:8px}
.sw{position:relative;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--r-bg);box-shadow:inset 0 0 0 1px var(--r-line)}
.sw::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--r-accent)}
.sw[aria-pressed="true"]{outline:2px solid var(--r-text);outline-offset:2px}
.swatches .sw{color:inherit}

/* Sections */
.lp-section{padding:clamp(56px,7vw,104px) 0}
.lp-section--brand{background:var(--r-bg);color:var(--r-text)}
.lp-title{font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.02em;text-align:center}
.lp-sub{margin:16px auto 0;max-width:52ch;text-align:center;font-size:19px;color:var(--color-text-muted)}
.lp-section--brand .lp-sub{color:var(--r-muted)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;margin-top:clamp(48px,6vw,80px)}
.feat{padding-top:22px;border-top:1px solid var(--color-divider)}
.lp-section--brand .feat{border-top-color:var(--r-line)}
.feat h3{font-size:21px;font-weight:500;line-height:1.25}
.feat p{margin-top:8px;font-size:16px;color:var(--color-text-muted)}
.lp-section--brand .feat p{color:var(--r-muted)}
.lp-section__cta{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(48px,6vw,72px);font-size:15px}
.lp-section__cta span{color:var(--color-text-muted)}
.lp-section--brand .lp-section__cta span{color:var(--r-muted)}

/* Prices: Training yourself on one row (Free beside Pro), Personal trainers on the next (slider beside the rules) */
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prices{display:grid;gap:20px;margin-top:clamp(36px,5vw,56px)}
.pcard{padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--color-surface);border:1px solid var(--color-border)}
.pcard__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.pcard h3{font-size:26px;font-weight:500}
.pcard__note{font-size:16px;color:var(--color-text-muted)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.plan{padding:24px;border-radius:20px;background:var(--color-bg);border:1px solid var(--color-border)}
.plan--pro{background:var(--accent-surface);border-color:transparent}
.plan h4{margin:0;font-size:18px;font-weight:500}
.plan__price{margin:6px 0 16px;font-size:16px;color:var(--color-text-muted)}
.plan__price b{display:block;font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-.02em;color:var(--color-text)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px}
.plan li{position:relative;padding-left:22px}
.plan li::before{content:"";position:absolute;left:2px;top:8px;width:10px;height:5px;border-left:1.6px solid var(--accent-mark);border-bottom:1.6px solid var(--accent-mark);transform:rotate(-45deg)}
.compare{margin-top:20px}
.compare summary{cursor:pointer;list-style:none;display:inline-block;font-size:16px;color:var(--color-champagne)}
.compare summary::-webkit-details-marker{display:none}
.cmp{width:100%;margin-top:14px;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{padding:11px 8px;text-align:left;vertical-align:top;font-weight:400;border-bottom:1px solid var(--color-divider)}
.cmp th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.cmp td:not(:first-child),.cmp th:not(:first-child){width:22%}
.cmp .no{color:var(--color-text-muted)}
.pcard__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px;font-size:16px;color:var(--color-text-muted)}
.trainer-price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;margin-top:22px;align-items:start}
.calc{padding:24px;border-radius:20px;background:var(--color-bg);border:1px solid var(--color-border)}
.calc label{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;color:var(--color-text-muted)}
.calc output{font-size:22px;font-weight:500;color:var(--color-text);font-variant-numeric:tabular-nums}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:18px 0 22px;border-radius:6px;outline-offset:6px;background:linear-gradient(90deg,var(--color-champagne) var(--p,5%),var(--color-border-strong) var(--p,5%))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-champagne);cursor:pointer}
.calc input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-champagne);cursor:pointer}
.calc__price{font-size:clamp(44px,5vw,60px);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc__price small{font-size:17px;font-weight:400;letter-spacing:0;color:var(--color-text-muted)}
.calc__how{margin-top:12px;min-height:3em;font-size:16px;color:var(--color-text-muted)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:16px;color:var(--color-text-muted)}
.rules li{padding-bottom:14px;border-bottom:1px solid var(--color-divider)}
.rules li:last-child{border-bottom:0;padding-bottom:0;font-size:15px}
.rules b{font-weight:500;color:var(--color-text)}

/* Phone */
.lp-phone{padding:0 0 clamp(72px,10vw,120px)}
.phone{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:24px 28px;border-radius:24px;background:var(--color-surface);border:1px solid var(--color-border)}
.phone p{font-size:19px;font-weight:500}
.phone p small{display:block;font-size:15px;font-weight:400;color:var(--color-text-muted)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.how[hidden]{display:none}
.how div{padding:18px;border-radius:18px;border:1px solid var(--color-border);font-size:15px;color:var(--color-text-muted)}
.how b{display:block;margin-bottom:6px;font-weight:500;color:var(--color-text)}
.how ol{margin:0;padding-left:18px;display:grid;gap:4px}

/* Questions, with the embossed Abode mark (as behind the app's Abode-look screens) */
.lp-faq{position:relative;overflow:hidden;padding:clamp(56px,7vw,104px) 0}
.lp-faq > .lp-wrap{position:relative;z-index:1}
.amark{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);pointer-events:none;overflow:visible}
.amark path{vector-effect:non-scaling-stroke;stroke-width:3.5px}
.amark .bg-mark__shadow{fill:none;stroke:var(--mark-shadow);transform:translate(2px,2px)}
.amark .bg-mark__face{fill:var(--mark-fill);stroke:var(--mark-edge);transform:translate(-2px,-2px)}
.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.faq__head p{margin-top:14px;font-size:16px;color:var(--color-text-muted)}
.faq .lp-title{text-align:left}
.qs details{border-top:1px solid var(--color-divider)}
.qs details:last-child{border-bottom:1px solid var(--color-divider)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:18px;font-weight:500}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;border-right:1.6px solid var(--accent-mark);border-bottom:1.6px solid var(--accent-mark);transform:rotate(45deg);transition:transform .2s ease}
.qs details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.qs p{margin:-6px 0 20px;max-width:62ch;font-size:16px;color:var(--color-text-muted)}

/* End */
.lp-end{padding:0 0 clamp(64px,8vw,104px)}
.lp-end .lp-doors{margin-top:0}
.lp-end .door{min-height:0}
.lp-end .door__title{font-size:clamp(28px,8cqi,44px)}
.lp-end .door__cta{margin-top:24px}
.lp-end__more{margin-top:22px;text-align:center;font-size:15px;color:var(--color-text-muted)}

/* Footer */
.lp-foot{padding:28px 0 40px;border-top:1px solid var(--color-divider);font-size:14px;color:var(--color-text-muted)}
.lp-foot .lp-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:20px}
.lp-foot a{text-decoration:none}
.lp-foot a:hover{color:var(--color-text)}

/* A quiet entrance for the hero only */
.rise{opacity:0;transform:translateY(12px);animation:lp-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d2{animation-delay:.1s}.d3{animation-delay:.2s}
@keyframes lp-rise{to{opacity:1;transform:none}}

/* Phones */
@media (max-width:900px){
  .lp{font-size:16px}
  .lp-nav__links > a:not(.lp-signin){display:none}
  .lp-menu{display:block;margin-left:8px}
  .lp-hero{text-align:left;padding-top:8px}
  .lp-hero .lp-lede{margin-left:0}
  .lp-jump{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
  .lp-jump a{padding:11px 8px;border-radius:12px;border:1px solid var(--color-border-strong);text-align:center;text-decoration:none;font-size:15px}
  .lp-doors,.feats,.prices,.faq{grid-template-columns:1fr}
  .lp-doors{gap:14px;margin-top:28px}
  .door{border-radius:24px}
  .ticks{margin:18px 0 22px;gap:9px;font-size:15px}
  .stage{height:auto;margin-top:28px}
  .log,.client{position:relative;width:100%}
  .swatches{position:static;display:inline-block;margin-top:14px;box-shadow:none}
  .rows .r2,.timer,.hello,.powered,.ci{display:none}
  .sugg{font-size:13px}
  .sugg i{display:none}
  .feats{gap:28px}
  .lp-title{text-align:left}
  .lp-sub{margin-left:0;text-align:left;font-size:17px}
  .lp-section__cta{justify-content:flex-start}
  .plans,.trainer-price{grid-template-columns:1fr;gap:12px}
  .plan,.calc{padding:20px}
  .cmp th,.cmp td{padding:10px 4px;font-size:15px}
  .how{grid-template-columns:1fr}
  .faq{gap:20px}
  .amark{width:180%;left:-40%;opacity:.6}
}
@media (max-width:420px){.lp-btn{padding:0 20px}}
@media (prefers-reduced-motion:reduce){
  .lp *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}

/* See it in action: a 14-second loop of the real flow (Workouts › Programmes › Templates → Add → Assign → Calendar).
   Names, days and block weeks from catalog/programme-library.json. CSS only; still for reduced motion. */
/* ---------- See it in action: a 14-second loop of the real flow (Workouts › Programmes › Templates → Add → Assign) ---------- */
.action{padding:clamp(56px,8vw,110px) 0;background:var(--color-bg)}
.action__in{max-width:1180px;margin:0 auto;padding:0 clamp(24px,4.5vw,72px);display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,96px);align-items:center}
.action h2{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.1;letter-spacing:-.015em;margin:0 0 14px}
.action__lede{color:var(--color-text-muted);font-size:17px;margin:0 0 28px;max-width:44ch}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:c}
.caps li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;color:var(--color-text-muted);font-size:17px;border:1px solid transparent}
.caps li::before{counter-increment:c;content:counter(c);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;border:1px solid var(--color-border-strong)}
.caps li{animation:14s infinite linear}
.caps li:nth-child(1){animation-name:cap1}.caps li:nth-child(2){animation-name:cap2}.caps li:nth-child(3){animation-name:cap3}.caps li:nth-child(4){animation-name:cap4}
@keyframes cap1{0%,1.43%{color:var(--color-text-muted);border-color:transparent;background:transparent}2.14%,17.14%{color:var(--color-text);border-color:var(--color-border);background:var(--color-surface)}17.86%,100%{color:var(--color-text-muted);border-color:transparent;background:transparent}}
@keyframes cap2{0%,17.14%{color:var(--color-text-muted);background:transparent;border-color:transparent}17.86%,45.71%{color:var(--color-text);border-color:var(--color-border);background:var(--color-surface)}46.43%,100%{color:var(--color-text-muted);background:transparent;border-color:transparent}}
@keyframes cap3{0%,45.71%{color:var(--color-text-muted);background:transparent;border-color:transparent}46.43%,73.57%{color:var(--color-text);border-color:var(--color-border);background:var(--color-surface)}74.29%,100%{color:var(--color-text-muted);background:transparent;border-color:transparent}}
@keyframes cap4{0%,73.57%{color:var(--color-text-muted);background:transparent;border-color:transparent}74.29%,97.14%{color:var(--color-text);border-color:var(--color-border);background:var(--color-surface)}97.86%,100%{color:var(--color-text-muted);background:transparent;border-color:transparent}}
.action__note{margin:18px 0 0;font-size:13px;color:var(--color-text-muted)}

/* The screen */
.dev{position:relative;width:340px;height:640px;border-radius:40px;padding:10px;background:var(--lp-device);border:1px solid var(--color-border-strong);box-shadow:0 50px 100px -40px var(--lp-shadow)}
.scr{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden;background:var(--color-bg);font-size:14px}
.scr *{box-sizing:border-box}
.pg{position:absolute;inset:0;padding:22px 18px}
.pg h5{margin:4px 0 10px;font-size:24px;font-weight:500}
.seg{display:flex;gap:6px;margin-bottom:10px}
.seg span{flex:1;text-align:center;padding:7px 0;border-radius:10px;font-size:13px;border:1px solid var(--color-border);color:var(--color-text-muted)}
.seg span.on{color:var(--color-text);border-color:var(--accent-mark);background:var(--accent-fill)}
.sub2{display:flex;gap:16px;font-size:13px;color:var(--color-text-muted);margin:2px 0 12px;border-bottom:1px solid var(--color-divider)}
.sub2 span{padding:0 0 8px}
.sub2 span.on{color:var(--color-text);box-shadow:inset 0 -2px 0 var(--color-champagne)}
.tr{border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.tr b{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:15px}
.tr small{display:block;color:var(--color-text-muted);font-size:12px;margin-top:3px}
.tr .pb{font-size:9px;letter-spacing:.1em;border:1px solid var(--color-champagne);color:var(--color-champagne);border-radius:5px;padding:1px 5px;font-weight:500}
.tr--hit{animation:14s infinite hit}
@keyframes hit{0%,11.07%{border-color:var(--color-border);background:var(--color-surface)}11.43%,15.00%{border-color:var(--color-champagne);background:var(--accent-fill)}16.43%,100%{border-color:var(--color-border);background:var(--color-surface)}}
.pg--list{animation:14s infinite pList}
@keyframes pList{0%,53.57%{opacity:1}55.00%,98.57%{opacity:0}100%{opacity:1}}
/* Sheet */
.scrim{position:absolute;inset:0;background:var(--color-overlay);opacity:0;animation:14s infinite scrim}
@keyframes scrim{0%,14.29%{opacity:0}17.14%,52.14%{opacity:1}54.29%,65.00%{opacity:0}67.14%,72.86%{opacity:1}74.29%,100%{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--color-surface);border-radius:22px 22px 0 0;padding:20px 18px 18px;border-top:1px solid var(--color-border-strong);transform:translateY(105%)}
.sheet--tpl{height:82%;animation:14s infinite sheetA cubic-bezier(.2,.8,.2,1)}
@keyframes sheetA{0%,14.29%{transform:translateY(105%)}17.86%,52.14%{transform:translateY(0)}55.00%,100%{transform:translateY(105%)}}
.sheet h6{margin:0 0 4px;font-size:20px;font-weight:500}
.meta{font-size:12px;color:var(--color-text-muted);margin:0 0 10px}
.note{font-size:12px;color:var(--color-text-muted);margin:0 0 12px;line-height:1.45}
.lbl{font-size:12px;color:var(--color-text-muted);margin:0 0 4px}
.sel{position:relative;height:40px;border:1px solid var(--color-border-strong);border-radius:10px;background:var(--color-bg);margin-bottom:12px;overflow:hidden}
.sel span{position:absolute;left:12px;top:10px;font-size:14px}
.sel::after{content:"";position:absolute;right:14px;top:14px;width:7px;height:7px;border-right:1.5px solid var(--color-text-muted);border-bottom:1.5px solid var(--color-text-muted);transform:rotate(45deg)}
.v2{animation:14s infinite v2}.v3{animation:14s infinite v3}
@keyframes v2{0%,37.50%{opacity:1}38.21%,100%{opacity:0}}
@keyframes v3{0%,37.50%{opacity:0}38.21%,100%{opacity:1}}
.sel--hit{animation:14s infinite selhit}
@keyframes selhit{0%,25.36%{border-color:var(--color-border-strong)}25.71%,37.86%{border-color:var(--color-champagne)}39.29%,100%{border-color:var(--color-border-strong)}}
.grp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin:4px 0 6px}
.blk{border:1px solid var(--color-border);border-radius:12px;padding:10px 12px;font-size:13px;position:relative}
.blk b{font-weight:500}
.blk .muted{color:var(--color-text-muted)}
.days{position:relative;height:66px;margin-top:6px}
.days div{position:absolute;inset:0;display:grid;gap:4px;align-content:start;font-size:12px}
.days p{margin:0;display:flex;gap:8px}.days p i{font-style:normal;width:30px;color:var(--color-text-muted)}
.acts{position:absolute;left:18px;right:18px;bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts span{display:grid;place-items:center;height:44px;border-radius:12px;font-weight:500;border:1px solid var(--color-border-strong)}
.acts .pri{background:var(--btn-primary-bg);border-color:transparent}
.pri--hit{animation:14s infinite prihit}
@keyframes prihit{0%,51.07%{filter:none}51.43%,52.86%{filter:brightness(1.35)}53.57%,100%{filter:none}}
/* Programme page */
.pg--prog{opacity:0;animation:14s infinite pProg}
@keyframes pProg{0%,53.57%{opacity:0}55.00%,73.57%{opacity:1}74.64%,100%{opacity:0}}
.back{font-size:13px;color:var(--color-text-muted);margin:0 0 6px}
.pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--color-border-strong);color:var(--color-text-muted);margin-bottom:12px}
.tl{display:grid;gap:6px}
.tl div{display:flex;justify-content:space-between;border:1px solid var(--color-border);border-radius:12px;padding:10px 12px;font-size:13px}
.tl div span{color:var(--color-text-muted)}
.assign{position:absolute;left:18px;right:18px;bottom:22px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:500;background:var(--btn-primary-bg)}
.assign--hit{animation:14s infinite ahit}
@keyframes ahit{0%,63.93%{filter:none}64.29%,65.71%{filter:brightness(1.35)}66.43%,100%{filter:none}}
.toast{position:absolute;left:50%;top:18px;transform:translate(-50%,-20px);white-space:nowrap;background:var(--color-text);color:var(--color-bg);font-size:13px;font-weight:500;padding:9px 14px;border-radius:12px;opacity:0;animation:14s infinite toast}
@keyframes toast{0%,54.29%{opacity:0;transform:translate(-50%,-20px)}56.43%,63.57%{opacity:1;transform:translate(-50%,0)}65.71%,100%{opacity:0;transform:translate(-50%,-20px)}}
/* Assign sheet */
.sheet--as{height:46%;animation:14s infinite sheetB cubic-bezier(.2,.8,.2,1)}
@keyframes sheetB{0%,65.71%{transform:translateY(105%)}68.21%,73.21%{transform:translateY(0)}74.64%,100%{transform:translateY(105%)}}
.row2{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-divider);font-size:14px}
.row2 span:first-child{color:var(--color-text-muted)}
.as-hit{animation:14s infinite ashit}
@keyframes ashit{0%,72.50%{filter:none}72.86%,73.93%{filter:brightness(1.35)}74.64%,100%{filter:none}}
/* Calendar */
.pg--cal{opacity:0;animation:14s infinite pCal}
@keyframes pCal{0%,73.57%{opacity:0}75.00%,95.71%{opacity:1}99.29%,100%{opacity:0}}
.wkhd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.wkhd small{color:var(--color-text-muted);font-size:12px}
.day{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;min-height:52px;border-bottom:1px solid var(--color-divider)}
.day > i{font-style:normal;font-size:12px;color:var(--color-text-muted);line-height:1.15}
.day > i b{display:block;font-size:17px;font-weight:500;color:var(--color-text)}
.day .ev{display:flex;justify-content:space-between;align-items:center;border-radius:11px;padding:8px 10px;font-size:13px;border:1px solid transparent;background:var(--accent-surface);opacity:0;transform:translateX(16px)}
.day .ev small{display:block;font-size:11px;color:var(--color-text-muted)}
.day .ev em{font-style:normal;font-size:11px;color:var(--color-champagne)}
.ev1{animation:14s infinite ev1}.ev2{animation:14s infinite ev2}.ev3{animation:14s infinite ev3}
@keyframes ev1{0%,76.43%{opacity:0;transform:translateX(16px)}78.93%,95.71%{opacity:1;transform:none}99.29%,100%{opacity:0}}
@keyframes ev2{0%,78.57%{opacity:0;transform:translateX(16px)}81.07%,95.71%{opacity:1;transform:none}99.29%,100%{opacity:0}}
@keyframes ev3{0%,80.71%{opacity:0;transform:translateX(16px)}83.21%,95.71%{opacity:1;transform:none}99.29%,100%{opacity:0}}
.rest{font-size:12px;color:var(--color-text-muted)}
@keyframes opts{0%,26.07%{opacity:0;transform:translateY(-6px)}27.14%,37.50%{opacity:1;transform:none}38.57%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes opt3{0%,35.36%{background:transparent}35.71%,37.86%{background:var(--accent-fill)}100%{background:transparent}}
@keyframes tick2{0%,35.71%{opacity:1}36.07%,100%{opacity:0}}
@keyframes tick3{0%,35.71%{opacity:0}36.07%,100%{opacity:1}}
.selwrap{position:relative}
.opts{position:absolute;left:0;right:0;top:44px;z-index:3;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:12px;padding:4px;box-shadow:0 18px 40px -12px var(--lp-shadow);opacity:0;animation:14s infinite opts}
.opts p{margin:0;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;font-size:14px}
.opts b{width:14px;color:var(--color-champagne);font-weight:500}
.o3{animation:14s infinite opt3}.t2{animation:14s infinite tick2}.t3{animation:14s infinite tick3}
/* Finger */
.tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--lp-finger);border:2px solid var(--lp-finger-edge);opacity:0;pointer-events:none;animation:14s infinite tap ease-in-out;z-index:5}
@keyframes tap{0.00%{left:250px;top:470px;transform:scale(1);opacity:0}2.86%{left:240px;top:440px;transform:scale(1);opacity:1}10.00%{left:150px;top:180px;transform:scale(1)}11.43%{left:150px;top:180px;transform:scale(0.75)}12.86%{left:150px;top:180px;transform:scale(1)}24.29%{left:170px;top:262px;transform:scale(1)}25.71%{left:170px;top:262px;transform:scale(0.75)}26.79%{left:170px;top:262px;transform:scale(1)}34.29%{left:150px;top:348px;transform:scale(1)}35.71%{left:150px;top:348px;transform:scale(0.75)}37.14%{left:150px;top:348px;transform:scale(1)}45.71%{left:170px;top:420px;transform:scale(1)}50.00%{left:238px;top:580px;transform:scale(1)}51.43%{left:238px;top:580px;transform:scale(0.75)}52.86%{left:238px;top:580px;transform:scale(1)}61.43%{left:170px;top:575px;transform:scale(1)}62.86%{left:170px;top:575px;transform:scale(1)}64.29%{left:170px;top:575px;transform:scale(0.75)}65.71%{left:170px;top:575px;transform:scale(1)}71.43%{left:238px;top:580px;transform:scale(1)}72.86%{left:238px;top:580px;transform:scale(0.75)}73.93%{left:238px;top:580px;transform:scale(1);opacity:1}76.43%{left:238px;top:580px;transform:scale(1);opacity:0}100.00%{left:238px;top:580px;transform:scale(1);opacity:0}}
@media (max-width:900px){
  .action__in{grid-template-columns:1fr}
  .dev{margin:0 auto}
  .caps{display:none}
}
@media (max-width:380px){.dev{transform:scale(.9);transform-origin:top center;margin-bottom:-64px}}
@media (prefers-reduced-motion:reduce){
  .action *{animation:none!important}
  .opts,.sheet{opacity:0!important}
  .pg--list,.scrim,.tap{opacity:0!important}
  .pg--cal,.day .ev{opacity:1!important;transform:none!important}
  .caps li:nth-child(4){color:var(--color-text);border-color:var(--color-border);background:var(--color-surface)}
}
.wkhd h5{margin:0}

/* Sticky-phone tours (Personal and Trainers). The phone stays put while the steps scroll past it; the screen follows
   the step in the middle of the window (public/js/landing.js). On phones each step shows its own screen instead. */
.tour{display:grid;grid-template-columns:1fr 360px;gap:clamp(40px,7vw,120px);margin-top:clamp(32px,4vw,56px);align-items:start}
.tour__steps{list-style:none;margin:0;padding:0}
.tstep{min-height:max(300px,44vh);display:flex;flex-direction:column;justify-content:center;opacity:.38;transition:opacity .35s ease}
.tstep.is-on{opacity:1}
.tstep > h3{font-size:clamp(26px,2.6vw,36px);font-weight:500;line-height:1.1;letter-spacing:-.015em}
.tstep > p{margin-top:12px;max-width:40ch;font-size:18px;color:var(--color-text-muted)}
.lp-section--brand .tstep > p{color:var(--r-muted)}
.tshot{display:none}
.tour__phone{position:sticky;top:max(16px,calc(50vh - 330px));height:660px}
/* Short laptop screens: a smaller phone so it all stays in view */
@media (min-width:901px) and (max-height:760px){.tour__phone{top:12px;height:560px}.tour__phone .dev{transform:scale(.84);transform-origin:top center}}
.tour__phone .dev{margin:0 auto}
.tscreen{position:absolute;inset:0;padding:26px 20px;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
.tscreen.is-on{opacity:1;transform:none;transition:opacity .3s ease .18s,transform .3s ease .18s}
.lp-section--brand .dev{background:var(--lp-device)}
.lp-section--brand .scr{background:var(--r-bg);color:var(--r-text)}

/* Screen parts (.ts): small, real-looking app UI */
.ts{font-size:14px;color:var(--color-text)}
.lp-section--brand .ts{color:var(--r-text)}
.ts p{margin:0}
.ts-top{font-size:22px;font-weight:500;margin-bottom:12px}
.ts-who{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--r-muted);margin-bottom:12px}
.ts-h{font-size:20px;font-weight:500;line-height:1.2}
.ts-sub{font-size:13px;color:var(--color-text-muted);margin:2px 0 14px}
.lp-section--brand .ts-sub{color:var(--r-muted)}
.ts-seg{display:flex;gap:6px;margin-bottom:14px}
.ts-seg span{flex:1;padding:7px 0;text-align:center;font-size:13px;border-radius:10px;border:1px solid var(--color-border);color:var(--color-text-muted)}
.ts-seg span.on{color:var(--color-text);border-color:var(--accent-mark);background:var(--accent-fill)}
.ts-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;padding:12px 14px;border-radius:14px;background:var(--color-surface);border:1px solid var(--color-border)}
.ts-row b{display:block;font-size:15px;font-weight:500}
.ts-row small{display:block;margin-top:2px;font-size:12px;color:var(--color-text-muted)}
.ts-row > b,.ts-row > small{display:block}
.ts-row:not(.ts-row--go){flex-direction:column;align-items:flex-start;gap:0}
.ts-row--mine{border-style:dashed}
.lp-section--brand .ts-row{background:var(--r-surface);border-color:var(--r-line)}
.lp-section--brand .ts-row small{color:var(--r-muted)}
.ts-row--go .go{padding:9px 16px;border-radius:11px;font-weight:500;background:var(--r-accent);color:var(--r-on-accent)}
.ts-sets{display:grid;grid-template-columns:24px auto 1fr;gap:10px 12px;align-items:center;font-size:15px}
.ts-sets .hd{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.ts-sets > span:not(.hd):not(.v){color:var(--color-text-muted);white-space:nowrap}
.ts-sets .v{padding:8px 10px;border-radius:11px;border:1px solid var(--color-border-strong);font-weight:500;white-space:nowrap}
.ts-sets .v.done{border-color:var(--accent-mark);background:var(--accent-fill)}
.ts-sets .v.now{border-color:var(--color-champagne)}
.ts-rest{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--success-surface);border:1px solid transparent}
.ts-rest b{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.ts-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.ts-cmp > div{padding:14px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface)}
.ts-cmp > div.up{border-color:var(--accent-mark);background:var(--accent-fill)}
.ts-cmp small{display:block;font-size:12px;color:var(--color-text-muted)}
.ts-cmp b{display:block;margin-top:2px;font-size:24px;font-weight:500}
.ts-cmp span{display:block;font-size:12px;color:var(--color-text-muted)}
.ts-cmp i{font-style:normal;color:var(--color-champagne)}
.ts-why{margin-top:14px;font-size:14px;line-height:1.45;color:var(--color-text-muted)}
.ts-card{margin-bottom:10px;padding:14px;border-radius:14px;background:var(--color-surface);border:1px solid var(--color-border)}
.lp-section--brand .ts-card{background:var(--r-surface);border-color:var(--r-line)}
.ts-card small{display:block;font-size:12px;color:var(--color-text-muted)}
.lp-section--brand .ts-card small,.lp-section--brand .ts-card span{color:var(--r-muted)}
.ts-card b{display:block;margin-top:2px;font-size:24px;font-weight:500}
.ts-card span{display:block;font-size:12px;color:var(--color-text-muted)}
.ts-card .ts-q{font-size:15px;line-height:1.3;margin:2px 0 4px}
.ts-up{color:var(--color-success)!important}
.ts-chart{display:block;width:100%;height:80px;margin-top:10px}
.ts-chart polyline{fill:none;stroke:var(--color-champagne);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ts-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ts-pair .ts-card b{font-size:20px}
.ts-card--row{display:flex;justify-content:space-between;align-items:center}
.ts-card--row b{margin:0;font-size:14px;color:var(--color-success)}
.ts-band{display:flex;align-items:center;gap:12px;margin:-6px -18px 14px;padding:14px 18px;background:var(--r-accent);color:var(--r-on-accent)}
.ts-band .plogo{width:40px;height:40px}
.ts-band .pword{font-size:16px}
.ts-hello{font-size:14px;color:var(--r-muted);margin-bottom:12px!important}
.ts-hello b{font-weight:500;color:var(--r-text)}
.ts-powered{margin-top:14px!important;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--r-muted)}
.ts-day{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;min-height:50px;border-bottom:1px solid var(--r-line)}
.ts-day i{font-style:normal;font-size:13px;color:var(--r-muted)}
.ts-day .ev{padding:9px 12px;border-radius:11px;font-size:14px;font-weight:500;background:var(--r-surface);border:1px solid var(--r-line);box-shadow:inset 3px 0 0 var(--r-accent)}
.ts-day .rest{font-size:13px;color:var(--r-muted)}
.ts-ex{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--r-line);font-size:14px}
.ts-ex b{font-weight:500}
.ts-ex span{color:var(--r-muted);white-space:nowrap}
.ts-note{margin-top:14px!important;padding:12px 14px;border-radius:12px;background:var(--r-surface);font-size:14px;color:var(--r-muted)}

@media (max-width:900px){
  .tour{grid-template-columns:1fr;gap:0;margin-top:32px}
  .tour__phone{display:none}
  .tstep{min-height:0;opacity:1;padding:28px 0;border-top:1px solid var(--color-divider)}
  .lp-section--brand .tstep{border-top-color:var(--r-line)}
  .tstep > p{font-size:16px}
  .tshot{display:block;margin-top:20px;height:auto;border-radius:24px;overflow:hidden;border:1px solid var(--color-border)}
  .lp-section--brand .tshot{border-color:var(--r-line)}
  .tshot .scr{position:relative;height:auto;padding:20px 18px;border-radius:0}
  .tshot .ts-band{margin:-4px -18px 14px}
}

/* Loop controls (Pause / Replay) and nothing inside the pictures catches taps */
.lp-btn--sm{min-height:40px;padding:0 16px;font-size:15px}
.action__ctl{display:flex;gap:8px;margin:0 0 20px}
.action.is-paused *{animation-play-state:paused!important}
.action.is-restart *{animation:none!important}
.dev,.dev *,.stage .log,.stage .timer{pointer-events:none}
@media (max-width:900px){.action__ctl{margin-top:4px}}
@media (prefers-reduced-motion:reduce){.action__ctl{display:none}.caps{display:grid!important}.caps li:nth-child(n){color:var(--color-text);border-color:transparent;background:transparent}}

/* The pinned phone on wide screens: a little larger type so labels and values read at a glance */
@media (min-width:901px){
  .tour__phone .ts{font-size:15px}
  .tour__phone .ts-top{font-size:24px}
  .tour__phone .ts-h{font-size:22px}
  .tour__phone .ts-sub{font-size:14px}
  .tour__phone .ts-row b{font-size:16px}
  .tour__phone .ts-row small{font-size:13px}
  .tour__phone .ts-sets{font-size:16px}
  .tour__phone .ts-card b{font-size:26px}
  .tour__phone .ts-card small,.tour__phone .ts-card span{font-size:13px}
  .tour__phone .ts-why,.tour__phone .ts-ex,.tour__phone .ts-day .ev,.tour__phone .ts-hello,.tour__phone .ts-note{font-size:15px}
  .tour__phone .ts-cmp b{font-size:26px}
}