/* ══════════════════════════════════════════════════════════════════════
   AvioWeather — layer grafico proposta A (da claude.ai/design, progetto
   "AvioWeather Website", _shared/proposals.css). Scoped .hp (home page);
   .prop-a/.prop-b e .ds-* restano per i preview del design system e per
   la futura variante B. Unica modifica di produzione: `--r:8px` (l'originale
   `--r:8` senza unità invalidava i border-radius:var(--r) di site.css).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Scala di elevazione sobria (ombre morbide multi-layer, tinta navy fredda,
      NON material). Da usare per gerarchizzare, non ovunque. ─────────────── */
:root{
  --elev-1:0 1px 1px rgba(10,20,40,.04),0 2px 4px rgba(10,20,40,.05);
  --elev-2:0 1px 2px rgba(10,20,40,.05),0 5px 12px -3px rgba(10,20,40,.07),0 12px 26px -8px rgba(10,20,40,.06);
  --elev-3:0 2px 4px rgba(10,20,40,.05),0 10px 22px -6px rgba(10,20,40,.09),0 26px 50px -18px rgba(10,20,40,.12);
  --elev-4:0 3px 7px rgba(10,20,40,.06),0 18px 36px -10px rgba(10,20,40,.12),0 44px 78px -26px rgba(10,20,40,.16);
}

/* ═══════════════════════ BOTTONI (variante A) ═══════════════════════ */
.prop-a .btn{transition:transform .22s var(--ease-out-quint),box-shadow .3s var(--ease-out-quint),background .22s,border-color .22s,color .22s;}
.prop-a .btn-primary{box-shadow:var(--elev-2);}
.prop-a .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--elev-3);}
.prop-a .btn-primary:active{transform:translateY(0);box-shadow:var(--elev-1);transition-duration:.08s;}
.prop-a .btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--elev-2);}
.prop-a .btn-ghost:active{transform:translateY(0);background:var(--border);box-shadow:none;transition-duration:.08s;}
.prop-a .btn-accent:hover{box-shadow:0 12px 28px -14px rgba(29,58,138,.5);}
.prop-a .btn-accent:active{transform:translateY(0);box-shadow:none;transition-duration:.08s;}
.prop-a .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-soft);}

/* ═══════════════════════ CARD PIANI (variante A) ═══════════════════════ */
.prop-a .plan{transition:transform .4s var(--ease-out-quint),border-color .3s,box-shadow .35s var(--ease-out-quint);}
.prop-a .plan:hover{transform:translateY(-4px);box-shadow:var(--elev-3);}
.prop-a .plan.featured{border-color:var(--fg);box-shadow:var(--elev-3);}
.prop-a .plan.featured:hover{box-shadow:var(--elev-4);}
.prop-a .plan .badge{align-self:flex-start;font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--fg);padding:5px 11px;border-radius:7px;margin-bottom:12px;}
.prop-a .plan .price{font-size:2.35rem;margin-top:16px;}
.prop-a .plan .price small{color:var(--fg-3);}

/* ═══════════════════════ FOGLIO DI DECODIFICA (riuso futuro) ═══════════════════════ */
.ds-sheet{--cat:#2d8559;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px 22px 6px;}
.ds-sheet.cat-vfr{--cat:#2d8559}.ds-sheet.cat-mvfr{--cat:#1d3a8a}.ds-sheet.cat-ifr{--cat:#b91c1c}.ds-sheet.cat-lifr{--cat:#6d28d9}
.ds-head{display:flex;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--hairline)}
.ds-icao{font-family:'Geist Mono',monospace;font-size:1.55rem;font-weight:600;letter-spacing:-.02em;color:var(--fg);line-height:1}
.ds-place{font-size:.82rem;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-cat{margin-left:auto;align-self:center;font-family:'Geist Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.08em;color:#fff;background:var(--cat);padding:5px 11px;border-radius:6px;white-space:nowrap}
.ds-raw{font-family:'Geist Mono',monospace;font-size:.86rem;line-height:1.75;color:var(--fg);background:var(--subtle);border:1px solid var(--hairline);border-radius:6px;padding:12px 14px;margin:16px 0 4px;word-break:break-word}
.ds-raw .tok{white-space:nowrap}
.ds-decode{list-style:none;margin:0;padding:0}
.ds-row{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--hairline);transition:border-color .25s var(--ease-out-quint),background .25s var(--ease-out-quint)}
.ds-row:last-child{border-bottom:0}
.ds-row .tok{font-family:'Geist Mono',monospace;font-size:.82rem;font-weight:500;color:var(--fg);letter-spacing:.01em;white-space:nowrap}
.ds-row .lbl{display:block;font-family:'Geist Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:3px}
.ds-row .mean{font-size:.92rem;color:var(--fg-2);line-height:1.4;transition:color .25s var(--ease-out-quint)}
.ds-row .mean b{color:var(--fg);font-weight:600}
.ds-row:hover{background:var(--tint);border-bottom-color:var(--border-strong)}
.ds-row:hover .mean{color:var(--fg)}
.ds-foot{display:flex;align-items:center;gap:9px;padding:14px 2px 10px;border-top:1px solid var(--hairline);margin-top:2px;font-family:'Geist Mono',monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.ds-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--cat);flex:none}
.ds-foot b{color:var(--fg-2);font-weight:600}
.ds-foot .age{margin-left:auto;letter-spacing:.06em}
.prop-a .ds-sheet{box-shadow:var(--elev-3)}
@media(max-width:560px){.ds-row{grid-template-columns:82px 1fr;gap:12px}.ds-icao{font-size:1.35rem}}

/* ═══════════════════════ HOME PAGE (.hp) ═══════════════════════ */
.hp{--r:8px}
.hp .btn,.hp .feat,.hp .kpi,.hp .plan,.hp .notif,.hp .dash-shot,.hp .nav-cta{border-radius:8px}

/* hero: via i blob e la griglia animata */
.hp .hero{padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(48px,6vw,72px);overflow:visible}
/* riserva per il pannello RAW aperto: spazio già esistente, niente coperture */
@media (min-width:861px){
  .hp .hero{padding-bottom:calc(clamp(48px,6vw,72px) + 128px)}
  .hp .sec.decode{padding-bottom:calc(clamp(58px,8vw,100px) + 128px)}
}
.hp .hero-bg{display:none}
.hp .hero::before{display:none}
.hp .hero-grid{align-items:center}
.hp .hero .kicker{margin-bottom:16px}
.hp .hero h1{margin-top:0}
.hp .hero-metar{display:flex;justify-content:center}


/* testate sezione: etichetta mono con filo a sinistra */
.hp .sec{padding-block:clamp(58px,8vw,100px)}
.hp .sec-head{max-width:720px}
.hp .sec-head .num{font-family:'Geist Mono',monospace;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);display:inline-flex;align-items:center;gap:10px}
.hp .sec-head .num::before{content:"";width:26px;height:1px;background:var(--border-strong)}
.hp .sec-head h2{margin-top:16px}
.hp .sec-head p{margin-top:16px;color:var(--fg-2);font-size:var(--fs-lead);line-height:1.55}

/* ── LISTE EDITORIALI A HAIRLINE (card-grid promosse) ── */
.hp .ed-list{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--hairline)}
.hp .ed-item{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;padding:26px 4px;border-bottom:1px solid var(--hairline);transition:background .28s var(--ease-out-quint),border-color .28s var(--ease-out-quint)}
.hp .ed-item .n{font-family:'Geist Mono',monospace;font-size:.85rem;font-weight:500;color:var(--fg-3);letter-spacing:.02em;padding-top:4px;transition:color .28s var(--ease-out-quint)}
.hp .ed-item .hd{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hp .ed-item h3{font-size:1.18rem;letter-spacing:-0.01em}
.hp .ed-item .bd{color:var(--fg-2);font-size:var(--fs-sm);line-height:1.55;margin-top:8px;max-width:60ch;transition:color .28s var(--ease-out-quint)}
.hp .ed-item .ex{margin-top:16px}
.hp .ed-item:hover{background:var(--tint);border-bottom-color:var(--border-strong)}
.hp .ed-item:hover .n{color:var(--accent)}
.hp .ed-item:hover .bd{color:var(--fg)}
.hp .ed-item.two{grid-template-columns:1.15fr 0.85fr}
.hp .ed-item.two .side{align-self:center}
@media(max-width:760px){.hp .ed-item.two{grid-template-columns:1fr}}

/* surfaces: badge App Store + immagini reali dentro le righe */
.hp .surf-media{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hp .surf-media img.icon{width:60px;height:60px;border-radius:14px}
.hp .surf-shot{border:1px solid var(--border);border-radius:8px;overflow:hidden;max-width:420px;box-shadow:var(--elev-2)}
.hp .surf-shot img{display:block;width:100%;height:auto}
.hp .appstore-badge img{height:46px;border-radius:8px}
.hp .alexa img{height:62px}

/* KPI callout (Dati) come pannello mono, no ombra */
.hp .kpi{background:var(--bg);box-shadow:none}

/* ── PIANI: featured per struttura, radius 8, niente gradient ── */
.hp .plans{margin-top:44px}
.hp .plan{box-shadow:none;transition:border-color .3s var(--ease-out-quint),transform .35s var(--ease-out-quint)}
.hp .plan:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--elev-2)}
.hp .plan.featured{border:2px solid var(--fg);background:var(--subtle);box-shadow:var(--elev-3);transform:none}
.hp .plan.featured:hover{transform:translateY(-3px);box-shadow:var(--elev-4)}
.hp .plan.featured .badge{align-self:flex-start;font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--fg);padding:5px 11px;border-radius:6px;margin-bottom:10px}
.hp .plan .badge{display:none}
.hp .plan.featured .badge{display:inline-flex}
.hp .plan.featured .price{font-size:2.6rem}
.hp .plan .price small{color:var(--fg-3)}

/* closing CTA band (non usata dalla proposta A, tenuta per il futuro) */
.hp .closing{border-top:1px solid var(--hairline);background:var(--card)}
.hp .closing .in{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-block:clamp(56px,8vw,88px)}
.hp .closing h2{max-width:18ch}
.hp .closing .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* docs/API compact */
.hp .docs-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hp .docs-list a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-size:.9rem;color:var(--fg-2);transition:border-color .25s,color .25s,background .25s}
.hp .docs-list a .arr{transition:transform .3s var(--ease-out-quint)}
.hp .docs-list a:hover{border-color:var(--fg-3);color:var(--fg);background:var(--tint)}
.hp .docs-list a:hover .arr{transform:translateX(4px)}

/* ── Ritocchi pagina (superfici raggruppate, decode, foot) ── */
.hp .surfaces{margin-top:44px;border-top:1px solid var(--hairline)}
.hp .surf-block{padding-block:clamp(40px,6vw,60px);border-bottom:1px solid var(--hairline)}
.hp .surf-eyebrow{font-family:'Geist Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:9px;margin-bottom:18px}
.hp .surf-eyebrow::before{content:"";width:22px;height:1px;background:var(--border-strong)}
.hp .surf-eyebrow .tier{color:var(--accent)}
.hp .decode .lead{margin-top:16px;color:var(--fg-2);font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
.hp .decode .sheet-wrap{margin-top:40px;max-width:600px}
.hp .plan-foot{text-align:center;margin-top:28px;font-size:.85rem;color:var(--fg-3)}
.hp .dev-grid{margin-top:36px}

/* ── reduced-motion: neutralizza transizioni/scale, mantiene leggibilità ── */
@media (prefers-reduced-motion:reduce){
  .prop-a .btn,.prop-a .plan{transition:none !important;}
  .hp .ed-item,.hp .plan{transition:none !important}
}

/* ── Variante B in produzione: niente numeri negli elenchi (richiesta owner) ── */
.hp.v-b .ed-item{grid-template-columns:1fr}
.hp.v-b .ed-item.two{grid-template-columns:1.1fr 0.9fr}
@media(max-width:760px){.hp.v-b .ed-item,.hp.v-b .ed-item.two{grid-template-columns:1fr}.hp.v-b .ed-item.two .side{grid-column:1}}
.hp .atv-feats .n{display:none}
/* indice sezioni (variante B) */
.hp.v-b .index{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--card)}
.hp.v-b .index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.hp.v-b .index li+li{border-left:1px solid var(--hairline)}
.hp.v-b .index a{display:block;padding:22px var(--pad);color:var(--fg-2);transition:background .25s,color .25s}
.hp.v-b .index a:hover{background:var(--tint);color:var(--fg)}
.hp.v-b .index .t{font-size:1.02rem;font-weight:500;letter-spacing:-0.01em}
@media(max-width:760px){.hp.v-b .index ol{grid-template-columns:repeat(2,1fr)}.hp.v-b .index li:nth-child(3){border-left:0}}
@media(max-width:420px){.hp.v-b .index ol{grid-template-columns:1fr}.hp.v-b .index li+li{border-left:0;border-top:1px solid var(--hairline)}}
/* v-b: hero centrato + featured sollevata (dal layer design) */
.hp.v-b .hero-grid{grid-template-columns:1fr;text-align:center;gap:40px;justify-items:center}
.hp.v-b .hero .kicker{justify-content:center}
.hp.v-b .hero-lead{margin-left:auto;margin-right:auto}
.hp.v-b .hero-actions{justify-content:center}
.hp.v-b .hero h1{font-size:clamp(2.3rem,1.5rem+3vw,4rem)}
.hp.v-b .hero-metar{width:100%}
.hp.v-b .plan.featured{transform:translateY(-8px)}
.hp.v-b .plan.featured:hover{transform:translateY(-12px)}
@media(max-width:880px){.hp.v-b .plan.featured{transform:none}.hp.v-b .plan.featured:hover{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.hp.v-b .plan.featured,.hp.v-b .plan.featured:hover{transform:none !important}}

/* indice sezioni: solo desktop */
@media(max-width:860px){.hp.v-b .index{display:none}}