/* 06/08/2026: tutti i corpi ridotti di 1pt a ogni larghezza (min/max -0.083rem,
   mid in calc(-0.083rem)) — decisione Roberto, QA matrice 38 risoluzioni PASS. */
/*
 * Titoli e ritmo verticale responsive v19.
 * Approvato per la revisione locale del 6 agosto 2026; nessuna pubblicazione automatica.
 */
.hero-title-line {
  display: block;
  color: var(--white);
}

.hero-title-accent {
  color: #b9f4f1;
}

.brand-tagline-break {
  display: none;
}

@media (min-width: 1025px) and (max-width: 2399px) {
  .brand span {
    max-width: 280px;
  }

  #hero-title {
    font-size: clamp(3.367rem, calc(4.75vw - 0.083rem), 4.967rem);
    letter-spacing: -.04em;
    line-height: .96;
  }

  .hero-copy {
    padding-block: 38px 56px;
  }

  .hero-lead {
    margin-top: 26px;
  }

  .hero-meccanismo + .hero-actions {
    margin-top: 20px;
  }

  .hero-points {
    margin-top: 22px;
  }

  .section-heading h2 {
    font-size: clamp(2.367rem, calc(4.25vw - 0.083rem), 4.267rem);
    letter-spacing: -.04em;
    line-height: 1.04;
  }

  .section-heading > p:last-child {
    margin-top: 20px;
  }

  .problem {
    padding-block: 104px 112px;
  }

  .problem-mascot {
    min-height: 330px;
  }

  .problem-lines {
    margin-top: 44px;
  }

  .problem-line {
    gap: 22px;
    padding-block: 28px;
  }

  .features {
    padding-block: 108px;
  }

  .section-heading-wide {
    gap: 24px 58px;
  }

  .feature-stage {
    gap: 18px;
    margin-top: 56px;
  }

  .feature-card {
    min-height: 340px;
    padding: 26px;
  }

  .feature-card h3 {
    font-size: clamp(1.467rem, calc(2.15vw - 0.083rem), 2.017rem);
    line-height: 1.04;
  }

  .sos-band {
    gap: 40px;
    margin-top: 24px;
    padding: 38px 44px;
  }

  .sos-copy h3 {
    font-size: clamp(1.817rem, calc(3.1vw - 0.083rem), 3.017rem);
    line-height: 1.03;
  }

  .audiences {
    padding-block: 108px 116px;
  }

  .audience-intro {
    gap: clamp(34px, 5vw, 76px);
  }

  .audience-mascot {
    min-height: 340px;
  }

  .audience-list {
    gap: 20px;
    margin-top: 48px;
  }

  .audience-card {
    min-height: 184px;
    padding: 26px;
  }

  .audience-card h3 {
    font-size: 1.480rem; /* 06/08: +1pt (Roberto) */
    line-height: 1.12;
  }

  .accessibility-section {
    padding-block: 53px 116px;
  }

  .accessibility-hero {
    gap: clamp(40px, 5.4vw, 82px);
  }

  .accessibility-copy h2 {
    font-size: clamp(2.667rem, calc(4.3vw - 0.083rem), 4.267rem);
    line-height: 1;
  }

  .accessibility-copy > p:not(.eyebrow) {
    margin-top: 24px;
  }

  .accessibility-status {
    margin-top: 22px;
  }

  .accessibility-grid {
    gap: 20px;
    margin-top: 29px;
  }

  .accessibility-card {
    min-height: 390px;
    padding: 26px;
  }

  .accessibility-card-label {
    margin-top: 20px;
  }

  .accessibility-card h3 {
    font-size: clamp(1.617rem, calc(2.25vw - 0.083rem), 2.067rem);
    line-height: 1.08;
  }

  .accessibility-note {
    margin-top: 30px;
  }

  .pact {
    padding-block: 100px;
  }

  .pact-frame {
    padding: 60px;
  }

  .pact-frame h2 {
    font-size: clamp(2.717rem, calc(4.25vw - 0.083rem), 4.267rem);
    line-height: 1.02;
  }

  .pact-frame blockquote {
    margin-top: 28px;
  }

  .pact-signature {
    margin-top: 26px;
  }

  .pact-tester-callout {
    margin-top: 64px;
    padding-block: 26px;
  }

  .share-section {
    padding-block: 56px 38px;
  }

  .share-card {
    gap: 24px 32px;
    padding: 32px 36px;
  }

  .share-copy h2 {
    font-size: clamp(2.367rem, calc(3.55vw - 0.083rem), 3.467rem);
    line-height: 1.02;
  }

  .share-next {
    margin-top: 18px;
  }

  .forms-section {
    padding-block: 76px 120px;
  }

  .forms-heading {
    margin-bottom: 34px;
  }

  .form-selector {
    gap: 10px;
  }

  .form-choice {
    min-height: 114px;
  }

  .form-panel {
    gap: clamp(42px, 4vw, 56px);
    padding: 56px;
  }

  .form-step {
    margin-bottom: 22px;
  }

  .form-intro h3 {
    font-size: clamp(1.917rem, calc(3vw - 0.083rem), 2.917rem);
    line-height: 1.05;
  }

  .form-intro-copy > p:last-child {
    margin-top: 18px;
  }

  .form-mascot {
    margin-top: 20px;
  }

  .faq {
    padding-block: 104px 112px;
  }

  .faq-shell {
    gap: 64px;
  }

  .faq summary {
    min-height: 72px;
    padding-block: 20px;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .brand span {
    max-width: 260px;
  }

  .brand-tagline-break {
    display: block;
  }

  #hero-title {
    font-size: clamp(2.917rem, calc(6.4vw - 0.083rem), 4.067rem);
    letter-spacing: -.04em;
    line-height: .98;
  }

  .hero-copy {
    padding-block: 30px 48px;
  }

  .hero-lead {
    margin-top: 24px;
  }

  .hero-meccanismo + .hero-actions {
    margin-top: 18px;
  }

  .hero-points {
    margin-top: 20px;
  }

  .hero-scene {
    min-height: 800px;
  }

  .problem,
  .features,
  .audiences,
  .faq {
    padding-block: 92px;
  }

  .accessibility-section {
    padding-block: 44px 96px;
  }

  .forms-section {
    padding-block: 70px 96px;
  }

  .section-heading h2 {
    font-size: clamp(2.267rem, calc(5.6vw - 0.083rem), 3.667rem);
    letter-spacing: -.04em;
    line-height: 1.05;
  }

  .section-heading > p:last-child {
    margin-top: 18px;
  }

  .problem-lines {
    margin-top: 42px;
  }

  .problem-line {
    padding-block: 26px;
  }

  .feature-stage {
    gap: 16px;
    margin-top: 50px;
  }

  .feature-card {
    min-height: 326px;
    padding: 23px;
  }

  .feature-card h3 {
    font-size: clamp(1.467rem, calc(3.2vw - 0.083rem), 1.867rem);
    line-height: 1.06;
  }

  .sos-band {
    gap: 26px;
    padding: 32px;
  }

  .sos-copy h3 {
    font-size: clamp(1.817rem, calc(4.6vw - 0.083rem), 2.717rem);
    line-height: 1.04;
  }

  .audience-list {
    gap: 18px;
    margin-top: 46px;
  }

  .audience-card {
    min-height: 180px;
    padding: 24px;
  }

  .audience-card h3 {
    font-size: 1.480rem; /* 06/08: +1pt (Roberto) */
  }

  .accessibility-copy h2 {
    font-size: clamp(2.417rem, calc(5.9vw - 0.083rem), 3.817rem);
    line-height: 1.02;
  }

  .accessibility-copy > p:not(.eyebrow) {
    margin-top: 22px;
  }

  .accessibility-status {
    margin-top: 20px;
  }

  .accessibility-grid {
    gap: 18px;
    margin-top: 25px;
  }

  .accessibility-card {
    padding: 22px;
  }

  .accessibility-card h3 {
    font-size: clamp(1.467rem, calc(3.2vw - 0.083rem), 1.867rem);
  }

  .accessibility-note {
    margin-top: 28px;
  }

  .pact {
    padding-block: 92px;
  }

  .pact-frame h2 {
    font-size: clamp(2.467rem, calc(6vw - 0.083rem), 3.917rem);
  }

  .pact-frame blockquote {
    margin-top: 26px;
  }

  .share-section {
    padding-block: 50px 34px;
  }

  .share-copy h2 {
    font-size: clamp(2.217rem, calc(5.2vw - 0.083rem), 3.217rem);
  }

  .forms-heading {
    margin-bottom: 34px;
  }

  .form-panel {
    padding: 48px;
  }

  .form-intro h3 {
    font-size: clamp(1.817rem, calc(4.2vw - 0.083rem), 2.667rem);
  }

  .faq-shell {
    gap: 50px;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
  .site-header {
    grid-template-columns: minmax(384px, 1fr) minmax(0, 1fr);
  }

  #hero-title {
    font-size: clamp(2.617rem, calc(5.2vw - 0.083rem), 3.467rem);
    line-height: .98;
  }

  .section-heading h2,
  .accessibility-copy h2,
  .pact-frame h2,
  .share-copy h2 {
    font-size: clamp(2.267rem, calc(4.8vw - 0.083rem), 2.767rem);
  }

  .hero-scene {
    min-height: 590px;
  }
}

@media (min-width: 761px) and (max-width: 960px) and (orientation: landscape) {
  .hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .85fr);
    gap: 18px;
  }

  #hero-title {
    font-size: clamp(2.017rem, calc(5vw - 0.083rem), 2.567rem);
  }

  .section-heading h2,
  .accessibility-copy h2,
  .pact-frame h2,
  .share-copy h2 {
    font-size: clamp(1.767rem, calc(4.35vw - 0.083rem), 2.017rem);
  }

  .sos-copy h3,
  .form-intro h3 {
    font-size: clamp(1.717rem, calc(4.2vw - 0.083rem), 1.967rem);
  }
}

@media (max-width: 760px) {
  .brand span {
    max-width: none;
  }

  #hero-title {
    font-size: clamp(1.787rem, calc(10.5vw - 0.083rem), 4.117rem);
    letter-spacing: -.04em;
    line-height: .99;
  }

  .hero-lead {
    margin-top: 24px;
  }

  .hero-meccanismo + .hero-actions {
    margin-top: 18px;
  }

  .hero-points {
    margin-top: 20px;
  }

  .hero-scene {
    min-height: 620px;
  }

  .problem,
  .features,
  .audiences,
  .faq {
    padding-block: 78px;
  }

  .forms-section {
    padding-block: 64px 82px;
  }

  .accessibility-section {
    padding-block: 34px 82px;
  }

  .accessibility-hero {
    gap: 12px;
  }

  .section-heading h2 {
    font-size: clamp(1.667rem, calc(8.8vw - 0.083rem), 2.267rem);
    letter-spacing: -.04em;
    line-height: 1.05;
  }

  .section-heading > p:last-child {
    margin-top: 18px;
  }

  .problem-lines {
    margin-top: 40px;
  }

  .problem-line {
    gap: 18px;
    padding-block: 24px;
  }

  .feature-stage {
    margin-top: 44px;
  }

  .feature-card {
    min-height: 308px;
  }

  .feature-card h3 {
    font-size: clamp(1.267rem, calc(6vw - 0.083rem), 1.517rem);
  }

  .sos-band {
    gap: 28px;
    padding: 28px 22px;
  }

  .sos-copy h3 {
    font-size: clamp(1.717rem, calc(8.5vw - 0.083rem), 2.467rem);
    line-height: 1.05;
  }

  .audience-list {
    margin-top: 38px;
  }

  .audience-card {
    min-height: 0;
    padding: 22px;
  }

  .audience-card h3 {
    font-size: 1.367rem;
  }

  .accessibility-copy h2 {
    font-size: clamp(1.737rem, calc(9.1vw - 0.083rem), 2.367rem);
    line-height: 1.03;
  }

  .accessibility-copy > p:not(.eyebrow) {
    margin-top: 22px;
  }

  .accessibility-status {
    margin-top: 20px;
  }

  .accessibility-grid {
    margin-top: 22px;
  }

  .accessibility-card {
    padding: 22px;
  }

  .accessibility-card h3 {
    font-size: clamp(1.367rem, calc(6.4vw - 0.083rem), 1.767rem);
  }

  .accessibility-note {
    margin-top: 26px;
  }

  .pact {
    min-height: 0;
    padding-block: 72px;
  }

  .pact-frame {
    padding: 46px 24px;
  }

  .pact-frame h2 {
    font-size: clamp(1.737rem, calc(9.1vw - 0.083rem), 2.367rem);
    line-height: 1.04;
  }

  .pact-frame blockquote {
    margin-top: 26px;
  }

  .pact-signature {
    margin-top: 26px;
  }

  .pact-tester-callout {
    margin-top: 170px;
  }

  .share-section {
    padding-block: 44px 32px;
  }

  .share-copy h2 {
    font-size: clamp(1.667rem, calc(8.8vw - 0.083rem), 2.217rem);
  }

  .share-next {
    margin-top: 16px;
  }

  .forms-heading {
    margin-bottom: 32px;
  }

  .form-intro h3 {
    font-size: clamp(1.767rem, calc(8.4vw - 0.083rem), 2.367rem);
  }

  .form-intro-copy > p:last-child {
    margin-top: 18px;
  }

  .faq summary {
    min-height: 70px;
    padding-block: 20px;
  }
}

@media (max-width: 410px) {
  .hero-scene {
    min-height: 650px;
  }

  .form-intro h3 {
    font-size: 1.717rem;
  }
}

@media (max-width: 360px) {
  .hero-scene {
    min-height: 820px;
  }
}

@media (max-width: 359px) {
  .feature-card {
    min-height: 0;
  }
}

@media (max-width: 340px) {
  .brand {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .brand img {
    width: 124px;
    height: 64px;
    padding: 8px 10px;
  }

  .brand span {
    font-size: 0.867rem;
    line-height: 1.06;
  }
}

@media (min-width: 2400px) {
  :root {
    --content: clamp(1640px, 68vw, 2520px);
  }

  .brand span {
    max-width: clamp(300px, 12vw, 460px);
  }

  #hero-title {
    max-width: 1180px;
    font-size: clamp(4.117rem, calc(3.3vw - 0.083rem), 4.717rem);
    letter-spacing: -.04em;
    line-height: .98;
  }

  .section-heading h2 {
    font-size: clamp(3.117rem, calc(2.75vw - 0.083rem), 4.117rem);
    letter-spacing: -.04em;
    line-height: 1.04;
  }

  .problem,
  .features,
  .audiences,
  .faq {
    padding-block: clamp(128px, 5.8vw, 220px);
  }

  .accessibility-section {
    padding-block: clamp(64px, 2.9vw, 110px) clamp(128px, 5.8vw, 220px);
  }

  .feature-stage {
    margin-top: clamp(72px, 3.3vw, 126px);
  }

  .accessibility-grid {
    margin-top: clamp(36px, 1.65vw, 63px);
  }

  .feature-card h3 {
    font-size: clamp(1.617rem, calc(1.55vw - 0.083rem), 2.167rem);
  }

  .sos-copy h3 {
    font-size: clamp(2.017rem, calc(2.4vw - 0.083rem), 3.117rem);
  }

  .audience-card h3 {
    font-size: clamp(1.467rem, calc(1.4vw - 0.083rem), 1.917rem);
  }

  .accessibility-copy h2,
  .pact-frame h2 {
    font-size: clamp(3.217rem, calc(2.9vw - 0.083rem), 4.217rem);
  }

  .accessibility-card h3 {
    font-size: clamp(1.617rem, calc(1.55vw - 0.083rem), 2.167rem);
  }

  .pact {
    padding-block: clamp(150px, 6.6vw, 250px);
  }

  .share-section {
    padding-block: clamp(88px, 3.5vw, 130px) clamp(64px, 2.6vw, 105px);
  }

  .share-copy h2 {
    font-size: clamp(2.617rem, calc(2.35vw - 0.083rem), 3.567rem);
  }

  .forms-section {
    padding-block: clamp(120px, 5vw, 195px) clamp(160px, 6.8vw, 265px);
  }

  .form-intro h3 {
    font-size: clamp(2.167rem, calc(2.1vw - 0.083rem), 3.117rem);
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  #hero-title {
    font-size: clamp(2.167rem, calc(6vw - 0.083rem), 2.467rem);
    line-height: 1;
  }

  .section-heading h2,
  .accessibility-copy h2,
  .pact-frame h2 {
    font-size: clamp(1.867rem, calc(5.8vw - 0.083rem), 2.067rem);
  }

  .share-copy h2,
  .sos-copy h3,
  .form-intro h3 {
    font-size: 1.917rem;
  }

  .hero-scene {
    min-height: 590px;
  }
}

/* «applicazione» evidenziata in arancione chiaro — decisione Roberto 06/08/2026:
   non vendiamo telefoni, e' una app. Contrasto su #06172F: 10,0. */
.hero-parola-app,
.section-heading h2 .hero-parola-app {
  color: #FFB258;
}

/* «MiA» accanto ad Applicazione, coi colori del logo (Roberto 06/08/2026):
   M e A bianche, la i turchese del marchio. I selettori doppi vincono sulla
   regola generica .section-heading h2 span (style.css r.615). */
.parola-mia,
.section-heading h2 .parola-mia {
  color: #ffffff;
}
.parola-mia .parola-mia-i,
.section-heading h2 .parola-mia .parola-mia-i {
  color: var(--teal, #00c2c2);
}

/* Mascotte «guiding» a destra del titolo Partecipa (Roberto 06/08/2026):
   posa mai usata altrove, l'ala tesa invita verso i moduli. Sparisce sotto i
   960 px per non rubare spazio al testo. */
.forms-heading {
  position: relative;
}

.forms-mascot {
  position: absolute;
  top: -36px;
  right: 0;
  width: min(26vw, 300px);
  pointer-events: none;
}

.forms-mascot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 26px rgb(4 16 34 / 45%));
}

@media (max-width: 960px) {
  .forms-mascot {
    display: none;
  }
}