/* Pagina Lares AR — CSS dedicato (vedi doc revisione C2/C3). Riusa i componenti
   globali di lares.css (.page-header, .lares-video-wrap, .howitworks-steps,
   .problem-card, .section-label, .lares-h2): qui solo ciò che è specifico
   di questa pagina. */

/* Video: centrato, larghezza contenuta come nel riferimento MeshAR (.ma-video-wrap) */
.ar-video-container {
    display: flex;
    justify-content: center;
}

.ar-video-container .lares-video-wrap {
    max-width: 860px;
}

/* "Cosa serve / cosa ottieni": due card affiancate da tablet in su */
.ar-section-header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.ar-needs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .ar-needs-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 52rem;
        margin-inline: auto;
    }
}

/* Icone illustrate delle due card: altezza uniforme e allineate sulla stessa
   base (una e' orizzontale, l'altra verticale). Su questa pagina non e'
   caricato home.css/app.css che altrimenti vincolano .problem-card-icon. */
.ar-needs-grid .problem-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.5rem;
    margin: var(--space-6) 0;
}

.ar-needs-grid .problem-card-icon img,
.ar-needs-grid .problem-card-icon svg {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.ar-needs-grid .problem-card h3 {
    text-align: center;
}

/* Blocco tecnologia — cross-link a meshar.io, stesso ritmo di .app-beta-notice */
.ar-tech {
    background: var(--color-dark-surface);
    border: 0.5px solid var(--color-dark-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
}

.ar-tech-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
}

.ar-tech-logo {
    flex: none;
    border-radius: var(--radius-sm);
}

.ar-tech-text {
    flex: 1 1 20rem;
    min-width: 0;
}

.ar-tech-title {
    margin: var(--space-1) 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-dark);
}

.ar-tech-body {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-mid);
}

.ar-tech-cta { flex: none; }

/* CTA finale */
.ar-cta-container {
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
    padding-block: var(--space-8);
}

.ar-cta-container .lares-h2 {
    display: inline-block;
    margin-bottom: var(--space-4);
}

.ar-cta-container > p {
    color: var(--color-mid);
    max-width: 44ch;
    margin: 0 auto var(--space-8);
}