/*
 * Pagine pubbliche (home, landing, guida, contatti, legali). Foglio di stile leggero e indipendente da Tabler,
 * che pesa mezzo megabyte e serve solo al gestionale. I token (colori, spaziature) arrivano da match.css,
 * lo stesso del tabellone: cosi' sito e prodotto restano coerenti.
 * Breakpoint: < 640px mobile, 640-899 tablet, >= 900px desktop.
 */

:root {
    --c-link: #00797A;      /* turchese scuro: contrasto AA su bianco (il turchese pieno sta sotto il 4,5:1) */
    --f-max: 1120px;
    --f-read: 760px;
}

.f-body {
    margin: 0;
    font-family: var(--font);
    color: var(--c-text);
    background: #FFFFFF;
    line-height: 1.6;
}

.f-body a { color: var(--c-link); }
.f-body a:hover { text-decoration-thickness: 2px; }
.f-body img { max-width: 100%; height: auto; }

.f-skip {
    position: absolute; left: -9999px; top: var(--s-2); z-index: 100;
    background: #FFFFFF; color: var(--c-base); padding: var(--s-2) var(--s-4); border-radius: 8px; font-weight: 700;
}
.f-skip:focus { left: var(--s-2); }

.f-container { max-width: var(--f-max); margin: 0 auto; padding: 0 var(--s-4); }
.f-read { max-width: var(--f-read); }

/* ---------- testata ---------- */

.f-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--c-line);
}
.f-header-in { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; }
.f-logo { display: inline-flex; flex: none; }
.f-logo img { display: block; }

.f-links { display: none; gap: var(--s-5); margin-left: var(--s-4); }
.f-links a { color: var(--c-text); text-decoration: none; font-weight: 600; font-size: .95rem; padding: var(--s-2) 0; }
.f-links a:hover, .f-links a[aria-current="page"] { color: var(--c-link); text-decoration: underline; text-underline-offset: 6px; }

.f-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
/* sul telefono in testata restano Accedi e il menu: l'invito a iniziare e' gia' nella prima schermata */
.f-actions .f-btn-dark { display: none; }
@media (min-width: 640px) { .f-actions .f-btn-dark { display: inline-flex; } }

/* menu per i telefoni, senza JavaScript */
.f-menu { position: relative; }
.f-menu summary {
    list-style: none; cursor: pointer; min-height: var(--touch); min-width: var(--touch);
    display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--c-line);
}
.f-menu summary::-webkit-details-marker { display: none; }
.f-menu-list {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: flex; flex-direction: column;
    background: #FFFFFF; border: 1px solid var(--c-line); border-radius: 12px; padding: var(--s-2); box-shadow: 0 12px 32px rgba(16, 42, 67, .18);
}
.f-menu-list a { color: var(--c-text); text-decoration: none; padding: var(--s-3); border-radius: 8px; font-weight: 600; min-height: var(--touch); display: flex; align-items: center; }
.f-menu-list a:hover { background: var(--c-surface); }

@media (min-width: 900px) {
    .f-links { display: flex; }
    .f-menu { display: none; }
}

/* ---------- pulsanti ---------- */

.f-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--touch); padding: 0 var(--s-5); border-radius: 10px; border: 2px solid transparent;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center;
}
.f-body a.f-btn { text-decoration: none; }
.f-btn-lg { min-height: 52px; font-size: 1.05rem; padding: 0 var(--s-6); }
.f-body .f-btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.f-body .f-btn-primary:hover { background: #12BDBD; }
.f-body .f-btn-dark { background: var(--c-base); color: #FFFFFF; }
.f-body .f-btn-dark:hover { background: #1B3D5C; }
.f-body .f-btn-outline { border-color: currentColor; background: transparent; color: var(--c-base); }
.f-hero .f-btn-outline, .f-cta .f-btn-outline { color: #FFFFFF; }
.f-body .f-btn-ghost { color: var(--c-text); }

/* ---------- hero ---------- */

.f-hero { background: linear-gradient(180deg, var(--c-base) 0%, #0B1F33 100%); color: #FFFFFF; padding: var(--s-6) 0 56px; overflow: hidden; }
.f-hero a:not(.f-btn) { color: #9FE9E9; }
.f-hero-grid { display: grid; gap: 40px; align-items: center; }
.f-eyebrow {
    display: inline-block; margin: 0 0 var(--s-3); padding: var(--s-1) var(--s-3); border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35); font-size: .85rem; font-weight: 600; color: #D6F5F5; letter-spacing: .02em;
}
.f-hero h1 { margin: 0 0 var(--s-4); font-size: clamp(2rem, 6.5vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.f-lead { margin: 0 0 var(--s-5); font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: #D3DEE9; max-width: 36em; }
.f-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.f-note { margin: var(--s-4) 0 0; font-size: .9rem; color: #B7C6D6; }

@media (min-width: 900px) {
    .f-hero { padding: 72px 0 80px; }
    .f-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* demo: tabellone su una TV e controller su un telefono, entrambi animati dallo stesso motore del prodotto */
.f-devices { position: relative; padding-bottom: 8px; }
.f-chip {
    position: absolute; top: -12px; left: var(--s-3); z-index: 3; padding: 2px var(--s-3); border-radius: 999px;
    background: var(--c-accent); color: var(--c-on-accent); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.f-tv { border: 10px solid #07121F; border-radius: 16px; background: #07121F; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.f-tv-stand { width: 38%; height: 12px; margin: 0 auto; background: #07121F; border-radius: 0 0 8px 8px; }

.f-phone {
    width: 200px; margin: -16px auto 0; position: relative; z-index: 2;
    border: 7px solid #07121F; border-radius: 28px; background: var(--c-surface); padding: var(--s-3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4); color: var(--c-text);
}
.f-phone-btns { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.f-phone .m-btn { min-height: 52px; font-size: .95rem; pointer-events: none; }
.f-phone .m-point { min-height: 56px; font-size: 1rem; }
.f-phone .m-point-team { font-size: .72rem; }
.f-phone .m-btn.is-tap { transform: scale(.96); outline: 3px solid #FFFFFF; transition: transform .12s; }

/* il tabellone di esempio e' piccolo: dimensioni fisse, qualunque sia la larghezza della finestra */
.f-demo .sb { --sb-name: 1rem; --sb-num: 1.6rem; --sb-points: 2.2rem; padding: var(--s-3); gap: var(--s-2); }
.f-tv .sb { --sb-name: 1.1rem; --sb-num: 1.8rem; --sb-points: 2.6rem; border-radius: 6px; }
.f-phone .sb { --sb-name: .8rem; --sb-num: 1.1rem; --sb-points: 1.5rem; padding: var(--s-2); }
.f-demo .sb-row { padding: var(--s-1) var(--s-2); row-gap: 2px; }
.f-demo .sb-note { min-height: 1.4em; font-size: .85rem; }
.f-phone .sb-head { display: none; }

/* dal tablet in su TV e telefono stanno affiancati: il telefono sfiora solo il bordo della TV e non ne copre i punti */
@media (min-width: 640px) {
    .f-devices { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 28px; }
    .f-tv { grid-column: 1; grid-row: 1; }
    .f-tv-stand { grid-column: 1; grid-row: 2; }
    .f-phone { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 -28px -12px; width: 180px; }
}
@media (min-width: 900px) {
    .f-tv .sb { --sb-name: 1.2rem; --sb-num: 1.9rem; --sb-points: 2.7rem; }
    .f-phone { width: 190px; }
}

/* nel telefono servono solo nome, set, game e punti: niente etichette ne' set vinti */
.f-phone .sb-sets-won { display: none; }
.f-phone .sb-sets-won::before, .f-phone .sb-games::before, .f-phone .sb-points::before, .f-phone .sb-set::before { display: none; }
.f-phone .sb-row { align-items: center; }

/* ---------- sezioni ---------- */

.f-section { padding: 56px 0; }
.f-section-alt { background: var(--c-surface); }
.f-section h2 { margin: 0 0 var(--s-3); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; letter-spacing: -.01em; color: var(--c-base); }
.f-section h3 { margin: 0 0 var(--s-2); font-size: 1.15rem; color: var(--c-base); }
.f-intro { margin: 0 0 var(--s-6); color: var(--c-muted); font-size: 1.05rem; max-width: 46em; }

.f-grid { display: grid; gap: var(--s-4); }
.f-grid-3, .f-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .f-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .f-grid-3 { grid-template-columns: repeat(3, 1fr); } .f-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.f-card { background: #FFFFFF; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--s-5); }
.f-card p { margin: 0; color: var(--c-muted); }
.f-section-alt .f-card { border-color: transparent; box-shadow: 0 1px 3px rgba(16, 42, 67, .08); }

.f-icon { display: block; width: 44px; height: 44px; margin-bottom: var(--s-3); padding: 10px; border-radius: 10px; background: var(--c-base); color: #FFFFFF; }
.f-icon svg { display: block; width: 100%; height: 100%; }

.f-num {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--s-3);
    border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-weight: 800; font-size: 1.1rem;
}

.f-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.f-list li { position: relative; padding-left: 32px; }
.f-list li::before {
    content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%;
    background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23102A43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.f-list-no li::before {
    background: var(--c-line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%23172B4D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.f-split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .f-split { grid-template-columns: 1fr 1fr; } }

.f-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.f-table th, .f-table td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.f-table th { color: var(--c-base); }
.f-tablewrap { overflow-x: auto; }

/* ---------- domande frequenti ---------- */

.f-faq { display: grid; gap: var(--s-2); max-width: var(--f-read); }
.f-faq details { background: #FFFFFF; border: 1px solid var(--c-line); border-radius: 10px; }
.f-faq summary { cursor: pointer; padding: var(--s-4); font-weight: 700; color: var(--c-base); list-style: none; display: flex; justify-content: space-between; gap: var(--s-3); min-height: var(--touch); }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--c-link); }
.f-faq details[open] summary::after { content: "\2212"; }
.f-faq .f-answer { padding: 0 var(--s-4) var(--s-4); color: var(--c-text); }
.f-faq .f-answer p { margin: 0 0 var(--s-2); }

/* ---------- invito finale e piede ---------- */

.f-cta { background: var(--c-base); color: #FFFFFF; padding: 56px 0; text-align: center; }
.f-cta h2 { color: #FFFFFF; margin: 0 0 var(--s-3); font-size: clamp(1.5rem, 4vw, 2.1rem); }
.f-cta p { margin: 0 auto var(--s-5); color: #D3DEE9; max-width: 36em; }
.f-cta .f-cta-row { justify-content: center; }

.f-footer { background: #0B1F33; color: #B7C6D6; padding: var(--s-6) 0 var(--s-5); font-size: .95rem; }
.f-footer a { color: #D6F5F5; }
.f-footer-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .f-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.f-footer h2 { margin: 0 0 var(--s-2); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; }
.f-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.f-footer .f-logo img { filter: brightness(0) invert(1); }
.f-copy { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; }
.f-link-btn { background: none; border: 0; padding: 0; font: inherit; color: #D6F5F5; text-decoration: underline; cursor: pointer; }

/* ---------- testi lunghi (guida, legali) e moduli ---------- */

.f-page-head { background: var(--c-surface); padding: 40px 0 var(--s-5); border-bottom: 1px solid var(--c-line); }
.f-page-head h1 { margin: 0 0 var(--s-2); font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; color: var(--c-base); letter-spacing: -.01em; }
.f-page-head p { margin: 0; color: var(--c-muted); max-width: 44em; font-size: 1.05rem; }
.f-crumbs { margin: 0 0 var(--s-3); font-size: .9rem; color: var(--c-muted); }

.f-prose { padding: var(--s-6) 0 56px; }
.f-prose h2 { margin: var(--s-6) 0 var(--s-2); font-size: 1.5rem; color: var(--c-base); }
.f-prose h3 { margin: var(--s-5) 0 var(--s-2); font-size: 1.15rem; color: var(--c-base); }
.f-prose p, .f-prose li { max-width: var(--f-read); }
.f-prose ul, .f-prose ol { padding-left: 1.25em; }
.f-prose li { margin-bottom: var(--s-1); }

.f-callout { margin: var(--s-4) 0; padding: var(--s-4); border-radius: var(--radius); background: var(--c-surface); border-left: 4px solid var(--c-accent); max-width: var(--f-read); }
.f-callout p { margin: 0; }
.f-alert { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: 10px; background: #FFF4D6; color: #5C3D00; border: 1px solid #F0D58A; max-width: var(--f-read); }

.f-form { display: grid; gap: var(--s-4); max-width: 560px; }
.f-field label { display: block; margin-bottom: var(--s-1); font-weight: 700; color: var(--c-base); }
.f-field input[type=text], .f-field input[type=email], .f-field input[type=tel], .f-field select, .f-field textarea {
    width: 100%; min-height: var(--touch); padding: var(--s-2) var(--s-3); border: 2px solid #8896A5; border-radius: 10px;
    font: inherit; color: var(--c-text); background: #FFFFFF;
}
.f-field textarea { min-height: 120px; resize: vertical; }
.f-field .f-hint { font-size: .85rem; color: var(--c-muted); margin-top: var(--s-1); }
.f-error { color: var(--c-err); font-weight: 600; margin-top: var(--s-1); }
.f-check { display: flex; gap: var(--s-3); align-items: flex-start; }
.f-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.f-hp { position: absolute; left: -9999px; }

/* ---------- consenso ai cookie (solo se le statistiche sono attive) ---------- */

.f-consent {
    position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 90; max-width: 720px; margin: 0 auto;
    background: #FFFFFF; color: var(--c-text); border: 2px solid var(--c-base); border-radius: var(--radius); padding: var(--s-4);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .25);
}
.f-consent[hidden] { display: none; }
.f-consent p { margin: 0 0 var(--s-3); }
.f-consent .f-cta-row .f-btn { flex: 1 1 140px; }

@media (prefers-reduced-motion: reduce) {
    .f-phone .m-btn.is-tap { transition: none; }
}