/* ───────── Pricing page ───────── */

.page-hero .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 36px;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13.5px;
    margin-top: 8px;
}

.page-hero .hero-trust .item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-hero .hero-trust svg {
    color: var(--accent-purple);
    flex: 0 0 auto;
}

/* Jump links under the hero */
.pricing-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.pricing-nav a {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.pricing-nav a:hover {
    color: #fff;
    background: var(--glass-hover);
    border-color: rgba(180, 124, 253, 0.3);
}

/* Anchors land below the fixed header */
#websites,
#seo,
#hosting,
#faq {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

/* Website tiers: one-off price block (deliberately not .plan-price so the
   monthly/annual toggle never touches it) */
.site-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.site-price .from {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-price .amount {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
}

.plan.featured .site-price .amount {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* "or book a call" under a plan CTA */
.plan-alt {
    display: block;
    text-align: center;
    margin: -18px 0 24px;
    font-size: 13.5px;
    color: var(--text-secondary);
    text-decoration: none;
}

.plan-alt:hover {
    color: #fff;
}

/* Notes strip under the website tiers */
.pricing-notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 36px;
    margin-top: 32px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.pricing-notes .item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-notes .item strong {
    color: #fff;
    font-weight: 500;
}

.pricing-notes svg {
    color: var(--accent-purple);
    flex: 0 0 auto;
}

/* SEO section now carries its own head + toggle */
.pricing-section .toggle-row {
    margin: 8px 0 40px;
}

/* Hosting card price unit */
.from-price .from-unit {
    font-size: 1.2rem;
    font-weight: 500;
    -webkit-text-fill-color: var(--text-secondary);
}

/* Comparison table scrolls sideways on narrow screens instead of
   overflowing the page */
.compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
}

@media (max-width: 780px) {
    .compare-table {
        min-width: 560px;
    }
}