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

      :root {
        --font: Open Sans;
        --alt-font: Open Sans;
        --accent-color: #163052;
        --secondary-color: #c23b4a;
        --link-color: #107fa5;
        --accent-highlight-color: #163052;
        --accent-highlight-background-color: #ecf2fa;
        --accent-tinted-color-70: #b9c1cb;
        --accent-tinted-color-80: #d0d6dc;
        --accent-tinted-color-90: #e8eaee;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #21487a;
        --secondary-hover-color: #cf616d;
        --secondary-contrast-color: #fff;
        --link-hover-color: #30bbeb;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/ac1f58ba-8edc-4c75-82d4-ac13e4342f00/ool3jn6ah27n-plain-white-background.jpg'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/ac1f58ba-8edc-4c75-82d4-ac13e4342f00/byj94exz0dzg-FinalsiteTaininggrapefruit-large.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/*Hide Purchase Button */
.btn--alt.btn--secondary:active, 
.btn--alt.btn--secondary.active, 
.btn--bare.btn--secondary, 
/* .btn--link.btn--secondary, */
.heading.heading--secondary, 
.heading--secondary.collection__course__title, 
.enroll__course-select__add:hover, 
.items__list--discussions li a{
    display: none;
} 

.widget--course-purchase.widget--course-purchase_standard > div > button[data-ember-action="2308"]{
  display:none;

}

/* Highlight Zone color  */
.image__zone {
  color: #F85467;
}

.popup__caption {
  color: #163052;
}


/* Hide email capture */

.email-capture {
  display: none;
}

/* Homepage Edits */
.nav--global-links {
  background-color:white;
}
.application .container {
  box-shadow:none;
}

/* General Items to Hide */


/* Snippets and Buttons */
.darktealbutton {
  background-color: #107FA5; /* Dark Teal */
  border: none;
  color: white !important;
  padding: 16px 32px;
  text-align: center;
  text-decoration:none;
  display: inline-block;
  font-size: 16px;
  border-radius:4px;
}

/*Flip-Card Text Center */
.flip-card__front {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide recipe print button */
.recipe__info .panel.panel--alt {
    display: none;
}

/*Flip Card with Image, Increase Font Size */
.resource__title {
    font-size: 1.125em;
}

/*Center Align Images*/
.wysiwyg-text-align-center{
  text-align: center;
}

/* Note Call-out */
.note {
   background-color: #f854671e; 
  border: 2px solid #F85467; /* Grapefruit */
  color: black !important;
  padding: 12px 24px;
  text-align: left;
  text-decoration:none;
  display: inline-block;
  font-size: 16px;
  border-radius:0px;
  width:80%;
}



/*Hide the grid view description*/
.catalog-grid-item__description {
    display:none;
}

/* Circled numbered list */

ol.step {
  list-style: none;
  counter-reset: list-counter;
  padding-left: 0px;
  padding-top: 20px;

}
ol.step li {
  counter-increment: list-counter;
  display: flex;
  align-items: center;
    padding-bottom: 20px;
}
ol.step li::before {
  content: counter(list-counter);
  margin-right: 20px;
  padding: 7.5px;
  display: block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 75px;
  background: #F85467;
  color: #fff;
  text-align: center; 
  font-size: 40px;
  font-weight: bold;
  float: left;
  flex: 0 0 75px;
}

ol.step p {
  margin-bottom: 0;
}

.layout__content--sidebar .widget--one-column {
    padding: 0;
}


#team td {
    border: none;
}

//* ============================================================
   FINALSITE PRODUCT SWITCHER — TI Native Navbar Styling
   ============================================================
   SETUP:
   1. In the TI Navigation Bar editor, type  fs-product-nav  
      in the "CSS Classes" field
   2. Paste this entire CSS into Custom Code → CSS
   ============================================================ */

/* --- Navbar Container --- */
.fs-product-nav {
  background: white !important;
  border-bottom: 2px solid #F85467 !important;
  padding: 0.3rem 2rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  font-family: 'Brandon Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* --- Top-Level Nav Items (the "Select Your Product" label) --- */
.fs-product-nav > ul > li > a,
.fs-product-nav > ul > li > span,
.fs-product-nav > ul > li > button {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #595959 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 0.3rem 1rem !important;
  transition: color 0.2s ease !important;
}

.fs-product-nav > ul > li > a:hover,
.fs-product-nav > ul > li > span:hover,
.fs-product-nav > ul > li > button:hover {
  color: #F85467 !important;
}

/* --- Dropdown Menu (the product list) --- */
.fs-product-nav ul ul,
.fs-product-nav .dropdown-menu,
.fs-product-nav .sub-menu,
.fs-product-nav [class*="submenu"],
.fs-product-nav [class*="dropdown"] {
  background: white !important;
  border: 2px solid #F85467 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 0.5rem 0 !important;
  min-width: 260px !important;
  margin-top: 4px !important;
}

/* --- Individual Product Links (Composer, MXR Enterprise, etc.) --- */
.fs-product-nav ul ul li a,
.fs-product-nav .dropdown-menu li a,
.fs-product-nav .sub-menu li a,
.fs-product-nav [class*="submenu"] li a {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #595959 !important;
  padding: 0.65rem 1.25rem !important;
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
  display: block !important;
}

.fs-product-nav ul ul li a:hover,
.fs-product-nav .dropdown-menu li a:hover,
.fs-product-nav .sub-menu li a:hover,
.fs-product-nav [class*="submenu"] li a:hover {
  background: #FFF5F7 !important;
  color: #F85467 !important;
  border-left: 3px solid #F85467 !important;
}

/* --- Active/Current Product Highlight --- */
.fs-product-nav ul ul li.active a,
.fs-product-nav .dropdown-menu li.active a,
.fs-product-nav ul ul li.current a {
  background: #FFF5F7 !important;
  color: #F85467 !important;
  border-left: 3px solid #F85467 !important;
  font-weight: 700 !important;
}

/* --- Dropdown Arrow/Caret on "Select Your Product" --- */
.fs-product-nav > ul > li > a::after,
.fs-product-nav > ul > li > button::after {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 0.5rem !important;
  vertical-align: middle !important;
  border-top: 5px solid #F85467 !important;
  border-right: 5px solid transparent !important;
  border-left: 5px solid transparent !important;
  transition: transform 0.2s ease !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .fs-product-nav {
    padding: 0.25rem 1rem !important;
  }

  .fs-product-nav ul ul,
  .fs-product-nav .dropdown-menu,
  .fs-product-nav .sub-menu {
    min-width: unset !important;
    width: 100% !important;
    border-radius: 0 0 8px 8px !important;
  }
}


/* ============================================================
   OPTIONAL: Additional Link Styling (if you add more nav links)
   ============================================================ */

/* If you add a second top-level link like "Resources" or "Help" */
.fs-product-nav > ul > li:not(:first-child) > a {
  color: #163051 !important;
  font-weight: 600 !important;
}

.fs-product-nav > ul > li:not(:first-child) > a:hover {
  color: #139BCB !important;
}
body { background: #F2F2F2 !important; }
body { background: #F2F2F2 !important; }
.custom-code-block, [class*="custom-code"], [class*="CustomCode"] { background: #F2F2F2 !important; }

/* ── Activity Widget Styling ── */

/* Outer container */
.dashboard-access {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border-top: 4px solid #139BCB !important;
    overflow: hidden !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* "Activity" header bar */
.dashboard-access__header {
    background: white !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 2px solid #F2F2F2 !important;
}

.dashboard-access__header span {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #595959 !important;
}

/* Tab list */
.dashboard-access-tabs {
    padding: 0 1.5rem !important;
    background: white !important;
    border-bottom: 2px solid #F2F2F2 !important;
}

/* Individual tabs */
.dashboard-access-tab {
    color: #595959 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 1rem 1.25rem !important;
    border: 3px solid transparent !important;
    border-bottom: none !important;
}

.dashboard-access-tab:hover {
    color: #139BCB !important;
    border-color: #139BCB !important;
}

/* Active/current tab */
.dashboard-access-tab--active,
.dashboard-access-tab--current {
    background: white !important;
    border-color: #163051 !important;
    color: #163051 !important;
    font-weight: 700 !important;
}

/* Count badges */
.dashboard-access-tab .count {
    background: #F2F2F2 !important;
    color: #595959 !important;
    border-radius: 12px !important;
    padding: 0.1rem 0.5rem !important;
    font-size: 0.8rem !important;
    margin-left: 4px !important;
}
.transcript-btn {
  display: inline-block;
  background-color: #163051;
  color: #ffffff !important;
  font-family: 'Brandon Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
}

.transcript-btn:hover {
  background-color: #F85467;
}

/* ===================================================================
   VIDEO LIBRARY — v3, accessible
   Finalsite Training

   REPLACES the v2 block you pasted. Delete v2, paste this instead.
   Widget CSS / Class Names field stays:  video-library

   WHAT CHANGED FROM v2
   - Descriptions + CTA always visible (no hover-only content)
   - Keyboard focus gets the same treatment as mouse hover
   - CTA color lightened to pass WCAG AA (4.10:1 -> 5.92:1)
   - Completion checkmark restored
   - Visible focus ring on every interactive element
   - Hover lift reduced 1.09 -> 1.04

   CONTRAST (all AA pass, verified):
     #ffffff title  on #163051 card  = 13.3:1
     #c8d2de body   on #163051 card  =  8.6:1
     #FF8A96 CTA    on #163051 card  =  5.9:1
   =================================================================== */


/* --- 1. The stage ---------------------------------------------------- */

.video-library {
  background: #0e1f35;
  padding: 32px 24px 48px;
  border-radius: 12px;
  color: #e9edf2;
  font-family: 'Brandon Grotesque', 'Inter', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border-top: 4px solid #F85467;
}

.video-library .catalog-filters,
.video-library .catalog-sort,
.video-library .catalog-search-bar { color: #e9edf2; }

.video-library .catalog-aggregation__header--label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  font-weight: 700;
  color: #e9edf2;            /* full opacity — was .75, now unneeded */
}

.video-library .catalog-aggregation__value a { color: #c8d2de; }
.video-library .catalog-aggregation__value a:hover { color: #FF8A96; }

.video-library .catalog-search__button,
.video-library .catalog-filters__select,
.video-library .catalog-filters__search input {
  background: #163051;
  border: 1px solid #3c5a7d;
  color: #ffffff;
}

.video-library .catalog-filters__search input::placeholder { color: #9fb0c4; }


/* --- 2. Visible focus ring everywhere -------------------------------- */

.video-library a:focus-visible,
.video-library button:focus-visible,
.video-library input:focus-visible,
.video-library select:focus-visible {
  outline: 3px solid #FFD166;
  outline-offset: 2px;
  border-radius: 3px;
}

/* older browsers without :focus-visible */
.video-library a:focus,
.video-library button:focus,
.video-library input:focus,
.video-library select:focus {
  outline: 3px solid #FFD166;
  outline-offset: 2px;
}


/* --- 3. Grid --------------------------------------------------------- */

.video-library .large-block-grid-3 > li { width: 25%; }

@media (max-width: 1024px) {
  .video-library .large-block-grid-3 > li,
  .video-library .medium-block-grid-2 > li { width: 33.333%; }
}
@media (max-width: 640px) {
  .video-library .large-block-grid-3 > li,
  .video-library .medium-block-grid-2 > li,
  .video-library .small-block-grid-1 > li { width: 100%; }
}

.video-library .js-results-holder,
.video-library .js-results-holder ul,
.video-library .js-results-holder li,
.video-library .catalog-item { overflow: visible; }

.video-library .js-results-holder li { padding: 0 8px 28px; }


/* --- 4. Card --------------------------------------------------------- */

.video-library .catalog-grid-item {
  background: #163051;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

/* focus-within = keyboard users get the same affordance as hover */
.video-library .catalog-item:hover,
.video-library .catalog-item:focus-within { z-index: 20; position: relative; }

.video-library .catalog-grid-item:hover,
.video-library .catalog-item:focus-within .catalog-grid-item {
  transform: scale(1.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}


/* --- 5. Thumbnail + play badge (always visible) ---------------------- */

.video-library .catalog-grid-item__asset-container {
  position: relative;
  overflow: hidden;
  background: #0e1f35;
}

.video-library .catalog-grid-item__asset {
  display: block;
  width: 100%;
  transition: opacity .2s ease;
}

.video-library .catalog-grid-item:hover .catalog-grid-item__asset,
.video-library .catalog-item:focus-within .catalog-grid-item__asset {
  opacity: .7;
}

/* Badge is always on screen so it reads as "video" without interaction.
   Decorative only — the link text carries the meaning.               */
.video-library .catalog-grid-item__asset-container::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(248,84,103,.92)
              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='white'/></svg>")
              no-repeat 55% 50%;
  background-size: 26px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  transition: transform .2s ease, background-color .2s ease;
  pointer-events: none;
}

.video-library .catalog-grid-item:hover .catalog-grid-item__asset-container::after,
.video-library .catalog-item:focus-within .catalog-grid-item__asset-container::after {
  transform: scale(1.12);
  background-color: #F85467;
}


/* --- 6. Card body — everything always visible ------------------------ */

.video-library .catalog-grid-item__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-library .catalog-grid-item__title,
.video-library .catalog-grid-item__title a {
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.video-library .catalog-grid-item__title a:hover { text-decoration: underline; }

/* Override of your global display:none — scoped to this widget.
   Always visible now, clamped to 3 lines instead of hidden.        */
.video-library .catalog-grid-item__description {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #c8d2de;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* CTA always visible, AA-compliant color */
.video-library .catalog-grid-item__cta-container {
  margin-top: auto;
  padding-top: 4px;
}

.video-library .catalog-grid-item__cta-container a {
  color: #FF8A96 !important;
  font-weight: 700;
  text-decoration: underline;      /* not color alone — WCAG 1.4.1 */
  text-underline-offset: 3px;
}

.video-library .catalog-grid-item__cta-container a:hover { color: #ffffff !important; }


/* --- 7. Keep meaningful state, hide only decoration ------------------ */

/* Completion checkmark RESTORED — it is real status information */
.video-library .catalog-grid-item__completed-container {
  display: block;
}

/* These carry no information in a single-type video library */
.video-library .catalog-grid-item__hr,
.video-library .catalog-grid-item__stars { display: none; }

/* Content-type label kept, just quieted down */
.video-library .catalog-grid-item__source {
  color: #9fb0c4;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.video-library .catalog__ribbon {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* --- 8. Motion and contrast preferences ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .video-library .catalog-grid-item,
  .video-library .catalog-grid-item__asset,
  .video-library .catalog-grid-item__asset-container::after { transition: none; }

  .video-library .catalog-grid-item:hover,
  .video-library .catalog-item:focus-within .catalog-grid-item { transform: none; }
}

@media (prefers-contrast: more) {
  .video-library .catalog-grid-item { border: 2px solid #ffffff; }
  .video-library .catalog-grid-item__description { color: #ffffff; }
  .video-library .catalog-grid-item__cta-container a { color: #ffffff !important; }
}


/* ================================================================
   VIDEO LIBRARY — CUSTOM CODE
   Site > Site Builder > Custom Code

   Purpose: make the NATIVE Thought Industries widgets on the Video
   Library page look like the cards in the Composer landing page
   template. Everything is scoped under .fs-vid so nothing leaks onto the
   homepage, the global catalog, or your lesson pages.

   Add "fs-vid" plus the section class to each native widget's
   CSS field (bottom of the widget editor, space-separated).

   ---- WIDGET STACK (top to bottom) ----
     1. Custom HTML ....... Block 1 (header, intro, jump buttons)
     2. Catalog ........... fs-vid fs-videos-catalog   blue
        query: tags:"VideoLibrary"                     #browse-all
     3. Featured Tiles .... fs-vid fs-videos-start     coral
        query: tags:"VideoLibrary" AND tags:"Getting Started"
                                                       #getting-started
     4. Carousel .......... fs-vid fs-videos-new       teal
        query: tags:"VideoLibrary" AND tags:"New"      #new-this-month
     5. Custom HTML ....... Block 2 (additional support)

   NOTE: .fs-videos-start was .fs-videos-popular ("Most Watched")
   until Aug 17. If an older copy of this file is live anywhere, the
   coral section will lose its styling after this rename.

   ---- SCOPE: NATIVE WIDGETS ONLY ----
   CONFIRMED Aug 17: Custom Code does NOT reach Custom HTML widgets
   in this instance. Blocks 1 and 2 each carry their own <style> tag
   and own everything inside them — the welcome banner, the intro
   card, the jump buttons, the support cards, and the anchor offsets.
   Do not add rules for those here; they will not apply. Earlier
   revisions tried and the page rendered as unstyled text.

   ---- ONE VALUE TO KEEP IN SYNC BY HAND ----
   The width knob below (max-width on .fs-vid) must match the
   max-width in Block 1's and Block 2's <style> tags, or the custom
   blocks won't line up with the native sections. Currently 1600px
   in all three places. This is the cost of the split; there is no
   way to share a variable across the boundary.
   ================================================================ */


/* ----------------------------------------------------------------
   1. SECTION SHELLS
   Same white card + 4px colored top border as the homepage:
   teal = New, coral = Most Watched, blue = Browse All

   WIDTH KNOB: max-width caps how wide these sections get. All three
   sections share this one value so they line up — the catalog used
   to override it to 1600px, which is why the carousel looked
   narrower than the catalog on the live page. Change it here only.
   1200px is the homepage default; `none` goes edge-to-edge.
   ---------------------------------------------------------------- */
.fs-vid {
    max-width: 1600px;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #595959;
    line-height: 1.6;
}
.fs-videos-new     { border-top: 4px solid #2DB9A3; }  /* What's New */
.fs-videos-start   { border-top: 4px solid #F85467; }  /* Getting Started */
.fs-videos-catalog { border-top: 4px solid #139BCB; }  /* Browse the Video Library */


/* ----------------------------------------------------------------
   SCOPING NOTE
   Sections 2-6 apply to the Carousel and Tiles ONLY. They are
   excluded from the catalog with :not(.fs-videos-catalog), because
   [class*="grid-item"] also matches catalog-grid-item__title,
   __description, __body, __cta-container and __completed-container,
   which would give every child element its own card border.
   The catalog is governed entirely by section 7.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   2. WIDGET TITLE
   Matches .fs-col-header h2 / p from the homepage template.
   TI renders the widget title in its own heading element; these
   selectors cover the common cases.
   ---------------------------------------------------------------- */
.fs-vid > h2,
.fs-vid:not(.fs-videos-catalog) [class*="widget__title"],
.fs-vid:not(.fs-videos-catalog) [class*="widget-title"],
.fs-vid:not(.fs-videos-catalog) [class*="section-title"] {
    font-size: 1.4rem;
    color: #595959;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.fs-vid:not(.fs-videos-catalog) [class*="widget__subtitle"],
.fs-vid:not(.fs-videos-catalog) [class*="widget-subtitle"] {
    color: #888;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}


/* ----------------------------------------------------------------
   3. CONTENT TILES
   Reproduces .fs-module-card: #FAFAFA fill, 10px radius,
   2px #E8E8E8 border, hover lifts to white + accent border.

   CAUTION: [class*="slide"] matches more than a single card. On a
   carousel it also matches the TRACK and the OUTER SLIDER
   ("slick-slider", "slick-list", "slick-track", "slides", and so
   on). When it did, `overflow: hidden` landed on the track and
   clipped the prev/next arrows out of view, and the borders drew a
   box around the whole strip. The :not() guards below keep this
   rule on individual cards. See 3b.
   ---------------------------------------------------------------- */
.fs-vid:not(.fs-videos-catalog) [class*="grid-item"]:not([class*="track"]):not([class*="list"]):not([class*="slider"]):not([class*="asset"]):not([class*="image"]):not([class*="media"]):not([class*="thumbnail"]):not([class*="body"]),
.fs-vid:not(.fs-videos-catalog) [class*="catalog-item"],
.fs-vid:not(.fs-videos-catalog) [class*="tile"]:not([class*="track"]):not([class*="list"]):not([class*="slider"]):not([class*="asset"]):not([class*="image"]):not([class*="media"]):not([class*="thumbnail"]):not([class*="body"]),
.fs-vid:not(.fs-videos-catalog) [class*="slide"]:not([class*="track"]):not([class*="list"]):not([class*="slider"]):not([class*="slides"]):not([class*="asset"]):not([class*="image"]):not([class*="media"]):not([class*="thumbnail"]) {
    background: #FAFAFA;
    border: 2px solid #E8E8E8;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
}
.fs-vid:not(.fs-videos-catalog) [class*="grid-item"]:hover:not([class*="asset"]):not([class*="image"]):not([class*="media"]):not([class*="thumbnail"]):not([class*="body"]),
.fs-vid:not(.fs-videos-catalog) [class*="catalog-item"]:hover,
.fs-vid:not(.fs-videos-catalog) [class*="tile"]:hover:not([class*="asset"]):not([class*="image"]):not([class*="media"]):not([class*="thumbnail"]):not([class*="body"]),
.fs-vid:not(.fs-videos-catalog) [class*="slide"]:hover:not([class*="asset"]):not([class*="image"]):not([class*="media"]):not([class*="thumbnail"]) {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.fs-videos-new     [class*="grid-item"]:hover,
.fs-videos-new     [class*="slide"]:hover { border-color: #2DB9A3; }
.fs-videos-start [class*="grid-item"]:hover,
.fs-videos-start [class*="tile"]:hover  { border-color: #F85467; }


/* ----------------------------------------------------------------
   3b. CAROUSEL ARROWS — .fs-videos-new AND .fs-videos-start
   Both sections are carousels and use the same coral arrow circle
   (brand CTA color), so they're combined here instead of
   duplicated. Card-hover border color stays per-section (teal vs
   coral) — that's set separately in section 3, not touched here.
   ---------------------------------------------------------------- */
.fs-videos-new [class*="slick-list"],
.fs-videos-new [class*="track"],
.fs-videos-start [class*="slick-list"],
.fs-videos-start [class*="track"] {
    overflow: hidden;
}

.fs-vid.fs-videos-new,
.fs-vid.fs-videos-start {
    padding-left: 3.25rem;
    padding-right: 3.25rem;
}

.fs-vid.fs-videos-new button,
.fs-vid.fs-videos-start button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #F85467 !important;
    color: #ffffff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5;
    cursor: pointer;
    transition: background .2s ease;
}
.fs-vid.fs-videos-new button:hover,
.fs-vid.fs-videos-start button:hover {
    background: #E5475F !important;
    box-shadow: 0 4px 14px rgba(248,84,103,0.45);
}

.fs-vid.fs-videos-new button::before,
.fs-vid.fs-videos-start button::before {
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 700;
    color: #ffffff;
    display: block;
}
.fs-vid.fs-videos-new button[class*="prev"]::before,
.fs-vid.fs-videos-new button[class*="left"]::before,
.fs-vid.fs-videos-new button:first-of-type::before,
.fs-vid.fs-videos-start button[class*="prev"]::before,
.fs-vid.fs-videos-start button[class*="left"]::before,
.fs-vid.fs-videos-start button:first-of-type::before { content: "\2039"; }

.fs-vid.fs-videos-new button[class*="next"]::before,
.fs-vid.fs-videos-new button[class*="right"]::before,
.fs-vid.fs-videos-new button:last-of-type::before,
.fs-vid.fs-videos-start button[class*="next"]::before,
.fs-vid.fs-videos-start button[class*="right"]::before,
.fs-vid.fs-videos-start button:last-of-type::before  { content: "\203A"; }

.fs-vid.fs-videos-new [class*="prev"],
.fs-vid.fs-videos-new [class*="left"],
.fs-vid.fs-videos-start [class*="prev"],
.fs-vid.fs-videos-start [class*="left"]  { left: 4px !important; right: auto !important; }
.fs-vid.fs-videos-new [class*="next"],
.fs-vid.fs-videos-new [class*="right"],
.fs-vid.fs-videos-start [class*="next"],
.fs-vid.fs-videos-start [class*="right"] { right: 4px !important; left: auto !important; }

.fs-vid.fs-videos-new [class*="dots"] li button,
.fs-vid.fs-videos-start [class*="dots"] li button {
    width: 10px !important;
    height: 10px !important;
    font-size: 0 !important;
    background: #CACACA !important;
    box-shadow: none;
}
.fs-vid.fs-videos-new [class*="dots"] li button::before,
.fs-vid.fs-videos-start [class*="dots"] li button::before { content: "" !important; }
.fs-vid.fs-videos-new   [class*="dots"] li[class*="active"] button { background: #2DB9A3 !important; }
.fs-vid.fs-videos-start [class*="dots"] li[class*="active"] button { background: #F85467 !important; }

/* ----------------------------------------------------------------
   4. TILE TYPOGRAPHY
   ---------------------------------------------------------------- */
.fs-vid:not(.fs-videos-catalog) h3,
.fs-vid:not(.fs-videos-catalog) [class*="item__title"] {
    font-size: 1.1rem;
    color: #595959;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.fs-vid:not(.fs-videos-catalog) p,
.fs-vid:not(.fs-videos-catalog) [class*="item__description"] {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.5;
}
.fs-vid:not(.fs-videos-catalog) [class*="item__source"],
.fs-vid:not(.fs-videos-catalog) [class*="item__type"] {
    font-size: 0.78rem;
    color: #888;
    font-weight: 600;
}


/* ----------------------------------------------------------------
   5. RIBBONS + BADGES
   Matches .fs-new-badge (coral pill) and .fs-gs-badge (tinted pill)
   ---------------------------------------------------------------- */
.fs-vid:not(.fs-videos-catalog) [class*="ribbon"] {
    background: #F85467;
    color: #ffffff;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.6rem;
}
.fs-vid:not(.fs-videos-catalog) [class*="custom-field"],
.fs-vid:not(.fs-videos-catalog) [class*="tag"] {
    background: #E7F4FA;
    color: #139BCB;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.55rem;
}


/* ----------------------------------------------------------------
   6. BUTTONS + LINKS
   Matches .fs-btn-primary, including the translateY hover lift.
   ---------------------------------------------------------------- */
.fs-vid:not(.fs-videos-catalog) .btn,
.fs-vid:not(.fs-videos-catalog) button[class*="primary"],
.fs-vid:not(.fs-videos-catalog) a[class*="btn"] {
    background: #F85467;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.3s;
}
.fs-vid:not(.fs-videos-catalog) .btn:hover,
.fs-vid:not(.fs-videos-catalog) button[class*="primary"]:hover,
.fs-vid:not(.fs-videos-catalog) a[class*="btn"]:hover {
    background: #E5475F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248,84,103,0.3);
}
.fs-videos-new     a[class*="cta"] { color: #2DB9A3; font-weight: 600; }
.fs-videos-start a[class*="cta"] { color: #F85467; font-weight: 600; }


/* ================================================================
   7. CATALOG WIDGET  —  css field: fs-vid fs-videos-catalog

   Uses REAL Thought Industries class names (no wildcards), taken
   from the working video-library-v3-accessible.css. Sizing,
   padding, and hover behavior mirror that file; colors stay in the
   light Finalsite card palette used by the rest of this page.
   ================================================================ */

/* ---- 7a. Widget padding ----------------------------------------- */
/* Roomier padding than the other two widgets — the catalog carries
   more. max-width is deliberately NOT set here; it inherits the
   single knob in section 1 so all three sections align. */
.fs-vid.fs-videos-catalog {
    padding: 2.25rem 2rem;
}


/* ---- 7b. Grid: 3 across desktop, 2 at tablet, 1 at mobile -------
   3-across gives noticeably larger cards than 4. If you'd rather
   fit more per row, change 33.333% back to 25% and bump the
   1024px breakpoint to 33.333%.
   ---------------------------------------------------------------- */
.fs-videos-catalog .large-block-grid-3 > li { width: 33.333%; }

@media (max-width: 1024px) {
    .fs-videos-catalog .large-block-grid-3 > li,
    .fs-videos-catalog .medium-block-grid-2 > li { width: 50%; }
}
@media (max-width: 640px) {
    .fs-videos-catalog .large-block-grid-3 > li,
    .fs-videos-catalog .medium-block-grid-2 > li,
    .fs-videos-catalog .small-block-grid-1 > li { width: 100%; }
}

/* Wider gutters between cards + room below each row for the lift */
.fs-videos-catalog .js-results-holder li { padding: 0 14px 36px; }
.fs-videos-catalog .large-block-grid-3 { margin-left: -14px; margin-right: -14px; }

/* Without this the scaled card gets clipped by its container */
.fs-videos-catalog .js-results-holder,
.fs-videos-catalog .js-results-holder ul,
.fs-videos-catalog .js-results-holder li,
.fs-videos-catalog .catalog-item { overflow: visible; }

/* Equal card heights across a row.
   7c already sets height:100% on the card, but Foundation's
   block-grid <li> is a float with no height, so 100% resolved to
   auto and a two-line title made its card taller than the rest.
   Making the li a flex column gives the 100% something to measure. */
.fs-videos-catalog .js-results-holder li { display: flex; }
.fs-videos-catalog .catalog-item { display: flex; flex-direction: column; width: 100%; }


/* ---- 7c. Card + hover ------------------------------------------- */
.fs-vid.fs-videos-catalog .catalog-grid-item {
    background: #FAFAFA;
    border: 2px solid #E8E8E8;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease,
                background .2s ease, border-color .2s ease;
}

/* Lift the hovered card above its neighbors.
   :focus-within gives keyboard users the same affordance. */
.fs-videos-catalog .catalog-item:hover,
.fs-videos-catalog .catalog-item:focus-within {
    z-index: 20;
    position: relative;
}

.fs-vid.fs-videos-catalog .catalog-grid-item:hover,
.fs-videos-catalog .catalog-item:focus-within .catalog-grid-item {
    transform: scale(1.04);
    background: #ffffff;
    border-color: #139BCB;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}


/* ---- 7d. Thumbnail --------------------------------------------- */
/* aspect-ratio gives the container a height of its own — without it
   the box just took the image's native 16:9. object-fit:cover then
   crops the image to fill the taller box instead of letterboxing.
     16/9 = 1.78  original, widest
      3/2 = 1.50  current
      4/3 = 1.33  noticeably taller
   Change aspect-ratio only; the rest stays as it is.
   NOTE: cover crops left/right, and "Messages" sits top-left on
   these thumbnails. It clears the edge at 3/2 but check it first if
   you ever go taller — object-position: left center protects it. */
.fs-videos-catalog .catalog-grid-item__asset-container {
    position: relative;
    overflow: hidden;              /* required for cover to crop cleanly */
    background: #F2F2F2;
    aspect-ratio: 3 / 2;
}
.fs-videos-catalog .catalog-grid-item__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .2s ease;
}
.fs-videos-catalog .catalog-grid-item:hover .catalog-grid-item__asset,
.fs-videos-catalog .catalog-item:focus-within .catalog-grid-item__asset {
    opacity: .85;
}


/* ---- 7e. Card body: sizing + padding --------------------------- */
/* The card itself is a flex column so the body can absorb the
   leftover height; that's what lets margin-top:auto below pin the
   CTA to the bottom edge of every card regardless of title length. */
.fs-vid.fs-videos-catalog .catalog-grid-item {
    display: flex;
    flex-direction: column;
}
.fs-videos-catalog .catalog-grid-item__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.fs-vid.fs-videos-catalog .catalog-grid-item__title,
.fs-vid.fs-videos-catalog .catalog-grid-item__title a {
    color: #595959 !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.fs-videos-catalog .catalog-grid-item__title a:hover { text-decoration: underline; }

/* Always visible, clamped to 3 lines rather than hidden on hover */
.fs-vid.fs-videos-catalog .catalog-grid-item__description {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #888;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

/* CTA pinned to the bottom so cards of different heights align.
   The live label is "Start Video" (TI's wording — not editable in
   CSS, and "View Details" never appears on this widget). */
.fs-videos-catalog .catalog-grid-item__cta-container {
    margin-top: auto;
    padding-top: 4px;
    text-align: right;
}

/* Coral pill treatment. On the live page this link rendered dark
   navy and unstyled, so the earlier single-class rule wasn't
   reaching it — hence the extra specificity and !important on
   color. The <a> is targeted directly as well as via any class it
   carries. */
.fs-vid.fs-videos-catalog .catalog-grid-item__cta-container a,
.fs-vid.fs-videos-catalog .catalog-grid-item__cta-container a[class],
.fs-vid.fs-videos-catalog .catalog-grid-item__cta-container a:visited {
    display: inline-block;
    background: #F85467;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background .2s ease;
}
.fs-vid.fs-videos-catalog .catalog-grid-item__cta-container a:hover,
.fs-vid.fs-videos-catalog .catalog-grid-item__cta-container a:focus {
    background: #C23B4A;      /* accessible grapefruit — brand guideline */
    color: #ffffff !important;
}


/* ---- 7f. Meta: keep status, quiet the decoration --------------- */
.fs-videos-catalog .catalog-grid-item__completed-container { display: block; }
.fs-videos-catalog .catalog-grid-item__hr,
.fs-videos-catalog .catalog-grid-item__stars { display: none; }

/* Live markup order is title -> source -> description. Reordering
   visually puts the module label above the title, matching the
   homepage badge pattern. order:-1 only works because 7e makes the
   body a flex column. Delete this order line to keep TI's order. */
.fs-videos-catalog .catalog-grid-item__source {
    order: -1;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.fs-videos-catalog .catalog__ribbon {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ---- 7g. Filter sidebar — VISIBLE, narrowed ---------------------
   The sidebar holds the VIDEO LIBRARY categories dropdown, which is
   worth keeping. An earlier revision hid it outright and took the
   dropdown with it — don't do that again.

   WHY THE FIRST ATTEMPT FAILED, and what it told us: setting
   `width: 200px` on .catalog-filters / [class*="catalog-aggregations"]
   changed nothing, but `display: none` on the same selectors DID
   remove the dropdown. So those selectors match an element INSIDE
   the column, not the column itself — a width on a child can't
   shrink a wide parent. The column's own class is still unconfirmed.

   So the column is reached by relationship rather than by name:
   :has() selects whichever element contains the aggregation block.
   That sidesteps needing the class at all.

   VERIFY: if the sidebar is still wide, :has() isn't matching and
   the column width is likely set inline — in that case get the
   column's class from DevTools and set it directly.
   ---------------------------------------------------------------- */

/* Narrow whichever column contains the filter block */
.fs-videos-catalog .columns:has(.catalog-aggregation),
.fs-videos-catalog [class*="columns"]:has(.catalog-filters),
.fs-videos-catalog [class*="column"]:has(.catalog-aggregation__header) {
    width: 220px !important;
    max-width: 220px !important;
    padding-right: 1.25rem !important;
}

/* Give the reclaimed width to the results column */
.fs-videos-catalog .columns:has(.js-results-holder),
.fs-videos-catalog [class*="columns"]:has(.js-results-holder) {
    width: calc(100% - 220px) !important;
    max-width: calc(100% - 220px) !important;
}

/* Fallback for the no-:has() case — keeps the filter block itself
   from growing wider than the column we're aiming for. Harmless
   alongside the rules above. */
.fs-videos-catalog .catalog-filters,
.fs-videos-catalog [class*="catalog-aggregations"] {
    max-width: 220px;
}

@media (max-width: 900px) {
    /* Stack rather than squeeze on small screens */
    .fs-videos-catalog .columns:has(.catalog-aggregation),
    .fs-videos-catalog [class*="columns"]:has(.catalog-filters),
    .fs-videos-catalog .columns:has(.js-results-holder) {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ---- 7h. Filters, sort, and search bar -------------------------- */
/* Category group label ("VIDEO LIBRARY") and its links */
.fs-videos-catalog .catalog-aggregation__header--label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    font-weight: 700;
    color: #595959;
}
.fs-videos-catalog .catalog-aggregation__value a {
    color: #0E7BA3;
    font-size: 14px;
    text-decoration: none;
}
.fs-videos-catalog .catalog-aggregation__value a:hover {
    color: #F85467;
    text-decoration: underline;
}

.fs-videos-catalog .catalog-filters__search {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #E8E8E8;
    border-radius: 6px;
    overflow: hidden;
}
.fs-videos-catalog .catalog-filters__search input {
    background: transparent;
    border: none;
    outline: none !important;
    color: #595959;
    font-family: inherit;
    padding: 0.6rem 0.9rem;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}
.fs-videos-catalog .catalog-filters__search input::placeholder { color: #888; }
.fs-videos-catalog .catalog-search__button {
    background: transparent;
    border: none;
    color: #595959;
}
.fs-videos-catalog .catalog-filters__select {
    background: #ffffff;
    border: 2px solid #E8E8E8;
    border-radius: 6px;
    color: #595959;
    font-family: inherit;
}
.fs-videos-catalog .catalog-filters__search:focus-within {
    outline: 3px solid #F85467;
    outline-offset: 2px;
    border-radius: 6px;
}


/* ---- 7i. Visible focus ring on every control -------------------
   The live page showed a blue outline on the first card. If that is
   TI's own focus style rather than a hover artifact, these rules
   need to outrank it — hence the .fs-vid prefix and !important on
   the outline only. Harmless if the blue turns out to be hover.
   ---------------------------------------------------------------- */
.fs-vid.fs-videos-catalog .catalog-grid-item:focus,
.fs-vid.fs-videos-catalog .catalog-item:focus,
.fs-vid.fs-videos-catalog .catalog-grid-item__title a:focus-visible {
    outline: 3px solid #F85467 !important;
    outline-offset: 2px;
}

.fs-videos-catalog a:focus-visible,
.fs-videos-catalog button:focus-visible,
.fs-videos-catalog select:focus-visible {
    outline: 3px solid #F85467;
    outline-offset: 2px;
    border-radius: 3px;
}
/* fallback for browsers without :focus-visible */
.fs-videos-catalog a:focus,
.fs-videos-catalog button:focus,
.fs-videos-catalog select:focus {
    outline: 3px solid #F85467;
    outline-offset: 2px;
}


/* ---- 7j. OPTIONAL: play badge on each thumbnail ----------------
   Lifted from video-library-v3-accessible.css. Decorative only —
   the link text carries the meaning. The SVG is a CSS data URI,
   not markup, so the widget sanitizer leaves it alone.
   Delete this sub-section if you'd rather keep thumbnails plain.
   ---------------------------------------------------------------- */
.fs-videos-catalog .catalog-grid-item__asset-container::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(248,84,103,.92)
                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='white'/></svg>")
                no-repeat 55% 50%;
    background-size: 26px 26px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    transition: transform .2s ease, background-color .2s ease;
    pointer-events: none;
}
.fs-videos-catalog .catalog-grid-item:hover .catalog-grid-item__asset-container::after,
.fs-videos-catalog .catalog-item:focus-within .catalog-grid-item__asset-container::after {
    transform: scale(1.12);
    background-color: #F85467;
}


/* ---- 7k. Motion + contrast preferences ------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fs-videos-catalog .catalog-grid-item,
    .fs-videos-catalog .catalog-grid-item__asset,
    .fs-videos-catalog .catalog-grid-item__asset-container::after { transition: none; }

    .fs-videos-catalog .catalog-grid-item:hover,
    .fs-videos-catalog .catalog-item:focus-within .catalog-grid-item { transform: none; }
}

@media (prefers-contrast: more) {
    .fs-videos-catalog .catalog-grid-item { border: 2px solid #595959; }
    .fs-videos-catalog .catalog-grid-item__description { color: #595959; }
}


/* ----------------------------------------------------------------
   8. RESPONSIVE — matches the homepage 768px breakpoint
   Native widgets only. The Custom HTML blocks carry their own
   breakpoints inside their own <style> tags.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .fs-vid { padding: 1rem; margin-bottom: 1.5rem; }
}


/* ================================================================
   VERIFY BEFORE PUBLISHING

   CONFIRMED LIVE (Aug 14) — a screenshot of the rendered catalog
   showed the blue top border, the coral play badge centered on each
   thumbnail, 3 cards per row, and always-visible descriptions. That
   validates .catalog-grid-item, __asset-container, __body, __title,
   __description, __cta-container and .large-block-grid-3.

   STILL OPEN in section 7:
   - 7i focus ring. Added higher-specificity rules for the blue
     outline seen on card 1; confirm whether that outline is focus
     or hover before trusting them.

   - 7g sidebar. Now narrowed via :has() on the parent column rather
     than hidden. Confirm the sidebar shrank AND the VIDEO LIBRARY
     dropdown is still there. If it's still full width, get the
     column's class from DevTools.

   RESOLVED in section 7:
   - 7e CTA. "Start Video" is TI's label; it now renders as a coral
     pill. Colour is no longer the only signal, so the underline
     that was there for WCAG 1.4.1 is no longer needed.

   REGRESSION TO NOT REPEAT (2): 7g briefly used `display: none` on
   the aggregation selectors to reclaim the sidebar width. It worked,
   but it also removed the VIDEO LIBRARY categories dropdown, which
   is the one thing in that column worth keeping. Narrow the column,
   never hide the block.

   STILL OPEN in sections 2-3b (Carousel):
   - Arrow styling is now class-agnostic (any button in the section).
     CONFIRMED from the live page: the arrow element DOES exist in
     the DOM, it renders with no glyph, and the class-name guesses
     did not match it. If any element other than an arrow in this
     section is a <button>, it will get the coral circle treatment
     too — check for that.
   - CONFIRMED: TI's arrows are text-labelled ("Previous" / "Next"),
     not icons. 3b collapses the label with font-size:0 and draws a
     chevron via ::before. The label stays in the DOM so the button
     keeps an accessible name — don't replace it with display:none.
   - The prev/next chevrons try class selectors first and fall back
     to :first-of-type / :last-of-type. If both arrows end up with
     the same glyph, the classes didn't match AND the buttons don't
     share a parent — send me their DOM path.
   - Section 3's :not() guards fixed the track being styled as a
     card. If the strip still draws one big bordered box, a class
     the guards don't cover is matching — inspect and extend.

   REGRESSION TO NOT REPEAT: an earlier revision set
   `overflow: visible` on the carousel track to un-clip the arrows.
   That removed the mask the carousel needs, so all slides rendered
   at once, the strip ran past the section edge, and the page got a
   horizontal scrollbar. The mask stays hidden; arrows get room via
   side padding on the section instead. See 3b.

   NOT FIXABLE IN CSS — noted here so it isn't re-attempted:
   - Description truncation (~70 chars) happens server-side. The fix
     is writing the first 60 characters to carry the meaning.
   - Video duration is not in catalog card data. Any runtime badge
     has to live in the title or description.
   - The widget heading ("Browse") is the widget editor's title
     field, not CSS. Either lengthen it or shorten the Block 1 jump
     button so the two agree.
   - "Side Title" on the carousel is also a title field — TI's
     default placeholder text. Set it to "New This Month" in the
     widget editor. No selector can rename it.

   REMOVED Aug 17: former sections 8 (Custom HTML block spacing) and
   9 (jump buttons + anchor offsets). Those rules targeted the
   Custom HTML blocks, which Custom Code cannot reach, so they never
   did anything. The jump-button styling now lives in Block 1's
   <style> tag. The anchor-offset rule for #new-this-month /
   #most-watched / #browse-all needs to move into Block 1 as well —
   a widget <style> tag applies document-wide, so it works there.

   Sections 2-6 still use attribute-substring selectors
   ([class*="..."]) for the Featured Content Carousel and Featured
   Content Tiles, whose class names we haven't confirmed. Open one
   rendered tile in each of those two widgets in DevTools, read the
   real class names, and replace the wildcards.

   Use the eye icon in Custom Code to preview before Publish —
   published changes go live sitewide immediately.
   ================================================================ */