/* ============================================================
   SOLUTIONS — /payroll-software-mauritius, /hr-software-mauritius,
   /time-attendance-mauritius. The feature rows reuse
   .feature-row-alt / .feature-icon-circle / .feature-list-check
   from styles.css; this file only adds what they lack.
   ============================================================ */

.solution-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.feature-icon-circle i { font-size: 40px; }

/* The rows' headings are h2 here (the page's h1 is the only heading above
   them), so they need the weight styles.css gives .feature-row-alt h3. */
.feature-row-alt h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ep-ink);
    margin: 6px 0 14px;
}

.feature-row-alt + .feature-row-alt { border-top: 1px solid var(--ep-line); }

.feature-row-alt .row-icon { text-align: center; }

.feature-row-alt a:not(.btn) {
    color: var(--ep-mkt-accent-text);
    font-weight: 600;
}

/* ---------- Related pages ---------- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-card {
    display: block;
    padding: 28px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-xl);
    color: var(--ep-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.related-card:hover {
    border-color: rgba(83, 208, 224, 0.55);
    box-shadow: var(--ep-shadow-md);
    transform: translateY(-3px);
    color: var(--ep-text);
}

.related-card .tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(83, 208, 224, 0.12);
    color: var(--ep-brand-cyan-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.related-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.related-card p {
    color: var(--ep-text-muted);
    font-size: 14.5px;
    margin: 0;
}

@media (max-width: 991.98px) {
    .related-grid { grid-template-columns: 1fr; }

    /* Stacked, the icon sits on a line of its own. Left-aligned, its ring
       (inset -14px) ran past the container's 12px gutter and was clipped at
       the screen edge; centred, it clears it on both sides. */
    .feature-row-alt .row-icon { text-align: center; }
    .feature-row-alt { padding: 48px 0; }
    .feature-row-alt .row-grid { gap: 20px; }
}