/* Data Room Nexus — livello grafico "modern".
   Tutto sta in @layer con !important: le dichiarazioni importanti di un layer battono quelle
   importanti non-layered del vecchio CSS a prescindere dalla specificità, quindi lo stack esistente
   (redesign, similarweb-*, section-design…) resta invariato e questo file lo sovrascrive in modo ordinato. */
@layer modern {
  :root {
    --mx-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mx-accent: #0071e3;
    --mx-accent-2: #2997ff;
    --mx-ease: cubic-bezier(.22, .8, .24, 1);
    --mx-radius: 28px;
    --mx-nav-h: 52px;
  }
  /* tema chiaro */
  html:root:not([data-theme=dark]) {
    --mx-bg: #ffffff; --mx-band: #f5f5f7; --mx-card: #ffffff; --mx-card-soft: #f5f5f7;
    --mx-text: #1d1d1f; --mx-muted: #6e6e73; --mx-line: #d2d2d7; --mx-link: #0066cc;
    --mx-shadow: 0 20px 50px rgba(0,0,0,.08);
  }
  /* tema scuro */
  html:root[data-theme=dark] {
    --mx-bg: #000000; --mx-band: #0b0b0d; --mx-card: #161618; --mx-card-soft: #1d1d1f;
    --mx-text: #f5f5f7; --mx-muted: #a1a1a6; --mx-line: #333336; --mx-link: #2997ff;
    --mx-shadow: 0 24px 60px rgba(0,0,0,.55);
  }

  html { scroll-behavior: smooth; overflow-x: clip; }
  html body { overflow-x: clip; }
  html body {
    font-family: var(--mx-font) !important;
    background: var(--mx-bg) !important;
    color: var(--mx-text) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.011em;
    line-height: 1.5 !important;
  }
  html body h1, html body h2, html body h3, html body .logo, html body strong, html body .kicker {
    font-family: var(--mx-font) !important;
  }
  html body a { color: inherit; }
  html body ::selection { background: var(--mx-accent); color: #fff; }

  /* ───────── barra di avanzamento ───────── */
  .mx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9100; background: transparent; pointer-events: none; }
  .mx-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--mx-p, 0)); background: linear-gradient(90deg, #ff9f0a, #bf5af2, #0a84ff); }

  /* ───────── navigazione ───────── */
  html body .site-header {
    position: sticky !important; top: 0 !important; z-index: 9000 !important;
    background: color-mix(in srgb, var(--mx-bg) 72%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px) !important; backdrop-filter: saturate(180%) blur(22px) !important;
    border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent) !important;
    box-shadow: none !important; color: var(--mx-text) !important;
    transition: background .3s;
  }
  html body .site-header .header-inner { min-height: var(--mx-nav-h) !important; padding-block: 0 !important; gap: 20px !important; flex-wrap: nowrap !important; align-items: center !important; flex-direction: row !important; }
  html body .site-header .logo, html body .site-header a, html body .site-header .logo-copy { color: var(--mx-text) !important; }
  html body .site-header .logo { font-size: 15px !important; letter-spacing: -.02em !important; font-weight: 700 !important; }
  html body .site-header .logo small { display: none !important; }
  html body .site-nav { gap: 4px !important; margin-left: auto; font-size: 13px !important; }
  html body .site-nav a {
    padding: 8px 12px !important; border-radius: 980px !important; border: 0 !important;
    color: var(--mx-muted) !important; font-weight: 500 !important; transition: color .2s, background .2s;
  }
  html body .site-nav a:hover { color: var(--mx-text) !important; background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important; }
  html body .site-nav a.active, html body .site-nav a[aria-current=page] { color: var(--mx-text) !important; background: color-mix(in srgb, var(--mx-text) 10%, transparent) !important; }
  html body .site-header .theme-toggle, html body .site-header .nx-picker {
    min-height: 34px !important; padding: 0 14px !important; border-radius: 980px !important; font-size: 12px !important;
    background: color-mix(in srgb, var(--mx-text) 8%, transparent) !important; color: var(--mx-text) !important; border: 0 !important;
  }

  /* ───────── hero ───────── */
  html body .hero {
    display: block !important; text-align: center; padding: clamp(72px, 12vw, 150px) 0 0 !important;
    background: none !important; border: 0 !important; position: relative;
  }
  /* bagliore dell'hero: sul body, a tutta larghezza (il contenitore centrale lo taglierebbe) */
  html body::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(110vh, 1000px); z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 45% 55% at 22% 30%, rgba(10,132,255,.30), transparent 72%),
      radial-gradient(ellipse 40% 50% at 80% 22%, rgba(191,90,242,.26), transparent 72%),
      radial-gradient(ellipse 40% 45% at 52% 75%, rgba(255,159,10,.16), transparent 72%);
    opacity: var(--mx-glow, 1);
  }
  html body .hero > div:first-child { max-width: 1100px !important; margin-inline: auto; }
  html body .hero .kicker { font-size: 14px !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--mx-muted) !important; font-weight: 600; }
  html body .hero h1 {
    font-size: clamp(44px, 8.2vw, 112px) !important; line-height: 1.02 !important; letter-spacing: -.055em !important;
    font-weight: 700 !important; margin: 18px auto 24px !important; max-width: 12ch; text-wrap: balance;
    color: var(--mx-text) !important;
  }
  html body .hero h1 em {
    font-style: normal !important;
    background: linear-gradient(95deg, #ff9f0a 0%, #ff375f 38%, #bf5af2 68%, #0a84ff 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
  }
  html body .hero > div:first-child > p { font-size: clamp(18px, 2.2vw, 26px) !important; line-height: 1.35 !important; color: var(--mx-muted) !important; max-width: 36ch; margin-inline: auto !important; font-weight: 400; }

  /* barra di ricerca */
  html body .platform-search {
    margin: 36px auto 0 !important; max-width: 760px; text-align: left; border-radius: 22px !important; padding: 8px !important;
    background: color-mix(in srgb, var(--mx-card) 80%, transparent) !important;
    border: 1px solid var(--mx-line) !important; box-shadow: var(--mx-shadow) !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
  html body .platform-search button[type=submit], html body .platform-search .button, html body .platform-search button:last-of-type {
    border-radius: 980px !important; background: var(--mx-accent) !important; color: #fff !important; font-weight: 600 !important;
  }

  html body .platform-search form { background: transparent !important; }
  html body .platform-search .nx-picker, html body .platform-search select {
    background: var(--mx-card-soft) !important; color: var(--mx-text) !important; border: 0 !important; border-radius: 14px !important;
  }
  html body .platform-search input { color: var(--mx-text) !important; background: transparent !important; }
  html body .platform-search ~ *, html body .hero .quick-links button { }
  html body .hero button:not([type=submit]):not(.nx-picker) { background: var(--mx-card-soft) !important; color: var(--mx-text) !important; border: 0 !important; border-radius: 980px !important; }

  /* anteprima dashboard: entra scalando */
  html body .nexus-overview {
    border-radius: var(--mx-radius) !important; overflow: hidden; margin-top: 56px !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.35) !important; border: 1px solid var(--mx-line) !important;
    transform: perspective(1400px) rotateX(calc((1 - var(--mx-ov, 1)) * 14deg)) scale(calc(.9 + var(--mx-ov, 1) * .1));
    transform-origin: 50% 0; will-change: transform;
  }

  /* statistiche */
  html body .hero-aside {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; border: 0 !important;
    padding: clamp(48px, 8vw, 96px) 0 !important; margin: 0 !important; text-align: center;
  }
  html body .hero-aside > div { display: block !important; }
  html body .hero-aside strong {
    display: block; font-size: clamp(44px, 7vw, 88px) !important; letter-spacing: -.05em !important; font-weight: 700 !important;
    line-height: 1.05; color: var(--mx-text) !important; font-variant-numeric: tabular-nums;
  }
  html body .hero-aside span { color: var(--mx-muted) !important; font-size: clamp(13px, 1.4vw, 17px) !important; max-width: 24ch; margin-inline: auto; display: block; }

  /* ───────── sezioni a bande ───────── */
  html body main > .shell > .section, html body .section {
    padding: clamp(72px, 10vw, 140px) 0 !important; border: 0 !important; background: transparent !important;
  }
  html body .section-head, html body .section-head > div, html body .section-head h2, html body .press-section > h2, html body .assistance h2 { text-align: center !important; }
  html body .section-head { display: block !important; text-align: center; margin-bottom: clamp(36px, 6vw, 72px) !important; }
  html body .section-head h2, html body .press-section > h2, html body .assistance h2 {
    font-size: clamp(34px, 5.4vw, 72px) !important; line-height: 1.05 !important; letter-spacing: -.045em !important;
    font-weight: 700 !important; max-width: 18ch !important; margin: 14px auto 0 !important; text-wrap: balance;
  }
  html body .section-head p { max-width: 52ch !important; margin: 18px auto 0 !important; color: var(--mx-muted) !important; font-size: clamp(17px, 1.8vw, 22px) !important; }
  html body .section .kicker, html body .assistance .kicker, html body .press-section .kicker {
    color: var(--mx-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important;
  }
  html body .text-link, html body .arrow { color: var(--mx-link) !important; font-weight: 500 !important; }
  html body .text-link:hover { text-decoration: underline; }

  /* osservatori */
  html body .observatories { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(14px, 2vw, 24px) !important; border: 0 !important; }
  html body .obs-card, html body .obs-card + .obs-card {
    position: relative; overflow: hidden; border: 0 !important; border-radius: var(--mx-radius) !important;
    background: var(--mx-card-soft) !important; min-height: clamp(380px, 38vw, 520px) !important; padding: clamp(24px, 3vw, 40px) !important;
    box-shadow: none !important; transition: transform .5s var(--mx-ease), box-shadow .5s var(--mx-ease) !important;
  }
  html body .obs-card::before { display: none !important; }
  html body .obs-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(500px circle at var(--mx-x, 50%) var(--mx-y, 0%), color-mix(in srgb, var(--mx-text) 9%, transparent), transparent 60%);
    opacity: 0; transition: opacity .3s;
  }
  html body .obs-card:hover { transform: translateY(-8px) scale(1.01) !important; box-shadow: var(--mx-shadow) !important; }
  html body .obs-card:hover::after { opacity: 1; }
  html body .obs-card h3 { font-size: clamp(26px, 2.6vw, 38px) !important; letter-spacing: -.035em !important; font-weight: 700 !important; margin: 26px 0 12px !important; color: var(--mx-text) !important; }
  html body .obs-card p { color: var(--mx-muted) !important; font-size: clamp(15px, 1.3vw, 18px) !important; }

  /* ricerche pubblicate */
  html body .product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(14px, 2vw, 24px) !important; }
  html body .product-card {
    position: relative; border: 0 !important; border-radius: var(--mx-radius) !important; background: var(--mx-card-soft) !important;
    padding: clamp(22px, 2.6vw, 36px) !important; box-shadow: none !important; min-height: 0 !important;
    transition: transform .5s var(--mx-ease), box-shadow .5s var(--mx-ease) !important;
  }
  html body .product-card:hover { transform: translateY(-6px) !important; box-shadow: var(--mx-shadow) !important; }
  html body .product-card h3 { font-size: clamp(24px, 2.4vw, 34px) !important; letter-spacing: -.035em !important; font-weight: 700 !important; color: var(--mx-text) !important; }
  html body .product-card p { color: var(--mx-muted) !important; }
  html body .product-card .meta { color: var(--mx-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
  html body .product-card .card-live-data { border-radius: 20px !important; background: var(--mx-card) !important; border: 0 !important; }
  html body .product-card .card-live-data strong, html body .product-card [class*=metric] strong { color: var(--mx-accent) !important; letter-spacing: -.04em !important; }
  html body .button-link, html body .product-card a.button-link, html body .product-card .arrow {
    border-radius: 980px !important; padding: 11px 22px !important; background: var(--mx-accent) !important; color: #fff !important;
    font-weight: 600 !important; font-size: 15px !important; border: 0 !important; transition: background .2s, transform .2s !important;
  }
  html body .button-link:hover, html body .product-card .arrow:hover { background: var(--mx-accent-2) !important; transform: scale(1.03); }

  /* rassegna stampa: carosello con snap */
  html body .press-section { background: var(--mx-band) !important; border: 0 !important; box-shadow: 0 0 0 100vmax var(--mx-band); clip-path: inset(0 -100vmax); text-align: center; }
  html body .press-section > .press-intro { max-width: 54ch; margin: 18px auto 48px !important; color: var(--mx-muted) !important; font-size: clamp(16px, 1.6vw, 20px) !important; }
  html body .press-section > .press-grid {
    display: flex !important; gap: 20px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 28px !important;
    scrollbar-width: none; text-align: left; margin-inline: calc(-1 * var(--mx-bleed, 0px));
  }
  html body .press-section > .press-grid::-webkit-scrollbar { display: none; }
  html body .press-section > .press-grid > .press-card { flex: 0 0 min(380px, 82vw); scroll-snap-align: start; }
  html body .press-card {
    background: var(--mx-card) !important; border: 0 !important; border-radius: 24px !important; padding: 28px !important;
    box-shadow: none !important; transition: transform .4s var(--mx-ease), box-shadow .4s var(--mx-ease) !important;
  }
  html body .press-card:hover { transform: translateY(-5px); box-shadow: var(--mx-shadow) !important; }
  html body .press-logo { background: transparent !important; border-bottom: 0 !important; padding: 0 !important; height: auto !important; margin-bottom: 20px !important; }
  html body .press-more { text-align: left; }
  html body .press-more summary { display: inline-block; margin-top: 8px; color: var(--mx-link) !important; font-weight: 500; cursor: pointer; }
  html body .press-more[open] .press-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 24px; }

  /* assistenza */
  html body .assistance { padding-block: clamp(72px, 10vw, 140px) !important; text-align: center; }
  html body .help-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 48px; text-align: left; }
  html body .help-card { background: var(--mx-card-soft) !important; border: 0 !important; border-radius: 24px !important; padding: 28px !important; transition: transform .4s var(--mx-ease); }
  html body .help-card:hover { transform: translateY(-5px); }
  html body .help-number { font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 700 !important; letter-spacing: -.03em !important; color: var(--mx-text) !important; }
  html body .help-intro, html body .help-verified { color: var(--mx-muted) !important; }

  /* footer */
  html body .site-footer {
    background: var(--mx-band) !important; color: var(--mx-muted) !important; border: 0 !important; border-top: 1px solid var(--mx-line) !important;
    box-shadow: 0 0 0 100vmax var(--mx-band) !important; clip-path: inset(0 -100vmax); font-size: 12px !important; padding-block: 28px !important;
  }
  html body .site-footer a, html body .site-footer p, html body .site-footer .logo-copy, html body .site-footer small { color: var(--mx-muted) !important; }


  /* ───────── icone: tessere "app icon" e glifi ───────── */
  html body .mx-ico { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
  html body .obs-card .obs-icon {
    width: 64px !important; height: 64px !important; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important;
    border-radius: 29% !important; display: grid !important; place-items: center; color: #fff !important; position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--tone-a, #5ac8fa), var(--tone-b, #0a84ff)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--tone-b, #0a84ff) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12) !important;
    transition: transform .5s var(--mx-ease);
  }
  html body .obs-card .obs-icon::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(255,255,255,.28), transparent); pointer-events: none; }
  html body .obs-card:hover .obs-icon { transform: scale(1.08) rotate(-3deg); }
  html body .obs-card .obs-icon svg:not(.mx-ico) { display: none !important; }
  html body .obs-icon[data-tone=online]     { --tone-a: #ff9f0a; --tone-b: #ff375f; }
  html body .obs-icon[data-tone=dipendenze] { --tone-a: #63e6a1; --tone-b: #30b0c7; }
  html body .obs-icon[data-tone=giovani]    { --tone-a: #64d2ff; --tone-b: #5e5ce6; }
  html body .obs-icon[data-tone=economia]   { --tone-a: #ffd60a; --tone-b: #ff9f0a; }

  /* elenco aree della dashboard */
  html body .overview-rail button[data-area] { display: flex !important; align-items: center; gap: 10px; border-radius: 12px !important; }
  html body .overview-rail button[data-area] > span[aria-hidden] {
    width: 30px; height: 30px; border-radius: 28%; display: grid !important; place-items: center; flex-shrink: 0; color: #fff !important;
    background: linear-gradient(160deg, #8e8e93, #636366); box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  }
  html body .overview-rail button[data-area="Dipendenze"] > span { background: linear-gradient(160deg, #63e6a1, #30b0c7); }
  html body .overview-rail button[data-area="Gioco online"] > span { background: linear-gradient(160deg, #ff9f0a, #ff375f); }
  html body .overview-rail button[data-area="Disagio giovanile"] > span { background: linear-gradient(160deg, #64d2ff, #5e5ce6); }
  html body .overview-rail button[data-area="Economia"] > span { background: linear-gradient(160deg, #ffd60a, #ff9f0a); }

  html body .site-header .theme-toggle { display: inline-flex !important; align-items: center; gap: 7px; }
  html body .platform-search form > span .mx-ico { color: var(--mx-muted); }

  /* ───────── immagini: "stage" con sfondo sfumato, angoli continui e ombra morbida ───────── */
  html body .observer-illustration, html body .research-illustration {
    display: block; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain;
    border-radius: 22px !important; padding: clamp(12px, 2vw, 22px); box-sizing: border-box;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.14), transparent 60%),
      radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.12), transparent 60%),
      var(--mx-card) !important;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.10));
    transition: transform .6s var(--mx-ease), filter .6s var(--mx-ease) !important;
  }
  html body .obs-card:hover .observer-illustration, html body .product-card:hover .research-illustration { transform: scale(1.025); filter: drop-shadow(0 22px 34px rgba(0,0,0,.18)); }
  html:root[data-theme=dark] body .observer-illustration, html:root[data-theme=dark] body .research-illustration {
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.22), transparent 60%),
      radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.18), transparent 60%),
      #1c1c1e !important;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.5)) brightness(.92);
  }
  /* copertine dei PDF e anteprime: cornice "device" */
  html body img[src*="assets/covers/"], html body .cover-stage img, html body .preview-cover {
    border-radius: 18px !important; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 24px 48px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12) !important;
    transition: transform .6s var(--mx-ease), box-shadow .6s var(--mx-ease);
  }
  html body a:hover img[src*="assets/covers/"], html body .editorial-row:hover .cover-stage img { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-4px); }
  html body .cover-stage { background: transparent !important; }
  /* illustrazioni a tutta larghezza (visuals/platform) */
  html body img[src*="assets/visuals/"], html body img[src*="assets/platform/"], html body img[src*="assets/immersive/"] { border-radius: 24px; }


  /* ───────── correzioni di contrasto (mirate) ───────── */
  html body .help-card h3 { color: var(--mx-text) !important; }
  html body .help-card p, html body .help-card .help-hours { color: var(--mx-muted) !important; }
  html body .hero span:not(.kicker):not(.mx-tw):not(.mx-caret) { color: var(--mx-muted); }
  html body .youth-region-panel { background: var(--mx-card-soft) !important; border: 0 !important; border-radius: 24px !important; }
  html body .youth-region-panel, html body .youth-region-panel label, html body .youth-region-panel h3 { color: var(--mx-text) !important; }
  html body .youth-region-panel p { color: var(--mx-muted) !important; }
  html body .youth-region-panel .youth-status { color: var(--mx-accent) !important; }
  html body .reading-cards article, html body .reading-cards article * { color: #edf7ff !important; }
  html body .flow-steps button:not([aria-pressed=true]):not(.active) { color: #edf7ff !important; }
  html body .flow-steps button:not([aria-pressed=true]):not(.active) * { color: inherit !important; }


  /* testate delle pagine interne */
  html body .page-hero {
    background:
      radial-gradient(ellipse 55% 70% at 18% 0%, rgba(10,132,255,.28), transparent 70%),
      radial-gradient(ellipse 45% 60% at 92% 10%, rgba(191,90,242,.22), transparent 70%),
      #000 !important;
    border: 0 !important; padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 7vw, 90px) !important; color: #f5f5f7 !important;
  }
  html body .page-hero h1 { font-size: clamp(38px, 6.4vw, 84px) !important; letter-spacing: -.05em !important; line-height: 1.04 !important; font-weight: 700 !important; color: #f5f5f7 !important; text-wrap: balance; }
  html body .page-hero h1 em { font-style: normal; background: linear-gradient(95deg, #64d2ff, #bf5af2 60%, #ff375f) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
  html body .page-hero p, html body .page-hero .crumb, html body .page-hero .crumb a { color: #a1a1a6 !important; }
  html body .page-hero .kicker { color: #a1a1a6 !important; text-transform: none !important; letter-spacing: 0 !important; }


  /* larghezza piena: il vecchio CSS estendeva lo sfondo scuro dell'hero con un'ombra di 100vmax */
  html body .hero, html body main > .shell > .section:not(.press-section) { box-shadow: none !important; clip-path: none !important; }
  html body .shell { width: min(1320px, calc(100% - 48px)) !important; max-width: none !important; margin-inline: auto !important; }


  /* ───────── uniformità: ogni area dello stesso linguaggio ───────── */
  html body .section-head > div { margin-inline: auto !important; max-width: 100% !important; }
  html body .section-head h2, html body .section > h2, html body .topic-section > h2 { text-align: center; margin-inline: auto !important; }

  /* schede e contenitori: sfondo morbido, nessun bordo, raggio ampio */
  html body .registry-chart, html body .essential-details, html body .guide-card, html body .adm-table-wrap, html body .side-note,
  html body .topic, html body .report-quick, html body .report-takeaway, html body .report-kpi-panel, html body .metric,
  html body .stat-card, html body .city-detail, html body .youth-city-detail, html body .map-card {
    background: var(--mx-card-soft) !important; border: 0 !important; border-radius: 24px !important; box-shadow: none !important;
  }
  html body .guide-note { border: 0 !important; border-left: 0 !important; background: var(--mx-card-soft) !important; border-radius: 18px !important; padding: 16px 20px !important; }
  html body details > summary { cursor: pointer; font-weight: 600; list-style: none; }
  html body details > summary::-webkit-details-marker { display: none; }
  html body details > summary::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; border-right: 2px solid var(--mx-muted); border-bottom: 2px solid var(--mx-muted); transform: rotate(-45deg); transition: transform .3s var(--mx-ease); vertical-align: 2px; }
  html body details[open] > summary::before { transform: rotate(45deg); }

  /* controlli */
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]), html body select, html body textarea {
    font-family: inherit !important; background: var(--mx-card) !important; color: var(--mx-text) !important;
    border: 1px solid var(--mx-line) !important; border-radius: 12px !important; transition: border-color .2s, box-shadow .2s;
  }
  html body input:focus, html body select:focus, html body textarea:focus { outline: none !important; border-color: var(--mx-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-accent) 22%, transparent) !important; }
  html body :focus-visible { outline: 3px solid color-mix(in srgb, var(--mx-accent) 60%, transparent) !important; outline-offset: 3px !important; border-radius: 8px; }
  html body .filters button, html body [role=tab], html body .tabs button, html body .segmented button {
    border: 0 !important; border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important; color: var(--mx-text) !important;
    font-weight: 500 !important; transition: background .2s, color .2s, transform .2s;
  }
  html body .filters button:hover, html body [role=tab]:hover { background: color-mix(in srgb, var(--mx-text) 12%, transparent) !important; }
  html body .filters button.active, html body [role=tab][aria-selected=true], html body .tabs button.active, html body .segmented button.active { background: var(--mx-accent) !important; color: #fff !important; }
  html body button.report-kpi, html body .report-kpi { border: 0 !important; border-radius: 18px !important; }

  /* tabelle */
  html body table { border-collapse: separate !important; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
  html body table th { font-size: 12px !important; font-weight: 600 !important; color: var(--mx-muted) !important; text-transform: none !important; letter-spacing: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--mx-line) !important; }
  html body table td { border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--mx-line) 55%, transparent) !important; }
  html body table tbody tr { transition: background .2s; }
  html body table tbody tr:hover { background: color-mix(in srgb, var(--mx-text) 4%, transparent); }

  /* grafici: barre e tracce arrotondate, palette di sistema */
  html body [class*=bar-track], html body .bar, html body .q2-track, html body .track { border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 9%, transparent) !important; overflow: hidden; }
  html body [class*=bar-track] i, html body .bar i, html body .q2-track i { border-radius: 980px !important; background: linear-gradient(90deg, #64d2ff, #0a84ff) !important; }
  html body svg text { font-family: var(--mx-font) !important; }

  /* anteprima / dialoghi */
  html body dialog { border: 0 !important; border-radius: 28px !important; background: var(--mx-card) !important; color: var(--mx-text) !important; box-shadow: 0 40px 100px rgba(0,0,0,.35) !important; padding: 0 !important; overflow: hidden; }
  html body dialog::backdrop { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

  /* righe dell'archivio */
  html body .editorial-row { border: 0 !important; border-radius: var(--mx-radius) !important; background: var(--mx-card-soft) !important; padding: clamp(16px, 2.4vw, 28px) !important; margin-bottom: 18px; transition: transform .5s var(--mx-ease), box-shadow .5s var(--mx-ease); }
  html body .editorial-row:hover { transform: translateY(-4px); box-shadow: var(--mx-shadow); }
  html body .editorial-row h2 { letter-spacing: -.035em !important; font-weight: 700 !important; }
  html body .row-arrow { color: var(--mx-accent) !important; }

  html body .mx-card { border: 0 !important; border-radius: 24px !important; box-shadow: none !important; }
  html body .mx-card.mx-card-soft { background-color: var(--mx-card-soft) !important; }


  /* mappa dei giovani */
  html body #youth-map canvas { filter: drop-shadow(0 28px 26px rgba(0,0,0,.20)); }
  html body .youth-map-wrap { background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, #5e5ce6 9%, transparent), transparent 75%) !important; border: 0 !important; }
  html body .youth-map-top, html body .youth-map-bottom, html body .youth-map-bottom span { color: var(--mx-muted) !important; letter-spacing: 0 !important; text-transform: none !important; }
  html body .youth-map-top button, html body #youth-motion { border: 0 !important; border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 8%, transparent) !important; color: var(--mx-text) !important; }
  html body .youth-map-bottom i { background: #5e5ce6 !important; border-radius: 50% !important; }
  html body #youth-tooltip { background: color-mix(in srgb, var(--mx-card) 88%, transparent) !important; color: var(--mx-text) !important; border-radius: 12px !important; box-shadow: var(--mx-shadow); font-weight: 600; }
  html body #youth-open-city { background: #5e5ce6 !important; color: #fff !important; border-radius: 980px !important; }
  html body .youth-city-detail { max-width: none !important; padding: clamp(20px, 3vw, 36px) !important; border: 0 !important; }
  html body .youth-city-detail p, html body .youth-city-detail h2, html body .youth-city-detail .kicker { max-width: 100%; overflow-wrap: anywhere; }
  html body .youth-report-status { border: 0 !important; background: color-mix(in srgb, var(--mx-text) 8%, transparent) !important; border-radius: 980px !important; color: var(--mx-muted) !important; }


  /* componenti delle pubblicazioni */
  html body .topic-navigation { border: 0 !important; background: var(--mx-card-soft) !important; border-radius: 20px !important; padding: 10px !important; }
  html body .topic-navigation a { border: 0 !important; border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important; color: var(--mx-text) !important; padding: 7px 14px !important; font-weight: 500; transition: background .2s; }
  html body .topic-navigation a:hover { background: color-mix(in srgb, var(--mx-accent) 16%, transparent) !important; }
  html body .report-readout { border: 0 !important; border-radius: 16px !important; background: color-mix(in srgb, var(--mx-accent) 8%, var(--mx-card-soft)) !important; box-shadow: inset 3px 0 0 var(--mx-accent) !important; padding: 14px 18px !important; }
  html body .compare-values { border-top-color: var(--mx-line) !important; }
  html body :where(main button) { border-radius: 14px !important; }
  html body .nx-picker { border: 0 !important; border-radius: 12px !important; background: var(--mx-card-soft) !important; color: var(--mx-text) !important; }
  html body :where(main a.text-link, main a.arrow) { border-radius: 6px; }
  html body .chart-tabs, html body .workspace-nav { border: 0 !important; }


  /* riquadri scuri: grafite neutro (non più blu petrolio) */
  html body .reading-cards article { background: #1d1d1f !important; border: 0 !important; border-radius: 22px !important; padding: 22px !important; }
  html body .flow-steps button:not([aria-pressed=true]):not(.active) { background: #1d1d1f !important; border: 0 !important; border-radius: 20px !important; }
  html body .flow-steps button[aria-pressed=true], html body .flow-steps button.active { background: var(--mx-accent) !important; border: 0 !important; border-radius: 20px !important; color: #fff !important; }


  /* ordine uniforme dell'intestazione su tutte le pagine */
  html body .site-header .header-inner > .logo { order: 0; }
  html body .site-header .header-inner > .site-nav { order: 1; margin-left: auto !important; }
  html body .site-header .header-inner > .language-control { order: 2; }
  html body .site-header .header-inner > .menu-toggle { order: 3; }
  html body .site-header .header-inner > .theme-toggle { order: 4; }
  html body .site-header .header-inner { justify-content: flex-start !important; }


  /* ───────── anteprima dashboard (prima scheda): widget in stile Apple ───────── */
  html body .nexus-overview {
    display: block !important; background: var(--mx-card) !important; border: 1px solid color-mix(in srgb, var(--mx-line) 70%, transparent) !important;
    border-radius: 32px !important; overflow: hidden; text-align: left; color: var(--mx-text) !important;
  }
  html body .overview-rail {
    display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 6px !important; width: auto !important;
    padding: 14px 18px !important; background: color-mix(in srgb, var(--mx-text) 4%, transparent) !important; border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent) !important; border-radius: 0 !important;
  }
  html body .overview-rail > strong {
    width: 32px; height: 32px; border-radius: 29%; display: grid; place-items: center; font-size: 11px !important; letter-spacing: 0 !important; margin: 0 8px 0 0 !important;
    color: #fff !important; background: linear-gradient(160deg, #64d2ff, #0a84ff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(10,132,255,.35);
  }
  html body .overview-rail > button {
    display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; margin: 0 !important; padding: 5px 14px 5px 6px !important;
    border: 0 !important; border-radius: 980px !important; background: transparent !important; color: var(--mx-muted) !important; font-size: 13px !important; font-weight: 500 !important; text-align: left;
    transition: background .25s var(--mx-ease), color .25s, box-shadow .25s;
  }
  html body .overview-rail > button:hover { background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important; color: var(--mx-text) !important; }
  html body .overview-rail > button[aria-pressed=true] { background: var(--mx-card) !important; color: var(--mx-text) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--mx-line) 80%, transparent) !important; }
  html body .overview-rail > a { margin-left: auto !important; color: var(--mx-link) !important; font-size: 13px !important; font-weight: 500; padding: 6px 10px; border-radius: 980px; }
  html body .overview-rail > a:hover { background: color-mix(in srgb, var(--mx-accent) 10%, transparent); }

  html body .overview-main { padding: clamp(20px, 3.2vw, 36px) !important; background: transparent !important; }
  html body .overview-heading { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: clamp(18px, 2.6vw, 30px) !important; border: 0 !important; }
  html body .overview-heading small { color: var(--mx-muted) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; font-weight: 600; }
  html body .overview-heading h2 { font-size: clamp(28px, 3.6vw, 44px) !important; letter-spacing: -.045em !important; font-weight: 700 !important; color: var(--mx-text) !important; margin: 4px 0 0 !important; }
  html body .overview-heading label { color: var(--mx-muted) !important; font-size: 12px !important; display: grid; gap: 4px; justify-items: end; }
  html body .overview-heading .nx-picker { border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important; padding: 8px 16px !important; min-width: 190px; }

  html body .overview-body { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(14px, 2vw, 24px) !important; align-items: stretch; }
  html body .overview-stat {
    position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: space-between; gap: 16px;
    padding: clamp(20px, 2.6vw, 30px) !important; border: 0 !important; border-radius: 26px !important;
    background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, #0a84ff 16%, transparent), transparent 62%), radial-gradient(110% 110% at 100% 100%, color-mix(in srgb, #bf5af2 14%, transparent), transparent 62%), var(--mx-card-soft) !important;
  }
  html body .overview-stat strong {
    display: block; font-size: clamp(48px, 6.4vw, 84px) !important; font-weight: 700 !important; letter-spacing: -.055em !important; line-height: 1; font-variant-numeric: tabular-nums;
    background: linear-gradient(95deg, #0a84ff, #5e5ce6 60%, #bf5af2) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
  }
  html body .overview-stat span { color: var(--mx-muted) !important; font-size: 15px !important; }
  html body .overview-stat img { width: 100%; height: auto; max-height: 150px; object-fit: contain; border-radius: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; filter: drop-shadow(0 12px 16px rgba(10,132,255,.25)); }

  html body .overview-data { padding: clamp(6px, 1vw, 12px) 0 0 !important; border: 0 !important; background: transparent !important; }
  html body .overview-data h3 { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--mx-muted) !important; margin: 0 0 14px !important; }
  html body .overview-bar { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) 64px; align-items: center; gap: 14px; padding: 9px 0 !important; border: 0 !important; }
  html body .overview-bar > span { color: var(--mx-text) !important; font-size: 14px !important; font-weight: 500; }
  html body .overview-bar > i { display: block; height: 12px; border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 9%, transparent) !important; overflow: hidden; }
  html body .overview-bar > i > b { display: block; height: 100%; border-radius: 980px !important; background: linear-gradient(90deg, #64d2ff, #0a84ff) !important; }
  html body .overview-bar:nth-of-type(2) > i > b { background: linear-gradient(90deg, #bf9bff, #5e5ce6) !important; }
  html body .overview-bar:nth-of-type(3) > i > b { background: linear-gradient(90deg, #ffd60a, #ff9f0a) !important; }
  html body .overview-bar > strong { color: var(--mx-text) !important; font-size: 14px !important; font-variant-numeric: tabular-nums; text-align: right; }
  html body .overview-note { margin-top: 14px !important; padding: 12px 16px !important; border: 0 !important; border-radius: 16px !important; background: color-mix(in srgb, var(--mx-text) 5%, transparent) !important; color: var(--mx-muted) !important; font-size: 13px !important; }
  html body .overview-data > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 11px 22px; border-radius: 980px; background: var(--mx-accent) !important; color: #fff !important; font-weight: 600; font-size: 15px; transition: transform .25s var(--mx-ease), filter .2s; }
  html body .overview-data > a:hover { transform: scale(1.03); filter: brightness(1.08); }
  @media (max-width: 860px) { html body .overview-body { grid-template-columns: 1fr !important; } html body .overview-rail > a { margin-left: 0 !important; } }

  /* ───────── spigoli: tutto arrotondato ───────── */
  html body .report-workspace-head, html body .flow-explanation, html body details, html body .youth-map-wrap, html body .overview-rail, html body caption { border-radius: 24px !important; }
  html body details { background: var(--mx-card-soft) !important; border: 0 !important; padding: 18px 22px !important; margin-block: 10px; }
  html body iframe#atlas-frame { border-radius: 32px !important; border: 0 !important; box-shadow: var(--mx-shadow); }
  html body main img:not(.press-logo img):not([class*=illustration]):not([src*=italia]) { border-radius: 16px; }
  html body .report-workspace-head { background: var(--mx-card-soft) !important; border: 0 !important; padding: clamp(18px, 2.6vw, 30px) !important; }
  html body .flow-explanation { background: var(--mx-card-soft) !important; border: 0 !important; padding: 22px !important; }

  /* ───────── bande a tutta larghezza (stile Apple) ───────── */
  html body .mx-band { background: var(--mx-band) !important; box-shadow: 0 0 0 100vmax var(--mx-band) !important; clip-path: inset(0 -100vmax) !important; --mx-card-soft: var(--mx-card); }
  html body .assistance { background: #000 !important; color: #f5f5f7 !important; border-radius: 0 !important; box-shadow: 0 0 0 100vmax #000 !important; clip-path: inset(0 -100vmax) !important; max-width: none !important; }
  html body .assistance h2, html body .assistance .help-intro, html body .assistance .kicker, html body .assistance .help-verified { color: #f5f5f7 !important; }
  html body .assistance .help-card { background: #1d1d1f !important; }
  html body .assistance .help-card h3, html body .assistance .help-number { color: #f5f5f7 !important; }
  html body .assistance .help-card p, html body .assistance .help-hours { color: #a1a1a6 !important; }


  /* rifiniture anteprima */
  html body .overview-stat > div { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
  html body .overview-rail button[data-area="Dipendenze"] > span[aria-hidden] { background: linear-gradient(160deg, #63e6a1, #30b0c7) !important; }
  html body .overview-rail button[data-area="Gioco online"] > span[aria-hidden] { background: linear-gradient(160deg, #ff9f0a, #ff375f) !important; }
  html body .overview-rail button[data-area="Disagio giovanile"] > span[aria-hidden] { background: linear-gradient(160deg, #64d2ff, #5e5ce6) !important; }
  html body .overview-rail button[data-area="Economia"] > span[aria-hidden] { background: linear-gradient(160deg, #ffd60a, #ff9f0a) !important; }
  html body .overview-rail > button > span[aria-hidden] { width: 26px !important; height: 26px !important; }
  html body .hero-aside > div { display: block !important; text-align: center !important; grid-template-columns: none !important; }
  html body .hero-aside strong { text-align: center !important; margin: 0 auto !important;
    background: linear-gradient(95deg, #1d1d1f, #6e6e73) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
  html:root[data-theme=dark] body .hero-aside strong { background: linear-gradient(95deg, #fff, #a1a1a6) !important; -webkit-background-clip: text !important; background-clip: text !important; }
  html body .hero-aside span { text-align: center !important; margin-inline: auto !important; display: block !important; }


  /* ───────── fasce a tutta larghezza (pseudo-elemento da 100vw: funziona a ogni risoluzione) ───────── */
  html body .mx-band, html body .press-section, html body .assistance, html body .site-footer {
    position: relative !important; isolation: isolate; box-shadow: none !important; clip-path: none !important;
  }
  html body .mx-band, html body .press-section, html body .site-footer { background: transparent !important; }
  html body .mx-band::before, html body .press-section::before, html body .assistance::before, html body .site-footer::before {
    content: "" !important; position: absolute !important; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; display: block !important;
    background: var(--mx-band); border: 0;
  }
  html body .assistance::before { background: #000; }
  html body .site-footer::before { border-top: 1px solid var(--mx-line); }
  html body .assistance { background: transparent !important; }

  /* ───────── rassegna stampa: carosello stile Apple ───────── */
  html body .press-section { text-align: center; }
  html body .press-section .kicker { display: block; margin-bottom: 8px; }
  html body .press-section > .press-grid {
    --mx-bleed-x: calc(50vw - 50%);
    display: flex !important; gap: clamp(14px, 1.6vw, 22px) !important; overflow-x: auto !important; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * var(--mx-bleed-x)) !important; padding: 12px var(--mx-bleed-x) 34px !important; scroll-padding-inline: var(--mx-bleed-x);
    text-align: left;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  }
  html body .press-section > .press-grid > .press-card {
    flex: 0 0 min(400px, 82vw) !important; scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px;
    background: var(--mx-card) !important; border: 0 !important; border-radius: 30px !important; padding: 26px !important;
    min-height: 330px; opacity: 1 !important; transform: none; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 28px rgba(0,0,0,.06) !important;
    transition: transform .5s var(--mx-ease), box-shadow .5s var(--mx-ease) !important;
  }
  html body .press-section > .press-grid > .press-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 24px 48px rgba(0,0,0,.14) !important; }
  html body .press-card .press-logo { height: 64px !important; display: flex; align-items: center; padding: 0 16px !important; margin: 0 !important; border-radius: 18px !important; background: var(--mx-card-soft) !important; border: 0 !important; }
  html:root[data-theme=dark] body .press-card .press-logo { background: #f5f5f7 !important; }
  html body .press-card .press-logo img { max-height: 34px !important; max-width: 70% !important; object-fit: contain; border-radius: 0 !important; }
  html body .press-card .press-story { display: flex; flex-direction: column; gap: 10px; flex: 1; }
  html body .press-card .press-meta { color: var(--mx-muted) !important; font-size: 12px !important; letter-spacing: 0 !important; margin: 0 !important; }
  html body .press-card h3 { font-size: clamp(18px, 1.5vw, 21px) !important; line-height: 1.25 !important; letter-spacing: -.025em !important; font-weight: 700 !important; margin: 0 !important; }
  html body .press-card h3 a { color: var(--mx-text) !important; }
  html body .press-card .press-story > p:not(.press-meta) { color: var(--mx-muted) !important; font-size: 14px !important; margin: 0 !important; }
  html body .press-card .text-link { margin-top: auto; align-self: flex-start; display: inline-flex; padding: 8px 16px; border-radius: 980px; background: color-mix(in srgb, var(--mx-accent) 10%, transparent); color: var(--mx-link) !important; font-weight: 600 !important; font-size: 13px !important; transition: background .2s; }
  html body .press-card .text-link:hover { background: color-mix(in srgb, var(--mx-accent) 20%, transparent); text-decoration: none; }

  /* frecce */
  html body .mx-carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin: -6px 0 18px; }
  html body .mx-carousel-nav button {
    width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--mx-text);
    background: color-mix(in srgb, var(--mx-text) 9%, transparent); transition: background .2s, transform .2s, opacity .2s;
  }
  html body .mx-carousel-nav button:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-text) 16%, transparent); transform: scale(1.06); }
  html body .mx-carousel-nav button:disabled { opacity: .35; cursor: default; }
  html body .mx-carousel-nav svg { width: 18px; height: 18px; }

  html body .press-more { text-align: center; }
  html body .press-more > summary { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 980px; background: color-mix(in srgb, var(--mx-text) 8%, transparent); color: var(--mx-text) !important; font-weight: 600; }
  html body .press-more[open] > .press-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 28px 0 0 !important; padding: 0 !important; overflow: visible !important; -webkit-mask-image: none; mask-image: none; text-align: left; }
  html body .press-more[open] > .press-grid > .press-card { flex: initial !important; opacity: 1 !important; }
  html body .press-note { max-width: 70ch; margin: 28px auto 0 !important; color: var(--mx-muted) !important; font-size: 12px !important; }


  html body .press-more { background: transparent !important; padding: 0 !important; margin: 8px 0 0 !important; }


  /* le tre statistiche: gruppo centrato rispetto alla pagina */
  html body .hero-aside { width: 100% !important; max-width: 1100px !important; margin-inline: auto !important; justify-self: center; justify-items: center; }
  html body .hero-aside > div { width: 100%; }


  /* menu: nessuna linea sotto la voce attiva (solo la pillola) */
  html body .site-nav a::after, html body .site-nav a::before, html body .site-nav a.active::after, html body .site-nav a[aria-current=page]::after, html body .site-header nav a::after { content: none !important; display: none !important; }
  html body .site-nav a, html body .site-nav a.active, html body .site-nav a[aria-current=page] { border-bottom: 0 !important; box-shadow: none !important; text-decoration: none !important; background-image: none !important; }


  /* il campo del chatbot ha il proprio stile (pillola): non ereditare quello dei campi del sito */
  html body .nxc-root textarea, html body .nxc-root textarea:focus { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; padding: 8px 0 !important; outline: none !important; }
  html body .nxc-root :focus-visible { border-radius: inherit; }
  html body .nxc-root .nxc-launcher, html body .nxc-root .nxc-send, html body .nxc-root .nxc-close, html body .nxc-root .nxc-reset { text-decoration: none; }


  /* ═════════ MOBILE (telefono) ═════════ */
  @media (max-width: 700px) {
    html body { font-size: 16px; }
    /* intestazione: logo che cede spazio, controlli compatti, nessuna sovrapposizione */
    html body .site-header .header-inner { gap: 6px !important; padding-inline: 12px !important; }
    html body .site-header .logo { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; font-size: 12px !important; margin-right: 0 !important; }
    html body .site-header .logo span { color: inherit; }
    html body .site-header .language-control { margin-left: 0 !important; flex: 0 0 auto; }
    html body .site-header .nx-picker { padding: 0 8px !important; gap: 2px !important; min-width: 0 !important; }
    html body .site-header .theme-toggle { padding: 0 !important; width: 34px; min-width: 34px; justify-content: center; font-size: 0 !important; gap: 0 !important; }
    html body .site-header .theme-toggle .mx-ico { width: 17px; height: 17px; }
    html body .site-header .theme-toggle span { display: none !important; }
    html body .site-header .menu-toggle { flex: 0 0 auto; }
    html body .site-header .site-nav.open, html body .site-header .site-nav[data-open=true], html body .site-nav.is-open {
      display: flex !important; position: fixed; top: var(--mx-nav-h); left: 0; right: 0; flex-direction: column; gap: 2px !important; padding: 10px 14px 18px !important; margin: 0 !important;
      background: color-mix(in srgb, var(--mx-bg) 94%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
      border-bottom: 1px solid var(--mx-line); z-index: 8999; max-height: calc(100dvh - var(--mx-nav-h)); overflow: auto;
    }
    html body .site-header .site-nav.open a, html body .site-header .site-nav[data-open=true] a, html body .site-nav.is-open a { padding: 14px 12px !important; font-size: 17px !important; border-radius: 14px !important; }

    /* chatbot: pulsante tondo, non copre i contenuti */
    .nxc-root { right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
    .nxc-launcher { width: 54px; height: 54px; min-height: 0 !important; padding: 0 !important; justify-content: center; gap: 0 !important; border-radius: 50% !important; }
    .nxc-launcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nxc-launcher .nxc-spark { width: 24px; height: 24px; }

    /* ritmo verticale più stretto */
    html body main > .shell > .section, html body .section { padding: clamp(44px, 12vw, 64px) 0 !important; }
    html body .hero { padding-top: 36px !important; }
    html body .hero h1 { font-size: clamp(34px, 10.5vw, 48px) !important; margin: 12px auto 16px !important; }
    html body .hero > div:first-child > p { font-size: 17px !important; }
    html body .section-head h2, html body .press-section > h2, html body .assistance h2 { font-size: clamp(28px, 8.4vw, 40px) !important; }
    html body .section-head { margin-bottom: 28px !important; }
    html body .hero-aside { padding: 34px 0 !important; gap: 28px !important; }
    html body .hero-aside strong { font-size: clamp(44px, 14vw, 60px) !important; }

    /* ricerca */
    html body .platform-search { border-radius: 20px !important; padding: 6px !important; margin-top: 24px !important; }

    /* anteprima dashboard */
    html body .nexus-overview { border-radius: 24px !important; margin-top: 32px !important; }
    html body .overview-rail { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 10px 12px !important; gap: 4px !important; -webkit-overflow-scrolling: touch; }
    html body .overview-rail::-webkit-scrollbar { display: none; }
    html body .overview-rail > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
    html body .overview-rail > a { display: none !important; }
    html body .overview-main { padding: 18px 16px 22px !important; }
    html body .overview-heading { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    html body .overview-heading label { justify-items: stretch !important; width: 100%; }
    html body .overview-heading .nx-picker { width: 100% !important; min-width: 0 !important; justify-content: space-between; }
    html body .overview-heading h2 { font-size: 30px !important; }
    html body .overview-body { grid-template-columns: 1fr !important; }
    html body .overview-bar { grid-template-columns: 64px minmax(0, 1fr) 54px !important; gap: 10px !important; }

    /* schede e carosello */
    html body .obs-card, html body .obs-card + .obs-card { min-height: 0 !important; padding: 22px !important; border-radius: 26px !important; }
    html body .product-card { padding: 20px !important; border-radius: 26px !important; }
    html body .press-section > .press-grid > .press-card { flex-basis: 86vw !important; min-height: 0 !important; }
    html body .mx-carousel-nav { display: none; }
    html body .help-grid { grid-template-columns: 1fr !important; }
    html body .help-card { padding: 22px !important; }
    html body .site-footer { flex-direction: column; align-items: flex-start !important; gap: 12px; }

    /* pagine interne */
    html body .page-hero { padding: 40px 0 36px !important; }
    html body .page-hero h1 { font-size: clamp(32px, 9.4vw, 44px) !important; }
    html body .page-hero .shell { display: block !important; }
    html body .page-hero [class*=illustration], html body .page-hero img { max-width: 100%; height: auto; margin-top: 22px; }
    html body .topic-navigation { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
    html body .topic-navigation a { flex: 0 0 auto; white-space: nowrap; }
    html body .mx-card, html body details, html body .registry-chart, html body .guide-card { border-radius: 22px !important; }
    html body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html body .report-kpis, html body .metrics { grid-template-columns: 1fr 1fr !important; }
    html body .editorial-row { display: block !important; }
  }


  @media (max-width: 700px) {
    html body .platform-search form { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 6px !important; }
    html body .platform-search form > span[aria-hidden], html body .platform-search form > .search-icon { display: none !important; }
    html body .platform-search .nx-picker, html body .platform-search select, html body .platform-search input { width: 100% !important; min-height: 46px; }
    html body .platform-search button[type=submit] { width: 100% !important; min-height: 48px; }
    html body .platform-search ~ div, html body .hero .quick-links { justify-content: center; }
  }


  @media (max-width: 700px) {
    html body .topic-navigation { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; overflow-x: auto; padding: 12px 14px !important; border-radius: 22px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    html body .topic-navigation::-webkit-scrollbar { display: none; }
    html body .topic-navigation > * { flex: 0 0 auto !important; align-self: center !important; white-space: nowrap !important; }
    html body .topic-navigation > :not(a) { display: none !important; }
    html body .topic-navigation a { height: auto !important; min-height: 0 !important; line-height: 1.2 !important; padding: 9px 14px !important; }
    html body .report-kpi { min-height: 0 !important; padding: 16px !important; }
    html body .report-kpi strong { font-size: clamp(22px, 7vw, 30px) !important; }
    html body .flow-steps { grid-template-columns: 1fr !important; }
    html body .reading-cards { grid-template-columns: 1fr !important; }
    html body .report-chart-plot, html body .publication-chart-content { padding-inline: 14px !important; }
    html body .report-chart-plot svg, html body .report-chart-plot canvas { max-width: 100%; height: auto; }
    html body select, html body .nx-picker { max-width: 100%; }
  }


  /* stato selezionato: il testo segue sempre il colore, mai un riempimento residuo del vecchio stile */
  html body [aria-pressed=true], html body [aria-selected=true], html body .active, html body .is-active, html body .selected { -webkit-text-fill-color: currentColor; }
  html body .report-kpi[aria-pressed=true], html body .report-kpi[aria-pressed=true] * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
  html body .report-kpi[aria-pressed=true] { background: var(--mx-accent) !important; }
  html body .report-kpi[aria-pressed=false], html body .report-kpi[aria-pressed=false] * { -webkit-text-fill-color: currentColor !important; }
  html body .topic-navigation a { -webkit-text-fill-color: currentColor !important; }
  html body .flow-steps button[aria-pressed=true], html body .flow-steps button[aria-pressed=true] * { color: #fff !important; -webkit-text-fill-color: #fff !important; }


  /* intestazione dei report: testo scuro su fondo morbido, senza dipendere dalla correzione automatica */
  html body .report-workspace-head, html body .report-workspace-head h1, html body .report-workspace-head h2, html body .report-workspace-head strong { color: var(--mx-text) !important; -webkit-text-fill-color: var(--mx-text) !important; }
  html body .report-workspace-head p, html body .report-workspace-head small, html body .report-workspace-head .kicker, html body .report-workspace-head .crumb, html body .report-workspace-head .crumb a, html body .report-workspace-head span { color: var(--mx-muted) !important; -webkit-text-fill-color: var(--mx-muted) !important; }
  html body .report-workspace-head a { color: var(--mx-link) !important; -webkit-text-fill-color: var(--mx-link) !important; }
  html body .report-workspace-head .workspace-nav a { color: var(--mx-text) !important; -webkit-text-fill-color: var(--mx-text) !important; }


  /* ───────── "Le ricerche pubblicate": tessere stile Apple (alternanza chiaro / scuro) ───────── */
  html body .section-head > a.text-link {
    display: inline-flex !important; align-items: center; gap: 6px; margin: 22px auto 0 !important; padding: 10px 20px; border-radius: 980px;
    background: color-mix(in srgb, var(--mx-text) 8%, transparent); color: var(--mx-text) !important; font-weight: 600 !important; font-size: 15px !important;
    transition: background .25s, transform .25s var(--mx-ease);
  }
  html body .section-head > a.text-link:hover { background: color-mix(in srgb, var(--mx-accent) 16%, transparent); transform: scale(1.03); text-decoration: none; }
  html body .section-head { display: flex !important; flex-direction: column; align-items: center; }

  html body .product-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(14px, 1.6vw, 22px) !important; align-items: stretch; }
  @media (max-width: 1100px) { html body .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 700px)  { html body .product-grid { grid-template-columns: 1fr !important; } }

  html body .product-grid .product-card {
    display: flex !important; flex-direction: column; gap: 14px; padding: 0 0 26px !important; overflow: hidden; border-radius: 32px !important;
    background: var(--mx-card-soft) !important; color: var(--mx-text);
  }
  html body .product-grid .product-card > :not(img) { margin-inline: clamp(20px, 2vw, 28px) !important; }
  html body .product-grid .product-card > img.research-illustration {
    width: 100% !important; height: auto; border-radius: 0 !important; filter: none !important; margin: 0 0 6px !important;
    padding: clamp(14px, 2vw, 26px) !important; background: radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.16), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.14), transparent 60%), var(--mx-card) !important;
  }
  html body .product-grid .product-card:hover > img.research-illustration { transform: none; }
  html body .product-grid .product-card .meta { align-self: flex-start; padding: 5px 12px; border-radius: 980px; background: color-mix(in srgb, var(--mx-text) 7%, transparent); font-size: 12px !important; font-weight: 600; margin-top: 8px !important; }
  html body .product-grid .product-card h3 { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; letter-spacing: -.035em !important; margin: 2px 28px 0 !important; margin-inline: clamp(20px, 2vw, 28px) !important; }
  html body .product-grid .product-card h3 a { color: inherit !important; }

  html body .product-grid .card-live-data { background: color-mix(in srgb, var(--mx-text) 4.5%, transparent) !important; border-radius: 24px !important; padding: 16px !important; border: 0 !important; display: grid; gap: 8px; }
  html body .product-grid .card-live-data label { color: var(--mx-muted) !important; font-size: 12px !important; display: grid; gap: 6px; }
  html body .product-grid .card-live-data .nx-picker { border-radius: 980px !important; background: var(--mx-card) !important; padding: 9px 16px !important; font-size: 14px !important; font-weight: 500; justify-content: space-between; width: 100%; }
  html body .product-grid .card-live-value { display: grid; gap: 2px; padding: 6px 4px 2px; }
  html body .product-grid .card-live-value strong {
    font-size: clamp(40px, 4.2vw, 58px) !important; line-height: 1.02; letter-spacing: -.05em !important; font-weight: 700 !important; font-variant-numeric: tabular-nums;
    background: linear-gradient(95deg, #0a84ff, #5e5ce6 60%, #bf5af2) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
  }
  html body .product-grid .card-live-value span { color: var(--mx-muted) !important; font-size: 14px !important; }
  html body .product-grid .card-live-data small { color: var(--mx-muted) !important; font-size: 12px !important; padding-inline: 4px; }
  html body .product-grid .product-card > p { color: var(--mx-muted) !important; font-size: 15px !important; line-height: 1.5; flex: 1; margin-bottom: 4px !important; }
  html body .product-grid .product-card > a.arrow { align-self: flex-start; margin-top: 4px !important; }

  /* tessere scure: ritmo "a scacchiera" come nelle pagine prodotto Apple */
  html body .product-grid .product-card:nth-child(even) { background: #1d1d1f !important; color: #f5f5f7; }
  html:root[data-theme=dark] body .product-grid .product-card:nth-child(even) { background: #2c2c2e !important; }
  html body .product-grid .product-card:nth-child(even) h3, html body .product-grid .product-card:nth-child(even) h3 a { color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
  html body .product-grid .product-card:nth-child(even) > p, html body .product-grid .product-card:nth-child(even) .card-live-value span, html body .product-grid .product-card:nth-child(even) .card-live-data small, html body .product-grid .product-card:nth-child(even) .card-live-data label { color: #a1a1a6 !important; -webkit-text-fill-color: #a1a1a6 !important; }
  html body .product-grid .product-card:nth-child(even) .meta { background: rgba(255,255,255,.12) !important; color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
  html body .product-grid .product-card:nth-child(even) .card-live-data { background: rgba(255,255,255,.07) !important; }
  html body .product-grid .product-card:nth-child(even) .card-live-data .nx-picker { background: rgba(255,255,255,.12) !important; color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
  html body .product-grid .product-card:nth-child(even) .card-live-value strong { background: linear-gradient(95deg, #64d2ff, #bf9bff 60%, #ff9ecb) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
  html body .product-grid .product-card:nth-child(even) > img.research-illustration { background: radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.28), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.24), transparent 60%), #2c2c2e !important; }
  html body .product-grid .product-card:nth-child(even) > a.arrow { background: #fff !important; color: #1d1d1f !important; -webkit-text-fill-color: #1d1d1f !important; }


  /* ═════════ DASHBOARD: sistema dei grafici in stile Apple (vale per ogni report) ═════════ */
  html body .report-chart-plot, html body .publication-chart-content > .report-chart-plot {
    background: var(--mx-card-soft) !important; border: 0 !important; border-radius: 30px !important; padding: clamp(18px, 2.6vw, 34px) !important; box-shadow: none !important;
  }
  html body .report-chart-plot .chart-axis, html body .report-chart-plot > p, html body .graph-tools + p { color: var(--mx-muted) !important; font-size: 13px !important; letter-spacing: 0 !important; }
  html body .report-chart-note { color: var(--mx-muted) !important; font-size: 13px !important; max-width: 70ch; }

  /* barre orizzontali: etichetta | traccia | valore */
  html body .report-data-row {
    display: grid !important; grid-template-columns: minmax(70px, 130px) minmax(0, 1fr) minmax(54px, auto); align-items: center; gap: 16px;
    width: 100%; padding: 10px 12px !important; margin: 2px 0; border: 0 !important; border-radius: 18px !important; background: transparent !important;
    text-align: left; cursor: pointer; color: var(--mx-text) !important; transition: background .25s var(--mx-ease), transform .25s var(--mx-ease);
  }
  html body .report-data-row:hover { background: color-mix(in srgb, var(--mx-text) 5%, transparent) !important; }
  html body .report-data-row:active { transform: scale(.995); }
  html body .report-data-row > span { color: var(--mx-text) !important; font-size: 14px !important; font-weight: 500; -webkit-text-fill-color: currentColor; }
  html body .report-data-row > i { display: block; height: 14px; border-radius: 980px !important; background: color-mix(in srgb, var(--mx-text) 8%, transparent) !important; overflow: hidden; }
  html body .report-data-row > i > b {
    display: block; height: 100%; border-radius: 980px !important; background: linear-gradient(90deg, #64d2ff, #0a84ff) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; transition: width .8s var(--mx-ease), filter .25s;
  }
  html body .report-data-row:hover > i > b, html body .report-data-row[aria-pressed=true] > i > b, html body .report-data-row.active > i > b { filter: saturate(1.25) brightness(1.04); }
  html body .report-data-row:nth-of-type(6n+2) > i > b { background: linear-gradient(90deg, #bf9bff, #5e5ce6) !important; }
  html body .report-data-row:nth-of-type(6n+3) > i > b { background: linear-gradient(90deg, #ffd60a, #ff9f0a) !important; }
  html body .report-data-row:nth-of-type(6n+4) > i > b { background: linear-gradient(90deg, #63e6a1, #30b0c7) !important; }
  html body .report-data-row:nth-of-type(6n+5) > i > b { background: linear-gradient(90deg, #ff9ecb, #bf5af2) !important; }
  html body .report-data-row:nth-of-type(6n+6) > i > b { background: linear-gradient(90deg, #ff9f0a, #ff375f) !important; }
  html body .report-data-row > strong { font-size: 14px !important; font-weight: 650 !important; color: var(--mx-text) !important; font-variant-numeric: tabular-nums; text-align: right; -webkit-text-fill-color: currentColor; }

  /* grafici a linea */
  html body svg.research-line { width: 100%; height: auto; overflow: visible; }
  html body svg.research-line text { font-family: var(--mx-font) !important; font-size: 12px !important; fill: var(--mx-muted) !important; font-weight: 500; }
  html body svg.research-line > path[stroke="var(--line)"] { stroke: color-mix(in srgb, var(--mx-text) 12%, transparent) !important; stroke-dasharray: 3 5; stroke-width: 1 !important; }
  html body svg.research-line > path[fill="#5289f4"] { fill: #0a84ff !important; opacity: .13 !important; }
  html body svg.research-line > path[stroke="#3d7bf0"] { stroke: #0a84ff !important; stroke-width: 3.5px !important; stroke-linecap: round; stroke-linejoin: round; }
  html body svg.research-line circle { fill: #0a84ff !important; stroke: #fff !important; stroke-width: 3px !important; r: 6px; filter: drop-shadow(0 2px 4px rgba(10,132,255,.45)); transition: r .2s var(--mx-ease); }
  html body svg.research-line circle:hover { r: 8.5px; }
  html:root[data-theme=dark] body svg.research-line circle { stroke: #1c1c1e !important; }

  /* interruttori vista (Andamento / Barre) e schede: controllo segmentato */
  html body .graph-tools, html body .chart-tabs, html body .insight-tabs, html body .q2-controls .tabs {
    display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; padding: 4px !important; border: 0 !important; border-radius: 980px !important;
    background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important;
  }
  html body .graph-tools button, html body .chart-tabs button, html body .insight-tabs button {
    border: 0 !important; border-radius: 980px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 600 !important; background: transparent !important;
    color: var(--mx-muted) !important; -webkit-text-fill-color: currentColor !important; transition: background .25s var(--mx-ease), color .2s, box-shadow .25s;
  }
  html body .graph-tools button:hover, html body .chart-tabs button:hover, html body .insight-tabs button:hover { color: var(--mx-text) !important; }
  html body .graph-tools button[aria-pressed=true], html body .chart-tabs button[aria-pressed=true], html body .insight-tabs button[aria-pressed=true],
  html body .graph-tools button.active, html body .chart-tabs button.active, html body .insight-tabs button.active, html body .insight-tabs button[aria-selected=true] {
    background: var(--mx-card) !important; color: var(--mx-text) !important; box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 0 0 1px color-mix(in srgb, var(--mx-line) 70%, transparent) !important;
  }

  /* riquadri dei valori (anni / periodi) sotto i grafici */
  html body .live-graph > div button, html body .report-chart-plot .live-graph button:not(.report-data-row) {
    border: 0 !important; border-radius: 18px !important; background: var(--mx-card) !important; padding: 10px 14px !important; color: var(--mx-text) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: transform .25s var(--mx-ease), box-shadow .25s;
  }
  html body .live-graph > div button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
  html body .live-graph > div button strong { font-size: 18px !important; letter-spacing: -.02em; }

  /* confronto tra due valori */
  html body .compare-values { background: transparent !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--mx-line) 70%, transparent) !important; padding-top: 22px !important; margin-top: 26px; }
  html body .compare-values h3, html body .compare-values h4 { font-size: 15px !important; font-weight: 650 !important; color: var(--mx-muted) !important; letter-spacing: 0 !important; }
  html body .compare-values label { color: var(--mx-muted) !important; font-size: 12px !important; }
  html body .compare-values > strong, html body .compare-values .compare-result strong, html body .compare-values [class*=result] strong {
    display: block; font-size: clamp(30px, 4.4vw, 52px) !important; letter-spacing: -.045em !important; font-weight: 700 !important; line-height: 1.05; font-variant-numeric: tabular-nums;
  }
  html body .compare-values .nx-picker { border-radius: 980px !important; background: var(--mx-card) !important; padding: 10px 18px !important; }

  /* barre del secondo report (traffico mensile / canali) */
  html body .q2-section { background: var(--mx-card-soft) !important; border: 0 !important; border-radius: 30px !important; padding: clamp(20px, 3vw, 36px) !important; }
  html body .q2-row { display: grid !important; grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) minmax(70px, auto); gap: 14px; align-items: center; padding: 9px 4px !important; border: 0 !important; }
  html body .q2-row > span { color: var(--mx-text) !important; font-size: 14px !important; }
  html body .q2-row > strong { text-align: right; font-variant-numeric: tabular-nums; color: var(--mx-text) !important; }
  html body .q2-track { height: 14px !important; }
  html body .q2-controls select, html body .q2-controls .nx-picker { border-radius: 980px !important; background: var(--mx-card) !important; padding: 10px 18px !important; }

  @media (max-width: 700px) {
    html body .report-data-row { grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) auto; gap: 10px; padding: 9px 6px !important; }
    html body .q2-row { grid-template-columns: minmax(64px, 100px) minmax(0, 1fr) auto; gap: 10px; }
    html body .graph-tools, html body .chart-tabs, html body .insight-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    html body .graph-tools button, html body .chart-tabs button, html body .insight-tabs button { flex: 0 0 auto; white-space: nowrap; }
  }


  /* barra degli strumenti del grafico: etichetta e opzioni separate, chip a pillola */
  html body .graph-tools { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; margin-bottom: 14px; }
  html body .graph-tools > span, html body .graph-tools > small { color: var(--mx-muted) !important; font-size: 13px !important; margin-right: 6px; }
  html body .graph-tools button { background: color-mix(in srgb, var(--mx-text) 7%, transparent) !important; color: var(--mx-text) !important; }
  html body .graph-tools button[aria-pressed=true], html body .graph-tools button.active { background: var(--mx-text) !important; color: var(--mx-bg) !important; -webkit-text-fill-color: var(--mx-bg) !important; box-shadow: none !important; }
  html body .graph-tools label { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--mx-muted) !important; font-size: 13px !important; cursor: pointer; }
  html body input[type=checkbox] { accent-color: var(--mx-accent); width: 18px; height: 18px; border-radius: 6px; }


  /* dashboard su telefono: barre con etichetta sopra, testi del grafico leggibili, confronto in colonna */
  @media (max-width: 700px) {
    html body .report-data-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "label value" "bar bar"; gap: 6px 12px !important; padding: 10px 6px !important; }
    html body .report-data-row > span { grid-area: label; }
    html body .report-data-row > strong { grid-area: value; }
    html body .report-data-row > i { grid-area: bar; height: 12px; }
    html body .q2-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "label value" "bar bar"; gap: 6px 12px !important; }
    html body .q2-row > span { grid-area: label; }
    html body .q2-row > strong { grid-area: value; }
    html body .q2-row > .q2-track, html body .q2-row > i { grid-area: bar; }
    html body svg.research-line { min-height: 190px; }
    html body svg.research-line text { font-size: 21px !important; }
    html body svg.research-line circle { r: 9px; stroke-width: 4px !important; }
    html body svg.research-line > path[stroke="#3d7bf0"] { stroke-width: 6px !important; }
    html body .compare-controls { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
    html body .compare-controls > span { display: none; }
    html body .comparison-result strong { font-size: clamp(30px, 9vw, 40px) !important; }
    html body .report-chart-plot { padding: 18px 14px !important; border-radius: 26px !important; }
  }


  @media (max-width: 700px) {
    html body .graph-tools, html body .chart-tabs, html body .insight-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; max-width: 100% !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    html body .chart-tabs::-webkit-scrollbar, html body .insight-tabs::-webkit-scrollbar { display: none; }
    html body .chart-tabs button, html body .insight-tabs button { flex: 0 0 auto !important; white-space: nowrap !important; }
  }


  /* ═════════ FILTRI: sempre riconoscibili come selezionabili ═════════ */
  /* le schede "Vista dei dati" sono chip distinti, non un blocco unico */
  html body .chart-tabs {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; width: 100%;
  }
  html body .chart-tabs button {
    background: var(--mx-card) !important; color: var(--mx-text) !important; -webkit-text-fill-color: currentColor !important;
    border: 1px solid color-mix(in srgb, var(--mx-line) 85%, transparent) !important; border-radius: 980px !important; padding: 9px 16px !important;
    font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s var(--mx-ease), box-shadow .2s;
  }
  html body .chart-tabs button:hover { border-color: var(--mx-accent) !important; color: var(--mx-accent) !important; -webkit-text-fill-color: var(--mx-accent) !important; transform: translateY(-1px); }
  html body .chart-tabs button[aria-pressed=true], html body .chart-tabs button.active {
    background: var(--mx-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: var(--mx-accent) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mx-accent) 38%, transparent) !important; transform: none;
  }
  /* indicazione di selezione per tutti i gruppi di chip/scelte */
  html body .insight-tabs button, html body .graph-tools button { cursor: pointer; }
  html body .insight-tabs button:not([aria-pressed=true]):not([aria-selected=true]):not(.active) { background: var(--mx-card) !important; border: 1px solid color-mix(in srgb, var(--mx-line) 85%, transparent) !important; color: var(--mx-text) !important; }
  html body .insight-tabs { background: transparent !important; padding: 0 !important; border-radius: 0 !important; gap: 8px !important; }

  /* freccia tra i due valori del confronto: semplice glifo, non un pulsante */
  html body .compare-controls > span { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--mx-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: 20px; align-self: center; width: auto !important; height: auto !important; border-radius: 0 !important; }
  html body .compare-controls { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px !important; align-items: end; }
  html body .compare-controls label { min-width: 0; }
  html body .compare-controls .nx-picker { width: 100% !important; max-width: 100%; }

  /* nulla deve uscire dal proprio riquadro */
  html body .report-chart-plot, html body .publication-chart-content, html body .compare-values, html body .live-graph, html body details, html body .q2-section { max-width: 100%; min-width: 0; }
  html body .report-chart-plot *, html body .q2-section *, html body details * { overflow-wrap: anywhere; }
  html body details > * { max-width: 100%; }
  html body details p { margin-inline: 0 !important; }


  /* un solo "filtro" non è un filtro: nascondilo */
  html body .chart-tabs:has(> :only-child), html body .insight-tabs:has(> :only-child) { display: none !important; }


  /* ═════════ PARITÀ MOBILE: bersagli di tocco ≥ 40 px e testi ≥ 12 px ═════════ */
  @media (max-width: 700px) {
    html body .hero button:not([type=submit]):not(.nx-picker), html body .platform-search ~ div button, html body .hero .quick-links button { min-height: 42px !important; padding: 9px 18px !important; }
    html body .overview-rail > button { min-height: 42px !important; }
    html body .crumb a, html body .page-hero .crumb a, html body .report-workspace-head .crumb a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
    html body main a.text-link, html body main a.arrow, html body .report-workspace-head a, html body .workspace-nav a, html body .help-card a, html body .source-line a,
    html body .method a, html body .site-footer a, html body .page-hero a:not(.button-link) { display: inline-flex; align-items: center; min-height: 42px; }
    html body .topic-navigation a, html body .chart-tabs button, html body .insight-tabs button, html body .graph-tools button { min-height: 42px !important; }
    html body .report-data-row { min-height: 52px; }
    html body .logo small, html body .site-footer .logo small, html body .site-footer small { font-size: 11px !important; letter-spacing: .08em !important; }
    html body .crumb, html body .crumb a, html body .kicker, html body .eyebrow, html body small, html body .map-top span, html body .youth-map-top span, html body .youth-map-bottom span,
    html body .panel-top .small, html body .index span, html body .bottomline a, html body .report-kpi small, html body .meta, html body .press-meta, html body .help-hours,
    html body .report-workspace-head .kicker, html body .page-hero .kicker, html body .row-type, html body .row-period, html body .legend span { font-size: 12px !important; }
  }


  /* ═════════ RICONOSCIBILITÀ: ogni controllo non selezionato ha forma e bordo visibili ═════════ */
  html body .filters button:not(.active):not([aria-pressed=true]),
  html body .tabs button:not(.active):not([aria-pressed=true]):not([aria-selected=true]),
  html body .segmented button:not(.active):not([aria-pressed=true]),
  html body .graph-tools button:not(.active):not([aria-pressed=true]),
  html body .story-reading button:not(.active):not([aria-pressed=true]):not([aria-selected=true]),
  html body .insight-tabs button:not(.active):not([aria-pressed=true]):not([aria-selected=true]),
  html body .quick-links button, html body .hero button:not([type=submit]):not(.nx-picker) {
    background: var(--mx-card) !important; color: var(--mx-text) !important; -webkit-text-fill-color: currentColor !important;
    border: 1px solid color-mix(in srgb, var(--mx-line) 90%, transparent) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
  }
  html body .filters button.active, html body .filters button[aria-pressed=true] { background: var(--mx-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: var(--mx-accent) !important; }

  html body .nx-picker { border: 1px solid color-mix(in srgb, var(--mx-line) 90%, transparent) !important; }
  html body .site-header .nx-picker, html body .site-header .theme-toggle, html body .site-header .menu-toggle {
    border: 1px solid color-mix(in srgb, var(--mx-line) 80%, transparent) !important; background: color-mix(in srgb, var(--mx-card) 70%, transparent) !important;
  }
  html body .overview-rail > button:not([aria-pressed=true]) { background: color-mix(in srgb, var(--mx-card) 60%, transparent) !important; border: 1px solid color-mix(in srgb, var(--mx-line) 80%, transparent) !important; }

  /* riquadri KPI e passaggi: carta distinta dallo sfondo */
  html body .report-kpi:not([aria-pressed=true]) { background: var(--mx-card) !important; border: 1px solid color-mix(in srgb, var(--mx-line) 85%, transparent) !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; }
  html body .report-kpi:not([aria-pressed=true]):hover { border-color: var(--mx-accent) !important; transform: translateY(-2px); }
  html:root[data-theme=dark] body .flow-steps button:not([aria-pressed=true]):not(.active),
  html:root[data-theme=dark] body .reading-cards article { border: 1px solid rgba(255,255,255,.2) !important; }
  html:root[data-theme=dark] body .report-kpi:not([aria-pressed=true]) { background: #232326 !important; }


  /* effetto macchina da scrivere: i caratteri occupano già lo spazio (nessun salto di layout) */
  html body .mx-tw { visibility: hidden; }
  html body .mx-tw.mx-on { visibility: visible; }
  html body .mx-caret { display: inline; position: relative; width: 0; height: 0; }
  html body .mx-caret::after {
    content: ""; position: absolute; left: .03em; top: .14em; width: .055em; height: .76em; border-radius: 2px;
    background: var(--mx-accent); -webkit-text-fill-color: initial; animation: mx-blink .9s steps(2, start) infinite;
  }
  @keyframes mx-blink { to { visibility: hidden; } }
  @media (prefers-reduced-motion: reduce) { html body .mx-caret::after { animation: none; } }


  /* logo in intestazione su telefono: mai tagliato, anche su schermi stretti */
  @media (max-width: 700px) {
    html body .site-header .logo { flex: 0 0 auto !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; min-width: auto !important; margin-right: auto !important; font-size: 13px !important; letter-spacing: -.02em !important; }
    html body .site-header .logo .logo-copy, html body .site-header .logo span { overflow: visible !important; white-space: nowrap; }
    html body .site-header .header-inner { gap: 6px !important; }
    html body .site-header .menu-toggle { padding: 0 12px !important; }
  }
  @media (max-width: 360px) {
    html body .site-header .logo { font-size: 11.5px !important; }
    html body .site-header .header-inner { padding-inline: 10px !important; gap: 4px !important; }
    html body .site-header .menu-toggle { padding: 0 9px !important; font-size: 11.5px !important; }
    html body .site-header .nx-picker { padding: 0 6px !important; }
  }


  @media (max-width: 700px) {
    html body .site-header .header-inner.shell, html body .site-header .shell.header-inner { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 14px !important; }
  }


  /* ═════════ elenco con copertine (anteprima archivio): stesse tessere Apple ═════════ */
  html body :is(div, section, ul):has(> .editorial-row) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(14px, 1.6vw, 22px) !important; }
  @media (max-width: 1100px) { html body :is(div, section, ul):has(> .editorial-row) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 700px)  { html body :is(div, section, ul):has(> .editorial-row) { grid-template-columns: 1fr !important; } }
  html body .editorial-row {
    position: relative; display: flex !important; flex-direction: column; gap: 14px; padding: 0 0 26px !important; margin: 0 !important; overflow: hidden;
    border: 0 !important; border-radius: 32px !important; background: var(--mx-card-soft) !important; color: var(--mx-text);
  }
  html body .editorial-row .cover-stage {
    display: grid !important; place-items: center; width: 100% !important; margin: 0 0 6px !important; padding: clamp(18px, 2.4vw, 30px) !important; border-radius: 0 !important;
    background: radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.16), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.14), transparent 60%), var(--mx-card) !important;
  }
  html body .editorial-row .cover-stage img { width: auto !important; max-width: 82% !important; max-height: 230px; height: auto; object-fit: contain; }
  html body .editorial-row .row-index { position: absolute; top: 16px; left: 18px; z-index: 2; padding: 4px 11px; border-radius: 980px; background: color-mix(in srgb, var(--mx-bg) 80%, transparent); font-size: 12px !important; font-weight: 700; color: var(--mx-text) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html body .editorial-row .row-copy { display: flex; flex-direction: column; gap: 8px; padding: 0 clamp(20px, 2vw, 28px) !important; flex: 1; }
  html body .editorial-row .row-type { align-self: flex-start; padding: 5px 12px; border-radius: 980px; background: color-mix(in srgb, var(--mx-text) 7%, transparent); font-size: 12px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; color: var(--mx-text) !important; }
  html body .editorial-row h2 { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; letter-spacing: -.035em !important; margin: 4px 0 0 !important; color: var(--mx-text) !important; }
  html body .editorial-row p { color: var(--mx-muted) !important; font-size: 15px !important; }
  html body .editorial-row .row-period { color: var(--mx-muted) !important; font-size: 13px !important; margin-top: auto; }
  html body .editorial-row .cover-stage { order: -2 !important; }
  html body .editorial-row .row-copy { order: 1 !important; }
  html body .editorial-row .row-arrow {
    order: 2 !important; position: static !important; align-self: flex-start; display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: auto !important;
    margin: 6px clamp(20px, 2vw, 28px) 0 !important; padding: 11px 20px !important; border-radius: 980px !important; background: var(--mx-accent) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 15px !important; font-weight: 600; white-space: nowrap;
  }
  html body .editorial-row:nth-child(even) .row-arrow { background: #fff !important; color: #1d1d1f !important; -webkit-text-fill-color: #1d1d1f !important; }
  html body .editorial-row:nth-child(even) { background: #1d1d1f !important; }
  html:root[data-theme=dark] body .editorial-row:nth-child(even) { background: #2c2c2e !important; }
  html body .editorial-row:nth-child(even) h2, html body .editorial-row:nth-child(even) .row-type { color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
  html body .editorial-row:nth-child(even) .row-type { background: rgba(255,255,255,.12); }
  html body .editorial-row:nth-child(even) p, html body .editorial-row:nth-child(even) .row-period { color: #a1a1a6 !important; -webkit-text-fill-color: #a1a1a6 !important; }
  html body .editorial-row:nth-child(even) .cover-stage { background: radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.28), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.24), transparent 60%), #2c2c2e !important; }
  html body .editorial-row:nth-child(even) .row-index { background: rgba(0,0,0,.45); color: #f5f5f7 !important; }
  html body .editorial-row:hover { transform: translateY(-6px); box-shadow: var(--mx-shadow); }


  /* pagine senza pulsante "Menu": navigazione come riga a scorrimento sotto il logo (telefono) */
  @media (max-width: 700px) {
    html body .site-header:not(:has(.menu-toggle)) .header-inner { flex-wrap: wrap !important; row-gap: 0 !important; padding-bottom: 6px !important; min-height: 0 !important; }
    html body .site-header:not(:has(.menu-toggle)) .header-inner > .logo { margin-right: auto !important; }
    html body .site-header:not(:has(.menu-toggle)) .site-nav {
      display: flex !important; position: static !important; order: 5; flex: 1 0 100%; width: 100% !important; margin: 0 -4px !important; padding: 2px 0 4px !important; gap: 2px !important;
      overflow-x: auto; white-space: nowrap; flex-wrap: nowrap !important; scrollbar-width: none; background: transparent !important; border: 0 !important; flex-direction: row !important; max-height: none !important;
    }
    html body .site-header:not(:has(.menu-toggle)) .site-nav::-webkit-scrollbar { display: none; }
    html body .site-header:not(:has(.menu-toggle)) .site-nav a { flex: 0 0 auto; padding: 8px 12px !important; font-size: 13px !important; }
  }


  /* anteprima archivio: illustrazioni Apple al posto delle copertine dei PDF */
  html body .editorial-row .cover-stage { padding: 0 !important; background: none !important; }
  html body .editorial-row .cover-stage img.research-illustration {
    display: block; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important;
    padding: clamp(14px, 2vw, 26px) !important; margin: 0 !important;
    background: radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.16), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.14), transparent 60%), var(--mx-card) !important;
  }
  html body .editorial-row:nth-child(even) .cover-stage img.research-illustration {
    background: radial-gradient(120% 140% at 0% 0%, rgba(10,132,255,.28), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(191,90,242,.24), transparent 60%), #2c2c2e !important;
  }
  html body .editorial-row:hover .cover-stage img { transform: none !important; }


  html body .editorial-row .cover-stage { display: block !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; overflow: hidden; }


  /* ═════════ selettori: stesso aspetto prima e dopo il clic, coerente col tono della tessera e del tema ═════════ */
  html body button.nx-picker { font-family: var(--mx-font) !important; font-weight: 500 !important; font-size: 14px !important; border-radius: 12px !important; transition: background .2s, border-color .2s, box-shadow .2s; }
  html body button.nx-picker:after { color: var(--mx-muted) !important; }
  html body button.nx-picker[aria-expanded=true] { background: color-mix(in srgb, var(--mx-accent) 10%, var(--mx-card)) !important; border-color: var(--mx-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-accent) 20%, transparent) !important; color: var(--mx-text) !important; }
  html body .product-card:nth-child(even) button.nx-picker[aria-expanded=true], html body .editorial-row:nth-child(even) button.nx-picker[aria-expanded=true] { background: rgba(10,132,255,.28) !important; border-color: #64d2ff !important; color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
  html body .nx-options { background: var(--mx-card) !important; color: var(--mx-text) !important; border: 1px solid color-mix(in srgb, var(--mx-line) 80%, transparent) !important; border-radius: 18px !important; padding: 8px !important; box-shadow: 0 28px 70px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.1) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  html:root[data-theme=dark] body .nx-options, html body .nx-options.nx-dark { background: #1c1c1e !important; color: #f5f5f7 !important; border-color: rgba(255,255,255,.16) !important; }
  html body .nx-option { font-family: var(--mx-font) !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 11px !important; padding: 11px 14px !important; color: var(--mx-text) !important; -webkit-text-fill-color: currentColor !important; transition: background .15s; }
  html:root[data-theme=dark] body .nx-option, html body .nx-options.nx-dark .nx-option { color: #f5f5f7 !important; }
  html body .nx-option:hover, html body .nx-option:focus-visible { background: color-mix(in srgb, var(--mx-text) 8%, transparent) !important; outline: none !important; }
  html:root[data-theme=dark] body .nx-option:hover, html body .nx-options.nx-dark .nx-option:hover, html body .nx-options.nx-dark .nx-option:focus-visible { background: rgba(255,255,255,.1) !important; }
  html body .nx-option[aria-selected=true] { background: color-mix(in srgb, var(--mx-accent) 14%, transparent) !important; color: var(--mx-accent) !important; -webkit-text-fill-color: currentColor !important; font-weight: 650 !important; }
  html:root[data-theme=dark] body .nx-option[aria-selected=true], html body .nx-options.nx-dark .nx-option[aria-selected=true] { background: rgba(10,132,255,.30) !important; color: #2997ff !important; }

  /* ───────── animazioni allo scroll ───────── */
  html.mx-js .mx-reveal { opacity: 0; transform: translateY(36px) scale(.985); transition: opacity .9s var(--mx-ease), transform .9s var(--mx-ease); transition-delay: var(--mx-d, 0ms); }
  html.mx-js .mx-reveal.mx-in { opacity: 1; transform: none; }

  /* ───────── adattamento ───────── */
  @media (max-width: 900px) {
    html body .observatories { grid-template-columns: 1fr !important; }
    html body .obs-card, html body .obs-card + .obs-card { min-height: 0 !important; }
    html body .product-grid { grid-template-columns: 1fr !important; }
    html body .hero-aside { grid-template-columns: 1fr !important; gap: 36px !important; }
    html body .site-nav { display: none; }
    html body .site-header .menu-toggle { display: inline-flex !important; margin-left: auto; }
    html body .site-nav.open, html body .site-nav[data-open=true] { display: flex !important; position: absolute; top: var(--mx-nav-h); inset-inline: 0; flex-direction: column; padding: 16px; background: var(--mx-bg); border-bottom: 1px solid var(--mx-line); }
  }
  @media (max-width: 900px) {
    html body .site-header .header-inner { gap: 8px !important; padding-inline: 14px !important; }
    html body .site-header .logo { font-size: 12px !important; white-space: nowrap; flex-shrink: 1; min-width: 0; }
    html body .site-header .language-control { margin-left: auto; }
    html body .site-header .language-control > span { display: none !important; }
    html body .site-header .menu-toggle, html body .site-header .theme-toggle, html body .site-header .nx-picker {
      min-height: 34px !important; padding: 0 12px !important; border-radius: 980px !important; font-size: 12px !important; border: 0 !important;
      background: color-mix(in srgb, var(--mx-text) 9%, transparent) !important; color: var(--mx-text) !important; white-space: nowrap;
    }
    html body .site-header .menu-toggle, html body .site-header .theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; }
    html body .site-header .logo { margin-right: 10px; font-size: 11px !important; letter-spacing: -.01em !important; }
    html body .site-header .theme-toggle { padding: 0 10px !important; }
    html body .site-header .nx-picker { min-width: 0 !important; width: auto !important; margin: 0 !important; gap: 6px !important; }
    html body .hero { padding-top: 56px !important; }
    html body .hero h1 { font-size: clamp(40px, 12vw, 64px) !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.mx-js .mx-reveal { opacity: 1; transform: none; transition: none; }
    html body .nexus-overview { transform: none; }
    html body .obs-card:hover, html body .product-card:hover, html body .press-card:hover, html body .help-card:hover { transform: none !important; }
  }
}