.zrp-premium {
  --zrp-gold: #edca8d;
  --zrp-cream: #fff1de;
  --zrp-muted: #c9bcb2;
  --zrp-edge: rgb(237 202 141 / .22);
  --zrp-surface: #071022;
  width: var(--wrap);
  margin-inline: auto;
  padding-top: clamp(94px, 9vw, 136px);
}

.zrp-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(424px, 43vw, 546px);
  overflow: hidden;
  border: 1px solid var(--zrp-edge);
  border-radius: clamp(16px, 2vw, 25px);
  background: #180f14;
  box-shadow: 0 28px 70px -35px rgb(0 0 0 / .8);
}

.zrp-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 17%;
}

.zrp-hero::before,
.zrp-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.zrp-hero::before {
  background:
    linear-gradient(90deg, #150f14 0%, rgb(21 15 20 / .93) 28%, rgb(21 15 20 / .7) 49%, transparent 79%),
    linear-gradient(0deg, rgb(18 11 16 / .75), transparent 47%);
}

.zrp-hero::after {
  background: radial-gradient(ellipse at 82% 12%, rgb(247 183 103 / .18), transparent 51%);
}

.zrp-hero-inner {
  position: relative;
  z-index: 2;
  width: min(58%, 630px);
  padding: clamp(28px, 5vw, 70px);
}

.zrp-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--zrp-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.zrp-kicker::before {
  width: 18px;
  height: 1px;
  flex: none;
  background: currentColor;
  content: "";
}

.zrp-kicker .ico {
  width: 15px;
  height: 15px;
}

.zrp-premium .zrp-hero h1 {
  margin: 0;
  color: var(--zrp-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 8.5vw, 7.5rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.065em;
  text-shadow: 0 5px 24px rgb(0 0 0 / .45);
}

.zrp-hero-line {
  margin: 16px 0 0;
  color: #f6d9ae;
  font-size: clamp(1.2rem, 2.25vw, 1.85rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.zrp-lead {
  max-width: 42ch;
  margin: 12px 0 0;
  color: #e2d2c6;
  font-size: clamp(.93rem, 1.45vw, 1.08rem);
  line-height: 1.55;
}

.zrp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.zrp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 17px;
  border: 1px solid var(--zrp-edge);
  border-radius: 9px;
  background: rgb(21 13 19 / .78);
  color: var(--zrp-cream);
  font-size: .84rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.zrp-button:hover {
  border-color: var(--zrp-gold);
  color: var(--zrp-gold);
}

.zrp-button.is-primary {
  border-color: #edca8d;
  background: linear-gradient(180deg, #f4d7a1, #d8ab69);
  box-shadow: 0 9px 26px -12px rgb(237 202 141 / .72);
  color: #261810;
}

.zrp-button.is-primary:hover {
  background: #f7dfa9;
  color: #261810;
}

.zrp-button:focus-visible,
.zrp-faq summary:focus-visible {
  outline: 2px solid var(--zrp-gold);
  outline-offset: 3px;
}

.zrp-hero-crown {
  position: absolute;
  z-index: 1;
  bottom: 8%;
  left: 40%;
  width: clamp(56px, 7vw, 92px);
  height: auto;
  opacity: .88;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgb(237 165 78 / .26));
}

.zrp-section {
  margin-top: clamp(38px, 5vw, 68px);
  scroll-margin-top: 7rem;
}

.zrp-section-head {
  margin-bottom: 17px;
}

.zrp-premium .zrp-section-head h2 {
  margin: 0;
  color: var(--zrp-cream);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  letter-spacing: -.035em;
}

.zrp-section-head p:not(.zrp-kicker) {
  max-width: 63ch;
  margin: 8px 0 0;
  color: var(--zrp-muted);
  font-size: .92rem;
  line-height: 1.5;
}

.zrp-benefits-grid,
.zrp-utility-grid,
.zrp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.zrp-plans {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zrp-benefit,
.zrp-plan {
  min-width: 0;
  padding: clamp(17px, 2.2vw, 26px);
  border: 1px solid var(--zrp-edge);
  border-radius: 14px;
  background: linear-gradient(152deg, #23171d, var(--zrp-surface) 67%);
}

.zrp-benefit {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
}

.zrp-benefit:hover,
.zrp-plan:hover {
  border-color: rgb(237 202 141 / .43);
}

.zrp-benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--zrp-gold);
}

.zrp-benefit-icon:not(.ico) {
  border: 1px solid var(--zrp-edge);
  border-radius: 9px;
  background: rgb(237 202 141 / .09);
}

.zrp-benefit-icon .ico {
  width: 19px;
  height: 19px;
}

.zrp-benefit-value {
  color: var(--zrp-gold);
  font-size: clamp(1.16rem, 2.3vw, 1.66rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.zrp-premium .zrp-benefit h3 {
  margin: 0;
  color: var(--zrp-cream);
  font-size: 1.04rem;
  line-height: 1.25;
}

.zrp-benefit p {
  margin: 0;
  color: var(--zrp-muted);
  font-size: .85rem;
  line-height: 1.5;
}

.zrp-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 8px;
  cursor: pointer;
}

.zrp-plan:has(input:checked) {
  border-color: rgb(237 202 141 / .48);
  background: radial-gradient(ellipse at 100% 0, rgb(153 68 51 / .28), transparent 67%), #1d1419;
}

.zrp-plan-length {
  color: var(--zrp-cream);
  font-weight: 650;
}

.zrp-plan-price {
  grid-column: 1 / -1;
  color: var(--zrp-gold);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

.zrp-checkout fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.zrp-checkout input[type="radio"] {
  margin: 0;
  accent-color: var(--zrp-gold);
}

.zrp-currency legend {
  color: var(--zrp-cream);
  font-size: .88rem;
  font-weight: 700;
}

.zrp-currency-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}

.zrp-currency-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--zrp-edge);
  border-radius: 8px;
  color: var(--zrp-cream);
  cursor: pointer;
}

.zrp-currency-options label:has(input:checked) {
  border-color: var(--zrp-gold);
  background: rgb(237 202 141 / .08);
}

.zrp-order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 12px;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid var(--zrp-edge);
  border-radius: 14px;
  background: var(--zrp-surface);
  color: var(--zrp-cream);
}

.zrp-order legend {
  padding: 0;
  font-weight: 700;
}

.zrp-order :is(p, label, small) {
  font-size: .86rem;
}

.zrp-order p {
  margin: 5px 0 12px;
  color: var(--zrp-muted);
}

.zrp-login-count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.zrp-login-fields,
.zrp-payment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.zrp-login-fields label[hidden],
.zrp-payment-options label[hidden],
.zrp-order-feedback[hidden] {
  display: none;
}

.zrp-order :is(select, input[type="text"]) {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--zrp-edge);
  border-radius: 8px;
  background: #21181a;
  color: var(--zrp-cream);
  font: inherit;
}

.zrp-login-fields input {
  width: 100%;
  margin-top: 4px;
}

.zrp-payment-options {
  margin-top: 10px;
}

.zrp-payment-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--zrp-edge);
  border-radius: 8px;
  cursor: pointer;
}

.zrp-payment-options label:has(input:checked) {
  border-color: var(--zrp-gold);
  background: rgb(237 202 141 / .08);
}

.zrp-payment-options small {
  display: block;
  margin-top: 2px;
  color: var(--zrp-muted);
  font-size: .7rem;
}

.zrp-order-total,
.zrp-order-feedback {
  grid-column: 1 / -1;
}

.zrp-order-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--zrp-edge);
}

.zrp-order-total output {
  display: block;
  color: var(--zrp-gold);
  font-size: 1.6rem;
  font-weight: 700;
}

.zrp-compare {
  overflow: hidden;
  border: 1px solid var(--zrp-edge);
  border-radius: 16px;
  background: var(--zrp-surface);
}

.zrp-compare table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  color: var(--zrp-muted);
  font-size: clamp(.76rem, 1.3vw, .94rem);
  line-height: 1.35;
  text-align: left;
}

.zrp-compare :is(th, td) {
  padding: clamp(11px, 2vw, 19px);
  text-align: inherit;
  overflow-wrap: break-word;
}

.zrp-compare th {
  color: var(--zrp-cream);
  font-weight: 650;
}

.zrp-compare thead th {
  background: rgb(255 255 255 / .035);
}

.zrp-compare tbody > tr > * {
  border-top: 1px solid rgb(237 202 141 / .11);
}

.zrp-compare tr > :last-child {
  border-left: 1px solid var(--zrp-edge);
  background: rgb(219 158 75 / .09);
  color: var(--zrp-gold);
  font-weight: 700;
}

.zrp-compare thead .ico {
  width: .9rem;
  height: .9rem;
  vertical-align: -.12rem;
}

.zrp-faq {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zrp-faq details {
  border: 1px solid var(--zrp-edge);
  border-radius: 10px;
  background: var(--zrp-surface);
}

.zrp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  color: var(--zrp-cream);
  font-size: .88rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.zrp-faq summary::-webkit-details-marker {
  display: none;
}

.zrp-faq summary::after {
  width: 7px;
  height: 7px;
  flex: none;
  margin: 0 3px 3px 0;
  border-right: 1.5px solid var(--zrp-gold);
  border-bottom: 1.5px solid var(--zrp-gold);
  transform: rotate(45deg);
  content: "";
}

.zrp-faq details[open] summary {
  color: var(--zrp-gold);
}

.zrp-faq details[open] summary::after {
  margin-bottom: 0;
  transform: rotate(225deg);
}

.zrp-faq details > p {
  max-width: 80ch;
  margin: 0;
  padding: 0 15px 13px;
  color: var(--zrp-muted);
  font-size: .85rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .zrp-hero-inner {
    width: min(68%, 550px);
  }

  .zrp-hero .zrp-hero-crown {
    display: none;
  }

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

  .zrp-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .zrp-premium {
    padding-top: 86px;
  }

  .zrp-hero {
    align-items: start;
    min-height: 0;
  }

  .zrp-hero-art {
    height: 280px;
    object-position: 73% 17%;
  }

  .zrp-hero::before {
    background: linear-gradient(180deg, transparent 6%, rgb(24 15 20 / .14) 24%, #180f14 54%);
  }

  .zrp-hero::after {
    background: radial-gradient(ellipse at 83% 6%, rgb(247 183 103 / .13), transparent 51%);
  }

  .zrp-hero-inner {
    width: 100%;
    padding: 168px 19px 25px;
  }

  .zrp-premium .zrp-hero h1 {
    font-size: clamp(3.2rem, 12vw, 4.6rem);
  }

  .zrp-hero-line {
    margin-top: 11px;
  }

  .zrp-actions {
    margin-top: 19px;
  }

  .zrp-button {
    min-height: 40px;
    padding-inline: 12px;
    font-size: .79rem;
  }

  .zrp-benefits-grid,
  .zrp-utility-grid,
  .zrp-order {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .zrp-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .zrp-order {
    gap: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .zrp-hero-art {
    animation: zrp-art-settle 3.5s cubic-bezier(.2, .65, .3, 1) both;
  }

  .zrp-hero-inner,
  .zrp-faq details[open] > p {
    animation: zrp-enter .38s ease-out both;
  }

  .zrp-hero::after {
    animation: zrp-ember 4s ease-in-out both;
  }

  .zrp-benefit,
  .zrp-plan,
  .zrp-button,
  .zrp-faq summary::after {
    transition: border-color .18s, background-color .18s, color .18s, transform .18s;
  }

  @media (hover: hover) {
    .zrp-benefit:hover,
    .zrp-plan:hover {
      transform: translateY(-2px);
    }
  }

  @keyframes zrp-art-settle {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
  }

  @keyframes zrp-enter {
    from { opacity: .45; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes zrp-ember {
    0%, 100% { opacity: .65; }
    45% { opacity: 1; }
  }
}