/* Home page (owned by the content stage). Moved verbatim from 03_apertura_homepage/v2/index.html;
   shared rules (tokens, type, header, buttons, .sec/.kick/.head/.fine/.ctas, footer) live in site.css. */

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);height:calc(100vh - var(--header-h) - 168px);min-height:660px}
.copy{position:relative;z-index:3;padding:clamp(28px,4.2vh,56px) 0 var(--s-6) var(--gutter);display:flex;flex-direction:column}
.hero h1{font-size:min(var(--t-hero),16.2vh);margin:clamp(18px,3vh,34px) 0 0;margin-right:-12%}
.hero h1 em{font-style:inherit;color:var(--signal-ink);display:block}
.hero .lede{max-width:37rem;font-size:var(--t-lede);line-height:1.45;margin-top:clamp(20px,3vh,32px);color:var(--ink-2)}
.hero .lede b{font-weight:700;color:var(--ink)}
.hero .ctas{margin-top:clamp(22px,3.4vh,36px)}
.shot{position:relative;margin:0}
.shot .frame{position:absolute;inset:0;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);background:var(--ink)}
.shot img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) brightness(1.02)}
.shot svg.trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tag{font:700 22px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
.caption{position:absolute;right:var(--gutter);top:22px;z-index:3;background:var(--paper);color:var(--ink);padding:8px 12px 7px;font:700 .78rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
.sticker{position:absolute;z-index:4;width:176px;height:176px;left:calc(16% - 70px);top:38px;transform:rotate(-12deg);filter:drop-shadow(5px 6px 0 rgba(15,46,40,.9))}
.sticker svg{width:100%;height:100%;display:block}
.stk-text{font:700 15.5px var(--f-label);letter-spacing:.2em;text-transform:uppercase}

/* ring draws itself once */
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s var(--ease) .35s forwards}
.pop{opacity:0;animation:pop .45s var(--ease) forwards}
.pop.d1{animation-delay:1.55s}.pop.d2{animation-delay:1.75s}.pop.d3{animation-delay:1.95s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* metrics strip */
.metrics{position:relative;z-index:2;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:repeat(6,1fr);height:168px;padding:0 var(--gutter)}
.metric{padding:26px 22px 22px;border-left:1px solid var(--rule-rev);display:flex;flex-direction:column;gap:10px}
.metric:first-of-type{border-left:0;padding-left:0}
.metric .n{display:flex;align-items:center;justify-content:space-between;color:var(--signal-on-ink)}
.metric h3{font-size:var(--t-metric);line-height:.9}
.metric p{font-size:var(--t-small);line-height:1.35;color:rgba(243,236,223,.76);max-width:15rem}

/* how it works */
.how{padding-bottom:var(--s-9)}
.seq{position:relative;margin-top:150px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.seq figure{position:relative;background:var(--ink)}
.seq figure .ph{position:relative;overflow:hidden}
.seq img{width:100%;aspect-ratio:4/5;object-fit:cover}
.seq figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:12px 2px 0;background:var(--paper)}
.seq figcaption b{font:900 italic 1.6rem/1 var(--f-display);text-transform:uppercase}
.seq figcaption span{font:700 .78rem/1 var(--f-label);letter-spacing:.12em;color:var(--muted)}
.seq .arc{position:absolute;z-index:2;left:0;width:100%;top:-118px;height:118px;pointer-events:none;overflow:visible}
.seq .air{position:absolute;z-index:3;left:50%;top:-136px;transform:translateX(-50%);background:var(--paper);padding:0 14px;color:var(--signal-ink);font:900 italic 1.7rem/1 var(--f-display);text-transform:uppercase;white-space:nowrap}
.seq .air small{font:700 .75rem/1 var(--f-label);letter-spacing:.14em;color:var(--ink);margin-left:10px;font-style:normal;vertical-align:middle}
.seq figure.key::before{content:"";position:absolute;inset:-5px;border:3px solid var(--signal);z-index:1;pointer-events:none}
.seqnote{margin-top:18px;color:var(--muted);font-size:var(--t-small)}
.steps{margin-top:var(--s-8);display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.step{padding:var(--s-6) var(--s-6) 0 0}
.step + .step{padding-left:var(--s-6);border-left:1px solid var(--rule)}
.step .k{font:900 italic 4.2rem/.8 var(--f-display);color:var(--signal-ink)}
.step h3{font-size:var(--t-h3);margin:14px 0 10px}
.step p{color:var(--ink-2);max-width:26rem}

/* what it measures */
.measures{background:var(--paper-2);border-top:1.5px solid var(--ink)}
.mgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,112px);margin-top:var(--s-8);align-items:start}
.mfig{position:relative;margin:0;max-width:560px;width:100%;justify-self:start}
.mfig .ph{position:relative;aspect-ratio:464/832;background:var(--ink);box-shadow:var(--shadow-hard)}
.mfig img{width:100%;height:100%;object-fit:cover}
.mfig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mtag{font:700 15px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
.sample{display:inline-block;margin-top:14px;font:700 .75rem/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sample b{color:var(--ink);background:var(--paper);padding:3px 7px;margin-right:8px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mlist{list-style:none;border-top:1.5px solid var(--ink)}
.mlist li{display:grid;grid-template-columns:72px minmax(0,1fr) 40px;gap:var(--s-5);align-items:start;padding:26px 0 24px;border-bottom:1px solid var(--rule)}
.mlist .no{font:900 italic 2.6rem/.8 var(--f-display);color:var(--signal-ink)}
.mlist h3{font-size:var(--t-h3);line-height:.9;margin-bottom:10px}
.mlist p{color:var(--ink-2);max-width:36rem}
.mlist .ico{stroke:var(--ink);margin-top:2px}

/* tricks */
.tricks .head p{color:rgba(243,236,223,.8)}
.trick{margin-top:var(--s-9)}
.trick + .trick{margin-top:var(--s-9)}
.thead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;padding-bottom:var(--s-4);border-bottom:1px solid var(--rule-rev);margin-bottom:var(--s-5)}
.tname{display:flex;align-items:center;gap:var(--s-4)}
.tname h3{font-size:clamp(3rem,5vw,6rem);color:var(--paper)}
.tmeta{font:700 .8rem/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(243,236,223,.72)}
.frames{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.frames figure{position:relative;margin:0;background:var(--ink);align-self:start}
.frames .ph{position:relative;overflow:hidden}
.frames img,.frames video{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.frames figcaption{display:flex;justify-content:space-between;padding:10px 2px 0;background:var(--ink);font:700 .75rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(243,236,223,.72)}
.frames figcaption b{font:900 italic 1.35rem/1 var(--f-display);color:var(--paper);letter-spacing:0}
.loop-btn{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 9px 5px;background:var(--paper);color:var(--ink);font:700 .7rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;border:0;border-radius:var(--radius);cursor:pointer}
.loop-btn svg{width:10px;height:10px;fill:currentColor}
.loop-btn .i-play,.loop-btn[aria-pressed="true"] .i-pause{display:none}
.loop-btn[aria-pressed="true"] .i-play{display:inline}
.loop-btn[aria-pressed="true"]{background:var(--signal);color:var(--ink-on-signal)}
.loop-btn:focus-visible{outline-color:var(--paper);outline-offset:2px}
.frames .live .ph::before{content:"Loop, half speed";position:absolute;left:10px;top:10px;z-index:2;background:var(--paper);color:var(--ink);font:700 .7rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px 5px}
.frames .note{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--s-4) 30px 0;background:transparent}
.frames .note p{font-size:var(--t-body);color:rgba(243,236,223,.8);max-width:20rem}
.frames .note .ico{margin-bottom:var(--s-4);width:44px;height:44px}
.tarc{position:absolute;left:0;right:0;top:-46px;height:44px;width:100%;overflow:visible;pointer-events:none}

/* your footage */
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s-8);border-top:1.5px solid var(--ink)}
.fact{padding:var(--s-6) var(--s-6) 0 0}
.fact + .fact{padding-left:var(--s-6);border-left:1px solid var(--rule)}
.fact .big{font-size:clamp(3.2rem,5.2vw,6.4rem);line-height:.86;display:block}
.fact h3{font:700 var(--t-label)/1 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;margin:var(--s-5) 0 10px;color:var(--ink)}
.fact p{color:var(--ink-2);max-width:26rem}

/* built by a rider */
.rider{background:var(--paper-2);border-top:1.5px solid var(--ink);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;padding:0}
.rshot{position:relative;margin:0;min-height:640px}
.rshot .frame{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);background:var(--ink)}
.rshot img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.rshot .sticker{left:auto;right:calc(12% - 40px);top:auto;bottom:56px}
.rshot .caption{left:var(--gutter);right:auto;top:auto;bottom:22px}
.rcopy{padding:var(--s-10) var(--gutter) var(--s-10) var(--s-8);display:flex;flex-direction:column;justify-content:center}
.rcopy h2{font-size:clamp(3.2rem,5vw,6.2rem)}
.rcopy p{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:34rem;margin-top:var(--s-5)}
.rcopy p + p{margin-top:var(--s-4)}
.sig{margin-top:var(--s-6);display:flex;align-items:center;gap:14px}
.sig img{width:40px;height:40px}

/* closing CTA */
.cta{text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);align-items:end;padding:var(--s-10) var(--gutter)}
.cta h2{font-size:min(var(--t-h2),6.4vw)}
.cta .ctas{margin:0}
.ctaR{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}

/* responsive */
@media (max-width:1280px){
  .frames{grid-template-columns:repeat(4,minmax(0,1fr))}
  .frames .note{grid-column:1/-1;padding:0 0 var(--s-4)}
  .frames .note .ico{display:none}
}
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;height:auto}
  .hero h1{margin-right:0}
  .shot{height:min(72vw,620px)}
  .shot .frame{clip-path:polygon(0 9%,100% 0,100% 100%,0 100%)}
  .sticker{left:auto;right:16px;top:-58px;width:128px;height:128px}
  .metrics{grid-template-columns:repeat(3,1fr);height:auto;padding:var(--s-4) var(--gutter)}
  .metric{padding:20px 16px}
  .metric:nth-of-type(4){border-left:0;padding-left:0}
  .seq{grid-template-columns:repeat(3,1fr);margin-top:var(--s-7)}
  .seq .arc,.seq .air{display:none}
  .steps,.facts{grid-template-columns:1fr}
  .step + .step,.fact + .fact{padding-left:0;border-left:0;border-top:1px solid var(--rule);margin-top:var(--s-6)}
  .mgrid{grid-template-columns:1fr}
  .mfig{max-width:520px}
  .rider{grid-template-columns:1fr}
  .rshot{min-height:0;height:min(80vw,620px)}
  .rshot .frame{clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
  .rshot .sticker{right:16px;bottom:auto;top:16px}
  .rcopy{padding:var(--s-8) var(--gutter) var(--s-9)}
  .cta{grid-template-columns:1fr}
  .cta h2{font-size:clamp(3.4rem,12vw,6rem)}
}
@media (max-width:640px){
  .copy{padding:28px var(--gutter) 40px}
  .hero h1{font-size:clamp(5.2rem,25vw,7rem)}
  .hero .lede{font-size:1.125rem}
  .ctas{gap:var(--s-4)}
  .ctas .btn{font-size:1.3rem;padding:14px 22px 13px}
  .shot{height:118vw}
  .shot img{object-position:44% 50%}
  .caption{right:auto;left:12px;top:auto;bottom:12px;font-size:.68rem}
  .sticker{top:22px;right:14px;width:112px;height:112px}
  .eyebrow{font-size:.72rem;letter-spacing:.1em}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-of-type(4){border-left:1px solid var(--rule-rev);padding-left:16px}
  .metric:nth-of-type(odd){border-left:0;padding-left:0}
  .metric{border-top:1px solid var(--rule-rev)}
  .metric:nth-of-type(-n+2){border-top:0}
  .metric p{font-size:.875rem}
  .seq{grid-template-columns:repeat(2,1fr)}
  .mlist li{grid-template-columns:52px minmax(0,1fr);gap:var(--s-4)}
  .mlist .ico{display:none}
  .mlist .no{font-size:2.1rem}
  .frames{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frames .live{grid-column:1/-1}
  .frames .live video{aspect-ratio:4/5}
  .tarc{display:none}
  .tname{flex-wrap:wrap;gap:var(--s-3)}
  .rshot{height:112vw}
  .rshot img{object-position:78% 50%}
}
@media (prefers-reduced-motion:reduce){
  .draw{animation:none;stroke-dashoffset:0}
  .pop{animation:none;opacity:1}
}