:root {
    --bg: #0f172a;
    --panel: #111827;
    --panel-2: #1f2937;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --brand: #2563eb;
    --brand-2: #38bdf8;
    --border: rgba(255,255,255,0.08);
    --good: #22c55e;
    --warn: #f59e0b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 35%),
                linear-gradient(135deg, #020617, #0f172a);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr;
}

.sidebar {
    border-right: 1px solid var(--border);
    padding: 24px;
    background: rgba(2,6,23,.72);
    backdrop-filter: blur(18px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 900;
}

.brand h1 {
    font-size: 18px;
    margin: 0;
}

.brand p {
    color: var(--muted);
    margin: 3px 0 0;
    font-size: 13px;
}

.nav {
    display: grid;
    gap: 8px;
}

.nav a {
    padding: 13px 14px;
    border-radius: 14px;
    color: var(--muted);
}

.nav a:hover {
    background: rgba(255,255,255,.07);
    color: white;
}

.main {
    padding: 28px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 28px;
}

.topbar h2 {
    margin: 0;
    font-size: 32px;
}

.topbar p {
    margin: 6px 0 0;
    color: var(--muted);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn {
    border: 0;
    border-radius: 14px;
    padding: 11px 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.btn.secondary {
    background: rgba(255,255,255,.08);
}

.btn.full {
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.stat-card,
.panel,
.auth-card {
    background: rgba(17,24,39,.82);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.stat-card span {
    color: var(--muted);
    font-size: 14px;
}

.stat-card strong {
    display: block;
    font-size: 38px;
    margin: 12px 0;
}

.stat-card p {
    color: var(--muted);
    margin: 0;
}

.panel-grid {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 18px;
}

.panel h3,
.auth-card h3 {
    margin-top: 0;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.action-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    font-weight: 800;
}

.status-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 99px;
    margin-right: 8px;
}

.dot.good {
    background: var(--good);
}

.dot.warn {
    background: var(--warn);
}

.auth-card {
    max-width: 440px;
}

.auth-card input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
}

.auth-card label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
}

.auth-card p {
    margin-bottom: 18px;
}

.messages {
    margin-bottom: 18px;
}

.message {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .stats-grid,
    .panel-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.mini-card {
    background: rgba(31,41,55,.72);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
}

.mini-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.mini-card h3 {
    margin: 0;
}

.mini-card p {
    margin: 6px 0 0;
    color: var(--muted);
}

.badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.badge.good {
    background: rgba(34,197,94,.15);
    color: #86efac;
}

.badge.warn {
    background: rgba(245,158,11,.15);
    color: #fcd34d;
}

.mini-meta {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.service-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-tags span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(37,99,235,.18);
    border: 1px solid rgba(56,189,248,.22);
    font-size: 13px;
}

.service-tags em,
.empty-text {
    color: var(--muted);
}

.card-actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
}

.card-actions a {
    color: #93c5fd;
    font-weight: 700;
}

.form-panel {
    max-width: 760px;
}

.form-panel input,
.form-panel textarea,
.form-panel select {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
}

.form-panel label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
}

.form-panel p {
    margin-bottom: 18px;
}

.form-panel ul {
    list-style: none;
    padding: 0;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-form input {
    min-width: 260px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
}

.notes-preview {
    margin-top: 16px;
    color: var(--muted);
    line-height: 1.45;
}

.search-form select {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
}

.booking-list {
    display: grid;
    gap: 14px;
}

.booking-card {
    background: rgba(31,41,55,.72);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
}

.booking-main {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.booking-main h3 {
    margin: 0;
}

.booking-main p {
    margin: 6px 0 0;
    color: var(--muted);
}

.muted {
    color: var(--muted);
}

.booking-meta {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    color: var(--muted);
}

.status-pill {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.status-pending {
    background: rgba(245,158,11,.15);
    color: #fcd34d;
}

.status-confirmed {
    background: rgba(37,99,235,.18);
    color: #bfdbfe;
}

.status-checked_in,
.status-completed {
    background: rgba(34,197,94,.15);
    color: #86efac;
}

.status-cancelled,
.status-no_show {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
}

.status-rescheduled {
    background: rgba(168,85,247,.15);
    color: #ddd6fe;
}

.wrap {
    flex-wrap: wrap;
}

.error {
    background: rgba(239,68,68,.16);
    color: #fecaca;
}

.booking-card.compact {
    padding: 14px;
}

.booking-card.compact h3 {
    font-size: 16px;
}

.booking-card.compact {
    padding: 14px;
}

.booking-card.compact h3 {
    font-size: 16px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(180px, 1fr));
    gap: 14px;
    overflow-x: auto;
}

.calendar-day {
    min-height: 420px;
    background: rgba(17,24,39,.82);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 14px;
}

.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.calendar-day-header span {
    color: var(--muted);
}

.calendar-bookings {
    display: grid;
    gap: 10px;
}

.calendar-booking {
    display: grid;
    gap: 5px;
    background: rgba(31,41,55,.85);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
}

.calendar-booking strong {
    color: #bfdbfe;
}

.calendar-booking span {
    font-weight: 800;
}

.calendar-booking small,
.calendar-booking em {
    color: var(--muted);
    font-style: normal;
}

.calendar-booking .status-pill {
    width: fit-content;
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(240px, 1fr));
    }
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(180px, 1fr));
    gap: 14px;
    overflow-x: auto;
}

.calendar-day {
    min-height: 420px;
    background: rgba(17,24,39,.82);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 14px;
}

.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.calendar-day-header span {
    color: var(--muted);
}

.calendar-bookings {
    display: grid;
    gap: 10px;
}

.calendar-booking {
    display: grid;
    gap: 5px;
    background: rgba(31,41,55,.85);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
}

.calendar-booking strong {
    color: #bfdbfe;
}

.calendar-booking span {
    font-weight: 800;
}

.calendar-booking small,
.calendar-booking em {
    color: var(--muted);
    font-style: normal;
}

.calendar-booking .status-pill {
    width: fit-content;
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(240px, 1fr));
    }
}

.public-booking-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.public-booking-card {
    width: min(720px, 100%);
    background: rgba(17,24,39,.88);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.public-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.public-header h1,
.success-card h1 {
    margin: 0;
    font-size: 32px;
}

.public-header p,
.success-card p {
    color: var(--muted);
}

.public-form input,
.public-form textarea,
.public-form select {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
}

.public-form label {
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.public-form p {
    margin-bottom: 18px;
}

.confirmation-box {
    margin-top: 22px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(31,41,55,.82);
    border: 1px solid var(--border);
}

.step-box {
    margin-top: 22px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(31,41,55,.55);
    border: 1px solid var(--border);
}

.step-box h3 {
    margin-top: 0;
}

.selection-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.selection-summary span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37,99,235,.18);
    border: 1px solid rgba(56,189,248,.22);
    font-size: 13px;
    font-weight: 800;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.slot-button {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(15,23,42,.9);
    color: white;
    padding: 12px;
    cursor: pointer;
    font-weight: 800;
}

.slot-button:hover,
.slot-button.selected {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.selected-slot-display {
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.82);
    border: 1px solid var(--border);
    color: var(--muted);
}

.form-section-title {
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: #bfdbfe;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}

.form-panel input[type="checkbox"] {
    width: auto;
    transform: scale(1.2);
    margin-left: 8px;
}

.form-section-title {
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: #bfdbfe;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}

.form-panel input[type="checkbox"] {
    width: auto;
    transform: scale(1.2);
    margin-left: 8px;
}

.timeline {
    margin-top: 22px;
    display: grid;
    gap: 18px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 14px;
    align-items: flex-start;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    margin-top: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 0 6px rgba(37,99,235,.15);
}

.timeline-item p {
    margin: 5px 0;
    color: var(--muted);
}

.timeline-item small {
    color: var(--muted);
}

.unread-card {
    border-color: rgba(56,189,248,.45);
    box-shadow: 0 0 0 1px rgba(56,189,248,.2), 0 18px 50px rgba(0,0,0,.2);
}

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

.profile-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.profile-header h3 {
    margin-top: 0;
    font-size: 28px;
}

.profile-header p {
    color: var(--muted);
    margin: 6px 0;
}

.profile-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.client-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notes-block {
    margin-top: 20px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(31,41,55,.65);
    border: 1px solid var(--border);
}

.notes-block h4 {
    margin-top: 0;
}

.notes-block p {
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 1000px) {
    .profile-grid,
    .client-stats {
        grid-template-columns: 1fr;
    }
}

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

.report-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: rgba(31,41,55,.72);
    border: 1px solid var(--border);
}

.report-row p {
    color: var(--muted);
    margin: 4px 0 0;
}

.report-row span {
    font-weight: 900;
    color: #bfdbfe;
}

.status-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.status-report-grid .mini-card strong {
    display: block;
    font-size: 34px;
    margin-top: 12px;
}

.public-landing {
    min-height: 100vh;
    padding: 34px;
}

.hero-panel {
    max-width: 1120px;
    margin: 0 auto 24px;
    padding: 46px;
    border-radius: 32px;
    background: rgba(17,24,39,.86);
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.hero-brand {
    margin-bottom: 32px;
}

.hero-panel h2 {
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1;
    margin: 0;
    max-width: 920px;
}

.hero-copy {
    margin-top: 22px;
    color: var(--muted);
    font-size: 20px;
    max-width: 760px;
    line-height: 1.5;
}

.hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.landing-grid {
    max-width: 1120px;
    margin: 0 auto;
}

.setup-banner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(56,189,248,.12));
}

.setup-banner h3 {
    margin: 0;
}

.setup-banner p {
    margin: 6px 0 0;
    color: var(--muted);
}

.onboarding-list {
    display: grid;
    gap: 14px;
}

.onboarding-step {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    background: rgba(31,41,55,.72);
    border: 1px solid var(--border);
}

.onboarding-step p {
    margin: 6px 0 0;
    color: var(--muted);
}

@media (max-width: 800px) {
    .setup-banner,
    .onboarding-step {
        flex-direction: column;
        align-items: flex-start;
    }
}

.setup-banner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(56,189,248,.12));
}

.setup-banner h3 {
    margin: 0;
}

.setup-banner p {
    margin: 6px 0 0;
    color: var(--muted);
}

.onboarding-list {
    display: grid;
    gap: 14px;
}

.onboarding-step {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    background: rgba(31,41,55,.72);
    border: 1px solid var(--border);
}

.onboarding-step p {
    margin: 6px 0 0;
    color: var(--muted);
}

@media (max-width: 800px) {
    .setup-banner,
    .onboarding-step {
        flex-direction: column;
        align-items: flex-start;
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2,6,23,.78);
    backdrop-filter: blur(14px);
}

.onboarding-modal {
    position: relative;
    width: min(620px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: rgba(17,24,39,.96);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 30px 90px rgba(0,0,0,.5);
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--muted);
    padding: 8px 12px;
    cursor: pointer;
}

.modal-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.step-dot {
    height: 8px;
    flex: 1;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.step-dot.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.modal-step {
    display: none;
}

.modal-step.active {
    display: block;
}

.modal-step h2 {
    margin: 0;
    font-size: 30px;
}

.modal-step p {
    color: var(--muted);
    line-height: 1.5;
}

.modal-step label {
    display: block;
    margin: 14px 0 6px;
    color: var(--muted);
    font-weight: 700;
}

.modal-step input,
.modal-step textarea,
.modal-step select {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.checkbox-label input {
    width: auto;
}

.guided-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(2,6,23,.66);
    backdrop-filter: blur(3px);
}

.tour-highlight {
    position: fixed;
    z-index: 10001;
    border: 2px solid #38bdf8;
    border-radius: 18px;
    box-shadow:
        0 0 0 9999px rgba(2,6,23,.72),
        0 0 30px rgba(56,189,248,.55);
    pointer-events: none;
    transition: all .25s ease;
}

.tour-card {
    position: fixed;
    z-index: 10002;
    width: min(380px, calc(100vw - 48px));
    background: rgba(17,24,39,.98);
    border: 1px solid rgba(56,189,248,.28);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    transition: all .25s ease;
}

.tour-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 13px;
}

.tour-progress button {
    border: 0;
    background: transparent;
    color: #93c5fd;
    cursor: pointer;
    font-weight: 800;
}

.tour-card h3 {
    margin: 0;
    font-size: 24px;
}

.tour-card p {
    color: var(--muted);
    line-height: 1.5;
}

.tour-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.tour-actions .btn,
.tour-actions .btn.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 800px) {
    .tour-card {
        left: 24px !important;
        right: 24px;
        bottom: 24px;
        top: auto !important;
        transform: none !important;
    }
}

/* Guided Tour Visibility Fix */
.guided-tour-overlay {
    background: rgba(2,6,23,.28) !important;
    backdrop-filter: none !important;
    pointer-events: none;
}

.tour-highlight {
    z-index: 10001;
    border: 3px solid #38bdf8 !important;
    box-shadow:
        0 0 0 4px rgba(56,189,248,.25),
        0 0 28px rgba(56,189,248,.85) !important;
    background: rgba(56,189,248,.08);
    pointer-events: none;
}

.tour-card {
    z-index: 10002;
    background: #0f172a !important;
    border: 2px solid rgba(56,189,248,.45) !important;
    pointer-events: auto;
}

.tour-card,
.tour-card * {
    color: #e5e7eb !important;
}

.tour-card p,
.tour-progress {
    color: #cbd5e1 !important;
}

.tour-actions,
.tour-progress button,
.tour-actions button {
    pointer-events: auto;
}

.tour-action-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(56,189,248,.22);
}

.tour-action-box .btn {
    width: 100%;
}

.tour-card {
    width: min(410px, calc(100vw - 48px));
}

.tour-required-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.28);
}

.tour-required-box strong {
    display: block;
    color: #fcd34d !important;
    margin-bottom: 6px;
}

.tour-required-box p {
    margin: 0;
    color: #fde68a !important;
}

.shake {
    animation: sg-shake .35s ease-in-out;
}

@keyframes sg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    50% { transform: translateX(7px); }
    75% { transform: translateX(-4px); }
}

.tour-required-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.28);
}

.tour-required-box strong {
    display: block;
    color: #fcd34d !important;
    margin-bottom: 6px;
}

.tour-required-box p {
    margin: 0;
    color: #fde68a !important;
}

.shake {
    animation: sg-shake .35s ease-in-out;
}

@keyframes sg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    50% { transform: translateX(7px); }
    75% { transform: translateX(-4px); }
}

/* Tour UX Fix: do not let tour block setup forms */
.form-panel ~ .guided-tour-overlay,
body:has(.form-panel) .guided-tour-overlay {
    display: none !important;
}

/* Hide Start Tour button on form/create/edit pages */
body:has(.form-panel) button[onclick*="startSGBTour"] {
    display: none !important;
}

/* Better mobile-first guided tour */
@media (max-width: 800px) {
    .guided-tour-overlay {
        background: rgba(2,6,23,.18) !important;
        pointer-events: none;
    }

    .tour-highlight {
        display: none !important;
    }

    .tour-card {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 24px 24px 18px 18px;
        padding: 18px;
        pointer-events: auto;
    }

    .tour-card h3 {
        font-size: 22px;
    }

    .tour-card p {
        font-size: 14px;
    }

    .tour-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tour-actions .btn {
        width: 100%;
    }

    .tour-action-box {
        padding: 12px;
    }

    .tour-required-box {
        padding: 12px;
    }
}

/* Desktop: keep tour card from covering topbar buttons too badly */
@media (min-width: 801px) {
    .tour-card {
        max-height: 82vh;
        overflow-y: auto;
    }
}

/* Stable Tour Placement Fix */
body:has(.form-panel) .guided-tour-overlay {
    display: initial;
}

.setup-banner button[onclick*="startSGBTour"] {
    display: inline-flex !important;
}


/* Guided Tour Size + Screen Fit Fix */
.guided-tour-overlay {
    overflow: hidden !important;
}

.tour-card {
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

@media (min-width: 801px) {
    .tour-card {
        left: auto !important;
        right: 24px !important;
        top: 24px !important;
        bottom: auto !important;
        transform: none !important;
    }
}

@media (max-width: 800px) {
    .tour-card {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        max-height: 72vh !important;
        border-radius: 22px !important;
    }

    .tour-actions {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   Public Booking V2
   ============================================================ */

.public-v2-page {
    min-height: 100vh;
    padding: 28px 14px;
}

.public-v2-card {
    max-width: 980px;
    width: 100%;
}

.public-v2-header {
    align-items: flex-start;
    margin-bottom: 22px;
}

.public-eyebrow {
    margin: 0 0 6px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 900;
}

.public-v2-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 24px;
}

.public-v2-progress span {
    border: 1px solid var(--border);
    background: rgba(15,23,42,.68);
    color: var(--muted);
    border-radius: 999px;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.public-v2-progress span.active {
    color: white;
    border-color: rgba(59,130,246,.75);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.public-v2-progress span.done {
    color: #bbf7d0;
    border-color: rgba(34,197,94,.55);
}

.public-v2-flow,
.public-v2-details-form {
    display: grid;
    gap: 18px;
}

.public-v2-section {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(2,6,23,.28);
    padding: 20px;
    margin-top: 18px;
}

.details-section {
    background: rgba(15,23,42,.58);
}

.section-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.section-heading h2 {
    margin: 0;
    font-size: 22px;
}

.section-heading p {
    margin: 4px 0 0;
    color: var(--muted);
}

.step-number {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: white;
    font-weight: 950;
    flex: 0 0 auto;
}

.public-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.public-choice-card {
    display: block;
    border: 1px solid var(--border);
    background: rgba(17,24,39,.72);
    border-radius: 20px;
    padding: 18px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.public-choice-card:hover,
.public-choice-card.selected {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,.85);
    box-shadow: 0 18px 45px rgba(37,99,235,.20);
}

.public-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.public-choice-card strong {
    display: block;
    font-size: 18px;
    margin-bottom: 7px;
}

.public-choice-card span,
.public-choice-card em {
    display: block;
    color: var(--muted);
    font-style: normal;
    margin-top: 4px;
}

.public-choice-card em {
    color: #bbf7d0;
    font-weight: 900;
}

.public-choice-card p {
    color: var(--muted);
    margin: 10px 0 0;
    line-height: 1.45;
}

.compact-choice strong {
    margin-bottom: 4px;
}

.date-picker-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
}

.date-picker-card input {
    width: 100%;
}

.public-v2-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.public-v2-summary div,
.public-v2-confirmation div {
    background: rgba(15,23,42,.76);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
}

.public-v2-summary span,
.public-v2-confirmation span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 7px;
}

.public-v2-summary strong,
.public-v2-confirmation strong {
    display: block;
    color: white;
}

.public-v2-slot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-v2-slot-grid .slot-button {
    min-height: 52px;
    font-size: 15px;
    font-weight: 950;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#requestBookingBtn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.public-v2-confirmation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}

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

    .public-choice-grid,
    .details-grid,
    .public-v2-summary,
    .public-v2-confirmation {
        grid-template-columns: 1fr;
    }

    .date-picker-card {
        grid-template-columns: 1fr;
    }

    .public-v2-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-v2-section {
        padding: 16px;
    }
}

/* ============================================================
   Public Booking Date Cards
   ============================================================ */

.public-date-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.public-date-card {
    border: 1px solid var(--border);
    background: rgba(17,24,39,.72);
    color: white;
    border-radius: 18px;
    padding: 14px 10px;
    cursor: pointer;
    text-align: center;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.public-date-card:hover,
.public-date-card.selected {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,.9);
    box-shadow: 0 16px 38px rgba(37,99,235,.20);
}

.public-date-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.public-date-card strong {
    display: block;
    font-size: 18px;
    margin-top: 5px;
}

.public-date-card em {
    display: block;
    color: #bbf7d0;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    margin-top: 5px;
}

.fallback-date-picker {
    margin-top: 6px;
}

.fallback-date-picker label {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

@media (max-width: 900px) {
    .public-date-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-date-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Public Booking Slot UX V2
   ============================================================ */

.first-available-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(34,197,94,.45);
    background: rgba(22,101,52,.14);
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 18px;
}

.first-available-box span {
    display: block;
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.first-available-box strong {
    display: block;
    color: white;
    font-size: 24px;
}

.slot-group-wrap {
    display: grid;
    gap: 18px;
}

.slot-group {
    border: 1px solid var(--border);
    background: rgba(15,23,42,.45);
    border-radius: 22px;
    padding: 16px;
}

.slot-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.slot-group-heading h3 {
    margin: 0;
    font-size: 18px;
}

.slot-group-heading span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.slot-button {
    position: relative;
}

.slot-button span {
    display: block;
}

.slot-button em {
    display: block;
    margin-top: 4px;
    color: #bbf7d0;
    font-style: normal;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.slot-button.recommended {
    border-color: rgba(34,197,94,.7);
    box-shadow: 0 0 0 3px rgba(34,197,94,.13);
}

@media (max-width: 620px) {
    .first-available-box {
        align-items: stretch;
        flex-direction: column;
    }

    .first-available-box .btn {
        width: 100%;
    }
}

/* ============================================================
   First Available Staff Public Booking
   ============================================================ */

.first-available-staff-choice {
    border-color: rgba(34,197,94,.45);
    background: linear-gradient(135deg, rgba(22,101,52,.22), rgba(15,23,42,.78));
}

.first-available-staff-choice em {
    color: #bbf7d0;
    font-weight: 950;
}

.slot-button small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

/* ============================================================
   Dashboard Setup Checklist V2
   ============================================================ */

.setup-checklist-v2 {
    display: grid;
    gap: 18px;
}

.setup-checklist-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.setup-eyebrow {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 6px;
}

.setup-score {
    min-width: 150px;
    text-align: right;
}

.setup-score strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    color: white;
}

.setup-score span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-top: 6px;
}

.setup-progress-bar {
    height: 12px;
    background: rgba(15,23,42,.9);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.setup-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 24px rgba(59,130,246,.45);
    transition: width .35s ease;
}

.setup-checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.setup-check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--border);
    background: rgba(15,23,42,.62);
    border-radius: 18px;
    padding: 14px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.setup-check-item:hover {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,.75);
    box-shadow: 0 14px 35px rgba(37,99,235,.16);
}

.setup-check-item.done {
    border-color: rgba(34,197,94,.45);
    background: rgba(22,101,52,.12);
}

.setup-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(30,41,59,.9);
    color: var(--muted);
    font-weight: 950;
    flex: 0 0 auto;
}

.setup-check-item.done .setup-check-icon {
    background: rgba(34,197,94,.2);
    color: #bbf7d0;
}

.setup-check-item strong {
    display: block;
    color: white;
    margin-bottom: 4px;
}

.setup-check-item small {
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

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

@media (max-width: 900px) {
    .setup-checklist-header {
        flex-direction: column;
    }

    .setup-score {
        text-align: left;
    }

    .setup-checklist-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Setup Complete Smart Panel
   ============================================================ */

.setup-complete-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(34,197,94,.35);
    background: linear-gradient(135deg, rgba(22,101,52,.18), rgba(15,23,42,.62));
    border-radius: 22px;
    padding: 18px;
}

.setup-complete-card h3 {
    margin: 0;
}

.setup-complete-card p {
    margin: 6px 0 0;
    color: var(--muted);
}

.setup-complete-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 820px) {
    .setup-complete-card {
        flex-direction: column;
        align-items: stretch;
    }

    .setup-complete-actions {
        justify-content: flex-start;
    }

    .setup-complete-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Settings Helper Panel
   ============================================================ */

.settings-helper-panel {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-color: rgba(59,130,246,.35);
}

.settings-helper-panel h3 {
    margin: 0;
}

.settings-helper-panel p {
    margin: 6px 0 0;
    color: var(--muted);
}

.settings-helper-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 820px) {
    .settings-helper-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-helper-actions {
        justify-content: flex-start;
    }

    .settings-helper-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Calendar V2
   ============================================================ */

.calendar-v2-shell {
    display: grid;
    gap: 16px;
}

.calendar-v2-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.calendar-v2-header h3 {
    margin: 0;
    font-size: 28px;
}

.calendar-v2-header p {
    color: var(--muted);
    margin: 6px 0 0;
}

.calendar-v2-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    gap: 10px;
}

.calendar-v2-stats div {
    border: 1px solid var(--border);
    background: rgba(15,23,42,.72);
    border-radius: 16px;
    padding: 12px;
    text-align: center;
}

.calendar-v2-stats strong {
    display: block;
    color: white;
    font-size: 24px;
}

.calendar-v2-stats span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 4px;
}

.calendar-v2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.calendar-nav-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.calendar-filter-form select {
    min-width: 210px;
}

.calendar-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.calendar-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.status-pending-dot {
    background: #f59e0b;
}

.status-confirmed-dot {
    background: #22c55e;
}

.status-completed-dot {
    background: #3b82f6;
}

.status-cancelled-dot {
    background: #ef4444;
}

.calendar-v2-grid {
    align-items: stretch;
}

.calendar-v2-day {
    position: relative;
    overflow: hidden;
}

.calendar-v2-day.today {
    border-color: rgba(59,130,246,.75);
    box-shadow: 0 0 0 3px rgba(59,130,246,.13);
}

.calendar-v2-day-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.calendar-v2-day-header em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.calendar-v2-bookings {
    gap: 10px;
}

.calendar-v2-booking {
    border-left: 4px solid rgba(148,163,184,.45);
    display: grid;
    gap: 8px;
}

.status-border-pending {
    border-left-color: #f59e0b;
}

.status-border-confirmed {
    border-left-color: #22c55e;
}

.status-border-completed {
    border-left-color: #3b82f6;
}

.status-border-cancelled,
.status-border-no_show {
    border-left-color: #ef4444;
}

.status-border-checked_in,
.status-border-rescheduled {
    border-left-color: #8b5cf6;
}

.calendar-booking-time {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.calendar-booking-time span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.calendar-booking-info span {
    display: block;
    color: white;
    font-weight: 900;
}

.calendar-booking-info small,
.calendar-booking-info em {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    margin-top: 2px;
}

.calendar-empty-state {
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    color: var(--muted);
}

.calendar-empty-state p {
    margin: 0 0 8px;
}

.calendar-empty-state a {
    font-weight: 900;
}

@media (max-width: 1020px) {
    .calendar-v2-header {
        flex-direction: column;
    }

    .calendar-v2-stats {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-filter-form,
    .calendar-nav-actions,
    .calendar-v2-toolbar .btn,
    .calendar-filter-form select {
        width: 100%;
    }

    .calendar-filter-form {
        align-items: stretch;
    }
}

/* ============================================================
   Public Booking Error Upgrade
   ============================================================ */

.public-error-summary {
    border-radius: 18px;
    padding: 14px 16px;
    font-weight: 800;
}

/* ============================================================
   Final Pre-Stripe Polish: Public Link + Success Page
   ============================================================ */

.public-link-panel {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-color: rgba(59,130,246,.35);
}

.public-link-panel h3 {
    margin: 0;
}

.public-link-panel p {
    margin: 6px 0 0;
    color: var(--muted);
}

.public-link-copy-box {
    display: flex;
    gap: 10px;
    min-width: min(520px, 100%);
}

.public-link-copy-box input {
    flex: 1;
    min-width: 280px;
}

.success-v2-card {
    text-align: center;
}

.success-checkmark {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #bbf7d0;
    font-size: 42px;
    font-weight: 950;
    background: rgba(34,197,94,.16);
    border: 1px solid rgba(34,197,94,.45);
    box-shadow: 0 18px 55px rgba(34,197,94,.14);
}

.success-v2-confirmation {
    margin-top: 20px;
}

.next-steps-box {
    text-align: left;
    border: 1px solid var(--border);
    background: rgba(15,23,42,.62);
    border-radius: 22px;
    padding: 18px;
    margin-top: 20px;
}

.next-steps-box h3 {
    margin: 0 0 10px;
}

.next-steps-box ol {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.7;
}

.success-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

@media (max-width: 820px) {
    .public-link-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .public-link-copy-box {
        flex-direction: column;
    }

    .public-link-copy-box input {
        min-width: 0;
        width: 100%;
    }

    .success-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Launch Readiness Page
   ============================================================ */

.launch-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.launch-hero.ready {
    border-color: rgba(34,197,94,.45);
    background: linear-gradient(135deg, rgba(22,101,52,.16), rgba(15,23,42,.72));
}

.launch-hero.not-ready {
    border-color: rgba(245,158,11,.45);
    background: linear-gradient(135deg, rgba(120,53,15,.16), rgba(15,23,42,.72));
}

.launch-hero h3 {
    margin: 0;
    font-size: 30px;
}

.launch-hero p {
    margin: 8px 0 0;
    color: var(--muted);
}

.launch-score {
    text-align: right;
    min-width: 160px;
}

.launch-score strong {
    display: block;
    color: white;
    font-size: 48px;
    line-height: 1;
}

.launch-score span {
    display: block;
    color: var(--muted);
    margin-top: 6px;
    font-weight: 800;
}

.launch-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.launch-blockers {
    border-color: rgba(239,68,68,.4);
}

.launch-blockers h3,
.launch-category h3 {
    margin: 0;
}

.launch-category {
    margin-top: 18px;
}

.launch-category-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.launch-category-header p {
    color: var(--muted);
    margin: 6px 0 0;
}

.launch-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.launch-check-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--border);
    background: rgba(15,23,42,.62);
    border-radius: 18px;
    padding: 14px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.launch-check-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,.65);
    box-shadow: 0 14px 35px rgba(37,99,235,.16);
}

.launch-check-card.done {
    border-color: rgba(34,197,94,.4);
    background: rgba(22,101,52,.12);
}

.launch-check-card.missing {
    border-color: rgba(245,158,11,.42);
    background: rgba(120,53,15,.10);
}

.launch-check-card strong {
    display: block;
    color: white;
    margin-bottom: 4px;
}

.launch-check-card small {
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .launch-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .launch-score {
        text-align: left;
    }

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

    .launch-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Secure Client Portal V2
   ============================================================ */

.client-portal-v2 {
    max-width: 1040px;
}

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

.portal-auth-card h3 {
    margin-top: 0;
}

.portal-session-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-color: rgba(34,197,94,.45);
    background: rgba(22,101,52,.12);
}

.portal-session-card h3 {
    margin: 0;
}

.portal-session-card p {
    margin: 6px 0 0;
    color: var(--muted);
}

.portal-booking-card {
    border-color: rgba(59,130,246,.24);
}

@media (max-width: 780px) {
    .portal-auth-grid {
        grid-template-columns: 1fr;
    }

    .portal-session-card {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-session-card .btn {
        width: 100%;
    }
}

/* ============================================================
   Client Portal Rules / Cutoff Notices
   ============================================================ */

.portal-rule-note {
    margin-top: 12px;
    border: 1px solid rgba(245,158,11,.45);
    background: rgba(120,53,15,.14);
    color: #fde68a;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 800;
}

.portal-rule-message {
    margin: 14px 0 18px;
}

/* ============================================================
   Pre-Stripe Hardening Pack
   ============================================================ */

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrap th,
.table-wrap td {
    border-bottom: 1px solid var(--border);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.table-wrap th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.inline-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.inline-form select {
    min-width: 160px;
}

/* Internal calendar booking management link */
.calendar-manage-link {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

/* SaaS signup polish */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.form-grid label {
    display: block;
    font-weight: 700;
    margin-bottom: .35rem;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
}
.full {
    width: 100%;
}
@media (max-width: 760px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* MOBILE TOPBAR */
.mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #020617;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 12px;
}

.menu-btn {
    font-size: 22px;
    background: none;
    border: none;
    color: white;
}

.mobile-title {
    font-weight: 800;
}

/* SIDEBAR IMPROVEMENTS */
.nav-divider {
    margin: 16px 0 6px;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar {
    transition: transform .25s ease;
}

/* MOBILE MODE */
@media (max-width: 900px) {

    .mobile-topbar {
        display: flex;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 260px;
        transform: translateX(-100%);
        z-index: 999;
        background: #020617;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        padding: 16px;
    }

    .topbar {
        display: none;
    }

    .btn {
        padding: 14px;
        font-size: 16px;
    }

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

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

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

/* BOTTOM NAV */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #020617;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    z-index: 999;
}

.bottom-nav a {
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    text-decoration: none;
}

.bottom-nav a span {
    display: block;
    font-size: 20px;
}

.center-action {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: white !important;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 22px;
    transform: translateY(-12px);
}

/* MORE MENU */
.more-menu {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    background: #020617;
    border-top: 1px solid var(--border);
    display: none;
    flex-direction: column;
    padding: 10px;
    z-index: 998;
}

.more-menu.open {
    display: flex;
}

.more-menu a {
    padding: 12px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
}

.more-menu a:hover {
    background: rgba(255,255,255,.05);
}

/* PUSH CONTENT ABOVE NAV */
.main {
    padding-bottom: 90px;
}

/* DESKTOP HIDE */
@media (min-width: 900px) {
    .bottom-nav,
    .more-menu {
        display: none !important;
    }
}

/* FORM UI UPGRADE */
.form-grid {
    display: grid;
    gap: 14px;
}

.form-group label {
    font-weight: 700;
    font-size: 13px;
    color: var(--muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #020617;
    color: white;
    font-size: 15px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
}

.error {
    color: #f87171;
    font-size: 12px;
}

/* MOBILE LIST/CARD UPGRADE */
@media (max-width: 760px) {
    body {
        font-size: 15px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar .btn,
    .toolbar button,
    .toolbar a {
        width: 100%;
        text-align: center;
    }

    .search-form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .search-form input,
    .search-form select,
    .search-form button,
    .search-form a {
        width: 100%;
        min-width: 0;
    }

    .mini-card,
    .booking-card,
    .stat-card,
    .panel {
        border-radius: 20px;
        padding: 18px;
    }

    .mini-card-header,
    .booking-main,
    .profile-header,
    .report-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-actions,
    .profile-actions,
    .booking-meta,
    .launch-actions,
    .setup-actions,
    .settings-helper-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }

    .card-actions a,
    .profile-actions a,
    .launch-actions a,
    .setup-actions a,
    .settings-helper-actions a,
    .settings-helper-actions button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 13px;
        border-radius: 14px;
        background: rgba(255,255,255,.07);
    }

    .status-pill,
    .badge {
        font-size: 12px;
        padding: 8px 11px;
    }

    .public-link-copy-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .public-link-copy-box input {
        width: 100%;
        min-width: 0;
    }

    .calendar-v2-toolbar,
    .calendar-nav-actions,
    .calendar-filter-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }

    .calendar-v2-toolbar .btn,
    .calendar-nav-actions .btn,
    .calendar-filter-form .btn,
    .calendar-filter-form select {
        width: 100%;
    }

    .calendar-v2-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }

    .calendar-v2-header {
        display: grid;
        gap: 14px;
    }

    .calendar-grid,
    .calendar-v2-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        overflow-x: visible;
    }

    .calendar-day,
    .calendar-v2-day {
        min-height: auto;
    }

    .calendar-empty-state {
        padding: 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.04);
    }

    .form-panel {
        max-width: none;
    }

    .form-panel form .btn,
    .form-panel form a.btn {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
}

/* MOBILE BOTTOM NAV POLISH */
.bottom-nav {
    box-shadow: 0 -12px 30px rgba(0,0,0,.35);
}

.bottom-nav a {
    min-width: 54px;
    padding: 4px 2px;
}

.more-menu {
    box-shadow: 0 -16px 40px rgba(0,0,0,.45);
}

.more-menu a {
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* DESKTOP LIST POLISH */
.card-grid {
    align-items: stretch;
}

.mini-card,
.booking-card {
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.mini-card:hover,
.booking-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56,189,248,.35);
    background: rgba(31,41,55,.88);
}

/* MOBILE-FIRST CALENDAR UPGRADE */
.mobile-calendar-agenda {
    display: none;
}

@media (max-width: 760px) {
    .calendar-v2-shell {
        display: grid;
        gap: 14px;
    }

    .calendar-v2-header.panel {
        padding: 18px;
    }

    .calendar-v2-header h3 {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .calendar-v2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-v2-stats div {
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 12px;
    }

    .calendar-v2-stats strong {
        display: block;
        font-size: 22px;
    }

    .calendar-status-legend {
        overflow-x: auto;
        display: flex;
        gap: 10px;
        padding-bottom: 4px;
        white-space: nowrap;
    }

    .calendar-status-legend span {
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--border);
        font-size: 12px;
    }

    .calendar-grid.calendar-v2-grid {
        display: none !important;
    }

    .mobile-calendar-agenda {
        display: grid;
        gap: 14px;
    }

    .mobile-day-card {
        background: rgba(17,24,39,.86);
        border: 1px solid var(--border);
        border-radius: 22px;
        padding: 16px;
        box-shadow: 0 18px 45px rgba(0,0,0,.22);
    }

    .mobile-day-card.today {
        border-color: rgba(56,189,248,.55);
        box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 18px 45px rgba(0,0,0,.25);
    }

    .mobile-day-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    .mobile-day-header strong {
        display: block;
        font-size: 18px;
    }

    .mobile-day-header span {
        color: var(--muted);
        font-size: 13px;
    }

    .mobile-day-count {
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(37,99,235,.16);
        color: #bfdbfe;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
    }

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

    .mobile-agenda-item {
        display: grid;
        grid-template-columns: 76px 1fr;
        gap: 12px;
        padding: 13px;
        border-radius: 18px;
        background: rgba(31,41,55,.82);
        border: 1px solid var(--border);
    }

    .mobile-agenda-time {
        color: #bfdbfe;
        font-weight: 900;
        font-size: 13px;
        line-height: 1.35;
    }

    .mobile-agenda-time span {
        display: block;
        color: var(--muted);
        font-weight: 700;
        font-size: 12px;
    }

    .mobile-agenda-info h4 {
        margin: 0 0 5px;
        font-size: 15px;
    }

    .mobile-agenda-info p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.4;
    }

    .mobile-agenda-actions {
        margin-top: 10px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .mobile-agenda-actions a {
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.07);
        color: #bfdbfe;
        font-size: 12px;
        font-weight: 900;
    }

    .mobile-empty-day {
        padding: 14px;
        border-radius: 18px;
        background: rgba(255,255,255,.04);
        color: var(--muted);
        text-align: center;
    }

    .mobile-empty-day a {
        display: inline-block;
        margin-top: 8px;
        color: #bfdbfe;
        font-weight: 900;
    }
}

/* FORCE AGENDA CALENDAR EVERYWHERE */
.calendar-grid.calendar-v2-grid {
    display: none !important;
}

.mobile-calendar-agenda {
    display: grid !important;
    gap: 14px;
}

.mobile-day-card {
    background: rgba(17,24,39,.86);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.mobile-day-card.today {
    border-color: rgba(56,189,248,.55);
    box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 18px 45px rgba(0,0,0,.25);
}

.mobile-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

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

.mobile-agenda-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(31,41,55,.82);
    border: 1px solid var(--border);
}

.mobile-agenda-time {
    color: #bfdbfe;
    font-weight: 900;
    font-size: 14px;
}

.mobile-agenda-time span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.mobile-agenda-info h4 {
    margin: 0 0 5px;
}

.mobile-agenda-info p {
    margin: 0;
    color: var(--muted);
}

.mobile-agenda-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-agenda-actions a {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}

.mobile-empty-day {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    color: var(--muted);
    text-align: center;
}

/* ============================================================
   Calendar Agenda Upgrade
   ============================================================ */

.calendar-agenda-shell {
    max-width: 1180px;
}

.calendar-agenda-main {
    display: grid !important;
    gap: 16px;
}

.calendar-grid.calendar-v2-grid {
    display: none !important;
}

.calendar-day-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px;
    scrollbar-width: thin;
}

.calendar-day-chip {
    flex: 0 0 auto;
    min-width: 72px;
    padding: 12px 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
}

.calendar-day-chip strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.calendar-day-chip span {
    display: block;
    font-size: 22px;
    font-weight: 950;
    color: white;
    margin-top: 3px;
}

.calendar-day-chip em {
    display: inline-flex;
    margin-top: 6px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(37,99,235,.18);
    color: #bfdbfe;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.calendar-day-chip.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-color: transparent;
    color: white;
    box-shadow: 0 12px 30px rgba(37,99,235,.25);
}

.calendar-day-chip.active span,
.calendar-day-chip.active em {
    color: white;
}

.calendar-day-chip.active em {
    background: rgba(255,255,255,.18);
}

.calendar-agenda-day {
    position: relative;
}

.mobile-day-header strong {
    font-size: 20px;
}

.mobile-day-count {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37,99,235,.16);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.mobile-time-group {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}

.mobile-time-label {
    position: sticky;
    top: 80px;
    color: #93c5fd;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-top: 14px;
}

.mobile-agenda-item {
    border-left: 4px solid rgba(148,163,184,.45);
}

.mobile-agenda-item.status-border-pending {
    border-left-color: #f59e0b;
}

.mobile-agenda-item.status-border-confirmed {
    border-left-color: #3b82f6;
}

.mobile-agenda-item.status-border-completed {
    border-left-color: #22c55e;
}

.mobile-agenda-item.status-border-cancelled,
.mobile-agenda-item.status-border-no_show {
    border-left-color: #ef4444;
}

.mobile-agenda-info h4 {
    font-size: 16px;
    margin: 0 0 6px;
}

.mobile-agenda-info p {
    color: var(--muted);
    margin: 0;
}

.mobile-empty-day {
    display: grid;
    gap: 5px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px dashed var(--border);
    text-align: center;
    color: var(--muted);
}

.mobile-empty-day strong {
    color: white;
}

.mobile-empty-day a {
    color: #bfdbfe;
    font-weight: 900;
    margin-top: 6px;
}

@media (max-width: 760px) {
    .calendar-day-scroll {
        margin-left: -4px;
        margin-right: -4px;
    }

    .calendar-day-chip {
        min-width: 64px;
    }

    .mobile-time-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mobile-time-label {
        position: static;
        padding-top: 0;
        margin-top: 8px;
    }

    .mobile-agenda-item {
        grid-template-columns: 78px 1fr;
    }
}

/* MOBILE: use bottom nav only, hide top-left hamburger/sidebar */
@media (max-width: 900px) {
    .mobile-topbar {
        display: none !important;
    }

    .sidebar {
        display: none !important;
    }

    .app-shell {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .main {
        padding-top: 16px !important;
        padding-bottom: 110px !important;
    }
}

/* ============================================================
   MOBILE FORM BUTTON FIX
   Fixes Save/Cancel overlap and makes all form actions stack cleanly
   ============================================================ */

.form-panel form button.btn,
.form-panel form a.btn,
.panel form button.btn,
.panel form a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
}

@media (max-width: 900px) {
    .form-panel form button.btn,
    .form-panel form a.btn,
    .panel form button.btn,
    .panel form a.btn {
        display: flex !important;
        width: 100% !important;
        min-height: 56px;
        margin: 12px 0 0 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
        font-size: 17px;
        font-weight: 900;
    }

    .form-panel form a.btn.secondary,
    .panel form a.btn.secondary {
        border: 1px solid rgba(255,255,255,.35);
        background: rgba(255,255,255,.06) !important;
    }

    .form-panel,
    .panel.form-panel {
        padding-bottom: 28px !important;
        margin-bottom: 130px !important;
    }

    .main {
        padding-bottom: 160px !important;
    }

    .fab {
        bottom: 88px !important;
    }
}

/* prevent mobile browser cached old layout from making anchors act inline */
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* PLAN / LIMIT BANNER */
.plan-banner {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(56,189,248,.08));
    border: 1px solid rgba(96,165,250,.28);
}

.plan-banner strong {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

.plan-banner span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
}

.plan-banner a {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 760px) {
    .plan-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .plan-banner a {
        width: 100%;
        text-align: center;
    }
}

/* SUPERADMIN PLAN CONTROL */
.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.inline-form select {
    background: #ffffff;
    color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 140px;
    font-weight: 800;
}

.inline-form select option {
    background: #ffffff;
    color: #f8fafc;
}

@media (max-width: 900px) {
    .table-wrap {
        overflow-x: auto;
    }

    .inline-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inline-form select,
    .inline-form .btn {
        width: 100%;
    }
}

/* BILLING / PLAN PAGE */
.billing-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(37,99,235,.24), rgba(56,189,248,.10));
}

.billing-hero h3 {
    font-size: 34px;
    margin: 6px 0;
}

.billing-price {
    text-align: right;
}

.billing-price strong {
    font-size: 44px;
}

.billing-price span {
    color: var(--muted);
    font-weight: 800;
}

.usage-bar {
    margin-top: 14px;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.usage-bar div {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pricing-card {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(31,41,55,.72);
}

.pricing-card.featured {
    border-color: rgba(56,189,248,.45);
    box-shadow: 0 0 0 1px rgba(56,189,248,.18);
}

.pricing-card h4 {
    margin: 0 0 10px;
    font-size: 20px;
}

.pricing-card strong {
    display: block;
    font-size: 32px;
    margin-bottom: 10px;
}

.pricing-card p {
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 800px) {
    .billing-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .billing-price {
        text-align: left;
    }

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

/* PUBLIC LEGAL PAGES */
.public-legal-page {
    min-height: 100vh;
    padding: 28px;
    display: grid;
    place-items: start center;
}

.public-legal-card {
    width: min(900px, 100%);
    background: rgba(17,24,39,.88);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.public-legal-card h1 {
    font-size: clamp(32px, 6vw, 56px);
    margin: 16px 0 6px;
}

.public-legal-card h2 {
    margin-top: 26px;
    color: #bfdbfe;
}

.public-legal-card p {
    color: var(--muted);
    line-height: 1.65;
}

.legal-back-link {
    color: #bfdbfe;
    font-weight: 900;
}

.legal-contact-box {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    padding: 16px;
    border-radius: 18px;
    background: rgba(31,41,55,.72);
    border: 1px solid var(--border);
}

.legal-contact-box span {
    color: var(--muted);
}

.public-footer-links {
    max-width: 1120px;
    margin: 20px auto 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
}

.public-footer-links a {
    color: #bfdbfe;
    font-weight: 800;
}

.upgrade-wall {
    background: linear-gradient(135deg, rgba(245,158,11,.20), rgba(37,99,235,.12));
    border-color: rgba(245,158,11,.35);
}

.billing-legal-links {
    margin-top: 18px;
}

@media (max-width: 760px) {
    .public-legal-page {
        padding: 16px;
    }

    .public-legal-card {
        padding: 22px;
        border-radius: 22px;
    }

    .public-footer-links {
        flex-direction: column;
        align-items: center;
    }
}

/* SUPPORT PAGE */
.support-layout {
    display: grid;
    grid-template-columns: 1.35fr .8fr;
    gap: 22px;
    align-items: start;
    margin-top: 24px;
}

.support-form {
    display: grid;
    gap: 14px;
}

.support-info-panel {
    padding: 18px;
    border-radius: 22px;
    background: rgba(31,41,55,.62);
    border: 1px solid var(--border);
}

.support-info-panel h2 {
    margin-top: 0;
}

@media (max-width: 850px) {
    .support-layout {
        grid-template-columns: 1fr;
    }
}

/* CLEAN LOGIN PAGE - NO APP NAV */
.auth-page-clean {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.28), transparent 34%),
        linear-gradient(135deg, #020617, #0f172a);
}

.auth-card-clean {
    width: min(460px, 100%);
    background: rgba(17,24,39,.88);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.auth-brand-clean {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.auth-brand-clean h1 {
    margin: 0;
    font-size: 20px;
}

.auth-brand-clean p {
    margin: 4px 0 0;
    color: var(--muted);
}

.auth-card-clean h2 {
    margin: 0 0 8px;
    font-size: 32px;
}

.auth-card-clean .btn.full {
    width: 100%;
    min-height: 54px;
}

/* ============================================================
   FINAL UI OVERFLOW CLEANUP
   Fixes mobile/tablet overlaps across app pages
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

.main,
.panel,
.stat-card,
.mini-card,
.booking-card,
.form-panel,
.pricing-card,
.profile-card,
.auth-card-clean,
.public-legal-card {
    min-width: 0;
}

/* Forms need to match app styling everywhere */
.form-panel {
    width: 100%;
    max-width: 780px;
}

.form-grid {
    width: 100%;
}

.form-group {
    min-width: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    max-width: 100%;
    min-width: 0;
}

/* Better form buttons */
.form-actions-clean {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.form-actions-clean .btn {
    min-width: 150px;
}

/* Dashboard public booking link box fix */
.public-link-copy-box,
.copy-link-box,
.share-link-box,
.booking-link-box,
.setup-copy-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.public-link-copy-box input,
.copy-link-box input,
.share-link-box input,
.booking-link-box input,
.setup-copy-box input,
input[readonly] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #020617;
    color: #e5e7eb;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 14px;
}

/* Service detail / price overlap fix */
.stat-card strong,
.mini-card strong,
.profile-metric strong,
.billing-price strong,
.service-price,
.price-value {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.05;
}

.stat-card {
    overflow: hidden;
}

.stat-card p,
.mini-card p,
.panel p {
    overflow-wrap: anywhere;
}

/* Tables must not break pages */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    min-width: 720px;
}

.data-table select,
.data-table input,
.data-table button,
.data-table .btn {
    max-width: 100%;
}

/* Role management form/dropdown fix */
.role-form,
.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.role-form select,
.inline-form select,
.data-table select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 130px;
    font-weight: 800;
}

.role-form select option,
.inline-form select option,
.data-table select option {
    background: #ffffff;
    color: #f8fafc;
}

/* Mobile cleanup */
@media (max-width: 900px) {
    .main {
        width: 100%;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .topbar {
        display: none !important;
    }

    .panel,
    .form-panel,
    .stat-card,
    .mini-card,
    .booking-card {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .stats-grid,
    .card-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }

    .form-actions-clean {
        display: grid;
        grid-template-columns: 1fr;
    }

    .form-actions-clean .btn {
        width: 100%;
        min-height: 54px;
    }

    .public-link-copy-box,
    .copy-link-box,
    .share-link-box,
    .booking-link-box,
    .setup-copy-box {
        grid-template-columns: 1fr !important;
    }

    .public-link-copy-box .btn,
    .copy-link-box .btn,
    .share-link-box .btn,
    .booking-link-box .btn,
    .setup-copy-box .btn {
        width: 100%;
    }

    .table-wrap {
        border-radius: 18px;
        border: 1px solid var(--border);
        overflow-x: auto;
    }

    .data-table {
        min-width: 760px;
    }

    .role-form,
    .inline-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .role-form select,
    .role-form button,
    .inline-form select,
    .inline-form button {
        width: 100%;
    }
}

/* Very small phone screens */
@media (max-width: 520px) {
    .stat-card strong,
    .billing-price strong {
        font-size: clamp(26px, 10vw, 38px) !important;
    }

    .panel h2,
    .panel h3 {
        overflow-wrap: anywhere;
    }

    .profile-actions,
    .card-actions,
    .setup-actions,
    .launch-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 10px;
    }

    .profile-actions .btn,
    .card-actions .btn,
    .setup-actions .btn,
    .launch-actions .btn,
    .profile-actions a,
    .card-actions a,
    .setup-actions a,
    .launch-actions a {
        width: 100%;
        text-align: center;
    }
}

/* APP LEGAL FOOTER */
.app-legal-footer {
    margin-top: 28px;
    padding: 18px 0 120px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
}

.app-legal-footer a {
    color: #bfdbfe;
    font-weight: 800;
}

@media (max-width: 760px) {
    .app-legal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        padding-bottom: 140px;
    }
}

/* LOGO IMAGE INSIDE SG BRAND BOX */
.brand-mark {
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   PUBLIC SALES LANDING + SIGNUP
   ============================================================ */

.public-sales-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.28), transparent 34%),
        radial-gradient(circle at 80% 10%, rgba(56,189,248,.18), transparent 28%),
        linear-gradient(135deg, #020617, #0f172a);
    color: #f8fafc;
}

.sales-nav {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.sales-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.sales-brand strong,
.sales-brand small {
    display: block;
}

.sales-brand small {
    color: var(--muted);
    margin-top: 3px;
}

.sales-nav nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sales-nav nav a {
    color: #cbd5e1;
    font-weight: 800;
}

.sales-nav-btn {
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: white !important;
}

.sales-hero {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: center;
}

.sales-pill {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(59,130,246,.16);
    border: 1px solid rgba(96,165,250,.26);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sales-hero h1 {
    margin: 16px 0;
    font-size: clamp(40px, 7vw, 76px);
    line-height: .95;
    letter-spacing: -0.05em;
}

.sales-hero p,
.sales-section-heading p,
.sales-split p,
.sales-cta p {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.6;
}

.sales-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px 0 18px;
}

.sales-trust-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sales-trust-row span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 800;
}

.sales-hero-card {
    padding: 18px;
    border-radius: 30px;
    background: rgba(15,23,42,.82);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.mock-app-top {
    display: flex;
    gap: 7px;
    margin-bottom: 18px;
}

.mock-app-top span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}

.mock-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.mock-dashboard div,
.mock-calendar-card {
    padding: 14px;
    border-radius: 18px;
    background: rgba(30,41,59,.85);
    border: 1px solid rgba(148,163,184,.14);
}

.mock-dashboard small,
.mock-calendar-card span {
    display: block;
    color: #94a3b8;
}

.mock-dashboard strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
}

.mock-calendar-card {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.mock-calendar-card em {
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(34,197,94,.16);
    color: #bbf7d0;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.sales-section {
    width: min(1180px, calc(100% - 32px));
    margin: 84px auto 0;
}

.sales-section-heading {
    max-width: 760px;
    margin-bottom: 28px;
}

.sales-section-heading h2,
.sales-split h2,
.sales-cta h2 {
    margin: 14px 0 10px;
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.sales-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sales-feature-grid article,
.sales-pricing-grid article,
.sales-list-card,
.sales-cta,
.signup-form-card,
.signup-benefits div {
    background: rgba(15,23,42,.72);
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.sales-feature-grid strong {
    font-size: 18px;
}

.sales-feature-grid p,
.sales-pricing-grid p {
    color: #cbd5e1;
    line-height: 1.55;
}

.sales-split {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 26px;
    align-items: center;
}

.sales-list-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sales-list-card span {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    color: #dbeafe;
    font-weight: 900;
}

.sales-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sales-pricing-grid article.featured {
    border-color: rgba(56,189,248,.48);
    transform: translateY(-8px);
}

.sales-pricing-grid h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.sales-pricing-grid strong {
    display: block;
    font-size: 42px;
    margin-bottom: 12px;
}

.sales-pricing-grid .btn {
    margin-top: 12px;
}

.sales-cta {
    width: min(980px, calc(100% - 32px));
    margin: 90px auto 30px;
    text-align: center;
    background: linear-gradient(135deg, rgba(37,99,235,.26), rgba(56,189,248,.10));
}

.signup-sales-page {
    width: min(1120px, calc(100% - 32px));
    margin: 36px auto 40px;
    display: grid;
    grid-template-columns: .9fr 1fr;
    gap: 30px;
    align-items: start;
}

.signup-sales-copy h1 {
    margin: 16px 0;
    font-size: clamp(38px, 6vw, 66px);
    line-height: .95;
    letter-spacing: -0.05em;
}

.signup-sales-copy p {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.6;
}

.signup-benefits {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.signup-benefits strong,
.signup-benefits span {
    display: block;
}

.signup-benefits span {
    color: #cbd5e1;
    margin-top: 4px;
}

.signup-form-card {
    border-radius: 30px;
}

.signup-form-card h2 {
    margin: 0 0 8px;
    font-size: 34px;
}

.signup-form-card .btn.full {
    width: 100%;
    min-height: 54px;
}

.signup-policy-note {
    margin-top: 14px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

.signup-policy-note a {
    color: #bfdbfe;
    font-weight: 900;
}

@media (max-width: 900px) {
    .sales-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .sales-nav nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .sales-nav nav a {
        text-align: center;
        padding: 10px;
        border-radius: 14px;
        background: rgba(255,255,255,.05);
    }

    .sales-hero,
    .sales-split,
    .signup-sales-page {
        grid-template-columns: 1fr;
    }

    .sales-feature-grid,
    .sales-pricing-grid {
        grid-template-columns: 1fr;
    }

    .sales-pricing-grid article.featured {
        transform: none;
    }

    .mock-dashboard {
        grid-template-columns: 1fr;
    }

    .sales-actions .btn {
        width: 100%;
    }

    .sales-list-card {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SG Stabilization: Responsive Tables
   ========================================================= */

.sg-responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
}

.sg-responsive-table table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 760px) {
    .sg-responsive-table {
        margin-left: -4px;
        margin-right: -4px;
        padding-bottom: 4px;
    }

    .sg-responsive-table table {
        min-width: 760px;
    }
}

/* =========================================================
   SG Stabilization: Logo Image Sizing Fix
   ========================================================= */

.sg-brand img,
.sgi-brand img,
.brand img,
.logo img,
.nav-logo img,
.app-logo img {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
    display: block;
}

.sg-brand-mark img,
.sgi-brand-mark img,
.brand-mark img {
    width: 100%;
    height: 100%;
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
    display: block;
}

.login-logo img,
.public-logo img {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
    display: block;
}

/* =========================================================
   SG Brand Logo Fit Improvement
   ========================================================= */

.sg-brand-mark,
.sgi-brand-mark,
.brand-mark {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-brand-mark img,
.sgi-brand-mark img,
.brand-mark img {
    width: 88%;
    height: 88%;
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    display: block;
}

/* =========================================================
   SG Logo Inner Image Scale Fix
   ========================================================= */

.sg-brand-mark img,
.sgi-brand-mark img,
.brand-mark img,
.nav-logo img,
.app-logo img {
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
}

/* =========================================================
   SG Logo Inner Image Scale Fix
   ========================================================= */

.sg-brand-mark img,
.sgi-brand-mark img,
.brand-mark img,
.nav-logo img,
.app-logo img {
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
}

/* =========================================================
   SG Logo Full Fill Override
   ========================================================= */

.sg-brand-mark,
.sgi-brand-mark,
.brand-mark {
    overflow: hidden;
    padding: 0 !important;
}

.sg-brand-mark img,
.sgi-brand-mark img,
.brand-mark img,
.nav-logo img,
.app-logo img {
    width: 135% !important;
    height: 135% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
    margin: 0 auto;
    transform: scale(1.08);
}

/* =========================================================
   SG Signup Success Page
   ========================================================= */

.success-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 38px;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(56,189,248,.18));
    border: 1px solid rgba(34,197,94,.35);
    color: #22c55e;
}

.success-workspace-box {
    margin: 24px auto;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(15,23,42,.38);
    max-width: 420px;
    display: grid;
    gap: 6px;
}

.success-workspace-box span {
    color: var(--muted);
    font-size: 13px;
}

.success-workspace-box strong {
    font-size: 22px;
    letter-spacing: .02em;
}

@media (max-width: 760px) {
    .success-card {
        text-align: left;
    }

    .success-icon {
        margin-left: 0;
    }

    .success-workspace-box {
        margin-left: 0;
        margin-right: 0;
    }
}

/* =========================================================
   SG Sidebar Redesign
   ========================================================= */

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
}

.sidebar-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.nav-group {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.nav-divider {
    margin: 12px 0 8px;
    padding-left: 10px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    color: rgba(255,255,255,.72);
    transition: .18s ease;
    border: 1px solid transparent;
    font-weight: 600;
}

.nav a:hover {
    background: rgba(255,255,255,.06);
    color: white;
    border-color: rgba(255,255,255,.08);
    transform: translateX(2px);
}

.nav a span:first-child {
    width: 22px;
    text-align: center;
    font-size: 15px;
}

.legal-links {
    display: grid;
    gap: 6px;
}

.legal-links a {
    color: rgba(255,255,255,.48);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
    transition: .18s ease;
}

.legal-links a:hover {
    background: rgba(255,255,255,.05);
    color: white;
}

@media (max-width: 900px) {

    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 300px;
        height: 100vh;
        z-index: 9999;
        transition: .22s ease;
        overflow-y: auto;
    }

    .sidebar.open {
        left: 0;
    }

    .main {
        padding-bottom: 110px;
    }
}

/* =========================================================
   SG Mobile Bottom Navigation Restore
   ========================================================= */

.bottom-nav {
    display: none;
}

.more-menu {
    display: none;
}

@media (max-width: 900px) {
    .bottom-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        height: 72px;
        z-index: 9998;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-radius: 24px;
        background: rgba(2,6,23,.92);
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 -16px 40px rgba(0,0,0,.45);
        backdrop-filter: blur(18px);
    }

    .bottom-nav a {
        min-width: 0;
        display: grid;
        place-items: center;
        gap: 3px;
        color: rgba(255,255,255,.7);
        font-size: 18px;
        text-align: center;
    }

    .bottom-nav a small {
        font-size: 11px;
        font-weight: 700;
    }

    .bottom-nav a:hover {
        color: white;
    }

    .bottom-nav .center-action {
        width: 54px;
        height: 54px;
        margin: -28px auto 0;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 32px;
        font-weight: 900;
        color: white;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        box-shadow: 0 14px 35px rgba(37,99,235,.35);
    }

    .more-menu {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 96px;
        z-index: 9997;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 16px;
        border-radius: 22px;
        background: rgba(2,6,23,.96);
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 -18px 45px rgba(0,0,0,.45);
        backdrop-filter: blur(18px);
    }

    .more-menu.open {
        display: grid;
    }

    .more-menu a {
        padding: 13px 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.82);
        font-weight: 700;
        text-align: center;
    }

    .more-menu a:hover {
        background: rgba(255,255,255,.1);
        color: white;
    }

    .main {
        padding-bottom: 120px !important;
    }
}

/* =========================================================
   SG Active Navigation States
   ========================================================= */

.nav a.active {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(37,99,235,.22),
        rgba(56,189,248,.18)
    );
    color: white;
    border-color: rgba(59,130,246,.28);
    box-shadow:
        0 10px 24px rgba(37,99,235,.16),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.nav a.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        var(--brand),
        var(--brand-2)
    );
    box-shadow: 0 0 14px rgba(56,189,248,.45);
}

.nav a.active span:first-child {
    transform: scale(1.08);
}

.bottom-nav a.active {
    color: white;
}

.bottom-nav a.active small {
    color: white;
    font-weight: 800;
}

/* =========================================================
   SafeGuard Bookings Landing V2 - Mobile First
   ========================================================= */

.landing-v2 {
    overflow-x: hidden;
}

.landing-hero-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 32px 18px 52px;
    max-width: 1180px;
    margin: 0 auto;
}

.landing-copy-v2 h1 {
    font-size: clamp(2.3rem, 10vw, 5.2rem);
    line-height: .95;
    letter-spacing: -0.07em;
    margin: 20px 0;
}

.landing-copy-v2 p {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 680px;
}

.landing-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.landing-proof-row span {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--muted);
    padding: 9px 12px;
    border-radius: 999px;
    font-size: .86rem;
}

.phone-showcase {
    display: flex;
    justify-content: center;
}

.phone-frame {
    width: min(335px, 92vw);
    min-height: 620px;
    border: 12px solid rgba(15,23,42,.92);
    border-radius: 46px;
    background: #020617;
    padding: 14px;
    box-shadow: 0 40px 90px rgba(0,0,0,.35);
}

.phone-top {
    width: 86px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    margin: 0 auto 16px;
}

.phone-screen {
    background: linear-gradient(180deg, #0f172a, #111827);
    border-radius: 32px;
    padding: 22px;
    min-height: 560px;
    color: white;
}

.mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.mini-header span {
    color: #93c5fd;
    font-size: .85rem;
}

.mini-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 14px;
}

.mini-card.active {
    background: linear-gradient(135deg, rgba(37,99,235,.55), rgba(14,165,233,.35));
}

.mini-card small,
.mini-card span {
    display: block;
    color: #cbd5e1;
    margin-top: 5px;
}

.phone-tabs {
    margin-top: 42px;
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 14px;
    font-size: .75rem;
    color: #cbd5e1;
}

.landing-section-v2 {
    padding: 54px 18px;
    max-width: 1180px;
    margin: 0 auto;
}

.product-slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 12px 4px 26px;
    scroll-snap-type: x mandatory;
}

.slide-card {
    min-width: 82%;
    scroll-snap-align: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.slide-image {
    height: 230px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.35), transparent 35%),
        linear-gradient(135deg, #0f172a, #1e293b);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    margin-bottom: 18px;
    text-align: center;
}

.slide-card h3 {
    margin: 0 0 8px;
}

.slide-card p {
    color: var(--muted);
    line-height: 1.6;
}

.steps-grid,
.industry-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.steps-grid article,
.industry-grid span {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.steps-grid article strong {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: rgba(37,99,235,.16);
    color: var(--brand);
    margin-bottom: 14px;
}

.steps-grid article h3 {
    margin: 0 0 8px;
}

.steps-grid article p {
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.industry-grid span {
    font-weight: 800;
    text-align: center;
}

.landing-final-cta {
    margin: 34px 18px 70px;
}

@media (min-width: 760px) {
    .landing-hero-v2 {
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        padding: 70px 24px 80px;
    }

    .slide-card {
        min-width: 360px;
    }

    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .industry-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 720px) {
    .landing-nav {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(16px);
    }

    .landing-nav nav a:not(.sales-nav-btn):not([href="/login/"]) {
        display: none;
    }

    .sales-actions {
        flex-direction: column;
    }

    .sales-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* SafeGuard Bookings Sales Landing Page */
.sg-sales-page {
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.20), transparent 32%),
        radial-gradient(circle at top right, rgba(14,165,233,.16), transparent 30%),
        #f8fafc;
}

.sg-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 42px 18px 70px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: center;
}

.sg-hero-copy h1 {
    font-size: clamp(2.6rem, 11vw, 5.8rem);
    line-height: .9;
    letter-spacing: -.08em;
    margin: 18px 0;
    color: #f8fafc;
}

.sg-hero-lead {
    font-size: 1.12rem;
    line-height: 1.75;
    color: #cbd5e1;
    max-width: 720px;
}

.sg-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sg-trust-strip span {
    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.95),
            rgba(17,24,39,.94)
        );
    border: 1px solid rgba(96,165,250,.25);
    color: #1e3a8a;
    padding: 10px 13px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .86rem;
}

.sg-hero-demo {
    display: flex;
    justify-content: center;
}

.sg-demo-window {
    width: min(100%, 430px);
    background: #0f172a;
    color: white;
    border-radius: 34px;
    padding: 22px;
    box-shadow: 0 35px 90px rgba(15,23,42,.35);
}

.sg-demo-top {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.sg-demo-top span {
    width: 11px;
    height: 11px;
    background: rgba(255,255,255,.35);
    border-radius: 50%;
}

.sg-demo-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.sg-demo-stat-grid div {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    padding: 14px;
    border-radius: 16px;
}

.sg-demo-stat-grid small {
    display: block;
    color: #93c5fd;
    margin-bottom: 5px;
}

.sg-booking-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    padding: 16px;
    border-radius: 18px;
    margin-top: 12px;
}

.sg-booking-card.hot {
    background: linear-gradient(135deg, rgba(37,99,235,.75), rgba(14,165,233,.45));
}

.sg-booking-card p {
    margin: 7px 0;
    color: #e5e7eb;
}

.sg-booking-card span {
    color: #bfdbfe;
    font-weight: 800;
}

.sg-pain-section,
.sg-section,
.sg-final-cta {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 18px;
}

.sg-pain-section h2,
.sg-section h2,
.sg-final-cta h2 {
    color: #f8fafc;
    letter-spacing: -.05em;
}

.sg-pain-section h2 {
    font-size: clamp(2rem, 7vw, 4rem);
    line-height: 1;
    max-width: 950px;
}

.sg-pain-grid,
.sg-feature-grid,
.sg-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 26px;
}

.sg-pain-grid article,
.sg-feature-grid article,
.sg-steps article,
.sg-product-slider article,
.sg-industry-list span {
    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.95),
            rgba(17,24,39,.94)
        );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.sg-pain-grid strong,
.sg-feature-grid strong,
.sg-steps strong {
    display: block;
    color: #f8fafc;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.sg-pain-grid p,
.sg-feature-grid p,
.sg-steps p {
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.sg-product-slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 14px 4px 28px;
    scroll-snap-type: x mandatory;
}

.sg-product-slider article {
    min-width: 84%;
    scroll-snap-align: start;
}

.sg-slide-shot {
    height: 240px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(15,23,42,.95), rgba(37,99,235,.75)),
        radial-gradient(circle at top left, rgba(14,165,233,.5), transparent 35%);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 900;
    text-align: center;
    margin-bottom: 18px;
}

.sg-product-slider h3 {
    margin: 0 0 8px;
    color: #f8fafc;
}

.sg-product-slider p {
    color: #94a3b8;
    line-height: 1.6;
}

.sg-who {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.sg-who p {
    color: #94a3b8;
    line-height: 1.75;
}

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

.sg-industry-list span {
    text-align: center;
    font-weight: 900;
    color: #1e3a8a;
}

.sg-steps b {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #dbeafe;
    color: #1d4ed8;
    margin-bottom: 14px;
}

.sg-final-cta {
    margin-top: 40px;
    margin-bottom: 70px;
    text-align: center;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    border-radius: 36px;
    color: white;
}

.sg-final-cta h2 {
    color: white;
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1;
    margin: 0 auto 18px;
    max-width: 900px;
}

.sg-final-cta p {
    color: #dbeafe;
    max-width: 680px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

@media (min-width: 780px) {
    .sg-hero {
        grid-template-columns: 1.12fr .88fr;
        padding: 80px 24px 90px;
    }

    .sg-pain-grid,
    .sg-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sg-steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .sg-product-slider article {
        min-width: 360px;
    }

    .sg-who {
        grid-template-columns: .9fr 1.1fr;
        align-items: center;
    }

    .sg-industry-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 720px) {
    .sales-nav nav a[href="#features"],
    .sales-nav nav a[href="#pricing"] {
        display: none;
    }

    .sales-actions {
        flex-direction: column;
    }

    .sales-actions .btn {
        width: 100%;
        text-align: center;
    }

    .sg-demo-stat-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== SafeGuard Blue Theme Upgrade ===== */

.sales-nav{
    background:rgba(8,17,32,.82);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.sales-nav nav a{
    color:#cbd5e1;
}

.sales-brand strong{
    color:#ffffff;
}

.sales-brand small{
    color:#93c5fd;
}

.sg-sales-page h1,
.sg-sales-page h2,
.sg-sales-page h3,
.sg-sales-page strong{
    color:#f8fafc !important;
}

.sg-sales-page p{
    color:#94a3b8;
}

.sg-slide-shot{
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.sg-demo-window{
    border:1px solid rgba(255,255,255,.08);
}

.sg-trust-strip span{
    background:rgba(30,41,59,.95);
    color:#93c5fd;
}

.sg-final-cta{
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 30px 90px rgba(0,0,0,.45);
}

.public-footer-links{
    background:#081120;
    border-top:1px solid rgba(255,255,255,.06);
    padding:40px 20px;
}

.public-footer-links a{
    color:#93c5fd;
}

/* =========================================================
   LANDING PAGE EMERGENCY FIX - SCOPED ONLY
   SafeGuard Bookings public sales page
   ========================================================= */

body.sg-sales-page,
.sg-sales-page {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .35), transparent 32%),
        radial-gradient(circle at top right, rgba(14, 165, 233, .22), transparent 34%),
        linear-gradient(180deg, #06111f 0%, #0f172a 45%, #111827 100%) !important;
    color: #f8fafc !important;
}

.sg-sales-page .sales-nav {
    background: rgba(6, 17, 31, .92) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
}

.sg-sales-page .sales-brand strong,
.sg-sales-page h1,
.sg-sales-page h2,
.sg-sales-page h3,
.sg-sales-page strong {
    color: #ffffff !important;
}

.sg-sales-page .sales-brand small,
.sg-sales-page p,
.sg-sales-page .sg-hero-lead {
    color: #cbd5e1 !important;
}

.sg-sales-page .sg-pain-grid article,
.sg-sales-page .sg-feature-grid article,
.sg-sales-page .sg-steps article,
.sg-sales-page .sg-product-slider article,
.sg-sales-page .sales-pricing-grid article,
.sg-sales-page .sg-industry-list span {
    background: rgba(15, 23, 42, .88) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #f8fafc !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .35) !important;
}

.sg-sales-page .sales-pricing-grid article.featured {
    background: linear-gradient(180deg, rgba(37, 99, 235, .95), rgba(15, 23, 42, .95)) !important;
    border: 1px solid rgba(147, 197, 253, .45) !important;
}

.sg-sales-page .sg-slide-shot {
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, .45), transparent 35%),
        linear-gradient(135deg, #020617, #1e3a8a) !important;
    border: 1px solid rgba(147, 197, 253, .22) !important;
    color: #ffffff !important;
}

.sg-sales-page .sg-demo-window {
    background: linear-gradient(180deg, #020617, #0f172a) !important;
    border: 1px solid rgba(147, 197, 253, .18) !important;
}

.sg-sales-page .sg-trust-strip span {
    background: rgba(15, 23, 42, .9) !important;
    border: 1px solid rgba(147, 197, 253, .22) !important;
    color: #bfdbfe !important;
}

.sg-sales-page .btn {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #ffffff !important;
    border: none !important;
}

.sg-sales-page .btn.secondary {
    background: rgba(15, 23, 42, .8) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(147, 197, 253, .28) !important;
}

.sg-sales-page .sg-final-cta {
    background: linear-gradient(135deg, #1d4ed8, #020617) !important;
    border: 1px solid rgba(147, 197, 253, .22) !important;
}

.sg-sales-page .public-footer-links {
    background: #06111f !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
}

.sg-sales-page .public-footer-links a {
    color: #93c5fd !important;
}

@media (max-width: 720px) {
    .sg-sales-page .sales-nav {
        padding: 14px 16px !important;
    }

    .sg-sales-page .sales-nav nav {
        gap: 8px !important;
    }

    .sg-sales-page .sales-nav nav a[href="#features"],
    .sg-sales-page .sales-nav nav a[href="#pricing"] {
        display: none !important;
    }

    .sg-sales-page .sg-hero {
        padding-top: 34px !important;
    }

    .sg-sales-page .sg-hero-copy h1 {
        font-size: 3rem !important;
        line-height: .92 !important;
    }

    .sg-sales-page .sales-actions {
        flex-direction: column !important;
    }

    .sg-sales-page .sales-actions .btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* =========================================================
   SafeGuard Landing Nav + Mobile Polish FINAL
   ========================================================= */

.sg-public-nav {
    width: 100%;
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(6, 17, 31, .92);
    border: 1px solid rgba(147, 197, 253, .16);
    border-radius: 24px;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
    position: sticky;
    top: 10px;
    z-index: 100;
}

.sg-public-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

.sg-public-logo {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(147,197,253,.18);
    flex: 0 0 auto;
    overflow: hidden;
}

.sg-public-logo img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.sg-public-brand strong {
    display: block;
    color: #ffffff !important;
    font-size: 1rem;
    line-height: 1.05;
    white-space: nowrap;
}

.sg-public-brand small {
    display: block;
    color: #93c5fd !important;
    font-size: .78rem;
    margin-top: 3px;
    white-space: nowrap;
}

.sg-public-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-public-links a {
    color: #cbd5e1 !important;
    text-decoration: none;
    font-weight: 800;
    font-size: .9rem;
    padding: 10px 12px;
    border-radius: 999px;
    transition: .2s ease;
}

.sg-public-links a:hover {
    background: rgba(255,255,255,.08);
    color: #ffffff !important;
}

.sg-public-links .nav-cta {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.35);
}

.sg-public-links .login-link {
    border: 1px solid rgba(147,197,253,.18);
}

/* Mobile landing layout cleanup */
@media (max-width: 720px) {
    .sg-public-nav {
        margin: 10px 10px 0;
        width: auto;
        border-radius: 20px;
        padding: 10px;
        align-items: center;
    }

    .sg-public-logo {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .sg-public-logo img {
        width: 34px;
        height: 34px;
    }

    .sg-public-brand strong {
        font-size: .88rem;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sg-public-brand small {
        display: none;
    }

    .sg-public-links {
        gap: 6px;
        flex: 0 0 auto;
    }

    .sg-public-links a[href="#features"],
    .sg-public-links a[href="#pricing"] {
        display: none !important;
    }

    .sg-public-links a {
        font-size: .78rem;
        padding: 9px 10px;
    }

    .sg-public-links .nav-cta {
        padding: 10px 12px;
    }

    .sg-hero {
        padding: 34px 16px 46px !important;
        gap: 26px !important;
    }

    .sg-hero-copy h1 {
        font-size: clamp(2.45rem, 13vw, 3.35rem) !important;
        line-height: .94 !important;
        letter-spacing: -.07em !important;
        margin-top: 18px !important;
    }

    .sg-hero-lead {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .sg-trust-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
    }

    .sg-trust-strip span {
        text-align: center;
        font-size: .78rem !important;
        padding: 9px 8px !important;
    }

    .sg-demo-window {
        width: 100% !important;
        border-radius: 26px !important;
        padding: 16px !important;
    }

    .sg-demo-stat-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
    }

    .sg-demo-stat-grid div {
        padding: 10px !important;
    }

    .sg-demo-stat-grid strong {
        font-size: .82rem !important;
    }

    .sg-demo-stat-grid small {
        font-size: .7rem !important;
    }

    .sg-pain-section,
    .sg-section,
    .sg-final-cta {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sg-pain-section h2,
    .sg-section h2,
    .sg-final-cta h2 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1 !important;
    }

    .sg-product-slider {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sg-product-slider article {
        min-width: 88% !important;
    }

    .sg-slide-shot {
        height: 190px !important;
    }

    .sg-industry-list {
        grid-template-columns: 1fr 1fr !important;
    }

    .sales-pricing-grid {
        grid-template-columns: 1fr !important;
    }

    .sg-final-cta {
        margin: 34px 14px 58px !important;
        border-radius: 28px !important;
    }
}

/* Mobile nav: brand only */
@media (max-width: 720px) {
    .sg-public-nav {
        justify-content: center !important;
    }

    .sg-public-links {
        display: none !important;
    }

    .sg-public-brand {
        justify-content: center !important;
    }

    .sg-public-brand strong {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Hero CTA improvements */

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 26px;
}

.hero-primary-btn,
.hero-login-btn {
    min-width: 280px;
    text-align: center;
    font-weight: 800;
}

.hero-login-btn {
    background: rgba(15,23,42,.85) !important;
    border: 1px solid rgba(147,197,253,.28) !important;
    color: #dbeafe !important;
}

.hero-link-btn {
    text-decoration: none;
    color: #93c5fd;
    font-weight: 800;
    margin-top: 4px;
}

.hero-link-btn:hover {
    color: #ffffff;
}

@media (max-width: 720px) {
    .hero-actions {
        width: 100%;
        align-items: stretch;
    }

    .hero-primary-btn,
    .hero-login-btn {
        width: 100%;
        min-width: unset;
    }

    .hero-link-btn {
        text-align: center;
        margin-top: 8px;
    }
}

/* Product Fade Slideshow */

.sg-product-showcase {
    max-width: 760px;
    margin: 28px auto 0;
}

.sg-slideshow {
    position: relative;
    min-height: 470px;
}

.sg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .7s ease, transform .7s ease;
    pointer-events: none;
    background: rgba(15, 23, 42, .9);
    border: 1px solid rgba(147,197,253,.18);
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

.sg-slide.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.sg-slide h3 {
    color: #ffffff !important;
    margin: 18px 0 8px;
    font-size: 1.4rem;
}

.sg-slide p {
    color: #cbd5e1 !important;
    line-height: 1.65;
    margin: 0;
}

.sg-slide-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.sg-slide-dots button {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: none;
    background: rgba(147,197,253,.35);
    cursor: pointer;
}

.sg-slide-dots button.active {
    width: 34px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.fake-app-screen,
.fake-phone-booking,
.fake-calendar,
.fake-staff-list {
    width: 100%;
    height: 255px;
    border-radius: 24px;
    background: linear-gradient(135deg, #020617, #1e3a8a);
    border: 1px solid rgba(255,255,255,.12);
    padding: 22px;
    color: white;
}

.fake-top {
    width: 42%;
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    margin-bottom: 20px;
}

.fake-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.fake-grid span,
.fake-phone-booking span,
.fake-staff-list span {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 14px;
    color: #dbeafe;
}

.fake-grid b {
    color: white;
    font-size: 1.35rem;
}

.fake-row {
    height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    margin-top: 12px;
}

.fake-row.short {
    width: 70%;
}

.fake-phone-booking,
.fake-staff-list {
    display: grid;
    gap: 12px;
}

.fake-phone-booking strong {
    color: white !important;
    font-size: 1.4rem;
}

.fake-phone-booking button {
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: white;
    font-weight: 900;
    padding: 14px;
}

.fake-calendar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-content: start;
}

.fake-calendar div {
    color: #bfdbfe;
    font-weight: 900;
    text-align: center;
}

.fake-calendar span {
    height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,.1);
}

.fake-calendar span.busy {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

@media (max-width: 720px) {
    .sg-product-showcase {
        margin-top: 20px;
    }

    .sg-slideshow {
        min-height: 455px;
    }

    .sg-slide {
        padding: 16px;
        border-radius: 24px;
    }

    .fake-app-screen,
    .fake-phone-booking,
    .fake-calendar,
    .fake-staff-list {
        height: 235px;
        padding: 16px;
    }

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

    .fake-grid span {
        padding: 9px 12px;
    }

    .fake-calendar span {
        height: 38px;
    }
}

/* Real App Screenshot Slideshow Fix */

.sg-product-showcase {
    max-width: 980px !important;
    margin: 32px auto 0 !important;
}

.sg-slideshow {
    position: relative !important;
    min-height: 620px !important;
}

.sg-slide {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 600px !important;
}

.real-app-shot {
    width: 100%;
    height: 390px;
    border-radius: 24px;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(147,197,253,.22);
    display: grid;
    place-items: center;
}

.real-app-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* temporary fallback when screenshot files are missing */
.real-app-shot img[src$=".png"] {
    background: linear-gradient(135deg, #020617, #1d4ed8);
}

.sg-slide h3,
.sg-slide p {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 720px) {
    .sg-slideshow {
        min-height: 520px !important;
    }

    .sg-slide {
        min-height: 500px !important;
    }

    .real-app-shot {
        height: 285px !important;
        border-radius: 20px !important;
    }
}