/**
 * Premium marketing page.
 */

body.hw-premium-page .hw-premium {
  --hw-prem-ink: var(--hw-fe-text, #211b16);
  --hw-prem-soft: var(--hw-fe-text-soft, #5c564e);
  --hw-prem-line: var(--hw-fe-border, #e4ded4);
  --hw-prem-panel: var(--hw-fe-elevated, #fcfaf7);
  --hw-prem-flame: var(--hw-fe-accent, #b85c3a);
  box-sizing: border-box;
  width: min(960px, calc(100% - 2rem));
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: calc(var(--hw-global-nav-h, 68px) + 2rem) 0 3.5rem;
  color: var(--hw-prem-ink);
  font-family: var(--hw-fe-font-ui, "DM Sans", system-ui, sans-serif);
}

.hw-premium__eyebrow {
  margin: 0 0 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--hw-prem-flame);
}

.hw-premium__title {
  margin: 0 0 0.5rem;
  font-family: var(--hw-fe-font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.hw-premium__lead {
  margin: 0;
  max-width: 36rem;
  color: var(--hw-prem-soft);
  line-height: 1.55;
}

.hw-premium__banner,
.hw-premium__status,
.hw-premium__guest {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hw-prem-line);
  background: var(--hw-prem-panel);
}

.hw-premium__banner--ok {
  border-color: color-mix(in srgb, var(--hw-prem-flame) 35%, var(--hw-prem-line));
}

.hw-premium__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.hw-premium__plan {
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--hw-prem-line);
  background: var(--hw-prem-panel);
}

.hw-premium__plan h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}

.hw-premium__audience {
  margin: 0 0 0.85rem;
  color: var(--hw-prem-soft);
  font-size: 0.9rem;
}

.hw-premium__perks {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
  color: var(--hw-prem-soft);
  line-height: 1.45;
}

.hw-premium__btn,
.hw-premium__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.hw-premium__btn--primary,
.hw-premium__cta {
  background: var(--hw-prem-flame);
  color: #fff;
}

.hw-premium__btn--ghost {
  background: transparent;
  border-color: var(--hw-prem-line);
  color: var(--hw-prem-ink);
}

.hw-premium__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hw-premium__owned {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hw-prem-flame) 12%, transparent);
  color: var(--hw-prem-flame);
  font-size: 0.85rem;
}

.hw-premium__msg {
  margin-top: 1rem;
  color: var(--hw-prem-flame);
}

.hw-premium__footnote {
  margin-top: 1.5rem;
}

.hw-premium__footnote a {
  color: var(--hw-prem-flame);
}

@media (max-width: 720px) {
  body.hw-premium-page .hw-premium,
  .hw-premium {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: max(0.75rem, env(safe-area-inset-left));
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }

  .hw-premium__plans {
    grid-template-columns: 1fr;
  }

  .hw-premium__plan {
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .hw-premium__title {
    font-size: clamp(1.65rem, 7vw, 2rem);
  }

  .hw-premium__btn,
  .hw-premium__cta {
    width: 100%;
    min-height: 2.75rem;
  }
}