/* ================================================================
   HOME.CSS — stili esclusivi della homepage (index.html)
   Richiede style.css (token) e brand.css (nav, reveal, pulsanti).
================================================================= */

/* ================================================================
   HERO
================================================================= */
body.page-home .hero {
    display: flex;
    justify-content: center;
    padding: 4.5em 1.5em 4.5em;
}

.hero-inner {
    width: 100%;
    max-width: calc(1120px - 3em); /* allineato al contenuto di nav e sezioni */
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3.5em;
    align-items: center;
}

.hero-copy { text-align: left; }
.hero-copy .eyebrow { margin-bottom: 1.5em; }

body.page-home h1.wordmark {
    font-size: clamp(2.8rem, 6vw, 4.3rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.045em;
    margin: 0 0 .28em;
    color: var(--brand-700);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    body.page-home h1.wordmark {
        background: linear-gradient(115deg, var(--brand-800) 15%, var(--brand-600) 55%, var(--brand-400) 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-bottom: .06em; /* evita il taglio dei discendenti */
    }
}

.comment-line {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--ink-soft);
    margin: 0 0 .9em;
}

.hero-lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--muted);
    max-width: 500px;
    margin: 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
    margin-top: 2em;
}


/* ---------------- Guida all'acquisto: la card nella hero ---------------- */
.hero-visual {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 480px;
}
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 10% -5% -6% 10%;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(47, 143, 209, .38), rgba(34, 197, 94, .22));
    filter: blur(42px);
    z-index: 0;
}

.guide-card {
    position: relative;
    z-index: 1;
    padding: 1.9em 1.9em 1.6em;
    color: #d3deec;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(47, 143, 209, .45), transparent 60%),
        linear-gradient(160deg, #10284a 0%, #0b1a31 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 26px;
    box-shadow: 0 30px 60px -26px rgba(11, 26, 49, .7);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.guide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 38px 70px -26px rgba(11, 26, 49, .75);
}

/* illustrazione: un portatile sul cui schermo scorrono i tre sistemi */
.guide-art { margin-bottom: 1.4em; }
.ga-laptop { width: 156px; }
.ga-screen {
    display: grid;
    place-items: center;
    height: 88px;
    background: linear-gradient(180deg, #1f4170, #14305a);
    border: 5px solid #2d4a72;
    border-bottom-width: 7px;
    border-radius: 11px 11px 4px 4px;
}
.ga-words {
    height: 1.5em;
    overflow: hidden;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.5em;
    letter-spacing: -.01em;
    color: #ffffff;
    text-align: center;
}
.ga-words span { display: block; animation: ga-cycle 7.2s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes ga-cycle {
    0%, 25%  { transform: translateY(0); }
    33%, 58% { transform: translateY(-100%); }
    66%, 91% { transform: translateY(-200%); }
    100%     { transform: translateY(-300%); }
}
.ga-base {
    height: 9px;
    margin: 0 -14px;
    background: linear-gradient(180deg, #46658f, #2a4468);
    border-radius: 2px 2px 10px 10px;
}

.guide-eyebrow { margin: 0 0 .5em; font-size: .86rem; font-weight: 600; color: #8fc3ff; }
.guide-card .guide-title {
    margin: 0 0 .55em;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #ffffff;
}
.guide-text { margin: 0; font-size: 1rem; line-height: 1.6; color: #c9d6e6; }
.guide-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 1.1em 0 1.5em;
    padding: 0;
    list-style: none;
}
.guide-topics li {
    padding: .3em .75em;
    font-size: .8rem;
    font-weight: 500;
    color: #dbe7f5;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
}

/* il pulsante: bianco pieno, freccia in un cerchio, anello che pulsa */
.guide-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .85em;
    padding: .55em .6em .55em 1.35em;
    font-family: inherit;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0b1a31;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(143, 195, 255, .65);
    transition: transform .2s ease, box-shadow .2s ease;
}
.guide-cta-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: var(--brand-600);
    border-radius: 50%;
}
/* animazioni solo su opacità e trasformazioni: composte dalla GPU, nessun ridisegno */
.guide-cta::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(143, 195, 255, .85);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: cta-ring 2.8s ease-out infinite;
}
@keyframes cta-ring {
    0%        { opacity: .9; transform: scale(.97); }
    70%, 100% { opacity: 0;  transform: scale(1.1); }
}
.guide-cta-arrow svg { animation: cta-nudge 2.8s ease-in-out infinite; }
@keyframes cta-nudge {
    0%, 55%, 100% { transform: translateX(0); }
    68%           { transform: translateX(4px); }
    80%           { transform: translateX(0); }
    88%           { transform: translateX(3px); }
}
.guide-card:hover .guide-cta,
.guide-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px rgba(143, 195, 255, .85);
}
.guide-card:hover .guide-cta::before { animation: none; }
.guide-cta:focus-visible { outline: 3px solid #8fc3ff; outline-offset: 4px; }
.guide-meta { margin: .9em 0 0; font-size: .82rem; color: #a9bbd2; }

@media (prefers-reduced-motion: reduce) {
    .ga-words span, .guide-cta::before, .guide-cta-arrow svg { animation: none; }
    .guide-card, .guide-cta { transition: none; }
}

/* ================================================================
   SEZIONE CORSI
================================================================= */
#corsi {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5em 1.5em 4.5em;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
}
/* quattro corsi: due righe da due invece di tre più uno spaiato */
@media (min-width: 681px) {
    .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.course-card {
    --accent: var(--c-fdp);
    --accent-rgb: var(--c-fdp-rgb);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-decoration: none;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.7em 1.6em 1.4em;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.course-card[data-accent="asd"] { --accent: var(--c-asd); --accent-rgb: var(--c-asd-rgb); }
.course-card[data-accent="bd"]  { --accent: var(--c-bd);  --accent-rgb: var(--c-bd-rgb); }
.course-card[data-accent="web"] { --accent: var(--c-web); --accent-rgb: var(--c-web-rgb); }
.course-card[data-accent="rl"]  { --accent: var(--c-rl);  --accent-rgb: var(--c-rl-rgb); }
.course-card[data-accent="elt"] { --accent: var(--c-elt); --accent-rgb: var(--c-elt-rgb); }

/* Filo colorato in cima */
.course-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .25));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
/* Alone nell'angolo */
.course-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -110px; right: -110px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--accent-rgb), .14), transparent);
    transition: transform .45s ease;
}

.course-card:hover,
.course-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), .32);
    box-shadow: 0 24px 44px -22px rgba(var(--accent-rgb), .45);
}
.course-card:hover::before,
.course-card:focus-visible::before { transform: scaleX(1); }
.course-card:hover::after { transform: scale(1.4); }

.course-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.3em;
}

.course-icon {
    width: 52px;
    height: 52px;
    padding: 13px;
    color: var(--accent);
    background: rgba(var(--accent-rgb), .09);
    border: 1px solid rgba(var(--accent-rgb), .16);
    border-radius: 14px;
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.course-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.course-card:hover .course-icon {
    color: #ffffff;
    background: var(--accent);
    transform: rotate(-5deg) scale(1.05);
}

.course-meta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}

.course-title {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 .45em;
}

.course-desc {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 1.1em;
    flex-grow: 1;
}

.course-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    padding: 0;
    margin: 0 0 1.4em;
}
.course-tags li {
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line);
    padding: .25em .65em;
    border-radius: 7px;
}

.course-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.1em;
    border-top: 1px solid var(--line);
    font-size: .92rem;
    font-weight: 600;
    color: var(--accent);
}
.course-cta .arrow {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-family: var(--font-sans);
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .09);
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.course-card:hover .course-cta .arrow {
    color: #ffffff;
    background: var(--accent);
    transform: translateX(3px);
}

/* ================================================================
   STRUMENTI DI STUDIO
================================================================= */
.tools {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1em 1.5em 5em;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2em;
    margin-bottom: 2.6em;
}

.tool {
    padding: 1.4em 1.3em 1.35em;
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: background-color .25s ease, border-color .25s ease;
}
.tool:hover { background: var(--paper-0); border-color: var(--line-strong); }

.tool-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 1em;
    color: var(--brand-600);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 11px;
}
.tool-icon svg { width: 20px; height: 20px; }

body.page-home .tool h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .35em;
}
.tool p {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

/* ================================================================
   RESPONSIVE
================================================================= */
@media (max-width: 980px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    body.page-home .hero { padding-top: 3.2em; }
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 3.2em;
    }
    .hero-copy { text-align: center; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { justify-self: center; }
}

@media (max-width: 600px) {
    body.page-home .hero { padding: 2.6em 16px 3em; }
    body.page-home h1.wordmark { font-size: 2.7rem; }
    .comment-line { font-size: 1.15rem; }
    .hero-lead { font-size: 1.02rem; }
    .guide-card { padding: 1.5em 1.3em 1.3em; border-radius: 22px; }
    .guide-art { margin-bottom: 1.1em; }
    .ga-laptop { width: 120px; }
    .ga-screen { height: 66px; border-width: 4px 4px 6px; }
    .ga-words { font-size: .86rem; }
    .guide-cta { width: 100%; justify-content: space-between; }
    #corsi { padding: 1em 16px 3.5em; }
    .course-grid { grid-template-columns: 1fr; }
    .tools { padding: .5em 16px 3.5em; }
    .tools-grid { grid-template-columns: 1fr; gap: .8em; }
    .tool { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; align-items: start; }
    .tool-icon { grid-row: span 2; margin-bottom: 0; }
}

/* ================================================================
   CONFIGURATORE — la finestra
   Pannello chiaro e sobrio: tipografia netta, linee sottili,
   un solo colore d'accento. Tutti i testi sono verificati >= 4.5:1.
================================================================= */
body.adv-open { overflow: hidden; }

.adv-dialog {
    --a-ink: #1d1d1f;
    --a-mut: #6a6a70;
    --a-line: #e3e3e8;
    --a-soft: #f5f5f7;
    --a-accent: #005a9c;
    --a-accent-soft: #f2f7fc;
    width: min(960px, 94vw);
    max-width: 94vw;
    /* ancorato in alto: cambiando schermata cresce solo verso il basso, senza salti */
    height: fit-content;          /* "auto" lo stirerebbe a tutta altezza */
    min-height: min(560px, 86vh);
    max-height: 90vh;
    margin: 5vh auto auto;
    padding: 0;
    color: var(--a-ink);
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .06);
    overflow: hidden;
}
.adv-dialog.is-result { height: min(820px, 90vh); }
.adv-dialog[open] { animation: adv-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes adv-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.adv-dialog::backdrop {
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.adv-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: inherit;
    max-height: 90vh;
}

/* ---------------- testata ---------------- */
.adv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    padding: 1.5em 1.75em 1.1em;
}
.adv-eyebrow {
    display: flex;
    gap: .6em;
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--a-mut);
}
.adv-eyebrow > span:first-child { color: var(--a-accent); }
.adv-head h2 {
    margin: .2em 0 0;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--a-ink);
}
.adv-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--a-mut);
    background: var(--a-soft);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.adv-close:hover { color: var(--a-ink); background: #e8e8ed; }

.adv-progress { height: 2px; margin: 0 1.75em; background: var(--a-line); border-radius: 2px; overflow: hidden; }
.adv-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--a-accent);
    transition: width .35s cubic-bezier(.2, .8, .2, 1);
}

.adv-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.3em 1.75em 1.5em;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c7c7cc transparent;
}

/* focus da tastiera, uguale ovunque nella finestra */
.adv-dialog :focus-visible {
    outline: 3px solid rgba(0, 90, 156, .35);
    outline-offset: 2px;
}

/* ---------------- domanda ---------------- */
.adv-hint {
    margin: 0 0 1.1em;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--a-mut);
}
.adv-grid {
    margin-bottom: 1.4em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.adv-card {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: .95em 1.05em;
    font-family: inherit;
    text-align: left;
    color: var(--a-ink);
    background: #ffffff;
    border: 1px solid var(--a-line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.adv-card:hover {
    border-color: #b9cfe3;
    background: #fbfdff;
    box-shadow: 0 4px 14px -8px rgba(0, 61, 107, .25);
}
.adv-card.is-chosen { border-color: var(--a-accent); background: var(--a-accent-soft); }
.adv-card-text { flex: 1; min-width: 0; }
.adv-card-label { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.adv-card-sub { display: block; margin-top: .2em; font-size: .85rem; line-height: 1.4; color: var(--a-mut); }
.adv-key {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--a-mut);
    background: #ffffff;
    border: 1px solid var(--a-line);
    border-bottom-width: 2px;
    border-radius: 6px;
}

.adv-content > * { flex-shrink: 0; }
.adv-foot {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin-top: auto;
    padding-top: 1.1em;
    border-top: 1px solid var(--a-line);
}
.adv-textbtn {
    flex-shrink: 0;
    padding: .35em .1em;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--a-accent);
    background: none;
    border: 0;
    cursor: pointer;
}
.adv-textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.adv-foot-hint { margin-left: auto; font-size: .8rem; color: var(--a-mut); }

/* ---------------- risultato: sintesi ---------------- */
.adv-summary { margin-bottom: 1.3em; }
.adv-headline {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--a-ink);
}
.adv-sintesi { margin: .35em 0 0; font-size: 1rem; line-height: 1.5; color: var(--a-mut); }
.adv-recap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1em; }
.adv-chip {
    padding: .32em .75em;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 500;
    color: #3a3a3f;
    background: var(--a-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.adv-chip:hover { background: #ffffff; border-color: var(--a-line); }

/* ---------------- controllo segmentato ---------------- */
.adv-tabs {
    position: sticky;
    top: -1.3em;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: 0 0 1.3em;
    padding: 3px;
    background: #ececf0;
    border-radius: 11px;
    box-shadow: 0 -1.3em 0 #ffffff;
}
.adv-tab {
    padding: .5em .6em;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: #3a3a3f;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.adv-tab:hover { color: var(--a-ink); }
.adv-tab[aria-selected="true"] {
    color: var(--a-ink);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);
}

.adv-subtitle {
    margin: 0 0 .7em;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--a-mut);
}

/* ---------------- scheda tecnica ---------------- */
.adv-specs { margin: 0; border-top: 1px solid var(--a-line); }
.adv-spec {
    display: grid;
    grid-template-columns: 9.5em 1fr;
    gap: 1.2em;
    padding: .9em 0;
    border-bottom: 1px solid var(--a-line);
}
.adv-spec-k { font-size: .9rem; color: var(--a-mut); padding-top: .05em; }
.adv-spec-v { margin: 0; }
.adv-spec-v strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.adv-spec-p { display: block; margin-top: .25em; font-size: .88rem; line-height: 1.5; color: var(--a-mut); }

.adv-notes { margin-top: 1.5em; }
.adv-note {
    margin: 0 0 .6em;
    padding: .8em 1em;
    font-size: .9rem;
    line-height: 1.55;
    color: #7a4f00;
    background: #fff8e6;
    border-radius: 12px;
}
.adv-before { margin-top: 1.5em; }
.adv-before-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.adv-before-list li {
    padding: .9em 1em;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--a-mut);
    background: var(--a-soft);
    border-radius: 12px;
}
.adv-before-list strong { display: block; margin-bottom: .2em; font-size: .9rem; color: var(--a-ink); }

/* ---------------- modelli ---------------- */
.adv-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.adv-pick {
    display: flex;
    flex-direction: column;
    padding: 1.15em 1.15em 1.1em;
    background: #ffffff;
    border: 1px solid var(--a-line);
    border-radius: 16px;
}
.adv-pick.is-top { border-color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-accent) inset; }
.adv-pick-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .7em; }
.adv-badge {
    padding: .2em .6em;
    font-size: .72rem;
    font-weight: 600;
    color: #3a3a3f;
    background: var(--a-soft);
    border-radius: 999px;
}
.adv-badge.is-top { color: #ffffff; background: var(--a-accent); }
.adv-badge.is-warn { color: #7a4f00; background: #fff3d6; }
.adv-pick-name { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; color: var(--a-ink); }
.adv-pick-price { margin: .15em 0 0; font-size: .9rem; font-weight: 600; color: var(--a-accent); }
.adv-pick-fit { margin: .6em 0 0; font-size: .88rem; line-height: 1.5; color: var(--a-mut); }
.adv-pick-list { margin: .8em 0 0; padding: 0; list-style: none; font-size: .86rem; line-height: 1.45; }
.adv-pick-list li { position: relative; padding: .2em 0 .2em 1.3em; }
.adv-pick-list li::before { position: absolute; left: 0; top: .2em; font-weight: 700; }
.adv-pick-list .is-pro::before { content: "+"; color: #1a7f45; }
.adv-pick-list .is-con { color: var(--a-mut); }
.adv-pick-list .is-con::before { content: "–"; color: var(--a-mut); }
.adv-pick-fam {
    margin: .9em 0 1em;
    padding: .65em .8em;
    font-size: .82rem;
    line-height: 1.45;
    color: #3a3a3f;
    background: var(--a-soft);
    border-radius: 10px;
}
.adv-pick-fam span { display: block; margin-bottom: .15em; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--a-mut); }
.adv-cta {
    margin-top: auto;
    display: block;
    padding: .65em 1em;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--a-accent);
    background: var(--a-accent-soft);
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}
.adv-cta::after { content: " ↗"; }
.adv-cta:hover { background: #e3eef8; }
.adv-cta.is-primary { color: #ffffff; background: var(--a-accent); }
.adv-cta.is-primary:hover { background: #004a82; }

.adv-panels { margin-bottom: 1.4em; }
.adv-fineprint { margin: 1em 0 0; font-size: .8rem; line-height: 1.5; color: var(--a-mut); }

/* ---------------- appunti ---------------- */
.adv-lead { margin: 0 0 1.1em; font-size: .98rem; line-height: 1.6; color: var(--a-ink); }
.adv-table-wrap { overflow-x: auto; border: 1px solid var(--a-line); border-radius: 14px; }
.adv-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.adv-table th,
.adv-table td { padding: .7em .9em; text-align: left; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.adv-table thead th { font-size: .78rem; font-weight: 600; color: var(--a-mut); background: #fafafc; }
.adv-table tbody th { font-weight: 600; color: var(--a-ink); }
.adv-table td { color: #3a3a3f; }
.adv-table tbody tr:last-child > * { border-bottom: 0; }
.adv-table tr.is-mine > * { background: var(--a-accent-soft); }
.adv-table tr.is-mine th { color: var(--a-accent); }

/* ---------------- righe di link (appunti, extra) ---------------- */
.adv-rows { display: grid; gap: 0; margin-top: 1em; border-top: 1px solid var(--a-line); }
.adv-row {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: .8em .2em;
    text-decoration: none;
    color: var(--a-ink);
    border-bottom: 1px solid var(--a-line);
    transition: background-color .15s ease;
}
.adv-row:hover { background: #fafafc; }
.adv-row-text { flex: 1; min-width: 0; }
.adv-row-title { display: block; font-size: .95rem; font-weight: 600; }
.adv-row-sub { display: block; margin-top: .1em; font-size: .84rem; color: var(--a-mut); }
.adv-row-go { color: var(--a-accent); font-weight: 600; }
.adv-row.is-free .adv-row-title { color: var(--a-accent); }

.adv-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.adv-extra .adv-rows { margin-top: 0; }

.adv-disclosure { margin-left: auto; font-size: .76rem; line-height: 1.45; color: var(--a-mut); text-align: right; max-width: 34em; }

/* ---------------- guida: capitoli ---------------- */
.gd-intro { margin: 0 0 1.2em; font-size: 1rem; line-height: 1.55; color: var(--a-mut); }
.gd-title { margin: 0 0 .35em; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--a-ink); }
.gd-lead { margin: 0 0 1.2em; font-size: .98rem; line-height: 1.6; color: var(--a-ink); }
.gd-subtitle {
    margin: 1.8em 0 .8em;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--a-mut);
}
.gd-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.gd-card { padding: 1.1em 1.15em; background: #ffffff; border: 1px solid var(--a-line); border-radius: 16px; }
.gd-card-name { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; color: var(--a-ink); }
.gd-card-for,
.gd-card-text { margin: .35em 0 0; font-size: .88rem; line-height: 1.5; color: var(--a-mut); }
.gd-card-price { margin: .15em 0 0; font-size: .9rem; font-weight: 600; color: var(--a-accent); }
.gd-card .adv-pick-list { margin-top: .7em; }

.gd-matrix thead th:not(:first-child),
.gd-matrix td { text-align: center; }
.gd-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.gd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9d9e0; }
.gd-dots i.on { background: var(--a-accent); }
.gd-dots.is-none { font-size: .78rem; font-weight: 600; color: #b42318; }

.gd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.gd-spec { padding: 1em 1.1em; background: var(--a-soft); border-radius: 14px; }
.gd-spec-name { margin: 0 0 .6em; font-size: 1rem; font-weight: 700; color: var(--a-ink); }
.gd-spec-values { display: grid; grid-template-columns: auto 1fr; gap: .25em .8em; margin: 0; font-size: .88rem; }
.gd-spec-values dt { color: var(--a-mut); }
.gd-spec-values dd { margin: 0; font-weight: 500; color: var(--a-ink); }
.gd-spec-values .is-ok { color: var(--a-accent); font-weight: 600; }
.gd-spec-why { margin: .7em 0 0; font-size: .84rem; line-height: 1.5; color: var(--a-mut); }

.gd-bars { display: grid; gap: .8em; }
.gd-bar { display: grid; grid-template-columns: 11em 1fr 5.5em; align-items: center; gap: 1em; font-size: .9rem; }
.gd-bar-label { color: #3a3a3f; }
.gd-bar-track { height: 10px; background: #ececf0; border-radius: 999px; overflow: hidden; }
.gd-bar-fill { position: relative; display: block; height: 100%; background: var(--a-accent); border-radius: 999px; }
.gd-bar-fill.is-range { background: rgba(0, 90, 156, .3); }
.gd-bar-min { position: absolute; top: 0; bottom: 0; left: 0; background: var(--a-accent); border-radius: 999px; }
.gd-bar-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--a-ink); }

.gd-traps { display: grid; gap: .5em; margin: 0; padding: 0; list-style: none; }
.gd-traps li { position: relative; padding-left: 1.5em; font-size: .9rem; line-height: 1.5; color: var(--a-ink); }
.gd-traps li::before { content: "✕"; position: absolute; left: 0; font-weight: 700; color: #b42318; }

.gd-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gd-yes,
.gd-no { padding: 1em 1.1em; border-radius: 14px; }
.gd-yes { background: #eef8f1; }
.gd-no { background: var(--a-soft); }
.gd-yesno-t { margin: 0; font-weight: 700; color: var(--a-ink); }
.gd-yesno .adv-pick-list { margin-top: .5em; }
.gd-note { margin: 1em 0 0; font-size: .9rem; line-height: 1.6; color: #3a3a3f; }
.gd-link { display: block; margin-top: 1.3em; text-align: left; }

/* barra d'azione fissa in fondo alla guida */
.adv-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: .9em 1.75em 1.1em;
    background: #ffffff;
    border-top: 1px solid var(--a-line);
}
.adv-actions[hidden] { display: none; }
.adv-go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .75em;
    padding: .65em .7em .65em 1.3em;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--a-accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.adv-go:hover { background: #004a82; }
.adv-go-arrow { display: grid; place-items: center; width: 26px; height: 26px; background: rgba(255, 255, 255, .18); border-radius: 50%; }

/* ---------------- Strumenti: versione compatta ---------------- */
.tool { padding: 1.15em 1.1em 1.1em; }
.tool-icon { width: 34px; height: 34px; margin-bottom: .8em; border-radius: 9px; }
.tool-icon svg { width: 17px; height: 17px; }
.tool p { font-size: .86rem; }

@media (max-width: 860px) {
    .adv-before-list { grid-template-columns: 1fr; }
    .adv-extra { grid-template-columns: 1fr; gap: 1.6em; }
}

@media (max-width: 640px) {
    .adv-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
    .adv-dialog.is-result { height: 100dvh; }
    .adv-panel { max-height: 100dvh; height: 100dvh; }
    .adv-head { padding: 1.1em 1.1em .9em; }
    .adv-progress { margin: 0 1.1em; }
    .adv-content { padding: 1.1em 1.1em 1.4em; }
    .adv-tabs { top: -1.1em; box-shadow: 0 -1.1em 0 #ffffff; }
    .adv-grid { grid-template-columns: 1fr; }
    .adv-spec { grid-template-columns: 1fr; gap: .2em; }
    .adv-foot { flex-wrap: wrap; }
    .adv-foot-hint { display: none; }
    .adv-disclosure { margin-left: 0; text-align: left; }
    .adv-tab { padding: .5em .3em; font-size: .8rem; }
    .adv-actions { flex-direction: column-reverse; align-items: stretch; gap: .35em; padding: .8em 1.1em 1em; }
    .adv-go { margin-left: 0; justify-content: space-between; }
    .gd-next { align-self: center; }
    .gd-yesno { grid-template-columns: 1fr; }
    .gd-bar { grid-template-columns: 1fr auto; gap: .35em 1em; }
    .gd-bar-track { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .adv-dialog[open] { animation: none; }
}