.onboard{color:#28516c}.onboard h2{font-size:23px;line-height:1.4;margin:16px 0}.onboard p{font-size:15px;line-height:1.65}.onboard .btn.full+.btn.full{margin-top:12px}.onboard .field{margin:16px 0}.onboard .field input,.onboard .field select{width:100%;min-width:0;min-height:46px;font-size:16px}.onboard .agreement{font-size:14px;line-height:1.6;margin:14px 0}.onboard .on-note,.on-note{font-size:14px!important;line-height:1.6;color:#577185}.on-brand{font-size:20px;letter-spacing:3px;font-weight:800}.on-secondary{display:block;min-height:44px;width:100%;margin:12px 0 0;background:none;border:0;color:#48677b;font-size:14px;cursor:pointer}.on-track{display:flex;gap:6px;padding:8px 0 14px}.on-track span{flex:1;font-size:12px;text-align:center;padding:8px 3px;border-radius:8px;background:#edf3f7;color:#60788b}.on-track .current{background:#2d739c;color:white}.on-track .done{background:#dceff3;color:#226380}.on-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.on-options{margin:22px 0}.on-options>b{font-size:16px}.on-options>small{font-size:12px;color:#60788b;margin-left:10px}.on-options>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.on-options button,.on-mode-tabs button{padding:10px 12px;border:1px solid #c4d8e7;border-radius:12px;background:#ffffff9c;color:#365c76;font-size:14px;min-height:44px;cursor:pointer}.on-options button.selected,.on-mode-tabs button.selected{background:#d9eaf8;border-color:#4a8cb6;color:#204e70;font-weight:700}.on-platforms{display:grid;gap:10px;margin:20px 0}.on-platforms>button{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:58px;padding:14px;border:1px solid #c4d8e7;border-radius:14px;background:#ffffffa3;color:#28516c;font-size:14px;cursor:pointer}.on-safe{padding:12px;border-radius:12px;background:#e5f2ef;color:#386257;font-size:14px!important}.on-code-meta{font-size:12px;margin:8px 0 16px;color:#567181}.on-how{padding-left:24px;font-size:15px;line-height:1.7}.on-how li{padding:5px 0}.onboard .flow-code{margin-top:18px;gap:10px}.onboard .flow-code strong{font-size:22px;overflow-wrap:anywhere}.onboard .flow-code button{min-height:44px}.on-check{width:60px;height:60px;display:grid;place-items:center;margin:16px auto;background:#dcefe7;color:#3b8867;border-radius:50%;font-size:32px}.on-success{text-align:center}.on-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:20px 0}.on-facts>div{padding:16px 5px;text-align:center;background:#ffffff80;border-radius:16px;min-width:0}.on-facts b{display:block;font-size:21px;color:#245777;white-space:nowrap}.on-facts small{display:block;font-size:13px;margin-top:6px;color:#567185}.on-choose-platform{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}.on-choose-platform>button{display:flex;align-items:center;gap:8px;border:1px solid #bed5e7;border-radius:12px;padding:12px;background:#ffffffa8;min-height:48px;color:#345e7b;cursor:pointer}.on-choose-platform>button.selected{border-color:#458cba;background:#dfeffc;box-shadow:inset 0 0 0 1px #458cba}.on-choose-platform>button:disabled{opacity:1;cursor:default}.on-mode-tabs{display:flex;gap:8px}.on-mode-tabs button{flex:1;padding:10px 5px}.on-mode-content{padding-top:8px}.on-mode-content small{display:block;font-size:13px;color:#60788b;margin:8px 0}.on-mode-content .textlink{min-height:44px}.on-verify-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;margin:10px 0 20px;border:1px solid #c5daeb;border-radius:20px;background:#e4f1fbbf;color:#315a77}.on-verify-banner b{font-size:16px}.on-verify-banner p{font-size:13px;margin:7px 0}.on-verify-banner progress{display:block;width:100%;height:5px;accent-color:#4688b1}.on-verify-banner button{flex-shrink:0;border:0;background:white;border-radius:12px;padding:12px;color:#285e81;min-height:44px;font-size:14px}.onboard button:focus-visible,.on-mode-tabs button:focus-visible,.on-choose-platform button:focus-visible{outline:3px solid #478dba;outline-offset:3px}
@media(max-width:360px){.on-facts b{font-size:17px}.on-fields{gap:8px}.on-track span{font-size:11px}.on-verify-banner{padding:14px}.on-platforms>button{font-size:13px}}
.on-verify-banner{position:relative;overflow:hidden;background:linear-gradient(115deg,#2469f4 0%,#538efa 70%,#9599bd 100%);border:0;border-radius:20px;padding:20px 18px;color:white;box-shadow:0 12px 26px #3f73c51a;gap:16px;margin:10px 0 22px}.on-verify-banner:after{content:'';position:absolute;width:180px;height:180px;right:-90px;top:-64px;border:28px solid #ffffff14;border-radius:50%;pointer-events:none}.on-verify-banner>div{flex:1;min-width:0;position:relative;z-index:1}.on-verify-banner b{font-size:15px;line-height:1.5;color:#fff}.on-verify-banner p{font-size:12px;line-height:1.6;color:#edf4ff;margin:6px 0 12px}.on-verify-banner button{position:relative;z-index:1;align-self:flex-end;padding:10px 12px;min-height:40px;font-size:13px;font-weight:700;color:#2463dc;border-radius:11px}.on-verify-banner progress{appearance:none;-webkit-appearance:none;border:0;height:5px;width:100%;border-radius:8px;overflow:hidden;background:#ffffff40}.on-verify-banner progress::-webkit-progress-bar{background:#ffffff40;border-radius:8px}.on-verify-banner progress::-webkit-progress-value{background:#fff;border-radius:8px}.on-verify-banner progress::-moz-progress-bar{background:#fff;border-radius:8px}.mini-tools .on-preview-switch{display:flex;flex-wrap:wrap;gap:8px}.mini-tools .on-preview-switch button{margin:0}.mini-tools .on-preview-switch button.active{background:#286cf4;border-color:#286cf4;color:#fff}.mini-tools{flex-wrap:wrap}.on-preview-switch button{min-height:40px}@media(max-width:380px){.on-verify-banner{gap:10px;padding:16px 14px}.on-verify-banner b{font-size:14px}.on-verify-banner p{font-size:11px}.on-verify-banner button{padding:9px;font-size:12px}.mini-tools .on-preview-switch{gap:5px}}

.on-reference>section+section{border-top:1px solid #c9dce9;margin-top:20px;padding-top:16px}.on-reference h3{font-size:16px;margin:14px 0 10px}.on-reference .easy-examples>h3{display:none}.on-mode-content>.btn{margin:12px 0 8px}.on-reference .example-videos{grid-template-columns:1fr}.on-reference video{width:100%;border-radius:12px}

.on-featured-reference{margin:12px 0 0}.on-featured-reference video{display:block;width:100%;height:240px;object-fit:contain;background:#162a38;border-radius:14px}.on-featured-reference figcaption{font-size:12px;line-height:1.6;color:#536d82;margin-top:8px}
