/* Toolkit palette and interaction states, shared across landing components. */
.worlds-scene {
  position: relative;
  margin: 16px -18px 24px;
  border: 2px solid var(--ivory);
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: 6px 7px 0 var(--carbon);
}
.worlds-scene > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pro-scene { transform: rotate(2deg); }
.pro-scene > img { object-fit: contain; background: #101115; }
.pro-game-previews {
  position: relative;
  padding: 14px 15% 36px 10px;
  background: #101115;
}
.pro-desktop-preview { position: relative; container-type: inline-size; }
.pro-game-previews img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.pro-game-previews .pro-mobile-preview {
  position: absolute;
  width: 27%;
  right: 3%;
  bottom: 12px;
  transform: rotate(7deg);
  container-type: inline-size;
  border: 2px solid var(--ivory);
  border-radius: 10px;
  box-shadow: -8px 8px 18px rgba(0, 0, 0, .55);
}
.creator-name-sticker {
  position: absolute;
  left: 67%;
  top: 23%;
  padding: 2% 3%;
  white-space: nowrap;
  background: var(--topaz);
  color: var(--carbon);
  border: 2px solid var(--carbon);
  border-radius: 5px;
  font-size: 4cqw;
  font-weight: 700;
  transform: rotate(-5deg);
  box-shadow: 2px 3px 0 var(--ivory);
}
.pro-mobile-preview .creator-name-sticker {
  left: 21%;
  top: 18.5%;
  font-size: 11cqw;
}
.pro-scene figcaption small {
  display: block;
  margin-top: 5px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}
.worlds-scene figcaption {
  padding: 10px 14px;
  background: var(--carbon);
  color: var(--ivory);
  font-family: var(--display);
  font-size: 20px;
  text-align: center;
}
.hero-cta-icon {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-62%);
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(29, 29, 27, .2));
}
.edition-logo {
  display: flex;
  align-items: center;
  height: 170px;
  margin-top: 12px;
}
.edition-logo img {
  display: block;
  width: min(100%, 330px);
  height: auto;
}
.edition-logo-pro img {
  width: min(100%, 280px);
}
.comparison-hand {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  object-fit: contain;
}
.closing-cta .closing-pro-logo {
  position: static;
  justify-self: center;
  align-self: center;
  width: min(100%, 220px);
  height: auto;
  opacity: 1;
  transform: none;
}
:root {
  --sandstone: #ada07c;
  --amethyst: #681f87;
  --petal: #d466a3;
  --light: var(--ivory);
  --azure-tint: color-mix(in srgb, var(--blue) 20%, white);
  --coral-tint: color-mix(in srgb, var(--coral) 20%, white);
  --coral-hover: color-mix(in srgb, var(--coral) 60%, white);
  --coral-ink: color-mix(in srgb, var(--coral) 50%, black);
  --carbon-hover: #555247;
}

.hero,
.strategy-section,
.comparison-scroll,
.floating-note {
  background: var(--ivory);
}

.comparison-section { background: var(--sandstone); }
.comparison-table .comparison-group th { background: var(--clay); }
.community-card { background: var(--blue); }
.strategy-card-game { background: var(--amethyst); color: var(--ivory); }
.strategy-card-pro { background: var(--coral); }
.creator-section .closing-cta,
.ecosystem-card { background: var(--coral); color: var(--carbon); }
.ecosystem-card > p,
.ecosystem-card .eyebrow { color: var(--carbon); }
.strategy-card .strategy-description,
.strategy-card .strategy-step,
.strategy-card ul,
.strategy-card li::before,
.closing-cta .creator-copy > p,
.community-card div > p:last-child,
.community-card .eyebrow { color: var(--carbon); }
.strategy-card-game .strategy-step,
.strategy-card-game .strategy-promise,
.strategy-card-game .strategy-description { color: var(--ivory); }
.closing-cta .button-primary { background: var(--carbon); color: var(--ivory); }
.closing-cta .button-primary:hover { background: var(--carbon-hover); color: white; }
.strategy-points span,
.restriction-note { background: var(--ivory); }

.hero .hero-primary,
.strategy-card .button,
.button-primary,
.hero-pro-cta,
.strategy-pro-button,
.closing-cta .button-primary {
  min-height: 60px;
  padding: 16px 24px;
  border-radius: 18px;
  font-family: var(--body);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: normal;
}

.video-game-cta {
  font-family: var(--body);
  font-size: 18px;
  font-weight: 600;
}

.button-secondary,
.community-card .button-secondary {
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.button-primary,
.strategy-card-game .button-primary,
.video-game-cta {
  background: var(--coral);
  color: var(--carbon);
}

.hero .hero-primary:hover,
.button-primary:hover,
.strategy-card-game .button-primary:hover,
.video-game-cta:hover,
.video-play:hover {
  background: var(--coral-hover);
  color: var(--coral-ink);
}

.hero-pro-cta,
.strategy-pro-button,
.button-secondary { background: var(--carbon); color: var(--ivory); }
.hero-pro-cta:hover,
.strategy-pro-button:hover,
.button-secondary:hover,
.community-card:hover .community-action { background: var(--carbon-hover); color: white; }

.hero .hero-primary,
.video-game-cta {
  background: var(--amethyst);
  color: var(--ivory);
}
.hero .hero-primary:hover,
.video-game-cta:hover {
  background: color-mix(in srgb, var(--amethyst) 75%, black);
  color: var(--ivory);
}
.strategy-card-game .button-primary,
.strategy-card-pro .strategy-pro-button {
  background: var(--carbon);
  color: var(--ivory);
}
.strategy-card-game .button-primary:hover,
.strategy-card-pro .strategy-pro-button:hover {
  background: var(--carbon-hover);
  color: white;
}
.hero-pro-cta { background: var(--coral); border-color: transparent; color: var(--carbon); }
.hero-pro-cta:hover { background: var(--coral-hover); color: var(--coral-ink); }

.button-primary:disabled {
  background: var(--coral-tint);
  color: color-mix(in srgb, var(--coral) 40%, white);
  opacity: 1;
}
.button-secondary:disabled,
.strategy-pro-button:disabled {
  background: color-mix(in srgb, var(--carbon) 30%, var(--ivory));
  color: color-mix(in srgb, var(--carbon) 15%, var(--ivory));
  opacity: 1;
}
.button:disabled:hover { transform: none; box-shadow: none; }

.hero-actions .hero-primary,
.hero-actions .hero-pro-cta {
  position: relative;
  overflow: visible;
  padding-left: 94px;
}
.hero-actions { row-gap: 28px; }

.video-tool-icon {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.video-card[data-tool="pro"] .video-game-cta,
.video-card[data-tool="pro"] .video-play {
  background: var(--coral);
  color: var(--carbon);
}
.video-card[data-tool="pro"] .video-game-cta:hover,
.video-card[data-tool="pro"] .video-play:hover {
  background: var(--coral-hover);
  color: var(--coral-ink);
}
.video-card[data-tool="worlds"] .video-game-cta,
.video-card[data-tool="worlds"] .video-play {
  background: var(--amethyst);
  color: var(--ivory);
}
.video-card[data-tool="worlds"] .video-game-cta:hover,
.video-card[data-tool="worlds"] .video-play:hover {
  background: color-mix(in srgb, var(--amethyst) 75%, black);
  color: var(--ivory);
}

@media (max-width: 760px) {
  .hero .hero-primary,
  .strategy-card .button,
  .button-primary,
  .hero-pro-cta,
  .strategy-pro-button,
  .closing-cta .button-primary {
    font-size: 20px;
    padding-inline: 16px;
    white-space: normal;
  }
  .video-game-cta { font-size: 16px; }
  .hero-actions .hero-primary,
  .hero-actions .hero-pro-cta { padding-left: 80px; }
  .hero-cta-icon { width: 80px; height: 80px; left: 0; }
}