/* One shared typeface and a padded content area inside the hero-sized card. */
.v2 .platform-story {
  --story-nav-height: 64px;
  --story-card-height: clamp(580px, calc(100svh - 132px), 920px);
  --story-card-inset: 16px;
  --story-inset-x: clamp(24px, 5vw, 80px);
  --story-inset-y: clamp(24px, 3vh, 36px);
  width: calc(100% - 2 * var(--v2-gutter));
  max-width: calc(var(--v2-max) - 2 * var(--v2-gutter));
  margin: 0 auto 40px; position: relative;
  border-radius: var(--story-card-radius, var(--v2-radius));
  background: transparent; color: #f4f5f5; font-family: var(--v2-font);
}
.v2 .platform-story-stage { position: relative; border-radius: inherit; overflow: hidden; background: #080b10; container-name: platform-card; }
.v2 .platform-story-art { width: 100%; height: min(55vw, 600px); position: relative; pointer-events: none; }
.v2 .platform-story-poster { width: 100%; height: 100%; object-fit: contain; }
.v2 .platform-story-canvas { position: absolute; inset: 0; }
.v2 .platform-story-canvas canvas { width: 100%; height: 100%; display: block; }
.v2 .platform-story-topline {
  position: absolute; top: var(--story-inset-y); left: var(--story-inset-x); right: var(--story-inset-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #a4adb7; font: 400 .85rem/1.4 var(--v2-font); letter-spacing: 0;
}
.v2 .platform-story-topline a { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px 0; }
.v2 .platform-story-topline a:hover { color: #fff; }
.v2 .platform-story-copy { padding: 20px var(--story-inset-x) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.v2 .platform-story-chapter { min-width: 0; }
.v2 .platform-story-chapter h2 { font: 400 clamp(2rem, 3.5vw, 3.4rem)/1.14 var(--v2-font); letter-spacing: -.03em; text-wrap: balance; }
.v2 .platform-story-chapter p { color: #b4bbc3; font: 400 clamp(1rem, 1.25vw, 1.18rem)/1.6 var(--v2-font); max-width: 52ch; margin-top: 24px; text-wrap: pretty; letter-spacing: 0; }
.v2 .story-label { display: block; color: #a2afbf; margin-bottom: 20px; font: 400 .85rem/1.45 var(--v2-font); letter-spacing: 0; }
.v2 .story-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  min-height: 48px; padding: 12px 22px; margin-top: 28px;
  border: 1px solid #697580; border-radius: 999px; background: rgba(255,255,255,.02);
  font: 400 .94rem/1.4 var(--v2-font); letter-spacing: 0;
}
.v2 .story-link:hover { border-color: #e1e9f1; background: rgba(255,255,255,.06); }
.v2 .platform-story a:focus-visible, .v2 .platform-story button:focus-visible { outline: 2px solid #9dc1ff; outline-offset: 6px; }
.v2 .platform-story.is-interactive { height: 430svh; }
.v2 .platform-story.is-interactive .platform-story-stage {
  position: sticky; top: calc(var(--story-nav-height) + var(--story-card-inset)); height: var(--story-card-height); container-type: size;
}
.v2 .platform-story.is-interactive .platform-story-art { position: absolute; inset: 0; height: 100%; }
.v2 .platform-story.is-interactive .platform-story-poster { opacity: 0; }
.v2 .platform-story.is-interactive .platform-story-copy { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; }
.v2 .platform-story.is-interactive .platform-story-chapter { position: absolute; opacity: 0; pointer-events: none; will-change: opacity; }
.v2 .platform-story.is-interactive .platform-story-chapter.is-active { pointer-events: auto; }
.v2 .platform-story.is-interactive .story-overview,
.v2 .platform-story.is-interactive .story-connected {
  --story-art-position: top;
  left: 50%; bottom: calc(var(--story-inset-y) + 80px); width: min(780px, calc(100% - 2 * var(--story-inset-x)));
  transform: translateX(-50%); text-align: center;
}
.v2 .platform-story.is-interactive .story-overview h2,
.v2 .platform-story.is-interactive .story-connected h2 { font-size: clamp(2rem, 2.8vw, 2.8rem); }
.v2 .platform-story.is-interactive .story-overview h2 br { display: none; }
.v2 .platform-story.is-interactive .story-overview .story-label,
.v2 .platform-story.is-interactive .story-connected .story-label { margin-bottom: 14px; }
.v2 .platform-story.is-interactive .story-overview p,
.v2 .platform-story.is-interactive .story-connected p { margin: 20px auto 0; max-width: 72ch; font-size: 1.06rem; line-height: 1.55; }
.v2 .platform-story.is-interactive .story-startups,
.v2 .platform-story.is-interactive .story-smbs { width: min(38%, 520px); top: 50%; transform: translateY(-50%); }
.v2 .platform-story.is-interactive .story-startups { --story-art-position: right; left: var(--story-inset-x); }
.v2 .platform-story.is-interactive .story-smbs { --story-art-position: left; right: var(--story-inset-x); }
.v2 .platform-story-bottom {
  position: absolute; bottom: var(--story-inset-y); left: var(--story-inset-x); right: var(--story-inset-x);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.v2 .platform-story-bottom[hidden] { display: none; }
.v2 .platform-story-steps { display: flex; gap: 24px; }
.v2 .platform-story-steps button {
  padding: 8px 0; min-height: 34px; border: 0; background: none; color: #94a0ad; cursor: pointer;
  font: 400 .76rem/1.4 var(--v2-font); display: flex; align-items: center; gap: 8px;
}
.v2 .platform-story-steps button[aria-current] { color: #e3ebf3; }
.v2 .story-step-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.v2 .platform-story-steps button[aria-current] .story-step-dot { background: #729aff; box-shadow: 0 0 9px #5778c7; }
.v2 .platform-story-scroll { color: #a4adb7; font: 400 .85rem/1.4 var(--v2-font); }
.v2 .platform-story-scroll span { padding-left: 14px; }
/* Wide, shallow cards use the same generous split layout for the opening and close. */
@container platform-card (min-aspect-ratio: 2/1) {
  .v2 .platform-story.is-interactive .story-overview,
  .v2 .platform-story.is-interactive .story-connected {
    --story-art-position: right;
    left: var(--story-inset-x); top: 50%; bottom: auto; width: min(40%, 540px); transform: translateY(-50%); text-align: left;
  }
  .v2 .platform-story.is-interactive .story-overview h2 br { display: initial; }
  .v2 .platform-story.is-interactive .story-overview p,
  .v2 .platform-story.is-interactive .story-connected p { margin-left: 0; margin-right: 0; }
}
@media (max-width: 860px) {
  .v2 .platform-story-topline { font-size: .75rem; gap: 12px; }
  .v2 .platform-story-copy { grid-template-columns: 1fr; gap: 52px; padding-bottom: 48px; }
  .v2 .platform-story.is-interactive { height: 400svh; }
  .v2 .platform-story-steps { gap: 16px; width: 100%; justify-content: space-between; }
  .v2 .platform-story-steps button { font-size: .7rem; gap: 6px; }
  .v2 .platform-story-scroll { display: none; }
}
@container platform-card (max-width: 860px) {
  .v2 .platform-story.is-interactive .platform-story-chapter {
    --story-art-position: top;
    top: auto; bottom: calc(var(--story-inset-y) + 78px); left: var(--story-inset-x); right: auto;
    width: calc(100% - 2 * var(--story-inset-x)); max-width: none; transform: none; text-align: left;
  }
  .v2 .platform-story.is-interactive .platform-story-chapter h2 { font-size: clamp(1.65rem, 4.5cqw, 2.3rem); }
  .v2 .platform-story.is-interactive .platform-story-chapter h2 br { display: none; }
  .v2 .platform-story.is-interactive .platform-story-chapter p { font-size: .94rem; line-height: 1.55; margin: 18px 0 0; max-width: 60ch; }
  .v2 .platform-story.is-interactive .platform-story-chapter .story-label { font-size: .78rem; margin-bottom: 14px; }
  .v2 .platform-story.is-interactive .story-link { margin-top: 24px; min-height: 44px; padding: 10px 18px; font-size: .88rem; }
}
@container platform-card (max-width: 860px) and (max-height: 640px) {
  .v2 .platform-story.is-interactive .platform-story-chapter { bottom: calc(var(--story-inset-y) + 66px); }
  .v2 .platform-story.is-interactive .platform-story-chapter h2 { font-size: 1.5rem; }
  .v2 .platform-story.is-interactive .platform-story-chapter .story-label { margin-bottom: 10px; }
  .v2 .platform-story.is-interactive .platform-story-chapter p { font-size: .85rem; line-height: 1.5; margin-top: 14px; }
  .v2 .platform-story.is-interactive .story-link { margin-top: 18px; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .platform-story-chapter { scroll-margin-top: 100px; }
}