.hero-showcase {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 530px;
  height: 510px;
  padding: 24px;
  margin-top: 14px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #c7e6a923;
  border-radius: 24px;
  color: #e6eddf;
  background: radial-gradient(ellipse at 82% 31%, #42613960, transparent 58%), linear-gradient(145deg, #263c2bd9, #13251bdf);
  box-shadow: inset 0 1px 0 #e4f6d40b, 0 28px 70px #04110a40;
}
.hero-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, #d9f6b807, transparent 36%);
}
.showcase-heading {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.showcase-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #b6c9a7;
  font-size: 10px;
  letter-spacing: 1px;
}
.showcase-eyebrow i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--green);
}
.showcase-counter {
  color: #7c9770;
  font-size: 9px;
  letter-spacing: 1px;
}
.showcase-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.showcase-orbit {
  position: absolute;
  right: 1%;
  top: 47%;
  width: 258px;
  height: 258px;
  transform: translateY(-50%);
  border: 1px solid #c9ed9e1c;
  border-radius: 50%;
  box-shadow: 0 0 0 31px #c9ed9e05, 0 0 0 63px #c9ed9e03;
  pointer-events: none;
}
.showcase-orbit::before,
.showcase-orbit::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c5ee6a80;
}
.showcase-orbit::before { left: 20%; top: 10%; }
.showcase-orbit::after { right: 10%; bottom: 18%; opacity: .5; }
.showcase-ground {
  position: absolute;
  bottom: 9%;
  left: 46%;
  right: 6%;
  height: 19px;
  border-radius: 50%;
  background: #020e0999;
  filter: blur(13px);
}
.showcase-meta { position: relative; z-index: 3; padding-bottom: 8px; }
.showcase-series { color: #75996b; font-size: 8px; letter-spacing: 1.4px; }
.hero-showcase .showcase-meta h2 {
  margin-top: 12px;
  color: #eef4e9;
  font: 34px/1.2 var(--mono);
  letter-spacing: -1.5px;
}
#showcase-name { color: #bdcdb0; font-size: 13px; margin-top: 9px; letter-spacing: .5px; }
.showcase-facts { display: grid; gap: 16px; margin: 25px 0 0; }
.showcase-facts > div { display: flex; flex-direction: column; gap: 7px; }
.showcase-facts dt { color: #78946e; font-size: 9px; }
.showcase-facts dd { color: #d3e2c6; margin: 0; font-size: 16px; letter-spacing: .3px; white-space: nowrap; }
.showcase-detail {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 9px 0;
  margin-top: 17px;
  border: 0;
  border-bottom: 1px solid #b6d78a45;
  background: transparent;
  color: var(--green);
  font-size: 11px;
}
.showcase-detail .icon { width: 16px; height: 16px; }
.showcase-detail:hover { color: #e0ffab; border-bottom-color: #c5ee6a; }
.showcase-figure {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 330px;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showcase-figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 265px;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px #00000058);
}
.hero-showcase[data-model='AP262'] .showcase-figure img { max-width: none; height: 280px; }
.showcase-switcher {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #c8e5ac16;
}
.showcase-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 55px;
  padding: 10px 12px;
  text-align: left;
  background: #0c1d1233;
  border: 1px solid #b4d08b14;
  border-radius: 9px;
  color: #94ad81;
  transition: background .2s, border-color .2s;
}
.showcase-tab.is-active { background: #b4df6f12; border-color: #b7df763d; color: #def4be; }
.showcase-tab:hover { border-color: #c5ee6a6b; }
.showcase-tab-number { font-size: 8px; color: #658159; }
.showcase-tab.is-active .showcase-tab-number { color: #a3c96f; }
.showcase-tab > span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.showcase-tab strong { font: 11px/1 var(--mono); letter-spacing: .6px; font-weight: 400; }
.showcase-tab small { font-size: 9px; white-space: nowrap; color: #759267; }
.showcase-tab.is-active small { color: #9cbf7d; }
.showcase-tab > .icon { margin-left: auto; width: 15px; height: 15px; opacity: .45; }
.showcase-tab.is-active > .icon { opacity: 1; color: var(--green); }
.showcase-note { font-size: 8px; line-height: 1.7; letter-spacing: .3px; color: #6d8a61; margin-top: 13px; }
@media (max-width: 1199px) {
  .hero-showcase { height: 480px; padding: 22px; border-radius: 22px; }
  .showcase-panel { grid-template-columns: 125px minmax(0, 1fr); gap: 6px; }
  .showcase-figure { height: 310px; }
  .showcase-orbit { width: 222px; height: 222px; right: -5%; }
  .hero-showcase .showcase-meta h2 { font-size: 30px; }
  #showcase-name { font-size: 12px; }
  .showcase-tab { gap: 10px; padding-inline: 10px; }
  .showcase-tab small { font-size: 8px; }
  .showcase-note { font-size: 7px; letter-spacing: .2px; }
}
@media (max-width: 899px) {
  .hero-showcase { height: 445px; padding: 18px; border-radius: 20px; }
  .showcase-eyebrow { font-size: 9px; }
  .showcase-counter { font-size: 8px; }
  .showcase-panel { grid-template-columns: 100px minmax(0, 1fr); gap: 3px; }
  .hero-showcase .showcase-meta h2 { font-size: 26px; letter-spacing: -1.5px; }
  #showcase-name { font-size: 10px; letter-spacing: 0; }
  .showcase-series { font-size: 6px; letter-spacing: .9px; }
  .showcase-facts { margin-top: 22px; gap: 15px; }
  .showcase-facts dt { font-size: 8px; }
  .showcase-facts dd { font-size: 13px; }
  .showcase-detail { font-size: 10px; gap: 10px; margin-top: 15px; }
  .showcase-detail .icon { width: 14px; height: 14px; }
  .showcase-figure { height: 278px; }
  .hero-showcase[data-model='AP262'] .showcase-figure img { height: 215px; }
  .showcase-orbit { width: 190px; height: 190px; right: -15%; }
  .showcase-switcher { gap: 8px; padding-top: 13px; }
  .showcase-tab { gap: 8px; min-height: 50px; padding: 9px 8px; }
  .showcase-tab-number { font-size: 7px; }
  .showcase-tab strong { font-size: 10px; }
  .showcase-tab small { font-size: 7px; }
  .showcase-tab > .icon { display: none; }
  .showcase-note { font-size: 6px; }
}
@media (max-width: 639px) {
  .hero-showcase { height: 435px; width: 100%; max-width: none; padding: 19px; margin: 30px 0 32px; }
  .showcase-panel { grid-template-columns: 112px minmax(0, 1fr); gap: 7px; }
  .showcase-eyebrow { font-size: 10px; }
  .showcase-counter { font-size: 8px; }
  .showcase-series { font-size: 7px; letter-spacing: 1px; }
  .hero-showcase .showcase-meta h2 { font-size: 29px; }
  #showcase-name { font-size: 11px; margin-top: 8px; }
  .showcase-facts { gap: 15px; margin-top: 23px; }
  .showcase-facts dd { font-size: 14px; }
  .showcase-facts dt { font-size: 9px; }
  .showcase-figure { height: 272px; }
  .showcase-orbit { width: 204px; height: 204px; right: -13%; }
  .showcase-tab { min-height: 52px; padding: 10px; gap: 10px; }
  .showcase-tab strong { font-size: 11px; }
  .showcase-tab small { font-size: 8px; }
  .showcase-note { font-size: 7px; margin-top: 12px; letter-spacing: 0; }
}
@media (max-width: 359px) {
  .hero-showcase { height: 410px; padding: 16px; border-radius: 18px; }
  .showcase-panel { grid-template-columns: 103px minmax(0, 1fr); gap: 2px; }
  .hero-showcase .showcase-meta h2 { font-size: 26px; }
  .showcase-series { font-size: 6px; letter-spacing: .7px; }
  #showcase-name { font-size: 10px; }
  .showcase-facts dd { font-size: 13px; }
  .showcase-facts dt { font-size: 8px; }
  .showcase-figure { height: 254px; }
  .hero-showcase[data-model='AP262'] .showcase-figure img { height: 195px; }
  .showcase-tab { gap: 7px; padding: 9px 8px; }
  .showcase-tab small { font-size: 7px; }
  .showcase-note { font-size: 6px; }
}