/* =============================================================================================
   /resource-augmentation/ — uses the shared inner-page components (ind-d-* in tokens.css:
   hero + intro, split, black numbered cards, grey icon cards, bordered grid, CTA band).
   Only the few page-specific pieces live here.
   ============================================================================================= */
.ra-container { width: min(1250px, 100% - 48px); margin-inline: auto; }

/* grey icon cards (same look as "Industry Outcomes") — feature and hiring-model cards */
.ra-cards { display: grid; gap: 24px; margin: 60px 0 0; padding: 0; list-style: none; }
.ra-cards--5 { grid-template-columns: repeat(5, 1fr); }
.ra-cards--3 { grid-template-columns: repeat(3, 1fr); }
.ra-cards li { display: flex; flex-direction: column; gap: 40px; padding: 32px; background: #f8f9fa; }
.ra-cards li > div { display: flex; flex-direction: column; gap: 12px; }
html body.system-page main .ra-cards h3 { margin: 0; }
html body.system-page main .ra-cards p { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: #404040; }
html body.system-page main .ra-cards--3 p { font-size: 18px; line-height: 26px; }
.ra-cards .ind-d-icon svg { width: 32px; height: 32px; }

/* black "How it works" section: four cards across, centred button */
html body.system-page main .ra-steps { grid-template-columns: repeat(4, 1fr); }
html body.system-page main .ra-steps h3 { margin-top: 56px; }
.ra-center { display: flex; justify-content: center; margin: 48px 0 0; }
html body.system-page main .ind-d-why .ra-center { color: inherit; }

/* hero tag row */
.ind-d-intro-copy > ul { margin: 8px 0 0; padding: 0; list-style: none; }

/* Discover Experts: tabs + bordered grid */
.ra-tabs { display: flex; border: 1px solid #000; background: #fff; }
.ra-tabs button { padding: 14px 28px; background: #fff; color: #000; font: inherit; font-size: 16px; line-height: 22px; font-weight: 600; cursor: pointer; border: 0; transition: background var(--dur-fast, 200ms) var(--ease, ease), color var(--dur-fast, 200ms) var(--ease, ease); }
.ra-tabs button + button { border-left: 1px solid #000; }
.ra-tabs button[aria-pressed="true"] { background: #000; color: #fff; }
.ra-tabs button::before, .ra-tabs button::after { content: none !important; display: none !important; }
html body.system-page main .ra-experts .ind-d-head-row { margin-bottom: 40px; }
html body.system-page main .ra-experts .ra-logos { margin-top: 0; background: #fff; }
html body.system-page main .ra-experts .ra-logos[hidden] { display: none; }
.ra-logos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 100%; color: inherit; transition: background var(--dur-fast, 200ms) var(--ease, ease); }
.ra-logos a:hover { background: #f8f9fa; }
.ra-logo-icon { display: grid; place-items: center; width: 48px; height: 48px; color: #06b22d; }
.ra-logo-icon svg, .ra-logo-icon img { width: 40px; height: 40px; max-width: none; max-height: none; object-fit: contain; }

/* split with a button underneath the text */
.ra-split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* FAQ */
.ra-faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.ra-faq-grid h2 { margin: 0; }

@media (max-width: 1100px) {
  .ra-cards--5 { grid-template-columns: repeat(3, 1fr); }
  html body.system-page main .ra-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ra-cards--3 { grid-template-columns: 1fr; }
  .ra-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .ra-cards { margin-top: 40px; }
  html body.system-page main .ra-experts .ind-d-head-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .ra-cards--5 { grid-template-columns: 1fr; }
  html body.system-page main .ra-steps { grid-template-columns: 1fr; }
  .ra-tabs { width: 100%; }
  .ra-tabs button { flex: 1; padding-inline: 8px; }
}

/* experts grid: tiles stretch to fill the container whatever the count */
html body.system-page main .ra-experts .ra-logos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ra-logos li { height: 150px; }
@media (max-width: 700px) { html body.system-page main .ra-experts .ra-logos { grid-template-columns: repeat(2, 1fr); } }

/* Hiring models: text on the left (sticky), coloured cards on the right that stack up as you scroll */
.ra-models-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.ra-models-copy { position: sticky; top: calc(var(--header-h, 78px) + 40px); display: flex; flex-direction: column; gap: 16px; }
.ra-models-copy h2 { margin: 0; }
html body.system-page main .ra-models-copy p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.ra-models-stack { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0 0 120px; list-style: none; }
.ra-model { position: sticky; top: calc(var(--header-h, 78px) + 40px + var(--i) * 28px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 380px; padding: 32px; box-shadow: 0 -12px 24px -16px rgba(0, 0, 0, .18); }
.ra-model--1 { background: #e0ffe7; color: #000; }
.ra-model--2 { background: #000; color: #fff; }
.ra-model--3 { background: #06b22d; color: #fff; }
.ra-model-icon { display: block; align-self: flex-start; }
.ra-model--1 .ra-model-icon { color: #06b22d; }
.ra-model--2 .ra-model-icon { color: #06b22d; }
.ra-model--3 .ra-model-icon { color: #fff; }
.ra-model-icon svg { display: block; width: 40px; height: 40px; }
html body.system-page main .ra-model h3 { margin: 0; font-size: 52px !important; line-height: 60px !important; font-weight: 400 !important; letter-spacing: -1px !important; color: inherit; }
html body.system-page main .ra-model p { margin: 0; max-width: 520px; font-size: 18px; line-height: 26px; font-weight: 500; color: inherit; }
.ra-model h3 { margin-top: auto; }
@media (max-width: 900px) {
  .ra-models-grid { grid-template-columns: 1fr; gap: 32px; }
  .ra-models-copy, .ra-model { position: static; }
  .ra-models-stack { padding-bottom: 0; }
  .ra-model { min-height: 300px; }
  html body.system-page main .ra-model h3 { font-size: 36px !important; line-height: 42px !important; }
}
/* title on top (like the home stat cards), icon in the corner, text at the bottom */
.ra-model { top: calc(var(--header-h, 78px) + 40px + var(--i) * 104px); position: sticky; }
.ra-model h3 { margin-top: 0; }
.ra-model-icon { position: absolute; top: 32px; right: 32px; }
@media (max-width: 900px) { .ra-model { position: relative; top: auto; } }
html body.system-page main section.ra-models .ra-models-stack li.ra-model h3 { font-size: 52px !important; line-height: 60px !important; font-weight: 400 !important; letter-spacing: -1px !important; }
@media (max-width: 900px) { html body.system-page main section.ra-models .ra-models-stack li.ra-model h3 { font-size: 36px !important; line-height: 42px !important; } }

/* Discover Experts: the three groups listed one under another (no tabs) */
.ra-group + .ra-group { margin-top: 56px; }
html body.system-page main .ra-experts .ra-group h3 { margin: 0 0 24px; }
.ra-logos li > a > span:last-child { text-align: center; }

/* Experts: separate white cards, all the same size (6 per row, shorter groups left-aligned) */
html body.system-page main .ra-experts .ra-logos { grid-template-columns: repeat(6, 1fr); gap: 24px; border: 0; background: none; }
html body.system-page main .ra-experts .ra-logos li { height: 170px; padding: 0; background: #fff; border: 0; }
.ra-logos a { padding: 24px 16px; }
.ra-logos a:hover { background: #fff; box-shadow: inset 0 0 0 1px #000; }
@media (max-width: 1100px) { html body.system-page main .ra-experts .ra-logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { html body.system-page main .ra-experts .ra-logos { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 700px) { html body.system-page main .ra-experts .ra-logos { grid-template-columns: repeat(2, 1fr); } }
.ra-logos a { justify-content: flex-start; padding-top: 40px; }