/* Solutions pages — shared styles for the hub (solutions.html) and the four
   dedicated solution pages (solutions/real-estate.html, employment.html,
   suretyships.html, compliance-certificates.html).

   Restructure note (2026-08-03): solutions.html used to be one page with
   three anchor-linked sections and a scrollspy sub-nav. It's now a slim hub
   plus four standalone pages, so the anchor-jump sub-nav (.uc-nav) and its
   scroll-margin-top offset are gone — there's nothing to jump to within a
   single page any more. Everything else below (doc-window clause type, the
   FAQ accordion, the card+checklist layout) carries forward unchanged and is
   now shared across five pages instead of duplicated per page. New rules
   added at the bottom for the hub's card grid, the compliance-certificates
   stat callouts and its B-BBEE/Electrical-CoC toggle.

   (home.css owns an identical .section-head rule for index.html — duplicated
   here under the same name since none of these pages load home.css.) */

/* ---- Section intros ---- */
.section-head{ max-width: 620px; margin-bottom: var(--space-8); }

/* ---- Hero / closing-CTA button row + note (same spec as home.css —
   duplicated because these pages don't load home.css) ---- */
.hero__cta{ margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__note{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.8); }

/* ---- Doc-window clause typography (same spec as the homepage hero doc) ---- */
.uc-doc__clause-num{ font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.uc-doc__clause{ font-size: 12.5px; line-height: 1.7; color: var(--ink-700); margin-top: 6px; }

.uc-doc__party{ margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--ink-100); }
.uc-doc__party-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 8px; }
.uc-doc__party-meta{ display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

/* ---- Real estate: centred showcase + quick-benefit chip row ---- */
.uc-perks{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-7); }

/* ---- Suretyships (and compliance-certificates): a card holding a doc-window
   beside a checklist ---- */
.uc-card{ padding: var(--space-8); margin-top: var(--space-8); }
.uc-card__grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-8); align-items: center; }
.uc-checklist{ display: flex; flex-direction: column; gap: var(--space-5); }
.uc-checklist li{ display: flex; align-items: flex-start; gap: 12px; }
.uc-checklist svg{ width: 20px; height: 20px; color: var(--success-700); flex-shrink: 0; margin-top: 3px; }
.uc-checklist strong{ display: block; font-size: var(--text-body); font-weight: 600; color: var(--ink-900); }
.uc-checklist span{ display: block; font-size: var(--text-small); color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 860px){
  .uc-card__grid{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px){
  .uc-card{ padding: var(--space-5); }
}

/* ---- FAQ accordion ---- */
.faq-list{ max-width: 760px; margin-inline: auto; }
.faq-item{ border-bottom: var(--border-hairline); }
.faq-item:first-child{ border-top: var(--border-hairline); }
.faq-item__trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5); text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); color: var(--ink-900);
}
.faq-item__chevron{ flex-shrink: 0; color: var(--blue-600); transition: transform var(--dur-base) var(--ease-out); }
.faq-item.is-open .faq-item__chevron{ transform: rotate(180deg); }
.faq-item__panel{ padding-bottom: var(--space-5); max-width: 620px; }
.faq-item__panel p{ color: var(--text-secondary); }
.faq-item__panel p a{ color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.faq-item__panel p a:hover{ color: var(--blue-700); }

/* ---- Solutions hub — 4-up card grid (solutions.html), plus its icon-chip
   reused for the 4-card "pattern" grid on compliance-certificates.html.
   Mirrors .tool-tile__icon's visual language (components.css) at a larger
   size appropriate for a primary nav card rather than a utility tile. ---- */
.solution-card{ display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.solution-card__icon{
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.solution-card__icon svg{ width: 24px; height: 24px; }
.solution-card__desc{ color: var(--text-secondary); font-size: var(--text-small); flex-grow: 1; }

/* ---- Stat card — a light-surface stat callout. .fact-tile (components.css)
   hardcodes white text for the dark trust band on index.html, so the B-BBEE
   fraud stats here (on a white/tint surface) get their own safe version:
   blue-600 on white and ink-700 on white are both already-established
   sitewide pairings (.eyebrow, .link-arrow, .text-secondary), not new ones. ---- */
.stat-card{ padding: var(--space-5); background: var(--white); border: var(--border-hairline); border-radius: var(--radius-lg); text-align: center; }
.stat-card__num{ display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); color: var(--blue-600); letter-spacing: var(--tracking-h); line-height: 1.15; }
.stat-card__label{ display: block; margin-top: var(--space-2); font-size: var(--text-small); color: var(--text-secondary); }

/* ---- Toggle tabs — compliance-certificates.html's switch between the
   B-BBEE and Electrical CoC worked examples. Active state reuses the
   white-on-blue-600 pairing already established by .step__num
   (components.css), not a new combination. ---- */
.toggle-tabs{
  display: inline-flex; flex-wrap: wrap; gap: var(--space-2);
  background: var(--ink-50); border: var(--border-hairline); border-radius: var(--radius-full);
  padding: var(--space-2); margin-bottom: var(--space-8);
}
.toggle-tabs__btn{
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-small); color: var(--text-secondary);
  padding: .65rem 1.3rem; border-radius: var(--radius-full);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.toggle-tabs__btn:hover{ color: var(--ink-900); }
.toggle-tabs__btn.is-active{ background: var(--blue-600); color: var(--white); }

/* ---- Callout — the honesty/framing note on compliance-certificates.html.
   Warning-toned: reuses the AA-safe warning-700-on-warning-50 pairing that
   tokens.css already documents as safe, rather than inventing a new one. ---- */
.callout{ border-left: 3px solid var(--warning-500); background: var(--warning-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-5) var(--space-6); }
.callout p{ color: var(--ink-900); }
.callout p + p{ margin-top: var(--space-3); }
.callout strong{ color: var(--warning-700); }