/* ==================================================================
   Re-solve — personalizzazione brand SOPRA il template
   "Finance Business" (templatemo_545). Caricato per ultimo.
   Contiene SOLO: font self-hosted (CSP), logo, collegamento delle
   nostre immagini agli sfondi del template, e i componenti che il
   template non fornisce (form attivazione, area riservata/dashboard).
   Il verde brand (#a4c639) è già applicato dentro il CSS del template.
   ================================================================== */

/* ---- Font self-hosted (niente Google Fonts CDN: bloccato da CSP) ----
   Poppins reale per titoli/bottoni (pesi 600/700/800 disponibili);
   il testo corrente usa uno stack di sistema pulito. */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/poppins-800.woff2") format("woff2"); }

/* Override palette per le pagine dietro login che caricano anche styles.css
   (area riservata, studio, admin): i componenti dashboard usano queste
   variabili — le riportiamo al verde nativo del tema. Innocuo sulle altre
   pagine (variabili non referenziate). */
:root {
  --primary: #1e3a2f;       /* verde scuro: sfondi attivi, bordi timeline */
  --primary-strong: #142a21;
  --action: #4e7d12;        /* verde leggibile su bianco: numeri/accenti testo */
  --action-strong: #3d6210;
  --cyan: #a4c639;          /* lime nativo: step timeline corrente */
  --success: #a4c639;       /* lime nativo: step completato */
  --navy: #1e3a2f;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand h2, .filled-button, .border-button, .count-digit,
.Modern-Slider .item h6, .Modern-Slider .item h4,
.page-heading h1, .section-heading span {
  font-family: "Poppins", system-ui, sans-serif;
}

/* ---- Logo nella navbar (sostituisce l'h2 testuale del template) ---- */
.navbar .navbar-brand { display: flex; align-items: center; margin: 0; }
/* Su desktop la barra di navigazione usa tutta la larghezza: il logo resta nel
   normale flusso flex a sinistra e il menu (ml-auto) si allinea a destra, con
   padding ai bordi della pagina. Nessun posizionamento assoluto -> nessun rischio
   che il logo esca dal flusso o sparisca. */
@media (min-width: 993px) {
  header .navbar > .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }
}
.navbar .navbar-brand img { height: 52px; width: auto; display: block; transition: all .3s ease 0s; }
.background-header .navbar-brand img { height: 44px; }
@media (max-width: 992px) { .navbar .navbar-brand img { height: 42px; } }
/* Logo trasparente su fondo scuro (header non scrollato), logo standard su fondo chiaro (header scrollato) */
.navbar .navbar-brand .logo-scrolled { display: none; }
.background-header .navbar-brand .logo-default { display: none; }
.background-header .navbar-brand .logo-scrolled { display: block; }

/* CTA nella barra di navigazione */
.navbar .nav-item .nav-link.nav-cta {
  background-color: #a4c639; color: #fff !important; border-radius: 30px;
  padding: 8px 22px !important; font-weight: 700; margin-top: 0;
}
.navbar .nav-item .nav-link.nav-cta:hover { background-color: #8faf2f; border-bottom: 3px solid transparent !important; }

/* Titolo/occhiello del page-heading sempre bianchi: sulle pagine che
   caricano styles.css la regola element h1 lo forzerebbe scuro su sfondo scuro. */
.page-heading h1, .page-heading span { color: #fff !important; }

/* Titoli: vanno a capo (parole lunghe come "Sovraindebitamento" non devono
   essere tagliate dal body overflow-x:hidden del template) + riduzione su mobile. */
.page-heading h1, .section-heading h2, .fun-facts h2,
.more-info .right-content h2, .Modern-Slider .item h4, .Modern-Slider .item h6 {
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
@media (max-width: 600px) {
  .page-heading h1 { font-size: 27px; letter-spacing: 1px; }
  .page-heading { padding: 170px 0 80px; }
  .section-heading h2, .fun-facts h2, .more-info .right-content h2 { font-size: 26px; }
  .section-heading { margin-bottom: 50px; }
}

/* ---- Hero slider / fun-facts / page-heading ----
   Clone fedele del tema: usiamo le immagini NATIVE del template
   (slide_01..03.jpg, fun-facts-bg.jpg, page-heading-bg.jpg) già
   referenziate dal CSS del template. Nessun override qui. */

/* ---- Hero slide 1: due percorsi affiancati (privati | imprese) ----
   Il tema centra .text-content in assoluto: qui dentro le due colonne stanno in flex.
   Le due colonne usano la stessa scala tipografica del tema (h6/h4/p): nessun
   override di font-size, cosi' i due percorsi hanno lo stesso peso visivo. */
.Modern-Slider .hero-split { display: flex; gap: 46px; align-items: flex-start; }
.Modern-Slider .hero-split > .hero-col { flex: 1 1 0; min-width: 0; }
.Modern-Slider .hero-col-b { border-left: 3px solid #a4c639; padding-left: 30px; }
@media (max-width: 991px) {
  /* Sotto i 992px lo spazio non regge due colonne: si impilano, imprese sotto. */
  .Modern-Slider .hero-split { display: block; }
  .Modern-Slider .hero-col-b { margin-top: 26px; padding-top: 6px; padding-left: 20px; }
}

/* ---- Card servizi: altezze uniformi nella griglia Bootstrap ---- */
.services .service-item { height: 100%; display: flex; flex-direction: column; }
.services .service-item .down-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.services .service-item .down-content p { margin-bottom: 20px; }
.services .service-item img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---- Hero: foto e logo opzionali nel more-info ---- */
.hero-photo { width: 100%; height: auto; border-radius: 8px; }
.hero-logo { width: min(280px, 80%); height: auto; display: block; margin-bottom: 22px; }

/* ---- Lista "checklist" verde riutilizzabile ---- */
.brand-checklist { list-style: none; padding: 0; margin: 22px 0; }
.brand-checklist li { position: relative; padding-left: 32px; margin-bottom: 12px; color: #444; line-height: 1.6; }
.brand-checklist li::before {
  content: "\f058"; font-family: "FontAwesome"; position: absolute; left: 0; top: 1px;
  color: #a4c639; font-size: 18px;
}

/* ---- Bottoni generici (.button) usati da cookie banner e aree riservate.
        Coerenti con i bottoni del template. ---- */
.button {
  display: inline-block; cursor: pointer; border: none;
  background-color: #a4c639; color: #fff;
  font-size: 14px; font-weight: 700; text-transform: none;
  padding: 12px 26px; border-radius: 30px; transition: all .3s;
  text-decoration: none; line-height: 1.2;
}
.button:hover { background-color: #8faf2f; color: #fff; }
.button.primary { background-color: #a4c639; color: #fff; }
.button.primary:hover { background-color: #8faf2f; }
.button.secondary { background-color: #fff; color: #a4c639; border: 2px solid #a4c639; }
.button.secondary:hover { background-color: #a4c639; color: #fff; }
.button.success { background-color: #a4c639; color: #fff; }
.button.small { padding: 8px 18px; font-size: 13px; }

/* ==================================================================
   Pagine interne (page-heading) + contenuti legali
   ================================================================== */
.inner-section { padding: 90px 0; }
.inner-section.tight { padding: 60px 0; }

.legal-page { padding: 80px 0 100px; }
.legal-content { max-width: 880px; margin: 0 auto; }
.legal-content h2 {
  font-size: 22px; font-weight: 700; color: #1e1e1e;
  margin: 38px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: #555; line-height: 1.8; margin-bottom: 14px; }
.legal-content ul { margin: 0 0 18px; padding-left: 4px; }
.legal-content li { position: relative; padding-left: 26px; margin-bottom: 10px; color: #555; line-height: 1.7; }
.legal-content li::before {
  content: "\f0da"; font-family: "FontAwesome"; position: absolute; left: 2px; top: 2px; color: #a4c639;
}
.legal-content a { color: #a4c639; font-weight: 600; }
.legal-content code { background: #f1f1f1; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.legal-note {
  margin-top: 30px; padding: 16px 18px; background: #f7f7f7;
  border-left: 4px solid #a4c639; font-size: 13px; color: #666 !important; font-style: italic;
}

/* Generiche per layout sezioni "feature/benefit" usate in Sovraindebitamento */
.feature-grid, .benefit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 30px;
}
.feature-card, .benefit-tile {
  background: #f7f7f7; padding: 30px; border-radius: 6px; transition: all .3s;
}
.feature-card:hover, .benefit-tile:hover { box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.feature-card h3, .benefit-tile h3 { font-size: 18px; font-weight: 700; color: #1e1e1e; margin-bottom: 12px; }
.feature-card p, .benefit-tile p { color: #666; line-height: 1.7; }
.feature-card .card-index { display:inline-block; font-size: 14px; font-weight:700; color:#a4c639; margin-bottom:8px; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.section-grid h2 { font-size: 28px; font-weight: 600; color:#1e1e1e; margin-bottom: 16px; }
.section-grid p { color:#666; line-height:1.8; }
.check-list { list-style: none; padding: 0; margin: 16px 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; color:#555; }
.check-list li::before { content:"\f00c"; font-family:"FontAwesome"; position:absolute; left:0; color:#a4c639; }
@media (max-width: 768px) { .section-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   Form (attivazione, sovraindebitamento) — stessi name/id, look del tema
   ================================================================== */
.analysis-form, .inline-form, .agreement-grid { max-width: 920px; margin: 0 auto; }
.analysis-form fieldset {
  border: 1px solid #eee; border-radius: 8px; padding: 26px 26px 10px; margin-bottom: 26px;
}
.analysis-form legend {
  width: auto; padding: 0 12px; font-size: 16px; font-weight: 700; color: #1e1e1e;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
@media (max-width: 768px) { .field-grid { grid-template-columns: 1fr; } }
.analysis-form label, .inline-form label {
  display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 16px;
}
.analysis-form .wide-label { grid-column: 1 / -1; }
/* Etichetta secondaria per i campi facoltativi: il form non deve sembrare piu' lungo di quanto e'. */
.analysis-form .field-optional { font-weight: 400; color: #777; }
.analysis-form input:not([type=checkbox]), .analysis-form select, .analysis-form textarea,
.inline-form input, .inline-form select, .inline-form textarea {
  display: block; width: 100%; margin-top: 7px;
  border: 1px solid #ddd; border-radius: 22px; padding: 11px 16px;
  font-size: 14px; color: #444; background: #fff; font-weight: 400;
}
.analysis-form textarea, .inline-form textarea { border-radius: 14px; }
.analysis-form input:focus, .analysis-form select:focus, .analysis-form textarea:focus,
.inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus {
  outline: none; border-color: #a4c639; box-shadow: 0 0 0 3px rgba(164,198,57,.18);
}
.consent-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.consent-row input { width: auto !important; margin-top: 3px !important; flex: 0 0 auto; }
.consent-row a { color: #a4c639; font-weight: 600; }
.payment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 6px 0 22px; align-items: stretch; }
.payment-card { display: flex; gap: 14px; background: #f7f9f3; border: 1px solid #e6ebdc; border-radius: 12px; padding: 20px; }
.payment-card--fee { background: #fff; border-color: #d8e2c4; box-shadow: 0 2px 10px rgba(78,125,18,0.08); }
.payment-card-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eaf1dc; color: var(--action); }
.payment-card--fee .payment-card-icon { background: var(--action); color: #fff; }
.payment-card-icon svg { width: 22px; height: 22px; }
.payment-card-body { display: flex; flex-direction: column; }
.payment-card strong { display: block; color: #1e1e1e; margin-bottom: 6px; font-size: 15px; }
.payment-card span { font-size: 13px; color: #666; line-height: 1.5; }
@media (max-width: 768px) { .payment-row { grid-template-columns: 1fr; } }
.payment-methods { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee; }
.payment-methods-label { font-size: 12px; color: #777; }
.payment-methods-logos { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.payment-methods .card-logo { height: 24px; width: auto; display: block; }
.form-actions { text-align: center; margin-top: 10px; }
.form-actions .button { min-width: 240px; }
.provider-status, #form-feedback, #activation-feedback, #profile-feedback, #agreement-feedback, #otp-feedback {
  margin-top: 14px; font-size: 14px; color: #666;
}
#form-feedback.error, .provider-status.error { color: #c0392b; }
#form-feedback.ok, .provider-status.ok { color: #1f8a4c; }

/* ==================================================================
   Fix layout aree dashboard (caricano anche styles.css).
   styles.css usa griglie a colonne fisse (.reserved-layout 220px 1fr,
   .inline-form 4 colonne) che si rompono quando la nav del gate è
   nascosta e non sono pienamente responsive. Qui (caricato per ultimo)
   le rendiamo flessibili e fluide a ogni larghezza.
   ================================================================== */
.reserved-shell { width: 100%; }

/* Layout area riservata: flex invece di grid → quando app.js nasconde la
   .reserved-nav (login gate) il contenuto prende l'intera larghezza. */
.reserved-layout {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
}
.reserved-layout > .reserved-nav { flex: 0 0 220px; }
.reserved-layout > .reserved-content { flex: 1 1 320px; min-width: 0; width: auto; }

/* Form e griglie dashboard: auto-fit fluido (niente 4 colonne fisse). */
.inline-form, .agreement-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.agreement-result { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* La barra delle tab: scroll orizzontale quando manca spazio. */
@media (max-width: 920px) {
  .reserved-layout > .reserved-nav { flex-basis: 100%; }
  .reserved-nav { display: flex; flex-wrap: wrap; overflow-x: auto; }
  .reserved-top { display: block; }
  .reserved-top .security-panel { margin-top: 18px; }
}

/* ---- Cookie banner (iniettato da cookie-consent.js) ---- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999999;
  max-width: 880px; margin: 0 auto; background: #fff; color: #1e1e1e;
  border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.22);
  border-top: 4px solid #a4c639;
}
.cookie-banner-body { padding: 22px 26px; }
.cookie-banner-body p { color: #555; font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.cookie-banner-body a { color: #a4c639; font-weight: 600; }
.cookie-options { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 16px; }
.cookie-options label { font-size: 14px; color: #333; display: inline-flex; align-items: center; gap: 8px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Form ramificato per prodotto (analisi.html) */
.branch-fields { margin-top: 18px; }
.branch-fields[hidden] { display: none; }
.check-group { margin: 16px 0; }
.check-group-label { display: block; font-weight: 600; color: #333; margin: 16px 0 8px; }
.repeater { margin: 18px 0; padding: 0; }
.repeater-row { border: 1px solid #e2e2e2; border-radius: 8px; padding: 16px; margin-bottom: 12px; background: #fafafa; }
.repeater .button.ghost { font-size: 14px; }

/* ---- Pagina Servizi: blocco con immagine affiancata (zig-zag) ---- */
.service-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.service-row.reverse { grid-template-columns: 1.1fr 0.9fr; }  /* immagine resta la colonna più stretta anche a destra */
.service-row.reverse .service-photo { order: 2; }
.service-photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.10); display: block;
}
@media (max-width: 992px) {
  .service-row,
  .service-row.reverse { grid-template-columns: 1fr; gap: 28px; }  /* anche .reverse: vince sulla specificità di .service-row.reverse */
  .service-row.reverse .service-photo { order: 0; }   /* su mobile immagine sempre in alto */
}

/* Fasce alternate chiaro/scuro per separare i servizi */
.service-band            { padding: 80px 0; }
.service-band.light      { background: #f3f6ec; }
.service-band.dark       { background: #1e3a2f; }

/* Testo leggibile sulle fasce scure */
.service-band.dark .section-heading h2,
.service-band.dark .section-grid h3      { color: #fff !important; } /* annulla inline #1e1e1e su h3 */
.service-band.dark .section-heading span,
.service-band.dark .check-list li        { color: rgba(255,255,255,.82); }
.service-band.dark .eyebrow              { color: #a4c639; }
.service-band.dark .check-list li::before{ color: #a4c639; }

/* Immagine: ombra/bordo più visibili sul fondo scuro */
.service-band.dark .service-photo img {
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* Upload documenti per voce */
.doc-group { margin: 16px 0; }
.doc-voce { border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fafafa; }
.doc-voce-head, .doc-voce { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.doc-voce-label { font-weight: 600; color: #333; flex: 1 1 240px; }
.doc-upload-btn { cursor: pointer; }
.doc-upload-btn .button.ghost { font-size: 14px; }
.doc-files { list-style: none; padding: 0; margin: 6px 0 0; flex: 1 1 100%; }
.doc-notes { flex: 1 1 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid #e2e2e2; border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
/* Nota diventata obbligatoria (la voce ha file caricati): evidenza visiva coerente col brand. */
.doc-notes-required { border-color: #a4c639; background: #f8fbef; }
/* Blocco documento d'identità nei Dati personali (slot obbligatorio, senza nota). */
.identity-doc-group .doc-voce { border-color: #a4c639; }
.doc-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 10px; background: #fff; border: 1px solid #eee; border-radius: 6px; margin-top: 6px; }
.doc-file-error { color: #b00020; background: #fff5f5; border-color: #f3d0d0; }
.doc-file-remove { border: none; background: transparent; color: #b00020; cursor: pointer; font-size: 13px; }

/* ---- Modalità embed (form analisi dentro un iframe della dashboard partner) ----
   Nasconde il chrome del sito e compatta i margini: nell'iframe resta solo il form.
   Attivata da analisi.html?per=cliente&embed=1 (classe su <html>). */
.embed-mode .sub-header,
.embed-mode header,
.embed-mode .page-heading,
.embed-mode footer,
.embed-mode .sub-footer,
.embed-mode #preloader { display: none !important; }
.embed-mode .inner-section { padding-top: 18px; }
.embed-mode body { background: #fff; }

/* ==================================================================
   Pagina "Come funziona" — rifinitura visiva.
   Tutto sotto .page-come-funziona: nessun impatto sulle altre pagine.
   ================================================================== */
/* Ritmo verticale: il tema usa margin-top:140px, qui più contenuto */
.page-come-funziona .cf-narrative { margin-top: 60px; }
.page-come-funziona .cf-steps     { margin-top: 90px; }

/* Immagini: angoli arrotondati + ombra morbida (look "Trust & Authority").
   height:auto e' necessario: il tema imposta solo width:100%, quindi l'attributo
   height dell'<img> resterebbe attivo e deformerebbe le immagini verticali. */
.page-come-funziona .more-info .left-image img {
  border-radius: 14px;
  box-shadow: 0 22px 55px -22px rgba(15, 23, 60, .45);
  display: block;
  height: auto;
}
.page-come-funziona .more-info .left-image a { display: block; }

/* Blocco narrativo: immagine sticky così resta visibile accanto al testo lungo */
@media (min-width: 768px) {
  .page-come-funziona .cf-narrative .left-image { position: sticky; top: 110px; }
  /* L'infografica e' verticale (2:3): limitata all'altezza del viewport resta
     intera sotto gli occhi mentre il testo scorre, invece di sforare in basso. */
  .page-come-funziona .cf-narrative .left-image img {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    margin: 0 auto;
  }
}

/* Eyebrow in verde brand per un tocco di colore coerente */
.page-come-funziona .more-info .right-content span { color: #7a932b; font-weight: 700; }

/* Leggibilità del testo lungo del blocco narrativo */
.page-come-funziona .cf-narrative .right-content p { color: #555; line-height: 1.8; margin-bottom: 20px; }
.page-come-funziona .cf-narrative .right-content p.cf-lead { font-size: 19px; line-height: 1.7; color: #1e1e1e; }

/* Frase di sintesi finale come callout con accento verde */
.page-come-funziona .cf-callout {
  margin-top: 6px; padding: 18px 22px;
  background: #f3f6ec; border-left: 4px solid #a4c639;
  border-radius: 0 10px 10px 0; color: #2f3a25;
}
.page-come-funziona .cf-callout strong { color: #1e1e1e; }

/* CTA finale: banda tenue brandizzata per chiudere la pagina */
.page-come-funziona .cf-cta { background: linear-gradient(180deg, #f7faef 0%, #eef4dd 100%); }

/* ==================================================================
   Onboarding partner — card piani (pricing).
   In foglio ESTERNO perché la CSP (style-src 'self') blocca gli <style> inline.
   ================================================================== */
#plans-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

/* Scoped con l'ID del container per vincere su .analysis-form label (specificità maggiore). */
#plans-container .plan-card {
  position: relative; display: flex; flex-direction: column; margin: 0;
  border: 2px solid #e3e7ec; border-radius: 14px; background: #fff; overflow: hidden;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(20, 40, 20, .12); }
.plan-card:focus-within { box-shadow: 0 0 0 .2rem rgba(164, 198, 57, .35); }
.plan-card input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.plan-card.is-selected { border-color: #a4c639; box-shadow: 0 .5rem 1.25rem rgba(143, 175, 47, .22); }
.plan-card.is-selected::after {
  content: "\f00c"; font-family: "FontAwesome";
  position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: #a4c639; color: #143a1f; display: flex; align-items: center; justify-content: center; font-size: .8rem;
}

.plan-card .plan-head { padding: 18px 18px 12px; border-bottom: 1px solid #eef1f4; }
.plan-card .plan-name { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: #1e3a2f; margin: 0; }
.plan-card .plan-price { margin-top: 6px; font-weight: 800; font-size: 1.7rem; color: #1e3a2f; line-height: 1; }
.plan-card .plan-price small { font-size: .85rem; font-weight: 600; color: #6b7280; }
.plan-card.plan-recommended .plan-head { background: #f1f7e6; border-bottom-color: #dce8c2; }
.plan-card.plan-free .plan-head { background: #f6f7f9; }
.plan-card.plan-free .plan-name, .plan-card.plan-free .plan-price { color: #5a6573; }

.plan-card .plan-badge {
  position: absolute; top: 0; left: 0; background: #a4c639; color: #143a1f;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-bottom-right-radius: 10px; z-index: 1;
}

.plan-card .plan-features { list-style: none; margin: 0; padding: 14px 18px 18px; display: grid; gap: 9px; flex: 1 1 auto; }
.plan-card .plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: #3a4250; line-height: 1.4; }
.plan-card .plan-features li i { color: #1f8a4c; margin-top: 2px; flex: 0 0 auto; }

.check-inline { display: block; margin: 8px 0; }
.check-inline input { margin-right: 8px; }

/* Selettori di ruolo (partner vs studio): card semplici selezionabili. */
.analysis-form .role-card {
  position: relative; display: block; margin: 0; padding: 18px 18px 16px 46px;
  border: 2px solid #e3e7ec; border-radius: 14px; background: #fff; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.analysis-form .role-card:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.2rem rgba(20, 40, 20, .1); }
.analysis-form .role-card:focus-within { box-shadow: 0 0 0 .2rem rgba(164, 198, 57, .35); }
.analysis-form .role-card input[type=radio] { position: absolute; top: 20px; left: 18px; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.analysis-form .role-card .role-icon { position: absolute; top: 18px; right: 18px; font-size: 1.4rem; color: #a4c639; }
.analysis-form .role-card strong { display: block; font-size: 1.05rem; color: #1e3a2f; }
.analysis-form .role-card span { display: block; margin-top: 4px; color: #5a6573; font-size: .92rem; line-height: 1.45; }
.analysis-form .role-card:has(input:checked) { border-color: #a4c639; background: #fbfdf4; box-shadow: 0 .5rem 1.25rem rgba(143, 175, 47, .18); }

@media (prefers-reduced-motion: reduce) {
  #plans-container .plan-card, .analysis-form .role-card { transition: none; }
  #plans-container .plan-card:hover, .analysis-form .role-card:hover { transform: none; }
}

/* ==================================================================
   Pagina "Chi siamo" — infografiche a supporto del testo.
   Tutto scoped sotto .page-chi-siamo: nessun impatto su altre pagine.
   CSS in foglio esterno perché la CSP (style-src 'self') blocca gli
   <style>/style="" inline. Icone: Font Awesome già caricato.
   ================================================================== */

/* --- Griglia di tile con icona (feature tecnologiche / servizi) --- */
.page-chi-siamo .icon-grid {
  list-style: none; padding: 0; margin: 26px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
}
.page-chi-siamo .icon-grid li {
  background: #f7f7f7; border-radius: 10px; padding: 22px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: box-shadow .25s ease, transform .25s ease;
}
.page-chi-siamo .icon-grid li:hover { box-shadow: 0 14px 30px rgba(0,0,0,.07); transform: translateY(-2px); }
.page-chi-siamo .icon-grid li i { flex: 0 0 auto; width: 26px; margin-top: 2px; text-align: center; color: #a4c639; font-size: 22px; line-height: 1; }
.page-chi-siamo .icon-grid li span { color: #444; line-height: 1.55; font-size: 14px; }

/* --- Lista a icone (colonne "Perché sceglierci" / "Mission") --- */
.page-chi-siamo .icon-list { list-style: none; padding: 0; margin: 22px 0; }
.page-chi-siamo .icon-list li {
  display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid #f0f0f0;
}
.page-chi-siamo .icon-list li:last-child { border-bottom: none; }
.page-chi-siamo .icon-list li i {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: #f3f6ec; color: #7a932b; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.page-chi-siamo .icon-list li span { color: #444; line-height: 1.5; font-size: 14px; }

/* --- Diagramma ecosistema societario (catena di nodi collegati) --- */
.page-chi-siamo .eco-chain {
  margin: 30px 0 6px; display: flex; flex-wrap: nowrap; align-items: stretch;
}
.page-chi-siamo .eco-node {
  flex: 1 1 0; min-width: 0; background: #fff; border: 2px solid #e3e7ec; border-radius: 12px;
  padding: 22px 14px; text-align: center;
}
.page-chi-siamo .eco-node.is-self { border-color: #a4c639; background: #fbfdf4; }
.page-chi-siamo .eco-node i { display: block; margin-bottom: 10px; color: #a4c639; font-size: 26px; }
.page-chi-siamo .eco-node strong { display: block; color: #1e3a2f; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
/* .right-content nel selettore: batte la regola del template
   .more-info .right-content span (uppercase/#666/block) che colpisce ogni span. */
.page-chi-siamo .right-content .eco-node span { display: block; margin-top: 6px; margin-bottom: 0; color: #777; font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: normal; }
.page-chi-siamo .right-content .eco-arrow { flex: 0 0 auto; align-self: center; color: #a4c639; font-size: 18px; padding: 0 8px; margin-bottom: 0; text-transform: none; letter-spacing: normal; }
@media (max-width: 767px) {
  .page-chi-siamo .eco-chain { flex-direction: column; }
  .page-chi-siamo .right-content .eco-arrow { transform: rotate(90deg); padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-chi-siamo .icon-grid li { transition: none; }
  .page-chi-siamo .icon-grid li:hover { transform: none; }
}

/* TikTok inline SVG: allinea come le icon-font (FA4 non ha glyph tiktok) */
footer ul.social-icons li a .social-svg { vertical-align: middle; margin-top: -3px; }

/* Disclaimer testimonianze: risultati non garantiti */
.testimonials-disclaimer {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #8a8a8a;
  font-style: italic;
}

/* ==================================================================
   S.O.S Urgenza Debiti (sos-urgenza-debiti.html)
   ================================================================== */
/* Link rosso in navbar: richiamo d'urgenza, stessa forma del .nav-cta */
.navbar .nav-item .nav-link.nav-sos {
  background-color: #d32f2f; color: #fff !important; border-radius: 30px;
  padding: 8px 18px !important; font-weight: 700; margin-top: 0; margin-right: 8px;
}
.navbar .nav-item .nav-link.nav-sos:hover { background-color: #b71c1c; border-bottom: 3px solid transparent !important; }

/* Banda CTA S.O.S in home: variante rossa della .request-form (verde) per dare urgenza */
.request-form.sos-cta-band { background-color: #d32f2f; }

.sos-intro-heading { margin-bottom: 34px; }
.sos-attiva-heading { margin: 50px 0 18px; }

/* Box di allerta situazioni */
.sos-alert {
  border: 1px solid #f3c9c6; border-left: 5px solid #d32f2f; background: #fdf3f2;
  border-radius: 10px; padding: 22px 26px; margin-bottom: 26px;
}
.sos-alert-title { font-weight: 700; color: #1e1e1e; margin: 0 0 12px; }
.sos-alert ul { list-style: none; padding: 0; margin: 0 0 14px; }
.sos-alert li { padding: 7px 0; color: #444; line-height: 1.55; border-bottom: 1px solid #f3dedc; }
.sos-alert li:last-child { border-bottom: none; }
.sos-alert-foot { margin: 6px 0 0; color: #555; line-height: 1.6; }

/* Avviso numero verde in attivazione */
.sos-greenline {
  display: flex; gap: 18px; align-items: flex-start;
  background: #f3f8e9; border: 1px solid #d9e7b6; border-radius: 10px;
  padding: 20px 24px; margin-bottom: 10px;
}
.sos-greenline-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: #a4c639; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.sos-greenline strong { display: block; color: #1e3a2f; margin-bottom: 4px; }
.sos-greenline-number { color: #3d6210; font-weight: 800; white-space: nowrap; text-decoration: none; }
.sos-greenline-number:hover { text-decoration: underline; }
.sos-greenline p { margin: 0; color: #4a5a45; line-height: 1.6; font-size: 14px; }

.sos-checklist { margin-top: 6px; }

/* Form S.O.S: campi opzionali e microcopy */
.sos-form .opt { font-weight: 400; color: #999; font-size: 12px; }
.sos-submit { background-color: #d32f2f; }
.sos-submit:hover { background-color: #b71c1c; }
.sos-microcopy { margin-top: 16px; font-size: 13px; color: #777; }

/* Conferma invio */
.sos-success {
  border: 1px solid #cfe8d6; background: #f1faf3; border-radius: 10px;
  padding: 26px 28px; text-align: center; margin-top: 10px;
}
.sos-success h3 { color: #1f8a4c; margin: 0 0 10px; }
.sos-success p { margin: 0; color: #3c5a44; line-height: 1.6; }
.sos-success a { color: #1f8a4c; font-weight: 600; }

/* Blocco finale ad alta conversione */
.sos-final {
  background: #1e3a2f; color: #fff; border-radius: 12px;
  padding: 34px 32px; text-align: center; margin-top: 44px;
}
.sos-final h3 { color: #fff; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1px; }
.sos-final p { margin: 0 0 8px; color: #e8efe9; line-height: 1.6; }
.sos-final strong { color: #c4e06a; }

@media (max-width: 600px) {
  .sos-greenline { flex-direction: column; gap: 12px; }
  .sos-final { padding: 26px 22px; }
}

/* ---- Footer più compatto: "Link utili" su due colonne ---- */
footer { padding: 60px 0; }
footer h4 { margin-bottom: 22px; }
@media (min-width: 768px) {
  footer .footer-item.last-item { flex: 0 0 50%; max-width: 50%; }
  footer .last-item ul.menu-list {
    columns: 2; column-gap: 40px;
  }
  footer .last-item ul.menu-list li { break-inside: avoid; }
}

/* ---- FAQ: più respiro tra heading, lista e footer ---- */
#faq { padding-bottom: 90px; }
#faq .section-heading { margin-bottom: 50px; }
#faq .faq-list li { margin-bottom: 22px; line-height: 1.7; }