/* ============================================
   PROFESSIONAL MODE OVERRIDES
   Applied when body has .professional-mode class.
   Provides a clean, corporate-friendly appearance.
   ============================================ */

/* --- CSS Variables --- */
.professional-mode {
    --prof-primary: #1e3a8a;
    --prof-secondary: #3b82f6;
    --prof-accent: #64748b;
    --prof-bg: #f8fafc;
    --prof-text: #1e293b;
    --prof-text-secondary: #475569;
    --prof-border: #e2e8f0;
    --prof-surface: #ffffff;
}

/* --- Mode Toggle Button (in header) --- */
.mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--theme-border, rgba(30, 41, 59, 0.2));
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.mode-toggle:hover {
    border-color: var(--theme-text-primary, #1e293b);
    color: var(--theme-text-primary, #1e293b);
    background: rgba(0, 0, 0, 0.03);
}

.mode-toggle .toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.mode-toggle .toggle-label {
    display: inline;
}

/* PUB-MOB-3 (2026-05-27): on small phones the mode-toggle label was hidden
   (icon-only chip) to make room. MOB-SIGNIN-1 (2026-07-14) goes further:
   the whole chip hides at ≤480px, and Sign In comes BACK (it had been
   display:none'd in PublicHeader.razor.css). Rationale: the icon-only
   briefcase was mystery meat to strangers (QA screenshot: unlabeled chip
   next to the CTA), while Sign In serves the returning-user-on-phone case
   that was generating "email already taken" dead ends + Forgot Password
   traffic. Deliberate pro-mode entry has a real front door now
   (/professional, PRO-ROUTE-1); the toggle survives at every width >480px. */
@media (max-width: 480px) {
    .mode-toggle {
        display: none;
    }
}

/* Dark theme overrides for toggle */
.is-dark .mode-toggle {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

.is-dark .mode-toggle:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
}

/* --- Professional Hero Section --- */
.hero-professional {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding: 24px 24px 16px;
    max-width: 960px;
    margin: 0 auto;
    animation: prof-fade-up 0.6s ease-out;
}

@keyframes prof-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-professional .hero-text {
    flex: 1;
    max-width: 560px;
}

.hero-professional .hero-headline {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.hero-professional .hero-sub {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 32px;
}

.hero-professional .hero-cta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.hero-professional .cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--prof-primary, #1e3a8a);
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25);
}

.hero-professional .cta-primary:hover {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(30, 58, 138, 0.35);
    color: white;
}

.hero-professional .cta-note {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 0;
}

.hero-professional .hero-tagline {
    font-size: 0.88rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 8px 0 0;
    opacity: 0.85;
}

/* Professional hero illustration/icon area */
.hero-professional .hero-professional-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.hero-professional .prof-icon-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--prof-primary, #1e3a8a), var(--prof-secondary, #3b82f6));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.2);
}

.hero-professional .prof-icon-circle .material-symbols-rounded {
    font-size: 64px;
    color: white;
}

/* RENAME-1b (2026-10-21): the hero mark is the flagship sleeve now, and the Mote is drawn to FLOAT - a
   point of light with its own glow - not to sit inside a filled disc (it read as a pinprick on a blue
   ball). Marked up with .prof-icon-circle--mark: no fill, no shadow; the mark takes the ink itself. */
.hero-professional .prof-icon-circle--mark {
    background: none;
    box-shadow: none;
    --nts-halo-ink: var(--prof-primary, #1e3a8a);
    --nts-mote-glow: 10px;
}

/* PUB-BOT-1 (2026-08-11): the orb now renders <ProBot>, whose head is painted with
   currentColor. The old rule above targeted the Material span and no longer matches,
   so set the colour on the SVG itself or the head falls back to black. */
.hero-professional .prof-icon-circle .pro-bot {
    color: #fff;
}

/* `.prof-visual-label` CSS removed 2026-04-22 — the floating "AI-Powered" pill it styled
   was dropped, and the Pro hero now reuses `.avatar-stage-label` (Index.razor.css) to
   mirror the Personal-mode character chip. No replacement styles are needed here. */

/* --- Professional Features Section --- */
.features-professional {
    padding: 64px 24px;
    max-width: 960px;
    margin: 0 auto;
}

.features-professional .section-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 12px;
}

.features-professional .section-sub {
    text-align: center;
    font-size: 1.05rem;
    color: var(--theme-text-secondary, #64748b);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.features-professional .prof-features-grid {
    /* PUB-MOB-4 (2026-05-27): switched from `repeat(2, 1fr)` to
       `repeat(3, 1fr)`. With 3 memory cards in a 2-column grid, the
       third orphan-wraps to row 2 left-cell, leaving a blank right-cell —
       reads as broken layout. Three columns fit all three cards on one
       row symmetrically. The `repeat(auto-fit, minmax(...))` fallback
       below keeps tablet viewports (768-1024px) usable when 3 columns
       would pinch the cards too narrow. Mobile ≤768px stacks to 1
       column via the existing responsive block at line ~357. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.features-professional .prof-feature-card {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
}

.features-professional .prof-feature-card:hover {
    border-color: rgba(30, 58, 138, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.features-professional .prof-feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--prof-primary, #1e3a8a), var(--prof-secondary, #3b82f6));
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-professional .prof-feature-icon .material-symbols-rounded {
    font-size: 22px;
    color: white;
}

.features-professional .prof-feature-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 6px;
}

.features-professional .prof-feature-content p {
    font-size: 0.88rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.55;
}

/* --- Professional Objections/FAQ --- */
.professional-mode .objection-item h3 {
    font-size: 1rem;
}

/* --- Professional CTA --- */
.cta-professional {
    text-align: center;
    padding: 64px 24px;
    max-width: 600px;
    margin: 0 auto;
}

.cta-professional h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 12px;
}

.cta-professional .cta-tagline {
    font-size: 1.05rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 28px;
}

.cta-professional .cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--prof-primary, #1e3a8a);
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25);
}

.cta-professional .cta-primary:hover {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(30, 58, 138, 0.35);
    color: white;
}

.cta-professional .cta-note {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 12px 0 0;
}

/* --- Dark Theme overrides for Professional Mode --- */
.is-dark .features-professional .prof-feature-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .features-professional .prof-feature-content h3 {
    color: white;
}

.is-dark .features-professional .prof-feature-content p {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark-theme override for the (now-removed) .prof-visual-label was here. The
   `.avatar-stage-label` pill we reuse handles its own dark-theme treatment via the
   `.stage-name` override near the bottom of Index.razor.css. */

/* --- Responsive --- */
@media (max-width: 768px) {
    /* PRO-HERO-ORDER-1 (2026-09-13): was column-reverse, which put the avatar
       and its "Your AI Assistant" chip ABOVE the headline on phones - the H1
       started ~380px down and the CTA landed at ~650px, right at the fold on a
       browser with chrome. That order is correct for .hero-companion, where the
       companion IS the pitch; it was ported onto the Pro hero, where the
       headline is. Match the constraint to the surface. DOM order already reads
       text -> visual, so plain `column` puts the avatar after the CTA. */
    .hero-professional {
        flex-direction: column;
        text-align: center;
        gap: 32px;
        padding: 32px 20px;
    }

    .hero-professional .hero-text {
        align-items: center;
    }

    .hero-professional .hero-cta-row {
        align-items: center;
    }

    .hero-professional .hero-headline {
        font-size: 1.75rem;
    }

    .features-professional .prof-features-grid {
        grid-template-columns: 1fr;
    }

    .mode-toggle .toggle-label {
        display: none;
    }
}