.showcase-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(151, 195, 223, 0.16),
      transparent 28%
    ),
    linear-gradient(180deg, #10202c 0%, #101f2b 55%, #0f1b25 100%);
  color: #fff;
}
.showcase-hero::before {
  content: "";
  position: absolute;
  width: 56.25rem;
  height: 56.25rem;
  border: 0.0625rem solid #46678245;
  border-radius: 50%;
  top: -33.125rem;
  right: -10.625rem;
  box-shadow:
    0 0 0 5.3125rem #46678212,
    0 0 0 10.625rem #4667820b;
  pointer-events: none;
  animation: hero-orbit 26s var(--ease-fluid) infinite alternate;
}
.showcase-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16% -24%;
  opacity: 0.7;
  background: linear-gradient(
    112deg,
    transparent 22%,
    rgba(154, 194, 220, 0.025) 39%,
    rgba(154, 194, 220, 0.075) 50%,
    rgba(154, 194, 220, 0.025) 61%,
    transparent 78%
  );
  filter: blur(1.5rem);
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
  transform: translateX(-18%);
  will-change: transform;
  pointer-events: none;
  animation: hero-sweep 18s ease-in-out infinite alternate;
}
.showcase-grid,
.hero-baseline {
  position: relative;
  z-index: 1;
}
.showcase-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(2rem, 5vw, 4.875rem);
  align-items: center;
  padding-block: 4.5rem 3.625rem;
}
.showcase-copy .eyebrow {
  color: #abc7dc;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.live-line {
  width: 1.5rem;
  height: 0.125rem;
  background: #91bfe2;
  flex-shrink: 0;
}
.showcase-copy h1 {
  color: white;
  font-size: clamp(3.2rem, 5.7vw, 5.35rem);
  line-height: 1.025;
  letter-spacing: -0.055em;
  margin-bottom: 1.875rem;
}
.showcase-copy h1 span {
  color: #9cc7e5;
}
.showcase-copy .lead {
  color: #c5d4df;
  max-width: 30rem;
  font-size: 1.07rem;
  line-height: 1.75;
}
.showcase-copy .button-row {
  gap: 1.5625rem;
}
.hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: white;
  text-decoration: none;
  font-size: 0.86rem;
  transition:
    transform 0.18s var(--ease-fluid),
    color 0.18s var(--ease-fluid);
}
.hero-text-link:hover {
  transform: translateX(0.125rem);
}
.hero-text-link:hover {
  text-decoration: underline;
}
.hero-disciplines {
  display: flex;
  gap: 1.625rem;
  font: 0.63rem/1.4 var(--mono-font);
  letter-spacing: 0.16em;
  color: #a0b6c6;
  margin-top: 2.8125rem;
}
.hero-disciplines span + span::before {
  content: "/";
  margin-right: 1.625rem;
  color: #58758b;
}
.product-showcase {
  min-width: 0;
  position: relative;
  padding-top: 1.25rem;
}
.product-showcase::before {
  content: "LIVE SPECIFICATION / FEATURED HARDWARE";
  position: absolute;
  top: 0;
  left: 0.125rem;
  color: #8ba9bd;
  font: 0.59rem var(--mono-font);
  letter-spacing: 0.14em;
}
.showcase-stage {
  position: relative;
  padding: 0.75rem;
  background: linear-gradient(145deg, #dbe4e9 0%, #becdd5 100%);
  color: var(--ink);
  border: 0.0625rem solid rgba(220, 239, 248, 0.45);
  border-radius: 0.1875rem 0.1875rem 0 0;
  box-shadow:
    0 1.5rem 3.125rem rgba(7, 17, 24, 0.22),
    inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.4);
  transition:
    transform 0.24s var(--ease-fluid),
    box-shadow 0.24s var(--ease-fluid);
}
.showcase-stage::before,
.showcase-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}
.showcase-stage::before {
  left: 0.375rem;
  top: 0.375rem;
  border-left: 0.125rem solid #315f86;
  border-top: 0.125rem solid #315f86;
}
.showcase-stage::after {
  right: 0.375rem;
  bottom: 0.375rem;
  border-right: 0.125rem solid #315f86;
  border-bottom: 0.125rem solid #315f86;
}
.showcase-stage:hover {
  transform: translateY(-0.1875rem);
  box-shadow:
    0 1.875rem 4rem rgba(7, 17, 24, 0.28),
    inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.5);
}
.showcase-panel {
  position: relative;
  padding: 1.25rem 1.375rem 1.375rem;
  background: #f7f9fa;
  border: 0.0625rem solid #b8c8d1;
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.75);
  animation: show-product 0.22s ease-out;
}
.showcase-panel::after {
  content: "";
  position: absolute;
  left: 1.375rem;
  right: 1.375rem;
  top: 3.25rem;
  border-top: 0.0625rem dashed #cbd7dd;
  pointer-events: none;
}
.showcase-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.875rem;
  font: 0.68rem var(--mono-font);
  letter-spacing: 0.13em;
  color: #4b606f;
}
.showcase-kicker span:last-child {
  color: var(--blue);
  font-weight: 700;
}
.showcase-object {
  position: relative;
  display: grid;
  place-items: center;
  height: 21.5625rem;
  margin-block: 0.625rem 1.125rem;
  isolation: isolate;
  overflow: hidden;
  background-color: #eef3f5;
  background-image:
    linear-gradient(rgba(49, 95, 134, 0.05) 0.0625rem, transparent 0.0625rem),
    linear-gradient(
      90deg,
      rgba(49, 95, 134, 0.05) 0.0625rem,
      transparent 0.0625rem
    );
  background-size: 1.25rem 1.25rem;
  border: 0.0625rem solid #d1dce2;
}
.showcase-object::after {
  content: "";
  position: absolute;
  inset: 13% 50%;
  border-left: 0.0625rem solid rgba(49, 95, 134, 0.16);
  box-shadow: 0 0 0 0.0625rem transparent;
  z-index: 0;
}
.showcase-code {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  left: auto;
  bottom: auto;
  text-align: right;
  font: 700 clamp(3.5rem, 7vw, 6rem)/1 var(--body-font);
  color: #d5e0e6;
  letter-spacing: -0.07em;
  z-index: 0;
}
.showcase-product {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 92%;
}
.showcase-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition:
    transform 0.35s var(--ease-fluid),
    filter 0.35s var(--ease-fluid);
}
.showcase-stage:hover .showcase-product img {
  transform: scale(1.015);
}
.showcase-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border-top: 0.0625rem solid #c7d3dc;
  padding: 1.25rem 0.25rem 0.125rem;
}
.showcase-label h2 {
  font-size: 1.2rem;
  letter-spacing: -0.025em;
  margin: 0 0 0.4375rem;
}
.showcase-label p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.6;
  margin: 0;
}
.showcase-explore {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--navy);
  color: white;
  flex-shrink: 0;
  border: 0.0625rem solid #315f86;
  transition:
    background 0.18s var(--ease-fluid),
    transform 0.18s var(--ease-fluid),
    box-shadow 0.18s var(--ease-fluid);
}
.showcase-explore:hover {
  background: var(--blue);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.625rem 1.25rem rgba(18, 37, 50, 0.18);
}
.showcase-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  border: 0.0625rem solid #ffffff30;
  border-top: 0;
  border-radius: 0 0 0.1875rem 0.1875rem;
  overflow: hidden;
}
.showcase-switcher button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-right: 0.0625rem solid #ffffff30;
  background: transparent;
  color: #c8d6df;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  font-size: 0.8rem;
  padding: 0.625rem;
  transition:
    background 0.18s var(--ease-fluid),
    color 0.18s var(--ease-fluid),
    box-shadow 0.18s var(--ease-fluid);
}
.showcase-switcher button:last-child {
  border-right: 0;
}
.showcase-switcher button span {
  color: #8aa5b9;
  font: 0.64rem var(--mono-font);
}
.showcase-switcher button[aria-pressed="true"] {
  color: white;
  background: #2c4c63;
  box-shadow: inset 0 -0.125rem #a6cbe6;
}
.showcase-switcher button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.125rem;
  background: #a6cbe6;
  transform: scaleX(0);
  transform-origin: left;
  animation: showcase-progress 7.2s linear both;
}
.showcase-switcher:hover button[aria-pressed="true"]::after,
.showcase-switcher:focus-within button[aria-pressed="true"]::after {
  animation-play-state: paused;
}
.showcase-switcher button:hover {
  background: #284054;
}
.hero-baseline {
  position: relative;
  border-top: 0.0625rem solid #ffffff23;
  min-height: 3.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-size: 0.73rem;
  color: #b1c4d2;
}
.hero-baseline p {
  margin: 0;
}
.hero-baseline a {
  display: inline-flex;
  gap: 0.9375rem;
  align-items: center;
  text-decoration: none;
  color: white;
}
.hero-baseline a:hover {
  text-decoration: underline;
}
.hero-baseline a span {
  font-size: 1.2rem;
}
@keyframes show-product {
  from {
    opacity: 0.5;
    transform: translateY(0.3125rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-orbit {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0.875rem, 0.75rem, 0) scale(1.03);
  }
}
@keyframes hero-sweep {
  from {
    transform: translateX(-18%);
  }
  to {
    transform: translateX(10%);
  }
}
@keyframes showcase-progress {
  to {
    transform: scaleX(1);
  }
}

.family-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.875rem;
}
.family-grid--five .family-card {
  padding: 1.1875rem;
  background: #f4f6f7;
  border-color: transparent;
  transition:
    border-color 0.18s,
    transform 0.18s;
}
.family-grid--five .family-card:hover {
  border-color: #8fa9bd;
  transform: translateY(-0.1875rem);
}
.family-grid--five .family-card__image {
  height: 9.0625rem;
  margin-block: 1.0625rem;
}
.family-grid--five .family-card__image img {
  mix-blend-mode: multiply;
}
.family-grid--five h3 {
  font-size: 1.06rem;
}
.family-grid--five p {
  font-size: 0.8rem;
}

.access-feature {
  background: #e9eef1;
  overflow: hidden;
}
.access-feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding-block: 4.375rem;
}
.access-feature__visual {
  min-width: 0;
  position: relative;
  min-height: 30rem;
  padding-right: 5.125rem;
  display: flex;
  align-items: center;
}
.product-ghost {
  position: absolute;
  top: -0.625rem;
  left: 0;
  font: 600 clamp(5rem, 10vw, 9rem)/1 var(--body-font);
  letter-spacing: -0.06em;
  color: #d0dbe2;
}
.access-feature__product {
  position: relative;
  z-index: 2;
  height: 25.9375rem;
  width: 100%;
}
.access-feature__product img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.detail-inset {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: block;
  background: white;
  width: 43%;
  padding: 1.0625rem;
  box-shadow: 0 1.125rem 2.1875rem #17344413;
  text-decoration: none;
  border: 0.0625rem solid #c6d4de;
}
.detail-inset picture {
  height: 7rem;
}
.detail-inset img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-inset > span {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.7rem;
  line-height: 1.5;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid var(--line);
  margin-top: 0.75rem;
  color: var(--blue);
}
.detail-inset:hover > span {
  text-decoration: underline;
}
.access-feature__copy h2 {
  font-size: clamp(2.5rem, 3.7vw, 3.35rem);
}
.access-feature__copy .lead {
  font-size: 1.02rem;
}
.access-feature__copy > p:not(.eyebrow):not(.lead) {
  font-size: 0.92rem;
  color: var(--muted);
}
.access-feature__copy > .fine-print {
  font-size: 0.75rem !important;
  margin-top: 1.3125rem;
  max-width: 26.875rem;
}

.lock-system-feature {
  background: #142b3a;
  color: #e2ebf1;
}
.lock-system-feature h2 {
  color: white;
}
.lock-system-feature .eyebrow {
  color: #a4c7df;
}
.lock-system-feature .section-heading > p {
  color: #bdcdd9;
}
.system-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.system-steps > a {
  background: #f3f6f7;
  padding: 1.6875rem;
  color: var(--ink);
  text-decoration: none;
  border: 0.0625rem solid transparent;
}
.system-steps > a:hover {
  border-color: #9cc5e2;
  background: white;
}
.system-steps picture {
  height: 12.5rem;
  margin: 1.5rem 0 1.6875rem;
}
.system-steps img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.system-steps h3 {
  font-size: 1.22rem;
}
.system-steps p {
  font-size: 0.88rem;
  color: var(--muted);
}
.system-steps .index-number {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.system-steps .text-link {
  font-size: 0.8rem;
}
.resource-callout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.75rem;
  align-items: center;
}
.resource-callout .lead {
  font-size: 1.03rem;
}
.resource-stack {
  position: relative;
  height: 21.25rem;
  display: block;
}
.resource-stack img {
  position: absolute;
  height: 17.5rem;
  width: auto;
  border: 0.0625rem solid #c3cdd4;
  box-shadow: 0 0.625rem 1.5625rem #233c4e14;
}
.resource-stack img:first-child {
  right: 13%;
  top: 0;
  transform: rotate(9deg);
}
.resource-stack img:nth-child(2) {
  left: 10%;
  top: 1.5625rem;
  transform: rotate(-8deg);
}
.resource-stack > span {
  position: absolute;
  left: 20%;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--blue);
  color: white;
  padding: 1rem;
  font-size: 0.8rem;
}
.resource-stack strong {
  font-size: 1.9rem;
  line-height: 1;
}

@media (min-width: 96.875rem) {
  .showcase-object {
    height: 24.0625rem;
  }
}
@media (max-width: 68.75rem) {
  .showcase-grid {
    gap: 1.875rem;
    padding-block: 3.4375rem 2.8125rem;
  }
  .showcase-copy h1 {
    font-size: 4.1rem;
  }
  .showcase-panel {
    padding: 1.375rem;
  }
  .showcase-object {
    height: 19.0625rem;
  }
  .showcase-copy .button-row {
    gap: 0.9375rem;
  }
  .showcase-copy .button {
    padding-inline: 1rem;
  }
  .hero-text-link {
    font-size: 0.78rem;
  }
  .family-grid--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .family-grid--five .family-card__image {
    height: 9.375rem;
  }
  .access-feature__grid {
    gap: 2.8125rem;
  }
  .access-feature__visual {
    padding-right: 3.75rem;
  }
  .system-steps {
    gap: 1rem;
  }
  .system-steps > a {
    padding: 1.375rem;
  }
}
@media (max-width: 53.125rem) {
  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: 3rem 2rem;
  }
  .showcase-copy h1 {
    font-size: clamp(3rem, 8.4vw, 4.7rem);
  }
  .showcase-copy .lead {
    max-width: 36.875rem;
  }
  .hero-disciplines {
    margin-top: 1.875rem;
  }
  .product-showcase {
    max-width: 36.25rem;
    width: 100%;
    margin-inline: auto;
  }
  .showcase-object {
    height: 20.9375rem;
  }
  .showcase-code {
    font-size: 7.5rem;
  }
  .access-feature__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .access-feature__visual {
    min-height: 22.5rem;
    padding-right: 1.25rem;
  }
  .access-feature__product {
    height: 19.375rem;
  }
  .detail-inset {
    width: 56%;
    right: -0.3125rem;
    bottom: -1.125rem;
  }
  .detail-inset picture {
    height: 5.3125rem;
  }
  .access-feature__copy h2 {
    font-size: 2.35rem;
  }
  .system-steps {
    grid-template-columns: 1fr;
  }
  .system-steps > a {
    display: grid;
    grid-template-columns: 11.25rem 1fr;
    column-gap: 1.5rem;
  }
  .system-steps picture {
    grid-column: 1;
    grid-row: 1 / 5;
    height: 11.875rem;
    margin: 0;
  }
  .system-steps .index-number {
    grid-column: 2;
    align-self: end;
    margin-bottom: 0.9375rem;
  }
  .system-steps h3,
  .system-steps p,
  .system-steps .text-link {
    grid-column: 2;
  }
  .resource-callout {
    gap: 1.875rem;
  }
  .resource-stack {
    height: 18.125rem;
  }
  .resource-stack img {
    height: 14.375rem;
  }
}
@media (max-width: 37.5rem) {
  .showcase-copy h1 {
    font-size: clamp(2.9rem, 12.5vw, 4.35rem);
    margin-bottom: 1.4375rem;
  }
  .showcase-copy .eyebrow {
    font-size: 0.57rem;
    letter-spacing: 0.09em;
  }
  .showcase-copy .lead {
    font-size: 1rem;
  }
  .showcase-copy .button-row {
    align-items: flex-start;
    gap: 1.25rem;
    flex-direction: column;
  }
  .hero-disciplines {
    gap: 1.0625rem;
    font-size: 0.6rem;
  }
  .hero-disciplines span + span::before {
    margin-right: 1.0625rem;
  }
  .showcase-panel {
    padding: 1.1875rem;
  }
  .showcase-object {
    height: 17.8125rem;
  }
  .showcase-kicker {
    font-size: 0.6rem;
  }
  .showcase-code {
    font-size: 6rem;
  }
  .showcase-label {
    gap: 0.625rem;
    padding-top: 1.125rem;
  }
  .showcase-label h2 {
    font-size: 1.06rem;
  }
  .showcase-label p {
    font-size: 0.7rem;
  }
  .showcase-switcher button {
    font-size: 0.72rem;
    gap: 0.3125rem;
    padding-inline: 0.375rem;
  }
  .showcase-switcher button span {
    font-size: 0.57rem;
  }
  .hero-baseline {
    font-size: 0.65rem;
    padding-block: 1.125rem;
    gap: 0.625rem;
  }
  .hero-baseline p {
    max-width: 8.125rem;
  }
  .family-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .family-grid--five .family-card {
    padding: 1rem;
  }
  .family-grid--five .family-card__image {
    height: 7.8125rem;
  }
  .family-grid--five h3 {
    font-size: 1rem;
  }
  .family-grid--five .family-card:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.125rem;
  }
  .family-grid--five .family-card:last-child .family-card__image {
    grid-column: 1;
    grid-row: 1 / 4;
    height: 8.75rem;
    margin: 0;
  }
  .family-grid--five .family-card:last-child .family-card__head {
    grid-column: 2;
    margin-bottom: 0.875rem;
  }
  .family-grid--five .family-card:last-child h3,
  .family-grid--five .family-card:last-child p {
    grid-column: 2;
  }
  .access-feature__grid {
    grid-template-columns: 1fr;
    padding-block: 3.125rem;
    gap: 3.4375rem;
  }
  .access-feature__visual {
    min-height: 20.9375rem;
    padding-right: 4.6875rem;
  }
  .access-feature__product {
    height: 20.3125rem;
  }
  .product-ghost {
    font-size: 7rem;
  }
  .detail-inset {
    width: 46%;
    bottom: -0.75rem;
    right: 0;
  }
  .detail-inset picture {
    height: 5.9375rem;
  }
  .access-feature__copy h2 {
    font-size: 2.6rem;
  }
  .system-steps > a {
    display: block;
  }
  .system-steps picture {
    height: 11.5625rem;
    margin-block: 1.25rem;
  }
  .resource-callout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .resource-stack {
    width: 100%;
    max-width: 22.5rem;
    margin-inline: auto;
    height: 17.5rem;
  }
  .resource-stack img {
    height: 14.0625rem;
  }
}
@media (max-width: 23.125rem) {
  .showcase-object {
    height: 14.375rem;
  }
  .showcase-switcher button {
    font-size: 0.64rem;
  }
  .showcase-switcher button span {
    display: none;
  }
  .showcase-label h2 {
    font-size: 0.94rem;
  }
  .family-grid--five .family-card {
    padding: 0.75rem;
  }
  .family-grid--five .family-card__image {
    height: 6.4375rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-panel {
    animation: none;
  }
  .showcase-hero::before,
  .showcase-hero::after {
    animation: none;
  }
  .showcase-stage,
  .showcase-product img,
  .showcase-explore,
  .showcase-switcher button,
  .hero-text-link,
  .family-grid--five .family-card {
    transition: none;
  }
  .family-grid--five .family-card {
    transition: none;
  }
  .family-grid--five .family-card:hover {
    transform: none;
  }
}
@media print {
  .showcase-hero,
  .lock-system-feature {
    background: white;
    color: black;
  }
  .showcase-hero h1,
  .showcase-copy h1 span,
  .lock-system-feature h2 {
    color: black;
  }
  .showcase-switcher,
  .hero-baseline,
  .hero-disciplines {
    display: none;
  }
  .showcase-grid {
    display: block;
  }
  .product-showcase {
    max-width: 28.125rem;
  }
}