/* A narrower walkthrough leaves room for the primary plan and smaller previews. */
#marketing #how>.wrap{max-width:1240px}
#marketing #how>.wrap>.grid{grid-template-columns:minmax(270px,.75fr) minmax(0,1.65fr);gap:28px}
#marketing #how #pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px;align-items:start;min-width:0}
#marketing #how #pricing:has(>.bm-example-plan:only-child){grid-template-columns:minmax(0,1fr)!important;max-width:460px}
#marketing #how #pricing.bm-has-companion{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)!important}
#marketing #how #pricing>.card{position:static;min-width:0;padding:25px 22px;overflow-wrap:anywhere}
#marketing #how #pricing .price strong{font-size:clamp(32px,3.1vw,46px)}
#marketing #how #pricing .price span{font-size:12px}
#marketing #how #pricing .sub{font-size:14px}
#marketing #how #pricing .feats{font-size:13px;gap:9px}
#marketing #how #pricing .feats li{grid-template-columns:18px 1fr;gap:8px}
#marketing #how #pricing .feats li:before{width:18px;height:18px;background-size:12px}
#marketing #how #pricing .fine{font-size:12px}
#marketing #how #pricing>.bm-coming-soon{align-self:center;background:#e9edf6;border:1px solid #cbd4e6;padding:21px 18px;border-radius:18px;box-shadow:none}
#marketing #how #pricing .bm-coming-soon h3{font-size:21px}
#marketing #how #pricing .bm-coming-soon .badge{background:#d4dced;color:#334463;font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:13px}
#marketing #how #pricing .bm-coming-soon .sub{font-size:13px;margin-bottom:18px}
#marketing #how #pricing .bm-coming-soon .feats{font-size:13px;margin-bottom:0}
#marketing #how #pricing .bm-coming-soon .feats li:before{background-color:#d4dced}
#marketing #how .steps .name{font-size:1.03rem}
#marketing #how .steps .mock{padding:13px;font-size:.88rem}
#marketing #how .steps .why{font-size:14px}
#marketing #how .steps .row{flex-wrap:wrap}
.plan-feature-picker[hidden],fieldset[hidden],details[hidden],section[hidden],label[hidden]{display:none!important}
@media(max-width:1050px){#marketing #how>.wrap>.grid{grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);gap:20px}#marketing #how #pricing,#marketing #how #pricing.bm-has-companion{grid-template-columns:minmax(0,1fr)!important}#marketing #how #pricing>.bm-coming-soon{margin:0 14px}#marketing #how #pricing>.card{padding:24px}}
@media(max-width:760px){#marketing #how>.wrap>.grid{grid-template-columns:minmax(0,1fr)!important;gap:30px}#marketing #how #pricing{max-width:520px!important;width:100%;justify-self:center}#marketing #how .steps .name{font-size:1.05rem}#marketing #how #pricing .price strong{font-size:42px}}



#marketing #how{padding:48px 20px}
#marketing #how>.wrap>.grid{display:flex;flex-direction:column;gap:30px}
#marketing #how .walkthrough{width:100%;background:#141a3d;border:1px solid #30395e;border-radius:18px;padding:20px 22px}
#marketing #how .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;min-height:0!important}
#marketing #how .steps:before,#marketing #how .steps:after{display:none}
#marketing #how .step{display:contents}
#marketing #how .step>button{grid-row:1;display:flex;align-items:center;flex-direction:column;text-align:center;gap:9px;padding:6px 4px 14px;min-width:0;border-bottom:2px solid #30395e;border-radius:0;min-height:85px}
#marketing #how .step.on>button{border-color:#c8f55a}
#marketing #how .step .time{align-self:center;justify-self:center;font-size:12px;box-shadow:none}
#marketing #how .step .name{font-size:14px;line-height:1.3}
#marketing #how .step .open{display:none;grid-row:2;grid-column:1/-1;margin:0}
#marketing #how .step.on .open{display:block}
#marketing #how .step .open>div{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center;min-height:124px}
#marketing #how .step .why{margin:0;font-size:16px;max-width:43ch}
#marketing #how .step .mock{margin:0;background:#0a0e27;padding:16px;font-size:14px;gap:9px}
#marketing #how .step .mock .row{flex-wrap:wrap}
#marketing #how .demo-actions{margin:15px 0 0;justify-content:flex-end}
#marketing #how #pricing,#marketing #how #pricing.bm-has-companion{width:100%;max-width:none!important;position:static;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)!important;gap:24px;align-items:center}
#marketing #how #pricing>.bm-available{max-width:620px;width:100%;justify-self:end}
#marketing #how #pricing>.bm-coming-soon{max-width:350px;width:100%;justify-self:start;margin:0}
#marketing #how #pricing>.bm-available{padding:27px}
#marketing #how h2{font-size:42px;line-height:1.1}
#marketing #how .lede{margin-bottom:26px;font-size:16px}
#marketing #how #pricing.bm-has-addons{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.8fr)!important;gap:20px}
#marketing #how #pricing.bm-has-addons>.bm-available{max-width:none;justify-self:stretch}
#marketing #how #pricing>.bm-addon-preview{background:#f2f4fa;color:#0a0e27;border:1px solid #d3d9e6;border-radius:18px;padding:23px 20px;align-self:center;min-width:0}
#marketing #how #pricing .bm-addon-preview .badge{background:#dde3ed;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
#marketing #how #pricing .bm-addon-preview h3{font-size:21px}
#marketing #how #pricing .bm-addon-preview .addon-item{padding:12px 0;border-bottom:1px solid #d3d9e6}
#marketing #how #pricing .bm-addon-preview .addon-item strong{display:block;font-size:14px}
#marketing #how #pricing .bm-addon-preview .addon-item p{font-size:13px;line-height:1.5;margin:6px 0;color:#4b5278}
#marketing #how #pricing .bm-addon-preview .addon-link{display:block;margin-top:18px;padding:12px;border:1px solid #a6b2c9;border-radius:30px;text-align:center;font-size:13px;font-weight:700;color:#0a0e27}
#marketing #how #pricing .bm-addon-preview .addon-example{font-size:11px;margin:12px 0 0;color:#4b5278}
@media(min-width:701px) and (max-width:1000px){#marketing #how #pricing.bm-has-addons{grid-template-columns:repeat(2,minmax(0,1fr))!important}#marketing #how #pricing.bm-has-addons>.bm-available{grid-column:1/-1;max-width:600px;justify-self:center}#marketing #how #pricing.bm-has-addons>.bm-coming-soon{width:100%;justify-self:stretch}}
@media(max-width:700px){#marketing #how #pricing.bm-has-addons{grid-template-columns:minmax(0,1fr)!important}#marketing #how #pricing>.bm-addon-preview{width:calc(100% - 24px);justify-self:center}}
@media(max-width:700px){#marketing #how{padding:35px 16px}#marketing #how h2{font-size:30px}#marketing #how .walkthrough{padding:16px}#marketing #how .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#marketing #how .step>button{grid-row:auto;min-height:90px;padding:5px 2px 12px}#marketing #how .step:nth-child(n+4)>button{grid-row:2}#marketing #how .step .open{grid-row:3;grid-column:1/-1}#marketing #how .step .open>div{grid-template-columns:1fr;gap:12px;min-height:210px}#marketing #how .step .name{font-size:13px}#marketing #how .demo-actions{justify-content:flex-start}#marketing #how #pricing,#marketing #how #pricing.bm-has-companion{grid-template-columns:minmax(0,1fr)!important;gap:18px}#marketing #how #pricing>.bm-coming-soon{justify-self:center;width:calc(100% - 24px)}#marketing #how #pricing>.bm-available{justify-self:center}}

#marketing #how #pricing.bm-has-addons{max-width:1060px!important;align-self:center;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)!important;gap:26px;align-items:center}
#marketing #how #pricing>.bm-available{width:100%;max-width:none;padding:26px}
#marketing #how #pricing>.bm-companion-stack{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:18px;min-width:0}
#marketing #how #pricing .bm-companion-stack>.card{position:static;margin:0;width:100%;max-width:none;border-radius:18px;padding:22px 24px;background:#e9edf6;color:#0a0e27;border:1px solid #cbd4e6;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;justify-content:center}
#marketing #how #pricing .bm-companion-stack .badge{align-self:flex-start;margin-bottom:12px;background:#d4dced;color:#334463;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
#marketing #how #pricing .bm-companion-stack h3{font-size:22px;margin:0 0 7px}
#marketing #how #pricing .bm-companion-stack .sub{font-size:14px;margin:0 0 14px}
#marketing #how #pricing .bm-companion-stack .feats{font-size:14px;gap:9px;margin:0}
#marketing #how #pricing .bm-companion-stack .addon-item{padding:9px 0}
#marketing #how #pricing .bm-companion-stack .addon-item p{margin:4px 0;font-size:13px}
#marketing #how #pricing .bm-companion-stack .addon-link{margin-top:14px;padding:10px}
#marketing #how #pricing .bm-companion-stack .addon-example{margin-bottom:0}
#marketing #how #pricing.draft-compact{grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr)!important;max-width:1000px!important;gap:24px}
#marketing #how #pricing.draft-compact>.bm-companion-stack{gap:16px}
#marketing #how #pricing.draft-compact .bm-companion-stack>.card{padding:22px}
#marketing #how #pricing.draft-compact .bm-companion-stack .addon-item p{display:none}
#marketing #how #pricing.draft-compact .bm-companion-stack .addon-example{display:none}
#marketing #how #pricing.draft-compact .bm-companion-stack h3{font-size:20px}
@media(max-width:700px){#marketing #how #pricing.bm-has-addons,#marketing #how #pricing.draft-compact{grid-template-columns:minmax(0,1fr)!important}#marketing #how #pricing>.bm-companion-stack{width:calc(100% - 24px);justify-self:center}#marketing #how #pricing .bm-companion-stack>.card{padding:22px}}

/* Approved compact companions. The primary plan keeps visual priority. */
#marketing #how #pricing,#marketing #how #pricing.bm-has-companion{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr)!important;max-width:1000px!important;align-self:center;align-items:center;gap:24px}
#marketing #how #pricing:not(.bm-has-companion){grid-template-columns:minmax(0,1fr)!important;max-width:620px!important}
#marketing #how #pricing>.bm-primary-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0;width:100%}
#marketing #how #pricing .bm-primary-plans>.card{position:static;min-width:0;padding:26px;width:100%;max-width:none}
#marketing #how #pricing>.bm-companion-stack{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:16px;min-width:0;width:100%}
#marketing #how #pricing .bm-companion-stack>.card{padding:22px;align-self:stretch;justify-self:stretch;min-height:0;justify-content:center}
#marketing #how #pricing .bm-companion-stack h3{font-size:20px}
#marketing #how #pricing .bm-companion-stack .addon-item p{display:none}
#marketing #how #pricing .bm-companion-stack .addon-item{padding:10px 0}
#marketing #how #pricing .bm-companion-stack .addon-item strong{font-size:14px}
#marketing #how #pricing .bm-companion-stack .addon-price{display:block;color:#4b5278;font-size:12px;line-height:1.5;margin-top:5px}
#marketing #how #pricing .bm-companion-stack .addon-more{font-size:12px;margin-top:8px;color:#4b5278}
#marketing #how #pricing .bm-companion-stack .addon-link{width:100%;background:transparent;color:#0a0e27;min-height:44px;font-family:inherit;cursor:pointer}
#marketing #how #pricing.bm-many-plans{max-width:1240px!important;grid-template-columns:minmax(0,2fr) minmax(0,.85fr)!important}
#marketing #how #pricing.bm-many-plans .bm-primary-plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));align-items:start}
#marketing #how .step .open>div{min-height:var(--demo-pane-height,124px)}
.plan-addon-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:620px;max-height:85vh;overflow:auto;background:#fff;color:#0a0e27;border:1px solid #cbd4e6;border-radius:18px;padding:26px;font:16px/1.5 system-ui,sans-serif}
.plan-addon-dialog::backdrop{background:#0a0e2799}.plan-addon-dialog h2{font-size:25px}.plan-addon-dialog h3{font-size:18px}.plan-addon-dialog p{overflow-wrap:anywhere;white-space:pre-line}.plan-addon-dialog .addon-dialog-item{border-bottom:1px solid #d4dced;padding:10px 0}.plan-addon-dialog .addon-dialog-close{display:block;margin-left:auto;border:1px solid #a6b2c9;border-radius:8px;background:#f2f4fa;color:#0a0e27;min-height:44px;padding:8px 15px;font:inherit}.plan-addon-dialog a{display:inline-block;min-height:44px;color:#245eac;padding-top:10px}
@media(max-width:760px){#marketing #how #pricing,#marketing #how #pricing.bm-has-companion,#marketing #how #pricing.bm-many-plans{grid-template-columns:minmax(0,1fr)!important;max-width:620px!important}#marketing #how #pricing>.bm-companion-stack{width:calc(100% - 24px);justify-self:center}#marketing #how #pricing .bm-primary-plans>.card{padding:24px}}