:root {
    --primary: #2F80ED;
    --text: #334155;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text);
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    padding-bottom: 70px;
    background:
        radial-gradient(circle at top, rgba(97, 193, 255, 0.16), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3fb 100%);
}

@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-item-active {
    color: var(--primary);
    font-weight: 700;
}

.newsletter-public-page {
    position: relative;
}

.newsletter-shell {
    background:
        radial-gradient(circle at top right, rgba(255, 222, 0, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.06);
}

.newsletter-hero {
    background:
        radial-gradient(circle at top left, rgba(61, 194, 255, 0.15), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.newsletter-preview {
    position: relative;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.newsletter-plan-card {
    min-height: 100%;
}

.newsletter-faq-item + .newsletter-faq-item {
    border-top: 1px solid #e8eef7;
}

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

.newsletter-paywall-card {
    position: relative;
    overflow: hidden;
}

.newsletter-faq-icon {
    flex-shrink: 0;
}

.newsletter-benefit-card,
.newsletter-plan-card,
.newsletter-preview,
.newsletter-hero {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.newsletter-benefit-card:hover,
.newsletter-plan-card:hover,
.newsletter-preview:hover,
.newsletter-hero:hover {
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .newsletter-shell,
    .newsletter-hero,
    .newsletter-preview {
        border-radius: 1.5rem;
    }
}