/* ==========================================================================
   DashboardFox Features Page Styles
   Page-specific styles for features.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Header Override (larger inner width for features)
   -------------------------------------------------------------------------- */
.page-header { padding-bottom: 80px; }
.page-header-inner { max-width: 800px; }
.page-header .credibility { 
    font-size: 15px; 
    color: var(--color-text-muted); 
    margin-bottom: 32px; 
}

/* --------------------------------------------------------------------------
   Feature Navigation (sticky sub-nav)
   -------------------------------------------------------------------------- */
.feature-nav { 
    position: -webkit-sticky; 
    position: sticky; 
    top: var(--header-height); 
    background: rgba(255, 255, 255, 0.95); 
    -webkit-backdrop-filter: blur(12px); 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid var(--color-border-subtle); 
    z-index: 100; 
}
.feature-nav-inner { 
    max-width: var(--max-width); 
    margin: 0 auto; 
    padding: 0 24px; 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
}
.feature-nav a { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 16px 20px; 
    color: var(--color-text-secondary); 
    text-decoration: none; 
    font-size: 15px; 
    font-weight: 600; 
    border-bottom: 2px solid transparent; 
    transition: all 0.2s; 
}
.feature-nav a:hover { color: var(--color-text); }
.feature-nav a.active { 
    color: var(--color-primary); 
    border-bottom-color: var(--color-primary); 
}
.feature-nav a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}
.feature-nav svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Feature Section
   -------------------------------------------------------------------------- */
.feature-section { scroll-margin-top: calc(var(--header-height) + 60px); }
.feature-section-header { 
    display: flex; 
    align-items: flex-start; 
    gap: 24px; 
    margin-bottom: 60px; 
}
.feature-section-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; 
}
.feature-section-icon svg { width: 36px; height: 36px; }
.feature-section-header h2 { 
    font-size: clamp(32px, 4vw, 44px); 
    font-weight: 800; 
    line-height: 1.15; 
    letter-spacing: -0.02em; 
    margin-bottom: 16px; 
}
.feature-section-header p { 
    font-size: 18px; 
    color: var(--color-text-secondary); 
    line-height: 1.6; 
    max-width: 600px; 
}

/* --------------------------------------------------------------------------
   Feature Grid & Cards
   -------------------------------------------------------------------------- */
.feature-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
}
.feature-card { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: 28px; 
    transition: all 0.3s; 
}
.feature-card:hover { 
    border-color: var(--color-primary); 
    box-shadow: var(--shadow-md); 
    transform: translateY(-4px); 
}
@media (prefers-reduced-motion: reduce) {
    .feature-card:hover { transform: none; }
}
.feature-card-icon { 
    width: 44px; 
    height: 44px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 16px; 
    color: var(--color-primary); 
}
.feature-card-icon svg { width: 22px; height: 22px; }
.feature-card h3 { 
    font-size: 17px; 
    font-weight: 700; 
    margin-bottom: 8px; 
}
.feature-card p { 
    font-size: 14px; 
    color: var(--color-text-secondary); 
    line-height: 1.6; 
}

/* --------------------------------------------------------------------------
   Feature Highlight (2-column with visual)
   -------------------------------------------------------------------------- */
.feature-highlight { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
    margin-top: 60px; 
    padding: 48px; 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-xl); 
}
.feature-highlight-content h3 { 
    font-size: 28px; 
    font-weight: 700; 
    margin-bottom: 16px; 
}
.feature-highlight-content p { 
    font-size: 17px; 
    color: var(--color-text-secondary); 
    line-height: 1.7; 
    margin-bottom: 24px; 
}
.feature-highlight-list { list-style: none; }
.feature-highlight-list li { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    padding: 10px 0; 
    font-size: 15px; 
    color: var(--color-text-secondary); 
}
.feature-highlight-list li svg { 
    width: 20px; 
    height: 20px; 
    color: var(--color-success); 
    flex-shrink: 0; 
    margin-top: 2px; 
}
.feature-highlight-visual { 
    background: var(--color-bg-muted); 
    border-radius: var(--radius-lg); 
    aspect-ratio: 4/3; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-text-muted); 
    font-size: 14px; 
}
.competitive-note { 
    font-size: 13px; 
    color: var(--color-success); 
    font-weight: 600; 
    margin-top: 16px; 
}

/* --------------------------------------------------------------------------
   Build Grid (What You Can Build)
   -------------------------------------------------------------------------- */
.build-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
}
.build-category { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: 28px; 
}
.build-category h3 { 
    font-size: 17px; 
    font-weight: 700; 
    margin-bottom: 16px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.build-category h3 svg { 
    width: 22px; 
    height: 22px; 
    color: var(--color-primary); 
}
.build-category ul { list-style: none; }
.build-category ul li { 
    font-size: 14px; 
    color: var(--color-text-secondary); 
    padding: 6px 0; 
    border-bottom: 1px solid var(--color-border-subtle); 
}
.build-category ul li:last-child { border-bottom: none; }
.build-category ul li a { 
    color: var(--color-primary); 
    text-decoration: none; 
    font-weight: 500;
}
.build-category ul li a:hover { text-decoration: underline; }
.build-category .coming-soon { 
    background: var(--color-accent-soft); 
    color: var(--color-accent); 
    font-size: 11px; 
    font-weight: 600; 
    padding: 2px 6px; 
    border-radius: 4px; 
    margin-left: 6px; 
}

/* --------------------------------------------------------------------------
   Responsive - Features specific
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .feature-grid, 
    .build-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-highlight { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .feature-nav-inner { 
        overflow-x: auto; 
        justify-content: flex-start; 
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .feature-nav-inner::-webkit-scrollbar { display: none; } /* Chrome/Safari */
    .feature-nav a { 
        white-space: nowrap; 
        padding: 16px 16px; 
    }
    .feature-grid, 
    .build-grid { grid-template-columns: 1fr; }
    .feature-section-header { flex-direction: column; }
    .feature-highlight { padding: 32px; gap: 40px; }
}


@media (max-width: 768px) {
    .feature-nav-inner a {
        font-size: 0.8125rem;
        padding: 0.5rem 0.4rem;
    }
}


/* ==========================================================================
   Features Page — Visual Storytelling Components
   REPLACES the old visual storytelling section in features.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stacked Layout Override
   .feature-highlight is display:grid with grid-template-columns:1fr 1fr
   We override to single column for stacked visuals
   -------------------------------------------------------------------------- */
.feature-highlight-stacked {
    grid-template-columns: 1fr !important;
    gap: 40px;
}

.feature-highlight-visual-full {
    aspect-ratio: auto !important;
    background: none !important;
    width: 100%;
}

/* --------------------------------------------------------------------------
   #1 — Connect: Data Flow Diagram (HTML/CSS)
   -------------------------------------------------------------------------- */
.data-flow-diagram {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.df-paths {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: center;
}

.df-source {
    text-align: center;
    padding: 20px;
}

.df-source-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.df-source-icon svg {
    width: 32px;
    height: 32px;
}

.df-source-icon-db {
    background: rgba(55, 152, 255, 0.1);
    border: 1.5px solid rgba(55, 152, 255, 0.25);
    color: var(--color-primary);
}

.df-source-icon-api {
    background: rgba(55, 152, 255, 0.1);
    border: 1.5px solid rgba(55, 152, 255, 0.25);
    color: var(--color-primary);
}

.df-source-label {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.df-source-examples {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Center fox node */
.df-center {
    display: flex;
    align-items: center;
    gap: 0;
}

.df-fox {
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    text-align: center;
    min-width: 160px;
}

.df-fox strong {
    display: block;
    font-size: 15px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.df-fox-logo {
    height: 28px;
    width: auto;
    display: block;
    margin: 0 auto 10px;
}

.df-fox-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 36px;
}

.df-fox-bars span {
    width: 14px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    opacity: 0.7;
}

/* Arrows */
.df-arrow {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 90px;
}

.df-arrow-line {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    min-width: 20px;
}

.df-arrow-tag {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.df-arrow-tag-green {
    background: rgba(22, 163, 74, 0.08);
    color: var(--color-success);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.df-arrow-tag-blue {
    background: rgba(55, 152, 255, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(55, 152, 255, 0.2);
}

/* Bottom notes */
.df-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.df-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}

.df-note svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.df-note-green {
    background: rgba(22, 163, 74, 0.06);
    color: var(--color-success);
    border: 1px solid rgba(22, 163, 74, 0.12);
}

.df-note-blue {
    background: rgba(55, 152, 255, 0.06);
    color: var(--color-primary);
    border: 1px solid rgba(55, 152, 255, 0.12);
}

.df-bottom-bar {
    margin-top: 16px;
    text-align: center;
    padding: 10px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Connection Cards Diagram (Connect section)
   -------------------------------------------------------------------------- */
.conn-cards-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.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: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conn-badge {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    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;
}

/* Live card: preview table */
.conn-preview-label {
    font-size: 11px;
    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: 12px;
}

.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: 11px;
    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);
}

/* Stored card: refresh info */
.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: 10px;
    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: 12px;
    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: 11px;
    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);
}

/* Footer note */
.conn-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 12px;
    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;
}

@media (max-width: 900px) {
    .conn-cards-diagram {
        grid-template-columns: 1fr;
    }
    .conn-cards-vs {
        text-align: center;
    }
    .conn-refresh-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   #2 — Build: Dual-Path Builder (HTML/CSS)
   -------------------------------------------------------------------------- */
.builder-dual-path {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.builder-path {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.builder-path-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
}

.builder-path-label svg {
    width: 20px;
    height: 20px;
}

.builder-path-label-nocode {
    background: rgba(22, 163, 74, 0.06);
    color: var(--color-success);
}

.builder-path-label-sql {
    background: rgba(55, 152, 255, 0.06);
    color: var(--color-primary);
}

.builder-panels {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    border-top: 1px solid var(--color-border-subtle);
    min-height: 180px;
}

.builder-panel {
    padding: 16px;
    border-right: 1px solid var(--color-border-subtle);
}

.builder-panel:last-child {
    border-right: none;
}

.builder-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.builder-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.builder-field-indent {
    padding-left: 16px;
}

.builder-field-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-border);
    flex-shrink: 0;
}

.builder-field-dot-active {
    background: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(55, 152, 255, 0.2);
}

.builder-config-card {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.builder-config-card strong {
    display: block;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 2px;
}

.builder-config-card span {
    font-size: 13px;
    color: var(--color-text-muted);
}

.builder-server {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.builder-server-active {
    background: rgba(55, 152, 255, 0.06);
    border: 1px solid rgba(55, 152, 255, 0.2);
    color: var(--color-text);
    font-weight: 600;
}

.builder-server-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
}

.builder-server-dot-on {
    background: var(--color-success);
}

.builder-sql-editor {
    background: #1a2836;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: 'DM Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.8;
}

.builder-sql-editor code {
    display: block;
    color: #c5d8e2;
}

.builder-sql-editor em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: 600;
}

.builder-sql-editor strong {
    color: var(--color-accent);
    font-weight: 600;
}

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

.builder-preview-header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(55, 152, 255, 0.06);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.builder-preview-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

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

.status-active { color: var(--color-success); font-weight: 600; }
.status-done { color: var(--color-text-muted); }

.builder-bridge {
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
    position: relative;
}

.builder-bridge::before,
.builder-bridge::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 60px);
    height: 1px;
    background: var(--color-border);
}

.builder-bridge::before { left: 0; }
.builder-bridge::after { right: 0; }

/* --------------------------------------------------------------------------
   #3 — Explore: Filter / Drill-Down Flow (HTML/CSS)
   -------------------------------------------------------------------------- */
.filter-drill-diagram {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.fd-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.fd-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: 100px;
    font-size: 13px;
}

.fd-pill-label { color: var(--color-text-muted); }
.fd-pill-value { color: var(--color-text); font-weight: 600; }

.fd-saved-views {
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.fd-flow-label {
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.fd-dashboard {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.fd-dashboard-title {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
}

.fd-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
}

.fd-kpi {
    text-align: center;
    padding: 12px 8px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

.fd-kpi-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.fd-kpi-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
}

.fd-kpi-value-warn { color: var(--color-accent); }

.fd-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 16px;
}

.fd-chart {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.fd-chart-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.fd-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}

.fd-bar {
    flex: 1;
    background: var(--color-primary);
    opacity: 0.5;
    border-radius: 3px 3px 0 0;
    min-height: 10px;
}

.fd-bar-active {
    opacity: 1;
    position: relative;
    border: 2px solid var(--color-text);
}

.fd-bar-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
}

.fd-bar-click {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(255, 88, 71, 0.08);
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.fd-grid {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fd-grid-header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.7fr;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(55, 152, 255, 0.06);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
}

.fd-grid-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.7fr;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.fd-grid-row-alt { background: var(--color-bg-subtle); }

.fd-drill-arrow {
    text-align: center;
    padding: 16px 0;
}

.fd-drill-label {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 88, 71, 0.06);
    border: 1px solid rgba(255, 88, 71, 0.2);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
}

.fd-target {
    background: var(--color-surface);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.fd-target-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

.fd-inherited-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-inherited-pill {
    padding: 5px 12px;
    background: rgba(55, 152, 255, 0.06);
    border: 1px solid rgba(55, 152, 255, 0.2);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   #4 — Share: Delivery Flow Diagram (HTML/CSS)
   -------------------------------------------------------------------------- */
.delivery-flow-diagram {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

/* Origin node */
.dfd-origin {
    text-align: center;
    margin-bottom: 4px;
}

.dfd-origin-nodes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.dfd-origin-node {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.dfd-origin-node svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.dfd-origin-node strong {
    font-size: 16px;
    color: var(--color-text);
}

.dfd-or {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.dfd-origin-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 10px;
}

.dfd-flow-arrow {
    text-align: center;
    font-size: 18px;
    color: var(--color-border);
    padding: 4px 0;
    line-height: 1;
}

/* Two columns */
.dfd-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dfd-column {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.dfd-column-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
}

.dfd-column-header svg {
    width: 20px;
    height: 20px;
}

.dfd-column-header-access {
    background: rgba(55, 152, 255, 0.06);
    color: var(--color-primary);
    border-bottom: 1px solid rgba(55, 152, 255, 0.15);
}

.dfd-column-header-deliver {
    background: rgba(22, 163, 74, 0.06);
    color: var(--color-success);
    border-bottom: 1px solid rgba(22, 163, 74, 0.15);
}

/* Method rows */
.dfd-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.dfd-method:last-child {
    border-bottom: none;
}

.dfd-method-icon {
    width: 36px;
    height: 36px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.dfd-method-icon svg {
    width: 18px;
    height: 18px;
}

.dfd-method-text {
    flex: 1;
    min-width: 0;
}

.dfd-method-text strong {
    display: block;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 2px;
}

.dfd-method-text span {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Tags */
.dfd-method-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dfd-tag {
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.dfd-tag-pv {
    background: rgba(55, 152, 255, 0.08);
    color: var(--color-primary);
}

.dfd-tag-mau {
    background: rgba(255, 88, 71, 0.08);
    color: var(--color-accent);
}

.dfd-tag-format {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------------
   #5 — Secure: Row-Level Security (HTML/CSS)
   -------------------------------------------------------------------------- */
.rls-diagram {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.rls-report {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-width: 520px;
    margin: 0 auto;
}

.rls-report-icon {
    width: 40px;
    height: 40px;
    background: rgba(55, 152, 255, 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rls-report-icon svg { width: 22px; height: 22px; color: var(--color-primary); }
.rls-report-text strong { display: block; font-size: 16px; color: var(--color-text); }
.rls-report-text span { font-size: 14px; color: var(--color-text-muted); }

.rls-badge {
    margin-left: auto;
    padding: 6px 14px;
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success);
    white-space: nowrap;
}

.rls-flow-label {
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.rls-users {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.rls-user-a { border: 1.5px solid var(--color-success); }
.rls-user-b { border: 1.5px solid var(--color-accent); }

.rls-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.rls-user-a .rls-user-header { background: rgba(22, 163, 74, 0.04); }
.rls-user-b .rls-user-header { background: rgba(255, 88, 71, 0.04); }

.rls-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.rls-avatar-a { background: rgba(22, 163, 74, 0.1); color: var(--color-success); border: 1.5px solid var(--color-success); }
.rls-avatar-b { background: rgba(255, 88, 71, 0.1); color: var(--color-accent); border: 1.5px solid var(--color-accent); }

.rls-user-info strong { display: block; font-size: 15px; color: var(--color-text); }

.rls-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.rls-tag-a { background: rgba(22, 163, 74, 0.08); color: var(--color-success); }
.rls-tag-b { background: rgba(255, 88, 71, 0.08); color: var(--color-accent); }

.rls-user-label {
    padding: 10px 16px 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.rls-table {
    margin: 0 16px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.rls-table-header {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.8fr;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rls-table-header-a { background: rgba(22, 163, 74, 0.06); color: var(--color-success); }
.rls-table-header-b { background: rgba(255, 88, 71, 0.06); color: var(--color-accent); }

.rls-table-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.8fr;
    gap: 8px;
    padding: 7px 12px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.rls-table-row-alt { background: var(--color-bg-subtle); }

.rls-hidden-note {
    margin: 10px 16px 14px;
    padding: 8px 14px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.rls-annotation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 20px;
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: var(--radius-md);
}

.rls-annotation svg { width: 22px; height: 22px; color: var(--color-success); flex-shrink: 0; margin-top: 1px; }
.rls-annotation p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.rls-annotation strong { color: var(--color-text); }

/* --------------------------------------------------------------------------
   #6 — What You Can Build: Category Thumbnails
   -------------------------------------------------------------------------- */
.build-category-thumb {
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: white;
    border: 1px solid var(--color-border-subtle);
}

.build-thumb-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .builder-panels {
        grid-template-columns: 1fr;
    }

    .builder-panel {
        border-right: none;
        border-bottom: 1px solid var(--color-border-subtle);
    }

    .builder-panel:last-child {
        border-bottom: none;
    }

    .fd-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .fd-chart-row {
        grid-template-columns: 1fr;
    }

    .rls-users {
        grid-template-columns: 1fr;
    }

    .dfd-columns {
        grid-template-columns: 1fr;
    }

    .df-paths {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .df-center {
        flex-direction: column;
    }

    .df-arrow {
        justify-content: center;
    }

    .df-arrow-line {
        width: 2px;
        height: 20px;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .builder-dual-path,
    .filter-drill-diagram,
    .rls-diagram,
    .data-flow-diagram,
    .delivery-flow-diagram {
        padding: 16px;
    }

    .fd-filter-bar {
        padding: 10px 12px;
    }

    .fd-saved-views {
        margin-left: 0;
    }

    .fd-kpi-value {
        font-size: 22px;
    }

    .rls-report {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .rls-badge {
        margin-left: 0;
    }

    .dfd-columns {
        grid-template-columns: 1fr;
    }

    .dfd-origin-nodes {
        flex-direction: column;
        gap: 8px;
    }

    .dfd-method {
        flex-wrap: wrap;
    }

    .dfd-method-tags {
        width: 100%;
        margin-top: 6px;
    }

    .df-notes {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Compliance Strip (Secure section credibility boost)
   -------------------------------------------------------------------------- */
.compliance-strip {
    margin: 40px 0;
    padding: 20px 24px;
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: var(--radius-md);
}
.compliance-strip-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.compliance-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.compliance-strip-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .compliance-strip-items {
        gap: 16px 24px;
        justify-content: flex-start;
    }
    .compliance-strip-item {
        white-space: normal;
    }
}

/* ==========================================================================
   Features Page — CSS ADDITIONS
   Add to end of features.css. All existing CSS stays as-is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tier / Plan Badges on Feature Cards
   Small pill below the card description — tells buyer which plan includes it.
   Design decision: inline pills vs. tooltips — pills win for ICP (ops/IT buyers
   who self-qualify without hovering on mobile, and scan before trial).
   -------------------------------------------------------------------------- */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* "All plans" — green/success: reassurance signal */
.tier-badge.tier-all {
    background: rgba(20, 117, 58, 0.08);
    color: var(--color-success);
    border: 1px solid rgba(20, 117, 58, 0.18);
}

/* "Growth+" — blue: aspiration signal */
.tier-badge.tier-growth {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid rgba(37, 99, 235, 0.18);
}

/* "Enterprise" — neutral: no friction, just clarity */
.tier-badge.tier-enterprise {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}

/* "Add-on available" — accent: optional, not gated */
.tier-badge.tier-addon {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid rgba(214, 53, 32, 0.18);
}

/* --------------------------------------------------------------------------
   Security Bar Wrapper
   Used inline between Connect and Build sections (not the footer bar)
   -------------------------------------------------------------------------- */
.security-bar-wrapper {
    background: var(--color-bg-subtle);
    padding-top: 0;
    padding-bottom: 80px;
    border-top: 1px solid var(--color-border-subtle);
}

.security-bar {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.security-bar svg {
    width: 18px;
    height: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

.security-bar span {
    flex: 1;
    min-width: 200px;
}

.security-bar a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.security-bar a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .security-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   Mid-section CTA (Gallery link in What You Can Build)
   Replaces the bare gallery link at the bottom of the section
   -------------------------------------------------------------------------- */
.mid-cta {
    margin-top: 48px;
    padding: 32px 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mid-cta-content h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mid-cta-content p {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .mid-cta {
        flex-direction: column;
        padding: 24px;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Feature → Security cross-link
   Inside the Secure feature-highlight-content
   -------------------------------------------------------------------------- */
.feature-security-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 18px;
    background: rgba(20, 117, 58, 0.06);
    border: 1px solid rgba(20, 117, 58, 0.15);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-success);
    text-decoration: none;
    transition: all 0.2s;
}

.feature-security-link:hover {
    background: rgba(20, 117, 58, 0.12);
    border-color: rgba(20, 117, 58, 0.25);
}

.feature-security-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   DashboardFox Demo Page Styles
   Page-specific styles for demo.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Video Section
   -------------------------------------------------------------------------- */
.video-section { 
    padding: 60px 24px 40px; 
}

.video-container { 
    max-width: 900px; 
    margin: 0 auto; 
}

.video-wrapper { 
    background: var(--color-text); 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    box-shadow: var(--shadow-lg); 
    margin-bottom: 32px; 
}

.video-embed { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
}

.video-embed iframe, 
.video-embed .video-placeholder { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: none; 
}

.video-placeholder { 
    background: linear-gradient(135deg, var(--color-text) 0%, #1a2836 100%); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: white; 
}

.video-placeholder-icon { 
    width: 80px; 
    height: 80px; 
    background: rgba(255,255,255,0.1); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 16px; 
}

.video-placeholder-icon svg { 
    width: 36px; 
    height: 36px; 
    margin-left: 4px; 
}

.video-placeholder span { 
    font-size: 18px; 
    font-weight: 600; 
    opacity: 0.9; 
}

.video-meta { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    margin-bottom: 24px; 
}

.video-meta span { 
    font-size: 14px; 
    color: var(--color-text-muted); 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.video-meta svg { 
    width: 16px; 
    height: 16px; 
}

/* --------------------------------------------------------------------------
   Other Videos (with thumbnails)
   -------------------------------------------------------------------------- */
.other-videos { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px; 
    margin-bottom: 32px; 
}

.other-video-link { 
    display: flex; 
    flex-direction: column; 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-md); 
    text-decoration: none; 
    color: var(--color-text); 
    transition: all 0.2s; 
    overflow: hidden;
}

.other-video-link:hover { 
    border-color: var(--color-primary); 
    box-shadow: var(--shadow-md); 
    transform: translateY(-2px);
}

.other-video-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .other-video-link:hover {
        transform: none;
    }
}

.other-video-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    position: relative;
}

.other-video-thumb svg {
    width: 40px;
    height: 40px;
    opacity: 0.6;
}

.other-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.other-video-info {
    padding: 16px;
}

.other-video-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.other-video-info .duration { 
    font-size: 13px; 
    color: var(--color-text-muted); 
}

.explore-more { 
    text-align: center; 
    margin-bottom: 40px;
}

.explore-more a { 
    font-size: 15px; 
    color: var(--color-primary); 
    font-weight: 600; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}

.explore-more a:hover { 
    text-decoration: underline; 
}

.explore-more a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.explore-more a svg { 
    width: 18px; 
    height: 18px; 
}

/* --------------------------------------------------------------------------
   Bridge CTA
   -------------------------------------------------------------------------- */
.bridge-cta { 
    max-width: 700px; 
    margin: 0 auto; 
    padding: 28px 32px; 
    background: var(--color-bg-subtle); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 24px; 
}

.bridge-cta p { 
    font-size: 16px; 
    color: var(--color-text-secondary); 
    margin: 0; 
}

.bridge-cta p strong { 
    color: var(--color-text); 
}

.bridge-cta .btn { 
    flex-shrink: 0; 
}

/* --------------------------------------------------------------------------
   What You'll See (Features Grid)
   -------------------------------------------------------------------------- */
.features-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
}

.feature-item { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: 28px; 
    transition: all 0.2s; 
}

.feature-item:hover { 
    border-color: var(--color-primary); 
    box-shadow: var(--shadow-md); 
}

.feature-item-icon { 
    width: 48px; 
    height: 48px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 16px; 
    color: var(--color-primary); 
}

.feature-item-icon svg { 
    width: 24px; 
    height: 24px; 
}

.feature-item h3 { 
    font-size: 17px; 
    font-weight: 700; 
    margin-bottom: 8px; 
}

.feature-item p { 
    font-size: 16px; 
    color: var(--color-text-secondary); 
    line-height: 1.5; 
    margin: 0;
}

/* --------------------------------------------------------------------------
   Live Demo Section
   -------------------------------------------------------------------------- */
.live-demo-section { 
    padding: 80px 24px; 
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); 
    color: white; 
}

.live-demo-inner { 
    max-width: var(--max-width); 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 5fr 7fr; 
    gap: 48px; 
    align-items: start; 
}

.live-demo-content h2 { 
    font-size: 30px; 
    font-weight: 800; 
    margin-bottom: 16px; 
    line-height: 1.2; 
}

.live-demo-content > p { 
    font-size: 16px; 
    opacity: 0.9; 
    line-height: 1.6; 
    margin-bottom: 28px; 
}

.live-demo-features { 
    list-style: none; 
    margin-bottom: 24px; 
}

.live-demo-features li { 
    display: flex; 
    align-items: flex-start; 
    gap: 14px; 
    padding: 12px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
}

.live-demo-features li:last-child { 
    border-bottom: none; 
}

.live-demo-features li svg { 
    width: 22px; 
    height: 22px; 
    flex-shrink: 0; 
    margin-top: 2px; 
    opacity: 0.8; 
}

.live-demo-features li div strong { 
    display: block; 
    font-size: 16px; 
    font-weight: 600; 
    margin-bottom: 2px; 
}

.live-demo-features li div span { 
    font-size: 14px; 
    opacity: 0.75; 
}

.live-demo-note { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    opacity: 0.8; 
    padding: 16px; 
    background: rgba(255,255,255,0.1); 
    border-radius: var(--radius-md); 
}

.live-demo-note svg { 
    width: 18px; 
    height: 18px; 
    flex-shrink: 0; 
}

.calendar-wrapper { 
    background: white; 
    border-radius: var(--radius-xl); 
    padding: 16px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); 
}

.calendar-placeholder { 
    min-height: 520px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-text-muted); 
    gap: 12px; 
}

.calendar-placeholder svg { 
    width: 48px; 
    height: 48px; 
    opacity: 0.5; 
}

.calendar-note {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.calendar-note svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .live-demo-inner { 
        grid-template-columns: 1fr; 
    }
    
    .features-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .other-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .features-grid { 
        grid-template-columns: 1fr; 
    }
    
    .other-videos {
        grid-template-columns: 1fr;
    }
    
    .bridge-cta { 
        flex-direction: column; 
        text-align: center; 
    }
    
    .live-demo-content h2 { 
        font-size: 28px; 
    }
}
/* --------------------------------------------------------------------------
   Self-Serve Escape Hatch
   -------------------------------------------------------------------------- */
.self-serve-cta {
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    padding: 28px 24px;
    text-align: center;
}

.self-serve-cta-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.self-serve-cta p {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 0;
}

.self-serve-cta a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.self-serve-cta a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Features Page — Builder Video Hero + Browser Chrome
   ========================================================================== */

/* --------------------------------------------------------------------------
   Builder Video Section
   -------------------------------------------------------------------------- */
.builder-video-section {
    padding: 60px 24px 0;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
}

.builder-video-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.builder-video-header {
    text-align: center;
    margin-bottom: 32px;
}

.builder-video-header h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--color-text);
}

.builder-video-header p {
    font-size: 16px;
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.builder-video-note {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 16px 0 24px;
    margin: 0;
}

.builder-video-note a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.builder-video-note a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   features.css — ADDITIONS
   Append these rules to the end of the existing features.css.
   Nothing here duplicates existing rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Section Plan Note
   Replaces the "All plans" badge pattern on individual cards.
   One statement per section header, so card grids stay clean.
   -------------------------------------------------------------------------- */
.section-plan-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin-bottom: 40px;
    background: rgba(22, 163, 74, 0.05);
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-success);
    line-height: 1.5;
}

.section-plan-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .section-plan-note {
        align-items: flex-start;
    }
}


/* --------------------------------------------------------------------------
   mt-section utility
   Margin top for feature-grid that follows a feature-highlight diagram.
   Keeps the diagram → cards rhythm consistent across all sections.
   -------------------------------------------------------------------------- */
.mt-section {
    margin-top: 48px;
}


/* --------------------------------------------------------------------------
   Scale+ tier badge
   Needed for FastCache and Server Sync in the Share section.
   Sits between tier-growth (blue) and tier-enterprise (neutral).
   -------------------------------------------------------------------------- */
.tier-badge.tier-scale {
    background: rgba(109, 40, 217, 0.07);
    color: #6d28d9;
    border: 1px solid rgba(109, 40, 217, 0.18);
}


/* --------------------------------------------------------------------------
   Feature Grid Groups
   Used in the Share section to break 12 cards into 3 named sub-groups:
   Schedule & Deliver / Publish & Embed / White-Label & Access.
   The delivery flow diagram already shows this split — this surfaces it
   in the card grid too.
   -------------------------------------------------------------------------- */
.feature-grid-groups {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.feature-grid-group {
    /* no border/background — groups are separated by whitespace + label only */
}

.feature-grid-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-border-subtle);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.feature-grid-group-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Build Category — thumbnail removal
   The decorative SVG thumbnails have been removed from the .njk.
   This rule prevents any stale layout gap if a thumb element is present.
   -------------------------------------------------------------------------- */
.build-category-thumb {
    display: none;
}