/* REV018/021 — one quiet Products reading plane and compact shared CTAs.
   Products keeps its existing right edge and vertical centre. The rail,
   vector, type and spacing use 90% of the previous desktop proportions. */
:root {
  --surface-bg: rgb(18 20 18 / .68);
  --surface-border: rgb(245 242 234 / .14);
  --surface-blur: 16px;
  --surface-bg-hover: rgb(27 29 24 / .82);
  --surface-gold-border: rgb(215 180 74 / .65);
}

#stage .new-scene-detail,
#stage[data-sitewide-revision="true"] .scene-navigation button {
  background: var(--surface-bg);
  border-color: var(--surface-gold-border);
  color: var(--gold, #d7b44a);
  -webkit-backdrop-filter: blur(var(--surface-blur));
  backdrop-filter: blur(var(--surface-blur));
  box-shadow: inset 0 1px 0 rgb(245 242 234 / .045);
}
#stage .new-scene-detail:hover,
#stage[data-sitewide-revision="true"] .scene-navigation button:not(:disabled):hover {
  background: var(--surface-bg-hover);
  border-color: rgb(237 209 116 / .95);
  color: #edd174;
}
#stage .new-scene-detail:focus-visible,
#stage[data-sitewide-revision="true"] .scene-navigation button:focus-visible {
  outline: 2px solid #edd174;
  outline-offset: 4px;
}
#stage[data-sitewide-revision="true"] .scene-navigation button:disabled {
  background: rgb(18 20 18 / .42);
  border-color: rgb(245 242 234 / .12);
  color: rgb(245 242 234 / .32);
  box-shadow: none;
}
/* A compact visual pill retains a full 44px interactive height. */
#stage .new-scene-detail,
#stage[data-sitewide-revision="true"] :is(#products.copy, #research.copy, #business.copy) .new-scene-detail {
  min-width: 86.4px;
  min-height: 44px;
  padding: 8.1px 13.5px;
  gap: 0;
  font-size: 10.8px;
  line-height: 1.3;
}

#stage[data-sitewide-revision="true"] #products.copy > [data-editorial-content] {
  box-sizing: border-box;
  gap: 0;
  padding: 11.7px 16.2px;
  border: 0;
  border-radius: 0;
  background: rgb(9 12 10 / .56);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
#stage[data-sitewide-revision="true"] #products.copy .product-track,
#stage[data-sitewide-revision="true"] #products.copy .product-track + .product-track {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 14.4px 0;
  grid-template-columns: 57.6px minmax(0, 1fr) auto;
  column-gap: 16.2px;
  row-gap: 3.6px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#stage[data-sitewide-revision="true"] #products.copy .product-track + .product-track {
  border-top: 1px solid rgb(215 180 74 / .22);
}
#stage[data-sitewide-revision="true"] #products.copy .product-track > .product-emblem {
  width: 57.6px;
  height: 57.6px;
}
#stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > .track-eyebrow {
  font-size: 8.1px;
  color: #c8b67f;
  text-shadow: none;
}
#stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > h3 {
  font-size: 25.2px;
  text-shadow: 0 1px 2px rgb(0 0 0 / .4);
}
#stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > p:not(.track-eyebrow) {
  margin-top: 4.5px;
  font-size: 14.4px;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
#stage[data-sitewide-revision="true"] #products.copy .product-track > .new-scene-detail {
  gap: 0;
}
@media (min-width: 761px) {
  #stage[data-sitewide-revision="true"] #products.copy > [data-editorial-content] {
    width: min(630px, 45.9vw);
  }
}

/* Mobile keeps its established reading edge and available width. Compact
   internal proportions never reduce a CTA's touch height below 44px. */
@media (max-width: 760px) {
  #stage .new-scene-detail,
  #stage[data-sitewide-revision="true"] :is(#products.copy, #research.copy, #business.copy) .new-scene-detail {
    font-size: 11px;
    padding: 8.1px 10.8px;
  }
  #stage[data-sitewide-revision="true"] #products.copy > [data-editorial-content] {
    padding: 7.2px 10.8px;
  }
  #stage[data-sitewide-revision="true"] #products.copy .product-track,
  #stage[data-sitewide-revision="true"] #products.copy .product-track + .product-track {
    padding: 10.8px 0;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 7.2px;
    row-gap: 1.8px;
  }
  #stage[data-sitewide-revision="true"] #products.copy .product-track > .product-emblem {
    width: 36px;
    height: 36px;
  }
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > .track-eyebrow {
    font-size: 7.2px;
  }
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > h3 {
    font-size: 20.7px;
  }
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > p:not(.track-eyebrow) {
    margin-top: 5.4px;
    font-size: 12px;
  }
}
@media (max-width: 760px) and (max-height: 740px) and (orientation: portrait) {
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > h3 { font-size: 18.9px; }
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > p:not(.track-eyebrow) { font-size: 11.5px; }
}
@media (max-width: 760px) and (max-height: 560px) and (orientation: landscape) {
  #stage[data-sitewide-revision="true"] #products.copy > [data-editorial-content] {
    gap: 10.8px;
    padding: 9px 10.8px;
  }
  #stage[data-sitewide-revision="true"] #products.copy .product-track,
  #stage[data-sitewide-revision="true"] #products.copy .product-track + .product-track {
    padding: 0;
    grid-template-columns: 32.4px minmax(0, 1fr);
    column-gap: 8.1px;
    row-gap: 2.7px;
    align-content: start;
    border: 0;
  }
  #stage[data-sitewide-revision="true"] #products.copy .product-track + .product-track {
    padding-left: 10.8px;
    border-left: 1px solid rgb(215 180 74 / .22);
  }
  #stage[data-sitewide-revision="true"] #products.copy .product-track > .product-emblem { width: 32.4px; height: 32.4px; }
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > h3 { font-size: 17.1px; }
  #stage[data-sitewide-revision="true"] #products.copy [data-editorial-content] .product-track > p:not(.track-eyebrow) { margin-top: 3.6px; font-size: 11px; }
  #stage[data-sitewide-revision="true"] #products.copy .product-track > .new-scene-detail { margin-top: 6.3px; }
}