/**
 * sf-landing.css — le pagine che devono convertire
 *
 * Caricato solo sulle pagine dichiarate landing (inc/landing.php). Colori,
 * font e raggi vengono dai token: qui non c'è un colore letterale.
 *
 * @since 2026-08-12
 */

/* La colonna del contenuto si allarga: senza sidebar, il testo di una landing
   incolonnato a 570px lascia due terzi di schermo vuoti. */
.sf-landing .site-main,
.sf-landing .entry-content {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.sf-landing .entry-content > * { margin-block: 0 24px; }

/* Il hero e' largo 100vw: quando la pagina ha la barra di scorrimento, 100vw
   la comprende e nascerebbe uno scorrimento orizzontale. Qui si taglia. */
body.sf-landing { overflow-x: hidden; }

/* =========================================================================
   Hero — stampato FUORI dal contenuto (inc/landing.php), quindi davvero
   a tutta larghezza. Dentro .entry-content non ci riusciva: il tema padre
   mette .site-main in una griglia. Youzify risolve cosi' su /groups/.
   ========================================================================= */
.sf-hero {
    position: relative;
    isolation: isolate;          /* i livelli non escono da qui */
    background: linear-gradient(135deg, #0b1b3a 0%, #061224 100%);
    background-size: cover;
    background-position: center right;
    color: #fff;
    /* Ora che il hero sta FUORI dalla griglia di .site-main, lo sfondamento
       funziona: `.container` non e' una griglia e non trattiene. E' la stessa
       tecnica che Youzify usa per la sua fascia su /groups/. */
    width: 100vw;
    margin: 0 0 40px calc(50% - 50vw);
}
.sf-hero--foto { background-color: #061224; }

/* Il velo scuro sta SOTTO il testo. z-index dichiarati tutti e due: senza,
   l'ordine dipende da chi viene dopo nel DOM ed era proprio quello il difetto
   -- il testo finiva sotto il velo e non si leggeva. */
.sf-hero__velo {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        rgba(2, 14, 38, .95) 0%,
        rgba(2, 14, 38, .88) 40%,
        rgba(2, 14, 38, .5) 70%,
        rgba(2, 14, 38, .15) 100%);
}

/* LA SPAZIATURA NON E' OPZIONALE. Un testo dentro un contenitore non tocca
   mai il bordo: e' la regola che vale per ogni blocco di questo foglio. */
.sf-hero__inner {
    position: relative; z-index: 2;
    max-width: var(--sf-content-max-width, 1200px);
    margin: 0 auto;
    padding: 88px 40px;
    box-sizing: border-box;
}

.sf-hero__title {
    color: #fff !important;
    font-family: var(--sf-font-heading);
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.05;
    margin: 0 0 18px;
    max-width: 20ch;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.sf-hero__sub {
    color: #fff;
    font-size: 18px; line-height: 1.55;
    margin: 0; max-width: 54ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.sf-hero__cta { margin: 30px 0 0; }
.sf-hero__cta a {
    display: inline-block;
    background: var(--sf-brand-red);
    color: #fff !important;
    font-family: var(--sf-font-body);
    font-size: 16px; font-weight: 700;
    padding: 15px 32px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.sf-hero__cta a:hover { background: var(--sf-brand-red-hover); transform: translateY(-1px); }

@media (max-width: 780px) {
    .sf-hero__velo {
        background: linear-gradient(180deg, rgba(2, 14, 38, .82) 0%, rgba(2, 14, 38, .94) 70%);
    }
    .sf-hero__inner { padding: 56px 22px; }
    .sf-hero__title { max-width: none; }
}

/* =========================================================================
   Bottoni della landing
   ========================================================================= */
.sf-lp-cta a,
.sf-lp-cta .button {
    display: inline-block;
    background: var(--sf-brand-red);
    color: #fff !important;
    font-family: var(--sf-font-body);
    font-size: 16px; font-weight: 700;
    padding: 14px 30px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.sf-lp-cta a:hover,
.sf-lp-cta .button:hover { background: var(--sf-brand-red-hover); transform: translateY(-1px); }

/* =========================================================================
   Blocchi a griglia — i pacchetti
   ========================================================================= */
/* Colonne dichiarate, non `auto-fit`. Con auto-fit, appena la finestra si
   stringe, quattro card diventano 3+1 -- e una card sola in seconda riga
   sembra un errore di impaginazione, non una scelta. Cosi' invece i gradini
   sono 4 / 2 / 1: sempre righe piene. Fabio l'ha visto su una finestra
   desktop stretta il 14/08. */
.sf-lp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 32px;
}
/* Tre pacchetti (la sezione del sito) stanno in tre colonne. */
.sf-lp-grid--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1040px) {
    .sf-lp-grid, .sf-lp-grid--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sf-lp-grid, .sf-lp-grid--tre { grid-template-columns: 1fr; }
}

.sf-lp-card {
    background: var(--sf-bg-surface);
    border: 1px solid var(--sf-border-color);
    border-radius: var(--sf-radius-lg);
    padding: 22px 20px;
    display: flex; flex-direction: column;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.sf-lp-card:hover {
    box-shadow: var(--sf-shadow-hover);
    border-color: var(--sf-border-strong);
    transform: translateY(-2px);
}

/* Il pacchetto che consigliamo: si vede che è quello, senza scriverlo due volte. */
.sf-lp-card--best {
    border: 2px solid var(--sf-brand-red);
    position: relative;
}
.sf-lp-card--best::before {
    content: attr(data-nastro);
    position: absolute; top: -12px; left: 24px;
    background: var(--sf-brand-red); color: #fff;
    font-family: var(--sf-font-secondary);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
}

.sf-lp-card h3 {
    font-family: var(--sf-font-heading);
    font-size: 19px; line-height: 1.25;
    margin: 0 0 8px;
}
.sf-lp-card p { font-size: 14px; line-height: 1.5; color: var(--sf-text-secondary); margin: 0 0 14px; }
.sf-lp-card ul { font-size: 14px; line-height: 1.6; margin: 0 0 16px; padding-left: 18px; color: var(--sf-text-secondary); }

.sf-lp-price {
    font-family: var(--sf-font-body);
    font-size: 30px; font-weight: 700;
    color: var(--sf-text-primary);
    font-variant-numeric: tabular-nums;
    margin: 0 0 4px;
}
.sf-lp-price small { font-size: 14px; font-weight: 400; color: var(--sf-text-muted); }
.sf-lp-was {
    font-size: 13px; color: var(--sf-text-muted);
    margin: 0 0 16px;
}
.sf-lp-was s { opacity: .8; }

/* Il bottone del carrello sta in fondo: le card di una riga si allineano. */
.sf-lp-card .sf-lp-buy { margin-top: auto; }

/* WooCommerce avvolge il bottone in un <p> con un bordo grigio scritto a mano
   nello style inline. Lo shortcode accetta style="" per non emetterlo: qui si
   azzera anche il resto, per i casi in cui qualcuno lo dimentichi. */
.sf-lp-buy .add_to_cart_inline { border: 0 !important; padding: 0 !important; margin: 0; }
.sf-lp-buy .add_to_cart_inline .amount { display: none; }
.sf-lp-card .woocommerce a.button,
.sf-lp-card a.add_to_cart_button {
    display: block;
    text-align: center;
    background: var(--sf-brand-blue);
    color: #fff !important;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: var(--sf-radius-sm);
    text-decoration: none;
    margin: 0;
}
.sf-lp-card .woocommerce a.button:hover,
.sf-lp-card a.add_to_cart_button:hover { background: var(--sf-brand-blue-hover); }
.sf-lp-card a.added_to_cart {
    display: block; text-align: center;
    margin-top: 8px; font-size: 13px; font-weight: 600;
}

/* =========================================================================
   Il righello dei formati — le misure disegnate in scala
   ========================================================================= */
/* Il contenitore porta il fondo, l'interno porta la spaziatura: cosi' se un
   foglio del tema azzera il padding del riquadro, il contenuto resta staccato
   dal bordo lo stesso. Prima il primo formato finiva incollato a sinistra. */
.sf-lp-formats {
    background: var(--sf-bg-sidebar);
    border-radius: var(--sf-radius-lg);
    margin: 0 0 12px;
}
.sf-lp-formats__riga {
    display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end;
    justify-content: flex-start;   /* a sinistra, come il resto della pagina */
    padding: 22px 24px;
}

/* «Show all formats» — un <details> del browser, senza una riga di JavaScript. */
.sf-lp-formats__altri { border-top: 1px solid var(--sf-border-color); }
.sf-lp-formats__altri > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 24px;
    font-family: var(--sf-font-secondary);
    font-size: 13px; font-weight: 700;
    color: var(--sf-brand-blue);
    text-align: left;
}
.sf-lp-formats__altri > summary::-webkit-details-marker { display: none; }
.sf-lp-formats__altri > summary::after { content: ' \25BE'; }
.sf-lp-formats__altri[open] > summary::after { content: ' \25B4'; }
.sf-lp-formats__altri > summary:hover { text-decoration: underline; }
.sf-lp-format { text-align: left; }
.sf-lp-format__box {
    background: var(--sf-bg-surface);
    border: 2px dashed var(--sf-border-strong);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-secondary);
    font-size: 11px; font-weight: 700;
}
.sf-lp-format__label {
    display: block; margin-top: 8px;
    font-family: var(--sf-font-secondary);
    font-size: 11px; line-height: 1.35;
    color: var(--sf-text-secondary);
}
.sf-lp-format__label strong { display: block; color: var(--sf-text-primary); font-size: 12px; }

/* Le misure sono in scala 1:4, così i rapporti restano veri sullo schermo. */
.sf-fmt-300x250  { width: 75px;  height: 62px; }
.sf-fmt-300x600  { width: 75px;  height: 150px; }
.sf-fmt-728x90   { width: 182px; height: 22px; }
.sf-fmt-970x250  { width: 242px; height: 62px; }
.sf-fmt-1080     { width: 96px;  height: 96px; }
.sf-fmt-1200x628 { width: 150px; height: 78px; }

/* =========================================================================
   Fascia di rassicurazione
   ========================================================================= */
.sf-lp-note {
    border-left: 4px solid var(--sf-brand-red);
    background: var(--sf-bg-sidebar);
    border-radius: 0 var(--sf-radius-sm) var(--sf-radius-sm) 0;
    margin: 0 0 32px;
}
/* Il padding sta sull'INTERNO, non sul riquadro: sul riquadro veniva azzerato
   da un foglio del tema e il testo finiva incollato al bordo sinistro.
   E' lo stesso difetto che si era gia' visto sul blocco dei formati: quando
   un contenitore porta sia il fondo sia la spaziatura, basta un reset a
   perderla. Contenitore = fondo. Interno = spaziatura. */
.sf-lp-note__inner { padding: 20px 24px; }
.sf-lp-note p:last-child { margin-bottom: 0; }

.sf-lp-sezione-titolo {
    font-family: var(--sf-font-heading);
    font-size: clamp(22px, 3vw, 30px);
    margin: 40px 0 8px;
}
.sf-lp-sezione-sub { color: var(--sf-text-secondary); margin: 0 0 22px; max-width: 70ch; }

@media (max-width: 600px) {
    .sf-lp-hero { padding: 32px 22px; }
    .sf-lp-formats { gap: 14px; padding: 20px 16px; }
}

/* Il secondo invito: chi vuole leggere le specifiche prima di comprare non
   deve tornare indietro a cercarle. Testo, non bottone: la gerarchia resta
   al carrello. */
.sf-lp-dettagli { margin: 18px 0 0; text-align: center; font-size: 13px; }
.sf-lp-dettagli a { font-weight: 700; text-decoration: none; }
.sf-lp-dettagli a:hover { text-decoration: underline; }

/* =========================================================================
   Founding partner — il blocco della promo di lancio
   ========================================================================= */
.sf-lp-founder {
    position: relative;
    isolation: isolate;
    background-color: #0b1b3a;
    background-image: url('../image/hero-founder.jpg');
    background-size: cover;
    background-position: center right;
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    margin: 48px 0 32px;
}
/* Velo sotto, testo sopra: z-index dichiarati entrambi, come sul hero. */
.sf-lp-founder::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        rgba(4, 12, 30, .95) 0%,
        rgba(4, 12, 30, .9) 45%,
        rgba(4, 12, 30, .55) 75%,
        rgba(4, 12, 30, .2) 100%);
}
/* La spaziatura sta sull'interno. Sempre. */
.sf-lp-founder__inner {
    position: relative; z-index: 2;
    padding: 44px 40px;
    max-width: 46rem;
}

.sf-lp-founder__badge {
    display: inline-block;
    background: var(--sf-brand-red);
    color: #fff;
    font-family: var(--sf-font-secondary);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px;
    margin: 0 0 16px;
}
.sf-landing .entry-content .sf-lp-founder h2,
.sf-lp-founder h2 {
    color: #fff !important;
    font-family: var(--sf-font-heading);
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.1;
    margin: 0 0 14px;
    text-wrap: balance;
}
.sf-lp-founder__claim { color: rgba(255, 255, 255, .9); font-size: 17px; line-height: 1.55; margin: 0 0 20px; }

.sf-lp-founder__lista { list-style: none; margin: 0 0 22px; padding: 0; }
.sf-lp-founder__lista li {
    color: rgba(255, 255, 255, .88);
    font-size: 15px; line-height: 1.5;
    padding: 0 0 0 26px; margin: 0 0 9px;
    position: relative;
}
.sf-lp-founder__lista li::before {
    content: '\2713';
    position: absolute; left: 0; top: 0;
    color: var(--sf-brand-red); font-weight: 700;
}
.sf-lp-founder__lista strong { color: #fff; }

.sf-lp-founder__prezzo { margin: 0 0 22px; }
.sf-lp-founder__cifra {
    color: #fff; font-family: var(--sf-font-body);
    font-size: 42px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-right: 12px;
}
.sf-lp-founder__was { color: rgba(255, 255, 255, .7); font-size: 14px; }

.sf-lp-founder__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sf-lp-founder__azioni .sf-lp-buy .add_to_cart_button,
.sf-lp-founder__azioni .sf-lp-buy a.button {
    display: inline-block;
    background: var(--sf-brand-red);
    color: #fff !important;
    font-weight: 700; font-size: 16px;
    padding: 15px 32px; border-radius: 999px;
    text-decoration: none;
}
.sf-lp-founder__azioni .sf-lp-dettagli { margin: 0; text-align: left; }
.sf-lp-founder__azioni .sf-lp-dettagli a { color: #fff; }

.sf-lp-founder__nota { margin: 22px 0 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.sf-lp-founder__nota a { color: #fff; font-weight: 600; }

@media (max-width: 780px) {
    .sf-lp-founder { background-position: center; }
    .sf-lp-founder::before {
        background: linear-gradient(180deg, rgba(4, 12, 30, .85) 0%, rgba(4, 12, 30, .95) 60%);
    }
    .sf-lp-founder__inner { padding: 32px 22px; max-width: none; }
}

/* =========================================================================
   LA LANDING D'ISCRIZIONE — /newsletter/
   =========================================================================
   Non è una landing di vendita: niente griglie di schede, solo un paragrafo,
   un form e due elenchi. Tre correzioni, tutte allo stesso scopo — che chi
   arriva qui lasci l'indirizzo invece di leggere e andarsene:

   1. la MISURA. A 1100px le righe sono lunghe da leggere; qui si stringe a
      quella di lettura. La spalla la toglie già `landing.php`.
   2. il FORM AL CENTRO e più grande: è l'unica cosa che questa pagina deve
      far fare, e a 520px allineato a sinistra sembrava un riquadro di servizio.
   3. il form resta SOPRA la piega anche da telefono, dove è quasi tutto.
   ========================================================================= */

.sf-lp-newsletter .site-main,
.sf-lp-newsletter .entry-content { max-width: 760px; }

/* Il form: al centro, più largo, e con aria intorno che lo stacca dal testo. */
.sf-lp-newsletter .entry-content .sf-newsletter {
    max-width: 640px;
    margin: 28px auto 36px;
}

/* Titoli di sezione centrati: su una pagina stretta e simmetrica, allineati a
   sinistra sembrano l'inizio di un articolo — e questa non è una lettura. */
.sf-lp-newsletter .entry-content h2 {
    text-align: center;
    margin-top: 40px;
}

/* Gli elenchi restano allineati a sinistra: un elenco centrato non si legge. */
.sf-lp-newsletter .entry-content ul { text-align: left; }

/* La firma in fondo, come una lettera. */
.sf-lp-newsletter .entry-content > p:last-child { text-align: center; opacity: .85; }

@media (max-width: 780px) {
    /* Da telefono il form deve stare il più in alto possibile: qui arriva
       la maggior parte di chi ci capita. */
    .sf-lp-newsletter .entry-content .sf-newsletter { margin: 20px auto 28px; }
}