/* PLM Studio launch: a standalone hero followed by one lightweight CSS laptop story. */
@keyframes studio-product-cue {
  0% { opacity: 0; transform: translateY(-10px); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translateY(22px); }
}

.studio-hero {
  min-height: calc(100svh - var(--public-header-height, 64px) - var(--studio-local-height));
  padding: clamp(64px, 9vh, 104px) 24px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #020608;
  text-align: center;
  scroll-margin-top: calc(var(--public-header-height, 64px) + var(--studio-local-height));
}

.studio-hero-inner {
  width: min(960px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.studio-hero .studio-eyebrow { margin-bottom: 24px; }

.studio-hero h1 {
  margin: 0;
  font-size: clamp(4.5rem, 8vw, 8rem);
  font-weight: 650;
  letter-spacing: -.062em;
  line-height: .88;
  text-wrap: balance;
}

.studio-hero-inner > p:not(.studio-eyebrow) {
  max-width: 560px;
  margin: 27px auto 0;
  color: var(--studio-tour-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}

.studio-hero .studio-actions { margin-top: 30px; justify-content: center; }

.studio-scroll-cue {
  position: absolute;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  left: 24px;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 9px;
  color: rgba(238, 244, 245, .4);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.studio-scroll-cue i {
  width: 1px;
  height: 24px;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, .15);
}

.studio-scroll-cue i::after {
  width: 100%;
  height: 9px;
  display: block;
  background: rgba(128, 221, 249, .68);
  animation: studio-product-cue 1.9s ease-in-out infinite;
  content: "";
}

/* Fully open, normal-flow defaults are the no-JavaScript fallback. */
.studio-laptop-story {
  --laptop-arrival: 1;
  --lid-open: 1;
  --screen-glow: 1;
  --screen-opacity: 1;
  --laptop-settle: 1;
  --laptop-y: 0px;
  --laptop-scale: 1;
  --lid-angle: 0deg;
  --screen-brightness: 1;
  --laptop-rest-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(76px, 9vw, 120px) 0;
  background:
    radial-gradient(ellipse 58% 46% at 50% 52%, rgba(74, 112, 126, .13), rgba(25, 41, 47, .035) 54%, transparent 74%),
    #020608;
}

.studio-laptop-sticky {
  min-height: min(760px, calc(100svh - var(--public-header-height, 64px) - var(--studio-local-height, 48px)));
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
}

.studio-tour-page.is-laptop-story-ready .studio-laptop-story {
  min-height: 180svh;
  padding: 0;
  --laptop-arrival: 0;
  --lid-open: 0;
  --screen-glow: 0;
  --screen-opacity: 0;
  --laptop-settle: 0;
  --laptop-y: 24px;
  --lid-angle: -100deg;
  --screen-brightness: .68;
}

.studio-tour-page.is-laptop-story-ready .studio-laptop-sticky {
  height: calc(100svh - var(--public-header-height, 64px) - var(--studio-local-height, 48px));
  min-height: 0;
  position: sticky;
  top: calc(var(--public-header-height, 64px) + var(--studio-local-height, 48px));
}

.studio-laptop-stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  perspective: clamp(4200px, 320vw, 6000px);
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
}

.studio-laptop-debug {
  margin: 0;
  padding: 10px 12px;
  position: fixed;
  z-index: 2400;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(114, 216, 246, .35);
  border-radius: 8px;
  background: rgba(1, 5, 7, .92);
  color: #b8eeff;
  font: 600 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

.studio-laptop-light::before {
  width: min(1160px, 88vw);
  height: 44%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(92, 129, 143, .13), rgba(40, 64, 73, .03) 54%, transparent 75%);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  content: "";
}

.studio-laptop-light::after {
  width: min(900px, 66vw);
  height: clamp(24px, 3.4vw, 48px);
  position: absolute;
  top: 66%;
  left: 50%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .76);
  filter: blur(18px);
  opacity: .84;
  transform: translate(-50%, -50%);
  content: "";
}

/*
 * One coordinated device scene. The 16:10 lid and the full-depth 16:10.4
 * base meet at --laptop-hinge-y; only the lid angle changes during scroll.
 */
.studio-laptop {
  --laptop-hinge-y: 80%;
  --laptop-base-angle: 80deg;
  width: min(1040px, 62vw, calc((100svh - var(--public-header-height, 64px) - var(--studio-local-height, 48px)) * 1.18));
  aspect-ratio: 1.28 / 1;
  position: relative;
  z-index: 2;
  transform: translate3d(0, calc(var(--laptop-rest-y) + var(--laptop-y)), 0) scale(var(--laptop-scale));
  transform-style: preserve-3d;
}

.studio-tour-page.is-laptop-story-ready .studio-laptop {
  will-change: transform;
}

.studio-laptop-lid {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: calc(100% - var(--laptop-hinge-y));
  left: 0;
  border: 1px solid rgba(244, 249, 250, .2);
  border-radius: clamp(11px, 1.05vw, 16px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 2.2%),
    linear-gradient(145deg, #62696d 0%, #474e52 24%, #292f32 64%, #4c5458 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 -1px 0 rgba(0, 0, 0, .72) inset,
    0 24px 66px rgba(0, 0, 0, .28);
  transform: rotateX(var(--lid-angle));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.studio-tour-page.is-laptop-story-ready .studio-laptop-lid {
  will-change: transform;
}

.studio-lid-outer {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 2.5%),
    linear-gradient(145deg, #62696d 0%, #454c50 26%, #282e31 64%, #4c5458 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 -1px 0 rgba(0, 0, 0, .68) inset;
  transform: translateZ(-5px) rotateY(180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
}

.studio-laptop-lid::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(4, 7, 9, .78);
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 22px rgba(114, 216, 246, .025) inset;
  pointer-events: none;
  transform: translateZ(3px);
  backface-visibility: hidden;
  content: "";
}

.studio-laptop-lid::after {
  height: 5px;
  position: absolute;
  z-index: 1;
  right: 1.2%;
  bottom: -1px;
  left: 1.2%;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #4f565a, #202529);
  transform: translateZ(-2px) rotateX(90deg);
  transform-origin: 50% 100%;
  content: "";
}

.studio-laptop-display {
  position: absolute;
  inset: clamp(6px, .62vw, 9px);
  z-index: 2;
  overflow: hidden;
  border: 1px solid #030506;
  border-radius: clamp(7px, .78vw, 11px);
  background: #020405;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .024),
    0 0 22px rgba(45, 134, 164, .03) inset;
  container-type: inline-size;
  transform: translateZ(3.5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.studio-laptop-display::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at 72% 20%, rgba(85, 191, 226, .1), transparent 42%);
  box-shadow: 0 0 34px rgba(75, 191, 225, .07) inset;
  opacity: var(--screen-glow);
  pointer-events: none;
  content: "";
}

.studio-laptop-display.studio-product-frame {
  border-radius: clamp(7px, .78vw, 11px);
  box-shadow: none;
}

.studio-laptop-screen-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: var(--screen-opacity);
  position: relative;
  z-index: 2;
  filter: brightness(var(--screen-brightness));
  transform: translateZ(.5px);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

.studio-laptop-display.studio-product-frame .studio-product-window {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.studio-laptop-hinge {
  width: 56%;
  height: clamp(4px, .5vw, 7px);
  position: absolute;
  z-index: 6;
  top: var(--laptop-hinge-y);
  left: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d1113, #363d41 13%, #171c1f 50%, #363d41 87%, #0d1113);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1),
    0 2px 5px rgba(0, 0, 0, .72);
  transform: translate3d(-50%, -50%, 7px);
}

.studio-laptop-base {
  width: 100%;
  aspect-ratio: 16 / 10.4;
  position: absolute;
  z-index: 3;
  top: var(--laptop-hinge-y);
  left: 0;
  transform: rotateX(var(--laptop-base-angle));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}

.studio-laptop-base::after {
  position: absolute;
  z-index: -1;
  inset: 1.2% .8%;
  border: 1px solid rgba(0, 0, 0, .62);
  border-radius: clamp(8px, .85vw, 13px) clamp(8px, .85vw, 13px) clamp(15px, 1.3vw, 20px) clamp(15px, 1.3vw, 20px);
  background: #242a2d;
  transform: translateZ(-5px);
  content: "";
}

.studio-laptop-deck {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: clamp(8px, .85vw, 13px) clamp(8px, .85vw, 13px) clamp(15px, 1.3vw, 20px) clamp(15px, 1.3vw, 20px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 2.4%),
    linear-gradient(155deg, #5d6569 0%, #454c50 38%, #2b3134 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 -12px 24px rgba(0, 0, 0, .24) inset,
    0 30px 50px rgba(0, 0, 0, .32);
  transform: translateZ(0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.studio-laptop-deck::before {
  position: absolute;
  inset: 5.5% 4.2% 6%;
  border: 1px solid rgba(15, 19, 22, .32);
  border-radius: clamp(6px, .7vw, 10px);
  background: linear-gradient(180deg, rgba(10, 13, 15, .1), rgba(255, 255, 255, .012));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  content: "";
}

.studio-laptop-keyboard {
  width: 78%;
  height: 42%;
  position: absolute;
  z-index: 2;
  top: 9%;
  left: 11%;
  border-radius: clamp(5px, .58vw, 8px);
  background:
    repeating-linear-gradient(90deg, #101416 0 5.5%, transparent 5.5% 6.55%),
    repeating-linear-gradient(180deg, #101416 0 15.5%, transparent 15.5% 20%);
  box-shadow:
    0 0 0 1px rgba(3, 5, 6, .34),
    0 1px 0 rgba(255, 255, 255, .025) inset;
  opacity: .9;
}

.studio-laptop-keyboard::before {
  height: 10%;
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #0d1113 0 5.5%, transparent 5.5% 6.55%);
  content: "";
}

.studio-laptop-keyboard::after {
  height: 14%;
  position: absolute;
  right: 14%;
  bottom: -21%;
  left: 14%;
  border-radius: 2px;
  background: #101416;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset;
  content: "";
}

.studio-laptop-trackpad {
  width: 44%;
  height: 34%;
  position: absolute;
  z-index: 2;
  bottom: 6.5%;
  left: 28%;
  border: 1px solid rgba(10, 13, 15, .44);
  border-radius: clamp(5px, .58vw, 8px);
  background: linear-gradient(145deg, rgba(103, 111, 115, .25), rgba(45, 51, 54, .2));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .065) inset,
    0 0 0 1px rgba(0, 0, 0, .08);
}

.studio-laptop-front-edge {
  width: 98.5%;
  height: clamp(3px, .34vw, 5px);
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: .75%;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #51595d, #272d30 52%, #15191b);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .13) inset,
    0 10px 24px rgba(0, 0, 0, .28);
  transform: translate3d(0, 100%, -1px) rotateX(-90deg);
  transform-origin: 50% 0;
}

.studio-laptop-front-edge::after {
  width: 12%;
  height: 1px;
  position: absolute;
  top: 1px;
  left: 44%;
  border-radius: 999px;
  background: rgba(4, 7, 8, .7);
  content: "";
}

@container (max-width: 520px) {
  .studio-laptop-display .studio-window-topbar {
    grid-template-columns: 1fr auto;
    padding-inline: 3cqw;
  }

  .studio-laptop-display .studio-window-tools,
  .studio-laptop-display .studio-window-site small,
  .studio-laptop-display .studio-screen-heading p,
  .studio-laptop-display .studio-activity-row { display: none; }

  .studio-laptop-display .studio-window-site { min-width: 0; }
  .studio-laptop-display .studio-window-body { grid-template-columns: 11% minmax(0, 1fr); }
  .studio-laptop-display .studio-window-rail { padding: 3cqw 1.1cqw; gap: 1.1cqw; }
  .studio-laptop-display .studio-window-rail span { width: 7cqw; }
  .studio-laptop-display .studio-window-screen { padding: 4cqw; }
  .studio-laptop-display .studio-overview-grid {
    margin-top: 3cqw;
    grid-template-columns: 1.3fr .7fr;
    gap: 1.5cqw;
  }
  .studio-laptop-display .studio-overview-grid > div:nth-child(4) { display: none; }
  .studio-laptop-display .studio-overview-grid > div { padding: 2.1cqw; }
  .studio-laptop-display .studio-overview-grid .studio-overview-lead { padding: 2.5cqw; }
}

/* Shorter, deliberately framed phone and small-landscape story. */
@media (max-width: 760px) {
  .studio-hero {
    min-height: calc(100svh - var(--public-header-height, 68px) - var(--studio-local-height));
    padding: 52px 16px max(76px, calc(68px + env(safe-area-inset-bottom, 0px)));
  }

  .studio-hero .studio-eyebrow { margin-bottom: 18px; }

  .studio-hero h1 {
    font-size: clamp(3.6rem, 15vw, 5.4rem);
    line-height: .88;
    letter-spacing: -.055em;
  }

  .studio-hero-inner > p:not(.studio-eyebrow) {
    max-width: 330px;
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .studio-hero .studio-actions {
    width: min(100%, 320px);
    margin: 22px auto 0;
    flex-direction: column;
    gap: 4px;
  }

  .studio-hero .studio-primary-action {
    width: 100%;
    min-height: 46px;
  }

  .studio-scroll-cue { bottom: max(16px, env(safe-area-inset-bottom, 0px)); }

  .studio-laptop-story {
    --laptop-rest-y: clamp(-112px, -12svh, -56px);
    padding: 70px 0 76px;
  }

  .studio-laptop-sticky {
    min-height: calc(100svh - var(--public-header-height, 68px) - var(--studio-local-height, 56px) - env(safe-area-inset-bottom, 0px));
  }

  .studio-tour-page.is-laptop-story-ready .studio-laptop-story {
    min-height: 155svh;
  }

  .studio-tour-page.is-laptop-story-ready .studio-laptop-sticky {
    height: calc(100svh - var(--public-header-height, 68px) - var(--studio-local-height, 56px) - env(safe-area-inset-bottom, 0px));
    top: calc(var(--public-header-height, 68px) + var(--studio-local-height, 56px));
  }

  .studio-laptop-stage {
    perspective: 3200px;
    perspective-origin: 50% 44%;
  }

  .studio-laptop {
    width: min(
      calc(100vw - 30px),
      calc((100svh - var(--public-header-height, 68px) - var(--studio-local-height, 56px) - env(safe-area-inset-bottom, 0px)) * 1.18)
    );
  }

  .studio-laptop-lid {
    border-radius: 11px;
  }

  .studio-laptop-display,
  .studio-laptop-display.studio-product-frame { border-radius: 7px; }

  .studio-laptop-hinge { width: 62%; }

  .studio-laptop-front-edge { height: 3px; }

  .studio-laptop-light::before {
    width: 108vw;
    height: 42%;
    top: 47%;
  }

  .studio-laptop-light::after {
    width: 92vw;
    top: 64%;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .studio-hero {
    min-height: calc(100svh - var(--public-header-height, 60px) - var(--studio-local-height));
    padding: 38px 20px 62px;
  }

  .studio-hero h1 { font-size: clamp(3rem, 8vw, 4.8rem); }
  .studio-hero-inner > p:not(.studio-eyebrow) { margin-top: 14px; font-size: .9rem; }
  .studio-hero .studio-actions { margin-top: 16px; }
  .studio-scroll-cue { bottom: 10px; }

  .studio-laptop-story { --laptop-rest-y: 4px; }

  .studio-tour-page.is-laptop-story-ready .studio-laptop-story { min-height: 150svh; }

  .studio-laptop,
  .studio-tour-page.is-laptop-story-ready .studio-laptop {
    width: min(690px, 66vw, calc((100svh - var(--public-header-height, 60px) - var(--studio-local-height)) * 1.14));
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-scroll-cue i::after { animation: none; opacity: .8; transform: none; }

  .studio-laptop-story,
  .studio-tour-page.is-laptop-story-ready .studio-laptop-story {
    min-height: 0;
    padding: clamp(72px, 9vw, 112px) 0;
    --laptop-arrival: 1 !important;
    --lid-open: 1 !important;
    --screen-glow: 1 !important;
    --screen-opacity: 1 !important;
    --laptop-settle: 1 !important;
    --laptop-y: 0px !important;
    --laptop-scale: 1 !important;
    --lid-angle: 0deg !important;
    --screen-brightness: 1 !important;
  }

  .studio-laptop-sticky,
  .studio-tour-page.is-laptop-story-ready .studio-laptop-sticky {
    height: auto;
    min-height: min(760px, calc(100svh - var(--public-header-height, 64px) - var(--studio-local-height, 48px)));
    position: relative;
    top: auto;
  }

  .studio-laptop,
  .studio-laptop-lid { will-change: auto !important; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .studio-laptop-story,
  .studio-tour-page.is-laptop-story-ready .studio-laptop-story { padding: 68px 0 74px; }

  .studio-laptop-sticky,
  .studio-tour-page.is-laptop-story-ready .studio-laptop-sticky {
    min-height: min(620px, calc(100svh - var(--public-header-height, 68px) - var(--studio-local-height, 56px) - env(safe-area-inset-bottom, 0px)));
  }
}