/*
 * WIPLAY public design system
 *
 * This layer is intentionally loaded after style.css. It gives the legacy
 * public templates the same visual language as the Installation Center
 * without changing their content, URLs, forms, or business logic.
 */
:root {
  --wiplay-bg: #090909;
  --wiplay-bg-soft: #11100e;
  --wiplay-panel: #151514;
  --wiplay-panel-soft: #1b1a18;
  --wiplay-gold: #eab64b;
  --wiplay-gold-soft: #ffd978;
  --wiplay-text: #f8f3e9;
  --wiplay-muted: #aaa69c;
  --wiplay-border: rgba(234, 182, 75, .22);
  --wiplay-radius: 14px;
  --wiplay-container: 1320px;
  --space-section-desktop: 62px;
  --space-section-tablet: 52px;
  --space-section-mobile: 46px;
  --wiplay-section-space: var(--space-section-desktop);
  --wiplay-card-padding: 22px;
  --pm-black: var(--wiplay-bg);
  --pm-black-soft: var(--wiplay-bg-soft);
  --pm-panel: var(--wiplay-panel);
  --pm-panel-2: var(--wiplay-panel-soft);
  --pm-gold: var(--wiplay-gold);
  --pm-gold-light: var(--wiplay-gold-soft);
  --pm-cream: var(--wiplay-text);
  --pm-muted: var(--wiplay-muted);
  --pm-line: var(--wiplay-border);
  --pm-radius: var(--wiplay-radius);
}

body {
  background: var(--wiplay-bg);
  color: var(--wiplay-text);
}

.pm-container,
.pm-header .pm-container,
.pm-footer .pm-container {
  width: min(calc(100% - 48px), var(--wiplay-container));
}

.pm-button,
.wip-button,
.pm-download-button,
.pm-tutorial-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid rgba(234, 182, 75, .5);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wiplay-gold-soft), var(--wiplay-gold));
  color: #171006;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 13px 34px rgba(234, 182, 75, .16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pm-button:hover,
.wip-button:hover,
.pm-download-button:hover,
.pm-tutorial-search button:hover {
  transform: translateY(-2px);
  border-color: var(--wiplay-gold-soft);
  box-shadow: 0 18px 40px rgba(234, 182, 75, .25);
}

.pm-button-secondary,
.wip-button-secondary,
.wip-button-outline {
  border-color: rgba(234, 182, 75, .28);
  background: transparent;
  color: var(--wiplay-text);
  box-shadow: none;
}

.pm-button-secondary:hover,
.wip-button-secondary:hover,
.wip-button-outline:hover {
  background: rgba(234, 182, 75, .08);
  color: var(--wiplay-gold-soft);
}

.pm-eyebrow,
.wip-eyebrow {
  color: var(--wiplay-gold-soft);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.pm-eyebrow::before,
.wip-eyebrow::before {
  background: currentColor;
}

/* Shared page frame and hero rhythm */
.pm-seo-page,
.pm-download-page,
.pm-order-page,
.pm-tutorials,
.pm-tutorial-single,
.pm-migration-page,
.pm-wiplay-page,
.pm-support-page,
.wip-home {
  background:
    radial-gradient(circle at 82% 7%, rgba(234, 182, 75, .12), transparent 30rem),
    linear-gradient(180deg, #0a0a09 0%, #11100e 48%, #090909 100%);
}

.pm-seo-hero,
.pm-order-hero {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  padding: 52px 0 46px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 78% 6%, rgba(234, 182, 75, .18), transparent 30rem),
    linear-gradient(145deg, #15110b, #0a0a09 64%);
}

.pm-seo-hero::after,
.pm-order-hero::after {
  opacity: .72;
}

.pm-seo-hero h1,
.pm-order-hero h1 {
  max-width: 760px;
  margin: 15px 0 15px;
  color: var(--wiplay-text);
  font-size: clamp(3.15rem, 4.3vw, 4.8rem);
  line-height: .96;
  letter-spacing: -.07em;
}

.pm-seo-lead,
.pm-order-hero p {
  max-width: 650px;
  color: var(--wiplay-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.pm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.pm-seo-section,
.pm-section {
  padding: var(--space-section-desktop) 0;
}

.pm-seo-section:nth-child(odd),
.pm-section:nth-child(odd) {
  background: rgba(255, 255, 255, .018);
}

.pm-seo-copy {
  max-width: 740px;
  margin: 0 0 28px;
}

.pm-seo-copy h2,
.pm-seo-faq h2,
.pm-section-title,
.pm-download-section-head h2,
.pm-tutorials-heading h2 {
  margin: 11px 0 12px;
  color: var(--wiplay-text);
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.pm-seo-copy p,
.pm-seo-section p,
.pm-download-section-head p {
  color: var(--wiplay-muted);
  line-height: 1.6;
}

/* One card language for SEO, pricing, download, tutorial and order surfaces */
.pm-seo-card,
.pm-seo-offer,
.pm-download-card,
.pm-tutorial-card,
.pm-order-shell,
.pm-form-card,
.pm-order-summary,
.pm-order-form-card,
.pm-order-help,
.pm-order-important {
  border: 1px solid var(--wiplay-border);
  border-radius: var(--wiplay-radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .24));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}

.pm-seo-card,
.pm-seo-offer,
.pm-download-card {
  padding: var(--wiplay-card-padding);
}

.pm-seo-card,
.pm-seo-offer {
  min-height: 100%;
}

.pm-seo-card strong,
.pm-seo-card h3,
.pm-seo-offer h3 {
  color: var(--wiplay-gold-soft);
}

.pm-seo-card p,
.pm-seo-offer > span,
.pm-seo-offer li,
.pm-seo-steps p {
  color: var(--wiplay-muted);
}

.pm-seo-grid-3,
.pm-seo-offers {
  gap: 14px;
}

.pm-seo-steps {
  max-width: 940px;
}

.pm-seo-steps article {
  padding: 18px 0;
  border-color: rgba(255, 255, 255, .1);
}

.pm-seo-steps article > span {
  color: var(--wiplay-gold-soft);
}

.pm-seo-faq {
  max-width: 920px;
}

.pm-seo-faq details,
.wip-faq details {
  border-color: rgba(255, 255, 255, .13);
}

.pm-seo-faq summary,
.wip-faq summary {
  padding: 17px 4px;
  color: var(--wiplay-text);
  font-weight: 800;
}

.pm-seo-faq details p,
.wip-faq details p {
  color: var(--wiplay-muted);
  line-height: 1.6;
}

.pm-seo-related {
  padding: 42px 0 62px;
  background: #080807;
}

.pm-seo-related-links a,
.pm-tutorial-filters a {
  border-color: rgba(234, 182, 75, .22);
  color: var(--wiplay-gold-soft);
}

/* Homepage keeps its richer composition but shares the same primitives. */
.wip-home {
  color: var(--wiplay-text);
}

.wip-section {
  padding-block: var(--wiplay-section-space);
}

.wip-hero {
  min-height: 0;
  min-height: min(420px, calc(100svh - 76px));
  display: flex;
  align-items: center;
  padding: 52px 0 48px;
}

.wip-hero-grid {
  grid-template-columns: minmax(0, .96fr) minmax(380px, 1.04fr);
  gap: clamp(28px, 4vw, 64px);
}

.wip-hero-copy h1 {
  font-size: clamp(3.15rem, 4.3vw, 4.8rem);
}

.wip-hero-tagline {
  color: #f2eadb;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.wip-hero-description {
  color: var(--wiplay-muted);
  line-height: 1.65;
}

.wip-hero-visual {
  border-color: var(--wiplay-border);
  border-radius: var(--wiplay-radius);
}

.wip-benefit,
.wip-offer-card,
.wip-steps-grid article,
.wip-final-cta-inner {
  border-color: var(--wiplay-border);
  border-radius: var(--wiplay-radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .24));
}

.wip-benefit + .wip-benefit {
  border-left-color: rgba(255, 255, 255, .1);
}

.wip-final-cta {
  padding: 48px 0 62px;
}

/* Download surface */
.pm-download-hero {
  min-height: 320px;
  display: flex;
  align-items: center;
  padding: 52px 0 38px;
}

.pm-download-hero h1 {
  max-width: 760px;
  font-size: clamp(3.15rem, 4.3vw, 4.8rem);
}

.pm-download-options {
  padding: 26px 0 62px;
  background: rgba(255, 255, 255, .018);
}

.pm-download-option-grid {
  gap: 14px;
}

.pm-download-card {
  min-height: 300px;
}

.pm-download-card-icon {
  border-color: rgba(234, 182, 75, .32);
  background: rgba(234, 182, 75, .08);
  color: var(--wiplay-gold-soft);
}

.pm-download-card h2,
.pm-download-section-head h2,
.pm-download-help h2 {
  color: var(--wiplay-text);
}

.pm-download-card p,
.pm-download-help p {
  color: var(--wiplay-muted);
}

.pm-download-steps,
.pm-download-devices,
.pm-download-help {
  padding-block: var(--space-section-desktop);
}

.pm-download-steps-grid article {
  border-color: rgba(255, 255, 255, .1);
}

.pm-download-help {
  background: #080807;
}

/* Pricing/order surface: preserve dynamic offers and prices, only normalize skin. */
.pm-order-hero {
  padding: 52px 0 46px;
}

.pm-order-trust {
  margin-top: 24px;
}

.pm-order-shell {
  padding: 0;
  overflow: hidden;
  background: var(--wiplay-panel);
}

.pm-order-aside,
.pm-order-form-card {
  background: transparent;
}

.pm-order-option {
  border-color: rgba(234, 182, 75, .18);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}

.pm-order-option.is-selected,
.pm-order-option:hover {
  border-color: var(--wiplay-gold);
  background: rgba(234, 182, 75, .08);
}

.pm-order-submit,
.pm-code-apply {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wiplay-gold-soft), var(--wiplay-gold));
  color: #171006;
}

.pm-field input,
.pm-field textarea,
.pm-field select,
.pm-code-control {
  min-height: 46px;
  border-color: rgba(234, 182, 75, .18);
  border-radius: 9px;
  background: #0b0b0a;
}

.pm-field input:focus,
.pm-field textarea:focus,
.pm-field select:focus,
.pm-code-control:focus {
  border-color: var(--wiplay-gold-soft);
  box-shadow: 0 0 0 3px rgba(234, 182, 75, .12);
}

/* Tutorials and guides */
.pm-tutorials-hero,
.pm-tutorial-single-hero {
  min-height: 320px;
  display: flex;
  align-items: center;
  padding: 52px 0 44px;
  border-bottom-color: rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 50% -30%, rgba(234, 182, 75, .16), transparent 42%),
    linear-gradient(180deg, #15110b 0%, #090909 100%);
}

.pm-tutorials-hero h1,
.pm-tutorial-single-hero h1 {
  font-size: clamp(3.15rem, 4.3vw, 4.8rem);
}

.pm-tutorials-icon {
  border-color: rgba(234, 182, 75, .35);
  background: rgba(234, 182, 75, .08);
  color: var(--wiplay-gold-soft);
}

.pm-tutorials-content {
  padding: var(--space-section-desktop) 0 76px;
}

.pm-tutorial-card {
  border-color: rgba(234, 182, 75, .18);
  border-radius: var(--wiplay-radius);
}

.pm-tutorial-card:hover {
  border-color: var(--wiplay-gold);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .35);
}

.pm-tutorial-single-body,
.pm-tutorial-related {
  padding-block: var(--space-section-desktop);
}

.pm-tutorial-video-shell,
.pm-tutorial-article {
  border-color: var(--wiplay-border);
  border-radius: var(--wiplay-radius);
}

.pm-tutorial-related-grid a {
  border-color: var(--wiplay-border);
  border-radius: var(--wiplay-radius);
  background: var(--wiplay-panel);
}

/* Shared footer frame */
.pm-footer,
.wip-footer {
  border-top-color: rgba(234, 182, 75, .16);
  background: #050505;
}

@media (max-width: 1000px) {
  :root {
    --wiplay-section-space: var(--space-section-tablet);
  }

  .pm-seo-grid-3,
  .pm-seo-offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wip-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
    gap: 24px;
  }

  .pm-tutorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :root {
    --wiplay-section-space: var(--space-section-mobile);
  }

  .pm-container,
  .pm-header .pm-container,
  .pm-footer .pm-container {
    width: min(calc(100% - 28px), var(--wiplay-container));
  }

  .pm-seo-hero,
  .pm-order-hero,
  .pm-download-hero,
  .pm-tutorials-hero,
  .pm-tutorial-single-hero {
    min-height: 0;
    padding: 30px 0 32px;
  }

  .pm-seo-hero h1,
  .pm-order-hero h1,
  .pm-download-hero h1,
  .pm-tutorials-hero h1,
  .pm-tutorial-single-hero h1,
  .wip-hero-copy h1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
    line-height: .98;
  }

  .pm-seo-section,
  .pm-section,
  .pm-download-steps,
  .pm-download-devices,
  .pm-download-help,
  .pm-tutorial-single-body,
  .pm-tutorial-related {
    padding-block: var(--space-section-mobile);
  }

  .pm-seo-grid-3,
  .pm-seo-offers,
  .pm-tutorial-grid {
    grid-template-columns: 1fr;
  }

  .pm-actions,
  .wip-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pm-actions .pm-button,
  .wip-actions .wip-button,
  .pm-download-button {
    width: 100%;
  }

  .wip-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wip-hero {
    min-height: 0;
  }

  .wip-hero-visual {
    order: -1;
  }

  .pm-tutorial-search {
    grid-template-columns: 1fr;
  }

  .pm-tutorial-filter-block {
    display: block;
  }

  .pm-tutorial-filter-block > span {
    display: block;
    margin-bottom: 8px;
  }

  .pm-form-grid {
    grid-template-columns: 1fr;
  }
}