/* PLM Studio public product story. Authenticated Studio styles remain separate. */
:root {
  --studio-tour-bg: #020608;
  --studio-tour-panel: #0a0f13;
  --studio-tour-panel-2: #10161b;
  --studio-tour-line: rgba(255, 255, 255, .105);
  --studio-tour-text: #f5f7f7;
  --studio-tour-muted: rgba(236, 242, 242, .66);
  --studio-tour-subtle: rgba(236, 242, 242, .48);
  --studio-tour-cyan: #72d8f6;
  --studio-tour-green: #64d6a1;
  --studio-tour-ease: cubic-bezier(.22, .8, .24, 1);
  --studio-local-height: 48px;
  --studio-sticky-offset: calc(var(--public-header-height, 64px) + var(--studio-local-height, 48px));
  --studio-section-pad-mobile: 88px;
  --studio-section-pad-desktop: 128px;
  --studio-section-gap-mobile: 72px;
  --studio-section-gap-desktop: 96px;
  --studio-content-gap: 36px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--studio-sticky-offset) + 24px);
}
html.studio-tour-document { overflow-x: visible; }
body.studio-tour-page {
  margin: 0;
  --studio-sticky-offset: calc(var(--public-header-height, 64px) + var(--studio-local-height, 48px));
  overflow-x: visible;
  background: var(--studio-tour-bg);
  color: var(--studio-tour-text);
  color-scheme: dark;
}
body.studio-tour-page:not(.public-sheet-open):not(.modal-open) {
  overflow-y: visible;
}
.studio-tour-page *,
.studio-tour-page *::before,
.studio-tour-page *::after { box-sizing: border-box; }
.studio-tour-page :is(a, button):focus-visible {
  outline: 2px solid #9ee9ff;
  outline-offset: 4px;
}
.studio-tour-page .skip-link {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: fixed;
  z-index: 2200;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  border-radius: 8px;
  background: #f4f4ef;
  color: #071014;
  font-size: .8rem;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}
.studio-tour-page .skip-link:focus,
.studio-tour-page .skip-link:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 14px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  outline: 2px solid #72d8f6;
  outline-offset: 2px;
}
.studio-tour-main {
  position: relative;
  overflow: visible;
  background: var(--studio-tour-bg);
}
.studio-tour-main > section:not(.studio-laptop-story):not(.studio-authority) {
  overflow-x: clip;
}
.studio-tour-main > section[id] {
  scroll-margin-top: calc(var(--studio-sticky-offset) + 24px);
}
.studio-tour-shell {
  width: min(calc(100% - 48px), 1440px);
  margin-inline: auto;
}
.studio-eyebrow {
  margin: 0 0 17px;
  color: rgba(128, 221, 249, .82);
  font-size: .72rem;
  font-weight: 720;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.studio-primary-action {
  min-height: 48px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: #f3f3ef;
  color: #080b0d;
  font-size: .88rem;
  font-weight: 720;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.studio-primary-action:hover {
  background: #fff;
  transform: translateY(-1px);
}
.studio-text-action,
.studio-quiet-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(245, 248, 248, .82);
  font-size: .86rem;
  font-weight: 680;
  text-decoration: none;
  transition: color 180ms ease;
}
.studio-text-action:hover,
.studio-quiet-action:hover { color: #fff; }
.studio-quiet-action { color: rgba(239, 244, 244, .54); }

/* Local product navigation */
.studio-local-nav {
  height: var(--studio-local-height);
  position: sticky;
  z-index: 900;
  top: var(--public-header-height, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(3, 7, 9, .88);
  backdrop-filter: blur(12px) saturate(125%);
}
.studio-local-nav-inner {
  width: min(calc(100% - 48px), 1440px);
  height: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.studio-local-brand {
  justify-self: start;
  color: #f7f8f8;
  font-size: .84rem;
  font-weight: 730;
  text-decoration: none;
}
.studio-local-links {
  display: flex;
  align-items: center;
  gap: 25px;
}
.studio-local-links a,
.studio-local-signin {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
  color: rgba(241, 245, 245, .62);
  font-size: .7rem;
  font-weight: 680;
  text-decoration: none;
  transition: color 180ms ease;
}
.studio-local-links a::after {
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  background: var(--studio-tour-cyan);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity 180ms ease, transform 200ms var(--studio-tour-ease);
  content: "";
}
.studio-local-links a:hover,
.studio-local-links a.is-current,
.studio-local-links a[aria-current="location"] { color: #fff; }
.studio-local-links a.is-current::after,
.studio-local-links a[aria-current="location"]::after {
  opacity: .72;
  transform: scaleX(1);
}
.studio-local-signin {
  justify-self: end;
  color: rgba(246, 248, 248, .86);
}
.studio-local-toggle,
.studio-local-panel { display: none; }

/* Synthetic public demo, visually aligned to the authenticated Studio shell. */
.studio-product-window {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: #0c1115;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .06) inset;
  color: #eef2f3;
  contain: layout paint;
}
.studio-window-topbar {
  min-height: 62px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: #0b1014;
}
.studio-window-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .76rem;
}
.studio-window-brand img {
  width: 30px;
  height: 24px;
  object-fit: contain;
}
.studio-window-brand b { white-space: nowrap; }
.studio-window-site {
  min-width: 190px;
  min-height: 42px;
  padding: 5px 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: inherit;
  text-align: left;
}
.studio-window-site small {
  grid-column: 1;
  color: rgba(229, 236, 237, .42);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studio-window-site b {
  grid-column: 1;
  font-size: .7rem;
}
.studio-window-site svg {
  width: 11px;
  grid-column: 2;
  grid-row: 1 / 3;
  fill: none;
  stroke: currentColor;
}
.studio-window-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
.studio-window-tools i {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: rgba(255, 255, 255, .025);
}
.studio-window-tools b {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(83, 213, 255, .28);
  border-radius: 8px;
  background: linear-gradient(145deg, #287c9f, #142a38);
  color: #e9faff;
  font-size: .61rem;
}
.studio-window-body {
  min-height: min(70vh, 720px);
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
}
.studio-window-rail {
  padding: 17px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, .075);
  background: #090e12;
}
.studio-window-rail span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 10px;
  color: rgba(230, 237, 239, .4);
}
.studio-window-rail svg {
  width: 19px;
  fill: currentColor;
}
.studio-window-screens,
.studio-hero-screen {
  min-width: 0;
  padding: clamp(26px, 3vw, 48px);
  background: #10161b;
}
.studio-window-screen { min-height: 100%; }
.studio-screen-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.studio-screen-heading small {
  display: block;
  margin-bottom: 8px;
  color: rgba(130, 218, 245, .72);
  font-size: .61rem;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.studio-screen-heading strong {
  display: block;
  font-size: clamp(1.45rem, 2.4vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -.035em;
}
.studio-screen-heading p {
  margin: 8px 0 0;
  color: rgba(228, 235, 237, .52);
  font-size: .73rem;
}
.studio-screen-heading > .studio-faux-button,
.studio-project-note .studio-faux-button {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: rgba(243, 247, 248, .78);
  font: inherit;
  font-size: .66rem;
}
.studio-live-label,
.studio-count-label {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  color: rgba(237, 242, 243, .65);
  font-size: .61rem;
  font-style: normal;
}
.studio-live-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--studio-tour-green);
  box-shadow: 0 0 0 4px rgba(100, 214, 161, .08);
}
.studio-progress-number {
  color: #f6f9f9;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-style: normal;
  font-weight: 650;
}

.studio-overview-grid {
  margin-top: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}
.studio-overview-grid > div {
  min-height: 140px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: #0c1216;
}
.studio-overview-grid > div small {
  color: rgba(226, 234, 236, .42);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studio-overview-grid > div strong {
  margin-top: 13px;
  font-size: clamp(.95rem, 1.5vw, 1.35rem);
  font-weight: 650;
}
.studio-overview-grid > div > span {
  margin-top: 5px;
  color: rgba(225, 233, 235, .5);
  font-size: .66rem;
}
.studio-overview-grid > div > i {
  height: 4px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, .075);
}
.studio-overview-grid > div > i::after {
  width: var(--progress);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--studio-tour-cyan);
  content: "";
}
.studio-overview-grid .studio-overview-lead {
  grid-row: span 2;
  min-height: 296px;
  background: linear-gradient(145deg, #101a20, #0b1115);
}
.studio-overview-lead > strong { font-size: clamp(1.4rem, 2.4vw, 2.25rem) !important; }
.studio-overview-lead > div {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.studio-overview-lead > div b { font-size: .69rem; }
.studio-overview-lead > div em {
  color: #74dca6;
  font-size: .7rem;
  font-style: normal;
}

.studio-project-layout,
.studio-request-layout,
.studio-files-layout,
.studio-health-layout {
  margin-top: clamp(26px, 4vw, 48px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
}
.studio-project-timeline,
.studio-project-note,
.studio-request-list,
.studio-request-detail,
.studio-folder-list,
.studio-file-grid,
.studio-health-score,
.studio-health-list {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: #0c1216;
}
.studio-project-timeline { display: grid; }
.studio-project-timeline span {
  min-height: 66px;
  padding-left: 34px;
  display: grid;
  align-content: center;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, .11);
}
.studio-project-timeline span i {
  width: 11px;
  height: 11px;
  position: absolute;
  top: 27px;
  left: -6px;
  border: 2px solid #303a3f;
  border-radius: 50%;
  background: #0c1216;
}
.studio-project-timeline span.is-done i {
  border-color: #62d6a0;
  background: #62d6a0;
}
.studio-project-timeline span.is-current i {
  border-color: var(--studio-tour-cyan);
  box-shadow: 0 0 0 4px rgba(114, 216, 246, .1);
}
.studio-project-timeline b { font-size: .72rem; }
.studio-project-timeline small {
  margin-top: 4px;
  color: rgba(225, 233, 235, .43);
  font-size: .58rem;
}
.studio-project-note,
.studio-request-detail { display: flex; flex-direction: column; }
.studio-project-note small,
.studio-request-detail > small {
  color: rgba(129, 218, 245, .68);
  font-size: .59rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studio-project-note strong,
.studio-request-detail > strong {
  margin-top: 14px;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
}
.studio-project-note > span,
.studio-request-detail > p {
  margin-top: 8px;
  color: rgba(226, 234, 236, .5);
  font-size: .68rem;
  line-height: 1.5;
}
.studio-project-note .studio-faux-button {
  align-self: flex-start;
  margin-top: auto;
}

.studio-request-layout { grid-template-columns: .75fr 1.25fr; }
.studio-request-list { padding: 8px; }
.studio-request-list > span {
  min-height: 68px;
  padding: 12px;
  display: grid;
  grid-template-columns: 8px 1fr;
  align-content: center;
  column-gap: 10px;
  border-radius: 10px;
}
.studio-request-list > span.is-selected { background: rgba(255, 255, 255, .045); }
.studio-request-list i {
  width: 6px;
  height: 6px;
  grid-row: 1 / 3;
  align-self: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.studio-request-list .is-selected i { background: var(--studio-tour-cyan); }
.studio-request-list b { font-size: .67rem; }
.studio-request-list small {
  margin-top: 4px;
  color: rgba(226, 234, 236, .42);
  font-size: .55rem;
}
.studio-request-steps {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.studio-request-steps span {
  padding-top: 11px;
  position: relative;
  border-top: 2px solid rgba(255, 255, 255, .1);
  color: rgba(225, 233, 235, .4);
  font-size: .56rem;
}
.studio-request-steps span.is-done {
  border-color: #65d4a1;
  color: rgba(225, 233, 235, .65);
}
.studio-request-steps span.is-current {
  border-color: var(--studio-tour-cyan);
  color: #fff;
}

.studio-files-layout { grid-template-columns: .55fr 1.45fr; }
.studio-folder-list {
  padding: 8px;
  display: grid;
  align-content: start;
}
.studio-folder-list span {
  min-height: 44px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 9px;
  color: rgba(226, 234, 236, .52);
  font-size: .63rem;
}
.studio-folder-list span.is-selected {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}
.studio-folder-list b {
  color: rgba(226, 234, 236, .35);
  font-size: .55rem;
}
.studio-file-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.studio-file-grid span {
  min-height: 112px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
}
.studio-file-grid i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(114, 216, 246, .09);
  color: rgba(142, 225, 250, .78);
  font-size: .52rem;
  font-style: normal;
}
.studio-file-grid b {
  margin-top: auto;
  font-size: .64rem;
}
.studio-file-grid small {
  margin-top: 4px;
  color: rgba(226, 234, 236, .4);
  font-size: .53rem;
}

.studio-health-layout { grid-template-columns: .8fr 1.2fr; }
.studio-health-score {
  display: grid;
  place-items: center;
  text-align: center;
}
.studio-health-score > span {
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 1px solid rgba(101, 214, 161, .35);
  border-radius: 50%;
  background: rgba(101, 214, 161, .04);
}
.studio-health-score b { font-size: 1.15rem; }
.studio-health-score small {
  margin-top: 6px;
  color: rgba(225, 233, 235, .45);
  font-size: .56rem;
}
.studio-health-list { padding: 6px 18px; }
.studio-health-list span {
  min-height: 67px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.studio-health-list span:last-child { border-bottom: 0; }
.studio-health-list b { font-size: .68rem; }
.studio-health-list em {
  color: #70d9a4;
  font-size: .61rem;
  font-style: normal;
}
.studio-health-list small {
  margin-top: 4px;
  color: rgba(225, 233, 235, .4);
  font-size: .54rem;
}

@media (max-width: 1040px) {
  .studio-tour-shell,
  .studio-local-nav-inner { width: min(calc(100% - 36px), 920px); }
  .studio-local-links { gap: 18px; }
  .studio-brand-moment-inner,
  .studio-brand-moment--threads .studio-brand-moment-inner {
    grid-template-columns: 1fr;
    gap: 70px;
  }
  .studio-brand-copy { max-width: 850px; }
  .studio-continuity-visual {
    width: min(100%, 760px);
    margin: 0;
  }
  .studio-thread-visual {
    width: min(100%, 660px);
    order: 2;
  }
  .studio-brand-moment--threads .studio-brand-copy { order: 1; }
}
@media (max-width: 820px) {
  .studio-local-links { gap: 13px; }
  .studio-local-links a { font-size: .65rem; }
}
@media (max-width: 760px) {
  :root { --studio-local-height: 48px; }
  .studio-tour-shell { width: calc(100% - 40px); }
  .studio-local-nav-inner {
    width: calc(100% - 32px);
    grid-template-columns: 1fr auto auto;
    gap: 14px;
  }
  .studio-local-links { display: none; }
  .studio-local-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: rgba(240, 245, 245, .66);
    font: inherit;
    font-size: .68rem;
  }
  .studio-local-toggle svg {
    width: 10px;
    fill: none;
    stroke: currentColor;
    transition: transform 180ms ease;
  }
  .studio-local-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .studio-local-signin {
    min-width: 54px;
    justify-content: flex-end;
    font-size: .7rem;
  }
  .studio-local-panel {
    width: 100%;
    padding: 8px 20px 14px;
    position: absolute;
    top: var(--studio-local-height);
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #080d10;
    box-shadow: 0 24px 44px rgba(0, 0, 0, .3);
  }
  .studio-local-panel.is-open { display: grid; }
  .studio-local-panel a {
    min-height: 46px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    color: rgba(239, 244, 245, .74);
    font-size: .76rem;
    font-weight: 650;
    text-decoration: none;
  }
  .studio-local-panel a:last-child { border-bottom: 0; }


}
@media (max-width: 430px) {
  .studio-tour-shell { width: calc(100% - 32px); }
  .studio-primary-action { min-height: 46px; }

  .studio-continuity-work em { display: none; }
}
@media (max-width: 340px) {
  .studio-tour-shell { width: calc(100% - 24px); }
  .studio-local-nav-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }
  .studio-local-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
@media (prefers-contrast: more) {
  .studio-tour-page {
    --studio-tour-muted: rgba(255, 255, 255, .82);
    --studio-tour-subtle: rgba(255, 255, 255, .7);
    --studio-tour-line: rgba(255, 255, 255, .22);
  }
  .studio-local-links a,
  .studio-local-signin { color: rgba(255, 255, 255, .86); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .studio-tour-page *,
  .studio-tour-page *::before,
  .studio-tour-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  [data-tour-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* PLM Studio disciplined product-page composition. */
:root {
  --studio-tour-graphite: #17191c;
  --studio-tour-cyan-strong: #9ae9ff;
}
.studio-tour-shell { width: min(calc(100% - 48px), 1320px); }
.studio-section-title,
.studio-centered-copy h2,
.studio-deep-heading h2,
.studio-split-copy h2,
.studio-final h2 {
  margin: 0;
  font-size: clamp(3.8rem, 7vw, 7rem);
  font-weight: 650;
  letter-spacing: -.058em;
  line-height: .93;
  text-wrap: balance;
}
.studio-actions { justify-content: flex-start; }
.studio-local-nav-inner {
  width: min(calc(100% - 48px), 1320px);
  grid-template-columns: auto 1fr auto;
}
.studio-local-links { justify-content: flex-end; gap: 24px; }
.studio-local-signin {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}
.studio-product-frame  {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: clamp(16px, 2.3vw, 28px);
  background: #05090c;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .3);
}
.studio-product-frame .studio-product-window  { border-radius: inherit; }
.studio-product-frame.is-mounted .studio-demo-placeholder  { display: none; }
.studio-demo-placeholder {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .42);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studio-graphite-section { background: var(--studio-tour-graphite); }
[data-tour-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 620ms ease, transform 720ms var(--studio-tour-ease);
}
[data-tour-reveal].is-visible { opacity: 1; transform: none; }
.studio-centered-copy {
  width: min(100%, 900px);
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.studio-centered-copy > p:last-child,
.studio-split-copy > p:last-child,
.studio-deep-support,
.studio-final-copy > p {
  color: var(--studio-tour-muted);
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}
.studio-centered-copy > p:last-child { max-width: 780px; margin: 30px auto 0; }

.studio-highlights { padding: clamp(110px, 12vw, 170px) 0 var(--studio-section-pad-desktop); }
.studio-highlights .studio-section-title { max-width: 920px; font-size: clamp(3.7rem, 6.5vw, 6.6rem); }
.studio-highlights-viewport {
  width: 100%;
  margin-top: clamp(56px, 7vw, 88px);
  padding-inline: max(24px, calc((100vw - 1320px) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-padding-inline: max(24px, calc((100vw - 1320px) / 2));
  scroll-snap-type: x mandatory;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.studio-highlights-viewport::-webkit-scrollbar { display: none; }
.studio-highlights-viewport.is-dragging { cursor: grabbing; user-select: none; }
.studio-highlights-track { width: max-content; display: flex; gap: clamp(18px, 2vw, 28px); }
.studio-highlight-story {
  width: clamp(700px, 62vw, 880px);
  height: clamp(500px, 42vw, 610px);
  padding: clamp(30px, 3.2vw, 46px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: clamp(26px, 2.4vw, 34px);
  background: linear-gradient(145deg, #0c1115, #05080a 70%);
  scroll-snap-align: start;
}
.studio-highlight-story > div:first-child { position: relative; z-index: 2; }
.studio-highlight-story small { color: var(--studio-tour-cyan); font-size: .7rem; font-weight: 740; letter-spacing: .12em; text-transform: uppercase; }
.studio-highlight-story h3 { max-width: 620px; margin: 12px 0 0; font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 630; letter-spacing: -.045em; line-height: 1; }
.studio-product-frame--highlight  { width: 82%; position: absolute; right: -4%; bottom: -7%; border-radius: 18px; transform: rotate(-1.2deg); }
.studio-highlight-story:nth-child(even) .studio-product-frame--highlight { right: auto; left: 10%; transform: rotate(.8deg); }
.studio-highlight-controls { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; }
.studio-highlight-dots { display: flex; gap: 8px; }
.studio-highlight-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: width 180ms ease, background 180ms ease; }
.studio-highlight-dots button.is-active { width: 24px; border-radius: 8px; background: var(--studio-tour-cyan); }
.studio-highlight-controls > div:last-child { display: flex; gap: 10px; }
.studio-highlight-controls > div:last-child button { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .065); color: #fff; font-size: 1rem; cursor: pointer; }
.studio-highlight-controls button:disabled { opacity: .35; cursor: default; }

.studio-closer { padding: 30px 0 clamp(120px, 13vw, 190px); }
.studio-closer .studio-section-title { font-size: clamp(3.4rem, 6vw, 6rem); }
.studio-closer-panel {
  min-height: clamp(620px, 55vw, 740px);
  margin-top: clamp(48px, 6vw, 76px);
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: clamp(26px, 3vw, 38px);
  background: #020405;
}
.studio-closer-tabs { display: flex; flex-direction: column; gap: 5px; }
.studio-closer-tabs button {
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(242, 246, 247, .48);
  font: inherit;
  font-size: .82rem;
  font-weight: 690;
  text-align: left;
  cursor: pointer;
}
.studio-closer-tabs button i { width: 18px; height: 18px; position: relative; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; }
.studio-closer-tabs button i::before,
.studio-closer-tabs button i::after { position: absolute; inset: 50% auto auto 50%; background: currentColor; transform: translate(-50%, -50%); content: ""; }
.studio-closer-tabs button i::before { width: 7px; height: 1px; }
.studio-closer-tabs button i::after { width: 1px; height: 7px; }
.studio-closer-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .045); color: #fff; }
.studio-closer-tabs button[aria-selected="true"] i { border-color: rgba(114, 216, 246, .48); color: var(--studio-tour-cyan); }
.studio-closer-display { width: 100%; border-radius: clamp(14px, 1.6vw, 22px); box-shadow: 0 30px 80px rgba(0, 0, 0, .42); }

.studio-opening-statement { min-height: 82svh; padding: var(--studio-section-pad-desktop) 0; display: grid; place-items: center; background: #000; }
.studio-opening-statement h2 { font-size: clamp(4.3rem, 8vw, 8rem); }
.studio-opening-statement h2 span { background: linear-gradient(105deg, #d8dcde 10%, #f3f6f7 42%, #75d7f5 88%); color: transparent; -webkit-background-clip: text; background-clip: text; }
.studio-deep-dive { padding: clamp(120px, 13vw, 190px) 0; background: #000; }
.studio-deep-heading { max-width: 1040px; }
.studio-deep-heading h2 { font-size: clamp(3.8rem, 7vw, 7rem); }
.studio-product-frame--hero  { width: min(1250px, 88vw); margin: clamp(58px, 7vw, 90px) auto 0; }
.studio-deep-support { max-width: 650px; margin: 38px 0 0 auto; }
.studio-split-layout { min-height: 760px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); align-items: center; gap: clamp(48px, 6vw, 94px); }
.studio-deep-dive--reverse .studio-split-layout { grid-template-columns: minmax(300px, .75fr) minmax(0, 1.55fr); }
.studio-product-frame--split  { width: 100%; }
.studio-split-copy h2 { font-size: clamp(3.5rem, 5.8vw, 6rem); }
.studio-split-copy > p:last-child { margin: 28px 0 0; }
.studio-deep-dive--files { padding-top: 150px; }
.studio-deep-dive--files .studio-centered-copy,
.studio-deep-dive--hosting .studio-centered-copy { max-width: 1020px; }
.studio-deep-dive--hosting { padding-top: clamp(150px, 15vw, 220px); }

.studio-plm-difference { padding: clamp(150px, 16vw, 230px) 0; background: #020506; }
.studio-plm-difference .studio-centered-copy > strong {
  display: block;
  margin-top: 30px;
  background: linear-gradient(100deg, #d8dddf, #77d8f5 72%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2rem, 4.2vw, 4.3rem);
  font-weight: 650;
  letter-spacing: -.045em;
}
.studio-relationship-diagram {
  width: min(100%, 1050px);
  min-height: 510px;
  margin: clamp(70px, 8vw, 110px) auto 0;
  padding: 54px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 32px;
  background: radial-gradient(circle at 50% 50%, rgba(114, 216, 246, .06), transparent 44%), #060a0d;
}
.studio-relationship-diagram > span { font-weight: 680; letter-spacing: -.035em; }
.studio-diagram-plm { color: rgba(245, 248, 248, .62); font-size: 1.05rem; }
.studio-diagram-site { color: #fff; font-size: clamp(2.2rem, 5vw, 4.9rem); }
.studio-diagram-studio { color: var(--studio-tour-cyan-strong); font-size: clamp(1.4rem, 2.5vw, 2.5rem); }
.studio-relationship-diagram > i { width: 1px; height: 48px; margin: 12px 0; background: linear-gradient(transparent, rgba(114, 216, 246, .48), transparent); }
.studio-relationship-diagram > div { margin-top: 42px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.studio-relationship-diagram > div b { color: rgba(239, 244, 245, .52); font-size: .76rem; font-weight: 680; letter-spacing: .04em; }

.studio-authority { min-height: 145svh; position: relative; background: #000; }
.studio-authority-sticky {
  height: calc(100svh - var(--public-header-height, 64px) - var(--studio-local-height));
  min-height: 620px;
  position: sticky;
  top: calc(var(--public-header-height, 64px) + var(--studio-local-height));
  display: grid;
  align-items: center;
  overflow: hidden;
}
.studio-authority-sticky .studio-tour-shell { margin-inline: auto; }
.studio-authority h2 { margin: 0; font-size: clamp(4.4rem, 9vw, 9rem); font-weight: 650; letter-spacing: -.065em; line-height: .84; }
.studio-authority-lines { margin-top: clamp(46px, 6vw, 78px); display: grid; gap: 12px; }
.studio-authority-lines span { display: block; color: rgba(244, 247, 247, .16); font-size: clamp(1.35rem, 3vw, 3rem); font-weight: 610; letter-spacing: -.035em; transform: translate3d(0, 14px, 0); }

.studio-system { padding: clamp(140px, 15vw, 220px) 0 clamp(170px, 17vw, 250px); background: #030607; }
.studio-system .studio-centered-copy { max-width: 1050px; }
.studio-system-composition { width: min(100%, 1260px); min-height: 720px; margin: 90px auto 0; position: relative; }
.studio-site-preview {
  width: 76%;
  aspect-ratio: 16 / 10;
  position: absolute;
  z-index: 3;
  top: 5%;
  left: 2%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  background: #dedbd4;
  color: #111;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .48);
}
.studio-site-browser { height: 6.5%; padding: 0 18px; display: flex; align-items: center; gap: 7px; background: #101416; color: rgba(255, 255, 255, .55); }
.studio-site-browser i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.studio-site-browser span { margin-left: 12px; font-size: .55rem; }
.studio-site-nav { height: 11%; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, .09); }
.studio-site-nav b { font-size: clamp(.8rem, 1.4vw, 1.25rem); letter-spacing: -.03em; }
.studio-site-nav span { font-size: clamp(.55rem, .8vw, .72rem); }
.studio-site-hero { height: 82.5%; padding: 7% 6%; position: relative; overflow: hidden; background: linear-gradient(135deg, #dad7cf, #f1eee7); }
.studio-site-hero small { font-size: clamp(.55rem, .8vw, .74rem); font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.studio-site-hero strong { display: block; margin-top: 5%; position: relative; z-index: 2; font-size: clamp(2.7rem, 5.6vw, 6rem); font-weight: 540; letter-spacing: -.065em; line-height: .82; }
.studio-site-hero i { width: 42%; height: 110%; position: absolute; right: 3%; bottom: -20%; border-radius: 50% 50% 20% 20%; background: linear-gradient(160deg, #1c2428, #758084 54%, #151b1e); transform: rotate(11deg); }
.studio-system-studio { width: 57%; position: absolute; z-index: 4; right: 1%; bottom: 2%; border-radius: 16px; box-shadow: 0 38px 90px rgba(0, 0, 0, .55); }
.studio-site-mobile { width: 17%; aspect-ratio: 9 / 18.6; position: absolute; z-index: 5; right: 2%; top: 2%; padding: 7px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 28px; background: #080b0d; box-shadow: 0 35px 80px rgba(0, 0, 0, .45); }
.studio-site-mobile > div { height: 100%; padding: 16% 12%; position: relative; overflow: hidden; border-radius: 22px; background: #e3dfd7; color: #111; }
.studio-site-mobile b { display: block; font-size: .65rem; }
.studio-site-mobile small { display: block; margin-top: 34%; font-size: .42rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.studio-site-mobile strong { display: block; margin-top: 12%; position: relative; z-index: 2; font-size: clamp(.85rem, 1.8vw, 1.75rem); letter-spacing: -.06em; line-height: .9; }
.studio-site-mobile i { width: 90%; height: 48%; position: absolute; right: -30%; bottom: -8%; border-radius: 50%; background: #253034; }

.studio-final { min-height: 88svh; padding: 140px 0; display: grid; place-items: center; background: #010304; text-align: center; }
.studio-final-copy { width: min(100%, 1040px); max-width: 1040px; margin-inline: auto; text-align: center; }
.studio-final h2 { font-size: clamp(4.2rem, 8.3vw, 8.4rem); }
.studio-final-copy > p { max-width: 720px; margin: 30px auto 0; }
.studio-final .studio-actions { margin-top: 36px; justify-content: center; }

@media (max-width: 1100px) {
  .studio-local-links { gap: 16px; }
  .studio-split-layout,
  .studio-deep-dive--reverse .studio-split-layout { min-height: 650px; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 42px; }
  .studio-deep-dive--reverse .studio-split-layout { grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); }
  .studio-system-composition { min-height: 620px; }
}

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
  body.studio-tour-page {
    --public-header-height: calc(68px + env(safe-area-inset-top, 0px));
    --studio-local-height: 56px;
  }
  .studio-tour-page .site-header.public-site-header { min-height: var(--public-header-height); }
  .studio-tour-page .public-site-header .public-header-inner { min-height: 68px; }
  .studio-tour-shell { width: min(calc(100% - 32px), 1320px); }
  .studio-local-nav { height: var(--studio-local-height); top: var(--public-header-height); }
  .studio-local-nav-inner { width: calc(100% - 28px); grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .studio-local-brand { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
  .studio-local-links { display: none; }
  .studio-local-toggle {
    min-width: 60px;
    min-height: 44px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: rgba(240, 245, 245, .66);
    font: inherit;
    font-size: .68rem;
    white-space: nowrap;
  }
  .studio-local-toggle svg { width: 10px; fill: none; stroke: currentColor; transition: transform 180ms ease; }
  .studio-local-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .studio-local-panel {
    width: 100%;
    padding: 8px 20px 14px;
    position: absolute;
    top: var(--studio-local-height);
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #080d10;
    box-shadow: 0 24px 44px rgba(0, 0, 0, .3);
  }
  .studio-local-panel.is-open { display: grid; }
  .studio-local-panel a { min-height: 46px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .075); color: rgba(239, 244, 245, .74); font-size: .76rem; font-weight: 650; text-decoration: none; }
  .studio-local-panel a:last-child { border-bottom: 0; }
  .studio-local-actions { gap: 6px; }
  .studio-local-actions .studio-local-signin { display: none; }
  .studio-local-start { min-height: 32px; padding: 0 10px; font-size: .63rem; white-space: nowrap; }
  .studio-section-title,
  .studio-centered-copy h2,
  .studio-deep-heading h2,
  .studio-final h2 { font-size: clamp(3rem, 12.5vw, 4.8rem); line-height: .92; }
  .studio-split-copy h2 { font-size: clamp(2.65rem, 11vw, 4rem); line-height: .92; }
  .studio-centered-copy > p:last-child,
  .studio-split-copy > p:last-child,
  .studio-deep-support,
  .studio-final-copy > p { font-size: 1rem; line-height: 1.55; }
  .studio-tour-main > section[id] { scroll-margin-top: calc(var(--studio-sticky-offset) + 24px); }
  .studio-highlights { padding: var(--studio-section-pad-mobile) 0; }
  .studio-highlights .studio-section-title { font-size: clamp(3rem, 12.5vw, 4.8rem); }
  .studio-highlights-viewport { margin-top: 48px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .studio-highlights-track { gap: 14px; }
  .studio-highlight-story {
    width: 86vw;
    min-width: 86vw;
    height: clamp(480px, 126vw, 520px);
    padding: 30px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 32px;
    border-radius: 25px;
  }
  .studio-highlight-story h3 { font-size: clamp(2.35rem, 10vw, 3.5rem); line-height: .94; }
  .studio-highlight-story .studio-product-frame--highlight,
  .studio-highlight-story:nth-child(even) .studio-product-frame--highlight {
    width: 100%;
    margin-top: auto;
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    align-self: end;
    transform: none;
  }
  .studio-highlight-controls { margin-top: 22px; }
  .studio-closer { padding: 76px 0 82px; }
  .studio-closer-panel { min-height: 0; margin-top: 32px; padding: 12px; display: flex; flex-direction: column; gap: 12px; border-radius: 24px; }
  .studio-closer-tabs { width: 100%; padding-bottom: 2px; flex-direction: row; gap: 3px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .studio-closer-tabs::-webkit-scrollbar { display: none; }
  .studio-closer-tabs button { min-width: max-content; min-height: 40px; padding: 0 9px; scroll-snap-align: start; font-size: .7rem; }
  .studio-closer-display { width: 100%; border-radius: 17px; }
  .studio-opening-statement { min-height: 0; padding: 100px 0; }
  .studio-opening-statement h2 { font-size: clamp(3.35rem, 14.2vw, 5rem); }
  .studio-opening-statement .studio-centered-copy > p:last-child { margin-top: 24px; }
  .studio-deep-dive { padding: 80px 0; }
  .studio-deep-dive--files,
  .studio-deep-dive--hosting { padding: 84px 0; }
  .studio-product-frame--hero,
  .studio-product-frame--split { width: 100%; margin: var(--studio-content-gap) auto 0; }
  .studio-deep-support { margin: 20px 0 0; }
  .studio-split-layout,
  .studio-deep-dive--reverse .studio-split-layout { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .studio-deep-dive--split:not(.studio-deep-dive--reverse) .studio-split-copy { order: 0; }
  .studio-deep-dive--split:not(.studio-deep-dive--reverse) .studio-product-frame { order: 1; }
  .studio-deep-dive--reverse .studio-split-copy { order: 0; }
  .studio-deep-dive--reverse .studio-product-frame { order: 1; }
  .studio-split-copy > p:last-child { margin-top: 18px; }
  .studio-deep-dive--files .studio-centered-copy,
  .studio-deep-dive--hosting .studio-centered-copy { text-align: left; }
  .studio-plm-difference { padding: 90px 0; }
  .studio-plm-difference .studio-centered-copy > strong { margin-top: 22px; font-size: clamp(2rem, 9.4vw, 3.4rem); }
  .studio-plm-difference .studio-centered-copy > p:last-child { margin-top: 24px; }
  .studio-relationship-diagram { min-height: 0; margin-top: 48px; padding: 36px 16px; border-radius: 24px; }
  .studio-relationship-diagram > i { height: 34px; margin-block: 8px; }
  .studio-relationship-diagram > div { margin-top: 28px; gap: 9px 17px; }
  .studio-authority { min-height: 0; padding: var(--studio-section-pad-mobile) 0 0; position: relative; }
  .studio-authority-sticky { height: auto; min-height: 0; position: relative; top: auto; display: block; overflow: visible; }
  .studio-authority h2 { font-size: clamp(3.6rem, 15vw, 5.3rem); line-height: .88; }
  .studio-authority-lines { margin-top: 80px; gap: 48px; }
  .studio-authority-lines span { color: rgba(244, 247, 247, .84); font-size: clamp(1.9rem, 8.2vw, 3rem); line-height: .96; transform: none; }
  .studio-system { padding: var(--studio-section-pad-mobile) 0 96px; }
  .studio-system .studio-tour-shell { display: flex; flex-direction: column; }
  .studio-system-composition { width: 100%; min-height: clamp(370px, 104vw, 430px); margin: 0 auto; order: 1; }
  .studio-system .studio-centered-copy { margin-top: var(--studio-section-gap-mobile); order: 2; }
  .studio-site-preview { width: 100%; top: 0; left: 0; border-radius: 17px; }
  .studio-system-studio { width: 90%; right: auto; bottom: 0; left: 5%; border-radius: 14px; }
  .studio-site-mobile { width: 20%; right: 16px; top: 8px; border-radius: 16px; }
  .studio-final { min-height: 0; padding: 100px 0 max(100px, env(safe-area-inset-bottom, 0px)); }
  .studio-final h2 { max-width: 100%; margin-inline: auto; font-size: clamp(3rem, 12.8vw, 5.2rem); }
  .studio-final-copy > p { margin-top: 24px; }
  .studio-final .studio-actions { width: min(100%, 330px); margin: 28px auto 0; flex-direction: column; gap: 4px; }
  .studio-final .studio-primary-action { width: 100%; }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body.studio-tour-page { --public-header-height: calc(60px + env(safe-area-inset-top, 0px)); --studio-local-height: 48px; }
  .studio-tour-page .public-site-header .public-header-inner { min-height: 60px; }
  .studio-local-nav-inner { width: calc(100% - 32px); }
  .studio-section-title,
  .studio-centered-copy h2,
  .studio-deep-heading h2,
  .studio-split-copy h2,
  .studio-final h2 { font-size: clamp(2.6rem, 7vw, 3.6rem); }
  .studio-highlight-story {
    height: 360px;
    padding: 24px;
    grid-template: minmax(0, 1fr) / minmax(190px, .72fr) minmax(0, 1fr);
    gap: 24px;
  }
  .studio-highlight-story h3 { font-size: clamp(2rem, 5vw, 3rem); }
  .studio-highlights,
  .studio-closer,
  .studio-deep-dive,
  .studio-deep-dive--files,
  .studio-deep-dive--hosting,
  .studio-plm-difference,
  .studio-final { padding-block: 64px; }
  .studio-highlight-story { width: 78vw; min-width: 78vw; height: 330px; }
  .studio-opening-statement { padding-block: 72px; }
  .studio-authority { padding-top: 72px; }
  .studio-authority h2 { font-size: clamp(3rem, 8vw, 4.2rem); }
  .studio-authority-lines { margin-top: 52px; gap: 22px; }
  .studio-authority-lines span { font-size: clamp(1.55rem, 4.4vw, 2.2rem); }
  .studio-system-composition { min-height: 370px; }
}

@media (max-width: 430px) {
  .studio-highlight-controls > div:last-child { display: none; }
  .studio-highlight-story { height: clamp(480px, 128vw, 510px); }
  .studio-closer-display { width: 100%; }
  .studio-system-studio { bottom: 8%; }
  .studio-site-mobile { width: 19%; right: 16px; top: 8px; padding: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-tour-reveal] { opacity: 1; transform: none; }
  .studio-highlights-viewport { scroll-snap-type: x proximity; }
  .studio-authority-lines span { color: rgba(244, 247, 247, .82); transform: none; }
}

.studio-local-actions { display: flex; align-items: center; gap: 10px; }
.studio-local-start {
  min-height: 30px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f3f3ef;
  color: #080b0d;
  font-size: .7rem;
  font-weight: 740;
  text-decoration: none;
}
@media (max-width: 760px) {
  .studio-local-actions .studio-local-signin { display: none; }
  .studio-local-start { padding: 0 11px; font-size: .65rem; }
}

/* Scalable Studio product surface for repeated product chapters. */
.studio-product-frame .studio-product-window {
  aspect-ratio: 16 / 10;
  background: #10161b;
}
.studio-product-frame .studio-window-topbar {
  height: 9.2%;
  min-height: 0;
  padding: 0 2.15cqw;
  gap: 1.2cqw;
}
.studio-product-frame .studio-window-brand { gap: .8cqw; font-size: clamp(7px, 1.05cqw, 14px); }
.studio-product-frame .studio-window-brand img { width: clamp(14px, 2.1cqw, 30px); height: clamp(14px, 2.1cqw, 30px); }
.studio-product-frame .studio-window-site {
  min-width: clamp(90px, 19cqw, 250px);
  min-height: 0;
  padding: .48cqw 1cqw;
  column-gap: 1cqw;
  border-radius: clamp(5px, .72cqw, 10px);
}
.studio-product-frame .studio-window-site small { font-size: clamp(4px, .53cqw, 8px); }
.studio-product-frame .studio-window-site b { font-size: clamp(6px, .82cqw, 11px); }
.studio-product-frame .studio-window-site svg { width: clamp(7px, .8cqw, 11px); }
.studio-product-frame .studio-window-tools { gap: .72cqw; }
.studio-product-frame .studio-window-tools i { width: clamp(9px, 1.8cqw, 25px); height: clamp(9px, 1.8cqw, 25px); border-radius: clamp(4px, .6cqw, 8px); }
.studio-product-frame .studio-window-tools b { width: clamp(12px, 2.1cqw, 29px); height: clamp(12px, 2.1cqw, 29px); border-radius: clamp(4px, .6cqw, 8px); font-size: clamp(5px, .62cqw, 9px); }
.studio-product-frame .studio-window-body {
  height: 90.8%;
  min-height: 0;
  grid-template-columns: 7.2% minmax(0, 1fr);
}
.studio-product-frame .studio-window-rail { padding: 1.55cqw .7cqw; gap: .58cqw; }
.studio-product-frame .studio-window-rail span { width: 4.2cqw; max-width: 54px; height: auto; aspect-ratio: 1; border-radius: clamp(4px, .65cqw, 9px); }
.studio-product-frame .studio-window-rail span.is-active { background: rgba(114,216,246,.09); color: var(--studio-tour-cyan); box-shadow: inset 2px 0 0 var(--studio-tour-cyan); }
.studio-product-frame .studio-window-rail svg { width: 45%; }
.studio-product-frame .studio-window-screens { min-height: 0; padding: 0; position: relative; overflow: hidden; }
.studio-product-frame .studio-window-screen {
  min-height: 0;
  padding: 3.05cqw 3.2cqw 2.45cqw;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity 260ms ease, transform 300ms var(--studio-tour-ease), visibility 0s linear 300ms;
}
.studio-product-window[data-story-direction="backward"] .studio-window-screen { transform: translate3d(0, -10px, 0); }
.studio-product-frame .studio-window-screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 35ms, 35ms, 0s; }
.studio-product-frame .studio-screen-heading { flex: 0 0 auto; gap: 2cqw; }
.studio-product-frame .studio-screen-heading small { margin-bottom: .45cqw; font-size: clamp(4px, .62cqw, 9px); }
.studio-product-frame .studio-screen-heading strong { font-size: clamp(12px, 2.05cqw, 29px); }
.studio-product-frame .studio-screen-heading p { margin-top: .55cqw; font-size: clamp(5px, .75cqw, 11px); }
.studio-product-frame :is(.studio-live-label, .studio-count-label) { min-height: 0; padding: .5cqw .85cqw; gap: .5cqw; font-size: clamp(4px, .62cqw, 9px); }
.studio-product-frame .studio-live-label i { width: .55cqw; min-width: 4px; height: auto; aspect-ratio: 1; }
.studio-product-frame .studio-progress-number { font-size: clamp(13px, 2.25cqw, 31px); }
.studio-product-frame .studio-faux-button { min-height: 0; padding: .58cqw .9cqw; border-radius: clamp(4px, .6cqw, 9px); font-size: clamp(4px, .62cqw, 9px); }
.studio-product-frame .studio-overview-grid {
  min-height: 0;
  margin-top: 2.1cqw;
  flex: 1 1 auto;
  grid-template-columns: 1.25fr .72fr .72fr;
  grid-template-rows: 1fr 1fr;
  gap: 1cqw;
}
.studio-product-frame .studio-overview-grid > div { min-height: 0; padding: 1.35cqw; border-radius: clamp(6px, 1cqw, 14px); }
.studio-product-frame .studio-overview-grid .studio-overview-lead { grid-row: 1 / 3; padding: 1.7cqw; }
.studio-product-frame .studio-overview-grid > div small { font-size: clamp(4px, .55cqw, 8px); }
.studio-product-frame .studio-overview-grid > div strong { margin-top: .55cqw; font-size: clamp(7px, 1.05cqw, 15px); }
.studio-product-frame .studio-overview-grid > div > span { margin-top: .35cqw; font-size: clamp(4px, .62cqw, 9px); }
.studio-product-frame .studio-overview-lead > strong { font-size: clamp(13px, 2.15cqw, 30px) !important; }
.studio-product-frame .studio-overview-lead > div { padding-top: 1.2cqw; }
.studio-activity-row {
  flex: 0 0 auto;
  margin-top: .75cqw;
  padding-top: .65cqw;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: .8cqw;
  border-top: 1px solid rgba(255,255,255,.065);
}
.studio-activity-row > small { color: rgba(226,234,236,.36); font-size: clamp(4px, .5cqw, 7px); font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.studio-activity-row > span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .42cqw; color: rgba(235,241,242,.66); font-size: clamp(4px, .55cqw, 8px); }
.studio-activity-row i { width: .45cqw; min-width: 3px; aspect-ratio: 1; border-radius: 50%; background: var(--studio-tour-cyan); }
.studio-activity-row em { color: rgba(226,234,236,.35); font-size: .9em; font-style: normal; }
.studio-product-frame :is(.studio-project-layout, .studio-request-layout, .studio-files-layout, .studio-health-layout) { min-height: 0; margin-top: 2.2cqw; flex: 1 1 auto; gap: 1.05cqw; }
.studio-product-frame :is(.studio-project-timeline, .studio-project-note, .studio-request-list, .studio-request-detail, .studio-folder-list, .studio-file-grid, .studio-health-score, .studio-health-list) { min-height: 0; padding: 1.25cqw; border-radius: clamp(6px, 1cqw, 14px); }
.studio-product-frame .studio-project-timeline span { min-height: 0; padding-left: 2.4cqw; }
.studio-product-frame .studio-project-timeline span i { width: .8cqw; min-width: 5px; height: auto; top: 50%; left: -.42cqw; transform: translateY(-50%); }
.studio-product-frame .studio-project-timeline b { font-size: clamp(5px, .72cqw, 10px); }
.studio-product-frame .studio-project-timeline small { margin-top: .25cqw; font-size: clamp(4px, .55cqw, 8px); }
.studio-product-frame :is(.studio-project-note strong, .studio-request-detail > strong) { margin-top: .75cqw; font-size: clamp(9px, 1.35cqw, 19px); }
.studio-product-frame :is(.studio-project-note > span, .studio-request-detail > p) { margin-top: .5cqw; font-size: clamp(4px, .6cqw, 9px); }
.studio-product-frame .studio-request-list { padding: .55cqw; }
.studio-product-frame .studio-request-list > span { min-height: 0; padding: .85cqw; grid-template-columns: .55cqw 1fr; column-gap: .65cqw; }
.studio-product-frame .studio-request-list b { font-size: clamp(5px, .65cqw, 9px); }
.studio-product-frame .studio-request-list small { margin-top: .2cqw; font-size: clamp(4px, .5cqw, 7px); }
.studio-product-frame .studio-request-steps { margin-top: auto; padding-top: 1.4cqw; }
.studio-product-frame .studio-request-steps span { padding-top: .55cqw; font-size: clamp(4px, .5cqw, 7px); }
.studio-conversation { margin-top: .7cqw; display: grid; grid-template-columns: repeat(2,1fr); gap: .55cqw; }
.studio-conversation > span { min-width: 0; padding: .5cqw; display: grid; grid-template-columns: auto 1fr; gap: .12cqw .45cqw; border: 1px solid rgba(255,255,255,.055); border-radius: .55cqw; }
.studio-conversation i { width: 1.45cqw; aspect-ratio: 1; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 50%; background: rgba(114,216,246,.1); color: var(--studio-tour-cyan); font-size: clamp(3px,.38cqw,6px); font-style: normal; font-weight: 760; }
.studio-conversation b { overflow: hidden; font-size: clamp(4px,.55cqw,8px); text-overflow: ellipsis; white-space: nowrap; }
.studio-conversation small { color: rgba(226,234,236,.38); font-size: clamp(3px,.44cqw,6px); }
.studio-product-frame .studio-folder-list { padding: .55cqw; }
.studio-product-frame .studio-folder-list span { min-height: 0; padding: .7cqw; font-size: clamp(4px,.6cqw,9px); }
.studio-product-frame .studio-file-grid { padding: .75cqw; grid-template-columns: repeat(3, 1fr); gap: .55cqw; }
.studio-product-frame .studio-file-grid span { min-height: 0; padding: .75cqw; border-radius: .65cqw; }
.studio-product-frame .studio-file-grid i { width: 2.25cqw; height: auto; aspect-ratio: 1; border-radius: .48cqw; font-size: clamp(3px,.45cqw,6px); }
.studio-product-frame .studio-file-grid b { font-size: clamp(4px,.58cqw,8px); }
.studio-product-frame .studio-file-grid small { margin-top: .2cqw; font-size: clamp(3px,.45cqw,6px); }
.studio-product-frame .studio-health-score > span { width: 9cqw; max-width: 125px; }
.studio-product-frame .studio-health-score b { font-size: clamp(10px,1.45cqw,20px); }
.studio-product-frame .studio-health-list { padding: .4cqw 1cqw; }
.studio-product-frame .studio-health-list span { min-height: 0; }
.studio-product-frame .studio-health-list b { font-size: clamp(4px,.62cqw,9px); }
.studio-product-frame .studio-health-list em { font-size: clamp(4px,.55cqw,8px); }
.studio-product-frame .studio-health-list small { margin-top: .12cqw; font-size: clamp(3px,.46cqw,7px); }

/* Mobile-native Studio product surface. Desktop product geometry remains locked. */
@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
  .studio-product-frame .studio-product-window { aspect-ratio: 5 / 4; }
  .studio-product-frame .studio-window-topbar { height: 12.5%; padding: 0 3cqw; grid-template-columns: 1fr auto; gap: 2cqw; }
  .studio-product-frame .studio-window-tools { display: none; }
  .studio-product-frame .studio-window-brand { gap: 1.2cqw; font-size: clamp(8px, 2.2cqw, 11px); }
  .studio-product-frame .studio-window-brand img { width: clamp(18px, 5cqw, 25px); height: clamp(16px, 4cqw, 22px); }
  .studio-product-frame .studio-window-site { min-width: 0; padding: 1cqw 1.8cqw; border-radius: 1.4cqw; }
  .studio-product-frame .studio-window-site small { display: none; }
  .studio-product-frame .studio-window-site b { font-size: clamp(7px, 1.9cqw, 10px); }
  .studio-product-frame .studio-window-site svg { width: clamp(7px, 2cqw, 10px); grid-row: 1; }
  .studio-product-frame .studio-window-body { height: 87.5%; grid-template-columns: 11.5% minmax(0, 1fr); }
  .studio-product-frame .studio-window-rail { padding: 3cqw 1.2cqw; gap: 1.2cqw; }
  .studio-product-frame .studio-window-rail span { width: 7.5cqw; border-radius: 1.5cqw; }
  .studio-product-frame .studio-window-screens { overflow: hidden; }
  .studio-product-frame .studio-window-screen { padding: 4.2cqw 4.4cqw 3.6cqw; }
  .studio-product-frame .studio-screen-heading { gap: 2cqw; }
  .studio-product-frame .studio-screen-heading small { margin-bottom: .8cqw; font-size: clamp(7px, 1.7cqw, 9px); }
  .studio-product-frame .studio-screen-heading strong { font-size: clamp(15px, 4.2cqw, 21px); }
  .studio-product-frame .studio-screen-heading p { display: none; }
  .studio-product-frame :is(.studio-live-label, .studio-count-label) { padding: 1cqw 1.4cqw; font-size: clamp(6px, 1.5cqw, 8px); }
  .studio-product-frame .studio-progress-number { font-size: clamp(16px, 4.8cqw, 24px); }
  .studio-product-frame .studio-faux-button { padding: 1cqw 1.5cqw; font-size: clamp(6px, 1.5cqw, 8px); }
  .studio-product-frame .studio-overview-grid { margin-top: 3.2cqw; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; gap: 1.7cqw; }
  .studio-product-frame .studio-overview-grid .studio-overview-lead { grid-row: 1 / 3; padding: 2.6cqw; }
  .studio-product-frame .studio-overview-grid > div { padding: 2.2cqw; border-radius: 1.8cqw; }
  .studio-product-frame .studio-overview-grid > div:nth-child(4) { display: none; }
  .studio-product-frame .studio-overview-grid > div small { font-size: clamp(6px, 1.45cqw, 8px); }
  .studio-product-frame .studio-overview-grid > div strong { font-size: clamp(8px, 2.2cqw, 12px); }
  .studio-product-frame .studio-overview-grid > div > span { font-size: clamp(6px, 1.5cqw, 8px); }
  .studio-product-frame .studio-overview-lead > strong { font-size: clamp(14px, 3.8cqw, 19px) !important; }
  .studio-product-frame .studio-activity-row { display: none; }
  .studio-product-frame :is(.studio-project-layout, .studio-request-layout, .studio-files-layout, .studio-health-layout) { margin-top: 3.2cqw; gap: 1.7cqw; }
  .studio-product-frame :is(.studio-project-timeline, .studio-project-note, .studio-request-list, .studio-request-detail, .studio-folder-list, .studio-file-grid, .studio-health-score, .studio-health-list) { padding: 2cqw; border-radius: 1.8cqw; }
  .studio-product-frame .studio-project-layout { grid-template-columns: .9fr 1.1fr; }
  .studio-product-frame .studio-project-timeline span { padding-left: 3.2cqw; }
  .studio-product-frame .studio-project-timeline b { font-size: clamp(7px, 1.8cqw, 9px); }
  .studio-product-frame .studio-project-timeline small { font-size: clamp(6px, 1.4cqw, 8px); }
  .studio-product-frame :is(.studio-project-note strong, .studio-request-detail > strong) { font-size: clamp(10px, 2.7cqw, 14px); }
  .studio-product-frame :is(.studio-project-note > span, .studio-request-detail > p) { font-size: clamp(6px, 1.5cqw, 8px); }
  .studio-product-frame .studio-request-layout { grid-template-columns: .62fr 1.38fr; }
  .studio-product-frame .studio-request-list > span:nth-child(n + 2) { display: none; }
  .studio-product-frame .studio-request-list b { font-size: clamp(7px, 1.6cqw, 9px); }
  .studio-product-frame .studio-request-list small { font-size: clamp(6px, 1.35cqw, 7px); }
  .studio-product-frame .studio-conversation { grid-template-columns: 1fr; }
  .studio-product-frame .studio-conversation > span:last-child { display: none; }
  .studio-product-frame .studio-folder-list { display: none; }
  .studio-product-frame .studio-files-layout { grid-template-columns: 1fr; }
  .studio-product-frame .studio-file-grid { padding: 1.3cqw; grid-template-columns: repeat(2, 1fr); gap: 1.2cqw; }
  .studio-product-frame .studio-file-grid span { padding: 1.4cqw; }
  .studio-product-frame .studio-file-grid span:nth-child(n + 5) { display: none; }
  .studio-product-frame .studio-file-grid i { width: 5.6cqw; font-size: clamp(5px, 1.2cqw, 7px); }
  .studio-product-frame .studio-file-grid b { font-size: clamp(7px, 1.7cqw, 9px); }
  .studio-product-frame .studio-file-grid small { font-size: clamp(6px, 1.3cqw, 7px); }
  .studio-product-frame .studio-health-score { display: none; }
  .studio-product-frame .studio-health-layout { grid-template-columns: 1fr; }
  .studio-product-frame .studio-health-list { padding: 1cqw 1.8cqw; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2cqw; }
  .studio-product-frame .studio-health-list span { min-height: 0; padding-block: 1.25cqw; }
  .studio-product-frame .studio-health-list b { font-size: clamp(7px, 1.6cqw, 9px); }
  .studio-product-frame .studio-health-list em { font-size: clamp(6px, 1.4cqw, 8px); }
  .studio-product-frame .studio-health-list small { font-size: clamp(5px, 1.2cqw, 7px); }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .studio-product-frame .studio-product-window { aspect-ratio: 16 / 9; }
}