/* Collapsible help box */
  .rf-help{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
  }
  .rf-help summary{
    list-style: none;
    display: flex; align-items: center; gap: .5rem;
    cursor: pointer; user-select: none; font-weight: 600;
  }
  .rf-help summary::-webkit-details-marker{ display:none; }
  .rf-help summary .fa-caret-right{ transition: transform .2s ease; }
  .rf-help[open] summary .fa-caret-right{ transform: rotate(90deg); }
  .rf-help .help-body{ margin-top: .5rem; font-size: .92rem; line-height: 1.6; color: #f7fafc; }

  /* Row after input: "or" chip + Upload button */
  .after-input-row{
    display:flex; align-items:center; gap:14px;
    margin-top:.60rem; flex-wrap: wrap;
  }
  .or-chip{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:999px;
    background: rgba(255,255,255,.28);
    color:#2e2d4d; font-weight:700;
    box-shadow: 0 1px 0 rgba(0,0,0,.08) inset;
    flex: 0 0 auto;
  }
  .btn-uploadfile{
    height:40px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 1rem; border-radius:8px; text-decoration:none !important;
    background:#4E5571 !important; color:#fff !important;
    flex: 0 0 auto;
  }
  .btn-uploadfile:hover{
    background:#889EB3 !important; color:#2E2D4D !important;
    transform: translateY(-1px);
  }
  .btn-uploadfile i{ font-size:1rem; opacity:.95; margin-right:.45rem; }

  .example-row{ margin:.6rem 0 .2rem; }
  .example-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.36rem .60rem;
    border:1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.12);
    border-radius:10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    color:#ecf1f7; line-height:1; white-space:nowrap;
  }
  .badge-example{
    background:#4E5571; color:#fff; border-radius:6px;
    padding:.12rem .48rem; font-weight:700; font-size:.78rem;
  }
  .example-link{ color:#ecedf2 !important; text-decoration:underline !important; font-weight:600; }
  .example-link:hover{ color:#fff !important; }

  .radio-group{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:.45rem; }

  /* Fix alignment of radio buttons and labels */
.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0px; /* space between the circle and the text */
  margin-right: 0px;
  font-size: 0.80rem;
  color: #fff;
  vertical-align: middle;
}

.radio-group input[type="radio"] {
  margin: 0;
  position: relative;
  top: 0; /* ensure aligned vertically */
}


  @media (max-width:520px){
    .after-input-row{ gap:.55rem; }
    .btn-uploadfile{ width:100%; }
  }

  /* =========================
     Marquee (RAF-driven)
     - No CSS keyframes; JS moves .track via transform
     - .track has NO gap between sequences; spacing lives inside .seq
     ========================= */
  .marquee{
    overflow:hidden;
    white-space:nowrap;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    max-width:1100px;
    margin: 18px auto 0;
    padding:8px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee .track{
    display: inline-flex;            /* content width = sum of children */
    align-items: center;
    gap: 0;                          /* IMPORTANT: no gap between sequences */
    will-change: transform;
    transform: translate3d(0,0,0);
  }
  .marquee .seq{
    display: inline-flex;
    align-items: center;
    gap: 18px;                       /* spacing BETWEEN images */
  }
  .marquee img{
    height: clamp(46px, 8vw, 46px) !important;
    margin: 0 !important;            /* avoid seam */
    flex: 0 0 auto;
    vertical-align: middle;
  }

  /* Reveal anim (kept) */
  .reveal{ opacity:0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
  .reveal.show{ opacity:1; transform: none; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; }
  }

  /* Hero spacing */
  .hero{ padding-block: 14px !important; }
  .hero h1{ margin-bottom: 6px !important; }
  .hero .cta{ margin-top: 10px !important; }

  /* Chips */
  .examples-group{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
  .examples-label{
    color:#ecf1f7; font-weight:700; font-size:.78rem;
    background:#4E5571; border-radius:6px; padding:.14rem .48rem;
  }
  .chip{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.36rem .55rem;
    border:1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.12);
    border-radius:10px;
    color:#ecf1f7; line-height:1;
    cursor:pointer; user-select:none;
    transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
  }
  .chip:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.18);
    box-shadow: 0 6px 12px rgba(0,0,0,.08);
  }

  .rf-help .help-body a{
    color:#cfe7ff; text-decoration: underline;
  }
  .rf-help .help-body a:hover{ color:#ffffff; }