/* Direction 01: media worktable */
.variant-studio .hero-media {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
}

.variant-studio .compare-stage {
  box-shadow: none;
}

/* Direction 02: high-energy creator cut */
.variant-creator .site-header {
  border-bottom: 2px solid var(--fg);
  backdrop-filter: none;
}

.variant-creator .hero {
  padding-top: 32px;
}

.variant-creator .hero-copy {
  grid-column: span 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 4px solid var(--fg);
  border-bottom: 1px solid var(--fg);
}

.variant-creator .hero-media {
  grid-column: span 8;
}

.variant-creator .hero h1 {
  font-size: clamp(62px, 6.2vw, 92px);
  line-height: 0.8;
  text-transform: uppercase;
}

.variant-creator .headline-line:nth-child(2) {
  color: var(--action);
}

.variant-creator .hero-support {
  max-width: 460px;
  font-size: 16px;
}

.variant-creator .template-shelf {
  gap: 7px;
}

.variant-creator .template-meta {
  min-height: 72px;
  border-top: 2px solid var(--fg);
}

.variant-creator .section-head,
.variant-creator .trust-break {
  border-left: 8px solid var(--fg);
  padding-left: 22px;
}

/* Direction 03: dark screening room */
.variant-night .site-header {
  background: oklch(14% 0.0069 269.7 / 0.9);
}

.variant-night .header-cta,
.variant-night .store-link {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.variant-night .hero-grid {
  align-items: stretch;
}

.variant-night .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 24px;
}

.variant-night .hero-media {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}

.variant-night .compare-stage {
  border-color: oklch(38% 0.025 270);
  box-shadow: none;
}

.variant-night .template-card {
  background: var(--surface);
}

.variant-night .proof-section {
  background: oklch(18% 0.01 270);
}

.variant-night .qr-placeholder {
  background: var(--surface);
}

/* Direction 04: asymmetric contact sheet */
.variant-contact .site-header {
  border-bottom: 1px solid var(--fg);
  backdrop-filter: none;
}

.variant-contact .hero-copy {
  grid-column: 9 / span 4;
  order: 2;
  align-self: end;
  padding-bottom: 28px;
}

.variant-contact .hero-media {
  grid-column: 1 / span 8;
  order: 1;
}

.variant-contact .hero h1 {
  font-size: clamp(56px, 5.3vw, 78px);
  line-height: 0.9;
}

.variant-contact .compare-stage {
  aspect-ratio: 16 / 10;
  border-color: var(--fg);
  box-shadow: none;
}

.variant-contact .caption-rail,
.variant-contact .template-meta {
  border-bottom: 1px solid var(--fg);
}

.variant-contact .template-shelf {
  align-items: start;
  gap: 12px;
}

.variant-contact .template-card {
  border-color: var(--fg);
  box-shadow: none;
}

.variant-contact .section-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fg);
}

.variant-contact .flow-panel,
.variant-contact .mode-chip,
.variant-contact .profile-ready {
  border-color: var(--fg);
}

@media (max-width: 900px) {
  .variant-creator .hero-copy,
  .variant-creator .hero-media,
  .variant-contact .hero-copy,
  .variant-contact .hero-media {
    grid-column: 1;
    order: initial;
  }

  .variant-creator .hero-copy {
    padding: 26px 0 30px;
  }

  .variant-contact .hero-copy {
    padding-bottom: 0;
  }

}

@media (max-width: 620px) {
  .variant-creator .hero h1,
  .variant-contact .hero h1 {
    font-size: clamp(54px, 17vw, 78px);
    line-height: 0.86;
  }

  .variant-contact .compare-stage {
    aspect-ratio: 4 / 5;
  }

  .variant-studio .hero-media,
  .variant-night .hero-media {
    padding: 7px;
    border-radius: 20px;
  }
}