.case-page {
  --case-background: var(--color-surface-raised);
  --case-action-font-size: clamp(14px, 4.4vw, 60px);
  --case-content-width: 1400px;
  --case-copy-font-size: clamp(28px, 4.4vw, 60px);
  --case-copy-leading: 1.08;
  --case-copy-tracking: -0.04em;
  --case-title-font-size: var(--font-size-display);
  --case-title-leading: var(--leading-display);
  --case-title-tracking: var(--tracking-display);
  --case-navigation-gap: clamp(32px, 5vw, 72px);
  --case-padding: 48px;
  --case-control-radius: 16px;
  --case-media-gap: clamp(24px, 4.2vw, 60px);
  --case-navigation-fade: linear-gradient(
    to bottom,
    var(--case-background) 0%,
    color-mix(in srgb, var(--case-background) 95.7%, transparent) 12.5%,
    color-mix(in srgb, var(--case-background) 84.4%, transparent) 25%,
    color-mix(in srgb, var(--case-background) 68.4%, transparent) 37.5%,
    color-mix(in srgb, var(--case-background) 50%, transparent) 50%,
    color-mix(in srgb, var(--case-background) 31.6%, transparent) 62.5%,
    color-mix(in srgb, var(--case-background) 15.6%, transparent) 75%,
    color-mix(in srgb, var(--case-background) 4.3%, transparent) 87.5%,
    transparent 100%
  );
  --case-player-radius: 0px;
  --case-section-spacing: clamp(72px, 10vw, 144px);
  background: var(--case-background);
}

.case-page--rounded-content {
  --case-player-radius: 24px;
}

.case-stage {
  width: min(100%, calc(var(--case-content-width) + var(--case-padding) + var(--case-padding)));
  margin-inline: auto;
  padding-inline: var(--case-padding);
}

.case-back {
  position: sticky;
  top: 0;
  z-index: 10;
  isolation: isolate;
  margin: 0 0 var(--case-navigation-gap);
  background: transparent;
}

.case-back::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--case-navigation-fade);
  pointer-events: none;
  content: "";
  transition: opacity var(--motion-fast) ease;
}

.case-back--spectrum::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background: linear-gradient(
    to right,
    var(--color-spectrum-01) 0%,
    var(--color-spectrum-02) 6.25%,
    var(--color-spectrum-03) 12.5%,
    var(--color-spectrum-04) 18.75%,
    var(--color-spectrum-05) 25%,
    var(--color-spectrum-06) 31.25%,
    var(--color-spectrum-07) 37.5%,
    var(--color-spectrum-08) 43.75%,
    var(--color-spectrum-09) 50%,
    var(--color-spectrum-10) 56.25%,
    var(--color-spectrum-11) 62.5%,
    var(--color-spectrum-12) 68.75%,
    var(--color-spectrum-13) 75%,
    var(--color-spectrum-14) 81.25%,
    var(--color-spectrum-15) 87.5%,
    var(--color-spectrum-16) 93.75%,
    var(--color-spectrum-17) 100%
  );
  pointer-events: none;
  content: "";
  transition: opacity var(--motion-fast) ease;
}

.case-back > * {
  position: relative;
  z-index: 1;
}

.case-back--spectrum:focus-visible {
  color: var(--color-on-spectrum);
  background-color: transparent;
}

.case-back--spectrum:focus-visible::before {
  opacity: 0;
}

.case-back--spectrum:focus-visible::after {
  opacity: 1;
}

.case-stream {
  overflow: hidden;
}

.case-stream img {
  display: block;
  width: 100%;
  height: auto;
}

.case-media-sequence {
  display: flex;
  flex-direction: column;
  gap: var(--case-media-gap);
}

.case-gap {
  width: 100%;
  aspect-ratio: var(--case-gap-ratio, 1400 / 51);
}

.case-text-module {
  padding-block: var(--case-section-spacing);
  color: var(--color-text-primary);
}

.case-text-module > * {
  margin: 0;
}

.case-text-module > * + * {
  margin-top: var(--space-stack);
}

.case-text-module h1,
.case-text-module h2,
.case-text-module p {
  font-size: var(--case-copy-font-size);
  font-weight: var(--font-weight-site);
  letter-spacing: var(--case-copy-tracking);
  line-height: var(--case-copy-leading);
  text-align: left;
}

.case-text-module h1 {
  font-size: var(--case-title-font-size);
  letter-spacing: var(--case-title-tracking);
  line-height: var(--case-title-leading);
}

.case-title-line {
  display: block;
}

.case-text-module a {
  color: inherit;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  transition: color var(--motion-fast) ease;
}

.case-embed,
.case-link-button:not(.case-figma-button),
.stylized-text-group--brown {
  --case-ios-shape: shape(
    from calc(1.6 * var(--case-ios-radius)) 0,
    hline to calc(100% - 1.6 * var(--case-ios-radius)),
    curve to calc(100% - 0.546 * var(--case-ios-radius)) calc(0.109 * var(--case-ios-radius)) with calc(100% - 1.04 * var(--case-ios-radius)) 0 / calc(100% - 0.76 * var(--case-ios-radius)) 0,
    arc to calc(100% - 0.109 * var(--case-ios-radius)) calc(0.546 * var(--case-ios-radius)) of var(--case-ios-radius) cw,
    curve to 100% calc(1.6 * var(--case-ios-radius)) with 100% calc(0.76 * var(--case-ios-radius)) / 100% calc(1.04 * var(--case-ios-radius)),
    vline to calc(100% - 1.6 * var(--case-ios-radius)),
    curve to calc(100% - 0.109 * var(--case-ios-radius)) calc(100% - 0.546 * var(--case-ios-radius)) with 100% calc(100% - 1.04 * var(--case-ios-radius)) / 100% calc(100% - 0.76 * var(--case-ios-radius)),
    arc to calc(100% - 0.546 * var(--case-ios-radius)) calc(100% - 0.109 * var(--case-ios-radius)) of var(--case-ios-radius) cw,
    curve to calc(100% - 1.6 * var(--case-ios-radius)) 100% with calc(100% - 0.76 * var(--case-ios-radius)) 100% / calc(100% - 1.04 * var(--case-ios-radius)) 100%,
    hline to calc(1.6 * var(--case-ios-radius)),
    curve to calc(0.546 * var(--case-ios-radius)) calc(100% - 0.109 * var(--case-ios-radius)) with calc(1.04 * var(--case-ios-radius)) 100% / calc(0.76 * var(--case-ios-radius)) 100%,
    arc to calc(0.109 * var(--case-ios-radius)) calc(100% - 0.546 * var(--case-ios-radius)) of var(--case-ios-radius) cw,
    curve to 0 calc(100% - 1.6 * var(--case-ios-radius)) with 0 calc(100% - 0.76 * var(--case-ios-radius)) / 0 calc(100% - 1.04 * var(--case-ios-radius)),
    vline to calc(1.6 * var(--case-ios-radius)),
    curve to calc(0.109 * var(--case-ios-radius)) calc(0.546 * var(--case-ios-radius)) with 0 calc(1.04 * var(--case-ios-radius)) / 0 calc(0.76 * var(--case-ios-radius)),
    arc to calc(0.546 * var(--case-ios-radius)) calc(0.109 * var(--case-ios-radius)) of var(--case-ios-radius) cw,
    curve to calc(1.6 * var(--case-ios-radius)) 0 with calc(0.76 * var(--case-ios-radius)) 0 / calc(1.04 * var(--case-ios-radius)) 0,
    close
  );
}

.case-cover--rounded-top {
  --case-ios-radius: clamp(48px, 8vw, 128px);
  --case-ios-top-shape: shape(
    from calc(1.6 * var(--case-ios-radius)) 0,
    hline to calc(100% - 1.6 * var(--case-ios-radius)),
    curve to calc(100% - 0.546 * var(--case-ios-radius)) calc(0.109 * var(--case-ios-radius)) with calc(100% - 1.04 * var(--case-ios-radius)) 0 / calc(100% - 0.76 * var(--case-ios-radius)) 0,
    arc to calc(100% - 0.109 * var(--case-ios-radius)) calc(0.546 * var(--case-ios-radius)) of var(--case-ios-radius) cw,
    curve to 100% calc(1.6 * var(--case-ios-radius)) with 100% calc(0.76 * var(--case-ios-radius)) / 100% calc(1.04 * var(--case-ios-radius)),
    vline to 100%,
    hline to 0,
    vline to calc(1.6 * var(--case-ios-radius)),
    curve to calc(0.109 * var(--case-ios-radius)) calc(0.546 * var(--case-ios-radius)) with 0 calc(1.04 * var(--case-ios-radius)) / 0 calc(0.76 * var(--case-ios-radius)),
    arc to calc(0.546 * var(--case-ios-radius)) calc(0.109 * var(--case-ios-radius)) of var(--case-ios-radius) cw,
    curve to calc(1.6 * var(--case-ios-radius)) 0 with calc(0.76 * var(--case-ios-radius)) 0 / calc(1.04 * var(--case-ios-radius)) 0,
    close
  );

  border-radius: var(--case-ios-radius) var(--case-ios-radius) 0 0;
  border-shape: var(--case-ios-top-shape);
}

.case-edge-fade {
  position: relative;
}

.case-edge-fade::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--case-background) 0%,
    color-mix(in srgb, var(--case-background) 96%, transparent) 2.5%,
    color-mix(in srgb, var(--case-background) 84%, transparent) 5%,
    color-mix(in srgb, var(--case-background) 68%, transparent) 7.5%,
    color-mix(in srgb, var(--case-background) 50%, transparent) 10%,
    color-mix(in srgb, var(--case-background) 32%, transparent) 12.5%,
    color-mix(in srgb, var(--case-background) 16%, transparent) 15%,
    color-mix(in srgb, var(--case-background) 4%, transparent) 17.5%,
    transparent 20%,
    transparent 80%,
    color-mix(in srgb, var(--case-background) 4%, transparent) 82.5%,
    color-mix(in srgb, var(--case-background) 16%, transparent) 85%,
    color-mix(in srgb, var(--case-background) 32%, transparent) 87.5%,
    color-mix(in srgb, var(--case-background) 50%, transparent) 90%,
    color-mix(in srgb, var(--case-background) 68%, transparent) 92.5%,
    color-mix(in srgb, var(--case-background) 84%, transparent) 95%,
    color-mix(in srgb, var(--case-background) 96%, transparent) 97.5%,
    var(--case-background) 100%
  );
  pointer-events: none;
  content: "";
}

.case-edge-mask {
  position: relative;
}

.case-edge-mask--bottom::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: max(1px, 0.18%);
  background: var(--case-background);
  pointer-events: none;
  content: "";
}

.case-embed {
  --case-skeleton-surface: var(--color-surface-raised);
  --case-skeleton-glow: var(--color-surface-subtle);
  --case-ios-radius: var(--case-player-radius);

  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--case-embed-ratio);
  background: var(--case-background);
  border-radius: var(--case-player-radius);
  border-shape: var(--case-ios-shape);
  isolation: isolate;
}

.case-embed--contained {
  max-width: var(--case-embed-max-width);
  margin-inline: auto;
}

.case-embed::before,
.case-embed::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  transition: opacity 320ms ease;
}

.case-embed::before {
  z-index: 2;
  background: var(--case-skeleton-surface);
}

.case-embed::after {
  z-index: 3;
  opacity: 0.35;
  box-shadow: inset 0 0 clamp(72px, 14vw, 220px) var(--case-skeleton-glow);
  animation: case-skeleton-glow 2.4s ease-in-out infinite alternate;
}

.case-embed.is-ready::before,
.case-embed.is-ready::after {
  opacity: 0;
}

.case-embed.is-ready::after {
  animation: none;
}

.case-embed iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--case-background);
  color-scheme: normal;
}

@keyframes case-skeleton-glow {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 0.85;
  }
}

.case-link-button {
  justify-content: center;
  border-radius: var(--case-control-radius);
  text-align: center;
}

.case-link-button:not(.case-figma-button) {
  --case-ios-radius: var(--case-control-radius);

  border-shape: var(--case-ios-shape);
}

.case-support-logo {
  width: calc(1em * var(--case-copy-leading));
  height: calc(1em * var(--case-copy-leading));
  flex: none;
  color: var(--color-brand-boosty);
  fill: currentColor;
  transition: color var(--motion-fast) ease;
}

.case-support-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-icon-label);
}

.case-figma-button {
  color: var(--color-surface-canvas);
  background-color: var(--color-text-primary);
  border-radius: 999px;
  box-shadow: inset 0 0 0 var(--rule-thin) var(--color-text-primary);
  font-size: var(--case-action-font-size);
  line-height: var(--case-copy-leading);
  letter-spacing: var(--case-copy-tracking);
  white-space: nowrap;
}

.case-figma-logo {
  width: calc(1em * var(--case-copy-leading));
  height: calc(1em * var(--case-copy-leading));
}

.case-link-module--outro {
  padding-block: var(--case-section-spacing);
}

.case-cta {
  padding-block: 0 var(--case-navigation-gap);
}

.case-cta--after {
  padding-block: var(--case-navigation-gap) var(--case-section-spacing);
}

.case-cta p,
.case-contacts a {
  font-size: var(--case-copy-font-size);
  line-height: var(--case-copy-leading);
  letter-spacing: var(--case-copy-tracking);
}

.case-cta p {
  margin: 0 0 44px;
  color: var(--color-text-primary);
}

.case-cta p:last-child {
  margin-bottom: 0;
}

.case-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack-tight);
}

.case-contacts a {
  color: var(--color-text-primary);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

@media (hover: hover) {
  .case-back:hover::before {
    opacity: 0;
  }

  .case-back--spectrum:hover {
    color: var(--color-on-spectrum);
    background-color: transparent;
  }

  .case-back--spectrum:hover::after {
    opacity: 1;
  }

  .case-support-link:hover .case-support-logo {
    color: inherit;
  }

  .case-figma-button:hover {
    color: var(--color-text-primary);
    background-color: var(--case-background);
  }

  .case-contacts a:hover {
    color: var(--color-accent);
  }

  .case-text-module a:hover {
    color: var(--color-accent);
  }
}

@media (max-width: 700px) {
  .case-page {
    --case-copy-font-size: clamp(22px, 7vw, 28px);
    --case-padding: 0;
  }

  .case-edge-fade::after {
    display: none;
  }

  .case-link-module {
    padding-inline: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .case-back::before,
  .case-back--spectrum::after,
  .case-embed::before,
  .case-embed::after {
    transition: none;
  }

  .case-embed::after {
    opacity: 0.55;
    animation: none;
  }

  .case-embed.is-ready::after {
    opacity: 0;
  }
}