/* DataMergeStudio dashboard — uses brand tokens from BRIEFING §6.4. */

:root {
    --dms-main: #1576b4;
    --dms-text: #25282a;
    --dms-bg-alt: #f4f9fe;
    --dms-gradient: linear-gradient(45deg, #193850 0%, #469ddd 100%);
    --dms-border: #e5e7eb;
    --dms-muted: #6b7280;
    --dms-radius: 12px;
    --dms-radius-sm: 6px;
    --dms-radius-pill: 999px;
}

.dms-auth-wrap,
.dms-dashboard-wrap {
    width: 100%;
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dms-text);
    box-sizing: border-box;
}

.dms-auth-wrap *,
.dms-dashboard-wrap * {
    box-sizing: border-box;
}

.dms-auth-card {
    max-width: 440px;
    margin: 0 auto;
}

/* Tab content wrapper — every tab sits inside this so width is identical */
.dms-tab-content,
.dms-tab-content > * {
    width: 100%;
    max-width: 100%;
}

.dms-card {
    width: 100%;
    box-sizing: border-box;
}

.dms-devices-table,
.dms-invoices-table {
    table-layout: auto;
    width: 100%;
}

.dms-invoices-table-action {
    text-align: right;
    white-space: nowrap;
}

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

.dms-card {
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius);
    padding: 28px;
    margin-bottom: 16px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

.dms-auth-title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: var(--dms-text);
}

.dms-form .dms-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 6px;
}

.dms-form input[type="text"],
.dms-form input[type="email"],
.dms-form input[type="password"],
.dms-form select.dms-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    font-size: 15px;
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
}

.dms-form input[type="text"]:focus,
.dms-form input[type="email"]:focus,
.dms-form input[type="password"]:focus,
.dms-form select.dms-input:focus {
    outline: none;
    border-color: var(--dms-main);
    box-shadow: 0 0 0 3px rgba(21, 118, 180, 0.15);
}

.dms-checkbox-label {
    display: block;
    margin: 14px 0;
    font-size: 14px;
}

.dms-checkbox-label input {
    margin-right: 6px;
}

.dms-hint {
    font-size: 13px;
    color: var(--dms-muted);
    margin: 4px 0 0;
}

.dms-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--dms-radius-pill);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.dms-btn-primary,
.dms-btn-primary:link,
.dms-btn-primary:visited {
    background: var(--dms-gradient);
    color: #fff;
    margin-top: 20px;
}

/* Hover: same colour stops, opposite angle, so the gradient appears to
   flip rather than fade. Keeps the white text crisp and signals
   interactivity without dimming the brand colour. `color !important`
   beats theme rules that re-style anchor / button hover (notably
   themes that set `a:hover { color: <accent> }` at a higher
   specificity than this plugin's class selector). */
.dms-btn-primary:hover,
.dms-btn-primary:focus,
.dms-btn-primary:active {
    background: linear-gradient(225deg, #193850 0%, #469ddd 100%);
    color: #fff !important;
}

.dms-error,
.dms-success {
    padding: 12px 14px;
    border-radius: var(--dms-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
}

.dms-error {
    background: #fef2f2;
    color: #991b1b;
}

.dms-success {
    background: #ecfdf5;
    color: #065f46;
}

.dms-auth-links {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--dms-muted);
}

.dms-auth-links a {
    color: var(--dms-main);
    text-decoration: none;
}

.dms-auth-links a:hover {
    text-decoration: underline;
}

/* Dashboard */

.dms-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.dms-dashboard-greeting {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 700;
}

/* Inside subscription-detail-header the wrapper provides bottom spacing
   and the meta paragraph follows immediately, so the greeting itself
   shouldn't add extra space. */
.dms-subscription-detail-header .dms-dashboard-greeting {
    margin-bottom: 0;
}

.dms-dashboard-logout {
    color: var(--dms-muted);
    text-decoration: none;
    font-size: 14px;
}

.dms-dashboard-logout:hover {
    color: var(--dms-main);
}

.dms-dashboard-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.dms-dashboard-navlink {
    color: var(--dms-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.dms-dashboard-navlink:hover {
    color: var(--dms-text);
}

.dms-section {
    margin-bottom: 36px;
}

.dms-section-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dms-text);
}

.dms-subscription-card,
.dms-seat-card {
    background: var(--dms-bg-alt);
}

.dms-card-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.dms-tier-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dms-radius-pill);
    background: var(--dms-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dms-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dms-radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e5e7eb;
    color: var(--dms-muted);
}

.dms-status-active,
.dms-status-trialing {
    background: #d1fae5;
    color: #065f46;
}

.dms-status-past_due {
    background: #fef3c7;
    color: #92400e;
}

.dms-status-cancelled,
.dms-status-expired,
.dms-status-paused {
    background: #fee2e2;
    color: #991b1b;
}

.dms-subscription-meta {
    margin: 4px 0;
    font-size: 14px;
    color: var(--dms-muted);
}

.dms-trial-notice {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--dms-main);
    font-weight: 600;
}

.dms-seat-licence code {
    background: #fff;
    padding: 4px 8px;
    border-radius: var(--dms-radius-sm);
    border: 1px solid var(--dms-border);
    font-family: 'DM Mono', ui-monospace, "SF Mono", monospace;
    font-size: 13px;
}

.dms-empty-state {
    text-align: center;
}

/* Card-as-link (home dashboard subscription/seat cards) */

.dms-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.dms-card-link:hover {
    border-color: var(--dms-main);
    color: inherit;
}

.dms-card-cta {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dms-main);
}

/* Subscription detail */

.dms-dashboard-back {
    color: var(--dms-muted);
    text-decoration: none;
    font-size: 14px;
}

.dms-dashboard-back:hover {
    color: var(--dms-main);
}

.dms-subscription-detail-header {
    margin-bottom: 24px;
}

.dms-subscription-detail-header .dms-card-header {
    margin-bottom: 8px;
}

/* Tabs */

.dms-tabs {
    display: flex;
    border-bottom: 1px solid var(--dms-border);
    margin-bottom: 24px;
}

.dms-tab {
    padding: 12px 20px;
    text-decoration: none;
    color: var(--dms-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.dms-tab:hover {
    color: var(--dms-main);
}

.dms-tab-active {
    color: var(--dms-main);
    border-bottom-color: var(--dms-main);
}

.dms-tab-summary {
    color: var(--dms-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

/* Tables */

.dms-devices-table,
.dms-invoices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dms-devices-table th,
.dms-invoices-table th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--dms-border);
    color: var(--dms-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.dms-devices-table td,
.dms-invoices-table td {
    padding: 14px 8px;
    border-bottom: 1px solid var(--dms-border);
    vertical-align: middle;
}

.dms-devices-table tr:last-child td,
.dms-invoices-table tr:last-child td {
    border-bottom: 0;
}

.dms-device-deactivated {
    opacity: 0.55;
}

.dms-empty-state-inline {
    color: var(--dms-muted);
    font-size: 14px;
    font-style: italic;
}

.dms-seat-block + .dms-seat-block {
    margin-top: 16px;
}

.dms-seat-block-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    /* Long unbroken email strings (e.g. someverylongname@example.com)
       must wrap inside the card on mobile rather than overflow. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}
.dms-seat-block-label {
    color: var(--dms-muted);
    font-weight: 500;
    margin-right: 6px;
}
.dms-seat-block-label::after {
    content: ':';
}
.dms-seat-block-email {
    color: var(--dms-text);
}

/* Inline form / link-button */

.dms-inline-form {
    display: inline;
    margin: 0;
}

.dms-btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--dms-main);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.dms-btn-link:hover {
    color: var(--dms-text);
}

.dms-btn-danger {
    color: #b91c1c;
}

.dms-btn-danger:hover {
    color: #7f1d1d;
}

.dms-btn-danger-outline {
    background: #fff;
    color: #b91c1c;
    border: 1px solid #b91c1c;
    border-radius: var(--dms-radius-pill);
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
}

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

/* Billing */

.dms-card-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.dms-card-text {
    color: var(--dms-muted);
    margin: 0 0 14px;
}

.dms-definition-list {
    margin: 0;
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 10px;
    column-gap: 16px;
}

.dms-definition-list dt {
    color: var(--dms-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dms-definition-list dd {
    margin: 0;
    font-size: 15px;
}

.dms-danger-zone {
    border-color: #fecaca;
}

/* Visually hidden but available to screen readers. Matches WP's screen-reader-text. */
.dms-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pricing page (rendered by [dms_pricing] shortcode) */
.dms-pricing-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

.dms-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Customer-type toggle above the pricing grid. Two equal-width segmented
   buttons; selected state uses the brand colour. */
.dms-pricing-customer-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-pill);
    padding: 4px;
    margin: 0 auto 24px;
    gap: 4px;
}
.dms-pricing-toggle-btn {
    border: 0;
    background: transparent;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dms-muted);
    cursor: pointer;
    border-radius: var(--dms-radius-pill);
    transition: background 0.15s, color 0.15s;
}
.dms-pricing-toggle-btn.is-active {
    background: var(--dms-main);
    color: #fff;
}
.dms-pricing-wrap {
    text-align: initial;
}
.dms-pricing-wrap > .dms-pricing-customer-toggle {
    display: flex;
    width: max-content;
}

/* Wider modal variant for the long Widerrufsbelehrung text. */
.dms-modal-wide {
    max-width: 640px;
}
.dms-modal-fields .dms-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    margin-bottom: 4px;
    font-size: 14px;
}
.dms-modal-fields .dms-label {
    display: block;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 6px;
}
.dms-modal-fields > .dms-label:first-child {
    margin-top: 0;
}
.dms-modal-fields .dms-hint {
    margin: 0;
    text-align: left;
}
.dms-modal-fields {
    margin-bottom: 24px;
}

.dms-pricing-card {
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    /* Anchor for the bestseller badge on the Builder variant. */
    position: relative;
}

.dms-pricing-card-builder {
    border-color: var(--dms-main);
    box-shadow: 0 0 0 1px var(--dms-main);
}

/* Bestseller badge on the Builder pricing card. Matches the colour
   and pill shape of the feature-table bestseller badge so the
   value signal reads consistently between pricing and comparison
   surfaces. Positioned top-right with a slight overhang above the
   card so it pops out as an applied "label". */
.dms-pricing-bestseller-badge {
    position: absolute;
    top: -12px;
    right: 18px;
    background: #35d1ad;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

@media (max-width: 720px) {
    .dms-pricing-bestseller-badge {
        right: 12px;
    }
}

.dms-pricing-tier-name {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dms-text);
}

.dms-pricing-tier-desc {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--dms-muted);
    min-height: 42px;
}

.dms-pricing-price {
    margin: 0 0 20px;
    padding: 14px 0;
    border-top: 1px solid var(--dms-border);
    border-bottom: 1px solid var(--dms-border);
}

.dms-pricing-price-amount {
    /* inline-block (not block) so the /month suffix can sit beside the
       amount instead of dropping to a new line. The VAT span below stays
       display:block, so the visual stacking is preserved. */
    display: inline-block;
    font-size: 28px;
    font-weight: 700;
    color: var(--dms-text);
    line-height: 1.1;
}

.dms-pricing-price-suffix {
    /* "/month" — sits inline next to the amount in monthly mode, empty
       (and therefore zero-width) in yearly mode. */
    display: inline;
    font-size: 16px;
    font-weight: 500;
    color: var(--dms-muted);
    margin-left: 2px;
}

.dms-pricing-price-vat {
    display: block;
    font-size: 12px;
    color: var(--dms-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Yearly ⇄ Monthly view toggle — sits centred below the pricing grid. */
.dms-pricing-display-toggle {
    text-align: center;
    margin: 12px 0 0;
}
.dms-pricing-display-toggle-btn {
    background: none;
    border: 0;
    padding: 6px 12px;
    color: var(--dms-link, #1576b4);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dms-pricing-display-toggle-btn:hover,
.dms-pricing-display-toggle-btn:focus-visible {
    text-decoration: none;
    color: var(--dms-text);
    outline: none;
}

.dms-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.dms-pricing-features li {
    padding: 6px 0 6px 22px;
    position: relative;
    font-size: 14px;
}

.dms-pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--dms-main);
    font-weight: 700;
}

/* Inline live per-seat price tacked onto the first Agency feature
   bullet ("2+ seats (€30.00 per seat)"). Muted to read as a parenthetical
   detail, not a competing value claim. */
.dms-pricing-agency-perseat-inline {
    color: var(--dms-muted);
    font-size: 13px;
    margin-left: 4px;
}

.dms-pricing-quantity {
    margin: 0 0 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dms-pricing-qty-input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    font-size: 14px;
}

/* Savings badge next to the Agency-tier seat input. Mint-teal matches
   the feature table's bestseller badge so the "value signal" reads
   consistently across the pricing surface. */
.dms-pricing-savings-badge {
    /* inline-block (not inline-flex) so the whitespace between "Save"
       and the dynamic %-span isn't stripped by flex layout — flex
       items eat trailing whitespace in text nodes, which caused
       "Save14%" on the rendered badge. The badge has no flex children
       that needed inline-flex anyway. */
    display: inline-block;
    padding: 3px 10px;
    background: #35d1ad;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.dms-pricing-savings-note {
    margin: -10px 0 16px;
    font-size: 11px;
    color: var(--dms-muted);
    font-style: italic;
}

.dms-pricing-buy-btn {
    width: 100%;
    text-align: center;
    margin-top: 0;
}

.dms-pricing-footnote {
    text-align: center;
    font-size: 13px;
    color: var(--dms-muted);
    margin-top: 16px;
}

/* Post-checkout "your subscription is processing" notice. Friendly tone,
   not error-style: light brand background, brand border-left bar, gentle
   loading hint via the spinner. Auto-dismisses after the page reloads. */
.dms-processing-notice {
    background: var(--dms-bg-alt);
    border: 1px solid var(--dms-border);
    border-left: 4px solid var(--dms-main);
    border-radius: var(--dms-radius-sm);
    padding: 14px 18px;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 14px;
    color: var(--dms-text);
    position: relative;
    padding-left: 46px;
}
.dms-processing-notice::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--dms-main);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dms-spin 0.9s linear infinite;
}
@keyframes dms-spin {
    to { transform: rotate(360deg); }
}
.dms-processing-notice strong {
    font-weight: 600;
}
.dms-processing-notice .dms-btn-link {
    margin-left: auto;
}
.dms-processing-notice .dms-processing-msg {
    flex-basis: 100%;
}

/* Subscription-card "Manage" CTA aligned to the right edge */
.dms-card-cta-right {
    text-align: right;
    margin-top: 12px;
}

/* Confirm modal (Add/Remove seat). Backdrop covers the viewport; the
   inner panel is centered, max ~520px wide, with comfortable padding. */
.dms-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.dms-modal-backdrop[hidden] {
    display: none;
}
.dms-modal {
    background: #fff;
    border-radius: var(--dms-radius);
    max-width: 520px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.dms-modal-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--dms-text);
}
.dms-modal-body {
    margin: 0 0 16px;
    color: var(--dms-muted);
    font-size: 14px;
}
.dms-modal-error {
    margin: 0 0 16px;
}
.dms-modal-confirm-row {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--dms-bg-alt);
    border-radius: var(--dms-radius-sm);
}
.dms-modal-confirm-row .dms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
}
.dms-modal-checkbox {
    margin-top: 2px;
    flex: 0 0 auto;
}
.dms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.dms-modal-actions .dms-btn,
.dms-modal-actions .dms-btn-primary {
    margin-top: 0;
}

/* -----------------------------------------------------------------
   Downloads page redesign — 3D packshot aside + tidied form
   ----------------------------------------------------------------- */

.dms-card .dl-layout {
    display: flex;
    align-items: stretch;
    gap: 32px;
}
.dms-card .dl-content {
    flex: 1 1 auto;
    min-width: 0;
}
.dms-card .dl-content .dms-card-title {
    text-align: left;
    margin-bottom: 28px;
}

/* Packshot aside — 3D software-box mockup */
.dms-card .dl-packshot {
    flex: 0 0 252px;
    align-self: stretch;
    margin: -28px 0 -28px -28px;
    border-radius: 11px 0 0 11px;
    background: linear-gradient(165deg, #eef6fd 0%, #d3e7f8 54%, #bfdcf3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.dms-card .dl-packshot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 72% at 50% 14%, rgba(255, 255, 255, 0.62), transparent 60%);
    pointer-events: none;
}
.dms-card .dl-box-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dms-card .dl-box-scene {
    position: relative;
    z-index: 1;
    perspective: 1500px;
}
.dms-card .dl-box {
    position: relative;
    width: 158px;
    height: 212px;
    transform-style: preserve-3d;
    transform: rotateX(-5deg) rotateY(-27deg);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.dms-card .dl-box__face {
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
}
.dms-card .dl-box__front {
    width: 158px;
    height: 212px;
    margin-left: -79px;
    margin-top: -106px;
    transform: translateZ(24px);
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55),
                0 20px 32px rgba(15, 60, 100, 0.42);
}
.dms-card .dl-box__side {
    width: 48px;
    height: 212px;
    margin-left: -24px;
    margin-top: -106px;
    background: linear-gradient(180deg, #15527e, #0e3a5b);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dms-card .dl-box__side--right { transform: rotateY(90deg)  translateZ(79px); }
.dms-card .dl-box__side--left  { transform: rotateY(-90deg) translateZ(79px); }
.dms-card .dl-box__side span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.92;
}
.dms-card .dl-box__top {
    width: 158px;
    height: 48px;
    margin-left: -79px;
    margin-top: -24px;
    background: linear-gradient(180deg, #c4e1f5, #9cc8ec);
    transform: rotateX(90deg) translateZ(106px);
}

/* Cover artwork on the box front */
.dms-card .dl-cover-top {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #ffffff 0%, #e9f3fb 80%);
}
.dms-card .dl-cover-top img {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 8px 14px rgba(21, 76, 128, 0.32));
}
.dms-card .dl-ripples {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
.dms-card .dl-ripple {
    position: absolute;
    width: 74px;
    height: 74px;
    border: 2px solid rgba(21, 118, 180, 0.4);
    border-radius: 50%;
    opacity: 0;
    animation: dl-ripple 3.6s ease-out infinite;
}
.dms-card .dl-ripple:nth-child(2) { animation-delay: 1.2s; }
.dms-card .dl-ripple:nth-child(3) { animation-delay: 2.4s; }
@keyframes dl-ripple {
    0%   { transform: scale(0.45); opacity: 0; }
    18%  { opacity: 0.55; }
    100% { transform: scale(2.7);  opacity: 0; }
}
.dms-card .dl-cover-bottom {
    background: var(--dms-gradient);
    color: #fff;
    padding: 13px 10px 15px;
    text-align: center;
}
.dms-card .dl-cover-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.dms-card .dl-cover-sub {
    margin-top: 4px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

@media (max-width: 680px) {
    .dms-card .dl-layout { flex-direction: column; gap: 0; }
    .dms-card .dl-packshot {
        flex: 0 0 auto;
        margin: -28px -28px 22px;
        border-radius: 11px 11px 0 0;
        padding: 34px 0;
    }
}

/* Form interior — scoped to [data-dms-downloads] so the redesign
   doesn't leak into other dms-form instances. */
.dms-form[data-dms-downloads] { display: block; text-align: left; }
.dms-form[data-dms-downloads] .dl-version {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dms-form[data-dms-downloads] .dl-version-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dms-form[data-dms-downloads] .dl-field-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dms-text);
    letter-spacing: -0.01em;
}

/* Beta toggle as a proper switch */
.dms-form[data-dms-downloads] .dl-beta-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--dms-muted);
    cursor: pointer;
    user-select: none;
}
.dms-form[data-dms-downloads] .dl-beta-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.dms-form[data-dms-downloads] .dl-beta-track {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 21px;
    border-radius: 999px;
    background: #d2d9e0;
    transition: background 0.18s ease;
}
.dms-form[data-dms-downloads] .dl-beta-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.28);
    transition: transform 0.18s ease;
}
.dms-form[data-dms-downloads] .dl-beta-toggle input:checked + .dl-beta-track {
    background: var(--dms-main);
}
.dms-form[data-dms-downloads] .dl-beta-toggle input:checked + .dl-beta-track .dl-beta-thumb {
    transform: translateX(15px);
}
.dms-form[data-dms-downloads] .dl-beta-toggle input:focus-visible + .dl-beta-track {
    box-shadow: 0 0 0 3px rgba(21, 118, 180, 0.25);
}

/* Version select with custom chevron */
.dms-form[data-dms-downloads] .dl-select-wrap { position: relative; }
.dms-form[data-dms-downloads] select[data-dms-release-select] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 14px 46px 14px 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--dms-text);
    font-family: inherit;
    border: 1px solid var(--dms-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dms-form[data-dms-downloads] select[data-dms-release-select]:hover  { border-color: #bcc7d2; }
.dms-form[data-dms-downloads] select[data-dms-release-select]:focus  {
    outline: none;
    border-color: var(--dms-main);
    box-shadow: 0 0 0 3px rgba(21, 118, 180, 0.15);
}
.dms-form[data-dms-downloads] .dl-select-wrap::after {
    content: "";
    position: absolute;
    right: 17px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--dms-muted);
    border-bottom: 2px solid var(--dms-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Meta links row (Release notes + Requirements) */
.dms-form[data-dms-downloads] .dl-meta-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.dms-form[data-dms-downloads] .dl-meta-links .dl-notes { margin: 0; }
.dms-form[data-dms-downloads] .dl-notes {
    margin: 2px 0 0;
    font-size: 13px;
}
.dms-form[data-dms-downloads] .dl-notes a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dms-main);
    font-weight: 600;
    text-decoration: none;
}
.dms-form[data-dms-downloads] .dl-notes a:hover { text-decoration: underline; }
/* Requirements / info link — reusable across downloads page form +
   pricing page footer (any .dl-req-link). */
.dl-req-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dms-main);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
}
.dl-req-link:hover { text-decoration: underline; }
.dl-req-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* Pricing page — Requirements link centred below the footnote. */
.dms-pricing-requirements {
    text-align: center;
    margin: 14px 0 0;
}

/* Terms acceptance grouped into one tidy block */
.dms-form[data-dms-downloads] .dl-terms {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 0;
    padding: 15px 16px;
    background: var(--dms-bg-alt);
    border: 1px solid #dceaf6;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dms-text);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.dms-form[data-dms-downloads] .dl-terms:hover { border-color: #bcd9f1; }
.dms-form[data-dms-downloads] .dl-terms input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--dms-main);
    cursor: pointer;
}
.dms-form[data-dms-downloads] .dl-terms a {
    color: var(--dms-main);
    font-weight: 600;
    text-decoration: none;
}
.dms-form[data-dms-downloads] .dl-terms a:hover { text-decoration: underline; }
.dms-form[data-dms-downloads] .dl-terms-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dms-muted);
}
.dms-form[data-dms-downloads] .dl-terms-already {
    margin: 22px 0 0;
    padding: 15px 16px;
    background: var(--dms-bg-alt);
    border: 1px solid #dceaf6;
    border-radius: 10px;
    font-size: 14px;
    color: var(--dms-muted);
}

/* Download CTA — full-width, app-store feel */
.dms-form[data-dms-downloads] .dl-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 20px 0 0;
    padding: 15px 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(21, 118, 180, 0.26);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.dms-form[data-dms-downloads] .dl-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(21, 118, 180, 0.32);
}
.dms-form[data-dms-downloads] .dl-submit:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(21, 118, 180, 0.26);
}
.dms-form[data-dms-downloads] .dl-submit .dl-icon {
    transition: transform 0.18s ease;
}
.dms-form[data-dms-downloads] .dl-submit:hover .dl-icon {
    transform: translateY(2px);
}

/* Requirements modal list (built-in fallback) */
.dl-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dl-req-list li {
    display: flex;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dms-border);
    font-size: 14px;
    color: var(--dms-text);
}
.dl-req-list li:last-child { border-bottom: 0; }
.dl-req-list .dl-req-label {
    flex: 0 0 132px;
    color: var(--dms-muted);
    font-weight: 600;
}

/* Requirements modal — admin-provided WP page content. Light typography
   reset so the page's blocks/markup feels in-house. `text-align: left`
   defeats themes that centre everything inside .dms-modal. */
.dl-req-content {
    color: var(--dms-text);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
.dl-req-content :first-child { margin-top: 0; }
.dl-req-content :last-child  { margin-bottom: 0; }
.dl-req-content h1,
.dl-req-content h2,
.dl-req-content h3,
.dl-req-content h4 {
    margin: 18px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dms-text);
    text-align: left;
}
.dl-req-content h1 { font-size: 20px; }
.dl-req-content h2 { font-size: 18px; }
.dl-req-content p  { margin: 0 0 10px; text-align: left; }
.dl-req-content ul,
.dl-req-content ol { margin: 0 0 10px; padding-left: 20px; text-align: left; }
.dl-req-content li { margin: 4px 0; text-align: left; }

/* When the requirements content comes from a WP page we render no
   modal title bar (the page provides its own heading) — instead the
   close × floats over the top-right corner of the body. */
.dms-modal-close-floating {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}
.dms-modal { position: relative; }

/* Release-notes modal — wider variant of .dms-modal that hosts a
   sandboxed iframe of the appcast's releaseNotesLink. Generous interior
   padding so the iframed HTML doesn't crash into the modal edges. */
.dms-modal-release-notes {
    max-width: 760px;
    padding: 28px 28px 24px;
}
.dms-modal-release-notes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 12px;
}
.dms-modal-release-notes iframe {
    display: block;
    width: 100%;
    height: 60vh;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: #fff;
}
.dms-modal-close-x {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--dms-muted);
    border-radius: 4px;
}
.dms-modal-close-x:hover {
    background: #f3f4f6;
    color: var(--dms-text);
}

/* Adjust seat count card: keep + Add seat and − Remove seat on the same
   baseline. .dms-btn-primary has a global margin-top:20px that pushes
   the Add button below the Remove button — neutralise it inside this
   wrapper so they align. */
.dms-seat-quantity-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}
.dms-seat-quantity-controls .dms-btn,
.dms-seat-quantity-controls .dms-btn-primary {
    margin-top: 0;
}

/* Icon-only button (e.g. licence key copy). Square hit target, subtle
   hover, picks up the brand colour on focus / hover. */
.dms-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: #fff;
    color: var(--dms-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1;
}
.dms-icon-btn:hover,
.dms-icon-btn:focus {
    color: var(--dms-main);
    border-color: var(--dms-main);
}
.dms-icon-btn svg {
    display: block;
}

/* Licence key + copy button row layout */
.dms-seat-licence {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dms-licence-key {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ---------- Mobile-only responsive layout ---------- */
@media (max-width: 640px) {
    /* Tabs scroll horizontally only when they don't fit. Setting
       overflow-y:hidden explicitly stops browsers from auto-promoting
       overflow-y to auto (which it does whenever overflow-x is set),
       which would otherwise show a permanent vertical scrollbar. */
    .dms-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .dms-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Licence key truncates so it doesn't blow out the card width */
    .dms-licence-key {
        max-width: 60%;
    }

    /* Billing definition-list: stack each dt above its dd. The whole card
       already has a border (.dms-card), and there's only one dl per
       subscription, so per-pair borders would be visual noise. */
    .dms-definition-list {
        display: block;
    }
    .dms-definition-list dt {
        display: block;
        margin-top: 14px;
    }
    .dms-definition-list dd {
        display: block;
        margin: 2px 0 0 0;
    }
    .dms-definition-list dt:first-child {
        margin-top: 0;
    }

    /* Tables collapse into stacked, bordered cards. Hide the <thead> and
       use each cell's data-label attribute as the in-row caption. Applies
       to invoices, devices, seats — anywhere a .dms-devices-table or
       .dms-invoices-table is rendered. */
    .dms-invoices-table thead,
    .dms-devices-table thead {
        display: none;
    }
    .dms-invoices-table,
    .dms-invoices-table tbody,
    .dms-invoices-table tr,
    .dms-invoices-table td,
    .dms-devices-table,
    .dms-devices-table tbody,
    .dms-devices-table tr,
    .dms-devices-table td {
        display: block;
        width: 100%;
    }
    .dms-invoices-table tr,
    .dms-devices-table tr {
        border: 1px solid var(--dms-border);
        border-radius: var(--dms-radius-sm);
        margin-bottom: 12px;
        padding: 8px 12px;
    }
    .dms-invoices-table td,
    .dms-devices-table td {
        padding: 6px 0;
        border: 0;
    }
    .dms-invoices-table td[data-label]::before,
    .dms-devices-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: var(--dms-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }
}

/* ---------- AI tab chart filter ----------
   Compact form (date inputs, pill preset link, Apply button) sitting in
   the top-right of the Usage card. Native <input type="date"> is heavily
   browser-styled by default; this matches the rest of the dashboard's
   border / radius / focus tokens without trying to fully restyle the
   calendar dropdown itself (which Chrome and Safari render natively). */
.dms-ai-chart-filter {
    font-family: inherit;
}
.dms-ai-chart-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dms-muted);
    margin: 0;
}
.dms-ai-chart-filter input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--dms-text);
    background: #fff;
    line-height: 1.3;
    /* Reset Safari's default native chrome around the field. */
    -webkit-appearance: none;
    appearance: none;
    min-width: 140px;
    box-sizing: border-box;
}
.dms-ai-chart-filter input[type="date"]:focus {
    outline: none;
    border-color: var(--dms-main);
    box-shadow: 0 0 0 3px rgba(21, 118, 180, 0.15);
}
/* Tint the WebKit native calendar picker icon to the brand colour
   instead of the default black — keeps it visible on the white field
   and ties it into the rest of the chrome. */
.dms-ai-chart-filter input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: invert(35%) sepia(75%) saturate(800%) hue-rotate(180deg);
}
.dms-ai-chart-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* Apply button — match the rest of the filter's compact sizing
   (the global .dms-btn pill is 12px×28px which is too big alongside
   13px form fields). */
.dms-ai-chart-filter .dms-btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* ---------- Filter popover (used by the AI usage chart) ----------
   The toggle button is a compact pill; the popover anchors to its
   right edge and opens below. Closes on outside click + ESC (via the
   shared dms-popover.js handler inlined per template). */
.dms-filter-wrap {
    position: relative;
    display: inline-block;
}
.dms-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-pill);
    background: #fff;
    color: var(--dms-text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
    transition: border-color .15s, background .15s;
}
.dms-filter-toggle:hover,
.dms-filter-toggle:focus {
    outline: none;
    border-color: var(--dms-main);
    background: var(--dms-bg-alt);
}
.dms-filter-toggle svg {
    flex: 0 0 auto;
    color: var(--dms-muted);
}
.dms-filter-toggle-active {
    border-color: var(--dms-main);
    color: var(--dms-main);
}
.dms-filter-toggle-active svg {
    color: var(--dms-main);
}
.dms-filter-badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dms-main);
    margin-left: 2px;
}
.dms-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 260px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.dms-popover[hidden] {
    display: none;
}
.dms-popover-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin-bottom: 12px;
}
.dms-popover-row:last-of-type {
    margin-bottom: 0;
}
.dms-popover-row label {
    display: flex;
    flex-direction: column;
    flex: 1 1 110px;
    gap: 4px;
    font-size: 13px;
    color: var(--dms-muted);
}
/* Apply (left) + preset link (right) on the same row, vertical-
   centered so the link sits on the button's text baseline. */
.dms-popover-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dms-popover-actions .dms-btn {
    padding: 8px 18px;
    font-size: 13px;
    margin: 0;
}
/* "Reset" link rendered as a plain text link in brand colour, not a
   button — keeps the popover's primary action visually unambiguous
   (the Apply button) while still letting the user wipe a custom date
   range with one click. Only rendered when a custom range is active;
   the no-op state (already on the default) is suppressed in markup
   rather than disabled-styled. */
.dms-filter-preset-link {
    color: var(--dms-main);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dms-filter-preset-link:hover {
    text-decoration: none;
}

/* Quick-select chips at the top of the filter popover. Each chip
   is just an anchor to the same tab URL with ?from/?to query
   args set, so picking a preset round-trips through a normal
   page load — no JS needed and the URL stays bookmarkable. */
.dms-popover-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.dms-popover-preset {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: #f4f9fe;
    color: var(--dms-main);
    border: 1px solid #d8e5f0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.dms-popover-preset:hover,
.dms-popover-preset:focus {
    /* Soft hover: just tighten the border to brand blue and deepen
       the existing tint slightly. The previous full-inverse hover
       (brand-blue fill, white text) read as a *selected* state,
       which confused customers into thinking they had to click
       again to confirm. Border-only is the gentlest interactive
       affordance that still signals clickability. */
    background: #e6f1fb;
    border-color: var(--dms-main);
    color: var(--dms-main);
    text-decoration: none;
    outline: none;
}

/* =========================================================
 * Public [dms_feature_table] comparison-table styling.
 * Embedded with the rest of the dashboard CSS so the shortcode
 * doesn't need a separate stylesheet enqueue — same enqueue
 * already loads on every page that uses any DMS shortcode.
 * ========================================================= */
.dms-feature-table {
    width: 100%;
    /* `separate` (not `collapse`) is required for sticky thead to work
       cleanly — collapsed borders aren't repainted while a row sticks,
       leaving artefacts as the body scrolls underneath. Use
       border-bottom on cells instead and 0 spacing to mimic collapsed
       look. */
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0;
    font-family: inherit;
}
.dms-feature-table th,
.dms-feature-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--dms-border);
    vertical-align: middle;
}
.dms-feature-table thead th {
    font-weight: 600;
    color: var(--dms-text);
    /* Solid white background (was the pale bg-alt) ensures the sticky
       header completely masks body rows scrolling underneath — the
       previous tint was too light, so check/cross icons in body cells
       could appear to "bleed through" while scrolling. */
    background: #ffffff;
    background-clip: padding-box;
    border-bottom: 2px solid var(--dms-border);
    /* Header sticks to viewport top so customers keep their bearings
       while scrolling a long feature list. The badge above the
       highlighted tier rides along because it's positioned inside
       the sticky th. */
    position: sticky;
    top: 0;
    z-index: 5;
}
.dms-feature-table .dms-ft-tier-col {
    width: 110px;
    text-align: center;
}
.dms-feature-table .dms-ft-feature-name {
    font-weight: 500;
    color: var(--dms-text);
}
.dms-feature-table .dms-ft-cell {
    text-align: center;
}
.dms-feature-table .dms-ft-category-row th {
    background: linear-gradient(45deg, #f4f9fe 0%, #e6f1fb 100%);
    color: var(--dms-main);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 14px;
}
.dms-feature-table .dms-ft-cell-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dms-main);
}
.dms-feature-table .dms-ft-cell-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff3c61;
}
.dms-feature-table .dms-ft-text {
    font-weight: 500;
    color: var(--dms-text);
}
.dms-feature-table .dms-ft-missing {
    color: #d1d5db;
}

/* ---------- Help text icon + hover popover ---------- */
.dms-feature-table .dms-ft-help-wrap {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: baseline;
}
.dms-feature-table .dms-ft-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    background: var(--dms-main);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
}
.dms-feature-table .dms-ft-help-trigger:focus {
    outline: 2px solid var(--dms-main);
    outline-offset: 2px;
}
.dms-feature-table .dms-ft-help-popover {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    /* Anchored to the trigger's left edge rather than centered so the
       popover never overflows past the table's leftmost column when
       the feature name is short. Always extends rightward into the
       wider tier columns. */
    left: -4px;
    z-index: 20;
    width: 260px;
    padding: 10px 12px;
    background: #ffffff;
    color: var(--dms-text);
    border: 1px solid var(--dms-border);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    transition: opacity 120ms ease;
    pointer-events: none;
}
/* Tiny arrow pointing down at the trigger (which sits roughly 4–14px
   in from the popover's left edge given the left:-4px anchor + the
   18px trigger width). */
.dms-feature-table .dms-ft-help-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 10px;
    border: 6px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 0 var(--dms-border));
}
.dms-feature-table .dms-ft-help-popover p {
    margin: 0 0 6px 0;
}
.dms-feature-table .dms-ft-help-popover p:last-child {
    margin-bottom: 0;
}
.dms-feature-table .dms-ft-help-popover a {
    color: var(--dms-main);
}
.dms-feature-table .dms-ft-help-wrap:hover .dms-ft-help-popover,
.dms-feature-table .dms-ft-help-wrap:focus-within .dms-ft-help-popover {
    visibility: visible;
    opacity: 1;
}

/* ---------- Highlighted tier column + Bestseller badge ---------- */
/* The whole column is wrapped in a continuous 1px badge-coloured
   outline: every cell gets left + right borders so they stack
   into vertical rails, the header cell adds the top border, and
   the CTA row cell adds the bottom border. With
   border-collapse: separate the per-cell borders meet without
   overlap and read as one box around the entire column. */
.dms-feature-table .dms-ft-col-highlight {
    background: #e5f0fa;
    /* No `position: relative` here — it would override
       `position: sticky` on the header cell (higher selector
       specificity). The bestseller badge is `position: absolute`
       and anchors against the sticky thead th just fine because
       sticky also establishes a containing block for absolutely
       positioned descendants. */
    border-left: 1px solid #35d1ad;
    border-right: 1px solid #35d1ad;
}
.dms-feature-table thead th.dms-ft-col-highlight {
    /* Solid, opaque background on the sticky highlighted header so
       icons in body cells can't visually bleed through during
       scroll. Brand-tinted and a touch deeper than body cells to
       reinforce the column identity. Rounded top corners close the
       outline into a card silhouette at the column's top. */
    background: #cfe4f5;
    color: var(--dms-main);
    border-top: 1px solid #35d1ad;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.dms-feature-table .dms-ft-bestseller-badge {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #35d1ad;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 6; /* above the sticky header it sits on. */
}
.dms-feature-table thead th .dms-ft-tier-label {
    display: inline-block;
}

/* ---------- CTA row ---------- */
.dms-feature-table .dms-ft-cta-row td {
    text-align: center;
    padding: 22px 14px;
    border-bottom: none;
    background: transparent;
}
.dms-feature-table .dms-ft-cta-row .dms-ft-col-highlight {
    /* Match the rest of the highlighted column so the bottom of the
       "card" stays continuous with the rows above. Without this the
       transparent CTA-row tds would punch through the column
       highlight at the very bottom. The bottom border + rounded
       bottom corners close the outline into a card silhouette. */
    background: #e5f0fa;
    border-bottom: 1px solid #35d1ad;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dms-feature-table .dms-ft-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--dms-main);
    border: 1px solid var(--dms-main);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.dms-feature-table .dms-ft-cta-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
}
.dms-feature-table .dms-ft-cta-btn:hover,
.dms-feature-table .dms-ft-cta-btn:focus {
    background: var(--dms-main);
    color: #fff;
}
.dms-feature-table .dms-ft-cta-btn-primary {
    background: var(--dms-main);
    color: #fff;
}
.dms-feature-table .dms-ft-cta-btn-primary:hover,
.dms-feature-table .dms-ft-cta-btn-primary:focus {
    background: #11618f;
    color: #fff;
}

/* Wrapper around the table. Only activates horizontal scrolling on
   mobile, so the sticky thead behaviour on desktop isn't broken by
   the wrapper becoming a scroll container (any non-visible overflow
   on an ancestor turns it into the sticky scrollport, even when no
   scrollbar appears). On narrow viewports the table gets a min-width
   that keeps the columns readable rather than letting the browser
   crush them to fit.

   If sticky still isn't engaging on your site, the cause is a parent
   container in the surrounding theme/page-builder markup (commonly a
   Breakdance/Elementor/Bricks section or column) with overflow set.
   Fix that in the builder rather than promoting THIS wrapper to a
   scroll container — page-level scroll is the better UX for long
   tables on variable mobile viewport heights. */
.dms-feature-table-scroll {
    /* No-op on desktop. */
}

@media (max-width: 640px) {
    .dms-feature-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Explicit touch-action: themes or sliders sometimes set
           touch-action: pan-y on body/wrappers, which silently kills
           horizontal swipe on descendants. pan-x pan-y explicitly
           re-allows the horizontal swipe gesture; pinch-zoom is
           already excluded (which is correct for a scroll container). */
        touch-action: pan-x pan-y;
        /* Subtle thin scrollbar so the swipe affordance is visible to
           customers who don't try a swipe gesture first. Firefox uses
           scrollbar-width, WebKit/Blink need the pseudo-elements. */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    }
    .dms-feature-table-scroll::-webkit-scrollbar {
        height: 6px;
    }
    .dms-feature-table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .dms-feature-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 3px;
    }
    .dms-feature-table {
        min-width: 560px;
    }
    .dms-feature-table th,
    .dms-feature-table td {
        padding: 10px 8px;
        font-size: 14px;
    }
    .dms-feature-table .dms-ft-tier-col {
        width: auto;
    }
    .dms-feature-table .dms-ft-bestseller-badge {
        font-size: 10px;
        padding: 2px 8px;
        top: -20px;
    }
}