/* Product hero: one working example, a quiet backplate and five direct choices.
   The existing product-beam-shell aspect ratio keeps the hero height unchanged. */
body[data-page='products'] .product-beam-shell.product-demo-console {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(14px, 3.6cqw, 26px);
  padding: clamp(22px, 5cqw, 36px) clamp(20px, 3.8cqw, 28px) clamp(12px, 2.8cqw, 20px) clamp(10px, 1.8cqw, 14px);
  cursor: default;
}
.product-demo-stage { position: relative; min-width: 0; min-height: 0; isolation: isolate; }
.product-demo-backplate {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: clamp(14px, 2.8cqw, 20px);
  background: rgba(255, 255, 255, .58);
  transform: translate(clamp(10px, 3.2cqw, 22px), clamp(-24px, -3.6cqw, -12px));
  pointer-events: none;
}
.product-demo-window {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(16px, 3.7cqw, 28px);
  color: var(--brand-ink, #202525);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: clamp(14px, 2.8cqw, 20px);
  background: #fff;
  box-shadow: 0 18px 34px rgba(32, 37, 37, .065);
  overflow: hidden;
  transform-origin: 50% 50%;
}
.product-demo-heading {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5cqw, 18px);
  min-height: clamp(36px, 7.7cqw, 58px);
  padding-bottom: clamp(12px, 2.3cqw, 18px);
  border-bottom: 1px solid var(--brand-rule, #dcdedb);
}
.product-demo-heading > strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(15px, 3.3cqw, 25px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.product-demo-meta { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(10px, 2.8cqw, 22px); }
.product-demo-badge {
  padding: 3px 9px;
  color: #7d8586;
  border: 1px solid #dedfdf;
  border-radius: 99px;
  font-size: clamp(9px, 1.8cqw, 13px);
  line-height: 1.2;
  white-space: nowrap;
}
.product-demo-counter { color: #687277; font-size: clamp(11px, 2.5cqw, 18px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-demo-counter > span { color: #889194; }
.product-demo-code {
  min-width: 0;
  margin: clamp(16px, 3.5cqw, 28px) 0 0;
  color: #758087;
  font-family: var(--mono);
  font-size: clamp(11px, 2.2cqw, 16px);
  line-height: 1.7;
  letter-spacing: 0;
  white-space: pre;
}
.product-demo-code code, .product-demo-code-line { display: block; }
.product-demo-code .product-demo-code-readable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: pre;
}
.product-demo-code-untyped { visibility: hidden; }
.product-demo-caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: -.12em;
  color: #687d86;
}
.product-demo-caret::after {
  position: absolute;
  left: .05em;
  top: 0;
  width: 1.5px;
  height: 100%;
  background: currentColor;
  content: '';
  animation: product-demo-caret-blink .8s step-end infinite;
}
@keyframes product-demo-caret-blink { 50% { opacity: 0; } }
.product-demo-code .token-namespace { color: #7063bd; }
.product-demo-code .token-function { color: #2774bd; }
.product-demo-code .token-key { color: #9b5b91; }
.product-demo-code .token-string { color: #2c8768; }
.product-demo-code .token-value { color: #b87535; }
.product-demo-code .token-comment { color: #82a180; font-style: italic; }
.product-demo-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1.2cqw, 10px); }
.product-demo-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 6px 0 12px;
  color: #737c7d;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(10px, 2.3cqw, 16px);
  line-height: 1.3;
  cursor: pointer;
  transition: color .18s ease;
}
.product-demo-tab::after {
  position: absolute;
  right: 17%;
  bottom: 0;
  left: 17%;
  height: 2px;
  background: var(--brand-ink, #202525);
  content: '';
  transform: scaleX(0);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}
.product-demo-tab:is(.is-active, :hover) { color: var(--brand-ink, #202525); }
.product-demo-tab.is-active::after { transform: scaleX(1); }
.product-demo-tab:focus-visible { outline: 2px solid #687277; outline-offset: 2px; border-radius: 3px; }
@media (min-width: 960px) and (max-width: 1199px) {
  body[data-page='products'] .product-beam-shell.product-demo-console {
    gap: 10px;
    padding: 22px 20px 8px 10px;
  }
}
@media (max-width: 540px) {
  body[data-page='products'] .product-beam-shell.product-demo-console { gap: 8px; padding: 20px 12px 4px 4px; }
  .product-demo-window { padding: clamp(12px, 4cqw, 18px); }
  .product-demo-heading { min-height: 38px; padding-bottom: 10px; gap: 8px; }
  .product-demo-heading > strong { font-size: clamp(11.5px, 3.7cqw, 16px); line-height: 1.25; }
  .product-demo-meta { gap: 7px; }
  .product-demo-badge { padding: 2px 5px; font-size: 8px; }
  .product-demo-counter { font-size: 10px; }
  .product-demo-code { margin-top: 12px; font-size: clamp(9px, 2.8cqw, 12px); line-height: 1.55; }
  .product-demo-tab { font-size: clamp(9px, 2.7cqw, 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .product-demo-tab, .product-demo-tab::after { transition: none; }
  .product-demo-caret { display: none; }
}