/* _content/Ayva.Marketing.Network/Components/AboutUsSection.razor.rz.scp.css */
/* ==========================================================================
   AboutUsSection.razor.css - About / Our Network Section Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Container - Entrance animation
   -------------------------------------------------------------------------- */

[b-09wz0arruq] .about-section {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
    animation-delay: 0.2s;
}

/* --------------------------------------------------------------------------
   Glass Content Panel - Desktop
   -------------------------------------------------------------------------- */

[b-09wz0arruq] .about-content-desktop {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl) var(--space-3xl);
    box-shadow: var(--glass-card-shadow);
}

/* --------------------------------------------------------------------------
   Glass Content Panel - Mobile
   -------------------------------------------------------------------------- */

[b-09wz0arruq] .about-content-mobile {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--glass-card-shadow);
}

/* --------------------------------------------------------------------------
   Section Title - Accent gradient text
   -------------------------------------------------------------------------- */

[b-09wz0arruq] .about-title {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-lg) !important;
}

/* --------------------------------------------------------------------------
   Text Readability
   -------------------------------------------------------------------------- */

[b-09wz0arruq] .about-text {
    color: var(--text-secondary) !important;
    line-height: 1.7;
}

[b-09wz0arruq] .about-text-highlight {
    color: var(--warning-text) !important;
    line-height: 1.7;
}

[b-09wz0arruq] .about-text-accent {
    color: var(--success-text) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-09wz0arruq] .about-content-desktop {
        padding: var(--space-2xl) var(--space-xl);
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-09wz0arruq] .about-section {
        opacity: 1;
        animation: none;
    }
}
/* _content/Ayva.Marketing.Network/Components/AddressChecker.razor.rz.scp.css */
.address-checker[b-gad0hs2ybp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.checker-label[b-gad0hs2ybp] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.input-row[b-gad0hs2ybp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.address-input[b-gad0hs2ybp] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 0.75rem);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1rem;
}

.address-input:focus[b-gad0hs2ybp] {
    outline: 2px solid var(--accent-color);
    outline-offset: 0;
}

.locate-btn[b-gad0hs2ybp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-md, 0.75rem);
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--accent-color);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    align-self: flex-start;
}

.locate-btn:hover[b-gad0hs2ybp] { background: rgba(59, 130, 246, 0.08); }
.locate-btn:disabled[b-gad0hs2ybp] { opacity: 0.6; cursor: wait; }

.checking-spinner[b-gad0hs2ybp] { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; }
.check-error[b-gad0hs2ybp] { display: flex; align-items: center; gap: 0.5rem; color: #ef4444; flex-wrap: wrap; font-size: 0.9rem; }
.retry-btn[b-gad0hs2ybp] { padding: 0.25rem 0.75rem; border-radius: var(--radius-sm, 0.5rem); border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.checker-hint[b-gad0hs2ybp] { color: var(--text-secondary); margin: 0; font-size: 0.9rem; }
/* _content/Ayva.Marketing.Network/Components/CallbackDialog.razor.rz.scp.css */
/* CallbackDialog v2 — animated phone graphic, topic + timing chips,
   richer success state with wait estimate. No toasts; Discord ping
   fires fire-and-forget after the success card renders. */

.callback-dialog .callback-header[b-z98rry5z9x] {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1rem);
    padding: 0 0 var(--space-sm, 0.5rem) 0;
}

/* Animated phone graphic ---------------------------------------------------- */

.callback-phone-graphic[b-z98rry5z9x] {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.phone-svg[b-z98rry5z9x] { width: 100%; height: 100%; }
.phone-shake[b-z98rry5z9x] {
    transform-origin: 32px 32px;
    animation: phoneShake-b-z98rry5z9x 2.8s ease-in-out infinite;
}
@keyframes phoneShake-b-z98rry5z9x {
    0%, 20%, 100%   { transform: rotate(0deg); }
    25%             { transform: rotate(-12deg); }
    35%             { transform: rotate(10deg); }
    45%             { transform: rotate(-8deg); }
    55%             { transform: rotate(6deg); }
    65%             { transform: rotate(-3deg); }
    72%             { transform: rotate(0deg); }
}
.phone-ring[b-z98rry5z9x] {
    fill: none;
    stroke: var(--accent-color, #3b82f6);
    stroke-width: 1.5;
    opacity: 0;
    transform-origin: 32px 32px;
    animation: phonePulse-b-z98rry5z9x 2.8s ease-out infinite;
}
.phone-ring-1[b-z98rry5z9x] { animation-delay: 0.15s; }
.phone-ring-2[b-z98rry5z9x] { animation-delay: 0.35s; }
.phone-ring-3[b-z98rry5z9x] { animation-delay: 0.55s; }
@keyframes phonePulse-b-z98rry5z9x {
    0%, 18%   { opacity: 0; transform: scale(0.7); }
    25%       { opacity: 0.7; }
    65%       { opacity: 0; transform: scale(1.15); }
    100%      { opacity: 0; transform: scale(1.15); }
}

.callback-header-text[b-z98rry5z9x] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.callback-eyebrow[b-z98rry5z9x] {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0.85;
}
.callback-header-text h2[b-z98rry5z9x] { margin: 0; font-family: var(--font-primary); font-size: 1.35rem; line-height: 1.2; color: var(--text-primary); }
.callback-header-text p[b-z98rry5z9x]  { margin: 4px 0 0 0; font-size: 0.9rem; color: var(--text-secondary, rgba(255,255,255,0.72)); line-height: 1.4; }
.callback-header-text p strong[b-z98rry5z9x] { color: var(--text-primary); font-weight: 600; }

/* Form layout --------------------------------------------------------------- */

.callback-form[b-z98rry5z9x] { padding: var(--space-md, 1rem) 0 0 0; display: flex; flex-direction: column; gap: var(--space-md, 1rem); }
.form-grid[b-z98rry5z9x] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md, 1rem); }
.form-field-half[b-z98rry5z9x] { grid-column: span 1; }
.form-field-full[b-z98rry5z9x] { grid-column: span 2; }

@media (max-width: 640px) {
    .form-grid[b-z98rry5z9x] { grid-template-columns: 1fr; }
}

.form-section[b-z98rry5z9x] { display: flex; flex-direction: column; gap: 0.55rem; }
.section-label[b-z98rry5z9x] {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.section-hint[b-z98rry5z9x] { font-size: 0.75rem; color: var(--text-secondary, rgba(255,255,255,0.6)); font-weight: 400; }

/* Topic + time chips -------------------------------------------------------- */

.chip-grid[b-z98rry5z9x] {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.chip[b-z98rry5z9x] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, rgba(255,255,255,0.72));
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.chip:hover[b-z98rry5z9x] { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.4); color: var(--text-primary); transform: translateY(-1px); }
.chip.is-selected[b-z98rry5z9x] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(6, 182, 212, 0.16));
    border-color: var(--accent-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px var(--accent-color), 0 4px 10px rgba(6, 182, 212, 0.18);
}
[b-z98rry5z9x] .chip .chip-icon { color: inherit !important; opacity: 0.9; }
.chip small[b-z98rry5z9x] { display: block; margin-left: 0.35rem; font-size: 0.7rem; opacity: 0.65; }
.chip-grid-times .chip[b-z98rry5z9x] { padding: 0.5rem 0.85rem; }

/* Trust strip --------------------------------------------------------------- */

.trust-row[b-z98rry5z9x] {
    display: flex; flex-wrap: wrap; gap: var(--space-md, 1rem); row-gap: 0.4rem;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.18);
    border-radius: var(--radius-md, 0.75rem);
}
.trust-item[b-z98rry5z9x] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    color: var(--text-secondary, rgba(255,255,255,0.78));
}
[b-z98rry5z9x] .trust-item .mud-icon-root { color: var(--accent-color) !important; }

/* Inline error band --------------------------------------------------------- */

.callback-error[b-z98rry5z9x] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md, 0.75rem);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fda4a4;
    font-size: 0.875rem;
    animation: callbackShake-b-z98rry5z9x 0.35s ease-out;
}
@keyframes callbackShake-b-z98rry5z9x {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Action row ---------------------------------------------------------------- */

.callback-actions[b-z98rry5z9x] { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm, 0.5rem); margin-top: 0.25rem; }

.callback-cancel-btn[b-z98rry5z9x],
.callback-submit-btn[b-z98rry5z9x] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 0.75rem);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.15s ease;
}
.callback-cancel-btn[b-z98rry5z9x] { background: transparent; color: var(--text-secondary); border-color: var(--glass-border, rgba(255,255,255,0.08)); }
.callback-cancel-btn:hover[b-z98rry5z9x] { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }

.callback-submit-btn[b-z98rry5z9x] { background: var(--accent-gradient); color: white; box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2); }
.callback-submit-btn:hover:not(:disabled)[b-z98rry5z9x] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(6, 182, 212, 0.35); }
.callback-submit-btn:disabled[b-z98rry5z9x] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.callback-submit-btn.is-busy[b-z98rry5z9x] { opacity: 0.85; }

/* ============================================================
   SUCCESS STATE — inline celebration (replaces snackbar)
   ============================================================ */
.callback-success[b-z98rry5z9x] {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--space-xl, 2rem) var(--space-md, 1rem) var(--space-md, 1rem);
    gap: var(--space-md, 1rem);
    animation: callbackSuccessFadeIn-b-z98rry5z9x 0.45s ease-out both;
}
@keyframes callbackSuccessFadeIn-b-z98rry5z9x {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.callback-success h3[b-z98rry5z9x] { margin: 0; font-family: var(--font-primary); font-size: 1.5rem; color: var(--text-primary); }
.callback-success p[b-z98rry5z9x]  { margin: 0; max-width: 44ch; line-height: 1.55; color: var(--text-secondary, rgba(255,255,255,0.78)); }

.callback-success-burst[b-z98rry5z9x] {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex; align-items: center; justify-content: center;
}
.burst-ring[b-z98rry5z9x] {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    opacity: 0;
    animation: callbackBurst-b-z98rry5z9x 1.6s ease-out infinite;
}
.burst-ring.delay-1[b-z98rry5z9x] { animation-delay: 0.4s; }
.burst-ring.delay-2[b-z98rry5z9x] { animation-delay: 0.8s; }
@keyframes callbackBurst-b-z98rry5z9x {
    0%   { transform: scale(0.4); opacity: 0.85; }
    80%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}
[b-z98rry5z9x] .burst-check {
    position: relative; z-index: 1;
    font-size: 64px !important;
    color: var(--success-color, #10b981) !important;
    animation: callbackCheckPop-b-z98rry5z9x 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes callbackCheckPop-b-z98rry5z9x {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.callback-success-meta[b-z98rry5z9x] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin-top: 0.25rem;
}
.meta-pill[b-z98rry5z9x] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.10);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 500;
}
[b-z98rry5z9x] .meta-pill .mud-icon-root { color: var(--accent-color) !important; }

.callback-close-btn[b-z98rry5z9x] {
    margin-top: var(--space-sm, 0.5rem);
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-md, 0.75rem);
    background: var(--accent-gradient);
    color: white;
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2);
}
.callback-close-btn:hover[b-z98rry5z9x] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(6, 182, 212, 0.35); }

@media (prefers-reduced-motion: reduce) {
    .phone-shake[b-z98rry5z9x], .phone-ring[b-z98rry5z9x],
    .burst-ring[b-z98rry5z9x],
    .callback-success[b-z98rry5z9x],
    .callback-error[b-z98rry5z9x],
    .callback-submit-btn[b-z98rry5z9x],
    .callback-close-btn[b-z98rry5z9x],
    .chip[b-z98rry5z9x] { animation: none !important; transition: none !important; }
    .callback-submit-btn:hover:not(:disabled)[b-z98rry5z9x],
    .callback-close-btn:hover[b-z98rry5z9x] { transform: none !important; }
}
/* _content/Ayva.Marketing.Network/Components/ComparisonDialog.razor.rz.scp.css */
/* ComparisonDialog.razor.css - Component-specific styles only */
/* Base styling is handled by ayva-theme.css and mudblazor-overrides.css */

/* Dialog container styles are in ayva-theme.css (global) because
   MudDialog renders outside the component tree and CSS isolation
   can't reach it. See .mud-dialog.comparison-dialog rules. */

/* ========================================
   Dialog Header
   ======================================== */
.dialog-header[b-ep5hyxydyu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xl) var(--space-3xl);
    background: linear-gradient(180deg, var(--accent-color-15), var(--accent-color-5), transparent);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

/* Subtle animated gradient shimmer in header */
.dialog-header[b-ep5hyxydyu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-color-5) 25%,
        var(--accent-color-10) 50%,
        var(--accent-color-5) 75%,
        transparent 100%
    );
    animation: shimmerSweep 8s ease-in-out infinite;
    pointer-events: none;
}

.header-content[b-ep5hyxydyu] {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    position: relative;
    z-index: var(--z-base);
}

.header-icon-wrapper[b-ep5hyxydyu] {
    position: relative;
}

/* Glow ring behind icon */
.header-icon-wrapper[b-ep5hyxydyu]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    opacity: 0.3;
    filter: blur(8px);
    animation: breathe 3s ease-in-out infinite;
}

[b-ep5hyxydyu] .header-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    color: var(--text-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-base);
    box-shadow: var(--glow-accent);
}

.header-title[b-ep5hyxydyu] {
    color: var(--text-primary) !important;
    font-weight: var(--font-bold) !important;
    margin: 0;
}

.header-subtitle[b-ep5hyxydyu] {
    color: var(--text-secondary) !important;
    margin-top: 0.125rem;
}

[b-ep5hyxydyu] .zip-badge {
    background: var(--accent-gradient) !important;
    color: var(--text-white) !important;
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    position: relative;
    z-index: var(--z-base);
    box-shadow: var(--glow-accent);
}

/* ========================================
   Content & Tabs
   ======================================== */
.comparison-content[b-ep5hyxydyu] {
    padding: 0;
    min-height: 25rem;
    overflow: auto;
}

[b-ep5hyxydyu] .comparison-tabs {
    background: transparent !important;
}

[b-ep5hyxydyu] .comparison-tabs .mud-tabs-toolbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--space-xl);
}

[b-ep5hyxydyu] .comparison-tabs .mud-tab {
    color: var(--text-secondary) !important;
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-transform: none;
    min-width: 6.25rem;
    transition: all var(--transition-smooth);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-md) var(--space-xl);
}

[b-ep5hyxydyu] .comparison-tabs .mud-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover);
}

[b-ep5hyxydyu] .comparison-tabs .mud-tab.mud-tab-active {
    color: var(--accent-color) !important;
    background: var(--accent-color-5);
}

/* Active tab icon glow */
[b-ep5hyxydyu] .comparison-tabs .mud-tab.mud-tab-active .mud-icon-root {
    filter: drop-shadow(0 0 6px var(--accent-color));
}

[b-ep5hyxydyu] .comparison-tabs .mud-tabs-slider {
    background: var(--accent-gradient) !important;
    height: 0.1875rem;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    box-shadow: var(--glow-accent);
}

[b-ep5hyxydyu] .tab-panel {
    padding: var(--space-3xl);
    min-height: 20rem;
    animation: tabFadeIn-b-ep5hyxydyu var(--transition-smooth);
}

@keyframes tabFadeIn-b-ep5hyxydyu {
    from {
        opacity: 0;
        transform: translateY(var(--space-sm));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Chart Sections (Speed & Latency)
   ======================================== */
.chart-section[b-ep5hyxydyu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    min-height: 20rem;
}

.chart-container[b-ep5hyxydyu] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    min-height: 17.5rem;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.chart-container:hover[b-ep5hyxydyu] {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md), var(--glow-accent);
    transform: translateY(var(--hover-lift));
}

.chart-label[b-ep5hyxydyu] {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
    margin-bottom: var(--space-xs);
}

.chart-sublabel[b-ep5hyxydyu] {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
    display: block;
}

.latency-chart[b-ep5hyxydyu] {
    /* Latency chart uses Height="280" so needs more room than the speed charts */
    min-height: 21.5rem;
}

/* ========================================
   Latency Legend
   ======================================== */
.latency-legend[b-ep5hyxydyu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-color);
}

.legend-item[b-ep5hyxydyu] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.legend-item:hover[b-ep5hyxydyu] {
    color: var(--text-primary);
}

.legend-dot[b-ep5hyxydyu] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

.legend-item:hover .legend-dot[b-ep5hyxydyu] {
    transform: scale(1.3);
}

.legend-dot.excellent[b-ep5hyxydyu] {
    background: var(--success-color);
    box-shadow: var(--glow-success);
}

.legend-dot.good[b-ep5hyxydyu] {
    background: var(--success-color);
    box-shadow: var(--glow-success);
}

.legend-dot.fair[b-ep5hyxydyu] {
    background: var(--warning-color);
    box-shadow: var(--glow-warning);
}

.legend-dot.poor[b-ep5hyxydyu] {
    background: var(--error-color);
    box-shadow: var(--glow-error);
}

/* ========================================
   Features Grid
   ======================================== */
.features-section[b-ep5hyxydyu] {
    padding: var(--space-sm) 0;
}

.features-grid[b-ep5hyxydyu] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-sm);
}

.features-header[b-ep5hyxydyu] {
    display: grid;
    grid-template-columns: 2fr repeat(6, 1fr);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.feature-name-header[b-ep5hyxydyu] {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.provider-header[b-ep5hyxydyu] {
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-left: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.provider-header.ayva[b-ep5hyxydyu] {
    color: var(--accent-color);
    background: var(--accent-color-10);
    font-weight: var(--font-bold);
}

.feature-row[b-ep5hyxydyu] {
    display: grid;
    grid-template-columns: 2fr repeat(6, 1fr);
    border-bottom: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.feature-row:last-child[b-ep5hyxydyu] {
    border-bottom: none;
}

.feature-row:hover[b-ep5hyxydyu] {
    background: var(--bg-hover);
}

.feature-row:hover .feature-cell.ayva[b-ep5hyxydyu] {
    background: var(--accent-color-10);
}

.feature-name[b-ep5hyxydyu] {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.feature-name span[b-ep5hyxydyu] {
    cursor: help;
    border-bottom: 1px dotted var(--text-muted);
    transition: border-color var(--transition-fast);
}

.feature-name span:hover[b-ep5hyxydyu] {
    border-color: var(--accent-color);
    color: var(--accent-light);
}

.feature-cell[b-ep5hyxydyu] {
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-subtle);
    position: relative;
    transition: background var(--transition-fast);
}

.feature-cell.ayva[b-ep5hyxydyu] {
    background: var(--accent-color-5);
}

.feature-cell.supported[b-ep5hyxydyu] {
    color: var(--success-color);
}

.feature-cell.not-supported[b-ep5hyxydyu] {
    color: var(--text-muted);
}

.feature-cell.ayva.supported[b-ep5hyxydyu] {
    color: var(--accent-color);
}

/* Checkmark glow for Ayva supported features */
.feature-cell.ayva.supported[b-ep5hyxydyu]  .mud-icon-root {
    filter: drop-shadow(0 0 4px var(--accent-color));
}

/* Success glow for other provider supported features */
.feature-cell.supported:not(.ayva)[b-ep5hyxydyu]  .mud-icon-root {
    filter: drop-shadow(0 0 3px var(--success-color-50));
}

[b-ep5hyxydyu] .check-icon {
    color: inherit !important;
    transition: transform var(--transition-fast);
}

.feature-row:hover[b-ep5hyxydyu]  .check-icon {
    transform: scale(1.15);
}

[b-ep5hyxydyu] .x-icon {
    color: inherit !important;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.feature-row:hover[b-ep5hyxydyu]  .x-icon {
    opacity: 0.6;
}

.asterisk[b-ep5hyxydyu] {
    font-size: 0.6rem;
    color: var(--warning-color);
    position: absolute;
    top: var(--space-sm);
    right: var(--space-xs);
}

.features-footnote[b-ep5hyxydyu] {
    color: var(--text-muted) !important;
    font-size: var(--text-xs);
    padding: var(--space-xl);
    text-align: center;
    font-style: italic;
}

/* ========================================
   Sticky Footer CTA
   ======================================== */
.sticky-footer[b-ep5hyxydyu] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border-color);
    padding: var(--space-2xl) var(--space-3xl);
}

.cta-content[b-ep5hyxydyu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Key differentiators highlight chips */
.cta-highlights[b-ep5hyxydyu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border-subtle);
}

.cta-highlight-chip[b-ep5hyxydyu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-full);
    color: var(--accent-light);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.cta-highlight-chip:hover[b-ep5hyxydyu] {
    background: var(--accent-color-20);
    border-color: var(--accent-color-30);
    box-shadow: var(--glow-accent);
}

[b-ep5hyxydyu] .cta-highlight-chip .mud-icon-root {
    font-size: 0.875rem !important;
    color: var(--accent-color) !important;
}

.cta-action[b-ep5hyxydyu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.cta-text[b-ep5hyxydyu] {
    flex: 1;
}

.cta-title[b-ep5hyxydyu] {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold);
    margin: 0;
}

.cta-plan[b-ep5hyxydyu] {
    color: var(--text-secondary) !important;
    margin-top: var(--space-xs);
}

.cta-plan strong[b-ep5hyxydyu] {
    color: var(--accent-color);
}

.cta-price[b-ep5hyxydyu] {
    color: var(--success-color);
    font-weight: var(--font-semibold);
}

.cta-buttons[b-ep5hyxydyu] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

[b-ep5hyxydyu] .close-btn {
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast);
    border-radius: var(--radius-lg) !important;
}

[b-ep5hyxydyu] .close-btn:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

[b-ep5hyxydyu] .signup-btn {
    background: var(--accent-gradient) !important;
    color: var(--text-white) !important;
    font-weight: var(--font-semibold);
    padding: var(--space-md) var(--space-3xl);
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-accent);
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on signup button */
[b-ep5hyxydyu] .signup-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--white-overlay-15),
        transparent
    );
    transition: left 0.6s ease;
}

[b-ep5hyxydyu] .signup-btn:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-md), var(--glow-accent-strong);
}

[b-ep5hyxydyu] .signup-btn:hover::after {
    left: 100%;
}

[b-ep5hyxydyu] .signup-btn:active {
    transform: translateY(var(--active-press));
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
    /* Dialog container responsive rules are in ayva-theme.css */

    .dialog-header[b-ep5hyxydyu] {
        padding: var(--space-xl);
    }

    .dialog-header[b-ep5hyxydyu]::before {
        display: none;
    }

    [b-ep5hyxydyu] .header-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .header-icon-wrapper[b-ep5hyxydyu]::before {
        display: none;
    }

    [b-ep5hyxydyu] .tab-panel {
        padding: var(--space-xl);
    }

    .chart-container:hover[b-ep5hyxydyu] {
        transform: none;
    }

    .features-header[b-ep5hyxydyu],
    .feature-row[b-ep5hyxydyu] {
        grid-template-columns: 1.5fr repeat(6, 1fr);
    }

    .provider-header[b-ep5hyxydyu],
    .feature-cell[b-ep5hyxydyu] {
        font-size: 0.6rem;
        padding: var(--space-sm) var(--space-xs);
    }

    .feature-name[b-ep5hyxydyu] {
        font-size: var(--text-xs);
        padding: var(--space-sm) var(--space-md);
    }

    .cta-highlights[b-ep5hyxydyu] {
        gap: var(--space-xs);
    }

    .cta-highlight-chip[b-ep5hyxydyu] {
        font-size: 0.65rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .cta-action[b-ep5hyxydyu] {
        flex-direction: column;
        text-align: center;
    }

    .cta-buttons[b-ep5hyxydyu] {
        width: 100%;
        justify-content: center;
    }

    [b-ep5hyxydyu] .signup-btn {
        flex: 1;
        max-width: 12.5rem;
    }

    .sticky-footer[b-ep5hyxydyu] {
        padding: var(--space-xl);
    }
}

@media (max-width: 480px) {
    .features-header[b-ep5hyxydyu],
    .feature-row[b-ep5hyxydyu] {
        grid-template-columns: 1.2fr repeat(6, 1fr);
    }

    .provider-header[b-ep5hyxydyu],
    .feature-cell[b-ep5hyxydyu] {
        font-size: 0.55rem;
        padding: var(--space-sm) 0.125rem;
    }

    .feature-name[b-ep5hyxydyu] {
        font-size: 0.7rem;
        padding: var(--space-sm);
    }

    .latency-legend[b-ep5hyxydyu] {
        gap: var(--space-sm);
    }

    .legend-item[b-ep5hyxydyu] {
        font-size: 0.65rem;
    }

    .cta-highlights[b-ep5hyxydyu] {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-ep5hyxydyu],
    *[b-ep5hyxydyu]::before,
    *[b-ep5hyxydyu]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for keyboard navigation */
[b-ep5hyxydyu] .mud-tab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

[b-ep5hyxydyu] .signup-btn:focus-visible,
[b-ep5hyxydyu] .close-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
/* _content/Ayva.Marketing.Network/Components/ContactSection.razor.rz.scp.css */
/* ==========================================================================
   ContactSection.razor.css - Contact / Policies Section Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Header - Glass panel with accent
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-header-card {
    background: var(--glass-panel) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-card-shadow);
}

[b-wwzaxan9pv] .contact-header-title {
    color: var(--accent-color) !important;
    font-weight: var(--font-bold) !important;
}

[b-wwzaxan9pv] .contact-header-subtitle {
    color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Content Panels - Glass cards with stagger animation
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-panel {
    /* Layered: opaque slate base + the theme glass tint on top. The
       contact section sits over an absolutely-positioned mountain SVG
       (assets/images/net/contactbg.svg). With only the translucent
       --glass-elevated tint, backdrop-filter samples the SVG's
       high-contrast silhouettes and bleeds them through the panel.
       Anchoring to an opaque slate base hides the artwork while the
       theme tint keeps the glass character. */
    background:
        linear-gradient(160deg,
            rgba(15, 23, 42, 0.92) 0%,
            rgba(30, 41, 59, 0.90) 100%),
        var(--glass-elevated) !important;
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-card-shadow);
    transition: all var(--transition-normal);
    position: relative;
    z-index: 1;
}

[b-wwzaxan9pv] .contact-panel:hover {
    box-shadow: var(--glass-card-shadow-hover);
    border-color: var(--border-color-medium) !important;
}

/* Staggered entrance */
[b-wwzaxan9pv] .contact-panel-left {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
    animation-delay: 0.1s;
}

[b-wwzaxan9pv] .contact-panel-right {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
    animation-delay: 0.25s;
}

/* --------------------------------------------------------------------------
   Panel Titles
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-panel-title {
    color: var(--success-text) !important;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-md) !important;
}

[b-wwzaxan9pv] .contact-panel-text {
    color: var(--text-secondary) !important;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Policy Buttons - Glass outlined style
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .policy-btn {
    border-color: var(--border-color-medium) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-lg) !important;
}

[b-wwzaxan9pv] .policy-btn:hover {
    border-color: var(--accent-color-30) !important;
    box-shadow: var(--glow-accent);
    background: var(--accent-color-5) !important;
    color: var(--accent-light) !important;
}

/* --------------------------------------------------------------------------
   Contact Action Buttons - Primary CTA style
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-action-btn {
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-lg) !important;
}

[b-wwzaxan9pv] .contact-action-btn:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-accent);
}

/* --------------------------------------------------------------------------
   Social / Messaging Buttons - Glass outlined
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .social-btn {
    border-color: var(--border-color-medium) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-lg) !important;
}

[b-wwzaxan9pv] .social-btn:hover {
    border-color: var(--accent-color-30) !important;
    background: var(--accent-color-5) !important;
    box-shadow: var(--glow-accent);
    color: var(--accent-light) !important;
}

/* --------------------------------------------------------------------------
   Divider Styling
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-divider {
    border-color: var(--border-color) !important;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Section Labels / Sub-headings
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-subheading {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
}

[b-wwzaxan9pv] .contact-body-text {
    color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Address Block
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .address-text {
    color: var(--text-primary) !important;
    font-weight: var(--font-medium) !important;
}

/* --------------------------------------------------------------------------
   Arrow icon
   -------------------------------------------------------------------------- */

[b-wwzaxan9pv] .contact-arrow-icon {
    color: var(--accent-color) !important;
    opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-wwzaxan9pv] .contact-panel {
        border-radius: var(--radius-xl) !important;
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-wwzaxan9pv] .contact-panel-left,
    [b-wwzaxan9pv] .contact-panel-right {
        opacity: 1;
        animation: none;
    }

    [b-wwzaxan9pv] .contact-action-btn:hover,
    [b-wwzaxan9pv] .policy-btn:hover,
    [b-wwzaxan9pv] .social-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   Ayva Enterprise Services — flagship inline showcase
   Frosted slate-glass panel with a warm amber/champagne accent. Sister-
   brand identity: differentiated from the cyan page accent without going
   loud — premium, bespoke, mission-critical.
   --------------------------------------------------------------------------
   Local tokens — keep the per-component look tunable in one place.
   ========================================================================== */

.enterprise-panel[b-wwzaxan9pv] {
    /* warm amber / champagne accent — premium, low-saturation, not violet */
    --ent-accent:        #fbbf24;
    --ent-accent-hi:     #fde68a;
    --ent-accent-deep:   #d97706;
    --ent-accent-soft:   rgba(251, 191, 36, 0.18);
    --ent-accent-ring:   rgba(251, 191, 36, 0.42);
    --ent-accent-glow:   rgba(217, 119, 6, 0.28);

    /* slate base — deep, neutral, glass-friendly */
    --ent-base:          rgba(15, 23, 42, 0.72);
    --ent-base-low:      rgba(15, 23, 42, 0.45);
    --ent-edge:          rgba(148, 163, 184, 0.18);
    --ent-edge-strong:   rgba(148, 163, 184, 0.28);

    /* per-service tints — keep the three offerings visually distinct */
    --ent-space:         #38bdf8;   /* sky — space / uplink */
    --ent-space-deep:    #0284c7;
    --ent-infosec:       #fbbf24;   /* amber — security / shield */
    --ent-infosec-deep:  #d97706;
    --ent-infra:         #2dd4bf;   /* teal — infrastructure / steel */
    --ent-infra-deep:    #0d9488;

    position: relative;
    margin: var(--space-lg, 1.5rem) 0;
    padding: var(--space-xl, 2rem) var(--space-xl, 2rem);
    border-radius: var(--radius-2xl, 1.5rem);
    /* layered frosted glass — slate base with a soft inner highlight */
    background:
        linear-gradient(155deg,
            rgba(15, 23, 42, 0.78) 0%,
            rgba(30, 41, 59, 0.70) 50%,
            rgba(15, 23, 42, 0.82) 100%);
    border: 1px solid var(--ent-edge-strong);
    box-shadow:
        /* warm rim — subtle amber halo */
        0 0 0 1px var(--ent-accent-soft) inset,
        /* soft top highlight */
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        /* lift */
        0 24px 48px rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.25),
        /* warm bloom — replaces the violet ambient */
        0 36px 96px var(--ent-accent-glow);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    overflow: hidden;
    isolation: isolate;
    /* parent contact MudContainer sets text-align center via inline style;
       reset here so headers + service cards align cleanly to the left. */
    text-align: left;
}

/* warm glow — soft amber wash + a quiet sky ray on the opposite corner */
.enterprise-panel-glow[b-wwzaxan9pv] {
    position: absolute;
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 32% at 12% 18%, rgba(251, 191, 36, 0.20), transparent 70%),
        radial-gradient(34% 28% at 88% 86%, rgba(56, 189, 248, 0.14), transparent 72%),
        radial-gradient(30% 25% at 70% 18%, rgba(253, 230, 138, 0.12), transparent 70%);
    filter: blur(10px);
    animation: enterpriseGlowDrift-b-wwzaxan9pv 18s ease-in-out infinite alternate;
}

@keyframes enterpriseGlowDrift-b-wwzaxan9pv {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.95; }
    50%  { transform: translate3d(-1.5%, 1.2%, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(1.8%, -0.8%, 0) scale(1.02); opacity: 0.92; }
}

/* very subtle grain — adds tactile depth without noise */
.enterprise-panel-grain[b-wwzaxan9pv] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 3px 3px;
}

/* top sheen — micro highlight on the upper edge for the glass feel */
.enterprise-panel[b-wwzaxan9pv]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 28%);
}

/* every direct child sits above the glow / grain layers */
.enterprise-panel > *[b-wwzaxan9pv] {
    position: relative;
    z-index: 1;
}

/* ----- Header -------------------------------------------------------------- */

/* Header laid out as a 2-col grid so the badge can span the eyebrow +
   title rows (visually anchoring the heading), with the subtitle living
   in its own wider row underneath both. flex with align-items: center
   left the eyebrow orphaned at the top edge while the badge sat
   centered against the whole stack — the grid gives every element a
   defined slot. */
.enterprise-panel-header[b-wwzaxan9pv] {
    display: grid;
    grid-template-columns: auto 1fr;
    /* Subtitle lives in column 2 only — same left edge as eyebrow + title.
       Earlier "subtitle subtitle" spanned both columns and pushed the
       subtitle 76px (badge width + column-gap) to the left of the
       title, breaking the indentation. */
    grid-template-areas:
        "badge eyebrow"
        "badge title"
        ".     subtitle";
    column-gap: var(--space-md, 1rem);
    row-gap: 0.35rem;
    align-items: center;
    margin-bottom: var(--space-lg, 1.5rem);
    text-align: left;
}

.enterprise-panel-badge[b-wwzaxan9pv] {
    grid-area: badge;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg, 1rem);
    /* metallic warm gradient — amber → deep gold, with an inner highlight */
    background:
        linear-gradient(155deg,
            #fde68a 0%,
            var(--ent-accent) 45%,
            var(--ent-accent-deep) 100%);
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.55),
        0 10px 26px var(--ent-accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -8px 16px rgba(120, 53, 15, 0.22);
    flex-shrink: 0;
    animation: enterpriseBadgePulse-b-wwzaxan9pv 5s ease-in-out infinite;
}

@keyframes enterpriseBadgePulse-b-wwzaxan9pv {
    0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 10px 26px var(--ent-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 16px rgba(120, 53, 15, 0.22); }
    50%      { box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.75), 0 14px 34px rgba(245, 158, 11, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -8px 16px rgba(120, 53, 15, 0.18); }
}

.enterprise-panel-badge-icon[b-wwzaxan9pv] {
    color: #422006 !important;       /* deep cocoa — readable on warm amber */
    font-size: 34px !important;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

.enterprise-panel-eyebrow[b-wwzaxan9pv] {
    grid-area: eyebrow;
    align-self: end;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ent-accent);
    opacity: 0.95;
}

.enterprise-panel-title[b-wwzaxan9pv] {
    grid-area: title;
    align-self: start;
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    /* warm cream → amber gradient — premium, distinct from cyan page brand */
    background: linear-gradient(135deg, #ffffff 0%, #fde68a 60%, var(--ent-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.enterprise-panel-subtitle[b-wwzaxan9pv] {
    grid-area: subtitle;
    margin: var(--space-sm, 0.5rem) 0 0 0;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary, rgba(255, 255, 255, 0.82));
    /* No max-width — earlier 68ch capped the line at ~590px while the
       grid column-2 is ~917px, leaving an awkward chunk of empty space
       on the right. Let the subtitle fill the grid cell so its right
       edge matches the eyebrow/title above and the services grid
       below. The grid column itself constrains the line length to a
       readable range at typical viewport widths. */
}

.enterprise-panel-subtitle strong[b-wwzaxan9pv] {
    color: var(--ent-accent-hi);
    font-weight: 600;
}

/* ----- Services Grid ------------------------------------------------------- */

.enterprise-services-grid[b-wwzaxan9pv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md, 1rem);
    margin-bottom: var(--space-lg, 1.5rem);
}

.enterprise-service[b-wwzaxan9pv] {
    --svc-tint:      var(--ent-accent);
    --svc-tint-deep: var(--ent-accent-deep);

    position: relative;
    padding: var(--space-md, 1rem) var(--space-md, 1rem) var(--space-lg, 1.5rem);
    border-radius: var(--radius-lg, 1rem);
    /* frosted glass card on slate base */
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(15, 23, 42, 0.35) 60%);
    border: 1px solid var(--ent-edge);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 6px 18px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
    overflow: hidden;
}

/* tint accent bar — runs along the top of each service card */
.enterprise-service[b-wwzaxan9pv]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--svc-tint) 30%, var(--svc-tint-deep) 70%, transparent);
    opacity: 0.7;
    transition: opacity 0.25s ease, height 0.25s ease;
}

.enterprise-service:hover[b-wwzaxan9pv] {
    transform: translateY(-3px);
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(15, 23, 42, 0.32) 60%);
    border-color: color-mix(in srgb, var(--svc-tint) 40%, transparent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px color-mix(in srgb, var(--svc-tint) 25%, transparent),
        0 16px 32px rgba(0, 0, 0, 0.32),
        0 0 24px color-mix(in srgb, var(--svc-tint) 18%, transparent);
}

.enterprise-service:hover[b-wwzaxan9pv]::before { opacity: 1; height: 3px; }

.enterprise-service h4[b-wwzaxan9pv] {
    margin: var(--space-sm, 0.5rem) 0 0.35rem 0;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.enterprise-service p[b-wwzaxan9pv] {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary, rgba(255, 255, 255, 0.74));
}

.enterprise-service-icon[b-wwzaxan9pv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 0.75rem);
    background: linear-gradient(155deg, var(--svc-tint) 0%, var(--svc-tint-deep) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -6px 12px rgba(0, 0, 0, 0.18),
        0 6px 14px color-mix(in srgb, var(--svc-tint-deep) 32%, transparent);
}

.enterprise-service-icon .mud-icon-root[b-wwzaxan9pv] {
    font-size: 24px !important;
    color: white !important;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}

/* Per-service tinted variants — drive the icon, top-bar, and hover glow */
.enterprise-service-space[b-wwzaxan9pv]    { --svc-tint: var(--ent-space);   --svc-tint-deep: var(--ent-space-deep); }
.enterprise-service-infosec[b-wwzaxan9pv]  { --svc-tint: var(--ent-infosec); --svc-tint-deep: var(--ent-infosec-deep); }
.enterprise-service-infra[b-wwzaxan9pv]    { --svc-tint: var(--ent-infra);   --svc-tint-deep: var(--ent-infra-deep); }

/* ----- Footer (stats + CTA) ------------------------------------------------ */

.enterprise-panel-footer[b-wwzaxan9pv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 1rem);
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--ent-edge);
}

.enterprise-stats[b-wwzaxan9pv] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-primary);
    font-size: 0.825rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.enterprise-stat[b-wwzaxan9pv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.enterprise-stat .mud-icon-root[b-wwzaxan9pv] {
    color: var(--ent-accent) !important;
    font-size: 18px !important;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.32));
}

.enterprise-stat-dot[b-wwzaxan9pv] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ent-accent);
    opacity: 0.6;
    display: inline-block;
}

.enterprise-cta-btn[b-wwzaxan9pv] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-md, 0.75rem);
    /* warm metallic gradient — clearly premium, clearly not violet */
    background: linear-gradient(135deg, var(--ent-accent-hi) 0%, var(--ent-accent) 45%, var(--ent-accent-deep) 100%);
    color: #422006 !important;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -8px 12px rgba(120, 53, 15, 0.2) inset,
        0 10px 24px var(--ent-accent-glow);
    transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.25s ease,
        filter 0.25s ease;
    white-space: nowrap;
}

.enterprise-cta-btn:hover[b-wwzaxan9pv] {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 0 0 1px rgba(253, 230, 138, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -8px 12px rgba(120, 53, 15, 0.22) inset,
        0 16px 34px rgba(245, 158, 11, 0.42);
}

.enterprise-cta-btn .mud-icon-root[b-wwzaxan9pv] {
    color: #422006 !important;
    font-size: 18px !important;
    transition: transform 0.22s ease;
}

.enterprise-cta-btn:hover .mud-icon-root[b-wwzaxan9pv] {
    transform: translate(2px, -2px);
}

/* ----- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
    .enterprise-services-grid[b-wwzaxan9pv] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .enterprise-panel[b-wwzaxan9pv] { padding: var(--space-lg, 1.5rem) var(--space-md, 1rem); }
    .enterprise-panel-header[b-wwzaxan9pv] { flex-direction: column; align-items: flex-start; }
    .enterprise-panel-title[b-wwzaxan9pv] { font-size: 1.45rem; }
    .enterprise-services-grid[b-wwzaxan9pv] { grid-template-columns: 1fr; }
    .enterprise-panel-footer[b-wwzaxan9pv] {
        flex-direction: column;
        align-items: stretch;
    }
    .enterprise-cta-btn[b-wwzaxan9pv] { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .enterprise-panel-glow[b-wwzaxan9pv],
    .enterprise-panel-badge[b-wwzaxan9pv],
    .enterprise-service[b-wwzaxan9pv],
    .enterprise-cta-btn[b-wwzaxan9pv],
    .enterprise-cta-btn .mud-icon-root[b-wwzaxan9pv] {
        animation: none !important;
        transition: none !important;
    }
    .enterprise-service:hover[b-wwzaxan9pv],
    .enterprise-cta-btn:hover[b-wwzaxan9pv] { transform: none !important; }
}
/* _content/Ayva.Marketing.Network/Components/CoverageDialog.razor.rz.scp.css */
.coverage-dialog-header[b-4mt25ryn0m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.header-left[b-4mt25ryn0m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.header-icon[b-4mt25ryn0m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 0.75rem);
    background: var(--accent-gradient);
    color: white;
    flex-shrink: 0;
}

.header-text[b-4mt25ryn0m] { display: flex; flex-direction: column; min-width: 0; }
.header-text h2[b-4mt25ryn0m] { margin: 0; font-family: var(--font-primary); font-size: 1.15rem; line-height: 1.2; color: var(--text-primary); }
.header-text p[b-4mt25ryn0m] { margin: 0; font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.7)); }

.header-actions[b-4mt25ryn0m] { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

.coverage-dialog-body[b-4mt25ryn0m] {
    padding: 0.5rem 0;
}

[b-4mt25ryn0m] .coverage-dialog.mud-dialog {
    max-width: 1280px;
    width: 96vw;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .header-text p[b-4mt25ryn0m] { display: none; }
    [b-4mt25ryn0m] .coverage-dialog.mud-dialog { width: 100vw; max-width: 100vw; }
}
/* _content/Ayva.Marketing.Network/Components/CoverageExperience.razor.rz.scp.css */
.coverage-experience[b-ehqp3lr2c6] {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: var(--space-lg, 1.5rem);
    align-items: start;
    width: 100%;
}

.coverage-rail[b-ehqp3lr2c6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1rem);
    padding: var(--space-lg, 1.5rem);
    border-radius: var(--radius-lg, 1rem);
    background: var(--glass-bg, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    min-width: 0;
    box-sizing: border-box;
}

.coverage-canvas[b-ehqp3lr2c6] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: clamp(480px, 65vh, 720px);
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: var(--glass-bg, rgba(15, 23, 42, 0.4));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.coverage-canvas > *[b-ehqp3lr2c6] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1024px) {
    .coverage-experience[b-ehqp3lr2c6] {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1rem);
    }

    .coverage-canvas[b-ehqp3lr2c6] {
        height: clamp(420px, 55vh, 600px);
    }
}

@media (max-width: 640px) {
    .coverage-rail[b-ehqp3lr2c6] {
        padding: var(--space-md, 1rem);
    }

    .coverage-canvas[b-ehqp3lr2c6] {
        height: clamp(360px, 50vh, 480px);
    }
}
/* _content/Ayva.Marketing.Network/Components/CoverageMapCanvas.razor.rz.scp.css */
/* CoverageMapCanvas.razor.css — compositional layer over MarketingCoverageMap
   with glass-card chrome (picker + legend) and a centred fallback state. */

.map-canvas[b-wyrvgcu3nn] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    background: var(--bg-secondary, rgba(15, 23, 42, 0.4));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

/* ========================================
   Fallback state — no maps available
   ======================================== */
.map-fallback[b-wyrvgcu3nn] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md, 0.75rem);
    padding: var(--space-2xl, 2rem);
    text-align: center;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    background: var(--glass-panel, rgba(15, 23, 42, 0.5));
    backdrop-filter: var(--glass-blur, blur(16px));
    -webkit-backdrop-filter: var(--glass-blur, blur(16px));
}

.map-fallback[b-wyrvgcu3nn]  .mud-icon-root {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

.map-fallback p[b-wyrvgcu3nn] {
    margin: 0;
    font-family: var(--font-primary, inherit);
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    max-width: 22rem;
}

/* ========================================
   Floating chrome — picker (top) + legend (bottom)
   ======================================== */
.canvas-chrome[b-wyrvgcu3nn] {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
}

.canvas-picker[b-wyrvgcu3nn] {
    top: var(--space-md, 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 2rem);
}

/* ========================================
   Responsive — collapse chrome on small screens
   ======================================== */
@media (max-width: 768px) {
    .map-canvas[b-wyrvgcu3nn] {
        min-height: 280px;
        border-radius: var(--radius-md, 0.75rem);
    }

    .canvas-picker[b-wyrvgcu3nn] {
        top: var(--space-sm, 0.5rem);
    }
}
/* _content/Ayva.Marketing.Network/Components/CoverageMapPicker.razor.rz.scp.css */
.map-picker[b-t9vuf8cpw9] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-md, 0.75rem);
    background: var(--glass-bg, rgba(15, 23, 42, 0.6));
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}
.map-option[b-t9vuf8cpw9] {
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius-md, 0.75rem) - 4px);
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast, all 0.15s ease);
}
.map-option:hover[b-t9vuf8cpw9] { color: var(--text-primary, white); }
.map-option.active[b-t9vuf8cpw9] { background: var(--accent-gradient); color: white; }
/* _content/Ayva.Marketing.Network/Components/CoverageVerdictCard.razor.rz.scp.css */
.verdict-card[b-ar1khawpgb] { display: flex; flex-direction: column; gap: var(--space-md, 1rem); padding: var(--space-lg, 1.5rem); border-radius: var(--radius-lg, 1rem); background: var(--glass-bg, rgba(15, 23, 42, 0.6)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08)); transition: var(--transition-medium, all 0.3s ease); }
.verdict-card.verdict-covered[b-ar1khawpgb] { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color), 0 12px 32px rgba(6, 182, 212, 0.15); }
.verdict-card.verdict-survey[b-ar1khawpgb]  { border-color: #f59e0b; }
.verdict-card.verdict-outside[b-ar1khawpgb] { border-color: #ef4444; }
.verdict-icon[b-ar1khawpgb] { font-size: 2rem; opacity: 0.9; }
.verdict-headline[b-ar1khawpgb] { font-family: var(--font-primary); font-size: 1.5rem; margin: 0; }
.verdict-subline[b-ar1khawpgb] { color: var(--text-secondary, rgba(255,255,255,0.7)); margin: 0; line-height: 1.5; }
.verdict-actions[b-ar1khawpgb] { display: flex; flex-direction: column; gap: var(--space-sm, 0.5rem); margin-top: var(--space-sm, 0.5rem); }
.verdict-action[b-ar1khawpgb] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-md, 0.75rem); font-family: var(--font-primary); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: var(--transition-fast, all 0.15s ease); }
.verdict-action.variant-primary[b-ar1khawpgb] { background: var(--accent-gradient); color: white; }
.verdict-action.variant-primary:hover[b-ar1khawpgb] { background: var(--accent-gradient-hover); transform: translateY(-1px); }
.verdict-action.variant-secondary[b-ar1khawpgb] { background: transparent; color: var(--accent-color); border-color: var(--accent-color); }
.verdict-action.variant-secondary:hover[b-ar1khawpgb] { background: rgba(59, 130, 246, 0.08); }
.verdict-action.variant-tertiary[b-ar1khawpgb] { background: transparent; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .verdict-card[b-ar1khawpgb], .verdict-action[b-ar1khawpgb] { transition: none; } .verdict-action:hover[b-ar1khawpgb] { transform: none; } }
/* _content/Ayva.Marketing.Network/Components/FeedbackDialog.razor.rz.scp.css */
/* FeedbackDialog v2 — chat-bubble graphic, type + mood chips,
   contextual copy that changes based on type, richer success state. */

.feedback-dialog .feedback-header[b-qcka98eu0g] {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1rem);
    padding: 0 0 var(--space-sm, 0.5rem) 0;
}

/* Animated chat-bubble graphic --------------------------------------------- */

.feedback-graphic[b-qcka98eu0g] { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.feedback-svg[b-qcka98eu0g] { width: 100%; height: 100%; }
.bubble-float[b-qcka98eu0g] {
    transform-origin: 32px 32px;
    animation: bubbleFloat-b-qcka98eu0g 4s ease-in-out infinite;
}
@keyframes bubbleFloat-b-qcka98eu0g {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.bubble-dot[b-qcka98eu0g] {
    opacity: 0.5;
    transform-origin: center;
    animation: bubbleDot-b-qcka98eu0g 1.4s ease-in-out infinite;
}
.bubble-dot-1[b-qcka98eu0g] { animation-delay: 0s; }
.bubble-dot-2[b-qcka98eu0g] { animation-delay: 0.18s; }
.bubble-dot-3[b-qcka98eu0g] { animation-delay: 0.36s; }
@keyframes bubbleDot-b-qcka98eu0g {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
}

.feedback-header-text[b-qcka98eu0g] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feedback-eyebrow[b-qcka98eu0g] {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ec4899;
    opacity: 0.9;
}
.feedback-header-text h2[b-qcka98eu0g] { margin: 0; font-family: var(--font-primary); font-size: 1.35rem; line-height: 1.2; color: var(--text-primary); }
.feedback-header-text p[b-qcka98eu0g]  { margin: 4px 0 0 0; font-size: 0.9rem; color: var(--text-secondary, rgba(255,255,255,0.72)); line-height: 1.4; }

/* Form layout -------------------------------------------------------------- */

.feedback-form[b-qcka98eu0g] { padding: var(--space-md, 1rem) 0 0 0; display: flex; flex-direction: column; gap: var(--space-md, 1rem); }

.form-section[b-qcka98eu0g] { display: flex; flex-direction: column; gap: 0.55rem; }
.section-label[b-qcka98eu0g] {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.section-hint[b-qcka98eu0g] { font-size: 0.75rem; color: var(--text-secondary, rgba(255,255,255,0.6)); font-weight: 400; }

/* Type chips --------------------------------------------------------------- */

.chip-grid[b-qcka98eu0g] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip[b-qcka98eu0g] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, rgba(255,255,255,0.72));
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.chip:hover[b-qcka98eu0g] { background: rgba(236, 72, 153, 0.08); border-color: rgba(236, 72, 153, 0.4); color: var(--text-primary); transform: translateY(-1px); }
.chip.is-selected[b-qcka98eu0g] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(139, 92, 246, 0.18));
    border-color: #ec4899;
    color: var(--text-primary);
    box-shadow: 0 0 0 1px #ec4899, 0 4px 10px rgba(236, 72, 153, 0.18);
}
[b-qcka98eu0g] .chip .chip-icon { color: inherit !important; opacity: 0.9; }

/* Mood row ----------------------------------------------------------------- */

.mood-row[b-qcka98eu0g] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.mood-chip[b-qcka98eu0g] {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0.6rem 0.4rem;
    border-radius: var(--radius-md, 0.75rem);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, rgba(255,255,255,0.72));
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mood-chip:hover[b-qcka98eu0g] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.mood-chip.is-selected[b-qcka98eu0g] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(139, 92, 246, 0.14));
    border-color: #ec4899;
    color: var(--text-primary);
    box-shadow: 0 0 0 1px #ec4899, 0 4px 10px rgba(236, 72, 153, 0.16);
}
.mood-emoji[b-qcka98eu0g] { font-size: 1.4rem; line-height: 1; }
.mood-label[b-qcka98eu0g] { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }

@media (max-width: 480px) {
    .mood-row[b-qcka98eu0g] { grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
    .mood-emoji[b-qcka98eu0g] { font-size: 1.2rem; }
    .mood-label[b-qcka98eu0g] { font-size: 0.62rem; }
}

/* Trust strip -------------------------------------------------------------- */

.trust-row[b-qcka98eu0g] {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
    background: rgba(236, 72, 153, 0.05);
    border: 1px solid rgba(236, 72, 153, 0.18);
    border-radius: var(--radius-md, 0.75rem);
}
.trust-item[b-qcka98eu0g] { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-primary); font-size: 0.78rem; color: var(--text-secondary, rgba(255,255,255,0.78)); }
[b-qcka98eu0g] .trust-item .mud-icon-root { color: #ec4899 !important; }

/* Inline error band -------------------------------------------------------- */

.feedback-error[b-qcka98eu0g] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md, 0.75rem);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fda4a4;
    font-size: 0.875rem;
    animation: feedbackShake-b-qcka98eu0g 0.35s ease-out;
}
@keyframes feedbackShake-b-qcka98eu0g {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Action row --------------------------------------------------------------- */

.feedback-actions[b-qcka98eu0g] { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm, 0.5rem); margin-top: 0.25rem; }
.feedback-cancel-btn[b-qcka98eu0g],
.feedback-submit-btn[b-qcka98eu0g] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 0.75rem);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.15s ease;
}
.feedback-cancel-btn[b-qcka98eu0g] { background: transparent; color: var(--text-secondary); border-color: var(--glass-border, rgba(255,255,255,0.08)); }
.feedback-cancel-btn:hover[b-qcka98eu0g] { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.feedback-submit-btn[b-qcka98eu0g] { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: white; box-shadow: 0 4px 14px rgba(236, 72, 153, 0.22); }
.feedback-submit-btn:hover:not(:disabled)[b-qcka98eu0g] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(236, 72, 153, 0.34); }
.feedback-submit-btn:disabled[b-qcka98eu0g] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.feedback-submit-btn.is-busy[b-qcka98eu0g] { opacity: 0.85; }

/* ============================================================
   SUCCESS STATE — inline thank-you with mark burst
   ============================================================ */
.feedback-success[b-qcka98eu0g] {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--space-xl, 2rem) var(--space-md, 1rem) var(--space-md, 1rem);
    gap: var(--space-md, 1rem);
    animation: feedbackSuccessFadeIn-b-qcka98eu0g 0.45s ease-out both;
}
@keyframes feedbackSuccessFadeIn-b-qcka98eu0g {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feedback-success h3[b-qcka98eu0g] { margin: 0; font-family: var(--font-primary); font-size: 1.5rem; color: var(--text-primary); }
.feedback-success p[b-qcka98eu0g]  { margin: 0; max-width: 46ch; line-height: 1.55; color: var(--text-secondary, rgba(255,255,255,0.78)); }

.feedback-success-burst[b-qcka98eu0g] {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex; align-items: center; justify-content: center;
}
.burst-ring[b-qcka98eu0g] {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid #ec4899;
    opacity: 0;
    animation: feedbackBurst-b-qcka98eu0g 1.6s ease-out infinite;
}
.burst-ring.delay-1[b-qcka98eu0g] { animation-delay: 0.4s; }
.burst-ring.delay-2[b-qcka98eu0g] { animation-delay: 0.8s; }
@keyframes feedbackBurst-b-qcka98eu0g {
    0%   { transform: scale(0.4); opacity: 0.85; }
    80%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}
[b-qcka98eu0g] .burst-mark {
    position: relative; z-index: 1;
    font-size: 64px !important;
    color: #ec4899 !important;
    animation: feedbackMarkBeat-b-qcka98eu0g 1.2s ease-in-out infinite;
}
@keyframes feedbackMarkBeat-b-qcka98eu0g {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.15); }
    50%      { transform: scale(0.96); }
    75%      { transform: scale(1.08); }
}

.feedback-success-meta[b-qcka98eu0g] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin-top: 0.25rem;
}
.meta-pill[b-qcka98eu0g] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(236, 72, 153, 0.10);
    border: 1px solid rgba(236, 72, 153, 0.35);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 500;
}
[b-qcka98eu0g] .meta-pill .mud-icon-root { color: #ec4899 !important; }

.feedback-close-btn[b-qcka98eu0g] {
    margin-top: var(--space-sm, 0.5rem);
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-md, 0.75rem);
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.22);
}
.feedback-close-btn:hover[b-qcka98eu0g] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(236, 72, 153, 0.34); }

@media (prefers-reduced-motion: reduce) {
    .bubble-float[b-qcka98eu0g], .bubble-dot[b-qcka98eu0g],
    .burst-ring[b-qcka98eu0g],
    .feedback-success[b-qcka98eu0g],
    .feedback-error[b-qcka98eu0g],
    .feedback-submit-btn[b-qcka98eu0g],
    .feedback-close-btn[b-qcka98eu0g],
    .chip[b-qcka98eu0g], .mood-chip[b-qcka98eu0g],
    [b-qcka98eu0g] .burst-mark { animation: none !important; transition: none !important; }
    .feedback-submit-btn:hover:not(:disabled)[b-qcka98eu0g],
    .feedback-close-btn:hover[b-qcka98eu0g] { transform: none !important; }
}
/* _content/Ayva.Marketing.Network/Components/GoogleReviews.razor.rz.scp.css */
/* ==========================================================================
   GoogleReviews.razor.css - Reviews Grid Layout
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

.reviews-container[b-3qh6k6gjq2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* --------------------------------------------------------------------------
   Transparency Banner
   -------------------------------------------------------------------------- */

.reviews-transparency[b-3qh6k6gjq2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

[b-3qh6k6gjq2] .reviews-transparency-icon {
    color: var(--info-color) !important;
    font-size: var(--text-lg) !important;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Reviews Grid
   -------------------------------------------------------------------------- */

.reviews-grid[b-3qh6k6gjq2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Review Card - High contrast on dark section
   -------------------------------------------------------------------------- */

.review-card-v2[b-3qh6k6gjq2] {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    box-shadow: var(--glass-card-shadow);
    transition: border-color var(--transition-normal),
                box-shadow var(--transition-normal),
                transform var(--transition-normal);
}

.review-card-v2:hover[b-3qh6k6gjq2] {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--glass-card-shadow-hover);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Review Header (avatar + name + rating + date)
   -------------------------------------------------------------------------- */

.review-header[b-3qh6k6gjq2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.review-author[b-3qh6k6gjq2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.review-author-name[b-3qh6k6gjq2] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-date[b-3qh6k6gjq2] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Review Body Text - MAXIMUM CONTRAST
   -------------------------------------------------------------------------- */

.review-body[b-3qh6k6gjq2] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.7;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
   Google Attribution
   -------------------------------------------------------------------------- */

.review-attribution[b-3qh6k6gjq2] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[b-3qh6k6gjq2] .review-google-icon {
    color: var(--text-muted) !important;
    font-size: var(--text-sm) !important;
}

/* --------------------------------------------------------------------------
   Star Rating
   -------------------------------------------------------------------------- */

[b-3qh6k6gjq2] .review-card-v2 .mud-rating .mud-rating-item .mud-svg-icon {
    color: var(--warning-color) !important;
}

/* --------------------------------------------------------------------------
   CTA Link to Google - Prominent
   -------------------------------------------------------------------------- */

.reviews-google-link[b-3qh6k6gjq2] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-lg);
}

.reviews-google-btn[b-3qh6k6gjq2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-3xl);
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm), var(--glow-accent);
}

.reviews-google-btn:hover[b-3qh6k6gjq2] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--glow-accent);
    color: var(--text-primary);
}

[b-3qh6k6gjq2] .reviews-external-icon {
    font-size: var(--text-sm) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .reviews-grid[b-3qh6k6gjq2] {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--space-lg);
    }
}

@media (max-width: 640px) {
    .reviews-grid[b-3qh6k6gjq2] {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .review-card-v2[b-3qh6k6gjq2] {
        padding: var(--space-lg);
    }

    .reviews-transparency[b-3qh6k6gjq2] {
        font-size: var(--text-xs);
        padding: var(--space-sm) var(--space-md);
    }

    .reviews-google-btn[b-3qh6k6gjq2] {
        padding: var(--space-md) var(--space-2xl);
        font-size: var(--text-sm);
    }
}
/* _content/Ayva.Marketing.Network/Components/LandingSection.razor.rz.scp.css */
/* ==========================================================================
   LandingSection.razor.css - Hero Section Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Background Video - Force full viewport coverage
   video.js adds vjs-fluid class that sets width:100% from parent,
   overriding the inline 100vw. We force viewport coverage here.
   -------------------------------------------------------------------------- */

[b-4qn60vkclw] #backgroundvideo1,
[b-4qn60vkclw] #backgroundvideo2 {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    max-width: none !important;
    object-fit: cover;
    left: 0 !important;
    top: 0 !important;
}

/* --------------------------------------------------------------------------
   Feature Cards - Glassmorphism treatment
   -------------------------------------------------------------------------- */

[b-4qn60vkclw] .feature-card {
    background: var(--glass-panel) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-card-shadow);
    transition: all var(--transition-normal);
}

[b-4qn60vkclw] .feature-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--glass-card-shadow-hover);
    border-color: var(--border-color-medium);
    background: var(--glass-panel-hover) !important;
}

[b-4qn60vkclw] .feature-card .mud-typography-h5 {
    color: var(--text-primary) !important;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-xs);
}

[b-4qn60vkclw] .feature-card .mud-typography-body1 {
    color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Feature Card Stagger Entrance Animation
   -------------------------------------------------------------------------- */

[b-4qn60vkclw] .feature-card-0 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.6s;
}

[b-4qn60vkclw] .feature-card-1 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.72s;
}

[b-4qn60vkclw] .feature-card-2 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.84s;
}

[b-4qn60vkclw] .feature-card-3 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.96s;
}

/* --------------------------------------------------------------------------
   CTA Button Group - Glass backdrop
   -------------------------------------------------------------------------- */

[b-4qn60vkclw] .cta-button-group {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg) var(--space-xl);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Scroll Indicator
   -------------------------------------------------------------------------- */

.scroll-indicator[b-4qn60vkclw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 100%;
    gap: var(--space-xs);
    padding-bottom: var(--space-md);
    animation: scrollBounce-b-4qn60vkclw 2s ease-in-out infinite;
}

[b-4qn60vkclw] .scroll-indicator-text {
    color: var(--text-primary) !important;
    font-size: var(--text-xs) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.05em;
}

[b-4qn60vkclw] .scroll-indicator-icon {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

@keyframes scrollBounce-b-4qn60vkclw {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* --------------------------------------------------------------------------
   Responsive - Cards stack on smaller screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-4qn60vkclw] .feature-card {
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 640px) {
    [b-4qn60vkclw] .cta-button-group {
        padding: var(--space-md);
        border-radius: var(--radius-xl);
    }

    .scroll-indicator[b-4qn60vkclw] {
        padding-bottom: var(--space-sm);
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-4qn60vkclw] .feature-card-0,
    [b-4qn60vkclw] .feature-card-1,
    [b-4qn60vkclw] .feature-card-2,
    [b-4qn60vkclw] .feature-card-3 {
        opacity: 1;
        animation: none;
    }

    [b-4qn60vkclw] .feature-card:hover {
        transform: none;
    }

    .scroll-indicator[b-4qn60vkclw] {
        animation: none;
    }
}
/* _content/Ayva.Marketing.Network/Components/MarketingCoverageMap.razor.rz.scp.css */
.marketing-coverage-map[b-49buustert] {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: var(--bg-secondary, #0b1220);
}
/* _content/Ayva.Marketing.Network/Components/NetHeader.razor.rz.scp.css */
.mud-markdown-body p[b-nj8ffwpzpf] {
    margin-bottom: unset !important;
}

[b-nj8ffwpzpf] .site-notice {
    padding: 0.5rem 1rem !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    border-left-width: 4px !important;
}

[b-nj8ffwpzpf] .site-notice + .site-notice {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Ensure close/action icons have good contrast on colored backgrounds */
[b-nj8ffwpzpf] .site-notice .mud-alert-close-button,
[b-nj8ffwpzpf] .site-notice .notice-action-btn {
    color: rgba(255, 255, 255, 0.85) !important;
}

[b-nj8ffwpzpf] .site-notice .mud-alert-close-button:hover,
[b-nj8ffwpzpf] .site-notice .notice-action-btn:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

[b-nj8ffwpzpf] .network-status-pill {
    border-radius: var(--radius-full) !important;
    padding: var(--space-xs) var(--space-md) !important;
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-sm) !important;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-sm);
}

[b-nj8ffwpzpf] .network-status-pill .mud-icon-root {
    color: inherit !important;
}

/* Interactive affordances only when the pill is editable (employee view) */
[b-nj8ffwpzpf] .network-status-pill--clickable {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

[b-nj8ffwpzpf] .network-status-pill--clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
/* _content/Ayva.Marketing.Network/Components/PlanCard.razor.rz.scp.css */
/* PlanCard - Dark Glassmorphism Card Styling */

/* ============================================================
   BASE CARD
   ============================================================ */

/* Plan card — non-glass shape (sizing + flex layout only).
   The frosted-glass paint lives in ayva-theme.css under
   `.plan-card.plan-card` so we can match the contact-panel glass
   formula exactly and outrank the host scoped-CSS bundle on
   specificity. See the comment block in ayva-theme.css for the
   full reasoning. */
.plan-card[b-acluw7bvax] {
    position: relative;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                border-color var(--transition-smooth);
    overflow: hidden;
    isolation: isolate;
}

.plan-card:hover[b-acluw7bvax] {
    transform: translateY(var(--hover-lift));
}

/* ============================================================
   RECOMMENDED CARD VARIANT
   ============================================================ */

.plan-card--recommended[b-acluw7bvax] {
    border-color: var(--highlight-orange);
    box-shadow: var(--glass-card-shadow), 0 0 16px rgba(255, 152, 0, 0.15);
}

.plan-card--recommended:hover[b-acluw7bvax] {
    box-shadow: var(--glass-card-shadow-hover), var(--highlight-orange-shadow);
}

/* ============================================================
   MOST POPULAR BADGE
   ============================================================ */

.plan-badge[b-acluw7bvax] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: var(--highlight-orange-gradient);
    padding: var(--space-sm) var(--space-lg);
    animation: glowPulse 3s ease-in-out infinite;
}

[b-acluw7bvax] .plan-badge-icon {
    color: var(--text-white) !important;
    font-size: var(--text-sm) !important;
}

.plan-badge-text[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-white);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============================================================
   CARD HEADER
   ============================================================ */

.plan-card-header[b-acluw7bvax] {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding-top: var(--space-sm);
}

.plan-card--recommended .plan-card-header[b-acluw7bvax] {
    padding-top: var(--space-3xl);
}

.plan-name[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.plan-price[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    /* Bright white → sky gradient. Previously var(--accent-gradient)
       which is azure→cyan (#3b82f6 → #06b6d4) — those mid-blues now sit
       on the slate-blue glass card and read as blue-on-blue, with the
       price effectively invisible. Lifting both stops up the brightness
       ramp (white → sky-200) keeps the gradient visual interest but
       gives the price strong contrast against the card. */
    background: linear-gradient(135deg, #ffffff 0%, #bae6fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 24px rgba(186, 230, 253, 0.18);
    margin-bottom: var(--space-xs);
    line-height: 1.2;
}

.plan-card--recommended .plan-price[b-acluw7bvax] {
    background: var(--highlight-orange-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-note[b-acluw7bvax] {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    /* DARK glass background — using --glass-medium (light translucent white)
       produced near-invisible white-on-white text. --glass-elevated is the
       dark slate variant; combined with white text gives readable contrast. */
    background: var(--glass-elevated);
    border: 1px solid var(--border-accent);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    margin-top: var(--space-sm);
    letter-spacing: 0.02em;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.plan-card--recommended .plan-note[b-acluw7bvax] {
    background: var(--highlight-orange-gradient);
    color: var(--text-white);
    border-color: transparent;
}

/* ============================================================
   CARD BODY
   ============================================================ */

.plan-card-body[b-acluw7bvax] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   SPEED BLOCK
   ============================================================ */

.plan-speed-block[b-acluw7bvax] {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.plan-speed-display[b-acluw7bvax] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-xs);
    cursor: help;
}

.plan-speed-value[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.plan-card--recommended .plan-speed-value[b-acluw7bvax] {
    background: var(--highlight-orange-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-speed-prefix[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.plan-speed-meta[b-acluw7bvax] {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.plan-speed-detail[b-acluw7bvax] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

[b-acluw7bvax] .plan-speed-arrow {
    font-size: var(--text-sm) !important;
}

[b-acluw7bvax] .plan-speed-arrow--down {
    color: var(--accent-color) !important;
}

[b-acluw7bvax] .plan-speed-arrow--up {
    color: var(--success-color) !important;
}

/* ============================================================
   KEY DIFFERENTIATORS (HIGHLIGHTS)
   ============================================================ */

.plan-highlights[b-acluw7bvax] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.plan-highlight-item[b-acluw7bvax] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

[b-acluw7bvax] .plan-highlight-icon {
    color: var(--success-color) !important;
    font-size: var(--text-base) !important;
    flex-shrink: 0;
}

/* ============================================================
   FULL DETAILS TOGGLE
   ============================================================ */

.plan-details-toggle[b-acluw7bvax] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-md);
}

.plan-details-toggle:hover[b-acluw7bvax] {
    border-color: var(--accent-color-30, rgba(99, 102, 241, 0.3));
    color: var(--text-primary);
    background: var(--bg-hover);
}

[b-acluw7bvax] .plan-details-chevron {
    color: var(--text-muted) !important;
    font-size: var(--text-sm) !important;
}

/* ============================================================
   DETAILS GRID
   ============================================================ */

.plan-details-grid[b-acluw7bvax] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    animation: fadeInUp 0.2s ease-out both;
}

.plan-detail-section[b-acluw7bvax] {
    display: flex;
    flex-direction: column;
}

.plan-detail-section + .plan-detail-section[b-acluw7bvax] {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border-color);
}

.plan-detail-section-label[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: var(--space-xs);
    opacity: 0.85;
}

.plan-detail-row[b-acluw7bvax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px 0;
}

.plan-detail-row + .plan-detail-row[b-acluw7bvax] {
    border-top: 1px solid var(--border-color);
}

.plan-detail-label[b-acluw7bvax] {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    flex: 1;
    min-width: 0;
}

[b-acluw7bvax] .plan-detail-icon {
    color: var(--accent-color) !important;
    font-size: var(--text-sm) !important;
    flex-shrink: 0;
    margin-right: var(--space-xs);
    opacity: 0.85;
}

.plan-detail-value[b-acluw7bvax] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-align: right;
    flex-shrink: 0;
    max-width: 60%;
    word-break: break-word;
}

[b-acluw7bvax] .plan-detail-check {
    color: var(--success-color) !important;
    font-size: var(--text-base) !important;
    flex-shrink: 0;
}

.plan-detail-row--bool .plan-detail-label[b-acluw7bvax] {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* ============================================================
   CTA BUTTON
   ============================================================ */

.plan-card-footer[b-acluw7bvax] {
    padding-top: var(--space-lg);
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.plan-cta-btn[b-acluw7bvax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-4xl);
    background: var(--accent-gradient);
    color: var(--text-white);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                opacity var(--transition-fast);
    box-shadow: var(--shadow-sm);
    width: 100%;
    max-width: 240px;
    letter-spacing: 0.02em;
}

.plan-cta-btn:hover:not(:disabled)[b-acluw7bvax] {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--shadow-md), var(--glow-accent);
}

.plan-cta-btn:active:not(:disabled)[b-acluw7bvax] {
    transform: translateY(0) scale(var(--click-scale));
}

.plan-cta-btn:disabled[b-acluw7bvax] {
    opacity: 0.5;
    cursor: not-allowed;
}

.plan-card--recommended .plan-cta-btn[b-acluw7bvax] {
    background: var(--highlight-orange-gradient);
    box-shadow: var(--shadow-sm), 0 0 12px var(--highlight-orange);
}

.plan-card--recommended .plan-cta-btn:hover:not(:disabled)[b-acluw7bvax] {
    box-shadow: var(--shadow-md), var(--highlight-orange-shadow);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .plan-card[b-acluw7bvax] {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }

    .plan-price[b-acluw7bvax] {
        font-size: var(--text-2xl);
    }

    .plan-speed-value[b-acluw7bvax] {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 640px) {
    .plan-card[b-acluw7bvax] {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }

    .plan-name[b-acluw7bvax] {
        font-size: var(--text-lg);
    }

    .plan-price[b-acluw7bvax] {
        font-size: var(--text-2xl);
    }

    .plan-speed-value[b-acluw7bvax] {
        font-size: var(--text-2xl);
    }
}
/* _content/Ayva.Marketing.Network/Components/PlansDialog.razor.rz.scp.css */
/* PlansDialog - Component-scoped styles for dialog inner content.
   Dialog container styles (width, bg, border) are in ayva-theme.css
   because MudDialog renders outside the component tree. */

/* Dialog Header */
.dialog-header[b-qhf4fmfg8f] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
}

.dialog-header-icon[b-qhf4fmfg8f] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dialog-header-text h2[b-qhf4fmfg8f] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.dialog-header-text p[b-qhf4fmfg8f] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    margin: 0;
}

/* Plans Grid - auto-fit columns matching PlansSection */
.plans-dialog-grid[b-qhf4fmfg8f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    align-items: start;
}

/* Grid Item */
.plan-dialog-item[b-qhf4fmfg8f] {
    display: flex;
    justify-content: center;
}

/* Close Button */
.dialog-close-btn[b-qhf4fmfg8f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dialog-close-btn:hover[b-qhf4fmfg8f] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.dialog-close-btn:active[b-qhf4fmfg8f] {
    transform: translateY(0);
}

/* Responsive: tablet */
@media (max-width: 768px) {
    .plans-dialog-grid[b-qhf4fmfg8f] {
        gap: var(--space-xl);
    }

    .dialog-header[b-qhf4fmfg8f] {
        padding: var(--space-md) var(--space-lg);
    }

    .dialog-header-text h2[b-qhf4fmfg8f] {
        font-size: var(--text-lg);
    }
}

/* Responsive: mobile */
@media (max-width: 640px) {
    .plans-dialog-grid[b-qhf4fmfg8f] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        max-width: 400px;
        margin: 0 auto;
    }

    .dialog-header[b-qhf4fmfg8f] {
        padding: var(--space-md);
    }

    .dialog-header-icon[b-qhf4fmfg8f] {
        width: 40px;
        height: 40px;
    }

    .dialog-header-text h2[b-qhf4fmfg8f] {
        font-size: var(--text-base);
    }
}
/* _content/Ayva.Marketing.Network/Components/PlansSection.razor.rz.scp.css */
/* PlansSection - Glassmorphism Plans Grid Layout */

.plans-section[b-gjhh0grmp6] {
    position: relative;
    padding: var(--space-4xl) var(--space-xl);
    max-width: 1440px;
    margin: 0 auto;
}

/* Section Header */
.plans-header[b-gjhh0grmp6] {
    text-align: center;
    margin-bottom: var(--space-4xl);
    animation: fadeInUp 0.5s ease-out both;
}

.plans-title[b-gjhh0grmp6] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.plans-subtitle[b-gjhh0grmp6] {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    color: var(--text-primary);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Plans Grid - responsive auto-fit layout */
.plans-grid[b-gjhh0grmp6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    align-items: stretch;
}

/* Grid Item - stretch to fill cell */
.plan-grid-item[b-gjhh0grmp6] {
    display: flex;
    min-width: 0;
}

/* ============================================================
   SHARED NETWORK SPECIFICATIONS
   ============================================================ */

.plans-specs[b-gjhh0grmp6] {
    margin-top: var(--space-3xl);
    margin-bottom: 20px; /* breathing room before the next page section */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.plans-specs-toggle[b-gjhh0grmp6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-normal);
    width: 100%;
    justify-content: center;
}

.plans-specs-toggle:hover[b-gjhh0grmp6] {
    background: var(--bg-hover);
    border-color: var(--accent-color-30, rgba(99, 102, 241, 0.3));
    color: var(--text-primary);
}

[b-gjhh0grmp6] .plans-specs-icon {
    color: var(--accent-color) !important;
    font-size: var(--text-base) !important;
}

[b-gjhh0grmp6] .plans-specs-chevron {
    color: var(--text-muted) !important;
    font-size: var(--text-base) !important;
    margin-left: auto;
}

.plans-specs-content[b-gjhh0grmp6] {
    margin-top: var(--space-md);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    animation: fadeInUp 0.3s ease-out both;
}

/* Full-width highlighted hero spec — Ayva's flagship network feature */
.spec-hero[b-gjhh0grmp6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.08),
        rgba(6, 182, 212, 0.06));
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color), 0 12px 32px rgba(6, 182, 212, 0.12);
    position: relative;
    overflow: hidden;
}

.spec-hero[b-gjhh0grmp6]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(6, 182, 212, 0.18), transparent 60%);
    pointer-events: none;
}

.spec-hero-icon-wrap[b-gjhh0grmp6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    color: white;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

[b-gjhh0grmp6] .spec-hero-icon {
    color: white !important;
    font-size: 28px !important;
}

.spec-hero-text[b-gjhh0grmp6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.4rem);
    min-width: 0;
    position: relative;
    z-index: 1;
}

.spec-hero-label[b-gjhh0grmp6] {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.spec-hero-value[b-gjhh0grmp6] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.plans-specs-grid[b-gjhh0grmp6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.spec-item[b-gjhh0grmp6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

[b-gjhh0grmp6] .spec-icon {
    color: var(--accent-color) !important;
    font-size: var(--text-lg) !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.spec-text[b-gjhh0grmp6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spec-label[b-gjhh0grmp6] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spec-value[b-gjhh0grmp6] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large tablets / small desktops: 2 columns */
@media (max-width: 1100px) {
    .plans-grid[b-gjhh0grmp6] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .plans-section[b-gjhh0grmp6] {
        padding: var(--space-3xl) var(--space-lg);
    }

    .plans-title[b-gjhh0grmp6] {
        font-size: var(--text-2xl);
    }

    .plans-subtitle[b-gjhh0grmp6] {
        font-size: var(--text-base);
    }

    .plans-grid[b-gjhh0grmp6] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .plans-specs-grid[b-gjhh0grmp6] {
        grid-template-columns: 1fr;
    }
}

/* Mobile: single column stack */
@media (max-width: 640px) {
    .plans-section[b-gjhh0grmp6] {
        padding: var(--space-2xl) var(--space-md);
    }

    .plans-header[b-gjhh0grmp6] {
        margin-bottom: var(--space-3xl);
    }

    .plans-grid[b-gjhh0grmp6] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        max-width: 400px;
        margin: 0 auto;
    }

    .plans-specs[b-gjhh0grmp6] {
        margin-top: var(--space-2xl);
    }

    .plans-specs-content[b-gjhh0grmp6] {
        padding: var(--space-lg);
    }
}
/* _content/Ayva.Marketing.Network/Components/PlansShowcaseDialog.razor.rz.scp.css */
/* PlansShowcaseDialog — fullscreen modal shell.

   Sub-component styles live in mudblazor-overrides.css under the
   `.plans-showcase-dialog` scope, since portal-mounted MudDialog content
   loses CSS isolation (per the SignupDialog tombstone note).
   Only the dialog-frame styles that don't cascade into ::deep live here. */

[b-yo2qziy8pj] .plans-showcase-dialog {
    /* MudDialog wrapper styling */
}

[b-yo2qziy8pj] .psd-title-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
}
/* _content/Ayva.Marketing.Network/Components/SignupDialog.razor.rz.scp.css */
/*
 * SignupDialog Component Styles — INTENTIONALLY EMPTY
 *
 * MudDialog renders through IDialogService into a portal outside the
 * originating component's DOM subtree, so Razor CSS isolation's `b-xxxxx`
 * scope attribute is lost when content cascades through MudDialog's render
 * tree. As a result, ::deep selectors and even bare descendant rules in a
 * `.razor.css` file never reach the rendered dialog DOM.
 *
 * All SignupDialog styles now live globally in
 * `wwwroot/assets/css/mudblazor-overrides.css`, scoped under `.ayva-dialog`
 * to avoid leaking to other dialogs. The `ayva-dialog` class is set on the
 * <MudDialog> root and is preserved on the portal-mounted dialog node.
 *
 * Keep this file as a tombstone so future contributors don't recreate the
 * isolation pitfall.
 */
/* _content/Ayva.Marketing.Network/Components/SiteDetailPanel.razor.rz.scp.css */
.site-panel[b-myps6f8by0] {
    position: absolute;
    top: 80px; right: 0; bottom: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
    padding: 1.25rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 40;
    overflow-y: auto;
}
.site-panel.open[b-myps6f8by0] { transform: translateX(0); }
.site-panel-header[b-myps6f8by0] { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
.site-panel-header h4[b-myps6f8by0] { margin: 0; font-family: var(--font-primary); }
.close-btn[b-myps6f8by0] { margin-left: auto; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; }
.site-meta[b-myps6f8by0] { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin-top: 1rem; }
.site-meta dt[b-myps6f8by0] { color: var(--text-secondary); font-size: 0.8rem; }
.site-meta dd[b-myps6f8by0] { color: var(--text-primary); margin: 0; }

@media (max-width: 1023px) {
    .site-panel[b-myps6f8by0] { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; border-left: none; border-top: 1px solid var(--glass-border); transform: translateY(100%); }
    .site-panel.open[b-myps6f8by0] { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-panel[b-myps6f8by0] { transition: none; }
}
/* _content/Ayva.Marketing.Network/Components/TerrainCrossSection.razor.rz.scp.css */
.terrain-drawer[b-1eyogg5xkm] {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.35s ease;
    z-index: 50;
}
.terrain-drawer.open[b-1eyogg5xkm] { transform: translateY(0); }
.terrain-header[b-1eyogg5xkm] { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); font-family: var(--font-primary); font-weight: 600; margin-bottom: 0.5rem; }
.close-btn[b-1eyogg5xkm] { margin-left: auto; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; }
.terrain-svg[b-1eyogg5xkm] { width: 100%; height: 180px; }
.terrain-line[b-1eyogg5xkm] { fill: rgba(59, 130, 246, 0.18); stroke: var(--accent-color); stroke-width: 1.5; }
.los-line[b-1eyogg5xkm] { fill: none; stroke: var(--accent-hover); stroke-width: 2; stroke-dasharray: 6 4; }
.terrain-meta[b-1eyogg5xkm] { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 0.8rem; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .terrain-drawer[b-1eyogg5xkm] { transition: none; }
}
/* _content/Ayva.Marketing.Network/Pages/Coverage.razor.rz.scp.css */
/* /coverage page — deep-link host for CoverageExperience.
   Wraps with hero + back-to-home affordance.
   The two-column rail/canvas layout lives in CoverageExperience.razor.css. */

.coverage-page[b-f9epzmnmvc] {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem) var(--space-2xl, 3rem);
    box-sizing: border-box;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.page-back-row[b-f9epzmnmvc] {
    margin-bottom: var(--space-sm, 0.75rem);
}

.back-btn[b-f9epzmnmvc] {
    font-family: var(--font-primary);
    font-weight: 600;
    text-transform: none;
}

.coverage-hero[b-f9epzmnmvc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.4rem);
    margin-bottom: var(--space-lg, 1.5rem);
    padding: 0 var(--space-sm, 0.75rem);
}

.coverage-hero h1[b-f9epzmnmvc] {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.coverage-hero p[b-f9epzmnmvc] {
    margin: 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

@media (max-width: 1024px) {
    .coverage-page[b-f9epzmnmvc] {
        padding: var(--space-sm, 0.75rem) var(--space-md, 1rem) var(--space-xl, 2rem);
    }
    .coverage-hero h1[b-f9epzmnmvc] { font-size: 1.75rem; }
}

@media (max-width: 640px) {
    .coverage-page[b-f9epzmnmvc] {
        padding: var(--space-sm, 0.75rem) var(--space-sm, 0.75rem) var(--space-lg, 1.5rem);
    }
    .coverage-hero h1[b-f9epzmnmvc] { font-size: 1.5rem; }
    .coverage-hero p[b-f9epzmnmvc] { font-size: 0.9rem; }
}
/* _content/Ayva.Marketing.Network/Pages/Index.razor.rz.scp.css */
/* ==========================================================================
   Index.razor - Network Landing Page Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

.ayva-networks-logo[b-8gng4qz1hn] {
    background-image: url(/assets/images/Ayva-Logo-Networks.svg);
    height: 100%;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    z-index: 5000;
    position: fixed;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Reviews Section - Dark glassmorphism card area
   -------------------------------------------------------------------------- */

[b-8gng4qz1hn] .reviews-section {
    background: rgba(10, 15, 30, 0.95);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-4xl) var(--space-xl);
}

[b-8gng4qz1hn] .section-header-glass {
    margin-bottom: var(--space-3xl);
}

[b-8gng4qz1hn] .reviews-title {
    font-weight: var(--font-bold);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 var(--space-sm) 0;
}

[b-8gng4qz1hn] .reviews-subtitle {
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   Section Reveal Animations - staggered fade-in-up on page load (8 sections)
   -------------------------------------------------------------------------- */

[b-8gng4qz1hn] .mud-main-content > * {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(1) {
    animation-delay: calc(var(--stagger-delay) * 1);
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(2) {
    animation-delay: calc(var(--stagger-delay) * 2);
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(3) {
    animation-delay: calc(var(--stagger-delay) * 3);
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(4) {
    animation-delay: calc(var(--stagger-delay) * 4);
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(5) {
    animation-delay: calc(var(--stagger-delay) * 5);
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(6) {
    animation-delay: calc(var(--stagger-delay) * 6);
}

[b-8gng4qz1hn] .mud-main-content > *:nth-child(7) {
    animation-delay: calc(var(--stagger-delay) * 7);
}

/* --------------------------------------------------------------------------
   CTA Button Glow Effect
   -------------------------------------------------------------------------- */

[b-8gng4qz1hn] .mud-button-root.mud-button-filled {
    transition: all var(--transition-normal);
}

[b-8gng4qz1hn] .mud-button-root.mud-button-filled:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-accent);
}

[b-8gng4qz1hn] .mud-button-root.mud-button-filled:active {
    transform: translateY(var(--active-press));
}

/* --------------------------------------------------------------------------
   Interactive Section Hover Effects
   -------------------------------------------------------------------------- */

[b-8gng4qz1hn] .mud-paper {
    transition: all var(--transition-normal);
}

/* --------------------------------------------------------------------------
   Responsive - Mobile Video Backgrounds
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    [b-8gng4qz1hn] .reviews-section {
        padding: var(--space-2xl) var(--space-md);
    }

    [b-8gng4qz1hn] .reviews-title {
        font-size: var(--text-xl) !important;
    }
}

@media (max-width: 480px) {
    [b-8gng4qz1hn] .reviews-section {
        padding: var(--space-xl) var(--space-sm);
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-8gng4qz1hn] .mud-main-content > * {
        opacity: 1;
        animation: none;
    }
}
/* _content/Ayva.Marketing.Network/Widgets/LocalFiberSignupsWidget.razor.rz.scp.css */
/* LocalFiberSignupsWidget.razor.css
 * Scoped styles for the LocalFiber Signups dashboard widget.
 * All values via CSS variables — no hardcoded colors, fonts, or spacing.
 */

.widget-content[b-qf19mktfe1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    height: 100%;
}

/* ── Loading / error states ── */

.loading-state[b-qf19mktfe1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    flex: 1;
}

.error-state[b-qf19mktfe1] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--error-color);
    font-size: var(--text-sm);
    padding: var(--space-sm);
}

.error-state .material-icons[b-qf19mktfe1] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Primary stat (This Week) ── */

.primary-stat[b-qf19mktfe1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-xs);
    background: var(--surface-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}

.primary-stat:hover[b-qf19mktfe1] {
    border-color: var(--accent-color);
}

.primary-value[b-qf19mktfe1] {
    font-size: var(--text-2xl, 2rem);
    font-weight: var(--font-bold, 700);
    color: var(--accent-color);
    line-height: 1;
}

.primary-label[b-qf19mktfe1] {
    font-size: var(--text-xs, 0.7rem);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}

/* ── Secondary row (Today + trend) ── */

.secondary-row[b-qf19mktfe1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.secondary-stat[b-qf19mktfe1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: var(--space-xs);
    background: var(--surface-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.secondary-value[b-qf19mktfe1] {
    font-size: var(--text-lg, 1.25rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary);
    line-height: 1;
}

.secondary-label[b-qf19mktfe1] {
    font-size: var(--text-xs, 0.7rem);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-xs);
}

/* ── Trend indicator ── */

.trend-indicator[b-qf19mktfe1] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--text-xs, 0.7rem);
    font-weight: var(--font-semibold, 600);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--transition-base);
}

.trend-indicator .trend-arrow[b-qf19mktfe1] {
    font-size: 1rem;
}

.trend--up[b-qf19mktfe1] {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 30%, transparent);
}

.trend--stable[b-qf19mktfe1] {
    color: var(--text-secondary);
    background: var(--surface-glass);
    border-color: var(--border-color);
}