/* HGO_ON_READABILITY_DOCK_V2 */
body{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
body:has(#join-card[hidden]){padding-bottom:0}
.steps-section .steps{gap:13px}
.steps-section .steps li{padding:22px 24px;border:1.5px solid #bdc9d4;background:#fff;box-shadow:0 4px 14px #26374506;gap:18px}
.steps-section .steps h3{font-size:16px;font-weight:800;line-height:1.5;color:#202b35;letter-spacing:-.3px;margin-bottom:7px}
.steps-section .steps p{font-size:14px;font-weight:500;line-height:1.8;color:#505d69}
.steps-section .steps p strong{font-weight:800;color:#34611b}
.steps-section .step-number{width:40px;height:40px;flex-basis:40px;border:1px solid #bed3ab;background:#f0f6e9;color:#486e2d;font-size:13px}
.steps-section .steps li>svg{width:23px;height:23px;color:#6d7e8c}
.terms-section .terms-card{border:1.5px solid #bdc9d4;box-shadow:0 4px 14px #26374506}
.terms-section .terms-lead{border-bottom:1px solid #d6ded5;background:#f8fbf5;padding:23px 25px}
.terms-section .terms-lead h3{font-size:16px;font-weight:800;line-height:1.5;color:#263323}
.terms-section .terms-lead p{font-size:13px;line-height:1.7;color:#5d6b5a}
.terms-section .terms-list{display:grid;gap:11px;list-style:none;counter-reset:on-condition;padding:20px 23px 23px}
.terms-section .terms-list li{counter-increment:on-condition;padding:16px 17px 16px 51px;border:1px solid #cbd4df;border-radius:14px;background:#fff;font-size:14px;font-weight:500;line-height:1.9;color:#505d69;overflow-wrap:break-word}
.terms-section .terms-list li:before{content:counter(on-condition,decimal-leading-zero);left:14px;top:18px;width:24px;height:24px;display:grid;place-items:center;border:1px solid #d2dcc8;border-radius:8px;background:#f1f6ec;font-size:9px;font-weight:800;color:#5d7a45}
.terms-section .terms-list b{font-weight:800;color:#273541}
.terms-section .terms-list code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.94em;font-weight:750;line-height:1.9;color:#345824;background:#f0f6e9;border:1px solid #cdddba;border-radius:7px;padding:3px 6px;white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone;overflow-wrap:anywhere}
#join-card{position:fixed;z-index:60;left:50%;bottom:calc(13px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(880px,calc(100% - 28px));margin:0;padding:16px 20px;gap:14px;border:1.5px solid #b8caa6;border-radius:22px;background:#fff;box-shadow:0 -7px 22px #25351008,0 16px 45px #2235261c;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
#join-card>div{min-width:0}
#join-card h2{font-size:16px;line-height:1.4;margin:0 0 4px;font-weight:800}
#join-card p{font-size:11px;line-height:1.6;color:#646e60;margin:0}
#join-card .primary{margin:0;min-height:48px;font-size:12px;white-space:nowrap;padding:13px 17px}
#join-card .icon-box{background:#edf5e7;border:1px solid #d3e2c5;color:#5d7e3f}
body.modal-open #join-card{visibility:hidden}
.campaign-shell .section-title{scroll-margin-top:95px}
#steps{scroll-margin-top:100px}
@media(max-width:650px){
 body{padding-bottom:calc(175px + env(safe-area-inset-bottom,0px))}
 .steps-section .steps{gap:12px}
 .steps-section .steps li{padding:19px 16px;gap:12px;border-radius:19px;align-items:flex-start}
 .steps-section .steps h3{font-size:15px;line-height:1.55;letter-spacing:-.2px}
 .steps-section .steps p{font-size:13px;line-height:1.8}
 .steps-section .step-number{width:32px;height:32px;flex-basis:32px;font-size:11px;border-radius:10px;margin-top:2px}
 .steps-section .steps li>svg{width:18px;height:18px;margin-top:8px}
 .terms-section .terms-lead{padding:19px 16px}
 .terms-section .terms-lead h3{font-size:14px}
 .terms-section .terms-lead p{font-size:12px}
 .terms-section .terms-list{padding:15px;gap:10px}
 .terms-section .terms-list li{font-size:13px;line-height:1.85;padding:15px 13px 15px 43px;border-radius:13px}
 .terms-section .terms-list li:before{left:11px;top:17px;width:22px;height:22px;font-size:8px;border-radius:7px}
 #join-card{width:calc(100% - 20px);bottom:calc(9px + env(safe-area-inset-bottom,0px));padding:13px 15px;gap:10px 12px;border-radius:20px;grid-template-columns:auto minmax(0,1fr)}
 #join-card h2{font-size:14px;margin-bottom:3px}
 #join-card p{font-size:10px;line-height:1.55}
 #join-card .icon-box{width:35px;height:35px;flex-basis:35px;border-radius:12px}
 #join-card>.primary{grid-column:1/-1;width:100%;min-height:44px;font-size:12px;padding:12px}
}

/* HGO_ON_GREEN_RETURN_V5: original ON card, shorter lower sections. */
.steps-section .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.steps-section .steps li{padding:18px;gap:13px;align-items:flex-start;border:1px solid #cbd6c4;box-shadow:none;background:#fff;border-radius:18px}
.steps-section .steps li:last-child{grid-column:1/-1}
.steps-section .step-number{width:33px;height:33px;flex-basis:33px;border-radius:11px;font-size:11px}
.steps-section .steps h3{font-size:14px;line-height:1.5;margin:0 0 5px;letter-spacing:-.2px;font-weight:800}
.steps-section .steps p{font-size:13px;line-height:1.7;color:#626b64;font-weight:500}
.steps-section .steps li>svg{width:18px;height:18px;margin-top:7px;color:#879d79}
.terms-section{margin:27px 0 22px}
.terms-section .terms-card{border:1px solid #d4ddce;border-radius:21px;box-shadow:none;background:#fbfcfa}
.terms-section .terms-lead{padding:17px 20px;background:#eff5e9;border-bottom:1px solid #dfe7d9}
.terms-section .terms-lead h3{font-size:14px}
.terms-section .terms-lead p{font-size:12px}
.terms-section .terms-list{display:block;counter-reset:none;padding:0 20px;margin:0}
.terms-section .terms-list li{counter-increment:none;padding:12px 0 12px 15px;border:0;border-bottom:1px solid #e1e7db;border-radius:0;background:none;font-size:13px;line-height:1.75;color:#64705e;font-weight:500}
.terms-section .terms-list li:before{content:"";position:absolute;left:0;top:21px;width:5px;height:5px;display:block;border:0;border-radius:50%;background:#8daf72}
.terms-section .terms-list li:last-child{border-bottom:0}
.terms-section .terms-list code{font-size:12px;padding:2px 4px;line-height:1.8;border-radius:5px}
.section-title{margin-bottom:13px}
.section-title h2{font-size:23px}
#join-card{padding:13px 18px;border-radius:20px}
#join-card h2{font-size:15px}
#join-card .primary{min-height:44px}
@media(max-width:650px){
 .steps-section .steps{grid-template-columns:1fr;gap:10px}
 .steps-section .steps li{padding:15px 14px;gap:11px;border-radius:17px}
 .steps-section .steps h3{font-size:14px;margin-bottom:4px}
 .steps-section .steps p{font-size:12px;line-height:1.75}
 .steps-section .step-number{width:30px;height:30px;flex-basis:30px;font-size:10px}
 .steps-section .steps li>svg{display:none}
 .terms-section .terms-lead{padding:16px 15px}
 .terms-section .terms-lead h3{font-size:13px}
 .terms-section .terms-lead p{font-size:11px}
 .terms-section .terms-list{padding:0 16px}
 .terms-section .terms-list li{font-size:12px;line-height:1.8;padding:11px 0 11px 14px;border-radius:0}
 .terms-section .terms-list li:before{left:0;top:20px;width:5px;height:5px;border-radius:50%}
 .terms-section .terms-list code{font-size:11px}
 .section-title h2{font-size:21px}
 #join-card{padding:12px 14px;grid-template-columns:minmax(0,1fr) auto;gap:9px}
 #join-card>.icon-box{display:none}
 #join-card h2{font-size:13px}
 #join-card p{font-size:9px}
 #join-card>.primary{grid-column:auto;width:auto;font-size:10px;min-height:43px;gap:6px;padding:11px 12px}
 #join-card .primary svg{width:14px;height:14px}
 body{padding-bottom:calc(125px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){#join-card>.primary{grid-column:1/-1;width:100%}}
