/* Changemaker: editorial desktop devices + cinematic Campus staircase.
   Additive, progressive enhancement; real screenshot images are unchanged. */
.cm-device-scene {
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  padding:22px 14px 36px;
  perspective:1600px;
}
.cm-device-scene::before {
  content:"";
  position:absolute;
  inset:18% -7% 10%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(39,203,127,.25),rgba(20,115,77,.075) 50%,transparent 75%);
  filter:blur(22px);
}
.cm-device-scene::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:17%;
  right:17%;
  bottom:13px;
  height:24px;
  border-radius:50%;
  background:rgba(13,43,32,.35);
  filter:blur(14px);
}
.cm-device-assembly {
  position:relative;
  width:100%;
  max-width:1010px;
  margin-inline:auto;
  transform-style:preserve-3d;
  transform:perspective(1550px)
    rotateX(calc(1.1deg + var(--cm-tilt-x,0deg)))
    rotateY(calc(-2.4deg + var(--cm-tilt-y,0deg)))
    translate3d(0,var(--cm-lift,0px),0);
  transition:transform .45s cubic-bezier(.2,.75,.25,1);
}
.cm-device-monitor {
  position:relative;
  overflow:hidden;
  border:9px solid #17231e;
  border-bottom-width:12px;
  border-radius:19px 19px 13px 13px;
  background:#0a1713;
  box-shadow:
    0 0 0 1px rgba(235,255,238,.21),
    0 35px 52px rgba(3,25,16,.28),
    inset 0 1px 2px rgba(255,255,255,.18);
}
.cm-device-monitor::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  background:linear-gradient(120deg,rgba(255,255,255,.085),transparent 29%,transparent 73%,rgba(96,219,161,.04));
}
.cm-device-browserbar {
  height:30px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,#25372f,#14231d);
  border-bottom:1px solid rgba(237,255,241,.095);
  color:rgba(230,255,237,.75);
  font:500 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.045em;
}
.cm-device-dots {
  display:flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
}
.cm-device-dots i {display:block;width:6px;height:6px;border-radius:50%;background:#779f89}
.cm-device-dots i:first-child {background:#7db4a0}
.cm-device-dots i:last-child {background:#9ccdb0}
.cm-device-title {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.82}
.cm-device-signal {width:12px;height:7px;flex-shrink:0;border-radius:4px;border:1px solid #8bbba1;opacity:.65}
.cm-device-assembly .cm-screen-frame {
  padding:0!important;
  margin:0!important;
  max-width:none!important;
  width:100%;
  border:0!important;
  border-radius:0!important;
  background:#edf5f0;
  box-shadow:none!important;
  overflow:hidden;
}
.cm-home .cm-showcase-shot .cm-device-assembly .cm-screen-frame,
.cm-home .cm-showcase-shot:hover .cm-device-assembly .cm-screen-frame,
.cm-campus-proof .cm-device-assembly .cm-screen-frame,
.cm-campus-proof .cm-device-assembly .cm-screen-frame:hover {
  transform:none!important;
  transition:none!important;
}
.cm-device-assembly .cm-screen-frame .cm-screen-open {
  display:block;
  margin:0;
  border:0;
  padding:0;
  width:100%;
  line-height:0;
  border-radius:0;
}
.cm-device-assembly .cm-screen-frame img {
  display:block;
  width:100%;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  border-radius:0!important;
  object-fit:contain!important;
  background:#f6fbf8;
}
.cm-device-assembly .cm-screen-frame figcaption {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:29px;
  margin:0!important;
  padding:8px 13px!important;
  background:#e1ede5;
  border-top:1px solid rgba(18,68,40,.07);
  color:#355445!important;
  font:600 10px/1.4 "Plus Jakarta Sans",sans-serif!important;
}
.cm-device-chin {
  position:relative;
  height:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#90c8a7;
  background:linear-gradient(180deg,#1b2921,#111f19);
}
.cm-device-chin span {
  width:5px;
  height:5px;
  border:1px solid #a9f1c4;
  border-radius:50%;
  box-shadow:0 0 8px rgba(77,252,156,.34);
}
.cm-device-neck {
  width:11%;
  min-width:33px;
  height:clamp(21px,2.8vw,40px);
  margin:-1px auto 0;
  background:linear-gradient(90deg,#101f1a 0%,#39453e 45%,#162a20 100%);
  clip-path:polygon(23% 0,77% 0,84% 100%,16% 100%);
  box-shadow:0 11px 22px rgba(0,0,0,.19);
}
.cm-device-base {
  width:36%;
  height:clamp(8px,1.2vw,15px);
  margin:-1px auto 0;
  border:1px solid #4c5c53;
  border-top-color:#819b87;
  border-radius:50% 50% 24% 24% / 83% 83% 28% 28%;
  background:linear-gradient(180deg,#4a5f53,#1d3025 50%,#112016);
  box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.cm-device-assembly.is-portrait {max-width:min(460px,75%)}
.cm-device-assembly.is-portrait .cm-device-monitor {border-radius:16px 16px 11px 11px}
.cm-device-assembly.is-portrait .cm-device-browserbar {font-size:8px}
.cm-device-assembly.is-portrait .cm-screen-frame img {max-height:min(66vh,710px)!important;object-fit:contain!important}
.cm-home .cm-showcase-shot::after {
  inset:15% 8% 17%;
  border:0;
  border-radius:50%;
  transform:none;
  background:radial-gradient(ellipse,rgba(60,226,147,.14),transparent 70%);
  filter:blur(22px);
}
.cm-campus-proof .cm-device-scene {max-width:1120px;margin-inline:auto;padding:22px 40px 35px}
.cm-campus-proof .cm-device-scene::before {background:radial-gradient(ellipse,rgba(81,219,141,.19),transparent 71%)}
.cm-campus-proof .cm-device-assembly {max-width:1000px}
.cm-campus-proof .cm-device-monitor {border-color:#19251f}
.cm-campus-proof .cm-screen-frame figcaption {text-align:left}
/* Campus: actual staircase positions are progressively staggered in x, y, z. */
.cm-home .cm-campus-feature {overflow:hidden}
.cm-home .cm-campus-feature .cm-campus-stack {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:17px;
  padding:29px 3px 32px 0;
  perspective:1400px;
  transform-style:preserve-3d;
}
.cm-home .cm-campus-feature .cm-campus-stack::before {
  inset:-9% 0 -11%;
  background:radial-gradient(ellipse at 60% 49%,rgba(72,238,157,.22),transparent 61%);
}
.cm-home .cm-campus-feature .cm-campus-stack article {
  box-sizing:border-box;
  width:calc(100% - 83px);
  min-width:0;
  min-height:168px;
  margin:0!important;
  padding:25px 30px 23px;
  border:1px solid rgba(155,255,196,.22);
  border-radius:18px;
  background:
    linear-gradient(119deg,rgba(113,255,188,.092),transparent 38%),
    linear-gradient(152deg,rgba(24,82,58,.88),rgba(9,32,27,.96) 80%);
  box-shadow:18px 20px 38px rgba(0,0,0,.21),inset 0 1px rgba(255,255,255,.09),inset 1px 0 rgba(173,255,216,.065);
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transform:
    translate3d(var(--cm-step-x,0px),
      calc(var(--cm-step-y,0px) + var(--cm-step-enter,0px) + var(--cm-step-bob,0px)),
      var(--cm-step-z,0px))
    rotateY(calc(var(--cm-step-angle,-3deg) + var(--cm-tilt-y,0deg)))
    rotateX(var(--cm-tilt-x,0deg));
  transition:transform .55s cubic-bezier(.2,.75,.25,1),opacity .8s ease,box-shadow .45s ease,border-color .45s ease;
}
.cm-home .cm-campus-feature .cm-campus-stack article:nth-child(1) {
  --cm-step-x:0px;--cm-step-y:-13px;--cm-step-z:0px;--cm-step-angle:-4deg;
  transition-delay:0ms;
}
.cm-home .cm-campus-feature .cm-campus-stack article:nth-child(2) {
  --cm-step-x:40px;--cm-step-y:0px;--cm-step-z:22px;--cm-step-angle:-2deg;
  transition-delay:110ms;
}
.cm-home .cm-campus-feature .cm-campus-stack article:nth-child(3) {
  --cm-step-x:80px;--cm-step-y:13px;--cm-step-z:44px;--cm-step-angle:1deg;
  transition-delay:220ms;
}
.cm-home .cm-campus-feature .cm-campus-stack article::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(100deg,rgba(163,255,205,.09),transparent 42%,rgba(39,244,148,.03));
  box-shadow:inset -4px -4px 17px rgba(0,0,0,.18);
}
.cm-home .cm-campus-feature .cm-campus-stack article::after {
  content:"";
  position:absolute;
  inset:9px auto 9px -3px;
  width:3px;
  border-radius:10px;
  background:linear-gradient(180deg,transparent,#96f6bc,transparent);
  opacity:.35;
  pointer-events:none;
}
.cm-home .cm-campus-feature .cm-campus-stack article:hover {
  border-color:rgba(170,255,205,.55);
  box-shadow:21px 29px 50px rgba(0,0,0,.26),0 0 22px rgba(38,202,131,.1),inset 0 1px rgba(255,255,255,.13);
}
.cm-home .cm-campus-feature .cm-campus-stack h3 {
  position:relative;
  z-index:1;
  max-width:26ch;
  font-size:clamp(22px,2vw,28px);
  line-height:1.17;
  text-wrap:balance;
}
.cm-home .cm-campus-feature .cm-campus-stack p {position:relative;z-index:1;line-height:1.65}
.cm-home .cm-campus-feature .cm-campus-stack span {position:relative;z-index:1}
@media(min-width:701px) and (prefers-reduced-motion:no-preference) {
  .cm-home .cm-campus-feature .cm-campus-stack.cm-stairs-enhanced:not(.is-active) article {
    opacity:0;
    --cm-step-enter:45px;
  }
}
@media(max-width:1100px) {
  .cm-device-scene {padding-inline:3px}
  .cm-home .cm-campus-feature .cm-campus-stack article {padding:22px;min-height:155px}
  .cm-home .cm-campus-feature .cm-campus-stack article:nth-child(2) {--cm-step-x:24px}
  .cm-home .cm-campus-feature .cm-campus-stack article:nth-child(3) {--cm-step-x:48px}
  .cm-home .cm-campus-feature .cm-campus-stack article {width:calc(100% - 53px)}
}
@media(max-width:700px) {
  .cm-device-scene {padding:13px 0 24px}
  .cm-device-monitor {border-width:5px;border-bottom-width:8px;border-radius:12px}
  .cm-device-browserbar {height:23px;padding-inline:8px;font-size:8px}
  .cm-device-dots {gap:3px}.cm-device-dots i {width:4px;height:4px}
  .cm-device-chin {height:17px}
  .cm-device-assembly,.cm-home .cm-device-assembly:hover {transform:none!important}
  .cm-device-neck {height:20px}
  .cm-device-base {height:8px}
  .cm-device-assembly.is-portrait {max-width:77%}
  .cm-device-assembly .cm-screen-frame figcaption {font-size:8px!important;min-height:20px;padding:5px 7px!important}
  .cm-campus-proof .cm-device-scene {padding:14px 0 24px}
  .cm-home .cm-campus-feature .cm-campus-stack {padding:15px 0 22px;gap:13px}
  .cm-home .cm-campus-feature .cm-campus-stack article {
    width:calc(100% - 17px);
    min-height:0;
    padding:22px 20px;
    transform:translateX(var(--cm-step-x,0px))!important;
    opacity:1!important;
    transition:box-shadow .25s,border-color .25s;
  }
  .cm-home .cm-campus-feature .cm-campus-stack article:nth-child(1) {--cm-step-x:0px}
  .cm-home .cm-campus-feature .cm-campus-stack article:nth-child(2) {--cm-step-x:8px}
  .cm-home .cm-campus-feature .cm-campus-stack article:nth-child(3) {--cm-step-x:16px}
}
@media(prefers-reduced-motion:reduce) {
  .cm-device-assembly {transform:none!important;transition:none!important}
  .cm-home .cm-campus-feature .cm-campus-stack article {
    --cm-step-bob:0px!important;
    --cm-step-enter:0px!important;
    opacity:1!important;
    transition:none!important;
  }
}