/* Course fee cards (Fellowship, Growth Modification) */
@property --cf-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cf-section { padding: 76px 28px; background: #101010; color: #fff; font-weight: 400; line-height: 1.7; scroll-margin-top: 160px; }
.cf-layout { display: grid; grid-template-columns: .7fr 2fr; align-items: start; gap: 48px; max-width: 1280px; margin: auto; }
.cf-heading { padding-top: 22px; }
.cf-heading p { margin-bottom: 17px; color: #fcdb66; font-size: 12px; font-weight: 700; line-height: 22.5px; letter-spacing: 1.7px; }
.cf-section h2 { font: 500 clamp(34px, 3.6vw, 54px)/1.2 var(--font-heading); letter-spacing: -1.5px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; min-width: 0; }
.cf-frame { position: relative; isolation: isolate; display: flex; min-width: 0; border-radius: 15px; }
.cf-frame::before, .cf-frame::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--cf-angle), #000, #fcdb66, #000, #fcdb66, #000); opacity: 0; pointer-events: none; animation: cf-rotate 2.5s linear infinite paused; transition: opacity .3s; }
.cf-frame::after { inset: 0; filter: blur(13px); }
.cf-frame:hover::before, .cf-frame:focus-within::before { opacity: 1; animation-play-state: running; }
.cf-frame:hover::after, .cf-frame:focus-within::after { opacity: .2; animation-play-state: running; }
@keyframes cf-rotate { to { --cf-angle: 360deg; } }
.cf-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 36px 34px 30px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; background: linear-gradient(0deg, #0c0c0c 0%, #1c1c1c 98.44%); }
.cf-section h3 { margin-bottom: 20px; font: 500 24px/1.4 var(--font-body); letter-spacing: -.4px; }
.cf-amount { margin-bottom: 9px; color: #fcdb66; font: 600 clamp(32px, 3.2vw, 48px)/1.2 var(--font-body); letter-spacing: -1.7px; white-space: nowrap; }
.cf-supplement { margin-bottom: 21px; color: #aaa; line-height: 30px; }
.cf-supplement strong { color: #fff; font-weight: 500; }
.cf-description { min-height: 54px; margin-bottom: 30px; color: #aaa; font-size: 15px; line-height: 1.8; }
.cf-button { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 13px; min-height: 57px; padding: 13px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 30px; background: #101010; color: #fff; font-weight: 600; transition: color .5s; }
.cf-button::before { content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: 0; height: 100%; background: #fcdb66; transition: width .5s; }
.cf-button:hover, .cf-button:focus-visible { color: #000; }
.cf-button:hover::before, .cf-button:focus-visible::before { left: 0; width: 100%; }
.cf-button span { font-size: 23px; line-height: 1; }
.cf-features { position: relative; flex: 1; margin-top: 64px; }
.cf-features::before, .cf-features::after { content: ""; position: absolute; top: -33px; height: 1px; transition: all .5s; }
.cf-features::before { left: 0; width: 100%; background: #2b2b2b; }
.cf-features::after { left: 50%; width: 0; background: #fcdb66; opacity: 0; }
.cf-frame:hover .cf-features::after, .cf-frame:focus-within .cf-features::after { left: 0; width: 100%; opacity: 1; }
.cf-section h4 { margin-bottom: 15px; font: 500 20px/1.5 var(--font-body); letter-spacing: -1px; }
.cf-features li { display: flex; align-items: baseline; gap: 11px; margin: 10px 0; padding-left: 31.875px; color: #aaa; font-size: 15px; line-height: 1.8; }
.cf-features li > span { display: inline-flex; flex: 0 0 18px; justify-content: center; align-items: center; height: 18px; border-radius: 50%; background: #fcdb66; color: #111; font: 700 12px/1 Arial, sans-serif; }
@media (max-width: 1100px) {
  .cf-layout { grid-template-columns: 1fr; gap: 32px; }
  .cf-heading { padding: 0; }
  .cf-amount { font-size: 44px; }
}
@media (max-width: 767px) {
  .cf-section { padding: 44px 22px; }
}
@media (max-width: 650px) {
  .cf-grid { grid-template-columns: 1fr; gap: 24px; }
  .cf-card { padding: 30px 26px; }
  .cf-description { min-height: 0; }
  .cf-amount { font-size: 42px; }
  .cf-section h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-frame::before, .cf-frame::after { animation: none; }
  .cf-section *, .cf-section *::before, .cf-section *::after { transition: none; }
}