/* demo-form: the demo request in three steps, glass over glass. Needs ../base/base.css, and ../glass-field/ behind the
   page (.fisso).
   The demo request, shaped like corgi.insure/get-insured (Tommi, 2026-09-29): how big the company is, four cards,
   one wide button; then only the company and the work email, no name (Tommi, same day); then thanks. No "what
   to train": the platform trains everything, so the answers would exclude each other (Tommi, same day). */
.demo{min-height:100svh;display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:clamp(40px,7vw,120px);align-items:center;padding:150px 0 90px}
.passo[hidden]{display:none}
.h1{font-family:var(--serif);font-size:clamp(44px,4.8vw,72px);font-weight:400;line-height:.98;letter-spacing:-.025em}
.sotto{margin-top:16px;color:var(--dim);font-size:calc(16 * var(--px))}
.scelte{display:grid;gap:14px;margin-top:40px}
/* the choices and the fields are glass over the page's glass (adrcenter.com) */
.scelta{display:flex;align-items:center;gap:22px;width:100%;text-align:left;padding:22px 24px;border-radius:16px;background:linear-gradient(180deg,oklch(100% 0 0/.11),oklch(100% 0 0/.04));-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);border:1px solid oklch(100% 0 0/.13);box-shadow:inset 0 1px 0 oklch(100% 0 0/.18);transition:border-color .2s,background .2s,transform .2s var(--e-out)}
.scelta:hover{border-color:oklch(100% 0 0/.24);background:oklch(100% 0 0/.14)}
.scelta:active{transform:translateY(1px)}
.scelta[aria-checked="true"]{border-color:var(--blu-t);background:oklch(55% .2 262/.26)}
.scelta svg{width:26px;height:26px;flex:none;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scelta b{display:block;font-size:calc(17 * var(--px));font-weight:500}
.scelta span{display:block;margin-top:4px;color:var(--dim);font-size:calc(14.5 * var(--px))}
.vai{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;margin-top:28px;border-radius:16px;background:oklch(99% 0 0);color:oklch(18% .06 262);font-size:calc(17 * var(--px));font-weight:600;transition:opacity .2s,transform .2s var(--e-out),background .2s}
.vai:hover{background:oklch(94% .02 255)}.vai:active{transform:translateY(1px)}
.vai:disabled{opacity:.35;cursor:default}
.vai svg,.indietro svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.campi{display:grid;gap:14px;margin-top:36px}
.campo{display:grid;gap:8px;font-size:calc(13.5 * var(--px));color:var(--dim)}
.campo input,.campo textarea{height:52px;padding:0 16px;border-radius:14px;background:oklch(100% 0 0/.07);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);border:1px solid oklch(100% 0 0/.14);color:var(--ink);font:inherit;font-size:calc(16 * var(--px));outline:none;transition:border-color .2s}
.campo input:focus,.campo textarea:focus{border-color:var(--blu-t)}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:#ff8a8a}
.campo textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical;line-height:1.45}
.campo .facoltativo{color:var(--mute)}
.indietro{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--mute);font-size:calc(14 * var(--px))}
.indietro:hover{color:var(--ink)}
.errore{margin-top:14px;color:#ff9f9f;font-size:calc(14 * var(--px));min-height:1.5em}
/* beside the form, what the half hour gives you (Edflex's demo page shape, Tommi 2026-09-30): three things, each
   with a tick, no avatar picture */
.demo-side{justify-self:center;width:min(460px,100%)}
.demo-side h2{font-family:var(--serif);font-size:clamp(36px,2.8vw + 12px,54px);font-weight:400;line-height:1;letter-spacing:-.022em;text-wrap:balance}
.demo-side>p{margin-top:12px;color:var(--ink-2);font-size:calc(17 * var(--px));line-height:1.45;text-wrap:pretty}
.benefits{list-style:none;padding:0;display:grid;gap:12px;margin-top:28px}
.benefit{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;padding:20px 22px;border-radius:18px;background:linear-gradient(180deg,oklch(22% .06 262/.7),oklch(14% .05 262/.78));-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.16),inset 0 0 0 1px oklch(100% 0 0/.1)}
.benefit svg{grid-row:span 2;width:26px;height:26px;fill:none;stroke:var(--blu-t);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.benefit b{font-size:calc(18 * var(--px));font-weight:620;letter-spacing:-.016em}
.benefit span{color:var(--ink-2);font-size:calc(15.5 * var(--px));line-height:1.45;text-wrap:pretty}
@media (max-width:900px){
  .demo{grid-template-columns:1fr;padding:118px 0 64px;min-height:0}
  .demo-side{justify-self:stretch;width:auto;margin-top:8px}
  }