@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).
   ================================================================ */


/* ----------------------------------------------------------------
   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; }  /* New This Month */
.fs-videos-popular { border-top: 4px solid #F85467; }  /* Most Watched */
.fs-videos-catalog { border-top: 4px solid #139BCB; }  /* Browse the Full 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"]),
.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"]),
.fs-vid:not(.fs-videos-catalog) [class*="slide"]:not([class*="track"]):not([class*="list"]):not([class*="slider"]):not([class*="slides"]) {
    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,
.fs-vid:not(.fs-videos-catalog) [class*="catalog-item"]:hover,
.fs-vid:not(.fs-videos-catalog) [class*="tile"]:hover,
.fs-vid:not(.fs-videos-catalog) [class*="slide"]:hover {
    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-popular [class*="grid-item"]:hover,
.fs-videos-popular [class*="tile"]:hover  { border-color: #F85467; }


/* ----------------------------------------------------------------
   3b. CAROUSEL ARROWS  —  .fs-videos-new only
   The carousel showed 2 of 3 items with no way to reach the third.

   WHAT NOT TO DO (learned the hard way): do not set
   `overflow: visible` on the track or list. That mask is what makes
   a carousel a carousel — without it every slide renders at once,
   the strip spills past the section edge, and the page gains a
   horizontal scrollbar. The mask stays hidden.

   Instead, make room for the arrows INSIDE the section with side
   padding, so arrows positioned outside the track still land within
   the section's own box.

   CHECK THE WIDGET EDITOR FIRST. TI's Featured Content Carousel has
   its own arrow/dot settings, and some versions only render arrows
   when item count exceeds the visible slot count. With 3 items in
   3 slots there may be nothing to page to, and no arrows is correct
   behavior. If arrows are off there, no CSS below will conjure them.
   ---------------------------------------------------------------- */

/* The mask stays hidden. Stated explicitly so nothing later
   re-opens it by accident. */
.fs-videos-new [class*="slick-list"],
.fs-videos-new [class*="track"] {
    overflow: hidden;
}

/* Room for arrows at the sides.

   NOTE: this section deliberately does NOT set `overflow: hidden`.
   It did briefly, as a backstop against the spill described above —
   but with the track's own mask restored the spill can't happen,
   and the section-level hidden was clipping the arrow at the right
   edge instead. The mask is the correct place for containment. */
.fs-vid.fs-videos-new {
    padding-left: 3.25rem;
    padding-right: 3.25rem;
}

/* Arrow buttons.

   The class-name guesses tried earlier did NOT match on the live
   page, so the primary rule is class-agnostic: any <button> inside
   this section is an arrow, because a carousel section has no other
   buttons. That holds regardless of what TI names them.

   TI's arrows carry a visible TEXT label ("Previous" / "Next")
   rather than an icon. Left alone, that text forces the button
   wider than 40px and spills outside the circle. `font-size: 0`
   collapses the label visually while leaving it in the DOM, so
   screen readers still announce "Previous" and "Next" — the
   chevron is decorative and added via ::before at a real size.
   Do NOT swap this for `display: none` or replace the label text;
   that removes the only accessible name the button has. */
.fs-vid.fs-videos-new 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;        /* collapses "Previous" / "Next" */
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;    /* nothing spills past the circle */
    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;
}
/* Hover changes color and shadow only — deliberately NOT transform.
   Carousel arrows are usually centered with
   `transform: translateY(-50%)`, and a transform here would replace
   that and drop the arrow out of alignment on hover. */
.fs-vid.fs-videos-new button:hover {
    background: #E5475F !important;
    box-shadow: 0 4px 14px rgba(248,84,103,0.45);
}

/* The chevrons. font-size is re-set here because the button's own
   font-size is 0. Entity escapes, not raw characters, so nothing
   depends on encoding surviving the paste:
     \2039 = single left angle quote   (previous)
     \203A = single right angle quote  (next)
   Class selectors first, then first/last-of-type as the fallback
   for when the classes don't match — whichever lands, the glyph
   only renders once because ::before can only exist once. */
.fs-vid.fs-videos-new 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 { 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  { content: "\203A"; }

/* Keep the arrows inside the padded area rather than hanging off
   the section edge, where they were being clipped. */
.fs-vid.fs-videos-new [class*="prev"],
.fs-vid.fs-videos-new [class*="left"]  { left: 4px !important; right: auto !important; }
.fs-vid.fs-videos-new [class*="next"],
.fs-vid.fs-videos-new [class*="right"] { right: 4px !important; left: auto !important; }

/* Paging dots, if the widget renders them. Scoped to li so the
   button rule above doesn't turn dots into 40px coral circles. */
.fs-vid.fs-videos-new [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 { content: "" !important; }
.fs-vid.fs-videos-new [class*="dots"] li[class*="active"] button { background: #2DB9A3 !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-popular 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 --------------------------------------------- */
.fs-videos-catalog .catalog-grid-item__asset-container {
    position: relative;
    overflow: hidden;
    background: #F2F2F2;
}
.fs-videos-catalog .catalog-grid-item__asset {
    display: block;
    width: 100%;
    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-search__button,
.fs-videos-catalog .catalog-filters__select,
.fs-videos-catalog .catalog-filters__search input {
    background: #ffffff;
    border: 2px solid #E8E8E8;
    border-radius: 6px;
    color: #595959;
    font-family: inherit;
}
.fs-videos-catalog .catalog-filters__search input { padding: 0.6rem 0.9rem; }
.fs-videos-catalog .catalog-filters__search input::placeholder { color: #888; }


/* ---- 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 input: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 input: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. CUSTOM HTML BLOCK SPACING
   The two Custom HTML widgets already inherit .fs-container and
   the homepage classes. These only remove doubled padding where a
   custom block sits directly against a native widget.
   ---------------------------------------------------------------- */
.fs-vid-header       { padding-bottom: 0; }
.fs-vid-support-wrap { padding-top: 0; }


/* ----------------------------------------------------------------
   9. JUMP BUTTONS (Block 1)
   Sits under the intro copy. Colors match the top border of the
   section each button points at: teal / coral / blue.
   ---------------------------------------------------------------- */
.fs-vid-jump {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.fs-vid-jump-btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: 6px;
    border: 2px solid #E8E8E8;
    background: #FAFAFA;
    color: #595959 !important;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s;
}
.fs-vid-jump-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.fs-vid-jump-btn.teal:hover  { border-color: #2DB9A3; color: #2DB9A3 !important; }
.fs-vid-jump-btn.coral:hover { border-color: #F85467; color: #F85467 !important; }
.fs-vid-jump-btn.blue:hover  { border-color: #139BCB; color: #139BCB !important; }

/* Anchor targets sit flush under the sticky site header without
   the section title being clipped */
#new-this-month, #most-watched, #browse-all {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}


/* ----------------------------------------------------------------
   10. RESPONSIVE — matches the homepage 768px breakpoint
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .fs-vid { padding: 1rem; margin-bottom: 1.5rem; }
    .fs-vid-jump { flex-direction: column; }
    .fs-vid-jump-btn { width: 100%; text-align: center; }
}


/* ================================================================
   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.

   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.
   ================================================================ */