/* Pagina della demo, privacy e termini: si appoggiano a guida.css (barra, piede, testa) e aggiungono il modulo e il testo legale. */
:root { --bordo-forte: #b9c2cc; --positivo: #1f7a4d; }

/* demo: il piano scelto a sinistra, il modulo a destra */
.sc { padding: 72px 0 104px; }
.sc .w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.sc.solo .w { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.piano { position: sticky; top: 104px; padding: 32px; border-radius: 16px; background: var(--primario); color: #fff; }
.piano .et { font-size: 14px; font-weight: 600; color: var(--accento); }
.piano h2 { margin-top: 10px; color: #fff; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; font-weight: 800; }
.piano .pr { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.piano .eur { font: 800 clamp(48px, 5vw, 64px)/1 var(--titoli); letter-spacing: -.04em; color: var(--accento); }
.piano .mo { font-size: 17px; color: #d5e0ea; }
.piano .pd { margin-top: 16px; color: #e3ebf2; }
.piano ul { margin-top: 20px; display: grid; gap: 10px; }
.piano li { position: relative; padding-left: 28px; }
.piano li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border: solid var(--accento); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.piano .nota { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .18); font-size: 14px; line-height: 1.5; color: #c5d3df; }
.piano .cambia { display: inline-block; margin-top: 18px; font-weight: 600; color: #fff; text-underline-offset: 3px; }

.modulo h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; font-weight: 800; }
.modulo > p { margin-top: 14px; max-width: 36em; color: var(--secondario); }
.wl-form { margin-top: 28px; display: grid; gap: 18px; }
.wl-row { display: grid; gap: 6px; }
.wl-row label { font-size: 15px; font-weight: 600; }
.wl-row input, .wl-row select { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--bordo-forte); border-radius: 8px; background: #fff; color: var(--testo); font: 400 17px/1 var(--font); transition: border-color .15s, box-shadow .15s; }
.wl-row select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234f5b69' stroke-width='2'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) 50%; }
.wl-row input:focus, .wl-row select:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgb(11 61 102 / .2); }
.wl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--secondario); cursor: pointer; }
.wl-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primario); }
.wl-consent a { color: var(--primario); font-weight: 600; text-underline-offset: 3px; }
.wl-form .btn { justify-self: start; height: 56px; padding: 0 28px; font-size: 17px; }
.wl-form .btn svg { width: 18px; height: 18px; }
.wl-status { min-height: 1.5em; font-size: 15px; font-weight: 600; }
.wl-status[data-kind="ok"] { color: var(--positivo); } .wl-status[data-kind="err"] { color: #8a2a1d; }
.wl-form.is-done .wl-row, .wl-form.is-done .wl-consent, .wl-form.is-done .wl-two { display: none; }

/* privacy e termini: una colonna di testo */
.doc { padding: 72px 0 104px; }
.doc .art { max-width: 720px; }
.doc .data { margin-top: 48px; font-size: 15px; color: var(--secondario); }

@media (max-width: 1000px) {
  .sc .w { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .piano { position: static; }
}
@media (max-width: 640px) {
  .sc, .doc { padding: 40px 0 72px; }
  .piano { padding: 24px; }
  .wl-two { grid-template-columns: minmax(0, 1fr); }
  .wl-form .btn { justify-self: stretch; }
}
