:root {
        --font: League Spartan;
        --alt-font: League Spartan;
        --accent-color: #5454cc;
        --secondary-color: #d13e36;
        --link-color: #1c4dff;
        --accent-highlight-color: #3131a3;
        --accent-highlight-background-color: #ddddf5;
        --accent-tinted-color-70: #ccccf0;
        --accent-tinted-color-80: #ddddf5;
        --accent-tinted-color-90: #eeeefa;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #7b7bd8;
        --secondary-hover-color: #da6660;
        --secondary-contrast-color: #fff;
        --link-hover-color: #829dff;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/be8a5419-f0c0-4ffa-8455-1d61f2654863/lyw24n3bkius-logo.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
body { background-color: #f6f5f2; }



.cw-article {
  box-sizing: border-box;
  max-width: 790px;
  margin: 0 auto;
  color: #1a1b1d;
  font-family: "League Spartan", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
.cw-article *, .cw-article *::before, .cw-article *::after { box-sizing: border-box; }
.cw-article p { margin: 0 0 15px; }
.cw-article .cw-intro { margin: 0 0 32px; font-size: 21px; line-height: 1.42; }
.cw-article h2 {
  margin: 38px 0 13px;
  color: #1a1b1d;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 700;
}
.cw-article h2::before { content: ""; display: block; width: 38px; height: 4px; margin-bottom: 12px; background: #1c4dff; }
.cw-article h3 { margin: 27px 0 8px; color: #1a1b1d; font-size: 21px; line-height: 1.24; font-weight: 700; }
.cw-article ol, .cw-article ul { margin: 12px 0 22px; padding-left: 25px; }
.cw-article li { margin: 0 0 10px; padding-left: 5px; }
.cw-article li::marker { color: #1c4dff; font-weight: 700; }
.cw-article strong { font-weight: 700; }
.cw-article a { color: #18399d; text-decoration: underline; text-underline-offset: 3px; }
.cw-article .cw-figure { margin: 23px 0 28px; }
.cw-article .cw-figure img { display: block; max-width: 100%; height: auto; }
.cw-article .cw-figure figcaption { margin-top: 10px; color: #5c586d; font-size: 15px; line-height: 1.45; }
.cw-article .cw-image-placeholder { padding: 70px 25px; border: 2px dashed #abb4cb; background: #f5f7ff; color: #293a70; text-align: center; }
.cw-article blockquote.cw-note { margin: 26px 0; padding: 19px 24px 17px; border-left: 5px solid #1c4dff; background: #eff3ff; color: #1a1b1d; font-size: 17px; line-height: 1.52; }
.cw-article blockquote.cw-note p { margin: 0 0 5px; }
.cw-article blockquote.cw-note p:last-child { margin-bottom: 0; }
.cw-article blockquote.cw-note strong { color: #18399d; }
.cw-article .cw-next-step { margin-top: 36px; padding-top: 8px; border-top: 1px solid #e5e3da; }
@media (max-width: 640px) {
  .cw-article { font-size: 17px; }
  .cw-article .cw-intro { font-size: 19px; }
  .cw-article h2 { font-size: 25px; }
  .cw-article .cw-image-placeholder { padding: 48px 20px; }
}
.cw-article { font-size: 17px; line-height: 1.5; }
.cw-article .cw-intro { font-size: 19px; }
.cw-article h2 { font-size: 25px; }
.cw-article h3 { font-size: 19px; }
.cw-article blockquote.cw-note { font-size: 16px; }
.cw-article figure.cw-figure {
  display: block;
  width: 100%;
  margin: 12px 0 20px;
  text-align: left;
}

.cw-article figure.cw-figure img {
  display: block;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 100%;
  height: auto;
}
.article-sidebar .article-sidebar__rating {
  display: none !important;
}


/* ==========================================================
   Caseware x Thought Industries — Style Guide & CSS System
   Mirrors TI "CSS Blocks" class names, with Caseware branding.
   Paste into: Site > Site Builder > Custom Code > CSS
   Brand source: 2026 Brand + Digital Brand Guidelines
   Font: League Spartan (loaded separately via @import / Branding)
   ========================================================== */

/* ---------- Brand reference (documentation only) ----------
   Near-black  #1A1B1D    Blue    #1C4DFF    Coral  #FF645C
   Purple      #5454CC    Pink    #E956AF    Cyan   #28C1EA
   Yellow      #F9CA46    Off-white #E5E3DA  White  #FFFFFF
   ----------------------------------------------------------- */

/* widget backgrounds */
.bk-color-1 {background: #1C4DFF;}  /* Blue */
.bk-color-2 {background: #1A1B1D;}  /* Near-black */
.bk-color-3 {background: #5454CC;}  /* Purple */
.bk-color-4 {background: #FF645C;}  /* Coral — use near-black text, white fails AA */
.bk-color-5 {background: #E5E3DA;}  /* Off-white */
.bk-color-6 {background: #fff;}     /* White */

/* widget title color */
.title-color-1 .widget__title {color:#1A1B1D;}
.title-color-2 .widget__title {color:#1C4DFF;}
.title-color-3 .widget__title {color:#5454CC;}
.title-color-4 .widget__title {color:#fff; background:#1A1B1D;}

/* widget title font size (TI default sizes kept so widgets render as the platform intends) */
.title-size-1 .widget__title {font-size: 24px; line-height: 1.2;}
.title-size-2 .widget__title {font-size: 32px; line-height: 1.2;}
.title-size-3 .widget__title {font-size: 48px; line-height: 1.15;}
.title-size-4 .widget__title {font-size: 72px; line-height: 1.1;}

/* widget button variations
   1-3 gradient fill (blue > purple) | 4-6 gradient outline | 7-9 near-black fill
   12px radius, League Spartan SemiBold (600) — see overrides at end of file */
.cta-btn-1 .widget__cta a {background: #1C4DFF; color:#fff; font-size: 16px; border: 2px solid #1C4DFF; border-radius: 8px; font-weight: 500;}
.cta-btn-2 .widget__cta a {background: #1C4DFF; color:#fff; font-size: 24px; border: 2px solid #1C4DFF; border-radius: 8px; font-weight: 500;}
.cta-btn-3 .widget__cta a {background: #1C4DFF; color:#fff; font-size: 32px; border: 2px solid #1C4DFF; border-radius: 8px; font-weight: 500;}
.cta-btn-4 .widget__cta a {background: #fff; color:#1A1B1D; font-size: 16px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-5 .widget__cta a {background: #fff; color:#1A1B1D; font-size: 24px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-6 .widget__cta a {background: #fff; color:#1A1B1D; font-size: 32px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-7 .widget__cta a {background: #1A1B1D; color:#fff; font-size: 16px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-8 .widget__cta a {background: #1A1B1D; color:#fff; font-size: 24px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-9 .widget__cta a {background: #1A1B1D; color:#fff; font-size: 32px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}

/* widget button variations (buttons added in text editors) */
.cta-btn-1 .btn {background: #1C4DFF; color:#fff; font-size: 16px; border: 2px solid #1C4DFF; border-radius: 8px; font-weight: 500;}
.cta-btn-2 .btn {background: #1C4DFF; color:#fff; font-size: 24px; border: 2px solid #1C4DFF; border-radius: 8px; font-weight: 500;}
.cta-btn-3 .btn {background: #1C4DFF; color:#fff; font-size: 32px; border: 2px solid #1C4DFF; border-radius: 8px; font-weight: 500;}
.cta-btn-4 .btn {background: #fff; color:#1A1B1D; font-size: 16px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-5 .btn {background: #fff; color:#1A1B1D; font-size: 24px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-6 .btn {background: #fff; color:#1A1B1D; font-size: 32px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-7 .btn {background: #1A1B1D; color:#fff; font-size: 16px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-8 .btn {background: #1A1B1D; color:#fff; font-size: 24px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}
.cta-btn-9 .btn {background: #1A1B1D; color:#fff; font-size: 32px; border: 2px solid #1A1B1D; border-radius: 8px; font-weight: 500;}

/* button hover + keyboard focus (Digital Brand Guide p.06: hover = solid purple)
   1-6 hover > purple #5454CC, white text | 7-9 (purple) hover > blue #1C4DFF */
.cta-btn-1 .widget__cta a, .cta-btn-2 .widget__cta a, .cta-btn-3 .widget__cta a,
.cta-btn-4 .widget__cta a, .cta-btn-5 .widget__cta a, .cta-btn-6 .widget__cta a,
.cta-btn-7 .widget__cta a, .cta-btn-8 .widget__cta a, .cta-btn-9 .widget__cta a,
.cta-btn-1 .btn, .cta-btn-2 .btn, .cta-btn-3 .btn,
.cta-btn-4 .btn, .cta-btn-5 .btn, .cta-btn-6 .btn,
.cta-btn-7 .btn, .cta-btn-8 .btn, .cta-btn-9 .btn {
  transition: background-color .2s ease, color .2s ease;
}
.cta-btn-1 .widget__cta a:hover, .cta-btn-2 .widget__cta a:hover, .cta-btn-3 .widget__cta a:hover,
.cta-btn-4 .widget__cta a:hover, .cta-btn-5 .widget__cta a:hover, .cta-btn-6 .widget__cta a:hover,
.cta-btn-1 .btn:hover, .cta-btn-2 .btn:hover, .cta-btn-3 .btn:hover,
.cta-btn-4 .btn:hover, .cta-btn-5 .btn:hover, .cta-btn-6 .btn:hover {
  background: #5454CC; border-color: #5454CC; color: #fff;
}
.cta-btn-7 .widget__cta a:hover, .cta-btn-8 .widget__cta a:hover, .cta-btn-9 .widget__cta a:hover,
.cta-btn-7 .btn:hover, .cta-btn-8 .btn:hover, .cta-btn-9 .btn:hover {
  background: #1C4DFF; border-color: #1C4DFF; color: #fff;
}
[class*="cta-btn-"] .widget__cta a:focus-visible, [class*="cta-btn-"] .btn:focus-visible {
  outline: 3px solid #FF645C; outline-offset: 2px;
}

/* widget padding variations */
.pad-top-1 {padding-top:2em !important;}
.pad-top-2 {padding-top:5em !important;}
.pad-top-3 {padding-top:10em !important;}
.pad-bottom-1 {padding-bottom:2em !important;}
.pad-bottom-2 {padding-bottom:5em !important;}
.pad-bottom-3 {padding-bottom:10em !important;}
.pad-sides-1 {padding:1em 2em !important;}
.pad-sides-2 {padding:1em 5em !important;}
.pad-sides-3 {padding:1em 10em !important;}
.pad-all-1 {padding:2em !important;}
.pad-all-2 {padding:5em !important;}
.pad-all-3 {padding:10em !important;}
.pad-none {padding:0em !important;}

/* ---------- Button overrides: brand gradient, 12px radius, SemiBold ----------
   7-9 = brand secondary button: solid purple #5454CC (Digital Brand Guide p.06) */
.cta-btn-7 .widget__cta a, .cta-btn-8 .widget__cta a, .cta-btn-9 .widget__cta a,
.cta-btn-7 .btn, .cta-btn-8 .btn, .cta-btn-9 .btn {
  background: #5454CC; border-color: #5454CC;
}
.cta-btn-1 .widget__cta a, .cta-btn-2 .widget__cta a, .cta-btn-3 .widget__cta a,
.cta-btn-1 .btn, .cta-btn-2 .btn, .cta-btn-3 .btn {
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC); border-color: transparent; /* solid base = no white flash on hover */
}
.cta-btn-4 .widget__cta a, .cta-btn-5 .widget__cta a, .cta-btn-6 .widget__cta a,
.cta-btn-4 .btn, .cta-btn-5 .btn, .cta-btn-6 .btn {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #1C4DFF, #5454CC) border-box #fff;
  border-color: transparent;
}
.cta-btn-1 .widget__cta a, .cta-btn-2 .widget__cta a, .cta-btn-3 .widget__cta a,
.cta-btn-4 .widget__cta a, .cta-btn-5 .widget__cta a, .cta-btn-6 .widget__cta a,
.cta-btn-7 .widget__cta a, .cta-btn-8 .widget__cta a, .cta-btn-9 .widget__cta a,
.cta-btn-1 .btn, .cta-btn-2 .btn, .cta-btn-3 .btn,
.cta-btn-4 .btn, .cta-btn-5 .btn, .cta-btn-6 .btn,
.cta-btn-7 .btn, .cta-btn-8 .btn, .cta-btn-9 .btn {
  border-radius: 12px; font-weight: 600;
}





/* ==========================================================
   Caseware Academy — Sign-in page (v3.2 — vertical centring + :has safety)
   Target: academy.caseware.com/learn/sign_in
   Paste into: Site > Site Builder > Custom Code > CSS
   Selectors from the live sign-in page:
     .session > .row > .session__container > form.session__form
   Design: Figma "Thought Industries Portal Design" > • Login / Registration > Login
   v3: two-column Sign In / New Users layout, redesigned for hierarchy + consistency
       (needs ti-signin-footer-script.html in Footer Scripts).
   Spacing scale (8px): 8 / 16 / 24 / 32 / 40.  Type: 24 title, 16 body, 13 helper.
   ========================================================== */

/* Full-page hero background */
.session {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1B1D url("https://d3i9g4671ronu3.cloudfront.net/course-uploads/be8a5419-f0c0-4ffa-8455-1d61f2654863/bd77l8x908x9-Log-in-image.jpg") center / cover no-repeat;
}

/* Neutralise TI's grid offset (medium-push-3) so the card truly centers */
.session .row {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  justify-content: center;
}

/* The white card */
.session__container {
  position: static !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  margin: 0 auto !important;
  width: 507px;
  max-width: calc(100% - 32px);
  background: #fff;
  border: none !important;          /* no stroke */
  outline: none !important;
  border-radius: 24px;
  padding: 40px 24px 24px;
  box-shadow: 0 16px 48px rgba(26, 27, 29, 0.25);
}
.session__form {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  /* heading + fields full width, then "Forgot password" (left) and button (right) centred on one line */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.session__form .text-centered,
.session__form .field { flex: 0 0 100%; }
.session__form .btn--primary,
.session__form input[type="submit"] {
  order: 2;
  float: none !important;
  margin: 14px 0 0 !important;
}
.session__forgot {
  order: 1;
  margin: 14px 0 0 !important;      /* same offset as the button so they stay level */
}

/* Logo: smaller, centred, with space beneath */
.session__container > .text-center {
  overflow: visible !important;
  height: auto !important;
}
.session__container .company__beta-logo {
  display: block;
  text-align: center;
  padding: 4px 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  line-height: normal;
}
.session__container .company__beta-logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto !important;
  max-height: none !important;
  overflow: visible;
  margin: 0 auto 28px;
}

/* Heading + helper text (single-card version) */
.session__form .h2 {
  font-family: 'League Spartan', sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: #1A1B1D;
  margin-bottom: 20px !important;
}
.session__form .text-xs {
  color: #5C5C60;
  text-align: left;
  margin-bottom: 12px !important;
}

/* Inputs */
.session__form .field__input {
  height: 48px;
  border: 1px solid #D9D9DE;
  border-radius: 12px;
  padding: 0 16px;
  font-family: 'League Spartan', sans-serif;
  font-size: 14px;
}
.session__form .field__input:focus {
  border-color: #1C4DFF;
  outline: 3px solid rgba(28, 77, 255, 0.25);
  outline-offset: 0;
}

/* Sign in button — same brand button as the CSS system */
.session__form .btn--primary,
.session__form input[type="submit"] {
  /* solid base colour under the gradient stops a white flash on hover */
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  transition: background-color .2s ease;
}
.session__form .btn--primary:hover,
.session__form input[type="submit"]:hover {
  background: #5454CC !important;
  border-radius: 12px !important;
}
.session__form .btn--primary:focus-visible { outline: 3px solid #FF645C; outline-offset: 2px; }

/* Forgot password link: slightly smaller, dark grey, keep underline */
.session__forgot .btn--link {
  color: #4A4B50;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
}

/* ==========================================================
   Two-column layout: Sign In (left, primary task)  |  New Users (right, tinted panel)
   Needs ti-signin-footer-script.html (adds .cw-wide / .cw-auth).
   ========================================================== */
.session__container.cw-wide {
  width: 920px;
  max-width: calc(100% - 32px);
  padding: 40px;
}
.cw-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  text-align: left;
}
.cw-divider { display: none; }               /* the tinted panel does the separating */

/* both columns share the same top padding so the two titles line up */
.cw-signin { display: flex; flex-direction: column; padding: 32px 24px; }
.cw-signin, .cw-signup { min-height: 380px; }     /* room for the content to centre vertically */
.cw-form-slot { flex: 1; display: flex; flex-direction: column; }
.cw-signup {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: #F2F1EC;                       /* tint of brand off-white #E5E3DA */
  border-radius: 16px;
}

/* shared type scale */
.cw-title {
  font-family: 'League Spartan', sans-serif;
  font-size: 24px !important;               /* beats TI's own .h2 class on the re-used heading */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #1A1B1D;
  text-align: left !important;              /* TI centres this heading by default */
  margin: 0 0 8px !important;
}
.cw-sub { margin: 0 0 24px; font-size: 16px; line-height: 1.4; color: #5C5C60; }

/* Sign In column — form spacing on an 8px rhythm */
.cw-wide .session__form .text-centered { text-align: left; }
.cw-wide .session__form .text-xs { font-size: 13px; margin-bottom: 16px !important; }
.cw-wide .session__form .field { margin-bottom: 16px !important; }
.cw-wide .session__form .field__input { font-size: 16px; }
.cw-wide .session__form .btn--primary,
.cw-wide .session__form input[type="submit"] {
  min-height: 48px;
  padding: 0 28px;
  font-size: 16px;
  margin-top: 8px !important;               /* 16 (field gap) + 8 = 24 above the action row */
}
.cw-wide .session__forgot { margin-top: 8px !important; }

/* Tighter gap between inputs: TI adds its own 14px under each input on top of the 16px field gap */
.cw-wide .session__form .field__input { margin-bottom: 0 !important; }

/* Vertical centring: the note + fields sit centred between the heading and the action row
   (script wraps them in .cw-fields and the buttons in .cw-actions) */
/* only switches to the column layout once the script has added .cw-fields (safe if the script is stale) */
.cw-wide .session__form:has(.cw-fields) {
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}
.cw-fields { margin: auto 0; }
.cw-fields .field:last-child { margin-bottom: 0 !important; }
.cw-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.cw-wide .session__form .cw-actions .btn--primary,
.cw-wide .session__form .cw-actions input[type="submit"],
.cw-wide .session__form .cw-actions .session__forgot { margin: 0 !important; order: 0; }

/* New Users column */
.cw-signup ul { list-style: none; margin: auto 0; padding: 0; }   /* centred between heading and button */
.cw-signup li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: #1A1B1D;
}
.cw-signup li:last-child { margin-bottom: 0; }
.cw-signup li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1C4DFF, #5454CC);
}
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;                      /* right-aligned, matching the Sign In button */
  gap: 8px;
  margin-top: 24px;                          /* sits at the bottom: the list above centres in the free space */
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease;
}
.cw-btn-secondary { background: #5454CC; }
.cw-btn-secondary:hover { background: #1C4DFF; color: #fff; }
.cw-btn:focus-visible { outline: 3px solid #FF645C; outline-offset: 2px; }

@media (max-width: 760px) {
  .session__container.cw-wide { padding: 24px; }
  .cw-auth { grid-template-columns: 1fr; gap: 24px; }
  .cw-signin, .cw-signup { min-height: 0; }
  .cw-signin { padding: 8px 0; }
  .cw-signup { padding: 24px; }
  .cw-btn { margin-top: 24px; }
}
















/* ==========================================================================
   Caseware Academy — homepage built from NATIVE TI widgets (v1, first pass)
   Replaces caseware-ti-homepage.css / ti-homepage-widgets.html (the custom-HTML approach).
   Selectors are from TI's Advanced Design manual (2021): see TI_Advanced_Design_CSS_Class_Reference.md.
   The live site is behind the password gate, so class names are UNVERIFIED: run the inspector snippet
   (end of this file) on the homepage and send me the output, then I tighten every selector.

   Widgets on Pages > Homepage, in order (CSS Classes field):
     1. Hero Image           cw-hero         title + strapline, no CTA
     2. Text Columns (1)     cw-hero-intro   the two intro paragraphs
     3. Text Columns (1)     cw-panel-top    "Select your region" + intro line
     4. About Blocks (5/row) cw-panel-mid    the 5 region cards
     5. Text Columns (1)     cw-panel-bottom "Not sure which region…" line
     6. Text Columns (2)     cw-employees    employee band
   ========================================================================== */

:root {
  --cw-ink:#1A1B1D; --cw-blue:#1C4DFF; --cw-purple:#5454CC; --cw-sand:#E5E3DA;
  --cw-paper:#F6F5F2; --cw-card:#F7F6F3; --cw-body:#4A4857; --cw-label:#6C6B70;
}
body { background: var(--cw-paper); font-family: 'League Spartan', sans-serif; }

/* ---------- CONTAINED LAYOUT: every section stays inside TI's own page container (same as the nav),
   so any section added later follows the same logic. No full-width breakout. ---------- */
.cw-hero.widget--one-column {
  width: auto !important; max-width: none !important;     /* Foundation .row caps width: let it fill the container */
  margin: 0 16px !important;                               /* 16px matches the logo inset in the header */
  border-radius: 0;                                        /* square corners; set to 12px or 28px for rounded */
}

/* ---------- 1. HERO IMAGE (dark, left-aligned, glow in CSS) ----------
   Confirmed structure: div.row.widget.widget--hero-image.cw-hero > div.hero > div.hero__caption > h2.hero__title + span.h4 */
.cw-hero { background: transparent; }
.cw-hero .hero {
  height: auto !important; min-height: 0 !important;
  padding: 104px 24px 0;
  background:
    radial-gradient(ellipse 60% 75% at 96% 80%, rgba(28,77,255,.55) 0%, rgba(84,84,204,.20) 45%, rgba(84,84,204,0) 75%),
    var(--cw-ink) !important;              /* no image uploaded: CSS supplies the background */
}
.cw-hero .hero__caption {
  position: static !important; transform: none !important;
  opacity: 1 !important; background: none !important;          /* manual: caption has default opacity */
  max-width: 1152px; margin: 0 auto; padding: 0; text-align: left;
}
.cw-hero .hero__title, .cw-hero .hero_title {
  margin: 0 0 18px; max-width: 760px;
  font-size: clamp(40px, 5.6vw, 56px); font-weight: 500; line-height: 1;
  letter-spacing: -0.0643em; color: #fff; text-align: left;
}
.cw-hero .h4 {
  margin: 0; max-width: 533px;
  font-size: 24px; line-height: 30px; font-weight: 400; color: var(--cw-sand); text-align: left;
}

/* TI's own text colour wins over the rules above (title/strapline rendered dark on dark): force it */
.cw-hero .hero .hero__caption .hero__title { color: #fff !important; font-weight: 500 !important; text-align: left !important; }
.cw-hero .hero .hero__caption .h4 { display: block; color: var(--cw-sand) !important; font-weight: 400 !important; text-align: left !important; }
.cw-hero .hero .hero__caption { padding-bottom: 0 !important; }

/* ---------- 1b. HERO AS ONE "SINGLE COLUMN" TEXT WIDGET (confirmed structure) ----------
   div.row.widget.widget--one-column.cw-hero
     > div.ember-view > div.ember-view > h3.h2.widget__title  +  p.widget__subtitle
     > div.row > div.medium-12.columns > div.editor-content   (body paragraphs)
   Colleagues edit: Title field, Subtitle field, body editor. */
.cw-hero.widget--one-column {
  padding: 104px 0 248px !important;       /* bottom space sits under the overlapping panel */
  background:
    radial-gradient(ellipse 60% 75% at 96% 80%, rgba(28,77,255,.55) 0%, rgba(84,84,204,.20) 45%, rgba(84,84,204,0) 75%),
    var(--cw-ink) !important;
}
.cw-hero.widget--one-column > .ember-view { max-width: 1152px !important; margin: 0 auto !important; padding: 0 !important; text-align: left !important; }
.cw-hero.widget--one-column .row { max-width: none !important; margin: 0 !important; padding: 0 !important; }   /* the row sits INSIDE the padded wrapper: no second gutter */
.cw-hero.widget--one-column .columns { padding: 0 !important; float: none; }
.cw-hero .editor-content, .cw-hero .editor-content.indent-list { padding-left: 0 !important; margin-left: 0 !important; }   /* TI's indent-list adds ~24px */
@media (max-width: 1200px) {
  .cw-hero.widget--one-column > .ember-view { padding: 0 24px !important; }   /* side gutters only when the screen is narrower than the 1152 column */
}
.cw-hero .widget__title {
  margin: 0 0 18px; max-width: 760px; text-align: left !important;
  font-size: clamp(40px, 5.6vw, 56px) !important; font-weight: 500 !important; line-height: 1 !important;
  letter-spacing: -0.0643em; color: #fff !important;
}
.cw-hero .widget__subtitle {
  margin: 0 0 18px; max-width: 533px; text-align: left !important;
  font-size: 24px !important; line-height: 30px !important; font-weight: 400 !important; color: var(--cw-sand) !important;
}
.cw-hero .editor-content, .cw-hero .editor-content p {
  max-width: 612px; text-align: left !important;
  font-size: 17px; line-height: 1.6; font-weight: 300; color: #BDBAC8 !important;
}
.cw-hero .editor-content p { margin: 0 0 6px; }
@media (max-width: 760px) { .cw-hero.widget--one-column { padding: 64px 0 192px !important; } }

/* ---------- 2. HERO INTRO (same dark background, continues the hero) ---------- */
.cw-hero-intro {
  background:
    radial-gradient(ellipse 60% 75% at 96% 60%, rgba(28,77,255,.45) 0%, rgba(84,84,204,.15) 45%, rgba(84,84,204,0) 75%),
    var(--cw-ink) !important;
  padding: 18px 24px 196px !important;    /* bottom space sits under the overlapping panel */
}
.cw-hero-intro .editor-content { max-width: 1152px; margin: 0 auto; text-align: left; }
.cw-hero-intro p {
  max-width: 612px; margin: 0 0 6px;
  font-size: 17px; line-height: 1.6; font-weight: 300; color: #BDBAC8;
}

/* ---------- 3-5. WHITE PANEL (three stacked widgets that read as one card) ---------- */
.cw-panel-top, .cw-panel-mid, .cw-panel-bottom {
  max-width: 1152px; margin-left: auto !important; margin-right: auto !important;
  background: #fff !important; position: relative; z-index: 2;
  padding-left: 48px !important; padding-right: 48px !important;
}
.cw-panel-top {
  margin-top: -174px !important; padding-top: 48px !important; padding-bottom: 0 !important;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 30px 70px rgba(26,27,29,.12); clip-path: inset(-100px -100px 0 -100px);  /* no shadow seam at the joins */
}
.cw-panel-mid { padding-top: 28px !important; padding-bottom: 0 !important; box-shadow: 0 30px 70px rgba(26,27,29,.12); clip-path: inset(0 -100px 0 -100px); }
.cw-panel-bottom {
  padding-top: 28px !important; padding-bottom: 48px !important;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 30px 70px rgba(26,27,29,.12); clip-path: inset(0 -100px -100px -100px);
}
/* Panel top = single-column Text Columns widget: Title field = "Select your region", Subtitle field = intro line, body editor left empty */
.cw-panel-top.widget--one-column > .ember-view { max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cw-panel-top .row { display: none !important; }      /* empty body editor: removes its spacing */
.cw-panel-top .widget__title {
  margin: 0 0 6px !important; text-align: left !important;
  font-size: clamp(34px, 4.4vw, 48px) !important; font-weight: 400 !important; line-height: 53px !important;
  letter-spacing: -0.0325em; color: var(--cw-ink) !important;
}
.cw-panel-top .widget__subtitle {
  margin: 0 !important; max-width: 468px; text-align: left !important;
  font-size: 18px !important; line-height: 27px !important; font-weight: 300 !important; color: var(--cw-body) !important;
}
/* Panel bottom = Single Column widget with ONLY the body editor filled (title/subtitle left empty) */
.cw-panel-bottom.widget--one-column > .ember-view { max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cw-panel-bottom .widget__title, .cw-panel-bottom .widget__subtitle { display: none !important; }
.cw-panel-bottom .row, .cw-panel-bottom .columns { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.cw-panel-bottom .editor-content, .cw-panel-bottom .editor-content.indent-list { padding: 0 !important; margin: 0 !important; text-align: left !important; max-width: none; }
/* cards piece reaches 2px under the bottom piece (same seam fix as the heading) */
html body .cw-panel-mid:has(~ .cw-panel-bottom) { padding-bottom: 2px !important; margin-bottom: -2px !important; z-index: 3; }
.cw-panel-bottom p { margin: 0 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 300 !important; color: var(--cw-body) !important; text-align: left !important; }
.cw-panel-bottom a { color: var(--cw-ink) !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.cw-panel-bottom a:hover { color: var(--cw-blue) !important; }
.cw-panel-bottom a:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; border-radius: 4px; }

/* ---------- PANEL TITLE: the About Blocks widget's own Title + Subtitle fields (rendered above the cards) ---------- */
.cw-panel-mid > .ember-view, .cw-panel-mid > div:not(.row) { max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cw-panel-mid .widget__title {
  margin: 0 0 6px !important; padding: 0 !important; text-align: left !important;
  font-size: clamp(34px, 4.4vw, 48px) !important; font-weight: 400 !important; line-height: 53px !important;
  letter-spacing: -0.0325em; text-transform: none !important; color: var(--cw-ink) !important;
}
.cw-panel-mid .widget__subtitle {
  margin: 0 0 20px !important; padding: 0 !important; max-width: 468px; text-align: left !important;
  font-size: 18px !important; line-height: 27px !important; font-weight: 300 !important; color: var(--cw-body) !important;
}

/* ---------- 4. REGION CARDS (About Blocks) ----------
   Confirmed structure of one card:
   li.about-block__container > div > a > div.about-block > span > div.about-block__text > img + h3 + p
   Per block in the widget: Title = region, Subtitle = language, Icon Image = map, Background Image = none,
   Text Colour = blank, Enable Animation = OFF, alignment = Left, Link To = URL. */
.cw-panel-mid > .row, .cw-panel-mid .columns { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.cw-panel-mid ul {
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
  list-style: none !important; margin: 0 !important; padding: 8px 0 0 !important;
}
.cw-panel-mid li.about-block__container { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: block; }
.cw-panel-mid li.about-block__container > div { height: 100%; }
.cw-panel-mid ul::before, .cw-panel-mid ul::after { display: none !important; content: none !important; }   /* Foundation clearfix pseudo-elements become empty grid cells */
/* TI pins the text block to the bottom of the block with absolute positioning: put it back in the flow */
.cw-panel-mid .about-block, .cw-panel-mid .about-block > span, .cw-panel-mid .about-block__text {
  position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  transform: none !important; height: auto !important; max-height: none !important; opacity: 1 !important;
}

/* flatten TI's nested wrappers so img / h3 / p become direct children of the card (icon top, text bottom) */
.cw-panel-mid li a .about-block, .cw-panel-mid li a .about-block > span, .cw-panel-mid li a .about-block__text { display: contents !important; }

/* pseudo-element spacers on the wrappers would otherwise become flex items of the card (empty gap above the icon) */
.cw-panel-mid li a .about-block::before, .cw-panel-mid li a .about-block::after,
.cw-panel-mid li a .about-block > span::before, .cw-panel-mid li a .about-block > span::after,
.cw-panel-mid li a .about-block__text::before, .cw-panel-mid li a .about-block__text::after { display: none !important; content: none !important; }

/* until the heading widget exists, the cards panel carries the overlap + rounded top itself */
.cw-hero ~ .cw-panel-mid {                  /* '~' not '+': TI puts unclassed elements between the widgets */
  margin-top: -174px !important; padding-top: 48px !important; border-radius: 28px 28px 0 0;
  clip-path: inset(-100px -100px 0 -100px);
}
.cw-panel-top ~ .cw-panel-mid {              /* once the heading widget exists it carries the overlap instead */
  margin-top: 0 !important; padding-top: 28px !important; border-radius: 0; clip-path: inset(0 -100px 0 -100px);
}
/* the heading piece reaches 2px under the cards piece, so no sub-pixel gap shows the dark hero between them */
html body .cw-panel-top { padding-bottom: 2px !important; margin-bottom: -2px !important; z-index: 3; }
/* no TI borders/rules between the stacked panel pieces */
.cw-panel-top, .cw-panel-mid, .cw-panel-bottom { border-top: 0 !important; border-bottom: 0 !important; }
.cw-panel-top::after, .cw-panel-mid::before, .cw-panel-top::before, .cw-panel-mid::after { display: none !important; content: none !important; }
.cw-panel-top hr, .cw-panel-mid hr { display: none !important; }

/* panel bottom: while the cards are the last piece, close the panel (padding, rounded bottom, shadow, space before the footer).
   This stops applying automatically once a .cw-panel-bottom widget follows. */
html body .cw-panel-mid:not(:has(~ .cw-panel-bottom)) {
  padding-bottom: 48px !important; margin-bottom: 64px !important;
  border-bottom-left-radius: 28px; border-bottom-right-radius: 28px;
  clip-path: none;
}

/* the card = the link */
.cw-panel-mid li a {
  display: flex !important; flex-direction: column; height: 100%; min-height: 268px;
  padding: 28px 24px 22px; border-radius: 20px;
  background: var(--cw-card) !important; background-image: none !important;
  text-align: left; text-decoration: none; color: var(--cw-ink);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cw-panel-mid li a:hover { transform: translateY(-4px); background: #fff !important; box-shadow: 0 16px 32px rgba(26,27,29,.10), 0 0 0 1px rgba(26,27,29,.10); }
.cw-panel-mid li a:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }

/* stretch the wrappers so the text block can sit at the bottom of the card */
.cw-panel-mid .about-block, .cw-panel-mid .about-block > span, .cw-panel-mid .about-block__text {
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
  text-align: left !important; text-transform: none !important;
}
.cw-panel-mid .about-block > span:after, .cw-panel-mid .about-block:after, .cw-panel-mid .about-block__text:after { display: none !important; }  /* kill the animate border/arrow */

/* icon at the top, text pushed to the bottom */
.cw-panel-mid .about-block__text img {
  position: static !important; width: 62px !important; height: 62px !important; max-width: none;
  margin: 0 0 auto 0 !important; border-radius: 13px; background: #fff; object-fit: contain; display: block; flex: none;
}
.cw-panel-mid .about-block__text h3 {
  margin: 0 !important; padding-top: 14px; border-top: 1px solid rgba(26,27,29,.30);   /* divider sits above the name */
  font-size: 22px !important; line-height: 25px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #000 !important; text-align: left !important;
}
.cw-panel-mid .about-block__text h3:first-child { margin-top: auto !important; }
.cw-panel-mid .about-block__text p {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 0 !important; font-size: 15px !important; line-height: 20px !important; font-weight: 300 !important;
  color: var(--cw-label) !important; text-align: left !important;
}
.cw-panel-mid .about-block__text p::after {          /* arrow, same as the Figma card */
  content: ""; width: 16px; height: 16px; flex: none; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A1B1D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cw-panel-mid li a:hover .about-block__text p::after { transform: translateX(4px); }

/* ---------- 6. EMPLOYEES BAND (Two Column widget, class cw-employees) ----------
   Confirmed structure: div.row.widget--two-column.cw-employees > div.ember-view (outer)
     > div.ember-view (h3.widget__title + p.widget__subtitle)  +  div.row > div.columns x2 > div.editor-content > p > a
   Fields: Title + Subtitle on the left; the button is EITHER a link in the 2nd column OR the native CTA Button fields. 1st column stays empty.
   Layout: [icon tile] [title + subtitle] [button] */
.cw-employees.widget--two-column {
  max-width: 1152px; width: auto !important; margin: 52px auto 64px !important; padding: 32px 48px !important;
  border-radius: 24px; background: var(--cw-sand) !important;
}
.cw-employees.widget--two-column > .ember-view {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 20px; align-items: center;
  max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important;
}
.cw-employees.widget--two-column > .ember-view::before {          /* ID-card icon tile from the Figma design */
  content: ""; grid-column: 1; grid-row: 1; width: 56px; height: 56px; border-radius: 16px; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%231C4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='22' height='16' rx='3'/%3E%3Ccircle cx='10' cy='13' r='2.5'/%3E%3Cpath d='M6.5 19c.6-1.8 2-2.6 3.5-2.6s2.9.8 3.5 2.6M16 12h5M16 16h5'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 28px;
}
.cw-employees.widget--two-column > .ember-view > .ember-view { grid-column: 2; grid-row: 1; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.cw-employees .widget__title {
  margin: 0 0 4px !important; padding: 0 !important; text-align: left !important;
  font-size: 26px !important; line-height: 31px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--cw-ink) !important; text-transform: none !important;
}
.cw-employees .widget__subtitle { margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 17px !important; line-height: 26px !important; font-weight: 300 !important; color: #3E3C48 !important; }

/* right-hand side: the row holding the two column editors (1st is empty, 2nd carries the button) */
.cw-employees.widget--two-column > .ember-view > .row { grid-column: 3; grid-row: 1; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.cw-employees .row .columns { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.cw-employees .row .columns:first-child { display: none !important; }
.cw-employees .editor-content, .cw-employees .editor-content.indent-list { padding: 0 !important; margin: 0 !important; }
.cw-employees .editor-content p { margin: 0 !important; }

/* the button: a link in the 2nd column, or TI's native CTA button */
.cw-employees .row a, .cw-employees .widget__cta a, .cw-employees a.btn, .cw-btn-secondary {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px !important; border-radius: 12px !important; border: 0 !important;
  background: var(--cw-purple) !important; color: #fff !important;
  font-size: 17px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important;
  transition: background-color .2s ease;
}
.cw-employees .row a::after, .cw-employees .widget__cta a::after, .cw-employees a.btn::after, .cw-btn-secondary::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cw-employees .row a:hover, .cw-employees .widget__cta a:hover, .cw-employees a.btn:hover, .cw-btn-secondary:hover { background: var(--cw-blue) !important; }
.cw-employees .row a:focus-visible, .cw-employees .widget__cta a:focus-visible, .cw-employees a.btn:focus-visible, .cw-btn-secondary:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }
.cw-employees .widget__cta { grid-column: 3; grid-row: 1; margin: 0 !important; padding: 0 !important; }

@media (max-width: 760px) {
  .cw-employees.widget--two-column { padding: 28px 24px !important; }
  .cw-employees.widget--two-column > .ember-view { grid-template-columns: 56px minmax(0, 1fr); row-gap: 20px; }
  .cw-employees.widget--two-column > .ember-view > .row, .cw-employees .widget__cta { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .cw-panel-mid ul { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) {
  .cw-hero .hero { padding-top: 64px; }
  .cw-hero-intro { padding-bottom: 160px !important; }
  .cw-panel-top, .cw-panel-mid, .cw-panel-bottom { padding-left: 24px !important; padding-right: 24px !important; }
  .cw-panel-top { margin-top: -128px !important; }
  .cw-panel-mid ul { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cw-panel-mid li a { min-height: 220px; }
}
@media (max-width: 480px) { .cw-panel-mid ul { grid-template-columns: 1fr; } .cw-panel-mid li a { min-height: 0; gap: 32px; } }

/* ==========================================================================
   INSPECTOR SNIPPET — paste in the browser console on the homepage (signed in past the password gate) and send me the output:

   [...document.querySelectorAll('[class*="cw-"]')].filter(e=>/^cw-(hero|hero-intro|panel-top|panel-mid|panel-bottom|employees)$/.test([...e.classList].find(c=>c.startsWith('cw-'))||'')).map(w=>{
     const walk=(n,d)=>d>6?'':'  '.repeat(d)+n.tagName.toLowerCase()+(n.className&&typeof n.className==='string'?'.'+n.className.trim().split(/\s+/).join('.'):'')+'\n'+[...n.children].map(c=>walk(c,d+1)).join('');
     return walk(w,0);}).join('\n---\n')
   ========================================================================== */























/* Caseware Academy footer v1. Native TI footer restyled. Design: Figma node 45:1600. Items are edited in Site Builder > Footer. */

footer.footer {
  position: relative;
  margin: 0 16px 16px !important; padding: 0 !important;
  background: #1A1B1D !important; border: 0 !important; border-radius: 0;
  color: #BDBAC8; font-family: 'League Spartan', sans-serif;
}
footer.footer .footer__inner {
  position: relative; display: block !important;
  max-width: 1248px; width: auto !important; margin: 0 auto !important; padding: 80px 48px 88px !important;
}

/* ---------- LINKS: flow into columns, a heading item starts a new column ---------- */
footer.footer .footer__links {
  display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important;
  column-count: 4; column-gap: 48px;
}
footer.footer .footer__links .link {
  display: block !important; float: none !important; margin: 0 !important; padding: 0 !important;
  break-inside: avoid; text-align: left;
}
footer.footer .footer__links .link a {
  display: inline-block; padding: 6px 0;
  font-size: 16px; line-height: 1.4; font-weight: 300; color: #BDBAC8 !important; text-decoration: none !important;
  transition: color .2s ease;
}
footer.footer .footer__links .link a:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
footer.footer .footer__links .link a:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; border-radius: 4px; }

/* logo item (the one with an image) sits at the top of the first column */
footer.footer .footer__links .link:has(img) { margin-bottom: 28px !important; }
/* TI serves footer images at 32px wide, so the logo is loaded at full size as a background and the tiny img is hidden */
footer.footer .footer__links .link:has(img) a {
  display: block; width: 200px; height: 44px; padding: 0;
  background: url("https://d3i9g4671ronu3.cloudfront.net/course-uploads/be8a5419-f0c0-4ffa-8455-1d61f2654863/xgjjnpsr3724-CasewareLightLogoHorizontal.png") left center / contain no-repeat;
}
footer.footer .footer__links .link img { display: block; width: 200px !important; height: 44px !important; opacity: 0; }

/* heading item: a footer item with NO URL becomes a column heading */
footer.footer .footer__links .link:has(a:not([href])) { break-before: column; margin-bottom: 12px !important; }
footer.footer .footer__links a:not([href]) {
  padding: 0 0 8px; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.005em; color: #fff !important; cursor: default;
}

/* no stray strokes at the top of the footer */
footer.footer::before, footer.footer::after, footer.footer .footer__inner::before { display: none !important; content: none !important; }
footer.footer, footer.footer .footer__inner, footer.footer .footer__company__info {
  border: 0 !important; box-shadow: none !important; outline: 0;
}
footer.footer { background-image: none !important; }

/* ---------- BOTTOM BAR: copyright left, Need Help right, hairline above ---------- */
footer.footer .footer__links { padding-bottom: 40px !important; border-bottom: 1px solid rgba(255, 255, 255, .18) !important; }
footer.footer .footer__company__info {
  position: absolute; left: 48px; bottom: 36px; margin: 0 !important; padding: 0 !important;
}
footer.footer .footer__company__name { font-size: 14px; font-weight: 300; line-height: 1.4; color: #BDBAC8 !important; }
footer.footer .footer__links .link:has(strong) {
  position: absolute; right: 48px; bottom: 30px; width: auto; column-span: none;
}
footer.footer .footer__links .link:has(strong) strong { font-size: 14px; font-weight: 500; color: #fff; }
footer.footer .footer__links .link:has(strong) a { padding: 0 0 0 6px; font-size: 14px; color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  footer.footer .footer__links { column-count: 2; }
}
@media (max-width: 640px) {
  footer.footer .footer__inner { padding: 48px 24px 24px !important; }
  footer.footer .footer__links { column-count: 1; }
  footer.footer .footer__links .link:has(a[href$="#heading"]) { margin-top: 24px !important; break-before: auto; }
  footer.footer .footer__inner::after { display: none; }
  footer.footer .footer__company__info, footer.footer .footer__links .link:has(strong) { position: static; margin-top: 24px !important; }
}














/* ==========================================================================
   CASEWARE ACADEMY — LEARNER DASHBOARD  (added 20 Oct 2026)
   Page: /learn/dashboard   Design source: dashboard-prototype.html (approved v1)
   What it does: restyles TI's four native dashboard widgets so they match the panorama pages.
     A. Helpful links (navbar widget)          .widget--navbar
     B. Stats counters (4 cards)               .widget--dashboard-stats
     C. Catalog title, search, filter select   .widget--catalog
     D. Filter sidebar (accordions)            .catalog-aggregation
     E. Course cards                           a.catalog-item
   Scoping: every rule starts with a TI widget class, so it only affects these widgets (the Catalog page uses the
   catalog widget too, so it picks up the same look on purpose). Nothing here uses :has(> ...) (TI's validator rejects it).
   F. Activity tabs (dashboard-access widget)  .widget--dashboard-access
   G. Filter bar + view buttons   H. List view   I. Timeline view (all inside .widget--catalog)
   Paste: Site Builder > Custom Code > CSS, BELOW the panorama block. Replace this block each time, never add a second copy.
   ========================================================================== */

/* ---------- A. HELPFUL LINKS (navbar) ---------- */
/* every layer behind the link must be transparent, or TI's white background overlaps the rule under the bar */
.widget--navbar ul.left, .widget--navbar li.navigation-item, .widget--navbar .top-bar, .widget--navbar .title-area { background: none !important; box-shadow: none !important; }
/* SIDE PADDING: not touched on purpose. Every widget keeps TI's own 32px side padding, so content lines up with the rest of the site. */
.widget--navbar { background: none !important; border: 0 !important; box-shadow: none !important; }
.widget--navbar nav.navigation-bar { background: none !important; border: 0 !important; border-bottom: 1px solid #E5E3DA !important; box-shadow: none !important; }
.widget--navbar .top-bar-section { background: none !important; }
.widget--navbar .navigation-item > a {
  display: inline-flex !important; align-items: center; min-height: 48px;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #1A1B1D !important; background: none !important;
}
.widget--navbar .navigation-item > a:hover { color: #1C4DFF !important; }
/* TI's grey triangle is replaced by a chevron that sits in the text line */
.widget--navbar .navigation-item.has-dropdown > a { gap: 8px; padding-right: 0 !important; }
.widget--navbar .navigation-item.has-dropdown > a::after {
  content: "" !important; position: static !important; display: block !important; width: 8px; height: 8px; margin: -3px 0 0 !important; flex: none;
  border: 0 !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg);
}
.widget--navbar .navigation-item.has-dropdown:hover > a::after { transform: rotate(-135deg); margin-top: 3px !important; }
.widget--navbar .dropdown {
  padding: 8px !important; border: 0 !important; border-radius: 16px; background: #fff !important;
  box-shadow: 0 16px 32px rgba(26,27,29,.12), 0 0 0 1px rgba(26,27,29,.08) !important;
}
.widget--navbar .dropdown, .widget--navbar .dropdown li, .widget--navbar .dropdown li > a { border: 0 !important; outline: 0; }   /* no lines around or between the items */
.widget--navbar .dropdown li > a { display: block; padding: 12px 14px !important; border-radius: 10px; font-size: 16px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1A1B1D !important; background: none !important; }
.widget--navbar .dropdown li > a:hover { background: #F7F6F3 !important; color: #1C4DFF !important; }

/* ---------- B. STATS COUNTERS ---------- */
.widget--dashboard-stats { background: none !important; border: 0 !important; box-shadow: none !important; padding-top: 40px !important; padding-bottom: 0 !important; }
.widget--dashboard-stats .columns { float: none !important; width: auto !important; }   /* keep TI's 16px column padding: it cancels the row's -16px margin so cards sit on the widget's 32px edge */
.widget--dashboard-stats .dashboard-stats__container { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
.widget--dashboard-stats ul.dashboard-stats {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
.widget--dashboard-stats ul.dashboard-stats::before, .widget--dashboard-stats ul.dashboard-stats::after { display: none !important; content: none !important; }
.widget--dashboard-stats ul.dashboard-stats > li {
  float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  background: #F7F6F3 !important; border: 0 !important; border-radius: 20px; box-shadow: none !important;
}
.widget--dashboard-stats ul.dashboard-stats > li.dashboard-stat--collaborations { background: #F2F7FF !important; }   /* last card tinted, like "Got a question?" */
.widget--dashboard-stats .dashboard-stat { display: flex; flex-direction: column; gap: 14px; height: auto !important; padding: 28px 28px 26px !important; text-align: left !important; background: none !important; border: 0 !important; }
.widget--dashboard-stats .dashboard-stat__label {
  order: 1; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important;
  font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase !important; color: #6C6B70 !important;
}
.widget--dashboard-stats .dashboard-stat__icon { display: none !important; }
.widget--dashboard-stats .dashboard-stat__label::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #1C4DFF; }
.widget--dashboard-stats li.dashboard-stat--started .dashboard-stat__label::before { background: #5454CC; }
.widget--dashboard-stats li.dashboard-stat--completed .dashboard-stat__label::before { background: #FF645C; }
.widget--dashboard-stats li.dashboard-stat--collaborations .dashboard-stat__label::before { background: #1A1B1D; }
/* numerals are ink on purpose: coral/green on #F7F6F3 fail the 3:1 large-text contrast */
.widget--dashboard-stats .dashboard-stat__value, .widget--dashboard-stats .dashboard-stat__value--huge {
  order: 2; margin: 0 !important; padding: 0 !important;
  font-size: 64px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -.04em; text-align: left !important; color: #1A1B1D !important;
}

/* ---------- C. CATALOG: title, search, filter select ---------- */
.widget--catalog { background: none !important; border: 0 !important; box-shadow: none !important; padding-top: 72px !important; padding-bottom: 88px !important; }
.widget--catalog .widget__alt-title__container { margin: 0 0 28px !important; padding: 0 !important; }
.widget--catalog .widget__alt-title__container h3 {
  margin: 0 !important; font-size: clamp(34px, 4.4vw, 48px) !important; line-height: 1.1 !important; font-weight: 400 !important;
  letter-spacing: -0.0325em; text-transform: none !important; color: #1A1B1D !important;
}
.widget--catalog hr.hr__accent { display: none !important; }

.widget--catalog .catalog-search-bar { display: flex !important; align-items: flex-start; gap: 16px; margin: 0 0 32px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.widget--catalog .catalog-filters { display: flex !important; gap: 16px; align-items: flex-start; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.widget--catalog .catalog-filters__search { flex: 1 1 auto; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.widget--catalog .catalog-filters__selections { flex: 0 0 240px; float: none !important; width: 240px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }   /* border:0 removes TI's thin vertical rule left of "Filter by" */
.widget--catalog .catalog-filters__selections .row, .widget--catalog .catalog-filters__selections .row.collapse { width: auto !important; max-width: none !important; margin: 0 !important; }
.widget--catalog .catalog-content-type { float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.widget--catalog .label--off-canvas { display: none !important; }
.widget--catalog form.catalog-search { position: relative; margin: 0 !important; }
.widget--catalog form.catalog-search input, .widget--catalog select.catalog-filters__select {
  width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
  border: 1px solid #D5D3CB !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 300 !important; color: #1A1B1D !important;
}
.widget--catalog form.catalog-search input { padding-right: 52px !important; }
.widget--catalog form.catalog-search input::placeholder { color: #6C6B70; opacity: 1; }
.widget--catalog form.catalog-search input:focus, .widget--catalog select.catalog-filters__select:focus { outline: 0 !important; border-color: #1C4DFF !important; box-shadow: none !important; }
.widget--catalog .catalog-search__button { position: absolute !important; top: 0 !important; right: 0 !important; width: 48px; height: 48px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #1A1B1D !important; }
.widget--catalog .catalog-search__button:hover { color: #1C4DFF !important; }
.widget--catalog select.catalog-filters__select {
  appearance: none; -webkit-appearance: none; padding-right: 40px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A1B1D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 14px center / 16px no-repeat !important;
}

/* ---------- D. FILTER SIDEBAR + RESULTS COLUMN ---------- */
/* sidebar = the .medium-3 that is not the search box; results = .js-results-holder */
.widget--catalog .medium-3.columns:not(.catalog-filters__search) {
  float: left !important; width: 320px !important; margin: 0 0 0 16px !important; padding: 8px !important;   /* 16px in: lines up with "Browse" and the search box */
  background: #F7F6F3 !important; border-radius: 20px;
}
.widget--catalog .js-results-holder { float: left !important; width: calc(100% - 352px) !important; margin: 0 0 0 16px !important; padding: 0 16px !important; }   /* 16px inset each side so cards line up with the search row above */
.widget--catalog .catalog-aggregation { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.widget--catalog .catalog-aggregation + .catalog-aggregation { border-top: 1px solid #E5E3DA !important; }   /* lines only BETWEEN sections, none after the last */
.widget--catalog .catalog-aggregation__header {
  display: block; width: 100%; margin: 0 !important; padding: 16px 14px !important; border: 0 !important; background: none !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif; font-size: 17px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1A1B1D !important;
}
.widget--catalog .catalog-aggregation__header:hover { color: #1C4DFF !important; }
.widget--catalog .catalog-aggregation__header .row { width: auto !important; max-width: none !important; margin: 0 !important; display: flex; align-items: center; }
.widget--catalog .catalog-aggregation__header .column { float: none !important; padding: 0 !important; width: auto !important; }
.widget--catalog .catalog-aggregation__header .column.small-1 { order: 2; margin-left: auto; }   /* chevron to the right */
.widget--catalog .catalog-aggregation__header .column.small-11 { order: 1; flex: 1; }
.widget--catalog .catalog-aggregation__header--label { display: block; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.widget--catalog .catalog-aggregation ul.unlist { margin: 0 !important; padding: 0 14px 16px !important; list-style: none !important; }
.widget--catalog .catalog-aggregation ul.unlist li { margin: 0 !important; padding: 0 !important; }
.widget--catalog .catalog-aggregation__value {
  display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 300 !important; color: #4A4857 !important;
}
.widget--catalog .catalog-aggregation__value:hover { color: #1C4DFF !important; }
.widget--catalog .catalog-aggregation__count { color: #6C6B70 !important; }

/* ---------- E. COURSE CARDS (same look as the panorama tiles) ---------- */
.widget--catalog ul.small-block-grid-1 {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;   /* 300px minimum: 3 across on laptops, 4 on wide screens */
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.widget--catalog ul.small-block-grid-1::before, .widget--catalog ul.small-block-grid-1::after { display: none !important; content: none !important; }
.widget--catalog ul.small-block-grid-1 > li { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.widget--catalog a.catalog-item {
  display: flex !important; flex-direction: column; height: 100%; overflow: hidden;
  background: #F7F6F3 !important; border: 0 !important; border-radius: 20px; box-shadow: none !important;
  text-decoration: none !important; color: #1A1B1D !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.widget--catalog a.catalog-item:hover { transform: translateY(-4px); background: #fff !important; box-shadow: 0 16px 32px rgba(26,27,29,.10), 0 0 0 1px rgba(26,27,29,.10) !important; }
.widget--catalog a.catalog-item:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }
.widget--catalog .catalog-grid-item { display: flex; flex-direction: column; flex: 1; width: 100%; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.widget--catalog .catalog-grid-item > .row { display: flex !important; flex-direction: column; flex: 1; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.widget--catalog .catalog-grid-item > .row::before, .widget--catalog .catalog-grid-item > .row::after { display: none !important; }
.widget--catalog .catalog-grid-item > .row > .column { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.widget--catalog .catalog-grid-item > .row > .column:last-child { flex: 1; display: flex; flex-direction: column; }
.widget--catalog .catalog-grid-item__asset-container { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; background: #E5E3DA; }
.widget--catalog .catalog-grid-item__asset-container img.catalog-grid-item__asset {
  position: absolute !important; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; aspect-ratio: auto; object-fit: cover; object-position: left center; opacity: 1 !important; visibility: visible !important; background: none !important;
}
.widget--catalog .catalog-grid-item__body { display: flex; flex-direction: column; gap: 8px; flex: 1; margin: 0 !important; padding: 20px 22px 22px !important; background: none !important; text-align: left !important; }
.widget--catalog .catalog-grid-item__body hr, .widget--catalog .catalog-grid-item__hr { display: none !important; }
.widget--catalog .catalog-grid-item__source:empty { display: none !important; }
.widget--catalog .catalog-grid-item__source { order: 1; margin: 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #6C6B70 !important; }
.widget--catalog .catalog-grid-item__source strong { font-weight: 500 !important; }
.widget--catalog .catalog-grid-item__title { order: 2; margin: 0 !important; font-size: 21px !important; line-height: 25px !important; font-weight: 500 !important; letter-spacing: 0; text-transform: none !important; color: #000 !important; }
/* "View Details" stays, restyled as a blue text link with an arrow */
.widget--catalog .catalog-grid-item__cta-container { order: 3; margin: auto 0 0 !important; padding: 14px 0 0 !important; max-height: 48px; overflow: hidden; }   /* TI gives this row a 78px grid; the price and View Details only need one line, the rest was empty space under them */
.widget--catalog .catalog-grid-item__cta-container .grid { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; height: auto !important; min-height: 0 !important; }
.widget--catalog .catalog-grid-item__cta-container .grid > div { width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; align-self: center; }
.widget--catalog .catalog-grid-item__cta-container .btn {
  display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1C4DFF !important; white-space: nowrap;
}
.widget--catalog .catalog-grid-item__cta-container .btn::after {
  content: ""; width: 16px; height: 16px; flex: none; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C4DFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.widget--catalog a.catalog-item:hover .catalog-grid-item__cta-container .btn { color: #5454CC !important; }
.widget--catalog a.catalog-item:hover .catalog-grid-item__cta-container .btn::after { transform: translateX(3px); }
.widget--catalog .featured-content-item__authors, .widget--catalog .catalog-item__queue-button { display: none !important; }
/* price: shown if TI prints one (currently none do), above "View Details" */
.widget--catalog .catalog-grid-item__price { order: 3; margin: 4px 0 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1.2 !important; font-weight: 500 !important; color: #1A1B1D !important; }
.widget--catalog .catalog-grid-item__price + .catalog-grid-item__cta-container { order: 4; }

/* pagination line ("Showing 1-41") */
.widget--catalog .pagination { margin: 40px 0 0 !important; font-size: 16px; font-weight: 300; color: #4A4857; }

/* ---------- F. ACTIVITY (dashboard-access widget: Required / My Learning / Events / ... tabs) ---------- */
.widget--dashboard-access { background: none !important; border: 0 !important; box-shadow: none !important; padding-top: 32px !important; padding-bottom: 0 !important; }
.widget--dashboard-access .dashboard-access { background: #F7F6F3 !important; border: 0 !important; border-radius: 20px; box-shadow: none !important; overflow: hidden; }
.widget--dashboard-access .dashboard-access__header { display: flex; align-items: center; gap: 12px; padding: 20px 28px 8px !important; background: none !important; border: 0 !important; font-size: 21px !important; font-weight: 500 !important; color: #1A1B1D !important; }
.widget--dashboard-access .dashboard-access__header .button-expander { width: 28px; height: 28px; padding: 0 !important; border: 1.5px solid #1A1B1D !important; border-radius: 8px; background: #fff !important; color: #1A1B1D !important; display: grid; place-items: center; }
.widget--dashboard-access .dashboard-access__header .button-expander:hover { border-color: #1C4DFF !important; color: #1C4DFF !important; }
.widget--dashboard-access ul.dashboard-access-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 8px 20px 20px !important; list-style: none !important; background: none !important; border: 0 !important; }
.widget--dashboard-access .dashboard-access-tab { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.widget--dashboard-access .dashboard-access-tab > button {
  display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; padding: 0 18px !important;
  border: 0 !important; border-radius: 12px; background: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1A1B1D !important;
  transition: background-color .2s ease, color .2s ease;
}
.widget--dashboard-access .dashboard-access-tab--inactive > button:hover { background: #F2F7FF !important; color: #1C4DFF !important; box-shadow: none !important; }   /* tinted, text stays visible */
.widget--dashboard-access .dashboard-access-tab > button:focus-visible { outline: 3px solid #FF645C !important; outline-offset: 2px; }
.widget--dashboard-access .dashboard-access-tab__label, .widget--dashboard-access .dashboard-access-tab > button:hover .dashboard-access-tab__label { color: inherit !important; }
.widget--dashboard-access .dashboard-access-tab--active > button { background: #fff !important; color: #1A1B1D !important; font-weight: 500 !important; }
.widget--dashboard-access .dashboard-access-tab__label { color: inherit !important; }
.widget--dashboard-access .dashboard-access-tab__count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: #F2F7FF !important; border: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; color: #1A1B1D !important;
}
.widget--dashboard-access .dashboard-access-tab--active .dashboard-access-tab__count { background: #F2F7FF !important; color: #1C4DFF !important; }
/* selected tab: white pill with a 2px blue outline */
.widget--dashboard-access .dashboard-access-tab--active > button, .widget--dashboard-access .dashboard-access-tab--active > button:hover { background: #fff !important; color: #1A1B1D !important; box-shadow: inset 0 0 0 2px #1C4DFF !important; }
/* row buttons in every tab (Continue, View Self Study Course, View Certificate): rounded like the rest */
.widget--dashboard-access .dashboard-access a.btn, .widget--dashboard-access .dashboard-access button.btn, .widget--dashboard-access .dashboard-access .btn--primary,
.widget--dashboard-access .dashboard-access [class*="btn"]:not(.button-expander) { border-radius: 12px !important; font-family: 'League Spartan', sans-serif !important; font-weight: 500 !important; }

/* ---------- G. FILTER BAR: search, Filter by, Sort by and the three view buttons all the same 48px ---------- */
.widget--catalog .catalog-filters > .columns { float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.widget--catalog .catalog-filters__sort { flex: 0 0 160px; width: 160px !important; }          /* also removes TI's vertical rule before Sort by */
.widget--catalog .catalog-filters__sort .catalog-sort, .widget--catalog .catalog-filters select { width: 100% !important; height: 48px !important; min-height: 48px; border-radius: 12px !important; font-size: 16px !important; }
.widget--catalog .catalog-search-bar > .catalog-filters { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap !important; }
.widget--catalog .catalog-filters__search { min-width: 0; }
.widget--catalog .catalog-display-type { display: flex !important; flex: none; gap: 8px; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.widget--catalog .catalog-display-type .btn {
  display: grid !important; place-items: center; width: 48px; height: 48px; margin: 0 !important; padding: 0 !important;
  border: 1px solid #D5D3CB !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; color: #4A4857 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.widget--catalog .catalog-display-type .btn:hover { background: #F2F7FF !important; border-color: #1C4DFF !important; color: #1C4DFF !important; }
.widget--catalog .catalog-display-type .btn.border-black { background: #1A1B1D !important; border-color: #1A1B1D !important; color: #fff !important; }   /* the view that is on */
.widget--catalog .catalog-display-type .btn:focus-visible { outline: 3px solid #FF645C !important; outline-offset: 2px; }
.widget--catalog .catalog-display-type .btn i { font-size: 20px; line-height: 1; color: inherit !important; }

/* ---------- H. LIST VIEW (the first view button): image left, text middle, button right ---------- */
.widget--catalog a.catalog-item:has(.catalog-list-item) { height: auto; margin-bottom: 16px !important; }
.widget--catalog .catalog-list-item {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; grid-template-areas: "img type cta" "img title cta" "img desc cta";
  column-gap: 28px; row-gap: 8px; align-items: start; width: 100%; margin: 0 !important; padding: 16px !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
.widget--catalog .catalog-list-item .row, .widget--catalog .catalog-list-item__title-container, .widget--catalog .catalog-list-item__body,
.widget--catalog .catalog-list-item .columns { display: contents !important; }
.widget--catalog .catalog-list-item .row::before, .widget--catalog .catalog-list-item .row::after { display: none !important; }
.widget--catalog .catalog-list-item [class*="asset"] { border-radius: 12px; overflow: hidden; }
.widget--catalog .catalog-list-item__asset { grid-area: img; align-self: start; display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; object-position: left center; padding: 0 !important; border-radius: 12px !important; max-width: 100% !important; clip-path: inset(0 round 12px); }
.widget--catalog .catalog-list-item__info { grid-area: type; margin: 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #6C6B70 !important; align-self: start; }
.widget--catalog .catalog-list-item__info strong { font-weight: 500 !important; }
.widget--catalog .catalog-list-item__title { grid-area: title; margin: 0 !important; padding: 0 !important; font-size: 24px !important; line-height: 28px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: #000 !important; }
.widget--catalog .catalog-list-item__description { grid-area: desc; margin: 0 !important; font-size: 16px !important; line-height: 23px !important; font-weight: 300 !important; color: #4A4857 !important; align-self: start; }
.widget--catalog .catalog-list-item__description:empty, .widget--catalog .catalog-list-item__description .editor-content:empty { display: none; }
.widget--catalog .catalog-list-item__cta-container { grid-area: cta; align-self: end; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }

/* primary button used by the list view and the timeline view */
.widget--catalog .catalog-list-item__cta-container .btn, .widget--catalog .catalog-calendar .btn--primary {
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-height: 48px; margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
  transition: background-color .2s ease;
}
.widget--catalog a.catalog-item:hover .catalog-list-item__cta-container .btn, .widget--catalog .catalog-calendar .btn--primary:hover { background: #5454CC !important; }

/* ---------- I. TIMELINE VIEW (the clock button): one card per month ---------- */
.widget--catalog .catalog-calendar h4 { margin: 0 0 16px !important; font-size: 28px !important; line-height: 1.15 !important; font-weight: 500 !important; letter-spacing: -.01em; text-transform: none !important; color: #1A1B1D !important; }
.widget--catalog .catalog-calendar table.catalog-calendar__table {
  width: 100%; margin: 0 0 40px !important; border: 0 !important; border-collapse: separate; border-spacing: 0; border-radius: 20px; overflow: hidden; background: #F7F6F3 !important;
}
.widget--catalog .catalog-calendar__table thead, .widget--catalog .catalog-calendar__table thead tr { background: none !important; }
.widget--catalog .catalog-calendar__table th {
  padding: 18px 20px 12px !important; border: 0 !important; background: none !important; text-align: left;
  font-size: 12px !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #6C6B70 !important;
}
.widget--catalog .catalog-calendar__table tbody tr { background: none !important; border: 0 !important; }
.widget--catalog .catalog-calendar__table td { padding: 16px 20px !important; border: 0 !important; border-top: 1px solid #E5E3DA !important; background: none !important; vertical-align: middle; font-size: 16px !important; font-weight: 400 !important; color: #1A1B1D !important; }
.widget--catalog .catalog-calendar__table .catalog-aggregation__expander { color: #1C4DFF !important; }
.widget--catalog .catalog-calendar__table td .btn--link { border: 0 !important; background: none !important; box-shadow: none !important; }

.widget--catalog .catalog-calendar__table img { display: block; width: 100% !important; max-width: 420px; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; padding: 0 !important; border-radius: 12px !important; clip-path: inset(0 round 12px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .widget--dashboard-stats ul.dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget--catalog ul.small-block-grid-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .widget--catalog .catalog-search-bar { flex-direction: column; }
  .widget--catalog .catalog-filters { flex-direction: column; }
  .widget--catalog .catalog-filters__search, .widget--catalog .catalog-filters__selections { flex: none; width: 100% !important; }
  .widget--catalog .medium-3.columns:not(.catalog-filters__search), .widget--catalog .js-results-holder { float: none !important; width: 100% !important; margin: 0 0 24px !important; }
}
@media (max-width: 860px) {
  .widget--catalog .catalog-list-item { grid-template-columns: 1fr; grid-template-areas: "img" "type" "title" "desc" "cta"; }
  .widget--catalog .catalog-filters__sort { flex: none; width: 100% !important; }
}
@media (max-width: 560px) {
  .widget--dashboard-stats ul.dashboard-stats, .widget--catalog ul.small-block-grid-1 { grid-template-columns: 1fr; }
}
/* ========================== END LEARNER DASHBOARD ========================== */













/* ==========================================================================
   Caseware Academy PANORAMA pages (all regions + employees) v1, started 19 Oct 2026
   Shared by every panorama home page. Widgets get a cwp- class (p = panorama); the homepage uses cw- and is untouched.
   Design: employee-panorama-prototype.html. Add new sections to the BOTTOM of this block as they are built.

   SECTION 1  Eyebrow + Hero (dark, squared, inside the page container)
     Widget A  Single Column, CSS class cwp-eyebrow   body text only (title and subtitle empty)
     Widget B  Single Column, CSS class cwp-hero      Title, Subtitle (the strapline), body paragraphs
   ========================================================================== */

/* ---------- A. EYEBROW (dark cap above the hero) ---------- */
.cwp-eyebrow.widget--one-column {
  width: auto !important; max-width: none !important;
  margin: 0 0 -1px !important; padding: 88px 0 25px !important;      /* -1px / +1px: overlaps the hero so no seam shows */
  background: #1A1B1D !important; border: 0 !important; border-radius: 0;
  position: relative; z-index: 2;
}
.cwp-eyebrow.widget--one-column > .ember-view { max-width: 1152px !important; margin: 0 auto !important; padding: 0 !important; text-align: left !important; }
.cwp-eyebrow .widget__title, .cwp-eyebrow .widget__subtitle { display: none !important; }
.cwp-eyebrow .row { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.cwp-eyebrow .columns { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.cwp-eyebrow .editor-content, .cwp-eyebrow .editor-content.indent-list { margin: 0 !important; padding: 0 !important; }
.cwp-eyebrow .editor-content p {
  display: flex; align-items: center; gap: 12px; margin: 0 !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif; font-size: 13px; line-height: 1.2; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #fff !important;
}
.cwp-eyebrow .editor-content p::before {                                  /* the coral dot */
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #FF645C; position: relative; top: -2px;
}

/* ---------- B. HERO ---------- */
.cwp-hero.widget--one-column {
  width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 0 96px !important;
  border: 0 !important; border-radius: 0;
  background:
    radial-gradient(ellipse 60% 75% at 96% 80%, rgba(28,77,255,.55) 0%, rgba(84,84,204,.20) 45%, rgba(84,84,204,0) 75%),
    #1A1B1D !important;
}
.cwp-hero.widget--one-column > .ember-view { max-width: 1152px !important; margin: 0 auto !important; padding: 0 !important; text-align: left !important; }
.cwp-hero .row { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.cwp-hero .columns { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.cwp-hero .editor-content, .cwp-hero .editor-content.indent-list { margin: 0 !important; padding: 0 !important; }

.cwp-hero .widget__title {
  margin: 0 0 20px !important; max-width: 760px; padding: 0 !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif; font-size: clamp(40px, 5.6vw, 56px) !important; line-height: 1 !important;
  font-weight: 500 !important; letter-spacing: -0.0643em; text-transform: none !important; color: #fff !important;
}
.cwp-hero .widget__subtitle {
  margin: 0 0 22px !important; max-width: 640px; padding: 0 !important; text-align: left !important;
  font-size: 22px !important; line-height: 30px !important; font-weight: 400 !important; color: #E5E3DA !important;
}
.cwp-hero .editor-content, .cwp-hero .editor-content p {
  max-width: 612px; text-align: left !important;
  font-size: 17px; line-height: 1.6; font-weight: 300; color: #BDBAC8 !important;
}
.cwp-hero .editor-content p { margin: 0 0 8px !important; }

/* below the 1152 column the text keeps a 24px inset, matching the other sections */
@media (max-width: 1200px) {
  .cwp-eyebrow.widget--one-column > .ember-view, .cwp-hero.widget--one-column > .ember-view { padding: 0 24px !important; }
}
@media (max-width: 760px) {
  .cwp-eyebrow.widget--one-column { padding-top: 56px !important; }
  .cwp-hero.widget--one-column { padding-bottom: 64px !important; }
}

/* ==========================================================================
   SECTION 2  Explore heading + Featured Content tiles (added 19 Oct 2026)
     Widget C  Single Column, CSS class cwp-explore   Title, Subtitle, body = one link (styled as the Explore Learning button)
     Widget D  Featured Content Tiles (Standard), CSS class cwp-tiles   4 items, image + type + title + description, no price
   ========================================================================== */

/* ---------- C. EXPLORE HEADING + BUTTON ---------- */
.cwp-explore.widget--one-column {
  /* Light grey band, same width as the hero. Side padding keeps the text on the 1152px content column. */
  width: auto !important; max-width: none !important; margin: 0 !important;
  padding: 72px max(24px, calc((100% - 1152px) / 2)) 72px !important;   /* same space top and bottom */
  background: #FAFAF9 !important; border: 0 !important;
}
.cwp-explore.widget--one-column > .ember-view { max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cwp-explore .row { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.cwp-explore .columns { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.cwp-explore .editor-content, .cwp-explore .editor-content.indent-list { margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cwp-explore .widget__title {
  margin: 0 0 8px !important; padding: 0 !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif; font-size: clamp(34px, 4.4vw, 48px) !important; line-height: 1.1 !important;
  font-weight: 400 !important; letter-spacing: -0.0325em; text-transform: none !important; color: #1A1B1D !important;
}
.cwp-explore .widget__subtitle {
  margin: 0 0 28px !important; max-width: 520px; padding: 0 !important; text-align: left !important;
  font-size: 18px !important; line-height: 27px !important; font-weight: 300 !important; color: #4A4857 !important;
}
.cwp-explore .editor-content p { margin: 0 !important; }
/* the link in the body (or TI's own CTA button) becomes the gradient button */
.cwp-explore .editor-content a, .cwp-explore .widget__cta a {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px !important; border: 0 !important; border-radius: 12px !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important;
  text-decoration: none !important; transition: background-color .2s ease;
}
.cwp-explore .editor-content a::after, .cwp-explore .widget__cta a::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cwp-explore .editor-content a:hover, .cwp-explore .widget__cta a:hover { background: #5454CC !important; }
.cwp-explore .editor-content a:focus-visible, .cwp-explore .widget__cta a:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }

/* ---------- D. FEATURED CONTENT TILES (Standard) ---------- */
.cwp-tiles {
  width: auto !important; max-width: 1152px !important; margin: 0 auto !important; padding: 72px 0 0 !important;   /* top = cwp-explore (our standard section padding); bottom 0, the spacing lives in cwp-actions so the hover shadow is never clipped */
  background: none !important; border: 0 !important;
}
/* Optional section title set in the tiles widget (e.g. "Get started guides"): no rule underneath, one weight heavier */
.cwp-tiles hr.hr__accent { display: none !important; }
/* TI names the title wrapper widget__alt-title__container, or widget__alt-title__container--with-cta when a "See more" link is set, so match both */
.cwp-tiles [class*="widget__alt-title__container"] h3, .cwp-tiles h3 { font-weight: 400 !important; font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -0.01em; color: #1A1B1D !important; margin: 0 !important; }
.cwp-tiles [class*="widget__alt-title__container"] { margin: 0 0 32px !important; padding: 0 !important; }   /* space between the title and the cards */
/* "See more" link TI adds beside the section title: larger, underlined, with an arrow (any link outside the tile cards) */
.cwp-tiles a:not(.catalog-item) {
  display: inline-flex !important; align-items: center; gap: 8px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif; font-size: 18px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #1C4DFF !important;
  text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.cwp-tiles a:not(.catalog-item)::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C4DFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cwp-tiles a:not(.catalog-item):hover { color: #5454CC !important; }
.cwp-tiles a:not(.catalog-item):focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }
.cwp-tiles .widget__title, .cwp-tiles .widget__subtitle { display: none !important; }
.cwp-tiles .row { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.cwp-tiles ul.featured-content-block-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.cwp-tiles ul.featured-content-block-grid::before, .cwp-tiles ul.featured-content-block-grid::after { display: none !important; content: none !important; }
.cwp-tiles ul.featured-content-block-grid > li { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }

/* the tile = the link */
.cwp-tiles a.catalog-item {
  display: flex !important; flex-direction: column; height: 100%; overflow: hidden;
  background: #F7F6F3 !important; border: 0 !important; border-radius: 20px; box-shadow: none !important;
  text-decoration: none !important; color: #1A1B1D !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cwp-tiles a.catalog-item:hover { transform: translateY(-4px); background: #fff !important; box-shadow: 0 16px 32px rgba(26,27,29,.10), 0 0 0 1px rgba(26,27,29,.10) !important; }
.cwp-tiles a.catalog-item:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }
.cwp-tiles .catalog-grid-item { display: flex; flex-direction: column; flex: 1; width: 100%; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }

/* the widget row and column carry a 16px gutter: remove it so the tiles line up with the heading */
.cwp-tiles .row > .columns, .cwp-tiles .small-12.columns { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }

/* TI wraps the image and the text in two column divs with 14px side padding: remove it so the image runs edge to edge */
.cwp-tiles .catalog-grid-item > .row { display: flex !important; flex-direction: column; flex: 1; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.cwp-tiles .catalog-grid-item > .row::before, .cwp-tiles .catalog-grid-item > .row::after { display: none !important; }
.cwp-tiles .catalog-grid-item > .row > .column { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.cwp-tiles .catalog-grid-item > .row > .column:last-child { flex: 1; display: flex; flex-direction: column; }

/* image: 16 by 9 box, the img fills it (course covers are 16:9, so nothing is cropped) */
.cwp-tiles .catalog-grid-item__asset-container {
  position: relative; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
  margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; background: #E5E3DA;
}
.cwp-tiles .catalog-grid-item__asset-container img.catalog-grid-item__asset {
  position: absolute !important; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; aspect-ratio: auto; object-fit: cover; object-position: left center; opacity: 1 !important; visibility: visible !important; background: none !important;
}
/* no divider rule, and no empty source line */
.cwp-tiles .catalog-grid-item__body { flex: 1; }
.cwp-tiles .catalog-grid-item__body hr, .cwp-tiles .catalog-grid-item__hr { display: none !important; }
.cwp-tiles .catalog-grid-item__source:empty { display: none !important; }

/* text */
.cwp-tiles .catalog-grid-item__body { display: flex; flex-direction: column; gap: 8px; flex: 1; margin: 0 !important; padding: 20px 22px 24px !important; background: none !important; text-align: left !important; }
.cwp-tiles .catalog-grid-item__source {
  order: 1; margin: 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important;
  letter-spacing: .12em; text-transform: uppercase; color: #6C6B70 !important;
}
.cwp-tiles .catalog-grid-item__source strong { font-weight: 500 !important; }
.cwp-tiles .catalog-grid-item__title {
  order: 2; margin: 0 !important; font-size: 21px !important; line-height: 25px !important; font-weight: 500 !important; letter-spacing: 0; text-transform: none !important; color: #000 !important;
}
.cwp-tiles .catalog-grid-item__description {
  order: 3; margin: 0 !important; font-size: 15px !important; line-height: 21px !important; font-weight: 300 !important; color: #4A4857 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* not used on this page: authors, queue and text CTA */
.cwp-tiles .featured-content-item__authors, .cwp-tiles .catalog-grid-item__cta-container,
.cwp-tiles .catalog-item__queue-button { display: none !important; }
/* price: shown if TI prints one (currently none do); sits at the bottom of the card */
.cwp-tiles .catalog-grid-item__price { order: 4; margin: auto 0 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1.2 !important; font-weight: 500 !important; color: #1A1B1D !important; }

@media (max-width: 1200px) {
  .cwp-explore.widget--one-column, .cwp-tiles { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 1100px) { .cwp-tiles ul.featured-content-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cwp-explore.widget--one-column { padding-top: 56px !important; } }
@media (max-width: 520px) {
  .cwp-tiles ul.featured-content-block-grid { grid-template-columns: 1fr; }
  .cwp-explore .editor-content a, .cwp-explore .widget__cta a { width: 100%; }
}

/* ==========================================================================
   SECTION 3  Hairline + action cards (added 19 Oct 2026)
     Widget E  Text Columns (3), CSS class cwp-actions
               Each column body = Heading 3, one paragraph of text, then one paragraph holding a single link (the button).
               Column 1 = Log In (gradient), column 2 = Request Access (purple), column 3 = Contact Us (purple, light blue card, full width).
   ========================================================================== */
.cwp-actions {
  width: auto !important; max-width: 1152px !important; margin: 0 auto !important; padding: 72px 0 88px !important;   /* 72px above the hairline (the tiles above have no bottom padding) */
  background: none !important; border: 0 !important;
}
.cwp-actions::before {                                                   /* the hairline above the cards */
  content: ""; display: block !important; width: auto; height: 0; margin: 0 0 72px; border-top: 1px solid #E5E3DA;
}
.cwp-actions > .ember-view { max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cwp-actions .widget__title, .cwp-actions .widget__subtitle { display: none !important; }

/* the row of columns becomes a 2-column grid; the third card spans both */
.cwp-actions .row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.cwp-actions .row::before, .cwp-actions .row::after { display: none !important; content: none !important; }
.cwp-actions .row > .columns {
  float: none !important; width: auto !important; margin: 0 !important; padding: 36px !important;
  background: #F7F6F3; border-radius: 20px;
}
.cwp-actions .row > .columns:last-child { grid-column: 1 / -1; background: #F2F7FF; }

/* card content */
.cwp-actions .editor-content, .cwp-actions .editor-content.indent-list {
  display: flex; flex-direction: column; align-items: flex-start; height: 100%; margin: 0 !important; padding: 0 !important; text-align: left !important;
}
.cwp-actions .editor-content h3, .cwp-actions .editor-content h2, .cwp-actions .editor-content h4 {
  margin: 0 0 10px !important; padding: 0 !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif; font-size: 28px !important; line-height: 1.15 !important; font-weight: 500 !important; letter-spacing: -.01em; text-transform: none !important; color: #1A1B1D !important;
}
/* TI's editor stores the sentence in a div (or a p): style both. Empty links left in the editor are hidden. */
.cwp-actions .editor-content a:empty, .cwp-actions .editor-content :is(h2, h3, h4) a:has(> br:only-child) { display: none !important; }   /* only hide empty links; a link with a leading line break AND text (UK page) must still show */
.cwp-actions .editor-content p:has(> a:empty) { display: none !important; }
.cwp-actions .editor-content p, .cwp-actions .editor-content > div {
  max-width: 440px; margin: 0 0 28px !important; text-align: left !important;
  font-size: 17px; line-height: 25px; font-weight: 300; color: #4A4857 !important;
}
/* the link paragraph may also hold the sentence (TI editors often keep them together): stack them with a fixed gap, button at the bottom */
.cwp-actions .editor-content p:has(a) {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 28px; flex: 1;
  max-width: none !important; margin: 0 !important; padding: 0 !important;
}
.cwp-actions .editor-content p:has(a) > br { display: none !important; }
.cwp-actions .editor-content p:has(a) a { margin-top: auto !important; }
.cwp-actions .editor-content p:empty, .cwp-actions .editor-content p:has(> br:only-child) { display: none !important; }   /* stray empty paragraphs from the editor */

/* the link = button */
html body .cwp-actions .row > .columns .editor-content > p:not(:has(a)), html body .cwp-actions .row > .columns .editor-content > div { margin: 0 0 28px !important; }   /* gap between the text and the button */
.cwp-actions .editor-content a br { display: none !important; }
.cwp-actions .editor-content a {
  display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: top;
  height: 48px !important; min-height: 48px; margin: 0 !important; padding: 0 28px !important; border: 0 !important; border-radius: 12px !important;
  background: #5454CC !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important;
  transition: background-color .2s ease;
}
.cwp-actions .editor-content a:hover { background: #1C4DFF !important; }
.cwp-actions .row > .columns:first-child .editor-content a { background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; }
.cwp-actions .row > .columns:first-child .editor-content a:hover { background: #5454CC !important; }
.cwp-actions .editor-content a:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }

/* third card: text on the left, button on the right */
.cwp-actions .row > .columns:last-child .editor-content {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; height: auto;
}
.cwp-actions .row > .columns:last-child .editor-content > h3, .cwp-actions .row > .columns:last-child .editor-content > h2, .cwp-actions .row > .columns:last-child .editor-content > h4 { grid-column: 1; }
html body .cwp-actions .row > .columns:last-child .editor-content > p:not(:has(a)), html body .cwp-actions .row > .columns:last-child .editor-content > div { grid-column: 1; margin: 0 !important; }
.cwp-actions .row > .columns:last-child .editor-content > p:has(a) { display: contents !important; }   /* its sentence and its link become grid items of the card */
.cwp-actions .row > .columns:last-child .editor-content > p:has(a) a { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0 !important; }

@media (max-width: 1200px) { .cwp-actions { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 760px) {
  .cwp-actions .row { grid-template-columns: 1fr; }
  .cwp-actions .row > .columns:last-child .editor-content { display: flex; }
  .cwp-actions .row > .columns:last-child .editor-content > p { margin: 0 0 28px !important; }
  .cwp-actions .row > .columns:last-child .editor-content > p:has(a) { display: flex !important; margin: 0 !important; }
  .cwp-actions .row > .columns:last-child .editor-content > p:has(a) a { grid-column: auto; grid-row: auto; align-self: flex-start; margin-top: auto !important; }
}
@media (max-width: 520px) {
  .cwp-actions .row > .columns { padding: 28px 24px !important; }
  .cwp-actions .editor-content a { width: 100%; }
  .cwp-actions .editor-content p:has(a) { width: 100%; }
}













/* ==========================================================================
   CASEWARE ACADEMY — REDEEM PAGE  (v1, 24 Oct 2026)
   Page: /redeem/<region>?preview=...   (same form as Register, different TI markup)
   Scoping: body.redeem + .widget--redemption-form, so nothing else is touched.
   Look matches the register page: photo band inset 16px like the footer, white card, 48px fields, gradient button.
   Paste: Site Builder > Custom Code > CSS, BELOW the register block. Replace this block each time, never add a second copy.
   ========================================================================== */

/* ---------- PHOTO BAND + CARD ---------- */
body.redeem .home__content {
  margin: 0 16px !important; padding: 64px 24px 88px !important;
  background: #1A1B1D url("https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fill,w_2000/v1/course-uploads/be8a5419-f0c0-4ffa-8455-1d61f2654863/t7fzi6cm5x38-Registration-background.jpg") center / cover no-repeat;   /* PHOTO: same image as Register */
}
body.redeem .widget--redemption-form { width: 100% !important; max-width: 560px; min-width: 0; flex: 0 1 560px; margin: 0 auto !important; padding: 0 !important; float: none !important; }   /* 100% (not auto): in a flex parent "auto" shrinks the card to its content */
/* this widget also carries the sign-in page class "cw-auth", whose rule makes it a 2-column grid (that is what squeezed the card to one narrow column). Turn that off here. */
body.redeem .widget--redemption-form.cw-auth { display: block !important; grid-template-columns: none !important; gap: 0 !important; align-items: normal !important; text-align: left !important; }
body.redeem .widget--redemption-form > div { padding: 40px 40px 36px !important; border-radius: 28px; background: #fff !important; box-shadow: 0 24px 64px rgba(26,27,29,.28); box-sizing: border-box; }

/* "Sign up" heading (same style as Register's title). Drawn by CSS because the widget has no title set; if you add a widget title in the admin, delete this rule */
body.redeem .widget--redemption-form > div::before { content: "Sign up"; display: block; margin: 0 0 24px; text-align: center; font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -0.0325em; color: #1A1B1D; }

/* TI's grid: every row and "centred half-width" column fills the card, so left and right padding are equal */
html body.redeem .widget--redemption-form .row { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.redeem .widget--redemption-form .row::before, body.redeem .widget--redemption-form .row::after { display: none !important; content: none !important; }
html body.redeem .widget--redemption-form .row > .medium-12.columns, html body.redeem .widget--redemption-form .row > .medium-6.medium-centered.columns {
  float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box;
}

/* ---------- INTRO LINE + "Already a member? Sign in" ---------- */
html body.redeem .widget--redemption-form .row > .widget__subtitle.columns { margin: 0 0 24px !important; text-align: center !important; }   /* 24px gap before "Already a Member?" (the grid rule above was zeroing it) */
body.redeem .widget--redemption-form .widget__subtitle h5 { margin: 0 !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: 0 !important; color: #4A4857 !important; }
body.redeem .widget--redemption-form p.already-member { margin: 0 0 20px !important; }
body.redeem .widget--redemption-form p.already-member strong { display: block; padding: 14px 16px; border: 1px solid #D5E1F5; border-radius: 12px; background: #F2F7FF; text-align: center; font-size: 16px; font-weight: 400; color: #6C6B70; }
body.redeem .widget--redemption-form p.already-member .btn--link { display: inline !important; min-height: 0 !important; margin: 0 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #1C4DFF !important; text-decoration: underline; text-transform: none !important; letter-spacing: 0 !important; }
body.redeem .widget--redemption-form p.already-member .btn--link:hover { color: #5454CC !important; }

/* ---------- FIELDS ---------- */
body.redeem .widget--redemption-form .form-group { margin: 0 0 12px !important; padding: 0 !important; }
body.redeem .widget--redemption-form .form-group:has(.name-input) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }   /* First / Last name side by side */
body.redeem .widget--redemption-form .name-input { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0; }
body.redeem .widget--redemption-form .field, body.redeem .widget--redemption-form .field__input-wrapper { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.redeem .widget--redemption-form label { margin: 0 0 6px; font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #6C6B70; }
body.redeem .widget--redemption-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), body.redeem .widget--redemption-form select, body.redeem .widget--redemption-form textarea {
  width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box;
  border: 1px solid #D5D3CB !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; color: #1A1B1D !important;
}
body.redeem .widget--redemption-form input::placeholder { color: #6C6B70; opacity: 1; }
body.redeem .widget--redemption-form input:focus, body.redeem .widget--redemption-form select:focus { outline: 0 !important; border-color: #1C4DFF !important; box-shadow: 0 0 0 3px rgba(28,77,255,.14) !important; }
body.redeem .widget--redemption-form .error, body.redeem .widget--redemption-form small.error, body.redeem .widget--redemption-form .field__error { margin: 6px 0 0 !important; font-size: 14px !important; font-weight: 400 !important; color: #C2352E !important; background: none !important; }
body.redeem .widget--redemption-form input.error, body.redeem .widget--redemption-form .has-error input { border-color: #C2352E !important; }

/* ---------- ADDITIONAL INFORMATION ---------- */
body.redeem .widget--redemption-form .panel--alt { margin: 4px 0 20px !important; padding: 20px 20px 8px !important; border: 0 !important; border-radius: 20px !important; background: #F7F6F3 !important; box-shadow: none !important; }
body.redeem .widget--redemption-form .panel--alt h4 { margin: 0 0 14px !important; font-size: 18px !important; line-height: 1.2 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1A1B1D !important; }
body.redeem .widget--redemption-form .panel--alt .field { margin: 0 0 12px !important; }

/* ---------- RULE + TERMS + SUBMIT ---------- */
body.redeem .widget--redemption-form hr { margin: 8px 0 20px !important; border: 0 !important; border-top: 1px solid #E5E3DA !important; }
body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; }
html body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) > .columns { width: auto !important; float: none !important; flex: none; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) > .columns:first-child { flex: 1 1 auto; min-width: 0; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper { display: block !important; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper label.row { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 10px; width: auto !important; margin: 0 !important; padding: 0 !important; text-transform: none; letter-spacing: 0; cursor: pointer; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper label.row > .small-1 { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper label.row > .small-11 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper input[type="checkbox"] { display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #1C4DFF; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper p { margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 300 !important; color: #4A4857 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper .btn--link, body.redeem .widget--redemption-form .terms__checkbox__wrapper a { display: inline !important; min-height: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-family: 'League Spartan', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #1C4DFF !important; text-decoration: underline; }
body.redeem .widget--redemption-form button.btn--primary {
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 140px; min-height: 48px; margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important;
  transition: background-color .2s ease;
}
body.redeem .widget--redemption-form button.btn--primary:hover { background: #5454CC !important; }
body.redeem .widget--redemption-form :is(button, a, input):focus-visible { outline: 3px solid #FF645C !important; outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  body.redeem .home__content { padding: 32px 16px 56px !important; }
  body.redeem .widget--redemption-form > div { padding: 28px 20px 24px !important; border-radius: 24px; }
  body.redeem .widget--redemption-form .form-group:has(.name-input) { grid-template-columns: 1fr; gap: 12px; }
  body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) { flex-direction: column; align-items: stretch; }
  body.redeem .widget--redemption-form button.btn--primary { width: 100% !important; }
}
/* ========================== END REDEEM PAGE ========================== */












/* ==========================================================================
   CASEWARE ACADEMY — REGISTER PAGE  (v1, 21 Oct 2026)
   Page: /register?courseId=...   Style reference: Figma "Thought Industries Portal Design" node 15-978
   Scoping: body.register + .widget--registration-form, so nothing else is touched.
   The header (logo, Sign in, Basket) and footer stay as they are; the photo sits behind the form only.
   Photo: URL is in the ONE line marked PHOTO below.
   Paste: Site Builder > Custom Code > CSS, BELOW the course-page block. Replace this block each time, never add a second copy.
   ========================================================================== */

/* ---------- PHOTO BAND + CARD ---------- */
body.register .home__content {
  margin: 0 16px !important;   /* same 16px side inset as the footer */
  padding: 64px 24px 88px !important;
  background: #1A1B1D url("https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fill,w_2000/v1/course-uploads/be8a5419-f0c0-4ffa-8455-1d61f2654863/t7fzi6cm5x38-Registration-background.jpg") center / cover no-repeat;   /* PHOTO: w_2000 = wide version of the w_800 link, so it stays sharp on big screens */
}
body.register .widget--registration-form { width: auto !important; max-width: 560px; margin: 0 auto !important; padding: 0 !important; float: none !important; }
body.register .widget--registration-form > div {
  padding: 40px 40px 36px !important; border-radius: 28px; background: #fff !important; box-shadow: 0 24px 64px rgba(26,27,29,.28);
}
body.register .widget--registration-form .widget__title {
  margin: 0 0 24px !important; text-align: center; font-size: 32px !important; line-height: 1.15 !important; font-weight: 400 !important; letter-spacing: -0.0325em; text-transform: none !important; color: #1A1B1D !important;
}

/* TI's grid inside the form: undo the 3-column offset so the form fills the card */
body.register .widget--registration-form .row { width: auto !important; max-width: none !important; margin: 0 !important; }
body.register .widget--registration-form .row::before, body.register .widget--registration-form .row::after { display: none !important; content: none !important; }
body.register .widget--registration-form .row > .columns, body.register .widget--registration-form .row > [class*="small-offset"], body.register .widget--registration-form [class*="small-offset"] {
  float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important;
}

/* every wrapper between the card and the fields is full width, so left and right padding are equal */
html body.register .widget--registration-form .row > div, html body.register .widget--registration-form .row > div > div:not(.form-group):not(.panel):not(.field) { max-width: none !important; box-sizing: border-box; }
html body.register .widget--registration-form .row > div:not(.small):not(.small-6.columns):not(.medium-8):not(.medium-4) { width: 100% !important; margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; }
body.register .widget--registration-form form, body.register .widget--registration-form .form-group, body.register .widget--registration-form .field { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- "Already a member? Sign in" + required note ---------- */
body.register .widget--registration-form .text-centered { margin: 0 0 10px !important; text-align: left !important; }
body.register .widget--registration-form .text-centered strong {
  display: block; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #D5E1F5; border-radius: 12px; background: #F2F7FF; text-align: center;
  font-size: 16px; font-weight: 400; color: #6C6B70;
}
body.register .widget--registration-form .text-centered strong a { font-weight: 500; color: #1C4DFF !important; text-decoration: underline; }
body.register .widget--registration-form .text-centered strong a:hover { color: #5454CC !important; }
body.register .widget--registration-form .text-xs { margin: 0 !important; font-size: 14px !important; line-height: 1.3; font-weight: 300; color: #6C6B70; }

/* ---------- FIELDS ---------- */
body.register .widget--registration-form .form-group { margin: 0 0 12px !important; padding: 0 !important; }
body.register .widget--registration-form .row > .small-6.columns { width: 50% !important; float: left !important; }   /* First / Last name side by side */
body.register .widget--registration-form .row > .small-6.columns:first-child { padding-right: 8px !important; }
body.register .widget--registration-form .row > .small-6.columns:last-child { padding-left: 8px !important; }
body.register .widget--registration-form .row::after { display: table !important; content: "" !important; clear: both; }
body.register .widget--registration-form label { margin: 0 0 6px; font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #6C6B70; }
body.register .widget--registration-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), body.register .widget--registration-form select, body.register .widget--registration-form textarea {
  width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
  border: 1px solid #D5D3CB !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; color: #1A1B1D !important;
}
body.register .widget--registration-form input::placeholder { color: #6C6B70; opacity: 1; }
body.register .widget--registration-form input:focus, body.register .widget--registration-form select:focus { outline: 0 !important; border-color: #1C4DFF !important; box-shadow: 0 0 0 3px rgba(28,77,255,.14) !important; }
body.register .widget--registration-form .field__input-wrapper { margin: 0 !important; }
/* validation messages */
body.register .widget--registration-form .error, body.register .widget--registration-form small.error, body.register .widget--registration-form .field__error { margin: 6px 0 0 !important; font-size: 14px !important; font-weight: 400 !important; color: #C2352E !important; background: none !important; }
body.register .widget--registration-form input.error, body.register .widget--registration-form .has-error input { border-color: #C2352E !important; }

/* ---------- ADDITIONAL INFORMATION panel ---------- */
body.register .widget--registration-form .panel--alt { margin: 4px 0 20px !important; padding: 20px 20px 8px !important; border: 0 !important; border-radius: 20px !important; background: #F7F6F3 !important; box-shadow: none !important; }
body.register .widget--registration-form .panel--alt h4 { margin: 0 0 14px !important; font-size: 18px !important; line-height: 1.2 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1A1B1D !important; }

body.register .widget--registration-form .panel--alt .field, body.register .widget--registration-form .panel--alt .form-group { margin: 0 0 12px !important; }   /* space between Company Name and Client ID */

/* ---------- reCAPTCHA (Google's own widget, only spaced) ---------- */
body.register .widget--registration-form .g-recaptcha, body.register .widget--registration-form [class*="recaptcha"] { margin: 0 0 16px; }

/* ---------- TERMS + SUBMIT ---------- */
body.register .widget--registration-form .row:has(.terms__checkbox__wrapper) { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; }
body.register .widget--registration-form .row:has(.terms__checkbox__wrapper) > .columns { width: auto !important; flex: none; }
body.register .widget--registration-form .row:has(.terms__checkbox__wrapper) > .columns:first-child { flex: 1; min-width: 0; }
body.register .widget--registration-form .terms__checkbox__wrapper { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; text-align: left !important; text-transform: none; letter-spacing: 0; font-size: 15px !important; font-weight: 300; line-height: 1.4 !important; color: #4A4857; }
/* checkbox and sentence share one centred line (TI stacked the checkbox above an indented label) */
body.register .widget--registration-form .terms__checkbox__wrapper > * { position: static !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 15px !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; }
body.register .widget--registration-form .terms__checkbox__wrapper > label { display: block !important; flex: 1; min-width: 0; }
body.register .widget--registration-form .terms__checkbox__wrapper label span, body.register .widget--registration-form .terms__checkbox__wrapper label a { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.4 !important; }
body.register .widget--registration-form .terms__checkbox__wrapper input[type="checkbox"] { display: block !important; flex: none; position: static !important; margin: 0 !important; }
body.register .widget--registration-form input[type="checkbox"] { flex: none; width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #1C4DFF; }
body.register .widget--registration-form .terms__checkbox__wrapper a { color: #1C4DFF !important; text-decoration: underline; }
body.register .widget--registration-form button[type="submit"], body.register .widget--registration-form .btn--primary {
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 140px; min-height: 48px; margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important;
  transition: background-color .2s ease;
}
body.register .widget--registration-form button[type="submit"]:hover, body.register .widget--registration-form .btn--primary:hover { background: #5454CC !important; }
body.register .widget--registration-form :is(button, a, input):focus-visible { outline: 3px solid #FF645C !important; outline-offset: 3px; }
/* the signed-in message ("You are registered") reuses the same card */
body.register .widget--registration-form .medium-12.columns > div > p { margin: 0 0 20px !important; font-size: 18px; font-weight: 300; color: #4A4857; text-align: center !important; }
body.register .widget--registration-form .medium-12.columns > div > p:last-child { margin-bottom: 8px !important; }
body.register .widget--registration-form .medium-12.columns > div > p span { text-align: center !important; }
body.register .widget--registration-form .medium-12.columns > div > p > a.btn { margin: 0 auto !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  body.register .home__content { padding: 32px 16px 56px !important; }
  body.register .widget--registration-form > div { padding: 28px 20px 24px !important; border-radius: 24px; }
  body.register .widget--registration-form .row > .small-6.columns { width: 100% !important; float: none !important; padding: 0 !important; }
  body.register .widget--registration-form .row:has(.terms__checkbox__wrapper) { flex-direction: column; align-items: stretch; }
  body.register .widget--registration-form button[type="submit"] { width: 100% !important; }
}
/* ========================== END REGISTER PAGE ========================== */












/* ==========================================================================
   CASEWARE ACADEMY — REDEEM PAGE  (v1, 24 Oct 2026)
   Page: /redeem/<region>?preview=...   (same form as Register, different TI markup)
   Scoping: body.redeem + .widget--redemption-form, so nothing else is touched.
   Look matches the register page: photo band inset 16px like the footer, white card, 48px fields, gradient button.
   Paste: Site Builder > Custom Code > CSS, BELOW the register block. Replace this block each time, never add a second copy.
   ========================================================================== */

/* ---------- PHOTO BAND + CARD ---------- */
body.redeem .home__content {
  margin: 0 16px !important; padding: 64px 24px 88px !important;
  background: #1A1B1D url("https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fill,w_2000/v1/course-uploads/be8a5419-f0c0-4ffa-8455-1d61f2654863/t7fzi6cm5x38-Registration-background.jpg") center / cover no-repeat;   /* PHOTO: same image as Register */
}
body.redeem .widget--redemption-form { width: 100% !important; max-width: 560px; min-width: 0; flex: 0 1 560px; margin: 0 auto !important; padding: 0 !important; float: none !important; }   /* 100% (not auto): in a flex parent "auto" shrinks the card to its content */
/* this widget also carries the sign-in page class "cw-auth", whose rule makes it a 2-column grid (that is what squeezed the card to one narrow column). Turn that off here. */
body.redeem .widget--redemption-form.cw-auth { display: block !important; grid-template-columns: none !important; gap: 0 !important; align-items: normal !important; text-align: left !important; }
body.redeem .widget--redemption-form > div { padding: 40px 40px 36px !important; border-radius: 28px; background: #fff !important; box-shadow: 0 24px 64px rgba(26,27,29,.28); box-sizing: border-box; }

/* "Sign up" heading (same style as Register's title). Drawn by CSS because the widget has no title set; if you add a widget title in the admin, delete this rule */
body.redeem .widget--redemption-form > div::before { content: "Sign up"; display: block; margin: 0 0 24px; text-align: center; font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -0.0325em; color: #1A1B1D; }

/* TI's grid: every row and "centred half-width" column fills the card, so left and right padding are equal */
html body.redeem .widget--redemption-form .row { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.redeem .widget--redemption-form .row::before, body.redeem .widget--redemption-form .row::after { display: none !important; content: none !important; }
html body.redeem .widget--redemption-form .row > .medium-12.columns, html body.redeem .widget--redemption-form .row > .medium-6.medium-centered.columns {
  float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box;
}

/* ---------- INTRO LINE + "Already a member? Sign in" ---------- */
html body.redeem .widget--redemption-form .row > .widget__subtitle.columns { margin: 0 0 24px !important; text-align: center !important; }   /* 24px gap before "Already a Member?" (the grid rule above was zeroing it) */
body.redeem .widget--redemption-form .widget__subtitle h5 { margin: 0 !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: 0 !important; color: #4A4857 !important; }
body.redeem .widget--redemption-form p.already-member { margin: 0 0 20px !important; }
body.redeem .widget--redemption-form p.already-member strong { display: block; padding: 14px 16px; border: 1px solid #D5E1F5; border-radius: 12px; background: #F2F7FF; text-align: center; font-size: 16px; font-weight: 400; color: #6C6B70; }
body.redeem .widget--redemption-form p.already-member .btn--link { display: inline !important; min-height: 0 !important; margin: 0 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #1C4DFF !important; text-decoration: underline; text-transform: none !important; letter-spacing: 0 !important; }
body.redeem .widget--redemption-form p.already-member .btn--link:hover { color: #5454CC !important; }

/* ---------- FIELDS ---------- */
body.redeem .widget--redemption-form .form-group { margin: 0 0 12px !important; padding: 0 !important; }
body.redeem .widget--redemption-form .form-group:has(.name-input) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }   /* First / Last name side by side */
body.redeem .widget--redemption-form .name-input { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0; }
body.redeem .widget--redemption-form .field, body.redeem .widget--redemption-form .field__input-wrapper { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.redeem .widget--redemption-form label { margin: 0 0 6px; font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #6C6B70; }
body.redeem .widget--redemption-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), body.redeem .widget--redemption-form select, body.redeem .widget--redemption-form textarea {
  width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box;
  border: 1px solid #D5D3CB !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; color: #1A1B1D !important;
}
body.redeem .widget--redemption-form input::placeholder { color: #6C6B70; opacity: 1; }
body.redeem .widget--redemption-form input:focus, body.redeem .widget--redemption-form select:focus { outline: 0 !important; border-color: #1C4DFF !important; box-shadow: 0 0 0 3px rgba(28,77,255,.14) !important; }
body.redeem .widget--redemption-form .error, body.redeem .widget--redemption-form small.error, body.redeem .widget--redemption-form .field__error { margin: 6px 0 0 !important; font-size: 14px !important; font-weight: 400 !important; color: #C2352E !important; background: none !important; }
body.redeem .widget--redemption-form input.error, body.redeem .widget--redemption-form .has-error input { border-color: #C2352E !important; }

/* ---------- ADDITIONAL INFORMATION ---------- */
body.redeem .widget--redemption-form .panel--alt { margin: 4px 0 20px !important; padding: 20px 20px 8px !important; border: 0 !important; border-radius: 20px !important; background: #F7F6F3 !important; box-shadow: none !important; }
body.redeem .widget--redemption-form .panel--alt h4 { margin: 0 0 14px !important; font-size: 18px !important; line-height: 1.2 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1A1B1D !important; }
body.redeem .widget--redemption-form .panel--alt .field { margin: 0 0 12px !important; }

/* ---------- RULE + TERMS + SUBMIT ---------- */
body.redeem .widget--redemption-form hr { margin: 8px 0 20px !important; border: 0 !important; border-top: 1px solid #E5E3DA !important; }
body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; }
html body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) > .columns { width: auto !important; float: none !important; flex: none; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) > .columns:first-child { flex: 1 1 auto; min-width: 0; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper { display: block !important; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper label.row { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 10px; width: auto !important; margin: 0 !important; padding: 0 !important; text-transform: none; letter-spacing: 0; cursor: pointer; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper label.row > .small-1 { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper label.row > .small-11 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper input[type="checkbox"] { display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #1C4DFF; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper p { margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 300 !important; color: #4A4857 !important; }
html body.redeem .widget--redemption-form .terms__checkbox__wrapper .btn--link, body.redeem .widget--redemption-form .terms__checkbox__wrapper a { display: inline !important; min-height: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-family: 'League Spartan', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #1C4DFF !important; text-decoration: underline; }
body.redeem .widget--redemption-form button.btn--primary {
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 140px; min-height: 48px; margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important;
  transition: background-color .2s ease;
}
body.redeem .widget--redemption-form button.btn--primary:hover { background: #5454CC !important; }
body.redeem .widget--redemption-form :is(button, a, input):focus-visible { outline: 3px solid #FF645C !important; outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  body.redeem .home__content { padding: 32px 16px 56px !important; }
  body.redeem .widget--redemption-form > div { padding: 28px 20px 24px !important; border-radius: 24px; }
  body.redeem .widget--redemption-form .form-group:has(.name-input) { grid-template-columns: 1fr; gap: 12px; }
  body.redeem .widget--redemption-form .row:has(.terms__checkbox__wrapper) { flex-direction: column; align-items: stretch; }
  body.redeem .widget--redemption-form button.btn--primary { width: 100% !important; }
}
/* ========================== END REDEEM PAGE ========================== */











/* ==========================================================================
   CASEWARE ACADEMY — COURSE DETAIL PAGE  (v1, 21 Oct 2026)
   Page: /courses/<slug>   e.g. /courses/getting-started-accountsadvanced
   Two states: signed out ("Register Now" + "Already Enrolled? Sign In") and signed in ("Enroll Now").
   Both use the same widgets, so one block styles both.
     A. Title + cover image       .course__detail__header / .course__detail__asset
     B. Description / Course Content tabs   ul.tabs
     C. Sidebar: enrol panel + buttons      .widget--course-purchase
     D. Sidebar: What's included            .widget--course-benefits
   Scoping: every rule starts with a course-page class, so nothing else on the site is touched.
   Paste: Site Builder > Custom Code > CSS, BELOW the dashboard block. Replace this block each time, never add a second copy.
   ========================================================================== */

/* ---------- A. TITLE + COVER IMAGE ---------- */
/* breathing room between the header/nav above and the footer below */
.course__detail__container { padding-top: 40px !important; padding-bottom: 96px !important; }
.course__detail__header h1 {
  margin: 0 0 24px !important; font-size: clamp(26px, 3vw, 34px) !important; line-height: 40px !important; font-weight: 400 !important;
  letter-spacing: -0.0325em; text-transform: none !important; color: #1A1B1D !important;
}
.course__detail__asset { margin: 0 0 32px !important; }
.course__detail__asset picture, .course__detail__asset img { display: block; max-width: 100%; height: auto; border-radius: 20px; overflow: hidden; }

/* sidebar top lines up with the top of the cover image (title line 40px + 24px gap) */
@media (min-width: 1024px) { .course__detail__sidebar { margin-top: 64px !important; } }

/* ---------- B. TABS (Description / Course Content) ---------- */
.course__detail__content ul.tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin: 0 0 24px !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #D5D3CB !important; background: none !important; list-style: none !important; }
.course__detail__content ul.tabs::before, .course__detail__content ul.tabs::after { display: none !important; content: none !important; }
.course__detail__content .tab-title { float: none !important; margin: 0 0 -1px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.course__detail__content .tab-title > a {
  display: inline-flex !important; align-items: center; min-height: 48px; margin: 0 !important; padding: 0 24px !important;
  border: 1px solid #E5E3DA !important; border-bottom-color: #D5D3CB !important; border-radius: 12px 12px 0 0 !important; background: #F7F6F3 !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #4A4857 !important;
  transition: background-color .2s ease, color .2s ease;
}
.course__detail__content .tab-title:not(.active) > a:hover { background: #F2F7FF !important; color: #1C4DFF !important; }
/* selected tab joins the content below: white, open at the bottom, blue bar along the bottom edge */
.course__detail__content .tab-title.active > a, .course__detail__content .tab-title.active > a:hover { min-height: 52px; background: #fff !important; color: #1A1B1D !important; font-weight: 500 !important; border-color: #D5D3CB !important; border-bottom-color: #fff !important; box-shadow: inset 0 -3px 0 #1C4DFF !important; }
.course__detail__content .tab-title > a:focus-visible { outline: 3px solid #FF645C !important; outline-offset: 2px; }
.course__detail__content .tabs-content { padding: 0 !important; background: none !important; border: 0 !important; }
.course__detail__content .tabs-content .editor-content { max-width: 720px; padding: 0 !important; font-size: 18px !important; line-height: 1.55 !important; font-weight: 300 !important; color: #4A4857 !important; }
.course__detail__content .tabs-content .editor-content p { margin: 0 0 16px !important; }
/* one text style for every tab: Description (paragraph) and Course Content (list) were 400 vs 300 */
.course__detail__content .tabs-content .editor-content :is(p, li, ol, ul, div, span) { font-size: 18px !important; line-height: 1.55 !important; font-weight: 300 !important; color: #4A4857 !important; }
.course__detail__content .tabs-content .editor-content :is(strong, b, th) { font-weight: 500 !important; }
.course__detail__content .tabs-content .editor-content :is(ol, ul) { margin: 0 0 16px !important; }
.course__detail__content .tabs-content .editor-content li { margin: 0 0 6px !important; }
.course__detail__content .tabs-content .editor-content a { color: #1C4DFF !important; text-decoration: underline; }

/* ---------- C. SIDEBAR: ENROL PANEL ---------- */
.widget--course-purchase .panel {
  padding: 28px !important; border: 0 !important; border-radius: 20px !important; background: #F7F6F3 !important; box-shadow: none !important;
}
.widget--course-purchase .enroll__title { margin: 0 0 12px !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #6C6B70 !important; }
.widget--course-purchase .panel p, .widget--course-purchase .panel .enroll__text { margin: 0 0 20px !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 300 !important; color: #4A4857 !important; }
/* primary button: "Enroll Now" (signed in) and "Register Now" (signed out) */
.widget--course-purchase .btn--primary, .widget--course-purchase .panel .btn {
  display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 48px; margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important;
  transition: background-color .2s ease;
}
.widget--course-purchase .btn--primary:hover, .widget--course-purchase .panel .btn:hover { background: #5454CC !important; }
.widget--course-purchase .btn:focus-visible { outline: 3px solid #FF645C !important; outline-offset: 3px; }
/* extra actions in the panel ("Register Someone Else", "Have a coupon?"): same width and left edge as Enroll Now, outlined so Enroll Now stays the main action */
.widget--course-purchase .panel { padding-bottom: 16px !important; }
html .widget--course-purchase .panel div { float: none !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; }
html .widget--course-purchase .panel .btn { float: none !important; position: static !important; margin: 0 0 12px !important; }
/* the big action above the panel ("Start Self Study Course" / "Resume"): 16px of space before the Enroll panel */
html .widget--course-purchase a.btn.btn--primary.btn--alt, html .widget--course-purchase a.btn.btn--primary.btn--expand { margin: 0 0 16px !important; }
/* Enroll Now keeps the gradient from the rule above. Only the buttons marked secondary by TI, or sitting after the divider line, are outlined. */
html .widget--course-purchase .panel .btn.btn--secondary, html .widget--course-purchase .panel hr ~ .btn.btn, html .widget--course-purchase .panel hr ~ * .btn.btn {
  gap: 8px; border: 1px solid #D5D3CB !important; background: #fff !important; color: #1A1B1D !important; font-weight: 500 !important;
}
html .widget--course-purchase .panel .btn.btn--secondary:hover, html .widget--course-purchase .panel hr ~ .btn.btn:hover, html .widget--course-purchase .panel hr ~ * .btn.btn:hover { background: #F2F7FF !important; border-color: #1C4DFF !important; color: #1C4DFF !important; }
html .widget--course-purchase .panel .btn.btn--secondary i, html .widget--course-purchase .panel hr ~ .btn i, html .widget--course-purchase .panel hr ~ * .btn i { font-size: 16px; line-height: 1 !important; color: #1C4DFF !important; }
.widget--course-purchase .panel hr { margin: 4px 0 16px !important; border: 0 !important; border-top: 1px solid #E5E3DA !important; }
/* signed-out extra: "Already Enrolled? Sign In" becomes a quiet outlined button under the panel */
.widget--course-purchase .course__detail__enrolled { margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }   /* wrapper had its own outline = the doubled border */
.widget--course-purchase .course__detail__enrolled a.btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; min-height: 48px; margin: 0 !important; padding: 0 20px !important;
  border: 1px solid #D5D3CB !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #1C4DFF !important; line-height: 1 !important;
}
.widget--course-purchase .course__detail__enrolled a.btn:hover { background: #F2F7FF !important; border-color: #1C4DFF !important; color: #1C4DFF !important; }
.widget--course-purchase .course__detail__enrolled a.btn i { position: relative; top: -2px; display: block; flex: none; margin: 0 !important; padding: 0 !important; font-size: 16px; line-height: 1 !important; color: inherit !important; }
.widget--course-purchase .course__detail__enrolled a.btn span { position: relative; top: 2px; display: block; margin: 0 !important; line-height: 1 !important; }

/* ---------- D. SIDEBAR: WHAT'S INCLUDED ---------- */
.widget--course-benefits .course__includes { padding: 8px 0 0 !important; }
.widget--course-benefits .course__includes__title { display: block; margin: 0 !important; padding: 0 0 14px !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #6C6B70 !important; }
.widget--course-benefits .course__includes hr { margin: 0 0 8px !important; border: 0 !important; border-top: 1px solid #E5E3DA !important; }
.widget--course-benefits ul.course__includes__list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.widget--course-benefits .course__includes__list li { display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 14px 0 !important; border: 0 !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 300 !important; color: #4A4857 !important; }
.widget--course-benefits .course__includes__list li > span { flex: 1; margin: 0 !important; padding: 0 !important; }   /* TI pushed the text away from the icon */
.widget--course-benefits .icon--round::before { display: block; margin: 0 !important; padding: 0 !important; width: auto !important; line-height: 1 !important; text-indent: 0 !important; }
.widget--course-benefits .icon--round {
  position: static !important; padding: 0 !important; line-height: 1 !important; text-indent: 0 !important; display: grid !important; place-items: center; flex: none; width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 50% !important; background: #F2F7FF !important; color: #1C4DFF !important; font-size: 18px; }

/* ---------- HEADER LINKS (Sign in / Basket / Manager access) ---------- */
.header--microsite nav.nav--top a, .header--microsite nav.nav--top button { font-size: 13px !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #1A1B1D !important; }
.header--microsite nav.nav--top a:hover, .header--microsite nav.nav--top button:hover { color: #1C4DFF !important; }
.header--microsite nav.nav--top a:focus-visible, .header--microsite nav.nav--top button:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }

/* Signed-out header: [ Sign up ] [ Sign in ].  "Sign in" = gradient blue button, "Sign up" = outlined button to its left.
   "Sign up" is added by caseware-ti-header-signup.html (Tracking Scripts) so it can point at the visitor's own region (/redeem/uk ...).
   The classes cw-nav-signin / cw-nav-signup are added by that script. */
.header--microsite nav.nav--top ul { display: flex; align-items: center; gap: 12px; }
/* logo and nav share one centre line (the nav used to sit about 11px below the logo's middle), same on every page */
.header--microsite .header__inner { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.header--microsite .header__inner > a { float: none !important; flex: none; order: 0; }   /* logo first, on the left */
.header--microsite nav.nav--top { order: 1; margin-left: auto !important; float: none !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important;   /* nav last, pushed to the right (it comes first in TI's HTML) */ padding: 0 !important; height: auto !important; min-height: 0 !important; position: static !important; }
/* Basket (0): flex children lose the space between the word and the count, so put it back */
.header--microsite nav.nav--top li > button { gap: .4em; }
/* order, left to right: Basket, Sign up, Sign in (Basket is the only item built as a button, so it is moved to the front; the other two keep their order) */
.header--microsite nav.nav--top li:has(> button) { order: -1; }
/* every header item sits on the same centre line (Basket was floating higher than Sign up / Sign in on the catalogue page) */
.header--microsite nav.nav--top li { display: flex !important; align-items: center; float: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; line-height: 1 !important; }
.header--microsite nav.nav--top li > a, .header--microsite nav.nav--top li > button { display: inline-flex !important; align-items: center; min-height: 44px; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; position: static !important; top: auto !important; }   /* padding-top: TI gives Basket 14px of top padding, which is what made it float out of line */
/* these selectors do not depend on which header variant the page uses: the script puts the classes on the links themselves */
/* "Sign up" = plain text link (same style as Basket); "Sign in" = gradient blue button with WHITE text.
   The .header--microsite rule above sets every nav link to dark text, so the button rules repeat that selector to win. */
html body a.cw-nav-signin, html body a.cw-nav-signup, .header--microsite nav.nav--top a.cw-nav-signin, .header--microsite nav.nav--top a.cw-nav-signup {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; text-decoration: none !important; white-space: nowrap;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
html body a.cw-nav-signin, .header--microsite nav.nav--top a.cw-nav-signin { padding: 0 22px !important; border: 0 !important; border-radius: 12px; background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important; }
html body a.cw-nav-signin:hover, .header--microsite nav.nav--top a.cw-nav-signin:hover { background: #5454CC !important; color: #fff !important; }
html body a.cw-nav-signin *, .header--microsite nav.nav--top a.cw-nav-signin * { color: inherit !important; }
html body a.cw-nav-signup, .header--microsite nav.nav--top a.cw-nav-signup { padding: 0 6px !important; border: 0 !important; background: none !important; color: #1A1B1D !important; }
html body a.cw-nav-signup:hover, .header--microsite nav.nav--top a.cw-nav-signup:hover { color: #1C4DFF !important; }
html body a.cw-nav-signin:focus-visible, html body a.cw-nav-signup:focus-visible { outline: 3px solid #FF645C !important; outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .widget--course-purchase .panel { padding: 22px !important; }
}
/* ========================== END COURSE DETAIL PAGE ========================== */











/* ==========================================================================
   CASEWARE ACADEMY — SUPPORT PAGE  (v1, 25 Oct 2026)
   Page: /support      Design source: support-prototype.html
   The page is ONE "HTML" widget (widget--html): h1 + a wrapper div holding 7 topic divs, each = h3 + <details> questions.
   This CSS restyles that existing markup, so the questions and answers stay exactly as colleagues edit them in the widget.
   Scoping: body.support only (TI adds that body class), so nothing else is touched.
   Optional: add the "Still need help?" card at the END of the widget HTML (snippet at the bottom of this file) .
   Paste: Site Builder > Custom Code > CSS, BELOW the redeem block. Replace this block each time, never add a second copy.
   ========================================================================== */

/* ---------- PAGE + TITLE ---------- */
body.support .widget--html { background: none !important; border: 0 !important; box-shadow: none !important; padding-top: 72px !important; padding-bottom: 96px !important; }
body.support .widget--html h1 {
  margin: 0 0 12px !important; padding: 0 !important; text-align: center !important;
  font-family: 'League Spartan', sans-serif !important; font-size: clamp(34px, 4.4vw, 48px) !important; line-height: 1.1 !important; font-weight: 400 !important;
  letter-spacing: -0.0325em; text-transform: none !important; color: #1A1B1D !important;
}
/* optional one-line intro: a <p> straight under the title */
body.support .widget--html h1 + p { max-width: 640px; margin: 0 auto 40px !important; text-align: center !important; font-size: 18px !important; line-height: 1.5 !important; font-weight: 300 !important; color: #4A4857 !important; }
body.support .widget--html h1 + div { margin-top: 40px !important; }
body.support .widget--html h1 + p + div { margin-top: 0 !important; }

/* ---------- TOPIC CARDS: 3 across on desktop, 2 on tablet, 1 on phone ---------- */
body.support .widget--html h1 ~ div {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start;
  width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important;
}
body.support .widget--html h1 ~ div > div {
  float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 28px 28px 12px !important;
  background: #F7F6F3 !important; border: 0 !important; border-radius: 20px; box-shadow: none !important;
}
body.support .widget--html h3 {
  margin: 0 0 20px !important; padding: 0 !important; text-align: left !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 21px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0; text-transform: none !important; color: #1A1B1D !important;
}

/* ---------- QUESTIONS (details / summary) ---------- */
body.support .widget--html details { margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid #E5E3DA !important; background: none !important; }
body.support .widget--html h3 + details { border-top: 0 !important; }
body.support .widget--html summary {
  display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 14px 0 !important; cursor: pointer; list-style: none;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; line-height: 1.35 !important; font-weight: 400 !important; color: #1A1B1D !important;
  transition: color .2s ease;
}
body.support .widget--html summary::-webkit-details-marker { display: none; }
body.support .widget--html summary::marker { content: ""; }
body.support .widget--html summary:hover { color: #1C4DFF !important; }
body.support .widget--html summary:focus-visible { outline: 3px solid #FF645C; outline-offset: 2px; border-radius: 6px; }
body.support .widget--html summary::after {                     /* chevron, turns when open */
  content: ""; flex: none; width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.5px solid #1C4DFF; border-bottom: 1.5px solid #1C4DFF; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease;
}
body.support .widget--html details[open] > summary { font-weight: 500 !important; }
body.support .widget--html details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
body.support .widget--html details > div, body.support .widget--html details > p { margin: 0 !important; padding: 0 0 16px !important; }
body.support .widget--html details > div, body.support .widget--html details > div p, body.support .widget--html details > p {
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; line-height: 1.55 !important; font-weight: 300 !important; color: #4A4857 !important; text-align: left !important;
}
body.support .widget--html details > div p { margin: 0 0 10px !important; }
body.support .widget--html details a { color: #1C4DFF !important; text-decoration: underline; }
body.support .widget--html details a:hover { color: #5454CC !important; }

/* ---------- "STILL NEED HELP?" CARD (optional snippet below) ---------- */
body.support .widget--html .cw-support-help {
  grid-column: 1 / -1; display: flex !important; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px 36px !important; background: #F2F7FF !important; border-radius: 20px;
}
body.support .widget--html .cw-support-help h3 { margin: 0 0 6px !important; }
body.support .widget--html .cw-support-help p { margin: 0 !important; max-width: 560px; font-size: 16px !important; line-height: 1.5 !important; font-weight: 300 !important; color: #4A4857 !important; }
body.support .widget--html .cw-support-help a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 12px; text-decoration: none !important;
  background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC); color: #fff !important; font-size: 16px; font-weight: 600; transition: background-color .2s ease;
}
body.support .widget--html .cw-support-help a:hover { background: #5454CC; }
body.support .widget--html .cw-support-help a:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) { body.support .widget--html h1 ~ div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  body.support .widget--html { padding-top: 40px !important; padding-bottom: 56px !important; }
  body.support .widget--html h1 ~ div { grid-template-columns: 1fr; }
  body.support .widget--html h1 ~ div > div { padding: 22px 22px 8px !important; }
  body.support .widget--html .cw-support-help { padding: 24px 22px !important; }
}
/* ========================== END SUPPORT PAGE ========================== */

/* ----------------------------------------------------------------------------
   OPTIONAL: paste this at the very END of the support widget's HTML (inside the same wrapper div that holds the 7 topics,
   after the last topic). It becomes the full-width "Still need help?" card. Link goes to the Caseware contact page.

   <div class="cw-support-help">
     <div>
       <h3>Still need help?</h3>
       <p>Can't find your answer? Our team will help you with courses, sign-in and access.</p>
     </div>
     <a href="https://www.caseware.com/contact">Contact support</a>
   </div>
   ---------------------------------------------------------------------------- */









/* ==========================================================================
   CASEWARE ACADEMY — COURSE PLAYER  (v1, 26 Oct 2026)
   Page: /learn/course/<slug>/<slug>/contents   (body: learn course section lesson; wrapper .course__container)
   Covers: top bar, lesson sidebar (search, lessons, progress, resources, notes, support/sign out), title row, progress bar, next arrow, content card, start button.
   Scoping: everything starts with .course__container so no other page is touched.
   Paste: Site Builder > Custom Code > CSS, BELOW the support block. Replace this block each time, never add a second copy.
   The lesson content itself (SCORM / video / article) is not restyled; only the frame around it.
   ========================================================================== */

/* ---------- PAGE + TOP BAR ---------- */
.course__container { background: #F7F6F3 !important; font-family: 'League Spartan', sans-serif; }
/* top bar: kept as TI has it (white bar, grey home square, logo right); only the title weight is set */
body .course__container a.course-title, body .course__container a.course-title-link { font-family: 'League Spartan', sans-serif !important; font-weight: 400 !important; }

/* ---------- SIDEBAR ---------- */
.course__container nav.learner__sidebar { background: none !important; border: 0 !important; box-shadow: none !important; }
.course__container .learner__sidebar__search { position: relative; }
.course__container .learner__sidebar__search > button.btn--bare { position: absolute !important; left: 12px; top: 20px; transform: translateY(-50%); margin: 0 !important; padding: 0 !important; height: 20px; display: grid; place-items: center; z-index: 2; }
.course__container .learner__sidebar__search input.form-control::placeholder { font-style: normal; color: #6C6B70; }
.course__container .learner__sidebar__search input.form-control {
  height: 40px !important; padding: 0 14px 0 40px !important; border: 1px solid #E5E3DA !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 15px !important; font-weight: 300 !important; color: #1A1B1D !important;
}
.course__container .learner__sidebar__search input.form-control:focus { border-color: #1C4DFF !important; outline: 0; box-shadow: 0 0 0 3px #F2F7FF !important; }
.course__container .learner__sidebar__search .small-8.columns { padding-right: 8px !important; }
.course__container .learner__sidebar__search .small-8.columns, .course__container .learner__sidebar__search .small-4.columns { height: 40px; }
.course__container button.hide-sidebar {                                      /* Hide */
  height: 40px !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease;
}
.course__container button.hide-sidebar, .course__container button.hide-sidebar span, .course__container button.hide-sidebar i { color: #fff !important; }
.course__container button.hide-sidebar:hover { background: #5454CC !important; }

.course__container .learner__sidebar .layout-panel { margin-top: 16px; padding: 12px !important; background: #fff !important; border-radius: 20px; box-shadow: none !important; overflow: hidden; }
.course__container ul.learner__sidebar-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.course__container li.syllabus__lesson-container { margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.course__container a.syllabus__lesson--title {
  display: block; padding: 16px 16px !important; border: 0 !important; border-radius: 12px; background: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #1A1B1D !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease;
}
.course__container a.syllabus__lesson--title:hover { background: #F7F6F3 !important; color: #1C4DFF !important; }
.course__container a.syllabus__lesson--title.active, .course__container .syllabus__lesson--container--titles-active > span > a { background: #F2F7FF !important; color: #1C4DFF !important; box-shadow: inset 0 0 0 2px #1C4DFF; }
.course__container a.syllabus__lesson--title:focus-visible { outline: 3px solid #FF645C; outline-offset: 2px; }

/* Progress / Resources / Notes bars: kept blue (they mark where you are), just square (they act like dropdowns, not buttons) and in League Spartan */
.course__container .expandable-sidebar__toggle, .course__container li.course-completion-progress > .expandable-sidebar > button.btn {
  background: #5454CC !important; color: #fff !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase;
}
.course__container .expandable-sidebar__toggle:hover { background: #1C4DFF !important; }
.course__container li:has(.expandable-sidebar__toggle) { margin-top: 8px; }
.course__container .expandable-sidebar__toggle i, .course__container .expandable-sidebar__toggle svg { color: #fff !important; fill: #fff; }

.course__container li.course-completion-progress .expandable-sidebar__content button, .course__container li.course-completion-progress .expandable-sidebar__content a.btn {            /* Show details */
  min-height: 40px; padding: 0 20px !important; border: 1px solid #E5E3DA !important; border-radius: 12px !important; background: #fff !important; color: #1A1B1D !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em; box-shadow: none !important;
}
.course__container li.course-completion-progress .expandable-sidebar__content button:hover { background: #F2F7FF !important; border-color: #1C4DFF !important; color: #1C4DFF !important; }
.course__container .expandable-sidebar__buttons { padding: 16px 12px 0 !important; background: none !important; }
.course__container .expandable-sidebar__buttons a, .course__container .expandable-sidebar__buttons span {
  font-family: 'League Spartan', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: #6C6B70 !important; text-decoration: none !important;
}
.course__container .expandable-sidebar__buttons a:hover, .course__container .expandable-sidebar__buttons a:hover span { color: #1C4DFF !important; }

/* ---------- CONTENT CARD ---------- */
.course__container .learner__content { padding-top: 24px; }
.course__container .learner__content > .layout-panel { background: #fff !important; border-radius: 20px; box-shadow: none !important; padding: 8px 12px 12px !important; }
.course__container h3 .learner-section__title, .course__container h3 .learner-lesson__title, .course__container .learner-section__title__slash {
  font-family: 'League Spartan', sans-serif !important; font-size: 24px !important; font-weight: 400 !important; letter-spacing: -0.01em; color: #6C6B70 !important;
}
.course__container h3 .learner-lesson__title { color: #1C4DFF !important; font-weight: 500 !important; }
.course__container .section-progress-bar { height: 6px !important; border-radius: 3px; background: #E5E3DA !important; overflow: hidden; }
.course__container .section-progress-bar span { background: linear-gradient(90deg, #1C4DFF, #5454CC) !important; border-radius: 3px; }
.course__container .section-progress-bar > div { background: none !important; }
.course__container button.bookmark-dropdown__button, .course__container button.bookmark-dropdown__button i { color: #1C4DFF !important; }

/* next / previous arrows */
.course__container .directional__nav { height: auto !important; padding: 12px 0 !important; }
.course__container span.directional__nav__button {
  display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border-radius: 12px !important; border: 0 !important; background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
}
.course__container .directional__nav a:hover span.directional__nav__button { background: #5454CC !important; }
.course__container span.directional__nav__label { font-family: 'League Spartan', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #1A1B1D !important; }

/* start / content frame */
.course__container .topic__content, .course__container .quiz-start__content { background: #F7F6F3 !important; border-radius: 20px; overflow: hidden; }
.course__container .quiz-start__main-title {
  font-family: 'League Spartan', sans-serif !important; font-size: clamp(30px, 3.4vw, 44px) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -0.0325em; color: #1A1B1D !important;
}

/* all primary buttons in the player (Open Content In New Window, etc.) */
.course__container .btn--primary:not(.btn--small) {
  min-height: 48px; padding: 0 28px !important; border: 0 !important; border-radius: 12px !important; background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; color: #fff !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; transition: background-color .2s ease;
}
.course__container .btn--primary:not(.btn--small):hover { background: #5454CC !important; }
.course__container .btn--primary:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }
.course__container .learner__container__toggle .btn--primary { border-radius: 12px !important; background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; font-family: 'League Spartan', sans-serif !important; font-weight: 600 !important; }

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 700px) {
  .course__container a.course-title, .course__container a.course-title-link { font-size: 18px !important; }
  .course__container .header__left__icon { margin-left: 12px; }
}
/* ========================== END COURSE PLAYER ========================== */










/* ==========================================================================
   CASEWARE ACADEMY — CHECKOUT  (v2 SIMPLE, 28 Oct 2026)
   Page: /orders?cart=...      Body class TI adds: "ember-application checkout index"  -> scoped to body.checkout only.
   Approach: keep TI's own grid and structure (large-6 columns, sidebar, rows). Only the SURFACE is restyled:
   background, cards, type, fields, buttons. No flex/width/position overrides on TI's layout.
   Design source: Figma "Checkout: mockup (Oct 2026)".
   Paste: Site Builder > Custom Code > CSS, BELOW the course player block. Replace the whole checkout block each time.
   ========================================================================== */

/* ---------- PAGE + HEADER ---------- */
body.checkout, body.checkout .container, body.checkout .checkout__order { background: #F7F6F3 !important; }
body.checkout .header--checkout { background: #fff !important; border-bottom: 1px solid #E5E3DA !important; box-shadow: none !important; }
body.checkout .header--checkout .header__title h2, body.checkout .header--checkout .header__title h2 span {
  font-family: 'League Spartan', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: #1A1B1D !important;
}
body.checkout .header--checkout .header__title { text-align: right; }
body.checkout .checkout__order { padding-top: 32px; padding-bottom: 80px; }

/* ---------- CARDS: each TI panel becomes a white rounded card ---------- */
body.checkout .order__forms, body.checkout .section.shipping-info, body.checkout .panel.panel--alt {
  background: #fff !important; border: 0 !important; border-radius: 20px; box-shadow: none !important; margin-bottom: 20px !important; padding: 28px 32px 32px !important;
}
body.checkout .order__forms .panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
body.checkout .order__sidebar__container > .columns { background: #fff !important; border-radius: 20px; padding: 28px 32px !important; }

/* ---------- TYPE ---------- */
body.checkout .checkout__order h4, body.checkout .checkout__order h4 span {
  font-family: 'League Spartan', sans-serif !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: -0.01em; text-transform: none !important; color: #1A1B1D !important;
}
body.checkout .checkout__order p, body.checkout .checkout__order p strong { font-family: 'League Spartan', sans-serif !important; font-weight: 300 !important; color: #4A4857 !important; }
body.checkout .checkout__order a.underline { color: #1C4DFF !important; font-weight: 600 !important; }
body.checkout .field__label, body.checkout .field__label span { font-family: 'League Spartan', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #1A1B1D !important; }
body.checkout .red-asterisk { color: #FF645C !important; }

/* ---------- FIELDS ---------- */
body.checkout .checkout__order input.form-control, body.checkout .checkout__order select.form-control {
  height: 48px !important; border: 1px solid #E5E3DA !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'League Spartan', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; color: #1A1B1D !important;
}
body.checkout .checkout__order input.form-control:focus, body.checkout .checkout__order select.form-control:focus { border-color: #1C4DFF !important; outline: 0; box-shadow: 0 0 0 3px #F2F7FF !important; }

/* ---------- BUTTONS (every primary button, white text so it reads on the gradient) ---------- */
body.checkout .checkout__order .btn--primary, body.checkout .checkout__order .btn--primary span {
  color: #fff !important; font-family: 'League Spartan', sans-serif !important; font-weight: 600 !important;
}
body.checkout .checkout__order .btn--primary {
  border: 0 !important; border-radius: 12px !important; background: #1C4DFF linear-gradient(90deg, #1C4DFF, #5454CC) !important; box-shadow: none !important; transition: background-color .2s ease;
}
body.checkout .checkout__order .btn--primary:hover { background: #5454CC !important; }
body.checkout .checkout__order .btn--primary:focus-visible { outline: 3px solid #FF645C; outline-offset: 3px; }

/* ---------- BASKET ---------- */
body.checkout .cart-item__title, body.checkout p.h4.cart-item__title { font-size: 18px !important; font-weight: 600 !important; color: #1A1B1D !important; }
body.checkout .order__label { font-family: 'League Spartan', sans-serif !important; font-size: 22px !important; font-weight: 600 !important; color: #1A1B1D !important; }
body.checkout .order__value--total { font-family: 'League Spartan', sans-serif !important; font-size: 28px !important; font-weight: 600 !important; color: #1A1B1D !important; }

/* optional course image (script later): <img class="cw-cart-thumb"> */
body.checkout img.cw-cart-thumb { display: block; width: 92px; height: 64px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }
/* ========================== END CHECKOUT ========================== */

/* Change Basket to Cart - added by Ti*/
/* Hide the original span entirely */
#cart-button > span:first-child {
display: none;
}

/* Add the new label to the button, before the badge */
#cart-button::before {
content: "Cart";
}