/* =============================================================================
   Resource Hub — page styles
   Layered on top of the Crescendo Lab design system. Every value comes from a
   --cl-* token so the page stays on-brand. Structural only — content is in
   data/content.js.
   ============================================================================= */

.rh-container { max-width: var(--cl-content-w); margin: 0 auto; }
.rh-accent { color: var(--cl-blue); }
/* Japanese headings: don't break mid-word (avoids e.g. 営業・インサイドセー↵ルス).
   keep-all forbids breaks between CJK characters; overflow-wrap is the last-resort
   escape hatch so a very long run can still wrap instead of overflowing. */
.section__title, .rh-cat__title { word-break: keep-all; overflow-wrap: anywhere; }
.rh-center { display: flex; justify-content: center; margin-top: var(--cl-gap-xl); }
.rh-section { background: var(--cl-bg); }
.rh-section--tint { background: var(--cl-bg-tint); }
.rh-head { margin-bottom: var(--cl-gap-xxl); }

/* Shared brand link with sliding arrow (Read the article →) */
.rh-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--cl-blue); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s);
  text-decoration: none; margin-top: auto;
}
.rh-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.rh-link:hover svg { transform: translateX(3px); }

/* =============================================================================
   1. HERO
   ============================================================================= */
.rh-hero { background: var(--cl-bg); padding: 40px var(--cl-global-padding) 72px; }
.rh-hero__inner {
  max-width: 1120px; margin: 0 auto;
  border: none;
  border-radius: var(--cl-radius-l);
  /* Soft blue → purple → pink pastel wash (matches www.cresclab.com/jp hero):
     a light vertical base with three gentle radial glows — blue (left),
     violet (centre), pink (right) — rising from the bottom. */
  background:
    radial-gradient(72% 88% at 8% 100%, rgba(120,160,255,0.42), rgba(120,160,255,0) 60%),
    radial-gradient(68% 82% at 52% 106%, rgba(170,130,255,0.34), rgba(170,130,255,0) 60%),
    radial-gradient(74% 92% at 95% 100%, rgba(245,170,225,0.42), rgba(245,170,225,0) 60%),
    linear-gradient(165deg, #EDF2FF 0%, #F4F0FF 48%, #FCF1F8 100%);
  box-shadow: var(--cl-shadow-card);
  padding: 88px 24px 72px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--cl-gap-m);
}
.rh-hero__title {
  margin: 8px 0 0; max-width: 860px;
  font-family: var(--cl-font-sans); font-weight: var(--cl-w-bold);
  font-size: var(--cl-heading-xxl); line-height: var(--cl-lh-tight);
  color: var(--cl-blue-deepest); letter-spacing: -0.01em;
}
.rh-hero__sub {
  margin: 0 auto; max-width: 760px;
  font-size: var(--cl-para-l); line-height: var(--cl-lh-body); color: var(--cl-fg-2);
}

/* Filter bar ---------------------------------------------------------------- */
.rh-filterbar {
  margin-top: var(--cl-gap-l);
  display: inline-flex; align-items: stretch; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--cl-border-soft);
  border-radius: var(--cl-radius-pill);
  box-shadow: var(--cl-shadow-card-blue);
  padding: 6px;
}
.rh-dd { position: relative; }
.rh-dd + .rh-dd .rh-dd__btn { border-left: 1px solid var(--cl-border-soft); }
.rh-dd__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 40px 8px 20px; position: relative; border-radius: var(--cl-radius-m);
  min-width: 150px; text-align: left; font-family: var(--cl-font-sans);
}
.rh-dd__label { font-size: var(--cl-text-xs); color: var(--cl-fg-3); line-height: 1; }
.rh-dd__value { font-size: var(--cl-text-m); font-weight: var(--cl-w-semibold); color: var(--cl-fg-1); line-height: 1.2; }
.rh-dd--set .rh-dd__value { color: var(--cl-blue); }
.rh-dd__chev {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--cl-fg-3); transition: transform .2s ease;
}
.rh-dd.is-open .rh-dd__chev { transform: translateY(-50%) rotate(180deg); }

.rh-dd__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  min-width: 240px; width: max-content; max-width: min(360px, 90vw);
  margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--cl-border-soft);
  border-radius: var(--cl-radius-m); box-shadow: var(--cl-shadow-elev);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.rh-dd.is-open .rh-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rh-dd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: var(--cl-radius-xs);
  font-size: var(--cl-text-m); color: var(--cl-fg-1); cursor: pointer;
  white-space: nowrap;
}
.rh-dd__opt:hover { background: var(--cl-bg-tint); }
.rh-dd__opt.is-active { background: var(--cl-blue-10); color: var(--cl-blue); font-weight: var(--cl-w-semibold); }
.rh-dd__check { width: 16px; height: 16px; opacity: 0; color: var(--cl-blue); flex-shrink: 0; }
.rh-dd__opt.is-active .rh-dd__check { opacity: 1; }

.rh-clear {
  align-self: center; background: transparent; border: none; cursor: pointer;
  padding: 0 22px; color: var(--cl-fg-3); font-size: var(--cl-text-m);
  font-family: var(--cl-font-sans); font-weight: var(--cl-w-medium);
}
.rh-clear:hover { color: var(--cl-blue); }

/* =============================================================================
   THUMBNAIL ART — light Crescendo-blue stage (matches brand deck) +
   soft concentric-circle motif + floating white/blue tiles / letters / play
   ============================================================================= */
.rh-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 84% 80%, rgba(80,144,255,0.16) 0 5.5%, transparent 6%),
    radial-gradient(circle at 84% 80%, transparent 0 11%, rgba(80,144,255,0.13) 11% 12%, transparent 12.5%),
    radial-gradient(circle at 84% 80%, transparent 0 18%, rgba(80,144,255,0.10) 18% 19%, transparent 19.5%),
    radial-gradient(70% 90% at 78% 2%, rgba(128,187,255,0.28) 0%, rgba(128,187,255,0) 55%),
    linear-gradient(150deg, #ffffff 0%, #eef4ff 55%, #e2efff 100%);
}
.rh-thumb--img { background: #eef4ff; }
.rh-thumb__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block;
}
/* Dark scrim over video cover images so the play button stays legible */
.rh-video-thumb--img::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(9,17,38,0.10) 0%, rgba(9,17,38,0.45) 100%);
}
.rh-thumb__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #fff; color: var(--cl-blue); font-size: var(--cl-text-xs);
  font-weight: var(--cl-w-semibold); padding: 5px 12px; border-radius: var(--cl-radius-full);
  box-shadow: 0 2px 8px rgba(80,144,255,0.12), 0 1px 2px rgba(80,144,255,0.06);
}
.rh-thumb__dur {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.94); color: var(--cl-fg-1); font-size: var(--cl-text-xs);
  padding: 5px 10px; border-radius: var(--cl-radius-full);
  box-shadow: 0 2px 8px rgba(34,59,83,0.14);
}
.rh-thumb__dur svg { width: 13px; height: 13px; color: var(--cl-blue); }

/* floating tiles */
.rh-tiles { display: inline-flex; align-items: center; }
.rh-tile {
  width: 78px; height: 78px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px rgba(80, 144, 255, 0.28), 0 3px 8px rgba(34, 59, 83, 0.06);
}
.rh-tile:first-child { transform: rotate(-6deg) translateX(10px); z-index: 1; }
.rh-tile:last-child  { transform: rotate(5deg) translateX(-10px); z-index: 2; }
/* --dark = the neutral tile (now a clean white tile with a blue icon, deck-style) */
.rh-tile--dark  { background: #fff; color: var(--cl-blue); }
.rh-tile--blue  { background: var(--cl-gradient-blue); color: #fff; }
.rh-tile i, .rh-tile svg { width: 34px; height: 34px; }
.rh-tile__text { font-family: var(--cl-font-display); font-weight: var(--cl-w-bold); font-size: 30px; color: #fff; }

/* letters (A / CL / B comparison motif) */
.rh-letters { display: inline-flex; align-items: center; }
.rh-letter {
  width: 66px; height: 66px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cl-font-display); font-weight: var(--cl-w-bold); font-size: 24px;
  box-shadow: 0 14px 28px rgba(80, 144, 255, 0.26), 0 3px 8px rgba(34, 59, 83, 0.06);
  background: #fff; color: var(--cl-blue-deepest);
}
.rh-letter:nth-child(1) { transform: rotate(-7deg) translateX(14px); z-index: 1; }
.rh-letter:nth-child(2) { transform: rotate(3deg); z-index: 3; }
.rh-letter:nth-child(3) { transform: rotate(8deg) translateX(-14px); z-index: 2; }
.rh-letter--blue { background: var(--cl-gradient-blue); color: #fff; width: 74px; height: 74px; font-size: 26px; }

/* play button */
.rh-play {
  width: 62px; height: 62px; border-radius: 50%; background: #fff; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(80,144,255,0.14);
  box-shadow: 0 12px 28px rgba(80, 144, 255, 0.30); color: var(--cl-blue-deep);
}
.rh-play svg { width: 26px; height: 26px; margin-left: 3px; }

/* =============================================================================
   RESOURCE CARDS (grid)
   ============================================================================= */
.rh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-gap-m); margin-top: var(--cl-gap-l); }
.rh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rh-empty { text-align: center; color: var(--cl-fg-3); margin-top: var(--cl-gap-xl); font-size: var(--cl-para-m); }

.rh-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--cl-radius-l);
  box-shadow: var(--cl-shadow-card); border: 1px solid var(--cl-border-soft);
  transition: transform .2s ease, box-shadow .25s ease;
}
.rh-card:hover { box-shadow: var(--cl-shadow-soft); }
.rh-card--plain { border: 1px solid var(--cl-border-soft); }
.rh-card__media { width: 100%; }
.rh-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.rh-card__tagrow { display: flex; align-items: center; gap: 10px; }
.rh-card__meta { font-size: var(--cl-text-xs); color: var(--cl-fg-3); }
.rh-card__title { margin: 2px 0 0; font-size: var(--cl-text-l); font-weight: var(--cl-w-bold); line-height: 1.35; color: var(--cl-fg-1); }
.rh-card__desc { margin: 0; font-size: var(--cl-text-s); line-height: var(--cl-lh-body); color: var(--cl-fg-3); }
.rh-card__body .rh-link { margin-top: 8px; }

/* =============================================================================
   FEATURED CARD (Recommended)
   ============================================================================= */
.rh-featured {
  display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden;
  background: #fff; border-radius: var(--cl-radius-l);
  box-shadow: var(--cl-shadow-card); border: 1px solid var(--cl-border-soft);
  margin-top: var(--cl-gap-l);
}
.rh-featured__media .rh-thumb { aspect-ratio: auto; height: 100%; min-height: 300px; }
.rh-featured__body { padding: var(--cl-card-pad-l); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.rh-featured__kicker {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  color: var(--cl-blue); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s);
}
.rh-featured__kicker svg { width: 16px; height: 16px; }
.rh-featured__title { margin: 0; font-size: var(--cl-heading-m); font-weight: var(--cl-w-bold); line-height: 1.3; color: var(--cl-fg-1); }
.rh-featured__desc { margin: 0; font-size: var(--cl-para-m); line-height: var(--cl-lh-body); color: var(--cl-fg-2); }
.rh-featured__cta { margin-top: 8px; }
.rh-featured__cta .cl-btn { align-self: flex-start; }

/* =============================================================================
   VIDEO SECTION
   ============================================================================= */
.rh-video-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--cl-gap-m); margin-top: var(--cl-gap-l); }
.rh-video-feature {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--cl-radius-l);
  border: 1px solid var(--cl-border-soft); box-shadow: var(--cl-shadow-card);
}
.rh-video-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 84% 80%, rgba(80,144,255,0.16) 0 5.5%, transparent 6%),
    radial-gradient(circle at 84% 80%, transparent 0 11%, rgba(80,144,255,0.13) 11% 12%, transparent 12.5%),
    radial-gradient(circle at 84% 80%, transparent 0 18%, rgba(80,144,255,0.10) 18% 19%, transparent 19.5%),
    radial-gradient(70% 90% at 78% 2%, rgba(128,187,255,0.28) 0%, rgba(128,187,255,0) 55%),
    linear-gradient(150deg, #ffffff 0%, #eef4ff 55%, #e2efff 100%);
}
/* keep the play button legible on real cover images (they add their own scrim) */
.rh-video-thumb--img { background: #eef4ff; }
.rh-video-thumb--big { aspect-ratio: 16 / 8.2; }
.rh-video-feature__body { padding: var(--cl-card-pad-l); display: flex; flex-direction: column; gap: 10px; }
.rh-video-feature__body .rh-card__title { font-size: var(--cl-heading-m); }

.rh-video-side { display: flex; flex-direction: column; gap: var(--cl-gap-m); }
.rh-video-mini {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--cl-radius-l);
  border: 1px solid var(--cl-border-soft); box-shadow: var(--cl-shadow-card);
}
.rh-video-mini .rh-video-thumb { aspect-ratio: 16 / 8; }
.rh-video-mini__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.rh-video-mini__title { margin: 0; font-size: var(--cl-text-l); font-weight: var(--cl-w-bold); line-height: 1.35; color: var(--cl-fg-1); }

/* live / assessment bar (also reused by migration) */
.rh-live {
  display: flex; align-items: center; gap: var(--cl-gap-m);
  margin-top: var(--cl-gap-m); padding: 22px 26px;
  background: #fff; border: 1px solid var(--cl-border-soft);
  border-radius: var(--cl-radius-m); box-shadow: var(--cl-shadow-card);
}
.rh-live--soft { background: var(--cl-blue-bg-2); border-color: transparent; }
.rh-live__icon {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--cl-radius-s);
  background: var(--cl-blue-10); color: var(--cl-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.rh-live__icon i, .rh-live__icon svg { width: 26px; height: 26px; }
.rh-live__body { flex: 1; }
.rh-live__kicker { margin: 0 0 3px; color: var(--cl-blue); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s); }
.rh-live__title { margin: 0; font-size: var(--cl-para-m); font-weight: var(--cl-w-bold); color: var(--cl-fg-1); }
.rh-live__desc { margin: 4px 0 0; font-size: var(--cl-text-s); color: var(--cl-fg-3); line-height: var(--cl-lh-body); }
.rh-live__cta { flex-shrink: 0; }

/* =============================================================================
   MIGRATION
   ============================================================================= */
.rh-carousel-controls { justify-content: center; display: flex; margin-top: var(--cl-gap-xl); }

/* =============================================================================
   FAQ
   ============================================================================= */
.rh-faq { background: var(--cl-bg); }
.rh-faq__inner { max-width: 860px; }
.rh-accordion { margin-top: var(--cl-gap-xl); }

/* =============================================================================
   CLOSING — product suite + consultation form
   ============================================================================= */
.rh-closing { background: var(--cl-bg); }
.rh-closing__card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border-radius: var(--cl-radius-l); box-shadow: var(--cl-shadow-elev);
  border: 1px solid var(--cl-border-soft);
}
/* left */
.rh-suite { padding: 56px 48px; display: flex; flex-direction: column; gap: var(--cl-gap-xl); background: #fff; }
.rh-suite__title { margin: 0; font-size: var(--cl-heading-l); font-weight: var(--cl-w-bold); color: var(--cl-fg-1); }
.rh-suite__loops { display: flex; align-items: center; justify-content: flex-start; }
.rh-loop {
  width: 128px; height: 128px; border-radius: 50%; flex-shrink: 0;
  border: 10px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cl-gradient-blue) border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.rh-loop + .rh-loop { margin-left: -26px; }
.rh-loop:nth-child(2) { border-width: 12px; }
.rh-loop__label { font-size: var(--cl-text-xs); color: var(--cl-fg-3); }
.rh-loop__code { font-family: var(--cl-font-display); font-weight: var(--cl-w-bold); font-size: 22px; color: var(--cl-fg-1); }
.rh-loop__link { display: none; }

.rh-suite__stats { display: flex; align-items: flex-start; gap: var(--cl-gap-xl); }
.rh-stat { position: relative; padding-left: var(--cl-gap-m); }
.rh-stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--cl-border); }
.rh-stat__row { display: flex; align-items: baseline; gap: 6px; }
.rh-stat__num { font-family: var(--cl-font-display); font-weight: var(--cl-w-bold); font-size: 44px; line-height: 1; color: var(--cl-fg-1); }
.rh-stat__unit { font-size: var(--cl-text-m); font-weight: var(--cl-w-semibold); color: var(--cl-fg-3); }
.rh-stat__label { font-size: var(--cl-text-s); color: var(--cl-fg-3); }

.rh-channels {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 20px;
  border: 1px solid var(--cl-border-soft); border-radius: var(--cl-radius-m);
}
.rh-channel {
  width: 40px; height: 40px; border-radius: 50%; background: var(--cl-bg-tint);
  display: inline-flex; align-items: center; justify-content: center; color: var(--cl-fg-2);
}
.rh-channel i, .rh-channel svg { width: 19px; height: 19px; }

/* right — consultation */
.rh-consult {
  padding: 56px 48px; background: var(--cl-blue-bg);
  display: flex; flex-direction: column; gap: 6px;
}
.rh-consult__title { margin: 0; font-size: var(--cl-heading-l); font-weight: var(--cl-w-bold); color: var(--cl-fg-1); }
.rh-consult__sub { margin: 0 0 18px; font-size: var(--cl-para-m); color: var(--cl-fg-3); }
.rh-form { display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: var(--cl-radius-m); padding: 28px; box-shadow: var(--cl-shadow-card); }
.rh-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rh-field { display: flex; flex-direction: column; gap: 6px; }
.rh-label { font-size: var(--cl-text-s); font-weight: var(--cl-w-medium); color: var(--cl-fg-1); }
.rh-input {
  font-family: var(--cl-font-sans); font-size: var(--cl-text-m); color: var(--cl-fg-1);
  padding: 11px 14px; border: 1px solid var(--cl-border-strong); border-radius: var(--cl-radius-xs);
  background: #fff; width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.rh-input::placeholder { color: var(--cl-fg-4); }
.rh-input:focus { outline: none; border-color: var(--cl-blue); box-shadow: 0 0 0 3px var(--cl-blue-10); }
.rh-textarea { min-height: 96px; resize: vertical; }
.rh-phone { display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
.rh-phone__cc { padding-right: 8px; }
.rh-consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--cl-text-s); color: var(--cl-fg-3); }
.rh-consent input { margin-top: 2px; }
.rh-form__submit { width: 100%; justify-content: center; margin-top: 4px; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .rh-grid, .rh-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .rh-video-grid { grid-template-columns: 1fr; }
  .rh-featured, .rh-grid--2, .rh-closing__card { grid-template-columns: 1fr; }
  .rh-featured__media .rh-thumb { min-height: 240px; }
}
@media (max-width: 680px) {
  .rh-hero { padding: 24px var(--cl-hero-padding) 48px; }
  .rh-hero__inner { padding: 56px 20px 48px; }
  .rh-hero__title { font-size: 34px; }
  .rh-grid, .rh-grid--2, .rh-grid--3 { grid-template-columns: 1fr; }
  .rh-live { flex-direction: column; align-items: flex-start; }
  .rh-form__row { grid-template-columns: 1fr; }
  .rh-suite, .rh-consult { padding: 40px 28px; }
}

/* =============================================================================
   v2 — HERO note
   ============================================================================= */
.rh-hero__note {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0;
  font-size: var(--cl-text-s); font-weight: var(--cl-w-medium); color: var(--cl-fg-3);
}
.rh-hero__note i { width: 16px; height: 16px; color: var(--cl-blue); }

/* =============================================================================
   v2 — LIBRARY: left role rail + uniform grid
   ============================================================================= */
.rh-library__layout {
  display: grid; grid-template-columns: 248px 1fr; gap: var(--cl-gap-xl);
  align-items: start; margin-top: var(--cl-gap-l);
}
.rh-library__main { min-width: 0; }
.rh-library__bar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--cl-gap-s); }
.rh-count { font-size: var(--cl-text-s); color: var(--cl-fg-3); }

.rh-rail { position: sticky; top: 120px; }
.rh-rail__label {
  margin: 0 0 12px; font-size: var(--cl-text-xs); font-weight: var(--cl-w-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-fg-3);
}
.rh-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rh-rail__btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--cl-radius-s); font-family: var(--cl-font-sans);
  font-size: var(--cl-text-m); color: var(--cl-fg-2); text-align: left;
  transition: background .15s ease, color .15s ease;
}
.rh-rail__btn i { width: 18px; height: 18px; flex-shrink: 0; color: var(--cl-fg-4); transition: color .15s ease; }
.rh-rail__btn span:first-of-type, .rh-rail__btn > span { line-height: 1.3; }
.rh-rail__btn > span:not(.rh-rail__count) { flex: 1; }
.rh-rail__count {
  flex: none; font-size: var(--cl-text-xs); color: var(--cl-fg-4);
  background: var(--cl-bg-card); border-radius: var(--cl-radius-full); padding: 2px 9px; min-width: 24px; text-align: center;
}
.rh-rail__btn:hover { background: #fff; color: var(--cl-fg-1); }
.rh-rail__btn.is-active { background: var(--cl-blue-10); color: var(--cl-blue); font-weight: var(--cl-w-semibold); }
.rh-rail__btn.is-active i { color: var(--cl-blue); }
.rh-rail__btn.is-active .rh-rail__count { background: rgba(80,144,255,0.18); color: var(--cl-blue); }

/* uniform grid — all cards same size */
.rh-library .rh-grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.rh-library .rh-card__title { min-height: 0; }

/* role filter bar above the type sections */
.rh-rolebar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin-top: var(--cl-gap-l);
}
.rh-rolebar__label { font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold); color: var(--cl-fg-3); }
.rh-rolebar__chips { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.rh-rolechip {
  border: 1px solid var(--cl-border-soft); background: #fff; cursor: pointer;
  font-family: var(--cl-font-sans); font-size: var(--cl-text-s); color: var(--cl-fg-2);
  padding: 8px 16px; border-radius: var(--cl-radius-pill);
  box-shadow: var(--cl-shadow-card); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rh-rolechip:hover { color: var(--cl-fg-1); }
.rh-rolechip.is-active { background: var(--cl-blue); color: #fff; border-color: transparent; box-shadow: var(--cl-shadow-card-blue); }

/* content-type sections (categories) — horizontal card carousels */
.rh-cats { display: flex; flex-direction: column; gap: var(--cl-gap-xxl); margin-top: var(--cl-gap-xl); }
.rh-cat__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--cl-gap-m); margin-bottom: var(--cl-gap-m);
}
.rh-cat__headtext { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.rh-cat__title { margin: 0; font-size: 28px; font-weight: var(--cl-w-bold); line-height: var(--cl-lh-snug); color: var(--cl-fg-1); letter-spacing: -0.01em; }
.rh-cat__desc { margin: 0; font-size: var(--cl-para-m); line-height: var(--cl-lh-body); color: var(--cl-fg-2); max-width: 640px; }
.rh-cat__nav { display: inline-flex; gap: 10px; flex-shrink: 0; }
.cl-carousel-arrow:disabled { opacity: 0.35; cursor: default; }

/* the scrollable track — shows ~3 cards, scrolls to reveal up to 6 */
.rh-carousel { position: relative; }
.rh-carousel__track {
  display: flex; gap: var(--cl-gap-m);
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 8px;
  margin: -4px -2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rh-carousel__track::-webkit-scrollbar { display: none; }
.rh-carousel__track > .rh-card {
  flex: 0 0 clamp(280px, 31.5%, 400px);
  scroll-snap-align: start;
}
.rh-cat__more { display: flex; justify-content: flex-end; margin-top: var(--cl-gap-m); }
.rh-cat__more .rh-link { font-size: var(--cl-para-m); }
@media (max-width: 900px) { .rh-carousel__track > .rh-card { flex-basis: clamp(260px, 46%, 340px); } }
@media (max-width: 680px) { .rh-carousel__track > .rh-card { flex-basis: 82%; } }

/* =============================================================================
   MOTION — cursor-reactive (active only when body.rh-anim present)
   ============================================================================= */
/* Hero: floating parallax blobs + spotlight glow.
   Clip the blobs on the fx layer only — NOT on .rh-hero — so the open filter
   dropdown can extend below the hero without being cut off. */
.rh-hero { position: relative; }
.rh-hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; }
.rh-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.28; }
.rh-blob--1 { width: 440px; height: 440px; left: 4%; top: -8%;
  background: radial-gradient(circle, rgba(80,144,255,0.55), rgba(80,144,255,0) 70%); }
.rh-blob--2 { width: 380px; height: 380px; right: 6%; top: 2%;
  background: radial-gradient(circle, rgba(128,32,248,0.30), rgba(128,32,248,0) 70%); }
.rh-blob--3 { width: 320px; height: 320px; left: 40%; bottom: -14%;
  background: radial-gradient(circle, rgba(128,187,255,0.45), rgba(128,187,255,0) 70%); }
.rh-anim .rh-blob { animation: rh-float 14s ease-in-out infinite; }
.rh-anim .rh-blob--2 { animation-duration: 18s; animation-direction: reverse; }
.rh-anim .rh-blob--3 { animation-duration: 22s; }
@keyframes rh-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -14px) scale(1.06); }
}
.rh-hero__inner { position: relative; z-index: 1; }
.rh-hero__inner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(300px 300px at var(--mx, 50%) var(--my, 30%), rgba(80,144,255,0.10), transparent 70%);
}
.rh-hero__inner.is-hot::after { opacity: 1; }

/* Cards: 3D tilt + thumbnail parallax + pointer glow */
.rh-card { transform-style: preserve-3d; will-change: transform; }
.rh-tiles, .rh-letters, .rh-play { position: relative; z-index: 3; transition: transform .18s ease; will-change: transform; }
.rh-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(200px 200px at var(--gx, 70%) var(--gy, 12%), rgba(140,185,255,0.30), transparent 62%);
}
.rh-thumb.is-hot::after { opacity: 1; }

/* Scroll reveal (only when JS motion active) */
.rh-anim .rh-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.rh-anim .rh-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rh-anim .rh-blob { animation: none; }
  .rh-anim .rh-reveal { opacity: 1; transform: none; transition: none; }
}

/* Library responsive: collapse rail above the grid */
@media (max-width: 900px) {
  .rh-library__layout { grid-template-columns: 1fr; gap: var(--cl-gap-l); }
  .rh-rail { position: static; }
  .rh-rail__list { flex-direction: row; flex-wrap: wrap; }
  .rh-rail__btn { width: auto; }
  .rh-rail__count { display: none; }
  .rh-library .rh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .rh-library .rh-grid { grid-template-columns: 1fr; }
}