/* Hero models replace the earlier diagram and illustration comparison. */
.product-intro:has(.product-hero-visual), .hermes-hero:has(.product-hero-visual) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.product-hero-visual { min-width: 0; width: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(211, 226, 201, .11); border-radius: 30px; background: radial-gradient(ellipse at 50% 40%, rgba(141, 161, 121, .055), transparent 68%), #0b0e0c; }
.product-model-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 22px 24px 0; font-size: .67rem; color: var(--muted); }
.product-model-heading .mono { color: var(--accent); font-size: .62rem; letter-spacing: .13em; }
.product-model { position: relative; width: 100%; height: clamp(310px, 30vw, 470px); overflow: hidden; contain: layout paint; }
.product-model canvas, .product-model-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.product-model-fallback { object-fit: contain; }
.product-model.is-ready .product-model-fallback { visibility: hidden; }
.product-model-instruction { margin: 0; padding: 0 24px 20px; text-align: center; color: var(--muted); font-family: var(--font-mono, Consolas, monospace); font-size: .62rem; line-height: 1.6; }
.product-stage-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 24px; }
.product-stage-controls[hidden], .product-stage-copy [hidden] { display: none; }
.product-stage-controls button { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(155deg, rgba(229, 245, 220, .055), rgba(229, 245, 220, .015)); box-shadow: inset 0 1px rgba(255, 255, 255, .07); color: var(--muted); font: inherit; font-size: .73rem; cursor: pointer; }
.product-stage-controls button .mono { font-size: .6rem; }
.product-stage-controls button[aria-pressed="true"] { color: var(--accent); border-color: rgba(192, 229, 165, .45); background-color: rgba(192, 229, 165, .045); }
.product-stage-controls button:focus-visible { outline-offset: 3px; }
.product-stage-copy { padding: 24px; min-height: 170px; }
.product-stage-copy h3 { margin-bottom: 10px; font-size: 1.05rem; line-height: 1.45; }
.product-stage-copy p { margin: 0; font-size: .84rem; line-height: 1.8; }
.product-stage-copy > div + div:not([hidden]) { margin-top: 24px; }
.product-explainer.is-enhanced .product-stage-copy > div { margin-top: 0; }
@media (max-width: 1000px) {
  .product-intro:has(.product-hero-visual), .hermes-hero:has(.product-hero-visual) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .product-hero-visual { max-width: 760px; justify-self: center; }
  .product-model { height: clamp(310px, 53vw, 460px); }
}
@media (max-width: 500px) {
  .product-hero-visual { border-radius: 24px; }
  .product-model-heading { padding: 18px 18px 0; }
  .product-model { height: 270px; }
  .product-stage-controls { margin-inline: 14px; gap: 6px; }
  .product-stage-controls button { font-size: .67rem; padding-inline: 4px; }
  .product-stage-controls button .mono { display: none; }
  .product-stage-copy { padding: 22px 18px; }
  .product-model-instruction { padding-inline: 18px; }
}