/*
 * page-utilities.v1.css
 * Utility classes that replace the inline style attributes on /features/ and /pricing/ (SLS-R1).
 * Mobile-first: every rule below is width-independent, so the base rules apply from 320px up and no
 * min-width override is needed yet. Add any wider-screen adjustment in a @media (min-width: ...) block.
 * Selectors pair the utility with its base component class so they win over the component defaults,
 * as the inline styles they replace did. Versioned by filename: edit = new filename (v2), never in place.
 */

/* Centred mockup footer line */
.mockup-foot.mockup-foot--center { text-align: center; }

/* Centred call-to-action row inside a mockup */
.mockup-cta-row { text-align: center; margin-bottom: 8px; }

/* Small centred meta line inside a mockup */
.mockup-meta.mockup-meta--center-sm { text-align: center; font-size: 12px; }

/* Bar heights for the payroll cost bar chart mockup */
.mockup-bar.mockup-bar--h65 { height: 65%; }
.mockup-bar.mockup-bar--h67 { height: 67%; }
.mockup-bar.mockup-bar--h71 { height: 71%; }
.mockup-bar.mockup-bar--h75 { height: 75%; }
.mockup-bar.mockup-bar--h96 { height: 96%; }

/* Notification icon colours in the mobile mockup */
.mockup-notification-icon.mockup-notification-icon--orange { color: var(--orange); }
.mockup-notification-icon.mockup-notification-icon--red { color: #C0392B; }
.mockup-notification-icon.mockup-notification-icon--navy { color: var(--navy); }

/* Adjustment amount colours */
.mockup-adjustment-amount.mockup-adjustment-amount--orange { color: var(--orange); }
.mockup-adjustment-amount.mockup-adjustment-amount--muted { color: var(--muted); }

/* Inline orange text */
.text-orange { color: var(--orange); }

/* Danger badge */
.mockup-badge.mockup-badge--danger { background: #FCE5E0; color: #C0392B; }

/* Pricing comparison table: group header rows (Security, Mobile, ...) */
body.pricing .pricing-comparison tbody th.comparison-group,
body.pricing .pricing-comparison tbody tr:hover th.comparison-group {
    background: var(--section-bg);
    color: var(--navy);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px;
}