/* live site: real form controls, focus states, responsive layout */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:6px}
input.input,select.input,textarea.input{width:100%;appearance:none;-webkit-appearance:none;font:400 16px Inter;color:var(--ink)}
select.input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B2A3C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
textarea.input{height:auto;min-height:110px;padding:12px 14px;resize:vertical;display:block}
.input::placeholder{color:#6B8292}
.input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px #CFE0EA}
.input[aria-invalid=true]{border-color:#A8322C;box-shadow:0 0 0 3px #FDE6E4}
.errt{color:#A8322C;font-size:14px;font-weight:600}
fieldset.field{border:0;padding:0;margin:0 0 18px;min-width:0}
fieldset.field legend{font:700 14px Inter;color:var(--navy);padding:0;margin-bottom:8px}
fieldset.field legend em{font-style:normal;font-weight:600;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;gap:7px;align-items:center;font-size:14.5px;border:1.5px solid var(--line);border-radius:99px;padding:7px 12px;cursor:pointer}
.opts input{accent-color:var(--navy);width:16px;height:16px;margin:0}
label.check{cursor:pointer}label.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy)}
button.btn{font-family:Inter}
.sent{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--mint);color:var(--green);font-size:15px;font-weight:600}
.sent a{text-decoration:underline}
.formcard h2{margin:0}
footer a:hover,.note a:hover{text-decoration:underline}
.ask form.row{display:flex;gap:12px;justify-content:center;margin-top:28px}
.ask form.row .input{width:340px}
@media (max-width:1280px){.wrap{width:auto;margin:0 28px}}
@media (max-width:1100px){
 .stage{grid-template-columns:1fr!important;gap:12px}.stage .arw{display:none}
 .hero.v21 .htop{grid-template-columns:1fr!important}
}
@media (max-width:960px){
 .nav .wrap{height:auto;flex-wrap:wrap;padding:14px 0;gap:12px}
 .nav ul{order:3;width:100%;margin:0;gap:18px;overflow-x:auto;padding-bottom:4px;white-space:nowrap}
 .nav .btn.sec{display:none}
 [style*="grid-template-columns"]{grid-template-columns:1fr!important}
 .grid.g2,.grid.g3,.grid.g4,.hero .htop{grid-template-columns:1fr!important}
 .hero h1,.hero.v21 h1{font-size:40px}
 h2{font-size:30px}
 section{padding-top:56px!important;padding-bottom:56px!important}
 .hero,.hero.v21{padding:32px 0 40px!important}
 footer .wrap{grid-template-columns:1fr 1fr!important}
 .flowbar{flex-wrap:wrap;gap:10px}
}
@media (max-width:640px){
 .wrap{margin:0 18px}
 .hero h1,.hero.v21 h1{font-size:32px}
 .hero .ctas,.ask form.row{flex-direction:column;align-items:stretch}
 .hero .ctas .btn,.ask form.row .btn{justify-content:center}
 .ask form.row .input{width:100%}
 .hx{padding:14px}.hx-body{grid-template-columns:1fr!important}.hx-node img{width:150px;height:150px;margin:0 auto;display:block}
 .hx-steps{flex-wrap:wrap}
 .formcard{padding:22px}
 footer .wrap{grid-template-columns:1fr!important}
 .tabs{flex-wrap:wrap}
 .frame img{max-width:100%;height:auto}
}
img{max-width:100%}
.code{overflow-x:auto}
@media (max-width:960px){
 .arch,.mini{grid-template-columns:1fr!important;gap:14px}
 .gw{margin:0!important}.gw:before,.gw:after{display:none}
 .cp{margin:14px 0 0!important;flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:640px){.wrap [style*="display:flex"]{flex-wrap:wrap}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button.btn[disabled]{opacity:.6;cursor:wait}
@media (max-width:960px){
 .btn{white-space:normal;text-align:center;max-width:100%}
 .wrap [style*="display:flex"],.ctas,.oc-row,.ocs{flex-wrap:wrap}
 .wrap>*,.grid>*,.card{min-width:0}
 .m,.mono,code{overflow-wrap:anywhere}
 .code,pre{max-width:100%;overflow-x:auto}
 table{display:block;max-width:100%;overflow-x:auto}
}

#design-studio{scroll-margin-top:16px}
@media (max-width:960px){.ctaband{padding:32px 24px}}