body.mf-system-college {
  --college-gold: #f5c842;
  --college-blue: #4b8df7;
  --college-green: #41c878;
  --college-red: #d94b4b;
  background:
    radial-gradient(circle at 14% 8%, rgba(75, 141, 247, .13), transparent 23rem),
    radial-gradient(circle at 88% 18%, rgba(245, 200, 66, .1), transparent 24rem),
    radial-gradient(circle at 50% 82%, rgba(65, 200, 120, .08), transparent 24rem),
    #06100b;
}

body.mf-system-college .mf-editorial-hero {
  background:
    linear-gradient(90deg, rgba(4, 9, 8, .92), rgba(4, 9, 8, .58) 48%, rgba(4, 9, 8, .9)),
    url("../img/stl-hero/youth-soccer-field.jpg") center / cover no-repeat !important;
}

body.mf-system-college .mf-college-frame-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.2rem, 3vw, 2.4rem) !important;
}

body.mf-system-college .mf-college-frame-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(75, 141, 247, .16), transparent 32%),
    radial-gradient(circle at 72% 20%, rgba(245, 200, 66, .18), transparent 18rem),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

body.mf-system-college .mf-college-frame-section > .stl-container {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-frame-section .mf-system-shell {
  position: relative;
  overflow: hidden;
  border-color: rgba(245, 200, 66, .2);
  background:
    linear-gradient(180deg, rgba(13, 33, 35, .88), rgba(6, 15, 13, .9)),
    radial-gradient(circle at 16% 0%, rgba(75, 141, 247, .14), transparent 18rem);
  box-shadow: 0 24px 62px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255,255,255,.04);
}

body.mf-system-college .mf-college-frame-section .mf-system-shell--accent::after {
  content: "";
  position: absolute;
  right: -2.6rem;
  top: -2.8rem;
  width: 11rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(245, 200, 66, .18), transparent 62%),
    url("../fallbacks/logo-square.svg") center / 70% no-repeat;
  opacity: .5;
  pointer-events: none;
}

body.mf-system-college .mf-college-lane-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.mf-system-college .mf-college-lane {
  position: relative;
  min-height: 7.5rem;
  align-content: end;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(circle at 10% 0%, var(--lane-glow, rgba(245, 200, 66, .18)), transparent 12rem);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.mf-system-college .mf-college-lane--recruiting { --lane-glow: rgba(245, 200, 66, .22); }
body.mf-system-college .mf-college-lane--fit { --lane-glow: rgba(75, 141, 247, .24); }
body.mf-system-college .mf-college-lane--movement { --lane-glow: rgba(65, 200, 120, .22); }

body.mf-system-college .mf-college-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%),
    url("../img/stl-hero/youth-soccer-field.jpg") center / cover no-repeat;
  opacity: .16;
  transition: opacity .2s ease, transform .2s ease;
}

body.mf-system-college .mf-college-lane:hover,
body.mf-system-college .mf-college-lane:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(245, 200, 66, .38);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

body.mf-system-college .mf-college-lane:hover::before,
body.mf-system-college .mf-college-lane:focus-visible::before {
  opacity: .28;
  transform: scale(1.04);
}

body.mf-system-college .mf-college-lane > * {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-lane__number {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  margin-bottom: .72rem;
  border-radius: 999px;
  background: rgba(245, 200, 66, .92);
  color: #071007 !important;
  font: 900 .72rem/1 var(--f-mono);
  letter-spacing: 0;
}

body.mf-system-college .mf-college-official-shell {
  display: grid;
  align-content: space-between;
  gap: 1rem;
}

body.mf-system-college .mf-college-official-links {
  display: grid;
  gap: .5rem;
}

body.mf-system-college .mf-college-official-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .78rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .72rem;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

body.mf-system-college .mf-college-official-links a:hover,
body.mf-system-college .mf-college-official-links a:focus-visible {
  transform: translateX(4px);
  border-color: rgba(245, 200, 66, .36);
  background: linear-gradient(90deg, rgba(245, 200, 66, .12), rgba(255,255,255,.03));
}

body.mf-system-college .mf-college-official-links span {
  color: var(--college-gold);
  font: 900 .74rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.mf-system-college .mf-college-official-links small {
  color: rgba(245,246,240,.72);
}

body.mf-system-college .mf-route-card {
  position: relative;
  overflow: hidden;
}

body.mf-system-college .mf-college-route-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 14, 18, .96), rgba(6, 18, 15, .82)),
    radial-gradient(circle at 12% 20%, rgba(75, 141, 247, .12), transparent 19rem),
    radial-gradient(circle at 88% 30%, rgba(245, 200, 66, .13), transparent 21rem);
}

body.mf-system-college .mf-college-route-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(75, 141, 247, .16), transparent 30% 70%, rgba(245, 200, 66, .12)),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
}

body.mf-system-college .mf-college-route-section > .stl-container {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-route-grid {
  grid-template-columns: 1.05fr 1fr 1.05fr;
  align-items: stretch;
}

body.mf-system-college .mf-college-route-card {
  min-height: 13.25rem;
  display: grid;
  align-content: end;
  gap: .68rem;
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(14, 42, 48, .82), rgba(5, 15, 14, .9)),
    var(--route-photo) center / cover no-repeat !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body.mf-system-college .mf-college-route-card--school,
body.mf-system-college .mf-college-route-card--player,
body.mf-system-college .mf-college-route-card--desk {
  --route-photo: url("../img/stl-hero/youth-soccer-field.jpg");
}

body.mf-system-college .mf-college-route-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,10,9,.28), rgba(4,10,9,.9)),
    radial-gradient(circle at 0% 0%, var(--card-glow, rgba(245, 200, 66, .16)), transparent 14rem);
  pointer-events: none;
  opacity: .98;
  transition: opacity .2s ease, transform .2s ease;
}

body.mf-system-college .mf-college-route-card--school { --card-glow: rgba(75, 141, 247, .22); }
body.mf-system-college .mf-college-route-card--player { --card-glow: rgba(65, 200, 120, .2); }
body.mf-system-college .mf-college-route-card--desk { --card-glow: rgba(245, 200, 66, .22); }

body.mf-system-college .mf-college-route-card::after {
  content: "";
  position: absolute;
  right: .85rem;
  top: .85rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    var(--route-photo) center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  opacity: .86;
}

body.mf-system-college .mf-route-card > * {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-route-card:hover,
body.mf-system-college .mf-college-route-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(245, 200, 66, .38);
  box-shadow: 0 28px 68px rgba(0,0,0,.34), 0 0 0 1px rgba(245, 200, 66, .1);
}

body.mf-system-college .mf-college-route-card:hover::before,
body.mf-system-college .mf-college-route-card:focus-within::before {
  opacity: .88;
  transform: scale(1.035);
}

body.mf-system-college .mf-college-route-card .mf-hub-card__meta {
  width: fit-content;
  padding: .32rem .5rem;
  border: 1px solid rgba(245, 200, 66, .22);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
}

body.mf-system-college .mf-theme-action {
  position: relative;
  min-height: 3.1rem;
  justify-content: flex-start;
  overflow: hidden;
  padding-left: 3.9rem !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42), rgba(245, 200, 66, .9)),
    var(--action-image) center / cover no-repeat !important;
  border-color: rgba(245, 200, 66, .34) !important;
}

body.mf-system-college .mf-theme-action::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: .45rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--action-image) center / cover no-repeat;
}

body.mf-system-college .mf-theme-action span {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-theme-action--school,
body.mf-system-college .mf-theme-action--player,
body.mf-system-college .mf-theme-action--college {
  --action-image: url("../img/stl-hero/youth-soccer-field.jpg");
}

body.mf-system-college .mf-college-logic-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 13, 16, .96), rgba(8, 22, 18, .82)),
    radial-gradient(circle at 14% 20%, rgba(245, 200, 66, .14), transparent 21rem),
    radial-gradient(circle at 84% 12%, rgba(75, 141, 247, .14), transparent 23rem) !important;
}

body.mf-system-college .mf-college-logic-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(65, 200, 120, .13), transparent 34%),
    url("../img/stl-hero/youth-soccer-field.jpg") center / cover no-repeat;
  opacity: .18;
}

body.mf-system-college .mf-college-logic-section > .stl-container {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-logic-grid {
  align-items: stretch;
}

body.mf-system-college .mf-college-logic-card {
  position: relative;
  min-height: 14rem;
  display: grid;
  align-content: end;
  gap: .62rem;
  overflow: hidden;
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(13, 38, 43, .88), rgba(5, 15, 14, .93)),
    url("../img/stl-hero/youth-soccer-field.jpg") center / cover no-repeat !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body.mf-system-college .mf-college-logic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,10,9,.18), rgba(4,10,9,.92)),
    radial-gradient(circle at 14% 4%, var(--logic-glow, rgba(245, 200, 66, .2)), transparent 13rem);
}

body.mf-system-college .mf-college-logic-card--fit { --logic-glow: rgba(245, 200, 66, .24); }
body.mf-system-college .mf-college-logic-card--timing { --logic-glow: rgba(75, 141, 247, .24); }
body.mf-system-college .mf-college-logic-card--connection { --logic-glow: rgba(65, 200, 120, .24); }

body.mf-system-college .mf-college-logic-card > * {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-logic-card:hover,
body.mf-system-college .mf-college-logic-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(245, 200, 66, .4);
  box-shadow: 0 30px 72px rgba(0,0,0,.35);
}

body.mf-system-college .mf-college-logic-card .mf-hub-card__meta {
  width: fit-content;
  padding: .32rem .5rem;
  border: 1px solid rgba(245, 200, 66, .22);
  border-radius: 999px;
  background: rgba(0,0,0,.25);
}

body.mf-system-college .mf-college-resources-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(6, 17, 18, .96), rgba(7, 20, 17, .82)),
    radial-gradient(circle at 16% 12%, rgba(75, 141, 247, .13), transparent 20rem),
    radial-gradient(circle at 86% 18%, rgba(245, 200, 66, .14), transparent 22rem) !important;
}

body.mf-system-college .mf-college-resources-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(245, 200, 66, .13), transparent 28% 72%, rgba(65, 200, 120, .12)),
    url("../img/stl-hero/youth-soccer-field.jpg") center / cover no-repeat;
  opacity: .16;
}

body.mf-system-college .mf-college-resources-section > .stl-container {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-resource-grid {
  align-items: stretch;
}

body.mf-system-college .mf-college-resource-card {
  position: relative;
  min-height: 14.5rem;
  display: grid;
  align-content: end;
  gap: .62rem;
  overflow: hidden;
  border-color: rgba(255,255,255,.1);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(13, 38, 43, .84), rgba(5, 15, 14, .93)),
    url("../img/stl-hero/youth-soccer-field.jpg") center / cover no-repeat !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body.mf-system-college .mf-college-resource-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,10,9,.18), rgba(4,10,9,.94)),
    radial-gradient(circle at 12% 4%, var(--resource-glow, rgba(245, 200, 66, .2)), transparent 13rem);
}

body.mf-system-college .mf-college-resource-card::after {
  content: attr(href);
  position: absolute;
  right: .75rem;
  top: .72rem;
  max-width: 11rem;
  padding: .32rem .48rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(245,246,240,.62);
  background: rgba(0,0,0,.26);
  font: 700 .54rem/1.2 var(--f-mono);
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mf-system-college .mf-college-resource-card--ncaa { --resource-glow: rgba(75, 141, 247, .25); }
body.mf-system-college .mf-college-resource-card--naia { --resource-glow: rgba(245, 200, 66, .24); }
body.mf-system-college .mf-college-resource-card--njcaa { --resource-glow: rgba(65, 200, 120, .24); }

body.mf-system-college .mf-college-resource-card > * {
  position: relative;
  z-index: 1;
}

body.mf-system-college .mf-college-resource-card:hover,
body.mf-system-college .mf-college-resource-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(245, 200, 66, .4);
  box-shadow: 0 30px 72px rgba(0,0,0,.35);
}

body.mf-system-college .mf-college-resource-card .mf-theme-action {
  width: fit-content;
  margin-top: .2rem;
  color: #071007;
  text-decoration: none;
}

@media (max-width: 860px) {
  body.mf-system-college .mf-college-lane-row {
    grid-template-columns: 1fr;
  }

  body.mf-system-college .mf-college-route-grid {
    grid-template-columns: 1fr;
  }
}