/* Page CSS for layouts/service.njk — lifted out of the layout so it is
   cached instead of re-sent inside every HTML response. */
/* "Good to know" cards: zero the trailing paragraph's bottom margin so the card's
       bottom inset matches its top inset (32px), not 48px. Excludes the contact/related sidebar cards. */
    .aside-card:not(.aside-card--contact):not(.aside-card--related) > :last-child { margin-bottom: 0; }
  
    /* Layout-2 columns may shrink below intrinsic width (wide tables scroll inside their wrap). */
    .layout-2 > * { min-width: 0; }
    /* Membership/tier table (page-scoped) */
    .table-wrap { overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; }
    .tier-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
    .tier-table th, .tier-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
    .tier-table tbody tr:last-child td { border-bottom: 0; }
    .tier-table thead th { background: var(--bg-soft); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
    .tier-table tbody tr:hover { background: var(--bg-soft); }
    .tier-table .tier-name { font-weight: 600; color: var(--khonsu-midnight); white-space: nowrap; }
    .tier-popular { display: block; margin-left: 0; margin-top: 4px; color: var(--accent-strong); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; }
    @media (max-width: 640px) {
      .tier-table { min-width: 0; font-size: clamp(0.56rem, 2.6vw, 0.92rem); }
      .tier-table th, .tier-table td { padding: 9px clamp(3px, 1.2vw, 14px); }
      .tier-table thead th { font-size: clamp(0.56rem, 2.2vw, 0.74rem); }
      .tier-table .tier-name { white-space: normal; }
      .tier-popular { font-size: clamp(0.56rem, 2.1vw, 0.72rem); }
    }
    .data-note { font-size: 0.82rem; color: var(--ink-mute); margin-top: 12px; line-height: 1.6; }
    .trust-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; }
    /* Numbered activity cards (page-scoped, gold serif leading-zero counter) */
    .boi-activity-cards { counter-reset: act; }
    .boi-activity-cards .card { counter-increment: act; position: relative; padding-left: 86px; }
    .boi-activity-cards .card::before { content: counter(act, decimal-leading-zero); position: absolute; left: var(--s-5); top: var(--s-6); font-family: var(--font-serif); font-size: 2rem; color: var(--accent-on-light); font-weight: 500; line-height: 1; }
  
/* Breadcrumb nav. The back crumb is matched by class, not by its locale-prefixed href,
   so these rules can live in a stylesheet instead of being templated per page. */
.services-nav{align-items:center}
.services-nav a[aria-current]{background:var(--khonsu-midnight);color:#fff;border-color:var(--khonsu-midnight)}
.services-nav a[aria-current]:hover{background:var(--khonsu-midnight);color:#fff;border-color:var(--khonsu-midnight)}
.services-nav a.services-nav__back{background:none;border:0;padding-left:0;color:var(--ink-mute)}
.services-nav a.services-nav__back::before{content:"\2190";margin-right:.4em}
.services-nav a.services-nav__back:hover{background:none;color:var(--accent-strong)}
.bc-sep{color:var(--line-strong)}
@media(max-width:560px){
  .services-nav a.services-nav__back{flex-basis:100%}
  .services-nav a.services-nav__back + .bc-sep{display:none}
}