/* ============================================================
 * Landing Page pubblica PlaiNest  (spec/27 — Fase 1)
 * Design system coerente con home.css:
 *   verde  var(--color-brand) → var(--color-accent) | brand scuro var(--color-brand-dark)
 *   blu    var(--theme-blue-d) → var(--theme-blue-l) | arancio var(--theme-orange-d) → var(--theme-orange-l)
 *   font   TitilliumWeb-Bold (titoli) / Regular (testo)
 * Tutto prefissato .lp- per non collidere con .home-
 * ============================================================ */

/* Token landing (spec 47 §3) su :root: sono solo alias dei token globali, quindi
   devono risolvere anche FUORI dal wrapper .lp — es. la navbar pubblica (.pub-nav
   con .lp-btn-primary) vive nel container-fluid della navbar generale, non dentro .lp.
   Tenerli su .lp lasciava --lp-green-d non definita per la CTA "Registrati gratis". */
:root {
    /* Verde brand: scala unica consolidata (spec 47 §3) — niente più lime/hex hardcoded.
       I gradienti della famiglia --lp-green-* usano brand → brand-dark; le icone/mock
       decorativi usano di proposito brand → accent (verde profondo, token --color-accent). */
    --lp-green-d:     var(--color-brand);        /* primario: CTA, icone, link */
    --lp-green-l:     var(--color-brand-dark);   /* 2° stop dei gradienti (stessa famiglia) */
    --lp-green-brand: var(--color-brand-dark);   /* heading scuri, strip, CTA finale */
    --lp-green-soft:  var(--color-brand-soft);   /* sfondi tenui: eyebrow, hover card, icone */
    /* Accento caldo (spec 47 §3): parsimonia, testo scuro su ambra */
    --lp-warm-dark:   var(--color-warm-dark);
    --lp-warm-soft:   color-mix(in srgb, var(--color-warm) 14%, transparent);
    --lp-blue-d: var(--theme-blue-d);
    --lp-blue-l: var(--theme-blue-l);
    --lp-orange-d: var(--theme-orange-d);
    --lp-orange-l: var(--theme-orange-l);
    --lp-ink: var(--color-text);
    --lp-muted: var(--color-text-muted);
    --lp-bg-soft: var(--color-bg-soft);
    --lp-surface: var(--color-surface);
    --lp-shadow: 0 18px 50px color-mix(in srgb, var(--color-brand-dark) 14%, transparent);
}

.lp {
    color: var(--lp-ink);
    font-family: TitilliumWeb-Regular, 'Helvetica Neue', sans-serif;
    overflow-x: hidden;
}

/* la landing è full-bleed: annulla il padding del container generale */
body:has(.lp) .general-container-kindergarten {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

.lp h1, .lp h2, .lp h3, .lp .lp-display {
    font-family: Cookie, cursive;
    color: var(--lp-ink);
    letter-spacing: -0.5px;
}

.lp-section {
    padding: 96px 24px;
    max-width: 1440px;
    margin: 0 auto;
}
.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--lp-green-l);   /* brand-dark: AA su brand-soft (spec 47 §3.3 — testo piccolo su verde) */
    background: var(--lp-green-soft);
    border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 18px;
}
.lp-eyebrow .material-symbols-outlined { font-size: 1rem !important; }
.lp-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.lp-section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; margin-bottom: 16px; }
.lp-section-head p { font-size: 1.12rem; color: var(--lp-muted); line-height: 1.6; margin: 0; }

/* ============================ LOGO IN CIMA ============================ */
/* Splash a schermo pieno: sticky sopra l'hero, l'opacity la gestisce lo   */
/* script inline (fade legato allo scroll) — qui solo aspetto e ingombro.  */
.lp-top-logo {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 92vh;
    padding: 24px;
    /* Cielo alla Cloud9 (spec/docs/Cloud9.jpg): molto chiaro e uniforme, un velo di blu   */
    /* pallido solo in alto, quasi bianco già a metà — non un cielo "pieno", ma una foschia */
    /* leggera. Parte dal colore della navbar sopra (#f8f9fa) così il margine superiore     */
    /* non fa salto. Stop in ordine crescente: nessuna banda di colore.                     */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lp-blue-l) 38%, #f8f9fa) 0%,
        color-mix(in srgb, var(--lp-blue-l) 18%, #fff) 45%,
        #ffffff 100%);
    /* pointer-events lo gestisce lo script (fade legato allo scroll): auto mentre è  */
    /* visibile; none a fade completato, per non bloccare i click sull'hero sotto.    */
}
/* Scena: contenitore della lente d'ingrandimento, con dentro il logo (immagine   */
/* unica: nuvole + scritta già incluse), centrato.                                */
.lp-cloud-scene {
    position: relative;
    width: 100%;
    max-width: 1240px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Qui compare la lente d'ingrandimento: niente cursore a forma di libellula,   */
/* torna il cursore standard (sovrascrive la regola globale in site.css).      */
.lp-cloud-scene, .lp-cloud-scene * {
    cursor: auto;
}
.lp-logo-splash-img {
    display: block;
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 100%;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .14));
}

/* Lente d'ingrandimento "reale": un cerchio che ritaglia (overflow:hidden) un CLONE  */
/* dell'intera scena, scalato e traslato via JS ad ogni mousemove. Essendo lo stesso  */
/* contenuto (logo + sfondo cielo) solo più grande, non mostra mai nulla di "non      */
/* zoommato" — a differenza di uno zoom fatto su un solo livello/immagine.            */
.lp-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .92);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .08);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 6;
}
.lp-lens.lp-lens-active { opacity: 1; }

@media (max-width: 767.98px) {
    .lp-top-logo { height: 78vh; }
    .lp-logo-splash-img { max-width: 96%; }
}

/* ============================ HERO ============================ */
@font-face {
    font-family: Cookie;
    src: url("/static/app/fonts/Cookie.e31fec694470.ttf");
    font-display: swap;
}
@font-face {
    font-family: "Kolker Brush";
    src: url("/static/app/fonts/KolkerBrush-Regular.21340aabf8a8.woff2") format("woff2");
    font-display: swap;
}
.lp-brand-mark {
    text-align: center;
    margin: 30px auto 24px;
    padding-inline: 16px;
    font-size: clamp(3rem, 16.5vw, 15rem);
}
.lp .lp-brand-mark {
    font-family: "Kolker Brush", cursive;
    /* letter-spacing/line-height in em/unitless: scalano insieme al font-size,
       cosi' aumentando quest'ultimo la parola si allarga in orizzontale invece
       di crescere solo in verticale (svolazzi del font corsivo Cookie) */
    letter-spacing: 0.07em;
    line-height: 0.85;
}
.lp-brand-mark .lp-grad {
    background: linear-gradient(120deg, var(--lp-green-d), var(--lp-green-l));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.7rem, 10vw, 18.5rem);
    font-style: italic;
}

.lp-hero {
    position: relative;
    padding: 120px 24px 110px;
    background:
        radial-gradient(900px 480px at 88% -8%, color-mix(in srgb, var(--color-brand) 18%, transparent), transparent 60%),
        radial-gradient(760px 460px at 4% 8%, color-mix(in srgb, var(--theme-blue-d) 12%, transparent), transparent 58%),
        linear-gradient(180deg, var(--color-surface) 0%, var(--lp-bg-soft) 100%);
    overflow: hidden;
}
.lp-hero-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 172px;
    align-items: center;
}
.lp-hero-copy { position: relative; z-index: 2; }
.lp-hero h1 {
    font-size: clamp(2.3rem, 7vw, 4.7rem);
    line-height: 1.04;
    margin-bottom: 20px;
}
.lp-hero h1 .lp-grad {
    background: linear-gradient(120deg, var(--lp-green-d), var(--lp-green-l));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lp-hero-sub {
    font-size: 1.2rem;
    color: var(--lp-muted);
    line-height: 1.62;
    max-width: 840px;
    margin-bottom: 32px;
}
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Nota sotto la CTA hero: la demo si prova senza registrazione (spec 49) */
.lp-hero-demo-note { margin-top: 14px; font-size: .95rem; color: var(--lp-muted); }
.lp-hero-trust {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    flex-wrap: wrap;
    color: var(--lp-muted);
    font-size: 0.92rem;
}
.lp-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-hero-trust .material-symbols-outlined {
    font-size: 1.2rem !important;
    color: var(--lp-green-l);
}

/* Bottoni landing (indipendenti dai btn bootstrap sovrascritti) */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: TitilliumWeb-Bold, sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    line-height: 1;
}
.lp-btn .material-symbols-outlined { font-size: 1.25rem !important; }
.lp-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--lp-green-d) 0%, var(--lp-green-l) 100%);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--color-brand-dark) 34%, transparent);
}
.lp-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--color-brand-dark) 44%, transparent);
    color: #fff !important;
}
.lp-btn-ghost {
    color: var(--lp-green-brand) !important;
    background: var(--lp-surface);
    border: 1.5px solid color-mix(in srgb, var(--color-brand-dark) 22%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.lp-btn-ghost:hover {
    transform: translateY(-3px);
    border-color: var(--lp-green-l);
    color: var(--lp-green-d) !important;
}
/* font-size ≥18.66px: il testo bianco bold sul verde brand resta AA come "large text" (spec 47 §3.3) */
.lp-btn-lg { padding: 17px 36px; font-size: 1.2rem; }

/* --- Visual mockup app (anteprima prodotto) ---
   NB: i colori INTERNI del mock (barra browser, pallini semaforo, url, sfondi chiari)
   simulano uno screenshot reale dell'app: sono neutri/decorativi voluti, fuori dal
   design system. I tile KPI .k1/.k2/.k3 derivano invece dai token (vedi sotto). */
.lp-hero-visual { position: relative; z-index: 1; }
.lp-mock {
    background: #fdfffd;
    border-radius: 22px;
    box-shadow: var(--lp-shadow);
    border: 1px solid color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
    overflow: hidden;
    transform: rotate(0.6deg);
    transition: transform 0.4s ease;
}
.lp-mock:hover { transform: rotate(0deg) translateY(-4px); }
.lp-mock-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: #f3f6ef;
    border-bottom: 1px solid #e8eee0;
}
.lp-mock-dot { width: 11px; height: 11px; border-radius: 50%; }
.lp-mock-dot.r { background: #ff6058; }
.lp-mock-dot.y { background: #ffbd2e; }
.lp-mock-dot.g { background: #28c840; }
.lp-mock-url {
    margin-left: 10px;
    font-size: 0.74rem;
    color: #9ca3af;
    background: var(--lp-surface);
    border-radius: 7px;
    padding: 4px 12px;
    flex: 1;
}
.lp-mock-body { padding: 18px; }
.lp-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.lp-mock-kpi {
    border-radius: 13px;
    padding: 13px 14px;
    color: #fff;
}
.lp-mock-kpi .v { font-family: TitilliumWeb-Bold, sans-serif; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-mock-kpi .l { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.92; margin-top: 4px; }
.lp-mock-kpi.k1 { background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); }
.lp-mock-kpi.k2 { background: linear-gradient(135deg, var(--theme-blue-d), var(--theme-blue-l)); }
.lp-mock-kpi.k3 { background: linear-gradient(135deg, var(--theme-orange-d), var(--theme-orange-l)); }
.lp-mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    height: 118px;
    padding: 14px 6px 0;
    border-top: 1px solid #f0f2ec;
}
.lp-mock-chart i {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--color-accent), var(--color-brand));
    opacity: 0.88;
    display: block;
}
/* Lista "presenze live": dà al mock l'aspetto di una vera schermata prodotto (spec 47 §6.1).
   Colori interni neutri/decorativi come il resto del mock; pill in/out dai token brand/warm. */
.lp-mock-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.lp-mock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    background: #f7faf3;
    border: 1px solid #eef2e7;
}
.lp-mock-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: TitilliumWeb-Bold, sans-serif;
    font-size: 0.66rem;
    color: #fff;
}
.lp-mock-avatar.a1 { background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); }
.lp-mock-avatar.a2 { background: linear-gradient(135deg, var(--theme-blue-d), var(--theme-blue-l)); }
.lp-mock-avatar.a3 { background: linear-gradient(135deg, var(--theme-purple-d), var(--theme-purple-l)); }
.lp-mock-name { font-size: 0.82rem; font-weight: 600; color: #3a4633; flex: 1; }
.lp-mock-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.lp-mock-pill.in {
    color: var(--color-brand-dark);
    background: color-mix(in srgb, var(--color-brand) 16%, transparent);
}
.lp-mock-pill.out {
    color: var(--color-warm-dark);
    background: color-mix(in srgb, var(--color-warm) 18%, transparent);
}
/* card flottanti decorative */
.lp-float {
    position: absolute;
    background: var(--lp-surface);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--lp-ink);
    z-index: 3;
}
.lp-float .material-symbols-outlined {
    font-size: 1.5rem !important;
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.lp-float-a { top: 16px; left: -28px; animation: lpFloat 5s ease-in-out infinite; }
.lp-float-a .material-symbols-outlined { background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); }
.lp-float-b { bottom: 30px; right: -22px; animation: lpFloat 5s ease-in-out infinite 1.6s; }
.lp-float-b .material-symbols-outlined { background: linear-gradient(135deg, var(--theme-blue-d), var(--theme-blue-l)); }
@keyframes lpFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ===================== STRISCIA "GRATIS" ===================== */
.lp-strip {
    background: linear-gradient(135deg, var(--lp-green-brand) 0%, var(--lp-green-d) 55%, var(--lp-green-l) 100%);
    color: #fff;
    text-align: center;
    padding: 22px 24px;
}
.lp-strip-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 1.08rem;
}
.lp-strip strong { font-family: TitilliumWeb-Bold, sans-serif; }
.lp-strip-inner > span { display: inline-flex; align-items: center; gap: 8px; }
.lp-strip .material-symbols-outlined { font-size: 1.35rem !important; }
.lp-strip-sep { opacity: 0.5; font-weight: 700; }
@media (max-width: 560px) { .lp-strip-sep { display: none; } }

/* ====================== SEZIONE VALORE ====================== */
.lp-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 2.5fr);
    gap: 58px;
}
/* sezione "Non sei mai solo": 3 card, niente slot vuoto in griglia da 4 */
.lp-value-grid-3 { grid-template-columns: repeat(3, 1.5fr); }
.lp-value-card {
    background: var(--lp-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 34px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-brand-dark) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
}
.lp-value-ico {
    width: 58px; height: 58px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    background: var(--lp-green-soft);
}
.lp-value-ico .material-symbols-outlined { font-size: 2rem !important; color: var(--lp-green-d); }
/* Una sola card con accento caldo per spezzare il monocromatico verde (spec 47 §6.3) */
.lp-value-ico.warm { background: var(--lp-warm-soft); }
/* glyph caldo scurito (~4:1 su tile ambra chiaro, a11y) */
.lp-value-ico.warm .material-symbols-outlined { color: color-mix(in srgb, var(--lp-warm-dark) 70%, var(--lp-ink)); }
.lp-value-card:has(.lp-value-ico.warm):hover { border-color: color-mix(in srgb, var(--color-warm) 55%, transparent); }
.lp-value-card h3 { font-size: 2.1rem; margin-bottom: 9px; }
.lp-value-card p { font-size: 1.1rem; color: var(--lp-muted); line-height: 1.58; margin: 0; }

/* ===== BEBÈ DECORATIVO — FOOTER ===== */
.lp-foot-wrap {
    position: relative;
    overflow: visible;
}
.lp-bebe-deco {
    position: absolute;
    left: 5vw;
    bottom: 100%;
    width: clamp(110px, 12vw, 180px);
    aspect-ratio: 1 / 1;   /* spec 47 §6.10: riserva lo spazio (logo 500×500) → niente CLS */
    opacity: 0;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    transform: translateX(-120%);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease 0.1s;
}
.lp-foot-wrap.lp-bebe-in .lp-bebe-deco {
    transform: translateX(0);
    opacity: 1;
}
@media (max-width: 560px) { .lp-bebe-deco { display: none; } }

/* ===================== SEZIONE SERVIZI ===================== */
.lp-services { background: var(--lp-bg-soft); }
.lp-services-wrap { max-width: 1180px; margin: 0 auto; padding: 96px 24px; }
.lp-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.lp-service {
    background: var(--lp-surface);
    border-radius: 18px;
    padding: 26px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* --lp-card-scale: aggiornata via JS in guide.html (ingrandimento in sequenza
       allo scroll, uno per volta da sinistra a destra); 1 = a riposo altrove. */
    transform: scale(var(--lp-card-scale, 1));
    position: relative;
    overflow: hidden;
}
.lp-service::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--lp-green-d), var(--lp-green-l));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.lp-service:hover { transform: scale(var(--lp-card-scale, 1)) translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10); }
.lp-service:hover::before { transform: scaleX(1); }
.lp-service-ico {
    width: 56px; height: 56px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    color: #fff;
}
.lp-service-ico .material-symbols-outlined { font-size: 2rem !important; color: #fff; }
.lp-service h3 { font-size: 1.18rem; margin-bottom: 9px; }
.lp-service p { font-size: 0.95rem; color: var(--lp-muted); line-height: 1.55; margin: 0; }
.lp-ico-green  { background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); }
.lp-ico-blue   { background: linear-gradient(135deg, var(--theme-blue-d), var(--theme-blue-l)); }
.lp-ico-orange { background: linear-gradient(135deg, var(--theme-orange-d), var(--theme-orange-l)); }
.lp-ico-teal   { background: linear-gradient(135deg, var(--theme-teal-d), var(--theme-cyan-l)); }
.lp-ico-purple { background: linear-gradient(135deg, var(--theme-purple-d), var(--theme-purple-l)); }
.lp-ico-pink   { background: linear-gradient(135deg, var(--theme-pink-d), var(--theme-pink-l)); }

/* ---- Bento (spec 47 §6.4 / F5): la card "Assistente AI" è il differenziatore →
   più grande e in evidenza. Lo span 2×2 vale solo su desktop (≥921px): sotto, la
   griglia resta quella regolare (vedi @media più in basso) e la feat torna normale. */
@media (min-width: 921px) {
    .lp-bento { grid-auto-flow: dense; }
    .lp-bento .lp-service-feat { grid-column: span 2; grid-row: span 2; }
}
.lp-service-feat {
    background: linear-gradient(160deg, var(--lp-surface) 0%, var(--lp-green-soft) 100%);
    border-color: color-mix(in srgb, var(--color-brand) 28%, transparent);
    display: flex;
    flex-direction: column;
}
.lp-service-feat::before { background: linear-gradient(90deg, var(--theme-pink-d), var(--theme-pink-l)); }
.lp-service-feat h3 { font-size: 1.4rem; }
.lp-service-feat > p { font-size: 1.02rem; }
/* Mini-chat decorativa: mostra il valore dell'assistente, riempie lo spazio della card grande */
.lp-feat-chat {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-feat-bubble {
    font-size: 0.92rem;
    line-height: 1.45;
    padding: 11px 15px;
    border-radius: 16px;
    max-width: 88%;
}
.lp-feat-bubble.q {
    align-self: flex-end;
    background: var(--lp-surface);
    border: 1px solid var(--color-border);
    color: var(--lp-ink);
    border-bottom-right-radius: 5px;
}
.lp-feat-bubble.a {
    align-self: flex-start;
    background: linear-gradient(135deg, var(--lp-green-d), var(--lp-green-l));
    color: #fff;
    border-bottom-left-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.lp-feat-bubble.a .material-symbols-outlined { font-size: 1.05rem !important; flex-shrink: 0; }
@media (max-width: 920px) {
    .lp-feat-chat { flex-direction: row; flex-wrap: wrap; }
    .lp-feat-bubble { max-width: 100%; }
}

/* ==================== COME FUNZIONA ==================== */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    position: relative;
}
.lp-step { text-align: center; position: relative; padding: 0 12px; }
.lp-step-num {
    width: 74px; height: 74px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--lp-surface);
    border: 2px solid color-mix(in srgb, var(--color-brand) 40%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-family: TitilliumWeb-Bold, sans-serif;
    font-size: 1.7rem;
    color: var(--lp-green-d);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-brand-dark) 10%, transparent);
    position: relative;
    z-index: 2;
    font-variant-numeric: tabular-nums;
}
.lp-step-ico {
    position: absolute;
    top: -9px; right: calc(50% - 51px);
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-accent));
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
}
.lp-step-ico .material-symbols-outlined { font-size: 1.2rem !important; color: #fff; }
.lp-step h3 { font-size: 2.18rem; margin-bottom: 8px; }
.lp-step p { font-size: 0.98rem; color: var(--lp-muted); line-height: 1.52; margin: 0; }
/* linea connettrice tra gli step */
.lp-steps::before {
    content: "";
    position: absolute;
    top: 37px; left: 12%; right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-brand) 50%, transparent) 0 8px, transparent 8px 16px);
    z-index: 1;
}

/* ====================== FIDUCIA ====================== */
.lp-trust { background: var(--lp-bg-soft); }
.lp-trust-wrap { max-width: 1440px; margin: 0 auto; padding: 88px 24px; }
/* (spec 47 P6) Rimossi i finti KPI "4 / 100% / 1 / 24-7": numeri auto-referenziali
   che sembravano metriche. La fiducia ora passa solo dai badge qui sotto. */
.lp-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-badge {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    background: var(--lp-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 26px;
}
.lp-badge .material-symbols-outlined {
    font-size: 1.85rem !important;
    color: var(--lp-green-d);
    flex-shrink: 0;
    width: 50px; height: 50px;
    background: var(--lp-green-soft);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.lp-badge h3 { font-size: 2.12rem; margin-bottom: 6px; }
.lp-badge p { font-size: 0.96rem; color: var(--lp-muted); line-height: 1.52; margin: 0; }

/* ====================== CTA FINALE ====================== */
.lp-final {
    max-width: 1180px;
    margin: 0 auto 96px;
    padding: 0 24px;
}
.lp-final-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 72px 40px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(600px 300px at 85% 0%, rgba(255,255,255,0.16), transparent 60%),
        linear-gradient(135deg, var(--lp-green-brand) 0%, var(--lp-green-d) 55%, var(--lp-green-l) 100%);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--color-brand-dark) 30%, transparent);
    /* Sfondo scuro: cursore libellula chiaro per restare visibile (vedi
       cursore scuro di default in site.css). Torna scuro sul bottone
       chiaro qui dentro, vedi regola .lp-btn-primary sotto. */
    cursor: url("/static/app/images/libellula_cursor_chiara.9e41bba50b78.png") 20 22, auto;
}
/* La regola globale in site.css imposta il cursore scuro esplicitamente
   anche su ::before/::after: senza queste righe le aree "vuote" della
   card (senza testo sopra) restavano scure perché una dichiarazione
   esplicita vince sempre sull'eredità, a prescindere dalla specificità. */
.lp-final-card *,
.lp-final-card::before, .lp-final-card::after,
.lp-final-card *::before, .lp-final-card *::after {
    cursor: url("/static/app/images/libellula_cursor_chiara.9e41bba50b78.png") 20 22, auto;
}
.lp-final-card h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 16px; line-height: 1.1; }
.lp-final-card p { font-size: 1.18rem; opacity: 0.94; max-width: 600px; margin: 0 auto 30px; line-height: 1.55; }
.lp-final-card .lp-btn-primary,
.lp-final-card .lp-btn-primary *,
.lp-final-card .lp-btn-primary::before, .lp-final-card .lp-btn-primary::after,
.lp-final-card .lp-btn-primary *::before, .lp-final-card .lp-btn-primary *::after {
    cursor: url("/static/app/images/libellula_cursor.41c915f94c28.png") 20 22, auto;
}
.lp-final-card .lp-btn-primary {
    background: var(--lp-surface);
    color: var(--lp-green-d) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.lp-final-card .lp-btn-primary:hover { color: var(--lp-green-brand) !important; }
/* Bebè decorativo nella CTA finale (spec 47 §7 / F5): tono "infanzia" al punto di conversione.
   aspect-ratio riserva lo spazio → niente CLS; nascosto su mobile per non rubare spazio al testo. */
.lp-final-bebe {
    position: absolute;
    right: clamp(8px, 3vw, 40px);
    bottom: 0;
    width: clamp(90px, 12vw, 150px);
    aspect-ratio: 1 / 1;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}
.lp-final-card > * { position: relative; z-index: 1; }
@media (max-width: 720px) { .lp-final-bebe { display: none; } }
/* Rassicurazioni vicino alla CTA per ridurre l'attrito (spec 47 §5) */
.lp-cta-note {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    font-size: 0.92rem;
    opacity: 0.95;
}
.lp-cta-note > span { display: inline-flex; align-items: center; gap: 6px; }
.lp-cta-note .material-symbols-outlined { font-size: 1.15rem !important; }
.lp-final-note { margin-top: 16px; font-size: 0.92rem; opacity: 0.85; }

/* ====================== TESTIMONIANZE (spec 47 §6.6) ======================
   Stile pronto: la sezione nell'HTML è racchiusa in {% comment %} finché non ci
   sono testimonianze reali. Su mobile la griglia diventa carosello scroll-snap. */
.lp-testimonials .lp-tgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.lp-tcard {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--lp-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    margin: 0;
}
.lp-tcard blockquote {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--lp-ink);
    font-style: italic;
}
.lp-tcard figcaption { display: flex; align-items: center; gap: 12px; }
.lp-tphoto {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: TitilliumWeb-Bold, sans-serif;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand), var(--color-accent));
}
.lp-tmeta { display: flex; flex-direction: column; line-height: 1.3; }
.lp-tmeta strong { font-family: TitilliumWeb-Bold, sans-serif; color: var(--lp-ink); font-size: 0.98rem; }
.lp-tmeta small { color: var(--lp-muted); font-size: 0.84rem; }

/* ====================== CTA STICKY (spec 47 §6.1) ======================
   Appare allo scroll, quando l'hero esce dalla viewport. Sotto al su-toolbar
   sticky (z 1080) e alla navbar; sopra al resto del contenuto. */
.lp-sticky-cta {
    position: fixed;
    top: 16px; right: 18px;
    z-index: 1075;
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.lp-sticky-cta.lp-sticky-show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .lp-sticky-cta { transition: opacity 0.28s ease; transform: none; }
}
@media (max-width: 560px) {
    .lp-sticky-cta { top: auto; bottom: 16px; right: 16px; left: 16px; }
}

/* ====================== FAQ (F-18) ====================== */
.lp-faq { background: var(--lp-surface); }
.lp-faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-faq-item {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px 28px;
    background: var(--lp-bg-soft);
}
.lp-faq-item h3 {
    font-size: 1.06rem;
    color: var(--lp-green-brand);
    margin: 0 0 10px;
    font-family: TitilliumWeb-Bold, sans-serif;
}
.lp-faq-item p {
    font-size: 0.95rem;
    color: var(--lp-ink);
    line-height: 1.6;
    margin: 0;
}

/* ====================== FOOTER landing ====================== */
.lp-foot {
    text-align: center;
    padding: 30px 24px 12px;
    color: var(--lp-muted);
    font-size: 0.88rem;
}
.lp-foot strong { color: var(--lp-green-d); font-family: TitilliumWeb-Bold, sans-serif; }
.lp-foot-legal {
    text-align: center;
    padding: 0 24px 36px;
    font-size: 0.82rem;
    color: var(--lp-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.lp-foot-legal a { color: var(--lp-green-d); text-decoration: none; }
.lp-foot-legal a:hover { text-decoration: underline; }
.lp-foot-sep { opacity: 0.45; }

/* ========= GATTO APPESO AL FOOTER (spec 74, solo landing — iterazione 5, 2026-09-16) =========
   La "zona gatto" (.lp-cat-zone) è sempre visibile, altezza fissa — contiene
   sempre una delle due immagini del gatto. Il footer VERO
   (.lp-cat-foot-outer, dentro c'è _public_footer.html via .lp-cat-foot-content)
   è invece clippato a un'altezza animata in JS: 0 quando si arriva in fondo
   pagina con lo scroll normale (nessun link/contenuto visibile), cresce fino
   alla sua altezza naturale solo con un ulteriore scroll oltre quel fondo
   (intercettato su wheel/touch, non su scroll: l'evento nativo non si attiva
   più quando non c'è altro da scrollare). Il gatto passa da seduto
   (cat_footer.png) ad appeso (cat_hang.png), a cavallo del bordo superiore
   del footer, in crossfade sullo stesso avanzamento. */
.lp-cat-zone {
    position: relative;
    height: 300px;  /* deve contenere comodamente il gatto seduto (fino a ~278px di altezza) */
    overflow: hidden;
}
.lp-cat-zone-img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}
.lp-cat-zone-img--sit {
    width: clamp(120px, 13vw, 190px);
    aspect-ratio: 357 / 523;   /* proporzioni reali di cat_footer.png */
    opacity: 1;
}
.lp-cat-zone-img--hang {
    width: clamp(150px, 16vw, 230px);
    aspect-ratio: 261 / 135;   /* proporzioni reali di cat_hang.png */
    /* leggermente meno della metà immagine sotto il bordo inferiore della zona,
       così il bordo superiore del footer resta appena sotto alle zampe del gatto */
    transform: translate(-50%, 30%);
    opacity: 0;
}
.lp-cat-foot-outer {
    position: relative;
    height: 0;
    overflow: hidden;
    border-top: 3px solid var(--lp-ink);
}
/* Il contenuto va nascosto anche a livello di accessibilità quando il
   footer è collassato, non solo visivamente: altezza 0 da sola non basta a
   garantire che i link non restino raggiungibili da tastiera in ogni
   browser. .is-open viene aggiunta/rimossa via JS in base al progresso
   dell'apertura (landing.html). */
.lp-cat-foot-content { visibility: hidden; }
.lp-cat-foot-outer.is-open .lp-cat-foot-content { visibility: visible; }
/* Nessun prefers-reduced-motion sull'altezza/opacity del gatto: sono legate
   1:1 alla posizione di scroll, non un'animazione temporale autonoma —
   stessa categoria di position: sticky/fixed. */

/* ==================== Animazioni reveal ==================== */
.lp-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lp-reveal.lp-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    .lp-float, .lp-mock { animation: none !important; }
}

/* ==================== Focus states (a11y, spec 47 §9) ====================
   Focus ring visibile su tutti i link/bottoni (prima non definito). Su superfici
   verdi scure (strip, CTA finale) l'anello verde sparirebbe: lì usa il bianco. */
.lp a:focus-visible,
.lp button:focus-visible,
.lp-btn:focus-visible {
    outline: 3px solid var(--color-brand);
    outline-offset: 3px;
}
.lp-strip a:focus-visible,
.lp-final-card a:focus-visible,
.lp-final-card .lp-btn:focus-visible {
    outline-color: var(--lp-surface);
}

/* ============================================================
 * F4 — Pagine pubbliche & navbar (spec 47 §8)
 * Tutto prefissato .pub-/.lp- e basato sui token di theme.css.
 * ============================================================ */

/* ---------- Navbar pubblica ---------- */
.pub-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.pub-nav-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.96rem;
    padding: 8px 12px;
    border-radius: 9px;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.pub-nav-link:hover { color: var(--color-brand-dark); background: var(--color-brand-soft); }
.pub-nav-cta {
    margin-left: 8px;
    padding: 10px 18px;
    font-size: 0.96rem;
    border-radius: 11px;
}
.pub-nav-cta .material-symbols-outlined { display: none; }

/* Link "Beta Tester": stesso font/dimensione degli altri link del menù (.pub-nav-link),
   ma reso come pulsante a pillola grigio con bordo scuro, come da riferimento
   spec/docs/example_button_beta_tester.png — più una leggera rotazione e un'ombra netta
   sfalsata per dare la sensazione di un'etichetta appiccicata sopra il menù, non un link
   allineato come gli altri. Al passaggio del mouse si "stacca" leggermente (si raddrizza
   un po' e si solleva), come se si potesse staccare. */
.pub-nav-beta {
    display: inline-block;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #f6f6f6, #dedede);
    border: 1.5px solid #1c1c1c;
    border-radius: 10px;
    color: #1c1c1c;
    transform: rotate(-4deg);
    box-shadow:
        2px 3px 0 rgba(0, 0, 0, 0.35),
        0 6px 14px color-mix(in srgb, var(--color-brand-dark) 40%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pub-nav-beta:hover {
    background: linear-gradient(180deg, #eeeeee, #d2d2d2);
    color: #1c1c1c;
    transform: rotate(-2deg) translateY(-2px);
    box-shadow:
        2px 4px 0 rgba(0, 0, 0, 0.4),
        0 9px 18px color-mix(in srgb, var(--color-brand-dark) 55%, transparent);
}

/* ---------- Hamburger toggle (solo mobile) ---------- */
.pub-nav-toggle {
    display: none;   /* su desktop i link stanno sempre in riga: niente pulsante */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}
.pub-nav-toggle:hover { background: var(--color-brand-soft); }
.pub-nav-toggle .material-symbols-outlined { font-size: 24px; }
.pub-nav-toggle-icon-close { display: none; }
.pub-nav-toggle[aria-expanded="true"] .pub-nav-toggle-icon-open { display: none; }
.pub-nav-toggle[aria-expanded="true"] .pub-nav-toggle-icon-close { display: inline; }

/* ---------- Pannello link: riga su desktop, tendina a comparsa su mobile ---------- */
/* !important: Bootstrap nasconde il pannello di default con ".collapse:not(.show)"  */
/* (specificità 0,2,0, più alta della semplice classe qui sotto) finché il JS non    */
/* aggiunge ".show" — su desktop i link devono restare SEMPRE visibili, a prescindere */
/* dallo stato (chiuso) del collapse.                                                */
.pub-nav-collapse {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

@media (max-width: 860px) {
    .pub-nav { flex-wrap: wrap; gap: 8px; }
    .pub-nav-toggle { display: inline-flex; order: 1; }
    .pub-nav-cta { order: 2; margin-left: auto; }
    /* Menù a tendina (spec 47, requisito 2026-09-09): su schermi piccoli i link      */
    /* NON restano visibili di continuo (occuperebbero spazio verticale prezioso);   */
    /* il pannello va a capo sotto la riga toggle+CTA e appare solo aperto via       */
    /* Bootstrap collapse (già caricato su tutte le pagine pubbliche, nessun JS extra).*/
    .pub-nav-collapse:not(.show) { display: none !important; }
    .pub-nav-collapse.show {
        order: 3;
        flex: 0 0 100%;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-top: 10px;
        padding: 8px;
        background: var(--lp-surface);
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    }
    .pub-nav-link { padding: 10px 14px; }
}

/* ---------- Card video orizzontale (Guide) ---------- */
.lp-guide-hero {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 32px 0 0;
}
.lp-guide-hero-card {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 28px;
    border: 6px solid var(--lp-green-d);
    /* stesso rapporto del video sorgente (1916x854): il contenitore fa solo da
       cornice, non ritaglia né schiaccia il frame */
    aspect-ratio: 1916 / 854;
    max-height: 80vh;
    /* se il 100% della larghezza disponibile darebbe un'altezza oltre 80vh,
       la larghezza si riduce di conseguenza: mai un'altezza forzata che
       farebbe ritagliare il video con object-fit:cover */
    width: min(100%, calc(80vh * 1916 / 854));
    margin: 0 auto 150px auto;
    background: var(--lp-green-d);
    box-shadow: 0 26px 60px color-mix(in srgb, var(--lp-green-brand) 40%, transparent),
        0 8px 20px color-mix(in srgb, var(--lp-green-brand) 30%, transparent);
    /* rimpicciolisce/torna piena scorrendo (script in guide.html): solo width
       cambia via JS, l'altezza segue da sola grazie all'aspect-ratio qui sopra */
    transition: width .15s ease-out;
}
.lp-guide-hero-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-guide-hero-text {
    max-width: 780px;
    margin: 36px auto 0;
    padding: 0 24px;
    text-align: center;
}
.lp-guide-hero-text h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.1rem);
    line-height: 1.08;
    margin: 10px 0 16px;
}
.lp-guide-hero-text p {
    font-size: 1.14rem;
    color: var(--lp-muted);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 680px;
}
@media (prefers-reduced-motion: reduce) {
    .lp-guide-hero-media { display: none; }
    .lp-guide-hero-card { background: var(--lp-green-d) center / cover no-repeat url("../img/guide_hero_poster.43c883a1202c.jpg"); }
}

/* ---------- Intestazione pagina (hero compatto delle sotto-pagine) ---------- */
.lp-page-head {
    max-width: 820px;
    margin: 0 auto;
    padding: 84px 24px 8px;
    text-align: center;
}
.lp-page-head h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.1rem);
    line-height: 1.08;
    margin: 10px 0 16px;
}
.lp-page-head p { font-size: 1.14rem; color: var(--lp-muted); line-height: 1.6; margin: 0 auto; max-width: 680px; }
.lp-page-head-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- Prezzi ---------- */
.lp-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
.lp-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lp-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px 26px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10); }
.lp-price-card.featured {
    border: 2px solid var(--color-brand);
    box-shadow: 0 20px 48px color-mix(in srgb, var(--color-brand-dark) 18%, transparent);
}
.lp-price-name { font-family: TitilliumWeb-Bold, sans-serif; font-size: 1.2rem; color: var(--lp-ink); }
.lp-price-amount { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 2px; }
.lp-price-val { font-family: TitilliumWeb-Bold, sans-serif; font-size: 2.6rem; line-height: 1; color: var(--lp-green-brand); font-variant-numeric: tabular-nums; }
.lp-price-per { font-size: 1rem; color: var(--lp-muted); font-weight: 600; }
.lp-price-year { font-size: 0.82rem; color: var(--lp-muted); margin-bottom: 10px; }
.lp-price-cadence { font-size: 0.92rem; color: var(--lp-muted); margin-bottom: 20px; min-height: 2.4em; }
.lp-price-feats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.lp-price-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.95rem; line-height: 1.4; color: var(--lp-ink); }
.lp-price-feats .material-symbols-outlined { font-size: 1.2rem !important; flex-shrink: 0; margin-top: 1px; }
.lp-price-feats li.ok .material-symbols-outlined { color: var(--color-brand); }
.lp-price-feats li.hi .material-symbols-outlined { color: var(--color-warm-dark); }
.lp-price-cta { width: 100%; }
.lp-price-note { text-align: center; font-size: 0.82rem; color: var(--lp-muted); margin-top: 12px; }
.lp-pricing-foot { max-width: 760px; margin: 40px auto 0; text-align: center; color: var(--lp-muted); font-size: 1rem; line-height: 1.6; }

/* ---------- Tabella comparativa piani ---------- */
.lp-price-compare-wrap {
    margin-top: 40px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--lp-surface);
}
.lp-price-compare {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.lp-price-compare th, .lp-price-compare td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}
.lp-price-compare thead th {
    font-family: TitilliumWeb-Bold, sans-serif;
    color: var(--lp-ink);
    background: var(--lp-bg-soft);
}
.lp-price-compare thead th.hi { color: var(--lp-green-brand); }
.lp-price-compare th[scope="row"] {
    text-align: left;
    font-weight: 600;
    color: var(--lp-ink);
    white-space: nowrap;
}
.lp-price-compare tbody tr:last-child th, .lp-price-compare tbody tr:last-child td { border-bottom: none; }
.lp-price-compare .material-symbols-outlined { font-size: 1.2rem !important; color: var(--color-brand); }
.lp-price-compare .lp-compare-no { color: color-mix(in srgb, var(--lp-muted) 70%, transparent); }
.lp-compare-sub { display: block; font-size: 0.8rem; color: var(--lp-muted); }

/* ---------- Kit di avvio (servizio una tantum) ---------- */
.lp-price-addon {
    margin-top: 28px;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--lp-warm-soft);
    border: 1px dashed color-mix(in srgb, var(--color-warm-dark) 45%, transparent);
    border-radius: 20px;
    padding: 28px 30px;
}
.lp-price-addon-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-warm-dark) 16%, transparent);
    color: var(--color-warm-dark);
}
.lp-price-addon-icon .material-symbols-outlined { font-size: 1.6rem !important; }
.lp-price-addon-body { flex: 1; }
.lp-price-addon-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lp-price-addon-name { font-family: TitilliumWeb-Bold, sans-serif; font-size: 1.15rem; color: var(--lp-ink); }
.lp-price-addon-amount { display: flex; align-items: baseline; gap: 6px; }
.lp-price-addon-amount .lp-price-val { font-size: 1.5rem; color: var(--color-warm-dark); }
.lp-price-addon-body p { color: var(--lp-ink); line-height: 1.55; margin: 0 0 16px; }
.lp-price-addon-cta, .lp-price-addon-cta:hover { border-color: color-mix(in srgb, var(--color-warm-dark) 45%, transparent); color: var(--color-warm-dark) !important; }

@media (max-width: 767.98px) {
    .lp-price-addon { flex-direction: column; }
}

/* ---------- Righe funzionalità / approfondimento ---------- */
.lp-feature-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding: 28px 0;
}
.lp-feature-row.reverse .lp-feature-text { order: 2; }
.lp-feature-row.reverse .lp-feature-visual { order: 1; }
.lp-feature-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.14; margin: 12px 0 14px; }
.lp-feature-text > p { font-size: 1.08rem; color: var(--lp-muted); line-height: 1.6; margin: 0 0 18px; }
.lp-feature-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.lp-feature-list li { display: flex; align-items: center; gap: 9px; font-size: 1rem; color: var(--lp-ink); }
.lp-feature-list .material-symbols-outlined { color: var(--color-brand); font-size: 1.3rem !important; }
.lp-feature-visual { display: flex; justify-content: center; }
.lp-feature-ico {
    width: clamp(120px, 18vw, 180px);
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-brand), var(--color-accent));
    box-shadow: var(--lp-shadow);
}
.lp-feature-ico.warm { background: linear-gradient(135deg, var(--color-warm), var(--color-warm-dark)); }
.lp-feature-ico .material-symbols-outlined { font-size: clamp(3rem, 7vw, 4.6rem) !important; color: #fff; }

/* ---------- Contatti ---------- */
.lp-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
.lp-contact-info h2 { font-size: 2.5rem; margin-bottom: 12px; }
.lp-contact-info > p { color: var(--lp-muted); line-height: 1.6; }
.lp-contact-list { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 14px; }
.lp-contact-list li { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.lp-contact-list .material-symbols-outlined { color: var(--color-brand); font-size: 1.5rem !important; }
.lp-contact-list a { color: var(--lp-green-d); text-decoration: none; font-weight: 600; }
.lp-contact-list a:hover { text-decoration: underline; }
.lp-contact-hint { font-size: 0.92rem; color: var(--lp-muted); line-height: 1.55; }
.lp-contact-hint a { color: var(--lp-green-d); }
.lp-contact-form-wrap {
    background: var(--lp-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.lp-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.lp-field label { font-weight: 600; font-size: 0.92rem; margin-bottom: 7px; color: var(--lp-ink); }
.lp-field input, .lp-field textarea, .lp-field select {
    font-family: TitilliumWeb-Regular, sans-serif;
    font-size: 1rem;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 11px;
    background: var(--lp-bg-soft);
    color: var(--lp-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
}
.lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
    background: var(--lp-surface);
}
.lp-field .is-invalid { border-color: #d64545; }
.lp-err { color: #d64545; font-size: 0.84rem; margin-top: 6px; }
.lp-form-privacy { font-size: 0.82rem; color: var(--lp-muted); line-height: 1.5; margin: 14px 0 0; }
.lp-form-privacy a { color: var(--lp-green-d); }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-check { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0; }
.lp-check input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--color-brand); }
.lp-check label { font-weight: 400; font-size: 0.86rem; color: var(--lp-muted); line-height: 1.4; }
.lp-check label a { color: var(--lp-green-d); }
.lp-check.is-invalid label { color: #d64545; }
.lp-contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    padding: 20px 22px;
}
.lp-contact-alert.ok { background: var(--color-brand-soft); border: 1px solid color-mix(in srgb, var(--color-brand) 35%, transparent); }
.lp-contact-alert.err { background: #fdecec; border: 1px solid #f3c2c2; }
.lp-contact-alert .material-symbols-outlined { font-size: 1.7rem !important; flex-shrink: 0; }
.lp-contact-alert.ok .material-symbols-outlined { color: var(--color-brand-dark); }
.lp-contact-alert.err .material-symbols-outlined { color: #c23b3b; }
.lp-contact-alert strong { display: block; font-family: TitilliumWeb-Bold, sans-serif; margin-bottom: 4px; }
.lp-contact-alert p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.lp-contact-alert a { color: inherit; font-weight: 600; }

/* ---------- Guide (spec 47 §8 / F5) ---------- */
/* Le card-guida sono link interi: riusano .lp-service ma con freccia "Leggi". */
.lp-guide-card { display: flex; flex-direction: column; text-decoration: none !important; color: inherit; }
.lp-guide-card h3 { color: var(--lp-ink); font-size: 2.15rem; }
/* .lp-reveal.lp-in forza transform:none (2 classi) e altrimenti vincerebbe
   sempre su .lp-service { transform: scale(var(--lp-card-scale)) } (1 classe):
   qui alziamo la specificità (3 classi) solo per le card-guida, per riabilitare
   l'ingrandimento sequenziale via scroll dopo che la reveal è già avvenuta. */
.lp-guide-card.lp-reveal.lp-in { transform: scale(var(--lp-card-scale, 1)); }
.lp-guide-card.lp-service:hover { transform: scale(var(--lp-card-scale, 1)) translateY(-5px); }
.lp-guide-more {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lp-green-d);
    font-family: TitilliumWeb-Bold, sans-serif;
    font-size: 0.92rem;
}
.lp-guide-more .material-symbols-outlined { font-size: 1.1rem !important; transition: transform 0.18s ease; }
.lp-guide-card:hover .lp-guide-more .material-symbols-outlined { transform: translateX(4px); }
/* Prosa degli articoli guida */
.lp-guide-prose { max-width: 800px; }
.lp-guide-art { padding: 12px 0 36px; scroll-margin-top: 90px; }
.lp-guide-art + .lp-guide-art { border-top: 1px solid var(--color-border); padding-top: 36px; }
.lp-guide-art h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.16; margin-bottom: 14px; }
.lp-guide-art h3 { font-size: 1.12rem; color: var(--lp-green-brand); margin: 22px 0 12px; }
.lp-guide-art > p { font-size: 1.06rem; color: var(--lp-muted); line-height: 1.65; margin: 0 0 16px; }
.lp-guide-art a { color: var(--lp-green-d); font-weight: 600; }

@media (max-width: 860px) {
    .lp-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .lp-feature-row, .lp-feature-row.reverse { grid-template-columns: 1fr; gap: 28px; }
    .lp-feature-row.reverse .lp-feature-text { order: 2; }
    .lp-feature-row.reverse .lp-feature-visual { order: 1; }
    .lp-contact-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ====================== Responsive ====================== */
@media (max-width: 920px) {
    .lp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .lp-hero-visual { max-width: 460px; margin: 0 auto; }
    .lp-value-grid, .lp-services-grid, .lp-steps, .lp-badges { grid-template-columns: repeat(2, 1fr); }
    .lp-steps::before { display: none; }
    /* Testimonianze → carosello orizzontale a scorrimento (spec 47 §6.6) */
    .lp-testimonials .lp-tgrid {
        grid-auto-flow: column;
        grid-auto-columns: minmax(78%, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .lp-tcard { scroll-snap-align: center; }
}
/* ---------- Pagine legali (Privacy Policy / Termini di Servizio) ---------- */
.lp-legal-updated { text-align: center; font-size: 0.85rem; color: var(--lp-muted); margin: -8px 0 32px; }
.lp-legal-toc {
    max-width: 800px;
    margin: 0 auto 8px;
    padding: 22px 26px;
    border-radius: 16px;
    background: var(--lp-bg-soft);
    border: 1px solid var(--color-border);
}
.lp-legal-toc h2 { font-size: 0.85rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--lp-muted); }
.lp-legal-toc ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 20px; }
.lp-legal-toc li { break-inside: avoid; margin-bottom: 6px; font-size: 0.96rem; }
.lp-legal-toc a { color: var(--lp-ink); text-decoration: none; }
.lp-legal-toc a:hover { color: var(--lp-green-d); text-decoration: underline; }
.lp-guide-art table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.94rem; }
.lp-guide-art table th, .lp-guide-art table td { text-align: left; padding: 10px 12px; border: 1px solid var(--color-border); vertical-align: top; }
.lp-guide-art table th { background: var(--lp-bg-soft); }
.lp-guide-art > ol, .lp-guide-art > ul { color: var(--lp-muted); font-size: 1.02rem; line-height: 1.6; margin: 0 0 16px; padding-left: 22px; }
.lp-guide-art > ol > li, .lp-guide-art > ul > li { margin-bottom: 8px; }
.lp-legal-todo {
    display: inline-block;
    background: var(--lp-warm-soft);
    color: var(--lp-warm-dark);
    border: 1px dashed color-mix(in srgb, var(--lp-warm-dark) 55%, transparent);
    padding: 1px 8px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.92em;
}
@media (max-width: 560px) {
    .lp-legal-toc ol { columns: 1; }
}

@media (max-width: 560px) {
    .lp-section, .lp-services-wrap, .lp-trust-wrap { padding-left: 18px; padding-right: 18px; }
    .lp-hero { padding-top: 80px; }
    .lp-value-grid, .lp-services-grid, .lp-steps, .lp-badges { grid-template-columns: 1fr; }
    .lp-cta-row .lp-btn { width: 100%; }
    .lp-float { display: none; }
    .lp-cta-note { flex-direction: column; align-items: center; gap: 8px; }
}