/* ============================================================
   Tappito — Design System v3 — parte 4 di 4
   I file sono spezzati e tenuti sotto i 16 KB: il proxy Aruba
   tronca a 16384 byte le risposte piu' grandi (vedi CLAUDE.md).
   Vanno caricati in ordine: la cascata dipende dalla sequenza.
   ============================================================ */
.path {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--tone, var(--blue));
    border-radius: var(--r);
    padding: 28px 26px 30px;
    box-shadow: var(--sh-sm);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.path:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.path-tag {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
    padding: 5px 12px; margin-bottom: 15px;
    border-radius: var(--r-pill);
    background: var(--tone-soft, var(--blue-soft));
    color: var(--tone, var(--blue));
    font-size: .71rem; font-weight: 700; font-stretch: 88%;
    letter-spacing: .09em; text-transform: uppercase;
}
.path h3 { font-size: 1.18rem; letter-spacing: -0.025em; }
.path > p { margin-top: 10px; color: var(--text-2); font-size: .93rem; }

.path ol { margin-top: 20px; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 13px; }
.path ol li {
    counter-increment: p;
    display: grid; grid-template-columns: 25px 1fr; gap: 12px;
    align-items: start;
    font-size: .91rem; color: var(--text);
}
.path ol li::before {
    content: counter(p);
    width: 25px; height: 25px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tone-soft, var(--blue-soft));
    color: var(--tone, var(--blue));
    font-family: var(--mono); font-size: .72rem; font-weight: 700;
}
.path-foot {
    margin-top: auto; padding-top: 20px;
    font-size: .82rem; color: var(--text-3);
    display: flex; align-items: center; gap: 8px;
}
.path-foot svg { color: var(--tone, var(--blue)); flex-shrink: 0; }

/* ---- Sezione a due colonne testo + elenco ---- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.split-visual {
    display: grid; gap: 12px;
    background: linear-gradient(160deg, var(--tone-soft, var(--blue-soft)), var(--paper) 72%);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(22px, 3vw, 32px);
}

/* Canali di notifica */
.chan {
    display: flex; align-items: center; gap: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 15px 17px;
    box-shadow: var(--sh-sm);
    color: var(--text);
}
.chan-ico {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--paper-2); color: var(--text-2);
}
.chan b { display: block; font-size: .94rem; font-weight: 600; letter-spacing: -0.015em; }
.chan small { display: block; font-size: .8rem; color: var(--text-2); line-height: 1.45; }

/* La sezione tecnologia scura riusata sulle pagine di dettaglio:
   il tono di settore colora l'icona senza invadere il resto. */
.section-ink .tech-ico { background: color-mix(in srgb, var(--tone, var(--blue)) 26%, transparent); }

@media (max-width: 1080px) {
    .page-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .paths { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .page-hero { padding-top: 108px; }
}

/* ============================================================
   IL GESTO — il braccialetto che tocca il telefono

   Sostituto vettoriale del filmato, finche' non c'e' il girato:
   poche centinaia di byte invece di megabyte, nitido a ogni
   risoluzione e senza i limiti di riproduzione automatica che
   i browser mobili impongono ai video.

   Un solo ciclo di 4,6 s: il braccialetto entra da sinistra,
   appoggia sul telefono, la conferma compare, il braccialetto
   esce. La durata e' la stessa con cui il telefono cambia
   contesto, cosi' i due movimenti restano in fase.
   ============================================================ */
.tap-band {
    position: absolute;
    left: 50%; top: 21%;
    width: 132px;
    margin-left: -286px;
    z-index: 3;
    opacity: 0;
    filter: drop-shadow(0 20px 26px rgba(0,0,0,.55));
    animation: gesto-braccialetto 4.6s cubic-bezier(.42,0,.28,1) infinite;
}
@keyframes gesto-braccialetto {
    0%   { opacity: 0; transform: translate(-24px, 40px) rotate(-16deg); }
    12%  { opacity: 1; }
    32%  { opacity: 1; transform: translate(126px, 4px) rotate(-7deg); }
    50%  { opacity: 1; transform: translate(126px, 4px) rotate(-7deg); }
    70%  { opacity: 0; transform: translate(-24px, 40px) rotate(-16deg); }
    100% { opacity: 0; transform: translate(-24px, 40px) rotate(-16deg); }
}

.tap-ok {
    position: absolute;
    left: 50%; top: 43%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px;
    border-radius: var(--r-pill);
    background: #0E9F76; color: #fff;
    font-size: .76rem; font-weight: 700; font-stretch: 90%;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 12px 30px -8px rgba(14,159,118,.75);
    opacity: 0;
    animation: gesto-conferma 4.6s ease infinite;
}
@keyframes gesto-conferma {
    0%, 30%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.94); }
    38%       { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    56%       { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    66%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); }
}

/* Chi ha chiesto meno movimento vede la scena ferma al contatto,
   non un elemento bloccato a meta' corsa. */
@media (prefers-reduced-motion: reduce) {
    .tap-band { opacity: 1; transform: translate(126px, 4px) rotate(-7deg); }
    .tap-ok   { opacity: 1; transform: translateX(-50%); }
}

@media (max-width: 620px) {
    .tap-band { width: 98px; margin-left: -212px; }
    .tap-ok   { font-size: .7rem; padding: 7px 12px; }
}

/* ============================================================
   CLAIM SOTTO L'H1
   Recupera la frase che prima era il titolo: il titolo ora dice
   di cosa si tratta, il claim dice perche' interessa.
   ============================================================ */
.page-hero .hero-claim {
    margin-top: 16px;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    font-weight: 600; font-stretch: 96%;
    letter-spacing: -0.015em;
    color: color-mix(in srgb, var(--tone, var(--blue)) 55%, #FFFFFF);
}

/* ============================================================
   FORM CONTATTI
   Vive dentro la fascia scura .cta: i campi sono chiari su fondo
   scuro, per staccare il modulo dal fondo senza inventare colori.
   ============================================================ */
.cta-form-grid {
    max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(38px, 5vw, 72px);
    align-items: center;
    text-align: left;
}
.cta-form-grid h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 800; letter-spacing: -0.038em; line-height: 1.08;
}
.cta-form-grid > div > p {
    margin-top: 18px;
    color: var(--on-ink-2);
    font-size: 1.04rem; line-height: 1.62;
    max-width: 34em;
}
.cta-punti { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.cta-punti li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: .95rem; color: var(--on-ink-2);
}
.cta-punti svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.cta-punti a { color: #fff; text-underline-offset: 3px; }

.lead-form {
    background: var(--paper);
    color: var(--text);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: var(--sh-lg);
    display: grid; gap: 15px;
}
.lead-form-h {
    font-size: 1.16rem; font-weight: 800; font-stretch: 96%;
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}
.f-due { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.f { display: grid; gap: 7px; }
.f > span {
    font-size: .84rem; font-weight: 600;
    color: var(--text-2);
}
.f input, .f select {
    width: 100%;
    font: inherit; font-size: .97rem; color: var(--text);
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    transition: border-color .18s, box-shadow .18s;
}
.f select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355617A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.f input:focus, .f select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37,71,240,.14);
}
.f input[aria-invalid="true"], .f select[aria-invalid="true"] {
    border-color: #D9342B;
    box-shadow: 0 0 0 4px rgba(217,52,43,.12);
}
.f-err:empty { display: none; }
.f-err {
    margin-top: 6px;
    font-size: .82rem; font-weight: 600;
    color: #C22B22;
}

.f-check {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: .88rem; line-height: 1.5; color: var(--text-2);
    cursor: pointer;
}
.f-check input {
    flex-shrink: 0;
    width: 19px; height: 19px; margin-top: 1px;
    accent-color: var(--blue);
    cursor: pointer;
}
.f-check a { color: var(--blue); font-weight: 600; }
.f-check input[aria-invalid="true"] { outline: 2px solid #D9342B; outline-offset: 2px; }

/* Il campo esca non deve essere raggiungibile ne' leggibile: display:none
   lo farebbe saltare a qualche bot, questo lo toglie di mezzo lasciandolo
   nel DOM come un campo qualsiasi. */
.f-esca {
    position: absolute !important;
    left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}
.f-invia { justify-content: center; margin-top: 4px; }
.f-invia[disabled] { opacity: .62; cursor: progress; }

.form-stato:empty { display: none; }
.form-stato { font-size: .88rem; font-weight: 600; text-align: center; }
.form-stato.ko { color: #C22B22; }
.form-stato a { color: inherit; }

@media (max-width: 900px) {
    .cta-form-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
    .f-due { grid-template-columns: 1fr; }
}

/* ============================================================
   SCHEDE "FUORI LISTINO" / ALTRI MODULI
   Stanno qui e non nel foglio del listino: le usa anche /prezzi,
   che il foglio del listino non lo carica.
   ============================================================ */
.fuori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 40px;
}
.fuori-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
}
.section-ink .fuori-card {
    background: rgba(255,255,255,.045);
    border-color: var(--ink-line);
}
.fuori-card h3 {
    font-size: 1.03rem; font-weight: 700; font-stretch: 96%;
    letter-spacing: -0.018em;
    margin-bottom: 9px;
}
.fuori-card p { font-size: .91rem; line-height: 1.58; color: var(--text-2); }
.section-ink .fuori-card p { color: var(--on-ink-2); }

/* Nota a fine sezione: la usano sia il listino sia /prezzi. */
.nota-listino {
    margin-top: 26px;
    padding: 18px 20px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: .9rem; line-height: 1.6; color: var(--text-2);
}
.nota-listino b { color: var(--text); }
.section-ink .nota-listino {
    background: rgba(255,106,61,.09);
    color: var(--on-ink-2);
}
.section-ink .nota-listino b { color: #fff; }