/*
 * THEME_REFERENCE.css — PixelBuoni
 * Font: Nunito 800 titoli · Caveat 700 enfasi · Figtree 300 corpo
 * Palette pastello: peach, sage, sky, lavender, rose, amber
 * Animazioni: presenti e visibili, non invadenti
 *
 * ISTRUZIONI PER CLAUDE CODE:
 * Questo file va copiato in /assets/css/theme.css
 * Non modificare le variabili CSS — sono la palette definitiva.
 * Aggiungere stili specifici di pagina in fondo al file.
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,700;0,800;1,300&family=Figtree:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Caveat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   VARIABILI — PALETTE DEFINITIVA
   ============================================================ */

:root {
  /* Backgrounds */
  --cream:       #FDF6ED;
  --cream2:      #F7EFE2;
  --sand:        #E8D8C0;
  --sand2:       #D4C0A0;

  /* Palette pastello */
  --peach:       #F2C4A8;
  --peach-mid:   #E0A07A;
  --peach-dark:  #C8845A;

  --sage:        #C8D9B4;
  --sage-mid:    #9AB87A;
  --sage-dark:   #6A8A52;

  --sky:         #BDD6EC;
  --sky-dark:    #4A7FA0;

  --lav:         #D8CCEC;
  --lav-dark:    #6A52A0;

  --rose:        #F0C4CC;
  --rose-dark:   #A04060;

  --amber:       #F0D8A0;
  --amber-dark:  #A08030;

  /* Testo */
  --ink:         #2A2420;
  --ink2:        #4A3C34;
  --muted:       #7A6A60;
  --hint:        #A89880;
  --border:      #E4D0B8;

  /* Font */
  --f-title:     'Nunito', sans-serif;
  --f-hand:      'Caveat', sans-serif;
  --f-body:      'Figtree', sans-serif;

  /* Spacing */
  --r-sm:        6px;
  --r-md:        10px;
  --r-lg:        14px;
}

/* ============================================================
   RESET E BASE
   ============================================================ */

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

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

body {
  font-family: var(--f-body);
  font-weight: 300;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: hidden;
  /* Fix scroll orizzontale Samsung S20+ / Android: contiene qualunque
     overflow accidentale di figli (100vw, transform, box-shadow oltre
     i bordi, pseudo-elementi decorativi). */
  position: relative;
  width: 100%;
  max-width: 100vw;
}

/* ============================================================
   PIXEL GRID BACKGROUND
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--sand) 1px, transparent 1px),
    linear-gradient(90deg, var(--sand) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--f-title);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: clamp(16px, 2vw, 20px); }

/* La classe hand — testo scritto a mano Caveat */
.hand {
  font-family: var(--f-hand);
  font-weight: 700;
  color: var(--peach-dark);
  letter-spacing: -0.5px;
  /* dimensione: circa 20% più grande del testo circostante */
  font-size: 1.2em;
  display: inline-block;
  animation: handWobble 4s ease-in-out infinite;
}

@keyframes handWobble {
  0%, 100% { transform: rotate(-1deg); }
  50%       { transform: rotate(1.5deg); }
}

/* Corpo testo */
p { font-weight: 300; line-height: 1.75; color: var(--muted); }

/* Link */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--peach-dark); }

/* ============================================================
   NAVIGAZIONE
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  /* Sfondo opaco — NO backdrop-filter. backdrop-filter crea un
     containing block per position:fixed nei figli, che impedisce
     al menu mobile di posizionarsi rispetto al viewport. */
  background: #fdf6ed;
  border-bottom: 1px solid var(--border);
  animation: slideDown 0.5s ease both;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 7px);
  grid-template-rows: repeat(4, 7px);
  gap: 2px;
  animation: logoPop 0.8s ease 0.3s both;
}

@keyframes logoPop {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);       opacity: 1; }
}

.logo-grid span {
  border-radius: 1px;
  display: block;
  transition: transform 0.2s;
}

.logo:hover .logo-grid span {
  animation: pixelDance 0.4s ease;
}

.logo-name {
  font-family: var(--f-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
}

/* Link nav — dentro la <nav>, layout inline su desktop */
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links a {
  font-family: var(--f-title);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  position: relative;
  transition: color 0.2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--peach-dark);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--ink); }

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* ============================================================
   BOTTONI
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-title);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.btn-primary:hover {
  background: var(--ink2);
  transform: translateY(-2px);
  color: var(--cream);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: var(--f-title);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--sand2);
  color: var(--ink);
  transform: translateY(-2px);
}

/* ============================================================
   BADGE E PILL
   ============================================================ */

.badge {
  font-family: var(--f-title);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  display: inline-block;
}

.b-ios      { background: var(--sky);   color: var(--sky-dark);  }
.b-android  { background: var(--sage);  color: var(--sage-dark); }
.b-pc       { background: var(--lav);   color: var(--lav-dark);  }
.b-tablet   { background: var(--amber); color: var(--amber-dark);}
.b-netflix  { background: var(--rose);  color: var(--rose-dark); }
.b-raiplay  { background: var(--sky);   color: var(--sky-dark);  }
.b-youtube  { background: var(--rose);  color: var(--rose-dark); }

/* Badge pill (più grande, per sezione badges) */
.badge-pill {
  font-family: var(--f-title);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 100px;
  display: inline-block;
}

.badge-pill.sage   { background: var(--sage);  color: var(--sage-dark);  }
.badge-pill.sky    { background: var(--sky);   color: var(--sky-dark);   }
.badge-pill.peach  { background: var(--peach); color: var(--peach-dark); }
.badge-pill.lav    { background: var(--lav);   color: var(--lav-dark);   }
.badge-pill.rose   { background: var(--rose);  color: var(--rose-dark);  }
.badge-pill.subscription {
  background: #b85c3c;
  color: #fff;
  letter-spacing: 0.5px;
}

/* ============================================================
   STORE LINKS (sezione "Dove trovarlo")
   ============================================================ */
.store-links-section { margin: 32px 0; }
.store-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.store-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.store-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.store-link.is-sub { border-color: #b85c3c; }
.store-name { font-family: var(--f-title); font-weight: 700; font-size: 14px; }
.store-price { font-size: 13px; color: var(--text-soft); }
.store-sub-flag {
  font-size: 10px;
  font-weight: 700;
  color: #b85c3c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.store-disclaimer {
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
  margin-top: 12px;
}

/* ============================================================
   CARD GIOCHI
   ============================================================ */

.game-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
  cursor: pointer;
  /* animazione entrata — aggiungere animation-delay via JS/Jinja */
  opacity: 0;
  animation: cardIn 0.5s ease both;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(42, 36, 32, 0.1);
  border-color: var(--sand2);
}

@keyframes cardIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Thumbnail */
.card-thumb {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.card-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.game-card:hover .card-thumb-img {
  transform: scale(1.06);
}

/* Voto sovraimpresso sulla thumb (style del verdict box review) */
.card-score-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 7px 13px 7px 15px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  font-family: var(--f-title);
  line-height: 1;
  color: #fff;
}
.card-score-num {
  font-size: 28px;
  font-weight: 800;
}
.card-score-max {
  font-size: 13px;
  font-weight: 700;
  opacity: .85;
}
/* Tier colors per il badge voto sulla card (hardcoded, indipendenti dalle var)
   Le --verdict-* sono definite solo dentro .review-experimental, non in :root */
.card-score-overlay.tier-excellent { background: #6A8A52; }  /* >= 9   verde sage scuro */
.card-score-overlay.tier-good      { background: #8AAE6B; }  /* 8-8.99 verde sage chiaro */
.card-score-overlay.tier-ok        { background: #C8845A; }  /* 6-7.99 terracotta */
.card-score-overlay.tier-low       { background: #D08030; }  /* 4-5.99 arancio */
.card-score-overlay.tier-bad       { background: #B84545; }  /* < 4    rosso */

/* Mini-tag in fondo alla card (max 3 mostrati) */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--cream, #F5EFE2);
  color: var(--ink, #2A2A2A);
  border: 1px solid rgba(0,0,0,.06);
}
.card-tag.tag-noads    { background: #E8F0DC; color: #4F6B3A; }
.card-tag.tag-noiap    { background: #E8F0DC; color: #4F6B3A; }
.card-tag.tag-offline  { background: #DDE9F1; color: #3A5A75; }
.card-tag.tag-coop     { background: #FBE8D6; color: #8A4F2C; }
.card-tag.tag-calm     { background: #E8E4F2; color: #5A4A7A; }
.card-tag.tag-short    { background: #FCE6C8; color: #8A5A1A; }
.card-tag.tag-creative { background: #FCE0EA; color: #8A2C5C; }
.card-tag.tag-edu      { background: #DDE9F1; color: #3A5A75; }

/* Pixel art nella thumb */
.pixel-art {
  display: grid;
  gap: 4px;
  z-index: 1;
}

.pixel-art span {
  border-radius: 2px;
  display: block;
  transition: transform 0.3s ease;
}

.game-card:hover .pixel-art span {
  animation: pixelDance 0.4s ease;
}

@keyframes pixelDance {
  0%, 100% { transform: scale(1);              }
  50%       { transform: scale(1.2) rotate(5deg); }
}

/* Body card */
.card-body  { padding: 14px 16px; }

.card-meta  {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.age {
  font-family: var(--f-body);
  font-size: 10px;
  color: var(--hint);
  font-weight: 300;
}

.card-title {
  font-family: var(--f-title);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.2;
}

.card-desc {
  font-family: var(--f-body);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
}

/* Footer card */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #F4EAD8;
  background: #FDFAF5;
}

/* Score pips */
.score-row  { display: flex; align-items: center; gap: 5px; }
.score-pips { display: flex; gap: 2px; }

.pip {
  width: 7px;
  height: 7px;
  border-radius: 1px;
}

.pip.on  { background: var(--peach-dark); }
.pip.off { background: var(--sand); }

.score-num {
  font-family: var(--f-hand);
  font-size: 15px;
  font-weight: 600;
  color: var(--peach-dark);
}

/* Tag zero ads */
.tag-noads {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-title);
  font-size: 9px;
  font-weight: 800;
  color: var(--sage-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-noads::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--sage-dark);
  border-radius: 1px;
  display: block;
}

/* ============================================================
   GRIGLIA CARDS
   ============================================================ */

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Delay animazione cards — aggiungere via Jinja2 */
/* .game-card:nth-child(1) { animation-delay: 0.1s; } ecc */

/* ============================================================
   SECTION HEADER
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-title {
  font-family: var(--f-title);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hint);
  white-space: nowrap;
}

/* ============================================================
   FILTRI
   ============================================================ */

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
  padding: 20px 24px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-label {
  font-family: var(--f-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--hint);
  white-space: nowrap;
}

.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.filter-pill {
  font-family: var(--f-title);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-pill:hover {
  border-color: var(--sand2);
  color: var(--ink);
}

.filter-pill.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  z-index: 2;
  padding: 64px 32px 56px;
  text-align: center;
  overflow: hidden;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sage);
  color: var(--sage-dark);
  font-family: var(--f-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
  animation: fadeUp 0.7s ease 0.4s both;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--sage-dark);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1;  }
  50%       { opacity: 0.3; }
}

.hero h1 { animation: fadeUp 0.7s ease 0.5s both; }

.hero p {
  font-size: 17px;
  max-width: 480px;
  margin: 0 auto 36px;
  animation: fadeUp 0.7s ease 0.6s both;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  animation: fadeUp 0.7s ease 0.7s both;
}

.hero-ctas .btn-primary,
.hero-ctas .btn-ghost {
  font-size: 15px;
  padding: 14px 28px;
}

/* Decorazioni pixel hero */
.hero-deco {
  position: absolute;
  display: grid;
  gap: 5px;
  opacity: 0;
  animation: decoFade 1s ease 1s both;
  pointer-events: none;
}

.hero-deco span {
  border-radius: 2px;
  display: block;
  animation: pixelPop 0.3s ease both;
}

@keyframes decoFade {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 0.55; transform: scale(1); }
}

@keyframes pixelPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes fadeUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
   MANIFESTO STRIP
   ============================================================ */

.manifesto {
  position: relative;
  z-index: 2;
  margin: 0 auto 48px;
  max-width: 1100px;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 56px 48px;
  overflow: hidden;
  text-align: center;
}
.manifesto::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -50px;
  width: 300px;
  height: 300px;
  background: var(--peach);
  border-radius: 50%;
  filter: blur(100px);
  opacity: .25;
  pointer-events: none;
}
.manifesto::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: var(--lav);
  border-radius: 50%;
  filter: blur(100px);
  opacity: .25;
  pointer-events: none;
}

.manifesto-strip {
  max-width: 820px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  text-align: center;
}
.manifesto-strip h2 {
  margin: 0 auto;
  max-width: 720px;
}
@media (max-width: 880px) {
  .manifesto-strip { margin: 1.5rem auto; }
  .home-selections { margin: 1.5rem auto 1rem !important; }
  /* su mobile niente fade-up sulle selezioni: appaiono subito */
  .home-selections[data-anim="fade-up"] {
    opacity: 1 !important;
    transform: none !important;
  }
}

.manifesto-quote {
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 300;
  color: rgba(253, 246, 237, 0.5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.manifesto h2 {
  position: relative;
  z-index: 1;
  color: #6b3a1f;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  max-width: 720px;
  margin: 0 auto;
}

.manifesto .hand { color: var(--peach); }

/* ============================================================
   PAGINA RECENSIONE SINGOLA
   ============================================================ */

.review-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  position: relative;
  z-index: 2;
}

.review-header {
  margin-bottom: 40px;
}

.review-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.price {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--hint);
  font-weight: 400;
}

.review-title {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 12px;
}

.review-tagline {
  font-family: var(--f-hand);
  font-size: 22px;
  font-weight: 600;
  color: var(--peach-dark);
  margin-bottom: 20px;
}

.review-score-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.review-score-block .score-pips { gap: 3px; }
.review-score-block .pip        { width: 9px; height: 9px; }
.review-score-block .score-num  { font-size: 22px; }

.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Corpo articolo */
.review-body {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

.review-body p       { margin-bottom: 1.4em; }
.review-body p:first-child { color: var(--ink); font-weight: 400; font-size: 18px; }

/* Verdetto */
.verdict-box {
  background: var(--cream2);
  border-left: 3px solid var(--peach-dark);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 24px;
  margin: 40px 0;
}

.verdict-label {
  font-family: var(--f-hand);
  font-size: 18px;
  font-weight: 600;
  color: var(--peach-dark);
  margin-bottom: 8px;
}

.verdict-text {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink2);
  line-height: 1.7;
}

/* Correlati */
.related-section { margin-top: 48px; }

.related-section h2 {
  font-size: 18px;
  margin-bottom: 16px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.related-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.related-card:hover {
  border-color: var(--sand2);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.related-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sand1, #f1ece3);
}

.related-card .related-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.related-card:hover .related-thumb img {
  transform: scale(1.05);
}

.related-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint);
  opacity: 0.5;
}

.related-score {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--f-title);
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  border: 2px solid currentColor;
  letter-spacing: -0.02em;
}
.related-score.score-green  { color: #386624; }
.related-score.score-amber  { color: #B88810; }
.related-score.score-orange { color: #B45818; }
.related-score.score-red    { color: #A02838; }

.related-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.related-title {
  font-family: var(--f-title);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}

.related-meta {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--hint);
  font-weight: 300;
}

/* ============================================================
   HUB PAGE
   ============================================================ */

.hub-page {
  padding: 48px 32px 80px;
  position: relative;
  z-index: 2;
}

.hub-header {
  margin-bottom: 36px;
}

.hub-sub {
  font-size: 15px;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 300;
}

/* ============================================================
   GUIDE PAGE
   ============================================================ */

.guide-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  position: relative;
  z-index: 2;
}

.guide-body {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
}

.guide-body h2 {
  font-size: 22px;
  margin: 2em 0 0.6em;
  color: var(--ink);
}

.guide-body h3 {
  font-size: 17px;
  margin: 1.6em 0 0.5em;
  color: var(--ink);
}

.guide-body p    { margin-bottom: 1.3em; }
.guide-body ul   { padding-left: 1.4em; margin-bottom: 1.3em; }
.guide-body li   { margin-bottom: 0.4em; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding: 24px 32px;
  background: var(--cream2);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-logo {
  font-family: var(--f-title);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--hint);
  font-weight: 300;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--ink); }

.footer-copy {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--hint);
  font-weight: 300;
  font-style: italic;
}

.footer-attrib {
  font-family: var(--f-body);
  font-size: 10px;
  color: var(--hint);
  font-weight: 300;
  opacity: 0.8;
  flex-basis: 100%;
  margin-top: 4px;
}
.footer-attrib a { color: inherit; text-decoration: underline; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  width: calc(100% - 48px);
  box-shadow: 0 8px 32px rgba(42, 36, 32, 0.2);
  animation: cookieUp 0.4s ease both;
}

@keyframes cookieUp {
  from { transform: translateX(-50%) translateY(100px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

.cookie-banner p {
  font-size: 13px;
  color: rgba(253, 246, 237, 0.8);
  font-weight: 300;
  flex: 1;
}

.cookie-banner a { color: var(--peach); text-decoration: underline; }

.cookie-actions { display: flex; gap: 8px; }

.cookie-banner .btn-primary {
  font-size: 12px;
  padding: 8px 16px;
  background: var(--cream);
  color: var(--ink);
}

.cookie-banner .btn-primary:hover { background: var(--sand); }

.cookie-banner .btn-ghost {
  font-size: 12px;
  padding: 8px 16px;
  color: rgba(253, 246, 237, 0.6);
  border-color: rgba(253, 246, 237, 0.2);
}

.cookie-banner .btn-ghost:hover {
  color: var(--cream);
  border-color: rgba(253, 246, 237, 0.5);
}

/* ============================================================
   GALLERIA SCREENSHOT
   ============================================================ */

.review-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  margin-bottom: 36px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.gallery-img {
  max-height: 320px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ============================================================
   SCORE BREAKDOWN
   ============================================================ */

.score-breakdown {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 40px 0;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.breakdown-label {
  font-family: var(--f-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hint);
}

.breakdown-item .score-pips { gap: 2px; }
.breakdown-item .pip { width: 6px; height: 6px; }
.breakdown-item .score-num { font-size: 18px; }

.flags-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.flags-green,
.flags-red {
  padding: 16px 20px;
  border-radius: var(--r-md);
}

.flags-green {
  border-left: 3px solid var(--sage-dark);
  background: rgba(200, 217, 180, 0.15);
}

.flags-red {
  border-left: 3px solid var(--rose-dark);
  background: rgba(240, 196, 204, 0.15);
}

.flags-green h3,
.flags-red h3 {
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.flags-green h3 { color: var(--sage-dark); }
.flags-red h3 { color: var(--rose-dark); }

.flags-green ul,
.flags-red ul {
  list-style: none;
  padding: 0;
}

.flags-green li,
.flags-red li {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
  padding: 4px 0;
}

.flags-green li::before {
  content: '+';
  color: var(--sage-dark);
  font-weight: 700;
  margin-right: 8px;
}

.flags-red li::before {
  content: '-';
  color: var(--rose-dark);
  font-weight: 700;
  margin-right: 8px;
}

/* ============================================================
   TABELLA ETA'
   ============================================================ */

.age-section { margin: 40px 0; }

.age-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.age-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  border-radius: var(--r-md);
  text-align: center;
}

.age-range {
  font-family: var(--f-title);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.age-level {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
}

.age-note {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 300;
  color: var(--muted);
  font-style: italic;
}

/* Colori per livello suitability */
.age-non_adatto       { background: var(--rose);  }
.age-non_adatto .age-level { color: var(--rose-dark); }

.age-solo_con_genitore { background: var(--amber); }
.age-solo_con_genitore .age-level { color: var(--amber-dark); }

.age-adatto           { background: var(--sage);  }
.age-adatto .age-level { color: var(--sage-dark); }

.age-ideale           { background: var(--sage);  border: 2px solid var(--sage-dark); }
.age-ideale .age-level { color: var(--sage-dark); font-weight: 700; }

.age-potrebbe_annoiarsi { background: var(--sky); }
.age-potrebbe_annoiarsi .age-level { color: var(--sky-dark); }

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */

@media (max-width: 768px) {
  .nav { padding: 12px 20px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 12px; }

  .hero { padding: 48px 20px 40px; }

  .manifesto { margin: 0 20px 40px; padding: 28px 24px; }

  .hub-page,
  .review-page,
  .guide-page { padding: 32px 20px 60px; }

  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .filters-bar { padding: 16px; gap: 14px; }
  .filter-group { flex-wrap: wrap; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }

  .breakdown-grid { grid-template-columns: repeat(2, 1fr); }
  .flags-row { grid-template-columns: 1fr; }
  .age-table { grid-template-columns: repeat(2, 1fr); }
  .gallery-img { max-height: 240px; }
}

@media (max-width: 480px) {
  .nav-links { display: none; } /* menu hamburger da implementare */
  .hero h1 { font-size: 28px; }
  .games-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ANIMAZIONI GLOBALI
   ============================================================ */

@keyframes pixelDance {
  0%, 100% { transform: scale(1);                }
  50%       { transform: scale(1.2) rotate(5deg); }
}

/* Pixel flottanti — aggiungere via JS in base.html */
.floating-pixel {
  position: fixed;
  border-radius: 2px;
  pointer-events: none;
  animation: floatUp linear infinite;
  z-index: 0;
}

@keyframes floatUp {
  0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0;   }
  10%  {                                               opacity: 0.6; }
  90%  {                                               opacity: 0.4; }
  100% { transform: translateY(-100px) rotate(180deg); opacity: 0;   }
}

/* ============================================================
   EXPERIMENTAL — M6.1 styling test (solo .review-experimental)
   Stili applicati solo se game.experimental = True (es. Sago Mini World)
   ============================================================ */

.review-experimental {
  --verdict-approve:     #6A8A52;
  --verdict-approve-bg:  #E8F0DC;
  --verdict-reserve:     #C8845A;
  --verdict-reserve-bg:  #FBE8D6;
  --verdict-investigate: #D08030;
  --verdict-investigate-bg: #FCE6C8;
  --verdict-reject:      #A04060;
  --verdict-reject-bg:   #F8DCE2;

  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  overflow-x: clip; /* contiene blob hero e qualunque sforamento orizzontale */
  box-sizing: border-box;
}

/* Safety net: nessun elemento figlio puo' sforare la larghezza */
.review-experimental * { max-width: 100%; }
.review-experimental img { max-width: 100%; height: auto; }

/* === HERO IMAGE (contained, NO full-bleed) === */
.hero-image-wrap {
  position: relative;
  margin: 0 0 36px;
  height: clamp(220px, 38vw, 380px);
  overflow: hidden;
  border-radius: 32px;
  background: var(--cream2);
  box-shadow: 0 14px 40px rgba(42,36,32,.10);
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.05);
  transform: scale(1.02);
  animation: hero-zoom 18s ease-in-out infinite alternate;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(253,246,237,.95) 100%);
  pointer-events: none;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}
.hero-blob-1 {
  width: 280px;
  height: 280px;
  background: var(--peach);
  top: -60px;
  right: -40px;
  opacity: .55;
  animation: blob-float 14s ease-in-out infinite;
}
.hero-blob-2 {
  width: 220px;
  height: 220px;
  background: var(--lav);
  bottom: -40px;
  left: 10%;
  opacity: .5;
  animation: blob-float 18s ease-in-out infinite reverse;
}
@keyframes hero-zoom {
  0%   { transform: scale(1.02) translateY(0); }
  100% { transform: scale(1.10) translateY(-12px); }
}
@keyframes blob-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-15px) scale(1.08); }
}

/* === HEADER EXPERIMENTAL === */
.review-header-exp {
  position: relative;
  margin-bottom: 48px;
  text-align: center;
}
.review-header-exp .meta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.review-header-exp .age-pill,
.review-header-exp .price-pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--cream2);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
}
.review-title-exp {
  font-family: var(--f-title);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  color: var(--ink);
  margin: 8px 0 28px;
  letter-spacing: -1px;
  line-height: 1.05;
  animation: title-in 0.8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes title-in {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === BADGE VERDETTO ARRICCHITO === */
.verdict-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 28px 36px;
  border-radius: 32px;
  margin: 28px 0 36px;
  border: 3px solid;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .6s, transform .6s cubic-bezier(.2,1.4,.4,1);
  box-shadow: 0 12px 40px rgba(42,36,32,.10);
}
.verdict-block.is-visible {
  opacity: 1;
  transform: scale(1);
}
/* highlight gradient sopra */
.verdict-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 0%, rgba(255,255,255,.65), transparent 55%);
  pointer-events: none;
}
/* Pattern decorativo SVG (puntini sparsi) */
.verdict-block::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 180px;
  height: 180px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 2px);
  background-size: 18px 18px;
  opacity: .12;
  pointer-events: none;
  animation: pattern-drift 30s linear infinite;
}
@keyframes pattern-drift {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.verdict-block.verdict-approve     { background: var(--verdict-approve-bg);     border-color: var(--verdict-approve); }
.verdict-block.verdict-reserve     { background: var(--verdict-reserve-bg);     border-color: var(--verdict-reserve); }
.verdict-block.verdict-investigate { background: var(--verdict-investigate-bg); border-color: var(--verdict-investigate); }
.verdict-block.verdict-reject      { background: var(--verdict-reject-bg);      border-color: var(--verdict-reject); }

.verdict-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 6px rgba(255,255,255,.4);
  position: relative;
  z-index: 2;
  animation: verdict-icon-pulse 3s ease-in-out infinite;
}
.verdict-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.2;
}
@keyframes verdict-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.verdict-approve     .verdict-icon svg { color: var(--verdict-approve); }
.verdict-reserve     .verdict-icon svg { color: var(--verdict-reserve); }
.verdict-investigate .verdict-icon svg { color: var(--verdict-investigate); }
.verdict-reject      .verdict-icon svg { color: var(--verdict-reject); }

.verdict-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.verdict-label {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.verdict-approve     .verdict-label { color: var(--verdict-approve); }
.verdict-reserve     .verdict-label { color: var(--verdict-reserve); }
.verdict-investigate .verdict-label { color: var(--verdict-investigate); }
.verdict-reject      .verdict-label { color: var(--verdict-reject); }

.verdict-tagline {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink2);
  font-style: italic;
}
.verdict-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.score-big {
  font-family: var(--f-title);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
  position: relative;
  z-index: 2;
}
.verdict-content,
.verdict-score {
  position: relative;
  z-index: 2;
}
.verdict-approve     .score-big { color: var(--verdict-approve); }
.verdict-reserve     .score-big { color: var(--verdict-reserve); }
.verdict-investigate .score-big { color: var(--verdict-investigate); }
.verdict-reject      .score-big { color: var(--verdict-reject); }
.score-max {
  font-family: var(--f-title);
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
}

/* === LUCIDE INLINE ICONS NEI BADGE PILL === */
.lucide-inline {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  stroke-width: 2.5;
}

/* === SECTION HEADER WITH ICON === */
.review-experimental .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 48px 0 20px;
}
.review-experimental .section-icon {
  width: 24px;
  height: 24px;
  color: var(--peach-dark);
  flex-shrink: 0;
}
.review-experimental .section-title {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
}
.review-experimental .section-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--border), transparent);
  border-radius: 1px;
}

/* === CAROUSEL GALLERIA — track orizzontale scroll-snap === */
.carousel-section {
  margin: 48px 0;
  /* esce leggermente dal padding del contenitore per dare respiro */
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
}
.carousel-section .section-header {
  padding-right: 20px;
}
.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 24px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--peach-mid) transparent;
}
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-track { background: transparent; }
.carousel-track::-webkit-scrollbar-thumb {
  background: var(--peach-mid);
  border-radius: 4px;
}
.carousel-item {
  flex: 0 0 auto;
  /* altezza fissa, larghezza calcolata dall'aspect-ratio reale dell'immagine */
  height: 380px;
  aspect-ratio: var(--ratio, 9/16);
  scroll-snap-align: start;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cream2);
  box-shadow: 0 6px 20px rgba(42,36,32,.08);
  transform: translateY(20px);
  opacity: 0;
  animation: carousel-in 0.6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 0.12s);
  transition: transform .4s cubic-bezier(.2,1.4,.4,1), box-shadow .4s;
}
.carousel-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 36px rgba(42,36,32,.15);
}
.carousel-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media (max-width: 520px) {
  .carousel-item { height: 280px; }
}
@keyframes carousel-in {
  to { opacity: 1; transform: translateY(0); }
}
.carousel-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 8px;
  padding-right: 20px;
}
.carousel-hint {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* === REVIEW BODY (testo articolo) ARRICCHITO === */
.review-experimental .review-body {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink2);
  max-width: 720px;
  margin: 32px auto;
  padding: 0 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1);
}
.review-experimental .review-body.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.review-experimental .review-body p:first-of-type::first-letter {
  font-family: var(--f-title);
  font-size: 64px;
  font-weight: 800;
  float: left;
  line-height: 0.85;
  margin: 8px 10px 0 0;
  color: var(--peach-dark);
}

/* === SCORE BREAKDOWN ESPERIMENTALE === */
.review-experimental .score-breakdown {
  background: var(--cream2);
  border-radius: 32px;
  padding: 28px 24px;
  margin: 48px 0;
  position: relative;
  overflow: hidden;
}
.review-experimental .score-breakdown::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--sage);
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  top: -60px;
  right: -60px;
  pointer-events: none;
}
.review-experimental .breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  position: relative;
  z-index: 1;
}
.review-experimental .breakdown-item {
  background: white;
  border-radius: 24px;
  padding: 24px 18px 22px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(42,36,32,.06);
  border-top: 5px solid var(--sand);
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s;
  /* stagger reveal */
  opacity: 0;
  transform: translateY(20px);
  animation: card-in 0.6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 1) * 0.12s);
}
.review-experimental .breakdown-item::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .25;
  background: var(--sand);
  pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.review-experimental .breakdown-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(42,36,32,.16);
}
.review-experimental .breakdown-item:hover::after {
  opacity: .45;
  transform: scale(1.2);
}
.review-experimental .breakdown-item:hover .breakdown-icon {
  transform: rotate(-8deg) scale(1.1);
}
.review-experimental .breakdown-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 4px 14px rgba(42,36,32,.10), 0 0 0 4px var(--cream2);
  transition: transform .4s cubic-bezier(.2,1.4,.4,1);
  position: relative;
  z-index: 1;
}
.review-experimental .breakdown-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
}
@keyframes card-in {
  to { opacity: 1; transform: translateY(0); }
}
.review-experimental .breakdown-label {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  display: block;
  margin-bottom: 14px;
}
.review-experimental .breakdown-item .score-num {
  font-family: var(--f-title);
  font-size: 36px;
  font-weight: 800;
  color: var(--ink);
  display: block;
  margin-top: 12px;
  line-height: 1;
}
.review-experimental .score-pips {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}
.review-experimental .pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sand);
}
.review-experimental .pip.on {
  background: var(--peach-dark);
  animation: pip-pop .4s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pip-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* === SCORE COLOR GRADIENT (rosso > arancio > ambra > verde)
   Sfondo a gradiente forte sull'intera card === */
.review-experimental .breakdown-item.score-red {
  background: linear-gradient(155deg, #FFEEF0 0%, #FBD0D6 100%);
  border-top-color: #C84050;
}
.review-experimental .breakdown-item.score-red::after  { background: #FBA0B0; opacity: .35; }
.review-experimental .breakdown-item.score-red .breakdown-icon svg { color: #C84050; }
.review-experimental .breakdown-item.score-red .breakdown-icon { box-shadow: 0 4px 14px rgba(200,64,80,.25), 0 0 0 4px rgba(255,255,255,.6); }
.review-experimental .breakdown-item.score-red .score-num { color: #A02838; }
.review-experimental .breakdown-item.score-red .breakdown-label { color: #A02838; }
.review-experimental .breakdown-item.score-red .pip.on    { background: #C84050; }

.review-experimental .breakdown-item.score-orange {
  background: linear-gradient(155deg, #FFF4E8 0%, #FBD8B0 100%);
  border-top-color: #E07830;
}
.review-experimental .breakdown-item.score-orange::after  { background: #F8B070; opacity: .4; }
.review-experimental .breakdown-item.score-orange .breakdown-icon svg { color: #E07830; }
.review-experimental .breakdown-item.score-orange .breakdown-icon { box-shadow: 0 4px 14px rgba(224,120,48,.28), 0 0 0 4px rgba(255,255,255,.6); }
.review-experimental .breakdown-item.score-orange .score-num { color: #B45818; }
.review-experimental .breakdown-item.score-orange .breakdown-label { color: #B45818; }
.review-experimental .breakdown-item.score-orange .pip.on    { background: #E07830; }

.review-experimental .breakdown-item.score-amber {
  background: linear-gradient(155deg, #FFFAE0 0%, #FBE8A8 100%);
  border-top-color: #D4A018;
}
.review-experimental .breakdown-item.score-amber::after  { background: #F8D068; opacity: .4; }
.review-experimental .breakdown-item.score-amber .breakdown-icon svg { color: #B88810; }
.review-experimental .breakdown-item.score-amber .breakdown-icon { box-shadow: 0 4px 14px rgba(184,136,16,.26), 0 0 0 4px rgba(255,255,255,.6); }
.review-experimental .breakdown-item.score-amber .score-num { color: #8A6810; }
.review-experimental .breakdown-item.score-amber .breakdown-label { color: #8A6810; }
.review-experimental .breakdown-item.score-amber .pip.on    { background: #D4A018; }

.review-experimental .breakdown-item.score-green {
  background: linear-gradient(155deg, #F0F8E4 0%, #C8E0A0 100%);
  border-top-color: #4F8B3A;
}
.review-experimental .breakdown-item.score-green::after  { background: #A0C870; opacity: .4; }
.review-experimental .breakdown-item.score-green .breakdown-icon svg { color: #4F8B3A; }
.review-experimental .breakdown-item.score-green .breakdown-icon { box-shadow: 0 4px 14px rgba(79,139,58,.26), 0 0 0 4px rgba(255,255,255,.6); }
.review-experimental .breakdown-item.score-green .score-num { color: #386624; }
.review-experimental .breakdown-item.score-green .breakdown-label { color: #386624; }
.review-experimental .breakdown-item.score-green .pip.on    { background: #4F8B3A; }

/* === SEZIONE "COSA DICONO I GENITORI" === */
.parent-voices-section {
  margin: 48px 0;
}
.parent-voices-intro {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 24px;
}
.parent-voices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .parent-voices-grid { grid-template-columns: 1fr; }
}
.voices-card {
  background: white;
  border-radius: 24px;
  padding: 24px 26px;
  box-shadow: 0 6px 20px rgba(42,36,32,.08);
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border);
  transition: transform .35s, box-shadow .35s;
}
.voices-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(42,36,32,.14);
}
.voices-card::before {
  content: '"';
  position: absolute;
  top: -30px;
  right: 8px;
  font-family: var(--f-title);
  font-size: 180px;
  font-weight: 800;
  line-height: 1;
  opacity: .08;
  pointer-events: none;
}
.voices-positive {
  background: linear-gradient(155deg, #F0F8E4 0%, #FFFFFF 60%);
  border-color: #A0C870;
}
.voices-negative {
  background: linear-gradient(155deg, #FFF4E8 0%, #FFFFFF 60%);
  border-color: #E0A070;
}
.voices-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.voices-positive .voices-header { color: #4F8B3A; }
.voices-negative .voices-header { color: #B45818; }
.voices-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.voices-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.voices-card li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(42,36,32,.08);
}
.voices-card li:last-child {
  border-bottom: none;
}
.voice-quote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink2);
}

/* === FLAGS GREEN/RED === */
.review-experimental .flags-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 700px) {
  .review-experimental .flags-row { grid-template-columns: 1fr; }
}
.review-experimental .flags-green,
.review-experimental .flags-red {
  background: white;
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 4px 14px rgba(42,36,32,.06);
}
.review-experimental .flags-green { border-left: 4px solid var(--sage-mid); }
.review-experimental .flags-red   { border-left: 4px solid var(--rose-dark); }
.review-experimental .flags-green h3,
.review-experimental .flags-red h3 {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 12px;
}
.review-experimental .flags-green h3 { color: var(--sage-dark); }
.review-experimental .flags-red h3   { color: var(--rose-dark); }
.review-experimental .flags-green ul,
.review-experimental .flags-red ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.review-experimental .flags-green li,
.review-experimental .flags-red li {
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0 6px 24px;
  position: relative;
  color: var(--ink2);
}
.review-experimental .flags-green li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  color: var(--sage-dark);
  font-weight: 800;
}
.review-experimental .flags-red li::before {
  content: '!';
  position: absolute;
  left: 8px;
  color: var(--rose-dark);
  font-weight: 800;
}

/* === AGE TABLE RIDISEGNATA === */
.review-experimental .age-section {
  margin: 48px 0;
}
.review-experimental .age-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .review-experimental .age-table { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.review-experimental .age-cell {
  padding: 24px 14px 20px;
  border-radius: 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: white;
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s;
  /* stagger reveal */
  opacity: 0;
  transform: translateY(20px);
  animation: card-in 0.6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 1) * 0.1s + 0.2s);
}
.review-experimental .age-cell::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .55;
  pointer-events: none;
}
.review-experimental .age-cell:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(42,36,32,.14);
}
.review-experimental .age-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 4px 12px rgba(42,36,32,.10);
  position: relative;
  z-index: 1;
}
.review-experimental .age-icon-main {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}
.review-experimental .age-range {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.review-experimental .age-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  background: var(--cream2);
  color: var(--ink2);
  position: relative;
  z-index: 1;
}
.review-experimental .age-level-chip .lucide-inline {
  width: 12px;
  height: 12px;
  margin-right: 0;
}
.review-experimental .age-note {
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Varianti per livello */
.review-experimental .age-cell.age-ideale {
  border-color: #4F8B3A;
}
.review-experimental .age-cell.age-ideale::before { background: #C8E0A8; }
.review-experimental .age-cell.age-ideale .age-icon-main { color: #4F8B3A; }
.review-experimental .age-cell.age-ideale .age-level-chip {
  background: #E8F0DC; color: #4F8B3A;
}

.review-experimental .age-cell.age-adatto {
  border-color: var(--sky-dark);
}
.review-experimental .age-cell.age-adatto::before { background: var(--sky); }
.review-experimental .age-cell.age-adatto .age-icon-main { color: var(--sky-dark); }
.review-experimental .age-cell.age-adatto .age-level-chip {
  background: #E0EDF8; color: var(--sky-dark);
}

.review-experimental .age-cell.age-solo_con_genitore {
  border-color: #B88810;
}
.review-experimental .age-cell.age-solo_con_genitore::before { background: var(--amber); }
.review-experimental .age-cell.age-solo_con_genitore .age-icon-main { color: #B88810; }
.review-experimental .age-cell.age-solo_con_genitore .age-level-chip {
  background: #FBF0D0; color: #8A6810;
}

.review-experimental .age-cell.age-potrebbe_annoiarsi {
  border-color: var(--hint);
}
.review-experimental .age-cell.age-potrebbe_annoiarsi::before { background: var(--sand); }
.review-experimental .age-cell.age-potrebbe_annoiarsi .age-icon-main { color: var(--muted); }
.review-experimental .age-cell.age-potrebbe_annoiarsi .age-level-chip {
  background: var(--cream2); color: var(--muted);
}

.review-experimental .age-cell.age-non_adatto {
  border-color: #C84050;
}
.review-experimental .age-cell.age-non_adatto::before { background: var(--rose); }
.review-experimental .age-cell.age-non_adatto .age-icon-main { color: #C84050; }
.review-experimental .age-cell.age-non_adatto .age-level-chip {
  background: #FBE0E4; color: #C84050;
}

/* === STORE LINKS GIOCHERELLONI === */
.review-experimental .store-links-section {
  margin: 48px 0;
}
.review-experimental .store-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.review-experimental .store-link {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 20px;
  padding: 16px 20px;
  background: white;
  border: 2px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s, border-color .3s;
  /* stagger reveal */
  opacity: 0;
  transform: translateY(15px);
  animation: card-in 0.5s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 1) * 0.1s + 0.3s);
}
.review-experimental .store-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(42,36,32,.12);
  border-color: var(--peach-mid);
}
.review-experimental .store-link.is-sub {
  border-color: var(--verdict-reserve);
  background: var(--verdict-reserve-bg);
}
.review-experimental .store-brand-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}
.review-experimental .store-brand-icon-lucide {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream2);
  border-radius: 8px;
  color: var(--ink);
}
.review-experimental .store-brand-icon-lucide svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
.review-experimental .store-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.review-experimental .store-link .store-name {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.review-experimental .store-link .store-price {
  font-size: 13px;
  color: var(--ink2);
  font-weight: 500;
}

/* === BADGES STAGGER === */
.review-experimental .badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.review-experimental .badges-row .badge-pill {
  opacity: 0;
  transform: translateY(10px) scale(.9);
  animation: badge-pop 0.5s cubic-bezier(.2,1.4,.4,1) forwards;
}
.review-experimental .badges-row .badge-pill:nth-child(1) { animation-delay: 0.4s; }
.review-experimental .badges-row .badge-pill:nth-child(2) { animation-delay: 0.5s; }
.review-experimental .badges-row .badge-pill:nth-child(3) { animation-delay: 0.6s; }
.review-experimental .badges-row .badge-pill:nth-child(4) { animation-delay: 0.7s; }
.review-experimental .badges-row .badge-pill:nth-child(5) { animation-delay: 0.8s; }
.review-experimental .badges-row .badge-pill:nth-child(6) { animation-delay: 0.9s; }
.review-experimental .badges-row .badge-pill:nth-child(7) { animation-delay: 1.0s; }
.review-experimental .badges-row .badge-pill:nth-child(8) { animation-delay: 1.1s; }
@keyframes badge-pop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === MOBILE RESPONSIVE FIXES === */
@media (max-width: 720px) {
  .review-experimental {
    padding: 16px 14px 60px;
  }
  .review-title-exp {
    font-size: clamp(30px, 7vw, 44px);
    margin: 8px 0 20px;
  }
  .verdict-block {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 14px 16px;
    padding: 18px 20px;
    border-radius: 22px;
  }
  .verdict-icon { width: 52px; height: 52px; }
  .verdict-icon svg { width: 26px; height: 26px; }
  .verdict-label { font-size: 15px; }
  .verdict-tagline { font-size: 13px; }
  .verdict-score {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 4px;
    border-top: 1px dashed rgba(0,0,0,.12);
    margin-top: 4px;
  }
  .score-big { font-size: 56px; }
  .score-max { font-size: 20px; }

  .review-experimental .review-body {
    font-size: 16px;
    line-height: 1.7;
    padding: 0;
  }
  .review-experimental .review-body p:first-of-type::first-letter {
    font-size: 52px;
  }
  .review-experimental .score-breakdown {
    padding: 22px 16px;
    border-radius: 24px;
  }
  .review-experimental .breakdown-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .review-experimental .breakdown-item .score-num { font-size: 30px; }
  .review-experimental .age-cell {
    padding: 18px 10px 16px;
    border-radius: 22px;
  }
  .review-experimental .age-icon-wrap { width: 48px; height: 48px; }
  .review-experimental .age-icon-main { width: 26px; height: 26px; }
  .review-experimental .age-range { font-size: 18px; }
  .review-experimental .age-level-chip {
    font-size: 10px;
    padding: 5px 10px;
  }
  .review-experimental .store-links-grid {
    grid-template-columns: 1fr;
  }
  .review-experimental .section-header { margin: 36px 0 16px; }
  .review-experimental .section-title { font-size: 19px; }
}

/* === FADE-UP AL SCROLL === */
[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-anim="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FORM CONTATTI + NEWSLETTER + PROPOSE SECTION
   ============================================================ */

/* Honeypot anti-spam (nascosto) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Layout verticale per i form contatti (uno sopra l'altro) */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin: 48px 0;
}
.contact-card {
  background: white;
  border-radius: 32px;
  padding: 44px 40px;
  border: 3px solid var(--border);
  box-shadow: 0 10px 30px rgba(42,36,32,.10);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
  pointer-events: none;
}
.contact-parents { border-color: var(--sage-mid); }
.contact-parents::before { background: var(--sage); }
.contact-companies { border-color: var(--sky-dark); }
.contact-companies::before { background: var(--sky); }

.contact-card h2 {
  font-family: var(--f-title);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--ink);
  position: relative;
  z-index: 1;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
@media (max-width: 720px) {
  .contact-card { padding: 32px 24px; border-radius: 26px; }
  .contact-card h2 { font-size: 28px; }
}
.contact-parents h2 { color: var(--sage-dark); }
.contact-companies h2 { color: var(--sky-dark); }
.contact-card p,
.contact-card ul {
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink2);
}
.contact-card ul li {
  margin-bottom: 6px;
}

/* Form generico */
.contact-form,
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-title);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.newsletter-form input[type="email"],
.newsletter-form-inline input[type="email"] {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  transition: border-color .25s, box-shadow .25s, background .25s;
  width: 100%;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.newsletter-form input[type="email"]:focus,
.newsletter-form-inline input[type="email"]:focus {
  outline: none;
  border-color: var(--peach-mid);
  background: white;
  box-shadow: 0 0 0 4px rgba(224,160,122,.18);
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--f-body);
}
.contact-form button[type="submit"],
.newsletter-form button[type="submit"],
.newsletter-form-inline button[type="submit"] {
  margin-top: 6px;
  align-self: flex-start;
  padding: 14px 28px;
  font-size: 14px;
}
.contact-parents .contact-form button[type="submit"] {
  background: var(--sage-dark);
}
.contact-companies .contact-form button[type="submit"] {
  background: var(--sky-dark);
}

/* Newsletter standalone (in pagina contatti) */
.newsletter-form {
  background: linear-gradient(155deg, #FBF0D0 0%, #FBE8A8 100%);
  padding: 28px;
  border-radius: 24px;
  border: 2px solid #D4A018;
  margin: 32px 0 16px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  background: white;
}
.newsletter-form button { margin-top: 0 !important; }
.newsletter-promise {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  margin-top: 8px;
}

/* === HOME: PROPOSE SECTION === */
.propose-section {
  margin: 64px auto;
  max-width: 980px;
  padding: 0 20px;
}
.propose-card {
  background: linear-gradient(155deg, #F0F8E4 0%, #D8E8C0 100%);
  border-radius: 36px;
  padding: 48px 56px;
  border: 2px solid #A0C870;
  box-shadow: 0 10px 30px rgba(42,36,32,.08);
  position: relative;
  overflow: hidden;
}
.propose-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: var(--sage);
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
}
.propose-text {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.propose-eyebrow {
  display: inline-block;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #4F8B3A;
  background: white;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.propose-card h2 {
  font-family: var(--f-title);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 16px;
}
.propose-card p {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 24px;
}

/* === HOME: NEWSLETTER SECTION === */
.newsletter-section {
  margin: 48px auto 80px;
  max-width: 980px;
  padding: 0 20px;
}
.newsletter-card {
  background: linear-gradient(155deg, #FBF0D0 0%, #FBE8A8 100%);
  border-radius: 36px;
  padding: 40px 48px;
  border: 2px solid #D4A018;
  box-shadow: 0 10px 30px rgba(42,36,32,.08);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter-card::before {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: var(--amber);
  border-radius: 50%;
  filter: blur(50px);
  opacity: .5;
  pointer-events: none;
}
@media (max-width: 720px) {
  .newsletter-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }
  .newsletter-icon { margin: 0 auto; }
  .propose-card { padding: 32px 24px; border-radius: 28px; }
}
.newsletter-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(184,136,16,.20);
  position: relative;
  z-index: 1;
}
.newsletter-icon svg {
  width: 36px;
  height: 36px;
  color: #B88810;
  stroke-width: 2;
}
.newsletter-text {
  position: relative;
  z-index: 1;
}
.newsletter-text h2 {
  font-family: var(--f-title);
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #8A6810;
}
.newsletter-text p {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink2);
  margin: 0;
}
.newsletter-form-inline {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.newsletter-form-inline input[type="email"] {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   GUIDE & MANIFESTO HERO + DECORAZIONI
   ============================================================ */

.guide-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  position: relative;
}

/* Hero illustration in cima alle pagine guida/manifesto */
.guide-hero {
  position: relative;
  margin: 0 0 32px;
  height: clamp(220px, 36vw, 360px);
  overflow: hidden;
  border-radius: 32px;
  background: var(--cream2);
  box-shadow: 0 14px 40px rgba(42,36,32,.10);
}
.guide-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
  animation: hero-zoom 18s ease-in-out infinite alternate;
}
.guide-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(253,246,237,.85) 100%);
  pointer-events: none;
}
.guide-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}
.guide-hero-blob-1 {
  width: 240px; height: 240px;
  background: var(--peach);
  top: -50px; right: -30px;
  opacity: .55;
  animation: blob-float 14s ease-in-out infinite;
}
.guide-hero-blob-2 {
  width: 200px; height: 200px;
  background: var(--lav);
  bottom: -30px; left: 8%;
  opacity: .5;
  animation: blob-float 18s ease-in-out infinite reverse;
}

.guide-header {
  text-align: center;
  margin: 0 0 40px;
}
.guide-header h1 {
  font-family: var(--f-title);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0 0 12px;
  animation: title-in 0.8s cubic-bezier(.2,.8,.2,1) both;
}
.guide-subtitle {
  font-family: var(--f-hand);
  font-size: 22px;
  color: var(--peach-dark);
}

.guide-body {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1);
}
.guide-body.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.guide-body h2 {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 28px;
  color: var(--ink);
  margin: 48px 0 16px;
  position: relative;
  padding-left: 16px;
}
.guide-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: var(--peach-mid);
}
.guide-body h3 {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 32px 0 12px;
}
.guide-body p {
  margin: 0 0 18px;
}
.guide-body p:first-of-type::first-letter {
  font-family: var(--f-title);
  font-size: 56px;
  font-weight: 800;
  float: left;
  line-height: 0.85;
  margin: 8px 10px 0 0;
  color: var(--peach-dark);
}
.guide-body strong {
  color: var(--ink);
  font-weight: 700;
}
.guide-body ul, .guide-body ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.guide-body li {
  margin-bottom: 8px;
}
.guide-body hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  margin: 48px 0;
}

/* Inline illustrations (float dentro il testo) */
.inline-illustration {
  margin: 12px 0;
  max-width: 280px;
}
.inline-illustration img {
  width: 100%;
  height: auto;
  display: block;
  /* niente bordo né ombra: l'immagine ha sfondo cream e si fonde con la pagina */
  background: transparent;
  mix-blend-mode: multiply;
  transition: transform .4s cubic-bezier(.2,1.4,.4,1);
}
.inline-illustration img:hover {
  transform: scale(1.03) rotate(-1deg);
}
@media (min-width: 720px) {
  .inline-illustration-right {
    float: right;
    margin: 8px -40px 16px 28px;
    max-width: 320px;
  }
  .inline-illustration-left {
    float: left;
    margin: 8px 28px 16px -40px;
    max-width: 320px;
  }
}
@media (max-width: 720px) {
  .inline-illustration {
    max-width: 100%;
    margin: 16px auto;
  }
}

/* ============================================================
   HOME HERO CON ILLUSTRAZIONE
   ============================================================ */

.home-hero-section {
  position: relative;
  max-width: 1200px;
  margin: 24px auto 64px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) {
  .home-hero-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-hero-image-wrap {
    order: -1;
    height: 180px !important;
    border-radius: 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    box-shadow: none;
  }
  .home-hero-image {
    object-position: center 5%;
  }
}

.home-hero-image-wrap {
  position: relative;
  height: 460px;
  border-radius: 36px;
  overflow: hidden;
  background: var(--cream2);
  box-shadow: 0 16px 48px rgba(42,36,32,.12);
}
.home-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.04);
  animation: hero-zoom 22s ease-in-out infinite alternate;
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(253,246,237,.4) 100%);
  pointer-events: none;
}
.home-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}
.home-hero-blob-1 {
  width: 280px; height: 280px;
  background: var(--peach);
  top: -60px; right: -40px;
  opacity: .55;
  animation: blob-float 14s ease-in-out infinite;
}
.home-hero-blob-2 {
  width: 220px; height: 220px;
  background: var(--lav);
  bottom: -30px; left: 10%;
  opacity: .5;
  animation: blob-float 18s ease-in-out infinite reverse;
}
.home-hero-blob-3 {
  width: 180px; height: 180px;
  background: var(--sage);
  top: 30%; right: 20%;
  opacity: .35;
  animation: blob-float 22s ease-in-out infinite;
}

.home-hero-text {
  position: relative;
  z-index: 2;
}

/* Word reveal animation per il titolo */
.hero-title-anim .word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: word-reveal-anim 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title-anim .word-reveal:nth-child(1) { animation-delay: 0.1s; }
.hero-title-anim .word-reveal:nth-child(2) { animation-delay: 0.2s; }
.hero-title-anim .word-reveal:nth-child(3) { animation-delay: 0.3s; }
.hero-title-anim .word-reveal:nth-child(4) { animation-delay: 0.5s; }
@keyframes word-reveal-anim {
  to { opacity: 1; transform: translateY(0); }
}

/* === HOME PROPOSE: arricchito con illustrazione === */
.propose-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
@media (max-width: 880px) {
  .propose-card { grid-template-columns: 1fr; }
}
.propose-decor {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(143, 163, 130, .10);
  border: 1px solid rgba(143, 163, 130, .25);
  color: #6b8a5f;
  animation: gentle-bob 5s ease-in-out infinite;
}
.propose-decor svg { width: 56%; height: 56%; }
@media (max-width: 880px) {
  .propose-decor { width: 110px; height: 110px; margin: 0 auto; }
}
@keyframes gentle-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg); }
}

/* === HOME NEWSLETTER: arricchito === */
.newsletter-card {
  grid-template-columns: auto 1fr auto !important;
}
@media (max-width: 880px) {
  .newsletter-card { grid-template-columns: 1fr !important; }
}
.newsletter-decor {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 136, 16, .10);
  border: 1px solid rgba(184, 136, 16, .28);
  color: #b88810;
  position: relative;
  z-index: 1;
  animation: gentle-bob 6s ease-in-out infinite;
}
.newsletter-decor svg { width: 54%; height: 54%; }
@media (max-width: 880px) {
  .newsletter-decor { margin: 0 auto; }
  .newsletter-icon { display: none; }
}

/* ============================================================
   TRUST MARQUEE (banda scorrevole con i nostri "no")
   ============================================================ */
.trust-marquee {
  margin: 80px 0 0;
  padding: 28px 0;
  background: linear-gradient(155deg, #F0F8E4 0%, #FBF0D0 100%);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  overflow: hidden;
  position: relative;
}
.trust-marquee::before, .trust-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.trust-marquee::before {
  left: 0;
  background: linear-gradient(to right, #F0F8E4, transparent);
}
.trust-marquee::after {
  right: 0;
  background: linear-gradient(to left, #FBF0D0, transparent);
}
.trust-marquee-track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink2);
}
.trust-marquee-track .dot {
  color: var(--peach-mid);
  font-size: 24px;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   FLOATING DECORATIONS GLOBALI (piccole forme che fluttuano)
   ============================================================ */
.float-decoration {
  position: absolute;
  pointer-events: none;
  animation: gentle-bob 8s ease-in-out infinite;
  opacity: .6;
}

/* Hover tilt 3D sulle illustrazioni inline */
.inline-illustration img {
  cursor: pointer;
}
.inline-illustration img:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 18px 40px rgba(42,36,32,.18);
}

/* Page transitions: fade-in dell'intero <main> al load */
main {
  animation: page-fade-in 0.6s ease-out both;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === RIDUZIONE MOVIMENTO PER ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  .review-experimental *,
  .review-experimental *::before,
  .review-experimental *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* ============================================================
   THEME V2 — design system additivo (mergiato in theme.css 2026-04-08)
   ============================================================ */

/* ==========================================================================
   PixelBuoni — THEME V2 (additive override layer)
   --------------------------------------------------------------------------
   Caricato DOPO theme.css. Override mirati che applicano il nuovo design
   system (token, scala tipografica modulare, tier colors, pixel cells,
   burger menu). NON tocca .manifesto / .mf-* (la pagina manifesto resta
   con il suo stile dedicato grazie alla specificità del CSS originale).
   ========================================================================== */


/* ============================================================
   SAFETY NET: niente contenuto invisibile
   --------------------------------------------------------------------------
   Il CSS legacy ha dozzine di elementi con opacity:0 che dipendono da
   animations.js IntersectionObserver + classe .is-visible per apparire.
   Su Samsung Internet, iOS reduced-motion, e browser con observer rotti
   il contenuto resta permanentemente invisibile.
   FIX: forziamo opacity:1 su TUTTI gli elementi di contenuto. Le
   animazioni fade-up sono un nice-to-have, non una dipendenza.
   Il manifesto (.mf-*) ha le sue animazioni gestite autonomamente
   da manifesto.js, quindi lo escludiamo.
   ============================================================ */
[data-anim],
[data-anim] > *,
.guide-body,
.game-card,
.review-body,
.score-breakdown,
.breakdown-item,
.carousel-section,
.age-section,
.store-links-section,
.parent-voices-section,
.related-section,
.propose-section,
.propose-card,
.newsletter-section,
.newsletter-card,
.flags-row,
.home-selections,
.home-guides,
.home-guide-card,
.selection-card,
.custom-filters-card {
  opacity: 1 !important;
  transform: none !important;
}
/* Preserva le animazioni del manifesto (gestite da manifesto.js) */
.manifesto [data-mf],
.manifesto [data-mf-reveal],
.manifesto .mf-section,
.manifesto .mf-quote,
.manifesto .mf-stats,
.manifesto .mf-closing,
.manifesto .mf-kicker,
.manifesto .mf-vs-card,
.manifesto .mf-kw,
.manifesto .mf-title .mf-char {
  opacity: revert !important;
  transform: revert !important;
}

/* ============================================================
   TOKENS — design system
   ============================================================ */
:root {
  /* Palette base — versione raffinata della precedente */
  --paper:        #fbf6ee;
  --paper-2:      #f4ecdf;
  --ink:          #2a2622;
  --ink-2:        #4a423b;
  --ink-3:        #75695d;
  --line:         #2a2622;

  --accent-warm:  #f0c987;
  --accent-sage:  #b7ccae;
  --accent-rose:  #e8b9b0;
  --accent-sky:   #b8cfd9;
  --brand:        #c8553d;

  /* Tier colors — semaforo voto */
  --tier-good-bg:    #2e7d4f;
  --tier-good-soft:  #c8e6cf;
  --tier-mid-bg:     #d4a017;
  --tier-mid-soft:   #f5e4b3;
  --tier-warn-bg:    #c87c2a;
  --tier-warn-soft:  #f4d4b0;
  --tier-bad-bg:     #c8553d;
  --tier-bad-soft:   #f0c8be;

  /* Font stack */
  --f-display: "Fraunces", Georgia, serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scala tipografica modulare 1.250 */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.5625rem;
  --fs-xl:   1.953rem;
  --fs-2xl:  2.441rem;
  --fs-3xl:  3.052rem;
  --fs-4xl:  3.815rem;
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  /* Spacing 4px base */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem;
  --s-4: 1rem;   --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem;   --s-8: 4rem;   --s-9: 6rem;

  /* Shape & shadow */
  --radius:    18px;
  --radius-lg: 28px;
  --shadow-block:    4px 4px 0 var(--ink);
  --shadow-block-lg: 6px 6px 0 var(--ink);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ============================================================
   GLOBAL — body, tipografia, focus
   La specificità del manifesto (.manifesto, .mf-*) protegge la
   pagina manifesto dagli override sotto.
   ============================================================ */
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Background uniforme — disattivo la griglia pixel del theme.css */
body::before { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

p { color: var(--ink-2); line-height: var(--lh-body); text-wrap: pretty; }

a { color: var(--ink); }
a:hover { color: var(--brand); }

/* Focus visibile globale */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--ink); color: var(--paper);
  z-index: 200; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   NAV — restyle + burger menu mobile
   ============================================================ */
.nav {
  background: rgba(251,246,238,.94);
  border-bottom: 1px solid rgba(42,38,34,.08);
  padding: var(--s-4) var(--s-6);
}
.logo-name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-links a {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a::after { background: var(--brand); }

/* Burger button */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger svg { width: 22px; height: 22px; }
.nav-burger .bar {
  fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round;
  transform-origin: center;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger[aria-expanded="true"] .bar-1 { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .bar-2 { opacity: 0; }
.nav-burger[aria-expanded="true"] .bar-3 { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav {
    padding: 12px 16px;
    position: relative;
    z-index: 200;
  }
  .nav-burger {
    display: inline-flex !important;
    position: relative;
    z-index: 201;
  }
  /* BURGER: il JS gestisce display none/flex direttamente via
     inline style. Il CSS definisce solo lo stile dei link. */
  .nav-links li {
    border-bottom: 1px solid rgba(42,38,34,.1);
    list-style: none;
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: #2a2622;
  }
  .nav-links li {
    border-bottom: 1px solid rgba(42,38,34,.1);
    list-style: none;
    width: 100%;
  }
  .nav-links a {
    display: block !important;
    padding: 16px 0 !important;
    font-size: 20px !important;
    font-weight: 600;
    width: 100%;
    color: #2a2622;
  }
  body.nav-open { overflow: hidden; }
}

/* ============================================================
   BUTTONS — restyle chunky pill
   ============================================================ */
.btn-primary {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--ink);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  touch-action: manipulation;
}
.btn-primary:hover {
  background: var(--ink);
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-block);
  color: var(--paper);
}

.btn-ghost {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--ink);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn-ghost:hover {
  background: var(--paper-2);
  color: var(--ink);
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-block);
}

/* ============================================================
   SCORE PIPS — pixel cells (used in lista cards + review breakdown)
   ============================================================ */
.score-pips { display: flex; gap: 3px; }

/* default — small (used in lista card foot) */
.pip {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
}
.pip.on  { background: var(--ink); }
.pip.off { background: var(--paper-2); }

/* large — used in review breakdown */
.breakdown-item .score-pips { gap: 4px; }
.breakdown-item .pip {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ink);
  position: relative;
}
.breakdown-item .pip.on {
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25);
}

/* Tier color application via score_color filter classes */
.breakdown-item.score-green .pip.on  { background: var(--tier-good-bg); }
.breakdown-item.score-amber .pip.on  { background: var(--tier-mid-bg); }
.breakdown-item.score-orange .pip.on { background: var(--tier-warn-bg); }
.breakdown-item.score-red .pip.on    { background: var(--tier-bad-bg); }
.breakdown-item.score-neutral .pip.on{ background: var(--ink); }

/* Lista card pips — colorate per voto finale */
.score-row .score-pips .pip.on { background: var(--ink); }
.score-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--fs-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   GAME CARD — restyle thumb overlay con tier
   ============================================================ */
.game-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.game-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: var(--shadow-block-lg);
  border-color: var(--ink);
}
.card-thumb { height: 180px; }
.card-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: var(--s-2);
}
.card-desc {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
  font-weight: 400;
}
.card-meta { gap: var(--s-2); margin-bottom: var(--s-2); }
.card-foot {
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
}

/* Score overlay tier colors — palette nuova */
.card-score-overlay {
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 6px 12px 6px 14px;
  border-radius: 14px;
  font-family: var(--f-display);
  font-weight: 900;
}
.card-score-overlay.tier-excellent { background: var(--tier-good-bg); }
.card-score-overlay.tier-good      { background: var(--tier-good-bg); }
.card-score-overlay.tier-ok        { background: var(--tier-mid-bg); }
.card-score-overlay.tier-low       { background: var(--tier-warn-bg); }
.card-score-overlay.tier-bad       { background: var(--tier-bad-bg); }
.card-score-num {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.card-score-max { font-size: 12px; opacity: .85; }

/* Card tags ripuliti */
.card-tag {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ============================================================
   HUB — header + filters
   ============================================================ */
.hub-page { max-width: 1180px; margin: 0 auto; padding: var(--s-7) var(--s-5); }
.hub-header { margin-bottom: var(--s-7); }
.hub-header h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  margin-bottom: var(--s-3);
}
.hub-sub {
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.filters-bar {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.filter-group { display: flex; flex-direction: column; gap: var(--s-3); }
.filter-label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-pill {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  background: var(--paper);
  color: var(--ink-2);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.filter-pill:hover { background: var(--paper-2); transform: translateY(-1px); }
.filter-pill.active {
  background: var(--ink);
  color: var(--paper);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-5);
}

/* ============================================================
   REVIEW — header sperimentale, verdict, breakdown
   ============================================================ */
.review-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
}

/* Review header image — bordo + ombra, no blob colorati, no overlay.
   I blob erano buggati (macchie peach/lavender sull'immagine).
   L'overlay gradient sbiadiva la parte bassa. Entrambi rimossi.
   Bordo e ombra restano per dare struttura. */
.hero-image-wrap {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block-lg);
  overflow: hidden;
  margin: 0 0 var(--s-6);
  height: auto;
  background: var(--paper-2);
}
.hero-image {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
/* Blob e overlay rimossi da review E guide — erano buggati */
.hero-overlay,
.hero-blob,
.guide-hero-overlay,
.guide-hero-blob { display: none !important; }

/* Guide hero — pulita con ombra soft, no zoom */
.guide-hero {
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(42,38,34,.12);
  background: none;
  height: auto;
}
.guide-hero-img {
  height: auto;
  max-height: 420px;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

.review-header-exp { margin-bottom: var(--s-7); }
.review-title-exp {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin: var(--s-4) 0 var(--s-5);
}

.meta-row {
  display: flex; flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-4);
}
.age-pill, .price-pill {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2);
  color: var(--ink-2);
  border-radius: 999px;
  border: 1.5px solid rgba(42,38,34,.15);
}

/* Verdict block — colorato per tier (basato sul css_class del verdict) */
.verdict-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-block);
  margin: var(--s-5) 0;
  position: relative;
  overflow: hidden;
}
.verdict-block::before {
  content: ""; position: absolute; top: -80px; right: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--verdict-tier, var(--ink));
  opacity: 0.12;
  z-index: 0;
}
.verdict-block > * { position: relative; z-index: 1; }

.verdict-block.verdict-approve     { --verdict-tier: var(--tier-good-bg); background: var(--tier-good-soft); }
.verdict-block.verdict-reserve     { --verdict-tier: var(--tier-mid-bg);  background: var(--tier-mid-soft); }
.verdict-block.verdict-investigate { --verdict-tier: var(--tier-warn-bg); background: var(--tier-warn-soft); }
.verdict-block.verdict-reject      { --verdict-tier: var(--tier-bad-bg);  background: var(--tier-bad-soft); }

.verdict-icon {
  width: 56px; height: 56px;
  background: var(--verdict-tier);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
}
.verdict-icon svg { width: 28px; height: 28px; }
.verdict-content { display: flex; flex-direction: column; gap: 2px; }
.verdict-label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--verdict-tier);
}
.verdict-tagline {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.verdict-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: 14px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.verdict-score .score-big {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.verdict-score .score-max {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.7;
}
@media (max-width: 720px) {
  .verdict-block { grid-template-columns: auto 1fr; }
  .verdict-score { grid-column: 1 / -1; justify-self: start; }
}

/* Badges row */
.badges-row {
  display: flex; flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.badge-pill {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.badge-pill.sage  { background: var(--accent-sage); color: var(--ink); }
.badge-pill.sky   { background: var(--accent-sky);  color: var(--ink); }
.badge-pill.peach { background: var(--accent-warm); color: var(--ink); }
.badge-pill.lav   { background: #d8ccec;            color: var(--ink); }
.badge-pill.rose  { background: var(--accent-rose); color: var(--ink); }
.badge-pill.subscription {
  background: var(--brand); color: #fff;
}

/* Section header */
.section-header {
  display: flex; align-items: center;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-5);
}
.section-title {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
}
.section-line { flex: 1; height: 2px; background: rgba(42,38,34,.15); }
.section-icon { width: 24px; height: 24px; color: var(--ink-3); }

/* ============================================================
   REVIEW BODY — drop cap + pull quote
   ============================================================ */
.review-body {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 70ch;
  margin: 0 auto var(--s-6);
}
.review-body p { margin-bottom: var(--s-5); color: var(--ink-2); }
.review-body p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 4.4em;
  line-height: .85;
  float: left;
  padding: .05em .12em 0 0;
  color: var(--brand);
}
.review-body strong { color: var(--ink); font-weight: 600; }
.review-body em { font-style: italic; color: var(--ink); }

.review-body blockquote {
  border-left: 4px solid var(--brand);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin: var(--s-6) 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
}

/* ============================================================
   BREAKDOWN GRID — pixel cells redesign
   ============================================================ */
.score-breakdown {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-6);
  margin: var(--s-7) 0;
}
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.breakdown-item {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: 2px 2px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.breakdown-icon {
  width: 36px; height: 36px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.breakdown-icon svg { width: 20px; height: 20px; }
.breakdown-label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.breakdown-item .score-num {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-2);
}
/* Voto finale — leggermente più prominente */
.breakdown-item:last-child {
  background: var(--ink);
  color: #fff;
}
.breakdown-item:last-child .breakdown-label,
.breakdown-item:last-child .score-num { color: #fff; }
.breakdown-item:last-child .breakdown-icon {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.breakdown-item:last-child .pip {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
}

/* Flags row */
.flags-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
@media (max-width: 720px) { .flags-row { grid-template-columns: 1fr; } }
.flags-green, .flags-red {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.flags-green { border-left: 6px solid var(--tier-good-bg); }
.flags-red   { border-left: 6px solid var(--tier-bad-bg); }
.flags-green h3, .flags-red h3 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  margin-bottom: var(--s-3);
}
.flags-green ul, .flags-red ul { list-style: none; padding: 0; margin: 0; }
.flags-green li, .flags-red li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid rgba(42,38,34,.08);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.flags-green li:last-child, .flags-red li:last-child { border-bottom: none; }
.flags-green li::before { content: "✓ "; color: var(--tier-good-bg); font-weight: 700; }
.flags-red li::before   { content: "✗ "; color: var(--tier-bad-bg); font-weight: 700; }

/* Store links restyled */
.store-link {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.store-link:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-block);
}
.store-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
}
.store-price {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Carousel section refresh */
.carousel-section { margin: var(--s-7) 0; }
.carousel-item img { border-radius: var(--radius); border: 2px solid var(--ink); }

/* Related cards refresh */
.related-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink);
  overflow: hidden;
}
.related-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-block);
}
.related-score {
  background: var(--ink);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.related-score.score-green  { background: var(--tier-good-bg); }
.related-score.score-amber  { background: var(--tier-mid-bg); }
.related-score.score-orange { background: var(--tier-warn-bg); }
.related-score.score-red    { background: var(--tier-bad-bg); }

/* ============================================================
   HOME — hero, manifesto strip, selezioni, guide, propose, newsletter
   Override aggressivo del layout legacy: testo a SX, immagine a DX,
   no blob, no overlap, aspect ratio fisso.
   ============================================================ */
section.home-hero-section {
  max-width: 1180px;
  margin: 0 auto !important;
  padding: var(--s-8) var(--s-5) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--s-8) !important;
  align-items: center;
  position: relative;
}
@media (max-width: 880px) {
  section.home-hero-section {
    grid-template-columns: 1fr !important;
    padding: var(--s-7) var(--s-5) !important;
    gap: var(--s-6) !important;
  }
}

/* DOM: image-wrap PRIMA, text DOPO. Visivamente voglio testo a SX, immagine a DX */
.home-hero-section .home-hero-text { order: 1; position: relative; z-index: 2; }
.home-hero-section .home-hero-image-wrap { order: 2; }

.home-hero-image-wrap {
  position: relative;
  aspect-ratio: 5 / 4 !important;
  height: auto !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 2px solid var(--ink) !important;
  box-shadow: var(--shadow-block-lg) !important;
  background: var(--accent-warm) !important;
}
@media (max-width: 880px) {
  .home-hero-image-wrap {
    order: 2 !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
}
.home-hero-image {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: none !important;
  animation: none !important;
}
/* Disabilito i blob colorati legacy (creavano l'alone arancione che si vedeva nello screenshot) */
.home-hero-blob { display: none !important; }
/* Disabilito anche l'overlay (gradient) che non serve */
.home-hero-overlay { display: none !important; }

/* Floating badges sull'immagine hero (purely decorative) */
.home-hero-image-wrap::before {
  content: "✓ zero pubblicità";
  position: absolute;
  top: 14px; right: -8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-block);
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  z-index: 3;
  color: var(--ink);
}
.home-hero-image-wrap::after {
  content: "★ testato dai bimbi";
  position: absolute;
  bottom: 18px; left: -10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-block);
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  z-index: 3;
  color: var(--ink);
}
@media (max-width: 600px) {
  .home-hero-image-wrap::before,
  .home-hero-image-wrap::after { display: none; }
}
.home-hero-text h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 0.98;
  margin-bottom: var(--s-5);
}
.home-hero-text p {
  font-size: var(--fs-md);
  color: var(--ink-2);
  max-width: 36ch;
  margin-bottom: var(--s-6);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2);
  border-radius: 999px;
  margin-bottom: var(--s-4);
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Manifesto strip in home — FULL WIDTH edge-to-edge */
section.manifesto-strip {
  /* Full-width edge-to-edge.
     html + body hanno overflow-x: hidden, quindi i pochi px di
     eccesso di 100vw (causati dalla scrollbar su Android) vengono
     clippati senza creare scroll orizzontale. */
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: var(--s-9) var(--s-5) !important;
  margin-top: var(--s-8) !important;
  margin-bottom: var(--s-8) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
}
.manifesto-strip::before {
  content: ""; position: absolute; top: -120px; left: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--brand); opacity: 0.1;
}
.manifesto-strip::after {
  content: ""; position: absolute; bottom: -140px; right: -100px;
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--accent-sage); opacity: 0.1;
}
.manifesto-strip h2 {
  color: var(--paper);
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  max-width: 24ch;
  margin: var(--s-3) auto 0;
  position: relative; z-index: 1;
}
.manifesto-quote {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-warm);
  position: relative; z-index: 1;
}
/* il .manifesto-strip .hand resta giallo brand-friendly */
.manifesto-strip .hand { color: var(--accent-warm); }

/* Section header per home */
.home-selections .section-header,
.home-guides .section-header {
  margin-bottom: var(--s-6);
}

/* Selezioni — restyle card */
.home-selections {
  max-width: 1180px;
  margin: var(--s-8) auto var(--s-7);
  padding: 0 var(--s-5);
}
.selections-grid { gap: var(--s-5); }
.selection-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block);
}
.selection-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: var(--shadow-block-lg);
}
.selection-eyebrow {
  font-family: var(--f-sans);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.selection-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
}
.selection-desc {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.selection-item {
  border: 1.5px solid rgba(42,38,34,.15);
  background: var(--paper);
}
.selection-item:hover {
  background: var(--paper-2);
  border-color: var(--ink);
}
.selection-item-title { font-family: var(--f-sans); font-weight: 600; }
.selection-item-meta {
  font-family: var(--f-sans);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Custom filters card */
.custom-filters-card {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block);
}

/* Guide cards in home */
.home-guides { max-width: 1180px; }
.home-guide-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-block);
  /* FIX: forza visibilità — l'inline CSS in home.html ha opacity:0
     + animation hgIn forwards che non parte se reduced-motion è attivo
     o se l'observer non triggera. Disabilito l'animazione iniziale. */
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.home-guide-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-md);
}

/* Stesso fix per le selection-card della home (anche queste hanno
   opacity:0 + animation selIn forwards nell'inline CSS) */
.selection-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Trust marquee */
.trust-marquee {
  background: var(--paper);
  border-top: 1px solid rgba(42,38,34,.1);
  border-bottom: 1px solid rgba(42,38,34,.1);
  padding: var(--s-5) 0;
  margin-top: var(--s-8);
  overflow: hidden;
}
.trust-marquee-track {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.trust-marquee .dot { color: var(--brand); }

/* Newsletter form inputs */
.newsletter-form-inline input[type=email],
.newsletter-form input[type=email] {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}

/* ============================================================
   GUIDE PAGES — typography
   ============================================================ */
.guide-page {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}
.guide-header h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  margin-bottom: var(--s-3);
}
.guide-subtitle {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-2);
  margin-bottom: var(--s-6);
}
.guide-body {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink-2);
}
.guide-body p { margin-bottom: var(--s-5); }
.guide-body h2 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.guide-body h3 {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.guide-body strong { color: var(--ink); font-weight: 600; }
.guide-body em { font-style: italic; }
.guide-body ul, .guide-body ol {
  margin: var(--s-4) 0 var(--s-5) var(--s-5);
}
.guide-body li { margin-bottom: var(--s-2); color: var(--ink-2); }
.guide-body blockquote {
  border-left: 4px solid var(--brand);
  padding: var(--s-3) var(--s-5);
  margin: var(--s-5) 0;
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink);
}

/* Drop cap sulla prima lettera del primo paragrafo della guida */
.guide-body > p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 4rem;
  line-height: .85;
  float: left;
  padding: .05em .12em 0 0;
  color: var(--brand);
}

/* ============================================================
   FOOTER — multi-column con strip bottom
   ============================================================ */
footer.footer {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-top: none !important;
  padding: 0 !important;
  margin-top: var(--s-8) !important;
  position: relative;
  overflow: hidden;
}
footer.footer::before {
  content: ""; position: absolute;
  top: -120px; right: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.08;
  pointer-events: none;
}
footer.footer::after {
  content: ""; position: absolute;
  bottom: -100px; left: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--accent-sage);
  opacity: 0.06;
  pointer-events: none;
}

.footer-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--s-8);
  padding: var(--s-9) var(--s-5) var(--s-7) !important;
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7) var(--s-5) var(--s-6) !important; }
}

.footer-brand { max-width: 360px; }
.footer-logo-link { display: inline-block; margin-bottom: var(--s-4); }
.footer-logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--fs-xl);
  color: var(--paper);
  display: inline-block;
}
.footer-logo .hand { color: var(--accent-warm); }
.footer-tagline {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: rgba(251,246,238,.7);
  line-height: 1.65;
  margin-bottom: var(--s-5);
}
.footer-trust {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.footer-trust li {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(251,246,238,.85);
  font-weight: 500;
  display: flex; align-items: center; gap: var(--s-2);
}
.footer-trust li span {
  color: var(--accent-warm);
  font-weight: 700;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 600px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}

.footer-col h4 {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-warm);
  margin: 0 0 var(--s-4);
}
.footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.footer-col li a {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: rgba(251,246,238,.75);
  font-weight: 500;
  transition: color .2s var(--ease);
}
.footer-col li a:hover { color: var(--paper); }

.footer-bottom {
  border-top: 1px solid rgba(251,246,238,.1);
  padding: var(--s-5) var(--s-5);
  position: relative;
  z-index: 1;
}
.footer-bottom-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.footer-copy {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(251,246,238,.55);
}
.footer-attrib {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(251,246,238,.4);
  max-width: 50ch;
  text-align: right;
}
.footer-attrib a {
  color: var(--accent-warm);
  text-decoration: underline;
  text-decoration-color: rgba(240,201,135,.4);
}
.footer-attrib a:hover { color: var(--accent-warm); text-decoration-color: var(--accent-warm); }
@media (max-width: 720px) {
  .footer-attrib { text-align: left; }
}

/* Stile per .contact-grid e .contact-card (usato in contatti.md) */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
}
.contact-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-block);
}
.contact-card-title {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.contact-card-lede {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: var(--s-5);
  line-height: 1.65;
}
.contact-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
}
.contact-card ul li {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding-left: var(--s-5);
  position: relative;
  margin-bottom: var(--s-3);
  line-height: 1.55;
}
.contact-card ul li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: var(--brand);
  font-weight: 700;
}
.contact-card strong { color: var(--ink); font-weight: 600; }
.contact-form { display: flex; flex-direction: column; gap: var(--s-3); }
.contact-form label {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-3); }
.contact-form .hp { display: none; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--brand);
}
.cookie-banner p { color: var(--paper); }
.cookie-banner a { color: var(--accent-warm); }
.cookie-banner .btn-primary {
  background: var(--accent-warm);
  color: var(--ink);
  border-color: var(--accent-warm);
}
.cookie-banner .btn-ghost {
  border-color: rgba(255,255,255,.4);
  color: var(--paper);
}

/* ============================================================
   PROMO AFTER WRAP — restyle "e poi" sezione in fondo a hub/giochi
   ============================================================ */
.promo-after-wrap .guides-box {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-block);
  border-style: solid;
}
.promo-after-wrap .guides-box.solid {
  background: var(--ink);
}
.promo-after-wrap .guides-box.solid a { color: var(--accent-warm); }
.promo-after-wrap .guides-box h3 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
}
.promo-after-wrap .guides-box p {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.promo-after-wrap .guides-box.solid,
.promo-after-wrap .guides-box.solid p,
.promo-after-wrap section .guides-box.solid p { color: #f4ecdf !important; }
.promo-after-wrap .guides-box.solid h3 { color: #fff !important; }
.promo-after-wrap .guides-box.solid a.box-cta { color: var(--accent-warm) !important; }
.promo-after-wrap .guides-divider {
  font-family: var(--f-sans);
  color: var(--ink-3);
}

/* ============================================================
   PARENT VOICES — leggero refresh
   ============================================================ */
.voices-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink);
}
.voices-positive { border-left: 6px solid var(--tier-good-bg); }
.voices-negative { border-left: 6px solid var(--tier-bad-bg); }

/* ============================================================
   AGE TABLE
   ============================================================ */
.age-cell {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink);
}
.age-cell .age-range {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-md);
}

/* ============================================================
   MANIFESTO — fix responsive mirato per .mf-reject-list
   Su mobile il testo wrappa su 2 righe e il ::after strike line
   (position absolute, top 50%) taglia a mezz'aria fra le due righe.
   Sostituisco con text-decoration: line-through quando struck.
   Eccezione mirata, NON tocca il resto del manifesto.
   ============================================================ */
@media (max-width: 720px) {
  .mf-reject-list { font-size: 1rem !important; }
  .mf-reject-list li {
    padding: .55rem 0 .55rem 1.6rem !important;
    line-height: 1.45 !important;
  }
  .mf-reject-list li::after {
    /* nascondo la linea absolute su mobile */
    display: none !important;
  }
  .mf-reject-list li.is-struck {
    text-decoration: line-through;
    text-decoration-color: var(--mf-terra, #d97a5b);
    text-decoration-thickness: 2px;
  }
}

/* ============================================================
   FINE THEME-V2
   ============================================================ */


/* ============================================================
   MANIFESTO PAGE — testo editoriale + animazioni leggere
   ============================================================ */

.manifesto {
  --mf-ink: #2b2a28;
  --mf-sage: #9bb88a;
  --mf-terra: #d97a5b;
  --mf-amber: #e8b75c;
  color: #2b2a28;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 300;
  max-width: 820px;
  margin: 2rem auto 3rem;
  padding: 3.5rem 2.5rem 2.5rem;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 2px 0 rgba(60,40,20,.04), 0 30px 60px -30px rgba(60,40,20,.18);
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .manifesto {
    margin: 1rem 0;
    padding: 2.5rem 1.3rem 2rem;
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- HEADER --- */
.mf-head { text-align: center; margin: 1rem 0 4rem; }
.mf-kicker {
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: var(--mf-terra);
  margin: 0 0 .3rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
}
.mf-kicker.is-in { opacity: 1; transform: none; }
.mf-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 0 0 .8rem;
  color: var(--mf-ink);
}
.mf-title .mf-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.mf-title .mf-char.is-in { opacity: 1; transform: none; }
.mf-sub {
  font-size: 1.05rem;
  color: #6f6760;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}

/* --- SEZIONI --- */
.mf-section {
  margin: 0 0 3.5rem;
  font-size: 1.1rem;
  line-height: 1.75;
  color: #3a3733;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.mf-section.is-in { opacity: 1; transform: none; }
.mf-section p { margin: 0 0 1.1rem; }
.mf-section em { font-style: italic; color: var(--mf-terra); font-weight: 500; }
.mf-section strong {
  font-weight: 600;
  color: var(--mf-ink);
  background: linear-gradient(transparent 60%, rgba(232,183,92,.45) 60%);
}

.mf-h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 0 0 1.2rem;
  position: relative;
  display: inline-block;
  color: #6b3a1f;
}
.mf-h2 span { position: relative; z-index: 2; }
.mf-h2::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  bottom: .12em;
  height: .32em;
  background: var(--mf-amber);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s ease .25s;
}
.mf-section.is-in .mf-h2::after { transform: scaleX(1); }

.mf-dropcap .mf-dc {
  float: left;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  line-height: .85;
  padding: .3rem .55rem .1rem 0;
  color: var(--mf-terra);
}

/* --- QUOTE --- */
.mf-quote {
  margin: 4rem 0;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.mf-quote.is-in { opacity: 1; transform: none; }
.mf-big {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.25;
  color: var(--mf-ink);
  margin: 0;
}
.mf-reveal {
  position: relative;
  display: inline-block;
  color: #b8aea0;
  transition: color 1s ease .2s;
}
.mf-reveal::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: .05em;
  height: .12em;
  background: var(--mf-sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .35s;
}
.mf-reveal-warn::after { background: var(--mf-terra); }
.mf-quote.is-in .mf-reveal { color: var(--mf-sage); }
.mf-quote.is-in .mf-reveal-warn { color: var(--mf-terra); }
.mf-quote.is-in .mf-reveal::after { transform: scaleX(1); }

/* --- STATS --- */
.mf-stats {
  margin: 3.5rem 0;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  border-top: 1px dashed #d4cab8;
  border-bottom: 1px dashed #d4cab8;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.mf-stats.is-in { opacity: 1; transform: none; }
.mf-stat { text-align: center; }
.mf-stat-num {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--mf-terra);
  font-variant-numeric: tabular-nums;
}
.mf-stat-label {
  display: block;
  margin-top: .4rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6f6760;
}

/* --- LISTA RIFIUTI --- */
.mf-reject-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}
.mf-reject-list li {
  position: relative;
  padding: .55rem 0 .55rem 2rem;
  color: #4a4540;
  border-bottom: 1px solid #ece3d0;
  transition: color .5s ease, opacity .5s ease;
}
.mf-reject-list li::before {
  content: '×';
  position: absolute;
  left: .25rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  color: var(--mf-terra);
  font-size: 1.6rem;
  font-weight: 800;
  transition: transform .4s cubic-bezier(.5,1.6,.5,1);
}
.mf-reject-list li::after {
  content: '';
  position: absolute;
  left: 2rem; right: 0;
  top: 50%;
  height: 2px;
  background: var(--mf-terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.6,0,.4,1);
}
.mf-reject-list li.is-struck { color: #998f86; opacity: .65; }
.mf-reject-list li.is-struck::before { transform: translateY(-50%) scale(1); }
.mf-reject-list li.is-struck::after { transform: scaleX(1); }

/* --- VERSUS --- */
.mf-versus {
  margin: 3.5rem 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}
.mf-vs-card {
  background: #fff;
  border: 2px solid var(--mf-ink);
  border-radius: 16px;
  padding: 1.8rem 1.4rem 1.4rem;
  position: relative;
  box-shadow: 5px 5px 0 var(--mf-ink);
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
}
.mf-vs-no  { transform: translateX(-40px) rotate(-1.5deg); background: #fdeeea; }
.mf-vs-yes { transform: translateX(40px)  rotate(1.5deg);  background: #e9f3df; }
.mf-versus.is-in .mf-vs-card { opacity: 1; }
.mf-versus.is-in .mf-vs-no   { transform: rotate(-1.5deg); }
.mf-versus.is-in .mf-vs-yes  { transform: rotate(1.5deg); }
.mf-vs-mark {
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  border: 3px solid var(--mf-ink);
}
.mf-vs-no  .mf-vs-mark { background: var(--mf-terra); }
.mf-vs-yes .mf-vs-mark { background: var(--mf-sage); }
.mf-vs-card h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  margin: .8rem 0 .5rem;
  text-align: center;
}
.mf-vs-card p {
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .9rem;
  color: #4a4540;
  text-align: center;
}
.mf-vs-tag {
  display: block;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .35rem;
  border-top: 1px dashed currentColor;
}
.mf-vs-no  .mf-vs-tag { color: var(--mf-terra); }
.mf-vs-yes .mf-vs-tag { color: #5d8a3f; }
.mf-vs-divider {
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem;
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  color: #8a8077;
}
.mf-vs-line { width: 2px; height: 32px; background: #d4cab8; }
@media (max-width: 700px) {
  .mf-versus { grid-template-columns: 1fr; }
  .mf-vs-divider { flex-direction: row; }
  .mf-vs-line { width: 32px; height: 2px; }
}

/* --- KEYWORDS --- */
.mf-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.6rem 0 2rem;
}
.mf-kw {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--mf-ink);
  font-size: .9rem;
  color: var(--mf-ink);
  opacity: 0;
  transform: translateY(16px) scale(.92);
  transition: opacity .55s ease, transform .55s cubic-bezier(.3,1.6,.5,1);
}
.mf-kw:nth-child(odd) { background: #e9f3df; }
.mf-kw:nth-child(3n)  { background: #fdeeea; }
.mf-kw:nth-child(5n)  { background: #fff4dc; }
.mf-section.is-in .mf-kw.is-in { opacity: 1; transform: none; }

/* --- FINALE + CLOSING --- */
.mf-finale .mf-promise {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: 1.5rem;
}
.mf-closing {
  text-align: center;
  margin: 4rem 0 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.mf-closing.is-in { opacity: 1; transform: none; }
.mf-welcome {
  font-family: 'Caveat', cursive;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--mf-terra);
  margin: 0 0 1.5rem;
}
.mf-cta-row {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.mf-cta {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--mf-ink);
  transition: transform .25s ease, box-shadow .25s ease;
  font-size: .95rem;
}
.mf-cta-primary { background: var(--mf-ink); color: #fdf6ed; box-shadow: 4px 4px 0 var(--mf-amber); }
.mf-cta-ghost   { background: transparent; color: var(--mf-ink); box-shadow: 4px 4px 0 var(--mf-sage); }
.mf-cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--mf-terra); }

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  .manifesto *,
  .manifesto *::before,
  .manifesto *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mf-title .mf-char,
  .mf-section,
  .mf-quote,
  .mf-closing,
  .mf-kicker,
  .mf-stats,
  .mf-vs-card,
  .mf-kw {
    opacity: 1 !important;
    transform: none !important;
  }
  .mf-reject-list li.is-struck::before,
  .mf-reject-list li.is-struck::after,
  .mf-h2::after,
  .mf-quote.is-in .mf-reveal::after { transform: none !important; }
}