/* Shared public hero taxonomy and hero implementations. */
/* Shared public hero taxonomy.
   New hero styles should target .site-hero, .site-hero--*, and .site-hero__*.
   Variant CSS should only add visual differences on top of these primitives. */
.site-hero {
  position: relative;
}

:where(.site-hero__image, .site-hero__video) {
  display: block;
}

:where(.site-hero > .site-hero__image, .site-hero > .site-hero__video) {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.site-hero > .site-hero__picture {
  inset: 0;
  position: absolute;
}

.site-hero > .site-hero__picture > .site-hero__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 767.98px) {
  .site-hero > .site-hero__picture > .site-hero__image {
    object-position: var(--site-hero-mobile-object-position, center center) !important;
  }
}

:where(.site-hero__overlay, .site-hero__backdrop) {
  pointer-events: none;
}

:where(.site-hero > .site-hero__overlay, .site-hero > .site-hero__backdrop) {
  inset: 0;
  position: absolute;
}

:where(.site-hero > .container) {
  position: relative;
  z-index: 1;
}

:where(.site-hero__title) {
  font-family: var(--site-heading-font, var(--cc-font-primary));
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  text-transform: var(--site-heading-transform, uppercase);
}

:where(.site-hero__lede, .site-hero__copy, .site-hero__meta) {
  line-height: var(--cc-line-body);
}

:where(.site-hero__actions) {
  display: flex;
  gap: var(--cc-space-3);
}

@media (min-width: 576px) {
  :where(.site-hero__actions) {
    flex-direction: row;
  }
}

:where(.site-hero--align-center .site-hero__content) {
  margin-inline: auto;
  text-align: center;
}

:where(.site-hero--align-center .site-hero__lede) {
  margin-inline: auto;
}

/* ==========================================================
   02_creatorcore_public
   ========================================================== */

.hero-section {
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--cc-brand-teal) 14%, transparent), transparent 34rem), linear-gradient(180deg, var(--cc-neutral-white) 0%, var(--cc-color-surface) 100%);
}

.section-muted {
  background: var(--cc-neutral-fog);
}

.homepage-narrow {
  max-width: 42rem;
}

.product-copy {
  color: var(--cc-color-text-muted);
  font-size: var(--cc-type-base);
  line-height: var(--cc-line-body);
}

.product-copy p:last-child {
  margin-bottom: 0;
}

.site-hero--product {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--site-background, var(--cc-brand-mist)) 92%, var(--site-primary, var(--cc-brand-ocean))) 0 38%, transparent 38%),
    radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--site-accent-highlight, var(--site-accent, var(--cc-secondary-peach))) 46%, transparent), transparent 24rem),
    radial-gradient(circle at 12% 28%, color-mix(in srgb, var(--site-accent, var(--cc-brand-aqua)) 36%, transparent), transparent 30rem),
    linear-gradient(145deg, var(--site-background, var(--cc-brand-mist)) 0%, color-mix(in srgb, var(--site-background, var(--cc-brand-mist)) 76%, var(--site-accent, var(--cc-secondary-apricot))) 100%);
  color: var(--site-text, var(--cc-color-text));
  overflow: hidden;
  padding: var(--site-section-spacing) 0 var(--cc-space-8);
}

.page-content > .site-hero--product:first-child,
.page-content > main > .site-hero--product:first-child {
  padding-top: calc(var(--site-section-spacing) + var(--site-floating-navbar-offset));
}

.site-hero--product .site-hero__title {
  color: var(--site-text, var(--cc-color-text));
  font-size: var(--site-hero-product-title-size, var(--cc-type-3xl));
  font-weight: var(--site-heading-weight);
  line-height: var(--cc-line-tight);
  margin-bottom: var(--cc-space-6);
  text-transform: var(--site-heading-transform, uppercase);
}

.site-hero--product .site-hero__media {
  margin-inline: auto;
  max-width: 34rem;
  min-height: 34rem;
  position: relative;
}

.site-hero--product .site-hero__media img {
  border-radius: var(--site-media-radius, 2rem .85rem 2rem .85rem);
  box-shadow: 0 1.4rem 3rem color-mix(in srgb, var(--site-primary) 18%, transparent);
  height: 34rem;
  object-fit: cover;
  width: 100%;
}

.site-hero--product .site-hero__media::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--site-accent-soft, var(--site-accent, var(--cc-brand-aqua))) 58%, transparent), color-mix(in srgb, var(--site-accent-contrast, var(--site-accent, var(--cc-secondary-coral))) 64%, transparent));
  border-radius: var(--site-media-radius, 2rem .85rem 2rem .85rem);
  content: "";
  inset: var(--cc-space-4) calc(var(--cc-space-4) * -1) calc(var(--cc-space-4) * -1) var(--cc-space-4);
  position: absolute;
  z-index: 0;
}

.site-hero--product .site-hero__media img,
.site-hero__stat {
  position: relative;
  z-index: 1;
}

.site-hero__stat {
  background: color-mix(in srgb, var(--site-surface) 88%, transparent);
  border: 1px;
  border-radius: var(--site-panel-radius, 1rem);
  box-shadow: 0 1rem 2.5rem rgba(20, 17, 15, .08);
  display: grid;
  gap: var(--cc-space-1);
  max-width: 11rem;
  padding: var(--cc-space-4);
  position: absolute;
}

.site-hero__stat strong {
  color: var(--site-accent);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-xl);
  line-height: var(--cc-line-tight);
}

.site-hero__stat span {
  color: color-mix(in srgb, var(--site-text) 70%, var(--site-muted-text));
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-line-heading);
}

.site-hero__stat--top {
  right: calc(var(--cc-space-5) * -1);
  top: var(--cc-space-6);
}

.site-hero__stat--bottom {
  bottom: var(--cc-space-6);
  left: calc(var(--cc-space-5) * -1);
}

/* ==========================================================
   18_site_heroes
   ========================================================== */

/* site-hero selectors are the public hero system. Keep old wrapper aliases out
   of new markup and CSS unless a component-specific internal hook needs them. */

.site-kicker {
  margin-bottom: var(--cc-space-4);
}

:is(.site-hero--homepage, .site-hero--trailer) {

  align-items: center;
  background: #176589;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--site-hero-trailer-min-height);
  overflow: hidden;
}

.page-content > .site-hero--homepage:first-child,
.page-content > main > .site-hero--homepage:first-child {
  padding-top: var(--site-floating-navbar-offset);
}

:is(.site-hero--homepage, .site-hero--trailer) .site-hero__overlay {
  background: var(--site-hero-homepage-overlay);
  opacity: var(--site-hero-homepage-overlay-opacity);
}

.site-hero--homepage.site-hero--overlay-left {
  --site-hero-homepage-overlay: linear-gradient(90deg, rgba(5, 39, 55, .9), rgba(5, 39, 55, .54), rgba(5, 39, 55, .16));
  --site-hero-homepage-overlay-opacity: .72;
}

.site-hero--homepage.site-hero--overlay-balanced {
  --site-hero-homepage-overlay: linear-gradient(180deg, rgba(5, 39, 55, .18) 0%, rgba(5, 39, 55, .54) 48%, rgba(5, 39, 55, .9) 100%);
  --site-hero-homepage-overlay-opacity: .78;
}

.site-hero--homepage.site-hero--overlay-warm {
  --site-hero-homepage-overlay: linear-gradient(120deg, color-mix(in srgb, var(--cc-secondary-crimson) 74%, transparent), color-mix(in srgb, var(--cc-secondary-tomato) 42%, transparent) 54%, rgba(var(--cc-rgb-neutral-charcoal), .36)), linear-gradient(0deg, rgba(var(--cc-rgb-neutral-charcoal), .68), transparent 52%);
  --site-hero-homepage-overlay-opacity: .82;
}

.site-hero--homepage.site-hero--overlay-cool {
  --site-hero-homepage-overlay: linear-gradient(120deg, color-mix(in srgb, var(--cc-brand-ocean) 82%, transparent), color-mix(in srgb, var(--cc-brand-aqua) 38%, transparent) 56%, rgba(var(--cc-rgb-neutral-charcoal), .32)), linear-gradient(0deg, rgba(var(--cc-rgb-neutral-charcoal), .62), transparent 54%);
  --site-hero-homepage-overlay-opacity: .8;
}

.site-hero--homepage.site-hero--overlay-spotlight {
  --site-hero-homepage-overlay: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .2), transparent 22rem), linear-gradient(180deg, rgba(5, 39, 55, .32) 0%, rgba(5, 39, 55, .72) 72%, rgba(5, 39, 55, .94) 100%);
  --site-hero-homepage-overlay-opacity: .86;
}

.site-hero__content {
  box-sizing: border-box;
  max-width: 48rem;
  padding: var(--site-hero-homepage-padding-top) 0 var(--site-hero-homepage-padding-bottom);
}

.page-content > .site-hero--homepage:first-child .site-hero__content,
.page-content > main > .site-hero--homepage:first-child .site-hero__content {
  padding-top: calc(var(--site-hero-homepage-padding-top) + var(--site-floating-navbar-offset));
}

.site-hero--align-center .site-hero__content .d-flex {
  justify-content: center;
}

:is(.site-hero--homepage, .site-hero--trailer) .site-hero__title {
  color: #FFFFFF;
  font-size: var(--site-hero-homepage-title-size, var(--cc-type-4xl));
  font-weight: var(--site-heading-weight);
  margin-bottom: var(--cc-space-4);
  line-height: var(--cc-line-heading);
}

:is(.site-hero--homepage, .site-hero--trailer) .site-hero__lede {
  color: rgba(255, 255, 255, .82);
  font-size: var(--cc-type-lg);
  margin-bottom: var(--cc-space-7);
  max-width: 40rem;
}

.site-home > .site-hero--homepage:first-child {
  min-height: var(--site-hero-trailer-min-height);
}

.site-home > .site-hero--homepage:first-child .site-hero__title {
  max-width: 10ch;
}

.site-home > .site-hero--homepage:first-child .site-hero__lede {
  max-width: 44rem;
}

/* Homepage hero spacing scale.
   Edit these values directly when tuning responsive hero padding. */
@media (max-width: 1199.98px) {
  .site-hero__content {
    --site-hero-homepage-padding-top: 10rem;
    --site-hero-homepage-padding-bottom: var(--cc-space-8);
  }
}

@media (max-width: 991.98px) {
  :is(.site-hero--homepage, .site-hero--trailer) {
    --site-hero-homepage-padding-top: 7rem;
    --site-hero-homepage-padding-bottom: var(--cc-space-8);
  }
}

@media (max-width: 767.98px) {
  :is(.site-hero--homepage, .site-hero--trailer) {
    --site-hero-homepage-padding-top: 5rem;
    --site-hero-homepage-padding-bottom: var(--cc-space-7);
  }
}

@media (max-width: 575.98px) {
  :is(.site-hero--homepage, .site-hero--trailer) {
    --site-hero-homepage-padding-top: 4rem;
    --site-hero-homepage-padding-bottom: var(--cc-space-8);
    min-height: 48rem;
  }
}
.site-hero__content {
      --site-hero-homepage-padding-top: 10rem;
    --site-hero-homepage-padding-bottom: var(--cc-space-8);
}

.site-hero--page {
  align-items: end;
  background: linear-gradient(135deg, #176589, #0F415B);
  color: #FFFFFF;
  display: flex;
  min-height: clamp(24rem, 42vh, 42rem);
  overflow: hidden;
}

.site-hero--page .site-hero__overlay {
  background: linear-gradient(90deg, rgba(5, 39, 55, .9), rgba(5, 39, 55, .58), rgba(5, 39, 55, .24));
  opacity: .82;
}

.site-hero--page .site-hero__content {
  max-width: 50rem;
  padding: clamp(12rem, 15vh, 15rem) 0 clamp(3rem, 5vh, 5rem);
}

.site-hero--page .site-hero__eyebrow {
  color: #7FE7E7;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  margin-top: var(--cc-space-4);
  margin-bottom: var(--cc-space-2);
  text-transform: uppercase;
}

.site-hero--page .site-hero__title {
  color: #FFFFFF;
  font-size: var(--site-hero-page-title-size, var(--cc-type-3xl));
  font-weight: var(--site-heading-weight);
  margin-bottom: var(--cc-space-4);
}

.site-hero--page .site-hero__lede {
  color: rgba(255, 255, 255, .82);
  font-size: var(--cc-type-lg);
  margin-bottom: 0;
  max-width: 43rem;
}

.site-page-header {
  --site-page-header-bg: linear-gradient(135deg, color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 10%, var(--site-surface, var(--cc-neutral-white))), var(--site-surface, var(--cc-neutral-white)));
  --site-page-header-border: color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 12%, transparent);
  --site-page-header-eyebrow: var(--site-accent, var(--cc-brand-teal));
  --site-page-header-text: var(--site-text, var(--cc-color-text));
  --site-page-header-muted: var(--site-muted-text, var(--cc-color-text-muted));
  background: var(--site-page-header-bg);
  border-block: 1px solid var(--site-page-header-border);
  color: var(--site-page-header-text);
  padding-block: clamp(4.5rem, 9vw, 7rem);
  position: relative;
}

.site-page-header--default {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 14%, transparent), transparent 22rem),
    var(--site-page-header-bg);
}

.site-page-header--hero {
  --site-page-header-bg: var(--site-page-header-hero-bg);
  --site-page-header-border: var(--site-page-header-hero-border);
  --site-page-header-eyebrow: var(--site-page-header-hero-eyebrow);
  --site-page-header-text: var(--site-page-header-hero-text);
  --site-page-header-muted: var(--site-page-header-hero-muted);
  align-items: var(--site-page-header-hero-align-items);
  display: flex;
  min-height: var(--site-page-header-hero-min-height);
  overflow: hidden;
  padding-block: 0;
}

.site-page-header__image {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.site-page-header__overlay {
  background: var(--site-page-header-hero-overlay-style);
  inset: 0;
  opacity: var(--site-page-header-hero-overlay-style-opacity);
  pointer-events: none;
  position: absolute;
}

.site-page-header--hero {
  --site-page-header-hero-overlay-style: var(--site-page-header-hero-overlay-brand);
  --site-page-header-hero-overlay-style-opacity: var(--site-page-header-hero-overlay-brand-opacity);
}

.site-page-header--hero.site-page-header--overlay-dark {
  --site-page-header-hero-overlay-style: var(--site-page-header-hero-overlay-dark);
  --site-page-header-hero-overlay-style-opacity: var(--site-page-header-hero-overlay-dark-opacity);
}

.site-page-header--hero.site-page-header--overlay-soft {
  --site-page-header-hero-overlay-style: var(--site-page-header-hero-overlay-soft);
  --site-page-header-hero-overlay-style-opacity: var(--site-page-header-hero-overlay-soft-opacity);
}

.site-page-header--hero.site-page-header--overlay-heat {
  --site-page-header-hero-overlay-style: var(--site-page-header-hero-overlay-heat);
  --site-page-header-hero-overlay-style-opacity: var(--site-page-header-hero-overlay-heat-opacity);
}

.site-page-header--hero.site-page-header--overlay-black {
  --site-page-header-hero-overlay-style: var(--site-page-header-hero-overlay-black);
  --site-page-header-hero-overlay-style-opacity: var(--site-page-header-hero-overlay-black-opacity);
}

.site-page-header__container {
  position: relative;
  z-index: 1;
}

.site-page-header .site-page-header__content {
  display: grid;
  gap: var(--cc-space-2);
  margin-bottom: 0;
  max-width: 50rem;
}

.site-page-header .site-page-header__eyebrow {
  color: var(--site-page-header-eyebrow);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-line-caption);
  margin: 0;
  text-transform: var(--site-eyebrow-transform, uppercase);
}

.site-page-header .site-page-header__title {
  color: var(--site-page-header-text);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-page-header-title-size, clamp(var(--cc-type-2xl), 4vw, var(--cc-type-4xl)));
  font-weight: var(--site-heading-weight);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  margin: 0;
  max-width: 52rem;
  text-transform: var(--site-heading-transform, uppercase);
}

.site-page-header .site-page-header__body {
  color: var(--site-page-header-muted);
  font-family: var(--site-body-font, var(--cc-font-secondary));
  font-size: var(--site-page-header-body-size);
  line-height: var(--cc-line-body);
  margin: 0;
  max-width: 44rem;
}

.site-page-header .site-page-header__microcopy {
  color: var(--site-page-header-muted);
  font-family: var(--site-body-font, var(--cc-font-secondary));
  font-size: var(--site-page-header-microcopy-size, var(--cc-type-base));
  line-height: var(--cc-line-body);
  margin: 0;
  max-width: 44rem;
}

.site-page-header .site-page-header__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  margin-top: var(--cc-space-3);
}

.site-page-header--hero .site-page-header__content {
  margin-inline: var(--site-page-header-hero-content-margin-inline);
  max-width: var(--site-page-header-hero-content-max-width);
  padding: var(--site-page-header-hero-content-padding);
  text-align: var(--site-page-header-hero-content-text-align);
}

.site-page-header--hero .site-page-header__title {
  margin-inline: var(--site-page-header-hero-title-margin-inline);
  max-width: var(--site-page-header-hero-title-max-width);
  text-transform: var(--site-page-header-hero-heading-transform);
}

.site-page-header--hero .site-page-header__body,
.site-page-header--hero .site-page-header__microcopy {
  margin-inline: var(--site-page-header-hero-content-margin-inline);
}

.site-page-header--align-center .site-page-header__content {
  --site-page-header-hero-content-margin-inline: auto;
  --site-page-header-hero-content-text-align: center;
  --site-page-header-hero-title-margin-inline: auto;
}

.site-page-header--align-center .site-page-header__body,
.site-page-header--align-center .site-page-header__microcopy {
  margin-inline: auto;
}

.site-page-header--scene-detail {
  --site-page-header-hero-overlay-style: var(--site-scene-detail-hero-overlay);
  --site-page-header-hero-overlay-style-opacity: var(--site-scene-detail-hero-overlay-opacity);
  align-items: var(--site-scene-detail-hero-align-items);
}

.site-page-header--scene-detail .site-page-header__content {
  margin-inline: var(--site-scene-detail-hero-content-margin-inline);
  max-width: var(--site-scene-detail-hero-content-max-width);
  padding: var(--site-scene-detail-hero-content-padding);
  text-align: var(--site-scene-detail-hero-content-text-align);
}

.site-page-header--scene-detail .site-page-header__title {
  margin-inline: var(--site-scene-detail-hero-title-margin-inline);
  max-width: var(--site-scene-detail-hero-title-max-width);
  text-transform: var(--site-scene-detail-hero-heading-transform);
}

.site-page-header--scene-detail .site-page-header__body,
.site-page-header--scene-detail .site-page-header__microcopy {
  margin-inline: var(--site-scene-detail-hero-content-margin-inline);
}

@media (min-width: 576px) {
  .site-page-header .site-page-header__actions {
    flex-direction: row;
  }
}

.scene-show-body,
.scene-watch-panel,
.scene-credits-panel,
.scene-next-panel {
  --scene-detail-age-badge-height: 3rem;
  --scene-detail-age-badge-width: 3rem;
}

.scene-show-body {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--site-accent) 10%, white), white 34rem);
  overflow: hidden;
  padding: var(--cc-space-4) 0 var(--cc-space-7) 0;
}

.scene-detail-layout {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 5vw, 4rem);
}

.scene-meta-bar {
  backdrop-filter: var(--site-scene-meta-backdrop-filter);
  background: var(--site-scene-meta-surface);
  border: 1px solid var(--site-scene-meta-border);
  border-radius: var(--site-panel-radius);
  box-shadow: var(--site-scene-meta-shadow);
  margin-top: var(--cc-space-4);
  overflow: hidden;
}

.scene-meta-bar__head {
  align-items: center;
  display: flex;
  gap: var(--cc-space-1);
  justify-content: space-between;
  padding: var(--cc-space-3) var(--cc-space-2);
}

.scene-meta-bar__top {
  align-items: center;
  display: block;
}

.scene-meta-bar__notice {
  display: flex;
  margin-left: auto;
}

.scene-meta-bar__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--site-scene-meta-toggle-color);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.5rem;
  justify-content: center;
  padding: 0;
  transition: color var(--cc-motion-fast) var(--cc-motion-ease), transform var(--cc-motion-fast) var(--cc-motion-ease);
  width: 2.5rem;
}

.scene-meta-bar__toggle:hover,
.scene-meta-bar__toggle:focus-visible {
  color: var(--site-primary);
}

.scene-meta-bar__toggle[aria-expanded="true"] :is(i, .ui-icon) {
  transform: rotate(180deg);
}

.scene-meta-bar__body {
  min-height: 0;
  overflow: hidden;
}

.scene-meta-bar__content {
  border-top: 1px solid var(--site-scene-meta-divider);
  padding: var(--cc-space-3);
}

.scene-meta-bar__collapse--ready {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--site-scene-meta-collapse-duration) var(--site-scene-meta-collapse-ease),
    opacity var(--site-scene-meta-collapse-duration) var(--site-scene-meta-collapse-ease);
}

.scene-meta-bar__collapse--ready.scene-meta-bar__collapse--expanded {
  grid-template-rows: 1fr;
  opacity: 1;
}

.scene-meta-bar__lede {
  color: var(--site-scene-meta-copy-color);
  font-size: var(--cc-type-base);
  line-height: var(--cc-line-body);
  margin: 0;
  max-width: 68rem;
  white-space: pre-line;
}

.scene-meta-bar__details {
  display: grid;
  gap: var(--cc-space-2) var(--cc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: var(--cc-space-4) 0 0;
}

.scene-meta-bar__details div {
  display: grid;
  gap: var(--cc-space-1);
}

.scene-meta-bar__details dt,
.scene-meta-bar__tags-wrap h3 {
  color: var(--site-scene-meta-label-color);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-xs);
  font-weight: var(--site-eyebrow-weight, var(--cc-weight-black));
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-line-caption);
  margin: 0;
  text-transform: var(--site-eyebrow-transform, uppercase);
}

.scene-meta-bar__details dd {
  color: var(--site-text);
  font-size: var(--cc-type-sm);
  line-height: var(--cc-line-body);
  margin: 0;
}

.scene-meta-bar__tags-wrap {
  border-top: 1px solid var(--site-scene-meta-divider);
  margin-top: var(--cc-space-4);
  padding-top: var(--cc-space-3);
}

.scene-meta-bar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-2);
}

.scene-meta-bar__tag {
  align-items: center;
  background: var(--site-scene-meta-tag-surface);
  border: 1px solid var(--site-scene-meta-tag-border);
  border-radius: var(--site-pill-radius);
  color: var(--site-scene-meta-tag-text);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-xs);
  font-weight: var(--site-eyebrow-weight, var(--cc-weight-black));
  display: inline-flex;
  gap: var(--cc-space-2);
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-line-caption);
  padding: .55rem .85rem;
  text-decoration: none;
  text-transform: var(--site-eyebrow-transform, uppercase);
  transition: background-color var(--cc-motion-fast) var(--cc-motion-ease), color var(--cc-motion-fast) var(--cc-motion-ease), transform var(--cc-motion-fast) var(--cc-motion-ease);
}

.scene-meta-bar__tag:hover,
.scene-meta-bar__tag:focus-visible {
  background: var(--site-scene-meta-tag-hover-surface);
  color: var(--site-scene-meta-tag-hover-text);
  transform: translateY(-1px);
}

.scene-meta-bar__tag-count {
  align-items: center;
  aspect-ratio: 1;
  background: var(--site-scene-meta-tag-count-surface);
  border: 1px solid var(--site-scene-meta-tag-count-border);
  border-radius: 50%;
  display: inline-flex;
  font-family: var(--site-body-font, var(--cc-font-primary));
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
  height: var(--site-scene-meta-tag-count-size);
  justify-content: center;
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  width: var(--site-scene-meta-tag-count-size);
}

.scene-meta-bar__top .scene-meta-bar__item {
  color: var(--site-text, var(--cc-color-text));
  display: inline-flex;
  font-size: var(--cc-type-sm);
  font-weight: var(--cc-weight-bold);
  text-transform: uppercase;
  gap: var(--cc-space-2);
  line-height: var(--cc-line-tight);
  padding: var(--cc-space-2) var(--cc-space-3);
}

.scene-meta-bar__top > span:not(.scene-duration-badge) :is(i, .ui-icon) {
  color: var(--site-accent, var(--cc-brand-teal));
}

.scene-detail-layout__main {
  display: grid;
  gap: var(--cc-space-5);
}

.scene-detail-gallery {
  --scene-detail-gallery-gap: var(--cc-space-2);
  --site-hero-scene-min-height: 32rem;
  display: grid;
  gap: var(--scene-detail-gallery-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}

.scene-detail-gallery__hero {
  --scene-detail-gallery-hero-transition: 1500ms;
  aspect-ratio: 1 / 1.36439;
  background: var(--site-primary, var(--cc-neutral-charcoal));
  border-radius: var(--site-media-radius);
  box-shadow: 0 1.4rem 3rem color-mix(in srgb, var(--site-primary) 18%, transparent);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.scene-detail-gallery__hero-link {
  display: block;
  inset: 0;
  opacity: 1;
  position: absolute;
  transform: scale(1);
  transition:
    opacity var(--scene-detail-gallery-hero-transition) ease,
    transform var(--scene-detail-gallery-hero-transition) ease;
  will-change: opacity, transform;
}

.scene-detail-gallery__hero-link:not(.scene-detail-gallery__hero-link--secondary) {
  z-index: 1;
}

.scene-detail-gallery__hero-link--secondary {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.035);
  z-index: 2;
}

.scene-detail-gallery__hero--has-secondary.reveal .scene-detail-gallery__hero-link:not(.scene-detail-gallery__hero-link--secondary) {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.035);
}

.scene-detail-gallery__hero--has-secondary.reveal .scene-detail-gallery__hero-link--secondary {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.scene-detail-gallery__hero-image {
  height: 100%;
  object-fit: cover;
  transition:
    opacity var(--scene-detail-gallery-hero-transition) ease,
    transform var(--scene-detail-gallery-hero-transition) ease;
  will-change: opacity, transform;
  width: 100%;
}

.scene-detail-gallery__hero > .scene-detail-gallery__hero-image {
  inset: 0;
  opacity: 1;
  position: absolute;
}

.scene-detail-gallery__hero--has-secondary.reveal .scene-detail-gallery__hero-image--primary {
  opacity: 0;
  transform: scale(1.035);
}

.scene-detail-gallery__side {
  display: grid;
  gap: var(--scene-detail-gallery-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
  min-height: 0;
}

.scene-detail-gallery__tile {
  aspect-ratio: 1 / .7316;
  background: var(--site-surface);
  border: 0;
  border-radius: var(--site-media-radius, 1.15rem .6rem 1.15rem .6rem);
  box-shadow: 0 1rem 2rem rgba(var(--cc-rgb-neutral-charcoal), .1);
  color: var(--cc-neutral-white);
  display: block;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.scene-detail-gallery__tile img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  transition:
    filter .35s ease,
    transform var(--cc-motion-slow) var(--cc-motion-ease);
  width: 100%;
}

.scene-detail-gallery__tile:hover img {
  transform: scale(1.04);
}

.scene-detail-gallery__tile--gated img {
  filter: blur(16px);
  transform: scale(1.04);
}

.scene-detail-gallery-shell.scene-detail-gallery--age-unlocked .scene-detail-gallery__tile--gated img {
  filter: none;
  transform: scale(1);
}

.scene-detail-gallery-shell.scene-detail-gallery--age-unlocked .scene-detail-gallery__age-gate--trailer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 .12rem .45rem rgba(var(--cc-rgb-black), .45);
}

.scene-detail-gallery-shell.scene-detail-gallery--age-unlocked .scene-detail-gallery__age-gate--trailer::before {
  display: none;
}

.scene-detail-gallery__age-gate {
  align-items: center;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--cc-rgb-white), .15), transparent 34%),
    rgba(var(--cc-rgb-black), .48);
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(var(--cc-rgb-white), .16),
    0 .35rem 1rem rgba(var(--cc-rgb-black), .18);
  color: var(--cc-neutral-white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  gap: var(--cc-space-2);
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  text-align: center;
  transition:
    background .3s ease,
    box-shadow .35s ease,
    transform .35s ease;
  z-index: 2;
}

.scene-detail-gallery__age-gate::before {
  background: linear-gradient(110deg, transparent 18%, rgba(var(--cc-rgb-white), .22) 46%, transparent 72%);
  content: "";
  inset: -45% -80%;
  opacity: .55;
  position: absolute;
  transform: translateX(-44%) rotate(8deg);
  animation: scene-age-gate-sheen 4.8s ease-in-out infinite;
}

.scene-detail-gallery__age-gate:hover,
.scene-detail-gallery__age-gate:focus-visible {
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--cc-rgb-white), .2), transparent 36%),
    rgba(var(--cc-rgb-black), .54);
  box-shadow:
    inset 0 1px 0 rgba(var(--cc-rgb-white), .2),
    0 .8rem 1.8rem rgba(var(--cc-rgb-black), .26);
  transform: translateY(-2px);
}

.scene-detail-gallery__age-gate:active {
  box-shadow:
    inset 0 .2rem .7rem rgba(var(--cc-rgb-black), .34),
    0 .35rem .9rem rgba(var(--cc-rgb-black), .22);
  transform: translateY(0);
}

.scene-detail-gallery__age-gate--trailer {
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--cc-rgb-white), .15), transparent 34%),
    rgba(var(--cc-rgb-black), .48);
}

.scene-detail-gallery__age-badge {
  align-items: center;
  animation: scene-age-badge-pulse 2.4s ease-out infinite;
  background:
    linear-gradient(
      145deg,
      var(--site-accent, var(--cc-brand-teal)),
      color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 58%, var(--site-primary, var(--cc-neutral-charcoal)))
    );
  border-radius: 999px;
  color: white;
  display: inline-flex;
  font-size: var(--cc-type-base);
  font-style: italic;
  font-weight: var(--cc-weight-black);
  height: var(--scene-detail-age-badge-height);
  justify-content: center;
  position: relative;
  z-index: 1;
  width: var(--scene-detail-age-badge-width);
}

.scene-detail-gallery__age-badge--play :is(i, .ui-icon) {
  font-size: var(--cc-type-sm);
  margin-left: var(--cc-space-1);
}

.scene-detail-gallery__age-copy {
  font-size: var(--cc-type-sm);
  font-style: italic;
  letter-spacing: var(--cc-tracking-narrow);
  line-height: var(--cc-line-tight);
  position: relative;
  z-index: 1;
}

.modal-footer {
  border-top: 0;
}
.age-modal .modal-content {
  background: var(--site-surface, #ffffff);
  border: 1px solid var(--site-border, #d9dde3);
  border-radius: var(--site-panel-radius);
  box-shadow: 0 1.1rem 2.4rem color-mix(in srgb, var(--site-primary, #20242a) 20%, transparent);
  color: var(--site-text, #111318);
}

.age-modal .modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--site-border, #d9dde3);
  gap: var(--cc-space-4);
  justify-content: space-between;
  padding: var(--cc-space-5);
}

.age-modal__heading {
  align-items: center;
  display: flex;
  gap: var(--cc-space-3);
}

.age-modal__badge {
  align-items: center;
  background:
    linear-gradient(145deg, var(--site-accent, var(--cc-brand-teal)), color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 58%, var(--site-primary, var(--cc-neutral-charcoal))));
  border-radius: 999px;
  color: var(--site-primary, var(--cc-neutral-charcoal));
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-base);
  font-style: italic;
  font-weight: var(--cc-weight-black);
  height: 3rem;
  justify-content: center;
  line-height: var(--cc-line-tight);
  width: 3rem;
}

.age-modal__eyebrow {
  color: var(--site-type-eyebrow-color, var(--site-accent, var(--cc-brand-teal)));
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-line-heading);
  margin: 0 0 var(--cc-space-1);
  text-transform: uppercase;
}

.age-modal .modal-title {
  color: var(--site-heading-accent, #20242a);
  font-family: var(--site-heading-font, "Montserrat", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: var(--cc-type-lg);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-narrow);
  text-transform: uppercase;
}

.age-modal .modal-body {
  font-family: var(--site-body-font, "Karla", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: var(--cc-type-md);
  line-height: var(--cc-line-body);
  gap: var(--cc-space-4);
}

.age-modal .modal-body p {
  margin-bottom: var(--cc-space-4);
}

.age-modal .modal-body p:last-child {
  margin-bottom: 0;
}

.age-modal .modal-footer {
  justify-content: center;
  gap: var(--cc-space-2);
  padding: 0 var(--cc-space-5) var(--cc-space-5) var(--cc-space-5);
}

.age-modal .btn-close {
  filter: invert(18%) sepia(24%) saturate(0%) hue-rotate(165deg) brightness(96%) contrast(88%);
  opacity: .82;
}

.age-modal .btn-close:hover {
  opacity: 1;
}

@keyframes scene-age-badge-pulse {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 42%, transparent),
      inset 0 1px 0 rgba(var(--cc-rgb-white), .32);
  }

  72% {
    box-shadow:
      0 0 0 .8rem color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 0%, transparent),
      inset 0 1px 0 rgba(var(--cc-rgb-white), .32);
  }

  100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 0%, transparent),
      inset 0 1px 0 rgba(var(--cc-rgb-white), .32);
  }
}

@keyframes scene-age-gate-sheen {
  0%, 52% {
    opacity: 0;
    transform: translateX(-44%) rotate(8deg);
  }

  68% {
    opacity: .55;
  }

  100% {
    opacity: 0;
    transform: translateX(44%) rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-meta-bar__collapse--ready {
    transition: none;
  }

  .scene-detail-gallery__age-gate,
  .scene-detail-gallery__age-badge,
  .scene-detail-gallery__age-gate::before {
    animation: none;
    transition: none;
  }
}

.scene-detail-gallery__caption {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(var(--cc-rgb-black), .52);
  border: 1px solid rgba(var(--cc-rgb-white), .18);
  border-radius: var(--site-pill-radius, 999px);
  bottom: var(--cc-space-3);
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  padding: var(--cc-space-1) var(--cc-space-2);
  position: absolute;
  right: var(--cc-space-3);
  text-transform: var(--site-eyebrow-transform, uppercase);
}

.scene-detail-gallery__tile--trailer {
  aspect-ratio: 1 / .5792;
  grid-column: 1 / -1;
}

.scene-detail-gallery__trailer-frame {
  aspect-ratio: 1 / .5792;
  border-radius: var(--site-image-radius, var(--site-card-radius, var(--cc-radius-lg)));
  grid-column: 1 / -1;
  overflow: hidden;
  position: relative;
}

.scene-detail-gallery__trailer-frame .scene-detail-gallery__tile--trailer {
  height: 100%;
  width: 100%;
}

.scene-detail-gallery__trailer-frame--gated img {
  filter: blur(16px);
  transform: scale(1.04);
}

.scene-detail-gallery-shell.scene-detail-gallery--age-unlocked .scene-detail-gallery__trailer-frame--gated img {
  filter: none;
  transform: scale(1);
}

.scene-detail-gallery__tile--placeholder {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(var(--cc-rgb-black), .1), rgba(var(--cc-rgb-black), .02)),
    var(--site-surface);
  color: var(--site-muted, var(--cc-color-muted));
  display: flex;
  flex-direction: column;
  font-size: var(--cc-type-base);
  gap: var(--cc-space-2);
  justify-content: center;
  text-align: center;
}

.scene-detail-gallery__placeholder-badge {
  border: 1px solid var(--site-border);
  border-radius: var(--site-pill-radius, 999px);
  color: var(--site-text, var(--cc-color-text));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  padding: var(--cc-space-1) var(--cc-space-2);
  text-transform: var(--site-eyebrow-transform, uppercase);
}

.scene-detail-gallery__tile--trailer::after {
  background: linear-gradient(0deg, rgba(var(--cc-rgb-black), .62), transparent 65%);
  content: "";
  inset: 0;
  position: absolute;
}

.scene-detail-gallery__tile--trailer-preview::after {
  display: none;
}

.scene-detail-gallery__play {
  align-items: center;
  bottom: var(--cc-space-4);
  display: inline-flex;
  gap: var(--cc-space-3);
  left: var(--cc-space-4);
  position: absolute;
  z-index: 1;
}

.scene-detail-gallery__trailer-frame .scene-detail-gallery__play {
  align-items: center;
  bottom: auto;
  flex-direction: column;
  font-size: var(--cc-type-base);
  gap: var(--cc-space-3);
  left: 50%;
  padding: 0;
  text-shadow: 0 .12rem .45rem rgba(var(--cc-rgb-black), .45);
  top: 50%;
  transform: translate(-50%, -50%);
}

.scene-detail-gallery__trailer-frame .scene-detail-gallery__play :is(i, .ui-icon) {
  animation: scene-age-badge-pulse 2.4s ease-out infinite;
}

.scene-detail-gallery__tile--trailer-modal .scene-detail-gallery__play {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(var(--cc-rgb-black), .52);
  border: 1px solid rgba(var(--cc-rgb-white), .18);
  border-radius: 999px;
  bottom: auto;
  font-size: var(--cc-type-base);
  left: 50%;
  padding: var(--cc-space-3) var(--cc-space-4) var(--cc-space-3) var(--cc-space-3);
  text-shadow: 0 .12rem .45rem rgba(var(--cc-rgb-black), .45);
  top: 50%;
  transform: translate(-50%, -50%);
}

.scene-detail-gallery__tile--trailer-modal .scene-detail-gallery__play :is(i, .ui-icon) {
  animation: scene-age-badge-pulse 2.4s ease-out infinite;
}

.scene-detail-gallery__play :is(i, .ui-icon) {
  align-items: center;
  background: var(--site-accent, var(--cc-brand-teal));
  border-radius: 999px;
  color: var(--site-primary, var(--cc-neutral-charcoal));
  display: inline-flex;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.au-content-note {
  display: flex;
  justify-content: flex-end;
  margin: var(--cc-space-3) 0 var(--cc-space-4);
}

.au-content-note__button {
  align-items: center;
  background: color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 10%, var(--site-surface));
  border: 1px solid color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 24%, transparent);
  border-radius: var(--site-pill-radius, 999px);
  color: var(--site-text, var(--cc-color-text));
  display: inline-flex;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
  gap: var(--cc-space-2);
  padding: var(--cc-space-1) var(--cc-space-3);
}

.geo-preview-toggle {
  --geo-preview-drawer-width: min(13rem, calc(100vw - 3.25rem));
  --geo-preview-tab-width: 3.25rem;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  max-width: calc(var(--geo-preview-drawer-width) + var(--geo-preview-tab-width));
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1055;
}

.geo-preview-toggle__details {
  align-items: stretch;
  display: flex;
  overflow: hidden;
  position: relative;
  transition: width var(--cc-motion-base) var(--cc-motion-ease);
  width: var(--geo-preview-tab-width);
}

.geo-preview-toggle__details[open] {
  width: calc(var(--geo-preview-drawer-width) + var(--geo-preview-tab-width));
}

.geo-preview-toggle__details > summary {
  list-style: none;
}

.geo-preview-toggle__details > summary::-webkit-details-marker {
  display: none;
}

.geo-preview-toggle__trigger {
  align-items: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(18, 20, 24, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--cc-radius-sm) 0 0 var(--cc-radius-sm);
  box-shadow: 0 1rem 3rem rgba(var(--cc-rgb-black), .28);
  color: var(--cc-neutral-white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  gap: .34rem;
  justify-content: center;
  line-height: var(--cc-line-tight);
  min-height: 5.7rem;
  padding: .54rem .24rem;
  position: relative;
  text-transform: uppercase;
  user-select: none;
  width: var(--geo-preview-tab-width);
  z-index: 2;
}

.geo-preview-toggle__trigger-title,
.geo-preview-toggle__scene-label {
  color: rgba(255, 255, 255, .94);
  font-size: var(--cc-type-xxs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-line-tight);
  text-align: center;
  text-transform: uppercase;
}

.geo-preview-toggle__trigger:hover,
.geo-preview-toggle__details[open] .geo-preview-toggle__trigger {
  background: rgba(18, 20, 24, .98);
  border-color: rgba(255, 255, 255, .22);
}

.geo-preview-toggle__trigger-pill {
  align-items: stretch;
  color: rgba(255, 255, 255, .78);
  display: grid;
  font-size: var(--cc-type-xxs);
  font-weight: var(--cc-weight-bold);
  gap: .18rem;
  justify-items: stretch;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.geo-preview-toggle__trigger-label {
  color: rgba(255, 255, 255, .62);
  line-height: var(--cc-line-tight);
  text-align: center;
}

.geo-preview-toggle__trigger-value {
  align-items: center;
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: var(--cc-neutral-white);
  display: inline-flex;
  font-size: var(--cc-type-xxs);
  font-weight: var(--cc-weight-black);
  justify-content: center;
  min-height: 1.32rem;
  overflow: hidden;
  padding: .2rem .24rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.geo-preview-toggle__card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(18, 20, 24, .94);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  border-right: 0;
  box-shadow: 0 1rem 3rem rgba(var(--cc-rgb-black), .28);
  color: var(--cc-neutral-white);
  display: grid;
  flex: 0 0 var(--geo-preview-drawer-width);
  gap: var(--cc-space-2);
  opacity: 0;
  padding: var(--cc-space-2);
  pointer-events: none;
  transition: opacity var(--cc-motion-base) var(--cc-motion-ease);
  width: var(--geo-preview-drawer-width);
}

.geo-preview-toggle__scene-tools {
  align-items: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(18, 20, 24, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 var(--cc-radius-sm);
  box-shadow: 0 1rem 3rem rgba(var(--cc-rgb-black), .28);
  display: grid;
  gap: .28rem;
  padding: .42rem .24rem .5rem;
  position: relative;
  width: var(--geo-preview-tab-width);
  z-index: 1;
}

.geo-preview-toggle__scene-edit {
  background: #ffd166;
  border-radius: 999px;
  color: #241600;
  font-size: var(--cc-type-xxs);
  font-weight: var(--cc-weight-black);
  line-height: var(--cc-line-tight);
  padding: .32rem .24rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

.geo-preview-toggle__scene-edit:hover {
  background: #ffe199;
  color: #241600;
}

.geo-preview-toggle__details[open] .geo-preview-toggle__card {
  opacity: 1;
  pointer-events: auto;
}

.geo-preview-toggle__header {
  align-items: center;
  display: flex;
  gap: var(--cc-space-2);
  justify-content: space-between;
}

.geo-preview-toggle__title,
.geo-preview-toggle__status {
  border-radius: 999px;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  line-height: var(--cc-line-tight);
  white-space: nowrap;
}

.geo-preview-toggle__title {
  color: rgba(255, 255, 255, .92);
}

.geo-preview-toggle__status {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .72);
  padding: .35rem .5rem;
}

.geo-preview-toggle__section {
  display: grid;
  gap: var(--cc-space-2);
}

.geo-preview-toggle__row,
.geo-preview-toggle__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
}

.geo-preview-toggle__label,
.geo-preview-toggle__pill,
.geo-preview-toggle__button {
  border-radius: 999px;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-line-tight);
  padding: var(--cc-space-2) var(--cc-space-2);
  text-decoration: none;
  white-space: nowrap;
}

.geo-preview-toggle__label {
  color: rgba(255, 255, 255, .9);
  padding-left: 0;
}

.geo-preview-toggle__pill {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
}

.geo-preview-toggle__pill--ok {
  background: rgba(39, 224, 134, .16);
  color: #d9ffe9;
}

.geo-preview-toggle__pill--active {
  background: #ffd166;
  color: #241600;
}

.geo-preview-toggle__button {
  border: 0;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82);
}

.geo-preview-toggle__button:not(:disabled) {
  cursor: pointer;
}

.geo-preview-toggle__button:hover:not(:disabled) {
  background: rgba(255, 255, 255, .16);
  color: var(--cc-neutral-white);
}

.geo-preview-toggle__button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.geo-preview-toggle__button.is-active {
  background: var(--cc-neutral-white);
  color: #111;
}

.geo-preview-toggle__button--primary {
  background: #ffd166;
  color: #241600;
}

.geo-preview-toggle__button--primary:hover {
  background: #ffe199;
  color: #241600;
}

.geo-preview-toggle__button--ghost {
  opacity: .68;
}

.scene-rich-text {
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 72%, var(--site-muted-text));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-line-body);
}

.scene-story-panel .scene-rich-text :is(strong, b) {
  font-weight: var(--site-scene-story-emphasis-weight);
}

.scene-story-panel__title {
  --site-section-title-size: var(--site-scene-story-title-size, var(--cc-type-2xl));
  font-size: var(--site-scene-story-title-size, var(--cc-type-2xl));
  line-height: var(--cc-line-caption);
}

.scene-story-panel .scene-rich-text > :first-child:not(.trix-content),
.scene-story-panel .scene-rich-text > .trix-content > :first-child {
  font-size: var(--site-scene-story-intro-size, var(--cc-type-lg));
  line-height: var(--site-scene-story-intro-line-height);
}

.scene-rich-text p:last-child {
  margin-bottom: 0;
}

.scene-rich-text--extended {
  padding-top: var(--cc-space-4);
}

.scene-extended-detail {
  border-top: 1px solid var(--site-border, rgba(var(--cc-rgb-neutral-charcoal), .08));
  margin-top: var(--cc-space-5);
  padding-top: var(--cc-space-4);
  padding-bottom: var(--cc-space-6);
}

.scene-extended-detail span {
  color: var(--site-primary);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-4);
  text-transform: uppercase;
}

.scene-extended-detail .scene-rich-text--extended {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.scene-extended-detail[open] .scene-rich-text--extended {
  opacity: 1;
}

.scene-extended-detail summary {
  align-items: center;
  color: var(--site-primary, var(--cc-color-text));
  cursor: pointer;
  display: flex;
  font-weight: var(--cc-weight-black);
  justify-content: space-between;
  list-style: none;
  text-transform: uppercase;
}

.scene-extended-detail summary::-webkit-details-marker {
  display: none;
}

.scene-extended-detail[open] summary :is(i, .ui-icon) {
  transform: rotate(180deg);
}

.watch-options {
  background: var(--site-watch-section-background);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  padding-block: var(--site-watch-section-padding-block);
  width: 100%;
}
.watch-options .watch-options__header {
  margin-bottom: 1rem;
}

.watch-options__header {
  margin: 0 auto var(--site-watch-header-margin-bottom);
  max-width: 48rem;
  margin-bottom: 1rem;
  position: relative;
  text-align: center;
}

.watch-options .watch-options__title {
  color: var(--site-watch-title-color);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-watch-title-size);
  font-weight: var(--site-section-heading-weight);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  margin: 0 0 var(--site-watch-title-margin-bottom);
  text-transform: var(--site-heading-transform, uppercase);
}

.watch-options__title-accent {
  color: var(--site-watch-title-accent-color);
  display: inline-block;
}

.watch-options .watch-options__lede,
.watch-options__destination-copy {
  color: var(--site-watch-lede-color);
  font-size: var(--site-watch-lede-size);
  line-height: var(--cc-line-body);
  margin-bottom: 0;
}

.watch-options__duration {
  display: flex;
  justify-content: center;
  margin-top: var(--cc-space-3);
}

.scene-duration--watch {
  justify-content: center;
}

.watch-options__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-inline: auto;
  max-width: 76rem;
}

.watch-options__cuts {
  display: grid;
  gap: var(--site-watch-cuts-gap);
  grid-template-columns: minmax(0, 1fr);
}

.watch-options__cuts--single {
  margin-inline: auto;
  max-width: var(--site-watch-single-cut-max-width);
}

.watch-options__cut-card {
  border-radius: var(--site-watch-cut-radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--site-watch-cut-padding);
  text-align: center;
}

.watch-options__cut-card--standard {
  background: var(--site-watch-standard-panel-background);
  border: 1px solid var(--site-watch-standard-panel-border);
  box-shadow: var(--site-watch-standard-panel-shadow);
}

.watch-options__cut-card--extended {
  background: var(--site-watch-extended-panel-background);
  border: 1px solid var(--site-watch-extended-panel-border);
  box-shadow: var(--site-watch-extended-panel-shadow);
}

.watch-options__cut-title {
  color: var(--site-watch-standard-title-color);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-watch-cut-title-size);
  font-weight: var(--site-section-heading-weight);
  line-height: var(--cc-line-tight);
  margin: 0;
  text-transform: var(--site-heading-transform, uppercase);
}

.watch-options__cut-card--extended .watch-options__cut-title {
  color: var(--site-watch-extended-title-color);
}

.watch-options__cut-copy {
  color: var(--site-watch-standard-copy-color);
  font-size: var(--site-watch-cut-copy-size);
  line-height: var(--cc-line-body);
  margin: 0 0 var(--cc-space-6);
}

.watch-options__cut-card--extended .watch-options__cut-copy {
  color: var(--site-watch-extended-copy-color);
}

.watch-options__cut-card .watch-options__duration {
  margin-block: var(--cc-space-2) var(--cc-space-5);
}

.watch-options__cut-card .watch-options__grid {
  flex: 1 1 auto;
  grid-auto-rows: 1fr;
  margin: 0;
  max-width: none;
  width: 100%;
}

.watch-options__grid--extended {
  grid-template-columns: minmax(0, 1fr);
}

.watch-options__grid--single {
  grid-template-columns: min(100%, 26rem);
  justify-content: center;
}

@media (min-width: 992px) {
  .watch-options__cuts:not(.watch-options__cuts--single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watch-options__cuts.watch-options__cuts--standard-wide {
    grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
  }

  .watch-options__grid--multiple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.watch-options__destination-card {
  background:
    linear-gradient(180deg, rgba(var(--cc-rgb-white), .98), color-mix(in srgb, var(--site-surface, #ffffff) 92%, var(--site-background, #f4f5f6)));
  border: 1px solid color-mix(in srgb, var(--site-primary, #176589) 10%, transparent);
  border-radius: var(--site-panel-radius, 1.35rem .65rem 1.35rem .65rem);
  box-shadow:
    0 1.2rem 3.2rem color-mix(in srgb, var(--site-primary, #176589) 12%, transparent),
    inset 0 1px 0 rgba(var(--cc-rgb-white), .7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 72rem;
  padding: var(--cc-space-7);
  text-align: center;
}

.watch-options__destination-title {
  color: var(--site-accent, var(--cc-brand-teal));
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-3xl);
  font-weight: var(--cc-weight-black);
  line-height: var(--cc-line-tight);
  margin: 0 0 var(--cc-space-3);
  text-transform: var(--site-heading-transform, uppercase);
}

.watch-options__destination-copy {
  margin: 0 auto var(--cc-space-6);
  max-width: 38rem;
}

.scene-duration {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
}

.duration-pill,
.duration-chip {
  align-items: center;
  border-radius: var(--site-pill-radius, 999px);
  display: inline-flex;
  line-height: var(--cc-line-tight);
  white-space: nowrap;
}

.duration-pill {
  gap: var(--cc-space-2);
  padding: var(--cc-space-2) var(--cc-space-3);
  font-size: var(--cc-type-sm);
  font-weight: var(--cc-weight-bold);
}

.duration-label {
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  opacity: .78;
  text-transform: uppercase;
}

.duration-time {
  font-weight: var(--cc-weight-black);
}

.duration-pill--standard {
  background: var(--site-primary, var(--cc-neutral-charcoal));
  border: 1px solid color-mix(in srgb, var(--site-primary, var(--cc-neutral-charcoal)) 30%, transparent);
  color: #F8FFFD;
}

.duration-pill--extended {
  background: linear-gradient(135deg, var(--site-accent, var(--cc-brand-teal)), var(--site-accent-strong, var(--cc-brand-ocean)));
  border: 1px solid color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 45%, transparent);
  box-shadow: 0 .55rem 1.2rem color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 22%, transparent);
  color: #F8FFFD;
}

.scene-duration--card {
  font-size: var(--cc-type-xs);
  justify-content: flex-start;
  text-align: left;
}

.duration-chip {
  gap: var(--cc-space-1);
  padding: var(--cc-space-1) var(--cc-space-2);
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
}

.duration-chip__label {
  font-size: var(--cc-type-xxs);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-wide);
  opacity: .72;
  text-transform: uppercase;
}

.duration-chip__time {
  font-weight: var(--cc-weight-black);
  font-size: var(--cc-type-xs);
}

.duration-chip--standard {
  background: color-mix(in srgb, var(--scene-card-bg, var(--site-primary, var(--cc-neutral-charcoal))) 88%, transparent);
  border: 1px solid rgba(var(--cc-rgb-white), .16);
  color: var(--scene-card-text, var(--cc-neutral-white));
}

.duration-chip--extended {
  background: linear-gradient(135deg, var(--site-accent, var(--cc-brand-teal)), var(--site-accent-strong, var(--cc-brand-ocean)));
  border: 1px solid color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 45%, rgba(var(--cc-rgb-white), .18));
  box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 26%, transparent);
  color: #F8FFFD;
}

.watch-options__option {
  align-items: stretch;
  background: var(--site-watch-card-background);
  border: 1px solid var(--site-watch-card-border);
  border-radius: var(--site-watch-card-radius);
  box-shadow: var(--site-watch-card-shadow);
  color: var(--site-watch-card-text);
  display: flex;
  flex-direction: column;
  min-height: var(--site-watch-card-min-height);
  padding: var(--site-watch-card-padding);
  text-align: var(--site-watch-card-text-align);
  transition:
    box-shadow var(--cc-motion-base) var(--cc-motion-ease),
    transform var(--cc-motion-base) var(--cc-motion-ease);
}

.watch-options__option:hover {
  box-shadow: var(--site-watch-card-hover-shadow);
  transform: translateY(-2px);
}

.watch-options__option--featured {
  background: var(--site-watch-featured-background);
  border-color: var(--site-watch-featured-border);
  box-shadow: var(--site-watch-featured-shadow);
  color: var(--site-watch-featured-text);
}

.watch-options__option--featured:hover {
  box-shadow: var(--site-watch-featured-hover-shadow);
}

.watch-options__option-copy {
  display: grid;
  gap: var(--cc-space-3);
}

.watch-options__option-footer {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.watch-options__platform {
  color: var(--site-watch-card-description);
  display: var(--site-watch-platform-display);
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-wide);
  margin: 0;
  text-transform: var(--site-eyebrow-transform, uppercase);
}

.watch-options__option-title {
  color: var(--site-watch-card-title);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-watch-card-title-size);
  font-weight: var(--site-panel-heading-weight);
  line-height: var(--cc-line-heading);
  margin: 0;
  text-transform: var(--site-heading-transform, uppercase);
}

.watch-options__description {
  color: var(--site-watch-card-description);
  font-size: var(--cc-type-base);
  line-height: var(--cc-line-body);
  margin: 0;
}

.watch-options__option--featured .watch-options__platform,
.watch-options__option--featured .watch-options__description {
  color: var(--site-watch-featured-description);
}

.watch-options__option--featured .watch-options__option-title {
  color: var(--site-watch-featured-title);
}

.watch-options__note {
  color: var(--site-watch-card-note);
  display: block;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-line-caption);
  margin-top: var(--cc-space-3);
  min-height: 1.3em;
}

.watch-options__option--featured .watch-options__note {
  color: var(--site-watch-featured-note);
}

.watch-options__price {
  align-items: baseline;
  color: var(--site-watch-card-price);
  display: inline-flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-watch-price-size);
  font-weight: var(--cc-weight-black);
  gap: .16em;
  justify-content: var(--site-watch-price-justify-content);
  line-height: var(--cc-line-tight);
  margin: var(--cc-space-5) var(--cc-space-5);
  white-space: nowrap;
}

.watch-options__price-amount {
  font-size: var(--site-watch-price-amount-size);
}

.watch-options__price-frequency {
  display: inline-block;
  flex: 0 0 auto;
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  opacity: .72;
  vertical-align: .28em;
  white-space: nowrap;
}

.watch-options__option--featured .watch-options__price {
  color: var(--site-watch-featured-price);
}

.watch-options__option--extended {
  background: var(--site-watch-extended-card-background);
  border-color: var(--site-watch-extended-card-border);
  box-shadow: var(--site-watch-extended-card-shadow);
}

.watch-options__option--extended .watch-options__option-title {
  color: var(--site-watch-extended-card-title);
}

.watch-options__option--extended .watch-options__description {
  color: var(--site-watch-extended-card-description);
}

.watch-options__option--extended .watch-options__price {
  color: var(--site-watch-extended-card-price);
}

.watch-options__option--extended .watch-options__note {
  color: var(--site-watch-extended-card-note);
}

.watch-options__option--extended .watch-options__cta.btn-secondary {
  background: var(--site-watch-extended-cta-background);
  border-color: var(--site-watch-extended-cta-border);
  color: var(--site-watch-extended-cta-color);
}

.watch-options__cta {
  margin-top: var(--cc-space-2);
  width: 100%;
}

.watch-options__cta.btn {
  justify-content: center;
  min-height: var(--site-button-lg-min-height);
  width: 100%;
}

.watch-options__trust {
  align-items: center;
  color: var(--site-watch-trust-color);
  display: flex;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-regular);
  gap: var(--cc-space-2);
  justify-content: center;
  margin: var(--cc-space-6) auto 0;
  text-align: center;
}

.watch-options__trust-icon {
  color: var(--site-watch-trust-icon-color);
  font-size: var(--cc-type-base);
}

.scene-next-panel--wide {
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 10%, white), white 34rem),
    color-mix(in srgb, var(--site-background, #f4f5f6) 88%, var(--site-surface, #ffffff));
  padding-block: clamp(5rem, 9vw, 7rem);
  width: 100%;
}

.scene-credits-panel {
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 8%, white), transparent 30rem),
    linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--site-surface, #ffffff) 96%, var(--site-background, #f4f5f6)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--site-primary, #176589) 8%, white);
  margin-top: 0;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  width: 100%;
}

.scene-credits-panel__header,
.scene-next-panel__header {
  margin: 0 0 clamp(2rem, 5vw, 3.75rem);
  max-width: 52rem;
  text-align: left;
}

.scene-credits-panel__header .site-kicker,
.scene-next-panel__header .site-kicker {
  justify-content: flex-start;
  margin: 0 0 var(--cc-space-3);
}

.scene-next-panel__header .site-kicker {
  color: var(--site-scene-next-eyebrow-color);
  font-size: var(--site-scene-next-eyebrow-size);
  font-weight: var(--site-scene-next-eyebrow-weight);
}

.scene-next-panel__header h2 {
  color: var(--site-scene-next-heading-color);
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-scene-next-heading-size);
  font-weight: var(--site-scene-next-heading-weight);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  margin: 0;
  text-transform: var(--site-heading-transform, uppercase);
}

.scene-next-panel__lede {
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 62%, transparent);
  font-size: var(--cc-type-md);
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-line-body);
  margin: var(--cc-space-3) 0 0;
  max-width: 34rem;
}

.scene-credits-panel__header {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  max-width: 34rem;
}

.scene-credits-panel__header h2 {
  color: var(--site-scene-credits-heading-color);
  font-size: var(--site-scene-credits-heading-size);
  font-weight: var(--site-scene-credits-heading-weight);
  line-height: var(--cc-line-heading);
  margin: 0;
}

.scene-credits-panel__header .site-kicker,
.scene-credit-group .site-kicker {
  font-size: var(--site-scene-credits-kicker-size);
  font-weight: var(--site-scene-credits-kicker-weight);
}

.scene-credits-panel__groups {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.25rem);
}

.scene-credit-group {
  display: grid;
  gap: var(--cc-space-4);
}

.scene-credit-group .site-kicker {
  justify-content: flex-start;
  margin: 0;
  text-align: left;
}

.scene-credit-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.scene-credit-grid .creator-mini-card {
  justify-content: center;
}

.scene-next-panel .scene-card {
  max-width: none;
}

.scene-next-panel--wide {
  margin-top: 0;
}

.scene-next-panel__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1399.98px) {
  .scene-next-panel__grid {
    grid-template-columns: 1fr;
  }

  .scene-next-panel__grid > .scene-horizontal-card:nth-of-type(n+2) {
    display: none;
  }
}

/* Scene detail typography scale. Edit these values directly per breakpoint. */

@media (max-width: 1199.98px) {
  .scene-show-body,
  .scene-watch-panel,
  .scene-credits-panel,
  .scene-next-panel {
    --scene-detail-age-badge-height: 2.9rem;
    --scene-detail-age-badge-width: 2.9rem;
  }
}

@media (max-width: 991.98px) {
  .scene-show-body,
  .scene-watch-panel,
  .scene-credits-panel,
  .scene-next-panel {
    --scene-detail-age-badge-height: 2.75rem;
    --scene-detail-age-badge-width: 2.75rem;
  }
  .watch-options__option--featured {
    max-width: none;
    padding: var(--cc-space-5) var(--cc-space-4) var(--cc-space-4) var(--cc-space-4);
  }

  .scene-next-panel__grid > .scene-horizontal-card:nth-of-type(n+2) {
    display: none;
  }
  .scene-next-panel__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .scene-show-body,
  .scene-watch-panel,
  .scene-credits-panel,
  .scene-next-panel {
    --scene-detail-age-badge-height: 2.55rem;
    --scene-detail-age-badge-width: 2.55rem;
  }

}

@media (max-width: 575.98px) {
  .scene-show-body,
  .scene-watch-panel,
  .scene-credits-panel,
  .scene-next-panel {
    --scene-detail-age-badge-height: 1.9rem;
    --scene-detail-age-badge-width: 1.9rem;
  }

  .scene-meta-bar__top .scene-meta-bar__item--location {
    display: none;
  }

  .scene-meta-bar__head {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .scene-meta-bar__top {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .scene-meta-bar__top .scene-meta-bar__item {
    flex: 0 0 auto;
    padding: var(--cc-space-2);
    white-space: nowrap;
  }

  .scene-meta-bar__top .scene-duration {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--cc-space-1);
  }

  .scene-meta-bar__top .duration-pill {
    gap: var(--cc-space-1);
    padding: var(--cc-space-1) var(--cc-space-2);
  }

  .scene-meta-bar__top .duration-label {
    display: none;
  }

  .scene-meta-bar__notice {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .scene-meta-bar__notice .au-content-note__button {
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    width: 2.5rem;
  }

  .scene-meta-bar__notice .au-content-note__button > span:not(.au-content-note__icon):not(.visually-hidden),
  .scene-meta-bar__notice .au-content-note__button > :is(i, .ui-icon) {
    display: none;
  }

  .scene-meta-bar__toggle {
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .scene-detail-gallery {
    --scene-detail-gallery-gap: var(--cc-space-4);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .scene-meta-bar__head {
    align-items: stretch;
    flex-direction: column;
  }

  .scene-meta-bar__notice {
    margin-left: 0;
  }

  .scene-detail-gallery {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr)) auto;
  }

  .scene-detail-gallery__hero {
    grid-column: 1 / 2;
    grid-row: 1 / 5;
  }

  .scene-detail-gallery__side {
    display: contents;
  }

  .scene-detail-gallery__tile {
    aspect-ratio: auto;
    height: 100%;
  }

  .scene-detail-gallery__side > .scene-detail-gallery__tile:not(.scene-detail-gallery__tile--trailer):not(.scene-detail-gallery__tile--placeholder) {
    grid-column: 2 / 3;
  }

  .scene-detail-gallery__side > .scene-detail-gallery__tile--placeholder {
    grid-column: 2 / 3;
  }

  .scene-detail-gallery__side > .scene-detail-gallery__tile--trailer,
  .scene-detail-gallery__trailer-frame {
    aspect-ratio: 1 / .5792;
    grid-column: 1 / -1;
    grid-row: auto;
    height: auto;
  }
}

/* ==========================================================
   23_creators
   ========================================================== */

.site-directory-hero {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--site-accent, var(--cc-brand-mint)) 20%, white), white 28rem), linear-gradient(145deg, var(--site-primary, var(--cc-neutral-charcoal)), color-mix(in srgb, var(--site-primary, var(--cc-neutral-charcoal)) 72%, var(--cc-neutral-black)));
  color: var(--cc-neutral-white);
  min-height: min(44rem, 92vh);
  padding: clamp(7.5rem, 12vw, 9rem) 0 5rem;
}

.site-hero--creator-profile .creator-profile-hero__content {
  align-items: center;
  display: grid;
  gap: var(--site-creator-detail-hero-content-gap);
  grid-template-columns: var(--site-creator-detail-hero-content-columns);
  max-width: none;
  padding: var(--site-creator-detail-hero-content-padding);
}

.site-hero--creator-profile .creator-profile-hero__copy {
  max-width: var(--site-creator-detail-hero-copy-max-width);
}

.site-hero--creator-profile {
  background: var(--site-creator-detail-hero-background);
  min-height: var(--site-creator-detail-hero-min-height);
}

.site-hero--creator-profile .site-hero__overlay {
  background: var(--site-creator-detail-hero-overlay);
  opacity: var(--site-creator-detail-hero-overlay-opacity);
}

.site-hero--creator-profile .site-hero__eyebrow {
  color: var(--site-creator-detail-eyebrow-color);
  font-family: var(--site-creator-detail-eyebrow-font);
  font-size: var(--site-creator-detail-eyebrow-size);
  font-weight: var(--site-creator-detail-eyebrow-weight);
  text-transform: var(--site-creator-detail-eyebrow-transform);
}

.site-hero--creator-profile .site-hero__title {
  color: var(--site-creator-detail-title-color);
  font-size: var(--site-creator-detail-title-size);
  font-weight: var(--site-creator-detail-title-weight);
  text-transform: var(--site-creator-detail-title-transform);
}

.site-hero--creator-profile .site-hero__lede {
  color: var(--site-creator-detail-lede-color);
}

.site-directory-hero h1 {
  color: var(--cc-neutral-white);
  font-size: var(--cc-type-4xl);
  font-weight: var(--cc-weight-black);
  line-height: var(--cc-line-tight);
  margin-bottom: var(--cc-space-4);
  text-transform: uppercase;
}

.site-hero--creator-profile .site-hero__media {
  aspect-ratio: 1;
  background: var(--site-creator-detail-avatar-surface);
  border: var(--site-creator-detail-avatar-border);
  border-radius: 50%;
  box-shadow: var(--site-creator-detail-avatar-shadow);
  margin-inline: auto;
  max-width: none;
  width: 100%;
}

.site-hero--creator-profile .site-hero__media span {
  background: var(--site-primary, var(--cc-neutral-charcoal));
  color: var(--cc-neutral-white);
  font-size: var(--cc-type-4xl);
}

@media (max-width: 767.98px) {
  .site-hero--creator-profile .creator-profile-hero__content {
    gap: var(--cc-space-4);
    grid-template-columns: 1fr;
  }

  .site-hero--creator-profile .creator-profile-hero__copy {
    margin-inline: auto;
    text-align: center;
  }

  .site-hero--creator-profile .site-hero__lede {
    margin-inline: auto;
  }

  .site-hero--creator-profile .site-hero__media {
    width: var(--site-creator-detail-avatar-mobile-size);
  }
}

@media (max-width: 575.98px) {
  .site-hero--creator-profile .site-hero__media {
    width: var(--site-creator-detail-avatar-small-size);
  }

  .site-hero--creator-profile .site-hero__media span {
    font-size: var(--cc-type-3xl);
  }
}

.site-directory-hero p:not(.site-kicker) {
  color: rgba(var(--cc-rgb-white), .78);
  font-size: var(--cc-type-lg);
  line-height: var(--cc-line-body);
  max-width: 45rem;
}

.site-directory-grid {
  background: var(--cc-neutral-white);
  margin-top: 0;
  padding-bottom: var(--cc-space-8);
  padding-top: var(--cc-space-7);
}

.tenant-creator-show .site-directory-grid.site-section--surface {
  --site-section-title-size: var(--site-creator-detail-scenes-title-size);
  --site-section-heading-weight: var(--site-creator-detail-scenes-title-weight);
  --site-eyebrow-size: var(--site-creator-detail-scenes-eyebrow-size);
  --site-eyebrow-weight: var(--site-creator-detail-scenes-eyebrow-weight);
  background: var(--site-creator-detail-scenes-background);
  padding-block: var(--site-creator-detail-scenes-padding-block);
}

.tenant-creator-show .site-directory-grid .creator-links__header .site-section__title {
  color: var(--site-creator-detail-scenes-title-color);
  text-transform: var(--site-creator-detail-scenes-title-transform);
}

.tenant-creator-show .site-directory-grid .creator-links__header .site-section__eyebrow {
  color: var(--site-creator-detail-scenes-eyebrow-color);
  text-transform: var(--site-creator-detail-scenes-eyebrow-transform);
}

.tenant-creator-show .site-directory-grid .scene-card__title {
  text-transform: var(--site-creator-detail-scenes-card-title-transform);
}

.site-scenes-listing {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 18%, transparent), transparent 24rem),
    linear-gradient(180deg, var(--site-background, var(--cc-neutral-white)), color-mix(in srgb, var(--site-background, var(--cc-neutral-white)) 88%, var(--site-surface, var(--cc-neutral-white))));
  color: var(--site-text);
  overflow: hidden;
  padding-bottom: max(3rem, calc(var(--site-section-spacing, 6rem) - 2.8rem));
  padding-top: var(--site-section-spacing, var(--cc-space-9));
}

.site-scenes-listing .site-listing-toolbar {
  margin-bottom: var(--cc-space-7);
}

.site-scenes-listing__grid {
  margin-top: 0;
}

.site-scenes-listing__item {
  display: flex;
}

.site-scenes-listing__card-frame {
  display: flex;
  height: 100%;
  width: 100%;
}

.site-scenes-listing__card-frame .scene-card {
  flex: 1 1 auto;
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

.site-tags-directory {
  background: var(--site-background, var(--cc-neutral-white));
  color: var(--site-text);
  overflow: hidden;
  padding-bottom: max(3rem, calc(var(--site-section-spacing, 6rem) - 2.5rem));
  padding-top: var(--site-section-spacing, var(--cc-space-9));
}

.site-tags-directory__header {
  max-width: 62rem;
}

.site-tags-directory__groups {
  display: grid;
  gap: var(--cc-space-4);
}

.site-tags-directory__group {
  background: color-mix(in srgb, var(--site-surface, var(--cc-neutral-white)) 86%, var(--site-background, var(--cc-neutral-white)));
  border: 1px solid color-mix(in srgb, var(--site-text, var(--cc-neutral-charcoal)) 9%, transparent);
  border-radius: .5rem;
  padding: clamp(.9rem, 1.8vw, 1.2rem);
}

.site-tags-directory__group-header {
  align-items: start;
  display: grid;
  gap: var(--cc-space-2);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--cc-space-3);
  position: relative;
}

.site-tags-directory__category-icon {
  align-items: center;
  background: color-mix(in srgb, var(--site-accent, var(--cc-brand-coral)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--site-accent, var(--cc-brand-coral)) 28%, transparent);
  border-radius: .45rem;
  color: var(--site-accent, var(--cc-brand-coral));
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.site-tags-directory__group-header h3 {
  color: var(--site-heading-accent, var(--site-text));
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  margin: 0;
  text-transform: var(--site-heading-transform, uppercase);
}

.site-tags-directory__group-header p {
  color: var(--site-muted-text, color-mix(in srgb, var(--site-text) 62%, transparent));
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
  margin: .12rem 0 0;
  text-transform: uppercase;
}

.site-tags-directory__tag-grid {
  --site-tag-card-columns: 3;
  display: grid;
  gap: var(--cc-space-2);
  grid-template-columns: repeat(var(--site-tag-card-columns), minmax(0, 1fr));
}

.site-tags-directory__tag-card {
  align-content: start;
  background: var(--site-surface, var(--cc-neutral-white));
  border: 1px solid color-mix(in srgb, var(--site-text, var(--cc-neutral-charcoal)) 11%, transparent);
  border-radius: .5rem;
  color: var(--site-text);
  display: grid;
  gap: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 18rem;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.site-tags-directory__tag-card::before {
  background: var(--site-accent, var(--cc-brand-coral));
  content: "";
  height: 2px;
  inset: 0 0 auto;
  opacity: .72;
  position: absolute;
  z-index: 1;
}

.site-tags-directory__tag-card:hover,
.site-tags-directory__tag-card:focus-visible {
  background: color-mix(in srgb, var(--site-accent, var(--cc-brand-coral)) 7%, var(--site-surface, var(--cc-neutral-white)));
  border-color: color-mix(in srgb, var(--site-accent, var(--cc-brand-coral)) 36%, transparent);
  box-shadow: 0 .85rem 1.75rem color-mix(in srgb, var(--site-text, var(--cc-neutral-charcoal)) 8%, transparent);
  color: var(--site-text);
  transform: translateY(-.08rem);
}

.site-tags-directory__tag-name {
  color: var(--site-heading-accent, var(--site-text));
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  text-transform: var(--site-heading-transform, uppercase);
}

.site-tags-directory__tag-media {
  aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--site-text, var(--cc-neutral-charcoal)) 7%, var(--site-surface, var(--cc-neutral-white)));
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.site-tags-directory__tag-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform .24s ease;
  width: 100%;
}

.site-tags-directory__tag-card:hover .site-tags-directory__tag-media img,
.site-tags-directory__tag-card:focus-visible .site-tags-directory__tag-media img {
  transform: scale(1.035);
}

.site-tags-directory__tag-title {
  align-items: flex-start;
  display: flex;
  gap: var(--cc-space-2);
  justify-content: space-between;
  padding: var(--cc-space-3) var(--cc-space-3) 0;
}

.site-tags-directory__tag-title .site-tags-directory__tag-name {
  min-width: 0;
}

.site-tags-directory__tag-count {
  align-items: center;
  background: color-mix(in srgb, var(--site-accent, var(--cc-brand-coral)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--site-accent, var(--cc-brand-coral)) 26%, transparent);
  border-radius: 999px;
  color: var(--site-accent, var(--cc-brand-coral));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-extrabold);
  justify-content: center;
  line-height: var(--cc-line-tight);
  min-width: 1.75rem;
  padding: .36rem .55rem;
}

.site-tags-directory__tag-description {
  color: var(--site-muted-text, color-mix(in srgb, var(--site-text) 68%, transparent));
  font-size: var(--cc-type-sm);
  line-height: var(--cc-line-body);
  padding: var(--cc-space-2) var(--cc-space-3) 0;
}

.site-tags-directory__tag-action {
  align-items: center;
  align-self: end;
  color: var(--site-accent, var(--cc-brand-coral));
  display: inline-flex;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-extrabold);
  gap: .45rem;
  margin-top: var(--cc-space-3);
  padding: 0 var(--cc-space-3) var(--cc-space-3);
  text-transform: uppercase;
}

.site-tags-directory__tag-card:not(.site-tags-directory__tag-card--mini-scene):not(:has(.site-tags-directory__tag-media)) {
  gap: var(--cc-space-3);
  min-height: 7.25rem;
  padding: var(--cc-space-3);
}

.site-tags-directory__tag-card:not(.site-tags-directory__tag-card--mini-scene):not(:has(.site-tags-directory__tag-media)) .site-tags-directory__tag-title,
.site-tags-directory__tag-card:not(.site-tags-directory__tag-card--mini-scene):not(:has(.site-tags-directory__tag-media)) .site-tags-directory__tag-description,
.site-tags-directory__tag-card:not(.site-tags-directory__tag-card--mini-scene):not(:has(.site-tags-directory__tag-media)) .site-tags-directory__tag-action {
  padding: 0;
}

.site-tags-directory__tag-action :is(i, .ui-icon) {
  font-size: var(--cc-type-xs);
  transition: transform .18s ease;
}

.site-tags-directory__tag-card:hover .site-tags-directory__tag-action :is(i, .ui-icon),
.site-tags-directory__tag-card:focus-visible .site-tags-directory__tag-action :is(i, .ui-icon) {
  transform: translateX(2px);
}

@media (min-width: 576px) {
  .site-tags-directory__tag-grid {
    --site-tag-card-columns: 4;
  }
}

@media (min-width: 768px) {
  .site-tags-directory__tag-grid {
    --site-tag-card-columns: 4;
  }
}

@media (min-width: 992px) {
  .site-tags-directory__tag-grid {
    --site-tag-card-columns: 5;
  }
}

@media (min-width: 1200px) {
  .site-tags-directory__tag-grid {
    --site-tag-card-columns: 6;
  }
}

@media (max-width: 767.98px) {
  .site-scenes-listing {
    padding-bottom: var(--cc-space-7);
    padding-top: var(--cc-space-8);
  }

  .site-tags-directory {
    padding-bottom: var(--cc-space-7);
    padding-top: var(--cc-space-8);
  }

  .site-tags-directory__group {
    border-radius: .5rem;
  }

  .site-scenes-listing .site-listing-toolbar {
    margin-bottom: var(--cc-space-1);
  }

  .site-scenes-listing__grid {
    margin-left: 0;
    margin-right: 0;
    row-gap: var(--cc-space-4);
  }

  .site-scenes-listing__item {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

#creator-directory-grid {
  padding-top: 0;
}

/* CreatorCore homepage hero — Figma node 2040:2. */

.cc-homepage-hero {
  --cc-homepage-hero-navbar-offset: 72px;
  background: var(--cc-neutral-white);
  color: #1E1E1E;
  min-height: 804px;
  overflow: hidden;
  position: relative;
}

.cc-homepage-hero__backdrop,
.cc-homepage-hero__band {
  inset-block: 0;
  pointer-events: none;
  position: absolute;
}

.cc-homepage-hero__backdrop {
  inset-inline: 0;
}

.cc-homepage-hero__band {
  background: linear-gradient(180deg, rgba(217, 217, 217, .07), rgba(54, 190, 214, .07));
}

.cc-homepage-hero__band--outer {
  inset-inline: 0;
}

.cc-homepage-hero__band--middle {
  left: 12.2222%;
  width: 75.5556%;
}

.cc-homepage-hero__band--inner {
  left: 26.875%;
  width: 46.25%;
}

.cc-homepage-hero__container {
  align-items: start;
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 804px;
  padding-block: calc(100px + var(--cc-homepage-hero-navbar-offset)) 100px;
  position: relative;
  z-index: 1;
}

.cc-homepage-hero__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 78px;
  min-width: 0;
  width: 100%;
}

.cc-homepage-hero__eyebrow {
  align-items: center;
  display: flex;
  font-family: var(--cc-font-secondary);
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-medium);
  gap: 5px;
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-line-tight);
  margin: 0;
  text-transform: uppercase;
}

.cc-homepage-hero__mark {
  display: inline-block;
  flex: 0 0 18px;
  height: 20px;
  overflow: hidden;
  position: relative;
  width: 18px;
}

.cc-homepage-hero__mark img {
  height: 20px;
  left: 0;
  max-width: none;
  position: absolute;
  top: 0;
  width: 104px;
}

.cc-homepage-hero__message {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.cc-homepage-hero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--cc-font-secondary);
  font-size: var(--cc-type-4xl);
  font-weight: var(--cc-weight-semibold);
  gap: 8px;
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-heading);
  margin: 0;
  width: 702px;
}

.cc-homepage-hero__title-line {
  display: block;
  white-space: nowrap;
}

.cc-homepage-hero__title-line--accented {
  align-items: center;
  display: flex;
  gap: 10px;
}

.cc-homepage-hero__title-accent {
  color: #1DBBBB;
}

.cc-homepage-hero__inline-image {
  border-radius: 15px;
  box-shadow: 0 1px 4px rgba(255, 255, 255, .25);
  display: block;
  flex: 0 0 129px;
  height: 58px;
  overflow: hidden;
  position: relative;
  width: 129px;
}

.cc-homepage-hero__inline-image img {
  height: auto;
  left: -15.38%;
  max-width: none;
  position: absolute;
  top: -78.8%;
  width: 141.54%;
}

.cc-homepage-hero__body {
  font-family: var(--cc-font-secondary);
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-line-body);
  margin: 0;
  max-width: 620px;
}

.cc-homepage-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cc-homepage-hero .cc-homepage-hero__button {
  align-items: center;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  font-family: var(--cc-font-secondary);
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-regular);
  justify-content: center;
  line-height: var(--cc-line-heading);
  min-height: 46px;
  padding: 14px 30px;
  text-decoration: none;
}

.cc-homepage-hero__button--primary {
  background: #55EBE2;
  color: #1E1E1E;
}

.cc-homepage-hero__button--primary:is(:hover, :focus-visible) {
  background: #36DEE0;
  color: #1E1E1E;
}

.cc-homepage-hero__button--secondary {
  background: #176589;
  color: var(--cc-neutral-white);
}

.cc-homepage-hero__button--secondary:is(:hover, :focus-visible) {
  background: #0F526F;
  color: var(--cc-neutral-white);
}

.cc-homepage-hero__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 464px;
}

.cc-homepage-hero__benefits li {
  align-items: center;
  display: flex;
  font-family: var(--cc-font-secondary);
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-regular);
  gap: 10px;
  line-height: var(--cc-line-body);
}

.cc-homepage-hero__media {
  border-radius: 30px;
  height: 604px;
  overflow: hidden;
  width: 100%;
}

.cc-homepage-hero__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 1400px) {
  .cc-homepage-hero__container {
    max-width: 82.5rem;
  }

  .cc-homepage-hero__title {
    font-size: var(--cc-type-4xl);
    line-height: var(--cc-line-heading);
    width: max-content;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .cc-homepage-hero__container {
    gap: clamp(48px, 6vw, 84px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cc-homepage-hero__content,
  .cc-homepage-hero__media {
    width: 100%;
  }

  .cc-homepage-hero__title {
    font-size: var(--cc-type-4xl);
    line-height: var(--cc-line-heading);
    width: max-content;
  }
}

@media (max-width: 1199.98px) {
  .cc-homepage-hero {
    min-height: 0;
  }

  .cc-homepage-hero__container {
    gap: clamp(48px, 8vw, 72px);
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: clamp(64px, 8vw, 96px);
    padding-top: calc(clamp(96px, 12vw, 132px) + var(--cc-homepage-hero-navbar-offset));
  }

  .cc-homepage-hero__content {
    margin-top: 0;
    max-width: 702px;
    width: 100%;
  }

  .cc-homepage-hero__media {
    aspect-ratio: 620 / 604;
    height: auto;
    justify-self: center;
    max-width: 620px;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .cc-homepage-hero__content {
    gap: 24px;
  }

  .cc-homepage-hero__eyebrow {
    align-items: flex-start;
    font-size: var(--cc-type-sm);
    letter-spacing: var(--cc-tracking-wide);
    line-height: var(--cc-line-body);
  }

  .cc-homepage-hero__message {
    gap: 18px;
  }

  .cc-homepage-hero__title {
    font-size: clamp(var(--cc-type-3xl), 11vw, var(--cc-type-4xl));
    gap: 6px;
    line-height: var(--cc-line-heading);
    width: 100%;
  }

  .cc-homepage-hero__title-line {
    white-space: normal;
  }

  .cc-homepage-hero__title-line--accented {
    align-items: center;
    flex-wrap: wrap;
  }

  .cc-homepage-hero__inline-image {
    flex-basis: 96px;
    height: 44px;
    width: 96px;
  }

  .cc-homepage-hero__body,
  .cc-homepage-hero__benefits li {
    font-size: var(--cc-type-base);
  }

  .cc-homepage-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cc-homepage-hero .cc-homepage-hero__button {
    width: 100%;
  }

  .cc-homepage-hero__benefits {
    width: 100%;
  }

  .cc-homepage-hero__benefits li {
    align-items: flex-start;
  }

  .cc-homepage-hero__media {
    border-radius: 20px;
  }
}

/* Homepage marketing hero component. */

.site-hero--platform-home {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--site-accent) 12%, transparent) 0 36%, transparent 36%),
    radial-gradient(ellipse at 72% 18%, color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 18%, transparent), transparent 34rem),
    linear-gradient(145deg, color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 86%, #070a10), #05070b 100%);
  color: var(--cc-neutral-white);
  min-height: min(52rem, calc(100svh - var(--navbar-height, 0px)));
  overflow: hidden;
  padding: clamp(8rem, 13vw, 12rem) 0 clamp(4rem, 8vw, 6.5rem);
  position: relative;
}

.site-hero--platform-home :is(.site-hero__backdrop, .platform-home-hero__backdrop) {
  background:
    linear-gradient(180deg, rgba(var(--cc-rgb-white), .055), transparent 42%),
    linear-gradient(90deg, rgba(var(--cc-rgb-white), .04), transparent 46%);
  inset: 0;
  opacity: .9;
  pointer-events: none;
  position: absolute;
}

.site-hero--platform-home .container {
  position: relative;
  z-index: 1;
}

.site-hero--platform-home :is(.site-hero__layout, .platform-home-hero__layout) {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
}

.site-hero--platform-home :is(.site-hero__content, .platform-home-hero__content) {
  max-width: 58rem;
}

.site-hero--platform-home .site-hero__eyebrow {
  background: rgba(var(--cc-rgb-white), .075);
  border: 1px solid rgba(var(--cc-rgb-white), .14);
  border-radius: 999px;
  color: color-mix(in srgb, var(--cc-neutral-white) 84%, var(--site-accent));
  display: inline-flex;
  margin-bottom: var(--cc-space-4);
  padding: var(--cc-space-2) var(--cc-space-3) var(--cc-space-2);
}

.site-hero--platform-home :is(.site-hero__title, .platform-home-hero__title) {
  color: color-mix(in srgb, var(--cc-neutral-white) 94%, var(--site-accent));
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--site-platform-home-title-size, var(--cc-type-4xl));
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-normal);
  line-height: var(--cc-line-tight);
  margin: 0;
  max-width: 11ch;
}

.site-hero--platform-home :is(.site-hero__lede, .platform-home-hero__lead) {
  color: rgba(var(--cc-rgb-white), .8);
  margin: clamp(1.35rem, 2.8vw, 2rem) 0 0;
  max-width: 40rem;
}

.site-hero--platform-home :is(.site-hero__copy, .platform-home-hero__copy) {
  color: rgba(var(--cc-rgb-white), .66);
  margin: var(--cc-space-4) 0 0;
  max-width: 42rem;
}

.site-hero--platform-home :is(.site-hero__lede, .platform-home-hero__lead),
.site-hero--platform-home :is(.site-hero__copy, .platform-home-hero__copy) {
  font-size: var(--cc-type-lg);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-line-body);
}

.site-hero--platform-home :is(.site-hero__actions, .action-row) {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.site-hero--platform-home .btn-secondary {
  background: rgba(var(--cc-rgb-white), .08);
  border-color: rgba(var(--cc-rgb-white), .2);
  color: var(--cc-neutral-white);
}

.site-hero--platform-home :is(.site-hero__media, .platform-home-hero__stage) {
  display: grid;
  gap: var(--cc-space-3);
  isolation: isolate;
  position: relative;
}

.site-hero--platform-home :is(.site-hero__media, .platform-home-hero__stage)::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--site-accent) 30%, transparent), transparent);
  content: "";
  height: 100%;
  inset: 14% 12% auto;
  opacity: .48;
  position: absolute;
  transform: skewY(-8deg);
  z-index: -1;
}

.platform-home-hero__floaters {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.platform-home-hero__floaters span {
  align-items: center;
  animation: homepage-floater-drift var(--hero-floater-duration, 9s) ease-in-out infinite alternate;
  animation-delay: var(--hero-floater-delay, 0s);
  border: 1px solid rgba(var(--cc-rgb-white), .1);
  border-radius: 999px;
  color: rgba(var(--cc-rgb-white), .26);
  display: inline-flex;
  font-size: var(--cc-type-xs);
  height: 1.85rem;
  justify-content: center;
  opacity: .58;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(var(--hero-floater-scale, 1)) rotate(var(--hero-floater-rotate, 0deg));
  width: 1.85rem;
}

@keyframes homepage-floater-drift {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(var(--hero-floater-scale, 1))
      rotate(var(--hero-floater-rotate, 0deg));
  }

  100% {
    transform:
      translate3d(var(--hero-floater-x, .35rem), var(--hero-floater-y, -.45rem), 0)
      scale(var(--hero-floater-scale, 1))
      rotate(calc(var(--hero-floater-rotate, 0deg) + var(--hero-floater-spin, 4deg)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-home-hero__floaters span {
    animation: none;
  }
}

.platform-home-hero__floaters--people span {
  background: color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 13%, transparent);
}

.platform-home-hero__floaters--people span:nth-child(1) {
  --hero-floater-duration: 8.5s;
  --hero-floater-rotate: -8deg;
  --hero-floater-x: .45rem;
  --hero-floater-y: -.65rem;
  left: 4%;
  top: 4%;
}

.platform-home-hero__floaters--people span:nth-child(2) {
  --hero-floater-delay: -1.8s;
  --hero-floater-duration: 10s;
  --hero-floater-rotate: 7deg;
  --hero-floater-x: -.4rem;
  --hero-floater-y: .55rem;
  right: 8%;
  top: 10%;
}

.platform-home-hero__floaters--people span:nth-child(3) {
  --hero-floater-delay: -3.2s;
  --hero-floater-duration: 9.5s;
  --hero-floater-rotate: 5deg;
  --hero-floater-scale: .88;
  --hero-floater-x: .55rem;
  --hero-floater-y: .35rem;
  left: 42%;
  top: -4%;
}

.platform-home-hero__floaters--people span:nth-child(4) {
  --hero-floater-delay: -2.4s;
  --hero-floater-duration: 11s;
  --hero-floater-rotate: -5deg;
  --hero-floater-scale: .9;
  --hero-floater-x: -.5rem;
  --hero-floater-y: -.35rem;
  left: 17%;
  top: 18%;
}

.platform-home-hero__floaters--people span:nth-child(5) {
  --hero-floater-delay: -4.1s;
  --hero-floater-duration: 9s;
  --hero-floater-rotate: 10deg;
  --hero-floater-scale: .82;
  --hero-floater-x: .35rem;
  --hero-floater-y: -.5rem;
  right: 24%;
  top: -2%;
}

.platform-home-hero__floaters--people span:nth-child(6) {
  --hero-floater-delay: -5.2s;
  --hero-floater-duration: 12s;
  --hero-floater-rotate: -11deg;
  --hero-floater-scale: .78;
  --hero-floater-x: -.35rem;
  --hero-floater-y: .45rem;
  right: 3%;
  top: 25%;
}

.platform-home-hero__floaters--money span {
  background: color-mix(in srgb, var(--site-accent) 11%, transparent);
  color: rgba(var(--cc-rgb-white), .22);
}

.platform-home-hero__floaters--money span:nth-child(1) {
  --hero-floater-delay: -1.2s;
  --hero-floater-duration: 8.8s;
  --hero-floater-rotate: 7deg;
  --hero-floater-x: .35rem;
  --hero-floater-y: .55rem;
  bottom: 3%;
  left: 9%;
}

.platform-home-hero__floaters--money span:nth-child(2) {
  --hero-floater-delay: -2.7s;
  --hero-floater-duration: 10.5s;
  --hero-floater-rotate: -8deg;
  --hero-floater-scale: .92;
  --hero-floater-x: -.5rem;
  --hero-floater-y: -.45rem;
  bottom: -1%;
  right: 14%;
}

.platform-home-hero__floaters--money span:nth-child(3) {
  --hero-floater-delay: -4.4s;
  --hero-floater-duration: 9.7s;
  --hero-floater-rotate: 6deg;
  --hero-floater-scale: .84;
  --hero-floater-x: -.35rem;
  --hero-floater-y: .45rem;
  bottom: 10%;
  right: 2%;
}

.platform-home-hero__floaters--money span:nth-child(4) {
  --hero-floater-delay: -3.6s;
  --hero-floater-duration: 11.2s;
  --hero-floater-rotate: -4deg;
  --hero-floater-scale: .88;
  --hero-floater-x: .45rem;
  --hero-floater-y: -.35rem;
  bottom: 16%;
  left: 24%;
}

.platform-home-hero__floaters--money span:nth-child(5) {
  --hero-floater-delay: -5.1s;
  --hero-floater-duration: 9.2s;
  --hero-floater-rotate: 9deg;
  --hero-floater-scale: .8;
  --hero-floater-x: -.4rem;
  --hero-floater-y: .3rem;
  bottom: -5%;
  left: 38%;
}

.platform-home-hero__floaters--money span:nth-child(6) {
  --hero-floater-delay: -6.3s;
  --hero-floater-duration: 12.5s;
  --hero-floater-rotate: -10deg;
  --hero-floater-scale: .78;
  --hero-floater-x: .4rem;
  --hero-floater-y: -.5rem;
  bottom: 22%;
  right: 31%;
}

.platform-home-hero__channels,
.platform-home-hero__signals,
.platform-home-hero__routes {
  display: flex;
  flex-wrap: wrap;
}

.platform-home-hero__channels {
  gap: var(--cc-space-3);
  justify-content: center;
  margin-inline: auto;
  max-width: 35rem;
}

.platform-home-hero__connector {
  display: flex;
  gap: clamp(.9rem, 3vw, 1.6rem);
  height: auto;
  justify-content: center;
  position: relative;
}

.platform-home-hero__connector span {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--site-accent) 58%, rgba(var(--cc-rgb-white), .22)), transparent);
  border-radius: 999px;
  display: block;
  height: 2.6rem;
  transform: rotate(var(--hero-line-tilt, 0deg));
  width: 2px;
}

.platform-home-hero__connector span:nth-child(1) {
  --hero-line-tilt: -14deg;
}

.platform-home-hero__connector span:nth-child(3) {
  --hero-line-tilt: 14deg;
}

.platform-home-hero__connector--top {
  height: 4.2rem;
  margin-bottom: calc(var(--cc-space-1) * -1);
}

.platform-home-hero__connector--top::before,
.platform-home-hero__connector--top::after {
  background: linear-gradient(180deg, rgba(var(--cc-rgb-white), .08), color-mix(in srgb, var(--site-accent) 58%, rgba(var(--cc-rgb-white), .26)), transparent);
  border-radius: 999px;
  content: "";
  height: 4.1rem;
  left: 50%;
  position: absolute;
  top: 0;
  transform-origin: bottom center;
  width: 2px;
}

.platform-home-hero__connector--top::before {
  transform: translateX(calc(var(--cc-space-8) * -1)) rotate(-22deg);
}

.platform-home-hero__connector--top::after {
  transform: translateX(var(--cc-space-8)) rotate(22deg);
}

.platform-home-hero__connector--top span {
  display: none;
}

.platform-home-hero__connector--bottom {
  height: 2.5rem;
}

.platform-home-hero__channels span {
  --hero-bubble-accent: var(--site-accent);
  align-items: center;
  background:
    linear-gradient(145deg, rgba(var(--cc-rgb-white), .92), rgba(var(--cc-rgb-white), .58)),
    color-mix(in srgb, var(--hero-bubble-accent) 16%, var(--site-surface, var(--cc-neutral-white)));
  border: 1px solid color-mix(in srgb, var(--hero-bubble-accent) 32%, rgba(var(--cc-rgb-white), .62));
  border-radius: 999px;
  box-shadow: 0 .65rem 1.4rem color-mix(in srgb, var(--hero-bubble-accent) 14%, transparent);
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 88%, var(--hero-bubble-accent));
  display: inline-flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  gap: var(--cc-space-2);
  line-height: var(--cc-line-tight);
  min-height: 2.35rem;
  padding: var(--cc-space-2) var(--cc-space-3);
  transform: translateY(var(--hero-bubble-offset, 0)) rotate(var(--hero-bubble-tilt, 0deg));
  white-space: nowrap;
}

.platform-home-hero__channels span:nth-child(1),
.platform-home-hero__channels span:nth-child(6) {
  --hero-bubble-accent: var(--site-accent-strong, var(--site-accent));
  --hero-bubble-offset: .45rem;
  --hero-bubble-tilt: -3deg;
}

.platform-home-hero__channels span:nth-child(2),
.platform-home-hero__channels span:nth-child(7) {
  --hero-bubble-accent: var(--site-accent-highlight, var(--site-accent));
  --hero-bubble-offset: -.25rem;
  --hero-bubble-tilt: 2deg;
}

.platform-home-hero__channels span:nth-child(3),
.platform-home-hero__channels span:nth-child(8) {
  --hero-bubble-accent: var(--site-primary, var(--site-accent));
  --hero-bubble-offset: .15rem;
  --hero-bubble-tilt: 3deg;
}

.platform-home-hero__channels span:nth-child(4) {
  --hero-bubble-accent: var(--site-accent-soft, var(--site-accent));
  --hero-bubble-offset: -.45rem;
  --hero-bubble-tilt: -2deg;
}

.platform-home-hero__channels span:nth-child(5) {
  --hero-bubble-accent: var(--site-accent-muted, var(--site-accent));
  --hero-bubble-offset: .35rem;
}

.platform-home-hero__screen {
  animation: homepage-screen-brand 12s linear infinite;
  background:
    linear-gradient(145deg, rgba(var(--cc-rgb-white), .13), rgba(var(--cc-rgb-white), .055)),
    color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 20%, transparent);
  border: 1px solid rgba(var(--cc-rgb-white), .16);
  border-radius: var(--site-card-radius, 1.35rem);
  box-shadow: 0 2rem 4.5rem rgba(var(--cc-rgb-black), .34);
  display: grid;
  gap: var(--cc-space-4);
  isolation: isolate;
  min-height: 26rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.45rem);
  position: relative;
}

.platform-home-hero__screen::before {
  animation: homepage-screen-sheen 12s linear infinite;
  background: linear-gradient(115deg, transparent 0 32%, rgba(var(--cc-rgb-white), .42) 44%, rgba(var(--cc-rgb-white), .1) 52%, transparent 66%);
  content: "";
  inset: -22% -48%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-52%);
  z-index: 1;
}

.platform-home-hero__screen::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--site-accent) 72%, var(--cc-neutral-white)), transparent),
    rgba(var(--cc-rgb-white), .06);
  border-radius: inherit;
  content: "";
  inset: auto var(--cc-space-5) var(--cc-space-5);
  height: .22rem;
  opacity: .75;
  position: absolute;
  z-index: 2;
  transform: translateY(12px);
}

.platform-home-hero__screen > * {
  position: relative;
  z-index: 2;
}

@keyframes homepage-screen-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    background:
      linear-gradient(145deg, rgba(var(--cc-rgb-white), .13), rgba(var(--cc-rgb-white), .055)),
      color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 20%, transparent);
    border-color: rgba(var(--cc-rgb-white), .16);
    box-shadow: 0 2rem 4.5rem rgba(var(--cc-rgb-black), .34);
  }

  3.25%,
  26% {
    background:
      radial-gradient(circle at 88% 18%, rgba(93, 198, 143, .34), transparent 12rem),
      radial-gradient(circle at 72% 78%, rgba(74, 122, 198, .38), transparent 14rem),
      linear-gradient(115deg, rgba(8, 25, 55, .98) 0 38%, rgba(17, 54, 99, .9) 58%, rgba(93, 198, 143, .42) 100%);
    border-color: rgba(93, 198, 143, .38);
    box-shadow: 0 2rem 4.8rem rgba(8, 25, 55, .36);
  }

  39.8%,
  65% {
    background:
      radial-gradient(circle at 88% 8%, rgba(79, 140, 255, .14), transparent 11rem),
      radial-gradient(circle at 10% 88%, rgba(40, 214, 184, .08), transparent 12rem),
      linear-gradient(145deg, rgba(32, 36, 42, .96), rgba(17, 19, 24, .94));
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 2rem 4.8rem rgba(17, 19, 24, .34);
  }

  71.7%,
  97% {
    background:
      radial-gradient(circle at 82% 14%, rgba(255, 184, 77, .24), transparent 12rem),
      radial-gradient(circle at 14% 88%, rgba(127, 90, 240, .24), transparent 13rem),
      linear-gradient(145deg, rgba(26, 28, 45, .9), rgba(86, 45, 92, .82));
    border-color: rgba(255, 184, 77, .28);
    box-shadow: 0 2rem 4.8rem rgba(127, 90, 240, .24);
  }
}

@keyframes homepage-screen-sheen {
  0%,
  2.6% {
    opacity: 0;
    transform: translateX(-52%);
  }

  4.8% {
    opacity: .72;
    transform: translateX(0);
  }

  6.8% {
    opacity: 0;
    transform: translateX(52%);
  }

  7% {
    opacity: 0;
    transform: translateX(-52%);
  }

  25% {
    opacity: 0;
    transform: translateX(52%);
  }

  27% {
    opacity: .72;
    transform: translateX(0);
  }

  30% {
    opacity: 0;
    transform: translateX(-52%);
  }

  31%,
  39% {
    opacity: 0;
    transform: translateX(-52%);
  }

  41.6% {
    opacity: .72;
    transform: translateX(0);
  }

  43.8% {
    opacity: 0;
    transform: translateX(52%);
  }

  44% {
    opacity: 0;
    transform: translateX(-52%);
  }

  62% {
    opacity: 0;
    transform: translateX(52%);
  }

  63% {
    opacity: .72;
    transform: translateX(0);
  }

  66% {
    opacity: 0;
    transform: translateX(-52%);
  }

  67%,
  71% {
    opacity: 0;
    transform: translateX(-52%);
  }

  74% {
    opacity: .72;
    transform: translateX(0);
  }

  76.8% {
    opacity: 0;
    transform: translateX(52%);
  }

  77% {
    opacity: 0;
    transform: translateX(-52%);
  }

  93% {
    opacity: 0;
    transform: translateX(52%);
  }

  95% {
    opacity: .72;
    transform: translateX(0);
  }

  98%,
  99%,
  100% {
    opacity: 0;
    transform: translateX(-52%);
  }
}

.platform-home-hero__screen-top {
  align-items: center;
  border-bottom: 1px solid rgba(var(--cc-rgb-white), .1);
  display: flex;
  gap: var(--cc-space-2);
  justify-content: flex-end;
  padding-bottom: var(--cc-space-4);
}

.platform-home-hero__screen-top span {
  background: rgba(var(--cc-rgb-white), .34);
  border-radius: 999px;
  height: .52rem;
  width: .52rem;
}

.platform-home-hero__screen-brand {
  align-items: center;
  background: transparent !important;
  border-radius: 0 !important;
  display: inline-flex;
  height: 1.65rem !important;
  margin-right: auto;
  position: relative;
  width: auto !important;
}

.platform-home-hero__screen-brand-logo {
  animation: homepage-screen-brand-logo-light 12s linear infinite;
  display: block;
  height: 100%;
  max-width: 9.5rem;
  object-fit: contain;
  width: auto;
}

.platform-home-hero__screen-brand-logo--dark {
  animation-name: homepage-screen-brand-logo-dark;
  inset: 0 auto auto 0;
  opacity: 0;
  position: absolute;
}

@keyframes homepage-screen-brand-logo-light {
  0%,
  3.2%,
  27%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    opacity: 1;
  }

  3.25%,
  26%,
  39.8%,
  65%,
  71.7%,
  97% {
    opacity: 0;
  }
}

@keyframes homepage-screen-brand-logo-dark {
  0%,
  3.2%,
  27%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    opacity: 0;
  }

  3.25%,
  26%,
  39.8%,
  65%,
  71.7%,
  97% {
    opacity: 1;
  }
}

.platform-home-hero__profile {
  align-items: start;
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: 1fr;
  justify-items: start;
  margin-top: var(--cc-space-2);
}

.platform-home-hero__site-header {
  animation: homepage-avatar-brand 12s linear infinite;
  align-items: center;
  background: linear-gradient(225deg, color-mix(in srgb, var(--site-accent) 78%, var(--cc-neutral-white)), var(--site-accent-highlight, var(--site-accent)));
  border: 1px solid rgba(var(--cc-rgb-white), .16);
  border-radius: .9rem;
  color: var(--site-button-text, var(--cc-neutral-white));
  display: flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  gap: var(--cc-space-4);
  height: 4.35rem;
  justify-content: space-between;
  overflow: hidden;
  padding: var(--cc-space-3) var(--cc-space-3);
  position: relative;
  width: 100%;
}

.platform-home-hero__site-header::before {
  animation: homepage-screen-sheen 12s linear infinite;
  background: linear-gradient(115deg, transparent 0 30%, rgba(var(--cc-rgb-white), .58) 44%, rgba(var(--cc-rgb-white), .12) 54%, transparent 68%);
  content: "";
  inset: -35%;
  opacity: 0;
  position: absolute;
  transform: translateX(-52%);
  z-index: 1;
}

.platform-home-hero__site-logo {
  align-items: center;
  display: flex;
  height: 100%;
  min-width: clamp(6.8rem, 18vw, 11.5rem);
  position: relative;
  z-index: 2;
}

.platform-home-hero__site-logo-mark {
  align-items: center;
  animation: homepage-avatar-logo 12s linear infinite;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
}

.platform-home-hero__site-logo-mark img {
  display: block;
  filter: drop-shadow(0 .35rem .8rem rgba(var(--cc-rgb-black), .16));
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.platform-home-hero__site-logo-mark--adam img {
  max-width: 96%;
}

.platform-home-hero__site-logo-mark--load img {
  max-width: 92%;
}

.platform-home-hero__site-logo-mark--custom {
  align-items: flex-start;
  color: #FFF7D6;
  flex-direction: column;
  font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
  gap: var(--cc-space-1);
  justify-content: center;
  line-height: var(--cc-line-tight);
  text-transform: uppercase;
}

.platform-home-hero__site-logo-mark--custom span {
  color: rgba(255, 247, 214, .72);
  display: block;
  font-size: var(--cc-type-xs);
  font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-wide);
}

.platform-home-hero__site-logo-mark--custom strong {
  color: #FFF7D6;
  display: block;
  font-size: var(--cc-type-2xl);
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-narrow);
}

.platform-home-hero__site-logo-mark:nth-child(1) {
  animation-name: homepage-avatar-logo-adam;
}

.platform-home-hero__site-logo-mark:nth-child(2) {
  animation-name: homepage-avatar-logo-load;
}

.platform-home-hero__site-logo-mark:nth-child(3) {
  animation-name: homepage-avatar-logo-custom;
}

.platform-home-hero__site-header-nav {
  align-items: center;
  display: flex;
  flex: 0 1 10rem;
  gap: var(--cc-space-2);
  justify-content: flex-end;
  max-width: 42%;
  position: relative;
  z-index: 2;
}

.platform-home-hero__site-header-nav span {
  background: rgba(var(--cc-rgb-white), .45);
  border-radius: 999px;
  display: block;
  height: .42rem;
  width: clamp(1.25rem, 4vw, 2.15rem);
}

@keyframes homepage-avatar-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    background: linear-gradient(225deg, color-mix(in srgb, var(--site-accent) 78%, var(--cc-neutral-white)), var(--site-accent-highlight, var(--site-accent)));
    border-color: rgba(var(--cc-rgb-white), .16);
    color: var(--site-button-text, var(--cc-neutral-white));
  }

  3.25%,
  26% {
    background:
      radial-gradient(circle at 88% 22%, rgba(93, 198, 143, .46), transparent 7rem),
      linear-gradient(105deg, #081935 0 42%, #173E70 66%, #5DC68F 100%);
    border-color: rgba(93, 198, 143, .42);
    color: #FFFFFF;
  }

  39.8%,
  65% {
    background: linear-gradient(135deg, #2D333B, #15181D);
    border-color: rgba(79, 140, 255, .22);
    color: #FFFFFF;
  }

  71.7%,
  97% {
    background: linear-gradient(135deg, #7F5AF0, #FFB84D);
    border-color: rgba(255, 184, 77, .34);
    color: #1A1C2D;
  }
}

@keyframes homepage-avatar-logo-adam {
  0%,
  3.2% {
    opacity: 0;
  }

  3.25%,
  26% {
    opacity: 1;
  }

  27%,
  100% {
    opacity: 0;
  }
}

@keyframes homepage-avatar-logo-load {
  0%,
  39.7%,
  66%,
  100% {
    opacity: 0;
  }

  39.8%,
  65% {
    opacity: 1;
  }
}

@keyframes homepage-avatar-logo-custom {
  0%,
  71.6%,
  98%,
  100% {
    opacity: 0;
  }

  71.7%,
  97% {
    opacity: 1;
  }
}

.platform-home-hero__typed {
  display: block;
  min-height: clamp(1.75rem, 4vw, 3rem);
  position: relative;
}

.platform-home-hero__typed strong {
  --typed-characters: 9;
  animation: homepage-typed-name 12s steps(var(--typed-characters), end) infinite;
  animation-delay: var(--typed-delay, 0s);
  border-right: .08em solid color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 82%, var(--cc-neutral-white));
  color: var(--cc-neutral-white);
  display: block;
  font-family: var(--cc-font-primary);
  font-size: var(--cc-type-3xl);
  font-style: normal;
  font-weight: var(--cc-weight-black);
  left: 0;
  line-height: var(--cc-line-tight);
  max-width: max-content;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: 0;
}

.platform-home-hero__typed strong:nth-child(1) {
  --typed-characters: 9;
  --typed-delay: 0s;
  animation-name: homepage-typed-name-short;
}

.platform-home-hero__typed strong:nth-child(2) {
  --typed-characters: 18;
  --typed-delay: 4s;
  animation-name: homepage-typed-name;
}

.platform-home-hero__typed strong:nth-child(3) {
  --typed-characters: 10;
  --typed-delay: 8s;
  animation-name: homepage-typed-name-medium;
  font-family: var(--cc-font-primary);
}

@keyframes homepage-typed-name {
  0%,
  3% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  13% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  15%,
  22% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  30.5% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * .2ch);
  }

  32% {
    font-family: var(--cc-font-primary);
    letter-spacing: var(--cc-tracking-normal);
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  33%,
  100% {
    font-family: var(--cc-font-primary);
    letter-spacing: var(--cc-tracking-normal);
    opacity: 0;
    text-transform: none;
    width: 0;
  }
}

@keyframes homepage-typed-name-short {
  0%,
  3% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: uppercase;
    width: 0;
  }

  6.5% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * 1ch);
  }

  9.5% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * 1ch);
  }

  10%,
  22% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * 1ch);
  }

  26% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * .2ch);
  }

  27% {
    font-family: var(--cc-font-primary);
    font-style: normal;
    font-weight: var(--cc-weight-black);
    letter-spacing: var(--cc-tracking-normal);
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  28%,
  100% {
    font-family: var(--cc-font-primary);
    font-style: normal;
    font-weight: var(--cc-weight-black);
    letter-spacing: var(--cc-tracking-normal);
    opacity: 0;
    text-transform: none;
    width: 0;
  }
}

@keyframes homepage-typed-name-medium {
  0%,
  3% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  10.1% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  12%,
  22% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  28.5% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: var(--cc-tracking-narrow);
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * .2ch);
  }

  29.8% {
    font-family: var(--cc-font-primary);
    letter-spacing: var(--cc-tracking-normal);
    opacity: 1;
    width: 0;
  }

  30.8%,
  100% {
    font-family: var(--cc-font-primary);
    letter-spacing: var(--cc-tracking-normal);
    opacity: 0;
    width: 0;
  }
}

.platform-home-hero__profile-caption {
  display: block;
  min-height: 1.25rem;
  margin-top: var(--cc-space-1);
  position: relative;
}

.platform-home-hero__profile-caption span {
  animation: homepage-caption-brand 12s linear infinite;
  color: rgba(var(--cc-rgb-white), .62);
  display: block;
  font-family: var(--cc-font-primary);
  font-size: var(--cc-type-base);
  font-style: normal;
  font-weight: var(--cc-weight-bold);
  left: 0;
  letter-spacing: var(--cc-tracking-normal);
  opacity: 0;
  position: absolute;
  text-transform: none;
  top: 0;
  white-space: nowrap;
}

.platform-home-hero__profile-caption span:nth-child(1) {
  animation-name: homepage-caption-brand, homepage-caption-creator;
  opacity: 1;
}

.platform-home-hero__profile-caption span:nth-child(2) {
  animation-name: homepage-caption-brand, homepage-caption-studio;
}

.platform-home-hero__profile-caption span:nth-child(3) {
  animation-name: homepage-caption-brand, homepage-caption-custom;
}

@keyframes homepage-caption-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    color: rgba(var(--cc-rgb-white), .62);
    font-family: var(--cc-font-primary);
    letter-spacing: var(--cc-tracking-normal);
    text-transform: none;
  }

  3.25%,
  26% {
    color: rgba(244, 251, 255, .74);
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    text-transform: none;
  }

  39.8%,
  65% {
    color: rgba(255, 255, 255, .7);
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: var(--cc-tracking-wide);
    text-transform: uppercase;
  }

  71.7%,
  97% {
    color: rgba(255, 247, 214, .74);
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: var(--cc-tracking-narrow);
    text-transform: none;
  }
}

@keyframes homepage-caption-creator {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    opacity: 1;
  }

  39.8%,
  65%,
  71.7%,
  97% {
    opacity: 0;
  }
}

@keyframes homepage-caption-studio {
  0%,
  39.7%,
  66%,
  100% {
    opacity: 0;
  }

  39.8%,
  65% {
    opacity: 1;
  }
}

@keyframes homepage-caption-custom {
  0%,
  71.6%,
  98%,
  100% {
    opacity: 0;
  }

  71.7%,
  97% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-home-hero__screen,
  .platform-home-hero__screen::before,
  .platform-home-hero__site-header,
  .platform-home-hero__site-header::before,
  .platform-home-hero__site-logo-mark,
  .platform-home-hero__profile-caption span,
  .platform-home-hero__routes span {
    animation: none;
  }

  .platform-home-hero__site-logo-mark {
    opacity: 0;
  }

  .platform-home-hero__site-logo-mark:first-child {
    opacity: 1;
  }

  .platform-home-hero__profile-caption span {
    opacity: 0;
  }

  .platform-home-hero__profile-caption span:first-child {
    opacity: 1;
  }

  .platform-home-hero__typed strong {
    animation: none;
    border-right: 0;
    opacity: 0;
    width: 0;
  }

  .platform-home-hero__typed strong:last-child {
    opacity: 1;
    position: relative;
    width: auto;
  }
}

.platform-home-hero__feature-line {
  background: rgba(var(--cc-rgb-white), .12);
  border-radius: 999px;
  height: .78rem;
  max-width: 62%;
}

.platform-home-hero__feature-line--wide {
  max-width: 88%;
}

.platform-home-hero__routes {
  align-content: end;
  margin-top: auto;
}

.platform-home-hero__routes span {
  animation: homepage-route-brand 12s linear infinite;
  background: rgba(var(--cc-rgb-white), .09);
  border: 1px solid rgba(var(--cc-rgb-white), .11);
  border-radius: .7rem;
  color: rgba(var(--cc-rgb-white), .82);
  flex: 1 1 8rem;
  font-family: var(--cc-font-primary);
  font-size: var(--cc-type-sm);
  font-style: normal;
  font-weight: var(--cc-weight-black);
  letter-spacing: var(--cc-tracking-normal);
  padding: var(--cc-space-4);
}

@keyframes homepage-route-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    background: rgba(var(--cc-rgb-white), .09);
    border-color: rgba(var(--cc-rgb-white), .11);
    color: rgba(var(--cc-rgb-white), .82);
    font-family: var(--cc-font-primary);
    letter-spacing: var(--cc-tracking-normal);
    text-transform: none;
  }

  3.25%,
  26% {
    background: rgba(93, 198, 143, .14);
    border-color: rgba(74, 122, 198, .34);
    color: rgba(244, 251, 255, .92);
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: var(--cc-weight-bold);
    letter-spacing: var(--cc-tracking-narrow);
    text-transform: uppercase;
  }

  39.8%,
  65% {
    background: rgba(17, 19, 24, .52);
    border-color: rgba(79, 140, 255, .22);
    color: rgba(255, 255, 255, .9);
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: var(--cc-tracking-wide);
    text-transform: uppercase;
  }

  71.7%,
  97% {
    background: rgba(127, 90, 240, .15);
    border-color: rgba(255, 184, 77, .32);
    color: rgba(255, 247, 214, .94);
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: var(--cc-tracking-narrow);
    text-transform: none;
  }
}

.platform-home-hero__signals {
  gap: var(--cc-space-2);
  justify-content: center;
  margin-inline: auto;
  max-width: 28rem;
}

.platform-home-hero__signals span {
  align-items: center;
  background: color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 10%, var(--site-surface, var(--cc-neutral-white)));
  border: 1px solid color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 18%, transparent);
  border-radius: 999px;
  box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 8%, transparent);
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 78%, var(--site-primary, var(--cc-brand-ocean)));
  display: inline-flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: var(--cc-type-sm);
  font-weight: var(--cc-weight-black);
  gap: var(--cc-space-1);
  line-height: var(--cc-line-tight);
  min-height: 2rem;
  padding: var(--cc-space-2) var(--cc-space-3);
  white-space: nowrap;
}

.platform-home-hero__signals strong {
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 88%, var(--site-primary, var(--cc-brand-ocean)));
  margin-right: var(--cc-space-1);
}

@media (max-width: 991.98px) {
  .site-hero--platform-home {
    min-height: 0;
    padding: var(--cc-space-9) 0 var(--cc-space-8);
  }

  .platform-home-hero__layout {
    grid-template-columns: 1fr;
  }

  .platform-home-hero__content {
    max-width: 48rem;
  }

  .platform-home-hero__title {
    max-width: 12ch;
  }

  .platform-home-hero__stage {
    max-width: 40rem;
  }
}

@media (max-width: 575.98px) {
  .site-hero--platform-home {
    padding: var(--cc-space-9) 0 var(--cc-space-7);
  }

  .platform-home-hero__floaters span {
    font-size: var(--cc-type-xs);
    height: 1.55rem;
    opacity: .42;
    width: 1.55rem;
  }

  .platform-home-hero__floaters--people span:nth-child(3),
  .platform-home-hero__floaters--money span:nth-child(3) {
    display: none;
  }

  .platform-home-hero__channels span {
    --hero-bubble-offset: 0;
    --hero-bubble-tilt: 0deg;
    font-size: var(--cc-type-xs);
    min-height: 2rem;
    padding: var(--cc-space-2) var(--cc-space-2);
  }

  .platform-home-hero__connector {
    height: 2.4rem;
  }

  .platform-home-hero__connector--top {
    height: 3rem;
    margin-bottom: calc(var(--cc-space-1) * -1);
  }

  .platform-home-hero__connector--top::before,
  .platform-home-hero__connector--top::after {
    height: var(--cc-space-7);
  }

  .platform-home-hero__connector--top::before {
    transform: translateX(calc(var(--cc-space-7) * -1)) rotate(-18deg);
  }

  .platform-home-hero__connector--top::after {
    transform: translateX(var(--cc-space-7)) rotate(18deg);
  }

  .platform-home-hero__connector--bottom {
    height: 1.75rem;
  }

  .platform-home-hero__connector--bottom span {
    height: 1.75rem;
  }

  .platform-home-hero__screen {
    border-radius: 1rem;
    min-height: 21rem;
  }

  .platform-home-hero__routes span {
    flex-basis: calc(50% - .35rem);
  }

  .platform-home-hero__signals {
    justify-content: flex-start;
  }
}

@media (max-width: 991.98px) {
  .site-hero--product,
  .site-hero--marketing {
    padding: var(--cc-space-8) 0 var(--cc-space-7);
  }

  .page-content > .site-hero--product:first-child,
  .page-content > main > .site-hero--product:first-child,
  .page-content > .site-hero--marketing:first-child,
  .page-content > main > .site-hero--marketing:first-child {
    padding-top: calc(5rem + var(--site-floating-navbar-offset));
  }

  .site-hero--marketing-clean .col-lg-6.order-lg-1,
  .site-hero--marketing-clean .col-lg-6.order-lg-2 {
    grid-column: auto;
    width: 100%;
  }

  .site-hero--marketing-clean .row {
    grid-template-columns: 1fr;
  }

  .site-hero--marketing-clean .col-lg-6.order-lg-1 {
    order: 1;
  }

  .site-hero--marketing-clean .col-lg-6.order-lg-2 {
    order: 2;
  }

  .site-hero__media--clean img {
    height: 32rem;
  }

  .site-hero--marketing-background,
  .site-hero--marketing-gradient {
    min-height: 42rem;
    padding: var(--cc-space-9) 0 var(--cc-space-9);
  }

  .page-content > :is(.site-hero--marketing-background, .site-hero--marketing-gradient):first-child,
  .page-content > main > :is(.site-hero--marketing-background, .site-hero--marketing-gradient):first-child {
    padding-top: calc(7rem + var(--site-floating-navbar-offset));
  }
}

@media (max-width: 575.98px) {
  .site-hero--product .site-hero__media {
    min-height: 28rem;
  }

  .site-hero--product .site-hero__media img {
    height: 28rem;
  }

  .site-hero--product .site-hero__media::before {
    inset: var(--cc-space-3) calc(var(--cc-space-1) * -1) calc(var(--cc-space-3) * -1) var(--cc-space-3);
  }

  .site-hero__stat {
    max-width: 9.5rem;
    padding: var(--cc-space-3);
  }

  .site-hero__stat--top {
    right: var(--cc-space-3);
    top: var(--cc-space-4);
  }

  .site-hero__stat--bottom {
    bottom: var(--cc-space-4);
    left: var(--cc-space-3);
  }

  .site-hero__media--clean img {
    height: 24rem;
  }

  .site-hero--marketing-background,
  .site-hero--marketing-gradient {
    min-height: 36rem;
    padding: var(--cc-space-9) 0 var(--cc-space-8);
  }

  .page-content > :is(.site-hero--marketing-background, .site-hero--marketing-gradient):first-child,
  .page-content > main > :is(.site-hero--marketing-background, .site-hero--marketing-gradient):first-child {
    padding-top: calc(5.5rem + var(--site-floating-navbar-offset));
  }

  .site-hero--marketing .site-hero__title span {
    -webkit-text-stroke-width: 4px;
  }
}


/* Marketing hero implementation moved from navigation ownership. */

.site-hero--marketing {
  --site-hero-accent-color: var(--site-accent, var(--cc-brand-teal));
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--site-accent-highlight, var(--site-hero-accent-color)) 34%, transparent), transparent 24rem), radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--site-hero-accent-color) 44%, transparent), transparent 28rem), linear-gradient(145deg, var(--site-background, var(--cc-brand-mist)) 0%, color-mix(in srgb, var(--site-background, var(--cc-brand-mist)) 76%, var(--site-accent, var(--cc-brand-teal))) 100%);
  color: var(--site-heading-accent, var(--site-text, var(--cc-color-text)));
  padding: var(--site-section-spacing) 0 var(--cc-space-8);
}

.page-content > .site-hero--marketing:first-child,
.page-content > main > .site-hero--marketing:first-child {
  padding-top: calc(var(--site-section-spacing) + var(--site-floating-navbar-offset));
}

.site-hero--marketing .site-hero__media {
  display: flex;
  justify-content: center;
}

.site-hero--marketing .site-hero__media img {
  border-radius: var(--site-media-radius, 2rem .85rem 2rem .85rem);
  box-shadow: 0 1.4rem 3rem color-mix(in srgb, var(--site-primary) 18%, transparent);
  max-height: 42rem;
  object-fit: cover;
  width: min(100%, 32rem);
}

.site-hero--marketing .site-hero__content {
  max-width: 44rem;
}

.site-hero--marketing .site-hero__eyebrow {
  color: var(--site-accent);
  margin-bottom: var(--cc-space-4);
}

.site-hero--marketing .site-hero__title {
  color: var(--site-heading-accent, var(--site-text, var(--cc-color-text)));
  font-size: var(--cc-type-base);
  font-weight: var(--cc-weight-black);
  line-height: var(--cc-line-tight);
  margin-bottom: var(--cc-space-6);
  text-transform: var(--site-heading-transform, uppercase);
}

.site-hero--marketing .site-hero__title span {
  color: transparent;
  -webkit-text-stroke: 4px var(--site-accent-strong, var(--site-hero-accent-color));
}

.site-hero--marketing-clean {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--site-background, var(--cc-brand-mist)) 94%, var(--site-primary, var(--cc-brand-ocean))) 0 36%, transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--site-background, var(--cc-brand-mist)) 96%, var(--site-surface, var(--cc-neutral-white))) 0%, var(--site-background, var(--cc-brand-mist)) 100%);
  overflow: hidden;
  min-height: 0;
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  position: relative;
}

.page-content > .site-hero--marketing-clean:first-child,
.page-content > main > .site-hero--marketing-clean:first-child {
  padding-top: calc(clamp(4rem, 7vw, 5.0) + var(--site-floating-navbar-offset));
}

.site-hero--marketing-clean::before {
  background: color-mix(in srgb, var(--site-hero-accent-color) 10%, transparent);
  content: "";
  height: 1px;
  inset: auto 0 0;
  pointer-events: none;
  position: absolute;
}

.site-hero--marketing-clean > .container {
  position: relative;
  z-index: 1;
}

.site-hero--marketing-clean .row {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
}

.content-main > .site-hero--marketing:first-child {
  padding-top: calc(clamp(2.25rem, 4vw, 2.75rem) + var(--site-floating-navbar-offset));
}

.site-hero__title--clean {
  line-height: var(--cc-line-tight);
  max-width: 12.5ch;
  text-transform: uppercase;
}

.site-hero__title-outline {
  color: transparent;
  -webkit-text-stroke: 2.5px currentColor;
}

.site-hero__title--clean .site-hero__title-outline {
  -webkit-text-stroke-color: var(--site-accent-strong, var(--site-heading-accent, var(--site-text, var(--cc-color-text))));
}

.site-hero__title--background .site-hero__title-outline {
  -webkit-text-stroke-color: var(--site-background, var(--cc-brand-mist));
}

.site-hero--marketing-clean .col-lg-6.order-lg-1 {
  grid-column: 1;
  width: auto;
}

.site-hero--marketing-clean .col-lg-6.order-lg-2 {
  grid-column: 2;
  width: auto;
}

.site-hero--marketing-clean .site-hero__content {
  max-width: 48rem;
  padding: 0;
}

.site-hero--marketing-clean .site-hero__lede,
.site-hero--marketing-clean .site-hero__copy {
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 78%, var(--site-background, var(--cc-brand-mist)));
  max-width: 38rem;
}

.site-hero__media--clean {
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(var(--cc-rgb-white), .72), rgba(var(--cc-rgb-white), .42));
  border: 1px solid color-mix(in srgb, var(--site-border, var(--cc-border-subtle)) 72%, rgba(var(--cc-rgb-white), .65));
  border-radius: var(--site-card-radius, 1.5rem);
  box-shadow: 0 1.5rem 3.5rem color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 13%, transparent);
  margin-inline: 0;
  max-width: none;
  padding: clamp(.75rem, 1.4vw, 1.15rem);
  position: relative;
}

.site-hero__media--clean::before {
  background: linear-gradient(90deg, rgba(var(--cc-rgb-white), .9), color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 54%, rgba(var(--cc-rgb-white), .7)));
  border-radius: 999px;
  box-shadow:
    1.05rem 0 0 color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 22%, rgba(var(--cc-rgb-white), .78)),
    2.1rem 0 0 rgba(var(--cc-rgb-white), .7);
  content: "";
  height: .58rem;
  left: var(--cc-space-5);
  position: absolute;
  top: var(--cc-space-5);
  width: .58rem;
  z-index: 2;
}

.site-hero__media--clean img {
  border-radius: calc(var(--site-card-radius, 1.5rem) - .45rem);
  box-shadow: inset 0 0 0 1px rgba(var(--cc-rgb-white), .36);
  height: clamp(30rem, 44vw, 39rem);
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: none;
  width: 100%;
}

.site-hero--marketing-clean .btn {
  font-size: var(--cc-type-base);
  min-height: 4rem;
  padding-inline: 2rem;
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) {
  background: var(--site-primary, var(--cc-neutral-charcoal));
  color: #F8FFFD;
  min-height: 50rem;
  overflow: hidden;
  padding: var(--cc-space-9) 0 var(--cc-space-9);
  position: relative;
}

.page-content > :is(.site-hero--marketing-background, .site-hero--marketing-gradient):first-child,
.page-content > main > :is(.site-hero--marketing-background, .site-hero--marketing-gradient):first-child {
  padding-top: calc(10rem + var(--site-floating-navbar-offset));
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient)::before {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 18%, transparent) 0 38%, transparent 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--site-primary, var(--cc-neutral-charcoal)) 72%, transparent) 0%, color-mix(in srgb, var(--site-primary, var(--cc-neutral-charcoal)) 46%, transparent) 46%, color-mix(in srgb, var(--site-primary, var(--cc-neutral-charcoal)) 18%, transparent) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.site-hero--marketing-gradient {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 38%, transparent), transparent 31rem),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--site-accent-soft, var(--cc-brand-mint)) 26%, transparent), transparent 28rem),
    linear-gradient(135deg, color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 92%, var(--cc-neutral-black)), color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 58%, var(--cc-neutral-black)) 58%, color-mix(in srgb, var(--site-accent, var(--cc-brand-teal)) 42%, var(--cc-neutral-black)));
}

.site-hero--marketing-gradient::before {
  background:
    linear-gradient(115deg, rgba(var(--cc-rgb-white), .08) 0 38%, transparent 38%),
    linear-gradient(180deg, rgba(var(--cc-rgb-white), .08), rgba(var(--cc-rgb-white), 0) 38%),
    linear-gradient(90deg, rgba(var(--cc-rgb-neutral-charcoal), .22), transparent 52%, rgba(var(--cc-rgb-neutral-charcoal), .16));
}

.site-hero--marketing-gradient .site-hero__image--background {
  z-index: 0;
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .container {
  position: relative;
  z-index: 2;
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .site-hero__eyebrow {
  color: var(--site-accent, var(--cc-brand-teal));
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .site-hero__content--background {
  margin-inline: auto;
  max-width: 58rem;
  text-align: center;
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .site-hero__title--background {
  color: #F8FFFD;
  margin-inline: auto;
  font-weight: var(--cc-weight-black);
  line-height: var(--cc-line-tight);
  margin-bottom: var(--cc-space-5);
  max-width: 13ch;
  text-transform: var(--site-heading-transform, uppercase);
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .site-hero__lede,
:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .site-hero__copy {
  color: color-mix(in srgb, #F8FFFD 78%, transparent);
  margin-inline: auto;
  max-width: 42rem;
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) :is(.site-hero__actions, .action-row) {
  justify-content: center;
}

:is(.site-hero--marketing-background, .site-hero--marketing-gradient) .btn-secondary {
  --bs-btn-bg: #D9F6F3;
  --bs-btn-border-color: color-mix(in srgb, var(--site-accent) 58%, var(--site-border));
  --bs-btn-color: var(--site-primary, var(--cc-neutral-charcoal));
}

.site-hero__lede {
  font-size: var(--cc-type-lg);
  line-height: var(--cc-line-caption);
  margin-bottom: var(--cc-space-4);
  max-width: 40rem;
}

.site-hero__copy {
  font-size: var(--cc-type-base);
  line-height: var(--cc-line-body);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--cc-space-6);
  gap: var(--cc-space-3);
}

.site-hero--marketing :is(.btn-primary, .btn-secondary):hover,
.site-hero--product :is(.btn-primary, .btn-secondary):hover,
.site-hero--homepage :is(.btn-primary, .btn-secondary):hover {
  transform: translateY(-2px);
}