/* =============================================================================
 * Regilyze — SERVICES & PRICING PAGE STYLES
 * =============================================================================
 * EXTRACTED FROM services.php ON 2026-08-18 (SXO fix S1).
 *
 * WHY. This was 23.4 KB of CSS inlined into a <style> tag in the page body.
 * Inline CSS is never cached: the browser re-downloads and re-parses every byte
 * of it on each page view. Across the public pages the site was re-sending
 * ~92 KB of uncacheable CSS per homepage view (49.6 KB here, 24.7 KB from
 * includes/header.php, 18 KB from includes/footer.php).
 *
 * As an external file under /css/ it is fetched once and then served from cache
 * for a year — .htaccess already sets `Cache-Control: public, max-age=31536000,
 * immutable` for that directory. The ?v= cache-buster on the <link> means a
 * deploy still invalidates it immediately.
 *
 * ORDER IS LOAD-BEARING. The <link> that replaced the <style> sits at the exact
 * same position in the document, which keeps the cascade identical:
 *     styles.min.css → ux-enhancements.css → rgz-shell.css (all in <head>)
 *       → THIS FILE (page body, top)
 *         → rgz-footer.css (page body, bottom)
 * Do not hoist it into <head>: it must stay after rgz-shell.css, and it must
 * stay before rgz-footer.css. It depends on the :root custom properties that
 * rgz-shell.css defines.
 * =============================================================================
 */
/* CRITICAL: Prevent page-wide horizontal overflow on any device.
   Use `overflow-x: clip` instead of `hidden` because `hidden` breaks
   `position: sticky` on the header. `clip` contains overflow without
   creating a scroll container that breaks ancestor sticky positioning.
   For older browsers without `clip` support, fall back to body-only hidden. */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* ============================================
   SERVICES PAGE - NON-PRICING SECTIONS ONLY
   Pricing cards CSS comes from pricing-cards.php
   ============================================ */

/* Page Header */
.page-header-pricing {
    background: var(--bg-cream);
    padding: 4rem 0 3rem;
    text-align: center;
}
.page-header-pricing .breadcrumb {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.page-header-pricing .breadcrumb a {
    color: var(--accent-orange);
}
.page-header-pricing .breadcrumb a:hover {
    text-decoration: underline;
}
.page-header-pricing h1 {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.page-header-pricing p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}
.page-header-pricing .highlight-text {
    color: var(--accent-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* CH Fee Notice */
.ch-fee-notice {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    border: 2px solid var(--accent-orange);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 2rem auto;
    max-width: 750px;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ch-fee-notice svg {
    width: 28px;
    height: 28px;
    color: var(--accent-orange);
    flex-shrink: 0;
}
.ch-fee-notice p {
    margin: 0;
    color: #9A3412;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.ch-fee-notice strong {
    color: #7C2D12;
}

/* Pricing Section */
.pricing-section {
    padding: 4rem 0 5rem;
    background: var(--bg-white);
}

/* Comparison Table */
.comparison-section {
    padding: 5rem 0;
    background: var(--bg-cream);
}
.comparison-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.comparison-header .section-label {
    display: inline-block;
    background: var(--accent-orange-light);
    color: var(--accent-orange);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.comparison-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.comparison-header p {
    color: var(--text-secondary);
    max-width: 550px;
    margin: 0 auto;
}
.comparison-table-wrapper {
    /* FIX M4 (2026-08-10 mobile audit) — HORIZONTAL SCROLLERS ATE VERTICAL
       SWIPES. This table scrolls sideways on a phone and is wide enough that
       a thumb often lands inside it. With no touch-action the browser had to
       infer the gesture's intent, and near-vertical swipes starting here were
       frequently claimed by the table, so the PAGE did not scroll — the same
       root cause as the SIC-code pill strip (FIX M3b). `pan-x` restricts this
       element to horizontal panning and hands anything vertical to the page;
       `overscroll-behavior-x: contain` stops a sideways fling from triggering
       the browser's back/forward swipe. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    overflow-x: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white);
    min-width: 700px;
}
.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}
.comparison-table thead tr {
    background: var(--bg-navy);
}
.comparison-table th {
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
}
.comparison-table th:first-child {
    text-align: left;
    border-radius: var(--radius-xl) 0 0 0;
}
.comparison-table th:last-child {
    border-radius: 0 var(--radius-xl) 0 0;
}
.comparison-table th small {
    font-weight: 400;
    opacity: 0.8;
    display: block;
    margin-top: 0.25rem;
}
.comparison-table th.highlight-col {
    background: var(--accent-orange);
}
.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
}
.comparison-table tbody tr:nth-child(even) {
    background: var(--bg-cream);
}
.comparison-table tbody tr:hover {
    background: var(--accent-orange-light);
}
.comparison-table td.highlight-col {
    background: rgba(255, 107, 53, 0.06);
}
.comparison-table tbody tr:nth-child(even) td.highlight-col {
    background: rgba(255, 107, 53, 0.1);
}
.check-icon {
    color: var(--accent-green);
    font-size: 1.25rem;
    font-weight: bold;
}
.cross-icon {
    color: var(--border-medium);
    font-size: 1rem;
}

/* ============================================================
   WHY REGILYZE — uses original Complete Business Solutions style
   (white cards on cream bg, orange gradient icons, centered)
   ============================================================ */
.why-regilyze-section {
    padding: 5rem 0;
    background: var(--bg-cream);
}
.why-regilyze-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}
.why-regilyze-header .section-label {
    display: inline-block;
    background: var(--accent-orange-light);
    color: var(--accent-orange);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.why-regilyze-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.why-regilyze-header p {
    color: var(--text-secondary);
    line-height: 1.6;
}
.why-regilyze-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.wr-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all 0.3s var(--ease);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: var(--accent-orange);
}
.wr-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-orange-light) 0%, #FFD4C4 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.wr-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--accent-orange);
}
.wr-card h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
    letter-spacing: -0.01em;
}
.wr-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 1024px) {
    .why-regilyze-grid { grid-template-columns: repeat(2, 1fr); }
    .why-regilyze-section { padding: 4rem 0; }
}
@media (max-width: 768px) {
    .why-regilyze-grid { gap: 1rem; }
    .wr-card { padding: 1.75rem 1.25rem; }
    .wr-icon { width: 52px; height: 52px; }
    .wr-icon svg { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
    .why-regilyze-section { padding: 3rem 0; }
    .why-regilyze-grid { grid-template-columns: 1fr; max-width: 420px; }
    .wr-card { padding: 1.75rem 1.5rem; }
    .why-regilyze-header { padding: 0 1rem; }
    .why-regilyze-header h2 { font-size: 1.625rem; }
}
@media (max-width: 360px) {
    .wr-card h3 { font-size: 1rem; }
    .wr-card p { font-size: 0.875rem; }
}

/* ============================================================
   RENEWAL SECTION (Recurring + One-Time tabs)
   ============================================================ */
.renewal-section {
    padding: 4rem 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
}
.renewal-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.75rem;
}
.renewal-badge {
    display: inline-block;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.renewal-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.renewal-header p {
    color: var(--text-secondary);
}

/* Tab buttons */
.renewal-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 1.5rem;
    flex-wrap: wrap;
}
.rtab {
    flex: 1 1 320px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem 1.25rem;
    background: var(--bg-white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s var(--ease);
    font-family: var(--font-body);
    text-align: left;
}
.rtab:hover {
    border-color: var(--rtab-color, var(--accent-orange));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.rtab.active {
    border-color: var(--rtab-color, var(--accent-orange));
    background: var(--rtab-bg, rgba(255,107,53,0.05));
    box-shadow: 0 8px 24px var(--rtab-shadow, rgba(255,107,53,0.18));
}
.rtab-recurring { --rtab-color: var(--accent-orange); --rtab-bg: rgba(255,107,53,0.05); --rtab-shadow: rgba(255,107,53,0.15); }
.rtab-onetime   { --rtab-color: var(--accent-green);  --rtab-bg: rgba(16,185,129,0.05);  --rtab-shadow: rgba(16,185,129,0.15); }

.rtab-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--rtab-color, var(--accent-orange));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
}
.rtab-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.rtab.active .rtab-icon { transform: scale(1.05); }
.rtab:not(.active) .rtab-icon { background: var(--bg-cream); color: var(--rtab-color, var(--accent-orange)); }
.rtab-label { display: flex; flex-direction: column; gap: 2px; }
.rtab-label strong {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}
.rtab-label small {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Tab panels
   FIX #13 (2026-08-10 audit) — the fade was declared on the BASE class, so it
   ran exactly once, at page load, for both panels (including the hidden one,
   where nobody could see it). Switching tabs only removed the [hidden]
   attribute, which does not restart a finished animation — so the panel the
   user actually asked for appeared with a hard cut. Moving the animation onto
   `.active` means it plays each time a tab is selected. */
.renewal-panel {
    max-width: 920px;
    margin: 0 auto;
}
.renewal-panel.active {
    animation: rpanelFadeIn 0.3s ease;
}
.renewal-panel[hidden] { display: none; }
@keyframes rpanelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .renewal-panel.active { animation: none; }
}

.renewal-table-wrap {
    background: var(--bg-cream);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    overflow-x: auto;
    /* FIX M4 (2026-08-10 mobile audit): same swipe trap as the comparison
       table above — see the full note there. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.renewal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}
.renewal-panel-recurring .renewal-table thead tr { background: var(--accent-orange); }
.renewal-panel-onetime .renewal-table thead tr { background: var(--accent-green); }
.renewal-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-body);
}
.renewal-table th:nth-child(2),
.renewal-table th:nth-child(3) { text-align: center; }
.renewal-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
}
.renewal-table tbody tr:nth-child(even) { background: var(--bg-white); }
.renewal-table tbody tr:hover { background: rgba(255,107,53,0.04); }
.renewal-panel-onetime .renewal-table tbody tr:hover { background: rgba(16,185,129,0.04); }
.renewal-table tbody tr:last-child { border-bottom: none; }
.renewal-table td {
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.renewal-table .rw-name { font-weight: 500; }
.renewal-table .rw-with-plan,
.renewal-table .rw-price { text-align: center; }
.with-plan-text {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}
.with-plan-text.is-free { color: var(--accent-green); }
.rw-with-plan small {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-top: 2px;
    font-weight: 400;
}
.rw-price { font-weight: 600; }

@media (max-width: 1024px) {
    .renewal-section { padding: 3.5rem 0; }
}
@media (max-width: 768px) {
    .renewal-tabs { flex-direction: column; max-width: 420px; padding: 0 1rem; }
    .rtab { width: 100%; max-width: 100%; flex: 1 1 auto; }
    .renewal-header { padding: 0 1rem; }
    .renewal-header h2 { font-size: 1.625rem; }
    .renewal-table-wrap { margin: 0 1rem; }
    .renewal-table th, .renewal-table td { padding: 0.75rem 0.875rem; font-size: 0.8125rem; }
}
@media (max-width: 480px) {
    .rtab { padding: 0.875rem 1rem; gap: 12px; }
    .rtab-icon { width: 36px; height: 36px; }
    .rtab-icon svg { width: 18px; height: 18px; }
    .rtab-label strong { font-size: 0.875rem; }
    .rtab-label small { font-size: 0.6875rem; }
}

/* ============================================================
   ALL SERVICES — uniform blue icons + orange buttons,
   clean cards with no category badge or period pill
   ============================================================ */
.all-services-section {
    padding: 5rem 0;
    background: var(--bg-cream);
}
.all-services-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}
.all-services-header .section-label {
    display: inline-block;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.all-services-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 4vw, 2.125rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.all-services-header p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Category filter pills */
.services-category-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 2.5rem;
    max-width: 1000px;
    padding: 0 1rem;
}
.cat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    font-family: var(--font-body);
    white-space: nowrap;
}
.cat-pill:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: translateY(-1px);
}
.cat-pill.active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
}
.cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
}
.cat-pill.active .cat-count {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Service cards grid */
.all-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem;
}
.srv-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem;
    transition: all 0.3s var(--ease);
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.srv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26,26,27,0.08);
    border-color: var(--accent-orange);
}

/* Uniform light-blue icon — same color for ALL services */
.srv-icon-wrap {
    width: 56px;
    height: 56px;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
}
.srv-card:hover .srv-icon-wrap {
    transform: scale(1.06);
}
.srv-icon-wrap svg {
    width: 26px;
    height: 26px;
    stroke: var(--accent-blue) !important;
    fill: none !important;
}

.srv-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.srv-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
}
/* Distinct price block — clearly visible on every card */
.srv-price-block {
    width: 100%;
    background: linear-gradient(135deg, #FFF8F2 0%, #FFEFE5 100%);
    border: 1px solid #FFE0CC;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.srv-price-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.srv-price-prefix {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-right: 2px;
}
.srv-price-amount {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.srv-price-period {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-weight: 500;
    line-height: 1;
}
.srv-price-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #8C5A3C;
    font-weight: 600;
    line-height: 1.3;
}
.srv-price-note svg {
    width: 12px;
    height: 12px;
    stroke: var(--accent-orange);
    flex-shrink: 0;
}

/* Uniform orange button — same color for ALL services */
.srv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--accent-orange);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s var(--ease);
    font-family: var(--font-body);
    margin-top: auto;
}
.srv-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.35);
    background: var(--accent-orange-hover, #E55B2B);
    color: white;
}
.srv-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.srv-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-tertiary);
}

/* Responsive — same breakpoints as landing page */
@media (max-width: 1024px) {
    .all-services-grid { grid-template-columns: repeat(2, 1fr); }
    .all-services-section { padding: 4rem 0; }
}
@media (max-width: 768px) {
    .all-services-grid { gap: 1rem; }
    .srv-card { padding: 1.75rem 1.5rem; }
    .srv-icon-wrap { width: 52px; height: 52px; }
    .srv-icon-wrap svg { width: 24px; height: 24px; }
    .srv-price-block { padding: 0.625rem 0.875rem; }
    .srv-price-amount { font-size: 1.125rem; }

    /* Mobile filter — clean 2-col grid with All & Company spanning full width */
    .services-category-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        padding: 0 1rem;
    }
    .cat-pill {
        width: 100%;
        padding: 0.5625rem 0.75rem;
        font-size: 0.75rem;
        gap: 4px;
    }
    .cat-pill-all,
    .cat-pill-company {
        grid-column: 1 / -1; /* span full width on its own row */
    }
}
@media (max-width: 640px) {
    .all-services-section { padding: 3rem 0; }
    .all-services-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 1rem;
    }
    .srv-card { padding: 1.5rem 1.25rem; }
    .srv-price-block { padding: 0.625rem 0.875rem; }
}
@media (max-width: 360px) {
    .all-services-header h2 { font-size: 1.5rem; }
    .srv-title { font-size: 1rem; }
    .srv-desc { font-size: 0.8125rem; }
    .srv-price-amount { font-size: 1.0625rem; }
    .srv-price-note { font-size: 0.6875rem; }
    .cat-pill { padding: 0.5rem 0.625rem; font-size: 0.6875rem; }
    .cat-count { min-width: 18px; height: 18px; font-size: 0.625rem; }
}

/* FIX #6 (2026-08-10 audit) — every deep-linked section on this page
   (/services#pricing, #renewals, #addons and the bare anchors #address /
   #tax / #banking) previously landed flush against the top of the viewport,
   which put its heading UNDERNEATH the 70px sticky header. `scroll-margin-top`
   is honoured by native hash jumps and by scrollIntoView() alike.
   A global `html { scroll-padding-top }` was also added in includes/header.php;
   this is the page-level guarantee. */
#pricing, #renewals, #addons, #compare,
#address, #tax, #banking, #services,
.all-services-section, .renewal-section, .pricing-section {
    scroll-margin-top: 8px;   /* FIX R3 — html{scroll-padding-top:90px} adds the header offset */
}
@media (max-width: 768px) {
    #pricing, #renewals, #addons, #compare,
    #address, #tax, #banking, #services,
    .all-services-section, .renewal-section, .pricing-section {
        scroll-margin-top: 8px;
    }
}

/* Mobile scroll hint animation */
@keyframes scrollHint {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(8px); opacity: 1; }
}
.scroll-hint-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
.scroll-hint-mobile svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-orange);
    animation: scrollHint 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
    .scroll-hint-mobile { display: flex; }

    /* Pricing cards spacing */
    .pricing-section .pc-grid {
        gap: 2rem;
    }
}
