.page-headless-automation.headless-production-v2{--w4hd-shell:1280px}
.w4hd-main .w4hd-shell{width:min(var(--w4hd-shell),calc(100% - 56px))}



.w4hd-main .w4hd-section{padding:46px 0}
.w4hd-main .w4hd-section-head{margin-bottom:24px}
.w4hd-main .w4hd-section-head.split{grid-template-columns:minmax(0,1fr) minmax(340px,.52fr);gap:42px;align-items:end}
.w4hd-main .w4hd-section-head h2{font-size:clamp(34px,3.1vw,43px);line-height:1.06;letter-spacing:-.034em;max-width:790px}
.w4hd-main .w4hd-section-head p{font-size:14.25px;line-height:1.68;max-width:480px}



.w4hd-main .w4hd-section .w4hd-eyebrow,
.w4hd-main .w4hd-next .w4hd-eyebrow{font-size:10.75px;gap:10px}
.w4hd-main .w4hd-section .w4hd-eyebrow::before,
.w4hd-main .w4hd-next .w4hd-eyebrow::before{width:24px}



.w4hd-main .w4-core-graph-context{padding:30px 0 32px}
.w4hd-main .w4-core-graph-shell{width:min(1280px,calc(100% - 56px))}
.w4hd-main .w4-core-graph-head{grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);gap:38px}
.w4hd-main .w4-core-graph-copy>span{font-size:10.5px;margin-bottom:8px}
.w4hd-main .w4-core-graph-copy>strong{max-width:620px;font-size:17.5px;line-height:1.46}
.w4hd-main .w4-core-graph-copy>p{max-width:640px;font-size:13px;line-height:1.62;margin:9px 0 10px}
.w4hd-main .w4-core-graph-copy>a{font-size:12px}
.w4hd-main .w4-core-graph-nav{grid-template-columns:minmax(140px,1fr) 18px minmax(140px,1fr) 18px minmax(270px,1.55fr) 18px minmax(140px,1fr);gap:10px}
.w4hd-main .w4-core-graph-nav>i{font-size:17px}
.w4hd-main .w4-core-graph-node{gap:10px;padding:13px 12px;border-radius:13px;min-height:72px}
.w4hd-main .w4-core-graph-node>b{flex-basis:32px;width:32px;height:32px;font-size:9.5px}
.w4hd-main .w4-core-graph-node strong{font-size:12px;line-height:1.28}
.w4hd-main .w4-core-graph-node small{font-size:10px;line-height:1.36;margin-top:3px}
.w4hd-main .w4-core-control-group{gap:8px;padding:9px;border-radius:15px}
.w4hd-main .w4-core-control-group>em{font-size:8.5px;margin:0 3px 1px}
.w4hd-main .w4-core-evidence-scope{gap:16px;margin-top:18px;padding-top:15px}
.w4hd-main .w4-core-evidence-scope>strong{font-size:9.5px}
.w4hd-main .w4-core-evidence-scope p{font-size:12px;line-height:1.58}



.w4hd-main .w4hd-table-wrap{border-radius:15px;box-shadow:0 10px 28px rgba(20,60,100,.045)}
.w4hd-main .w4hd-table{min-width:980px}
.w4hd-main .w4hd-table th,
.w4hd-main .w4hd-table td{padding:17px 18px;font-size:13px;line-height:1.55}
.w4hd-main .w4hd-table thead th{font-size:10.5px;letter-spacing:.06em}
.w4hd-main .w4hd-table tbody th{font-size:13px}
.w4hd-main .w4hd-mode{gap:12px}
.w4hd-main .w4hd-mode .w4-icon{--w4-icon-size:36px;width:36px;height:36px;border-radius:10px}
.w4hd-main .w4hd-mode .w4-icon::before{width:21px;height:21px}



.w4hd-main .w4hd-boundary-flow{grid-template-columns:1.06fr 30px 1fr 30px 1.08fr 30px 1.08fr 26px 1fr}
.w4hd-main .w4hd-flow-card{padding:22px 18px;min-height:294px;border-radius:15px}
.w4hd-main .w4hd-flow-card h3{margin-bottom:12px;font-size:15px;line-height:1.3}
.w4hd-main .w4hd-flow-card h3 small{font-size:10.5px;margin-top:3px}
.w4hd-main .w4hd-step{top:17px;right:17px;width:23px;height:23px;font-size:10px}
.w4hd-main .w4hd-icon-list li{gap:9px;padding:7px 0;font-size:12.25px}
.w4hd-main .w4hd-icon-list .w4-icon{--w4-icon-size:18px}
.w4hd-main .w4hd-flow-card p,
.w4hd-main .w4hd-flow-card li{font-size:12px;line-height:1.55}
.w4hd-main .w4hd-flow-foot{left:18px;right:18px;bottom:17px;font-size:11px}
.w4hd-main .w4hd-arrow{font-size:28px}
.w4hd-main .w4hd-terminal,
.w4hd-main .w4hd-browser-mini{max-width:160px;margin:24px auto 15px;border-radius:11px}
.w4hd-main .w4hd-terminal-body{height:102px;font-size:34px}
.w4hd-main .w4hd-browser-body{height:98px}
.w4hd-main .w4hd-browser-body .w4-icon{--w4-icon-size:46px;font-size:46px}
.w4hd-main .w4hd-flow-card.execution ul{margin-top:9px;padding-left:13px}
.w4hd-main .w4hd-flow-card.execution li{padding:3px 0 3px 9px}
.w4hd-main .w4hd-check-list li{padding:6px 0 6px 20px}
.w4hd-main .w4hd-check-list li:before{top:6px;width:13px;height:13px;font-size:8px}
.w4hd-main .w4hd-outside{font-size:10.5px;margin-bottom:14px}
.w4hd-main .w4hd-external-icons{gap:10px;margin:20px 0}
.w4hd-main .w4hd-external-icons .w4-icon{--w4-icon-size:36px;width:36px;height:36px}
.w4hd-main .w4hd-info-note{gap:11px;margin-top:16px;padding:12px 15px;font-size:11.5px;line-height:1.55}



.w4hd-main .w4hd-step-row{grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr}
.w4hd-main .w4hd-step-row article{padding:20px 17px;min-height:218px;border-radius:14px}
.w4hd-main .w4hd-step-row article>.w4-icon{--w4-icon-size:36px;width:36px;height:36px;margin-bottom:12px;border-radius:10px}
.w4hd-main .w4hd-step-row article>.w4-icon::before{width:21px;height:21px}
.w4hd-main .w4hd-step-row h3{margin-bottom:8px;font-size:14px;line-height:1.35}
.w4hd-main .w4hd-step-row p{font-size:12px;line-height:1.55}
.w4hd-main .w4hd-step-row .tag,
.w4hd-main .w4hd-step-row .linkish{left:17px;right:17px;bottom:15px;padding:7px 8px;font-size:10px}
.w4hd-main .w4hd-step-row article.feature strong{left:17px;right:17px;bottom:15px;font-size:11px}



.w4hd-main .w4hd-foundation-grid{gap:15px}
.w4hd-main .w4hd-foundation-grid article{padding:21px 17px 18px;min-height:270px;border-radius:14px}
.w4hd-main .w4hd-foundation-grid article>.w4-icon{--w4-icon-size:40px;width:40px;height:40px;border-radius:11px}
.w4hd-main .w4hd-foundation-grid article>.w4-icon::before{width:23px;height:23px}
.w4hd-main .w4hd-foundation-grid .valid{top:17px;right:17px;width:24px;height:24px;font-size:11px}
.w4hd-main .w4hd-foundation-grid h3{margin:12px 0 7px;font-size:14px;line-height:1.35}
.w4hd-main .w4hd-foundation-grid p,
.w4hd-main .w4hd-foundation-grid li{font-size:11.75px;line-height:1.55}
.w4hd-main .w4hd-foundation-grid ul{margin-top:10px;padding-left:17px}
.w4hd-main .w4hd-foundation-grid li{padding:2.5px 0}



.w4hd-main .w4hd-next{padding:18px 0 30px}
.w4hd-main .w4hd-next-panel{grid-template-columns:minmax(0,.78fr) minmax(540px,1.22fr);gap:32px;padding:25px;border-radius:15px}
.w4hd-main .w4hd-next-copy h2{font-size:26px;line-height:1.14;margin:7px 0 7px}
.w4hd-main .w4hd-next-copy p{font-size:12.5px;line-height:1.6}
.w4hd-main .w4hd-next-flow>a,
.w4hd-main .w4hd-next-flow>span{min-height:108px;padding:12px}
.w4hd-main .w4hd-next-flow .w4-icon{--w4-icon-size:42px;width:42px;height:42px;margin-bottom:8px}
.w4hd-main .w4hd-next-flow .w4-icon::before{width:26px;height:26px}
.w4hd-main .w4hd-next-flow span span,
.w4hd-main .w4hd-next-flow a span{font-size:10.5px;line-height:1.42}



@media(max-width:1100px){
  .w4hd-main .w4hd-shell,.w4hd-main .w4-core-graph-shell{width:min(100% - 44px,1180px)}
  .w4hd-main .w4hd-section-head h2{font-size:36px}
  .w4hd-main .w4hd-section-head p{font-size:13.5px}
  .w4hd-main .w4hd-boundary-flow{grid-template-columns:repeat(5,1fr);gap:11px}
  .w4hd-main .w4hd-flow-card{min-height:285px}
  .w4hd-main .w4hd-step-row{grid-template-columns:repeat(5,1fr);gap:11px}
  .w4hd-main .w4hd-step-row article{min-height:220px}
  .w4hd-main .w4hd-foundation-grid{grid-template-columns:repeat(3,1fr)}
  .w4hd-main .w4hd-next-panel{grid-template-columns:1fr}
  .w4hd-main .w4-core-graph-head{grid-template-columns:1fr;gap:20px}
  .w4hd-main .w4-core-graph-copy>strong,.w4hd-main .w4-core-graph-copy>p{max-width:none}
}



@media(max-width:767px){
  .w4hd-main .w4hd-shell,.w4hd-main .w4-core-graph-shell{width:min(100% - 28px,680px)}
  .w4hd-main .w4hd-section{padding:38px 0}
  .w4hd-main .w4hd-section-head{margin-bottom:20px}
  .w4hd-main .w4hd-section-head h2{font-size:31px}
  .w4hd-main .w4hd-section-head p{font-size:14px}
  .w4hd-main .w4-core-graph-context{padding:24px 0 26px}
  .w4hd-main .w4-core-graph-copy>strong{font-size:16px}
  .w4hd-main .w4-core-graph-copy>p{font-size:12.5px}
  .w4hd-main .w4-core-graph-nav{grid-template-columns:1fr;gap:8px}
  .w4hd-main .w4-core-graph-nav>i{display:none}
  .w4hd-main .w4-core-control-group{grid-template-columns:1fr 1fr}
  .w4hd-main .w4-core-graph-node{min-height:auto;padding:12px}
  .w4hd-main .w4hd-table th,.w4hd-main .w4hd-table td{padding:15px 16px;font-size:12.5px}
  .w4hd-main .w4hd-boundary-flow,.w4hd-main .w4hd-step-row,.w4hd-main .w4hd-foundation-grid{grid-template-columns:1fr}
  .w4hd-main .w4hd-flow-card{min-height:auto;padding:20px 18px}
  .w4hd-main .w4hd-flow-foot{position:static;display:block;margin-top:14px}
  .w4hd-main .w4hd-step-row article{min-height:185px}
  .w4hd-main .w4hd-foundation-grid article{min-height:auto}
  .w4hd-main .w4hd-next-flow{grid-template-columns:1fr}
}