/* ==========================================================================
   prelievorapido.com - foglio di stile unico
   Convenzione: SUIT CSS (Componente, Componente-discendente, Componente--modificatore,
   u-utilita, is-stato). Custom properties con prefisso --pr-.
   ========================================================================== */

:root {
  --pr-white: #ffffff;
  --pr-ink: #1d1f23;
  --pr-ink-soft: #2b2e34;
  --pr-accent: #ff4d00;
  --pr-accent-ink: #c03900;
  --pr-grey: #f3f3f1;
  --pr-line: #dbdbd6;
  --pr-muted: #585c63;
  --pr-green: #18a558;
  --pr-green-ink: #0c7439;
  --pr-green-soft: #e6f5ec;
  --pr-accent-soft: #fff0e9;

  --pr-font-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --pr-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pr-skew: -8deg;
  --pr-wrap: 74rem;
  --pr-gutter: 1.125rem;
  --pr-measure: 70ch;
  --pr-radius: 2px;
  --pr-shadow: 0 0.5rem 1.5rem rgba(29, 31, 35, 0.08);
}

/* Base ------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pr-white);
  color: var(--pr-ink);
  font-family: var(--pr-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--pr-font-head);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0;
}

p { margin: 0 0 1.1em; }

a { color: var(--pr-accent-ink); text-decoration-thickness: 0.125em; text-underline-offset: 0.18em; }
a:hover { color: var(--pr-ink); text-decoration-color: var(--pr-accent); }

:focus-visible { outline: 3px solid var(--pr-accent); outline-offset: 3px; }

::selection { background: var(--pr-accent); color: var(--pr-ink); }

[hidden] { display: none !important; }

/* Utilita ---------------------------------------------------------------- */

.u-textCenter { text-align: center; }
.u-hiddenVisually {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-mt0 { margin-top: 0; }
.u-mb0 { margin-bottom: 0; }
.u-nowrap { white-space: nowrap; }
.u-fast { color: var(--pr-green-ink); font-weight: 700; }

/* Salta al contenuto ----------------------------------------------------- */

.SkipLink {
  position: absolute; left: 0.5rem; top: -6rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--pr-accent); color: var(--pr-ink);
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1.125rem;
  text-transform: uppercase; text-decoration: none;
}
.SkipLink:focus { top: 0.5rem; outline-color: var(--pr-white); }

/* Contenitore ------------------------------------------------------------ */

.Wrap { width: 100%; max-width: var(--pr-wrap); margin-inline: auto; padding-inline: var(--pr-gutter); }
.Wrap--narrow { max-width: 50rem; }

/* Intestazione ----------------------------------------------------------- */

.SiteHeader { background: var(--pr-ink); color: var(--pr-white); overflow: hidden; position: relative; z-index: 20; }
.SiteHeader-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  max-width: var(--pr-wrap); margin-inline: auto; padding-inline: var(--pr-gutter);
}
.SiteHeader-brand {
  position: relative; z-index: 0; display: flex; align-items: center; gap: 0.5rem;
  min-height: 3.75rem; padding: 0.5rem 1.75rem 0.5rem 0;
  color: var(--pr-ink); text-decoration: none;
}
.SiteHeader-brand::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: -100vw;
  background: var(--pr-accent); transform: skewX(var(--pr-skew)); transform-origin: 100% 100%;
}
.SiteHeader-brand::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: -0.9rem; width: 0.4rem;
  background: var(--pr-accent); transform: skewX(var(--pr-skew)); transform-origin: 100% 100%;
}
.SiteHeader-brand:hover { color: var(--pr-ink); }
.SiteHeader-brand:focus-visible { outline-color: var(--pr-white); outline-offset: -4px; }

.Wordmark { font-family: var(--pr-font-head); font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.Wordmark-icon { width: 1.6rem; height: 1.6rem; flex: none; }
.Wordmark-light { font-weight: 700; }
.Wordmark-heavy { font-style: italic; }

.SiteHeader-toggle {
  grid-column: 3; align-self: center; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem; background: none; border: 0; color: var(--pr-white); cursor: pointer;
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.SiteHeader-toggleBars { display: grid; gap: 0.3rem; width: 1.6rem; transform: skewX(var(--pr-skew)); }
.SiteHeader-toggleBars span { display: block; height: 0.19rem; background: var(--pr-accent); transition: transform 0.2s ease, opacity 0.2s ease; }
.SiteHeader-toggle[aria-expanded="true"] .SiteHeader-toggleBars span:nth-child(1) { transform: translateY(0.49rem) rotate(45deg); }
.SiteHeader-toggle[aria-expanded="true"] .SiteHeader-toggleBars span:nth-child(2) { opacity: 0; }
.SiteHeader-toggle[aria-expanded="true"] .SiteHeader-toggleBars span:nth-child(3) { transform: translateY(-0.49rem) rotate(-45deg); }

.SiteNav { grid-column: 1 / -1; }
.SiteNav-list { list-style: none; margin: 0; padding: 0.5rem 0 1rem; }
.SiteNav-link {
  display: block; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--pr-white); text-decoration: none;
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.SiteNav-link:hover { color: var(--pr-accent); }
.SiteNav-link.is-current { color: var(--pr-accent); }

@media (max-width: 69.99rem) {
  .SiteHeader.is-enhanced .SiteNav { display: none; }
  .SiteHeader.is-enhanced .SiteNav.is-open { display: block; }
}

@media (min-width: 70rem) {
  .SiteHeader-toggle { display: none; }
  .SiteNav { grid-column: 2 / -1; justify-self: end; align-self: stretch; display: flex; }
  .SiteNav-list { display: flex; align-items: stretch; gap: 1.4rem; padding: 0; }
  .SiteNav-list > li { display: flex; }
  .SiteNav-link {
    display: flex; align-items: center; padding: 0; border-bottom: 0; font-size: 1.0625rem;
    box-shadow: inset 0 0 0 0 var(--pr-accent); transition: box-shadow 0.15s ease, color 0.15s ease;
  }
  .SiteNav-link:hover { box-shadow: inset 0 -0.3rem 0 0 var(--pr-accent); color: var(--pr-white); }
  .SiteNav-link.is-current { box-shadow: inset 0 -0.3rem 0 0 var(--pr-accent); color: var(--pr-white); }
}

/* Barra avvisi (affiliazione, 18+) ---------------------------------------- */

.NoticeBar { background: var(--pr-grey); border-bottom: 1px solid var(--pr-line); font-size: 0.875rem; line-height: 1.45; color: var(--pr-ink); }
.NoticeBar-inner { display: grid; gap: 0.35rem; padding-block: 0.6rem; }
.NoticeBar-item { margin: 0; }
.NoticeBar-age {
  display: inline-block; margin-right: 0.4rem; padding: 0 0.4rem; background: var(--pr-ink); color: var(--pr-white);
  font-family: var(--pr-font-head); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em;
}
@media (min-width: 62rem) {
  .NoticeBar-inner { grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
}

/* Pulsanti --------------------------------------------------------------- */

.Button {
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.55rem 1.5rem; border: 0; background: none; cursor: pointer;
  color: var(--pr-ink); text-decoration: none; text-align: center;
  font-family: var(--pr-font-head); font-weight: 800; font-size: 1.1875rem; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.Button::before {
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pr-accent);
  transform: skewX(var(--pr-skew)); transition: background-color 0.15s ease, transform 0.15s ease;
}
.Button::after { content: "\203A\203A"; font-size: 1.1em; letter-spacing: -0.08em; line-height: 0.8; transition: transform 0.15s ease; }
.Button:hover { color: var(--pr-white); }
.Button:hover::before { background: var(--pr-ink); }
.Button:hover::after { transform: translateX(0.25rem); }
.Button--ghost::before { background: transparent; box-shadow: inset 0 0 0 0.1875rem var(--pr-ink); }
.Button--ghost:hover::before { background: var(--pr-ink); }
.Button--onDark:hover { color: var(--pr-ink); }
.Button--onDark:hover::before { background: var(--pr-white); }
.Button--block { display: flex; width: 100%; }
.Button--plain::after { content: none; }

/* Hero (home) ------------------------------------------------------------ */

.Hero { position: relative; overflow: hidden; background: var(--pr-grey); border-bottom: 0.375rem solid var(--pr-ink); }
.Hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -12rem; width: 34rem;
  background: repeating-linear-gradient(90deg, var(--pr-white) 0 1.25rem, transparent 1.25rem 2.5rem);
  transform: skewX(var(--pr-skew)); opacity: 0.9;
}
.Hero-inner { position: relative; display: grid; gap: 2rem; padding-block: 2.25rem 2.75rem; }
.Hero-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem;
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pr-muted);
}
.Hero-kicker::before { content: ""; width: 1.75rem; height: 0.3rem; background: var(--pr-accent); transform: skewX(var(--pr-skew)); }
.Hero-title { font-size: clamp(2.6rem, 10.5vw, 5.25rem); line-height: 0.92; letter-spacing: -0.005em; max-width: 14ch; }
.Hero-mark { position: relative; z-index: 0; display: inline-block; padding: 0 0.18em; margin-left: -0.08em; font-style: italic; }
.Hero-mark::before { content: ""; position: absolute; z-index: -1; inset: 0.08em 0 0.02em; background: var(--pr-accent); transform: skewX(var(--pr-skew)); }
.Hero-lead { max-width: 58ch; margin: 1.25rem 0 0; font-size: 1.1875rem; line-height: 1.55; }
.Hero-meta { margin: 1rem 0 1.5rem; font-size: 0.9375rem; color: var(--pr-muted); }

/* Tabellone tempi (pannello scuro) ---------------------------------------- */

.LapBoard { position: relative; z-index: 0; align-self: center; padding: 1.5rem 1.5rem 1.25rem; color: var(--pr-white); max-width: 26rem; }
.LapBoard::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pr-ink); transform: skewX(-3deg); box-shadow: 0.6rem 0.6rem 0 var(--pr-accent); }
.LapBoard-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.25rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: #c9ccd1; }
.LapBoard-icon { width: 1.5rem; height: 1.5rem; color: var(--pr-accent); flex: none; }
.LapBoard-time { margin: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: clamp(3.5rem, 15vw, 5rem); line-height: 0.95; color: #39d98a; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.LapBoard-unit { font-size: 0.4em; margin-left: 0.15em; color: var(--pr-white); }
.LapBoard-sectors { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.LapBoard-sector { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9375rem; }
.LapBoard-sector b { font-family: var(--pr-font-head); font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.LapBoard-sector i { font-style: normal; color: var(--pr-accent); font-family: var(--pr-font-head); font-weight: 700; margin-right: 0.5rem; }
.LapBoard-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #c9ccd1; }

@media (min-width: 62rem) {
  .Hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; padding-block: 3.5rem 4rem; }
  .LapBoard { justify-self: end; width: 100%; }
}

/* Testata pagine interne ------------------------------------------------- */

.PageHead { position: relative; overflow: hidden; background: var(--pr-grey); border-bottom: 0.375rem solid var(--pr-ink); }
.PageHead::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -6rem; width: 18rem;
  background: repeating-linear-gradient(90deg, var(--pr-white) 0 1rem, transparent 1rem 2rem);
  transform: skewX(var(--pr-skew));
}
.PageHead-inner { position: relative; padding-block: 1.25rem 2.25rem; }
.PageHead-kicker { margin: 0 0 0.6rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pr-accent-ink); }
.PageHead-title { font-size: clamp(2.2rem, 8vw, 4rem); line-height: 0.95; max-width: 20ch; }
.PageHead-lead { max-width: 62ch; margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.55; }
.PageHead-meta { margin: 0.9rem 0 0; font-size: 0.9375rem; color: var(--pr-muted); }

.Breadcrumb { margin: 0 0 1.5rem; font-size: 0.875rem; }
.Breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin: 0; padding: 0; }
.Breadcrumb-item { display: inline-flex; align-items: center; color: var(--pr-muted); }
.Breadcrumb-item + .Breadcrumb-item::before { content: "/"; margin: 0 0.55rem; color: var(--pr-accent); font-weight: 700; transform: skewX(var(--pr-skew)); }
.Breadcrumb-link { color: var(--pr-ink); }

/* Sezioni e testo -------------------------------------------------------- */

.Section { padding-block: 2.5rem; }
.Section--grey { background: var(--pr-grey); }
.Section--tight { padding-block: 1.75rem; }
.Section + .Section:not(.Section--grey) { border-top: 1px solid var(--pr-line); }
.Section--grey + .Section { border-top: 0 !important; }
@media (min-width: 62rem) { .Section { padding-block: 3.75rem; } .Section--tight { padding-block: 2.25rem; } }

.Section-title, .Prose h2 { font-size: clamp(1.9rem, 6vw, 2.75rem); margin: 0 0 1.25rem; max-width: 26ch; }
.Section-title::after, .Prose h2::after {
  content: ""; display: block; width: 4.5rem; height: 0.4rem; margin-top: 0.7rem;
  background: var(--pr-accent); transform: skewX(var(--pr-skew)); transform-origin: 0 100%;
}
.Section-intro { max-width: var(--pr-measure); font-size: 1.125rem; }

.Prose { max-width: var(--pr-measure); }
.Prose--wide { max-width: none; }
.Prose--wide > p, .Prose--wide > ul, .Prose--wide > ol, .Prose--wide > h3 { max-width: var(--pr-measure); }
.Prose h2 { margin-top: 3rem; scroll-margin-top: 1.5rem; }
.Prose > h2:first-child { margin-top: 0; }
.Prose h3 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.7rem; letter-spacing: 0.015em; }
.Prose ul, .Prose ol { margin: 0 0 1.25em; padding-left: 1.4rem; }
.Prose li { margin-bottom: 0.45em; }
.Prose ul > li::marker { color: var(--pr-accent); }
.Prose strong { font-weight: 700; }

/* Componenti annidati nel testo: neutralizza gli stili tipografici di .Prose */
.Prose .Timeline, .Prose .ChipList { padding-left: 0; }
.Prose .Timeline-step, .Prose .ChipList > li { margin-bottom: 0; }
.Prose .Timeline-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; letter-spacing: 0.005em; }
.Prose .ChipList { margin-bottom: 1.5rem; }
.Prose .AuthorBox { margin-top: 3rem; }
.Prose .FactTable { max-width: 52rem; }
@media (min-width: 62rem) {
  .ArticleLayout .Timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .ArticleLayout .Timeline-step:nth-child(2)::before { display: none; }
}

.UpdatedLine { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin: 0; padding: 0.35rem 0.75rem; border-left: 0.3rem solid var(--pr-green); background: var(--pr-white); font-size: 0.9375rem; }

/* Classifica: foglio tempi ----------------------------------------------- */

.PayoutList { margin: 0; }
.PayoutList-head { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.PayoutList-legend { margin: 0; font-size: 0.9375rem; color: var(--pr-muted); max-width: 60ch; }
.PayoutList-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.PayoutList-item {
  position: relative; display: grid; gap: 0.9rem 0.9rem; align-items: center;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "pos brand score" "time time time" "offer offer offer" "actions actions actions";
  padding: 1rem; background: var(--pr-white); border: 1px solid var(--pr-line); border-left: 0.4rem solid var(--pr-ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.PayoutList-item:hover { box-shadow: var(--pr-shadow); }
.PayoutList-item--fastest { border-color: var(--pr-green); border-left-color: var(--pr-green); background: linear-gradient(90deg, var(--pr-green-soft), var(--pr-white) 55%); }

.PayoutList-pos { grid-area: pos; font-family: var(--pr-font-head); font-weight: 800; font-size: 2.5rem; line-height: 1; font-style: italic; color: var(--pr-ink); }
.PayoutList-pos small { font-size: 0.4em; font-style: normal; vertical-align: 0.9em; color: var(--pr-muted); margin-right: 0.05em; }

.PayoutList-brand { grid-area: brand; display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.PayoutList-name { font-size: 1.375rem; font-weight: 700; line-height: 1.05; }
.PayoutList-flag {
  position: relative; z-index: 0; display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.6rem;
  font-family: var(--pr-font-head); font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pr-ink);
}
.PayoutList-flag::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pr-green); transform: skewX(var(--pr-skew)); }

.PayoutList-time { grid-area: time; min-width: 0; }
.PayoutList-timeLabel, .PayoutList-caption {
  display: block; margin: 0 0 0.15rem; font-size: 0.75rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pr-muted); font-weight: 600;
}
.PayoutList-timeValue { margin: 0 0 0.4rem; font-family: var(--pr-font-head); font-weight: 800; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--pr-ink); }
.PayoutList-timeNumber { font-size: 3.5rem; letter-spacing: -0.01em; }
.PayoutList-timeUnit { font-size: 1.5rem; text-transform: uppercase; margin-left: 0.15rem; }
.PayoutList-item--fastest .PayoutList-timeValue { color: var(--pr-green-ink); }

.TimeBar {
  display: flex; height: 0.9rem; background-color: var(--pr-grey);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--pr-line) calc(12.5% - 1px) 12.5%);
  border: 1px solid var(--pr-line);
}
.TimeBar-fill { flex: 0 0 var(--pr-bar, 50%); min-width: 0.6rem; background: var(--pr-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 0.3rem) 100%, 0 100%); }
.PayoutList-item--fastest .TimeBar-fill, .TimeBar--fastest .TimeBar-fill { background: var(--pr-green); }
.PayoutList-item--fastest .TimeBar { background-color: var(--pr-white); }

.PayoutList-offer { grid-area: offer; min-width: 0; }
.PayoutList-bonus { margin: 0 0 0.55rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }

.ChipList { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.Chip { padding: 0.1rem 0.55rem; border: 1px solid var(--pr-line); background: var(--pr-grey); font-size: 0.8125rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.PayoutList-item--fastest .Chip { background: var(--pr-white); }

.PayoutList-score { grid-area: score; text-align: right; font-family: var(--pr-font-head); line-height: 1; white-space: nowrap; }
.PayoutList-score strong { font-size: 2rem; font-weight: 800; }
.PayoutList-score span:last-child { font-size: 1rem; font-weight: 700; color: var(--pr-muted); }

.PayoutList-actions { grid-area: actions; display: grid; gap: 0.6rem; justify-items: center; }
.PayoutList-actions .Button { width: 100%; }
.PayoutList-review { font-size: 0.9375rem; font-weight: 600; color: var(--pr-ink); }
.PayoutList-terms { margin: 0; font-size: 0.75rem; color: var(--pr-muted); text-align: center; line-height: 1.35; }
.PayoutList-foot { margin: 1rem 0 0; font-size: 0.875rem; color: var(--pr-muted); max-width: 80ch; }

@media (min-width: 40rem) {
  .PayoutList-head { grid-template-columns: 1fr auto; align-items: end; }
  .PayoutList-item {
    grid-template-columns: 2.75rem minmax(0, 1fr) minmax(11rem, 13rem);
    grid-template-areas: "pos brand score" "time time time" "offer offer actions";
    padding: 1.25rem; gap: 1rem 1.25rem;
  }
}
@media (min-width: 62rem) {
  .PayoutList-item {
    grid-template-columns: 3rem minmax(10rem, 12rem) minmax(13rem, 1.5fr) minmax(11rem, 1fr) 4.25rem minmax(10rem, 11.5rem);
    grid-template-areas: "pos brand time offer score actions";
    padding: 1.1rem 1.25rem;
  }
  .PayoutList-item:hover { transform: translateX(0.25rem); }
  .PayoutList-score { text-align: center; }
  .PayoutList-score .PayoutList-caption { text-align: center; }
}

.LogoTile {
  flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  background: var(--pr-ink); color: var(--pr-white);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 0.3rem, transparent 0.3rem 0.6rem);
  font-family: var(--pr-font-head); font-weight: 800; font-size: 1.375rem; letter-spacing: 0.03em;
  clip-path: polygon(0.45rem 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%);
}
.LogoTile--large { width: 5.5rem; height: 5.5rem; font-size: 2.125rem; }

.SortControl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; border: 0; }
.SortControl-label { font-family: var(--pr-font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 0.3rem; }
.SortControl-button {
  min-height: 2.5rem; padding: 0.3rem 0.95rem; border: 0.125rem solid var(--pr-ink); background: var(--pr-white); color: var(--pr-ink); cursor: pointer;
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em;
  transform: skewX(var(--pr-skew)); transition: background-color 0.15s ease, color 0.15s ease;
}
.SortControl-button:hover { background: var(--pr-grey); }
.SortControl-button.is-active { background: var(--pr-ink); color: var(--pr-white); }

/* Avviso licenze --------------------------------------------------------- */

.LicenceNotice { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; margin: 1.75rem 0 0; padding: 1rem 1.1rem; background: var(--pr-white); border: 0.125rem solid var(--pr-ink); font-size: 0.9375rem; line-height: 1.5; max-width: 80ch; }
.LicenceNotice-mark { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--pr-ink); color: var(--pr-white); font-family: var(--pr-font-head); font-weight: 800; font-size: 1.25rem; transform: skewX(var(--pr-skew)); }
.LicenceNotice p { margin: 0; }
.LicenceNotice p + p { margin-top: 0.4rem; }

/* Tabelle ---------------------------------------------------------------- */

.TableScroll { margin: 1.75rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pr-line); background: var(--pr-white); }
.TableScroll:focus-visible { outline-offset: 0; }
.DataTable { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.DataTable caption { caption-side: top; padding: 0.8rem 1rem; text-align: left; font-size: 0.875rem; color: var(--pr-muted); }
.DataTable th, .DataTable td { padding: 0.8rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--pr-line); }
.DataTable thead th { background: var(--pr-ink); color: var(--pr-white); border-bottom: 0; font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.DataTable tbody th { font-weight: 700; }
.DataTable tbody tr:nth-child(even) { background: var(--pr-grey); }
.DataTable tbody tr:last-child > * { border-bottom: 0; }
.DataTable-row--fastest > * { background: var(--pr-green-soft); }
.DataTable-row--fastest > th { box-shadow: inset 0.3rem 0 0 var(--pr-green); }
.DataTable-bar { display: block; width: 7rem; margin-top: 0.3rem; height: 0.5rem; }
.DataTable-num { font-family: var(--pr-font-head); font-weight: 800; font-size: 1.3125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.TableNote { margin: -1rem 0 1.75rem; font-size: 0.8125rem; color: var(--pr-muted); }

.FactTable { width: 100%; margin: 1.5rem 0; border-collapse: collapse; border-top: 0.25rem solid var(--pr-ink); font-size: 0.9875rem; line-height: 1.4; table-layout: fixed; }
.FactTable th, .FactTable td { padding: 0.7rem 0.75rem 0.7rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pr-line); }
.FactTable th { width: 42%; font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pr-muted); }
.FactTable td { font-weight: 600; }

/* Timeline del prelievo -------------------------------------------------- */

.Timeline { list-style: none; margin: 2rem 0; padding: 0; display: grid; }
.Timeline-step { position: relative; padding: 0 0 1.75rem 4rem; }
.Timeline-step::before { content: ""; position: absolute; left: 1.2rem; top: 0.5rem; bottom: -0.5rem; width: 0.25rem; background: var(--pr-ink); }
.Timeline-step:last-child { padding-bottom: 0; }
.Timeline-step:last-child::before { display: none; }
.Timeline-marker { position: absolute; z-index: 0; left: 0; top: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.375rem; color: var(--pr-ink); }
.Timeline-marker::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pr-accent); transform: skewX(var(--pr-skew)); }
.Timeline-step--final .Timeline-marker::before { background: var(--pr-green); }
.Timeline-clock { display: inline-block; margin: 0 0 0.2rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pr-muted); }
.Timeline-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; }
.Timeline-text { margin: 0; font-size: 0.9875rem; line-height: 1.55; }
@media (min-width: 62rem) {
  .Timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .Timeline-step { padding: 3.75rem 1.75rem 0 0; }
  .Timeline-step::before { left: 0.5rem; right: -0.5rem; top: 1.2rem; bottom: auto; width: auto; height: 0.25rem; }
  .Timeline-step:last-child { padding-right: 0; }
}

/* Passi numerati --------------------------------------------------------- */

.Steps { list-style: none; counter-reset: pr-step; margin: 1.75rem 0; padding: 0; display: grid; gap: 0.75rem; max-width: 52rem; }
.Steps-item { counter-increment: pr-step; position: relative; padding: 1.1rem 1.1rem 1.1rem 4.75rem; background: var(--pr-white); border: 1px solid var(--pr-line); min-height: 5rem; }
.Steps-item::before {
  content: counter(pr-step, decimal-leading-zero); position: absolute; left: 0; top: 0; bottom: 0; width: 3.75rem;
  display: grid; place-items: center; background: var(--pr-ink); color: var(--pr-accent);
  font-family: var(--pr-font-head); font-weight: 800; font-size: 2rem; font-style: italic;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
}
.Steps-title { font-size: 1.375rem; font-weight: 700; margin: 0 0 0.3rem; }
.Steps-text { margin: 0; font-size: 0.9875rem; line-height: 1.55; }

/* Pro e contro ----------------------------------------------------------- */

.ProsCons { display: grid; gap: 1rem; margin: 1.75rem 0; }
.ProsCons-col { padding: 1.25rem; background: var(--pr-white); border: 1px solid var(--pr-line); border-top: 0.4rem solid var(--pr-green); }
.ProsCons-col--cons { border-top-color: var(--pr-accent); }
.ProsCons-title { font-size: 1.5rem; margin: 0 0 0.8rem; }
.ProsCons-list { list-style: none; margin: 0; padding: 0; }
.ProsCons-list li { position: relative; padding: 0.45rem 0 0.45rem 2rem; border-top: 1px solid var(--pr-line); font-size: 0.9875rem; line-height: 1.5; margin: 0; }
.ProsCons-list li::before { content: "+"; position: absolute; left: 0; top: 0.2rem; width: 1.4rem; text-align: center; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.5rem; line-height: 1.3; color: var(--pr-green-ink); }
.ProsCons-col--cons .ProsCons-list li::before { content: "\2212"; color: var(--pr-accent-ink); }
@media (min-width: 48rem) { .ProsCons { grid-template-columns: 1fr 1fr; } }

/* Riquadri --------------------------------------------------------------- */

.Callout { margin: 1.75rem 0; padding: 1.1rem 1.25rem; background: var(--pr-grey); border-left: 0.4rem solid var(--pr-ink); max-width: var(--pr-measure); }
.Callout-title { display: block; margin: 0 0 0.35rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
.Callout p { margin: 0; font-size: 0.9875rem; line-height: 1.55; }
.Callout p + p { margin-top: 0.6rem; }
.Callout--tip { background: var(--pr-green-soft); border-left-color: var(--pr-green); }
.Callout--warning { background: var(--pr-accent-soft); border-left-color: var(--pr-accent); }

.CtaBand { position: relative; z-index: 0; margin: 2.25rem 0; padding: 1.5rem 1.5rem 1.6rem; color: var(--pr-white); display: grid; gap: 1rem; align-items: center; max-width: 52rem; }
.CtaBand::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pr-ink); background-image: linear-gradient(100deg, transparent 0 72%, var(--pr-accent) 72% 75%, transparent 75% 78%, var(--pr-accent) 78% 79.5%, transparent 79.5%); }
.CtaBand-title { margin: 0 0 0.3rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.CtaBand-text { margin: 0; font-size: 0.9875rem; color: #d7d9dd; max-width: 46ch; }
.CtaBand-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: #c9ccd1; }
@media (min-width: 48rem) { .CtaBand { grid-template-columns: 1fr auto; gap: 2rem; padding-right: 2rem; } }

/* FAQ (lista di definizioni, sempre aperta) -------------------------------- */

.Faq { margin: 1.75rem 0 0; counter-reset: pr-faq; max-width: 54rem; }
.Faq-item { counter-increment: pr-faq; position: relative; padding: 1.25rem 0 1.25rem 3.5rem; border-top: 0.125rem solid var(--pr-ink); }
.Faq-item:last-child { border-bottom: 0.125rem solid var(--pr-ink); }
.Faq-item::before { content: counter(pr-faq, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.75rem; font-style: italic; line-height: 1; color: var(--pr-accent-ink); }
.Faq-question { margin: 0 0 0.5rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 1.4375rem; line-height: 1.15; }
.Faq-answer { margin: 0; font-size: 1rem; line-height: 1.6; }

/* Autore ----------------------------------------------------------------- */

.AuthorBox { display: grid; gap: 1.1rem; margin: 0; padding: 1.5rem; background: var(--pr-white); border: 1px solid var(--pr-line); border-bottom: 0.4rem solid var(--pr-accent); max-width: 54rem; }
.AuthorBox-avatar { display: grid; place-items: center; width: 5rem; height: 5rem; background: var(--pr-ink); color: var(--pr-white); font-family: var(--pr-font-head); font-weight: 800; font-size: 2rem; clip-path: polygon(0.6rem 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%); }
.AuthorBox-kicker { margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pr-muted); }
.AuthorBox-name { margin: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.AuthorBox-role { margin: 0.25rem 0 0.7rem; font-weight: 600; font-size: 0.9375rem; color: var(--pr-accent-ink); }
.AuthorBox-bio { margin: 0 0 0.6rem; font-size: 0.9875rem; line-height: 1.55; }
.AuthorBox-meta { margin: 0; font-size: 0.875rem; color: var(--pr-muted); }
@media (min-width: 40rem) { .AuthorBox { grid-template-columns: auto 1fr; gap: 1.5rem; } }

/* Recensione ------------------------------------------------------------- */

.ScoreBox { position: relative; display: grid; gap: 1.5rem; padding: 1.5rem; background: var(--pr-ink); color: var(--pr-white); border-bottom: 0.4rem solid var(--pr-accent); }
.ScoreBox-brand { display: flex; align-items: center; gap: 1rem; }
.ScoreBox-brand .LogoTile { background-color: var(--pr-white); color: var(--pr-ink); background-image: repeating-linear-gradient(135deg, rgba(29, 31, 35, 0.08) 0 0.3rem, transparent 0.3rem 0.6rem); }
.ScoreBox-name { margin: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.ScoreBox-caption { display: block; margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #c9ccd1; }
.ScoreBox-total { margin: 0; font-family: var(--pr-font-head); font-weight: 800; line-height: 0.9; }
.ScoreBox-total strong { font-size: 3rem; color: var(--pr-accent); }
.ScoreBox-total span { font-size: 1.5rem; color: #c9ccd1; }
.ScoreBox-time { margin: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: clamp(4.75rem, 24vw, 7rem); font-variant-numeric: tabular-nums; line-height: 0.95; color: #39d98a; }
.ScoreBox-time small { font-size: 0.45em; color: var(--pr-white); margin-left: 0.15em; text-transform: uppercase; }
.ScoreBox-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.ScoreBox-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ScoreBox-bar { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; font-size: 0.9375rem; }
.ScoreBox-bar b { font-family: var(--pr-font-head); font-size: 1.125rem; }
.ScoreBox-track { grid-column: 1 / -1; display: flex; height: 0.5rem; background: rgba(255, 255, 255, 0.16); }
.ScoreBox-fill { flex: 0 0 var(--pr-bar, 50%); background: var(--pr-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 0.2rem) 100%, 0 100%); }
.ScoreBox-cta { display: grid; gap: 0.6rem; }
.ScoreBox-terms { margin: 0; font-size: 0.75rem; color: #c9ccd1; line-height: 1.4; }
@media (min-width: 62rem) {
  .ScoreBox { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(13rem, 0.7fr); gap: 2.5rem; padding: 2rem; align-items: center; }
  .ScoreBox-main { display: grid; gap: 1.5rem; }
}
.ScoreBox-main { display: grid; gap: 1.25rem; }

.Verdict { margin: 1.75rem 0; padding: 1.5rem; border: 0.1875rem solid var(--pr-ink); background: var(--pr-white); max-width: 52rem; box-shadow: 0.5rem 0.5rem 0 var(--pr-accent); }
.Verdict-score { margin: 0 0 0.5rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.Verdict-score strong { font-size: 2.25rem; color: var(--pr-accent-ink); }
.Verdict p:last-of-type { margin-bottom: 1.25rem; }

/* Guida: layout articolo ------------------------------------------------- */

.ArticleLayout { display: grid; gap: 2rem; }
.Toc { padding: 1.25rem; background: var(--pr-grey); border-top: 0.4rem solid var(--pr-ink); align-self: start; }
.Toc-title { margin: 0 0 0.6rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.Toc-list { margin: 0; padding: 0; list-style: none; counter-reset: pr-toc; }
.Toc-list li { counter-increment: pr-toc; border-top: 1px solid var(--pr-line); }
.Toc-link { display: grid; grid-template-columns: 2rem 1fr; padding: 0.5rem 0; color: var(--pr-ink); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; font-weight: 500; }
.Toc-link::before { content: counter(pr-toc, decimal-leading-zero); font-family: var(--pr-font-head); font-weight: 800; color: var(--pr-accent-ink); }
.Toc-link:hover { text-decoration: underline; text-decoration-color: var(--pr-accent); text-decoration-thickness: 0.15em; }
@media (min-width: 62rem) {
  .ArticleLayout { grid-template-columns: 17rem minmax(0, 1fr); gap: 3.5rem; }
  .Toc { position: sticky; top: 1.5rem; }
}

/* Chi siamo -------------------------------------------------------------- */

.CardGrid { display: grid; gap: 1rem; margin: 1.75rem 0; }
@media (min-width: 40rem) { .CardGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .CardGrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.Card { padding: 1.25rem; background: var(--pr-white); border: 1px solid var(--pr-line); border-top: 0.3rem solid var(--pr-ink); }
.Card-kicker { margin: 0 0 0.3rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 2rem; font-style: italic; line-height: 1; color: var(--pr-accent-ink); }
.Card-title { margin: 0 0 0.4rem; font-size: 1.375rem; font-weight: 700; }
.Card-text { margin: 0; font-size: 0.9875rem; line-height: 1.55; }
.Card-text + .Card-text { margin-top: 0.6rem; }
.Card--help { border-top-color: var(--pr-green); }
.Card-big { display: block; margin: 0.2rem 0 0.5rem; font-family: var(--pr-font-head); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--pr-ink); text-decoration: none; white-space: nowrap; }
a.Card-big:hover { color: var(--pr-accent-ink); }

/* Moduli ----------------------------------------------------------------- */

.ContactLayout { display: grid; gap: 2rem; }
@media (min-width: 62rem) { .ContactLayout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; } }
.InfoList { margin: 1.25rem 0 0; }
.InfoList dt { margin-top: 1rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pr-muted); }
.InfoList dd { margin: 0.1rem 0 0; font-weight: 600; }

.Form { display: grid; gap: 1.1rem; padding: 1.5rem; background: var(--pr-grey); border-top: 0.4rem solid var(--pr-ink); }
.Form-field { display: grid; gap: 0.35rem; }
.Form-label { font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em; }
.Form-input { width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; border: 0.125rem solid var(--pr-ink); border-radius: 0; background: var(--pr-white); color: var(--pr-ink); font: inherit; }
.Form-input:focus-visible { outline-offset: 0; border-color: var(--pr-accent); }
textarea.Form-input { min-height: 9rem; resize: vertical; }
.Form-check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.9375rem; line-height: 1.45; }
.Form-check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--pr-accent); }
.Form-hint { margin: 0; font-size: 0.8125rem; color: var(--pr-muted); }

/* Gioco responsabile ----------------------------------------------------- */

.Checklist { list-style: none; margin: 1.75rem 0 1rem; padding: 0; max-width: 52rem; border-top: 0.125rem solid var(--pr-ink); }
.Checklist-item { border-bottom: 1px solid var(--pr-line); margin: 0; }
.Checklist-label { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 0.85rem 0.25rem; cursor: pointer; line-height: 1.45; }
.Checklist-label:hover { background: var(--pr-grey); }
.Checklist-label input { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--pr-accent); }

.AgeBadge { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 0.1875rem solid currentColor; border-radius: 50%; font-family: var(--pr-font-head); font-weight: 800; font-size: 1.375rem; line-height: 1; flex: none; }

/* 404 -------------------------------------------------------------------- */

.ErrorPage { padding-block: 3.5rem 4.5rem; }
.ErrorPage-code { margin: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: clamp(6rem, 30vw, 12rem); line-height: 0.8; font-style: italic; color: var(--pr-accent); }
.ErrorPage-title { margin: 1rem 0 0.75rem; font-size: clamp(2rem, 7vw, 3.25rem); }
.ErrorPage-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* Piede di pagina -------------------------------------------------------- */

.SiteFooter { margin-top: 3rem; background: var(--pr-ink); color: #d7d9dd; font-size: 0.9375rem; line-height: 1.55; border-top: 0.4rem solid var(--pr-accent); }
.SiteFooter a { color: var(--pr-white); }
.SiteFooter a:hover { color: var(--pr-accent); }
.SiteFooter a:focus-visible { outline-color: var(--pr-white); }
.SiteFooter-inner { display: grid; gap: 2rem; padding-block: 2.5rem 1.5rem; }
.SiteFooter-brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--pr-white); text-decoration: none; margin-bottom: 0.75rem; }
.SiteFooter-brand .Wordmark-heavy { color: var(--pr-accent); }
.SiteFooter-brand .Wordmark-icon { color: var(--pr-accent); }
.SiteFooter-about { margin: 0; max-width: 44ch; }
.SiteFooter-title { margin: 0 0 0.7rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pr-white); }
.SiteFooter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.SiteFooter-safe { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--pr-white); }
.SiteFooter-safe p { margin: 0; color: #d7d9dd; }
.SiteFooter-safe p + p { margin-top: 0.5rem; }
.SiteFooter-safe strong { color: var(--pr-white); }
.SiteFooter-legal { padding-block: 1.1rem 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8125rem; color: #c9ccd1; }
.SiteFooter-legal p { margin: 0 0 0.4rem; max-width: 100ch; }
@media (min-width: 48rem) {
  .SiteFooter-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .SiteFooter-safe { grid-column: 1 / -1; }
}

/* Fase 2 ------------------------------------------------------------------ */

.ScoreBox-method { margin: 0.5rem 0 0; font-size: 0.9375rem; color: #d7d9dd; line-height: 1.4; }
.ScoreBox-total { margin-bottom: 1rem; }
.ScoreBox-time small { font-size: 0.32em; }

/* Firma (byline) */
.Byline { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--pr-muted); }
.Byline > span { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.Byline > span:not(:last-child)::after { content: ""; width: 0.3rem; height: 0.9rem; margin: 0 0.7rem; background: var(--pr-accent); transform: skewX(var(--pr-skew)); }
.Byline a { color: var(--pr-ink); font-weight: 600; }
.Byline.Hero-meta { margin: 1rem 0 1.5rem; }
@media (max-width: 39.99rem) {
  .Byline { display: grid; gap: 0.15rem; }
  .Byline > span { white-space: normal; display: block; }
  .Byline > span:not(:last-child)::after { content: none; }
}

/* Pulsante LinkedIn */
.SocialButton {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.3rem 1rem 0.3rem 0.4rem;
  border: 0.125rem solid var(--pr-ink); background: var(--pr-white); color: var(--pr-ink); text-decoration: none;
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.SocialButton-icon { width: 1.9rem; height: 1.9rem; flex: none; color: var(--pr-ink); transition: color 0.15s ease; }
.SocialButton:hover { background: var(--pr-ink); color: var(--pr-white); }
.SocialButton:hover .SocialButton-icon { color: var(--pr-accent); }
.AuthorBox-name a { color: inherit; text-decoration-color: var(--pr-accent); }
.AuthorBox-actions, .Profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1rem 0 0; }
.AuthorBox-more { font-weight: 600; font-size: 0.9375rem; color: var(--pr-ink); }
.AuthorBox + .Sources { margin-top: 2.5rem; }

/* Fonti */
.Sources { max-width: 54rem; padding: 1.25rem 1.5rem; background: var(--pr-grey); border-left: 0.4rem solid var(--pr-ink); }
.Sources-title, .Prose .Sources-title { font-size: 1.5rem; margin: 0 0 0.7rem; }
.Sources-title::after, .Prose .Sources-title::after { content: none; }
.Sources-list, .Prose .Sources-list { margin: 0; padding-left: 1.4rem; font-size: 0.9375rem; line-height: 1.5; color: var(--pr-muted); }
.Sources-list li { margin-bottom: 0.4rem; }
.Sources-list li::marker { font-family: var(--pr-font-head); font-weight: 800; color: var(--pr-accent-ink); }
.Prose .Sources { margin-top: 2rem; }

/* Campo da compilare */
.Slot { padding: 0 0.3em; background: var(--pr-accent-soft); border-bottom: 0.125rem dashed var(--pr-accent); color: var(--pr-ink); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Come abbiamo testato */
.TestBox { position: relative; max-width: 54rem; margin: 2.5rem 0; padding: 1.5rem; background: var(--pr-white); border: 0.1875rem solid var(--pr-ink); }
.TestBox::before { content: ""; position: absolute; left: -0.1875rem; right: -0.1875rem; top: -0.1875rem; height: 0.6rem; background: repeating-linear-gradient(100deg, var(--pr-ink) 0 0.6rem, var(--pr-white) 0.6rem 1.2rem); }
.TestBox-title { margin: 0.6rem 0 0.4rem; font-size: 1.75rem; }
.TestBox-intro { margin: 0 0 1rem; font-size: 0.9875rem; color: var(--pr-muted); }
.TestBox-list { margin: 0; display: grid; border-top: 1px solid var(--pr-line); }
.TestBox-row { display: grid; gap: 0.15rem 1.5rem; padding: 0.65rem 0; border-bottom: 1px solid var(--pr-line); }
.TestBox-row dt { font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pr-muted); }
.TestBox-row dd { margin: 0; }
.TestBox-note { margin: 1rem 0 0; font-size: 0.875rem; }
@media (min-width: 40rem) { .TestBox-row { grid-template-columns: 14rem 1fr; align-items: baseline; } }

/* Indice recensioni */
.ReviewList { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ReviewList-item {
  display: grid; gap: 0.9rem 1rem; align-items: center; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "logo body" "time score" "link link";
  padding: 1.1rem; background: var(--pr-white); border: 1px solid var(--pr-line); border-left: 0.4rem solid var(--pr-ink);
}
.ReviewList-item--fastest { border-color: var(--pr-green); border-left-color: var(--pr-green); }
.ReviewList-item > .LogoTile { grid-area: logo; align-self: start; }
.ReviewList-body { grid-area: body; min-width: 0; }
.ReviewList-name { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; }
.ReviewList-name a { color: var(--pr-ink); text-decoration-color: var(--pr-accent); }
.ReviewList-verdict { margin: 0 0 0.3rem; font-size: 0.9875rem; line-height: 1.45; }
.ReviewList-facts { margin: 0; font-size: 0.8125rem; color: var(--pr-muted); line-height: 1.45; }
.ReviewList-caption { display: block; margin-bottom: 0.15rem; font-family: var(--pr-font-body); font-size: 0.75rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pr-muted); white-space: normal; }
.ReviewList-time { grid-area: time; grid-column: 1 / 3; margin: 0; font-family: var(--pr-font-head); font-weight: 800; line-height: 0.9; }
.ReviewList-time b { font-size: 3.25rem; }
.ReviewList-time .ReviewList-caption { max-width: 11rem; }
.ReviewList-item--fastest .ReviewList-time b, .ReviewList-item--fastest .ReviewList-unit { color: var(--pr-green-ink); }
.ReviewList-unit { font-size: 1.375rem; text-transform: uppercase; margin-left: 0.15rem; }
.ReviewList-score { grid-area: score; grid-column: 2; justify-self: end; margin: 0; font-family: var(--pr-font-head); line-height: 1; white-space: nowrap; align-self: end; text-align: right; }
.ReviewList-score strong { font-size: 2rem; font-weight: 800; }
.ReviewList-score > span:last-child { font-weight: 700; color: var(--pr-muted); }
.ReviewList-link { grid-area: link; }
@media (min-width: 62rem) {
  .ReviewList-item { grid-template-columns: auto minmax(0, 1fr) 11rem 5rem 12.5rem; grid-template-areas: "logo body time score link"; gap: 1.5rem; padding: 1.25rem 1.5rem; }
  .ReviewList-item > .LogoTile { align-self: center; }
  .ReviewList-time { grid-column: auto; }
  .ReviewList-score { grid-column: auto; justify-self: start; align-self: center; text-align: left; }
}

/* Pagina autore */
.Profile { display: grid; gap: 2rem; }
.Profile-card { padding: 1.5rem; background: var(--pr-grey); border-top: 0.4rem solid var(--pr-accent); align-self: start; }
.Profile-portrait { display: grid; place-items: center; width: 9rem; height: 9rem; margin-bottom: 1rem; background: var(--pr-ink); color: var(--pr-white); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 0.4rem, transparent 0.4rem 0.8rem); font-family: var(--pr-font-head); font-weight: 800; font-size: 3.75rem; clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
.Profile-name { margin: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.Profile-role { margin: 0.3rem 0 0; font-weight: 600; color: var(--pr-accent-ink); }
@media (min-width: 62rem) { .Profile { grid-template-columns: 20rem minmax(0, 1fr); gap: 3.5rem; } .Profile-card { position: sticky; top: 1.5rem; } }

.Section-subtitle { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0; }

/* Movimento ridotto e stampa --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .PayoutList-item:hover { transform: none; }
}

@media print {
  .SiteHeader-toggle, .SiteNav, .SortControl, .SkipLink { display: none !important; }
  .SiteHeader, .SiteFooter, .ScoreBox { background: none; color: #000; }
}

/* ---------- aggiunte del build ---------- */
/* cronometro prelievo: lo strumento in testa a ogni pagina di confronto */
.Stopwatch { position: relative; margin: 0 0 1.5rem; background: var(--pr-white); border: 0.1875rem solid var(--pr-ink); box-shadow: 0.5rem 0.5rem 0 var(--pr-accent); }
.Stopwatch-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: 0; padding: 0.7rem 1rem; background: var(--pr-ink); color: var(--pr-white);
  font-family: var(--pr-font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.Stopwatch-bar > span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; }
.Stopwatch-icon { width: 1.4rem; height: 1.4rem; color: var(--pr-accent); flex: none; }
.Stopwatch-body { display: grid; gap: 1rem; padding: 1rem; }
.Stopwatch-tags { margin: 0; }
.Stopwatch-tags .Chip { background: var(--pr-green-soft); border-color: var(--pr-green); color: var(--pr-green-ink); font-weight: 600; }
.Stopwatch-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.Stopwatch-q { margin: 0 0 0.6rem; padding: 0; font-family: var(--pr-font-head); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.05; text-transform: uppercase; }
.Stopwatch-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.Stopwatch-method { position: relative; cursor: pointer; }
.Stopwatch-method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.Stopwatch-method span { display: flex; flex-direction: column; gap: 0.1rem; height: 100%; padding: 0.55rem 0.7rem; border: 0.125rem solid var(--pr-line); background: var(--pr-grey);
  font-weight: 700; line-height: 1.2; }
.Stopwatch-method small { font-weight: 500; font-size: 0.75rem; color: var(--pr-muted); }
.Stopwatch-method input:checked + span { border-color: var(--pr-ink); background: var(--pr-ink); color: var(--pr-white); }
.Stopwatch-method input:checked + span small { color: #c9ccd1; }
.Stopwatch-method input:focus-visible + span { outline: 3px solid var(--pr-accent); outline-offset: 2px; }
.Stopwatch-amount { display: grid; gap: 0.35rem; max-width: 20rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em; }
.Stopwatch-field { display: flex; align-items: center; gap: 0.5rem; }
.Stopwatch-field b { font-size: 1.5rem; }
.Stopwatch-field .Form-input { font-family: var(--pr-font-head); font-weight: 800; font-size: 1.5rem; }
.Stopwatch-out { display: block; padding: 0.75rem 1rem; background: var(--pr-accent-soft); border-left: 0.4rem solid var(--pr-accent); font-weight: 600; line-height: 1.45; }
.Stopwatch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.Stopwatch-row { display: grid; gap: 0.6rem; padding: 0.85rem; border: 1px solid var(--pr-line); border-left: 0.4rem solid var(--pr-ink); background: var(--pr-white); }
.Stopwatch-row.is-fastest { border-color: var(--pr-green); border-left-color: var(--pr-green); background: var(--pr-green-soft); }
.Stopwatch-who { display: flex; align-items: center; gap: 0.75rem; }
.Stopwatch-who p { margin: 0; display: grid; gap: 0.1rem; }
.Stopwatch-who strong { font-family: var(--pr-font-head); font-size: 1.375rem; line-height: 1.1; }
.Stopwatch-who strong a { color: var(--pr-ink); }
.Stopwatch-state { font-size: 0.8125rem; color: var(--pr-muted); line-height: 1.35; }
.Stopwatch-clock { display: grid; gap: 0.3rem; }
.Stopwatch-time { font-family: var(--pr-font-head); font-weight: 800; font-size: 1.5rem; line-height: 1.05; }
.is-fastest .Stopwatch-time { color: var(--pr-green-ink); }
.Stopwatch-none { font-size: 0.8125rem; color: var(--pr-muted); }
.Stopwatch-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; font-size: 0.875rem; }
.Stopwatch-fact dt { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pr-muted); }
.Stopwatch-fact dd { margin: 0; line-height: 1.35; }
.Stopwatch-foot { margin: 0; font-size: 0.8125rem; color: var(--pr-muted); line-height: 1.5; }
@media (min-width: 40rem) {
  .Stopwatch-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .Stopwatch-body { padding: 1.5rem; }
  .Stopwatch-row { grid-template-columns: 15rem 12rem 1fr 11rem; align-items: center; }
  .Stopwatch-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* loghi veri dentro la piastrella */
.LogoTile--img { background: var(--pr-white); background-image: none; border: 1px solid var(--pr-line); clip-path: none; overflow: hidden; }
.LogoTile--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* sì / no nelle tabelle */
.Mark { display: inline-block; padding: 0 0.45rem; font-weight: 700; font-size: 0.875rem; }
.Mark--yes { background: var(--pr-green-soft); color: var(--pr-green-ink); }
.Mark--no { background: var(--pr-grey); color: var(--pr-muted); }

/* tabella dei dati con didascalia */
.FactTable caption { caption-side: top; text-align: left; padding: 0 0 0.5rem; font-family: var(--pr-font-head); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ritratti */
.Avatar--img { padding: 0; overflow: hidden; }
.Avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.Profile-card .ChipList { margin-top: 0.75rem; }

/* tempo nella colonna della classifica: testo invece del numero grande */
.PayoutList-timeNumber { font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.05; }

/* menu: tutte le voci su una riga */
.SiteNav-link { white-space: nowrap; }
@media (min-width: 70rem) { .SiteNav-list { gap: 1.1rem; } .SiteNav-link { font-size: 0.98rem; } }
.Stopwatch-time small { font-family: var(--pr-font-body); font-weight: 500; font-size: 0.75rem; color: var(--pr-muted); }
@media (min-width: 62rem) { .Stopwatch-row { grid-template-columns: 15rem 14rem 1fr 11rem; } .Stopwatch-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* tempo in parole nella scheda voto */
.ScoreBox-time--text { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.05; }