/* =====================================================
   ARK Page Styles (product-specific only)
   ===================================================== */

.page-ark {
    /* ARK theme: earthy brown primary, with green + blue accents */
    --primary-color: #a16a3c;
    --primary-color-rgb: 161, 106, 60;
}

/* ── Hero ── */

.hero-section--ark {
    overflow: hidden;
    /* pull the page up: less top gap below the navbar, tighter bottom */
    padding-top: 140px;
    padding-bottom: 56px;
}

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

/* ARK-specific tier name colors (building-tier progression: brown -> green -> blue) */
.tier-card__name--wood  { color: #b08968; }
.tier-card__name--stone { color: #9ca3af; }
.tier-card__name--metal { color: #3b82f6; }
.tier-card__name--tek    { color: #22c55e; }

/* ── Clusters section spacing ── */
#clusters {
    padding-top: 0;
}

/* ── 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-ark #plans .section-deco { --deco-x: -65px; --deco-y: 245px; }
    /* megalodon: tilted so it reads as a dossier illustration, not a floating fish */
    .page-ark #hardware .section-deco { --deco-x: 35px; --deco-y: 449px; --deco-rot: -8deg; }
}

/* ── Deco positioning (tablet) ── */
@media (min-width: 769px) and (max-width: 991px) {
    .page-ark #plans .section-deco { --deco-x: -46px; --deco-y: 247px; }
    .page-ark #hardware .section-deco { --deco-x: 27px; --deco-y: 465px; --deco-rot: -8deg; }
}

/* ── Deco positioning (small) ── */
@media (min-width: 576px) and (max-width: 768px) {
    .page-ark #plans .section-deco { --deco-x: -54px; --deco-y: 281px; }
    .page-ark #hardware .section-deco { --deco-x: 27px; --deco-y: 490px; --deco-rot: -8deg; }
}

/* ── Deco positioning (phone) ── */
@media (max-width: 575px) {
    .page-ark #plans .section-deco { --deco-x: -54px; --deco-y: 384px; }
    .page-ark #hardware .section-deco { --deco-x: 27px; --deco-y: 396px; --deco-rot: -8deg; }
}

/* ── Responsive (ARK-specific) ── */

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