@import url("https://fonts.googleapis.com/css?family=PT+Sans:300,400,700|Open+Sans:300,400,700");

      :root {
        --font: PT Sans;
        --alt-font: Open Sans;
        --accent-color: #009cde;
        --secondary-color: #3f9c35;
        --link-color: #009cde;
        --accent-highlight-color: #00425f;
        --accent-highlight-background-color: #c4eeff;
        --accent-tinted-color-70: #b3e1f5;
        --accent-tinted-color-80: #ccebf8;
        --accent-tinted-color-90: #e6f5fc;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #12b9ff;
        --secondary-hover-color: #50c044;
        --secondary-contrast-color: #fff;
        --link-hover-color: #45c8ff;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/f0d7e685-a985-49bd-bc32-1f28afb7e322/14qryrjydw92-GradiantGrey1_1500.png'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_v4/v1/course-uploads/f0d7e685-a985-49bd-bc32-1f28afb7e322/n3ctp9ge7p2c-HeaderLogo.jpg') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* =======================================================
   RSM Academy: Home page scoped styles
   Scope: .home-wrap only (no global overrides)
   ======================================================= */

/* ---- Palette fallbacks (use your existing vars when present) ---- */
.home-wrap {
  --rsm-bg: var(--card-2, #f7f9fc);
  --rsm-surface: var(--card, #ffffff);
  --rsm-ink: var(--text, #0b0f1a);
  --rsm-muted: var(--muted, #5b6477);
  --rsm-primary: var(--primary, #15a748);
  --rsm-ring: var(--ring, rgba(15,23,42,0.1));
  --rsm-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  --rsm-max: 1180px;
  --rsm-gap: clamp(16px, 2.2vw, 28px);
  --rsm-pad: clamp(16px, 2vw + 8px, 28px);
  --rsm-r-xl: var(--r-xl, 28px);
  --rsm-r-lg: var(--r-lg, 20px);
  --rsm-r-md: var(--r-md, 14px);
  --rsm-r-sm: var(--r-sm, 10px);
}

/* ---- Generic wrap (centers sections) ---- */
.home-wrap .rsm-wrap {
  max-width: var(--rsm-max);
  margin-inline: auto;
  padding-inline: var(--rsm-pad);
}

/* =========================================
   HERO
   ========================================= */
.home-wrap .rsm-hero {
  background: linear-gradient(180deg, var(--rsm-surface), var(--rsm-bg));
  border-radius: var(--rsm-r-xl);
  box-shadow: var(--rsm-shadow);
  margin: calc(var(--rsm-gap) * 1.2) var(--rsm-pad);
  overflow: clip;
}
.home-wrap .rsm-hero .rsm-wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--rsm-gap);
  padding-block: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px) {
  .home-wrap .rsm-hero .rsm-wrap { grid-template-columns: 1fr; }
}
.home-wrap .rsm-hero .kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--rsm-primary), black 20%);
  background: color-mix(in oklab, var(--rsm-primary), white 90%);
  border: 1px solid color-mix(in oklab, var(--rsm-primary), white 70%);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.home-wrap .rsm-hero h1 {
  font-size: clamp(1.8rem, 2.6vw + .5rem, 2.6rem);
  line-height: 1.12;
  margin: 4px 0 10px;
  color: var(--rsm-ink);
}
.home-wrap .rsm-hero .lead {
  color: var(--rsm-muted);
  max-width: 58ch;
  margin: 0 0 16px;
}
.home-wrap .rsm-hero .pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 16px 0 20px;
}
.home-wrap .rsm-hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--rsm-ring);
  background: #fff;
  box-shadow: var(--rsm-shadow);
  font-weight: 600; font-size: .92rem;
}
.home-wrap .rsm-hero .actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 6px;
}
.home-wrap .rsm-hero .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5ch; padding: 12px 16px; border-radius: 12px;
  text-decoration: none; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .16s ease, filter .16s ease;
}
.home-wrap .rsm-hero .btn-primary {
  background: var(--rsm-primary); color: #fff; border: 1px solid color-mix(in oklab, var(--rsm-primary), black 10%);
}
.home-wrap .rsm-hero .btn-secondary {
  background: #fff; color: var(--rsm-ink); border: 1px solid var(--rsm-ring);
}
.home-wrap .rsm-hero .btn:hover { transform: translateY(-1px); filter: brightness(1.02); }

/* hero visual */
.home-wrap .rsm-hero .mock {
  display: grid; place-items: center;
}
.home-wrap .rsm-hero .hero-visual,
.home-wrap .rsm-hero .mock img {
  width: min(520px, 100%);
  aspect-ratio: 10/16;
  object-fit: cover;
  border-radius: var(--rsm-r-lg);
  border: 1px solid var(--rsm-ring);
  box-shadow: var(--rsm-shadow);
}

/* =========================================
   MARQUEE (apps we train)
   ========================================= */
.home-wrap .rsm-marquee {
  margin: 24px var(--rsm-pad) 0;
  overflow: hidden;
  border-top: 1px solid var(--rsm-ring);
  border-bottom: 1px solid var(--rsm-ring);
  background: var(--rsm-surface);
}
.home-wrap .rsm-marquee-track {
  display: flex; gap: 12px; padding: 12px;
  width: max-content; animation: rsm-scroll 22s linear infinite;
}
.home-wrap .rsm-marquee .pill {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--rsm-ring); background: #fff;
  font-weight: 600; white-space: nowrap;
}
@keyframes rsm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-wrap .rsm-marquee-track { animation: none; flex-wrap: wrap; }
}

/* =========================================
   SERVICES
   ========================================= */
.home-wrap .rsm-services { padding: 34px 0; }
.home-wrap .rsm-services h2 { margin: 6px 0 6px; }
.home-wrap .rsm-services .services-lead {
  color: var(--rsm-muted); max-width: 70ch; margin: 0 0 18px;
}
.home-wrap .rsm-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rsm-gap);
}
.home-wrap .svc-card {
  display: grid; gap: 10px;
  padding: 18px;
  background: var(--rsm-surface);
  border: 1px solid var(--rsm-ring);
  border-radius: var(--rsm-r-lg);
  box-shadow: var(--rsm-shadow);
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-wrap .svc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--rsm-primary), white 80%);
}
.home-wrap .svc-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: color-mix(in oklab, var(--rsm-primary), white 88%);
}

/* =========================================
   ACCENT HEADER (webinars)
   ========================================= */
.home-wrap .rsm-accent-header { padding: 6px 0 10px; }
.home-wrap .rsm-accent-header .head { padding-block: 16px; }
.home-wrap .rsm-accent-header .kicker { composes: kicker from none; }
.home-wrap .rsm-accent-header .kicker,
.home-wrap .rsm-hero .kicker { /* shared kicker look */
  display: inline-block; text-transform: uppercase; letter-spacing: .08em;
  font-size: .78rem; font-weight: 700;
  color: color-mix(in oklab, var(--rsm-primary), black 20%);
  background: color-mix(in oklab, var(--rsm-primary), white 90%);
  border: 1px solid color-mix(in oklab, var(--rsm-primary), white 70%);
  padding: 6px 10px; border-radius: 999px;
}
.home-wrap .rsm-accent-header .lead {
  color: var(--rsm-muted); max-width: 70ch; margin: 8px 0 12px;
}
.home-wrap .chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.home-wrap .chip {
  padding: 8px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rsm-ring);
  font-weight: 600;
}

/* =========================================
   FEATURED WORKSHOPS
   ========================================= */
.home-wrap .rsm-featured { padding: 8px 0 24px; }
.home-wrap .rsm-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rsm-gap);
}
.home-wrap .fw-card {
  display: grid; gap: 12px;
  background: var(--rsm-surface);
  border: 1px solid var(--rsm-ring);
  border-radius: var(--rsm-r-lg);
  padding: 18px;
  box-shadow: var(--rsm-shadow);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-wrap .fw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--rsm-primary), white 80%);
}
.home-wrap .fw-top .pill {
  display: inline-flex; align-items: center;
  padding: 6px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--rsm-primary), white 90%);
  border: 1px solid color-mix(in oklab, var(--rsm-primary), white 70%);
  font-weight: 700; font-size: .82rem;
}
.home-wrap .fw-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  color: var(--rsm-muted); font-size: .92rem;
}
.home-wrap .fw-cta { font-weight: 700; color: var(--rsm-primary); }

/* =========================================
   AUTH (login / create)
   ========================================= */
.home-wrap .rsm-auth { padding: 10px 0 40px; }
.home-wrap .rsm-auth .auth-lead {
  color: var(--rsm-muted); margin: 6px 0 18px;
}
.home-wrap .rsm-auth .auth-grid {
  display: grid; gap: var(--rsm-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.home-wrap .auth-card {
  background: var(--rsm-surface);
  border: 1px solid var(--rsm-ring);
  border-radius: var(--rsm-r-lg);
  padding: 18px;
  box-shadow: var(--rsm-shadow);
}
.home-wrap .auth-badge {
  display: inline-grid; place-items: center;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: color-mix(in oklab, var(--rsm-primary), white 88%);
  color: color-mix(in oklab, var(--rsm-primary), black 20%);
  border: 1px solid color-mix(in oklab, var(--rsm-primary), white 70%);
  border-radius: 999px; padding: 6px 10px; margin-bottom: 8px;
}
.home-wrap .auth-badge.alt { background: #fff; }
.home-wrap .auth-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.home-wrap .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--rsm-ring); background: #fff; text-decoration: none;
}

/* =========================================
   Utilities (spacers & text)
   ========================================= */
.home-wrap .space-sm { margin-top: 12px; }
.home-wrap .space-md { margin-top: 20px; }
.home-wrap .space-lg { margin-top: 32px; }
.home-wrap .muted { color: var(--rsm-muted); }

/* Keep links legible on light backgrounds inside Home */
.home-wrap a { color: inherit; }
.home-wrap a:hover { text-decoration: none; }

/* Ensure section spacing harmony */
.home-wrap section + section { margin-top: calc(var(--rsm-gap) * 1.2); }

/* ========= RSM Academy – Home polish (delta patch) ========= */

/* 1) Tighter hero layout & spacing */
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero {
  margin: clamp(14px, 2vw, 24px) var(--rsm-pad);
}
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .rsm-wrap {
  align-items: center !important;
  grid-template-columns: minmax(280px, 1.2fr) minmax(260px, .8fr) !important;
}
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero h1 {
  margin-bottom: 8px;
}
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .lead {
  margin-top: 4px;
}

/* 2) Hero image sizing + nice aspect on desktop/mobile */
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .mock { place-items: center; }
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .mock img,
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .hero-visual {
  width: min(520px, 100%);
  max-height: 72vh;
  aspect-ratio: 10 / 16;
  object-fit: cover;
  border-radius: var(--rsm-r-lg);
  border: 1px solid var(--rsm-ring);
  box-shadow: var(--rsm-shadow);
}
@media (max-width: 880px) {
  :where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .mock img,
  :where(html, body, .ti-page, .static-page) .home-wrap .rsm-hero .hero-visual {
    width: min(420px, 92vw);
    aspect-ratio: 9 / 16;
  }
}

/* 3) Kicker, pills, buttons — make them consistent & clickable */
:where(html, body, .ti-page, .static-page) .home-wrap .kicker {
  display: inline-block;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .78rem; font-weight: 700;
  color: color-mix(in oklab, var(--rsm-primary), black 20%);
  background: color-mix(in oklab, var(--rsm-primary), white 90%);
  border: 1px solid color-mix(in oklab, var(--rsm-primary), white 70%);
  padding: 6px 10px; border-radius: 999px;
}
:where(html, body, .ti-page, .static-page) .home-wrap .pills,
:where(html, body, .ti-page, .static-page) .home-wrap .chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
:where(html, body, .ti-page, .static-page) .home-wrap .pill,
:where(html, body, .ti-page, .static-page) .home-wrap .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--rsm-ring); background: #fff;
  box-shadow: var(--rsm-shadow);
  font-weight: 600; white-space: nowrap;
}

/* 4) Marquee speed & containment */
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-marquee {
  margin: 20px var(--rsm-pad) 0; overflow: hidden;
  border-top: 1px solid var(--rsm-ring); border-bottom: 1px solid var(--rsm-ring);
  background: var(--rsm-surface);
}
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-marquee-track {
  display: flex; gap: 12px; padding: 12px;
  width: max-content; animation: rsm-scroll 26s linear infinite;
}
@keyframes rsm-scroll { from {transform:translateX(0)} to {transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce) {
  :where(html, body, .ti-page, .static-page) .home-wrap .rsm-marquee-track { animation: none; flex-wrap: wrap; }
}

/* 5) Services + Featured cards — consistent grid and hover */
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-services .rsm-services-grid,
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-featured .rsm-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
}
:where(html, body, .ti-page, .static-page) .home-wrap .svc-card,
:where(html, body, .ti-page, .static-page) .home-wrap .fw-card,
:where(html, body, .ti-page, .static-page) .home-wrap .auth-card {
  background: var(--rsm-surface);
  border: 1px solid var(--rsm-ring);
  border-radius: var(--rsm-r-lg);
  box-shadow: var(--rsm-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
:where(html, body, .ti-page, .static-page) .home-wrap .svc-card:hover,
:where(html, body, .ti-page, .static-page) .home-wrap .fw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--rsm-primary), white 80%);
}

/* 6) Auth section spacing & buttons */
:where(html, body, .ti-page, .static-page) .home-wrap .rsm-auth {
  padding: 10px 0 40px;
}
:where(html, body, .ti-page, .static-page) .home-wrap .auth-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
:where(html, body, .ti-page, .static-page) .home-wrap .btn.btn-primary,
:where(html, body, .ti-page, .static-page) .home-wrap .btn.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5ch; padding: 12px 16px; border-radius: 12px; text-decoration: none;
  font-weight: 700; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
:where(html, body, .ti-page, .static-page) .home-wrap .btn.btn-primary {
  background: var(--rsm-primary); color: #fff;
  border: 1px solid color-mix(in oklab, var(--rsm-primary), black 10%);
}
:where(html, body, .ti-page, .static-page) .home-wrap .btn.btn-secondary {
  background: #fff; color: var(--rsm-ink);
  border: 1px solid var(--rsm-ring);
}

/* 7) Section rhythm */
:where(html, body, .ti-page, .static-page) .home-wrap section + section {
  margin-top: clamp(20px, 2.2vw, 32px);
}

/* ===== RSM Home — HERO (hard scoped) ===== */
#rsm-home .rsm-hero {
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  margin: clamp(20px, 2vw, 32px) var(--rsm-pad, 24px);
  padding-block: clamp(32px, 6vw, 72px);
  overflow: hidden;
}
#rsm-home .rsm-hero .rsm-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}
#rsm-home .rsm-hero .rsm-wrap > div:first-child {  /* text column */
  flex: 1 1 48%;
  min-width: 280px;
}
#rsm-home .rsm-hero .mock {                        /* image column */
  flex: 1 1 48%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* Image size exactly like your reference */
#rsm-home .rsm-hero .mock img,
#rsm-home .rsm-hero .hero-visual {
  width: clamp(320px, 42vw, 520px);
  height: auto;
  object-fit: contain;
  border: none;
  border-radius: var(--r-md, 14px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  transform: translateY(6px);
}

/* Text + chips + buttons: scoped so it won't affect other pages */
#rsm-home .rsm-hero h1 {
  font-size: clamp(2rem, 3vw + .5rem, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #0b0f1a;
}
#rsm-home .kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: .08em;
  font-size: .78rem; font-weight: 700;
  color: color-mix(in oklab, var(--primary, #15a748), black 20%);
  background: color-mix(in oklab, var(--primary, #15a748), white 90%);
  border: 1px solid color-mix(in oklab, var(--primary, #15a748), white 70%);
  padding: 6px 10px; border-radius: 999px; margin-bottom: 10px;
}
#rsm-home .pills, #rsm-home .chips { display:flex; flex-wrap:wrap; gap:10px; }
#rsm-home .pill, #rsm-home .chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; border:1px solid var(--ring, rgba(15,23,42,.1));
  background:#fff; box-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  font-weight:600; white-space:nowrap;
}
#rsm-home .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
#rsm-home .btn { display:inline-flex; align-items:center; justify-content:center;
  gap:.5ch; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
#rsm-home .btn.btn-primary { background: var(--primary, #15a748); color:#fff; border:1px solid color-mix(in oklab, var(--primary,#15a748), black 10%); }
#rsm-home .btn.btn-secondary { background:#fff; color:var(--text,#0b0f1a); border:1px solid var(--ring, rgba(15,23,42,.1)); }

@media (max-width: 880px) {
  #rsm-home .rsm-hero .rsm-wrap { flex-direction: column; text-align: center; }
  #rsm-home .rsm-hero .mock { justify-content: center; margin-top: 20px; }
  #rsm-home .rsm-hero .mock img { width: min(340px, 90vw); transform: none; }
}

/* ===== RSM Home – tiny fixes (paste at bottom) ===== */

/* 1) Keep hero centered and not too wide */
#rsm-home .rsm-hero .rsm-wrap{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw + 8px, 28px);
}

/* 2) Column balance + gap (a touch more room on the right) */
#rsm-home .rsm-hero .rsm-wrap > div:first-child{  /* text col */
  flex: 1 1 52%;
}
#rsm-home .rsm-hero .mock{
  flex: 1 1 48%;
  display:flex; justify-content:flex-end; align-items:flex-end;
  min-width: 300px;
  gap: 0;
}

/* 3) Hero image: smaller and contained, no overflow */
#rsm-home .rsm-hero .mock img,
#rsm-home .rsm-hero .hero-visual{
  width: clamp(300px, 40vw, 460px);
  max-height: 420px;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: var(--r-md, 14px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  transform: translateY(4px);
}

/* 4) Headline scale & spacing */
#rsm-home .rsm-hero h1{
  font-size: clamp(1.9rem, 2.4vw + .8rem, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

/* 5) Lead paragraph + pills rhythm */
#rsm-home .rsm-hero .lead{
  margin: 6px 0 14px !important;
  max-width: 60ch;
}
#rsm-home .pills{ gap: 8px 10px; margin: 10px 0 14px; }
#rsm-home .pill{ padding: 7px 12px; font-size: .92rem; }

/* 6) Buttons alignment (consistent height) */
#rsm-home .actions{ gap: 10px; }
#rsm-home .btn{ line-height: 1.1; padding: 11px 16px; }

/* 7) Hero block spacing: a bit tighter */
#rsm-home .rsm-hero{
  margin: clamp(14px, 2vw, 24px) var(--rsm-pad, 24px);
  padding-block: clamp(28px, 5vw, 60px);
}

/* 8) Mobile tweaks */
@media (max-width: 880px){
  #rsm-home .rsm-hero .rsm-wrap{ flex-direction: column; text-align: center; }
  #rsm-home .rsm-hero .mock{ justify-content: center; margin-top: 14px; }
  #rsm-home .rsm-hero .mock img{ width: min(320px, 88vw); max-height: 360px; transform: none; }
  #rsm-home .actions{ justify-content: center; }
}
/* ===== Final RSM Home hero refinement ===== */
#rsm-home .rsm-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  margin: clamp(20px, 2vw, 32px) var(--rsm-pad, 24px);
  padding-block: clamp(28px, 5vw, 64px);
  overflow: hidden;
}

/* Constrain internal width and fix alignment */
#rsm-home .rsm-hero .rsm-wrap {
  display: flex;
  align-items: flex-end; /* key fix */
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw + 8px, 28px);
}

/* Adjust text column width */
#rsm-home .rsm-hero .rsm-wrap > div:first-child {
  flex: 1 1 52%;
  min-width: 300px;
}

/* Adjust image container */
#rsm-home .rsm-hero .mock {
  flex: 1 1 45%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* ✅ Fix: realistic size, no empty box */
#rsm-home .rsm-hero .mock img,
#rsm-home .rsm-hero .hero-visual {
  width: clamp(320px, 40vw, 460px);
  height: auto;
  max-height: 360px;
  object-fit: contain;
  border: none;
  border-radius: var(--r-md, 14px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  transform: translateY(0);
}

/* Text tweaks */
#rsm-home .rsm-hero h1 {
  font-size: clamp(2rem, 2.6vw + .5rem, 2.8rem);
  line-height: 1.12;
  margin-bottom: 10px;
}
#rsm-home .rsm-hero .lead {
  margin-top: 6px;
  margin-bottom: 14px;
  max-width: 60ch;
}

/* Mobile: stack and center */
@media (max-width: 880px) {
  #rsm-home .rsm-hero .rsm-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #rsm-home .rsm-hero .mock {
    justify-content: center;
    margin-top: 20px;
  }
  #rsm-home .rsm-hero .mock img {
    width: min(320px, 88vw);
    max-height: 300px;
  }
}

/* === Hero: neat side-by-side (text + image) === */
.rsm-hero {
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  margin: clamp(18px, 2vw, 28px) var(--rsm-pad, 24px);
  padding-block: clamp(28px, 5vw, 56px);
  overflow: hidden;
}

/* Grid = perfect side-by-side, aligned center */
.rsm-hero .rsm-wrap{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw + 8px, 28px);

  display: grid !important;
  grid-template-columns: minmax(380px, 1.1fr) minmax(340px, 0.9fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

/* Left column (copy) */
.rsm-hero .rsm-hero-copy{ margin: 0; }
.rsm-hero h1{
  font-size: clamp(2.1rem, 2.6vw + .6rem, 3rem);
  line-height: 1.12;
  margin: 0 0 10px;
}
.rsm-hero .lead{ margin: 6px 0 14px; max-width: 60ch; }

/* Right column (image) */
.rsm-hero .mock{ justify-self: end; }
.rsm-hero .hero-visual,
.rsm-hero .mock img{
  display: block;
  width: min(520px, 100%);
  height: auto;
  object-fit: contain;
  max-height: 380px;
  border-radius: var(--r-md, 14px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border: 0;
}

/* Tighter chips/buttons */
.rsm-hero .pills{ display:flex; flex-wrap:wrap; gap: 8px 10px; margin: 10px 0 14px; }
.rsm-hero .actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* Stack on mobile */
@media (max-width: 980px){
  .rsm-hero .rsm-wrap{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rsm-hero .mock{ justify-self: center; }
  .rsm-hero .hero-visual{ max-height: 320px; width: min(340px, 90vw); }
  .rsm-hero .actions{ justify-content: center; }
}

/* ===== RSM Workshops – page-only styles ===== */
#rsm-workshops {
  --wk-max: 1180px;
  --wk-pad: clamp(16px, 2vw + 8px, 28px);
  --wk-gap: clamp(16px, 2.2vw, 28px);
  --wk-surface: var(--card, #fff);
  --wk-bg: var(--card-2, #f7f9fc);
  --wk-ink: var(--text, #0b0f1a);
  --wk-muted: var(--muted, #5b6477);
  --wk-ring: var(--ring, rgba(15,23,42,.1));
  --wk-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  color: var(--wk-ink);
}

/* Page container / center */
#rsm-workshops .wrap,
#rsm-workshops .rsm-wrap,
#rsm-workshops > .ti-container {
  max-width: var(--wk-max);
  margin-inline: auto;
  padding-inline: var(--wk-pad);
}

/* Hero/header area (optional, if you have one) */
#rsm-workshops .wk-hero,
#rsm-workshops .page-header {
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--wk-shadow);
  margin: clamp(18px, 2vw, 28px) var(--wk-pad);
  padding: clamp(22px, 4vw, 40px);
}
#rsm-workshops .wk-hero h1,
#rsm-workshops .page-header h1 { margin: 0 0 8px; }
#rsm-workshops .wk-hero .lead,
#rsm-workshops .page-header .lead { color: var(--wk-muted); max-width: 70ch; }

/* Filters row (chips/pills) */
#rsm-workshops .wk-filters,
#rsm-workshops .filters,
#rsm-workshops [class*="filters"] {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 10px 0 16px;
}
#rsm-workshops .wk-chip,
#rsm-workshops .chip,
#rsm-workshops .pill,
#rsm-workshops [class*="chip"] {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wk-ring);
  box-shadow: var(--wk-shadow);
  font-weight: 600; white-space: nowrap;
}

/* Search + sort bar (common LMS classes) */
#rsm-workshops .wk-toolbar,
#rsm-workshops .catalog-toolbar,
#rsm-workshops [class*="toolbar"] {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  margin: 8px 0 16px;
}
#rsm-workshops .wk-toolbar input[type="search"],
#rsm-workshops input[type="search"] {
  max-width: 360px; width: 100%;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--wk-ring); outline: none;
}

/* Grid of workshop cards */
#rsm-workshops .wk-grid,
#rsm-workshops .cards,
#rsm-workshops .grid,
#rsm-workshops [class*="card-grid"],
#rsm-workshops [class*="catalog-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--wk-gap) !important;
  margin: 14px 0 24px;
}

/* Card look */
#rsm-workshops .wk-card,
#rsm-workshops .card,
#rsm-workshops .course-card,
#rsm-workshops .catalog-card,
#rsm-workshops [class*="card"]:not(.btn):not(.button) {
  background: var(--wk-surface);
  border: 1px solid var(--wk-ring);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--wk-shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#rsm-workshops .wk-card:hover,
#rsm-workshops .course-card:hover,
#rsm-workshops .catalog-card:hover,
#rsm-workshops [class*="card"]:not(.btn):not(.button):hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--primary, #15a748), white 80%);
}

/* Card media + body */
#rsm-workshops .wk-card :is(img,.thumb,.media),
#rsm-workshops .course-card :is(img,.thumb,.media),
#rsm-workshops .catalog-card :is(img,.thumb,.media) {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
#rsm-workshops .wk-card .body,
#rsm-workshops .course-card .body,
#rsm-workshops .catalog-card .body,
#rsm-workshops [class*="card"] :is(.content,.details) {
  padding: 14px 16px 16px;
}
#rsm-workshops .wk-card h3,
#rsm-workshops .course-card h3,
#rsm-workshops .catalog-card h3 { font-size: 1rem; margin: 0 0 6px; }
#rsm-workshops .wk-card p,
#rsm-workshops .course-card p,
#rsm-workshops .catalog-card p { color: var(--wk-muted); margin: 0 0 10px; }

/* Meta row (length, level, date) */
#rsm-workshops .wk-meta,
#rsm-workshops [class*="meta"] {
  display: flex; gap: 10px; flex-wrap: wrap;
  color: var(--wk-muted); font-size: .92rem; margin-top: 6px;
}

/* CTA buttons inside cards */
#rsm-workshops .wk-card a.btn,
#rsm-workshops [class*="card"] a[class*="btn"] {
  align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px;
  font-weight: 700; text-decoration: none;
  border: 1px solid var(--wk-ring); background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Pagination (if present) */
#rsm-workshops .wk-pager,
#rsm-workshops .pagination { display:flex; gap:8px; justify-content:center; margin: 8px 0 24px; }
#rsm-workshops .pagination a,
#rsm-workshops .pagination button {
  padding: 8px 12px; border-radius: 10px; border:1px solid var(--wk-ring); background:#fff;
}

/* Section rhythm */
#rsm-workshops section + section { margin-top: calc(var(--wk-gap) * 1.2); }

/* Mobile niceties */
@media (max-width: 760px){
  #rsm-workshops .wk-toolbar{ gap: 12px; }
  #rsm-workshops .wk-toolbar input[type="search"]{ max-width: 100%; }
}

/* ============================
   RSM Workshops – page-only skin
   ============================ */
#rsm-workshops{
  --wk-max: 1180px;
  --wk-pad: clamp(16px, 2vw + 8px, 28px);
  --wk-gap: clamp(16px, 2.2vw, 28px);
  --wk-surface: var(--card, #fff);
  --wk-bg: var(--card-2, #f7f9fc);
  --wk-ink: var(--text, #0b0f1a);
  --wk-muted: var(--muted, #5b6477);
  --wk-ring: var(--ring, rgba(15,23,42,.1));
  --wk-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  color: var(--wk-ink);
}

/* center page content */
#rsm-workshops .rsm-wrap,
#rsm-workshops > .container,
#rsm-workshops > .ti-container{
  max-width: var(--wk-max);
  margin-inline: auto;
  padding-inline: var(--wk-pad);
}

/* ============================
   HERO (matches Home style)
   - Works if you add .wk-hero
   - Otherwise styles the first section on the page
   ============================ */
#rsm-workshops :is(.wk-hero, section:first-of-type){
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--wk-shadow);
  margin: clamp(18px, 2vw, 28px) var(--wk-pad);
  padding-block: clamp(28px, 5vw, 56px);
  overflow: hidden;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) .rsm-wrap{
  max-width: var(--wk-max);
  margin-inline: auto;
  padding-inline: var(--wk-pad);

  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(340px, .9fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

/* left column (copy/buttons) */
#rsm-workshops :is(.wk-hero, section:first-of-type) h1{
  font-size: clamp(2.1rem, 2.6vw + .6rem, 3rem);
  line-height: 1.12;
  margin: 0 0 10px;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) .lead{
  color: var(--wk-muted);
  margin: 6px 0 14px;
  max-width: 65ch;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) .pills{
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 14px;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) .pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: #fff;
  border: 1px solid var(--wk-ring); box-shadow: var(--wk-shadow);
  font-weight: 600; white-space: nowrap;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) .actions{
  display:flex; flex-wrap:wrap; gap:10px;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5ch; padding:12px 16px; border-radius:12px; text-decoration:none;
  font-weight:700; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.08);
  border:1px solid var(--wk-ring);
}
#rsm-workshops :is(.wk-hero, section:first-of-type) a.btn-primary{
  background: var(--primary, #15a748); color:#fff;
  border-color: color-mix(in oklab, var(--primary,#15a748), black 10%);
}
#rsm-workshops :is(.wk-hero, section:first-of-type) a.btn-secondary{
  background:#fff; color:var(--wk-ink);
}

/* right column (hero image) — target first image inside the hero section */
#rsm-workshops :is(.wk-hero, section:first-of-type) .mock,
#rsm-workshops :is(.wk-hero, section:first-of-type) .hero-image{
  justify-self: end;
}
#rsm-workshops :is(.wk-hero, section:first-of-type) img{
  display:block;
  width: min(520px, 100%);
  height:auto; max-height: 380px; object-fit: contain;
  border:0; border-radius: var(--r-md, 14px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

/* stack hero on mobile */
@media (max-width: 980px){
  #rsm-workshops :is(.wk-hero, section:first-of-type) .rsm-wrap{
    grid-template-columns: 1fr; text-align:center;
  }
  #rsm-workshops :is(.wk-hero, section:first-of-type) :is(.mock,.hero-image){ justify-self:center; }
  #rsm-workshops :is(.wk-hero, section:first-of-type) img{ width:min(340px, 90vw); max-height:320px; }
  #rsm-workshops :is(.wk-hero, section:first-of-type) .actions{ justify-content:center; }
}

/* ============================
   Workshop “cards” sections (below hero)
   ============================ */
#rsm-workshops .rsm-wrap + .rsm-wrap,
#rsm-workshops section + section{ margin-top: calc(var(--wk-gap) * 1.2); }

#rsm-workshops :is(.cards,.grid,[class*="catalog-grid"],[class*="card-grid"]){
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--wk-gap) !important;
}

/* Card styling (matches Home) */
#rsm-workshops :is(.catalog-card,.course-card,[class*="card"]):not(.btn):not(.button){
  background: var(--wk-surface);
  border: 1px solid var(--wk-ring);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--wk-shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#rsm-workshops :is(.catalog-card,.course-card,[class*="card"]):not(.btn):not(.button):hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--primary, #15a748), white 80%);
}
#rsm-workshops :is(.catalog-card,.course-card) :is(img,.thumb,.media){
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
#rsm-workshops :is(.catalog-card,.course-card) :is(.body,.content,.details){
  padding: 14px 16px 16px;
}
#rsm-workshops :is(.catalog-card,.course-card) h3{ font-size: 1rem; margin: 0 0 6px; }
#rsm-workshops :is(.catalog-card,.course-card) p{ color: var(--wk-muted); margin: 0 0 10px; }

/* Optional: section headings under hero */
#rsm-workshops h2{ margin: 10px var(--wk-pad) 6px; }

/* ===== Workshops page hero (scoped) ===== */
#rsm-workshops .rsm-hero {
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  margin: clamp(18px, 2vw, 28px) var(--rsm-pad, 24px);
  padding-block: clamp(28px, 5vw, 56px);
  overflow: hidden;
  color: var(--text, #0b0f1a);
}

/* Two-column layout */
#rsm-workshops .rsm-hero-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw + 8px, 28px);

  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* text | image */
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

/* Left column (copy) */
#rsm-workshops .rsm-hero-left { margin: 0; }
#rsm-workshops .rsm-hero .kicker {
  display: inline-block;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .78rem; font-weight: 700;
  color: color-mix(in oklab, var(--primary, #15a748), black 20%);
  background: color-mix(in oklab, var(--primary, #15a748), white 90%);
  border: 1px solid color-mix(in oklab, var(--primary, #15a748), white 70%);
  padding: 6px 10px; border-radius: 999px; margin-bottom: 10px;
}
#rsm-workshops .rsm-hero h1 {
  font-size: clamp(2.1rem, 2.6vw + .6rem, 3rem);
  line-height: 1.12;
  margin: 0 0 10px;
}
#rsm-workshops .rsm-hero .lead {
  color: var(--muted, #5b6477);
  margin: 6px 0 14px;
  max-width: 65ch;
}
#rsm-workshops .rsm-hero-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
}
#rsm-workshops .rsm-hero a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5ch; padding: 12px 16px; border-radius: 12px; text-decoration: none;
  font-weight: 700; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border: 1px solid var(--ring, rgba(15,23,42,.1));
}
#rsm-workshops .rsm-hero a.btn-primary {
  background: var(--primary, #15a748); color: #fff;
  border-color: color-mix(in oklab, var(--primary, #15a748), black 10%);
}
#rsm-workshops .rsm-hero a.btn-secondary {
  background: #fff; color: var(--text, #0b0f1a);
}

/* Right column (image) */
#rsm-workshops .rsm-hero-right { justify-self: end; }
#rsm-workshops .rsm-hero-right img {
  display: block;
  width: min(520px, 100%);
  max-height: 380px;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: var(--r-md, 14px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

/* Mobile: stack and center */
@media (max-width: 980px){
  #rsm-workshops .rsm-hero-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }
  #rsm-workshops .rsm-hero-right { justify-self: center; margin-top: 16px; }
  #rsm-workshops .rsm-hero-right img { width: min(340px, 90vw); max-height: 320px; }
  #rsm-workshops .rsm-hero-actions { justify-content: center; }
}

/* ================================
   RSM – Custom End-User Training page
   Scoped to .rsm-training-* classes
   ================================ */

/* Global vars for this page section family */
:where(.rsm-training-hero, .rsm-training-block, .rsm-training-flow, .rsm-training-cta, .rsm-training-faq){
  --t-max: 1180px;
  --t-pad: clamp(16px, 2vw + 8px, 28px);
  --t-gap: clamp(16px, 2.2vw, 28px);
  --t-surface: var(--card, #fff);
  --t-bg: var(--card-2, #f7f9fc);
  --t-ink: var(--text, #0b0f1a);
  --t-muted: var(--muted, #5b6477);
  --t-ring: var(--ring, rgba(15,23,42,.1));
  --t-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
  color: var(--t-ink);
}

/* Center inner wrap */
:where(.rsm-wrap, .training-hero-wrap){
  max-width: var(--t-max);
  margin-inline: auto;
  padding-inline: var(--t-pad);
}

/* ================================
   HERO – side-by-side, like Home
   ================================ */
.rsm-training-hero{
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--t-shadow);
  margin: clamp(18px, 2vw, 28px) var(--t-pad);
  padding-block: clamp(28px, 5vw, 56px);
  overflow: hidden;
}
.rsm-training-hero .training-hero-wrap{
  display: grid;
  grid-template-columns: minmax(380px, 1.1fr) minmax(340px, .9fr); /* text | image */
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.rsm-training-hero .left { margin: 0; }
.rsm-training-hero .kicker{
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; font-weight:700;
  color: color-mix(in oklab, var(--primary, #15a748), black 20%);
  background: color-mix(in oklab, var(--primary, #15a748), white 90%);
  border:1px solid color-mix(in oklab, var(--primary, #15a748), white 70%);
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
}
.rsm-training-hero h1{
  font-size: clamp(2.1rem, 2.6vw + .6rem, 3rem);
  line-height: 1.12;
  margin: 0 0 10px;
}
.rsm-training-hero .lead{
  color: var(--t-muted);
  margin: 6px 0 14px;
  max-width: 65ch;
}

/* Chips row */
.rsm-training-hero .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.rsm-training-hero .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--t-ring);
  box-shadow: var(--t-shadow); font-weight:600; white-space:nowrap;
}

/* Hero image */
.rsm-training-hero .right{ justify-self:end; }
.rsm-training-hero .hero-visual,
.rsm-training-hero .right img{
  display:block; width:min(520px, 100%); height:auto; max-height:380px;
  object-fit:contain; border:0; border-radius:var(--r-md, 14px);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

/* Stack hero neatly on mobile */
@media (max-width: 980px){
  .rsm-training-hero .training-hero-wrap{ grid-template-columns:1fr; text-align:center; }
  .rsm-training-hero .right{ justify-self:center; margin-top:14px; }
  .rsm-training-hero .hero-visual{ width:min(340px, 90vw); max-height:320px; }
}

/* ================================
   “What we deliver” – card grid
   ================================ */
.rsm-training-block{ padding: 10px 0 8px; }
.rsm-training-block .head h2{ margin: 10px 0 6px; }
.rsm-training-block .head .sub{ color:var(--t-muted); max-width:70ch; margin:0 0 8px; }
.rsm-training-block .grid-3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--t-gap);
  margin-top: 12px;
}
.rsm-training-block .t-card{
  background: var(--t-surface);
  border: 1px solid var(--t-ring);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--t-shadow);
  padding: 16px;
  display:grid; gap:8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rsm-training-block .t-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--primary, #15a748), white 80%);
}
.rsm-training-block .t-card .thumb{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: color-mix(in oklab, var(--primary, #15a748), white 88%);
  font-size:22px;
}
.rsm-training-block .t-card p{ color:var(--t-muted); margin:0; }

/* ================================
   Flow (numbered steps)
   ================================ */
.rsm-training-flow{ padding: 8px 0 8px; }
.rsm-training-flow .head h2{ margin: 10px 0 6px; }
.rsm-training-flow .flow{
  counter-reset: step;
  display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 10px; padding-left: 0; list-style: none;
}
.rsm-training-flow .flow li{
  background: var(--t-surface);
  border:1px solid var(--t-ring);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--t-shadow);
  padding: 16px;
  position:relative;
}
.rsm-training-flow .flow li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; top:12px; right:12px;
  width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center; font-weight:700;
  background: color-mix(in oklab, var(--primary, #15a748), white 90%);
  color: color-mix(in oklab, var(--primary, #15a748), black 20%);
  border:1px solid color-mix(in oklab, var(--primary, #15a748), white 70%);
}
.rsm-training-flow .flow h4{ margin: 0 0 6px; }
.rsm-training-flow .flow p{ margin: 0; color: var(--t-muted); }

/* ================================
   CTA band
   ================================ */
.rsm-training-cta{
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--t-shadow);
  margin: clamp(18px, 2vw, 28px) var(--t-pad);
  padding-block: clamp(18px, 3.5vw, 36px);
}
.rsm-training-cta .cta-wrap{
  display:grid; grid-template-columns: 1fr auto; gap: 16px; align-items:center;
  max-width: var(--t-max); margin-inline:auto; padding-inline: var(--t-pad);
}
.rsm-training-cta .cta-text h3{ margin:0 0 6px; }
.rsm-training-cta .cta-text p{ margin:0; color:var(--t-muted); }
.rsm-training-cta .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.rsm-training-cta .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5ch; padding:12px 16px; border-radius:12px; text-decoration:none;
  font-weight:700; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.08);
  border:1px solid var(--t-ring);
}
.rsm-training-cta .btn.btn-primary{
  background: var(--primary, #15a748); color:#fff;
  border-color: color-mix(in oklab, var(--primary,#15a748), black 10%);
}
@media (max-width: 820px){
  .rsm-training-cta .cta-wrap{ grid-template-columns: 1fr; text-align:center; }
  .rsm-training-cta .cta-actions{ justify-content:center; }
}

/* ================================
   FAQ
   ================================ */
.rsm-training-faq{ padding: 8px 0 24px; }
.rsm-training-faq h2{ margin: 10px 0 8px; }
.rsm-training-faq details{
  background: var(--t-surface);
  border:1px solid var(--t-ring);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--t-shadow);
  padding: 12px 14px;
  margin: 10px 0;
}
.rsm-training-faq summary{
  cursor:pointer; font-weight:700; outline:none;
}
.rsm-training-faq p{ color: var(--t-muted); margin: 8px 0 0; }

/* ===== End-User Training page — center & tidy (strong override) ===== */
:where(html, body, .static-page, .ti-page) .rsm-training-hero .training-hero-wrap{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;   /* true side-by-side */
  align-items: center !important;
  justify-items: center !important;
}

:where(html, body, .static-page, .ti-page) .rsm-training-hero .left{
  text-align: center !important;
}

:where(html, body, .static-page, .ti-page) .rsm-training-hero .chips{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

:where(html, body, .static-page, .ti-page) .rsm-training-hero .right{
  justify-self: center !important;
}

:where(html, body, .static-page, .ti-page) .rsm-training-hero .hero-visual,
:where(html, body, .static-page, .ti-page) .rsm-training-hero .right img{
  display: block !important;
  width: min(520px, 90%) !important;
  max-height: 340px !important;   /* adjust to taste */
  height: auto !important;
  object-fit: contain !important;
}

/* Center section headings + keep readable width */
:where(html, body, .static-page, .ti-page) .rsm-training-block .head,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .head,
:where(html, body, .static-page, .ti-page) .rsm-training-faq h2{
  text-align: center !important;
}

:where(html, body, .static-page, .ti-page) .rsm-training-block .head .sub{
  max-width: 70ch !important;
  margin-inline: auto !important;
}

/* Keep grids centered */
:where(html, body, .static-page, .ti-page) .rsm-training-block .grid-3,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .flow{
  max-width: 1180px !important;
  margin-inline: auto !important;
}

/* CTA band fully centered */
:where(html, body, .static-page, .ti-page) .rsm-training-cta .cta-wrap{
  display: grid !important;
  grid-template-columns: 1fr !important;
  text-align: center !important;
}
:where(html, body, .static-page, .ti-page) .rsm-training-cta .cta-actions{
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* FAQ narrower for readability */
:where(html, body, .static-page, .ti-page) .rsm-training-faq .rsm-wrap{
  max-width: 900px !important;
  margin-inline: auto !important;
}

/* ===== Center "What we deliver" + "How it works" blocks ===== */
:where(html, body, .static-page, .ti-page) .rsm-training-block .rsm-wrap,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .rsm-wrap{
  max-width: 1180px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* Center the grids themselves */
:where(html, body, .static-page, .ti-page) .rsm-training-block .grid-3,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .flow{
  justify-content: center !important;
  align-items: start !important;
  margin-inline: auto !important;
  max-width: 1180px !important;
}

/* Keep the cards equal and balanced */
:where(html, body, .static-page, .ti-page) .rsm-training-block .t-card,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .flow li{
  text-align: left !important;
  margin-inline: auto !important;
}

/* Section headers */
:where(html, body, .static-page, .ti-page) .rsm-training-block .head,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .head{
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

:where(html, body, .static-page, .ti-page) .rsm-training-block .head h2,
:where(html, body, .static-page, .ti-page) .rsm-training-flow .head h2{
  margin-bottom: .5rem !important;
}

/* Add breathing room and symmetry */
:where(html, body, .static-page, .ti-page) .rsm-training-block,
:where(html, body, .static-page, .ti-page) .rsm-training-flow{
  padding-block: clamp(28px, 6vw, 72px) !important;
}

/* ===== RSM /training — page-only skin ===== */
#rsm-training{
  --t-max: 1180px;
  --t-pad: clamp(16px, 2vw + 8px, 28px);
  --t-gap: clamp(16px, 2.2vw, 28px);
  --t-surface: var(--card, #fff);
  --t-ring: var(--ring, rgba(15,23,42,.1));
  --t-muted: var(--muted, #5b6477);
  --t-shadow: var(--shadow, 0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06));
}

/* Center common containers */
#rsm-training .rsm-wrap,
#rsm-training .container,
#rsm-training .ti-container{
  max-width: var(--t-max);
  margin-inline: auto;
  padding-inline: var(--t-pad);
}

/* ---------- Hero (matches Home/Workshops) ---------- */
#rsm-training :is(.rsm-hero, .training-hero, section:first-of-type){
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: 20px;
  box-shadow: var(--t-shadow);
  margin: clamp(18px, 2vw, 28px) var(--t-pad);
  padding-block: clamp(28px, 5vw, 56px);
  overflow: hidden;
}
#rsm-training :is(.rsm-hero, .training-hero, section:first-of-type) :is(.rsm-wrap,.wrap,.inner){
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr; /* text | image */
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
#rsm-training :is(.kicker){
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; font-weight:700;
  color: color-mix(in oklab, var(--primary,#15a748), black 20%);
  background: color-mix(in oklab, var(--primary,#15a748), white 90%);
  border:1px solid color-mix(in oklab, var(--primary,#15a748), white 70%);
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
}
#rsm-training h1{ font-size: clamp(2.1rem, 2.6vw + .6rem, 3rem); line-height:1.12; margin:0 0 10px; }
#rsm-training .lead{ color: var(--t-muted); margin:6px 0 14px; max-width:65ch; }
#rsm-training .actions{ display:flex; flex-wrap:wrap; gap:10px; }
#rsm-training a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5ch; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700;
  border:1px solid var(--t-ring); box-shadow:0 6px 16px rgba(0,0,0,.08);
}
#rsm-training a.btn-primary{ background: var(--primary,#15a748); color:#fff; border-color: color-mix(in oklab, var(--primary,#15a748), black 10%); }
#rsm-training a.btn-secondary{ background:#fff; }

/* hero image (accepts .mock, .hero-image or bare img) */
#rsm-training :is(.rsm-hero,.training-hero,section:first-of-type) :is(.mock,.hero-image){ justify-self:end; }
#rsm-training :is(.rsm-hero,.training-hero,section:first-of-type) :is(.mock img,.hero-image img,> img){
  display:block; width:min(520px,100%); max-height:380px; height:auto; object-fit:contain;
  border:0; border-radius:14px; box-shadow:0 12px 24px rgba(0,0,0,.08);
}

/* Mobile stack */
@media (max-width: 980px){
  #rsm-training :is(.rsm-hero,.training-hero,section:first-of-type) :is(.rsm-wrap,.wrap,.inner){
    grid-template-columns:1fr; text-align:center;
  }
  #rsm-training :is(.rsm-hero,.training-hero,section:first-of-type) :is(.mock,.hero-image){ justify-self:center; }
  #rsm-training :is(.rsm-hero,.training-hero,section:first-of-type) :is(.mock img,.hero-image img,> img){ width:min(340px,90vw); max-height:320px; }
  #rsm-training .actions{ justify-content:center; }
}

/* ---------- Content sections / cards ---------- */
#rsm-training :is(.training-block,.features,.deliverables){
  padding: 10px 0 8px;
}
#rsm-training :is(.training-block,.features,.deliverables) .head{
  text-align:center; margin-bottom: .8rem;
}
#rsm-training :is(.training-block,.features,.deliverables) .sub{
  color: var(--t-muted); max-width: 70ch; margin: 0 auto;
}

/* responsive grid for cards */
#rsm-training :is(.grid-3,.grid,.cards,[class*="card-grid"]) {
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--t-gap) !important;
  margin-top: 12px;
}

/* card style */
#rsm-training :is(.t-card,.card,[class*="card"]):not(.btn):not(.button){
  background: var(--t-surface);
  border: 1px solid var(--t-ring);
  border-radius: 20px;
  box-shadow: var(--t-shadow);
  padding: 16px;
  display:grid; gap:8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#rsm-training :is(.t-card,.card,[class*="card"]):not(.btn):not(.button):hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,7,18,.08), 0 4px 12px rgba(3,7,18,.06);
  border-color: color-mix(in oklab, var(--primary,#15a748), white 80%);
}
#rsm-training :is(.t-card p,.card p){ color: var(--t-muted); margin: 0; }

/* ---------- Flow / steps (if present) ---------- */
#rsm-training :is(.flow,.steps){
  counter-reset: step;
  display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 12px auto 0; max-width: var(--t-max);
  padding-left: 0; list-style:none;
}
#rsm-training :is(.flow li,.steps li){
  position:relative; background: var(--t-surface); border:1px solid var(--t-ring);
  border-radius:20px; box-shadow:var(--t-shadow); padding:16px;
}
#rsm-training :is(.flow li,.steps li)::before{
  counter-increment: step; content: counter(step);
  position:absolute; top:12px; right:12px; width:30px; height:30px;
  border-radius:999px; display:grid; place-items:center; font-weight:700;
  background: color-mix(in oklab, var(--primary,#15a748), white 90%);
  color: color-mix(in oklab, var(--primary,#15a748), black 20%);
  border:1px solid color-mix(in oklab, var(--primary,#15a748), white 70%);
}

/* ---------- CTA band ---------- */
#rsm-training :is(.training-cta,.cta-band){
  background: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%);
  border-radius: 20px;
  box-shadow: var(--t-shadow);
  margin: clamp(18px, 2vw, 28px) var(--t-pad);
  padding-block: clamp(18px, 3.5vw, 36px);
}
#rsm-training :is(.training-cta,.cta-band) :is(.rsm-wrap,.wrap,.inner){
  display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:center;
}
#rsm-training :is(.training-cta,.cta-band) .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 820px){
  #rsm-training :is(.training-cta,.cta-band) :is(.rsm-wrap,.wrap,.inner){
    grid-template-columns:1fr; text-align:center;
  }
  #rsm-training :is(.training-cta,.cta-band) .cta-actions{ justify-content:center; }
}

/* ---------- FAQ (if present) ---------- */
#rsm-training :is(.training-faq,.faq){ padding: 8px 0 24px; }
#rsm-training :is(.training-faq,.faq) .rsm-wrap{ max-width: 900px; }
#rsm-training :is(.training-faq,.faq) details{
  background: var(--t-surface); border:1px solid var(--t-ring);
  border-radius:16px; box-shadow:var(--t-shadow);
  padding:12px 14px; margin:10px 0;
}
#rsm-training :is(.training-faq,.faq) summary{ cursor:pointer; font-weight:700; }
#rsm-training :is(.training-faq,.faq) p{ color: var(--t-muted); margin: 8px 0 0; }

/* ===== /training page — force hero image to show ===== */
#rsm-training .rsm-hero img,
#rsm-training .training-hero img,
#rsm-training .hero-visual,
#rsm-training .mock img,
#rsm-training .hero-image img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(520px, 100%) !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: contain !important;
  border: 0 !important;
}

/* If your hero image is a direct child of the first section */
#rsm-training section:first-of-type > img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(520px, 100%) !important;
  height: auto !important;
}

/* Prevent any zero-height containers around the image */
#rsm-training .mock,
#rsm-training .hero-image,
#rsm-training .training-hero .right {
  min-height: 1px !important;
  overflow: visible !important;
}

/* General safety on this page so images never collapse */
#rsm-training img {
  max-width: 100%;
  height: auto;
}