/* AvvisaGare — sistema visivo da docs/design/DESIGN.md (NerdWallet dal catalogo getdesign, in blu cobalto)
   con l'impaginazione "manifesto" della taste-skill: campi di colore pieni, maiuscolo pesantissimo. */

@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("/static/fonts/montserrat-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal; font-display: swap; src: url("/static/fonts/montserrat-900.woff2") format("woff2"); }

:root {
  /* colori (DESIGN.md) */
  --primary: #1847b1;
  --primary-deep: #123a91;
  --night: #0b2763;
  --yellow: #ffd84d;
  --yellow-panel: #fff3c4;
  --yellow-accent: #ffe47a;
  --canvas: #ffffff;
  --canvas-soft: #f7f7f7;
  --sky-50: #f0f5ff;
  --sky-100: #e3ecfd;
  --sky-200: #b9cdf6;
  --hairline: #ebebec;
  --hairline-strong: #d8d9da;
  --ink: #000000;
  --muted: #64666a;
  --urgent: #de2828;
  /* i due blu della scritta del logo */
  --logo-dark: #023267;
  --logo-light: #025bd8;

  --font: "Montserrat", "Gotham", Arial, sans-serif;

  /* cinque misure */
  --t-xl: clamp(48px, 9vw, 150px);
  --t-l: clamp(26px, 3.3vw, 54px);
  --t-m: clamp(21px, 1.9vw, 28px);
  --t-b: 18px;
  --t-s: 15px;

  --m: clamp(16px, 2.2vw, 32px);
  --section: clamp(72px, 9vw, 128px);
  --radius: 2px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 300 var(--t-b)/1.5 var(--font); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
b, strong { font-weight: 700; }
a { color: var(--primary-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--yellow); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.skip { position: absolute; left: var(--m); top: 10px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.soft { color: var(--muted); }
.urgent { color: var(--urgent); font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- pulsanti e link (button-primary / button-secondary di NerdWallet) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0;
  border-radius: var(--radius); background: var(--primary); color: #fff; font: 700 var(--t-s)/1 var(--font);
  text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .15s var(--ease); }
.btn:hover { background: var(--primary-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-light, .foot .btn-light, .band .btn-light { background: var(--canvas); color: var(--primary); }
.btn-light:hover, .foot .btn-light:hover, .band .btn-light:hover { background: var(--sky-100); color: var(--primary-deep); }
.btn-block { width: 100%; min-height: 52px; }
.link-strong, .link-arrow { color: var(--primary); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-plain { background: none; border: 0; padding: 0; color: var(--primary-deep); font: inherit; font-size: var(--t-s); text-decoration: underline; cursor: pointer; }

/* ---------- barra in alto: bianca su ogni pagina ---------- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; padding: 0 var(--m); background: var(--canvas); }
.wordmark { justify-self: start; color: var(--logo-dark); font: 900 var(--t-m)/1 var(--font); letter-spacing: -0.03em; text-decoration: none; }
.wordmark .wm-b { color: var(--logo-light); }
.wordmark:hover { color: var(--logo-dark); }
.top-links { display: flex; gap: 32px; }
.top-links a { color: var(--ink); font: 700 var(--t-s)/1 var(--font); text-decoration: none; padding: 8px 0; }
.top-links a:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.top-action { justify-self: end; }

/* ---------- home: il numero gigante ---------- */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 72px);
  padding: 40px var(--m) 48px; background: var(--primary); color: #fff; }
.hero-title { font: 900 var(--t-xl)/0.88 var(--font); text-transform: uppercase; letter-spacing: -0.03em; }
.mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mask > span { display: block; }
.hero-num { color: var(--yellow); font-size: 2em; line-height: 0.82; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.hero-sub { max-width: 46ch; margin: 28px 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.hero-sub b { color: var(--yellow); }
.hero-form { max-width: 900px; margin-top: 28px; display: grid; gap: 12px; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; }
.hero-row input, .hero-row select { min-height: 56px; border-color: var(--canvas); }
.hero-form .consent a, .hero-form .msg { color: #fff; }
.btn-yellow { background: var(--yellow); color: var(--ink); min-height: 56px; padding: 0 24px; }
.btn-yellow:hover { background: var(--yellow-accent); color: var(--ink); }
.hero-fact { margin: 22px 0 0; font: 500 var(--t-s)/1.45 var(--font); color: var(--sky-200); }

/* apertura su due colonne: a destra gli ultimi bandi pubblicati, subito visibili */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
.hero .hero-num { font-size: 1.75em; }
.hero .hero-what { font-size: 0.52em; }
.latest { background: var(--canvas); color: var(--ink); border-radius: 8px; padding: 22px 24px 18px; align-self: center; }
.latest-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 10px; }
.latest-head h2 { font: 700 var(--t-m)/1.15 var(--font); }
.latest-head p { margin: 0; font: 500 var(--t-s)/1.3 var(--font); color: var(--muted); white-space: nowrap; }
.latest-list { list-style: none; margin: 0; padding: 0; }
.latest-list li { border-top: 1px solid var(--hairline); } /* taste-skill-ignore: frammento data-ui (lista avvisi) */
.latest-item { display: grid; gap: 3px; padding: 12px 8px; margin: 0 -8px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.latest-item:hover { background: var(--sky-50); color: var(--ink); }
.latest-meta, .latest-sub { font: 500 var(--t-s)/1.35 var(--font); color: var(--muted); }
.latest-sub { color: var(--ink); font-weight: 300; }
.latest-title { font: 700 var(--t-s)/1.35 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest-item:hover .latest-title { color: var(--primary); text-decoration: underline; }
.latest-all { display: inline-block; margin-top: 12px; font-size: var(--t-s); }

/* ---------- home: un comando ingigantito ---------- */
.pick { position: relative; min-height: 92svh; overflow: hidden; background: var(--yellow); transition: background-color .5s var(--ease); }
.pick.alt { background: var(--sky-200); }
.pick-text { position: relative; z-index: 1; padding: 56px var(--m) 0; max-width: 520px; }
.pick-text h2 { font: 700 var(--t-m)/1.15 var(--font); margin-bottom: 8px; }
.pick-control { position: absolute; left: 36vw; top: 30svh; font-size: var(--t-xl); }
.pick-label { display: block; font: 700 var(--t-s)/1 var(--font); margin-bottom: 14px; }
/* la regione è scritta in grande; sopra c'è il vero menu, trasparente e a dimensione normale, così la lista che si apre resta leggibile */
.pick-box { position: relative; display: inline-flex; align-items: center; gap: 0.25em; padding: 0.12em 0.3em 0.16em; background: var(--canvas);
  border: 0.06em solid var(--ink); font: 900 1em/1 var(--font); text-transform: uppercase; letter-spacing: -0.03em; white-space: nowrap; cursor: pointer; }
.pick-box::after { content: "▾"; font-size: 0.5em; }
.pick-box:focus-within { outline: 0.05em solid var(--primary); outline-offset: 0.05em; }
.pick-value { position: relative; z-index: 1; pointer-events: none; }
.pick-box::after { position: relative; z-index: 1; pointer-events: none; }
.pick-select { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: 500 18px/1.2 var(--font); text-transform: none; }
.pick-count { font: 700 var(--t-l)/1.1 var(--font); margin: 0.5em 0 0; }
.pick-go { display: flex; width: fit-content; margin-top: 24px; min-height: 56px; padding: 0 28px; background: var(--ink); font-size: var(--t-s); }
.pick-go::after { content: "→"; margin-left: 10px; transition: transform .25s var(--ease); }
.pick-go:hover { background: var(--primary); }
.pick-go:hover::after { transform: translateX(4px); }
.pick-count b { font-weight: 900; display: inline-block; }
.pick-count b.bump { animation: bump .45s var(--ease); }
@keyframes bump { from { transform: translateY(0.3em); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- home: frasi con interruttore ---------- */
.switch-band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; min-height: 20vh;
  padding: 28px var(--m); background: var(--canvas); transition: background-color .35s var(--ease); }
.switch-text { grid-column: 1 / 11; margin: 0; font: 700 var(--t-l)/1.1 var(--font); letter-spacing: -0.02em; color: var(--muted); transition: color .3s; }
.toggle { grid-column: 11 / 13; justify-self: end; position: relative; width: 2.1em; height: 1.1em; font-size: var(--t-l); padding: 0; border: 0;
  border-radius: 999px; background: var(--hairline-strong); cursor: pointer; transition: background-color .3s; }
.toggle span { position: absolute; top: 0.12em; left: 0.12em; width: 0.86em; height: 0.86em; border-radius: 50%; background: var(--canvas); transition: transform .35s var(--ease); }
.toggle[aria-checked="true"] { background: var(--ink); }
.toggle[aria-checked="true"] span { transform: translateX(1em); }
.switch-more { grid-column: 1 / 11; margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: var(--t-b); font-weight: 500;
  transition: max-height .4s var(--ease), opacity .3s, margin .3s; }
.switch-band.is-on .switch-text { color: var(--ink); }
.switch-band.is-on .switch-more { max-height: 5em; opacity: 1; margin-top: 10px; }
.switch-band.is-on:nth-child(1) { background: var(--sky-100); }
.switch-band.is-on:nth-child(2) { background: var(--yellow-panel); }
.switch-band.is-on:nth-child(3) { background: var(--sky-200); }
.switch-band.is-on:nth-child(4) { background: var(--yellow-accent); }
.switch-band.is-on:nth-child(5) { background: var(--sky-50); }

/* ---------- home: una voce per riga, come un manifesto ---------- */
.poster { background: var(--night); padding: 80px var(--m); }
.poster-list { list-style: none; margin: 0; padding: 0; }
.poster-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; color: #fff; text-decoration: none; }
.poster-word { font: 900 var(--t-xl)/0.92 var(--font); text-transform: uppercase; letter-spacing: -0.03em; transition: color .2s, transform .35s var(--ease); }
.poster-fact { font: 500 var(--t-b)/1 var(--font); color: var(--sky-200); font-variant-numeric: tabular-nums; white-space: nowrap; }
.poster-list a:hover .poster-word, .poster-list a:focus-visible .poster-word { color: var(--yellow); transform: translateX(0.08em); }

/* ---------- domande: una fascia per domanda ---------- */
.faq-head { position: relative; display: flex; align-items: flex-end; min-height: 40svh; padding: 40px var(--m); background: var(--yellow); overflow: hidden; }
.faq-title { position: relative; z-index: 1; font: 900 var(--t-xl)/0.9 var(--font); text-transform: uppercase; letter-spacing: -0.03em; max-width: 9em; }
.faq-band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 56px var(--m); background: var(--canvas); }
.faq-band:nth-child(odd) { background: var(--sky-50); }
.faq-band h3 { grid-column: 1 / 6; font: 700 var(--t-m)/1.2 var(--font); }
.faq-band p { grid-column: 7 / 13; margin: 0; max-width: 60ch; }

/* ---------- home: il primo passo, già aperto ---------- */
.start { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; min-height: 90svh;
  padding: 72px var(--m); background: var(--primary); color: #fff; }
.start-text { grid-column: 1 / 6; align-self: end; }
.start-title { font: 900 var(--t-xl)/0.92 var(--font); text-transform: uppercase; letter-spacing: -0.03em; margin-bottom: 24px; }
.start-text p { max-width: 36ch; }
.dialog { grid-column: 7 / 12; justify-self: start; width: 100%; max-width: 460px; display: grid; gap: 16px; padding: 32px; background: var(--canvas); color: var(--ink); border-radius: 8px; }
.dialog-title { font: 700 var(--t-m)/1.2 var(--font); margin: 0 0 4px; }

/* ---------- moduli ---------- */
.field { display: grid; gap: 6px; font: 700 var(--t-s)/1.3 var(--font); border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { padding: 0; margin-bottom: 8px; }
.hint { font-weight: 300; }
input[type=email], input[type=text], input[type=number], input[type=search], input:not([type]), select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--hairline-strong); border-radius: 0; background: var(--canvas);
  color: var(--ink); font: 300 var(--t-b) var(--font); transition: border-color .2s; }
select[multiple] { padding: 6px; }
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24, 71, 177, .25); } /* taste-skill-ignore: anello di focus, non un'ombra a riposo */
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 0; padding: 0; margin: 0; font: 700 var(--t-s)/1.3 var(--font); }
.seg legend { grid-column: 1 / 3; padding: 0; margin-bottom: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; background: var(--sky-50); color: var(--primary); transition: background-color .2s, color .2s; }
.seg input:checked + span { background: var(--primary); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.opt { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-s); font-weight: 300; line-height: 1.45; cursor: pointer; }
.opt input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }
.freq { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.freq legend { width: 100%; }
.msg, .msg2 { min-height: 1.4em; margin: 0; font-size: var(--t-s); font-weight: 500; }

/* ---------- pagine interne: fascia blu, poi la pagina ---------- */
.band { background: var(--primary); color: #fff; padding: 44px var(--m) 52px; }
.band a { color: #fff; }
.band .link-arrow { color: #fff; }
.crumbs { font: 500 var(--t-s)/1.4 var(--font); margin-bottom: 18px; }
.band h1 { font: 700 var(--t-l)/1.1 var(--font); letter-spacing: -0.02em; max-width: 22ch; margin-bottom: 16px; }
.band h1.h-long { font-size: var(--t-m); line-height: 1.25; max-width: 40ch; }
.band-lead { max-width: 60ch; margin: 0 0 12px; }
.band-stat { font-size: var(--t-s); margin: 0; }
.band-stat b { color: var(--yellow); font-size: var(--t-m); }
.band .actions { margin: 28px 0 0; }
.band-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
.band-big { margin: 0; text-align: right; max-width: 26ch; }
.band-big b { display: block; color: var(--yellow); font: 900 var(--t-xl)/0.9 var(--font); text-transform: uppercase; letter-spacing: -0.03em; white-space: nowrap; }
.band-big span { display: block; margin-top: 10px; font-size: var(--t-s); font-weight: 500; }
.sheet { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; padding: 48px var(--m) var(--section); }
.sheet-main { grid-column: 1 / 9; min-width: 0; }
.sheet-side { grid-column: 9 / 13; }
.sheet-single .sheet-main { grid-column: 1 / 10; }
.sub-h { font: 700 var(--t-m)/1.2 var(--font); margin: 64px 0 16px; }
.prose { max-width: 62ch; }
.prose h2 { font: 700 var(--t-m)/1.25 var(--font); margin: 40px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose-p, .tip p { max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 20px 0 0; }
.empty { font-size: var(--t-b); }

.search { margin-bottom: 24px; max-width: 640px; }
html:not(.js) .search { display: none; }
.search input { margin-top: 6px; }
.search-count { min-height: 1.4em; margin: 8px 0 0; font: 500 var(--t-s)/1.4 var(--font); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chips a { padding: 8px 14px; border-radius: var(--radius); background: var(--sky-50); color: var(--primary); font: 500 var(--t-s)/1.3 var(--font); text-decoration: none; transition: background-color .2s; }
.chips a:hover { background: var(--sky-100); }
.chips-label { width: 100%; margin: 0; font: 700 var(--t-s)/1.3 var(--font); }

/* filtri dell'elenco: un pannello azzurro sopra la tabella */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px; padding: 20px; margin-bottom: 12px; background: var(--sky-50); }
.filters .f-q { grid-column: 1 / -1; }
.filters select, .filters input { min-height: 44px; font-size: var(--t-s); }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 24px; }
.results-count { margin: 0 auto 0 0; font: 700 var(--t-s)/1.4 var(--font); }
.btn-outline { min-height: 44px; background: var(--canvas); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); } /* taste-skill-ignore: bordo del pulsante secondario, non un'ombra */
.btn-outline:hover { background: var(--sky-50); color: var(--primary-deep); }
.link-btn { background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; text-decoration: underline; cursor: pointer; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 28px; font-size: var(--t-s); }

/* ribasso con cui si vincono gare simili */
.ribasso { padding: 22px 24px; margin: 0 0 28px; background: var(--sky-100); }
.ribasso-title { font: 700 var(--t-s)/1.3 var(--font); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.ribasso-big { margin: 0 0 10px; }
.ribasso-big b { font: 900 var(--t-l)/1 var(--font); color: var(--primary-deep); letter-spacing: -0.02em; }
.ribasso-big span { font: 500 var(--t-s)/1 var(--font); color: var(--muted); margin-left: 6px; }
.ribasso-text { font-size: var(--t-s); line-height: 1.5; max-width: 60ch; }
.ribasso-src { margin: 0; font-size: 13px; color: var(--muted); }
.tipi { padding: 22px 24px; margin: 0 0 28px; background: var(--sky-50); }
.tipi-title { font: 700 var(--t-s)/1.3 var(--font); margin-bottom: 12px; }
.tipi ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.tipi li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; font-size: var(--t-s); }
.tipi li b { font: 900 var(--t-m)/1 var(--font); color: var(--primary-deep); text-align: right; }
.tipi li small { grid-column: 1 / -1; color: var(--muted); }
.tipi-src { margin: 0; font-size: 13px; color: var(--muted); }
.compare-stats small { color: var(--muted); font-size: 13px; }
.print-only { display: none; }

/* tabella di confronto (comparison-row): righe separate da una linea, nessun divisore verticale */
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.compare th { padding: 12px 14px 12px 0; background: var(--canvas-soft); font-weight: 700; text-align: left; }
.compare thead th:first-child { padding-left: 12px; }
.compare td, .compare tbody th { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; text-align: left; font-weight: 300; }
.compare tbody td:first-child, .compare tbody th:first-child { padding-left: 12px; }
.compare tbody tr { transition: background-color .2s; }
.compare tbody tr[hidden] { display: none !important; }
.compare tbody tr:hover { background: var(--sky-50); }
.row-title { display: block; color: var(--ink); font: 500 var(--t-b)/1.35 var(--font); text-decoration: none; margin-bottom: 4px; }
.row-title:hover { color: var(--primary); text-decoration: underline; }
.row-sub { display: block; color: var(--muted); }
.compare-index tbody th a { color: var(--ink); font-weight: 700; font-size: var(--t-b); text-decoration: none; }
.compare-index tbody th a:hover { color: var(--primary); }

/* scheda dell'avviso: celle dati (spec-cell), dato scuro (stat-block-dark), consiglio (expert-tip-panel) */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 0 28px; }
.spec { display: grid; align-content: start; gap: 4px; padding: 18px 20px; background: var(--sky-50); }
.spec span { font: 500 var(--t-s)/1.3 var(--font); color: var(--muted); }
.spec b { font: 700 var(--t-b)/1.3 var(--font); }
.spec-dark { background: var(--primary-deep); color: #fff; }
.spec-dark span { color: var(--sky-200); }
.spec-dark b { font-size: var(--t-m); }
.spec-dark em { font-style: normal; font-size: var(--t-s); color: var(--yellow); font-weight: 700; }
.tip { background: var(--yellow-panel); padding: 24px 28px; margin-bottom: 8px; }
.tip p:first-child { margin: 0; }

.panel-form { display: grid; gap: 16px; padding: 28px; background: var(--sky-50); }
.panel-form h2 { font: 700 var(--t-m)/1.2 var(--font); }
.panel-form p { margin: 0; font-size: var(--t-s); }
.sheet-main .panel-form { margin-top: 56px; }
.manage { display: grid; gap: 28px; }
.profile { display: grid; gap: 16px; border: 0; margin: 0; padding: 28px; background: var(--sky-50); }
.profile legend { float: left; font: 700 var(--t-m)/1.2 var(--font); padding: 0; margin-bottom: 4px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- piede: invito sopra il nome tagliato ---------- */
.foot { position: relative; display: flex; flex-direction: column; min-height: 70svh; background: var(--ink); color: #fff; padding: 48px var(--m) 0; overflow: hidden; }
.foot a { color: #fff; }
.foot-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.foot-invite { grid-column: 1 / 8; }
.foot-line { font: 700 var(--t-l)/1.08 var(--font); letter-spacing: -0.02em; max-width: 13em; margin-bottom: 24px; }
.foot-links { grid-column: 10 / 13; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font: 500 var(--t-s)/1.3 var(--font); }
.foot-links a { text-decoration: none; overflow-wrap: anywhere; }
.foot-links a:hover { color: var(--yellow); }
.foot-legal { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: auto; padding-top: 32px;
  font: 300 var(--t-s)/1.45 var(--font); color: #d9dbe0; }
.foot-legal p { margin: 0; max-width: 70ch; }
/* il nome chiude la pagina per intero: largo quanto lo schermo, senza tagli */
.foot-name { margin: 24px 0 0; padding-bottom: 0.06em; font: 900 12.4vw/0.86 var(--font); text-transform: uppercase; letter-spacing: -0.045em;
  white-space: nowrap; color: var(--yellow); }

/* ---------- movimento ---------- */
html.js .mask > span { transform: translateY(105%); }
html.js.ready .mask > span { transform: none; transition: transform .9s var(--ease); }
html.js.ready .mask + .mask > span { transition-delay: .11s; }
html.js .hero-sub, html.js .hero-form, html.js .hero-fact { opacity: 0; transform: translateY(16px); }
html.js.ready .hero-sub, html.js.ready .hero-form, html.js.ready .hero-fact { opacity: 1; transform: none; transition: opacity .7s .5s, transform .8s .5s var(--ease); }
html.js.ready .hero-form { transition-delay: .6s; }
html.js.ready .hero-fact { transition-delay: .7s; }
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); }
html.nojs .reveal, html.nojs .hero-sub, html.nojs .hero-form, html.nojs .hero-fact, html.nojs .mask > span { opacity: 1 !important; transform: none !important; }

/* ---------- stampa: la scheda dell'avviso su un foglio, senza menu, moduli e pulsanti ---------- */
@media print {
  @page { margin: 16mm; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .top, .foot, .skip, .sheet-side, .tools, .actions, .filters, .results-bar, .chips, .search, .panel-form { display: none !important; }
  .band { background: none; color: #000; padding: 0 0 12pt; }
  .band a, .band-big b { color: #000; }
  .sheet { display: block; padding: 0; }
  .spec, .spec-dark, .tip, .ribasso, .tipi { background: none; color: #000; border: 1px solid #999; } /* taste-skill-ignore: bordi solo per la stampa */
  .spec-dark span, .spec-dark em, .ribasso-big b { color: #000; }
  .print-only { display: block; overflow-wrap: anywhere; }
  .reveal, .mask > span { opacity: 1 !important; transform: none !important; }
  .compare tr { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  html.js .mask > span, html.js .reveal, html.js .hero-sub, html.js .hero-form, html.js .hero-fact { opacity: 1 !important; transform: none !important; }
}

/* ---------- schermi medi ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; row-gap: 40px; }
  .hero .hero-num { font-size: 2em; }
  .hero .hero-what { font-size: 0.66em; }
  .latest { max-width: 640px; }
  .pick-control { left: 24vw; }
  .dialog { grid-column: 6 / 13; }
  .start-text { grid-column: 1 / 6; }
  .sheet-main { grid-column: 1 / 13; }
  .sheet-side { grid-column: 1 / 13; max-width: 560px; margin-top: 48px; }
}

/* ---------- telefono ---------- */
@media (max-width: 760px) {
  :root { --t-xl: 10.6vw; --t-l: clamp(22px, 6.4vw, 30px); --t-m: 21px; --t-b: 17px; }
  .top { grid-template-columns: 1fr auto; height: 64px; }
  .top-links { display: none; }
  .top-action { min-height: 44px; padding: 0 14px; }

  .hero { min-height: calc(100svh - 64px); padding: 28px var(--m) 32px; }
  .hero .hero-num { font-size: 2.2em; }
  .hero .hero-what { font-size: 0.66em; }
  .hero-sub { margin-top: 20px; }
  .hero-row { grid-template-columns: 1fr; }

  .pick { min-height: 0; padding-bottom: 56px; }
  .pick-control { position: static; padding: 40px var(--m) 0; font-size: var(--t-xl); }
  .pick-go { width: 100%; }
  .pick-count { font-size: var(--t-l); }

  .switch-band { grid-template-columns: 1fr auto; min-height: 132px; padding: 22px var(--m); }
  .switch-text { grid-column: 1; font-size: var(--t-l); }
  .toggle { grid-column: 2; font-size: 26px; }
  .toggle::before { content: ""; position: absolute; inset: -10px; }
  .switch-more { grid-column: 1 / 3; font-size: var(--t-s); }

  .poster { padding: 56px var(--m); }
  .poster-list a { display: block; padding-bottom: 18px; }
  .poster-word { display: block; font-size: var(--t-xl); }
  .poster-fact { display: block; margin-top: 6px; font-size: var(--t-s); }

  .faq-head { min-height: 30svh; }
  .faq-title { font-size: var(--t-xl); }
  .faq-band { display: block; padding: 32px var(--m); }
  .faq-band h3 { margin-bottom: 10px; }

  .start { display: block; min-height: 84svh; padding: 48px var(--m) 56px; }
  .start-title { font-size: var(--t-xl); }
  .dialog { max-width: none; margin-top: 32px; padding: 22px; }

  .foot-top { display: block; }
  .foot-line { font-size: var(--t-l); }
  .foot-invite .btn { width: 100%; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
  .foot-legal { display: grid; }
  .foot-name { font-size: 11.6vw; }

  .band { padding: 32px var(--m) 40px; }
  .band-split { display: block; }
  .band-big { text-align: left; margin-top: 24px; }
  .sheet { display: block; padding-top: 32px; }
  .sheet-side { margin-top: 40px; }
  .specs { grid-template-columns: 1fr 1fr; }
  .spec-dark { grid-column: 1 / 3; }
  .pair { grid-template-columns: 1fr; }

  /* le tabelle di confronto diventano schede impilate */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline); } /* taste-skill-ignore: righe di una vera tabella di dati */
  .compare td, .compare tbody th { display: block; padding: 0 !important; border: 0; text-align: left; }
  .compare td::before { content: attr(data-label); display: block; color: var(--muted); font-weight: 500; }
  .compare td:first-child { grid-column: 1 / 3; }
  .compare td:first-child::before { display: none; }
  .compare-index tr { grid-template-columns: 1fr auto; }
  .compare-index td:first-child { display: none; }
  .compare-index td::before { display: none; }
}