/* ============================================================================
   RQ-HIGHLIGHTS — Componente UX 2026 inline expand
   ============================================================================
   Pattern progressive discover: cerchi categoriali orizzontali tipo Instagram
   Stories + pannello expand inline (NO modal). Riutilizzabile in landing E app.

   ARCHITETTURA:
   - Cerchi grayscale (coerenza con community-cleanup-v1.css)
   - Active state via anello rosa sottile (signature Rynq)
   - 1 solo pannello aperto alla volta (toggle naturale)
   - Animation spring cubic-bezier (sensazione iOS-grade)
   - Mobile-first responsive con scroll orizzontale se overflow
   - Niente cambio di contesto: il pannello cresce inline

   SCOPED:
   Tutto sotto [data-rq-highlights] per evitare leak globali.
   CSS variables per override facile in altri contesti (app vs landing).
   ============================================================================ */

[data-rq-highlights] {
  /* Design tokens scoped — override per app vs landing */
  --rq-hl-circle-size: 64px;
  --rq-hl-circle-bg: rgba(255,255,255,.06);
  --rq-hl-circle-bg-hover: rgba(255,255,255,.10);
  --rq-hl-circle-border: rgba(255,255,255,.10);
  --rq-hl-icon-color: rgba(255,255,255,.65);
  --rq-hl-label-color: rgba(255,255,255,.78);
  --rq-hl-label-color-active: #fff;
  --rq-hl-count-color: rgba(255,255,255,.42);
  --rq-hl-count-color-active: var(--rq-pink, #ec4899);
  --rq-hl-active-ring: var(--rq-pink, #ec4899);
  --rq-hl-active-ring-width: 1.5px;
  --rq-hl-gap: 14px;
  --rq-hl-strip-padding: 4px 0 8px;

  --rq-hl-panel-bg: rgba(255,255,255,.03);
  --rq-hl-panel-border: rgba(255,255,255,.08);
  --rq-hl-panel-radius: 16px;
  --rq-hl-panel-padding: 18px 16px;
  --rq-hl-panel-margin-top: 16px;

  --rq-hl-spring: cubic-bezier(.22, 1, .36, 1);
  --rq-hl-duration: .28s;

  position: relative;
  /* CONTAINMENT: il componente non deve mai sforare il parent.
     Mobile-safe: box-sizing border-box per padding interno calcolato,
     max-width 100% per non spingere oltre, e min-width 0 per permettere
     ai children flex di restringere correttamente. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip; /* clip = hidden ma non crea contenitore di scroll */
}
[data-rq-highlights] *,
[data-rq-highlights] *::before,
[data-rq-highlights] *::after {
  box-sizing: border-box;
}


/* ── STRIP orizzontale dei cerchi ──────────────────────────────────────── */
[data-rq-highlights] .rq-hl-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--rq-hl-gap);
  padding: var(--rq-hl-strip-padding);
  /* Scroll orizzontale su mobile se overflow.
     Pattern Instagram Stories: scroll smooth, niente scrollbar visibile. */
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
[data-rq-highlights] .rq-hl-strip::-webkit-scrollbar {
  display: none;
}


/* ── BUTTON highlight ──────────────────────────────────────────────────── */
[data-rq-highlights] .rq-hl {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  /* Reset focus default; gestiamo focus visivo custom */
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--rq-hl-duration) var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl:active {
  transform: scale(.95);
}


/* ── CIRCLE icona ──────────────────────────────────────────────────────── */
[data-rq-highlights] .rq-hl-circle {
  position: relative;
  width: var(--rq-hl-circle-size);
  height: var(--rq-hl-circle-size);
  border-radius: 50%;
  background: var(--rq-hl-circle-bg);
  border: 1px solid var(--rq-hl-circle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--rq-hl-duration) var(--rq-hl-spring),
    border-color var(--rq-hl-duration) var(--rq-hl-spring),
    box-shadow var(--rq-hl-duration) var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl-circle svg {
  width: 26px;
  height: 26px;
  color: var(--rq-hl-icon-color);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  transition: color var(--rq-hl-duration) var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl:hover .rq-hl-circle {
  background: var(--rq-hl-circle-bg-hover);
}
[data-rq-highlights] .rq-hl:hover .rq-hl-circle svg {
  color: rgba(255,255,255,.85);
}


/* ── LABEL sotto al cerchio ────────────────────────────────────────────── */
[data-rq-highlights] .rq-hl-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--rq-hl-label-color);
  white-space: nowrap;
  transition: color var(--rq-hl-duration) var(--rq-hl-spring);
}


/* ── COUNT (numerino) ──────────────────────────────────────────────────── */
[data-rq-highlights] .rq-hl-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--rq-hl-count-color);
  letter-spacing: .02em;
  margin-top: -1px;
  transition: color var(--rq-hl-duration) var(--rq-hl-spring);
  /* Tabular figures = i numeri non saltano quando count-up animation */
  font-variant-numeric: tabular-nums;
}


/* ── ACTIVE STATE — anello rosa sottile + label/count rinforzati ─────── */
[data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-circle {
  border-color: var(--rq-hl-active-ring);
  box-shadow: 0 0 0 var(--rq-hl-active-ring-width) var(--rq-hl-active-ring);
  background: var(--rq-hl-circle-bg-hover);
}
[data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-circle svg {
  color: rgba(255,255,255,.95);
}
[data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-label {
  color: var(--rq-hl-label-color-active);
  font-weight: 700;
}
[data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-count {
  color: var(--rq-hl-count-color-active);
  font-weight: 700;
}


/* ── EMPTY STATE — count 0 ─────────────────────────────────────────────── */
[data-rq-highlights] .rq-hl[data-count="0"] .rq-hl-circle {
  opacity: .55;
}
[data-rq-highlights] .rq-hl[data-count="0"] .rq-hl-count {
  opacity: .5;
}


/* ── KEYBOARD FOCUS visibile (a11y) ────────────────────────────────────── */
[data-rq-highlights] .rq-hl:focus-visible .rq-hl-circle {
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}


/* ── PANEL inline expand ───────────────────────────────────────────────── */
[data-rq-highlights] .rq-hl-panel {
  margin-top: var(--rq-hl-panel-margin-top);
  background: var(--rq-hl-panel-bg);
  border: 1px solid var(--rq-hl-panel-border);
  border-radius: var(--rq-hl-panel-radius);
  padding: var(--rq-hl-panel-padding);
  /* Animation expand: height + opacity smooth */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transition:
    max-height var(--rq-hl-duration) var(--rq-hl-spring),
    opacity calc(var(--rq-hl-duration) * .8) var(--rq-hl-spring) .04s,
    padding var(--rq-hl-duration) var(--rq-hl-spring),
    border-width var(--rq-hl-duration) var(--rq-hl-spring),
    margin-top var(--rq-hl-duration) var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl-panel[data-open="true"] {
  max-height: 1200px; /* large enough per qualunque contenuto */
  opacity: 1;
  padding-top: 18px;
  padding-bottom: 18px;
  border-width: 1px;
  margin-top: var(--rq-hl-panel-margin-top);
}
[data-rq-highlights] .rq-hl-panel[hidden] {
  display: none;
}


/* ── PANEL HEADER (titolo + close) ──────────────────────────────────────── */
[data-rq-highlights] .rq-hl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
[data-rq-highlights] .rq-hl-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
[data-rq-highlights] .rq-hl-panel-title-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}
[data-rq-highlights] .rq-hl-panel-desc {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin: -8px 0 12px 0;
  line-height: 1.4;
}
[data-rq-highlights] .rq-hl-panel-close {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.7);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .16s var(--rq-hl-spring);
  font-size: 14px;
  line-height: 1;
}
[data-rq-highlights] .rq-hl-panel-close:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}


/* ── PANEL BODY (lista items) ───────────────────────────────────────────── */
[data-rq-highlights] .rq-hl-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ── EMPTY STATE dentro pannello ────────────────────────────────────────── */
[data-rq-highlights] .rq-hl-panel-empty {
  text-align: center;
  padding: 20px 10px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1.5;
}
[data-rq-highlights] .rq-hl-panel-empty strong {
  display: block;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
[data-rq-highlights] .rq-hl-panel-empty .rq-hl-empty-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--rq-pink, #ec4899);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s var(--rq-hl-spring), background .16s var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl-panel-empty .rq-hl-empty-cta:hover {
  transform: translateY(-1px);
}
[data-rq-highlights] .rq-hl-panel-empty .rq-hl-empty-cta:active {
  transform: scale(.95);
}


/* ── ITEM (runner / offerta) dentro panel ──────────────────────────────── */
[data-rq-highlights] .rq-hl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  /* min-width:0 permette ai figli con text-overflow:ellipsis di
     restringersi correttamente quando lo spazio è ridotto su mobile */
  min-width: 0;
  max-width: 100%;
  transition: background .16s var(--rq-hl-spring), border-color .16s var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl-item:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
[data-rq-highlights] .rq-hl-item-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
[data-rq-highlights] .rq-hl-item-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-rq-highlights] .rq-hl-item-ava-fallback {
  /* Stato fallback quando avatar img fallisce o manca: iniziali in cerchio */
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
[data-rq-highlights] .rq-hl-item-info {
  flex: 1;
  min-width: 0;
}
[data-rq-highlights] .rq-hl-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-rq-highlights] .rq-hl-item-msg {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Variante ricca: messaggio chrono con icona ⏱ + tempo previsto.
   Niente italic (il tempo è dato, non citazione).
   Tabular figures per evitare salto di width quando i numeri cambiano. */
[data-rq-highlights] .rq-hl-item-msg.rq-hl-item-msg-time {
  font-style: normal;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
[data-rq-highlights] .rq-hl-item-msg .rq-hl-time-icon {
  display: inline-block;
  margin-right: 2px;
  opacity: .6;
  font-style: normal;
  font-weight: 400;
}
[data-rq-highlights] .rq-hl-item-action {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .16s var(--rq-hl-spring);
  flex-shrink: 0;
}
[data-rq-highlights] .rq-hl-item-action:hover {
  border-color: var(--rq-pink, #ec4899);
  color: var(--rq-pink, #ec4899);
  background: rgba(236,72,153,.08);
}


/* ── PANEL FOOTER (link "vedi tutti N") ─────────────────────────────────── */
[data-rq-highlights] .rq-hl-panel-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
[data-rq-highlights] .rq-hl-panel-foot a {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .16s var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl-panel-foot a:hover {
  color: var(--rq-pink, #ec4899);
}


/* ── COUNT-UP animation quando count cambia (rehydration) ──────────────── */
@keyframes rq-hl-count-flash {
  0% { transform: scale(1); color: var(--rq-pink, #ec4899); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
[data-rq-highlights] .rq-hl-count.rq-hl-count-updated {
  animation: rq-hl-count-flash .35s var(--rq-hl-spring);
  display: inline-block;
}


/* ── PULSE animation per highlight con dati nuovi ──────────────────────── */
@keyframes rq-hl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0); }
  50% { box-shadow: 0 0 0 6px rgba(236,72,153,.18); }
}
[data-rq-highlights] .rq-hl[data-fresh="true"] .rq-hl-circle {
  animation: rq-hl-pulse 1.6s var(--rq-hl-spring) 2;
}


/* ── REDUCED MOTION support ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-rq-highlights] *,
  [data-rq-highlights] *::before,
  [data-rq-highlights] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── MOBILE adaptations ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [data-rq-highlights] {
    --rq-hl-circle-size: 56px;
    --rq-hl-gap: 10px;
    --rq-hl-panel-padding: 14px 12px;
    --rq-hl-panel-margin-top: 12px;
  }
  [data-rq-highlights] .rq-hl-circle svg {
    width: 22px;
    height: 22px;
  }
  [data-rq-highlights] .rq-hl-label {
    font-size: 11px;
  }
  [data-rq-highlights] .rq-hl-count {
    font-size: 10px;
  }
  /* Item interno: padding ridotto + gap più stretto = più spazio per il testo */
  [data-rq-highlights] .rq-hl-item {
    padding: 9px 10px;
    gap: 10px;
  }
  /* Avatar leggermente più piccolo per fare spazio al testo */
  [data-rq-highlights] .rq-hl-item-ava {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  /* Nome: font leggermente ridotto per più spazio */
  [data-rq-highlights] .rq-hl-item-name {
    font-size: 13px;
  }
  /* Messaggio chrono (con tempo + delta): leggermente ridotto */
  [data-rq-highlights] .rq-hl-item-msg {
    font-size: 11.5px;
  }
  /* Action button: padding ridotto, sempre visibile (no shrink) */
  [data-rq-highlights] .rq-hl-item-action {
    padding: 5px 10px;
    font-size: 11px;
  }
  /* Header pannello: titolo leggermente più stretto */
  [data-rq-highlights] .rq-hl-panel-title {
    font-size: 13.5px;
  }
}

/* ── EXTRA-SMALL mobile (≤ 380px) — ulteriore compattamento ─────────────── */
@media (max-width: 380px) {
  [data-rq-highlights] {
    --rq-hl-circle-size: 52px;
    --rq-hl-gap: 8px;
  }
  [data-rq-highlights] .rq-hl-item {
    padding: 8px 9px;
    gap: 8px;
  }
  [data-rq-highlights] .rq-hl-item-ava {
    width: 30px;
    height: 30px;
  }
  [data-rq-highlights] .rq-hl-item-name {
    font-size: 12.5px;
  }
  [data-rq-highlights] .rq-hl-item-msg {
    font-size: 11px;
  }
  [data-rq-highlights] .rq-hl-item-action {
    padding: 5px 9px;
    font-size: 10.5px;
  }
}


/* ============================================================================
   COMING SOON SECTION — "Presto qui per consigli PRO"
   ============================================================================
   Sezione separata sotto highlights per categorie future (Race Expert, Mental
   Coach, Nutrizionista, Shoes Expert). Pattern Linear "Coming soon" + email
   capture. Brand-onesto: non promette quello che non c'è ancora.
   ============================================================================ */

.rq-coming {
  margin-top: 32px;
  padding: 22px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.10);
  text-align: center;
}
.rq-coming-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 0 0 8px;
}
.rq-coming-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.92);
  margin: 0 0 14px;
}
.rq-coming-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.rq-coming-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: -.005em;
}
.rq-coming-item svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  opacity: .8;
}
.rq-coming-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 380px;
  margin: 0 auto;
}
.rq-coming-input {
  flex: 1;
  padding: 9px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color .16s var(--rq-hl-spring, cubic-bezier(.22,1,.36,1));
}
.rq-coming-input::placeholder {
  color: rgba(255,255,255,.4);
}
.rq-coming-input:focus {
  border-color: rgba(236,72,153,.5);
}
.rq-coming-submit {
  padding: 9px 16px;
  background: var(--rq-pink, #ec4899);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: transform .16s var(--rq-hl-spring, cubic-bezier(.22,1,.36,1));
}
.rq-coming-submit:hover {
  transform: translateY(-1px);
}
.rq-coming-submit:active {
  transform: scale(.95);
}
.rq-coming-note {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin: 10px 0 0;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .rq-coming {
    padding: 18px 14px;
    margin-top: 24px;
  }
  .rq-coming-title {
    font-size: 13px;
  }
  .rq-coming-form {
    flex-direction: column;
    gap: 8px;
  }
  .rq-coming-submit {
    padding: 11px 16px;
  }
}


/* ============================================================================
   COMING SOON HIGHLIGHTS V2 — Pattern Instagram Stories disabled
   ============================================================================
   I 4 highlights "presto" (Race Expert / Mental / Nutrizione / Scarpe) restano
   nello strip ma con styling ridotto. Il visitor capisce a colpo d'occhio
   "queste arriveranno". Niente sezione bordata sotto = niente rumore visivo.
   ============================================================================ */

[data-rq-highlights] .rq-hl.rq-hl-coming .rq-hl-circle {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,.14);
  opacity: .85;
}
[data-rq-highlights] .rq-hl.rq-hl-coming .rq-hl-circle svg {
  color: rgba(255,255,255,.35);
}
[data-rq-highlights] .rq-hl.rq-hl-coming .rq-hl-label {
  color: rgba(255,255,255,.45);
  font-weight: 500;
}
[data-rq-highlights] .rq-hl.rq-hl-coming .rq-hl-count.rq-hl-soon {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
/* Hover sul coming: sale leggermente di opacity, ma niente anello rosa */
[data-rq-highlights] .rq-hl.rq-hl-coming:hover .rq-hl-circle {
  border-color: rgba(255,255,255,.22);
  opacity: 1;
}
[data-rq-highlights] .rq-hl.rq-hl-coming:hover .rq-hl-circle svg {
  color: rgba(255,255,255,.55);
}
[data-rq-highlights] .rq-hl.rq-hl-coming:hover .rq-hl-label {
  color: rgba(255,255,255,.65);
}
/* Active state dei coming: anello bianco sottile (vs rosa) — segnala
   "selected" senza promettere prodotto attivo */
[data-rq-highlights] .rq-hl.rq-hl-coming[aria-expanded="true"] .rq-hl-circle {
  border-style: solid;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.35);
  opacity: 1;
  background: rgba(255,255,255,.04);
}
[data-rq-highlights] .rq-hl.rq-hl-coming[aria-expanded="true"] .rq-hl-circle svg {
  color: rgba(255,255,255,.85);
}
[data-rq-highlights] .rq-hl.rq-hl-coming[aria-expanded="true"] .rq-hl-label {
  color: rgba(255,255,255,.92);
  font-weight: 700;
}


/* ── PANEL "coming soon" — form email inline ─────────────────────────── */
[data-rq-highlights] .rq-hl-panel.rq-hl-panel-coming {
  background: rgba(255,255,255,.02);
  border-style: dashed;
  border-color: rgba(255,255,255,.12);
}
[data-rq-highlights] .rq-hl-coming-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
[data-rq-highlights] .rq-hl-coming-input {
  flex: 1;
  min-width: 180px;
  padding: 9px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color .16s var(--rq-hl-spring);
}
[data-rq-highlights] .rq-hl-coming-input::placeholder {
  color: rgba(255,255,255,.4);
}
[data-rq-highlights] .rq-hl-coming-input:focus {
  border-color: rgba(236,72,153,.5);
}
[data-rq-highlights] .rq-hl-coming-submit {
  padding: 9px 16px;
  background: var(--rq-pink, #ec4899);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: transform .16s var(--rq-hl-spring);
  flex-shrink: 0;
}
[data-rq-highlights] .rq-hl-coming-submit:hover {
  transform: translateY(-1px);
}
[data-rq-highlights] .rq-hl-coming-submit:active {
  transform: scale(.95);
}
[data-rq-highlights] .rq-hl-coming-msg {
  flex-basis: 100%;
  font-size: 12px;
  color: rgba(236,72,153,.85);
  margin-top: 4px;
  font-weight: 600;
}

@media (max-width: 600px) {
  [data-rq-highlights] .rq-hl-coming-form {
    flex-direction: column;
  }
  [data-rq-highlights] .rq-hl-coming-input {
    width: 100%;
    min-width: 0;
  }
  [data-rq-highlights] .rq-hl-coming-submit {
    width: 100%;
    padding: 11px 16px;
  }
}


/* ============================================================================
   FIX #3 — RQ-CTA-UNLOCK NEUTRALIZZAZIONE COLORI INLINE
   ============================================================================
   La funzione rynqRenderRunners() in app.js inserisce inline:
     <span style="color:#ec4899">7 Compagni</span> · 
     <span style="color:#818cf8">7 Performance</span> · 
     <span style="color:#2dd4bf">5 Viaggio</span> · 
     <span style="color:#fbbf24">3 Pettorali</span>
   = 4 colori categoriali simultanei nel CTA = rumore + confusione.

   Inoltre il numero "totalReal" è in rosa #ec4899 large (17px).
   E il bottone CTA dice "Scrivi a Chiara e agli altri 18 nascosti →"
   = troppo rumoroso e specifico.

   Strategia: override CSS aggressivi con !important + high specificity per
   battere style="" inline. Forzo TUTTO a una scala di grigi neutri, tranne
   il bottone che resta rosa Rynq (= unico accent della sezione).

   Copy override del bottone è impossibile con solo CSS (è textContent
   generato da JS). Lascio che app.js continui a generarlo — ma posso
   nasconderlo via CSS e mostrare un'alternativa pulita generata dal CSS
   stesso usando ::before/::after content. Più semplice: lo asciugo via
   font-size + neutralization, accettando il testo originale.
   ============================================================================ */

/* Headline "19 runner già attivi": rimuovo il rosa #ec4899 inline,
   forzo bianco neutro (l'enfasi resta nel bold + size) */
.rq-cta-unlock .rq-cta-text > div:first-child span[style*="color:#ec4899"] {
  color: rgba(255,255,255,.98) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,.06);
  padding: 1px 8px;
  border-radius: 6px;
  margin-right: 4px;
}

/* Breakdown "7 Compagni · 7 Performance · 5 Viaggio · 3 Pettorali":
   neutralizzo i 4 colori categoriali inline → tutti grigio chiaro */
.rq-cta-unlock .rq-cta-text > div span[style*="color:#ec4899"],
.rq-cta-unlock .rq-cta-text > div span[style*="color:#818cf8"],
.rq-cta-unlock .rq-cta-text > div span[style*="color:#2dd4bf"],
.rq-cta-unlock .rq-cta-text > div span[style*="color:#fbbf24"] {
  color: rgba(255,255,255,.6) !important;
  font-weight: 600 !important;
}

/* La regola sopra cattura ANCHE l'headline. La eccettuiamo:
   l'headline è il PRIMO span dentro il primo div figlio diretto. */
.rq-cta-unlock .rq-cta-text > div:first-child > span[style*="color:#ec4899"]:first-child {
  color: rgba(255,255,255,.98) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,.06);
  padding: 1px 8px;
  border-radius: 6px;
  margin-right: 4px;
}

/* Bottone CTA: lo asciugo (testo lungo "Scrivi a Chiara e agli altri 18
   nascosti →" → font più piccolo, più compatto). Mantengo rosa Rynq. */
.rq-cta-unlock .rq-btn-unlock {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  padding: 11px 18px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 600px) {
  .rq-cta-unlock .rq-btn-unlock {
    font-size: 12.5px !important;
    padding: 11px 14px !important;
  }
}