/* HERO */
.px-hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,90px) clamp(40px,6vw,80px)}
.px-hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.px-hero .eyebrow{color:var(--acc)}
.px-hero h1{margin-top:18px;line-height:0}
.px-hero h1 img{width:min(560px,100%);height:auto}
.px-hero .tag{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,54px);line-height:1.02;color:var(--acc);margin-top:22px;letter-spacing:-.01em}
.px-hero .lead{font-size:clamp(17px,1.5vw,20px);color:var(--soft);margin-top:18px;max-width:42ch}
.px-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.px-hero .from{margin-top:14px;font-size:15px;color:var(--soft)}
.px-hero .vis{position:relative;height:clamp(420px,48vw,680px)}
.px-hero .burst{position:absolute;left:50%;top:52%;width:118%;transform:translate(-50%,-50%);color:var(--acc);opacity:.95}
.px-hero .prod{position:absolute;left:50%;bottom:4%;height:58%;width:auto;transform:translateX(-46%) rotate(-4deg);filter:drop-shadow(0 30px 26px rgba(80,0,0,.45))}
.px-hero .fly{width:clamp(220px,26vw,400px);right:-2%;top:-2%;--r:-6deg}
@media (max-width:860px){.px-hero .grid{grid-template-columns:1fr}.px-hero .vis{height:440px}.px-hero .fly{width:220px;right:0}}

/* FIGHT */
.fight{position:relative}
.fight-stage{position:relative;height:100vh;min-height:560px;overflow:hidden}
.fight .f-line{position:absolute;left:0;right:0;text-align:center;font-family:var(--display);font-weight:300;font-size:clamp(40px,6.4vw,104px);line-height:1;letter-spacing:-.02em;top:12%}
.fight .f-line b{font-weight:700;color:var(--acc)}
.fight .dolor{width:clamp(220px,26vw,420px);right:12%;bottom:12%}
.fight .puncher{width:clamp(260px,30vw,470px);left:14%;bottom:8%}
.fight .pow{position:absolute;left:50%;top:56%;width:clamp(200px,22vw,330px);transform:translate(-50%,-50%) scale(0);color:var(--acc)}
.fight .claims{position:absolute;left:0;right:0;bottom:7%;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;list-style:none;margin:0;padding:0 var(--gutter)}
.fight .claims li{padding:12px 20px;border-radius:999px;background:color-mix(in srgb,var(--fg) 14%,transparent);font-weight:700;font-size:clamp(14px,1.3vw,17px)}
html:not(.motion) .fight-stage{height:auto;min-height:0;padding-block:72px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:24px}
html:not(.motion) .fight .f-line{position:static;grid-column:1/-1}
html:not(.motion) .fight .f1{display:none}
html:not(.motion) .fight .char{position:relative;left:auto;right:auto;bottom:auto;justify-self:center}
html:not(.motion) .fight .pow{display:none}
html:not(.motion) .fight .claims{position:static;grid-column:1/-1}
@media (max-width:760px){.fight .dolor{right:4%;bottom:24%;width:170px}.fight .puncher{left:2%;bottom:20%;width:230px}.fight .f-line{top:10%}}

/* Character next to the commercials */
.wide-stage .peek{position:absolute;width:clamp(150px,16vw,260px);right:-3%;bottom:-6%;z-index:2}
.wide-stage .peek.left{right:auto;left:-3%}
@media (max-width:760px){.wide-stage .peek{width:120px;right:-2%;bottom:-14%}}

/* NATURA chapter */
.natura .vis .fly{width:clamp(220px,24vw,380px);left:-6%;top:0;--r:6deg}
.natura .sprig{position:absolute;width:clamp(70px,8vw,120px);color:#3AAA35;opacity:.9}
.natura .note{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 18px;border-radius:16px;background:#EAF6E6;color:#1D5A25;font-weight:700}

/* NEBBIA chapter */
.nebbia .vis .prod{height:86%}
.nebbia .mist{position:absolute;left:50%;top:6%;width:70%;height:50%;transform:translateX(-10%);pointer-events:none}
.nebbia .mist i{position:absolute;border-radius:50%;background:rgba(255,255,255,.85);animation:spray 2.6s ease-out infinite}
@keyframes spray{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.95}100%{transform:translate(var(--tx),var(--ty)) scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.nebbia .mist{display:none}}
.nebbia .price{font-family:var(--display);font-size:34px;font-weight:600;margin-top:24px}

/* BUY + COMPARE (warm neutral) */
.lineup-head{padding-block:clamp(80px,10vw,140px) 40px;text-align:center}
.lineup-head h2{font-size:clamp(40px,5.4vw,84px);line-height:1}
.lineup-head .lead{color:var(--soft);max-width:46ch;margin:18px auto 0;font-size:18px}
.buy-wrap{padding-block:0 clamp(80px,10vw,130px)}
.buy .meta{display:flex;align-items:center;gap:8px}
.buy .meta i{width:10px;height:10px;border-radius:50%;background:var(--pc)}
.buy .vis{background:var(--tint)}
.buy .pill{background:var(--pc)}
.compare{padding-block:clamp(88px,11vw,150px);background:#fff}
.compare h2{font-size:clamp(36px,4.6vw,66px);text-align:center}
.cmp{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,40px)}
.cmp .col{display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:28px;padding:30px 18px 10px;background:var(--tint)}
.cmp .col img{height:190px;width:auto;filter:drop-shadow(0 18px 14px rgba(14,36,38,.16))}
.cmp .col h3{font-size:clamp(22px,2.4vw,32px);font-weight:600;margin-top:20px;color:var(--pc)}
.cmp dl{margin:20px 0 0;width:100%}
.cmp dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6B5A4E;margin-top:18px}
.cmp dd{margin:6px 0 0;font-size:16px;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.08)}
@media (max-width:860px){.cmp{grid-template-columns:1fr}.cmp .col img{height:150px}}
#pocket{background:#E9DCC9;color:var(--ink)}
#pocket .eyebrow{color:#7A4E14}
#pocket .lead{color:#4E3B28}
@media (min-width:761px){#pocket>.bg{object-position:30% 50%}}