/* =========================================================================
   Direzione Finanziaria — Alfredo Cerabino
   Marchio: #243351 blu petrolio · #f39200 arancione · Archivo Expanded + Source Sans 3
   Direzione visuale: editoriale/boardroom — tipografia oversize, alternanza di
   fondi, blocchi che si leggono come slide autonome, foto come elementi
   compositivi (non rettangoli incollati).
   Accessibilita: l'arancione di marchio su bianco non raggiunge il contrasto
   AA per il testo (2,3:1). Si usa come colore pieno (sfondi, forme, testo su
   navy); per il testo su fondo chiaro si usa --accent-ink (4,6:1).
   ========================================================================= */

:root {
  --navy: #243351;
  --navy-900: #16203a;
  --navy-800: #1c2843;
  --navy-700: #33456b;
  --navy-500: #55668b;
  --accent: #f39200;
  --accent-ink: #9e5d00;
  --accent-soft: #fdf1de;
  --on-navy: #d9deea;   /* testo secondario sui fondi navy: 9,3:1 */
  --accent-line: #f7c37a;
  --ink: #141a29;
  --text: #38425a;
  --muted: #626e87;
  --line: #dde3ec;
  --line-soft: #edf1f6;
  --bg: #ffffff;
  --bg-alt: #f5f7fb;
  --bg-tint: #eaeff7;

  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1280px;
  --wrap-narrow: 880px;
  --gutter: clamp(1.25rem, .5rem + 3vw, 3rem);
  --radius: 3px;
  --radius-lg: 2px;
  --shadow: 0 24px 60px -28px rgba(20, 26, 41, .32);
  --shadow-lg: 0 40px 90px -32px rgba(20, 26, 41, .45);
  --header-h: 88px;
  --section-y: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` deve vincere anche su chi dichiara un display (bottoni, schede). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.09rem;
  line-height: 1.66;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-stretch: 125%;
  color: var(--navy);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 1.35rem + 4.9vw, 5rem);
  font-weight: 600; line-height: 1.0; letter-spacing: -.032em;
}
h2 {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  font-weight: 600; line-height: 1.06; letter-spacing: -.028em;
}
h3 {
  font-size: clamp(1.3rem, 1.12rem + .85vw, 1.85rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -.018em;
}
h4 { font-size: 1.12rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
a { color: var(--navy); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .5em; }
li::marker { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: #fff; padding: .8rem 1.2rem; font-weight: 600; }
.skip-link:focus { left: .75rem; top: .75rem; color: #fff; }

/* ---------- occhiello ---------- */
.eyebrow {
  font-family: var(--font-display); font-stretch: 125%;
  font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 1.5rem;
  display: flex; align-items: center; gap: .85rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--accent); flex: none; }
.eyebrow--light { color: var(--accent); }
.eyebrow--center { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line-soft); box-shadow: 0 10px 30px -24px rgba(20, 26, 41, .5); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 196px; height: auto; }
@media (max-width: 480px) { .brand img { width: 172px; } }
/* Strumenti a destra del logo: selettore lingua (sempre visibile, V3 §4.2) e,
   sotto la soglia del menu a tendina, il bottone hamburger. */
.site-header__tools { display: flex; align-items: center; gap: .75rem; flex: none; }
/* Da desktop: logo — voci di menu — CTA — lingue. Il DOM tiene gli strumenti
   accanto al logo perche' sul telefono devono stare a destra del marchio. */
@media (min-width: 1300.02px) {
  .site-header__inner { justify-content: flex-start; }
  .nav { margin-left: auto; }
  .site-header__tools { order: 3; }
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__list { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--navy);
  text-decoration: none; padding: .4rem 0; position: relative; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent-ink); }

.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff; border-radius: var(--radius);
  width: 48px; height: 44px; cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 21px; height: 2px; background: var(--navy); transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(-45deg); }

@media (max-width: 1300px) {
  .nav-toggle { display: flex; }
  /* A tutta altezza, non alto quanto il contenuto: sotto un pannello corto
     restava visibile la hero con la stessa CTA arancione del menu, che sembrava
     un bottone duplicato (mirror, 17/09). L'altezza e' esplicita e non
     `bottom: 0`: il `backdrop-filter` dell'header lo rende contenitore del
     fixed, e un bottom riferito all'header schiaccerebbe il pannello a zero. */
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; overflow-y: auto;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch;
    gap: 0; padding: .5rem var(--gutter) 1.75rem; box-shadow: var(--shadow); display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line-soft); }
  .nav__link { display: block; padding: 1.05rem .25rem; font-size: 1.1rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.25rem; justify-content: center; }
}

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: .005em;
  padding: 1rem 1.9rem; border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--navy); box-shadow: 0 14px 30px -18px rgba(243, 146, 0, .9); }
.btn--primary:hover { background: #ffa41f; color: var(--navy); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-700); color: #fff; }
.btn--ghost { border-color: rgba(36, 51, 81, .28); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--sm { padding: .7rem 1.3rem; font-size: .95rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font-family: var(--font-display); font-stretch: 125%;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  color: var(--accent-ink); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.link-arrow:hover::after { transform: translateX(6px); }
.link-arrow--light { color: var(--accent); }
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: "←"; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.link-arrow--back:hover::before { transform: translateX(-6px); }

/* ---------- sezioni ---------- */
.section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: clamp(3rem, 2rem + 4vw, 6rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .82); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy strong { color: #fff; }
.section--navy a:not(.btn) { color: #fff; }
.section--dark { background: var(--navy-900); color: rgba(255, 255, 255, .82); }
.section--dark h2, .section--dark h3 { color: #fff; }

.section__head { max-width: 900px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.lead { font-size: clamp(1.15rem, 1.04rem + .5vw, 1.42rem); line-height: 1.55; color: var(--muted); }
.section--navy .lead, .section--dark .lead { color: rgba(255, 255, 255, .78); }

/* ---------- citazioni ---------- */
.quote {
  font-family: var(--font-display); font-stretch: 125%;
  font-size: clamp(1.25rem, 1.05rem + .95vw, 1.85rem);
  font-weight: 500; line-height: 1.32; letter-spacing: -.02em; color: var(--navy);
  border-left: 3px solid var(--accent); padding: .1rem 0 .1rem 1.75rem; margin: 0 0 2rem;
  text-wrap: balance;
}
.quote--light { color: #fff; }
.quote--plain { border: 0; padding-left: 0; }
.quote--center { text-align: center; }

/* ---------- HERO ---------- */
.hero { position: relative; padding: clamp(3rem, 1.5rem + 5vw, 6rem) 0 0; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: var(--bg-alt); z-index: -2;
}
.hero__grid {
  display: grid; grid-template-columns: 1.22fr .78fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end;
}
.hero__text { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.hero__title { margin-bottom: 1.6rem; }
.hero__kicker {
  display: block; font-size: clamp(.82rem, .76rem + .2vw, .95rem); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 1.5rem; line-height: 1.4;
}
.hero__text > p { font-size: clamp(1.12rem, 1.02rem + .5vw, 1.35rem); color: var(--muted); line-height: 1.55; max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

.hero__figure { position: relative; margin: 0; align-self: end; }
.hero__figure img { position: relative; z-index: 1; width: 100%; box-shadow: var(--shadow-lg); }
/* forme geometriche riprese dal simbolo del marchio */
.hero__figure::before {
  content: ""; position: absolute; z-index: 0; left: -8%; bottom: -6%;
  width: 58%; aspect-ratio: 1; background: var(--accent);
}
.hero__figure::after {
  content: ""; position: absolute; z-index: 2; right: -4%; top: 8%;
  width: 30%; aspect-ratio: 1;
  background: repeating-linear-gradient(135deg, var(--navy) 0 6px, transparent 6px 14px);
  opacity: .45;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__text { padding-bottom: 0; }
  .hero__figure { max-width: 460px; margin-inline: auto; }
  .hero::after { height: 30%; }
}

/* hero delle pagine interne: solo tipografia, molto spazio */
.hero--text { padding: clamp(3.5rem, 2rem + 6vw, 8rem) 0 clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero--text::after { display: none; }
.hero--text .lead { max-width: 62ch; }
.hero--text .quote { margin-top: 2.5rem; }

/* ---------- proof bar ---------- */
.proof { border-top: 1px solid var(--line); background: var(--bg-alt); }
.proof__list {
  list-style: none; margin: 0; padding: clamp(2rem, 1.2rem + 2vw, 3.25rem) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, .8rem + 2vw, 3rem);
}
@media (max-width: 860px) { .proof__list { grid-template-columns: repeat(2, 1fr); } }
.proof__list li { margin: 0; }
.proof__num {
  display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.1rem); line-height: 1; color: var(--navy);
  letter-spacing: -.03em; margin-bottom: .55rem;
}
.proof__num em { font-style: normal; color: var(--accent-ink); }
.proof__label { font-size: .98rem; color: var(--muted); line-height: 1.45; display: block; }
.proof__label strong { display: block; color: var(--navy); font-weight: 600; margin-bottom: .1rem; }

/* ---------- statement (manifesto a tutta larghezza) ---------- */
.statement { background: var(--navy); color: #fff; padding: clamp(4rem, 2.5rem + 6vw, 8rem) 0; position: relative; overflow: hidden; }
.statement::before {
  content: ""; position: absolute; right: -6%; top: -30%; width: 44%; aspect-ratio: 1;
  background: repeating-linear-gradient(135deg, rgba(243,146,0,.22) 0 10px, transparent 10px 26px);
}
.statement__inner { position: relative; }
.statement p.big {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem); line-height: 1.2; letter-spacing: -.028em;
  color: #fff; margin: 0; text-wrap: balance; max-width: 24ch;
}
.statement .attrib { margin-top: 2rem; color: rgba(255,255,255,.6); font-size: 1rem; letter-spacing: .04em; }
.statement__actions { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- sezione visuale full-bleed ---------- */
.visual { background: var(--navy-900); position: relative; min-height: clamp(420px, 46vw, 620px); display: grid; align-items: center; color: #fff; overflow: hidden; }
.visual__bg { position: absolute; inset: 0; z-index: 0; }
.visual__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(22,32,58,.95) 0%, rgba(22,32,58,.85) 44%, rgba(22,32,58,.3) 100%);
}
.visual__content { position: relative; z-index: 2; padding: clamp(3rem, 2rem + 4vw, 6rem) 0; max-width: 50ch; }
.visual__content h2 { color: #fff; font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.9rem); }
.visual__content p { color: rgba(255,255,255,.84); font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }
@media (max-width: 760px) { .visual::after { background: linear-gradient(180deg, rgba(22,32,58,.92) 30%, rgba(22,32,58,.78) 100%); } }

/* ---------- griglie e card ---------- */
.grid { display: grid; gap: clamp(1.25rem, .6rem + 1.6vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 1.2rem + 1.8vw, 2.9rem); position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 100%;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line-soft); }
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: .75rem; font-size: clamp(1.18rem, 1.08rem + .45vw, 1.45rem); }
.card p { color: var(--muted); font-size: 1.02rem; }
.card .link-arrow { margin-top: auto; padding-top: 1.75rem; }
.card--flat:hover { transform: none; box-shadow: none; }
.card--flat::after { display: none; }
.card__index {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: .78rem; letter-spacing: .2em; color: var(--accent); margin-bottom: 1.25rem;
}

/* ---------- blocchi editoriali numerati ---------- */
.stack { display: flex; flex-direction: column; gap: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }

.block { display: grid; grid-template-columns: minmax(110px, .26fr) 1fr; gap: clamp(1.5rem, .8rem + 3vw, 4rem); align-items: start; }
.block + .block { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.section--navy .block + .block, .section--dark .block + .block { border-top-color: rgba(255,255,255,.14); }
.block__num {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(3.4rem, 2rem + 5vw, 6.5rem); line-height: .82; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent);
}
.section--navy .block__num, .section--dark .block__num { -webkit-text-stroke-color: rgba(243,146,0,.55); }
.block__body h3 { margin-bottom: 1rem; max-width: 24ch; }
.block__body > p { color: var(--muted); max-width: 64ch; }
.section--navy .block__body > p { color: rgba(255,255,255,.78); }
.block__label {
  font-family: var(--font-display); font-stretch: 125%;
  font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink); margin: 2rem 0 .85rem;
}
.section--navy .block__label { color: var(--accent); }
.block__actions { margin-top: 2rem; }
@media (max-width: 760px) {
  .block { grid-template-columns: 1fr; gap: 1rem; }
  .block__num { font-size: 3.4rem; }
}

/* elenco con marcatore geometrico */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: .85rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 11px; height: 11px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.section--navy .checklist li, .section--dark .checklist li { color: rgba(255, 255, 255, .82); }

/* ---------- split con media compositiva ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.split--wide-text { grid-template-columns: 1.1fr .9fr; }
.split__media { position: relative; }
.split__media img { width: 100%; box-shadow: var(--shadow); position: relative; z-index: 1; }
.split__media::before {
  content: ""; position: absolute; z-index: 0; right: -7%; top: -7%; width: 42%; aspect-ratio: 1;
  background: repeating-linear-gradient(135deg, var(--accent) 0 7px, transparent 7px 16px); opacity: .8;
}
.split__media--block::before {
  background: var(--accent); opacity: 1; right: auto; left: -7%; top: auto; bottom: -7%; width: 40%;
}
@media (max-width: 900px) {
  .split__media::before { right: -3%; top: -3%; width: 30%; }
  .split__media--block::before { left: -3%; bottom: -3%; width: 30%; }
  .split, .split--wide-text { grid-template-columns: 1fr; }
  .split__media { max-width: 520px; }
  .split--reverse .split__media { order: -1; }
}
@media (max-width: 560px) {
  /* niente sbordo laterale: lo scarto resta verticale, cosi' il quadrato si vede
     ancora senza farsi rasare dal margine della pagina. */
  .split__media::before { right: 0; top: -7%; width: 24%; }
  .split__media--block::before { right: auto; left: 0; bottom: -7%; top: auto; width: 24%; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.75rem 3.5rem 1.75rem 0; position: relative;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); line-height: 1.3; letter-spacing: -.018em; color: var(--navy);
  transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: .75rem; top: 2.15rem; width: 14px; height: 14px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item summary:hover { color: var(--accent-ink); }
.faq__answer { padding: 0 3.5rem 2rem 0; color: var(--muted); max-width: 68ch; }
/* Chromium tiene in layout il contenuto di un <details> chiuso (rect non nullo,
   display block): gli strumenti che misurano il contrasto lo leggono contro il
   fondo che capita sotto il viewport. Nascosto davvero, non c'e' niente da misurare. */
.faq__item:not([open]) > .faq__answer { display: none; }
.faq__group-title { margin: clamp(3rem, 2rem + 2vw, 4.5rem) 0 1.5rem; font-size: clamp(1.3rem, 1.15rem + .7vw, 1.75rem); }
.faq__group-title.mt-0 { margin-top: 0; }

/* ---------- contatti ---------- */
.contact { background: var(--navy-900); color: rgba(255, 255, 255, .82); position: relative; overflow: hidden; }
.contact::before {
  content: ""; position: absolute; left: -8%; bottom: -20%; width: 38%; aspect-ratio: 1;
  background: repeating-linear-gradient(135deg, rgba(243,146,0,.16) 0 10px, transparent 10px 26px);
}
.contact__grid { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: start; }
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } }
.contact h2 { color: #fff; }
.contact__intro { color: rgba(255, 255, 255, .78); font-size: 1.12rem; max-width: 46ch; }
.contact__direct { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.contact__direct a { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; }
.contact__direct a:hover { color: var(--accent); }
.contact__direct svg { flex: none; color: var(--accent); }

.form { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); box-shadow: var(--shadow-lg); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin-bottom: .45rem; }
.field .req { color: var(--accent-ink); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 1.02rem; color: var(--ink);
  padding: .85rem .95rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fcfdfe; transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 146, 0, .2); }
.field textarea { min-height: 124px; resize: vertical; }
/* NB: la freccia arriva da background-image e questa regola DEVE restare dopo
   la shorthand `background` di .field input/textarea/select, che altrimenti la
   azzera senza errori. Non spostare il blocco piu' in alto. */
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23626e87' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
  padding-right: 2.6rem; }
.field__opt { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.field--check { display: flex; gap: 1.35rem; align-items: flex-start; padding-left: .1rem; }
.field--check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; cursor: pointer;
  width: 44px; height: 44px; margin: -11px -11px -11px -11px; padding: 0; border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.75' y='.75' width='20.5' height='20.5' rx='2' fill='%23fcfdfe' stroke='%23dde3ec' stroke-width='1.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.field--check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.75' y='.75' width='20.5' height='20.5' rx='2' fill='%23f39200' stroke='%23f39200' stroke-width='1.5'/%3E%3Cpath d='M5.5 11.4l3.6 3.5 7.2-7.4' fill='none' stroke='%23243351' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.field--check input[type="checkbox"]:focus-visible { outline: 3px solid var(--accent); outline-offset: -8px; }
.field--check label { font-weight: 400; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0; line-height: 1.5; }
.form .btn { width: 100%; justify-content: center; margin-top: .6rem; }
.form__note { font-size: .85rem; color: var(--muted); margin-top: 1.1rem; line-height: 1.5; }
.form__status { margin-top: 1rem; padding: .95rem 1.1rem; border-radius: var(--radius); font-size: .95rem; display: none; }
.form__status[data-state="ok"] { display: block; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.form__status[data-state="error"] { display: block; background: #fdeaea; color: #a3282d; border: 1px solid #f3c3c3; }
.hp { position: absolute; left: -9999px; width: 44px; height: 88px; overflow: hidden; }
.hp input { width: 44px; height: 44px; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .62); padding: clamp(3rem, 2rem + 3vw, 5rem) 0 2.25rem; font-size: .98rem; border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.site-footer img { width: 230px; margin-bottom: 1.35rem; }
.site-footer h2 { color: #fff; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.15rem; font-weight: 600; line-height: 1.18; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .7rem; }
.site-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer__payoff { color: rgba(255, 255, 255, .5); max-width: 32ch; line-height: 1.6; }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; justify-content: space-between;
  font-size: .86rem; color: rgba(255, 255, 255, .6);
}
.site-footer__bottom a { color: rgba(255, 255, 255, .58); }

/* ---------- pagine legali ---------- */
.legal { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2rem, 1.5rem + 3vw, 4rem); }
.legal h1 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); }
.legal h2 { font-size: clamp(1.4rem, 1.25rem + .7vw, 1.85rem); margin-top: 3rem; }
.legal h3 { font-size: 1.2rem; margin-top: 2rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .96rem; }
.legal th, .legal td { text-align: left; padding: .8rem .9rem; border: 1px solid var(--line); vertical-align: top; }
.legal th { background: var(--bg-alt); font-weight: 600; color: var(--navy); }
.table-scroll { overflow-x: auto; }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: clamp(4.5rem, 3rem + 8vw, 10rem) 0; }
.error-page__code {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(5rem, 3rem + 11vw, 11rem); line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent-line); margin-bottom: 1rem;
}

/* ---------- utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: .7rem; }
.mt-md { margin-top: 1.75rem; }
.mt-lg { margin-top: 2.5rem; }
.mb-lg { margin-bottom: 2rem; }
.ml-sm { margin-left: .75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }


/* =========================================================================
   DESIGN SYSTEM GEOMETRICO — dal simbolo del marchio
   Il simbolo e' una D che contiene tre forme ascendenti tagliate a 45 gradi.
   Da li' vengono tre primitive usate in tutto il sito, e nient'altro:
     1. il taglio a 45 gradi sull'angolo   -> .cut / .cut--tr
     2. le barre crescenti                 -> .bars, .kpi__bars, .dash__bars
     3. la scala di colonne che sale       -> .rail, .tappe, .outcome
   L'arancione resta il colore della decisione: CTA, numeri, elemento attivo.
   Le superfici grandi sono navy o bianche.
   ========================================================================= */

:root {
  --cut: 18px;
  --cut-sm: 10px;
}

/* angolo tagliato in basso a destra (come le colonne del simbolo) */
.cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
}
/* angolo tagliato in alto a destra (come le barre arancioni del simbolo) */
.cut--tr {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* barre crescenti: la firma grafica del marchio */
.bars, .kpi__bars, .dash__bars, .bento__bars {
  display: flex; align-items: flex-end; gap: 3px; height: 34px;
}
.bars i, .kpi__bars i, .dash__bars i, .bento__bars i {
  flex: 1; height: var(--h); min-height: 4px; background: var(--accent-line);
  transform-origin: bottom; animation: bar-rise .7s cubic-bezier(.2,.7,.3,1) backwards;
}
.bars i:last-child, .kpi__bars i:last-child,
.dash__bars i:last-child, .bento__bars i:last-child { background: var(--accent); }
@keyframes bar-rise { from { transform: scaleY(.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bars i, .kpi__bars i, .dash__bars i, .bento__bars i { animation: none; }
}

/* ---------- hero composita ---------- */
.hero--composed .hero__grid { align-items: center; grid-template-columns: 1.32fr .68fr; }
.hero--composed .hero__text { padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.hero--composed .hero__kicker {
  display: block; font-family: var(--font-display); font-stretch: 125%;
  font-size: clamp(.78rem, .66rem + .3vw, .84rem); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 1.4rem;
}
.hero--composed .hero__title { letter-spacing: -.038em; }

.hero__stage { position: relative; align-self: stretch; display: flex; flex-direction: column;
  justify-content: center; padding: clamp(1rem, .5rem + 2vw, 2.5rem) 0; }
.hero__portrait {
  margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero__portrait::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 6px;
  background: var(--accent);
}

/* Fascia degli strumenti sotto la hero. Prima le quattro tessere erano in
   colonna, sovrapposte al ritratto: 440-460px di tessere contro una foto alta
   346-513px, ancorate allo stage e non alla foto. Coprivano volto e busto e
   sbordavano di 149-176px sotto l'immagine a ogni larghezza sopra i 940px.
   In orizzontale ci stanno tutte e quattro senza toccare la foto. */
.kpi-band { background: var(--navy); padding: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem) 0; }
.kpi-band__title {
  margin: 0 0 clamp(1.4rem, 1rem + 1.4vw, 2.15rem);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.1rem, .95rem + .75vw, 1.55rem); line-height: 1.28;
  letter-spacing: -.018em; color: #fff; max-width: 42ch;
  padding-left: 1rem; border-left: 3px solid var(--accent);
}
.kpi-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.65rem, .35rem + .8vw, 1.1rem);
}
.kpi {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 40px -26px rgba(20, 26, 41, .55);
  padding: .7rem .85rem .6rem; display: grid; gap: .12rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.kpi__label {
  font-family: var(--font-display); font-stretch: 125%; font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  /* «MARGINALITÀ» in maiuscolo spaziato e' un min-content di 153px: senza
     questo, a due colonne sotto i 336px di viewport la griglia esce dal wrap. */
  overflow-wrap: anywhere;
}
.kpi__value { font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: 1.02rem; color: var(--navy); line-height: 1.15; letter-spacing: -.01em; }
/* la scheda ora e' larga: senza un tetto le barre si stendono e smettono di
   leggersi come le forme ascendenti del simbolo. */
.kpi__bars { height: 26px; margin-top: .5rem; max-width: 132px; }
.kpi[data-delay="1"] i { animation-delay: .08s; }
.kpi[data-delay="2"] i { animation-delay: .16s; }
.kpi[data-delay="3"] i { animation-delay: .24s; }

@media (max-width: 940px) {
  .hero--composed .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { padding-top: 0; }
  .hero__portrait { aspect-ratio: 16 / 10; max-width: 560px; }
  .hero__portrait img { object-position: 50% 24%; }
}
/* 2x2 fino a 1024: su quattro colonne, sotto quella soglia, «Budget vs actual»
   va a capo e sfalsa i valori delle quattro schede. */
@media (max-width: 1024px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}
/* Sotto i 356px (iPhone SE 1a gen, Fold chiuso, zoom al 125%) due colonne
   spezzerebbero «MARGINALITÀ» a meta': una sola colonna. 356 e' misurato, non
   stimato: e' la prima larghezza a cui la parola sta su una riga. Qui la fascia
   non e' piu' nella hero, quindi l'incolonnamento non spinge piu' nulla fuori
   dalla prima lettura, che era la ragione del 2x2 su telefono. */
@media (max-width: 355px) {
  .kpi-strip { grid-template-columns: 1fr; }
}
/* Fra 941 e 1024 le due colonne rendono la scheda larga 430-460px: testo e
   barre in alto a sinistra lasciavano un vuoto sproporzionato a destra.
   Qui le barre vanno a fianco del testo, non sotto. */
/* 940.02 e non 941: a 940.5px (zoom desktop, display scalati) fra `max-width:
   940px` e `min-width: 941px` non si applica nessuna delle due. */
@media (min-width: 940.02px) and (max-width: 1024px) {
  .kpi { grid-template-columns: 1fr auto; align-items: center; column-gap: 1.25rem; }
  .kpi__label, .kpi__value { grid-column: 1; }
  /* larghezza esplicita: le barre sono un flex senza dimensione intrinseca,
     in una colonna `auto` collasserebbero a zero. */
  .kpi__bars { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; width: 132px; }
}
/* Ritocchi alla tessera sul telefono. Per il numero di colonne vedi il commento
   sopra il blocco a 355px: da li' in su restano 2x2, sotto vanno in colonna. */
@media (max-width: 420px) {
  .kpi { padding: .6rem .7rem .55rem; }
  .kpi__value { font-size: .95rem; }
}

.proof__num--sm { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); line-height: 1.25; }
.proof__num--sm a { color: var(--navy); text-decoration-color: var(--accent-line); }
.proof__num--sm a:hover { color: var(--accent-ink); }

/* ---------- cabina di comando ---------- */
.cabina__head { max-width: 780px; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.cabina__head h2 { color: #fff; }

.dash {
  background: linear-gradient(180deg, #fbfcfe 0%, #f2f5fa 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .65);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.dash__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem clamp(1rem, .7rem + 1.2vw, 1.6rem);
  background: var(--navy); color: #fff;
}
.dash__dot { width: 10px; height: 10px; background: var(--accent); flex: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.dash__title { font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: .95rem; letter-spacing: -.01em; }
.dash__meta { margin-left: auto; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-navy); }

.dash__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.dash__cell { background: #fff; padding: clamp(.95rem, .7rem + .8vw, 1.4rem); min-width: 0; }
.dash__cell--wide { grid-column: span 2; }
.dash__label {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: .92rem; color: var(--navy); margin: 0 0 .15rem; letter-spacing: -.01em;
}
.dash__sub { font-size: .78rem; color: var(--muted); margin: 0 0 .9rem; line-height: 1.35; }

.dash__line { width: 100%; height: 76px; display: block; }
.dash__area { fill: rgba(243, 146, 0, .12); }
.dash__stroke { fill: none; stroke: var(--accent); stroke-width: 1.6;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dash__stroke--pred { stroke: var(--navy-500); stroke-dasharray: 4 3; }
.dash__bars { height: 60px; }

.dash__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dash__rows li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center;
  gap: .6rem; margin: 0; font-size: .78rem; color: var(--muted); }
.dash__rows i { height: 10px; width: var(--w); background: var(--navy-700); display: block; }
.dash__rows li:first-child i { background: var(--accent); }

.dash__pairs { display: flex; align-items: flex-end; gap: .85rem; height: 60px; }
.dash__pairs i { flex: 1; position: relative; height: 100%; }
.dash__pairs i::before, .dash__pairs i::after {
  content: ""; position: absolute; bottom: 0; width: 42%;
}
.dash__pairs i::before { left: 0; height: var(--b); background: var(--line); }
.dash__pairs i::after { right: 0; height: var(--a); background: var(--accent); }

.gauge { display: block; }
.gauge__track { display: block; height: 10px; background: var(--line-soft); position: relative; }
.gauge__fill { position: absolute; inset: 0 42% 0 0; background: var(--navy-700); display: block; }
.gauge__track::after {
  content: ""; position: absolute; left: 58%; top: -5px; bottom: -5px; width: 2px;
  background: var(--accent);
}
.gauge__scale { display: block; margin-top: .55rem; font-size: .78rem; color: var(--muted);
  text-align: right; }
.gauge__scale em { font-style: normal; color: var(--accent-ink); font-weight: 600; }

.dash__foot {
  margin: 0; padding: .8rem clamp(1rem, .7rem + 1.2vw, 1.6rem);
  border-top: 1px solid var(--line); background: var(--bg-alt);
  font-size: .78rem; color: var(--muted);
}

.cabina__points {
  list-style: none; margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, .8rem + 1.5vw, 2.5rem);
}
.cabina__points li { margin: 0; padding-top: 1.1rem; border-top: 2px solid rgba(243, 146, 0, .5);
  color: rgba(255, 255, 255, .78); font-size: .98rem; line-height: 1.55; }
.cabina__points strong {
  display: block; color: var(--accent); font-family: var(--font-display); font-stretch: 125%;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .5rem;
}

@media (max-width: 1000px) {
  .dash__grid { grid-template-columns: repeat(2, 1fr); }
  .dash__cell--wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .dash__grid { grid-template-columns: 1fr; }
  .dash__cell--wide { grid-column: span 1; }
  .cabina__points { grid-template-columns: 1fr; }
}

/* ---------- bento ---------- */
.bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
}
.bento__cell:nth-child(2) { grid-column: span 2; }
.bento__cell {
  background: #fff; border: 1px solid var(--line); position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
}
.bento__cell:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-soft); }
.bento__cell--lead {
  grid-column: span 2; grid-row: span 2; background: var(--navy); border-color: var(--navy);
  --cut: 30px;
}
.bento__cell--lead h3 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.35rem); max-width: 16ch; }
.bento__cell--lead p { max-width: 44ch; }
.bento__cell--lead .bento__index { color: var(--accent); }
.bento__cell--lead .link-arrow { color: var(--accent); }
.bento__index {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: .8rem; letter-spacing: .2em; color: var(--accent-ink); margin: 0 0 1.5rem;
}
.bento__cell h3 { margin-bottom: .8rem; }
.bento__cell > p { color: var(--muted); font-size: 1rem; }
.bento__cell--lead > p { color: var(--on-navy); }
.bento__bars { height: 46px; margin: auto 0 1.5rem; max-width: 260px; }
.bento__cell--lead .bento__bars i { background: rgba(243, 146, 0, .45); }
.bento__cell--lead .bento__bars i:last-child { background: var(--accent); }
.bento__foot { margin: auto 0 0; padding-top: 1.5rem; }
.bento__more {
  margin: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem) 0 0; display: flex; flex-wrap: wrap;
  gap: 1rem 2.5rem; align-items: center;
}
.link-arrow--muted { color: var(--muted); font-weight: 400; }
.link-arrow--muted:hover { color: var(--accent-ink); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--lead { grid-column: span 2; grid-row: auto; }
  .bento__cell:nth-child(2) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--lead, .bento__cell:nth-child(2) { grid-column: span 1; }
}

/* ---------- casi ---------- */
.casi { display: grid; gap: clamp(1.25rem, .8rem + 1.5vw, 2rem); }
.caso {
  background: #fff; border: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(240px, .34fr) 1fr;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
}
.caso__head {
  container-type: inline-size;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  background: var(--navy-900); color: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.caso__head h3 {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); color: #fff;
  margin: auto 0 .35rem; padding-top: 1.4rem;
}
.caso__taglia { font-size: .9rem; color: var(--on-navy); margin: 0; line-height: 1.45; }
.caso__flag {
  margin: 0 0 1.1rem; font-size: .78rem; line-height: 1.4; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--accent);
  align-self: flex-start;
}
.caso__flow {
  display: grid; grid-template-columns: 1fr 1fr .9fr;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); gap: clamp(1.25rem, .8rem + 1.5vw, 2.25rem);
}
.caso__step { position: relative; }
.caso__step + .caso__step::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1.25rem, .8rem + 1.5vw, 2.25rem) / 2);
  top: .3rem; width: 9px; height: 9px; border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent); transform: translateX(-50%) rotate(45deg);
}
.caso__step-label {
  font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .85rem;
}
.caso__step ul { list-style: none; margin: 0; padding: 0; }
.caso__step li { position: relative; padding-left: 1.1rem; margin-bottom: .6rem;
  font-size: .95rem; color: var(--text); line-height: 1.5; }
.caso__step li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  background: var(--line); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.caso__metric {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  font-size: clamp(1.35rem, 13.5cqi, 2.9rem); line-height: 1.02; letter-spacing: -.04em;
  color: var(--accent); margin: 0; white-space: nowrap;
}
.caso__metric-label {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  font-weight: 600; margin: .55rem 0 .35rem;
}
.caso__metric-nota { font-size: .86rem; color: var(--on-navy); line-height: 1.45; margin: 0; }
.caso__dopo {
  font-size: .95rem; color: var(--navy); font-weight: 600; line-height: 1.45;
  margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
}
.caso__cta { margin: .9rem 0 0; }
.caso--nolink .caso__flow > .caso__step:last-child { display: flex; flex-direction: column; }
.caso--nolink .caso__dopo { margin-top: auto; }
.casi__nota {
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0; font-size: .88rem; line-height: 1.6;
  color: var(--muted); max-width: 68ch;
  border-left: 2px solid var(--line); padding-left: 1rem;
}

/* pagina di approfondimento di un caso */
.caso-hero__grid {
  display: grid; grid-template-columns: 1fr minmax(240px, .38fr);
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); align-items: start;
}
.caso-hero .caso__flag { color: var(--accent-ink); }
.caso-hero__metric {
  container-type: inline-size;
  background: var(--navy-900); color: #fff;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
}
.tabella { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 520px; }
.tabella th, .tabella td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.tabella thead th {
  font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--navy);
}
.tabella tbody th { font-weight: 600; color: var(--navy); }
.tabella tbody td:last-child { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 560px) {
  .tabella { min-width: 0; font-size: .95rem; }
  .tabella thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tabella tbody tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .tabella tbody tr:last-child { border-bottom: 0; }
  .tabella tbody th { display: block; padding: 0 0 .6rem; border-bottom: 0; }
  .tabella tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .25rem 0; border-bottom: 0; text-align: right;
  }
  .tabella tbody td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  }
}

/* i primi 60 giorni */
.fasi60 {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
}
.fase60 { padding-top: 1.4rem; border-top: 3px solid var(--line); position: relative; }
.fase60::before {
  content: ""; position: absolute; top: -3px; left: 0; width: 25%; height: 3px;
  background: var(--accent);
}
.fase60:nth-child(2)::before { width: 50%; }
.fase60:nth-child(3)::before { width: 75%; }
.fase60:nth-child(4)::before { width: 100%; }
.fase60__num {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1; letter-spacing: -.03em;
  color: var(--navy); margin: 0 0 .7rem;
}
.fase60__unita {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}
.fase60 h3 { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); margin-bottom: .5rem; }
.fase60 p:not(.fase60__num) { font-size: .94rem; color: var(--muted); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .fasi60 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fasi60 { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .caso-hero__grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .caso { grid-template-columns: 1fr; }
  .caso__head h3 { margin-top: 1.4rem; padding-top: 0; }
  .caso__head { border-right: 0; border-bottom: 1px solid var(--line); }
  .caso__flow { grid-template-columns: 1fr; }
  .caso__step + .caso__step::before {
    left: 0; top: calc(-1 * clamp(1.25rem, .8rem + 1.5vw, 2.25rem) / 2 - 4px);
    transform: rotate(135deg);
  }
}

/* ---------- timeline del metodo ---------- */
.timeline__grid { display: grid; grid-template-columns: minmax(220px, .3fr) 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.timeline__rail { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rail__item { margin: 0; }
.rail__item a {
  display: flex; align-items: baseline; gap: .9rem; text-decoration: none;
  padding: .55rem 0 .55rem 1rem; border-left: 2px solid var(--line);
  transition: border-color .3s ease;
}
.rail__num {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--line);
  transition: -webkit-text-stroke-color .35s ease;
}
.rail__key {
  font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  transition: color .35s ease;
}
.rail__item.is-active a { border-left-color: var(--accent); }
.rail__item.is-active .rail__num { -webkit-text-stroke-color: var(--accent); }
.rail__item.is-active .rail__key { color: var(--navy); }

.timeline__panels { display: flex; flex-direction: column; gap: clamp(3rem, 2rem + 5vw, 7rem); }
.phase { scroll-margin-top: calc(var(--header-h) + 2rem); }
.phase + .phase { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.phase__num {
  display: none; font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: 3.2rem; line-height: .85; letter-spacing: -.05em; margin: 0 0 .75rem;
  color: transparent; -webkit-text-stroke: 2px var(--accent);
}
.phase h3 { max-width: 26ch; }
.phase > p { color: var(--muted); max-width: 64ch; }

@media (max-width: 900px) {
  .timeline__grid { grid-template-columns: 1fr; gap: 0; }
  .timeline__rail { display: none; }
  .phase__num { display: block; }
}

/* ---------- esito del metodo: tre stati ---------- */
.outcome__chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, .8rem + 2vw, 3rem);
}
.outcome__state { margin: 0; position: relative; padding-top: 1.5rem;
  border-top: 3px solid rgba(255, 255, 255, .18); }
.outcome__state:nth-child(2) { border-top-color: rgba(243, 146, 0, .55); }
.outcome__state--to { border-top-color: var(--accent); }
.outcome__state + .outcome__state::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1.25rem, .8rem + 2vw, 3rem) / 2);
  top: -3px; width: 10px; height: 10px; border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent); transform: translate(-50%, -50%) rotate(45deg);
}
.outcome__tag {
  display: block; font-family: var(--font-display); font-stretch: 125%; font-size: .78rem;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .85rem;
}
.outcome__name {
  display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.025em;
  color: #fff; margin-bottom: .8rem;
}
.outcome__state--from .outcome__name { color: rgba(255, 255, 255, .62); }
.outcome__note { display: block; color: rgba(255, 255, 255, .72); font-size: .98rem; line-height: 1.55; }

@media (max-width: 820px) {
  .outcome__chain { grid-template-columns: 1fr; gap: 2rem; }
  .outcome__state + .outcome__state::before {
    left: 0; top: -3px; transform: translate(14px, -50%) rotate(135deg);
  }
}

/* ---------- chi sono: apertura editoriale ---------- */
.editorial__grid {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start;
}
.editorial__media { margin: 0; }
.editorial__frame { display: block; position: relative; }
.editorial__media img {
  width: 100%; box-shadow: var(--shadow); position: relative; z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.editorial__frame::before {
  content: ""; position: absolute; z-index: 0; left: -6%; bottom: -6%; width: 38%; aspect-ratio: 1;
  background: var(--accent);
}
.editorial__media figcaption {
  position: relative; z-index: 2; margin-top: 1.6rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.editorial__pull {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em;
  color: var(--navy); margin: 0 0 1.5rem; max-width: 20ch; text-wrap: balance;
}
.editorial__text > p:not(.editorial__pull):not(.eyebrow) { color: var(--muted); max-width: 60ch; }

.milestones {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.milestones li { margin: 0; padding-top: 1rem; border-top: 2px solid var(--line); position: relative; }
.milestones li:nth-child(1) { border-top-color: var(--accent-line); }
.milestones li:nth-child(2) { border-top-color: rgba(243, 146, 0, .7); }
.milestones li:nth-child(3) { border-top-color: var(--accent); }
.milestones__step {
  display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: 1rem; color: var(--navy); letter-spacing: -.01em; margin-bottom: .3rem;
}
.milestones__note { display: block; font-size: .86rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 900px) {
  .editorial__grid { grid-template-columns: 1fr; }
  .editorial__media { max-width: 460px; }
  .milestones { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- pagina chi sono: le tre tappe ---------- */
.tappe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.tappe li { margin: 0; }
.tappe__num {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem); line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent); margin: 0 0 1rem;
}
.tappe h2 { font-size: clamp(1.2rem, 1.1rem + .6vw, 1.55rem); margin-bottom: .6rem;
  line-height: 1.18; letter-spacing: -.018em; }
.tappe p:not(.tappe__num) { color: var(--muted); font-size: .98rem; }
@media (max-width: 820px) { .tappe { grid-template-columns: 1fr; } }

/* ---------- pagina di conferma ---------- */
.grazie { padding: clamp(4rem, 2.5rem + 7vw, 9rem) 0; }
.grazie__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; margin-bottom: 2rem; color: var(--navy);
  background: var(--accent-soft); border: 2px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.grazie__actions { justify-content: center; }
.grazie__note { margin-top: 2.5rem; font-size: .95rem; color: var(--muted); }

/* =========================================================================
   Rifiniture per il telefono
   Misurate su iPhone 390x844. Tre cose che su schermo stretto si vedevano:
   i pulsanti impilati avevano larghezze diverse, i titoli oversize mangiavano
   mezza schermata, i link del footer erano troppo vicini per il pollice.
   ========================================================================= */

@media (max-width: 560px) {
  .hero__actions, .statement__actions, .block__actions { display: grid; gap: .7rem; }
  .hero__actions .btn, .statement__actions .btn, .block__actions .btn {
    width: 100%; justify-content: center; text-align: center;
  }
  .ml-sm { margin-left: 0; }
}

@media (max-width: 620px) {
  :root { --section-y: clamp(3.25rem, 1.5rem + 6vw, 4.75rem); }
}

@media (max-width: 430px) {
  h1 { font-size: clamp(2.15rem, 1rem + 4.5vw, 2.6rem); }
  h2 { font-size: clamp(1.7rem, 1rem + 3.4vw, 2rem); }
}

@media (max-width: 760px) {
  /* I link delle liste del footer erano alti 36px: sotto la soglia dei 44px per
     il pollice. Restano esclusi quelli in coda (Privacy, Cookie, Tape Dynamics):
     sono link dentro una riga di testo, dove la soglia non si applica. */
  .site-footer__grid ul a { display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px; }
  .site-footer__grid ul li { margin-bottom: 0; }
}


/* =========================================================================
   Revisione V3 (settembre 2026): quattro lingue, Insights, autodiagnosi,
   Metodo in home. Stesse tre primitive del simbolo, nessun colore nuovo.
   ========================================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- selettore lingua ----------
   Desktop: la fila di sigle IT | EN | ES | RO. Telefono: un menu <details>
   con la sigla corrente che si apre sui nomi completi (V3 §4.2). Sono due
   rese dello stesso dato; il CSS ne mostra una sola. */
.lang-switch {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff;
}
.lang-switch > a, .lang-switch > .lang-switch__on {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .3rem;
  font-family: var(--font-display); font-stretch: 125%; font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-decoration: none; white-space: nowrap;
}
.lang-switch > * + * { border-left: 1px solid var(--line); }
.lang-switch > a { color: var(--navy); background: #fff; transition: background-color .18s ease, color .18s ease; }
.lang-switch > a:hover, .lang-switch > a:focus-visible { background: var(--bg-tint); color: var(--navy-900); }
.lang-switch__on { background: var(--navy); color: #fff; cursor: default; }

.lang-menu { display: none; position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: .3rem; min-width: 44px; min-height: 44px; padding: 0 .55rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  font-family: var(--font-display); font-stretch: 125%; font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; color: var(--navy);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: translateY(-2px) rotate(45deg);
}
.lang-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.lang-menu__list {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 120; min-width: 176px;
  list-style: none; margin: 0; padding: .35rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lang-menu__list li { margin: 0; }
.lang-menu__list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .9rem;
  font-weight: 600; font-size: .98rem; color: var(--navy); text-decoration: none; border-radius: var(--radius);
}
.lang-menu__list a:hover, .lang-menu__list a:focus-visible { background: var(--bg-tint); color: var(--navy-900); }

@media (max-width: 720px) {
  .lang-switch { display: none; }
  .lang-menu { display: block; }
}

/* suggerimento di lingua: una riga sotto l'header, mai un redirect */
.lang-hint { background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.lang-hint__row {
  width: min(100% - var(--gutter) * 2, var(--wrap)); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem;
  padding: .55rem 0; font-size: .95rem; color: var(--navy);
}
.lang-hint__row a { font-weight: 700; color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; }
.lang-hint__close {
  margin-left: auto; min-height: 44px; padding: 0 .75rem; border: 0; background: transparent;
  font: inherit; font-size: .9rem; color: var(--navy-700); cursor: pointer; text-decoration: underline;
  text-underline-offset: .2em;   /* --muted su --bg-tint fa 4,44:1: sotto soglia */
}
.lang-hint__close:hover { color: var(--accent-ink); }

/* ---------- metodo in home: le 4 fasi in una schermata ---------- */
.metodo-home .section__head h2 { max-width: 20ch; }
.fasi-home {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, .8rem + 2vw, 3rem);
}
.fase-home { margin: 0; position: relative; padding-top: 1.5rem; border-top: 3px solid rgba(255, 255, 255, .18); }
.fase-home:nth-child(1) { border-top-color: rgba(243, 146, 0, .4); }
.fase-home:nth-child(2) { border-top-color: rgba(243, 146, 0, .6); }
.fase-home:nth-child(3) { border-top-color: rgba(243, 146, 0, .8); }
.fase-home:nth-child(4) { border-top-color: var(--accent); }
.fase-home + .fase-home::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1.25rem, .8rem + 2vw, 3rem) / 2);
  top: -3px; width: 10px; height: 10px; border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent); transform: translate(-50%, -50%) rotate(45deg);
}
.fase-home__num {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent); margin: 0 0 .9rem;
}
.fase-home h3 { color: #fff; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .55rem; }
.fase-home p:not(.fase-home__num) { color: var(--on-navy); font-size: .98rem; line-height: 1.55; margin: 0; }
.metodo-home .statement__actions { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (max-width: 900px) { .fasi-home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .fasi-home { grid-template-columns: 1fr; gap: 1.75rem; }
  .fase-home + .fase-home::before { left: 0; top: -3px; transform: translate(14px, -50%) rotate(135deg); }
}
@media (max-width: 900px) and (min-width: 561px) {
  /* a due colonne la freccia fra la 2a e la 3a punterebbe nel vuoto */
  .fase-home:nth-child(3)::before { display: none; }
}

/* ---------- FAQ essenziali in home ---------- */
.faq-home { margin-inline: 0; }

/* ---------- fascia autodiagnosi in home ---------- */
.test-band__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.test-band h2 { max-width: 16ch; }
.test-band .lead { max-width: 46ch; }
.test-band__aree { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.test-band__aree li {
  display: flex; align-items: center; gap: 1rem; margin: 0; padding: .7rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 1.02rem;
}
.test-band__aree li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.test-band__aree span {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; color: var(--accent); flex: none; width: 2rem;
}
@media (max-width: 900px) { .test-band__grid { grid-template-columns: 1fr; } }

/* ---------- pagina autodiagnosi ---------- */
.test-scala { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; align-self: center; }
.test-scala li {
  margin: 0; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: baseline;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
}
.test-scala strong { font-family: var(--font-display); font-stretch: 125%; color: var(--navy); font-size: 1.02rem; }
.test-scala em { font-style: normal; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; justify-self: end; }
.test-scala span { grid-column: 1 / -1; font-size: .95rem; color: var(--muted); line-height: 1.5; margin-top: .25rem; }
.tappe--7 { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tappe--7 h3 { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); margin-bottom: .45rem; line-height: 1.2; }
.tappe--7 p:not(.tappe__num) { color: var(--muted); font-size: .94rem; }
.tappe--7 .tappe__num { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); }

.quiz { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.quiz__progress { margin-bottom: .25rem; }
.quiz__counter { font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.quiz__bar { height: 6px; background: var(--line); overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: var(--p, 14%); background: var(--accent); transition: width .3s cubic-bezier(.2,.7,.3,1); }
.quiz__questions { display: grid; }
.quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__q legend {
  padding: 0; font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); line-height: 1.18; letter-spacing: -.02em; color: var(--navy);
}
.quiz__n {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: .75rem;
}
.quiz__why { margin: 1.25rem 0 0; padding: 1rem 1.15rem; background: var(--bg-alt); border-left: 3px solid var(--accent); }
.quiz__why p { font-size: .97rem; color: var(--muted); margin: 0 0 .5rem; line-height: 1.55; }
.quiz__why p:last-child { margin: 0; }
.quiz__opts { display: grid; gap: .6rem; margin: 1.5rem 0 0; }
.quiz__opt {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  padding: .95rem 1.1rem; border: 1px solid var(--line); background: #fff; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.quiz__opt:hover { border-color: var(--navy-500); background: var(--bg-alt); }
.quiz__opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.quiz__mark {
  display: inline-flex; align-items: center; justify-content: center; min-width: 5.6rem; height: 2.2rem; padding: 0 .75rem;
  font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy); border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.quiz__text { line-height: 1.4; color: var(--ink); font-weight: 600; }
.quiz__text small { display: block; font-weight: 400; font-size: .84rem; color: var(--muted); margin-top: .15rem; }
.quiz__opt:has(input:checked) { border-color: var(--navy); background: var(--bg-tint); }
.quiz__opt:has(input:checked) .quiz__mark { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.quiz__opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.quiz__q[data-missing="true"] legend { color: var(--accent-ink); }
.quiz__q[data-missing="true"] .quiz__opt { border-color: var(--accent-line); }
.quiz__nav { display: flex; gap: .9rem; align-items: center; }
.quiz__nav [data-quiz-next] { margin-left: auto; }
@media (max-width: 560px) {
  .quiz__nav { flex-direction: column-reverse; align-items: stretch; }
  .quiz__nav .btn { width: 100%; justify-content: center; }
  .quiz__nav [data-quiz-next] { margin-left: 0; }
  .quiz__opt { grid-template-columns: 1fr; gap: .5rem; }
}
.quiz__gate {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bg-alt); border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.quiz__gate h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: .5rem; }
.quiz__gate > p { color: var(--muted); margin-bottom: 1.5rem; }
.quiz__gate .form__row { margin-bottom: 0; }
.quiz__gate .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.quiz__result { margin-top: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: calc(var(--header-h) + 2rem); }
.result__score {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(3.4rem, 2rem + 6vw, 6.5rem); line-height: 1; letter-spacing: -.05em; color: var(--navy); margin: 0 0 1.5rem;
}
.result__score em { font-style: normal; font-size: clamp(1.2rem, .8rem + 1.4vw, 1.9rem); color: var(--muted); letter-spacing: 0; margin-left: .2rem; }
.result { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--navy-900); color: rgba(255, 255, 255, .84);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.result__range { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.result h3 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); margin-bottom: .75rem; }
.result p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.result__priority { margin-top: 1.75rem; padding: 1.25rem 1.35rem; border-left: 3px solid var(--accent); background: var(--bg-alt); }
.result__priority p:last-child { color: var(--ink); font-weight: 600; }
.quiz__result .hero__actions { margin-top: 2rem; }

/* ---------- Insights ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.chip {
  min-height: 44px; padding: 0 1.05rem; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-display); font-stretch: 125%; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.post-card {
  background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.post-card__body h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); margin-bottom: .7rem; }
.post-card__body h3 a { color: var(--navy); text-decoration: none; }
.post-card__body h3 a:hover { color: var(--accent-ink); }
.post-card__body > p { color: var(--muted); font-size: .98rem; }
.post-card__body .link-arrow { margin-top: auto; padding-top: 1.25rem; }
.post-card__meta, .post__meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0 0 .85rem;
  font-size: .82rem; letter-spacing: .04em; color: var(--muted);
}
.post__cat {
  font-family: var(--font-display); font-stretch: 125%; font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
}
.post-feed { margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-size: .9rem; }
.post-feed a { color: var(--muted); }

.post-hero .lead { max-width: 60ch; }
.post__meta--hero { margin-top: 1.5rem; align-items: center; gap: .5rem 1.25rem; }
.post__meta-inner { margin: 0; display: contents; }
.post__author { font-weight: 600; color: var(--navy); }
.post__figure { margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.post__figure img { width: 100%; box-shadow: var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.post__body { font-size: 1.12rem; line-height: 1.7; }
.post__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-top: 2.25em; margin-bottom: .6em; }
.post__body h3 { font-size: clamp(1.2rem, 1.1rem + .6vw, 1.5rem); margin-top: 1.8em; }
.post__body p { margin-bottom: 1.25em; }
.post__body ul, .post__body ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.post__body li { margin-bottom: .55em; }
.post__body blockquote { margin: 2em 0; padding: .25rem 0 .25rem 1.5rem; border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-stretch: 125%; font-size: 1.2rem; color: var(--navy); }
.post__body table { width: 100%; border-collapse: collapse; margin: 1.75em 0; font-size: .98rem; }
.post__body th, .post__body td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.post__body thead th { font-family: var(--font-display); font-stretch: 125%; font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--navy); }
.post__body td:last-child, .post__body th:last-child { text-align: right; }
.post__body td:last-child { white-space: nowrap; }
@media (max-width: 560px) { .post__body table { font-size: .92rem; } .post__body th, .post__body td { padding: .65rem .5rem; } }
.post__body tbody tr:last-child td, .post__body tbody tr:last-child th { border-bottom: 0; }
.post__body strong { color: var(--ink); }
.post__body em:last-child { color: var(--muted); }
/* Box dei testi del cliente (IN BREVE, ESEMPIO ILLUSTRATIVO, ERRORE FREQUENTE, LA DECISIONE…),
   tabelle con testo nell'ultima colonna, CTA dentro l'articolo */
.post__box { margin: 2em 0; padding: 1.25rem 1.5rem; background: var(--bg-alt); border-left: 3px solid var(--accent); }
.post__box > :last-child { margin-bottom: 0; }
.post__body .post__box-label { margin-bottom: .5em; font-family: var(--font-display); font-stretch: 125%; font-size: .76rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.post__table-testo td:last-child, .post__table-testo th:last-child { text-align: left; white-space: normal; }
.post__cta { margin: 2.5em 0 2em; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.post__cta .hero__actions { margin-top: 1.25rem; }
.post__share { margin: 2.5rem 0 0; font-size: .9rem; color: var(--muted); }
.post__share a { font-weight: 600; color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; }
.post__next { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
.post__next .hero__actions { margin-top: 0; }

.author {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg-alt); border: 1px solid var(--line);
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); align-items: start;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.author img { width: 120px; height: 150px; object-fit: cover; object-position: 50% 15%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.author h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin-bottom: .6rem; }
.author p { color: var(--muted); font-size: .98rem; }
.author__links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-top: .5rem; }
@media (max-width: 560px) {
  .author { grid-template-columns: 1fr; }
  .author img { width: 96px; height: 120px; }
}
.post-grid--single .post-card { grid-column: 1 / -1; display: grid; grid-template-columns: .85fr 1.15fr; }
.post-grid--single .post-card__media { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 720px) { .post-grid--single .post-card { grid-template-columns: 1fr; } .post-grid--single .post-card__media { aspect-ratio: 3 / 2; } }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }


/* GENERATO da build.py: i valori delle barre (erano attributi style,
   che la CSP blocca). Non modificare a mano. */
.v-a-61 { --a:61%; }
.v-a-66 { --a:66%; }
.v-a-70 { --a:70%; }
.v-a-84 { --a:84%; }
.v-b-58 { --b:58%; }
.v-b-62 { --b:62%; }
.v-b-74 { --b:74%; }
.v-b-80 { --b:80%; }
.v-h-38 { --h:38%; }
.v-h-44 { --h:44%; }
.v-h-48 { --h:48%; }
.v-h-52 { --h:52%; }
.v-h-55 { --h:55%; }
.v-h-58 { --h:58%; }
.v-h-61 { --h:61%; }
.v-h-62 { --h:62%; }
.v-h-66 { --h:66%; }
.v-h-69 { --h:69%; }
.v-h-70 { --h:70%; }
.v-h-74 { --h:74%; }
.v-h-80 { --h:80%; }
.v-w-33 { --w:33%; }
.v-w-54 { --w:54%; }
.v-w-78 { --w:78%; }