*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f5f5f5;color:#555}.topbar{background:#fff;border-bottom:1px solid #ddd;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;color:#f59e0b;font-size:24px}.nav a{margin-left:12px;text-decoration:none;color:#666}.container{max-width:1100px;margin:30px auto;padding:0 20px}.card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 16px rgba(0,0,0,.06);margin-bottom:20px}.btn{display:inline-block;background: linear-gradient(135deg, #FFA23A, #f59e0b);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;border:none;cursor:pointer}.btn.grey{background:#74737A}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}input{width:100%;padding:12px;border:1px solid #ccc;border-radius:10px;margin:8px 0 15px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px;border-bottom:1px solid #eee;text-align:left}.hero{padding:70px 20px;text-align:center;background:#fff}.hero h1{font-size:44px;color:#f59e0b;margin:0}.muted{color:#777}.badge{padding:5px 10px;border-radius:20px;background:#eee}.active{background:#d1fae5;color:#065f46}.suspended,.expired{background:#fee2e2;color:#991b1b}

.card,
.plan-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;
}

.card:hover {
    box-shadow: 0 14px 35px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.btn.grey {
    background: #74737A;
}

.btn.grey:hover {
    background: #5f5e65;
}

.pending {
    background: #fef3c7;
    color: #92400e;
}

.paid {
    background: #d1fae5;
    color: #065f46;
}

.failed {
    background: #fee2e2;
    color: #991b1b;
}

.pending {
    background: #fef3c7;
    color: #92400e;
}

.active {

    background: #d1fae5;

    color: #065f46;

}

.suspended {

    background: #fee2e2;

    color: #991b1b;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert {
    border-left: 5px solid #dc2626;
    margin-bottom: 15px;
}

.expired {
    background: #fee2e2;
    color: #991b1b;
}

.success-alert {
    border-left: 5px solid #16a34a;
    background: #ecfdf5;
    color: #065f46;
}

.danger-alert {
    border-left: 5px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.app-topbar {
    padding: 18px 40px;
}

.app-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nav-pill {
    padding: 10px 16px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #444;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

.nav-pill:hover {
    background: #ffe0bd;
    color: #c75f00;
}

.active-nav {
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
    color: white;
}

.logout-pill {
    background: #fbfaff;
    color: white;
}

.logout-pill:hover {
    background: #5f5e65;
    color: white;
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {

    body {
        font-size: 14px;
    }

    .container {
        width: 100%;
        margin: 18px auto;
        padding: 0 14px;
    }

    .app-topbar {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    }

    .app-nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .nav-pill {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    .card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    }

    .grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .plan-card {
        width: 100%;
    }

    table {
        font-size: 13px;
    }

    .table-wrap {
        overflow-x: auto;
    }

    .btn {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 92%;
    }

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

body {
    margin: 0;
    background: #f8f7f5;
}

/* Background Layer */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('images/mesh-bg.jpg') no-repeat center/cover;
    opacity: 0.80; /* VERY IMPORTANT */
    z-index: -1;
}

.card {
    animation: fadeUp 0.45s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 162, 58, 0.35);
}

.plan-card:hover {
    transform: translateY(-6px);
}

body {
    opacity: 0;
    animation: pageFade 0.8s ease forwards;
}

@keyframes pageFade {
    to {
        opacity: 1;
    }
}

.btn:active,
.nav-pill:active,
.plan-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

.brand {
    display: flex;
    align-items: center;
}

.app-topbar {
    min-height: 70px;
}

.logo-brand {
    display: flex !important;
    align-items: center !important;
    height: 55px !important;
    max-height: 55px !important;
    overflow: hidden !important;
}

/* PWA / Mobile Header Fix */
@media (max-width: 768px), (display-mode: standalone) {

    .app-topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 12px 18px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(12px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

    .app-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .nav-pill {
        width: 100%;
        padding: 10px 8px;
        font-size: 13px;
        text-align: center;
        border-radius: 18px;
        white-space: nowrap;
    }

    .logout-pill {
        margin-left: 0;
    }

    .container {
        padding: 16px;
        margin-top: 10px;
    }

    .card {
        border-radius: 22px;
    }
}

/* Mobile / PWA Hamburger Header */
.hamburger {
    display: none;
}

@media (max-width: 768px), (display-mode: standalone) {

    .mobile-menu-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        min-height: 72px;
        padding: 12px 18px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(12px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

    .logo-brand {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .hamburger {
        display: flex;
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, #FFA23A, #f59e0b);
        color: white;
        font-size: 26px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mobile-dropdown {
        display: none !important;
        position: absolute;
        top: 74px;
        right: 18px;
        width: 220px;
        background: rgba(255,255,255,0.98);
        border-radius: 18px;
        padding: 12px;
        box-shadow: 0 16px 35px rgba(0,0,0,0.16);
        z-index: 1001;
    }

    .mobile-dropdown.show-menu {
        display: grid !important;
        gap: 10px;
    }

    .mobile-dropdown .nav-pill {
        width: 100%;
        text-align: center;
        padding: 12px;
        border-radius: 14px;
    }

    .container {
        margin-top: 16px;
    }
}

/* Clean vertical mobile menu */
@media (max-width: 768px), (display-mode: standalone) {

    .mobile-dropdown {
        display: none !important;
        position: absolute;
        top: 74px;
        right: 18px;
        width: 220px;
        background: rgba(255,255,255,0.98);
        border-radius: 18px;
        padding: 14px 0;
        box-shadow: 0 16px 35px rgba(0,0,0,0.16);
        z-index: 1001;
    }

    .mobile-dropdown.show-menu {
        display: flex !important;
        flex-direction: column;
    }

    .mobile-dropdown .nav-pill {
        background: transparent !important;
        color: #444 !important;
        border-radius: 0 !important;
        padding: 14px 22px;
        text-align: left;
        width: 100%;
        box-shadow: none !important;
        transition: 0.2s ease;
    }

    .mobile-dropdown .nav-pill:hover,
    .mobile-dropdown .nav-pill:active {
        background: #fff3e6 !important;
        color: #f59e0b !important;
        padding-left: 28px;
    }

    .mobile-dropdown .active-nav {
        color: #f59e0b !important;
        font-weight: 700;
    }

    .mobile-dropdown .logout-pill {
        color: #dc2626 !important;
        margin-left: 0 !important;
    }

    .mobile-dropdown .logout-pill:hover,
    .mobile-dropdown .logout-pill:active {
        background: #fef2f2 !important;
        color: #b91c1c !important;
    }
}

.chart-row {
    display: grid;
    grid-template-columns: 160px 1fr 50px;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
}

.chart-label span {
    display: block;
    font-weight: 700;
    color: #333;
}

.chart-label strong {
    font-size: 13px;
    color: #777;
}

.chart-bar {
    height: 14px;
    background: #f1f1f1;
    border-radius: 999px;
    overflow: hidden;
}

.chart-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}

.paid-fill {
    background: #16a34a;
}

.pending-fill {
    background: #ffa23a;
}

.failed-fill {
    background: #dc2626;
}

@media (max-width: 768px) {
    .chart-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.logo {
    height: 32px;
    width: auto;
}

.topbar {
    position: relative;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 24px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bolder;
}

.logo {
    height: 48px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    display: block;
}

.brand span {
    font-size: 18px;
    font-weight: 600;
    color: #ffa23a;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.8px;
}

.nav-link {
    background: #FFA23A;
    color: #74737A;
    padding: 9px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

.nav-link:hover {
    background: #f8d0a3, #ecebe8;
    color: #fdf8f2;
}

.logout-link {
    background: #74737A;
    color: #fff;
}

.logout-link:hover {
    background: #5f5e65;
}

.admin-menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .admin-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .admin-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }

    .admin-nav.show-menu {
        display: flex;
    }
}

/* CLEAN MOBILE MENU (ADMIN ONLY) */
@media (max-width: 768px) {

    .admin-nav .nav-link {
        background: none !important;
        color: #333;
        padding: 12px 10px;
        border-radius: 0;
        text-align: left;
        border-bottom: 1px solid #eee;
        font-weight: 500;
    }

    .admin-nav .nav-link:hover {
        background: #f5f5f5;
        color: #000;
    }

    .admin-nav .logout-link {
        color: #dc2626;
    }

    .admin-nav .logout-link:hover {
        background: #fef2f2;
    }
}

/* ADMIN DROPDOWN MENU */
.admin-menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* DESKTOP */
.admin-nav {
    display: flex;
    gap: 10px;
}

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

    .admin-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .admin-nav {
        display: none;
        position: absolute;
        top: 70px; /* height of topbar */
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        box-shadow: 0 6px 18px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 10px 0;
    }

    .admin-nav.show-menu {
        display: flex;
    }

    .admin-nav .nav-link {
        background: none !important;
        border: none;
        padding: 14px 20px;
        text-align: left;
        border-bottom: 1px solid #eee;
        color: #333;
        font-weight: 500;
    }

    .admin-nav .nav-link:hover {
        background: #f5f5f5;
    }

    .admin-nav .logout-link {
        color: #dc2626;
    }

    .admin-nav .logout-link:hover {
        background: #fef2f2;
    }
}

@media (max-width: 768px) {

    .admin-menu-toggle {
        display: block;
        margin-left: auto;
        font-size: 22px;
    }

    .admin-nav {
        display: none;
        position: absolute;
        top: 60px;
        right: 15px;
        flex-direction: column;
        align-items: flex-end; /* 👈 aligns text to right */
        gap: 10px;

        /* ❌ REMOVE BOX LOOK */
        background: none;
        box-shadow: none;
        padding: 0;
        width: auto;
    }

    .admin-nav.show-menu {
        display: flex;
    }

    .admin-nav .nav-link {
        background: none !important;
        border: none;
        padding: 6px 0;
        color: #333;
        font-size: 15px;
        text-align: right;
    }

    .admin-nav .nav-link:hover {
        color: #FFA23A;
    }

    .admin-nav .logout-link {
        color: #dc2626;
    }
}


.logo-container img {
    height: 40px;
    width: auto;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-footer {
    position: fixed;
    bottom: 18px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #666;
    font-size: 16px;
}

/* Restore subscriber dashboard desktop layout */
.container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

.card {
    width: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

@media (min-width: 769px) {
    .container {
        max-width: 1500px;
    }

    .card {
        max-width: 1500px;
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Professional UI Refresh (Phase 1 + 2) ===== */
:root {
    --brand-500: #f59e0b;
    --brand-600: #d97706;
    --brand-100: #fff7ed;
    --slate-900: #0f172a;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-300: #cbd5e1;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --success-bg: #dcfce7;
    --success-fg: #166534;
    --warning-bg: #fef3c7;
    --warning-fg: #92400e;
    --danger-bg: #fee2e2;
    --danger-fg: #991b1b;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--slate-700);
    background: #fff0f6;
    opacity: 1;
    animation: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('images/mesh-bg.jpg') no-repeat center/cover;
    opacity: 0.80;
    z-index: -1;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    min-height: 72px;
    padding: 14px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--slate-900);
}

.brand-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--slate-900);
}

.logo-container img,
.logo {
    height: 36px;
    width: auto;
}

.container {
    max-width: 1180px;
    margin: 26px auto;
    padding: 0 18px;
}

.card {
    background: var(--surface);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav a,
.nav-link {
    background: #f1f5f9;
    color: var(--slate-700);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    font-weight: 600;
}

.nav a:hover,
.nav-link:hover {
    background: #e2e8f0;
    color: var(--slate-900);
}

.logout-link {
    background: #111827;
    color: #fff;
}

.logout-link:hover {
    background: #1f2937;
    color: #fff;
}

.btn {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(217, 119, 6, 0.28);
}

.btn.grey {
    background: #475569;
    color: #fff;
}

input {
    border: 1px solid var(--slate-300);
    color: var(--slate-900);
    background: #fff;
}

input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

th {
    color: var(--slate-900);
    background: var(--surface-soft);
}

.hero {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.hero h1 {
    color: var(--slate-900);
}

.badge {
    font-weight: 600;
    border-radius: 999px;
}

.active,
.paid {
    background: var(--success-bg);
    color: var(--success-fg);
}

.pending {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.failed,
.expired,
.suspended {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.success-alert {
    background: #ecfdf5;
    border-left: 4px solid #16a34a;
}

.danger-alert,
.alert {
    background: #fff7ed;
    border-left: 4px solid #f97316;
}

.login-footer {
    position: static;
    margin: 14px 0 20px;
    color: var(--slate-500);
}

.close-btn {
    border: 0;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    color: inherit;
}

.app-topbar .nav-pill {
    background: #eef2ff;
    color: #3730a3;
}

.app-topbar .nav-pill.active-nav {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
}

.app-topbar .logout-pill {
    background: #111827;
    color: #fff;
}

@media (max-width: 768px) {
    .topbar {
        padding: 12px 14px;
    }

    .container {
        margin: 16px auto;
        padding: 0 12px;
    }

    .card {
        border-radius: 12px;
    }
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.section-head h3 {
    margin: 0;
}

.section-subtitle {
    margin: 4px 0 0;
    color: var(--slate-500);
    font-size: 0.92rem;
}

.filter-bar {
    margin: 12px 0 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-link {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--slate-700);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.filter-link.active-filter {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
}

.stat-card h2 {
    margin: 6px 0 0;
    color: var(--slate-900);
}

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

.table-wrap {
    overflow-x: auto;
}

.search-form {
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-form input {
    max-width: 320px;
    margin: 0;
}

.action-links .btn {
    padding: 7px 10px;
    font-size: 0.82rem;
}

.empty-state {
    text-align: center;
    padding: 24px 14px;
    color: var(--slate-500);
}

.page-card {
    max-width: 700px;
    margin: 0 auto;
}

.center-card {
    max-width: 640px;
    margin: 0 auto;
}

.notice-card {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0 16px;
}

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

.actions-inline .btn {
    margin-top: 0;
}

.page-card {
    max-width: 640px;
    margin: 0 auto;
}

.notice-card {
    background: var(--surface-soft);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
}

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

.plan-card {
    cursor: pointer;
    transition: 0.2s ease;
}

.plan-card:hover {
    transform: translateY(-3px);
}

.days-left {
    font-weight: 700;
    color: var(--brand-600);
}

.renew-box {
    margin-top: 16px;
}

/* Forced password-change modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    z-index: 2000;
    padding: 18px;
}

.modal-card {
    width: 100%;
    max-width: 520px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
    padding: 18px 18px 16px;
}

.modal-card h3 {
    margin: 0 0 6px;
    color: var(--slate-900);
}
.warning-alert {
    background: #fff7e6;
    border: 1px solid #ffd591;
    color: #8a5a00;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
}


/* Subscriber dashboard self-service actions */
.actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


/* ===== Admin orange sidebar + PWA responsive refinement ===== */
:root {
    --admin-orange: #FFA23A;
    --admin-orange-deep: #E87912;
    --admin-orange-dark: #C96508;
    --admin-sidebar-width: 282px;
    --admin-ink: #1F2937;
}

.admin-app {
    background: #fff6ee;
    min-height: 100vh;
    padding-left: var(--admin-sidebar-width);
    overflow-x: hidden;
}

.admin-app::before {
    opacity: 0.34;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 5000;
    width: var(--admin-sidebar-width);
    display: flex;
    flex-direction: column;
    color: #fff;
    /*
     * Restores the original warm mesh-gradient identity in the admin sidebar.
     * The amber overlay keeps navigation labels readable over the artwork.
     */
    background:
        linear-gradient(
            180deg,
            rgba(241, 127, 19, 0.82) 0%,
            rgba(255, 158, 42, 0.74) 45%,
            rgba(202, 83, 5, 0.88) 100%
        ),
        url('images/mesh-bg.jpg') center center / cover no-repeat;
    background-blend-mode: multiply;
    box-shadow: 12px 0 34px rgba(151, 77, 8, 0.24);
    transition: transform .24s ease;
}

.admin-sidebar-brand {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.22);
}

.admin-sidebar-logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(114, 48, 0, .16);
}

.admin-sidebar-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.admin-sidebar-logo span {
    color: var(--admin-orange-dark);
    font-size: 18px;
    font-weight: 900;
}

.admin-sidebar-brand-text {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-sidebar-brand-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .04em;
    font-size: .87rem;
    color: #fff;
}

.admin-sidebar-brand-text span {
    color: rgba(255,255,255,.86);
    font-size: .73rem;
    font-weight: 600;
}

.admin-sidebar-close {
    display: none;
    margin-left: auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 11px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-size: 24px;
    cursor: pointer;
}

.admin-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 12px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.48) transparent;
}

.admin-side-section {
    margin: 16px 9px 7px;
    color: rgba(255,255,255,.72);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.admin-side-section:first-child {
    margin-top: 2px;
}

/* ===== Collapsible administration sidebar sections ===== */
.admin-side-section-static {
    margin-bottom: 7px;
}

.admin-nav-group {
    margin: 12px 0 0;
}

.admin-side-section-toggle {
    width: calc(100% - 18px);
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 9px;
    padding: 7px 5px;
    border: 0;
    border-radius: 9px;
    color: rgba(255,255,255,.78);
    background: transparent;
    font: inherit;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.admin-side-section-toggle:hover,
.admin-side-section-toggle:focus-visible,
.admin-nav-group.is-open .admin-side-section-toggle {
    color: #fff;
    background: rgba(111, 48, 0, .14);
    outline: none;
}

.admin-side-section-chevron {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    color: currentColor;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform .2s ease, background .2s ease;
}

.admin-nav-group.is-open .admin-side-section-chevron {
    background: rgba(255,255,255,.14);
    transform: rotate(0deg);
}

.admin-side-section-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .22s ease, opacity .18s ease;
}

.admin-side-section-panel-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transform: translateY(-4px);
    transition: padding .22s ease, transform .22s ease;
}

.admin-nav-group.is-open .admin-side-section-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.admin-nav-group.is-open .admin-side-section-panel-inner {
    padding-top: 6px;
    transform: translateY(0);
}

.admin-side-section-panel .admin-side-link {
    margin-bottom: 3px;
}

.admin-side-section-panel .admin-side-sync-form {
    margin: 12px 0 0;
}

.admin-side-section-panel .admin-side-sync-form + .admin-side-sync-form {
    margin-top: 10px;
}


.admin-side-link,
.admin-side-sync-button,
.admin-side-logout {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    color: rgba(255,255,255,.96);
    background: transparent;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}

.admin-side-link:hover,
.admin-side-link:focus-visible,
.admin-side-sync-button:hover,
.admin-side-sync-button:focus-visible,
.admin-side-logout:hover,
.admin-side-logout:focus-visible {
    color: #fff;
    background: rgba(111, 48, 0, .22);
    outline: none;
}

.admin-side-link.is-active {
    color: #9A4600;
    background: #fff;
    box-shadow: 0 7px 18px rgba(142, 61, 0, .16);
}

.admin-side-link-danger {
    color: #fff8f4;
    background: rgba(147, 49, 0, .18);
}

.admin-side-icon {
    width: 18px;
    flex: 0 0 18px;
    color: currentColor;
    font-size: 1.05rem;
    font-weight: 900;
    text-align: center;
}

.admin-side-sync-form {
    margin: 19px 0 0;
}

.admin-side-sync-button {
    justify-content: center;
    color: #9A4600;
    background: #fff;
    box-shadow: 0 7px 18px rgba(142, 61, 0, .13);
    text-align: center;
}

.admin-side-sync-button:hover {
    color: #7C3700;
    background: #fffaf4;
}

.admin-sidebar-footer {
    padding: 14px 12px 15px;
    border-top: 1px solid rgba(255,255,255,.22);
}

.admin-sidebar-footer form {
    margin: 0;
}

.admin-side-logout {
    justify-content: center;
    color: #fff;
    background: rgba(112, 46, 0, .22);
    text-align: center;
}

.admin-sidebar-footer small {
    display: block;
    margin-top: 11px;
    color: rgba(255,255,255,.74);
    font-size: .67rem;
    text-align: center;
}

.admin-mobile-header {
    min-height: 72px;
    display: none;
    align-items: center;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #f1d7ba;
    box-shadow: 0 4px 14px rgba(88, 50, 17, .05);
}

.admin-sidebar-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 0 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--admin-orange), var(--admin-orange-deep));
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
}

.admin-sidebar-toggle span:first-child {
    font-size: 1.2rem;
    line-height: 1;
}

.admin-mobile-title {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-mobile-title span {
    color: #9A4600;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-mobile-title strong {
    overflow: hidden;
    color: var(--admin-ink);
    font-size: .97rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-backdrop {
    display: none;
}

.admin-app .container {
    max-width: 1380px;
    margin: 25px auto;
    padding: 0 22px;
}

.admin-app .topbar,
.admin-app .topbar-fixed-admin {
    display: none !important;
}

@media (max-width: 1100px) {
    .admin-app {
        padding-left: 0;
    }

    .admin-sidebar {
        width: min(310px, calc(100vw - 48px));
        transform: translateX(-105%);
    }

    .admin-mobile-header {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 4900;
    }

    .admin-sidebar-close {
        display: inline-grid;
        place-items: center;
    }

    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 4950;
        background: rgba(15, 23, 42, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

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

    .admin-sidebar-open .admin-sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .admin-app .container {
        max-width: 1100px;
        margin: 18px auto;
        padding: 0 16px;
    }
}

@media (max-width: 680px) {
    .admin-mobile-header {
        min-height: 66px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-sidebar-toggle {
        min-width: 44px;
        width: 44px;
        justify-content: center;
        padding: 0;
    }

    .admin-sidebar-toggle span:last-child {
        display: none;
    }

    .admin-app .container {
        margin: 14px auto;
        padding: 0 12px;
    }

    .admin-app .card {
        padding: 17px;
    }

    .admin-app .section-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* PWA and small-screen resilience. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

.table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 768px) {
    input,
    select,
    textarea,
    button,
    .btn,
    .nav-pill {
        min-height: 44px;
    }

    .actions-inline,
    .search-form {
        align-items: stretch;
    }

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

    .table-wrap > table {
        min-width: 620px;
    }

    .card {
        padding: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }

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

@media (max-width: 480px) {
    .brand-title {
        font-size: .94rem;
    }

    .logo {
        max-width: 145px;
    }

    .container {
        padding: 0 11px;
    }

    .card {
        border-radius: 14px;
    }

    h1 {
        font-size: 1.55rem;
    }

    h2 {
        font-size: 1.25rem;
    }
}

@media (display-mode: standalone) {
    body {
        min-height: 100dvh;
    }

    .topbar,
    .admin-mobile-header {
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .container {
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
}


/* ===== Admin dashboard: four-card desktop grid ===== */
.admin-dashboard-shell {
    max-width: 1480px;
}

.admin-dashboard-shell .dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.admin-dashboard-shell .dashboard-stat-link {
    min-width: 0;
}

.dashboard-stat-link {
    position: relative;
    min-height: 166px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: inherit;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
}

.dashboard-stat-link::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
    opacity: 0;
    transition: opacity .18s ease;
}

.dashboard-stat-link::after {
    content: "↗";
    position: absolute;
    top: 17px;
    right: 18px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    color: #9A4600;
    background: #FFF2E3;
    font-size: 16px;
    font-weight: 900;
    opacity: .72;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.dashboard-stat-link:hover,
.dashboard-stat-link:focus-visible {
    color: var(--slate-700);
    border-color: #F6BD7C;
    box-shadow: 0 15px 30px rgba(193, 100, 9, .16);
    transform: translateY(-4px);
    outline: none;
}

.dashboard-stat-link:hover::before,
.dashboard-stat-link:focus-visible::before {
    opacity: 1;
}

.dashboard-stat-link:hover::after,
.dashboard-stat-link:focus-visible::after {
    background: #FFE1BE;
    opacity: 1;
    transform: translate(2px, -2px);
}

.dashboard-stat-link h2 {
    padding-right: 34px;
}

.dashboard-stat-link small {
    display: block;
    min-height: 18px;
    margin-top: 2px;
}

.dashboard-stat-hint {
    display: block;
    margin-top: auto;
    padding-top: 15px;
    color: #A85A10;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.dashboard-stat-hint b {
    display: inline-block;
    margin-left: 3px;
    transition: transform .18s ease;
}

.dashboard-stat-link:hover .dashboard-stat-hint b,
.dashboard-stat-link:focus-visible .dashboard-stat-hint b {
    transform: translateX(3px);
}

/* Four cards across on desktop. Collapse only when the screen is genuinely narrow. */
@media (max-width: 1023px) {
    .admin-dashboard-shell .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .admin-dashboard-shell .dashboard-summary-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .dashboard-stat-link {
        min-height: 137px;
    }
}

/* ===== PWA contextual subscriber topbar ===== */
.dashboard-pwa-topbar {
    justify-content: center;
    gap: 0;
}

.dashboard-logo-brand {
    width: 100%;
    justify-content: center;
    min-width: 0;
}

.dashboard-logo-container {
    height: 42px;
    max-width: min(330px, 78vw);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.dashboard-topbar-logo {
    display: block;
    width: auto;
    height: 38px;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
    object-position: center;
}

.subscriber-page-topbar {
    min-height: 64px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.subscriber-page-heading {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.subscriber-page-title {
    display: block;
    color: var(--slate-900);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscriber-topbar-nav {
    width: auto !important;
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.subscriber-dashboard-pill {
    width: auto !important;
    min-width: 0;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

@media (max-width: 768px), (display-mode: standalone) {
    .dashboard-pwa-topbar {
        min-height: 64px;
        padding: 10px 14px;
    }

    .dashboard-logo-container {
        height: 38px;
        max-width: min(300px, 82vw);
    }

    .dashboard-topbar-logo {
        height: 34px;
        max-height: 38px;
    }

    .subscriber-page-topbar {
        min-height: 62px;
        padding: 10px 14px;
    }

    .subscriber-page-title {
        font-size: .98rem;
    }

    .subscriber-dashboard-pill {
        min-height: 32px;
        padding: 7px 12px !important;
        font-size: .82rem;
    }
}

@media (max-width: 380px) {
    .dashboard-logo-container {
        max-width: min(270px, 80vw);
    }

    .dashboard-topbar-logo {
        height: 32px;
    }

    .subscriber-page-title {
        font-size: .92rem;
    }

    .subscriber-dashboard-pill {
        padding: 7px 10px !important;
    }
}


/* ===== Dashboard PWA menu restore ===== */
.dashboard-pwa-topbar {
    justify-content: space-between;
}

.dashboard-logo-brand {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.dashboard-menu-button {
    flex: 0 0 auto;
}

.dashboard-mobile-dropdown form,
.dashboard-logout-form {
    margin: 0;
}

.dashboard-mobile-dropdown .logout-pill {
    width: 100%;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

@media (min-width: 769px) {
    .dashboard-menu-button {
        display: flex;
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, #FFA23A, #f59e0b);
        color: white;
        font-size: 24px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .dashboard-mobile-dropdown {
        display: none !important;
        position: absolute;
        top: 74px;
        right: 18px;
        width: 235px;
        background: rgba(255,255,255,0.98);
        border-radius: 18px;
        padding: 14px 0;
        box-shadow: 0 16px 35px rgba(0,0,0,0.16);
        z-index: 1001;
    }

    .dashboard-mobile-dropdown.show-menu {
        display: flex !important;
        flex-direction: column;
    }

    .dashboard-mobile-dropdown .nav-pill {
        background: transparent !important;
        color: #444 !important;
        border-radius: 0 !important;
        padding: 14px 22px;
        text-align: left;
        width: 100%;
        box-shadow: none !important;
        transition: 0.2s ease;
    }

    .dashboard-mobile-dropdown .nav-pill:hover,
    .dashboard-mobile-dropdown .nav-pill:active {
        background: #fff3e6 !important;
        color: #f59e0b !important;
        padding-left: 28px;
    }

    .dashboard-mobile-dropdown .logout-pill {
        color: #dc2626 !important;
    }

    .dashboard-mobile-dropdown .logout-pill:hover,
    .dashboard-mobile-dropdown .logout-pill:active {
        background: #fef2f2 !important;
        color: #b91c1c !important;
    }
}

@media (max-width: 768px), (display-mode: standalone) {
    .dashboard-pwa-topbar {
        justify-content: space-between;
    }

    .dashboard-logo-brand {
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .dashboard-logo-container {
        max-width: min(250px, 66vw);
    }

    .dashboard-topbar-logo {
        object-position: left center;
    }

    .dashboard-menu-button {
        display: flex !important;
        flex: 0 0 auto;
    }

    .dashboard-mobile-dropdown {
        width: 235px;
    }
}


/* ===== PWA UX Polish Step 1: Dashboard hierarchy ===== */
.dashboard-welcome-card {
    border: 0;
    background:
        linear-gradient(135deg, rgba(255,162,58,0.16), rgba(255,255,255,0.96)),
        rgba(255,255,255,0.96);
}

.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,162,58,0.13);
    color: #b45309;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.dashboard-welcome-card h2 {
    margin-top: 0;
    margin-bottom: 6px;
}

.dashboard-tenant-line {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(226,232,240,0.9);
}

.dashboard-tenant-line span {
    color: var(--slate-500);
    font-size: .85rem;
    font-weight: 700;
}

.dashboard-tenant-line strong {
    color: var(--slate-900);
    text-align: right;
}

.dashboard-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0 12px;
}

.dashboard-section-title h3 {
    margin: 0;
    color: var(--slate-900);
}

.dashboard-section-title p {
    margin: 4px 0 0;
    color: var(--slate-500);
    font-size: .92rem;
}

.dashboard-section-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
    color: white;
    font-size: .86rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(245,158,11,0.25);
}

.dashboard-priority-card,
.dashboard-alert-card,
.dashboard-self-service-card {
    margin-top: 0;
}

.dashboard-priority-card {
    border-left: 5px solid #16a34a;
}

.dashboard-priority-card.plan-status-active {
    border-left-color: #16a34a;
}

.dashboard-priority-card.plan-status-inactive {
    border-left-color: #dc2626;
}

.dashboard-alert-card {
    border-radius: 18px;
}

.dashboard-self-service-card {
    margin-bottom: 26px;
}

@media (max-width: 768px), (display-mode: standalone) {
    .dashboard-section-title {
        margin: 22px 0 10px;
    }

    .dashboard-section-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        border-radius: 10px;
    }

    .dashboard-tenant-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-tenant-line strong {
        text-align: left;
    }
}


/* ===== PWA UX Step 1 adjustment: neutral section markers ===== */
.dashboard-section-icon {
    font-size: .72rem;
    line-height: 1;
}

.dashboard-section-icon.alert-icon {
    background: linear-gradient(135deg, #fb923c, #f97316);
}


/* ===== PWA UX: Current plan status color logic ===== */
.dashboard-priority-card.plan-status-inactive h3 {
    color: #991b1b;
}

.dashboard-priority-card.plan-status-active h3 {
    color: #065f46;
}


/* ===== PWA UX Polish Step 2: Premium plan cards ===== */
.dashboard-plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 16px;
}

.dashboard-plan-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(226,232,240,0.95);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,251,245,0.96));
    cursor: pointer;
}

.dashboard-plan-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #FFA23A, #f59e0b);
}

.plan-card-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.plan-card-top h3 {
    margin: 0;
    color: var(--slate-900);
    font-size: 1.18rem;
}

.plan-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.plan-tag-default {
    background: #eef2ff;
    color: #3730a3;
}

.plan-tag-starter {
    background: #f1f5f9;
    color: #334155;
}

.plan-tag-popular {
    background: #fff7ed;
    color: #c2410c;
}

.plan-tag-premium {
    background: #fef3c7;
    color: #92400e;
}

.plan-tag-unlimited {
    background: #ecfdf5;
    color: #047857;
}

.plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 16px;
}

.plan-price-row .currency {
    color: var(--slate-500);
    font-size: .9rem;
    font-weight: 800;
}

.plan-price-row strong {
    color: var(--slate-900);
    font-size: 1.75rem;
    letter-spacing: -0.04em;
}

.plan-price-row .duration {
    color: var(--slate-500);
    font-size: .88rem;
    font-weight: 700;
}

.plan-feature-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 18px;
}

.plan-feature {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(248,250,252,0.92);
    border: 1px solid rgba(226,232,240,0.85);
}

.feature-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff7ed;
    font-size: 1rem;
}

.plan-feature small {
    display: block;
    color: var(--slate-500);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.plan-feature strong {
    color: var(--slate-900);
    font-size: .92rem;
}

.plan-action-btn {
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

@media (max-width: 768px), (display-mode: standalone) {
    .dashboard-plan-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .dashboard-plan-card {
        padding: 18px;
    }

    .plan-price-row strong {
        font-size: 1.6rem;
    }

    .plan-action-btn {
        width: 100%;
    }
}


/* ===== PWA UX Polish Step 2B: Compact premium plan cards ===== */
.dashboard-plan-card {
    padding: 16px 16px 15px;
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.dashboard-plan-card:hover {
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13);
}

.plan-card-top {
    gap: 7px;
    margin-bottom: 10px;
}

.plan-card-top h3 {
    font-size: 1.12rem;
}

.plan-price-row {
    margin-bottom: 12px;
}

.plan-price-row strong {
    font-size: 1.58rem;
}

.plan-feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 10px 0 14px;
    padding: 8px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,247,237,0.92), rgba(248,250,252,0.96));
    border: 1px solid rgba(226,232,240,0.92);
}

.plan-feature {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 6px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    text-align: left;
}

.plan-feature:not(:last-child) {
    border-right: 1px solid rgba(203,213,225,0.75);
}

.feature-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 10px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 6px 14px rgba(15,23,42,0.06);
    font-size: .86rem;
}

.plan-feature small {
    font-size: .62rem;
    line-height: 1.1;
}

.plan-feature strong {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.12;
    white-space: normal;
}

.plan-action-btn {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 768px), (display-mode: standalone) {
    .dashboard-plan-card {
        padding: 15px;
        border-radius: 20px;
    }

    .plan-card-top {
        margin-bottom: 9px;
    }

    .plan-price-row strong {
        font-size: 1.48rem;
    }

    .plan-feature-list {
        padding: 7px;
        border-radius: 16px;
    }

    .plan-feature {
        gap: 5px;
        padding: 6px 4px;
    }

    .feature-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        border-radius: 9px;
        font-size: .8rem;
    }

    .plan-feature small {
        font-size: .58rem;
    }

    .plan-feature strong {
        font-size: .68rem;
    }
}

@media (max-width: 360px) {
    .plan-feature {
        flex-direction: column;
        text-align: center;
        gap: 3px;
    }

    .plan-feature strong {
        font-size: .66rem;
    }
}


/* ===== PWA UX Polish Step 3: Bottom spacing and touch comfort ===== */
:root {
    --pwa-bottom-comfort: 34px;
}

body {
    padding-bottom: env(safe-area-inset-bottom);
}

.container {
    padding-bottom: calc(var(--pwa-bottom-comfort) + env(safe-area-inset-bottom));
}

.dashboard-self-service-card {
    margin-bottom: calc(34px + env(safe-area-inset-bottom));
}

.btn,
.nav-pill,
.plan-action-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.actions-inline {
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px), (display-mode: standalone) {
    :root {
        --pwa-bottom-comfort: 74px;
    }

    .container {
        padding-bottom: calc(var(--pwa-bottom-comfort) + env(safe-area-inset-bottom)) !important;
    }

    .card:last-child,
    .dashboard-self-service-card {
        margin-bottom: calc(46px + env(safe-area-inset-bottom));
    }

    .btn,
    .nav-pill,
    .plan-action-btn {
        min-height: 44px;
    }

    .actions-inline {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .actions-inline .btn {
        width: 100%;
        margin-top: 0;
    }
}


/* ===== PWA UX Polish Step 4: Dashboard menu spacing ===== */
.dashboard-mobile-dropdown {
    width: 218px !important;
    padding: 8px 0 !important;
}

.dashboard-mobile-dropdown .nav-pill {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 16px !important;
    text-align: left !important;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.15;
}

.dashboard-mobile-dropdown .nav-pill:hover,
.dashboard-mobile-dropdown .nav-pill:active {
    padding-left: 20px !important;
}

.dashboard-mobile-dropdown .dashboard-logout-form {
    width: 100%;
}

.dashboard-mobile-dropdown .logout-pill {
    justify-content: flex-start !important;
    padding: 10px 16px !important;
    text-align: left !important;
}

@media (max-width: 768px), (display-mode: standalone) {
    .dashboard-mobile-dropdown {
        top: 68px;
        right: 14px;
        width: 210px !important;
        padding: 7px 0 !important;
        border-radius: 16px;
    }

    .dashboard-mobile-dropdown .nav-pill {
        min-height: 37px !important;
        padding: 9px 15px !important;
        font-size: .9rem;
    }

    .dashboard-mobile-dropdown .nav-pill:hover,
    .dashboard-mobile-dropdown .nav-pill:active {
        padding-left: 19px !important;
    }
}

@media (max-width: 380px) {
    .dashboard-mobile-dropdown {
        width: 196px !important;
    }

    .dashboard-mobile-dropdown .nav-pill {
        padding: 9px 14px !important;
    }
}


/* ===== PWA UX Polish Step 5: Friendly empty states ===== */
.friendly-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 7px;
    padding: 26px 16px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,247,237,0.74), rgba(248,250,252,0.96));
    border: 1px dashed rgba(203,213,225,0.95);
    color: var(--slate-600);
}

.friendly-empty-state .empty-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 22px rgba(15,23,42,0.08);
    font-size: 1.28rem;
}

.friendly-empty-state h3 {
    margin: 4px 0 0;
    color: var(--slate-900);
    font-size: 1rem;
}

.friendly-empty-state p {
    max-width: 420px;
    margin: 0;
    color: var(--slate-500);
    font-size: .9rem;
    line-height: 1.45;
}

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

td .friendly-empty-state {
    width: 100%;
}

@media (max-width: 768px), (display-mode: standalone) {
    .friendly-empty-state {
        padding: 22px 14px;
        border-radius: 16px;
    }

    .friendly-empty-state .empty-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .friendly-empty-state p {
        font-size: .86rem;
    }
}


/* ===== PWA UX Polish Step 6: Visual status messages ===== */
.status-chip {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-chip-active {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.status-chip-pending {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.status-chip-danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.status-chip-neutral {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}

.status-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.status-message p {
    margin: 0;
}

.status-message-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-message-warning {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.status-message-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

@media (max-width: 768px), (display-mode: standalone) {
    .status-chip {
        min-height: 28px;
        padding: 6px 9px;
        font-size: .76rem;
    }

    .status-message {
        padding: 11px 12px;
        border-radius: 14px;
    }
}


/* ===== PWA Speed & Router Responsive Build ===== */
.router-feedback-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
    padding: 13px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7ed, #f8fafc);
    border: 1px solid #fed7aa;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.router-feedback-card p {
    margin: 8px 0 0;
    color: #9a3412;
    font-size: .9rem;
    line-height: 1.42;
    font-weight: 700;
}

.router-refresh-btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 13px;
    font-size: .84rem;
}

@media (max-width: 768px), (display-mode: standalone) {
    .router-feedback-card {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
    }

    .router-refresh-btn {
        width: 100%;
    }
}


/* ===== Landing Page Refresh ===== */
.landing-body {
    min-height: 100vh;
    color: var(--slate-900);
}

.landing-shell {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    padding: 18px 0 42px;
}

.landing-topbar {
    position: sticky;
    top: 12px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.72);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

.landing-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.landing-brand img {
    width: auto;
    height: 38px;
    max-width: 260px;
    object-fit: contain;
}

.landing-brand strong {
    color: #f59e0b;
    font-size: 1.08rem;
    letter-spacing: .02em;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-nav a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    color: var(--slate-700);
    text-decoration: none;
    font-weight: 800;
    font-size: .88rem;
}

.landing-nav a:hover {
    background: #fff7ed;
    color: #c2410c;
}

.landing-login-link {
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
    color: white !important;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.22);
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: center;
    gap: 32px;
    padding: 56px 0 30px;
}

.landing-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 162, 58, 0.14);
    color: #b45309;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.landing-hero h1 {
    max-width: 720px;
    margin: 16px 0 12px;
    color: var(--slate-900);
    font-size: clamp(2.35rem, 6vw, 4.75rem);
    line-height: .96;
    letter-spacing: -0.07em;
}

.landing-hero p {
    max-width: 640px;
    margin: 0;
    color: var(--slate-600);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 650;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.landing-primary-btn,
.landing-secondary-btn {
    min-height: 46px;
    border-radius: 14px;
    padding-inline: 18px;
}

.landing-trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 650px;
    margin-top: 24px;
}

.landing-trust-row div {
    padding: 13px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(226, 232, 240, 0.78);
}

.landing-trust-row strong,
.landing-trust-row span {
    display: block;
}

.landing-trust-row strong {
    color: var(--slate-900);
    font-size: .95rem;
}

.landing-trust-row span {
    margin-top: 3px;
    color: var(--slate-500);
    font-size: .78rem;
    font-weight: 750;
}

.landing-device-card {
    display: flex;
    justify-content: center;
}

.phone-mockup {
    width: min(315px, 100%);
    padding: 12px;
    border-radius: 38px;
    background: #111827;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.phone-top {
    width: 86px;
    height: 7px;
    margin: 4px auto 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.24);
}

.phone-screen {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 26px 20px;
    border-radius: 29px;
    background:
        radial-gradient(circle at top left, rgba(255, 162, 58, .28), transparent 40%),
        linear-gradient(180deg, #fff, #fff7ed);
    text-align: center;
}

.wifi-orb {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    border-radius: 24px;
    background: white;
    box-shadow: 0 18px 36px rgba(245, 158, 11, 0.20);
    font-size: 2rem;
}

.phone-screen h3 {
    margin: 0;
    color: var(--slate-900);
    font-size: 1.35rem;
}

.phone-screen p {
    margin: 0 0 8px;
    color: var(--slate-500);
    font-weight: 800;
}

.mini-status {
    padding: 11px 12px;
    border-radius: 15px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,232,240,.82);
    color: var(--slate-700);
    font-weight: 850;
    text-align: left;
}

.active-mini {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0 34px;
}

.landing-feature-card,
.landing-plan-card,
.landing-steps div,
.landing-support-card {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(226,232,240,0.82);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.landing-feature-card {
    padding: 20px;
    border-radius: 24px;
}

.landing-feature-card span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #fff7ed;
    font-size: 1.18rem;
}

.landing-feature-card h3 {
    margin: 14px 0 8px;
    color: var(--slate-900);
}

.landing-feature-card p,
.landing-section-head p,
.landing-support-card p,
.landing-steps p {
    color: var(--slate-500);
    line-height: 1.55;
    font-weight: 650;
}

.landing-section {
    margin-top: 40px;
}

.landing-section-head {
    max-width: 720px;
    margin-bottom: 18px;
}

.landing-section-head h2,
.landing-support-card h2 {
    margin: 12px 0 8px;
    color: var(--slate-900);
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    letter-spacing: -0.04em;
}

.landing-section-head p,
.landing-support-card p {
    margin: 0;
}

.landing-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
}

.landing-plan-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
}

.landing-plan-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #FFA23A, #f59e0b);
}

.landing-plan-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.landing-plan-card h3 {
    margin: 12px 0 0;
    color: var(--slate-900);
    font-size: 1.65rem;
    letter-spacing: -0.04em;
}

.landing-plan-card p {
    margin: 2px 0 0;
    color: var(--slate-500);
    font-weight: 800;
}

.landing-plan-meta {
    display: grid;
    gap: 8px;
}

.landing-plan-meta span {
    padding: 9px 10px;
    border-radius: 13px;
    background: #f8fafc;
    color: var(--slate-700);
    font-size: .86rem;
    font-weight: 850;
}

.landing-plan-btn {
    margin-top: auto;
    width: 100%;
}

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

.landing-steps div {
    padding: 20px;
    border-radius: 24px;
}

.landing-steps strong {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
    color: white;
}

.landing-steps h3 {
    margin: 14px 0 8px;
    color: var(--slate-900);
}

.landing-steps p {
    margin: 0;
}

.landing-support-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 42px;
    padding: 24px;
    border-radius: 28px;
}

.landing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 34px;
    padding: 0 4px;
    color: var(--slate-500);
    font-size: .88rem;
    font-weight: 750;
}

@media (max-width: 860px) {
    .landing-hero {
        grid-template-columns: 1fr;
        padding-top: 34px;
    }

    .landing-device-card {
        display: none;
    }

    .landing-feature-grid,
    .landing-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .landing-shell {
        width: min(100% - 22px, 1180px);
        padding-top: 10px;
    }

    .landing-topbar {
        top: 8px;
        border-radius: 20px;
        padding: 10px 11px;
    }

    .landing-brand img {
        height: 32px;
        max-width: 178px;
    }

    .landing-nav a:not(.landing-login-link) {
        display: none;
    }

    .landing-login-link {
        min-height: 36px;
        padding: 8px 13px;
    }

    .landing-hero {
        padding: 30px 0 22px;
    }

    .landing-hero h1 {
        font-size: clamp(2.35rem, 13vw, 3.55rem);
    }

    .landing-hero p {
        font-size: .98rem;
    }

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

    .landing-trust-row {
        grid-template-columns: 1fr;
    }

    .landing-feature-card,
    .landing-plan-card,
    .landing-steps div,
    .landing-support-card {
        border-radius: 20px;
    }

    .landing-support-card {
        align-items: stretch;
        flex-direction: column;
    }

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


/* ===== Landing Page Plans + Device Showcase Refinement ===== */
.landing-hero-devices {
    display: block;
    padding: 48px 0 24px;
}

.landing-hero-devices > h1 {
    max-width: 900px;
    margin: 16px 0 18px;
}

.landing-hero-content-row {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
    align-items: center;
    gap: 28px;
}

.landing-hero-content-row .landing-hero-copy p {
    max-width: 610px;
    margin: 0;
}

.landing-hero-content-row .landing-actions,
.landing-hero-content-row .landing-trust-row {
    display: none !important;
}

.landing-device-pair {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.device-frame {
    position: relative;
    width: 225px;
    background: #111827;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.samsung-frame {
    z-index: 2;
    height: 390px;
    padding: 10px;
    border-radius: 34px;
    transform: rotate(-4deg) translateX(18px);
}

.iphone-frame {
    z-index: 3;
    height: 410px;
    padding: 11px;
    border-radius: 42px;
    border: 2px solid rgba(255,255,255,0.38);
    transform: rotate(5deg) translateX(-10px);
}

.device-label {
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: var(--slate-700);
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 8px 22px rgba(15,23,42,.12);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.iphone-dynamic-island {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 7;
    width: 76px;
    height: 22px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #020617;
}

.device-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
}

.iphone-frame .device-screen {
    border-radius: 32px;
}

.dashboard-preview-screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 13px 14px;
    background:
        radial-gradient(circle at top left, rgba(255,162,58,.24), transparent 42%),
        linear-gradient(180deg, #fff, #fff7ed);
}

.preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(226,232,240,.84);
    color: var(--slate-800);
    font-size: .72rem;
    font-weight: 900;
}

.preview-card {
    padding: 12px;
    border-radius: 17px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,232,240,.84);
}

.preview-card small,
.preview-stats small {
    display: block;
    color: var(--slate-500);
    font-size: .63rem;
    font-weight: 900;
    text-transform: uppercase;
}

.preview-card strong {
    display: block;
    margin-top: 4px;
    color: var(--slate-900);
    font-size: .92rem;
}

.preview-card span {
    display: inline-flex;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .68rem;
    font-weight: 900;
}

.active-preview {
    box-shadow: 0 12px 26px rgba(22,101,52,0.10);
}

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

.preview-stats div {
    min-width: 0;
    padding: 9px 6px;
    border-radius: 14px;
    background: rgba(248,250,252,.9);
    border: 1px solid rgba(226,232,240,.82);
    text-align: center;
}

.preview-stats strong {
    display: block;
    margin-top: 4px;
    color: var(--slate-900);
    font-size: .72rem;
}

.landing-price-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.landing-price-card {
    min-height: 0;
    gap: 12px;
}

.landing-price-card-top h3 {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 13px 0 0;
    font-size: 1.82rem;
}

.landing-price-card-top h3 span {
    color: var(--slate-500);
    font-size: .88rem;
    letter-spacing: 0;
}

.compact-price-meta {
    grid-template-columns: 1fr 1fr;
}

.compact-price-meta span {
    text-align: center;
}

.landing-plan-btn {
    display: none !important;
}

@media (max-width: 920px) {
    .landing-hero-content-row {
        grid-template-columns: 1fr;
    }

    .landing-device-pair {
        min-height: 390px;
        justify-content: flex-start;
        padding-left: 10px;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .landing-hero-devices {
        padding: 30px 0 20px;
    }

    .landing-hero-devices > h1 {
        margin-bottom: 14px;
    }

    .landing-hero-content-row {
        gap: 18px;
    }

    .landing-device-pair {
        min-height: 330px;
        justify-content: center;
        padding-left: 0;
        transform: scale(.86);
        transform-origin: top center;
        margin-bottom: -44px;
    }

    .device-frame {
        width: 198px;
    }

    .samsung-frame {
        height: 344px;
        transform: rotate(-4deg) translateX(30px);
    }

    .iphone-frame {
        height: 362px;
        transform: rotate(5deg) translateX(-24px);
    }

    .dashboard-preview-screen {
        gap: 8px;
        padding: 26px 11px 12px;
    }

    .preview-card {
        padding: 10px;
    }

    .landing-feature-grid {
        display: none !important;
    }

    .compact-price-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .landing-device-pair {
        transform: scale(.78);
        margin-bottom: -78px;
    }
}


/* ===== Landing Page Dashboard Phones + Single Plans Card Refinement ===== */
.device-label {
    display: none !important;
}

.dashboard-preview-screen {
    justify-content: flex-start;
    text-align: left;
    padding: 18px 12px 13px;
}

.iphone-frame .dashboard-preview-screen {
    padding-top: 38px;
}

.preview-dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
    color: var(--slate-900);
    font-size: .7rem;
    font-weight: 950;
}

.preview-dashboard-topbar strong {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
    color: white;
    font-size: .78rem;
}

.preview-welcome-card {
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,162,58,.22), rgba(255,255,255,.92));
    border: 1px solid rgba(253,186,116,.62);
}

.preview-welcome-card small,
.preview-welcome-card span {
    display: block;
    color: var(--slate-500);
    font-size: .63rem;
    font-weight: 900;
}

.preview-welcome-card strong {
    display: block;
    margin: 3px 0;
    color: var(--slate-900);
    font-size: 1.05rem;
}

.preview-dashboard-section {
    display: grid;
    gap: 8px;
}

.preview-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--slate-800);
    font-size: .67rem;
    font-weight: 950;
}

.preview-section-title b {
    width: 18px;
    height: 18px;
    display: inline-flex;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
}

.preview-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(226,232,240,.86);
}

.preview-plan-card small {
    display: inline-flex;
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: .55rem;
    font-weight: 950;
    text-transform: uppercase;
}

.preview-plan-card strong {
    display: block;
    margin-top: 4px;
    color: var(--slate-900);
    font-size: .84rem;
}

.preview-plan-card > span {
    color: var(--slate-900);
    font-size: .78rem;
    font-weight: 950;
}

.landing-plans-summary-card {
    overflow: hidden;
    padding: 20px;
    border-radius: 28px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(226,232,240,0.86);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10);
}

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

.landing-plans-summary-head h3 {
    margin: 10px 0 0;
    color: var(--slate-900);
    font-size: 1.45rem;
    letter-spacing: -0.04em;
}

.landing-plans-summary-head p {
    max-width: 440px;
    margin: 0;
    color: var(--slate-500);
    font-size: .9rem;
    line-height: 1.45;
    font-weight: 750;
}

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

.landing-plan-row {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,247,237,.62), rgba(248,250,252,.94));
    border: 1px solid rgba(226,232,240,.9);
}

.plan-row-name span {
    display: block;
    color: var(--slate-900);
    font-size: 1rem;
    font-weight: 950;
}

.plan-row-name small,
.plan-row-price small {
    display: block;
    margin-top: 3px;
    color: var(--slate-500);
    font-size: .72rem;
    font-weight: 850;
}

.plan-row-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.plan-row-features span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(226,232,240,.85);
    color: var(--slate-700);
    font-size: .78rem;
    font-weight: 850;
}

.plan-row-price {
    min-width: 108px;
    text-align: right;
}

.plan-row-price strong {
    display: block;
    margin-top: 2px;
    color: var(--slate-900);
    font-size: 1.05rem;
    font-weight: 950;
}

@media (max-width: 680px), (display-mode: standalone) {
    .landing-device-pair {
        transform: scale(.82);
        margin-bottom: -70px;
    }

    .dashboard-preview-screen {
        padding: 15px 10px 11px;
    }

    .iphone-frame .dashboard-preview-screen {
        padding-top: 36px;
    }

    .preview-dashboard-topbar {
        padding: 8px 9px;
    }

    .preview-welcome-card,
    .preview-card,
    .preview-plan-card {
        padding: 9px;
        border-radius: 14px;
    }

    .preview-stats {
        gap: 5px;
    }

    .preview-stats div {
        padding: 7px 4px;
    }

    .preview-card strong,
    .preview-plan-card strong {
        font-size: .76rem;
    }

    .landing-plans-summary-card {
        padding: 15px;
        border-radius: 22px;
    }

    .landing-plans-summary-head {
        display: block;
        margin-bottom: 13px;
    }

    .landing-plans-summary-head h3 {
        font-size: 1.25rem;
    }

    .landing-plans-summary-head p {
        margin-top: 8px;
        font-size: .84rem;
    }

    .landing-plan-list {
        gap: 8px;
    }

    .landing-plan-row {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 12px;
        border-radius: 16px;
    }

    .plan-row-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .plan-row-features span {
        min-height: 32px;
        font-size: .74rem;
    }

    .plan-row-price {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(226,232,240,.85);
        text-align: left;
    }

    .plan-row-price small,
    .plan-row-price strong {
        margin: 0;
    }
}

@media (max-width: 390px) {
    .landing-device-pair {
        transform: scale(.74);
        margin-bottom: -102px;
    }
}


/* ===== Landing Page TV + Laptop + iPhone Device Showcase ===== */
.landing-device-pair {
    display: none !important;
}

.landing-device-showcase {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-tv,
.showcase-laptop,
.showcase-iphone {
    position: absolute;
}

.showcase-tv {
    top: 4px;
    right: 2px;
    width: 360px;
    z-index: 1;
}

.tv-screen {
    min-height: 215px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
    border: 11px solid #111827;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(255,162,58,.28), transparent 42%),
        linear-gradient(135deg, #fff, #fff7ed);
    box-shadow: 0 24px 70px rgba(15,23,42,.20);
}

.tv-wifi-mark {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: white;
    box-shadow: 0 14px 32px rgba(245,158,11,.20);
    font-size: 1.6rem;
}

.tv-screen h3 {
    margin: 10px 0 4px;
    color: var(--slate-900);
    font-size: 1.18rem;
}

.tv-screen p {
    margin: 0;
    color: var(--slate-500);
    font-size: .82rem;
    font-weight: 850;
}

.tv-status-row {
    display: flex;
    gap: 7px;
    margin-top: 13px;
}

.tv-status-row span {
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(226,232,240,.85);
    color: var(--slate-700);
    font-size: .7rem;
    font-weight: 900;
}

.tv-stand {
    width: 116px;
    height: 35px;
    margin: -1px auto 0;
    border-bottom: 13px solid #111827;
    border-left: 31px solid transparent;
    border-right: 31px solid transparent;
}

.showcase-laptop {
    left: 0;
    bottom: 12px;
    width: 390px;
    z-index: 3;
}

.laptop-screen {
    min-height: 238px;
    padding: 14px;
    border: 10px solid #111827;
    border-bottom-width: 16px;
    border-radius: 24px 24px 16px 16px;
    background:
        radial-gradient(circle at top right, rgba(255,162,58,.20), transparent 42%),
        linear-gradient(180deg, #fff, #fff7ed);
    box-shadow: 0 26px 70px rgba(15,23,42,.22);
}

.laptop-base {
    width: 440px;
    height: 20px;
    margin-left: -25px;
    border-radius: 0 0 40px 40px;
    background: linear-gradient(180deg, #475569, #111827);
    box-shadow: 0 18px 34px rgba(15,23,42,.18);
}

.laptop-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.showcase-laptop .preview-welcome-card {
    margin: 10px 0;
}

.showcase-laptop .preview-card {
    min-height: 96px;
}

.showcase-iphone {
    right: 48px;
    bottom: 4px;
    z-index: 4;
    width: 156px;
    height: 314px;
    padding: 9px;
    border-radius: 34px;
    background: #111827;
    border: 2px solid rgba(255,255,255,.42);
    box-shadow: 0 24px 58px rgba(15,23,42,.24);
    transform: rotate(6deg);
}

.showcase-iphone .iphone-dynamic-island {
    top: 18px;
    width: 62px;
    height: 18px;
}

.showcase-iphone .device-screen {
    border-radius: 25px;
}

.showcase-iphone .dashboard-preview-screen {
    gap: 8px;
    padding: 32px 9px 10px;
}

.showcase-iphone .preview-dashboard-topbar {
    padding: 7px 8px;
    font-size: .58rem;
}

.showcase-iphone .preview-dashboard-topbar strong {
    width: 22px;
    height: 22px;
    font-size: .68rem;
}

.showcase-iphone .preview-section-title {
    font-size: .58rem;
}

.showcase-iphone .preview-section-title b {
    width: 14px;
    height: 14px;
}

.showcase-iphone .preview-plan-card {
    padding: 8px;
    gap: 6px;
}

.showcase-iphone .preview-plan-card small {
    font-size: .48rem;
    padding: 3px 5px;
}

.showcase-iphone .preview-plan-card strong {
    font-size: .68rem;
}

.showcase-iphone .preview-plan-card > span {
    font-size: .64rem;
}

@media (max-width: 920px) {
    .landing-device-showcase {
        min-height: 460px;
        justify-content: center;
    }

    .showcase-tv {
        top: 0;
        right: 50%;
        width: 330px;
        transform: translateX(58%);
    }

    .showcase-laptop {
        left: 50%;
        bottom: 18px;
        width: 360px;
        transform: translateX(-60%);
    }

    .laptop-base {
        width: 405px;
        margin-left: -22px;
    }

    .showcase-iphone {
        right: 50%;
        bottom: 4px;
        transform: translateX(126%) rotate(6deg);
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .landing-device-showcase {
        min-height: 380px;
        transform: scale(.86);
        transform-origin: top center;
        margin-bottom: -42px;
    }

    .showcase-tv {
        width: 300px;
        right: 50%;
        transform: translateX(58%);
    }

    .tv-screen {
        min-height: 185px;
        border-width: 9px;
        border-radius: 22px;
    }

    .tv-stand {
        width: 96px;
        height: 28px;
        border-bottom-width: 11px;
        border-left-width: 25px;
        border-right-width: 25px;
    }

    .showcase-laptop {
        width: 322px;
        bottom: 18px;
        transform: translateX(-61%);
    }

    .laptop-screen {
        min-height: 212px;
        padding: 11px;
        border-width: 8px;
        border-bottom-width: 14px;
    }

    .laptop-base {
        width: 362px;
        margin-left: -20px;
    }

    .laptop-dashboard-grid {
        gap: 7px;
    }

    .showcase-laptop .preview-card {
        min-height: 84px;
    }

    .showcase-iphone {
        width: 136px;
        height: 282px;
        right: 50%;
        bottom: 4px;
        transform: translateX(122%) rotate(6deg);
    }
}

@media (max-width: 390px) {
    .landing-device-showcase {
        transform: scale(.78);
        margin-bottom: -84px;
    }
}


/* ===== Landing Page Real Product Devices + Moving Connection Preview ===== */
.product-device-showcase {
    isolation: isolate;
}

.connection-path {
    position: absolute;
    left: 74px;
    right: 42px;
    top: 204px;
    height: 3px;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,162,58,.12), rgba(255,162,58,.72), rgba(0,165,227,.42));
    box-shadow: 0 0 26px rgba(255,162,58,.28);
}

.moving-device-indicator {
    position: absolute;
    left: 260px;
    top: 176px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(253,186,116,.78);
    box-shadow: 0 14px 34px rgba(245,158,11,.24);
    color: var(--slate-800);
    font-size: .72rem;
    font-weight: 950;
    animation: deviceRoam 7.5s ease-in-out infinite;
}

.moving-device-indicator span {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFA23A, #f59e0b);
    color: white;
    box-shadow: 0 0 0 8px rgba(255,162,58,.16);
}

@keyframes deviceRoam {
    0%, 16% {
        transform: translate(110px, -80px) scale(.96);
    }
    38%, 54% {
        transform: translate(-150px, 88px) scale(1);
    }
    76%, 92% {
        transform: translate(174px, 118px) scale(.96);
    }
    100% {
        transform: translate(110px, -80px) scale(.96);
    }
}

.product-tv {
    filter: drop-shadow(0 28px 42px rgba(15,23,42,.20));
}

.product-tv-screen {
    position: relative;
    min-height: 222px;
    overflow: hidden;
    padding: 0;
    border: 12px solid #111827;
    border-radius: 26px;
    background: #050505;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 24px 70px rgba(15,23,42,.24);
}

.product-tv-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(255,255,255,.15), transparent 34%, transparent 72%, rgba(255,255,255,.07));
    mix-blend-mode: screen;
}

.streaming-ui {
    height: 100%;
    min-height: 222px;
    padding: 16px 18px 15px;
    color: white;
    background:
        linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.40)),
        radial-gradient(circle at 78% 34%, rgba(220,38,38,.58), transparent 30%),
        radial-gradient(circle at 62% 76%, rgba(37,99,235,.42), transparent 28%),
        linear-gradient(135deg, #111827, #020617);
}

.streaming-topbar {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: .66rem;
    font-weight: 800;
    opacity: .92;
}

.streaming-topbar strong {
    color: #e50914;
    font-size: 1rem;
    letter-spacing: .05em;
}

.streaming-hero {
    width: 55%;
    margin-top: 20px;
}

.streaming-hero span {
    color: #fca5a5;
    font-size: .62rem;
    font-weight: 950;
    text-transform: uppercase;
}

.streaming-hero h3 {
    margin: 5px 0 4px;
    color: white;
    font-size: 1.34rem;
    letter-spacing: -0.04em;
}

.streaming-hero p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: .72rem;
    line-height: 1.35;
    font-weight: 750;
}

.streaming-hero div {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.streaming-hero b,
.streaming-hero small {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: .62rem;
    font-weight: 950;
}

.streaming-hero b {
    background: white;
    color: #111827;
}

.streaming-hero small {
    background: rgba(255,255,255,.18);
    color: white;
}

.streaming-row {
    position: absolute;
    right: 16px;
    bottom: 14px;
    left: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.streaming-row i {
    min-height: 42px;
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
        linear-gradient(135deg, #7f1d1d, #111827);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.streaming-row i:nth-child(2) {
    background: linear-gradient(135deg, #1d4ed8, #020617);
}

.streaming-row i:nth-child(3) {
    background: linear-gradient(135deg, #7c2d12, #111827);
}

.streaming-row i:nth-child(4) {
    background: linear-gradient(135deg, #065f46, #020617);
}

.tv-neck {
    width: 52px;
    height: 28px;
    margin: -1px auto 0;
    background: linear-gradient(180deg, #334155, #111827);
    border-radius: 0 0 10px 10px;
}

.tv-foot {
    width: 178px;
    height: 13px;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, #475569, #111827);
    box-shadow: 0 12px 22px rgba(15,23,42,.18);
}

.product-laptop {
    filter: drop-shadow(0 28px 42px rgba(15,23,42,.20));
}

.product-laptop-screen {
    border-color: #0f172a;
    border-radius: 26px 26px 14px 14px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        0 26px 70px rgba(15,23,42,.22);
}

.laptop-keyboard {
    width: 390px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 10px 32px 12px;
    margin-top: -2px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border: 1px solid rgba(71,85,105,.30);
}

.laptop-keyboard span {
    height: 5px;
    border-radius: 999px;
    background: rgba(15,23,42,.30);
}

.product-laptop-base {
    height: 16px;
    background: linear-gradient(180deg, #cbd5e1, #64748b 48%, #1e293b);
}

.product-iphone {
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), transparent 22%),
        #111827;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14),
        0 28px 62px rgba(15,23,42,.28);
}

.product-iphone::after {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

@media (max-width: 920px) {
    .connection-path {
        left: 50%;
        right: auto;
        width: 390px;
        transform: translateX(-50%);
    }

    .moving-device-indicator {
        left: 50%;
        top: 176px;
        animation-name: deviceRoamTablet;
    }

    @keyframes deviceRoamTablet {
        0%, 16% {
            transform: translate(95px, -74px) scale(.94);
        }
        38%, 54% {
            transform: translate(-162px, 92px) scale(1);
        }
        76%, 92% {
            transform: translate(116px, 124px) scale(.94);
        }
        100% {
            transform: translate(95px, -74px) scale(.94);
        }
    }

    .laptop-keyboard {
        width: 360px;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .connection-path {
        width: 340px;
        top: 178px;
    }

    .moving-device-indicator {
        top: 148px;
        padding: 7px 9px;
        font-size: .66rem;
        animation-name: deviceRoamMobile;
    }

    .moving-device-indicator span {
        width: 23px;
        height: 23px;
    }

    @keyframes deviceRoamMobile {
        0%, 16% {
            transform: translate(64px, -62px) scale(.88);
        }
        38%, 54% {
            transform: translate(-146px, 88px) scale(.94);
        }
        76%, 92% {
            transform: translate(82px, 122px) scale(.88);
        }
        100% {
            transform: translate(64px, -62px) scale(.88);
        }
    }

    .product-tv-screen {
        min-height: 190px;
        border-width: 10px;
    }

    .streaming-ui {
        min-height: 190px;
        padding: 13px;
    }

    .streaming-topbar {
        gap: 8px;
    }

    .streaming-topbar span {
        display: none;
    }

    .streaming-hero {
        width: 62%;
        margin-top: 16px;
    }

    .streaming-hero h3 {
        font-size: 1.08rem;
    }

    .streaming-row {
        gap: 6px;
        right: 12px;
        left: 12px;
        bottom: 11px;
    }

    .streaming-row i {
        min-height: 34px;
    }

    .laptop-keyboard {
        width: 322px;
        padding-inline: 26px;
    }
}


/* ===== Landing Page Realistic Standalone Device Slideshow ===== */
.product-device-showcase,
.landing-device-showcase,
.connection-path,
.moving-device-indicator {
    display: none !important;
}

.landing-device-slideshow {
    position: relative;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slideshow-stage {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,162,58,.18), transparent 32%),
        radial-gradient(circle at 80% 76%, rgba(0,165,227,.12), transparent 34%),
        rgba(255,255,255,.50);
    border: 1px solid rgba(226,232,240,.72);
    box-shadow: 0 22px 60px rgba(15,23,42,.10);
}

.device-slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 34px 24px 42px;
    opacity: 0;
    transform: translateX(28px) scale(.985);
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.tv-slide {
    animation-name: standaloneSlideTV;
}

.laptop-slide {
    animation-name: standaloneSlideLaptop;
}

.iphone-slide {
    animation-name: standaloneSlideIphone;
}

@keyframes standaloneSlideTV {
    0%, 28% { opacity: 1; transform: translateX(0) scale(1); }
    33%, 94% { opacity: 0; transform: translateX(-34px) scale(.985); }
    95%, 100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes standaloneSlideLaptop {
    0%, 30% { opacity: 0; transform: translateX(34px) scale(.985); }
    35%, 62% { opacity: 1; transform: translateX(0) scale(1); }
    67%, 100% { opacity: 0; transform: translateX(-34px) scale(.985); }
}

@keyframes standaloneSlideIphone {
    0%, 64% { opacity: 0; transform: translateX(34px) scale(.985); }
    69%, 94% { opacity: 1; transform: translateX(0) scale(1); }
    99%, 100% { opacity: 0; transform: translateX(-34px) scale(.985); }
}

.device-caption {
    position: absolute;
    left: 28px;
    top: 22px;
    z-index: 10;
    display: grid;
    gap: 5px;
}

.device-caption span {
    width: fit-content;
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,247,237,.95);
    color: #c2410c;
    border: 1px solid rgba(253,186,116,.72);
    font-size: .7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.device-caption strong {
    max-width: 360px;
    color: var(--slate-800);
    font-size: .92rem;
    line-height: 1.28;
}

.slideshow-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 13px;
}

.slideshow-dots span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(148,163,184,.72);
    animation: slideshowDot 15s ease-in-out infinite;
}

.slideshow-dots span:nth-child(2) {
    animation-delay: 5s;
}

.slideshow-dots span:nth-child(3) {
    animation-delay: 10s;
}

@keyframes slideshowDot {
    0%, 28% {
        width: 28px;
        background: linear-gradient(135deg, #FFA23A, #f59e0b);
    }
    33%, 100% {
        width: 9px;
        background: rgba(148,163,184,.72);
    }
}

/* Samsung QLED 55-inch TV */
.realistic-tv {
    width: min(590px, 92%);
    filter: drop-shadow(0 32px 50px rgba(15,23,42,.20));
}

.tv-brand-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 30px);
    margin: 0 auto 7px;
    color: var(--slate-500);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.realistic-tv-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 12px solid #0b1120;
    border-radius: 18px;
    background: #020617;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 20px 58px rgba(15,23,42,.25);
}

.realistic-tv-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(112deg, rgba(255,255,255,.18), transparent 28%, transparent 72%, rgba(255,255,255,.07)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), transparent 36%);
    mix-blend-mode: screen;
}

.netflix-screen {
    height: 100%;
    padding: 18px 20px;
    color: white;
    background:
        linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.60), rgba(0,0,0,.15)),
        radial-gradient(circle at 72% 36%, rgba(220,38,38,.74), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(37,99,235,.48), transparent 28%),
        linear-gradient(135deg, #09090b, #020617);
}

.netflix-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: .68rem;
    font-weight: 850;
    color: rgba(255,255,255,.78);
}

.netflix-nav strong {
    color: #e50914;
    font-size: 1.08rem;
    letter-spacing: .06em;
}

.netflix-feature {
    width: 54%;
    margin-top: 24px;
}

.netflix-feature small {
    color: #fca5a5;
    font-size: .64rem;
    font-weight: 950;
    text-transform: uppercase;
}

.netflix-feature h3 {
    margin: 6px 0 4px;
    color: white;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    letter-spacing: -0.05em;
}

.netflix-feature p {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: .75rem;
    line-height: 1.42;
    font-weight: 750;
}

.netflix-actions {
    display: flex;
    gap: 8px;
    margin-top: 13px;
}

.netflix-actions b,
.netflix-actions em {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: .66rem;
    font-weight: 950;
    font-style: normal;
}

.netflix-actions b {
    background: white;
    color: #111827;
}

.netflix-actions em {
    background: rgba(255,255,255,.18);
    color: white;
}

.netflix-shelves {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
}

.netflix-shelves i {
    min-height: 52px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
        linear-gradient(135deg, #991b1b, #111827);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.netflix-shelves i:nth-child(2) {
    background: linear-gradient(135deg, #1d4ed8, #020617);
}

.netflix-shelves i:nth-child(3) {
    background: linear-gradient(135deg, #7c2d12, #111827);
}

.netflix-shelves i:nth-child(4) {
    background: linear-gradient(135deg, #065f46, #020617);
}

.netflix-shelves i:nth-child(5) {
    background: linear-gradient(135deg, #6d28d9, #020617);
}

.qled-neck {
    width: 58px;
    height: 34px;
    margin: -1px auto 0;
    background: linear-gradient(180deg, #475569, #111827);
    border-radius: 0 0 13px 13px;
}

.qled-base {
    width: 210px;
    height: 15px;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, #64748b, #111827);
    box-shadow: 0 14px 28px rgba(15,23,42,.18);
}

/* HP EliteBook G3 */
.realistic-laptop {
    width: min(560px, 94%);
    filter: drop-shadow(0 34px 54px rgba(15,23,42,.22));
}

.elitebook-screen-lid {
    position: relative;
    width: 86%;
    margin: 0 auto;
    padding: 12px 12px 16px;
    border-radius: 24px 24px 12px 12px;
    background: linear-gradient(135deg, #1f2937, #0f172a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.elitebook-webcam {
    width: 5px;
    height: 5px;
    margin: 0 auto 7px;
    border-radius: 999px;
    background: #020617;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.elitebook-screen {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 14px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(255,162,58,.18), transparent 40%),
        linear-gradient(180deg, #fff, #fff7ed);
}

.elitebook-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.elitebook-screen .preview-welcome-card {
    margin: 10px 0;
}

.elitebook-body {
    position: relative;
    min-height: 150px;
    margin-top: -2px;
    padding: 15px 52px 20px;
    border-radius: 12px 12px 30px 30px;
    background: linear-gradient(180deg, #d7dde6, #98a3b3 70%, #64748b);
    border: 1px solid rgba(71,85,105,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}

.elitebook-speaker {
    height: 7px;
    margin: 0 auto 11px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(15,23,42,.26) 0 4px, transparent 4px 8px);
}

.elitebook-keyboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
}

.elitebook-keyboard i {
    height: 8px;
    border-radius: 3px;
    background: rgba(15,23,42,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.elitebook-trackpad {
    width: 96px;
    height: 42px;
    margin: 13px auto 0;
    border-radius: 9px;
    background: rgba(226,232,240,.44);
    border: 1px solid rgba(71,85,105,.24);
}

.elitebook-name {
    position: absolute;
    left: 18px;
    bottom: 14px;
    color: rgba(15,23,42,.58);
    font-size: .62rem;
    font-weight: 950;
}

/* iPhone 14 Pro */
.realistic-iphone {
    position: relative;
    width: 230px;
    height: 458px;
    border-radius: 52px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.28), transparent 22%),
        linear-gradient(135deg, #2f3542, #0f172a);
    padding: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset 0 0 0 4px rgba(255,255,255,.04),
        0 34px 70px rgba(15,23,42,.30);
}

.iphone-metal-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 45px;
    background: #020617;
    padding: 13px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.iphone-screen-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: start;
    gap: 10px;
    overflow: hidden;
    border-radius: 34px;
    padding: 42px 12px 14px;
    background:
        radial-gradient(circle at top left, rgba(255,162,58,.24), transparent 44%),
        linear-gradient(180deg, #fff, #fff7ed);
}

.iphone-14-pro .iphone-dynamic-island {
    position: absolute;
    top: 22px;
    left: 50%;
    z-index: 8;
    width: 82px;
    height: 25px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #020617;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.iphone-side-button {
    position: absolute;
    width: 4px;
    border-radius: 999px;
    background: #64748b;
}

.iphone-side-button.left {
    left: -3px;
    top: 112px;
    height: 66px;
}

.iphone-side-button.right {
    right: -3px;
    top: 145px;
    height: 82px;
}

.iphone-screen-content .preview-dashboard-topbar {
    padding: 8px 9px;
    font-size: .66rem;
}

.iphone-screen-content .preview-dashboard-topbar strong {
    width: 24px;
    height: 24px;
    font-size: .72rem;
}

.iphone-screen-content .preview-welcome-card,
.iphone-screen-content .preview-plan-card,
.iphone-screen-content .preview-card {
    padding: 10px;
    border-radius: 16px;
}

.iphone-screen-content .preview-plan-card strong {
    font-size: .78rem;
}

.iphone-screen-content .preview-plan-card > span {
    font-size: .72rem;
}

@media (max-width: 920px) {
    .landing-device-slideshow {
        min-height: 450px;
    }

    .slideshow-stage {
        min-height: 412px;
    }

    .realistic-tv {
        width: min(520px, 94%);
    }

    .realistic-laptop {
        width: min(520px, 94%);
    }

    .realistic-iphone {
        transform: scale(.88);
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .landing-device-slideshow {
        min-height: 405px;
        margin-bottom: -8px;
    }

    .slideshow-stage {
        min-height: 370px;
        border-radius: 24px;
    }

    .device-slide {
        padding: 54px 13px 32px;
    }

    .device-caption {
        left: 16px;
        right: 16px;
        top: 15px;
    }

    .device-caption strong {
        max-width: 100%;
        font-size: .78rem;
    }

    .device-caption span {
        font-size: .62rem;
    }

    .realistic-tv {
        width: 98%;
    }

    .realistic-tv-screen {
        border-width: 9px;
        border-radius: 15px;
    }

    .netflix-screen {
        padding: 12px;
    }

    .netflix-nav {
        gap: 8px;
    }

    .netflix-nav span {
        display: none;
    }

    .netflix-feature {
        width: 66%;
        margin-top: 15px;
    }

    .netflix-feature h3 {
        font-size: 1.08rem;
    }

    .netflix-feature p {
        font-size: .65rem;
    }

    .netflix-shelves {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 6px;
    }

    .netflix-shelves i {
        min-height: 38px;
    }

    .qled-neck {
        height: 24px;
    }

    .qled-base {
        width: 154px;
    }

    .realistic-laptop {
        width: 100%;
    }

    .elitebook-screen-lid {
        width: 94%;
        padding: 9px 9px 12px;
    }

    .elitebook-screen {
        padding: 10px;
    }

    .elitebook-body {
        min-height: 126px;
        padding: 12px 28px 17px;
    }

    .elitebook-keyboard {
        gap: 4px;
    }

    .elitebook-keyboard i {
        height: 7px;
    }

    .elitebook-trackpad {
        width: 82px;
        height: 32px;
        margin-top: 10px;
    }

    .elitebook-name {
        display: none;
    }

    .realistic-iphone {
        transform: scale(.74);
        transform-origin: center;
    }
}

@media (max-width: 390px) {
    .realistic-iphone {
        transform: scale(.68);
    }
}


/* ===== Landing Page Real Device Image Integration ===== */
.real-image-device-slideshow .slideshow-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 20% 16%, rgba(255,162,58,.18), transparent 35%),
        radial-gradient(circle at 78% 82%, rgba(0,165,227,.13), transparent 36%),
        rgba(255,255,255,.58);
}

.real-image-slide {
    padding: 42px 24px 44px;
}

.real-device-image-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.real-device-image-wrap img {
    display: block;
    width: auto;
    height: auto;
    max-width: 94%;
    max-height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 30px 42px rgba(15, 23, 42, 0.22));
    user-select: none;
    -webkit-user-drag: none;
}

.tv-image-wrap img {
    max-width: 96%;
    max-height: 340px;
}

.laptop-image-wrap img {
    max-width: 96%;
    max-height: 335px;
}

.iphone-image-wrap img {
    max-height: 350px;
}

.tv-netflix-overlay {
    position: absolute;
    width: min(76%, 515px);
    aspect-ratio: 16 / 8.2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -49%);
    overflow: hidden;
    border-radius: 4px;
    padding: 14px 16px;
    color: white;
    background:
        linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.56), rgba(0,0,0,.18)),
        radial-gradient(circle at 76% 34%, rgba(220,38,38,.74), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(37,99,235,.42), transparent 26%),
        linear-gradient(135deg, #050505, #020617);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events: none;
}

.netflix-overlay-top {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .6rem;
    font-weight: 850;
    color: rgba(255,255,255,.78);
}

.netflix-overlay-top strong {
    color: #e50914;
    font-size: .98rem;
    letter-spacing: .05em;
}

.netflix-overlay-title {
    width: 54%;
    margin-top: 20px;
    display: grid;
    gap: 3px;
}

.netflix-overlay-title small {
    color: #fca5a5;
    font-size: .58rem;
    font-weight: 950;
    text-transform: uppercase;
}

.netflix-overlay-title b {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.netflix-overlay-title em {
    color: rgba(255,255,255,.76);
    font-size: .62rem;
    font-style: normal;
    font-weight: 750;
}

.netflix-overlay-row {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.netflix-overlay-row i {
    min-height: 33px;
    border-radius: 7px;
    background: linear-gradient(135deg, #991b1b, #111827);
    border: 1px solid rgba(255,255,255,.10);
}

.netflix-overlay-row i:nth-child(2) {
    background: linear-gradient(135deg, #1d4ed8, #020617);
}

.netflix-overlay-row i:nth-child(3) {
    background: linear-gradient(135deg, #7c2d12, #111827);
}

.netflix-overlay-row i:nth-child(4) {
    background: linear-gradient(135deg, #065f46, #020617);
}

.device-floating-card {
    position: absolute;
    right: min(6%, 42px);
    bottom: 38px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 18px 38px rgba(15,23,42,.16);
}

.device-floating-card strong {
    color: var(--slate-900);
    font-size: .95rem;
}

.device-floating-card small {
    color: var(--slate-500);
    font-size: .78rem;
    font-weight: 850;
}

.iphone-dashboard-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 174px;
    height: 347px;
    transform: translate(-50%, -50%);
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 42px 11px 12px;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at top left, rgba(255,162,58,.24), transparent 44%),
        linear-gradient(180deg, #fff, #fff7ed);
    pointer-events: none;
}

.iphone-dashboard-overlay .preview-dashboard-topbar {
    padding: 8px 9px;
    font-size: .64rem;
}

.iphone-dashboard-overlay .preview-dashboard-topbar strong {
    width: 24px;
    height: 24px;
    font-size: .72rem;
}

.iphone-dashboard-overlay .preview-welcome-card,
.iphone-dashboard-overlay .preview-plan-card {
    padding: 10px;
    border-radius: 16px;
}

.iphone-dashboard-overlay .preview-plan-card strong {
    font-size: .76rem;
}

.iphone-dashboard-overlay .preview-plan-card > span {
    font-size: .72rem;
}

@media (max-width: 920px) {
    .real-device-image-wrap img {
        max-height: 310px;
    }

    .tv-netflix-overlay {
        width: min(77%, 455px);
    }

    .iphone-dashboard-overlay {
        width: 154px;
        height: 307px;
        padding-top: 38px;
        border-radius: 30px;
        transform: translate(-50%, -50%) scale(.95);
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .real-image-device-slideshow {
        min-height: 400px;
    }

    .real-image-device-slideshow .slideshow-stage {
        min-height: 365px;
        border-radius: 24px;
    }

    .real-image-slide {
        padding: 58px 12px 28px;
    }

    .real-device-image-wrap img {
        max-width: 98%;
        max-height: 270px;
    }

    .tv-image-wrap img {
        max-height: 235px;
    }

    .laptop-image-wrap img {
        max-height: 245px;
    }

    .iphone-image-wrap img {
        max-height: 292px;
    }

    .tv-netflix-overlay {
        width: min(76%, 330px);
        padding: 10px 11px;
    }

    .netflix-overlay-top span {
        display: none;
    }

    .netflix-overlay-title {
        width: 62%;
        margin-top: 13px;
    }

    .netflix-overlay-title b {
        font-size: .92rem;
    }

    .netflix-overlay-title em {
        font-size: .54rem;
    }

    .netflix-overlay-row {
        left: 10px;
        right: 10px;
        bottom: 9px;
        gap: 5px;
    }

    .netflix-overlay-row i {
        min-height: 24px;
    }

    .device-floating-card {
        right: 14px;
        bottom: 26px;
        padding: 10px 11px;
        border-radius: 15px;
    }

    .device-floating-card strong {
        font-size: .82rem;
    }

    .device-floating-card small {
        font-size: .68rem;
    }

    .iphone-dashboard-overlay {
        width: 124px;
        height: 247px;
        gap: 6px;
        padding: 32px 8px 9px;
        border-radius: 24px;
    }

    .iphone-dashboard-overlay .preview-welcome-card {
        display: none;
    }

    .iphone-dashboard-overlay .preview-dashboard-topbar {
        padding: 6px 7px;
        font-size: .52rem;
    }

    .iphone-dashboard-overlay .preview-dashboard-topbar strong {
        width: 20px;
        height: 20px;
    }

    .iphone-dashboard-overlay .preview-plan-card {
        padding: 7px;
        border-radius: 12px;
    }

    .iphone-dashboard-overlay .preview-plan-card small {
        font-size: .46rem;
    }

    .iphone-dashboard-overlay .preview-plan-card strong,
    .iphone-dashboard-overlay .preview-plan-card > span {
        font-size: .58rem;
    }
}

@media (max-width: 390px) {
    .real-device-image-wrap img {
        max-height: 250px;
    }

    .iphone-image-wrap img {
        max-height: 276px;
    }

    .iphone-dashboard-overlay {
        width: 116px;
        height: 231px;
    }
}


/* ===== Landing Device Image Fix: clean real images, no distortion ===== */
.device-caption-clean span,
.device-caption span {
    display: none !important;
}

.device-caption-clean {
    left: 24px;
    right: 24px;
    top: 20px;
}

.device-caption-clean strong {
    display: inline-flex;
    width: fit-content;
    max-width: min(430px, 100%);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.86);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
    color: var(--slate-800);
    font-size: .82rem;
    font-weight: 900;
}

.real-device-image-wrap img {
    object-fit: contain !important;
    transform: none !important;
}

.tv-image-wrap img {
    max-width: 97% !important;
    max-height: 338px !important;
}

.laptop-image-wrap img {
    max-width: 98% !important;
    max-height: 330px !important;
}

.iphone-image-wrap img {
    display: block !important;
    max-width: 82% !important;
    max-height: 356px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tv-netflix-overlay,
.iphone-dashboard-overlay {
    display: none !important;
}

.tv-floating-card {
    left: 32px;
    right: auto;
    bottom: 40px;
}

.iphone-floating-card {
    right: 38px;
    bottom: 44px;
}

.iphone-slide .real-device-image-wrap {
    min-height: 345px;
}

.iphone-slide .real-device-image-wrap::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,162,58,.22), transparent 66%);
    filter: blur(2px);
}

.iphone-slide .real-device-image-wrap img {
    position: relative;
    z-index: 2;
}

.iphone-slide .iphone-floating-card {
    z-index: 4;
}

@media (max-width: 920px) {
    .iphone-image-wrap img {
        max-height: 330px !important;
    }

    .iphone-floating-card {
        right: 26px;
        bottom: 34px;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .device-caption-clean {
        left: 14px;
        right: 14px;
        top: 14px;
    }

    .device-caption-clean strong {
        font-size: .72rem;
        line-height: 1.25;
        border-radius: 15px;
    }

    .tv-image-wrap img {
        max-height: 235px !important;
    }

    .laptop-image-wrap img {
        max-height: 242px !important;
    }

    .iphone-image-wrap img {
        max-width: 80% !important;
        max-height: 292px !important;
    }

    .tv-floating-card {
        left: 14px;
        bottom: 24px;
    }

    .iphone-floating-card {
        right: 14px;
        bottom: 26px;
    }

    .iphone-slide .real-device-image-wrap {
        min-height: 285px;
    }

    .device-floating-card {
        max-width: 185px;
    }
}

@media (max-width: 390px) {
    .iphone-image-wrap img {
        max-height: 270px !important;
    }
}


/* ===== Landing Device Composite Screens Fix ===== */
.real-device-image-wrap img {
    object-fit: contain !important;
}

.tv-netflix-overlay,
.iphone-dashboard-overlay,
.device-floating-card {
    display: none !important;
}

.tv-image-wrap img {
    max-width: 98% !important;
    max-height: 345px !important;
}

.laptop-image-wrap img {
    max-width: 98% !important;
    max-height: 338px !important;
}

.iphone-image-wrap img {
    max-width: 82% !important;
    max-height: 360px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 680px), (display-mode: standalone) {
    .tv-image-wrap img {
        max-height: 238px !important;
    }

    .laptop-image-wrap img {
        max-height: 248px !important;
    }

    .iphone-image-wrap img {
        max-height: 294px !important;
    }
}

@media (max-width: 390px) {
    .iphone-image-wrap img {
        max-height: 274px !important;
    }
}


/* ===== Landing Uploaded Device Designs Integration ===== */
.uploaded-device-design-slideshow {
    min-height: 470px;
}

.uploaded-device-design-slideshow .uploaded-design-stage {
    min-height: 430px;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,162,58,.16), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(0,165,227,.12), transparent 36%),
        rgba(255,255,255,.58);
    border: 1px solid rgba(226,232,240,.74);
    box-shadow: 0 22px 60px rgba(15,23,42,.10);
}

.uploaded-design-slide {
    padding: 18px 18px 30px !important;
}

.uploaded-design-wrap {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.uploaded-design-wrap img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain !important;
    filter: drop-shadow(0 28px 42px rgba(15, 23, 42, 0.20));
    user-select: none;
    -webkit-user-drag: none;
}

.tv-uploaded-design img {
    max-width: 96%;
    max-height: 355px;
}

.laptop-uploaded-design img {
    max-width: 97%;
    max-height: 360px;
}

.iphone-uploaded-design img {
    max-width: 92%;
    max-height: 386px;
}

.uploaded-device-design-slideshow .device-caption,
.uploaded-device-design-slideshow .device-caption-clean,
.uploaded-device-design-slideshow .real-device-image-wrap,
.uploaded-device-design-slideshow .device-floating-card,
.uploaded-device-design-slideshow .tv-netflix-overlay,
.uploaded-device-design-slideshow .iphone-dashboard-overlay {
    display: none !important;
}

@media (max-width: 920px) {
    .uploaded-device-design-slideshow {
        min-height: 445px;
    }

    .uploaded-device-design-slideshow .uploaded-design-stage {
        min-height: 410px;
    }

    .tv-uploaded-design img,
    .laptop-uploaded-design img {
        max-height: 330px;
    }

    .iphone-uploaded-design img {
        max-height: 360px;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .uploaded-device-design-slideshow {
        min-height: 390px;
        margin-bottom: -4px;
    }

    .uploaded-device-design-slideshow .uploaded-design-stage {
        min-height: 355px;
        border-radius: 24px;
    }

    .uploaded-design-slide {
        padding: 12px 10px 24px !important;
    }

    .tv-uploaded-design img {
        max-width: 108%;
        max-height: 255px;
    }

    .laptop-uploaded-design img {
        max-width: 112%;
        max-height: 260px;
    }

    .iphone-uploaded-design img {
        max-width: 94%;
        max-height: 312px;
    }
}

@media (max-width: 390px) {
    .uploaded-device-design-slideshow .uploaded-design-stage {
        min-height: 338px;
    }

    .tv-uploaded-design img {
        max-height: 236px;
    }

    .laptop-uploaded-design img {
        max-height: 240px;
    }

    .iphone-uploaded-design img {
        max-height: 292px;
    }
}


/* ===== Landing Device Image Card Inscriptions ===== */
.uploaded-device-design-slideshow .uploaded-design-stage {
    position: relative;
}

.image-card-inscription {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 12;
    width: min(620px, calc(100% - 44px));
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 12px 18px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,237,.92));
    border: 1px solid rgba(253,186,116,.70);
    box-shadow:
        0 16px 36px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.70);
    backdrop-filter: blur(8px);
}

.image-card-inscription span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255,162,58,.16);
    color: #c2410c;
    border: 1px solid rgba(251,146,60,.28);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.image-card-inscription strong {
    max-width: 560px;
    color: var(--slate-900);
    font-size: .92rem;
    line-height: 1.34;
    font-weight: 900;
}

.uploaded-device-design-slideshow .uploaded-design-slide {
    padding-top: 88px !important;
}

.uploaded-device-design-slideshow .uploaded-design-wrap {
    align-items: center;
}

.tv-uploaded-design img {
    max-height: 330px;
}

.laptop-uploaded-design img {
    max-height: 335px;
}

.iphone-uploaded-design img {
    max-height: 360px;
}

@media (max-width: 920px) {
    .image-card-inscription {
        top: 16px;
        width: min(560px, calc(100% - 34px));
    }

    .image-card-inscription strong {
        font-size: .84rem;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 86px !important;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .image-card-inscription {
        top: 12px;
        width: calc(100% - 22px);
        padding: 10px 12px;
        border-radius: 18px;
        gap: 5px;
    }

    .image-card-inscription span {
        font-size: .58rem;
        padding: 4px 9px;
    }

    .image-card-inscription strong {
        font-size: .72rem;
        line-height: 1.28;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 84px !important;
    }

    .tv-uploaded-design img {
        max-height: 225px;
    }

    .laptop-uploaded-design img {
        max-height: 232px;
    }

    .iphone-uploaded-design img {
        max-height: 286px;
    }
}

@media (max-width: 390px) {
    .image-card-inscription strong {
        font-size: .68rem;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 82px !important;
    }

    .tv-uploaded-design img {
        max-height: 210px;
    }

    .laptop-uploaded-design img {
        max-height: 218px;
    }

    .iphone-uploaded-design img {
        max-height: 268px;
    }
}


/* ===== Landing Device Slideshow Professional Polish ===== */
.uploaded-device-design-slideshow .uploaded-design-stage {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,162,58,.14), transparent 34%),
        radial-gradient(circle at 82% 80%, rgba(0,165,227,.10), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,247,237,.56));
    border: 1px solid rgba(226,232,240,.90);
    box-shadow:
        0 24px 70px rgba(15,23,42,.11),
        inset 0 1px 0 rgba(255,255,255,.80);
}

.professional-inscription {
    top: 20px;
    width: min(640px, calc(100% - 48px));
    padding: 14px 20px 15px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,245,.94));
    border: 1px solid rgba(226,232,240,.88);
    box-shadow:
        0 18px 42px rgba(15,23,42,.13),
        0 0 0 1px rgba(255,255,255,.45) inset;
    backdrop-filter: blur(12px);
}

.professional-inscription::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFA23A, #f97316);
    box-shadow: 0 0 18px rgba(249,115,22,.22);
}

.professional-inscription span {
    background: rgba(255,162,58,.11);
    color: #b45309;
    border: 1px solid rgba(251,146,60,.30);
    font-size: .64rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.professional-inscription strong {
    color: #0f172a;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

.professional-inscription small {
    display: block;
    max-width: 540px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 780;
}

.uploaded-device-design-slideshow .uploaded-design-slide {
    padding-top: 112px !important;
}

.uploaded-design-wrap img {
    transition: transform .35s ease, filter .35s ease;
}

.uploaded-design-stage:hover .uploaded-design-wrap img {
    transform: translateY(-2px);
    filter: drop-shadow(0 34px 50px rgba(15, 23, 42, 0.22));
}

.tv-uploaded-design img {
    max-height: 318px;
}

.laptop-uploaded-design img {
    max-height: 322px;
}

.iphone-uploaded-design img {
    max-height: 344px;
}

@media (max-width: 920px) {
    .professional-inscription {
        top: 18px;
        width: min(590px, calc(100% - 36px));
        padding: 13px 18px 14px;
    }

    .professional-inscription strong {
        font-size: .92rem;
    }

    .professional-inscription small {
        font-size: .74rem;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 108px !important;
    }

    .tv-uploaded-design img {
        max-height: 300px;
    }

    .laptop-uploaded-design img {
        max-height: 302px;
    }

    .iphone-uploaded-design img {
        max-height: 326px;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .professional-inscription {
        top: 11px;
        width: calc(100% - 20px);
        padding: 10px 12px 11px 18px;
        border-radius: 18px;
        justify-items: start;
        text-align: left;
        gap: 4px;
    }

    .professional-inscription::before {
        left: 9px;
        top: 12px;
        bottom: 12px;
        width: 3px;
    }

    .professional-inscription span {
        font-size: .54rem;
        padding: 4px 8px;
        letter-spacing: .08em;
    }

    .professional-inscription strong {
        font-size: .74rem;
        line-height: 1.16;
    }

    .professional-inscription small {
        font-size: .63rem;
        line-height: 1.24;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 104px !important;
    }

    .tv-uploaded-design img {
        max-height: 206px;
    }

    .laptop-uploaded-design img {
        max-height: 214px;
    }

    .iphone-uploaded-design img {
        max-height: 266px;
    }
}

@media (max-width: 390px) {
    .professional-inscription small {
        display: none;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 78px !important;
    }

    .tv-uploaded-design img {
        max-height: 216px;
    }

    .laptop-uploaded-design img {
        max-height: 224px;
    }

    .iphone-uploaded-design img {
        max-height: 276px;
    }
}


/* ===== Landing Slideshow Sharpness and Clarity Fix ===== */
.uploaded-device-design-slideshow {
    min-height: 560px;
}

.uploaded-device-design-slideshow .uploaded-design-stage {
    min-height: 520px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,162,58,.10), transparent 34%),
        radial-gradient(circle at 82% 80%, rgba(0,165,227,.08), transparent 36%),
        linear-gradient(180deg, #ffffff, #fffaf5);
}

/* Remove scale/filter rendering that can make images and text look soft */
.uploaded-device-design-slideshow .device-slide,
.uploaded-device-design-slideshow .uploaded-design-slide {
    transform: none !important;
    animation-duration: 15s !important;
    animation-timing-function: steps(1, end) !important;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

@keyframes standaloneSlideTV {
    0%, 32% { opacity: 1; transform: none; }
    33%, 100% { opacity: 0; transform: none; }
}

@keyframes standaloneSlideLaptop {
    0%, 32% { opacity: 0; transform: none; }
    33%, 65% { opacity: 1; transform: none; }
    66%, 100% { opacity: 0; transform: none; }
}

@keyframes standaloneSlideIphone {
    0%, 65% { opacity: 0; transform: none; }
    66%, 98% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}

.uploaded-device-design-slideshow .uploaded-design-slide {
    padding-top: 118px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 34px !important;
}

.uploaded-design-wrap img {
    filter: none !important;
    transform: none !important;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Show the uploaded designs larger so dashboard text remains readable */
.tv-uploaded-design img {
    max-width: 98% !important;
    max-height: 392px !important;
}

.laptop-uploaded-design img {
    max-width: 99% !important;
    max-height: 405px !important;
}

.iphone-uploaded-design img {
    max-width: 96% !important;
    max-height: 432px !important;
}

/* Sharper inscription: no blur filter, no transform centering, stronger contrast */
.professional-inscription,
.image-card-inscription {
    left: 24px !important;
    right: 24px !important;
    top: 20px !important;
    width: auto !important;
    transform: none !important;
    justify-items: start !important;
    text-align: left !important;
    padding: 15px 20px 15px 26px !important;
    background: #ffffff !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    box-shadow:
        0 12px 28px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.professional-inscription::before {
    left: 14px !important;
    top: 16px !important;
    bottom: 16px !important;
}

.professional-inscription span,
.image-card-inscription span {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border-color: rgba(251,146,60,.36) !important;
    font-size: .66rem !important;
}

.professional-inscription strong,
.image-card-inscription strong {
    color: #0f172a !important;
    font-size: 1.04rem !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
}

.professional-inscription small,
.image-card-inscription small {
    color: #475569 !important;
    font-size: .80rem !important;
    line-height: 1.32 !important;
    font-weight: 850 !important;
}

.uploaded-design-stage:hover .uploaded-design-wrap img {
    transform: none !important;
    filter: none !important;
}

@media (max-width: 920px) {
    .uploaded-device-design-slideshow {
        min-height: 520px;
    }

    .uploaded-device-design-slideshow .uploaded-design-stage {
        min-height: 485px;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 116px !important;
    }

    .tv-uploaded-design img {
        max-height: 360px !important;
    }

    .laptop-uploaded-design img {
        max-height: 370px !important;
    }

    .iphone-uploaded-design img {
        max-height: 400px !important;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .uploaded-device-design-slideshow {
        min-height: 425px;
    }

    .uploaded-device-design-slideshow .uploaded-design-stage {
        min-height: 392px;
        border-radius: 24px;
    }

    .professional-inscription,
    .image-card-inscription {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        padding: 10px 12px 11px 18px !important;
        border-radius: 16px !important;
    }

    .professional-inscription::before {
        left: 9px !important;
        top: 12px !important;
        bottom: 12px !important;
        width: 3px !important;
    }

    .professional-inscription span,
    .image-card-inscription span {
        font-size: .54rem !important;
        padding: 4px 8px !important;
    }

    .professional-inscription strong,
    .image-card-inscription strong {
        font-size: .76rem !important;
        line-height: 1.15 !important;
    }

    .professional-inscription small,
    .image-card-inscription small {
        font-size: .64rem !important;
        line-height: 1.24 !important;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 106px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .tv-uploaded-design img {
        max-width: 112% !important;
        max-height: 255px !important;
    }

    .laptop-uploaded-design img {
        max-width: 116% !important;
        max-height: 262px !important;
    }

    .iphone-uploaded-design img {
        max-width: 98% !important;
        max-height: 306px !important;
    }
}

@media (max-width: 390px) {
    .uploaded-device-design-slideshow {
        min-height: 395px;
    }

    .uploaded-device-design-slideshow .uploaded-design-stage {
        min-height: 362px;
    }

    .professional-inscription small,
    .image-card-inscription small {
        display: none !important;
    }

    .uploaded-device-design-slideshow .uploaded-design-slide {
        padding-top: 76px !important;
    }

    .tv-uploaded-design img {
        max-height: 248px !important;
    }

    .laptop-uploaded-design img {
        max-height: 252px !important;
    }

    .iphone-uploaded-design img {
        max-height: 292px !important;
    }
}


/* ===== Final Landing Visual Polish Build ===== */
.final-device-showcase {
    min-height: 560px;
}

.final-showcase-stage {
    min-height: 520px !important;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at 13% 16%, rgba(255,162,58,.14), transparent 34%),
        radial-gradient(circle at 86% 84%, rgba(0,165,227,.10), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    border: 1px solid rgba(226,232,240,.95);
    box-shadow:
        0 26px 72px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.86);
}

.final-showcase-slide {
    display: grid !important;
    grid-template-columns: minmax(230px, .72fr) minmax(320px, 1.28fr);
    align-items: center;
    gap: 18px;
    padding: 36px 28px !important;
    transform: none !important;
    animation-timing-function: steps(1, end) !important;
    backface-visibility: hidden;
}

.final-showcase-slide .image-card-inscription,
.final-showcase-slide .professional-inscription,
.final-showcase-slide .device-caption,
.final-showcase-slide .device-caption-clean {
    display: none !important;
}

.final-slide-copy {
    position: relative;
    z-index: 5;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 24px 24px 24px 28px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(226,232,240,.96);
    box-shadow:
        0 18px 44px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.90);
}

.final-slide-copy::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 22px;
    bottom: 22px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFA23A, #f97316);
}

.final-slide-copy span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid rgba(251,146,60,.36);
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.final-slide-copy h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.24rem, 2.1vw, 1.72rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.final-slide-copy p {
    margin: 0;
    color: #475569;
    font-size: .92rem;
    line-height: 1.48;
    font-weight: 760;
}

.final-showcase-slide .uploaded-design-wrap {
    min-width: 0;
    height: 100%;
    display: grid;
    place-items: center;
}

.final-showcase-slide .uploaded-design-wrap img {
    display: block;
    width: auto;
    object-fit: contain !important;
    image-rendering: auto;
    filter: none !important;
    transform: none !important;
    user-select: none;
    -webkit-user-drag: none;
}

.final-showcase-slide .tv-uploaded-design img {
    max-width: 100% !important;
    max-height: 430px !important;
}

.final-showcase-slide .laptop-uploaded-design img {
    max-width: 103% !important;
    max-height: 440px !important;
}

.final-showcase-slide .iphone-uploaded-design img {
    max-width: 100% !important;
    max-height: 455px !important;
}

.final-device-showcase .slideshow-dots {
    margin-top: 14px;
}

.final-device-showcase .slideshow-dots span {
    height: 8px;
    background: rgba(148,163,184,.74);
}

.final-device-showcase .slideshow-dots span:nth-child(1) { animation-delay: 0s; }
.final-device-showcase .slideshow-dots span:nth-child(2) { animation-delay: 5s; }
.final-device-showcase .slideshow-dots span:nth-child(3) { animation-delay: 10s; }

@keyframes slideshowDot {
    0%, 32% {
        width: 30px;
        background: linear-gradient(135deg, #FFA23A, #f97316);
    }
    33%, 100% {
        width: 9px;
        background: rgba(148,163,184,.74);
    }
}

@media (max-width: 920px) {
    .final-device-showcase {
        min-height: 535px;
    }

    .final-showcase-stage {
        min-height: 500px !important;
    }

    .final-showcase-slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 12px;
        padding: 22px 18px 28px !important;
    }

    .final-slide-copy {
        width: 100%;
        max-width: 620px;
        justify-self: center;
        padding: 17px 19px 17px 25px;
        border-radius: 22px;
    }

    .final-slide-copy::before {
        left: 12px;
        top: 16px;
        bottom: 16px;
    }

    .final-slide-copy h3 {
        font-size: 1.18rem;
    }

    .final-slide-copy p {
        font-size: .82rem;
        line-height: 1.34;
    }

    .final-showcase-slide .tv-uploaded-design img {
        max-height: 325px !important;
    }

    .final-showcase-slide .laptop-uploaded-design img {
        max-height: 335px !important;
    }

    .final-showcase-slide .iphone-uploaded-design img {
        max-height: 350px !important;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .final-device-showcase {
        min-height: 445px;
        margin-bottom: 0;
    }

    .final-showcase-stage {
        min-height: 410px !important;
        border-radius: 24px;
    }

    .final-showcase-slide {
        padding: 14px 10px 20px !important;
        gap: 8px;
    }

    .final-slide-copy {
        gap: 5px;
        padding: 11px 12px 11px 18px;
        border-radius: 17px;
    }

    .final-slide-copy::before {
        left: 9px;
        top: 11px;
        bottom: 11px;
        width: 3px;
    }

    .final-slide-copy span {
        font-size: .54rem;
        padding: 4px 8px;
        letter-spacing: .08em;
    }

    .final-slide-copy h3 {
        font-size: .84rem;
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    .final-slide-copy p {
        font-size: .64rem;
        line-height: 1.24;
    }

    .final-showcase-slide .tv-uploaded-design img {
        max-width: 112% !important;
        max-height: 260px !important;
    }

    .final-showcase-slide .laptop-uploaded-design img {
        max-width: 116% !important;
        max-height: 270px !important;
    }

    .final-showcase-slide .iphone-uploaded-design img {
        max-width: 98% !important;
        max-height: 310px !important;
    }
}

@media (max-width: 390px) {
    .final-device-showcase {
        min-height: 410px;
    }

    .final-showcase-stage {
        min-height: 378px !important;
    }

    .final-slide-copy p {
        display: none;
    }

    .final-showcase-slide .tv-uploaded-design img {
        max-height: 258px !important;
    }

    .final-showcase-slide .laptop-uploaded-design img {
        max-height: 262px !important;
    }

    .final-showcase-slide .iphone-uploaded-design img {
        max-height: 300px !important;
    }
}


/* ===== Final Landing Bigger Images + Smaller Text Refinement ===== */
.final-device-showcase {
    min-height: 600px;
}

.final-showcase-stage {
    min-height: 560px !important;
}

.final-showcase-slide {
    grid-template-columns: minmax(205px, .56fr) minmax(390px, 1.44fr);
    gap: 12px;
    padding: 30px 24px !important;
}

.final-slide-copy {
    padding: 18px 18px 18px 24px;
    border-radius: 24px;
    gap: 8px;
}

.final-slide-copy::before {
    left: 12px;
    top: 18px;
    bottom: 18px;
    width: 3px;
}

.final-slide-copy span {
    font-size: .58rem;
    padding: 5px 9px;
    letter-spacing: .09em;
}

.final-slide-copy h3 {
    font-size: clamp(1.02rem, 1.55vw, 1.36rem);
    line-height: 1.10;
    letter-spacing: -0.03em;
}

.final-slide-copy p {
    font-size: .78rem;
    line-height: 1.38;
    font-weight: 740;
}

.final-showcase-slide .tv-uploaded-design img {
    max-width: 108% !important;
    max-height: 500px !important;
}

.final-showcase-slide .laptop-uploaded-design img {
    max-width: 112% !important;
    max-height: 510px !important;
}

.final-showcase-slide .iphone-uploaded-design img {
    max-width: 108% !important;
    max-height: 530px !important;
}

@media (max-width: 920px) {
    .final-device-showcase {
        min-height: 560px;
    }

    .final-showcase-stage {
        min-height: 525px !important;
    }

    .final-showcase-slide {
        gap: 7px;
        padding: 16px 14px 22px !important;
    }

    .final-slide-copy {
        padding: 13px 15px 13px 20px;
        border-radius: 18px;
    }

    .final-slide-copy::before {
        left: 9px;
        top: 14px;
        bottom: 14px;
    }

    .final-slide-copy span {
        font-size: .52rem;
        padding: 4px 8px;
    }

    .final-slide-copy h3 {
        font-size: 1rem;
    }

    .final-slide-copy p {
        font-size: .70rem;
        line-height: 1.28;
    }

    .final-showcase-slide .tv-uploaded-design img {
        max-width: 110% !important;
        max-height: 375px !important;
    }

    .final-showcase-slide .laptop-uploaded-design img {
        max-width: 114% !important;
        max-height: 385px !important;
    }

    .final-showcase-slide .iphone-uploaded-design img {
        max-width: 104% !important;
        max-height: 410px !important;
    }
}

@media (max-width: 680px), (display-mode: standalone) {
    .final-device-showcase {
        min-height: 455px;
    }

    .final-showcase-stage {
        min-height: 420px !important;
    }

    .final-showcase-slide {
        gap: 4px;
        padding: 10px 7px 16px !important;
    }

    .final-slide-copy {
        padding: 9px 10px 9px 16px;
        border-radius: 15px;
        gap: 3px;
    }

    .final-slide-copy::before {
        left: 8px;
        top: 10px;
        bottom: 10px;
        width: 3px;
    }

    .final-slide-copy span {
        font-size: .48rem;
        padding: 3px 7px;
        letter-spacing: .07em;
    }

    .final-slide-copy h3 {
        font-size: .74rem;
        line-height: 1.10;
    }

    .final-slide-copy p {
        font-size: .58rem;
        line-height: 1.18;
    }

    .final-showcase-slide .tv-uploaded-design img {
        max-width: 122% !important;
        max-height: 292px !important;
    }

    .final-showcase-slide .laptop-uploaded-design img {
        max-width: 128% !important;
        max-height: 300px !important;
    }

    .final-showcase-slide .iphone-uploaded-design img {
        max-width: 108% !important;
        max-height: 340px !important;
    }
}

@media (max-width: 390px) {
    .final-device-showcase {
        min-height: 420px;
    }

    .final-showcase-stage {
        min-height: 388px !important;
    }

    .final-slide-copy {
        padding: 8px 9px 8px 15px;
    }

    .final-slide-copy h3 {
        font-size: .70rem;
    }

    .final-slide-copy p {
        display: none;
    }

    .final-showcase-slide .tv-uploaded-design img {
        max-width: 126% !important;
        max-height: 292px !important;
    }

    .final-showcase-slide .laptop-uploaded-design img {
        max-width: 132% !important;
        max-height: 300px !important;
    }

    .final-showcase-slide .iphone-uploaded-design img {
        max-width: 112% !important;
        max-height: 336px !important;
    }
}



/* First-login password modal state fix */
.forced-password-card {
    position: relative;
    padding-top: 24px;
}

.forced-password-close-form {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.forced-password-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease;
}

.forced-password-close:hover,
.forced-password-close:focus-visible {
    background: #e2e8f0;
    transform: scale(1.05);
    outline: 2px solid rgba(255, 162, 58, 0.38);
    outline-offset: 2px;
}

.success-alert {
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
    overflow: hidden;
    max-height: 120px;
}

.success-alert.alert-collapsing {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

/* Router synchronization state */
.dashboard-priority-card.plan-status-pending {
    border-left-color: #f59e0b;
}
.dashboard-priority-card.plan-status-pending h3 {
    color: #92400e;
}

/* =========================================================
   DASHBOARD TENANT NAME ALIGNMENT — DESKTOP WEB
   Keep label and subscriber name together.
   ========================================================= */
@media (min-width: 681px) and (display-mode: browser) {

    .dashboard-tenant-line {
        justify-content: flex-start;
        gap: 10px;
    }

    .dashboard-tenant-line strong {
        text-align: left;
    }

}