/* Homepage (doctablade.com/): the Blade Fitness program pitch. Mobile first, split hero from 980px.
   Built on blade.css tokens; every class here is prefixed h- so it never leaks into the app pages. */
.h-page{gap:64px;padding-top:12px}
.section-h{margin:0;font:800 clamp(36px,9vw,64px)/.92 var(--display);text-transform:uppercase}
.section-h em,.h-hero h1 em,.h-offer h2 em,.h-final h2 em{font-style:normal;color:var(--ember-hi)}
.h-sec{display:grid;gap:16px;min-width:0}
.h-lead{margin:0;color:var(--soft);font-size:17px;max-width:56ch}
.h-small{margin:0;color:var(--faint);font-size:13px}
.h-fine{margin:0;color:var(--faint);font-size:13.5px}
.h-ctas{display:flex;flex-wrap:wrap;gap:10px}

/* Hero */
.h-hero{display:grid;gap:28px;min-width:0}
.h-copy{display:grid;gap:14px;align-content:start}
.h-hero h1{margin:0;font:800 clamp(44px,12.4vw,84px)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em}
.h-hero h1 em{text-shadow:0 0 40px rgba(217,25,28,.45)}
.h-sub{margin:0;color:var(--soft);font-size:18px;max-width:40ch}
.h-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.h-back{margin:0}
.h-back a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--ink)}
.h-art{position:relative;margin:0 auto;width:min(100%,440px);display:grid}
.h-glow{position:absolute;background:radial-gradient(50% 45% at 50% 60%,rgba(217,25,28,.28),rgba(217,25,28,0) 70%);pointer-events:none}
.h-cap{margin-top:10px;text-align:center;font-size:12px;color:var(--faint)}
.h-float{position:absolute;display:grid;gap:4px;padding:10px 14px;border-radius:16px;background:rgba(20,20,23,.86);border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px -18px #000;animation:h-bob 6s ease-in-out infinite}
.h-f1{left:-6px;top:12%}
.h-f2{right:-6px;bottom:15%;grid-template-columns:auto auto;align-items:center;gap:10px;animation-delay:-3s}
.h-fl-k{display:block;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap}
.h-fl-k b{font:800 20px/1 var(--display);color:var(--ember-hi);margin-left:2px}
.h-fl-s{display:block;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.h-dots{display:flex;gap:4px}
.h-dots i{width:12px;height:12px;border-radius:4px;background:var(--line-2)}
.h-dots i.on{background:var(--ember-hi);box-shadow:0 0 10px -2px var(--ember-glow)}
.h-ring svg{width:36px;height:36px}
@keyframes h-bob{50%{transform:translateY(-6px)}}

/* Trust strip */
.h-trust{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.h-trust div{display:grid;gap:4px;padding:16px;background:var(--bg-2)}
.h-trust b{font:800 34px/1 var(--display);color:var(--ink)}
.h-trust span{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* Steps */
.h-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.h-steps li{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;padding:18px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.h-steps .n{grid-row:1/3;font:800 36px/1 var(--display);color:var(--ember-hi)}
.h-steps h3{margin:0;font:800 24px/1.05 var(--display);text-transform:uppercase}
.h-steps h3 a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;color:var(--ink);text-decoration-color:var(--ember-hi);text-underline-offset:4px}
.h-steps p{margin:0;color:var(--soft);font-size:16px}

/* Feature grid */
.h-feats{display:grid;gap:10px}
.h-feat{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:18px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.h-feat svg{grid-row:1/3;width:40px;height:40px;padding:8px;border-radius:12px;background:rgba(217,25,28,.12);border:1px solid rgba(217,25,28,.35);fill:none;stroke:var(--ember-hi);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h-feat h3{margin:0;font-size:17px;font-weight:800;line-height:1.3}
.h-feat p{margin:0;color:var(--soft);font-size:16px}

/* Rails: scroll-snap carousels on phones */
.h-rail{display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:-16px;padding:2px 16px 12px;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.h-rail>*{scroll-snap-align:start}
.h-gallery{grid-auto-columns:min(82%,330px)}
.h-quotes{grid-auto-columns:min(86%,360px)}
.h-ba{margin:0;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.h-ba img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg-2)}
.h-ba figcaption{display:grid;align-content:start;gap:10px;padding:14px 16px 16px}
.h-ba blockquote,.h-q p{margin:0;font-size:16px;color:var(--ink);line-height:1.55}
.h-ba cite,.h-q cite{font:600 11.5px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.h-q{margin:0;display:grid;align-content:space-between;gap:14px;padding:20px 18px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--ember)}

/* Movement clips */
.h-split-c{display:grid;gap:14px;align-content:center;min-width:0}
.h-split{display:grid;gap:20px}
.h-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.h-clips a{display:grid;gap:6px;text-decoration:none;font-size:14px;font-weight:700;min-height:44px}
.h-clip{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.h-clip video{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}

/* Free tools */
.h-tools{padding:22px 18px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:radial-gradient(90% 120% at 100% 0%,rgba(217,25,28,.18),rgba(217,25,28,0) 60%),var(--surface)}
.h-tlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.h-tlist a{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;transition:border-color .3s}
.h-tlist a:hover{border-color:var(--ember-deep)}
.h-tlist b{font-weight:800}
.h-tlist span{color:var(--soft);font-size:15px}

/* Community + offer lists */
.h-club{padding:22px 18px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:radial-gradient(90% 120% at 0% 0%,rgba(217,25,28,.22),rgba(217,25,28,0) 60%),var(--surface)}
.h-ticks{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.h-ticks li{position:relative;padding-left:22px;color:var(--soft);font-size:16px}
.h-ticks li b{color:var(--ink)}
.h-ticks li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--ember);transform:rotate(45deg)}

/* About */
.h-doc{display:grid;gap:20px;align-items:center}
.h-doc img{width:100%;max-width:400px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow)}
.h-stats{display:flex;flex-wrap:wrap;gap:20px}
.h-stats b{display:block;font:800 40px/1 var(--display)}
.h-stats span{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* Offer card */
.h-offer{display:grid;gap:22px;padding:26px 20px;border-radius:var(--r-xl);background:linear-gradient(160deg,#1A0505 0%,#6E0B0E 55%,#B3121A 120%)}
.h-offer h2{margin:0;font:800 clamp(36px,9vw,58px)/.92 var(--display);text-transform:uppercase}
.h-offer h2 em{color:#fff;text-decoration:underline;text-decoration-color:var(--ember-hi);text-underline-offset:6px}
.h-price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.h-price b{font:800 40px/1 var(--display);text-transform:uppercase}
.h-price span{font-size:17px;color:#FFE0DE}
.h-offer .btn{background:#fff;color:#1A0505;box-shadow:none}
.h-offer .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.h-offer .h-ticks li{color:#FFE0DE}
.h-offer .h-ticks li b{color:#fff}
.h-offer .h-ticks li::before{background:#fff}

/* FAQ */
.h-faq{display:grid;border-top:1px solid var(--line)}
.h-faq details{border-bottom:1px solid var(--line)}
.h-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 2px;cursor:pointer;list-style:none;font-weight:700;font-size:17px}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ember-hi);border-bottom:2px solid var(--ember-hi);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.h-faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.h-faq p{margin:0 0 18px;color:var(--soft);font-size:16px;max-width:64ch}
.h-faq p a{color:var(--ink)}

/* Final CTA */
.h-final{display:grid;gap:16px;justify-items:start;padding:8px 0}
.h-final h2{margin:0;font:800 clamp(40px,11vw,80px)/.9 var(--display);text-transform:uppercase;max-width:16ch}

@media (max-width:520px){.h-ctas .btn{flex:1 1 100%}}
@media (min-width:640px){
  .h-trust{grid-template-columns:repeat(4,1fr)}
  .h-feats{grid-template-columns:1fr 1fr}
  .h-steps{grid-template-columns:repeat(3,1fr)}
  .h-steps li{grid-template-columns:1fr;align-content:start;gap:10px}
  .h-steps .n{grid-row:auto}
}
@media (min-width:980px){
  .h-page{gap:96px}
  .h-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:48px;min-height:calc(100dvh - 140px)}
  .h-art{width:min(100%,480px)}
  .h-f1{left:-48px}
  .h-f2{right:-40px}
  .h-feats{grid-template-columns:repeat(3,1fr)}
  .h-feat{grid-template-columns:1fr;gap:12px;padding:24px}
  .h-feat svg{grid-row:auto;width:48px;height:48px;padding:10px}
  .h-rail{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .h-gallery{grid-auto-columns:calc((100% - 36px)/4)}
  .h-quotes{grid-auto-columns:calc((100% - 24px)/3)}
  .h-split{grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .h-tools,.h-club{padding:40px}
  .h-tools{grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
  .h-tools .eyebrow,.h-tools .section-h,.h-tools .h-lead{grid-column:1}
  .h-tools .h-tlist{grid-column:2;grid-row:1/5}
  .h-club,.h-offer{grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .h-offer{padding:48px}
  .h-doc{grid-template-columns:400px 1fr;gap:56px}
  .h-faq{max-width:820px}
}
@media (prefers-reduced-motion:reduce){.h-float{animation:none}}

/* Credibility marquee: two identical sets slide left forever; the copy is aria-hidden.
   Reduced motion: static, wrapped, one set only. */
.h-logos{display:grid;gap:14px;min-width:0;margin-top:-24px}
.h-logos-k{margin:0;text-align:center;font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.h-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.h-track{display:flex;width:max-content;animation:h-marq 32s linear infinite}
.h-set{display:flex;align-items:center;gap:56px;margin:0;padding:0 56px 0 0;list-style:none}
.h-set li{flex:none;display:flex;align-items:center;height:40px}
.h-set img{width:auto;opacity:.9}
.h-set .h-seal img{opacity:.8;filter:saturate(.7)}
.h-marq:hover .h-track{animation-play-state:paused}
@keyframes h-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .h-marq{-webkit-mask-image:none;mask-image:none}
  .h-track{width:auto;animation:none;justify-content:center}
  .h-set{flex-wrap:wrap;justify-content:center;gap:20px 40px;padding:0}
  .h-dup{display:none}
}

/* Homepage header: brand name and MD line stay visible on phones (no progress pill here) */
.home .brand b{color:var(--ink)}
@media (max-width:520px){.home .brand span{display:block}}

/* Transformation wall: every before/after visible at once (2 cols phone, 3 tablet, 4 desktop). */
.h-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.h-ph{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.h-ph img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.h-ph-wide{grid-column:1/-1;justify-self:center;width:100%;max-width:760px}
.h-ph-wide img{aspect-ratio:16/9}
.h-ph figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:rgba(9,9,11,.82);font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.h-wall+.h-rail{margin-top:18px}
@media (min-width:700px){.h-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1100px){.h-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Marquee spans the full screen width and sits closer to the stats */
.h-logos{margin-inline:calc(50% - 50vw);width:100vw;margin-bottom:-8px}

/* Layered hero. Four planes inside the card: glow plate, crimson glow, figures cut out on true alpha, front haze.
   home-scroll.js writes --hx/--hy (pointer, -1..1, fine pointers only) and --hp (first scroll, 0..1) on the scene.
   Pointer travel is a few px, figures least and haze most; on scroll the figures push in from their feet while the
   glow drifts. Copy and CTAs never move. Reduced motion: the same planes, still. */
.h-scene{--hx:0;--hy:0;--hp:0;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);background:#050304;isolation:isolate}
.h-plane{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.h-plate{object-fit:cover;transform:translate3d(calc(var(--hx) * -3px),calc(var(--hy) * -2px),0) scale(1.04)}
.h-scene .h-glow{inset:0;background:radial-gradient(46% 34% at 50% 62%,rgba(217,25,28,.26),rgba(217,25,28,0) 72%);mix-blend-mode:screen;
  transform:translate3d(calc(var(--hx) * 6px),calc(var(--hy) * 4px + var(--hp) * -18px),0) scale(calc(1 + var(--hp) * .08));opacity:calc(1 - var(--hp) * .25)}
.h-figs{object-fit:cover;transform-origin:50% 90%;transform:translate3d(calc(var(--hx) * 2px),calc(var(--hy) * 1.5px),0) scale(calc(1 + var(--hp) * .045))}
.h-haze{inset:-8% -8% -4%;width:auto;height:auto;
  background:radial-gradient(60% 14% at 50% 96%,rgba(255,59,48,.20),rgba(255,59,48,0) 70%),
    radial-gradient(18% 10% at 20% 74%,rgba(217,25,28,.10),rgba(217,25,28,0) 70%),
    radial-gradient(20% 12% at 82% 66%,rgba(217,25,28,.08),rgba(217,25,28,0) 70%),
    linear-gradient(to top,rgba(9,9,11,.55),rgba(9,9,11,0) 16%);
  transform:translate3d(calc(var(--hx) * 10px),calc(var(--hy) * 7px + var(--hp) * -10px),0)}
@media (max-width:639px){
  .h-art{width:100%}
  .h-scene{aspect-ratio:5/6}
  .h-figs,.h-plate{object-position:50% 22%}
  .h-figs{transform:scale(calc(1.06 + var(--hp) * .03))}
}
@media (prefers-reduced-motion:reduce){.h-plane{transform:none!important}}

/* Scrollcraft device floor, scoped to the rep. These are the mechanism rules from vendor/scrollcraft/scrollcraft.css
   (MIT, Nate Herk), copied here because that file also ships a global reset (smooth scroll, body type, focus shape,
   link underlines) that would change the rest of this page. */
.h-rep .sc-act--pinned{position:relative}
.h-rep .sc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;z-index:1}
:where(.h-rep .sc-stage) :is(video[data-sc-scrub],.sc-stage__poster){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-rep video[data-sc-scrub]{opacity:0;transition:opacity 380ms var(--ease)}
.h-rep .sc-has-clip video[data-sc-scrub]{opacity:1}
.h-rep .sc-stage__poster{z-index:0;transition:opacity 380ms var(--ease)}
.h-rep .sc-has-clip .sc-stage__poster{opacity:0}
.h-rep [data-sc-cue]{opacity:0;will-change:opacity,transform}
.sc-ready .h-rep [data-sc-cue]{transition:none}

/* Scrub a rep: the page's one peak. One bodyweight squat on the engine's scrub act (vendor/scrollcraft):
   the retimed clip maps the standing lead-in and lead-out to the stage's entry and exit slides, so descent fills
   the first half of the pin and ascent the second. Cues use the real moves.js wording. The CTA line sits after the
   pin, never inside it. .h-rep--static (no JS, reduced motion) is the looping clip with the cues listed beside it. */
.h-rep{display:grid;gap:20px;min-width:0;margin-inline:calc(50% - 50vw);width:100vw}
.h-rep-stage{background:#030304;--rep-pad:max(16px,calc(50vw - 560px))}
.h-rep-media{position:absolute;display:block;max-width:none;object-fit:contain;background:transparent;
  -webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent);mask-image:radial-gradient(closest-side,#000 78%,transparent)}
.h-rep picture{display:contents}
.h-rep-scrim{display:none}
.h-rep-copy{position:absolute;z-index:2;display:grid;gap:14px;align-content:center}
.h-rep-cues{display:grid;margin:6px 0 0;padding:0;list-style:none}
.h-cue{grid-area:1/1;display:grid;gap:6px;max-width:30ch;font-size:clamp(18px,1.7vw,22px);line-height:1.4;font-weight:600;color:var(--ink)}
.h-cue b{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ember-hi)}
.h-rep-end{display:grid;gap:14px;justify-items:start;padding-inline:max(16px,calc(50vw - 560px))}
.h-rep-end .h-lead{color:var(--ink);font-size:clamp(18px,2vw,22px);font-weight:600}
/* scrolling version */
.h-rep:not(.h-rep--static) .h-rep-copy{left:var(--rep-pad);top:0;bottom:0;width:min(34rem,40vw)}
.h-rep:not(.h-rep--static) .h-rep-media{object-fit:contain;top:50%;right:var(--rep-pad);left:auto;bottom:auto;height:min(88svh,52vw);width:min(88svh,52vw);transform:translateY(-46%)}
@media (max-width:860px){
  .h-rep:not(.h-rep--static) .h-rep-media{top:56px;left:0;right:0;bottom:auto;margin-inline:auto;height:calc(100svh - 300px);width:calc((100svh - 300px) * 2 / 3);max-width:100%;transform:none}
  .h-rep:not(.h-rep--static) .h-rep-copy{left:16px;right:16px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:auto;gap:8px}
  .h-rep .section-h{font-size:clamp(34px,10vw,44px)}
  .h-cue{font-size:17px;max-width:none;min-height:3em}
  .h-rep-end{padding-top:4px}
}
/* static version: looping clip, every cue visible */
.h-rep--static{padding-inline:max(16px,calc(50vw - 560px));width:100vw}
.h-rep--static .h-rep-act{height:auto!important}
.h-rep--static .h-rep-stage{position:relative;display:grid;gap:20px;border-radius:var(--r-xl);border:1px solid var(--line);padding:20px;overflow:hidden}
.h-rep--static .h-rep-media{position:relative;inset:auto;width:min(100%,420px);height:auto;aspect-ratio:1;justify-self:center}
.h-rep--static .sc-stage__poster{display:none}
.h-rep--static video[data-sc-scrub]{opacity:1}
.h-rep--static .h-rep-copy{position:relative}
.h-rep--static [data-sc-cue]{opacity:1!important;transform:none!important}
.h-rep--static .h-rep-cues{gap:16px}
.h-rep--static .h-cue{grid-area:auto}
.h-rep--static .h-rep-end{padding-inline:0}
@media (min-width:861px){.h-rep--static .h-rep-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:32px}.h-rep--static video{grid-area:1/1}.h-rep--static .h-rep-copy{grid-area:1/2}}

/* Form-first section: lead line over the rep, pillars + library clips after it */
.h-rep-lead{margin:6px 0 0;max-width:34ch;font-size:16px;line-height:1.55;color:var(--soft)}
.h-pillars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.h-pillars li{display:grid;gap:4px;padding:16px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ember)}
.h-pillars b{font-weight:700;color:var(--ink)}
.h-pillars span{color:var(--soft);font-size:16px;line-height:1.5}
.h-rep-end .h-clips{margin-top:4px}
@media (min-width:900px){.h-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
.h-rep-end .h-pillars,.h-rep-end .h-clips{justify-self:stretch;width:100%}