/* =====================================================================================
   SDA · Service page "Custom dashboards" (Figma 2633:25157)
   Shared chrome (header, menus, Why us, FAQ, footer) comes from css/home/* — copied
   unchanged from the homepage prototype. This file holds the page layout + new sections.
   ===================================================================================== */
:root{--s:1;--eo:cubic-bezier(.16,1,.3,1);--blue:#2f1ec1;--glow:0 -20px 8.5px rgba(35,19,174,.25),1px 8px 17px rgba(35,19,174,.39),5px 30px 31px rgba(35,19,174,.34),12px 68px 41px rgba(35,19,174,.2),21px 120px 49px rgba(35,19,174,.06),33px 188px 53px rgba(35,19,174,.01)}

/* ---------- top bar: header + mobile menu live outside the hero so they sit above every panel ---------- */
.sv-top{position:absolute;left:0;top:0;width:100%;z-index:60;pointer-events:none}
.sv-topfr{position:relative;width:1440px;height:96px;margin:0 auto;transform-origin:0 0}
.sv-topfr>*{pointer-events:auto}

/* ---------- ride-over layers: a pinned panel + a runway; the next layer slides over it ---------- */
.ride{position:relative}
.r1{z-index:1}.r2{z-index:2}.r3{z-index:3}.r4{z-index:4}.r5{z-index:5}.r6{z-index:6}.r7{z-index:7}
.ride+.ride{margin-top:-100vh}
.runway{height:100vh;pointer-events:none}
/* ROI → Why us: the same extra hold before the next panel slides over */
.r4>.runway{height:140vh}
/* What we've built → ROI: hold so the screens can be seen peeking out before the white panel covers them */
.r3>.runway{height:130vh}
/* Problems → How we solve it: the white panel holds for an extra 40vh of scroll before the dark zone slides over it */
.r2>.runway{height:140vh}
.r6>.runway{height:140vh}
.ride>.pin{position:sticky;top:0}
.zone{position:relative;background:#010101;overflow:clip}
.zbg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;pointer-events:none;z-index:0}
.zbg canvas{width:100%;height:100%;display:block}
.zone>section,.zone>footer,.zone>.md-track{position:relative;z-index:1}
.sv-light{background:#fff;color:#131313;overflow:clip}
.r2>.pin,.r3>.pin,.r4>.pin,.r5>.zone,.r6>.pin,.r7>.zone{border-radius:calc(40px * var(--s)) calc(40px * var(--s)) 0 0;box-shadow:0 -30px 80px -20px rgba(0,0,0,.55)}
.r2>.pin,.r4>.pin{box-shadow:0 -30px 80px -20px rgba(0,0,0,.6)}

/* scaled 1440 frames (desktop); flow layout ≤1199px */
.sv-sec{position:relative}
.sv-fr{position:relative;width:1440px;margin:0 auto;transform-origin:0 0}

/* soft reveal — every element on its own, as it enters the viewport */
.rv{transition:opacity .8s var(--ease) var(--d,0s),transform .95s var(--eo) var(--d,0s),var(--tx,color .3s)}
html.js .rv:not(.in){opacity:0;transform:translateY(32px)}
html.js .rv.rv-s:not(.in){transform:translateY(18px) scale(.985)}

/* shared type */
.sv-h{margin:0;font:800 56px/1.2 var(--rubik);letter-spacing:.84px;text-transform:uppercase;color:#fff}   /* Figma Heading/3XS */
.sv-h span{color:var(--yellow)}
.sv-light .sv-h{color:#000}
.sv-light .sv-h span{color:var(--blue)}

/* ================= 1 · Hero ================= */
#svHero{position:relative;overflow:hidden}
@media (min-width:1200px){
  #frame{height:796px}
  #frame .copy{left:40px;top:136px;width:1360px;gap:40px}
  #frame .lead{left:40px;top:566px;width:326px}
  #frame .tiles .btn{padding:16px 16px 16px 20px}
  #svStage{left:0;top:96px;width:1440px;height:700px;pointer-events:none}
}
.tiles .btn.secondary{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dash{position:absolute;display:grid;place-items:center;translate:var(--px,0) var(--py,0);transition:translate .9s var(--eo)}
.dash .dash-in{animation:dashFloat 7s ease-in-out infinite;animation-delay:var(--fd,0s)}
.dash img{display:block;width:788.557px;height:auto;transform:rotate(var(--r));user-select:none;-webkit-user-drag:none}
.d-pulse{left:715px;top:138px;width:820.89px;height:546.44px;--r:3.98deg;--fd:-2.5s}
.d-pulse img{filter:drop-shadow(12.7px 7.9px 33px rgba(47,30,193,.1)) drop-shadow(50px 33px 60px rgba(47,30,193,.09)) drop-shadow(112px 73px 80px rgba(47,30,193,.05))}
.d-risk{left:451px;top:283px;width:834.27px;height:569.92px;--r:-5.79deg}
.d-risk img{filter:drop-shadow(5px 3px 6.7px rgba(47,30,193,.1)) drop-shadow(20.5px 13.5px 12px rgba(47,30,193,.09)) drop-shadow(45.6px 29.5px 16.4px rgba(47,30,193,.05)) drop-shadow(0 30px 50px rgba(0,0,0,.45))}
@keyframes dashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#svStage .dash{animation:dashIn 1.3s var(--eo) both;animation-delay:var(--ad,.35s)}
#svStage .d-risk{--ad:.5s}
@keyframes dashIn{from{opacity:0;transform:translateY(70px) rotate(calc(var(--r) * -.6))}}
#svStage{animation:none}

/* ================= 2 · Problems we solve (white) ================= */
/* the panel is shorter than the screen now: keep it at least one screen tall so the hero never shows beneath it */
#svProblems{min-height:100vh;min-height:100svh}
#svProblems .sv-fr{padding:96px 40px 144px;display:flex;flex-direction:column;gap:40px}
.pb-list{display:flex;flex-direction:column;gap:8px}
/* Figma 2633:25685: 3 + 2 cards, then the blue closing card */
.pb-line{display:flex;gap:8px}
.pb-row{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:109px;padding:32px 40px;border-radius:8px;background:#eae9f9;   /* Blue/blue-50 */
  transition:background-color .35s var(--ease);
  /* chaos → order, scrubbed by scroll (JS sets --k from 0 = scattered to 1 = grid) */
  --k:1;--a:1;transform:translate(calc(var(--x,0px)*var(--a)*(1 - var(--k))),calc(var(--y,0px)*var(--a)*(1 - var(--k)))) rotate(calc(var(--r,0deg)*var(--a)*(1 - var(--k))));
  box-shadow:0 14px 28px -12px rgba(19,19,19,calc(.16*(1 - var(--k))));will-change:transform}   /* scattered cards cast a soft shadow, stay opaque */
.pb-row h3{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;color:#131313}
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pb-lab{font:500 16px/1.5 var(--mono);color:#535353;transition:color .2s var(--ease)}   /* color/text/faint */
.pb-ic{flex:none;width:32px;height:32px;color:#131313}
/* scattered positions (Figma: grid; this is only the "before" state) */
.pb-row[data-i="0"]{--x:-18px;--y:-18px;--r:-3.5deg}
.pb-row[data-i="1"]{--x:14px;--y:-26px;--r:3deg}
.pb-row[data-i="2"]{--x:22px;--y:-10px;--r:-2.5deg}
.pb-row[data-i="3"]{--x:-24px;--y:22px;--r:3.5deg}
.pb-row[data-i="4"]{--x:16px;--y:28px;--r:-3deg}
.pb-row[data-i="5"]{--x:0px;--y:72px;--r:1.5deg}
@media (hover:hover){
  .pb-row:not(.blue):hover{background:#e3e1f7}   /* Blue/blue-60 */
  .pb-row:not(.blue):hover .pb-lab{color:#f04438;animation:pbGlitch .15s steps(3) 1}   /* color/status/error */
}
@keyframes pbGlitch{0%{transform:translateX(-2px);text-shadow:2px 0 #f04438,-2px 0 #2f1ec1}50%{transform:translateX(2px);text-shadow:-2px 0 #f04438,2px 0 #2f1ec1}100%{transform:none;text-shadow:none}}
.pb-row.blue{flex:none;justify-content:center;min-height:128px;padding:40px;background:var(--blue)}
.pb-row.blue h3{color:#fff}

/* ================= 3 · How we solve it (modules) ================= */
#svMods .sv-fr{padding:96px 40px 144px;display:flex;flex-direction:column;gap:40px}
.md-row{display:flex;gap:8px;height:642px}
@media (min-width:1200px){
  /* the section pins (top set in JS) while the track scrolls past; scroll progress picks the open module */
  #svMods{position:sticky}
  #svMods .sv-fr{flex-direction:row;align-items:flex-start;gap:40px}
  #mdTitle{flex:none;width:86px;height:642px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:72px;letter-spacing:1.08px;white-space:nowrap}   /* reads bottom → top */
  .md-row{flex:1;min-width:0}
}
.md{position:relative;flex:0 0 104px;min-width:0;display:flex;gap:24px;align-items:flex-start;padding:40px;border-radius:8px;background:#191919;overflow:hidden;cursor:pointer;
  --tx:flex-basis .85s cubic-bezier(.65,0,.35,1),background .5s var(--ease),box-shadow .7s var(--ease)}
.md:not(.on){background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)}
.md:not(.on)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 40% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%)}
.md:not(.on):hover{background:rgba(255,255,255,.05)}
.md:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.md.on{flex-basis:898px;background:#fff;box-shadow:var(--glow);cursor:default}
.md-more,.md-more>div{display:contents}
.md-lab{flex:none;width:24px;writing-mode:vertical-rl;font:500 16px/1.5 var(--mono);color:#959595;text-transform:uppercase;white-space:nowrap;transition:color .3s}
.md:not(.on):hover .md-lab{color:#dcdcdc}
.md-body{flex:none;width:770px;display:flex;flex-direction:column;gap:16px;color:#131313;opacity:0;transform:translateX(-12px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.md-body h3{margin:0;font:800 56px/1.2 var(--rubik);letter-spacing:.84px;text-transform:uppercase}
.md-body p{margin:0;font:400 20px/1.5 var(--rubik)}
.md.on .md-body{opacity:1;transform:none;transition:opacity .5s var(--ease) .45s,transform .7s var(--eo) .45s}
.md-img{position:absolute;left:309px;top:204px;opacity:0;transform:translate(40px,70px) rotate(2deg);transition:opacity .35s var(--ease),transform .6s var(--ease);pointer-events:none}
.md-img img{display:block}
.md-img.pulse{width:826.5px;height:556.15px;display:grid;place-items:center}
/* desktop: the full screenshot, already rotated in Figma (826 × 556 bounding box), so nothing ends inside the 642 px card */
@media (min-width:1200px){.md-img.full img{width:826px;height:auto}}
.md-img.pulse img{width:788.567px;height:auto;transform:rotate(4.73deg)}
.md.on .md-img{opacity:1;transform:none;transition:opacity .6s var(--ease) .4s,transform 1s var(--eo) .4s}
.md-prog{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);visibility:hidden;pointer-events:none}   /* invisible timer for the auto-switch */
.md.on.run .md-prog{animation:mdProg var(--md-dur,6s) linear both}
.mods-hold .md.on .md-prog{animation-play-state:paused}
@keyframes mdProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ================= 4 · What you get ================= */
#svWyg .sv-fr{padding:0 40px 144px;display:flex;flex-direction:column;gap:40px}
.wg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:400px;gap:8px}
.wg-c{display:flex;flex-direction:column;gap:16px;padding:40px;border-radius:8px;background:#191919;color:#fff;
  --tx:background .4s var(--ease),box-shadow .5s var(--ease),translate .5s var(--eo)}
.wg-c svg{width:40px;height:40px;flex:none;transition:color .3s}
.wg-c h3{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;transition:color .3s}
.wg-c p{margin:0;font:400 16px/1.5 var(--rubik);color:#959595;transition:color .3s}
.wg-c:hover{background:#fff;box-shadow:var(--glow);translate:0 -4px}
.wg-c:hover h3,.wg-c:hover svg{color:#131313}
.wg-c:hover p{color:#535353}
.wg-c:hover svg{color:var(--blue)}
.wg-i{position:relative;border-radius:8px;overflow:hidden;clip-path:inset(0 round 8px);background:#191919}
.wg-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--eo)}
.wg-i:hover img{transform:scale(1.045)}

/* ================= 5 · Stats ================= */
#svStats .sv-fr{padding:0 40px 144px;display:flex;gap:8px}
.sx{position:relative;flex:1;min-width:0;height:448px;display:flex;flex-direction:column;gap:16px;padding:40px;border-radius:8px;color:#fff;overflow:hidden;
  /* glass card, same recipe as the homepage "Where are you now" cards; no hover state */
  background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)}
.sx.lg-on{-webkit-backdrop-filter:url(#lqStat);backdrop-filter:url(#lqStat)}
.sx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.06) 78%,rgba(255,255,255,.26) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 40% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%)}
.sx>*{position:relative;z-index:1}
.sx.hl{background:#fff;box-shadow:var(--glow);-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:#131313}
.sx.hl::before,.sx.hl::after{display:none}
.sx.hl p{color:#535353}
.sx b{display:block;font:800 88px/1.2 var(--rubik);letter-spacing:1.32px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.sx h3{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase}
.sx p{margin:0;font:400 16px/1.5 var(--rubik);color:#959595}

/* ================= 6 · Take a look at what we've built ================= */
#svBuilt .sv-fr{height:715px}
#svBuilt .sv-h{position:absolute;left:40px;right:40px;top:0}
.bt-pills{position:absolute;left:40px;right:40px;top:126px;display:flex;flex-wrap:wrap;gap:12px;z-index:5}
.bt-pill{all:unset;box-sizing:border-box;padding:9px 15px;border:1px solid #2f2f2f;border-radius:8px;font:500 16px/1.5 var(--mono);color:#fff;cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),color .3s,border-color .3s}
.bt-pill:hover{border-color:#959595}
.bt-pill.on{background:var(--yellow);border-color:var(--yellow);color:#131313}
.bt-pill:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.bt-stage{position:absolute;inset:0}
.bt-img{position:absolute;left:0;top:0;width:700px;height:554.17px;transform-origin:350px 277.08px;
  transform:translate(calc(var(--cx) * 1px - 350px),calc(var(--cy) * 1px - 277.08px)) rotate(calc(var(--r) * 1deg));
  transition:transform .75s cubic-bezier(.22,.8,.24,1)}
.bt-img::before{content:"";position:absolute;left:0;top:0;width:100%;height:505px;border-radius:var(--br,0);background:#131313;opacity:0;transition:opacity .45s var(--ease)}
.bt-img img{position:relative;display:block;width:700px;height:505px;transition:opacity .45s var(--ease)}
.bt-img.dim::before{opacity:1}
.bt-img.dim img{opacity:.6}
.bt-img.b,.bt-img.c{--br:19px}
.bt-hit{position:absolute;left:0;top:0;width:700px;height:505px;cursor:pointer}
.bt-cap{position:absolute;top:210px;left:0;width:350px;padding:12px;border:1px solid var(--yellow);border-radius:8px;background:rgba(19,19,19,.2);
  -webkit-backdrop-filter:blur(7.12px);backdrop-filter:blur(7.12px);display:flex;flex-direction:column;gap:4px;z-index:6;
  filter:drop-shadow(6.4px 8px 11.2px rgba(5,5,5,.29)) drop-shadow(22.4px 35.2px 20.8px rgba(5,5,5,.26)) drop-shadow(51.2px 78.4px 28px rgba(5,5,5,.15));
  opacity:0;translate:var(--capx,40px) 10px;pointer-events:none;transition:opacity .35s var(--ease),translate .6s var(--eo)}
.bt-cap.on{opacity:1;translate:var(--capx,40px) 0;pointer-events:auto;transition:opacity .45s var(--ease) .18s,translate .7s var(--eo) .12s}
.bt-cap .t{display:flex;gap:8px;align-items:flex-start;font:400 20px/1.5 var(--rubik);color:var(--yellow)}
.bt-cap .t span{flex:1}
.bt-cap .t svg{flex:none;margin-top:3px;transition:transform .35s var(--ease)}
.bt-cap:hover .t svg{transform:translate(2px,-2px)}
.bt-cap small{font:500 16px/1.5 var(--mono);color:#959595}
#svBuilt.deal .bt-img{transition:transform .5s cubic-bezier(.5,0,.75,0),opacity .3s}
#svBuilt.deal .bt-img{transform:translate(calc(var(--cx) * 1px - 350px),calc(var(--cy) * 1px + 360px)) rotate(calc(var(--r) * 1deg))}

/* ================= 7 · ROI calculator (white) ================= */
#svRoi .sv-fr{height:700px;padding:80px 40px;display:flex;flex-direction:column;gap:40px;color:#131313}
/* Figma 2633:25888 shows only the top of the calculator: the columns are clipped and melt into white (blur 2.5 + gradient) */
.roi-cta.roi-cta-m{display:none}
.roi-fade{position:absolute;left:0;right:0;bottom:80px;height:120px;pointer-events:none;z-index:2;isolation:isolate;}
/* the white ramp sits ABOVE the blur layers (a child's backdrop blur would otherwise paint its tinted halo over the parent's own background) */
.roi-fade::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 15%,rgba(255,255,255,.3) 32%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.88) 64%,#fff 76%)}
.roi-fade>.roi-cta{position:relative;z-index:1}
/* progressive blur (Figma "Background blur/Progressive"): 6 stacked backdrop blurs, each masked to an overlapping band,
   so the blur grows smoothly from 0 at the top edge to 24px at the bottom — no hard line where the blur starts */
.roi-pb{position:absolute;inset:0;z-index:-1;pointer-events:none}
.roi-pb i{position:absolute;inset:0;--m:linear-gradient(180deg,transparent var(--a),#000 var(--b),#000 var(--c),transparent var(--e));-webkit-mask:var(--m);mask:var(--m)}
.roi-pb i:nth-child(1){-webkit-backdrop-filter:blur(.75px);backdrop-filter:blur(.75px);--a:0%;--b:16%;--c:33%;--e:50%}
.roi-pb i:nth-child(2){-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);--a:16%;--b:33%;--c:50%;--e:66%}
.roi-pb i:nth-child(3){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);--a:33%;--b:50%;--c:66%;--e:83%}
.roi-pb i:nth-child(4){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);--a:50%;--b:66%;--c:83%;--e:100%}
.roi-pb i:nth-child(5){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);--a:66%;--b:83%;--c:100%;--e:100%}
.roi-pb i:nth-child(6){-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);--a:83%;--b:100%;--c:100%;--e:100%}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.roi-pb{display:none}}
.roi-head{display:flex;gap:20px;align-items:flex-end}
.roi-head>div{flex:1;display:flex;flex-direction:column;gap:8px}
.roi-eye{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;color:var(--blue)}
.roi-head .sv-h{color:#131313}
.roi-head p.lead2{margin:0;width:800px;font:400 16px/1.5 var(--rubik);color:#535353}
.roi-cta{flex:none;width:153px;height:153px;padding:12px;border-radius:8px;background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  font:500 16px/1.5 var(--mono);transition:background .25s,translate .35s var(--ease)}
.roi-cta svg{align-self:flex-end;transition:transform .35s var(--ease)}
.roi-cta:hover{background:#2615b0;translate:0 -3px}.roi-cta:hover svg{transform:translate(3px,-3px)}
.roi-cols{flex:1;min-height:0;display:flex;gap:20px;align-items:flex-start;overflow:clip}
.roi-form{flex:none;width:480px;display:flex;flex-direction:column;gap:8px}
.roi-out{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.roi-cur{position:relative;height:56px;border-radius:8px;background:#f6f6f6}
.roi-cur select{all:unset;box-sizing:border-box;display:block;width:100%;height:56px;padding:16px 56px 16px 16px;line-height:24px;font:500 16px/1.5 var(--mono);color:#131313;cursor:pointer}
.roi-cur svg{position:absolute;right:16px;top:16px;pointer-events:none}
.roi-cur:has(select:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.roi-card{display:flex;flex-direction:column;gap:32px;padding:40px;border-radius:8px;background:#f6f6f6}
.roi-card h3{margin:0;font:500 20px/1.2 var(--rubik);letter-spacing:.3px;text-transform:uppercase}
.roi-card .grp{display:flex;flex-direction:column;gap:24px}
.rs{display:flex;flex-direction:column;gap:20px}
.rs-info{display:flex;justify-content:space-between;align-items:center;gap:16px}
.rs-info label{font:400 16px/1.5 var(--rubik);color:#959595}
.rs-info output{font:500 24px/1.2 var(--rubik);color:#131313;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-stack{display:flex;flex-direction:column;gap:8px}
.rs-track{position:relative;display:flex;justify-content:space-between;height:16px;border-radius:2px}
.rs-track i{width:16px;height:16px;border-radius:2px;background:#dcdcdc;transition:background .18s,transform .25s var(--ease)}
.rs-track i.f{background:#131313}
.rs-track i.h{background:#2f2f2f;transform:scaleY(1.25)}
.rs-track input{position:absolute;left:-4px;right:-4px;top:-10px;width:calc(100% + 8px);height:36px;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
.rs-track:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:6px}
.rs-track:hover i.f{background:#232323}
.rs-lim{display:flex;justify-content:space-between;font:400 12px/1.5 var(--rubik);color:#535353}
.rs-note{margin:0;font:400 12px/1.5 var(--rubik);color:#959595}
.rs-note button{all:unset;cursor:pointer;color:#535353;text-decoration:underline;text-decoration-color:rgba(83,83,83,.35);text-underline-offset:3px;transition:color .2s}
.rs-note button:hover,.rs-note button.on{color:var(--blue);text-decoration-color:currentColor}
.rs-note button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.ro-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:40px;border-radius:8px;background:#f6f6f6}
.ro-head h3{margin:0;font:500 32px/1.2 var(--rubik);letter-spacing:.48px;text-transform:uppercase}
.ro-head span{font:400 16px/1.5 var(--rubik);color:#535353;white-space:nowrap}
.ro-main{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px;border-radius:8px;background:var(--blue);color:#fff;position:relative;overflow:hidden}
.ro-main small{display:block;font:400 16px/1.5 var(--rubik)}
.ro-main b{display:block;margin-top:16px;font:800 56px/1.2 var(--rubik);letter-spacing:.84px;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.ro-main.neg b.v1{color:#ffb4b4}
.ro-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ro-k{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:8px;background:#f6f6f6}
.ro-k b{font:500 32px/1.2 var(--rubik);letter-spacing:.48px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ro-k span{font:400 14px/1.5 var(--rubik);color:#535353}

/* ================= 8 · Why us (homepage component) inside the dark zone ================= */
.zone .page6{margin-top:0!important;z-index:1!important;box-shadow:none!important}   /* homepage Why us as is (solid #131313 panel); only its homepage ride-over offset is dropped */

/* ================= 9 · How we work ================= */
#svHow .sv-fr{padding:144px 40px 144px;display:flex;flex-direction:column;gap:40px}
.hw-row{display:flex;gap:8px;align-items:stretch}
.hw{flex:1;min-width:0;display:flex;flex-direction:column;gap:32px;padding:40px;border-radius:8px;background:#191919;color:#fff;cursor:default;
  --tx:background .45s var(--ease),box-shadow .55s var(--ease),translate .55s var(--eo)}
.hw-top{display:flex;justify-content:space-between;font:500 16px/1.5 var(--mono);color:#959595;white-space:nowrap}
.hw h3{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;transition:color .3s}
.hw p{margin:16px 0 0;min-height:54px;font:500 12px/1.5 var(--mono);color:#f6f6f6;transition:color .3s}
/* 01–04: glass cards, same recipe as the stat cards and the collapsed modules (no hover state) */
.hw:not(.on){position:relative;background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)}
.hw:not(.on)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 40% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%)}
.hw.on{background:#fff;box-shadow:var(--glow)}   /* only 05 · Improve, static */
.hw.on h3{color:#131313}.hw.on p{color:#535353}

/* FAQ + footer sit on the zone gradient */
.zone .pageFaq{background:transparent}
.fq-card{display:block}
.fq-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--eo)}
.fq-card:hover img{transform:scale(1.03)}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  html.js .rv:not(.in){opacity:1;transform:none}
  .dash .dash-in,#svStage .dash{animation:none}
  .md,.md-body,.md-img,.bt-img,.bt-cap{transition:none!important}
}

/* =====================================================================================
   MOBILE + TABLET (≤1199px)
   ===================================================================================== */
@media (max-width:1199px){
  :root{--s:.7}
  .sv-top{position:static}
  .sv-topfr{width:auto;height:0;transform:none!important}
  .r2>.pin,.r3>.pin,.r4>.pin,.r5>.zone,.r6>.pin,.r7>.zone{border-radius:28px 28px 0 0}
  .runway{height:70vh}
  .r2>.runway{height:100vh}
  .r6>.runway{height:100vh}
  .r4>.runway{height:100vh}
  .r3>.runway{height:95vh}
  .ride+.ride{margin-top:-70vh}
  .sv-fr{width:auto;max-width:calc(1040px + var(--gx)*2);margin:0 auto;transform:none!important}
  .sv-h{font-size:32px!important;letter-spacing:.48px!important}

  /* hero */
  #svStage{position:relative;left:auto;top:auto;width:100%!important;aspect-ratio:1/.82;height:auto;pointer-events:none}
  .dash{left:auto;top:auto;width:auto;height:auto}
  .dash img{width:100%}
  .d-pulse{left:20%;top:0;width:82%}
  .d-risk{left:-2%;top:32%;width:84%}
  .lead{font-size:16px}

  /* problems */
  #svProblems .sv-fr{padding:48px var(--gx) 80px;gap:24px}
  .pb-row{min-height:0;padding:20px;gap:12px}
  .pb-row h3{font-size:20px;letter-spacing:.3px}
  .pb-lab{font-size:14px}
  .pb-ic{width:24px;height:24px}
  .pb-row.blue{min-height:0;padding:24px 20px}

  /* modules: vertical accordion */
  #svMods .sv-fr{padding:56px var(--gx) 80px;gap:24px}
  .md-row{flex-direction:column;height:auto}
  .md{flex:none!important;display:block;padding:20px;min-height:64px}
  .md-lab{writing-mode:horizontal-tb;width:auto;display:block;font-size:14px}
  .md.on .md-lab{display:none}
  .md-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
  .md.on .md-more{grid-template-rows:1fr}
  .md-more>div{display:block;overflow:hidden;min-height:0;transition:margin .6s var(--ease)}
  .md.on .md-more>div{margin:0 -20px -20px 0}
  .md-body{width:auto;transform:none}
  .md-body{min-height:122px;padding-right:20px}
  .md-body h3{font-size:20px;letter-spacing:.3px}
  .md-body p{font-size:16px}
  .md-img{position:relative;left:auto;top:auto;margin:24px 0 0 12%;transform:none}
  .md-img,.md-img.pulse{width:auto;height:230px;display:block;overflow:visible}
  .md-img img{width:115%;max-width:none;height:auto;display:block}
  .md-img.pulse img{width:110%;transform:rotate(4.73deg);transform-origin:0 0;margin-left:2%}

  /* what you get */
  #svWyg .sv-fr{padding:0 var(--gx) 80px;gap:24px}
  .wg-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .wg-c{padding:24px;gap:12px;min-height:350px}   /* same height as the Why us cards on mobile */
  .wg-c svg{width:32px;height:32px}
  .wg-c h3{font-size:20px;letter-spacing:.3px}
  /* no crop: image cards take the screenshot's own proportions (334 × 400, the Figma tile) */
  .wg-i{height:auto;aspect-ratio:334/400}
  .wg-i img{height:auto}

  /* stats */
  #svStats .sv-fr{padding:0 var(--gx) 80px;flex-direction:column}
  .sx{height:auto;min-height:0;padding:24px;gap:12px}
  .sx b{font-size:40px;letter-spacing:.6px}
  .sx h3{font-size:18px;letter-spacing:.27px}
  .sx p{font-size:14px}

  /* built: swipeable cards */
  #svBuilt .sv-fr{height:auto;padding:0 0 80px}
  #svBuilt .sv-h{font-size:28px!important;letter-spacing:.42px!important}
  .bt-stage{display:none!important}
  .bt-cases{padding:0 var(--gx);margin-top:24px}
  .bt-pill{padding:6px 12px;font-size:14px}
  #svBuilt .sv-h{position:static;padding:0 var(--gx)}
  .bt-pills{position:static;flex-wrap:nowrap;overflow-x:auto;padding:0 var(--gx);margin-top:24px;scrollbar-width:none}
  .bt-pills::-webkit-scrollbar{display:none}
  .bt-stage{position:static;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px var(--gx) 0;scroll-padding-left:var(--gx);scrollbar-width:none}
  .bt-stage::-webkit-scrollbar{display:none}
  .bt-img{position:relative;flex:none;width:min(84vw,520px);height:auto;transform:none!important;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;overflow:hidden}
  .bt-img .bt-m{order:-1}
  .bt-img::before{display:none}
  .bt-img img{width:100%;height:auto;opacity:1!important;margin-bottom:-26%}
  .bt-hit{display:none}
  .bt-cap{position:relative;top:auto;left:auto;width:auto;opacity:1;translate:none!important;pointer-events:auto}
  .bt-cap .t{font-size:18px}
  .bt-cap small{font-size:14px}
  .bt-desk{display:none}
  #svBuilt.deal .bt-img{transform:none!important}

  /* ROI */
  #svRoi .sv-fr{height:auto;padding:48px var(--gx) 96px;gap:32px}
  #svRoi .sv-h{font-size:28px!important;letter-spacing:.42px!important}
  .roi-cols{max-height:440px}
  .roi-fade{bottom:96px;height:150px;display:flex;align-items:flex-end;padding:0 var(--gx)}
  .roi-fade::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 22%,rgba(255,255,255,.75) 42%,#fff 62%)}
  /* phones/tablets: the CTA sits on the fade instead of under the heading */
  .roi-head .roi-cta{display:none}
  .roi-cta.roi-cta-m{display:flex;pointer-events:auto;flex:1;width:auto;flex-direction:row;justify-content:space-between}
  .roi-cta-m:hover svg{transform:translate(2px,-2px)}
  .roi-head{flex-direction:column}
  .roi-head>div{gap:12px}
  .roi-eye{font-size:16px;letter-spacing:.24px}
  .roi-head p.lead2{width:auto}
  .roi-cta{width:100%;height:56px;flex-direction:row-reverse;justify-content:space-between;align-items:center;padding:16px 16px 16px 20px}
  .roi-cta svg{width:20px;height:20px;align-self:center}
  .roi-cols{flex-direction:column;align-items:stretch}
  .roi-form{width:auto}
  .roi-out{position:relative;top:auto}
  .roi-card{padding:24px;gap:24px}
  .ro-head{padding:24px;flex-direction:column;align-items:flex-start;gap:4px}
  .ro-head h3{font-size:20px;letter-spacing:.3px}
  .ro-main{grid-template-columns:1fr;padding:24px}
  .ro-main b{font-size:36px;letter-spacing:.54px;margin-top:4px}
  .ro-grid{grid-template-columns:1fr 1fr}
  .ro-k{padding:16px}
  .ro-k b{font-size:22px}
  .ro-k span{font-size:12px}
  /* how we work */
  #svHow .sv-fr{padding:24px var(--gx) 80px;gap:24px}
  .hw-row{flex-direction:column}
  .hw{padding:24px;gap:20px}
  .hw h3{font-size:20px}
  .hw p{min-height:0;margin-top:12px}
}
@media (min-width:600px) and (max-width:1199px){
  .sv-h{font-size:44px!important;letter-spacing:.66px!important}
  #svStage{aspect-ratio:1/.7}
  .pb-row{padding:24px}
  .pb-row h3{font-size:20px}
  .wg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wg-c{min-height:0;aspect-ratio:334/400}   /* tablets: text cards take the same tall 334 × 400 proportions as the image cards */
  #svStats .sv-fr{flex-direction:row}
  .sx b{font-size:40px}
  .hw-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .roi-cols{flex-direction:row;align-items:flex-start}
  .roi-form{width:46%;flex:none}
  .roi-cols{max-height:400px}
  .ro-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:900px) and (max-width:1199px){
  .hw-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md-img{margin-left:30%}
}
@media (min-width:1200px){.bt-m{display:none}}
/* the artifact skeleton adds img{max-width:100%}; fixed-size art in the 1440 frames opts out */
@media (min-width:1200px){.dash img,.md-img img,.bt-img img{max-width:none}}
/* phones: case cards swipe sideways */
@media (max-width:599px){
  .p8-mcards.bt-cases{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scroll-padding-left:var(--gx);padding:0 var(--gx);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .p8-mcards.bt-cases::-webkit-scrollbar{display:none}
  .bt-cases .p8-mcard{flex:none;width:min(80vw,320px);scroll-snap-align:start}
}

/* phones: How we solve it as stacked sticky cards (homepage "Modernization" interaction) */
@media (max-width:599px){
  #mdTitle{font-size:28px!important;letter-spacing:.42px!important}
  #mdRow.md-stack{display:block}
  #mdRow.md-stack .md{position:sticky;display:block;height:480px;min-height:0;margin:0;padding:24px;background:#fff;box-shadow:var(--glow);cursor:default;overflow:hidden;
    border-radius:16px;transition:none}
  /* the 40vh scroll gap sits on the NEXT card's top margin, not on the previous card's bottom margin:
     a sticky card is released when its own margin box reaches the end of the row, so every card now stays pinned
     until the last card is fully over it; then they all leave together and the page scrolls on (no extra hold, no gap) */
  #mdRow.md-stack .md+.md{margin-top:40vh}
  #mdRow.md-stack .md-lab{display:none}
  #mdRow.md-stack .md-more,#mdRow.md-stack .md-more>div{display:block;grid-template-rows:none;margin:0;overflow:visible}
  #mdRow.md-stack .md-body{min-height:0;opacity:1;transform:none;gap:12px}
  #mdRow.md-stack .md-body h3{font-size:24px;letter-spacing:.36px}
  /* text area holds 5 lines in every card; the screenshot follows the text and always bleeds past the card's bottom edge (its own edge is never visible) */
  #mdRow.md-stack .md-body p{min-height:7.5em}
  #mdRow.md-stack .md-img{position:relative;left:0!important;top:auto;margin:20px 0 0;place-items:normal;width:auto;height:auto;opacity:1;transform:none;overflow:visible}
  #mdRow.md-stack .md-img img{width:580px;max-width:none;height:auto;margin:0}
  #mdRow.md-stack .md-img.pulse img{width:470px;transform:rotate(4.73deg);transform-origin:0 0;margin-left:14px}
}

@media (max-width:599px){html.js .bt-cases .rv:not(.in){transform:none}}
@media (max-width:599px){.pb-line{flex-direction:column}.pb-line .pb-row{flex:none}.pb-row{--a:.45}}
@media (min-width:600px) and (max-width:1199px){.pb-row{--a:.7}}
@media (prefers-reduced-motion:reduce){.pb-row{--k:1!important}.pb-lab{animation:none!important}}
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){html.js #mdTitle.rv:not(.in){transform:rotate(180deg) translateX(-24px)}}

/* ================= 10 · CTA "Tell us what's holding you back" — homepage section 10 (css/home/10-cta.css) inside the ride system ================= */
#pageCta{margin-top:0!important;z-index:auto;min-height:100vh;min-height:100svh}   /* never shorter than the screen, so zone B never shows beneath it  */
.zone .pageFaq{position:relative;z-index:1}