/* The platform diagram (Solutions and Home): a case holding four modules, with the features that run
   across all of them as a band over the module columns. Ours, not from the Umbraco build. */
.rf-platform {
  --rf-ink: #1e203b; --rf-navy: #252b3c; --rf-blue: #469dbd; --rf-blue-soft: #7dbad0; --rf-orange: #d48a42; --rf-orange-soft: #e0ad7a;
  background: #fbf6f1; border: 1px solid #efdcc8; border-radius: 16px; padding: clamp(16px, 3vw, 32px);
  color: var(--rf-ink); text-align: left; font-size: 16px; line-height: 24px;
}
.rf-platform p, .rf-platform li { font-size: 16px; line-height: 24px; margin: 0; }
.rf-platform a { text-decoration: none; }
.rf-platform svg { flex: none; }

.rf-platform__case { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.rf-platform__tag {
  flex: none; background: var(--rf-orange); color: #fff; border-radius: 6px; padding: 4px 12px;
  font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.rf-platform .rf-platform__label {
  margin: 0 0 12px; color: var(--rf-blue); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.rf-platform__modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rf-platform__module {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 24px 16px 136px; border-radius: 12px; border: 1px solid #cfe5ee; background: linear-gradient(#f5fafc, #e4f1f6);
  color: var(--rf-ink); transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.rf-platform__module:hover, a.rf-platform__module:focus-visible { border-color: var(--rf-blue); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 32, 59, .12); }
.rf-platform__module svg { width: 44px; height: 44px; color: var(--rf-blue); margin-bottom: 8px; }
.rf-platform__module strong { font-size: 21px; line-height: 28px; font-weight: 700; }
.rf-platform__module span { font-size: 15px; line-height: 22px; color: #4a5068; }

.rf-platform__band {
  position: relative; margin: -112px 12px 0; padding: 20px 24px; border-radius: 12px;
  background: rgba(37, 43, 60, .97); color: #fff; box-shadow: 0 14px 34px rgba(30, 32, 59, .28);
}
.rf-platform__band .rf-platform__label { color: var(--rf-blue-soft); }
.rf-platform__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; width: auto; }
@media (min-width: 1200px) { .rf-platform__chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.richtext .rf-platform__chips { padding: 0; list-style: none; width: auto; }
.rf-platform__chips li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 8px;
  background: var(--rf-ink); border: 1px solid rgba(255, 255, 255, .14); font-size: 15px; line-height: 22px; font-weight: 600;
}
.rf-platform__chips li::marker { content: none; }
.rf-platform__chips a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.rf-platform__chips a:hover { color: var(--rf-orange-soft); }
.rf-platform__chips svg { width: 20px; height: 20px; color: var(--rf-orange-soft); }

.rf-platform__ai {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.rf-platform__ai svg { width: 26px; height: 26px; color: var(--rf-orange-soft); }
.rf-platform__ai strong { font-size: 17px; font-weight: 700; }
.rf-platform__ai span { color: rgba(255, 255, 255, .85); font-size: 15px; }
.rf-platform__ai em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-ink); background: var(--rf-orange-soft); border-radius: 4px; padding: 1px 8px; }
a.rf-platform__ai:hover strong { color: var(--rf-orange-soft); }

@media (max-width: 991px) {
  .rf-platform__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-platform__module { padding-bottom: 24px; }
  .rf-platform__band { margin: 16px 0 0; }
}
@media (max-width: 479px) {
  .rf-platform__modules { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rf-platform__module { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; row-gap: 0; align-items: center; text-align: left; padding: 14px 16px; }
  .rf-platform__module svg { grid-row: span 2; width: 36px; height: 36px; margin: 0; }
  .rf-platform__module strong { font-size: 18px; line-height: 24px; }
  .rf-platform__case { flex-direction: column; gap: 8px; }
  .rf-platform__band { padding: 16px; }
  .rf-platform__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rf-platform__chips li { padding: 8px 10px; font-size: 14px; line-height: 20px; }
}

/* A ticked-points block's introduction is a heading for the whole list: give it the full row
   instead of one of the points' columns. */
.blurb-list > .blurb-list__text { width: 100%; }

/* Logo marquee: both copies of the list sit in one track that slides exactly -50% (no calc() or
   custom property inside the keyframes, which Safari can get wrong), so the loop has no seam.
   Each copy carries its own trailing gap so the two halves are identical. */
.marquee__track { display: flex; flex-shrink: 0; width: max-content; animation: rf-marquee var(--marquee-animation-speed, 40s) linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__track > .marquee__content { animation: none; min-width: 0; justify-content: flex-start; padding-right: var(--marquee-gap); }
.marquee--pause-on-hover:hover .marquee__track { animation-play-state: paused; }
@keyframes rf-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-play-state: paused; } }
/* marquee.js moves the track itself once it has started (smooth in every browser); the CSS animation above
   is only the fallback when the script does not run. */
.marquee--js .marquee__track { animation: none; }