/* Proxmox Backup subpage – builds on site.css (plans, cards, FAQ) */

.pb-ticks { display: grid; gap: 10px; }
.pb-ticks li { position: relative; padding-left: 32px; line-height: 1.6; }
.pb-ticks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 19px; height: 18px; background: url(/assets/img/icons/check-19.svg) center / 19px 18px no-repeat; }

/* HERO */
.pb-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: end; }
.pb-hero__price { padding: 36px; }
.pb-hero__from { color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.pb-hero__amount { color: var(--c-mint); font-size: var(--fs-price); font-weight: 700; line-height: 1.1; }
.pb-hero__amount span { font-size: 18px; font-weight: 500; }
.pb-hero__price .pb-ticks { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(190, 243, 223, 0.15); font-size: 15px; }
.pb-hero__price .pb-ticks:first-child { margin-top: 0; padding-top: 0; border-top: 0; }   /* no price above (pricing on request) */

/* MODES + DIAGRAM */
.pb-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.pb-mode__tag { color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.pb-mode .card__title { margin-top: 6px; font-size: 28px; }
.pb-diagram { display: block; width: 100%; height: auto; margin: 24px 0 20px; color: var(--c-mint); }
.pb-box { fill: rgba(0, 0, 0, 0.35); stroke: #4A5551; stroke-width: 1.5; }
.pb-box--hl { stroke: var(--c-mint); }
.pb-label { fill: var(--c-white); font: 500 15px var(--font); }
.pb-zone { fill: rgba(255, 255, 255, 0.6); font: 500 11px var(--font); letter-spacing: 0.2em; text-transform: uppercase; }
.pb-note-svg, .pb-diagram .pb-note { fill: rgba(255, 255, 255, 0.8); font: 400 12px var(--font); }
.pb-diagram .pb-note--hl { fill: var(--c-mint); font-weight: 500; }
.pb-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.pb-line--hl { stroke-dasharray: none; opacity: 1; stroke-width: 2; }

/* FEATURES */
.pb-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.pb-note { max-width: 640px; margin: 56px auto 0; color: rgba(255, 255, 255, 0.75); font-size: 14px; line-height: 1.7; text-align: center; }

/* PLANS */
.pb-plans { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 72px 32px; margin-top: 72px; }
.pb-plans__tag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  padding: 2px 16px; border: 1px solid var(--c-mint); border-radius: var(--radius-pill);
  background: var(--c-bg); color: var(--c-mint);
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
}

.pb-faq { margin-top: 72px; }
.faq-item__a a { color: var(--c-mint); text-decoration: underline; text-underline-offset: 3px; }

/* CTA */
.pb-cta { padding: 96px 64px 64px; border-radius: var(--radius-panel); background: linear-gradient(238.62deg, #063B27 1.598%, #BEF3DF 73.098%); color: var(--c-bg); }
.pb-cta__kicker { font-size: 22px; font-style: italic; }
.pb-cta__title { margin-top: 12px; font-size: var(--fs-banner); font-weight: 700; line-height: 1.22; }
.pb-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.pb-cta__link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1279px) { .pb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .pb-hero__grid, .pb-modes { grid-template-columns: minmax(0, 1fr); }
  .pb-hero__grid { gap: 48px; }
  .pb-hero__price { max-width: 420px; }
  .pb-faq { margin-top: 48px; }
  .faq-item__q { font-size: 18px; line-height: 1.6; }
  .pb-cta { padding: 48px 28px 40px; }
  .pb-cta__kicker { font-size: 18px; }
}
@media (max-width: 600px) {
  .pb-features { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan--featured { width: 100%; }
  .pb-hero__price, .card { padding: 28px; }
}
.pb-note a { color: var(--c-mint); text-decoration: underline; text-underline-offset: 3px; }