.referral-page { display: flex; min-height: 100vh; flex-direction: column; }
.referral-main { flex: 1 0 auto; background: #f2f5f9; }
.referral-hero { min-height: 270px; }
.referral-hero .tuition-hero__inner { width: min(100% - 48px, 860px); padding-top: 54px; padding-bottom: 65px; }
.referral-hero h1 { max-width: 400px; font-size: clamp(32px, 3vw, 38px); line-height: 1.05; }
.referral-hero p { max-width: 480px; font-size: 11px; line-height: 1.5; }
.referral-container { width: min(100% - 40px, 864px); }
.referral-welcome { margin-top: -34px; padding: 14px 31px; }
.referral-welcome .welcome-step-one { grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr); gap: 22px; }
.referral-welcome .welcome-copy h2 { margin-bottom: 1px; font-size: 22px; }
.referral-welcome .welcome-copy p { font-size: 10px; }
.referral-welcome .welcome-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 10px; }
.referral-welcome .welcome-fields input, .referral-welcome .welcome-next { height: 34px; min-height: 34px; border-radius: 8px; font-size: 10px; }
.referral-welcome .welcome-fields input { padding: 0 13px; }
.referral-welcome .welcome-next { padding: 0 18px; background: linear-gradient(105deg, #002676, #2454a5); text-transform: none; }
.referral-welcome .welcome-next span { font-size: 17px; }
.referral-edit-button { grid-column: 2; justify-self: start; min-height: 34px; padding: 0 16px; border: 1px solid #697078; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: 11px; }
.referral-edit-button:hover, .referral-edit-button:focus-visible { border-color: #fff; background: #fff; color: #202428; }
.referral-edit-button:focus-visible { outline: 2px solid #9bb9ed; outline-offset: 3px; }
.referral-breadcrumbs { margin-top: 0; margin-bottom: 14px; border-color: #f0e2e4; border-radius: 8px; }
.referral-breadcrumbs a { color: #111820; font-weight: 600; }
.referral-breadcrumbs a svg { width: 13px; height: 13px; fill: currentColor; }
.referral-breadcrumb-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #173b70; }
.referral-learning { position: relative; overflow: hidden; padding: 34px 20px 58px; background: #f2f5f9; }
.referral-learning__inner { position: relative; z-index: 1; width: min(100%, 660px); margin: 0 auto; }
.referral-learning-intro { margin: 0 auto 32px; text-align: center; }
.referral-learning-badge { display: inline-flex; min-height: 25px; align-items: center; gap: 7px; margin-bottom: 13px; padding: 0 12px; border: 1px solid #e8ebf1; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(30, 45, 67, .04); color: #303b4a; font-size: 8px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.referral-learning-badge span { color: #173b70; font-size: 11px; }
.referral-learning-intro h2 { max-width: 620px; margin: 0 auto 8px; color: #111820; font-size: clamp(19px, 2.15vw, 24px); font-weight: 850; letter-spacing: -.025em; line-height: 1.25; }
.referral-learning-intro > p { max-width: 560px; margin: 0 auto; color: #758092; font-size: 10px; line-height: 1.55; }
.referral-learning-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.referral-learning-card { min-width: 0; min-height: 122px; padding: 19px 20px; border: 1px solid rgba(231, 234, 241, .85); border-radius: 11px; background: #fff; box-shadow: 0 9px 24px rgba(35, 48, 68, .055); }
.referral-learning-card h3 { margin: 0 0 9px; color: #161b23; font-size: 11px; font-weight: 850; line-height: 1.4; }
.referral-learning-card p { margin: 0; color: #657184; font-size: 9px; line-height: 1.55; }
.referral-learning-card--platform { display: flex; align-items: center; }
.referral-learning-card--platform p { color: #526074; font-size: 10px; }
.referral-library-visual { position: relative; width: min(100%, 428px); aspect-ratio: 1.49; margin: 12px auto 0; overflow: hidden; border-radius: 10px; background: #202428; box-shadow: 0 14px 30px rgba(48, 31, 44, .13); }
.referral-library-visual::after { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(12, 39, 73, .24) 38%, rgba(15, 54, 99, .88) 100%); content: ''; pointer-events: none; }
.referral-library-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.referral-feedback { position: relative; overflow: hidden; padding: 36px 20px 48px; background: linear-gradient(112deg, #0b2b50 0%, #124276 52%, #1d5790 100%); color: #fff; isolation: isolate; }
.referral-feedback__inner { position: relative; z-index: 1; width: min(100%, 590px); margin: 0 auto; text-align: center; }
.referral-feedback-icon { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 16px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; outline: 1px dashed rgba(255,255,255,.18); outline-offset: 5px; background: rgba(255,255,255,.14); box-shadow: 0 8px 24px rgba(3, 20, 41, .16); }
.referral-feedback-icon svg { width: 25px; height: 25px; fill: #fff; }
.referral-feedback h2 { margin: 0 0 11px; color: #fff; font-size: clamp(18px, 2.1vw, 22px); font-weight: 850; letter-spacing: -.02em; line-height: 1.25; }
.referral-feedback p { max-width: 560px; margin: 0 auto 20px; color: rgba(242, 247, 255, .88); font-size: 10px; line-height: 1.6; }
.referral-feedback-link { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(2, 18, 37, .16); color: #123b68; font-size: 10px; font-weight: 850; text-decoration: none; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.referral-feedback-link:hover, .referral-feedback-link:focus-visible { background: #e4edf8; box-shadow: 0 11px 24px rgba(2, 18, 37, .23); color: #092644; text-decoration: none; transform: translateY(-2px); }
.referral-feedback-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.referral-feedback-link span { font-size: 16px; line-height: .8; }
.referral-feedback-orbit { position: absolute; z-index: 0; border: 1px dashed rgba(255,255,255,.13); border-radius: 50%; pointer-events: none; }
.referral-feedback-orbit--left { top: -84px; left: 31%; width: 250px; height: 250px; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018); }
.referral-feedback-orbit--right { top: 37%; right: 9%; width: 86px; height: 86px; background: rgba(255,255,255,.035); }
.referral-participation { display: grid; min-height: 280px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 4px solid #173b70; background: #f1f4fc; }
.referral-participation-visual { position: relative; min-height: 280px; overflow: hidden; background: #102d57; isolation: isolate; }
.referral-participation-visual::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, rgba(8, 28, 63, .72), rgba(22, 58, 119, .64)); content: ''; }
.referral-participation-visual > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.participation-orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(255,255,255,.22); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.participation-orbit--large { width: 104px; height: 104px; box-shadow: 0 0 0 20px rgba(255,255,255,.025); }
.participation-orbit--small { width: 76px; height: 76px; border-style: solid; border-color: rgba(255,255,255,.15); }
.participation-icon { position: absolute; top: 50%; left: 50%; display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; background: rgba(35, 77, 143, .8); box-shadow: 0 8px 24px rgba(2,16,42,.2); transform: translate(-50%, -50%); }
.participation-icon svg { width: 23px; height: 23px; fill: #fff; }
.participation-join { position: absolute; bottom: 19px; left: 20px; display: inline-flex; min-height: 43px; align-items: center; gap: 10px; padding: 5px 15px 5px 7px; border: 1px solid rgba(255,255,255,.85); border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(2,16,42,.15); color: #233246; font-size: 10px; font-weight: 750; text-decoration: none; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.participation-join:hover, .participation-join:focus-visible { background: #eaf1fa; box-shadow: 0 9px 22px rgba(2,16,42,.22); color: #102d57; text-decoration: none; transform: translateY(-2px); }
.participation-join:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.participation-join > span:last-child { font-size: 15px; }
.participation-join-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #1d2631; }
.participation-join-icon svg { width: 16px; height: 16px; fill: #fff; }
.referral-participation-copy { position: relative; display: flex; min-width: 0; align-items: center; overflow: hidden; padding: clamp(28px, 5vw, 60px); background: linear-gradient(140deg, #f4f6ff, #edf2fd); }
.participation-copy-inner { position: relative; z-index: 1; width: min(100%, 600px); }
.participation-heading-icon { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 12px; border: 1px solid #dce5f4; border-radius: 12px; outline: 1px dashed #cbd8ed; outline-offset: 4px; background: #fff; box-shadow: 0 6px 16px rgba(30, 60, 105, .06); }
.participation-heading-icon svg { width: 16px; height: 16px; fill: #203f6a; }
.participation-copy-inner h2 { margin: 0 0 12px; color: #111b2b; font-size: clamp(16px, 1.7vw, 20px); font-weight: 850; letter-spacing: -.02em; }
.participation-copy-inner p { margin: 0 0 10px; padding-left: 12px; border-left: 1px solid #9eacc2; color: #5e6b7e; font-size: 12px; line-height: 1.65; }
.participation-copy-inner p:last-child { margin-bottom: 0; }
.participation-copy-orb { position: absolute; border: 1px solid rgba(75, 115, 177, .1); border-radius: 50%; pointer-events: none; }
.participation-copy-orb--top { top: 15%; right: 12%; width: 42px; height: 42px; background: rgba(88, 126, 190, .055); }
.participation-copy-orb--bottom { right: 5%; bottom: 20%; width: 28px; height: 28px; }
.referral-howto { padding: 42px 20px 54px; background: linear-gradient(180deg, #fff 0%, #f8faff 100%); }
.referral-howto-card { position: relative; width: min(100%, 540px); min-height: 165px; margin: 0 auto; padding: 22px 25px 19px; border-top: 3px solid #dbe4f1; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(28, 49, 81, .075); transition: border-color .22s, box-shadow .22s, transform .22s; }
.referral-howto-card:hover, .referral-howto-card:focus-visible { border-top-color: #173b70; box-shadow: 0 19px 38px rgba(28, 49, 81, .14); transform: translateY(-5px); }
.referral-howto-card:focus-visible { outline: 2px solid #5076a8; outline-offset: 4px; }
.referral-howto-heading { display: flex; align-items: center; gap: 14px; }
.referral-howto-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #173b70, #0b2550); box-shadow: 0 6px 14px rgba(19, 56, 104, .18); }
.referral-howto-icon svg { width: 15px; height: 15px; fill: #fff; }
.referral-howto-heading h2 { margin: 0; color: #172130; font-size: 13px; font-weight: 850; line-height: 1.3; }
.referral-howto-rule { display: block; width: 29px; height: 2px; margin: 14px 0 10px 54px; border-radius: 2px; background: #173b70; }
.referral-howto-card > p { margin: 0 0 0 54px; padding-left: 10px; border-left: 1px solid #b9c8dc; color: #647186; font-size: 10px; line-height: 1.55; }
.referral-howto-steps { display: flex; align-items: center; gap: 19px; margin: 14px 0 0 54px; padding: 0; list-style: none; }
.referral-howto-steps li { position: relative; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #edf3fb; color: #173b70; font-size: 9px; font-weight: 750; }
.referral-howto-steps li + li::before { position: absolute; top: 50%; right: calc(100% + 4px); width: 14px; height: 1px; background: #8da2be; content: ''; }
.referral-benefits { display: grid; min-height: 300px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 4px solid #173b70; background: #f2f5ff; }
.referral-benefits-visual { position: relative; min-height: 300px; overflow: hidden; background: #102b59; isolation: isolate; }
.referral-benefits-visual::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, rgba(8, 27, 66, .74), rgba(28, 59, 137, .72)); content: ''; }
.referral-benefits-visual > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.benefits-orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(226, 235, 255, .3); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.benefits-orbit--outer { width: 112px; height: 112px; box-shadow: 0 0 0 22px rgba(255,255,255,.025); }
.benefits-orbit--inner { width: 82px; height: 82px; border-style: solid; border-color: rgba(226, 235, 255, .18); }
.benefits-main-icon { position: absolute; top: 50%; left: 50%; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(35, 77, 143, .8); box-shadow: 0 10px 25px rgba(2, 16, 42, .2); transform: translate(-50%, -50%); }
.benefits-main-icon svg { width: 23px; height: 23px; fill: #fff; }
.referral-benefits-content { position: relative; display: flex; min-width: 0; align-items: center; overflow: hidden; padding: clamp(24px, 3.2vw, 44px); background: linear-gradient(135deg, #f5f7ff, #edf2ff); }
.referral-benefits-content-inner { position: relative; z-index: 1; width: min(100%, 720px); }
.referral-benefits-badge { display: inline-flex; min-height: 24px; align-items: center; gap: 6px; margin-bottom: 11px; padding: 0 10px; border: 1px solid #e2e8f4; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(30, 45, 67, .05); color: #223753; font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.referral-benefits-badge svg { width: 12px; height: 12px; fill: #173b70; }
.referral-benefits-content h2 { margin: 0 0 16px; color: #111b2b; font-size: clamp(17px, 1.8vw, 21px); font-weight: 850; letter-spacing: -.02em; line-height: 1.25; }
.referral-benefit-list { display: grid; gap: 9px; }
.referral-benefit-card { display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px; border: 1px solid #e4eaf5; border-radius: 10px; background: #fff; box-shadow: 0 5px 14px rgba(31, 52, 88, .045); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.referral-benefit-card:hover, .referral-benefit-card:focus-visible { border-color: #b5c8e2; background: #fff; box-shadow: 0 11px 23px rgba(28, 58, 103, .12); transform: translateY(-3px); }
.referral-benefit-card:focus-visible { outline: 2px solid #5076a8; outline-offset: 3px; }
.referral-benefit-check { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: #1f3043; }
.referral-benefit-check svg { width: 17px; height: 17px; fill: #fff; }
.referral-benefit-card p { margin: 0; color: #59677b; font-size: 10px; line-height: 1.55; }
.referral-benefits-orb { position: absolute; border: 1px dashed rgba(80, 118, 168, .13); border-radius: 50%; pointer-events: none; }
.referral-benefits-orb--top { top: 10%; right: 8%; width: 56px; height: 56px; }
.referral-benefits-orb--bottom { right: 4%; bottom: 13%; width: 30px; height: 30px; background: rgba(80, 118, 168, .04); }
.referral-offerings { position: relative; overflow: hidden; padding: 42px 20px 58px; background: linear-gradient(145deg, #f5f7ff, #eef2fd); }
.referral-offerings__inner { position: relative; z-index: 1; width: min(100%, 870px); margin: 0 auto; }
.referral-offerings-intro { margin: 0 auto 28px; text-align: center; }
.referral-offerings-badge { display: inline-flex; min-height: 25px; align-items: center; gap: 7px; margin-bottom: 11px; padding: 0 12px; border: 1px solid #e1e7f1; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(30, 45, 67, .05); color: #243650; font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.referral-offerings-badge span { color: #173b70; font-size: 12px; }
.referral-offerings-intro h2 { margin: 0 0 5px; color: #111b2b; font-size: clamp(22px, 2.5vw, 28px); font-weight: 850; letter-spacing: -.025em; line-height: 1.2; }
.referral-offerings-intro p { margin: 0; color: #6d798d; font-size: 10px; line-height: 1.5; }
.referral-offerings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 15px; }
.referral-offering-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e5eaf2; border-radius: 14px; background: #fff; box-shadow: 0 9px 25px rgba(32, 49, 79, .075); color: inherit; text-decoration: none; transition: border-color .22s, box-shadow .22s, transform .22s; }
.referral-offering-card:hover, .referral-offering-card:focus-visible { border-color: #b8c9df; box-shadow: 0 18px 34px rgba(28, 52, 91, .16); color: inherit; text-decoration: none; transform: translateY(-6px); }
.referral-offering-card:focus-visible { outline: 2px solid #5076a8; outline-offset: 4px; }
.referral-offering-image { position: relative; height: 132px; flex: 0 0 132px; overflow: hidden; background: #dfe7f3; }
.referral-offering-image::after { position: absolute; inset: 48% 0 0; background: linear-gradient(180deg, transparent, rgba(12, 34, 67, .2)); content: ''; pointer-events: none; }
.referral-offering-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.referral-offering-card:hover .referral-offering-image img, .referral-offering-card:focus-visible .referral-offering-image img { transform: scale(1.055); }
.referral-offering-number { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: #1c2d43; box-shadow: 0 4px 10px rgba(0,0,0,.16); color: #fff; font-size: 9px; font-weight: 800; }
.referral-offering-copy { display: flex; flex: 1 1 auto; align-items: flex-start; flex-direction: column; padding: 15px 16px 18px; }
.referral-offering-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; margin: 0 0 9px; border-radius: 9px; background: linear-gradient(145deg, #183e77, #0d2753); box-shadow: 0 5px 12px rgba(18, 54, 103, .16); transition: transform .22s; }
.referral-offering-card:hover .referral-offering-icon { transform: rotate(-5deg) scale(1.06); }
.referral-offering-icon svg { width: 17px; height: 17px; fill: #fff; }
.referral-offering-copy h3 { margin: 0 0 7px; color: #111b2b; font-size: 12px; font-weight: 850; line-height: 1.35; }
.referral-offering-copy p { margin: 0; color: #687589; font-size: 10px; line-height: 1.55; }
.referral-offering-card:hover .referral-offering-copy h3 { color: #173b70; }

@media (max-width: 760px) {
  .referral-hero { min-height: 245px; }
  .referral-hero .tuition-hero__inner { width: min(100% - 36px, 860px); padding-top: 45px; padding-bottom: 70px; }
  .referral-container { width: min(100% - 28px, 864px); }
  .referral-welcome { padding: 17px; }
  .referral-welcome .welcome-step-one { grid-template-columns: 1fr; gap: 13px; }
  .referral-welcome .welcome-fields { grid-template-columns: 1fr 1fr; }
  .referral-welcome .welcome-fields .welcome-next { grid-column: 1 / -1; }
  .referral-edit-button { grid-column: 1; }
  .referral-welcome .welcome-copy h2 { font-size: 21px; }
  .referral-breadcrumbs { gap: 9px; padding-right: 12px; padding-left: 12px; font-size: 11px; }
  .referral-learning { padding: 30px 16px 46px; }
  .referral-learning-intro { margin-bottom: 26px; }
  .referral-learning-card { min-height: 145px; padding: 17px; }
  .referral-library-visual { width: min(100%, 428px); }
  .referral-feedback { padding: 35px 18px 42px; }
  .referral-feedback-orbit--left { left: 10%; }
  .referral-participation { grid-template-columns: 1fr; }
  .referral-participation-visual { min-height: 230px; }
  .referral-participation-copy { min-height: 255px; padding: 34px 26px; }
  .referral-howto { padding: 34px 16px 42px; }
  .referral-howto-card { padding: 20px 19px 18px; }
  .referral-benefits { grid-template-columns: 1fr; }
  .referral-benefits-visual { min-height: 230px; }
  .referral-benefits-content { min-height: 270px; padding: 28px 24px; }
  .referral-offerings { padding: 36px 16px 48px; }
  .referral-offerings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
}

@media (max-width: 440px) {
  .referral-welcome .welcome-fields { grid-template-columns: 1fr; }
  .referral-welcome .welcome-fields .welcome-next { grid-column: auto; }
  .referral-learning { padding-right: 14px; padding-left: 14px; }
  .referral-learning-cards { grid-template-columns: 1fr; }
  .referral-learning-card { min-height: auto; }
  .referral-learning-card--platform { min-height: 122px; }
  .referral-library-visual { aspect-ratio: 1.25; }
  .referral-participation-visual { min-height: 210px; }
  .referral-participation-copy { padding: 30px 21px; }
  .participation-copy-inner p { font-size: 11px; }
  .referral-howto-card > p, .referral-howto-steps, .referral-howto-rule { margin-left: 0; }
  .referral-howto-card > p { margin-top: 3px; }
  .referral-benefits-visual { min-height: 205px; }
  .referral-benefits-content { padding: 24px 17px; }
  .referral-benefit-card { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 9px; }
  .referral-benefit-card p { font-size: 10px; }
  .referral-offerings-grid { grid-template-columns: 1fr; }
  .referral-offering-image { height: 165px; flex-basis: 165px; }
}