/* ============================================
   PRODUCT / PRICING premium polish
   (kept lightweight, harmonising with story tokens)
   ============================================ */
.premium-page {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--story-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.premium-hero {
    padding: 6.5rem 1.5rem 4.5rem;
    background:
        radial-gradient(900px 600px at 70% 30%, rgba(95, 166, 214, 0.18), transparent 65%),
        linear-gradient(180deg, #fbfcfe 0%, #eef3f8 100%);
    text-align: center;
}

    .premium-hero h1 {
        font-size: clamp(2.4rem, 4.8vw, 3.8rem);
        font-weight: 700;
        letter-spacing: -0.032em;
        color: var(--story-primary);
        margin: 0 0 1.25rem;
        line-height: 1.05;
    }

    .premium-hero .lead {
        font-size: clamp(1.05rem, 1.4vw, 1.2rem);
        color: var(--story-mute);
        max-width: 44em;
        margin: 0 auto 1.8rem;
    }

    .premium-hero .premium-bullets {
        list-style: none;
        padding: 0;
        margin: 1.6rem auto 0;
        display: inline-block;
        text-align: left;
    }

        .premium-hero .premium-bullets li {
            padding: 0.35rem 0 0.35rem 1.6rem;
            position: relative;
            color: var(--story-ink);
            font-weight: 500;
        }

            .premium-hero .premium-bullets li::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0.85rem;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--story-accent);
            }

.premium-section {
    padding: 5rem 1.5rem;
}

    .premium-section.alt { background: var(--story-soft); }

    .premium-section .row-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        gap: 3rem;
        align-items: center;
    }

@media (min-width: 992px) {
    .premium-section .row-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

        .premium-section .row-grid.reverse > .copy { order: 2; }
}

.premium-section h2 {
    font-size: clamp(1.8rem, 2.7vw, 2.5rem);
    font-weight: 700;
    color: var(--story-primary);
    margin: 0 0 1.05rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.premium-section p {
    color: var(--story-mute);
    font-size: 1.02rem;
    margin: 0 0 1.2rem;
}

.premium-section ul.features {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .premium-section ul.features li {
        padding: 0.4rem 0 0.4rem 1.6rem;
        position: relative;
        color: var(--story-ink);
    }

        .premium-section ul.features li::before {
            content: "✓";
            color: var(--story-accent);
            position: absolute;
            left: 0;
            font-weight: 700;
        }

.premium-visual {
    background: #ffffff;
    border: 1px solid var(--story-line);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: var(--story-elev);
}

    .premium-visual img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

.premium-cta {
    padding: 5.5rem 1.5rem;
    background:
        radial-gradient(700px 400px at 20% 30%, rgba(122, 185, 230, 0.25), transparent 60%),
        radial-gradient(600px 400px at 85% 80%, rgba(4, 101, 165, 0.35), transparent 65%),
        linear-gradient(135deg, #022c47 0%, #0465a5 100%);
    color: #ffffff;
    text-align: center;
}

    .premium-cta h2 {
        font-size: clamp(1.9rem, 3vw, 2.7rem);
        font-weight: 700;
        margin: 0 0 1rem;
        color: #ffffff;
        letter-spacing: -0.028em;
    }

    .premium-cta p {
        max-width: 38em;
        margin: 0 auto 1.8rem;
        color: #d6e3ee;
        font-size: 1.05rem;
    }

    .premium-cta .story-cta {
        background: #ffffff;
        color: var(--story-primary);
    }

        .premium-cta .story-cta:hover,
        .premium-cta .story-cta:focus {
            background: #f3f7fb;
            color: var(--story-primary);
        }

/* Pricing-specific small touches */
.pricing-steps {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .pricing-steps { grid-template-columns: repeat(3, 1fr); }
}

.pricing-step {
    background: #ffffff;
    border: 1px solid var(--story-line);
    border-radius: 16px;
    padding: 1.8rem;
}

    .pricing-step .step-num {
        display: inline-flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--story-accent);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.95rem;
        margin-bottom: 0.9rem;
    }

    .pricing-step h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--story-primary);
        margin: 0 0 0.4rem;
    }

    .pricing-step p {
        color: var(--story-mute);
        margin: 0;
        font-size: 0.95rem;
    }

.pricing-card {
    max-width: 760px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--story-line);
    border-radius: 20px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: var(--story-elev);
}

    .pricing-card h3 {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--story-primary);
        margin: 0 0 1rem;
    }

    .pricing-card ul.features li { font-size: 1rem; }

/* ============================================
   GLOBAL UPLIFT (navbar, links, CTA cursor, helpers)
   Applies on every page. Driven by JS (.is-scrolled,
   .is-overlay) and CSS-only hover effects.
   ============================================ */
header > nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #ffffff;
    border-bottom: 1px solid var(--story-line, #e3e8ef);
    box-shadow: 0 1px 3px rgba(2, 48, 77, 0.04);
    transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

    header > nav.navbar.is-overlay {
        background: transparent;
        border-bottom-color: transparent;
        box-shadow: none;
    }

    header > nav.navbar.is-scrolled {
        background: #ffffff;
        border-bottom-color: var(--story-line, #e3e8ef);
        box-shadow: 0 1px 3px rgba(2, 48, 77, 0.08);
    }

/* Reserve space for the fixed nav */
body { padding-top: 64px; }

@media (max-width: 767.98px) {
    body { padding-top: 56px; }
}

/* Override Bootstrap's default underline on text links so we can
   draw our own. Excludes nav, buttons, CTAs, and footer icons. */
.premium-page a:not(.story-cta):not(.btn):not(.nav-link):not(.navbar-brand),
.story a:not(.story-cta):not(.btn):not(.nav-link):not(.navbar-brand) {
    color: var(--story-accent, #0465a5);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    .premium-page a:not(.story-cta):not(.btn):not(.nav-link):not(.navbar-brand):hover,
    .story a:not(.story-cta):not(.btn):not(.nav-link):not(.navbar-brand):hover {
        background-size: 100% 1px;
    }

/* Premium container: Bootstrap-free centered wrapper used on
   Security/Demo/etc. premium pages. Same role as Bootstrap's
   .container, but no Bootstrap dependency. */
.premium-container {
    width: 100%;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    header > nav.navbar { transition: none; }
    .premium-page a, .story a { transition: none; background-size: 100% 1px; }
}

/* ============================================
   PRICING-PAGE SPECIFIC
   ============================================ */
.premium-section-intro {
    text-align: center;
    margin-bottom: 2.5rem;
}

.premium-section-h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    font-weight: 800;
    color: var(--story-primary);
    margin: 0 0 0.8rem;
    letter-spacing: -0.02em;
}

.premium-section-sub {
    color: var(--story-mute);
    max-width: 38em;
    margin: 0 auto;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
}

    .pricing-card-features li {
        padding: 0.5rem 0 0.5rem 1.6rem;
        position: relative;
        color: var(--story-ink);
    }

        .pricing-card-features li::before {
            content: "\2713";
            color: var(--story-accent);
            position: absolute;
            left: 0;
            font-weight: 700;
        }

.pricing-card-note {
    color: var(--story-mute);
    margin: 0;
}

.pricing-team-grid {
    grid-template-columns: 1fr;
    max-width: 820px;
    text-align: center;
}

.pricing-team-h2 {
    text-align: center;
}

/* ============================================
   PREMIUM CARD GRID (Security, Demo sidebar)
   ============================================ */
.premium-card-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .premium-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-card-grid-2 {
        max-width: 800px;
        grid-template-columns: repeat(2, 1fr);
    }
}

.premium-card {
    background: #ffffff;
    border: 1px solid var(--story-line);
    border-radius: 20px;
    box-shadow: var(--story-elev, 0 24px 80px -32px rgba(2, 48, 77, 0.28));
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    .premium-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 90px -26px rgba(2, 48, 77, 0.32);
    }

    .premium-card .premium-card-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(95, 166, 214, 0.18), rgba(4, 101, 165, 0.10));
        color: var(--story-accent);
        margin-bottom: 0.3rem;
    }

        .premium-card .premium-card-icon svg {
            width: 24px;
            height: 24px;
        }

    .premium-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0;
        color: var(--story-primary);
        letter-spacing: -0.012em;
    }

    .premium-card p {
        font-size: 0.96rem;
        color: var(--story-mute);
        margin: 0;
        line-height: 1.55;
    }