/* ==========================================================
   SECURITY PAGE STYLES — SnapNotes
   Scoped to .security-page to avoid bleed
========================================================== */

/* Page wrapper */
.security-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 160px 24px 100px;
}

/* Headings */
.security-page h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3vw, 2.6rem);
    margin-bottom: 32px;
    color: var(--gray900);
}

.security-page h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin-top: 48px;
    margin-bottom: 12px;
    color: var(--purple);
}

/* Body text */
.security-page p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--gray700);
    margin-bottom: 16px;
}

/* Intro paragraph */
.security-page .page-intro {
    font-size: 1.15rem;
    line-height: 1.75;
    margin-bottom: 48px;
    color: var(--gray800);
}

/* Section spacing */
.security-page section {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-muted);
}

.security-page section:last-child {
    border-bottom: none;
}

/* Optional anchor offset for fixed header */
.security-page section[id] {
    scroll-margin-top: 140px;
}

/* Subtle emphasis */
.security-page strong {
    font-weight: 700;
    color: var(--gray900);
}

/* Links */
.security-page a {
    color: var(--purple);
    text-decoration: underline;
}

.security-page a:hover {
    color: var(--purple-dark);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .security-page {
        padding-top: 130px;
    }

    .security-page h1 {
        font-size: 2rem;
    }

    .security-page h2 {
        font-size: 1.25rem;
    }
}
/* ==========================================================
   SECURITY HERO
========================================================== */

.security-hero {
    background:
        radial-gradient(800px 400px at 10% 20%, rgba(106,13,173,0.08), transparent 60%),
        radial-gradient(600px 300px at 90% 10%, rgba(0,140,255,0.06), transparent 60%),
        linear-gradient(to bottom, #fafafa, #ffffff);
    border-bottom: 1px solid var(--border-muted);
}

.security-hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 160px 24px 80px;
}

.security-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3.5vw, 3rem);
    margin-bottom: 20px;
    color: var(--gray900);
}

.security-hero p {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--gray700);
    max-width: 720px;
}

/* Meta row */
.security-hero-meta {
    display: flex;
    gap: 32px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.security-hero-meta div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--gray800);
}

.security-hero-meta i {
    color: var(--purple);
}

/* Mobile */
@media (max-width: 640px) {
    .security-hero-content {
        padding-top: 130px;
    }

    .security-hero-meta {
        gap: 16px;
    }
}
/* ==========================================================
   SECURITY POSITIONING
========================================================== */

.security-positioning {
    background: #ffffff;
    border-bottom: 1px solid var(--border-muted);
}

.security-positioning-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 24px;
}

.security-positioning h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 24px;
    color: var(--gray900);
}

.security-positioning p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--gray700);
    margin-bottom: 18px;
}

.security-positioning-emphasis {
    font-weight: 600;
    color: var(--gray900);
    margin-top: 28px;
}