/* CTSA site template — "Corporate" theme (banner treatment C: spotlight carousel) */

:root {
  color-scheme: light;
  --ink: #221d1b;
  --paper: #fff;
  --paper-alt: #f7f4f1;
  --line: rgba(36, 31, 29, .12);
  --text: #241f1d;
  --soft: #6b6560;
  --magenta: #e01c74;
  --magenta-soft: rgba(224, 28, 116, .08);
  --blue: #1ca3dc;
  --blue-soft: rgba(28, 163, 220, .08);
}

body.ctsa-site {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--paper);
  color: var(--text);
}

body.ctsa-site * { box-sizing: border-box; }
body.ctsa-site a { text-decoration: none; color: inherit; }
body.ctsa-site img { max-width: 100%; }
body.ctsa-site h1, body.ctsa-site h2, body.ctsa-site h3, body.ctsa-site h4 {
  font-weight: 800; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 .5em;
}
body.ctsa-site .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
body.ctsa-site .eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
}
body.ctsa-site .eyebrow-link { color: inherit; text-decoration: none; }
body.ctsa-site .eyebrow-link:hover { text-decoration: underline; }

/* ---------- header / nav ---------- */
body.ctsa-site header.ctsa-header { padding: 16px 0; border-bottom: 1px solid var(--line); }
body.ctsa-site header.ctsa-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.ctsa-site header.ctsa-header .ctsa-logo img { height: 36px; display: block; }
body.ctsa-site .ctsa-nav { display: flex; gap: 24px; }
body.ctsa-site .ctsa-nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
body.ctsa-site .ctsa-nav a { font-size: 14px; font-weight: 700; color: var(--text); }
body.ctsa-site .ctsa-nav a:hover, body.ctsa-site .ctsa-nav li.current a { color: var(--magenta); }
body.ctsa-site .btn-book {
  display: inline-block; background: var(--magenta); color: #fff; padding: 11px 22px;
  border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap;
}
body.ctsa-site .btn-book:hover { background: #c11562; }
body.ctsa-site .btn-primary {
  display: inline-block; background: #fff; color: var(--ink); padding: 14px 26px;
  border-radius: 999px; font-weight: 800; font-size: 14.5px;
}
body.ctsa-site .btn-ghost {
  display: inline-block; border: 1.5px solid rgba(255,255,255,.45); color: #fff; padding: 12.5px 24px;
  border-radius: 999px; font-weight: 800; font-size: 14.5px;
}
body.ctsa-site .btn-outline {
  display: inline-block; border: 1.5px solid var(--ink); color: var(--ink); padding: 12.5px 24px;
  border-radius: 999px; font-weight: 800; font-size: 14.5px;
}
body.ctsa-site .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- home hero: spotlight carousel ---------- */
body.ctsa-site .hero {
  background: var(--ink); color: #fff; position: relative; overflow: hidden; padding: 70px 0;
}
body.ctsa-site .hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, var(--blue) 0%, transparent 45%),
              radial-gradient(circle at 100% 100%, var(--magenta) 0%, transparent 45%);
  opacity: .35;
}
body.ctsa-site .hero .wrap {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 40px; align-items: center; padding: 70px 28px; max-width: 1160px;
}
body.ctsa-site .hero h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; margin-bottom: 16px; }
body.ctsa-site .hero p { color: #d8d0cc; font-size: 15px; max-width: 40ch; margin: 0 0 20px; }
body.ctsa-site .spotlight {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  padding: 26px; position: relative; min-height: 160px;
}
body.ctsa-site .spot-card { display: none; }
body.ctsa-site .spot-card.show { display: block; }
body.ctsa-site .spot-card .tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }
body.ctsa-site .spot-card h4 { font-size: 19px; color: #fff; margin: 8px 0; }
body.ctsa-site .spot-card p { color: #c9c2bd; font-size: 13.5px; margin: 0; }
body.ctsa-site .spot-card a { color: #fff; font-weight: 700; font-size: 12.5px; display: inline-block; margin-top: 12px; border-bottom: 1px solid rgba(255,255,255,.4); }
body.ctsa-site .dots { display: flex; gap: 6px; margin-top: 18px; }
body.ctsa-site .dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
body.ctsa-site .dots span.on { background: var(--magenta); }

/* ---------- generic (non-home) page banner ---------- */
body.ctsa-site .page-banner { background: var(--ink); color: #fff; padding: 46px 0; }
body.ctsa-site .page-banner h1 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin: 0; }
body.ctsa-site .page-banner p { color: #d8d0cc; margin: 10px 0 0; font-size: 14.5px; }

/* ---------- stat bar / feature grid / cta band ---------- */
body.ctsa-site .stat-bar { background: var(--paper-alt); border-bottom: 1px solid var(--line); padding: 40px 0; }
body.ctsa-site .stat-bar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 20px; }
body.ctsa-site .stat-num { font-size: 36px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
body.ctsa-site .stat-cap { font-size: 12.5px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

body.ctsa-site .feature-grid-section { padding: 76px 0; }
body.ctsa-site .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; }
body.ctsa-site .feature-card {
  background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.ctsa-site .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(36,31,29,.12); }
body.ctsa-site .feature-card .ic {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 14px;
}
body.ctsa-site .feature-card:nth-child(odd) .ic { background: var(--magenta-soft); color: var(--magenta); }
body.ctsa-site .feature-card:nth-child(even) .ic { background: var(--blue-soft); color: var(--blue); }
body.ctsa-site .feature-card h4 { font-size: 15.5px; margin-bottom: 6px; }
body.ctsa-site .feature-card p { font-size: 13px; color: var(--soft); margin: 0; line-height: 1.55; }

body.ctsa-site .cta-band { background: var(--ink); color: #fff; padding: 60px 0; text-align: center; }
body.ctsa-site .cta-band h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
body.ctsa-site .cta-band p { color: #cfc6c1; margin-bottom: 24px; }

/* ---------- course catalog ---------- */
body.ctsa-site .catalog-section { padding: 56px 0 76px; }

/* Expandable Software Courses / Professional Development tree on the
   Courses landing page - native <details>/<summary>, no JS, nests to
   whatever depth each branch needs (Software Courses: vendor -> application
   -> courses; Professional Development: category -> courses) via the same
   .catalog-tree-branch/.catalog-tree-body classes at every level. Content
   stays in the DOM even collapsed, so nothing here is hidden from search
   engines - only visually collapsed for the visitor. */
body.ctsa-site .catalog-tree-top { margin-bottom: 32px; }
body.ctsa-site .catalog-tree-top > summary {
  background: var(--ink); color: #fff; border-radius: 14px; padding: 20px 24px;
  font-size: 20px; font-weight: 800;
}
body.ctsa-site .catalog-tree-top > summary .catalog-tree-count { color: #d8d0cc; }
body.ctsa-site .catalog-tree-top > .catalog-tree-body { padding: 24px 4px 4px; }
body.ctsa-site .catalog-tree-intro { color: var(--soft); font-size: 14.5px; margin: 0 0 24px; }
body.ctsa-site .catalog-tree-browse-link { color: var(--magenta); font-weight: 700; margin-left: 6px; }
body.ctsa-site .catalog-tree-browse-link:hover { text-decoration: underline; }

body.ctsa-site .catalog-tree-branch { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
body.ctsa-site .catalog-tree-branch > summary {
  background: var(--paper-alt); padding: 14px 18px; font-size: 15.5px; font-weight: 700;
}
body.ctsa-site .catalog-tree-branch .catalog-tree-branch { margin: 0 16px 14px; }
body.ctsa-site .catalog-tree-branch > .catalog-tree-body { padding: 18px; }
body.ctsa-site .catalog-tree-branch > .catalog-tree-body > .catalog-tree-branch:last-child { margin-bottom: 0; }

body.ctsa-site summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
body.ctsa-site summary::-webkit-details-marker { display: none; }
body.ctsa-site summary::before {
  content: '\25B8'; display: inline-block; transition: transform .15s ease; flex-shrink: 0;
}
body.ctsa-site details[open] > summary::before { transform: rotate(90deg); }
body.ctsa-site .catalog-tree-count { font-size: 12px; font-weight: 700; color: var(--soft); white-space: nowrap; margin-left: auto; }
body.ctsa-site .catalog-tree-empty { color: var(--soft); font-size: 14px; margin: 0; }

body.ctsa-site .catalog-category { margin-top: 44px; }
body.ctsa-site .catalog-category:first-child { margin-top: 0; }
body.ctsa-site .catalog-category h2 { font-size: 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; }
body.ctsa-site .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.ctsa-site .catalog-card {
  background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  transition: transform .15s ease, box-shadow .15s ease; display: block;
}
body.ctsa-site .catalog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(36,31,29,.10); }
body.ctsa-site .catalog-card h3 { font-size: 16.5px; margin-bottom: 8px; }
body.ctsa-site .catalog-card .meta { display: flex; gap: 14px; font-size: 13px; color: var(--soft); font-weight: 700; }
body.ctsa-site .catalog-card .meta span.cost { color: var(--magenta); }

/* Hero-style catalog card - only rendered when a course has banner_hero_type
   set. --course-accent is set inline per course (falls back to site magenta
   if the course has no accent of its own), used as an accent within the
   existing CTSA palette rather than a full per-card theme override. */
body.ctsa-site .catalog-card-hero { padding: 0; overflow: hidden; }
body.ctsa-site .course-hero-stage {
  height: 130px; background: color-mix(in srgb, var(--course-accent, var(--magenta)) 10%, var(--paper-alt));
  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  padding: 14px; overflow: hidden; color: var(--course-accent, var(--magenta));
}
body.ctsa-site .course-hero-stage svg { max-width: 100%; max-height: 100%; }
body.ctsa-site .course-hero-card-body { padding: 18px 20px 20px; }
body.ctsa-site .course-hero-card-body h3 { font-size: 16.5px; margin-bottom: 6px; }
body.ctsa-site .course-hero-card-tagline { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin: 0 0 10px; }
body.ctsa-site .course-hero-card-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
body.ctsa-site .course-hero-card-pills .pill {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--course-accent, var(--magenta)) 16%, white); color: var(--course-accent, var(--magenta));
}
body.ctsa-site .catalog-card-hero .meta { margin: 0; }

/* Skill-level badge - shown near a course title wherever one appears
   (catalog cards, application-page cards, course page header). Level
   drives sort order via level_weight but is never baked into the title
   text itself, to avoid confusion with a course genuinely titled e.g.
   "Excel Advanced" - so it needs its own visible marker instead. */
body.ctsa-site .level-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
body.ctsa-site .level-badge-fundamentals { background: var(--blue-soft); color: var(--blue); }
body.ctsa-site .level-badge-intermediate { background: var(--paper-alt); color: var(--ink); border: 1px solid var(--line); }
body.ctsa-site .level-badge-advanced { background: var(--magenta-soft); color: var(--magenta); }
body.ctsa-site .page-banner .level-badge { margin-bottom: 12px; }

/* Application listing/detail cards (view=applications, view=application) */
body.ctsa-site .application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.ctsa-site .application-card {
  display: block; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.ctsa-site .application-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(36,31,29,.10); }

/* Rotator - cycles through an application's courses' hero animations, one
   at a time (site JS toggles .is-active on an interval). The inactive
   items are absolutely stacked at opacity 0 so the container's height
   comes from the one active (in-flow) item, with a plain crossfade
   between them - no layout jump on rotation. */
body.ctsa-site .application-card-rotator { position: relative; }
body.ctsa-site .application-card-rotator .course-hero-banner {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
body.ctsa-site .application-card-rotator .course-hero-banner.is-active { position: relative; opacity: 1; pointer-events: auto; }
body.ctsa-site .application-card-stage { border-radius: 0; }

/* Logo fallback - shown in place of an animated banner wherever a course/
   application has no banner data yet, so every card/band always shows a
   picture instead of a blank stage. */
body.ctsa-site .banner-fallback-logo { max-width: 60%; max-height: 55%; object-fit: contain; }
body.ctsa-site .application-card-body { padding: 18px 20px 20px; }
body.ctsa-site .application-card-body h3 { font-size: 16.5px; margin-bottom: 6px; }
body.ctsa-site .application-card-desc { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin: 0 0 10px; }

/* Application detail page header rotator - a bigger version of the same
   card rotator, sitting as its own band below the dark page-banner. */
body.ctsa-site .application-hero-band { background: var(--paper-alt); border-bottom: 1px solid var(--line); padding: 32px 0; }
body.ctsa-site .application-hero-rotator { max-width: 520px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
body.ctsa-site .application-hero-rotator .course-hero-stage { height: 220px; }
body.ctsa-site .application-hero-rotator-caption { text-align: center; font-size: 13.5px; font-weight: 700; padding: 12px; margin: 0; border-top: 1px solid var(--line); background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  body.ctsa-site .application-card-rotator .course-hero-banner { transition: none; }
}
body.ctsa-site .application-card-count { font-size: 12px; font-weight: 700; color: var(--magenta); }

/* Vendor picker (top "Software Courses" page - Microsoft / Adobe / Other Courses) */
body.ctsa-site .vendor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.ctsa-site .vendor-card {
  display: block; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.ctsa-site .vendor-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(36,31,29,.10); }
body.ctsa-site .vendor-card h2 { font-size: 20px; margin: 0 0 8px; }
body.ctsa-site .vendor-card-count { font-size: 12.5px; font-weight: 700; color: var(--magenta); }

/* Topic montage banner (course page) - full-width band between the
   before/after banner and the sidebar+tabs layout. */
body.ctsa-site .course-montage { background: var(--paper-alt); border-bottom: 1px solid var(--line); padding: 40px 0; }
body.ctsa-site .course-montage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
body.ctsa-site .course-montage-suite { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--course-accent, var(--magenta)); margin: 0 0 4px; }
body.ctsa-site .course-montage-title { font-size: 20px; font-weight: 800; margin: 0; }
body.ctsa-site .course-montage-tag { font-size: 13.5px; color: var(--soft); max-width: 38ch; text-align: right; margin: 0; }
body.ctsa-site .course-montage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.ctsa-site .course-montage-fallback {
  display: flex; align-items: center; justify-content: center; height: 130px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
body.ctsa-site .course-montage-fallback .banner-fallback-logo { max-width: 40%; max-height: 60%; }
body.ctsa-site .course-montage-tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 10px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
body.ctsa-site .course-montage-tile.in { opacity: 1; transform: none; }
body.ctsa-site .course-montage-tile.spot { border-color: var(--course-accent, var(--magenta)); box-shadow: 0 6px 16px -8px var(--course-accent, var(--magenta)); }
body.ctsa-site .course-montage-tile-icon {
  height: 42px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--course-accent, var(--magenta));
  transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
body.ctsa-site .course-montage-tile.spot .course-montage-tile-icon { transform: translateY(-3px) scale(1.12); }
body.ctsa-site .course-montage-tile-label { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; transition: color .4s ease; }
body.ctsa-site .course-montage-tile.spot .course-montage-tile-label { color: var(--course-accent, var(--magenta)); }
body.ctsa-site .course-montage-tile-sub { font-size: 10.5px; color: var(--soft); text-align: center; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  body.ctsa-site .course-montage-tile { opacity: 1; transform: none; transition: none; }
}

/* ---------- course detail ---------- */
body.ctsa-site .course-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; padding: 48px 0 76px;
}
body.ctsa-site .course-main { min-width: 0; }
body.ctsa-site .course-section { margin: 0 0 40px; }
body.ctsa-site .course-section:last-child { margin-bottom: 0; }
body.ctsa-site .course-section h2 {
  font-size: 19px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--magenta-soft);
}
body.ctsa-site .course-richtext { font-size: 15px; line-height: 1.7; color: var(--text); }
body.ctsa-site .course-richtext p:first-child { margin-top: 0; }

/* Tabs: Overview / Course Content / Delivery Options */
body.ctsa-site .course-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
body.ctsa-site .course-tab-btn {
  appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 800; color: var(--soft); padding: 12px 18px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
body.ctsa-site .course-tab-btn:hover { color: var(--ink); }
body.ctsa-site .course-tab-btn.is-active { color: var(--magenta); border-bottom-color: var(--magenta); }
body.ctsa-site .course-tab-panel { display: none; }
body.ctsa-site .course-tab-panel.is-active { display: block; }

body.ctsa-site .course-subtabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
body.ctsa-site .course-subtab-btn {
  appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 800; color: var(--soft); padding: 9px 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
body.ctsa-site .course-subtab-btn:hover { color: var(--ink); background: var(--paper-alt); }
body.ctsa-site .course-subtab-btn.is-active { color: var(--magenta); border-bottom-color: var(--magenta); }
body.ctsa-site .course-subtab-panel { display: none; }
body.ctsa-site .course-subtab-panel.is-active { display: block; }

body.ctsa-site .course-delivery-section { margin: 0; }
body.ctsa-site .course-delivery-subheading { font-size: 14.5px; font-weight: 800; color: var(--magenta); margin: 0 0 10px; }
body.ctsa-site .course-delivery-block { margin-top: 22px; }
body.ctsa-site .course-delivery-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); margin: 0 0 8px;
}
body.ctsa-site .course-bullet-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--text); }
body.ctsa-site .course-bullet-list li { margin-bottom: 4px; }
body.ctsa-site .course-bullet-list li:last-child { margin-bottom: 0; }
body.ctsa-site .course-delivery-subsection {
  margin-top: 26px; padding: 20px 22px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 12px;
}
body.ctsa-site .course-delivery-subsection h4 { font-size: 15.5px; margin: 0 0 10px; color: var(--magenta); }
body.ctsa-site .course-delivery-note { font-size: 13.5px; color: var(--soft); margin: 18px 0 0; }

body.ctsa-site .course-topics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
body.ctsa-site .course-topic-card {
  background: var(--paper-alt); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
}
body.ctsa-site .course-topic-card h3 { font-size: 15px; margin-bottom: 8px; }
body.ctsa-site .course-topic-card .course-richtext { font-size: 13.5px; line-height: 1.6; color: var(--soft); }

/* Sidebar: sticky booking/fact card, mirrors the reference site's prominent
   price + session CTA placement instead of burying it at the page bottom. */
body.ctsa-site .course-sidebar { position: relative; }
body.ctsa-site .course-sidebar-card {
  position: sticky; top: 24px; background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px;
}
body.ctsa-site .course-sidebar-price {
  font-size: 26px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
body.ctsa-site .course-sidebar-price span { display: block; font-size: 11px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
body.ctsa-site .course-sidebar-facts { margin: 0; }
body.ctsa-site .course-sidebar-facts dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); margin-top: 12px; }
body.ctsa-site .course-sidebar-facts dt:first-child { margin-top: 0; }
body.ctsa-site .course-sidebar-facts dd { font-size: 14.5px; font-weight: 700; margin: 2px 0 0; }
body.ctsa-site .delivery-options-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body.ctsa-site .delivery-options-list li {
  background: var(--blue-soft); color: var(--blue); font-size: 11.5px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px;
}
body.ctsa-site .course-sidebar-sessions { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
body.ctsa-site .course-sidebar-sessions h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
body.ctsa-site .course-sidebar-no-sessions { font-size: 13.5px; color: var(--soft); margin: 0 0 14px; }
body.ctsa-site .course-sidebar-session { margin-bottom: 10px; }
body.ctsa-site .course-sidebar-session:last-child { margin-bottom: 0; }
body.ctsa-site .course-sidebar-session-date { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
body.ctsa-site .btn-block { display: block; text-align: center; width: 100%; }
body.ctsa-site .course-sidebar-quote-btn { margin-top: 10px; }

/* ---------- forms (booking / waitlist) ---------- */
body.ctsa-site .booking-form-wrap, body.ctsa-site .waitlist-form-wrap {
  padding: 48px 28px 76px; max-width: 640px; margin: 0 auto;
}
body.ctsa-site .booking-form-wrap h2, body.ctsa-site .waitlist-form-wrap h2 { font-size: 22px; }
body.ctsa-site .booking-form-wrap label, body.ctsa-site .waitlist-form-wrap label { font-weight: 700; font-size: 13.5px; }
body.ctsa-site .booking-form-wrap .btn-primary, body.ctsa-site .waitlist-form-wrap .btn-primary {
  background: var(--magenta); color: #fff; border: none; border-radius: 999px; padding: 11px 26px; font-weight: 800;
}
body.ctsa-site .booking-form-wrap .btn-primary:hover, body.ctsa-site .waitlist-form-wrap .btn-primary:hover { background: #c11562; color: #fff; }
body.ctsa-site .booking-form-wrap .btn-secondary, body.ctsa-site .waitlist-form-wrap .btn-secondary {
  border-radius: 999px; font-weight: 700;
}
body.ctsa-site .booking-form-wrap .form-control, body.ctsa-site .waitlist-form-wrap .form-control {
  border-color: var(--line); border-radius: 8px;
}
body.ctsa-site .booking-form-wrap .form-control:focus, body.ctsa-site .waitlist-form-wrap .form-control:focus {
  border-color: var(--magenta); box-shadow: 0 0 0 .2rem var(--magenta-soft);
}

body.ctsa-site .booking-confirmation, body.ctsa-site .waitlist-confirmation {
  padding: 76px 28px; max-width: 640px; margin: 0 auto; text-align: center;
}

/* ---------- footer ---------- */
body.ctsa-site footer.ctsa-footer { background: var(--ink); color: #cfc6c1; padding: 32px 0; font-size: 12.5px; }
body.ctsa-site footer.ctsa-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

@media (max-width: 860px) {
  body.ctsa-site .ctsa-nav { display: none; }
  body.ctsa-site .hero .wrap { grid-template-columns: 1fr; padding: 48px 28px; }
  body.ctsa-site .stat-bar .wrap, body.ctsa-site .feature-grid, body.ctsa-site .catalog-grid, body.ctsa-site .application-grid, body.ctsa-site .vendor-grid { grid-template-columns: 1fr 1fr; }
  body.ctsa-site .course-layout { grid-template-columns: 1fr; }
  body.ctsa-site .course-sidebar-card { position: static; }
  body.ctsa-site .course-topics-grid { grid-template-columns: 1fr; }
  body.ctsa-site .course-montage-grid { grid-template-columns: repeat(2, 1fr); }
  body.ctsa-site .course-montage-head { flex-direction: column; align-items: flex-start; }
  body.ctsa-site .course-montage-tag { text-align: left; max-width: none; }
  body.ctsa-site .course-delivery-subsection { padding: 16px 18px; }
  body.ctsa-site .course-tabs-nav, body.ctsa-site .course-subtabs-nav { overflow-x: auto; }
  body.ctsa-site .course-tab-btn { white-space: nowrap; padding: 10px 14px; }
  body.ctsa-site .course-subtab-btn { white-space: nowrap; }
}
@media (max-width: 560px) {
  body.ctsa-site .stat-bar .wrap, body.ctsa-site .feature-grid, body.ctsa-site .catalog-grid, body.ctsa-site .application-grid, body.ctsa-site .vendor-grid { grid-template-columns: 1fr; }
}
