/**
 * Cantata Resource Hub
 * Design tokens read live from the cantata theme on 2026-09-03:
 *   orange #ff8833 · light blue #C6E2F4 · grey #666 · text grey #555
 *   light grey #f5f5f5 · Poppins · 15px card radius · 1280px container
 * Everything is namespaced .crh- so it cannot collide with the theme.
 */

/* Tokens live on :root as well as .crh because the TOC panel gets moved out
   of the .crh subtree at runtime (see the ScrollSmoother note below) and would
   otherwise lose every variable it depends on. */
:root,
.crh {
  --crh-orange: #ff8833;
  --crh-orange-dark: #e8701c;
  --crh-orange-soft: #fff3e9;
  --crh-blue: #c6e2f4;
  --crh-blue-soft: #eef7fc;
  --crh-blue-deep: #b8d1dc;
  --crh-grey: #666666;
  --crh-text: #555555;
  --crh-heading: #4a4a4a;
  --crh-light: #f5f5f5;
  --crh-line: #e6e6e6;
  --crh-white: #ffffff;

  --crh-radius: 15px;
  --crh-radius-lg: 20px;
  --crh-radius-sm: 10px;
  --crh-shadow: 0 4px 6px rgba(0, 0, 0, .1);
  --crh-shadow-lg: 0 14px 34px rgba(0, 0, 0, .1);
  --crh-max: 1280px;
  --crh-gap: 28px;

  /* Overwritten at runtime by JS from the live sticky header height. */
  --crh-anchor-offset: 120px;

  font-family: 'Poppins', sans-serif;
  color: var(--crh-text);
}

.crh *,
.crh *::before,
.crh *::after { box-sizing: border-box; }

.crh-container {
  width: 100%;
  max-width: var(--crh-max);
  margin: 0 auto;
  padding: 0 20px;
}

.crh-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Shared atoms
   --------------------------------------------------------------- */

.crh-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--crh-orange);
  margin: 0 0 8px;
  text-transform: none;
}

.crh-section-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 4px;
  line-height: 1.25;
}

.crh-dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
}

.crh-pill {
  display: inline-block;
  background: var(--crh-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.crh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.crh-btn--primary {
  background: var(--crh-orange);
  border-color: var(--crh-orange);
  color: #fff;
}

.crh-btn--primary:hover,
.crh-btn--primary:focus-visible {
  background: var(--crh-orange-dark);
  border-color: var(--crh-orange-dark);
  color: #fff;
  transform: translateY(-1px);
}

.crh-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--crh-grey);
}

.crh-textlink svg { width: 17px; height: 17px; transition: transform .18s ease; }

.crh-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--crh-line);
  color: var(--crh-text);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.crh-chip:hover,
.crh-chip:focus-visible {
  border-color: var(--crh-orange);
  color: var(--crh-orange);
}

.crh-chip--clear {
  background: transparent;
  border-style: dashed;
  color: var(--crh-grey);
}

/* ---------------------------------------------------------------
   Hub — hero + filters
   --------------------------------------------------------------- */

.crh-hub__hero { padding: 46px 0 10px; }

.crh-hero-card {
  background: var(--crh-blue);
  border-radius: var(--crh-radius-lg);
  box-shadow: var(--crh-shadow);
  padding: 44px 44px 38px;
}

.crh-hero-card__title {
  font-size: 44px;
  font-weight: 600;
  color: var(--crh-grey);
  line-height: 1.15;
  margin: 0;
}

.crh-hero-card__intro {
  max-width: 66ch;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--crh-text);
}

.crh-hero-card__intro p:last-child { margin-bottom: 0; }

.crh-filters { margin-top: 30px; }

.crh-filters__search {
  position: relative;
  background: #fff;
  border-radius: var(--crh-radius-sm);
  display: flex;
  align-items: center;
  padding: 0 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.crh-filters__search svg {
  width: 19px; height: 19px;
  color: var(--crh-grey);
  flex: 0 0 auto;
}

.crh-filters__search input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--crh-text);
  padding: 16px 12px;
  min-width: 0;
}

.crh-filters__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
}

.crh-field select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 17px;
  border: 0;
  border-radius: var(--crh-radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--crh-text);
  padding: 16px 44px 16px 18px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.crh-field select:focus-visible { outline: 2px solid var(--crh-orange); outline-offset: 2px; }

.crh-filters__go { white-space: nowrap; }

.crh-activefilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}

.crh-activefilters__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--crh-grey);
  margin-right: 2px;
}

/* ---------------------------------------------------------------
   Hub — featured
   --------------------------------------------------------------- */

.crh-featured { padding: 46px 0 10px; }

.crh-featured__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--crh-shadow);
  transition: box-shadow .22s ease, transform .22s ease;
}

.crh-featured__inner:hover { box-shadow: var(--crh-shadow-lg); transform: translateY(-2px); }
.crh-featured__inner:hover .crh-textlink svg { transform: translateX(4px); }

.crh-featured__body { padding: 46px 44px; align-self: center; }

.crh-featured__title {
  font-size: 34px;
  font-weight: 600;
  color: var(--crh-heading);
  line-height: 1.24;
  margin: 0 0 14px;
}

.crh-featured__excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: var(--crh-text);
  margin: 0 0 18px;
}

.crh-featured__meta,
.crh-card__meta,
.crh-single__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--crh-grey);
}

.crh-featured__meta { margin-bottom: 22px; }

.crh-featured__media {
  background: var(--crh-blue) center/cover no-repeat;
  min-height: 340px;
}

/* ---------------------------------------------------------------
   Hub — grid
   --------------------------------------------------------------- */

.crh-grid-section { padding: 46px 0 76px; }

.crh-grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.crh-grid-count { font-size: 14px; color: var(--crh-grey); margin: 0; }

.crh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--crh-gap);
}

/* ---------------------------------------------------------------
   Hub — type nav bar
   --------------------------------------------------------------- */

.crh-typenav {
  background: var(--crh-light);
  border-top: 1px solid var(--crh-line);
  border-bottom: 1px solid var(--crh-line);
  margin-top: 40px;
}

.crh-typenav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crh-typenav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--crh-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.crh-typenav__link:hover { color: var(--crh-orange); }

.crh-typenav__link.is-active {
  color: var(--crh-orange);
  font-weight: 600;
  border-bottom-color: var(--crh-orange);
}

.crh-typenav__n {
  font-size: 11px;
  font-weight: 600;
  color: var(--crh-grey);
  background: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.5;
}

.crh-typenav__link.is-active .crh-typenav__n {
  background: var(--crh-orange);
  color: #fff;
}

/* ---------------------------------------------------------------
   Hub — sections (one block per resource type)
   --------------------------------------------------------------- */

/* Sections need real breathing room between them or the page reads as one
   long undifferentiated scroll. */
.crh-sections { padding: 20px 0 90px; }

.crh-section { padding: 62px 0; }
.crh-section + .crh-section { border-top: 1px solid var(--crh-line); }

.crh-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.crh-section__head .crh-section-title { font-size: 27px; margin: 0; }

.crh-section__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--crh-text);
  margin: 6px 0 0;
  max-width: 62ch;
}

.crh-section__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--crh-grey);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 18px;
  border: 1px solid var(--crh-line);
  border-radius: 999px;
  transition: border-color .18s ease, color .18s ease;
}

.crh-section__all svg { width: 16px; height: 16px; transition: transform .18s ease; }

.crh-section__all:hover,
.crh-section__all:focus-visible {
  border-color: var(--crh-orange);
  color: var(--crh-orange);
}

.crh-section__all:hover svg { transform: translateX(3px); }

.crh-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Section grids are a 3-column masonry: ordinary cards take one column, a
   feature tile built from the post's own content takes two. That double-width
   tile is what gives the grid its rhythm instead of an unbroken run of
   identical cards.

   Rows are explicitly equal-height. Without this the feature tile (short) and
   the image cards (tall) leave large holes in the grid — the first build
   showed a ~300px gap beside the feature. */
.crh-grid--masonry {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.crh-grid--masonry .crh-feature { grid-column: span 2; }
.crh-grid--masonry > * { min-width: 0; }

/* Kept for the tail row, which has no feature tile. */
.crh-grid--fixed {
  grid-template-columns: repeat(auto-fill, minmax(0, 394px));
  justify-content: start;
}

/* Cards in a section row are stretched to a common height by the grid, but
   their INNER content also has to fill that height or a short card's footer
   floats mid-air. */
.crh-grid--fixed .crh-card { align-self: stretch; }

/* The combined tail row can hold four cards, which will not fit at 394px in a
   1280px container — cap it at four equal columns instead so the row fills
   the width exactly rather than overflowing. */
.crh-grid--tail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crh-card {
  background: #fff;
  border-radius: var(--crh-radius);
  box-shadow: var(--crh-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

.crh-card:hover { transform: translateY(-4px); box-shadow: var(--crh-shadow-lg); }

.crh-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Card media --------------------------------------------------------
   EWWW Image Optimizer's lazyloader rewrites these: it strips the inline
   background-image, moves the URL to data-back, adds .lazyload, and restores
   the background only when the element scrolls into view. Until then the card
   paints as a flat block, which is what makes a related row look empty on
   first paint.

   Two mitigations, neither of which fights the plugin:
   1. a tinted placeholder so an unpainted card reads as intentional; and
   2. `background-image: attr()` is not usable here, so resource-hub.js copies
      data-back back onto the element for anything already near the viewport
      (see paintLazyBackgrounds()). */
.crh-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 190px;
  background-color: var(--crh-blue);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.crh-card__type {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(255, 255, 255, .94);
  color: var(--crh-grey);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

.crh-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.crh-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--crh-orange);
  margin: 0 0 9px;

  /* Two lines max: a long headline should not push the card out of step
     with its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crh-card__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--crh-text);
  margin: 0 0 16px;

  /* Hard limit of three descriptive lines. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Hub — feature tiles (double-width, built from post content)
   --------------------------------------------------------------- */

.crh-feature { overflow: hidden; }

.crh-feature__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 38px;
  text-decoration: none;
  color: inherit;
}

/* --- stat --- */
.crh-feature--stat { background: var(--crh-grey); }

.crh-feature__figure {
  display: block;
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  color: var(--crh-orange);
  margin-bottom: 14px;
}

.crh-feature__text {
  font-size: 17px;
  line-height: 1.55;
  color: #fff;
  margin: 0 0 18px;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- quote --- */
.crh-feature--quote {
  background: var(--crh-blue-soft);
  position: relative;
  isolation: isolate;
}

.crh-feature__mark {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 14px;
  width: 92px;
  height: auto;
  pointer-events: none;
}

.crh-feature__quote {
  font-size: 19px;
  line-height: 1.55;
  color: var(--crh-heading);
  margin: 0 0 12px;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crh-feature__cite {
  font-size: 14px;
  font-weight: 600;
  color: var(--crh-orange);
  margin: 0 0 16px;
}

/* --- video --- */
.crh-feature--video { background: #fff; }

.crh-feature--video .crh-feature__link { padding: 0; }

.crh-feature__video {
  position: relative;
  aspect-ratio: 16 / 7;
  background: var(--crh-blue) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crh-feature__play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--crh-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}

.crh-feature__play svg { width: 26px; height: 26px; margin-left: 3px; }
.crh-feature--video:hover .crh-feature__play { transform: scale(1.08); }

.crh-feature__vbody { padding: 22px 26px 26px; }

.crh-feature__vtitle {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--crh-orange);
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- shared footer link --- */
.crh-feature__src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  opacity: .85;
}

.crh-feature__src svg { width: 15px; height: 15px; transition: transform .18s ease; }
.crh-feature:hover .crh-feature__src svg { transform: translateX(3px); }

.crh-feature--stat .crh-feature__src { color: rgba(255, 255, 255, .9); }
.crh-feature--quote .crh-feature__src { color: var(--crh-grey); }

/* Push the date/read-time to the bottom edge so cards of differing text
   length still line their meta rows up across a stretched grid row. */
.crh-card__meta { margin-top: auto; }

/* ---------------------------------------------------------------
   Pagination + empty
   --------------------------------------------------------------- */

.crh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 48px;
}

.crh-page {
  background: #fff;
  border: 1px solid var(--crh-line);
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--crh-grey);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.crh-page:hover { border-color: var(--crh-orange); color: var(--crh-orange); }
.crh-page-status { font-size: 14px; color: var(--crh-grey); }

.crh-empty {
  text-align: center;
  background: var(--crh-light);
  border-radius: var(--crh-radius-lg);
  padding: 60px 30px;
}

.crh-empty__title { font-size: 21px; font-weight: 600; color: var(--crh-heading); margin: 0 0 8px; }
.crh-empty__text { font-size: 15px; color: var(--crh-text); margin: 0 0 22px; }

/* ---------------------------------------------------------------
   Reading progress
   --------------------------------------------------------------- */

.crh-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 1035;
  pointer-events: none;
}

.crh-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--crh-orange);
  transition: width .08s linear;
}

/* ---------------------------------------------------------------
   Single — hero
   --------------------------------------------------------------- */

.crh-single__hero { background: var(--crh-blue); padding: 54px 0 60px; }

.crh-single__hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}

/* Nothing to show on the right: let the card use the full width rather than
   leaving an empty coloured panel beside it. */
.crh-single__hero-grid--noimg { grid-template-columns: minmax(0, 1fr); }

.crh-single__hero-card {
  background: #fff;
  border-radius: var(--crh-radius-lg);
  box-shadow: var(--crh-shadow);
  padding: 40px 42px;
}

.crh-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--crh-grey);
  margin-bottom: 16px;
}

.crh-breadcrumb a { color: var(--crh-grey); text-decoration: none; }
.crh-breadcrumb a:hover { color: var(--crh-orange); }

.crh-single__title {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--crh-heading);
  margin: 0 0 16px;
}

.crh-single__standfirst {
  font-size: 17px;
  line-height: 1.7;
  color: var(--crh-text);
  margin: 0 0 20px;
}

.crh-single__meta { margin-bottom: 18px; }

.crh-single__share {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--crh-line);
  padding-top: 18px;
}

.crh-single__share-label { font-size: 12px; font-weight: 600; color: var(--crh-grey); }

.crh-single__hero-media {
  background: var(--crh-blue-deep) center/cover no-repeat;
  border-radius: var(--crh-radius-lg);
  min-height: 420px;
  box-shadow: var(--crh-shadow);
}

/* ---------------------------------------------------------------
   Single — layout + floating TOC

   The TOC is a fixed bar pinned to the BOTTOM-LEFT of the viewport that
   shows only the section you are currently reading, and expands to the full
   list on click. Collapsed by default on every breakpoint.

   It is mounted on <html> at runtime rather than positioned in the layout:
   the theme runs GSAP ScrollSmoother, which wraps the page in a transformed
   #smooth-content, and a transformed ancestor becomes the containing block
   for BOTH sticky and fixed descendants — so a bar positioned from inside the
   page scrolls away with it. <body> is inside that subtree too.
   --------------------------------------------------------------- */

.crh-single__body-section { padding: 60px 0 70px; }

/* No side rail any more: the article gets the whole column. */
.crh-single__layout { display: block; }
.crh-single--has-toc .crh-single__layout { display: block; }

/* Centre the article on the page, full stop.
   An earlier version shifted the column right to "optically balance" it
   against the bar. That produced a large dead zone between the two and read
   as broken. The content is now simply centred in the viewport and the BAR
   adapts to whatever gutter that leaves (see fitToGutter() in
   resource-hub.js) — content leads, the bar follows. */
@media (min-width: 1200px) {
  .crh-single--has-toc .crh-single__body-section .crh-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .crh-single--has-toc .crh-article { max-width: none; }
}

@media (min-width: 1440px) {
  .crh-single--has-toc .crh-single__body-section .crh-container { max-width: 800px; }
}

.crh-toc { display: none; }

.crh-toc__panel {
  position: fixed;
  left: 24px;
  bottom: 30px;
  z-index: 60;

  /* Narrow enough to sit in the page's left margin rather than over the text.
     JS narrows this further and positions it against the article's real left
     edge — the theme's container leaves only ~100px of gutter at 1440px, so
     the width has to follow the viewport. */
  width: 250px;
  max-width: calc(100vw - 48px);

  background: rgba(74, 74, 74, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--crh-radius-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

/* Shown once the reader reaches the article body. */
.crh-toc__panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* --- progress rail across the top of the bar --- */
.crh-toc__track {
  height: 3px;
  background: rgba(255, 255, 255, .15);
}

.crh-toc__bar {
  height: 100%;
  width: 0;
  background: var(--crh-orange);
  transition: width .12s linear;
}

/* --- collapsed state: current section only --- */
.crh-toc__closed {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 13px 15px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: left;
  color: #fff;
}

.crh-toc__closed-num {
  flex: 0 0 auto;
  color: var(--crh-orange);
  transition: opacity .18s ease, transform .18s ease;
}

.crh-toc__closed-label {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .18s ease, transform .18s ease;
}

/* Crossfade as the current section changes. JS adds .is-swapping, waits for
   the fade out, swaps the text, then removes it — so the label lifts and
   fades rather than snapping between headings mid-scroll. */
.crh-toc__closed.is-swapping .crh-toc__closed-num,
.crh-toc__closed.is-swapping .crh-toc__closed-label {
  opacity: 0;
  transform: translateY(-5px);
}

.crh-toc__chev {
  flex: 0 0 auto;
  display: flex;
  color: rgba(255, 255, 255, .6);
  transition: transform .2s ease;
}

.crh-toc__chev svg { width: 15px; height: 15px; }

/* The class is mirrored onto the PANEL, not just .crh-toc: once the panel is
   mounted on <html> it is no longer a descendant of .crh-toc, so a
   parent-scoped selector cannot reach it. */
.crh-toc__panel.is-open .crh-toc__closed { display: none; }

/* --- expanded state --- */
.crh-toc__open { padding: 4px 0 8px; }

.crh-toc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px 8px;
}

.crh-toc__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.crh-toc__collapse {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 17px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}

.crh-toc__collapse:hover { color: #fff; }

/* The list is never scrollable: the panel grows to fit its contents. A
   scroll region inside a floating bar hides entries behind an interaction
   nobody performs, and these lists top out around ten sections. JS caps the
   panel height to the viewport and only then allows scrolling, so an
   exceptionally long article still cannot overflow the screen. */
.crh-toc__listwrap { overflow: visible; }

.crh-toc__list { list-style: none; margin: 0; padding: 0 7px 4px; }
.crh-toc__item { margin: 0; }

.crh-toc__link {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.crh-toc__num {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
  min-width: 15px;
}

.crh-toc__label { flex: 1 1 auto; }

.crh-toc__item--sub .crh-toc__link {
  font-size: 11.5px;
  padding-left: 29px;
  color: rgba(255, 255, 255, .6);
}

.crh-toc__link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.crh-toc__link.is-active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 600;
}

.crh-toc__link.is-active .crh-toc__num { color: var(--crh-orange); }

/* ---------------------------------------------------------------
   Single — article body
   --------------------------------------------------------------- */

.crh-article { font-size: 17px; line-height: 1.78; color: var(--crh-text); max-width: 72ch; }

/* Any heading inside the article is a potential anchor target, including ones
   nested inside blocks — so this is NOT restricted to direct children. */
.crh-article h2,
.crh-article h3,
.crh-article h4 {
  color: var(--crh-heading);
  font-weight: 600;
  line-height: 1.3;
  /* Keeps a jumped-to heading clear of the sticky header. */
  scroll-margin-top: var(--crh-anchor-offset);
}

.crh-article > h2 { font-size: 28px; margin: 46px 0 16px; }
.crh-article > h3 { font-size: 22px; margin: 36px 0 12px; }
.crh-article > h4 { font-size: 18px; margin: 28px 0 10px; }
.crh-article > *:first-child { margin-top: 0; }

.crh-article p { margin: 0 0 22px; }

/* Drop cap on the opening paragraph.
   Scoped to the FIRST paragraph only, and skipped when the article opens with
   a block (callout, stats, quote) instead of prose — a drop cap on a callout's
   first word looks like a rendering fault.

   It is ALSO skipped when the opening paragraph is too short to wrap around
   it. Measured on this page after the Short answer blocks were removed: the
   article now opens with a single 28px line ("If you have ever sat through an
   EHR demo...") and a 62px floated cap has nothing to tuck into, so it
   overhangs the blockquote below and reads as broken. A drop cap needs about
   three lines of text beside it to look deliberate.

   There is no CSS selector for "paragraph taller than N lines", so the guard
   is applied by the template, which measures the opening paragraph's length
   and adds .crh-article--dropcap only when it is long enough. Default is OFF:
   a missing drop cap is invisible, a broken one is not. */
.crh-article--dropcap > p:first-of-type::first-letter {
  float: left;
  font-size: 62px;
  line-height: .84;
  font-weight: 600;
  color: var(--crh-orange);
  padding: 6px 12px 0 0;
}

.crh-article--dropcap > p:first-of-type:not(:first-child)::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}

/* Body copy size has to be set on the ELEMENTS, not just the container.

   .crh-article declares 17px above and every paragraph ignored it: measured
   14.875px on desktop. The theme styles `p` directly, and a direct rule beats
   an inherited value no matter how specific the ancestor selector is — the
   same trap that left mobile at 14px. Setting it here, on the paragraphs and
   list items themselves, is what actually takes effect.

   17px against the theme's ~15px is deliberate for this page: it is long-form
   reference material people read in full sections, not a marketing page they
   skim. */
.crh-article > p,
.crh-article > ul > li,
.crh-article > ol > li,
.crh-why p,
.crh-why li,
.crh-term__body p {
  font-size: 17px;
  line-height: 1.78;
}

/* Opening line as a lede.
   The article's first paragraph is a one-line setup for the quotes that
   follow it ("If you have ever sat through an EHR demo..."), so it reads as
   an introduction rather than body copy. Sizing it up and taking the hero's
   orange makes that role explicit and carries the hero's colour into the
   article, which is where the eye lands next.

   Scoped to :first-child as well as :first-of-type so it only fires when the
   paragraph genuinely OPENS the article — if a block comes first, this is
   just a paragraph in the middle of the page and must stay body copy. */
.crh-article > p:first-of-type:first-child {
  font-size: 23px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--crh-orange);
  margin-bottom: 26px;
}

.crh-article a {
  color: var(--crh-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crh-article a:hover { color: var(--crh-orange-dark); }

.crh-article ul,
.crh-article ol { margin: 0 0 22px; padding-left: 24px; }
.crh-article li { margin-bottom: 9px; }

.crh-article img,
.crh-article iframe,
.crh-article video {
  max-width: 100%;
  height: auto;
  border-radius: var(--crh-radius);
}

.crh-article figure { margin: 30px 0; }

.crh-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 15px;
}

.crh-article th,
.crh-article td { border: 1px solid var(--crh-line); padding: 11px 14px; text-align: left; }
.crh-article th { background: var(--crh-light); font-weight: 600; color: var(--crh-heading); }

.crh-article blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--crh-orange);
  font-size: 19px;
  line-height: 1.6;
  color: var(--crh-heading);
}

.crh-divider {
  border: 0;
  height: 1px;
  background: var(--crh-line);
  margin: 40px 0;
}

.crh-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--crh-line);
}

.crh-tags__label { font-size: 12px; font-weight: 600; color: var(--crh-grey); }

.crh-backlink { margin-top: 30px; }

.crh-backlink a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--crh-grey);
  text-decoration: none;
}

.crh-backlink a:hover { color: var(--crh-orange); }
.crh-backlink svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------
   Callout blocks
   --------------------------------------------------------------- */

.crh-callout {
  display: flex;
  gap: 0;
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius);
  overflow: hidden;
  margin: 32px 0;
}

.crh-callout__bar { flex: 0 0 4px; background: var(--crh-blue-deep); }
.crh-callout__body { padding: 22px 26px; flex: 1 1 auto; }

.crh-callout__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--crh-grey);
  margin: 0 0 10px;
}

.crh-callout__icon { width: 18px; height: 18px; flex: 0 0 auto; }

.crh-callout__content { font-size: 16px; line-height: 1.7; }
.crh-callout__content > *:last-child { margin-bottom: 0; }
.crh-callout__content p { margin: 0 0 14px; }

.crh-callout--tip,
.crh-callout--warning,
.crh-callout--takeaway,
.crh-callout--compliance,
.crh-callout--question { background: var(--crh-orange-soft); }

.crh-callout--tip .crh-callout__bar,
.crh-callout--warning .crh-callout__bar,
.crh-callout--takeaway .crh-callout__bar,
.crh-callout--compliance .crh-callout__bar,
.crh-callout--question .crh-callout__bar { background: var(--crh-orange); }

.crh-callout--tip .crh-callout__title,
.crh-callout--warning .crh-callout__title,
.crh-callout--takeaway .crh-callout__title,
.crh-callout--compliance .crh-callout__title,
.crh-callout--question .crh-callout__title { color: var(--crh-orange-dark); }

/* A definition reads as reference material rather than commentary. */
.crh-callout--definition {
  background: var(--crh-light);
}

.crh-callout--definition .crh-callout__bar { background: var(--crh-grey); }

/* Checklist — something the reader carries into a meeting ---------- */

.crh-checklist {
  background: #fff;
  border: 1px solid var(--crh-line);
  border-radius: var(--crh-radius);
  padding: 26px 30px;
  margin: 32px 0;
}

.crh-checklist__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--crh-grey);
  margin: 0 0 16px;
}

.crh-checklist__list { list-style: none; margin: 0; padding: 0; }

.crh-checklist__item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.6;
  padding: 9px 0;
  border-top: 1px solid var(--crh-line);
}

.crh-checklist__item:first-child { border-top: 0; padding-top: 0; }

.crh-checklist__box {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  border: 2px solid var(--crh-orange);
  border-radius: 4px;
}

/* Numbered steps -------------------------------------------------- */

.crh-steps { margin: 34px 0; }

.crh-steps__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--crh-grey);
  margin: 0 0 18px;
}

.crh-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: crh-step; }

.crh-steps__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--crh-line);
}

.crh-steps__item:first-child { border-top: 0; padding-top: 0; }

.crh-steps__num {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--crh-orange);
  min-width: 44px;
}

.crh-steps__body { flex: 1 1 auto; }

.crh-steps__head {
  font-size: 17px;
  font-weight: 600;
  color: var(--crh-heading);
  line-height: 1.4;
  margin: 0;
}

.crh-steps__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--crh-text);
  margin: 6px 0 0;
}

/* Cited sources ---------------------------------------------------
   21 of 178 posts cite SAMHSA, CDC, NIH/PubMed, CMS or OPEN MINDS, but the
   citations sit inline in body copy. In this sector the citation carries the
   credibility, so this surfaces them as a numbered reference block. */

.crh-sources {
  background: var(--crh-light);
  border-radius: var(--crh-radius);
  padding: 26px 30px;
  margin: 34px 0;
}

.crh-sources__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--crh-grey);
  margin: 0 0 14px;
}

.crh-sources__title svg { width: 17px; height: 17px; flex: 0 0 auto; }

.crh-sources__list {
  list-style: decimal;
  margin: 0;
  padding-left: 20px;
  counter-reset: none;
}

.crh-sources__item {
  font-size: 14px;
  line-height: 1.55;
  color: var(--crh-text);
  padding: 6px 0;
  margin: 0;
}

.crh-sources__link {
  color: var(--crh-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(102, 102, 102, .35);
}

.crh-sources__link:hover {
  color: var(--crh-orange);
  text-decoration-color: var(--crh-orange);
}

.crh-sources__pub {
  display: block;
  font-size: 12px;
  color: var(--crh-grey);
  margin-top: 2px;
}

/* Labelled points -------------------------------------------------
   12 posts run "Label: explanation" sequences inside plain paragraphs, which
   renders as a wall of text. Same content, given structure. */

.crh-points { margin: 34px 0; }

.crh-points__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--crh-grey);
  margin: 0 0 18px;
}

.crh-points__list { display: grid; gap: 2px; }

.crh-points--grid .crh-points__list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.crh-points__item {
  padding: 16px 0 16px 20px;
  border-left: 3px solid var(--crh-blue);
  transition: border-color .18s ease;
}

.crh-points__item:hover { border-left-color: var(--crh-orange); }

.crh-points--grid .crh-points__item {
  padding: 20px 22px;
  border-left: 0;
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius-sm);
}

.crh-points__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--crh-heading);
  line-height: 1.4;
  margin: 0;
}

.crh-points__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--crh-text);
  margin: 5px 0 0;
}

/* Q&A pairs -------------------------------------------------------
   Three posts are built entirely as interviews (5, 7 and 10 pairs) using
   typed "Q:"/"A:" prefixes, so the pairing is invisible to the markup. */

.crh-qa {
  border-top: 1px solid var(--crh-line);
  padding: 26px 0 6px;
  margin: 0;
}

.crh-qa + .crh-qa { margin-top: 4px; }

.crh-qa__q,
.crh-qa__a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.crh-qa__q {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--crh-heading);
  margin: 0 0 14px;
}

.crh-qa__marker {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--crh-orange);
  color: #fff;
  margin-top: 2px;
}

.crh-qa__marker--a {
  background: var(--crh-blue);
  color: var(--crh-grey);
}

.crh-qa__body { flex: 1 1 auto; min-width: 0; }
.crh-qa__body > *:last-child { margin-bottom: 0; }

.crh-qa__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--crh-text);
  margin: 0 0 14px;
}

/* Aligns under the answer text, not the page edge: the marker is 26px wide
   plus the 14px flex gap. Stated as padding rather than margin because the
   article's own `p` rule sets `margin` (shorthand), which resets a
   margin-left declared here and left the attribution hanging flush-left. */
.crh-qa .crh-qa__who,
.crh-article .crh-qa__who {
  font-size: 13px;
  font-weight: 600;
  color: var(--crh-orange);
  margin: 10px 0 0;
  padding-left: 40px;
}

/* FAQ accordion ---------------------------------------------------
   Emits FAQPage JSON-LD automatically from whatever pairs it renders, so an
   editor writes Q/A lines and never touches schema. The first answer is open
   on load: a fully-collapsed accordion hides every answer from the initial
   paint, and this copy is written specifically to be liftable. */

.crh-faq {
  margin: 44px 0 36px;
  padding: 34px 36px;
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius);
}

.crh-faq__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 20px;
  line-height: 1.3;
}

.crh-faq__list {
  background: #fff;
  border-radius: var(--crh-radius-sm);
  overflow: hidden;
  box-shadow: rgba(99, 99, 99, .12) 0 1px 4px;
}

.crh-faq__item + .crh-faq__item { border-top: 1px solid var(--crh-line); }

.crh-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 19px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--crh-heading);
  transition: color .16s ease;
}

.crh-faq__q:hover { color: var(--crh-orange); }

.crh-faq__qtext { flex: 1 1 auto; }

.crh-faq__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--crh-orange-soft);
  color: var(--crh-orange);
  margin-top: 1px;
  transition: transform .22s ease, background-color .16s ease;
}

.crh-faq__icon svg { width: 14px; height: 14px; }

.crh-faq__item.is-open .crh-faq__icon {
  transform: rotate(45deg);
  background: var(--crh-orange);
  color: #fff;
}

.crh-faq__a { padding: 0 22px 20px; }

.crh-faq__a p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--crh-text);
  margin: 0;
}

/* Below 1200 there is not enough gutter beside a centred column to hold a
   floating bar without covering text, so it becomes the full-width pinned
   bar instead — the same treatment as mobile. */
@media (max-width: 1199.98px) {
  .crh-toc__panel {
    left: 12px;
    right: 12px;
    bottom: 69px;
    width: auto;
    max-width: none;
  }
}

/* Key takeaways ------------------------------------------------ */

.crh-takeaways {
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius);
  padding: 26px 30px;
  margin: 32px 0;
}

.crh-takeaways__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--crh-grey);
  margin: 0 0 14px;
}

.crh-takeaways__list { list-style: none; margin: 0; padding: 0; }

.crh-takeaways__item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 11px;
}

.crh-takeaways__item:last-child { margin-bottom: 0; }

.crh-takeaways__item svg {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--crh-orange);
}

/* Stats --------------------------------------------------------- */

.crh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin: 32px 0;
}

.crh-stat {
  background: var(--crh-light);
  border-radius: var(--crh-radius);
  padding: 26px 22px;
  text-align: center;
}

.crh-stat__value {
  display: block;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--crh-orange);
  margin-bottom: 6px;
}

.crh-stat__label {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--crh-text);
}

.crh-stat--blue { background: var(--crh-blue-soft); }
.crh-stat--blue .crh-stat__value { color: var(--crh-grey); }
.crh-stat--grey .crh-stat__value { color: var(--crh-grey); }

/* No explicit accent: a light card keeps the orange figure (it is the only
   colour it has), but see the band rules below where plain turns white. */
.crh-stat--plain .crh-stat__value { color: var(--crh-orange); }

/* Dark stat band — [cantata_stats style="band"]
   For the two or three numbers that carry an article. One solid block with
   hairline dividers rather than separate light cards, so the figures read as
   the point of the section instead of decoration beside it. */

.crh-stats--band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  background: var(--crh-grey);
  border-radius: var(--crh-radius);
  overflow: hidden;
  margin: 36px 0;
}

.crh-stats--band .crh-stat {
  background: transparent;
  border-radius: 0;
  text-align: left;
  padding: 34px 30px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.crh-stats--band .crh-stat:first-child { border-left: 0; }

.crh-stats--band .crh-stat__value {
  font-size: 42px;
  color: #fff;
  margin-bottom: 10px;
}

/* Inside a band every figure is white by default and the orange accent picks
   out the single most important one. Marking them all orange would flatten the
   hierarchy back out. */
.crh-stats--band .crh-stat--plain .crh-stat__value,
.crh-stats--band .crh-stat--grey .crh-stat__value,
.crh-stats--band .crh-stat--blue .crh-stat__value { color: #fff; }

.crh-stats--band .crh-stat--orange .crh-stat__value { color: var(--crh-orange); }

.crh-stats--band .crh-stat__label {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.55;
}

/* Pull quote — matches the homepage testimonial slider -------------
   Spec read from Slider Revolution slider 32 ("Home Quote NEW") layers:
     card         #ffffff, border-radius 20px
     quote text   #666666, 20px / 42px line-height, Poppins
     attribution  #ff8833, 18px, weight 600
     ornaments    the theme's own leftquote.svg / rightquote.svg in pale blue,
                  sitting BEHIND the text at the top-left and bottom-right
   Same card in plain HTML/CSS, no slider. */

.crh-pullquote {
  position: relative;
  isolation: isolate;
  background: #fff;
  border-radius: 20px;
  box-shadow: rgba(99, 99, 99, .2) 0 2px 8px;
  padding: 58px 76px 46px;
  margin: 40px 0;
  overflow: hidden;
  text-align: center;
}

.crh-pullquote__mark {
  position: absolute;
  z-index: -1;
  width: 108px;
  height: auto;
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* Tucked into the corners so they frame the text rather than sitting under
   the words — at full size the right-hand mark ran straight through the
   attribution line. */
.crh-pullquote__mark--l { top: 6px; left: 8px; }
.crh-pullquote__mark--r { bottom: 4px; right: 8px; }

/* The article's generic blockquote rule (and the theme's) both target this
   element, so the quote's own styling is stated at higher specificity. */
.crh-pullquote .crh-pullquote__text,
.crh-article .crh-pullquote__text {
  border: 0;
  border-left: 0;
  margin: 0 0 20px;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  line-height: 34px;
  font-weight: 400;
  color: #666;
  text-align: center;
}

.crh-pullquote__cite {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--crh-orange);
}

/* Inline CTA ---------------------------------------------------- */

.crh-cta {
  background: var(--crh-blue);
  border-radius: var(--crh-radius);
  padding: 34px;
  margin: 36px 0;
  text-align: center;
}

.crh-cta__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 8px;
}

.crh-cta__text { font-size: 16px; line-height: 1.65; margin: 0 0 20px; }

/* The CTA sits on the light-blue panel, so the button label needs stating
   explicitly — the theme's own .btn rules were winning and rendering white
   text on the orange fill as transparent, leaving an empty pill. */
.crh-cta .crh-btn--primary,
.crh-cta .crh-btn--primary:visited {
  color: #fff !important;
  background: var(--crh-orange);
  border-color: var(--crh-orange);
  text-decoration: none;
}

.crh-cta .crh-btn--primary:hover,
.crh-cta .crh-btn--primary:focus-visible {
  color: #fff !important;
  background: var(--crh-orange-dark);
  border-color: var(--crh-orange-dark);
}

/* ---------------------------------------------------------------
   Related
   --------------------------------------------------------------- */

.crh-related { background: var(--crh-light); padding: 62px 0 72px; }
.crh-related .crh-section-title { margin-bottom: 28px; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .crh-single--has-toc .crh-single__layout { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; }
  .crh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crh-grid--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crh-grid--masonry .crh-feature { grid-column: span 2; }
  .crh-grid--fixed { grid-template-columns: repeat(auto-fill, minmax(0, 340px)); }
  .crh-grid--tail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .crh-hero-card { padding: 34px 28px 30px; }
  .crh-hero-card__title { font-size: 34px; }

  .crh-typenav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .crh-typenav__list::-webkit-scrollbar { display: none; }
  .crh-typenav__link { white-space: nowrap; padding: 14px 14px; }

  .crh-stats--band { grid-template-columns: minmax(0, 1fr); }
  .crh-stats--band .crh-stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }
  .crh-stats--band .crh-stat:first-child { border-top: 0; }

  .crh-filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crh-filters__go { grid-column: 1 / -1; }

  .crh-featured__inner { grid-template-columns: 1fr; }
  .crh-featured__body { padding: 32px 28px; order: 2; }
  .crh-featured__media { order: 1; min-height: 230px; }
  .crh-featured__title { font-size: 27px; }

  .crh-single__hero { padding: 34px 0 38px; }
  .crh-single__hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .crh-single__hero-card { padding: 30px 26px; order: 2; }
  .crh-single__hero-media { order: 1; min-height: 220px; }
  .crh-single__title { font-size: 30px; }

  .crh-single__body-section { padding: 36px 0 50px; }

  /* Same bottom-left bar on mobile, just narrower and edge-to-edge, but
     lifted clear of the UserWay accessibility button.

     Measured on a 390px viewport: .userway_buttons_wrapper is 44x44, sitting
     13px from the bottom and 21px from the right — a full-width bar at the
     bottom runs straight underneath it and loses its chevron. Sitting above
     it keeps both tappable.
       13 (its offset) + 44 (its height) + 12 (breathing room) = 69px */
  .crh-toc__panel {
    left: 12px;
    right: 12px;
    bottom: 69px;
    width: auto;
    max-width: none;
  }

  /* ...but NOT on the pillar page, which has its own bottom navigator.

     .crh-toc is display:none below 1200px, yet .crh-toc__panel is position
     FIXED and gets moved out of the .crh-toc subtree at runtime (see the
     ScrollSmoother note above), so hiding the parent never hid the panel.
     Measured on the render: the "01 WHERE IT LIVES" pill was overlapping the
     open term drawer. Two bottom-pinned navigators fighting for the same
     corner is worse than either one alone. */
  .crh-pillar .crh-toc__panel,
  .crh-toc__panel[data-crh-toc-retired] { display: none; }

  .crh-toc__closed { padding: 13px 15px; font-size: 12px; letter-spacing: 1.2px; }

  .crh-article { max-width: none; font-size: 16px; }
  .crh-article > h2 { font-size: 24px; }
  .crh-article > h3 { font-size: 20px; }
}

@media (max-width: 767.98px) {
  .crh-grid { grid-template-columns: minmax(0, 1fr); }
  .crh-grid--fixed { grid-template-columns: minmax(0, 1fr); }
  .crh-grid--tail { grid-template-columns: minmax(0, 1fr); }
  .crh-grid--masonry { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .crh-grid--masonry .crh-feature { grid-column: span 1; }
  .crh-feature__link { padding: 26px 24px; }
  .crh-feature__figure { font-size: 40px; }
  .crh-feature__quote { font-size: 17px; }
  .crh-section { padding: 34px 0; }
  .crh-section__head { margin-bottom: 18px; }
  .crh-section__head .crh-section-title { font-size: 22px; }
  .crh-filters__row { grid-template-columns: minmax(0, 1fr); }
  .crh-hero-card__title { font-size: 29px; }
  .crh-single__title { font-size: 26px; }
  .crh-section-title { font-size: 25px; }
  .crh-callout__body { padding: 18px 20px; }
  .crh-pullquote { padding: 30px 26px 28px; border-radius: 22px; }
  .crh-pullquote__text { font-size: 19px; }
  .crh-cta { padding: 26px 22px; }
  .crh-stat__value { font-size: 32px; }
  .crh-steps__item { gap: 14px; }
  .crh-steps__num { font-size: 21px; min-width: 34px; }
  .crh-checklist { padding: 22px 20px; }
  .crh-sources { padding: 22px 20px; }
  .crh-points--grid .crh-points__list { grid-template-columns: minmax(0, 1fr); }
  .crh-qa__q { font-size: 16px; }
  .crh-qa__marker { width: 23px; height: 23px; font-size: 11px; }
  .crh-qa .crh-qa__who,
  .crh-article .crh-qa__who { padding-left: 37px; }
  .crh-article--dropcap > p:first-of-type::first-letter { font-size: 50px; padding-right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .crh *,
  .crh *::before,
  .crh *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .crh-progress__bar { transition: none; }
}

/* ===============================================================
   PILLAR PAGE
   A durable reference page. Undated furniture, a term index, and
   blocks shaped for the repeating "define / compare / explain"
   rhythm this kind of content actually has.
   =============================================================== */

/* --- hero ------------------------------------------------------
   Built from the live computed style of the site's own best hero (the Arize
   page), read on 2026-09-11 rather than eyeballed:
     headline  42px / 600 / line-height 52.5px / #ff8833 / letter-spacing .4px
     lead      300 weight, #555, line-height 28px
     button    #ff8833, radius 500px, 2px solid border, 13px/600, 20px 25px
     media     border-radius 20px, cover
   The page keeps those values so it reads as part of the site, not as a
   separate microsite. The pale blue wash and the derived facts strip are the
   only additions, and both are Cantata tokens.
   --------------------------------------------------------------- */

.crh-pillar__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, var(--crh-blue-soft) 0%, #f7fbfd 52%, #fff 100%);
  padding: 56px 0 0;
  border-bottom: 1px solid var(--crh-line);
}

/* A soft orange bloom behind the headline. Low opacity on purpose: the house
   style is restrained, and a strong gradient would read as another brand. */
.crh-pillar__hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 136, 51, .13) 0%, rgba(255, 136, 51, 0) 68%);
  pointer-events: none;
}

.crh-pillar__hero .crh-container { position: relative; z-index: 1; }

/* The hero is a two-column stage above 1100px.
   It was a headline and a standfirst capped at 860px, leaving the right half
   of a wide viewport empty. The demo card fills it with the page's own
   premise rather than decoration. */
.crh-pillar__hero .crh-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

@media (min-width: 1100px) {
  .crh-pillar__hero .crh-container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 54px;
  }
}

.crh-pillar__hero-inner { max-width: 860px; padding-bottom: 44px; }

/* ---------------------------------------------------------------------
   Hero demo bubbles — scattered, not stacked
   ---------------------------------------------------------------------
   The vendor quotes Jeana opens the article with, answered by the question
   the guide exists to settle.

   Jeana: "The top looks too much like a form on a landing page." Removing the
   white panel fixed the container; Adam then asked for the bubbles to be
   "floating around a little bit staggered and more like a word cloud
   placement". A left-aligned column of stacked rows still carries a hint of
   the form it used to be — scattering them removes the last of it.

   Absolutely positioned on a fixed-aspect stage so the arrangement is
   DESIGNED rather than emergent: each bubble has a chosen position and a
   slight rotation, which is what makes it read as a cloud instead of a list
   that has come loose. The stage keeps its proportions at any width, so the
   composition cannot collapse or overlap at some in-between viewport.

   The lines fade up in sequence on load — a one-shot reveal, not a loop.
   --------------------------------------------------------------------- */

.crh-pillar__hero-demo {
  display: none;
  padding-bottom: 44px;
}

@media (min-width: 1100px) {
  .crh-pillar__hero-demo { display: block; }
}

/* The screen interior: a light surface inside the bezel, holding the
   conversation. Replaces the bare stage the bubbles used to float on — the
   scatter was invented before there was a device to sit in, and a laptop
   screen is a rectangle, so the bubbles now read as a real chat thread on a
   real display. */
.crh-pillar__demo-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 26px 24px;
  box-shadow: none;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
}

/* The label and the quotation marks are both gone — the bubble shapes
   already say "this is speech", so they were saying it twice. The card now
   opens straight onto the first line, so the top padding carries the
   breathing room the label used to provide. */
/* A chat thread on the screen, not a scatter on the page.
   The scattered placement existed when the bubbles floated on the hero
   gradient with nothing to anchor them. Inside a laptop screen the right
   answer is the Arize pattern: a thread, alternating sides, each bubble only
   as wide as its text. */
.crh-pillar__demo-quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.crh-pillar__demo-quotes li {
  align-self: flex-start;
  max-width: 80%;
  font-size: 14.5px;
  line-height: 1.45;
  color: #55636b;

  /* Grey, left, tail bottom-left — the "vendor said this" side, exactly as
     the Arize assistant bubble reads. */
  background: #eef1f4;
  border-radius: 14px 14px 14px 5px;
  padding: 10px 15px;

  opacity: 0;
  animation: crh-demo-in .45s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: calc(var(--i) * .5s + .4s);
}

/* Alternate sides so it reads as a back-and-forth rather than a list. */
.crh-pillar__demo-quotes li:nth-child(even) {
  align-self: flex-end;
  border-radius: 14px 14px 5px 14px;
}

/* The answer: orange, right-aligned, closing the thread — the same role the
   user bubble plays on the Arize page. */
.crh-pillar__demo-ask {
  align-self: flex-end;
  max-width: 88%;
  margin: 0;
  opacity: 0;
  animation: crh-demo-in .45s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: calc(var(--i) * .5s + .5s);
}

.crh-pillar__demo-ask span {
  display: inline-block;
  background: var(--crh-orange);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  border-radius: 14px 14px 5px 14px;
  padding: 11px 16px;
  box-shadow: 0 4px 14px rgba(255, 136, 51, .3);
}

/* A simple rise-and-fade. No rotation to preserve any more, since the
   bubbles sit in a thread rather than a tilted scatter. */
@keyframes crh-demo-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .crh-pillar__demo-quotes li,
  .crh-pillar__demo-ask {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.crh-pillar__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crh-orange);
  margin: 0 0 18px;
}

.crh-pillar__title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .4px;
  color: var(--crh-orange);
  font-family: 'Poppins', sans-serif;
  margin: 0 0 18px;
}

.crh-pillar__standfirst {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--crh-text);
  margin: 0 0 30px;
  max-width: 64ch;
}

.crh-pillar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 34px;
}

.crh-pillar__btn {
  display: inline-block;
  padding: 20px 25px;
  border-radius: 500px;
  background: var(--crh-orange);
  border: 2px solid var(--crh-orange);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.crh-pillar__btn:hover,
.crh-pillar__btn:focus-visible {
  background: var(--crh-orange-dark);
  border-color: var(--crh-orange-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* Facts strip — figures derived from the page, never typed in. */
.crh-pillar__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--crh-line);
  padding-top: 22px;
}

.crh-pillar__fact {
  padding: 0 30px;
  border-left: 1px solid var(--crh-line);
}

.crh-pillar__fact:first-child { padding-left: 0; border-left: 0; }

.crh-pillar__fact-num {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--crh-heading);
  margin: 0;
}

.crh-pillar__fact-num--sm {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crh-grey);
  padding-top: 9px;
}

.crh-pillar__fact-label {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--crh-grey);
  line-height: 1.4;
}

.crh-pillar__fact--updated .crh-pillar__fact-label {
  font-size: 15px;
  color: var(--crh-heading);
  font-weight: 500;
}

/* Media band, matching the Arize hero's 20px radius and cover fill. */
.crh-pillar__hero-media { position: relative; }

.crh-pillar__hero-img {
  height: 300px;
  border-radius: 20px 20px 0 0;
  background-size: cover;
  background-position: center 35%;
}

/* --- term index ------------------------------------------------ */

.crh-termindex {
  /* NOT a full-bleed blue band any more.
     Jeana: "The blue jump to a term box going all the way across the bottom
     looks too much like a footer and adds to my confusion. It's not clear
     that you can just keep scrolling."

     Two things made it read as a footer: edge-to-edge blue, which is what
     every real footer on this site does, and sitting flush against the
     content with no air after it. It is now an inset rounded card with white
     either side and clear space below, so it reads as a panel WITHIN the
     page and the content plainly continues past it. */
  background: transparent;
  border-bottom: 0;
  padding: 26px 0 0;
}

/* The card is the container itself. An earlier selector targeted the
   container's CHILDREN, which would have boxed the label and the groups
   separately — the markup holds two siblings, not one wrapper.

   Width and gutters are set further down the file, where the original
   full-width rule lived; keeping them in one place stops the two blocks
   overriding each other. */
.crh-termindex .crh-container {
  background: #c6e2f4;
  border-radius: var(--crh-radius-lg);
  padding-top: 24px;
  padding-bottom: 28px;
}

.crh-termindex__label {
  /* Larger than the 12px it started at.
     At 12px it read as a caption on the chips rather than as the heading of
     a navigation band, and the band is now a distinct blue surface that can
     carry a bit more weight. */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Darker than --crh-grey on this band.
     Measured against #c6e2f4, the mid grey (#666) gives 4.26:1 — under the
     4.5:1 AA threshold for body text. The heading slate reaches 6.58:1. */
  color: var(--crh-heading);
  margin: 0 0 14px;
}

.crh-termindex__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Inside a group the chips stack vertically.
   Wrapping them horizontally made the groups bleed into one another, which
   is the "jumbled" problem the grouping exists to fix; a vertical run reads
   as one set of three. */
.crh-termindex__group .crh-termindex__list {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* One line per chip, always.
   A term long enough to wrap produced a double-height pill sitting beside
   single-height ones — Adam: "i dont like the double heigh pills". The real
   fix is a shorter label (see the API set), but this keeps the row even if a
   future term is long, degrading to an ellipsis rather than a two-line pill. */
.crh-termindex__link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.crh-termindex__link {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  /* White pills on Cantata's blue.
     On the pale wash this band used to be, white chips only reached 1.35:1
     against the background — they read as faint outlines rather than
     objects. Against the real #c6e2f4 white has proper separation, and the
     hairline is dropped in favour of a soft shadow so the pills sit ON the
     band the way the homepage's whitebox sits on its blue panel. */
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(40, 80, 105, .13);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--crh-heading);
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.crh-termindex__link:hover,
.crh-termindex__link:focus-visible {
  background: var(--crh-orange-soft);
  border-color: var(--crh-orange);
  color: var(--crh-orange-dark);
}

/* --- answer-first block ---------------------------------------- */

.crh-answer {
  position: relative;
  margin: 26px 0 32px;
  padding: 24px 28px 24px 30px;
  background: #fff;
  border: 1px solid var(--crh-line);
  border-left: 5px solid var(--crh-orange);
  border-radius: var(--crh-radius-sm);
  box-shadow: rgba(99, 99, 99, .12) 0 2px 8px;
}

.crh-answer__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crh-orange);
  margin: 0 0 8px;
}

.crh-answer__q {
  font-size: 17px;
  font-weight: 600;
  color: var(--crh-heading);
  line-height: 1.45;
  margin: 0 0 10px;
}

.crh-answer__body p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.7; }
.crh-answer__body p:last-child { margin-bottom: 0; }

/* --- term set -------------------------------------------------- */

.crh-termset {
  display: grid;
  gap: 16px;
  margin: 28px 0 34px;
}

.crh-termset--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crh-termset--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crh-termset--cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.crh-term {
  background: var(--crh-light);
  border-radius: var(--crh-radius-sm);
  padding: 22px 22px 20px;
  border-top: 3px solid var(--crh-blue);
  scroll-margin-top: var(--crh-anchor-offset);
}

.crh-term__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 9px;
  line-height: 1.3;
}

.crh-term__body p {
  margin: 0 0 9px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--crh-text);
}
.crh-term__body p:last-child { margin-bottom: 0; }

/* --- analogy --------------------------------------------------- */

.crh-analogy {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 28px 0;
  padding: 24px 26px;
  background: var(--crh-orange-soft);
  border-radius: var(--crh-radius);
}

.crh-analogy__mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--crh-orange);
  color: #fff;
}

.crh-analogy__mark svg { width: 20px; height: 20px; }

.crh-analogy__title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crh-orange-dark);
  margin: 3px 0 7px;
}

.crh-analogy__text p {
  margin: 0 0 9px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--crh-heading);
}
.crh-analogy__text p:last-child { margin-bottom: 0; }

/* --- why this matters ------------------------------------------ */

.crh-why {
  margin: 30px 0;
  padding: 22px 0 4px;
  border-top: 2px solid var(--crh-line);
}

.crh-why__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.crh-why__title::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crh-orange);
}

.crh-why__body p { margin: 0 0 12px; }
.crh-why__body p:last-child { margin-bottom: 0; }

/* --- ask your vendor ------------------------------------------- */

.crh-ask {
  margin: 28px 0;
  padding: 24px 26px;
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius);
}

.crh-ask__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #2b6b8f;
  margin: 0 0 14px;
}

.crh-ask__icon { display: inline-flex; color: #2b6b8f; }
.crh-ask__icon svg { width: 18px; height: 18px; }

.crh-ask__list { list-style: none; margin: 0; padding: 0; }

.crh-ask__item {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--crh-heading);
}

.crh-ask__item + .crh-ask__item { border-top: 1px solid rgba(43, 107, 143, .16); }

.crh-ask__item::before {
  /* A small hollow dot, not a chevron.
     Jeana on the first build: "need a different icon ahead of the questions
     ... the current orange arrows look like you can click them to open up an
     accordion/drop down with an answer." A right-pointing chevron is the
     web's standard disclosure affordance, so using it as a list bullet
     promises an interaction that does not exist. A neutral dot marks the item
     without implying it can be opened. */
  content: "";
  position: absolute;
  left: 3px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--crh-blue-deep);
  background: transparent;
}

/* --- playbook (HowTo) ------------------------------------------ */

.crh-playbook {
  margin: 32px 0;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--crh-line);
  border-radius: var(--crh-radius);
  box-shadow: rgba(99, 99, 99, .1) 0 2px 8px;
}

.crh-playbook__title {
  font-size: 19px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 16px;
}

.crh-playbook__list {
  list-style: none;
  counter-reset: crhstep;
  margin: 0;
  padding: 0;
}

.crh-playbook__item {
  counter-increment: crhstep;
  position: relative;
  padding: 14px 0 14px 46px;
}

.crh-playbook__item + .crh-playbook__item { border-top: 1px solid var(--crh-line); }

.crh-playbook__item::before {
  content: counter(crhstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--crh-orange);
  letter-spacing: .04em;
}

.crh-playbook__head {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--crh-heading);
  line-height: 1.45;
}

.crh-playbook__body {
  display: block;
  margin-top: 4px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--crh-text);
}

/* --- comparison table ------------------------------------------ */

.crh-compare { margin: 28px 0; overflow-x: auto; }

.crh-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  background: #fff;
  border-radius: var(--crh-radius-sm);
  overflow: hidden;
  box-shadow: rgba(99, 99, 99, .12) 0 1px 4px;
}

.crh-compare__caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--crh-grey);
  padding: 0 0 10px;
}

.crh-compare__table th,
.crh-compare__table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--crh-line);
}

.crh-compare__table thead th {
  background: var(--crh-light);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--crh-grey);
}

.crh-compare__table tbody th {
  font-weight: 600;
  color: var(--crh-heading);
  white-space: nowrap;
}

.crh-compare__table tbody tr:last-child th,
.crh-compare__table tbody tr:last-child td { border-bottom: 0; }

/* --- figure / illustration ------------------------------------- */

.crh-figure {
  margin: 30px 0 34px;
}

/* The illustrations are flat line art on white, so a hard border would fight
   them. A pale tinted panel gives the artwork an edge without drawing one,
   and matches the analogy block it follows.

   The padding is deliberately generous: Adam asked for "more negative space
   in the images around the icons", and with object-fit: contain the panel's
   own padding is what supplies that breathing room. */
.crh-figure__frame {
  background: var(--crh-blue-soft);
  border-radius: var(--crh-radius);
  padding: 32px 38px;
  overflow: hidden;
}

.crh-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--crh-radius-sm);

  /* Drop the illustration's white plate into the panel.
     The artwork is line art rendered on an opaque white background, so inside
     the pale blue frame it read as a white card sitting on a blue card —
     Adam: "the backgrounds of all these icon graphics need to be multiplied
     away so it's just the blue of the card."

     multiply keeps every ink pixel and turns white transparent, because
     anything multiplied by white is itself. It is the same treatment the
     house style uses for logo walls, and it needs no re-export of the
     images. The radius goes with it: once the plate is gone there is no
     rectangle left to round. */
  mix-blend-mode: multiply;
  background: transparent;
}

/* Show the WHOLE illustration, and give it room.

   This previously capped the height at 330px with object-fit: cover, which
   measured out at 150px of artwork discarded from every one of the eight
   figures (1200px in total). What cover trims first is the generous margin
   the illustrations were drawn with, so the icons ended up pressed against
   the edges of the frame — the opposite of the intent.

   contain keeps the full 3:2 drawing and letterboxes inside a slightly taller
   box, and the frame padding is increased so there is real space between the
   artwork and the panel edge rather than a tight crop. */
.crh-figure--wide .crh-figure__img {
  max-height: 400px;
  object-fit: contain;
  object-position: center;
}

.crh-figure__caption {
  margin: 12px 2px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--crh-grey);
}

/* An inset figure sits narrower and centred, for a detail rather than a
   full-width concept diagram. */
.crh-figure--inset { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   The theme's own footer CTA is USED on this template, not hidden
   ---------------------------------------------------------------------
   It was hidden here because the page carried a bespoke closing CTA and two
   stacked calls to action read worse than either alone. Jeana's answer was
   the other way round: "The CTA at the end is still getting lost. Needs
   replaced with our usual format with an image and shorter text."

   The theme's upperfooter IS that usual format — white card, short orange
   headline, photo alongside, orange button — and it takes per-page overrides
   through ACF (text_override, cta_label_override, cta_url_override,
   footer_image_override). So the bespoke CTA is gone and this one is
   configured instead, which also means it keeps matching if the house style
   changes.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Unlock screen
   ---------------------------------------------------------------------
   Replaces WordPress's default password form, which is an unstyled browser
   input and a Submit button floating in white space with no explanation —
   it reads as a broken page rather than a deliberate private preview.

   The hero still renders above this, so the reader sees the real headline,
   standfirst and bubbles and knows exactly what they are unlocking.
   --------------------------------------------------------------------- */

.crh-lock {
  padding: 56px 0 84px;
  background: linear-gradient(180deg, #fff 0%, var(--crh-blue-soft) 100%);
}

.crh-lock__card {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 46px 38px;
  background: #fff;
  border-radius: var(--crh-radius-lg);
  box-shadow: 0 18px 48px rgba(80, 110, 130, .16);
  text-align: center;
}

.crh-lock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--crh-orange-soft);
  color: var(--crh-orange);
}

.crh-lock__icon svg { width: 27px; height: 27px; }

.crh-lock__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--crh-heading);
}

.crh-lock__text {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--crh-text);
}

.crh-lock__form { margin: 0; }

/* Visually hidden, not display:none — the field still needs a programmatic
   label for screen readers even though the placeholder carries the visual
   cue. */
.crh-lock__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.crh-lock__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.crh-lock__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--crh-heading);
  padding: 14px 18px;
  border: 1.5px solid var(--crh-line);
  border-radius: 500px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.crh-lock__input::placeholder { color: #9aa6ad; }

.crh-lock__input:focus {
  outline: none;
  border-color: var(--crh-orange);
  box-shadow: 0 0 0 4px rgba(255, 136, 51, .16);
}

.crh-lock__btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--crh-orange);
  border: 0;
  border-radius: 500px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}

.crh-lock__btn:hover,
.crh-lock__btn:focus-visible {
  background: var(--crh-orange-dark);
  transform: translateY(-1px);
}

.crh-lock__note {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: var(--crh-grey);
}

/* While locked the hero is the whole page above the card, so it does not
   need its usual bottom rule running into an article that is not there. */
.crh-pillar__hero--locked { border-bottom: 0; }

@media (max-width: 767.98px) {
  .crh-lock { padding: 36px 0 56px; }
  .crh-lock__card { padding: 32px 22px 28px; border-radius: var(--crh-radius); }
  .crh-lock__title { font-size: 21px; }
  .crh-lock__text { font-size: 15px; }
  /* Stacked, so neither the field nor the button is squeezed on a phone. */
  .crh-lock__row { flex-direction: column; }
  .crh-lock__btn { padding: 14px 20px; }
}

/* ---------------------------------------------------------------------
   The laptop, borrowed from the Arize AI page
   ---------------------------------------------------------------------
   Jeana asked for "a laptop or computer screen behind the phrases ... but
   not a box", and Adam pointed at the Arize AI page for the one she means.

   These values are MEASURED off that live component rather than eyeballed:
     screen  #1d2733, radius 18px 18px 0 0, padding 24px 22px 26px,
             shadow 0 22px 50px rgba(60,64,67,.18)
     base    16px tall, 114% wide at left:-7%,
             linear-gradient(#cfd3d9, #a9afb8), radius 0 0 14px 14px,
             with a 96x7px notch centred on top
   Class names are prefixed crh-laptop so the two components stay
   independent — the Arize page keeps its own CSS untouched.

   Why this answers "not a box": the frame is a DEVICE, and the phrases sit
   on its screen. A panel drawn around text is a box; a screen showing a
   conversation is a place the conversation is happening.
   --------------------------------------------------------------------- */

.crh-laptop {
  max-width: 100%;
  margin: 0 auto;
}

.crh-laptop__screen {
  position: relative;
  background: #1d2733;
  border-radius: 18px 18px 0 0;
  padding: 16px 14px 18px;
  box-shadow: 0 22px 50px rgba(60, 64, 67, .18);
}

/* The screen wallpaper.
   Adam: "just the background wallpaper is missing."

   It is not a gradient — the Arize screen loads a real photograph,
   arize-screen-bg.jpg, on .arize-chat-thread::before at background-size:cover
   with filter:blur(2px), then lays a dark scrim over it on ::after
   (linear-gradient rgba(10,15,22,.58) -> rgba(10,15,22,.66)). My first
   attempt approximated it with a pale CSS gradient, which is why it read as
   missing rather than wrong: on a light panel there was nothing to see.

   Same asset, same treatment, so the two screens match. */
.crh-laptop__chat {
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  padding: 26px 24px;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}

.crh-laptop__chat::before,
.crh-laptop__chat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* The photograph, blurred as on the Arize screen. */
.crh-laptop__chat::before {
  background-image: url("/wp-content/uploads/2026/06/arize-screen-bg.jpg");
  background-size: cover;
  background-position: 50% 50%;
  filter: blur(2px);
}

/* The scrim, so white text and pale bubbles stay legible over any part of
   the photo. */
.crh-laptop__chat::after {
  background: linear-gradient(rgba(10, 15, 22, .58), rgba(10, 15, 22, .66));
}

/* One exchange at a time: a question row and an answer row, each holding a
   single bubble that the typewriter fills. */
.crh-laptop__row { display: flex; }
.crh-laptop__row--q { justify-content: flex-end; }
.crh-laptop__row--a { justify-content: flex-start; }

.crh-laptop__bubble {
  max-width: 82%;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 11px 16px;

  /* Hidden until the typewriter reaches it, and faded out on dismiss — the
     pairs replace each other rather than stacking up. */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}

.crh-laptop__bubble.is-in { opacity: 1; transform: translateY(0); }
.crh-laptop__bubble.is-out { opacity: 0; transform: translateY(-4px); }

/* Bubble values taken from the Arize bubbles, scaled for the smaller hero
   screen: user/question is #ff8833 white 600-weight with a bottom-right
   tail, assistant/answer is #eef1f4 on #2b3138 with a bottom-left tail. */
.crh-laptop__bubble--q {
  background: #ff8833;
  color: #fff;
  font-weight: 600;
  border-radius: 16px 16px 5px 16px;
  box-shadow: 0 6px 18px rgba(60, 64, 67, .18);
}

.crh-laptop__bubble--a {
  background: #eef1f4;
  color: #2b3138;
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 6px 18px rgba(60, 64, 67, .18);
}

/* A caret while typing, so the animation reads as typing rather than as text
   appearing. Only on the bubble currently being filled. */
.crh-laptop__bubble.is-in span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  background: currentColor;
  animation: crh-caret 1s steps(1) infinite;
}

.crh-laptop__bubble.is-out span::after { display: none; }

@keyframes crh-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crh-laptop__bubble { transition: none; }
  .crh-laptop__bubble.is-in span::after { animation: none; opacity: 0; }
}

/* The base sits wider than the screen, as a real laptop's does. */
.crh-laptop__base {
  position: relative;
  height: 14px;
  width: 112%;
  left: -6%;
  margin: 0 auto;
  background: linear-gradient(#cfd3d9, #a9afb8);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 20px rgba(60, 64, 67, .2);
}

/* The notch — the thumb recess on the front edge of the lid. */
.crh-laptop__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 6px;
  background: #8a909a;
  border-radius: 0 0 8px 8px;
}

@media (max-width: 1099.98px) {
  /* The device only appears where the two-column hero does. */
  .crh-laptop { display: none; }
}

/* ---------------------------------------------------------------------
   Back to top
   ---------------------------------------------------------------------
   Jeana: "Wondering if we should add a way to go back to the top or back up
   to the 'Jump to a Term' box." Fixed bottom-right per Adam.

   Hidden until the reader is a screen or so down — a back-to-top control
   visible at the top of the page is noise. Sits above the article but below
   the mobile term-index drawer, so the two never fight.
   --------------------------------------------------------------------- */

.crh-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 11px 16px 11px 13px;
  border-radius: 500px;
  background: var(--crh-heading);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(40, 60, 75, .28);

  /* Hidden by default; the script adds is-visible past the threshold. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease,
              background-color .16s ease;
}

.crh-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.crh-totop:hover,
.crh-totop:focus-visible {
  background: var(--crh-orange);
  color: #fff;
}

.crh-totop svg { width: 15px; height: 15px; }

@media (max-width: 767.98px) {
  /* Clear of the fixed term-index drawer at the bottom of the viewport. */
  .crh-totop {
    right: 14px;
    bottom: 68px;
    padding: 10px 14px 10px 11px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crh-totop { transition: opacity .2s ease, visibility .2s ease; transform: none; }
  .crh-totop.is-visible { transform: none; }
}

/* --- inline related link ---------------------------------------- */

/* NOT .crh-related — that class already belongs to the hub's full-width
   "Related resources" band (background + 62px/72px padding), and reusing the
   name gave this one-line link a huge grey box around it. Distinct name,
   distinct component.

   Styled as a quiet aside: a left rule in the house orange, no fill, so it
   reads as a pointer out of the article rather than a card competing with
   the term sets around it. */
.crh-inline-related {
  margin: 26px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--crh-orange);
  font-size: 16px;
  line-height: 1.6;
}

.crh-inline-related em {
  font-style: normal;
  font-weight: 600;
  color: var(--crh-grey);
  margin-right: 4px;
}

.crh-inline-related a {
  color: var(--crh-orange);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 136, 51, .35);
}

.crh-inline-related a:hover,
.crh-inline-related a:focus-visible {
  color: var(--crh-orange-dark);
  border-bottom-color: var(--crh-orange-dark);
}

/* --- term index (grouped) --------------------------------------- */

/* Full page width was the OLD requirement, and it is what made this read as
   a footer. Jeana: "The blue jump to a term box going all the way across the
   bottom looks too much like a footer... It's not clear that you can just
   keep scrolling."

   So the card is inset with real white margin either side. It still uses the
   page's width rather than the article measure — it is a strip of short
   chips, not body copy — but it no longer runs edge to edge.

   This rule and the one earlier in the file both targeted the same selector;
   the later one won and silently reverted the inset. They are now merged
   here, and the earlier block only handles the section wrapper. */
.crh-termindex .crh-container {
  max-width: 1280px;
  padding-left: 34px;
  padding-right: 34px;
}

.crh-termindex__groups {
  /* Four columns at every width.
     Eight columns above 1500px made each one ~140px wide, which forced the
     long comparison names onto three lines and into the clamp that was
     cutting them mid-word. Four columns give each name room to sit on one or
     two lines, and the eight groups still divide evenly into two tidy rows. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 26px;
  align-items: start;
}

.crh-termindex__gname {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--crh-grey);
  margin: 0 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--crh-line);

  /* Dividers line up across a row, WITHOUT truncating a title.
     The divider is this element's bottom border, so it sits wherever the
     title ends — a two-line name and a one-line name drew their rules 19px
     apart. Clamping to two lines fixed the alignment and introduced a worse
     defect: three names needed a third line and were cut mid-word
     ("Interfaced, Integrated, or..." / "Certified, Compliant, or..." /
     "Cloud, Cloud-native, Hosted, or...").

     Three lines is the real maximum for these names at this column width, so
     the box reserves three and clamps at three — every divider still lands on
     the same y, and nothing is cut. A name that somehow needed a fourth line
     would truncate, which is why the column count is capped below so this
     cannot drift back into three-line territory. */
  line-height: 1.45;
  height: calc(3 * 1.45em + 8px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .crh-termindex__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .crh-termindex__groups { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .crh-termindex__gname { min-height: 0; }
}

/* --- closing CTA ----------------------------------------------- */

.crh-pillar__cta {
  background: var(--crh-light);
  padding: 46px 0;
  margin-top: 20px;
}

.crh-pillar__cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.crh-pillar__cta-title {
  font-size: 27px;
  font-weight: 600;
  color: var(--crh-heading);
  margin: 0 0 8px;
  line-height: 1.28;
}

.crh-pillar__cta-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--crh-text);
  max-width: 62ch;
}

/* --- responsive ------------------------------------------------ */

@media (max-width: 991.98px) {
  .crh-pillar__title { font-size: 34px; }
  .crh-pillar__standfirst { font-size: 16.5px; }
  .crh-termset--cols3,
  .crh-termset--cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crh-pillar__hero-img { height: 220px; }
  .crh-pillar__fact { padding: 0 22px; }
}

@media (max-width: 767.98px) {
  .crh-pillar__hero { padding: 34px 0 0; }
  .crh-pillar__hero-inner { padding-bottom: 32px; }
  .crh-pillar__title { font-size: 27px; line-height: 1.3; }
  .crh-pillar__standfirst { font-size: 16px; line-height: 1.72; margin-bottom: 24px; }

  /* Full-width button: a 13px label in a 500px-radius pill is already a
     small tap target at this size, so it spans the column. */
  .crh-pillar__actions { margin-bottom: 28px; }
  .crh-pillar__btn { width: 100%; text-align: center; padding: 17px 22px; }

  /* The facts strip becomes a 2-up grid rather than a flex row. Left borders
     on a wrapped flex row leave a stray rule at the start of the second line,
     so the separators are dropped entirely here. */
  .crh-pillar__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    padding-top: 18px;
  }
  .crh-pillar__fact { padding: 0; border-left: 0; }
  .crh-pillar__fact-num { font-size: 24px; }

  .crh-pillar__hero-img { height: 170px; border-radius: 14px 14px 0 0; }

  .crh-termset,
  .crh-termset--cols2,
  .crh-termset--cols3,
  .crh-termset--cols4 { grid-template-columns: minmax(0, 1fr); }

  .crh-answer { padding: 20px 20px 20px 22px; }
  .crh-analogy { padding: 20px; gap: 14px; }
  .crh-ask,
  .crh-playbook { padding: 20px; }

  /* A 3+ column table cannot be read on a phone by scrolling sideways, so
     each row becomes its own stacked card with the column name carried in
     from the header via data-label. */
  .crh-compare { overflow-x: visible; }
  .crh-compare__table,
  .crh-compare__table tbody,
  .crh-compare__table tr,
  .crh-compare__table th,
  .crh-compare__table td { display: block; width: 100%; }

  /* The caption MUST be re-declared as a block here.
     Making the <table> display:block leaves <caption> at its default
     `display: table-caption`, which has no table box left to size against:
     measured 13px wide at 390px, so the sentence rendered one character per
     line as a vertical strip. It is not covered by the rule above because a
     caption is not a th/td/tr/tbody. */
  .crh-compare__table caption,
  .crh-compare__caption {
    display: block;
    width: 100%;
  }

  .crh-compare__table thead { display: none; }

  .crh-compare__table tbody tr {
    background: #fff;
    border-radius: var(--crh-radius-sm);
    box-shadow: rgba(99, 99, 99, .12) 0 1px 4px;
    margin-bottom: 14px;
    padding: 4px 0;
    overflow: hidden;
  }

  .crh-compare__table tbody th {
    white-space: normal;
    background: var(--crh-light);
    border-bottom: 1px solid var(--crh-line);
  }

  .crh-compare__table tbody td { border-bottom: 1px solid var(--crh-line); }
  .crh-compare__table tbody tr td:last-child { border-bottom: 0; }

  .crh-compare__table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--crh-grey);
    margin-bottom: 4px;
  }

  .crh-figure__frame { padding: 20px 20px; }
  .crh-figure--wide .crh-figure__img { max-height: 260px; }

  .crh-pillar__cta-inner { flex-direction: column; align-items: flex-start; }
  .crh-pillar__cta-title { font-size: 23px; }
}

/* Pillar closing CTA shares the article's measured column.
   The body section narrows its container to 720px and centres it once the
   floating TOC appears (see the rule above).

   The HERO and TERM INDEX are deliberately NOT constrained: they are
   full-bleed bands, and centring them in a 720px column left the index
   indented ~445px from the hero's left edge, which read as two different
   pages stacked. They keep the theme's own 1280px container, which is what
   every other band on the site uses, so all three share one left edge. */
@media (min-width: 1200px) {
  .crh-single--has-toc .crh-pillar__cta .crh-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===================================================================
   MOBILE PASS — pillar page
   ===================================================================

   Everything here is a response to a MEASURED problem on real phone
   viewports (375 / 390 / 430, cache disabled). The audit that produced this
   list is audit-mobile.js; the numbers quoted are its output, not estimates.

   Findings, in the order they hurt a reader:

   1. Body copy computed to 14px. The rules above set 16px on .crh-article and
      relied on inheritance, but the theme styles `p` DIRECTLY, and a direct
      rule beats an inherited value regardless of specificity. So the size has
      to be set on the paragraphs themselves, not the container. 14px is below
      what anyone should have to read on a phone.

   2. The page is 32,474px tall — roughly 38 screens. The consumers are not
      padding: term sets are 5,385px and the 24 term cards inside them another
      5,129px, together a third of the page, because a three-across comparison
      becomes three stacked cards on a phone. Tightening the cards is worth
      more than trimming every margin on the page.

   3. The table of contents is display:none below 1200px, so the one page on
      the site that most needs navigation has none on the device most likely
      to be used. The term index is the mobile answer — it is already grouped
      by comparison — so it becomes a sticky, collapsible strip instead of a
      1,505px block the reader scrolls past once and cannot return to.

   4. Supporting labels were 11.5–13.5px (analogy title, ask title, figure
      caption, table header).

   5. Term-index chips were 36px tall against a 44px minimum tap target.
   =================================================================== */

@media (max-width: 767.98px) {

  /* --- 1. readable body copy ------------------------------------- */

  /* Set on the paragraphs, not the container: the theme's own `p` rule is a
     direct match and wins over any inherited size. */
  .crh-article,
  .crh-article > p,
  .crh-article > ul > li,
  .crh-article > ol > li,
  .crh-why p,
  .crh-why li,
  .crh-analogy__text p,
  .crh-term__body p,
  .crh-answer__body p {
    font-size: 16.5px;
    line-height: 1.7;
  }

  .crh-article > p { margin: 0 0 18px; }

  /* The lede keeps its role on a phone, just smaller.
     The block above sets every article paragraph to 16.5px, which would
     otherwise flatten the opening line back into body copy — it is listed
     after, and more specifically, so it wins. */
  .crh-article > p:first-of-type:first-child {
    font-size: 19.5px;
    line-height: 1.5;
    margin-bottom: 22px;
  }

  /* --- 4. supporting labels lifted off the floor ----------------- */

  .crh-analogy__title,
  .crh-ask__title { font-size: 13px; }

  .crh-figure__caption { font-size: 14.5px; line-height: 1.5; }

  .crh-compare__table th,
  .crh-compare__table td { font-size: 15.5px; }

  .crh-compare__table td::before {
    /* The stacked table's column label. Small is fine — it is a label, not
       prose — but it must not be smaller than the caption. */
    font-size: 12.5px;
  }

  .crh-faq__q { font-size: 16.5px; }
  .crh-faq__a p { font-size: 16px; line-height: 1.68; }
  .crh-ask__item { font-size: 16px; line-height: 1.6; }
  .crh-playbook__title { font-size: 20px; }
  .crh-playbook__label { font-size: 16.5px; }
  .crh-playbook__text { font-size: 15.5px; }

  /* --- 2. reclaim vertical space -------------------------------- */

  /* Term cards: the single biggest consumer. A phone shows one card at a
     time, so the card does not need desktop's internal padding to feel
     separated — the stacking does that. */
  .crh-term { padding: 16px 18px 15px; }
  .crh-term__name { font-size: 16.5px; margin: 0 0 6px; }
  .crh-termset { gap: 12px; margin: 22px 0; }

  .crh-analogy { padding: 20px 20px; margin: 22px 0; gap: 14px; }
  .crh-analogy__mark { width: 32px; height: 32px; }
  .crh-analogy__mark svg { width: 17px; height: 17px; }

  .crh-why { margin: 24px 0; padding: 18px 0 2px; }
  .crh-ask { padding: 20px 20px; margin: 24px 0; }
  .crh-figure { margin: 22px 0 26px; }

  .crh-faq { padding: 24px 20px; margin: 32px 0 28px; }
  .crh-playbook { padding: 24px 20px; }

  /* Headings carry the section rhythm, so they keep their weight but lose
     the desktop gap above them. */
  .crh-article > h2 { font-size: 23px; margin-top: 34px; margin-bottom: 12px; }
  .crh-article > h3 { font-size: 19px; margin-top: 26px; }

  /* --- 5. tap targets ------------------------------------------- */

  .crh-termindex__link {
    /* 36px measured; 44px is the accessible minimum. */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 15.5px;
  }

  .crh-faq__q { min-height: 52px; }
}

/* --- 3. a usable table of contents on mobile ---------------------
   The term index becomes a sticky, collapsible navigator. Collapsed it is a
   single bar; opened it shows the same comparison groups as the desktop
   index. It sits at the bottom so it never fights the theme's 186px sticky
   header, and it is hidden until the reader has actually entered the article
   (handled in JS) so it does not cover the hero.
   ---------------------------------------------------------------- */

@media (max-width: 767.98px) {

  .crh-termindex {
    /* FIXED, not sticky.
       sticky was measured scrolling away: its bottom went to -1111px inside
       the article at 390px wide. sticky only pins within its own scrolling
       ancestor, and this theme runs GSAP ScrollSmoother, which transforms a
       wrapper — a transformed ancestor becomes the containing block, so the
       element sticks to a box that is itself being moved off screen. fixed
       against the viewport is immune to that, and it is what the desktop TOC
       panel in this same stylesheet already does for the same reason. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid var(--crh-line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  }

  /* The index no longer occupies flow space, so give the article room to
     scroll past the bar rather than ending underneath it. */
  .crh-single__body-section { padding-bottom: 72px; }

  .crh-termindex .crh-container { padding: 0; }

  /* The label is the toggle. */
  .crh-termindex__label {
    display: flex;
    align-items: center;
    /* Not space-between.
       space-between pushed the caret to the far right edge of a full-width
       bar, which is exactly where the UserWay accessibility button sits:
       measured at x 325-369, y 787-831 on a 390px viewport, a 44px target
       covering the caret. The label and caret now sit together on the left,
       and the padding-right below keeps the whole tappable row clear of the
       widget. */
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 76px 14px 20px;
    min-height: 52px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--crh-orange);
    cursor: pointer;
    user-select: none;
  }

  /* The caret leads the label rather than trailing at the edge. */
  .crh-termindex__label::before {
    content: "";
    flex: 0 0 auto;
    order: -1;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
  }

  .crh-termindex.is-open .crh-termindex__label::before {
    transform: rotate(45deg);
  }

  .crh-termindex__groups {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 4px 20px 18px;
    max-height: 58vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .crh-termindex.is-open .crh-termindex__groups { display: grid; }

  .crh-termindex__gname {
    min-height: 0;
    margin: 0 0 8px;
    font-size: 12.5px;
  }

  /* Inside the drawer the chips can run two-up: they are short, and this
     halves the drawer's height. */
  .crh-termindex__group .crh-termindex__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}