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

      :root {
        --font: Open Sans;
        --alt-font: Chronicle Display;
        --accent-color: #003260;
        --secondary-color: #488974;
        --link-color: #0079c1;
        --accent-highlight-color: #003260;
        --accent-highlight-background-color: #c6e4ff;
        --accent-tinted-color-70: #b3c2cf;
        --accent-tinted-color-80: #ccd6df;
        --accent-tinted-color-90: #e6ebef;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #004d93;
        --secondary-hover-color: #5ba990;
        --secondary-contrast-color: #fff;
        --link-hover-color: #28afff;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/4b92afd1-d0eb-4aff-8198-263f1b2457e6/2v6l42voriu4-ima-logo-2x.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* 

▄         ▗                          
▌▌▛▌  ▛▌▛▌▜▘  ▌▌▛▘█▌                 
▙▘▙▌  ▌▌▙▌▐▖  ▙▌▄▌▙▖  ▗              
                                     
▄▖▌     ▄▖▄▖▄▖  ▘                    
▐ ▛▌█▌  ▌ ▚ ▚   ▌▛▘  ▛▌▛▌▌▌▌         
▐ ▌▌▙▖  ▙▖▄▌▄▌  ▌▄▌  ▌▌▙▌▚▚▘         
                                     
        ▘            ▗     ▜ ▜    ▌  
▌▌█▌▛▘▛▘▌▛▌▛▌  ▛▘▛▌▛▌▜▘▛▘▛▌▐ ▐ █▌▛▌  
▚▘▙▖▌ ▄▌▌▙▌▌▌  ▙▖▙▌▌▌▐▖▌ ▙▌▐▖▐▖▙▖▙▌▗ 
                                     

*/

/*** General ***/

/* Fix paragraph spacing in content */

p {
  margin-bottom: 1rem;
}

#ima-product-pricing-member-benefits-bar p {
margin-bottom: 0;
}

hr.hr__accent {
  margin: 1rem 0;
}

.home .course__detail__header h1,
.home .course__detail__content h1 {
  margin-bottom: 0.5em;
}

/*** Products ***/

/* Fix margin on page headers content */
.home .course__detail__header h1, .home .course__detail__content h1 {
    margin-bottom: 1em;
}

/* Fix margin on HR for sidebar content */
.course__detail__sidebar hr {
  margin: 1rem auto;
}

/* Fix margin on lists */
.editor-content ol li:last-child, .editor-content ul li:last-child {
    margin-bottom: 1.5rem;
}

/* Fix for Massive Padding on Heros outside the homepage */
@media screen and (min-width: 769px) {
    .layout__content .hero {
      padding-top:0;
    }
}

/* Hot Fix for TI Pricing Widget Fallback */

.home.product .widget--product-purchase .panel {
    margin: -1.5rem !important;
    box-shadow: none;
}

[class*='widget--'][class*='-purchase']:not(#ima-product-pricing) {
    margin: 0 0 2rem;
}

/* Hide Old TI Footer */

footer.footer {display: none;}

/* Hide Current Footer till page is ready */

#learner:has(#lms:empty) ~ #ima-site-footer-host { display: none; }

/* Min Height for Main Container to stop footer showing */
#learner { min-height: 100vh; }

/* ══════════════════════════════════════════════════════════════════════════
   IMA — not-found page, dark hero treatment
   Paste into TI Appearance → Custom CSS (append to the existing block).

   WHY !important, AND WHY IT IS SAFE
   ----------------------------------
   TI serves TWO not-found templates and loads this stylesheet in OPPOSITE
   positions:
     hard 404 (any unmatched URL)  appearance FIRST → platform SECOND → we LOSE ties
     /not-found (Ember, HTTP 200)  platform … atoms → appearance LAST  → we WIN ties
   On the template that takes the real traffic we are out-cascaded by TI's
   unlayered platform CSS at equal specificity. Everything is scoped under
   .not-found__container, which exists on NO other page of the instance.

   DISCRIMINATOR: the Ember template sits inside #learner; the hard 404 does not.

   TYPE: this page serves Open Sans only (300/400/700). Chronicle Display and
   Avenir are NOT loaded here, so the DS's serif headline and Avenir eyebrow fall
   back to Open Sans. Do NOT add a Google Fonts family to fix it — that origin is
   blocked in mainland China and this stylesheet already render-blocks on it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dark stage ──────────────────────────────────────────────────────────── */

/* The homepage's own hero artwork, same origin as this page. The gradient beneath
   is the DS --color-navy-700 → --color-navy-800 ramp (identical to
   .ima-gradient-hero) and is a REAL fallback: if the asset ever 404s, the page
   degrades to the homepage gradient instead of to nothing.
   Note the filename carries a Vite CONTENT hash — stable across deploys, but it
   WILL change if the artwork is ever re-exported. If that happens this line is
   the thing to update. Uploading a copy to TI's own CDN (where the logo already
   lives) would decouple it entirely. */
body:has(.not-found__container) {
  background-color: #011F3A !important;
  background-image:
    url("https://www.imaglobal.org/assets/static/hero-bg.reTcFi5Q.png"),
    linear-gradient(180deg, #092649 0%, #011F3A 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center bottom, center center !important;
  background-size: cover, cover !important;
  /* NOT background-attachment: fixed — no benefit on a page this short, and a
     known repaint problem on iOS Safari. */
}

.not-found div#ima-site-footer-host {
    display: none;
}

.container:has(> .not-found__container) {
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
}

.not-found__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  /* Symmetric. justify-content:center centres within the CONTENT box, so an
     asymmetric padding silently offsets the whole composition. */
  padding: 64px 24px !important;
  text-align: center !important;
}

/* 100vh on the block itself, for BOTH templates.
   The earlier 82vh-for-Ember version was wrong twice over: it centred the content
   inside a block that then sat at the TOP of the viewport (leaving ~150px dead
   below it), and it silently depended on `#learner { min-height: 100vh }` — which
   is PROD-only custom CSS in this stylesheet and is absent on sandbox.
   min-height does NOT stack down the ancestor chain: a parent with
   min-height:100vh containing a 100vh child is 100vh, not 200vh, because the
   parent's height is max(min-height, content). Verified, both with and without
   the #learner rule present. */
.not-found__container {
  min-height: 100vh !important;
}

/* ── Logo — the modern boxed mark, reversed for navy ─────────────────────── */

/* Hard 404 paints the logo as a background-image on an empty <a>; the Ember
   template uses a real <img>, which is hidden below so both use this background. */
.not-found__container .company__logo,
.not-found__container .company__beta-logo {
  order: 1 !important;
  display: block !important;
  width: 200px !important;
  height: 126px !important;
  margin: 0 0 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg width=%22159%22 height=%22100%22 viewBox=%220 0 159 100%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M138.714 49.0928V43.0959H141.026C142.465 43.0959 143.142 43.745 143.142 44.902C143.142 45.9462 142.521 46.4542 141.703 46.5529L143.268 49.0928H142.112L140.617 46.6376H139.814V49.0928H138.714ZM139.814 44.0272V45.7063H140.617C141.294 45.7063 142.042 45.664 142.042 44.8597C142.042 44.0554 141.294 44.0131 140.617 44.0272H139.814ZM135.484 46.1296C135.484 43.237 137.839 40.8806 140.73 40.8806C143.621 40.8806 145.976 43.237 145.976 46.1296C145.976 49.0223 143.621 51.3787 140.73 51.3787C137.839 51.3787 135.484 49.0223 135.484 46.1296ZM136.415 46.1296C136.415 48.5143 138.347 50.4474 140.73 50.4474C143.113 50.4474 145.045 48.5143 145.045 46.1296C145.045 43.745 143.113 41.8118 140.73 41.8118C138.347 41.8118 136.415 43.745 136.415 46.1296Z%22 fill=%22white%22/%3E%3Cpath d=%22M29.3009 33.6401C26.7718 33.6401 25.0858 31.953 25.0858 29.3456C25.0858 26.7382 26.7718 24.821 29.3009 24.821C31.83 24.821 33.516 26.5848 33.516 29.1922C33.516 31.7996 31.83 33.6401 29.3009 33.6401ZM20.9473 76.2781V75.3579C25.3923 75.2812 26.5419 74.8978 26.5419 72.2904V46.0634C26.5419 43.7628 25.3923 42.229 20.9473 42.1523V41.2321L32.9796 40.9254V72.2904C32.9796 74.8978 33.9759 75.2812 38.8041 75.3579V76.2781H20.9473ZM63.928 76.2781V75.3579C67.8366 75.2812 68.8329 74.8978 68.8329 72.2904V53.3487C68.8329 47.2137 67.0702 43.9928 62.3952 43.9928C58.6399 43.9928 55.7276 46.9836 53.5817 51.5849V72.2904C53.5817 74.8978 54.1182 75.2812 57.9501 75.3579V76.2781H41.5494V75.3579C45.9945 75.2812 47.1441 74.8978 47.1441 72.2904V46.0634C47.1441 43.7628 45.9945 42.229 41.5494 42.1523V41.2321L53.4284 40.9254V49.591C56.8772 43.6861 61.0923 40.6953 66.3038 40.6953C71.132 40.6953 74.4275 43.3793 75.1172 48.6708C78.4893 43.5327 83.1643 40.6953 87.9926 40.6953C93.5106 40.6953 96.9593 44.1462 96.9593 51.0481V72.2904C96.9593 74.8978 98.0323 75.2812 102.554 75.3579V76.2781H86.0766V75.3579C89.9852 75.2812 90.5217 74.8978 90.5217 72.2904V53.3487C90.5217 47.2137 88.759 43.9928 84.084 43.9928C81.0184 43.9928 77.6463 46.2168 75.2705 50.5112V72.2904C75.2705 74.8978 76.3435 75.2812 80.8652 75.3579V76.2781H63.928Z%22 fill=%22%23B7DA9B%22/%3E%3Cpath d=%22M114.108 76.7382C107.67 76.7382 104.758 72.8272 104.758 68.686C104.758 65.6186 105.984 62.8578 109.203 61.094C115.027 57.8732 124.147 56.8762 125.297 55.956V51.1247C125.297 45.1431 123.534 42.0756 118.706 42.0756C115.87 42.0756 113.265 42.9959 111.885 44.6063C113.035 45.8333 113.878 47.2137 113.878 48.594C113.878 50.8946 112.422 52.6584 109.816 52.6584C107.364 52.6584 105.984 50.818 105.984 48.594C105.984 44.1462 111.885 40.6953 119.243 40.6953C127.213 40.6953 131.735 43.9161 131.735 51.2781V69.7597C131.735 73.5173 133.038 75.4345 137.636 73.594L137.942 74.3609C135.337 75.8179 133.574 76.5848 131.122 76.5848C127.213 76.5848 125.833 74.8977 125.604 70.6799H125.297C122.231 74.1308 118.629 76.7382 114.108 76.7382ZM117.786 73.7474C120.852 73.7474 123.611 71.2167 125.297 68.8394V57.413C114.031 59.9437 111.732 62.2443 111.732 67.3057C111.732 70.9867 113.418 73.7474 117.786 73.7474Z%22 fill=%22white%22/%3E%3Crect x=%220.5%22 y=%220.5%22 width=%22158%22 height=%2299%22 stroke=%22white%22/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  text-indent: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.not-found__container .company__beta-logo img { display: none !important; }

/* ── Eyebrow — DS Eyebrow spec, onDark tone ──────────────────────────────── */

/* Matches packages/design-system/app/components/ui/badge.tsx exactly:
   text-base (16px) / font-bold / uppercase / leading-none / tracking-[0.08em],
   px-3.5 pt-2.5 pb-1.5, tone="onDark" = bg-white/10 + ring-1 ring-white/20.
   `ring` is a box-shadow in Tailwind, not a border, so it adds no layout box.
   PADDING DEVIATES FROM THE DS ON PURPOSE. The DS uses pt-2.5/pb-1.5 because
   all-caps has no descenders and Avenir's empty descender zone makes the text
   read high. That correction is calibrated for AVENIR, which is not served on
   this page. Measured for Open Sans 700/16px with leading-none: fontAscent 17 +
   descent 5 into a 16px line box gives -3px half-leading, so the descender zone
   is already cropped and the ink gaps are 2.40 top / 1.84 bottom. Optical centre
   is 7.72/8.28 — i.e. symmetric. Keeping the DS's 10/6 here overcorrects by
   ~2.3px and visibly drops the text. */
.not-found__container::before {
  content: "ERROR 404" !important;
  order: 2 !important;
  display: inline-block !important;
  margin: 0 0 24px !important;
  padding: 8px 14px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20) !important;
  color: #FFFFFF !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Headline — full-opacity white on dark, never a tinted white ─────────── */

.not-found__container h3 {
  order: 3 !important;
  max-width: 26ch !important;
  margin: 0 0 24px !important;
  color: #FFFFFF !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(28px, 4.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance;
}

/* ── Helper copy + CTA ───────────────────────────────────────────────────── */

.not-found__container p {
  order: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 32px !important;
  margin: 0 !important;
}

.not-found__container p::before {
  content: "The link may be out of date, or the page may have moved." !important;
  max-width: 42ch !important;
  color: #B3C2CF !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-wrap: balance;
}

/* ── Button — DS `brand`: bg-action / text-white / rounded-xl ────────────── */

.not-found__container .btn,
.not-found__container .btn--primary,
.not-found__container .btn--alt.btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* gap:0, NOT gap:6px. Relabelling leaves TI's original text node in place as a
     zero-width anonymous flex item between the icon and ::after, so any `gap`
     is applied TWICE and renders double. The spacing lives on ::after instead,
     which is immune to how many empty items sit in the row. 6px = DS gap-1.5. */
  gap: 0 !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  border: 1px solid #006BA8 !important;
  border-radius: 12px !important;
  background: #006BA8 !important;
  color: #FFFFFF !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  /* 700, not the DS's font-medium (500): this page serves Open Sans 300/400/700
     only, so 500 would resolve DOWN to 400 and read weedy against the mockup. */
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Relabel: TI's markup hard-codes " Return Home " as a bare text node with no
   hook, so the visible label is swapped here. COST: assistive tech reads the
   original text node AND this pseudo-content, i.e. "Return Home Go back home".
   The clean fix is TI's own string (the Ember template already wraps the heading
   in <span id="i18n-1">, so a localisation override may reach it) — if that
   lands, delete these two rules rather than keeping both. */
.not-found__container .btn { font-size: 0 !important; }

.not-found__container .btn::after {
  content: "Go back home" !important;
  margin-left: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.not-found__container .btn:hover,
.not-found__container .btn--alt.btn--primary:hover {
  background: #00507E !important;
  border-color: #00507E !important;
  color: #FFFFFF !important;
}

/* White, not the DS's ring-action: on this navy the action blue lands at 2.95:1
   against the page, just under the 3:1 WCAG 2.2 needs for a focus indicator.
   The DS ring colour is specified against light surfaces. */
.not-found__container .btn:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 3px !important;
}

.not-found__container .btn .icon-left {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform: translateY(0.5px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .not-found__container .btn { transition: none !important; }
}

/* ── Small screens ───────────────────────────────────────────────────────── */

@media screen and (max-width: 640px) {
  .not-found__container { padding: 48px 20px !important; }
  .not-found__container .company__logo,
  .not-found__container .company__beta-logo {
    width: 150px !important; height: 94px !important; margin-bottom: 32px !important;
  }
  /* No ch cap: at 28px in a ~335px column a 26ch cap forces a 4-line stack of
     fragments. Let it use the full column. */
  .not-found__container h3 { max-width: none !important; }
  .not-found__container p::before { font-size: 16px !important; }
}