.scenario-experience {
  --scenario-header-height: 64px;
  --scenario-nav-height: 64px;
  color: #202124;
}
.scenario-experience h1,
.scenario-experience h2,
.scenario-experience h3,
.scenario-experience p {
  margin: 0;
}
.scenario-container {
  width: calc(100% - 80px);
  max-width: 1312px;
  margin-inline: auto;
}
.scenario-intro {
  height: min(824px, calc(100svh - 64px));
  min-height: 564px;
  position: relative;
  overflow: hidden;
  background: #30332d;
  color: #fff;
}
.scenario-intro > img,
.scenario-intro-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scenario-intro-shade {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 46%), rgb(0 0 0 / 8%)),
    linear-gradient(0deg, rgb(0 0 0 / 28%), transparent 40%);
}
.scenario-intro-copy {
  padding-top: var(--scenario-header-height);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 35px;
}
.scenario-eyebrow {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.scenario-intro h1 {
  max-width: 960px;
  margin-top: 18px;
  font-size: clamp(36px, 4.1vw, 64px);
  line-height: 1.22;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.scenario-intro-copy > p:last-child {
  max-width: 540px;
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.8;
  color: rgb(255 255 255 / 90%);
}
@media (prefers-reduced-motion: no-preference) {
  .scenario-intro-copy > * {
    animation: scenario-intro-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .scenario-intro-copy > h1 {
    animation-delay: 0.12s;
  }
  .scenario-intro-copy > p:last-child {
    animation-delay: 0.24s;
  }
}
@keyframes scenario-intro-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scenario-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.scenario-scroll-cue span {
  font-size: 22px;
}
.scenario-navigation {
  position: sticky;
  top: var(--scenario-header-height);
  z-index: 35;
  height: var(--scenario-nav-height);
  background: rgb(255 255 255 / 96%);
  border-bottom: 1px solid #ededf0;
  backdrop-filter: blur(12px);
}
.scenario-navigation-links {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 64px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.scenario-navigation-links::-webkit-scrollbar {
  display: none;
}
.scenario-navigation a {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: #73747a;
  transition: color 0.2s;
}
.scenario-navigation a:hover,
.scenario-navigation a[aria-current] {
  color: #202124;
}
.scenario-navigation a[aria-current] {
  font-weight: 600;
}
.scenario-navigation a::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  bottom: 0;
  left: calc(50% - 8px);
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.25s;
}
.scenario-navigation a[aria-current]::after {
  transform: scaleX(1);
}
.scenario-chapter {
  padding: 100px 0;
  scroll-margin-top: calc(var(--scenario-header-height) + var(--scenario-nav-height));
}
.scenario-chapter:nth-of-type(odd) {
  background: #f7f8fa;
}
.scenario-chapter:focus {
  outline: none;
}
.scenario-chapter:focus-visible {
  outline: 2px solid #1683ff;
  outline-offset: -4px;
}
.scenario-chapter-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 40px;
}
.scenario-chapter-heading .scenario-eyebrow {
  color: #777981;
  margin-bottom: 13px;
}
.scenario-chapter-heading h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.scenario-chapter-intro {
  flex: 0 1 360px;
  color: #73747a;
  font-size: 16px;
  line-height: 1.85;
}
.scenario-chapter-intro a {
  display: inline-block;
  margin-top: 14px;
  color: #202124;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 40px 24px;
}
.scenario-card {
  grid-column: span 2;
  min-width: 0;
  scroll-margin-top: calc(var(--scenario-header-height) + var(--scenario-nav-height) + 24px);
}
.scenario-card-media {
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9ebed;
  border-radius: 12px;
}
.scenario-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.scenario-card-copy {
  padding: 24px 0 0;
}
.scenario-card-label {
  color: #73747a;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px !important;
}
.scenario-card h3 {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.scenario-card-description {
  margin-top: 12px !important;
  max-width: 38em;
  color: #73747a;
  font-size: 15px;
  line-height: 1.85;
}
.scenario-card--featured {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.scenario-card--featured .scenario-card-media {
  border-radius: 0;
  aspect-ratio: 2.3;
  min-height: 420px;
}
.scenario-card--featured h3 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.3;
}
.scenario-card--featured .scenario-card-description {
  font-size: 16px;
}
.scenario-card--featured .scenario-card-label {
  font-size: 14px;
  margin-bottom: 16px !important;
}
.scenario-chapter--immersive .scenario-card--featured .scenario-card-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
  color: #fff;
  background: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 6%) 80%);
}
.scenario-chapter--immersive .scenario-card--featured .scenario-card-label,
.scenario-chapter--immersive .scenario-card--featured .scenario-card-description {
  color: rgb(255 255 255 / 88%);
}
.scenario-chapter--split .scenario-card--featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: #eef0f2;
}
.scenario-chapter--split .scenario-card--featured .scenario-card-media {
  aspect-ratio: auto;
  min-height: 490px;
}
.scenario-chapter--split .scenario-card--featured .scenario-card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 64px);
}
.scenario-chapter:nth-of-type(odd) .scenario-card--featured {
  background: #fff;
}
.scenario-question {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #dfe1e5;
}
.scenario-question span {
  font-size: 12px;
  color: #73747a;
}
.scenario-question p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}
.scenario-outro {
  padding-block: 120px;
  text-align: center;
}
.scenario-outro .scenario-eyebrow {
  color: #73747a;
}
.scenario-outro h2 {
  margin: 18px auto 32px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  text-wrap: balance;
}
.scenario-outro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: 16px;
}
.scenario-buy {
  padding: 12px 26px;
  background: #1683ff;
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s;
}
.scenario-buy:hover {
  background: #258bff;
}
.scenario-outro-actions > a:last-child:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.scenario-experience a:focus-visible {
  outline: 2px solid #1683ff;
  outline-offset: 5px;
}
/* Images stay opaque; only text moves, so repeated entries do not flash. */
.scenario-experience[data-motion='on'] [data-reveal] .scenario-card-copy,
.scenario-experience[data-motion='on'] .scenario-chapter-heading,
.scenario-experience[data-motion='on'] .scenario-outro {
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.scenario-experience[data-motion='on'] [data-revealed='false'] .scenario-card-copy,
.scenario-experience[data-motion='on'] .scenario-chapter-heading[data-revealed='false'],
.scenario-experience[data-motion='on'] .scenario-outro[data-revealed='false'] {
  opacity: 0;
  transform: translateY(22px);
}
.scenario-experience[data-motion='on']
  .scenario-chapter--immersive
  [data-revealed='false']
  .scenario-card-copy {
  opacity: 1;
  transform: none;
}
.scenario-experience[data-motion='on']
  .scenario-chapter--immersive
  .scenario-card--featured
  .scenario-card-copy
  > * {
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.scenario-experience[data-motion='on']
  .scenario-chapter--immersive
  [data-revealed='false']
  .scenario-card-copy
  > * {
  opacity: 0;
  transform: translateY(22px);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scenario-card:hover .scenario-card-media img {
    transform: scale(1.035);
  }
}
@media (min-width: 1000px) {
  .scenario-card:not(.scenario-card--featured):nth-last-child(2):nth-child(3n + 2),
  .scenario-card:not(.scenario-card--featured):last-child:nth-child(3n + 3) {
    grid-column: span 3;
  }
}
@media (max-width: 999px) {
  .scenario-container {
    width: calc(100% - 48px);
  }
  .scenario-chapter {
    padding: 72px 0;
  }
  .scenario-chapter-heading {
    gap: 30px;
  }
  .scenario-chapter-intro {
    flex-basis: 280px;
    font-size: 15px;
  }
  .scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  .scenario-card {
    grid-column: span 1;
  }
  .scenario-card--featured {
    grid-column: 1 / -1;
  }
  .scenario-card:not(.scenario-card--featured):last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
  .scenario-card:not(.scenario-card--featured):last-child:nth-child(even) .scenario-card-media {
    aspect-ratio: 2;
  }
  .scenario-chapter--split .scenario-card--featured .scenario-card-media {
    min-height: 400px;
  }
  .scenario-chapter--immersive .scenario-card--featured .scenario-card-copy {
    padding: 36px;
  }
}
@media (max-width: 600px) {
  .scenario-experience {
    --scenario-nav-height: 56px;
  }
  .scenario-container {
    width: calc(100% - 40px);
  }
  .scenario-intro {
    height: 82svh;
    min-height: 544px;
    max-height: 744px;
  }
  .scenario-intro-copy {
    justify-content: flex-start;
    padding-top: 136px;
  }
  .scenario-intro h1 {
    max-width: 310px;
    font-size: 38px;
  }
  .scenario-intro-copy > p:last-child {
    font-size: 15px;
    max-width: 290px;
    margin-top: 20px;
  }
  .scenario-intro-shade {
    background: linear-gradient(180deg, rgb(0 0 0 / 55%), rgb(0 0 0 / 8%) 85%);
  }
  .scenario-scroll-cue {
    bottom: 24px;
  }
  .scenario-navigation-links {
    width: 100%;
    gap: 32px;
    padding-inline: 20px;
    justify-content: flex-start;
  }
  .scenario-navigation a {
    font-size: 14px;
  }
  .scenario-chapter {
    padding: 60px 0;
  }
  .scenario-chapter-heading {
    display: block;
    margin-bottom: 28px;
  }
  .scenario-chapter-heading h2 {
    font-size: 29px;
  }
  .scenario-chapter-intro {
    margin-top: 18px;
    font-size: 15px;
    max-width: 30em;
  }
  .scenario-eyebrow {
    font-size: 13px;
  }
  .scenario-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .scenario-card,
  .scenario-card--featured {
    grid-column: 1 / -1;
  }
  .scenario-card-media,
  .scenario-card:not(.scenario-card--featured):last-child:nth-child(even) .scenario-card-media {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
  }
  .scenario-card-copy {
    padding-top: 18px;
  }
  .scenario-card h3 {
    font-size: 23px;
  }
  .scenario-card-description {
    margin-top: 9px !important;
    font-size: 14px;
  }
  .scenario-card--featured {
    border-radius: 10px;
  }
  .scenario-card--featured h3 {
    font-size: 30px;
  }
  .scenario-card--featured .scenario-card-description {
    font-size: 14px;
  }
  .scenario-card--featured .scenario-card-media {
    aspect-ratio: 4 / 5;
    min-height: 400px;
  }
  .scenario-chapter--immersive .scenario-card--featured .scenario-card-copy {
    padding: 28px 24px;
  }
  .scenario-chapter--split .scenario-card--featured {
    display: flex;
    flex-direction: column;
  }
  .scenario-chapter--split .scenario-card--featured .scenario-card-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .scenario-chapter--split .scenario-card--featured .scenario-card-copy {
    padding: 28px 24px 32px;
  }
  .scenario-question {
    margin-top: 24px;
    padding-top: 20px;
  }
  .scenario-outro {
    padding-block: 80px;
  }
  .scenario-outro h2 {
    font-size: 30px;
  }
  .scenario-outro-actions {
    font-size: 14px;
    gap: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-experience *,
  .scenario-experience *::after {
    transition: none !important;
  }
  .scenario-experience [data-reveal],
  .scenario-experience .scenario-card-copy,
  .scenario-experience .scenario-card-copy > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

.scenario-title-phrase {
  display: inline-block;
  max-width: 100%;
}

/* Auto margins center short navigation and collapse when more categories overflow. */
.scenario-navigation-links > a:first-child {
  margin-left: auto;
}
.scenario-navigation-links > a:last-child {
  margin-right: auto;
}
@media (max-width: 600px) {
  .scenario-navigation-links > a:first-child {
    margin-left: 0;
  }
  .scenario-navigation-links > a:last-child {
    margin-right: 0;
  }
}