/* ==========================================================================
   Presidio Impresa — Design system
   Palette navy + teal/petrolio, sobria e istituzionale.
   Tipografia: Source Serif 4 (display) + Montserrat (UI/testo).
   ========================================================================== */

:root {
  /* Colori */
  --navy:          #0a2538;  /* primario: header, hero, footer */
  --navy-light:    #163b54;  /* hover / superfici scure secondarie */
  --navy-deep:     #061824;  /* gradienti profondi */
  --teal:          #1f7a78;  /* accento: "IMPRESA", link, dettagli */
  --teal-light:    #2a9794;  /* hover accento */
  --teal-pale:     #e7f1f0;  /* sfondi tenui accento */

  --ink:           #1a2128;  /* testo principale su chiaro */
  --muted:         #5a6b78;  /* testo secondario */
  --muted-light:   #8493a0;  /* testo terziario */
  --line:          #e0e4e8;  /* bordi */
  --line-soft:     #eef1f4;

  --bg:            #ffffff;
  --bg-alt:        #f6f8f9;  /* sezioni alternate, grigio caldo/freddo tenue */
  --bg-navy-soft:  #0e2c42;

  --white:         #ffffff;
  --white-dim:     rgba(255,255,255,0.78);
  --white-faint:   rgba(255,255,255,0.55);

  /* Tipografia */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Misure */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --radius: 3px;
  --gutter: 24px;
}

/* Reset ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-light); }

/* Tipografia ------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--navy); line-height: 1.18; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal);
  margin: 0 0 1rem;
}
.eyebrow.on-dark { color: var(--white-faint); }

.lead { font-size: 1.18rem; color: var(--muted); line-height: 1.7; }

/* Layout ----------------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: var(--maxw-narrow); }
section { padding: 88px 0; }
section.tight { padding: 64px 0; }
.bg-alt { background: var(--bg-alt); }
.bg-navy { background: var(--navy); color: var(--white-dim); }
.bg-navy h2, .bg-navy h3 { color: var(--white); }

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.bg-navy .section-head p { color: var(--white-dim); }

/* Bottoni ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all 0.18s ease;
  text-decoration: none;
}
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-light); border-color: var(--teal-light); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--white); color: var(--white); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.site-header .logo img { height: 44px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 500;
  color: var(--ink); letter-spacing: 0.01em;
}
.nav a:hover { color: var(--teal); }
.nav .btn { padding: 0.6em 1.2em; font-size: 0.85rem; color: var(--white); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: 0.2s; }

/* Nav dropdown ("La rete") ---------------------------------------------- */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 500;
  color: var(--ink); letter-spacing: 0.01em;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-dropdown-toggle:hover { color: var(--teal); }
.nav-dropdown-toggle .caret { font-size: 0.7em; transition: transform 0.18s ease; }
.nav-dropdown:hover .nav-dropdown-toggle .caret,
.nav-dropdown:focus-within .nav-dropdown-toggle .caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 210px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 36px -20px rgba(10,37,56,0.5);
  padding: 8px 0; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 60;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown-menu a {
  display: block; padding: 9px 20px; font-family: var(--sans); font-size: 0.88rem;
  font-weight: 500; color: var(--ink); white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--teal); }
@media (max-width: 820px) {
  .nav-dropdown { display: block; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line-soft); }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; display: none;
    border: 0; box-shadow: none; border-radius: 0; padding: 0; min-width: 0; background: var(--bg-alt);
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { padding: 12px 24px 12px 38px; border-bottom: 1px solid var(--line-soft); }
}
/* Stato aperto via tap/click (gestito da assets/review.js) */
.nav-dropdown.open > .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown.open .nav-dropdown-toggle .caret { transform: rotate(180deg); }
@media (max-width: 820px) {
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
}

/* Hero: la banda scura di apertura ---------------------------------------
   Una sola banda, per la homepage (.hero) e per le pagine interne
   (.page-hero). Fino al 2026-08-26 erano due regole separate, in due punti
   diversi del file, che divergevano su gradiente, padding e misura del
   titolo senza una ragione di gerarchia: il residuo di due interventi fatti
   in momenti diversi. E si vedeva — i titoli delle pagine interne andavano a
   capo prima e riempivano meno la banda.

   Resta legittimamente diverso solo il sommario: sulla home e' piu' grande e
   ha margine sotto per fare spazio ai bottoni, che le pagine interne non
   hanno. Se ti serve una banda diversa per un caso nuovo, aggiungi una
   variante con una classe sua: non far ridivergere queste due. */
.hero,
.page-hero {
  background:
    radial-gradient(900px 500px at 80% -10%, var(--bg-navy-soft) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding: 80px 0 88px;
}
.hero .eyebrow,
.page-hero .eyebrow { color: var(--teal-light); }

/* text-wrap: balance distribuisce il titolo su righe di lunghezza simile
   invece di riempire la prima e lasciare il resto alla successiva. Senza,
   i titoli chiudevano con righe mozze: privacy.html finiva con una parola
   sola larga 95px. I browser che non lo conoscono lo ignorano. */
.hero h1,
.page-hero h1 {
  color: var(--white); max-width: 24ch; margin-bottom: 0.55em;
  text-wrap: balance;
}
.hero .hero-lead { font-size: 1.22rem; color: var(--white-dim); max-width: 68ch; margin-bottom: 2.2em; }
.page-hero .lead { color: var(--white-dim); max-width: 68ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-rule { width: 64px; height: 3px; background: var(--teal); margin-bottom: 32px; }

/* Triade (immagine copertina) ------------------------------------------- */
.triade-figure { margin: 0; }
.triade-figure img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.triade-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 44px;
}
.triade-item { padding-top: 22px; border-top: 2px solid var(--teal); }
.triade-item h3 { margin-bottom: 0.4em; }
.triade-item p { color: var(--muted); margin-bottom: 0; font-size: 0.98rem; }

/* Card grid (porte d'ingresso) ------------------------------------------ */
.card-grid { display: grid; gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.door {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 28px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.door:hover {
  border-color: var(--teal); transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px rgba(10,37,56,0.5);
}
.door .door-kicker {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal);
  margin-bottom: 14px;
}
.door h3 { margin-bottom: 0.5em; }
.door p { color: var(--muted); font-size: 0.96rem; flex-grow: 1; }
.door .door-link {
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  color: var(--navy); display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
}
.door:hover .door-link { color: var(--teal); }
.door .door-link .arrow { transition: transform 0.18s ease; }
.door:hover .door-link .arrow { transform: translateX(4px); }

/* Steps (come funziona) -------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; counter-reset: step; }
.step { }
.step .num {
  font-family: var(--serif); font-size: 2.2rem; font-weight: 600;
  color: var(--teal); line-height: 1; margin-bottom: 16px;
}
.step h3 { margin-bottom: 0.5em; }
.step p { color: var(--muted); font-size: 0.98rem; margin-bottom: 0; }

/* Tool list -------------------------------------------------------------- */
.tool-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line);
}
.tool-row:first-child { border-top: 1px solid var(--line); }
.tool-row .tool-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--navy); }
.tool-row .tool-desc { color: var(--muted); font-size: 0.95rem; margin: 4px 0 0; }
.tool-row .tool-meta { flex: 0 0 auto; }
.badge {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 100px;
}
.badge.live { background: var(--teal-pale); color: var(--teal); }
.badge.soon { background: var(--line-soft); color: var(--muted-light); }

/* Alleanza (chi siamo teaser) ------------------------------------------- */
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
/* Una scheda sola occupa la riga intera (Proactiva rimossa temporaneamente, 2026-09-14). */
.partners:has(> .partner:only-child) { grid-template-columns: 1fr; }
.partner {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px;
}
.partner h3 { font-size: 1.15rem; margin-bottom: 0.2em; }
/* Nomi-partner che sono link esterni: colore accento + sottolineatura
   discreta, così si capisce che sono cliccabili (vs. titolo navy semplice). */
.partner h3 a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 122, 120, 0.45);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.partner h3 a:hover { color: var(--teal-light); text-decoration-color: var(--teal-light); }
.partner .role { font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal); margin-bottom: 14px; }
.partner p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0; }

/* CTA band --------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { color: var(--white); max-width: 22ch; margin: 0 auto 0.6em; }
.cta-band p { color: var(--white-dim); max-width: 56ch; margin: 0 auto 2em; }
.cta-band .hero-actions { justify-content: center; }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--white-faint); padding: 64px 0 36px; font-size: 0.9rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { height: 44px; width: auto; opacity: 0.95; }
.footer-brand .payoff { color: var(--white-dim); max-width: 34ch; margin: 16px 0 0; line-height: 1.6; }
.footer-col h4 { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--white-faint); margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; color: var(--white-dim); margin-bottom: 10px; font-size: 0.9rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; color: var(--white-faint); font-size: 0.82rem; }
.footer-bottom a { color: var(--white-faint); }

/* Breadcrumb ------------------------------------------------------------
   Le regole di .page-hero stavano qui: ora sono nella sezione "Hero",
   insieme a quelle di .hero, perche' le due bande sono la stessa cosa.
   Qui resta il breadcrumb, che vive nella banda ma esiste solo sulle pagine
   interne: la homepage non ne ha uno. */
.breadcrumb { font-family: var(--sans); font-size: 0.82rem; color: var(--white-faint); margin-bottom: 22px; }
.breadcrumb a { color: var(--white-faint); }
.breadcrumb a:hover { color: var(--white); }

/* Two-column layout ------------------------------------------------------ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.two-col.lean-left { grid-template-columns: 0.85fr 1.15fr; }

/* Feature list (cosa offriamo) ------------------------------------------ */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { position: relative; padding: 0 0 22px 38px; }
.feature-list li:last-child { padding-bottom: 0; }
.feature-list li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-pale);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f7a78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.feature-list li strong { color: var(--navy); font-weight: 600; display: block; margin-bottom: 2px; font-family: var(--sans); }
.feature-list li span { color: var(--muted); font-size: 0.96rem; }
.feature-list li strong .badge { font-size: 0.68rem; color: var(--muted-light); margin-left: 8px; vertical-align: middle; }

/* Quote / claim block ---------------------------------------------------- */
.claim-block {
  border-left: 3px solid var(--teal);
  padding: 6px 0 6px 28px; margin: 0;
}
.claim-block p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; color: var(--navy); margin: 0 0 0.5em; font-weight: 400; }
.claim-block.on-dark p { color: var(--white); }
.claim-block cite { font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: var(--muted); }
.claim-block.on-dark cite { color: var(--white-dim); }

/* Process timeline (cosa succede dopo) ---------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.timeline li { position: relative; padding: 0 0 30px 56px; counter-increment: tl; }
.timeline li::before {
  content: counter(tl, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--teal);
  width: 38px; height: 38px; border: 1.5px solid var(--teal); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--bg);
}
.timeline li::after {
  content: ''; position: absolute; left: 18px; top: 38px; bottom: 6px; width: 1.5px; background: var(--line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li h3 { font-size: 1.1rem; margin-bottom: 0.3em; }
.timeline li p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* Inline CTA prompt ------------------------------------------------------ */
.prompt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 34px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.prompt-row .prompt-text { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); }

/* Utilities -------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* Form di contatto ------------------------------------------------------ */
.form-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; letter-spacing: 0.01em; }
.form-field label .req { color: var(--teal); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; max-width: 100%;
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); transition: border-color 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--teal); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.82rem; color: var(--muted-light); margin: 18px 0 0; }
.form-card .btn { margin-top: 4px; }

/* Contatti diretti ------------------------------------------------------- */
.contact-direct { display: flex; flex-direction: column; gap: 26px; }
.contact-item .label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); margin-bottom: 6px; }
.contact-item .value { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); }
.contact-item .value a { color: var(--navy); }
.contact-item .value a:hover { color: var(--teal); }
.contact-item .sub { font-size: 0.88rem; color: var(--muted); margin-top: 3px; }

/* Approfondimenti — elenco articoli (hub) ------------------------------- */
.post-list { display: grid; gap: 26px; max-width: var(--maxw-narrow); margin: 0 auto; }
.post-card {
  display: block; padding: 28px 32px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.post-card:hover { border-color: var(--teal); box-shadow: 0 16px 34px -24px rgba(10,37,56,0.55); transform: translateY(-2px); }
.post-card .post-meta { font-family: var(--sans); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal); margin-bottom: 10px; }
.post-card h2 { font-size: 1.45rem; color: var(--navy); margin: 0 0 0.4em; line-height: 1.28; }
.post-card p { color: var(--muted); margin: 0 0 0.9em; font-size: 1rem; }
.post-card .post-more { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--teal); }
.post-card:hover .post-more { color: var(--teal-light); }

/* Approfondimenti — articolo -------------------------------------------- */
.article { max-width: var(--maxw-narrow); margin: 0 auto; }
.article .article-meta { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0 0 30px; }
.article .article-meta time { color: var(--teal); font-weight: 600; }
.article .article-lead { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--navy); margin: 0 0 1.4em; }
.article h2 { font-size: 1.5rem; margin: 1.8em 0 0.5em; color: var(--navy); }
.article h3 { font-size: 1.18rem; margin: 1.5em 0 0.4em; color: var(--navy); }
.article p { margin: 0 0 1.2em; }
.article ul, .article ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.article li { margin-bottom: 0.5em; }
.article a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: var(--teal-light); }
.article blockquote {
  border-left: 3px solid var(--teal); margin: 1.6em 0; padding: 4px 0 4px 26px;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--navy);
}
.article figure { margin: 1.8em 0; }
.article figure img { border-radius: var(--radius); }
.article figcaption { font-size: 0.85rem; color: var(--muted-light); margin-top: 8px; text-align: center; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

@media (max-width: 820px) {
  .post-card { padding: 22px 22px; }
}

/* Newsletter ------------------------------------------------------------ */
.newsletter-form { margin: 4px 0 0; }
.newsletter-row { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; }
.newsletter-row input[type="email"] {
  flex: 1 1 240px; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); transition: border-color 0.15s ease;
}
.newsletter-row input[type="email"]:focus { outline: none; border-color: var(--teal); }
.newsletter-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; max-width: 520px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.newsletter-consent input { width: auto; margin-top: 3px; flex: none; }
.newsletter-consent a { color: var(--teal); }
.newsletter-feedback { font-size: 0.88rem; font-weight: 500; color: var(--teal); margin: 14px 0 0; min-height: 1em; }
.newsletter-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Newsletter nel footer (contesto scuro) */
.footer-newsletter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
  padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-newsletter h4 { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--white-faint); margin: 0 0 10px; font-weight: 600; }
.footer-newsletter > div p { color: var(--white-dim); margin: 0; font-size: 0.9rem; max-width: 38ch; line-height: 1.6; }
.site-footer .newsletter-consent { color: var(--white-faint); }
.site-footer .newsletter-consent a { color: var(--white); }
.site-footer .newsletter-feedback { color: var(--teal-light); }
@media (max-width: 820px) { .footer-newsletter { grid-template-columns: 1fr; gap: 18px; } }

/* Review mode: gli stili sono iniettati da assets/review.js (autosufficiente,
   così funziona anche sui tool che non caricano questo foglio di stile). */

/* Responsive ------------------------------------------------------------- */
@media (max-width: 920px) {
  .nav { gap: 18px; }
}
@media (max-width: 820px) {
  section { padding: 64px 0; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    background: var(--white); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 0; border-bottom: 1px solid var(--line);
    transform: translateY(-130%); transition: transform 0.25s ease;
    box-shadow: 0 16px 30px -20px rgba(0,0,0,0.3);
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 14px 24px; border-bottom: 1px solid var(--line-soft); }
  .nav .btn { margin: 12px 24px; justify-content: center; }
  .nav-toggle { display: block; }
  .triade-grid, .steps, .partners,
  .two-col, .two-col.lean-left,
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; }
  .two-col { gap: 36px; }
  .claim-block p { font-size: 1.28rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .card-grid.cols-4 { gap: 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .tool-row { flex-direction: column; gap: 10px; }
}
@media (min-width: 521px) and (max-width: 820px) {
  .card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Aggiunte del riposizionamento divulgativo (2026-08-26)
   Regole nate dal batch "Istruzioni coding agent". Aggiunte in coda come da
   convenzione: non modificano le regole esistenti.
   ========================================================================== */

/* Bottone secondario — nato da "02 - Navigazione e sitemap" §3.
   Stessa geometria di .btn-primary, resa in outline: in un'architettura
   divulgativa il richiamo forte del teal pieno sul Contatti stona.
   2026-09-13: il Contatti dell'header e' tornato .btn-primary (teal pieno) su
   richiesta del committente; il secondario resta in uso nei tool. */
.btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* La navbar forza il testo bianco su .btn (`.nav .btn`), regola nata quando
   il bottone Contatti era sempre e solo primario, teal pieno. Il secondario
   e' in outline e ha bisogno del teal: serve la stessa specificita'.
   Nato da "02 - Navigazione e sitemap" §3. */
.nav .btn-secondary { color: var(--teal); }
.nav .btn-secondary:hover { color: var(--white); }

/* Link in linea su fondo navy — nato da "Copy pagine audience/03 - Imprenditori" §4.
   Il teal dei link (#1f7a78) su .bg-navy vale circa 3:1 di contrasto: sul fondo
   scuro il link si scrive in bianco ed è la sottolineatura teal a dire che è un
   link. Vale solo per i link in linea nei paragrafi: i .btn hanno stile proprio. */
.bg-navy p a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--teal-light);
  text-underline-offset: 3px;
}
.bg-navy p a:hover { color: var(--teal-light); }

/* Le sovrascritture di .hero / .page-hero che stavano qui sono state
   riassorbite nella sezione "Hero" del foglio: erano tre blocchi in coda
   che ridefinivano le stesse proprieta' di una regola scritta piu' su, ed e'
   il modo in cui un foglio di stile smette di dire dove stanno le cose. */

/* .prompt-row con un testo lungo — nato da "Copy pagine audience/03 - Imprenditori" §5.
   La riga di CTA era disegnata per una domanda breve accanto al bottone. Il nuovo
   testo di IM-19 è una frase lunga e, senza limite, occupa tutta la riga
   spingendo il bottone a capo. Il limite tiene insieme testo e bottone. È tarato
   sopra il più lungo degli altri .prompt-text (SR-26, ~69ch): nessuna delle altre
   righe di CTA del sito lo raggiunge, quindi nessuna cambia impaginazione. */
.prompt-row .prompt-text { max-width: 72ch; }

/* ==========================================================================
   Sezione "Fonti e normativa" (2026-08-26)
   Regole nate da "Istruzioni coding agent/Sezione Fonti". Aggiunte in coda
   come da convenzione: non modificano le regole esistenti.
   ========================================================================== */

/* Ambra: il terzo stato ("da verificare") non aveva un colore nel sistema.
   Verde e grigio ci sono già (--teal-pale/--teal e --line-soft/--muted-light,
   usati da .badge.live e .badge.soon); questo è l'unico token nuovo, e serve
   perché lo stato intermedio si distingua a colpo d'occhio dagli altri due.
   Tarato per restare leggibile sul proprio fondo (contrasto > 7:1). */
:root {
  --amber:      #8a5200;
  --amber-pale: #fdf1de;
}

/* Badge di stato — stessa geometria di .badge, tre varianti di colore. */
.badge.stato-vigente   { background: var(--teal-pale);  color: var(--teal); }
.badge.stato-superato  { background: var(--line-soft);  color: var(--muted-light); }
.badge.stato-verificare { background: var(--amber-pale); color: var(--amber); }

/* Nota sul metodo: il riquadro è .form-card, qui si sistema solo il titolo e
   la legenda dei tre stati. */
.method-note-title { font-size: 1.35rem; margin-bottom: 0.7em; }

/* Legenda degli stati: griglia a due colonne sull'INTERO <dl>, non su ogni
   riga. Le pillole hanno larghezze molto diverse ("Vigente" ~79px, "Da
   verificare" ~125px): con un contenitore per riga le descrizioni partivano da
   tre punti diversi e il blocco si leggeva come un elenco storto. Qui la prima
   colonna e' larga quanto la pillola piu' larga e vale per tutte le righe, e
   resta corretta se un giorno si aggiunge uno stato con un nome piu' lungo. */
.stati-legenda {
  display: grid; grid-template-columns: max-content 1fr;
  /* Righe di pari altezza. Le tre descrizioni non occupano lo stesso numero di
     righe di testo (una sta su una riga, due su due), quindi con righe a
     contenuto le pillole cadevano a intervalli disuguali: 40px fra la prima e
     la seconda, 60px fra la seconda e la terza. Con 1fr su un contenitore ad
     altezza indefinita ogni riga prende l'altezza della piu' alta, e le
     pillole tornano equidistanti a qualunque larghezza - anche se domani una
     descrizione andasse a capo una volta in piu'. */
  grid-auto-rows: 1fr;
  column-gap: 18px; row-gap: 14px;
  margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
}
/* flex, non blocco: la pillola e' un inline-block e in un blocco viene appoggiata
   sulla baseline della riga, che la spinge in basso di qualche pixel rispetto
   alla descrizione accanto. Cosi' parte dal bordo alto della riga di griglia. */
.stati-legenda dt { display: flex; align-items: flex-start; }
.stati-legenda dd { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* Schede fonte -----------------------------------------------------------
   Stessa grammatica visiva di .post-card (riquadro bordato, titolo serif,
   corpo muted), senza l'interazione da card cliccabile: qui i link sono
   diversi fra loro e devono restare distinti. */
.fonti-list { display: grid; gap: 22px; }
.fonte {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px;
  /* l'header è sticky (76px): senza questo l'ancora alla singola scheda
     la porterebbe sotto la barra */
  scroll-margin-top: 92px;
}
.fonte-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.fonte-date { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-light); }
.fonte-title { font-size: 1.2rem; line-height: 1.32; margin: 0 0 6px; }
.fonte-title a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.fonte-title a:hover { color: var(--teal); text-decoration-color: var(--teal); }
.fonte-subtitle { font-size: 0.95rem; color: var(--muted); margin: 0 0 4px; }
.fonte-issuer { font-family: var(--sans); font-size: 0.82rem; color: var(--muted-light); margin: 0 0 16px; }
.fonte-superseded {
  font-size: 0.92rem; margin: 0 0 16px; padding: 10px 14px;
  background: var(--bg-alt); border-left: 3px solid var(--muted-light); border-radius: 0 var(--radius) var(--radius) 0;
}
.fonte-superseded strong { color: var(--navy); }
.fonte-summary { color: var(--ink); margin: 0 0 12px; font-size: 0.98rem; }
.fonte-use, .fonte-caveat { color: var(--muted); font-size: 0.95rem; margin: 0 0 10px; }
.fonte-use strong, .fonte-caveat strong { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy); margin-right: 6px; }
.fonte-caveat strong { color: var(--amber); }
.fonte-alt { margin: 16px 0 0; }
.fonte-alt a { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; }
.fonte-tools { font-size: 0.9rem; color: var(--muted); margin: 14px 0 0; }
.fonte-tools strong { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy); margin-right: 6px; }
.fonte-tools .fonte-tool { color: var(--muted-light); }
.fonte-tools a.fonte-tool { color: var(--teal); }
.fonte-checked {
  font-family: var(--sans); font-size: 0.76rem; color: var(--muted-light);
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}

@media (max-width: 820px) {
  .fonte { padding: 22px 22px; }
}

/* Sotto i 620px la colonna delle pillole toglie troppa larghezza al testo:
   la legenda passa a colonna unica, pillola sopra e descrizione sotto. */
@media (max-width: 620px) {
  /* grid-auto-rows torna ad auto: a colonna unica pillole e descrizioni sono
     righe distinte, e pareggiarle darebbe alle pillole l'altezza di un
     paragrafo. */
  .stati-legenda { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 6px; }
  .stati-legenda dt { padding-top: 10px; }
  .stati-legenda dt:first-child { padding-top: 0; }
}