/* SPX Pulse Home Interactive V3.0 */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.from-right{transform:translateX(64px)}
.reveal.from-left{transform:translateX(-50px)}
.reveal.visible{opacity:1;transform:none}
.screen-flow-title{margin-top:13px;font-size:12px;color:var(--navy);font-weight:800}
.screen-flow-sub{font-size:7px;color:#839397;margin-top:2px}
.screen-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px;direction:rtl}
.screen-step{min-height:72px;border:1px solid #e0e9e5;border-radius:10px;background:#fff;padding:9px}
.screen-step b{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--green-soft);color:var(--green);font-size:7px}
.screen-step strong{display:block;font-size:7.1px;color:#526871;margin-top:7px;line-height:1.4}
.solutions .solution{transition:transform .25s,border-color .25s,box-shadow .25s}.solutions .solution:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(32,52,65,.08)}
.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.platform-banner{position:relative;min-height:182px;border:1px solid var(--line);border-radius:22px;padding:22px 22px 20px;overflow:hidden;background:linear-gradient(135deg,#fff,#f6faf8);box-shadow:var(--shadow-soft);transition:transform .25s,border-color .25s,box-shadow .25s}
.platform-banner:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;left:-80px;top:-90px;background:radial-gradient(circle,rgba(8,123,80,.10),transparent 68%)}
.platform-banner.tone-navy:before{background:radial-gradient(circle,rgba(41,62,76,.10),transparent 68%)}
.platform-banner.tone-sand:before{background:radial-gradient(circle,rgba(170,145,90,.10),transparent 68%)}
.platform-banner:hover{transform:translateY(-4px);border-color:#bdd6cc;box-shadow:0 18px 42px rgba(32,52,65,.08)}
.platform-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.platform-name-en{font-size:10px;font-weight:800;color:var(--green);letter-spacing:.7px}.platform-banner h3{font-size:20px;color:var(--navy);margin:5px 0 0}.platform-status{padding:5px 8px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:8.5px;font-weight:800;white-space:nowrap}.platform-banner p{position:relative;font-size:11px;line-height:1.8;color:#788b92;margin:10px 0 0;max-width:90%}.platform-bottom{position:relative;display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:14px}.platform-tags{display:flex;flex-wrap:wrap;gap:6px}.platform-tags span{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);font-size:8px;color:#72858c}.platform-link{font-size:9px;font-weight:800;color:var(--green);white-space:nowrap}.platform-empty{grid-column:1/-1;border:1px dashed #cfdcd7;border-radius:20px;padding:24px;text-align:center;background:#fbfcfc;color:#8b999e;font-size:11px;line-height:1.8}
.process-wrap{position:relative;padding-top:18px}.flow-line{position:absolute;z-index:1;top:48px;right:6%;left:6%;height:2px;background:#e4ebe8;overflow:hidden}.flow-line-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#b8d5c8,var(--green));transition:width 1.6s cubic-bezier(.22,1,.36,1)}.process-wrap.visible .flow-line-fill{width:100%}.process-wrap .process{position:relative;z-index:2}.process-wrap .step{box-shadow:var(--shadow-soft);transition:transform .25s,border-color .25s}.process-wrap .step:hover{transform:translateY(-5px);border-color:#bdd6cc}.process-wrap .step small{display:inline-flex;margin-top:12px;padding:4px 7px;border-radius:999px;background:#f3f7f5;color:#799088;font-size:8px}.process-wrap .step:last-child small{background:var(--green-soft);color:var(--green)}
.lab-pro{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow);padding:34px}.lab-pro:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:-170px;top:-230px;background:radial-gradient(circle,rgba(8,123,80,.09),transparent 68%)}.lab-grid{position:relative;display:grid;grid-template-columns:1fr .95fr;gap:26px;align-items:start}.lab-pro h3{font-size:27px;color:var(--navy);margin:7px 0 9px}.lab-pro p{font-size:11.5px;line-height:1.9;color:#788b92}.idea-box{border:1px solid var(--line);border-radius:18px;background:#f8faf9;padding:14px;margin-top:17px}.idea-box textarea{width:100%;min-height:105px;border:1px solid var(--line);outline:0;background:#fff;border-radius:13px;padding:13px;resize:vertical;color:var(--text);font-size:11.5px;line-height:1.8}.idea-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}.idea-hint{font-size:8.5px;color:#8e9ca0}.idea-btn{border:0;border-radius:11px;background:var(--green);color:#fff;min-height:40px;padding:0 13px;font-size:9.5px;font-weight:800}.lab-categories{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.lab-categories button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 9px;color:#70838a;font-size:8.5px}.lab-categories button:hover{background:var(--green-soft);border-color:#d8e8e1;color:var(--green)}.pipeline{position:relative;margin-top:5px;padding-top:16px}.pipeline-track{height:2px;background:#e4ebe8;position:absolute;right:5%;left:5%;top:35px;overflow:hidden}.lab-pipeline-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#c6ded3,var(--green));transition:width 1.7s cubic-bezier(.22,1,.36,1)}.lab-pro.visible .lab-pipeline-fill{width:100%}.pipeline-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;position:relative}.pipe-step{text-align:center}.pipe-step i{width:31px;height:31px;border-radius:50%;background:#fff;border:1px solid #cddbd5;display:grid;place-items:center;margin:auto;color:var(--green);font-style:normal;font-size:8px;font-weight:800;position:relative;z-index:2}.pipe-step strong{display:block;font-size:8.5px;color:#667b83;margin-top:7px}.experiment-head{display:flex;justify-content:space-between;align-items:center;margin-top:21px}.experiment-head strong{font-size:11px;color:var(--navy)}.experiment-head span{font-size:8px;color:#95a2a6}.experiments{display:grid;gap:8px;margin-top:9px}.experiment{border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px;transition:.2s}.experiment:hover{transform:translateX(-3px);border-color:#bdd6cc}.experiment-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.experiment h4{margin:0;font-size:11px;color:#526871}.experiment .stage{padding:4px 7px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:7.5px;font-weight:800}.experiment p{font-size:8.8px;line-height:1.6;margin:5px 0 0}.experiment-empty{border:1px dashed #d0dcd7;border-radius:13px;padding:14px;text-align:center;color:#95a2a6;font-size:9px}
.toast{position:fixed;z-index:100;left:18px;bottom:18px;background:var(--navy-2);color:#fff;padding:11px 14px;border-radius:12px;font-size:9px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
@media(max-width:1000px){.platform-grid{grid-template-columns:1fr}.lab-grid{grid-template-columns:1fr}.flow-line{display:none}}
@media(max-width:650px){.platform-grid{grid-template-columns:1fr}.lab-pro{padding:23px}.pipeline-steps{grid-template-columns:repeat(5,72px);overflow:auto;justify-content:start;padding-bottom:5px}.pipeline-track{display:none}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.flow-line-fill,.lab-pipeline-fill{transition:none!important}}


/* ===== V3.1 refinement layer ===== */
body{overflow-x:hidden}
.section{padding:56px 0}
.section-head{margin-bottom:21px}
.section h2{font-size:30px}
.hero{padding:62px 0 42px}
.hero-grid{gap:46px}
.device-stage{min-height:430px}
.capability-strip{padding:12px 0}
.cap{padding:11px 13px}
.cap-icon{width:34px;height:34px;border-radius:10px}

/* Public header stays clean; admin remains accessible by direct URL */
.header-actions{margin-inline-start:8px}

/* Adopted full-laptop silhouette: screen + keyboard deck + floating depth */
.laptop-wrap{width:min(100%,610px);transform:rotateY(-15deg) rotateX(2deg) rotateZ(-1.3deg) translateX(-4px);transform-origin:center center}
.laptop-wrap:hover{transform:rotateY(-11deg) rotateX(1deg) rotateZ(-.7deg) translateY(-5px)}
.laptop-screen{border-width:12px;border-bottom-width:15px;border-radius:18px 18px 9px 9px;box-shadow:0 24px 48px rgba(24,39,48,.17)}
.laptop-hinge{width:92%;height:8px;margin:-2px auto 0;background:linear-gradient(180deg,#383f43,#14191c);border-radius:1px 1px 7px 7px;position:relative;z-index:4}
.laptop-deck{position:relative;width:111%;height:108px;margin:-1px -5.5% 0;background:linear-gradient(180deg,#aeb5b9 0,#c7cccf 34%,#929a9e 100%);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);border-radius:0 0 13px 13px;box-shadow:0 22px 28px rgba(34,51,60,.16);overflow:hidden}
.keyboard-zone{position:absolute;top:13px;left:13%;right:13%;height:48px;border-radius:6px;opacity:.88;background-color:#202629;background-image:repeating-linear-gradient(90deg,transparent 0 20px,rgba(208,218,222,.23) 20px 21px),repeating-linear-gradient(0deg,transparent 0 12px,rgba(208,218,222,.18) 12px 13px);box-shadow:inset 0 0 0 1px rgba(10,15,18,.35)}
.keyboard-zone:after{content:"";position:absolute;inset:5px 8%;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 29px,rgba(255,255,255,.11) 29px 30px)}
.trackpad{position:absolute;left:36%;right:36%;bottom:10px;height:31px;border-radius:6px;border:1px solid rgba(84,96,101,.35);background:linear-gradient(180deg,rgba(230,234,235,.5),rgba(174,182,185,.35))}
.laptop-lip{width:111%;height:9px;margin:-2px -5.5% 0;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#949da1,#d8dddf 70%);box-shadow:0 15px 22px rgba(34,51,60,.13);position:relative}
.laptop-lip:after{content:"";position:absolute;top:0;left:39%;width:22%;height:4px;border-radius:0 0 7px 7px;background:#aab1b5}
.laptop-base{display:none!important}

/* Compact capabilities */
.solutions{gap:12px}.solution{min-height:184px;padding:18px}.sicon{width:42px;height:42px;border-radius:13px}.solution h3{margin:14px 0 7px;font-size:15px}.solution p{font-size:10.8px;line-height:1.75}.solution.reveal{transition-delay:var(--delay,0s)}

/* Platforms + Workspaces merged */
#platforms.section{padding-top:58px;padding-bottom:58px}
.platform-grid{gap:14px}.platform-banner{min-height:164px;padding:18px 20px;border-radius:20px}.platform-banner h3{font-size:18px}.platform-banner p{font-size:10.6px;line-height:1.72;margin-top:8px}.platform-bottom{margin-top:11px}.platform-status{font-size:8px}.platform-tags span{font-size:7.7px}.platform-link{font-size:8.6px}

/* AI section — less empty, more product-like */
#agent.section{padding:52px 0}.agent-card{grid-template-columns:1.05fr .85fr;gap:20px;padding:25px 28px;border-radius:22px}.agent-card h3{font-size:25px;margin:10px 0 7px}.agent-card p{font-size:11px;line-height:1.82;margin:0}.agent-features{margin-top:11px}.agent-features span{font-size:8.5px;padding:5px 8px}.agent-card .actions{margin-top:16px}.agent-preview{padding:12px;border-radius:16px}.agent-preview .msg{font-size:8.5px;padding:9px 10px}

/* Delivery model — shorter cards + clear animated rail */
#process.section{padding:56px 0}.process-wrap{padding-top:11px}.process{gap:11px}.flow-line{top:36px;right:7%;left:7%;height:3px;border-radius:99px}.step{min-height:144px;padding:17px 18px;border-radius:17px}.step b{width:30px;height:30px;box-shadow:0 0 0 7px #fff}.step h3{font-size:13.5px;margin:13px 0 5px}.step p{font-size:10px;line-height:1.68}.process-wrap .step small{margin-top:9px}.process-wrap.visible .step:nth-child(1){animation:stepArrive .55s .05s both}.process-wrap.visible .step:nth-child(2){animation:stepArrive .55s .17s both}.process-wrap.visible .step:nth-child(3){animation:stepArrive .55s .29s both}.process-wrap.visible .step:nth-child(4){animation:stepArrive .55s .41s both}@keyframes stepArrive{from{opacity:.25;transform:translateX(28px) scale(.99)}to{opacity:1;transform:none}}

/* Innovation Lab — adaptive: no wasted empty half when no experiments */
#lab.section{padding:56px 0}.lab-pro{padding:27px;border-radius:24px}.lab-grid{grid-template-columns:1.12fr .78fr;gap:22px}.lab-pro.lab-empty .lab-grid{grid-template-columns:1fr}.lab-pro.lab-empty .lab-experiment-panel{display:none}.lab-pro h3{font-size:24px;margin-top:3px}.lab-pro p{font-size:10.8px;line-height:1.78}.lab-categories{margin-top:11px}.idea-box{margin-top:13px;padding:12px}.idea-box textarea{min-height:92px}.pipeline{padding-top:12px;margin-top:2px}.pipeline-track{top:31px}.pipe-step i{width:29px;height:29px}.experiment-head{margin-top:5px}.experiment-empty{min-height:78px;display:grid;place-items:center}

@media(max-width:1000px){.section{padding:48px 0}.agent-card,.lab-grid{grid-template-columns:1fr}.laptop-deck{height:92px}.device-stage{min-height:390px}}
@media(max-width:650px){.hero{padding:44px 0 30px}.device-stage{min-height:275px}.laptop-wrap{width:94%;transform:rotateY(-7deg) rotateX(1deg) rotateZ(-.7deg)}.laptop-deck{height:70px}.keyboard-zone{top:9px;height:30px;left:14%;right:14%;background-size:auto}.trackpad{height:20px;bottom:7px}.section{padding:42px 0}.section h2{font-size:26px}.solution{min-height:0}.agent-card{padding:20px}.lab-pro{padding:20px}.idea-actions{align-items:stretch;flex-direction:column}.idea-btn{width:100%}}


/* =========================================================
   SPX Pulse V3.2 — Interaction & approved laptop refinement
   ========================================================= */

/* The duplicated upper capability strip has been removed from HTML. */
.capability-strip{display:none!important}

/* Exact approved laptop image selected by the user */
.device-stage{
  min-height:430px;
  position:relative;
  display:grid;
  place-items:center;
  perspective:none;
}
.approved-laptop{
  width:min(100%,690px);
  position:relative;
  transform:translateY(4px);
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .55s ease;
  filter:drop-shadow(0 24px 26px rgba(31,52,65,.08));
}
.approved-laptop:after{
  content:"";
  position:absolute;
  left:18%;right:11%;bottom:5.5%;
  height:7%;
  border-radius:50%;
  background:rgba(32,52,65,.10);
  filter:blur(20px);
  z-index:-1;
}
.approved-laptop img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.approved-laptop:hover{
  transform:translateY(-5px) scale(1.012);
  filter:drop-shadow(0 30px 34px rgba(31,52,65,.12));
}

/* ---------------------------------------------------------
   WHAT WE BUILD — unmistakable reveal / hover / click state
   --------------------------------------------------------- */
#solutions.section{padding-top:58px;padding-bottom:58px}
#solutionsGrid{gap:15px}

.solution{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  min-height:205px;
  padding:20px;
  isolation:isolate;
  outline:none;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    background .35s ease,
    border-color .35s ease,
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    color .35s ease;
}
.solution:before{
  content:"";
  position:absolute;
  width:180px;height:180px;
  left:-95px;bottom:-105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(8,123,80,.12),transparent 68%);
  transform:scale(.55);
  opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s ease;
  z-index:-1;
}
.solution.reveal{
  opacity:0;
  transform:translateX(112px) scale(.92);
  filter:blur(7px);
  transition:
    opacity .72s ease var(--delay,0s),
    transform .82s cubic-bezier(.16,1,.3,1) var(--delay,0s),
    filter .75s ease var(--delay,0s),
    background .35s ease,
    border-color .35s ease,
    box-shadow .45s ease;
}
.solution.reveal.visible{
  opacity:1;
  transform:none;
  filter:none;
}
.solution-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.solution .sicon{
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s,color .35s;
}
.solution-arrow{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:#f4f8f6;
  border:1px solid #dce8e3;
  color:var(--green);
  font-size:20px;font-weight:800;
  transform:translateX(7px);
  opacity:.72;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s,background .3s,color .3s,border-color .3s;
}
.solution-action{
  position:absolute;
  right:20px;left:20px;bottom:17px;
  display:flex;align-items:center;justify-content:space-between;
  color:#8b999e;font-size:9px;font-weight:700;
  padding-top:10px;border-top:1px solid #edf2f0;
  transition:color .3s,border-color .3s;
}
.solution-action b{
  width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;
  background:#f3f7f5;color:var(--green);font-size:8px;
  transition:background .3s,color .3s,transform .3s;
}
.solution:hover{
  transform:translateY(-10px) scale(1.018);
  border-color:#a8cdbd;
  box-shadow:0 24px 52px rgba(32,52,65,.12);
}
.solution:hover:before{opacity:1;transform:scale(1)}
.solution:hover .sicon{transform:rotate(-7deg) scale(1.12)}
.solution:hover .solution-arrow{transform:translateX(-5px);opacity:1;background:var(--green);border-color:var(--green);color:#fff}
.solution:hover .solution-action{color:var(--green)}
.solution:focus-visible{box-shadow:0 0 0 4px rgba(8,123,80,.15),0 22px 45px rgba(32,52,65,.10);border-color:var(--green)}

/* Active = clear background change on click */
.solution.is-active{
  background:linear-gradient(145deg,#087b50 0%,#0a8b5b 100%);
  border-color:transparent;
  color:#fff;
  transform:translateY(-8px) scale(1.014);
  box-shadow:0 26px 58px rgba(8,123,80,.22);
}
.solution.is-active:before{
  width:230px;height:230px;left:-80px;bottom:-125px;
  opacity:1;transform:scale(1);
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);
}
.solution.is-active h3,
.solution.is-active p{color:#fff}
.solution.is-active p{opacity:.88}
.solution.is-active .sicon{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:scale(1.08);
}
.solution.is-active .solution-arrow{
  opacity:1;
  transform:translateX(-4px);
  background:#fff;border-color:#fff;color:var(--green);
}
.solution.is-active .solution-action{
  color:rgba(255,255,255,.82);
  border-top-color:rgba(255,255,255,.18);
}
.solution.is-active .solution-action b{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:scale(1.05);
}
.solution:active{transform:translateY(-5px) scale(.995)}

/* ---------------------------------------------------------
   DELIVERY MODEL — active workflow with progressive rail
   --------------------------------------------------------- */
#processWrap{
  --process-progress:0%;
}
#processWrap .flow-line{
  top:38px;
  height:4px;
  border-radius:999px;
  overflow:visible;
  background:#e5ede9;
}
#processWrap .flow-line-fill,
#processWrap.visible .flow-line-fill{
  position:absolute;
  top:0;right:0;
  width:var(--process-progress,0%)!important;
  height:100%;
  border-radius:999px;
  background:linear-gradient(270deg,#087b50,#57ad88);
  box-shadow:0 0 0 1px rgba(8,123,80,.04),0 0 16px rgba(8,123,80,.15);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
#processWrap .process{gap:13px}
#processWrap .step{
  position:relative;
  min-height:170px;
  cursor:pointer;
  overflow:hidden;
  outline:none;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    background .34s ease,
    border-color .34s ease,
    box-shadow .4s ease;
}
#processWrap .step:before{
  content:"";
  position:absolute;
  width:150px;height:150px;
  left:-85px;bottom:-95px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,123,80,.10),transparent 68%);
  opacity:0;transform:scale(.55);
  transition:.4s;
}
#processWrap .step b{
  position:relative;
  z-index:4;
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:12px;
  box-shadow:0 0 0 8px #fff;
  transition:background .32s,color .32s,box-shadow .32s,transform .32s;
}
#processWrap .step-copy{position:relative;z-index:2}
#processWrap .step h3{font-size:14px;margin-top:18px}
#processWrap .step p{font-size:10.4px;line-height:1.74}
#processWrap .step-arrow{
  position:absolute;
  left:16px;top:17px;
  width:35px;height:35px;border-radius:11px;
  display:grid;place-items:center;
  color:#93a29f;background:#f5f8f7;
  font-size:16px;
  opacity:.65;transform:translateX(5px);
  transition:.35s;
}
#processWrap .step:hover{
  transform:translateY(-8px);
  border-color:#acd0c0;
  box-shadow:0 22px 46px rgba(32,52,65,.10);
}
#processWrap .step:hover:before{opacity:1;transform:scale(1)}
#processWrap .step:hover .step-arrow{opacity:1;transform:translateX(-4px);color:var(--green)}
#processWrap .step:focus-visible{box-shadow:0 0 0 4px rgba(8,123,80,.14),0 20px 42px rgba(32,52,65,.09);border-color:var(--green)}

/* Completed stages */
#processWrap .step.is-complete{
  background:#f0f7f4;
  border-color:#c7ded4;
}
#processWrap .step.is-complete b{
  background:#dcefe6;
  color:var(--green);
  box-shadow:0 0 0 8px #f0f7f4;
}
#processWrap .step.is-complete .step-arrow{color:var(--green);opacity:1}

/* Current selected stage: explicit background switch */
#processWrap .step.is-active{
  background:linear-gradient(145deg,#087b50,#0a8b5b);
  border-color:transparent;
  color:#fff;
  transform:translateY(-8px);
  box-shadow:0 25px 54px rgba(8,123,80,.20);
}
#processWrap .step.is-active h3,
#processWrap .step.is-active p{color:#fff}
#processWrap .step.is-active p{opacity:.87}
#processWrap .step.is-active b{
  background:#fff;color:var(--green);
  box-shadow:0 0 0 8px rgba(255,255,255,.12);
  transform:scale(1.06);
}
#processWrap .step.is-active small{
  background:rgba(255,255,255,.14);
  color:#fff;
}
#processWrap .step.is-active .step-arrow{
  background:#fff;color:var(--green);opacity:1;transform:translateX(-4px);
}
#processWrap .step:active{transform:translateY(-4px) scale(.99)}

@media(max-width:1000px){
  .approved-laptop{width:min(92%,650px)}
  #solutionsGrid{grid-template-columns:repeat(2,1fr)}
  #processWrap .process{grid-template-columns:repeat(2,1fr)}
  #processWrap .flow-line{display:none}
}
@media(max-width:650px){
  .device-stage{min-height:270px}
  .approved-laptop{width:108%;margin-inline:-4%}
  #solutionsGrid{grid-template-columns:1fr}
  .solution{min-height:190px}
  .solution.reveal{transform:translateX(70px) scale(.95)}
  #processWrap .process{grid-template-columns:1fr}
  #processWrap .step{min-height:145px}
}
@media(prefers-reduced-motion:reduce){
  .solution.reveal{opacity:1!important;transform:none!important;filter:none!important}
  .solution,.solution-arrow,.sicon,#processWrap .step,#processWrap .step-arrow,#processWrap .flow-line-fill{transition:none!important}
}