/* =========================================================
   STRETCH STRONG 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,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)}
.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__visual{order:2;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)}
.hero__visual img{width:100%;height:auto}
.hero__c2{order:3}
.hero__subline{margin-top:.8rem;text-align:center;font:500 .68rem/1.6 var(--f-mono);
  text-transform:uppercase;letter-spacing:.09em;color:var(--mute)}

.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__pane > p + p{margin-top:.75rem}
.tl__pane > .tl__goal{margin-top:1.2rem}
.tl__goal{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{bottom:calc(100% - var(--seam,50%) + .35rem);left:.5rem}
.batile--v .batile__tag--a{top:calc(var(--seam,50%) + .35rem);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}
.plan .btn{margin-top:1.3rem}
.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){
  .hero__grid{grid-template-columns:1fr 1fr;gap:1.35rem 2.4rem;align-items:center}
  .hero__c1{order:1;grid-column:1;align-self:end}
  .hero__c2{order:3;grid-column:1;align-self:start}
  .hero__visual{order:2;grid-column:2;grid-row:1 / span 2}

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

  .tl__rail{grid-template-columns:repeat(3,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:33.34%;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}
  .steps li{opacity:1 !important;transform:none !important}
  .eyebrow::after{transform:scaleX(1) !important}
  .eyebrow.center::after{transform:translateX(-50%) 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}
  .tl:not(.is-touched) .tl__node:first-child .tl__dot::after{animation:none;opacity:0}
  .sticky{transition:none}
}

/* =========================================================
   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;
  padding-right:4.4rem;position:relative}
@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}
}

/* =========================================================
   STRETCH STRONG ADDITIONS
   ========================================================= */
.ben__p{margin-top:.7rem;font-size:.95rem;line-height:1.58;color:var(--mute-d);max-width:44ch;position:relative}
.faq{border-top:1px solid var(--ink-3)}

/* =========================================================
   SALE-READY (filled in by the Pages Manager while a discount runs)
   Hidden unless <html> has .is-sale. Without the manager they never show.
   ========================================================= */
.sale-only{display:none !important}
.is-sale .sale-only{display:revert !important}
.is-sale .nosale-only{display:none !important}
.is-sale .sticky__l.sale-only{display:grid !important}
.is-sale .plan__sale.sale-only{display:inline-block !important}
.is-sale .offer.sale-only{display:block !important}
.plan__sale{display:inline-block;background:var(--red);color:var(--white);
  font:800 .78rem/1 var(--f-head);letter-spacing:.06em;text-transform:uppercase;
  padding:.42rem .7rem;border-radius:4px;margin:.2rem 0 .4rem}
.sticky__l s{opacity:.6;font-weight:600}
.offer{margin:1.05rem 0 0;padding:.95rem 1rem;border-radius:var(--r-sm);
  border:1px solid var(--red);background:var(--red-soft)}
.offer__tag{font:700 .64rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--red)}
.offer__price{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-top:.35rem}
.offer__price s{font:500 .95rem var(--f-mono);color:var(--mute)}
.offer__price b{font:800 clamp(1.7rem,4.4vw,2.1rem)/1 var(--f-head);letter-spacing:-.03em;color:var(--white)}
.offer__price span{font-size:.8rem;color:var(--mute)}
.offer__ends{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;font:600 .78rem var(--f-body);
  color:#DADADA;text-transform:uppercase;letter-spacing:.06em}
.offer .fmcd b{background:var(--ink)}
.plan__note .fmcd b{background:var(--ink);color:var(--white);font-size:.82rem;padding:.22rem .2rem}
.plan__note .fmcd i{color:var(--ink)}
.sticky__l .fmcd b{background:var(--red);font-size:.72rem;padding:.12rem .14rem;min-width:1.7em}
.sticky__l .fmcd i{font-size:.62rem}
.hero__c2 .offer{margin:0 0 1rem}