.landing {
  --landing-accent: var(--site-purple);
  --landing-muted: var(--site-text-muted);
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.landing h1,
.landing h2,
.landing h3 {
  color: var(--site-text);
  text-wrap: balance;
}

.landing h1 {
  margin: 22px 0;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.landing h1 span {
  color: var(--landing-accent);
}

.landing h2 {
  margin: 16px 0 24px;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.14;
  letter-spacing: -.035em;
}

.landing p,
.landing li {
  line-height: 1.7;
}

.landing .eyebrow {
  color: var(--landing-accent);
  letter-spacing: .1em;
  line-height: 1.6;
}

.landing-hero {
  text-align: center;
  padding: clamp(64px, 9vw, 120px) 0 80px;
  background: radial-gradient(ellipse at 50% 25%, rgb(var(--site-promo-glow-rgb) / 33.333%), transparent 65%);
}

.landing-lead {
  max-width: 660px;
  margin: 0 auto;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--landing-muted);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 32px 0 24px;
}

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.landing-button-primary {
  background: var(--site-purple-action);
  color: var(--site-on-action);
}

.landing-button-primary:hover {
  background: var(--site-purple-action-hover);
}

.landing-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: 28px;
  padding: clamp(28px, 5vw, 64px);
  min-height: 530px;
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--panel-start), var(--panel-end));
}

.landing-panel-viewers {
  --landing-accent: var(--site-purple-bright);
  --panel-start: var(--site-promo-purple-start);
  --panel-end: var(--site-promo-purple-end);
  --panel-border: var(--site-promo-purple-border);
}

.landing-panel-streamers {
  --landing-accent: var(--site-promo-blue-accent);
  --panel-start: var(--site-promo-blue-start);
  --panel-end: var(--site-promo-blue-end);
  --panel-border: var(--site-promo-blue-border);
}

.landing-panel-case {
  --landing-accent: var(--site-promo-pink-accent);
  --panel-start: var(--site-promo-pink-start);
  --panel-end: var(--site-promo-pink-end);
  --panel-border: var(--site-promo-pink-border);
}

.landing-panel-reverse .landing-copy {
  grid-column: 2;
  grid-row: 1;
}

.landing-panel-reverse .landing-preview {
  grid-column: 1;
  grid-row: 1;
}

.landing-copy {
  min-width: 0;
}

.landing-copy>p:not(.eyebrow),
.landing-copy li {
  color: var(--landing-muted);
  font-size: 16px;
}

.landing-copy ul {
  padding-left: 20px;
  margin: 24px 0;
}

.landing-copy li {
  padding-left: 4px;
  margin: 9px 0;
}

.landing-copy li::marker {
  color: var(--landing-accent);
}

.landing-text-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--landing-accent);
  font-weight: 650;
  text-underline-offset: 5px;
}

.landing-preview {
  --landing-preview-height: 260px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--site-white-rgb) / 14.118%);
  border-radius: 12px;
  background: var(--site-page);
  box-shadow: 0 20px 40px rgb(var(--site-black-rgb) / 20.000%);
}

.landing-preview-bar {
  display: flex;
  gap: 6px;
  padding: 14px;
  border-bottom: 1px solid rgb(var(--site-white-rgb) / 7.059%);
  background: rgb(var(--site-white-rgb) / 1.569%);
}

.landing-preview-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--site-white-rgb) / 20.784%);
}

.landing-preview-image {
  display: block;
  width: 100%;
  height: var(--landing-preview-height);
  object-fit: contain;
}

.landing-preview-space {
  min-height: var(--landing-preview-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgb(var(--site-white-rgb) / 2.745%), transparent 75%);
}

.landing-preview-space strong {
  font-size: 17px;
  color: var(--site-text-secondary);
}

.landing-preview-space>span:last-child {
  color: var(--site-text-dim);
  font-size: 12px;
}

.landing-preview-symbol {
  font-size: 42px;
  color: var(--landing-accent);
}

.landing-preview figcaption {
  padding: 16px 20px;
  border-top: 1px solid rgb(var(--site-white-rgb) / 7.059%);
  color: var(--site-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.landing-how {
  padding: 72px 0;
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}

.landing-steps li {
  padding: 24px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--step-accent) 9%, var(--site-page));
}

.landing-steps li>span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--step-accent) 15%, var(--site-page));
  color: var(--step-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}

.landing-steps h3 {
  font-size: 21px;
  margin: 14px 0 12px;
}

.landing-steps p {
  color: var(--landing-muted);
  font-size: 15px;
  margin: 0;
}

.landing-finish {
  text-align: center;
  padding: 64px 20px 88px;
  margin-bottom: 32px;
  border-radius: 20px;
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--site-promo-blue-accent) 14%, transparent), transparent 65%),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--site-promo-pink-accent) 12%, transparent), transparent 65%), var(--site-panel);
}

.landing-finish p:not(.eyebrow) {
  color: var(--landing-muted);
  margin-bottom: 28px;
}

.landing a:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 5px;
}

@media (max-width: 780px) {
  .landing-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 14px;
  }

  .landing-panel-reverse .landing-copy,
  .landing-panel-reverse .landing-preview {
    grid-column: auto;
    grid-row: auto;
  }

  .landing-preview {
    --landing-preview-height: 220px;
  }

  .landing-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .landing-how {
    padding: 48px 0;
  }
}

.landing-examples {
  --landing-accent: var(--site-promo-blue-accent);
  padding: clamp(32px, 5vw, 64px) 0 8px;
}

.landing-examples header>p:not(.eyebrow),
.landing-example-list p,
.landing-examples-footer p {
  color: var(--landing-muted);
}

.landing-example-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 32px 0 20px;
}

.landing-example-list li {
  --example-accent: var(--site-promo-blue-accent);
  padding: 24px 20px;
  border: 1px solid color-mix(in srgb, var(--example-accent) 30%, var(--site-border));
  border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--example-accent) 12%, var(--site-page)), var(--site-page));
}

.landing-example-list li:nth-child(2) {
  --example-accent: var(--site-promo-pink-accent);
}

.landing-example-list li:nth-child(3) {
  --example-accent: var(--site-warning);
}

.landing-example-list li:nth-child(4) {
  --example-accent: var(--site-purple-bright);
}

.landing-example-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--example-accent) 14%, var(--site-page));
  color: var(--example-accent);
}

.landing-example-icon .site-icon {
  width: 22px;
  height: 22px;
}

.landing-example-list h3 {
  margin: 18px 0 10px;
  font-size: 18px;
}

.landing-example-list p {
  margin: 0;
  font-size: 14px;
}

.landing-examples-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-examples-footer p {
  margin: 0;
  font-size: 13px;
}

.landing-examples-footer .landing-text-link {
  margin: 0;
}

.landing-steps li:nth-child(1) {
  --step-accent: var(--site-purple-bright);
}

.landing-steps li:nth-child(2) {
  --step-accent: var(--site-promo-blue-accent);
}

.landing-steps li:nth-child(3) {
  --step-accent: var(--site-promo-pink-accent);
}

@media (max-width: 1000px) {
  .landing-example-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .landing-example-list {
    grid-template-columns: 1fr;
  }
}