/**
 * Landing pubblica /welcome. Token, base e testata sono in site.css (che
 * porta il timbro Hallmark); qui ci sono solo le sezioni della pagina.
 *
 * Il blu del brand fa da campo nell'hero, nella banda delle tappe e nel
 * pannello dei contatti; il resto è carta bianca e carta azzurrina con card
 * arrotondate.
 */

.wl {
    display: block;
}

.wl h2 {
    font-weight: var(--display-weight);
}

.wl-head {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.wl-head .lead {
    color: var(--color-ink-2);
}

.wl a:not(.pub-btn):focus-visible,
.wl summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.wl iconify-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* --- Hero: campo blu, titolo e azioni accanto alle schermate vere -------- */
.wl-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: calc(100svh - 77px);
    padding-block: var(--space-xl) var(--space-4xl);
    background: linear-gradient(160deg, var(--color-field), var(--color-field-2));
    color: var(--color-on-field);
}

.wl-hero__grid {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: center;
}

.wl-hero__text {
    display: grid;
    gap: var(--space-lg);
}

.wl-hero h1 {
    max-width: none;
    font-size: clamp(3rem, 4vw + 0.75rem, 5rem);
    line-height: 1.02;
}

.wl-hero .lead {
    max-width: 34ch;
    color: var(--color-on-field-2);
}

.wl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.wl-hero__wave {
    position: absolute;
    inset: auto 0 -1px;
    width: 100%;
    height: var(--space-3xl);
    fill: var(--color-paper);
}

.wl-shot {
    margin: 0;
}

.wl-shot__tabs {
    display: inline-flex;
    gap: var(--space-2xs);
    margin-bottom: var(--space-md);
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-field-rule);
    border-radius: var(--radius-pill);
    background: var(--color-field-2);
}

.wl-shot__tabs button {
    min-height: 44px;
    padding: 0 var(--space-md);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-on-field);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.wl-shot__tabs button:hover {
    background: var(--color-field);
}

.wl-shot__tabs button:active {
    transform: translateY(1px);
}

.wl-shot__tabs button:focus-visible {
    outline: 2px solid var(--color-on-field);
    outline-offset: 2px;
}

.wl-shot__tabs button[aria-selected="true"] {
    background: var(--color-on-field);
    color: var(--color-field-2);
    font-weight: 800;
}

/* Le schermate stanno una sopra l'altra: cambia solo quella visibile. */
.wl-shot__stage {
    display: grid;
}

.wl-shot__stage > .wl-shot__frame {
    grid-area: 1 / 1;
}

.is-ready .wl-shot__frame {
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--space-xs));
    transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long);
}

.is-ready .wl-shot__frame.is-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility 0s;
}

.wl-shot__frame {
    height: 540px;
    border-radius: var(--radius-shot);
    background: var(--color-paper);
    box-shadow: var(--shadow-lift);
}

.wl-shot__frame > img {
    /* La cornice mostra il menu e due colonne di riquadri, mai un riquadro a metà. */
    width: 166%;
    max-width: none;
    height: auto;
    object-fit: fill;
    border-radius: var(--radius-shot);
}

.wl-shot__caption {
    margin-top: var(--space-sm);
    color: var(--color-on-field-2);
    font-size: var(--text-sm);
}

/* --- In breve: quattro card sul bordo dell'onda ------------------------- */
.wl-facts {
    position: relative;
    z-index: var(--z-raised);
    margin-top: calc(-1 * var(--space-2xl));
}

.wl-facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-block: 0;
}

.wl-facts__list > div {
    padding: var(--space-lg);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
}

.wl-facts dt {
    display: grid;
    gap: var(--space-md);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.wl-facts dt iconify-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    background: var(--color-sky);
    color: var(--color-field);
}

.wl-facts dd {
    margin: var(--space-2xs) 0 0;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

/* --- Un cliente, cinque moduli: la banda blu con le tappe ---------------- */
.wl-journey {
    margin-top: var(--section-gap-s);
    padding-block: var(--section-gap-s);
    background: linear-gradient(160deg, var(--color-field-2), var(--color-field));
    color: var(--color-on-field);
}

.wl-journey .wl-head .lead {
    color: var(--color-on-field-2);
}

.wl-journey__figure {
    margin: 0;
}

.wl-journey__figure figcaption {
    margin-bottom: var(--space-xl);
    color: var(--color-on-field-2);
    font-size: var(--text-lead);
}

.wl-journey__figure figcaption strong {
    color: var(--color-on-field);
    font-weight: 800;
}

.wl-journey__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tappa;
}

.wl-journey__steps li {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--color-field-rule);
    counter-increment: tappa;
}

/* La linea bianca sopra ogni tappa: si disegna da sinistra quando le tappe si accendono. */
.wl-journey__steps li::after {
    content: "";
    position: absolute;
    inset: -2px 0 auto;
    height: 2px;
    background: var(--color-on-field);
    transform-origin: left center;
}

.wl-journey__steps li::before {
    content: counter(tappa);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--color-on-field);
    color: var(--color-field-2);
    font-size: var(--text-lg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wl-journey__record {
    font-size: var(--text-title);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.wl-journey__state {
    color: var(--color-on-field-2);
}

.wl-journey__module {
    color: var(--color-on-field-2);
    font-size: var(--text-sm);
}

.wl-journey__steps.is-waiting li {
    opacity: 0.35;
}

.wl-journey__steps.is-waiting li::after {
    transform: scaleX(0);
}

.wl-journey__steps.is-lit li {
    opacity: 1;
    transition: opacity var(--dur-long) var(--ease-out);
}

.wl-journey__steps.is-lit li::after {
    transform: scaleX(1);
    transition: transform var(--dur-long) var(--ease-out);
}

.wl-journey__steps.is-lit li:nth-child(2),
.wl-journey__steps.is-lit li:nth-child(2)::after {
    transition-delay: 80ms;
}

.wl-journey__steps.is-lit li:nth-child(3),
.wl-journey__steps.is-lit li:nth-child(3)::after {
    transition-delay: 160ms;
}

.wl-journey__steps.is-lit li:nth-child(4),
.wl-journey__steps.is-lit li:nth-child(4)::after {
    transition-delay: 240ms;
}

.wl-journey__steps.is-lit li:nth-child(5),
.wl-journey__steps.is-lit li:nth-child(5)::after {
    transition-delay: 320ms;
}

/* --- Su misura: il confronto in una card -------------------------------- */
.wl-compare {
    padding-block: var(--section-gap) var(--section-gap-s);
}

.wl-compare__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
}

.wl-compare__table thead th {
    padding: var(--space-lg) var(--space-lg) var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.wl-compare__table tbody th,
.wl-compare__table tbody td {
    padding: var(--space-lg);
    border-top: var(--rule-hair) solid var(--color-rule);
    color: var(--color-ink-2);
    text-align: left;
    vertical-align: top;
}

.wl-compare__table tbody th {
    width: 26%;
    color: var(--color-ink);
    font-size: var(--text-title);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.wl-compare__table td:nth-child(2) {
    width: 26%;
}

.wl-compare__ours th,
.wl-compare__ours td {
    background: var(--color-sky);
}

.wl-compare__ours th {
    color: var(--color-field);
    border-bottom-left-radius: var(--radius-card);
}

.wl-compare__ours td:last-child {
    border-bottom-right-radius: var(--radius-card);
}

.wl-compare__ours td {
    color: var(--color-ink);
    font-weight: 600;
}

/* --- Cosa adattiamo: titolo a sinistra, card a destra -------------------- */
.wl-adapt {
    padding-block: var(--section-gap-s);
    background: var(--color-sky);
}

.wl-adapt__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gap-columns);
    align-items: start;
}

.wl-adapt .wl-head {
    margin-bottom: 0;
}

.wl-adapt__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wl-adapt__list li {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-lg);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.35;
}

.wl-adapt__list iconify-icon {
    color: var(--color-field);
}

/* --- Il catalogo: una card per area, tre sopra e due sotto --------------- */
.wl-index {
    padding-block: var(--section-gap);
}

.wl-index__areas {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-lg);
}

.wl-index__area {
    grid-column: span 2;
    padding: var(--space-xl);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
}

.wl-index__area:nth-child(n + 4) {
    grid-column: span 3;
}

.wl-area--ai {
    --area: var(--area-ai);
}

.wl-area--commercial {
    --area: var(--area-commercial);
}

.wl-area--operations {
    --area: var(--area-operations);
}

.wl-area--comms {
    --area: var(--area-comms);
}

.wl-area--platform {
    --area: var(--area-platform);
}

.wl-index__area h3 {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    max-width: none;
    margin-bottom: var(--space-md);
    font-size: var(--text-lg);
    font-weight: 800;
}

.wl-index__area h3 iconify-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-card);
    background: color-mix(in oklab, var(--area) 12%, var(--color-paper));
    color: var(--area);
}

.wl-index__area ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wl-index__area li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-xs);
    padding-block: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
}

.wl-index__area a {
    color: var(--color-ink);
    font-weight: 800;
    text-decoration: none;
}

.wl-index__area a:hover {
    color: var(--area);
    text-decoration: underline;
}

.wl-index__tagline {
    flex-basis: 100%;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.wl-index__area small {
    padding: 0 var(--space-xs);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--area) 12%, var(--color-paper));
    color: var(--color-ink);
    font-size: var(--text-xs);
    font-weight: 600;
}

.wl-index__note {
    max-width: 65ch;
    margin-top: var(--space-xl);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

/* --- Listino (solo se i prezzi sono pubblici) --------------------------- */
.wl-pricing {
    padding-block: var(--section-gap-s);
}

.wl-pricing__plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin: 0 0 var(--space-xl);
    padding: 0;
    list-style: none;
}

.wl-pricing__plans li {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-xl);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
    color: var(--color-ink-2);
}

.wl-pricing__plans h3 {
    color: var(--color-ink);
}

.wl-pricing__price {
    color: var(--color-field);
    font-size: var(--text-display-s);
    font-weight: 800;
}

.wl-pricing__price small {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 400;
}

/* --- Domande: titolo a sinistra, card a destra --------------------------- */
.wl-faq {
    padding-block: var(--section-gap-s);
    background: var(--color-sky);
}

.wl-faq .wl-head {
    margin-bottom: 0;
}

.wl-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gap-columns);
    align-items: start;
}

.wl-faq .gkt-faq {
    display: grid;
    gap: var(--space-sm);
}

.wl-faq .gkt-faq__item {
    padding-inline: var(--space-lg);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
}

.wl-faq summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    font-size: var(--text-lg);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.wl-faq summary::-webkit-details-marker {
    display: none;
}

.wl-faq summary::after {
    content: "+";
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-sky);
    color: var(--color-field);
    font-weight: 800;
    transition: transform var(--dur-short) var(--ease-out);
}

.wl-faq [open] summary::after {
    transform: rotate(45deg);
}

.wl-faq summary:hover {
    color: var(--color-field);
}

.wl-faq .gkt-faq__answer {
    padding-bottom: var(--space-lg);
    color: var(--color-ink-2);
}

/* --- Contatti: il pannello blu con telefono ed email in grande ----------- */
.wl-close {
    padding-block: var(--section-gap-s);
}

.wl-close__panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--gap-columns);
    align-items: center;
    padding: var(--space-3xl);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--color-field), var(--color-field-2));
    color: var(--color-on-field);
}

.wl-close .wl-head {
    margin-bottom: 0;
}

.wl-close .wl-head .lead {
    color: var(--color-on-field-2);
}

.wl-close__direct {
    display: grid;
    gap: var(--space-xl);
    margin: 0;
}

.wl-close__direct dt {
    color: var(--color-on-field-2);
    font-size: var(--text-sm);
}

.wl-close__direct dd {
    margin: var(--space-2xs) 0 0;
}

.wl-close__direct a {
    color: var(--color-on-field);
    font-size: var(--text-display-s);
    font-weight: 800;
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
}

.wl-close__direct a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.wl-close__direct a:focus-visible {
    outline-color: var(--color-on-field);
}

.wl-close__address {
    font-size: var(--text-lead);
}

/* --- Fra 60 e 72rem le aree passano a due per riga ----------------------- */
@media (max-width: 72rem) {
    .wl-index__areas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wl-index__area,
    .wl-index__area:nth-child(n + 4) {
        grid-column: auto;
    }
}

/* --- Sotto i 60rem tutto in una colonna --------------------------------- */
@media (max-width: 60rem) {
    .wl-hero {
        min-height: 0;
    }

    .wl-hero__grid,
    .wl-adapt__grid,
    .wl-faq__grid,
    .wl-close__panel {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    .wl-close__panel {
        padding: var(--space-xl);
    }

    .wl-shot__frame {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .wl-facts__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wl-journey__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    .wl-journey__steps li {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-lg);
    }

    .wl-journey__steps li::before {
        grid-row: span 3;
        margin-bottom: 0;
    }

    .wl-pricing__plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sul telefono ogni riga del confronto diventa un blocco con le sue etichette. */
@media (max-width: 40rem) {
    .wl-facts__list,
    .wl-adapt__list,
    .wl-index__areas {
        grid-template-columns: minmax(0, 1fr);
    }

    .wl-compare__table thead {
        display: none;
    }

    .wl-compare__table tr {
        display: grid;
        gap: var(--space-xs);
        padding: var(--space-lg);
        border-top: var(--rule-hair) solid var(--color-rule);
    }

    .wl-compare__ours {
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        background: var(--color-sky);
    }

    .wl-compare__table tbody th,
    .wl-compare__table tbody td,
    .wl-compare__table td:nth-child(2) {
        width: auto;
        padding: 0;
        border: 0;
    }

    .wl-compare__table td::before {
        content: attr(data-label);
        display: block;
        color: var(--color-muted);
        font-size: var(--text-sm);
        font-weight: 400;
    }

    .wl-close__panel {
        padding: var(--space-lg);
    }

    .wl-close__direct a {
        font-size: var(--text-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wl-faq summary::after,
    .wl-shot__tabs button,
    .is-ready .wl-shot__frame,
    .is-ready .wl-shot__frame.is-active,
    .wl-journey__steps.is-lit li,
    .wl-journey__steps.is-lit li::after {
        transition: none;
    }

    .is-ready .wl-shot__frame,
    .wl-shot__tabs button:active {
        transform: none;
    }
}