/* =============================================================
   Ostex — дизайн «Movimiento»
   Швейцарский спортивный постер: тёплая бумага, чёрный + красный бренда,
   жёлтые «точки суставов», узкий Archivo, левая колонка-рельс с номерами,
   прямые углы и жёсткие линейки.
============================================================== */
:root{
  --paper:#F5F2EC; --white:#FFFFFF; --ink:#141414; --ink-soft:#5A5650; --rule:#141414; --line:#DDD6CA;
  --red:#E3262E; --red-deep:#B5161D; --red-50:#FCE4E2;
  --yellow:#FFC21A; --mint:#CDEFE6; --mint-deep:#1F7A5C;
  --wide:1200px;
  --font:"Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-variation-settings:"wdth" 100;}
h1,h2,h3,h4{font-family:var(--font); color:var(--ink); margin:0 0 .5em; line-height:1; letter-spacing:-.01em;}
h1,h2{font-weight:850; font-stretch:72%; font-variation-settings:"wdth" 72; text-transform:uppercase;}
h2{font-size:clamp(38px,5vw,68px); line-height:.95;}
h3{font-size:clamp(21px,2.2vw,26px); font-weight:800; font-variation-settings:"wdth" 88; margin-top:1.5em; line-height:1.15;}
h3.first{margin-top:0;}
h4{font-size:21px; font-weight:800; line-height:1.15;}
p{margin:0 0 1em;}
a{color:var(--red-deep);}
img{max-width:100%; display:block; height:auto;}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 28px;}
.icon{width:22px; height:22px; flex:none;}
.ph{background:#FFF1A8; color:#5F4600; font-weight:700; padding:1px 6px; font-size:.85em; letter-spacing:0; text-transform:none; font-variation-settings:"wdth" 100;}
.lead{font-size:19px; color:var(--ink-soft); max-width:640px;}
section{padding:96px 0; border-top:2px solid var(--rule); scroll-margin-top:68px;}
section.paper{background:var(--paper);}
section.dark{background:var(--ink); color:#EDE9E2; border-top-color:var(--ink);}
section.dark h2{color:#fff;}

/* swiss grid: left rail with number + label */
.grid{display:grid; grid-template-columns:180px 1fr; gap:40px;}
.rail{position:sticky; top:92px; align-self:start; display:flex; flex-direction:column; gap:8px; border-top:6px solid var(--red); padding-top:14px;}
.rail .n{font-size:86px; line-height:.8; font-weight:900; font-variation-settings:"wdth" 62; color:var(--red);}
.rail .t{font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;}
section.dark .rail .t{color:#fff;}
.body{min-width:0;}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:40; background:var(--white); border-bottom:2px solid var(--rule);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.logo .mark{width:30px; height:30px; border-radius:50%; background:var(--red); position:relative; flex:none;}
.logo .mark::after{content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--yellow); left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(255,194,26,.35);}
.logo .wm{font-size:30px; font-weight:900; font-variation-settings:"wdth" 70; letter-spacing:.02em; line-height:1;}
.logo .sub{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; line-height:1.2; border-left:2px solid var(--red); padding-left:9px; color:var(--ink-soft);}
nav.main{display:flex; gap:0;}
nav.main a{color:var(--ink); text-decoration:none; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:8px 12px; border-bottom:3px solid transparent;}
nav.main a:hover{border-bottom-color:var(--red);}
.btn-sm{display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; padding:11px 18px; cursor:pointer;}
.btn-sm .icon{width:18px; height:18px;}
.btn-sm:hover{background:var(--ink);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:14px; background:var(--red); color:#fff; font-family:var(--font); font-weight:850; font-size:18px; letter-spacing:.06em; text-transform:uppercase; padding:18px 30px; cursor:pointer; text-decoration:none; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); transition:transform .12s, box-shadow .12s, background .15s;}
.btn .icon{width:20px; height:20px;}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink);}
.btn:active{transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink);}
.btn.white{background:#fff; color:var(--ink);}
.btn-note{font-size:13px; color:var(--ink-soft); margin:14px 0 0;}

/* ---------- hero ---------- */
.hero{background:var(--paper); padding:44px 0 70px; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:48px 48px; opacity:.55; pointer-events:none;}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
.kicker-line{display:inline-flex; flex-wrap:wrap; gap:0; margin-bottom:22px; border:2px solid var(--ink); max-width:100%; background:#fff;}
.kicker-line span{font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px;}
.kicker-line span + span{border-left:2px solid var(--ink);}
.kicker-line span:first-child{background:var(--ink); color:#fff;}
.hero h1{font-size:clamp(44px,6.4vw,92px); line-height:.9; margin-bottom:20px;}
.hero h1 mark{background:none; color:var(--red);}
.hero h1 .dash{display:block; font-size:.36em; line-height:1.2; letter-spacing:.04em; margin-top:14px; color:var(--ink-soft); font-variation-settings:"wdth" 90;}
.checks{list-style:none; padding:0; margin:0 0 30px; display:grid; gap:8px;}
.checks li{display:flex; gap:10px; align-items:center; font-weight:700; font-size:16px;}
.checks .icon{width:24px; height:24px; color:#fff; background:var(--ink); padding:4px;}
.buy{display:flex; align-items:stretch; flex-wrap:wrap; gap:18px 26px;}
.buy .pr{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:12px; align-items:end;}
.buy .save{grid-row:1; grid-column:1; justify-self:start; background:var(--yellow); color:var(--ink); font-weight:900; font-size:15px; padding:3px 8px; border:2px solid var(--ink);}
.buy .old{grid-row:1; grid-column:2; color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px; font-weight:700;}
.buy .new{grid-row:2; grid-column:1 / 3; font-size:64px; line-height:.95; font-weight:900; font-variation-settings:"wdth" 70;}
.buy .new small{font-size:20px; font-weight:800; margin-left:6px; letter-spacing:.06em;}

.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px;}
.rings{position:absolute; width:440px; height:440px; left:50%; top:50%; transform:translate(-50%,-50%);}
.rings i{position:absolute; inset:0; border-radius:50%; border:2px solid var(--red); opacity:.25;}
.rings i:nth-child(1){inset:0; animation:pulse 3.6s ease-out infinite;}
.rings i:nth-child(2){inset:60px; opacity:.4; animation:pulse 3.6s ease-out 1.2s infinite;}
.rings i:nth-child(3){inset:120px; background:var(--red); opacity:1; border:none;}
@keyframes pulse{0%{transform:scale(.9); opacity:.45;} 100%{transform:scale(1.12); opacity:0;}}
.hero-visual img{position:relative; z-index:1; height:500px; width:auto; transform:rotate(-8deg); filter:drop-shadow(16px 22px 0 rgba(20,20,20,.12)) drop-shadow(0 20px 26px rgba(20,20,20,.25));}
.badge{position:absolute; z-index:2; top:6%; right:2%; width:104px; height:104px; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:900; font-size:16px; line-height:1.05; text-transform:uppercase; font-variation-settings:"wdth" 80; transform:rotate(10deg);}
.vol{position:absolute; z-index:0; left:-4%; bottom:4%; font-size:120px; font-weight:900; line-height:1; font-variation-settings:"wdth" 62; color:transparent; -webkit-text-stroke:2px var(--ink); opacity:.18;}

/* ticker + byline */
.ticker{background:var(--red); color:#fff; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);}
.ticker .track{max-width:var(--wide); margin:0 auto; padding:14px 28px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 0;}
.ticker .track > span{display:flex; align-items:center; gap:10px; font-weight:850; font-size:17px; text-transform:uppercase; letter-spacing:.06em; font-variation-settings:"wdth" 85; padding:0 26px;}
.ticker .track > span + span{border-left:2px solid rgba(255,255,255,.55);}
.ticker .icon{color:var(--yellow);}
.ticker .ph{text-transform:none;}
.byline .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.byline .wrap > div{padding:16px 20px; font-size:14px; color:var(--ink-soft); border-right:1px solid var(--line);}
.byline .wrap > div:last-child{border-right:none;}
.byline b{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-bottom:2px;}

/* ---------- qué es ---------- */
.about{display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:start; margin-top:10px;}
.about .big{font-size:20px; line-height:1.6;}
.body-map{margin:0; background:var(--paper); border:2px solid var(--ink); padding:20px 18px 16px; text-align:center;}
.body-map svg{width:100%; max-width:200px; margin:0 auto;}
.body-map .hot circle{fill:var(--yellow); stroke:var(--red); stroke-width:5;}
.body-map figcaption{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-top:12px; color:var(--ink-soft);}
.map-legend{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px;}
.map-legend li{font-size:13px; font-weight:800; background:#fff; border:1.5px solid var(--ink); padding:2px 8px;}
.spec{width:100%; border-collapse:collapse; margin-top:40px; font-size:16px; border-top:6px solid var(--ink);}
.spec caption{text-align:left; font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; padding-bottom:10px;}
.spec th,.spec td{text-align:left; vertical-align:top; padding:13px 0; border-bottom:1px solid var(--ink);}
.spec th{width:34%; font-weight:800; padding-right:20px;}
.spec tr:nth-child(5) td{font-weight:800; color:var(--red-deep);}
.block-red{margin-top:40px; background:var(--red); color:#fff; padding:34px 36px; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--ink);}
.block-red h3{color:#fff; margin-top:0;}
.block-red p{margin:0;}

/* ---------- ventajas ---------- */
.perks{list-style:none; padding:0; margin:20px 0 0; counter-reset:p; display:grid; grid-template-columns:1fr 1fr; border-top:2px solid #444;}
.perks li{counter-increment:p; display:grid; grid-template-columns:72px 1fr; align-items:center; padding:22px 18px 22px 0; border-bottom:2px solid #444; font-size:19px; font-weight:700; line-height:1.3;}
.perks li:nth-child(odd){border-right:2px solid #444; padding-right:28px;}
.perks li:nth-child(even){padding-left:28px;}
.perks li::before{content:counter(p,decimal-leading-zero); font-size:42px; font-weight:900; font-variation-settings:"wdth" 62; color:var(--yellow);}

/* ---------- ingredientes ---------- */
.duo{margin:16px 0 0; display:grid; grid-template-columns:1fr 1fr; border:2px solid var(--ink);}
.duo .half{padding:30px 32px 34px; position:relative;}
.duo .half svg{width:150px; height:150px; margin-bottom:10px;}
.duo .arnica{background:#FFF3CF;}
.duo .menthol{background:var(--mint); border-left:2px solid var(--ink);}
.duo .tagline{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:#fff; padding:3px 8px; margin-bottom:12px;}
.duo h4 i{font-weight:500;}
.duo p{margin:0; font-size:16px;}
.duo figcaption{grid-column:1 / -1; border-top:2px solid var(--ink); padding:10px 16px; font-size:13px; font-style:italic; color:var(--ink-soft); background:#fff;}
.two{display:grid; grid-template-columns:1.2fr 1fr; gap:30px; margin-top:40px; align-items:start;}
.two p{margin:0;}
.note{display:flex; gap:14px; background:var(--red-50); border-left:6px solid var(--red); padding:22px 24px; font-size:15.5px; color:#5E1013;}
.note .icon{color:var(--red); margin-top:3px;}
.note strong{display:block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep); margin-bottom:4px;}

/* ---------- aplicación ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); background:#fff; margin-top:16px;}
.step{padding:22px 20px 24px; display:flex; flex-direction:column; gap:6px; position:relative;}
.step + .step{border-left:2px solid var(--ink);}
.step .no{font-size:58px; font-weight:900; line-height:.85; font-variation-settings:"wdth" 62; color:var(--red);}
.step .icon{position:absolute; top:22px; right:20px; width:26px; height:26px;}
.step b{font-size:18px; font-weight:800; line-height:1.2; margin-top:6px;}
.step span:last-child{font-size:14.5px; color:var(--ink-soft); line-height:1.4;}
.step.alert{background:var(--ink); color:#fff;}
.step.alert .no{color:var(--yellow);}
.step.alert span:last-child{color:#CFCAC2;}
.knee{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:center; margin-top:44px; background:#fff; border:2px solid var(--ink); padding:24px;}
.knee-fig{margin:0;}
.knee-fig svg{width:100%; height:auto; display:block; border:1px solid var(--line);}
.knee-fig figcaption{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px;}
.knee p{margin:0;}
.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 18px;}
.quick div{display:flex; align-items:center; gap:12px; background:var(--mint); border:2px solid var(--ink); padding:14px 16px; font-weight:800; font-size:16px; line-height:1.25;}
.quick .icon{color:var(--mint-deep); width:26px; height:26px;}

/* ---------- opiniones ---------- */
.rev{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:26px 0 34px;}
.rev-col h4{display:inline-flex; align-items:center; gap:8px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; margin:0 0 14px; border:2px solid var(--ink);}
.rev-col h4 .icon{width:16px; height:16px;}
.rev-col.pos h4{background:var(--mint);}
.rev-col.neg h4{background:var(--red-50); color:var(--red-deep); border-color:var(--red-deep);}
.q{margin:0 0 14px; background:#fff; border:2px solid var(--ink); padding:22px 24px 18px; position:relative;}
.q::before{content:"“"; position:absolute; top:-6px; right:16px; font-size:90px; line-height:1; font-weight:900; color:var(--red); opacity:.9;}
.rev-col.neg .q::before{color:var(--ink-soft);}
.q blockquote{margin:0 0 12px; font-size:16.5px; padding-right:40px;}
.q figcaption{font-size:13.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:10px;}
.q figcaption b{color:var(--ink);}
.expect{border-top:6px solid var(--red); padding-top:20px;}
.expect p{margin:0; font-size:18px; max-width:76ch;}

/* ---------- precio ---------- */
.price-poster{display:grid; grid-template-columns:.7fr 1.3fr; background:var(--ink); color:#fff; border:2px solid var(--ink); margin-top:14px; box-shadow:10px 10px 0 var(--red);}
.pp-img{background:var(--red); display:flex; align-items:center; justify-content:center; padding:30px; position:relative; overflow:hidden;}
.pp-img::before{content:""; position:absolute; width:260px; height:260px; border-radius:50%; border:2px solid rgba(255,255,255,.4); box-shadow:0 0 0 40px rgba(255,255,255,.08);}
.pp-img img{position:relative; height:320px; width:auto; transform:rotate(-8deg); filter:drop-shadow(0 18px 20px rgba(0,0,0,.35));}
.pp-info{padding:36px 38px;}
.pp-info h3{color:#fff;}
.pp-info p{color:#CFCAC2;}
.pp-price{display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:end; border-top:2px solid #444; border-bottom:2px solid #444; padding:18px 0; margin:6px 0 24px;}
.pp-price .nm{grid-column:1 / -1; font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow);}
.pp-price .new{grid-row:2; grid-column:1; font-size:80px; line-height:.9; font-weight:900; font-variation-settings:"wdth" 64;}
.pp-price .new small{font-size:22px; margin-left:6px; letter-spacing:.06em;}
.pp-price .old{grid-row:2; grid-column:2; align-self:center; color:#9C968D; text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:3px; font-weight:800; font-size:22px;}
.pp-price .pn{grid-column:1 / -1; font-size:13px; color:#9C968D; margin-top:8px;}
.pp-info .btn{border-color:#fff; box-shadow:6px 6px 0 #fff;}
.tips{list-style:none; padding:0; margin:12px 0 0; border-top:2px solid var(--ink);}
.tips li{display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--ink); font-size:17px; font-weight:700;}
.tips span{width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; font-weight:900;}

/* ---------- faq ---------- */
.faq{border-top:2px solid var(--ink); margin-top:14px;}
.faq details{border-bottom:2px solid var(--ink);}
.faq summary{list-style:none; cursor:pointer; padding:22px 60px 22px 0; font-size:20px; font-weight:800; line-height:1.3; position:relative; display:flex; gap:18px; align-items:baseline;}
.faq summary::-webkit-details-marker{display:none;}
.faq .qn{font-size:13px; font-weight:900; letter-spacing:.1em; color:var(--red); flex:none; width:44px;}
.faq summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); font-size:24px; font-weight:700; line-height:1; transition:background .15s, color .15s;}
.faq details[open] summary::after{content:"–"; background:var(--red); color:#fff; border-color:var(--red);}
.faq details p{margin:0; padding:0 60px 22px 62px; color:var(--ink-soft); font-size:16.5px;}

/* ---------- día a día ---------- */
.walk{margin:16px 0 0; border:2px solid var(--ink);}
.walk svg{width:100%; height:auto; display:block;}
.walk figcaption{border-top:2px solid var(--ink); padding:9px 14px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); background:#fff;}
.habits{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:4px 0 20px;}
.habits div{display:flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--ink); padding:12px 14px; font-weight:800; font-size:15px; line-height:1.25;}
.habits div:nth-child(6),.habits div:nth-child(7){grid-column:span 2;}
.habits .icon{color:var(--red);}
.infobox{display:flex; gap:16px; background:#fff; border:2px solid var(--ink); border-left:8px solid var(--yellow); padding:24px 26px; margin-top:28px;}
.infobox > .icon{color:var(--ink); width:28px; height:28px; margin-top:2px;}
.infobox h3{margin-top:0;}
.infobox p{margin:0;}

/* ---------- final ---------- */
.final{background:var(--red); color:#fff; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); overflow:hidden; position:relative;}
.final .wrap{display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:30px; position:relative;}
.final .txt{padding:80px 0; position:relative;}
.big-word{position:absolute; left:-6px; top:18px; font-size:clamp(90px,16vw,220px); font-weight:900; line-height:.8; font-variation-settings:"wdth" 62; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.35); white-space:nowrap; pointer-events:none;}
.final h2{color:#fff; position:relative; font-size:clamp(40px,5.4vw,74px); max-width:12ch;}
.final p{position:relative; font-size:19px; color:#FFE1DF; margin-bottom:30px;}
.final .btn{position:relative;}
.final .pic{display:flex; justify-content:center; align-self:end;}
.final .pic img{height:420px; width:auto; transform:rotate(10deg) translateY(40px); filter:drop-shadow(0 22px 24px rgba(0,0,0,.35));}
.sources{padding:56px 0 64px; font-size:14px; color:var(--ink-soft);}
.sources h2{font-size:22px; font-variation-settings:"wdth" 85;}
.sources .wrap{max-width:900px;}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#B9B3AA; padding:46px 0; font-size:13.5px;}
footer .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #3A3733;}
footer .logo{color:#fff;}
footer .logo .sub{color:#B9B3AA;}
footer .legal{display:flex; gap:22px; flex-wrap:wrap;}
footer a{color:#EDE9E2;}
footer p{max-width:900px; margin:0 0 10px;}
footer strong{color:#fff;}

/* ---------- sticky cta ---------- */
.sticky-cta{display:none; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:2px solid var(--ink); padding:10px 14px; align-items:center; justify-content:space-between; gap:10px;}
.sticky-cta .price{font-size:24px; font-weight:900; line-height:1.05; font-variation-settings:"wdth" 70;}
.sticky-cta .price s{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); font-variation-settings:"wdth" 100; text-decoration-color:var(--red);}
.sticky-cta .btn{padding:12px 18px; font-size:15px; box-shadow:4px 4px 0 var(--ink);}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  nav.main{display:none;}
  .grid{grid-template-columns:120px 1fr; gap:28px;}
  .rail .n{font-size:64px;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:nth-child(3){border-left:none;}
  .step:nth-child(n+3){border-top:2px solid var(--ink);}
  .habits{grid-template-columns:repeat(2,1fr);}
  .habits div:nth-child(6),.habits div:nth-child(7){grid-column:span 2;}
}
@media (max-width:880px){
  body{font-size:16.5px;}
  section{padding:60px 0;}
  .wrap{padding:0 18px;}
  .grid{grid-template-columns:1fr; gap:14px;}
  .rail{position:static; flex-direction:row; align-items:flex-end; gap:12px; border-top-width:5px;}
  .rail .n{font-size:54px;}
  .rail .t{padding-bottom:6px;}
  .hero{padding:28px 0 50px;}
  .hero .wrap{grid-template-columns:minmax(0,1fr); gap:10px;}
  .hero h1{font-size:clamp(34px,9.6vw,64px); overflow-wrap:break-word; hyphens:auto;}
  .hero-visual{order:-1; min-height:360px;}
  .rings{width:300px; height:300px;}
  .rings i:nth-child(2){inset:40px;} .rings i:nth-child(3){inset:84px;}
  .hero-visual img{height:340px;}
  .badge{width:84px; height:84px; font-size:13px; right:6%;}
  .vol{font-size:84px;}
  .about,.two,.knee,.rev,.price-poster,.final .wrap,.duo{grid-template-columns:1fr;}
  .duo .menthol{border-left:none; border-top:2px solid var(--ink);}
  .body-map{max-width:340px;}
  .perks{grid-template-columns:1fr;}
  .perks li:nth-child(odd){border-right:none; padding-right:0;}
  .perks li:nth-child(even){padding-left:0;}
  .byline .wrap{grid-template-columns:1fr;}
  .byline .wrap > div{border-right:none; border-bottom:1px solid var(--line); padding:12px 0;}
  .byline .wrap > div:last-child{border-bottom:none;}
  .quick{grid-template-columns:1fr;}
  .pp-img img{height:260px;}
  .pp-info{padding:28px 22px;}
  .final .txt{padding:56px 0 20px; text-align:left;}
  .final .pic img{height:300px; transform:rotate(10deg) translateY(30px);}
  .block-red{padding:26px 22px; box-shadow:6px 6px 0 var(--ink);}
  .price-poster{box-shadow:6px 6px 0 var(--red);}
  .btn-sm{display:none;}
  .sticky-cta{display:flex;}
  footer{padding-bottom:110px;}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;}
  .step + .step{border-left:none; border-top:2px solid var(--ink);}
  .habits{grid-template-columns:1fr;}
  .habits div:nth-child(6),.habits div:nth-child(7){grid-column:auto;}
  .buy{flex-direction:column;}
  .buy .btn{width:100%;}
  .kicker-line span{font-size:11px; padding:6px 9px;}
  .faq summary{font-size:18px; padding-right:52px; gap:10px;}
  .faq .qn{width:36px;}
  .faq details p{padding:0 0 20px 0;}
  .ticker .track > span{padding:0 14px; font-size:15px;}
  .ticker .track > span + span{border-left:none;}
  .ticker .track{flex-direction:column; align-items:center; gap:6px;}
  .logo .sub{display:none;}
  .pp-price .new{font-size:64px;}
  .spec th{width:42%;}
}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .rings i{animation:none !important;} .btn{transition:none;}}

/* fixes */
.duo .half svg{display:block;}
.habits{display:flex; flex-wrap:wrap; gap:10px;}
.habits div{flex:0 1 auto;}
.habits div:nth-child(n){grid-column:auto;}
.final .txt{padding-top:150px;}
.big-word{top:34px; -webkit-text-stroke:2px rgba(255,255,255,.3);}
@media (max-width:880px){
  .final .txt{padding-top:110px;}
  .big-word{font-size:22vw; top:30px;}
}
@media (max-width:560px){ .infobox,.note{flex-direction:column; gap:10px;} }
