/* Switchboards benefit visuals: one soft card, one recognisable object, lime for what stays yours.
   Every story uses the same parts: .bm-metric or .bm-hero, one .bm-sheet (or the phone), one .bm-line. */
.bm-benefit{--lime:#dff76b;--ink:#202024;--muted:#6e7079;--repeat:#f3f3fc;--repeat-line:#cbd0e8;--drafted:#5f6a3a;color:var(--ink);position:relative;width:100%;overflow:hidden;border:1px solid #d9d9d2;border-radius:18px;background:#f0f0e9;box-shadow:0 9px 0 #e7e7df;margin-top:21px;isolation:isolate;text-align:left}
.bm-benefit *{box-sizing:border-box}
.bm-benefit :where(p,h3,ol,ul){margin:0;padding:0}
.bm-benefit :where(ol,ul){list-style:none}
.bm-story{padding:23px}
.bm-kicker{display:block;font-size:9px;font-weight:650;letter-spacing:.08em;color:#737580}
.bm-metric{padding:0 3px 20px}
.bm-metric-row{display:flex;gap:15px;align-items:center;margin-top:9px}
.bm-count{font-size:98px;letter-spacing:-7px;line-height:.96;font-weight:650;min-width:120px;font-variant-numeric:tabular-nums}
.bm-unit{white-space:pre-line;font-size:23px;font-weight:550;letter-spacing:-.8px;line-height:1.17}
.bm-benefit .bm-hero{font-size:31px;line-height:1.12;letter-spacing:-1.1px;font-weight:650;padding:0 3px 20px}
.bm-line{text-align:center;font-size:11px;font-weight:550;color:#5f6551;margin-top:16px!important;line-height:1.5;text-wrap:balance}

/* The one white object */
.bm-sheet{border:1px solid #dcded3;background:#fff;border-radius:11px;overflow:hidden}
.bm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:37px;border-bottom:1px solid #e4e4dd;padding:12px 15px;font-size:11px;font-weight:650;letter-spacing:-.2px;background:#fff}
.bm-status{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:0;color:#657139;font-weight:500;white-space:nowrap;--d:.15s}
.bm-status:before{content:'';width:5px;height:5px;border-radius:50%;background:#c4c6bb;transition:background .4s .15s}
.is-after .bm-status:before{background:#accb35}
.bm-tag{font-size:9px;font-weight:500;color:var(--muted);white-space:nowrap}

/* Words that change once AI has done its part */
.bm-swap{display:inline-grid;vertical-align:top}
.bm-swap>span{grid-area:1/1;transition:opacity .35s,transform .35s;transition-delay:var(--d,0s)}
.bm-then{opacity:0;transform:translateY(5px)}
.is-after .bm-now{opacity:0;transform:translateY(-5px)}
.is-after .bm-then{opacity:1;transform:none}

/* Calendar slots: shared by time back and coaches */
.bm-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:16px}
.bm-day>b{font-size:9px;letter-spacing:.04em;display:block;margin-bottom:10px}
.bm-slot{font-size:10px;line-height:1.2;min-height:32px;display:flex;align-items:center;border:1px solid var(--repeat-line);border-radius:5px;background:var(--repeat);padding:7px 8px;margin-bottom:6px;max-height:42px;overflow:hidden;position:relative;transition:opacity .4s,transform .8s,max-height .8s,min-height .8s,padding .8s,margin .8s,border-width .8s,background .4s,border-color .4s,color .4s;transition-delay:calc(var(--order,0)*55ms)}
.bm-core{background:var(--lime);border-color:var(--lime);font-weight:650;z-index:1}
.bm-late{background:var(--ink);border-color:var(--ink);color:#fff}
.bm-space{height:32px;border:1.5px dashed #cfd6a6;border-radius:5px;opacity:0;transform:translateY(15px);transition:opacity .6s 1.6s,transform .6s 1.6s}
.is-after .bm-repeat{opacity:0;transform:translateY(-15px) scale(.9);max-height:0;min-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
.is-after .bm-space{opacity:1;transform:none}

/* Drafted by AI, waiting for you: coaches and teams */
.bm-job-slot{--d:calc(.1s + var(--order,0)*.12s);transition-delay:var(--d)}
.bm-then:before{content:none}
.bm-job-slot .bm-then:before,.bm-late .bm-then:before{content:'✓ ';font-weight:650}
.is-after .bm-job-slot{background:#fff;border-style:dashed;border-color:#bfc89a;color:var(--drafted)}
.bm-coach-story .bm-late{--d:1.4s;transition-delay:1.4s}
.is-after .bm-coach-story .bm-late{background:#f6fbdc;border-color:#d3e66a;color:var(--ink)}
.bm-grow{max-height:0;min-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0;opacity:0;transform:scale(.92)}
.is-after .bm-grow{max-height:42px;min-height:32px;padding:7px 8px;margin-bottom:6px;border-width:1px;opacity:1;transform:none;transition-delay:1.9s}
.bm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:13px 16px 0;font-size:9px;color:var(--muted)}
.bm-legend>span{display:inline-flex;align-items:center;gap:6px}
.bm-legend i{width:9px;height:9px;border-radius:3px;background:var(--lime);flex:none}
.bm-key-job{--d:.3s}
.bm-key-job i{background:var(--repeat);border:1px solid var(--repeat-line);transition:background .4s .3s,border-color .4s .3s}
.is-after .bm-key-job i{background:#fff;border-style:dashed;border-color:#b7c08f}

/* Steps that tick off: content and build */
.bm-steps{display:grid}
.bm-step{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid #ecece6;--d:calc(.3s + var(--order,0)*.9s)}
.bm-step:first-child{border-top:0}
.bm-step-label{font-size:12px;font-weight:550;line-height:1.3}
.bm-check{width:20px;height:20px;border-radius:50%;border:1.5px solid #c9cbc0;position:relative;transition:background .3s,border-color .3s;transition-delay:calc(var(--d) + .15s)}
.bm-check:after{content:'';position:absolute;left:5.5px;top:2.5px;width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s;transition-delay:calc(var(--d) + .25s)}
.is-after .bm-check{background:var(--lime);border-color:var(--lime)}
.is-after .bm-check:after{transform:rotate(45deg) scale(1)}
.bm-topics{display:flex;align-items:flex-end;gap:3px;height:22px}
.bm-topics i{width:9px;height:var(--h);background:#d9dcec;border-radius:2px;transition:background .4s;transition-delay:var(--d)}
.is-after .bm-topics i:nth-child(2){background:var(--lime);box-shadow:inset 0 0 0 1px #c3d94f}
.bm-track{position:relative;display:flex;gap:2px;width:118px;height:22px}
.bm-track i{flex:var(--w) 1 0;min-width:0;background:#8b96d8;border-radius:2px;transition:flex-grow .6s,opacity .4s,margin .6s;transition-delay:calc(var(--d) - .3s)}
.bm-track i.bm-cut{background:#d3d3ca}
.bm-playhead{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;background:var(--ink);transition:left .8s linear;transition-delay:calc(var(--d) - .8s)}
.bm-playhead:before{content:'';position:absolute;top:0;left:-3px;width:8px;height:5px;background:var(--ink)}
.is-after .bm-track i.bm-cut{flex-grow:0;opacity:0;margin-left:-2px}
.is-after .bm-playhead{left:calc(100% - 2px)}
.bm-chip{font-size:9px;font-weight:600;white-space:nowrap}
.bm-chip>span{padding:4px 9px;border-radius:20px;text-align:center}
.bm-chip .bm-now{background:#efefe9;color:var(--muted)}
.bm-chip .bm-then{background:var(--lime)}
.bm-rise{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:16px}
.bm-rise i{flex:1;height:var(--h);background:#c9cde4;border-radius:2px 2px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.3s + var(--order,0)*.19s)}
.bm-rise i:nth-last-child(-n+3){background:var(--lime)}
.is-after .bm-rise i{transform:scaleY(1)}
.bm-content-story .bm-count{font-size:78px;letter-spacing:-4.5px;min-width:182px}
.bm-content-story .bm-unit{font-size:20px}

/* Job description: designers and other work */
.bm-rotate{display:inline-block;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 88%/100% 34%;transition:opacity .2s,transform .2s}
.bm-rotate.is-out{opacity:0;transform:translateY(-6px)}
.bm-job-core{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 15px 6px;padding:13px 14px;background:var(--lime);border-radius:7px;font-size:13px;font-weight:650;line-height:1.3}
.bm-job-core em{font-style:normal;font-size:9px;font-weight:650;letter-spacing:.04em;white-space:nowrap}
.bm-benefit .bm-job-around{font-size:9px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#3044da;padding:17px 15px 3px;opacity:0;transition:opacity .5s .2s}
.is-after .bm-job-around{opacity:1}
.bm-job-list{padding:0 15px 7px}
.bm-job-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #ecece6;font-size:12px;line-height:1.35;--d:calc(.5s + var(--order,0)*.45s)}
.bm-job-list li:first-child{border-top:0}
.bm-job-list li>span{position:relative;transition:color .4s;transition-delay:var(--d)}
.bm-job-list li>span:after{content:'';position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s;transition-delay:var(--d)}
.is-after .bm-job-list li>span{color:#999b93}
.is-after .bm-job-list li>span:after{transform:scaleX(1)}
.bm-ai{flex:none;font-size:9px;font-weight:650;color:#3044da;background:#eceefc;border-radius:20px;padding:3px 9px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s;transition-delay:calc(var(--d) + .2s)}
.is-after .bm-ai{opacity:1;transform:none}

/* Build something new */
.bm-build-story>.bm-kicker{padding:0 3px 17px}
.bm-build-stage{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center}
.bm-phone{position:relative;height:236px;border:1.5px dashed #b6b9ad;border-radius:22px;padding:27px 13px 14px;display:flex;flex-direction:column;gap:8px;transition:background .5s .4s,border-color .5s .4s,box-shadow .5s .4s}
.bm-phone:before{content:'';position:absolute;top:11px;left:50%;width:34px;height:4px;margin-left:-17px;border-radius:4px;background:#d8d9d2}
.is-after .bm-phone{background:#fff;border-style:solid;border-color:#cfd2c6;box-shadow:0 10px 20px #2020240d}
.bm-phone i{display:block;border-radius:4px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.7s + var(--order,0)*.2s)}
.is-after .bm-phone i{opacity:1;transform:none}
.bm-b-top{height:8px;width:38%;background:#cfd3ea}
.bm-b-head{height:13px;width:90%;background:var(--ink)}
.bm-b-text{height:7px;width:68%;background:#d6d8ce}
.bm-b-image{flex:1;background:var(--lime);border-radius:9px!important}
.bm-b-foot{height:7px;width:52%;background:#d6d8ce}
.bm-build-steps .bm-step{padding:13px 0;border-color:#deded6;grid-template-columns:20px minmax(0,1fr)}
.bm-build-steps .bm-step:nth-child(1){--d:.2s}
.bm-build-steps .bm-step:nth-child(2){--d:1.75s}
.bm-build-steps .bm-step:nth-child(3){--d:2.3s}
.bm-people{grid-column:2;display:flex;margin-top:-2px}
.bm-people i{width:21px;height:21px;border-radius:50%;border:2px solid #f0f0e9;margin-left:-6px;background:#3044da;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(2.6s + var(--order,0)*.14s)}
.bm-people i:first-child{margin-left:0}
.bm-people i:nth-child(2){background:#fa7d72}
.bm-people i:nth-child(3){background:#ffe16e}
.bm-people i:nth-child(4){background:var(--ink)}
.is-after .bm-people i{opacity:1;transform:none}

/* Teams */
.bm-team-rows{display:grid;gap:8px;padding:15px}
.bm-team-row{display:grid;grid-template-columns:24px repeat(3,minmax(0,1fr));gap:6px;align-items:center}
.bm-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e3e6f7;color:#3044da;font-size:10px;font-weight:650}
.bm-team-row .bm-slot{margin:0;justify-content:center;text-align:center;font-size:9px;padding:6px 4px}
.bm-shared{margin:0 15px 15px;padding:11px;border-radius:7px;background:var(--lime);font-size:11px;font-weight:650;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s 1.5s,transform .5s 1.5s}
.is-after .bm-shared{opacity:1;transform:none}

/* Offers keep a settled, smaller version with no second performance */
.bm-compact{margin:0;box-shadow:none;border:0;border-radius:0}
.bm-compact .bm-story{padding:18px}
.bm-compact .bm-metric{padding-bottom:15px}
.bm-compact .bm-count{font-size:72px;min-width:90px;letter-spacing:-5px}
.bm-compact .bm-unit{font-size:18px}
.bm-compact.bm-content .bm-count{font-size:56px;min-width:128px;letter-spacing:-3px}
.bm-compact.bm-content .bm-unit{font-size:16px}
.bm-compact .bm-rise{height:24px;margin-top:12px}
.bm-benefit.bm-compact .bm-hero{font-size:24px;padding-bottom:15px}
.bm-compact .bm-days{padding:12px;gap:8px}
.bm-compact .bm-slot{font-size:9px}
.bm-compact .bm-phone{height:200px}
.bm-compact .bm-build-stage{grid-template-columns:112px minmax(0,1fr);gap:17px}
.bm-compact .bm-line{font-size:10px}

@media(max-width:520px){
 .bm-story{padding:18px}
 .bm-count{font-size:87px;min-width:105px}
 .bm-unit{font-size:22px}
 .bm-days{gap:7px;padding:13px}
 .bm-slot{font-size:9px;padding:6px;min-height:31px}
 .is-after .bm-grow{padding:6px;min-height:31px}
 .bm-content-story .bm-count{font-size:62px;letter-spacing:-3.5px;min-width:142px}
 .bm-content-story .bm-unit{font-size:18px}
 .bm-compact.bm-content .bm-count{font-size:54px;min-width:124px}
 .bm-benefit .bm-hero,.bm-benefit.bm-compact .bm-hero{font-size:22px;letter-spacing:-.7px}
 .bm-step{gap:9px;padding:12px}
 .bm-step-label{font-size:11px}
 .bm-track{width:86px}
 .bm-job-core{font-size:12px;padding:12px}
 .bm-job-list li{font-size:11px}
 .bm-build-stage,.bm-compact .bm-build-stage{grid-template-columns:104px minmax(0,1fr);gap:16px}
 .bm-phone,.bm-compact .bm-phone{height:196px;padding:25px 11px 12px;border-radius:19px}
 .bm-team-rows{padding:12px;gap:7px}
 .bm-team-row{grid-template-columns:22px repeat(3,minmax(0,1fr));gap:5px}
 .bm-avatar{width:22px;height:22px}
 .bm-team-row .bm-slot{font-size:8px;padding:5px 3px}
}
@media(max-width:350px){
 .bm-count{font-size:75px;min-width:92px}
 .bm-unit{font-size:19px}
 .bm-metric-row{gap:10px}
 .bm-slot{font-size:8px;padding:6px 4px}
 .bm-content-story .bm-count,.bm-compact.bm-content .bm-count{font-size:52px;min-width:118px}
 .bm-content-story .bm-unit{font-size:16px}
 .bm-benefit .bm-hero,.bm-benefit.bm-compact .bm-hero{font-size:19px}
 .bm-track{width:70px}
 .bm-build-stage{grid-template-columns:92px minmax(0,1fr);gap:13px}
}
@media(prefers-reduced-motion:reduce){.sb-experience:not(.sb-force-motion) .bm-benefit *,.sb-experience:not(.sb-force-motion) .bm-benefit *:before,.sb-experience:not(.sb-force-motion) .bm-benefit *:after{transition:none!important;animation:none!important}}

/* Their own words in the picture (price screen) */
.bm-slot.bm-mine{background:#eef0ff;border:1.5px solid #3044da;color:#3044da;font-weight:650}
.bm-space.bm-outcome{height:auto;min-height:32px;border:0;background:var(--lime);border-radius:5px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 4px;font-size:9px;font-weight:650;line-height:1.2;color:var(--ink)}
.bm-job-list li.bm-mine>span{color:#3044da;font-weight:650}
.is-after .bm-job-list li.bm-mine>span{color:#999b93;font-weight:500}
