/* ============================================================
   BrandPriceMonitor — Frontend CSS
   Design: Light SaaS editorial
   Font: Figtree (Google Fonts)
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    /* Colori */
    --bg-deep:       #f6f8fc;
    --bg-dark:       #ffffff;
    --bg-card:       #ffffff;
    --bg-card-hover: #f8fbff;
    --border-dim:    #e2e8f0;
    --border-glow:   rgba(47,128,237,.22);

    /* Gold accent */
    --gold:         #b3832f;
    --gold-light:   #d49d3c;
    --gold-dim:     rgba(179,131,47,.10);
    --gold-glow:    0 18px 50px rgba(179,131,47,.12);

    /* Blu accent secondario */
    --blue-acc:     #1d4ed8;
    --blue-light:   rgba(29,78,216,.10);

    /* Testo */
    --text-h:       #0f172a;
    --text-body:    #475569;
    --text-muted:   #64748b;

    /* Tipografia */
    --font-display: 'Figtree', system-ui, sans-serif;
    --font-body:    'Figtree', system-ui, sans-serif;

    --fs-xs:            .75rem;
    --fs-sm:            .875rem;
    --fs-base:          1rem;
    --fs-lg:            1.125rem;
    --fs-xl:            1.25rem;
    --fs-2xl:           1.5rem;
    --fs-3xl:           2rem;

    /* Spacing */
    --section-gap: 6rem;

    /* Transizioni */
    --ease:  cubic-bezier(.4,0,.2,1);
    --dur:   .3s;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.layout-frontend {
    font-family:    var(--font-body);
    background:     linear-gradient(180deg, #f8fbff 0%, #ffffff 34%, #f4f7fb 100%);
    color:          var(--text-body);
    min-height:     100vh;
    line-height:    1.7;
    font-size:      1rem;
    overflow-x:     hidden;
    display:        flex;
    flex-direction: column;
}

/* ── Modificatore: sfondo chiaro con accenti morbidi ─ */
body.layout-frontend.has-gradient-bg {
    background:
        radial-gradient(circle at 16% 8%, rgba(29,78,216,.10) 0, transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(179,131,47,.12) 0, transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f3f6fb 100%);
    background-attachment: fixed;
    position:              relative;
}

body.layout-frontend.has-gradient-bg::before {
    content:        '';
    position:       fixed;
    top:            -200px;
    left:           50%;
    width:          900px;
    height:         700px;
    background:     radial-gradient(circle, rgba(29,78,216,.08) 0%, transparent 70%);
    transform:      translateX(-50%);
    pointer-events: none;
    z-index:        0;
}

/* Header e main devono restare sopra al glow */
body.layout-frontend.has-gradient-bg .front-header,
body.layout-frontend.has-gradient-bg .fe-main,
body.layout-frontend.has-gradient-bg .front-footer { position: relative; z-index: 1; }

/* Header su fondo chiaro */
body.layout-frontend.has-gradient-bg .front-header {
    background: linear-gradient(160deg, #0d1b2e 0%, #0d2a4a 60%, #0a3060 100%);
}

a { color: var(--blue-acc); text-decoration: none; }
a:hover { color: #173ea8; }

img { max-width: 100%; height: auto; display: block; }

/* ── Header ─────────────────────────────────────────────────── */
.front-header {
    position:       sticky;
    top:            0;
    z-index:        100;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        1rem 2rem;
    background:     linear-gradient(160deg, #0d1b2e 0%, #0d2a4a 60%, #0a3060 100%);
    border-bottom:  1px solid rgba(255,255,255,.12);
    box-shadow:     0 12px 32px rgba(15,23,42,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.front-logo {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    text-decoration: none;
}

.front-logo-img {
    width:        30px;
    height:       30px;
    border-radius: 6px;
}

.front-logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size:   1.375rem;
    color:       #ffffff;
    letter-spacing: 0;
}

.front-nav {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
}

.front-nav-link {
    font-size:   .875rem;
    font-weight: 500;
    color:       rgba(255,255,255,.82);
    text-decoration: none;
    transition:  color var(--dur);
}

.front-nav-link:hover { color: #ffffff; }

.front-user-chip {
    display:        flex;
    align-items:    center;
    gap:            .625rem;
    padding:        .4rem .875rem;
    background:     rgba(255,255,255,.10);
    border:         1px solid rgba(255,255,255,.26);
    border-radius:  20px;
    font-size:      .8125rem;
    color:          #ffffff;
    text-decoration: none;
    transition:     border-color var(--dur);
}

.front-user-chip:hover {
    border-color:    rgba(255,255,255,.55);
    color:           #ffffff;
    text-decoration: none;
}

/* ── Hero section ───────────────────────────────────────────── */
.hero {
    position:   relative;
    text-align: center;
    padding:    6.5rem 1.5rem 4.5rem;
    overflow:   hidden;
    border-bottom: 1px solid rgba(15,23,42,.06);
}

.hero-home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    text-align: left;
    padding-left: clamp(1.25rem, 6vw, 6rem);
    padding-right: clamp(1.25rem, 6vw, 6rem);
    background-image:
        linear-gradient(90deg, rgba(248,250,252,.90) 0%, rgba(213, 221, 229, 0.72) 34%, rgba(248,250,252,.30) 62%, rgba(248,250,252,.08) 100%),
        url("../img/header.jpg");
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-home::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.28) 100%);
    pointer-events: none;
    z-index: 0;
}

.hero-bg-glow {
    position:      absolute;
    top:           -120px;
    left:          50%;
    transform:     translateX(-50%);
    width:         600px;
    height:        400px;
    background:    radial-gradient(ellipse, rgba(29,78,216,.10) 0%, transparent 70%);
    pointer-events: none;
    z-index:       0;
}

.hero-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }

.hero-home .hero-inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.hero-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    padding:        .375rem 1rem;
    background:     var(--gold-dim);
    border:         1px solid var(--border-glow);
    border-radius:  20px;
    font-size:      .75rem;
    font-weight:    600;
    color:          var(--blue-acc);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom:  1.5rem;
}

.hero-title {
    font-family:   var(--font-display);
    font-weight:   850;
    font-size:     clamp(2.25rem, 6vw, 4rem);
    color:         var(--text-h);
    line-height:   1.15;
    letter-spacing: 0;
    margin-bottom: 1.25rem;
}

.hero-title-accent { color: var(--blue-acc); }

.hero-subtitle {
    font-size:     1.0625rem;
    color:         var(--text-body);
    max-width:     520px;
    margin:        0 auto 2.5rem;
    line-height:   1.7;
}

.hero-home .hero-title,
.hero-home .hero-subtitle {
    max-width: 620px;
    margin-left: 0;
    margin-right: 0;
}

.hero-actions {
    justify-content: flex-start;
}

.hero-home .hero-note {
    max-width: 620px;
    color: var(--text-muted);
}

.hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
    text-align: left;
}

.hero-highlight-card {
    padding: 1rem;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 12px;
    color: var(--text-body);
    font-size: .875rem;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.hero-highlight-card h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-h);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 .5rem;
}

.hero-highlight-card i {
    color: var(--blue-acc);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-right: 0.15rem;
}

.hero-highlight-card p {
    margin: 0;
    color: var(--text-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.55;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-gold {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    padding:        .75rem 1.75rem;
    background:     var(--blue-acc);
    color:          #ffffff;
    border-radius:  8px;
    font-weight:    700;
    font-size:      .9375rem;
    text-decoration: none;
    transition:     background var(--dur), transform var(--dur), box-shadow var(--dur);
    box-shadow:     0 12px 30px rgba(29,78,216,.22);
    border:         none;
    cursor:         pointer;
    font-family:    var(--font-body);
}

.btn-gold:hover {
    background:      #173ea8;
    color:           #ffffff;
    text-decoration: none;
    transform:       translateY(-1px);
    box-shadow:      0 16px 34px rgba(29,78,216,.28);
}

.btn-ghost {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    padding:        .75rem 1.5rem;
    background:     transparent;
    color:          var(--text-body);
    border:         1px solid var(--border-dim);
    border-radius:  8px;
    font-weight:    500;
    font-size:      .9375rem;
    text-decoration: none;
    transition:     border-color var(--dur), color var(--dur);
}

.btn-ghost:hover {
    border-color:    var(--blue-acc);
    color:           var(--text-h);
    text-decoration: none;
}

/* ── Section ────────────────────────────────────────────────── */
.section {
    padding:   var(--section-gap) 1.5rem;
    max-width: 1100px;
    margin:    0 auto;
}

.section-label {
    font-size:    .75rem;
    font-weight:  600;
    color:        var(--gold);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .625rem;
}

.section-title {
    font-family:   var(--font-display);
    font-weight:   800;
    font-size:     clamp(1.75rem, 4vw, 2.75rem);
    color:         var(--text-h);
    line-height:   1.2;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.section-desc {
    font-size:  1.0625rem;
    color:      var(--text-body);
    max-width:  560px;
    line-height: 1.7;
}

.network-impact-section {
    max-width: 920px;
}

.network-impact-copy {
    display: grid;
    gap: 1rem;
    color: var(--text-body);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.network-impact-copy p {
    margin: 0;
}

.showroom-section {
    position: relative;
    max-width: none;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
    background:
        linear-gradient(180deg, rgba(15,23,42,.45), rgba(15,23,42,.55)),
        url("../img/showroom.jpg") center / cover no-repeat;
    overflow: hidden;
}

.showroom-section-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.showroom-section .section-title,
.showroom-section .lead {
    color: #ffffff;
}

.showroom-section .section-title {
    margin-bottom: 1rem;
    text-shadow: 0 2px 18px rgba(15,23,42,.32);
}

.showroom-section .lead {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.75;
    text-shadow: 0 1px 12px rgba(15,23,42,.34);
}

/* ── Features grid ──────────────────────────────────────────── */
.features-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1.25rem;
    margin-top:            3rem;
}

.feature-card {
    background:    var(--bg-card);
    border:        1px solid var(--border-dim);
    border-radius: 14px;
    padding:       1.75rem;
    transition:    border-color var(--dur), background var(--dur), transform var(--dur);
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 12px 32px rgba(15,23,42,.06);
}

.feature-card::before {
    content:    '';
    position:   absolute;
    top:        -1px;
    left:       1.5rem;
    right:      1.5rem;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--blue-acc), transparent);
    opacity:    0;
    transition: opacity var(--dur);
}

.feature-card:hover {
    border-color: rgba(29,78,216,.24);
    background:   var(--bg-card-hover);
    transform:    translateY(-2px);
    box-shadow:   0 18px 40px rgba(15,23,42,.09);
}

.feature-card:hover::before { opacity: 1; }

.feature-icon {
    width:          48px;
    height:         48px;
    background:     var(--blue-light);
    border-radius:  12px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.375rem;
    color:          var(--blue-acc);
    margin-bottom:  1.125rem;
    flex-shrink:    0;
}

.feature-title {
    font-family:   var(--font-display);
    font-weight:   750;
    font-size:     1.1875rem;
    color:         var(--text-h);
    margin-bottom: .5rem;
    letter-spacing: 0;
}

.feature-desc {
    font-size:  .9375rem;
    color:      var(--text-body);
    line-height: 1.6;
}

/* ── How it works ───────────────────────────────────────────── */
.steps-list {
    list-style: none;
    margin-top: 3rem;
    display:    flex;
    flex-direction: column;
    gap:        1.5rem;
}

.step-item {
    display:     flex;
    gap:         1.25rem;
    align-items: flex-start;
}

.step-num {
    width:          42px;
    height:         42px;
    background:     var(--gold-dim);
    border:         1px solid var(--border-glow);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-family:    var(--font-display);
    font-weight:    800;
    font-size:      1.125rem;
    color:          var(--blue-acc);
    flex-shrink:    0;
}

.step-body { padding-top: .25rem; }

.step-title {
    font-family:   var(--font-display);
    font-weight:   750;
    font-size:     1.0625rem;
    color:         var(--text-h);
    margin-bottom: .25rem;
}

.step-desc {
    font-size:  .9375rem;
    color:      var(--text-body);
}

/* ── Pricing ────────────────────────────────────────────────── */
.pricing-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    justify-content:       center;
    gap:                   1.25rem;
    margin-top:            3rem;
    max-width:             1440px;
    margin-left:           auto;
    margin-right:          auto;
}

.pricing-section {
    max-width: none;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.pricing-section .features-section-head,
.pricing-section .pricing-cta {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    display:       flex;
    flex-direction: column;
    background:    var(--bg-card);
    border:        1px solid var(--border-dim);
    border-radius: 14px;
    padding:       1.35rem;
    transition:    border-color var(--dur), transform var(--dur);
    box-shadow:    0 12px 32px rgba(15,23,42,.06);
}

.pricing-card.featured {
    border-color: var(--blue-acc);
    background:   linear-gradient(160deg, #eff6ff, #ffffff);
    box-shadow:   var(--gold-glow);
    transform:    scale(1.02);
}

.pricing-name {
    font-size:     .8125rem;
    font-weight:   600;
    color:         var(--gold);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .75rem;
}

.pricing-price {
    font-family:   var(--font-display);
    font-weight:   850;
    font-size:     2rem;
    color:         var(--text-h);
    margin-bottom: .25rem;
    letter-spacing: 0;
}

.pricing-desc {
    min-height: 3.9rem;
    color: var(--text-body);
    font-size: .9rem;
    line-height: 1.45;
    margin-bottom: 1rem;
}

.pricing-period {
    font-size:     .8125rem;
    color:         var(--text-muted);
    margin-bottom: 1.25rem;
}

.pricing-public-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: .875rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: var(--blue-light);
    color: var(--blue-acc);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pricing-annual,
.pricing-trial-public {
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid var(--border-dim);
    color: var(--text-body);
    font-size: .8125rem;
    font-weight: 650;
    padding: .625rem .75rem;
    margin-bottom: 1rem;
}

.pricing-annual span {
    display: block;
    color: var(--text-muted);
    font-weight: 500;
}

.pricing-trial-public {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #15803d;
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
}

.pricing-card-action {
    margin-top: auto;
    padding-top: 1.25rem;
}

.pricing-card-action .btn-gold,
.pricing-card-action .btn-ghost {
    width: 100%;
    justify-content: center;
}

.pricing-features {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        .625rem;
    font-size:  .875rem;
    color:      var(--text-body);
}

.pricing-features li {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.pricing-features li::before {
    content:     '✓';
    color:       var(--blue-acc);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Dashboard preview panel ────────────────────────────────── */
.preview-panel {
    background:    var(--bg-card);
    border:        1px solid var(--border-dim);
    border-radius: 14px;
    padding:       1.5rem;
    margin-top:    3rem;
    overflow:      hidden;
    box-shadow:    0 18px 45px rgba(15,23,42,.10);
}

.preview-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .875rem 1rem;
    border-radius:   10px;
    margin-bottom:   .75rem;
    font-size:       .875rem;
    font-weight:     600;
}

.preview-bar-danger  { background: rgba(220,38,38,.08);  color: #b91c1c; border: 1px solid rgba(220,38,38,.20); }
.preview-bar-warning { background: rgba(217,119,6,.10);  color: #92400e; border: 1px solid rgba(217,119,6,.22); }
.preview-bar-ok      { background: rgba(22,163,74,.09);  color: #15803d; border: 1px solid rgba(22,163,74,.20); }

/* ── Access gate (requires login) ────────────────────────────── */
.access-gate {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem;
    text-align:      center;
}

.access-card {
    max-width:   440px;
    width:       100%;
    background:  var(--bg-card);
    border:      1px solid var(--border-dim);
    border-radius: 20px;
    padding:     2.5rem;
}

.access-icon {
    font-size:     3rem;
    color:         var(--gold);
    margin-bottom: 1rem;
}

.access-title {
    font-family:   var(--font-display);
    font-weight:   800;
    font-size:     1.75rem;
    color:         var(--text-h);
    margin-bottom: .625rem;
}

.access-desc {
    font-size:     .9375rem;
    color:         var(--text-body);
    margin-bottom: 1.75rem;
    line-height:   1.7;
}

/* ── Divider ────────────────────────────────────────────────── */
.divider {
    border: none;
    height: 1px;
    background: var(--border-dim);
    margin: 0;
}

/* ── Main content (flex:1 per sticky footer) ────────────────── */
.fe-main { flex: 1; }

/* ── Footer ─────────────────────────────────────────────────── */
.page-footer {
    padding:        1rem 1.5rem;
    font-size:      var(--fs-xs);
    color:          #94a3b8;
    border-top:     1px solid #e8ecf0;
    background:     #ffffff;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .35rem;
    flex-shrink:    0;
}

.pf-row {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             .4rem;
    justify-content: center;
}

.pf-credits {
    font-size: var(--fs-xs);
    opacity:   .65;
    gap:       .75rem;
}

.pf-link {
    color:           #64748b;
    text-decoration: none;
    transition:      color .2s;
}
.pf-link:hover { color: #2f80ed; }

.page-footer .separator { opacity: .4; }

.fe-footer-row {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             .5rem;
    justify-content: center;
}

.fe-footer-sep { opacity: .35; }

.fe-footer-credits {
    font-size: .75rem;
    opacity:   .7;
    gap:       1rem;
}

.footer-exit-link {
    color:           #2f80ed;
    text-decoration: none;
    font-weight:     500;
}

.footer-exit-link:hover { text-decoration: underline; }

/* Footer della login, riusato dal footer frontend pubblico */
.login-footer {
    background: #262626;
    border-top: 1px solid #e8ecf0;
}

/* Credits (condivisi con backend) */
.fe-footer-credit      { color: #4caf50; }
.fe-footer-heart       { color: #e53935; }
.fe-footer-credit-link { color: #4caf50; text-decoration: underline; }
.fe-footer-credit-link:hover { color: #81c784; text-decoration: none; }

.whatsapp-chat {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    border-radius: 999px;
    padding: .75rem 1rem;
    background: #25d366;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .24);
}

.whatsapp-chat:hover,
.whatsapp-chat:focus {
    color: #ffffff;
    background: #1fb95a;
    text-decoration: none;
}

.whatsapp-chat:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .35);
    outline-offset: 3px;
}

.whatsapp-chat i {
    font-size: 1.25rem;
}

.whatsapp-chat span {
    display: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 768px) {
    .whatsapp-chat span {
        display: inline;
    }
}

@media (max-width: 768px) {
    .section { padding: 3.5rem 1.25rem; }
    .front-header { padding: .875rem 1.25rem; }
    .front-nav { gap: 1rem; }
    .front-nav-link { display: none; }
    .pricing-card.featured { transform: none; }
    .hero { padding: 4rem 1.25rem 3rem; }
    .hero-home {
        min-height: 100vh;
        padding-top: 5rem;
        background-image:
            linear-gradient(180deg, rgba(248,250,252,.92) 0%, rgba(248,250,252,.82) 48%, rgba(248,250,252,.72) 100%),
            url("../img/header.jpg");
        background-position: 62% center;
    }
    .hero-home .hero-title,
    .hero-home .hero-subtitle,
    .hero-home .hero-note {
        max-width: none;
    }
    .hero-highlights { grid-template-columns: 1fr; }
    .preview-table-head,
    .preview-table-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
    .features-grid { grid-template-columns: 1fr; }
    .pricing-grid  { grid-template-columns: 1fr 1fr; }
    .whatsapp-chat {
        width: 52px;
        height: 52px;
        min-height: 52px;
        justify-content: center;
        gap: 0;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .hero-actions .btn-gold,
    .hero-actions .btn-ghost {
        width: 100%;
        justify-content: center;
    }
    .pricing-grid { grid-template-columns: 1fr; }
    .preview-table-head,
    .preview-table-row {
        gap: .35rem;
    }
    .preview-table-product-img {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
    .front-footer { padding: 1rem; }
    .fe-footer-credits { flex-direction: column; gap: .25rem; text-align: center; }
}

/* ── Utility ────────────────────────────────────────────────── */
.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.d-flex { display: flex; }
.gap-3  { gap: .75rem; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }

/* ── Features Page ─────────────────────────────────────────── */
.features-live-stats {
    margin-top: 2.5rem;
    display: inline-flex;
    gap: 2.5rem;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 16px 42px rgba(15,23,42,.08);
    border-radius: 12px;
    padding: 1.25rem 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.features-live-stat {
    text-align: center;
}

.features-live-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-h);
}

.features-live-stat-value.is-positive {
    color: #22c55e;
}

.features-live-stat-value.is-alert {
    color: var(--gold);
}

.features-live-stat-label {
    font-size: .8125rem;
    color: var(--text-muted);
}

.features-live-stat-divider {
    width: 1px;
    background: rgba(15, 23, 42, .10);
}

.features-live-stat-date {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-h);
}

.features-section-head {
    margin-bottom: 0;
}

.features-section-desc {
    margin: 0 auto;
}

.answer-panel {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: minmax(220px, .7fr) 1fr;
    gap: 2rem;
    align-items: start;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 14px 34px rgba(15,23,42,.07);
}

.answer-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--text-h);
}

.answer-panel p {
    color: var(--text-body);
    margin: 0;
}

.features-how-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.features-how-desc {
    margin-bottom: 2rem;
}

.preview-heading {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}

.preview-summary {
    display: flex;
    gap: .875rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.preview-summary-card {
    flex: 1;
    min-width: 80px;
    border-radius: 10px;
    padding: .875rem;
    text-align: center;
}

.preview-summary-card.is-danger {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
}

.preview-summary-card.is-warning {
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .2);
}

.preview-summary-card.is-success {
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .2);
}

.preview-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.preview-summary-value.is-danger {
    color: #b91c1c;
}

.preview-summary-value.is-warning {
    color: #92400e;
}

.preview-summary-value.is-success {
    color: #15803d;
}

.preview-summary-label {
    font-size: .75rem;
    color: var(--text-muted);
}

.preview-table {
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    overflow: hidden;
    font-size: .8125rem;
}

.preview-table-head,
.preview-table-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .5rem;
}

.preview-table-head {
    padding: .5rem .875rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-dim);
    color: var(--text-muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.preview-table-row {
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--border-dim);
    align-items: center;
}

.preview-table-product-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.preview-table-product-img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 8px;
    background: #ffffff;
    object-fit: cover;
}

.preview-table-product {
    color: var(--text-h);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-table-domain {
    color: var(--text-muted);
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-table-price {
    color: var(--text-body);
}

.preview-table-delta {
    font-weight: 600;
}

.preview-table-delta.is-negative {
    color: #b91c1c;
}

.preview-table-delta.is-positive {
    color: #15803d;
}

.pricing-price-custom {
    font-size: 1.5rem;
}

.pricing-cta {
    margin-top: 2.5rem;
}

.geo-answer-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.geo-answer-list article,
.faq-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.geo-answer-list h3,
.faq-card h3 {
    font-family: var(--font-display);
    color: var(--text-h);
    font-size: 1.125rem;
    line-height: 1.25;
    margin-bottom: .5rem;
}

.geo-answer-list p,
.faq-card p {
    color: var(--text-body);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
}

/* ── Pagina 404 ─────────────────────────────────────────────── */
.error-404-code {
    font-family:   var(--font-display);
    font-weight:   850;
    font-size:     clamp(6rem, 20vw, 12rem);
    color:         transparent;
    -webkit-text-stroke: 2px var(--gold);
    line-height:   1;
    margin-bottom: 1rem;
    opacity:       .35;
    user-select:   none;
}

@media (max-width: 900px) {
    .features-how-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .answer-panel {
        grid-template-columns: 1fr;
    }

    .features-live-stat-divider {
        display: none;
    }
}

/* ============================================================
   Legal documents (Condizioni Generali, Privacy, ecc.)
   ============================================================ */

.legal-doc {
    max-width: 880px;
    margin: 0 auto;
    padding: 3rem 1.25rem 5rem;
    color: var(--text-body);
    font-family: var(--font-body);
    line-height: 1.7;
}

.legal-doc-header { margin-bottom: 2.5rem; }

.legal-doc-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: .75rem;
}

.legal-doc-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.2;
    color: var(--text-h);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.legal-doc-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-deep);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.legal-doc-meta dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .2rem;
}
.legal-doc-meta dd {
    font-weight: 600;
    color: var(--text-h);
    font-size: .95rem;
}

.legal-doc-actions { margin-bottom: 1.5rem; }

.legal-doc-intro {
    font-size: 1rem;
    color: var(--text-body);
    background: var(--blue-light);
    border-left: 3px solid var(--blue-acc);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
}

/* ── Indice ──────────────────────────────────────────────── */
.legal-toc {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
}
.legal-toc-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 1rem;
}
.legal-toc-list {
    columns: 2;
    column-gap: 2rem;
    list-style: decimal inside;
    font-size: .9rem;
}
.legal-toc-list li { margin-bottom: .4rem; break-inside: avoid; }
.legal-toc-list a {
    color: var(--text-body);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.legal-toc-list a:hover {
    color: var(--blue-acc);
    border-bottom-color: var(--blue-acc);
}
@media (max-width: 640px) {
    .legal-toc-list { columns: 1; }
}

/* ── Sezioni e articoli ─────────────────────────────────── */
.legal-section { margin-bottom: 3rem; }

.legal-parte-title,
.legal-allegato-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--text-h);
    font-weight: 800;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--gold);
    margin: 3rem 0 1.5rem;
}

.legal-article,
.legal-subarticle {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-h);
    font-weight: 700;
    margin: 2.25rem 0 .75rem;
    scroll-margin-top: 1.5rem;
}
.legal-subarticle {
    font-size: 1.05rem;
    color: var(--blue-acc);
}

.legal-doc p { margin: .6rem 0; }
.legal-comma { margin-left: .75rem; }

.legal-doc ol,
.legal-doc ul {
    margin: .6rem 0 .9rem 2rem;
    padding-left: .5rem;
}
.legal-doc ol li,
.legal-doc ul li { margin-bottom: .3rem; }

.legal-list-alpha { list-style: lower-alpha; }
.legal-list-num   { list-style: decimal; }

/* Clausole vessatorie: presentazione con check-box visivo */
.legal-list-vex {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.legal-list-vex li {
    position: relative;
    padding: .5rem 0 .5rem 2rem;
    border-bottom: 1px dashed var(--border-dim);
}
.legal-list-vex li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8rem;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--gold);
    border-radius: 3px;
    background: var(--gold-dim);
}
.legal-list-vex li a {
    color: var(--blue-acc);
    text-decoration: none;
    font-weight: 600;
}
.legal-list-vex li a:hover { text-decoration: underline; }

.legal-firma {
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Footer del documento ───────────────────────────────── */
.legal-doc-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-dim);
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}
.legal-doc-version-stamp {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    background: var(--gold-dim);
    color: var(--gold);
    border-radius: 999px;
    font-weight: 600;
    margin-bottom: .75rem;
}

/* ============================================================
   Privacy Policy — componenti aggiuntivi (cards, tabelle, rights grid)
   Riusati anche per altri documenti legali ricchi di dati strutturati
   ============================================================ */

.legal-contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}
.legal-contact-card h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-h);
    margin-bottom: .85rem;
}
.legal-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.legal-contact-list li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--text-body);
}
.legal-contact-list i {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: .15rem;
}
.legal-contact-list strong { color: var(--text-h); }

/* Box informativi colorati */
.legal-info-box {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border-left: 4px solid;
    margin: 1.25rem 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--text-body);
}
.legal-info-box i { margin-right: .4rem; }
.legal-info-box strong { color: var(--text-h); }
.legal-info-box.info    { background: var(--blue-light); border-color: var(--blue-acc); }
.legal-info-box.warning { background: #fef3c7;          border-color: #d97706;        color: #78350f; }
.legal-info-box.success { background: #dcfce7;          border-color: #16a34a;        color: #14532d; }

/* Tabella finalità / cookie */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: 1rem 0 1.5rem;
}
.legal-table thead th {
    background: var(--bg-deep);
    color: var(--text-h);
    text-align: left;
    padding: .75rem 1rem;
    font-weight: 700;
    border-bottom: 2px solid var(--border-dim);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.legal-table tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-dim);
    vertical-align: top;
    color: var(--text-body);
}
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.legal-table-pill.no   { background: #e2e8f0; color: #475569; }
.legal-table-pill.yes  { background: #dcfce7; color: #14532d; }

/* Griglia diritti GDPR */
.legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.legal-rights-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    transition: border-color .2s, transform .2s;
}
.legal-rights-card:hover {
    border-color: var(--blue-acc);
    transform: translateY(-2px);
}
.legal-rights-card h4 {
    font-family: var(--font-display);
    font-size: .95rem;
    color: var(--text-h);
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.legal-rights-card h4 i { color: var(--blue-acc); }
.legal-rights-card p {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.55;
}

/* Navigazione rapida (TOC alternativa con icone) */
.legal-quick-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin: 1.5rem 0 2rem;
}
.legal-quick-nav a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    color: var(--text-body);
    font-size: .88rem;
    text-decoration: none;
    transition: all .2s;
}
.legal-quick-nav a:hover {
    border-color: var(--blue-acc);
    color: var(--blue-acc);
    background: var(--blue-light);
}
.legal-quick-nav a i { color: var(--gold); }
.legal-quick-nav a:hover i { color: var(--blue-acc); }