/* SPATIAL 2 - component styles for the home and features pages (generated). */
@keyframes pop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.s2 .pad{position:relative;
  background:linear-gradient(158deg,#4A4A57 0%,#26262F 18%,#17171E 52%,#2B2B36 88%,#5A5A68 100%);
  box-shadow:0 44px 92px -42px rgba(24,24,32,.66), 0 3px 10px rgba(24,24,32,.16),
             inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.08);}
.s2 .pad::after{/* inner bezel ring */
  content:"";position:absolute;inset:6px;border-radius:inherit;
  border:1px solid rgba(0,0,0,.55);pointer-events:none;}
.s2 .pad-screen{position:relative;overflow:hidden;background:#141419;line-height:0;}
.s2 .pad-screen > img{width:100%;display:block;}
.s2 .pad-glare{/* soft diagonal screen reflection */
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 18%,
             rgba(255,255,255,0) 42%,rgba(255,255,255,0) 100%);
  mix-blend-mode:screen;}
.s2 .pad-cam{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5E5E6B,#141419 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);}
.s2 .pad-btn{/* side buttons on the top edge */
  position:absolute;top:-3px;height:3px;border-radius:2px;
  background:linear-gradient(180deg,#5E5E6B,#2B2B36);}
.s2 .pad-btn.p1{right:14%;width:52px;}
.s2 .pad-btn.p2{right:26%;width:30px;}
.s2 .walk{position:relative;}
.s2 .walk-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 2px 14px;margin-bottom:18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.s2 .walk-tabs::-webkit-scrollbar{display:none;}
.s2 .walk-tabs-wrap{position:relative;}
.s2 .walk-tabs-wrap::after{content:"";position:absolute;right:0;top:0;bottom:14px;width:48px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));}
.s2 .walk-tabs button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 15px;font-family:var(--tight);font-weight:550;font-size:.87rem;
  color:var(--body);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;}
.s2 .walk-tabs button:hover{border-color:var(--teal);color:var(--teal-600);}
.s2 .walk-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.s2 .walk-tabs button .vid{width:6px;height:6px;border-radius:50%;background:var(--ch-cy3);flex:none;}
.s2 .walk-tabs button[aria-selected="true"] .vid{background:var(--mint);}
.s2 .walk-screens{position:relative;}
.s2 .walk-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .32s ease;}
.s2 .walk-screens img.on{opacity:1;position:relative;}
.s2 .walk-cap{display:flex;gap:14px;align-items:flex-start;margin-top:18px;max-width:74ch;}
.s2 .walk-cap .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--teal);
  padding-top:4px;flex:none;}
.s2 .walk-cap p{margin:0;font-size:.95rem;color:var(--body);}
.s2 .walk-cap strong{font-family:var(--tight);color:var(--ink);font-weight:600;}
.s2 .walk-nav{display:flex;gap:8px;margin-top:20px;align-items:center;}
.s2 .walk-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;color:var(--ink);font-size:.9rem;}
.s2 .walk-nav button:hover{border-color:var(--teal);color:var(--teal-600);}
.s2 .walk-nav .count{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-left:6px;}
.s2 .hot.has-video::after{content:attr(data-tip) "  \25B6";}
.s2 .hot.has-video{border-color:rgba(228,96,78,.5);}
.s2 .hot.has-video:hover{border-color:var(--ch-cy3);background:rgba(228,96,78,.14);}
.s2 .vid-overlay{position:absolute;inset:0;z-index:9;background:rgba(6,20,26,.86);
  backdrop-filter:blur(5px);display:none;place-items:center;padding:4%;}
.s2 .vid-overlay.open{display:grid;}
.s2 .vid-overlay video{width:auto;height:auto;max-width:86%;max-height:78%;border-radius:10px;box-shadow:0 20px 50px -20px #000;background:#000;}
.s2 .vid-overlay .vo-cap{position:absolute;left:5%;bottom:5%;right:5%;color:#DADAE1;font-size:.9rem;max-width:60ch;}
.s2 .vid-overlay .vo-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:1rem;line-height:1;}
.s2 .vid-overlay .vo-close:hover{background:rgba(255,255,255,.2);}
.s2 .ipad{border-radius:34px;padding:18px 16px;}
.s2 .ipad .pad-screen{border-radius:19px;}
.s2 .stylus{position:absolute;top:0;left:0;width:15px;height:112px;z-index:6;pointer-events:none;
  transform-origin:50% 0%;
  opacity:0;transform:translate(-9999px,-9999px) rotate(-38deg);
  transition:opacity .18s ease;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));}
.s2 .ipad:hover .stylus{opacity:1;}
@media (hover:none){
.s2 .stylus{display:none;}
}
.s2 .hot{position:absolute;z-index:5;border-radius:8px;cursor:default;
  border:1px dashed transparent;transition:border-color .18s ease,background .18s ease;}
.s2 .hot:hover{border-color:rgba(252,126,114,.85);background:rgba(252,126,114,.14);}
.s2 .hot::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  background:#181820;color:#fff;font-family:var(--sans);font-size:.76rem;line-height:1.35;
  letter-spacing:0;padding:7px 11px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);}
.s2 .hot::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#181820;opacity:0;transition:opacity .16s ease;}
.s2 .hot:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
.s2 .hot:hover::before{opacity:1;}
.s2 .hot.below::after{bottom:auto;top:calc(100% + 9px);}
.s2 .hot.below::before{bottom:auto;top:calc(100% + 4px);border-top-color:transparent;border-bottom-color:#181820;}
.s2 .hot.left::after{left:auto;right:0;transform:translateX(0) translateY(4px);}
.s2 .hot.left:hover::after{transform:translateX(0) translateY(0);}
.s2 .hot.left::before{left:auto;right:22px;transform:none;}
.s2 .pad-hint{font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:16px 0 0;}
@media (hover:none){
.s2 .pad-hint{display:none;}
}
.s2 .compare{position:relative;border-radius:var(--radius);overflow:hidden;background:#141419;
  aspect-ratio:640/499;cursor:pointer;box-shadow:var(--shadow);}
.s2 .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.s2 .compare .seg{opacity:0;transition:opacity .4s ease;}
.s2 .compare.on .seg,.s2 .compare:hover .seg{opacity:1;}
.s2 .compare .badge2{position:absolute;right:12px;bottom:11px;z-index:2;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(4,20,26,.6);backdrop-filter:blur(4px);padding:5px 10px;border-radius:99px;}
.s2 .compare.on .badge2 .a,.s2 .compare:hover .badge2 .a{display:none;}
.s2 .compare .badge2 .b{display:none;}
.s2 .compare.on .badge2 .b,.s2 .compare:hover .badge2 .b{display:inline;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (max-width:680px){
.s2 .walk-tabs button{font-size:.8rem;padding:7px 12px;}
.s2 .ipad{border-radius:20px;padding:11px 9px;}
.s2 .ipad .pad-screen{border-radius:11px;}
.s2 .pad-cam{top:5px;width:5px;height:5px;}
.s2 .hot{display:none;}
}
.s2 .pad-wrap{margin-top:34px;}
@keyframes cursorTo{
  0%   {opacity:0;left:6%;top:78%;transform:scale(.7);}
  18%  {opacity:1;transform:scale(1);}
  55%  {opacity:1;left:var(--tx);top:var(--ty);transform:scale(1);}
  70%  {opacity:1;left:var(--tx);top:var(--ty);transform:scale(.62);}
  82%  {opacity:1;left:var(--tx);top:var(--ty);transform:scale(1);}
  100% {opacity:0;left:var(--tx);top:var(--ty);transform:scale(1);}
}

/* ============================================================
   SPATIAL 2 - page styles. Layout and typography come from the site
   stylesheet (Bootstrap + main.css); this file only covers the tokens the
   draft components need, the sub-menu, and the sections that have no site
   equivalent.
   ============================================================ */
.s2{
  --ink:#000; --deep:#171717; --teal:#E74B45; --teal-600:#C93F39; --teal-050:#FEEDEE; --aqua:#FF6F68; --mint:#FCCFD1;
  --ch-dapi:#4C6FE8; --ch-fitc:#35C58B; --ch-cy3:#E74B45; --ch-cy5:#E8734C;
  --paper:#fff; --wash:#FFF6F7; --wash-2:#ECECEC; --line:#D8D8D8; --line-soft:#ECECEC; --body:#616161; --muted:#8A8A8A;
  --radius-s:8px; --radius:14px; --radius-l:24px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --tight:var(--sans); --mono:var(--sans);
  --shadow-s:0 2px 8px rgba(0,0,0,.05); --shadow:0 4px 24px rgba(0,0,0,.08); --shadow-l:0 16px 48px rgba(0,0,0,.14);
  font-family:var(--sans);
}
.s2 .bg-pink{background:linear-gradient(109deg,#FFF6F7 20%,#FEEDEE 100%);}
.s2 .s2-shot{box-shadow:0 4px 24px rgba(0,0,0,.12);}
.s2 .s2-media video,.s2 .s2-media img{display:block;}
.s2 .small{font-size:.875em;}

/* ---- sub-menu: a second dark row under the site navigation ---- */
.s2 .s2-subnav{position:sticky;top:0;z-index:40;background:#000;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.1);}
.s2 .s2-subnav-in{display:flex;align-items:center;gap:6px;height:54px;}
.s2 .s2-subnav a{color:rgba(255,255,255,.72);border-radius:8px;font-weight:500;font-size:.95rem;padding:8px 14px;text-decoration:none;white-space:nowrap;transition:background .16s ease,color .16s ease;}
.s2 .s2-subnav a:hover{color:#fff;background:rgba(255,255,255,.1);}
.s2 .s2-subnav a:first-child{color:#fff;font-weight:600;}
.s2 .s2-subnav a.on,.s2 .s2-subnav a:first-child.on{background:#fff;color:#000;}
@media (max-width:680px){.s2 .s2-subnav-in{height:46px;overflow-x:auto;scrollbar-width:none;}.s2 .s2-subnav a{padding:7px 11px;font-size:.88rem;}}

/* ---- hero ---- */
.s2 .s2-hero{background:linear-gradient(0deg,#000 0%,#161616 22.5%,#323232 100%);}
.s2 .s2-bubbles{width:72px;height:auto;display:block;}
/* the hero tablet: 16:10 screen, real app screens, clip in the canvas */
.s2 .hero-tablet{max-width:620px;margin:0 auto;}
.s2 .hero-ipad{border-radius:28px;padding:14px 13px;}
.s2 .hero-ipad .pad-screen{border-radius:15px;aspect-ratio:16/10;}
.s2 .hero-ipad .hs{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.s2 .hero-ipad .hs.on{opacity:1;}
.s2 .hero-ipad .hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.s2 .hero-ipad .vid-inset{transition:opacity .5s ease;}
.s2 .hero-caps{margin-top:22px;min-height:76px;}
.s2 .hero-caps .hc p{font-size:.95rem;line-height:1.5;}
.s2 .hero-dots{display:flex;gap:8px;margin-top:14px;}
.s2 .hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background .2s ease,width .2s ease;}
.s2 .hero-dots button[aria-current="true"]{background:#E74B45;width:24px;border-radius:4px;}
@media (max-width:991px){.s2 .hero-tablet{max-width:560px;}}

/* ---- steps (in the pink workflow band) ---- */
.s2 .s2-step{box-shadow:0 4px 24px rgba(0,0,0,.06);}

/* ---- results: comparison panels in site cards ---- */
.s2 .s2-result-card{box-shadow:0 4px 24px rgba(0,0,0,.12);padding:8px;}
.s2 .s2-result-card .compare{border-radius:10px;box-shadow:none;}
.s2 .compare{cursor:pointer;}

/* ---- highlights: screenshot that follows the accordion ---- */
.s2 .s2-hl-img{overflow:hidden;background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08);}
.s2 .s2-hl-img img,.s2 .s2-hl-img video{display:none;width:100%;}
.s2 .s2-hl-img img.on,.s2 .s2-hl-img video.on{display:block;}
.s2 .s2-highlights .accordion-button::after{filter:invert(1);}

/* ---- quotes ---- */
.s2 .s2-quote{box-shadow:0 4px 24px rgba(0,0,0,.06);}
.s2 .s2-quote img{object-fit:cover;}

/* ---- feature rows ---- */
.s2 .s2-ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;}
.s2 .s2-ticks li{position:relative;padding-left:24px;color:#000;font-size:.95rem;}
.s2 .s2-ticks li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
@media (max-width:560px){.s2 .s2-ticks{grid-template-columns:1fr;}}

/* ============================================================
   Tablet tour - tablet with captions and controls, numbered step list beside it
   ============================================================ */
.s2 .walk{margin-top:12px;}
.s2 .walk-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;}
.s2 .walk-main{min-width:0;}
.s2 .walk-tabs-wrap{position:relative;}
.s2 .walk-tabs-wrap::after{display:none;}
.s2 .walk-tabs{display:flex;flex-direction:column;gap:4px;overflow:visible;padding:0;margin:0 0 22px;counter-reset:step;}
.s2 .walk-tabs button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;border-radius:10px;
  border:1px solid transparent;background:transparent;font-family:var(--sans);font-weight:500;font-size:15px;color:#333;
  position:relative;overflow:hidden;white-space:normal;line-height:1.3;cursor:pointer;transition:background .16s ease,color .16s ease;
}
.s2 .walk-tabs button::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-weight:700;font-size:12px;color:#8A8A8A;width:22px;flex:none;letter-spacing:.04em;}
.s2 .walk-tabs button:hover{background:#F2F2F2;border-color:transparent;color:#000;}
.s2 .walk-tabs button[aria-selected="true"]{background:#000;border-color:#000;color:#fff;}
.s2 .walk-tabs button[aria-selected="true"]::before{color:#E74B45;}
.s2 .walk-tabs button .vid{width:6px;height:6px;border-radius:50%;background:#E74B45;flex:none;margin-left:auto;}
.s2 .walk-tabs button .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:#E74B45;}
.s2 .walk-tabs button.running .bar{transition:width linear;}
.s2 .walk-cap{margin-top:22px;max-width:none;font-family:var(--sans);gap:16px;}
.s2 .walk-cap .n{font-family:var(--sans);font-weight:700;letter-spacing:.06em;font-size:.8rem;padding-top:5px;color:#E74B45;}
.s2 .walk-cap p{font-size:1.05rem;line-height:1.55;color:#616161;}
.s2 .walk-cap strong{font-family:var(--sans);color:#000;font-weight:600;}
.s2 .walk-nav{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap;row-gap:10px;}
.s2 .walk-nav button{width:42px;height:42px;border-radius:10px;border:1px solid #D8D8D8;background:#fff;color:#000;font-size:1.05rem;cursor:pointer;display:grid;place-items:center;}
.s2 .walk-nav button:hover{border-color:#000;}
.s2 .walk-nav .count{font-family:var(--sans);font-size:15px;color:#616161;margin-left:4px;letter-spacing:0;}
.s2 .walk-nav .tour{width:auto;height:42px;margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:0 16px;font-size:15px;font-weight:500;white-space:nowrap;flex:none;}
.s2 .walk-nav .expand{width:auto;height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-size:15px;font-weight:500;white-space:nowrap;flex:none;}
.s2 .walk-nav .tour i{width:8px;height:8px;border-radius:50%;background:#E74B45;display:block;}
.s2 .walk-nav .tour.paused i{background:#D8D8D8;}
.s2 .walk-vcap{margin:12px 0 0;max-width:none;font-size:.95rem;color:#616161;padding-left:38px;position:relative;font-family:var(--sans);}
.s2 .walk-vcap::before{content:"";position:absolute;left:0;top:.5em;width:22px;height:2px;background:#E74B45;}
@media (max-width:991px){
  .s2 .walk-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
  .s2 .walk-aside{display:contents;}
  .s2 .walk-tabs-wrap{order:-1;min-width:0;max-width:100%;}
  .s2 .walk-tabs-wrap::after{display:block;content:"";position:absolute;right:0;top:0;bottom:12px;width:48px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);}
  .s2 .walk-tabs{flex-direction:row;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0;scrollbar-width:none;}
  .s2 .walk-tabs::-webkit-scrollbar{display:none;}
  .s2 .walk-tabs button{width:auto;flex:none;padding:10px 14px;border:1px solid #D8D8D8;white-space:nowrap;}
  .s2 .walk-tabs button::before{display:none;}
  .s2 .walk-side{order:2;}
}

/* frame polish */
.s2 .ipad{border-radius:38px;padding:20px 18px;
  background:linear-gradient(158deg,#4E4E5B 0%,#282831 16%,#18181F 50%,#2A2A34 86%,#5C5C6A 100%);
  box-shadow:0 70px 130px -60px rgba(24,24,32,.72),0 30px 60px -36px rgba(24,24,32,.45),0 2px 6px rgba(24,24,32,.16),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.08);}
.s2 .ipad::after{inset:7px;border:1px solid rgba(0,0,0,.6);}
.s2 .ipad .pad-screen{border-radius:20px;}
.s2 .ipad .pad-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 22px rgba(0,0,0,.42);}
.s2 .ipad .pad-glare{background:linear-gradient(112deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 20%,rgba(255,255,255,0) 44%);}
.s2 .ipad .pad-cam{top:8px;width:6px;height:6px;}
.s2 .hot{font-family:var(--sans);}
.s2 .hot::after{font-family:var(--sans);}
.s2 .hot.lefty::after{left:0;transform:translateX(0) translateY(4px);}
.s2 .hot.lefty:hover::after,.s2 .hot.lefty.peek::after{transform:translateX(0) translateY(0);}
.s2 .hot.lefty::before{left:22px;transform:none;}
.s2 .hot.peek{border-color:rgba(231,75,69,.85);background:rgba(231,75,69,.14);}
.s2 .hot.peek::after{opacity:1;transform:translateX(-50%) translateY(0);}
.s2 .hot.peek::before{opacity:1;}
.s2 .hot.left.peek::after{transform:translateX(0) translateY(0);}
.s2 .hot.has-video::after{content:attr(data-tip);}
.s2 .hot[data-video]{cursor:pointer;}
.s2 .ipad.ghost .stylus{opacity:1;}
.s2 .stylus.glide{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .18s ease;}

/* the clip plays inside the exact canvas rectangle of the screen that is showing */
.s2 .vid-inset{position:absolute;z-index:7;display:none;background:#000;overflow:hidden;opacity:0;transition:opacity .35s ease;}
.s2 .vid-inset.open{display:block;opacity:1;}
.s2 .vid-inset video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;background:#000;display:block;}
.s2 .walk.expanded .vid-inset video{cursor:default;}
.s2 .vid-inset .vo-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,14,.55);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.95rem;line-height:1;z-index:2;opacity:.7;}
.s2 .vid-inset .vo-close:hover{opacity:1;}
.s2 .hotlayer.playing .hot{pointer-events:none;}
/* a clip that covers the whole screen moves the app underneath, so the labels step aside until
   the clip is closed */
.s2 .vfill{position:absolute;pointer-events:none;}
.s2 .hotlayer.vfull.playing .hot{display:none;}

/* side rail */
.s2 .walk-side{background:#fff;padding:24px;box-shadow:0 4px 24px rgba(0,0,0,.08);}
.s2 .walk-side h3{font-size:1.2rem;margin-bottom:8px;}
.s2 .walk-side p{font-size:.92rem;}
.s2 .walk-side .btn{width:100%;}
@media (max-width:980px){.s2 .walk-side{display:grid;grid-template-columns:1fr auto;gap:2px 24px;align-items:center;}
  .s2 .walk-side h3{margin:0;}.s2 .walk-side p{margin:0;}.s2 .walk-side .btn{grid-column:2;grid-row:1/3;width:auto;}.s2 .walk-side .small{grid-column:1;}}
@media (max-width:560px){.s2 .walk-side{display:block;}.s2 .walk-side .btn{width:100%;margin-top:14px;}}

/* the live-demo prompt, on the tablet screen over a blurred app */
.s2 .pad-modal{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:6%;line-height:1.5;
  background:rgba(8,8,12,.34);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .3s ease;}
.s2 .pad-modal[hidden]{display:none;}
.s2 .pad-modal.in{opacity:1;}
.s2 .pad-modal .pm-card{position:relative;background:#fff;border-radius:14px;padding:26px 26px 22px;max-width:390px;width:100%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:translateY(10px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.2,1);text-align:left;}
.s2 .pad-modal.in .pm-card{transform:none;}
.s2 .pad-modal h4{font-size:1.2rem;margin:0 0 8px;color:#000;line-height:1.25;}
.s2 .pad-modal p{font-size:.9rem;color:var(--body);margin:0 0 16px;}
.s2 .pad-modal .btn{width:100%;}
.s2 .pad-modal .pm-later{display:block;width:100%;margin-top:8px;padding:6px;background:none;border:0;cursor:pointer;font-size:.82rem;color:var(--muted);font-family:var(--sans);}
.s2 .pad-modal .pm-later:hover{color:#000;}
.s2 .pad-modal .pm-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;display:grid;place-items:center;}
.s2 .pad-modal .pm-close:hover{background:var(--wash-2);color:#000;}
@media (max-width:640px){
  .s2 .pad-modal{padding:4%;}
  .s2 .pad-modal .pm-card{padding:14px 14px 10px;border-radius:10px;}
  .s2 .pad-modal h4{font-size:.95rem;margin-bottom:10px;padding-right:20px;}
  .s2 .pad-modal p{display:none;}
  .s2 .pad-modal .btn{padding:6px 12px !important;font-size:.8rem;border-radius:9px !important;}
  .s2 .pad-modal .pm-later{margin-top:4px;font-size:.7rem;padding:3px;}
  .s2 .pad-modal .pm-close{top:4px;right:4px;width:22px;height:22px;font-size:.9rem;}
}
@media (prefers-reduced-motion:reduce){.s2 .pad-modal,.s2 .pad-modal .pm-card,.s2 .stylus.glide,.s2 .vid-inset{transition:none;}}

/* ============================================================
   Applications map - one workflow with its branches
   ============================================================ */
.s2 .app-tray{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 18px;scrollbar-width:none;}
.s2 .app-tray::-webkit-scrollbar{display:none;}
.s2 .app-card{flex:none;width:224px;text-align:left;background:#fff;border:1px solid transparent;padding:16px 18px 15px;cursor:pointer;
  box-shadow:0 4px 24px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;}
.s2 .app-card:hover{transform:translateY(-3px);border-color:var(--teal);}
.s2 .app-card[aria-selected="true"]{border-color:var(--teal);background:#FFF6F7;}
.s2 .app-card h4{font-size:1rem;margin:0 0 7px;line-height:1.25;}
.s2 .app-card p{font-size:.82rem;line-height:1.45;}
.s2 .app-scroll{overflow-x:auto;border:1.5px dashed var(--line);background:radial-gradient(circle at 1px 1px,rgba(231,75,69,.16) 1px,transparent 0) 0 0/22px 22px;background-color:#fff;padding:26px;}
.s2 .app-map{display:grid;grid-template-columns:repeat(7,minmax(126px,1fr));grid-template-rows:auto auto auto;gap:22px 24px;min-width:1040px;position:relative;}
.s2 .app-node{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:14px 14px 13px;min-height:112px;
  transition:opacity .25s ease,border-color .2s ease,box-shadow .2s ease;}
.s2 .app-node.spine{grid-row:2;}
.s2 .app-node.above{grid-row:1;align-self:end;}
.s2 .app-node.below{grid-row:3;align-self:start;}
.s2 .app-node.branch{border-style:dashed;background:#FDFDFD;}
.s2 .app-node .sn{display:inline-block;font-weight:700;font-size:.7rem;color:var(--teal);letter-spacing:.06em;}
.s2 .app-node .sn.opt{color:var(--muted);text-transform:uppercase;font-size:.62rem;letter-spacing:.1em;}
.s2 .app-node h5{font-size:.95rem;margin:6px 0 6px;line-height:1.28;color:#000;}
.s2 .app-node p{font-size:.8rem;color:var(--muted);margin:0;line-height:1.45;}
.s2 .app-node .note{display:none;color:#000;}
.s2 .app-node.lit .note{display:block;}
.s2 .app-node.lit .gen{display:none;}
/* a step this application does not use: still readable, but folded down out of the way */
.s2 .app-node.dim{background:#FAFAFB;border-color:var(--line-soft);border-style:dashed;
  min-height:0;padding:11px 13px;box-shadow:none;}
.s2 .app-node.dim.spine{align-self:center;}
.s2 .app-node.dim .gen,.s2 .app-node.dim .note{display:none;}
.s2 .app-node.dim h5{font-size:.84rem;color:var(--muted);margin:5px 0 0;font-weight:600;}
.s2 .app-node.dim .sn{color:var(--line);}
.s2 .app-node.dim .sn.opt{color:var(--line);}
.s2 .app-node.lit{border-color:var(--teal);border-style:solid;box-shadow:0 4px 24px rgba(0,0,0,.08);background:#fff;}
.s2 .app-node.lit h5{font-size:1rem;}
.s2 .app-node.lit .note{color:#000;}
.s2 .app-node.pop{animation:nodePop .42s cubic-bezier(.2,.7,.2,1) both;}
@keyframes nodePop{from{transform:translateY(8px) scale(.97);}to{transform:none;}}
.s2 .app-node.spine:not(.first)::before{content:"";position:absolute;right:100%;top:50%;width:24px;height:2px;margin-top:-1px;background:var(--line);}
.s2 .app-node.spine:not(.first)::after{content:"";position:absolute;right:calc(100% - 1px);top:50%;margin-top:-5px;border:5px solid transparent;border-left:7px solid var(--line);border-right:0;}
.s2 .app-node.spine.lit-link::before{background:var(--teal);}
.s2 .app-node.spine.lit-link::after{border-left-color:var(--teal);}
.s2 .app-node.above::before{content:"";position:absolute;left:50%;top:100%;width:2px;height:22px;background:var(--line);margin-left:-1px;}
.s2 .app-node.below::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:22px;background:var(--line);margin-left:-1px;}
.s2 .app-node.above.chain::before{left:auto;right:100%;top:50%;width:24px;height:2px;margin:-1px 0 0;}
.s2 .app-node.branch.lit::before{background:var(--teal);}
@media (prefers-reduced-motion:reduce){.s2 .app-node.pop{animation:none;}}

/* ---- enlarged tablet ---- */
.s2 .walk-close{display:none;}
.s2 .pad-screen{cursor:zoom-in;}
.s2 .walk.expanded .pad-screen{cursor:default;}
html.s2-lock{overflow:hidden;}
.s2 .walk.expanded .walk-main{
  position:fixed;inset:0;z-index:2000;background:rgba(8,8,10,.94);padding:3vh 4vw 3vh;overflow:auto;
  display:flex;flex-direction:column;align-items:center;
}
.s2 .walk.expanded .pad{width:min(1500px,92vw,calc((100vh - 200px) * 1.86));margin:0 auto;}
.s2 .walk.expanded .walk-caps,.s2 .walk.expanded .walk-vcap,.s2 .walk.expanded .walk-nav{width:min(1500px,92vw);}
.s2 .walk.expanded .walk-cap p,.s2 .walk.expanded .walk-vcap{color:#D4D4D4;}
.s2 .walk.expanded .walk-cap strong{color:#fff;}
.s2 .walk.expanded .walk-nav button,.s2 .walk.expanded .walk-nav .tour,.s2 .walk.expanded .walk-nav .expand{background:transparent;border-color:rgba(255,255,255,.35);color:#fff;}
.s2 .walk.expanded .walk-nav .count{color:#D4D4D4;}
.s2 .walk.expanded .walk-close{
  display:grid;place-items:center;position:fixed;top:18px;right:22px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:2001;
}
.s2 .walk.expanded .walk-close:hover{background:#fff;color:#000;}

/* ---- the app's own menus inside the tablets are clickable ---- */
.s2 .hot.nav{cursor:pointer;border-radius:6px;border:1px solid transparent;z-index:8;}
.s2 .hot.nav:hover{border-color:rgba(231,75,69,.7);background:rgba(231,75,69,.12);}
.s2 .hotlayer.playing .hot.nav{pointer-events:auto;}
.s2 .hero-ipad .hs{pointer-events:none;}
.s2 .hero-ipad .hs.on{pointer-events:auto;}
.s2 .hero-ipad .hs img{pointer-events:none;}
.s2 .hero-ipad .hot::after{font-size:.7rem;}

/* ---- disease areas ---- */
.s2 .s2-disease-card{box-shadow:0 4px 24px rgba(0,0,0,.08);}
.s2 .s2-disease-card a img{width:14px;height:14px;flex:none;}
.s2 .s2-disease-card a{text-decoration:none;line-height:1.4;}
.s2 .s2-disease-card a:hover{text-decoration:underline;}

/* ---- disease areas: raw stain, hover or tap for the segmentation ---- */
.s2 .s2-disease-card{overflow:hidden;}
.s2 .s2-disease-img{position:relative;aspect-ratio:16/10;background:#101014;cursor:pointer;outline:none;}
.s2 .s2-disease-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.s2 .s2-disease-img img.seg{opacity:0;transition:opacity .45s ease;}
.s2 .s2-disease-img:hover img.seg,.s2 .s2-disease-img.on img.seg,.s2 .s2-disease-img:focus-visible img.seg{opacity:1;}
.s2 .s2-disease-img .pill{position:absolute;right:10px;bottom:10px;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 .66rem/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(4px);}
.s2 .s2-disease-img .pill::after{content:'Raw stain';}
.s2 .s2-disease-img:hover .pill::after,.s2 .s2-disease-img.on .pill::after,.s2 .s2-disease-img:focus-visible .pill::after{content:'Segmentation';}
.s2 .s2-disease-img.placeholder{background:#f2f2f4;display:flex;align-items:center;justify-content:center;cursor:default;overflow:hidden;}
.s2 .s2-disease-img.placeholder img{filter:blur(5px) saturate(1.05);transform:scale(1.08);}  /* zoomed onto the viewer canvas, or the blur is only white chrome */
.s2 .s2-disease-img.placeholder::after{content:"";position:absolute;inset:0;background:rgba(10,10,14,.28);}
.s2 .s2-disease-img.placeholder span{position:relative;z-index:2;font:600 .72rem Inter,sans-serif;color:#fff;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(10,10,14,.6);padding:6px 11px;border-radius:999px;}

/* ---- pricing ---- */
.s2 .s2-seg{display:inline-flex;background:#F2F2F2;border-radius:999px;padding:4px;gap:2px;}
.s2 .s2-seg button{border:0;background:transparent;border-radius:999px;padding:9px 18px;font:600 .9rem/1 Inter,sans-serif;color:#555;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap;}
.s2 .s2-seg button:hover{color:#000;}
.s2 .s2-seg button[aria-selected="true"]{background:#000;color:#fff;}
.s2 .s2-seg button span{font-weight:500;opacity:.75;margin-left:2px;}
.s2 .s2-plan{position:relative;box-shadow:0 4px 24px rgba(0,0,0,.08);border:2px solid transparent;}
.s2 .s2-plan.popular{border-color:#E74B45;}
.s2 .s2-plan .s2-badge{position:absolute;top:-13px;left:22px;background:#E74B45;color:#fff;font:700 .66rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;}
.s2 .s2-price{min-height:2.6rem;}
.s2 .s2-price .amount{font:600 2.1rem/1.1 Inter,sans-serif;color:#000;letter-spacing:-.02em;}
.s2 .s2-price .amount-text{font-size:1.5rem;line-height:1.7;}
.s2 .s2-price .per,.s2 .s2-price .from{font:400 .95rem/1 Inter,sans-serif;color:#6b6b6b;}
.s2 .s2-plan .btn{width:100%;}
.s2 .s2-plan .s2-ticks{display:block;}
.s2 .s2-plan .s2-ticks li{font-size:.92rem;margin-bottom:8px;}
.s2 .s2-faq-item{border-bottom:1px solid #E6E6E6;padding:18px 0;}
.s2 .s2-faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.05rem;}
.s2 .s2-faq-item summary::-webkit-details-marker{display:none;}
.s2 .s2-faq-item summary::after{content:'+';font-weight:400;font-size:1.4rem;line-height:1;color:#8A8A8A;flex:none;}
.s2 .s2-faq-item[open] summary::after{content:'\2013';}
.s2 .s2-faq-item p{margin-top:12px;max-width:62ch;}

/* ---- pricing: credit allotment and dataset cost table ---- */
.s2 .s2-allot{min-height:4.6rem;font-size:.95rem;color:#000;line-height:1.35;}
.s2 .s2-allot .per{color:#6b6b6b;}
.s2 .s2-allot .hint{display:block;color:#6b6b6b;font-size:.85rem;margin-top:2px;}
.s2 .s2-costs{width:100%;border-collapse:collapse;font-family:Inter,sans-serif;background:#fff;}
.s2 .s2-costs th{font-weight:600;font-size:.82rem;color:#6b6b6b;border-bottom:1px solid #E0E0E0;padding:12px 16px;white-space:nowrap;text-align:left;}
.s2 .s2-costs td{padding:14px 16px;border-bottom:1px solid #EFEFEF;color:#3a3a3a;white-space:nowrap;}
.s2 .s2-costs td.name{font-weight:600;color:#000;}
.s2 .s2-costs .num{text-align:right;font-variant-numeric:tabular-nums;}
.s2 .s2-costs tbody tr:last-child td{border-bottom:0;}
.s2 .s2-plan .s2-tag{min-height:3rem;}
@media (max-width:767px){.s2 .s2-plan .s2-tag,.s2 .s2-allot{min-height:0;}}

/* ---- pricing round 2 ---- */
.s2 .s2-seg button .save{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:999px;background:#E74B45;color:#fff;font-size:.72rem;font-weight:700;opacity:1;line-height:1;}
.s2 .s2-costs th span{font-weight:400;}
.s2 .s2-costs td.name{white-space:normal;min-width:190px;}
.s2 .s2-costs td.name span{display:block;font-weight:400;color:#6b6b6b;font-size:.82rem;margin-top:2px;white-space:nowrap;}
.s2 .s2-costs th.num{vertical-align:bottom;}

/* ---- pricing round 3: five plans in one row, no billing switch ---- */
.s2 .s2-plan-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch;}
.s2 .s2-plan-grid .s2-plan{padding:20px !important;}
.s2 .s2-plan-grid .s2-ticks{grid-template-columns:minmax(0,1fr);gap:8px;}
.s2 .s2-plan-grid .s2-ticks li{font-size:.85rem;line-height:1.35;padding-left:21px;}
.s2 .s2-plan-grid .s2-price .amount{font-size:1.9rem;}
.s2 .s2-plan-grid .s2-price .amount-text{font-size:1.35rem;}
.s2 .s2-plan-grid .s2-allot{font-size:.88rem;min-height:4.2rem;}
.s2 .s2-plan-grid .s2-tag{font-size:.9rem;min-height:3.4rem;}
.s2 .s2-plan-grid .btn{padding-left:12px !important;padding-right:12px !important;}
.s2 .s2-plan-grid .btn .text{font-size:.9rem;}
@media (max-width:1199px){.s2 .s2-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:767px){.s2 .s2-plan-grid{grid-template-columns:minmax(0,1fr);}
  .s2 .s2-plan-grid .s2-allot,.s2 .s2-plan-grid .s2-tag{min-height:0;}}

/* ---- pricing round 4: four tiles, company band ---- */
.s2 .s2-plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.s2 .s2-plan-grid .s2-plan{padding:24px !important;}
.s2 .s2-plan-grid .s2-ticks li{font-size:.9rem;}
.s2 .s2-plan-grid .s2-price .amount{font-size:2.1rem;}
@media (max-width:1199px){.s2 .s2-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767px){.s2 .s2-plan-grid{grid-template-columns:minmax(0,1fr);}}
.s2 .s2-enterprise .s2-ticks{margin-top:0;}
.s2 .s2-enterprise .s2-ticks li{color:#fff;}
.s2 .s2-enterprise .s2-ticks li::before{border-color:#fff;}
.s2 .s2-enterprise .btn{display:inline-flex !important;width:auto;}
.s2 .s2-enterprise .s2-ticks li{margin-bottom:2px;}
.s2 .s2-enterprise > .row{align-items:center;}

/* ---- business add-on inside each plan tile ---- */
.s2 .s2-price .sum{display:block;font:400 .78rem/1.3 Inter,sans-serif;color:#6b6b6b;margin-top:4px;}
.s2 .s2-addon{margin-top:auto;padding-top:16px;border-top:1px solid #E8E8EA;opacity:.5;filter:grayscale(1);transition:opacity .2s,filter .2s;}
.s2 .s2-addon.on{opacity:1;filter:none;}
.s2 .s2-addon-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;}
.s2 .s2-addon-name{font:600 .9rem/1.2 Inter,sans-serif;color:#000;}
.s2 .s2-addon-price{font:500 .82rem/1.2 Inter,sans-serif;color:#6b6b6b;width:100%;padding-left:42px;}
.s2 .s2-addon.on .s2-addon-price{color:#E74B45;font-weight:600;}
.s2 .s2-switch{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:#C9C9CE;transition:background .2s;}
.s2 .s2-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;}
.s2 .s2-addon.on .s2-switch{background:#E74B45;}
.s2 .s2-addon.on .s2-switch::after{transform:translateX(14px);}
.s2 .s2-addon-head:focus-visible{outline:2px solid #E74B45;outline-offset:3px;border-radius:6px;}
.s2 .s2-addon .s2-ticks{margin-top:12px;}
.s2 .s2-addon .s2-ticks li{font-size:.84rem;}
.s2 .s2-enterprise .s2-ticks{grid-template-columns:repeat(2,minmax(0,1fr));}
.s2 .s2-addon-extra{margin-top:12px;padding-top:10px;border-top:1px dashed #E0E0E3;font-size:.82rem;color:#6b6b6b;line-height:1.35;}
.s2 .s2-addon-extra span{display:block;font-weight:600;color:#000;}
.s2 .s2-plan-grid .s2-addon .s2-ticks li{font-size:.82rem;}
.s2 .s2-addon + .s2-addon{margin-top:18px !important;}

/* ---- SPATIAL Biology Service ---- */
.s2 .s2-step{border-top:2px solid #111;padding-top:16px;}
.s2 .s2-step .n{display:block;font:700 .78rem/1 Inter,sans-serif;color:#E74B45;letter-spacing:.08em;margin-bottom:10px;}
.s2 .s2-deliver .s2-ticks{grid-template-columns:repeat(2,minmax(0,1fr));}
.s2 .s2-deliver .s2-ticks li{font-size:1rem;}
@media (max-width:767px){.s2 .s2-deliver .s2-ticks{grid-template-columns:minmax(0,1fr);}}
.s2 .s2-features .s2-disease-img{aspect-ratio:16/10;overflow:hidden;}
.s2 .s2-allot .choose{color:#000;font-weight:600;display:block;}

/* ---- neurons in the pricing hero ---- */
.s2 .s2-hero-art{position:absolute;top:0;right:0;height:100%;width:min(72%,1120px);object-fit:cover;object-position:center right;opacity:.92;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 26%,rgba(0,0,0,.85) 55%,#000 72%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 26%,rgba(0,0,0,.85) 55%,#000 72%);}
@media (max-width:1199px){.s2 .s2-hero-art{width:66%;opacity:.55;}}
@media (max-width:991px){.s2 .s2-hero-art{width:80%;opacity:.45;}}
@media (max-width:767px){.s2 .s2-hero-art{display:none;}}

/* ---- currency switch ---- */
.s2 [data-cur] .cur{display:none;}
.s2 [data-cur="usd"] .cur-usd,.s2 [data-cur="eur"] .cur-eur{display:inline;}
.s2 .s2-disease-list{list-style:none;padding:0;margin:0;}
.s2 .s2-disease-list li{position:relative;padding-left:16px;margin-bottom:4px;line-height:1.45;}
.s2 .s2-disease-list li:before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#E8533F;}
.s2 .hot.wide::after{white-space:normal;width:max-content;max-width:min(300px,34vw);text-align:left;}
.s2 .hot.wide.lefty::after{max-width:min(260px,30vw);}

/* workflow map: the live path is drawn, the rest is only hinted at */
.s2 .app-node.spine.dim::before{background:var(--line-soft);}
.s2 .app-node.spine.dim::after{border-left-color:var(--line-soft);}
.s2 .app-node.branch.dim::before{background:var(--line-soft);}
.s2 .app-node.spine.lit-link::before{height:3px;margin-top:-1.5px;}
.s2 .app-node.spine.lit-link::after{margin-top:-6px;border-width:6px;border-left-width:8px;border-right:0;}
.s2 .app-node.branch.lit::before{width:3px;margin-left:-1.5px;}
.s2 .app-node.above.chain.lit::before{height:3px;width:24px;margin:-1.5px 0 0;}

/* ------------------------------------------------- workflow stages (features) */
/* four or five stages stand in front, the rest fold away towards the back */
/* the stages wrap instead of scrolling sideways: a plain mouse cannot scroll
   a horizontal container, and nine columns never fit a laptop anyway */
.s2 .stage-map{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;align-items:stretch;}
@media (min-width:768px){.s2 .stage-map{grid-template-columns:repeat(3,1fr);}}   /* 3 + 3 + 3 */
@media (min-width:1280px){.s2 .stage-map{grid-template-columns:repeat(5,1fr);}}  /* 5 + 4 */
@media (max-width:600px){.s2 .stage-map{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.s2 .stage-map{grid-template-columns:1fr;}}
.s2 .stage-scroll{border:1.5px dashed var(--line);background:#fff;padding:22px;border-radius:18px;}
.s2 .stage{transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;}
/* the ninth column is the payoff, so say when it is off the edge */

.s2 .stage{position:relative;background-color:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:16px 15px 15px;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(24,24,32,.04),0 8px 20px -10px rgba(24,24,32,.16);
  transition:border-color .2s ease,box-shadow .25s ease,background .2s ease,transform .25s ease;}
.s2 .stage{background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;
  background-position:top center;background-size:calc(100% - 2px) 3px;transition:background-image .2s ease;}
.s2 .stage.used{background-image:linear-gradient(var(--teal),var(--teal));}
.s2 .stage.used{box-shadow:0 2px 4px rgba(24,24,32,.05),0 18px 34px -16px rgba(24,24,32,.28);transform:translateY(-1px);}
.s2 .stage.skipped{box-shadow:0 1px 2px rgba(24,24,32,.03);}
.s2 .stage.skipped{background-color:#FAFAFB;background-image:linear-gradient(var(--line-soft),var(--line-soft));}
.s2 .stage .sn{font-weight:700;font-size:.7rem;color:var(--teal);letter-spacing:.06em;}
.s2 .stage.skipped .sn{color:var(--line);}
.s2 .stage h5{font-size:.92rem;margin:5px 0 3px;line-height:1.25;color:#000;}
.s2 .stage.skipped h5{color:var(--muted);}
.s2 .stage .sub{font-size:.72rem;color:var(--muted);margin:0 0 10px;line-height:1.35;}
.s2 .stage .chips{display:flex;flex-direction:column;gap:7px;}
.s2 .stage-chip{border:1px solid var(--line-soft);border-radius:11px;padding:8px 10px;background:#FCFCFD;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;}
.s2 .stage-chip .cn{display:block;font-size:.78rem;line-height:1.3;color:var(--muted);font-weight:500;}
.s2 .stage-chip .cs{list-style:none;margin:4px 0 0;padding:0;}
.s2 .stage-chip .cs li{font-size:.68rem;line-height:1.4;color:var(--line);}
.s2 .stage-chip.on{background:#fff;border-color:var(--teal);box-shadow:0 1px 2px rgba(231,75,69,.06),0 6px 14px -6px rgba(231,75,69,.32);}
.s2 .stage-chip.on .cn{color:#000;font-weight:600;}
.s2 .stage-chip.on .cs li{color:var(--muted);}
.s2 .stage-chip.pop{animation:nodePop .42s cubic-bezier(.2,.7,.2,1) both;}
.s2 .stage-note{display:none;font-size:.72rem;line-height:1.4;color:#000;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-soft);}

@media (prefers-reduced-motion:reduce){.s2 .stage-chip.pop{animation:none;}}

/* the controls above the map */
.s2 .wf-controls{display:flex;flex-wrap:wrap;gap:26px 40px;margin:0 0 26px;}
.s2 .wf-group{display:flex;flex-direction:column;gap:9px;}
.s2 .wf-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.s2 .wf-row{display:flex;flex-wrap:wrap;gap:8px;}
.s2 .wf-opt{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-soft);
  border-radius:999px;padding:8px 15px 8px 11px;cursor:pointer;font-size:.86rem;color:var(--muted);
  transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease;}
.s2 .wf-opt:hover{border-color:var(--teal);}
.s2 .wf-opt .wf-box{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative;
  transition:border-color .18s ease,background .18s ease;}
.s2 .wf-opt[data-kind="option"] .wf-box{border-radius:5px;}
.s2 .wf-opt.on{border-color:var(--teal);color:#000;background:#FFF6F7;box-shadow:0 2px 10px rgba(231,75,69,.10);}
.s2 .wf-opt.on .wf-box{background:var(--teal);border-color:var(--teal);}
.s2 .wf-opt.on .wf-box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(43deg);}
.s2 .wf-opt > span.ff-inter{color:inherit;font-size:inherit;line-height:1.2;}

.s2 .stage{padding:16px 15px 15px;}
.s2 .stage h5{font-size:1rem;}
.s2 .stage .sub{font-size:.76rem;}
.s2 .stage-chip .cn{font-size:.82rem;}


/* a clip on the features page: the app UI in the tablet, the video in the canvas */
.s2 .s2-framed{width:100%;}
.s2 .s2-framed .pad-screen > img{width:100%;display:block;}
.s2 .s2-framed .framed-clip{position:absolute;z-index:2;object-fit:cover;background:#000;display:block;}
.s2 .s2-framed .framed-clip.full{inset:0;width:100%;height:100%;}
.s2 .s2-framed.full .pad-screen{aspect-ratio:16/10;}
.s2 .s2-framed .pad{border-radius:26px;padding:13px 12px;}
.s2 .s2-framed .pad-screen{border-radius:14px;}
.s2 .s2-framed .pad::after{inset:5px;border-radius:22px;}
@media (max-width:575px){.s2 .s2-framed .pad{border-radius:18px;padding:9px 8px;}}

/* the flow between stages: an arrow in the gap, except where a row begins */
.s2 .stage::after{content:"";position:absolute;left:-17px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--line);border-top:2px solid var(--line);border-radius:1px;
  transform:translateY(-50%) rotate(45deg);transition:border-color .2s ease;}
.s2 .stage.row-start::after{display:none;}
.s2 .stage.used::after{border-color:var(--teal);}
.s2 .stage-scroll{border-radius:22px;}

/* a tablet you can open large */
.s2 .s2-framed{cursor:zoom-in;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.s2 .s2-framed:hover{transform:translateY(-2px);}
.s2 .s2-framed:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:26px;}
.s2-zoom{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  padding:min(5vh,48px) min(4vw,48px);background:rgba(12,12,16,.86);}
.s2-zoom.open{display:flex;}
/* the tablet fits the shorter side, so it never runs off the screen */
.s2-zoom-stage{width:100%;max-width:min(1500px, calc((92vh - 90px) * 1.78));}
.s2-zoom .s2-framed{cursor:default;width:100%;}
.s2-zoom .s2-framed:hover{transform:none;}
.s2-zoom-close{position:absolute;top:18px;right:20px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:1.5rem;
  line-height:1;cursor:pointer;display:grid;place-items:center;}
.s2-zoom-close:hover{background:rgba(255,255,255,.16);}

/* a still the camera moves over: lower left, up, across, down, then a pull back */
.s2 .s2-framed .pan-window{position:absolute;z-index:2;overflow:hidden;background:#000;display:block;}
.s2 .s2-framed .pan-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center center;will-change:transform;
  animation:s2pan 30s cubic-bezier(.45,0,.55,1) infinite alternate;}
@keyframes s2pan{
  0%   {transform:scale(2.3) translate(28%,-26%);}    /* lower left, close in */
  10%  {transform:scale(2.3) translate(28%,-26%);}
  32%  {transform:scale(2.3) translate(28%,22%);}     /* up the left */
  54%  {transform:scale(2.3) translate(-28%,22%);}    /* across the top */
  76%  {transform:scale(2.3) translate(-28%,-26%);}   /* down the right */
  90%  {transform:scale(1.35) translate(0,0);}
  100% {transform:scale(1) translate(0,0);}           /* the whole section */
}
@media (prefers-reduced-motion:reduce){
  .s2 .s2-framed .pan-img{animation:none;transform:none;}
}

/* the sticky subnav must not paint over the site's own products menu: the dropdown
   carries z-index 3 and no ancestor makes a stacking context, so it needs to clear 40 */
.drop-down{z-index:60 !important;}   /* the z-3 utility it carries is !important */

/* figures we are not announcing yet: readable as shapes, not as numbers */
.s2 .held{filter:blur(5px);user-select:none;pointer-events:none;display:inline-block;
  opacity:.75;transition:filter .25s ease;}
.s2 .s2-allot .held{display:block;}
@media (prefers-reduced-motion:reduce){.s2 .held{transition:none;}}

/* four example datasets, in place of the old job cost table */
.s2 .s2-ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:991px){.s2 .s2-ds-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575px){.s2 .s2-ds-grid{grid-template-columns:1fr;}}
.s2 .s2-ds{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:20px 18px;
  box-shadow:0 1px 2px rgba(24,24,32,.04),0 8px 20px -12px rgba(24,24,32,.18);}
.s2 .s2-ds .k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
  font-weight:700;margin:0 0 10px;}
.s2 .s2-ds .d{font-size:1.02rem;color:#000;font-weight:600;margin:0 0 4px;line-height:1.3;}
.s2 .s2-ds .mp{font-size:.82rem;color:var(--muted);margin:0 0 16px;}
.s2 .s2-ds .c{font-size:.95rem;color:#000;margin:0;padding-top:14px;border-top:1px solid var(--line-soft);}
.s2 .s2-ds .soon{color:var(--muted);font-style:italic;}

/* four example datasets, in place of the old job cost table */
.s2 .s2-ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:991px){.s2 .s2-ds-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575px){.s2 .s2-ds-grid{grid-template-columns:1fr;}}
.s2 .s2-ds{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:20px 18px;
  box-shadow:0 1px 2px rgba(24,24,32,.04),0 8px 20px -12px rgba(24,24,32,.18);}
.s2 .s2-ds .k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
  font-weight:700;margin:0 0 10px;}
.s2 .s2-ds .d{font-size:1.02rem;color:#000;font-weight:600;margin:0 0 4px;line-height:1.3;}
.s2 .s2-ds .mp{font-size:.82rem;color:var(--muted);margin:0 0 16px;}
.s2 .s2-ds .c{font-size:.95rem;color:#000;margin:0;padding-top:14px;border-top:1px solid var(--line-soft);}
.s2 .s2-ds .soon{color:var(--muted);font-style:italic;}
/* one line per job inside an example card */
.s2 .s2-ds .c{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid var(--line-soft);}
.s2 .s2-ds .c li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.84rem;padding:3px 0;}
.s2 .s2-ds .c .j{color:var(--muted);}
.s2 .s2-ds .c .v{color:#000;font-weight:600;white-space:nowrap;}

/* the service page: where it fits, and the published record */
.s2 .s2-fit{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:26px 24px;
  box-shadow:0 1px 2px rgba(24,24,32,.04),0 10px 26px -14px rgba(24,24,32,.20);}
.s2 .s2-fit .lbl{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 8px;}
.s2 .s2-fit .s2-ticks li{font-size:.88rem;}
.s2 .s2-ev{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:22px 20px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.s2 .s2-ev:hover{border-color:var(--teal);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(24,24,32,.05),0 16px 30px -16px rgba(24,24,32,.28);}
/* the lists inside a programme card are short: one column each */
.s2 .s2-fit .s2-ticks{display:block;column-count:1;}
.s2 .s2-fit .s2-ticks li{width:100%;}

.s2 .s2-soon{color:var(--muted);font-style:italic;padding:10px 0;}

/* --- the trademark mark ------------------------------------------------------------------
   Set in one place so SPATIAL(TM) looks the same in a headline, a paragraph and a menu.
   Display type takes a proportionally smaller mark, the way a trademark is set on a wordmark.
   Unscoped on purpose: the header and footer are outside .s2 and say it too. */
sup{font-size:.46em;top:-.95em;}
h1 sup,.display-1 sup,.display-2 sup,.display-3 sup,.display-4 sup,.display-5 sup,.display-6 sup{font-size:.3em;top:-1.6em;}