/* =========================================================
   FREE HIGH KICK MOBILITY STARTER PACK: Flexibility Maestro
   Same design system as the High Kick page.
   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,figure{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)}
.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.05rem,6vw,3.1rem)/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;
}

.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(.98rem,1.9vw,1.08rem);line-height:1.62;margin-top:1.1rem;max-width:52ch}
.lede b{color:var(--white);font-weight:600}

/* =========================================================
   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}

.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%}

/* =========================================================
   HEADER (no navigation: one page, one action)
   ========================================================= */
.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;min-height:62px}
.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__cta{display:none;margin-left:auto}

/* =========================================================
   HERO + OPT-IN
   ========================================================= */
.hero{position:relative;padding:clamp(2rem,5.5vw,4rem) 0 clamp(3rem,7vw,4.75rem);overflow:hidden}
.hero__glow{position:absolute;inset:auto -20% -40% auto;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(closest-side,rgba(237,28,36,.16),transparent 70%);pointer-events:none}
.hero__grid{position:relative;z-index:1;display:grid;gap:1.6rem}
.hero__copy{min-width:0}
.hero .h1{max-width:17ch}

.hero__visual{border-radius:var(--r);overflow:hidden;border:1px solid var(--ink-3);
  background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.45);
  max-width:440px;width:100%;justify-self:center}
.hero__visual img{width:100%;height:auto}

.optin{margin-top:1.5rem;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:var(--r);padding:clamp(1.1rem,3vw,1.5rem);position:relative;overflow:hidden}
.optin::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red)}
.optin__fields{display:grid;gap:.8rem}
.field{display:grid;gap:.4rem}
.field label{font:500 .66rem var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.field input{width:100%;font:500 1rem/1.3 var(--f-body);color:var(--white);
  background:var(--ink);border:1.5px solid var(--ink-4);border-radius:var(--r-sm);
  padding:.9rem 1rem;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input::placeholder{color:#5c5c5c}
.field input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.field input[aria-invalid="true"]{border-color:var(--red)}
.optin__btn{margin-top:1rem;position:relative}
.optin__spin{display:none;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.optin.is-busy .optin__btn{pointer-events:none;opacity:.88}
.optin.is-busy .optin__spin{display:inline-block}
.optin.is-busy .optin__btn .btn__arw{display:none}
.optin__small{margin-top:.75rem;font:500 .66rem/1.5 var(--f-mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute);text-align:center}
.optin__err{margin-top:.75rem;padding:.7rem .9rem;border-radius:var(--r-sm);
  background:var(--red-soft);color:#FF8A8F;font-size:.88rem;line-height:1.45;text-align:center}
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}

.optin__done{display:grid;justify-items:center;text-align:center;gap:.6rem;padding:.6rem 0 .2rem;outline:none}
.optin__done:not([hidden]){animation:paneIn 420ms var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.optin__check{width:52px;height:52px;border-radius:50%;background:var(--red);position:relative}
.optin__check::before,.optin__check::after{content:"";position:absolute;background:#fff;border-radius:2px}
.optin__check::before{left:15px;top:27px;width:10px;height:3px;rotate:45deg}
.optin__check::after{left:20px;top:24px;width:20px;height:3px;rotate:-48deg}
.optin__done-t{font:800 clamp(1.3rem,3vw,1.6rem)/1.15 var(--f-head);letter-spacing:-.02em}
.optin__done-p{color:var(--mute);font-size:.95rem;line-height:1.55;max-width:40ch}
.optin__done-p b{color:var(--white);font-weight:600;overflow-wrap:anywhere}

/* =========================================================
   WHAT'S INSIDE (cards, same as the High Kick page benefits)
   ========================================================= */
.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{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:26ch;position:relative}
.ben__p{margin-top:.7rem;font-size:.95rem;line-height:1.58;color:var(--mute-d);max-width:44ch;position:relative}

/* =========================================================
   THIS IS FOR YOU IF
   ========================================================= */
.fit__list{display:grid;gap:.75rem;margin-top:1.9rem}
.fit__list li{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r);
  padding:1.1rem 1.15rem 1.1rem 3rem;font:600 clamp(.98rem,2vw,1.08rem)/1.45 var(--f-body);
  color:var(--white);margin:0;transition:border-color var(--t-med)}
.fit__list li:hover{border-color:var(--ink-4)}

/* ticks (drawn checkmarks), shared */
.ticks li{position:relative}
.ticks li::before,.ticks li::after{content:"";position:absolute;background:var(--red);
  border-radius:2px;transform-origin:left center;transform:scaleX(0)}
.fit__list li::before{left:1.2rem;top:calc(1.1rem + .72em);width:7px;height:2.5px;rotate:45deg}
.fit__list li::after{left:1.55rem;top:calc(1.1rem + .82em);width:13px;height:2.5px;rotate:-48deg}
.ticks.is-in li::before{transform:scaleX(1);
  transition:transform 160ms var(--ease) calc(var(--n,0)*90ms + 200ms)}
.ticks.is-in li::after{transform:scaleX(1);
  transition:transform 260ms var(--ease) calc(var(--n,0)*90ms + 340ms)}

/* =========================================================
   WHO I AM
   ========================================================= */
.coach__grid{display:grid;gap:1.8rem;align-items:center}
.coach__pic{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.coach__pic img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}
.coach__p{margin-top:1.1rem;color:var(--mute-d);font-size:clamp(1rem,2vw,1.1rem);line-height:1.65;max-width:50ch}
.coach__p b{color:var(--ink);font-weight:600}
.coach__facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem}
.coach__facts li{display:grid;gap:.2rem;border-left:2px solid var(--red);padding-left:.85rem}
.coach__facts b{font:800 clamp(1.6rem,4vw,2.1rem)/1 var(--f-head);letter-spacing:-.04em;color:var(--ink)}
.coach__facts i{font:500 .62rem/1.4 var(--f-mono);font-style:normal;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute-d);max-width:18ch}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final{overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:50%;width:80vw;height:80vw;max-width:760px;max-height:760px;
  transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(237,28,36,.14),transparent 70%);pointer-events:none}
.final__in{position:relative;display:grid;justify-items:center}
.final__btn{margin-top:1.8rem}
.final .optin__small{margin-top:.9rem}

/* =========================================================
   FOOTER + STICKY
   ========================================================= */
.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;
  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}

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (min-width:560px){
  .optin__fields{grid-template-columns:1fr 1.35fr}
}

@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}
  .fit__list{grid-template-columns:1fr 1fr;gap:.9rem}
  .coach__grid{grid-template-columns:1.05fr 1fr;gap:3rem}
  .ftr__in{grid-template-columns:1fr auto;align-items:start}
  .ftr__nav{justify-content:flex-end;max-width:420px}
  .sticky{display:none}
  .hdr__cta{display:inline-flex}
}

@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:3rem;align-items:center}
  .hero__visual{max-width:none;justify-self:stretch}
  .optin__fields{grid-template-columns:1fr 1.35fr}
}

/* =========================================================
   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}
  .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}
  .optin__spin{animation:spin 1.4s linear infinite !important}
  .sticky{transition:none}
}