/* ============================================================================
   LA PAGINA DELLE OPPORTUNITA' (`/opportunity`) - 07/10/2026
   ----------------------------------------------------------------------------
   IL VESTITO DELLA LANDING, ANCHE QUI. Il titolare: "ora /opportunity va adeguato allo stile usato in
   /articolo ... penso che sia piu' spazioso, arioso ... e piu' leggibile ... e responsive". E' la stessa
   richiesta fatta per l'editoriale il giorno prima: due pagine della stessa casa che si vedevano
   diverse.

   PERCHE' UN FOGLIO NUOVO, E PERCHE' RECINTATO. L'aspetto di questa pagina non sta qui: sta in
   `invite.css` (le classi `iv-*`, 310 regole) e in `studio.css` (`st-*`) - e quei due fogli sono gli
   STESSI di `/crew`, `/invita` e `/studio`. Cambiarli la' vuol dire cambiare quattro pagine per
   vestirne una: e' il difetto che il titolare ha gia' pagato una volta ("il css, essendo alcuni globali
   si tocca una parte e si sballa l'altra", 15/09/2026). Quindi nessuna riga tolta a nessuno, e ogni
   regola di questo foglio comincia con `.op-page`: la classe che sta SOLO nel `<body>` di
   `opportunity.html`. Chi vorra' questo vestito su un'altra pagina lo accende con una parola.

   LA TAVOLOZZA E' QUELLA DELLA LANDING, letta col prefisso `--ld-` come fa `articolo.css`. Questa e'
   pero' la TERZA copia degli stessi valori (la prima e' `public/landing/editorial/css/editorial.css`,
   la seconda il blocco `:root` di `articolo.css`): va detto che non e' l'ideale, e che la copia giusta
   e' un foglio di tavolozza solo, caricato da tutte e due le pagine. Non si fa adesso perche'
   `articolo.css` e' appena passato sotto le mani del titolare e non si sposta un blocco da un foglio
   che sta scrivendo lui. Una differenza voluta rispetto ad `articolo.css`: qui i `--ld-*` sono legati
   a `.op-page` e non a `:root`, cosi' non escono da questa pagina nemmeno per sbaglio.

   I due temi ci sono tutti e due, come nel foglio dell'editoriale.
   ============================================================================ */

.op-page {
    --ld-navy-1: #0a1338;
    --ld-navy-2: #142a72;
    --ld-navy-3: #35206e;

    --ld-cyan: #4fd8ff;
    --ld-violet: #6d4dfa;
    --ld-blue: #3f6df0;
    --ld-gold: #f7bb3c;

    --ld-ink: #0a0f1f;
    --ld-ink-soft: #26304d;
    --ld-muted: #5d6781;
    --ld-card: #fff;
    --ld-card-soft: #f7f9fe;
    --ld-border: #e7ecf7;
    --ld-border-strong: #cfd8f2;

    --ld-grad-ico: linear-gradient(135deg, #2fb9f5 0%, #3f6df0 100%);
    --ld-grad-cta: linear-gradient(100deg, #5b2fd6 0%, #3f6df0 46%, #2f9bf6 100%);

    /* La copertina: lo stesso fondo dell'apertura di /articolo - il navy, l'alone blu in alto a
       destra e quello viola in basso a sinistra. */
    --ld-grad-hero:
        radial-gradient(118% 76% at 82% 10%, rgba(60,124,255,.55) 0%, rgba(60,124,255,0) 62%),
        radial-gradient(90% 60% at 8% 96%, rgba(120,70,255,.35) 0%, rgba(120,70,255,0) 70%),
        linear-gradient(160deg, var(--ld-navy-1) 0%, var(--ld-navy-2) 46%, var(--ld-navy-3) 100%);

    --ld-r-card: 22px;
    --ld-shadow-card: 0 18px 44px rgba(18,28,70,.10);
    --ld-dato: #3f6df0;

    /* IL FONDO DELLA PAGINA (era di `.iv-page`: due aloni viola/teal, i colori delle prime due
       linguette). Ora e' lo stesso tono della landing - azzurro e viola tenui su un chiaro - e le
       schede bianche si staccano da sole, senza dover disegnare un bordo per ognuna. */
    background-color: #f4f6fd;
    background-image:
        radial-gradient(900px 460px at 10% -10%, rgba(63,109,240,.16), transparent 62%),
        radial-gradient(760px 420px at 100% 0%, rgba(109,77,250,.14), transparent 64%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[data-theme="dark"] .op-page {
    --ld-ink: #eef1ff;
    --ld-ink-soft: #c9d1ec;
    --ld-muted: #98a2c6;
    --ld-card: #1a2043;
    --ld-card-soft: #202751;
    --ld-border: #2c3462;
    --ld-border-strong: #3b457c;
    --ld-shadow-card: 0 18px 44px rgba(0,0,0,.5);
    --ld-dato: #7fb0ff;
    background-color: #0b1020;
    background-image:
        radial-gradient(900px 460px at 10% -10%, rgba(63,109,240,.22), transparent 62%),
        radial-gradient(760px 420px at 100% 0%, rgba(109,77,250,.18), transparent 64%);
}

/* ============================================================================
   1 - LA PAGINA RESPIRA
   ----------------------------------------------------------------------------
   Il fondo (che sta nel blocco della tavolozza, qui sopra) e' lo stesso tono della landing. Qui sotto
   resta quello che si puo' solo dire una volta che il fondo c'e': un filo d'aria ai lati e in fondo, e
   la lastra bianca che diventa la pagina.
   ============================================================================ */
/* Un filo d'aria in piu' ai lati e in fondo: la pagina finiva appiccicata al bordo della finestra. */
.op-page .st-container { max-width: 1080px; padding: 18px 16px 48px; }

/* LA LASTRA BIANCA DIVENTA LA PAGINA (07/10/2026). La vista stava dentro una scheda bianca che
   conteneva altre schede bianche: bianco su bianco, bordi dentro bordi, e l'occhio non capiva piu'
   dove cominciava un blocco. Qui la lastra perde fondo, bordo e ombra - solo la lastra ESTERNA (`>`:
   i riquadri che stanno dentro restano come sono) - e i blocchi tornano a galleggiare sul fondo
   tinto: la stessa figura delle sezioni di /articolo. */
.op-page #stPaneInvite > .st-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* La testata della pagina: il titolo e il collegamento al Creator Hub. L'icona diventa la pastiglia
   tonda della landing (lo stesso gradiente delle icone tonde della landing). */
.op-page #stPaneInvite > .st-card > .st-card-head { margin: 4px 4px 16px; gap: 12px; }
.op-page #stPaneInvite > .st-card .st-card-title {
    padding: 0;
    gap: 10px;
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ld-ink, #0a0f1f);
}
.op-page #stPaneInvite > .st-card .st-card-title svg {
    width: 36px; height: 36px; padding: 9px;
    border-radius: 999px;
    color: #fff;
    background-image: var(--ld-grad-ico);
    box-shadow: 0 8px 18px rgba(63,109,240,.30);
}
.op-page #stPaneInvite > .st-card .st-btn-outline {
    background: var(--ld-card, #fff);
    border: 1px solid var(--ld-border-strong, #cfd8f2);
    color: var(--ld-ink-soft, #26304d);
    padding: 9px 14px;
    font-size: .84rem;
    border-radius: 999px;
}
.op-page #stPaneInvite > .st-card .st-btn-outline:hover { border-color: var(--ld-blue, #3f6df0); color: var(--ld-blue, #3f6df0); }

/* ============================================================================
   2 - LE LINGUETTE, E IL DIFETTO CHE C'ERA
   ----------------------------------------------------------------------------
   MISURATO IL 07/10/2026, A 820px DI LARGHEZZA: la striscia delle linguette era larga 816px dentro
   un contenitore da 762px - sbordava di 54px e la PAGINA INTERA scorreva di lato ("scorre di lato:
   True", la misura sta in `check_opportunity_vestito.py`). Non era un problema di misure: era che
   `.st-seg` e' `inline-flex` con figli che non si stringono, quindi la sua larghezza minima era il
   contenuto intero e nessuno la obbligava a stare dentro. Con `width: fit-content` + `max-width:
   100%` + `flex-wrap: wrap` la striscia resta compatta sul monitor (la richiesta del titolare del
   14/09: non una pill larga tutta la pagina) e va a capo quando lo spazio finisce.
   ============================================================================ */
.op-page [data-iv-tabs] {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    margin: 0 0 24px;
    padding: 5px;
    overflow: visible;
    border-radius: 999px;
    border: 1px solid var(--ld-border, #e7ecf7);
    background: var(--ld-card, #fff);
    box-shadow: var(--ld-shadow-card);
}
.op-page [data-iv-tabs] .st-seg-btn {
    min-height: 44px;
    padding: 10px 17px;
    border-radius: 999px;
    font-size: .89rem;
    font-weight: 700;
    color: var(--ld-ink-soft, #26304d);
}
.op-page [data-iv-tabs] .st-seg-btn:hover { color: var(--ld-blue, #3f6df0); background: rgba(63,109,240,.07); }
.op-page [data-iv-tabs] .st-seg-btn.is-active {
    background-image: var(--ld-grad-cta);
    color: #fff;
    box-shadow: 0 10px 22px rgba(63,109,240,.30);
}
.op-page [data-iv-tabs] .st-seg-btn.is-active:hover { color: #fff; }

/* ============================================================================
   3 - LA COPERTINA (l'hero) - il navy della landing anche qui
   ----------------------------------------------------------------------------
   Era un gradiente viola->teal con gli intagli del biglietto colorati di viola e teal: bello, ma era
   la tavolozza del Creator Hub, non quella della casa. Ora e' la stessa copertina di /articolo: navy,
   alone azzurro in alto a destra, alone viola in basso, raggio 22 e ombra lunga. Il testo cresce -
   titolo `clamp` fino a 2.35rem, peso 900, spaziatura negativa - e il biglietto del codice diventa
   una lastra di vetro, come le note dentro la copertina dell'editoriale.
   ============================================================================ */
.op-page .iv-hero {
    grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr);
    gap: 28px;
    padding: 32px 30px 36px;
    border: 1px solid transparent;
    border-radius: var(--ld-r-card, 22px);
    background-color: var(--ld-navy-1, #0a1338);
    background-image: var(--ld-grad-hero);
    box-shadow: 0 22px 48px rgba(14,22,66,.26);
    color: #fff;
}
/* L'alone della landing: era un cerchio bianco al 34%, adesso e' azzurro e piu' largo. */
.op-page .iv-hero::after {
    top: -170px; right: -90px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(79,216,255,.28), transparent 62%);
}
.op-page .iv-hero h2 {
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + 1.7vw, 2.35rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 3px 22px rgba(4,10,40,.5);
}
.op-page .iv-hero p {
    max-width: 42em;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.62;
    color: #dbe2f8;
}
.op-page .iv-kicker {
    padding: 7px 13px;
    border-radius: 999px;
    border-color: rgba(255,255,255,.16);
    background: rgb(3 169 244 / 21%);
    color: #d5ecff;
    font-size: 11.5px;
    letter-spacing: .1em;
    width: max-content;
}
.op-page .iv-hero__sponsor { font-weight: 700; }
.op-page .iv-hero__sponsor a { color: var(--ld-cyan, #4fd8ff); }

/* ============================================================================
   3-bis - LO SCHELETRO DELLA COPERTINA (04/10/2026)
   ----------------------------------------------------------------------------
   IL TITOLARE, guardando i tre disegni: «a me piacciono moltissimo ... come sono
   rappresentati gli influencer con le frecce ... come i prodotti sono stati disegnati
   ... il background che chiude con una immagine. comprendi i particolari dello stile?».
   E poi, sulla partenza: «prima lo scheletro condiviso a tutti i tab: hero navy +
   testata con icona grande + puntini + onda di chiusura».

   Lo scheletro sono TRE pezzi, e stanno TUTTI qui (recintati con `.op-page`, come
   tutto il resto di questo foglio):
     - il TONDO coll'icona della linguetta, in testa alla copertina e ACCANTO al titolo
       (nelle immagini e' il megafono, il bersaglio, il gruppo di persone, il
       portafoglio). Il segno che fa riconoscere la sezione a colpo d'occhio;
     - il GRAPPOLO DI PUNTINI dentro il navy, in alto a destra: e' una decorazione del
       fondo della copertina, non un elemento da toccare;
     - l'ONDA che chiude il fondo: «il background che chiude con una immagine»;
     - la COPERTINA NAVY, che c'era gia' (sez.3, riga 189): qui non si tocca, si conferma.
   I colori sono quelli della tavolozza (`--ld-violet` #6d4dfa, `--ld-blue` #3f6df0):
   nessun colore nuovo, nessuna ombra nuova se non quelle gia' in uso sulla copertina.

   I DUE GRAPPOLI DI PAGINA (`op-puntini--su`, `--giu`) NON ci sono piu': il titolare,
   04/10/2026: «togli op-page .op-puntini». Erano `position: fixed`, quindi non
   scorrevano: restavano incollati allo schermo e passavano davanti al contenuto mentre
   si scorreva. Tolti dal foglio, dalla pagina e dalle prove.
   ============================================================================ */

/* IL TONDO DELL'ICONA. Vetro sul navy, come il biglietto del codice (`iv-ticket`, otto
   righe piu' sotto): e' la stessa famiglia di materiali della copertina, cosi' non
   sembra appiccicato da un'altra parte. Sta sopra l'alone (`z-index: 1`). */
.op-page .iv-hero__tondo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    box-shadow: 0 12px 26px rgba(4, 10, 40, .34);
}
.op-page .iv-hero__tondo svg { width: 30px; height: 30px; }

/* LA TESTATA: IL TONDO ACCANTO AL TITOLO (04/10/2026). Il blocco del testo della copertina e' una
   colonna (chicco, testata, paragrafo) e la testata e' UNA riga sola: il tondo a sinistra e il
   titolo a destra, allineati al centro. Prima il tondo stava sopra il titolo, su una riga sua,
   e la copertina sembrava aperta da un'icona sola. */
.op-page .iv-hero__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; }
.op-page .iv-hero__testata { display: flex; align-items: center; gap: 1rem; }
.op-page .iv-hero__testata h2 { min-width: 0; }

/* I PUNTINI DELLA COPERTINA: il grappolo dentro il navy, in alto a destra. Dietro al
   testo (`z-index: 0`, mentre testo e tondo stanno a 1), e la maschera sfuma i bordi
   cosi' non e' un rettangolo di puntini ma un grappolo. */
.op-page .iv-hero::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 132px;
    height: 92px;
    z-index: 0;
    pointer-events: none;
    opacity: .55;
    background-image: radial-gradient(rgba(255, 255, 255, .55) 1.6px, transparent 1.7px);
    background-size: 15px 15px;
    -webkit-mask-image: radial-gradient(120px 82px at 72% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(120px 82px at 72% 30%, #000 0%, transparent 78%);
}

/* La lastra: sta sopra l'alone della copertina. */
.op-page .st-shell { position: relative; z-index: 1; }

/* L'ONDA CHE CHIUDE LA PAGINA. Due colline tenui - il viola e l'azzurro della tavolozza,
   gli stessi toni dell'alone del fondo (righe 64-66) - in coda alla lastra. E' il fondo
   che «chiude», non un elemento da toccare: `pointer-events: none`, e `flex: 0 0 auto`
   perche' la lastra e' una colonna flex e l'onda non deve ne' crescere ne' sparire. */
.op-page .op-onda {
    flex: 0 0 auto;
    height: 150px;
    margin-top: -40px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 140% 130%;
    background-image:
        radial-gradient(85% 120% at 22% 118%, rgba(109, 77, 250, .14) 0%, rgba(109, 77, 250, 0) 70%),
        radial-gradient(120% 130% at 85% 124%, rgba(63, 109, 240, .12) 0%, rgba(63, 109, 240, 0) 72%);
}

/* IL BIGLIETTO DEL CODICE. Vetro sul navy (fondo bianco all'8%, filo bianco): l'intaglio tondo resta,
   ma prende il colore del fondo della copertina, cosi' sembra davvero ritagliato nel navy. */
.op-page .iv-ticket {
    padding: 18px 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.09);
    box-shadow: none;
    color: #fff;
}
.op-page .iv-ticket::before, .op-page .iv-ticket::after { background-color: var(--ld-navy-1, #0a1338); }
.op-page .iv-ticket::before { background-image: var(--ld-grad-hero); }
.op-page .iv-ticket::after  { background-color: var(--ld-navy-2, #142a72); }
.op-page .iv-ticket__label {
    font-size: 11px;
    letter-spacing: .1em;
    color: #d5ecff;
}
.op-page .iv-ticket code {
    margin: 8px 0 12px;
    font-size: clamp(1.45rem, 1.15rem + 1.5vw, 1.9rem);
    font-weight: 800;
    letter-spacing: .1em;
    color: #fff;
}
.op-page .iv-ticket__row { gap: 12px; }
.op-page .iv-ticket__hint { font-size: 12.5px; line-height: 1.45; color: #c3cdf0; }

/* ============================================================================
   4 - LE SCHEDE (i blocchi bianchi) E IL TESTO CHE SI LEGGE
   ----------------------------------------------------------------------------
   Le schede prendono raggio 22, bordo tenue e l'ombra larga e bassa della landing (`.how-card`,
   `.chiedi-card`): erano raggio 18 con l'ombra corta di `studio.css`, e si vedevano di un'altra casa.
   Il testo piccolo cresce di un pixel e mezzo e respira di piu': `.iv-hint` 12,5->13,5px con
   interlinea 1,6, le note 13,5px, i nomi delle persone 1rem. Il titolo di un blocco passa da 1,02 a
   1,18rem, come i titoli delle sezioni di /articolo.
   ============================================================================ */
.op-page .iv-block {
    padding: 22px 20px 24px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: var(--ld-r-card, 22px);
    background: var(--ld-card, #fff);
    box-shadow: var(--ld-shadow-card);
    margin: 0;
}
.op-page .iv-block__head {
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ld-border, #e7ecf7);
}
.op-page .iv-block__head h4 {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ld-ink, #0a0f1f);
}
.op-page .iv-block__head .iv-hint { max-width: 46ch; }
.op-page .iv-block__head--dopo { margin-top: 26px; }
.op-page .iv-hint { font-size: 13.5px; line-height: 1.6; color: var(--ld-muted, #5d6781); }
.op-page .iv-dot {
    width: 38px;
    height: 38px;
    background-image: var(--ld-grad-ico);
    box-shadow: 0 8px 18px rgba(63,109,240,.26);
}
.op-page .iv-dot svg { width: 19px; height: 19px; }

/* Una distanza fra i blocchi uguale per tutti (era 18px della colonna + i margini dei singoli
   blocchi, che ogni linguetta sistemava a modo suo: 14, 18, 32, 36). */
.op-page .iv-pane { gap: 22px; }

/* E IL PASSO VALE ANCHE DENTRO LE DUE SOTTO-VISTE (07/10/2026). `invite.css` (riga 936) tiene
   `#ivDisponibili` e `#ivGuadagni` a 18px, perche' sono gli stessi contenitori che usa il
   Creator Hub. Senza questa riga la pagina avrebbe DUE ritmi: 22px fra un blocco e l'altro e
   18px dentro quelle due linguette - e sarebbe un difetto che si vede scorrendo, non leggendo.
   Se ne e' accorta la prova `check_margini_opportunity.py`, che sta a guardia di questo dal
   15/09/2026 e che ieri non era stata rilanciata: due NO, e li ha detti lei. */
.op-page #ivDisponibili, .op-page #ivGuadagni { gap: 22px; }

/* E IL PASSO NON SI SOMMA AL MARGINE DEI FIGLI (08/10/2026). Il `gap` da solo non bastava, e la
   misura l'ha detto: gli spazi dentro quelle due sotto-viste erano [38, 40, 22] e [38, 38], non 22 -
   cioe' 22 di passo PIU' 16 o 18 di margine, perche' due classi che non sono di questa pagina
   portano un margine in cima ai propri elementi: `.mf-fila` (le file con le frecce, `mood-frecce.css`:
   `margin-top: 1rem`) e `.iv-richieste` (`invite.css`: `margin-top: 18px`). Sono margini scritti per
   un testo in colonna, dove il margine e' l'unica distanza: dentro una colonna FLEX col passo, quel
   margine si somma, e la pagina si ritrova due ritmi - uno fra un blocco e l'altro e un altro dentro
   queste due linguette (il difetto che il 07/10 si era creduto di aver chiuso: si era chiuso il
   `gap`, non i margini).
   I due fogli NON si toccano: `mood-frecce.css` gira su mezzo sito e `invite.css` veste anche il
   Creator Hub - spegnere quei margini la' sarebbe cambiare altre pagine per sistemarne una. Si
   spengono QUI, e solo sui figli diretti di questi due contenitori: fuori restano com'erano.
   E' `check_margini_opportunity.py` a dire se il conto torna (punto 2: «gli spazi sono il passo»). */
.op-page #ivDisponibili > *, .op-page #ivGuadagni > * { margin-top: 0; }

/* ---------- la riga del link e la condivisione ---------- */
.op-page .iv-link { gap: 10px; }
.op-page .iv-link input {
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid var(--ld-border-strong, #cfd8f2);
    border-radius: 14px;
    background: var(--ld-card-soft, #f7f9fe);
    color: var(--ld-ink, #0a0f1f);
    font-size: .95rem;
}
.op-page .iv-link input:focus { outline: 2px solid rgba(63,109,240,.35); outline-offset: 1px; }
.op-page .iv-share { gap: 9px; margin-top: 12px; }
.op-page .iv-chip {
    padding: 11px 16px;
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 700;
    background: var(--ld-card, #fff);
    border: 1px solid var(--ld-border-strong, #cfd8f2);
    color: var(--ld-ink-soft, #26304d);
}
.op-page .iv-chip--primary {
    border-color: transparent;
    background-image: var(--ld-grad-ico);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47,185,245,.28);
}
a.op-page .iv-chip:hover, .op-page a.iv-chip:hover { border-color: var(--ld-blue, #3f6df0); }

/* ---------- il QR ---------- */
/* ATTENZIONE ALLE COLONNE (07/10/2026): qui NON si dichiara `grid-template-columns`. La prima stesura
   lo faceva, e ha rotto il telefono: una regola con `.op-page` davanti e' piu' specifica della media
   query di `invite.css` (che sotto i 760px porta il QR a una colonna), quindi vinceva anche li' e il
   testo del QR finiva schiacciato in una colonnina da 140px. Le colonne restano quelle di
   `invite.css`; qui cambiano solo gli spazi. */
.op-page .iv-qr { gap: 22px; margin-top: 20px; }
.op-page .iv-qr__box {
    padding: 12px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 18px;
    background: var(--ld-card, #fff);
    box-shadow: var(--ld-shadow-card);
}
.op-page .iv-qr__txt b { font-size: 1.06rem; letter-spacing: -.015em; }
.op-page .iv-qr__txt span { font-size: 13.5px; line-height: 1.6; color: var(--ld-muted, #5d6781); }
.op-page .iv-qr__url {
    margin-top: 10px;
    padding: 6px 11px;
    font-size: 12px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 10px;
    background: var(--ld-card-soft, #f7f9fe);
    color: var(--ld-ink-soft, #26304d);
}

/* ============================================================================
   5 - I NUMERI, LE PERSONE, I PULSANTI
   ============================================================================ */

/* I NUMERI (i tre conteggi). Erano numeri col gradiente viola->teal ritagliato nel testo; ora sono
   blu pieni come la fascia 27/10/60 di /articolo, piu' grandi, con la stessa righetta di gradiente
   sotto - il segno che lega la fascia alla copertina. */
.op-page #stInviteBody .st-kpis { gap: 12px; margin-bottom: 0; }
.op-page #stInviteBody .st-kpi {
    padding: 16px 18px 18px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 18px;
    background: var(--ld-card, #fff);
    box-shadow: 0 14px 30px rgba(18,28,70,.08);
}
.op-page #stInviteBody .st-kpi b {
    background: none;
    color: var(--ld-dato, #3f6df0);
    font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.3rem);
    font-weight: 900;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.op-page #stInviteBody .st-kpi b::after {
    content: "";
    display: block;
    width: 30px; height: 3px;
    margin: 8px 0 0;
    border-radius: 999px;
    background-image: var(--ld-grad-ico);
}
.op-page #stInviteBody .st-kpi span {
    margin-top: 5px;
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--ld-ink, #0a0f1f);
}
.op-page #stInviteBody .st-kpi.is-muted b { color: var(--ld-muted, #5d6781); }

/* LE PERSONE arrivate grazie al codice. */
.op-page .iv-people { gap: 10px; }
.op-page .iv-person {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: var(--ld-card-soft, #f7f9fe);
}
.op-page .iv-person:hover { background: var(--ld-card, #fff); border-color: var(--ld-border, #e7ecf7); transform: translateX(2px); }
.op-page .iv-av { width: 46px; height: 46px; }
.op-page .iv-person__who b { font-size: 1rem; letter-spacing: -.01em; }
.op-page .iv-person__who span { font-size: 12.5px; color: var(--ld-muted, #5d6781); }
/* IL BOLLINO "ISCRITTO" ERA AL 2,94:1 (misurato il 07/10/2026): verde acceso su verde chiaro, a 11px,
   sotto la soglia di leggibilita' (4,5:1). E' lo stesso verde che `invite.css` usa gia' per lo stato
   "approvato" nella riga dell'influencer: 5,5:1. */
.op-page .iv-person time { color: #0a6b2d; }

/* LO STATO VUOTO e le note: tinte chiare della landing, testo leggibile. */
.op-page .iv-empty {
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed rgba(63,109,240,.32);
    background: rgba(63,109,240,.06);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ld-ink-soft, #26304d);
}
.op-page .iv-note { border-radius: 16px; font-size: 13.5px; line-height: 1.6; }
.op-page .iv-note--info { background: rgba(63,109,240,.07); border-color: rgba(63,109,240,.22); color: var(--ld-ink-soft, #26304d); }
.op-page .iv-note--info svg { color: var(--ld-blue, #3f6df0); }

/* I PULSANTI: la pillola della landing (gradiente viola->azzurro, ombra colorata, si alza di due pixel
   sotto il dito) e un pulsante "fantasma" CHE SI VEDE.
   IL DIFETTO (trovato misurando il 07/10/2026): `.iv-btn--ghost` in `invite.css` e' `color: white` su
   `background: var(--st-btn)` - e in tema chiaro `--st-btn` non e' definito, quindi il fondo restava
   trasparente/chiaro e la scritta "Copia link" era BIANCA SU BIANCO: nel ritratto della pagina si
   vedeva un rettangolo vuoto accanto all'URL. Qui prende fondo bianco, filo visibile e testo scuro. */
.op-page .iv-btn {
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.012em;
}
.op-page .iv-btn svg { width: 18px; height: 18px; }
.op-page .iv-btn--primary {
    background-image: var(--ld-grad-cta);
    color: #fff;
    box-shadow: 0 12px 26px rgba(63,109,240,.34);
}
.op-page .iv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(63,109,240,.42); }
.op-page .iv-btn--ghost {
    background: var(--ld-card, #fff);
    color: var(--ld-ink, #0a0f1f);
    border: 1px solid var(--ld-border-strong, #cfd8f2);
}
.op-page .iv-btn--ghost:hover { border-color: var(--ld-blue, #3f6df0); color: var(--ld-blue, #3f6df0); }
.op-page .iv-btn--quiet { border-color: var(--ld-border-strong, #cfd8f2); color: var(--ld-ink-soft, #26304d); }
/* I TASTI DELLA SCHEDA SONO SOLO ICONE, colla nuvoletta (titolare, 10/10/2026: «usiamo solo icona
   con tips»): il quadratino tondo, 40px — alto quanto basta al dito e tondo come la pillola della
   landing (raggio 999px). Queste righe servono a disfare `.op-page .iv-btn` due righe sopra:
   li' il tasto ha `padding: 13px 22px` (e sul telefono `width: 100%`), quindi un tasto coll'icona
   sola resterebbe una pillola larga con un puntino in mezzo. Il nome per esteso sta nella
   nuvoletta (`data-iv-tip`, `.iv-tip` in invite.css) e nell'`aria-label`. */
.op-page .iv-card__acts .iv-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    gap: 0;
    flex: 0 0 auto;
}
.op-page .iv-card__acts .iv-btn svg { width: 19px; height: 19px; }

/* I TRE PASSI e le schede dei prodotti: raggio e ombra della landing, testo leggibile. */
.op-page .iv-steps { gap: 12px; margin: 4px 0 14px; }
.op-page .iv-step {
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid var(--ld-border, #e7ecf7);
    background: var(--ld-card-soft, #f7f9fe);
    font-size: 13.5px;
    line-height: 1.6;
}
.op-page .iv-step b { font-size: 1rem; }
.op-page .iv-step.is-on { background: var(--ld-card, #fff); border-color: rgba(63,109,240,.45); box-shadow: 0 10px 22px rgba(63,109,240,.12); }
/* IL RIQUADRO BIANCO ATTORNO ALLA FOTO (04/10/2026). Modifica del titolare: `padding: 4px` sulla
   scheda e gli angoli tondi sulla foto (`border-radius: 19px 19px 5px 5px`, in `invite.css`): la
   foto non tocca piu' il bordo, resta un filo bianco tutto intorno, come nel disegno. La scheda
   gia' non ritagliava piu' (`overflow: hidden` tolto li') proprio per questo. */
.op-page .iv-card {
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: var(--ld-r-card, 22px);
    background: var(--ld-card, #fff);
    box-shadow: var(--ld-shadow-card);
    padding: 4px;
}
.op-page .iv-card__price {
    font-size: 13px;
    /* Il blu della landing e' troppo chiaro per una pillola chiara: misurato 3,87:1 a 13px, sotto la
       soglia dei 4,5:1. Questo e' lo stesso blu, due toni piu' giu': 5,8:1. */
    color: #2b4ed0;
    background: rgba(63,109,240,.12);
}
/* LA FOTO CHE NON C'E' e il titolo della scheda.
   Il segnaposto era `linear-gradient(#ede9fb, #dff7f6)`, la tinta viola/teal vecchia: ora e' la tinta
   azzurra della landing. E il titolo: in `invite.css` e' tagliato con `max-height: 53px` + un `::after`
   che scrive "..." SOPRA il testo, in mezzo alle parole ("Sistema profess..." con i puntini sulle
   lettere). Con `line-clamp` il browser chiude la riga da solo, con i puntini al posto giusto e senza
   coprire niente. E il peso: era 200 (sottilissimo, a 14px), ora e' un titolo. */
.op-page .iv-card__img { background-image: linear-gradient(135deg, rgba(63,109,240,.12), rgba(47,185,245,.12)); }
.op-page .iv-card__img span { color: var(--ld-blue, #3f6df0); }
/* IL BOLLINO DELLA QUOTA NON E' UN SEGNAPOSTO (07/10/2026).
   La riga qui sopra serve alla LETTERA che si disegna quando una card non ha foto
   (`.iv-card__img span`), e il bollino della quota e' anche lui uno span dentro la foto:
   senza questa riga il numero - che nel foglio condiviso e' scritto `#fff` - diventerebbe
   blu chiaro su blu scuro, cioe' 1,7:1, cioe' il bollino che si legge solo se lo sapevi.
   La regola ha tre classi (`0,3,0`) e vince su quella degli span (`0,2,1`). */
.op-page .iv-card__img .iv-card__quota { color: #fff; }
/* ...E IL LUCCHETTO NON E' UN SEGNAPOSTO NEPPURE LUI (04/10/2026). Stessa storia del bollino qui
   sopra: la regola degli span della foto lo vira al blu chiaro, e un lucchetto blu chiaro su una
   foto chiara non si vede - sarebbe tornato invisibile proprio nel punto in cui il disegno lo
   vuole. Tre classi (`0,3,0`) contro `0,2,1`: qui torna il bianco velato di `invite.css`. */
.op-page .iv-card__img .iv-card__lock { color: rgba(255, 255, 255, .8); }
.op-page .iv-card__body b {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: none;
}
.op-page .iv-card__body b::after { content: none; }
.op-page .iv-card__meta { font-size: 12.5px; }
.op-page .iv-azioni, .op-page .iv-actions { gap: 10px; }

/* ============================================================================
   6 - TELEFONO E SCHERMI STRETTI
   ----------------------------------------------------------------------------
   Il tablet era il punto peggiore: a 820px l'apertura restava a DUE colonne con il biglietto del
   codice schiacciato in 260px, e le linguette sbordavano. Sotto i 900px l'apertura va in colonna -
   il biglietto sotto il testo, largo tutto - e sotto i 560px tutto prende la misura del dito (44px)
   e il passo del telefono.
   ============================================================================ */
@media (max-width: 900px) {
    .op-page .iv-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 24px 32px; }
    .op-page #stInviteBody .st-kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    /* La striscia va a capo su due righe a questa larghezza: con il raggio pieno diventerebbe un
       ovale storto, e la pillola della landing ha il raggio suo quando sta su una riga sola. */
    .op-page [data-iv-tabs] { border-radius: 18px; }
    .op-page [data-iv-tabs] .st-seg-btn { border-radius: 14px; }
}

@media (max-width: 760px) {
    .op-page .iv-hero { padding: 24px 20px 28px; }
    .op-page .iv-hero h2 { font-size: 1.52rem; }
    /* Il tondo rimpicciolisce col resto: sul telefono 64px di testata sono un quarto della
       copertina. */
    .op-page .iv-hero__tondo { width: 56px; height: 56px; }
    .op-page .iv-hero__tondo svg { width: 26px; height: 26px; }
    .op-page .iv-block { padding: 18px 16px 20px; }
    .op-page .iv-pane { gap: 18px; }
    /* Il passo del telefono (18px) vale anche dentro le due sotto-viste: vedi la regola qui sopra. */
    .op-page #ivDisponibili, .op-page #ivGuadagni { gap: 18px; }
}

@media (max-width: 560px) {
    .op-page .st-container { padding: 14px 12px 40px; }
    /* L'onda resta, piu' bassa. */
    .op-page .op-onda { height: 110px; margin-top: -30px; }
    /* LE LINGUETTE SUL TELEFONO: UNA GRIGLIA, NON UNA FILA CHE VA A CAPO.
       IL TITOLARE, 07/10/2026: "i mobile non va bene il css ... va rivisto, non si comprende cosa sia e
       cosa fare". Misurato a 390px, prima di questa regola: cinque linguette in due colonne facevano
       TRE righe disuguali, con l'ultima linguetta SOLA e centrata in mezzo al vuoto, e le due etichette
       lunghe spezzate su due righe - il riquadro sembrava un mucchio di tasti, non una scelta di sezioni
       (lo scatto e' /tmp/L_telefono-webkit.png del 07/10). Il difetto non era una misura sbagliata: era
       che con `flex: 1 1 calc(50%)` le caselle si dispongono da sole riga per riga, e nessuno decide
       quante ne stanno in fila.
       Con `grid-template-columns: 1fr 1fr` le caselle sono uguali, la riga ha una altezza sola, e
       l'ultima linguetta - quando il numero e' DISPARI, come le cinque di questa pagina - prende TUTTA
       la riga invece di restare orfana in mezzo al vuoto.
       Restano le regole del 16/09 (invite.css): due per riga, niente scorrimento di lato, niente parole
       tagliate, dita a 44px. `check_opportunity_linguette.py` le sorveglia a 390 e 360px. */
    .op-page [data-iv-tabs] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 6px;
        padding: 6px;
        border-radius: 18px;
        /* Il vassoio e' la tinta morbida e le caselle sono bianche: cosi' la griglia si legge. */
        background: var(--ld-card-soft, #f7f9fe);
    }
    .op-page [data-iv-tabs] .st-seg-btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        justify-content: center;
        gap: 5px;
        padding: 9px 7px;
        border-radius: 14px;
        font-size: .85rem;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }
    /* LA CASSELLA SI DEVE VEDERE (07/10/2026). La griglia da sola NON bastava, e lo ha detto lo scatto
       fatto dopo averla messa: il telefono mostrava ancora lo stesso riquadro di prima. Il perche' e'
       che una linguetta non attiva non disegna niente (sfondo trasparente, bordo zero), quindi una
       casella a tutta riga e una a meta' si vedono identiche - e tre righe di scritte dentro un
       rettangolo non dicono che sono cinque sezioni fra cui scegliere: e' proprio il "non si comprende
       cosa sia e cosa fare" del titolare.
       Ora ogni sezione ha la sua casella (la carta bianca e il bordo della tavolozza, che valgono in
       tutti e due i temi: `--ld-card` e `--ld-border`) e la sezione scelta resta il gradiente della
       casa, con dentro il bianco. Il bordo c'e' anche sull'attiva, trasparente, se no quella sarebbe
       2px piu' larga delle altre. */
    .op-page [data-iv-tabs] .st-seg-btn:not(.is-active) {
        background: var(--ld-card, #fff);
        border: 1px solid var(--ld-border, #e7ecf7);
    }
    .op-page [data-iv-tabs] .st-seg-btn:not(.is-active):hover {
        background: rgba(63,109,240,.10);
        border-color: var(--ld-border-strong, #cfd8f2);
        color: var(--ld-blue, #3f6df0);
    }
    .op-page [data-iv-tabs] .st-seg-btn.is-active { border: 1px solid transparent; }
    /* Cinque linguette, due per riga: la quinta prende la riga intera (e con un numero pari non cambia
       niente, perche' il `:nth-child(odd)` non scatta). */
    .op-page [data-iv-tabs] .st-seg-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .op-page .iv-hero { padding: 22px 18px 26px; border-radius: 20px; }
    .op-page .iv-hero h2 { font-size: 1.42rem; }
    .op-page .iv-hero p { font-size: .98rem; }
    /* Sotto i 16px il telefono ingrandisce la pagina da solo: era la lezione di `.pr-link__url`. */
    .op-page .iv-link input { font-size: 1rem; min-height: 50px; }
    .op-page .iv-btn { width: 100%; min-height: 48px; justify-content: center; }
    .op-page .iv-ticket__row .iv-btn { width: auto; }
    .op-page .iv-qr { gap: 16px; }
    .op-page .iv-qr__box { justify-self: start; }
    .op-page #stInviteBody .st-kpis { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
    .op-page #stInviteBody .st-kpi { padding: 14px 14px 16px; }
    .op-page .iv-card__acts .iv-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .op-page .iv-person { padding: 11px 12px; }
    .op-page .iv-av { width: 42px; height: 42px; }
}

/* Il movimento resta quello di `invite.css` (i blocchi che salgono di 6px), e resta spento a chi ha
   chiesto meno animazioni: `@media (prefers-reduced-motion: no-preference)`. Non si tocca. */


/* ============================================================================
   6 - LA GUIDA DI QUESTA PAGINA, E IL PULSANTE CHE LA APRE - 08/10/2026
   ----------------------------------------------------------------------------
   IL TITOLARE: «mi serve che scrivi il tutorial dettagliato di tutto /opportunity e crei il bottone
   che lo apre .. deve essere comprensibile .. ben nello stile css di opportunity ma semplice da
   capire .. molto semplice e geniale».

   DUE COSE, NON TRE. Il testo della guida e il pulsante che la apre stanno in un file solo
   (`assets/js/opportunity-guida.js`), perche' sono la stessa cosa: un tutorial che nessuno trova e'
   un tutorial che non esiste. Il pulsante e' nella testata della pagina, accanto a «Creator Hub».

   IL VESTITO E' QUELLO DELLA PAGINA. La guida usa le classi che ci sono gia' (`iv-hero`, `iv-block`,
   `iv-block__head`, `iv-dot`, `iv-hint`, `iv-btn`): le schede bianche, il navy dell'apertura, i titoli
   col pallino tondo sono GLI STESSI di /opportunity, non una copia che si disallinea al primo ritocco.
   Qui sotto ci sono solo i pezzi che nella pagina non esistevano: l'indice a pastiglie, i tre passi,
   l'elenco del «cosa ci trovi», il vocabolario e le domande che si aprono col tocco.

   E STANNO QUI, non in un foglio nuovo, per la stessa ragione per cui questo foglio esiste: ogni
   regola comincia con `.op-page`, la classe che sta solo in questa pagina. Il controllo
   `check_opportunity_vestito.py` cammina il foglio servito e pretende quel prefisso: se una regola
   della guida uscisse dalla recinzione, la vedrebbe.

   IL PULSANTE E' ORO, E NON E' UN CAPRICCIO. Fra due pastiglie bianche (la testata della pagina)
   un pulsante bianco non si distingue da un'etichetta: l'oro della tavolozza (`--ld-gold`) lo dice
   da solo, e il testo navy ci sta sopra a 8,9:1 - misurato, non stimato.
   ============================================================================ */

/* IL PULSANTE «Come funziona». Testo navy sull'oro della tavolozza: si vede, e si legge. */
.op-page .op-guida-apri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid rgba(10, 19, 56, .12);
    border-radius: 999px;
    background-image: linear-gradient(135deg, #ffd76e 0%, var(--ld-gold, #f7bb3c) 100%);
    color: var(--ld-navy-1, #0a1338);
    font-size: .84rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(247, 187, 60, .32);
    cursor: pointer;
}
.op-page .op-guida-apri:hover { filter: brightness(1.05); color: var(--ld-navy-1, #0a1338); }
.op-page .op-guida-apri svg { width: 17px; height: 17px; }

/* LA GUIDA: lo stesso passo dei blocchi della pagina (22px), come le linguette. */
.op-page .op-guida { display: flex; flex-direction: column; gap: 22px; }
/* L'apertura della guida sta in UNA colonna: il posto del codice, nella pagina, qui non c'e'. */
.op-page .op-guida .iv-hero { grid-template-columns: minmax(0, 1fr); }
.op-page .op-guida__indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.op-page .op-guida__voce {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: #eaf0ff;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}
.op-page .op-guida__voce svg { width: 15px; height: 15px; }
.op-page .op-guida__voce:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* IL TITOLO FRA I PASSI E LE CINQUE SCHEDE: e' una riga di testo, non una scheda con dentro il vuoto. */
.op-page .op-guida__capo {
    margin: 2px 2px -8px;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ld-ink, #0a0f1f);
}

/* I TRE PASSI: numeri tondi col gradiente della casa, come le icone dei blocchi. */
.op-page .op-guida__giro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* I TRE PASSI: numero e titolo sulla STESSA RIGA (11/10/2026).
   Lo stesso vizio del segnaposto video, e lo stesso rimedio: col `flex-direction:
   column` il numero stava SOPRA il titolo, e il titolo sembrava la didascalia del
   numero invece di essere il titolo del passo. Ora la scheda e' una griglia a due
   colonne — numero | titolo — e la spiegazione (`__come`) prende TUTTA la
   larghezza sotto (`grid-column: 1 / -1`): un testo lungo in una colonnina da
   200px sarebbe stato peggio del problema. */
.op-page .op-guida__passo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 16px 16px 18px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 18px;
    background: var(--ld-card-soft, #f7f9fe);
}
.op-page .op-guida__n {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background-image: var(--ld-grad-ico);
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
}
.op-page .op-guida__passo b { font-size: 1rem; color: var(--ld-ink, #0a0f1f); }
/* La spiegazione e' una riga di testo: sta sotto, larga quanto la scheda. */
.op-page .op-guida__come { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.6; color: var(--ld-muted, #5d6781); }


/* COSA C'E' DENTRO UNA SEZIONE: un elenco, col nome del blocco in grassetto e un pallino tondo. */
.op-page .op-guida__dentro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.op-page .op-guida__dentro li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ld-ink-soft, #26304d);
    /* LA STRISCIA A ZEBRA SI SPEGNE (08/10/2026). `mood.css` (riga 5161) colora OGNI `li` del sito
       a righe - crema e azzurro - perche' serve alle tabelle e agli elenchi di dati. Qui l'elenco e'
       una SPIEGAZIONE: le righe a strisce fanno sembrare evidenziate delle cose che non lo sono, e
       nella prima stesura l'occhio leggeva dei "campetti" azzurri dentro la scheda bianca.
       Non e' un'idea nuova: `game.css` (riga 916) fa esattamente questo per la spiegazione di un
       gioco («qui l'elenco e' una spiegazione, non una tabella»). Si spegne solo qui dentro. */
    background: transparent;
}
.op-page .op-guida__dentro li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background-image: var(--ld-grad-ico);
}
.op-page .op-guida__dentro li b { color: var(--ld-ink, #0a0f1f); }

/* LE PAROLE: due colonne quando c'e' spazio, una sola sul telefono (`auto-fit` decide da solo). */
.op-page .op-guida__parole {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 0;
}
.op-page .op-guida__parola {
    padding: 13px 15px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 14px;
    background: var(--ld-card-soft, #f7f9fe);
}
.op-page .op-guida__parola dt { font-size: .95rem; font-weight: 800; color: var(--ld-ink, #0a0f1f); }
.op-page .op-guida__parola dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ld-muted, #5d6781); }

/* LE DOMANDE SI APRONO COL TOCCO (`<details>`): nativo, da tastiera, senza una riga di JavaScript. */
.op-page .op-guida__domande { display: flex; flex-direction: column; gap: 8px; }
.op-page .op-guida__domanda {
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 14px;
    background: var(--ld-card-soft, #f7f9fe);
}
.op-page .op-guida__domanda summary {
    padding: 13px 16px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ld-ink, #0a0f1f);
    cursor: pointer;
}
.op-page .op-guida__domanda summary:hover { color: var(--ld-blue, #3f6df0); }
.op-page .op-guida__domanda[open] summary { border-bottom: 1px solid var(--ld-border, #e7ecf7); }
.op-page .op-guida__domanda p {
    margin: 0;
    padding: 12px 16px 14px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ld-muted, #5d6781);
}

/* IL PIEDE. I due tasti stanno DENTRO la lastra (`mood-lastra-foot`, fuori dal corpo che scorre):
   si vedono sempre, anche quando si e' a meta' di una guida lunga. Sul telefono la regola della
   pagina li farebbe lunghi tutta la riga (`width: 100%`): qui si dividono lo spazio, che e' quello
   che serve a due tasti vicini. */
.op-page .mood-lastra-foot .iv-btn { flex: 1 1 auto; width: auto; min-width: 0; }

/* IL RIPIEGO: solo se `mood-init.js` non fosse caricato (la lastra della casa). Un pulsante che non
   apre niente e' peggio di un pulsante che non c'e': quindi la guida si apre comunque. */
.op-page .op-guida-ripiego { position: fixed; inset: 0; z-index: 1200; background: rgba(6, 6, 14, .55); }
.op-page .op-guida-ripiego__box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--ld-card, #fff);
}
.op-page .op-guida-ripiego__capo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ld-border, #e7ecf7);
}
.op-page .op-guida-ripiego__capo h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    color: var(--ld-ink, #0a0f1f);
}
.op-page .op-guida-ripiego__x {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ld-ink, #0a0f1f);
    font-size: 17px;
    cursor: pointer;
}
.op-page .op-guida-ripiego__corpo { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px 34px; }

/* ============================================================================
   7 - IL POSTO DEL VIDEO, DENTRO LA GUIDA (11/10/2026)
   ----------------------------------------------------------------------------
   Il titolare, 11/10: «poi predisponi in "Come funziona questa pagina" già un
   video tutorial che sto preparando, ma non posso farlo fino a quando
   opportunity non è completo».

   Quindi il posto c'e' da subito, e si accende DA SOLO quando il filmato
   arriva: il file si copia in un indirizzo FISSO (`/assets/video/opportunity.mp4`,
   la costante `VIDEO` in `opportunity-guida.js`), e non c'e' una riga di codice
   da toccare. Il come e il perche' stanno li', accanto al codice; qui c'e' solo
   com'e' fatto.

   IL FILMATO ARRIVA L'11/10/2026 — montato dal titolare: 1'54", 1280x720, 11,4 MB,
   H.264 + AAC, colla copertina (`opportunity-poster.jpg`, il fotogramma a 3s). Il
   giorno che si sostituisce NON si tocca il codice, ed e' l'unico motivo per cui
   l'indirizzo e' fisso. DUE conseguenze che si vedono solo col filmato vero, e
   stanno scritte accanto alle regole che le riguardano: il RIQUADRO prende la
   forma del film (`.op-video__film`, se no restavano le bande nere ai lati) e la
   CACHE non e' piu' di trenta giorni per questo file (`.htaccess`, se no il
   filmato sostituito restava vecchio in vetrina).

   DUE COSE CHE SEMBRANO DETTAGLI E NON LO SONO.
   1) FINCHE' IL VIDEO NON C'E', NIENTE FINTO LETTORE. Un triangolo "play" che
      non fa partire niente e' peggio di un triangolo che non c'e': e' la regola
      di casa, la stessa scritta per il pulsante della guida («un pulsante che
      non apre niente e' peggio di un pulsante che non c'e'»). Il segnaposto e'
      una lastra navy che DICE che il video sta arrivando e manda alle
      spiegazioni scritte, che ci sono gia' tutte.
   2) IL RIQUADRO E' NAVY IN TUTT'E DUE I TEMI, E VA BENE COSI'. Dentro la
      scheda bianca un rettangolo scuro e' «il posto del video»: e' lo stesso
      navy della copertina di questa pagina, quindi sembra una cosa di casa e
      non un buco.

   Come tutte le regole di questo foglio, comincia con `.op-page`: vale solo su
   /opportunity, e `check_opportunity_guida.py` lo pretende camminando il
   foglio servito (sezione F).
   ============================================================================ */
.op-page .op-video__box {
    overflow: hidden;
    border: 1px solid rgba(10, 19, 56, .10);
    border-radius: var(--ld-r-card, 22px);
    background: var(--ld-navy-1, #0a1338);
    box-shadow: 0 14px 30px rgba(14, 22, 66, .18);
}
/* IL RIQUADRO PRENDE LA FORMA DEL FILM — NON UN RIQUADRO COL FILM DENTRO (11/10/2026).
   Qui c'era `max-height: 62vh`, e il primo filmato vero ha mostrato il difetto che
   quella riga si portava dentro: a 1440 il riquadro veniva 1327x558 (2,38:1) mentre
   il film e' 16:9, e il browser NON schiaccia il film — restavano quindi DUE BANDE
   NERE di ~167px ai lati (misurate collo scatto dell'11/10/2026). Cioe' proprio il
   «rettangolo nero» che questo posto del video esiste per evitare. Sul telefono il
   riquadro era gia' 16:9 (321x181) e la riga non mordeva: il difetto si vedeva solo
   sullo schermo grande, dove il titolare guarda per primo.
   Adesso la forma la detta il film (`aspect-ratio`, e nessun tetto di altezza).
   `LEGGIMI.txt` chiede 16:9 ed e' la stessa cosa che il controllo pretende
   (sezione M): riquadro e film con la STESSA proporzione, se no ci sono le bande. */
.op-page .op-video__film {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #05070f;
}

/* ============================================================================
   7-quater - LA SCHEDA DEL VIDEO, COL TASTO PLAY (11/10/2026)
   ----------------------------------------------------------------------------
   Il titolare, guardando il tutorial: «togli i tools del video ... usa il modale
   standard di mood dei video come se fosse un post... anche se è un video
   diretto statico». Quindi la pagina non disegna più un lettore: disegna la
   COPERTINA COL TASTO PLAY — la stessa cosa che si vede nel feed su un post che
   porta un video — e il filmato si guarda nella finestra di casa (`#lightbox`,
   in `mood-video.js`: gli stessi comandi del feed, nessuna barra del browser).

   DUE SCELTE E UNA MISURA.
   1) IL TASTO È UN DISCO BIANCO COL TRIANGOLO NAVY, non un'icona a filo: sulla
      copertina (che è scura e mossa) un triangolo disegnato colla penna si
      perde, e questo è il solo comando che c'è. Il bianco lo stacca da
      qualunque fotogramma, in tutt'e due i temi, senza ricolorare niente.
   2) LA RIGA «GUARDA IL VIDEO» STA SOPRA LA COPERTINA, in una pastiglia navy:
      un'etichetta sotto l'immagine la farebbe assomigliare a una didascalia,
      e chi guarda non deve indovinare che si tocca.
   La misura: il disco è 76px sul computer e 64px sul telefono (sez. 560px più
   sotto) — non 44: dentro c'è un triangolo, che a 44 diventa una virgola.
   Il riquadro prende la forma del film (16:9) anche senza copertina
   (`__scheda--senza-copertina`), così il blocco non balla d'altezza quando il
   file della copertina non c'è.

   E `.op-video__film` (`videolettore`) resta in vita per il RIPIEGO: se
   `mood-video.js` non arrivasse, il filmato si guarda lo stesso colla barra del
   browser — meglio la barra del browser che un filmato che non si può guardare.

   Come ogni regola di questo foglio, comincia con `.op-page`: vale solo qui, e
   la sezione F del controllo lo pretende camminando il foglio servito.
   ============================================================================ */
.op-page .op-video__scheda {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #05070f;
    background-image: var(--ld-grad-hero);
    color: #fff;
    font: inherit;
    text-align: left;
    aspect-ratio: 16 / 9;
    cursor: pointer;
}
.op-page .op-video__copertina {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .18s ease;
}
.op-page .op-video__scheda:hover .op-video__copertina { filter: brightness(1.06); }
.op-page .op-video__gioca {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    color: var(--ld-navy-1, #0a1338);
    box-shadow: 0 16px 34px rgba(4, 10, 40, .45);
    transition: transform .18s ease, background .18s ease;
}
.op-page .op-video__gioca svg { width: 28px; height: 28px; fill: currentColor; }
.op-page .op-video__scheda:hover .op-video__gioca { transform: translate(-50%, -50%) scale(1.07); background: #fff; }
.op-page .op-video__scheda:focus-visible { outline: 3px solid var(--ld-gold, #f7bb3c); outline-offset: 3px; }
.op-page .op-video__diretto {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(4, 8, 26, .74);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
}
@media (max-width: 560px) {
    .op-page .op-video__gioca { width: 64px; height: 64px; }
    .op-page .op-video__gioca svg { width: 24px; height: 24px; }
    .op-page .op-video__diretto { left: 10px; bottom: 10px; font-size: 12.5px; padding: 6px 11px; }
}

/* IL TESTO STA AFFIANCO ALL'ICONA, NON SOTTO (11/10/2026).
   Il titolare, guardando il segnaposto: «poi hai il vizio di non mettere il testo
   affianco ... mette sempre icona sopra e testo sotto ... e questo è bruttissimo».
   Era vero, e si vedeva: colla colonna, il tondo da 54px si prendeva una riga di
   altezza intera per un disegno, e il titolo sembrava la sua didascalia.
   Adesso sono DUE colonne: l'icona a sinistra (54px + lo stacco), il testo a destra
   (`__detto`). Titolo, spiegazione e indirizzo restano uno sotto l'altro DENTRO la
   colonna di destra — quelli si', perche' sono righe di testo e si leggono cosi'.
   `min-width: 0` sulla colonna del testo e' quello che tiene l'indirizzo lungo
   dentro la scatola (`word-break` da solo non basta dentro un flex). */
.op-page .op-video__attesa {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 26px 22px;
    text-align: left;
    background-color: var(--ld-navy-1, #0a1338);
    background-image: var(--ld-grad-hero);
    color: #fff;
}
.op-page .op-video__detto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.op-page .op-video__icona {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .10);
    box-shadow: 0 12px 26px rgba(4, 10, 40, .34);
}
.op-page .op-video__icona svg { width: 24px; height: 24px; }
.op-page .op-video__attesa b { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.op-page .op-video__perche {
    max-width: 52ch;
    font-size: 13.5px;
    line-height: 1.62;
    color: #d3ddff;
}
/* L'INDIRIZZO SI LEGGE, E SERVE: e' dove va copiato il file. Va a capo invece di
   far scorrere la scheda di lato (`word-break: break-all`). */
.op-page .op-video__indirizzo {
    max-width: 100%;
    padding: 7px 12px;
    border: 1px dashed rgba(255, 255, 255, .30);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    font-family: var(--st-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px;
    color: #eaf0ff;
    word-break: break-all;
}
/* Il ripiego del ripiego: il file c'e' ma questo browser non lo sa leggere. Si
   dice, invece di lasciare un rettangolo nero. */
.op-page .op-video__nota { font-size: 13.5px; line-height: 1.55; color: #ffd9a8; }
@media (max-width: 560px) {
    .op-page .op-video__attesa { align-items: flex-start; gap: 12px; padding: 20px 16px; }
    .op-page .op-video__icona { width: 44px; height: 44px; }
    .op-page .op-video__icona svg { width: 20px; height: 20px; }
}
.op-page .op-video__utile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    margin: 20px 14px;
}
.op-page .op-video__utile-capo { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.op-page .op-video__utile-detto { font-size: 13.5px; line-height: 1.55; color: #dfe6f7; }
.op-page .op-video__utile-scelte { display: flex; flex-wrap: wrap; gap: 10px; }
.op-page .op-video__utile-perche { display: none; flex-direction: column; gap: 8px; }
.op-page .op-video__utile-perche.is-open { display: flex; }
.op-page .op-video__utile-label { font-size: 13.5px; font-weight: 700; color: #fff; }
.op-page .op-video__utile-testo {
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    background: rgba(9, 14, 28, .55);
    color: #fff;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}
.op-page .op-video__utile-testo::placeholder { color: rgba(255, 255, 255, .55); }
.op-page .op-video__utile-testo:focus-visible { outline: 2px solid var(--ld-blue, #3f6df0); outline-offset: 2px; }
.op-page .op-video__utile-fila { display: flex; gap: 10px; }
@media (max-width: 560px) {
    .op-page .op-video__utile { padding: 14px; }
    .op-page .op-video__utile-scelte .iv-btn { flex: 1 1 100%; }
}

/* ============================================================================
   8 - I CINQUE TONDI DELLA COPERTINA (11/10/2026)
   ----------------------------------------------------------------------------
   Il titolare aveva preparato i suoi disegni — `wallet.svg`, `bersaglio.svg`,
   `scudo.svg` — e ne mancavano due. Con due disegni e tre icone a filo la
   pagina sembrava fatta da due mani diverse: quindi i cinque tondi sono TUTTI
   a disegno, i suoi tre come sono e i due che mancavano rifatti colla sua
   stessa ricetta (`persona.svg`, `megafono.svg`, `persone.svg`: la ricetta e'
   scritta in testa a quei file). Il nome del file sta UNA volta sola, nella
   mappa `TONDI` di `mood-invite.js`: se un disegno non piace si rimpiazza il
   file collo stesso nome, e nella pagina non si tocca niente.

   PERCHE' LA MISURA E' 44px E NON 30. Le icone a filo (lucide) sono un segno
   sottile e a 30px si leggono; questi sono OGGETTI pieni, coll'ombra e i
   gradienti, e a 30px diventano una macchia. A 44px, dentro il tondo da 64px,
   respirano. Il tondo non cambia di una riga: cambia cosa ci sta dentro.
   ============================================================================ */
.op-page .iv-hero__tondo img { display: block; width: 44px; height: 44px; }
@media (max-width: 560px) {
    /* Il tondo scende a 56px (sez.6): il disegno lo segue, se no sborda. */
    .op-page .iv-hero__tondo img { width: 38px; height: 38px; }
}

/* LO SCUDO DEL TITOLARE NELLA RIGA «SEI APPROVATO» (11/10/2026). E' il suo
   disegno, com'e' disegnato: la frase e il verde del riquadro dicono lo STATO,
   il disegno dice DI CHE COSA si parla. Su un fondo verde un viola piccolo non
   si stacca, quindi lo scudo sta in un tondo BIANCO: cosi' si vede in tutt'e
   due i temi, e non si cambia il colore a un disegno che non e' mio.
   (Se il titolare lo vuole verde, e' una riga: `filter: hue-rotate(...)`.)
   L'`img` porta larghezza e altezza NEGLI ATTRIBUTI, e non solo qui: questa
   regola vale solo su /opportunity, e sulle altre pagine che disegnano questa
   riga lo scudo deve restare piccolo lo stesso. */
.op-page .iv-stato-bollo {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ld-card, #fff);
    box-shadow: 0 2px 6px rgba(10, 19, 56, .16);
}
.op-page .iv-stato-bollo img { display: block; width: 22px; height: 22px; }