:root{--navy:#102a52;--teal:#087f75;--teal-dark:#05645d;--gold:#f2bb28;--muted:#64748b;--line:#dbe5ed;--cream:#faf9f4}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--navy);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.referral-page{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:54px 0 84px}
.layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(460px,1.06fr);gap:26px;align-items:stretch}
.intro{position:relative;overflow:hidden;min-height:650px;padding:clamp(36px,4.3vw,56px);border-radius:28px;background:linear-gradient(145deg,#102a52 0%,#123761 72%,#087f75 155%);color:#fff;box-shadow:0 22px 52px rgb(16 42 82 / 18%)}
.intro::before,.intro::after{position:absolute;border-radius:50%;content:"";pointer-events:none}
.intro::before{top:-95px;right:-85px;width:270px;height:270px;border:34px solid rgb(242 187 40 / 17%)}
.intro::after{right:-130px;bottom:-155px;width:360px;height:360px;background:rgb(8 127 117 / 25%)}
.intro>*{position:relative;z-index:1}
.eyebrow{margin:0 0 14px;color:#91e4d9;font-size:11px;font-weight:900;letter-spacing:.17em}
.intro h1{max-width:570px;margin:0;color:#fff;font-size:clamp(40px,4.8vw,64px);font-weight:650;line-height:1.02;letter-spacing:-.05em}
.intro h1 span{color:#ffc52c}
.intro-copy{max-width:570px;margin:20px 0 26px;color:#d7e5f1;font-size:16px;line-height:1.7}
.referral-benefit{max-width:570px;margin-bottom:30px;border:1px solid rgb(255 255 255 / 13%);border-radius:16px;background:rgb(255 255 255 / 7%);padding:16px 18px}
.referral-benefit strong{display:block;margin-bottom:5px;color:#fff;font-size:13px}
.referral-benefit p{margin:0;color:#bfd0df;font-size:12px;line-height:1.6}
.intro h2{margin:0 0 14px;color:#fff;font-size:14px;letter-spacing:.02em}
.steps{position:relative;z-index:1;display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{display:flex;align-items:center;gap:13px;margin:0;border:1px solid rgb(255 255 255 / 9%);border-radius:13px;background:rgb(255 255 255 / 4%);padding:11px 13px;color:#eef5fa}
.steps li::before{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border:1px solid #73cfc3;border-radius:9px;background:rgb(8 127 117 / 20%);color:#92e9dd;content:counter(step);counter-increment:step;font-size:11px;font-weight:900}
.steps li span{display:grid;gap:1px}
.steps li b{font-size:12px}
.steps li small{color:#b9ccdc;font-size:10px;line-height:1.45}
.trust{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.trust span{border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:rgb(255 255 255 / 7%);padding:7px 10px;color:#e2f0f7;font-size:10px;font-weight:800}
.referral-card{align-self:stretch;border:1px solid var(--line);border-radius:28px;background:#fff;padding:clamp(28px,3.5vw,44px);box-shadow:0 22px 52px rgb(16 42 82 / 9%)}
.referral-card-heading{display:flex;align-items:center;gap:13px}
.referral-card-heading>span{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border-radius:13px;background:#e7f6f3;color:var(--teal);font-size:22px;font-weight:900}
.referral-card-heading p{margin:0 0 3px;color:var(--teal);font-size:10px;font-weight:900;letter-spacing:.14em}
.referral-card h2{margin:0;color:var(--navy);font-size:clamp(25px,2.6vw,34px);letter-spacing:-.035em}
.card-copy{margin:14px 0 26px;color:var(--muted);font-size:13px;line-height:1.65}
.referral-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 14px}
.field{min-width:0;margin:0}
.field label{display:block;margin-bottom:7px;color:#173c57;font-size:12px;font-weight:850}
.field input{width:100%;min-height:48px;border:1px solid #cbd9e1;border-radius:11px;background:#fbfcfd;padding:11px 12px;color:var(--navy);font:650 13px Inter,system-ui,sans-serif;transition:border-color .18s,box-shadow .18s,background .18s}
.field input::placeholder{color:#8b9ba8;font-weight:500}
.field input:hover{border-color:#9bbabf;background:#fff}
.field input:focus{border-color:var(--teal);background:#fff;outline:0!important;box-shadow:0 0 0 3px rgb(8 127 117 / 13%)}
.field input[aria-invalid="true"]{border-color:#c8473c;background:#fffafa;box-shadow:0 0 0 3px rgb(200 71 60 / 9%)}
.error{display:block;min-height:16px;margin-top:5px;color:#b42318;font-size:10px;font-weight:700;line-height:1.4}
.consent{display:flex;align-items:flex-start!important;gap:10px;margin:19px 0 0;border:1px solid #e1eaed;border-radius:12px;background:#f7fafb;padding:13px;color:#52697b;font-size:11px;font-weight:650;line-height:1.55;cursor:pointer}
.consent input{box-sizing:border-box!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;flex:0 0 18px!important;margin:0!important;accent-color:var(--teal)}
.consent:has(input:checked){border-color:#a9d6d0;background:#f1faf8}
.consent:has(input[aria-invalid="true"]){border-color:#e5aaa4;background:#fffafa}
.consent-error{margin:5px 0 0}
.primary{display:flex;width:100%;min-height:54px;align-items:center;justify-content:center;gap:10px;margin-top:11px;border:0;border-radius:12px;background:linear-gradient(135deg,#087f75,#069188);padding:13px 20px;color:#fff;font:850 14px Inter,system-ui,sans-serif;box-shadow:0 10px 24px rgb(8 127 117 / 21%);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.primary:hover{background:linear-gradient(135deg,#05645d,#087f75);box-shadow:0 13px 28px rgb(8 127 117 / 28%);transform:translateY(-1px)}
.primary:active{transform:translateY(0)}
.primary:disabled{cursor:wait;opacity:.78;transform:none}
.button-arrow{font-size:18px;transition:transform .18s}
.primary:hover .button-arrow{transform:translateX(3px)}
.button-spinner{display:none;width:17px;height:17px;border:2px solid rgb(255 255 255 / 35%);border-top-color:#fff;border-radius:50%;animation:referral-spin .7s linear infinite}
.primary.is-submitting .button-arrow{display:none}
.primary.is-submitting .button-spinner{display:block}
@keyframes referral-spin{to{transform:rotate(360deg)}}
.status{min-height:20px;margin:11px 0 0;color:var(--teal-dark);font-size:11px;font-weight:750;text-align:center}
.status.is-error{color:#b42318}
.result[hidden]{display:none}
.result{position:relative;margin-top:20px;border:1px solid #b9ded8;border-radius:16px;background:#f0faf7;padding:20px}
.result-check{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:var(--teal);color:#fff;font-weight:900}
.result h3{margin:10px 0 5px;color:var(--navy);font-size:16px}
.result p{margin:0 0 13px;color:var(--muted);font-size:11px;line-height:1.55}
.link-row{display:flex;gap:8px}
.link-row input{min-width:0;height:43px;flex:1;border:1px solid #c9d7e3;border-radius:9px;background:#fff;padding:9px 10px;color:#455a75;font:600 11px Inter,system-ui,sans-serif}
.copy{display:inline-flex;min-height:43px;align-items:center;justify-content:center;border:1px solid var(--teal);border-radius:9px;background:#fff;padding:0 13px;color:var(--teal);font:850 11px Inter,system-ui,sans-serif;cursor:pointer}
.copy:hover{background:#eaf8f5}
#shareLink.referral-share-button{display:flex!important;width:100%;min-height:48px!important;align-items:center;justify-content:center;gap:10px;margin-top:11px;border:1px solid #087f75;border-radius:11px;background:linear-gradient(135deg,#087f75,#069188);padding:12px 16px!important;color:#fff;font:850 13px/1.2 Inter,system-ui,sans-serif;box-shadow:0 8px 20px rgb(8 127 117 / 18%);cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s}
#shareLink.referral-share-button svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#shareLink.referral-share-button .share-arrow{margin-left:3px;font-size:17px;transition:transform .18s}
#shareLink.referral-share-button:hover{background:linear-gradient(135deg,#05645d,#087f75);box-shadow:0 11px 24px rgb(8 127 117 / 25%);transform:translateY(-1px)}
#shareLink.referral-share-button:hover .share-arrow{transform:translateX(3px)}
#shareLink.referral-share-button:active{transform:translateY(0)}
.referral-assurance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:24px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--line);box-shadow:0 12px 30px rgb(16 42 82 / 6%)}
.referral-assurance div{display:grid;gap:4px;background:#fff;padding:20px 24px}
.referral-assurance b{color:var(--navy);font-size:12px}.referral-assurance span{color:var(--muted);font-size:10px;line-height:1.5}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgb(8 127 117 / 38%)!important;outline-offset:3px}
@media(max-width:960px){.layout{grid-template-columns:1fr}.intro{min-height:0}.referral-card{padding:34px}.referral-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.referral-page{width:calc(100% - 28px);padding:28px 0 54px}.layout{gap:18px}.intro{padding:32px 24px;border-radius:21px}.intro h1{font-size:40px}.referral-card{padding:26px 20px;border-radius:21px}.referral-fields{grid-template-columns:1fr;gap:14px}.referral-assurance{grid-template-columns:1fr}.link-row{flex-direction:column}.copy{width:100%}.primary{min-height:52px;margin-top:9px}}
@media(prefers-reduced-motion:reduce){.primary,.button-arrow{transition:none}.button-spinner{animation-duration:1.4s}}