/* Cooklayer landing — direction B (hub hero, live demo, day timeline).
   Brand: navy #03111E, orange #E8730C, white. Logo assets come from the 1.1 kit. */
.bx{--bx-navy:#03111E;--bx-navy-2:#0E2638;--bx-line:#28405A;--bx-orange:#E8730C;--bx-lift:#FFB77B;--bx-soft:#FFF0E4;--bx-ink:#A54800;--bx-grey:#526575;--bx-mist:#B8C4CF;--bx-bg:#F5F7F9;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--bx-navy)}
.bx *,.bx *::before,.bx *::after{box-sizing:border-box}
.bx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.bx-eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bx-ink);margin:0}
.bx-h2{margin:0;font-size:clamp(34px,4.4vw,52px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.bx-h2 em{font-style:normal;color:var(--bx-orange)}
.bx-lead{margin:14px 0 0;font-size:18px;line-height:1.5;color:var(--bx-grey)}
.bx-cta{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--bx-orange);color:var(--bx-navy);font-weight:800;font-size:17px;text-decoration:none}
.bx-cta:hover{background:#F28B33;color:var(--bx-navy)}
.bx-cta-ghost{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid var(--bx-line);color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.bx-cta-ghost:hover{border-color:var(--bx-lift);color:#fff}
.bx-note{font-size:12px;color:var(--bx-grey);margin:10px 0 0}

/* Hero */
.bx-hero{position:relative;overflow:hidden;background:var(--bx-navy);color:#fff;padding:56px 0 96px}
.bx-hero-grid{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.bx-hero-grid>*{flex:1 1 440px;min-width:0}
.bx-hero h1{margin:0;font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.04em;font-weight:800;color:#fff}
.bx-hero h1 em{font-style:normal;color:var(--bx-orange)}
.bx-hero .bx-lead{color:var(--bx-mist);max-width:470px}
.bx-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bx-trial{margin:14px 0 0;font-size:14px;color:var(--bx-mist)}
.bx-trial strong{color:#fff}
.bx-assure{margin:18px 0 0;font-size:14px;color:var(--bx-mist)}
.bx-canada{font-size:13px;font-weight:700;color:var(--bx-mist);margin:0 0 18px}
.hub{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;margin:0 auto}
.hub-glow{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(232,115,12,.22) 0%,rgba(232,115,12,.06) 40%,rgba(3,17,30,0) 68%)}
.hub-dots{position:absolute;inset:0;border-radius:50%;background-image:radial-gradient(rgba(184,196,207,.16) 1px,transparent 1.5px);background-size:18px 18px;-webkit-mask-image:radial-gradient(circle,#000 45%,transparent 72%);mask-image:radial-gradient(circle,#000 45%,transparent 72%)}
.hub-orbit{position:absolute;inset:12%;border-radius:50%;border:1px dashed var(--bx-line);animation:bxSpin 40s linear infinite}
.hub-orbit.rev{inset:27%;border-style:dotted;animation-duration:26s;animation-direction:reverse}
.hub-orbit>span{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--bx-lift);box-shadow:0 0 12px var(--bx-orange)}
.hub-orbit.rev>span{top:auto;bottom:-3px;width:6px;height:6px;margin-left:-3px;background:var(--bx-mist);box-shadow:none}
@keyframes bxSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-spoke{stroke:var(--bx-line);stroke-width:.5;animation:bxSpoke 9s ease infinite both}
@keyframes bxSpoke{0%,17%{stroke:#E8730C;stroke-width:.9}24%,100%{stroke:#28405A;stroke-width:.5}}
.hub-pulse{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--bx-lift);box-shadow:0 0 10px var(--bx-orange);opacity:0;animation:bxFlow 2.4s linear infinite both}
@keyframes bxFlow0{0%{left:50%;top:12%;opacity:0}15%{opacity:1}85%{opacity:.9}100%{left:50%;top:50%;opacity:0}}
@keyframes bxFlow1{0%{left:83%;top:31%;opacity:0}15%{opacity:1}85%{opacity:.9}100%{left:50%;top:50%;opacity:0}}
@keyframes bxFlow2{0%{left:83%;top:69%;opacity:0}15%{opacity:1}85%{opacity:.9}100%{left:50%;top:50%;opacity:0}}
@keyframes bxFlow3{0%{left:50%;top:88%;opacity:0}15%{opacity:1}85%{opacity:.9}100%{left:50%;top:50%;opacity:0}}
@keyframes bxFlow4{0%{left:17%;top:69%;opacity:0}15%{opacity:1}85%{opacity:.9}100%{left:50%;top:50%;opacity:0}}
@keyframes bxFlow5{0%{left:17%;top:31%;opacity:0}15%{opacity:1}85%{opacity:.9}100%{left:50%;top:50%;opacity:0}}
.hub-pulse.p0{animation-name:bxFlow0}.hub-pulse.p1{animation-name:bxFlow1}.hub-pulse.p2{animation-name:bxFlow2}.hub-pulse.p3{animation-name:bxFlow3}.hub-pulse.p4{animation-name:bxFlow4}.hub-pulse.p5{animation-name:bxFlow5}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#22415A 0%,#0B2031 55%,#03111E 100%);border:2px solid var(--bx-orange);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(232,115,12,.16),0 20px 50px rgba(232,115,12,.4),inset 0 4px 10px rgba(255,255,255,.08)}
.hub-core img{width:62%;height:auto;display:block}
.hub-ripple{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1/1}
.hub-ripple span{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(232,115,12,.55);animation:bxRipple 3s ease-out infinite both}
.hub-ripple span+span{animation-delay:1.5s}
@keyframes bxRipple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.hub-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(14,38,56,.9);border:1px solid var(--bx-line);box-shadow:0 10px 24px rgba(0,0,0,.25);white-space:nowrap;animation:bxFloat 6s ease-in-out var(--fd) infinite,bxLit 9s ease var(--ld) infinite both}
@keyframes bxFloat{0%,100%{margin-top:0}50%{margin-top:-7px}}
@keyframes bxLit{0%,17%{border-color:#E8730C;box-shadow:0 0 0 4px rgba(232,115,12,.18),0 14px 34px rgba(232,115,12,.35)}24%,100%{border-color:#28405A;box-shadow:0 10px 24px rgba(0,0,0,.25)}}
.hub-ic{flex:0 0 30px;height:30px;border-radius:9px;background:var(--bx-navy);display:flex;align-items:center;justify-content:center;color:var(--bx-lift)}
.hub-node b{display:block;font-size:14px;color:#fff}
.hub-node small{display:block;font-size:11px;font-weight:600;color:var(--bx-mist)}
@media (max-width:600px){.hub-node{padding:6px 8px 6px 6px;gap:6px;border-radius:12px}.hub-ic{flex-basis:22px;height:22px}.hub-node b{font-size:11px}.hub-node small{display:none}}

/* Grain strip */
.bx-strip{position:relative;overflow:hidden;background:var(--bx-orange);padding:40px 0 60px}
.bx-strip-light{position:absolute;inset:0;background:radial-gradient(ellipse 60% 140% at 15% 0%,rgba(255,214,170,.45),rgba(255,214,170,0) 60%),radial-gradient(ellipse 50% 120% at 90% 100%,rgba(150,60,0,.28),rgba(150,60,0,0) 60%)}
.bx-strip-grain{position:absolute;inset:0;pointer-events:none;background:url(/static/marketing/approved/grain.svg);mix-blend-mode:overlay;opacity:.5}
.bx-strip-fade{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(to bottom,rgba(245,247,249,0) 0%,rgba(245,247,249,.5) 55%,#F5F7F9 100%)}
.bx-stats{position:relative;display:flex;flex-wrap:wrap;justify-content:space-around;gap:28px;text-align:center;list-style:none;margin:0 auto;padding:0 24px;max-width:1200px}
.bx-stats strong{display:block;font-size:40px;font-weight:800;letter-spacing:-.03em}
.bx-stats span{font-size:14px;font-weight:700}

/* Demo */
.bx-demo{background:var(--bx-bg);padding:96px 0}
.bx-demo-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.bx-steps{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:8px;margin-top:24px;padding:0;list-style:none}
.bx-step{position:relative;overflow:hidden;width:100%;min-height:44px;text-align:left;border:0;cursor:pointer;font:inherit;color:var(--bx-navy);background:transparent;border-radius:16px;padding:12px 16px;display:flex;gap:14px;align-items:center}
.bx-step[aria-current="step"]{background:#fff;box-shadow:0 10px 30px rgba(3,17,30,.1)}
.bx-step-n{flex:0 0 30px;height:30px;border-radius:50%;background:#E3E8ED;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.bx-step[aria-current="step"] .bx-step-n{background:var(--bx-orange)}
.bx-step b{display:block;font-size:16px}
.bx-step small{display:block;font-size:14px;color:var(--bx-grey)}
.bx-step-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--bx-orange)}
.bx-step[aria-current="step"] .bx-step-bar{animation:bxGrow 4.5s linear both}
.bx-demo.is-paused .bx-step-bar{animation-play-state:paused}
@keyframes bxGrow{from{width:0}to{width:100%}}
.bx-pause{align-self:flex-start;margin-top:8px;min-height:44px;border:2px solid #D6DFE6;background:#fff;color:var(--bx-navy);font:inherit;font-weight:700;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer}
.bx-stage{flex:1 1 420px;min-width:0;position:relative;display:flex;justify-content:center;padding:40px 0}
.bx-stage-bg{position:absolute;inset:0 2%;border-radius:40px;background:var(--bx-navy)}
.bx-stage-glow{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:420px;max-width:100%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(rgba(232,115,12,.35),rgba(232,115,12,0) 68%)}
.bx-phone{position:relative;width:300px;max-width:calc(100vw - 64px);height:620px;background:#0B1A27;border-radius:50px;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.45),inset 0 0 0 2px #28405A}
.bx-screen{position:relative;width:100%;height:100%;background:#fff;border-radius:40px;overflow:hidden;font-size:13px}
.bx-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:26px;border-radius:20px;background:#0B1A27;z-index:9}
.bx-scene{position:absolute;inset:0;display:none;flex-direction:column}
.bx-scene.is-on{display:flex}
.bx-app{background:var(--bx-navy);color:#fff;padding:50px 18px 16px}
.bx-app small{display:block;font-size:11px;color:var(--bx-mist);font-weight:600}
.bx-app b{font-size:18px;font-weight:800}
.bx-body{padding:16px;display:flex;flex-direction:column;gap:9px}
.bx-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:var(--bx-bg);border-radius:12px}
.bx-row b{font-weight:700}
.bx-ok{color:#1F7A4D;font-weight:700}
.bx-warn{color:var(--bx-ink);font-weight:800}
.bx-badge{align-self:flex-start;background:var(--bx-soft);color:var(--bx-ink);font-weight:800;font-size:11px;padding:5px 10px;border-radius:999px}
.bx-dark{background:var(--bx-navy);color:#fff;border-radius:12px;padding:12px;font-weight:700}
.bx-plus{position:relative;flex:0 0 30px;height:30px;border-radius:50%;background:var(--bx-orange);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.bx-qty{min-width:30px;height:26px;padding:0 6px;border-radius:13px;background:var(--bx-navy);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bx-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bx-navy);color:#fff;padding:16px 18px 26px;border-radius:22px 22px 0 0;display:flex;justify-content:space-between;align-items:center}
.bx-sheet.white{background:#fff;color:var(--bx-navy);flex-direction:column;gap:10px;text-align:center;padding:26px 18px 34px}
.bx-pill{background:var(--bx-orange);color:var(--bx-navy);font-weight:800;padding:10px 16px;border-radius:999px;text-align:center}
.bx-scrim{position:absolute;inset:0;background:rgba(3,17,30,.5)}
.bx-paper{position:relative;margin:26px auto 0;width:190px;height:250px;background:#FBFAF6;border-radius:4px;transform:rotate(-3deg);padding:18px 16px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.bx-paper i{height:4px;background:#C9CFD4}
.bx-frame{position:absolute;inset:-12px;border:3px solid var(--bx-orange);border-radius:14px}
.bx-scan{position:absolute;left:0;right:0;height:3px;background:var(--bx-orange);box-shadow:0 0 16px var(--bx-orange)}
.bx-tap{position:absolute;inset:-6px;border-radius:50%;background:var(--bx-orange);opacity:0;pointer-events:none}
.bx-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.bx-bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:12px}
.bx-bars span{flex:1;background:#28405A;border-radius:5px 5px 0 0}
.bx-bars span:last-child{background:var(--bx-orange);transform-origin:bottom}
.bx-caption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;color:var(--bx-mist)}
/* animations play only when the scene is on and JS has started the demo */
.bx-demo.is-live .is-on .a-fade{animation:bxFadeUp .5s ease both}
.bx-demo.is-live .is-on .a-pop{animation:bxPop .45s cubic-bezier(.2,.8,.2,1) both}
.bx-demo.is-live .is-on .a-slide{animation:bxSlide .5s cubic-bezier(.2,.8,.2,1) both}
.bx-demo.is-live .is-on .a-in{animation:bxIn .35s ease both}
.bx-demo.is-live .is-on .a-press{animation:bxPress .35s ease both}
.bx-demo.is-live .is-on .a-expand{animation:bxExpand .6s ease both;overflow:hidden}
.bx-demo.is-live .is-on .bx-tap{animation:bxTap .6s ease-out both}
.bx-demo.is-live .is-on .bx-flash{animation:bxFlash .6s ease-out both}
.bx-demo.is-live .is-on .bx-scan{animation:bxScan .9s ease-in-out both 2 alternate}
.bx-demo.is-live .is-on .bx-bars span:last-child{animation:bxBar .9s cubic-bezier(.2,.8,.2,1) 2s both}
.bx-demo.is-live .is-on .a-ring{animation:bxFadeUp .5s ease .7s both,bxRing 1.1s ease 1.4s 2}
.bx-demo.is-paused .is-on *{animation-play-state:paused !important}
@keyframes bxFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bxPop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes bxSlide{from{transform:translateY(110%)}to{transform:none}}
@keyframes bxIn{from{opacity:0}to{opacity:1}}
@keyframes bxPress{0%,100%{transform:scale(1)}50%{transform:scale(.92)}}
@keyframes bxExpand{from{max-height:0;opacity:0}to{max-height:260px;opacity:1}}
@keyframes bxTap{0%{opacity:0;transform:scale(.3)}25%{opacity:.55}100%{opacity:0;transform:scale(1.7)}}
@keyframes bxFlash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes bxScan{from{top:6%}to{top:90%}}
@keyframes bxBar{from{transform:scaleY(.8)}to{transform:scaleY(1)}}
@keyframes bxRing{0%,100%{box-shadow:0 0 0 0 rgba(232,115,12,.55)}50%{box-shadow:0 0 0 9px rgba(232,115,12,0)}}
.bx-scan{top:46%}

/* Before / after */
.bx-ba{background:#fff;padding:96px 0}
.bx-ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}
.bx-panel{border-radius:28px;padding:32px;min-height:360px;display:flex;flex-direction:column}
.bx-before{background:var(--bx-bg)}
.bx-after{background:var(--bx-navy);color:#fff}
.bx-tag{align-self:flex-start;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;background:#E3E8ED;color:var(--bx-grey)}
.bx-after .bx-tag{background:var(--bx-orange);color:var(--bx-navy)}
.bx-mess{position:relative;flex:1;min-height:260px;margin-top:24px}
.bx-mess>div{position:absolute;background:#fff;border-radius:12px;padding:14px;box-shadow:0 10px 20px rgba(3,17,30,.08);font-size:13px;max-width:52%}
.bx-after-list{margin-top:24px;background:var(--bx-navy-2);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.bx-after-list div{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--bx-navy);border-radius:12px}
.bx-after-list .bx-total{background:var(--bx-orange);color:var(--bx-navy);font-weight:800}

/* Day timeline */
.bx-day{background:var(--bx-navy);color:#fff;padding:96px 0;overflow:hidden}
.bx-day .bx-h2{max-width:820px;color:#fff}
.bx-day .bx-lead{color:var(--bx-mist)}
.tl{position:relative;height:380px;margin-top:56px;list-style:none;padding:0}
.tl-track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:#1B3346;border-radius:2px}
.tl-sweep{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(90deg,rgba(232,115,12,0),#E8730C);box-shadow:0 0 18px #E8730C;animation:tlX 12s linear infinite}
.tl-sweep::after{content:"";position:absolute;right:-7px;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--bx-lift);box-shadow:0 0 0 6px rgba(232,115,12,.35),0 0 30px #E8730C}
@keyframes tlX{0%{width:0;opacity:1}90%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes tlY{0%{height:0;opacity:1}90%{height:100%;opacity:1}100%{height:100%;opacity:0}}
.tl-dot{position:absolute;left:var(--p);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#28405A;animation:tlDot 12s ease var(--d) infinite both}
@keyframes tlDot{0%{background:#28405A;scale:1}3%{background:#E8730C;scale:1.7}8%,92%{background:#E8730C;scale:1}100%{background:#28405A;scale:1}}
.tl-ev{position:absolute;left:var(--p);translate:calc(var(--p) * -1) 0;width:190px;background:var(--bx-navy-2);border:1px solid var(--bx-line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;animation:tlEv 12s cubic-bezier(.2,.8,.2,1) var(--d) infinite both}
.tl-ev.up{bottom:calc(50% + 30px)}.tl-ev.dn{top:calc(50% + 30px)}
.tl-ev.hot{border-color:var(--bx-orange)}
.tl-ev.big{width:220px;background:var(--bx-orange);border-color:var(--bx-orange);color:var(--bx-navy)}
@keyframes tlEv{0%{opacity:.16;scale:.92}4%{opacity:1;scale:1.05}9%{scale:1}92%{opacity:1;scale:1}100%{opacity:.16;scale:.92}}
.tl-t{font-size:12px;font-weight:800;color:var(--bx-lift);letter-spacing:.04em}
.tl-h{font-size:15px;font-weight:700;line-height:1.3}
.tl-n{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:4px}
.tl-ev.big .tl-t{color:var(--bx-navy)}
.tl-ax{position:absolute;left:var(--p);bottom:0;translate:calc(var(--p) * -1) 0;font-size:12px;font-weight:700;color:#8597A6}
.bx-illus{display:block;margin-top:12px;font-size:12px;color:#8597A6}
@media (max-width:900px){
  .tl{height:740px}
  .tl-track{left:7px;right:auto;top:0;bottom:0;width:4px;height:auto;margin:0}
  .tl-sweep{left:7px;top:0;width:4px;height:0;margin:0;background:linear-gradient(180deg,rgba(232,115,12,0),#E8730C);animation-name:tlY}
  .tl-sweep::after{right:-5px;top:auto;bottom:-7px}
  .tl-dot{left:9px;top:calc(var(--m) * .86 + 24px);animation-delay:var(--dm)}
  .tl-ev,.tl-ev.up,.tl-ev.dn,.tl-ev.big{left:36px;right:0;width:auto;top:calc(var(--m) * .86);bottom:auto;translate:none;animation-delay:var(--dm)}
  .tl-ax{display:none}.tl-n{font-size:36px}
  .bx-ba-grid{grid-template-columns:minmax(0,1fr)}
}

/* Real workspace (existing device toggle, re-framed) */
.bx-real{background:var(--bx-bg);padding:96px 0 40px}
.bx-real .bx-head{text-align:center;max-width:680px;margin:0 auto 32px}

@media (prefers-reduced-motion:reduce){
  .hub-orbit,.hub-spoke,.hub-ripple span,.hub-node,.tl-sweep,.tl-dot,.tl-ev,.bx-step-bar{animation:none !important}
  .hub-pulse{display:none}.tl-sweep{width:100%}.tl-ev,.tl-dot{opacity:1}
}

/* Re-framed device toggle and small-screen fixes */
.login-inspired-hero.bx-real-device{background:#F5F7F9;padding:0 0 88px;margin:0}
.bx-real-device .hero{display:flex !important;justify-content:center;max-width:1200px;margin:0 auto;padding:0 24px;min-height:0}
.bx-real-device .device-showcase{flex:0 1 760px;width:100%;margin:0 auto}
.bx-real{padding-bottom:24px}
.tl-ax{white-space:nowrap}
@media (max-width:900px){
  .bx-mess{display:flex;flex-direction:column;gap:12px;min-height:0}
  .bx-mess>div{position:static;max-width:100%;transform:none !important}
}

/* Integrations */
.bx-int{background:#fff;padding:96px 0 40px}
.bx-int-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bx-int-steps li{background:var(--bx-bg);border-radius:24px;padding:24px}
.bx-int-steps b{font-size:13px;font-weight:800;color:var(--bx-ink)}
.bx-int-steps h3{margin:10px 0 6px;font-size:20px;letter-spacing:-.02em}
.bx-int-steps p{margin:0;color:var(--bx-grey);font-size:15px}
.bx-soon{display:inline-block;background:var(--bx-soft);padding:4px 10px;border-radius:999px}

/* Savings calculator */
.bx-savings{background:#fff;padding:64px 0 96px}
.bx-calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px;align-items:start}
.bx-calc-in{background:var(--bx-bg);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:22px}
.bx-field label,.bx-field-label{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:15px}
.bx-field output{font-weight:800;white-space:nowrap}
.bx-field input[type=range]{width:100%;height:28px;margin:6px 0 0;accent-color:var(--bx-orange);cursor:pointer}
.bx-range{display:flex;justify-content:space-between;font-size:12px;color:var(--bx-grey);font-weight:600}
.bx-seg{display:flex;gap:6px;background:#E3E8ED;padding:4px;border-radius:999px;margin-top:8px}
.bx-seg button{flex:1;min-height:44px;border:0;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;background:transparent;color:var(--bx-navy);padding:0 20px}
.bx-seg button[aria-pressed=true],.bx-seg button[aria-selected=true]{background:var(--bx-navy);color:#fff}
.bx-seg-center{width:max-content;max-width:100%;margin:32px auto 0}
.bx-calc-out{background:var(--bx-navy);color:#fff;border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:16px}
.bx-out-label{margin:0;font-size:14px;font-weight:700;color:var(--bx-mist)}
.bx-out-net{margin:0;font-size:clamp(44px,6vw,64px);line-height:1.05;font-weight:800;letter-spacing:-.04em;color:var(--bx-lift)}
.bx-out-roi{margin:0;font-weight:700}
.bx-bar>div{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--bx-mist)}
.bx-bar>div span:last-child{color:#fff}
.bx-bar p{display:flex;height:18px;border-radius:6px;overflow:hidden;background:var(--bx-navy-2);margin:6px 0 0}
.bx-bar i{display:block;background:var(--bx-orange)}
.bx-out-rows{margin:0;padding-top:16px;border-top:1px solid var(--bx-line);display:flex;flex-direction:column;gap:8px;font-size:14px}
.bx-out-rows div{display:flex;justify-content:space-between;gap:12px}
.bx-out-rows dt{margin:0}.bx-out-rows dd{margin:0;font-weight:800}
.bx-out-note{margin:0;font-size:12px;line-height:1.5;color:var(--bx-mist)}
.bx-calc-out .bx-cta{justify-content:center}

/* Pricing */
.bx-prices{background:var(--bx-bg);padding:96px 0}
.bx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px;align-items:stretch}
#supplier-prices.bx-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.bx-card{position:relative;background:#fff;border:2px solid #E3E8ED;border-radius:24px;padding:28px;display:flex;flex-direction:column}
.bx-card h3{margin:0;font-size:22px;font-weight:800}
.bx-card-sub{margin:4px 0 0;font-size:14px;color:var(--bx-grey)}
.bx-price{margin:18px 0 0;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bx-price span{font-size:15px;font-weight:600;letter-spacing:0;color:var(--bx-grey)}
.bx-card-meta{margin:10px 0 0;font-size:13px;color:var(--bx-grey)}
.bx-card ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;flex:1}
.bx-card li{display:flex;gap:10px}
.bx-card li::before{content:"✓";color:var(--bx-orange);font-weight:800}
.bx-card-note{margin:14px 0 0;font-size:12px;color:var(--bx-grey);line-height:1.5}
.bx-card-btn{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:22px;border-radius:999px;background:var(--bx-navy);color:#fff;font-weight:700;text-decoration:none}
.bx-card-btn:hover{color:#fff;background:#0E2638}
.bx-card-rec{background:var(--bx-navy);border-color:var(--bx-navy);color:#fff}
.bx-card-rec .bx-card-sub,.bx-card-rec .bx-card-meta,.bx-card-rec .bx-price span{color:var(--bx-mist)}
.bx-card-rec .bx-card-btn{background:var(--bx-orange);color:var(--bx-navy)}
.bx-rec{position:absolute;top:-13px;right:22px;background:var(--bx-orange);color:var(--bx-navy);font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px}
.bx-founding{margin-top:32px;background:#fff;border-radius:24px;padding:24px 28px;border:2px dashed #E3B994}
.bx-founding .bx-eyebrow{font-size:12px}
.bx-founding-head{margin:8px 0 0;font-size:18px}
.bx-setup{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.bx-setup div{background:#fff;border-radius:16px;padding:14px 20px;font-size:14px;display:flex;gap:10px}
.bx-setup span{color:var(--bx-grey)}
.bx-final{background:var(--bx-orange);padding:80px 0;text-align:center}
.bx-final .bx-h2 em{color:#fff}
.bx-final .bx-cta{background:var(--bx-navy);color:#fff;margin-top:28px}
.bx-final .bx-trial{color:var(--bx-navy)}
.bx-final .bx-trial strong{color:var(--bx-navy)}
@media (max-width:1100px){.bx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.bx-int-steps,.bx-calc,.bx-cards,#supplier-prices.bx-cards{grid-template-columns:minmax(0,1fr)}}
.bx-cards[hidden]{display:none}
.bx-final .bx-h2 em{color:var(--bx-navy);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}

/* "The actual app" phone: fade only the last strip of the phone, keep the
   controls in one clean row below the screen on small screens. */
.owner-direction .bx-real-device .phone-position,
.owner-direction .bx-real-device .phone-scene:has(#phone-tab-3[aria-selected=true]) .phone-position{
  -webkit-mask-image:linear-gradient(#000 0,#000 590px,transparent 690px);
  mask-image:linear-gradient(#000 0,#000 590px,transparent 690px)}
@media (max-width:700px){
  .device-showcase:has(.bx-real-device),.bx-real-device .device-showcase{height:auto}
  .owner-direction .bx-real-device .phone-scene,.bx-real-device .device-showcase .phone-scene{height:440px;min-height:440px;overflow:hidden;clip-path:none}
  .owner-direction .bx-real-device .phone-position{width:270px;left:calc(50% - 135px);top:14px}
  .owner-direction .bx-real-device .phone-position,
  .owner-direction .bx-real-device .phone-scene:has(#phone-tab-3[aria-selected=true]) .phone-position{
    -webkit-mask-image:linear-gradient(#000 0,#000 300px,transparent 370px);
    mask-image:linear-gradient(#000 0,#000 300px,transparent 370px)}
  .owner-direction .bx-real-device .phone-backdrop{top:150px;height:200px;left:0;right:0;border-radius:24px}
  .owner-direction .bx-real-device .phone-controls{position:absolute;left:0;right:0;bottom:8px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;max-width:none;transform:none;padding:0 8px}
  .owner-direction .bx-real-device .phone-tabs{display:flex;flex-wrap:nowrap;gap:0;padding:3px;border-radius:999px;min-width:0;overflow-x:auto;scrollbar-width:none;max-width:calc(100% - 40px)}
  .owner-direction .bx-real-device .phone-tabs::-webkit-scrollbar{display:none}
  .owner-direction .bx-real-device .phone-tabs button{flex:0 0 auto;font-size:10px;line-height:1;padding:8px 7px;letter-spacing:-.15px;min-height:0;border-radius:999px;white-space:nowrap}
  .login-inspired-hero.bx-real-device{padding-bottom:40px}
  .owner-direction .bx-real-device .phone-controls .motion-button{flex:0 0 34px;width:34px;height:34px;position:static;border-radius:50%;padding:0}
}