/**
 * 221Buddy Security Page
 * Page-specific styles — layout and marketing system tokens handle the rest.
 */

/* ── What We Collect grid ──────────────────────────── */

.sec-data-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mkt-gap-grid);
}

@media (max-width: 900px) {
    .sec-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .sec-data-grid {
        grid-template-columns: 1fr;
    }
}

.sec-data-card {
    background: var(--stripe-bg-primary);
    border-radius: var(--mkt-radius-large);
    padding: 1.75rem;
    box-shadow: var(--mkt-shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sec-data-card:hover {
    box-shadow: var(--mkt-shadow-card-hover);
    transform: translateY(-2px);
}

.sec-data-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mkt-radius-medium);
    background: var(--mkt-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 1.25rem;
}

.sec-data-icon i {
    font-size: 1.125rem;
    color: var(--mkt-primary);
}

.sec-data-title {
    font-size: var(--mkt-fs-h4);
    font-weight: var(--mkt-fw-bold);
    color: var(--mkt-text-dark);
    margin: 0 0 0.5rem 0;
    line-height: var(--mkt-lh-tight);
}

.sec-data-desc {
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-medium);
    line-height: var(--mkt-lh-relaxed);
    margin: 0;
}

/* ── Data Retention ────────────────────────────────── */

.sec-retention-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--mkt-gap-feature);
    align-items: center;
}

@media (max-width: 768px) {
    .sec-retention-layout {
        grid-template-columns: 1fr;
    }

    .sec-retention-right {
        justify-self: center;
    }
}

.sec-body-text {
    font-size: var(--mkt-fs-body);
    color: var(--mkt-text-medium);
    line-height: var(--mkt-lh-relaxed);
    margin: 0 0 1.25rem 0;
}

.sec-body-text:last-child {
    margin-bottom: 0;
}

.sec-stat-card {
    background: var(--mkt-gradient-dark);
    border-radius: var(--mkt-radius-xlarge);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: var(--mkt-shadow-large);
}

.sec-stat-number {
    font-size: clamp(4rem, 10vw, 6rem);
    font-weight: var(--mkt-fw-bold);
    color: var(--mkt-text-white);
    line-height: 1;
    letter-spacing: var(--mkt-ls-tight);
}

.sec-stat-unit {
    font-size: var(--mkt-fs-h3);
    font-weight: var(--mkt-fw-medium);
    color: var(--mkt-accent-cyan);
    margin: 0.25rem 0 1rem 0;
    letter-spacing: var(--mkt-ls-wide);
    text-transform: uppercase;
}

.sec-stat-label {
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-navy);
    line-height: var(--mkt-lh-relaxed);
}

/* ── Encryption grid ───────────────────────────────── */

.sec-encryption-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mkt-gap-grid);
}

@media (max-width: 640px) {
    .sec-encryption-grid {
        grid-template-columns: 1fr;
    }
}

.sec-enc-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.sec-enc-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mkt-radius-medium);
    background: var(--mkt-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sec-enc-icon i {
    font-size: 1.125rem;
    color: var(--mkt-primary);
}

.sec-enc-title {
    font-size: var(--mkt-fs-body);
    font-weight: var(--mkt-fw-bold);
    color: var(--mkt-text-dark);
    margin: 0 0 0.4rem 0;
    line-height: var(--mkt-lh-tight);
}

.sec-enc-desc {
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-medium);
    line-height: var(--mkt-lh-relaxed);
    margin: 0;
}

/* ── Responsible Disclosure note ───────────────────── */

.sec-disclosure-note {
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-light);
    margin: 1.5rem auto 0 auto;
    max-width: 380px;
    line-height: var(--mkt-lh-relaxed);
}