/* K2 Athletics - shared rules for the inner pages (offer, info, legal). */
.phero{position:relative; overflow:hidden; isolation:isolate; padding:calc(40px) 0 40px}
.phero .media{position:absolute; inset:0; z-index:-1}
.phero .media img{width:100%; height:100%; object-fit:cover; filter:saturate(.6) contrast(1.06) brightness(.7)}
.phero .media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--bg) 0%, rgba(11,11,12,.9) 40%, rgba(11,11,12,.55) 100%)}
.phero h1{font-size:clamp(2.6rem,12.5vw,5.25rem); margin:10px 0 16px}
.phero .lead{font-size:16px; line-height:1.5; color:var(--t); max-width:36em}
.phero .price-line{margin-top:18px; font:400 26px/1 Anton,sans-serif; color:var(--w); text-transform:uppercase; letter-spacing:.01em}
.phero .price-line small{display:block; margin-top:8px; font:400 13px/1.4 Inter,sans-serif; color:var(--t); text-transform:none; letter-spacing:0}
.phero .btn{margin-top:22px}
.phero .note{margin-top:10px; font-size:13px; color:var(--m)}
.card{background:var(--s1); border:1px solid var(--line); border-radius:12px; padding:20px 18px; display:flex; flex-direction:column; gap:12px}
.card h3{font-size:clamp(1.6rem,6.5vw,2rem)}
.card p{font-size:15px}
.card .pr{font:400 26px/1 Anton,sans-serif; color:var(--w); text-transform:uppercase; letter-spacing:.01em}
.cards{display:grid; gap:14px}
.list{display:grid; gap:0}
.list li{display:grid; grid-template-columns:28px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-size:15px; color:var(--t)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li::before{content:"\2713"; font:400 18px/1.2 Anton,sans-serif; color:var(--volt)}
.list.x li::before{content:"\2717"; color:var(--m)}
.steps{display:grid; gap:18px; counter-reset:s}
.steps li{display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start}
.steps li::before{counter-increment:s; content:"0" counter(s); font:400 34px/1 Anton,sans-serif; color:var(--volt)}
.steps b{display:block; color:var(--w); font-weight:600; margin-bottom:4px}
.steps p{font-size:15px}
.rows{display:grid}
.rows > div{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-top:1px solid var(--line); font-size:15px; color:var(--t)}
.rows > div:last-child{border-bottom:1px solid var(--line)}
.rows b{color:var(--w); font-weight:600; white-space:nowrap; text-align:right}
.math{font-size:14px; color:var(--t)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:18px 0; color:var(--w); font:500 17px/1.3 Inter,sans-serif; -webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative; flex:none; width:14px; height:14px}
.plus::before,.plus::after{content:""; position:absolute; left:0; top:6px; width:14px; height:2px; background:var(--w); transition:transform .3s ease}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq .a{padding:0 0 22px; max-width:60ch; font-size:15px}
.form{display:grid; gap:16px; max-width:560px}
.form .two{display:grid; gap:12px}
.form fieldset{border:0; display:grid; gap:6px}
.form legend{font:500 13px/1.3 Inter,sans-serif; color:var(--w); margin-bottom:6px}
.form .btn{width:100%}
.guardian{border:1px solid var(--line); border-radius:12px; padding:16px; display:grid; gap:14px; background:var(--s1)}
.guardian h3{font-size:1.5rem}
.form .fine{font-size:12px; color:var(--m)}
.honest{font-size:14px; color:var(--m)}
.legal{max-width:720px}
.legal h2{font-size:clamp(1.6rem,6.5vw,2.25rem); margin:36px 0 12px}
.legal h3{font-size:1.25rem; margin:24px 0 8px; font-family:Inter,sans-serif; font-weight:600; text-transform:none; letter-spacing:0}
.legal p,.legal li{font-size:15px; color:var(--t); margin-bottom:10px}
.legal ul{padding-left:18px; list-style:disc}
.legal .small{color:var(--m)}
@media (min-width:720px){
  .cards{grid-template-columns:1fr 1fr}
  .form .two{grid-template-columns:1fr 1fr}
  .phero{padding:72px 0 64px}
  .phero .media{left:45%; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40%); mask-image:linear-gradient(to right, transparent 0, #000 40%)}
  .phero .media::after{background:linear-gradient(to top, var(--bg) 0%, rgba(11,11,12,.5) 40%, rgba(11,11,12,.3) 100%)}
}