/* ==========================================================================
   DashboardFox Security Page Styles
   Page-specific styles for security.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Header Override
   -------------------------------------------------------------------------- */
.page-header-inner { max-width: 800px; }

/* Credibility statement — matches features/agencies pattern */
.page-header .credibility {
    font-size: 15px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Lead Feature - Your Data Stays Yours
   -------------------------------------------------------------------------- */
.lead-feature { 
    background: linear-gradient(135deg, var(--color-success-soft) 0%, rgba(22, 163, 74, 0.02) 100%); 
    border: 1px solid rgba(22, 163, 74, 0.15); 
    border-radius: var(--radius-xl); 
    padding: 48px; 
    margin-bottom: 60px; 
}
.lead-feature-header { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    margin-bottom: 32px; 
}
.lead-feature-icon { 
    width: 64px; 
    height: 64px; 
    background: var(--color-success); 
    border-radius: var(--radius-lg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    flex-shrink: 0; 
}
.lead-feature-icon svg { width: 32px; height: 32px; }
.lead-feature-header h2 { font-size: 28px; font-weight: 800; }
.lead-feature-header p { font-size: 16px; color: var(--color-text-secondary); margin-top: 4px; }
.lead-feature-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 24px; 
}
.lead-feature-item { display: flex; gap: 16px; }
.lead-feature-item-icon { 
    width: 44px; 
    height: 44px; 
    background: white; 
    border: 1px solid rgba(22, 163, 74, 0.2); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-success); 
    flex-shrink: 0; 
}
.lead-feature-item-icon svg { width: 22px; height: 22px; }
.lead-feature-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.lead-feature-item p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Data Flow Architecture Diagram (Lead Feature)
   -------------------------------------------------------------------------- */
.sec-data-flow {
    background: white;
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: var(--radius-lg);
    padding: 36px 28px 28px;
    margin-bottom: 36px;
}

.sec-df-paths {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.sec-df-node {
    flex: 0 0 200px;
    text-align: center;
}

.sec-df-node-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.sec-df-node-icon svg { width: 28px; height: 28px; }
.sec-df-icon-green { background: var(--color-success-soft); color: var(--color-success); border: 1px solid rgba(22, 163, 74, 0.2); }
.sec-df-icon-blue { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid rgba(55, 152, 255, 0.2); }

.sec-df-node-label { font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.sec-df-node-detail { font-size: 14px; color: var(--color-text-muted); margin-bottom: 12px; }

.sec-df-node-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 100px;
}
.sec-df-node-badge svg { width: 14px; height: 14px; }
.sec-df-badge-green { background: var(--color-success-soft); color: var(--color-success); border: 1px solid rgba(22, 163, 74, 0.15); }
.sec-df-badge-blue { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid rgba(55, 152, 255, 0.15); }

/* Arrows */
.sec-df-arrow {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}

.sec-df-arrow-line {
    display: block;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-border) 0px, var(--color-border) 6px, transparent 6px, transparent 10px);
}

.sec-df-arrow-tag {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.sec-df-tag-green { color: var(--color-success); }
.sec-df-tag-blue { color: var(--color-primary); }

.sec-df-arrow-sub {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Center hub */
.sec-df-center {
    flex: 0 0 200px;
    text-align: center;
}

.sec-df-center-box {
    background: var(--color-bg-subtle);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    margin-bottom: 8px;
}

.sec-df-center-icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin: 0 auto 10px;
}
.sec-df-center-icon svg { width: 24px; height: 24px; }
.sec-df-center-label { font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.sec-df-center-detail { font-size: 13px; color: var(--color-text-muted); }

.sec-df-center-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success);
}
.sec-df-center-sub svg { width: 14px; height: 14px; }

/* Bottom notes */
.sec-df-bottom {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(22, 163, 74, 0.1);
    flex-wrap: wrap;
}

.sec-df-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}
.sec-df-note svg { width: 16px; height: 16px; flex-shrink: 0; }
.sec-df-note-green { color: var(--color-success); }
.sec-df-note-blue { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Security Grid
   -------------------------------------------------------------------------- */
.security-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
}
.security-card { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: 32px; 
    transition: all 0.3s; 
}
.security-card:hover { 
    border-color: var(--color-primary); 
    box-shadow: var(--shadow-md); 
    transform: translateY(-4px); 
}
@media (prefers-reduced-motion: reduce) {
    .security-card:hover { transform: none; }
}
.security-card-icon { 
    width: 52px; 
    height: 52px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    color: var(--color-primary); 
}
.security-card-icon svg { width: 26px; height: 26px; }
.security-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.security-card p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Security Stack Diagram (below infrastructure grid)
   -------------------------------------------------------------------------- */
.sec-stack {
    margin-top: 48px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
}

.sec-stack-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 28px;
}

.sec-stack-layers {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sec-stack-layer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.sec-stack-layer-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sec-stack-layer-icon svg { width: 20px; height: 20px; }

.sec-stack-layer-content {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.sec-stack-layer-content strong { font-size: 16px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.sec-stack-layer-content span { font-size: 15px; color: var(--color-text-secondary); }

/* Layer colors — outermost to innermost */
.sec-stack-l1 { background: #f8fafc; border-color: #e2e8f0; }
.sec-stack-l1 .sec-stack-layer-icon { background: #f1f5f9; color: #64748b; }

.sec-stack-l2 { background: #f1f5f9; border-color: #e2e8f0; margin-left: 28px; }
.sec-stack-l2 .sec-stack-layer-icon { background: #e2e8f0; color: #475569; }

.sec-stack-l3 { background: var(--color-primary-soft); border-color: rgba(55, 152, 255, 0.15); margin-left: 56px; }
.sec-stack-l3 .sec-stack-layer-icon { background: rgba(55, 152, 255, 0.15); color: var(--color-primary); }

.sec-stack-l4 { background: rgba(55, 152, 255, 0.08); border-color: rgba(55, 152, 255, 0.2); margin-left: 84px; }
.sec-stack-l4 .sec-stack-layer-icon { background: rgba(55, 152, 255, 0.15); color: var(--color-primary); }

.sec-stack-l5 { background: var(--color-success-soft); border-color: rgba(22, 163, 74, 0.2); margin-left: 112px; }
.sec-stack-l5 .sec-stack-layer-icon { background: rgba(22, 163, 74, 0.12); color: var(--color-success); }

/* --------------------------------------------------------------------------
   Feature List Section (text + visual pairs)
   -------------------------------------------------------------------------- */
.feature-section { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 80px; 
    align-items: center; 
}
.feature-section.reverse { direction: rtl; }
.feature-section.reverse > * { direction: ltr; }
.feature-content h2 { font-size: 32px; font-weight: 800; margin-bottom: 16px; line-height: 1.2; }
.feature-content > p { 
    font-size: 17px; 
    color: var(--color-text-secondary); 
    line-height: 1.7; 
    margin-bottom: 28px; 
}
.feature-list { list-style: none; }
.feature-list li { 
    display: flex; 
    align-items: flex-start; 
    gap: 14px; 
    padding: 12px 0; 
    border-bottom: 1px solid var(--color-border-subtle); 
    font-size: 16px; 
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li svg { 
    width: 20px; 
    height: 20px; 
    color: var(--color-success); 
    flex-shrink: 0; 
    margin-top: 2px; 
}
.feature-list li strong { color: var(--color-text); }

/* Feature visual — illustrated version */
.feature-visual {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.feature-visual-illustrated {
    background: white;
    padding: 24px;
    aspect-ratio: auto;
    min-height: 520px;
}

/* Extra tall variant for visuals that need more vertical space (auth layers) */
.feature-visual-tall {
    min-height: 580px;
}

/* Inline SVG illustrations — scale to fill container */
.sec-illustration {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Product Security Section — centered intro + full-width video + features below
   -------------------------------------------------------------------------- */
.sec-product-intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.sec-product-intro h2 {
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.sec-product-intro p {
    font-size: 17px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.sec-product-video {
    margin-bottom: 48px;
}

.sec-product-features {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   RLS Pricing Callout
   -------------------------------------------------------------------------- */
.rls-pricing-callout {
    margin-top: 0;
    padding: 20px 24px;
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rls-pricing-callout-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.rls-pricing-callout-main svg {
    width: 18px;
    height: 18px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.rls-pricing-callout-main strong {
    color: var(--color-text);
}

.rls-pricing-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-success);
    text-decoration: none;
    padding-left: 30px;
}

.rls-pricing-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Multi-Tenant Isolation Diagram (HTML/CSS)
   -------------------------------------------------------------------------- */
.sec-tenant-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
}

.sec-tenant-instance {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-primary-soft);
    border: 1px solid rgba(55, 152, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 16px 28px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary);
}
.sec-tenant-instance svg { width: 26px; height: 26px; }

.sec-tenant-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-success);
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: 100px;
    padding: 10px 22px;
}
.sec-tenant-filter-bar svg { width: 20px; height: 20px; }

.sec-tenant-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.sec-tenant-card {
    border-radius: var(--radius-lg);
    border: 1.5px solid;
    overflow: hidden;
}

.sec-tenant-card-header {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sec-tenant-card-header strong { font-size: 16px; }
.sec-tenant-tag {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    width: fit-content;
}

.sec-tenant-card-rows {
    padding: 6px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sec-tenant-row {
    height: 10px;
    border-radius: 3px;
}

.sec-tenant-card-note {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid;
}

/* Tenant color variants */
.sec-tenant-blue { border-color: rgba(59, 130, 246, 0.3); }
.sec-tenant-blue .sec-tenant-card-header { background: rgba(59, 130, 246, 0.06); }
.sec-tenant-blue .sec-tenant-tag { background: #dbeafe; color: #3b82f6; }
.sec-tenant-blue .sec-tenant-row { background: rgba(59, 130, 246, 0.2); }
.sec-tenant-blue .sec-tenant-card-note { color: #3b82f6; border-color: rgba(59, 130, 246, 0.15); background: rgba(59, 130, 246, 0.04); }

.sec-tenant-green { border-color: rgba(22, 163, 74, 0.3); }
.sec-tenant-green .sec-tenant-card-header { background: rgba(22, 163, 74, 0.06); }
.sec-tenant-green .sec-tenant-tag { background: #dcfce7; color: #16a34a; }
.sec-tenant-green .sec-tenant-row { background: rgba(22, 163, 74, 0.2); }
.sec-tenant-green .sec-tenant-card-note { color: #16a34a; border-color: rgba(22, 163, 74, 0.15); background: rgba(22, 163, 74, 0.04); }

.sec-tenant-purple { border-color: rgba(124, 58, 237, 0.3); }
.sec-tenant-purple .sec-tenant-card-header { background: rgba(124, 58, 237, 0.06); }
.sec-tenant-purple .sec-tenant-tag { background: #ede9fe; color: #7c3aed; }
.sec-tenant-purple .sec-tenant-row { background: rgba(124, 58, 237, 0.2); }
.sec-tenant-purple .sec-tenant-card-note { color: #7c3aed; border-color: rgba(124, 58, 237, 0.15); background: rgba(124, 58, 237, 0.04); }

.sec-tenant-bottom {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    padding-top: 12px;
}


/* --------------------------------------------------------------------------
   Compliance Section
   -------------------------------------------------------------------------- */
.compliance-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 32px; 
}
.compliance-card { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: 32px; 
}
.compliance-card h3 { 
    font-size: 18px; 
    font-weight: 700; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.compliance-card h3 svg { width: 22px; height: 22px; color: var(--color-primary); }
.compliance-card ul { list-style: none; }
.compliance-card li { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    padding: 10px 0; 
    font-size: 16px; 
    color: var(--color-text-secondary); 
    border-bottom: 1px solid var(--color-border-subtle); 
}
.compliance-card li:last-child { border-bottom: none; }
.compliance-card li svg { 
    width: 18px; 
    height: 18px; 
    flex-shrink: 0; 
    margin-top: 2px; 
}
.compliance-card li svg.check { color: var(--color-success); }
.compliance-card li svg.planned { color: var(--color-primary); }
.compliance-card li a { color: inherit; text-decoration: underline; }
.compliance-card li a:hover { color: var(--color-primary); }
.compliance-card .tag { 
    font-size: 13px; 
    font-weight: 600; 
    padding: 2px 8px; 
    border-radius: 100px; 
    margin-left: 8px; 
}
.compliance-card .tag.current { background: var(--color-success-soft); color: var(--color-success); }
.compliance-card .tag.planned { background: var(--color-primary-soft); color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Privacy Promise
   -------------------------------------------------------------------------- */
.privacy-promise { 
    display: flex; 
    align-items: center; 
    gap: 32px; 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-xl); 
    padding: 40px 48px; 
}
.privacy-promise-icon { 
    width: 72px; 
    height: 72px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-lg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-primary); 
    flex-shrink: 0; 
}
.privacy-promise-icon svg { width: 36px; height: 36px; }
.privacy-promise-content h2 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.privacy-promise-content p { 
    font-size: 17px; 
    color: var(--color-text-secondary); 
    line-height: 1.7; 
    margin: 0; 
}

/* --------------------------------------------------------------------------
   Legal Links
   -------------------------------------------------------------------------- */
.legal-links { 
    background: var(--color-bg-muted); 
    border-radius: var(--radius-lg); 
    padding: 32px; 
    text-align: center; 
    margin-top: 48px; 
}
.legal-links h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.legal-links-grid { 
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    flex-wrap: wrap; 
}
.legal-links-grid a { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 10px 18px; 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-md); 
    font-size: 16px; 
    font-weight: 600; 
    color: var(--color-text); 
    text-decoration: none; 
    transition: all 0.2s; 
}
.legal-links-grid a:hover { 
    border-color: var(--color-primary); 
    color: var(--color-primary); 
}
.legal-links-grid a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.legal-links-grid a svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   CONN-CARDS DIAGRAM — "Your data stays yours" section
   -------------------------------------------------------------------------- */
.conn-cards-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.conn-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.conn-card-live {
    border: 1.5px solid var(--color-success);
}

.conn-card-stored {
    border: 1.5px solid var(--color-primary);
}

.conn-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.conn-card-live .conn-card-header { background: rgba(5, 150, 105, 0.04); }
.conn-card-stored .conn-card-header { background: var(--color-primary-soft); }

.conn-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conn-card-icon svg { width: 18px; height: 18px; }

.conn-card-icon-db {
    background: rgba(5, 150, 105, 0.1);
    color: var(--color-success);
}

.conn-card-icon-api {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.conn-card-meta {
    flex: 1;
    min-width: 0;
}

.conn-card-meta strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.conn-card-meta span {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conn-badge {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.conn-badge-live {
    background: rgba(5, 150, 105, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.conn-badge-stored {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.conn-card-body {
    padding: 14px 16px;
}

.conn-preview-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.conn-preview-table {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 13px;
}

.conn-preview-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: 8px;
    padding: 5px 10px;
    color: var(--color-text-secondary);
}

.conn-preview-header {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.conn-preview-row-alt {
    background: var(--color-bg-subtle);
}

.conn-preview-row span:last-child {
    color: var(--color-text-muted);
}

.conn-refresh-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.conn-refresh-item {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    text-align: center;
}

.conn-refresh-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 3px;
}

.conn-refresh-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
}

.conn-schedule-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.conn-schedule-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.conn-schedule-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.conn-schedule-pill {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}

.conn-schedule-pill-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: rgba(37, 99, 235, 0.25);
}

.conn-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 13px;
    font-weight: 600;
}

.conn-card-live .conn-card-footer {
    background: rgba(5, 150, 105, 0.04);
    color: var(--color-success);
}

.conn-card-stored .conn-card-footer {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.conn-card-footer svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.conn-cards-vs {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Responsive — Security specific
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .security-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-section { grid-template-columns: 1fr; gap: 40px; }
    .feature-section.reverse { direction: ltr; }
    .feature-visual { order: -1; }
    .lead-feature-grid { grid-template-columns: 1fr; }

    /* Data flow diagram stacks */
    .sec-df-paths { flex-direction: column; gap: 20px; }
    .sec-df-node { flex: none; width: 100%; max-width: 300px; }
    .sec-df-center { flex: none; width: 100%; max-width: 300px; }
    .sec-df-arrow { 
        flex: none; 
        min-width: auto; 
        flex-direction: row; 
        gap: 8px; 
    }
    .sec-df-arrow-line { width: 40px; height: 2px; }

    /* Security stack indents flatten */
    .sec-stack-l2 { margin-left: 16px; }
    .sec-stack-l3 { margin-left: 32px; }
    .sec-stack-l4 { margin-left: 48px; }
    .sec-stack-l5 { margin-left: 64px; }

    /* Tenant diagram adapts */
    .sec-tenant-grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }

    /* Product security section */
    .sec-product-features {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Conn cards diagram */
    .conn-cards-diagram {
        grid-template-columns: 1fr;
    }
    .conn-cards-vs {
        text-align: center;
    }
    .conn-refresh-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .security-grid { grid-template-columns: 1fr; }
    .compliance-grid { grid-template-columns: 1fr; }
    .page-header-ctas { flex-direction: column; }
    .privacy-promise { 
        flex-direction: column; 
        text-align: center; 
        padding: 32px; 
    }
    .lead-feature { padding: 32px; }
    .sec-data-flow { padding: 24px 16px 20px; }
    .sec-df-bottom { flex-direction: column; gap: 12px; align-items: center; text-align: center; }

    /* Security stack fully flattens */
    .sec-stack { padding: 24px 16px; }
    .sec-stack-l2,
    .sec-stack-l3,
    .sec-stack-l4,
    .sec-stack-l5 { margin-left: 0; }
    .sec-stack-layer { padding: 12px 16px; }
    .sec-stack-layer-content { flex-direction: column; gap: 2px; }

    /* Product security intro */
    .sec-product-intro h2 { font-size: 26px; }
    .browser-url { display: none; }
}

/* ==========================================================================
   DashboardFox Security Page — Additional Styles (security.css additions)
   New sections: Agency Trust Block, Paywall Comparison, SOC2 Proactive,
   Security Review CTA, Self-Hosted Banner
   ========================================================================== */

/* --------------------------------------------------------------------------
   Agency Trust Grid — Three ICP fear/answer cards
   -------------------------------------------------------------------------- */
.agency-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}

.agency-trust-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 0.25s, border-color 0.25s;
}

.agency-trust-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .agency-trust-card:hover { box-shadow: none; }
}

.agency-trust-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.agency-trust-icon svg { width: 26px; height: 26px; }

.agency-trust-icon-green {
    background: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.agency-trust-icon-blue {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid rgba(55, 152, 255, 0.2);
}

.agency-trust-icon-amber {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.agency-trust-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
}

.agency-trust-card p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.65;
    flex: 1;
}

.agency-trust-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
}
.agency-trust-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Paywall Comparison — Three-column competitive comparison
   -------------------------------------------------------------------------- */
.paywall-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.paywall-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.paywall-card-winner {
    border-color: var(--color-success);
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.06);
}

.paywall-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-bg-subtle);
    position: relative;
}

.paywall-card-winner .paywall-card-header {
    background: var(--color-success-soft);
    border-bottom-color: rgba(22, 163, 74, 0.15);
}

.paywall-logo-mark {
    width: 40px;
    height: 40px;
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
    flex-shrink: 0;
}
.paywall-logo-mark svg { width: 20px; height: 20px; }

.paywall-logo-mark-muted {
    background: var(--color-bg-muted);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.paywall-card-header > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.paywall-card-header strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.paywall-card-tagline {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.paywall-winner-badge {
    background: var(--color-success);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

.paywall-price {
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
}

.paywall-card-winner .paywall-price {
    background: rgba(22, 163, 74, 0.03);
}

.paywall-price-amount {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-success);
    line-height: 1.1;
}

.paywall-price-muted .paywall-price-amount {
    color: var(--color-text-muted);
}

.paywall-price-label {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.paywall-features {
    list-style: none;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.paywall-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
}
.paywall-features li:last-child { border-bottom: none; }
.paywall-features li svg { width: 16px; height: 16px; flex-shrink: 0; }

.paywall-feature-yes { color: var(--color-text); }
.paywall-feature-yes svg { color: var(--color-success); }

.paywall-feature-no { opacity: 0.65; }
.paywall-feature-no svg { color: #ef4444; }

.paywall-feature-partial { opacity: 0.8; }
.paywall-feature-partial svg { color: #f59e0b; }

.paywall-footnote {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.paywall-footnote span {
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   SOC 2 Proactive Callout
   -------------------------------------------------------------------------- */
.soc2-proactive {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 0;
}

.soc2-proactive-inner {
    display: flex;
    gap: 24px;
    padding: 36px 40px;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border-subtle);
}

.soc2-proactive-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 4px;
}
.soc2-proactive-icon svg { width: 28px; height: 28px; }

.soc2-proactive-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text);
}

.soc2-proactive-content p {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.soc2-proactive-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0 40px;
}

.soc2-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.soc2-feature:nth-last-child(-n+3) { border-bottom: none; }
.soc2-feature svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Security Review CTA — "Have a checklist?" conversion path
   -------------------------------------------------------------------------- */
.sec-talk-cta {
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, rgba(55, 152, 255, 0.03) 100%);
    border: 1px solid rgba(55, 152, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 48px;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 28px;
    align-items: start;
}

.sec-talk-cta-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.sec-talk-cta-icon svg { width: 30px; height: 30px; }

.sec-talk-cta-content h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-text);
}

.sec-talk-cta-content p {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
}
.sec-talk-cta-content p:last-child { margin-bottom: 0; }

.sec-talk-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    min-width: 220px;
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   Self-Hosted Banner — lightweight strip (replaces full section)
   -------------------------------------------------------------------------- */
.sec-selfhosted-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
}

.sec-selfhosted-banner-icon {
    width: 44px;
    height: 44px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.sec-selfhosted-banner-icon svg { width: 22px; height: 22px; }

.sec-selfhosted-banner-content {
    flex: 1;
    min-width: 0;
}

.sec-selfhosted-banner-content strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.sec-selfhosted-banner-content p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive additions
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .agency-trust-grid { grid-template-columns: 1fr; gap: 16px; }
    .paywall-comparison { grid-template-columns: 1fr; }
    .soc2-proactive-features { grid-template-columns: repeat(2, 1fr); }
    .soc2-feature:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-border-subtle); }
    .soc2-feature:nth-last-child(-n+2) { border-bottom: none; }
    .sec-talk-cta { grid-template-columns: 1fr; gap: 20px; }
    .sec-talk-cta-icon { display: none; }
    .sec-talk-cta-actions { flex-direction: row; flex-wrap: wrap; min-width: unset; }
}

@media (max-width: 768px) {
    .soc2-proactive-inner { flex-direction: column; padding: 28px 24px; }
    .soc2-proactive-features { grid-template-columns: 1fr; padding: 0 24px; }
    .soc2-feature:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border-subtle); }
    .soc2-feature:last-child { border-bottom: none; }
    .sec-talk-cta { padding: 32px 24px; }
    .sec-talk-cta-actions { flex-direction: column; }
    .sec-selfhosted-banner { flex-direction: column; text-align: center; padding: 24px; }
    .sec-selfhosted-banner-icon { margin: 0 auto; }
    .paywall-footnote { flex-direction: column; align-items: flex-start; gap: 12px; }
}