/* HomeEdge, anteprima v3: come-funziona.html, il «retro del palcoscenico»: preciso, fermo, leggibile. */
.cf-testata { position: relative; padding-block: 72px 56px; overflow: hidden; border-bottom: 1px solid var(--he-linea-sottile); }
.cf-testata__cielo { position: absolute; left: 0; right: 0; top: 16px; height: 140px; opacity: .55; pointer-events: none; }
.arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arco path { fill: none; stroke: var(--he-accento); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; vector-effect: non-scaling-stroke; }
.cf-testata__griglia { position: relative; display: grid; gap: 40px; }
.cf-testata__testo { display: grid; gap: 20px; align-content: end; }
.indice__et { font-size: .875rem; color: var(--he-testo-secondario); margin-bottom: 8px; }
.indice ol { display: flex; flex-wrap: wrap; gap: 8px; }
.indice a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; border-radius: var(--r2); box-shadow: inset 0 0 0 1px var(--he-linea-sottile); color: var(--he-testo-forte); text-decoration: none; line-height: 1.3; }
.indice a[aria-current] { box-shadow: inset 0 0 0 1.5px var(--he-accento-ui); color: var(--he-titolo-accento); }
.tetto { width: 20px; height: 12px; flex: none; color: var(--he-accento); overflow: visible; }
.tetto path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .indice a:hover { color: var(--he-titolo-accento); box-shadow: inset 0 0 0 1.5px var(--he-accento-ui); } }
.cf-testata__testo { max-width: 52rem; }
.cf-lato { padding-top: 32px; }
@media (min-width: 1000px) {
  .cf-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0 56px; align-items: start; }
  .cf-lato { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); padding-top: 64px; }
  .cf-testo { grid-column: 1; grid-row: 1; min-width: 0; }
  .indice ol { display: grid; gap: 0; border-top: 1px solid var(--he-linea-sottile); }
  .indice li { border-bottom: 1px solid var(--he-linea-sottile); }
  .indice a { display: flex; box-shadow: none; padding: 8px; border-radius: 0; }
  .indice a[aria-current] { box-shadow: inset 3px 0 0 var(--he-accento-ui); }
}

.cf-corpo { padding-bottom: var(--sez-pad); }
.blocco { display: grid; gap: 20px; padding-top: 88px; }
.blocco > .h2 { max-width: 24ch; }
.blocco .h3 { margin-top: 16px; }
.riquadro { border: 1.5px dashed var(--he-accento-ui); border-radius: var(--r2); padding: 20px 24px; color: var(--he-testo-forte); max-width: 62ch; }
div.riquadro { display: grid; gap: 8px; }
.limiti { padding-top: 64px; }
.due, .tre { display: grid; gap: 32px; }
.due > div, .tre > div, .testo { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1000px) { .due { grid-template-columns: 1fr 1fr; gap: 48px; } .tre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.elenco { display: grid; gap: 0; max-width: 62ch; }
.elenco li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--he-linea-sottile); }
.elenco li::before { content: ""; position: absolute; left: 3px; top: 21px; width: 9px; height: 9px; border-left: 1.5px solid var(--he-accento); border-top: 1.5px solid var(--he-accento); transform: rotate(45deg); }
.didascalia.sotto { margin-top: -8px; }
.voce-nome { color: var(--he-titolo-accento); margin-bottom: -8px; }

/* aree */
.aree { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--he-linea-sottile); }
.area { display: grid; grid-template-columns: 40px 1fr; gap: 6px 18px; padding: 22px 0; border-bottom: 1px solid var(--he-linea-sottile); align-content: start; }
.area .ic { grid-row: 1 / 3; width: 40px; height: 40px; color: var(--he-accento-ui); }
.area p { font-size: .9375rem; line-height: 1.6; }
@media (min-width: 800px) { .aree { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1200px) { .aree { grid-template-columns: repeat(3, 1fr); } }
html.moto .area:not(.is-in) .ic :is(path, circle) { stroke-dashoffset: 1; }
.area .ic :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-uscita); }
.numeri { display: grid; gap: 12px; margin-top: 24px; }
.numeri__lista { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.numeri__lista li { display: grid; }
.numero { font-size: 3rem; line-height: 1.05; color: var(--he-testo-forte); }

/* sei passi */
.passi__griglia { display: grid; gap: 40px; margin-top: 8px; }
.fasi { position: relative; display: grid; gap: 28px; }
.fasi::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 1.5px; background: var(--he-linea-sottile); }
.fase { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 20px; }
.nodo { position: relative; width: 28px; height: 28px; background: var(--he-fondo); }
.nodo path { fill: none; stroke: var(--he-accento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-uscita) 120ms; }
html.moto .fase:not(.is-in) .nodo path { stroke-dashoffset: 1; }
.fase__corpo { display: grid; gap: 10px; }
details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--he-titolo-accento); list-style: none; user-select: none; -webkit-user-select: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 200ms var(--ease-uscita); }
details[open] > summary::before { transform: rotate(45deg); }
details > p { padding: 0 0 12px 18px; max-width: 62ch; }
.passi__foto .colmo__vetro { aspect-ratio: 1 / 1; }
.passi__foto figcaption { margin-top: 10px; }
@media (min-width: 1000px) { .passi__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; } .passi__foto { position: sticky; top: calc(var(--header-h) + 32px); } }

/* tabella dei servizi */
.tabella-guscio { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.tabella th, .tabella td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--he-linea-sottile); }
.tabella thead th { font-weight: 400; color: var(--he-testo-secondario); font-size: .875rem; }
.tabella tbody th { font-weight: 400; color: var(--he-testo-forte); }
.cella-et { display: none; color: var(--he-testo-secondario); }
@media (width < 800px) {
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella th, .tabella td { display: block; width: auto; }
  .tabella tr { padding: 12px 0; border-bottom: 1px solid var(--he-linea-sottile); }
  .tabella th, .tabella td { border: 0; padding: 2px 0; }
  .cella-et { display: inline; }
}

/* assistente */
.elenco--funzioni { margin-top: 4px; }
.esempio { display: grid; gap: 14px; margin-top: 16px; padding: 28px; border-radius: var(--r2); background: var(--he-fondo-alt); max-width: 62ch; }
.scambio { display: grid; gap: 4px; }
.riga--tu { font-size: 1.25rem; line-height: 1.35; color: var(--he-testo-forte); }
.riga--ass { color: var(--he-testo-secondario); }
.tappe { display: grid; gap: 12px; counter-reset: tappa; }
.tappa { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: var(--r2); box-shadow: inset 0 0 0 1px var(--he-linea-sottile); }
.tappa--esterno { box-shadow: inset 0 0 0 1.5px var(--he-accento-ui); }
.tappa__luogo { font-size: .875rem; color: var(--he-titolo-accento); }
@media (min-width: 1000px) { .tappe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tappe { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tappa { overflow-wrap: break-word; hyphens: auto; }

/* domande */
.domande { display: grid; border-top: 1px solid var(--he-linea-sottile); max-width: 72ch; }
.domanda { border-bottom: 1px solid var(--he-linea-sottile); }
.domanda summary { padding-block: 10px; color: var(--he-testo-forte); font-size: 1.125rem; line-height: 1.4; }
.domanda summary::before { color: var(--he-accento-ui); }

/* contatti */
.cf-contatti { background: #006085; padding-block: var(--sez-pad);
  --he-titolo-accento: #FFFFFF; --he-accento-ui: #FFFFFF; --he-link: #FFFFFF; --he-link-hover: #EBF8FD; --he-testo-secondario: #EBF8FD; --he-linea-sottile: rgba(255, 255, 255, .35); }
.cf-contatti__griglia { display: grid; gap: 40px; }
.cf-contatti__testo { display: grid; gap: 16px; align-content: start; }
.cf-contatti__azioni { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.recapiti { display: grid; gap: 16px; align-content: start; }
.recapiti dt { font-size: .875rem; color: #EBF8FD; }
.recapiti dd { margin: 0; }
.recapiti a { display: inline-flex; align-items: center; min-height: 44px; }
.cf-contatti :focus-visible { outline-color: #FFFFFF; }
@media (min-width: 1000px) { .cf-contatti__griglia { grid-template-columns: 7fr 5fr; gap: 64px; } }
@media (width < 800px) { .cf-contatti__azioni { flex-direction: column; } .cf-contatti__azioni .btn { width: 100%; } }