/* =========================================================
   HIGH-KICK MOBILITY PROGRAM: Flexibility Maestro
   Palette: white / red / near-black only.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --red:#ED1C24;
  --red-deep:#C4141B;
  --red-soft:rgba(237,28,36,.12);

  --ink:#0E0E0E;
  --ink-2:#161616;
  --ink-3:#232323;
  --ink-4:#2E2E2E;

  --paper:#F5F4F2;
  --paper-2:#FFFFFF;
  --line:#E2E0DC;

  --white:#FFFFFF;
  --mute:#9A9A9A;
  --mute-d:#6B6B6B;

  --maxw:1180px;
  --gut:clamp(1rem,5vw,2.5rem);
  --r:14px;
  --r-sm:9px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms var(--ease);
  --t-med:320ms var(--ease);
  --t-slow:620ms var(--ease);

  --f-head:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--ink);color:var(--white);
  font:400 16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--nar{max-width:820px}
.sec{padding:clamp(3.5rem,9vw,6.5rem) 0;position:relative}
.sec--dark{background:var(--ink);color:var(--white)}
.sec--light{background:var(--paper);color:var(--ink)}
.center{text-align:center}

/* ---------- TYPE ---------- */
.h1{
  font:800 clamp(2.15rem,6.4vw,3.15rem)/1.02 var(--f-head);
  letter-spacing:-.032em;margin:.55rem 0 0;
}
.h2{
  font:800 clamp(1.75rem,4.4vw,2.85rem)/1.05 var(--f-head);
  letter-spacing:-.028em;margin:.4rem 0 0;
}
.h3{font:700 clamp(1.2rem,2.4vw,1.6rem)/1.15 var(--f-head);letter-spacing:-.02em}
.h4{font:700 clamp(1.05rem,2vw,1.22rem)/1.2 var(--f-head);letter-spacing:-.015em}

.eyebrow{
  font:500 clamp(.63rem,1.35vw,.72rem)/1.45 var(--f-mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--mute);
  margin:0;position:relative;padding-bottom:.62rem;
}
.sec--light .eyebrow{color:var(--mute-d)}
.eyebrow--red{color:var(--red)}
/* signature: red rule wipes in under every eyebrow */
.eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease) 120ms;
}
.eyebrow.center::after{left:50%;transform:translateX(-50%) scaleX(0)}
.is-in .eyebrow::after,.eyebrow.is-in::after{transform:scaleX(1)}
.is-in .eyebrow.center::after,.eyebrow.center.is-in::after{transform:translateX(-50%) scaleX(1)}

.lede{color:var(--mute);font-size:clamp(.95rem,1.9vw,1.06rem);line-height:1.62;margin-top:1.1rem}
.lede b{color:var(--white);font-weight:600}
.sec--light .lede{color:var(--mute-d)}
.micro{font:500 .72rem/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-top:.7rem}
.red{color:var(--red)}
.strike{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}

/* =========================================================
   MOTION SYSTEM
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow),transform var(--t-slow);
  transition-delay:calc(var(--i,0) * 60ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* line-mask headline reveal */
.mask > span{display:block;overflow:hidden}
.mask > span > span{display:block;transform:translateY(105%);
  transition:transform 720ms var(--ease)}
.mask > span:nth-child(2) > span{transition-delay:90ms}
.mask > span:nth-child(3) > span{transition-delay:180ms}
.mask.is-in > span > span{transform:none}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:#fff;font:600 .95rem/1 var(--f-body);
  padding:.95rem 1.5rem;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  box-shadow:0 1px 0 rgba(0,0,0,.2);white-space:nowrap;
}
.btn:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 22px rgba(237,28,36,.28)}
.btn:active{transform:scale(.98) translateY(0);transition-duration:80ms}
.btn__arw{display:inline-block;transition:transform var(--t-fast)}
.btn:hover .btn__arw{transform:translateX(4px)}
.btn--sm{padding:.66rem 1.05rem;font-size:.85rem}
.btn--lg{padding:1.12rem 1.9rem;font-size:1.02rem}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22)}

.undlink{
  display:inline-block;margin-top:.9rem;font-size:.87rem;color:var(--mute);
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:color var(--t-fast)
}
.undlink:hover{color:var(--red)}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{position:sticky;top:0;z-index:90;background:rgba(14,14,14,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-3)}
.hdr__in{max-width:var(--maxw);margin-inline:auto;padding:.72rem var(--gut);
  display:flex;align-items:center;gap:1.4rem}
.hdr__logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.hdr__logo img{width:38px;height:auto}
.hdr__logo span{font:800 .95rem/1 var(--f-head);letter-spacing:-.02em;text-transform:uppercase}
.hdr__logo em{color:var(--red);font-style:normal}

.hdr__nav{display:none;position:relative;gap:1.55rem;margin-left:auto}
.hdr__nav a{font-size:.87rem;color:var(--mute);padding:.3rem 0;transition:color var(--t-fast)}
.hdr__nav a:hover,.hdr__nav a.is-on{color:var(--white)}
.hdr__ink{position:absolute;bottom:-2px;height:2px;background:var(--red);width:0;left:0;
  transition:transform 420ms var(--ease),width 420ms var(--ease);pointer-events:none}
.hdr__cta{display:none}

.burger{margin-left:auto;width:44px;height:44px;display:grid;place-content:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--white);
  transition:transform var(--t-med),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobnav{position:fixed;inset:64px 0 0;z-index:88;background:var(--ink);
  padding:1.5rem var(--gut) 2rem;overflow-y:auto;
  animation:mobIn 320ms var(--ease)}
@keyframes mobIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobnav nav{display:grid;margin-bottom:1.6rem}
.mobnav a{display:flex;align-items:baseline;gap:.9rem;padding:1.05rem 0;
  border-bottom:1px solid var(--ink-3);font:700 1.28rem/1.1 var(--f-head);letter-spacing:-.02em}
.mobnav a i{font:500 .68rem var(--f-mono);color:var(--red);font-style:normal}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:clamp(2.2rem,6vw,4rem) 0 clamp(3rem,7vw,4.5rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;opacity:.2}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,14,.72) 0%,rgba(14,14,14,.9) 55%,var(--ink) 100%)}
.hero__grid{position:relative;z-index:1;display:grid;gap:1.15rem}

.hero__c1{order:1}
.hero__vsl{order:2}
.hero__c2{order:3;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:var(--r);padding:1.25rem}

.quote{margin:1.5rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--red)}
.quote blockquote{margin:0;font-size:.95rem;line-height:1.55;color:#D8D8D8;font-style:italic}
.quote figcaption{margin-top:.55rem;font:500 .68rem var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--mute);display:flex;align-items:center;gap:.45rem}
.quote .dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex:0 0 auto}

.members{display:flex;align-items:center;gap:.85rem;margin-top:1.35rem;flex-wrap:wrap}
.members__pics{display:flex;flex:0 0 auto}
.members__pics img{width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2px solid var(--ink);margin-left:-11px;background:var(--ink-3)}
.members__pics img:first-child{margin-left:0}
.members__txt{display:grid;line-height:1.35;min-width:0}
.members__txt strong{font:700 .95rem var(--f-head)}
.members__txt > span{font-size:.78rem;color:var(--mute)}

.pills{display:flex;flex-wrap:wrap;gap:.45rem}
.pill{
  font:500 .74rem/1 var(--f-body);padding:.5rem .78rem;border-radius:999px;
  border:1px solid var(--ink-4);color:#CFCFCF;position:relative;overflow:hidden;
  transition:color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
  opacity:0;transform:scale(.92)
}
.is-in .pill,.pills.is-in .pill{opacity:1;transform:none;
  transition:opacity 420ms var(--ease) calc(var(--i,0)*55ms + 120ms),
             transform 480ms var(--ease) calc(var(--i,0)*55ms + 120ms),
             color var(--t-fast),border-color var(--t-fast)}
.pill::before{content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
.pill:hover{color:#fff;border-color:var(--red)}
.pill:hover::before{transform:scaleX(1)}
.pills--lg .pill{font-size:.8rem;padding:.58rem .9rem}
.sec--light .pill{border-color:var(--line);color:var(--mute-d)}
.sec--light .pill:hover{color:#fff}

.hero__c2 .btn{margin-top:1.05rem}
.hero__c2 .undlink{display:block;text-align:center;border:0}
.hero__c2 .undlink span,.hero__c2 .undlink{border-bottom:0}

.vsl__gtee{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;padding:.8rem 1rem;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-sm);
  font:500 .72rem/1.35 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mute);transition:border-color var(--t-fast),color var(--t-fast)}
.vsl__gtee b{color:var(--white);font-weight:700}
.vsl__gtee svg{color:var(--red);flex:0 0 auto}
.vsl__gtee em{margin-left:auto;font-style:normal;color:var(--red);transition:transform var(--t-fast)}
.vsl__gtee:hover{border-color:var(--red);color:#CFCFCF}
.vsl__gtee:hover em{transform:translateX(3px)}

/* =========================================================
   VIDEO FACADE
   ========================================================= */
.vwell{position:relative;aspect-ratio:9/16;background:var(--ink-2);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--ink-3)}
.vwell--wide,.vwell[data-ratio="16/9"]{aspect-ratio:16/9}
.vwell img.vwell__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease),filter 400ms var(--ease)}
.vwell iframe,.vwell video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vwell__btn{position:absolute;inset:0;display:grid;place-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.vwell__btn:hover ~ img.vwell__poster,.vwell:hover img.vwell__poster{transform:scale(1.035)}
.vwell__play{width:66px;height:66px;border-radius:50%;background:var(--red);
  display:grid;place-content:center;position:relative;
  transition:transform var(--t-med),background var(--t-fast)}
.vwell__play::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--red);animation:ring 2.5s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}
.vwell__play svg{margin-left:3px}
.vwell__btn:hover .vwell__play{transform:scale(1.08);background:var(--red-deep)}
.vwell.is-live .vwell__btn{opacity:0;transform:scale(1.15);pointer-events:none;
  transition:opacity 260ms var(--ease),transform 400ms var(--ease)}
.vwell__err{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:.55rem;text-align:center;padding:1.4rem;background:var(--ink-2)}
.vwell__err strong{font:700 .98rem/1.3 var(--f-head);color:var(--white);max-width:22ch}
.vwell__err span{font-size:.82rem;line-height:1.5;color:var(--mute);max-width:34ch}
.vwell__err code{font:500 .66rem var(--f-mono);color:var(--red);
  background:rgba(237,28,36,.1);padding:.28rem .5rem;border-radius:4px}
.vwell__ph{position:absolute;inset:0;display:grid;place-content:center;gap:.5rem;
  text-align:center;padding:1rem;color:var(--mute);font:500 .7rem var(--f-mono);
  text-transform:uppercase;letter-spacing:.1em}

/* =========================================================
   TOM / MAIN PROOF
   ========================================================= */
/* The main testimonial is a vertical Short. Rather than stranding a tall
   9:16 video in the middle of a wide dark section, it anchors a two-column
   block with the supporting copy beside it. Stacks on narrow screens. */
.tom__grid{margin-top:1.9rem;display:grid;gap:1.5rem;justify-items:center}
.tom__grid .vwell{width:100%;max-width:300px}
.tom__side{display:grid;gap:1.15rem;align-content:center;text-align:center}
.tom__side .eyebrow{padding-bottom:0}
.tom__side .eyebrow::after{display:none}
.tom__line{font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--mute);line-height:1.5}
.tom__line b{color:var(--white);font-weight:700}

.tom__facts{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap}
.tom__facts li{display:grid;gap:.15rem;text-align:left;
  border-left:2px solid var(--red);padding-left:.8rem}
.tom__facts b{font:800 clamp(1.5rem,4vw,2rem)/1 var(--f-head);letter-spacing:-.04em;color:var(--white)}
.tom__facts i{font:500 .62rem/1.4 var(--f-mono);font-style:normal;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute);max-width:14ch}

.tom__who{display:grid;gap:.2rem}
.tom__who b{font:700 1rem var(--f-head);color:var(--white)}
.tom__who span{font:500 .66rem var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--mute)}

.trust{margin-top:clamp(2.5rem,6vw,4rem);padding-top:2rem;border-top:1px solid var(--ink-3)}
.trust__lbl{text-align:center;font:500 .68rem/1.6 var(--f-mono);text-transform:uppercase;
  letter-spacing:.14em;color:var(--mute-d);padding-inline:var(--gut);margin-bottom:1.35rem}
.mq--trust .mq__set{gap:0}
.mq--trust li{font:800 clamp(1rem,2.4vw,1.35rem) var(--f-head);text-transform:uppercase;
  letter-spacing:-.01em;color:#CFCFCF;padding:0 1.4rem;position:relative;white-space:nowrap}
.mq--trust li::after{content:"/";position:absolute;right:-.35rem;color:var(--red)}

/* ---- shared: ticks + chips (used by pricing + guarantee) ---- */
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.93rem;
  line-height:1.55;color:var(--mute-d)}
.sec--dark .ticks li{color:#C4C4C4}
.ticks li:last-child{margin-bottom:0}
.ticks li b{color:inherit;font-weight:600}
.ticks li::before,.ticks li::after{content:"";position:absolute;background:var(--red);
  border-radius:2px;transform-origin:left center;transform:scaleX(0)}
.ticks li::before{left:2px;top:.62em;width:6px;height:2px;rotate:45deg}
.ticks li::after{left:5px;top:.72em;width:11px;height:2px;rotate:-48deg}
.is-in .ticks li::before,.ticks.is-in li::before{transform:scaleX(1);
  transition:transform 160ms var(--ease) calc(var(--n,0)*55ms + 200ms)}
.is-in .ticks li::after,.ticks.is-in li::after{transform:scaleX(1);
  transition:transform 260ms var(--ease) calc(var(--n,0)*55ms + 340ms)}

.chip{display:inline-block;font:500 .6rem var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;padding:.34rem .6rem;border-radius:4px;background:var(--ink-4);color:#DDD}
.chip--red{background:var(--red-soft);color:var(--red)}

/* =========================================================
   GUARANTEE
   ========================================================= */
.gtee{background:var(--ink);border-top:1px solid var(--ink-3)}
.gtee__in{display:grid;justify-items:center}
.gtee__shield{width:54px;height:54px;border-radius:50%;border:1px solid var(--ink-4);
  display:grid;place-content:center;color:var(--red);margin-bottom:1.15rem}
.gtee__copy{max-width:640px;margin-top:1.15rem;color:var(--mute);font-size:1.02rem;line-height:1.65}
.gtee__copy b{color:var(--white);font-weight:600}
.gtee__deal{margin-top:2.2rem}
.steps{display:grid;gap:.85rem;width:100%;max-width:900px;margin-top:1.3rem}
.steps li{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r);
  padding:1.15rem;opacity:0;transform:translateY(10px)}
.is-in .steps li,.steps.is-in li{opacity:1;transform:none;
  transition:opacity 480ms var(--ease) calc(var(--i,0)*90ms),transform 520ms var(--ease) calc(var(--i,0)*90ms)}
.steps li i{font:700 .68rem var(--f-mono);color:var(--red);font-style:normal}
.steps li h3{font:700 1.02rem var(--f-head);margin:.4rem 0 .35rem;letter-spacing:-.015em}
.steps li p{font-size:.9rem;color:var(--mute);line-height:1.5}
.gtee__close{max-width:680px;margin-top:1.8rem;color:var(--mute);font-size:.97rem;line-height:1.6}
.gtee__close b{color:var(--white);font-weight:600}

/* =========================================================
   PROCESS TIMELINE
   ========================================================= */
.tl{margin-top:2rem}
.tl__rail{position:relative;display:grid;gap:0}
.tl__line,.tl__fill{display:none}
.tl__node{position:relative;text-align:left;padding:1.05rem 0 1.05rem 1.6rem;
  border-bottom:1px solid var(--line);display:grid;gap:.2rem;
  transition:opacity var(--t-med)}
.tl__node i{font:500 .64rem var(--f-mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--mute-d);font-style:normal;order:2}
.tl__node b{font:700 clamp(1rem,2.2vw,1.15rem) var(--f-head);letter-spacing:-.018em;order:1}
.tl__dot{position:absolute;left:0;top:1.35rem;width:9px;height:9px;border-radius:50%;
  background:var(--line);transition:background var(--t-med),transform var(--t-med)}
.tl__node.is-on .tl__dot{background:var(--red);transform:scale(1.35)}
.tl__node:not(.is-on){opacity:.5}
.tl__node:hover{opacity:.85}
.tl__node.is-on{opacity:1}
/* invite pulse on first node until clicked */
.tl:not(.is-touched) .tl__node:first-child .tl__dot::after{content:"";position:absolute;inset:-4px;
  border-radius:50%;border:1.5px solid var(--red);animation:ring 2.4s var(--ease) infinite}

.tl__panes{position:relative;margin-top:1.4rem}
.tl__pane{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.2rem,3vw,1.9rem)}
.tl__pane[hidden]{display:none}
.tl__pane.is-anim{animation:paneIn 420ms var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tl__pane .h3{margin:.75rem 0 .6rem}
.tl__pane > p{color:var(--mute-d);line-height:1.65;font-size:.97rem}
.tl__goal{margin-top:1.2rem;padding:.85rem 1rem;background:var(--paper);border-radius:var(--r-sm);
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;border-left:2px solid var(--red)}
.tl__goal i{font:500 .62rem var(--f-mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--mute-d);font-style:normal}
.tl__goal span{font:600 .93rem var(--f-body);color:var(--ink)}

.proc__cta{margin-top:2.6rem;display:grid;justify-items:center;gap:.9rem;text-align:center}
.proc__cta .eyebrow{padding-bottom:.5rem}
.proc__cta .micro{color:var(--mute-d);margin-top:0}

/* =========================================================
   MARQUEES + TRANSFORMATIONS
   ========================================================= */
.tf__sub{color:var(--mute);margin-top:.8rem;font-size:.97rem}
.tf__dmlbl{margin-top:clamp(2.2rem,5vw,3.2rem)}
.mq{overflow:hidden;position:relative;margin-top:1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq__track{display:flex;width:max-content;animation:mqroll var(--dur,60s) linear infinite}
.mq[data-dir="rev"] .mq__track{animation-direction:reverse}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
@keyframes mqroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq__set{display:flex;align-items:center;gap:.85rem;padding-right:.85rem;flex:0 0 auto}

/* The gallery mixes two shapes: the high-kick pairs are side by side and
   landscape, the older pairs are stacked and portrait, and their aspect
   ratios run from 0.67 to 1.51. Forcing one ratio would crop somebody's
   before or after off the edge, so every tile shares one HEIGHT and takes
   its natural width. The row stays flush and nothing is cropped. */
.batile{position:relative;flex:0 0 auto;height:clamp(214px,54vw,264px);width:auto;
  border-radius:var(--r);
  overflow:hidden;border:1px solid var(--ink-3);background:var(--ink-2);cursor:zoom-in;
  transition:border-color var(--t-med),transform var(--t-med)}
.batile img{height:100%;width:auto;max-width:none;object-fit:cover;
  transition:transform 600ms var(--ease)}
.batile:hover{border-color:var(--red)}
.batile:hover img{transform:scale(1.04)}

.batile__tag{position:absolute;font:700 .56rem var(--f-mono);text-transform:uppercase;
  letter-spacing:.14em;padding:.28rem .5rem;border-radius:4px;backdrop-filter:blur(6px);
  pointer-events:none}
.batile__tag--b{background:rgba(0,0,0,.62);color:#DADADA}
.batile__tag--a{background:var(--red);color:#fff}

/* Stacked pair: before on top, after underneath. */
.batile--v .batile__tag--b{top:.5rem;left:.5rem}
.batile--v .batile__tag--a{bottom:.5rem;left:.5rem}

/* Side-by-side pair: the labels have to follow the halves they describe,
   so before sits bottom-left and after bottom-right. */
.batile--h .batile__tag--b{bottom:.5rem;left:.5rem}
.batile--h .batile__tag--a{bottom:.5rem;right:.5rem}

.dmtile{flex:0 0 auto;width:clamp(150px,36vw,196px);border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--ink-3);background:var(--ink-2);cursor:zoom-in;
  transition:border-color var(--t-med)}
.dmtile img{width:100%;height:auto;display:block}
.dmtile:hover{border-color:var(--red)}

/* =========================================================
   VALUE STACK + PRICING
   ========================================================= */
.stack{margin-top:1.9rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.15rem,3vw,1.7rem)}
.stack li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.stack li span{display:grid;gap:.15rem}
.stack li b{font:600 .97rem/1.35 var(--f-body)}
.stack li i{font:500 .74rem var(--f-body);font-style:normal;color:var(--mute-d)}
.stack li em{font:700 .97rem var(--f-mono);font-style:normal;flex:0 0 auto}
.stack li em.inc{color:var(--red);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.stack__tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:1rem;padding-top:1rem;border-top:2px solid var(--red)}
.stack__tot > span{font:500 .7rem var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute-d)}
.stack__tot b{font:800 clamp(1.4rem,3.4vw,1.9rem) var(--f-head);letter-spacing:-.03em}

.plans{display:grid;gap:1.15rem;margin-top:1.6rem;justify-content:center}
.plan{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,3.2vw,1.9rem);position:relative;display:flex;flex-direction:column}
.plan--best{border:2px solid var(--ink);box-shadow:0 16px 44px rgba(0,0,0,.1)}
.plan__rib{position:absolute;top:-1px;left:-1px;right:-1px;background:var(--red);color:#fff;
  font:700 .6rem var(--f-mono);text-transform:uppercase;letter-spacing:.16em;text-align:center;
  padding:.42rem;border-radius:var(--r) var(--r) 0 0}

.plan__sub{color:var(--mute-d);font-size:.9rem;margin-top:.3rem}
.plan__price{margin-top:1.1rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.plan__price b{font:800 clamp(2.4rem,6.5vw,3.15rem)/1 var(--f-head);letter-spacing:-.04em}
.plan__price s{font:500 1.02rem var(--f-mono);color:var(--mute-d)}
.plan__price small{font:600 1rem var(--f-body);color:var(--mute-d)}
.plan__terms{font:500 .68rem var(--f-mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--mute-d);margin-top:.5rem}
.plan__note{margin-top:.9rem;font-size:.9rem;color:var(--mute-d);line-height:1.5}
.plan__note b{color:var(--ink);font-weight:600}
.ticks--plan{margin:1.3rem 0 1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.plan .btn{margin-top:auto}
.plan .micro{color:var(--mute-d)}

/* =========================================================
   FAQ
   ========================================================= */
.faq__list{margin-top:1.9rem;border-top:1px solid var(--ink-3)}
.faq__list details{border-bottom:1px solid var(--ink-3)}
.faq__list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.2rem 0;font:600 clamp(.98rem,2.1vw,1.08rem)/1.4 var(--f-head);letter-spacing:-.015em;
  transition:color var(--t-fast)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary:hover{color:var(--red)}
.faq__list summary em{margin-left:auto;width:18px;height:18px;flex:0 0 auto;position:relative;
  transition:transform 340ms var(--ease)}
.faq__list summary em::before,.faq__list summary em::after{content:"";position:absolute;
  background:var(--red);left:50%;top:50%;border-radius:2px}
.faq__list summary em::before{width:12px;height:1.7px;transform:translate(-50%,-50%)}
.faq__list summary em::after{width:1.7px;height:12px;transform:translate(-50%,-50%);
  transition:opacity 200ms var(--ease)}
.faq__list details[open] summary em{transform:rotate(180deg)}
.faq__list details[open] summary em::after{opacity:0}
.faq__list details > div{padding:0 0 1.35rem;animation:paneIn 380ms var(--ease)}
.faq__list p{color:var(--mute);line-height:1.68;font-size:.95rem;max-width:66ch}
.faq__list p b{color:var(--white);font-weight:600}
.faq__list a{color:var(--red);border-bottom:1px solid currentColor}

/* =========================================================
   FOOTER + STICKY + LIGHTBOX
   ========================================================= */
.ftr{background:var(--ink);border-top:1px solid var(--ink-3);padding:2.6rem 0 1.4rem}
.ftr__in{display:grid;gap:1.6rem}
.ftr__brand img{width:52px;margin-bottom:.8rem}
.ftr__brand p{color:var(--mute);font-size:.88rem;max-width:36ch}
.ftr__nav{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem}
.ftr__nav a{font-size:.87rem;color:var(--mute);transition:color var(--t-fast)}
.ftr__nav a:hover{color:var(--red)}
.ftr__legal{text-align:center;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--ink-3);
  font:500 .68rem var(--f-mono);letter-spacing:.08em;color:var(--mute-d)}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;
  gap:1rem;padding:.7rem var(--gut);background:rgba(14,14,14,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--ink-3);
  transform:translateY(110%);transition:transform 420ms var(--ease);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}
.sticky.is-on{transform:none}
.sticky__l{display:grid;line-height:1.25}
.sticky__l b{font:700 .95rem var(--f-head)}
.sticky__l span{font-size:.74rem;color:var(--mute)}
.sticky .btn{margin-left:auto}

.lb{position:fixed;inset:0;z-index:150;display:grid;place-content:center;padding:1.5rem;
  background:rgba(6,6,6,.94);animation:lbIn 240ms var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{max-width:min(94vw,760px);max-height:88vh;width:auto;border-radius:var(--r);
  animation:lbImg 320ms var(--ease)}
@keyframes lbImg{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lb__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;
  background:var(--ink-2);color:#fff;font-size:1.6rem;line-height:1;
  border:1px solid var(--ink-4);transition:background var(--t-fast)}
.lb__x:hover{background:var(--red);border-color:var(--red)}

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (min-width:720px){
  .tom__grid{grid-template-columns:auto 1fr;gap:2.4rem;align-items:center;justify-items:start;
    max-width:840px;margin-inline:auto}
  .tom__grid .vwell{width:300px}
  .tom__side{text-align:left}
  .tom__facts{justify-content:flex-start}
  .tom__line{margin:0}

  .hero__grid{grid-template-columns:1fr 1fr;gap:1.35rem;align-items:start}
  .hero__c1{order:1;grid-column:1}
  .hero__c2{order:3;grid-column:1}
  .hero__vsl{order:2;grid-column:2;grid-row:1 / span 2;position:sticky;top:92px}
  .hero__c2{padding:1.5rem}

  .steps{grid-template-columns:repeat(3,1fr)}

  .tl__rail{grid-template-columns:repeat(4,1fr);gap:0;padding-top:2.4rem;border-bottom:1px solid var(--line)}
  .tl__line{display:block;position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
  .tl__fill{display:block;position:absolute;top:0;left:0;height:2px;background:var(--red);
    width:25%;transition:transform 500ms var(--ease);transform-origin:left}
  .tl__node{border-bottom:0;padding:0 1rem 1.3rem 0;text-align:left}
  .tl__dot{top:calc(-2.4rem - 4.5px);left:0}

  .plans{grid-template-columns:minmax(0,480px);align-items:start}
  .ftr__in{grid-template-columns:1fr auto;align-items:start}
  .ftr__nav{justify-content:flex-end;max-width:420px}
  .sticky{display:none}
}

@media (min-width:1024px){
  .hdr__nav{display:flex}
  .hdr__cta{display:inline-flex;margin-left:1.4rem}
  .burger{display:none}
  .mobnav{display:none !important}
  .hero__c1{padding-right:1.5rem}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .mask > span > span{transform:none !important}
  .pill{opacity:1 !important;transform:none !important}
  .steps li{opacity:1 !important;transform:none !important}
  .eyebrow::after{transform:scaleX(1) !important}
  .eyebrow.center::after{transform:translateX(-50%) scaleX(1) !important}
  .ticks li::before,.ticks li::after{transform:scaleX(1) !important}
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq__track{animation:none !important;width:100%;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .mq__set{flex-wrap:nowrap}
  .mq__set[aria-hidden="true"]{display:none}
  .vwell__play::before{animation:none !important;opacity:0}
  .tl:not(.is-touched) .tl__node:first-child .tl__dot::after{animation:none;opacity:0}
  .sticky{transition:none}
}

/* =========================================================
   HERO SPEC STRIP  (replaces the pill row)
   ========================================================= */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink-3)}
.spec li{padding:.95rem .4rem .85rem;border-bottom:1px solid var(--ink-3);
  border-right:1px solid var(--ink-3);display:grid;gap:.1rem;align-content:start}
.spec li:nth-child(4){border-right:0}
.spec li b{font:800 clamp(1.5rem,4.6vw,2rem)/1 var(--f-head);letter-spacing:-.04em;color:var(--white)}
.spec li i{font:500 .6rem/1.3 var(--f-mono);font-style:normal;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute)}
.spec__note{margin:.85rem 0 0;font:500 .68rem/1.6 var(--f-mono);text-transform:uppercase;
  letter-spacing:.09em;color:var(--mute)}
.hero__c2 .btn{margin-top:1.15rem}

/* =========================================================
   BENEFIT CARDS  (replaces the accordion panel)
   ========================================================= */
.bens{display:grid;gap:.9rem;margin-top:2rem}
.ben{position:relative;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem 1.3rem 1.3rem;overflow:hidden;
  transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.ben::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--ease)}
.ben.is-in::before,.is-in .ben::before{transform:scaleX(1);
  transition-delay:calc(var(--i,0) * 90ms + 140ms)}
.ben:hover{border-color:#CFCDC8;transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.07)}
.ben__n{position:absolute;top:.5rem;right:1rem;font:800 3.6rem/1 var(--f-head);
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--line);
  pointer-events:none;transition:-webkit-text-stroke-color var(--t-med)}
.ben:hover .ben__n{-webkit-text-stroke-color:var(--red-soft)}
.ben__t{font:700 clamp(1.08rem,2.3vw,1.24rem)/1.25 var(--f-head);letter-spacing:-.02em;
  max-width:15ch;position:relative}
.ben__l{margin-top:1rem;display:grid;gap:.6rem}
.ben__l li{position:relative;padding-left:1.25rem;font-size:.92rem;line-height:1.55;
  color:var(--mute-d)}
.ben__l li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2px;
  background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform 300ms var(--ease)}
.ben.is-in .ben__l li::before,.is-in .ben .ben__l li::before{transform:scaleX(1);
  transition-delay:calc(var(--i,0) * 90ms + var(--n,0) * 70ms + 280ms)}

/* =========================================================
   CASE CARDS  (5 uniform cards, one auto-scrolling row)
   ========================================================= */
.cases__sub{color:var(--mute);margin-top:.8rem;font-size:.95rem}
.mq--cases{margin-top:1.9rem}
.mq--cases .mq__set{gap:1rem;padding-right:1rem;align-items:stretch}
.mq--cases .mq__set > li{display:flex;flex:0 0 auto}
.ccard{width:clamp(272px,78vw,336px);display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t-med)}
.ccard:hover{border-color:var(--ink-4)}
.ccard .vwell{border:0;border-radius:0;border-bottom:1px solid var(--ink-3);
  aspect-ratio:1/1 !important;flex:0 0 auto}
.ccard .vwell__play{width:54px;height:54px}
.ccard__b{padding:1.15rem;display:flex;flex-direction:column;flex:1}
.ccard__b .eyebrow{padding-bottom:.55rem}
.ccard__t{font:700 1.06rem/1.25 var(--f-head);letter-spacing:-.02em;margin:.65rem 0 .55rem}
.ccard__p{font-size:.88rem;line-height:1.55;color:var(--mute)}
.ccard__b .pills{margin-top:.95rem}
.ccard__b .pill{font-size:.68rem;padding:.4rem .6rem}
.ccard__who{margin-top:auto;padding-top:.95rem;border-top:1px solid var(--ink-3);
  display:grid;gap:.15rem}
.ccard__who b{font:700 .88rem var(--f-head);color:var(--white)}
.ccard__who span{font:500 .62rem var(--f-mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute)}

/* Pills inside a marquee have no [data-reveal] ancestor to switch them on,
   so they must start visible rather than waiting for a reveal that never comes. */
.mq .pill{opacity:1;transform:none}

/* a playing video must stop its row from sliding away */
.mq.is-held .mq__track{animation-play-state:paused}

@media (min-width:720px){
  .bens{grid-template-columns:1fr 1fr;gap:1rem}
  .ben{padding:1.6rem 1.5rem 1.5rem}
  .ben__n{font-size:4.2rem}
}