/* =====================================================
   WordPress Page Styles
   ===================================================== */

.page-wordpress {
    --primary-color: #21759b;
    --primary-color-rgb: 33, 117, 155;
}

/* ── Hero ── */

.hero-section--wordpress {
    overflow: hidden;
}

.page-wordpress .orbs-background { z-index: 0; }

/* ── Tier name colors ── */
.page-wordpress .tier-card__name--starter { color: #94a3b8; }
.page-wordpress .tier-card__name--growth  { color: #4da3c7; }
.page-wordpress .tier-card__name--pro     { color: #21759b; }
.page-wordpress .tier-card__name--scale   { color: #a78bfa; }

/* ── Featured badge dark text ── */
.page-wordpress .tier-card__badge {
    color: #0a1628;
}

/* ── Deco positioning (desktop) ── */
/* Offsets only. Never set top/right/left/transform here - see the anchoring
   contract in _shared.css. Scoped per band so the bands never fight. */
@media (min-width: 992px) {
    .page-wordpress #plans .section-deco { --deco-x: -66px; --deco-y: 186px; }
    .page-wordpress #faq .section-deco { --deco-x: -66px; --deco-y: 86px; }
}

/* ── Deco positioning (tablet) ── */
@media (min-width: 769px) and (max-width: 991px) {
    .page-wordpress #plans .section-deco { --deco-x: -46px; --deco-y: 188px; }
    .page-wordpress #faq .section-deco { --deco-x: -46px; --deco-y: 97px; }
}

/* ── Deco positioning (small) ── */
@media (min-width: 576px) and (max-width: 768px) {
    .page-wordpress #plans .section-deco { --deco-x: -54px; --deco-y: 188px; }
    .page-wordpress #faq .section-deco { --deco-x: -54px; --deco-y: 142px; }
}

/* ── Deco positioning (phone) ── */
@media (max-width: 575px) {
    .page-wordpress #plans .section-deco { --deco-x: -54px; --deco-y: 246px; }
    .page-wordpress #faq .section-deco { --deco-x: -54px; --deco-y: 186px; }
}

/* ── Responsive ── */

@media (max-width: 960px) {
    .page-wordpress .orbs-background {
        opacity: 0.4;
    }
}