@font-face {
  font-family: Inter;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #101114;
  --surface: #16171b;
  --fg: #f0f0f1;
  --muted: #a5a6ad;
  --subtle: #777982;
  --line: rgba(255, 255, 255, 0.105);
  --accent: #c6c1ef;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 950px;
  background: radial-gradient(
    ellipse at 12% 5%,
    rgba(141, 130, 190, 0.075),
    transparent 62%
  );
  pointer-events: none;
  z-index: -1;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
button {
  color: inherit;
}
img {
  max-width: 100%;
}
.wrap {
  width: min(1380px, calc(100% - 112px));
  margin-inline: auto;
}
.skip {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}
.site-header {
  position: relative;
  width: min(1480px, calc(100% - 80px));
  height: 88px;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: auto;
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 580;
  letter-spacing: -0.8px;
}
.wordmark img {
  object-fit: contain;
  transform: scale(1.5);
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: auto;
  font-size: 13px;
  color: var(--muted);
}
.site-header nav a {
  transition: color 140ms ease;
}
.site-header nav a:hover {
  color: var(--fg);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 13px 19px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background 160ms ease,
    transform 160ms var(--ease),
    box-shadow 160ms ease;
}
.button:hover {
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(0) scale(0.985);
}
.button.primary {
  background: #e9e8ec;
  color: #1c1d21;
  border-color: transparent;
  box-shadow: 0 1px 1px #fff3 inset;
}
.button.primary:hover {
  background: #fff;
  box-shadow: 0 3px 20px #ffffff0d;
}
.button.small {
  padding: 9px 14px;
  font-size: 12px;
}
.text-link {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-weight: 500;
  transition: color 160ms;
}
.text-link:hover {
  color: var(--accent);
}
.text-link span {
  transition: transform 180ms var(--ease);
}
.text-link:hover span {
  transform: translate(2px, -1px);
}
.mobile-menu {
  display: none;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav {
  position: absolute;
  z-index: 9;
  top: 78px;
  left: 20px;
  right: 20px;
  background: #1b1c21;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: grid;
}
.mobile-nav a {
  padding: 13px;
}
.hero {
  padding-top: 83px;
}
.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.1px;
}
.status-dot {
  width: 6px;
  height: 6px;
  background: #bab6db;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.hero-copy {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: end;
  gap: 52px;
  margin: 23px 0 67px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: clamp(60px, 7.15vw, 104px);
  line-height: 1.015;
  letter-spacing: -0.063em;
  font-weight: 530;
}
h1 > span {
  color: #898b95;
}
.hero-aside {
  padding-bottom: 6px;
}
.hero-aside p {
  font-size: 19px;
  line-height: 1.65;
  color: #c2c3cb;
  letter-spacing: -0.35px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin: 24px 0 12px;
}
.fine {
  font-size: 11px;
  color: #93959f;
}
.product-stage {
  border: 1px solid #ffffff1e;
  border-radius: 12px;
  overflow: hidden;
  background: #131418;
  box-shadow:
    0 30px 90px #0005,
    0 1px 0 #ffffff0a inset;
  scroll-margin-top: 24px;
}
.stage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
  height: 58px;
  background: #16171b;
}
.stage-tabs {
  display: flex;
  gap: 24px;
  align-self: stretch;
}
.stage-tabs button {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #868892;
  padding: 0 3px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  transition:
    color 150ms,
    border-color 180ms;
}
.stage-tabs button span {
  font-size: 13px;
}
.stage-tabs button[aria-selected="true"] {
  border-color: #e2e0ed;
  color: #e2e0ed;
}
.stage-tabs button:hover {
  color: white;
}
.stage-expand {
  font-size: 11px;
  color: #a4a6ae;
  display: flex;
  gap: 14px;
}
.preview {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 448px;
}
.preview-nav {
  position: relative;
  background: #111216;
  border-right: 1px solid var(--line);
  padding: 23px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #8c8e99;
}
.preview-nav > span:not(.preview-brand):not(.preview-workspace) {
  padding: 9px 12px;
  border-radius: 5px;
  display: flex;
  gap: 12px;
}
.preview-nav b {
  font-weight: 450;
}
.preview-nav .selected {
  background: #ffffff08;
  color: #e3e3e8;
}
.preview-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f1f4;
  font-size: 15px;
  font-weight: 550;
  padding: 0 12px;
}
.preview-brand img {
  width: 21px;
  transform: scale(1.7);
}
.preview-workspace {
  padding: 0 12px 20px;
  color: #696c78;
  font-size: 10px;
}
.preview-nav .preview-nav-bottom {
  margin-top: auto;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #7d7f89;
}
.preview-main {
  padding: 29px 35px 0;
  background: radial-gradient(ellipse at 0 0, #b2a2d809, transparent 65%);
  min-width: 0;
}
.preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.kicker {
  display: block;
  font-size: 9px;
  color: #878995;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}
.preview-heading h2 {
  font-size: 23px;
  font-weight: 540;
  letter-spacing: -0.7px;
}
.preview-period {
  font-size: 10px;
  color: #bcbfc9;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 5px;
}
.preview-stats {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
  padding: 25px 0 29px;
}
.preview-stats > div {
  display: grid;
  gap: 7px;
}
.preview-stats > div > span {
  font-size: 10px;
  color: #b5b6c0;
}
.preview-stats strong {
  font-weight: 500;
  font-size: 29px;
  letter-spacing: -1px;
}
.preview-stats strong span {
  color: #7e808c;
  font-size: 0.65em;
}
.preview-stats small {
  font-size: 9px;
  color: #7c7f8b;
}
.chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 17px;
}
.chart-heading strong {
  font-size: 10px;
  font-weight: 530;
}
.legend {
  display: flex;
  gap: 13px;
  font-size: 8px;
  color: #a2a4af;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
}
.azure {
  background: #779fc7;
}
.gcp {
  background: #82a387;
}
.otc {
  background: #b084a5;
}
.sample-chart {
  position: relative;
  height: 133px;
  padding-left: 28px;
}
.chart-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 8px;
  color: #6f717c;
}
.chart-grid span {
  display: flex;
  gap: 15px;
  align-items: center;
}
.chart-grid span:after {
  content: "";
  height: 1px;
  background: #ffffff06;
  flex: 1;
}
.bars {
  position: relative;
  height: 100%;
  display: flex;
  gap: 4px;
  align-items: end;
  padding-top: 7px;
}
.bars i {
  flex: 1;
  height: var(--height);
  display: block;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    to top,
    #799dc8 0 55%,
    #88a48c 55% 85%,
    #b187ac 85%
  );
  opacity: 0.78;
  transition: opacity 150ms;
}
.bars i:hover {
  opacity: 1;
}
.chart-axis {
  padding-left: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #747784;
  margin-top: 9px;
}
.preview-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #898b97;
  margin-top: 25px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.preview-bottom > span {
  display: flex;
  gap: 7px;
  align-items: center;
}
.preview-bottom .status-dot {
  width: 4px;
  height: 4px;
}
.preview-bottom a {
  color: #d2d1dc;
}
.stage-caption {
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  color: #858894;
  background: #15161a;
}
.stage-caption .text-link {
  font-size: 10px;
}
.provider-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 43px;
  color: #b6b8c0;
  font-size: 13px;
}
.provider-strip > span {
  max-width: 150px;
  font-size: 11px;
  color: #858893;
}
.provider-strip > div {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.provider-strip img {
  object-fit: contain;
  opacity: 0.8;
}
.intro {
  padding: 156px 0 91px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 90px;
}
.intro .eyebrow {
  grid-column: 1/-1;
  margin-bottom: 25px;
}
.intro h2 {
  font-size: clamp(38px, 3.8vw, 57px);
  line-height: 1.15;
  letter-spacing: -2.3px;
  font-weight: 480;
}
.intro h2 span {
  color: #7f828c;
}
.intro p {
  align-self: end;
  max-width: 410px;
  font-size: 17px;
  line-height: 1.8;
  color: #a8aab5;
}
.chapter {
  padding: 95px 0;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 100px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.chapter.reverse .chapter-copy {
  order: 2;
}
.chapter-number {
  font-size: 11px;
  color: #9c99b7;
}
.chapter-copy h2 {
  font-size: 43px;
  line-height: 1.13;
  letter-spacing: -1.9px;
  font-weight: 510;
  margin: 23px 0;
}
.chapter-copy p {
  font-size: 16px;
  color: #a1a3af;
  line-height: 1.8;
  max-width: 410px;
}
.quiet-list {
  padding: 0;
  list-style: none;
  margin: 26px 0 32px;
  color: #bdbec7;
  font-size: 12px;
  display: grid;
  gap: 13px;
}
.quiet-list li:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #74727f;
  vertical-align: middle;
  margin-right: 12px;
}
.detail-art,
.allocation-art,
.finding-art {
  border: 1px solid #ffffff12;
  background: linear-gradient(145deg, #1c1d24, #16171b 75%);
  border-radius: 10px;
  box-shadow: 0 20px 50px #0002;
  overflow: hidden;
  min-width: 0;
  transform: translateZ(0);
}
.art-label {
  padding: 19px 24px;
  border-bottom: 1px solid #ffffff09;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #c5c6cf;
  gap: 8px;
}
.art-label > span:last-child {
  font-size: 10px;
  color: #888b98;
}
.scope-path {
  margin: 25px 24px 15px;
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: #b4b5c2;
  flex-wrap: wrap;
}
.scope-path i {
  font-style: normal;
  color: #555964;
}
.cost-list {
  padding: 0 24px 25px;
  display: grid;
  gap: 8px;
}
.cost-list > div {
  position: relative;
  padding: 16px 0 15px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  align-items: center;
}
.cost-list > div > span {
  display: flex;
  gap: 12px;
  align-items: center;
}
.service-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff12;
  border-radius: 6px;
  color: #b9b8cc;
  font-size: 13px;
  font-style: normal;
}
.cost-list strong {
  font-weight: 440;
  color: #d4d5de;
  font-variant-numeric: tabular-nums;
}
.cost-list b {
  position: absolute;
  bottom: 2px;
  left: 37px;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    #9490ae var(--amount),
    #ffffff06 var(--amount)
  );
  border-radius: 3px;
}
.art-foot {
  padding: 16px 24px;
  font-size: 10px;
  color: #878b98;
  border-top: 1px solid #ffffff09;
  display: flex;
  align-items: center;
  gap: 9px;
}
.allocation-group {
  padding: 21px 23px 8px;
}
.allocation-group > div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
}
.allocation-group strong {
  font-weight: 530;
}
.allocation-group b {
  margin-left: auto;
  font-weight: 550;
  white-space: nowrap;
}
.folder {
  color: #b6afcc;
  font-size: 18px;
}
.allocation-group p {
  display: flex;
  justify-content: space-between;
  margin: 17px 0 15px 28px;
  color: #9498a6;
  font-size: 10px;
  gap: 12px;
}
.allocation-total {
  margin: 10px 23px 24px;
  padding-top: 17px;
  border-top: 1px solid #ffffff14;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #c0c2cd;
}
.allocation-total strong {
  font-weight: 540;
}
.mini-check {
  color: #97b1a0;
  border: 1px solid #97b1a040;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.outline-badge {
  border: 1px solid #b9a57836;
  padding: 2px 7px;
  color: #c2b290 !important;
  border-radius: 4px;
}
.finding-art {
  padding-bottom: 22px;
}
.disk-symbol {
  position: relative;
  width: 53px;
  height: 56px;
  margin: 30px 26px 20px;
}
.disk-symbol span {
  position: absolute;
  left: 0;
  width: 53px;
  height: 26px;
  border: 1px solid #757585;
  border-radius: 50%;
  background: #23242d;
}
.disk-symbol span:nth-child(2) {
  top: 13px;
}
.disk-symbol span:nth-child(3) {
  top: 26px;
}
.finding-art h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 0 26px 5px;
}
.resource-id {
  margin: 0 26px;
  font-size: 11px;
  color: #858896;
  font-family: monospace;
}
.finding-art dl {
  margin: 24px 26px 20px;
  font-size: 11px;
  display: grid;
  gap: 14px;
}
.finding-art dl div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.finding-art dt {
  color: #858997;
}
.finding-art dd {
  margin: 0;
  color: #b5b9c6;
}
.finding-note {
  margin: 0 26px;
  padding: 11px 13px;
  background: #ffffff03;
  border: 1px solid #ffffff07;
  border-radius: 5px;
  font-size: 10px;
  color: #9a9eac;
}
.ownership {
  margin-top: 35px;
  padding: 100px 0;
  background: linear-gradient(120deg, #16161d, #141519 55%, #111216);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.ownership-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 100px;
}
.ownership .eyebrow {
  grid-column: 1/-1;
  margin-bottom: 25px;
}
.ownership h2 {
  font-size: 46px;
  font-weight: 460;
  line-height: 1.2;
  letter-spacing: -2px;
}
.ownership p {
  font-size: 16px;
  line-height: 1.8;
  color: #a6a8b4;
  max-width: 420px;
}
.ownership .text-link {
  margin-top: 26px;
}
.faq {
  padding: 115px 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 100px;
}
.faq h2 {
  font-size: 37px;
  letter-spacing: -1.5px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 22px;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0 0 18px;
  margin-bottom: 18px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary span {
  font-size: 22px;
  color: #858894;
  transition: transform 170ms var(--ease);
  font-weight: 300;
}
.faq details[open] summary span {
  transform: rotate(45deg);
}
.faq details p {
  font-size: 13px;
  line-height: 1.85;
  color: #9c9faa;
  padding-top: 15px;
  max-width: 530px;
  animation: detail-in 180ms var(--ease);
}
.faq details > a {
  display: inline-block;
  font-size: 12px;
  margin-top: 13px;
  color: #c6c1df;
}
.closing {
  text-align: center;
  padding: 75px 0 115px;
  border-top: 1px solid var(--line);
}
.closing > img {
  object-fit: contain;
  transform: scale(1.5);
  margin-bottom: 22px;
  opacity: 0.8;
}
.closing h2 {
  font-size: clamp(40px, 5vw, 65px);
  line-height: 1.1;
  font-weight: 490;
  letter-spacing: -2.8px;
}
.closing p {
  font-size: 15px;
  color: #9497a3;
  margin: 21px 0 27px;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 44px;
  padding-bottom: 50px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.site-footer > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}
.site-footer > div > span:not(.fine) {
  color: #e0e0e5;
  font-size: 11px;
  margin-bottom: 9px;
}
.site-footer > div > a:not(.wordmark) {
  color: #9699a5;
  font-size: 11px;
}
.site-footer > div > a:hover {
  color: #eeedf4;
}
.site-footer p {
  font-size: 11px;
  color: #a1a3ae;
}
.site-footer .fine {
  font-size: 10px;
  margin-top: 15px;
}
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
}
.motion-ready .reveal.visible {
  opacity: 1;
  transform: none;
}
.document {
  padding: 90px 0 110px;
  max-width: 900px;
}
.document .eyebrow {
  margin-bottom: 23px;
}
.document h1 {
  font-size: 62px;
  line-height: 1.1;
  letter-spacing: -3px;
  margin-bottom: 30px;
}
.document .lead {
  font-size: 21px;
  color: #b0b3bf;
  line-height: 1.7;
  margin-bottom: 60px;
  max-width: 720px;
}
.document h2 {
  font-size: 27px;
  letter-spacing: -0.8px;
  margin: 44px 0 17px;
  font-weight: 530;
}
.document h3 {
  font-size: 18px;
  margin: 27px 0 12px;
  font-weight: 540;
}
.document p,
.document li {
  font-size: 15px;
  color: #a7aab7;
  line-height: 1.9;
}
.document p + p {
  margin-top: 15px;
}
.document ul,
.document ol {
  padding-left: 22px;
}
.document a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #ccc8e4;
}
.document .notice {
  border: 1px solid #c7b58730;
  background: #c7b58707;
  padding: 20px 24px;
  border-radius: 7px;
  font-size: 14px;
  color: #c9bfa7;
  margin: 25px 0;
}
.document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 24px 0;
}
.document th {
  text-align: left;
  font-weight: 570;
  color: #d5d6df;
}
.document th,
.document td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.document td {
  color: #a7aab6;
  line-height: 1.65;
}
.table-scroll {
  overflow: auto;
}
.demo-frame {
  width: 100%;
  height: 650px;
  border: 0;
  background: #14151a;
}
.preview-switch {
  animation: detail-in 200ms var(--ease);
}
@keyframes detail-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 1600px) {
  .hero {
    padding-top: 100px;
  }
  .hero-copy {
    margin-bottom: 80px;
  }
}
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .site-header {
    width: calc(100% - 56px);
  }
  .hero-copy {
    gap: 35px;
    grid-template-columns: 1fr 1fr;
  }
  h1 {
    font-size: 76px;
  }
  .hero-aside p {
    font-size: 16px;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .hero-actions .button {
    font-size: 12px;
    padding: 12px 14px;
    gap: 12px;
  }
  .preview {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .preview-main {
    padding: 25px 24px 0;
  }
  .preview-stats strong {
    font-size: 24px;
  }
  .preview-stats {
    gap: 12px;
  }
  .provider-strip {
    gap: 18px;
    font-size: 11px;
  }
  .provider-strip > div {
    gap: 7px;
  }
  .chapter {
    gap: 55px;
  }
  .chapter-copy h2 {
    font-size: 37px;
  }
  .intro {
    gap: 45px;
  }
  .intro h2 {
    font-size: 42px;
  }
  .intro p {
    font-size: 15px;
  }
  .ownership-inner {
    gap: 50px;
  }
  .ownership h2 {
    font-size: 37px;
  }
  .faq {
    gap: 55px;
  }
  .site-header nav {
    gap: 22px;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .site-header {
    width: calc(100% - 40px);
    height: 74px;
    gap: 19px;
  }
  .site-header nav {
    display: none;
  }
  .site-header > .button {
    margin-left: auto;
  }
  .wordmark {
    font-size: 20px;
  }
  .mobile-menu {
    display: grid;
    width: 24px;
    gap: 5px;
    background: none;
    border: 0;
    padding: 4px 0;
  }
  .mobile-menu span {
    display: block;
    height: 1px;
    background: #bfc0c9;
    width: 19px;
    transition: transform 160ms;
  }
  .mobile-menu[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .mobile-menu[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  .hero {
    padding-top: 54px;
  }
  .hero-copy {
    display: block;
    margin: 23px 0 40px;
  }
  .hero-aside {
    padding-top: 29px;
  }
  .hero-aside p {
    font-size: 16px;
    max-width: 340px;
  }
  .desktop-only {
    display: none;
  }
  h1 {
    font-size: clamp(60px, 12vw, 88px);
  }
  .hero-actions {
    margin-top: 23px;
    gap: 23px;
  }
  .hero-actions .button {
    padding: 13px 15px;
  }
  .hero .eyebrow {
    font-size: 11px;
  }
  .stage-toolbar {
    height: 50px;
    padding: 0 15px;
  }
  .stage-tabs {
    gap: 19px;
  }
  .stage-tabs button {
    font-size: 9px;
    gap: 6px;
  }
  .stage-tabs button span {
    font-size: 11px;
  }
  .stage-expand {
    font-size: 0;
    gap: 0;
  }
  .stage-expand span {
    font-size: 17px;
  }
  .preview {
    display: block;
    min-height: 355px;
  }
  .preview-nav {
    display: none;
  }
  .preview-main {
    padding: 23px 19px 0;
  }
  .preview-heading h2 {
    font-size: 21px;
  }
  .preview-stats {
    grid-template-columns: 1.2fr 1fr;
    padding: 22px 0;
  }
  .preview-stats > div:last-child {
    display: none;
  }
  .preview-stats strong {
    font-size: 27px;
  }
  .preview-stats > div > span {
    font-size: 9px;
  }
  .chart-heading {
    flex-wrap: wrap;
    gap: 10px;
  }
  .legend {
    gap: 10px;
  }
  .sample-chart {
    height: 110px;
  }
  .bars {
    gap: 3px;
  }
  .preview-bottom {
    font-size: 8px;
    margin-top: 22px;
    padding: 14px 0;
    gap: 12px;
  }
  .preview-bottom > span {
    max-width: 190px;
  }
  .preview-bottom > a {
    white-space: nowrap;
  }
  .stage-caption {
    padding: 12px 15px;
    font-size: 8px;
    gap: 10px;
    align-items: center;
  }
  .stage-caption .text-link {
    font-size: 9px;
    gap: 7px;
  }
  .provider-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 21px 15px;
    margin-top: 30px;
    font-size: 10px;
  }
  .provider-strip > span {
    font-size: 10px;
  }
  .provider-strip img {
    width: 20px;
    height: 19px;
  }
  .intro {
    padding: 90px 0 52px;
    display: block;
  }
  .intro .eyebrow {
    font-size: 11px;
    margin-bottom: 20px;
  }
  .intro h2 {
    font-size: 37px;
    letter-spacing: -1.5px;
  }
  .intro p {
    margin-top: 24px;
    font-size: 15px;
  }
  .chapter {
    padding: 58px 0;
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: stretch;
  }
  .chapter.reverse .chapter-copy {
    order: 0;
  }
  .chapter-copy h2 {
    font-size: 36px;
    margin: 19px 0;
  }
  .chapter-copy p {
    font-size: 15px;
  }
  .quiet-list {
    font-size: 11px;
    margin: 21px 0 25px;
  }
  .art-label {
    padding: 17px 19px;
  }
  .allocation-group {
    padding: 18px 18px 8px;
  }
  .allocation-group > div {
    font-size: 10px;
  }
  .allocation-group p {
    font-size: 9px;
    margin-left: 21px;
  }
  .allocation-total {
    margin-inline: 18px;
  }
  .ownership {
    padding: 60px 0;
    margin-top: 20px;
  }
  .ownership-inner {
    display: block;
  }
  .ownership h2 {
    font-size: 35px;
    letter-spacing: -1.5px;
  }
  .ownership p {
    font-size: 15px;
    margin-top: 25px;
  }
  .ownership .eyebrow {
    font-size: 11px;
  }
  .faq {
    display: block;
    padding: 75px 0 55px;
  }
  .faq h2 {
    font-size: 32px;
    margin: 19px 0 35px;
  }
  .faq summary {
    font-size: 13px;
  }
  .faq details p {
    font-size: 13px;
  }
  .closing {
    padding: 55px 0 70px;
  }
  .closing h2 {
    font-size: 42px;
    letter-spacing: -2px;
  }
  .closing p {
    font-size: 13px;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
    gap: 38px 25px;
  }
  .site-footer > div:first-child {
    grid-column: 1/-1;
  }
  .site-footer > div {
    gap: 12px;
  }
  .document {
    padding: 55px 0 70px;
  }
  .document h1 {
    font-size: 45px;
    letter-spacing: -2px;
  }
  .document .lead {
    font-size: 18px;
    margin-bottom: 35px;
  }
  .document th,
  .document td {
    min-width: 160px;
    padding: 13px 10px;
  }
  .demo-frame {
    height: 640px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .motion-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Editorial light, individual reveals, and the real embedded workspace. */
:root {
  --stream-duration: 560ms;
  --stream-distance: 24px;
  --stream-blur: 3px;
  --stream-step: 40ms;
  --pearl: #eeedf0;
  --ink: #24232c;
  --ink-muted: #585660;
}
body { overflow-x: clip; }
.hero { position: relative; isolation: isolate; }
.hero-ambient {
  position: absolute;
  z-index: -1;
  inset: -175px -55px auto;
  height: 940px;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(122deg, transparent 23%, #b5a9e51a 36%, #e7dfff12 36.2%, transparent 53%),
    radial-gradient(ellipse at 22% 13%, #8d79d52b, transparent 54%);
  mask-image:
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(#000 38%, transparent 94%);
  mask-composite: intersect;
}
.hero-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#c8c0ec09 1px, transparent 1px),
    linear-gradient(90deg, #c8c0ec09 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at 25% 30%, #000, transparent 65%);
  transform: skewY(-14deg) translateY(-90px);
}
.hero-ambient::after {
  content: "";
  position: absolute;
  inset: -120px;
  background: linear-gradient(122deg, transparent 39%, #d8d0f82b 47%, transparent 56%);
  opacity: .5;
}
.motion-ready .hero-ambient::after {
  animation: ambient-arrival 4s var(--ease) 1 both;
}
@keyframes ambient-arrival {
  from { opacity: 0; transform: translate(-70px, -25px); }
  to { opacity: .5; transform: translate(0, 0); }
}
h1 > span {
  color: #bbb6ce;
  text-shadow: 0 0 64px #b9a7ef18;
}
.hero > .eyebrow { color: #b4b2c0; }
.product-stage {
  position: relative;
  border-color: #c5b8ed38;
  box-shadow: 0 32px 100px #0006, 0 0 80px #9280d00a, 0 1px 0 #e8dfff1f inset;
}
.live-workspace { position: relative; background: #121213; }
.workspace-frame {
  display: block;
  width: 100%;
  height: 680px;
  border: 0;
  background: #121213;
  color-scheme: dark light;
}
.workspace-loading {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background: #1b1c1eee;
  color: #c8c7d2;
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}
.workspace-loading[hidden] { display: none; }
.workspace-loading a { text-decoration: underline; text-underline-offset: 4px; pointer-events: auto; }
.preview-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #d2d0dc;
  font-size: 12px;
  white-space: nowrap;
}
.preview-live .status-dot { background: #9bccb1; box-shadow: 0 0 0 4px #9bccb10b; }
.stage-toolbar { gap: 18px; }
.stage-toolbar .stage-expand { margin-left: auto; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #ffffff26;
  border-radius: 5px;
  background: #202127;
  color: #c9c7d4;
  font-size: 11px;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms;
}
.motion-toggle:hover { background: #2b2b34; color: #fff; }
.motion-toggle svg { width: 12px; height: 12px; }
.motion-toggle[hidden] { display: none; }
body > .motion-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 15;
  background: #22232bed;
  box-shadow: 0 4px 20px #0003;
  backdrop-filter: blur(10px);
}
.stage-caption { color: #a1a2ad; font-size: 11px; gap: 20px; }
.stage-caption .text-link { font-size: 11px; }
.intro h2 span { color: #a4a0b4; }
.chapter { perspective: 1600px; }
.detail-art, .allocation-art, .finding-art {
  position: relative;
  isolation: isolate;
  border-color: #cec2ef29;
  background:
    linear-gradient(135deg, #b8a5e717, transparent 43%),
    linear-gradient(165deg, #22222c, #16171c 74%);
  box-shadow: 0 35px 70px -24px #0009, 0 1px 0 #f4eaff14 inset;
  rotate: y -3deg;
  transition: rotate 600ms var(--ease), box-shadow 600ms var(--ease);
}
.allocation-art {
  rotate: y 3deg;
  background:
    linear-gradient(215deg, #dfc8a519, transparent 55%),
    linear-gradient(165deg, #22212a, #17171b 74%);
}
.finding-art {
  background:
    radial-gradient(ellipse at 50% 35%, #8f77bc20, transparent 67%),
    linear-gradient(165deg, #22222b, #17171d 74%);
}
.detail-art::before, .allocation-art::before, .finding-art::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d0c0f3a6, transparent);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .detail-art:hover, .allocation-art:hover, .finding-art:hover {
    rotate: y 0deg;
    box-shadow: 0 38px 75px -24px #000b, 0 1px 0 #f4eaff26 inset;
  }
}
.art-label > span:last-child, .art-foot, .finding-art dt { color: #a6a5b5; }
.cost-list b { background: linear-gradient(to right, #b3a6d4 var(--amount), #ffffff09 var(--amount)); }
.ownership {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pearl);
  color: var(--ink);
  border-color: #fff;
  padding-block: 112px;
}
.ownership::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 18%, #d4cce962, transparent 62%),
    repeating-linear-gradient(123deg, transparent 0 136px, #6560720b 137px, transparent 138px);
  pointer-events: none;
}
.ownership .eyebrow, .ownership p { color: var(--ink-muted); }
.ownership .text-link { color: #4c406c; }
.ownership .text-link:hover { color: #272132; }
.ownership :is(a, button):focus-visible { outline-color: #59458a; }
.ownership h2 { font-weight: 510; }
.orbital-art {
  display: block;
  position: relative;
  grid-column: 1 / -1;
  grid-row: 3;
  width: min(900px, 100%);
  height: 360px;
  margin: 64px auto 0;
  color: #605a72;
  --orbit-draw-duration: 1250ms;
  --orbit-reveal-duration: 650ms;
  --orbit-step: 90ms;
}
.orbital-art .orbit-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-line { fill: none; stroke: #b6adca; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.orbit-route-planned .orbit-line { stroke: #bdb5c9; opacity: .58; }
.orbit-pulse { fill: none; stroke: var(--orbit-accent); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .065 .935; opacity: 0; }
.orbit-providers { list-style: none; padding: 0; margin: 0; }
.orbit-provider { position: absolute; z-index: 2; left: 0; top: var(--node-y); width: clamp(100px, 22%, 188px); transform: translateY(-50%); }
.orbit-provider-right { left: auto; right: 0; }
.orbit-card { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 15px 19px; border: 1px solid #d3cddd; border-radius: 16px; background: linear-gradient(145deg, #ffffff, #f7f5fa); box-shadow: 0 5px 16px -8px #31264125, 0 1px 0 #fff inset; }
.orbit-card img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
.orbit-card span { font-size: 13px; line-height: 1.4; font-weight: 540; color: #3a3447; letter-spacing: -.02em; }
.orbit-card small { display: block; margin-top: 3px; font-size: 10px; font-weight: 450; color: #777081; letter-spacing: .02em; }
.orbit-card-planned { background: #f5f3f9; border-style: dashed; box-shadow: 0 1px 0 #fff inset; }
.orbit-hub { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orbit-core { position: relative; display: grid; place-items: center; width: 106px; height: 106px; border: 1px solid #60516f; border-radius: 27px; background: linear-gradient(145deg, #42364f, #292333); box-shadow: 0 18px 32px -18px #36254465, 0 1px 0 #ffffff2b inset; }
.orbit-core::before { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #a891cd40, transparent 68%); opacity: .65; }
.orbit-core img { width: 56px; height: 56px; object-fit: contain; }
.motion-ready .orbit-line { transition: stroke-dashoffset var(--orbit-draw-duration) var(--ease); transition-delay: calc(200ms + var(--orbit-order) * var(--orbit-step)); }
.motion-ready .orbit-card { transition: opacity var(--orbit-reveal-duration) var(--ease), transform var(--orbit-reveal-duration) var(--ease); transition-delay: calc(var(--orbit-order) * var(--orbit-step)); }
.motion-ready .orbit-core { transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: 420ms; }
.motion-ready .orbital-art:not(.is-entered) .orbit-line { stroke-dashoffset: 1; }
.motion-ready .orbital-art:not(.is-entered) .orbit-card { opacity: 0; transform: translateY(12px) scale(.96); }
.motion-ready .orbital-art:not(.is-entered) .orbit-core { opacity: 0; transform: scale(.9); }
.motion-ready .orbital-art.is-in-view .orbit-pulse { animation: orbit-flow 5s linear infinite; animation-delay: calc(1500ms + var(--orbit-order) * 610ms); }
.motion-ready .orbital-art.is-in-view .orbit-core::before { animation: orbit-breathe 5s ease-in-out infinite; }
.orbital-art.is-page-hidden .orbit-pulse, .orbital-art.is-page-hidden .orbit-core::before { animation-play-state: paused !important; }
@keyframes orbit-flow { 0% { stroke-dashoffset: .08; opacity: 0; } 12%, 72% { opacity: .7; } 94%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes orbit-breathe { 0%, 100% { opacity: .4; transform: scale(.95); } 50% { opacity: .8; transform: scale(1.08); } }
html[data-motion="reduced"] .orbital-art :is(.orbit-card, .orbit-core),
html[data-motion="off"] .orbital-art :is(.orbit-card, .orbit-core) { opacity: 1; transform: none; }
html[data-motion="reduced"] .orbit-line, html[data-motion="off"] .orbit-line { stroke-dashoffset: 0; }
html[data-motion="reduced"] .orbit-pulse, html[data-motion="off"] .orbit-pulse { opacity: 0; }
@media (max-width: 600px) {
  .orbital-art { height: 336px; }
  .orbit-card { flex-direction: column; justify-content: center; gap: 7px; min-height: 83px; padding: 11px 7px; border-radius: 13px; text-align: center; }
  .orbit-card img { width: 26px; height: 26px; flex-basis: 26px; }
  .orbit-card span { font-size: 11px; line-height: 1.25; }
  .orbit-card small { font-size: 9px; margin-top: 2px; }
  .orbit-core { width: 72px; height: 72px; border-radius: 20px; }
  .orbit-core img { width: 39px; height: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbital-art :is(.orbit-card, .orbit-core) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .orbital-art .orbit-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .orbital-art .orbit-pulse, .orbital-art .orbit-core::before { animation: none !important; }
  .orbital-art .orbit-pulse { opacity: 0 !important; }
}
.closing { position: relative; isolation: isolate; }
.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, #9982d612, transparent 70%);
  pointer-events: none;
}
/* Unenhanced HTML remains visible. Reveal only after the observer is ready. */
.stream-item { opacity: 1; filter: none; }
.motion-ready .stream-item {
  transition:
    opacity var(--stream-duration) var(--ease),
    transform var(--stream-duration) var(--ease),
    filter var(--stream-duration) var(--ease),
    rotate 600ms var(--ease),
    box-shadow 600ms var(--ease);
  transition-delay: min(120ms, calc(var(--stream-index, 0) * var(--stream-step)));
}
.motion-ready .stream-item:not(.visible) {
  opacity: 0;
  transform: translateY(var(--stream-distance));
  filter: blur(var(--stream-blur));
}
.motion-ready .stream-item.visible { opacity: 1; transform: none; filter: none; }
.motion-ready .stream-item:focus-within,
.motion-ready .reveal:focus-within {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
@media (max-width: 1100px) {
  .hero-ambient { inset-inline: -32px; }
  .ownership { padding-block: 88px; }
}
@media (max-width: 760px) {
  .hero-ambient { inset: -110px -20px auto; height: 750px; }
  .hero-ambient::before { background-size: 60px 60px; }
  .stage-toolbar { height: auto; min-height: 56px; padding: 11px 14px; gap: 12px; flex-wrap: wrap; }
  .preview-live { font-size: 11px; }
  .motion-toggle { min-height: 34px; font-size: 10px; padding-inline: 8px; }
  .stage-toolbar .stage-expand { min-width: 28px; min-height: 34px; justify-content: center; }
  .workspace-frame { height: 720px; }
  .stage-caption { font-size: 11px; align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px; }
  .stage-caption .text-link { font-size: 11px; }
  .detail-art, .allocation-art, .finding-art { rotate: none; }
  .ownership { padding-block: 64px; }
  .ownership-inner { display: flex; flex-direction: column; }
  .orbital-art { order: 3; margin-top: 36px; margin-bottom: 0; }
  body > .motion-toggle { right: 12px; bottom: 12px; }
}
html[data-motion="reduced"], html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after,
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="reduced"] :is(.stream-item, .reveal),
html[data-motion="off"] :is(.stream-item, .reveal) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
html[data-motion="reduced"] :is(.detail-art, .allocation-art, .finding-art),
html[data-motion="off"] :is(.detail-art, .allocation-art, .finding-art) { rotate: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready .stream-item { opacity: 1; transform: none; filter: none; transition: none; }
  .motion-ready .stream-item:not(.visible) { opacity: 1; transform: none; filter: none; }
  .detail-art, .allocation-art, .finding-art { rotate: none; }
  .hero-ambient::after { animation: none !important; }
}

/* Keep wheel, touch and keyboard navigation without visible scroll chrome. */
html, body, body * { scrollbar-width:none; }
html::-webkit-scrollbar, body *::-webkit-scrollbar { display:none; }

.workspace-stage-title { font-size:14px; font-weight:550; color:var(--text); }
@media(max-width:600px) {
 .stage-toolbar { padding:14px; gap:10px; flex-wrap:wrap; }
 .workspace-stage-title { font-size:12px; }
 .stage-toolbar .stage-expand { font-size:11px; }
}

/* Reference: Linear homepage, September 22. One workspace, quiet framing. */
.hero-copy { display:block; margin-bottom:56px; }
.hero h1 { max-width:920px; font-size:clamp(42px,4.5vw,64px); font-weight:510; line-height:1.06; letter-spacing:-.022em; }
.hero h1>span { color:var(--fg); text-shadow:none; }
.hero-aside { max-width:none; padding-top:26px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.hero-aside p { max-width:580px; margin:0; font-size:16px; line-height:1.6; }
.hero-aside .fine { display:none; }
.hero-actions { margin:0; flex-shrink:0; }
.hero-ambient { opacity:.3; }
.product-stage { padding:0 14px 12px; border:1px solid #ffffff14; border-radius:14px; background:radial-gradient(ellipse at 50% 105%,#71777e66,transparent 68%),linear-gradient(135deg,#1d2023,#141618 65%); box-shadow:0 24px 80px #0005,0 1px 0 #ffffff08 inset; }
.stage-toolbar { height:54px; min-height:54px; padding:0 6px; background:transparent; border:0; }
.workspace-stage-title { color:var(--fg); font-size:12px; font-weight:500; }
.preview-live { font-size:11px; color:#a5a6ad; }
.live-workspace { border:1px solid #ffffff14; border-radius:9px; overflow:hidden; box-shadow:0 0 0 5px #00000012,0 15px 45px #0003; }
.workspace-frame { height:740px; }
.stage-caption { border:0; padding:14px 6px 0; color:#b5b6bc; }
@media(max-width:900px) {
 .hero-aside { align-items:flex-start; flex-direction:column; gap:22px; }
 .hero-copy { margin-bottom:36px; }
 .hero-actions { flex-wrap:wrap; }
 .product-stage { padding:0 8px 10px; }
 .stage-toolbar { padding:0 4px; }
}
@media(max-width:600px) {
 .hero h1 { font-size:42px; }
 .hero-aside p { font-size:15px; }
 .stage-toolbar { min-height:50px; height:auto; padding:10px 4px; }
 .stage-toolbar .preview-live { display:none; }
 .workspace-frame { height:720px; }
 .stage-caption { padding:12px 4px 0; }
}

/* A single app window resting on a softly lit surface. */
.product-stage {
  isolation:isolate; padding:0; margin-bottom:88px;
  overflow:visible; border:0; border-radius:0; background:none; box-shadow:none;
}
.product-stage::before {
  content:""; position:absolute; z-index:-2; pointer-events:none;
  inset:16% -56px -84px;
  background:linear-gradient(180deg,transparent 0%,#262a30 42%,#767e89 100%);
  mask-image:linear-gradient(180deg,transparent,#000 35%,#000 82%,transparent);
  opacity:.8;
}
.product-stage::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:5%; right:5%; height:46px; bottom:-25px;
  border-radius:50%; background:#0009; filter:blur(18px);
}
.live-workspace {
  border:1px solid #ffffff1f; border-radius:12px;
  box-shadow:0 28px 42px -20px #000c,0 3px 8px #0005;
  background:#141517;
}
.workspace-frame { border-radius:inherit; }
@media(max-width:900px) { .product-stage::before { left:-28px; right:-28px; } }
@media(max-width:600px) {
  .product-stage { padding:0; margin-bottom:60px; }
  .product-stage::before { left:-18px; right:-18px; bottom:-60px; }
  .live-workspace { border-radius:9px; }
}

.provider-strip img[src$="/aws.svg"] { background: #f4f4f2; border-radius: 4px; padding: 2px; opacity: 1; }