/* iFuel, foglio di stile unico del sito (home, /prezzi/, privacy, 404).
   Linguaggio "classica v3": utility consumer premium, Archivo self-hosted,
   un solo accento (teal iFuel), interattivi a pillola, contenitori 32px.
   Dial: varianza 7, movimento 6, densità 4 (pagine dati: densità 6).
   Movimento (emil): ease-out forte per entrate e feedback, mai ease-in,
   pressione scale(0.97) a 140ms, hover solo con mouse vero. */

@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-var.woff2") format("woff2-variations"),
         url("/fonts/archivo-var.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --brand: #00848F;          /* unico accento */
    --brand-deep: #005c64;
    --brand-ink: #00515a;
    --on-brand: #f6fbfb;
    --ground: #fbfdfd;
    --ground-2: #f0f5f5;
    --panel: #e3f1f0;
    --text: #0e2224;
    --text-2: #3c5254;
    --rule: #d3dfdf;
    --device: #071618;
    --shadow: 0, 46, 52;
    --store-bg: #fbfdfd;
    --store-fg: #071618;
    /* Solo semantica dei prezzi (sopra / sotto la media), mai decorazione */
    --up: #a8372a;
    --down: #0f7a52;

    --font: "Archivo", system-ui, sans-serif;
    --wrap: min(1180px, 100% - 2.5rem);
    --r-box: 2rem;
    --r-pill: 999px;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --t-press: 140ms;
    --t-ui: 200ms;
    --t-reveal: 800ms;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --brand-deep: #006d76;
        --brand-ink: #5fc6cf;
        --ground: #0a1517;
        --ground-2: #0f1e20;
        --panel: #12292b;
        --text: #e4eeee;
        --text-2: #a9bdbe;
        --rule: #22393b;
        --device: #020909;
        --shadow: 0, 0, 0;
        --up: #f08a7a;
        --down: #5fd3a4;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-deep: #006d76;
    --brand-ink: #5fc6cf;
    --ground: #0a1517;
    --ground-2: #0f1e20;
    --panel: #12292b;
    --text: #e4eeee;
    --text-2: #a9bdbe;
    --rule: #22393b;
    --device: #020909;
    --shadow: 0, 0, 0;
    --up: #f08a7a;
    --down: #5fd3a4;
}

/* Cifre a segmenti: solo nel listino della home (il font si scarica solo lì) */
@font-face {
    font-family: "DSEG7";
    src: url("/fonts/DSEG7Classic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; interpolate-size: allow-keywords; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
    color: var(--text); background: var(--ground);
    -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
strong, b { font-weight: 750; }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--device); color: var(--on-brand); padding: 0.7rem 1rem; border-radius: var(--r-pill); font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }
.top-sentinel { position: absolute; top: 0; height: 8px; width: 1px; }

.btn, .store, .pill { transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease, border-color var(--t-ui) ease; }
.btn:active, .store:active, .pill:active { transform: scale(0.97); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--brand); transition: background-color var(--t-ui) ease, box-shadow var(--t-ui) ease; }
.nav.is-scrolled { background: var(--brand-deep); box-shadow: 0 10px 24px -18px rgba(var(--shadow), 0.7); }
.nav__bar { display: flex; align-items: center; gap: 2rem; height: 4.5rem; }
.nav__logo img { height: 2.4rem; width: auto; }
.nav__menu { display: flex; gap: 1.75rem; margin-left: auto; }
.nav__menu a { color: var(--on-brand); font-weight: 700; font-size: 1.2rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--t-ui) var(--ease-out); }
.nav__menu a[aria-current] { background-size: 100% 2px; }
.nav__cta { background: var(--store-bg); color: #00515a; font-weight: 750; font-size: 1.15rem; padding: 0.55rem 1.25rem; border-radius: var(--r-pill); text-decoration: none; }
.nav a:focus-visible { outline-color: var(--on-brand); }

/* ---------- store ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.stores--center { justify-content: center; }
.store {
    display: inline-flex; align-items: center; gap: 0.7rem; min-height: 3.6rem;
    padding: 0.55rem 1.5rem 0.55rem 1.2rem; border-radius: var(--r-pill);
    background: var(--store-bg); color: var(--store-fg); text-decoration: none;
    box-shadow: 0 14px 28px -16px rgba(var(--shadow), 0.7);
}
.store__icon { width: 1.5rem; height: 1.5rem; flex: none; fill: currentColor; }
.store__text { display: flex; flex-direction: column; line-height: 1.1; font-weight: 760; font-size: 1.15rem; white-space: nowrap; }
.store__text small { font-size: 0.72rem; font-weight: 500; color: #3c5254; }
.store:focus-visible { outline-color: var(--on-brand); }

/* ---------- telefoni ---------- */
.phone {
    /* La cornice è nell'immagine (stessa delle grafiche store): qui solo ombra */
    aspect-ratio: 316 / 666; max-width: 100%;
    filter: drop-shadow(0 30px 28px rgba(var(--shadow), 0.4));
}
.phone img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Comparsa allo scorrimento: solo ciò che parte fuori vista (site.js) */
.reveal.is-pending { translate: 0 16px; }
.reveal.is-pending img { clip-path: inset(0 0 100% 0); }
.reveal.is-in { translate: 0 0; transition: translate var(--t-reveal) var(--ease-out); }
.reveal.is-in img { clip-path: inset(0 0 0 0); transition: clip-path var(--t-reveal) var(--ease-in-out); }
.reveal-soft.is-pending { translate: 0 12px; opacity: 0.001; }
.reveal-soft.is-in { translate: 0 0; opacity: 1; transition: translate 600ms var(--ease-out), opacity 400ms ease; }

/* ---------- titoli condivisi ---------- */
.section-title { font-size: clamp(2.1rem, 3.8vw, 3.2rem); font-weight: 820; font-variation-settings: "wdth" 82; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; max-width: 18ch; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.6rem; font-weight: 700; color: var(--brand-ink); text-decoration: none; }
.link-arrow::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor; rotate: 45deg; transition: translate var(--t-ui) var(--ease-out); }

/* =================================================================
   HOME
   ================================================================= */
.hero { background: var(--brand); color: var(--on-brand); padding-top: clamp(2.5rem, 5vw, 4.5rem); position: relative; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 7rem; background: var(--ground); z-index: -1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; align-items: center; }
.hero__copy { padding-bottom: 8rem; }
.hero__title {
    font-size: clamp(2.4rem, 3.9vw, 3.4rem); font-weight: 820; font-variation-settings: "wdth" 78;
    line-height: 1; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance;
}
.hero__lead { margin-top: 1.4rem; font-size: 1.5rem; line-height: 1.35; max-width: 28ch; text-wrap: pretty; }
.hero__phones { position: relative; height: clamp(30rem, 46vw, 40rem); }
.hero__phones .phone { position: absolute; width: clamp(14rem, 20vw, 18rem); }
.phone--front { right: 34%; bottom: 0; z-index: 2; }
.phone--back { right: 2%; bottom: 3.5rem; rotate: 6deg; }
@media (prefers-reduced-motion: no-preference) {
    .hero__phones .phone {
        transition: transform var(--t-reveal) var(--ease-out), translate var(--t-reveal) var(--ease-out);
        @starting-style { translate: 0 16px; }
    }
    .hero__phones .phone img {
        transition: clip-path var(--t-reveal) var(--ease-in-out);
        @starting-style { clip-path: inset(0 0 100% 0); }
    }
    .hero__phones .phone--back, .hero__phones .phone--back img { transition-delay: 80ms; }
}

/* Hero in stile store: evidenza menta nel titolo, strada tratteggiata
   dietro i telefoni, riquadro prezzo che esce dallo schermo. */
.hero { overflow-x: clip; }
.hero__copy { position: relative; z-index: 1; }
.hero__title em { font-style: normal; color: #b6f2d6; }
.hero__phones { --pw: clamp(14rem, 20vw, 18rem); }
.hero__phones .phone { width: var(--pw); }
.hero__phones .phone--back { z-index: 1; }
.hero__road { position: absolute; z-index: 0; inset: -12% -40% 1rem -55%; width: 195%; height: 112%; pointer-events: none; overflow: visible; }
.hero__road path { fill: none; vector-effect: non-scaling-stroke; }
.hero__road-band { stroke: rgba(255, 255, 255, 0.1); stroke-width: 7.5rem; stroke-linecap: round; }
.hero__road-line { stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.3rem; stroke-dasharray: 1.6rem 1.6rem; stroke-linecap: round; }
.hero__deal {
    position: absolute; z-index: 3; bottom: 27%; right: calc(34% + var(--pw) - 4.5rem);
    padding: 0.95rem 1.3rem 1rem; border-radius: 1.4rem; rotate: -4deg;
    background: #fff; color: #0d1b1d; white-space: nowrap;
    box-shadow: 0 26px 46px -18px rgba(0, 30, 34, 0.55);
}
.hero__deal-price { display: flex; align-items: baseline; gap: 0.4rem; font-size: clamp(2.3rem, 3.4vw, 3.1rem); font-weight: 900; font-variation-settings: "wdth" 80; line-height: 1; letter-spacing: -0.02em; color: #12a150; font-variant-numeric: tabular-nums; }
.hero__deal-price small { font-size: 0.36em; font-weight: 750; letter-spacing: 0; color: #3c5254; }
.hero__deal-tag { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; font-size: 0.95rem; font-weight: 720; }
.hero__deal-tag svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: #12a150; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
    .hero__deal {
        transition: translate 700ms var(--ease-out) 450ms, opacity 400ms ease 450ms;
        @starting-style { translate: -14px 10px; opacity: 0; }
    }
}

.press { padding-block: 1rem 3rem; }
.press__row { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; border-block: 1px solid var(--rule); padding-block: 1.4rem; }
.press__label { font-size: 0.95rem; font-weight: 650; color: var(--text-2); }
.press__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2.2rem; flex: 1; justify-content: space-between; }
.w { text-decoration: none; color: var(--text-2); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; transition: color var(--t-ui) ease; }
.w--serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.w--heavy { font-weight: 850; font-variation-settings: "wdth" 88; letter-spacing: -0.02em; }

.features { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3rem); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.feature--flip .feature__text { order: 2; }
.feature__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 820; font-variation-settings: "wdth" 82; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; max-width: 14ch; }
.feature__text p { margin-top: 1.1rem; font-size: 1.15rem; color: var(--text-2); max-width: 38ch; text-wrap: pretty; }
.feature__media { display: grid; place-items: center; background: var(--panel); border-radius: var(--r-box); padding: clamp(2rem, 5vw, 3.5rem) 1rem; overflow: hidden; }
.feature__media .phone { width: min(16.5rem, 70%); }
.features--garage { padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 4rem); }
.feature__media--notif { position: relative; padding-top: clamp(4.5rem, 8vw, 5.5rem); }
.notif-card {
    position: absolute; z-index: 2; top: clamp(1.2rem, 2.5vw, 1.8rem); left: 50%; translate: -50% 0;
    width: min(22rem, 88%); display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.8rem 0.95rem; border-radius: 1.3rem; background: rgba(250, 251, 252, 0.97); color: #0d1b1d;
    box-shadow: 0 22px 40px -18px rgba(0, 30, 34, 0.5);
}
.notif-card__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; background: var(--brand); }
.notif-card__icon svg { width: 1.3rem; height: 1.3rem; fill: #fff; }
.notif-card__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.notif-card__head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: #5b6b6d; }
.notif-card__head b { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #0d1b1d; }
.notif-card__title { font-size: 1rem; font-weight: 760; margin-top: 0.1rem; }
.notif-card__body { font-size: 0.88rem; color: #3c5254; }
.reveal-soft.notif-card.is-pending { translate: -50% 12px; }
.reveal-soft.notif-card.is-in { translate: -50% 0; }

.trip { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }
.trip__panel {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    grid-template-areas: "head phone" "list phone";
    gap: 2rem 3rem; align-items: start;
    background: var(--brand-deep); color: var(--on-brand);
    border-radius: var(--r-box); padding: clamp(2rem, 5vw, 4rem); overflow: hidden;
}
.trip__head { grid-area: head; }
.section-title--panel { max-width: 16ch; }
.trip__lead { margin-top: 1.1rem; font-size: 1.3rem; font-weight: 600; line-height: 1.4; max-width: 36ch; }
.trip__phone { grid-area: phone; justify-self: center; width: min(17rem, 100%); margin-bottom: calc(-1 * clamp(5rem, 9vw, 7rem)); }
.trip__list { grid-area: list; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; align-self: end; }
.trip__list li { display: grid; gap: 0.15rem; padding-top: 0.8rem; border-top: 2px solid rgba(246, 251, 251, 0.5); font-size: 1.15rem; line-height: 1.35; }
.trip__list strong { font-weight: 780; }
.trip__list span { font-weight: 500; }

.today { background: var(--ground-2); padding-block: clamp(4rem, 8vw, 6rem); }
.today__src { margin-top: 0.8rem; color: var(--text-2); }
.today__regions { margin-top: 2.2rem; }
.today__regions h3 { font-size: 1.05rem; font-weight: 750; margin-bottom: 0.9rem; }

.voices { padding-block: clamp(4rem, 8vw, 6rem); }
.voices__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem 3rem; }
.voices__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.quote--big { background: var(--panel); border-radius: var(--r-box); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.quote--big blockquote { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; font-variation-settings: "wdth" 82; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.quote--big figcaption { font-weight: 700; font-size: 1.1rem; color: var(--brand-ink); }
.voices__side { display: grid; gap: 1.8rem; align-content: center; }
.quote:not(.quote--big) { border-top: 2px solid var(--text); padding-top: 1.1rem; }
.quote:not(.quote--big) blockquote { font-size: 1.2rem; line-height: 1.4; font-weight: 600; }
.quote:not(.quote--big) figcaption { margin-top: 0.7rem; color: var(--text-2); font-weight: 600; font-size: 0.95rem; }
.rating { display: flex; align-items: center; gap: 0.8rem; }
.rating__score { font-size: 2.6rem; font-weight: 820; font-variation-settings: "wdth" 78; line-height: 1; font-variant-numeric: tabular-nums; }
.rating__text { font-size: 0.95rem; line-height: 1.35; color: var(--text-2); font-weight: 600; }

.faq { padding-block: 0 clamp(4rem, 8vw, 6rem); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(2rem, 5vw, 5rem); }

.close { background: var(--brand); color: var(--on-brand); text-align: center; padding-block: clamp(4.5rem, 9vw, 7rem); }
.close__logo { width: 8.5rem; height: auto; margin: 0 auto 1.4rem; }
.close__title { font-size: clamp(2.3rem, 5vw, 4.25rem); font-weight: 820; font-variation-settings: "wdth" 80; line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; margin-inline: auto; }

/* =================================================================
   COMPONENTI CONDIVISI
   ================================================================= */

/* Listino prezzi: dt etichetta, dd valore. Variante su fondo teal per le testate. */
.board { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 2px solid var(--text); margin-top: 2.2rem; }
.board__cell { padding: 1.4rem 1.4rem 1.2rem 0; display: grid; gap: 0.25rem; align-content: start; }
.board__cell + .board__cell { padding-left: 1.4rem; border-left: 1px solid var(--rule); }
.board__cell dt { font-weight: 700; color: var(--text-2); }
.board__cell dd { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 820; font-variation-settings: "wdth" 78; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; }
.board__cell dd small { font-size: 1rem; font-weight: 600; color: var(--text-2); margin-left: 0.2rem; letter-spacing: 0; }
.board__cell .board__note { font-size: 0.92rem; font-weight: 500; color: var(--text-2); line-height: 1.35; letter-spacing: 0; }
.board__note b, .board__note a { color: var(--brand-ink); font-weight: 750; }
.board--brand { border-top-color: var(--on-brand); }
.board--brand .board__cell + .board__cell { border-left-color: rgba(246, 251, 251, 0.35); }
.board--brand .board__cell dt, .board--brand .board__cell dd small, .board--brand .board__note { color: var(--on-brand); }
.board--brand .board__cell dt { opacity: 0.85; }
.board--two { --cols: 2; max-width: 40rem; }

/* Listino a segmenti (home): cifre accese sopra le "8" spente, come sul totem del distributore */
.board--seg .seg { display: flex; align-items: baseline; gap: 0.35rem; margin-block: 0.35rem 0.15rem; }
.seg__win { position: relative; font-family: "DSEG7", var(--font); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; letter-spacing: 0.02em; font-variation-settings: normal; }
.seg__ghost { color: var(--text); opacity: 0.07; }
.seg__val { position: absolute; inset: 0; color: var(--text); }
.board--seg .seg small { font-family: var(--font); }
@media (prefers-reduced-motion: no-preference) {
    /* Accensione: le cifre si illuminano quando il listino entra in vista */
    .board--seg.is-pending .seg__val { opacity: 0; }
    .board--seg.is-in .seg__val { opacity: 1; transition: opacity 500ms var(--ease-out) 150ms; }
    .board--seg.is-in .board__cell:nth-child(2) .seg__val { transition-delay: 230ms; }
    .board--seg.is-in .board__cell:nth-child(3) .seg__val { transition-delay: 310ms; }
    .board--seg.is-in .board__cell:nth-child(4) .seg__val { transition-delay: 390ms; }
}
.board--three { --cols: 3; }

/* Cifre chiave in riga (impianti, comuni, minimo del giorno) */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.4rem 2rem; margin-block: 1.8rem; }
.figures > div { border-top: 2px solid var(--text); padding-top: 0.8rem; display: grid; gap: 0.15rem; align-content: start; }
.figures dt { font-size: 0.95rem; font-weight: 650; color: var(--text-2); }
.figures dd { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 820; font-variation-settings: "wdth" 80; line-height: 1.1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.figures dd small { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text-2); letter-spacing: 0; margin-top: 0.2rem; }
.figures .delta-pos, .figures .delta-neg, .figures .delta-zero { font-size: clamp(1.3rem, 2vw, 1.6rem); }

/* Link a pillola (regioni e province vicine) */
.pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 1.05rem; border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--ground); color: var(--text); text-decoration: none; font-weight: 650; font-size: 0.98rem; }
.pill span { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pill.is-low span { color: var(--down); }
.pill.is-high span { color: var(--up); }
.pill--quiet { background: transparent; border-style: dashed; }

/* Domande (home e pagine prezzi) */
.faq__list details { border-top: 1px solid var(--rule); }
.faq__list details:last-child { border-bottom: 1px solid var(--rule); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 0; font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
    content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.3rem;
    background: linear-gradient(var(--brand-ink), var(--brand-ink)) center / 100% 2.5px no-repeat, linear-gradient(var(--brand-ink), var(--brand-ink)) center / 2.5px 100% no-repeat;
    transition: rotate var(--t-ui) var(--ease-out);
}
.faq__list details[open] summary::after { rotate: 45deg; }
.faq__list details::details-content { block-size: 0; overflow: clip; transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete; }
.faq__list details[open]::details-content { block-size: auto; }
.faq__a p { padding-bottom: 1.4rem; color: var(--text-2); max-width: 62ch; }
.faq__a a { color: var(--brand-ink); font-weight: 650; }

/* Semantica prezzi */
.delta-pos { color: var(--up); font-weight: 700; }
.delta-neg { color: var(--down); font-weight: 700; }
.delta-zero { color: var(--text-2); }

/* =================================================================
   PAGINE INTERNE (/prezzi/, privacy, 404)
   ================================================================= */
.page-head { background: var(--brand); color: var(--on-brand); padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.2rem 0.55rem; font-size: 0.95rem; font-weight: 600; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.55rem; }
.crumbs li + li::before { content: ""; width: 0.38rem; height: 0.38rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; rotate: 45deg; opacity: 0.6; }
.crumbs a { color: var(--on-brand); text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: rgba(246, 251, 251, 0.5); }
.crumbs [aria-current] { opacity: 0.85; }
.page-title { margin-top: 1.4rem; font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 820; font-variation-settings: "wdth" 78; line-height: 1; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.page-meta { margin-top: 1rem; font-size: 1.15rem; line-height: 1.45; max-width: 52ch; text-wrap: pretty; }
.page-meta strong { font-weight: 750; }

.page-body { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem); }

/* Blocco editoriale: titolo a sinistra, contenuto a destra; "stack" per tabelle larghe */
.block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 1.2rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.block + .block { border-top: 1px solid var(--rule); }
.block--stack { grid-template-columns: minmax(0, 1fr); }
.block__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 820; font-variation-settings: "wdth" 82; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch; }
.block--stack .block__title { max-width: 30ch; }
.block__sub { margin-top: 2rem; margin-bottom: 0.8rem; font-size: 1.15rem; font-weight: 750; }
.prose p { max-width: 66ch; text-wrap: pretty; }
.prose p + p { margin-top: 0.9rem; }
.prose a { color: var(--brand-ink); font-weight: 650; }
.note { margin-top: 1rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-2); max-width: 80ch; }
.note a { color: var(--brand-ink); }

/* Tabelle dati: niente card, filetti; numeri allineati a destra */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.2rem; }
.data { width: 100%; border-collapse: collapse; border-top: 2px solid var(--text); font-variant-numeric: tabular-nums; }
.data th, .data td { padding: 0.85rem 0.9rem 0.85rem 0; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data th:last-child, .data td:last-child { padding-right: 0; }
.data thead th { font-size: 0.85rem; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.data tbody tr:last-child td { border-bottom: 0; }
.data .num { text-align: right; white-space: nowrap; }
.data .price { font-weight: 780; font-size: 1.1rem; }
.data .price small { font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin-left: 0.15rem; }
.data td a { color: var(--brand-ink); font-weight: 700; text-decoration-color: transparent; transition: text-decoration-color var(--t-ui) ease; }
.data .is-low { color: var(--down); }
.data .is-high { color: var(--up); }
.data .is-low::after, .data .is-high::after { content: "min"; margin-left: 0.4rem; font-size: 0.7rem; font-weight: 750; vertical-align: 0.15em; }
.data .is-high::after { content: "max"; }
.data__name { font-weight: 700; }
.data__sub { display: block; font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.data--wide { min-width: 36rem; }

/* Fascia "scarica l'app" nelle pagine interne */
.band { background: var(--brand); color: var(--on-brand); padding-block: clamp(3rem, 6vw, 4.5rem); }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.band__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 820; font-variation-settings: "wdth" 80; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; max-width: 18ch; }
.band__text p { max-width: 54ch; text-wrap: pretty; }
.band__text p + p { margin-top: 0.8rem; }
.band .stores { margin-top: 1.6rem; }

/* Testi legali */
.legal { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.legal__body { max-width: 72ch; }
.legal__body h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 820; font-variation-settings: "wdth" 80; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; margin-bottom: 0.8rem; }
.legal__body h1:not(:first-child) { margin-top: 3.5rem; }
.legal__body h2 { font-size: 1.45rem; font-weight: 800; font-variation-settings: "wdth" 88; line-height: 1.2; letter-spacing: -0.01em; margin-top: 2.6rem; margin-bottom: 0.6rem; }
.legal__body h3 { font-size: 1.15rem; font-weight: 750; margin-top: 2rem; margin-bottom: 0.4rem; }
.legal__body p, .legal__body li, .legal__body address { color: var(--text-2); font-style: normal; }
.legal__body p + p { margin-top: 0.8rem; }
.legal__body strong { color: var(--text); }
.legal__body ul, .legal__body ol { margin: 0.6rem 0 0.9rem 1.2rem; list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__body li { margin-block: 0.3rem; padding-left: 0.2rem; }
.legal__body li::marker { color: var(--brand-ink); }
.legal__body a { color: var(--brand-ink); font-weight: 650; overflow-wrap: anywhere; }
.legal__body code { font-size: 0.92em; background: var(--panel); padding: 0.05em 0.35em; border-radius: 0.35rem; }
.legal__body hr { border: 0; border-top: 1px solid var(--rule); margin-block: 3rem; }
.legal__body em, .legal__body .updated { color: var(--text-2); font-size: 0.95rem; }
.legal__body table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--text); margin-block: 1rem 1.4rem; font-size: 0.95rem; display: block; overflow-x: auto; }
.legal__body th, .legal__body td { padding: 0.7rem 0.9rem 0.7rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.legal__body th { font-size: 0.85rem; color: var(--text-2); font-weight: 700; }
.legal__body section { padding-block: 0.4rem; }
.legal__body header { margin-bottom: 1rem; }
.legal__body nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.6rem 1.4rem; }
.legal__body nav a { display: inline-flex; padding: 0.45rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--rule); text-decoration: none; color: var(--text); font-weight: 650; }
.legal__body .lang-label { font-weight: 700; color: var(--text); margin-top: 0.4rem; }
.legal__body article + article { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.legal--plain { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* 404 */
.lost { background: var(--brand); color: var(--on-brand); padding-block: clamp(4rem, 10vw, 8rem); }
.lost__code { font-size: clamp(5rem, 16vw, 11rem); font-weight: 850; font-variation-settings: "wdth" 70; line-height: 0.85; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lost__title { margin-top: 1.4rem; font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 820; font-variation-settings: "wdth" 80; line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance; }
.lost__text { margin-top: 1rem; font-size: 1.2rem; max-width: 40ch; }
.lost__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.btn-solid { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0.6rem 1.5rem; border-radius: var(--r-pill); background: var(--store-bg); color: #00515a; font-weight: 750; font-size: 1.1rem; text-decoration: none; box-shadow: 0 14px 28px -16px rgba(var(--shadow), 0.7); }
.btn-line { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0.6rem 1.5rem; border-radius: var(--r-pill); border: 2px solid rgba(246, 251, 251, 0.6); color: var(--on-brand); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.lost a:focus-visible { outline-color: var(--on-brand); }

/* ---------- footer ---------- */
.foot { background: var(--ground); color: var(--text-2); font-size: 0.92rem; border-top: 1px solid var(--rule); }
.foot__regions { padding-block: 2.2rem 1.6rem; }
.foot__regions h2 { font-size: 0.95rem; font-weight: 750; color: var(--text); margin-bottom: 0.8rem; }
.foot__regions ul { columns: 4 11rem; column-gap: 2rem; }
.foot__regions li { break-inside: avoid; padding-block: 0.18rem; }
.foot__regions a { text-decoration: none; color: var(--text-2); font-weight: 550; transition: color var(--t-ui) ease; }
.foot__row { display: flex; justify-content: space-between; gap: 0.6rem 1.4rem; flex-wrap: wrap; padding-block: 1.4rem 1.6rem; border-top: 1px solid var(--rule); }
.foot__links { display: flex; gap: 0.6rem 1.4rem; flex-wrap: wrap; }
.foot__links a { color: var(--text); }

/* ---------- hover solo con mouse vero ---------- */
@media (hover: hover) and (pointer: fine) {
    .store:hover { translate: 0 -2px; box-shadow: 0 20px 34px -18px rgba(var(--shadow), 0.75); }
    .store { transition: transform var(--t-press) var(--ease-out), translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out); }
    .nav__menu a:hover { background-size: 100% 2px; }
    .nav__cta:hover, .btn-solid:hover { background: var(--panel); }
    .btn-line:hover { border-color: var(--on-brand); }
    .w:hover { color: var(--text); }
    .link-arrow:hover::after { translate: 3px 0; }
    .faq__list summary:hover { color: var(--brand-ink); }
    .pill:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
    .data td a:hover { text-decoration-color: currentColor; }
    .data tbody tr { transition: background-color var(--t-ui) ease; }
    .data tbody tr:hover { background: var(--ground-2); }
    .foot__regions a:hover { color: var(--brand-ink); }
    .crumbs a:hover { text-decoration-color: currentColor; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
    .hero__grid { grid-template-columns: 1fr; gap: 1rem; }
    .hero__copy { padding-bottom: 0; }
    .hero__phones { height: 30rem; }
    .phone--front { right: auto; left: 8%; }
    .hero__deal { right: auto; left: max(0px, calc(8% - 2.5rem)); bottom: 22%; }
    .feature, .faq__grid, .voices__grid, .block, .band__grid { grid-template-columns: minmax(0, 1fr); }
    .feature--flip .feature__text { order: 0; }
    .trip__panel { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "list"; }
    .trip__phone { margin-bottom: 0; width: min(15rem, 70%); }
    .board, .board--three { --cols: 2; }
    .board__cell:nth-child(odd) { padding-left: 0; border-left: 0; }
    .board__cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .board--brand .board__cell:nth-child(n+3) { border-top-color: rgba(246, 251, 251, 0.35); }
}
@media (max-width: 640px) {
    .nav__bar { gap: 1rem; }
    .nav__menu { display: none; }
    .nav__cta { margin-left: auto; }
    .hero__lead { font-size: 1.3rem; font-weight: 700; }
    .store { flex: 1 1 9.5rem; justify-content: center; padding-inline: 1rem 1.1rem; }
    .store__text { font-size: 1.05rem; }
    .hero__phones { height: 25rem; margin-top: 1rem; }
    .hero__phones { --pw: 10.5rem; }
    .hero__deal { left: 0; bottom: 30%; padding: 0.55rem 0.8rem 0.6rem; border-radius: 0.95rem; }
    .hero__deal-price { font-size: 1.6rem; }
    .hero__deal-tag { font-size: 0.7rem; margin-top: 0.3rem; }
    .hero__deal-tag svg { width: 0.85rem; height: 0.85rem; }
    .hero__road-band { stroke-width: 5rem; }
    .phone--front { left: 6%; }
    .phone--back { right: 6%; bottom: 2rem; }
    .hero::after { height: 5rem; }
    .press__row { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .press__logos { justify-content: flex-start; gap: 0.5rem 1.5rem; }
    .trip__list { grid-template-columns: 1fr; }
    .trip__lead { font-size: 1.25rem; font-weight: 700; }
    .board__cell { padding-right: 0.8rem; }
    .board__cell + .board__cell { padding-left: 0.8rem; }
    .board__cell:nth-child(odd) { padding-left: 0; }
    .board__cell dd { font-size: 1.9rem; }
    .seg__win { font-size: 1.6rem; }
    .page-meta { font-size: 1.05rem; }
    .data .price { font-size: 1rem; }
    .data .hide-sm { display: none; }
    .lost__actions > a { flex: 1 1 12rem; justify-content: center; }
}

/* Movimento ridotto: niente spostamenti né maschere, restano i cambi di colore */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal.is-pending, .reveal-soft.is-pending { translate: none; opacity: 1; }
    .reveal.is-pending img { clip-path: none; }
    *, *::before, *::after { transition-property: color, background-color, opacity !important; }
}

@media print {
    .nav, .band, .foot__regions, .skip, #privacyBanner { display: none !important; }
    .page-head, .lost { background: none; color: #000; }
    body { background: #fff; color: #000; }
}

/* =================================================================
   PAGINA GESTORI (/gestori/) e richiamo in home
   ================================================================= */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.page-head .btn-solid, .page-head .btn-line, .band .btn-solid { min-height: 3.2rem; }
.page-head a:focus-visible, .band a:focus-visible { outline-color: var(--on-brand); }

/* Cosa offre: elenco a filetti in due colonne, con stato */
.offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.5rem; }
.offer li { border-top: 2px solid var(--text); padding-top: 0.9rem; display: grid; gap: 0.35rem; align-content: start; }
.offer h3 { font-size: 1.2rem; font-weight: 780; line-height: 1.25; }
.offer p { color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
.tag { justify-self: start; font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--panel); color: var(--brand-ink); }

/* Come funziona: passi numerati */
.steps { display: grid; gap: 1.4rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1rem; counter-increment: step; }
.steps li::before { content: counter(step); grid-row: span 2; font-size: 2rem; font-weight: 820; font-variation-settings: "wdth" 78; line-height: 1; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.15rem; font-weight: 750; line-height: 1.3; }
.steps p { color: var(--text-2); max-width: 60ch; }
.steps a { color: var(--brand-ink); font-weight: 650; }

/* Home: riga discreta per i gestori prima della chiusura */
.owners { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.owners__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 2rem; border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.owners__row p { font-size: 1.15rem; font-weight: 650; }
.owners .link-arrow { margin-top: 0; }

@media (max-width: 920px) {
    .offer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .actions > a { flex: 1 1 12rem; justify-content: center; }
}

/* Menu: "Per i gestori" come pillola a contorno, accanto a "Scarica".
   Spicca senza introdurre un secondo colore (un solo accento nel sito). */
.nav__owners { color: var(--on-brand); font-weight: 750; font-size: 1.05rem; padding: 0.45rem 1.05rem; border-radius: var(--r-pill); border: 2px solid rgba(246, 251, 251, 0.7); text-decoration: none; white-space: nowrap; }
.nav__owners[aria-current] { background: rgba(246, 251, 251, 0.16); border-color: var(--on-brand); }
@media (hover: hover) and (pointer: fine) {
    .nav__owners:hover { background: rgba(246, 251, 251, 0.14); border-color: var(--on-brand); }
}
@media (max-width: 640px) {
    .nav__owners { margin-left: auto; font-size: 0.95rem; padding: 0.4rem 0.85rem; }
    .nav__owners + .nav__cta { margin-left: 0; }
}
@media (max-width: 360px) {
    .nav__owners { display: none; }
    .nav__owners + .nav__cta { margin-left: auto; }
}
