/* Pagina /menu/ raccontata «alla Apple»: un'idea per schermata, parole grandi, la voce prima di tutto.
   Tutto è sotto body[data-page="menu"] così non tocca la home. */
[data-page="menu"]{--mp-light:#F5F3EE;--mp-ink:#0B0D10;--mp-grey:#86868B}
[data-page="menu"] .mp-center{text-align:center;margin-inline:auto}
[data-page="menu"] .mp-eyebrow{display:block;font-size:.95rem;font-weight:700;letter-spacing:.01em;color:var(--copper)}
[data-page="menu"] .mp-h1{margin:10px 0 0;font-size:clamp(2.9rem,10.5vw,6.2rem);font-weight:800;letter-spacing:-.045em;line-height:.98}
[data-page="menu"] .mp-h2{margin:8px 0 0;font-size:clamp(2.3rem,7.5vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
[data-page="menu"] .mp-lead{margin:18px auto 0;max-width:34ch;font-size:clamp(1.12rem,2.6vw,1.45rem);line-height:1.4;font-weight:500;color:var(--td2)}
[data-page="menu"] .mp-light .mp-lead{color:#515154}
[data-page="menu"] .mp-grad{background:linear-gradient(92deg,#F2A33A 0%,#E08A3C 45%,#C9673A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-page="menu"] .mp-ctas{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;align-items:center;margin-top:28px}
[data-page="menu"] .mp-link{font-weight:700;color:var(--copper-2);text-decoration:none;font-size:1.05rem}
[data-page="menu"] .mp-link:hover{text-decoration:underline}
[data-page="menu"] .mp-note{margin-top:16px;font-size:.88rem;color:var(--td3)}
[data-page="menu"] .mp-light{background:var(--mp-light);color:var(--mp-ink)}
[data-page="menu"] .mp-dark{background:var(--mp-ink);color:var(--td)}
[data-page="menu"] section.mp{padding:84px 0}
@media (min-width:900px){[data-page="menu"] section.mp{padding:130px 0}}

/* ---------- 1 · apertura ---------- */
.mp-hero{background:radial-gradient(900px 520px at 50% 108%,rgba(224,138,60,.20),transparent 70%),var(--mp-ink);color:var(--td);padding:64px 0 0;overflow:hidden}
@media (min-width:900px){.mp-hero{padding-top:88px}}
.mp-hero .mp-h1{color:#F5F2EC}
.mp-stage{position:relative;margin:46px auto 0;width:min(340px,86vw);height:520px;text-align:left}
@media (min-width:900px){.mp-stage{width:380px;height:600px;margin-top:60px}}
.mp-phone{position:absolute;inset:0 0 auto 0;height:640px;border-radius:46px;background:#0b0b0d;padding:11px;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09) inset}
@media (min-width:900px){.mp-phone{height:720px}}
.mp-phone .phone-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:112px;height:28px;border-radius:15px;background:#0b0b0d;z-index:4}
.mp-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#141414}
.mp-screen::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:#0b0b0d;z-index:3;pointer-events:none}
.mp-screen .mn-scroll{height:100%;overflow:hidden;padding-top:46px}
.mp-screen .mn-head{padding-top:20px}
.mp-fade{position:absolute;left:-30%;right:-30%;bottom:-2px;height:150px;background:linear-gradient(180deg,transparent,var(--mp-ink) 78%);z-index:5;pointer-events:none}
/* il vocale che compare sopra il telefono */
.mp-voice{position:absolute;z-index:6;left:50%;top:auto;bottom:86px;width:min(330px,92vw);transform:translate(-50%,-14px) scale(.96);opacity:0;transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.mp-voice.on{opacity:1;transform:translate(-50%,0) scale(1)}
@media (min-width:900px){.mp-voice{left:auto;right:-372px;bottom:auto;top:150px;transform:translate(0,-14px) scale(.96)}.mp-voice.on{transform:translate(0,0) scale(1)}}  /* fuori dal telefono: non copre il prezzo che cambia */
.mp-bubble{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:22px;background:rgba(255,255,255,.96);color:#1d1d1f;box-shadow:0 18px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.mp-mic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#2AABEE;color:#fff}
.mp-bubble q{quotes:"«" "»";font-size:1rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.mp-bars{display:flex;align-items:center;gap:2px;height:14px;margin-top:5px}
.mp-bars i{width:3px;border-radius:2px;background:#2AABEE;opacity:.55;animation:mp-bar 0.9s ease-in-out infinite}
@keyframes mp-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.mp-ok{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0 14px;padding:7px 12px;border-radius:999px;background:#34C759;color:#fff;font-size:.85rem;font-weight:800;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.mp-ok.on{opacity:1;transform:none}
.mp-screen .mn-item{transition:background .35s,box-shadow .35s,opacity .45s,max-height .5s,padding .5s,margin .5s,border-width .5s}
.mp-screen .mn-item.mp-hit{box-shadow:0 0 0 2px #34C759 inset;background:rgba(52,199,89,.10)}
.mp-screen .mn-item.mp-gone{opacity:0;max-height:0!important;padding-top:0;padding-bottom:0;margin-top:-10px;border-width:0;overflow:hidden}
.mp-screen .mn-item.mp-new{animation:mp-in .6s ease both}
@keyframes mp-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.mp-screen .mn-price.mp-flip{animation:mp-flip .6s ease}
@keyframes mp-flip{0%{transform:scale(1)}45%{transform:scale(1.4);color:#34C759}100%{transform:scale(1)}}

/* ---------- 2 · «Parli. Lui aggiorna.» ---------- */
.mp-cmds{display:grid;gap:16px;margin-top:46px;text-align:left}
@media (min-width:700px){.mp-cmds{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.mp-cmds{grid-template-columns:repeat(4,1fr)}}
.mp-cmd{display:flex;flex-direction:column;gap:18px;padding:26px 22px 22px;border-radius:28px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05)}
.mp-cmd q{quotes:"«" "»";font-size:1.32rem;font-weight:800;letter-spacing:-.025em;line-height:1.18;color:#1d1d1f}
.mp-cmd small{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:#2AABEE}
.mp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;margin-top:auto;padding:14px 16px;border-radius:16px;background:#141414;color:#F2EDE4;font-size:.95rem;font-weight:700;transition:opacity .5s,transform .5s}
.mp-row span:last-child{font-variant-numeric:tabular-nums;color:#E08A3C;white-space:nowrap}
.mp-row em{grid-column:1/-1;font-style:normal;font-size:.76rem;font-weight:500;opacity:.65}
.mp-row .old{text-decoration:line-through;opacity:.5;margin-right:6px;color:#F2EDE4}
.mp-row .new{display:inline-block}
.mp-cmd .mp-badge{display:inline-block;margin-left:6px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#E08A3C;vertical-align:.2em}
/* stati prima/dopo: si animano quando la scheda entra in vista */
.mp-cmd .mp-after{opacity:0;transform:translateY(6px);transition:opacity .45s .5s,transform .45s .5s}
.mp-cmd.in .mp-after{opacity:1;transform:none}
.mp-cmd .new{opacity:0;transition:opacity .4s .6s}
.mp-cmd.in .new{opacity:1}
.mp-cmd .old{transition:opacity .4s .3s}
.mp-cmd .mp-out{transition:opacity .5s .6s,transform .5s .6s}
.mp-cmd.in .mp-out{opacity:.25;transform:translateX(10px)}
.mp-cmd.in .mp-out span:first-child{text-decoration:line-through}
.mp-cmd .mp-row.mp-star{transition:box-shadow .4s .6s}
.mp-cmd.in .mp-row.mp-star{box-shadow:0 0 0 2px #E08A3C inset}
.mp-cmd .mp-badge{opacity:0;transition:opacity .4s .7s}
.mp-cmd.in .mp-badge{opacity:1}
.mp-promise{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:40px;font-size:1rem;font-weight:600;color:#3a3a3c}
.mp-promise span{display:inline-flex;align-items:center;gap:8px}
.mp-promise svg{color:#34C759;flex:none}
@media (max-width:699px){.mp-promise{display:grid;justify-content:center;text-align:left;gap:12px}.mp-promise span{align-items:flex-start}}
.mp-tg{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:12px 20px;border-radius:999px;background:#fff;color:#1d1d1f;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.mp-tg i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2AABEE;color:#fff}

/* ---------- 3 · prova (il tool esistente su fondo scuro) ---------- */
[data-page="menu"] #prova.mp{padding-top:84px}
[data-page="menu"] #prova .mini-steps{justify-content:center}
[data-page="menu"] #prova .plans-note{text-align:center}

/* ---------- 4 · caratteristiche ---------- */
.mp-tiles{display:grid;gap:14px;margin-top:46px;text-align:left}
@media (min-width:700px){.mp-tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.mp-tiles{grid-template-columns:repeat(3,1fr)}}
.mp-tile{padding:30px 26px;border-radius:28px;background:#fff;min-height:190px;display:flex;flex-direction:column;gap:10px}
.mp-tile .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(224,138,60,.13);color:#C9673A}
.mp-tile strong{font-size:1.32rem;letter-spacing:-.025em;line-height:1.15;color:#1d1d1f}
.mp-tile p{margin:0;color:#6e6e73;font-size:1rem;line-height:1.45}

/* ---------- 5 · prezzo ---------- */
.mp-price .mp-h2{font-size:clamp(3rem,11vw,6.5rem)}
.mp-price .plans{max-width:760px;margin:40px auto 0}
.mp-price .included{max-width:760px;margin-inline:auto}

/* prezzi su fondo scuro */
.mp-price .plan{background:#16191E;border-color:rgba(255,255,255,.10);color:var(--td);text-align:left}
.mp-price .plan .plan-name{color:var(--td2)}
.mp-price .plan .plan-price b{color:#fff}
.mp-price .plan .plan-price span,.mp-price .plan .plan-note{color:var(--td3)}
.mp-price .plan .btn-dark,.mp-price .plan .btn:not(.btn-primary){background:#262A31;color:var(--td);border-color:rgba(255,255,255,.12)}
.mp-price .plan.is-best{background:#1C1F25;border:1px solid var(--copper)}
.mp-price .included li{color:var(--td2)}
.mp-price .who-list{justify-content:center}
.mp-price .who-list li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:var(--td)}

/* comparsa dolce durante lo scorrimento */
.mp-rise{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mp-rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mp-rise{opacity:1;transform:none;transition:none}
  .mp-voice,.mp-ok,.mp-cmd .mp-after,.mp-cmd .new,.mp-badge{transition:none}
  .mp-bars i{animation:none}
}