/* ==========================================================================
   HORNOI V2 — CORE
   Design system: bianco / nero / arancione. Sezioni alternate light/dark.
   Ogni componente legge --bg / --fg / --line / --surface, quindi funziona
   identico dentro una sezione .theme-paper e dentro una .theme-ink.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root {
    /* palette assoluta */
    --ink:          #0A0A0A;
    --ink-2:        #121214;
    --ink-3:        #1A1A1D;
    --ink-4:        #232327;
    --paper:        #FFFFFF;
    /* paper-2 deve leggersi come una sezione diversa, non come lo stesso
       bianco: con #FAFAF9 l'alternanza spariva. */
    --paper-2:      #F0EFEC;
    --paper-3:      #E6E5E1;
    --paper-4:      #DAD9D4;

    --orange:       #FF5A1F;
    --orange-hi:    #FF7A45;
    --orange-lo:    #E64500;

    /* verde di stato: dice "aperto, disponibile". Non è un colore di brand,
       serve solo agli indicatori — pallino in pulsazione, spunte, esiti. */
    --green:        #3FCF6B;
    --green-ink:    #1E8F4C;  /* leggibile sul chiaro */
    --green-hi:     #7BE3A2;  /* leggibile sullo scuro */

    /* tipografia */
    --f-display:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --f-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ritmo — tutto fluido e proporzionale, niente salti fissi */
    --cw:           1240px;
    --cw-narrow:    880px;
    --gut:          clamp(20px, 4vw, 40px);
    --sec-y:        clamp(64px, 7.2vw, 116px);
    --sec-y-tight:  clamp(48px, 5vw, 76px);

    /* scala di spaziatura interna, usata dalle utility .mt-* */
    --sp-1:         6px;
    --sp-2:         clamp(12px, 1.1vw, 16px);
    --sp-3:         clamp(16px, 1.6vw, 22px);
    --sp-4:         clamp(22px, 2.2vw, 30px);
    --sp-5:         clamp(28px, 2.9vw, 40px);
    --sp-6:         clamp(38px, 4vw, 56px);
    --sp-7:         clamp(48px, 5.4vw, 76px);

    /* forme */
    --r-xs:         6px;
    --r-sm:         10px;
    --r:            14px;
    --r-lg:         20px;
    --r-xl:         28px;

    /* motion */
    --ease:         cubic-bezier(.22, 1, .36, 1);
    --ease-io:      cubic-bezier(.4, 0, .2, 1);
    --t-fast:       .18s var(--ease-io);
    --t:            .34s var(--ease);
    --t-slow:       .7s var(--ease);
}

/* Tema chiaro (default di sezione) */
.theme-paper {
    --bg:        var(--paper);
    --bg-alt:    var(--paper-2);
    --fg:        var(--ink);
    --fg-soft:   rgba(10, 10, 10, .72);
    --fg-muted:  rgba(10, 10, 10, .52);
    --fg-faint:  rgba(10, 10, 10, .34);
    --line:      rgba(10, 10, 10, .11);
    --line-soft: rgba(10, 10, 10, .06);
    --surface:   #FFFFFF;
    --surface-2: var(--paper-2);
    --surface-3: var(--paper-3);
    --shadow:    0 1px 2px rgba(10,10,10,.04), 0 12px 32px -12px rgba(10,10,10,.10);
    --shadow-lg: 0 2px 4px rgba(10,10,10,.04), 0 32px 64px -24px rgba(10,10,10,.18);
    --invert-bg: var(--ink);
    --invert-fg: #FFFFFF;
}

.theme-paper-2 {
    --bg:        var(--paper-2);
    --bg-alt:    var(--paper-3);
    --fg:        var(--ink);
    --fg-soft:   rgba(10, 10, 10, .72);
    --fg-muted:  rgba(10, 10, 10, .52);
    --fg-faint:  rgba(10, 10, 10, .34);
    --line:      rgba(10, 10, 10, .11);
    --line-soft: rgba(10, 10, 10, .06);
    --surface:   #FFFFFF;
    --surface-2: var(--paper-3);
    --surface-3: var(--paper-4);
    --shadow:    0 1px 2px rgba(10,10,10,.04), 0 12px 32px -12px rgba(10,10,10,.10);
    --shadow-lg: 0 2px 4px rgba(10,10,10,.04), 0 32px 64px -24px rgba(10,10,10,.18);
    --invert-bg: var(--ink);
    --invert-fg: #FFFFFF;
}

/* Tema scuro */
.theme-ink {
    --bg:        var(--ink);
    --bg-alt:    var(--ink-2);
    --fg:        #FFFFFF;
    --fg-soft:   rgba(255, 255, 255, .74);
    --fg-muted:  rgba(255, 255, 255, .54);
    --fg-faint:  rgba(255, 255, 255, .32);
    --line:      rgba(255, 255, 255, .12);
    --line-soft: rgba(255, 255, 255, .07);
    --surface:   var(--ink-2);
    --surface-2: var(--ink-3);
    --surface-3: var(--ink-4);
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 40px 80px -32px rgba(0,0,0,.8);
    --invert-bg: #FFFFFF;
    --invert-fg: var(--ink);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body.hornoi {
    margin: 0;
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.62;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.hornoi img,
.hornoi svg { display: block; max-width: 100%; }
.hornoi img { height: auto; }

.hornoi h1, .hornoi h2, .hornoi h3, .hornoi h4, .hornoi h5, .hornoi p, .hornoi figure {
    margin: 0;
}

.hornoi ul, .hornoi ol { margin: 0; padding: 0; list-style: none; }

/* :where() azzera la specificità del reset. Come `.hornoi a` valeva (0,1,1) e
   batteva ogni variante a classe singola: .btn-solid finiva bianco su bianco
   nelle sezioni scure e .btn-o perdeva il testo bianco su fondo chiaro, perché
   il loro `color` veniva sempre riportato a `inherit`. */
:where(.hornoi) :where(a) { color: inherit; text-decoration: none; }

/* Stesso motivo del reset qui sopra: `.hornoi button` valeva (0,1,1) e batteva
   ogni classe singola. Il submit del form contatti (.btn.btn-o.btn-lg) restava
   senza fondo e senza padding — un link travestito da bottone — e con lui il
   pulsante di ricerca, le tab del workspace e i .acc__btn delle FAQ. */
:where(.hornoi) :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.hornoi input, .hornoi textarea, .hornoi select { font: inherit; color: inherit; }

.hornoi ::selection { background: var(--orange); color: #fff; }

.hornoi :focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: 3px;
}

.hornoi strong, .hornoi b { font-weight: 600; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--cw);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.wrap-narrow {
    width: 100%;
    max-width: var(--cw-narrow);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.sec {
    position: relative;
    padding-block: var(--sec-y);
    background: var(--bg);
    color: var(--fg);
}

.sec--tight { padding-block: var(--sec-y-tight); }
.sec--flush-t { padding-top: 0; }
.sec--flush-b { padding-bottom: 0; }
.sec--edge { border-top: 1px solid var(--line); }

/* griglie */
.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* display: grid esplicito, non ereditato da .grid: nei template queste due
   classi sono sempre usate da sole (`class="g-split-wide"`), quindi senza
   dichiararlo qui la colonna di destra finiva impilata sotto il testo. */
.g-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.g-split-wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 6vw, 88px); }

@media (max-width: 1000px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .g-2, .g-3, .g-split, .g-split-wide { grid-template-columns: minmax(0, 1fr); }
    .g-split, .g-split-wide { gap: 44px; }
}
@media (max-width: 560px) {
    .g-4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.d1, .d2, .d3, .d4 {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.032em;
    line-height: 1.02;
    text-wrap: balance;
}

/* La scala è tarata sulla larghezza di colonna reale, non sul viewport:
   un h1 in una griglia a due colonne vive in ~570px, non in 1440. */
.d1 { font-size: clamp(2.15rem, 3.9vw, 3.35rem); line-height: 1.06; }
.d2 { font-size: clamp(1.75rem, 2.9vw, 2.5rem);  line-height: 1.1;  letter-spacing: -.026em; }
.d3 { font-size: clamp(1.32rem, 1.9vw, 1.72rem); line-height: 1.18; letter-spacing: -.02em; }
.d4 { font-size: clamp(1.08rem, 1.3vw, 1.2rem);  line-height: 1.28; letter-spacing: -.014em; font-weight: 600; }

/* Le hero centrate hanno tutta la larghezza: lì il titolo può respirare. */
.d1--wide { font-size: clamp(2.4rem, 5vw, 4.1rem); }

.lead {
    font-size: clamp(1.02rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--fg-soft);
    text-wrap: pretty;
}

.body-l { font-size: 1.06rem; line-height: 1.66; color: var(--fg-soft); }
.body   { color: var(--fg-soft); text-wrap: pretty; }
.body-s { font-size: .94rem; line-height: 1.6; color: var(--fg-muted); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--f-body);
    font-size: .715rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--orange);
    line-height: 1;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--orange);
    flex: none;
}

.eyebrow--plain::before { display: none; }

.mono {
    font-family: var(--f-mono);
    font-size: .78rem;
    letter-spacing: .01em;
    font-weight: 500;
}

.o { color: var(--orange); }

/* frase spezzata: il brief usa molto il ritmo a riga singola */
.staccato { display: block; }
.staccato > span { display: block; }

/* testo con parola evidenziata a marker */
.mark {
    position: relative;
    display: inline-block;
    color: var(--fg);
    z-index: 0;
}

.mark::after {
    content: '';
    position: absolute;
    left: -.08em;
    right: -.08em;
    bottom: .06em;
    height: .34em;
    background: var(--orange);
    opacity: .22;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s var(--ease);
}

.is-in .mark::after,
.mark.is-in::after { transform: scaleX(1); }

/* titolo a sinistra, testo di apertura a destra */
.lead-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: end;
    gap: clamp(32px, 5vw, 76px);
}
.lead-split .sec-head { max-width: none; }

@media (max-width: 900px) {
    .lead-split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
}

/* header di sezione */
.sec-head { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: var(--sp-3); }
.sec-head .d2 + .lead,
.sec-head .d1 + .lead { margin-top: var(--sp-3); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   5. BOTTONI
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    /* .btn sta anche su <button> (il submit del form): senza questo iOS
       ci rimette sopra il proprio gradiente e i propri angoli. */
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--f-body);
    font-size: .95rem;
    font-weight: 550;
    letter-spacing: -.008em;
    line-height: 1;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--t-fast), background var(--t-fast),
                border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    white-space: nowrap;
}

.btn:active { transform: translateY(1px) scale(.995); }

.btn svg { width: 16px; height: 16px; flex: none; }

/* hc_arrow() stampa un <svg> senza width/height: dentro .btn ci pensa la regola
   qui sopra, fuori non la vincolava nessuno e nei .teaser__go la freccia usciva
   a 200px. Misura di base a specificità bassa, così .btn resta a 16. */
.arw { width: 18px; height: 18px; flex: none; }

.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* primario: arancione */
.btn-o {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 1px 2px rgba(230,69,0,.24), 0 10px 24px -10px rgba(255,90,31,.55);
}
.btn-o:hover {
    background: var(--orange-lo);
    box-shadow: 0 1px 2px rgba(230,69,0,.3), 0 16px 34px -12px rgba(255,90,31,.7);
}

/* solido invertito rispetto alla sezione */
.btn-solid {
    background: var(--invert-bg);
    color: var(--invert-fg);
}
.btn-solid:hover { opacity: .86; }

/* contorno */
.btn-line {
    background: transparent;
    color: var(--fg);
    border-color: var(--line);
}
.btn-line:hover {
    border-color: var(--fg-faint);
    background: var(--line-soft);
}

/* testo con freccia */
.btn-txt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 550;
    color: var(--fg);
    padding: 0;
    border-radius: 0;
}
.btn-txt::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: .22;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s var(--ease), opacity var(--t-fast);
}
.btn-txt:hover::after { transform: scaleX(1); opacity: .5; }
.btn-txt .arw { transition: transform .3s var(--ease); }
.btn-txt:hover .arw { transform: translateX(4px); }

/* Stato spento: è uno <span>, non un link disattivato. Deve leggersi come
   informazione ("non c'è nulla da cliccare"), non come bottone rotto. */
.btn.is-off {
    color: var(--fg-muted);
    border-color: var(--line);
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.btn-lg { padding: 18px 32px; font-size: 1rem; }
.btn-sm { padding: 11px 18px; font-size: .87rem; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* --------------------------------------------------------------------------
   6. COMPONENTI BASE
   -------------------------------------------------------------------------- */

/* Sold-out: prende il posto del blocco data quando non c'è un'edizione in
   programma. Occupa lo stesso spazio verticale della data, così la scheda
   evento non collassa quando il webinar non è calendarizzato. */
.soldout {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding-bottom: clamp(16px, 2vw, 22px);
    border-bottom: 1px solid var(--line);
    text-align: center;
    line-height: 1;
}
.soldout b {
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--orange);
}
.soldout span {
    font-size: .88rem;
    line-height: 1.4;
    color: var(--fg-muted);
}

/* Fuori da una scheda evento non c'è nulla sotto da separare. */
.soldout--block {
    padding: clamp(28px, 4vw, 44px) 0 0;
    border-bottom: 0;
}

/* pill / badge */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--fg-soft);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    line-height: 1;
}

.pill--o {
    color: var(--orange);
    background: rgba(255, 90, 31, .09);
    border-color: rgba(255, 90, 31, .22);
}

.pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex: none;
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .18);
}

.pill .dot--live { animation: hc-pulse 2.4s var(--ease-io) infinite; }

@keyframes hc-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 90, 31, 0); }
}

/* stato "sono disponibile". L'arancione del brand qui lavorava contro il
   messaggio: segnala attenzione, non apertura. Tinta tenue, non satura:
   è un'etichetta di stato, non un bottone. */
.pill--live {
    color: var(--green-ink);
    background: rgba(63, 207, 107, .10);
    border-color: rgba(63, 207, 107, .26);
}

.theme-ink .pill--live { color: var(--green-hi); }

.pill--live .dot {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(63, 207, 107, .18);
}

/* stessa pulsazione, altro colore: la keyframe arancione lascerebbe un
   alone fuori tinta intorno al pallino verde */
.pill--live .dot--live { animation-name: hc-pulse-g; }

@keyframes hc-pulse-g {
    0%, 100% { box-shadow: 0 0 0 3px rgba(63, 207, 107, .2); }
    50%      { box-shadow: 0 0 0 6px rgba(63, 207, 107, 0); }
}

/* card */
.card {
    position: relative;
    padding: clamp(22px, 2.4vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t);
}

.card--hover:hover {
    border-color: var(--fg-faint);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.card--flat { background: var(--surface-2); }

.card--pad-lg { padding: clamp(28px, 3.2vw, 44px); }

.card__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--orange);
}
.card__ico svg { width: 20px; height: 20px; }

.card .d4 { margin-bottom: 10px; }

/* numero d'ordine grande */
.ordinal {
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}

/* divisore etichettato */
.rule {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--fg-faint);
}
.rule::before, .rule::after {
    content: '';
    height: 1px;
    background: var(--line);
    flex: 1;
}

/* lista con check */
.checks { display: grid; gap: 13px; }
.checks li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    font-size: .98rem;
    color: var(--fg-soft);
    line-height: 1.5;
}
.checks li::before {
    content: '';
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
    background: rgba(255, 90, 31, .12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 11px;
    background-position: center;
    background-repeat: no-repeat;
}

/* lista con croce (negazioni — molto usate nel brief) */
.crosses { display: grid; gap: 12px; }
.crosses li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    font-size: .98rem;
    color: var(--fg-muted);
    line-height: 1.5;
}
.crosses li::before {
    content: '';
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--line-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

/* tag cloud (le competenze del brief) */
.tags { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
    padding: 8px 14px;
    font-size: .85rem;
    font-weight: 450;
    color: var(--fg-soft);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    line-height: 1;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tag:hover { color: var(--orange); border-color: rgba(255,90,31,.3); background: rgba(255,90,31,.06); }

/* stat */
.stat__n {
    font-family: var(--f-display);
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--fg);
}
.stat__n .suf { color: var(--orange); }
.stat__l {
    margin-top: 12px;
    font-size: .89rem;
    line-height: 1.45;
    color: var(--fg-muted);
}

/* quote */
.quote {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -.026em;
    line-height: 1.18;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. ACCORDION
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }

.acc__item { border-bottom: 1px solid var(--line); }

.acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 26px 0;
    text-align: left;
    font-family: var(--f-display);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.3;
    color: var(--fg);
    transition: color var(--t-fast);
}
.acc__btn:hover { color: var(--orange); }

.acc__sign {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
}
.acc__sign::before, .acc__sign::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .38s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign::after { transform: rotate(0deg); }
.acc__item.is-open .acc__btn { color: var(--orange); }

.acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s var(--ease);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }

.acc__inner {
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s var(--ease-io);
}
.acc__item.is-open .acc__inner { opacity: 1; transition-delay: .1s; }

.acc__inner > div {
    padding-bottom: 28px;
    max-width: 68ch;
    color: var(--fg-soft);
    font-size: .99rem;
    line-height: 1.65;
}
.acc__inner p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   8. SFONDI DECORATIVI
   -------------------------------------------------------------------------- */

/* griglia tecnica */
.bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}

/* Alone arancione. Nessun filter: blur() — un radial-gradient è già
   sfumato, e sfocare un elemento da 900px costava un repaint per frame. */
.bg-glow {
    position: absolute;
    width: 70vw;
    max-width: 900px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 90, 31, .17) 0%,
        rgba(255, 90, 31, .07) 38%,
        transparent 68%);
    pointer-events: none;
}

.theme-paper .bg-glow,
.theme-paper-2 .bg-glow { background: radial-gradient(circle, rgba(255, 90, 31, .10), transparent 66%); }

/* linee verticali di colonna */
.bg-cols {
    position: absolute;
    inset: 0;
    max-width: var(--cw);
    margin-inline: auto;
    padding-inline: var(--gut);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.bg-cols span {
    width: 1px;
    background: var(--line-soft);
}
@media (max-width: 860px) { .bg-cols span:nth-child(n+4) { display: none; } }

/* --------------------------------------------------------------------------
   9. REVEAL ON SCROLL
   -------------------------------------------------------------------------- */
/* Niente will-change: promuoveva a layer GPU permanente ogni elemento
   rivelato (decine per pagina) e il compositor non li rilasciava mai.
   La transizione dura mezzo secondo e avviene una volta sola. */
[data-rv] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--rv-d, 0ms);
}
[data-rv].is-in { opacity: 1; transform: none; }

[data-rv="fade"] { transform: none; }
[data-rv="left"]  { transform: translateX(-26px); }
[data-rv="right"] { transform: translateX(26px); }
[data-rv="scale"] { transform: scale(.965); }
[data-rv="clip"]  {
    opacity: 1;
    transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease);
    transition-delay: var(--rv-d, 0ms);
}
[data-rv="clip"].is-in { clip-path: inset(0 0 0 0); }

/* stagger automatico su figli diretti */
[data-rv-group] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .68s var(--ease), transform .68s var(--ease);
}
[data-rv-group].is-in > * { opacity: 1; transform: none; }
[data-rv-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-rv-group].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-rv-group].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-rv-group].is-in > *:nth-child(4) { transition-delay: 210ms; }
[data-rv-group].is-in > *:nth-child(5) { transition-delay: 280ms; }
[data-rv-group].is-in > *:nth-child(6) { transition-delay: 350ms; }
[data-rv-group].is-in > *:nth-child(7) { transition-delay: 420ms; }
[data-rv-group].is-in > *:nth-child(8) { transition-delay: 490ms; }
[data-rv-group].is-in > *:nth-child(9) { transition-delay: 560ms; }
[data-rv-group].is-in > *:nth-child(n+10) { transition-delay: 630ms; }

/* --------------------------------------------------------------------------
   10. MOTORE SVG
   Le animazioni SVG partono solo quando il contenitore prende .is-in.
   -------------------------------------------------------------------------- */

/* tracciato che si disegna */
.svg-draw {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 1.6s var(--ease);
    transition-delay: var(--d, 0ms);
}
.is-in .svg-draw { stroke-dashoffset: 0; }

/* elemento che appare in scala */
.svg-pop {
    opacity: 0;
    transform: scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .5s var(--ease), transform .6s var(--ease);
    transition-delay: var(--d, 0ms);
}
.is-in .svg-pop { opacity: 1; transform: scale(1); }

/* elemento che sfuma */
.svg-fade {
    opacity: 0;
    transition: opacity .8s var(--ease);
    transition-delay: var(--d, 0ms);
}
.is-in .svg-fade { opacity: 1; }

/* barra che cresce dal basso */
.svg-rise {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: bottom center;
    transition: transform .9s var(--ease);
    transition-delay: var(--d, 0ms);
}
.is-in .svg-rise { transform: scaleY(1); }

/* barra che cresce da sinistra */
.svg-grow {
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: left center;
    transition: transform .9s var(--ease);
    transition-delay: var(--d, 0ms);
}
.is-in .svg-grow { transform: scaleX(1); }

/* ── Loop continui ────────────────────────────────────────────────────────
 * Girano SOLO dentro uno scope marcato .is-live, cioè visibile a schermo.
 * Senza questo le animazioni su stroke-dashoffset (non componibili su GPU)
 * ridisegnavano l'SVG a ogni frame anche fuori dalla viewport, per sempre.
 * .is-in resta l'entrata one-shot; .is-live si accende e si spegne.
 * ------------------------------------------------------------------------ */
.svg-loop-pulse { transform-box: fill-box; transform-origin: center; }
.is-live .svg-loop-pulse { animation: svg-pulse 3s var(--ease-io) infinite; animation-delay: var(--d, 0ms); }
@keyframes svg-pulse {
    0%, 100% { opacity: .28; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.28); }
}

.is-live .svg-loop-dash { animation: svg-dash 2.4s linear infinite; animation-delay: var(--d, 0ms); }
@keyframes svg-dash { to { stroke-dashoffset: -32; } }

.is-live .svg-loop-float { animation: svg-float 6s var(--ease-io) infinite; animation-delay: var(--d, 0ms); }
@keyframes svg-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.is-live .svg-loop-spin { animation: svg-spin 28s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes svg-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   11. UTILITÀ
   -------------------------------------------------------------------------- */
/* Il prefisso .hornoi non è cosmetico: il reset azzera i margini con
   `.hornoi h1, ... .hornoi p { margin: 0 }`, specificità (0,1,1). Una utility
   a sola classe vale (0,1,0) e perdeva il confronto, quindi ogni .lead.mt-4 e
   ogni .d4.mt-3 restavano incollati al blocco sopra: i margini funzionavano
   solo sui div. Con il prefisso le utility valgono (0,2,0) e tornano a valere
   su titoli e paragrafi, che è dove servono. */
.hornoi .mt-0  { margin-top: 0 !important; }
.hornoi .mt-1  { margin-top: var(--sp-1); }
.hornoi .mt-2  { margin-top: var(--sp-2); }
.hornoi .mt-3  { margin-top: var(--sp-3); }
.hornoi .mt-4  { margin-top: var(--sp-4); }
.hornoi .mt-5  { margin-top: var(--sp-5); }
.hornoi .mt-6  { margin-top: var(--sp-6); }
.hornoi .mt-7  { margin-top: var(--sp-7); }

.hornoi .mb-3  { margin-bottom: var(--sp-3); }
.hornoi .mb-4  { margin-bottom: var(--sp-4); }
.tc    { text-align: center; }
.rel   { position: relative; }
.z1    { position: relative; z-index: 1; }
.mxa   { margin-inline: auto; }
.maxw-60 { max-width: 60ch; }
.maxw-52 { max-width: 52ch; }
.maxw-44 { max-width: 44ch; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: .9rem;
}
.skip-link:focus { top: 20px; }

@media (max-width: 860px) { .hide-m { display: none !important; } }
@media (min-width: 861px) { .hide-d { display: none !important; } }

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hornoi *,
    .hornoi *::before,
    .hornoi *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    [data-rv], [data-rv-group] > * { opacity: 1 !important; transform: none !important; }
    [data-rv="clip"] { clip-path: none !important; }
    .svg-draw { stroke-dashoffset: 0 !important; }
    .svg-pop, .svg-fade { opacity: 1 !important; transform: none !important; }
    .svg-rise, .svg-grow { transform: none !important; }
    .mark::after { transform: scaleX(1) !important; }
}

/* --------------------------------------------------------------------------
   TESTO RICCO
   Contenuto che arriva dall'editor: articoli e pagine di servizio. Sta nel
   core e non in single.css perche' non riguarda solo gli articoli.
   -------------------------------------------------------------------------- */
.prose — IL CONTENUTO DELL'ARTICOLO
   -------------------------------------------------------------------------- */
.prose {
    max-width: 72ch;
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--fg-soft);
}

.prose > * + * { margin-top: 1.35em; }

.prose h2, .prose h3, .prose h4 {
    font-family: var(--f-display);
    font-weight: 650;
    letter-spacing: -.024em;
    line-height: 1.2;
    color: var(--fg);
    scroll-margin-top: 110px;
}
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-top: 2.2em; }
.prose h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem);  margin-top: 1.9em; }
.prose h4 { font-size: 1.1rem; margin-top: 1.7em; }

.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }

.prose a {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: rgba(255, 90, 31, .5);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.prose a:hover { color: var(--orange); text-decoration-color: var(--orange); }

.prose strong { color: var(--fg); font-weight: 600; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
    position: relative;
    padding-left: 26px;
}
.prose ul li + li, .prose ol li + li { margin-top: .55em; }
.prose ul li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: .68em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--orange); font-weight: 600; }

.prose blockquote {
    margin-inline: 0;
    padding: 4px 0 4px 26px;
    border-left: 2px solid var(--orange);
    font-family: var(--f-display);
    font-size: clamp(1.14rem, 1.7vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.44;
    color: var(--fg);
}
.prose blockquote cite {
    display: block;
    margin-top: 12px;
    font-family: var(--f-body);
    font-size: .86rem;
    font-style: normal;
    font-weight: 400;
    color: var(--fg-muted);
}

.prose img,
.prose figure img {
    border-radius: var(--r);
    border: 1px solid var(--line);
}
.prose figure { margin-inline: 0; }
.prose figcaption {
    margin-top: 12px;
    font-size: .84rem;
    color: var(--fg-muted);
    text-align: center;
}

.prose hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin-block: 2.6em;
}

.prose code {
    padding: 3px 7px;
    font-family: var(--f-mono);
    font-size: .86em;
    color: var(--orange);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 5px;
}

.prose pre {
    padding: clamp(18px, 2.2vw, 26px);
    background: var(--ink);
    border-radius: var(--r);
    overflow-x: auto;
    line-height: 1.6;
}
.prose pre code {
    padding: 0;
    color: #EDEDED;
    background: none;
    border: 0;
    font-size: .86rem;
}

/* tabelle: scorrono da sole, la pagina non si allarga mai */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}
.prose .wp-block-table,
.prose figure.wp-block-table { overflow-x: auto; }
.prose th, .prose td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.prose th {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--fg);
    background: var(--surface-2);
}

/* blocchi Gutenberg che escono dalla colonna */
.prose .alignwide,
.prose .alignfull {
    max-width: none;
    width: 100%;
}

/* --------------------------------------------------------------------------
   FORM DI RICERCA
   -------------------------------------------------------------------------- */
.srch {
    display: flex;
    gap: 10px;
    max-width: 520px;
}

.srch__f {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: .95rem;
    transition: border-color var(--t-fast);
}

.srch__f::placeholder { color: var(--fg-faint); }

.srch__f:focus-visible {
    outline: none;
    border-color: var(--orange);
}

.srch__b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--t-fast);
}

.srch__b:hover { background: var(--orange-lo); }
.srch__b svg { width: 16px; height: 16px; }

@media (max-width: 520px) {
    .srch { flex-direction: column; }
    .srch__b { justify-content: center; padding: 14px 22px; }
}