/* ============================================================
   BiasharaFlow Phase 1A — Complete Mobile-First CSS
   Font: DM Sans (Google Fonts)
   Palette: Deep Forest Green + Gold Accent
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* Brand */
    --primary:       #0B6B3A;
    --primary-dk:    #0B2D20;
    --primary-lt:    #E8F5EE;
    --accent:        #C9930A;
    --accent-lt:     #FFF8E6;

    /* Semantic */
    --green:         #16A34A;
    --green-dk:      #166534;
    --red:           #DC2626;
    --red-lt:        #FEF2F2;
    --orange:        #D97706;
    --orange-lt:     #FFFBEB;
    --blue:          #2563EB;
    --blue-lt:       #EFF6FF;
    --purple:        #7C3AED;
    --purple-lt:     #F5F3FF;
    --gold:          #B45309;
    --gold-lt:       #FEFCE8;
    --wa-green:      #25D366;

    /* Neutral */
    --bg:            #F2F5F2;
    --card-bg:       #FFFFFF;
    --text:          #111827;
    --text-2:        #4B5563;
    --text-3:        #9CA3AF;
    --border:        #E5E7E5;
    --muted:         #6B7280;

    /* Shadows */
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:        0 4px 16px rgba(0,0,0,0.09);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.14);

    /* Layout */
    --radius:        14px;
    --radius-sm:     8px;
    --radius-lg:     20px;
    --nav-h:         58px;
    --bottom-h:      68px;

    /* Font */
    --font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     'DM Mono', 'Courier New', monospace;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

/* ── Auth Pages ─────────────────────────────────────────────── */
.auth-body {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--primary-dk) 0%, #143D2B 55%, #1A5C38 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.auth-wrap { width: 100%; max-width: 440px; }
.auth-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: var(--shadow-lg);
}
.auth-card-lg { max-width: 480px; }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-mark { font-size: 52px; margin-bottom: 6px; }
.auth-brand { font-size: 28px; font-weight: 800; color: var(--primary-dk); letter-spacing: -1px; }
.auth-tagline { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.auth-alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-2); }
.auth-alt a { color: var(--primary); font-weight: 600; }
.demo-hint {
    text-align: center; margin-top: 16px;
    padding: 12px; background: var(--primary-lt);
    border-radius: var(--radius-sm);
    font-size: 13px; color: var(--primary-dk);
}
.demo-hint code {
    background: rgba(11,45,32,0.1); padding: 2px 6px;
    border-radius: 4px; font-size: 12px;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: var(--primary-dk);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-menu-btn {
    background: none; border: none;
    display: flex; flex-direction: column;
    gap: 5px; padding: 6px; border-radius: 6px;
}
.nav-menu-btn span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: 0.2s ease;
}
.nav-biz-name {
    font-size: 15px; font-weight: 700; color: #fff;
    max-width: 200px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.nav-logo-link {
    font-size: 22px; text-decoration: none;
    color: var(--accent);
    line-height: 1;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; height: 100dvh;
    background: var(--primary-dk);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto; overflow-x: hidden;
    box-shadow: var(--shadow-lg);
    -webkit-overflow-scrolling: touch;
}
.sidebar.open { transform: translateX(0); }
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150; display: none;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }
.sidebar-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 20px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo { font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; }
.sidebar-close {
    background: none; border: none;
    color: rgba(255,255,255,0.7); font-size: 26px;
    line-height: 1; padding: 4px 8px;
    border-radius: 6px;
}
.sidebar-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sidebar-user {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-avatar {
    width: 40px; height: 40px;
    background: var(--accent); color: var(--primary-dk);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.sidebar-user-name { font-weight: 600; color: #fff; font-size: 14px; }
.sidebar-user-phone { font-size: 12px; color: rgba(255,255,255,0.6); }
.sidebar-nav { padding: 8px 0; }
.nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 20px;
    color: rgba(255,255,255,0.7);
    font-size: 15px; font-weight: 500;
    border-left: 3px solid transparent;
    transition: 0.15s ease;
    text-decoration: none;
}
.nav-link:hover, .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-left-color: var(--accent);
}
.nav-link-danger { color: rgba(255,120,120,0.8); }
.nav-link-danger:hover { color: #ff9999; background: rgba(220,38,38,0.1); border-left-color: var(--red); }
.nav-link-admin { color: var(--accent) !important; }
.nav-icon { font-size: 18px; width: 22px; text-align: center; }
.nav-divider { border-top: 1px solid rgba(255,255,255,0.1); margin: 8px 16px; }

/* ── Bottom Nav ─────────────────────────────────────────────── */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-h);
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    display: flex; align-items: flex-start;
    padding-top: 6px;
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 3px;
    padding: 6px 4px;
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.15s ease;
    position: relative;
}
.bn-item.active { color: var(--primary); }
.bn-item.active::before {
    content: '';
    position: absolute; top: -6px;
    width: 30px; height: 3px;
    background: var(--primary);
    border-radius: 0 0 3px 3px;
}
.bn-icon { font-size: 20px; line-height: 1; }
.bn-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }

/* ── Subscription Banner ────────────────────────────────────── */
.sub-banner {
    position: fixed; top: var(--nav-h);
    left: 0; right: 0;
    padding: 10px 16px;
    font-size: 13px; font-weight: 600;
    text-align: center; z-index: 80;
}
.sub-banner-warning { background: #FEF3C7; color: #92400E; }
.sub-banner-danger  { background: #FEE2E2; color: #991B1B; }

/* ── Flash Messages ─────────────────────────────────────────── */
.flash {
    position: fixed; top: calc(var(--nav-h) + 8px);
    left: 50%; transform: translateX(-50%);
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600;
    z-index: 1000; max-width: 92vw; width: max-content;
    display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease;
}
.flash-success { background: var(--green); color: #fff; }
.flash-danger  { background: var(--red);   color: #fff; }
.flash-warning { background: var(--orange); color: #fff; }
.flash-close {
    background: none; border: none;
    color: inherit; font-size: 20px;
    line-height: 1; opacity: 0.8; padding: 0 2px;
}
@keyframes slideDown {
    from { transform: translateX(-50%) translateY(-16px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
    margin-top: var(--nav-h);
    padding: 18px 15px;
    padding-bottom: calc(var(--bottom-h) + 20px);
    max-width: 700px;
    margin-left: auto; margin-right: auto;
}
/* Extra top padding when subscription banner is visible */
.has-sub-banner .main-content { margin-top: calc(var(--nav-h) + 38px); }

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 10px;
    margin-bottom: 18px;
}
.page-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
.page-sub   { font-size: 13px; color: var(--text-2); margin-top: 2px; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.card-warning { border-color: #FDE68A; background: #FFFBEB; }
.card-wa-highlight { border-left: 5px solid var(--wa-green); }
.card-title {
    font-size: 15px; font-weight: 700;
    color: var(--text); margin-bottom: 14px;
}
.card-header-row {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 12px;
}
.mb-0 { margin-bottom: 0 !important; }
.link-sm { font-size: 13px; font-weight: 600; color: var(--primary); }

/* ── Stats Grid ─────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; margin-bottom: 14px;
}
.stats-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.stat-card {
    border-radius: var(--radius);
    padding: 16px 14px;
    box-shadow: var(--shadow-sm);
    color: #fff;
}
.stat-green      { background: linear-gradient(135deg, #0B6B3A, #0D8048); }
.stat-green-dark { background: linear-gradient(135deg, #166534, #15803D); }
.stat-red        { background: linear-gradient(135deg, #B91C1C, #DC2626); }
.stat-orange     { background: linear-gradient(135deg, #B45309, #D97706); }
.stat-blue       { background: linear-gradient(135deg, #1D4ED8, #2563EB); }
.stat-card:not([class*="stat-"]) { background: linear-gradient(135deg, #374151, #4B5563); }
.stat-label { font-size: 11px; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 20px; font-weight: 800; margin: 5px 0 2px; font-family: var(--font-mono); letter-spacing: -0.5px; }
.stat-sub   { font-size: 11px; opacity: 0.8; }

/* ── Period Summary ─────────────────────────────────────────── */
.period-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 14px; }
.period-sep  { background: var(--border); }
.period-head { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.period-row  { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.period-total { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; font-weight: 700; }

/* ── Quick Actions ──────────────────────────────────────────── */
.quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.quick-grid-4 { grid-template-columns: repeat(4,1fr); }
.qa {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 14px 8px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; text-align: center;
    text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: none;
}
.qa:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.qa span:first-child { font-size: 22px; }
.qa-green  { background: var(--primary-lt);  color: var(--primary-dk); }
.qa-red    { background: var(--red-lt);       color: var(--red);       }
.qa-blue   { background: var(--blue-lt);      color: var(--blue);      }
.qa-wa     { background: #DCFCE7;             color: #166534;          }
.qa-purple { background: var(--purple-lt);    color: var(--purple);    }
.qa-gold   { background: var(--gold-lt);      color: var(--gold);      }

/* ── Lists ──────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; }
.list-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item-warn { background: linear-gradient(90deg, #FEF9C3 0%, transparent 100%); margin: 0 -18px; padding: 13px 18px; }
.list-item-avatar {
    width: 38px; height: 38px;
    background: var(--primary-lt); color: var(--primary-dk);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; flex-shrink: 0;
}
.list-item-body { flex: 1; min-width: 0; }
.list-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.list-item-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.li-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-sub   { font-size: 12px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.li-amount    { font-size: 15px; font-weight: 700; font-family: var(--font-mono); }
.li-amount-sm { font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.list-total   { padding: 10px 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--text-2); border-top: 2px solid var(--border); }

/* ── Debt Progress Bar ──────────────────────────────────────── */
.debt-bar { height: 5px; background: var(--border); border-radius: 3px; margin: 5px 0 3px; overflow: hidden; }
.debt-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 30px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap;
}
.bdg-paid      { background: #DCFCE7; color: #15803D; }
.bdg-unpaid    { background: #FEE2E2; color: #B91C1C; }
.bdg-partial   { background: #FEF3C7; color: #B45309; }
.bdg-active    { background: #DCFCE7; color: #15803D; }
.bdg-trial     { background: #DBEAFE; color: #1D4ED8; }
.bdg-overdue   { background: #FEE2E2; color: #B91C1C; }
.bdg-suspended { background: #F3F4F6; color: #374151; }
.bdg-cancelled { background: #F3F4F6; color: #6B7280; }
.bdg-cash      { background: #F3F4F6; color: #374151; }
.bdg-mpesa     { background: #DCFCE7; color: #15803D; }
.bdg-credit    { background: #FEF3C7; color: #B45309; }
.bdg-other     { background: #F3F4F6; color: #4B5563; }
.bdg-danger    { background: #FEE2E2; color: #B91C1C; }
.bdg-ref       { background: #EEF2FF; color: #4338CA; }
.bdg-unknown   { background: #F3F4F6; color: #6B7280; }

/* ── Filter Tabs ────────────────────────────────────────────── */
.filter-tabs {
    display: flex; gap: 6px; margin-bottom: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.ftab {
    padding: 7px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    background: var(--card-bg); border: 2px solid var(--border);
    color: var(--text-2); transition: 0.15s ease;
    text-decoration: none;
}
.ftab.ftab-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ftab:hover:not(.ftab-active) { border-color: var(--primary); color: var(--primary); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.form-hint  { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.form-input {
    width: 100%; padding: 11px 13px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px; color: var(--text);
    background: var(--card-bg);
    transition: border-color 0.15s ease;
    -webkit-appearance: none; appearance: none;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11,107,58,0.1);
}
textarea.form-input { resize: vertical; min-height: 76px; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-row   { display: flex; gap: 8px; flex-wrap: wrap; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-inline{ display: flex; gap: 8px; align-items: center; }
.search-wrap{ margin-bottom: 14px; }
.search-input { border-radius: 40px !important; padding-left: 16px !important; }
.input-eye  { position: relative; }
.eye-btn {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    font-size: 16px; color: var(--text-3);
    padding: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center;
    justify-content: center; gap: 6px;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600;
    border: none; transition: 0.15s ease;
    cursor: pointer; white-space: nowrap;
    text-decoration: none;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #0D8048; color: #fff; transform: translateY(-1px); }
.btn-ghost {
    background: transparent; color: var(--text-2);
    border: 2px solid var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #B91C1C; color: #fff; }
.btn-wa { background: var(--wa-green); color: #fff; }
.btn-wa:hover { background: #1ebe5e; color: #fff; }
.btn-full { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-xs { padding: 5px 10px; font-size: 12px; }
.btn-icon {
    background: none; border: none; padding: 6px 7px;
    font-size: 16px; border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    display: inline-flex; align-items: center;
}
.btn-icon:hover { background: var(--primary-lt); }
.btn-icon-red:hover { background: var(--red-lt); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    padding: 12px 14px; border-radius: var(--radius-sm);
    font-size: 14px; margin-bottom: 12px; border: 1px solid;
}
.alert-danger  { background: var(--red-lt);    color: #991B1B; border-color: #FECACA; }
.alert-success { background: #F0FFF4;           color: #166534; border-color: #BBF7D0; }
.alert-warning { background: var(--orange-lt);  color: #92400E; border-color: #FDE68A; }
.alert-info    { background: var(--blue-lt);    color: #1E40AF; border-color: #BFDBFE; }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-2); }
.empty-icon  { font-size: 44px; margin-bottom: 12px; opacity: 0.4; }
.empty-state p { margin-bottom: 14px; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal {
    position: fixed; inset: 0;
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 500;
}
.modal-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}
.modal-box {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%; max-width: 560px;
    max-height: 92dvh; overflow-y: auto;
    animation: slideUp 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom, 16px);
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.modal-hdr {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
}
.modal-hdr h3 { font-size: 17px; font-weight: 700; }
.modal-x {
    background: none; border: none;
    font-size: 26px; color: var(--text-2);
    line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.modal-x:hover { background: var(--bg); }
.modal-bd { padding: 16px 20px; }
.modal-cust { font-weight: 600; color: var(--primary); margin-bottom: 14px; font-size: 14px; }
.modal-ft {
    display: flex; gap: 10px;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border);
}

/* ── WhatsApp Preview ───────────────────────────────────────── */
.wa-preview {
    background: #ECE5DD;
    padding: 14px 15px;
    border-radius: var(--radius-sm);
    font-size: 14px; line-height: 1.6;
    color: #1A1A1A; margin: 12px 0;
    white-space: pre-wrap; word-break: break-word;
    border-left: 4px solid var(--wa-green);
    min-height: 60px;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
    background: var(--bg); padding: 9px 12px;
    text-align: left; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-2); border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.tfoot-total { background: var(--primary-lt); }
.tfoot-total td { font-size: 14px; }
.tr-warn td { background: #FFFBEB; }
.tr-danger td { background: #FEF2F2; }

/* ── Category Bars ──────────────────────────────────────────── */
.cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.cat-label { width: 140px; flex-shrink: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-bar-wrap { flex: 1; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.cat-bar-fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.4s ease; }
.cat-amt { white-space: nowrap; font-weight: 600; font-size: 12px; color: var(--text-2); }

/* ── Admin specific ─────────────────────────────────────────── */
.admin-user-header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.admin-user-biz { font-size: 16px; font-weight: 700; color: var(--text); }
.admin-user-name { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.admin-user-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.admin-sub-info { font-size: 13px; color: var(--text-2); margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ── Subscription payment note ──────────────────────────────── */
.sub-payment-note { margin-top: 12px; padding: 12px; background: var(--primary-lt); border-radius: var(--radius-sm); font-size: 13px; color: var(--primary-dk); }
.sub-payment-note p { margin-bottom: 4px; }

/* ── Utilities ──────────────────────────────────────────────── */
.c-g    { color: var(--green)  !important; }
.c-r    { color: var(--red)    !important; }
.c-muted{ color: var(--muted)  !important; }
code    { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg); padding: 2px 6px; border-radius: 4px; }

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .quick-grid { grid-template-columns: repeat(6, 1fr); }
    .quick-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .main-content { padding: 22px 20px calc(var(--bottom-h) + 22px); }
}
@media (min-width: 900px) {
    .sidebar { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); transform: none; }
    .bottom-nav { display: none; }
    .main-content { padding-bottom: 30px; }
}

/* ── Language Switchers ───────────────────────────────────── */
.auth-lang-switcher {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.auth-lang-switcher select,
.sidebar-lang-switcher select {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.sidebar-lang-switcher {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: grid;
    gap: 8px;
}

.sidebar-lang-switcher label {
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.sidebar-lang-switcher select {
    width: 100%;
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.sidebar-lang-switcher option {
    color: var(--text);
}

/* ============================================================
   Phase 1B.3 Layout Correction
   Fixes excessive top whitespace on logged-in app/admin pages.
   ============================================================ */
body:not(.auth-body) .main-content {
    margin-top: 0 !important;
    padding-top: calc(var(--nav-h) + 16px) !important;
    padding-bottom: calc(var(--bottom-h) + 24px) !important;
    min-height: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

body:not(.auth-body).has-sub-banner .main-content {
    padding-top: calc(var(--nav-h) + 52px) !important;
}

body:not(.auth-body) .page-header {
    margin-top: 0 !important;
}

@media (min-width: 900px) {
    body:not(.auth-body) .main-content {
        max-width: 1040px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* ============================================================
   Phase 1B.4 Dashboard Graph + Non-Dashboard Topspace Control
   ============================================================ */

/* Non-dashboard pages should start high and clean */
body:not(.auth-body):not(.page-dashboard):not(.admin-mode.page-index) .main-content {
    padding-top: calc(var(--nav-h) + 8px) !important;
}

/* Dashboard pages get comfortable executive spacing */
body.page-dashboard .main-content,
body.admin-mode.page-index .main-content {
    padding-top: calc(var(--nav-h) + 14px) !important;
}

/* If subscription banner exists, protect space for it */
body.has-sub-banner:not(.auth-body):not(.page-dashboard):not(.admin-mode.page-index) .main-content {
    padding-top: calc(var(--nav-h) + 44px) !important;
}

body.has-sub-banner.page-dashboard .main-content,
body.has-sub-banner.admin-mode.page-index .main-content {
    padding-top: calc(var(--nav-h) + 52px) !important;
}

.dashboard-hero-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: stretch;
    background:
        radial-gradient(circle at 18% 0%, rgba(201,147,10,.22), transparent 30%),
        linear-gradient(135deg, #0B2D20 0%, #0B6B3A 58%, #0E3A2A 100%);
    border-radius: 24px;
    padding: 24px;
    margin: 0 0 18px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(11,45,32,.22);
}

.dashboard-hero-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.admin-hero-card {
    background:
        radial-gradient(circle at 18% 0%, rgba(201,147,10,.22), transparent 30%),
        linear-gradient(135deg, #111827 0%, #0B2D20 52%, #14532D 100%);
}

.hero-copy,
.bf-chart-wrap {
    position: relative;
    z-index: 1;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #FDE68A;
    margin-bottom: 8px;
}

.hero-copy h2 {
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: 0 0 10px;
}

.hero-copy p {
    max-width: 560px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    margin: 0 0 14px;
}

.hero-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-mini-stats span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 12px;
    color: rgba(255,255,255,.88);
}

.hero-mini-stats strong {
    color: #fff;
}

.bf-chart-wrap {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    padding: 14px;
    min-height: 210px;
    display: grid;
    align-content: space-between;
}

.bf-chart-legend {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-bottom: 10px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 800;
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    margin-right: 5px;
}

.legend-sales {
    background: #FDE68A;
}

.legend-expenses {
    background: #FCA5A5;
}

.bf-mini-chart {
    height: 155px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    align-items: end;
}

.admin-mini-chart {
    grid-template-columns: repeat(5, 1fr);
}

.bf-chart-day {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    text-align: center;
    color: rgba(255,255,255,.82);
    font-size: 11px;
    font-weight: 800;
}

.bf-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 110px;
}

.bf-bars.single-bar .bf-bar {
    width: 24px;
}

.bf-bar {
    display: block;
    width: 12px;
    min-height: 8px;
    border-radius: 999px 999px 4px 4px;
    box-shadow: 0 10px 18px rgba(0,0,0,.16);
}

.bf-bar-sales {
    background: linear-gradient(180deg, #FDE68A, #C9930A);
}

.bf-bar-expenses {
    background: linear-gradient(180deg, #FCA5A5, #DC2626);
}

.bf-bar-trial {
    background: linear-gradient(180deg, #93C5FD, #2563EB);
}

.bf-bar-danger {
    background: linear-gradient(180deg, #FCA5A5, #991B1B);
}

.bf-bar-muted {
    background: linear-gradient(180deg, #D1D5DB, #6B7280);
}

@media (max-width: 760px) {
    .dashboard-hero-card {
        grid-template-columns: 1fr;
        padding: 20px;
        border-radius: 22px;
    }

    .bf-chart-wrap {
        min-height: 190px;
    }

    .bf-mini-chart {
        height: 140px;
        gap: 7px;
    }

    .hero-copy h2 {
        font-size: 24px;
    }
}

/* ============================================================
   Phase 1B.5 — Dashboard Space + Sidebar Overlay Fix
   Fixes:
   1. Dashboard hero should occupy the top space.
   2. Sidebar should not cover dashboard wording on desktop.
   3. Other pages should start closer to the top.
   ============================================================ */

/* Hide old page header only on dashboard pages because the graph is now the header */
body.page-dashboard .page-header,
body.admin-mode.page-index .page-header {
    display: none !important;
}

/* Dashboard graph should sit immediately below navbar */
body.page-dashboard .main-content,
body.admin-mode.page-index .main-content {
    padding-top: calc(var(--nav-h) + 10px) !important;
}

/* Other pages should not have dashboard-style whitespace */
body:not(.auth-body):not(.page-dashboard):not(.admin-mode.page-index) .main-content {
    padding-top: calc(var(--nav-h) + 8px) !important;
}

/* If subscription banner is present, preserve only necessary space */
body.has-sub-banner.page-dashboard .main-content,
body.has-sub-banner.admin-mode.page-index .main-content {
    padding-top: calc(var(--nav-h) + 44px) !important;
}

body.has-sub-banner:not(.auth-body):not(.page-dashboard):not(.admin-mode.page-index) .main-content {
    padding-top: calc(var(--nav-h) + 42px) !important;
}

/* Desktop sidebar should push content, not cover it */
@media (min-width: 900px) {
    .sidebar.open ~ .sidebar-overlay {
        display: none !important;
        pointer-events: none !important;
    }

    .sidebar.open ~ .main-content {
        width: calc(100% - 280px) !important;
        max-width: calc(100% - 280px) !important;
        margin-left: 280px !important;
        margin-right: 0 !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .sidebar.open ~ .main-content .dashboard-hero-card,
    .sidebar.open ~ .main-content .card,
    .sidebar.open ~ .main-content .stats-grid {
        max-width: 1120px !important;
    }
}

/* Make dashboard hero readable on narrower screens */
.dashboard-hero-card {
    width: 100% !important;
}

.dashboard-hero-card .hero-copy h2 {
    overflow-wrap: anywhere;
}

.dashboard-hero-card .hero-copy p {
    overflow-wrap: anywhere;
}

/* Prevent chart labels from being squeezed unreadably */
.bf-chart-day small {
    line-height: 1.25 !important;
    word-break: normal !important;
}

/* Mobile keeps sidebar as overlay */
@media (max-width: 899px) {
    .sidebar.open ~ .main-content {
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
        max-width: 700px !important;
    }
}

/* ============================================================
   Phase 1B.6 — Final Top Space Fix + BizFlow Layout Reset
   Purpose:
   - Stop fixed navbar from creating persistent blank space.
   - Keep navbar visible using sticky layout.
   - Make dashboard graph start immediately after navbar.
   - Keep other pages tight and readable.
   ============================================================ */

/* Logged-in app pages: use sticky navbar instead of fixed overlay */
body:not(.auth-body) .navbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    height: var(--nav-h) !important;
}

/* Main content should not reserve huge fixed-navbar space anymore */
body:not(.auth-body) .main-content {
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: calc(var(--bottom-h) + 24px) !important;
}

/* Dashboard graph becomes the hero, so no old page header above it */
body.page-dashboard .page-header,
body.admin-mode.page-index .page-header {
    display: none !important;
}

/* Dashboard graph should sit near the top */
body.page-dashboard .dashboard-hero-card,
body.admin-mode.page-index .dashboard-hero-card {
    margin-top: 0 !important;
}

/* Other pages should start cleanly near the top */
body:not(.auth-body):not(.page-dashboard):not(.admin-mode.page-index) .page-header {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Subscription banner should not create a giant top gap */
body:not(.auth-body).has-sub-banner .main-content {
    padding-top: 10px !important;
}

body:not(.auth-body) .sub-banner {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    z-index: 80 !important;
}

/* Make content never hide behind sidebar on desktop */
@media (min-width: 900px) {
    body:not(.auth-body) .main-content {
        max-width: 1120px !important;
        width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sidebar.open ~ .main-content {
        width: calc(100% - 312px) !important;
        max-width: calc(100% - 312px) !important;
        margin-left: 296px !important;
        margin-right: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Mobile stays centered and safe */
@media (max-width: 899px) {
    body:not(.auth-body) .main-content {
        width: 100% !important;
        max-width: 700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sidebar.open ~ .main-content {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 700px !important;
    }
}

/* ============================================================
   Phase 1B.7 — Final Dashboard Top Space Kill
   This overrides earlier fixed/sticky navbar spacing rules.
   ============================================================ */

body:not(.auth-body) {
    padding-top: 0 !important;
}

body:not(.auth-body) .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

body:not(.auth-body) .sub-banner {
    position: static !important;
    top: auto !important;
    z-index: 10 !important;
}

body:not(.auth-body) .main-content {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

body.page-dashboard .main-content,
body.admin-mode.page-index .main-content {
    padding-top: 6px !important;
}

body.page-dashboard .dashboard-hero-card,
body.admin-mode.page-index .dashboard-hero-card {
    margin-top: 0 !important;
}

body.page-dashboard .page-header,
body.admin-mode.page-index .page-header {
    display: none !important;
}

/* Remove extra top spacing on all normal content cards */
body:not(.auth-body) .main-content > :first-child {
    margin-top: 0 !important;
}

/* Make the first dashboard graph touch the usable area */
body.page-dashboard .main-content > .dashboard-hero-card:first-child,
body.admin-mode.page-index .main-content > .dashboard-hero-card:first-child {
    margin-top: 0 !important;
}

/* If any old banner class creates artificial spacing, neutralize it */
body.has-sub-banner .main-content {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* ============================================================
   Phase 1B.8 — Auto Show / Auto Hide Sidebar
   Sidebar becomes a smart overlay drawer and never pushes content.
   ============================================================ */

/* Sidebar is hidden by default */
body:not(.auth-body) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100dvh !important;
    transform: translateX(-102%) !important;
    transition: transform .24s ease, box-shadow .24s ease !important;
    z-index: 2000 !important;
}

/* Open sidebar by body class or old .open class */
body.bf-sidebar-open:not(.auth-body) .sidebar,
body:not(.auth-body) .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 18px 0 50px rgba(0,0,0,.28) !important;
}

/* Main content must NEVER move left/right because of sidebar */
body:not(.auth-body) .main-content,
body:not(.auth-body) .sidebar.open ~ .main-content,
body.bf-sidebar-open:not(.auth-body) .main-content {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    max-width: 1120px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Overlay only useful on mobile */
body:not(.auth-body) .sidebar-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 899px) {
    body.bf-sidebar-open:not(.auth-body) .sidebar-overlay {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1500 !important;
    }
}

/* Keep rail off auth/login pages */
body.auth-body /* Final top-space tightening */
body:not(.auth-body) {
    padding-top: 0 !important;
}

body:not(.auth-body) .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
}

body:not(.auth-body) .sub-banner {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
}

body:not(.auth-body) .main-content {
    margin-top: 0 !important;
    padding-top: 6px !important;
}

body.page-dashboard .main-content,
body.admin-mode.page-index .main-content {
    padding-top: 4px !important;
}

body.page-dashboard .dashboard-hero-card,
body.admin-mode.page-index .dashboard-hero-card {
    margin-top: 0 !important;
}

/* Hide old dashboard header permanently because graph is now the header */
body.page-dashboard .page-header,
body.admin-mode.page-index .page-header {
    display: none !important;
}

/* Small screens */
@media (max-width: 899px) {
    body:not(.auth-body) .main-content,
    body:not(.auth-body) .sidebar.open ~ .main-content,
    body.bf-sidebar-open:not(.auth-body) .main-content {
        width: 100% !important;
        max-width: 700px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ============================================================
   Phase 1C.1 — Ultra Premium BizFlow Landing Page
   ============================================================ */

.bf-landing-body {
    background:
        radial-gradient(circle at 18% 12%, rgba(201,147,10,.20), transparent 28%),
        radial-gradient(circle at 82% 0%, rgba(16,185,129,.16), transparent 26%),
        linear-gradient(180deg, #06140F 0%, #0B2D20 42%, #F4F7F4 42%, #F4F7F4 100%);
    color: #fff;
    min-height: 100vh;
}

.bf-landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(18px, 4vw, 56px);
    background: rgba(6,20,15,.72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.bf-landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: -.04em;
    font-size: 22px;
}

.bf-landing-brand .brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #0B2D20;
    background: linear-gradient(135deg, #FDE68A, #C9930A);
    box-shadow: 0 12px 30px rgba(201,147,10,.26);
}

.bf-landing-navlinks {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bf-landing-navlinks a {
    color: rgba(255,255,255,.78);
    font-weight: 800;
    font-size: 14px;
}

.bf-landing-navlinks .nav-login {
    color: #FDE68A;
}

.bf-landing-navlinks .nav-cta {
    color: #0B2D20;
    background: linear-gradient(135deg, #FDE68A, #C9930A);
    padding: 10px 15px;
    border-radius: 999px;
}

.bf-landing-main {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
}

.bf-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: clamp(54px, 8vw, 110px) 0 70px;
}

.bf-hero-badge,
.bf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FDE68A;
    background: rgba(253,230,138,.10);
    border: 1px solid rgba(253,230,138,.22);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bf-hero h1 {
    margin: 18px 0;
    font-size: clamp(42px, 6.4vw, 86px);
    line-height: .92;
    letter-spacing: -.075em;
    max-width: 820px;
}

.bf-hero-lead {
    color: rgba(255,255,255,.78);
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.55;
    max-width: 700px;
}

.bf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.bf-hero-actions.center {
    justify-content: center;
}

.bf-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid transparent;
}

.bf-btn-gold {
    color: #0B2D20;
    background: linear-gradient(135deg, #FDE68A, #C9930A);
    box-shadow: 0 16px 40px rgba(201,147,10,.26);
}

.bf-btn-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
}

.bf-trust-row {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.bf-trust-row span {
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 800;
}

.bf-hero-device {
    display: flex;
    justify-content: center;
}

.bf-phone-shell {
    width: min(360px, 100%);
    min-height: 620px;
    border-radius: 42px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        #091B14;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 42px 120px rgba(0,0,0,.45);
}

.bf-phone-top {
    width: 100px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.20);
    margin: 0 auto 28px;
}

.bf-phone-card {
    padding: 18px;
    border-radius: 24px;
    background: #fff;
    color: #0B2D20;
    margin-bottom: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
}

.bf-phone-card.dark {
    background: linear-gradient(135deg, #0B6B3A, #0B2D20);
    color: #fff;
}

.bf-phone-card span,
.bf-phone-card small {
    display: block;
    color: inherit;
    opacity: .70;
    font-weight: 800;
}

.bf-phone-card strong {
    display: block;
    font-size: 34px;
    letter-spacing: -.05em;
    margin: 4px 0;
}

.bf-bars-preview {
    height: 180px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 18px;
    margin: 16px 0;
    border-radius: 24px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.bf-bars-preview span {
    flex: 1;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #FDE68A, #C9930A);
}

.bf-wa-bubble {
    background: #25D366;
    color: #062014;
    border-radius: 999px;
    padding: 13px 16px;
    font-weight: 900;
    text-align: center;
}

.bf-loss-section {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    margin: 0 0 72px;
}

.bf-loss-card,
.bf-dark-panel,
.bf-final-cta,
.bf-wa-preview-card {
    border-radius: 32px;
    background: #fff;
    color: #0B2D20;
    padding: clamp(24px, 4vw, 42px);
    box-shadow: 0 24px 80px rgba(10,28,20,.12);
}

.bf-loss-card h2 {
    font-size: clamp(26px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: -.06em;
    margin-bottom: 12px;
}

.bf-loss-card p,
.bf-section-head p,
.bf-reason-card p,
.bf-business-card p,
.bf-wa-copy p,
.bf-final-cta p {
    color: #5C6B62;
    line-height: 1.65;
    font-size: 16px;
}

.bf-loss-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.bf-loss-metrics div {
    background: #0B2D20;
    color: #fff;
    border-radius: 26px;
    padding: 22px;
}

.bf-loss-metrics strong {
    display: block;
    font-size: 28px;
    letter-spacing: -.05em;
    color: #FDE68A;
}

.bf-loss-metrics span {
    color: rgba(255,255,255,.75);
}

.bf-section {
    padding: 72px 0;
    color: #0B2D20;
}

.bf-section-head {
    max-width: 760px;
    margin-bottom: 28px;
}

.bf-section-head h2,
.bf-wa-copy h2,
.bf-final-cta h2 {
    font-size: clamp(32px, 5vw, 60px);
    line-height: .98;
    letter-spacing: -.07em;
    margin: 14px 0;
}

.bf-business-grid,
.bf-reason-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.bf-business-card,
.bf-reason-card {
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 60px rgba(10,28,20,.08);
}

.bf-business-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #F4F0E4;
    font-size: 28px;
    margin-bottom: 16px;
}

.bf-business-card h3,
.bf-reason-card h3 {
    font-size: 20px;
    letter-spacing: -.04em;
    margin-bottom: 8px;
}

.bf-dark-panel {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.18), transparent 26%),
        linear-gradient(135deg, #06140F, #0B2D20);
    color: #fff;
}

.bf-dark-panel .bf-section-head p,
.bf-dark-panel .bf-reason-card p {
    color: rgba(255,255,255,.70);
}

.bf-dark-panel .bf-reason-card {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.13);
}

.bf-whatsapp-section {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 24px;
    align-items: center;
}

.bf-check-list {
    margin: 22px 0;
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.bf-check-list li {
    color: #0B2D20;
    font-weight: 800;
}

.bf-check-list li::before {
    content: "✅ ";
}

.bf-wa-preview-card {
    background: #E9FFF2;
    border: 1px solid rgba(37,211,102,.25);
}

.wa-header {
    font-weight: 900;
    margin-bottom: 14px;
}

.wa-message {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    color: #0B2D20;
    line-height: 1.65;
}

.bf-final-cta {
    text-align: center;
    margin: 50px 0;
}

.bf-landing-footer {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    padding: 30px 0 48px;
    color: #5C6B62;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(11,45,32,.10);
}

@media (max-width: 920px) {
    .bf-landing-navlinks a:not(.nav-login):not(.nav-cta) {
        display: none;
    }

    .bf-hero,
    .bf-loss-section,
    .bf-whatsapp-section {
        grid-template-columns: 1fr;
    }

    .bf-business-grid,
    .bf-reason-grid {
        grid-template-columns: 1fr;
    }

    .bf-landing-footer {
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .bf-landing-nav {
        padding: 14px;
    }

    .bf-landing-navlinks {
        gap: 8px;
    }

    .bf-landing-navlinks .nav-login {
        display: none;
    }

    .bf-hero {
        padding-top: 42px;
    }

    .bf-phone-shell {
        min-height: 520px;
        border-radius: 32px;
    }

    .bf-loss-metrics {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1C.2 — Premium WhatsApp Command Centre
   ============================================================ */

.wa-command-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: stretch;
    background:
        radial-gradient(circle at 10% 0%, rgba(37,211,102,.22), transparent 28%),
        linear-gradient(135deg, #062014, #0B6B3A);
    color: #fff;
    border-radius: 26px;
    padding: clamp(20px, 4vw, 32px);
    margin-bottom: 18px;
    box-shadow: 0 22px 60px rgba(11,45,32,.20);
}

.wa-command-hero h2 {
    font-size: clamp(26px, 4vw, 46px);
    line-height: 1;
    letter-spacing: -.06em;
    margin: 12px 0;
}

.wa-command-hero p {
    color: rgba(255,255,255,.78);
    max-width: 720px;
    line-height: 1.65;
}

.wa-health-card {
    display: grid;
    gap: 12px;
}

.wa-health-row {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 15px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
}

.wa-health-row span {
    font-size: 24px;
    grid-row: span 2;
}

.wa-health-row strong {
    color: #fff;
}

.wa-health-row small {
    color: rgba(255,255,255,.70);
    font-weight: 700;
}

.wa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.card-wa-highlight {
    border: 1px solid rgba(37,211,102,.22);
    box-shadow: 0 20px 60px rgba(37,211,102,.12);
}

.wa-preview {
    background:
        linear-gradient(180deg, #F0FFF6, #FFFFFF);
    border: 1px solid rgba(37,211,102,.18);
    border-radius: 18px;
    padding: 16px;
    color: #0B2D20;
    line-height: 1.65;
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.btn-wa {
    background: #25D366 !important;
    color: #062014 !important;
    border-color: #25D366 !important;
    font-weight: 900 !important;
}

.wa-debt-list .list-item {
    border-left: 4px solid #25D366;
}

@media (max-width: 820px) {
    .wa-command-hero,
    .wa-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1C.3 — Royal Premium Landing V2
   ============================================================ */

.bf-royal-landing {
    background:
        radial-gradient(circle at 12% 5%, rgba(253,230,138,.20), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(37,211,102,.14), transparent 24%),
        linear-gradient(180deg, #030806 0%, #06140F 44%, #F5F3EA 44%, #F5F3EA 100%);
    overflow-x: hidden;
}

.bf-royal-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 76px;
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    align-items: center;
    gap: 16px;
    padding: 14px clamp(16px, 4vw, 54px);
    background: rgba(3,8,6,.78);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(22px);
}

.bf-royal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.05em;
}

.bf-royal-brand .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #0B2D20;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    box-shadow: 0 16px 38px rgba(201,147,10,.28);
}

.bf-royal-menu {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
}

.bf-royal-menu a {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 900;
    padding: 10px 13px;
    border-radius: 999px;
}

.bf-royal-menu a:hover {
    color: #0B2D20;
    background: #FDE68A;
}

.bf-royal-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.royal-login {
    color: #FDE68A;
    font-weight: 900;
}

.royal-start {
    color: #0B2D20;
    font-weight: 950;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    padding: 11px 16px;
    border-radius: 999px;
    box-shadow: 0 16px 38px rgba(201,147,10,.24);
}

.bf-royal-main {
    width: min(1220px, calc(100% - 28px));
    margin: 0 auto;
}

.bf-royal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: clamp(26px, 5vw, 68px);
    align-items: center;
    padding: clamp(54px, 8vw, 104px) 0 42px;
    color: #fff;
}

.bf-hero-crown {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(253,230,138,.10);
    border: 1px solid rgba(253,230,138,.22);
    color: #FDE68A;
    font-size: 34px;
    box-shadow: 0 24px 70px rgba(201,147,10,.16);
}

.bf-royal-badge,
.bf-royal-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(253,230,138,.10);
    border: 1px solid rgba(253,230,138,.24);
    color: #FDE68A;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bf-royal-hero h1 {
    margin: 18px 0 16px;
    max-width: 820px;
    font-size: clamp(43px, 6.6vw, 86px);
    line-height: 1.02;
    letter-spacing: -.075em;
    overflow: visible;
    padding-bottom: .08em;
}

.bf-royal-hero h1 span {
    display: block;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .08em;
}

.bf-royal-hero p {
    max-width: 720px;
    color: rgba(255,255,255,.78);
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.65;
}

.bf-royal-cta-row {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bf-royal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 950;
    text-decoration: none;
    border: 1px solid transparent;
}

.bf-royal-btn.primary {
    color: #0B2D20;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    box-shadow: 0 18px 44px rgba(201,147,10,.28);
}

.bf-royal-btn.secondary {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
}

.bf-royal-proof {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.bf-royal-proof span {
    padding: 8px 11px;
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    font-size: 13px;
    font-weight: 850;
}

.bf-royal-dashboard-card {
    position: relative;
    border-radius: 36px;
    padding: 22px;
    min-height: 560px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
        #07140F;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 44px 120px rgba(0,0,0,.48);
}

.bf-royal-dashboard-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 28px;
    border: 1px solid rgba(253,230,138,.16);
    pointer-events: none;
}

.dash-top,
.dash-row,
.dash-profit {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    padding: 18px;
    color: #fff;
}

.dash-top,
.dash-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.dash-profit {
    margin: 16px 0;
    background: linear-gradient(135deg, #0B6B3A, #0B2D20);
}

.dash-profit span,
.dash-profit small,
.dash-row span,
.dash-top span {
    color: rgba(255,255,255,.70);
    font-weight: 850;
}

.dash-profit strong {
    display: block;
    font-size: 42px;
    letter-spacing: -.06em;
    margin: 8px 0;
    color: #FDE68A;
}

.dash-mini-bars {
    position: relative;
    z-index: 1;
    height: 190px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 22px;
    margin: 16px 0;
    border-radius: 26px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.dash-mini-bars i {
    flex: 1;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #FFF7BF, #C9930A);
    box-shadow: 0 16px 24px rgba(0,0,0,.22);
}

.dash-row.green {
    margin-top: 14px;
    background: rgba(37,211,102,.12);
    border-color: rgba(37,211,102,.24);
}

.bf-carousel-zone {
    margin: 10px 0 64px;
    color: #fff;
}

.bf-carousel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.bf-carousel-head span {
    color: #FDE68A;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}

.bf-carousel-head strong {
    max-width: 760px;
    text-align: right;
    font-size: clamp(18px, 2.4vw, 30px);
    line-height: 1.12;
}

.bf-image-marquee {
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 28px 90px rgba(0,0,0,.28);
}

.bf-image-track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 18px;
    animation: bfRoyalMarquee 42s linear infinite;
}

.bf-image-marquee:hover .bf-image-track {
    animation-play-state: paused;
}

.bf-image-slide {
    width: min(360px, 78vw);
    flex: 0 0 auto;
}

.bf-image-slide img {
    width: 100%;
    height: 248px;
    object-fit: cover;
    border-radius: 26px;
    display: block;
}

@keyframes bfRoyalMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.bf-royal-loss {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 24px;
    align-items: center;
    background: #fff;
    color: #0B2D20;
    border-radius: 36px;
    padding: clamp(28px, 5vw, 50px);
    box-shadow: 0 30px 90px rgba(10,28,20,.13);
}

.bf-royal-loss h2,
.bf-royal-section-head h2,
.bf-royal-whatsapp h2,
.bf-royal-pricing h2 {
    font-size: clamp(34px, 5.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -.07em;
    margin: 14px 0;
    overflow: visible;
    padding-bottom: .08em;
}

.bf-royal-loss p,
.bf-royal-section-head p,
.bf-royal-business-card p,
.bf-royal-reason-card p,
.bf-royal-whatsapp p,
.bf-royal-pricing p {
    color: #5C6B62;
    font-size: 16px;
    line-height: 1.7;
}

.bf-royal-section {
    padding: 76px 0;
    color: #0B2D20;
}

.bf-royal-section-head {
    max-width: 820px;
    margin-bottom: 28px;
}

.bf-royal-business-grid,
.bf-royal-reason-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.bf-royal-business-card,
.bf-royal-reason-card,
.price-card {
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    border-radius: 30px;
    padding: 26px;
    box-shadow: 0 20px 70px rgba(10,28,20,.09);
}

.bf-royal-business-card .biz-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: #F4F0E4;
    font-size: 30px;
    margin-bottom: 16px;
}

.bf-royal-business-card h3,
.bf-royal-reason-card h3 {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -.045em;
    margin-bottom: 9px;
}

.bf-why-panel {
    background:
        radial-gradient(circle at 12% 0%, rgba(253,230,138,.18), transparent 28%),
        linear-gradient(135deg, #06140F, #0B2D20);
    color: #fff;
    border-radius: 40px;
    padding-left: clamp(22px, 4vw, 44px);
    padding-right: clamp(22px, 4vw, 44px);
}

.bf-why-panel .bf-royal-section-head p,
.bf-why-panel .bf-royal-reason-card p {
    color: rgba(255,255,255,.72);
}

.bf-why-panel .bf-royal-reason-card {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.13);
}

.bf-royal-whatsapp {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 24px;
    align-items: center;
    color: #0B2D20;
    padding: 80px 0;
}

.bf-royal-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.bf-royal-checks span {
    background: #E8F5EE;
    color: #0B2D20;
    border: 1px solid rgba(11,107,58,.12);
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 900;
}

.bf-royal-checks span::before {
    content: "✅ ";
}

.bf-royal-wa-card {
    background: #E9FFF2;
    border: 1px solid rgba(37,211,102,.22);
    border-radius: 34px;
    padding: 28px;
    box-shadow: 0 28px 80px rgba(37,211,102,.13);
}

.bf-royal-wa-card .wa-title {
    font-weight: 950;
    margin-bottom: 14px;
    color: #0B2D20;
}

.bf-royal-wa-card .wa-text {
    background: #fff;
    color: #0B2D20;
    border-radius: 26px;
    padding: 22px;
    line-height: 1.75;
}

.bf-royal-pricing {
    text-align: center;
    color: #0B2D20;
    padding: 64px 0 80px;
}

.bf-royal-pricing h2 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.price-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
    gap: 18px;
    margin: 28px 0;
}

.price-card span,
.price-card small {
    display: block;
    color: #5C6B62;
    font-weight: 900;
}

.price-card strong {
    display: block;
    font-size: 46px;
    letter-spacing: -.06em;
    color: #0B2D20;
    margin: 8px 0 0;
}

.price-card.featured {
    background: linear-gradient(135deg, #0B2D20, #0B6B3A);
    color: #fff;
}

.price-card.featured strong,
.price-card.featured span {
    color: #FDE68A;
}

.price-card.featured small,
.price-card.featured p {
    color: rgba(255,255,255,.72);
}

.bf-royal-footer {
    width: min(1220px, calc(100% - 28px));
    margin: 0 auto;
    padding: 34px 0 54px;
    color: #5C6B62;
    border-top: 1px solid rgba(11,45,32,.10);
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

@media (max-width: 980px) {
    .bf-royal-nav {
        grid-template-columns: 1fr auto;
    }

    .bf-royal-menu {
        order: 3;
        grid-column: 1 / -1;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .bf-royal-actions {
        justify-self: end;
    }

    .bf-royal-hero,
    .bf-royal-loss,
    .bf-royal-whatsapp {
        grid-template-columns: 1fr;
    }

    .bf-royal-dashboard-card {
        min-height: auto;
    }

    .bf-royal-business-grid,
    .bf-royal-reason-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bf-carousel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bf-carousel-head strong {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .bf-royal-nav {
        padding: 12px;
        grid-template-columns: 1fr auto;
    }

    .bf-royal-actions .royal-login {
        display: none;
    }

    .bf-royal-menu a {
        white-space: nowrap;
    }

    .bf-royal-hero {
        padding-top: 34px;
    }

    .bf-hero-crown {
        display: none;
    }

    .bf-royal-hero h1 {
        font-size: clamp(39px, 13vw, 58px);
        line-height: 1.05;
    }

    .bf-royal-business-grid,
    .bf-royal-reason-grid,
    .price-cards {
        grid-template-columns: 1fr;
    }

    .bf-image-slide img {
        height: 220px;
    }

    .bf-royal-footer {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1C.4 — Landing Clipping Fix + AI Photo Carousel Polish
   ============================================================ */

/* Stop premium headings from clipping descenders or long words */
.bf-royal-hero h1,
.bf-royal-hero h1 span,
.bf-royal-loss h2,
.bf-royal-section-head h2,
.bf-royal-whatsapp h2,
.bf-royal-pricing h2,
.bf-section-head h2,
.bf-loss-card h2 {
    line-height: 1.12 !important;
    padding-top: .04em !important;
    padding-bottom: .18em !important;
    overflow: visible !important;
    text-wrap: balance;
}

/* Give cards enough internal space */
.bf-royal-business-card,
.bf-royal-reason-card,
.price-card,
.bf-royal-loss,
.bf-why-panel,
.bf-royal-wa-card {
    overflow: visible !important;
}

/* Prevent text cutting inside business cards */
.bf-royal-business-card h3,
.bf-royal-reason-card h3,
.bf-business-card h3,
.bf-reason-card h3 {
    line-height: 1.22 !important;
    padding-bottom: .08em !important;
    overflow: visible !important;
}

/* Make carousel image cards more spacious and photo-like */
.bf-image-marquee {
    border-radius: 38px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.bf-image-track {
    gap: 22px !important;
    padding: 22px !important;
}

.bf-image-slide {
    width: min(420px, 82vw) !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    background: #07140F !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.28) !important;
}

.bf-image-slide img {
    width: 100% !important;
    height: 278px !important;
    object-fit: cover !important;
    border-radius: 32px !important;
    display: block !important;
    transform: translateZ(0);
}

/* More premium carousel section */
.bf-carousel-zone {
    margin-top: 18px !important;
}

.bf-carousel-head {
    padding: 0 6px !important;
}

.bf-carousel-head strong {
    line-height: 1.22 !important;
    padding-bottom: .08em !important;
    overflow: visible !important;
}

/* Prevent nav/menu text clipping */
.bf-royal-menu a,
.bf-royal-brand,
.bf-royal-actions a {
    line-height: 1.25 !important;
    white-space: nowrap;
}

/* Extra safety on mobile */
@media (max-width: 640px) {
    .bf-royal-hero h1 {
        line-height: 1.12 !important;
        letter-spacing: -.055em !important;
    }

    .bf-image-slide {
        width: min(340px, 84vw) !important;
    }

    .bf-image-slide img {
        height: 238px !important;
    }
}

/* ============================================================
   Phase 1C.5 — Royal Premium Login + WhatsApp Test
   ============================================================ */

.bf-login-royal-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 10%, rgba(253,230,138,.20), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(37,211,102,.14), transparent 26%),
        linear-gradient(135deg, #030806 0%, #06140F 45%, #0B2D20 100%);
    color: #fff;
    overflow-x: hidden;
}

.bf-login-bg-orb {
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(4px);
    opacity: .55;
}

.bf-login-bg-orb.orb-one {
    width: 280px;
    height: 280px;
    left: -80px;
    bottom: 8%;
    background: rgba(201,147,10,.22);
}

.bf-login-bg-orb.orb-two {
    width: 360px;
    height: 360px;
    right: -120px;
    top: 8%;
    background: rgba(37,211,102,.14);
}

.bf-login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(24px, 5vw, 70px);
    align-items: center;
    padding: clamp(24px, 5vw, 54px) 0;
}

.bf-login-showcase {
    position: relative;
    min-height: 680px;
    display: grid;
    align-content: space-between;
    padding: clamp(26px, 4vw, 42px);
    border-radius: 42px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 42px 120px rgba(0,0,0,.35);
    overflow: hidden;
}

.bf-login-showcase::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 32px;
    border: 1px solid rgba(253,230,138,.15);
    pointer-events: none;
}

.bf-login-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.05em;
}

.bf-login-brand span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #0B2D20;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    box-shadow: 0 18px 44px rgba(201,147,10,.26);
}

.bf-login-crown {
    position: absolute;
    top: 34px;
    right: 34px;
    color: #FDE68A;
    font-size: 42px;
    opacity: .85;
}

.bf-login-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.bf-login-badge {
    display: inline-flex;
    width: fit-content;
    padding: 9px 13px;
    border-radius: 999px;
    color: #FDE68A;
    background: rgba(253,230,138,.10);
    border: 1px solid rgba(253,230,138,.22);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bf-login-copy h1 {
    margin: 18px 0 14px;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -.075em;
    padding-bottom: .12em;
}

.bf-login-copy p {
    color: rgba(255,255,255,.76);
    line-height: 1.7;
    font-size: 18px;
}

.bf-login-preview {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
}

.preview-top,
.preview-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-radius: 22px;
    padding: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
}

.preview-top span,
.preview-row span {
    color: rgba(255,255,255,.72);
    font-weight: 850;
}

.preview-top strong {
    color: #FDE68A;
    font-size: 28px;
    letter-spacing: -.05em;
}

.preview-row strong {
    color: #25D366;
}

.preview-bars {
    height: 155px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
}

.preview-bars i {
    flex: 1;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #FFF7BF, #C9930A);
}

.bf-login-card {
    position: relative;
    padding: clamp(24px, 4vw, 42px);
    border-radius: 38px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
    color: #0B2D20;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 42px 120px rgba(0,0,0,.28);
}

.bf-login-lang {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.bf-login-lang select {
    border: 1px solid rgba(11,45,32,.12);
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 900;
    background: #F7F7F2;
    color: #0B2D20;
}

.bf-login-card-head {
    text-align: center;
    margin-bottom: 22px;
}

.mini-crown {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0B2D20, #0B6B3A);
    color: #FDE68A;
    font-size: 28px;
}

.bf-login-card-head h2 {
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -.06em;
    margin: 0 0 8px;
}

.bf-login-card-head p {
    color: #5C6B62;
    margin: 0;
}

.royal-input {
    min-height: 54px;
    border-radius: 18px !important;
    background: #F8FAF8 !important;
    border: 1px solid rgba(11,45,32,.12) !important;
}

.royal-login-btn {
    min-height: 54px;
    border-radius: 18px !important;
    font-weight: 950 !important;
    background: linear-gradient(135deg, #0B2D20, #0B6B3A) !important;
    box-shadow: 0 18px 46px rgba(11,45,32,.22) !important;
}

.bf-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: #6B7A70;
    font-size: 13px;
    font-weight: 900;
}

.bf-login-divider::before,
.bf-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(11,45,32,.12);
}

.bf-login-create {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 18px;
    font-weight: 950;
    color: #0B2D20;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    box-shadow: 0 16px 38px rgba(201,147,10,.20);
}

.bf-demo-access {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    background: #F4F0E4;
    border: 1px solid rgba(201,147,10,.20);
    display: grid;
    gap: 10px;
}

.bf-demo-access strong {
    display: block;
}

.bf-demo-access span {
    color: #6B7A70;
    font-size: 13px;
}

.bf-demo-access code {
    color: #0B2D20;
    background: rgba(11,45,32,.08);
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 900;
}

/* WhatsApp test */
.wa-test-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: start;
}

.check-list-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.check-list-premium span {
    display: block;
    padding: 14px;
    border-radius: 18px;
    background: #E9FFF2;
    border: 1px solid rgba(37,211,102,.20);
    font-weight: 850;
    color: #0B2D20;
}

.check-list-premium span::before {
    content: "✅ ";
}

.mini-action-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-left: 5px solid #25D366;
}

.mini-action-card p {
    margin: 5px 0 0;
    color: #5C6B62;
}

@media (max-width: 900px) {
    .bf-login-shell,
    .wa-test-grid {
        grid-template-columns: 1fr;
    }

    .bf-login-showcase {
        min-height: auto;
    }

    .check-list-premium {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .bf-login-showcase {
        display: none;
    }

    .bf-login-shell {
        padding: 18px 0;
    }

    .bf-login-card {
        border-radius: 28px;
    }
}

/* ============================================================
   Phase 1C.6 — Ultra Premium WhatsApp Command Polish
   ============================================================ */

body.page-whatsapp .main-content {
    max-width: 1180px !important;
}

body.page-whatsapp .page-header {
    display: none;
}

body.page-whatsapp .wa-command-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 8% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 90% 12%, rgba(37,211,102,.18), transparent 26%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

body.page-whatsapp .wa-command-hero::after {
    content: "♛";
    position: absolute;
    right: 28px;
    top: 20px;
    color: rgba(253,230,138,.18);
    font-size: 110px;
    line-height: 1;
}

body.page-whatsapp .wa-command-hero h2 {
    max-width: 720px;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -.07em;
    padding-bottom: .12em;
}

body.page-whatsapp .wa-command-hero p {
    max-width: 780px;
    font-size: 16px;
}

body.page-whatsapp .wa-health-card {
    position: relative;
    z-index: 2;
}

body.page-whatsapp .wa-health-row {
    backdrop-filter: blur(18px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
}

body.page-whatsapp .card {
    border-radius: 28px;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 22px 70px rgba(10,28,20,.09);
}

body.page-whatsapp .card-title {
    letter-spacing: -.045em;
}

body.page-whatsapp .wa-grid {
    align-items: stretch;
}

body.page-whatsapp .wa-preview {
    min-height: 180px;
    background:
        radial-gradient(circle at 8% 0%, rgba(253,230,138,.18), transparent 26%),
        linear-gradient(180deg, #FFFFFF 0%, #F3FFF7 100%);
    border: 1px solid rgba(37,211,102,.18);
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
    color: #0B2D20;
    font-family: "DM Sans", system-ui, sans-serif;
}

body.page-whatsapp .btn-wa {
    border-radius: 999px !important;
    box-shadow: 0 18px 46px rgba(37,211,102,.22) !important;
}

body.page-whatsapp .form-input {
    border-radius: 16px;
}

body.page-whatsapp .list-item {
    border-radius: 20px;
    background: #fff;
}

body.page-whatsapp .list-item-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mini-action-card {
    border-radius: 24px;
    background:
        linear-gradient(135deg, #FFFFFF 0%, #F3FFF7 100%);
    border: 1px solid rgba(37,211,102,.18);
    box-shadow: 0 18px 60px rgba(37,211,102,.08);
}

.mini-action-card strong {
    letter-spacing: -.03em;
}

@media (max-width: 820px) {
    body.page-whatsapp .wa-command-hero {
        min-height: auto;
    }

    body.page-whatsapp .wa-command-hero h2 {
        font-size: 32px;
    }

    .mini-action-card {
        display: grid;
    }
}

/* ============================================================
   Phase 1C.6 — Package Cards
   ============================================================ */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.plan-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 22px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.08);
}

.plan-card.featured {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        linear-gradient(135deg, #06140F, #0B2D20);
    color: #fff;
}

.plan-badge {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(11,107,58,.10);
    color: #0B6B3A;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.plan-card.featured .plan-badge {
    color: #0B2D20;
    background: #FDE68A;
}

.plan-card h3 {
    font-size: 40px;
    letter-spacing: -.06em;
    margin: 12px 0 0;
}

.plan-card small {
    display: block;
    margin-bottom: 14px;
    color: #6B7A70;
    font-weight: 850;
}

.plan-card.featured small,
.plan-card.featured li {
    color: rgba(255,255,255,.78);
}

.plan-card ul {
    display: grid;
    gap: 9px;
    padding: 0;
    list-style: none;
    margin: 0;
}

.plan-card li {
    color: #43534A;
    font-weight: 780;
}

.plan-card li::before {
    content: "✅ ";
}

.payment-flow-box {
    margin-top: 16px;
    border-radius: 22px;
    padding: 18px;
    background: #FFF8DB;
    border: 1px solid rgba(201,147,10,.22);
}

.payment-flow-box h3 {
    margin: 0 0 8px;
    letter-spacing: -.04em;
}

.payment-flow-box p {
    color: #5C6B62;
    line-height: 1.65;
}

.payment-flow-box strong {
    color: #0B2D20;
}

@media (max-width: 760px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1C.7 — Support WhatsApp + FAQ Chatbot + Package Selection
   ============================================================ */

.package-status-card {
    border-left: 5px solid #C9930A;
}

.package-actions-card {
    margin: 18px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.selectable-plan {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.selectable-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.selectable-plan.selected {
    border-color: #C9930A !important;
    box-shadow: 0 22px 70px rgba(201,147,10,.20);
    transform: translateY(-2px);
}

.plan-best-for {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(201,147,10,.10);
    font-weight: 850;
    color: #0B2D20;
}

.plan-card.featured .plan-best-for {
    background: rgba(253,230,138,.14);
    color: #FDE68A;
}

.package-action-highlight {
    border-left: 5px solid #C9930A;
    background: linear-gradient(135deg, #FFFFFF, #FFF8DB);
}

.bf-support-widget {
    position: fixed;
    right: 18px;
    bottom: calc(var(--bottom-h) + 18px);
    z-index: 2600;
}

.bf-support-main {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #25D366, #0B6B3A);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 18px 52px rgba(37,211,102,.32);
    cursor: pointer;
}

.bf-support-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(360px, calc(100vw - 28px));
    background: #fff;
    color: #0B2D20;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 90px rgba(0,0,0,.26);
    border: 1px solid rgba(11,45,32,.10);
    display: none;
}

.bf-support-panel.open {
    display: block;
}

.bf-support-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 26%),
        linear-gradient(135deg, #06140F, #0B2D20);
}

.bf-support-head strong,
.bf-support-head span {
    display: block;
}

.bf-support-head span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    margin-top: 3px;
}

.bf-support-head button {
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 12px;
    width: 34px;
    height: 34px;
    font-size: 20px;
    cursor: pointer;
}

.bf-support-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    gap: 8px;
    background: #F4F7F4;
}

.bf-support-tabs button {
    border: 0;
    border-radius: 999px;
    padding: 9px;
    font-weight: 900;
    cursor: pointer;
    background: transparent;
    color: #0B2D20;
}

.bf-support-tabs button.active {
    background: #0B2D20;
    color: #FDE68A;
}

.bf-support-body {
    padding: 14px;
}

.bf-bot-msg,
.bf-bot-answer {
    border-radius: 16px;
    padding: 11px 12px;
    line-height: 1.5;
    font-size: 13px;
}

.bf-bot-msg.bot {
    background: #F4F0E4;
    color: #0B2D20;
}

.bf-faq-buttons {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.bf-faq-buttons button {
    text-align: left;
    border: 1px solid rgba(11,45,32,.10);
    background: #fff;
    color: #0B2D20;
    border-radius: 14px;
    padding: 10px 11px;
    font-weight: 850;
    cursor: pointer;
}

.bf-faq-buttons button:hover {
    border-color: #C9930A;
    background: #FFF8DB;
}

.bf-bot-answer {
    display: none;
    background: #E9FFF2;
    border: 1px solid rgba(37,211,102,.18);
}

.bf-bot-answer.show {
    display: block;
}

@media (max-width: 700px) {
    .bf-support-widget {
        right: 12px;
        bottom: calc(var(--bottom-h) + 12px);
    }

    .package-actions-card {
        display: grid;
    }
}

/* ============================================================
   Phase 1C.7B — Force Visible Support Widget
   ============================================================ */

.bf-support-widget {
    position: fixed !important;
    right: 20px !important;
    bottom: 24px !important;
    z-index: 99999 !important;
    display: block !important;
    pointer-events: auto !important;
}

body:not(.auth-body) .bf-support-widget {
    bottom: calc(var(--bottom-h, 74px) + 22px) !important;
}

.bf-landing-body .bf-support-widget,
.bf-login-royal-body .bf-support-widget,
.auth-body .bf-support-widget {
    bottom: 24px !important;
}

.bf-support-main {
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #25D366, #0B6B3A) !important;
    color: #fff !important;
    font-size: 28px !important;
    box-shadow: 0 20px 58px rgba(37,211,102,.38) !important;
    cursor: pointer !important;
}

.bf-support-main::after {
    content: "Help";
    position: absolute;
    right: 72px;
    top: 50%;
    transform: translateY(-50%);
    background: #0B2D20;
    color: #FDE68A;
    border: 1px solid rgba(253,230,138,.22);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.bf-support-panel {
    position: absolute !important;
    right: 0 !important;
    bottom: 78px !important;
    width: min(380px, calc(100vw - 28px)) !important;
    background: #fff !important;
    color: #0B2D20 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 100px rgba(0,0,0,.30) !important;
    border: 1px solid rgba(11,45,32,.12) !important;
    display: none !important;
}

.bf-support-panel.open {
    display: block !important;
}

.bf-support-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 26%),
        linear-gradient(135deg, #06140F, #0B2D20) !important;
}

.bf-support-head strong,
.bf-support-head span {
    display: block !important;
}

.bf-support-head span {
    color: rgba(255,255,255,.72) !important;
    font-size: 12px !important;
    margin-top: 3px !important;
}

.bf-support-head button {
    border: 0 !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-radius: 12px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

.bf-support-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 10px !important;
    gap: 8px !important;
    background: #F4F7F4 !important;
}

.bf-support-tabs button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    background: transparent !important;
    color: #0B2D20 !important;
}

.bf-support-tabs button.active {
    background: #0B2D20 !important;
    color: #FDE68A !important;
}

.bf-support-body {
    padding: 14px !important;
}

.bf-bot-msg,
.bf-bot-answer {
    border-radius: 16px !important;
    padding: 11px 12px !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
}

.bf-bot-msg.bot {
    background: #F4F0E4 !important;
    color: #0B2D20 !important;
}

.bf-faq-buttons {
    display: grid !important;
    gap: 8px !important;
    margin: 12px 0 !important;
}

.bf-faq-buttons button {
    text-align: left !important;
    border: 1px solid rgba(11,45,32,.10) !important;
    background: #fff !important;
    color: #0B2D20 !important;
    border-radius: 14px !important;
    padding: 10px 11px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.bf-bot-answer {
    display: none !important;
    background: #E9FFF2 !important;
    border: 1px solid rgba(37,211,102,.18) !important;
}

.bf-bot-answer.show {
    display: block !important;
}

@media (max-width: 700px) {
    .bf-support-widget {
        right: 12px !important;
        bottom: calc(var(--bottom-h, 74px) + 14px) !important;
    }

    .bf-landing-body .bf-support-widget,
    .bf-login-royal-body .bf-support-widget,
    .auth-body .bf-support-widget {
        bottom: 16px !important;
    }

    .bf-support-main::after {
        display: none !important;
    }
}

/* ============================================================
   Phase 1C.7C — Zuri Animated Support Assistant
   ============================================================ */

.zuri-wave-button {
    position: relative !important;
    overflow: visible !important;
    animation: zuriFloat 3s ease-in-out infinite;
}

.zuri-avatar {
    position: relative;
    z-index: 2;
    display: inline-block;
    transform-origin: 70% 70%;
    animation: zuriWave 1.8s ease-in-out infinite;
}

.zuri-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    background: rgba(37,211,102,.25);
    animation: zuriPulse 2.2s ease-out infinite;
    z-index: 1;
}

.zuri-greeting {
    position: absolute;
    right: 76px;
    bottom: 8px;
    min-width: 190px;
    border: 1px solid rgba(253,230,138,.24);
    border-radius: 22px 22px 6px 22px;
    padding: 11px 14px;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.18), transparent 30%),
        linear-gradient(135deg, #06140F, #0B2D20);
    color: #fff;
    box-shadow: 0 20px 58px rgba(0,0,0,.28);
    cursor: pointer;
    text-align: left;
    animation: zuriGreetingNudge 4.5s ease-in-out infinite;
}

.zuri-greeting strong {
    display: block;
    color: #FDE68A;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .02em;
}

.zuri-greeting span {
    display: block;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 800;
    margin-top: 2px;
}

.zuri-greeting::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 14px;
    width: 16px;
    height: 16px;
    background: #0B2D20;
    transform: rotate(45deg);
    border-right: 1px solid rgba(253,230,138,.18);
    border-top: 1px solid rgba(253,230,138,.18);
}

.bf-support-main::after {
    display: none !important;
}

@keyframes zuriWave {
    0%, 100% { transform: rotate(0deg); }
    12% { transform: rotate(18deg); }
    24% { transform: rotate(-10deg); }
    36% { transform: rotate(16deg); }
    48% { transform: rotate(-6deg); }
    60% { transform: rotate(8deg); }
    72% { transform: rotate(0deg); }
}

@keyframes zuriPulse {
    0% {
        opacity: .75;
        transform: scale(.88);
    }
    70% {
        opacity: 0;
        transform: scale(1.35);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes zuriFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes zuriGreetingNudge {
    0%, 100% { transform: translateX(0); }
    7% { transform: translateX(-4px); }
    14% { transform: translateX(0); }
}

/* When the support panel is open, hide the greeting bubble to avoid clutter */
.bf-support-panel.open ~ .zuri-greeting,
.bf-support-widget:has(.bf-support-panel.open) .zuri-greeting {
    display: none !important;
}

@media (max-width: 700px) {
    .zuri-greeting {
        right: 0;
        bottom: 76px;
        min-width: 178px;
        border-radius: 22px 22px 22px 6px;
    }

    .zuri-greeting::after {
        right: 22px;
        bottom: -7px;
        transform: rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zuri-wave-button,
    .zuri-avatar,
    .zuri-pulse,
    .zuri-greeting {
        animation: none !important;
    }
}

/* ============================================================
   Phase 1C.8 — Zuri Image Assistant
   Replaces emoji support button with generated BizFlow assistant.
   ============================================================ */

.zuri-wave-button {
    width: 78px !important;
    height: 78px !important;
    padding: 0 !important;
    border: 3px solid rgba(253,230,138,.78) !important;
    background:
        radial-gradient(circle at 35% 15%, rgba(253,230,138,.35), transparent 34%),
        linear-gradient(135deg, #06140F, #0B6B3A) !important;
    overflow: hidden !important;
}

.zuri-avatar-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transform-origin: 55% 62% !important;
    animation: zuriImageWave 2.6s ease-in-out infinite !important;
}

.zuri-avatar-image picture,
.zuri-avatar-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.zuri-avatar-image img {
    object-fit: cover !important;
    object-position: 42% 22% !important;
    transform: scale(1.28) translateY(4px);
}

.zuri-pulse {
    inset: -10px !important;
    background: rgba(253,230,138,.25) !important;
}

.zuri-greeting {
    right: 92px !important;
    bottom: 12px !important;
    min-width: 215px !important;
    border: 1px solid rgba(253,230,138,.32) !important;
    box-shadow: 0 24px 68px rgba(0,0,0,.30) !important;
}

.zuri-greeting strong::before {
    content: "👋 ";
}

.zuri-panel-head {
    align-items: center !important;
}

.zuri-panel-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.zuri-panel-photo {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    display: block !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 2px solid rgba(253,230,138,.55) !important;
    background: #0B2D20 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}

.zuri-panel-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 42% 22% !important;
    transform: scale(1.24) translateY(3px);
}

@keyframes zuriImageWave {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    18% {
        transform: rotate(5deg) translateY(-2px);
    }
    36% {
        transform: rotate(-3deg) translateY(0);
    }
    54% {
        transform: rotate(4deg) translateY(-1px);
    }
    72% {
        transform: rotate(0deg) translateY(0);
    }
}

@media (max-width: 700px) {
    .zuri-wave-button {
        width: 68px !important;
        height: 68px !important;
    }

    .zuri-greeting {
        right: 0 !important;
        bottom: 84px !important;
        min-width: 205px !important;
    }
}

/* ============================================================
   Phase 1C.9 — BizFlow Royal Brand Logo System
   ============================================================ */

/* Landing logo — big and visible */
.bf-brand-image-link {
    width: 230px !important;
    max-width: 42vw !important;
    height: 74px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

.bf-brand-image-link picture,
.bf-brand-image-link img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.bf-brand-image-link img {
    object-fit: contain !important;
    object-position: left center !important;
    filter: drop-shadow(0 12px 30px rgba(201,147,10,.22));
}

/* Login page logo — premium and dominant */
.bf-login-brand-image {
    width: 260px !important;
    max-width: 72vw !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

.bf-login-brand-image picture,
.bf-login-brand-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.bf-login-brand-image img {
    object-fit: contain !important;
    object-position: left center !important;
    filter: drop-shadow(0 18px 38px rgba(201,147,10,.26));
}

/* Logged-in top icon */
.nav-logo-image {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #06140F !important;
    border: 1px solid rgba(253,230,138,.34) !important;
    box-shadow: 0 14px 34px rgba(11,45,32,.18) !important;
}

.nav-logo-image picture,
.nav-logo-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.nav-logo-image img {
    object-fit: cover !important;
    object-position: center !important;
}

/* Sidebar brand — large, visible, premium */
.sidebar-logo-image {
    display: block !important;
    width: 190px !important;
    height: 116px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: #06140F !important;
    border: 1px solid rgba(253,230,138,.20) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.20) !important;
}

.sidebar-logo-image picture,
.sidebar-logo-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.sidebar-logo-image img {
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(1.08);
}

/* Fix nav grid to allow larger logo */
.bf-royal-nav {
    grid-template-columns: 260px 1fr 220px !important;
}

/* On small screens keep logo visible but not overwhelming */
@media (max-width: 980px) {
    .bf-royal-nav {
        grid-template-columns: 1fr auto !important;
    }

    .bf-brand-image-link {
        width: 190px !important;
        height: 62px !important;
    }
}

@media (max-width: 640px) {
    .bf-brand-image-link {
        width: 162px !important;
        height: 54px !important;
        max-width: 58vw !important;
    }

    .bf-login-brand-image {
        width: 220px !important;
        height: 78px !important;
    }

    .nav-logo-image {
        width: 48px !important;
        height: 48px !important;
    }

    .sidebar-logo-image {
        width: 170px !important;
        height: 104px !important;
    }
}

/* ============================================================
   Phase 1C.11 — New Light Logo Everywhere
   Official BizFlow brand identity replacement.
   ============================================================ */

/* Landing navbar logo */
.bf-brand-image-link,
.bf-brand-light-logo {
    width: 270px !important;
    height: 88px !important;
    max-width: 45vw !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.bf-brand-image-link picture,
.bf-brand-image-link img,
.bf-brand-light-logo picture,
.bf-brand-light-logo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.bf-brand-image-link img,
.bf-brand-light-logo img {
    object-fit: contain !important;
    object-position: left center !important;
    filter:
        drop-shadow(0 12px 28px rgba(201,147,10,.22))
        drop-shadow(0 2px 10px rgba(0,0,0,.20)) !important;
}

/* Login page logo */
.bf-login-brand-image {
    width: 300px !important;
    height: 110px !important;
    max-width: 78vw !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.bf-login-brand-image picture,
.bf-login-brand-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.bf-login-brand-image img {
    object-fit: contain !important;
    object-position: left center !important;
    filter:
        drop-shadow(0 18px 42px rgba(201,147,10,.26))
        drop-shadow(0 2px 12px rgba(0,0,0,.24)) !important;
}

/* Logged-in top logo */
.nav-logo-light-image,
.nav-logo-image {
    width: 86px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.nav-logo-light-image picture,
.nav-logo-light-image img,
.nav-logo-image picture,
.nav-logo-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.nav-logo-light-image img,
.nav-logo-image img {
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)) !important;
}

/* Sidebar logo */
.sidebar-logo-light-image,
.sidebar-logo-image {
    display: block !important;
    width: 210px !important;
    height: 130px !important;
    overflow: visible !important;
    border-radius: 22px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sidebar-logo-light-image picture,
.sidebar-logo-light-image img,
.sidebar-logo-image picture,
.sidebar-logo-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.sidebar-logo-light-image img,
.sidebar-logo-image img {
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.20)) !important;
}

/* Hero logo */
.bf-hero-light-logo {
    width: min(460px, 82vw) !important;
    height: 152px !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Remove previous dark-logo visual boxes */
.nav-logo-image,
.sidebar-logo-image,
.bf-login-brand-image,
.bf-brand-image-link {
    background-color: transparent !important;
}

/* Mobile */
@media (max-width: 980px) {
    .bf-brand-image-link,
    .bf-brand-light-logo {
        width: 220px !important;
        height: 74px !important;
        max-width: 58vw !important;
    }

    .bf-login-brand-image {
        width: 250px !important;
        height: 92px !important;
    }
}

@media (max-width: 640px) {
    .bf-brand-image-link,
    .bf-brand-light-logo {
        width: 182px !important;
        height: 62px !important;
        max-width: 64vw !important;
    }

    .bf-login-brand-image {
        width: 224px !important;
        height: 82px !important;
    }

    .nav-logo-light-image,
    .nav-logo-image {
        width: 72px !important;
        height: 48px !important;
    }

    .sidebar-logo-light-image,
    .sidebar-logo-image {
        width: 184px !important;
        height: 118px !important;
    }

    .bf-hero-light-logo {
        width: min(330px, 86vw) !important;
        height: 112px !important;
    }
}

/* ============================================================
   Phase 1D.1 — Package Selection + Activation Request
   ============================================================ */

body.page-plan .main-content {
    max-width: 1180px !important;
}

body.page-plan .page-header {
    display: none !important;
}

.package-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.package-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    line-height: 1;
    color: rgba(253,230,138,.14);
}

.package-hero > * {
    position: relative;
    z-index: 1;
}

.package-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.4vw, 68px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.package-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.76);
    font-size: 16px;
    line-height: 1.7;
}

.package-hero-status {
    display: grid;
    gap: 12px;
    align-content: center;
}

.package-status-pill {
    border-radius: 22px;
    padding: 15px 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.package-status-pill span {
    display: block;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.package-status-pill strong {
    display: block;
    color: #fff;
    font-size: 22px;
    letter-spacing: -.04em;
    margin-top: 4px;
}

.package-status-pill.gold strong {
    color: #FDE68A;
}

.royal-plan-grid {
    margin-top: 16px;
}

.selectable-plan {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.selectable-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.selectable-plan.selected {
    border-color: #C9930A !important;
    box-shadow: 0 24px 80px rgba(201,147,10,.22);
    transform: translateY(-3px);
}

.plan-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plan-name-row h2 {
    font-size: 32px;
    letter-spacing: -.06em;
    margin: 12px 0 0;
}

.plan-name-row em {
    font-style: normal;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 7px 10px;
    border-radius: 999px;
    background: #FDE68A;
    color: #0B2D20;
}

.plan-best-for {
    margin: 14px 0;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(201,147,10,.10);
    color: #0B2D20;
    font-weight: 850;
    line-height: 1.45;
}

.plan-card.featured .plan-best-for {
    background: rgba(253,230,138,.14);
    color: #FDE68A;
}

.package-actions-card {
    margin: 18px 0 20px;
    padding: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 60px rgba(10,28,20,.08);
}

.package-payment-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 18px;
    align-items: stretch;
}

.payment-instruction-card,
.activation-message-card,
.package-note-card {
    border-radius: 28px !important;
}

.pay-amount-display {
    display: grid;
    gap: 5px;
    padding: 20px;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(253,230,138,.20), transparent 30%),
        linear-gradient(135deg, #06140F, #0B2D20);
    margin-bottom: 16px;
}

.pay-amount-display span,
.pay-amount-display small {
    color: rgba(255,255,255,.72);
    font-weight: 900;
}

.pay-amount-display strong {
    color: #FDE68A;
    font-size: 38px;
    letter-spacing: -.06em;
}

.payment-steps {
    display: grid;
    gap: 10px;
}

.payment-steps div {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.payment-steps strong {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #0B2D20;
    background: #FDE68A;
}

.payment-steps span {
    color: #43534A;
    font-weight: 780;
}

.package-note-card {
    margin-top: 18px;
    background: #FFF8DB !important;
    border: 1px solid rgba(201,147,10,.22) !important;
}

.package-note-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.package-note-card strong {
    color: #0B2D20;
}

.package-action-highlight {
    border-left: 5px solid #C9930A;
    background: linear-gradient(135deg, #FFFFFF, #FFF8DB);
}

@media (max-width: 900px) {
    .package-hero,
    .package-payment-grid {
        grid-template-columns: 1fr;
    }

    .package-hero h1 {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .package-actions-card {
        display: grid;
    }

    .package-actions-card .btn {
        width: 100%;
    }

    .plan-name-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1D.2 — Admin Subscription Activation Dashboard
   ============================================================ */

body.admin-mode.page-subscriptions .main-content,
body.admin-mode.page-payments .main-content {
    max-width: 1240px !important;
}

body.admin-mode.page-subscriptions .page-header,
body.admin-mode.page-payments .page-header {
    display: none !important;
}

.admin-activation-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.admin-activation-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.admin-activation-hero > * {
    position: relative;
    z-index: 1;
}

.admin-activation-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.admin-activation-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

.admin-activation-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: center;
}

.admin-activation-stats div {
    border-radius: 22px;
    padding: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.admin-activation-stats span {
    display: block;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.admin-activation-stats strong {
    display: block;
    color: #fff;
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -.05em;
    margin-top: 4px;
}

.admin-activation-stats .gold strong {
    color: #FDE68A;
}

.royal-filter-tabs {
    margin-bottom: 18px;
}

.royal-filter-tabs .ftab span {
    margin-left: 5px;
    opacity: .7;
    font-size: 12px;
}

.admin-sub-command-grid {
    display: grid;
    gap: 16px;
}

.admin-sub-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 20px 70px rgba(10,28,20,.09);
}

.admin-sub-card.needs-action {
    border-color: rgba(201,147,10,.28);
    box-shadow: 0 24px 80px rgba(201,147,10,.14);
}

.admin-sub-card.needs-action::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #FDE68A, #C9930A);
}

.admin-sub-card-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.admin-sub-kicker {
    color: #C9930A;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.admin-sub-card h2 {
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -.055em;
    margin: 0 0 4px;
}

.admin-sub-card p {
    color: #5C6B62;
    margin: 0;
}

.admin-status-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.admin-plan-row,
.admin-sub-dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.admin-plan-row div,
.admin-sub-dates div {
    border-radius: 20px;
    padding: 14px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.admin-plan-row div.highlight {
    background: #FFF8DB;
    border-color: rgba(201,147,10,.28);
}

.admin-plan-row span,
.admin-sub-dates span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.admin-plan-row strong,
.admin-sub-dates strong {
    display: block;
    color: #0B2D20;
    font-size: 20px;
    letter-spacing: -.04em;
    margin-top: 4px;
}

.admin-sub-dates small {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    margin-top: 2px;
}

.admin-request-note {
    border-radius: 18px;
    padding: 12px 14px;
    background: #FFF8DB;
    border: 1px solid rgba(201,147,10,.22);
    color: #0B2D20;
    font-weight: 850;
    margin: 12px 0;
}

.admin-sub-actions,
.admin-sub-mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-top: 14px;
}

.admin-sub-mini-actions {
    padding-top: 12px;
    border-top: 1px solid rgba(11,45,32,.08);
}

.admin-sub-mini-actions form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-sub-mini-actions .form-input {
    width: 110px;
    padding: 7px 9px;
    font-size: 13px;
}

.payment-command-card {
    border-radius: 30px !important;
}

.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.payment-preview-card {
    display: grid;
    gap: 5px;
    padding: 18px;
    border-radius: 24px;
    margin: 4px 0;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(253,230,138,.20), transparent 30%),
        linear-gradient(135deg, #06140F, #0B2D20);
}

.payment-preview-card span,
.payment-preview-card small {
    color: rgba(255,255,255,.72);
    font-weight: 850;
}

.payment-preview-card strong {
    color: #FDE68A;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -.04em;
}

@media (max-width: 900px) {
    .admin-activation-hero,
    .admin-plan-row,
    .admin-sub-dates,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .admin-activation-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-sub-card-head {
        flex-direction: column;
    }

    .admin-status-stack {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .admin-activation-stats {
        grid-template-columns: 1fr;
    }

    .admin-sub-actions .btn,
    .admin-sub-mini-actions form,
    .admin-sub-mini-actions button,
    .admin-sub-mini-actions select {
        width: 100%;
    }
}

/* ============================================================
   Phase 1D.3 — Customer Plan Visibility + Renewal Command
   ============================================================ */

.bf-plan-command-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1.25fr auto;
    gap: 18px;
    align-items: center;
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 18px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(37,211,102,.16), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 55%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 28px 86px rgba(11,45,32,.22);
}

.bf-plan-command-card::after {
    content: "♛";
    position: absolute;
    right: 24px;
    top: 12px;
    font-size: 88px;
    line-height: 1;
    color: rgba(253,230,138,.12);
    pointer-events: none;
}

.bf-plan-command-card > * {
    position: relative;
    z-index: 1;
}

.bf-plan-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 8px 11px;
    border-radius: 999px;
    color: #FDE68A;
    background: rgba(253,230,138,.10);
    border: 1px solid rgba(253,230,138,.20);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bf-plan-command-main h2 {
    margin: 10px 0 8px;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.06em;
    padding-bottom: .08em;
}

.bf-plan-command-main h2 span {
    color: #FDE68A;
}

.bf-plan-command-main p {
    margin: 0;
    color: rgba(255,255,255,.76);
    line-height: 1.55;
    max-width: 620px;
}

.bf-plan-command-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    gap: 10px;
}

.bf-plan-command-stats div {
    min-height: 82px;
    display: grid;
    align-content: center;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(14px);
}

.bf-plan-command-stats div.highlight,
.bf-plan-command-stats div.amount {
    background: rgba(253,230,138,.14);
    border-color: rgba(253,230,138,.24);
}

.bf-plan-command-stats span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bf-plan-command-stats strong {
    display: block;
    color: #fff;
    font-size: 15px;
    letter-spacing: -.035em;
    margin-top: 4px;
    line-height: 1.15;
}

.bf-plan-command-stats div.highlight strong,
.bf-plan-command-stats div.amount strong {
    color: #FDE68A;
}

.bf-plan-command-actions {
    display: grid;
    gap: 10px;
    min-width: 180px;
}

.bf-plan-command-actions .btn {
    width: 100%;
    white-space: nowrap;
}

/* Tone variations */
.bf-plan-command-card.tone-ok {
    border-color: rgba(37,211,102,.22);
}

.bf-plan-command-card.tone-trial {
    border-color: rgba(253,230,138,.22);
}

.bf-plan-command-card.tone-warn {
    border-color: rgba(245,158,11,.38);
}

.bf-plan-command-card.tone-danger {
    border-color: rgba(239,68,68,.38);
    background:
        radial-gradient(circle at 10% 0%, rgba(239,68,68,.18), transparent 30%),
        linear-gradient(135deg, #200606 0%, #3A1010 50%, #0B2D20 100%);
}

.bf-plan-command-card.compact {
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}

.bf-plan-command-card.compact .bf-plan-command-stats {
    grid-template-columns: repeat(5, 1fr);
}

.bf-plan-command-card.compact .bf-plan-command-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
}

.bf-plan-command-card.compact .bf-plan-command-actions .btn {
    width: auto;
}

@media (max-width: 1050px) {
    .bf-plan-command-card {
        grid-template-columns: 1fr;
    }

    .bf-plan-command-actions {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
    }

    .bf-plan-command-actions .btn {
        width: auto;
    }
}

@media (max-width: 780px) {
    .bf-plan-command-stats,
    .bf-plan-command-card.compact .bf-plan-command-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-plan-command-stats div.amount {
        grid-column: 1 / -1;
    }
}

@media (max-width: 540px) {
    .bf-plan-command-stats,
    .bf-plan-command-card.compact .bf-plan-command-stats {
        grid-template-columns: 1fr;
    }

    .bf-plan-command-actions,
    .bf-plan-command-card.compact .bf-plan-command-actions {
        display: grid;
    }

    .bf-plan-command-actions .btn,
    .bf-plan-command-card.compact .bf-plan-command-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Phase 1D.4 + 1D.5 — Pro Feature Guard + Upgrade Layer
   ============================================================ */

.bf-pro-lock-card,
.bf-pro-upsell-card,
.bf-pro-command-suite,
.bf-pro-insight-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 18px;
    border: 1px solid rgba(201,147,10,.22);
    box-shadow: 0 22px 70px rgba(10,28,20,.09);
}

.bf-pro-lock-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    background:
        radial-gradient(circle at 8% 0%, rgba(253,230,138,.18), transparent 30%),
        linear-gradient(135deg, #FFFFFF 0%, #FFF8DB 100%);
    color: #0B2D20;
}

.bf-pro-lock-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #0B2D20;
    background: linear-gradient(135deg, #FFF7BF, #C9930A);
    font-size: 30px;
    box-shadow: 0 18px 40px rgba(201,147,10,.18);
}

.bf-pro-lock-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(201,147,10,.12);
    color: #9A6A00;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bf-pro-lock-card h3,
.bf-pro-upsell-card h2,
.bf-pro-command-suite h2,
.bf-pro-insight-card h2 {
    margin: 0 0 8px;
    letter-spacing: -.055em;
    line-height: 1.08;
    padding-bottom: .08em;
}

.bf-pro-lock-card p,
.bf-pro-upsell-card p,
.bf-pro-command-suite p,
.bf-pro-insight-card p {
    color: #5C6B62;
    line-height: 1.65;
    margin: 0;
}

.bf-pro-lock-card small {
    display: block;
    color: #7A6A3A;
    margin-top: 6px;
    font-weight: 750;
}

.bf-pro-upsell-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 90% 12%, rgba(37,211,102,.16), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border-color: rgba(253,230,138,.20);
}

.bf-pro-upsell-card h2 {
    font-size: clamp(24px, 3.6vw, 44px);
}

.bf-pro-upsell-card p {
    color: rgba(255,255,255,.76);
}

.bf-pro-upsell-card .bf-pro-lock-kicker {
    background: rgba(253,230,138,.12);
    color: #FDE68A;
    border: 1px solid rgba(253,230,138,.22);
}

.bf-pro-upsell-features {
    display: grid;
    gap: 8px;
    min-width: 230px;
}

.bf-pro-upsell-features span {
    display: block;
    border-radius: 999px;
    padding: 9px 12px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 850;
    white-space: nowrap;
}

.bf-pro-command-suite,
.bf-pro-insight-card {
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 30%),
        linear-gradient(135deg, #06140F, #0B2D20);
    border-color: rgba(253,230,138,.20);
}

.bf-pro-suite-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.bf-pro-command-suite p,
.bf-pro-insight-card p {
    color: rgba(255,255,255,.76);
}

.bf-pro-recovery-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.bf-pro-recovery-stats div {
    border-radius: 20px;
    padding: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.13);
}

.bf-pro-recovery-stats span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bf-pro-recovery-stats strong {
    display: block;
    color: #FDE68A;
    font-size: 24px;
    letter-spacing: -.05em;
    margin-top: 5px;
}

.bf-followup-template-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.bf-template-chip {
    border: 1px solid rgba(253,230,138,.22);
    background: rgba(253,230,138,.10);
    color: #FDE68A;
    border-radius: 999px;
    padding: 10px 13px;
    font-weight: 900;
    cursor: pointer;
}

.bf-template-chip:hover {
    background: #FDE68A;
    color: #0B2D20;
}

@media (max-width: 900px) {
    .bf-pro-lock-card,
    .bf-pro-upsell-card {
        grid-template-columns: 1fr;
    }

    .bf-pro-upsell-features {
        min-width: 0;
    }

    .bf-pro-recovery-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1D.6 — Royal Reports & Business Intelligence
   ============================================================ */

body.page-reports .main-content {
    max-width: 1240px !important;
}

body.page-reports .page-header {
    display: none !important;
}

.reports-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.reports-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.reports-hero > * {
    position: relative;
    z-index: 1;
}

.reports-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.reports-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

.reports-health-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.reports-health-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.reports-health-card strong {
    color: #FDE68A;
    font-size: clamp(48px, 7vw, 86px);
    line-height: 1;
    letter-spacing: -.07em;
    margin: 8px 0;
}

.reports-health-card small {
    color: #fff;
    font-weight: 900;
    font-size: 18px;
}

.report-filter-card {
    border-radius: 28px !important;
    margin-bottom: 18px;
}

.report-filter-grid {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) repeat(2, minmax(150px, .65fr)) auto;
    gap: 14px;
    align-items: end;
}

.report-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.report-kpi-card {
    min-height: 150px;
    display: grid;
    align-content: center;
    padding: 22px;
    border-radius: 28px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 22px 70px rgba(10,28,20,.12);
}

.report-kpi-card span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.report-kpi-card strong {
    display: block;
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.06em;
    margin: 8px 0;
}

.report-kpi-card small {
    color: rgba(255,255,255,.78);
    font-weight: 850;
}

.report-kpi-card.sales {
    background: linear-gradient(135deg, #0B6B3A, #0B2D20);
}

.report-kpi-card.expenses {
    background: linear-gradient(135deg, #7C2D12, #431407);
}

.report-kpi-card.profit.positive {
    background: linear-gradient(135deg, #0F766E, #064E3B);
}

.report-kpi-card.profit.negative {
    background: linear-gradient(135deg, #991B1B, #450A0A);
}

.report-kpi-card.debt {
    background: linear-gradient(135deg, #92400E, #451A03);
}

.report-action-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-radius: 30px !important;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.18), transparent 30%),
        linear-gradient(135deg, #FFFFFF, #FFF8DB) !important;
    border: 1px solid rgba(201,147,10,.22) !important;
}

.report-action-card h2 {
    margin: 8px 0 0;
    font-size: clamp(22px, 3vw, 36px);
    letter-spacing: -.055em;
    line-height: 1.12;
}

.report-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.report-bar-chart {
    height: 280px;
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 18px;
    border-radius: 24px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
    overflow-x: auto;
}

.report-bar-day {
    min-width: 28px;
    flex: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    height: 100%;
    text-align: center;
}

.report-bar-day .bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    height: 100%;
}

.report-bar-day i {
    width: 9px;
    min-height: 4px;
    border-radius: 999px 999px 4px 4px;
    display: block;
}

.report-bar-day i.sales,
.report-legend i.sales {
    background: #0B6B3A;
}

.report-bar-day i.expenses,
.report-legend i.expenses {
    background: #C9930A;
}

.report-bar-day span {
    font-size: 10px;
    color: #6B7A70;
    font-weight: 900;
}

.report-legend {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

.report-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5C6B62;
    font-weight: 850;
}

.report-legend i {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

.report-list {
    display: grid;
    gap: 10px;
}

.report-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 13px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.report-list-row strong,
.report-list-row b {
    display: block;
    color: #0B2D20;
}

.report-list-row span {
    display: block;
    color: #6B7A70;
    font-size: 12px;
    margin-top: 3px;
}

.report-list-row em {
    display: block;
    width: 150px;
    height: 8px;
    border-radius: 999px;
    background: rgba(11,45,32,.08);
    margin-top: 6px;
    overflow: hidden;
}

.report-list-row em i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #FDE68A, #C9930A);
}

@media print {
    .sidebar,
    .bottom-nav,
    .topbar,
    .bf-support-widget,
    .report-filter-card,
    .report-filter-actions,
    .btn {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .card,
    .reports-hero,
    .report-kpi-card {
        box-shadow: none !important;
        break-inside: avoid;
    }

    body {
        background: #fff !important;
    }
}

@media (max-width: 980px) {
    .reports-hero,
    .report-filter-grid,
    .report-grid-2 {
        grid-template-columns: 1fr;
    }

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

    .report-action-card {
        display: grid;
    }
}

@media (max-width: 560px) {
    .report-kpi-grid {
        grid-template-columns: 1fr;
    }

    .report-filter-actions .btn {
        width: 100%;
    }

    .report-list-row {
        grid-template-columns: 1fr;
    }

    .report-list-row em {
        width: 100%;
    }
}

/* ============================================================
   Phase 1D.7 — Admin Reports / Platform Revenue Command Center
   ============================================================ */

.admin-platform-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.admin-platform-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.admin-platform-hero > * {
    position: relative;
    z-index: 1;
}

.admin-platform-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.admin-platform-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

.admin-platform-score {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.admin-platform-score span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-platform-score strong {
    color: #FDE68A;
    font-size: clamp(48px, 7vw, 86px);
    line-height: 1;
    letter-spacing: -.07em;
    margin: 8px 0;
}

.admin-platform-score small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.admin-report-filter-card {
    border-radius: 28px !important;
    margin-bottom: 18px;
}

.admin-report-filter-grid {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) repeat(2, minmax(150px, .65fr)) auto;
    gap: 14px;
    align-items: end;
}

.admin-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.admin-kpi-card {
    min-height: 150px;
    display: grid;
    align-content: center;
    padding: 22px;
    border-radius: 28px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 22px 70px rgba(10,28,20,.12);
}

.admin-kpi-card span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-kpi-card strong {
    display: block;
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.06em;
    margin: 8px 0;
}

.admin-kpi-card small {
    color: rgba(255,255,255,.78);
    font-weight: 850;
}

.admin-kpi-card.revenue {
    background: linear-gradient(135deg, #0B6B3A, #0B2D20);
}

.admin-kpi-card.mrr {
    background: linear-gradient(135deg, #92400E, #451A03);
}

.admin-kpi-card.users {
    background: linear-gradient(135deg, #0F766E, #064E3B);
}

.admin-kpi-card.requests {
    background: linear-gradient(135deg, #7C2D12, #431407);
}

.admin-next-action-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-radius: 30px !important;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.18), transparent 30%),
        linear-gradient(135deg, #FFFFFF, #FFF8DB) !important;
    border: 1px solid rgba(201,147,10,.22) !important;
}

.admin-next-action-card h2 {
    margin: 8px 0 0;
    font-size: clamp(22px, 3vw, 36px);
    letter-spacing: -.055em;
    line-height: 1.12;
}

.admin-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-report-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.admin-revenue-chart {
    height: 280px;
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 18px;
    border-radius: 24px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
    overflow-x: auto;
}

.admin-revenue-day {
    min-width: 28px;
    flex: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    height: 100%;
    text-align: center;
}

.admin-revenue-day i {
    width: 14px;
    min-height: 5px;
    border-radius: 999px 999px 4px 4px;
    display: block;
    margin: 0 auto;
    background: linear-gradient(180deg, #FDE68A, #C9930A);
    box-shadow: 0 8px 18px rgba(201,147,10,.18);
}

.admin-revenue-day span {
    font-size: 10px;
    color: #6B7A70;
    font-weight: 900;
}

.admin-plan-split,
.admin-status-list,
.admin-command-list {
    display: grid;
    gap: 10px;
}

.admin-plan-split-row,
.admin-status-row,
.admin-command-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 13px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.admin-plan-split-row strong,
.admin-command-row strong {
    display: block;
    color: #0B2D20;
}

.admin-plan-split-row span,
.admin-command-row span {
    display: block;
    color: #6B7A70;
    font-size: 12px;
    margin-top: 3px;
}

.admin-plan-split-row em,
.admin-status-row em {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(11,45,32,.08);
    overflow: hidden;
}

.admin-plan-split-row em i,
.admin-status-row em i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #FDE68A, #C9930A);
}

.admin-status-row {
    grid-template-columns: 1fr auto;
}

.admin-status-row span {
    font-weight: 900;
}

.admin-status-row.tone-ok em i {
    background: #0B6B3A;
}

.admin-status-row.tone-trial em i {
    background: #C9930A;
}

.admin-status-row.tone-warn em i {
    background: #F59E0B;
}

.admin-status-row.tone-danger em i {
    background: #DC2626;
}

.admin-status-row.tone-muted em i {
    background: #6B7280;
}

.admin-command-row b {
    color: #0B6B3A;
}

.admin-usage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.admin-usage-grid div {
    padding: 18px;
    border-radius: 22px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.admin-usage-grid span,
.admin-usage-grid small {
    display: block;
    color: #6B7A70;
    font-weight: 850;
}

.admin-usage-grid strong {
    display: block;
    font-size: 34px;
    color: #0B2D20;
    letter-spacing: -.06em;
    margin: 6px 0;
}

.mt-16 {
    margin-top: 16px !important;
}

@media print {
    .sidebar,
    .bottom-nav,
    .topbar,
    .bf-support-widget,
    .admin-report-filter-card,
    .admin-report-actions,
    .btn {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .card,
    .admin-platform-hero,
    .admin-kpi-card {
        box-shadow: none !important;
        break-inside: avoid;
    }

    body {
        background: #fff !important;
    }
}

@media (max-width: 980px) {
    .admin-platform-hero,
    .admin-report-filter-grid,
    .admin-report-grid-2 {
        grid-template-columns: 1fr;
    }

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

    .admin-next-action-card {
        display: grid;
    }
}

@media (max-width: 560px) {
    .admin-kpi-grid,
    .admin-usage-grid {
        grid-template-columns: 1fr;
    }

    .admin-report-actions .btn,
    .admin-next-actions .btn {
        width: 100%;
    }

    .admin-command-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1D.8 — Subscription Enforcement & Expiry Guard
   ============================================================ */

.subscription-required-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(239,68,68,.16), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #3A1010 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.subscription-required-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.subscription-required-hero > * {
    position: relative;
    z-index: 1;
}

.subscription-required-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.subscription-required-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.subscription-required-status {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.subscription-required-status span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.subscription-required-status strong {
    color: #FDE68A;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
    letter-spacing: -.07em;
    margin: 8px 0;
}

.subscription-required-status small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.subscription-required-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 18px;
    align-items: stretch;
}

.subscription-plan-card,
.subscription-how-card {
    border-radius: 30px !important;
}

.subscription-detail-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.subscription-detail-list div {
    padding: 16px;
    border-radius: 20px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.subscription-detail-list span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.subscription-detail-list strong {
    display: block;
    color: #0B2D20;
    font-size: 22px;
    letter-spacing: -.04em;
    margin-top: 5px;
}

.subscription-required-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 900px) {
    .subscription-required-hero,
    .subscription-required-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .subscription-detail-list {
        grid-template-columns: 1fr;
    }

    .subscription-required-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Phase 1D.8D — Sidebar Line / Seam Cleanup
   Removes the unprofessional mobile left-edge line/handle.
   ============================================================ */

@media (max-width: 980px) {
    body:not(.sidebar-open) .sidebar,
    body:not(.nav-open) .sidebar,
    body:not(.menu-open) .sidebar {
        transform: translateX(-106%) !important;
        left: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    body:not(.sidebar-open) .sidebar::before,
    body:not(.sidebar-open) .sidebar::after,
    body:not(.nav-open) .sidebar::before,
    body:not(.nav-open) .sidebar::after,
    body:not(.menu-open) .sidebar::before,
    body:not(.menu-open) .sidebar::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Hide old side-peek handles if any previous auto-show sidebar added them */
    .sidebar-hover-handle,
    .sidebar-auto-handle,
    .sidebar-peek-handle,
    .sidebar-edge-handle,
    .sidebar-toggle-rail,
    .sidebar-rail,
    .sidebar-peek,
    .mobile-sidebar-rail,
    .mobile-sidebar-peek {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Remove any left-edge decorative vertical line */
    .app-shell::before,
    .app-shell::after,
    .layout-shell::before,
    .layout-shell::after,
    .main-shell::before,
    .main-shell::after,
    .main-content::before,
    .main-content::after {
        border-left: 0 !important;
    }

    body::before {
        border-left: 0 !important;
    }
}

/* ============================================================
   Phase 1D.9 — Business Team & Employee Operator Accounts
   ============================================================ */

.team-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.team-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.team-hero > * {
    position: relative;
    z-index: 1;
}

.team-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.team-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

.team-hero-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.team-hero-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.team-hero-card strong {
    color: #FDE68A;
    font-size: clamp(24px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -.06em;
    margin: 8px 0;
}

.team-hero-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.team-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    margin-bottom: 18px;
}

.team-permission-list {
    display: grid;
    gap: 12px;
}

.team-permission-list div {
    padding: 16px;
    border-radius: 20px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.team-permission-list strong {
    display: block;
    color: #0B2D20;
    font-size: 18px;
    margin-bottom: 5px;
}

.team-permission-list span {
    display: block;
    color: #5C6B62;
    line-height: 1.55;
}

.team-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.team-member-card {
    border-radius: 26px;
    padding: 18px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 16px 50px rgba(10,28,20,.08);
}

.team-member-card.inactive {
    opacity: .72;
    background: #F8FAF8;
}

.team-status {
    display: inline-flex;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    color: #0B6B3A;
    background: #E9FFF2;
    margin-bottom: 9px;
}

.team-member-card.inactive .team-status {
    color: #991B1B;
    background: #FEE2E2;
}

.team-member-card h3 {
    margin: 0 0 5px;
    font-size: 24px;
    letter-spacing: -.05em;
}

.team-member-card p,
.team-member-card small {
    color: #5C6B62;
}

.team-member-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(11,45,32,.08);
}

.team-password-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.bf-operator-badge {
    margin: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(253,230,138,.10);
    border: 1px solid rgba(253,230,138,.20);
    color: #fff;
}

.bf-operator-badge span,
.bf-operator-badge small {
    display: block;
    color: rgba(255,255,255,.70);
    font-size: 11px;
    font-weight: 850;
}

.bf-operator-badge strong {
    display: block;
    color: #FDE68A;
    margin: 3px 0;
}

@media (max-width: 900px) {
    .team-hero,
    .team-grid,
    .team-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .team-password-form {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1D.8E — Final Sidebar Edge Handle Removal
   Removes the left floating hamburger handle and dark seam.
   ============================================================ */

.bf-hide-edge-sidebar-handle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Remove known old sidebar handle/peek/rail classes */
.sidebar-hover-handle,
.sidebar-auto-handle,
.sidebar-peek-handle,
.sidebar-edge-handle,
.sidebar-toggle-rail,
.sidebar-rail,
.sidebar-peek,
.mobile-sidebar-rail,
.mobile-sidebar-peek,
.mobile-sidebar-handle,
.floating-sidebar-toggle,
.sidebar-floating-toggle,
.sidebar-float-toggle,
.sidebar-mini-toggle,
.sidebar-side-toggle,
.side-menu-handle,
.side-nav-handle,
.edge-menu-handle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Force closed sidebar to disappear completely on mobile/tablet */
@media (max-width: 980px) {
    body:not(.sidebar-open):not(.nav-open):not(.menu-open) .sidebar:not(.open):not(.active):not(.show) {
        transform: translateX(-130vw) !important;
        left: -130vw !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    body:not(.sidebar-open):not(.nav-open):not(.menu-open) .sidebar:not(.open):not(.active):not(.show)::before,
    body:not(.sidebar-open):not(.nav-open):not(.menu-open) .sidebar:not(.open):not(.active):not(.show)::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    html,
    body,
    .app-shell,
    .layout-shell,
    .main-shell,
    .main-content {
        overflow-x: hidden !important;
    }

    html::before,
    html::after,
    body::before,
    body::after,
    .app-shell::before,
    .app-shell::after,
    .layout-shell::before,
    .layout-shell::after,
    .main-shell::before,
    .main-shell::after,
    .main-content::before,
    .main-content::after {
        border-left: 0 !important;
        box-shadow: none !important;
    }
}

/* ============================================================
   Phase 1D.8F — Force Hide Actual Left Edge Object
   ============================================================ */

.bf-force-hide-left-edge-object {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-200vw) !important;
}

/* Extra hard mobile left-edge cleanup */
@media (max-width: 1100px) {
    [class*="edge"],
    [class*="peek"],
    [class*="rail"] {
        pointer-events: none;
    }

    .bf-force-hide-left-edge-object,
    .bf-force-hide-left-edge-object * {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* Phase 1D.8G — Permanent removal of old auto sidebar rail */
#bfSidebarRail {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-300vw) !important;
}
#bfSidebarRail::before,
#bfSidebarRail::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   Phase 1D.8H — Premium Invisible Auto-Hide Sidebar
   No visible left line. No visible floating hamburger.
   ============================================================ */

/* Permanently kill old visible rail */
#bfSidebarRail,
#bfSidebarRail_REMOVED {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Invisible hover trigger zone */
#bfSidebarHotzone {
    display: none;
}

@media (min-width: 981px) {
    #bfSidebarHotzone {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 18px;
        height: 100vh;
        z-index: 2400;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 1;
        pointer-events: auto;
    }

    body.bf-auto-sidebar .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        transform: translateX(-104%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border-right: 0 !important;
        box-shadow: none !important;
        transition:
            transform .28s ease,
            opacity .22s ease,
            visibility .22s ease !important;
        z-index: 2500 !important;
    }

    body.bf-auto-sidebar.bf-sidebar-hover-open .sidebar,
    body.bf-auto-sidebar.sidebar-open .sidebar,
    body.bf-auto-sidebar.nav-open .sidebar,
    body.bf-auto-sidebar.menu-open .sidebar {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: 22px 0 80px rgba(0,0,0,.24) !important;
    }

    body.bf-auto-sidebar .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body.bf-auto-sidebar .topbar {
        margin-left: 0 !important;
    }

    body.bf-auto-sidebar .sidebar::before,
    body.bf-auto-sidebar .sidebar::after {
        border-left: 0 !important;
        box-shadow: none !important;
    }
}

/* Keep mobile/tablet controlled by real menu button only */
@media (max-width: 980px) {
    #bfSidebarHotzone {
        display: none !important;
    }

    body.bf-auto-sidebar .sidebar {
        transition: transform .28s ease !important;
    }
}

/* ============================================================
   Phase 1D.8I — Re-center Content After Auto-Hide Sidebar
   Keeps invisible auto-sidebar, but restores presidential centered layout.
   ============================================================ */

@media (min-width: 981px) {
    body.bf-auto-sidebar .main-content {
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(calc(100vw - 72px), 1180px) !important;
        max-width: 1180px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.bf-auto-sidebar.admin-mode .main-content,
    body.bf-auto-sidebar.page-reports .main-content,
    body.bf-auto-sidebar.page-subscriptions .main-content,
    body.bf-auto-sidebar.page-payments .main-content {
        width: min(calc(100vw - 72px), 1240px) !important;
        max-width: 1240px !important;
    }

    body.bf-auto-sidebar .topbar {
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(calc(100vw - 72px), 1180px) !important;
        max-width: 1180px !important;
    }

    body.bf-auto-sidebar.admin-mode .topbar {
        width: min(calc(100vw - 72px), 1240px) !important;
        max-width: 1240px !important;
    }
}

@media (max-width: 980px) {
    body.bf-auto-sidebar .main-content {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ============================================================
   Phase 1D.9A — Official Till Payment Destination
   ============================================================ */

.official-payment-card {
    margin-top: 18px;
}

.bf-official-payment-box {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 22px;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        linear-gradient(135deg, #04110B 0%, #0B2D20 58%, #123B27 100%);
    border: 1px solid rgba(253,230,138,.22);
    color: #fff;
    box-shadow: 0 24px 70px rgba(11,45,32,.22);
}

.bf-official-payment-box::after {
    content: "4099256";
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: clamp(44px, 8vw, 92px);
    font-weight: 950;
    letter-spacing: -.08em;
    color: rgba(253,230,138,.10);
    line-height: 1;
}

.bf-official-payment-box > * {
    position: relative;
    z-index: 1;
}

.bf-payment-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(253,230,138,.14);
    color: #FDE68A;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}

.bf-official-payment-box h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -.055em;
}

.bf-payment-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.bf-payment-details div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
}

.bf-payment-details span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.bf-payment-details strong {
    display: block;
    margin-top: 4px;
    color: #FDE68A;
    font-size: 22px;
    letter-spacing: -.04em;
}

.bf-official-payment-box p {
    margin: 12px 0 0;
    color: rgba(255,255,255,.76);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .bf-payment-details {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1D.9B — Topbar Business Encouragement + NobleStack Brand
   ============================================================ */

.bf-business-ticker {
    flex: 1 1 360px;
    max-width: min(720px, 48vw);
    min-width: 240px;
    overflow: hidden;
    border-radius: 999px;
    padding: 9px 0;
    margin-left: auto;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.bf-business-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 34px;
    white-space: nowrap;
    will-change: transform;
    animation: bfTickerScroll 46s linear infinite;
}

.bf-business-ticker-track span {
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -.01em;
}

@keyframes bfTickerScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.bf-business-ticker:hover .bf-business-ticker-track {
    animation-play-state: paused;
}

.bf-powered-by-line,
.bf-global-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: rgba(11,45,32,.68);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: -.01em;
    margin-top: 12px;
}

.bf-powered-by-line span,
.bf-global-powered-by span {
    color: rgba(11,45,32,.45);
}

.bf-powered-by-line strong,
.bf-global-powered-by strong {
    color: #0B2D20;
    font-weight: 950;
}

@media (max-width: 980px) {
    .bf-business-ticker {
        order: 20;
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
        margin: 8px 0 0;
    }

    .bf-business-ticker-track span {
        font-size: 12px;
    }
}

/* ============================================================
   Phase 1E.0 — First Customer Launch Gate
   ============================================================ */

.launch-gate-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.launch-gate-hero.not-ready {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(239,68,68,.24), transparent 28%),
        linear-gradient(135deg, #030806 0%, #291212 52%, #4C1111 100%);
}

.launch-gate-hero.almost-ready {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(245,158,11,.20), transparent 28%),
        linear-gradient(135deg, #030806 0%, #2E2410 52%, #5B3B0D 100%);
}

.launch-gate-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.launch-gate-hero > * {
    position: relative;
    z-index: 1;
}

.launch-gate-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.launch-gate-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.launch-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.launch-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.launch-score-card strong {
    color: #FDE68A;
    font-size: clamp(50px, 7vw, 86px);
    line-height: 1;
    letter-spacing: -.075em;
    margin: 8px 0;
}

.launch-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.launch-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.launch-kpi {
    border-radius: 26px !important;
}

.launch-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.launch-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.launch-kpi.ok strong {
    color: #0B6B3A;
}

.launch-kpi.warn strong {
    color: #B45309;
}

.launch-kpi.fail strong {
    color: #B91C1C;
}

.launch-command-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    border-radius: 28px !important;
}

.launch-command-card p {
    color: #5C6B62;
    margin: 4px 0 0;
    line-height: 1.6;
}

.launch-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.launch-group-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.launch-group-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.launch-group-header h2 {
    margin: 0;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.launch-group-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.launch-check-list {
    display: grid;
    gap: 10px;
}

.launch-check {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(11,45,32,.08);
    background: #F8FAF8;
}

.launch-check.ok {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.launch-check.warn {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.launch-check.fail {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.launch-check-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(10,28,20,.08);
}

.launch-check h3 {
    margin: 0 0 4px;
    color: #0B2D20;
    font-size: 16px;
    letter-spacing: -.025em;
}

.launch-check p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.launch-action {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    color: #4B5563;
    font-size: 13px;
    line-height: 1.45;
}

.launch-status-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.launch-status-pill.ok {
    background: #DCFCE7;
    color: #166534;
}

.launch-status-pill.warn {
    background: #FEF3C7;
    color: #92400E;
}

.launch-status-pill.fail {
    background: #FEE2E2;
    color: #991B1B;
}

.launch-terminal-card {
    border-radius: 28px !important;
}

.launch-terminal-card pre {
    overflow-x: auto;
    padding: 16px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
}

@media (max-width: 1000px) {
    .launch-gate-hero,
    .launch-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .launch-command-card {
        align-items: stretch;
        flex-direction: column;
    }

    .launch-command-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .launch-gate-hero,
    .launch-kpi-grid,
    .launch-check {
        grid-template-columns: 1fr;
    }

    .launch-status-pill {
        margin-top: 6px;
    }
}

/* ============================================================
   Phase 1E.1 — Demo Data Cleanup Safety
   ============================================================ */

.demo-data-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.demo-data-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.demo-data-hero > * {
    position: relative;
    z-index: 1;
}

.demo-data-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.demo-data-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.demo-data-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.demo-data-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.demo-data-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.demo-data-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.demo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.demo-kpi {
    border-radius: 26px !important;
}

.demo-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.demo-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.demo-kpi.ok strong {
    color: #0B6B3A;
}

.demo-kpi.warn strong {
    color: #B45309;
}

.demo-safety-card,
.demo-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.demo-safety-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.demo-safety-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.demo-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.demo-section-header h2 {
    margin: 0;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.demo-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.demo-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.demo-user-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid rgba(11,45,32,.08);
    background: #fff;
    box-shadow: 0 16px 50px rgba(10,28,20,.08);
}

.demo-user-card.is-demo {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.16);
}

.demo-user-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.demo-user-pill.demo {
    background: #FEF3C7;
    color: #92400E;
}

.demo-user-pill.live {
    background: #DCFCE7;
    color: #166534;
}

.demo-user-main h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 22px;
    letter-spacing: -.05em;
}

.demo-user-main p,
.demo-user-main small {
    color: #5C6B62;
    line-height: 1.55;
}

.demo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.demo-stats div {
    padding: 10px;
    border-radius: 16px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.06);
}

.demo-stats span {
    display: block;
    color: #6B7A70;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-stats strong {
    display: block;
    color: #0B2D20;
    font-size: 22px;
    letter-spacing: -.05em;
}

.demo-actions {
    display: grid;
    gap: 10px;
}

.demo-reset-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.btn-danger {
    background: #B91C1C !important;
    color: #fff !important;
    border-color: #B91C1C !important;
}

@media (max-width: 980px) {
    .demo-data-hero,
    .demo-kpi-grid,
    .demo-user-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .demo-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .demo-reset-form {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1E.2 — First Customer Onboarding Flow
   ============================================================ */

.onboarding-hero,
.first-customer-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.onboarding-hero::after,
.first-customer-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.onboarding-hero > *,
.first-customer-hero > * {
    position: relative;
    z-index: 1;
}

.onboarding-hero h1,
.first-customer-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.onboarding-hero p,
.first-customer-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.onboarding-score-card,
.first-customer-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.onboarding-score-card span,
.first-customer-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.onboarding-score-card strong,
.first-customer-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.onboarding-score-card small,
.first-customer-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.onboarding-command-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    margin-bottom: 18px;
}

.onboarding-business-card,
.onboarding-whatsapp-card,
.onboarding-steps-card,
.onboarding-guide-card,
.first-customer-command,
.first-customer-list-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.onboarding-business-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.onboarding-business-meta div {
    padding: 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.onboarding-business-meta span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.onboarding-business-meta strong {
    display: block;
    margin-top: 4px;
    color: #0B2D20;
    font-size: 20px;
    letter-spacing: -.04em;
}

.onboarding-hint,
.onboarding-whatsapp-card p,
.first-customer-command p {
    color: #5C6B62;
    line-height: 1.65;
}

.onboarding-action-row,
.first-customer-command-actions,
.first-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.onboarding-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.onboarding-section-header h2 {
    margin: 0;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.onboarding-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.onboarding-step-list {
    display: grid;
    gap: 12px;
}

.onboarding-step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 24px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.08);
}

.onboarding-step.done {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.14);
}

.onboarding-step.pending {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.onboarding-step-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(10,28,20,.08);
    font-size: 22px;
}

.onboarding-step-status {
    display: inline-flex;
    width: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    color: #92400E;
    background: #FEF3C7;
    margin-bottom: 6px;
}

.onboarding-step.done .onboarding-step-status {
    color: #166534;
    background: #DCFCE7;
}

.onboarding-step h3 {
    margin: 0 0 4px;
    color: #0B2D20;
    font-size: 18px;
    letter-spacing: -.035em;
}

.onboarding-step p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.5;
}

.onboarding-guide-card pre {
    white-space: pre-wrap;
    overflow-x: auto;
    padding: 18px;
    border-radius: 20px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.65;
}

.dashboard-onboarding-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-radius: 30px !important;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253,230,138,.15), transparent 34%),
        linear-gradient(135deg, #fff 0%, #F8FAF8 100%);
}

.dashboard-onboarding-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: #E9FFF2;
    color: #0B6B3A;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.dashboard-onboarding-card h2 {
    margin: 0 0 6px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.dashboard-onboarding-card p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.6;
}

.dashboard-onboarding-actions {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.dashboard-onboarding-actions strong {
    color: #0B2D20;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.08em;
}

.first-customer-command {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.first-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.first-customer-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.first-customer-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.first-customer-pill.ready {
    background: #DCFCE7;
    color: #166534;
}

.first-customer-pill.pending {
    background: #FEF3C7;
    color: #92400E;
}

.first-customer-main h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.05em;
}

.first-customer-main p,
.first-customer-main small {
    color: #5C6B62;
    line-height: 1.55;
}

.first-customer-progress {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.first-customer-progress strong {
    color: #0B2D20;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.08em;
}

.first-customer-progress span {
    color: #5C6B62;
    font-weight: 850;
}

.first-customer-mini-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.first-customer-mini-steps span {
    display: inline-flex;
    padding: 7px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.first-customer-mini-steps span.done {
    background: #E9FFF2;
    color: #166534;
}

.first-customer-mini-steps span.pending {
    background: #F3F4F6;
    color: #4B5563;
}

@media (max-width: 1000px) {
    .onboarding-hero,
    .first-customer-hero,
    .onboarding-command-grid,
    .first-customer-grid {
        grid-template-columns: 1fr;
    }

    .first-customer-command,
    .dashboard-onboarding-card {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-onboarding-actions {
        justify-items: start;
    }
}

@media (max-width: 700px) {
    .onboarding-business-meta,
    .onboarding-step {
        grid-template-columns: 1fr;
    }

    .onboarding-step .btn {
        width: 100%;
    }
}

/* ============================================================
   Phase 1E.3 — Backup + Launch Smoke Test
   ============================================================ */

.launch-safety-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.launch-safety-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.launch-safety-hero > * {
    position: relative;
    z-index: 1;
}

.launch-safety-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.launch-safety-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.launch-safety-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.launch-safety-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.launch-safety-score-card strong {
    color: #FDE68A;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.07em;
    margin: 8px 0;
}

.launch-safety-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.launch-safety-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.launch-safety-card,
.launch-backups-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.launch-safety-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.launch-safety-card pre {
    overflow-x: auto;
    padding: 16px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.launch-backup-list {
    display: grid;
    gap: 10px;
}

.launch-backup-list div {
    padding: 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.08);
}

.launch-backup-list strong {
    display: block;
    color: #0B2D20;
    letter-spacing: -.02em;
}

.launch-backup-list span {
    display: block;
    margin-top: 4px;
    color: #5C6B62;
    font-size: 13px;
}

@media (max-width: 900px) {
    .launch-safety-hero,
    .launch-safety-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1E.4 — Welcome Guide + WhatsApp Training Messages
   ============================================================ */

.training-hero,
.customer-messages-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.training-hero::after,
.customer-messages-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.training-hero > *,
.customer-messages-hero > * {
    position: relative;
    z-index: 1;
}

.training-hero h1,
.customer-messages-hero h1 {
    max-width: 820px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.training-hero p,
.customer-messages-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.training-score-card,
.customer-messages-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.training-score-card span,
.customer-messages-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.training-score-card strong,
.customer-messages-score-card strong {
    color: #FDE68A;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -.07em;
    margin: 8px 0;
}

.training-score-card small,
.customer-messages-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.training-command-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    margin-bottom: 18px;
}

.training-command-card,
.training-section-card,
.customer-messages-command-card,
.customer-messages-list-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.training-command-card p,
.customer-messages-command-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.training-actions,
.customer-messages-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.training-section-header,
.customer-messages-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.training-section-header h2,
.customer-messages-section-header h2 {
    margin: 0;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.training-section-header span,
.customer-messages-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.training-message-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.training-message-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 16px 50px rgba(10,28,20,.08);
}

.training-message-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.training-message-head > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #F8FAF8;
    font-size: 22px;
}

.training-message-head h3 {
    margin: 0 0 3px;
    color: #0B2D20;
    letter-spacing: -.04em;
}

.training-message-head small {
    color: #6B7A70;
    font-weight: 850;
}

.training-message-card pre {
    white-space: pre-wrap;
    overflow-x: auto;
    min-height: 220px;
    max-height: 320px;
    padding: 16px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.6;
}

.training-message-actions {
    display: flex;
    justify-content: flex-end;
}

.customer-messages-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.customer-message-account-grid {
    display: grid;
    gap: 18px;
}

.customer-message-account-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.customer-message-account-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.customer-message-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #E9FFF2;
    color: #0B6B3A;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.customer-message-account-head h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 26px;
    letter-spacing: -.055em;
}

.customer-message-account-head p {
    color: #5C6B62;
    line-height: 1.55;
}

.customer-message-plan {
    min-width: 110px;
    padding: 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.customer-message-plan span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.customer-message-plan strong {
    display: block;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.06em;
}

.customer-message-category {
    padding: 14px;
    border-radius: 22px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.customer-message-category h4 {
    margin: 0 0 10px;
    color: #0B2D20;
    letter-spacing: -.04em;
}

.customer-message-buttons {
    display: grid;
    gap: 8px;
}

.customer-message-button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
}

.customer-message-button-row > span {
    color: #0B2D20;
    font-weight: 850;
}

.customer-message-button-row > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.customer-message-hidden-pre {
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 1000px) {
    .training-hero,
    .customer-messages-hero,
    .training-command-grid,
    .training-message-grid {
        grid-template-columns: 1fr;
    }

    .customer-messages-command-card,
    .customer-message-account-head {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-message-button-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.5 — First Real Customer Rollout Checklist
   ============================================================ */

.rollout-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.rollout-hero.not-ready {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(239,68,68,.24), transparent 28%),
        linear-gradient(135deg, #030806 0%, #291212 52%, #4C1111 100%);
}

.rollout-hero.almost-ready {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(245,158,11,.20), transparent 28%),
        linear-gradient(135deg, #030806 0%, #2E2410 52%, #5B3B0D 100%);
}

.rollout-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.rollout-hero > * {
    position: relative;
    z-index: 1;
}

.rollout-hero h1 {
    max-width: 840px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.rollout-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.rollout-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.rollout-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rollout-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.rollout-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.rollout-selector-card,
.rollout-command-card,
.rollout-group-card,
.rollout-terminal-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.rollout-selector-card,
.rollout-command-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.rollout-selector-card p,
.rollout-command-card p,
.rollout-terminal-card p {
    color: #5C6B62;
    line-height: 1.65;
    margin: 4px 0 0;
}

.rollout-selector-form {
    min-width: min(440px, 100%);
}

.rollout-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.rollout-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.rollout-kpi {
    border-radius: 26px !important;
}

.rollout-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.rollout-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.rollout-kpi.ok strong {
    color: #0B6B3A;
}

.rollout-kpi.warn strong {
    color: #B45309;
}

.rollout-kpi.pending strong {
    color: #475569;
}

.rollout-kpi.fail strong {
    color: #B91C1C;
}

.rollout-group-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.rollout-group-header h2 {
    margin: 0;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.rollout-group-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.rollout-check-list {
    display: grid;
    gap: 10px;
}

.rollout-check {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(11,45,32,.08);
    background: #F8FAF8;
}

.rollout-check.ok {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.rollout-check.warn {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.rollout-check.fail {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.rollout-check.pending {
    background: #F8FAFC;
    border-color: rgba(71,85,105,.12);
}

.rollout-check-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(10,28,20,.08);
}

.rollout-check-body h3 {
    margin: 0 0 4px;
    color: #0B2D20;
    font-size: 16px;
    letter-spacing: -.025em;
}

.rollout-check-body p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.rollout-action {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    color: #4B5563;
    font-size: 13px;
    line-height: 1.45;
}

.rollout-manual-actions {
    margin-top: 10px;
}

.rollout-status-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.rollout-status-pill.ok {
    background: #DCFCE7;
    color: #166534;
}

.rollout-status-pill.warn {
    background: #FEF3C7;
    color: #92400E;
}

.rollout-status-pill.fail {
    background: #FEE2E2;
    color: #991B1B;
}

.rollout-status-pill.pending {
    background: #E2E8F0;
    color: #334155;
}

.rollout-terminal-card pre {
    overflow-x: auto;
    padding: 16px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

@media (max-width: 1000px) {
    .rollout-hero,
    .rollout-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rollout-selector-card,
    .rollout-command-card {
        align-items: stretch;
        flex-direction: column;
    }

    .rollout-command-actions {
        justify-content: flex-start;
    }

    .rollout-selector-form {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .rollout-hero,
    .rollout-kpi-grid,
    .rollout-check {
        grid-template-columns: 1fr;
    }

    .rollout-status-pill {
        margin-top: 6px;
    }
}

/* ============================================================
   Phase 1E.6 — Real Customer Account Creation + Clean Production Onboarding
   ============================================================ */

.live-onboarding-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.live-onboarding-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.live-onboarding-hero > * {
    position: relative;
    z-index: 1;
}

.live-onboarding-hero h1 {
    max-width: 840px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.live-onboarding-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.live-onboarding-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.live-onboarding-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.live-onboarding-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.live-onboarding-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.live-onboarding-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    margin-bottom: 18px;
}

.live-create-card,
.live-playbook-card,
.live-section-card,
.live-created-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.live-card-note,
.live-playbook-card li,
.live-created-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.live-create-form {
    display: grid;
    gap: 12px;
}

.live-create-form label {
    display: grid;
    gap: 6px;
    color: #0B2D20;
    font-weight: 850;
}

.live-playbook-card ol {
    padding-left: 20px;
}

.live-playbook-actions,
.live-created-actions,
.live-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.live-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.live-section-header h2 {
    margin: 0;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.live-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.live-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.live-customer-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.live-customer-card.demo {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.16);
}

.live-customer-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.live-customer-pill.live {
    background: #DCFCE7;
    color: #166534;
}

.live-customer-pill.demo {
    background: #FEF3C7;
    color: #92400E;
}

.live-customer-head h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.055em;
}

.live-customer-head p,
.live-customer-head small {
    color: #5C6B62;
    line-height: 1.55;
}

.live-customer-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.live-customer-score strong {
    color: #0B2D20;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.08em;
}

.live-customer-score span {
    color: #5C6B62;
    font-weight: 850;
}

@media (max-width: 1000px) {
    .live-onboarding-hero,
    .live-onboarding-grid,
    .live-customer-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 1E.6B — Customer Onboarding Command Clarity
   ============================================================ */

.command-onboarding-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.22), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 52%, #0B6B3A 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.command-onboarding-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.command-onboarding-hero > * {
    position: relative;
    z-index: 1;
}

.command-onboarding-hero h1 {
    max-width: 860px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.command-onboarding-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.command-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.command-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.command-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.command-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.command-flow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.command-flow-card,
.command-create-card,
.command-section-card,
.command-created-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.command-flow-card p,
.command-created-card p,
.command-note {
    color: #5C6B62;
    line-height: 1.65;
}

.command-flow-actions,
.command-created-actions,
.command-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.command-create-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.command-create-form label {
    display: grid;
    gap: 6px;
    color: #0B2D20;
    font-weight: 850;
}

.command-create-form button {
    width: fit-content;
}

.command-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.command-kpi {
    border-radius: 26px !important;
}

.command-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.command-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.command-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.command-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.command-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.command-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.command-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.command-customer-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.command-customer-card.demo {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.16);
}

.command-customer-card.self {
    background: #F8FAF8;
}

.command-customer-card.admin {
    background: #F3FFF7;
}

.command-customer-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.command-customer-pill.default {
    background: #E2E8F0;
    color: #334155;
}

.command-customer-pill.self {
    background: #E0F2FE;
    color: #075985;
}

.command-customer-pill.admin {
    background: #DCFCE7;
    color: #166534;
}

.command-customer-pill.demo {
    background: #FEF3C7;
    color: #92400E;
}

.command-customer-head h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.055em;
}

.command-customer-head p,
.command-customer-head small {
    color: #5C6B62;
    line-height: 1.55;
}

.command-customer-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(248,250,248,.94);
    border: 1px solid rgba(11,45,32,.07);
}

.command-customer-score strong {
    color: #0B2D20;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.08em;
}

.command-customer-score span {
    color: #5C6B62;
    font-weight: 850;
}

@media (max-width: 1000px) {
    .command-onboarding-hero,
    .command-flow-grid,
    .command-create-form,
    .command-kpi-grid,
    .command-customer-grid {
        grid-template-columns: 1fr;
    }

    .command-section-header {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.7 — Revenue & Renewal Command Center
   ============================================================ */

.revenue-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.revenue-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.revenue-hero > * {
    position: relative;
    z-index: 1;
}

.revenue-hero h1 {
    max-width: 900px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.revenue-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.revenue-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.revenue-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.revenue-score-card strong {
    color: #FDE68A;
    font-size: clamp(38px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.revenue-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.revenue-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.revenue-kpi,
.revenue-command-card,
.revenue-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.revenue-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.revenue-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.revenue-kpi.premium strong {
    color: #0B6B3A;
}

.revenue-kpi.warn strong {
    color: #B45309;
}

.revenue-kpi.danger strong {
    color: #B91C1C;
}

.revenue-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.revenue-command-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.revenue-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.revenue-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.revenue-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.revenue-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.revenue-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.revenue-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.revenue-customer-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.revenue-customer-card.overdue {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.revenue-customer-card.due {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.revenue-customer-card.upgrade {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.revenue-customer-head h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.055em;
}

.revenue-customer-head p,
.revenue-customer-head small {
    color: #5C6B62;
    line-height: 1.55;
}

.revenue-customer-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.revenue-customer-pill.overdue {
    background: #FEE2E2;
    color: #991B1B;
}

.revenue-customer-pill.due {
    background: #FEF3C7;
    color: #92400E;
}

.revenue-customer-pill.upgrade {
    background: #DCFCE7;
    color: #166534;
}

.revenue-customer-pill.payment,
.revenue-customer-pill.default {
    background: #E2E8F0;
    color: #334155;
}

.revenue-customer-price {
    padding: 14px;
    border-radius: 20px;
    background: rgba(248,250,248,.94);
    border: 1px solid rgba(11,45,32,.07);
}

.revenue-customer-price span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.revenue-customer-price strong {
    display: block;
    color: #0B2D20;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 7px;
}

.revenue-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.revenue-message-preview {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 220px;
    padding: 14px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.revenue-table-wrap {
    overflow-x: auto;
}

.revenue-table {
    width: 100%;
    border-collapse: collapse;
}

.revenue-table th,
.revenue-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(11,45,32,.08);
    text-align: left;
}

.revenue-table th {
    color: #0B2D20;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.revenue-table td {
    color: #4B5563;
}

.revenue-followup-list {
    display: grid;
    gap: 10px;
}

.revenue-followup-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.revenue-followup-item strong {
    color: #0B2D20;
}

.revenue-followup-item span {
    color: #5C6B62;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .revenue-hero,
    .revenue-kpi-grid,
    .revenue-customer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .revenue-command-card {
        align-items: stretch;
        flex-direction: column;
    }

    .revenue-command-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .revenue-hero,
    .revenue-kpi-grid,
    .revenue-customer-grid {
        grid-template-columns: 1fr;
    }

    .revenue-section-header,
    .revenue-followup-item {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.7 — Revenue & Renewal Command Center
   ============================================================ */

.revenue-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.revenue-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.revenue-hero > * {
    position: relative;
    z-index: 1;
}

.revenue-hero h1 {
    max-width: 900px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.revenue-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.revenue-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.revenue-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.revenue-score-card strong {
    color: #FDE68A;
    font-size: clamp(38px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.revenue-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.revenue-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.revenue-kpi,
.revenue-command-card,
.revenue-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.revenue-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.revenue-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.revenue-kpi.premium strong {
    color: #0B6B3A;
}

.revenue-kpi.warn strong {
    color: #B45309;
}

.revenue-kpi.danger strong {
    color: #B91C1C;
}

.revenue-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.revenue-command-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.revenue-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.revenue-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.revenue-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.revenue-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.revenue-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.revenue-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.revenue-customer-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.revenue-customer-card.overdue {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.revenue-customer-card.due {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.revenue-customer-card.upgrade {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.revenue-customer-head h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.055em;
}

.revenue-customer-head p,
.revenue-customer-head small {
    color: #5C6B62;
    line-height: 1.55;
}

.revenue-customer-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.revenue-customer-pill.overdue {
    background: #FEE2E2;
    color: #991B1B;
}

.revenue-customer-pill.due {
    background: #FEF3C7;
    color: #92400E;
}

.revenue-customer-pill.upgrade {
    background: #DCFCE7;
    color: #166534;
}

.revenue-customer-pill.payment,
.revenue-customer-pill.default {
    background: #E2E8F0;
    color: #334155;
}

.revenue-customer-price {
    padding: 14px;
    border-radius: 20px;
    background: rgba(248,250,248,.94);
    border: 1px solid rgba(11,45,32,.07);
}

.revenue-customer-price span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.revenue-customer-price strong {
    display: block;
    color: #0B2D20;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 7px;
}

.revenue-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.revenue-message-preview {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 220px;
    padding: 14px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.revenue-table-wrap {
    overflow-x: auto;
}

.revenue-table {
    width: 100%;
    border-collapse: collapse;
}

.revenue-table th,
.revenue-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(11,45,32,.08);
    text-align: left;
}

.revenue-table th {
    color: #0B2D20;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.revenue-table td {
    color: #4B5563;
}

.revenue-followup-list {
    display: grid;
    gap: 10px;
}

.revenue-followup-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.revenue-followup-item strong {
    color: #0B2D20;
}

.revenue-followup-item span {
    color: #5C6B62;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .revenue-hero,
    .revenue-kpi-grid,
    .revenue-customer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .revenue-command-card {
        align-items: stretch;
        flex-direction: column;
    }

    .revenue-command-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .revenue-hero,
    .revenue-kpi-grid,
    .revenue-customer-grid {
        grid-template-columns: 1fr;
    }

    .revenue-section-header,
    .revenue-followup-item {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.8 — Customer Self-Service Billing & Renewal Page
   ============================================================ */

.billing-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.billing-hero.overdue {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(239,68,68,.22), transparent 28%),
        linear-gradient(135deg, #030806 0%, #291212 52%, #4C1111 100%);
}

.billing-hero.due-soon,
.billing-hero.pending,
.billing-hero.trial {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(245,158,11,.20), transparent 28%),
        linear-gradient(135deg, #030806 0%, #2E2410 52%, #5B3B0D 100%);
}

.billing-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.billing-hero > * {
    position: relative;
    z-index: 1;
}

.billing-hero h1 {
    max-width: 900px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.billing-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.billing-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.billing-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.billing-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.billing-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.billing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.billing-kpi,
.billing-payment-card,
.billing-upgrade-card,
.billing-message-card,
.billing-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.billing-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.billing-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1;
    letter-spacing: -.06em;
    margin-top: 8px;
}

.billing-command-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    margin-bottom: 18px;
}

.billing-payment-card p,
.billing-upgrade-card p,
.billing-message-card p,
.billing-section-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.billing-payment-box {
    display: grid;
    gap: 6px;
    margin: 16px 0;
    padding: 18px;
    border-radius: 24px;
    background: #07130D;
    color: #fff;
    border: 1px solid rgba(253,230,138,.18);
}

.billing-payment-box.pro {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 35%),
        linear-gradient(135deg, #07130D, #4A3514);
}

.billing-payment-box span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.billing-payment-box strong {
    color: #FDE68A;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.06em;
}

.billing-payment-box small {
    color: rgba(255,255,255,.78);
    font-weight: 800;
}

.billing-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.billing-pro-badge {
    display: inline-flex;
    width: fit-content;
    padding: 12px 16px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #166534;
    font-weight: 950;
}

.billing-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.billing-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.billing-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.billing-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.billing-message-card pre {
    white-space: pre-wrap;
    overflow-x: auto;
    padding: 16px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.billing-table-wrap {
    overflow-x: auto;
}

.billing-table {
    width: 100%;
    border-collapse: collapse;
}

.billing-table th,
.billing-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(11,45,32,.08);
    text-align: left;
}

.billing-table th {
    color: #0B2D20;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.billing-table td {
    color: #4B5563;
}

.billing-activity-list {
    display: grid;
    gap: 10px;
}

.billing-activity-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.billing-activity-item strong {
    color: #0B2D20;
}

.billing-activity-item span {
    color: #5C6B62;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .billing-hero,
    .billing-kpi-grid,
    .billing-command-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .billing-hero,
    .billing-kpi-grid,
    .billing-command-grid,
    .billing-section-header,
    .billing-activity-item {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.9 — Customer Renewal Reminder Automation Readiness
   ============================================================ */

.renewal-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #1D4A35 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.renewal-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.renewal-hero > * {
    position: relative;
    z-index: 1;
}

.renewal-hero h1 {
    max-width: 900px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.renewal-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.renewal-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.renewal-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.renewal-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.renewal-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.renewal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.renewal-kpi,
.renewal-command-card,
.renewal-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.renewal-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.renewal-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.renewal-kpi.premium strong {
    color: #0B6B3A;
}

.renewal-kpi.warn strong {
    color: #B45309;
}

.renewal-kpi.danger strong {
    color: #B91C1C;
}

.renewal-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.renewal-command-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.renewal-command-actions,
.renewal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.renewal-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.renewal-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.renewal-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.renewal-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.renewal-candidate-grid,
.renewal-reminder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.renewal-candidate-card,
.renewal-reminder-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.renewal-candidate-card.danger,
.renewal-reminder-card.danger {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.renewal-candidate-card.warn,
.renewal-reminder-card.warn {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.renewal-candidate-card.premium,
.renewal-reminder-card.premium {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.renewal-candidate-card h3,
.renewal-reminder-head h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 24px;
    letter-spacing: -.055em;
}

.renewal-candidate-card p,
.renewal-reminder-head p {
    color: #5C6B62;
    line-height: 1.55;
}

.renewal-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.renewal-pill.danger {
    background: #FEE2E2;
    color: #991B1B;
}

.renewal-pill.warn {
    background: #FEF3C7;
    color: #92400E;
}

.renewal-pill.premium {
    background: #DCFCE7;
    color: #166534;
}

.renewal-pill.default {
    background: #E2E8F0;
    color: #334155;
}

.renewal-message-preview {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 260px;
    padding: 14px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.renewal-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.renewal-mini-list {
    display: grid;
    gap: 10px;
}

.renewal-mini-list article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.renewal-mini-list strong {
    color: #0B2D20;
}

.renewal-mini-list span {
    color: #5C6B62;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .renewal-hero,
    .renewal-kpi-grid,
    .renewal-candidate-grid,
    .renewal-reminder-grid,
    .renewal-history-grid {
        grid-template-columns: 1fr 1fr;
    }

    .renewal-command-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .renewal-hero,
    .renewal-kpi-grid,
    .renewal-candidate-grid,
    .renewal-reminder-grid,
    .renewal-history-grid {
        grid-template-columns: 1fr;
    }

    .renewal-section-header {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.10 — Admin Daily Command Center
   ============================================================ */

.daily-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.daily-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.daily-hero > * {
    position: relative;
    z-index: 1;
}

.daily-hero h1 {
    max-width: 920px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.daily-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.daily-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.daily-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.daily-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.daily-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.daily-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.daily-kpi,
.daily-section-card,
.daily-action-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.daily-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.daily-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(28px, 3.8vw, 52px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.daily-kpi.premium strong {
    color: #0B6B3A;
}

.daily-kpi.warn strong {
    color: #B45309;
}

.daily-kpi.danger strong {
    color: #B91C1C;
}

.daily-main-grid,
.daily-board-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 18px;
    margin-bottom: 18px;
}

.daily-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.daily-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.daily-section-header p,
.daily-action-card p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.daily-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.daily-task-grid {
    display: grid;
    gap: 12px;
}

.daily-command-task {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 12px 36px rgba(10,28,20,.06);
}

.daily-command-task.warn {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.daily-command-task.danger {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.daily-command-task h3 {
    margin: 8px 0 4px;
    color: #0B2D20;
    letter-spacing: -.04em;
}

.daily-command-task p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.daily-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.daily-pill.ok {
    background: #DCFCE7;
    color: #166534;
}

.daily-pill.warn {
    background: #FEF3C7;
    color: #92400E;
}

.daily-pill.danger {
    background: #FEE2E2;
    color: #991B1B;
}

.daily-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.daily-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.daily-mini-grid article {
    padding: 16px;
    border-radius: 22px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.daily-mini-grid span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.daily-mini-grid strong {
    display: block;
    color: #0B2D20;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.daily-health-list {
    display: grid;
    gap: 10px;
}

.daily-health-list article {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.daily-health-list article.warn {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.daily-health-list strong {
    color: #0B2D20;
}

.daily-health-list span {
    color: #5C6B62;
    font-size: 13px;
    font-weight: 850;
}

.daily-log-list {
    display: grid;
    gap: 10px;
}

.daily-log-list article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.daily-log-list strong {
    color: #0B2D20;
}

.daily-log-list span,
.daily-log-list p {
    color: #5C6B62;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .daily-hero,
    .daily-kpi-grid,
    .daily-main-grid,
    .daily-board-grid {
        grid-template-columns: 1fr 1fr;
    }

    .daily-command-task {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .daily-hero,
    .daily-kpi-grid,
    .daily-main-grid,
    .daily-board-grid,
    .daily-mini-grid {
        grid-template-columns: 1fr;
    }

    .daily-section-header,
    .daily-health-list article {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.11 — First Customer Go-Live Wizard
   ============================================================ */

.golive-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.golive-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.golive-hero > * {
    position: relative;
    z-index: 1;
}

.golive-hero h1 {
    max-width: 920px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.golive-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.golive-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.golive-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.golive-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.golive-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.golive-selector-card,
.golive-command-card,
.golive-section-card,
.golive-kpi,
.golive-progress-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.golive-selector-card,
.golive-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.golive-selector-card p,
.golive-command-card p {
    color: #5C6B62;
    line-height: 1.6;
}

.golive-selector-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: min(520px, 100%);
}

.golive-selector-form select {
    min-width: min(360px, 100%);
}

.golive-kpi-grid,
.golive-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.golive-progress-grid {
    grid-template-columns: repeat(3, 1fr);
}

.golive-kpi span,
.golive-progress-card span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.golive-kpi strong,
.golive-progress-card strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1;
    letter-spacing: -.06em;
    margin-top: 8px;
}

.golive-kpi.premium strong,
.golive-progress-card.premium strong {
    color: #0B6B3A;
}

.golive-kpi.warn strong,
.golive-progress-card.warn strong {
    color: #B45309;
}

.golive-command-actions,
.golive-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.golive-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.golive-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.golive-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.golive-section-header span {
    color: #0B6B3A;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -.06em;
}

.golive-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.golive-step-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.golive-step-card.done {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.golive-step-card.waiting {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.golive-step-card.manual {
    background: #F8FAF8;
}

.golive-step-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.golive-step-top small {
    color: #6B7A70;
    font-weight: 850;
}

.golive-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.golive-pill.done {
    background: #DCFCE7;
    color: #166534;
}

.golive-pill.waiting {
    background: #FEF3C7;
    color: #92400E;
}

.golive-pill.manual {
    background: #E2E8F0;
    color: #334155;
}

.golive-step-card h3 {
    margin: 0;
    color: #0B2D20;
    font-size: 23px;
    letter-spacing: -.05em;
}

.golive-step-card p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.golive-message-preview {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 240px;
    padding: 14px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .golive-hero,
    .golive-kpi-grid,
    .golive-progress-grid,
    .golive-step-grid {
        grid-template-columns: 1fr 1fr;
    }

    .golive-selector-card,
    .golive-command-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .golive-hero,
    .golive-kpi-grid,
    .golive-progress-grid,
    .golive-step-grid {
        grid-template-columns: 1fr;
    }

    .golive-section-header,
    .golive-step-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .golive-selector-form {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.12 — Public Pricing + Conversion Upgrade
   ============================================================ */

.public-pricing-hero,
.public-start-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 46px);
    margin-bottom: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.26), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 50%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.public-pricing-hero::after,
.public-start-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 132px;
    color: rgba(253,230,138,.13);
    line-height: 1;
}

.public-pricing-hero > *,
.public-start-hero > * {
    position: relative;
    z-index: 1;
}

.public-pricing-hero h1,
.public-start-hero h1 {
    max-width: 920px;
    font-size: clamp(38px, 6vw, 76px);
    line-height: .98;
    letter-spacing: -.08em;
    margin: 14px 0;
    padding-bottom: .14em;
}

.public-pricing-hero p,
.public-start-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.80);
    line-height: 1.7;
    font-size: 17px;
}

.public-hero-actions,
.public-plan-actions,
.public-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.public-ghost-light {
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.10) !important;
}

.public-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.public-trust-row span {
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.82);
    font-weight: 850;
    font-size: 13px;
}

.public-hero-card,
.public-start-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 28px;
    border-radius: 30px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.public-hero-card span,
.public-start-card span,
.public-start-price span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.public-hero-card strong,
.public-start-card strong {
    color: #FDE68A;
    font-size: clamp(48px, 7vw, 90px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.public-hero-card small,
.public-start-card small {
    color: rgba(255,255,255,.82);
    line-height: 1.5;
    font-weight: 850;
}

.public-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.public-plan-card {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 24px 70px rgba(10,28,20,.10);
}

.public-plan-card.pro {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 35%),
        linear-gradient(145deg, #07130D, #0B2D20 58%, #4A3514);
    color: #fff;
}

.public-plan-label {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #166534;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-plan-card.pro .public-plan-label {
    background: rgba(253,230,138,.16);
    color: #FDE68A;
    border: 1px solid rgba(253,230,138,.18);
}

.public-plan-card h2 {
    margin: 16px 0 8px;
    color: #0B2D20;
    font-size: clamp(30px, 4vw, 50px);
    letter-spacing: -.07em;
}

.public-plan-card.pro h2 {
    color: #FDE68A;
}

.public-plan-card p {
    color: #5C6B62;
    line-height: 1.65;
}

.public-plan-card.pro p {
    color: rgba(255,255,255,.78);
}

.public-plan-price {
    display: flex;
    align-items: end;
    gap: 8px;
    margin: 18px 0;
}

.public-plan-price strong {
    color: #0B2D20;
    font-size: clamp(40px, 6vw, 72px);
    line-height: .95;
    letter-spacing: -.08em;
}

.public-plan-card.pro .public-plan-price strong {
    color: #FDE68A;
}

.public-plan-price span {
    color: #6B7A70;
    font-weight: 850;
    padding-bottom: 7px;
}

.public-plan-card.pro .public-plan-price span {
    color: rgba(255,255,255,.74);
}

.public-plan-card ul {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.public-plan-card li {
    color: #24352C;
    font-weight: 760;
}

.public-plan-card.pro li {
    color: rgba(255,255,255,.86);
}

.public-section-card {
    border-radius: 30px !important;
    margin-bottom: 22px;
}

.public-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.public-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.06em;
    font-size: clamp(28px, 4vw, 46px);
}

.public-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.public-who-grid,
.public-feature-grid,
.public-payment-steps,
.public-start-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.public-who-grid article,
.public-payment-steps article,
.public-start-step,
.public-feature-grid article {
    padding: 18px;
    border-radius: 24px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.public-who-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #DCFCE7;
    font-size: 24px;
    margin-bottom: 12px;
}

.public-who-grid h3,
.public-payment-steps h3,
.public-start-step h2 {
    margin: 0 0 8px;
    color: #0B2D20;
    letter-spacing: -.04em;
}

.public-who-grid p,
.public-payment-steps p,
.public-start-step p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.public-payment-steps strong,
.public-start-step strong {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0B2D20;
    color: #FDE68A;
    margin-bottom: 12px;
}

.public-conversion-band {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 34px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 35%),
        linear-gradient(135deg, #07130D, #0B2D20 62%, #4A3514);
    border: 1px solid rgba(253,230,138,.16);
    box-shadow: 0 24px 80px rgba(11,45,32,.22);
}

.public-conversion-band span {
    color: #FDE68A;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.public-conversion-band h2 {
    margin: 8px 0;
    font-size: clamp(28px, 4vw, 50px);
    letter-spacing: -.07em;
    line-height: 1.05;
}

.public-conversion-band p {
    margin: 0;
    color: rgba(255,255,255,.78);
    line-height: 1.6;
}

.public-start-price {
    width: fit-content;
    min-width: 260px;
    margin: 20px 0;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}

.public-start-price strong {
    display: block;
    color: #FDE68A;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 6px 0;
}

.public-start-price small {
    color: rgba(255,255,255,.80);
    line-height: 1.5;
}

.public-conversion-floating-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(940px, calc(100% - 24px));
    padding: 10px;
    border-radius: 999px;
    background: rgba(7,19,13,.92);
    color: #fff;
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 18px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}

.public-conversion-floating-bar span {
    color: #FDE68A;
    font-weight: 950;
    font-size: 13px;
}

.public-conversion-floating-bar a {
    padding: 8px 11px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    background: rgba(255,255,255,.10);
}

.public-conversion-floating-bar a:last-child {
    color: #0B2D20;
    background: #FDE68A;
}

.public-nav-start {
    font-weight: 950 !important;
    color: #0B2D20 !important;
    background: #FDE68A !important;
    border-radius: 999px !important;
    padding: 9px 13px !important;
}

.register-plan-helper {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.18), transparent 35%),
        linear-gradient(135deg, #07130D, #0B2D20);
    color: #fff;
    border: 1px solid rgba(253,230,138,.16);
}

.register-plan-helper span {
    color: #FDE68A;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.register-plan-helper strong {
    display: block;
    margin-top: 5px;
    font-size: 26px;
    letter-spacing: -.04em;
}

.register-plan-helper p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.78);
}

@media (max-width: 1100px) {
    .public-pricing-hero,
    .public-start-hero,
    .public-pricing-grid,
    .public-who-grid,
    .public-payment-steps,
    .public-start-grid,
    .public-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .public-conversion-band {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .public-pricing-hero,
    .public-start-hero,
    .public-pricing-grid,
    .public-who-grid,
    .public-payment-steps,
    .public-start-grid,
    .public-feature-grid {
        grid-template-columns: 1fr;
    }

    .public-conversion-floating-bar {
        border-radius: 24px;
        justify-content: flex-start;
    }

    .register-plan-helper {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1E.13 — Final Go-Live Audit & Production Lock
   ============================================================ */

.final-lock-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(37,211,102,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.final-lock-hero.unlocked {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(245,158,11,.20), transparent 28%),
        linear-gradient(135deg, #030806 0%, #2E2410 52%, #5B3B0D 100%);
}

.final-lock-hero::after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 124px;
    color: rgba(253,230,138,.14);
    line-height: 1;
}

.final-lock-hero > * {
    position: relative;
    z-index: 1;
}

.final-lock-hero h1 {
    max-width: 920px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.final-lock-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.final-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.final-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.final-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.final-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.final-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.final-kpi,
.final-lock-command-card,
.final-lock-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.final-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.final-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.final-kpi.premium strong {
    color: #0B6B3A;
}

.final-kpi.warn strong {
    color: #B45309;
}

.final-kpi.danger strong {
    color: #B91C1C;
}

.final-lock-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.final-lock-command-card p {
    color: #5C6B62;
    line-height: 1.6;
}

.final-lock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.final-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.final-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.final-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.final-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.final-danger-box {
    background: #FFF1F1 !important;
    border-color: rgba(185,28,28,.14) !important;
}

.final-warning-box {
    background: #FFF8EB !important;
    border-color: rgba(180,83,9,.14) !important;
}

.final-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.final-lock-check {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 14px 42px rgba(10,28,20,.06);
}

.final-lock-check.ok {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.final-lock-check.warn {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.final-lock-check.fail {
    background: #FFF1F1;
    border-color: rgba(185,28,28,.14);
}

.final-lock-check h3 {
    margin: 9px 0 5px;
    color: #0B2D20;
    font-size: 22px;
    letter-spacing: -.045em;
}

.final-lock-check p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.final-lock-check small {
    display: block;
    margin-top: 8px;
    color: #92400E;
    font-weight: 850;
}

.final-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.final-pill.ok {
    background: #DCFCE7;
    color: #166534;
}

.final-pill.warn {
    background: #FEF3C7;
    color: #92400E;
}

.final-pill.fail {
    background: #FEE2E2;
    color: #991B1B;
}

.final-log-list {
    display: grid;
    gap: 10px;
}

.final-log-list article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.final-log-list strong {
    color: #0B2D20;
}

.final-log-list span,
.final-log-list p {
    color: #5C6B62;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .final-lock-hero,
    .final-kpi-grid,
    .final-check-grid {
        grid-template-columns: 1fr 1fr;
    }

    .final-lock-command-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .final-lock-hero,
    .final-kpi-grid,
    .final-check-grid {
        grid-template-columns: 1fr;
    }

    .final-section-header {
        flex-direction: column;
    }
}

/* ============================================================
   Phase 1F.0 — BizFlow Marketing Launch Kit
   ============================================================ */

.marketing-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(236,72,153,.16), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.marketing-hero::after {
    content: "🎬";
    position: absolute;
    right: 30px;
    top: 24px;
    font-size: 110px;
    opacity: .16;
    line-height: 1;
}

.marketing-hero > * {
    position: relative;
    z-index: 1;
}

.marketing-hero h1 {
    max-width: 920px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.marketing-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.marketing-hero-actions,
.marketing-command-actions,
.marketing-asset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.marketing-hero-actions {
    margin-top: 18px;
}

.marketing-ghost-light {
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.10) !important;
}

.marketing-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.marketing-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.marketing-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.marketing-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.marketing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.marketing-kpi,
.marketing-command-card,
.marketing-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.marketing-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.marketing-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.marketing-kpi.premium strong {
    color: #0B6B3A;
}

.marketing-command-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.marketing-command-card p {
    color: #5C6B62;
    line-height: 1.6;
}

.marketing-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.marketing-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.marketing-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.marketing-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.marketing-day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(190px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.marketing-day-card {
    min-width: 190px;
    padding: 18px;
    border-radius: 24px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.08);
}

.marketing-day-card span {
    color: #0B6B3A;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.marketing-day-card h3 {
    margin: 9px 0 8px;
    color: #0B2D20;
    letter-spacing: -.045em;
}

.marketing-day-card p {
    color: #5C6B62;
    line-height: 1.5;
}

.marketing-day-card strong {
    display: block;
    color: #0B2D20;
    line-height: 1.45;
}

.marketing-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.marketing-asset-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.marketing-asset-card.created {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.marketing-asset-card.posted {
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.14), transparent 35%),
        #F3FFF7;
    border-color: rgba(11,107,58,.18);
}

.marketing-asset-card.skipped {
    background: #F8FAF8;
    opacity: .72;
}

.marketing-asset-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.marketing-asset-head small {
    color: #6B7A70;
    font-weight: 850;
}

.marketing-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.marketing-pill.planned {
    background: #E2E8F0;
    color: #334155;
}

.marketing-pill.created {
    background: #DCFCE7;
    color: #166534;
}

.marketing-pill.posted {
    background: #FEF3C7;
    color: #92400E;
}

.marketing-pill.skipped {
    background: #F1F5F9;
    color: #64748B;
}

.marketing-asset-card h3 {
    margin: 0;
    color: #0B2D20;
    font-size: 23px;
    letter-spacing: -.05em;
}

.marketing-asset-card p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.marketing-copy-box {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 340px;
    padding: 14px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.marketing-next-band {
    margin-bottom: 18px;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 34px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 35%),
        linear-gradient(135deg, #07130D, #0B2D20 62%, #4A3514);
    border: 1px solid rgba(253,230,138,.16);
    box-shadow: 0 24px 80px rgba(11,45,32,.22);
}

.marketing-next-band span {
    color: #FDE68A;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.marketing-next-band h2 {
    margin: 8px 0;
    font-size: clamp(28px, 4vw, 50px);
    letter-spacing: -.07em;
    line-height: 1.05;
}

.marketing-next-band p {
    margin: 0;
    max-width: 860px;
    color: rgba(255,255,255,.78);
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .marketing-hero,
    .marketing-kpi-grid,
    .marketing-asset-grid {
        grid-template-columns: 1fr 1fr;
    }

    .marketing-command-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .marketing-hero,
    .marketing-kpi-grid,
    .marketing-asset-grid {
        grid-template-columns: 1fr;
    }

    .marketing-section-header,
    .marketing-asset-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Phase 1F.1 — BizFlow Poster & Video Creative Production Pack
   ============================================================ */

.creative-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
    border-radius: 34px;
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.24), transparent 32%),
        radial-gradient(circle at 92% 15%, rgba(168,85,247,.18), transparent 28%),
        linear-gradient(135deg, #030806 0%, #0B2D20 48%, #4A3514 100%);
    border: 1px solid rgba(253,230,138,.18);
    box-shadow: 0 34px 100px rgba(11,45,32,.28);
}

.creative-hero::after {
    content: "🎨";
    position: absolute;
    right: 30px;
    top: 24px;
    font-size: 112px;
    opacity: .16;
    line-height: 1;
}

.creative-hero > * {
    position: relative;
    z-index: 1;
}

.creative-hero h1 {
    max-width: 920px;
    font-size: clamp(34px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: -.075em;
    margin: 14px 0;
    padding-bottom: .12em;
}

.creative-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.creative-hero-actions,
.creative-asset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.creative-hero-actions {
    margin-top: 18px;
}

.creative-ghost-light {
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.10) !important;
}

.creative-score-card {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.creative-score-card span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.creative-score-card strong {
    color: #FDE68A;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -.08em;
    margin: 8px 0;
}

.creative-score-card small {
    color: rgba(255,255,255,.80);
    font-weight: 850;
}

.creative-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.creative-kpi,
.creative-brand-card,
.creative-section-card {
    border-radius: 30px !important;
    margin-bottom: 18px;
}

.creative-kpi span {
    display: block;
    color: #6B7A70;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.creative-kpi strong {
    display: block;
    color: #0B2D20;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.07em;
    margin-top: 8px;
}

.creative-kpi.premium strong {
    color: #0B6B3A;
}

.creative-brand-card {
    display: grid;
    gap: 18px;
}

.creative-brand-card p {
    color: #5C6B62;
    line-height: 1.6;
}

.creative-brand-grid,
.creative-required-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.creative-brand-grid article,
.creative-required-grid article {
    padding: 16px;
    border-radius: 22px;
    background: #F8FAF8;
    border: 1px solid rgba(11,45,32,.07);
}

.creative-brand-grid span {
    display: block;
    color: #0B6B3A;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 7px;
}

.creative-brand-grid strong {
    color: #0B2D20;
    line-height: 1.45;
}

.creative-section-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.creative-section-header h2 {
    margin: 0 0 5px;
    color: #0B2D20;
    letter-spacing: -.05em;
}

.creative-section-header p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.creative-section-header span {
    color: #6B7A70;
    font-size: 12px;
    font-weight: 900;
}

.creative-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.creative-asset-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(11,45,32,.08);
    box-shadow: 0 18px 54px rgba(10,28,20,.08);
}

.creative-asset-card.prompted {
    background: #F8FAF8;
}

.creative-asset-card.designed,
.creative-asset-card.edited {
    background: #FFF8EB;
    border-color: rgba(180,83,9,.14);
}

.creative-asset-card.approved,
.creative-asset-card.posted {
    background: #F3FFF7;
    border-color: rgba(11,107,58,.12);
}

.creative-asset-card.skipped {
    opacity: .70;
}

.creative-asset-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.creative-asset-head small {
    color: #6B7A70;
    font-weight: 850;
}

.creative-pill {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.creative-pill.planned {
    background: #E2E8F0;
    color: #334155;
}

.creative-pill.prompted {
    background: #E0F2FE;
    color: #075985;
}

.creative-pill.designed,
.creative-pill.edited {
    background: #FEF3C7;
    color: #92400E;
}

.creative-pill.approved,
.creative-pill.posted {
    background: #DCFCE7;
    color: #166534;
}

.creative-pill.skipped {
    background: #F1F5F9;
    color: #64748B;
}

.creative-asset-card h3 {
    margin: 0;
    color: #0B2D20;
    font-size: 23px;
    letter-spacing: -.05em;
}

.creative-asset-card p {
    margin: 0;
    color: #5C6B62;
    line-height: 1.55;
}

.creative-copy-box {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 420px;
    padding: 14px;
    border-radius: 18px;
    background: #07130D;
    color: #FDE68A;
    line-height: 1.55;
}

.creative-next-band {
    margin-bottom: 18px;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 34px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(253,230,138,.20), transparent 35%),
        linear-gradient(135deg, #07130D, #0B2D20 62%, #4A3514);
    border: 1px solid rgba(253,230,138,.16);
    box-shadow: 0 24px 80px rgba(11,45,32,.22);
}

.creative-next-band span {
    color: #FDE68A;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.creative-next-band h2 {
    margin: 8px 0;
    font-size: clamp(28px, 4vw, 50px);
    letter-spacing: -.07em;
    line-height: 1.05;
}

.creative-next-band p {
    margin: 0;
    max-width: 860px;
    color: rgba(255,255,255,.78);
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .creative-hero,
    .creative-kpi-grid,
    .creative-brand-grid,
    .creative-required-grid,
    .creative-asset-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .creative-hero,
    .creative-kpi-grid,
    .creative-brand-grid,
    .creative-required-grid,
    .creative-asset-grid {
        grid-template-columns: 1fr;
    }

    .creative-section-header,
    .creative-asset-head {
        flex-direction: column;
        align-items: flex-start;
    }
}