.hero{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:clamp(24px,5vw,70px)}
.hero h1{font-size:clamp(38px,4.6vw,60px)}
.friend-entry{min-width:0;position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(145deg,#244962,#1b344e);box-shadow:0 18px 55px #0c254020;scroll-margin-top:100px}
.friend-entry::before{content:"";position:absolute;width:230px;height:230px;right:-120px;top:-110px;border-radius:50%;background:#48b9dc17;filter:blur(24px);pointer-events:none}
.friend-entry-inner{position:relative;padding:clamp(24px,3vw,36px)}
.friend-entry .modal-mark{width:58px;height:58px;border-radius:18px;background:#77dce51a;display:grid;place-items:center;margin:0 0 20px}
.friend-entry .modal-mark img{width:44px;height:44px;object-fit:contain}
.friend-entry h2{font-size:clamp(24px,2.5vw,31px);letter-spacing:-.035em;line-height:1.2;margin:12px 0}
.hero .friend-entry p{font-size:14px;line-height:1.65;margin:0 0 20px}
.friend-entry form{display:grid;gap:12px}
.friend-entry label{font-size:13px;font-weight:650;color:#c2dfec}
.friend-entry input{display:block;width:100%;box-sizing:border-box;min-width:0;min-height:54px;border:0;border-radius:13px;background:#315d75;color:#f0f8ff;padding:14px 16px;font:inherit;font-weight:650;letter-spacing:.04em;transition:background .2s,box-shadow .2s}
.friend-entry input::placeholder{color:#b2ccd9;font-size:13px;font-weight:500;letter-spacing:.04em}
.friend-entry input:focus-visible{outline:0;background:#386980;box-shadow:inset 0 -2px #85d7e5}
.friend-entry .button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:4px}
.hero .friend-entry .friend-entry-hint{display:flex;gap:9px;align-items:start;font-size:12px;color:#b8d0de;margin:16px 0 0}
.friend-entry-hint i{margin-top:4px;color:#8bd2df}
.hero .friend-entry .form-message{margin:12px 0 0;color:#ffd5cb;font-size:13px}
.friend-entry form[aria-busy=true]{position:relative;overflow:hidden}
.friend-entry form[aria-busy=true]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,#a5eefa1a 50%,transparent 75%);transform:translateX(-100%);animation:friend-entry-sweep 1.6s ease-in-out infinite}
.friend-entry-back{display:inline-flex;gap:8px;align-items:center;margin-top:14px;font-size:13px;font-weight:650;color:#9addeb}
.friends-unified{gap:32px;align-items:center}
.friend-benefits{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.friend-benefits span{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:#568baa20;font-size:12px;font-weight:600;color:#c5e9ed}
.friend-benefits i{color:#9ee1dc}
.friend-program-actions{display:grid;gap:12px;width:100%;max-width:340px;justify-self:end}
.friend-program-actions .button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px}
.friend-partner-link{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;font-size:13px;color:#bfdbe8}
.friend-entry a:focus-visible,.friends-unified a:focus-visible{outline:0;background-color:#4388a34a;text-decoration:underline;text-underline-offset:5px}
.friend-entry .button,.friend-program-actions .button{transition:background .2s,box-shadow .2s,transform .2s}
.friend-entry .button:hover:not(:disabled),.friend-program-actions .button:hover{transform:translateY(-2px);box-shadow:0 9px 24px #3abdc322}
body.catalog-mode .friends-unified{display:none}
body.catalog-mode.code-entry-open .hero{display:grid}
body.catalog-mode.code-entry-open .workspace{display:none}
.friend-entry [hidden]{display:none!important}
@keyframes friend-entry-sweep{to{transform:translateX(100%)}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:26px}.hero-copy{max-width:560px}.hero h1{font-size:42px}.hero .friend-entry p{max-width:none}.friends-unified{grid-template-columns:1fr}.friend-program-actions{max-width:none;justify-self:stretch}.friend-entry-inner{padding:25px}.friend-benefits{gap:8px}.friend-benefits span{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.friend-entry form[aria-busy=true]::after{animation:none}.friend-entry .button,.friend-program-actions .button{transition:none}.friend-entry .button:hover:not(:disabled),.friend-program-actions .button:hover{transform:none}}

/* Shopping entry keeps code use separate from creator benefits. */
.friends-shop .hero{padding:12px 0 38px;min-height:0;align-items:center;gap:clamp(28px,6vw,80px)}
.friends-shop .hero h1{font-size:clamp(32px,3.7vw,48px);line-height:1.16;max-width:540px;margin:14px 0 18px}
.friends-shop .hero-copy>p{font-size:16px;line-height:1.75;max-width:470px;margin:0 0 24px;color:#c5daea}
.friend-shopping-steps{list-style:none;display:grid;gap:20px;padding:0;margin:0 0 27px}
.friend-shopping-steps li{display:flex;align-items:center;gap:14px}.friend-shopping-steps li>span{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:13px;background:#70cfd716;color:#98e0df;font-size:16px}
.friend-shopping-steps li>div{display:grid;gap:4px}.friend-shopping-steps strong{font-size:14px;font-weight:650;color:#e4eff8}.friend-shopping-steps small{font-size:12px;color:#b9d1e1;line-height:1.6}
.friends-shop .hero-learn{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#a5dfea}
.friends-shop .friend-entry{box-shadow:0 18px 55px #0c254026,inset 0 1px #a2e5f00a}.friends-shop .friend-entry-inner{padding:clamp(26px,3vw,38px)}
.friends-shop .friend-entry .modal-mark{width:50px;height:50px;margin-bottom:18px}.friends-shop .friend-entry .modal-mark img{width:37px;height:37px}
.friends-shop .friend-entry h2{font-size:28px}.friends-shop .friend-entry .friend-entry-hint{font-size:12px;line-height:1.6}.friends-shop .friends-faq{margin-top:20px}
.friends-shop .form-message:empty{display:none}
@media(max-width:760px){.friends-shop .hero{gap:24px;padding-top:0}.friends-shop .hero-copy>p{font-size:14px;margin-bottom:16px}.friend-shopping-steps{display:none}.friends-shop .hero h1{font-size:34px}.friends-shop .friend-entry-inner{padding:26px}.friends-shop .hero-learn{font-size:12px}.friends-shop .hero-copy{max-width:none}}