/* Citypage, aspetto «leggero»: petrolio con giallo, corallo e verde pastello.
   Si carica dopo app.css, solo nelle pagine pubbliche (layout.php): il backend e l'area clienti restano come sono.
   Per tornare al vecchio aspetto basta togliere il collegamento a questo file da layout.php. */

/* ---------- Carattere Poppins, ospitato sul sito (licenza OFL): nessuna richiesta a Google prima del consenso ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Colori e base ---------- */
body.cp {
  --ink: #1F2D3A; --ink-2: #4B5866; --ink-3: #66737F;
  --paper: #F6F9FA; --white: #FFFFFF; --line: #DCE3E8; --line-2: #E8EDF0; --road: #E3F1F2; --water: #CFE0E8;
  --pin: #0B7A85; --pin-dark: #075E67; --tram: #F6C61A; --park: #2FA878;
  --tint: #EAF3F4; --soft: #9ECED3;
  --sun: #F6C61A; --sun-t: #FFF4CC; --sun-b: #F6DE8E;
  --red: #D93A2B; --red-dark: #B92D20;
  --coral: #EF6C4D; --coral-t: #FDE8E1; --coral-b: #F7C6B8;
  --leaf: #2FA878; --leaf-t: #E1F5EC; --leaf-b: #B7E4D0;
  --cream: #FFF6D9; --mint: #EEF8F3; --peach: #FFEEE8;
  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;
  background: #fff; color: var(--ink-2); font-family: var(--font); font-size: 17px; line-height: 1.65; font-variation-settings: normal;
}
body.cp :focus-visible { outline: 3px solid var(--pin-dark); outline-offset: 2px; }
body.cp h1, body.cp h2, body.cp h3, body.cp h4 { font-weight: 600; font-variation-settings: normal; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); }
body.cp h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
body.cp h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
body.cp h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
body.cp .lead { font-size: 1.15rem; line-height: 1.7; color: var(--ink-2); }
body.cp .muted { color: var(--ink-3); }
body.cp .prose a, body.cp .btn-link { color: var(--pin-dark); }
/* il testo corrente è grigio-blu morbido; numeri, grassetti ed etichette restano scuri */
body.cp strong, body.cp b, body.cp label, body.cp th, body.cp dd { color: var(--ink); }
body.cp .check { color: var(--ink-2); }
body.cp .plan .price, body.cp .serp-name, body.cp .serp-month, body.cp .wiz-result strong, body.cp .stat b { color: var(--ink); }
body.cp .section-dark#contatto strong, body.cp .section-dark#reti strong { color: inherit; }

/* Parole da ricordare: evidenziatore giallo */
body.cp .g, body.cp .hero .g, body.cp .section-dark .g { color: inherit; background: linear-gradient(transparent 62%, #FBD84D 62%); padding: 0 .08em; }

/* ---------- Pulsanti ---------- */
body.cp .btn { border-width: 1.5px; border-radius: 8px; font-weight: 500; font-variation-settings: normal; }
body.cp .btn-primary, body.cp .btn-primary:hover { color: #fff; }
body.cp .btn-primary { background: var(--pin); border-color: var(--pin); }
body.cp .btn-primary:hover { background: var(--pin-dark); border-color: var(--pin-dark); }
body.cp .btn-primary[href^="/crea-la-tua-pagina/"], body.cp .btn-primary[href^="/crea-la-tua-pagina/"]:hover { color: #fff; }
body.cp .btn-primary[href^="/crea-la-tua-pagina/"] { background: var(--red); border-color: var(--red); }
body.cp .btn-primary[href^="/crea-la-tua-pagina/"]:hover { background: var(--red-dark); border-color: var(--red-dark); }
body.cp .btn-ghost { color: var(--pin-dark); border-color: var(--pin); }
body.cp .btn-ghost:hover { background: var(--tint); color: var(--pin-dark); border-color: var(--pin); }
body.cp .btn-dark { background: var(--ink); border-color: var(--ink); }
body.cp .badge.new { color: #fff; }
body.cp .check input { accent-color: var(--pin); }

/* ---------- Intestazione ---------- */
body.cp .site-header { background: #fff; border-bottom: 1px solid #E3E9ED; }
body.cp .nav a { color: var(--ink); font-weight: 500; font-size: .95rem; }
body.cp .nav a:hover, body.cp .nav a[aria-current="page"] { color: var(--pin-dark); border-bottom-color: var(--pin); }
body.cp .logo:hover { color: var(--ink); }
body.cp .header-actions .login { color: var(--ink); font-weight: 500; }
body.cp .site-header .btn-ghost { color: var(--pin-dark); border-color: var(--pin); }
body.cp .site-header .btn-ghost:hover { background: var(--tint); color: var(--pin-dark); border-color: var(--pin); }
body.cp .site-header .btn-dark { background: var(--tint); color: var(--pin-dark); border-color: var(--tint); }
body.cp .site-header .btn-dark:hover { background: var(--soft); color: var(--ink); border-color: var(--soft); }
body.cp .menu-toggle { border-color: var(--ink); }
body.cp .menu-toggle span { background: var(--ink); }
@media (max-width: 960px) { body.cp .site-header.open .nav a { border-bottom-color: var(--line); } }

/* ---------- Prima schermata ---------- */
body.cp .hero { background: var(--tint); color: var(--ink-2); border-bottom: 0; padding: 72px 0 88px; }
body.cp .hero h1, body.cp .hero .hero-proof strong { color: var(--ink); }
body.cp .hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 15em; }
body.cp .hero h1 .line { display: block; text-wrap: balance; }
body.cp .hero h1 .line + .line { font-size: .62em; font-weight: 600; color: var(--ink-2); margin-top: .35em; line-height: 1.25; letter-spacing: -0.01em; }
body.cp .hero .lead, body.cp .hero .hero-proof { color: var(--ink-2); }
body.cp .hero .btn-ghost { color: var(--pin-dark); border-color: var(--pin); }
body.cp .hero .btn-ghost:hover { background: #fff; color: var(--pin-dark); border-color: var(--pin); }
body.cp .hero .serp { color: var(--ink); }
body.cp .trust, body.cp .hero .trust { color: #1E7A52; font-weight: 500; }
body.cp .hero-ebook { margin: 10px 0 0; font-size: .95rem; }
body.cp .hero-ebook a { color: var(--pin-dark); font-weight: 500; }
body.cp .hero .reti-points li { color: var(--ink-2); }
body.cp .hero .reti-points li::before { border-color: var(--leaf); }
@media (max-width: 960px) { body.cp .hero { padding: 44px 0 60px; } }

/* La simulazione dei risultati di ricerca */
body.cp .serp { border-color: #CFE0E3; border-radius: 16px; box-shadow: 0 24px 50px -30px rgba(31, 45, 58, .3); }
body.cp .serp-pos { background: var(--tint); color: var(--pin-dark); }
body.cp .serp-item.you { background: var(--cream); }
body.cp .serp-item.you .serp-pos { background: var(--sun); color: var(--ink); }
body.cp .serp-foot { background: var(--paper); }

/* ---------- Sezioni ---------- */
body.cp .section { padding: 96px 0; }
body.cp .section-head { max-width: 42em; }
body.cp .section-head p { color: var(--ink-2); }
body.home .section-white { background: var(--cream); border: 0; }
body.cp .section-mint { background: var(--mint); }
body.cp .section-dark { background: var(--paper); color: var(--ink-2); }
body.cp .section-dark .lead, body.cp .section-dark .muted, body.cp .section-dark .section-head p { color: var(--ink-2); }
body.cp .engines span { background: var(--tint); border-color: var(--soft); color: var(--pin-dark); font-weight: 500; }
@media (max-width: 700px) { body.cp .section { padding: 64px 0; } }

/* Scegli da dove parti: tre schede colorate */
body.cp .directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 0; }
body.cp .directory a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: box-shadow .2s, transform .2s; }
body.cp .directory a::before { content: ""; width: 56px; height: 56px; background-repeat: no-repeat; background-size: contain; margin-bottom: 8px; }
body.cp .directory a:nth-child(1) { background: var(--sun-t); border-color: var(--sun-b); }
body.cp .directory a:nth-child(2) { background: var(--coral-t); border-color: var(--coral-b); }
body.cp .directory a:nth-child(3) { background: var(--leaf-t); border-color: var(--leaf-b); }
body.cp .directory a:nth-child(1):hover { background: var(--sun-t); }
body.cp .directory a:nth-child(2):hover { background: var(--coral-t); }
body.cp .directory a:nth-child(3):hover { background: var(--leaf-t); }
body.cp .directory a:hover { color: var(--ink); box-shadow: 0 16px 32px -22px rgba(31, 45, 58, .45); transform: translateY(-2px); }
body.cp .directory a:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect fill='%23FBDF84' x='8' y='22' width='40' height='28'/%3E%3Crect fill='%23F2B705' x='4' y='10' width='48' height='14' rx='3'/%3E%3Crect fill='%231F2D3A' x='22' y='32' width='12' height='18'/%3E%3C/svg%3E"); }
body.cp .directory a:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect fill='%23EF6C4D' x='6' y='6' width='20' height='20' rx='4'/%3E%3Crect fill='%23F8B8A8' x='30' y='6' width='20' height='20' rx='4'/%3E%3Crect fill='%23F8B8A8' x='6' y='30' width='20' height='20' rx='4'/%3E%3Crect fill='%231F2D3A' x='30' y='30' width='20' height='20' rx='4'/%3E%3C/svg%3E"); }
body.cp .directory a:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect fill='%23A7DEC6' x='8' y='6' width='26' height='44' rx='3'/%3E%3Crect fill='%232FA878' x='30' y='20' width='18' height='30' rx='3'/%3E%3Crect fill='%23fff' x='14' y='13' width='5' height='5'/%3E%3Crect fill='%23fff' x='23' y='13' width='5' height='5'/%3E%3Crect fill='%23fff' x='14' y='24' width='5' height='5'/%3E%3Crect fill='%23fff' x='23' y='24' width='5' height='5'/%3E%3Crect fill='%23fff' x='36' y='27' width='5' height='5'/%3E%3C/svg%3E"); }
body.cp .directory h3 { font-size: 1.4rem; margin: 0; font-variation-settings: normal; }
body.cp .directory p { color: var(--ink-2); }
body.cp .directory .go { margin-top: auto; color: var(--pin-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { body.cp .directory { grid-template-columns: minmax(0, 1fr); } }

/* Come lavoriamo: quattro schede colorate con il numero del passo */
body.cp .steps { border-top: 0; gap: 20px; }
body.cp .steps li { padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
body.cp .steps li::before { width: 44px; height: 44px; border: 0; background: var(--c, var(--pin)); color: var(--ink); font-weight: 600; font-size: 1.05rem; margin-bottom: 18px; }
body.cp .steps li::after { display: none; }
body.cp .steps li:nth-child(1) { --c: #0B7A85; background: #E3F1F2; border-color: #BFE0E4; }
body.cp .steps li:nth-child(1)::before { color: #fff; }
body.cp .steps li:nth-child(2) { --c: #F2B705; background: var(--sun-t); border-color: var(--sun-b); }
body.cp .steps li:nth-child(3) { --c: #EF6C4D; background: var(--coral-t); border-color: var(--coral-b); }
body.cp .steps li:nth-child(4) { --c: #2FA878; background: var(--leaf-t); border-color: var(--leaf-b); }
body.cp .steps h3 { color: var(--ink); }
body.cp .steps p { color: var(--ink-2); }

/* Casi studio */
body.cp .cases { border-left: 0; gap: 24px; }
body.cp .case { border: 1px solid var(--line); border-radius: 12px; padding: 28px; background: #fff; overflow: hidden; transition: box-shadow .2s, transform .2s; }
body.cp .case:hover { color: var(--ink); box-shadow: 0 16px 32px -22px rgba(31, 45, 58, .45); transform: translateY(-2px); }
body.cp .case .rank { background: var(--leaf-t); color: #14532D; border-radius: 999px; padding: 3px 14px 3px 4px; font-weight: 500; margin-bottom: 16px; }
body.cp .case .rank i { background: #fff; color: #14532D; }
body.cp .case img { border-radius: 8px; }

/* Piani */
body.cp .plan { border-radius: 12px; }
body.cp .plan.highlight { border: 2px solid var(--pin); }
body.cp .plan .price { font-weight: 600; font-variation-settings: normal; }
body.cp .plan .badge-top { background: var(--sun); }
body.cp .period-switch button.is-on { background: var(--pin); color: #fff; }
body.cp .plans-kicker { color: var(--pin-dark); font-weight: 600; }
body.cp .plans-kicker-dark { color: var(--sun); }

/* Moduli */
body.cp input[type=text], body.cp input[type=email], body.cp input[type=tel], body.cp input[type=password], body.cp input[type=url], body.cp input[type=number], body.cp input[type=search], body.cp select, body.cp textarea, body.cp .input { border-color: #C3CED6; border-radius: 8px; }
body.cp input:focus, body.cp select:focus, body.cp textarea:focus { border-color: var(--pin); box-shadow: 0 0 0 3px rgba(11, 122, 133, .22); }
body.cp .panel { border-radius: 12px; }

/* ---------- Fasce scure: contatto finale e reti di negozi (petrolio scuro, con tre forme colorate) ---------- */
body.cp .section-dark#contatto, body.cp .section-dark#reti { background: var(--pin-dark); color: #fff; position: relative; overflow: hidden; }
/* Solo sulle sezioni .section-dark: nella pagina Contatti «#contatto» è una fascia chiara con il modulo */
body.cp .section-dark#contatto h2, body.cp .section-dark#contatto h3, body.cp .section-dark#reti h2, body.cp .section-dark#reti h3 { color: #fff; }
body.cp .section-dark#contatto .lead, body.cp .section-dark#contatto .muted, body.cp .section-dark#contatto .section-head p, body.cp .section-dark#reti .lead, body.cp .section-dark#reti .section-head p { color: #E3F1F2; }
body.cp .section-dark#contatto .g, body.cp .section-dark#reti .g { background: none; color: var(--sun); }
body.cp .section-dark#contatto .contact-facts li { border-top-color: rgba(255, 255, 255, .22); }
body.cp .section-dark#contatto .contact-facts a { color: #fff; }
body.cp .section-dark#contatto .contact-facts a:hover { color: var(--sun); }
body.cp .section-dark#contatto .btn-ghost, body.cp .section-dark#reti .btn-ghost { color: #fff; border-color: #fff; }
body.cp .section-dark#contatto .btn-ghost:hover, body.cp .section-dark#reti .btn-ghost:hover { background: #fff; color: var(--pin-dark); border-color: #fff; }
body.cp .section-dark#contatto { background-image: radial-gradient(circle at 99% 14%, #2FA878 0 56px, transparent 57px); }
body.cp .section-dark#contatto::before { content: ""; position: absolute; left: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--sun); }
body.cp .section-dark#contatto::after { content: ""; position: absolute; right: 70px; bottom: -56px; width: 130px; height: 130px; border-radius: 50%; background: var(--coral); }
body.cp .section-dark#contatto .wrap { position: relative; z-index: 1; }
body.cp .contact-band .panel { border-radius: 16px; }

/* ---------- Fascia del controllo gratuito sotto la prima schermata della home ---------- */
body.cp .audit-band { background: var(--sun-t); border-top: 1px solid var(--sun-b); border-bottom: 1px solid var(--sun-b); padding: 28px 0; }
body.cp .audit-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; }
body.cp .audit-band .plans-kicker { margin: 0 0 6px; }
body.cp .audit-band h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
body.cp .audit-band-form .wiz-search-row { margin-top: 0; }
@media (max-width: 860px) { body.cp .audit-band .wrap { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Controllo gratuito della scheda Google (/controllo-scheda-google/) ---------- */
body.cp .audit .wiz-wrap { max-width: 980px; }
body.cp .audit h1 { margin-top: 6px; }
body.cp .audit-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.cp .audit-result { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 16px 18px; transition: border-color .15s, transform .15s; }
body.cp .audit-result:hover { border-color: var(--pin); transform: translateY(-1px); }
body.cp .audit-result strong { display: block; font-size: 1.05rem; color: var(--ink); }
body.cp .audit-result small { color: var(--ink-3); font-size: .9rem; }
body.cp .audit-result em { font-style: normal; font-size: .82rem; background: var(--tint); padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); }
@media (max-width: 620px) { body.cp .audit-result { grid-template-columns: 24px 1fr; } body.cp .audit-result em, body.cp .audit-result .wiz-pick { grid-column: 2; justify-self: start; } }
body.cp .audit-checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
body.cp .audit-checks li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
body.cp .audit-checks p { margin: 2px 0 0; color: var(--ink-2); font-size: .93rem; }
body.cp .audit-pts { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--tint); color: var(--pin-dark); }
body.cp .audit-back { margin: 0 0 18px; font-size: .95rem; }
body.cp .audit-head { display: flex; gap: 32px; align-items: center; margin-bottom: 34px; }
body.cp .audit-ring { position: relative; flex: 0 0 150px; width: 150px; height: 150px; }
body.cp .audit-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
body.cp .audit-num b { font-size: 2.8rem; font-weight: 700; color: var(--ink); }
body.cp .audit-num i { font-style: normal; font-size: .85rem; color: var(--ink-3); margin-top: 4px; }
body.cp .audit-head h1 { margin: 0 0 6px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
body.cp .audit-head p { margin: 0 0 8px; }
body.cp .audit-grade { color: var(--ink-2); }
@media (max-width: 620px) { body.cp .audit-head { flex-direction: column; align-items: flex-start; gap: 18px; } }
body.cp .audit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.cp .audit-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; border-left-width: 5px; }
body.cp .audit-item.is-ok { border-left-color: #2FA878; }
body.cp .audit-item.is-part { border-left-color: #F2B705; }
body.cp .audit-item.is-ko { border-left-color: #EF6C4D; }
body.cp .audit-mark { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; }
body.cp .is-ok .audit-mark { background: #2FA878; }
body.cp .is-part .audit-mark { background: #E0A800; }
body.cp .is-ko .audit-mark { background: #EF6C4D; }
body.cp .audit-item > div { flex: 1; min-width: 0; }
body.cp .audit-item-title { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
body.cp .audit-item-pts { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
body.cp .audit-item-text { margin: 2px 0 0; color: var(--ink-2); }
body.cp .audit-tip { margin: 6px 0 0; color: var(--ink); font-weight: 500; }
body.cp .audit-cta { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-top: 40px; align-items: start; }
body.cp .audit-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
body.cp .audit-form h2, body.cp .audit-next h2 { margin: 0 0 8px; font-size: 1.35rem; }
body.cp .audit-next { background: var(--sun-t); border: 1px solid var(--sun-b); border-radius: 16px; padding: 26px; }
body.cp .audit-next p { color: var(--ink-2); }
@media (max-width: 860px) { body.cp .audit-cta { grid-template-columns: 1fr; } }

/* ---------- Recensioni Google di Citypage (caricate dal vivo, vedi assets/js/google-reviews.js) ---------- */
body.cp #rv-sentinel { height: 1px; }
body.cp .rv-summary { color: var(--ink-2); font-weight: 500; }
body.cp .rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 8px; align-items: start; }
body.cp .rv-card { margin: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
body.cp .rv-head { display: flex; gap: 12px; align-items: center; }
body.cp .rv-photo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--pin-dark); font-weight: 600; }
body.cp .rv-who { display: flex; flex-direction: column; min-width: 0; }
body.cp .rv-name { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cp a.rv-name:hover { text-decoration: underline; }
body.cp .rv-when { font-size: .82rem; color: var(--ink-3); }
body.cp .rv-stars { color: #F2B705; letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
body.cp .rv-text { margin: 0; padding: 0; border: 0; quotes: none; color: var(--ink-2); font-size: .98rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
body.cp .rv-text.open { display: block; }
body.cp .rv-toggle { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--pin-dark); text-decoration: underline; cursor: pointer; }
body.cp .rv-attr { margin: 22px 0 0; font-size: .9rem; color: var(--ink-3); }

/* ---------- «Come lavoriamo»: quattro passi con disegno, etichetta «Passo N» e frecce che mostrano l'ordine ---------- */
body.cp .steps-visual li { position: relative; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
body.cp .steps-visual li:nth-child(1) { z-index: 4; } body.cp .steps-visual li:nth-child(2) { z-index: 3; }
body.cp .steps-visual li:nth-child(3) { z-index: 2; } body.cp .steps-visual li:nth-child(4) { z-index: 1; }
body.cp .steps-visual li:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -20px rgba(31, 45, 58, .45); z-index: 6; }
body.cp .steps-visual .step-no { position: absolute; top: 28px; left: 84px; height: 44px; display: flex; align-items: center; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
body.cp .steps-visual li:not(:last-child)::after { content: ""; display: block; position: absolute; top: 35px; left: auto; right: -25px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); z-index: 2; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='%230B7A85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
body.cp .steps-visual .step-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
body.cp .steps-visual .step-tags span { font-size: .78rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(31, 45, 58, .12); color: var(--ink-2); }
body.cp .steps-visual .step-art { display: block; width: 100%; height: auto; margin-top: auto; padding-top: 20px; overflow: visible; }
body.cp .steps-visual .draw { stroke-dasharray: 100; animation: step-draw 6s ease-out infinite; }
body.cp .steps-visual .flow path { stroke-dasharray: 4 5; animation: step-flow 1.2s linear infinite; }
@keyframes step-draw { 0% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes step-flow { to { stroke-dashoffset: -9; } }
@media (max-width: 860px) { body.cp .steps-visual li:not(:last-child)::after { display: none; } }
@media (prefers-reduced-motion: reduce) { body.cp .steps-visual .draw, body.cp .steps-visual .flow path { animation: none; stroke-dashoffset: 0; } body.cp .steps-visual li { transition: none; } }

/* ---------- Striscia «Il risultato» sotto i passi: tre esiti con icona e il pulsante per iniziare ---------- */
/* Slogan ripetuto sotto alcune sezioni della home */
body.cp .slogan-line { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; font-size: clamp(1.2rem, 2.6vw, 1.65rem); font-weight: 800; line-height: 1.3; color: var(--ink); }
body.cp .section-mint .slogan-line { border-top-color: rgba(11, 122, 133, .25); }
body.cp .steps-result { position: relative; margin-top: 40px; padding: 32px 32px 30px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
body.cp .steps-result::before { content: ""; position: absolute; top: -17px; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14m-6-6 6 6 6-6' fill='none' stroke='%230B7A85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
body.cp .steps-result-title { margin: 0 0 20px; text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--pin-dark); }
body.cp .steps-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 28px; align-items: start; }
body.cp .res-cta { align-self: center; }
body.cp .res { display: flex; gap: 14px; align-items: flex-start; }
body.cp .res-ic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
body.cp .res-ic svg { width: 24px; height: 24px; }
body.cp .res-call .res-ic { background: var(--coral-t); color: #E2552F; }
body.cp .res-visit .res-ic { background: var(--leaf-t); color: #1F8A5E; }
body.cp .res-web .res-ic { background: var(--tint); color: var(--pin-dark); }
body.cp .res h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink); }
body.cp .res p { margin: 0; font-size: .95rem; color: var(--ink-2); }
@media (max-width: 1000px) { body.cp .steps-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.cp .res-cta { grid-column: 1 / -1; text-align: center; } }
@media (max-width: 700px) { body.cp .steps-result { padding: 28px 20px 24px; } body.cp .steps-result-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Foto dei titolari a sinistra (metà pagina) e testo a destra, alla stessa altezza ---------- */
body.cp .hero-photo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
body.cp .hero-photo figure { height: 100%; min-height: 380px; }
body.cp .hero-photo img { height: 100%; min-height: 380px; object-position: 50% 30%; }
body.cp .hero-photo-text { display: flex; flex-direction: column; justify-content: center; }
body.cp .hero-photo-text h2 { margin: 0 0 14px; }
body.cp .hero-photo-text p { margin: 0 0 14px; }
body.cp .hero-photo-text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  body.cp .hero-photo-grid { grid-template-columns: 1fr; gap: 28px; }
  body.cp .hero-photo figure, body.cp .hero-photo img { height: auto; min-height: 0; }
  body.cp .hero-photo img { aspect-ratio: 3 / 2; height: auto; max-height: 360px; }
}

/* ---------- Fascia dei loghi: scorrono piano, in grigio; colore, e pausa, al passaggio del mouse ---------- */
body.cp .logo-strip { background: var(--white); padding: 30px 0 28px; border-bottom: 1px solid var(--line-2); }
body.cp .logo-strip-title { text-align: center; margin: 0 0 20px; color: var(--ink-2); font-weight: 500; font-size: 15.5px; }
body.cp .logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
body.cp .logo-track { display: flex; align-items: center; width: max-content; animation: logo-scroll 48s linear infinite; }
body.cp .logo-marquee:hover .logo-track { animation-play-state: paused; }
body.cp .logo-track img { height: 56px; width: auto; max-width: 160px; margin-right: 56px; object-fit: contain; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: opacity .2s, filter .2s; }
body.cp .logo-track img:hover { filter: none; opacity: 1; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  body.cp .logo-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 18px; padding: 0 16px; }
  body.cp .logo-track img { margin: 0 28px; }
  body.cp .logo-track img[aria-hidden] { display: none; }
}
@media (max-width: 640px) { body.cp .logo-track img { height: 46px; margin-right: 40px; } }

/* Ebook in fondo alla home */
body.cp #ebook { background: var(--peach); }

/* ---------- Piè di pagina chiaro ---------- */
body.cp .site-footer { background: #F1F4F6; color: var(--ink-2); }
body.cp .site-footer a { color: var(--ink); }
body.cp .site-footer a:hover { color: var(--pin-dark); }
body.cp .footer-grid h4 { color: var(--ink); font-weight: 600; }
body.cp .footer-grid .logo { color: var(--ink); }
body.cp .footer-grid .logo img { filter: none; }
body.cp .newsletter-form input[type=email], body.cp .newsletter-form input[type=text] { background: #fff; border-color: #C3CED6; color: var(--ink); }
body.cp .newsletter-form .check { color: var(--ink-2); }
body.cp .footer-bottom { border-top-color: var(--line); }

/* ---------- Parte alta della home: fascia scura con cruscotto di esempio animato (assets/js/home-hero.js) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body.cp .hh { --hh-ink: #12303A; --hh-muted: #6B7F86; --hh-t1: #0A6E79; --hh-t2: #07505A; --hh-t3: #052E36; --hh-cyan: #35C9D3; --hh-sun: #F6C61A; --hh-red: #D93A2B; --hh-red-dark: #B92D20; --hh-leaf: #2FA878; --hh-line: #DCE3E8; --hh-tint: #EAF3F4;
  position: relative; overflow: hidden; color: #fff; border: 0;
  background: radial-gradient(55% 75% at 80% 48%, rgba(53, 201, 211, .30), transparent 70%), linear-gradient(118deg, var(--hh-t1) 0%, var(--hh-t2) 46%, var(--hh-t3) 100%); }
body.cp .hh-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 76px; padding-bottom: 84px; }
body.cp .hh-tag { display: inline-block; padding: 9px 20px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .07); border-radius: 12px; font-size: .78rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: #CDEBEE; }
body.cp .hh h1 { margin: 26px 0 0; max-width: none; font-size: clamp(2rem, 3.7vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff; }
body.cp .hh .hh-s { display: block; text-wrap: balance; }
body.cp .hh .hh-s + .hh-s { margin-top: .22em; }
body.cp .hh .hh-hl { color: var(--hh-sun); }
body.cp .hh .hh-lead { margin: 26px 0 0; max-width: 33em; font-size: 1.15rem; line-height: 1.7; color: rgba(255, 255, 255, .78); }
body.cp .hh .hh-lead b { color: #fff; font-weight: 600; }

body.cp .hh-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
body.cp .hh a.hh-cta, body.cp .hh a.hh-cta:hover { display: flex; flex-direction: column; justify-content: center; min-width: 230px; padding: 16px 28px; border-radius: 14px; border: 1.5px solid transparent; color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s; }
body.cp .hh .hh-cta strong { font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: inherit; }
body.cp .hh .hh-cta span { font-size: .92rem; margin-top: 2px; }
body.cp .hh a.hh-cta-main { background: var(--hh-red); box-shadow: 0 10px 26px rgba(217, 58, 43, .35); }
body.cp .hh a.hh-cta-main span { color: rgba(255, 255, 255, .88); }
body.cp .hh a.hh-cta-main:hover { background: var(--hh-red-dark); }
body.cp .hh a.hh-cta-ghost { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .38); }
body.cp .hh a.hh-cta-ghost span { color: rgba(255, 255, 255, .76); }
body.cp .hh a.hh-cta-ghost:hover { background: rgba(255, 255, 255, .12); }
body.cp .hh a:focus-visible { outline: 3px solid var(--hh-sun); outline-offset: 3px; }

body.cp .hh-proof { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
body.cp .hh-chips { display: flex; }
body.cp .hh-chip { width: 64px; height: 38px; margin-left: -10px; background: #fff; border-radius: 12px; border: 2px solid var(--hh-t2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
body.cp .hh-chip:first-child { margin-left: 0; }
body.cp .hh-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.cp .hh-proof p { margin: 0; flex: 1 1 15em; max-width: 24em; font-size: .98rem; color: rgba(255, 255, 255, .78); line-height: 1.45; }
body.cp .hh-proof b { color: #fff; font-weight: 600; }

/* Finto cruscotto inclinato, con le schede che galleggiano */
body.cp .hh-stage { position: relative; padding: 44px 28px 62px 34px; }
body.cp .hh-board { position: relative; background: #fff; color: var(--hh-ink); border-radius: 22px; transform: rotate(-3deg); box-shadow: 0 46px 90px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .5); }
body.cp .hh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, var(--hh-t1), var(--hh-leaf) 62%, var(--hh-sun)); color: #fff; font-weight: 600; font-size: .92rem; }
body.cp .hh-badge { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
body.cp .hh-body { padding: 22px 26px 24px; }
body.cp .hh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
body.cp .hh-head h2 { margin: 0; font-size: .92rem; font-weight: 500; line-height: 1.4; color: var(--hh-muted); }
body.cp .hh-big { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
body.cp .hh-big strong { font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--hh-ink); font-variant-numeric: tabular-nums; }
body.cp .hh-up { padding: 3px 9px; border-radius: 8px; background: #E1F5EC; color: #1C7D58; font-size: .78rem; font-weight: 600; white-space: nowrap; animation: hh-rise .7s ease-out 1.6s both; }
body.cp .hh-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--hh-tint); font-size: .8rem; font-weight: 600; }
body.cp .hh-seg span { padding: 6px 13px; border-radius: 9px; color: var(--hh-muted); }
body.cp .hh-seg .on { background: var(--hh-t1); color: #fff; }
body.cp .hh-chart { display: block; width: 100%; height: auto; margin-top: 8px; }
body.cp .hh-chart text { font-family: inherit; font-size: 11px; fill: var(--hh-muted); }
body.cp .hh-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
body.cp .hh-kpi { padding: 12px 14px; border: 1px solid var(--hh-line); border-radius: 14px; background: #F7FAFB; animation: hh-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
body.cp .hh-kpi:nth-child(2) { animation-delay: .15s; }
body.cp .hh-kpi:nth-child(3) { animation-delay: .3s; }
body.cp .hh-kpi small { display: block; font-size: .74rem; font-weight: 500; line-height: 1.4; color: var(--hh-muted); }
body.cp .hh-kpi strong { font-size: 1.45rem; font-weight: 700; color: var(--hh-ink); font-variant-numeric: tabular-nums; }
body.cp .hh-kpi i { font-style: normal; font-size: .72rem; font-weight: 600; color: #1C7D58; margin-left: 4px; }

body.cp .hh-float { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; background: #fff; color: var(--hh-ink); border: 2px solid rgba(53, 201, 211, .7); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); transform: rotate(-3deg); animation: hh-bob 5.5s ease-in-out infinite, hh-fadein .8s ease-out both; }
body.cp .hh-ai { top: -22px; left: -8px; animation-delay: 0s, .2s; }
body.cp .hh-pos { right: 0; top: 47%; animation-duration: 6.4s, .8s; animation-delay: -1.8s, .9s; }
body.cp .hh-call { left: -18px; bottom: -2px; animation-duration: 5s, .8s; animation-delay: -3s, 1.4s; }
body.cp .hh-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--hh-tint); color: var(--hh-t1); flex: none; }
body.cp .hh-float small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--hh-t1); }
body.cp .hh-float strong { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.2; color: var(--hh-ink); }
body.cp .hh-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-left: 10px; }
body.cp .hh-bars i { width: 7px; border-radius: 3px; background: var(--hh-cyan); transform-origin: bottom; animation: hh-grow 1.5s ease-in-out infinite alternate; }
body.cp .hh-bars i:nth-child(2) { animation-delay: .2s; }
body.cp .hh-bars i:nth-child(3) { animation-delay: .4s; }
body.cp .hh-bars i:nth-child(4) { animation-delay: .6s; }
body.cp .hh-lines { display: grid; gap: 6px; margin-left: 14px; width: 64px; }
body.cp .hh-lines i { height: 7px; border-radius: 4px; background: var(--hh-cyan); transform-origin: left; animation: hh-slide 2.4s ease-in-out infinite alternate; }
body.cp .hh-lines i + i { width: 70%; background: #BDEBEF; animation-delay: .5s; }
body.cp .hh #hh-end { animation: hh-pop .45s cubic-bezier(.3, 1.6, .5, 1) 2s both; transform-box: fill-box; transform-origin: center; }
body.cp .hh .hh-ring { transform-box: fill-box; transform-origin: center; animation: hh-ring 2.2s ease-out 2.4s infinite; }

@keyframes hh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hh-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes hh-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes hh-bob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-9px); } }
@keyframes hh-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes hh-grow { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes hh-slide { from { transform: scaleX(.45); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  body.cp .hh-kpi, body.cp .hh-up, body.cp .hh-float, body.cp .hh #hh-end, body.cp .hh .hh-ring, body.cp .hh-bars i, body.cp .hh-lines i { animation: none !important; }
}
@media (max-width: 960px) {
  body.cp .hh-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 52px; padding-bottom: 60px; }
  body.cp .hh-stage { padding: 0; display: grid; gap: 14px; }
  body.cp .hh-board { transform: none; }
  body.cp .hh-float, body.cp .hh-ai, body.cp .hh-pos, body.cp .hh-call { position: static; transform: none; animation: hh-fadein .8s ease-out both; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
  body.cp .hh a.hh-cta { min-width: 0; flex: 1 1 220px; }
}
@media (max-width: 520px) {
  body.cp .hh-kpis { grid-template-columns: minmax(0, 1fr); }
  body.cp .hh-body { padding: 18px 16px 20px; }
}

/* ---------- Sezione «Assistenza»: consulente con le cuffie e conversazione di esempio ---------- */
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-800i-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body.cp .sup { --sup-ink: #12303A; --sup-ink-2: #4B5B63; --sup-muted: #6B7F86; --sup-t1: #0A6E79; --sup-cyan-t: #DDF3F5; --sup-line: #DCE3E8;
  position: relative; z-index: 0; overflow: hidden; padding: 88px 0 96px; background: #F7FAFB; border: 0; }
body.cp .sup::before, body.cp .sup::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px dashed #D3DEE3; pointer-events: none; }
body.cp .sup::before { width: 700px; height: 700px; right: -120px; top: -380px; }
body.cp .sup::after { width: 420px; height: 420px; right: 240px; bottom: -250px; }
body.cp .sup-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }

body.cp .sup-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: .85rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sup-t1); }
body.cp .sup-eyebrow::before { content: ""; width: 48px; height: 2px; background: var(--sup-t1); }
body.cp .sup h2 { margin: 0; max-width: none; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--sup-ink); text-wrap: balance; }
body.cp .sup h2 em { font-style: italic; color: var(--sup-t1); }
body.cp .sup .sup-lead { margin: 26px 0 0; max-width: 31em; font-size: 1.1rem; line-height: 1.75; color: var(--sup-ink-2); }
body.cp .sup-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
body.cp .sup-chips li { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 14px 26px; border: 1px solid var(--sup-line); border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -12px rgba(18, 48, 58, .25); font-size: 1.05rem; line-height: 1.4; color: var(--sup-ink); }
body.cp .sup-chips li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #B9D447; }
body.cp .sup a.sup-btn, body.cp .sup a.sup-btn:hover { display: inline-flex; align-items: center; gap: 22px; margin-top: 32px; padding: 12px 14px 12px 36px; border-radius: 999px; background: linear-gradient(90deg, var(--sup-t1), #1B4A7A); color: #fff; font-size: 1.15rem; font-weight: 700; text-decoration: none; box-shadow: 0 14px 28px -12px rgba(10, 110, 121, .6); transition: transform .2s; }
body.cp .sup a.sup-btn:hover { transform: translateY(-2px); }
body.cp .sup a.sup-btn i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
body.cp .sup a.sup-btn:focus-visible { outline: 3px solid #F6C61A; outline-offset: 3px; }

/* Conversazione di esempio. La foto è su fondo bianco: con «multiply» il bianco sparisce e la testa esce dal cerchio azzurro */
body.cp .sup-stage { position: relative; min-height: 500px; }
body.cp .sup-cut { position: absolute; right: 6px; top: 22px; width: 340px; height: 450px; }
body.cp .sup-cut::before { content: ""; position: absolute; left: 0; bottom: 0; width: 340px; height: 340px; border-radius: 50%; background: var(--sup-cyan-t); box-shadow: 0 0 0 14px rgba(53, 201, 211, .12); }
body.cp .sup-cut img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; mix-blend-mode: multiply; clip-path: inset(0 round 0 0 170px 170px); border-radius: 0; }
body.cp .sup-avatar { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -10px rgba(18, 48, 58, .35); color: #8CC4EC; }
body.cp .sup-bubble { position: absolute; margin: 0; padding: 22px 30px; border-radius: 22px; font-size: 1.12rem; line-height: 1.5; }
body.cp .sup-bubble time { display: block; margin-top: 10px; text-align: right; font-size: .85rem; font-weight: 600; }
body.cp .sup-user { left: 98px; top: 0; width: 290px; background: #fff; color: var(--sup-ink); box-shadow: 0 18px 40px -18px rgba(18, 48, 58, .35); border-top-left-radius: 8px; }
body.cp .sup-user time { color: var(--sup-ink-2); }
body.cp .sup-reply { left: 0; top: 214px; width: 330px; padding-right: 74px; background: linear-gradient(135deg, var(--sup-t1), #0B8A96); color: #fff; box-shadow: 0 22px 44px -16px rgba(10, 110, 121, .65); border-bottom-right-radius: 8px; }
body.cp .sup-reply time { color: rgba(255, 255, 255, .8); }
body.cp .sup-badge { position: absolute; right: -20px; bottom: -16px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--sup-t1), #0B8A96); color: #fff; box-shadow: 0 0 0 6px #F7FAFB, 0 12px 24px -8px rgba(10, 110, 121, .6); }
body.cp .sup-type { left: 0; top: 380px; display: flex; gap: 10px; align-items: center; padding: 20px 28px; background: #fff; box-shadow: 0 18px 40px -18px rgba(18, 48, 58, .3); }
body.cp .sup-type i { width: 12px; height: 12px; border-radius: 50%; background: #A9D3E6; animation: sup-dot 1.1s ease-in-out infinite; }
body.cp .sup-type i:nth-child(2) { animation-delay: .18s; }
body.cp .sup-type i:nth-child(3) { animation-delay: .36s; }
body.cp .sup-note { position: absolute; left: 0; top: 462px; margin: 0; font-size: .8rem; color: var(--sup-muted); }

/* La conversazione si scrive da sola: domanda, risposta, poi riparte */
body.cp .sup-user, body.cp .sup-avatar { animation: sup-user 14s ease-out infinite; }
body.cp .sup-reply { animation: sup-reply 14s cubic-bezier(.3, 1.3, .5, 1) infinite; transform-origin: left bottom; }
body.cp .sup-type { animation: sup-typing 14s ease-out infinite; }
@keyframes sup-user { 0% { opacity: 0; transform: translateY(16px); } 4%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sup-reply { 0%, 30% { opacity: 0; transform: translateY(10px) scale(.96); } 35%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sup-typing { 0%, 12% { opacity: 0; transform: translateY(10px); } 17%, 29% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; } }
@keyframes sup-dot { 0%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.cp .sup-user, body.cp .sup-avatar, body.cp .sup-reply, body.cp .sup-type, body.cp .sup-type i { animation: none !important; }
  body.cp .sup-type { opacity: 1; }
}
@media (max-width: 960px) {
  body.cp .sup { padding: 60px 0 68px; }
  body.cp .sup-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  body.cp .sup-stage { min-height: 0; display: grid; gap: 16px; }
  body.cp .sup-cut { position: relative; right: auto; top: auto; width: 280px; height: 370px; margin: 0 auto; }
  body.cp .sup-cut::before { width: 280px; height: 280px; }
  body.cp .sup-cut img { clip-path: inset(0 round 0 0 140px 140px); }
  body.cp .sup-avatar, body.cp .sup-bubble, body.cp .sup-note { position: static; }
  body.cp .sup-avatar { width: 56px; height: 56px; }
  body.cp .sup-user, body.cp .sup-reply { width: auto; max-width: 100%; }
  body.cp .sup-type { width: max-content; }
  body.cp .sup-badge { right: 10px; bottom: 10px; width: 44px; height: 44px; box-shadow: none; }
  body.cp .sup-user, body.cp .sup-avatar, body.cp .sup-reply, body.cp .sup-type { animation: none; }
  body.cp .sup-type { opacity: 1; }
}
@media (max-width: 520px) {
  body.cp .sup-chips li { padding: 11px 20px; font-size: 1rem; }
  body.cp .sup a.sup-btn { padding-left: 28px; }
}

/* ---------- «Cosa facciamo per farti trovare»: tre schede con blob scuro, foto tonda e mini schede che galleggiano ---------- */
body.cp .spr { --spr-cyan: #35C9D3; --spr-sun: #F6C61A; --spr-blob-a: #06323C; --spr-blob-b: #0B4D5C;
  position: relative; overflow: hidden; padding: 84px 0 92px; color: #fff; border: 0;
  background: radial-gradient(60% 50% at 82% 8%, rgba(53, 201, 211, .22), transparent 70%), linear-gradient(180deg, #08607A 0%, #0B7F98 100%); }
body.cp .spr-head { max-width: 46em; }
body.cp .spr h2 { margin: 0; max-width: none; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: #fff; }
body.cp .spr h2 em { font-style: italic; color: var(--spr-cyan); }
body.cp .spr-head p { margin: 18px 0 0; max-width: 38em; font-size: 1.15rem; line-height: 1.65; color: rgba(255, 255, 255, .8); }
body.cp .spr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
body.cp .spr-card { min-width: 0; }
body.cp .spr-art { position: relative; aspect-ratio: 360 / 400; }
body.cp .spr-blob { position: absolute; inset: 0; width: 100%; height: 100%; }
body.cp .spr .spr-blob { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .28)); }
body.cp .spr-art h3 { position: absolute; left: 8%; top: 20%; width: 46%; margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
body.cp .spr-line { position: absolute; left: 8%; top: 52%; width: 32%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--spr-cyan), var(--spr-sun)); }
body.cp .spr-photo { position: absolute; right: 5%; bottom: 21%; width: 47%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid rgba(255, 255, 255, .92); box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .55); background: #cfe3e7; }
body.cp .spr-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
body.cp .spr-mini { position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 12px; background: #fff; color: #12303A; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .45); animation: spr-bob 6s ease-in-out infinite; }
body.cp .spr-mini strong { display: block; font-size: .72rem; font-weight: 700; line-height: 1.25; color: #12303A; }
body.cp .spr-mini small { display: block; font-size: .62rem; line-height: 1.3; color: #5B6C74; }
body.cp .spr-mini-top { top: 7%; right: 3%; }
body.cp .spr-mini-low { left: 6%; bottom: 15%; flex-direction: column; align-items: flex-start; gap: 1px; width: 47%; animation-delay: -2.6s; }
body.cp .spr-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: #E1F1F3; color: #0A6E79; }
body.cp .spr-pill { position: absolute; left: 14%; right: 14%; bottom: 3%; padding: 10px 14px; border-radius: 12px; text-align: center; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .45); }
body.cp .spr-pill strong { display: block; font-size: .78rem; font-weight: 700; line-height: 1.25; }
body.cp .spr-pill small { display: block; font-size: .64rem; line-height: 1.3; }
body.cp .spr-pill-sun { background: #F6D86A; color: #3A3000; }
body.cp .spr-pill-orange { background: #F59A23; color: #fff; }
body.cp .spr-desc { margin: 20px auto 0; max-width: 24em; text-align: center; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
body.cp .spr-for { margin: 40px 0 0; text-align: center; font-size: 1rem; color: rgba(255, 255, 255, .8); }
body.cp .spr-for a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.cp .spr-for a:hover { color: var(--spr-sun); }
@keyframes spr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { body.cp .spr-mini { animation: none; } }
@media (max-width: 960px) {
  body.cp .spr { padding: 60px 0 68px; }
  body.cp .spr-cards { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin-left: auto; margin-right: auto; gap: 40px; }
}

/* ---------- Assistente di vendita: pulsante e finestra di chat (assets/js/sales-chat.js) ---------- */
body.cp .vc { position: fixed; right: 18px; bottom: 18px; z-index: 900; font-family: var(--font); }
body.cp .vc[hidden] { display: none; }
body.cp .vc-fab { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: 999px; background: #3FB1EA; color: #072B40; font: 700 .98rem/1 var(--font); cursor: pointer; box-shadow: 0 14px 30px -10px rgba(20, 110, 160, .6); transition: transform .2s, background-color .2s; }
body.cp .vc-fab:hover { background: #2AA0DC; transform: translateY(-2px); }
body.cp .vc-fab:focus-visible, body.cp .vc-close:focus-visible, body.cp .vc-send:focus-visible, body.cp .vc-chips button:focus-visible, body.cp .vc-chips a:focus-visible { outline: 3px solid #F6C61A; outline-offset: 2px; }
body.cp .vc-open .vc-fab { display: none; }
body.cp .vc-fab { position: relative; }
body.cp .vc-fab::after { content: ""; position: absolute; top: -4px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #F6C61A; border: 2px solid #fff; animation: vc-pulse 1.8s ease-out infinite; }
body.cp .vc-seen .vc-fab::after { display: none; }
@keyframes vc-pulse { 0% { box-shadow: 0 0 0 0 rgba(246, 198, 26, .8); } 70% { box-shadow: 0 0 0 12px rgba(246, 198, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 198, 26, 0); } }
body.cp .vc-panel { width: min(390px, calc(100vw - 24px)); height: min(580px, calc(100vh - 100px)); display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(7, 40, 50, .55), 0 0 0 1px rgba(7, 70, 80, .08); }
body.cp .vc-panel[hidden] { display: none; }
body.cp .vc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: linear-gradient(120deg, #0A6E79, #07505A); color: #fff; }
body.cp .vc-head strong { display: block; font-size: 1rem; line-height: 1.3; color: #fff; }
body.cp .vc-head small { display: block; font-size: .78rem; line-height: 1.3; color: rgba(255, 255, 255, .78); }
body.cp .vc-close { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
body.cp .vc-close:hover { background: rgba(255, 255, 255, .28); }
body.cp .vc-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #F7FAFB; }
body.cp .vc-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
body.cp .vc-msg p { margin: 0; }
body.cp .vc-msg p + p { margin-top: 8px; }
body.cp .vc-bot { align-self: flex-start; background: #fff; border: 1px solid #E1E8EB; border-bottom-left-radius: 6px; color: #12303A; }
body.cp .vc-bot a { color: #0A6E79; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.cp .vc-me { align-self: flex-end; background: #0A6E79; color: #fff; border-bottom-right-radius: 6px; }
body.cp .vc-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
body.cp .vc-typing i { width: 8px; height: 8px; border-radius: 50%; background: #A9C3CB; animation: vc-dot 1.1s ease-in-out infinite; }
body.cp .vc-typing i:nth-child(2) { animation-delay: .18s; }
body.cp .vc-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes vc-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
body.cp .vc-chips { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 16px 12px; background: #F7FAFB; overflow-x: auto; scrollbar-width: thin; }
body.cp .vc-chips[hidden] { display: none; }
body.cp .vc-chips button, body.cp .vc-chips a { flex: none; white-space: nowrap; padding: 8px 14px; border: 1px solid #0A6E79; border-radius: 999px; background: #fff; color: #0A6E79; font: 600 .85rem/1.2 var(--font); text-decoration: none; cursor: pointer; }
body.cp .vc-chips button:hover, body.cp .vc-chips a:hover { background: #0A6E79; color: #fff; }
body.cp .vc-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #E1E8EB; background: #fff; }
body.cp .vc-form input { flex: 1; min-width: 0; margin: 0; padding: 11px 14px; border: 1px solid #CFDADF; border-radius: 999px; font: .95rem/1.3 var(--font); color: #12303A; background: #fff; }
body.cp .vc-form input:focus { outline: 2px solid #0A6E79; outline-offset: 1px; border-color: #0A6E79; }
body.cp .vc-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #D93A2B; color: #fff; cursor: pointer; display: grid; place-items: center; }
body.cp .vc-send:hover { background: #B92D20; }
body.cp .vc-send:disabled, body.cp .vc-form input:disabled { opacity: .55; cursor: default; }
body.cp .vc-note { margin: 0; padding: 0 14px 10px; background: #fff; font-size: .72rem; line-height: 1.4; color: #6B7F86; }
body.cp .vc-note a { color: inherit; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { body.cp .vc-typing i, body.cp .vc-fab, body.cp .vc-fab::after { animation: none; transition: none; } }
@media (max-width: 520px) {
  body.cp .vc { right: 12px; bottom: 12px; }
  body.cp .vc-fab { padding: 13px 17px; }
  body.cp .vc-open.vc { right: 0; left: 0; bottom: 0; }
  body.cp .vc-open .vc-panel { width: 100%; height: 84vh; height: 84dvh; border-radius: 18px 18px 0 0; }
}

/* ---------- Domande frequenti della home ---------- */
body.cp .hfaq { padding: 88px 0 96px; background: #fff; border: 0; }
body.cp .hfaq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
body.cp .hfaq-intro { position: sticky; top: 110px; }
body.cp .hfaq-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: .85rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #0A6E79; }
body.cp .hfaq-eyebrow::before { content: ""; width: 40px; height: 2px; background: #0A6E79; }
body.cp .hfaq h2 { margin: 0; max-width: none; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
body.cp .hfaq-lead { margin: 20px 0 0; max-width: 28em; font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); }
body.cp a.hfaq-btn, body.cp a.hfaq-btn:hover { display: inline-flex; align-items: center; margin-top: 26px; padding: 14px 28px; border-radius: 999px; background: #D93A2B; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 12px 24px -12px rgba(217, 58, 43, .6); }
body.cp a.hfaq-btn:hover { background: #B92D20; }
body.cp .hfaq-item { border-bottom: 1px solid var(--line); }
body.cp .hfaq-item:first-child { border-top: 1px solid var(--line); }
body.cp .hfaq-item summary { position: relative; display: block; cursor: pointer; list-style: none; padding: 22px 52px 22px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
body.cp .hfaq-item summary::-webkit-details-marker { display: none; }
body.cp .hfaq-item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230A6E79' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s; }
body.cp .hfaq-item[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%230A6E79' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.cp .hfaq-item summary:hover { color: #0A6E79; }
body.cp .hfaq-item summary:focus-visible { outline: 3px solid #F6C61A; outline-offset: 2px; border-radius: 6px; }
body.cp .hfaq-a { padding: 0 52px 24px 0; }
body.cp .hfaq-a p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); }
body.cp .hfaq-a a { color: #0A6E79; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  body.cp .hfaq { padding: 60px 0 68px; }
  body.cp .hfaq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.cp .hfaq-intro { position: static; }
  body.cp .hfaq-item summary { padding-right: 46px; font-size: 1.05rem; }
  body.cp .hfaq-a { padding-right: 8px; }
}