/* assets/css/style.css */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom glow effects to declutter HTML */
.shadow-btn-glow {
    box-shadow: 0 0 15px rgba(249,115,22,0.4);
}

.shadow-btn-glow-lg {
    box-shadow: 0 0 20px rgba(249,115,22,0.5);
}

.shadow-panel-glow {
    box-shadow: 0 0 40px rgba(249,115,22,0.15);
}

.shadow-inset-dark {
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

/* ─── Comparison tables: stack into cards on mobile ───────────────────────────
   Below 768px a 4-column table forces horizontal scrolling, which hides the
   competitor columns from most users. Each row becomes a card instead, with
   every value labelled by its column via data-label. Content is not duplicated. */
@media (max-width: 767px) {
    .cmp-table thead {
        display: none;
    }

    .cmp-table,
    .cmp-table tbody,
    .cmp-table tr,
    .cmp-table td {
        display: block;
        width: 100%;
    }

    .cmp-table tr {
        padding: 16px 18px;
    }

    .cmp-table td {
        padding: 0 !important;
        text-align: left !important;
        border: 0 !important;
    }

    .cmp-table td:first-child {
        font-weight: 700;
        color: #ffffff;
        font-size: 15px;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .cmp-table td:not(:first-child) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0 !important;
    }

    .cmp-table td:not(:first-child)::before {
        content: attr(data-label);
        color: #9CA3AF;
        font-size: 13px;
        font-weight: 500;
    }

    /* highlight the product's own column inside each card */
    .cmp-table td.us-col {
        background: rgba(249, 115, 22, 0.06);
        margin: 0 -18px;
        padding: 7px 18px !important;
        border-radius: 6px;
    }
}